:root {
  color-scheme: dark;
  --px: 4px; /* one pixel of the picture; demo.js sets it */
}

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

/* No system pointer: demo.js draws the mouse as an inverted cell, the way text mode did. */
body {
  display: grid;
  place-items: center;
  cursor: none;
}

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

/* A scanline under every row of the picture, and the tube's darker corners. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  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) - 1px),
      rgba(0, 0, 0, 0.3) calc(var(--px) - 1px),
      rgba(0, 0, 0, 0.3) var(--px)
    );
}

/* The faint bright band that rolls down a CRT. */
body::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: -20%;
  height: 20%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, rgba(160, 255, 200, 0.05), transparent);
  animation: roll 7s linear infinite;
}

@keyframes roll {
  to {
    transform: translateY(600%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    display: none;
  }
}