#deconstruct{height:450vh;background:var(--ink);--dc-gap:#8fd8cc;--dc-bad:#ff6b7a}
#deconstruct .dc-stage{background:radial-gradient(120% 90% at 58% 46%,#18213a 0%,var(--ink) 55%,#0d1222 100%)}
#deconstruct canvas.gl{z-index:0}
#deconstruct .dc-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,18,34,.88) 0%,rgba(13,18,34,.62) 24%,rgba(13,18,34,0) 40%),
             radial-gradient(130% 100% at 55% 50%,transparent 55%,rgba(8,11,22,.65) 100%)}

/* ---------- header / hud ---------- */
#deconstruct .dc-head{position:absolute;z-index:4;left:var(--gut);top:clamp(78px,11vh,108px);display:flex;flex-direction:column;gap:16px}
#deconstruct .dc-head h2{font-size:12px;margin:0}
#deconstruct .dc-phases{list-style:none;display:flex;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
#deconstruct .dc-phases li{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:1px solid var(--line-d);color:var(--mute-d);transition:color .5s,border-color .5s,background .5s}
#deconstruct .dc-phases b{display:grid;place-items:center;width:16px;height:16px;background:#ffffff14;color:#fff;font-weight:700;transition:background .5s}
#deconstruct .dc-phases li.on{color:#fff;border-color:#ffffff55}
#deconstruct .dc-phases li.on:first-child{border-color:#3fb8a688;color:var(--dc-gap)}
#deconstruct .dc-phases li.on:first-child b{background:var(--teal);color:var(--ink)}
#deconstruct .dc-phases li.on:not(:first-child){border-color:#e35b3299;color:var(--orange-hi)}
#deconstruct .dc-phases li.on:not(:first-child) b{background:var(--orange)}
#deconstruct .dc-hud{position:absolute;z-index:4;right:calc(var(--gut) + 40px);top:clamp(84px,11.5vh,112px);display:flex;gap:18px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d);opacity:.7}
#deconstruct .dc-hud .dc-tc{color:var(--orange-hi);font-variant-numeric:tabular-nums;min-width:12ch}

/* ---------- steps ---------- */
#deconstruct .dc-steps{position:absolute;z-index:5;left:var(--gut);top:52%;transform:translateY(-50%);width:min(30vw,440px);display:grid}
#deconstruct .dc-step{grid-area:1/1;align-self:center;opacity:0;will-change:opacity,transform}
#deconstruct .dc-step:first-child{opacity:1}
#deconstruct .dc-k{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--mute-d);margin-bottom:22px}
#deconstruct .dc-k span{color:var(--orange)}
#deconstruct .dc-step h3{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.2vw,52px);line-height:1;letter-spacing:-.04em;color:#fff;text-wrap:balance}
#deconstruct .dc-hl{color:#fff;background:linear-gradient(transparent 62%,#3fb8a640 62%,#3fb8a640 92%,transparent 92%)}
#deconstruct .dc-gap{color:var(--dc-gap);text-decoration:line-through;text-decoration-color:var(--dc-bad);text-decoration-thickness:3px}
#deconstruct .dc-p{margin-top:22px;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:var(--mute-d);max-width:38ch}
#deconstruct .dc-statement{font-family:var(--display);font-weight:800;font-size:clamp(36px,3.9vw,64px);line-height:.98;letter-spacing:-.045em;color:#fff;text-wrap:balance}

