:root{--bg:#07070a;--ink:#e8e4dc;--dim:#8d8778;--gold:#c9a227;--line:#1c1c22}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font:14px/1.5 ui-sans-serif,system-ui,sans-serif}.app{height:100%;display:flex}.stage{flex:auto;min-width:0;position:relative}.stage canvas{display:block}.panel{border-left:1px solid var(--line);background:#0a0a0f;flex:0 0 320px;padding:20px 18px 60px;overflow-y:auto}@media (width<=900px){.app{flex-direction:column}.stage{flex:60%}.panel{border-left:none;border-top:1px solid var(--line);flex:40%}}.brand h1{letter-spacing:.34em;margin:0;font-size:22px;font-weight:300}.brand p{color:var(--dim);letter-spacing:.14em;margin:4px 0 20px;font-size:11px}.name{width:100%;color:var(--ink);border:1px solid var(--line);background:#101018;border-radius:3px;margin-bottom:20px;padding:8px 10px;font-size:14px}.group{margin-bottom:22px}.group h2{letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 10px;font-size:10px;font-weight:500}.ctl{margin-bottom:12px;display:block}.ctl-label{color:var(--dim);justify-content:space-between;margin-bottom:5px;font-size:12px;display:flex}.ctl-label em{color:var(--ink);font-style:normal}.ctl input[type=range]{width:100%;accent-color:var(--gold)}.ctl input[type=color]{border:1px solid var(--line);background:0 0;border-radius:3px;width:100%;height:28px;padding:0}.seg{flex-wrap:wrap;gap:4px;display:flex}.seg button{cursor:pointer;color:var(--dim);border:1px solid var(--line);background:#101018;border-radius:3px;flex:auto;padding:6px 8px;font-size:11px}.seg button.on{background:var(--gold);color:#12100a;border-color:var(--gold)}.classes{gap:6px;display:grid}.class{text-align:left;cursor:pointer;color:var(--ink);border:1px solid var(--line);background:#101018;border-radius:3px;padding:9px 10px;display:block}.class.on{border-color:var(--gold)}.class strong{font-size:13px;font-weight:500;display:block}.class span{color:var(--dim);margin-top:2px;font-size:11px;display:block}.err{color:#ffb4a2;background:#2a1210;border:1px solid #5a2420;border-radius:3px;margin:0 0 10px;padding:8px 10px;font-size:12px}.err button{cursor:pointer;color:#ffb4a2;background:0 0;border:none;margin-left:8px;padding:0;font-size:11px;text-decoration:underline}.slots{gap:4px;margin:10px 0 0;padding:0;list-style:none;display:grid}.slots li{gap:4px;display:flex}.slots li>button:first-child{text-align:left;cursor:pointer;color:var(--ink);border:1px solid var(--line);background:#101018;border-radius:3px;flex:auto;padding:6px 9px;font-size:12px}.slots .x{cursor:pointer;color:var(--dim);border:1px solid var(--line);background:#101018;border-radius:3px;flex:0 0 30px}