:root {
  --bg: #060a08;
  --fg: #d6ffe0;
  --accent: #39ff88;
  --muted: #5f8f72;
  --err: #ff6b6b;
  --warn: #ffbd2e;
  --line: #163322;
  --panel: rgba(8, 18, 12, 0.78);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  min-height: 100vh;
  min-height: 100dvh;
}

canvas#rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.crt-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.4) 100%),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 1px, rgba(0,0,0,0.14) 2px, rgba(0,0,0,0.14) 3px);
  animation: crtFlicker 6s infinite;
}
@keyframes crtFlicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.94; }
  94% { opacity: 1; }
  96% { opacity: 0.97; }
  97% { opacity: 1; }
}