:root { color-scheme: dark; --bg: #06080d; --fg: 233, 237, 245; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body { font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: rgb(var(--fg)); -webkit-tap-highlight-color: transparent; }

#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: var(--bg); }

/* The tagline lives in the canvas; this copy is for screen readers, search engines and the no-WebGL fallback. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid rgba(var(--fg), .9); outline-offset: 3px; border-radius: 4px; }

/* sound toggle */
#snd[hidden] { display: none; }
#snd {
  position: fixed; z-index: 3;
  top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(6, 8, 13, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: rgba(var(--fg), .78); transition: color .2s, background .2s, opacity .6s;
  opacity: 0; pointer-events: none;
}
html.ready #snd { opacity: 1; pointer-events: auto; }
#snd:hover { color: rgb(var(--fg)); background: rgba(6, 8, 13, .6); }
#snd svg { width: 22px; height: 22px; flex: none; }
#snd .lbl { font-size: 13px; letter-spacing: .03em; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s; }
#snd[data-state="blocked"] .lbl { max-width: 80px; }
#snd[data-state="blocked"] { animation: nudge 2.4s ease-in-out infinite; }
#snd .w { display: none; } #snd .x { display: none; }
#snd[data-state="on"] .w, #snd[data-state="wait"] .w { display: inline; }
#snd[data-state="off"] .x, #snd[data-state="blocked"] .x { display: inline; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--fg), 0); } 50% { box-shadow: 0 0 0 6px rgba(var(--fg), .14); } }

/* skip */
#skip {
  position: fixed; z-index: 3; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  font-size: 12px; letter-spacing: .05em; color: rgba(var(--fg), .5); padding: 10px 6px; min-height: 44px;
  opacity: 0; pointer-events: none; transition: opacity .8s, color .2s;
}
html.ready:not(.done) #skip { opacity: 1; pointer-events: auto; }
#skip:hover { color: rgba(var(--fg), .9); }
#skip kbd { font: inherit; border: 1px solid rgba(var(--fg), .3); border-radius: 4px; padding: 0 5px; margin-right: 6px; }
@media (hover: none) { #skip kbd { display: none; } }

/* the small closing line */
#cta {
  position: fixed; z-index: 2; left: 0; right: 0; margin: 0; text-align: center;
  bottom: max(20px, env(safe-area-inset-bottom)); padding: 0 16px;
  font-size: 13px; letter-spacing: .04em; color: rgba(var(--fg), .66);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity 2.6s ease;
}
#cta.on, #cta:focus-within { opacity: 1; }
#cta a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(var(--fg), .3); padding-bottom: 1px; transition: border-color .2s, color .2s; }
#cta a:hover { color: rgb(var(--fg)); border-color: rgba(var(--fg), .8); }
#cta span { white-space: nowrap; }
html.done #skip { display: none; }

/* headless tests: no transitions, so screenshots show the settled state */
html.test *, html.test *::before { transition: none !important; animation: none !important; }

/* cross-fade used when skipping */
#dip { position: fixed; inset: 0; z-index: 1; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
#dip.on { opacity: 1; }

/* replay hint for reduced-motion visitors */
#play { position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); top: max(14px, env(safe-area-inset-top)); font-size: 12px; letter-spacing: .05em; color: rgba(var(--fg), .6); padding: 12px 8px; display: none; }
html.still #play { display: block; }
#play:hover { color: rgb(var(--fg)); }

/* static fallback: no WebGL, no JavaScript, or a broken production */
html.static body, html.static #c { background: radial-gradient(120% 90% at 50% 40%, #121a2b 0%, #06080d 70%); }
html.static #c, html.static #snd, html.static #skip { display: none; }
html.static .sr { position: fixed; inset: 0; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; white-space: normal; font-size: clamp(30px, 8vw, 84px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; padding: 0 20px; }
html.static .sr span { display: block; }
html.static .sr span:first-child, html.static .sr span:nth-child(2) { font-size: .62em; font-weight: 700; opacity: .86; }
html.static #cta { opacity: 1; }