:root{--bg: #0b0d11;--panel: #141820ee;--panel-solid: #141820;--border: #2a3140;--text: #e8ecf4;--muted: #8b95a8;--accent: #ffb020;--accent-dim: #c48410;--good: #3dd68c;--danger: #ff6b6b;--chip: #1c2230;--radius: 10px;--font: "DM Sans", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden}button,input,select{font-family:inherit;color:inherit}#app{display:grid;grid-template-rows:52px 1fr;grid-template-columns:300px 1fr 280px;grid-template-areas:"top top top" "left stage right"}.topbar{grid-area:top;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#161a22,#12151c);z-index:5}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em}.brand .mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#ffb020,#ff6b3d);box-shadow:0 0 20px #ffb02055}.brand span.sub{font-weight:500;color:var(--muted);font-size:12px;margin-left:4px}.mode-toggle{display:flex;background:var(--chip);border-radius:999px;padding:3px;border:1px solid var(--border);margin-left:12px}.mode-toggle button{border:0;background:transparent;padding:6px 16px;border-radius:999px;cursor:pointer;color:var(--muted);font-weight:600;font-size:13px}.mode-toggle button.active{background:var(--accent);color:#1a1200}.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.btn{border:1px solid var(--border);background:var(--chip);color:var(--text);border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}.btn:hover{border-color:#3d4a60;background:#242a38}.btn:active{transform:translateY(1px)}.btn.primary{background:linear-gradient(180deg,#ffc14a,#e89510);border-color:#ffb020;color:#1a1200}.btn.danger{border-color:#633;color:#ffb0b0}.btn.ghost{background:transparent}.panel{background:var(--panel);border-right:1px solid var(--border);overflow:auto;padding:14px;backdrop-filter:blur(12px)}.panel.right{border-right:0;border-left:1px solid var(--border);grid-area:right}.panel.left{grid-area:left}.stage{grid-area:stage;position:relative;background:#0e1014;min-width:0;min-height:0}.stage canvas{display:block;width:100%!important;height:100%!important}.section{margin-bottom:18px}.section h3{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.stack{display:flex;flex-direction:column;gap:6px}.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:80px}.field label{font-size:11px;color:var(--muted)}.field input,.field select{background:var(--chip);border:1px solid var(--border);border-radius:7px;padding:6px 8px;font-size:13px}.field input[type=range]{padding:0}.list{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto}.list-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;border:1px solid transparent;background:var(--chip);cursor:pointer;font-size:13px}.list-item:hover{border-color:#3a4558}.list-item.selected{border-color:var(--accent);background:#2a2314}.list-item .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.preset-grid button{text-align:left;padding:8px 10px;font-size:12px;line-height:1.25}.preset-grid button small{display:block;color:var(--muted);font-weight:500;margin-top:2px}.stats{position:absolute;left:12px;bottom:12px;background:#0c0f14cc;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:11px;line-height:1.55;color:#c5cddc;pointer-events:none;backdrop-filter:blur(8px);z-index:2}.stats strong{color:var(--accent)}.sim-bar{position:absolute;left:50%;bottom:14px;transform:translate(-50%);display:flex;align-items:center;gap:8px;background:#12161ecc;border:1px solid var(--border);border-radius:999px;padding:8px 12px;backdrop-filter:blur(10px);z-index:3}.sim-bar input[type=range]{width:180px}.hint{position:absolute;top:12px;left:50%;transform:translate(-50%);background:#12161ecc;border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:12px;color:var(--muted);z-index:2;pointer-events:none}.hidden{display:none!important}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#2a3140;border-radius:8px}