:root{--bg:#07110d;--bg2:#0d1b15;--panel:#101f18;--line:#24402f;--text:#e9f4ec;--soft:#bcd3c3;--muted:#92ab9b;--accent:#5fd38d;--ok:#5fd38d;--warn:#ffc04d;--bad:#ff7a6b;--blue:#6fb7ff}
*{box-sizing:border-box}
:focus-visible{outline:2px solid #7fe3a8;outline-offset:2px}
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%}
#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:#06100b;overflow:hidden}
#gl,#cv,#cv2{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#hud{position:absolute;left:10px;top:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.chip{background:rgba(5,14,9,.84);border:1px solid var(--line);border-radius:10px;padding:4px 9px;min-width:74px}
.chip b{display:block;font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.chip span{font:600 15px/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:10px;bottom:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px}
.btn{appearance:none;background:#14291e;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:7px 12px;font:600 13px/1 inherit;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;min-height:34px}
.btn:hover{border-color:var(--accent)}.btn.on{background:#1d4a31;border-color:var(--accent)}
.btn.pri{background:#2a7d4f;border-color:#52c283}
#side{overflow:auto;background:var(--panel);border-left:1px solid var(--line);padding:12px 14px 20px}
h1{font-size:17px;margin:0 0 4px;line-height:1.25}
.sub{color:var(--soft);margin:0 0 10px;font-size:13px}
.grp{border-top:1px solid var(--line);padding-top:8px;margin-top:10px}
.grp h2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;margin:5px 0}
.row label{color:var(--soft);font-size:13px}
.row output{font:600 13px "JetBrains Mono",ui-monospace,Consolas,monospace;color:var(--text);text-align:right;min-width:64px}
.row input[type=range]{grid-column:1/3;width:100%;accent-color:#5fd38d;height:22px;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
table.rd{width:100%;border-collapse:collapse;font-size:13px}
table.rd td{padding:3px 0;border-bottom:1px solid #1a3024}
table.rd td:last-child{text-align:right;font:600 13px "JetBrains Mono",ui-monospace,Consolas,monospace}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
details.sci{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#0c1913}
details.sci summary{cursor:pointer;font-weight:700;color:var(--accent)}
details.sci p,details.sci li{font-size:13px;color:var(--soft);margin:6px 0}
details.sci code{background:#16291f;padding:1px 5px;border-radius:5px;font-size:12px;color:#d6f5e0}
.note{font-size:12px;color:var(--muted)}
.chk{font-size:12px;color:var(--soft);background:#0c1913;border:1px dashed var(--line);border-radius:8px;padding:6px 8px;margin-top:8px}
select,input[type=number]{background:#14291e;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px;font:inherit;max-width:100%}
.sw{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
@media (max-width:800px){
 #app{grid-template-columns:minmax(0,1fr);grid-template-rows:58% minmax(0,1fr)}
 #side{border-left:0;border-top:1px solid var(--line)}
 .chip{min-width:60px;padding:3px 7px}.chip span{font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#stage.two #cv{inset:0 0 auto 0;height:63%}
#stage.two #cv2{inset:auto 0 0 0;height:37%;border-top:1px solid var(--line)}
canvas.mini{display:block;width:100%;height:170px;border-radius:8px;border:1px solid var(--line);margin-top:6px}
#stage.three{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:58% 42%}
#stage.three canvas{position:relative;inset:auto;width:100%;height:100%}
#stage.three #cv{grid-column:1/3}
#stage.three #cv2,#stage.three #cv3{border-top:1px solid var(--line)}
#stage.three #cv3{border-left:1px solid var(--line)}
#stage.thr2{display:grid;grid-template-rows:60% 40%}
#stage.thr2 canvas{position:relative;inset:auto;width:100%;height:100%}
#stage.thr2 #cv2{border-top:1px solid var(--line)}
@media (max-width:800px){#stage.three{grid-template-rows:52% 48%}}