* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #07080c;
  background-image:
    radial-gradient(circle at 50% 30%, #171b28 0%, #07080c 70%);
  color: #8794a6;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
#frame {
  position: relative;
  line-height: 0;
  border: 3px solid #2b3242;
  border-radius: 4px;
  box-shadow:
    0 0 0 3px #12151d,
    0 0 34px rgba(90, 200, 255, .10),
    0 18px 50px rgba(0, 0, 0, .65);
  background: #0b0d12;
}
canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#scan {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.16) 3px,
    rgba(0,0,0,.16) 4px
  );
  mix-blend-mode: multiply;
}
#hint {
  margin: 0;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #5c6779;
}
#hint b { color: #a8b6c9; font-weight: 600; }