.landing-page{min-height:100vh;padding:calc(var(--ui-unit) * 24) calc(var(--ui-unit) * 32) calc(var(--ui-unit) * 60);box-sizing:border-box;gap:calc(var(--ui-unit) * 24);flex-direction:column;display:flex}.landing-page .hero{align-items:center;gap:calc(var(--ui-unit) * 12);padding:calc(var(--ui-unit) * 28) 0 calc(var(--ui-unit) * 16);flex-direction:column;display:flex}.landing-page .hero-staff{width:calc(var(--ui-unit) * 260);height:calc(var(--ui-unit) * 74);background:repeating-linear-gradient(to bottom, #2d262033 0, #2d262033 calc(var(--ui-unit) * 2), transparent calc(var(--ui-unit) * 2), transparent calc(var(--ui-unit) * 18));margin-bottom:calc(var(--ui-unit) * 6);position:relative}.landing-page .hero-note{width:calc(var(--ui-unit) * 28);height:calc(var(--ui-unit) * 20);background:var(--orange);left:calc(var(--ui-unit) * 66);top:calc(var(--ui-unit) * 26);border-radius:50%;position:absolute;transform:rotate(-18deg)}.landing-page .hero-note.second{left:calc(var(--ui-unit) * 160);top:calc(var(--ui-unit) * 8);opacity:.55}.landing-page .app-title{font-size:calc(var(--ui-unit) * 44);color:var(--ink);letter-spacing:calc(var(--ui-unit) * 2);font-weight:700}.landing-page .app-subtitle{letter-spacing:calc(var(--ui-unit) * 8)}.landing-page .resume-card{padding:calc(var(--ui-unit) * 28) calc(var(--ui-unit) * 28) calc(var(--ui-unit) * 28) 0;align-items:center;display:flex;overflow:hidden}.landing-page .resume-card.pressed{background:var(--sand-1)}.landing-page .resume-bar{width:calc(var(--ui-unit) * 8);background:var(--orange);border-radius:0 calc(var(--ui-unit) * 4) calc(var(--ui-unit) * 4) 0;margin-right:calc(var(--ui-unit) * 28);flex-shrink:0;align-self:stretch}.landing-page .resume-info{gap:calc(var(--ui-unit) * 10);flex-direction:column;flex:1;display:flex}.landing-page .resume-title{font-size:calc(var(--ui-unit) * 32);color:var(--ink);font-weight:600}.landing-page .resume-sub{font-size:calc(var(--ui-unit) * 24);color:var(--text-muted)}.landing-page .resume-progress{align-items:center;gap:calc(var(--ui-unit) * 20);display:flex}.landing-page .resume-track{height:calc(var(--ui-unit) * 10);border-radius:calc(var(--ui-unit) * 5);background:#2d262014;flex:1;overflow:hidden}.landing-page .resume-fill{border-radius:calc(var(--ui-unit) * 5);background:var(--orange);height:100%}.landing-page .resume-num{font-size:calc(var(--ui-unit) * 24);color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0}.landing-page .arrow{font-size:calc(var(--ui-unit) * 48);color:var(--sand-3);margin-left:calc(var(--ui-unit) * 16)}.landing-page .entry-grid{gap:calc(var(--ui-unit) * 24);display:flex}.landing-page .entry-card{align-items:center;gap:calc(var(--ui-unit) * 8);padding:calc(var(--ui-unit) * 32) 0 calc(var(--ui-unit) * 28);flex-direction:column;flex:1;display:flex}.landing-page .entry-card.pressed{background:var(--sand-1)}.landing-page .entry-icon{width:calc(var(--ui-unit) * 120);height:calc(var(--ui-unit) * 80);margin-bottom:calc(var(--ui-unit) * 10);position:relative}.landing-page .staff-icon{background:repeating-linear-gradient(to bottom, #2d262040 0, #2d262040 calc(var(--ui-unit) * 2), transparent calc(var(--ui-unit) * 2), transparent calc(var(--ui-unit) * 19))}.landing-page .entry-note{width:calc(var(--ui-unit) * 26);height:calc(var(--ui-unit) * 19);background:var(--orange);left:calc(var(--ui-unit) * 48);top:calc(var(--ui-unit) * 28);border-radius:50%;position:absolute;transform:rotate(-18deg)}.landing-page .entry-name{font-size:calc(var(--ui-unit) * 30);color:var(--ink);font-weight:600}.landing-page .entry-sub{font-size:calc(var(--ui-unit) * 22);color:var(--text-muted)}.landing-page .journey{padding:calc(var(--ui-unit) * 28);gap:calc(var(--ui-unit) * 22);flex-direction:column;display:flex}.landing-page .journey-head{justify-content:space-between;align-items:center;display:flex}.landing-page .journey-count{font-size:calc(var(--ui-unit) * 24);color:var(--text-muted);font-variant-numeric:tabular-nums}.landing-page .journey-chips{gap:calc(var(--ui-unit) * 12);display:flex}.landing-page .chip{height:calc(var(--ui-unit) * 64);border-radius:calc(var(--ui-unit) * 14);background:var(--sand-1);border:calc(var(--ui-unit) * 1) solid transparent;flex:1;justify-content:center;align-items:center;transition:background .15s;display:flex}.landing-page .chip-pressed{background:var(--paper-edge)}.landing-page .chip-roman{font-size:calc(var(--ui-unit) * 26);color:var(--text-muted);font-weight:700}.landing-page .chip.partial{background:var(--orange-light);border-color:#e06a1259}.landing-page .chip.partial .chip-roman{color:var(--orange-deep)}.landing-page .chip.done{background:var(--orange)}.landing-page .chip.done .chip-roman{color:#fff}
.marketing-shell{background:#f7f2e8;min-height:100dvh}.marketing-landing{--marketing-ink:#201d19;--marketing-paper:#fbf8f0;--marketing-cream:#f1e8d7;--marketing-line:#201d191f;--marketing-orange:#df6814;--marketing-dark:#24201c;background:radial-gradient(circle at 78% 13%, #df68141f, transparent 22rem), var(--marketing-paper);min-height:100dvh;color:var(--marketing-ink);overflow:hidden}.marketing-landing h1,.marketing-landing h2,.marketing-landing h3,.marketing-landing p{margin:0}.marketing-nav{border-bottom:1px solid var(--marketing-line);grid-template-columns:1fr auto 1fr;align-items:center;width:min(1180px,100% - 48px);height:88px;margin:0 auto;display:grid}.marketing-brand{justify-self:start;align-items:center;gap:12px;display:inline-flex}.marketing-brand-mark{background:var(--marketing-paper);border-radius:12px;flex:none;width:42px;height:42px;display:block;overflow:hidden;box-shadow:0 8px 24px #201d191f}.marketing-brand-mark img{object-fit:cover;width:100%;height:100%;display:block}.marketing-brand>span:last-child{flex-direction:column;display:flex}.marketing-brand strong{letter-spacing:.04em;font:700 21px/1.1 Georgia,Yu Mincho,serif}.marketing-brand small{color:#82776b;letter-spacing:.18em;margin-top:4px;font-size:9px}.marketing-nav nav{color:#665e55;align-items:center;gap:34px;font-size:13px;font-weight:600;display:flex}.marketing-nav nav a,.marketing-footer nav a{transition:color .2s}.marketing-nav nav a:hover,.marketing-footer nav a:hover{color:var(--marketing-orange)}.marketing-nav-cta{border:1px solid var(--marketing-line);background:#ffffff80;border-radius:999px;justify-self:end;padding:12px 18px;font-size:12px;font-weight:700}.marketing-hero{grid-template-columns:minmax(0,.94fr) minmax(460px,1.06fr);align-items:center;gap:clamp(30px,6vw,88px);width:min(1180px,100% - 48px);min-height:680px;margin:0 auto;padding:70px 0 84px;display:grid}.marketing-kicker{color:#8b7f72;letter-spacing:.18em;align-items:center;gap:12px;font-size:11px;font-weight:700;display:flex}.marketing-kicker>span{background:var(--marketing-orange);width:34px;height:2px}.marketing-hero h1{letter-spacing:-.045em;margin-top:26px;font-size:clamp(46px,5.6vw,78px);font-weight:700;line-height:1.18}.marketing-hero h1 em{color:var(--marketing-orange);font-family:Georgia,Yu Mincho,serif;font-style:normal;font-weight:500}.marketing-lead{color:#675f56;font-size:16px;line-height:2;margin-top:28px!important}.marketing-actions{align-items:center;gap:12px;margin-top:36px;display:flex}.marketing-button{border-radius:999px;justify-content:center;align-items:center;gap:28px;min-height:54px;padding:0 25px;font-size:14px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.marketing-button:hover{transform:translateY(-2px)}.marketing-button.primary{background:var(--marketing-orange);color:#fff;box-shadow:0 14px 30px #df681438}.marketing-button.primary:hover{background:#ca5b0d;box-shadow:0 18px 36px #df681447}.marketing-button.secondary{border:1px solid var(--marketing-line);background:#ffffff7a}.marketing-trust{color:#83796e;flex-wrap:wrap;gap:17px;margin:26px 0 0;padding:0;font-size:11px;list-style:none;display:flex}.marketing-trust li:before{content:"✓";color:var(--marketing-orange);margin-right:6px;font-weight:800}.practice-preview{place-items:center;min-height:500px;display:grid;position:relative}.preview-glow{filter:blur(2px);background:#df68141c;border-radius:50%;width:430px;height:430px;position:absolute}.preview-window{z-index:1;background:#fff;border:1px solid #2e27201f;border-radius:28px;width:min(100%,530px);position:relative;overflow:hidden;transform:rotate(1.5deg);box-shadow:0 40px 80px #352b2029,inset 0 3px #fffc}.preview-topbar{border-bottom:1px solid var(--marketing-line);color:#766b60;letter-spacing:.14em;justify-content:space-between;align-items:center;height:62px;padding:0 24px;font-size:10px;font-weight:700;display:flex}.preview-progress{background:#f6efe4;border-radius:999px;padding:7px 10px}.preview-paper{background:#fdfaf4;padding:36px 28px 30px}.preview-staff{background:repeating-linear-gradient(#0000 0 23px,#221e1a59 23px 25px);border-left:2px solid #221e1ab8;height:150px;position:relative}.preview-clef{font:82px/1 Georgia,serif;position:absolute;top:6px;left:12px}.preview-note{color:#2b2621;font-size:22px;line-height:1;position:absolute}.preview-note:after{content:"";background:currentColor;width:2px;height:55px;position:absolute;bottom:7px;left:14px}.preview-note.active{color:var(--marketing-orange);filter:drop-shadow(0 2px 7px #df681440)}.note-one{top:67px;left:27%}.note-two{top:42px;left:47%}.note-three{top:17px;left:67%}.note-four{top:54px;left:84%}.preview-detection{background:#419e5812;border:1px solid #419e5833;border-radius:15px;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:28px;padding:14px 16px;display:grid}.detection-pulse{background:#419e58;border-radius:50%;width:11px;height:11px;box-shadow:0 0 0 6px #419e581f}.preview-detection>span:nth-child(2){align-items:baseline;gap:9px;display:flex}.preview-detection small{color:#6f796f;letter-spacing:.14em;font-size:8px;font-weight:700}.preview-detection strong{font:700 24px/1 Georgia,serif}.detection-correct{color:#328149;font-size:12px;font-weight:700}.preview-fretboard{background:repeating-linear-gradient(#0000 0 18px,#ffffff6b 18px 19px),repeating-linear-gradient(90deg,#0000 0 86px,#fff3 86px 88px),linear-gradient(100deg,#49352b,#74513a);height:132px;position:relative}.fret-dot{border:2px solid #ffffffb8;border-radius:50%;width:15px;height:15px;position:absolute}.fret-dot.active{background:var(--marketing-orange);border:4px solid #fff;width:23px;height:23px;box-shadow:0 0 0 6px #df68144d}.dot-one{top:27px;left:25%}.dot-two{top:51px;left:51%}.dot-three{top:83px;left:76%}.preview-note-card{z-index:2;background:var(--marketing-dark);color:#fff;border-radius:15px;flex-direction:column;padding:14px 18px;display:flex;position:absolute;bottom:28px;right:-12px;box-shadow:0 18px 40px #201d193b}.preview-note-card span{color:#ddba9d;letter-spacing:.18em;font-size:8px;font-weight:700}.preview-note-card strong{margin-top:5px;font-size:13px}.marketing-proof{border-top:1px solid var(--marketing-line);border-bottom:1px solid var(--marketing-line);background:#ffffff61;grid-template-columns:repeat(4,1fr);display:grid}.marketing-proof p{border-right:1px solid var(--marketing-line);flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:130px;padding:28px 20px;display:flex}.marketing-proof p:last-child{border-right:0}.marketing-proof strong{color:var(--marketing-orange);font:500 clamp(30px,3vw,44px)/1 Georgia,serif}.marketing-proof span{color:#756b61;letter-spacing:.08em;font-size:11px}.marketing-section{padding:120px max(24px,50% - 590px)}.marketing-section-heading{grid-template-columns:1fr 1fr;column-gap:70px;display:grid}.marketing-section-heading .marketing-kicker{grid-column:1/-1;margin-bottom:26px}.marketing-section-heading h2{letter-spacing:-.04em;font-size:clamp(36px,4.5vw,60px);line-height:1.3}.marketing-section-heading>p:last-child{color:#6e655c;align-self:end;max-width:470px;padding-bottom:8px;font-size:15px;line-height:2}.feature-list{border-top:1px solid var(--marketing-line);margin-top:76px}.marketing-feature{border-bottom:1px solid var(--marketing-line);grid-template-columns:80px minmax(0,1fr) minmax(260px,.7fr);align-items:center;gap:34px;min-height:280px;padding:44px 0;display:grid}.feature-number{color:var(--marketing-orange);align-self:start;padding-top:4px;font:500 18px/1 Georgia,serif}.feature-copy{max-width:570px}.feature-copy>p,.vision-card>p{color:#9a8e81;letter-spacing:.16em;font-size:9px;font-weight:700}.feature-copy h3{margin-top:13px;font-size:clamp(24px,2.7vw,35px);line-height:1.45}.feature-copy>span{color:#6e655c;margin-top:18px;font-size:14px;line-height:1.9;display:block}.feature-visual{background:#eee3d2;border-radius:20px;height:170px;position:relative;overflow:hidden}.feature-visual>span{z-index:2;color:#201d198c;letter-spacing:.18em;font-size:8px;font-weight:800;position:absolute;top:18px;left:20px}.feature-visual i{display:block;position:absolute}.visual-01{background:repeating-linear-gradient(#0000 0 28px,#201d192e 28px 30px),#f1e7d8}.visual-01 i{background:var(--marketing-orange);border-radius:50%;width:27px;height:19px;top:70px;transform:rotate(-18deg)}.visual-01 i:after{content:"";background:inherit;width:2px;height:54px;position:absolute;bottom:9px;right:0}.visual-01 i:first-of-type{left:24%}.visual-01 i:nth-of-type(2){background:#3c342d;top:42px;left:50%}.visual-01 i:nth-of-type(3){background:#3c342d;top:98px;left:76%}.visual-02{background:var(--marketing-dark)}.visual-02>span{color:#c4b4a4}.visual-02 i{background:var(--marketing-orange);border-radius:5px;width:5px;bottom:36px}.visual-02 i:first-of-type{height:54px;left:32%}.visual-02 i:nth-of-type(2){height:91px;left:50%}.visual-02 i:nth-of-type(3){height:68px;left:68%}.visual-03{background:radial-gradient(circle at 50% 55%,#df68142b,#0000 42%),#eadcc6}.visual-03:before{content:"LOCAL ONLY";color:#3a332d;letter-spacing:.18em;text-align:center;font:600 22px/1.4 Georgia,serif;position:absolute;bottom:48px;left:20px;right:20px}.visual-03 i{background:var(--marketing-orange);border-radius:50%;width:8px;height:8px;top:78px}.visual-03 i:first-of-type{left:31%}.visual-03 i:nth-of-type(2){left:calc(50% - 4px)}.visual-03 i:nth-of-type(3){right:31%}.how-section{background:var(--marketing-dark);color:#fff}.marketing-kicker.light{color:#b9aa9c}.how-intro{max-width:750px}.how-intro h2{letter-spacing:-.04em;margin-top:26px;font-size:clamp(36px,4.8vw,62px);line-height:1.35}.how-intro>p:last-child{color:#bcb0a4;margin-top:22px;font-size:15px}.how-steps{grid-template-columns:repeat(3,1fr);margin:74px 0 50px;padding:0;list-style:none;display:grid}.how-steps li{border-top:1px solid #ffffff2e;min-height:250px;padding:30px 42px 26px 0}.how-steps li+li{border-left:1px solid #ffffff2e;padding-left:42px}.step-number{color:var(--marketing-orange);font:500 16px/1 Georgia,serif}.how-steps h3{margin-top:45px;font-size:21px}.how-steps p{color:#bcb0a4;margin-top:16px;font-size:13px;line-height:1.9}.light-button{color:var(--marketing-dark);background:#fff}.vision-section{background:#efe5d5}.vision-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:70px;display:grid}.vision-card{background:#ffffff6b;border:1px solid #201d191a;border-radius:22px;flex-direction:column;min-height:330px;padding:30px;display:flex}.vision-card.current{background:var(--marketing-orange);color:#fff}.vision-status{letter-spacing:.15em;opacity:.75;border:1px solid;border-radius:999px;align-self:flex-end;padding:7px 10px;font-size:8px;font-weight:800}.vision-card>p{margin-top:auto}.vision-card.current>p,.vision-card.current>span{color:#ffffffc7}.vision-card h3{margin-top:10px;font-size:27px}.vision-card>span:last-child{color:#6e655c;margin-top:17px;font-size:13px;line-height:1.85}.faq-section{background:#fffdf8;grid-template-columns:.7fr 1.3fr;gap:80px;display:grid}.faq-heading h2{margin-top:24px;font-size:clamp(38px,4vw,56px)}.faq-list{border-top:1px solid var(--marketing-line)}.faq-list details{border-bottom:1px solid var(--marketing-line)}.faq-list summary{cursor:pointer;justify-content:space-between;align-items:center;gap:20px;padding:28px 0;font-size:16px;font-weight:700;list-style:none;display:flex}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{color:var(--marketing-orange);font-size:23px;font-weight:400;transition:transform .2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{color:#6e655c;max-width:650px;padding:0 40px 28px 0;font-size:14px;line-height:1.9}.marketing-final-cta{justify-content:space-between;align-items:end;gap:50px;width:min(1180px,100% - 48px);margin:0 auto;padding:96px 0;display:flex}.marketing-final-cta p{color:var(--marketing-orange);letter-spacing:.18em;font-size:10px;font-weight:800}.marketing-final-cta h2{margin-top:18px;font-size:clamp(36px,4.4vw,58px);line-height:1.32}.final-button{background:var(--marketing-orange);color:#fff;flex-shrink:0;box-shadow:0 14px 30px #df681433}.marketing-footer{background:var(--marketing-dark);color:#fff;grid-template-columns:1fr 1fr;align-items:end;gap:35px;padding:64px max(24px,50% - 590px) 34px;display:grid}.footer-brand .marketing-brand-mark{box-shadow:none}.footer-brand small{color:#aa9d91}.marketing-footer>p{color:#aa9d91;justify-self:end;font-size:13px}.marketing-footer nav{color:#c5bbb0;gap:26px;font-size:11px;display:flex}.marketing-footer>small{color:#82766b;justify-self:end;font-size:10px}@media (max-width:860px){.marketing-nav{grid-template-columns:1fr auto}.marketing-nav nav{display:none}.marketing-hero{grid-template-columns:1fr;padding-top:64px}.marketing-hero-copy{max-width:680px}.practice-preview{min-height:480px}.marketing-section-heading{grid-template-columns:1fr}.marketing-section-heading>p:last-child{margin-top:26px}.marketing-feature{grid-template-columns:54px 1fr}.feature-visual{grid-column:2}.vision-grid{grid-template-columns:1fr}.vision-card{min-height:250px}.faq-section{grid-template-columns:1fr;gap:50px}}@media (max-width:600px){.marketing-nav{width:min(100% - 32px,1180px);height:74px}.marketing-brand-mark{width:37px;height:37px}.marketing-brand strong{font-size:18px}.marketing-nav-cta{padding:10px 13px;font-size:10px}.marketing-hero{gap:36px;width:min(100% - 32px,1180px);min-height:0;padding:54px 0 66px}.marketing-hero h1{margin-top:20px;font-size:clamp(39px,12vw,52px);line-height:1.25}.marketing-lead{font-size:14px;line-height:1.85;margin-top:22px!important}.desktop-only{display:none}.marketing-actions{flex-direction:column;align-items:stretch}.marketing-button{width:100%}.marketing-trust{gap:10px 15px}.practice-preview{min-height:360px}.preview-glow{width:280px;height:280px}.preview-window{border-radius:20px}.preview-topbar{height:48px;padding:0 15px;font-size:8px}.preview-paper{padding:22px 18px 20px}.preview-staff{background:repeating-linear-gradient(#0000 0 18px,#221e1a59 18px 20px);height:110px}.preview-clef{font-size:62px}.preview-note{font-size:17px}.preview-note:after{height:40px;left:11px}.note-one{top:50px}.note-two{top:31px}.note-three{top:12px}.note-four{top:41px}.preview-detection{margin-top:20px}.preview-fretboard{background:repeating-linear-gradient(#0000 0 13px,#ffffff6b 13px 14px),repeating-linear-gradient(90deg,#0000 0 58px,#fff3 58px 60px),linear-gradient(100deg,#49352b,#74513a);height:90px}.dot-one{top:17px}.dot-two{top:32px}.dot-three{top:56px}.preview-note-card{bottom:3px;right:-5px}.marketing-proof{grid-template-columns:repeat(2,1fr)}.marketing-proof p{min-height:105px}.marketing-proof p:nth-child(2){border-right:0}.marketing-proof p:nth-child(-n+2){border-bottom:1px solid var(--marketing-line)}.marketing-section{padding:82px 20px}.marketing-section-heading h2{font-size:35px}.feature-list{margin-top:52px}.marketing-feature{grid-template-columns:34px 1fr;gap:12px;padding:34px 0}.feature-copy h3{font-size:24px}.feature-visual{grid-column:1/-1;margin-top:18px}.how-steps{grid-template-columns:1fr;margin-top:52px}.how-steps li{min-height:0;padding:26px 0 30px}.how-steps li+li{border-left:0;padding-left:0}.how-steps h3{margin-top:22px}.vision-grid{margin-top:50px}.faq-list summary{font-size:14px;line-height:1.6}.marketing-final-cta{flex-direction:column;align-items:stretch;width:min(100% - 40px,1180px);padding:78px 0}.marketing-final-cta h2{font-size:37px}.marketing-footer{grid-template-columns:1fr;padding:52px 20px 30px}.marketing-footer>p,.marketing-footer>small{justify-self:start}.marketing-footer nav{flex-wrap:wrap;gap:18px}}@media (prefers-reduced-motion:reduce){.marketing-button,.faq-list summary span{transition:none}}
.sight-reading-catalog{--catalog-sidebar-width:calc(var(--ui-unit) * 192);height:100vh;display:flex}.sight-reading-catalog .catalog-sidebar{width:var(--catalog-sidebar-width);background:var(--sand-2);flex-shrink:0;height:100%;overflow-y:auto}.sight-reading-catalog .catalog-position{width:100%;min-height:calc(var(--ui-unit) * 104);padding:calc(var(--ui-unit) * 12);border:0;border-left:calc(var(--ui-unit) * 6) solid transparent;color:var(--text-secondary);font-size:calc(var(--ui-unit) * 26);cursor:pointer;background:0 0;font-weight:600}.sight-reading-catalog .catalog-position.active{border-left-color:var(--orange);background:var(--bg);color:var(--orange-deep)}.sight-reading-catalog .catalog-content{flex:1;height:100%}.sight-reading-catalog .catalog-content-inner{padding:calc(var(--ui-unit) * 24) calc(var(--ui-unit) * 24) calc(var(--ui-unit) * 60);gap:calc(var(--ui-unit) * 24);flex-direction:column;display:flex}.sight-reading-catalog .catalog-header{padding:calc(var(--ui-unit) * 8) calc(var(--ui-unit) * 8) calc(var(--ui-unit) * 22);border-bottom:calc(var(--ui-unit) * 1) solid var(--hairline)}.sight-reading-catalog .catalog-title-row{align-items:center;gap:calc(var(--ui-unit) * 18);display:flex}.sight-reading-catalog .position-roman{font-size:calc(var(--ui-unit) * 44);color:var(--orange-deep);min-width:calc(var(--ui-unit) * 60);font-weight:700}.sight-reading-catalog .position-title{gap:calc(var(--ui-unit) * 4);flex-direction:column;flex:1;display:flex}.sight-reading-catalog .position-name{font-size:calc(var(--ui-unit) * 30);color:var(--ink);font-weight:600}.sight-reading-catalog .position-description{font-size:calc(var(--ui-unit) * 22);color:var(--text-muted)}.sight-reading-catalog .position-progress{font-size:calc(var(--ui-unit) * 26);color:var(--text-muted);font-variant-numeric:tabular-nums}.sight-reading-catalog .key-list{gap:calc(var(--ui-unit) * 18);flex-direction:column;display:flex}.sight-reading-catalog .key-card{padding:calc(var(--ui-unit) * 24);align-items:center;gap:calc(var(--ui-unit) * 20);display:flex}.sight-reading-catalog .key-card.pressed{background:var(--sand-1)}.sight-reading-catalog .key-badge{width:calc(var(--ui-unit) * 76);height:calc(var(--ui-unit) * 76);background:var(--paper);border:calc(var(--ui-unit) * 1) solid var(--paper-edge);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.sight-reading-catalog .key-letter{font-size:calc(var(--ui-unit) * 34);color:var(--ink);font-weight:700}.sight-reading-catalog .key-info{gap:calc(var(--ui-unit) * 6);flex-direction:column;flex:1;display:flex}.sight-reading-catalog .key-name{font-size:calc(var(--ui-unit) * 30);color:var(--ink);font-weight:600}.sight-reading-catalog .key-description{font-size:calc(var(--ui-unit) * 22);color:var(--text-muted)}.sight-reading-catalog .key-progress{font-size:calc(var(--ui-unit) * 24);color:var(--text-muted);font-variant-numeric:tabular-nums}.sight-reading-catalog .key-arrow{font-size:calc(var(--ui-unit) * 40);color:var(--sand-3)}
.exercise-list{min-height:100vh;padding:calc(var(--ui-unit) * 28) calc(var(--ui-unit) * 28) calc(var(--ui-unit) * 60);box-sizing:border-box}.exercise-list .page-intro{padding:calc(var(--ui-unit) * 8) calc(var(--ui-unit) * 12) calc(var(--ui-unit) * 24);display:block}.exercise-list .list{gap:calc(var(--ui-unit) * 20);flex-direction:column;display:flex}.exercise-list .exercise-card{padding:calc(var(--ui-unit) * 28);align-items:center;gap:calc(var(--ui-unit) * 22);display:flex}.exercise-list .exercise-card.pressed{background:var(--sand-1)}.exercise-list .num{font-size:calc(var(--ui-unit) * 40);color:var(--sand-3);font-variant-numeric:tabular-nums;flex-shrink:0;font-weight:700}.exercise-list .info{gap:calc(var(--ui-unit) * 6);flex-direction:column;flex:1;display:flex}.exercise-list .name{font-size:calc(var(--ui-unit) * 30);color:var(--ink);font-weight:600}.exercise-list .tags{justify-content:flex-end;gap:calc(var(--ui-unit) * 8);max-width:calc(var(--ui-unit) * 300);flex-wrap:wrap;display:flex}.exercise-list .arrow{font-size:calc(var(--ui-unit) * 44);color:var(--sand-3)}
.sight-reading-practice{height:100vh;padding:calc(var(--ui-unit) * 20) calc(var(--ui-unit) * 28) calc(calc(var(--ui-unit) * 24) + env(safe-area-inset-bottom));box-sizing:border-box;gap:calc(var(--ui-unit) * 18);flex-direction:column;display:flex}.sight-reading-practice .header{gap:calc(var(--ui-unit) * 12);padding:0 calc(var(--ui-unit) * 4);flex-direction:column;display:flex}.sight-reading-practice .header-row{justify-content:space-between;align-items:center;gap:calc(var(--ui-unit) * 16);display:flex}.sight-reading-practice .progress-row{align-items:center;gap:calc(var(--ui-unit) * 24);display:flex}.sight-reading-practice .progress-num{font-size:calc(var(--ui-unit) * 28);color:var(--ink);font-variant-numeric:tabular-nums;flex-shrink:0;font-weight:700}.sight-reading-practice .progress-bar{flex:1}.sight-reading-practice .staff-card{padding:calc(var(--ui-unit) * 8) calc(var(--ui-unit) * 12);flex-shrink:0;overflow:hidden}.sight-reading-practice .pitch-item{align-items:center;gap:calc(var(--ui-unit) * 4);padding:calc(var(--ui-unit) * 14) 0 calc(var(--ui-unit) * 10);flex-direction:column;display:flex}.sight-reading-practice .pitch-item.target-card{background:var(--orange-light);border-color:#e06a1238}.sight-reading-practice .pitch-value{font-size:calc(var(--ui-unit) * 60);color:var(--ink);font-weight:700;line-height:1.15}.sight-reading-practice .pitch-value.target{color:var(--orange)}.sight-reading-practice .message{text-align:center;font-size:calc(var(--ui-unit) * 26);color:var(--text-muted);min-height:calc(var(--ui-unit) * 36);transition:color .2s}.sight-reading-practice .message.correct{color:var(--ok);font-weight:600}.sight-reading-practice .message.wrong{color:var(--err);font-weight:600;animation:.22s ease-out msg-emphasis}.sight-reading-practice .actions{gap:calc(var(--ui-unit) * 18);margin-top:auto;display:flex}.sight-reading-practice .action-btn{flex:1}.sight-reading-practice .hint-layer{left:calc(var(--ui-unit) * 28);right:calc(var(--ui-unit) * 28);bottom:calc(calc(var(--ui-unit) * 150) + env(safe-area-inset-bottom));z-index:20;position:fixed}
.practice-result{min-height:100vh;padding:calc(var(--ui-unit) * 40) calc(var(--ui-unit) * 32);box-sizing:border-box;gap:calc(var(--ui-unit) * 28);flex-direction:column;display:flex}.practice-result .result-hero{align-items:center;gap:calc(var(--ui-unit) * 10);padding:calc(var(--ui-unit) * 30) 0 calc(var(--ui-unit) * 16);flex-direction:column;display:flex}.practice-result .fine-row{align-items:center;gap:calc(var(--ui-unit) * 24);display:flex}.practice-result .fine-rule{width:calc(var(--ui-unit) * 72);height:calc(var(--ui-unit) * 1);background:#2d262033}.practice-result .fine{font-size:calc(var(--ui-unit) * 64);color:var(--orange);font-style:italic;font-weight:700;line-height:1.1}.practice-result .result-title{font-size:calc(var(--ui-unit) * 40);color:var(--ink);font-weight:700}.practice-result .result-subtitle{margin-top:calc(var(--ui-unit) * 6)}.practice-result .stats-card{padding:calc(var(--ui-unit) * 12) calc(var(--ui-unit) * 36)}.practice-result .stat-row{padding:calc(var(--ui-unit) * 26) 0;border-bottom:calc(var(--ui-unit) * 1) dashed #2d26201f;justify-content:space-between;align-items:center;display:flex}.practice-result .stat-row:last-child{border-bottom:none}.practice-result .stat-label{font-size:calc(var(--ui-unit) * 28);color:var(--text-secondary)}.practice-result .stat-value{font-size:calc(var(--ui-unit) * 40);color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}.practice-result .stat-value.good{color:var(--ok)}.practice-result .stat-value.warn{color:var(--orange-deep)}.practice-result .wrong-card{padding:calc(var(--ui-unit) * 28) calc(var(--ui-unit) * 32);gap:calc(var(--ui-unit) * 20);flex-direction:column;display:flex}.practice-result .wrong-list{gap:calc(var(--ui-unit) * 16);flex-wrap:wrap;display:flex}.practice-result .wrong-note{font-size:calc(var(--ui-unit) * 32);color:var(--err);border:calc(var(--ui-unit) * 1) solid #d5453d33;padding:calc(var(--ui-unit) * 8) calc(var(--ui-unit) * 26);border-radius:calc(var(--ui-unit) * 12);background:#d5453d14;font-weight:700}.practice-result .actions{gap:calc(var(--ui-unit) * 20);padding-bottom:calc(var(--ui-unit) * 20);margin-top:auto;display:flex}.practice-result .action-btn{flex:1}
.mic-row{align-items:center;gap:calc(var(--ui-unit) * 12);display:flex}.mic-row .mic-dot{width:calc(var(--ui-unit) * 14);height:calc(var(--ui-unit) * 14);background:var(--sand-3);border-radius:50%;flex-shrink:0}.mic-row .mic-dot.listening{background:var(--ok);animation:2.2s ease-in-out infinite mic-breathe}.mic-row .mic-dot.denied,.mic-row .mic-dot.error{background:var(--err)}@keyframes mic-breathe{0%,to{box-shadow:0 0 0 calc(var(--ui-unit) * 4) #419e582e}50%{box-shadow:0 0 0 calc(var(--ui-unit) * 10) #419e580f}}.mic-row .mic-text{font-size:calc(var(--ui-unit) * 24);color:var(--text-muted)}
.fret-hint{background:var(--paper);border:calc(var(--ui-unit) * 1) solid var(--paper-edge);border-radius:calc(var(--ui-unit) * 20);padding:calc(var(--ui-unit) * 24) calc(var(--ui-unit) * 28) calc(var(--ui-unit) * 16);gap:calc(var(--ui-unit) * 16);box-shadow:0 calc(var(--ui-unit) * 16) calc(var(--ui-unit) * 48) #2d262038;flex-direction:column;display:flex}.fret-hint .hint-head{align-items:center;gap:calc(var(--ui-unit) * 20);display:flex}.fret-hint .hint-close{width:calc(var(--ui-unit) * 52);height:calc(var(--ui-unit) * 52);font-size:calc(var(--ui-unit) * 26);color:var(--text-muted);background:#2d26200f;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;display:flex}.fret-hint .hint-eyebrow{font-size:calc(var(--ui-unit) * 22);letter-spacing:calc(var(--ui-unit) * 6);color:var(--text-muted);flex-shrink:0}.fret-hint .hint-text{font-size:calc(var(--ui-unit) * 30);color:var(--orange-deep);font-weight:600}.fret-hint .fret-canvas{width:100%;display:block}
.staff-root{align-items:center;width:100%;display:flex}.staff-root .staff-view{flex:1;min-width:0;position:relative;overflow:hidden}.staff-root .staff-canvas{width:100%;display:block}.staff-root .touch-layer{position:absolute;inset:0}.staff-root .pager{width:calc(var(--ui-unit) * 60);align-items:center;gap:calc(var(--ui-unit) * 8);padding:calc(var(--ui-unit) * 8) 0;flex-direction:column;flex-shrink:0;display:flex}.staff-root .pager-btn{width:calc(var(--ui-unit) * 48);height:calc(var(--ui-unit) * 48);background:var(--sand-1);border:calc(var(--ui-unit) * 1) solid var(--paper-edge);font-size:calc(var(--ui-unit) * 20);color:var(--orange-deep);border-radius:50%;justify-content:center;align-items:center;display:flex}.staff-root .pager-btn.disabled{opacity:.35}.staff-root .pager-num{font-size:calc(var(--ui-unit) * 18);color:var(--text-muted);font-variant-numeric:tabular-nums}
:root{--ui-unit:min(.133333vw, .573333px);--nav-height:calc(var(--ui-unit) * 88);--bg:#faf7f1;--card:#fff;--paper:#fbf6e9;--paper-edge:#ecdfc7;--ink:#2d2620;--text-secondary:#6e6355;--text-muted:#9a8c7a;--sand-1:#f6f0e5;--sand-2:#efe6d3;--sand-3:#d8cbb2;--orange:#e06a12;--orange-active:#c25a0b;--orange-deep:#b45607;--orange-light:#fcefdf;--ok:#419e58;--err:#d24a35;--hairline:#2d262014;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-synthesis:none;text-rendering:optimizelegibility;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans,Hiragino Kaku Gothic ProN,Yu Gothic,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body{min-height:100%;color:var(--ink);background:#eee8de;margin:0}body{font-size:calc(var(--ui-unit) * 28)}button,select,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{margin:0}a{color:inherit;text-decoration:none}h1,h2,p{font:inherit;margin:0}.site-shell{background:var(--bg);flex-direction:column;width:100%;max-width:430px;min-height:100dvh;margin:0 auto;display:flex;overflow:hidden;box-shadow:0 0 40px #2d26201a}.site-navigation{height:var(--nav-height);flex:0 0 var(--nav-height);padding:env(safe-area-inset-top) calc(var(--ui-unit) * 20) 0;grid-template-columns:calc(var(--ui-unit) * 92) minmax(0, 1fr) calc(var(--ui-unit) * 112);border-bottom:1px solid var(--hairline);z-index:50;background:#faf7f1f5;align-items:center;display:grid}.site-navigation-back{width:calc(var(--ui-unit) * 64);height:calc(var(--ui-unit) * 64);color:var(--ink);font:400 calc(var(--ui-unit) * 60) / 1 Georgia, serif;cursor:pointer;background:0 0;border:0;padding:0}.site-navigation-back.hidden{visibility:hidden}.site-navigation-title{text-overflow:ellipsis;white-space:nowrap;text-align:center;min-width:0;font-size:calc(var(--ui-unit) * 28);font-weight:600;overflow:hidden}.locale-selector{height:calc(var(--ui-unit) * 52);padding:0 calc(var(--ui-unit) * 8);border:1px solid var(--paper-edge);border-radius:calc(var(--ui-unit) * 26);background:var(--sand-1);justify-self:end;align-items:center;gap:calc(var(--ui-unit) * 4);color:var(--text-secondary);display:flex}.locale-selector>span{font-size:calc(var(--ui-unit) * 20)}.locale-selector select{width:calc(var(--ui-unit) * 62);color:var(--text-secondary);font-size:calc(var(--ui-unit) * 20);background:0 0;border:0;outline:0}.page-content{height:calc(100dvh - var(--nav-height));min-height:0;overflow:auto}.page-content>.page,.page-content>.hub{min-height:100%}.page-content>.sight-reading-practice,.page-content>.sight-reading-catalog{height:100%;min-height:100%}.eyebrow{font-size:calc(var(--ui-unit) * 22);letter-spacing:calc(var(--ui-unit) * 6);color:var(--text-muted)}.serif{font-family:Georgia,Times New Roman,Songti SC,Yu Mincho,serif}.card{background:var(--card);border:1px solid var(--hairline);border-radius:calc(var(--ui-unit) * 24);box-shadow:0 calc(var(--ui-unit) * 6) calc(var(--ui-unit) * 24) #2924200d}.paper-card{background:var(--paper);border:1px solid var(--paper-edge);border-radius:calc(var(--ui-unit) * 16);box-shadow:0 calc(var(--ui-unit) * 10) calc(var(--ui-unit) * 32) #29242014}.pressable{cursor:pointer;transition:background .12s,transform .12s}.pressable:active{background:var(--sand-1);transform:scale(.995)}.ui-button{min-height:calc(var(--ui-unit) * 88);padding:0 calc(var(--ui-unit) * 32);border-radius:calc(var(--ui-unit) * 18);justify-content:center;align-items:center;gap:calc(var(--ui-unit) * 12);background:var(--card);color:var(--ink);font-size:calc(var(--ui-unit) * 28);cursor:pointer;border:1px solid #0000;font-weight:600;display:inline-flex}.ui-button.block{width:100%}.ui-button.primary.solid{background:var(--orange);color:#fff}.ui-button.primary.outline{color:var(--orange-deep);border-color:#e06a1280}.ui-button.default.outline{border-color:#2d262024}.ui-button.danger.outline{color:var(--err);border-color:#d24a358c}.ui-button:active:not(:disabled){background:var(--sand-1)}.ui-button.primary.solid:active:not(:disabled){background:var(--orange-active)}.ui-button:disabled{opacity:.55;cursor:default}.ui-button .button-spinner{width:calc(var(--ui-unit) * 28);height:calc(var(--ui-unit) * 28);border:2px solid;border-right-color:#0000;border-radius:50%;animation:.8s linear infinite button-spin}@keyframes button-spin{to{transform:rotate(360deg)}}.ui-tag{min-height:calc(var(--ui-unit) * 40);padding:calc(var(--ui-unit) * 4) calc(var(--ui-unit) * 12);border-radius:calc(var(--ui-unit) * 8);background:var(--sand-1);color:var(--text-secondary);font-size:calc(var(--ui-unit) * 20);align-items:center;display:inline-flex}.ui-tag.success{color:var(--ok);background:#419e581a}.ui-tag.primary{background:var(--orange-light);color:var(--orange-deep)}.ui-tag.danger{color:var(--err);background:#d24a3517}.progress-bar{height:calc(var(--ui-unit) * 12);border-radius:calc(var(--ui-unit) * 6);background:#2d262014;overflow:hidden}.progress-fill{border-radius:inherit;background:var(--orange);height:100%;transition:width .25s;display:block}.load-state{justify-content:center;align-items:center;gap:calc(var(--ui-unit) * 24);color:var(--text-muted);flex-direction:column;display:flex}.redirect-page{text-align:center;background:var(--bg);place-content:center;gap:20px;min-height:100dvh;display:grid}.redirect-page nav{justify-content:center;gap:18px;display:flex}@media (min-width:431px){:root{--ui-unit:.573333px}}