*{box-sizing:border-box} :root{--bg:#090e14;--panel:#101923;--line:#23313e;--muted:#82909d;--text:#e7edf2;--gold:#d6a85c;--blue:#54b9d4} body{margin:0;background:radial-gradient(ellipse at 55% -20%,#1b2c39 0,transparent 48%),var(--bg);color:var(--text);font-family:Inter, sans-serif} .app-shell{max-width:1600px;margin:auto;padding:0 34px}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:38px;height:38px;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold);font:700 16px 'Barlow Condensed';letter-spacing:1px}.brand b{display:block;font:600 15px 'Barlow Condensed';letter-spacing:2px}.brand small,.top-meta{font-size:9px;letter-spacing:1.5px;color:var(--muted)}.brand small{display:block;margin-top:4px}.top-meta{display:flex;align-items:center;gap:10px}.live-dot{width:6px;height:6px;background:#6dc7a0;border-radius:50%;box-shadow:0 0 10px #6dc7a0}.version{border:1px solid var(--line);padding:6px 9px}.intro{display:flex;justify-content:space-between;align-items:end;padding:42px 0 32px}.eyebrow,.side-label{font-size:9px;letter-spacing:2px;color:var(--gold);font-weight:700}.intro h1{font:700 clamp(42px,5vw,68px)/.88 'Barlow Condensed';letter-spacing:1px;margin:13px 0}.intro h1 em{font-style:normal;color:var(--gold)}.intro p{max-width:490px;color:#9aa8b4;font-size:12px;line-height:1.8;margin:16px 0 0}.intro-stat{display:flex;align-items:center;gap:13px;margin:0 5% 10px 0}.intro-stat span{font:600 50px 'Barlow Condensed';color:var(--gold)}.intro-stat small{font-size:9px;line-height:1.6;letter-spacing:1.5px;color:var(--muted)}.workspace{display:grid;grid-template-columns:215px minmax(400px,1fr) 245px;min-height:570px;border:1px solid var(--line);background:#0c131b}.sidebar,.inspector{padding:22px 17px;background:#0e1720}.side-label{color:#778895;margin:0 0 13px}.model-choice{width:100%;border:1px solid transparent;background:transparent;color:var(--text);display:flex;align-items:center;text-align:left;padding:12px 8px;gap:10px;cursor:pointer;margin-bottom:5px}.model-choice.active{background:#182530;border-color:#33414c}.model-choice .num{font:600 20px 'Barlow Condensed';color:var(--gold)}.model-choice b{font-size:9px;letter-spacing:1px;display:block}.model-choice small{display:block;color:var(--muted);font-size:9px;margin-top:5px}.arrow{margin-left:auto;color:var(--gold)}.side-rule{height:1px;background:var(--line);margin:18px 0}.mode-btn{display:flex;align-items:center;gap:12px;width:100%;padding:10px 8px;border:0;background:none;color:#aebac4;text-align:left;font-size:9px;letter-spacing:1px;cursor:pointer}.mode-btn span{color:#647583}.mode-btn.active{color:var(--gold);background:#1a252e}.range-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#aab6bf;margin:17px 0 8px}output{color:var(--gold)}input[type=range]{width:100%;accent-color:var(--gold)}.utility-btn{width:100%;background:#17232d;border:1px solid #2a3945;color:#bdc8d0;padding:10px;margin-top:8px;text-align:left;font-size:9px;letter-spacing:1px;cursor:pointer}.disclaimer{font-size:9px;line-height:1.6;color:#73818d;margin-top:22px}.viewport-panel{min-width:0;border-left:1px solid var(--line);border-right:1px solid var(--line);display:flex;flex-direction:column}.viewport-head{height:76px;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.viewport-head h2{font:600 19px 'Barlow Condensed';letter-spacing:1px;margin:5px 0}.view-tag{border:1px solid #31414d;color:#9eabb5;padding:7px 9px;font-size:8px;letter-spacing:1px}#viewport{position:relative;flex:1;min-height:420px;background:radial-gradient(ellipse at 50% 52%,#1b2a36 0,#0b131b 65%);overflow:hidden}#viewport canvas{display:block;width:100%;height:100%}.loading{position:absolute;top:48%;width:100%;text-align:center;color:var(--gold);font-size:10px;letter-spacing:2px;pointer-events:none}.axis-label,.hint{position:absolute;bottom:14px;color:#667985;font-size:8px;letter-spacing:1.3px}.axis-label{left:18px}.hint{right:18px}.viewport-foot{height:40px;display:flex;align-items:center;justify-content:center;gap:22px;border-top:1px solid var(--line);font-size:8px;letter-spacing:1px;color:#82919c}.viewport-foot i{display:inline-block;width:7px;height:7px;margin-right:6px}.legend-metal{background:#8796a2}.legend-gold{background:var(--gold)}.legend-blue{background:var(--blue)}.inspector-head{display:flex;justify-content:space-between}.inspect-index{font-size:8px;color:#748592}.component-graphic{height:95px;display:grid;place-items:center;color:var(--gold);font-size:54px;border-bottom:1px solid var(--line);margin:14px 0}.component-type{font-size:8px;color:var(--gold);letter-spacing:1.5px}.inspector h3{font:600 24px 'Barlow Condensed';margin:8px 0}.inspector>p{font-size:10px;line-height:1.8;color:#91a0ac;min-height:68px}.data-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:11px 0;font-size:8px;color:#7d8c98}.data-row b{color:#c5d0d8;font-size:8px;letter-spacing:.5px}.inspector-note{margin-top:13px;background:#17232c;padding:12px}.inspector-note b{font-size:8px;color:var(--gold);letter-spacing:1px}.inspector-note p{font-size:9px;line-height:1.6;color:#93a1ab;margin:7px 0 0}.step-controls{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.step-controls button{background:none;border:0;color:var(--gold);font-size:8px;cursor:pointer}.step-controls span{font-size:8px;color:#81909b}.lower{padding:27px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.lower h2{font:600 20px 'Barlow Condensed';letter-spacing:1px;margin:6px 0}.sequence{display:flex;gap:5px;flex-wrap:wrap}.sequence-item{background:#111c25;border:1px solid var(--line);color:#9eabb5;padding:10px 12px;display:flex;gap:9px;align-items:center;cursor:pointer}.sequence-item b{font:600 16px 'Barlow Condensed';color:var(--gold)}.sequence-item span{font-size:8px;letter-spacing:.7px} .sequence-item.active{border-color:var(--gold);background:#202b32}footer{border-top:1px solid var(--line);padding:17px 0;display:flex;justify-content:space-between;color:#61717e;font-size:8px;letter-spacing:1.2px}@media(max-width:1050px){.workspace{grid-template-columns:190px minmax(300px,1fr)}.inspector{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.inspector-head,.component-graphic,.step-controls{grid-column:1/-1}.intro-stat{margin-right:0}}@media(max-width:700px){.app-shell{padding:0 12px}.top-meta{display:none}.intro{padding:28px 0}.intro-stat{display:none}.workspace{display:flex;flex-direction:column}.sidebar{order:2}.viewport-panel{order:1;border:0}.inspector{order:3;display:block}.viewport-head{padding:14px}.viewport-head h2{font-size:16px}#viewport{min-height:360px}.lower{display:block}.sequence{margin-top:15px}.sequence-item{flex:1;min-width:43%}.viewport-foot{gap:10px;font-size:7px}footer{gap:12px;line-height:1.5}}