:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#13181b;--panel:#1a2024;--panel-2:#232b30;--border:#2d373d;--text:#dfe6ea;--dim:#8795a0;--accent:#7ee08a;--rec:#ff5c5c;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);flex-direction:column;display:flex;overflow:hidden}kbd{border:1px solid var(--border);background:var(--panel-2);border-bottom-width:2px;border-radius:4px;padding:1px 5px;font:11px ui-monospace,SFMono-Regular,Menlo,monospace}.toolbar{background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:nowrap;align-items:center;gap:14px;padding:10px 14px;display:flex}.brand{white-space:nowrap;letter-spacing:.2px;font-size:14px;font-weight:700}.brand span{color:var(--accent)}.group{align-items:center;gap:8px;display:flex}.group.right{margin-left:auto}.btn{border:1px solid var(--border);background:var(--panel-2);height:32px;color:var(--text);font:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:7px;align-items:center;gap:7px;padding:0 12px;font-weight:600;display:inline-flex}.btn:hover:not(:disabled){background:#2a343a;border-color:#46535b}.btn:disabled{opacity:.45;cursor:default}.btn.ghost{background:0 0}.btn.small{justify-self:start;height:26px;font-size:12px}.btn.active{border-color:var(--accent);color:var(--accent)}.btn.record .dot{background:var(--rec);border-radius:50%;width:10px;height:10px}.btn.record.recording{border-color:var(--rec);background:#ff5c5c24}.btn.record.recording .dot{border-radius:2px;animation:1s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.35}}.clock{min-width:84px;color:var(--accent);text-align:center;font-variant-numeric:tabular-nums;background:#0f1315;border-radius:6px;padding:5px 10px;font:600 15px ui-monospace,SFMono-Regular,Menlo,monospace}.field{color:var(--dim);align-items:center;gap:6px;display:flex}select{border:1px solid var(--border);background:var(--panel-2);max-width:180px;height:30px;color:var(--text);font:inherit;border-radius:6px;padding:0 8px}.meter{background:#0f1315;border-radius:4px;width:90px;height:8px;overflow:hidden}.meter div{background:linear-gradient(90deg,#4fb85c,#c9e05a 70%,#ff7a5c);width:0;height:100%;transition:width 60ms linear}.settings{z-index:10;border:1px solid var(--border);background:var(--panel);border-radius:10px;gap:14px;width:300px;padding:16px;display:grid;position:absolute;top:58px;right:14px;box-shadow:0 12px 40px #00000080}.settings[hidden]{display:none}.settings label{gap:6px;display:grid}.settings label>span{justify-content:space-between;font-weight:600;display:flex}.settings output{color:var(--accent);font-variant-numeric:tabular-nums}.settings small{color:var(--dim)}.settings .check{align-items:center;gap:8px;display:flex}.settings .check span{font-weight:500}.settings .check.stacked{gap:4px;display:grid}.settings .check .row{align-items:center;gap:8px;display:flex}.about{border:1px solid var(--border);background:var(--panel);width:min(320px,100vw - 32px);color:var(--text);text-align:center;border-radius:12px;padding:28px 24px 22px;box-shadow:0 12px 40px #00000080}.about::backdrop{background:#0000008c}.about .close{border-color:#0000;padding:0 8px;position:absolute;top:10px;right:10px}.about img{border:1px solid var(--border);border-radius:50%;margin:0 auto 14px;display:block}.about h2{margin:0 0 6px;font-size:16px}.about h2 span{color:var(--accent)}.about p{margin:0;font-size:14px}.about nav{justify-content:center;gap:8px;margin:16px 0;display:flex}.about nav a{border:1px solid var(--border);background:var(--panel-2);color:var(--text);border-radius:7px;padding:6px 12px;font-weight:600;text-decoration:none}.about nav a:hover{border-color:var(--accent);color:var(--accent)}.about .dim{color:var(--dim);font-size:13px}.about .dim a{color:var(--accent)}.legend{flex-wrap:wrap;gap:6px;display:flex}.legend[hidden]{display:none}.chip{border:1px solid var(--border);height:18px;color:var(--text);font:inherit;cursor:pointer;background:0 0;border-radius:9px;align-items:center;gap:5px;padding:0 7px 0 6px;font-size:11px;display:inline-flex}.chip:before{content:"";background:var(--c);border-radius:50%;width:8px;height:8px}.chip.absent{opacity:.5}.chip.off{color:var(--dim);text-decoration:line-through}.chip.off:before{box-shadow:inset 0 0 0 1.5px var(--c);background:0 0}input[type=range]{width:100%;accent-color:var(--accent)}.stage{flex:1;min-height:0;position:relative}#roll{touch-action:none;cursor:grab;width:100%;height:100%;display:block}.empty{pointer-events:none;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:15px;display:flex;position:absolute;inset:26px 0 0 72px}.stage.vertical .empty{inset:72px 0 0 44px}.empty[hidden]{display:none}.empty p{margin:4px;padding:0 16px}.empty .dim{color:var(--dim);font-size:13px}.statusbar{border-top:1px solid var(--border);background:var(--panel);color:var(--dim);flex-wrap:wrap;gap:6px 18px;padding:6px 14px;font-size:12px;display:flex}#status{color:var(--text)}.statusbar{align-items:center}.statusbar .hints{margin-left:auto}@media (width<=1440px){.btn.ghost:not(#orientation,#aboutBtn) .label{display:none}}@media (width<=1280px){.brand,.field>span{display:none}}@media (width<=1024px){#orientation .label{display:none}}@media (width<=900px){.toolbar{gap:8px}select{max-width:130px}.meter{width:50px}.btn .label{display:none}.btn.record .label{display:inline}.statusbar .hints{display:none}}@media (width<=760px){.toolbar .group.playback,.meter{display:none}}@media (width<=600px){.toolbar{gap:6px;padding:8px 10px}.group{gap:6px}.btn{padding:0 9px}.clock{display:none}select{max-width:96px}.btn.record .label{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}}.toolbar .group,.toolbar .field,.toolbar select{min-width:0}.toolbar .btn,.toolbar .clock,.toolbar .brand,.toolbar .meter{flex-shrink:0}