:root{--bg:#0d1a2e;--panel:#14243d;--panel2:#1a2e4d;--line:rgba(160,200,240,.22);--text:#f1f6fc;--soft:#c5d6ea;--muted:#9bb2cd;--gold:#ffc94a;--green:#8fdc7a;--blue:#6cc4f0;--red:#ff8d6b;--r:14px}
*{box-sizing:border-box}
html,body{margin:0;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) 380px;height:100vh;height:100dvh}
body.embed-mode #app{height:100vh;height:100dvh}
#stagewrap{position:relative;min-height:0;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#side{overflow:auto;background:var(--panel);border-left:1px solid var(--line);padding:12px 14px 40px;scrollbar-width:thin}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,summary:focus-visible,#gl:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hud{position:absolute;z-index:3;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}.hud>*{pointer-events:auto}
#chips{left:10px;top:10px;max-width:calc(100% - 200px)}
.chip{background:rgba(13,26,46,.78);border:1px solid var(--line);border-radius:12px;padding:5px 10px;backdrop-filter:blur(6px);min-width:78px}
.chip small{display:block;color:var(--muted);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.chip b{font:700 16px/1.2 "JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
#ctl{right:10px;top:10px}
#views{left:10px;bottom:10px}
#msg{left:50%;bottom:58px;transform:translateX(-50%);max-width:70%;text-align:center;background:rgba(13,26,46,.88);border:1px solid var(--line);border-radius:12px;padding:6px 12px;font-size:13px;display:none}
.b{background:rgba(13,26,46,.82);border:1px solid var(--line);border-radius:10px;padding:7px 12px;min-height:38px;font-weight:600}
.b[aria-pressed=true]{border-color:var(--gold);background:#2b3f66;box-shadow:0 0 0 2px rgba(255,201,74,.25)}
.b:hover{background:#25395c}
h2{font:800 11.5px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:16px 0 6px}
h2:first-child{margin-top:2px}
.row{display:grid;grid-template-columns:104px minmax(0,1fr) 64px;gap:8px;align-items:center;margin:6px 0 0}
.row label{color:var(--soft);font-size:13px}
.row output{font:600 12.5px "JetBrains Mono",monospace;text-align:right;color:var(--text)}
input[type=range]{width:100%;accent-color:var(--gold);height:26px;min-width:0}
.hint{font-size:11.5px;color:var(--muted);margin:1px 0 4px 0;line-height:1.35}
.pre{display:flex;flex-wrap:wrap;gap:6px}
table.ro{width:100%;border-collapse:collapse;font-size:12.5px}
table.ro td{padding:3px 0;border-bottom:1px solid rgba(160,200,240,.1)}
table.ro td:last-child{text-align:right;font:600 12.5px "JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
table.ro td:first-child{color:var(--soft)}
.good{color:var(--green)}.bad{color:var(--red)}
canvas.g{width:100%;height:140px;display:block;background:#0d1a2e;border:1px solid var(--line);border-radius:10px}
details{margin:8px 0;border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--panel2)}
summary{cursor:pointer;font-weight:700}
details p,details li{font-size:12.5px;color:var(--soft)}
code{font:12px "JetBrains Mono",monospace;color:#ffe29a}
.chk{font-size:12.5px;margin:3px 0}.chk b{font-family:"JetBrains Mono",monospace}
@media(max-width:860px){
 #app{display:block;height:auto}
 #stagewrap{height:60vh;height:60dvh}
 body.embed-mode #app{height:auto}
 #side{border-left:0;border-top:1px solid var(--line);overflow:visible}
 .chip{min-width:62px;padding:4px 8px}.chip b{font-size:14px}
 #chips{max-width:calc(100% - 20px);top:52px}
 .row{grid-template-columns:96px minmax(0,1fr) 58px}
 #msg{max-width:92%}
}