.lab-synth{grid-template-columns:minmax(0,1fr);justify-items:center;gap:1rem;width:100%;min-width:0;margin-inline:auto;display:grid}.lab-synth:focus-visible{outline:none}.lab-synth>*{max-width:100%}.lab-piano{--whites:8}.lab-modal .lab-piano .lab-seg{gap:.25rem}.lab-modal .lab-piano .lab-seg .lab-btn{white-space:nowrap}@media (width<=480px){.lab-modal .lab-piano .lab-seg .lab-btn{letter-spacing:0;padding-inline:.45rem;font-size:.85rem}}.pk-now{text-align:center;min-width:3.5rem;font:700 1.4rem/1 var(--font-mono);color:var(--accent-ink)}.pk-board{grid-template-columns:repeat(var(--whites),1fr);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:min(100%,640px);height:clamp(9.5rem,34vw,13rem);box-shadow:var(--shadow-sm);display:grid;position:relative}.pk{appearance:none;font:inherit;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:0 0 var(--radius-sm) var(--radius-sm);flex-direction:column;justify-content:flex-end;align-items:center;gap:.15rem;padding:0 0 .6rem;display:flex}.pk-note{font:600 .72rem/1 var(--font-mono)}.pk-key{font:700 .8rem/1 var(--font-mono)}.pk--white{background:var(--surface);color:var(--text);border:1px solid var(--text3);margin-left:-1px}.pk--white:first-child{margin-left:0}.pk--white .pk-key{color:var(--text2)}.pk--white:hover{background:var(--bg2)}.pk--black{top:0;left:calc(var(--at) * 100% / var(--whites));width:calc(100% / var(--whites) * .62);z-index:2;background:var(--text);height:62%;color:var(--bg);border:1px solid var(--text);box-shadow:var(--shadow-md);position:absolute;transform:translate(-50%)}.pk--black:hover{border-color:var(--accent-ink)}.pk.is-down{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:var(--shadow-glow);outline:3px solid var(--accent2);outline-offset:-3px}.pk.is-down .pk-key{color:inherit}@media (prefers-reduced-motion:no-preference){.pk{transition:background-color 60ms,color 60ms,border-color 60ms}.pk--white.is-down{transform:translateY(2px)}}@media (width<=480px){.pk--black .pk-note{display:none}}.dm-tempo-box{width:100%;max-width:24rem;font:500 .9rem var(--font-mono);color:var(--text2);justify-content:center;align-items:center;gap:.6rem;padding-inline:.25rem;display:flex}.dm-tempo{min-width:0;max-width:14rem;accent-color:var(--accent);cursor:pointer;flex:5rem;min-height:44px}.dm-bpm{text-align:right;white-space:nowrap;min-width:4.6rem;color:var(--text);font-variant-numeric:tabular-nums;font-weight:700}.lab-btn.is-active{background:var(--accent);color:var(--on-accent)}.dm-status{min-height:1.5rem;font:500 .95rem var(--font-mono);color:var(--text2);justify-content:center;align-items:center;gap:1rem;display:flex}.dm-rec{color:var(--accent-ink);align-items:center;gap:.4rem;font-weight:700;display:inline-flex}.dm-rec-dot{border-radius:var(--radius-full);background:var(--accent-ink);width:.7rem;height:.7rem}@media (prefers-reduced-motion:no-preference){.dm-rec-dot{animation:1s step-end infinite dm-blink}@keyframes dm-blink{50%{opacity:.15}}}.dm-pads{touch-action:none;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,2.4vw,.9rem);width:min(100%,30rem);display:grid}.dm-pad{appearance:none;font:inherit;aspect-ratio:1;text-align:center;min-width:0;color:var(--text);background:var(--surface);border:2px solid var(--accent-ink);border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;place-content:center;justify-items:center;gap:.3rem;padding:.15rem;display:grid;container-type:inline-size}.dm-pad[data-tone=b]{box-shadow:inset 0 -.35rem 0 var(--accent2)}.dm-pad:hover{border-color:var(--text)}.dm-pad-name{white-space:nowrap;overflow-wrap:normal;hyphens:manual;max-width:100%;font:700 clamp(.62rem,14cqi,1rem)/1.15 var(--font-display);padding-bottom:.12em;overflow:hidden}@container (width<=5.5rem){.dm-pad-name{font-family:var(--font-body);font-size:clamp(.62rem,14.5cqi,.9rem)}}.dm-pad-key{font:700 .85rem/1 var(--font-mono);color:var(--text2)}.dm-pad.is-down,.dm-pad.is-play{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:var(--shadow-glow)}.dm-pad.is-down .dm-pad-key,.dm-pad.is-play .dm-pad-key{color:inherit}@media (prefers-reduced-motion:no-preference){.dm-pad{transition:background-color 80ms,color 80ms,border-color 80ms,transform 80ms}.dm-pad.is-down{transform:scale(.96)}}.dm-steps{justify-content:center;gap:.6rem;width:min(100%,30rem);display:flex}.dm-beat{flex:1;grid-template-columns:repeat(4,1fr);gap:3px;display:grid}.dm-step{background:var(--bg2);border:1px solid var(--border-hover);height:.7rem}.dm-step.is-on{background:var(--text2)}.dm-step.is-now{background:var(--accent);border-color:var(--accent)}