: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}.position-only-screen,.position-only-body{flex-direction:column;flex:1;display:flex}.position-only-staff{padding-top:var(--section-pad-y)}.position-only-staff-frame{max-width:728px;margin:0 auto;position:relative}.finger-hint-button{font-size:var(--toolbar-font);cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none;background:#fff;border:1px solid #999;border-radius:8px;padding:4px 10px;position:absolute;top:0;right:17.6923%}.finger-hint-button.is-on{color:#d3302f;border:2px solid #d3302f;font-weight:700}.position-only-notice-slot{min-height:30.5px}.position-only-fingerboard{justify-content:center;gap:40px;padding-top:0;padding-bottom:8px;display:flex}@media (aspect-ratio>=4/3){.position-only-body{flex-direction:row;align-items:center;gap:24px;padding:0 24px}.position-only-staff{flex:1;min-width:0;padding-top:0}.position-only-notice-slot{min-height:0}.position-only-fingerboard{padding:0}}@keyframes hint-blink{0%,to{opacity:1}50%{opacity:.25}}.hint-blink{animation:.6s ease-in-out infinite hint-blink}
