@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f5f3ee;--white:#fff;--ink:#263e32;--muted:#747b70;--line:#dfE2d8;--green:#2c513d;--mint:#e4edda;--lime:#d9efac;--font:'DM Sans',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--font)}button,input,a{ -webkit-tap-highlight-color:transparent}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #b08036;outline-offset:4px}button:disabled{cursor:default}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Manrope',sans-serif}button{color:inherit}.wrap{max-width:1160px;margin:auto;padding-left:24px;padding-right:24px}.site-header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;font-weight:800;font-size:24px;letter-spacing:-1px}.brand-dot{color:#819867}.brand-mark{display:grid;place-items:center;background:var(--green);color:#fff;border-radius:9px;font-size:28px;width:34px;height:36px;margin-right:11px;font-weight:400;line-height:1}.site-header nav{display:flex;gap:34px;font-size:13px;font-weight:600}.site-header nav a:hover{text-decoration:underline}.intro{text-align:center;padding-top:57px;padding-bottom:39px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;display:flex;align-items:center;gap:8px}.intro .eyebrow{justify-content:center}.eyebrow>span{height:6px;width:6px;border-radius:50%;background:#849e68}.intro h1{font-size:clamp(45px,6.4vw,72px);font-weight:600;letter-spacing:-3.8px;line-height:1.2;margin:15px 0 14px}.intro>p{font-size:16px;color:#687367;line-height:1.7}.intro-meta{display:flex;justify-content:center;gap:22px;margin-top:22px;font-size:11px;color:#697462}.intro-meta span:before{content:'✓';margin-right:7px;color:#527147}.lesson{padding:0;background:white;border:1px solid #dde1d7;border-radius:16px;box-shadow:0 8px 30px #263e3205;overflow:hidden;max-width:1112px}.lesson-heading{padding:25px 30px 23px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:15px}.muted{color:#7a8174}.lesson-heading h2{font-size:24px;letter-spacing:-.8px;margin-top:5px}.lesson-heading p{font-size:12px;color:var(--muted);margin-top:3px}.level{background:#f2f5ed;border:1px solid #e4e9dc;border-radius:30px;padding:7px 12px;font-size:10px;white-space:nowrap}.level span{margin-right:4px}.lesson-body{display:grid;grid-template-columns:265px 1fr}.lesson-sidebar{padding:25px 16px 20px;background:#fafbf7;border-right:1px solid var(--line)}.sidebar-label{font-size:9px;letter-spacing:1.1px;font-weight:700;color:#7d8477;padding:0 10px 15px}.phrase-button,.whole-button{width:100%;display:flex;text-align:left;align-items:center;gap:10px;border:1px solid transparent;background:transparent;padding:11px 10px;border-radius:7px;font-size:12px;font-weight:600;line-height:1.4;margin-bottom:4px}.phrase-button small,.whole-button small{display:block;font-size:10px;font-weight:400;color:#899080;margin-top:3px}.phrase-button:hover,.whole-button:hover{background:#edf1e7}.phrase-button.active,.whole-button.active{background:#eaf0e2;border-color:#dce5cf}.phrase-number{font-size:10px;display:grid;place-items:center;min-width:25px;height:25px;border:1px solid #dde3d4;border-radius:50%;color:#87947b;font-weight:500}.active .phrase-number,.done .phrase-number{background:var(--green);color:white;border-color:var(--green)}.whole-wrap{border-top:1px solid #e3e7dc;margin-top:13px;padding-top:13px}.whole-button>span:last-child{margin-left:auto}.progress-caption{display:flex;justify-content:space-between;font-size:10px;color:#7e8775;margin:20px 10px 6px}.progress-caption>span:first-child{font-weight:600}progress{display:block;width:calc(100% - 20px);height:4px;margin:0 10px;appearance:none;border:0;border-radius:3px;overflow:hidden;background:#e5e9de}progress::-webkit-progress-bar{background:#e5e9de}progress::-webkit-progress-value{background:#86a76b}progress::-moz-progress-bar{background:#86a76b}.progress-note{font-size:9px;color:#8b9282;margin:8px 10px}.practice-area{padding:26px 30px 24px;min-width:0}.practice-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.practice-top .eyebrow{font-size:9px}.mode-switch{display:flex;padding:3px;background:#f2f3ef;border-radius:6px}.mode-switch button{border:0;background:transparent;border-radius:4px;font-size:10px;padding:5px 9px;color:#7b8275}.mode-switch button[aria-pressed=true]{background:white;box-shadow:0 1px 4px #1e342710;color:var(--green)}.practice-area h3{font-size:23px;letter-spacing:-.6px;margin-top:21px}.phrase-help{font-size:12px;color:#7b8475;margin-top:3px}.notes{display:flex;gap:8px;margin:23px 0 20px;align-items:center;flex-wrap:wrap;min-height:54px}.note{width:43px;height:51px;display:flex;align-items:center;justify-content:center;border:1px solid #e2e6dd;background:#fafbf8;border-radius:7px;font-size:19px;font-weight:500;position:relative;transition:background .1s}.note.current{background:#e3edd8;border-color:#93ac7b;color:#294d35;box-shadow:0 0 0 2px #eef3e7}.note.played{background:#f1f5eb;border-color:#dce6cf;color:#729356}.note .beats{position:absolute;bottom:1px;font-size:8px;color:#78856a;font-weight:400}.note.long{padding-bottom:5px}.playback{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}.listen{display:flex;gap:9px;align-items:center;background:white;border:1px solid #ccd5c4;border-radius:6px;padding:8px 13px;font-size:11px;font-weight:600;min-width:115px}.listen:hover{background:#f5f7f0}.speed{display:flex;gap:8px;align-items:center;font-size:10px;color:#7c8673}.speed input{width:70px;accent-color:#617d4a;height:4px}.speed span{font-size:9px;min-width:39px}.keyboard{position:relative;display:flex;height:169px;padding:6px 6px 7px;background:#263d31;border-radius:9px;box-shadow:0 5px 0 #dbe0d5;isolation:isolate;user-select:none}.piano-key{padding:0;border:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;touch-action:manipulation}.piano-key.white{width:12.5%;height:100%;background:linear-gradient(#fdfdfa,#f3f3ed);border:1px solid #c8cebf;border-bottom:4px solid #d8ddcf;border-radius:0 0 5px 5px;color:#808977;margin:0 1px;z-index:1;padding-bottom:11px;font-size:15px}.piano-key .key-shortcut{font-size:8px;color:#a7ad9f;line-height:1;margin-top:5px}.piano-key.black{position:absolute;width:7.3%;height:95px;top:6px;background:linear-gradient(#35483b,#1d2d23);border:1px solid #18291d;border-bottom:5px solid #14241a;border-radius:0 0 4px 4px;z-index:3;color:#9eaa99;padding-bottom:8px;font-size:9px;transform:translateX(-50%)}.piano-key.white.expected{background:linear-gradient(#edf4df,#d9e9bc);border-color:#8ea86d;border-bottom-color:#abc18f;color:#294e31}.piano-key.white.expected:before{content:'';width:6px;height:6px;background:#638645;border-radius:50%;position:absolute;bottom:48px}.piano-key.pressed{background:#94b66d!important;color:#14311a!important;border-bottom-width:1px}.keyboard-caption{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#818b78;margin-top:16px;gap:10px}.green-dot{display:inline-block;width:6px;height:6px;background:#8bab67;border-radius:50%;margin-right:5px}kbd{font-family:inherit;font-size:9px;background:#f1f3ed;padding:2px 4px;border-radius:3px}.feedback-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:24px;border-top:1px solid #edf0e8;padding-top:16px;font-size:11px;color:#76846b;min-height:41px}.text-button{font-size:10px;border:0;background:none;white-space:nowrap;color:#7d8773;padding:5px}.text-button:hover{text-decoration:underline}.completion{display:flex;justify-content:space-between;align-items:center;background:#edf4e4;border:1px solid #dce8ce;border-radius:8px;padding:14px;margin-top:16px;gap:12px;font-size:13px}.completion p{font-size:11px;margin-top:3px}.primary,.manual-button{border:0;background:var(--green);color:white;padding:10px 13px;border-radius:6px;white-space:nowrap;font-size:11px}.manual-button{margin-top:14px;width:100%}.lesson-footer{padding:16px 26px;background:#f8f9f4;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;color:#7a8571;font-size:10px}.lesson-footer>span:first-child{font-size:22px;color:#81986b}.lesson-footer strong{font-weight:600;color:#607152}.footer-note{margin-left:auto;white-space:nowrap;font-size:8px;letter-spacing:1px}.how{padding-top:63px;padding-bottom:56px}.section-heading{display:flex;justify-content:space-between;align-items:end}.section-heading h2{font-size:29px;letter-spacing:-1px;margin-top:7px;font-weight:600}.section-heading>p{font-size:12px;color:#818777;line-height:1.7}.tip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:31px}.tip-grid article{border-top:1px solid #d8decf;padding-top:16px}.tip-num{font-size:11px;color:#8b987a}.tip-grid h3{font-size:16px;margin-top:10px;margin-bottom:9px;font-weight:600}.tip-grid p{font-size:12px;line-height:1.85;color:#7d8575;max-width:310px}.next-section{max-width:1112px;background:var(--green);color:#f4f6ee;border-radius:12px;padding:42px 46px;display:grid;grid-template-columns:1.25fr 1fr;gap:70px}.next-section .eyebrow{font-size:9px;color:#c4d4b6;letter-spacing:1.5px}.next-section h2{font-size:42px;line-height:1.23;letter-spacing:-1.5px;font-weight:500;margin-top:15px}.next-copy>p{font-size:12px;color:#c5d1bd;line-height:1.9;margin-top:17px;max-width:390px}.course-button{display:inline-flex;align-items:center;gap:32px;background:#ddecbe;color:#2b4532;border-radius:6px;font-weight:700;font-size:12px;padding:13px 18px;margin-top:23px}.course-button:hover{background:#e9f6d0}.paid-label{display:block;color:#b3c3ab;font-size:9px;margin-top:10px}.next-side{padding-left:42px;border-left:1px solid #587056;align-self:center}.quote-mark{font-size:44px;color:#b5cf8e;font-family:serif}.next-side p{font-size:23px;font-weight:400;letter-spacing:-.5px;line-height:1.65}.next-rule{height:1px;width:40px;background:#87a172;margin:23px 0 16px}.next-side>span:last-child{font-size:10px;color:#b7c7ad}.faq{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;padding-top:60px;padding-bottom:60px}.faq>h2{font-size:23px;letter-spacing:-.7px;font-weight:500}.faq details{border-bottom:1px solid #dfe3d6;padding:0 0 16px;margin-bottom:16px}.faq summary{cursor:pointer;font-size:13px;list-style:none;font-weight:500;display:flex;justify-content:space-between;gap:20px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';color:#7b896c}.faq details[open] summary:after{content:'−'}.faq details p{font-size:12px;color:#737e69;margin-top:12px}.site-footer{display:flex;align-items:center;gap:25px;border-top:1px solid var(--line);padding-top:23px;padding-bottom:30px}.site-footer .brand{font-size:19px}.site-footer p,.site-footer>span{font-size:10px;color:#8a927f}.site-footer>span{margin-left:auto}.skip{position:absolute;top:-100px;left:10px;background:#fff;padding:10px;z-index:10}.skip:focus{top:10px}.mobile{display:none}[hidden]{display:none!important}
@media(min-width:1180px){.wrap:not(.lesson):not(.next-section){padding-left:0;padding-right:0;max-width:1112px}}
@media(max-width:900px){.lesson,.next-section{margin-left:20px;margin-right:20px}.lesson-body{grid-template-columns:215px 1fr}.practice-area{padding:22px}.phrase-button{font-size:10px;gap:7px}.phrase-button small{font-size:9px}.lesson-sidebar{padding-left:10px;padding-right:10px}.practice-top{align-items:start;flex-direction:column;gap:12px}.notes{gap:6px}.note{width:37px}.footer-note{display:none}.next-section{gap:30px;padding:32px}.next-side{padding-left:25px}.next-side p{font-size:20px}.tip-grid{gap:24px}}
@media(max-width:650px){.wrap{padding-left:20px;padding-right:20px}.site-header{height:75px}.brand{font-size:22px}.brand-mark{width:29px;height:31px;font-size:25px}.site-header nav{gap:17px;font-size:11px}.site-header nav a:first-child{display:none}.intro{padding-top:36px;padding-bottom:28px}.intro .eyebrow{font-size:8px;letter-spacing:1.2px}.intro h1{font-size:48px;letter-spacing:-2.8px;margin:13px 0}.intro>p{font-size:14px}.intro-meta{font-size:9px;gap:13px;margin-top:18px}.intro-meta span:before{margin-right:4px}.lesson{padding:0;margin-left:12px;margin-right:12px;border-radius:12px}.lesson-heading{padding:20px;align-items:start;display:block}.lesson-heading h2{font-size:20px;letter-spacing:-.6px}.lesson-heading p{font-size:11px}.level{display:inline-block;font-size:9px;margin-top:12px;padding:4px 9px}.lesson-body{display:flex;flex-direction:column}.lesson-sidebar{padding:12px 16px;border-right:0;border-bottom:1px solid var(--line)}.sidebar-label,.progress-note,.whole-wrap small,.phrase-button small{display:none}.phrases{display:flex;gap:5px}.phrase-button{padding:7px 0;justify-content:center;margin:0;min-width:0;flex:1}.phrase-button>span:nth-child(2){display:none}.phrase-number{width:25px;min-width:25px;height:25px}.whole-wrap{position:absolute;right:16px;top:12px;border:0;margin:0;padding:0;width:62px}.whole-button{font-size:9px;display:block;padding:4px;text-align:center;line-height:1.5}.whole-button .phrase-number,.whole-button>span:last-child{display:none}.lesson-sidebar{position:relative;padding-right:87px}.progress-caption{margin:9px 0 5px;font-size:9px}.progress-caption>span:first-child{display:none}progress{margin:0;width:100%}.practice-area{padding:20px 16px}.practice-top{flex-direction:row;align-items:center}.practice-top .eyebrow{font-size:8px;letter-spacing:.8px}.mode-switch button{font-size:9px;padding:5px 6px}.practice-area h3{font-size:20px;margin-top:19px}.phrase-help{font-size:11px}.notes{gap:6px;margin:19px 0 17px;min-height:47px}.note{width:calc((100% - 36px)/7);max-width:43px;height:47px;font-size:18px}.note .beats{font-size:7px}.playback{margin-bottom:18px}.speed{font-size:9px;gap:5px}.speed input{width:57px}.listen{padding:7px 10px;font-size:10px;min-width:106px}.keyboard{height:151px;padding:5px 4px 6px}.piano-key.black{top:5px;height:86px}.piano-key.white{padding-bottom:12px}.key-shortcut{display:none!important}.keyboard-caption{font-size:8px}.desktop{display:none!important}.mobile{display:inline}.feedback-row{margin-top:18px;font-size:10px}.text-button{font-size:9px}.completion{flex-direction:column;align-items:start;padding:12px}.completion button{width:100%}.lesson-footer{padding:13px 16px;font-size:9px}.how{padding-top:40px;padding-bottom:36px}.section-heading{display:block}.section-heading h2{font-size:25px;line-height:1.35}.section-heading>p{margin-top:10px;font-size:12px}.section-heading>p br{display:none}.tip-grid{grid-template-columns:1fr;gap:22px;margin-top:24px}.tip-grid article{display:grid;grid-template-columns:27px 1fr;padding-top:16px;column-gap:9px}.tip-grid .tip-num{grid-row:1/3;padding-top:3px}.tip-grid h3{margin-top:0;margin-bottom:7px;font-size:15px}.tip-grid p{max-width:none;grid-column:2}.next-section{margin-left:12px;margin-right:12px;padding:28px;grid-template-columns:1fr;gap:25px}.next-section h2{font-size:36px}.next-side{border-left:0;border-top:1px solid #587056;padding:18px 0 0}.quote-mark{display:none}.next-side p{font-size:18px}.next-side p br{display:none}.next-rule{margin:15px 0}.faq{padding-top:38px;padding-bottom:25px;grid-template-columns:1fr;gap:23px}.faq>h2{font-size:22px}.site-footer{flex-wrap:wrap;gap:8px 15px;padding-top:20px;padding-bottom:24px}.site-footer p{font-size:9px}.site-footer>span{width:100%;margin:0;font-size:9px}.site-footer .brand{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.next-copy>p.disclosure{font-size:10px;line-height:1.6;color:#c5d1bd;margin-top:14px;max-width:360px}

.song-picker{display:flex;align-items:center;gap:16px;padding:18px 30px;background:#f8faf4;border-bottom:1px solid var(--line)}.song-picker label{font-size:12px;font-weight:700;letter-spacing:1px}.song-picker select{min-width:0;max-width:100%;padding:10px 32px 10px 12px;border:1px solid #b7c7a8;border-radius:6px;background:white;color:var(--ink);font:14px var(--font);cursor:pointer}.song-picker>span{margin-left:auto;font-size:12px;color:var(--muted)}.notes{display:grid;grid-template-columns:repeat(var(--note-count,7),minmax(0,43px))}.notes .note{width:100%;min-width:0;max-width:none}.note .beats{white-space:nowrap}@media(max-width:650px){.song-picker{padding:16px 20px;gap:8px;flex-wrap:wrap}.song-picker label{width:100%}.song-picker select{width:100%;font-size:14px}.song-picker>span{margin-left:0}.notes{gap:4px;grid-template-columns:repeat(var(--note-count,7),minmax(0,1fr))}}