/* ---------- 3D labels ---------- */
#deconstruct .dc-leaders{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
#deconstruct .dc-leaders line{stroke-width:1;vector-effect:non-scaling-stroke}
#deconstruct .dc-labels{position:absolute;inset:0;z-index:3;pointer-events:none}
#deconstruct .dc-lab{position:absolute;left:0;top:0;width:280px;opacity:0;will-change:transform,opacity}
#deconstruct .dc-lab-h{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#e9ecf3;white-space:nowrap}
#deconstruct .dc-lab-h b{color:var(--teal);font-weight:700;transition:color .5s}
#deconstruct .dc-lab-h .lg{display:inline}
#deconstruct .dc-lab-h .sh{display:none}
#deconstruct .dc-lab-note{display:grid;margin-top:5px;font-size:13px;line-height:1.3;font-weight:500}
#deconstruct .dc-lab-note>span{grid-area:1/1;transition:opacity .45s var(--ease),transform .45s var(--ease)}
#deconstruct .dc-lab-note .g{color:var(--dc-gap);opacity:0;transform:translateY(4px)}
#deconstruct .dc-lab-note .g:before{content:"×";color:var(--dc-bad);font-weight:700;margin-right:7px}
#deconstruct .dc-lab-note .f{color:var(--orange-hi);opacity:0;transform:translateY(4px)}
#deconstruct .dc-lab-note .f:before{content:"";display:inline-block;width:6px;height:6px;background:var(--orange);margin-right:8px;transform:translateY(-2px) rotate(45deg);box-shadow:0 0 8px var(--orange)}
#deconstruct .dc-lab.gapon .g{opacity:1;transform:none}
#deconstruct .dc-lab.filled .g{opacity:0;transform:translateY(-4px)}
#deconstruct .dc-lab.filled .f{opacity:1;transform:none}
#deconstruct .dc-lab.filled .dc-lab-h b{color:var(--orange)}
#deconstruct .dc-meter{display:flex;align-items:center;gap:8px;margin-top:7px;opacity:0;transition:opacity .5s}
#deconstruct .dc-lab.gapon .dc-meter{opacity:1}
#deconstruct .dc-meter i{position:relative;flex:1;height:3px;background:#ffffff14;max-width:150px;overflow:hidden}
#deconstruct .dc-meter i:after{content:"";position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--w,0));background:var(--c,var(--teal));box-shadow:0 0 10px var(--c,var(--teal))}
#deconstruct .dc-meter em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d);min-width:7ch}
#deconstruct .dc-lab.filled .dc-meter em{color:var(--orange-hi)}
#deconstruct .dc-legend{position:absolute;z-index:3;left:0;top:0;opacity:0;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d);white-space:nowrap}
#deconstruct .dc-legend span{color:#fff}

#deconstruct .dc-inflow{position:absolute;z-index:3;left:0;top:0;opacity:0;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-hi);white-space:nowrap}
#deconstruct .dc-inflow i{width:42px;height:1px;background:linear-gradient(90deg,transparent,var(--orange));box-shadow:0 0 8px var(--orange)}

#deconstruct .dc-block{position:absolute;z-index:3;left:0;top:0;opacity:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;white-space:nowrap;will-change:transform,opacity}
#deconstruct .dc-block-k{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--orange);margin-bottom:6px}
#deconstruct .dc-block strong{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.1vw,32px);letter-spacing:-.035em;line-height:1;color:#fff}
#deconstruct .dc-block em{font-style:normal;font-family:var(--display);font-weight:700;font-size:clamp(16px,1.4vw,21px);letter-spacing:-.02em;color:var(--orange-hi)}
#deconstruct .dc-block code{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mute-d)}

