/* ============================================================================
   l13v.dev — styles
   Dark, quiet and large: one near-black ground, white type, and a single
   accent per project that the scroll scenes light up. Every colour is a token
   on :root; nothing below hardcodes a hue except the code highlighter.
   ========================================================================= */
:root{
  --bg:#050507; --bg-2:#0b0c10; --bg-3:#121419; --bg-4:#1b1e25;
  --fg:#f5f5f7; --fg-2:#a6a7b0; --fg-3:#6d6e78; --fg-4:#3c3d45;
  --line:rgba(245,245,247,.09); --line-2:rgba(245,245,247,.18);

  --brand:#6d8dff; --brand-2:#5cd0b3;
  --grad:linear-gradient(100deg,#7d97ff 0%,#5cd0b3 52%,#e9f7ff 100%);

  --pa:var(--brand);                 /* the current project's accent */
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --gut:clamp(1rem,4vw,3rem);
  --max:1360px;
  --r:14px;
  --nav:64px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --vh:100vh;
  color-scheme:dark;
}
@supports (height:100svh){ :root{ --vh:100svh } }

*,*::before,*::after{box-sizing:border-box}
/* touch screens snap to the same resting points a flick does on desktop */
html.touch{scroll-snap-type:y proximity}
.snapmark{position:absolute; left:0; width:1px; height:1px; scroll-snap-align:start; scroll-snap-stop:normal; pointer-events:none}
html{scroll-padding-top:var(--nav); -webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video,canvas,svg{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--pa); outline-offset:3px; border-radius:4px}
::selection{background:var(--pa); color:#050507}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut)}
.mono{font-family:var(--mono)}
.lbl{font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3)}
.serif{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── progress + nav ───────────────────────────── */
#bar{position:fixed; top:0; left:0; height:2px; width:100%; z-index:400; transform-origin:0 50%; transform:scaleX(0); background:var(--grad); pointer-events:none}
.nav{position:fixed; top:0; left:0; right:0; z-index:300; height:var(--nav); display:flex; align-items:center; pointer-events:none; transition:background-color .35s, backdrop-filter .35s, border-color .35s}
.nav.solid{background:rgba(5,5,7,.82); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid var(--line); pointer-events:auto}
.nav .wrap{display:flex; align-items:center; gap:1rem; width:100%}
.brand{
  pointer-events:auto; text-decoration:none; font-family:var(--mono); font-weight:600; font-size:.82rem; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:.55rem; padding:.45rem .2rem;
}
.brand i{width:8px; height:8px; border-radius:50%; background:var(--brand-2); box-shadow:0 0 0 0 rgba(92,208,179,.6); animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(92,208,179,.55)}70%{box-shadow:0 0 0 10px rgba(92,208,179,0)}100%{box-shadow:0 0 0 0 rgba(92,208,179,0)}}
.pill{
  pointer-events:auto; margin-left:auto; position:relative; display:flex; gap:.15rem; padding:.3rem;
  border-radius:100px; border:1px solid transparent; transition:background-color .4s, border-color .4s, backdrop-filter .4s;
}
.nav.solid .pill{background:rgba(18,20,25,.62); border-color:var(--line); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%)}
.pill a{
  position:relative; z-index:1; text-decoration:none; font-size:.82rem; font-weight:500; color:var(--fg-2);
  padding:.42rem .9rem; border-radius:100px; transition:color .25s; white-space:nowrap;
}
.pill a:hover,.pill a.on{color:var(--fg)}
.pill .ind{position:absolute; z-index:0; top:.3rem; bottom:.3rem; left:0; width:0; border-radius:100px; background:rgba(245,245,247,.1); transition:transform .5s var(--ease), width .5s var(--ease), opacity .3s; opacity:0}
.pill a.ext::after{content:"↗"; margin-left:.3rem; font-size:.75em; opacity:.6}
@media (max-width:560px){ .pill a{padding:.4rem .62rem; font-size:.78rem} .pill a.ext{display:none} }

/* ── hero ─────────────────────────────────────── */
.hero{height:calc(var(--vh) * 1.35); position:relative}
.hero-pin{position:sticky; top:0; height:var(--vh); overflow:hidden; display:grid; place-items:center}
.field{position:absolute; inset:0; width:100%; height:100%}
.hero-pin::after{content:""; position:absolute; inset:auto 0 0 0; height:30%; background:linear-gradient(180deg,transparent,var(--bg)); pointer-events:none}
.hero-name{
  position:relative; z-index:2; margin:0; text-align:center; font-weight:600;
  font-size:clamp(3.6rem,15.5vw,15.5rem); line-height:.86; letter-spacing:-.055em;
  display:flex; flex-direction:column; align-items:center; will-change:transform;
}
.hero-name .ln{display:block; overflow:hidden; padding:.02em .06em .08em}
.hero-name .ch{display:inline-block; will-change:transform,opacity; transform:translateY(105%); animation:ch-in 1.1s var(--ease) forwards}
.hero-name .ln.l2 .ch{background:var(--grad); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:ch-in 1.1s var(--ease) forwards, sheen 9s ease-in-out 1.4s infinite alternate}
@keyframes ch-in{to{transform:none}}
@keyframes sheen{from{background-position:0% 0}to{background-position:100% 0}}
@media (max-width:600px){ .hero-name{font-size:clamp(2.8rem, 14.5vw, 4.8rem)} }
.hero-meta{position:absolute; z-index:3; left:var(--gut); right:var(--gut); display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; opacity:0; animation:fade 1s ease 1s forwards}
.hero-meta.top{top:calc(var(--nav) + 1.2rem)}
.hero-meta.bot{bottom:clamp(1.2rem,4vh,2.4rem)}
.hero-meta .lbl{color:var(--fg-2)}
@keyframes fade{to{opacity:1}}
.cue{display:flex; align-items:center; gap:.7rem}
.cue i{position:relative; width:1px; height:42px; background:var(--line-2); overflow:hidden}
.cue i::after{content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--fg); animation:cue 2s var(--ease) infinite}
@keyframes cue{to{top:100%}}

/* ── statement ────────────────────────────────── */
/* pulled up under the hero, so the statement rises in while the name scatters — no dead air between them */
.statement{height:calc(var(--vh) * 1.6); margin-top:calc(var(--vh) * -0.55); position:relative}
.statement-pin{position:sticky; top:0; height:var(--vh); display:flex; align-items:center}
.stmt{
  margin:0; font-size:clamp(2rem,5.6vw,5.4rem); line-height:1.04; letter-spacing:-.038em; font-weight:500;
  max-width:17ch; text-wrap:balance;
}
.stmt .w{color:var(--fg-4); display:inline-block; transform:translateY(.12em); transition:color .45s ease, transform .6s var(--ease)}
.stmt .w.on{transform:none}
.stmt .w.on{color:var(--fg)}
.stmt .w.hl{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em}
.stmt .w.hl.on{color:var(--brand-2)}
.stmt-foot{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:end; margin-top:clamp(1.8rem,5vh,3.4rem); opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s var(--ease)}
.stmt-foot.on{opacity:1; transform:none}
.stmt-sub{margin:0; max-width:52ch; color:var(--fg-2); font-size:clamp(1rem,1.4vw,1.15rem)}
.cta{display:flex; gap:.6rem; flex-wrap:wrap}
@media (max-width:760px){ .stmt-foot{grid-template-columns:1fr} }

