:root {
  --bg-deep: #030c07;
  --bg-mid: #061a10;
}
html, body {
  margin: 0;
  background:
    radial-gradient(ellipse at top, #0a2a1a 0%, #030c07 55%, #01060300 100%),
    repeating-linear-gradient(0deg, rgba(0,255,140,0.03) 0px, rgba(0,255,140,0.03) 1px, transparent 1px, transparent 3px),
    #020805;
  background-attachment: fixed;
  color: #d7ffe8;
  min-height: 100vh;
}

/* subtle CRT flicker on the title area */
h1 {
  text-shadow: 0 0 8px rgba(0,255,140,0.5), 0 0 20px rgba(0,255,140,0.25);
}

canvas {
  background: #04120a;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 0 12px rgba(0,255,140,0.08);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #051a10; }
::-webkit-scrollbar-thumb { background: #1a5c3a; border-radius: 4px; }

input[type=range] { cursor: pointer; }

button:disabled { opacity: 0.4; cursor: not-allowed; }

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}
h1 { animation: flicker 4s infinite; }