#pre{position:fixed;inset:0;z-index:100;background:var(--surface-dark);background-image:var(--grid-dark);
  background-size:64px 64px,64px 64px,8px 8px,8px 8px;display:none}
html.anim #pre{display:block}
#pre .mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:28px;transition:opacity .3s}
#pre.is-end .mid{opacity:0}
#pre .cube{position:relative;width:128px;height:148px}
#pre .cube svg{position:absolute;inset:0;width:100%;height:100%}
#pre .cube .ghost{opacity:.12}
#pre .cube .solid{clip-path:inset(0 0 100% 0)}
#pre .cube i{position:absolute;left:-40px;right:-40px;height:2px;top:0;background:var(--accent-bright);
  box-shadow:0 0 12px 2px rgba(71,126,245,.75)}
#pre .pnum{color:var(--on-dark-2);font-variant-numeric:tabular-nums;letter-spacing:.3em;padding-left:.3em}
html.lock,html.lock body{overflow:hidden}

#scan{position:relative;height:620vh}
#scan .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#scan .bg-dark{opacity:0}
#scan .word{position:absolute;left:50%;top:0;width:min(86vw,1240px);height:auto;transform-origin:50% 50%;will-change:transform,opacity}
#scan .hero{position:absolute;z-index:6;left:var(--gut);right:var(--gut);bottom:clamp(24px,5vh,56px);display:flex;align-items:flex-end;
  justify-content:space-between;gap:32px;will-change:opacity,transform}
