*{box-sizing:border-box}html,body{margin:0;min-height:100vh;min-height:100dvh;height:100%;background:#0a0a0c;color:#e8e8ec;font-family:Segoe UI,system-ui,sans-serif;font-size:13px}#app{display:flex;min-height:100vh;min-height:100dvh;height:100%;width:100%}#c{flex:1;min-width:0;height:100%;display:block;touch-action:none}#ui-root.panel{width:300px;padding:12px 14px;overflow-y:auto;border-left:1px solid #222;background:#101014}#ui-root h1{margin:0 0 10px;font-size:15px;font-weight:600;letter-spacing:.04em}.hint{margin:0 0 12px;font-size:11px;line-height:1.45;opacity:.78;color:#a8a8b8}.hint kbd{font-size:10px;padding:1px 5px;border-radius:3px;background:#222;border:1px solid #3a3a44}.row-check{grid-template-columns:auto 1fr;align-items:start}.row-check input{margin-top:2px}.row-check label{grid-column:auto}.toolbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.toolbar button{flex:1 1 auto;min-width:0}.row{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:6px;margin-bottom:8px}.row label{grid-column:1 / -1;opacity:.75;font-size:11px}.row input[type=range]{grid-column:1 / 3}.row .val{font-variant-numeric:tabular-nums;opacity:.65;font-size:11px;text-align:right}button,select{background:#1c1c22;color:#eee;border:1px solid #333;border-radius:4px;padding:6px 8px;cursor:pointer}select{width:100%}