:root{--deck:#1b1830;--panel:#262240;--edge:#3a3458;--ink:#f2eeff;--ink-muted:#a9a2c9;--pulse:#ff5c8a;--c-1:#ff5a3c;--c-2:#ff9f1c;--c-3:#ffd23f;--c-4:#5ce686;--c-5:#2ee6d6;--c-6:#4d9bff;--c-7:#9b6bff;--c-8:#e85cd6;--r-sm:8px;--r-md:14px;--r-lg:22px;--r-pill:999px;--shadow-soft:0 6px 20px #00000059;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--dur-pop:.18s;--dur-bloom:.12s;--space:4px;--pad:clamp(28px, 4.5vw, 80px);--gap:clamp(4px, .8vw, 12px);--font-display:"Unbounded", system-ui, sans-serif;--font-ui:"Space Grotesk", system-ui, sans-serif}@media (prefers-reduced-motion:reduce){:root{--dur-pop:0s;--dur-bloom:0s}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-ui);color:var(--ink);background:var(--deck);font-variant-numeric:tabular-nums;min-height:100dvh;font-weight:500;overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none}input,select{font:inherit;color:inherit;background:0 0;border:none}#root{flex-direction:column;min-height:100dvh;display:flex}.deck{width:100%;padding:calc(var(--space) * 4);flex-direction:column;flex:1;display:flex}:focus-visible{outline:2px solid var(--pulse);outline-offset:2px}:focus:not(:focus-visible){outline:none}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=599px){.deck{padding:calc(var(--space) * 2);padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}}@media (width>=600px) and (width<=899px){.deck{padding:calc(var(--space) * 4)}}@media (width>=900px) and (width<=1279px){.deck{padding:calc(var(--space) * 5)}}@media (width>=1280px){.deck{padding:calc(var(--space) * 6) calc(var(--space) * 8)}}.kit-selector{position:relative}.kit-select{appearance:none;background:var(--panel);color:var(--ink);border:1px solid var(--edge);border-radius:var(--r-pill);cursor:pointer;min-height:44px;transition:border-color .12s var(--ease-out);padding:8px 28px 8px 14px;font-size:.875rem;font-weight:600}.kit-select:hover,.kit-select:focus-visible{border-color:var(--ink-muted)}.kit-selector:after{content:"▾";color:var(--ink-muted);pointer-events:none;font-size:.75rem;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.share-btn{background:var(--panel);color:var(--ink);border:1px solid var(--edge);border-radius:var(--r-pill);min-height:44px;transition:all .12s var(--ease-out);padding:8px 18px;font-size:.875rem;font-weight:600}.share-btn:hover{border-color:var(--ink-muted)}.share-btn:active{transform:translateY(1px)}.share-btn--copied{background:var(--pulse);border-color:var(--pulse);color:#fff}.transport{justify-content:space-between;align-items:center;gap:calc(var(--space) * 3);background:var(--panel);border-radius:var(--r-lg);padding:calc(var(--space) * 3) calc(var(--space) * 4);box-shadow:var(--shadow-soft);flex-wrap:wrap;display:flex}.transport-left{align-items:center;display:flex}.wordmark{font-family:var(--font-display);color:var(--ink);-webkit-user-select:none;user-select:none;letter-spacing:-.02em;font-size:1.75rem;font-weight:700}.transport-center,.transport-right{align-items:center;gap:calc(var(--space) * 3);display:flex}.play-btn{border-radius:var(--r-pill);background:var(--edge);width:52px;height:44px;color:var(--ink);transition:all .15s var(--ease-out);justify-content:center;align-items:center;font-size:1.125rem;display:flex}.play-btn:hover{background:color-mix(in srgb, var(--edge) 80%, white)}.play-btn:active{transform:translateY(1px)}.play-btn--playing{background:var(--pulse);box-shadow:0 0 16px 0 color-mix(in srgb, var(--pulse) 50%, transparent)}.play-btn--playing:hover{background:color-mix(in srgb, var(--pulse) 85%, white)}.bpm-control{cursor:ns-resize;-webkit-user-select:none;user-select:none;border-radius:var(--r-sm);transition:background .12s var(--ease-out);flex-direction:column;justify-content:center;align-items:center;gap:0;min-height:44px;padding:4px 12px;display:flex}.bpm-control:hover{background:#ffffff0d}.bpm-label{color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.6875rem;font-weight:500;line-height:1}.bpm-value{font-variant-numeric:tabular-nums;text-align:center;min-width:3ch;font-size:1.25rem;font-weight:600;line-height:1.2}.swing-control{align-items:center;gap:calc(var(--space) * 2);display:flex}.swing-label{color:var(--ink-muted);text-transform:uppercase;font-size:.75rem;font-weight:500}.swing-slider{appearance:none;background:var(--edge);cursor:pointer;border-radius:2px;outline:none;width:64px;height:4px}.swing-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink);cursor:pointer;border-radius:50%;width:14px;height:14px;box-shadow:0 0 6px #0000004d}.swing-slider::-moz-range-thumb{background:var(--ink);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 0 6px #0000004d}.swing-value{font-variant-numeric:tabular-nums;color:var(--ink-muted);min-width:3ch;font-size:.75rem;font-weight:600}.fx-control{align-items:center;gap:calc(var(--space) * 1.5);display:flex}.fx-label{color:var(--ink-muted);text-transform:uppercase;letter-spacing:.03em;font-size:.6875rem;font-weight:500}.fx-slider{appearance:none;background:var(--edge);cursor:pointer;border-radius:2px;outline:none;width:52px;height:4px}.fx-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--pulse);cursor:pointer;border-radius:50%;width:12px;height:12px;box-shadow:0 0 6px #ff5c8a66}.fx-slider::-moz-range-thumb{background:var(--pulse);cursor:pointer;border:none;border-radius:50%;width:12px;height:12px;box-shadow:0 0 6px #ff5c8a66}.volume-control{align-items:center;gap:calc(var(--space) * 2);display:flex}.volume-label{color:var(--ink-muted);text-transform:uppercase;font-size:.75rem;font-weight:500}.volume-slider{appearance:none;background:var(--edge);cursor:pointer;border-radius:2px;outline:none;width:80px;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink);cursor:pointer;border-radius:50%;width:16px;height:16px;box-shadow:0 0 6px #0000004d}.volume-slider::-moz-range-thumb{background:var(--ink);cursor:pointer;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 0 6px #0000004d}@media (width<=599px){.transport{z-index:100;border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:calc(var(--space) * 3 + env(safe-area-inset-bottom,0px));justify-content:center;position:fixed;bottom:0;left:0;right:0}.transport-left{display:none}.transport-center,.transport-right{gap:calc(var(--space) * 2)}.volume-control,.swing-control,.fx-control{display:none}.bpm-value{font-size:1rem}}.step-cell{min-width:var(--pad);flex:1 1 var(--pad);aspect-ratio:1;border-radius:var(--r-md);border:2px solid var(--edge);background:color-mix(in srgb, var(--track-color) 8%, var(--panel));cursor:pointer;touch-action:manipulation;transition:transform var(--dur-pop) var(--ease-spring), box-shadow var(--dur-bloom) var(--ease-out), background var(--dur-pop) var(--ease-out), border-color var(--dur-pop) var(--ease-out);position:relative}.step-cell:active{box-shadow:none;transform:translateY(2px)}.step-cell--on{background:var(--track-color);border-color:var(--track-color);box-shadow:0 0 12px 0 color-mix(in srgb, var(--track-color) 55%, transparent)}.step-cell--accent{background:color-mix(in srgb, var(--track-color) 100%, white 15%);border-color:var(--track-color);box-shadow:0 0 14px 2px color-mix(in srgb, var(--track-color) 65%, transparent)}.step-cell--accent:after{content:"";border-radius:calc(var(--r-md) - 3px);pointer-events:none;border:2px solid #ffffff80;position:absolute;inset:3px}.step-cell--playhead{background:color-mix(in srgb, var(--track-color) 15%, var(--panel))}.step-cell--on.step-cell--playhead{background:var(--track-color);filter:brightness(1.15)}.step-cell--accent.step-cell--playhead{background:color-mix(in srgb, var(--track-color) 100%, white 15%);filter:brightness(1.2)}.step-cell--firing.step-cell--on,.step-cell--firing.step-cell--accent{box-shadow:0 0 22px 4px color-mix(in srgb, var(--track-color) 80%, transparent);transform:scale(1.12)}@media (prefers-reduced-motion:reduce){.step-cell--firing.step-cell--on,.step-cell--firing.step-cell--accent{box-shadow:0 0 14px 2px color-mix(in srgb, var(--track-color) 55%, transparent);transform:none}}.track-row-wrap{gap:calc(var(--gap) * .5);flex-direction:column;display:flex}.track-row--muted{opacity:.45}.track-row{align-items:center;gap:var(--gap);display:flex}.track-label{align-items:center;gap:calc(var(--space) * 2);flex-shrink:0;min-width:100px;display:flex}.track-dot-btn{transition:background .12s var(--ease-out);border-radius:50%;justify-content:center;align-items:center;padding:4px;display:flex}.track-dot-btn:hover{background:#ffffff14}.track-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px}.track-voice-select{appearance:none;color:var(--ink-muted);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:60px;transition:color .12s var(--ease-out);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23A9A2C9'/%3E%3C/svg%3E") right 2px center no-repeat;border:none;padding:2px 14px 2px 0;font-size:.8125rem;font-weight:600;overflow:hidden}.track-voice-select:hover,.track-voice-select:focus-visible{color:var(--ink)}.track-voice-select option{background:var(--panel);color:var(--ink)}.track-mute{text-transform:uppercase;border-radius:var(--r-sm);color:var(--ink-muted);border:1px solid var(--edge);transition:all .12s var(--ease-out);background:0 0;padding:2px 6px;font-size:.6875rem;font-weight:700;line-height:1}.track-mute:hover{border-color:var(--ink-muted)}.track-mute--active{background:var(--pulse);color:#fff;border-color:var(--pulse)}.track-steps{gap:var(--gap);flex:1;min-width:0;display:flex}.track-steps .step-cell:nth-child(4n+1):not(:first-child){margin-left:calc(var(--gap) * 1.5)}.track-detail{align-items:center;gap:calc(var(--space) * 4);padding:calc(var(--space) * 1.5) calc(var(--space) * 2);background:color-mix(in srgb, var(--track-color) 6%, var(--panel));border-radius:var(--r-sm);animation:detail-slide .15s var(--ease-out);margin-left:100px;display:flex}@keyframes detail-slide{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.track-detail-item{align-items:center;gap:calc(var(--space) * 1.5);display:flex}.track-detail-label{color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.6875rem;font-weight:600}.track-detail-value{font-variant-numeric:tabular-nums;color:var(--ink-muted);text-align:center;min-width:3ch;font-size:.75rem;font-weight:600}.pitch-value{min-width:3.5ch}.track-vol-slider{appearance:none;background:var(--edge);cursor:pointer;border-radius:2px;outline:none;width:64px;height:4px}.track-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink);cursor:pointer;border-radius:50%;width:14px;height:14px;box-shadow:0 0 4px #0000004d}.track-vol-slider::-moz-range-thumb{background:var(--ink);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 0 4px #0000004d}.pitch-btn{border-radius:var(--r-sm);background:var(--edge);width:24px;height:24px;color:var(--ink);transition:background .12s var(--ease-out);justify-content:center;align-items:center;font-size:.875rem;font-weight:700;display:flex}.pitch-btn:hover{background:color-mix(in srgb, var(--edge) 80%, white)}.pitch-btn:active{transform:translateY(1px)}@media (width<=599px){.track-label{min-width:auto}.track-voice-select{display:none}.track-detail{gap:calc(var(--space) * 2);flex-wrap:wrap;margin-left:0}}@media (prefers-reduced-motion:reduce){@keyframes detail-slide{0%{opacity:1;transform:none}to{opacity:1;transform:none}}}.grid-container{gap:var(--gap);padding:calc(var(--space) * 4) 0;flex-direction:column;flex:1;justify-content:center;display:flex}@media (width<=599px){.grid-container{-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--space) * 2);overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 90%,#0000 100%);mask-image:linear-gradient(90deg,#000 90%,#0000 100%)}}.wake-overlay{z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;background:#1b1830b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.wake-text{color:var(--ink);border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--edge);box-shadow:var(--shadow-soft);padding:16px 32px;font-size:1.125rem;font-weight:600;animation:2s ease-in-out infinite wake-pulse}@keyframes wake-pulse{0%,to{opacity:.8}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.wake-text{animation:none}}