*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:#0b1220;color:#e6edf7;font:14px/1.4 Inter,system-ui,sans-serif;overflow:hidden}
#app{display:grid;grid-template-columns:1fr 340px;height:100vh;height:100dvh}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.stage{position:relative;flex:1 1 auto;min-height:0;background:#0e1a2e}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.graphs{display:flex;gap:6px;height:30%;min-height:130px;max-height:220px;padding:6px;background:#0a1020;border-top:1px solid #1f2d4a}
.graphs .g{position:relative;flex:1;min-width:0;background:#0e1a2e;border-radius:6px}.graphs canvas{position:absolute;inset:0;width:100%;height:100%}
.side{overflow:auto;background:#101a2d;border-left:1px solid #1f2d4a;padding:10px;-webkit-overflow-scrolling:touch}
h1{font-size:16px;margin:0 0 6px}.sub{color:#8fa3c4;font-size:12px;margin:0 0 8px}
.bar{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
button,.btn{background:#1b2c4b;color:#e6edf7;border:1px solid #2d4470;border-radius:6px;padding:7px 10px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:#25406d}button.on{background:#2f6fd6;border-color:#4d8cf0}
.sw{background:#0f5132;border-color:#198754}
details{background:#0e1a2e;border:1px solid #1f2d4a;border-radius:6px;margin:8px 0;padding:6px 8px}summary{cursor:pointer;font-weight:600}
.row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;margin:6px 0}.row label{font-size:12px;color:#b9c8e2}.row output{font:12px 'JetBrains Mono',monospace;color:#7cc4ff}
.row input{grid-column:1/3;width:100%;accent-color:#4d8cf0}
.ro{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:12px}.ro span:nth-child(even){font:12px 'JetBrains Mono',monospace;color:#7cc4ff;text-align:right}
.chk{font-size:12px;padding:6px 8px;border-radius:6px;background:#10261c;border:1px solid #1e6b46;margin-top:6px;white-space:pre-line}.chk.bad{background:#2b1414;border-color:#8a2c2c}
.sci{font-size:12.5px;color:#c8d6ee}.sci code{color:#ffd479}.sci p{margin:5px 0}
.hint{position:absolute;left:8px;bottom:6px;font-size:11px;color:#8fa3c4;pointer-events:none}
@media(max-width:800px){body{overflow:auto}#app{display:block;height:auto}.main{display:block}.stage{height:60vh;height:60dvh}.graphs{height:150px}.side{border-left:0}}
body.embed-mode #app{height:100vh;height:100dvh}
@media(max-width:800px){body.embed-mode #app{height:auto}}