@font-face{font-family:Outfit;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/outfit-latin.woff2)format("woff2")}@font-face{font-family:DM Serif Display;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-latin.woff2)format("woff2")}:root{--color-scheme:dark;--color-bg:#111214;--color-stage:#1d1f24;--color-surface:#1a1b1f;--color-surface-hover:#24262b;--color-border:#2e3036;--color-text:#e8e8ea;--color-text-muted:#9a9ca3;--color-accent:#ffa62b;--color-playback:#ffd75e;--color-accent-strong:#f28b0c;--color-good:#3ddc84;--color-warn:#ffb547;--color-bad:#ff6b6b;--color-record:#e5484d;--space-sm:8px;--space-md:16px;--space-lg:24px;--radius-md:8px;--font-system:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-body:"Outfit", var(--font-system);--font-display:"DM Serif Display", Georgia, "Times New Roman", serif}:root[data-theme=light]{--color-scheme:light;--color-bg:#f6f1e8;--color-stage:#ebe3d6;--color-surface:#fffdf9;--color-surface-hover:#f3ece1;--color-border:#e0d6c6;--color-text:#1b1c1f;--color-text-muted:#5f6168;--color-accent:#c46a00;--color-playback:#b8900f;--color-accent-strong:#e07b00;--color-good:#1a7f45;--color-warn:#a85d00;--color-bad:#c0392b;--color-record:#d1343a}*{box-sizing:border-box}html,body{height:100%;margin:0}body{overscroll-behavior:none;touch-action:manipulation;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;background:var(--color-bg);height:100dvh;color:var(--color-text);font-family:var(--font-body);color-scheme:var(--color-scheme);flex-direction:column;display:flex;overflow:hidden}button{transition:transform 80ms,background-color .15s,color .15s,border-color .15s,box-shadow .15s,opacity .15s}button:active:not(:disabled){transform:scale(.96)}@media (prefers-reduced-motion:reduce){button{transition:none}button:active:not(:disabled){transform:none}}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.topbar{align-items:center;gap:var(--space-md);padding:max(var(--space-sm), env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right)) var(--space-sm) max(var(--space-md), env(safe-area-inset-left));grid-template-columns:auto 1fr auto;display:grid}.title{letter-spacing:.02em;white-space:nowrap;align-items:center;gap:8px;margin:0;font-size:1rem;font-weight:600;display:inline-flex}.title-logo{display:inline-flex}.topbar-end,.toolbar-buttons{justify-content:flex-end;align-items:center;gap:var(--space-sm);display:flex}.icon-button{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);min-width:34px;min-height:34px;color:var(--color-text);font:inherit;white-space:nowrap;cursor:pointer;justify-content:center;align-items:center;gap:6px;padding:6px 10px;font-size:.875rem;display:inline-flex}.icon-button:hover{background:var(--color-surface-hover)}.icon-button[aria-expanded=true],.icon-button[aria-pressed=true]{border-color:var(--color-accent)}.segmented{border:1px solid var(--color-border);background:var(--color-surface);border-radius:999px;justify-self:center;padding:3px;display:inline-flex}.segmented button{min-height:28px;color:var(--color-text-muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:4px 14px;font-size:.875rem}.segmented button[aria-pressed=true],.segmented button[aria-selected=true]{background:var(--color-surface-hover);color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-accent)}.icon-button:focus-visible,.segmented button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.rotate-hint{color:var(--color-text-muted);grid-column:1/-1;margin:0;font-size:.875rem;display:none}@media (width<=1100px){.button-label{display:none}}@media (width<=900px){.topbar{gap:var(--space-sm)}.segmented button{padding:4px 10px}}@media (width<=900px) and (height<=480px){.title-text{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.toolbar-buttons{gap:4px}}@media (width<=560px){.topbar{grid-template-columns:auto 1fr}.topbar-end{display:contents}.topbar-start{grid-area:1/1}.transport{grid-area:1/2;justify-self:end}.segmented{grid-area:2/1;justify-self:start}.toolbar-buttons{grid-area:2/2;gap:4px}}@media (orientation:portrait) and (width<=768px){.rotate-hint{display:block}}.transport{align-items:center;gap:var(--space-sm);padding-right:var(--space-sm);border-right:1px solid var(--color-border);display:flex}.recorder-group{border:1px solid var(--color-border);background:var(--color-surface);border-radius:999px;align-items:center;gap:2px;padding:3px;display:flex;position:relative;overflow:hidden}.transport-button{min-width:30px;height:28px;color:var(--color-text);font:inherit;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:0 8px;font-size:.8125rem;display:inline-flex}.transport-button:hover:not(:disabled){background:var(--color-surface-hover)}.transport-button:disabled{opacity:.35;cursor:default}.transport-button[data-transport=loop][aria-pressed=true]{background:var(--color-surface-hover);color:var(--color-accent)}.record-dot{background:var(--color-record);border-radius:50%;width:10px;height:10px}.record-button.is-recording,.record-button.is-recording:hover:not(:disabled){background:var(--color-record);color:#fff}.record-button.is-recording .record-dot{background:#fff;animation:1s ease-in-out infinite record-pulse}.record-button.is-near-limit .record-label{animation:.5s ease-in-out infinite record-pulse}.record-button.is-counting{box-shadow:inset 0 0 0 1.5px var(--color-record);color:var(--color-record)}.record-button.is-counting .record-dot{animation:.5s ease-in-out infinite record-pulse}@keyframes record-pulse{50%{opacity:.25}}.transport-button.is-playing,.transport-button.is-playing:hover:not(:disabled){background:var(--color-accent);color:var(--color-bg)}.time-readout{font-variant-numeric:tabular-nums;color:var(--color-text-muted);white-space:nowrap;padding:0 8px 0 2px;font-size:.75rem}.time-readout:empty{display:none}.progress{height:2px;position:absolute;bottom:0;left:0;right:0}.recorder-group:not(.is-playing) .progress{display:none}.progress-fill{background:var(--color-accent);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.transport-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){.record-dot,.record-label{animation:none!important}}@media (width<=900px){.time-readout{display:none}}@media (width<=560px){.transport{border-right:0;padding-right:0}}.metronome-button{border:1px solid var(--color-border);background:var(--color-surface);height:36px;color:var(--color-text);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:0 12px 0 10px;font-size:.8125rem;display:inline-flex}.metronome-button:hover{background:var(--color-surface-hover)}.metronome-button[aria-pressed=true]{border-color:var(--color-accent)}.metronome-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.beat-light{background:var(--color-text);opacity:0;border-radius:50%;width:8px;height:8px}.beat-light.is-accent{background:var(--color-accent);box-shadow:0 0 6px var(--color-accent)}.recording-panel{align-items:center;gap:var(--space-md);margin:0 max(var(--space-md), env(safe-area-inset-right)) var(--space-sm) max(var(--space-md), env(safe-area-inset-left));padding:var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);grid-template-columns:auto 1fr auto auto auto;grid-template-areas:"info timeline actions help fold";display:grid}.recording-panel[hidden]{display:none}.recording-panel{animation:.25s ease-out panel-in}@keyframes panel-in{0%{opacity:0;transform:translateY(4px)}}@media (prefers-reduced-motion:reduce){.recording-panel{animation:none}}.panel-info{grid-area:info}.panel-timeline{grid-area:timeline}.panel-actions{grid-area:actions}.help-button{grid-area:help}.panel-fold{grid-area:fold}.recording-title{font-family:var(--font-display);white-space:nowrap;margin:0;font-size:1.0625rem;font-weight:400}.panel-meta{font-variant-numeric:tabular-nums;color:var(--color-text-muted);white-space:nowrap;margin:2px 0 0;font-size:.8125rem}.panel-actions{gap:var(--space-sm);display:flex}.panel-button{border:1px solid var(--color-border);height:32px;color:var(--color-text);font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:6px;padding:0 12px;font-size:.8125rem;display:inline-flex}.panel-button:hover:not(:disabled){background:var(--color-surface-hover)}.panel-button:disabled{opacity:.35;cursor:default}.layer-button{border-color:var(--color-accent)}.layer-button .record-dot{display:none}.layer-button.is-recording,.layer-button.is-recording:hover:not(:disabled){border-color:var(--color-record);background:var(--color-record);color:#fff}.layer-button.is-recording .record-dot{background:#fff;width:8px;height:8px;animation:1s ease-in-out infinite record-pulse;display:block}.layer-button.is-recording svg{display:none}.help-button{background:var(--color-surface-hover);color:var(--color-accent);border-color:#0000;font-weight:600}.help-short{display:none}.panel-fold{color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:4px;display:inline-flex}.panel-fold svg{transition:transform .2s}.panel-close,.panel-empty-text{display:none}.panel-close{grid-area:close}.panel-empty-text{color:var(--color-text-muted);grid-area:empty;margin:0;font-size:.875rem}.panel-empty-text strong{color:var(--color-text)}.panel-button:focus-visible,.panel-fold:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.recording-panel.is-folded{cursor:pointer;grid-template-columns:auto 1fr auto;grid-template-areas:"info.fold"}.recording-panel.is-folded:hover{background:var(--color-surface-hover)}.recording-panel.is-folded .panel-timeline,.recording-panel.is-folded .panel-actions,.recording-panel.is-folded .help-button{display:none}.recording-panel.is-folded{padding-block:6px}.recording-panel.is-folded .panel-info{align-items:baseline;gap:var(--space-md);min-width:0;display:flex}.recording-panel.is-folded .panel-meta{text-overflow:ellipsis;margin:0;overflow:hidden}.recording-panel.is-folded .panel-fold svg{transform:rotate(-90deg)}.recording-panel.is-empty{grid-template-columns:1fr auto auto;grid-template-areas:"empty help close"}.recording-panel.is-empty .panel-info,.recording-panel.is-empty .panel-timeline,.recording-panel.is-empty .panel-actions,.recording-panel.is-empty .panel-fold:not(.panel-close){display:none}.recording-panel.is-empty .panel-empty-text{display:block}.recording-panel.is-empty .panel-close{display:inline-flex}@media (width<=900px),(height<=480px){.recording-panel{gap:var(--space-sm);padding:4px 4px 4px var(--space-sm);margin-bottom:4px}[data-panel=undo] .panel-button-text,[data-panel=delete] .panel-button-text,.help-long{display:none}.help-short{display:inline}.panel-button{height:30px;padding:0 9px}}@media (width<=560px){.recording-panel{grid-template-columns:1fr auto;grid-template-areas:"info fold""timeline timeline""actions help"}.recording-panel.is-folded{grid-template-areas:"info fold"}.recording-panel.is-empty{grid-template-areas:"empty close""help help"}.help-button{justify-self:end}.recording-panel.is-empty .help-button{justify-self:start}}.panel-timeline{--label-width:72px;min-width:0;position:relative}.timeline-rows{flex-direction:column;gap:3px;display:flex}.timeline-row{grid-template-columns:var(--label-width) 1fr;align-items:center;display:grid}.row-label{color:var(--color-text-muted);white-space:nowrap;font-size:.75rem}.row-track{background:var(--color-bg);border-radius:3px;height:12px;position:relative}.row-track i{background:var(--row-color);border-radius:1px;width:3px;margin-left:-1.5px;position:absolute;top:2px;bottom:2px}.row-0{--row-color:var(--color-text-muted)}.row-1{--row-color:var(--color-accent)}.row-2{--row-color:var(--color-text)}.row-3{--row-color:var(--color-record)}.timeline-row.is-recording-row{cursor:pointer}.is-recording-row .row-track{background:color-mix(in srgb, var(--color-record) 16%, var(--color-bg));box-shadow:inset 0 0 0 1px var(--color-record);height:16px}.row-hint{color:var(--color-record);white-space:nowrap;text-overflow:ellipsis;font-size:.6875rem;line-height:16px;animation:.3s ease-out hint-in;position:absolute;inset:0 8px;overflow:hidden}@keyframes hint-in{0%{opacity:0}}.is-recording-row .row-label{color:var(--color-record);font-weight:600}.is-recording-row .row-label:before{content:"";background:var(--color-record);vertical-align:1px;border-radius:50%;width:6px;height:6px;margin-right:4px;animation:1s ease-in-out infinite record-pulse;display:inline-block}.timeline-playhead{top:-2px;bottom:-2px;left:calc(var(--label-width) + (100% - var(--label-width)) * var(--position,0));background:var(--color-text);pointer-events:none;border-radius:1px;width:2px;display:none;position:absolute}.recording-panel.is-playing .timeline-playhead{display:block}@media (prefers-reduced-motion:reduce){.is-recording-row .row-label:before{animation:none}}@media (width<=900px),(height<=480px){.panel-timeline{--label-width:0px}.timeline-row{grid-template-columns:1fr}.row-label,.row-hint{display:none}.is-recording-row .row-track{height:8px}.timeline-rows{gap:2px}.row-track{height:6px}.row-track i{top:1px;bottom:1px}}.tooltip{z-index:20;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);width:min(280px,100vw - 16px);color:var(--color-text);pointer-events:none;opacity:0;align-items:center;gap:12px;padding:12px 14px;transition:opacity .15s,transform .15s;display:flex;position:fixed;transform:translateY(-4px);box-shadow:0 8px 24px #0000004d}.tooltip.is-visible{opacity:1;transform:none}.tooltip-picture{color:var(--color-text-muted);flex:none}.tooltip-title{margin:0 0 4px;font-size:.875rem;font-weight:600}.tooltip-text{color:var(--color-text-muted);margin:0;font-size:.8125rem;line-height:1.4}.tooltip-pendulum{transform-box:view-box;transform-origin:32px 46px;animation:.6s ease-in-out infinite alternate pendulum-swing}@keyframes pendulum-swing{0%{transform:rotate(-22deg)}to{transform:rotate(22deg)}}.coach-tip{z-index:20;border:1px solid var(--color-accent);border-radius:var(--radius-md);background:var(--color-surface);width:min(260px,100vw - 16px);color:var(--color-text);align-items:flex-start;gap:8px;padding:10px 8px 10px 14px;font-size:.8125rem;line-height:1.4;display:flex;position:fixed;box-shadow:0 8px 24px #0000004d}.coach-tip:before{content:"";top:-6px;left:calc(var(--arrow-x,50%) - 6px);border-top:1px solid var(--color-accent);border-left:1px solid var(--color-accent);background:var(--color-surface);width:10px;height:10px;position:absolute;transform:rotate(45deg)}.coach-tip p{margin:0}.coach-link{color:var(--color-accent);font:inherit;text-underline-offset:2px;cursor:pointer;background:0 0;border:0;padding:0;font-weight:600;text-decoration:underline}.coach-close{color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;flex:none;padding:2px;display:inline-flex}.is-spotlit{animation:1.2s ease-out 3 spotlight}@keyframes spotlight{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-accent) 85%, transparent), inset 0 0 0 2px var(--color-accent)}to{box-shadow:0 0 0 14px transparent, inset 0 0 0 2px var(--color-accent)}}@media (prefers-reduced-motion:reduce){.is-spotlit{box-shadow:inset 0 0 0 2px var(--color-accent);animation:none}.tooltip{transition:none}.tooltip-pendulum{animation:none}}.kit{min-height:0;padding:0 max(var(--space-md), env(safe-area-inset-right)) max(var(--space-md), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 55%, var(--color-stage), transparent 70%);flex:1;position:relative;overflow:hidden}.kit-svg{-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;width:100%;height:100%;display:block;overflow:visible}.pad-art,.kick-beater,.hihat-top,.effect-ring{transform-box:fill-box;transform-origin:50%}.floor-ring{color:var(--color-text-muted)}.kit-effects,.kit-gear,.kit-backdrop{pointer-events:none}.kit-light{pointer-events:none;opacity:calc(.7 + var(--beat-glow,0) * .8)}:root[data-theme=light] .kit-light{opacity:calc((.7 + var(--beat-glow,0) * .8) * .4)}.kit:before{content:"";top:0;right:max(var(--space-md), env(safe-area-inset-right));left:max(var(--space-md), env(safe-area-inset-left));background:var(--color-record);height:3px;box-shadow:0 0 18px 2px var(--color-record);opacity:0;pointer-events:none;border-radius:2px;transition:opacity .25s;position:absolute}.kit.is-recording:before{opacity:1;animation:1.6s ease-in-out infinite recording-glow}@keyframes recording-glow{50%{opacity:.4}}@media (prefers-reduced-motion:reduce){.kit.is-recording:before{animation:none}}.kit-labels{pointer-events:none;display:none}.kit-svg.show-keys .kit-labels{display:inline}.key-label rect{fill:#0000008c}.key-label text{fill:#fff;font:600 22px var(--font-system)}.hit-area{fill:#fff;fill-opacity:0;pointer-events:all;cursor:pointer;outline:none}.kit-atmosphere{box-sizing:border-box;width:100%;height:100%;padding:inherit;pointer-events:none;position:absolute;inset:0;overflow:visible}.kit-atmosphere *{transform-box:view-box}.window-light{animation:26s ease-in-out infinite alternate window-drift}@keyframes window-drift{0%{transform:translate(-80px)}to{transform:translate(220px)}}.light-sweep{animation:16s linear infinite light-sweep}@keyframes light-sweep{0%{transform:translate(0)}55%,to{transform:translate(2600px)}}.lamp-glow{animation:7s ease-in-out infinite alternate lamp-breathe}@keyframes lamp-breathe{0%{opacity:.65}to{opacity:1}}.mote{opacity:0;animation:mote-rise var(--dur,10s) linear var(--delay,0s) infinite}@keyframes mote-rise{0%{opacity:0;transform:translate(0)}15%{opacity:.7}85%{opacity:.7}to{transform:translate(var(--dx,0), -280px);opacity:0}}.led-blink{animation:2.4s ease-in-out infinite led-blink}@keyframes led-blink{0%,to{opacity:1}50%{opacity:.45}}.steam{opacity:0;animation:steam-rise 3.3s ease-out var(--delay,0s) infinite}@keyframes steam-rise{0%{opacity:0;transform:translateY(0)}30%{opacity:.28}to{opacity:0;transform:translateY(-46px)}}.sway{animation:6s ease-in-out infinite alternate sway}@keyframes sway{0%{transform:rotate(-3deg)}to{transform:rotate(3deg)}}.spin{animation:1.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.foot-glow{animation:4s ease-in-out infinite alternate lamp-breathe}.haze{animation:haze-drift 22s ease-in-out var(--delay,0s) infinite alternate}@keyframes haze-drift{0%{transform:translate(-120px)}to{transform:translate(140px)}}.no-flash .led-blink,.no-flash .foot-glow,.no-flash .lamp-glow{animation:none}@media (prefers-reduced-motion:reduce){.kit-atmosphere *{animation:none!important}.mote{opacity:.5}}.drawer{z-index:30;gap:var(--space-lg);width:min(320px,85vw);padding:max(var(--space-md), env(safe-area-inset-top)) max(var(--space-lg), env(safe-area-inset-right)) max(var(--space-lg), env(safe-area-inset-bottom)) var(--space-lg);background:var(--color-surface);border-left:1px solid var(--color-border);flex-direction:column;transition:transform .25s;display:flex;position:fixed;top:0;bottom:0;right:0;overflow:hidden auto;transform:translate(105%);box-shadow:-8px 0 24px #00000059}.drawer.is-open{transform:none}@media (prefers-reduced-motion:reduce){.drawer{transition:none}}.drawer-header{justify-content:space-between;align-items:center;display:flex}.drawer-title{margin:0;font-size:1rem;font-weight:600}.chips{gap:var(--space-sm);flex-wrap:wrap;display:flex}.chip,.text-button{border:1px solid var(--color-border);min-height:32px;color:var(--color-text-muted);font:inherit;cursor:pointer;background:0 0;border-radius:999px;padding:4px 12px;font-size:.8125rem}.chip:hover,.text-button:hover{background:var(--color-surface-hover);color:var(--color-text)}.chip[aria-pressed=true]{border-color:var(--color-accent);color:var(--color-text);background:var(--color-surface-hover)}.text-button{border-radius:var(--radius-md);align-self:flex-start}.slider-group{gap:var(--space-md);flex-direction:column;display:flex}.slider-row{row-gap:var(--space-sm);grid-template-columns:1fr auto;font-size:.875rem;display:grid}.slider-value{color:var(--color-text-muted);font-variant-numeric:tabular-nums}.slider-row input{width:100%;height:28px;accent-color:var(--color-accent);grid-column:1/-1;margin:0}.toggle-row{cursor:pointer;justify-content:space-between;align-items:center;min-height:32px;font-size:.875rem;display:flex}.toggle-row input{background:radial-gradient(circle, #fff 7px, transparent 7.5px) left center / 22px 22px no-repeat, var(--color-text-muted);appearance:none;cursor:pointer;border-radius:999px;flex:none;width:40px;height:22px;margin:0;transition:background-position .15s,background-color .15s}.toggle-row input:checked{background-color:var(--color-accent);background-position:100%}@media (prefers-reduced-motion:reduce){.toggle-row input{transition:none}}.chip:focus-visible,.text-button:focus-visible,.slider-row input:focus-visible,.toggle-row input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media (height<=480px){.drawer{gap:var(--space-sm);padding-top:max(var(--space-sm), env(safe-area-inset-top));padding-bottom:max(var(--space-sm), env(safe-area-inset-bottom))}.chips{gap:6px}.chip{min-height:28px;padding:2px 10px}.slider-group{gap:4px}.slider-row{row-gap:0}}.kit-tab{z-index:15;top:var(--tab-top,28%);border:1px solid var(--color-border);border-radius:0 var(--radius-md) var(--radius-md) 0;background:var(--color-surface);color:var(--color-text);font:inherit;cursor:pointer;border-left:0;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 12px 4px;font-size:.75rem;font-weight:600;display:flex;position:fixed;left:0;transform:translateY(-50%);box-shadow:4px 0 16px #00000040}.kit-tab svg{transform:rotate(-90deg)}.kit-tab-label{writing-mode:vertical-rl;letter-spacing:.08em;transform:rotate(180deg)}.kit-tab:hover{background:var(--color-surface-hover)}.kit-tab:active:not(:disabled){transform:translateY(-50%)scale(.96)}.kit-tab[aria-expanded=true]{opacity:0;pointer-events:none}.kit-tab:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.drawer.drawer-left{border-right:1px solid var(--color-border);border-left:0;left:0;right:auto;transform:translate(-105%);box-shadow:8px 0 24px #00000059}.drawer.drawer-left.is-open{transform:none}.kit-tabs{align-self:flex-start}.kit-cards{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.kit-cards[hidden],.eq-panel[hidden],.stick-options[hidden]{display:none}.kit-card{border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font:inherit;text-align:left;cursor:pointer;background:0 0;flex-direction:column;gap:4px;padding:8px;display:flex}.kit-card:hover{background:var(--color-surface-hover)}.kit-card[aria-pressed=true]{border-color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent)}.kit-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.kit-card-picture svg{aspect-ratio:16/9;border-radius:6px;width:100%;display:block}.kit-card-name{font-size:.875rem;font-weight:600}.kit-card-text{color:var(--color-text-muted);font-size:.75rem;line-height:1.35}@media (height<=480px){.kit-tab{padding:8px 4px 8px 2px;font-size:.6875rem}.kit-cards{grid-template-columns:repeat(3,1fr);gap:6px}.kit-card-text{display:none}}.kit-hint{color:var(--color-text-muted);margin:0;font-size:.8125rem}.kit-tabs-divider{background:var(--color-border);align-self:center;width:1px;height:18px;margin:0 4px}.eq-panel{gap:var(--space-md,16px);flex-direction:column;display:flex}.backdrop-swatch svg{border:1px solid var(--color-border)}.panel-title{font-size:.875rem;font-weight:600}.drawer-header-actions{align-items:center;gap:6px;display:flex}.kit-reset{align-items:center;gap:6px;display:inline-flex}.kit-reset svg{width:15px;height:15px}.credits{z-index:5;right:max(var(--space-md), env(safe-area-inset-right));bottom:max(10px, env(safe-area-inset-bottom));background:color-mix(in srgb, var(--color-bg) 78%, transparent);color:var(--color-text-muted);-webkit-user-select:text;user-select:text;cursor:auto;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:.75rem;display:flex;position:fixed}.credits-link,.about-link{color:var(--color-accent);font-weight:600;text-decoration:none}.credits-link:hover,.about-link:hover{text-decoration:underline}.credits-link:focus-visible,.about-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}@media (height<=480px){.credits{display:none}}.menu-note-divider{color:var(--color-text-muted);align-items:center;gap:8px;margin:6px 6px 2px;display:flex}.menu-note-divider:before,.menu-note-divider:after{content:"";background:var(--color-border);flex:1;height:1px}.menu-note-divider svg{opacity:.8;width:13px;height:13px}.menu-credit-line{color:var(--color-text-muted);text-align:center;white-space:nowrap;-webkit-user-select:text;user-select:text;margin:0;padding:4px 2px 6px;font-size:.7rem}.menu-credit-link{color:var(--color-accent);border-radius:4px;font-weight:600;text-decoration:none}.menu-credit-link:hover{text-decoration:underline}.menu-credit-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}body.is-focus .topbar,body.is-focus .kit-tab,body.is-focus .credits,body.is-focus .recording-panel{display:none!important}body.is-focus .kit{padding-top:max(var(--space-md), env(safe-area-inset-top))}.focus-exit{z-index:20;top:max(12px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right));border:2px solid var(--color-accent);background:var(--color-surface);width:40px;height:40px;color:var(--color-text);cursor:pointer;border-radius:50%;place-items:center;padding:0;display:grid;position:fixed;box-shadow:0 4px 14px #00000059}.focus-exit:hover,.focus-exit:focus-visible{background:var(--color-surface-hover)}.focus-exit:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}body:not(.is-focus) .focus-exit{display:none}.coach-tip.is-passthrough{pointer-events:none}.coach-tip.is-passthrough .coach-close{pointer-events:auto}body.is-concert .kit{background:#0b0b0e}body.is-concert .kit-backdrop,body.is-concert .kit-atmosphere{display:none}body.is-concert .kit-svg{z-index:1;transform-origin:50% 100%;position:relative;transform:scale(.74)}.concert-scene{z-index:0;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.concert-scene *{transform-box:view-box}.fan{animation:fan-bob calc(var(--beat,.6s) / 2) ease-in-out var(--delay,0s) infinite alternate}@keyframes fan-bob{to{transform:translateY(-3px)}}.arms{opacity:0;transition:opacity .15s}.cheer .fan:not(.fan-alt) .arms,.hype .arms{opacity:1}.glow-stick{animation:glow-pulse 1.2s ease-in-out var(--delay,0s) infinite alternate}@keyframes glow-pulse{0%{opacity:.6}to{opacity:1}}.beach-ball{animation:16s ease-in-out infinite alternate ball-bounce}@keyframes ball-bounce{0%{transform:translate(160px,130px)rotate(0)}20%{transform:translate(430px,70px)rotate(90deg)}40%{transform:translate(720px,150px)rotate(200deg)}60%{transform:translate(990px,60px)rotate(290deg)}80%{transform:translate(1260px,140px)rotate(380deg)}to{transform:translate(1480px,90px)rotate(470deg)}}.disco-specks{animation:40s linear infinite disco-turn}@keyframes disco-turn{to{transform:rotate(360deg)}}.lamp-halo{animation:lamp-chase max(calc(var(--beat,.6s) * 4), 2.4s) ease-in-out calc(var(--i,0) * .4s) infinite}@keyframes lamp-chase{0%,to{opacity:.08}40%{opacity:.4}}.ball-halo{animation:ball-pulse max(calc(var(--beat,.6s) * 2), 1.6s) ease-in-out infinite}@keyframes ball-pulse{0%,to{opacity:.05}50%{opacity:.22}}.beam{animation:beam-sway var(--sway,10s) ease-in-out var(--delay,0s) infinite alternate}@keyframes beam-sway{0%{transform:rotate(-9deg)}to{transform:rotate(9deg)}}.no-flash .lamp-halo,.no-flash .ball-halo,.no-flash .ball-glint,.no-flash .phone,.no-flash .glow-stick{animation:none}.ball-glint{animation:1.4s ease-in-out infinite alternate phone-glow}.hype .fan{animation-name:fan-jump;animation-duration:calc(var(--beat,.6s) / 4)}@keyframes fan-jump{to{transform:translateY(-9px)}}.phone{animation:phone-glow 1.6s ease-in-out var(--delay,0s) infinite alternate}@keyframes phone-glow{0%{opacity:.35}to{opacity:1}}.pool-0{animation:14s ease-in-out infinite alternate pool-a}.pool-1{animation:17s ease-in-out infinite alternate pool-b}.pool-2{animation:19s ease-in-out -4s infinite alternate-reverse pool-a}.pool-3{animation:15s ease-in-out -6s infinite alternate-reverse pool-b}@keyframes pool-a{0%{transform:translate(-160px,40px)}to{transform:translate(220px,-60px)}}@keyframes pool-b{0%{transform:translate(180px,-40px)}to{transform:translate(-240px,80px)}}@media (prefers-reduced-motion:reduce){.concert-scene *{animation:none!important}}.toast{z-index:50;left:50%;bottom:max(var(--space-lg), env(safe-area-inset-bottom));border:1px solid var(--color-border);border-left:3px solid var(--color-accent);border-radius:var(--radius-md);background:var(--color-surface);max-width:min(420px,100vw - 32px);color:var(--color-text);pointer-events:none;padding:10px 16px;font-size:.875rem;animation:.2s ease-out toast-in;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #0000004d}.toast.is-leaving{opacity:0;transition:opacity .3s}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px)}}@media (prefers-reduced-motion:reduce){.toast{animation:none}}.confirm-toast{z-index:50;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);width:min(300px,100vw - 16px);color:var(--color-text);flex-direction:column;gap:10px;padding:12px 14px;font-size:.875rem;line-height:1.4;animation:.15s ease-out popup-in;display:flex;position:fixed;box-shadow:0 6px 18px #00000029}.confirm-toast:before{content:"";top:-6px;left:calc(var(--arrow-x,50%) - 6px);border-top:1px solid var(--color-border);border-left:1px solid var(--color-border);background:var(--color-surface);width:10px;height:10px;position:absolute;rotate:45deg}@keyframes popup-in{0%{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion:reduce){.confirm-toast{animation:none}}.confirm-actions{justify-content:flex-end;gap:8px;display:flex}.confirm-toast button{min-height:34px;font:inherit;cursor:pointer;border-radius:999px;padding:0 14px;font-size:.875rem;font-weight:600}.confirm-cancel{border:1px solid var(--color-border);color:var(--color-text);background:0 0}.confirm-yes{border:1px solid var(--color-accent-strong);background:var(--color-accent-strong);color:#fff}.confirm-toast button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.feature-learn,.feature-concert{font-weight:600}.feature-learn .button-label,.feature-concert .button-label{display:inline}.feature-learn{border-color:var(--color-accent)}.feature-learn svg{color:var(--color-accent)}@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}.feature-concert{--ring:conic-gradient(from var(--spin), #ffa62b, #ff4fd8 25%, #4d8dff 50%, #3ddc84 75%, #ffa62b);background:linear-gradient(var(--color-surface), var(--color-surface)) padding-box, var(--ring) border-box;border:2px solid #0000;animation:4s linear infinite concert-spin;box-shadow:0 0 10px #ff4fd84d}.feature-concert[aria-pressed=true]{background:linear-gradient(color-mix(in srgb, #ff4fd8 14%, var(--color-surface)), color-mix(in srgb, #ff4fd8 14%, var(--color-surface))) padding-box, var(--ring) border-box}@keyframes concert-spin{to{--spin:360deg}}.no-flash .feature-concert{animation:none}@media (prefers-reduced-motion:reduce){.feature-concert{animation:none}}.more{position:relative}.more-menu{z-index:25;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);overscroll-behavior:contain;flex-direction:column;gap:2px;min-width:200px;max-height:calc(100dvh - 72px);padding:6px;display:flex;position:absolute;top:calc(100% + 6px);right:0;overflow-y:auto;box-shadow:0 10px 28px #00000059}.more-menu[hidden]{display:none}.more-menu .icon-button{background:0 0;border-color:#0000;justify-content:flex-start;width:100%;min-height:40px}.more-menu .icon-button:hover,.more-menu .icon-button:focus-visible{background:var(--color-surface-hover)}.more-menu .icon-button svg{color:var(--color-accent)}.more-menu .button-label{display:inline}.menu-key{border:1px solid var(--color-border);color:var(--color-text-muted);font:inherit;border-radius:4px;margin-left:auto;padding:1px 6px;font-size:.75rem}@media (pointer:coarse){.topbar .icon-button,.more-menu .icon-button{min-width:44px;min-height:44px}}@media (width<=900px) and (height<=480px){.feature-learn .button-label,.feature-concert .button-label,#more-button .button-label{display:none}.more-menu .icon-button,.menu-tempo{min-height:36px}}.menu-settings{flex-direction:column;gap:2px;display:flex}.menu-divider{background:var(--color-border);height:1px;margin:4px 6px}.menu-switch{background:radial-gradient(circle, #fff 6px, transparent 6.5px) left center / 20px 20px no-repeat, var(--color-text-muted);border-radius:999px;flex:none;width:34px;height:20px;margin-left:auto;transition:background-position .15s,background-color .15s}.menu-toggle[aria-checked=true] .menu-switch{background-color:var(--color-accent);background-position:100%}@media (prefers-reduced-motion:reduce){.menu-switch{transition:none}}.menu-tempo{align-items:center;gap:6px;min-height:40px;padding:0 4px 0 10px;font-size:.875rem;display:flex}.menu-tempo svg{width:18px;height:18px;color:var(--color-accent)}.menu-tempo .button-label{margin-right:auto}.more-menu .menu-step{border-color:var(--color-border);justify-content:center;width:32px;min-width:32px;min-height:32px;font-size:1rem}.menu-tempo-value{text-align:center;font-variant-numeric:tabular-nums;min-width:4.4em}.learn-panel{grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto auto;grid-template-areas:"info grid actions fold"}.learn-info{grid-area:info;min-width:0}.learn-title{font-family:var(--font-display);white-space:nowrap;margin:0;font-size:1.0625rem}.learn-meta{color:var(--color-text-muted);font-variant-numeric:tabular-nums;margin:2px 0 0;font-size:.8125rem}.learn-actions{align-items:center;gap:var(--space-sm);flex-wrap:wrap;grid-area:actions;display:flex}.learn-speed-value{text-align:center;font-variant-numeric:tabular-nums;min-width:3.2em;font-size:.8125rem}.learn-next[hidden]{display:none}body.is-focus .learn-panel:not([hidden]){display:grid!important}.beat-grid{--name:3.6rem;--lead:3.4rem;flex-direction:column;grid-area:grid;gap:2px;min-width:0;display:flex;position:relative}.grid-row{grid-template-columns:var(--name) var(--lead) repeat(var(--steps), minmax(0, 1fr));align-items:center;gap:2px;display:grid}.grid-name{color:var(--color-text-muted);white-space:nowrap;font-size:.6875rem}.grid-count{color:var(--color-text-muted);text-align:center;font-size:.625rem}.grid-count.is-beat{color:var(--color-text);font-weight:600}.grid-cell{background:color-mix(in srgb, var(--color-text) 5%, transparent);border-radius:3px;place-items:center;height:15px;display:grid}.grid-cell.is-beat{background:color-mix(in srgb, var(--color-text) 10%, transparent)}.grid-cell i{background:var(--color-accent);border-radius:50%;width:9px;height:9px}.grid-cell[data-verdict=onTime] i{background:var(--color-good)}.grid-cell[data-verdict=early] i,.grid-cell[data-verdict=late] i{background:var(--color-warn)}.grid-cell[data-verdict=miss] i{background:var(--color-bad)}.grid-playhead{top:0;bottom:0;left:calc(var(--name) + 2px + (var(--lead) + 2px) * var(--lead-in,0) + (100% - var(--name) - var(--lead) - 4px) * var(--progress,0));background:var(--color-text);pointer-events:none;border-radius:1px;width:2px;position:absolute}.grid-lead{background:linear-gradient(90deg, var(--color-good) calc(var(--lead-fill,0) * 100%), color-mix(in srgb, var(--color-text) 16%, transparent) 0);border-radius:3px;height:15px}.grid-lead-label{color:var(--color-text-muted);text-align:center;text-transform:uppercase;letter-spacing:.04em;font-size:.625rem}.grid-lead-label.is-counting{color:var(--color-accent);font-family:var(--font-display);letter-spacing:0;font-size:1.125rem;line-height:.7}.learn-hud{z-index:6;pointer-events:none;position:fixed;inset:0}.learn-hud[hidden]{display:none}.hud-board{top:var(--top,120px);border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-surface) 88%, transparent);border-radius:999px;align-items:center;gap:18px;padding:8px 18px;display:flex;position:absolute;left:50%;translate:-50%;box-shadow:0 6px 20px #00000040}.learn-hud.is-demo .hud-board{display:none}.hud-word{min-width:6.5em;font-family:var(--font-body);text-align:center;font-size:1.5rem;font-weight:600}.hud-word[data-verdict=onTime]{color:var(--color-good)}.hud-word[data-verdict=early],.hud-word[data-verdict=late]{color:var(--color-warn)}.hud-word[data-verdict=miss]{color:var(--color-bad)}.hud-stat{flex-direction:column;align-items:center;line-height:1.1;display:flex}.hud-stat b{font-variant-numeric:tabular-nums;font-size:1.375rem;font-weight:600}.hud-stat small{color:var(--color-text-muted);font-size:.6875rem}.cue-glow{fill:var(--color-accent);pointer-events:none}.lesson-list{flex-direction:column;gap:6px;display:flex}.lesson-list[hidden]{display:none}.lesson-item{border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font:inherit;text-align:left;cursor:pointer;background:0 0;align-items:center;gap:10px;padding:10px;display:flex}.lesson-item:hover{border-color:color-mix(in srgb, var(--color-accent) 45%, var(--color-border));background:var(--color-surface-hover)}.lesson-item:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.lesson-number{background:color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));border-radius:50%;flex:none;place-items:center;width:24px;height:24px;font-size:.75rem;font-weight:600;display:grid}.lesson-text{flex-direction:column;flex:1;min-width:0;display:flex}.lesson-name{font-size:.9375rem;font-weight:600}.lesson-tip{color:var(--color-text-muted);font-size:.75rem}.lesson-side{flex-direction:column;flex:none;align-items:flex-end;gap:2px;font-size:.6875rem;display:flex}.lesson-level{color:var(--color-accent);letter-spacing:1px}.lesson-bpm,.lesson-best{color:var(--color-text-muted)}.lesson-best.is-passed{color:var(--color-good)}@media (width<=1100px){.learn-panel{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"info actions fold""grid grid grid"}}@media (height<=480px){.learn-panel{row-gap:4px;padding-block:4px}.learn-title{font-size:.9375rem}.learn-meta{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.learn-actions .panel-button-text{display:none}.grid-cell,.grid-lead{height:9px}.grid-cell i{width:6px;height:6px}.grid-name,.grid-count{font-size:.5625rem}.hud-board{gap:10px;padding:4px 12px;left:auto;right:12px;translate:none}.hud-word{min-width:4.5em;font-size:1rem}.hud-stat b{font-size:.9375rem}.hud-stat small{font-size:.5625rem}}.learn-primary,.learn-secondary,.learn-ghost{min-height:34px;font:inherit;cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:0 14px;font-size:.875rem;display:inline-flex}.learn-primary{border:1px solid var(--color-accent-strong);background:var(--color-accent-strong);color:#fff;text-shadow:0 1px 1px #00000040;font-weight:600}.learn-primary:hover{filter:brightness(1.08)}.learn-primary.is-playing{border-color:var(--color-record);background:var(--color-record);color:#fff}.learn-secondary{border:1px solid var(--color-accent);color:var(--color-accent);background:0 0;font-weight:600}.learn-secondary:hover{background:color-mix(in srgb, var(--color-accent) 12%, transparent)}.learn-secondary:disabled{opacity:.45;cursor:default}.learn-ghost{min-height:30px;color:var(--color-text-muted);background:0 0;border:1px solid #0000;padding:0 8px}.learn-ghost:hover{border-color:var(--color-border);color:var(--color-text)}.learn-click{justify-content:center;width:34px;padding:0;position:relative}.learn-click[aria-pressed=true]{border-color:var(--color-accent);color:var(--color-accent)}.learn-click[aria-pressed=false]{opacity:.55}.learn-click[aria-pressed=false]:after{content:"";background:currentColor;border-radius:1px;width:20px;height:2px;position:absolute;rotate:-45deg}.learn-primary svg,.learn-secondary svg,.learn-ghost svg{width:15px;height:15px}.learn-primary:focus-visible,.learn-secondary:focus-visible,.learn-ghost:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.learn-tertiary{align-items:center;gap:2px;display:flex}.learn-panel.is-steps .in-time-only,.learn-hud.is-steps .hud-stat{display:none}.learn-mode button{font-size:.8125rem}.hud-word[data-verdict=nice]{color:var(--color-good)}.hud-word[data-verdict=wrong]{color:var(--color-warn)}.cue-hold{opacity:.35;animation:1.6s ease-in-out infinite alternate hold-breathe}@keyframes hold-breathe{0%{opacity:.22}to{opacity:.42}}@media (prefers-reduced-motion:reduce){.cue-hold{animation:none}}@media (height<=480px){.learn-primary span,.learn-secondary span,.learn-ghost span{display:none}.learn-primary,.learn-secondary{padding:0 10px}}.lesson-labels{pointer-events:none}.lesson-label rect{fill:#0000009e;stroke:var(--color-accent);stroke-width:2px}.lesson-label text{font:600 20px var(--font-body)}.pad-art.is-dimmed{filter:brightness(.45)saturate(.6);transition:filter .2s}.kit-svg:has(.lesson-label) .kit-labels{display:none}.hud-goal{align-items:center;gap:10px;display:flex}.hud-goal-bar{width:96px;height:20px;position:relative}.hud-goal-text{min-width:8.5em;font-size:.9375rem;font-weight:600}.hud-goal-bar:before,.hud-goal-fill{content:"";border-radius:4px;height:8px;position:absolute;top:6px;left:0}.hud-goal-bar:before{background:color-mix(in srgb, var(--color-text) 14%, transparent);right:0}.hud-goal-fill{background:var(--color-accent);width:0;transition:width .25s}.hud-goal-fill.is-passing{background:var(--color-good)}.hud-goal-mark{background:var(--color-text);border-radius:1px;width:2px;height:16px;position:absolute;top:2px;left:80%}.learn-hud.is-steps .hud-goal{display:none}.learn-caption{z-index:6;left:50%;bottom:max(36px, env(safe-area-inset-bottom));border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-surface) 90%, transparent);max-width:min(640px,100vw - 32px);color:var(--color-text);text-align:center;pointer-events:none;border-radius:999px;margin:0;padding:8px 16px;font-size:.9375rem;position:fixed;translate:-50%;box-shadow:0 2px 8px #00000014}.learn-caption[hidden]{display:none}.learn-caption b{color:var(--color-accent);margin-right:6px}@media (height<=480px){.learn-caption{padding:4px 12px;font-size:.8125rem;bottom:6px}.hud-goal{display:none}}.drawer.drawer-wide{width:min(440px,94vw)}.drawer-wide .drawer-header{z-index:1;top:calc(-1 * max(var(--space-md), env(safe-area-inset-top)));margin-top:calc(-1 * max(var(--space-md), env(safe-area-inset-top)));padding:max(var(--space-md), env(safe-area-inset-top)) 0 var(--space-sm);background:var(--color-surface);position:sticky}.help-jumps{margin-top:calc(-1 * var(--space-sm));flex-wrap:wrap;gap:6px;display:flex}.help-body{gap:var(--space-lg);flex-direction:column;font-size:.875rem;line-height:1.5;display:flex}.help-section h3{margin:0 0 8px;font-size:1rem;font-weight:650}.help-section p{color:var(--color-text-muted);margin:0 0 8px}.help-section .help-lead{color:var(--color-text);font-size:.9375rem}.help-section strong{color:var(--color-text);font-weight:600}.help-steps{flex-direction:column;gap:10px;margin:12px 0;padding:0;list-style:none;display:flex}.help-step{border:1px solid var(--color-border);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-surface-hover) 45%, var(--color-surface));padding:12px}.step-head{align-items:center;gap:8px;margin-bottom:4px;display:flex}.step-number{background:var(--color-accent);width:22px;height:22px;color:var(--color-bg);border-radius:50%;place-items:center;font-size:.75rem;font-weight:700;display:inline-grid}.help-section .step-title{color:var(--color-text);margin:0;font-weight:600}.help-picture{margin:8px 0}.try-button{border:1px solid var(--color-accent);height:28px;color:var(--color-accent);font:inherit;cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:6px;padding:0 12px;font-size:.8125rem;font-weight:600;display:inline-flex}.try-button:after{content:"→"}.try-button:hover{background:var(--color-surface-hover)}.try-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.help-icon{vertical-align:-3px;color:var(--color-text);display:inline-flex}.help-icon svg{width:16px;height:16px}.try-button+p{margin-top:14px}.mock-stage{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);align-items:center;gap:8px;padding:12px;font-size:.75rem;display:flex;position:relative}.mock-pill{border:1px solid var(--color-border);background:var(--color-surface);height:26px;color:var(--color-text);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:0 10px;display:inline-flex}.mock-record{grid-template-columns:auto auto;animation:3.2s step-end infinite mock-record;display:inline-grid}.mock-idle,.mock-live{grid-area:1/2}.mock-live{animation:3.2s step-end infinite mock-show}.mock-idle{animation:3.2s step-end infinite mock-hide}.mock-dot{background:var(--color-record);border-radius:50%;width:8px;height:8px;animation:3.2s step-end infinite mock-dot}@keyframes mock-record{0%{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}40%{background:var(--color-record);color:#fff;border-color:var(--color-record)}}@keyframes mock-dot{0%{background:var(--color-record)}40%{background:#fff}}@keyframes mock-show{0%{opacity:0}40%{opacity:1}}@keyframes mock-hide{0%{opacity:1}40%{opacity:0}}.mock-play{border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:8px solid var(--color-text-muted);width:0;height:0}.mock-track{background:var(--color-surface-hover);border-radius:3px;flex:1;height:10px;position:relative}.mock-track i{background:var(--mock-color);border-radius:1px;width:3px;margin-left:-1.5px;position:absolute;top:2px;bottom:2px}.mock-row-0{--mock-color:var(--color-text-muted)}.mock-row-1{--mock-color:var(--color-accent)}.mock-row-2{--mock-color:var(--color-text)}.mock-row-3{--mock-color:var(--color-record)}.mock-panel-title{white-space:nowrap;font-weight:600}.mock-add{border-color:var(--color-accent);animation:1.6s ease-out infinite mock-pulse}@keyframes mock-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--color-accent) 70%, transparent)}to{box-shadow:0 0 0 10px #0000}}.mock-timeline{grid-template-columns:62px 1fr;gap:5px 8px;display:grid}.mock-label{color:var(--color-text-muted);white-space:nowrap;font-size:.6875rem}.mock-recording{color:var(--color-record);font-weight:600}.mock-filling{background:color-mix(in srgb, var(--color-record) 16%, var(--color-surface-hover));box-shadow:inset 0 0 0 1px var(--color-record)}.mock-reveal{animation:3.2s linear infinite mock-reveal;position:absolute;inset:0}.mock-playhead{background:var(--color-text);border-radius:1px;width:2px;animation:3.2s linear infinite mock-playhead;position:absolute;top:8px;bottom:8px}@keyframes mock-reveal{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes mock-playhead{0%{left:82px}to{left:calc(100% - 12px)}}.mock-beats{justify-content:center;gap:18px}.mock-beat{background:var(--color-text);opacity:.25;width:12px;height:12px;animation:2.4s ease-out infinite mock-beat;animation-delay:calc(var(--beat) * .6s);border-radius:50%}.mock-beat.is-first{background:var(--color-accent);box-shadow:0 0 8px var(--color-accent)}@keyframes mock-beat{0%{opacity:1;transform:scale(1.35)}20%,to{opacity:.25;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.help-picture *{animation:none!important}}.kb{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);flex-direction:column;gap:4px;padding:10px;display:flex}.kb-row{gap:3px;display:flex}.kb-row>:first-child{margin-left:calc(var(--indent,0) * 4.5%)}.kb-key{border:1px solid var(--color-border);background:var(--color-surface);height:38px;color:var(--color-text-muted);border-bottom-width:2px;border-radius:5px;flex-direction:column;flex:0 0 calc(10% - 2.7px);justify-content:center;align-items:center;font-size:.75rem;display:flex;overflow:hidden}.kb-key b{font-weight:600}.kb-key small{white-space:nowrap;max-width:100%;margin-top:1px;font-size:.5rem;line-height:1}.kb-key.is-drum{border-color:var(--color-accent);background:color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));color:var(--color-text)}.kb-key.is-drum small{color:var(--color-accent)}.kb-space .kb-key{flex-basis:50%;margin:0 auto}.drawer{--glow:radial-gradient(280px 200px at var(--glow-x,100%) 0%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%) no-repeat;background:var(--glow), var(--color-surface)}.drawer.drawer-left{--glow-x:0%}.drawer-wide .drawer-header{background:radial-gradient(280px 200px at calc(var(--glow-x,100%) + var(--space-lg) * var(--glow-side,1)) 0%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%) no-repeat, var(--color-surface)}.drawer-left .drawer-header{--glow-side:-1}.panel-title,.help-section h3{font-size:.875rem;font-weight:650;display:block}.panel-title:after,.help-section h3:after{content:"";background:var(--color-accent);border-radius:2px;width:22px;height:3px;margin-top:6px;display:block}.fade-divider,.help-section+.help-section:before{background:linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);border:0;height:1px;margin:0;display:block}.help-section+.help-section:before{content:"";margin-bottom:var(--space-lg)}.kit-card{position:relative}.kit-card[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--color-accent)}.kit-card[aria-pressed=true]:after{content:"✓";background:var(--color-accent);width:20px;height:20px;color:var(--color-bg);border-radius:50%;place-items:center;font-size:.75rem;font-weight:800;display:grid;position:absolute;top:12px;right:12px}.segmented button[aria-pressed=true],.segmented button[aria-selected=true],.chip[aria-pressed=true]{background:color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-accent);font-weight:500}.kit-card{transition:transform .15s,box-shadow .15s,border-color .15s}@media (hover:hover){.kit-card:hover{border-color:color-mix(in srgb, var(--color-accent) 45%, var(--color-border));transform:translateY(-2px);box-shadow:0 3px 8px #0000001a}.kit-card[aria-pressed=true]:hover{box-shadow:inset 0 0 0 1px var(--color-accent), 0 3px 8px #0000001a}}#kit-drawer [role=tabpanel]:not([hidden]){animation:.2s ease-out panel-in}@media (prefers-reduced-motion:reduce){.kit-card,#kit-drawer [role=tabpanel]:not([hidden]){transition:none;animation:none}.kit-card:hover{transform:none}}.title,.drawer-title,.panel-title,.help-section h3{font-family:var(--font-display);letter-spacing:.01em;font-weight:400}.title,.drawer-title{font-size:1.375rem}.panel-title{font-size:1.0625rem}.help-section h3{font-size:1.1875rem}.kit-tabs button{align-items:center;gap:5px;padding-inline:9px;display:inline-flex}.kit-tabs button svg{flex:none;width:14px;height:14px}.kit-tabs button[aria-selected=true] svg{color:var(--color-accent)}.setting-name{align-items:center;gap:8px;display:inline-flex}.setting-name svg{width:16px;height:16px;color:var(--color-accent)}.setting-note{color:var(--color-text-muted);margin:-8px 0 0;font-size:.75rem;line-height:1.4}.kit-sticks{pointer-events:none}.stick-pose{transform-box:view-box;transform-origin:0 0}.stick-spin{transform-box:view-box;transform-origin:0 -137px}.stick-shadow{fill:#000;fill-opacity:.14}.stick-tip{fill:var(--stick-tip);stroke:var(--stick-edge);stroke-width:.8px}.swatches{flex-wrap:wrap;gap:10px;display:flex}.swatch{border:1px solid var(--color-border);cursor:pointer;border-radius:50%;width:30px;height:30px;padding:0;box-shadow:inset 0 1px 2px #ffffff40,inset 0 -2px 4px #00000040}.swatch[aria-pressed=true],.swatch:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.stick-colour-choice{color:var(--color-text-muted);font-family:var(--font-body);margin-left:10px;font-size:.8125rem}