:root{--bg:#0d1117;--panel:#141a22;--panel2:#1a222c;--line:#2a3441;--text:#e6edf3;--soft:#aab6c3;--muted:#7d8b99;--accent:#f0a24b;--accent2:#4fd1c5;--bad:#ff6b6b;--good:#6fdc8c;--warn:#f5c84b;--r:10px}
*{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%}
body{overflow-x:hidden}
.app{display:grid;grid-template-columns:minmax(0,1fr) 400px;height:100vh;height:100dvh}
body.embed-mode .app{height:100vh;height:100dvh}
.stage{position:relative;min-height:0;background:#8fb4dc;overflow:hidden;touch-action:none}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:calc(100% - 190px)}
.pill{display:inline-flex;gap:6px;align-items:center;background:rgba(13,17,23,.8);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:600;backdrop-filter:blur(4px);width:fit-content;max-width:100%}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--muted);display:inline-block;flex:none}
.pill.go i{background:var(--accent)}.pill.warn i{background:var(--bad)}.pill.ok i{background:var(--good)}
.metrics{display:grid;grid-template-columns:repeat(4,auto);gap:2px 14px;background:rgba(13,17,23,.8);border:1px solid var(--line);border-radius:var(--r);padding:6px 12px;font:12px/1.35 "JetBrains Mono",ui-monospace,Consolas,monospace;width:fit-content}
.metrics b{display:block;font-size:15px;color:var(--text)}.metrics span{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.grades{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px;pointer-events:none;align-items:flex-end}
.gchip{display:flex;gap:8px;align-items:center;background:rgba(13,17,23,.82);border:1px solid var(--line);border-radius:8px;padding:3px 9px;font-size:12px;min-width:150px;justify-content:space-between}
.gchip b{font:700 12px "JetBrains Mono",ui-monospace,Consolas,monospace;padding:1px 7px;border-radius:5px;color:#111}
.g1{background:#6fdc8c}.g2{background:#b6e36a}.g3{background:#f5c84b}.g4{background:#f08a4b}.g5{background:#ff5d5d}
.blabel{position:absolute;transform:translate(-50%,-100%);pointer-events:none;font:700 12px "JetBrains Mono",ui-monospace,Consolas,monospace;background:rgba(13,17,23,.78);border:1px solid var(--line);border-radius:6px;padding:1px 7px;white-space:nowrap}
.alab{position:absolute;transform:translate(-50%,-50%);pointer-events:none;font:600 11px "JetBrains Mono",ui-monospace,Consolas,monospace;border-radius:6px;padding:1px 6px;white-space:nowrap;color:#111}
.log{position:absolute;left:10px;bottom:56px;display:flex;flex-direction:column;gap:4px;pointer-events:none;max-width:70%}
.log div{background:rgba(13,17,23,.82);border-left:3px solid var(--accent);padding:3px 10px;border-radius:4px;font-size:12px;animation:fade .3s}
@keyframes fade{from{opacity:0;transform:translateY(4px)}}
.bar{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;background:linear-gradient(transparent,rgba(13,17,23,.88) 60%)}
button,.btn{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 11px;cursor:pointer;min-height:34px}
button:hover{border-color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
button.primary{background:var(--accent);color:#1a0f08;border-color:var(--accent);font-weight:700}
button.on{border-color:var(--accent2);color:var(--accent2)}
button:disabled{opacity:.5;cursor:default}
.seg{display:inline-flex}.seg button{border-radius:0;margin-left:-1px}.seg button:first-child{border-radius:8px 0 0 8px;margin:0}.seg button:last-child{border-radius:0 8px 8px 0}
.panel{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;min-height:0;padding:0 14px 28px}
.head{position:sticky;top:0;background:var(--panel);padding:12px 0 8px;z-index:3;border-bottom:1px solid var(--line)}
h1{font-size:15px;line-height:1.3;margin:0 0 8px}
.tabs{display:flex;gap:4px}.tabs button{flex:1;padding:6px 2px;font-size:12.5px}
.tab{display:none;padding-top:12px}.tab.on{display:block}
h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button{font-size:12.5px;padding:5px 9px;min-height:32px;text-align:left}
.row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin:9px 0}
.row label{color:var(--soft)}.row output{font:12.5px "JetBrains Mono",ui-monospace,Consolas,monospace;color:var(--text)}
.row input[type=range]{grid-column:1/3;width:100%;accent-color:var(--accent);height:26px}
.sel{display:grid;grid-template-columns:96px 1fr;gap:6px 8px;align-items:center;margin:8px 0}
.sel label{color:var(--soft)}select{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;min-height:34px;width:100%}
.check{display:flex;gap:8px;align-items:center;margin:8px 0;color:var(--soft)}.check input{width:18px;height:18px;accent-color:var(--accent)}
canvas.g{width:100%;height:190px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);display:block;margin:6px 0 4px}
.cap{font-size:12px;color:var(--muted);margin:0 0 12px}
table{width:100%;border-collapse:collapse;font-size:12.5px;margin:8px 0}
th,td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}th:first-child,td:first-child{text-align:left}th{color:var(--muted);font-weight:600}
td.pass{color:var(--good)}td.fail{color:var(--bad)}
details{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;margin:10px 0}
summary{cursor:pointer;font-weight:600}
.sci p,.sci li{color:var(--soft);font-size:13px}.sci code,.eq{font:12.5px "JetBrains Mono",ui-monospace,Consolas,monospace;color:var(--accent2)}
.eq{display:block;background:#0f151c;border:1px solid var(--line);border-radius:6px;padding:6px 10px;margin:6px 0;overflow-x:auto;white-space:pre}
.safe{border-left:3px solid var(--accent2);background:var(--panel2);padding:8px 12px;border-radius:6px;color:var(--soft);font-size:12.5px;margin-top:14px}
.note{color:var(--muted);font-size:12px}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--soft);margin:6px 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.loading{position:absolute;inset:0;display:grid;place-items:center;background:#0d1117;color:var(--soft);z-index:5;transition:opacity .4s}
.loading.hide{opacity:0;pointer-events:none}
.err{color:var(--bad);padding:20px;text-align:center}
@media(max-width:860px){
  .app{grid-template-columns:1fr;grid-template-rows:64vh auto;height:auto;min-height:100vh}
  body.embed-mode .app{grid-template-rows:62% 38%;height:100vh;height:100dvh}
  .panel{border-left:0;border-top:1px solid var(--line);overflow:visible}
  body.embed-mode .panel{overflow-y:auto}
  .hud{max-width:calc(100% - 20px)}
  .grades{display:none}
  .metrics{grid-template-columns:repeat(4,auto);font-size:11px;gap:2px 10px;padding:5px 9px}
  .metrics b{font-size:13px}.metrics div:nth-child(2),.metrics div:nth-child(6){display:none}
  .bar{flex-wrap:nowrap;overflow-x:auto;gap:5px;padding:6px;scrollbar-width:none}
  .bar button{padding:5px 9px;min-height:34px;font-size:13px;white-space:nowrap;flex:none}
  .log{bottom:50px;max-width:92%}
  .pill{font-size:12.5px;padding:3px 10px}
}