@import './fonts/latin-400.css';
@import './fonts/latin-500.css';
@import './fonts/latin-600.css';
@import './fonts/latin-700.css';

:root {
  font-family: Manrope, Arial, sans-serif; color-scheme: dark;
  --page:#050d18; --ink:#eef4fb; --muted:#9fafc2; --line:#283b50;
  --blue:#80beff; --button:#edf4fb; --button-ink:#102b48;
  background:var(--page); color:var(--ink); font-synthesis:none; -webkit-font-smoothing:antialiased;
}
@media(prefers-color-scheme:light) {
  :root:not([data-theme="dark"]) { color-scheme:light; --page:#edf3f9; --ink:#102b48; --muted:#506a82; --line:#c0d0df; --blue:#0869be; --button:#102b48; --button-ink:#fff; }
}
:root[data-theme="light"] { color-scheme:light; --page:#edf3f9; --ink:#102b48; --muted:#506a82; --line:#c0d0df; --blue:#0869be; --button:#102b48; --button-ink:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
p,h1,h2,h3 { margin:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
button,a { -webkit-tap-highlight-color:transparent; }
p { line-height:1.65; }
a:focus-visible,button:focus-visible { outline:2px solid var(--blue); outline-offset:7px; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; }
[hidden] { display:none!important; }
::selection { background:#1269be; color:#fff; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; top:-90px; left:20px; z-index:100; padding:15px; background:var(--button); color:var(--button-ink); }
.skip-link:focus { top:15px; }
.site-header { position:fixed; inset:0 0 auto; height:90px; display:flex; align-items:center; justify-content:space-between; padding:0 4.5%; z-index:30; background:linear-gradient(var(--page),transparent); }
.brand { display:flex; align-items:center; gap:10px; font-size:25px; letter-spacing:-1.2px; font-weight:700; flex-shrink:0; }
.brand>span>span { font-weight:400; }
.brand img { object-fit:contain; width:49px; height:34px; }
.desktop-nav { display:flex; gap:30px; font-size:11px; color:var(--muted); }
.desktop-nav a:hover,.desktop-nav a[aria-current] { color:var(--ink); }
.header-actions { display:flex; gap:25px; align-items:center; }
.header-actions button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; font-size:10px; color:var(--muted); padding:0; }
.header-actions svg { width:16px; height:16px; }
.theme-toggle path { fill:currentColor; stroke:none; }
.loop-toggle path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sign-in { font-size:11px; }
.header-actions .menu-toggle { display:none; }
.mobile-nav { position:absolute; inset:90px 0 auto; background:var(--page); padding:20px 6%; }
.mobile-nav a { display:block; padding:12px 0; }
.paper-scene .site-header { color:#102b48; background:linear-gradient(#edf3f9,transparent); }
.paper-scene .site-header button,.paper-scene .desktop-nav { color:#506a82; }
.paper-scene .desktop-nav a[aria-current] { color:#102b48; }
.paper-scene .mobile-nav { background:#edf3f9; color:#102b48; }

.film { position:relative; }
/* Clip the stage without creating a nested scroll container. Focus and hash
   navigation must only move the document, never the cinematic composition. */
.film-frame { position:relative; overflow:clip; }
.act { padding:140px 7% 100px; min-height:100svh; position:relative; }
.act h1,.act h2,.act h3 { font-weight:500; line-height:.95; letter-spacing:-.07em; }
.act a:not(.button):not(.round-link) { font-size:12px; }
.scene { position:absolute; inset:0; height:100svh; pointer-events:none; overflow:hidden; }
.scene canvas { width:100%; height:100%; display:block; opacity:0; }
.scene.ready canvas { opacity:1; }
.scene-fallback { position:absolute; width:65%; height:65%; object-fit:contain; top:17%; left:17.5%; }
.scene.ready .scene-fallback { display:none; }
.scene-glow { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 55%,rgba(29,104,190,.18),transparent 65%); }
.cinema-ready .film { height:1050svh; }
.cinema-ready .film-frame { position:sticky; top:0; height:100svh; isolation:isolate; }
.cinema-ready .scene { opacity:var(--graphic-opacity,1); }
.cinema-ready [data-act="finale"] .scene { opacity:calc(var(--graphic-opacity,1) * .65); }
.cinema-ready .act { position:absolute; inset:0; min-height:0; padding:0; visibility:hidden; pointer-events:none; z-index:4; }
.cinema-ready .act.is-active { visibility:visible; pointer-events:auto; }
.anchor { position:absolute; height:1px; width:1px; pointer-events:none; }
.human-wash { position:absolute; inset:0; background:#edf3f9; opacity:var(--paper,0); pointer-events:none; z-index:3; }
.film-controls { display:none; }
.cinema-ready .film-controls { display:flex; position:fixed; inset:auto 4.5% 24px; z-index:10; align-items:center; gap:30px; font-size:10px; color:var(--muted); }
.film-chapter { min-width:130px; }
.film-progress { height:1px; flex:1; background:var(--line); max-width:350px; }
.film-progress i { display:block; width:100%; height:1px; background:var(--blue); transform-origin:left; transform:scaleX(0); }
.scroll-instruction { margin-left:auto; }
.next-scene { font-size:10px; }
.paper-scene .film-controls { color:#506a82; }
.paper-scene .film-progress { background:#c0d0df; }
.paper-scene .film-progress i { background:#0869be; }

.opening h1 { font-size:clamp(100px,17vw,300px); }
.cinema-ready .opening h1 { position:absolute; inset:20% 6% 22%; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.opening h1 span { display:block; }
.opening h1 span:last-child { text-align:right; }
.motion-enabled .opening h1 span:first-child { transform:translateX(calc(var(--opening-out,0) * -30vw)); }
.motion-enabled .opening h1 span:last-child { transform:translateX(calc(var(--opening-out,0) * 30vw)); }
.opening-note { position:absolute; top:19%; right:7%; font-size:12px; color:var(--muted); }
.opening-bottom { position:absolute; left:7%; right:7%; bottom:10%; display:flex; justify-content:space-between; align-items:center; gap:25px; }
.opening-bottom p { font-size:12px; color:var(--muted); }
.round-link { border:1px solid var(--line); border-radius:50%; width:58px; height:58px; display:grid; place-items:center; font-size:24px; }
.round-link:hover { border-color:var(--blue); }
.fracture-heading { position:absolute; left:7%; top:21%; z-index:2; }
.fracture-heading>p { font-size:12px; color:var(--blue); margin-bottom:24px; }
.fracture h2 { font-size:clamp(64px,8.5vw,140px); }
.fracture-heading { text-shadow:0 2px 45px var(--page); }
.fracture-caption { position:absolute; bottom:12%; right:7%; font-size:13px; line-height:1.7; text-align:right; }
.loose { position:absolute; color:var(--muted); font-size:13px; padding:14px 0; border-top:1px solid var(--line); }
.loose.one { top:23%; right:8%; transform:translate(calc(var(--fragment,0)*-70px),calc(var(--fragment,0)*80px)); }
.loose.two { top:42%; right:20%; transform:translate(calc(var(--fragment,0)*100px),calc(var(--fragment,0)*30px)); }
.loose.three { top:59%; right:6%; transform:translate(calc(var(--fragment,0)*-90px),calc(var(--fragment,0)*-40px)); }
.loose.four { top:70%; right:25%; transform:translate(calc(var(--fragment,0)*70px),calc(var(--fragment,0)*-30px)); }

.route-horizon { position:absolute; inset:0; opacity:0; pointer-events:none; perspective:700px; }
[data-act="cycle"] .route-horizon { opacity:1; }
.route-horizon>div { position:absolute; width:160%; height:90%; left:-30%; bottom:-38%; transform:rotateX(65deg); background:repeating-linear-gradient(0deg,transparent 0 69px,var(--line) 70px 71px),repeating-linear-gradient(90deg,transparent 0 139px,var(--line) 140px 141px); mask-image:linear-gradient(transparent,#000); opacity:.4; }
.cycle-heading { position:absolute; top:17%; left:7%; right:7%; display:flex; align-items:flex-end; gap:30px; }
.cycle-heading>p { font-size:11px; color:var(--muted); max-width:80px; }
.cycle-heading h2 { font-size:clamp(26px,3vw,50px); letter-spacing:-.05em; }
.route-count { margin-left:auto; font-size:12px; color:var(--blue); }
.route-window { position:absolute; top:29%; bottom:15%; left:0; right:0; overflow:hidden; }
.route-track { width:400vw; height:100%; display:flex; will-change:transform; }
.route-stop { width:100vw; flex-shrink:0; height:100%; position:relative; padding:0 10vw; display:flex; align-items:center; }
.route-number { position:absolute; font-size:clamp(200px,29vw,480px); line-height:.8; left:4%; top:5%; color:transparent; -webkit-text-stroke:1px var(--line); opacity:.7; font-weight:500; letter-spacing:-.08em; }
.route-copy { position:relative; z-index:2; margin-left:4vw; }
.route-copy>p:first-child { font-size:11px; color:var(--blue); margin-bottom:18px; }
.route-copy h3 { font-size:clamp(58px,8.2vw,142px); }
.route-copy>p:nth-of-type(2) { font-size:14px; color:var(--muted); margin:25px 0; }
.route-copy a { border-bottom:1px solid var(--line); padding-bottom:7px; }
.route-diagram { position:absolute; width:28vw; height:28vw; right:7%; top:0; display:grid; place-items:center; }
.route-diagram i { position:absolute; border:1px solid var(--blue); border-radius:50%; width:90%; height:90%; opacity:.38; transform:rotateX(45deg) rotateZ(-25deg); }
.route-diagram i:nth-child(2) { width:72%; height:72%; transform:rotateX(45deg) rotateZ(25deg); }
.route-diagram i:nth-child(3) { width:52%; height:52%; transform:rotateY(45deg); opacity:.8; }
.route-diagram span { font-size:12px; text-align:center; line-height:1.5; }
.authorization i { border-radius:10%; transform:rotate(-20deg); }
.authorization i:nth-child(2) { transform:rotate(10deg); }.authorization i:nth-child(3) { transform:rotate(30deg); }
.claims i { border-radius:3px; transform:rotate(-12deg) translateY(-10%); }.claims i:nth-child(2){transform:rotate(-12deg)}.claims i:nth-child(3){transform:rotate(-12deg) translateY(12%)}
.recovery i { border-width:2px; border-right-color:transparent; transform:rotate(-35deg); }.recovery i:nth-child(2){transform:rotate(80deg)}.recovery i:nth-child(3){transform:rotate(180deg)}
.cycle-foot { position:absolute; left:7%; right:7%; bottom:11%; display:flex; gap:40px; font-size:10px; color:var(--muted); border-top:1px solid var(--line); padding-top:18px; }

.intelligence-label { position:absolute; top:17%; left:7%; font-size:12px; color:var(--blue); }
.intelligence h2 { position:absolute; left:7%; top:24%; font-size:clamp(60px,9vw,160px); }
.int-word { display:block; }
.int-word.rules { margin-left:14vw; color:transparent; -webkit-text-stroke:1px var(--ink); }
.int-word.action { margin-left:6vw; }
.motion-enabled .int-word.evidence { transform:translateX(calc((1 - var(--intelligence-in,0))*-12vw)); }
.motion-enabled .int-word.rules { transform:translateX(calc((1 - var(--intelligence-in,0))*18vw)); }
.motion-enabled .int-word.action { transform:translateX(calc((1 - var(--intelligence-in,0))*-8vw)); }
.intelligence-copy { position:absolute; top:37%; right:7%; width:27%; font-size:13px; color:var(--muted); }
.intelligence-copy a { display:inline-block; color:var(--ink); margin-top:24px; padding-bottom:7px; border-bottom:1px solid var(--line); }
.evidence-line { position:absolute; bottom:12%; left:7%; right:7%; display:flex; align-items:center; gap:25px; font-size:10px; color:var(--muted); }
.evidence-line i { height:1px; background:var(--line); flex:1; }

.human { color:#102b48; }
.human-top { position:absolute; top:18%; left:7%; font-size:12px; color:#506a82; }
.human-title-wrap { position:absolute; top:28%; left:7%; right:7%; }
.human h2 { font-size:clamp(65px,10.5vw,185px); }
.human h2 em { font-style:normal; }
.human-period { position:absolute; width:10vw; height:10vw; border:1px solid #8ca9c5; border-radius:50%; right:0; bottom:3%; }
.human-period:after { content:''; position:absolute; inset:34%; border-radius:50%; background:#087eea; transform:scale(calc(.4 + var(--human-in,1)*.6)); }
.human-bottom { position:absolute; bottom:17%; left:7%; right:7%; display:flex; align-items:start; justify-content:space-between; gap:30px; }
.human-bottom p:first-child { font-size:20px; letter-spacing:-.6px; }
.human-bottom p:last-child { max-width:300px; font-size:12px; color:#506a82; }
.authority-seal { position:absolute; bottom:9%; left:7%; display:flex; align-items:center; gap:10px; font-size:10px; }
.seal-dot { width:5px; height:5px; background:#087eea; border-radius:50%; }

.finale { text-align:center; }
.finale-intro { position:absolute; top:16%; left:5%; right:5%; font-size:12px; color:var(--muted); }
.finale h2 { position:absolute; top:27%; left:0; right:0; font-size:clamp(75px,12vw,200px); pointer-events:none; }
.finale-actions { position:absolute; bottom:18%; left:5%; right:5%; display:flex; justify-content:center; align-items:center; gap:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:35px; padding:18px 29px; border-radius:3px; font-size:12px; }
.primary { background:var(--button); color:var(--button-ink); }
.text-link { padding-bottom:6px; border-bottom:1px solid var(--line); }
.finale footer { position:absolute; left:7%; right:7%; bottom:9%; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:10px; }
.finale footer>span { font-size:19px; letter-spacing:-1px; }
.finale footer>p { max-width:340px; color:var(--muted); }

@media(max-width:1000px) {
  .desktop-nav { gap:18px; font-size:10px; }.header-actions{gap:20px}.motion-label,.theme-label,.loop-label{display:none}
  .route-copy h3{font-size:8.5vw}.route-diagram{opacity:.6;right:3%}
  .human-bottom p:first-child{font-size:17px}
}
@media(max-width:760px) {
  .site-header{height:76px;padding:0 6%}.brand{font-size:23px}.brand img{width:40px;height:28px}
  .desktop-nav,.sign-in{display:none}.header-actions{gap:22px}.header-actions .menu-toggle{display:flex;flex-direction:column;gap:6px;width:20px}.menu-toggle i{height:1px;width:20px;background:currentColor}.mobile-nav{top:76px}
  .cinema-ready .film{height:1150svh}.cinema-ready .film-controls{left:6%;right:6%;bottom:23px;gap:15px;font-size:9px}.film-chapter{min-width:85px;max-width:85px;font-size:8px}.film-progress{max-width:none}.scroll-instruction{display:none}.next-scene{font-size:9px;white-space:nowrap}
  .opening h1{font-size:23vw}.cinema-ready .opening h1{inset:29% 6% 31%}.opening-note{top:17%;right:7%;font-size:10px}.opening-bottom{bottom:12%}.opening-bottom p{font-size:10px;max-width:220px}.round-link{width:45px;height:45px}
  .scene-fallback{width:94%;left:3%;height:50%;top:26%}
  .fracture-heading{top:23%}.fracture h2{font-size:17vw}.fracture-heading>p{font-size:10px}.loose{font-size:9px;max-width:105px}.loose.one{top:16%;right:7%}.loose.two{top:65%;right:12%}.loose.three{top:74%;right:36%}.loose.four{display:none}.fracture-caption{font-size:10px;bottom:12%;left:7%;text-align:left}
  .cycle-heading{top:17%;display:block}.cycle-heading>p{max-width:none;margin-bottom:15px;font-size:10px}.cycle-heading h2{font-size:8vw}.route-count{position:absolute;right:0;top:0;font-size:10px}
  .route-window{top:31%;bottom:19%}.route-stop{padding:0 7vw;align-items:center}.route-copy{margin:0;width:100%}.route-number{font-size:65vw;left:1%;top:2%;opacity:.55}.route-copy h3{font-size:14vw}.route-copy>p:first-child{font-size:9px}.route-copy>p:nth-of-type(2){font-size:11px;max-width:290px;margin:20px 0}.act .route-copy a{font-size:10px}.route-diagram{width:40vw;height:40vw;right:-12%;top:43%;opacity:.23}.route-diagram span{display:none}.cycle-foot{font-size:8px;gap:20px;bottom:12%;line-height:1.5}
  .intelligence-label{top:18%;font-size:10px}.intelligence h2{top:29%;font-size:19vw}.int-word.rules{margin-left:17vw}.int-word.action{margin-left:8vw}.intelligence-copy{top:auto;bottom:18%;left:7%;right:7%;width:auto;font-size:11px}.intelligence-copy a{font-size:10px;margin-top:16px}.evidence-line{bottom:10%;gap:10px;font-size:8px}
  .human-top{top:20%;font-size:10px}.human-title-wrap{top:34%;left:7%;right:7%}.human h2{font-size:15vw}.human-period{width:15vw;height:15vw;right:1%;bottom:0}.human-bottom{bottom:18%;display:block}.human-bottom p:first-child{font-size:16px}.human-bottom p:last-child{max-width:280px;font-size:10px;margin-top:23px}.authority-seal{bottom:10%;font-size:9px}
  .finale-intro{top:19%;left:10%;right:10%;font-size:10px}.finale h2{top:34%;font-size:20vw}.finale-actions{bottom:25%;flex-direction:column;gap:18px}.button{padding:16px 27px;font-size:11px}.finale footer{bottom:10%;flex-wrap:wrap;font-size:9px}.finale footer>p{order:3;max-width:100%;width:100%;text-align:left;font-size:8px}.finale footer>a{font-size:10px}
}
@media(max-height:600px) and (min-width:761px) {
  .site-header{height:68px}.opening h1{font-size:13vw}.opening-note{top:18%}.fracture h2{font-size:7vw}.intelligence h2{font-size:7.8vw}.human h2{font-size:8vw}.human-bottom{bottom:17%}.finale h2{font-size:9vw}
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto} }
html:not(.motion-enabled){scroll-behavior:auto}
/* Progressive enhancement: keep the complete story readable without JavaScript. */
html:not(.cinema-ready) .film .scene,html:not(.cinema-ready) .film .human-wash,html:not(.cinema-ready) .film .route-horizon{display:none}
html:not(.cinema-ready) .act{min-height:auto;padding:130px 7% 70px}
html:not(.cinema-ready) .act>*{position:relative;inset:auto;margin-bottom:30px}
html:not(.cinema-ready) .act h1,html:not(.cinema-ready) .act h2{font-size:clamp(48px,10vw,120px)}
html:not(.cinema-ready) .route-window{overflow:visible}
html:not(.cinema-ready) .route-track{display:block;width:auto;transform:none!important}
html:not(.cinema-ready) .route-stop{width:auto;min-height:340px}
html:not(.cinema-ready) .human{background:#edf3f9}
html:not(.cinema-ready) .intelligence h2,html:not(.cinema-ready) .intelligence-copy{position:relative;inset:auto}