.fingering-chart{height:100vh;scrollbar-gutter:stable;color:#292a33;background:#fff;height:100dvh;min-height:0;padding:64px 24px 120px;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,SF Pro Display,Inter,Arial,sans-serif;overflow-y:auto}.fingering-chart__content{width:min(980px,100%);margin:0 auto}.fingering-chart__header{padding:50px 4px 26px}.fingering-chart__header>p:first-child{color:#678956;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;font-size:12px;font-weight:720}.fingering-chart__header h1{letter-spacing:-.04em;margin:0;font-size:42px;font-weight:760;line-height:1.04}.fingering-chart__intro{color:#6d6f76;max-width:680px;margin:16px 0 0;font-size:16px;line-height:1.55}.fingering-chart__now{background:#fff;border-radius:22px;grid-template-columns:auto minmax(150px,1fr) minmax(0,2.1fr);align-items:center;gap:20px;padding:22px 24px;display:grid;box-shadow:0 10px 30px #292a3314}.fingering-chart__stave{color:#292a33;flex:none;width:190px}.fingering-chart__detail{min-width:0}.fingering-chart__detail h2{letter-spacing:-.03em;margin:0;font-size:30px;font-weight:700;line-height:1.1}.fingering-chart__detail h2 sub{color:#85868e;margin-left:1px;font-size:15px;font-weight:500}.fingering-chart__variants{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.fingering-chart__variants button{color:#292a33;cursor:pointer;background:#f1f1f4;border:0;border-radius:11px;padding:6px 11px;font:600 12px/1 inherit;transition:background-color .16s,color .16s}.fingering-chart__variants button:hover{background:#e6e6ea}.fingering-chart__variants button.selected{color:#fff;background:#40553d}.fingering-chart__use{color:#6d6f76;margin:10px 0 0;font-size:13px;line-height:1.5}.fingering-chart__requires{color:#7a5340;margin:6px 0 0;font-size:12px;font-weight:600}.fingering-chart__diagram{color:#2f3a2c;--flute-key-ground:#fff;min-width:0}.fingering-chart__register{margin-top:28px}.fingering-chart__register h3{letter-spacing:.08em;text-transform:uppercase;color:#8a8c93;margin:0 0 10px 4px;font-size:12px;font-weight:720}.fingering-chart__notes{flex-wrap:wrap;gap:6px;display:flex}.fingering-chart__notes button{color:#292a33;cursor:pointer;background:#f1f1f4;border:0;border-radius:12px;min-width:52px;padding:9px 11px;font:650 14px/1 inherit;transition:background-color .16s,color .16s}.fingering-chart__notes button sub{color:#8a8c93;margin-left:1px;font-size:10px;font-weight:500}.fingering-chart__notes button:hover{background:#e4ece0}.fingering-chart__notes button.selected{color:#fff;background:#40553d}.fingering-chart__notes button.selected sub{color:#cfdcc9}.fingering-chart__notes button:focus-visible{outline-offset:2px;outline:3px solid #67895659}.fingering-chart__note{color:#8a8c93;max-width:680px;margin:34px 4px 0;font-size:12.5px;line-height:1.6}@media (max-width:820px){.fingering-chart__now{grid-template-columns:auto minmax(0,1fr);gap:16px}.fingering-chart__diagram{grid-column:1/-1}}@media (max-width:560px){.fingering-chart{padding:0 16px calc(96px + env(safe-area-inset-bottom))}.fingering-chart__header{padding:42px 4px 22px}.fingering-chart__header h1{font-size:36px}.fingering-chart__now{grid-template-columns:minmax(0,1fr);padding:18px 16px}.fingering-chart__stave{width:170px}}.fingering-chart__sibling{color:#40553d;text-underline-offset:4px;margin-top:18px;font-size:14px;font-weight:600;display:inline-block}@media (max-width:760px){.studio-route .fingering-chart__header{display:none}.fingering-chart__now{border-radius:18px;gap:6px 12px!important;padding:12px 14px!important}.fingering-chart__stave svg{width:auto;max-height:88px}.fingering-chart__detail h2{font-size:24px}.fingering-chart__diagram{max-height:84px}.fingering-chart__register{margin-top:16px}.fingering-chart__register h3{margin-bottom:6px}.fingering-chart__notes{gap:5px}.fingering-chart__notes button{flex:0 0 calc(16.6667% - 4.16667px);min-width:0;padding:8px 0}.fingering-chart__note{margin-top:20px}}.fingering-chart__octaves{display:none}@media (max-width:760px){html body .fingering-chart__now{box-shadow:none;background:#f6f6f8;justify-content:center;align-items:center;grid-template-columns:auto auto!important;gap:4px 14px!important;padding:12px 14px 14px!important}html body .fingering-chart__stave{width:150px}html body .fingering-chart__stave svg{width:100%;height:auto;max-height:none}html body .fingering-chart__detail{text-align:left}html body .fingering-chart__diagram{--flute-key-ground:#f6f6f8;grid-column:1/-1;width:100%;max-height:none}.fingering-chart__octaves{color:#71747e;justify-content:space-between;align-items:center;gap:8px;margin:14px 2px 10px;font-size:12.5px;display:flex}.fingering-chart__octaves select{font:inherit;border:1px solid var(--line,#dedfd9);color:#292a33;background:#fff;border-radius:8px;min-height:36px;padding:5px 8px;font-size:14px}.fingering-chart__register:not([data-active]){display:none}.fingering-chart__register{margin-top:0!important}.fingering-chart__register h3{display:none}html body .fingering-chart{padding-bottom:calc(16px + env(safe-area-inset-bottom))!important}}html body :is(.fingering-chart__notes,.fingering-chart__variants) button.selected{color:#6d4585;background:#f1e5f5}html body .fingering-chart__notes button.selected sub{color:#9a7aae}.fingering-chart__stave{align-items:flex-end;height:210px;display:flex}.fingering-chart__stave>*{width:100%}.fingering-chart__diagram :is(circle,ellipse,rect,path){transition:fill .18s,stroke .18s}@media (max-width:760px){html body .fingering-chart__stave{height:150px}html body .fingering-chart__stave svg{max-height:150px}}@media (min-width:761px){html body .fingering-chart{padding-bottom:24px}.fingering-chart__content{width:min(1120px,100%)}.fingering-chart__intro{margin-top:8px;font-size:14px}.fingering-chart__sibling{margin-top:8px}html body .fingering-chart__now{padding:12px 22px}html body .fingering-chart__stave{height:150px}html body .fingering-chart__stave svg{width:auto;height:auto;max-height:150px}.fingering-chart__diagram{max-height:120px}html body .fingering-chart__register{margin-top:14px}.fingering-chart__register h3{margin-bottom:6px}.fingering-chart__notes{gap:5px}.fingering-chart__notes button{min-width:46px;padding:7px 9px}.fingering-chart__note{margin-top:14px}}