:root{--bg:#0d0f12;--panel:#101216db;--panel-border:#ffffff14;--text:#e6e8eb;--muted:#8a919b;--accent:#ff9a3c;--accent-2:#4fd1ff;--danger:#ff5c5c;--radius:10px;--font:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", "Fira Code", "Consolas", monospace}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);margin:0;font-size:13px;overflow:hidden}button,input,select{font:inherit;color:inherit}#app{width:100%;height:100%;position:relative}.viewport{touch-action:none;outline:none;display:block;position:absolute;inset:0}.topbar{border-bottom:1px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;background:linear-gradient(#08090beb,#08090b8c);align-items:center;gap:12px;height:56px;padding:0 16px;display:flex;position:absolute;top:0;left:0;right:0}.brand{flex-direction:column;min-width:120px;max-width:210px;line-height:1.1;display:flex}.brand .title{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap;font-size:12px;font-weight:700}.brand .subtitle{font-family:var(--mono);color:var(--muted);white-space:nowrap;text-overflow:ellipsis;max-width:200px;font-size:11px;overflow:hidden}.mech-switch{gap:6px;display:flex}.mech-switch button{border-radius:999px;padding:6px 12px}.spacer{flex:1}.topbar .group{align-items:center;gap:8px;display:flex}.topbar label.inline{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px}.topbar .audio input[type=range]{width:70px}.topbar .audio{border-left:1px solid var(--panel-border);padding-left:10px}.btn{border:1px solid var(--panel-border);color:var(--text);cursor:pointer;white-space:nowrap;background:#ffffff0f;border-radius:8px;padding:7px 12px;transition:background .12s,border-color .12s}.btn:hover{background:#ffffff1f;border-color:#fff3}.btn.active,.btn.primary{background:var(--accent);color:#1a1208;border-color:#0000;font-weight:600}.btn.small{padding:4px 8px;font-size:12px}.btn.icon{justify-content:center;align-items:center;width:34px;height:34px;padding:0;display:inline-flex}.btn.muted{color:var(--danger)}select.input{border:1px solid var(--panel-border);appearance:none;cursor:pointer;background:#ffffff0f;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-repeat:no-repeat;background-size:5px 5px;border-radius:8px;padding:6px 28px 6px 10px}select.input option{background:#16181c}input[type=range]{appearance:none;background:#ffffff24;border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border:2px solid #1a1208;border-radius:50%;width:14px;height:14px}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:2px solid #1a1208;border-radius:50%;width:14px;height:14px}input[type=color]{border:1px solid var(--panel-border);cursor:pointer;background:0 0;border-radius:6px;width:34px;height:26px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.sidepanel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9;flex-direction:column;width:340px;display:flex;position:absolute;top:68px;bottom:12px;left:12px;overflow:hidden}.sidepanel.collapsed{width:44px;bottom:auto}.sidepanel.collapsed .tabs,.sidepanel.collapsed .tab-content,.sidepanel.collapsed .panel-head .name{display:none}.sidepanel.collapsed .panel-head{justify-content:center;padding:8px 4px}.panel-head{border-bottom:1px solid var(--panel-border);justify-content:space-between;align-items:center;padding:8px 8px 8px 12px;display:flex}.panel-head .name{letter-spacing:.06em;text-transform:uppercase;font-size:12px;font-weight:700}.tabs{border-bottom:1px solid var(--panel-border);display:flex}.tabs button{color:var(--muted);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:10px 4px;font-size:12px}.tabs button:hover{color:var(--text)}.tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}.tab-content{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;flex:1;padding:10px 12px 16px;overflow-y:auto}.section{margin-bottom:12px}.section>.section-title{cursor:pointer;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid var(--panel-border);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;margin-bottom:4px;padding:6px 0;font-size:11px;display:flex}.section.collapsed>.section-body{display:none}.section-title .chev{transition:transform .15s}.section.collapsed .chev{transform:rotate(-90deg)}.row{align-items:center;gap:8px;margin:6px 0;display:flex}.row.wrap{flex-wrap:wrap}.row .label{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;flex:0 0 110px;font-size:12px;overflow:hidden}.row .value{text-align:right;font-family:var(--mono);color:var(--muted);flex:0 0 48px;font-size:11px}.row input[type=range]{flex:1;min-width:0}.row .grow{flex:1}.chip{font-family:var(--mono);color:var(--muted);background:#ffffff14;border-radius:4px;padding:2px 6px;font-size:10px}.card{border:1px solid var(--panel-border);cursor:pointer;background:#ffffff08;border-radius:8px;margin:6px 0;padding:10px 12px;transition:border-color .12s,background .12s}.card:hover{background:#ffffff12}.card.selected{border-color:var(--accent);background:#ff9a3c1a}.card .card-title{justify-content:space-between;align-items:center;font-weight:600;display:flex}.card .card-sub{color:var(--muted);margin-top:3px;font-size:12px;line-height:1.35}.toggle{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:5px 0;display:flex}.toggle .switch{background:#ffffff26;border-radius:8px;flex:none;width:30px;height:16px;transition:background .15s;position:relative}.toggle .switch:after{content:"";background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .15s;position:absolute;top:2px;left:2px}.toggle.on .switch{background:var(--accent)}.toggle.on .switch:after{transform:translate(14px)}.toggle.disabled{opacity:.4;pointer-events:none}.btn-row{flex-wrap:wrap;gap:6px;margin:6px 0;display:flex}.hint{color:var(--muted);margin:6px 0;font-size:11px;line-height:1.4}.stats{font-family:var(--mono);color:var(--muted);background:var(--panel);border:1px solid var(--panel-border);z-index:8;border-radius:8px;min-width:190px;padding:8px 10px;font-size:11px;position:absolute;bottom:12px;right:12px}.stats .ok{color:#7ee787}.stats .warn{color:var(--danger)}.stats.hidden{display:none}.toasts{z-index:20;pointer-events:none;flex-direction:column;gap:6px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.toast{border:1px solid var(--panel-border);border-left:3px solid var(--accent);background:#14161af2;border-radius:6px;padding:8px 14px;font-size:12px;animation:.2s ease-out toast-in}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.viewport-hint{color:var(--muted);z-index:5;pointer-events:none;white-space:nowrap;background:#08090b8c;border-radius:999px;padding:4px 12px;font-size:11px;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.viewport-hint span+span:before{content:"·";opacity:.6;margin:0 10px}.audio-pill{border:1px solid var(--panel-border);color:var(--muted);z-index:5;cursor:pointer;background:#08090bb3;border-radius:999px;padding:6px 12px;font-size:12px;position:absolute;top:68px;right:12px}.audio-pill.hidden{display:none}.loading{background:var(--bg);z-index:50;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:12px;display:flex;position:absolute;inset:0}.loading.hidden{display:none}.loading .bar{background:#ffffff1a;border-radius:2px;width:220px;height:3px;overflow:hidden}.loading .bar:after{content:"";background:var(--accent);width:40%;height:100%;animation:1s linear infinite load;display:block}@keyframes load{0%{transform:translate(-100%)}to{transform:translate(250%)}}