:root{--bg:#0e1419;--bg2:#141c23;--panel:#161f27;--line:#27333d;--text:#e6edf2;--soft:#b6c2cb;--muted:#7f8e99;--acc:#f0a020;--acc2:#3fa9d6;--ok:#4cc38a;--warn:#ffb23f;--bad:#ff6a5c;--r:10px}
*{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}
body{overflow:hidden}
button{font:inherit;color:var(--text);background:#1d2933;border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer}
button:hover{background:#25333f}
button.on{background:var(--acc);color:#111;border-color:var(--acc);font-weight:600}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
#app{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:100vh;height:100dvh}
#stagecol{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);min-width:0;min-height:0}
#stage{position:relative;min-height:0;background:#7ea0b8;overflow:hidden}
#gl{position:absolute;left:0;top:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#status{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:5px;max-width:min(70%,420px);pointer-events:none}
#status .s{background:rgba(10,16,21,.78);border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:12.5px;backdrop-filter:blur(4px)}
#status .s.ok{border-color:#2f6a52}#status .s.warn{border-color:#a8742a;color:#ffd699}#status .s.bad{border-color:#a8453c;color:#ffb3aa}
#viewbar{position:absolute;right:10px;top:10px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:60%}
#viewbar button,#playbar button{padding:4px 9px;font-size:12.5px;background:rgba(14,20,25,.78);backdrop-filter:blur(4px)}
#viewbar button.on,#playbar button.on{background:var(--acc)}
#playbar{position:absolute;left:10px;bottom:10px;display:flex;gap:6px}
#fps{position:absolute;right:10px;bottom:8px;font:11px/1 'JetBrains Mono',ui-monospace,monospace;color:#fff;opacity:.65;text-shadow:0 1px 2px #000}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:#0e1419;color:var(--soft);z-index:5;transition:opacity .4s}
#loading.hide{opacity:0;pointer-events:none}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
#graphs{background:var(--bg2);border-top:1px solid var(--line);height:clamp(150px,32dvh,250px);max-height:250px;display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;gap:2px;padding:4px 6px 0;overflow-x:auto;flex:none;scrollbar-width:thin}
.tabs button{border-radius:7px 7px 0 0;border-bottom:none;padding:4px 9px;font-size:12px;white-space:nowrap;background:#1a2530}
.tabs button.on{background:var(--acc);color:#111}
#gc{flex:1;min-height:0;width:100%;min-width:0;display:block}
#panel{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;overflow-x:hidden;padding:0 12px 18px;scrollbar-width:thin;scrollbar-color:#33424e transparent;min-height:0}
#panel header{padding:12px 0 6px}
h1{font-size:17px;margin:0 0 3px;line-height:1.2}
.sub{margin:0;color:var(--soft);font-size:12.5px}
.chip{display:inline-block;background:#223039;border:1px solid var(--line);border-radius:20px;padding:0 8px;font-size:11px;color:var(--soft)}
.grp{border-top:1px solid var(--line);padding:8px 0}
.grp h2,.grp>summary{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 6px;cursor:pointer}
details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}
details>summary::before{content:'\25B8';display:inline-block;margin-right:6px;transition:transform .15s}
details[open]>summary::before{transform:rotate(90deg)}
.btnrow{display:flex;flex-wrap:wrap;gap:5px}
.btnrow button{padding:5px 8px;font-size:12.5px}
.modes{margin-top:8px}.modes button{flex:1}
.readouts{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}
.ro{background:#101820;border:1px solid var(--line);border-radius:8px;padding:4px 8px;min-width:0}
.ro b{display:block;font:600 14px 'JetBrains Mono',ui-monospace,monospace;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ro span{font-size:11px;color:var(--muted)}
.ro.warn b{color:var(--warn)}.ro.bad b{color:var(--bad)}.ro.ok b{color:var(--ok)}
.sl{display:grid;grid-template-columns:1fr auto;gap:0 8px;margin:6px 0}
.sl label{font-size:12.5px;color:var(--soft)}
.sl output{font:12px 'JetBrains Mono',ui-monospace,monospace;color:var(--acc)}
.sl input[type=range]{grid-column:1/3;width:100%;margin:2px 0 0;accent-color:var(--acc);height:22px}
.sel{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0;font-size:12.5px;color:var(--soft)}
.sel select{background:#1d2933;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:4px 6px;font:inherit}
.note{color:var(--muted);font-size:12px;margin:4px 0 8px}
table#checks{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:8px}
#checks td{border-top:1px solid var(--line);padding:5px 3px;vertical-align:top}
#checks .pass{color:var(--ok);font-weight:700}#checks .fail{color:var(--bad);font-weight:700}
#checks small{color:var(--muted);display:block}
.science{font-size:13px;color:var(--soft)}
.science h3{font-size:13px;color:var(--text);margin:12px 0 4px}
.science code{font:12px 'JetBrains Mono',ui-monospace,monospace;background:#101820;border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:#ffd699;white-space:normal}
.science p{margin:4px 0}.science ul{margin:4px 0;padding-left:18px}
.qrow{display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);padding-top:10px;font-size:12.5px;color:var(--soft)}
.qrow .sp{flex:1}#gpuinfo{font-size:11px;color:var(--muted);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctrlbtn{display:none}
#b-close{display:none;float:right;margin-top:2px}
#panel header{position:sticky;top:0;background:var(--panel);z-index:3}
/* narrow screens: stacked layout, controls toggle */
@media (max-width:639px){
  body{overflow-y:auto}
  #app{display:block;height:auto;min-height:100dvh}
  #stagecol{display:block}
  #stage{height:58vh;height:58dvh;min-height:300px}
  #graphs{height:230px;max-height:230px}
  #panel{border-left:none;border-top:1px solid var(--line);overflow:visible}
  .ctrlbtn{display:inline-block}
  body.panel-closed #panel{display:none}
  #viewbar{max-width:none;left:8px;right:8px;top:8px;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #viewbar button{white-space:nowrap;padding:3px 8px;font-size:12px}
  #status{max-width:86%;top:44px;left:8px}
  .readouts{grid-template-columns:1fr 1fr}
}
/* embed mode: fill the iframe (100vh/dvh); dock controls as a right column from 640 px */
body.embed-mode{height:100vh;height:100dvh}
body.embed-mode #app{height:100vh;height:100dvh}
@media (max-width:639px){
  body.embed-mode{overflow-y:auto}
  body.embed-mode #app{height:auto;min-height:100dvh}
  body.embed-mode #stage{height:62dvh;height:62vh;min-height:230px}
  body.embed-mode #graphs{height:170px;max-height:170px}
  body.embed-mode #b-close{display:block}
  body.embed-mode #panel{position:fixed;left:0;right:0;bottom:0;max-height:70dvh;max-height:70vh;overflow-y:auto;z-index:20;box-shadow:0 -10px 30px rgba(0,0,0,.55);border-top:2px solid var(--acc);border-radius:12px 12px 0 0}
}
@media (min-width:640px){
  body.embed-mode #app{grid-template-columns:minmax(0,1fr) 320px}
  body.panel-closed #app{grid-template-columns:minmax(0,1fr) 0}
  body.panel-closed #panel{display:none}
  .ctrlbtn{display:inline-block}
}