.octave-keyboard.svelte-f8skb1{--white-w:clamp(1.9rem, 7vw, 3.4rem);--black-w:calc(var(--white-w) * .62);--white-h:clamp(5.5rem, 18vw, 9rem);--black-h:calc(var(--white-h) * .62);width:calc(8 * var(--white-w));height:var(--white-h);touch-action:none;-webkit-user-select:none;user-select:none;margin:0 auto;display:flex;position:relative}.key.svelte-f8skb1{cursor:pointer;border:none;flex-direction:column;flex-shrink:0;justify-content:flex-end;align-items:center;padding:0;transition:background 80ms,box-shadow 80ms;display:flex}.white.svelte-f8skb1{width:var(--white-w);height:var(--white-h);z-index:1;background:#fff;border:1px solid #dbdbdb;border-radius:0 0 6px 6px;padding-bottom:.55rem}.white.svelte-f8skb1+.white:where(.svelte-f8skb1){border-left:none}.white.pressed.svelte-f8skb1,.white.state-active.svelte-f8skb1{background:#fcefe8}@media (hover:hover){.white.state-idle.svelte-f8skb1:hover{background:#fbf3ee}}.white.state-correct.svelte-f8skb1{background:#d7f4e3}.white.state-wrong.svelte-f8skb1{background:#f8dddd}.black.svelte-f8skb1{width:var(--black-w);height:var(--black-h);z-index:2;background:#242424;border:1px solid #141414;border-radius:0 0 4px 4px;padding-bottom:.4rem;position:absolute;top:0}.black.pressed.svelte-f8skb1,.black.state-active.svelte-f8skb1{background:#72391d}@media (hover:hover){.black.state-idle.svelte-f8skb1:hover{background:#424242}}.black.state-correct.svelte-f8skb1{background:#1c5f38}.black.state-wrong.svelte-f8skb1{background:#721d1d}.kbd.svelte-f8skb1{color:#707a8f;opacity:.7;font-family:ui-monospace,monospace;font-size:.62rem;font-weight:600}.black-kbd.svelte-f8skb1{color:#ccc}.score-wrap.svelte-1f9s87b{justify-content:center;align-items:center;min-height:180px;display:flex;position:relative}.score-instance.svelte-1f9s87b{width:100%;max-width:720px;margin:0 auto}.score-instance.svelte-1f9s87b svg{width:100%;height:auto;display:block}.score-instance.svelte-1f9s87b [fill=\#000000]{fill:var(--color-score-ink)}.score-instance.svelte-1f9s87b [stroke=\#000000]{stroke:var(--color-score-ink)}.hero-drill-card.svelte-1f9s87b{box-shadow:0 1px #0d10140a,0 24px 60px -20px #0d10141a}@supports (color:color-mix(in lab, red, red)){.hero-drill-card.svelte-1f9s87b{box-shadow:0 1px 0 color-mix(in oklab, var(--color-ink) 4%, transparent), 0 24px 60px -20px color-mix(in oklab, var(--color-ink) 10%, transparent)}}.pulse-ring.svelte-1f9s87b{--hero-pulse-off:#0000}@supports (color:color-mix(in lab, red, red)){.pulse-ring.svelte-1f9s87b{--hero-pulse-off:color-mix(in oklab, var(--color-note-ok) 0%, transparent)}}.pulse-ring.svelte-1f9s87b{--hero-pulse-on:#22c55ea6}@supports (color:color-mix(in lab, red, red)){.pulse-ring.svelte-1f9s87b{--hero-pulse-on:color-mix(in oklab, var(--color-note-ok) 65%, transparent)}}.pulse-ring.svelte-1f9s87b{animation:.8s ease-in-out 3 svelte-1f9s87b-hero-drill-pulse}@keyframes svelte-1f9s87b-hero-drill-pulse{0%,to{outline:3px solid var(--hero-pulse-off);outline-offset:4px}50%{outline:3px solid var(--hero-pulse-on);outline-offset:6px}}@media (prefers-reduced-motion:reduce){.pulse-ring.svelte-1f9s87b{animation:none}}