#models{height:400vh;background:var(--ink)}
#models .md-stage{background:radial-gradient(120% 90% at 60% 48%,#18213a 0%,var(--ink) 55%,#0d1222 100%)}
#models canvas.gl{z-index:0;opacity:0}
#models .md-shade{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .6s var(--ease);
  background:linear-gradient(90deg,rgba(13,18,34,.9) 0%,rgba(13,18,34,.6) 25%,rgba(13,18,34,0) 40%),
             radial-gradient(130% 100% at 58% 50%,transparent 55%,rgba(8,11,22,.6) 100%)}
#models.closing .md-shade{opacity:.35}

/* ---------- header / tabs ---------- */
#models .md-head{position:absolute;z-index:6;left:var(--gut);top:clamp(78px,11vh,108px);display:flex;flex-direction:column;gap:16px}
#models .md-head{transition:opacity .4s}
@media (max-width:1280px){#models.closing .md-head{opacity:0 !important;pointer-events:none}}
#models .md-head .eyebrow{font-size:12px}
#models .md-tabs{display:flex;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
#models .md-tabs button{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:1px solid var(--line-d);color:var(--mute-d);text-transform:uppercase;letter-spacing:inherit;transition:color .5s,border-color .5s,background .5s}
#models .md-tabs button b{display:grid;place-items:center;width:16px;height:16px;background:#ffffff14;color:#fff;font-weight:700;transition:background .5s}
#models .md-tabs button:hover{color:#fff;border-color:#ffffff55}
#models .md-tabs button[aria-current="step"]{color:var(--orange-hi);border-color:#e35b3299}
#models .md-tabs button[aria-current="step"] b{background:var(--orange)}

/* ---------- JEPA sub-step HUD ---------- */
#models .md-jhud{position:absolute;z-index:6;right:calc(var(--gut) + 40px);top:clamp(84px,11.5vh,112px);list-style:none;display:flex;gap:4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;counter-reset:j;opacity:0;transition:opacity .5s}
#models .md-jhud.on{opacity:1}
#models .md-jhud li{counter-increment:j;padding:6px 10px;border-top:1px solid #ffffff22;color:#9aa3b888;transition:color .4s,border-color .4s}
#models .md-jhud li:before{content:counter(j) " ";color:inherit;opacity:.6}
#models .md-jhud li.on{color:#fff;border-color:var(--orange)}
#models .md-jhud li.done{color:var(--mute-d);border-color:#e35b3266}

/* ---------- steps ---------- */
#models .md-steps{position:absolute;z-index:5;left:var(--gut);top:54%;transform:translateY(-50%);width:min(31vw,450px);display:grid}
#models .md-step{grid-area:1/1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;opacity:0;will-change:opacity,transform;pointer-events:none}
#models .md-step>*{flex:none}
#models .md-step.live{pointer-events:auto}
#models .md-step:first-child{opacity:1}
#models .md-intro h2{color:#fff;font-size:clamp(44px,5.2vw,84px);text-wrap:balance}
#models .md-k{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--mute-d);margin-bottom:18px;text-transform:uppercase}
#models .md-k span{color:var(--orange)}
#models .md-step h3{font-family:var(--display);font-weight:800;font-size:clamp(30px,2.9vw,46px);line-height:1;letter-spacing:-.04em;color:#fff;text-wrap:balance}
#models .md-p{margin-top:18px;font-size:clamp(15px,1.06vw,16.5px);line-height:1.55;color:#c3c9d6;max-width:40ch}
#models .md-intro .md-p{font-size:clamp(17px,1.4vw,21px);max-width:30ch;margin-top:24px}
#models .md-why{margin-top:16px;padding-left:14px;border-left:2px solid var(--orange);font-size:14.5px;line-height:1.5;color:#fff;max-width:40ch}
#models .md-why b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--orange-hi);font-weight:700;margin-bottom:4px}
#models .md-feeds{list-style:none;margin-top:18px;display:grid;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
#models .md-feeds li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:9px;color:var(--mute-d)}
#models .md-feeds li:before{content:"";width:8px;height:8px;background:var(--c);box-shadow:0 0 8px var(--c);transform:rotate(45deg)}
#models .md-feeds b{font-weight:400;color:#e9ecf3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#models .md-feeds li>span{color:var(--orange-hi);white-space:nowrap}
#models .md-feeds li>span:before{content:"→ ";color:#9aa3b8aa}
#models .md-eg{margin-top:14px;font-size:12px;line-height:1.45;color:var(--mute-d);max-width:44ch}
#models .md-finalwrap{position:absolute;z-index:5;left:50%;top:clamp(92px,13vh,130px);transform:translateX(-50%);width:min(880px,calc(100vw - 2*var(--gut)));display:grid;text-align:center}
#models .md-final h3{font-size:clamp(40px,4.6vw,76px);letter-spacing:-.045em;line-height:.96}
#models .md-final .md-p{margin:18px auto 0;max-width:48ch;font-size:clamp(15px,1.2vw,18px)}
#models .md-final .fine{margin:14px auto 0;max-width:80ch;color:var(--mute-d);opacity:.75;font-size:11px}
#models .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}

/* ---------- 3D labels ---------- */
#models .md-labels{position:absolute;inset:0;z-index:3;pointer-events:none}
#models .md-lab{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;white-space:nowrap;text-align:center;font-family:var(--mono);text-transform:uppercase}
#models .md-lab b{display:block;font-size:10.5px;letter-spacing:.14em;color:#eef1f7;font-weight:700}
#models .md-lab span{display:block;margin-top:3px;font-size:9px;letter-spacing:.14em;color:var(--mute-d)}
#models .md-lab em{display:none;font-style:normal}
#models .md-lab.hot b{color:var(--orange-hi)}
#models .md-lab.chip{text-transform:none}
#models .md-lab.chip b{font-weight:400;letter-spacing:.04em;font-size:11px;color:#fff;padding:5px 8px;border:1px solid #ffffff2a;background:#121829cc}
#models .md-lab.chip b i{font-style:normal;color:var(--orange-hi)}
#models .md-lab.chip.low b i{color:#9fb3e0}
#models .md-lab.cap b{font-family:var(--display);text-transform:none;letter-spacing:-.02em;font-size:clamp(15px,1.3vw,20px);font-weight:800}
#models .md-lab.cap span{color:var(--orange-hi)}
#models .md-lab.stk b{color:var(--orange-hi)}

/* ---------- mid widths: condensed chips + short 3D labels ---------- */
@media (max-width:1280px){
  #models .md-jhud .lg{display:none}
  #models .md-jhud li{padding:6px 8px}
  #models .md-lab b{font-size:9.5px;letter-spacing:.1em}
  #models .md-lab span{display:none}
  #models .md-lab .lg{display:none}
  #models .md-lab em{display:inline}
  #models .md-lab.cap span{display:block}
  #models .md-lab.chip b{font-size:10px}
  #models .md-feeds{gap:4px;font-size:9.5px}
  #models .md-feeds li{grid-template-columns:10px minmax(0,1fr);row-gap:1px}
  #models .md-feeds b{white-space:normal}
  #models .md-feeds li>span{grid-column:2}
}
@media (max-width:1280px) and (max-height:820px){
  #models .md-steps{top:56%}
  #models .md-p{margin-top:12px;font-size:14.5px;line-height:1.5}
  #models .md-why{margin-top:12px;font-size:13.5px}
  #models .md-feeds{margin-top:12px}
  #models .md-eg{margin-top:10px;font-size:11px}
}
@media (max-width:980px){
  #models .md-jhud{left:var(--gut);right:auto;top:calc(clamp(78px,11vh,108px) + 72px);flex-wrap:wrap;max-width:calc(100% - 2*var(--gut))}
}
/* ---------- mobile ---------- */
@media (max-width:760px){
  #models{height:440vh}
  #models .md-shade{background:linear-gradient(0deg,rgba(13,18,34,.97) 0%,rgba(13,18,34,.92) 34%,rgba(13,18,34,0) 50%),radial-gradient(140% 90% at 50% 40%,transparent 55%,rgba(8,11,22,.6) 100%)}
  #models.closing .md-shade{opacity:1}
  #models .md-head{top:62px;left:16px;right:16px;gap:10px}
  #models .md-head .eyebrow{font-size:10px;letter-spacing:.22em}
  #models .md-head .eyebrow:before{width:16px}
  #models .md-tabs{font-size:8.5px;letter-spacing:.12em;gap:4px}
  #models .md-tabs button{padding:4px 7px 4px 4px;gap:6px}
  #models .md-tabs button b{width:13px;height:13px}
  #models .md-jhud{display:none}
  #models .md-steps{left:16px;right:16px;width:auto;top:auto;bottom:max(20px,env(safe-area-inset-bottom));transform:none;align-items:end}
  #models .md-step{justify-content:flex-end}
  #models .md-intro h2{font-size:clamp(38px,11vw,46px)}
  #models .md-intro .md-p{font-size:16px;margin-top:14px}
  #models .md-k{margin-bottom:8px;font-size:9.5px;letter-spacing:.18em}
  #models .md-step h3{font-size:clamp(25px,7.2vw,30px)}
  #models .md-p{margin-top:10px;font-size:14px;line-height:1.5}
  #models .md-why{margin-top:10px;font-size:13px;padding-left:10px}
  #models .md-why b{font-size:8.5px}
  #models .md-feeds{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #models .md-eg{margin-top:8px;font-size:11px}
  #models .md-finalwrap{left:16px;right:16px;width:auto;top:auto;bottom:max(20px,env(safe-area-inset-bottom));transform:none;text-align:left}
  #models .md-final h3{font-size:clamp(32px,9.6vw,40px)}
  #models .md-final .md-p{margin:10px 0 0;font-size:14px}
  #models .md-final .fine{margin:10px 0 0;font-size:10px}
  #models .md-lab{text-align:left}
  #models .md-lab b{font-size:9px;letter-spacing:.08em}
  #models .md-lab span{display:none}
  #models .md-lab .lg{display:none}
  #models .md-lab em{display:inline}
  #models .md-lab.chip b{font-size:9.5px;padding:3px 5px}
  #models .md-lab.cap b{font-size:12px}
  #models .md-lab.cap span{display:none}
}

/* fallback when the scene fails */
#models.no-js-scene{height:auto}
#models.no-js-scene .md-stage{position:relative;height:auto;padding:140px 0 100px}
#models.no-js-scene canvas,#models.no-js-scene .md-jhud,#models.no-js-scene .md-tabs{display:none}
#models.no-js-scene .md-head{position:relative;top:auto;left:auto;margin:0 var(--gut) 40px}
#models.no-js-scene .md-steps{position:relative;top:auto;left:auto;bottom:auto;transform:none;display:flex;flex-direction:column;gap:56px;width:auto;max-width:640px;margin:0 var(--gut)}
#models.no-js-scene .md-step{opacity:1;pointer-events:auto}
#models.no-js-scene .md-finalwrap{position:relative;left:auto;top:auto;transform:none;text-align:left;width:auto;max-width:640px;margin:56px var(--gut) 0}