:root{--bg: #0b1220;--panel: #111a2c;--panel-2: #17233a;--text: #e2e8f0;--muted: #94a3b8;--accent: #38bdf8;--warn: #f59e0b;--danger: #ef4444;--ok: #22c55e;--grid: #263247;--border: #22314d;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:13px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}#app{display:flex;height:100vh}#viewport{position:relative;flex:1;min-width:0;overflow:hidden}#viewport canvas.three{display:block;width:100%;height:100%}#panel{width:340px;flex:none;overflow-y:auto;background:var(--panel);border-left:1px solid var(--border);padding:8px 10px 40px}#toolbar{position:absolute;top:8px;left:8px;right:8px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;background:#0b1220c7;border:1px solid var(--border);border-radius:8px;padding:6px 8px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#toolbar label{color:var(--muted);display:inline-flex;gap:4px;align-items:center}button,select,input[type=number]{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font:inherit}button{cursor:pointer}button:hover{border-color:var(--accent)}button.primary{background:#0c4a6e;border-color:#0369a1}button.danger{background:#5f1d1d;border-color:#7f1d1d}#hud{position:absolute;top:56px;left:8px;display:grid;grid-template-columns:repeat(2,auto);gap:2px 14px;background:#0b1220c7;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-variant-numeric:tabular-nums}#hud .k{color:var(--muted)}#hud .v{text-align:right}#hud .v.warn{color:var(--warn)}#hud .v.bad{color:var(--danger)}#chart-wrap{position:absolute;left:8px;right:8px;bottom:8px;height:170px;background:#0b1220d1;border:1px solid var(--border);border-radius:8px;padding:4px 6px 6px;display:flex;flex-direction:column}#chart-series{display:flex;flex-wrap:wrap;gap:2px 10px;color:var(--muted);font-size:12px}#chart-series label{display:inline-flex;gap:3px;align-items:center;cursor:pointer}#chart{flex:1;width:100%;min-height:0}#log{position:absolute;right:8px;top:56px;width:260px;max-height:40%;overflow:hidden;display:flex;flex-direction:column;gap:3px;pointer-events:none}#log div{background:#0b1220d1;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:6px;padding:3px 8px;font-size:12px}#log div.warn{border-left-color:var(--warn)}#log div.bad{border-left-color:var(--danger)}details.section{border:1px solid var(--border);border-radius:8px;margin:8px 0;background:var(--panel-2)}details.section>summary{cursor:pointer;padding:7px 10px;font-weight:600;list-style:none}details.section>summary::-webkit-details-marker{display:none}details.section>summary:before{content:"▸ ";color:var(--muted)}details.section[open]>summary:before{content:"▾ "}.section-body{padding:2px 10px 10px}.row{display:grid;grid-template-columns:112px 1fr 58px;gap:6px;align-items:center;margin:5px 0}.row .lbl{color:var(--muted);font-size:12px}.row .val{text-align:right;font-variant-numeric:tabular-nums;font-size:12px}.row input[type=range]{width:100%;accent-color:var(--accent)}.row select{width:100%}.btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.hint{color:var(--muted);font-size:12px;margin:4px 0 6px}h1{font-size:15px;margin:6px 2px 2px}.sub{color:var(--muted);font-size:12px;margin:0 2px 6px}kbd{background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:0 4px;font-size:11px}@media (max-width: 800px){#app{flex-direction:column}#panel{width:100%;height:45vh;border-left:0;border-top:1px solid var(--border)}#viewport{height:55vh;flex:none}#chart-wrap{height:120px}#log{display:none}}#trim-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:18px;color:var(--text);background:#0b12208c;z-index:5}#trim-overlay[hidden]{display:none}#section-wrap{position:absolute;left:8px;bottom:186px;width:min(560px,calc(100% - 16px));height:330px;display:flex;flex-direction:column;background:#0b1220e0;border:1px solid var(--border);border-radius:8px;padding:4px 6px 6px;z-index:3}#section-wrap[hidden]{display:none}#section-controls{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--muted);font-size:12px}#section-controls input[type=range]{flex:1;min-width:120px;accent-color:#facc15}#section-controls button{padding:2px 6px;font-size:12px}#section{flex:1;width:100%;min-height:0}