.piano-player[data-astro-cid-x47s4vgq]{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-x47s4vgq]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.keys-frame[data-astro-cid-x47s4vgq]{background:#222;border-radius:1.25rem;padding:4px 4px 12px}.audio-status[data-astro-cid-x47s4vgq]{text-align:center;color:#666;min-height:1.1rem;margin:.7rem 0 0;font-size:.8rem;line-height:1.1rem}.piano-keys[data-astro-cid-x47s4vgq]{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-x47s4vgq]{height:100%;display:flex}.piano-key[data-astro-cid-x47s4vgq]{appearance:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.white-key[data-astro-cid-x47s4vgq]{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-x47s4vgq]:last-child{border-right:0}.black-key[data-astro-cid-x47s4vgq]{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-x47s4vgq].is-active{background:#d8d8d8;box-shadow:inset 0 8px #b5b5b5}.black-key[data-astro-cid-x47s4vgq].is-active{box-shadow:none;background:#555;transform:translate(-50%,4px)}.piano-key[data-astro-cid-x47s4vgq]:focus-visible{z-index:3;outline-offset:-6px;outline:3px solid #666}.black-key[data-astro-cid-x47s4vgq]:focus-visible{outline-color:#fff}.key-note[data-astro-cid-x47s4vgq],.computer-key[data-astro-cid-x47s4vgq]{white-space:nowrap;pointer-events:none;position:absolute;left:50%;transform:translate(-50%)}.key-note[data-astro-cid-x47s4vgq]{font-size:clamp(.6rem,1.3vw,.78rem);font-weight:700;bottom:2.15rem}.computer-key[data-astro-cid-x47s4vgq]{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-x47s4vgq] .key-note[data-astro-cid-x47s4vgq]{font-size:clamp(.48rem,1vw,.66rem);bottom:2rem}.black-key[data-astro-cid-x47s4vgq] .computer-key[data-astro-cid-x47s4vgq]{width:1.2rem;height:1.2rem;font-size:.62rem;bottom:.55rem}@media (width<=620px){.piano-player[data-astro-cid-x47s4vgq]{border-width:3px;border-radius:1.5rem;width:min(100% - 1rem,900px);padding:.75rem;box-shadow:0 7px #222}.keys-frame[data-astro-cid-x47s4vgq]{border-radius:1rem;padding-bottom:9px}.piano-keys[data-astro-cid-x47s4vgq]{border-radius:.75rem .75rem .5rem .5rem;height:clamp(190px,58vw,245px)}.white-key[data-astro-cid-x47s4vgq]{border-right-width:2px}.black-key[data-astro-cid-x47s4vgq]{width:8%}}@media (width<=480px){.keys-frame[data-astro-cid-x47s4vgq]{overscroll-behavior-x:contain;scrollbar-width:thin;overflow-x:auto}.piano-keys[data-astro-cid-x47s4vgq]{min-width:520px}}@media (width<=390px){.key-note[data-astro-cid-x47s4vgq]{display:none}.computer-key[data-astro-cid-x47s4vgq]{width:1.15rem;height:1.15rem;font-size:.6rem;bottom:.55rem}.black-key[data-astro-cid-x47s4vgq] .computer-key[data-astro-cid-x47s4vgq]{width:1rem;height:1rem;font-size:.56rem;bottom:.45rem}}@media (prefers-reduced-motion:no-preference){.piano-key[data-astro-cid-x47s4vgq]{transition:background-color 80ms,transform 80ms,box-shadow 80ms}}html{color:#000;font-family:system-ui,sans-serif}body{min-height:100vh;margin:0}.hero[data-astro-cid-d4dorrtn]{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:clamp(1.5rem,4vw,2.75rem);width:100%;min-height:100vh;padding:clamp(2rem,6vw,5rem) 0 2.5rem;display:flex}.hero-text[data-astro-cid-d4dorrtn]{flex-direction:column;align-items:center;gap:.75rem;padding:0 1.5rem;display:flex}h1[data-astro-cid-d4dorrtn]{text-align:center;margin:0;font-size:2rem;font-weight:500}.tagline[data-astro-cid-d4dorrtn]{color:#555;text-align:center;max-width:34rem;margin:0;font-size:1rem;line-height:1.5}.quick-links[data-astro-cid-d4dorrtn]{flex-wrap:wrap;justify-content:center;gap:.75rem;padding:0 1.5rem;display:flex}.quick-links[data-astro-cid-d4dorrtn] a[data-astro-cid-d4dorrtn]{box-sizing:border-box;color:#222;background:#fff;border:2px solid #222;border-radius:999px;align-items:center;min-height:44px;padding:.45rem 1rem;font-size:.85rem;font-weight:700;text-decoration:none;display:inline-flex;box-shadow:0 3px #222}.quick-links[data-astro-cid-d4dorrtn] a[data-astro-cid-d4dorrtn]:hover{background:#f0f0f0}.quick-links[data-astro-cid-d4dorrtn] a[data-astro-cid-d4dorrtn]:active{box-shadow:none;transform:translateY(3px)}.quick-links[data-astro-cid-d4dorrtn] a[data-astro-cid-d4dorrtn]:focus-visible{outline-offset:2px;outline:3px solid #666}.content[data-astro-cid-d4dorrtn]{box-sizing:border-box;max-width:40rem;margin:0 auto;padding:0 1.5rem}.content[data-astro-cid-d4dorrtn]+.content[data-astro-cid-d4dorrtn]{margin-top:3.5rem}h2[data-astro-cid-d4dorrtn]{margin:0 0 1rem;font-size:1.25rem;font-weight:600}.how-list[data-astro-cid-d4dorrtn]{flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.how-list[data-astro-cid-d4dorrtn] li[data-astro-cid-d4dorrtn],.faq-item[data-astro-cid-d4dorrtn] p[data-astro-cid-d4dorrtn]{color:#444;line-height:1.55}.how-list[data-astro-cid-d4dorrtn] strong[data-astro-cid-d4dorrtn]{color:#000;font-weight:600}.faq-item[data-astro-cid-d4dorrtn]+.faq-item[data-astro-cid-d4dorrtn]{margin-top:1.25rem}.faq-item[data-astro-cid-d4dorrtn] h3[data-astro-cid-d4dorrtn]{margin:0 0 .25rem;font-size:1rem;font-weight:600}.faq-item[data-astro-cid-d4dorrtn] p[data-astro-cid-d4dorrtn]{margin:0}footer[data-astro-cid-d4dorrtn]{text-align:center;margin-top:4rem;padding:1.5rem}footer[data-astro-cid-d4dorrtn] p[data-astro-cid-d4dorrtn]{color:#666;margin:0;font-size:.85rem}footer[data-astro-cid-d4dorrtn] a[data-astro-cid-d4dorrtn]{color:inherit}@media (prefers-reduced-motion:no-preference){.quick-links[data-astro-cid-d4dorrtn] a[data-astro-cid-d4dorrtn]{transition:transform 80ms,box-shadow 80ms,background-color 80ms}}