/* ── buttons ──────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; cursor:pointer;
  font-size:.9rem; font-weight:500; padding:.78rem 1.25rem; border-radius:100px;
  border:1px solid var(--line-2); background:transparent; color:var(--fg);
  transition:background-color .25s, border-color .25s, transform .25s var(--ease), color .25s;
}
.btn:hover{border-color:var(--fg); transform:translateY(-2px)}
.btn.pri{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn.pri:hover{background:transparent; color:var(--fg)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* ── section heads ────────────────────────────── */
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-block:clamp(4rem,12vh,8rem) clamp(1.6rem,4vh,2.6rem); border-bottom:1px solid var(--line)}
.sec-title{margin:0; font-size:clamp(2.6rem,8vw,7.5rem); line-height:.9; letter-spacing:-.05em; font-weight:600}
.sec-title em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; color:var(--fg-2)}

/* ── project rail ─────────────────────────────── */
.rail{position:fixed; z-index:320; left:clamp(.7rem,1.3vw,1.4rem); top:50%; transform:translateY(-50%); display:flex; flex-direction:column}
.rail a{position:relative; display:flex; align-items:center; justify-content:center; width:22px; height:24px; text-decoration:none}
.rail i{width:6px; height:6px; border-radius:6px; background:rgba(245,245,247,.24); transition:height .45s var(--ease), background-color .3s, transform .3s var(--ease)}
.rail a:hover i{background:var(--fg); transform:scale(1.35)}
.rail a.on i{height:18px; background:var(--pa); transform:none}
.rl-t{
  position:absolute; left:100%; top:50%; margin-left:.3rem; transform:translate(-6px,-50%); opacity:0; pointer-events:none; white-space:nowrap;
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.08em; line-height:1.2; color:var(--fg-2);
  padding:.26rem .62rem; border-radius:100px; background:rgba(12,13,17,.78); border:1px solid var(--line);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:opacity .25s ease, transform .35s var(--ease), color .2s; transition-delay:calc(var(--j) * 16ms);
}
.rl-t b{font-weight:600; color:var(--pa); margin-right:.55em}
.rail:hover .rl-t,.rail:focus-within .rl-t,.rail.peek a.on .rl-t{opacity:1; transform:translate(0,-50%); pointer-events:auto}
.rail.peek a.on .rl-t{transition-delay:0s}
.rail a:hover .rl-t,.rail a.on .rl-t{color:var(--fg)}
@media (max-width:760px){ .rail{display:none} }

/* ── scrollbar: the browser's is hidden, this one matches ── */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
.sb{position:fixed; top:0; right:0; bottom:0; z-index:350; width:14px; cursor:pointer}
.sb i{position:absolute; top:0; right:4px; width:4px; border-radius:4px; background:rgba(245,245,247,.2); cursor:grab; will-change:transform; transition:width .2s var(--ease), background-color .35s}
.sb:hover i,.sb.busy i{background:color-mix(in srgb, var(--cur, var(--fg)) 72%, transparent)}
.sb:hover i,.sb.drag i{width:6px}
.sb.drag i{background:var(--cur, var(--fg)); cursor:grabbing}
html.sb-drag{user-select:none; cursor:grabbing}
html.touch .sb{pointer-events:none}
html.touch .sb i{right:2px; width:3px}

/* ── project chrome shared by every layout ───── */
.meta{display:flex; gap:.6rem 1rem; align-items:center; flex-wrap:wrap}
.meta .no{font-family:var(--mono); font-size:.78rem; font-weight:600; color:var(--pa)}
.meta .sep{width:18px; height:1px; background:var(--line-2)}
.chip{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:.38rem .75rem; border-radius:100px; color:var(--pa);
  border:1px solid color-mix(in srgb, var(--pa) 40%, transparent); background:color-mix(in srgb, var(--pa) 10%, transparent);
}
.chip i{width:6px; height:6px; border-radius:50%; background:var(--pa); flex:none}
.chip.live i{animation:ping2 2s ease-out infinite}
@keyframes ping2{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--pa) 60%, transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

.p-title{margin:0; font-size:clamp(2.2rem,5.4vw,4.6rem); line-height:.98; letter-spacing:-.045em; font-weight:600; text-wrap:balance}
.p-title .logo{height:1em; width:auto; display:inline-block; vertical-align:-.08em; margin-right:.25em}
.p-title .dash{color:var(--fg-3); font-weight:400}
.summary{font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.55; letter-spacing:-.012em; color:var(--fg-2); max-width:52ch; margin:0}
.summary b{color:var(--fg); font-weight:500}

ol.notes{list-style:none; counter-reset:n; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; max-width:58ch}
ol.notes li{counter-increment:n; display:grid; grid-template-columns:2.1rem 1fr; font-size:.95rem; line-height:1.6; color:var(--fg-2)}
ol.notes li::before{content:counter(n,decimal-leading-zero); font-family:var(--mono); font-size:.7rem; font-weight:600; color:var(--pa); padding-top:.28rem}

dl.spec{margin:0}
.spec .row{display:flex; align-items:baseline; gap:.6rem; padding:.62rem 0; border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); white-space:nowrap}
.spec .ldr{flex:1 1 auto; min-width:.8rem}
.spec dd{margin:0; font-size:.9rem; color:var(--fg); text-align:right; min-width:0}
.repo{margin-top:.9rem; font-family:var(--mono); font-size:.68rem; color:var(--fg-3); display:flex; gap:.9rem; flex-wrap:wrap}

