/* ═══════════════════════════════════════════════════════ tokens ═══
95% graphite and white. Amber is punctuation, never atmosphere.   */
:root{
--bg:#050609;
--ink:#f2f4f7;
--dim:rgba(242,244,247,.55);
--faint:rgba(242,244,247,.34);
--hair:rgba(242,244,247,.10);
--amb:#ef9a57;
--cool:#8ebfd6;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
--disp:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
--pad:clamp(24px,5vw,72px);
--gap:clamp(56px,7vw,90px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--disp);overflow-x:hidden;
-webkit-font-smoothing:antialiased}
::selection{background:var(--amb);color:#050609}
a{color:inherit;text-decoration:none}
canvas{display:block}
/* ═══════════════════════════════════════════════════ one grid ═════ */
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad)}
section.band{padding:clamp(84px,11vh,134px) 0}
#loupe,#caustics{min-height:96vh;display:flex;align-items:center}
#loupe > .wrap,#caustics > .wrap{width:100%}
/* ══════════════════════════════════════════════ three type scales ══
hero · section headline · body, plus technical mono and data.     */
.hero h1,.labs-page h1{font-size:clamp(44px,5.5vw,78px);font-weight:500;letter-spacing:0;line-height:1.06;color:#fff}
main h2,.labs-page h2{font-size:clamp(34px,4.2vw,58px);font-weight:500;letter-spacing:0;line-height:1.14}
p{font-size:clamp(17px,1.28vw,20px);line-height:1.66;color:var(--dim)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.data{font-size:clamp(28px,2.7vw,44px);font-weight:400;letter-spacing:-.022em;
font-variant-numeric:tabular-nums}
/* the only chapter marker: a tiny technical label, no giant numerals */
.tag{display:flex;align-items:center;gap:9px;color:var(--faint);margin-bottom:26px}
.tag i{width:5px;height:5px;border-radius:50%;background:var(--amb);flex:none}
.lead{max-width:46ch;margin-top:36px}
/* motion family A + B — the only reveals on the site */
/* every hidden state is opt-in from script, so nothing is lost if it fails */
.rv [data-rv]{opacity:0}
.rv .ln{display:block;overflow:hidden;padding-bottom:.20em;margin-bottom:-.20em}
.rv .ln > span{display:block}
.ln{display:block}
[data-par]{will-change:transform}
/* ══════════════════════════════════════════════════════ header ════ */
#top{position:fixed;top:0;left:0;right:0;z-index:100;height:78px;display:flex;
align-items:center;justify-content:space-between;padding:0 var(--pad);pointer-events:none}
#top .brand{display:flex;align-items:center;gap:11px;pointer-events:auto}
#top .brand svg{width:18px;height:18px;flex:none}
#top .brand b{font-weight:600;font-size:13px;letter-spacing:.24em}
#top nav{display:flex;gap:clamp(22px,3vw,44px);pointer-events:auto}
#top nav a{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:var(--faint);transition:color .4s}
#top .lang-switch{pointer-events:auto;margin-left:18px}
.lang-switch select{appearance:none;border:1px solid var(--hair);border-radius:99px;background:#090b0f;color:var(--ink);font:12px var(--mono);letter-spacing:.08em;padding:8px 27px 8px 12px;cursor:pointer}
.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}
#top nav a:hover{color:var(--ink)}
.nav-proposal{color:var(--ink)!important;border:1px solid var(--hair);border-radius:99px;padding:8px 13px;margin-top:-8px}
@media(max-width:760px){
#top{height:auto;min-height:76px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 14px;align-items:center;padding-top:16px;padding-bottom:12px;background:linear-gradient(180deg,var(--bg),rgba(5,6,9,.88) 72%,transparent)}
#top .brand{min-width:0}#top .brand b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#top .lang-switch{grid-column:2;grid-row:1;justify-self:end;margin-left:0}
#top nav{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:10px 16px;overflow:visible;padding:6px 0 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#top nav::-webkit-scrollbar{display:none}
#top nav a{flex:0 0 auto;font-size:10px;letter-spacing:.12em;white-space:nowrap}
#top .nav-proposal{margin-top:0;padding:8px 12px}
.proposal-header nav a:not(.nav-proposal){display:inline-flex}
}
#grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:overlay}
/* ═══════════════════════════════════════════════ boot ════════════════ */
#boot{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;
pointer-events:none}
#boot.done{display:none}
.b-in{display:flex;align-items:center;gap:16px}
.b-in svg{width:19px;height:19px;flex:none}
.b-rail{display:block;width:clamp(120px,20vw,240px);height:1px;
background:rgba(242,244,247,.13);position:relative;overflow:hidden}
.b-rail i{position:absolute;inset:0 100% 0 0;
background:linear-gradient(90deg,rgba(242,244,247,.5),var(--amb))}
.b-num{color:var(--faint);font-variant-numeric:tabular-nums}
/* ═══════════════════════════════════════ 01 · PRIME — the hero ════
Flat sibling layers. The plate itself is WebGL (hero-gl.js): nothing
in the DOM is ever transformed by the pointer, so the header and the
CTAs stay exactly where they are put.                             */
.s-prime{height:190vh}
.hero{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0;background:
radial-gradient(40% 34% at 13% 56%, rgba(219,140,90,.135), rgba(0,0,0,0) 66%),
radial-gradient(44% 38% at 76% 22%, rgba(126,182,220,.115), rgba(0,0,0,0) 66%),
radial-gradient(86% 64% at 60% 18%, rgba(142,191,214,.06), rgba(0,0,0,0) 62%),
linear-gradient(168deg,#080b10 0%,var(--bg) 58%,#030407 100%)}
/* one bright specular that only exists once the plate has broken */
/* the hero plate is WebGL: a flat sibling that never transforms, so the
header and the CTAs are untouched by anything happening in the glass. */
.hero-gl{position:absolute;inset:0;z-index:10;width:100%;height:100%;display:block;
pointer-events:none;opacity:0}
.hero-content{position:absolute;z-index:30;left:var(--pad);top:50%;
transform:translateY(-50%) translateY(var(--exit,0px));width:min(52vw,720px)}
.hero-content p{margin-top:26px;max-width:40ch}
/* three beats in one slot: the proposition first, then what the glass is
doing to itself as you scroll through it. */
.hero-story{position:relative;margin-top:26px;max-width:40ch;height:5.2em}
.hero-story b{position:absolute;left:0;top:0;right:0;font-weight:400;
color:var(--dim);will-change:opacity,transform;opacity:0}
.hero-story b em{font-style:normal;color:var(--ink)}
.hero-story b i{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.26em;
color:var(--amb);margin-bottom:10px;font-style:normal}
.hero-cta{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}
.btn{padding:14px 26px;border-radius:99px;font-size:14.5px;font-weight:500;
transition:transform .32s cubic-bezier(.22,.61,.36,1),background .32s,border-color .32s}
.btn.p{background:#eef2f7;color:#050609}
.btn.p:hover{background:#fff;transform:translateY(-2px)}
.btn.s{border:1px solid rgba(242,244,247,.20);color:rgba(242,244,247,.88)}
.btn.s:hover{border-color:rgba(242,244,247,.40);transform:translateY(-2px)}
/* ── liquid-metal CTA ──────────────────────────────────────────────────
The plate and the shader canvas are siblings of the link, never parents
of it, so the anchor itself is never transformed and stays clickable.
The canvas is inset negatively because the bloom reaches about four
sigma past the pill and would otherwise be cut off on a hard edge.
Everything here only applies once .lm-on is set from script, so without
WebGL2 the original solid pill is what you get.                      */
.lm{position:relative;display:inline-flex;isolation:isolate}
.lm-plate,.lm-fx{display:none}
.lm-on .lm-plate,.lm-on .lm-fx{display:block}
.lm-plate{position:absolute;inset:0;z-index:0;border-radius:99px;background:#0b0c0e;
box-shadow:0 5px 10px rgba(0,0,0,.72),0 14px 31px rgba(0,0,0,.62),
0 29px 61px rgba(0,0,0,.42);
transition:box-shadow .38s cubic-bezier(.22,.61,.36,1),
background .38s cubic-bezier(.22,.61,.36,1)}
/* deepen it while the metal is lit, so the bright face keeps its edge */
.lm-on.hot .lm-plate{background:#08090a;
box-shadow:0 6px 12px rgba(0,0,0,.80),0 19px 40px rgba(0,0,0,.72),
0 40px 85px rgba(0,0,0,.55)}
/* pressed: the button settles onto the surface, so the shadow tightens */
.lm-on.press .lm-plate{background:#070809;
box-shadow:0 2px 6px rgba(0,0,0,.82),0 8px 19px rgba(0,0,0,.70),
0 16px 38px rgba(0,0,0,.50);transition-duration:.10s}
/* A canvas is a REPLACED element: with width/height:auto its used size is
its own intrinsic (attribute) size, not the box the insets describe. So
resize() measured 300x150, wrote cv.width=600, which grew the intrinsic
size, which grew the CSS box, which grew it again — the render drifted
off the button and ballooned. Size it explicitly off the wrapper.     */
.lm-fx{position:absolute;top:-86px;left:-86px;
width:calc(100% + 172px);height:calc(100% + 172px);
z-index:1;pointer-events:none}
.lm-on .btn{position:relative;z-index:2;background:none;border-color:transparent;
color:#fff;
/* the metal pools wherever the cursor is, so a tight dark shadow keeps the
label readable over a blown-out patch without dimming the effect. */
text-shadow:0 1px 2px rgba(0,0,0,.62),0 0 10px rgba(0,0,0,.42)}
.lm-on .btn:hover{background:none;border-color:transparent;transform:none}
.lm-on .btn:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:5px}
.hero-foot{position:absolute;z-index:30;left:var(--pad);right:var(--pad);bottom:26px;
display:flex;align-items:flex-end;justify-content:space-between;gap:24px;color:var(--faint)}
#cue{display:flex;align-items:center;gap:11px}
#cue i{width:44px;height:1px;background:linear-gradient(90deg,rgba(242,244,247,.30),rgba(239,154,87,.34) 62%,transparent)}
.hero-spec{display:flex;gap:clamp(14px,2vw,30px)}
@media(max-width:900px){
.hero-content{width:auto;right:var(--pad);top:auto;bottom:22vh;transform:translateY(var(--exit,0px))}
.hero-cta{flex-direction:column;align-items:flex-start}
.hero-spec{display:none}
.hero-story{height:6.4em}
}
/* ═════════════════════════════════════ shared editorial furniture ══ */
.split{display:grid;grid-template-columns:minmax(0,var(--l,1fr)) minmax(0,var(--r,1fr));
gap:var(--gap);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:48px}}
.rows{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--hair)}
.row{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:20px;
min-height:82px;padding:0 2px;border-bottom:1px solid var(--hair);position:relative;
transition:color .35s}
.row .ind{width:0;height:1px;background:var(--amb);transition:width .4s cubic-bezier(.22,.61,.36,1)}
.row .nm{font-size:16px;color:var(--dim);transition:color .35s}
.row .vl{color:var(--dim);transition:color .35s}
.row.on .nm,.row.on .vl{color:var(--ink)}
.row.on .ind{width:14px}
.tech{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:44px;color:var(--faint)}
/* ══════════════════════════════════════════ 02 · FRACTURE ═════════
One bounded experiment. Four fragments separate once on entry.    */
.fx-pane{position:relative;width:100%;max-width:480px;aspect-ratio:480/520;
border-radius:10px;overflow:hidden;background:
radial-gradient(72% 60% at 40% 26%, rgba(142,191,214,.045), rgba(0,0,0,0) 66%),
linear-gradient(160deg,#080b10,#050609)}
.frag{position:absolute;inset:0;transition:transform 1.15s cubic-bezier(.22,.61,.36,1),
opacity .9s ease;transition-delay:calc(var(--i,0) * 90ms)}
.frag .e,.frag .f{position:absolute;inset:0}
.frag .e{opacity:.34;background:linear-gradient(var(--ang,110deg),
rgba(220,230,240,.86) 0%, rgba(142,191,214,.34) 40%,
rgba(232,240,250,.62) 66%, rgba(239,154,87,.20) 90%, rgba(130,150,172,.10) 100%)}
.frag .f{background:linear-gradient(var(--ang2,140deg),
rgba(21,30,43,.60),rgba(12,18,27,.76) 52%,rgba(6,9,13,.88))}
.fx-pane .cap{position:absolute;left:16px;bottom:14px;z-index:5;font-family:var(--mono);font-size:9px;
letter-spacing:.26em;text-transform:uppercase;color:rgba(242,244,247,.26)}
.fx-cracks{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
.fx-cracks path{fill:none;stroke:rgba(226,240,255,.62);stroke-width:1;stroke-linecap:round}
.fx-hit{position:absolute;z-index:4;width:190px;height:190px;margin:-95px 0 0 -95px;
pointer-events:none;opacity:0;
background:radial-gradient(circle,rgba(240,250,255,.92) 0%,rgba(158,204,244,.34) 12%,
rgba(96,150,206,.10) 32%,rgba(0,0,0,0) 62%)}
/* photoelastic stress, only where the pointer presses */
.fx-stress{position:absolute;z-index:2;width:56%;height:56%;margin:-28% 0 0 -28%;
pointer-events:none;opacity:0;mix-blend-mode:screen;
background:radial-gradient(circle,
rgba(120,80,190,.16) 0%,rgba(70,180,150,.13) 26%,rgba(210,140,80,.10) 46%,rgba(0,0,0,0) 66%)}
/* ═════════════════════════════════════════════ 03 · INDEX ═════════ */
.spec{width:100%;max-width:340px;aspect-ratio:1;border-radius:10px;overflow:hidden;
background:linear-gradient(160deg,#080b10,#050609)}
.spec canvas{width:100%;height:100%}
.spec-cap{margin-top:14px;color:var(--faint);display:flex;justify-content:space-between}
.row.mat{grid-template-columns:14px 1fr auto}
.row.mat .vl{font-size:clamp(28px,2.7vw,42px);letter-spacing:-.022em;font-variant-numeric:tabular-nums}
/* ═══════════════════════════════════════ 04 · DISPERSION ══════════ */
.ray-plate{position:relative;width:100%;max-width:640px;aspect-ratio:640/300}
.rp{position:absolute;inset:-6% -4%;z-index:0;perspective:1200px;transform-style:preserve-3d}
.rps{position:absolute;will-change:transform}
.rps .e,.rps .f{position:absolute;inset:0}
.rps .e{opacity:var(--edge,.26);background:linear-gradient(var(--ang,118deg),
rgba(220,230,240,.88) 0%,rgba(142,191,214,.34) 36%,rgba(232,240,250,.66) 62%,
rgba(239,154,87,.20) 88%,rgba(130,150,172,.10) 100%)}
.rps .f{background:linear-gradient(var(--ang2,145deg),rgba(20,29,42,.52),rgba(11,17,26,.70) 54%,rgba(6,9,13,.84))}
.ray{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;overflow:visible}
.ray .beam{stroke:rgba(242,244,247,.80);stroke-width:1.4}
.ray .body{fill:rgba(16,23,33,.72);stroke:rgba(220,230,240,.30);stroke-width:1}
.ray .out{stroke-width:1;opacity:.85}
.ray .lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;fill:rgba(242,244,247,.32)}
.lines{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(48px,6vw,76px);
border-top:1px solid var(--hair)}
.line{padding:30px 24px 30px 0;border-bottom:1px solid var(--hair)}
.line .k{color:var(--faint);display:flex;align-items:center;gap:8px}
.line .k b{width:16px;height:1px;display:block}
.line .w{font-size:clamp(22px,2.1vw,32px);margin-top:16px;letter-spacing:-.02em;
font-variant-numeric:tabular-nums}
.line .n{color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.2em;margin-top:8px}
@media(max-width:760px){.lines{grid-template-columns:1fr}}
/* ═══════════════════════════════════════ 05 · WORKBENCH ═══════════ */
.stats{display:flex;gap:clamp(28px,4vw,52px);margin-top:34px}
.stats b{display:block;font-size:clamp(26px,2.4vw,38px);font-weight:500;letter-spacing:-.026em;
font-variant-numeric:tabular-nums}
.stats span{color:var(--faint);font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
text-transform:uppercase;display:block;margin-top:8px}
.preview{width:100%;border-radius:10px;overflow:hidden;aspect-ratio:16/11;
background:linear-gradient(160deg,#080b10,#050609)}
.preview canvas{width:100%;height:100%}
#workbench .row{min-height:62px}
.prop{cursor:default}
.prop .vl{font-family:var(--mono);font-size:13px;letter-spacing:.14em;
font-variant-numeric:tabular-nums}
.scale{display:flex;flex-wrap:wrap;gap:0 4px;padding:0 0 22px 34px;margin-top:-6px}
.scale button{background:none;border:0;padding:6px 12px 6px 0;color:var(--faint);cursor:pointer;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;transition:color .3s}
.scale button:hover,.scale button.on{color:var(--amb)}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--gap);
margin-top:clamp(30px,3.4vw,42px);border-top:1px solid var(--hair)}
.cap-i{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--hair);
color:var(--dim);font-size:15px}
.cap-i em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
color:var(--faint)}
.cap-i.live{color:var(--ink)}
.cap-i.live em{color:var(--amb)}
@media(max-width:900px){.caps{grid-template-columns:1fr}}
/* ════════════════════════════════════ 06 · FIELD NOTES ════════════ */
.notes-rail{margin-top:clamp(44px,5.5vw,72px);overflow:hidden;cursor:grab;
-webkit-user-select:none;user-select:none}
.notes-rail.drag{cursor:grabbing}
.notes-rail{padding:56px 0 44px}
.notes-track{display:flex;gap:clamp(16px,2.2vw,28px);will-change:transform;
padding-right:var(--pad);align-items:center;
perspective:1400px;transform-style:preserve-3d}
.tcard{transform-style:preserve-3d}
.notes-hint{display:flex;align-items:center;gap:12px;margin-top:22px;color:var(--faint)}
.notes-hint .bar{width:clamp(90px,12vw,170px);height:1px;background:rgba(242,244,247,.13);
position:relative}
.notes-hint .bar i{position:absolute;top:0;left:0;height:1px;width:34%;background:var(--amb)}
.tcard{position:relative;flex:0 0 clamp(298px,28vw,392px);padding:32px 28px 28px;
min-height:clamp(300px,26vw,352px);isolation:isolate;will-change:transform}
.tshards{position:absolute;inset:0;z-index:0;pointer-events:none;
perspective:1100px;perspective-origin:50% 46%;transform-style:preserve-3d}
.tsh{position:absolute;will-change:transform;transform-style:preserve-3d;backface-visibility:hidden}
.tsh .e,.tsh .f{position:absolute;inset:0}
.tsh .e{opacity:var(--edge,.26);background:linear-gradient(var(--ang,118deg),
rgba(220,230,240,.94) 0%, rgba(169,196,222,.28) 18%, rgba(142,191,214,.46) 34%,
rgba(190,206,222,.14) 48%, rgba(232,240,250,.80) 64%, rgba(169,196,222,.24) 78%,
rgba(239,154,87,.26) 90%, rgba(130,150,172,.10) 100%)}
.tsh .f{background:
radial-gradient(62% 62% at var(--vx,50%) var(--vy,46%),
rgba(169,196,222,calc(.05 * var(--tone,1))),rgba(0,0,0,0) 52%,rgba(3,5,8,.48) 100%),
linear-gradient(var(--ang2,142deg),
rgba(22,32,46,calc(.58 * var(--tone,1))),rgba(13,19,29,calc(.74 * var(--tone,1))) 50%,
rgba(6,9,13,.88))}
.tcard .q,.tcard blockquote,.tcard .who{position:relative;z-index:2}
.tcard .q{display:block;font-size:26px;line-height:.9;color:var(--amb);opacity:.82;margin-bottom:18px}
.tcard blockquote{font-size:clamp(15.5px,1.22vw,18.5px);line-height:1.56;
letter-spacing:-.008em;color:rgba(242,244,247,.93)}
.tcard .metric{position:relative;z-index:2;margin-top:22px;padding-top:18px;
border-top:1px solid rgba(242,244,247,.09);display:flex;align-items:baseline;gap:10px}
.tcard .metric b{font-size:clamp(20px,1.9vw,27px);font-weight:500;letter-spacing:-.025em;
font-variant-numeric:tabular-nums;color:#fff}
.tcard .metric span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;
text-transform:uppercase;color:var(--faint)}
.tcard .who{margin-top:20px;display:flex;align-items:center;gap:12px}
.tcard .avatar{width:42px;height:42px;border-radius:50%;flex:none;overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(214,230,244,.30),0 4px 14px rgba(0,0,0,.4);
background:#0a0e14}
.tcard .avatar canvas{width:100%;height:100%;display:block}
.tcard .who b{display:block;font-size:14px;font-weight:500}
.tcard .who span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
text-transform:uppercase;color:var(--faint);margin-top:4px}
@media(max-width:900px){.tcard{flex-basis:80vw}}
/* ═══════════════════════════════════════════ 04 · LOUPE ═══════════
A real glass loupe. The plate is drawn to canvas once; the lens then
resamples it per pixel with magnification, rim bend and a per-channel
offset, so the type actually distorts and fringes at the edge.       */
.loupe{position:relative;width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
background:linear-gradient(158deg,#080b10,#050609);cursor:crosshair}
.loupe canvas.base{position:absolute;inset:0;width:100%;height:100%}
.loupe canvas.lens{position:absolute;left:0;top:0;pointer-events:none;
filter:drop-shadow(0 12px 28px rgba(0,0,0,.6))}
.loupe .hint{position:absolute;left:18px;bottom:14px;font-family:var(--mono);font-size:9px;
letter-spacing:.26em;text-transform:uppercase;color:rgba(242,244,247,.30)}
.loupe .pw{position:absolute;right:18px;bottom:14px;font-family:var(--mono);font-size:9px;
letter-spacing:.2em;color:var(--amb);opacity:.85}
/* ════════════════════════════════════════ 06 · ASSEMBLY ═══════════ */
.s-assembly{height:190vh}
.asm-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.asm-stage{position:relative;z-index:1;width:min(860px,88vw);aspect-ratio:1.14}
/* section 06 renders in WebGL (three.js) — the canvas is the only
thing in the stage; the callouts below stay in the DOM. */
.asm-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
/* no WebGL: a flat stand-in disc so the callouts still have something to
point at, rather than an empty square. */
.asm-stage.nogl .asm-gl{display:none}
.asm-stage.nogl::after{content:"";position:absolute;left:50%;top:50%;width:52%;aspect-ratio:1;
transform:translate(-50%,-50%);border-radius:50%;
background:radial-gradient(58% 58% at 38% 32%,rgba(190,214,236,.10),rgba(0,0,0,0) 64%),
linear-gradient(140deg,rgba(24,34,48,.52),rgba(8,13,20,.78));
box-shadow:inset 0 0 0 1px rgba(222,238,252,.34),0 14px 44px rgba(0,0,0,.5)}
.asm-lab{position:absolute;z-index:2;left:50%;top:50%;display:flex;align-items:center;gap:10px;
white-space:nowrap;pointer-events:none;opacity:0}
.asm-lab i{display:block;height:1px;width:0;background:rgba(214,230,244,.34)}
.asm-lab b{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
font-weight:400;color:rgba(242,244,247,.74)}
.asm-lab em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
color:var(--amb);margin-left:8px}
.asm-cap{position:absolute;z-index:3;left:0;right:0;bottom:6vh;text-align:center;
pointer-events:none}
.asm-cap .mono{color:var(--faint)}
@media(max-width:900px){.s-assembly{height:170vh}.asm-stage{width:90vw}}
/* ═══════════════════════════════════════ 09 · SPECIMENS ═══════════
Angular plates at four depths over a barred field. They lean toward the
pointer; the one under it leans hardest and lights from within.       */
.s-specimens{position:relative;overflow:hidden;min-height:106vh;display:flex;align-items:center}
.s-specimens > .wrap{width:100%;position:relative;z-index:5;pointer-events:none}
.s-specimens > .wrap *{pointer-events:auto}
.sp-bars{position:absolute;inset:-10% -4%;z-index:0;opacity:.55;
background:repeating-linear-gradient(90deg,
rgba(226,238,250,.12) 0 clamp(10px,1.1vw,18px),
rgba(0,0,0,0) clamp(10px,1.1vw,18px) clamp(56px,5.4vw,86px));
-webkit-mask-image:radial-gradient(56% 54% at 70% 50%,#000 6%,rgba(0,0,0,.30) 52%,transparent 78%);
mask-image:radial-gradient(56% 54% at 70% 50%,#000 6%,rgba(0,0,0,.30) 52%,transparent 78%)}
.sp-bloom{position:absolute;z-index:1;width:40vw;height:40vw;left:70%;top:46%;
margin:-22vw 0 0 -22vw;pointer-events:none;
background:radial-gradient(circle,rgba(154,204,244,.22) 0%,rgba(96,150,206,.075) 26%,rgba(0,0,0,0) 60%)}
.sp-field{position:absolute;inset:0;z-index:2;perspective:1600px;perspective-origin:64% 48%;
transform-style:preserve-3d;pointer-events:none}
.sp-card{position:absolute;transform-style:preserve-3d;will-change:transform;
backface-visibility:hidden}
.sp-card .g,.sp-card .b{position:absolute;inset:0}
.sp-card .g{opacity:var(--edge,.34);background:linear-gradient(var(--ang,124deg),
rgba(238,248,255,1) 0%,rgba(176,206,232,.30) 18%,rgba(150,202,226,.54) 36%,
rgba(242,248,255,.94) 62%,rgba(180,206,232,.26) 80%,rgba(245,166,102,.34) 92%,
rgba(134,154,176,.12) 100%)}
.sp-card .b{background:
radial-gradient(46% 46% at var(--lx,50%) var(--ly,50%),
rgba(212,232,250,calc(var(--lit,0) * .30)),
rgba(120,170,212,calc(var(--lit,0) * .09)) 38%,rgba(0,0,0,0) 62%),
linear-gradient(var(--ang2,146deg),rgba(30,42,58,.62),rgba(14,21,31,.78) 50%,rgba(7,11,16,.90))}
.sp-card .img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;
opacity:0;z-index:2;object-fit:cover}
.sp-card .t{position:absolute;z-index:4;pointer-events:none;
text-shadow:0 2px 14px rgba(0,0,0,.75)}
.sp-card .t b{display:block;font-size:15.5px;font-weight:500;color:rgba(242,244,247,.94)}
.sp-card .t span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.22em;
text-transform:uppercase;color:var(--faint);margin-top:7px}
.sp-card .t em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;
letter-spacing:.16em;color:var(--amb);margin-top:14px}
@media(max-width:900px){.sp-field,.sp-bars,.sp-bloom{display:none}.s-specimens{min-height:auto}}
/* ════════════════════════════════════════ 11 · CAUSTICS ═══════════ */
.s-caustics{position:relative;overflow:hidden}
.cau{position:absolute;inset:0;z-index:0}
.cau canvas{width:100%;height:100%;display:block;filter:blur(.5px)}
.s-caustics .wrap{position:relative;z-index:2}
.s-caustics::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(78% 64% at 24% 50%,rgba(5,6,9,.92),rgba(5,6,9,.34) 60%,rgba(5,6,9,0))}
/* ══════════════════════════════════════════════ HUD ═══════════════ */
#hud{position:fixed;right:var(--pad);bottom:22px;z-index:90;display:flex;align-items:flex-end;
gap:12px;pointer-events:none;opacity:0}
#hud .rail{width:1px;height:58px;background:rgba(242,244,247,.14);position:relative}
#hud .rail i{position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;
background:var(--amb);top:0;transform:translateY(-50%)}
#hud .read{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
color:var(--faint);text-align:right;line-height:1.9}
#hud .read b{display:block;color:rgba(242,244,247,.80);font-weight:400}
@media(max-width:760px){#hud{display:none}}
/* ═════════════════════════════════════════ 13 · EXPORT ════════════ */
.ex-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--gap);
margin-top:clamp(44px,5vw,68px);border-top:1px solid var(--hair)}
.ex-i{padding:26px 0;border-bottom:1px solid var(--hair)}
.ex-i b{display:block;font-size:15px;font-weight:500}
.ex-i span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.22em;
text-transform:uppercase;color:var(--faint);margin-top:9px}
.ex-code{margin-top:clamp(40px,5vw,64px);border:1px solid var(--hair);border-radius:10px;
padding:24px 26px;font-family:var(--mono);font-size:12px;line-height:2;color:var(--dim);
overflow-x:auto;background:linear-gradient(160deg,rgba(16,23,33,.44),rgba(7,10,15,.52))}
.ex-code i{font-style:normal;color:rgba(150,202,226,.92)}
.ex-code u{text-decoration:none;color:var(--amb)}
.ex-code s{text-decoration:none;color:rgba(242,244,247,.26)}
@media(max-width:900px){.ex-grid{grid-template-columns:repeat(2,1fr)}}
/* ══════════════════════════════════════════ 14 · ANNEAL ═══════════ */
.s-anneal{min-height:100vh;display:grid;place-items:center;position:relative;text-align:center}
.pane{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:min(940px,92vw);aspect-ratio:16/9;pointer-events:none}
/* section 13 renders in WebGL: the pieces are extruded solids, not divs. */
.ann-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.pane.nogl{background:linear-gradient(150deg,rgba(19,27,39,.42),rgba(6,9,14,.66));
border-radius:10px;box-shadow:inset 0 0 0 1px rgba(214,230,244,.14)}
.an{position:relative;z-index:2;max-width:640px;padding:0 var(--pad)}
.an .lead{margin:26px auto 0}
.an .hero-cta{justify-content:center}
footer{border-top:1px solid var(--hair);padding:clamp(56px,7vw,90px) 0 30px;
position:relative;overflow:hidden}
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--gap)}
.f-top h4{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
color:var(--faint);font-weight:400;margin-bottom:16px}
.f-top a{display:block;font-size:14px;color:var(--dim);padding:6px 0;transition:color .3s}
.f-top a:hover{color:var(--ink)}
.f-lead{max-width:30ch;font-size:14.5px;margin-top:16px}
.f-brand{display:flex;align-items:center;gap:11px}
.f-brand svg{width:18px;height:18px;flex:none}
.f-brand b{font-weight:600;font-size:13px;letter-spacing:.24em}
.f-mark{margin-top:clamp(44px,6vw,76px);font-size:clamp(56px,14.4vw,196px);font-weight:500;
letter-spacing:-.052em;line-height:.78;user-select:none;display:flex;
cursor:default;perspective:900px}
.f-mark .fl{display:inline-block;color:transparent;will-change:transform;
-webkit-text-stroke:1px var(--sc,rgba(242,244,247,.10));transform-style:preserve-3d}
.f-bot{margin-top:clamp(26px,3vw,42px);padding-top:22px;border-top:1px solid var(--hair);
display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--faint)}
.f-bot .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--amb);
margin-right:8px;vertical-align:middle}
@media(max-width:900px){.f-top{grid-template-columns:1fr 1fr;gap:38px}}
#fallback{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:32px;
text-align:center;color:var(--dim);background:var(--bg)}
@media (prefers-reduced-motion: reduce){
[data-rv],.frag,.seam,.btn{transition:none!important}
.rv [data-rv]{opacity:1;transform:none}
}

