.music-keyboard[data-astro-cid-gasckgij]{box-sizing:border-box;background:#fafafa;border:4px solid #222;border-radius:clamp(1.5rem,4vw,3rem);width:min(900px,100% - 2rem);padding:clamp(1rem,2.5vw,1.75rem);box-shadow:0 10px #222}.visually-hidden[data-astro-cid-gasckgij]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.display-panel[data-astro-cid-gasckgij]{background:#f0f0f0;border:3px solid #222;border-radius:1.25rem;grid-template-columns:minmax(0,1.5fr) minmax(210px,.75fr);display:grid;overflow:hidden}.notation-panel[data-astro-cid-gasckgij],.instrument-panel[data-astro-cid-gasckgij]{box-sizing:border-box;padding:.85rem 1rem 1rem}.notation-panel[data-astro-cid-gasckgij]{background:#fff;border-right:3px solid #222;min-width:0;position:relative}.panel-label[data-astro-cid-gasckgij],.instrument-panel[data-astro-cid-gasckgij] label[data-astro-cid-gasckgij]{letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;font-weight:750;display:block}.music-staff[data-astro-cid-gasckgij]{width:100%;height:126px;overflow:hidden}.music-staff[data-astro-cid-gasckgij] svg{max-width:100%;display:block}.music-readout[data-astro-cid-gasckgij]{gap:.45rem;margin-top:-.45rem;display:grid}.note-readout[data-astro-cid-gasckgij],.chord-readout[data-astro-cid-gasckgij]{align-items:center;gap:.4rem;min-height:1.5rem;margin:0;display:flex}.note-readout[data-astro-cid-gasckgij]{font-size:1rem;font-weight:700}.note-symbol[data-astro-cid-gasckgij]{font-size:1.15rem}.chord-readout[data-astro-cid-gasckgij]{border-top:1px solid #d5d5d5;flex-wrap:wrap;padding-top:.45rem}.chord-label[data-astro-cid-gasckgij]{letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;font-weight:800}#current-chord[data-astro-cid-gasckgij]{font-size:1rem}.chord-description[data-astro-cid-gasckgij]{color:#4a4a4a;font-size:.78rem}.instrument-panel[data-astro-cid-gasckgij]{background:#e8e8e8;flex-direction:column;justify-content:center;display:flex}.key-label[data-astro-cid-gasckgij]{margin-top:.85rem}.select-shell[data-astro-cid-gasckgij]{margin-top:.7rem;position:relative}.select-shell[data-astro-cid-gasckgij]:after{content:"▾";pointer-events:none;font-size:1rem;position:absolute;top:50%;right:.9rem;transform:translateY(-54%)}select[data-astro-cid-gasckgij]{box-sizing:border-box;appearance:none;color:#111;width:100%;min-height:44px;font:inherit;cursor:pointer;background:#fff;border:2px solid #222;border-radius:.75rem;padding:.8rem 2.5rem .8rem .9rem;font-size:1rem;font-weight:700}select[data-astro-cid-gasckgij]:focus-visible{outline-offset:3px;outline:3px solid #555}.audio-status[data-astro-cid-gasckgij]{color:#404040;min-height:2.6em;margin:.75rem 0 0;font-size:.78rem;line-height:1.3}.audio-status[data-astro-cid-gasckgij][data-state=error]{color:#111;font-weight:700}.keys-frame[data-astro-cid-gasckgij]{background:#222;border-radius:1.25rem;margin-top:clamp(1rem,2.5vw,1.5rem);padding:4px 4px 12px}.piano-keys[data-astro-cid-gasckgij]{touch-action:pan-x pan-y;user-select:none;background:#222;border-radius:1rem 1rem .75rem .75rem;height:clamp(210px,34vw,320px);position:relative;overflow:hidden}.white-keys[data-astro-cid-gasckgij]{height:100%;display:flex}.piano-key[data-astro-cid-gasckgij]{appearance:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.white-key[data-astro-cid-gasckgij]{color:#222;background:#fff;border:0;border-right:3px solid #222;flex:10%;min-width:0;padding:0 .15rem .75rem;position:relative}.white-key[data-astro-cid-gasckgij]:last-child{border-right:0}.black-key[data-astro-cid-gasckgij]{top:0;left:var(--key-center);z-index:2;color:#fff;background:#222;border:0;border-radius:0 0 .65rem .65rem;flex-direction:column;justify-content:flex-end;align-items:center;width:6.4%;height:62%;padding:0 .1rem .65rem;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 4px #000}.white-key[data-astro-cid-gasckgij].is-active{background:#d8d8d8;box-shadow:inset 0 8px #b5b5b5}.black-key[data-astro-cid-gasckgij].is-active{box-shadow:none;background:#555;transform:translate(-50%,4px)}.piano-key[data-astro-cid-gasckgij]:focus-visible{z-index:3;outline-offset:-6px;outline:3px solid #666}.black-key[data-astro-cid-gasckgij]:focus-visible{outline-color:#fff}.key-note[data-astro-cid-gasckgij],.computer-key[data-astro-cid-gasckgij]{white-space:nowrap;pointer-events:none;position:absolute;left:50%;transform:translate(-50%)}.key-note[data-astro-cid-gasckgij]{font-size:clamp(.6rem,1.3vw,.78rem);font-weight:700;bottom:2.15rem}.computer-key[data-astro-cid-gasckgij]{border:1px solid;border-radius:.3rem;place-items:center;width:1.35rem;height:1.35rem;font-size:.68rem;font-weight:800;display:grid;bottom:.72rem}.black-key[data-astro-cid-gasckgij] .key-note[data-astro-cid-gasckgij]{font-size:clamp(.48rem,1vw,.66rem);bottom:2rem}.black-key[data-astro-cid-gasckgij] .computer-key[data-astro-cid-gasckgij]{width:1.2rem;height:1.2rem;font-size:.62rem;bottom:.55rem}.progression-panel[data-astro-cid-gasckgij]{box-sizing:border-box;background:#fff;border:3px solid #222;border-radius:1.25rem;margin-top:clamp(1rem,2.5vw,1.5rem);padding:.85rem 1rem 1rem}.progression-header[data-astro-cid-gasckgij]{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;display:flex}.progression-heading[data-astro-cid-gasckgij]{letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:.72rem;font-weight:750}.genre-picker[data-astro-cid-gasckgij]{flex-wrap:wrap;gap:.4rem;display:flex}.genre-button[data-astro-cid-gasckgij]{box-sizing:border-box;color:#111;min-height:44px;font:inherit;cursor:pointer;background:#fff;border:2px solid #222;border-radius:999px;padding:.35rem .75rem;font-size:.78rem;font-weight:700}.genre-button[data-astro-cid-gasckgij]:hover{background:#f0f0f0}.genre-button[data-astro-cid-gasckgij].is-selected{color:#fff;background:#222}.genre-button[data-astro-cid-gasckgij]:focus-visible{outline-offset:2px;outline:3px solid #555}.route-row[data-astro-cid-gasckgij]{flex-wrap:wrap;align-items:stretch;gap:.6rem .75rem;margin-top:.85rem;display:flex}.route-button[data-astro-cid-gasckgij]{color:#111;font:inherit;text-align:left;cursor:pointer;background:#fff;border:3px solid #222;border-radius:1rem;flex:170px;gap:.2rem;padding:.6rem .8rem;display:grid}.route-button[data-astro-cid-gasckgij]:hover{background:#f0f0f0}.route-button[data-astro-cid-gasckgij].is-armed{color:#fff;background:#222}.route-button[data-astro-cid-gasckgij]:focus-visible{outline-offset:2px;outline:3px solid #555}.route-label[data-astro-cid-gasckgij]{letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;font-weight:800}.route-chord[data-astro-cid-gasckgij]{font-size:1.35rem;line-height:1.1}.route-staff[data-astro-cid-gasckgij]{width:100%;height:100px;display:block;overflow:hidden}.route-staff[data-astro-cid-gasckgij][hidden]{display:none}.route-staff[data-astro-cid-gasckgij] svg{max-width:100%;display:block}.route-button[data-astro-cid-gasckgij].is-armed .route-staff[data-astro-cid-gasckgij]{filter:invert()}.route-hint[data-astro-cid-gasckgij]{color:#4a4a4a;font-size:.68rem}.route-button[data-astro-cid-gasckgij].is-armed .route-hint[data-astro-cid-gasckgij]{color:#cfcfcf}.route-arrow[data-astro-cid-gasckgij]{align-self:center;font-size:1.5rem;font-weight:700}.steps-shell[data-astro-cid-gasckgij]{align-content:center;gap:.35rem;min-width:130px;display:grid}.steps-shell[data-astro-cid-gasckgij] label[data-astro-cid-gasckgij]{letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;font-weight:800}.steps-shell[data-astro-cid-gasckgij] .select-shell[data-astro-cid-gasckgij]{margin-top:0}.steps-shell[data-astro-cid-gasckgij] select[data-astro-cid-gasckgij]{padding:.5rem 2.2rem .5rem .7rem;font-size:.9rem}.suggestion-hint[data-astro-cid-gasckgij]{color:#444;margin:.85rem 0 0;font-size:.82rem}.suggestion-hint[data-astro-cid-gasckgij][hidden]{display:none}.progression-result[data-astro-cid-gasckgij]{border-top:1px solid #d5d5d5;gap:.6rem;margin-top:.85rem;padding-top:.85rem;display:grid}.progression-result[data-astro-cid-gasckgij][hidden]{display:none}.progression-toolbar[data-astro-cid-gasckgij]{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.play-button[data-astro-cid-gasckgij]{box-sizing:border-box;color:#fff;min-height:44px;font:inherit;cursor:pointer;background:#222;border:2px solid #222;border-radius:.75rem;padding:.5rem 1.1rem;font-size:.85rem;font-weight:800}.play-button[data-astro-cid-gasckgij]:hover{background:#444}.play-button[data-astro-cid-gasckgij]:focus-visible{outline-offset:2px;outline:3px solid #555}.variant-button[data-astro-cid-gasckgij]{box-sizing:border-box;color:#111;min-height:44px;font:inherit;cursor:pointer;background:#fff;border:2px solid #222;border-radius:.75rem;padding:.5rem 1rem;font-size:.85rem;font-weight:800}.variant-button[data-astro-cid-gasckgij]:hover{background:#f0f0f0}.variant-button[data-astro-cid-gasckgij]:focus-visible{outline-offset:2px;outline:3px solid #555}.variant-button[data-astro-cid-gasckgij][hidden]{display:none}.progression-name[data-astro-cid-gasckgij]{color:#404040;font-size:.78rem;font-weight:600}.progression-chords[data-astro-cid-gasckgij]{flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none;display:flex}.progression-chords[data-astro-cid-gasckgij] .progression-chip{background:#fff;border:2px solid #222;border-radius:.6rem;padding:.3rem .6rem;font-size:.85rem;font-weight:750}.progression-chords[data-astro-cid-gasckgij] .progression-chip.is-playing{color:#fff;background:#222}.instructions[data-astro-cid-gasckgij]{text-align:center;color:#444;margin:1rem 0 0;font-size:.82rem}@media (width<=620px){.music-keyboard[data-astro-cid-gasckgij]{border-width:3px;border-radius:1.5rem;width:min(100% - 1rem,900px);padding:.75rem;box-shadow:0 7px #222}.display-panel[data-astro-cid-gasckgij]{border-radius:1rem;grid-template-columns:1fr}.notation-panel[data-astro-cid-gasckgij]{border-bottom:3px solid #222;border-right:0}.instrument-panel[data-astro-cid-gasckgij]{grid-template-columns:minmax(0,1fr) minmax(150px,1.2fr);align-items:center;gap:.35rem .75rem;padding-block:.75rem;display:grid}.key-label[data-astro-cid-gasckgij],.select-shell[data-astro-cid-gasckgij]{margin-top:0}.audio-status[data-astro-cid-gasckgij]{grid-column:1/-1;min-height:1em;margin-top:.25rem}.keys-frame[data-astro-cid-gasckgij]{border-radius:1rem;padding-bottom:9px}.piano-keys[data-astro-cid-gasckgij]{border-radius:.75rem .75rem .5rem .5rem;height:clamp(190px,58vw,245px)}.white-key[data-astro-cid-gasckgij]{border-right-width:2px}.black-key[data-astro-cid-gasckgij]{width:8%}.progression-panel[data-astro-cid-gasckgij]{border-radius:1rem;padding:.75rem}.route-arrow[data-astro-cid-gasckgij]{display:none}.route-button[data-astro-cid-gasckgij]{flex-basis:100%}.steps-shell[data-astro-cid-gasckgij]{flex:100%}}@media (width<=480px){.keys-frame[data-astro-cid-gasckgij]{overscroll-behavior-x:contain;scrollbar-width:thin;overflow-x:auto}.piano-keys[data-astro-cid-gasckgij]{min-width:520px}}@media (width<=390px){.notation-panel[data-astro-cid-gasckgij],.instrument-panel[data-astro-cid-gasckgij]{padding-inline:.7rem}.key-note[data-astro-cid-gasckgij]{display:none}.computer-key[data-astro-cid-gasckgij]{width:1.15rem;height:1.15rem;font-size:.6rem;bottom:.55rem}.black-key[data-astro-cid-gasckgij] .computer-key[data-astro-cid-gasckgij]{width:1rem;height:1rem;font-size:.56rem;bottom:.45rem}}@media (prefers-reduced-motion:no-preference){.piano-key[data-astro-cid-gasckgij],.genre-button[data-astro-cid-gasckgij],.route-button[data-astro-cid-gasckgij],.play-button[data-astro-cid-gasckgij],.variant-button[data-astro-cid-gasckgij],.progression-chords[data-astro-cid-gasckgij] .progression-chip{transition:background-color 80ms,transform 80ms,box-shadow 80ms}}