.acts{display:flex; gap:.6rem; flex-wrap:wrap}
.act{
  all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:.75rem;
  padding:.55rem 1.1rem .55rem .55rem; border-radius:100px; border:1px solid var(--line-2);
  font-size:.9rem; font-weight:500; transition:border-color .25s, background-color .25s, transform .25s var(--ease);
}
.act:hover{border-color:var(--pa); background:color-mix(in srgb, var(--pa) 8%, transparent); transform:translateY(-2px)}
.act:focus-visible{outline:2px solid var(--pa); outline-offset:3px}
.act .ico{width:2.2rem; height:2.2rem; border-radius:50%; flex:none; display:grid; place-items:center; background:color-mix(in srgb, var(--pa) 16%, var(--bg-3)); color:var(--pa); font-family:var(--mono); font-size:.72rem; font-weight:600}
.act .ico svg{width:1rem; height:1rem}
.act .ico.thumb{width:3.2rem; border-radius:100px; background-size:cover; background-position:center; position:relative; overflow:hidden}
.act .ico.thumb::after{content:""; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff; margin-left:2px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.act .ico.thumb.still{background-size:contain; background-repeat:no-repeat}
.act .ico.thumb.still::after{display:none}
.act small{display:block; font-size:.72rem; font-weight:400; color:var(--fg-3); font-family:var(--mono); letter-spacing:.02em}
.plink{font-size:.9rem; font-weight:500; text-decoration:none; padding:.7rem 1.1rem; border-radius:100px; border:1px solid var(--line-2); transition:border-color .25s, color .25s}
.plink:hover{border-color:var(--pa); color:var(--pa)}
.plink::after{content:" ↗"; opacity:.6}

/* ── 01 · the model stage (Rico) ─────────────── */
.p-model{position:relative; --pa:#ffc21a; overflow-x:clip}
.mstage-wrap{height:calc(var(--vh) * 2.4); position:relative}
.mstage{position:sticky; top:0; height:var(--vh); overflow:hidden}
.mstage::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 55% at 58% 55%, color-mix(in srgb, var(--pa) 12%, transparent), transparent 70%); pointer-events:none}
.mword{
  position:absolute; left:0; top:50%; z-index:0; white-space:nowrap; pointer-events:none; user-select:none;
  font-size:clamp(9rem,33vw,30rem); font-weight:700; letter-spacing:-.06em; line-height:.8;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--pa) 32%, transparent);
  transform:translate3d(0,-50%,0); will-change:transform;
}
/* the logo's outline in place of the word: a mask, so it takes the accent */
.mword.mark{
  width:clamp(30rem,92vw,80rem); aspect-ratio:2400/900; -webkit-text-stroke:0;
  background:color-mix(in srgb, var(--pa) 45%, transparent);
  -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat;
}
.mcanvas{position:absolute; inset:0; z-index:1; cursor:grab}
.mcanvas.held{cursor:grabbing}
.mcanvas canvas{position:absolute; inset:0}
@media (max-width:900px), (pointer:coarse), (hover:none){
  .mcanvas{pointer-events:none; cursor:default}
  .mcanvas canvas{touch-action:pan-y; pointer-events:none}
}
html.touch .mcanvas{pointer-events:none; cursor:default}
html.touch .mcanvas canvas{touch-action:pan-y; pointer-events:none}
.mcanvas .poster{position:absolute; inset:12% 8%; background-size:contain; background-position:center; background-repeat:no-repeat; opacity:.9; transition:opacity .8s ease; filter:saturate(.9)}
.mcanvas.ready .poster{opacity:0}
.mhead{position:absolute; z-index:3; top:calc(var(--nav) + 1rem); left:var(--gut); right:var(--gut); display:flex; justify-content:space-between; align-items:center; gap:1rem}
.mlogo{position:absolute; z-index:3; left:var(--gut); bottom:clamp(1.4rem,5vh,3rem); max-width:min(46vw,520px)}
.mlogo .p-title{font-size:clamp(3rem,8vw,6.5rem); line-height:.9; color:var(--pa)}
.mlogo p{margin:.6rem 0 0; font-size:clamp(1rem,1.6vw,1.3rem); color:var(--fg-2); letter-spacing:-.01em}
/* leave the right side to the list, so the robot turns beside it rather than under it */
@media (min-width:901px){ .mstage:has(.mside) .mcanvas{right:calc(min(300px,30vw) + var(--gut))} }
.mside{
  position:absolute; z-index:3; right:var(--gut); top:50%; transform:translateY(-50%); width:min(300px,30vw);
  margin:0; padding:.4rem; list-style:none; border-radius:var(--r);
  background:rgba(12,13,17,.5); border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.mside li{position:relative; padding:.8rem .9rem .85rem 1.1rem; border-radius:calc(var(--r) - 4px); opacity:.42; transition:opacity .5s ease, background-color .5s ease}
.mside li::before{content:""; position:absolute; left:0; top:.8rem; bottom:.8rem; width:2px; border-radius:2px; background:var(--pa); transform:scaleY(0); transition:transform .5s var(--ease)}
.mside li.on{opacity:1; background:color-mix(in srgb, var(--pa) 7%, transparent)}
.mside li.on::before{transform:none}
.mside i{display:block; font-style:normal; font-family:var(--mono); font-size:.62rem; color:var(--pa); margin-bottom:.3rem; letter-spacing:.1em}
.mside b{display:block; font-size:.98rem; font-weight:600; letter-spacing:-.02em}
.mside span{display:block; font-size:.84rem; line-height:1.45; color:var(--fg-2); margin-top:.15rem}
.mside u{position:absolute; left:1.1rem; right:.9rem; bottom:.35rem; height:1px; background:color-mix(in srgb, var(--pa) 55%, transparent); transform-origin:0 50%; transform:scaleX(0); opacity:0}
.mside li.on u{opacity:1}
.mhint{position:absolute; z-index:3; right:var(--gut); bottom:clamp(1.4rem,5vh,3rem); display:flex; flex-direction:column; align-items:flex-end; gap:.6rem}
.mrail{width:140px; height:2px; background:var(--line); border-radius:2px; overflow:hidden}
.mrail i{display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--pa)}
.mexp{all:unset; cursor:pointer; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2); padding:.45rem .8rem; border-radius:100px; border:1px solid var(--line-2); background:rgba(5,5,7,.6); transition:color .2s, border-color .2s}
.mexp:hover{color:var(--pa); border-color:var(--pa)}
.p-body{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); padding-block:clamp(3rem,8vh,5rem) clamp(4rem,10vh,7rem); align-items:start}
.p-body > div{display:flex; flex-direction:column; gap:1.6rem; min-width:0}
@media (max-width:900px){
  .p-body{grid-template-columns:1fr}
  .mside{width:auto; left:var(--gut); top:auto; bottom:calc(clamp(1.4rem,5vh,3rem) + 7.5rem); transform:none}
  .mside li:not(.on){display:none}
  .mlogo .p-title{font-size:2.8rem}
  .mlogo p{display:none}
}

/* ── 02 · the research story (UWB) ───────────── */
.p-research{position:relative; --pa:#5cd0b3; overflow-x:clip}
.r-open{padding-block:clamp(6rem,16vh,10rem) clamp(2rem,6vh,4rem); position:relative}
.r-open::before{content:""; position:absolute; inset:0 -20% auto; height:120%; background:radial-gradient(40% 50% at 70% 40%, color-mix(in srgb, var(--pa) 12%, transparent), transparent 70%); pointer-events:none; z-index:-1}
.r-kicker{margin-top:1.4rem}
.r-lab{display:flex; align-items:center; gap:.9rem; margin-top:.9rem; font-size:.9rem; color:var(--fg-2)}
.r-lab img{height:1.9rem; width:auto; padding-right:.9rem; border-right:1px solid var(--line-2)}
.r-lab b{color:var(--fg); font-weight:600}
.r-head{margin:1.2rem 0 0; font-size:clamp(3rem,11vw,10.5rem); line-height:.88; letter-spacing:-.06em; font-weight:600}
.r-head .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em}
.r-head .w > span{display:inline-block; transform:translateY(105%); transition:transform 1.1s var(--ease)}
.r-head.in .w > span{transform:none}
.r-head em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.025em; color:var(--pa)}
.r-intro{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); margin-top:clamp(2rem,6vh,3.6rem); align-items:end}
.r-paper{font-family:var(--mono); font-size:.72rem; line-height:1.6; color:var(--fg-3); border-left:1px solid var(--pa); padding-left:1rem; max-width:44ch}
a.r-paper{text-decoration:none; transition:border-color .3s}
a.r-paper:hover{border-left-color:var(--fg)}
.r-paper .go{color:var(--pa); white-space:nowrap}
a.r-paper:hover .go{color:var(--fg)}
.r-paper b{display:block; color:var(--fg-2); font-weight:500; font-family:var(--sans); font-size:.95rem; letter-spacing:-.01em; margin-bottom:.3rem}
@media (max-width:820px){ .r-intro{grid-template-columns:1fr} }