/* Institutional routes reuse the original optical language. */
.labs-page{min-height:100vh;background:var(--bg);color:var(--ink)}
.proposal-page{--bg:#000;min-height:100vh;background:#000}
.sub-hero{min-height:100vh;display:flex;align-items:center;padding:130px 0 80px;position:relative;overflow:hidden;background:radial-gradient(45% 40% at 75% 30%,rgba(142,191,214,.11),transparent 70%),radial-gradient(35% 30% at 18% 64%,rgba(239,154,87,.10),transparent 72%)}
.sub-hero h1,.labs-page h2{white-space:pre-line;max-width:15ch}
.sub-hero .lead{max-width:62ch}
.not-list{border-top:1px solid var(--hair);margin-top:34px}.not-list h3{font-size:20px;font-weight:500;margin-bottom:20px}.not-list div{padding:18px 0;border-bottom:1px solid var(--hair);color:var(--dim);font-size:18px}
.loop-field{display:flex;flex-wrap:wrap;gap:12px;margin-top:52px}.loop-field span{border:1px solid var(--hair);border-radius:99px;padding:14px 20px;font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase}.loop-field span::after{content:' →';color:var(--amb)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);margin:52px 0}.card-grid article{background:var(--bg);padding:30px;min-height:180px}.card-grid h3{font-size:21px;font-weight:500}.card-grid p{font-size:16px;margin-top:18px}
.live-hero{text-align:center}.live-hero .wrap{display:flex;flex-direction:column;align-items:center}.live-hero h1{max-width:none}.live-field{position:relative;width:min(720px,84vw);height:180px;margin:42px 0}.live-field::before{content:'';position:absolute;inset:50% 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--cool),var(--amb),transparent)}.live-field i{position:absolute;top:50%;left:calc(14% + var(--n,0)*17%);width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 30px var(--cool);animation:pulse 2.4s ease-in-out infinite alternate}.live-field i:nth-child(2){left:31%;animation-delay:.3s}.live-field i:nth-child(3){left:48%;animation-delay:.6s}.live-field i:nth-child(4){left:65%;animation-delay:.9s}.live-field i:nth-child(5){left:82%;animation-delay:1.2s}@keyframes pulse{to{transform:scale(2);opacity:.35}}
.live-soon{margin-bottom:28px;color:var(--amb)}
.proposal-header{background:linear-gradient(180deg,var(--bg),rgba(5,6,9,.82) 72%,transparent)}
.proposal-header .proposal-lock{pointer-events:auto;color:var(--dim);border:1px solid var(--hair);background:var(--bg)}
.proposal-header .proposal-lock:hover{color:var(--ink);background:var(--bg)}
.proposal-gate .sub-hero{min-height:100vh}.gate-wrap{max-width:760px;margin:0 auto}.gate-icon{width:52px;height:52px;border:1px solid var(--hair);display:grid;place-items:center;margin-bottom:34px}.gate-icon svg{width:20px;color:var(--amb)}
.gate-form{max-width:520px;margin-top:44px}.gate-form label{display:block;font:10px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}.gate-controls{display:grid;grid-template-columns:1fr auto;gap:10px}.gate-controls input{height:50px;border:1px solid var(--hair);border-radius:2px;background:#090b0f;color:var(--ink);font-size:16px}.gate-controls button{height:50px;border-radius:2px;background:var(--ink);color:var(--bg);padding:0 28px}.gate-error{margin-top:14px;color:var(--amb);font:12px var(--mono);letter-spacing:.08em}
.proposal-hero{min-height:94vh}.proposal-hero h1{max-width:18ch;font-size:clamp(42px,5vw,72px)}.proposal-meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:48px;color:var(--faint)}
.proposal-index{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);padding-top:32px;padding-bottom:32px}.proposal-index a{font:10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding:13px 14px 13px 0;border-bottom:1px solid var(--hair);transition:color .3s}.proposal-index a:hover{color:var(--ink)}.proposal-index span{color:var(--amb);margin-right:9px}
.proposal-band{border-top:1px solid var(--hair)}.proposal-band h2{max-width:18ch}.proposal-band>.wrap>.lead{max-width:72ch}.proposal-band>.wrap>.lead+.lead{margin-top:22px}
.proposal-grid .proposal-media-card{grid-column:span 2;padding:0;min-height:0;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}.proposal-media-card img{display:block;width:100%;height:100%;min-height:420px;max-height:720px;object-fit:contain;background:#000}
.proposal-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}.proposal-grid article{min-height:220px}.proposal-grid .card-index{display:block;color:var(--amb);font-size:9px;margin-bottom:22px}.proposal-grid h3{line-height:1.3}.proposal-grid ul{list-style:none;margin-top:22px}.proposal-grid li{color:var(--dim);font-size:15px;line-height:1.55;padding:9px 0;border-top:1px solid var(--hair)}.proposal-grid li::before{content:'—';color:var(--amb);margin-right:9px}
.proposal-flow{display:flex;align-items:stretch;gap:0;margin-top:52px;overflow-x:auto;padding-bottom:12px}.flow-step{min-width:150px;flex:1;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:24px 30px 24px 0;position:relative}.flow-step span{display:block;color:var(--amb);font-size:9px;margin-bottom:14px}.flow-step b{font-size:15px;font-weight:500}.flow-step i{position:absolute;right:14px;top:50%;color:var(--faint);font-style:normal;transform:rotate(-90deg)}
.proposal-closing{max-width:64ch;margin-top:36px;padding:26px 0 0;border-top:1px solid var(--hair);font-size:clamp(20px,2vw,29px);line-height:1.4;color:var(--ink);text-transform:uppercase}.proposal-disclaimer{border-top:1px solid var(--hair)}.proposal-disclaimer h2{max-width:none}.proposal-disclaimer .lead{max-width:70ch}
@media(max-width:1050px){.proposal-index{grid-template-columns:repeat(3,1fr)}.proposal-grid{grid-template-columns:repeat(2,1fr)}.proposal-grid .proposal-media-card{grid-column:span 1}}
@media(min-width:761px) and (max-width:1050px){.proposal-header nav a:not(.nav-proposal){display:none}}
@media(max-width:760px){.proposal-header nav{display:flex}.proposal-header .proposal-lock{font-size:0;padding:8px}.proposal-header .proposal-lock svg{width:16px}.gate-controls{grid-template-columns:1fr}.proposal-index{grid-template-columns:repeat(2,1fr)}.proposal-grid{grid-template-columns:1fr}.proposal-flow{flex-direction:column}.flow-step{min-width:100%;padding-left:0}.flow-step i{right:auto;left:50%;top:auto;bottom:-9px;transform:none;background:var(--bg);padding:0 8px}.proposal-hero h1{font-size:clamp(36px,9.5vw,52px)}.proposal-media-card img{min-height:0;height:auto}}
@media(max-width:900px){.hero h1,.labs-page h1{font-size:clamp(36px,9.5vw,54px);line-height:1.08}main h2,.labs-page h2{font-size:clamp(30px,8vw,46px);line-height:1.18}.lead{margin-top:30px}.card-grid{grid-template-columns:1fr}.sub-hero{min-height:90vh}}