@font-face{font-family:'Geist';src:url('/assets/fonts/geist-100_900-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/geist-mono-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/geist-mono-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#05070B;--ink:#F2F5FA;--muted:#8792A6;--line:#1A2333;--rule:#2A3650;--accent:#4C8DF6;--glow:#0B2A6B;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --paper:KaTeX_Main,'Latin Modern Roman','Times New Roman',serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1.125rem,4.2vw,5rem);
  --gap:clamp(1rem,2vw,2.5rem);
  --ret:1;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;font-family:var(--sans);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
::selection{background:var(--accent);color:#05070B}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.skip{position:fixed;left:1rem;top:-4rem;z-index:20;background:var(--ink);color:#05070B;padding:.6rem .9rem;border-radius:4px;text-decoration:none;font-weight:500;transition:top .3s var(--ease)}
.skip:focus{top:1rem}

/* ---------- the field */
.stage{position:fixed;inset:0;z-index:0;height:100lvh;background:
  radial-gradient(90% 80% at 96% 92%,rgba(14,56,150,.50),rgba(9,34,96,.20) 42%,transparent 72%),
  url('/assets/img/field.svg') center/cover no-repeat,var(--bg)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s var(--ease)}
.gl .stage canvas{opacity:1}
.no-gl .stage canvas{display:none}
main,.bar,.foot{position:relative;z-index:1}

/* ---------- bar and loop nav */
.bar{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;padding:clamp(1rem,2.6vh,1.75rem) var(--pad) 2.25rem;pointer-events:none}
.bar::before{content:"";position:absolute;inset:0 0 -1.25rem 0;background:linear-gradient(to bottom,#05070B 0,#05070B 52%,rgba(5,7,11,.82) 72%,rgba(5,7,11,0));opacity:0;transition:opacity .8s var(--ease);z-index:-1}
.past .bar::before{opacity:1}
.bar>*{pointer-events:auto}
.mark{font-weight:500;letter-spacing:-.01em;text-decoration:none;opacity:0;transform:translateY(-6px);transition:opacity .7s var(--ease),transform .7s var(--ease);visibility:hidden}
.past .mark{opacity:1;transform:none;visibility:visible}
.loop{position:relative;margin-left:auto;padding-bottom:15px}
.loop ol{display:flex;align-items:center;gap:.72em;font-size:clamp(.82rem,.95vw,1.02rem);font-weight:500;letter-spacing:-.012em}
.loop li{display:flex;align-items:center}
.loop a{text-decoration:none;color:var(--ink);transition:color .6s var(--ease);padding:.25em 0}
.loop a:hover{color:#fff}
.arr{width:1.7em;height:.62em;color:var(--accent);transition:color .6s var(--ease),opacity .6s var(--ease)}
.ret{position:absolute;left:1.5em;right:1.05em;bottom:0;height:13px;color:var(--accent)}
.ret i,.ret b{position:absolute;inset:0;border:1.5px solid currentColor;border-top:0;border-radius:0 0 8px 8px}
.ret i{opacity:.26}
.ret b{clip-path:inset(0 0 0 calc((1 - var(--ret)) * 100%));transition:clip-path .5s var(--ease)}
.ret::before{content:"";position:absolute;left:-4.2px;top:-2px;width:10px;height:10px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.26;transition:opacity .5s var(--ease)}
.closed .ret::before{opacity:1}
/* inside the loop: the current stage is lit, the rest wait */
[data-stage=perceive] .loop a,[data-stage=reason] .loop a,[data-stage=act] .loop a,[data-stage=learn] .loop a{color:var(--muted)}
[data-stage=perceive] .arr,[data-stage=reason] .arr,[data-stage=act] .arr,[data-stage=learn] .arr{opacity:.3}
[data-stage=perceive] .loop a[href="#perceive"],[data-stage=reason] .loop a[href="#reason"],[data-stage=act] .loop a[href="#act"],[data-stage=learn] .loop a[href="#learn"]{color:#fff}
[data-stage=reason] .a1 .arr,[data-stage=act] .a1 .arr,[data-stage=act] .a2 .arr,[data-stage=learn] .arr{opacity:1}

/* ---------- hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:7rem var(--pad) clamp(1.1rem,3vh,2rem)}
.hero-main{display:block}
.hero-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-bottom:clamp(1.4rem,4.5vh,3.2rem)}
.eyebrow{grid-column:1/4;font-family:var(--mono);font-size:clamp(.8rem,.9vw,.95rem);color:var(--muted);overflow:hidden;padding-top:.28em}
.hero-line{text-shadow:0 0 1.4em rgba(5,7,11,.9),0 0 .35em rgba(5,7,11,.7);grid-column:4/8;font-size:clamp(1.05rem,1.32vw,1.5rem);line-height:1.36;letter-spacing:-.014em;overflow:hidden;text-wrap:pretty;max-width:30ch}
h1{font-size:clamp(3.5rem,11.6vw,14rem);line-height:.86;letter-spacing:-.052em;font-weight:500;margin-left:-.045em}
h1 .l{display:block;overflow:hidden;padding:.09em 0 .04em .045em;margin-top:-.09em}
h1 .l>span,.eyebrow>span,.hero-line>span{display:block;animation:rise 1.25s var(--ease) both}
h1 .l:nth-child(1)>span{animation-delay:.1s}
h1 .l:nth-child(2)>span{animation-delay:.19s}
.eyebrow>span{animation-delay:0s}
.hero-line>span{animation-delay:.04s}
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}
.hero-foot{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(1.6rem,5vh,3.4rem);padding-top:1rem;border-top:1px solid rgba(135,146,166,.22);font-family:var(--mono);font-size:.8rem;color:var(--muted);animation:fade 1.6s var(--ease) .5s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.cue{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none;transition:color .4s}
.cue:hover{color:var(--ink)}
.cue i{display:block;width:3.2rem;height:1px;background:currentColor;transform-origin:left;animation:cue 2.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleX(0)}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* ---------- sections */
.sec{padding:clamp(6rem,17vh,13rem) var(--pad) 0}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.label{font-family:var(--mono);font-size:.8rem;color:var(--accent);margin-bottom:1.1rem}
h2{font-size:clamp(2rem,3.5vw,3.9rem);line-height:1.02;letter-spacing:-.038em;font-weight:500;text-wrap:balance}
.lede{color:var(--muted);font-size:clamp(1.05rem,1.2vw,1.3rem);line-height:1.45;max-width:34ch;text-wrap:pretty}
.sec-head{grid-column:1/6}
.sec-head.wide{grid-column:1/9;margin-bottom:clamp(2.5rem,6vh,4.5rem)}

/* abstract: set like a paper */
.facts{margin-top:clamp(2rem,5vh,3.5rem);font-family:var(--mono);font-size:.82rem;display:grid;gap:.55rem;max-width:26rem}
.facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding-top:.55rem;border-top:1px solid var(--line)}
.facts dt{color:var(--muted)}
.paper{grid-column:7/13;font-family:var(--paper);font-size:clamp(1.16rem,1.38vw,1.58rem);line-height:1.5;text-align:justify;hyphens:auto;-webkit-hyphens:auto;font-kerning:normal}
.paper .runin{font-family:var(--sans);font-weight:600;font-size:.86em;letter-spacing:-.012em}
.paper .kw{margin-top:1.1em;font-size:.86em;color:var(--muted);text-align:left;hyphens:manual}
.paper em{font-style:italic}

/* capabilities */
.caps-head{align-items:end;margin-bottom:clamp(3rem,8vh,6rem)}
.caps-head .label{grid-column:1/13}
.caps-head h2{grid-column:1/7}
.caps-head .lede{grid-column:9/13;max-width:none}
.chap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(2.6rem,7vh,5rem) 0 clamp(3.2rem,9vh,6.5rem);border-top:1px solid var(--rule)}
.chap-head{grid-column:1/5}
.chap-no{font-family:var(--mono);font-size:.8rem;color:var(--accent)}
.chap h3{font-size:clamp(2.9rem,6.6vw,7.6rem);line-height:.92;letter-spacing:-.05em;font-weight:500;margin:.14em 0 .2em -.04em}
.chap-tag{color:var(--muted);font-size:clamp(1rem,1.1vw,1.2rem)}
.chap-body{grid-column:5/9;padding-top:clamp(.4rem,1.5vw,1.6rem)}
.chap-body p{font-size:clamp(1.05rem,1.22vw,1.34rem);line-height:1.5;letter-spacing:-.008em;text-wrap:pretty}
.methods{margin-top:1.8rem;font-family:var(--mono);font-size:.82rem;color:var(--muted)}
.methods li{padding:.5rem 0;border-top:1px solid var(--line)}
.chap-eq{grid-column:9/13;padding-top:clamp(.4rem,1.5vw,1.6rem);min-width:0}
.eqf+.eqf{margin-top:1.4rem}
.eq{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:5.6rem;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding:.5rem 0}
.eq-body{min-width:0;overflow-x:auto;overflow-y:hidden;font-size:clamp(1rem,1.12vw,1.24rem);scrollbar-width:none;padding:.3rem 0}
.eq-body::-webkit-scrollbar{display:none}
.eq-body .katex-display{margin:0;text-align:left}
.eq-body .katex-display>.katex{text-align:left}
.eq-no{font-family:var(--paper);font-size:1.1rem;color:var(--muted);flex:none}
.eqf figcaption{font-family:var(--paper);font-size:clamp(.98rem,1.02vw,1.12rem);line-height:1.38;color:var(--muted);padding-top:.6rem;text-wrap:pretty}
.eqf figcaption .katex{font-size:1em;color:var(--ink)}

/* record: booktabs */
.rec-wrap{grid-column:1/13}
.rec{width:100%;border-collapse:collapse;font-family:var(--paper);font-size:clamp(1.08rem,1.2vw,1.36rem);line-height:1.4;text-align:left}
.rec caption{caption-side:top;text-align:left;color:var(--muted);font-size:.9em;padding-bottom:.9rem}
.rec thead th{font-weight:400;font-style:italic;padding:.6rem 1.5rem .6rem 0;border-top:1.6px solid var(--ink);border-bottom:.8px solid var(--ink)}
.rec td{padding:.5rem 1.5rem .5rem 0;vertical-align:top}
.rec td:last-child,.rec th:last-child{padding-right:0}
.rec .yr{width:7rem;color:var(--muted);white-space:nowrap}
.rec .at{width:30%;color:var(--muted)}
.rec .grp th{font-family:var(--mono);font-size:.8rem;font-weight:400;color:var(--accent);padding:1.7rem 0 .45rem}
.rec tbody tr:first-child th{padding-top:1.1rem}
.rec tbody tr:last-child td{border-bottom:1.6px solid var(--ink);padding-bottom:1.1rem}

/* questions */
.qa{grid-column:1/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
.q{padding:1.5rem 0 2.2rem;border-top:1px solid var(--rule)}
.q h3{font-size:clamp(1.15rem,1.45vw,1.6rem);font-weight:500;letter-spacing:-.022em;line-height:1.2;margin-bottom:.7rem}
.q p{color:#B5BECE;max-width:56ch;line-height:1.55;text-wrap:pretty}

/* contact */
.foot{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(6rem,13vh,9rem) var(--pad) clamp(1.1rem,3vh,2rem)}
.foot h2{font-size:clamp(2.6rem,7vw,8.4rem);letter-spacing:-.05em;line-height:.92;margin:0 0 1.4rem -.04em}
.mail{display:inline-block;margin-top:clamp(2.2rem,6vh,4.2rem);font-size:clamp(1.3rem,3.5vw,3.9rem);font-weight:500;letter-spacing:-.036em;line-height:1.1;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.14em;transition:color .5s var(--ease),background-size .7s var(--ease);overflow-wrap:anywhere}
.mail:hover{color:var(--accent);background-size:0 1px;background-position:100% 100%}
.links{display:flex;gap:2.2rem;margin-top:2rem;font-size:1.05rem}
.links a{text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);transition:color .4s var(--ease)}
.links a:hover{color:var(--accent)}
.out{width:.72em;height:.72em;transition:transform .5s var(--ease)}
.links a:hover .out{transform:translate(2px,-2px)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 2rem;margin-top:clamp(5rem,15vh,10rem);padding-top:1rem;border-top:1px solid rgba(135,146,166,.22);font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.back{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);transition:color .4s var(--ease)}
.back svg{width:2.1em;height:1.05em;color:var(--accent);overflow:visible}
.back:hover{color:var(--accent)}

/* ---------- reveals: settle, no bounce */
.js [data-r]{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.js [data-r].in{opacity:1;transform:none}
.frozen [data-r]{opacity:1!important;transform:none!important;transition:none!important}
.frozen *,.frozen *::before,.frozen *::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important}

/* ---------- 404 */
.nf-main{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad)}
.nf-main h1{margin-bottom:1.5rem}
.nf-main .mail{margin-top:2.5rem;align-self:flex-start}

/* ---------- narrower screens */
@media (max-width:1180px){
  .chap-head{grid-column:1/13;margin-bottom:1.6rem}
  .chap-body{grid-column:1/7}
  .chap-eq{grid-column:7/13}
  .paper{grid-column:6/13}
  .sec-head{grid-column:1/6}
  .eyebrow{grid-column:1/5}
  .hero-line{grid-column:5/12}
}
@media (max-width:760px){
  .mark{display:none}
  .loop{margin:0 auto}
  .loop ol{gap:.55em;font-size:.84rem}
  .arr{width:1.35em}
  .bar{padding-top:1rem}
  .bar::before{opacity:1}
  .hero{padding-top:6rem}
  .eyebrow{grid-column:1/13;margin-bottom:.8rem}
  .hero-line{grid-column:1/13;max-width:30ch}
  .sec{padding-top:clamp(5rem,13vh,8rem)}
  .sec-head,.sec-head.wide,.paper,.caps-head h2,.caps-head .lede,.chap-body,.chap-eq,.rec-wrap,.qa{grid-column:1/13}
  .paper{margin-top:2.6rem;text-align:left;hyphens:manual;-webkit-hyphens:manual}
  .caps-head .lede{margin-top:1.2rem}
  .chap-eq{margin-top:2.4rem}
  .qa{grid-template-columns:1fr}
  .rec,.rec tbody,.rec tr,.rec td,.rec th{display:block;width:auto}
  .rec thead{display:none}
  .rec caption{display:block;border-bottom:1.6px solid var(--ink)}
  .rec td{padding:.1rem 0}
  .rec .yr{width:auto;font-family:var(--mono);font-size:.78rem;padding-top:1.1rem}
  .rec .yr:empty{display:none}
  .rec .at{width:auto;font-size:.92em;padding-bottom:.2rem}
  .rec .at:empty{display:none}
  .rec tbody tr:last-child td{border-bottom:0}
  .rec tbody tr:last-child td:nth-child(2){border-bottom:1.6px solid var(--ink);padding-bottom:1.1rem}
  .facts div{grid-template-columns:7.2rem 1fr}
  .foot-base{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r]{opacity:1;transform:none}
  .stage canvas{opacity:1}
}