@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/2c55a0e60120577a-s.03ez25a9g3i0n.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/9c72aa0f40e4eef8-s.3i9rha7jpxn0q.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/ad66f9afd8947f86-s.2o7ko1d-5m1xu.woff2)format("woff2");unicode-range:U+1F??}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/5476f68d60460930-s.1ee5w62fj497l.woff2)format("woff2");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/2bbe8d2671613f1f-s.1way2z9fj6cig.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/1bffadaabf893a1e-s.0szrwpqb9mkwe.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/83afe278b6a6bb3c-s.p.45535valc9rzk.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter Fallback;src:local(Arial);ascent-override:90.44%;descent-override:22.52%;line-gap-override:0.0%;size-adjust:107.12%}.inter_ea55aed0-module__KujYLq__className{font-family:Inter,Inter Fallback;font-style:normal}.inter_ea55aed0-module__KujYLq__variable{--font-body:"Inter", "Inter Fallback"}
@font-face{font-family:Fredoka;font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(../media/b6df7c92285ebcd2-s.1cox7hpc1tfbr.woff2)format("woff2");unicode-range:U+307-308,U+590-5FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Fredoka;font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(../media/eeba9b1ad34c1404-s.3t00_18uk4swp.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka;font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(../media/5d52bd6c4cb3f315-s.p.12wv-xs8vggjn.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fredoka Fallback;src:local(Arial);ascent-override:95.64%;descent-override:23.17%;line-gap-override:0.0%;size-adjust:101.84%}.fredoka_25918489-module__OdmlyG__className{font-family:Fredoka,Fredoka Fallback;font-style:normal}.fredoka_25918489-module__OdmlyG__variable{--font-display:"Fredoka", "Fredoka Fallback"}
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--background:#fff9db;--foreground:#552b14;--card:#fff;--primary:#fed917;--primary-strong:#ff802c;--secondary:#8adbfa;--muted:#80624d;--border:#8d685052;--shadow:color-mix(in oklch, var(--foreground) 20%, transparent);--hero-title-size:clamp(40px, 4.6vw, 64px);--hero-text-size:18px;--hero-text-gap:16px;--hero-bottom-gap:36px}@supports (color:lab(0% 0 0)){:root{--background:lab(97.9419% -1.21266 17.4386);--foreground:lab(23.0017% 17.9183 23.2552);--card:lab(100.095% -.527293 5.7134);--primary:lab(87.8695% 1.9846 84.5684);--primary-strong:lab(68.3952% 55.7048 82.7585);--secondary:lab(82.9798% -19.5031 -23.6108);--muted:lab(44.1242% 10.5549 16.559);--border:lab(47.5568% 12.8131 20.0683/.32)}}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--background);color:var(--foreground);font-family:var(--font-body), sans-serif;margin:0}button,a{font:inherit}button{color:inherit}.site-shell{min-height:100vh}.site-header{z-index:10;background:color-mix(in oklch, var(--background) 94%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:sticky;top:0}.header-inner{border-bottom:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);align-items:center;gap:42px;width:min(1440px,100% - 48px);min-height:92px;margin:0 auto;display:flex}.brand{color:inherit;font-family:var(--font-display), sans-serif;align-items:center;gap:12px;font-size:20px;font-weight:650;line-height:1.05;text-decoration:none;display:flex}.brand-mark{object-fit:contain;width:46px;height:42px}.primary-nav{align-items:center;gap:34px;display:flex}.primary-nav a,.primary-nav span{color:var(--muted);font-family:var(--font-display), sans-serif;font-size:17px;font-weight:650;text-decoration:none}.primary-nav a.active{color:var(--foreground);box-shadow:inset 0 -3px 0 var(--primary-strong)}.system-switch{border:2px solid color-mix(in oklch, var(--foreground) 15%, transparent);background:var(--card);box-shadow:3px 3px 0 var(--shadow);border-radius:999px;gap:4px;padding:4px;display:flex}.system-switch button{min-height:36px;color:var(--foreground);background:0 0;border:0;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:750}.system-switch button[aria-pressed=true]{background:var(--primary-strong);color:var(--card)}.system-switch button:disabled{cursor:not-allowed;opacity:.55}.page-content{width:min(1440px,100% - 48px);margin:0 auto;padding:32px 0 72px}.hero{margin-bottom:var(--hero-bottom-gap)}.hero h1{max-width:1200px;font-family:var(--font-display), sans-serif;font-size:var(--hero-title-size);letter-spacing:-.045em;margin:0;font-weight:650;line-height:1}.hero>div>p:last-child{max-width:760px;margin:var(--hero-text-gap) 0 0;color:var(--muted);font-size:var(--hero-text-size);line-height:1.6}.tool-shell{border:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);background:var(--card);box-shadow:6px 7px 0 var(--shadow);border-radius:30px;overflow:hidden}.tool-bar{background:var(--primary-strong);min-height:88px;color:var(--card);justify-content:space-between;align-items:center;gap:24px;padding:16px 28px;display:flex}.tool-bar>strong{letter-spacing:.1em;text-transform:uppercase;font-size:13px}.tool-bar>strong span{color:color-mix(in oklch, var(--card) 75%, transparent)}.system-control{align-items:center;gap:16px;display:flex}.system-control>span{color:color-mix(in oklch, var(--card) 85%, transparent);font-size:13px;font-weight:700}.tool-layout{grid-template-columns:240px minmax(360px,1fr) 330px;min-height:690px;display:grid}.note-picker{border-right:2px solid color-mix(in oklch, var(--foreground) 10%, transparent);flex-direction:column;gap:22px;padding:28px 24px;display:flex}.picker-heading,.register-heading{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.picker-heading p{letter-spacing:.1em;text-transform:uppercase;margin:0;font-size:12px;font-weight:800}.picker-heading span,.register-heading span{color:var(--muted);font-size:11px}.register{flex-direction:column;gap:10px;display:flex}.register-heading strong{background:var(--secondary);border-radius:999px;padding:4px 10px;font-size:12px}.register-heading strong[data-tone="1"]{background:color-mix(in oklch, var(--primary-strong) 76%, white)}.register-heading strong[data-tone="2"]{background:#dac4ff;background:lab(82.2213% 23.3119 -37.8898)}.note-grid{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}.note-button-wrap{min-width:0;display:block;position:relative}.note-button{border:2px solid var(--border);background:var(--card);min-width:0;height:46px;box-shadow:3px 3px 0 var(--shadow);font-family:var(--font-display), sans-serif;border-radius:17px;width:100%;font-weight:600;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;position:relative}.note-button:hover{border-color:color-mix(in oklch, var(--primary-strong) 60%, var(--border));transform:translateY(-2px)}.note-button:active{box-shadow:1px 1px 0 var(--shadow);transform:translateY(2px)}.note-button[aria-pressed=true]{border-color:color-mix(in oklch, var(--foreground) 72%, transparent);background:var(--primary)}.note-button:focus-visible,.system-switch button:focus-visible{outline:3px solid var(--primary-strong);outline-offset:3px}.difference-dot{border:2px solid var(--card);background:var(--primary-strong);cursor:help;border-radius:50%;width:12px;height:12px;padding:0;position:absolute;top:-5px;right:-5px}.difference-dot:focus-visible{outline:3px solid var(--primary-strong);outline-offset:3px}.fingering-stage{border-right:2px solid color-mix(in oklch, var(--foreground) 10%, transparent);background:linear-gradient(145deg, color-mix(in oklch, var(--primary) 9%, white), var(--card) 46%);flex-direction:column;justify-content:space-between;min-width:0;padding:28px clamp(28px,4vw,58px) 36px;display:flex}.selected-heading{justify-content:space-between;align-items:start;gap:20px;padding:0;display:flex}.selected-heading-side{flex-direction:column;align-items:flex-end;gap:8px;display:flex}.selected-note-row{align-items:center;gap:16px;display:flex}.cartoon-play-btn{cursor:pointer;filter:drop-shadow(3px 4px #e4ddd1);background:0 0;border:0;justify-content:center;align-items:center;padding:0;transition:transform .12s,filter .12s;display:inline-flex}.cartoon-play-btn svg{width:52px;height:52px;overflow:visible}.cartoon-play-btn:hover{filter:drop-shadow(4px 6px #e4ddd1);transform:translateY(-2px)}.cartoon-play-btn:active{filter:drop-shadow(1px 2px #e4ddd1);transform:translateY(2px)}@keyframes wave-pulse{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}.cartoon-play-btn.playing .wave-1{animation:.8s infinite wave-pulse}.cartoon-play-btn.playing .wave-2{animation:.8s .2s infinite wave-pulse}.system-note{border:2px solid var(--border);max-width:150px;color:var(--muted);text-align:center;border-radius:13px;padding:9px 12px;font-size:12px;font-weight:700;line-height:1.3}.eyebrow{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:0 0 30px;font-size:12px;font-weight:800}.selected-note{color:var(--primary-strong);font-family:var(--font-display), sans-serif;letter-spacing:-.04em;font-size:clamp(76px,8vw,112px);font-weight:650;line-height:.84;animation:.28s cubic-bezier(.34,1.56,.64,1) note-pop}.selected-note small{color:var(--muted);letter-spacing:0;font-size:18px}.accidental{vertical-align:super;margin-left:.08em;font-size:.6em;font-weight:800}.accidental.flat{-webkit-text-stroke:.1em currentColor}.quick-pattern{flex-wrap:wrap;justify-content:center;gap:9px;margin:0 auto;animation:.28s cubic-bezier(.34,1.56,.64,1) note-pop;display:flex}.quick-pattern span{border:2px solid var(--foreground);background:var(--card);border-radius:50%;place-items:center;width:34px;height:34px;font-size:10px;font-weight:800;display:grid}.quick-pattern span[data-state=c]{background:var(--foreground);color:var(--card)}.quick-pattern span[data-state=h]{background:linear-gradient(90deg, var(--foreground) 50%, var(--card) 50%);color:var(--foreground);text-shadow:-1px -1px 0 var(--card), 1px -1px 0 var(--card), -1px 1px 0 var(--card), 1px 1px 0 var(--card)}.recorder-diagram{aspect-ratio:2/3;width:min(100%,320px);margin:-40px auto 0;position:relative}.recorder-diagram.compact{width:104px;margin:0 auto}.recorder-overlay{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.finger-fill{fill:#0000}.finger-fill[data-state=c]{fill:#361605}.finger-fill[data-state=h]{fill:url(#half-hole)}.thumb-ring{fill:var(--card);stroke:#361605;stroke-width:8px}.hole-label{fill:var(--primary-strong);text-anchor:middle;font-size:44px;font-weight:600;font-family:var(--font-display), sans-serif}.note-details{background:color-mix(in oklch, var(--background) 55%, white);flex-direction:column;justify-content:center;gap:28px;padding:28px;display:flex}.audio-card,.fingering-guide{border:2px solid color-mix(in oklch, var(--foreground) 10%, transparent);background:var(--card);border-radius:22px;padding:20px}.staff-card{border:2px solid color-mix(in oklch, var(--foreground) 10%, transparent);background:var(--card);box-shadow:0 4px 20px color-mix(in oklch, var(--foreground) 3%, transparent);border-radius:22px;flex-direction:column;align-items:center;padding:24px 20px 12px;display:flex}.staff-card .detail-heading{align-self:flex-start;width:100%}.audio-card{flex-direction:column;gap:12px;display:flex}.audio-play-button{border:2px solid color-mix(in oklch, var(--foreground) 60%, transparent);background:var(--primary);width:100%;color:var(--foreground);font-family:var(--font-display), sans-serif;cursor:pointer;box-shadow:2px 3px 0 var(--shadow);border-radius:16px;justify-content:center;align-items:center;gap:10px;padding:13px 18px;font-size:14px;font-weight:600;transition:transform .12s,box-shadow .12s,background .12s;display:flex}.audio-play-button:hover{box-shadow:3px 5px 0 var(--shadow);transform:translateY(-2px)}.audio-play-button:active{box-shadow:1px 1px 0 var(--shadow);transform:translateY(1px)}.audio-play-button.playing{background:color-mix(in oklch, var(--primary-strong) 25%, var(--primary))}.audio-play-icon{font-size:15px;line-height:1}.detail-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.detail-heading strong{letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;font-size:13px}.detail-heading span{color:var(--muted);white-space:nowrap;font-size:11px}.title-with-icon{align-items:center;gap:8px;display:flex}.title-with-icon svg{color:var(--foreground);flex-shrink:0}.staff-wrapper{justify-content:center;align-items:center;width:100%;min-height:150px;margin-top:-24px;display:flex}.staff-wrapper svg{transform-origin:top;max-width:100%;overflow:visible;transform:scale(1.05);width:220px!important;height:auto!important}.note-facts{grid-template-columns:1fr 1fr;gap:10px;margin:0;display:grid}.note-facts div{background:color-mix(in oklch, var(--primary) 18%, white);border-radius:17px;gap:5px;padding:15px;display:grid}.note-facts dt{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:800}.note-facts dd{margin:0;font-size:16px;font-weight:800}.fingering-guide{background:color-mix(in oklch, var(--primary) 14%, white)}.fingering-guide ul{gap:14px;margin:18px 0 0;padding:0;list-style:none;display:grid}.fingering-guide li{color:var(--foreground);padding-left:20px;font-size:13px;line-height:1.5;position:relative}.fingering-guide li:before{background:var(--primary-strong);content:"";border-radius:50%;width:7px;height:7px;position:absolute;top:.55em;left:1px}.tutorial-section{border:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);background:var(--card);box-shadow:4px 5px 0 var(--shadow);border-radius:26px;margin-top:28px;padding:32px}.tutorial-header{margin-bottom:32px}.tutorial-header h2{font-family:var(--font-display), sans-serif;margin:0 0 12px;font-size:28px;font-weight:650}.tutorial-header p{color:var(--muted);margin:0;font-size:16px}.tutorial-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;display:grid}.tutorial-card{background:color-mix(in oklch, var(--background) 50%, white);border:1px solid color-mix(in oklch, var(--foreground) 6%, transparent);border-radius:20px;padding:24px}.tutorial-card h3{font-family:var(--font-display), sans-serif;color:var(--primary-strong);margin:0 0 16px;font-size:20px;font-weight:600}.tutorial-card p{color:var(--muted);margin:0 0 12px;line-height:1.6}.tutorial-card p:last-child{margin-bottom:0}.trusted-references{border-top:1px solid color-mix(in oklch, var(--foreground) 10%, transparent);margin-top:28px;padding-top:22px}.trusted-references h3{font-family:var(--font-display), sans-serif;margin:0 0 7px;font-size:17px;font-weight:600}.trusted-references p{color:var(--muted);margin:0;font-size:13px;line-height:1.65}.trusted-references a{color:var(--foreground);text-underline-offset:3px;font-weight:700}.trusted-references a:hover{color:var(--primary-strong)}.note-guide-directory{margin-top:14px}.note-guide-directory summary{width:fit-content;color:var(--foreground);cursor:pointer;font-size:13px;font-weight:800}.note-guide-directory>div{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.note-guide-directory>div a{border:1px solid var(--border);background:color-mix(in oklch, var(--background) 45%, white);border-radius:999px;padding:7px 10px;font-size:12px;text-decoration:none}.circle-legend{flex-direction:column;gap:16px;margin:0;padding:0;list-style:none;display:flex}.circle-legend li{flex-direction:column;gap:6px;display:flex}.legend-title{align-items:center;gap:10px;display:flex}.legend-title i{border:2px solid var(--foreground);background:var(--card);border-radius:50%;flex-shrink:0;width:20px;height:20px;display:block}.legend-title i[data-state=c]{background:var(--foreground)}.legend-title i[data-state=h]{background:linear-gradient(90deg, var(--foreground) 50%, var(--card) 50%)}.legend-title strong{color:var(--foreground);font-size:16px}.legend-desc{color:var(--muted);font-size:15px;line-height:1.6}.pinch-details{flex-direction:column;gap:4px;margin-top:2px;display:flex}.pinch-details strong{display:inline!important}.guide-dot-inline{background:var(--primary-strong);vertical-align:middle;border-radius:50%;width:12px;height:12px;margin:0 2px;display:inline-block}@keyframes note-pop{0%{opacity:.3;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@media (max-width:1100px){.header-inner{gap:24px}.brand{font-size:18px}.primary-nav{gap:16px}.primary-nav a,.primary-nav span{font-size:14px}.tool-layout{grid-template-columns:220px minmax(0,1fr)}.fingering-stage{border-right:0}.note-details{border-top:2px solid color-mix(in oklch, var(--foreground) 10%, transparent);grid-column:1/-1;grid-template-columns:1.2fr 1fr 1.2fr;display:grid}}@media (max-width:960px){.header-inner{flex-wrap:wrap;padding:14px 0}.primary-nav{scrollbar-width:none;order:3;justify-content:space-between;width:100%;overflow-x:auto}.primary-nav a,.primary-nav span{white-space:nowrap;flex-shrink:0;padding-block:4px}}@media (max-width:760px){.header-inner{flex-wrap:wrap;gap:14px 24px;width:calc(100% - 32px);padding:14px 0}.primary-nav{scrollbar-width:none;order:3;justify-content:space-between;gap:12px;width:100%;overflow-x:auto}.primary-nav a,.primary-nav span{white-space:nowrap;flex-shrink:0;padding-block:4px;font-size:14px}.page-content{width:min(100% - 32px,680px);padding-top:30px}:root{--hero-title-size:clamp(36px, 10.5vw, 52px);--hero-text-size:17px;--hero-bottom-gap:28px}.tool-bar{flex-direction:column;align-items:flex-start}.system-control{justify-content:space-between;width:100%}.tool-layout{grid-template-columns:1fr}.note-picker{border-top:2px solid color-mix(in oklch, var(--foreground) 10%, transparent);border-right:0}.note-grid{grid-template-columns:repeat(6,1fr)}.fingering-stage{order:-1}.note-details{grid-column:auto;grid-template-columns:1fr}.tutorial-section{padding:24px}.tutorial-card{padding:20px}}@media (max-width:440px){.brand{font-size:16px}.brand-mark{width:38px;height:35px}.primary-nav{gap:8px}.primary-nav a,.primary-nav span{font-size:clamp(11px,3.2vw,13px)}.system-switch button{padding-inline:10px}.note-grid{grid-template-columns:repeat(4,1fr)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.difference-modal{max-width:480px;color:var(--foreground);background:0 0;border:none;border-radius:24px;margin:auto;padding:0}.difference-modal::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1a090066}.difference-modal .modal-content{background:var(--background);border-radius:24px;padding:32px;box-shadow:0 12px 48px #0003}.difference-modal h3{color:var(--primary-strong);margin:0 0 16px;font-size:24px}.difference-modal p{margin:0 0 16px;font-size:16px;line-height:1.6}.difference-modal ul{margin:0 0 24px;padding-left:20px;font-size:16px;line-height:1.6}.difference-modal li{margin-bottom:8px}.difference-modal .close-btn{background:var(--foreground);width:100%;color:var(--card);cursor:pointer;border:none;border-radius:12px;padding:14px;font-size:16px;font-weight:800;transition:opacity .2s;display:block}.difference-modal .close-btn:hover{opacity:.9}.print-now-button,.print-secondary-button{border:2px solid var(--foreground);background:var(--primary);min-height:52px;box-shadow:4px 4px 0 var(--shadow);cursor:pointer;white-space:nowrap;color:var(--foreground);border-radius:18px;align-items:center;gap:10px;padding:12px 20px;font-weight:800;text-decoration:none;display:flex}.print-secondary-button{background:var(--card);box-shadow:3px 3px 0 var(--shadow)}.full-chart-actions{align-items:center;gap:14px;display:flex}.full-chart-toolbar .print-now-button,.full-chart-toolbar .print-secondary-button{min-height:48px;padding:10px 18px}.full-chart-toolbar .print-secondary-button{border-color:var(--card)}.print-sheet{border:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);border-top:18px solid var(--primary-strong);box-shadow:5px 6px 0 var(--shadow);background:#fff;border-radius:28px;padding:28px}.full-chart-shell .print-sheet{box-shadow:none;border:0;border-radius:0}.print-sheet-header{border-bottom:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);justify-content:space-between;align-items:end;gap:24px;padding-bottom:20px;display:flex}.print-sheet-header small{color:var(--primary-strong);letter-spacing:.11em;text-transform:uppercase;font-size:11px;font-weight:800}.print-sheet-header h2{font-family:var(--font-display), sans-serif;margin:5px 0 0;font-size:28px;font-weight:650}.print-sheet-system{text-align:right}.print-sheet-system strong{text-transform:uppercase;font-size:13px}.print-chart-meta{justify-content:space-between;align-items:center;gap:24px;padding:16px 0;display:flex}.print-pitch-note{color:var(--muted);text-align:right;white-space:nowrap;margin:0;font-size:12px;font-weight:750}.print-legend{color:var(--muted);gap:24px;font-size:12px;font-weight:750;display:flex}.print-legend span{align-items:center;gap:7px;display:flex}.print-legend i{border:2px solid var(--foreground);background:#fff;border-radius:50%;width:16px;height:16px}.print-legend i[data-state=c]{background:var(--foreground)}.print-legend i[data-state=h]{background:linear-gradient(90deg, var(--foreground) 50%, white 50%)}.print-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;display:grid}.print-note-card{border:1.5px solid color-mix(in oklch, var(--foreground) 14%, transparent);background:color-mix(in oklch, var(--background) 24%, white);border-radius:18px;justify-items:center;padding:14px 8px 8px;display:grid}.print-note-name{text-align:center;justify-items:center;min-height:42px;display:grid}.print-note-name strong{font-family:var(--font-display), sans-serif;font-size:16px;font-weight:600;line-height:1.1}.print-note-name small{color:var(--muted);white-space:nowrap;margin-top:3px;font-size:9px}.print-note-name small .accidental{font-size:.72em}@media (max-width:900px){.print-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:760px){.full-chart-actions{flex-wrap:wrap;align-items:flex-start;width:100%}.full-chart-actions .system-control{flex-basis:100%}.print-sheet{padding:18px}.print-sheet-header{flex-direction:column;align-items:flex-start}.print-sheet-system,.print-pitch-note{text-align:left}.print-chart-meta{flex-direction:column;align-items:flex-start;gap:10px}.print-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:440px){.print-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.practice-shell{border:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);background:var(--card);box-shadow:6px 7px 0 var(--shadow);border-radius:30px;overflow:hidden}.practice-toolbar{background:var(--primary-strong);color:var(--card);justify-content:space-between;align-items:center;gap:24px;padding:14px 22px;display:flex}.practice-mode-switch{background:color-mix(in oklch, var(--foreground) 22%, var(--primary-strong));border-radius:20px;gap:4px;padding:4px;display:flex}.practice-mode-switch button{color:var(--card);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:16px;align-items:center;gap:10px;padding:8px 16px 8px 12px;transition:background .15s,color .15s;display:flex}.practice-mode-switch button:hover:not([aria-selected=true]){background:color-mix(in oklch, var(--card) 14%, transparent)}.practice-mode-switch button[aria-selected=true]{background:var(--card);color:var(--foreground);box-shadow:2px 3px 0 color-mix(in oklch, var(--foreground) 35%, transparent)}.practice-mode-switch button[aria-selected=true] svg{color:var(--primary-strong)}.practice-mode-switch button>span{gap:1px;display:grid}.practice-mode-switch strong{font-family:var(--font-display), sans-serif;font-size:16px;font-weight:600;line-height:1.15}.practice-mode-switch small{opacity:.72;font-size:12px;font-weight:600}.practice-mode-switch button:focus-visible{outline:3px solid var(--card);outline-offset:2px}.practice-status{border-bottom:2px solid color-mix(in oklch, var(--foreground) 8%, transparent);background:color-mix(in oklch, var(--background) 55%, white);align-items:center;gap:18px;padding:12px 24px;display:flex}.practice-status>strong{white-space:nowrap;font-size:14px}.practice-status>span{color:var(--muted);white-space:nowrap;font-size:13px;font-weight:750}.practice-progress{background:color-mix(in oklch, var(--foreground) 10%, transparent);border-radius:999px;flex:1;height:10px;overflow:hidden}.practice-progress i{border-radius:inherit;background:var(--primary-strong);height:100%;transition:width .3s;display:block}.practice-status>button{border:2px solid var(--border);background:var(--card);min-height:34px;color:var(--muted);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:5px 12px;font-size:12px;font-weight:800;display:inline-flex}.practice-status>button:hover{border-color:var(--foreground);color:var(--foreground)}.round-feedback button,.build-setup-actions>button,.practice-result-actions button,.practice-result-actions a{border:2px solid var(--foreground);background:var(--primary);min-height:50px;box-shadow:3px 3px 0 var(--shadow);color:var(--foreground);white-space:nowrap;cursor:pointer;border-radius:16px;justify-content:center;align-items:center;gap:8px;padding:12px 22px;font-size:15px;font-weight:800;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex}.round-feedback button:hover:not(:disabled),.build-setup-actions>button:hover:not(:disabled),.practice-result-actions button:hover,.practice-result-actions a:hover{box-shadow:4px 5px 0 var(--shadow);transform:translateY(-1px)}.round-feedback button:active:not(:disabled),.build-setup-actions>button:active:not(:disabled),.practice-result-actions button:active,.practice-result-actions a:active{box-shadow:1px 1px 0 var(--shadow);transform:translate(2px,2px)}.round-feedback button:disabled,.build-setup-actions>button:disabled{cursor:not-allowed;border-color:var(--border);box-shadow:none;opacity:.5}.round-feedback button:focus-visible,.build-setup-actions>button:focus-visible,.practice-result-actions button:focus-visible,.practice-result-actions a:focus-visible{outline:3px solid var(--primary-strong);outline-offset:3px}.practice-round{grid-template:"prompt stage""feedback stage"1fr/minmax(250px,330px) minmax(0,1fr);align-content:start;gap:22px clamp(24px,4vw,48px);padding:28px clamp(20px,3vw,36px) 32px;display:grid}.build-round{grid-template-rows:auto auto 1fr;grid-template-areas:"prompt stage""help stage""feedback stage"}.round-prompt{grid-area:prompt}.round-prompt p{color:var(--muted);margin:0;font-size:15px;font-weight:750}.round-prompt h2{color:var(--primary-strong);font-family:var(--font-display), sans-serif;letter-spacing:-.03em;margin:6px 0 12px;font-size:clamp(76px,8vw,112px);font-weight:650;line-height:.9;animation:.28s cubic-bezier(.34,1.56,.64,1) note-pop}.round-chip{background:var(--secondary);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:800;display:inline-block}.round-stage{background:color-mix(in oklch, var(--background) 60%, white);border-radius:24px;grid-area:stage;place-items:center;min-height:460px;padding:20px;transition:background .2s;display:grid}.round-stage:has(.build-recorder[data-correct]){background:#dbf8da;background:lab(94.8512% -13.972 10.919)}.round-help{grid-area:help}.round-help p{color:var(--muted);margin:10px 0 0;font-size:13px;line-height:1.55}.hole-legend{flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;list-style:none;display:flex}.hole-legend li{align-items:center;gap:7px;font-size:13px;font-weight:750;display:flex}.hole-legend i{border:2px solid var(--foreground);background:var(--card);border-radius:50%;width:18px;height:18px;display:block}.hole-legend i[data-state=c]{background:var(--foreground)}.hole-legend i[data-state=h]{background:linear-gradient(90deg, var(--foreground) 50%, var(--card) 50%)}.round-feedback{background:color-mix(in oklch, var(--primary) 16%, white);border:2px solid #0000;border-radius:20px;grid-area:feedback;align-self:start;gap:14px;padding:16px;display:grid}.round-feedback p{min-height:44px;color:var(--muted);margin:0;font-size:15px;line-height:1.5}.round-feedback p strong{color:var(--foreground)}.round-feedback[data-tone=good]{background:#dbf8da;background:lab(94.8512% -13.972 10.919);border-color:#4ea95473;border-color:lab(62.3758% -42.0879 34.9512/.45)}.round-feedback[data-tone=good] p strong{color:#135d1d;color:lab(34.1389% -33.7773 28.9501)}.round-feedback[data-tone=bad]{background:#ffece8;background:lab(95.0542% 10.476 6.42936);border-color:#e24a3f59;border-color:lab(54.0807% 59.2254 40.8666/.35)}.round-feedback[data-tone=bad] p strong{color:#a9231e;color:lab(38.0073% 53.2593 38.6991)}.practice-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:min(100%,800px);display:grid}.practice-option{border:2px solid var(--border);background:var(--card);min-width:0;box-shadow:4px 4px 0 var(--shadow);cursor:pointer;border-radius:22px;place-items:center;padding:26px 10px 14px;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;display:grid;position:relative}.practice-option .recorder-diagram.compact{width:min(100%,200px)}.practice-option:hover:not(:disabled){border-color:var(--primary-strong);box-shadow:5px 7px 0 var(--shadow);transform:translateY(-4px)}.practice-option:focus-visible{outline:3px solid var(--primary-strong);outline-offset:4px}.practice-option:disabled{color:inherit;cursor:default;opacity:.55}.practice-option[data-result=selected]{border-color:var(--foreground);background:color-mix(in oklch, var(--primary) 30%, white)}.practice-option[data-result=correct]{opacity:1;background:#d3f7d3;background:lab(93.8177% -16.7671 13.1424);border-color:#38853e;border-color:lab(49.3679% -36.4918 30.4366)}.practice-option[data-result=wrong]{opacity:1;background:#ffe9e5;background:lab(93.7603% 15.0132 9.23704);border-color:#e24a3f;border-color:lab(54.0807% 59.2254 40.8666)}.option-letter{border:2px solid var(--border);background:var(--card);width:28px;height:28px;color:var(--muted);font-family:var(--font-display), sans-serif;border-radius:50%;place-items:center;font-size:14px;font-weight:600;display:grid;position:absolute;top:12px;left:12px}.practice-option[data-result=selected] .option-letter{border-color:var(--foreground);background:var(--primary);color:var(--foreground)}.practice-option[data-result=correct] .option-letter{color:#fff;background:#33903c;background:lab(53.0729% -42.1543 35.5654);border-color:#0000}.practice-option[data-result=wrong] .option-letter{color:#fff;background:#da4339;background:lab(51.7542% 59.2919 41.3066);border-color:#0000}.build-recorder{width:100%}.practice-round .hole-label{display:none}.build-recorder .recorder-diagram{width:min(100%,300px);margin:-20px auto -30px}.build-comparison{grid-template-columns:repeat(2,minmax(0,300px));justify-content:center;gap:28px;width:100%;display:grid}.build-comparison section{background:var(--card);text-align:center;border:2px solid #e24a3f4d;border:2px solid lab(54.0807% 59.2254 40.8666/.3);border-radius:22px;padding:20px 20px 18px;overflow:hidden}.build-comparison h3{color:#a9231e;color:lab(38.0073% 53.2593 38.6991);background:#ffe9e5;background:lab(93.7603% 15.0132 9.23704);border-radius:999px;align-items:center;gap:6px;margin:0;padding:4px 12px;font-size:13px;font-weight:800;display:inline-flex}.build-comparison .correct-answer{border-color:#4ea95473;border-color:lab(62.3758% -42.0879 34.9512/.45)}.build-comparison .correct-answer h3{color:#135d1d;color:lab(34.1389% -33.7773 28.9501);background:#d3f7d3;background:lab(93.8177% -16.7671 13.1424)}.build-comparison .recorder-diagram{width:min(100%,230px);margin:8px auto -8px}.recorder-diagram.interactive .hole-hit{fill:#0000;stroke:#0000;stroke-width:10px;pointer-events:all;cursor:pointer}.recorder-diagram.interactive .hole-hit:hover,.recorder-diagram.interactive .hole-hit:focus{stroke:var(--primary-strong);stroke-dasharray:12 8;outline:none}.build-setup{padding:28px clamp(20px,3vw,36px)}.build-setup-heading{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;display:flex}.build-setup-heading h2{font-family:var(--font-display), sans-serif;margin:0;font-size:30px;font-weight:650;line-height:1.1}.build-setup-heading p{color:var(--muted);margin:6px 0 0;font-size:15px}.note-presets{flex-wrap:wrap;gap:8px;display:flex}.note-presets button{border:2px solid var(--border);background:var(--card);cursor:pointer;border-radius:999px;min-height:36px;padding:6px 14px;font-size:13px;font-weight:750}.note-presets button:hover{border-color:var(--foreground)}.note-presets button[aria-pressed=true]{border-color:var(--foreground);background:var(--foreground);color:var(--card)}.note-presets button:focus-visible{outline:3px solid var(--primary-strong);outline-offset:2px}.build-note-groups{background:color-mix(in oklch, var(--background) 60%, white);border-radius:24px;grid-template-columns:7fr 7fr 2fr;gap:18px;margin-top:26px;padding:18px;display:grid}.build-note-groups section{min-width:0}.build-note-groups header{flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-height:28px;margin-bottom:10px;display:flex}.build-note-groups header strong{letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:800}.build-note-groups header span{color:var(--muted);font-size:12px}.note-keys{grid-template-rows:auto auto;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px 4px;display:grid}.build-note-groups section:last-child .note-keys{grid-template-columns:repeat(4,minmax(0,1fr))}.note-keys button{border:2px solid var(--border);background:var(--card);min-width:0;box-shadow:2px 3px 0 var(--shadow);font-family:var(--font-display), sans-serif;cursor:pointer;border-radius:14px;height:62px;margin-inline:2px;font-size:18px;font-weight:600;transition:transform .12s,box-shadow .12s,border-color .12s,background .12s}.note-keys button[data-kind=accidental]{background:color-mix(in oklch, var(--foreground) 7%, var(--card))}.note-keys button:hover{border-color:color-mix(in oklch, var(--primary-strong) 60%, var(--border));transform:translateY(-2px)}.note-keys button:active{box-shadow:0 0 0 var(--shadow);transform:translateY(1px)}.note-keys button[aria-pressed=true]{border-color:var(--foreground);background:var(--primary);box-shadow:2px 3px 0 var(--shadow)}.note-keys button:focus-visible{outline:3px solid var(--primary-strong);outline-offset:2px}.build-setup-actions{justify-content:space-between;align-items:center;gap:20px;margin-top:22px;display:flex}.build-setup-actions>span{color:var(--muted);align-items:baseline;gap:6px;font-size:15px;font-weight:700;display:flex}.build-setup-actions>span strong{color:var(--foreground);font-family:var(--font-display), sans-serif;font-size:22px;font-weight:650}.build-setup-actions>span button{color:var(--primary-strong);cursor:pointer;background:0 0;border:0;margin-left:6px;padding:0;font-size:13px;font-weight:800}.build-setup-actions>span button:hover{text-decoration:underline}.build-setup-actions>button{min-width:200px}.practice-results{text-align:center;place-content:center;justify-items:center;min-height:460px;padding:44px 24px;display:grid}.results-badge{font-size:64px;line-height:1;animation:.32s cubic-bezier(.34,1.56,.64,1) note-pop}.practice-results .eyebrow{margin:22px 0 6px}.practice-results h2{color:var(--primary-strong);font-family:var(--font-display), sans-serif;margin:0;font-size:76px;font-weight:650;line-height:1}.practice-results h2 small{color:var(--muted);font-size:28px}.practice-results>p:not(.eyebrow){white-space:nowrap;color:var(--muted);margin:14px 0 28px;font-size:17px;line-height:1.55}.practice-result-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}@media (max-width:1100px){.build-note-groups{grid-template-columns:1fr 1fr}.build-note-groups section:last-child{grid-column:1/-1}.build-note-groups section:last-child .note-keys{width:calc(14.2857% - 2.57143px)}}@media (max-width:860px){.practice-toolbar{flex-direction:column;align-items:stretch;gap:12px;padding:12px}.practice-mode-switch button{flex:1}.practice-toolbar .system-control{justify-content:space-between;width:100%}.practice-round,.build-round{grid-template-rows:none;grid-template-columns:minmax(0,1fr);grid-template-areas:"prompt""stage""feedback";gap:16px;padding:20px 16px 22px}.build-round{grid-template-areas:"prompt""stage""feedback""help"}.round-prompt{text-align:center;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 12px;display:flex}.round-prompt p{width:100%}.round-prompt h2{margin:0;font-size:68px}.round-stage{min-height:0;padding:14px}.round-feedback p{min-height:0}.build-recorder .recorder-diagram{width:min(100%,250px)}.build-setup{padding:22px 16px}.build-note-groups{grid-template-columns:minmax(0,1fr);padding:14px 12px}.build-note-groups section:last-child{grid-column:auto}.build-note-groups section:last-child .note-keys{width:28.5714%}}@media (max-width:560px){.practice-mode-switch button{gap:7px;padding:8px 10px}.practice-mode-switch small{display:none}.practice-status{flex-wrap:wrap;gap:8px 12px;padding:10px 16px}.practice-status>span{margin-left:auto}.practice-progress{flex-basis:100%;order:4}.practice-options{gap:8px}.practice-option{border-radius:16px;padding:30px 4px 8px}.option-letter{width:24px;height:24px;font-size:12px;top:7px;left:7px}.build-comparison{gap:10px}.build-comparison section{padding:14px 8px 12px}.build-setup-heading h2{font-size:26px}.note-keys{gap:5px 2px}.note-keys button{border-radius:10px;height:52px;margin-inline:1px;font-size:15px}.build-setup-actions{flex-direction:column;align-items:stretch}.build-setup-actions>button{width:100%}.practice-result-actions{flex-direction:column;align-items:stretch;width:100%}.practice-results>p:not(.eyebrow){white-space:normal}}.songs-hero,.song-hero{margin-bottom:var(--hero-bottom-gap)}.song-section-heading .eyebrow,.song-list-heading .eyebrow,.song-tips .eyebrow{color:var(--primary-strong);margin-bottom:12px}.songs-hero h1,.song-hero h1{font-family:var(--font-display), sans-serif;font-size:var(--hero-title-size);letter-spacing:-.045em;margin:0;font-weight:650;line-height:1}.songs-hero>p:last-child,.song-hero>p:first-of-type{max-width:760px;margin:var(--hero-text-gap) 0 0;color:var(--muted);font-size:var(--hero-text-size);line-height:1.6}.song-list{border:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);background:var(--card);box-shadow:6px 7px 0 var(--shadow);border-radius:30px;overflow:hidden}.song-list-heading{background:var(--primary-strong);color:var(--card);justify-content:space-between;align-items:end;gap:24px;padding:30px 34px;display:flex}.song-list-heading .eyebrow{color:color-mix(in oklch, var(--primary) 80%, white)}.song-list-heading h2{font-family:var(--font-display), sans-serif;margin:0;font-size:clamp(28px,4vw,42px);font-weight:650}.song-list-heading>span{background:color-mix(in oklch, var(--card) 15%, transparent);white-space:nowrap;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800}.song-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:28px;display:grid}.song-card-grid[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.song-list+.song-list{margin-top:28px}.song-list-notes{border-bottom:2px solid color-mix(in oklch, var(--foreground) 8%, transparent);background:color-mix(in oklch, var(--background) 60%, white);grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px 36px;padding:22px 28px;display:grid}.song-list-notes ul{gap:10px;margin:0;padding:0;list-style:none;display:flex}.song-list-notes li{border:2px solid var(--border);background:var(--card);text-align:center;border-radius:18px;justify-items:center;gap:2px;width:128px;padding:10px 6px 8px;display:grid}.song-list-notes li strong{font-family:var(--font-display), sans-serif;font-size:22px;font-weight:650;line-height:1}.song-list-notes li .recorder-diagram.compact{width:min(100%,96px)}.song-list-notes li small{color:var(--muted);font-size:11px;font-weight:700;line-height:1.3}.song-list-notes p{color:var(--muted);margin:0 0 14px;font-size:15px;line-height:1.6}.song-list-notes p strong{color:var(--foreground)}.song-list-notes a{border:2px solid var(--foreground);background:var(--primary);box-shadow:3px 3px 0 var(--shadow);color:inherit;border-radius:14px;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:800;text-decoration:none;display:inline-flex}.song-list-notes a:hover{box-shadow:4px 5px 0 var(--shadow);transform:translateY(-1px)}.song-card{border:2px solid var(--border);background:color-mix(in oklch, var(--background) 35%, white);border-radius:24px;grid-template-columns:auto 1fr;gap:16px 20px;min-height:220px;padding:24px;display:grid}.song-number{background:var(--primary);border-radius:16px;place-items:center;width:48px;height:48px;font-weight:900;display:grid}.song-card>div>p:first-child{color:var(--primary-strong);letter-spacing:.05em;text-transform:uppercase;margin:3px 0 12px;font-size:12px}.song-card h3{font-family:var(--font-display), sans-serif;white-space:nowrap;margin:0;font-size:22px;font-weight:600;line-height:1.05}.song-card>div>p:last-child{color:var(--muted);margin:13px 0 0;font-size:14px;line-height:1.55}.song-card>a{border:2px solid var(--foreground);background:var(--card);box-shadow:2px 3px 0 var(--shadow);color:var(--foreground);border-radius:13px;grid-column:2;place-self:end start;align-items:center;gap:8px;padding:9px 13px;font-weight:850;text-decoration:none;display:inline-flex}.song-card>a span{color:var(--primary-strong);font-size:20px}.song-section-heading h2{font-family:var(--font-display), sans-serif;margin:0;font-size:clamp(27px,4vw,40px);font-weight:650;line-height:1.05}.song-fingering-practice-link{border:2px solid var(--foreground);background:var(--card);box-shadow:3px 3px 0 var(--shadow);color:inherit;border-radius:14px;align-items:center;gap:8px;margin-top:auto;padding:11px 15px;font-size:13px;font-weight:800;text-decoration:none;display:inline-flex}.song-back-link{border:2px solid var(--border);background:var(--card);color:var(--foreground);border-radius:999px;align-items:center;gap:8px;margin-bottom:30px;padding:9px 13px;font-size:13px;font-weight:800;text-decoration:none;display:inline-flex}.song-back-link span{color:var(--primary-strong);font-size:18px;line-height:1}.song-tags{gap:9px;margin-top:14px;display:flex}.song-tags span{border:1.5px solid var(--border);background:var(--card);border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800}.song-player{border:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);background:var(--card);box-shadow:6px 7px 0 var(--shadow);border-radius:30px;margin-bottom:34px;overflow:hidden}.song-player-heading{background:var(--primary-strong);color:var(--card);justify-content:space-between;align-items:center;gap:24px;padding:24px 28px;display:flex}.song-player-heading .eyebrow{color:color-mix(in oklch, var(--primary) 80%, white);margin:0 0 6px}.song-player-heading h2{font-family:var(--font-display), sans-serif;margin:0;font-size:clamp(25px,4vw,36px);font-weight:650}.song-controls{gap:10px;display:flex}.song-controls button{border:2px solid var(--foreground);background:var(--primary);min-height:45px;box-shadow:3px 3px 0 color-mix(in oklch, var(--foreground) 55%, transparent);color:var(--foreground);cursor:pointer;border-radius:14px;padding:10px 16px;font-weight:850}.song-controls button.secondary{background:var(--card)}.song-controls button:disabled{cursor:not-allowed;opacity:.55}.song-score-stage{background:color-mix(in oklch, var(--primary) 10%, white);margin-top:18px;padding:22px 0;position:relative}.song-score{width:min(100% - 48px,1180px);min-height:290px;margin:0 auto;overflow:hidden}.song-score svg{width:100%;height:auto;display:block}.song-score[data-playing=true] .song-score-note:not([data-active]),.song-score[data-playing=true] .song-score-label:not([data-active]),.song-score[data-playing=true] .song-score-beam:not([data-active]){opacity:.32}.song-score-note,.song-score-label,.song-score-beam{transition:opacity .12s}.song-score-fingering{z-index:2;opacity:1;pointer-events:none;width:130px;transition:opacity .16s,transform .16s;position:absolute;transform:translate(-50%)}.song-score-fingering .recorder-diagram.compact{width:100%}.song-score-stage[data-playing=true] .song-score-fingering:not([data-active]){opacity:.2}.song-score-fingering[data-active]{z-index:3;transform:translate(-50%)scale(1.08)}.song-playing-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.song-fingerings{border:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);background:var(--card);border-radius:28px;grid-template-columns:minmax(230px,.7fr) 1.3fr;gap:34px;margin-top:36px;padding:34px;display:grid}.song-section-heading>p:last-of-type{color:var(--muted);line-height:1.65}.song-fingerings .song-section-heading{flex-direction:column;align-items:flex-start;display:flex}.song-fingering-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.song-fingering-grid article{border:2px solid var(--border);background:color-mix(in oklch, var(--background) 34%, white);border-radius:20px;justify-items:center;gap:12px;padding:24px 14px 20px;display:grid;overflow:hidden}.song-fingering-grid h3{color:var(--primary-strong);font-family:var(--font-display), sans-serif;margin:0;font-size:30px;font-weight:600}.song-fingering-grid .recorder-diagram.compact{width:min(100%,150px);margin:0 auto}.song-play-next{border:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);background:var(--primary-strong);box-shadow:5px 6px 0 var(--shadow);color:var(--card);border-radius:28px;margin-top:34px;padding:28px}.song-play-next-heading{justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px;display:flex}.song-play-next-heading .eyebrow{color:color-mix(in oklch, var(--primary) 80%, white);margin:0 0 7px}.song-play-next-heading h2{font-family:var(--font-display), sans-serif;margin:0;font-size:34px;font-weight:650;line-height:1}.song-play-next-heading>a{color:var(--card);font-size:13px;font-weight:800;text-decoration:none}.song-play-next-heading>a span{color:var(--primary)}.song-play-next-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.song-play-next-grid>a{border:2px solid var(--border);background:color-mix(in oklch, var(--background) 35%, white);min-height:150px;box-shadow:3px 4px 0 var(--shadow);color:var(--foreground);border-radius:20px;flex-direction:column;align-items:flex-start;padding:18px;text-decoration:none;display:flex}.song-play-next-grid small{color:var(--primary-strong);letter-spacing:.05em;text-transform:uppercase;font-size:10px;font-weight:850}.song-play-next-grid strong{font-family:var(--font-display), sans-serif;margin-top:10px;font-size:21px;font-weight:650;line-height:1.08}.song-play-next-grid span{margin-top:auto;padding-top:18px;font-size:13px;font-weight:850}.song-play-next-grid i{color:var(--primary-strong);font-size:17px;font-style:normal}.learning-next-step{text-align:center;border:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);background:color-mix(in oklch, var(--primary) 13%, white);border-radius:26px;flex-direction:column;align-items:center;gap:16px;margin-top:32px;padding:48px 32px;display:flex}.learning-next-step .eyebrow{color:var(--primary-strong);margin-bottom:4px}.learning-next-step h2{font-family:var(--font-display), sans-serif;margin:0;font-size:clamp(28px,4.5vw,40px);font-weight:650;line-height:1.1}.learning-next-step>p{color:var(--muted);margin:0;line-height:1.7}.learning-next-step>div:last-child{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:8px;display:flex}.learning-next-step a{border:2px solid var(--foreground);background:var(--card);box-shadow:3px 3px 0 var(--shadow);color:inherit;border-radius:14px;padding:11px 15px;font-size:13px;font-weight:800;text-decoration:none}@media (max-width:760px){.song-card-grid,.song-card-grid[data-count="3"]{grid-template-columns:1fr;padding:18px}.song-card h3{white-space:normal}.song-list-heading,.song-player-heading{flex-direction:column;align-items:flex-start}.song-fingerings{grid-template-columns:1fr;padding:24px}.song-tips>a{grid-column:1}.song-list-notes{grid-template-columns:1fr;padding:18px}.song-list-notes ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.song-list-notes li{width:auto}.learning-next-step{padding:24px}.song-controls{width:100%}.song-controls button{flex:1}.song-score-fingering{width:110px}.song-play-next-grid{grid-template-columns:1fr}}@media (max-width:440px){.song-card{grid-template-columns:1fr}.song-card>a{grid-column:1}.song-controls{flex-direction:column}.song-play-next-heading{flex-direction:column;align-items:flex-start}.song-play-next{padding:22px}.song-fingering-grid{gap:8px}.song-fingering-grid h3{font-size:24px}.song-fingering-grid .recorder-diagram.compact{width:min(100%,105px)}}@media print{@page{size:letter portrait;margin:10mm}:root{--foreground:#361605;--card:#fff}body{-webkit-print-color-adjust:exact;print-color-adjust:exact;background:#fff;padding:0}.site-header,.site-footer,.print-only-hide,.print-toolbar,nextjs-portal{display:none!important}.page-content.printable-content{width:100%;padding:0}.full-chart-shell{box-shadow:none;border:0;border-radius:0;overflow:visible}.print-sheet{box-shadow:none;border:0;border-radius:0;padding:0}.print-sheet-header{padding-bottom:5mm}.print-sheet-header h2{font-size:20pt}.print-chart-meta{padding:4mm 0}.print-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:3mm}.print-note-card{break-inside:avoid;border-radius:4mm;padding:2mm 1mm 0}.print-note-name{min-height:10mm}.print-note-name strong{font-size:10pt}.print-note-name small{font-size:6.5pt}.recorder-diagram.compact{width:20mm;margin:0 auto}}.site-footer{border-top:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);background:color-mix(in oklch, var(--background) 72%, white)}.site-footer>div{justify-content:space-between;align-items:center;gap:24px;width:min(1440px,100% - 48px);min-height:86px;margin:0 auto;display:flex}.site-footer p{color:var(--muted);margin:0;font-size:13px;font-weight:700}.site-footer nav{gap:22px;display:flex}.site-footer a{color:var(--foreground);font-size:13px;font-weight:750;text-decoration:none}.site-footer a:hover{text-underline-offset:4px;text-decoration:underline}.note-guide-content{width:min(1180px,100% - 48px);padding-top:20px;padding-bottom:42px}.note-guide-hero{margin-bottom:22px}.note-guide-hero .eyebrow{color:var(--primary-strong);margin-bottom:8px}.note-guide-hero h1{font-family:var(--font-display), sans-serif;letter-spacing:-.035em;margin:0;font-size:clamp(40px,5vw,58px);font-weight:650;line-height:1}.note-guide-hero>p:last-child{color:var(--muted);white-space:nowrap;margin:12px 0 0;font-size:15px;line-height:1.55}.note-guide-layout{grid-template-columns:minmax(0,1fr) 330px;align-items:stretch;gap:22px;display:grid}.note-guide-fingerings{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;display:grid}.note-guide-layout[data-systems="1"] .note-guide-fingerings{grid-template-columns:minmax(0,1fr)}.note-guide-card,.note-guide-pitch{border:2px solid color-mix(in oklch, var(--foreground) 12%, transparent);background:var(--card);box-shadow:4px 5px 0 var(--shadow);border-radius:26px}.note-guide-card{flex-direction:column;min-width:0;padding:20px;display:flex}.note-guide-card .eyebrow,.note-guide-pitch .eyebrow{color:var(--primary-strong);margin-bottom:8px}.note-guide-card h2,.note-guide-pitch h2{font-family:var(--font-display), sans-serif;margin:0;font-size:23px;font-weight:650;line-height:1.1}.note-guide-summary{color:var(--muted);margin:8px 0 0;font-size:13px;font-weight:700}.note-guide-card .recorder-diagram{width:min(100%,205px);margin:-4px auto -14px}.note-guide-card ol{color:var(--muted);gap:5px;margin:0;padding-left:20px;font-size:12px;line-height:1.45;display:grid}.note-guide-sidebar{flex-direction:column;display:flex}.note-guide-pitch{padding:20px}.note-guide-pitch .staff-wrapper{min-height:118px;margin-top:-4px}.note-guide-pitch .staff-wrapper svg{width:185px!important}.note-guide-pitch dl{gap:10px;margin:4px 0 0;display:grid}.note-guide-pitch dl div{background:color-mix(in oklch, var(--primary) 16%, white);border-radius:14px;padding:10px 12px}.note-guide-pitch dt{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:800}.note-guide-pitch dd{margin:4px 0 0;font-weight:800}.note-guide-pitch>p:last-child{color:var(--muted);margin:12px 0 0;font-size:12px;line-height:1.5}.note-guide-actions{gap:10px;margin-top:auto;padding-top:14px;display:grid}.note-guide-actions a{border:2px solid var(--foreground);background:var(--primary);min-height:48px;box-shadow:4px 5px 0 var(--shadow);color:var(--foreground);font-family:var(--font-display), sans-serif;text-align:center;border-radius:16px;justify-content:center;align-items:center;padding:9px 14px;font-size:16px;font-weight:650;text-decoration:none;display:flex}.note-guide-actions a:hover{box-shadow:5px 7px 0 var(--shadow);transform:translateY(-2px)}.note-guide-actions a:active{box-shadow:2px 2px 0 var(--shadow);transform:translateY(2px)}.note-guide-step-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.note-guide-step-actions a{background:color-mix(in oklch, var(--primary) 16%, white)}.note-guide-source{color:var(--muted);text-align:center;margin:30px 0 0;font-size:12px;line-height:1.6}.note-guide-source a{color:var(--foreground);text-underline-offset:3px;font-weight:700}.legal-page,.not-found-page{width:min(760px,100% - 48px);margin:0 auto;padding:64px 0 96px}.legal-page .eyebrow,.not-found-page .eyebrow{color:var(--primary-strong);margin-bottom:14px}.not-found-page .eyebrow{font-family:var(--font-display), sans-serif;font-size:clamp(72px,12vw,128px);font-weight:650;line-height:.8}.legal-page h1,.not-found-page h1{font-family:var(--font-display), sans-serif;margin:0 0 30px;font-size:clamp(42px,7vw,64px);font-weight:650;line-height:1}.legal-page h2{font-family:var(--font-display), sans-serif;margin:34px 0 10px;font-size:24px;font-weight:650}.legal-page p,.not-found-page>p:not(.eyebrow){color:var(--muted);margin:0 0 16px;font-size:16px;line-height:1.75}.not-found-page{text-align:center;min-height:62vh}.not-found-page a{border:2px solid var(--foreground);background:var(--primary);box-shadow:3px 3px 0 var(--shadow);color:var(--foreground);border-radius:15px;gap:8px;margin-top:18px;padding:12px 18px;font-weight:800;text-decoration:none;display:inline-flex}@media (max-width:560px){.site-footer>div{flex-direction:column;align-items:flex-start;gap:12px;width:calc(100% - 32px);padding:22px 0}.legal-page,.not-found-page{width:calc(100% - 32px);padding:42px 0 72px}}@media (max-width:900px){.note-guide-layout{grid-template-columns:1fr}.note-guide-sidebar{order:-1}.note-guide-hero>p:last-child{white-space:normal}}@media (max-width:640px){.note-guide-content{width:calc(100% - 32px)}.note-guide-fingerings{grid-template-columns:1fr}.note-guide-card,.note-guide-pitch{padding:22px}}