:root{--panel-2: var(--sx-surface-3);--line: var(--sx-line);--text: var(--sx-text-1);--muted: var(--sx-text-3);--brand-a: var(--sx-brand-a-ink);--brand-b: var(--sx-brand-b-ink);--danger: var(--sx-danger);--radius: var(--sx-radius-lg);--font-mono: var(--sx-font-mono)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(1200px 600px at 50% -10%,var(--sx-bg-vignette) 0%,var(--sx-bg) 60%);color:var(--sx-text-1);font-family:var(--sx-font);-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}#start-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(800px 400px at 50% 30%,var(--sx-bg-vignette),var(--sx-bg))}.start-card{text-align:center;padding:2rem}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}.brand{font-size:clamp(1.8rem,7vw,5rem);font-weight:900;letter-spacing:.12em;margin:0}.brand .brand-s{color:var(--sx-brand-a-ink)}.brand .brand-p{color:var(--sx-brand-b-ink)}.brand .brand-sep{color:var(--sx-text-3)}.tagline{color:var(--sx-text-3);max-width:30ch;margin:.6rem auto 1.6rem}#start-btn{font-size:var(--sx-fs-2xl);font-weight:700;color:var(--sx-ink-on-accent);padding:.9rem 2rem;border:none;border-radius:999px;cursor:pointer;background:linear-gradient(90deg,var(--sx-brand-a),var(--sx-accent));box-shadow:var(--sx-shadow-2);transition:transform .1s ease}#start-btn:active{transform:scale(.97)}.hint{color:var(--sx-text-3);font-size:var(--sx-fs-base);margin-top:1.2rem}.start-error{max-width:42ch;margin:0 auto 1rem;padding:.6rem .9rem;border:1px solid color-mix(in srgb,var(--sx-danger) 55%,transparent);border-radius:var(--sx-radius);background:color-mix(in srgb,var(--sx-danger) 12%,transparent);color:var(--sx-text-1);font-size:var(--sx-fs-lg);line-height:1.4}#topbar{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;border-bottom:1px solid var(--sx-line);background-color:var(--sx-overlay);backdrop-filter:blur(8px)}.logo{font-weight:900;letter-spacing:.18em;font-size:var(--sx-fs-xl);background:linear-gradient(90deg,var(--sx-deck-a-ink),var(--sx-deck-b-ink));-webkit-background-clip:text;background-clip:text;color:transparent}#topbar .master{margin-left:auto;display:flex;align-items:center;gap:.5rem}#topbar .master label{font-size:var(--sx-fs-xs);color:var(--sx-text-3);letter-spacing:.1em}#topbar .master input{width:130px}#help-btn,#settings-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--sx-line);background-color:var(--sx-surface-3);color:var(--sx-text-1);cursor:pointer;font-weight:700;flex:none}#settings-btn{font-size:var(--sx-fs-xl);line-height:1}.brandnav{display:flex;align-items:center;gap:.4rem}.brand-seg{font-weight:900;letter-spacing:.14em;font-size:var(--sx-fs-xl);cursor:pointer;background:none;border:none;padding:2px 4px;font-family:inherit;transition:opacity .15s;opacity:.5}#nav-decks{color:var(--sx-brand-a-ink)}#nav-studio{color:var(--sx-brand-b-ink)}.brand-seg:hover{opacity:.85}.brand-seg.active{opacity:1}.brand-slash{color:var(--sx-text-3);font-weight:700}body.view-studio #topbar .deck-only,body.view-studio #console{display:none}body.view-studio{background:radial-gradient(circle at 24% -10%,var(--sx-bg-glow-b),transparent 30%),radial-gradient(circle at 86% 8%,var(--sx-bg-glow-a),transparent 32%),linear-gradient(135deg,var(--sx-bg) 0%,var(--sx-surface-1) 44%,var(--sx-well) 100%)}#studio{height:calc(100dvh - var(--sx-topbar-h));max-width:none;width:100%;margin:0;padding:8px;overflow:hidden;color:var(--sx-text-1)}.daw-root{height:100%;min-height:0}#console{height:calc(100% - var(--sx-topbar-h));display:flex;flex-direction:column;gap:.6rem;padding:.6rem 1.1rem;width:100%;overflow-y:auto;overflow-x:hidden}.decks-top{display:flex;gap:.6rem}.deck-meta{flex:1;min-width:0;background-color:var(--sx-surface-1);border:1px solid var(--sx-line);border-radius:var(--radius);padding:.5rem .6rem}.deck-meta[data-deck=A]{border-top:2px solid var(--sx-deck-a-ink)}.deck-meta[data-deck=B]{border-top:2px solid var(--sx-deck-b-ink)}.meta-line{display:flex;align-items:center;gap:.5rem;font-size:var(--sx-fs-base)}.badge{font-weight:800;width:22px;height:22px;border-radius:var(--sx-radius-sm);display:grid;place-items:center;flex:none;color:var(--sx-ink-on-accent)}.deck-meta[data-deck=A] .badge{background-color:var(--sx-deck-a)}.deck-meta[data-deck=B] .badge{background-color:var(--sx-deck-b)}.title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sx-text-1)}.time{color:var(--sx-text-3);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--sx-fs-sm);flex:none}.waveform{width:100%;height:72px;display:block;margin:.4rem 0;cursor:ew-resize;touch-action:none;border-radius:var(--sx-radius-sm);background-color:var(--sx-well)}.waveform.grabbing{cursor:grabbing}.load-row{display:flex;gap:.4rem;align-items:center}.load-row .spacer{flex:1}.zoom-btn{padding:.35rem .55rem;font-weight:700;line-height:1}.hotcues{display:flex;gap:.3rem;min-height:20px;margin-bottom:.2rem;flex-wrap:wrap}.hotcue-chip{font-size:var(--sx-fs-xs);font-weight:700;padding:2px 7px;border-radius:var(--sx-radius-xs);border:1px solid var(--sx-line);background-color:var(--sx-surface-3);color:var(--sx-text-1);cursor:pointer;user-select:none}.hotcue-chip.set{color:var(--sx-ink-on-accent)}.hotcue-chip:active{transform:scale(.95)}.btn{background-color:var(--sx-surface-3);color:var(--sx-text-1);border:1px solid var(--sx-line);border-radius:var(--sx-radius-md);padding:.45rem .7rem;font-size:var(--sx-fs-md);font-weight:600;cursor:pointer;user-select:none;transition:background .12s ease,transform .05s ease}.btn:hover{background-color:var(--sx-btn-hover-hi)}.btn:active{transform:scale(.97)}button:disabled,.btn:disabled,select:disabled,input:disabled,.is-disabled{opacity:var(--sx-disabled-opacity);cursor:not-allowed}:root[data-theme=dark] select{color-scheme:dark}:root[data-theme=light] select{color-scheme:light}select option,select optgroup{background-color:var(--sx-surface-1);color:var(--sx-text-1)}select option:checked{background-color:var(--sx-surface-3);color:var(--sx-text-1)}select option:disabled{color:var(--sx-text-3)}.btn.primary{background:linear-gradient(90deg,var(--sx-brand-a),var(--sx-accent));color:var(--sx-ink-on-accent);border:none}.tp-start,.tp-rew,.tp-ff,.set-btn,.loop-btn:not(.loop-to-pad),.dbl-btn,.zoom-btn,.fx-brake,.fx-spin{background:transparent;border:1px solid var(--sx-line);color:var(--sx-text-3);border-radius:999px;font-weight:700}.tp-start:hover,.tp-rew:hover,.tp-ff:hover,.set-btn:hover,.loop-btn:not(.loop-to-pad):hover,.dbl-btn:hover,.zoom-btn:hover,.fx-brake:hover,.fx-spin:hover{background-color:var(--sx-wash-1);color:var(--sx-text-1);border-color:var(--sx-chrome)}.url-btn{flex:none}.scratch-zone{flex:1;min-height:clamp(240px,42vh,400px);display:flex;align-items:stretch;background-color:var(--sx-surface-1);border:1px solid var(--sx-line);border-radius:var(--radius);position:relative;overflow:hidden}.jog-pad{flex:1;position:relative;display:grid;place-items:center;cursor:grab;touch-action:none;background:radial-gradient(120% 120% at 50% 30%,var(--sx-surface-2),var(--sx-well))}.jog-pad.touching{cursor:grabbing}.jog-pad[data-deck=A]:before,.jog-pad[data-deck=B]:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .15s}.jog-pad[data-deck=A].touching{background:radial-gradient(120% 120% at 50% 30%,color-mix(in srgb,var(--sx-deck-a) 18%,var(--sx-well)),var(--sx-well))}.jog-pad[data-deck=B].touching{background:radial-gradient(120% 120% at 50% 30%,color-mix(in srgb,var(--sx-deck-b) 18%,var(--sx-well)),var(--sx-well))}.platter{width:min(32vw,52vh,380px);height:min(32vw,52vh,380px);position:relative;display:grid;place-items:center}.platter-disc{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sx-wash-1) 36%,transparent) 0 1px,transparent 1px 5px),radial-gradient(circle at 50% 30%,var(--sx-btn-hi) 0%,var(--sx-btn-lo) 48%,var(--sx-well) 100%);box-shadow:inset 0 0 0 1px var(--sx-rim),inset 0 4px 12px var(--sx-hilite),inset 0 -16px 44px var(--sx-shade),inset 0 0 70px var(--sx-shade),var(--sx-shadow-3);will-change:transform}.platter:before{content:"";position:absolute;inset:-7px;border-radius:50%;background:linear-gradient(155deg,var(--sx-btn-hi) 0%,var(--sx-btn-lo) 62%);box-shadow:inset 0 1px 2px var(--sx-hilite),inset 0 -3px 5px var(--sx-shade),var(--sx-shadow-3);z-index:-1}.platter-ring{position:absolute;inset:32%;border-radius:50%;border:1px solid var(--sx-rim);background:radial-gradient(circle at 50% 36%,var(--sx-surface-3),var(--sx-well));box-shadow:inset 0 1px 3px var(--sx-hilite),inset 0 -4px 10px var(--sx-shade),0 0 0 1px var(--sx-shade)}.platter-mark{position:absolute;top:3%;left:50%;width:3px;height:27%;transform:translate(-50%);border-radius:var(--sx-radius-2xs);background:linear-gradient(var(--sx-deck-a),transparent);box-shadow:var(--sx-glow-a)}.jog-pad[data-deck=B] .platter-mark{background:linear-gradient(var(--sx-deck-b),transparent);box-shadow:var(--sx-glow-danger)}.platter-sticker{position:absolute;top:19%;left:50%;width:8px;height:8px;transform:translate(-50%);border-radius:50%;background-color:var(--sx-cue-1);box-shadow:var(--sx-glow-b),inset 0 0 2px var(--sx-shade)}.platter-ref{position:absolute;top:-2px;left:50%;transform:translate(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid var(--sx-marker);opacity:.85;z-index:3;filter:drop-shadow(0 1px 2px var(--sx-shade))}.platter-label{position:relative;z-index:2;pointer-events:none;font-size:clamp(1.6rem,5vw,2.6rem);font-weight:900;color:color-mix(in srgb,var(--sx-chrome) 16%,transparent)}.pad-hint{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:var(--sx-fs-sm);color:var(--sx-text-3);pointer-events:none}.armed-tag{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:var(--sx-fs-xs);letter-spacing:.06em;color:var(--sx-text-3);opacity:0;transition:opacity .12s;pointer-events:none}.jog-pad.armed .armed-tag{opacity:1;color:var(--sx-text-1)}.jog-pad[data-deck=A].armed{box-shadow:inset 0 0 0 2px var(--sx-deck-a-ink)}.jog-pad[data-deck=B].armed{box-shadow:inset 0 0 0 2px var(--sx-deck-b-ink)}.jog-pad[data-deck=A].armed .armed-tag{color:var(--sx-deck-a-ink)}.jog-pad[data-deck=B].armed .armed-tag{color:var(--sx-deck-b-ink)}.transport-row{display:flex;gap:.6rem}.transport{flex:1;display:flex;gap:.4rem;justify-content:center}.transport[data-deck=B]{justify-content:center}.play-btn{min-width:64px;font-size:var(--sx-fs-xl)}.play-btn.playing{background:linear-gradient(90deg,var(--sx-deck-a),var(--sx-accent));color:var(--sx-ink-on-accent);border:none}.transport[data-deck=B] .play-btn.playing{background:linear-gradient(90deg,var(--sx-deck-b),var(--sx-accent))}.cue-btn.armed{outline:2px solid var(--sx-danger)}.mixer{display:flex;gap:.6rem;align-items:stretch;background-color:var(--sx-surface-1);border:1px solid var(--sx-line);border-radius:var(--radius);padding:.7rem}.channel{display:flex;gap:.8rem;align-items:stretch;flex:none}.channel[data-deck=B]{flex-direction:row-reverse}.eq{display:flex;flex-direction:column;gap:.6rem;justify-content:center}.knob-group{display:flex;flex-direction:column;align-items:center;gap:2px}.knob-group label{font-size:var(--sx-fs-2xs);color:var(--sx-text-3);letter-spacing:.08em}.knob-dial{position:relative;width:58px;height:58px}.knob-scale{position:absolute;inset:0;pointer-events:none;color:var(--sx-chrome)}.knob{position:absolute;top:7px;left:7px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 50% 30%,var(--sx-btn-hi),var(--sx-btn-lo) 82%);border:1px solid var(--sx-line);cursor:ns-resize;box-shadow:inset 0 2px 3px var(--sx-hilite),inset 0 -3px 6px var(--sx-shade),var(--sx-shadow-1);touch-action:none}.knob-dot{position:absolute;top:5px;left:50%;width:4px;height:14px;transform:translate(-50%);border-radius:var(--sx-radius-2xs);background-color:var(--sx-chrome);box-shadow:0 0 4px var(--sx-shade)}.channel[data-deck=B] .knob-dot{background-color:var(--sx-chrome)}.vfader{display:flex;flex-direction:column;align-items:center;gap:5px}.vfader label{font-size:var(--sx-fs-2xs);color:var(--sx-text-3);letter-spacing:.08em}.vol-row{flex:1;min-height:130px;display:flex;gap:7px;align-items:stretch}.vfader .fader.v{height:100%}.vu{width:11px;background-color:var(--sx-surface-3);border:1px solid var(--sx-line);border-radius:var(--sx-radius-xs);overflow:hidden;position:relative}.vu:after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--level, 0%);background:linear-gradient(0deg,var(--sx-meter-low),var(--sx-meter-mid) 72%,var(--sx-meter-high));transition:height .06s linear}.vu:before{content:"";position:absolute;left:0;right:0;bottom:var(--peak, 0%);height:2px;background-color:var(--sx-marker);opacity:.75;z-index:1}.fader{position:relative;touch-action:none;user-select:none}.fader.v{width:46px}.fader.h{width:100%;height:44px}.fader-track{position:absolute;background:linear-gradient(90deg,var(--sx-well),var(--sx-surface-2));border:1px solid var(--sx-shade);border-radius:var(--sx-radius-sm);box-shadow:inset 0 1px 3px var(--sx-shade),inset 0 0 0 1px var(--sx-rim)}.fader.v .fader-track{left:50%;top:8px;bottom:8px;width:8px;transform:translate(-50%)}.fader.h .fader-track{top:50%;left:10px;right:10px;height:8px;transform:translateY(-50%)}.fader-fill{position:absolute;border-radius:var(--sx-radius-sm);opacity:.7}.fader.v .fader-fill{left:0;right:0;bottom:0;background:linear-gradient(0deg,color-mix(in srgb,var(--sx-accent) 55%,var(--sx-btn-hi)),transparent)}.fader.h .fader-fill{display:none}.fader-ticks{position:absolute;inset:0;pointer-events:none}.tick{position:absolute;background:color-mix(in srgb,var(--sx-chrome) 22%,transparent)}.fader.v .tick{left:50%;width:15px;height:1px;transform:translate(-50%,50%)}.fader.v .tick.major{width:25px;height:2px;background:color-mix(in srgb,var(--sx-chrome) 50%,transparent)}.fader.h .tick{top:50%;width:1px;height:15px;transform:translate(-50%,-50%)}.fader.h .tick.major{width:2px;height:25px;background:color-mix(in srgb,var(--sx-chrome) 50%,transparent)}.tick-label{position:absolute;font-size:var(--sx-fs-3xs);color:var(--sx-text-3);white-space:nowrap}.fader.v .tick-label{left:calc(50% + 16px);transform:translateY(50%)}.fader.h .tick-label{top:calc(50% + 16px);transform:translate(-50%)}.fader-handle{position:absolute;border-radius:var(--sx-radius-sm);background:linear-gradient(180deg,var(--sx-metal-hi),var(--sx-metal-mid));box-shadow:var(--sx-shadow-1),inset 0 1px 0 var(--sx-metal-hi);border:1px solid var(--sx-metal-edge)}.fader.v .fader-handle{left:50%;width:34px;height:20px;transform:translate(-50%,50%)}.fader.h .fader-handle{top:50%;width:22px;height:34px;transform:translate(-50%,-50%)}.fader-handle:after{content:"";position:absolute;background:color-mix(in srgb,var(--sx-darken) 35%,transparent);border-radius:var(--sx-radius-2xs)}.fader.v .fader-handle:after{left:8%;right:8%;top:50%;height:2px;transform:translateY(-50%)}.fader.h .fader-handle:after{top:8%;bottom:8%;left:50%;width:2px;transform:translate(-50%)}.fader:active .fader-handle{background:linear-gradient(180deg,var(--sx-metal-hi),var(--sx-metal-mid))}.deck-rail{flex:none;width:66px;display:flex;flex-direction:column;align-items:center;padding:8px 2px;gap:4px}.rail-label{font-size:var(--sx-fs-2xs);letter-spacing:.1em;color:var(--sx-text-3)}.deck-rail .fader.v{flex:1;min-height:120px}.rail-read{font-size:var(--sx-fs-xs);color:var(--sx-text-1);font-family:var(--font-mono);font-variant-numeric:tabular-nums;background-color:var(--sx-surface-3);border:1px solid var(--sx-line);border-radius:var(--sx-radius-sm);padding:1px 6px}.track-bpm,.fs-timer,.coach-prog{font-family:var(--font-mono)}.crossfade-col{flex:1;display:flex;flex-direction:column;gap:.5rem;padding:0 .5rem;min-width:0}.sampler-inline{flex:1;display:flex;flex-direction:column;gap:.4rem;min-height:0}.crossfade-col .sampler-pads{grid-template-columns:repeat(4,1fr)}.crossfade-col .crossfader-wrap{width:58%;margin:.2rem auto 0}.crossfader-wrap{display:flex;align-items:center;gap:.7rem}.xf-end{font-weight:800;color:var(--sx-text-3);width:14px;text-align:center}.crossfader-wrap .fader.h{flex:1}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:var(--sx-radius-2xs);background-color:var(--sx-surface-3);border:1px solid var(--sx-line)}input[type=range]::-moz-range-track{height:5px;border-radius:var(--sx-radius-2xs);background-color:var(--sx-surface-3);border:1px solid var(--sx-line)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:var(--sx-radius-xs);background-color:var(--sx-metal-hi);box-shadow:var(--sx-shadow-1);border:1px solid var(--sx-metal-edge)}input[type=range]::-moz-range-thumb{width:18px;height:18px;border:1px solid var(--sx-metal-edge);border-radius:var(--sx-radius-xs);background-color:var(--sx-metal-hi)}.volume::-webkit-slider-thumb{width:26px;height:16px}#crossfader::-webkit-slider-thumb{width:22px;height:26px;border-radius:var(--sx-radius-xs)}.dialog{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background-color:var(--sx-scrim);backdrop-filter:blur(6px)}.dialog[hidden]{display:none}.dialog-card{width:min(440px,92vw);background-color:var(--sx-overlay);border:1px solid var(--sx-line);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--sx-shadow-3),inset 0 1px 1px var(--sx-hilite);backdrop-filter:blur(12px)}.dialog-card.wide{width:min(560px,94vw)}.dialog-card h3{margin:0 0 .6rem}#settings-body{max-height:60vh;overflow-y:auto;margin:.6rem 0 1rem;padding-right:.3rem}.set-group-title{font-size:var(--sx-fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--sx-text-3);margin:.9rem 0 .3rem;border-bottom:1px solid var(--sx-line);padding-bottom:.2rem}.set-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.3rem .1rem;font-size:var(--sx-fs-lg)}.set-row input[type=range]{width:150px}.key-btn{min-width:80px;text-align:center;font-weight:700;font-size:var(--sx-fs-md);padding:.35rem .6rem;border-radius:var(--sx-radius-md);background-color:var(--sx-surface-3);color:var(--sx-text-1);border:1px solid var(--sx-line);border-bottom-width:2px;cursor:pointer}.key-btn:hover{background-color:var(--sx-btn-hover-hi)}.key-btn.capturing{background-color:var(--sx-accent);color:var(--sx-ink-on-accent);border-color:var(--sx-accent);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.6}}#practice-btn{flex:none;height:30px;padding:0 .7rem;border-radius:999px;cursor:pointer;font-weight:700;font-size:var(--sx-fs-md);color:var(--sx-ink-on-accent);border:none;background:linear-gradient(90deg,var(--sx-brand-a),var(--sx-accent))}#practice-list{max-height:60vh;overflow-y:auto;margin:.6rem 0 1rem;padding-right:.3rem}.practice-cat{font-size:var(--sx-fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--sx-brand-a-ink);margin:.9rem 0 .4rem}.lesson-btn{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background-color:var(--sx-surface-3);border:1px solid var(--sx-line);border-radius:var(--sx-radius);padding:.6rem .8rem;margin-bottom:.4rem;cursor:pointer;color:var(--sx-text-1);transition:background .12s,transform .05s}.lesson-btn:hover{background-color:var(--sx-btn-hover-hi)}.lesson-btn:active{transform:scale(.99)}.lesson-title{font-weight:700;font-size:var(--sx-fs-lg)}.lesson-blurb{font-size:var(--sx-fs-md);color:var(--sx-text-3)}#coach{position:fixed;z-index:45;top:56px;left:50%;transform:translate(-50%);width:min(560px,94vw);background-color:var(--sx-overlay);border:1px solid var(--sx-accent-ink);border-radius:var(--radius);box-shadow:var(--sx-shadow-3);backdrop-filter:blur(6px)}#coach[hidden]{display:none}.coach-head{display:flex;align-items:center;justify-content:space-between;padding:.45rem .7rem;border-bottom:1px solid var(--sx-line);background:linear-gradient(90deg,color-mix(in srgb,var(--sx-brand-a) 12%,transparent),transparent);border-radius:var(--radius) var(--radius) 0 0}.coach-title{font-weight:700;font-size:var(--sx-fs-base);color:var(--sx-brand-a-ink)}.coach-head-btns{display:flex;gap:.3rem}.coach-min,.coach-x{width:24px;height:24px;border-radius:var(--sx-radius-sm);border:1px solid var(--sx-line);background-color:var(--sx-surface-3);color:var(--sx-text-1);cursor:pointer;font-weight:700;line-height:1}.coach-body{padding:.7rem .85rem .85rem}#coach.min .coach-body{display:none}.coach-text{margin:0 0 .6rem;font-size:var(--sx-fs-lg);line-height:1.45}.coach-meta{display:flex;gap:.5rem;font-size:var(--sx-fs-base);color:var(--sx-text-3);min-height:1rem}.coach-prog{color:var(--sx-brand-a-ink);font-weight:700;font-variant-numeric:tabular-nums}.coach-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.7rem}.coach-check{display:none;text-align:center;font-size:1.6rem;color:var(--sx-ok-ink);font-weight:800;margin:.2rem 0}.coach-check.show{display:block;animation:pop .4s ease}@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.25)}to{transform:scale(1);opacity:1}}.coach-done{text-align:center;font-size:var(--sx-fs-2xl);font-weight:800;color:var(--sx-ok-ink);padding:.6rem}.coach-done span{color:var(--sx-text-1);font-weight:600;font-size:var(--sx-fs-lg)}.coach-beat{display:flex;align-items:center;gap:.6rem;margin:.4rem 0 .1rem;min-height:26px}.coach-bdot{width:18px;height:18px;border-radius:50%;background-color:var(--sx-brand-a);flex:none;box-shadow:0 0 12px var(--sx-brand-a);transition:transform .04s linear,opacity .04s linear}.coach-fb{font-weight:800;font-size:var(--sx-fs-lg)}.coach-fb.perfect{color:var(--sx-ok-ink)}.coach-fb.ok{color:var(--sx-warn-ink)}.coach-fb.off{color:var(--sx-danger)}.coach-target{outline:3px solid var(--sx-brand-a-ink)!important;outline-offset:3px;border-radius:var(--sx-radius);animation:coachPulse 1.2s infinite;position:relative;z-index:6}@keyframes coachPulse{0%,to{box-shadow:0 0 color-mix(in srgb,var(--sx-brand-a) 50%,transparent)}50%{box-shadow:0 0 0 9px transparent}}.knob-dial{width:52px;height:52px}.knob{width:40px;height:40px;top:6px;left:6px}.eq{gap:.4rem}.knob.filter-knob .knob-dot{background-color:var(--sx-chrome)}.dbl-btn{flex:none;font-weight:700}.sampler-section{background-color:var(--sx-surface-1);border:1px solid var(--sx-line);border-radius:var(--radius);padding:.5rem .7rem;flex:none}.sampler-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.45rem}.sampler-title{font-weight:800;letter-spacing:.12em;font-size:var(--sx-fs-sm);color:var(--sx-deck-b-ink)}.sampler-hint{font-size:var(--sx-fs-sm);color:var(--sx-text-3);flex:1}.samp-vol-wrap{display:flex;align-items:center;gap:.4rem}.samp-vol-wrap label{font-size:var(--sx-fs-2xs);color:var(--sx-text-3);letter-spacing:.08em}#sampler-vol{width:100px;accent-color:var(--sx-deck-b)}.sampler-pads{display:grid;grid-template-columns:repeat(8,1fr);gap:.4rem}.samp-pad{position:relative;min-height:46px;border-radius:var(--sx-radius-md);cursor:pointer;user-select:none;background:linear-gradient(180deg,var(--sx-btn-hi),var(--sx-btn-lo));border:1px solid var(--sx-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;transition:transform .05s ease,background .12s}.samp-pad:hover{background-color:var(--sx-btn-hover-hi)}.samp-pad.loaded{border-color:var(--sx-deck-b-ink);background:linear-gradient(180deg,color-mix(in srgb,var(--sx-deck-b) 20%,transparent),var(--sx-btn-lo))}.samp-pad.hit{transform:scale(.93);background-color:var(--sx-deck-b);color:var(--sx-ink-on-accent)}.samp-key{font-size:var(--sx-fs-md);font-weight:800}.samp-name{font-size:var(--sx-fs-2xs);color:var(--sx-text-3);max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.samp-pad.loaded .samp-name{color:var(--sx-text-1)}.loop-row{display:flex;gap:.3rem;align-items:center;margin-top:.35rem;flex-wrap:wrap}.loop-label{font-size:var(--sx-fs-2xs);letter-spacing:.1em;color:var(--sx-text-3);margin-right:.1rem}.loop-btn{padding:.3rem .5rem;font-size:var(--sx-fs-sm);font-weight:700}.loop-auto.active{background-color:var(--sx-accent);color:var(--sx-ink-on-accent);border-color:var(--sx-accent)}.fx-row{display:flex;align-items:center;gap:.6rem;flex:none;background-color:var(--sx-surface-1);border:1px solid var(--sx-line);border-radius:var(--radius);padding:.5rem .7rem}.deck-fx{display:flex;gap:.4rem;flex:none}.fx-brake,.fx-spin{font-size:var(--sx-fs-sm);font-weight:700}.fx-brake.held{background-color:var(--sx-danger);color:var(--sx-ink-on-danger);border-color:var(--sx-danger)}.fx-spin:active{background-color:var(--sx-deck-b);color:var(--sx-ink-on-accent)}.beatfx{flex:1;display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap}.fx-select{display:flex;gap:.3rem}.fx-btn{font-size:var(--sx-fs-sm);font-weight:700;padding:.35rem .6rem}.fx-btn.active{background:linear-gradient(90deg,var(--sx-brand-a),var(--sx-accent));color:var(--sx-ink-on-accent);border:none}.fx-depth{display:flex;align-items:center;gap:.4rem}.fx-depth label{font-size:var(--sx-fs-2xs);color:var(--sx-text-3);letter-spacing:.08em}#fx-depth{width:110px;accent-color:var(--sx-accent)}.fx-on{font-weight:800}.fx-on.active{background-color:var(--sx-danger);color:var(--sx-ink-on-danger);border-color:var(--sx-danger)}.transport{flex-wrap:wrap}.transport-center{display:flex;align-items:center;flex:none}.tp-start,.tp-rew,.tp-ff{padding:.45rem .5rem;font-size:var(--sx-fs-lg)}.tp-rew.held,.tp-ff.held{background-color:var(--sx-accent);color:var(--sx-ink-on-accent);border-color:var(--sx-accent)}.sync-btn{font-weight:800}.sync-btn:active{background-color:var(--sx-brand-a);color:var(--sx-ink-on-accent)}.both-btn{font-weight:800;white-space:nowrap}.both-btn.playing{background:linear-gradient(90deg,var(--sx-brand-a),var(--sx-accent));color:var(--sx-ink-on-accent);border:none}.samp-stop{display:none;position:absolute;top:3px;right:3px;width:24px;height:24px;padding:0;line-height:1;font-size:var(--sx-fs-xs);border-radius:var(--sx-radius-xs);background-color:var(--sx-danger);color:var(--sx-ink-on-danger);border:none;cursor:pointer;z-index:2;align-items:center;justify-content:center}.samp-pad.playing .samp-stop{display:flex}.samp-pad.playing{outline:2px solid var(--sx-brand-a-ink);outline-offset:-2px}.samp-stopall{font-weight:700;padding:.3rem .55rem}.freestyle-btn{border-color:var(--sx-deck-b-ink);background:linear-gradient(90deg,color-mix(in srgb,var(--sx-deck-b) 14%,transparent),var(--sx-surface-3))}.freestyle-btn:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--sx-deck-b) 25%,transparent),var(--sx-btn-hover-hi))}.fs-timer{font-size:2.2rem;font-weight:900;text-align:center;color:var(--sx-brand-a-ink);font-variant-numeric:tabular-nums}.fs-timer span{font-size:var(--sx-fs-xl);color:var(--sx-text-3)}.fs-live{text-align:center;font-size:var(--sx-fs-lg);color:var(--sx-text-1);margin:.3rem 0}.fs-live b{color:var(--sx-brand-a-ink)}.fs-hint{text-align:center;font-size:var(--sx-fs-md);color:var(--sx-text-3)}.fs-score{font-size:2.6rem;font-weight:900;text-align:center;line-height:1;background:linear-gradient(90deg,var(--sx-deck-a-ink),var(--sx-deck-b-ink));-webkit-background-clip:text;background-clip:text;color:transparent}.fs-score span{font-size:var(--sx-fs-xl);color:var(--sx-text-3);-webkit-text-fill-color:var(--sx-text-3)}.fs-rank{text-align:center;font-weight:800;margin:.2rem 0 .6rem}.fs-bars{display:flex;flex-direction:column;gap:4px}.fs-bar{display:grid;grid-template-columns:78px 1fr 42px;align-items:center;gap:8px;font-size:var(--sx-fs-sm);color:var(--sx-text-3)}.fs-bar b{color:var(--sx-text-1);text-align:right;font-variant-numeric:tabular-nums}.fs-track{height:7px;background-color:var(--sx-surface-3);border:1px solid var(--sx-line);border-radius:var(--sx-radius-xs);overflow:hidden}.fs-track i{display:block;height:100%;background:linear-gradient(90deg,var(--sx-brand-a),var(--sx-accent))}.fs-tips{margin:.6rem 0 0;padding-left:1.1rem;font-size:var(--sx-fs-md);color:var(--sx-text-1);line-height:1.5}.coach-body{max-height:calc(100vh - 130px);overflow-y:auto}.fs-timer{display:flex;align-items:center;justify-content:center;gap:.5rem}.fs-beatdot{width:16px;height:16px;border-radius:50%;background-color:var(--sx-brand-a);box-shadow:0 0 12px var(--sx-brand-a);transition:transform .04s linear,opacity .04s linear}.fs-live2{text-align:center;font-size:var(--sx-fs-md);color:var(--sx-text-3)}.fs-onbeat{text-align:center;font-size:var(--sx-fs-base);color:var(--sx-text-3);margin:.4rem 0 .2rem}.fs-onbeat b{color:var(--sx-brand-a-ink)}.fs-best{background-color:var(--sx-deck-b);color:var(--sx-ink-on-accent);font-size:var(--sx-fs-2xs);padding:1px 6px;border-radius:999px;vertical-align:middle}.fs-board-title{font-size:var(--sx-fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--sx-text-3);margin:.7rem 0 .3rem}.fs-board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.fs-board li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;font-size:var(--sx-fs-base);padding:3px 8px;border-radius:var(--sx-radius-sm);background-color:var(--sx-surface-3)}.fs-board li.me{outline:1px solid var(--sx-brand-a-ink)}.fs-board li b{color:var(--sx-brand-a-ink);font-variant-numeric:tabular-nums}.fs-board li em{color:var(--sx-text-3);font-style:normal;font-size:var(--sx-fs-sm)}.fs-playback{display:flex;gap:.5rem;margin-top:.7rem}.fs-play{flex:1}.fs-dl{text-decoration:none;display:inline-flex;align-items:center}@media(max-width:720px){#practice-btn span:not(.ic){display:none}#coach{top:52px;width:94vw}}.muted{color:var(--sx-text-3);font-size:var(--sx-fs-lg)}#url-input{width:100%;margin:.8rem 0;padding:.6rem .7rem;background-color:var(--sx-surface-3);border:1px solid var(--sx-line);border-radius:var(--sx-radius-md);color:var(--sx-text-1)}.dialog-actions{display:flex;gap:.6rem;justify-content:flex-end}.help-list{line-height:1.7;font-size:var(--sx-fs-lg);padding-left:1.1rem}.help-section{margin:.9rem 0 .2rem;color:var(--sx-text-3);font-size:var(--sx-fs-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase}.help-section:first-of-type{margin-top:.4rem}.help-list kbd{background-color:var(--sx-surface-3);border:1px solid var(--sx-line);border-bottom-width:2px;border-radius:var(--sx-radius-xs);padding:1px 6px;font-size:var(--sx-fs-md)}#help-keys{max-height:30vh;overflow-y:auto;margin-top:.4rem}.help-keys-grid{display:grid;grid-template-columns:1fr auto 1fr auto;gap:3px 12px;align-items:center;font-size:var(--sx-fs-md);color:var(--sx-text-3)}.help-keys-grid kbd{justify-self:end;background-color:var(--sx-surface-3);border:1px solid var(--sx-line);border-bottom-width:2px;border-radius:var(--sx-radius-xs);padding:1px 6px;font-size:var(--sx-fs-sm);color:var(--sx-text-1)}.deck-meta.dragover,.jog-pad.dragover{outline:2px dashed var(--sx-accent-ink);outline-offset:-4px}.needle-ripple{position:absolute;z-index:7;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid var(--sx-danger);pointer-events:none;animation:needleRipple .45s ease-out forwards}@keyframes needleRipple{0%{transform:scale(.4);opacity:.9}to{transform:scale(3.4);opacity:0}}#tour-tip{position:fixed;z-index:70;left:50%;bottom:22px;transform:translate(-50%);width:min(400px,92vw);padding:.9rem 1rem;background-color:var(--sx-overlay);border:1px solid var(--sx-brand-a-ink);border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-3)}#tour-tip .tour-text{margin:0 0 .7rem;font-size:var(--sx-fs-lg);line-height:1.45}#tour-tip .tour-actions{display:flex;align-items:center;gap:.5rem;justify-content:flex-end}#tour-tip .tour-count{margin-right:auto;color:var(--sx-text-3);font-size:var(--sx-fs-md);font-family:var(--font-mono)}.knob:focus-visible,.fader:focus-visible,.jog-pad:focus-visible,.samp-pad:focus-visible,.master-knob:focus-visible,.preset-select:focus-visible,.dialog button:focus-visible,.dialog select:focus-visible,.dialog input:focus-visible,.dialog a:focus-visible{outline:2px solid var(--sx-focus);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.needle-ripple{display:none}}.skip-link{position:absolute;left:10px;top:10px;z-index:120;padding:8px 14px;border-radius:var(--sx-radius-md);background-color:var(--sx-surface-3);color:var(--sx-text-1);border:1px solid var(--sx-line-strong);font-size:var(--sx-fs-base);font-weight:700;text-decoration:none;transform:translateY(-300%)}.skip-link:focus-visible{transform:none;outline:2px solid var(--sx-focus);outline-offset:2px}#toast{position:fixed;bottom:16px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;z-index:60}.toast-pill{background-color:var(--sx-surface-3);border:1px solid var(--sx-line);color:var(--sx-text-1);padding:.6rem 1rem;border-radius:999px;font-size:var(--sx-fs-lg);opacity:0;transform:translateY(20px);transition:opacity .25s,transform .25s}.toast-pill.show{opacity:1;transform:none}.toast-error{border-color:color-mix(in srgb,var(--sx-danger) 60%,var(--sx-line));background:color-mix(in srgb,var(--sx-danger) 14%,var(--sx-surface-3))}.toast-ok{border-color:color-mix(in srgb,var(--sx-ok) 55%,var(--sx-line))}@media(pointer:coarse){.btn{padding:.6rem .8rem}.btn,.hotcue-chip,.knob,.master-knob,.samp-stop,.deck-pick,.kbd-range-jump,.coach-min,.coach-x,#help-btn,.samp-row-x,.page-btn,.page-arrow,.strip-toggle,.strip-more,.degree-btn,.inst-tab,.song-chip-btn,.song-chip-btn2{position:relative}.btn:before,.hotcue-chip:before,.knob:before,.master-knob:before,.samp-stop:before,.deck-pick:before,.kbd-range-jump:before,.coach-min:before,.coach-x:before,#help-btn:before,.samp-row-x:before,.page-btn:before,.page-arrow:before,.strip-toggle:before,.strip-more:before,.degree-btn:before,.inst-tab:before,.song-chip-btn:before,.song-chip-btn2:before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}.song-chip-btn,.song-chip-btn2{min-width:30px;min-height:30px}.hotcue-chip{min-height:30px}.samp-stop{width:24px;height:24px;font-size:var(--sx-fs-sm)}}@media(pointer:coarse)and (min-height:561px){.knob{width:44px;height:44px}}.preset-select{background-color:var(--sx-surface-3);color:var(--sx-text-1);border:1px solid var(--sx-line);border-radius:var(--sx-radius-md);padding:.45rem .4rem;font-size:var(--sx-fs-md);font-weight:600;cursor:pointer;transition:background .12s ease}.preset-select:hover{background-color:var(--sx-btn-hover-hi)}.preset-select option{background-color:var(--sx-surface-1);color:var(--sx-text-1)}#record-btn{flex:none;height:30px;padding:0 .8rem;border-radius:999px;cursor:pointer;font-weight:700;font-size:var(--sx-fs-md);border:1px solid var(--sx-line);background-color:var(--sx-surface-3);color:var(--sx-text-1);display:flex;align-items:center;gap:.4rem;transition:all .2s ease}#record-btn:hover{background-color:var(--sx-btn-hover-hi)}#record-btn.recording{background-color:var(--sx-danger);color:var(--sx-ink-on-danger);border-color:var(--sx-danger);box-shadow:var(--sx-glow-danger);animation:recPulse 1.5s infinite}@keyframes recPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(.97)}}.deck-fx-panel{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:.4rem;padding:.45rem .5rem;border-left:1px dashed var(--sx-line);border-right:1px dashed var(--sx-line);background-color:var(--sx-wash-1);width:150px;flex:none;box-sizing:border-box}.deck-fx-panel .fx-panel-row{display:flex;gap:.4rem;width:100%}.deck-fx-panel .fx-panel-row .btn{flex:1;font-size:var(--sx-fs-sm);padding:.4rem 0;font-weight:700}.deck-fx-panel .fx-select{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;width:100%}.deck-fx-panel .fx-btn{font-size:var(--sx-fs-sm);padding:.35rem .5rem;width:100%;text-align:center;font-weight:700;border-radius:var(--sx-radius-sm);border:1px solid var(--sx-line);background-color:var(--sx-surface-3);color:var(--sx-text-1);cursor:pointer;transition:all .12s ease}.deck-fx-panel .fx-btn:hover{background-color:var(--sx-btn-hover-hi)}.channel[data-deck=A] .fx-btn.active{background:linear-gradient(90deg,var(--sx-deck-a),var(--sx-accent))!important;color:var(--sx-ink-on-accent)!important;border:none}.channel[data-deck=B] .fx-btn.active{background:linear-gradient(90deg,var(--sx-deck-b),color-mix(in srgb,var(--sx-deck-b) 70%,var(--sx-lighten)))!important;color:var(--sx-ink-on-accent)!important;border:none}.deck-fx-panel .fx-depth{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.deck-fx-panel .fx-depth label{font-size:var(--sx-fs-2xs);color:var(--sx-text-3);letter-spacing:.08em;text-transform:uppercase}.deck-fx-panel .fx-depth-slider{width:100%!important}.channel[data-deck=A] .fx-depth-slider{accent-color:var(--sx-deck-a)}.channel[data-deck=B] .fx-depth-slider{accent-color:var(--sx-deck-b)}.deck-fx-panel .fx-on{width:100%;font-weight:800;font-size:var(--sx-fs-md);padding:.5rem 0;transition:all .2s ease}.deck-fx-panel .fx-on.active{background-color:var(--sx-danger)!important;color:var(--sx-ink-on-danger)!important;border-color:var(--sx-danger)!important;box-shadow:var(--sx-glow-danger);animation:fxPulse 1s infinite alternate}.channel[data-deck=A] .fx-spin:active{background-color:var(--sx-deck-a)!important;color:var(--sx-ink-on-accent)!important}.channel[data-deck=B] .fx-spin:active{background-color:var(--sx-deck-b)!important;color:var(--sx-ink-on-accent)!important}@keyframes fxPulse{0%{transform:scale(1)}to{transform:scale(.96)}}.center-divider-mini{display:none}.loop-to-pad{border-color:var(--sx-deck-b-ink)!important;color:var(--sx-deck-b-ink)!important;background:color-mix(in srgb,var(--sx-deck-b) 8%,transparent)!important;font-weight:800!important;transition:all .2s ease}.loop-to-pad:hover{background-color:var(--sx-deck-b)!important;color:var(--sx-ink-on-accent)!important}.loop-to-pad.active{background-color:var(--sx-deck-b)!important;color:var(--sx-ink-on-accent)!important;box-shadow:var(--sx-glow-danger);animation:mapPulse 1s infinite alternate}.samp-pad.mappable{border-color:var(--sx-brand-a-ink);animation:padPulse 1s infinite alternate;cursor:pointer}@keyframes mapPulse{0%{transform:scale(1)}to{transform:scale(.97)}}@keyframes padPulse{0%{box-shadow:0 0 0 var(--sx-brand-a)}to{box-shadow:0 0 8px var(--sx-brand-a);border-color:var(--sx-focus)}}
