html, body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#cabinet {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 2px #15151f, 0 0 60px rgba(90, 160, 255, 0.18);
}

#screen {
  display: block;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* CRT overlay: vignette always, scanlines once each logical pixel is >= 3 device px */
#crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
}

#crt.scan {
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6) 100%),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--px) * 0.65),
      rgba(0, 0, 0, 0.3) calc(var(--px) * 0.65), rgba(0, 0, 0, 0.3) var(--px));
}