:root{--bg:#0b1117;--bg2:#111a23;--panel:#141e29;--line:#243342;--text:#dce7f1;--muted:#8da3b7;--accent:#4fc3f7;--warn:#ffb74d;--bad:#ef6f6c;--good:#7fd18b;--violet:#b99cf0}
*{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:hidden}
.app{display:grid;grid-template-columns:minmax(0,1fr) 410px;height:100vh;height:100dvh}
.left{display:flex;flex-direction:column;min-width:0;min-height:0}
.stage{position:relative;flex:1;min-height:200px;background:#7fa7c7;overflow:hidden;touch-action:none}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;gap:5px;pointer-events:none;max-width:calc(100% - 16px)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{background:rgba(9,15,21,.74);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:2px 9px;font-size:12px;white-space:nowrap}
.chip.ok{color:var(--good)}.chip.warn{color:var(--warn);border-color:var(--warn)}.chip.bad{color:#fff;background:rgba(190,50,50,.85);border-color:var(--bad)}
.chip.blender{color:#ffb070;border-color:#c46b1f}
.read{background:rgba(9,15,21,.74);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 9px;font:12px/1.5 "JetBrains Mono",ui-monospace,Consolas,monospace;display:grid;grid-template-columns:auto auto;gap:0 14px}
.read span:nth-child(odd){color:var(--muted)}
.tools{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.tools .row{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.pip{position:absolute;right:8px;bottom:8px;border:1px solid rgba(255,255,255,.35);border-radius:6px;pointer-events:none;display:none}
.sticks{position:absolute;left:0;right:0;bottom:10px;display:none;justify-content:space-between;padding:0 14px;pointer-events:none}
.sticks.on{display:flex}
.stick{width:116px;height:116px;border-radius:50%;background:rgba(9,15,21,.5);border:2px solid rgba(255,255,255,.3);position:relative;pointer-events:auto;touch-action:none}
.stick i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(79,195,247,.75);border:2px solid #fff}
.stick b{position:absolute;font:600 10px/1 Inter,sans-serif;color:rgba(255,255,255,.75)}
.stick b.t{top:5px;left:50%;transform:translateX(-50%)}.stick b.l{left:5px;top:50%;transform:translateY(-50%)}
.banner{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);background:rgba(190,50,50,.9);color:#fff;padding:10px 18px;border-radius:10px;font-weight:600;display:none;text-align:center}
.graphs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px;background:var(--bg2);border-top:1px solid var(--line)}
.g{position:relative;height:170px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.g canvas{width:100%;flex:1;min-height:0;display:block}
.g h4{margin:0;padding:3px 7px 0;font:600 11px/1.2 Inter,sans-serif;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel{overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding:10px 12px 40px;min-height:0}
.panel h1{font-size:16px;margin:2px 0 4px}
.panel .sub{color:var(--muted);font-size:12px;margin-bottom:8px}
details{border:1px solid var(--line);border-radius:8px;margin:8px 0;background:var(--bg2)}
details>summary{cursor:pointer;padding:8px 10px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:"+";color:var(--muted)}details[open]>summary::after{content:"–"}
details>div.in{padding:2px 10px 10px}
button,select{font:inherit;color:var(--text);background:#1b2a39;border:1px solid #2f4357;border-radius:7px;padding:5px 10px;cursor:pointer;min-height:32px}
button:hover{background:#243a4f}button.on{background:var(--accent);color:#04202e;border-color:var(--accent)}button.danger{border-color:#8f3b3b}button.go{background:#1d5a3b;border-color:#2f8f5e}
button:disabled{opacity:.45;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
label.sl{display:grid;grid-template-columns:1fr auto;gap:0 8px;margin:6px 0;font-size:13px}
label.sl output{font:12px "JetBrains Mono",monospace;color:var(--accent)}
label.sl input[type=range]{grid-column:1/3;width:100%;margin:2px 0 0}
label.chk{display:flex;gap:6px;align-items:center;margin:4px 12px 4px 0;font-size:13px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.note{color:var(--muted);font-size:12px}
.exp{border-top:1px dashed var(--line);padding:8px 0}
.exp:first-child{border-top:0}
.exp h5{margin:0 0 2px;font-size:13px}
.res{font:12px/1.5 "JetBrains Mono",monospace;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font:600 11px Inter,sans-serif;margin-left:6px}
.pill.pass{background:#1d5a3b;color:#c9f5da}.pill.fail{background:#7a2d2d;color:#ffd6d6}
.sci{font-size:13px}.sci h3{font-size:13px;margin:12px 0 3px;color:var(--accent)}
.sci code,.eq{font:12px/1.55 "JetBrains Mono",monospace;background:#0c141c;border-radius:5px;padding:1px 5px}
.eq{display:block;padding:5px 8px;margin:4px 0;overflow-x:auto;white-space:pre}
.sci p,.sci li{margin:4px 0}
#stepcv{width:100%;height:150px;background:#0c141c;border:1px solid var(--line);border-radius:6px}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0b1117;color:var(--muted);z-index:5;text-align:center;padding:20px}
table.t{border-collapse:collapse;width:100%;font:12px "JetBrains Mono",monospace}
table.t td,table.t th{border-bottom:1px solid var(--line);padding:2px 4px;text-align:right}table.t th:first-child,table.t td:first-child{text-align:left}
/* embed (iframe) mode: fill the frame */
body.embed-mode .app{height:100vh;height:100dvh}
@media(max-width:900px){
  body{overflow:auto}
  .app{display:block;height:auto}
  body.embed-mode .app{height:auto}
  .stage{height:60vh;height:60dvh;min-height:300px;flex:none}
  .left{display:block}
  .graphs{grid-template-columns:1fr 1fr}
  .g{height:150px}
  .panel{border-left:0;overflow:visible}
  .read{font-size:11px;padding:4px 7px}
  .read span:nth-child(6),.read span:nth-child(5),.read span:nth-child(12),.read span:nth-child(11),.read span:nth-child(14),.read span:nth-child(13),.read span:nth-child(22),.read span:nth-child(21){display:none}
  .chip{font-size:11px;padding:1px 7px}
  .tools{left:6px;right:6px;top:6px;align-items:flex-start;gap:4px}
  .tools .row{flex-wrap:nowrap;justify-content:flex-start;gap:4px}
  .tools button,.tools select{min-height:26px;padding:2px 7px;font-size:12px}
  .hud{top:66px}
  .stick{width:104px;height:104px}
}