.story{height:calc(var(--vh) * 6.1); position:relative}
.sstage{position:sticky; top:0; height:var(--vh); overflow:hidden}
.sstage::before{content:""; position:absolute; inset:0; background:radial-gradient(55% 60% at 64% 50%, rgba(92,208,179,.07), transparent 70%); pointer-events:none}
.scanvas{position:absolute; inset:0; z-index:1}
.scanvas canvas{position:absolute; inset:0}
.sload{position:absolute; inset:0; z-index:2; display:grid; place-items:center; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); transition:opacity .6s}
.scanvas.ready + .sload,.scanvas.failed + .sload{opacity:0; pointer-events:none}
.slabels{position:absolute; inset:0; z-index:3; pointer-events:none}
.slabel{
  position:absolute; left:0; top:0; font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.08em; white-space:nowrap;
  padding:.22rem .5rem; border-radius:100px; background:rgba(5,5,7,.72); border:1px solid color-mix(in srgb, var(--c) 55%, transparent); color:var(--c);
  opacity:0; transition:opacity .3s; will-change:transform;
}
.slabel.on{opacity:1}
.slabel.big{font-size:.74rem; padding:.3rem .65rem}

.chapters{position:absolute; z-index:4; left:var(--gut); top:0; bottom:0; width:min(420px,34vw); display:grid; align-items:center; pointer-events:none}
.chap{grid-area:1/1; opacity:0; transform:translateY(26px); transition:opacity .55s ease, transform .7s var(--ease); pointer-events:none}
.chap.on{opacity:1; transform:none; pointer-events:auto}
.chap.past{transform:translateY(-26px)}
.chap .n{font-family:var(--mono); font-size:.7rem; color:var(--pa); letter-spacing:.12em}
.chap h3{margin:.7rem 0 .9rem; font-size:clamp(1.9rem,3.4vw,3.2rem); line-height:1; letter-spacing:-.045em; font-weight:600}
.chap p{margin:0; color:var(--fg-2); font-size:clamp(.98rem,1.2vw,1.08rem); line-height:1.6}
.chap .eq{margin-top:1.1rem; display:inline-block; font-family:var(--serif); font-style:italic; font-size:clamp(1.25rem,2vw,1.6rem); padding:.45rem .9rem; border-radius:10px; background:rgba(92,208,179,.08); border:1px solid rgba(92,208,179,.25); color:var(--fg)}
.chap .chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem}
.chap .chips span{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; padding:.32rem .6rem; border-radius:100px; border:1px solid var(--line-2); color:var(--fg-2)}
.srail{position:absolute; z-index:4; left:var(--gut); bottom:clamp(1.2rem,4vh,2.2rem); display:flex; gap:.4rem}
.srail i{width:28px; height:3px; border-radius:3px; background:var(--line-2); overflow:hidden; position:relative}
.srail i b{position:absolute; inset:0; background:var(--pa); transform-origin:0 50%; transform:scaleX(0)}
.hud{
  position:absolute; z-index:4; right:var(--gut); bottom:clamp(1.2rem,4vh,2.2rem);
  display:flex; align-items:stretch; gap:0; font-family:var(--mono); font-size:.68rem; color:var(--fg-2);
  border-radius:12px; background:rgba(5,5,7,.55); border:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; transform:translateY(12px); transition:opacity .5s, transform .6s var(--ease);
}
.hud.on{opacity:1; transform:none}
.hud .gone{display:none}
.hud > div{display:flex; flex-direction:column; gap:.15rem; padding:.6rem .85rem; border-left:1px solid var(--line)}
.hud > div:first-child{border-left:0}
.hud span{font-size:.58rem; letter-spacing:.1em; color:var(--fg-3); white-space:nowrap}
.hud b{font-weight:500; color:var(--fg); font-variant-numeric:tabular-nums; white-space:nowrap; transition:color .3s}
.hud .rng{flex-direction:row; gap:.9rem}
.hud .rng div{display:flex; flex-direction:column; gap:.15rem}
.hud .rng span{color:var(--c)}
.hud b.bad,.hud .bad b{color:#fc6255}
@media (max-width:900px){
  .chapters{left:var(--gut); right:var(--gut); width:auto; top:auto; bottom:clamp(3.2rem,8vh,4.4rem); align-items:end}
  .chap{padding:1rem 1.1rem; border-radius:var(--r); background:rgba(5,5,7,.72); border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
  .chap h3{font-size:1.55rem; margin:.4rem 0 .5rem}
  .chap p{font-size:.9rem}
  .chap .chips{display:none}
  .chap .eq{font-size:1.1rem; margin-top:.7rem}
  .hud{top:calc(var(--nav) + .5rem); bottom:auto; left:var(--gut); right:var(--gut); justify-content:space-between}
  .hud > div{padding:.45rem .6rem}
  .hud .rng{gap:.55rem}
  .hud .hfix{display:none}
}
@media (max-width:440px){
  .hud{font-size:.62rem}
  .hud > div{padding:.35rem .45rem}
  .hud .rng{gap:.35rem}
}

/* results */
.results{padding-block:clamp(4rem,10vh,7rem) 2rem}
.r-sub{font-size:clamp(1.8rem,4.2vw,3.4rem); line-height:1.02; letter-spacing:-.045em; font-weight:600; margin:0 0 1rem; max-width:20ch; text-wrap:balance}
.r-sub em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--pa)}
.r-lede{margin:0; color:var(--fg-2); max-width:56ch; font-size:1.02rem}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-block:clamp(2.4rem,7vh,4rem)}
.stat{padding:clamp(1.4rem,4vh,2.4rem) clamp(.8rem,2vw,1.6rem); border-left:1px solid var(--line)}
.stat:first-child{border-left:0; padding-left:0}
.stat .big{display:block; font-size:clamp(2.6rem,7.5vw,6.6rem); font-weight:600; letter-spacing:-.06em; line-height:.9; font-variant-numeric:tabular-nums}
.stat .big small{font-size:.38em; letter-spacing:-.02em; font-weight:500; color:var(--fg-2); margin-left:.12em}
.stat .big.hot{color:#ec4b3f}
.stat p{margin:.8rem 0 0; color:var(--fg-2); font-size:.92rem; max-width:28ch}
@media (max-width:700px){ .stats{grid-template-columns:1fr} .stat{border-left:0; border-top:1px solid var(--line); padding-left:0} .stat:first-child{border-top:0} }

.panel{border:1px solid var(--line); border-radius:calc(var(--r) + 6px); background:linear-gradient(180deg, var(--bg-2), var(--bg)); padding:clamp(1.2rem,3vw,2.2rem); position:relative; overflow:hidden}
.panel-hd{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem}
.panel-hd h4{margin:0; font-size:clamp(1.25rem,2.2vw,1.7rem); font-weight:600; letter-spacing:-.03em; line-height:1.15; max-width:30ch}
.panel-hd p{margin:.4rem 0 0; color:var(--fg-2); font-size:.92rem; max-width:60ch}
.grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(.8rem,2vw,1.4rem); margin-top:clamp(.8rem,2vw,1.4rem)}
@media (max-width:980px){ .grid2{grid-template-columns:1fr} }

