.device[data-astro-cid-l2supwr7]{border:1px solid var(--line);background:oklch(11% .008 145);border-radius:48px;width:min(100%,344px);padding:8px;position:relative;box-shadow:0 34px 90px oklch(6% .01 145/.58)}.device[data-astro-cid-l2supwr7]:after{content:"";pointer-events:none;border:1px solid oklch(95% .01 85/.1);border-radius:40px;position:absolute;inset:7px}.device[data-astro-cid-l2supwr7] img[data-astro-cid-l2supwr7]{background:var(--ink);border-radius:40px;width:100%;height:auto;display:block}.hardware-slot[data-astro-cid-l2supwr7]{z-index:2;background:oklch(7% .004 145);border-radius:99px;width:68px;height:18px;position:absolute;top:16px;left:50%;transform:translate(-50%)}.side-button[data-astro-cid-l2supwr7]{background:var(--line);border-radius:4px 0 0 4px;width:4px;position:absolute;left:-4px}.side-button-top[data-astro-cid-l2supwr7]{height:52px;top:118px}.side-button-bottom[data-astro-cid-l2supwr7]{height:82px;top:186px}@media (width<=620px){.device[data-astro-cid-l2supwr7]{width:min(100%,350px)}}.drill[data-astro-cid-vkkhvmiw]{grid-template-columns:minmax(270px,.58fr) minmax(540px,1.42fr);align-items:start;gap:clamp(3rem,6vw,6rem);display:grid}.drill-copy[data-astro-cid-vkkhvmiw]{max-width:32rem;padding-top:1.4rem}.drill-copy[data-astro-cid-vkkhvmiw] h2[data-astro-cid-vkkhvmiw]{font:700 clamp(2.5rem, 3.9vw, 3.8rem)/.98 var(--font-sans);letter-spacing:-.05em;text-wrap:balance;margin:.9rem 0 1.2rem}.drill-copy[data-astro-cid-vkkhvmiw]>p[data-astro-cid-vkkhvmiw]:last-of-type{max-width:31rem;color:var(--muted);font-size:.98rem;line-height:1.68}.grade-key[data-astro-cid-vkkhvmiw]{flex-wrap:wrap;gap:.75rem 1rem;margin:2rem 0 0;padding:0;list-style:none;display:flex}.grade-key[data-astro-cid-vkkhvmiw] li[data-astro-cid-vkkhvmiw]{color:var(--muted);align-items:center;gap:.45rem;font-size:.73rem;font-weight:650;display:flex}.grade-key[data-astro-cid-vkkhvmiw] span[data-astro-cid-vkkhvmiw]{border:1px solid;border-radius:50%;place-items:center;width:24px;height:24px;display:grid}.grade-on[data-astro-cid-vkkhvmiw] span[data-astro-cid-vkkhvmiw]{color:var(--success)}.grade-early[data-astro-cid-vkkhvmiw] span[data-astro-cid-vkkhvmiw]{color:var(--early)}.grade-late[data-astro-cid-vkkhvmiw] span[data-astro-cid-vkkhvmiw]{color:var(--late)}.grade-missed[data-astro-cid-vkkhvmiw] span[data-astro-cid-vkkhvmiw]{color:oklch(70% .13 25)}.drill-console[data-astro-cid-vkkhvmiw]{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:clamp(1rem,2.4vw,1.65rem)}.demo-toolbar[data-astro-cid-vkkhvmiw]{justify-content:space-between;align-items:flex-start;gap:1.2rem;display:flex}.pattern-picker[data-astro-cid-vkkhvmiw]{flex-wrap:wrap;gap:.45rem;display:flex}.pattern-picker[data-astro-cid-vkkhvmiw] button[data-astro-cid-vkkhvmiw]{border:1px solid var(--line);min-height:48px;color:var(--muted);font:650 .75rem/1 var(--font-sans);background:0 0;border-radius:12px;padding:0 1rem}.pattern-picker[data-astro-cid-vkkhvmiw] button[data-astro-cid-vkkhvmiw]:hover:not(:disabled){border-color:var(--muted);color:var(--text)}.pattern-picker[data-astro-cid-vkkhvmiw] button[data-astro-cid-vkkhvmiw].is-selected{border-color:var(--amber);background:var(--amber-soft);color:var(--text)}.pattern-picker[data-astro-cid-vkkhvmiw] button[data-astro-cid-vkkhvmiw]:disabled{cursor:not-allowed;opacity:.55}.attempt-readout[data-astro-cid-vkkhvmiw]{flex:none;justify-items:end;gap:.25rem;display:grid}.attempt-readout[data-astro-cid-vkkhvmiw]>span[data-astro-cid-vkkhvmiw]{color:var(--muted);letter-spacing:.1em;font-size:.58rem;font-weight:700}.tempo-readout[data-astro-cid-vkkhvmiw]{align-items:baseline;gap:.35rem;margin:0;display:flex}.tempo-readout[data-astro-cid-vkkhvmiw] strong[data-astro-cid-vkkhvmiw]{font:500 1.7rem/1 var(--font-serif)}.tempo-readout[data-astro-cid-vkkhvmiw] span[data-astro-cid-vkkhvmiw]{color:var(--muted);letter-spacing:.08em;font-size:.65rem;font-weight:700}.notation-window[data-astro-cid-vkkhvmiw]{border:1px solid var(--line-soft);background:var(--ink);border-radius:14px;margin:1.15rem 0;position:relative;overflow:hidden}.notation-window[data-astro-cid-vkkhvmiw] svg[data-astro-cid-vkkhvmiw]{width:100%;min-height:270px;display:block}[data-astro-cid-vkkhvmiw][data-notation-content]{will-change:transform}.staff-lines line{stroke:var(--line);stroke-width:2px}.staff-lines .bar-line{stroke-width:3px}.staff-lines text{fill:var(--text);font:700 31px/1 var(--font-sans)}.hit-lane[data-astro-cid-vkkhvmiw]{stroke:var(--line);stroke-width:2px}.web-playhead[data-astro-cid-vkkhvmiw] line[data-astro-cid-vkkhvmiw]{stroke:var(--mint);stroke-width:3px}.web-playhead[data-astro-cid-vkkhvmiw] circle[data-astro-cid-vkkhvmiw]{fill:var(--mint);stroke:var(--mint-soft);stroke-width:8px}.notation-note{color:var(--text);transition:color .12s cubic-bezier(.25,1,.5,1)}.notation-note ellipse{fill:currentColor}.notation-note line{stroke:currentColor;stroke-width:3.25px}.notation-note.is-active{color:var(--mint)}.notation-note.is-on{color:var(--success)}.notation-note.is-early{color:var(--early)}.notation-note.is-late{color:var(--late)}.notation-note.is-missed{color:oklch(70% .13 25);opacity:.62}.notation-beam{stroke:var(--text);stroke-width:6px;stroke-linecap:butt}.target-dot{fill:var(--ink);stroke:var(--line);stroke-width:3px}.target-dot.is-on{fill:var(--success);stroke:var(--success)}.target-dot.is-early{fill:var(--early);stroke:var(--early)}.target-dot.is-late{fill:var(--late);stroke:var(--late)}.target-dot.is-missed{fill:#0000;stroke:oklch(70% .13 25)}.count-overlay[data-astro-cid-vkkhvmiw]{border:1px solid var(--amber);background:var(--ink);width:92px;height:92px;color:var(--amber);font:500 3.3rem/1 var(--font-serif);border-radius:50%;place-items:center;display:grid;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.count-overlay[data-astro-cid-vkkhvmiw][hidden]{display:none}.demo-readout[data-astro-cid-vkkhvmiw]{grid-template-columns:1fr auto;align-items:center;gap:1.5rem;padding:.5rem .25rem 1.2rem;display:grid}.live-status[data-astro-cid-vkkhvmiw]{gap:.32rem;margin:0;display:grid}.live-status[data-astro-cid-vkkhvmiw] strong[data-astro-cid-vkkhvmiw]{font-size:.9rem}.live-status[data-astro-cid-vkkhvmiw] span[data-astro-cid-vkkhvmiw]{color:var(--muted);font-size:.76rem;line-height:1.4}.live-score[data-astro-cid-vkkhvmiw]{justify-items:end;gap:.28rem;margin:0;display:grid}.live-score[data-astro-cid-vkkhvmiw] span[data-astro-cid-vkkhvmiw]{color:var(--muted);letter-spacing:.09em;font-size:.62rem;font-weight:700}.live-score[data-astro-cid-vkkhvmiw] strong[data-astro-cid-vkkhvmiw]{font:500 1.7rem/1 var(--font-serif)}.demo-actions[data-astro-cid-vkkhvmiw]{grid-template-columns:1fr .72fr;gap:.7rem;display:grid}.start-button[data-astro-cid-vkkhvmiw],.tap-button[data-astro-cid-vkkhvmiw]{min-height:62px;font:750 .8rem/1 var(--font-sans);letter-spacing:.015em;border-radius:14px}.start-button[data-astro-cid-vkkhvmiw]{border:1px solid var(--amber);background:var(--amber);color:var(--amber-ink);padding:0 1.2rem}.start-button[data-astro-cid-vkkhvmiw]:hover{border-color:var(--amber-hover);background:var(--amber-hover)}.start-button[data-astro-cid-vkkhvmiw][aria-pressed=true]{border-color:var(--late);color:var(--late);background:0 0}.tap-button[data-astro-cid-vkkhvmiw]{border:1px solid var(--amber);background:var(--amber);color:var(--amber-ink);justify-content:center;align-items:center;gap:.7rem;display:flex}.tap-button[data-astro-cid-vkkhvmiw] small[data-astro-cid-vkkhvmiw]{border:1px solid;border-radius:5px;padding:.24rem .35rem;font-size:.54rem}.tap-button[data-astro-cid-vkkhvmiw]:hover:not(:disabled){background:var(--amber-hover)}.tap-button[data-astro-cid-vkkhvmiw]:active:not(:disabled){transform:translateY(1px)}.tap-button[data-astro-cid-vkkhvmiw]:disabled{border-color:var(--line);background:var(--raised);color:var(--muted);cursor:not-allowed}.input-note[data-astro-cid-vkkhvmiw]{color:var(--muted);align-items:flex-start;gap:.55rem;margin:1rem .15rem 0;font-size:.68rem;line-height:1.45;display:flex}.input-note[data-astro-cid-vkkhvmiw] span[data-astro-cid-vkkhvmiw]{color:var(--mint)}@media (prefers-reduced-motion:reduce){.notation-note{transition:none}}@media (width<=900px){.drill[data-astro-cid-vkkhvmiw]{grid-template-columns:1fr}.drill-copy[data-astro-cid-vkkhvmiw]{max-width:44rem;padding-top:0}}@media (width<=620px){.drill-console[data-astro-cid-vkkhvmiw]{border-radius:16px;margin-inline:-2px;padding:.8rem}.demo-toolbar[data-astro-cid-vkkhvmiw]{gap:.75rem;display:grid}.pattern-picker[data-astro-cid-vkkhvmiw]{flex-wrap:nowrap;max-width:100%;padding-bottom:.25rem;overflow-x:auto}.pattern-picker[data-astro-cid-vkkhvmiw] button[data-astro-cid-vkkhvmiw]{flex:none}.attempt-readout[data-astro-cid-vkkhvmiw]{justify-content:space-between;align-items:baseline;display:flex}.notation-window[data-astro-cid-vkkhvmiw]{border-radius:10px}.notation-window[data-astro-cid-vkkhvmiw] svg[data-astro-cid-vkkhvmiw]{min-height:220px}.demo-readout[data-astro-cid-vkkhvmiw]{grid-template-columns:1fr;gap:.8rem}.live-score[data-astro-cid-vkkhvmiw]{justify-items:start}.demo-actions[data-astro-cid-vkkhvmiw]{grid-template-columns:1fr}.start-button[data-astro-cid-vkkhvmiw]{grid-row:1}.tap-button[data-astro-cid-vkkhvmiw]{grid-row:2;min-height:76px;font-size:.9rem}.drill[data-astro-cid-vkkhvmiw][data-state=starting] .demo-actions[data-astro-cid-vkkhvmiw],.drill[data-astro-cid-vkkhvmiw][data-state=running] .demo-actions[data-astro-cid-vkkhvmiw]{right:.65rem;bottom:max(.65rem, env(safe-area-inset-bottom));z-index:50;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:.5rem;position:fixed;left:.65rem}.drill[data-astro-cid-vkkhvmiw][data-state=starting] .demo-actions[data-astro-cid-vkkhvmiw]{grid-template-columns:1fr}.drill[data-astro-cid-vkkhvmiw][data-state=starting] .tap-button[data-astro-cid-vkkhvmiw]{display:none}.drill[data-astro-cid-vkkhvmiw][data-state=running] .demo-actions[data-astro-cid-vkkhvmiw]{grid-template-columns:.72fr 1.28fr}.drill[data-astro-cid-vkkhvmiw][data-state=running] .start-button[data-astro-cid-vkkhvmiw]{grid-area:1/1;min-width:0;padding-inline:.6rem}.drill[data-astro-cid-vkkhvmiw][data-state=running] .tap-button[data-astro-cid-vkkhvmiw]{grid-area:1/2;min-width:0;min-height:64px}}