.interactive-lab{margin:2rem auto 3rem;max-width:1600px;padding:clamp(14px,2vw,28px);border:1px solid #3c4b49;background:#111919;scroll-margin-top:100px}
.interactive-lab h3{font-size:clamp(1.6rem,3vw,2.5rem);margin:.3rem 0 .7rem}.interactive-lab .lab-intro{max-width:75ch;color:#c2cbc7}
.lab-tabs,.lab-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:1rem 0}.interactive-lab button{font:inherit;cursor:pointer;color:#e9eee8;background:#202b2a;border:1px solid #5e7470;border-radius:3px;padding:10px 15px;min-height:44px}
.interactive-lab button:hover{background:#30413e}.interactive-lab button[aria-pressed=true]{border-color:#8de0cc;background:#264b42;color:#fff}.interactive-lab button:focus-visible,.interactive-lab input:focus-visible,.lab-code:focus-visible{outline:3px solid #e4bb65;outline-offset:3px}
.lab-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:22px;align-items:start}.lab-visual{position:sticky;top:85px;min-width:0}.lab-stage{position:relative;aspect-ratio:1.6;background:#0c1115;border:1px solid #34413f;overflow:hidden}.lab-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}.lab-loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;background:#0c1115;z-index:2}.lab-loading[hidden]{display:none}
.lab-stage-label{position:absolute;left:14px;top:14px;pointer-events:none;padding:5px 9px;color:#d1ded8;background:#101817dd;border:1px solid #51605b;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase}
.lab-state{display:block;min-height:3.8em;padding:13px 15px;margin:0;background:#1a2523;color:#c7e4da;font-size:.85rem;line-height:1.5;border:1px solid #3c4b49;border-top:0}.lab-explanation{min-height:4.5em;color:#e6e9e2;line-height:1.65}.lab-note{font-size:.78rem;color:#a5b5ae;line-height:1.6}.lab-code-list{max-height:640px;overflow-y:auto;overscroll-behavior:contain;padding:3px 5px 8px 3px;scrollbar-color:#688f80 #16211e}.lab-code{padding:0;margin:0 0 12px;border:1px solid #41524d;background:#0e1715}.lab-code.active{border-color:#89d6bf;box-shadow:inset 3px 0 #89d6bf}.lab-code button{width:100%;text-align:left;border:0;border-radius:0;display:flex;align-items:center;gap:10px}.lab-code button span{font-size:.75rem;color:#e4bb65}.lab-code pre{margin:0;padding:13px;overflow-x:auto;tab-size:2;font-size:.75rem;line-height:1.65;color:#d0ddd7;max-height:220px}.lab-code small{display:block;color:#a3b5ac;padding:7px 13px;border-top:1px solid #25352f;font-size:.69rem;overflow-wrap:anywhere}.lab-code .kw{color:#85c9f0}.lab-code .num{color:#e6be70}.lab-code .str{color:#bad68c}.lab-code .comment{color:#9aaba3}
.lab-layout>div{min-width:0}
.lab-toolbar[hidden]{display:none}
.lab-extra{padding:12px 14px;border:1px solid #43584f;margin-top:12px}.lab-extra label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lab-extra input[type=range]{width:100%;min-height:40px;accent-color:#8de0cc}.lab-extra output{font-variant-numeric:tabular-nums;color:#e9c47e}.lab-extra[hidden]{display:none}.lab-speed{display:flex;gap:8px;align-items:center;color:#b9c9c1;font-size:.8rem}.lab-speed select{padding:7px;background:#17231e;color:#e3e9e6;border:1px solid #658071}.reclaimer-detail{color:#b8c7bf;font-size:.85rem;max-width:90ch}
@media(max-width:850px){.lab-layout{grid-template-columns:1fr}.lab-visual{position:static}.lab-code-list{max-height:440px}.lab-stage{aspect-ratio:1.15}.lab-explanation{min-height:0}.lab-tabs button{flex:1;padding:9px}.interactive-lab{padding:12px}.lab-toolbar button{padding:9px 11px}}