/* bar chart */
.bars{position:relative; display:grid; grid-template-columns:2.4rem repeat(6,minmax(0,1fr)); height:clamp(260px,42vh,400px); gap:clamp(.4rem,1.6vw,1.4rem); padding-bottom:3.2rem}
.bars .axis{position:relative}
.bars .axis span{position:absolute; right:.3rem; transform:translateY(50%); font-family:var(--mono); font-size:.62rem; color:var(--fg-3)}
.bars .gl{position:absolute; left:2.4rem; right:0; height:1px; background:var(--line); pointer-events:none}
.bars .base-line{position:absolute; left:2.4rem; right:0; border-top:1px dashed rgba(142,164,191,.55); pointer-events:none}
.bars .base-line{z-index:2}
.bars .base-line span{position:absolute; left:.3rem; top:-1.25rem; font-family:var(--mono); font-size:.6rem; color:#8ea4bf; background:var(--bg-2); padding:0 .3rem; border-radius:4px}
.bar{position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; cursor:default; outline:0}
.bar .fill{width:100%; max-width:84px; height:var(--h); border-radius:8px 8px 3px 3px; background:linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 55%, var(--bg))); transform-origin:50% 100%; transform:scaleY(0); transition:transform 1.3s var(--ease), filter .25s; transition-delay:calc(var(--i) * 90ms); position:relative}
.in .bar .fill{transform:none}
.bar:hover .fill,.bar:focus-visible .fill{filter:brightness(1.18)}
.bar .err{position:absolute; left:50%; width:1px; background:rgba(245,245,247,.55); bottom:var(--lo); height:calc(var(--hi) - var(--lo)); opacity:0; transition:opacity .6s ease calc(var(--i) * 90ms + .9s)}
.bar .err::before,.bar .err::after{content:""; position:absolute; left:-5px; width:11px; height:1px; background:inherit}
.bar .err::before{top:0} .bar .err::after{bottom:0}
.in .bar .err{opacity:1}
.bar .val{position:absolute; bottom:calc(var(--top) + .45rem); font-weight:600; font-size:clamp(.9rem,1.6vw,1.25rem); letter-spacing:-.03em; font-variant-numeric:tabular-nums; opacity:0; transition:opacity .5s ease calc(var(--i) * 90ms + .6s)}
.in .bar .val{opacity:1}
.bar .val small{font-size:.6em; color:var(--fg-3); font-weight:500}
.bar .nm{position:absolute; top:100%; margin-top:.7rem; text-align:center; font-size:.76rem; line-height:1.25; color:var(--fg-2)}
.tip{
  position:absolute; z-index:5; pointer-events:none; min-width:170px; padding:.7rem .85rem; border-radius:10px;
  background:rgba(18,20,25,.94); border:1px solid var(--line-2); font-family:var(--mono); font-size:.66rem; color:var(--fg-2);
  opacity:0; transform:translate(-50%,calc(-100% - 10px)); transition:opacity .15s; box-shadow:0 20px 40px -20px rgba(0,0,0,.9)
}
.tip.on{opacity:1}
.tip b{display:block; font-family:var(--sans); font-size:.85rem; color:var(--fg); margin-bottom:.35rem; font-weight:600}
.tip div{display:flex; justify-content:space-between; gap:1rem}
.tip div span:last-child{color:var(--fg); font-variant-numeric:tabular-nums}

/* scatter */
.scatter{position:relative}
.scatter svg{width:100%; height:auto; overflow:visible}
.scatter .ax{stroke:var(--line-2); stroke-width:1}
.scatter .gl{stroke:var(--line); stroke-width:1}
.scatter text{font-family:var(--mono); font-size:10px; fill:var(--fg-3)}
.scatter .fit{stroke:var(--pa); stroke-width:2; fill:none; stroke-linecap:round}
.scatter .dot{transition:r .2s, opacity .4s; cursor:default}
.scatter .dot:hover{r:8}
.eqn{font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.9rem); color:var(--fg); letter-spacing:-.01em}
.eqn small{font-family:var(--mono); font-style:normal; font-size:.62rem; letter-spacing:.08em; color:var(--fg-3); display:block; margin-top:.2rem}
.legend{display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:1rem}
.legend span{display:inline-flex; align-items:center; gap:.4rem; font-size:.74rem; color:var(--fg-2)}
.legend i{width:9px; height:9px; border-radius:50%; background:var(--c)}

/* heat grid */
.heat{display:grid; grid-template-columns:minmax(5.5rem,auto) repeat(4,minmax(0,1fr)); gap:4px}
.heat .h{font-family:var(--mono); font-size:.66rem; color:var(--fg-3); display:flex; align-items:center; padding:.2rem .3rem}
.heat .h.col{justify-content:center}
.heat .h.col.hot{color:#ff862f}
.heat .c{
  position:relative; height:clamp(44px,5.4vw,64px); border-radius:8px; display:grid; place-items:center; font-weight:600; font-size:clamp(.8rem,1.4vw,1.05rem);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#0b0c10; background:var(--bg-3);
  transition:background-color 1s ease calc(var(--i) * 40ms), color 1s ease calc(var(--i) * 40ms), transform .2s;
}
.heat .c:hover{transform:scale(1.05)}
.in .heat .c{background:var(--bgc); color:var(--fgc)}
.heat-note{margin-top:1rem; font-size:.86rem; color:var(--fg-2)}

/* the trial replay */
.explorer{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(1rem,2.4vw,2rem); align-items:stretch}
@media (max-width:980px){ .explorer{grid-template-columns:1fr} }
.ex-canvas{position:relative; border-radius:var(--r); background:radial-gradient(70% 80% at 50% 50%, rgba(92,208,179,.05), transparent 70%), var(--bg); border:1px solid var(--line); overflow:hidden; aspect-ratio:16/9; min-width:0}
@media (max-width:600px){ .ex-canvas{aspect-ratio:5/4} }
.ex-canvas canvas{position:absolute; inset:0; width:100%; height:100%}
.ex-t{position:absolute; left:.9rem; top:.8rem; font-family:var(--mono); font-size:.66rem; color:var(--fg-3); letter-spacing:.06em}
.ex-side{display:flex; flex-direction:column; gap:1.1rem}
.seg{display:flex; flex-wrap:wrap; gap:.35rem}
.seg button{
  all:unset; box-sizing:border-box; cursor:pointer; font-size:.8rem; padding:.42rem .75rem; border-radius:100px; border:1px solid var(--line-2); color:var(--fg-2);
  transition:background-color .2s, color .2s, border-color .2s; display:inline-flex; align-items:center; gap:.4rem
}
.seg button i{width:8px; height:8px; border-radius:50%; background:var(--c, var(--fg-3))}
.seg button:hover{color:var(--fg); border-color:var(--fg-3)}
.seg button[aria-pressed="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.seg button:disabled{opacity:.35; cursor:not-allowed}
.seg button:focus-visible{outline:2px solid var(--pa); outline-offset:2px}
.readout{border-top:1px solid var(--line)}
.readout div{display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.86rem}
.readout span{color:var(--fg-3); font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; align-self:center}
.readout b{font-weight:500; font-variant-numeric:tabular-nums}
.spark{height:56px; width:100%}
.ex-ctrl{display:flex; gap:.5rem; align-items:center}
.ex-ctrl button{all:unset; cursor:pointer; width:2.2rem; height:2.2rem; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2); transition:border-color .2s}
.ex-ctrl button:hover{border-color:var(--pa)}
.ex-ctrl .prog{flex:1; height:2px; background:var(--line); border-radius:2px; overflow:hidden}
.ex-ctrl .prog i{display:block; height:100%; width:100%; background:var(--pa); transform-origin:0 50%; transform:scaleX(0)}

/* findings */
.finds{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.6rem,1.4vw,1rem); margin-top:clamp(.8rem,2vw,1.4rem)}
@media (max-width:1100px){ .finds{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .finds{grid-template-columns:1fr} }
.find{border:1px solid var(--line); border-radius:calc(var(--r) + 4px); padding:1.4rem; background:var(--bg-2); position:relative; overflow:hidden; transition:border-color .3s, transform .4s var(--ease)}
.find:hover{border-color:color-mix(in srgb, var(--fc) 50%, transparent); transform:translateY(-4px)}
.find .v{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fc); display:inline-flex; align-items:center; gap:.45rem}
.find .v::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--fc)}
.find h5{margin:1rem 0 .55rem; font-size:1.3rem; letter-spacing:-.03em; font-weight:600; line-height:1.1}
.find p{margin:0; font-size:.9rem; color:var(--fg-2); line-height:1.55}
.find::after{content:""; position:absolute; right:-30%; top:-40%; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--fc) 14%, transparent), transparent 70%); pointer-events:none}

