:root{--bg-app:#131417;--bg-panel:#1a1b1f;--bg-panel-raised:#212227;--bg-well:#101114;--step-off:#2a2b31;--step-off-top:#313239;--border-subtle:#303136;--border-strong:#3c3d44;--text-primary:#ebe9e4;--text-secondary:#8f9099;--text-dim:#82848d;--accent:#ff7a1a;--accent-strong:#ffa14d;--accent-dim:#7a4118;--accent-glow:#ff7a1a80;--roll:#ffd35c;--danger:#ff5a52;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;height:100%}body{background:var(--bg-app);color:var(--text-primary);-webkit-user-select:none;user-select:none;touch-action:manipulation;margin:0;font-family:-apple-system,system-ui,sans-serif;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:0}button:disabled{opacity:.4;pointer-events:none}.label{text-transform:uppercase;letter-spacing:.045em;font-weight:650;font-stretch:75%}.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-family:ui-monospace,SF Mono,Menlo,monospace}#app{width:100vw;height:100dvh;padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 10px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 10px);flex-direction:column;gap:8px;display:flex}.header{flex:none;justify-content:space-between;align-items:center;height:44px;display:flex}.wordmark{align-items:center;gap:8px;display:flex}.wordmark svg{width:22px;height:22px;color:var(--accent)}.wordmark span{color:var(--text-primary);font-size:1.0625rem}.header-actions{gap:8px;display:flex}.icon-btn[aria-pressed=true]{color:var(--accent);border-color:var(--accent-dim);background:var(--bg-panel-raised)}.icon-btn{background:var(--bg-panel);border:1px solid var(--border-subtle);width:44px;height:44px;color:var(--text-secondary);border-radius:10px;justify-content:center;align-items:center;transition:background 80ms ease-out,color 80ms ease-out;display:flex}.icon-btn:active{background:var(--bg-panel-raised);color:var(--text-primary)}.icon-btn svg{width:19px;height:19px}.transport{flex:none;align-items:stretch;gap:8px;height:58px;display:flex}.play-btn{background:linear-gradient(180deg, var(--accent-strong), var(--accent));color:#1a0e02;width:74px;height:58px;box-shadow:0 2px 0 var(--accent-dim), 0 4px 10px #ff7a1a40;border-radius:12px;flex:none;justify-content:center;align-items:center;transition:transform 70ms ease-out,box-shadow 70ms ease-out;display:flex}.play-btn svg{width:24px;height:24px}.play-btn:active{box-shadow:0 0 0 var(--accent-dim), 0 2px 6px #ff7a1a33;transform:translateY(2px)}.play-btn.playing{background:linear-gradient(#ff8a33,#e8630a)}.stat-block{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:12px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1px;display:flex;position:relative}.stat-block .stat-label{color:var(--text-dim);font-size:.5938rem}.stat-block .stat-value{color:var(--text-primary);font-size:1.1875rem}.value-display{background:0 0;border:none;border-radius:4px}.value-display:active{background:var(--bg-panel-raised)}.value-input{background:var(--bg-well);border:1px solid var(--accent-dim);text-align:center;-moz-appearance:textfield;border-radius:4px;width:56px}.value-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.value-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stat-block.stepper{flex-direction:row;gap:0;padding:0;overflow:hidden}.stat-block.stepper .stepper-mid{flex-direction:column;flex:1;justify-content:center;align-items:center;height:100%;display:flex}.stepper-btn{width:34px;height:100%;color:var(--text-secondary);justify-content:center;align-items:center;font-size:1.125rem;display:flex}.stepper-btn svg{flex:none;width:18px;height:18px}.stepper-btn:active{background:var(--bg-panel-raised);color:var(--accent)}.pattern-row{flex:none;align-items:center;gap:6px;height:44px;display:flex}.pattern-tab{background:var(--bg-panel);border:1px solid var(--border-subtle);height:44px;color:var(--text-secondary);border-radius:10px;flex:1;justify-content:center;align-items:center;font-size:.9375rem;transition:background 80ms ease-out,color 80ms ease-out,border-color 80ms ease-out;display:flex;position:relative}.pattern-tab.active{background:var(--bg-panel-raised);color:var(--accent);border-color:var(--accent-dim)}.pattern-tab.queued:after{content:"";background:var(--roll);border-radius:50%;width:6px;height:6px;animation:.6s ease-in-out infinite pulse-dot;position:absolute;top:5px;right:5px}.pattern-tab:active{background:var(--bg-panel-raised)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.25}}.chain-btn{background:var(--bg-panel);border:1px solid var(--border-subtle);width:44px;height:44px;color:var(--text-secondary);border-radius:10px;flex:none;justify-content:center;align-items:center;display:flex}.chain-btn.active{color:var(--accent);border-color:var(--accent-dim)}.chain-btn svg{width:18px;height:18px}.kit-row{flex:none;gap:6px;height:44px;display:flex}.kit-pill{background:var(--bg-panel);border:1px solid var(--border-subtle);color:var(--text-secondary);text-align:center;border-radius:9px;flex:1;justify-content:center;align-items:center;padding:0 4px;font-size:.7188rem;display:flex}.kit-pill.active{color:var(--bg-app);background:var(--accent);border-color:var(--accent)}.grid{flex-direction:column;flex:1;gap:6px;min-height:0;display:flex}.beat-ruler{flex:none;align-items:center;gap:6px;height:14px;display:flex}.beat-ruler-spacer{flex:none;width:34px}.beat-ruler-group{color:var(--text-dim);justify-content:flex-start;align-items:center;gap:0;font-size:.6875rem}.voice-row{flex:1;align-items:stretch;gap:6px;min-height:0;display:flex}.voice-label{background:var(--bg-panel);border:1px solid var(--border-subtle);width:34px;color:var(--text-secondary);writing-mode:vertical-rl;text-orientation:mixed;border-radius:8px;flex:none;justify-content:center;align-items:center;font-size:.5938rem;transition:color 80ms,border-color 80ms;display:flex;transform:rotate(180deg)}.voice-label:active{color:var(--accent);border-color:var(--accent-dim)}.voice-label.editing{color:var(--accent);border-color:var(--accent-dim);background:var(--bg-panel-raised)}.steps,.step-group{flex:1;gap:3px;min-width:0;display:flex}.step{background:linear-gradient(180deg, var(--step-off-top), var(--step-off));border:1px solid var(--border-subtle);border-radius:6px;flex:1;min-width:0;transition:transform 60ms ease-out,box-shadow 60ms ease-out,background 60ms ease-out;position:relative;box-shadow:inset 0 -2px #00000059}.step:active{transform:translateY(1px)scaleY(.96)}.step.beat-marker:before{content:"";background:var(--text-dim);border-radius:50%;width:2px;height:2px;position:absolute;top:3px;left:50%;transform:translate(-50%)}.step.on{background:linear-gradient(#c9550f,#a8460c);border-color:#d9660f;box-shadow:inset 0 -2px #0000004d}.step.accent{background:linear-gradient(180deg, var(--accent-strong), var(--accent));border-color:var(--accent-strong);box-shadow:0 0 8px var(--accent-glow), inset 0 -2px 0 #00000040}.step.roll{background:linear-gradient(180deg, var(--step-off-top), var(--step-off));border-color:var(--roll);background-image:repeating-linear-gradient(45deg, var(--roll) 0, var(--roll) 2px, transparent 2px, transparent 6px);background-blend-mode:overlay}.step.playhead{outline:2px solid var(--text-primary);outline-offset:-2px}.step.playhead.on,.step.playhead.accent{outline-color:#fff}.sheet-scrim{opacity:0;pointer-events:none;z-index:20;background:#05050699;transition:opacity .15s ease-out;position:fixed;inset:0}.sheet-scrim.open{opacity:1;pointer-events:auto}.sheet{background:var(--bg-panel);border-top:1px solid var(--border-strong);padding:14px 16px calc(var(--safe-b) + 16px);z-index:21;border-radius:16px 16px 0 0;max-height:80dvh;transition:transform .2s cubic-bezier(.2,.8,.2,1);position:fixed;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(100%)}.sheet.open{transform:translateY(0)}.sheet-handle{background:var(--border-strong);border-radius:2px;width:36px;height:4px;margin:0 auto 14px}.sheet-title{color:var(--text-dim);margin-bottom:10px;font-size:.8125rem}.sheet h2{color:var(--text-primary);margin:18px 0 10px;font-size:.9375rem}.sheet h2:first-of-type{margin-top:0}.field-row{gap:8px;margin-bottom:10px;display:flex}.text-input{background:var(--bg-well);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:9px;flex:1;padding:11px 12px;font-size:.9375rem}.btn{background:var(--bg-panel-raised);border:1px solid var(--border-subtle);height:44px;color:var(--text-primary);border-radius:9px;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:.875rem;display:flex}.btn svg{flex:none;width:17px;height:17px}.btn:active{background:var(--border-subtle)}.btn.primary{background:var(--accent);color:#1a0e02;border-color:var(--accent);font-weight:600}.btn.primary:active{background:var(--accent-strong)}.btn.full{width:100%}.saves-list{flex-direction:column;gap:6px;max-height:160px;display:flex;overflow-y:auto}.saves-list.no-cap{max-height:none;overflow-y:visible}.save-row{background:var(--bg-well);border:1px solid var(--border-subtle);border-radius:9px;align-items:center;gap:8px;padding:10px 12px;display:flex}.save-row.full{text-align:left;width:100%;color:var(--text-primary)}.save-row.full.active-preset{border-color:var(--accent);background:var(--bg-panel-raised)}.save-row.full.active-preset .save-name{color:var(--accent)}.save-row.full.active-preset:after{content:"";background:var(--accent);border-radius:50%;flex:none;width:8px;height:8px;margin-left:auto}.save-row.full svg{width:17px;height:17px;color:var(--text-secondary);flex:none}.save-row .save-name{flex:1;font-size:.875rem}.save-row .save-date{color:var(--text-dim);font-size:.6875rem}.save-row button{width:44px;height:44px;color:var(--text-secondary);flex:none;justify-content:center;align-items:center;display:flex}.save-row button svg{width:18px;height:18px}.save-row button:active{color:var(--danger)}.empty-note{color:var(--text-dim);padding:8px 0;font-size:.8125rem}.bars-choice{gap:8px;margin-bottom:12px;display:flex}.bars-choice button{background:var(--bg-well);border:1px solid var(--border-subtle);height:44px;color:var(--text-secondary);border-radius:9px;flex:1}.bars-choice button.active{background:var(--accent);border-color:var(--accent);color:#1a0e02;font-weight:600}.about-text{color:var(--text-secondary);font-size:.8125rem;line-height:1.5}.about-text a{color:var(--accent)}.param-row{flex-direction:column;gap:6px;margin-bottom:16px;display:flex}.param-row .param-head{color:var(--text-secondary);justify-content:space-between;font-size:.7812rem;display:flex}.param-row input[type=range]{-webkit-appearance:none;background:0 0;width:100%;height:30px}.param-row input[type=range]::-webkit-slider-runnable-track{background:var(--bg-well);border:1px solid var(--border-subtle);border-radius:3px;height:6px}.param-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:2px solid #1a0e02;border-radius:50%;width:22px;height:22px;margin-top:-9px;box-shadow:0 1px 3px #0006}.first-run{background:var(--bg-app);z-index:30;padding:32px calc(var(--safe-r) + 24px) calc(var(--safe-b) + 32px) calc(var(--safe-l) + 24px);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:fixed;inset:0}.first-run svg.mark{width:56px;height:56px;color:var(--accent)}.first-run h1{margin:0;font-size:1.375rem}.first-run p{color:var(--text-secondary);max-width:320px;margin:0;font-size:.9062rem;line-height:1.5}.first-run .steps-hint{background:var(--bg-panel);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:12px;align-items:center;gap:8px;padding:12px 16px;font-size:.8438rem;display:flex}.first-run .steps-hint svg{width:18px;height:18px;color:var(--accent);flex:none}.toast{left:50%;bottom:calc(var(--safe-b) + 90px);background:var(--bg-panel-raised);border:1px solid var(--border-strong);color:var(--text-primary);opacity:0;pointer-events:none;z-index:40;text-align:center;border-radius:10px;max-width:calc(100vw - 48px);padding:10px 16px;font-size:.8438rem;transition:opacity .16s ease-out,transform .16s ease-out;position:fixed;transform:translate(-50%,12px)}.toast.show{opacity:1;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}