:root{--bg:#0b1520;--bg2:#101c2b;--panel:#142334;--line2:#2a3d57;--text:#e9f0fa;--soft:#b6c4d8;--muted:#8094ae;--accent:#4cc3ff;--ok:#4cd98a;--warn:#ffc43d;--bad:#ff6b57}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
#app{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:minmax(0,1fr);height:100vh;height:100dvh}
body.embed-mode #app{height:100vh;height:100dvh}
#stage{position:relative;min-width:0;min-height:0;background:#9cb4cc;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}#gl:focus-visible{outline:3px solid #4cc3ff;outline-offset:-3px}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lab{position:absolute;transform:translate(-50%,-100%);background:rgba(8,16,28,.72);border:1px solid rgba(120,180,230,.5);color:#eaf4ff;font:600 11px/1.2 inherit;padding:2px 6px;border-radius:7px;white-space:nowrap}
.lab:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:8px;background:rgba(160,210,255,.7)}
#hud{position:absolute;left:8px;top:8px;right:8px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none;align-items:flex-start}
.chip{background:rgba(8,14,26,.78);border:1px solid var(--line2);border-radius:10px;padding:3px 8px;backdrop-filter:blur(4px);min-width:70px}
.chip b{display:block;font-size:9.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.chip span{font:600 14px/1.2 "JetBrains Mono",ui-monospace,Consolas,monospace}
.chip.ok span{color:var(--ok)}.chip.warn span{color:var(--warn)}.chip.bad span{color:var(--bad)}
#tools{position:absolute;left:8px;bottom:8px;right:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
.btn{appearance:none;border:1px solid var(--line2);background:rgba(12,20,34,.88);color:var(--text);border-radius:9px;padding:7px 10px;font:600 12px/1 inherit;cursor:pointer;backdrop-filter:blur(4px)}
.btn:hover{border-color:var(--accent)}.btn:active{transform:translateY(1px)}
.btn:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.on{background:var(--accent);color:#03202e;border-color:var(--accent)}
.btn.big{padding:9px 12px;font-size:12.5px;width:100%;margin:3px 0;background:var(--panel)}
select{background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:8px;padding:6px;font:12px inherit}
#panel{background:var(--bg2);border-left:1px solid var(--line2);overflow:auto;padding:12px 14px 24px;min-height:0}
h1{font-size:16px;margin:0 0 2px;line-height:1.25}
.sub{color:var(--soft);font-size:12px;margin:0 0 8px}
h2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;margin:6px 0}
.row label{font-size:12px;color:var(--soft)}
.row output{font:600 12px "JetBrains Mono",ui-monospace,Consolas,monospace;color:var(--text)}
.row input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--accent);margin:0;height:22px}
.kv{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:12.5px}
.kv span:nth-child(odd){color:var(--soft)}
.kv span:nth-child(even){font:600 12.5px "JetBrains Mono",ui-monospace,Consolas,monospace;text-align:right}
canvas.chart{width:100%;height:auto;aspect-ratio:400/170;background:#0c1826;border:1px solid var(--line2);border-radius:8px;display:block}
.note{font-size:12px;color:var(--soft);background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:7px 9px;margin:6px 0}
.note.good{border-color:#2a6b4a}.note.bad{border-color:#7a3a30}
details{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;margin:10px 0}
summary{cursor:pointer;font-weight:600;font-size:13px}
details p,details li{font-size:12.5px;color:var(--soft)}
code,.eq{font:12px "JetBrains Mono",ui-monospace,Consolas,monospace;color:#cfe8ff}
.eq{display:block;background:#0c1826;border-radius:6px;padding:5px 8px;margin:4px 0;overflow-x:auto;white-space:nowrap}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:#0b1520;color:var(--soft);z-index:5;font-weight:600}
#lbar{height:4px;width:0;background:var(--accent);position:absolute;left:0;bottom:0}
@media (max-width:820px){
  #app{grid-template-columns:1fr;grid-template-rows:60vh auto;height:auto;min-height:100vh}
  body.embed-mode #app{height:100dvh;grid-template-rows:60% 40%}
  #stage{min-height:340px}#panel{border-left:0;border-top:1px solid var(--line2)}
  body.embed-mode #panel{overflow:auto}
  .lab.minor,.chip.minor{display:none}.chip{min-width:58px;padding:2px 6px}.chip span{font-size:12.5px}
}
@media (max-width:820px){.btn{padding:5px 7px;font-size:11px}#tools{gap:4px;left:6px;bottom:6px}}