/* Layout: one fixed WebGL stage behind the page; nineteen tall sections scroll over it; each caption is a title plus one sentence at a time (story beats).
   Space scenes are deep navy, explanation scenes are cool off-white; the stage and the text swap theme per scene. */
:root{
  --dark-bg:#0A0F1E; --dark-fg:#F2F4F8; --dark-fg2:#9AA3B5;
  --light-bg:#EEF1F5; --light-fg:#0E1420; --light-fg2:#5B6476;
  --bg:var(--dark-bg); --fg:var(--dark-fg); --fg2:var(--dark-fg2);
  --pulsar:#4DA3FF; --neutrino:#FF7A45; --tau:#B36BFF;
  --display:"Outfit","Segoe UI",system-ui,sans-serif;
  --body:"DM Sans","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --vh:100vh; color-scheme:dark;
}
@supports (height:100svh){ :root{ --vh:100svh; } }
html,body{ overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:clamp(16px,1.05vw,19px); line-height:1.5;
  -webkit-font-smoothing:antialiased; transition:color .5s var(--ease),background-color .5s var(--ease);
}
body[data-theme="light"]{ --bg:var(--light-bg); --fg:var(--light-fg); --fg2:var(--light-fg2); color-scheme:light; }
*,*::before,*::after{ box-sizing:border-box; }
h1,h2,p,ul{ margin:0; } ul{ padding:0; list-style:none; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--pulsar); outline-offset:3px; border-radius:6px; }

#stage{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; }
#curtain{ position:fixed; inset:0; z-index:1; pointer-events:none; background:var(--bg); opacity:0; }
#flash{ position:fixed; inset:0; z-index:1; pointer-events:none; background:#fff; opacity:0; mix-blend-mode:screen; }
#nogl{ position:fixed; inset:0; z-index:3; display:none; place-items:center; text-align:center; padding:24px; background:var(--dark-bg); color:var(--dark-fg); }
#nogl.on{ display:grid; }

/* chrome */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));
  font-family:var(--display); font-size:13px; letter-spacing:.02em; pointer-events:none;
}
.bar > *{ pointer-events:auto; }
.bar__mark{ display:flex; align-items:center; gap:10px; font-weight:600; text-decoration:none; }
.bar__mark i{ width:8px; height:8px; border-radius:50%; background:var(--pulsar); box-shadow:0 0 12px var(--pulsar); }
.bar__right{ display:flex; align-items:center; gap:10px; }
.bar__scene{ color:var(--fg2); font-variant-numeric:tabular-nums; }
.quality{
  display:inline-flex; align-items:center; gap:0; border:1px solid color-mix(in oklab,var(--fg) 22%,transparent); border-radius:999px; padding:3px; background:color-mix(in oklab,var(--bg) 70%,transparent);
}
.quality button{
  font:inherit; font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--fg2); background:transparent; border:0; border-radius:999px; padding:6px 12px; cursor:pointer; min-height:28px;
  transition:background-color .3s,color .3s;
}
.quality button[aria-pressed="true"]{ background:var(--fg); color:var(--bg); }
.toast{
  position:fixed; z-index:21; left:50%; top:calc(env(safe-area-inset-top,0px) + 60px); transform:translate(-50%,-10px); max-width:calc(100vw - 32px); text-align:center;
  padding:10px 16px; border-radius:999px; background:var(--fg); color:var(--bg); font-family:var(--display); font-size:13px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.toast.on{ opacity:1; transform:translate(-50%,0); }
.progress{ position:fixed; z-index:20; left:0; top:env(safe-area-inset-top,0px); height:3px; width:100%; background:var(--pulsar); transform-origin:left; transform:scaleX(0); }

/* sections */
main{ position:relative; z-index:2; }
.sec{ position:relative; height:calc(var(--len,1.4) * var(--vh)); }
.sec__cap{
  position:sticky; top:0; height:var(--vh); display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + clamp(28px,7vh,80px)) max(16px,env(safe-area-inset-left,0px));
  pointer-events:none;
}
.sec__cap > *{ pointer-events:auto; }
.cap{ max-width:min(620px,100%); opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease),transform .8s var(--ease); }
.cap.on{ opacity:1; transform:none; }
.cap__k{ font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg2); margin-bottom:14px; }
.cap__k b{ color:var(--pulsar); font-weight:700; }
.sec[data-accent="n"] .cap__k b{ color:var(--neutrino); }
.cap h2,.cap h1{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,5.2vw,4.6rem); line-height:1; letter-spacing:-.025em; text-wrap:balance; margin-bottom:14px; }
.cap h1{ font-size:clamp(2.6rem,7.2vw,6.6rem); letter-spacing:-.035em; }
.cap h1 em,.cap h2 em{ font-style:normal; color:var(--pulsar); }
.sec[data-accent="n"] .cap h2 em{ color:var(--neutrino); }
.cap p{ font-size:clamp(1.02rem,1.35vw,1.3rem); line-height:1.5; color:var(--fg2); max-width:52ch; text-wrap:pretty; }
.cap p strong{ color:var(--fg); font-weight:600; }
/* keeps captions legible over bright 3D without a visible panel */
.cap h1,.cap h2,.cap p{ text-shadow:0 1px 18px color-mix(in oklab,var(--bg) 80%,transparent),0 0 2px color-mix(in oklab,var(--bg) 60%,transparent); }
.hint{ display:flex; align-items:center; gap:10px; margin-top:22px; font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg2); }
.hint i{ width:22px; height:34px; border:1.5px solid color-mix(in oklab,var(--fg) 40%,transparent); border-radius:12px; position:relative; }
.hint i::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px; background:var(--pulsar); animation:wheel 1.8s var(--ease) infinite; }
@keyframes wheel{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(12px); opacity:0; } 100%{ transform:translateY(0); opacity:0; } }

