:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#20332f;background:#f8f6ef;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible{outline:3px solid #dd8d64;outline-offset:3px}svg{display:block}h1,h2,h3,p{margin-top:0}.site-header{height:76px;border-bottom:1px solid #e7e7dc;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1180px)/2));background:#f8f6ef}.brand{border:0;background:none;display:inline-flex;align-items:center;gap:11px;padding:0;color:#1e3430;font-weight:800;font-size:19px;letter-spacing:-.04em}.brand-mark{width:37px;height:37px;background:#203832;color:#f0bf78;border-radius:12px;display:grid;place-items:center;font-size:28px;font-family:Georgia,serif;line-height:1}.header-tag{font-size:10px;font-weight:800;letter-spacing:.17em;color:#82918a}.main-shell{max-width:1180px;margin:0 auto;padding:42px 28px 112px}.bottom-nav{display:none}.section-kicker,.eyebrow,.quiz-eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:#718a7a}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#e2e5d2}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#f1ba6f}.button{min-height:49px;border:0;border-radius:14px;padding:0 19px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-weight:800;font-size:14px;transition:transform .18s,background .18s}.button:hover,.topic-card:hover,.lesson-row:hover{transform:translateY(-2px)}.button.primary{background:#263f38;color:#fff}.button.primary:hover{background:#345d4f}.button.ghost{border:1px solid #d9ddd2;color:#30443c;background:#fff}.text-button{border:0;background:none;padding:0;display:inline-flex;align-items:center;gap:8px;color:#1f4639;font-weight:800;font-size:14px}.text-button:hover{text-decoration:underline}
.hero{min-height:445px;background:#243e37;border-radius:30px;position:relative;overflow:hidden;display:grid;grid-template-columns:1.2fr 1fr}.hero-copy{padding:56px 0 52px 60px;position:relative;z-index:2}.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(44px,5.2vw,69px);line-height:1.06;letter-spacing:-.055em;color:#fff;margin:22px 0 19px;font-weight:500}.hero h1 em{font-weight:400;color:#efbc75}.hero p{color:#d3dfd7;max-width:410px;font-size:16px;line-height:1.7;margin-bottom:25px}.hero-button{background:#eec083!important;color:#233a32!important;box-shadow:0 8px 22px #0c211b33}.hero-button:hover{background:#f8d39e!important}.hero-art{position:relative;min-height:400px}.art-circle{position:absolute;border-radius:50%}.art-circle-one{width:440px;height:440px;right:-56px;top:28px;background:#365c4d}.art-circle-two{width:300px;height:300px;right:35px;top:100px;border:1px solid #81a38988}.art-staff{position:absolute;width:410px;top:145px;right:30px;transform:rotate(-12deg)}.art-staff i{display:block;height:1px;background:#b1c9acaa;margin:27px 0}.art-staff span,.art-staff b{font-family:Georgia,serif;font-size:170px;font-weight:400;color:#e9c88e;position:absolute;top:-94px;left:90px;transform:rotate(9deg)}.art-staff b{font-size:132px;left:245px;top:-9px;color:#adc6a5}.art-pill{position:absolute;right:54px;bottom:48px;background:#f7f0dc;color:#234037;padding:15px 24px;border-radius:100px;font-weight:800;transform:rotate(7deg);font-size:19px;box-shadow:0 12px 30px #132f2940}.art-pill span{color:#b57a51;padding:0 8px}
.section{margin-top:48px}.two-col{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:31px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:21px}.section-heading h2,.stats-detail h2,.review-list h2{font-family:Georgia,serif;font-size:32px;font-weight:500;letter-spacing:-.045em;margin:8px 0 0}.small-progress{font-size:12px;color:#7c8981;padding-bottom:5px;white-space:nowrap}.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.topic-card{min-height:196px;border:1px solid #e9e6dc;border-radius:22px;text-align:left;padding:21px 23px 17px;color:#243a33;display:flex;flex-direction:column;justify-content:space-between;transition:transform .18s,box-shadow .18s;box-shadow:0 4px 18px #20382d08}.topic-card:hover{box-shadow:0 12px 30px #20382d16}.peach{background:#f9e8dc}.sage{background:#e6eee3}.lavender{background:#ebe9f1}.butter{background:#f6eed6}.topic-card-top,.topic-card-footer{display:flex;align-items:center;justify-content:space-between}.topic-number{font-weight:800;font-size:11px;letter-spacing:.14em;opacity:.56}.topic-icon{font-family:Georgia,serif;font-size:35px;line-height:1}.topic-card h3{font-family:Georgia,serif;font-size:25px;font-weight:500;letter-spacing:-.035em;margin:10px 0 3px}.topic-card p{color:#62716a;font-size:13px;margin:0}.topic-card-footer{border-top:1px solid #213f321b;padding-top:13px;color:#527061;font-size:11px;font-weight:750}.side-column{padding-top:1px}.daily-card{background:#fff;border:1px solid #eeece3;border-radius:22px;min-height:267px;padding:24px;box-shadow:0 4px 18px #20382d08}.daily-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:#f4ead8;color:#ad7b46;margin-bottom:24px}.daily-card h3{font-family:Georgia,serif;font-size:27px;font-weight:500;margin:9px 0}.daily-card p{color:#6a786e;line-height:1.55;font-size:13px;margin-bottom:19px}.tip-card{margin-top:15px;background:#e8eee5;border-radius:20px;padding:24px;color:#3d5a4b}.tip-card span{font-size:10px;font-weight:800;letter-spacing:.15em;color:#708b76}.tip-card p{font-size:14px;line-height:1.8;margin:12px 0 0}.tip-card strong{color:#1e3e31}
.narrow-page{max-width:890px}.page-intro{margin:10px 0 32px}.page-intro h1{font-family:Georgia,serif;font-size:clamp(39px,5vw,59px);font-weight:500;letter-spacing:-.055em;margin:10px 0}.page-intro p{color:#738078;line-height:1.65;font-size:16px;max-width:580px;margin:0}.format-row{padding:20px 23px;background:#fff;border:1px solid #e9e8de;border-radius:19px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.format-row strong{display:block;font-size:14px}.format-row small{display:block;font-size:12px;color:#849088;margin-top:5px}.format-switch{display:inline-flex;background:#f0f1eb;padding:4px;border-radius:12px;gap:3px}.format-switch button{border:0;border-radius:9px;background:transparent;color:#687970;padding:9px 13px;font-size:12px;font-weight:800;white-space:nowrap}.format-switch button.active{background:#fff;color:#244235;box-shadow:0 2px 8px #334b381a}.lesson-list{display:grid;gap:10px}.lesson-row{display:flex;align-items:center;text-align:left;gap:19px;border:1px solid #e9e8de;background:#fff;border-radius:20px;padding:17px 20px;min-height:105px;color:#2a4038;transition:transform .18s,box-shadow .18s}.lesson-row:hover{box-shadow:0 8px 22px #20382d12}.lesson-row-icon{width:65px;height:65px;border-radius:17px;display:grid;place-items:center;flex:none;font:34px Georgia,serif}.lesson-row-text{flex:1;display:flex;flex-direction:column;gap:3px}.lesson-row-text small{font-size:10px;letter-spacing:.15em;color:#92a096;font-weight:800}.lesson-row-text strong{font:24px Georgia,serif}.lesson-row-text span{font-size:12px;color:#7b8980}.piano-note{display:flex;gap:18px;background:#e9eee6;border-radius:20px;padding:24px;margin-top:25px}.piano-note>span{font:32px Georgia,serif;color:#668674}.piano-note strong{font-size:14px}.piano-note p{margin:5px 0 0;color:#718176;font-size:13px;line-height:1.55}
.lesson-page{max-width:900px}.back-link{display:inline-flex;gap:5px;align-items:center;border:0;background:none;padding:0;color:#658071;font-size:13px;font-weight:750;margin:5px 0 24px}.back-link:hover{text-decoration:underline}.topic-hero{border-radius:27px;padding:35px 40px;display:flex;justify-content:space-between;gap:20px;min-height:196px}.topic-hero span{font-size:11px;font-weight:800;letter-spacing:.15em;opacity:.62}.topic-hero h1{font:500 clamp(39px,5vw,54px) Georgia,serif;letter-spacing:-.05em;margin:14px 0 9px}.topic-hero p{color:#65736a;max-width:420px;line-height:1.6;margin:0}.topic-hero-icon{font:85px Georgia,serif;align-self:center;opacity:.55}.lesson-body{padding:35px 4px}.callout{border-left:3px solid #dca778;background:#fff;border-radius:0 16px 16px 0;padding:20px 23px;margin-bottom:23px}.callout strong{font-size:15px}.callout p{color:#6c7b70;line-height:1.65;font-size:14px;margin:7px 0 0}.note-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}.note-tile{background:#fff;border:1px solid #e7e9df;border-radius:17px;min-height:103px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.note-tile strong{font:43px Georgia,serif;color:#305441}.note-tile span{font-size:12px;color:#738878;font-weight:750}.lesson-hint{font-size:13px;color:#87928a;line-height:1.6;margin:18px 0 0}.example-staff,.strings-lesson{background:#fff;border:1px solid #e7e9df;border-radius:21px;display:flex;align-items:center;gap:10px;padding:16px 24px}.example-staff .staff-svg{max-width:480px;width:64%}.example-staff>div{padding:10px}.example-staff span{color:#97a398;letter-spacing:.16em;font-size:10px;font-weight:800}.example-staff strong{display:block;font:28px Georgia,serif;margin:7px 0}.example-staff p{font-size:12px;color:#7a8b7f;margin:0}.memory-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px}.memory-pair>div{border:1px solid #e7e9df;background:#fff;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px}.memory-pair small{font-size:10px;font-weight:800;color:#8c9a8e;letter-spacing:.1em}.memory-pair strong{font-size:20px;letter-spacing:.02em}.memory-pair span{font-size:12px;color:#819084}.strings-lesson .strings-svg{max-width:360px;width:47%}.string-names{flex:1}.string-names>div{display:flex;justify-content:space-between;border-bottom:1px solid #ecede6;padding:7px 0;font-size:12px;gap:10px}.string-names>div:last-child{border:0}.string-names span{color:#8b988f}.string-names strong{color:#315344}.chord-examples{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.chord-example{background:#fff;border:1px solid #e7e9df;border-radius:18px;padding:17px}.chord-example-head{display:flex;align-items:baseline;justify-content:space-between}.chord-example-head strong{font:31px Georgia,serif}.chord-example-head span{font-size:11px;color:#89958b}.chord-svg{width:100%;max-width:220px;margin:auto}.lesson-cta{border-radius:20px;background:#e7eee8;padding:22px 24px;margin-top:29px;display:flex;align-items:center;justify-content:space-between;gap:20px}.lesson-cta strong{display:block;font-size:16px}.lesson-cta span{display:block;color:#829184;font-size:12px;margin-top:5px}.record-line{color:#849187;font-size:12px;text-align:center;margin:15px 0 0}
.quiz-page{max-width:790px;padding-top:26px}.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#869288;font-weight:700}.quiz-top .back-link{margin:0}.quiz-top strong{color:#335646}.progress-track{height:7px;background:#e7e9df;border-radius:10px;margin:20px 0 23px;overflow:hidden}.progress-track span{display:block;height:100%;background:#78a489;border-radius:10px;transition:width .25s}.quiz-card{background:#fff;border:1px solid #e9e8df;border-radius:26px;padding:30px 38px 34px;box-shadow:0 16px 35px #2845360b}.quiz-card h1{font:500 30px Georgia,serif;letter-spacing:-.03em;margin:10px 0 20px}.question-symbol{height:190px;background:#f3f4ed;border-radius:21px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:20px}.question-symbol span{font:112px Georgia,serif;line-height:1;color:#315748}.question-symbol small,.question-staff>span,.question-strings>span{color:#a1aca0;font-size:10px;letter-spacing:.16em;font-weight:800}.question-symbol small{margin-top:8px}.chord-question span{font-size:94px}.question-staff,.question-strings{background:#f3f4ed;border-radius:21px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:12px;padding:6px 0 16px}.staff-svg{max-width:520px;width:100%;height:auto}.staff-lines line{stroke:#587061;stroke-width:1.4}.clef{font-family:Georgia,"Times New Roman",serif;font-size:120px;fill:#315748}.note-head{fill:#273d35}.note-stem{fill:none;stroke:#273d35;stroke-width:2}.question-staff .staff-svg{max-height:215px}.listen-button{display:flex;align-items:center;gap:8px;border:0;background:none;color:#547563;font-size:12px;font-weight:800;margin:2px auto 17px;padding:8px}.listen-button:hover{text-decoration:underline}.strings-svg{width:100%;height:auto;max-height:215px}.string-row line{stroke:#91a99a}.string-row.active line{stroke:#315a44}.string-number{font:16px Georgia,serif;fill:#688172}.string-row.active .string-number{font-weight:700;fill:#2a4c39}.string-dot{fill:#e7b577;stroke:#fff;stroke-width:3}.question-strings .strings-svg{max-width:380px}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer-option{height:60px;border:1px solid #e2e7dd;background:#fff;border-radius:13px;display:flex;align-items:center;text-align:left;gap:15px;padding:0 15px;color:#2b4438;transition:border-color .15s,background .15s}.answer-option:not(:disabled):hover{border-color:#90ae9b;background:#f3f7f1}.answer-option>span{width:28px;height:28px;border-radius:8px;background:#f1f3ec;display:grid;place-items:center;font-size:11px;color:#88978a;font-weight:800}.answer-option strong{font-size:15px;flex:1}.answer-option.correct{border-color:#6ea681;background:#edf7ee}.answer-option.correct>span{background:#d2e9d6;color:#346f48}.answer-option.wrong{border-color:#df9a87;background:#fff0ea}.answer-option.wrong>span{background:#f8d9d0;color:#a64e40}.answer-option.muted{opacity:.57}.feedback{border-radius:14px;padding:16px;display:flex;gap:13px;margin-top:18px}.feedback.is-correct{background:#edf7ee;color:#326a45}.feedback.is-wrong{background:#fff0e9;color:#9a5942}.feedback-icon{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ffffffa8}.feedback strong{font-size:14px}.feedback p{font-size:13px;line-height:1.5;margin:5px 0 0;color:#607969}.feedback.is-wrong p{color:#9a6e5b}.next-button{margin-top:16px;width:100%}
.result-page{max-width:700px}.result-card{text-align:center;background:#fff;border:1px solid #e9e8df;border-radius:27px;padding:47px 30px;box-shadow:0 16px 35px #2845360b}.result-icon{width:67px;height:67px;display:grid;place-items:center;margin:0 auto 18px;background:#f4e9d4;color:#bd8c50;border-radius:21px;font:39px Georgia,serif}.result-card h1{font:500 clamp(33px,5vw,47px) Georgia,serif;letter-spacing:-.05em;margin:12px auto 23px;max-width:500px}.result-score{display:flex;align-items:baseline;justify-content:center;gap:10px;color:#788d7b}.result-score strong{font:84px Georgia,serif;color:#2e5a43;line-height:1}.result-score span{font-size:17px}.result-card>p{color:#758579;line-height:1.65;font-size:14px;max-width:390px;margin:17px auto 26px}.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.review-panel{background:#fff;border:1px solid #e8e9e0;border-radius:24px;padding:32px;display:flex;gap:33px;align-items:center}.review-illustration{width:150px;height:150px;border-radius:24px;background:#e9eee5;color:#497461;display:grid;place-items:center;flex:none}.review-panel h2{font:500 40px Georgia,serif;margin:8px 0}.review-panel p{color:#77877b;font-size:14px;line-height:1.6;max-width:380px}.review-list{margin-top:36px}.review-list h2{font-size:28px;margin-bottom:17px}.review-group{display:flex;justify-content:space-between;gap:15px;padding:18px 20px;background:#fff;border:1px solid #e8e9e0;border-radius:14px;margin-bottom:8px;font-size:14px}.review-group span{color:#718b78}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stat-card{background:#fff;border:1px solid #e8e9e0;border-radius:18px;padding:23px}.stat-card>span{font-size:10px;font-weight:800;letter-spacing:.13em;color:#859687}.stat-card strong{display:block;font:52px Georgia,serif;margin:10px 0 4px;color:#2d5942}.stat-card strong small{font:22px Georgia,serif;color:#a3b3a4}.stat-card p{font-size:12px;color:#89978a;margin:0}.stats-detail{margin-top:34px}.stats-detail h2{font-size:28px;margin-bottom:17px}.stat-row{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border:1px solid #e8e9e0;border-radius:14px;padding:13px 18px;margin-bottom:8px}.stat-row>div:first-child{display:flex;align-items:center;gap:13px}.stat-row-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font:23px Georgia,serif}.stat-row strong{display:block;font-size:13px}.stat-row small{display:block;font-size:11px;color:#94a094;margin-top:3px}.mini-bar{width:145px;height:7px;background:#e9eee8;border-radius:10px;overflow:hidden}.mini-bar span{display:block;height:100%;background:#80ab8d}.storage-note{color:#93a096;font-size:12px;margin-top:22px}.chord-grid line{stroke:#819a8b;stroke-width:1.4}.chord-nut{stroke:#355441;stroke-width:5}.chord-top{font:22px sans-serif;fill:#8a9e8e}.chord-open{fill:none;stroke:#567360;stroke-width:2}.chord-finger{fill:#315e47}.chord-caption{fill:#97a598;font:12px sans-serif}
@media(max-width:900px){.hero-copy{padding-left:38px}.two-col{grid-template-columns:1fr}.side-column{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tip-card{margin-top:0}.daily-card{min-height:225px}.art-staff{right:-50px}}
@media(max-width:650px){.site-header{height:62px;padding:0 20px}.brand{font-size:17px}.brand-mark{width:34px;height:34px;border-radius:11px}.header-tag{display:none}.main-shell{padding:20px 16px calc(110px + env(safe-area-inset-bottom))}.bottom-nav{position:fixed;z-index:10;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid #e9ece3;padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -5px 25px #1c34230d}.bottom-nav button{border:0;background:none;color:#9aa79d;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:4px 0}.bottom-nav button.active{color:#2f6148}.hero{min-height:492px;display:block;border-radius:24px}.hero-copy{padding:34px 27px 0}.hero h1{font-size:45px;margin:18px 0 12px}.hero p{font-size:13px;max-width:310px;line-height:1.55;margin-bottom:18px}.hero-button{min-height:45px;font-size:12px}.hero-art{position:absolute;bottom:0;right:0;width:100%;height:210px;min-height:0}.art-circle-one{width:310px;height:310px;right:-35px;top:-10px}.art-circle-two{width:220px;height:220px;right:18px;top:34px}.art-staff{width:310px;top:62px;right:-5px}.art-staff i{margin:19px 0}.art-staff span{font-size:130px;top:-72px;left:60px}.art-staff b{font-size:95px;left:190px;top:-13px}.art-pill{right:26px;bottom:24px;padding:11px 17px;font-size:15px}.section{margin-top:34px}.section-heading{align-items:start}.section-heading h2{font-size:27px}.small-progress{font-size:10px;padding-top:23px}.topic-grid{gap:10px}.topic-card{min-height:170px;padding:15px;border-radius:18px}.topic-icon{font-size:29px}.topic-card h3{font-size:21px}.topic-card p{font-size:11px}.topic-card-footer{font-size:9px;padding-top:10px;gap:4px}.side-column{grid-template-columns:1fr}.daily-card{min-height:0;padding:22px}.daily-icon{margin-bottom:12px}.tip-card{padding:20px}.page-intro{margin:12px 0 25px}.page-intro h1{font-size:42px}.page-intro p{font-size:14px}.format-row{display:block;padding:17px}.format-switch{margin-top:14px;width:100%}.format-switch button{flex:1}.lesson-row{min-height:95px;padding:13px;gap:13px}.lesson-row-icon{width:56px;height:56px;font-size:30px}.lesson-row-text strong{font-size:21px}.lesson-row-text span{font-size:11px}.topic-hero{min-height:175px;padding:24px;border-radius:21px}.topic-hero h1{font-size:39px}.topic-hero p{font-size:13px;max-width:270px}.topic-hero-icon{font-size:58px}.lesson-body{padding-top:28px}.callout{padding:17px}.note-grid{grid-template-columns:repeat(4,1fr);gap:7px}.note-tile{min-height:82px}.note-tile strong{font-size:35px}.example-staff{display:block;padding:8px 12px 16px}.example-staff .staff-svg{width:100%}.example-staff>div{padding:0 18px 5px}.memory-pair{grid-template-columns:1fr}.strings-lesson{display:block;padding:10px 18px 17px}.strings-lesson .strings-svg{width:100%}.chord-examples{grid-template-columns:repeat(2,1fr);gap:8px}.chord-example{padding:12px}.chord-example-head{display:block}.chord-example-head span{display:block}.lesson-cta{display:block;padding:20px}.lesson-cta .button{width:100%;margin-top:16px}.quiz-page{padding-top:14px}.quiz-top>span{max-width:120px;text-align:center}.quiz-card{padding:24px 19px 23px;border-radius:22px}.quiz-card h1{font-size:27px}.question-symbol{height:160px}.question-symbol span{font-size:90px}.chord-question span{font-size:79px}.question-staff .staff-svg{max-height:175px}.question-strings .strings-svg{max-height:175px}.answer-grid{gap:8px}.answer-option{height:57px;gap:9px;padding:0 10px}.answer-option strong{font-size:13px}.answer-option>span{width:24px;height:24px;flex:none}.result-card{padding:37px 20px}.result-card h1{font-size:37px}.result-score strong{font-size:72px}.result-actions{display:grid}.review-panel{display:block;padding:24px}.review-illustration{width:70px;height:70px;margin-bottom:22px}.review-panel h2{font-size:36px}.review-group{display:block}.review-group span{display:block;margin-top:5px}.stats-grid{grid-template-columns:1fr 1fr}.stat-card:last-child{grid-column:span 2}.stat-card{padding:18px}.stat-card strong{font-size:42px}.mini-bar{width:70px}.stat-row{padding:12px}}
@media(max-width:375px){.hero h1{font-size:40px}.topic-card h3{font-size:18px}.topic-card-footer{font-size:8px}.answer-option strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.topic-card,.lesson-row,.progress-track span{transition:none}}
.desktop-nav{display:flex;align-items:center;gap:25px}.desktop-nav button{border:0;background:none;padding:8px 0;color:#829288;font-size:12px;font-weight:750;white-space:nowrap}.desktop-nav button.active,.desktop-nav button:hover{color:#244835}
@media(max-width:900px){.desktop-nav{gap:16px}.header-tag{display:none}}
@media(max-width:650px){.desktop-nav{display:none}}
.staff-guide-section{padding:24px 4px 36px}.staff-guide-hero{background:#dfece0}.guide-intro{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:41px}.guide-intro>div{background:#fff;border:1px solid #e7e9df;border-radius:16px;padding:18px 20px}.guide-intro strong{display:block;font:26px Georgia,serif;color:#2f5a42}.guide-intro span{display:block;font-size:11px;color:#819083;margin-top:5px}.guide-heading h2{font:500 31px Georgia,serif;letter-spacing:-.045em;margin:7px 0 6px}.guide-heading p{font-size:14px;color:#78897c;line-height:1.55;margin:0 0 18px}.staff-overview-wrap{background:#fff;border:1px solid #e7e9df;border-radius:21px;padding:13px 11px 9px;overflow:hidden}.staff-overview-scroll{overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}.staff-overview-svg{width:100%;min-width:800px;height:auto;display:block}.overview-lines line{stroke:#6b8371;stroke-width:1.4}.overview-clef{font:120px Georgia,serif;fill:#315748}.overview-highlight{fill:#b9d9bd;opacity:.5}.overview-head{fill:#274b38}.overview-note.selected .overview-head{fill:#d28f51}.overview-stem{stroke:#274b38;stroke-width:2}.overview-note.selected .overview-stem{stroke:#d28f51}.overview-letter{font:700 20px Georgia,serif;fill:#264937}.overview-solfege{font:12px ui-sans-serif,sans-serif;fill:#788e7b}.scroll-hint{display:none}.staff-note-picker{display:grid;grid-template-columns:repeat(9,1fr);gap:7px;margin:13px 0}.staff-note-picker button{border:1px solid #e2e8df;border-radius:13px;background:#fff;min-height:61px;color:#375b43;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.staff-note-picker button.active{border-color:#8bb692;background:#e8f1e6}.staff-note-picker strong{font:20px Georgia,serif}.staff-note-picker span{font-size:10px;color:#7b917e}.selected-note-card{display:flex;align-items:center;background:#e9f1e8;border-radius:21px;padding:15px 25px;gap:17px}.selected-note-visual{width:45%;flex:none}.selected-note-visual .staff-svg{width:100%}.selected-note-copy{flex:1}.selected-note-copy h3{font:500 30px Georgia,serif;margin:8px 0}.selected-note-copy p{font-size:14px;line-height:1.6;color:#617b68}.selected-note-copy p strong{color:#2c593c}.neighbor-notes{display:grid;gap:5px;color:#5e8067;font-size:12px}.guide-heading-spaced{margin:39px 0 17px}.staff-rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.staff-rule{background:#fff;border:1px solid #e7e9df;border-radius:18px;padding:21px}.rule-count{display:block;color:#c28e57;letter-spacing:.12em;font-size:11px;font-weight:800;margin-bottom:20px}.staff-rule strong{font:500 22px Georgia,serif;color:#2d513c}.staff-rule p{color:#718375;font-size:13px;line-height:1.65;margin:8px 0 0}.guide-memory{margin-top:13px}.guide-caution{background:#f7eddd;border-radius:17px;padding:20px 23px;margin-top:16px}.guide-caution strong{font-size:14px;color:#664d2e}.guide-caution p{font-size:13px;line-height:1.65;color:#816d52;margin:6px 0 0}
@media(max-width:650px){.staff-guide-section{padding-top:17px}.staff-guide-hero h1{font-size:37px}.guide-intro{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:30px}.guide-intro>div{padding:13px 10px}.guide-intro strong{font-size:20px}.guide-intro span{font-size:9px;line-height:1.35}.guide-heading h2{font-size:27px}.guide-heading p{font-size:13px}.staff-overview-wrap{padding:9px 7px}.staff-overview-svg{width:800px;min-width:800px}.scroll-hint{display:block;font-size:10px;color:#8b9b8e;padding:0 10px 8px}.staff-note-picker{grid-template-columns:repeat(5,1fr);gap:6px}.staff-note-picker button{min-height:54px}.selected-note-card{display:block;padding:15px 18px 21px}.selected-note-visual{width:100%;max-width:360px;margin:auto}.selected-note-copy h3{font-size:28px}.selected-note-copy p{font-size:13px}.guide-heading-spaced{margin-top:31px}.staff-rule-grid{grid-template-columns:1fr}.staff-rule{padding:18px}.rule-count{margin-bottom:10px}.guide-caution{padding:18px}}
.guitar-guide-section{padding:29px 4px 36px}.guitar-guide-hero{background:#e9e7f1}.fret-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 20px}.fret-level{min-height:124px;border:1px solid #e4e5df;border-radius:17px;background:#fff;color:#344d3f;padding:17px;text-align:left;display:flex;flex-direction:column;align-items:flex-start}.fret-level.active{border-color:#8da694;background:#eaf2e8;box-shadow:inset 0 0 0 1px #8da694}.fret-level strong{font:500 18px Georgia,serif}.fret-level span{font-size:11px;color:#7a897e;margin:6px 0 auto;line-height:1.4}.fret-level small{font-size:10px;color:#62866d;font-weight:800;margin-top:12px}.fret-lesson-callout{background:#fff;border-left:3px solid #9b9ab8;border-radius:0 15px 15px 0;padding:18px 21px}.fret-lesson-callout strong{font-size:14px}.fret-lesson-callout p{font-size:13px;color:#728077;line-height:1.65;margin:6px 0 0}.fretboard-heading{margin-top:31px}.fretboard-scroll{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;background:#f6eddf;border:1px solid #e8decd;border-radius:17px;padding:12px}.fretboard-grid{display:grid;width:max-content;border-radius:10px;overflow:hidden;border:1px solid #d2bfa7}.fret-cell{min-width:0;min-height:49px;display:flex;align-items:center;justify-content:center;border-right:1px solid #d7c4ac;border-bottom:1px solid #e0cfb8}.fret-corner,.fret-header{min-height:34px;background:#e5d6c3;font-size:10px;color:#7e755f;font-weight:800;letter-spacing:.04em}.fret-header:nth-child(2){font-size:8px}.fret-string-label{background:#e9decb;gap:5px;color:#3f4e42}.fret-string-label b{font:18px Georgia,serif}.fret-string-label span{font-size:11px;color:#7b8372}.fret-position{position:relative;border-top:0;border-left:0;background:#f7eedf;padding:0;color:#315844;isolation:isolate}.fret-position::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#aa9a80;z-index:-1}.fret-position.open{background:#eee5d6;border-right:4px solid #8c7c65}.fret-position strong,.fret-target{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#e5eee3;border:1px solid #a9c4ab;color:#28543b;font-size:12px;font-weight:800;box-shadow:0 2px 5px #253b291a}.fret-position.selected strong,.fret-target{background:#d08e57;color:#fff;border-color:#d08e57}.fret-position:not(.hidden-note):hover strong{transform:scale(1.08)}.fret-muted-dot{width:6px;height:6px;border-radius:50%;background:#bfb39e}.fret-position.hidden-note{background:#f4ebdf}.fret-position.selected{background:#f9e3c8}.fret-note-detail{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#e9f1e8;border-radius:18px;padding:20px 24px;margin-top:15px}.fret-note-detail h3{font:500 27px Georgia,serif;margin:6px 0 4px}.fret-note-detail p{font-size:16px;color:#365d43;margin:0 0 5px}.fret-note-detail p span{font-size:12px;color:#8b9b8b}.fret-note-detail small{font-size:12px;color:#719078}.fret-note-detail .listen-button{margin:0;white-space:nowrap}.guitar-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:27px 0}.guitar-facts>div{background:#fff;border:1px solid #e7e9df;border-radius:17px;padding:18px}.guitar-facts strong{font-size:13px;color:#2f523c}.guitar-facts p{font-size:12px;line-height:1.6;color:#77877a;margin:6px 0 0}.question-fret{background:#f4f1e9;border-radius:19px;padding:15px;margin-bottom:16px}.question-fret>strong{display:block;text-align:center;font:22px Georgia,serif;margin:2px 0 12px}.question-fret .fretboard-scroll{background:#f6eddf;max-width:100%;margin:auto}
@media(max-width:650px){.guitar-guide-section{padding-top:20px}.guitar-guide-hero h1{font-size:37px}.fret-levels{grid-template-columns:repeat(2,1fr);gap:7px;margin:18px 0}.fret-level{min-height:108px;padding:13px}.fret-level strong{font-size:16px}.fret-level span{font-size:10px}.fret-lesson-callout{padding:16px}.fretboard-heading{margin-top:25px}.fret-note-detail{display:block;padding:18px}.fret-note-detail .listen-button{margin:13px 0 0;padding-left:0}.guitar-facts{grid-template-columns:1fr}.question-fret{padding:11px}.question-fret>strong{font-size:19px}}
.fret-position::before{z-index:0}.fret-position strong,.fret-target,.fret-muted-dot{position:relative;z-index:1}
.note-tile:hover,.string-names button:hover{border-color:#93b79b;background:#f2f8f1}
.overview-note{cursor:pointer}.overview-note:hover .overview-head{fill:#d28f51}.overview-note:focus-visible{outline:3px solid #dd8d64;outline-offset:3px}
.selected-note-play,.example-staff-play{border:0;background:none;padding:0;text-align:left;cursor:pointer}.example-staff-play{width:64%;flex:none}.example-staff-play .staff-svg{width:100%}
.string-names button{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;border-bottom:1px solid #ecede6;background:transparent;padding:7px 0;font-size:12px;text-align:left}.string-names button:last-child{border-bottom:0}
.question-visual-button{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:inherit;cursor:pointer}.question-visual-button .question-symbol,.question-visual-button .question-staff,.question-visual-button .question-strings{margin-bottom:16px}
@media(max-width:650px){.example-staff-play{width:100%}}