.r-tail{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); padding-block:clamp(3rem,8vh,5rem) clamp(4rem,10vh,7rem); align-items:start}
.r-tail > div{display:flex; flex-direction:column; gap:1.4rem; min-width:0}
.limits{font-size:.86rem; color:var(--fg-3); max-width:58ch; margin:0; line-height:1.6}
@media (max-width:900px){ .r-tail{grid-template-columns:1fr} }

/* ── 03+ · the card stack ─────────────────────── */
.deck{padding-top:clamp(2rem,6vh,4rem); padding-bottom:clamp(4rem,10vh,8rem)}
.card{
  position:sticky; top:calc(var(--nav) + .8rem + var(--k) * 14px);
  min-height:min(78vh,720px); margin-bottom:clamp(2rem,10vh,6rem);
  border-radius:calc(var(--r) + 10px); border:1px solid var(--line); overflow:hidden;
  background:radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--pa) 13%, transparent), transparent 60%), var(--bg-2);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); transform-origin:50% 0;
  box-shadow:0 -30px 60px -40px rgba(0,0,0,.9);
}
.card:last-child{margin-bottom:0}
.card-shade{position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; z-index:5; border-radius:inherit}
.card-tx{padding:clamp(1.4rem,3.5vw,3rem); display:flex; flex-direction:column; gap:1.3rem; min-width:0}
.card-tx .p-title{font-size:clamp(1.9rem,4vw,3.4rem)}
.card-tx .summary{font-size:clamp(1rem,1.25vw,1.1rem)}
.card-vis{position:relative; border-left:1px solid var(--line); min-height:280px; display:flex; flex-direction:column}
.card-vis .motif{flex:1; position:relative; min-height:260px}
.card-vis .motif svg{position:absolute; inset:0; width:100%; height:100%}
.card-vis dl.spec{padding:0 clamp(1.2rem,3vw,2.2rem) clamp(1.2rem,3vw,2rem)}
.card-tx{position:relative}
.card-big{position:absolute; right:clamp(1.2rem,3vw,2.4rem); bottom:clamp(1rem,2.6vw,2rem); font-family:var(--mono); font-size:clamp(3rem,7vw,6rem); font-weight:600; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--pa) 45%, transparent); line-height:1; pointer-events:none}
@media (max-width:900px){
  .card{grid-template-columns:1fr; position:relative; top:auto}
  .card-vis{border-left:0; border-top:1px solid var(--line)}
}
.mplate{all:unset; box-sizing:border-box; cursor:zoom-in; position:absolute; inset:clamp(1rem,2.4vw,1.8rem); border-radius:var(--r); background:var(--bg-3); border:1px solid var(--line); overflow:hidden; display:grid; place-items:center; transition:border-color .3s, transform .4s var(--ease)}
.mplate:hover{border-color:var(--pa); transform:scale(1.015)}
.mplate img{width:100%; height:100%; object-fit:contain; padding:clamp(.6rem,2vw,1.2rem)}
.mplate .cap{position:absolute; left:.8rem; bottom:.7rem; right:.8rem; font-family:var(--mono); font-size:.62rem; color:var(--fg-2); letter-spacing:.04em}

/* motifs */
.motif .trace{fill:none; stroke:color-mix(in srgb, var(--pa) 35%, transparent); stroke-width:1.2; stroke-dasharray:3 6}
.motif .lit{fill:none; stroke:var(--pa); stroke-width:2; stroke-linecap:round}
.motif .dim{fill:none; stroke:var(--line-2); stroke-width:1}
.motif text{font-family:var(--mono); font-size:11px; fill:var(--fg-3)}
.motif .rec{font-family:var(--mono); font-size:12px}

/* ── stack marquee ────────────────────────────── */
.rigsec{padding-bottom:clamp(3rem,10vh,6rem); overflow:hidden}
.mq{border-bottom:1px solid var(--line); padding-block:clamp(.8rem,2vh,1.4rem); position:relative; overflow:hidden}
.mq-lbl{position:relative; z-index:1; display:block; margin:0 var(--gut) .4rem; max-width:var(--max)}
.mq-track{display:flex; white-space:nowrap; will-change:transform; gap:0}
.mq-track span{
  font-size:clamp(2.2rem,6.4vw,6rem); font-weight:600; letter-spacing:-.045em; line-height:1.08; padding-right:.5em;
  color:transparent; -webkit-text-stroke:1px var(--fg-4); transition:color .3s, -webkit-text-stroke-color .3s;
}
.mq-track span:hover{color:var(--fg); -webkit-text-stroke-color:var(--fg)}
.mq-track span.dot{color:var(--fg-4); -webkit-text-stroke:0; padding-right:.5em}
.mq:nth-child(odd) .mq-track span:not(.dot):nth-child(4n+1){color:var(--fg-2); -webkit-text-stroke-color:transparent}
.mq:nth-child(even) .mq-track span:not(.dot):nth-child(4n+3){color:var(--fg-2); -webkit-text-stroke-color:transparent}