/* floating labels projected from 3D */
.lbl{
  position:fixed; z-index:3; left:0; top:0; transform:translate(-50%,-50%); pointer-events:none; opacity:0; transition:opacity .4s var(--ease);
  font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg2); text-align:center; white-space:nowrap;
}
.lbl b{ display:block; font-size:clamp(1rem,1.6vw,1.4rem); letter-spacing:-.01em; text-transform:none; color:var(--fg); font-variant-numeric:tabular-nums; }
.lbl.on{ opacity:1; }
.lbl.n{ color:var(--neutrino); } .lbl.n b{ color:var(--neutrino); }
.lbl.m{ color:var(--pulsar); } .lbl.m b{ color:var(--pulsar); }
.lbl.t{ color:var(--tau); } .lbl.t b{ color:var(--tau); }
.lbl.pill{ padding:6px 12px 7px; border-radius:12px; background:rgba(10,15,30,.72); color:#9AA3B5; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(242,244,248,.12); }
.lbl.pill b{ color:#F2F4F8; font-size:clamp(.9rem,1.25vw,1.15rem); } .lbl.pill.m b{ color:var(--pulsar); }

/* final section extras */
.sources{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; font-size:13px; color:var(--fg2); }
.sources a{ color:var(--fg2); text-decoration:underline; text-underline-offset:4px; text-decoration-color:color-mix(in oklab,var(--fg) 25%,transparent); }
.sources a:hover{ color:var(--fg); }
.foot{ margin-top:18px; font-family:var(--display); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg2); }

@media (max-width:700px){
  .bar{ font-size:12px; }
  .bar__scene{ display:none; }
  .cap h1{ font-size:clamp(2.4rem,11vw,3.6rem); }
  .cap h2{ font-size:clamp(1.8rem,8.2vw,2.6rem); }
  .lbl{ font-size:10px; }
}
@media (prefers-reduced-motion:reduce){
  .cap,.toast{ transition:none; } .hint i::after{ animation:none; }
}

/* fact chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chips li{ font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.01em; padding:6px 12px; border-radius:999px; color:var(--fg);
  background:color-mix(in oklab,var(--bg) 62%,transparent); border:1px solid color-mix(in oklab,var(--fg) 16%,transparent); font-variant-numeric:tabular-nums;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease),transform .6s var(--ease); }
.cap.on .chips li{ opacity:1; transform:none; }
.cap.on .chips li:nth-child(2){ transition-delay:.08s; } .cap.on .chips li:nth-child(3){ transition-delay:.16s; }
.chips li:first-child{ border-color:color-mix(in oklab,var(--pulsar) 55%,transparent); }
.sec[data-accent="n"] .chips li:first-child{ border-color:color-mix(in oklab,var(--neutrino) 55%,transparent); }

@media (max-width:700px){
  .chips{ gap:6px; margin-top:14px; } .chips li{ font-size:12px; padding:5px 10px; }
}
@media (max-height:640px) and (min-width:701px){ .chips{ margin-top:12px; } .cap p{ font-size:1rem; } }
@media (prefers-reduced-motion:reduce){ .chips li{ transition:none; } }

/* story beats: sentences stacked in one grid cell so the caption never jumps */
.beats{ display:grid; }
.beats .beat{ grid-area:1/1; opacity:0; transform:translateY(10px); transition:opacity .55s var(--ease),transform .7s var(--ease); }
.beats .beat.on{ opacity:1; transform:none; transition-delay:.12s; }
.cap:not(.on) .beat{ transition-delay:0s; }
/* chapter intertitles */
#chapter{ position:fixed; inset:0; z-index:4; display:grid; place-items:center; pointer-events:none; opacity:0; transition:opacity .7s var(--ease);
  background:radial-gradient(60% 50% at 50% 50%,color-mix(in oklab,var(--bg) 55%,transparent),transparent 75%); }