/* screen-reader list */
#deconstruct .dc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- mobile ---------- */
@media (max-width:760px){
  #deconstruct .dc-shade{background:linear-gradient(0deg,rgba(13,18,34,.97) 0%,rgba(13,18,34,.9) 30%,rgba(13,18,34,0) 46%),radial-gradient(140% 90% at 50% 40%,transparent 55%,rgba(8,11,22,.6) 100%)}
  #deconstruct .dc-head{top:64px;gap:10px;left:16px;right:16px}
  #deconstruct .dc-head h2{font-size:10px;letter-spacing:.22em}
  #deconstruct .dc-head h2:before{width:16px}
  #deconstruct .dc-phases{font-size:8.5px;letter-spacing:.12em;gap:4px}
  #deconstruct .dc-phases li{padding:4px 7px 4px 4px;gap:6px}
  #deconstruct .dc-phases b{width:13px;height:13px}
  #deconstruct .dc-hud{display:none}
  #deconstruct .dc-steps{left:16px;right:16px;width:auto;top:auto;bottom:max(22px,env(safe-area-inset-bottom));transform:none;align-items:end}
  #deconstruct .dc-step{align-self:end}
  #deconstruct .dc-k{margin-bottom:10px;font-size:10px}
  #deconstruct .dc-step h3{font-size:clamp(26px,7.4vw,32px)}
  #deconstruct .dc-p{margin-top:10px;font-size:14px;line-height:1.5}
  #deconstruct .dc-statement{font-size:clamp(30px,9vw,38px)}
  #deconstruct .dc-lab-h{font-size:9px;letter-spacing:.1em;gap:6px}
  #deconstruct .dc-lab-h .lg{display:none}
  #deconstruct .dc-lab-h .sh{display:inline}
  #deconstruct .dc-lab-note{font-size:10.5px;margin-top:2px;line-height:1.25}
  #deconstruct .dc-lab-note .g:before{margin-right:4px}
  #deconstruct .dc-lab-note .f:before{width:4px;height:4px;margin-right:5px}
  #deconstruct .dc-meter{margin-top:4px}
  #deconstruct .dc-meter em{display:none}
  #deconstruct .dc-meter i{height:2px}
  #deconstruct .dc-inflow{font-size:8.5px;letter-spacing:.14em}
  #deconstruct .dc-inflow i{width:22px}
  #deconstruct .dc-block code{font-size:8.5px;letter-spacing:0}
}

/* fallback when the scene fails */
#deconstruct.no-js-scene{height:auto}
#deconstruct.no-js-scene .dc-stage{position:relative;height:auto;padding:140px 0 100px}
#deconstruct.no-js-scene .dc-steps{position:relative;top:auto;transform:none;gap:48px;display:flex;flex-direction:column;width:auto;max-width:640px;left:auto;margin:0 var(--gut)}
#deconstruct.no-js-scene .dc-step{opacity:1}
#deconstruct.no-js-scene .dc-sr{position:static;width:auto;height:auto;margin:48px var(--gut) 0;clip:auto;clip-path:none;white-space:normal;overflow:visible;list-style:decimal inside;color:var(--mute-d);line-height:1.7}

/* soft entry / exit */
#deconstruct .dc-fade{position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--ink);opacity:1}
@media (max-width:760px){
  #deconstruct .dc-head{top:84px}
  #deconstruct .dc-head h2{font-size:10px}
  #deconstruct .dc-phases li{white-space:nowrap}
  #deconstruct .dc-x{display:none}
  #deconstruct .dc-inflow{display:none}
  #deconstruct .dc-step h3{font-size:clamp(25px,7vw,30px)}
  #deconstruct .dc-p{font-size:13.5px}
  #deconstruct .dc-lab-note{font-size:10px}
  #deconstruct .dc-meter{margin-top:3px}
  #deconstruct .dc-block code{white-space:normal;max-width:300px;line-height:1.5}
}
@media (max-width:760px){#deconstruct .dc-block-k{display:none}}

/* compact labels: tablets & small laptops (761–1199px) */
#deconstruct.dc-compact .dc-steps{width:min(28vw,330px)}
#deconstruct.dc-compact .dc-step h3{font-size:clamp(26px,3.3vw,38px)}
#deconstruct.dc-compact .dc-p{font-size:14.5px}
#deconstruct.dc-compact .dc-statement{font-size:clamp(30px,3.9vw,44px)}
#deconstruct.dc-compact .dc-lab-h{font-size:10px;letter-spacing:.1em;gap:7px}
#deconstruct.dc-compact .dc-lab-h .lg{display:none}
#deconstruct.dc-compact .dc-lab-h .sh{display:inline}
#deconstruct.dc-compact .dc-lab-note{font-size:12px;margin-top:3px}
#deconstruct.dc-compact .dc-meter{margin-top:5px}
#deconstruct.dc-compact .dc-meter em{display:none}
#deconstruct.dc-compact .dc-hud{display:none}