:root{--bg:#1c1b1a;--body:#cfc8b8;--body-hi:#ddd7c9;--body-lo:#a9a291;--ink:#2b2925;--ink-soft:#5d584e;--deck:#34322f;--deck-hi:#46433f;--pad:#9b978e;--pad-hi:#b4b0a6;--accent:#e8562f;--accent-lo:#b33d1d;--led:#ff6a3d;--lcd:#1f2a12;--lcd-ink:#b6e04a;--lcd-dim:#6d8a2a;--cell:#26251f;--mono:"VT323", ui-monospace, monospace;--sans:"Archivo", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);margin:0}body{min-height:100svh;padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}button,select,input{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.machine{background:linear-gradient(180deg, var(--body-hi), var(--body) 30%, var(--body-lo));border-radius:14px;gap:16px;max-width:1180px;margin:0 auto;padding:18px;display:grid;box-shadow:inset 0 1px #fff6,inset 0 -2px #0003,0 24px 60px #000a}.sect{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-size:.68rem;font-weight:800}.top{grid-template-columns:auto 1fr;align-items:stretch;gap:18px;display:grid}.brand{flex-direction:column;justify-content:center;display:flex}.brand h1{letter-spacing:-.04em;color:var(--ink);margin:0;font-size:clamp(2rem,5vw,3rem);font-style:italic;font-weight:900;line-height:.9}.brand h1:after{content:"";background:linear-gradient(90deg, var(--accent) 0 40%, var(--ink) 40% 60%, var(--accent-lo) 60%);border-radius:2px;height:5px;margin-top:6px;display:block}.model{letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px;font-size:.72rem;font-weight:600}.lcd{font-family:var(--mono);color:var(--lcd-ink);background:radial-gradient(120% 140% at 30% 20%, #2a3818, var(--lcd));box-shadow:0 0 0 2px var(--body-lo), inset 0 0 22px #000a;text-shadow:0 0 6px #b6e04a55;border:3px solid #1a1916;border-radius:8px;gap:2px;min-width:0;padding:8px 14px;display:grid}.lrow{white-space:nowrap;align-items:baseline;gap:18px;font-size:1.35rem;line-height:1.05;display:flex;overflow:hidden}.lrow b{color:#d9ff6a;font-weight:400}.lcd .big{text-transform:uppercase;text-overflow:ellipsis;font-size:1.9rem;overflow:hidden}.lcd .dim,.lcd .status{color:var(--lcd-dim)}.lcd .status{margin-left:auto}.machine[data-playing=true] .lcd .status{color:var(--lcd-ink)}.transport{flex-wrap:wrap;align-items:end;gap:14px 22px;display:flex}.big-btn{letter-spacing:.08em;text-transform:uppercase;border:0;border-radius:8px;min-width:108px;height:52px;padding:0 18px;font-size:1rem;font-weight:800;transition:transform 50ms,box-shadow 50ms;box-shadow:0 4px #0005,inset 0 1px #fff4}.big-btn:active{transform:translateY(3px);box-shadow:0 1px #0005}.play{background:var(--deck);color:#eee}.play.on{background:var(--accent);color:#fff}.rnd{background:var(--ink);color:var(--lcd-ink);font-family:var(--mono);letter-spacing:.1em;font-size:1.5rem}.random{align-items:center;gap:10px;display:flex}.locks{grid-template-columns:repeat(2,auto);gap:2px 12px;font-size:.78rem;font-weight:600;display:grid}.lock{cursor:pointer;align-items:center;gap:5px;display:flex}.lock input{accent-color:var(--accent);margin:0}.patsel,.stepper{gap:4px;display:grid}.patsel label,.stepper label{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-size:.68rem;font-weight:800}.patbox,.stepbox{align-items:center;gap:4px;display:flex}.patbox button,.stepbox button,.export button,.padtools button,.tabs button{background:var(--deck);color:#eee;border:0;border-radius:6px;min-width:34px;height:34px;padding:0 10px;font-weight:600;box-shadow:0 2px #0006}.patbox button:active,.stepbox button:active,.export button:active,.padtools button:active{box-shadow:none;transform:translateY(1px)}.stepbox button:disabled{opacity:.4;cursor:default}select,.stepbox input{background:var(--lcd);height:34px;color:var(--lcd-ink);font-family:var(--mono);border:2px solid #1a1916;border-radius:6px;padding:0 8px;font-size:1.25rem}#pattern{min-width:150px}.stepbox input{text-align:center;appearance:textfield;width:3.6em}.stepbox input::-webkit-inner-spin-button{appearance:none}.unit{color:var(--ink-soft);font-size:.75rem;font-weight:600}.export{align-items:center;gap:6px;margin-left:auto;display:flex}.export button{background:var(--accent)}.params{background:#0000000d;border-radius:10px;flex-wrap:wrap;gap:14px 24px;padding:12px 14px;display:flex;box-shadow:inset 0 1px 3px #0002}.deck{grid-template-rows:auto auto;grid-template-columns:minmax(280px,1.25fr) 1fr;gap:16px;display:grid}.pads{background:var(--deck);border-radius:12px;grid-row:span 2;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px;display:grid;box-shadow:inset 0 2px 8px #0008}.padwrap{position:relative}.pad{aspect-ratio:1;background:linear-gradient(160deg, var(--pad-hi), var(--pad));text-align:left;width:100%;color:var(--ink);touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;border-radius:9px;grid-template-rows:auto 1fr auto;padding:8px;transition:transform 40ms,box-shadow 40ms,background 80ms;display:grid;box-shadow:0 4px #1f1e1c,inset 0 1px #fff5}.pad:active{transform:translateY(3px);box-shadow:0 1px #1f1e1c}.pad .num{font-family:var(--mono);color:var(--ink-soft);font-size:1rem}.pad .plabel{place-self:center;font-size:clamp(1.1rem,3vw,1.6rem);font-style:italic;font-weight:900}.pad .pname{white-space:nowrap;text-overflow:ellipsis;color:var(--ink-soft);font-size:.68rem;font-weight:600;overflow:hidden}.padwrap.sel .pad{outline:3px solid var(--accent);outline-offset:2px}.padwrap.lit .pad{background:linear-gradient(160deg, #ffd2b8, var(--led))}.padwrap.muted .pad{opacity:.45}.padwrap.loading .pad{animation:.9s ease-in-out infinite alternate loading}.padwrap.error .pad .pname{color:var(--accent-lo)}.padwrap.error .pad .pname:before{content:"⚠ "}@keyframes loading{to{filter:brightness(.8)}}.mute{color:#ddd;background:#6f6b63;border:0;border-radius:50%;width:24px;height:24px;font-size:.66rem;font-weight:800;position:absolute;top:6px;right:6px;box-shadow:0 1px #0006}.mute[aria-pressed=true]{background:var(--led);color:#fff;box-shadow:0 0 8px var(--led)}.panel{background:#00000012;border-radius:12px;padding:12px 14px;box-shadow:inset 0 1px 3px #0002}.panel h2{flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 8px;font-size:.9rem;font-weight:600;display:flex}.knobs{flex-wrap:wrap;gap:6px 14px;display:flex}.padtools{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.linkform{gap:6px;margin-top:8px;display:flex}.linkform input{background:var(--lcd);min-width:0;height:34px;color:var(--lcd-ink);font-family:var(--mono);border:2px solid #1a1916;border-radius:6px;flex:1;padding:0 8px;font-size:1.05rem}.linkform button{background:var(--accent);color:#fff;border:0;border-radius:6px;height:34px;padding:0 12px;font-weight:600}.padnote{color:var(--ink-soft);margin:8px 0 0;font-size:.7rem}#kit{min-width:150px}.knob{justify-items:center;width:66px;display:grid}.dial{cursor:ns-resize;touch-action:none;border-radius:50%;width:56px;height:56px}.dial svg{width:100%;height:100%;display:block}.dial .track{fill:none;stroke:#0003;stroke-width:4px;stroke-linecap:round}.dial .fill{fill:none;stroke:var(--accent);stroke-width:4px;stroke-linecap:round}.dial .cap{fill:var(--deck);stroke:#000;stroke-opacity:.4}.dial line{stroke:#f2efe7;stroke-width:3px;stroke-linecap:round}.klabel{letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-size:.68rem;font-weight:800}.kvalue{font-family:var(--mono);font-size:1.05rem;line-height:1}.seq{gap:8px;display:grid}.seqhead{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.tabs{gap:4px;display:flex}.tabs button{background:#6f6b63;height:28px}.clear{background:var(--deck);color:#eee;border:0;border-radius:6px;height:28px;padding:0 10px;font-weight:600;box-shadow:0 2px #0006}.clear:active{box-shadow:none;transform:translateY(1px)}.tabs button[aria-selected=true]{background:var(--deck);box-shadow:0 0 0 2px var(--accent)}.hint{color:var(--ink-soft);margin-left:auto;font-size:.72rem}.grid{background:var(--deck);border-radius:10px;gap:4px;padding:10px;display:grid;overflow-x:auto;box-shadow:inset 0 2px 8px #0008}.row{grid-template-columns:34px auto;align-items:center;gap:6px;display:grid}.row.muted{opacity:.4}.rlabel{color:#ddd8cc;font-size:.82rem;font-style:italic;font-weight:900}.cells{grid-template-columns:repeat(var(--cols), minmax(18px, 1fr));min-width:calc(var(--cols) * 21px);gap:3px;display:grid}.cell{background:var(--cell);border:0;border-radius:3px;height:24px;padding:0;box-shadow:inset 0 -2px #0006}.cell.quarter{background:#34322b}.cell.barstart{margin-left:0;box-shadow:inset 2px 0 #8a857a,inset 0 -2px #0006}.cell.ghost{background:#7a4a35}.cell.on{background:#d0623d}.cell.acc{background:#ff8b52;box-shadow:0 0 6px #ff8b5299}.cell.now{outline:2px solid var(--lcd-ink);outline-offset:-1px}#message{background:var(--ink);color:#ffd2b8;border-radius:8px;margin:0;padding:8px 12px;font-size:.9rem}footer{color:var(--ink-soft);flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font-size:.72rem;display:flex}@media (max-width:860px){.deck{grid-template-columns:1fr}.pads{grid-row:auto}.export{margin-left:0}}@media (max-width:560px){body{padding:8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left))}.machine{gap:12px;padding:12px}.top{grid-template-columns:1fr;gap:10px}.lrow{gap:12px;font-size:1.15rem}.lcd .big{font-size:1.5rem}.pads{gap:8px;padding:10px}.big-btn{min-width:92px;height:46px}.knob{width:58px}.knobs{gap:6px 4px}.hint{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}