:root{--bg: #f6f5f2;--panel: #ffffff;--text: #1c1b19;--muted: #6b6860;--rule: #dedbd3;--stripe: rgba(0, 0, 0, .03);--selected: rgba(80, 110, 255, .14);--accent: #4a5cf0;--accent-text: #ffffff;--kick: #e5533d;--snare: #d69a00;--hat: #1a9bc4;--openhat: #0f7a9c;--clap: #c2477e;--tomlow: #6a54d8;--tomhigh: #8f7cf0;--crash: #2e9c6a;--bass: #b8632a;--cell-off: #ecebe6;--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, monospace;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #131312;--panel: #1c1c1a;--text: #ecebe6;--muted: #9a978e;--rule: #34332f;--stripe: rgba(255, 255, 255, .03);--selected: rgba(120, 140, 255, .2);--accent: #7383ff;--accent-text: #0e0e0d;--kick: #ff6b52;--snare: #ffc233;--hat: #3cc8f0;--openhat: #7fdcf7;--clap: #f0679f;--tomlow: #8b78ff;--tomhigh: #b3a6ff;--crash: #4fd39a;--bass: #f09a5a;--cell-off: #2a2a27}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--font)}main{max-width:1100px;margin:0 auto;padding:32px 16px 64px}h1{margin:0 0 4px;font-size:28px;letter-spacing:-.02em}h2{margin:28px 0 4px;font-size:17px}.muted{color:var(--muted)}.small{font-size:13px}.mono{font-family:var(--font-mono)}button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:4px 10px;cursor:pointer}button:hover{border-color:var(--muted)}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600}button.active{box-shadow:0 0 0 3px var(--selected)}button.link{border:none;background:none;padding:0;color:var(--accent);text-decoration:underline}input[type=number]{width:80px;font:inherit;font-family:var(--font-mono);padding:3px 6px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);color:var(--text)}input[type=range]{accent-color:var(--accent)}.drop{margin:24px 0;padding:28px 16px;text-align:center;border:2px dashed var(--rule);border-radius:12px;background:var(--panel)}.drop.over{border-color:var(--accent)}.drop p{margin:0}.drop p+p{margin-top:4px}.capture{margin:16px auto 0;max-width:460px}.capture p{margin-bottom:10px}.inline.center{justify-content:center}.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--kick);animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.3}}@media(prefers-reduced-motion:reduce){.rec-dot{animation:none}}.status{margin-top:8px!important;font-size:13px;min-height:1.5em}.panel{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:16px;margin-bottom:12px}.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.field{display:flex;flex-direction:column;gap:6px}.field>label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.inline{display:flex;align-items:center;gap:6px}.slider{display:grid;grid-template-columns:12px 52px 1fr;align-items:center;gap:6px;font-size:13px}.dot{display:inline-block;width:10px;height:10px;border-radius:50%}.dot.kick{background:var(--kick)}.dot.snare{background:var(--snare)}.dot.hat{background:var(--hat)}.transport{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.vol{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-left:8px}.timeline{position:relative;overflow-x:auto;background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:6px 0}.timeline canvas{display:block;cursor:pointer}.playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--accent);pointer-events:none}.pattern-head{display:flex;align-items:baseline;gap:12px}.pattern-head h2 span{font-weight:400;font-size:14px}.grid{display:grid;grid-template-columns:80px repeat(16,minmax(0,1fr));gap:4px;background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:12px}.row-label{display:flex;align-items:center;gap:6px;font-size:13px}.cell{aspect-ratio:1;padding:0;border:none;border-radius:4px;background:var(--cell-off);min-width:0}.cell.beat{box-shadow:inset 0 0 0 1px var(--rule)}.cell[data-on=true].kick{background:color-mix(in srgb,var(--kick) calc(40% + var(--v) * 60%),var(--cell-off))}.cell[data-on=true].snare{background:color-mix(in srgb,var(--snare) calc(40% + var(--v) * 60%),var(--cell-off))}.cell[data-on=true].hat{background:color-mix(in srgb,var(--hat) calc(40% + var(--v) * 60%),var(--cell-off))}.cell.current{outline:2px solid var(--text);outline-offset:1px}@media(max-width:640px){.grid{grid-template-columns:52px repeat(16,minmax(0,1fr));gap:2px;padding:8px}.row-label{font-size:11px}.vol{margin-left:0}}header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.tabs{display:flex;gap:4px;padding:3px;background:var(--cell-off);border-radius:8px}.tabs button{border:none;background:transparent;color:var(--muted)}.tabs button[aria-selected=true]{background:var(--panel);color:var(--text);box-shadow:0 1px 2px #0000001f}kbd{font-family:var(--font-mono);font-size:11px;padding:0 4px;border:1px solid var(--rule);border-radius:4px;color:var(--muted)}select{font:inherit;padding:3px 6px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);color:var(--text);width:fit-content}.check{display:flex;align-items:center;gap:6px;font-size:14px}button:disabled{opacity:.45;cursor:default}button.rec.active{background:var(--kick);border-color:var(--kick);color:#fff}button.rec.active kbd,button.primary kbd{color:inherit;border-color:currentColor;opacity:.8}.loop-view{padding:8px 0}.loop-view canvas{display:block;width:100%}.pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.bass-keys{grid-template-columns:repeat(8,minmax(0,1fr))}.pad{--c: var(--accent);position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;min-height:84px;padding:10px;border:1px solid var(--rule);border-left:4px solid var(--c);border-radius:10px;background:var(--panel);text-align:left;touch-action:manipulation;-webkit-user-select:none;user-select:none}.bass-keys .pad{min-height:64px}.pad-name{font-weight:600;font-size:14px}.pad.hit{animation:pad-hit .16s ease-out}@keyframes pad-hit{0%{background:color-mix(in srgb,var(--c) 55%,var(--panel))}}@media(prefers-reduced-motion:reduce){.pad.hit{animation-duration:1ms}}.pad.kick{--c: var(--kick)}.pad.snare{--c: var(--snare)}.pad.hat{--c: var(--hat)}.pad.openhat{--c: var(--openhat)}.pad.clap{--c: var(--clap)}.pad.tomlow{--c: var(--tomlow)}.pad.tomhigh{--c: var(--tomhigh)}.pad.crash{--c: var(--crash)}.pad.bass{--c: var(--bass)}@media(max-width:640px){.bass-keys{grid-template-columns:repeat(4,minmax(0,1fr))}.pad{min-height:64px}}.engine{display:grid;gap:10px;margin:16px 0 0}.engine legend{padding:0 4px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.engine-option{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:14px;cursor:pointer}.engine-option input{margin-top:4px;accent-color:var(--accent)}.server-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;color:var(--muted)}.server-status .ok{color:var(--crash);font-weight:600}.server-status .off{color:var(--kick);font-weight:600}.server-status code{font-family:var(--font-mono);font-size:12px;padding:1px 5px;border-radius:4px;background:var(--cell-off);color:var(--text)}.server-status button{font-size:12px;padding:1px 8px}#sensSliders{display:grid;gap:6px}.slider{grid-template-columns:12px 64px 1fr}progress{width:min(320px,100%);height:6px;accent-color:var(--accent)}