#chapter.on{ opacity:1; }
.chapter__in{ display:grid; justify-items:center; gap:14px; padding:24px; text-align:center; transform:translateY(12px) scale(.985); transition:transform 1.1s var(--ease); }
#chapter.on .chapter__in{ transform:none; }
.chapter__k{ font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--pulsar); padding-left:.32em; }
#chapter.n .chapter__k{ color:var(--neutrino); }
.chapter__rule{ display:block; width:48px; height:1px; background:color-mix(in oklab,var(--fg) 35%,transparent); }
.chapter__t{ font-family:var(--display); font-weight:700; font-size:clamp(2.4rem,7vw,6.2rem); line-height:1; letter-spacing:-.035em; color:var(--fg); text-wrap:balance; }
.chapter__h{ display:flex; align-items:center; gap:10px; margin-top:10px; font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg2); }
.chapter__h[hidden]{ display:none; }
.chapter__h i{ width:20px; height:30px; border:1.5px solid color-mix(in oklab,var(--fg) 40%,transparent); border-radius:11px; position:relative; }
.chapter__h i::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; margin-left:-1.5px; border-radius:2px; background:var(--neutrino); animation:wheel 1.8s var(--ease) infinite; }
/* live counters inside a caption */
.hud{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin-top:16px; padding:9px 14px; border-radius:14px; font-family:var(--display); font-variant-numeric:tabular-nums;
  background:color-mix(in oklab,var(--bg) 70%,transparent); border:1px solid color-mix(in oklab,var(--fg) 14%,transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hud span{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg2); }
.hud b{ font-size:clamp(1rem,1.5vw,1.25rem); font-weight:700; letter-spacing:-.01em; color:var(--fg); min-width:2ch; }
.hud .hud__n{ color:var(--neutrino); }
.hud i{ width:1px; height:14px; background:color-mix(in oklab,var(--fg) 20%,transparent); align-self:center; }
@media (max-width:700px){ .hud{ margin-top:12px; padding:7px 11px; } .chapter__t{ font-size:clamp(2.1rem,11vw,3.4rem); } }
@media (prefers-reduced-motion:reduce){ .beats .beat,#chapter,.chapter__in{ transition:none; } .chapter__h i::after{ animation:none; } }

/* loader + intro */
#loader{ position:fixed; inset:0; z-index:40; display:grid; place-items:center; background:var(--dark-bg); color:var(--dark-fg); transition:opacity .8s var(--ease); }
#loader.off{ opacity:0; pointer-events:none; }
.loader__in{ display:grid; justify-items:center; gap:18px; padding:24px; text-align:center; }
.loader__t{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,4vw,2.6rem); letter-spacing:-.03em; }
.loader__t em{ font-style:normal; color:var(--pulsar); }
.loader__bar{ width:min(220px,60vw); height:2px; background:rgba(242,244,248,.14); border-radius:2px; overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:40%; background:var(--pulsar); border-radius:2px; animation:ld 1.4s var(--ease) infinite; }
@keyframes ld{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(260%); } }
.loader__s{ font-family:var(--display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dark-fg2); }
/* presenter chrome */
.bar__keys{ color:var(--fg2); font-size:11px; letter-spacing:.06em; display:none; }
@media (min-width:1100px){ .bar__keys{ display:inline; } }
.fs{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1px solid color-mix(in oklab,var(--fg) 22%,transparent); background:color-mix(in oklab,var(--bg) 70%,transparent); color:var(--fg2); cursor:pointer; padding:0; }
.fs:hover{ color:var(--fg); }
.rail{ position:fixed; z-index:20; right:calc(14px + env(safe-area-inset-right,0px)); top:50%; transform:translateY(-50%); display:none; flex-direction:column; gap:10px; }
@media (min-width:960px){ .rail{ display:flex; } }
.rail__b{ display:flex; align-items:center; justify-content:flex-end; gap:10px; background:transparent; border:0; padding:4px 0; cursor:pointer; color:var(--fg2); font-family:var(--display); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.rail__l{ opacity:0; transform:translateX(6px); transition:opacity .3s var(--ease),transform .3s var(--ease); }
.rail__b:hover .rail__l,.rail__b:focus-visible .rail__l,.rail__b.is-on .rail__l{ opacity:1; transform:none; }
.rail__b i{ width:6px; height:6px; border-radius:50%; background:color-mix(in oklab,var(--fg) 35%,transparent); transition:transform .3s var(--ease),background-color .3s; }
.rail__b.is-on i{ background:var(--pulsar); transform:scale(1.6); box-shadow:0 0 10px var(--pulsar); }
.sec[data-accent="n"] ~ .rail .rail__b.is-on i{ background:var(--neutrino); }
@media (prefers-reduced-motion:reduce){ .loader__bar i{ animation:none; width:100%; } }

/* play / sound / presenter buttons */
.fs[aria-pressed="true"]{ color:var(--bg); background:var(--fg); border-color:var(--fg); }
#playBtn .i-pause{ display:none; } #playBtn.is-on .i-play{ display:none; } #playBtn.is-on .i-pause{ display:inline; }
#sndBtn .i-wave{ opacity:.35; } #sndBtn.is-on .i-wave{ opacity:1; }
@media (max-width:700px){ #presBtn,#fsBtn{ display:none; } .quality button{ padding:6px 9px; } }

/* closing card: the epilogue hands over to a title card (pulsar blue -> neutrino orange) */
#endcard{ position:fixed; inset:0; z-index:5; display:grid; place-items:center; pointer-events:none; opacity:0; transition:opacity 1.2s var(--ease);
  background:radial-gradient(70% 60% at 50% 50%,color-mix(in oklab,var(--bg) 72%,transparent),transparent 82%); }
body.end #endcard{ opacity:1; pointer-events:auto; }
.endcard__in{ max-width:min(760px,92vw); display:grid; justify-items:center; gap:14px; padding:24px; text-align:center; transform:translateY(14px) scale(.985); transition:transform 1.4s var(--ease); }
body.end .endcard__in{ transform:none; }
.endcard__k{ font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--fg2); padding-left:.32em; }
.endcard__t{ font-family:var(--display); font-weight:700; font-size:clamp(3rem,9vw,7.5rem); line-height:1; letter-spacing:-.04em; padding:0 .04em .06em;
  background:linear-gradient(90deg,var(--pulsar),#F2F4F8 52%,var(--neutrino)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.endcard__s{ font-size:clamp(1rem,1.4vw,1.25rem); color:var(--fg2); max-width:40ch; text-wrap:balance; }
#endcard .sources{ justify-content:center; max-width:680px; margin-top:12px; font-size:12px; }
body.end .sec__cap .cap{ opacity:0; transform:translateY(18px); pointer-events:none; }
@media (prefers-reduced-motion:reduce){ #endcard,.endcard__in{ transition:none; } }

/* the Crab's code being read off the pulsar map */
.hud--bin{ transition:opacity .5s var(--ease); }
.hud--bin.off{ opacity:0; }
.hud b.bin{ font-size:clamp(.8rem,1.05vw,1rem); letter-spacing:.06em; word-break:break-all; color:var(--fg); }
@media (prefers-reduced-motion:reduce){ .hud--bin{ transition:none; } }

/* V2.9 caption scrim: a soft pool of the page colour behind the active caption, so 3D detail never sits
   directly under the text; it fades in and out with the caption (no :has support = no scrim, text-shadow stays) */
.sec__cap::before{ content:""; position:absolute; left:0; bottom:0; width:min(1080px,88vw); height:78%; pointer-events:none; opacity:0;
  background:radial-gradient(110% 95% at 0% 100%,color-mix(in oklab,var(--bg) 74%,transparent) 0%,color-mix(in oklab,var(--bg) 46%,transparent) 42%,transparent 74%);
  transition:opacity .6s var(--ease); }
.sec__cap:has(.cap.on)::before{ opacity:1; }
.sec__cap > .cap{ position:relative; z-index:1; } /* text above its scrim */
body.end .sec__cap::before{ opacity:0; }
@media (max-width:700px){
  .sec__cap::before{ width:100%; height:64%;
    background:linear-gradient(to top,color-mix(in oklab,var(--bg) 82%,transparent) 0%,color-mix(in oklab,var(--bg) 62%,transparent) 45%,transparent 100%); }
}
@media (prefers-reduced-motion:reduce){ .sec__cap::before{ transition:none; } }
/* blank screen (B) */
#blank{ position:fixed; inset:0; z-index:35; background:#000; opacity:0; pointer-events:none; transition:opacity .35s ease; }
body.blank #blank{ opacity:1; pointer-events:auto; cursor:none; }
@media (prefers-reduced-motion:reduce){ #blank{ transition:none; } }
/* V3.0 QR overlay (Q) and the small code on the closing card */
#qr{ position:fixed; inset:0; z-index:34; display:grid; place-items:center; padding:24px; background:color-mix(in oklab,var(--dark-bg) 86%,transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .45s var(--ease); cursor:pointer; }
body.qr #qr{ opacity:1; pointer-events:auto; }
.qr__in{ display:grid; justify-items:center; gap:16px; text-align:center; transform:scale(.96); transition:transform .6s var(--ease); }
body.qr .qr__in{ transform:none; }
#qr .qr__svg{ width:min(62vmin,440px); height:auto; display:block; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.qr__t{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3.4vw,2.6rem); letter-spacing:-.02em; color:var(--dark-fg); }
.qr__u{ font-family:var(--display); font-size:clamp(.95rem,1.4vw,1.15rem); letter-spacing:.04em; color:var(--pulsar); }
.endcard__qr{ display:flex; align-items:center; gap:14px; margin-top:6px; text-align:left; font-family:var(--display); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg2); }
.endcard__qr .qr__svg{ width:88px; height:88px; border-radius:8px; flex:none; }
.endcard__qr b{ display:block; margin-top:4px; font-size:13px; letter-spacing:.02em; text-transform:none; color:var(--pulsar); }
.hud b.hud__big{ font-size:clamp(1rem,1.6vw,1.35rem); letter-spacing:.01em; }
@media (max-width:700px){ .endcard__qr .qr__svg{ width:72px; height:72px; } }
@media (max-height:560px){ .endcard__qr{ display:none; } }
@media (prefers-reduced-motion:reduce){ #qr,.qr__in{ transition:none; } }
/* V3.1 kinetic headings: words rise out of a mask in sequence (the outgoing caption drops them quickly) */
.w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .04em .16em; margin:0 -.04em -.16em; }
.wi{ display:inline-block; transform:translateY(112%) rotate(5deg); transform-origin:0 100%; transition:transform .45s var(--ease); }
.cap.on .wi,#chapter.on .wi{ transform:none; transition:transform 1.05s var(--ease) calc(var(--i) * 60ms + 90ms); }
.cap h1,.cap h2{ text-shadow:none; }
.beats .beat{ filter:blur(5px); transition:opacity .55s var(--ease),transform .7s var(--ease),filter .7s var(--ease); }
.beats .beat.on{ filter:none; }
/* V3.1 segmented progress: one segment per scene, a wider gap where a chapter begins */
.progress{ display:flex; gap:2px; background:none; transform:none; padding:0 2px; }
.progress i{ position:relative; height:100%; background:color-mix(in oklab,var(--fg) 13%,transparent); overflow:hidden; border-radius:0 0 2px 2px; }
.progress i.ch{ margin-left:6px; } .progress i:first-child{ margin-left:0; }
.progress i b{ position:absolute; inset:0; background:var(--pulsar); transform-origin:left; transform:scaleX(0); }
.progress i.n b{ background:var(--neutrino); }
@media (prefers-reduced-motion:reduce){ .wi{ transform:none !important; transition:none !important; } .beats .beat{ filter:none; } }