:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--section-pad-y:12px;--gap-staff-fretboard:24px;--gap-fretboard-solfege:12px;--solfege-pad-y:12px;--solfege-gap:10px;--solfege-btn-pad-y:10px;--solfege-btn-pad-x:18px;--solfege-font:20px;--toolbar-pad-y:10px;--toolbar-pad-x:16px;--toolbar-gap:10px;--toolbar-btn-pad-y:8px;--toolbar-btn-pad-x:14px;--toolbar-font:15px;--channel-font:13px;--channel-line-height:18px;--channel-pad-y:6px;--piano-panel-pad-x:20px;--piano-panel-max-width:92vw;font:16px/1.5 system-ui,Segoe UI,Roboto,sans-serif}@media (width<=480px){:root{--section-pad-y:0px;--solfege-pad-y:2px;--solfege-gap:4px;--solfege-btn-pad-y:8px;--solfege-btn-pad-x:12px;--solfege-font:18px;--toolbar-pad-y:2px;--toolbar-pad-x:10px;--toolbar-gap:6px;--toolbar-btn-pad-x:10px;--toolbar-font:14px;--channel-font:11px;--channel-line-height:13px;--channel-pad-y:1px;--piano-panel-pad-x:8px;--piano-panel-max-width:96vw;--solfege-channel-min-height:113px;--gap-floor-solfege-channel:4px;--gap-cap-solfege-channel:12px;--gap-slope-solfege-channel:.1;--solfege-channel-gap:var(--gap-floor-solfege-channel);--gap-calibration-height:667px;--gap-floor-staff-fretboard:4px;--gap-cap-staff-fretboard:28px;--gap-slope-staff-fretboard:.1;--gap-floor-fretboard-solfege:8px;--gap-cap-fretboard-solfege:60px;--gap-slope-fretboard-solfege:.2;--gap-staff-fretboard:var(--gap-floor-staff-fretboard);--gap-fretboard-solfege:var(--gap-floor-fretboard-solfege)}@supports (height:1svh){:root{--gap-staff-fretboard:clamp(var(--gap-floor-staff-fretboard), calc(var(--gap-floor-staff-fretboard) + (100svh - var(--gap-calibration-height)) * var(--gap-slope-staff-fretboard)), var(--gap-cap-staff-fretboard));--gap-fretboard-solfege:clamp(var(--gap-floor-fretboard-solfege), calc(var(--gap-floor-fretboard-solfege) + (100svh - var(--gap-calibration-height)) * var(--gap-slope-fretboard-solfege)), var(--gap-cap-fretboard-solfege));--solfege-channel-gap:clamp(var(--gap-floor-solfege-channel), calc(var(--gap-floor-solfege-channel) + (100svh - var(--gap-calibration-height)) * var(--gap-slope-solfege-channel)), var(--gap-cap-solfege-channel))}}}*{box-sizing:border-box}body{color:#1a1a1a;background:#f5f5f2;margin:0}#root{flex-direction:column;min-height:100svh;display:flex}button{font:inherit}@keyframes hint-blink{0%,to{opacity:1}50%{opacity:.25}}.hint-blink{animation:.6s ease-in-out infinite hint-blink}