/* ── bench ────────────────────────────────────── */
.bench{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; padding-top:clamp(2rem,5vh,3rem)}
@media (max-width:900px){ .bench{grid-template-columns:1fr} }
.bcard{position:relative; border:1px solid var(--line); border-radius:calc(var(--r) + 4px); padding:1.6rem; background:var(--bg-2); overflow:hidden; transition:border-color .3s, transform .5s var(--ease); --mx:50%; --my:50%}
.bcard::before{content:""; position:absolute; inset:0; background:radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--pa) 18%, transparent), transparent 60%); opacity:0; transition:opacity .3s}
.bcard:hover::before{opacity:1}
.bcard:hover{border-color:color-mix(in srgb, var(--pa) 40%, transparent)}
.bcard h3{position:relative; margin:0 0 .7rem; font-size:1.25rem; letter-spacing:-.025em; font-weight:600}
.bcard p{position:relative; margin:0; font-size:.94rem; color:var(--fg-2); line-height:1.6}
.bcard .n{position:relative; display:block; font-family:var(--mono); font-size:.7rem; color:var(--pa); margin-bottom:2.4rem}

/* ── outro ────────────────────────────────────── */
.outro{position:relative; height:calc(var(--vh) * 1.8)}
.outro-pin{position:sticky; top:0; height:var(--vh); overflow:hidden; display:flex; flex-direction:column; justify-content:center}
.outro .field{opacity:.6}
.outro-tx{position:relative; z-index:2; width:100%}
.outro h2{margin:0; font-size:clamp(2.8rem,8.4vw,8.4rem); line-height:.9; letter-spacing:-.055em; font-weight:600; max-width:12ch}
.outro h2 em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em}
.outro .cta{margin-top:2.2rem}
.wordmark{position:absolute; z-index:1; left:50%; bottom:-.18em; transform:translate3d(-50%,30%,0); font-weight:700; letter-spacing:-.07em; line-height:.8; font-size:clamp(8rem,38vw,34rem); color:transparent; -webkit-text-stroke:1px var(--fg-4); white-space:nowrap; pointer-events:none; will-change:transform}
footer{position:relative; z-index:2; border-top:1px solid var(--line); background:var(--bg)}
.foot{display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center; justify-content:space-between; padding-block:1.6rem calc(1.6rem + env(safe-area-inset-bottom,0px))}
.foot nav{display:flex; gap:1.4rem}
.foot a{font-size:.86rem; text-decoration:none; color:var(--fg-2)}
.foot a:hover{color:var(--fg)}

/* ── reveal ───────────────────────────────────── */
.js [data-rv]{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform 1.1s var(--ease); transition-delay:var(--d,0s)}
.js [data-rv].in{opacity:1; transform:none}
.js [data-rv="mask"]{opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease)}
.js [data-rv="mask"].in{clip-path:inset(0 0 0 0)}

