.vis{aspect-ratio:1;-webkit-user-select:none;user-select:none;grid-template-rows:minmax(0,1fr) auto auto;place-items:center;gap:6px;inline-size:clamp(220px,100dvh - 530px,min(100%,300px));display:grid;position:relative}.vis-svg{touch-action:pan-y;block-size:100%;min-block-size:0;inline-size:100%;display:block;overflow:visible}.vis-field{fill:var(--color-accent);fill-opacity:.06}.vis-hit{fill:#0000}.vis-center{text-align:center;place-items:center;min-block-size:0;display:grid}.vis-center .bpm-display{gap:0}.vis-center .bpm-value{font-size:clamp(2.25rem,17dvh - 90.1px,3.25rem)}.vis-center .bpm-input{font-size:2.5rem}.vis-center .bpm-term{font-size:var(--fs-12)}.vis-rings .vis-center,.vis-bars .vis-center{grid-row:2/4}.live-bpm .bpm-value{cursor:default}.vis[data-silent] .vis-svg,.vis[data-silent] .pads{opacity:.55}.beat-row{grid-template-columns:repeat(var(--n), minmax(0, 1fr));inline-size:100%;max-inline-size:calc(var(--n) * 44px);gap:4px;display:grid}.beat-cell{background:var(--color-faint);border-radius:9px;align-content:end;justify-items:center;block-size:34px;padding-block-end:2px;display:grid;position:relative;overflow:hidden}.beat-cell i{background:var(--color-text);opacity:.18;transition:block-size var(--dur-ui) var(--ease-out);border-radius:0;position:absolute;inset-block-end:0;inset-inline:0}.beat-cell b{font-size:var(--fs-12);color:var(--color-text);font-weight:700;position:relative}.beat-cell[data-acc=mute]{box-shadow:inset 0 0 0 1.5px var(--color-faint);background:0 0}.beat-cell[data-on]{background:var(--color-accent-soft)}.beat-cell[data-on] i{background:var(--color-accent);opacity:1}button.beat-cell{min-block-size:34px}@media (pointer:coarse){.beat-cell{block-size:40px}}.pend-tick{stroke:var(--color-text);stroke-opacity:.35;stroke-width:2px;stroke-linecap:round}.pend-rod{stroke:var(--color-text);stroke-width:4px;stroke-linecap:round}.pend-tip{fill:var(--color-text)}.pend-ghost{stroke:var(--color-accent);stroke-width:2px;stroke-linecap:round}.pend-weight rect{fill:var(--color-accent)}.pend-band{stroke:var(--color-accent-text);stroke-opacity:.45;stroke-width:2.5px}.pend-weight.drag{cursor:grab}.pend-pivot{fill:var(--color-bg);stroke:var(--color-text);stroke-width:3px}.pend-pivot-in{fill:var(--color-text)}.pend-arm[data-silent] .pend-rod{stroke-dasharray:6 6}.vis-pads{grid-template-rows:minmax(0,1fr) auto auto}.pads{grid-template-columns:repeat(var(--n), minmax(0, 1fr));gap:clamp(3px, calc(24px / var(--n)), 8px);block-size:100%;min-block-size:96px;inline-size:100%;display:grid}.pad{grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;gap:2px;min-block-size:0;display:grid}.pad-bar{border-radius:var(--r-md);background:var(--color-faint);block-size:100%;inline-size:100%;transition:box-shadow var(--dur-ui);position:relative;overflow:hidden}.pad i{background:var(--color-text);opacity:.85;transition:block-size var(--dur-ui) var(--ease-out), background-color 80ms;position:absolute;inset-block-end:0;inset-inline:0}.pad b{font-size:var(--fs-13);font-weight:700;line-height:1.1}.pad small{font-size:var(--fs-12);color:var(--color-muted);font-weight:600;line-height:1}.pad[data-acc=mute] .pad-bar{box-shadow:inset 0 0 0 1.5px var(--color-faint);background:0 0}.pad[data-on] i{background:var(--color-accent);opacity:1}.pad[data-on] .pad-bar{box-shadow:inset 0 0 0 2px var(--color-accent)}.pad-subs{grid-template-columns:repeat(var(--n), 1fr);inline-size:min(100%, calc(var(--n) * 52px));gap:6px;display:grid}.pad-sub{background:var(--color-text);opacity:.22;border-radius:8px;block-size:28px}.pad-sub:disabled{opacity:.6}.pad-sub[aria-pressed=false]{box-shadow:inset 0 0 0 1.5px var(--color-text);opacity:.3;background:0 0}.pad-sub[data-on]{background:var(--color-accent);opacity:1}@media (pointer:coarse){.pad-sub{block-size:36px}}.ring-a,.ring-b{fill:none;stroke:var(--color-faint);stroke-width:2px}.shape-a{fill:none;stroke:var(--color-text);stroke-opacity:.55;stroke-width:2px;stroke-linejoin:round}.shape-b{fill:var(--color-accent);fill-opacity:.1;stroke:var(--color-accent);stroke-width:2.5px;stroke-linejoin:round}.hand-a{stroke:var(--color-text);stroke-width:2.5px;stroke-linecap:round}.hand-b{stroke:var(--color-accent-strong);stroke-width:2.5px;stroke-linecap:round}.dot-a{fill:var(--color-bg);stroke:var(--color-text);stroke-width:2.5px;transition:fill 80ms}.dot-a[data-coin],.dot-a[data-on]{fill:var(--color-text)}.dot-b{fill:var(--color-bg);stroke:var(--color-accent-strong);stroke-width:2.5px;transition:fill 80ms}.dot-b[data-on]{fill:var(--color-accent);stroke:var(--color-accent)}.ring-hub{fill:var(--color-surface);stroke:var(--color-faint)}.ring-label{fill:var(--color-text);font-size:22px;font-weight:700}.ring-label .lb{fill:var(--color-accent-strong)}.vis-rings .vis-svg{grid-row:1}.gap-grid{grid-template-columns:1fr 1fr;gap:8px;inline-size:100%;margin:0;padding:0;list-style:none;display:grid}.gap-cell{border-radius:var(--r-md);background:var(--color-faint);gap:4px;min-block-size:44px;padding:6px 10px 8px;display:grid}.gap-cap{font-size:var(--fs-12);color:var(--color-muted);letter-spacing:0;font-weight:600}.gap-dots{grid-template-columns:repeat(var(--n), minmax(0, 1fr));place-items:center;gap:3px;display:grid}.gap-dots i{inline-size:clamp(5px, calc(56px / var(--n)), 11px);aspect-ratio:1;background:var(--color-text);border-radius:50%}.gap-dots i[data-f]{outline:2px solid var(--color-text);outline-offset:1px}.gap-cell[data-state=silent]{box-shadow:none;outline:1.5px dashed var(--color-muted);outline-offset:-1.5px;background:0 0}.gap-cell[data-state=silent] i{box-shadow:inset 0 0 0 1.5px var(--color-muted);background:0 0;outline:0}.gap-cell[data-state=unknown]{outline:1.5px dotted var(--color-faint);outline-offset:-1.5px;background:0 0}.gap-cell[data-state=unknown] i{background:var(--color-faint);outline:0}.gap-cell[data-on]{box-shadow:inset 0 0 0 2px var(--color-accent)}.gap-cell[data-on][data-state=silent]{outline-color:var(--color-accent-strong)}.gap-dots i[data-on]{background:var(--color-accent);box-shadow:none;transform:scale(1.25)}@media (max-height:760px){.gap-cell{padding-block:4px 6px}.gap-cap{font-size:11px}}.ball-floor{stroke:var(--color-text);stroke-opacity:.2;stroke-width:2px;stroke-linecap:round}.ball-arc{fill:none;stroke:var(--color-text);stroke-opacity:.22;stroke-width:1.5px;stroke-dasharray:3 5}.ball-pad{fill:var(--color-text);fill-opacity:.45}.ball-pad[data-acc=f]{fill-opacity:.85}.ball-pad[data-acc=mute]{fill:none;stroke:var(--color-text);stroke-opacity:.4;stroke-dasharray:2 2}.ball-pad[data-on]{fill:var(--color-accent);fill-opacity:1}.ball{fill:var(--color-accent);stroke:var(--color-accent-strong);stroke-width:1.5px}.ball[data-silent]{fill:var(--color-bg)}.ball-shadow{fill:var(--color-text);fill-opacity:.12}.flash-pad{border-radius:var(--r-xl);background:var(--color-surface);block-size:100%;min-block-size:90px;inline-size:100%;box-shadow:var(--border);place-items:center;display:grid;position:relative;overflow:hidden}.flash-layer{background:var(--fc,var(--color-accent));opacity:0;position:absolute;inset:0}.flash-num{color:var(--color-text);font-size:clamp(3.5rem,32dvh - 169.6px,6rem);font-weight:700;line-height:1;position:relative}.vis-pick{z-index:2;position:absolute;inset-block-end:0;inset-inline-end:0}.vis-pick .ib{background:var(--color-surface);box-shadow:var(--border)}.vis-tiles{gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(96px,1fr));display:grid}.vis-tile{border-radius:var(--r-md);background:var(--color-surface-2);box-shadow:var(--border);font-size:var(--fs-13);justify-items:center;gap:6px;min-block-size:44px;padding:10px 6px 8px;font-weight:600;display:grid}.vis-tile svg{block-size:40px;inline-size:56px}.vis-tile[aria-pressed=true]{background:var(--color-on);color:var(--color-on-text);box-shadow:none}.swatches{gap:var(--s-2);flex-wrap:wrap;align-items:center;display:flex}.swatch{background:var(--sw);block-size:44px;inline-size:44px;box-shadow:var(--border);color:#16171a;border-radius:50%;place-items:center;display:grid}.swatch[aria-pressed=true],.swatch[data-on]{box-shadow:inset 0 0 0 3px var(--color-bg), 0 0 0 2px var(--color-text)}.swatch input{opacity:0;block-size:1px;inline-size:1px;position:absolute}.swatch.custom{background:var(--color-surface-2);color:var(--color-text);position:relative}.row .sub{font-size:var(--fs-13);color:var(--color-muted);font-weight:400;display:block}.calib{gap:var(--s-2);padding:var(--s-3);border-radius:var(--r-md);background:var(--color-surface-2);box-shadow:var(--border);display:grid}.calib-tap{border-radius:var(--r-lg);background:var(--color-accent);min-block-size:96px;color:var(--color-accent-text);font-weight:700;font-size:var(--fs-18);touch-action:manipulation}.calib-tap:active{transform:scale(.98)}.calib-dots{justify-content:center;gap:6px;display:flex}.calib-dots i{background:var(--color-faint);border-radius:50%;block-size:10px;inline-size:10px}.calib-dots i[data-on]{background:var(--color-accent-strong)}.mode-line{justify-content:center;align-items:center;gap:var(--s-2);flex-wrap:wrap;min-block-size:44px;display:flex}.mode-line .mode-summary{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:inline-flex}.mode-line .btn.sm{min-block-size:36px}.mode-live{text-align:center;font-size:var(--fs-13);color:var(--color-muted);font-variant-numeric:tabular-nums;min-block-size:1.4em;margin:0}.mode-result{justify-content:space-between;align-items:center;gap:var(--s-3);padding:10px 10px 10px var(--s-4);border-radius:var(--r-lg);background:var(--color-accent-soft);font-size:var(--fs-14);display:flex}.mode-result b{font-size:var(--fs-16)}.gap-strip{gap:3px;display:inline-flex}.gap-strip i{background:var(--color-text);opacity:.8;border-radius:4px;block-size:14px;inline-size:14px}.gap-strip i[data-silent]{outline:1.5px dashed var(--color-muted);outline-offset:-1.5px;opacity:1;background:0 0}.gap-strip i[data-on]{background:var(--color-accent);opacity:1;outline-color:var(--color-accent-strong)}.stepper{border-radius:var(--r-md);background:var(--color-surface-2);box-shadow:var(--border);grid-template-columns:44px 1fr 44px;align-items:center;gap:4px;display:grid}.stepper output{text-align:center;font-weight:700;font-size:var(--fs-18);font-variant-numeric:tabular-nums}.stepper .ib:disabled{opacity:.35}.steppers{gap:var(--s-3) var(--s-3);grid-template-columns:1fr 1fr;display:grid}.steppers label,.steppers .field{font-size:var(--fs-13);color:var(--color-muted);gap:4px;font-weight:600;display:grid}.plan{font-size:var(--fs-14);color:var(--color-muted);margin:0}.plan b{color:var(--color-text)}.kinds{gap:var(--s-2);grid-template-columns:1fr 1fr;display:grid}.kinds .chip{text-align:start;white-space:normal;justify-content:flex-start;gap:10px;min-block-size:52px;padding-block:6px;line-height:1.2}.kinds .chip svg{flex:none}.trainer-ring{aspect-ratio:1;pointer-events:none;inline-size:clamp(220px,100dvh - 530px,min(100%,300px));position:absolute;inset-block-start:0;inset-inline-start:50%;translate:-50%}[dir=rtl] .trainer-ring{translate:50%}.trainer-ring svg{block-size:100%;inline-size:100%;overflow:visible}.trainer-ring .track{fill:none;stroke:var(--color-track);stroke-width:4px}.trainer-ring .prog{fill:none;stroke:var(--color-accent-strong);stroke-width:4px;stroke-linecap:round}.trainer-bar{background:var(--color-track);pointer-events:none;border-radius:2px;block-size:4px;position:absolute;inset-block-end:-8px;inset-inline:10%;overflow:hidden}.trainer-bar i{background:var(--color-accent-strong);transform-origin:0;block-size:100%;inline-size:100%;display:block;transform:scaleX(0)}[dir=rtl] .trainer-bar i{transform-origin:100%}@media (min-width:1024px){.vis,.trainer-ring{inline-size:min(100%,470px)}.vis-center .bpm-value{font-size:5rem}.flash-num{font-size:9rem}.gap-cell{padding:10px 14px 12px}.pads{gap:10px}}.pyr-body{fill:var(--wood)}.pyr-grain{fill:none;stroke:var(--wood-grain);stroke-width:1.5px;stroke-linecap:round}.pyr-face{fill:var(--wood-face)}.pyr-tick{stroke:var(--wood-ink);stroke-opacity:.45;stroke-width:1.6px;stroke-linecap:round}.pyr-base{fill:var(--wood-dark)}.pyr-lamp{fill:var(--color-accent)}.pyr-lamp-rim{fill:none;stroke:var(--wood-dark);stroke-width:2px}.pyr-rod{stroke:var(--steel);stroke-width:4px;stroke-linecap:round}.pyr-weight path{fill:var(--color-accent);stroke:var(--wood-ink);stroke-opacity:.25;stroke-width:1px;stroke-linejoin:round}.pyr-weight.drag{cursor:grab}.pyr-pivot{fill:var(--steel);stroke:var(--wood-face);stroke-width:2.5px}.dpad-grid{grid-template-columns:repeat(var(--c), minmax(0, 1fr));grid-template-rows:repeat(var(--r), minmax(0, 1fr));gap:clamp(6px, calc(36px / var(--c)), 12px);block-size:100%;min-block-size:120px;inline-size:100%;display:grid}.dpad{--lit:0;border-radius:var(--r-lg);background:var(--color-surface-2);min-block-size:0;box-shadow:inset 0 0 0 1px var(--color-border), inset 0 -3px 0 var(--color-faint);transition:transform 70ms var(--ease-out);place-items:center;display:grid;position:relative;overflow:hidden}.dpad-lit{background:var(--color-accent);opacity:var(--lit);pointer-events:none;position:absolute;inset:0}.dpad[data-hit]{transform:scale(.96)}.dpad b{font-size:clamp(1.25rem, calc(80px / var(--c)), 2.25rem);color:var(--color-text);opacity:.85;font-weight:700;position:relative}.dpad-dots{gap:3px;display:flex;position:absolute;inset-block-start:8px;inset-inline-end:9px}.dpad-dots i{block-size:6px;inline-size:6px;box-shadow:inset 0 0 0 1.5px var(--color-muted);border-radius:50%}.dpad-dots i[data-on]{background:var(--color-text);box-shadow:none}.dpad[data-acc=mute]{box-shadow:inset 0 0 0 1.5px var(--color-faint);background:0 0}.dpad[data-acc=mute] b{opacity:.4}.vis-drum[data-silent] .dpad-lit{background:0 0}.vis-led{grid-template-rows:minmax(0,1fr) auto}.led-dev{border-radius:var(--r-xl);background:var(--device);inline-size:100%;box-shadow:inset 0 0 0 1px var(--color-border);align-content:center;gap:14px;padding:16px 14px 12px;display:grid}.led-strip{grid-template-columns:repeat(var(--n), minmax(0, 1fr));gap:clamp(4px, calc(40px / var(--n)), 10px);display:grid}.led-beat{grid-template-columns:repeat(var(--m), minmax(0, 1fr));align-items:center;gap:6px 3px;display:grid}.led-beat small{color:var(--device-ink);opacity:.6;grid-column:1/-1;justify-self:start;font-size:11px;font-weight:700}.led{background:var(--led-off);border-radius:3px;block-size:10px}.led.main{border-radius:8px;block-size:36px;min-block-size:36px}@media (min-width:1024px){.led.main{block-size:64px}.led{block-size:16px}.led-dev{padding:24px 22px 18px}}.led-beat[data-acc=mute] .led.main{box-shadow:inset 0 0 0 1.5px var(--led-off);background:0 0}.led[data-on]{background:var(--led-on)}.led.main[data-on][data-first]{background:var(--color-accent)}.led[data-on=ghost]{box-shadow:inset 0 0 0 1.5px var(--led-on);background:0 0}.led-meter{--lvl:0;grid-template-columns:repeat(12,1fr);gap:3px;display:grid}.led-meter i{background:var(--led-on);block-size:4px;opacity:clamp(.12, calc((var(--lvl) - var(--k) + .09) * 40), 1);border-radius:2px}.led-meter i:nth-child(n+10){background:var(--color-accent)}.vin-platter{fill:var(--color-surface-2);stroke:var(--color-border)}.vin-strobe{fill:var(--color-text);fill-opacity:.22}.vin-disc{fill:var(--vinyl)}.vin-groove{fill:none;stroke:var(--vinyl-groove);stroke-width:1px}.vin-label{fill:var(--color-accent)}.vin-label-mark{stroke:var(--color-accent-text);stroke-width:2.5px;stroke-linecap:round;stroke-opacity:.6}.vin-hole{fill:var(--color-surface-2)}.vin-mark{fill:var(--vinyl-groove);stroke:none}.vin-mark[data-acc=f]{fill:#f3f1ec}.vin-mark[data-acc=mute]{fill:none;stroke:var(--vinyl-groove);stroke-width:1.5px;stroke-dasharray:2 2}.vin-mark[data-first]{fill:var(--color-accent)}.vin-mark[data-on]{fill:#fff}.vin-arm-base{fill:var(--color-surface);stroke:var(--color-faint);stroke-width:2px}.vin-arm{fill:none;stroke:var(--steel);stroke-width:4.5px;stroke-linecap:round;stroke-linejoin:round}.vin-head{fill:var(--steel)}.vin-spark{fill:var(--color-accent)}.wave-screen{fill:var(--device);stroke:var(--color-border)}.wave-grid{stroke:var(--device-ink);stroke-opacity:.08;stroke-width:1px}.wave-past{fill:none;stroke:var(--color-accent);stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:round}.wave-future{fill:none;stroke:var(--device-ink);stroke-opacity:.28;stroke-width:1.5px;stroke-linejoin:round}.wave-now{stroke:var(--device-ink);stroke-opacity:.5;stroke-width:1.5px;stroke-dasharray:3 4}.wave-tick{stroke:var(--device-ink);stroke-opacity:.45;stroke-width:3px;stroke-linecap:round}.wave-tick.first{stroke:var(--color-accent);stroke-opacity:1}.cond-guide{fill:none;stroke:var(--color-text);stroke-opacity:.24;stroke-width:2px;stroke-dasharray:2 6;stroke-linecap:round}.cond-pt circle{fill:var(--color-surface);stroke:var(--color-faint);stroke-width:2px;transition:fill 90ms}.cond-pt text{fill:var(--color-muted);font-size:13px;font-weight:700}.cond-pt[data-acc=f] circle{stroke:var(--color-text);stroke-opacity:.5}.cond-pt[data-on] circle{fill:var(--color-accent);stroke:none}.cond-pt[data-on] text{fill:var(--color-accent-text)}.cond-stick{stroke:var(--color-text);stroke-opacity:.55;stroke-width:4px;stroke-linecap:round}.cond-trail line{stroke:var(--color-accent);stroke-linecap:round}.cond-tip{fill:var(--color-accent);stroke:var(--color-bg);stroke-width:2.5px}.cond-tip[data-silent]{fill:var(--color-bg);stroke:var(--color-accent)}@media (prefers-reduced-motion:reduce){.dpad{transition:none}.dpad[data-hit]{transform:none}}