:root {
  --bg-top: #0a1322; --bg: #060a14; --bg2: #040912;
  --ink: rgba(255,255,255,.76); --dim: rgba(255,255,255,.45);
  --faint: rgba(255,255,255,.24); --accent: #5cd9ff;
  --accent-soft: rgba(92,217,255,.55); --glow: 0 0 16px rgba(92,217,255,.32);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body {
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-top), var(--bg) 46%, var(--bg2));
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.stage { position: fixed; inset: 0; }
canvas { display: block; width: 100%; height: 100%; }
.readout {
  position: fixed; left: 0; right: 0; bottom: clamp(18px, 5vh, 44px);
  display: flex; justify-content: center; align-items: baseline; gap: .08ch;
  pointer-events: none; text-shadow: var(--glow);
}
.time {
  color: var(--accent); font-size: clamp(25px, 6vw, 58px); font-weight: 700;
  letter-spacing: .04em; line-height: 1; font-variant-numeric: tabular-nums;
}
.sep {
  color: var(--accent-soft); font-size: clamp(20px, 4.7vw, 44px);
  font-weight: 700; line-height: 1; animation: blink 1s steps(1,end) infinite;
}
.meta {
  color: var(--dim); font-size: clamp(7px, 1.4vw, 10px); letter-spacing: .16em;
  margin-left: 1ch; text-transform: uppercase;
}
@keyframes blink { 50% { opacity: .3; } }
.help {
  position: fixed; top: 6px; right: 6px; z-index: 5; width: 44px; height: 44px;
  display: grid; place-items: center; color: var(--dim); text-decoration: none;
  font-size: 16px; font-weight: 700;
}
.help:hover, .help:focus { color: var(--accent); }
.help:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) { .sep { animation: none; } }