*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#0b0f14;--panel:#111820;--panel2:#0e141b;--line:#1e2a36;--ink:#e2e8f0;--mut:#94a3b8;--dim:#64748b;--glow:#f2b880;--accent:#e8a15c;--accent2:#93c5fd}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}.shell{display:flex;height:100dvh}.stage{flex:1;position:relative;min-width:0}.stage canvas{display:block}.brand{position:absolute;top:18px;left:22px;z-index:2;pointer-events:none}.brand h1{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}.brand h1 span{color:var(--glow)}.brand p{font-size:.74rem;color:var(--dim);margin-top:2px}.stats{position:absolute;bottom:14px;left:22px;z-index:2;font-size:.72rem;color:var(--dim);font-variant-numeric:tabular-nums;pointer-events:none}.panel{width:340px;flex:0 0 340px;background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:20px 18px 28px;display:flex;flex-direction:column;gap:18px}.group{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px}.group h2{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}.ctl{margin-bottom:12px}.ctl:last-child{margin-bottom:0}.ctl .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}.ctl label{font-size:.8rem;color:var(--mut);font-weight:500}.ctl output{font-size:.76rem;color:var(--glow);font-variant-numeric:tabular-nums;font-weight:600}input[type=range]{width:100%;height:22px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--glow);margin-top:-6px;border:2px solid var(--bg);box-shadow:0 0 0 1px var(--line)}input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--glow);border:2px solid var(--bg)}.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1;min-width:52px;padding:7px 0;font-size:.76rem;font-weight:600;color:var(--mut);background:transparent;border:1px solid var(--line);border-radius:8px;cursor:pointer}.seg button.on{color:var(--bg);background:var(--glow);border-color:var(--glow)}.dl{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px 0;font-size:.9rem;font-weight:700;color:var(--bg);background:var(--glow);border:none;border-radius:11px;cursor:pointer}.dl:hover{background:var(--accent)}.dl svg{width:17px;height:17px}.note{font-size:.7rem;color:var(--dim);line-height:1.5;text-align:center;margin-top:8px}.note a{color:var(--accent2);text-decoration:none}@media (max-width:820px){.shell{flex-direction:column}.stage{flex:0 0 46dvh}.panel{width:100%;flex:1;border-left:none;border-top:1px solid var(--line)}}