.model-studio{padding:105px 5vw 115px;background:#090d10;color:var(--fg)}
.model-head{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:end;margin-bottom:44px}
.model-head h2{font-size:clamp(50px,7vw,100px);line-height:.89;letter-spacing:-.06em;font-weight:520;margin:12px 0 0}
.model-head p{color:#b0b6bb;line-height:1.55;max-width:520px;margin:0;font-size:18px}
.model-shell{border:1px solid #ffffff26;border-radius:6px;overflow:hidden}
.model-toolbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:18px 22px;border-bottom:1px solid #ffffff1c;background:#0d1216}
.model-buttons{display:flex;gap:6px;flex-wrap:wrap}
.model-studio button{appearance:none;cursor:pointer;border:1px solid #ffffff30;border-radius:999px;background:transparent;color:#c1c7cc;padding:11px 16px;font:inherit;font-size:11px;letter-spacing:.06em}
.model-studio button[aria-pressed="true"]{background:var(--fg);color:#0a0a0a;border-color:var(--fg)}
.model-studio button:disabled{opacity:.4;cursor:default}
.model-studio button:focus-visible,.model-studio input:focus-visible,.model-viewport:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.model-viewport{position:relative;height:clamp(440px,65svh,760px);isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#20303a,#0b1014 70%);touch-action:pan-y}
.model-viewport:before{content:"";position:absolute;inset:0;background:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:50px 50px;pointer-events:none}
.model-viewport canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.model-poster{position:absolute;width:100%;height:100%;object-fit:contain;opacity:.75;transition:opacity .25s}
.model-viewport.is-ready .model-poster{opacity:0}
.model-loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:14px;background:#090d109c;padding:24px;z-index:2}
.model-loading[hidden]{display:none}
.model-loading p{font-size:13px;color:#c0c8cd;margin:0;max-width:360px}
.model-loading button{justify-self:center}
.model-corner{position:absolute;left:22px;top:22px;pointer-events:none;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#b4c0c9;z-index:1}
.model-hint{position:absolute;bottom:20px;left:22px;right:22px;display:flex;justify-content:space-between;gap:16px;pointer-events:none;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9caab4;z-index:1}
.model-controls{padding:22px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;background:#0d1216;border-top:1px solid #ffffff1c}
.model-controls button{border-color:var(--orange);color:var(--orange);min-width:128px}
.model-range{display:flex;align-items:center;gap:16px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#9caab4}
.model-range input{width:100%;min-width:0;accent-color:var(--orange);cursor:pointer}
.model-range output{min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.model-range[hidden],.model-studio button[hidden]{display:none}
.model-controls>button:last-child{min-width:0;border-color:#ffffff30;color:#c1c7cc}
.model-notes{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:28px}
.model-notes h3{font-size:26px;letter-spacing:-.04em;font-weight:520;margin:0 0 12px}
.model-notes p{color:#9caab4;line-height:1.6;font-size:14px;margin:0;max-width:620px}
.model-stats{display:flex;gap:24px;flex-wrap:wrap;margin-top:20px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--cyan)}
.model-caption{font-size:11px;line-height:1.6;color:#7f8b94;margin:22px 0 0;max-width:800px}
.model-studio:not(.has-webgl) .model-toolbar,.model-studio:not(.has-webgl) .model-controls{display:none}
@media(max-width:800px){.model-studio{padding:78px 16px 85px}.model-head,.model-notes{grid-template-columns:1fr;gap:26px}.model-head h2{font-size:14vw}.model-head p{font-size:16px}.model-toolbar{padding:14px}.model-studio button{padding:11px 14px;min-height:42px}.model-viewport{height:480px}.model-controls{grid-template-columns:1fr auto;padding:16px;gap:18px}.model-range{grid-column:1/-1;grid-row:2}.model-controls>button:first-child{justify-self:start}.model-corner{left:16px;top:18px}.model-hint{left:16px;right:16px;font-size:9px}.model-notes{gap:20px}.model-stats{gap:16px}}
@media(prefers-reduced-motion:reduce){.model-poster{transition:none}}