#scan h1{font:700 clamp(30px,3.3vw,52px)/1.06 var(--d);letter-spacing:-.02em;max-width:17ch}
#scan .hero p{max-width:34ch;color:var(--ink-2);font-size:clamp(15px,1.15vw,18px);margin:14px 0 22px}
#scan .hint{display:flex;align-items:center;gap:12px;color:var(--dim)}
#scan .hint b{display:block;width:44px;height:1px;position:relative;overflow:hidden;background:rgba(15,23,32,.15)}
#scan .hint b::after{content:"";position:absolute;inset:0;background:var(--ink);animation:draw 2.6s var(--out) 3}
@keyframes draw{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

.frame{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;z-index:3}
.frame .win{position:absolute;inset:0;overflow:hidden;background:var(--surface-dark);outline:1px solid rgba(15,23,32,.2)}
.frame.is-dark .win{outline-color:rgba(71,126,245,.45)}
.frame .human,.frame .xray{position:absolute;inset:0;overflow:hidden}
.frame .xray{background:var(--surface-dark);background-image:var(--grid-dark);background-size:64px 64px,64px 64px,8px 8px,8px 8px;clip-path:inset(0 0 100% 0)}
.stack{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.stack img{width:100%;height:auto}
.frame .amb{position:absolute;left:0;right:0;outline:2px solid var(--amber);outline-offset:-2px;opacity:0;transition:opacity .25s}
.frame .amb.on{opacity:1}

.labels{position:absolute;inset:0;z-index:4;pointer-events:none}
.labels .stack{left:0;width:100%}
.lbl{position:absolute;display:flex;flex-direction:column;gap:6px;color:var(--on-dark-2);transition:color .25s}
.lbl .t{font:500 17px/1.2 var(--d);color:var(--on-dark);letter-spacing:-.005em;transition:color .25s}
.lbl .mono{color:var(--on-dark-dim);transition:color .25s}
.lbl::after{content:"";position:absolute;top:7px;height:1px;width:24px;background:currentColor;opacity:.6}
.lbl.on .t,.lbl.on .mono,.lbl.on{color:var(--amber)}
.hud{position:absolute;z-index:5;color:var(--on-dark-2);opacity:0;pointer-events:none;display:flex;flex-direction:column;gap:6px}
.hud .big{font:500 13px/1 var(--m);letter-spacing:.08em;color:var(--on-dark)}
.facts{position:absolute;z-index:5;opacity:0;display:flex;flex-direction:column;gap:18px;pointer-events:none}
.facts div{display:flex;flex-direction:column;gap:4px}
.facts b{font:600 28px/1 var(--d);color:var(--on-dark);letter-spacing:-.01em}
.facts span{color:var(--on-dark-dim)}
.cap{position:absolute;z-index:5;color:var(--on-dark-2);opacity:0;pointer-events:none;max-width:300px}
.cap h2{font:600 clamp(24px,2.1vw,32px)/1.12 var(--d);color:var(--on-dark);letter-spacing:-.015em;margin-top:12px}

#layers{position:relative;height:380vh;background:var(--bg)}
#layers .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg);background-image:var(--grid-light);background-size:64px 64px}
#layers .head{position:absolute;left:var(--gut);top:clamp(88px,15vh,140px);max-width:400px;z-index:5}
#layers h2,.works h2,#final h2{font:700 clamp(28px,3vw,46px)/1.08 var(--d);letter-spacing:-.02em}
#layers .head p{color:var(--ink-2);margin-top:16px;max-width:34ch}
.slab{position:absolute;left:0;top:0;width:0;height:0}
.ly{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.ly img{width:100%;height:100%}
.ly.design{box-shadow:0 1px 0 rgba(15,23,32,.08)}
.ly.code{background:var(--surface-dark);overflow:hidden;font-family:var(--m);color:var(--on-dark-2);white-space:pre}
.ly.code .c-t{color:var(--accent-bright)}
.ly.code .c-s{color:var(--accent-pastel)}
.ly .edge{position:absolute;inset:0;outline:2px solid rgba(37,99,235,.55);outline-offset:-1px;pointer-events:none}
.ly.design .edge{outline-color:rgba(15,23,32,.25)}
.ll{position:absolute;z-index:6;display:flex;align-items:flex-start;gap:14px;opacity:0;transition:opacity .5s var(--out),transform .5s var(--out);transform:translateX(-8px)}
.ll.in{opacity:1;transform:none}
.ll .n{font:500 12px/1 var(--m);color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:5px 6px;background:var(--paper)}
.ll .t{font:600 20px/1.15 var(--d);letter-spacing:-.01em}
.ll p{color:var(--ink-2);font-size:14px;line-height:1.4;max-width:26ch;margin-top:6px}
.tag{position:absolute;z-index:6;font:500 11px/1 var(--m);color:var(--accent);background:var(--paper);border:1px solid var(--accent);
  border-radius:4px;padding:4px 5px;opacity:0;transition:opacity .4s;transform:translate(-50%,-130%)}
.tag.in{opacity:1}
.legend{display:none}

.tl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.tl{display:flex;flex-direction:column;gap:12px;min-height:240px;transition:border-color .25s var(--out),box-shadow .25s var(--out)}
.tl .h3{color:var(--on-dark)}
.tl .go{margin-top:auto;color:var(--accent-bright);font:500 15px/1 var(--t)}
.tl-vis{display:flex;align-items:center;min-height:64px;margin:6px 0 4px}
.tl .num{color:var(--on-dark)}
.tl-calc{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;color:var(--accent-bright)}
.tl-calc b{font-weight:500}
.tl-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-content:center}
.tl-bar i{height:6px;border-radius:3px;background:var(--accent-bright)}
.tl-bar i:nth-child(n+3){background:rgba(71,126,245,.25)}
.tl:hover{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.tl:hover .xlabel{color:var(--amber)}
@media (max-width:759.98px){.tl-grid{grid-template-columns:1fr}.tl{min-height:0}}

.works{position:relative;padding:clamp(96px,12vw,160px) var(--gut) clamp(80px,10vw,140px)}
.works .head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(32px,4vw,56px)}
.works .head p{color:var(--ink-2);max-width:36ch}
@media (min-width:1100px){.works .wgrid{grid-template-columns:repeat(3,1fr)}}
.works .works-all{margin-top:clamp(28px,3.5vw,48px)}
#final{background:var(--surface-dark)}

@media (max-width:759.98px){
  #scan{height:640svh}
  #scan .hero{flex-direction:column;align-items:flex-start;gap:16px;bottom:24px}
  #scan h1{font-size:31px}
  #scan .hero p{margin:10px 0 18px}
  #scan .hint{display:none}
  .lbl{gap:3px}
  .lbl .t{font-size:13px;background:rgba(15,23,32,.82);padding:3px 6px 4px;border-radius:4px}
  .lbl .mono{font-size:9px;background:rgba(15,23,32,.82);padding:2px 6px;border-radius:3px}
  .lbl::after{display:none}
  .cap h2{font-size:24px}
  #layers{height:360svh}
  #layers .head{top:76px;right:var(--gut)}
  #layers .head p{font-size:15px;margin-top:10px}
  .ll{display:none}
  .legend{display:flex;position:absolute;z-index:6;left:var(--gut);right:var(--gut);bottom:22px;flex-direction:column;gap:9px}
  .legend div{display:flex;gap:10px;align-items:baseline;opacity:0;transition:opacity .5s var(--out)}
  .legend div.in{opacity:1}
  .legend .n{font:500 11px/1 var(--m);color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:3px 4px;background:var(--paper)}
  .legend b{font:600 16px/1.2 var(--d)}
  .legend span{color:var(--ink-2);font-size:14px;line-height:1.3}
  .works .head{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (prefers-reduced-motion:reduce){#scan .hint b::after{animation:none}}
#pre{clip-path:inset(0 0 0 0)}
.labels.d .lbl{align-items:flex-end;text-align:right}
.labels.d .lbl::after{left:calc(100% + 6px);width:14px}
.labels.m .lbl::after{display:none}

#scan.has-fly{height:900vh}
#scan canvas.fly{position:absolute;inset:0;width:100%;height:100%;z-index:4;display:none;pointer-events:none}
html.anim #scan.has-fly canvas.fly{display:block}
#scan .chip{position:absolute;z-index:6;left:var(--gut);top:72px;padding:6px 9px;border-radius:4px;background:rgba(255,255,255,.9);
  color:var(--ink);opacity:0;transition:opacity .5s var(--out);pointer-events:none}
#scan .chip.in{opacity:1}
@media (max-width:759.98px){#scan.has-fly{height:920svh}#scan .chip{top:64px}}

#scan.has-fly .stage > .bg-light,#scan.has-fly .stage > .word{display:none}
#scan.has-fly .bg-dark{opacity:1}
#scan.has-fly .hero h1{color:var(--on-dark)}
#scan.has-fly .hero p{color:var(--on-dark-2)}
#scan.has-fly .hint{color:var(--on-dark-dim)}
#scan.has-fly .hint b{background:rgba(255,255,255,.18)}
#scan.has-fly .hint b::after{background:var(--on-dark)}