/* ── media viewer ─────────────────────────────── */
.lb{position:fixed; inset:0; z-index:500; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr) auto; background:rgba(5,5,7,.97); backdrop-filter:blur(10px); padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px); animation:cv-fade .25s ease}
.lb[hidden]{display:none!important}
.lb-bar{grid-column:1 / -1; display:flex; gap:1rem; align-items:center; padding:.9rem var(--gut); border-bottom:1px solid var(--line)}
.lb-stage{grid-column:1; grid-row:2; position:relative; display:grid; place-items:center; min-height:0; padding:clamp(.6rem,2vw,1.5rem) clamp(.5rem,5vw,4.5rem)}
.lb-cap{grid-column:1; grid-row:3; margin:0; padding:.9rem var(--gut) 1.3rem; font-size:.86rem; line-height:1.5; color:var(--fg-2); text-align:center}
.lb.solo .lb-side{display:none}
.lb-side{grid-column:2; grid-row:2 / 4; width:clamp(270px,24vw,340px); border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0}
.lb-side-hd{display:flex; align-items:baseline; gap:.6rem; padding:1rem 1.1rem .7rem}
.lb-side-hd .lbl{color:var(--fg-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb-side-n{margin-left:auto; font-family:var(--mono); font-size:.62rem; color:var(--fg-3)}
.lb-grp{padding:.85rem .5rem .3rem}
.lb-grp:first-child{padding-top:.2rem}
.lb-list{list-style:none; margin:0; padding:0 .6rem 1rem; overflow-y:auto; display:flex; flex-direction:column; gap:.35rem; scrollbar-width:thin; scrollbar-color:var(--bg-4) transparent}
.lb-item{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:grid; grid-template-columns:7.2rem minmax(0,1fr); gap:.75rem; align-items:center; padding:.45rem; border-radius:10px; border:1px solid transparent; transition:background-color .2s, border-color .2s}
.lb-item:hover{background:rgba(255,255,255,.04)}
.lb-item:focus-visible{outline:2px solid var(--pa); outline-offset:-2px}
.lb-item[aria-current="true"]{background:color-mix(in srgb, var(--pa) 12%, transparent); border-color:color-mix(in srgb, var(--pa) 45%, transparent)}
.lb-th{position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--bg-3) center/cover no-repeat; border:1px solid rgba(255,255,255,.08)}
.lb-th.contain{background-size:contain}
.lb-th.vid::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%); border-style:solid; border-width:7px 0 7px 11px; border-color:transparent transparent transparent #fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.lb-th.mdl{display:grid; place-items:center; font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.12em; color:#fff}
.lb-th.mdl span{background:rgba(5,5,7,.7); padding:.15rem .4rem; border-radius:4px}
.lb-it{display:flex; flex-direction:column; gap:.2rem; min-width:0}
.lb-it .k{font-family:var(--mono); font-size:.58rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--pa)}
.lb-it .c{font-size:.8rem; line-height:1.35; color:var(--fg-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.lb-item[aria-current="true"] .c{color:var(--fg)}
.lb-it .st{font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3)}
.lb-item[aria-current="true"] .st{color:var(--pa)}
@media (max-width:820px){
  .lb{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto auto}
  .lb-side{grid-column:1; grid-row:4; width:auto; border-left:0; border-top:1px solid var(--line)}
  .lb-side-hd{padding:.7rem var(--gut) .4rem}
  .lb-list{flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:0 var(--gut) .9rem}
  .lb-list li{flex:none; width:12.5rem}
  .lb-list li.lb-grp{width:auto; align-self:center; padding:0 .2rem 0 .6rem}
  .lb-item{grid-template-columns:1fr}
  .lb-it .c{-webkit-line-clamp:1}
}
.lb-fig{font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.14em; color:var(--pa)}
.lb-ct{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--fg-3); margin-left:.2rem}
.lb-btn{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); color:var(--fg); width:40px; height:40px; border-radius:50%; cursor:pointer; display:grid; place-items:center; flex:none; font-size:1rem; transition:background-color .2s, border-color .2s}
.lb-btn:hover{background:rgba(255,255,255,.12); border-color:var(--fg)}
.lb-x{margin-left:auto}
.lb-stage img,.lb-stage video,.lb-stage iframe{max-width:100%; max-height:100%; width:auto; height:auto; border-radius:var(--r); background:#000; box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.lb-stage img.light{background:#e9e9ea}
.lb-stage iframe{width:min(100%,1080px); aspect-ratio:16/9; height:auto; border:0}
.lb-stage iframe.vert{width:auto; height:min(calc(100vh - 10rem), 820px); max-width:100%; aspect-ratio:9/16}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%)}
.lb-prev{left:clamp(.25rem,1.5vw,1rem)} .lb-next{right:clamp(.25rem,1.5vw,1rem)}
.lb-model{width:min(100%,1150px); aspect-ratio:16/10; max-height:100%; position:relative; border-radius:var(--r); overflow:hidden; background:#0b0c10; cursor:grab}
.lb-model:active{cursor:grabbing}
.lb-model canvas{position:relative; z-index:1}
.model-reset{
  position:absolute; top:10px; right:10px; z-index:3; display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  border-radius:100px; background:rgba(5,5,7,.8); border:1px solid var(--line-2); color:var(--fg-2);
  padding:.36rem .72rem .36rem .56rem; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .25s, transform .25s, color .2s, border-color .2s;
}
.model-reset svg{width:11px; height:11px}
.model-reset.on{opacity:1; transform:none; pointer-events:auto}
.model-reset:hover{color:var(--pa); border-color:var(--pa)}

/* ── source viewer ────────────────────────────── */
.cv{position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:clamp(.5rem,3vw,2.5rem); background:rgba(5,5,7,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); animation:cv-fade .25s ease}
.cv[hidden]{display:none!important}
@keyframes cv-fade{from{opacity:0}}
.cv .code{width:min(100%,1180px); height:min(100%,760px); display:flex; flex-direction:column; animation:cv-rise .4s var(--ease)}
@keyframes cv-rise{from{opacity:0; transform:translateY(16px) scale(.985)}}
.cv .code-body{flex:1 1 auto; min-height:0}
.cv .code-pane{min-height:0}
.cv .code-scroll{flex:1 1 auto; min-height:0}
.code-x{all:unset; cursor:pointer; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2); color:var(--fg-2); transition:color .2s, border-color .2s}
.code-x:hover{color:var(--fg); border-color:var(--pa)}
.code-fig{display:grid; place-items:center; padding:1.2rem; min-height:100%}
.code-fig img{max-width:100%; height:auto; border-radius:6px}
.code{border:1px solid var(--line); border-radius:calc(var(--r) + 4px); background:var(--bg-2); overflow:hidden; position:relative; box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.code::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, var(--pa), transparent 55%)}
.code-hd{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.85rem 1rem .85rem 1.15rem; border-bottom:1px solid var(--line)}
.code-id{display:flex; align-items:center; gap:.7rem; min-width:0; flex-wrap:wrap}
.code-id svg{width:15px; height:15px; color:var(--pa); flex:none}
.code-repo{font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--fg); text-decoration:none}
.code-repo span{color:var(--fg-3); font-weight:400}
.code-repo:hover{color:var(--pa)}
.code-ref{font-family:var(--mono); font-size:.64rem; color:var(--fg-3); text-decoration:none; padding:.2rem .5rem; border:1px solid var(--line); border-radius:100px}
.code-ref:hover{color:var(--fg); border-color:var(--line-2)}
.code-acts{margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap}
.code-act{font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .8rem; border-radius:100px; border:1px solid var(--line-2); color:var(--fg-2); transition:color .2s, border-color .2s}
.code-act svg{width:12px; height:12px; flex:none}
.code-act:hover{color:var(--fg); border-color:var(--pa)}
.code-act.pri{color:#0b0c10; background:var(--pa); border-color:transparent}
.code-body{display:grid; grid-template-columns:minmax(0,17.5rem) minmax(0,1fr)}
.code-rail{border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0}
.code-tabs{display:flex; flex-direction:column; padding:.5rem}
.code-tab{all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:1.8rem 1fr; row-gap:.1rem; padding:.62rem .7rem; border-radius:8px; position:relative; transition:background-color .2s}
.code-tab:hover{background:rgba(245,245,247,.04)}
.code-tab:focus-visible{outline:2px solid var(--pa); outline-offset:-2px}
.code-tab b{grid-row:span 2; font-family:var(--mono); font-size:.66rem; font-weight:600; color:var(--fg-3); padding-top:.18rem}
.code-tab .tt{font-size:.9rem; font-weight:500; color:var(--fg-2)}
.code-tab .loc{font-family:var(--mono); font-size:.62rem; color:var(--fg-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.code-tab[aria-selected="true"]{background:color-mix(in srgb, var(--pa) 10%, transparent)}
.code-tab[aria-selected="true"]::before{content:""; position:absolute; left:0; top:.6rem; bottom:.6rem; width:2px; border-radius:2px; background:var(--pa)}
.code-tab[aria-selected="true"] b{color:var(--pa)}
.code-tab[aria-selected="true"] .tt{color:var(--fg)}
.code-note{margin:auto 0 0; padding:1rem 1.15rem 1.15rem; border-top:1px solid var(--line); font-size:.86rem; line-height:1.6; color:var(--fg-2)}
.code-note .lbl{display:block; margin-bottom:.45rem; color:var(--pa)}
.code-pane{display:flex; flex-direction:column; min-width:0; background:rgba(5,5,7,.35)}
.code-bar{display:flex; align-items:center; gap:.8rem; padding:.6rem 1rem; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.68rem; color:var(--fg-3); min-width:0}
.code-path{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:rtl; text-align:left; min-width:0}
.code-path bdi{direction:ltr}
.code-path b{color:var(--fg); font-weight:500}
.code-gh{margin-left:auto; flex:none; color:var(--fg-2); text-decoration:none; display:inline-flex; gap:.35rem; align-items:center; white-space:nowrap}
.code-gh svg{width:11px; height:11px}
.code-gh:hover{color:var(--pa)}
.code-gh[hidden]{display:none}
.code-scroll{overflow:auto; overscroll-behavior:contain; position:relative; scrollbar-width:thin; scrollbar-color:var(--bg-4) transparent}
.code-lines{padding:.8rem 0 1.4rem; font-family:var(--mono); font-size:.76rem; line-height:1.72; tab-size:4; -moz-tab-size:4; min-width:max-content}
.ln{display:flex; padding-right:1.5rem; animation:ln-in .38s var(--ease) backwards}
.ln:hover{background:rgba(245,245,247,.035)}
.ln:hover .ln-no{color:var(--pa)}
@keyframes ln-in{from{opacity:0; transform:translateX(-6px)}}
.ln-no{flex:none; width:3.6rem; padding-right:1.1rem; text-align:right; color:#3d3f49; text-decoration:none; user-select:none}
.ln-tx{white-space:pre; color:#c9cdd6}
.code-msg{display:grid; place-items:center; height:100%; padding:2rem; text-align:center; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3)}
.code-msg a{color:var(--pa)}
.t-k{color:#c792ea} .t-t{color:#67d8ef} .t-f{color:#82aaff} .t-s{color:#b5e07a} .t-n{color:#fbbf24} .t-a{color:#ff7a8a} .t-c{color:#5d6273; font-style:italic}
@media (max-width:860px){
  .cv{padding:0}
  .cv .code{height:100%; border-radius:0; border:0}
  .code-note{display:none}
  .code-body{grid-template-columns:minmax(0,1fr)}
  .code-rail{border-right:0; border-bottom:1px solid var(--line)}
  .code-tabs{flex-direction:row; overflow-x:auto; scrollbar-width:none; gap:.25rem}
  .code-tab{flex:none; grid-template-columns:1.5rem auto}
  .code-tab .loc{display:none}
  .code-tab b{grid-row:auto}
  .code-tab[aria-selected="true"]::before{left:.7rem; right:.7rem; top:auto; bottom:0; width:auto; height:2px}
  .code-act:not(.pri){display:none}
}