:root{--paper:#f7f6f0;--panel:#fffefb;--ink:#213d34;--muted:#66766c;--line:#dce1d5;--green:#276c50;--soft:#e4ecde;--sand:#efe4c8;--orange:#aa5938}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{background:var(--paper);color:var(--ink);margin:0;font:16px/1.7 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}a:hover{text-underline-offset:4px;text-decoration:underline}button,select,input{font:inherit}button,.button{border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;text-align:center;border-radius:6px;padding:10px 14px;font-size:14px;display:inline-block}button:hover,.button:hover{background:var(--soft);text-decoration:none}.primary{background:var(--green);border-color:var(--green);color:#fff}.primary:hover{background:#1d513d}button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}button:disabled{cursor:default;opacity:.75}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:4px}select{background:var(--panel);width:100%;min-width:0;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:8px}h1,h2,h3,p{margin-top:0}h1,h2{letter-spacing:-.035em;font-family:Georgia,Times New Roman,serif;font-weight:400;line-height:1.16}h1{margin-bottom:23px;font-size:clamp(36px,4.4vw,61px)}h2{margin-bottom:18px;font-size:34px}h3{letter-spacing:-.02em;font-size:19px;font-weight:550;line-height:1.4}.header,main,footer{max-width:1240px;margin:auto;padding-left:40px;padding-right:40px}.header{border-bottom:1px solid var(--line);align-items:center;gap:38px;min-height:92px;display:flex}.brand{letter-spacing:-1px;white-space:nowrap;align-items:center;font-size:23px;font-weight:700;display:inline-flex}.brand:hover{text-decoration:none}.brand-mark{background:var(--ink);width:29px;height:32px;color:var(--paper);border-radius:3px;place-items:center;margin-right:10px;font-size:25px;display:inline-grid}.brand-dot{color:var(--green)}.main-nav{gap:25px;margin-left:auto;font-size:13px;display:flex}.main-nav [aria-current]{color:var(--green);text-underline-offset:7px;text-decoration:underline}.languages{gap:4px;font-size:11px;display:flex}.languages a{border-radius:3px;padding:6px}.languages [aria-current]{background:var(--ink);color:#fff}.skip{z-index:10;background:var(--ink);color:#fff;padding:10px;position:absolute;top:-100px;left:20px}.skip:focus{top:10px}.hero{grid-template-columns:1.25fr 1fr;align-items:center;gap:65px;padding:74px 0 65px;display:grid}.eyebrow,.small-label{letter-spacing:1.8px;text-transform:uppercase;color:var(--green);margin-bottom:18px;font-size:11px;font-weight:650;line-height:1.4}.lead{color:var(--muted);max-width:720px;font-size:19px;line-height:1.7}.hero .lead{max-width:550px}.actions{flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px;display:flex}.text-link{color:var(--green);font-size:14px;font-weight:550}.hero-diagram{border:1px solid var(--line);background:var(--soft);text-align:center;border-radius:170px 170px 15px 15px;padding:35px 28px 17px;box-shadow:10px 14px #eaece2}.diagram-top{flex-direction:column;align-items:center;font-size:12px;display:flex}.diagram-top strong{font:76px/1.3 Georgia,serif}.hero-notes{justify-content:center;gap:40px;margin:24px 0;display:flex}.hero-notes span{font:27px Georgia,serif}.hero-notes small{color:var(--muted);margin-top:6px;font:11px system-ui;display:block}.diagram-keys{gap:2px;height:85px;display:flex}.diagram-keys i{background:var(--panel);border-radius:0 0 4px 4px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:8px;font:11px system-ui;display:flex}.diagram-keys i.lit{background:#aecab1}.hero-diagram>p{letter-spacing:2px;margin:18px 0 0;font-size:11px}.hero-diagram>p span{color:var(--muted);padding:0 10px}.section-heading{justify-content:space-between;align-items:flex-end;gap:40px;margin:0 0 26px;display:flex}.section-heading h2{max-width:460px;margin-bottom:0}.section-heading>p{max-width:400px;color:var(--muted);margin-bottom:0;font-size:14px}.curriculum,.journal{border-top:1px solid var(--line);padding:42px 0 50px}.chapter-grid{grid-template-columns:1fr 1fr;column-gap:32px;display:grid}.chapter-card{border-bottom:1px solid var(--line);align-items:center;gap:21px;padding:24px 0;display:flex}.chapter-card:hover{text-decoration:none}.chapter-card:hover h3{color:var(--green)}.chapter-number{color:#8d9a8b;align-self:flex-start;min-width:26px;font:20px Georgia,serif}.chapter-card h3{margin:0 0 6px}.chapter-card p{color:var(--muted);margin:0;font-size:13px;line-height:1.5}.arrow{color:var(--green);margin-left:auto;font-size:20px}.article-grid{grid-template-columns:repeat(3,1fr);gap:26px;display:grid}.article-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:26px}.article-card h3{font:25px/1.25 Georgia,serif}.article-card p:not(.eyebrow){color:var(--muted);font-size:14px}.approach{background:var(--ink);color:var(--paper);border-radius:12px;margin:0 0 55px;padding:40px}.approach .eyebrow{color:#a8c9ad}.approach p{max-width:650px}.approach .button{margin-top:4px}footer{border-top:1px solid var(--line);justify-content:space-between;gap:35px;padding-top:32px;padding-bottom:36px;display:flex}footer p{color:var(--muted);margin:10px 0 0;font-size:12px}footer>div:last-child{text-align:right;max-width:420px}footer a:not(.brand){font-size:13px}.page-intro{max-width:830px;padding:60px 0 28px}.course-grid,.articles-page{margin-bottom:70px}.breadcrumbs{color:var(--muted);flex-wrap:wrap;gap:12px;margin:25px 0 35px;font-size:12px;display:flex}.lesson-layout{grid-template-columns:minmax(0,1.38fr) minmax(330px,1fr);gap:55px;margin-bottom:55px;display:grid}.lesson-text h1,.article-body h1{font-size:clamp(35px,4vw,50px)}.lesson-text .lead{font-size:18px}.byline{color:var(--muted);margin-top:22px;font-size:11px}.toc{border-left:2px solid var(--line);margin:28px 0 34px;padding-left:18px;font-size:13px}.toc strong{margin-bottom:9px;font-weight:550;display:block}.toc a{color:var(--muted);padding:3px 0;display:block}.lesson-text section>h2,.article-body h2{margin-top:36px;font-size:27px}.lesson-text section>p,.article-body section>p{line-height:1.85}.formula{background:var(--soft);overflow-wrap:anywhere;border-radius:6px;margin:30px 0;padding:19px;font-family:ui-monospace,monospace;font-size:14px}.practice{background:#eee8d7;border-radius:8px;padding:24px}.practice p:last-of-type{margin-bottom:12px}.quiz{border-bottom:1px solid var(--line);margin:30px 0;padding-bottom:23px}.quiz>div{gap:7px;display:grid}.quiz button{text-align:left;padding:12px}.quiz button.correct{background:var(--soft);border-color:var(--green)}.quiz button.wrong{border-color:var(--orange)}#quiz-feedback{margin-top:14px;font-weight:550}.takeaway{border-left:3px solid var(--green);margin-bottom:28px;padding-left:22px}.takeaway h2{letter-spacing:0;text-transform:uppercase;font:650 13px system-ui!important}.takeaway p{font:22px/1.45 Georgia,serif}.lesson-next{justify-content:space-between;gap:20px;margin-top:27px;font-size:13px;display:flex}.lesson-list{border-top:1px solid var(--line);margin-top:23px;padding:15px 0}.lesson-list a{color:var(--muted);padding:7px 0;font-size:12px;display:block}.lesson-list [aria-current]{color:var(--green);font-weight:650}.article-body{max-width:750px;margin:20px auto 70px}.about-body{padding-top:55px}.related{border-top:1px solid var(--line);margin-top:35px}.related a{color:var(--green);padding:7px 0;display:block}.lab{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px;scroll-margin-top:20px}.lab h2{margin:0 0 12px;font-size:27px}.lab-head p:last-child{color:var(--muted);margin-bottom:20px;font-size:11px}.lab-head .eyebrow{margin-bottom:8px}.lab-controls{grid-template-columns:.85fr 1.4fr;gap:12px;display:grid}.lab label{color:var(--muted);font-size:12px}.lab select{margin-top:5px;font-size:13px}.small-label{color:var(--muted);letter-spacing:1px;margin:22px 0 8px;font-size:10px}.scale{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.scale span{text-align:center;border-bottom:2px solid var(--line);padding:6px 0;font-size:14px}.scale span.member{background:var(--soft);border-color:var(--green)}.scale small{color:var(--muted);font-size:10px;display:block}.chord-row{flex-wrap:wrap;gap:5px;display:flex}.chord-row button{min-width:37px;padding:6px 9px;font-size:12px}.chosen{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:21px 0 16px;display:flex}.chosen strong{font-size:15px;font-weight:550}.chosen button{font-size:12px}.piano{isolation:isolate;height:150px;display:flex;position:relative}.piano button{border-radius:0 0 4px 4px;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;padding:0 0 8px;display:flex}.piano .white{color:#273d32;background:#fff;border:1px solid #bac3b8;width:6.66667%;height:100%}.piano .black{z-index:2;color:#fff;background:#26382f;border:1px solid #26382f;width:4.26667%;height:60%;position:absolute}.piano .white.in-scale{background:#f1e7cc}.piano .white.in-chord{background:#bedcc3}.piano .black.in-scale{background:#7c6b47}.piano .black.in-chord{background:#397050}.piano button.sounding{color:#1d392b;background:#e7aa6b!important}.piano button span{font-size:10px;line-height:1.2}.piano button small{opacity:.7;font-size:9px}.legend{color:var(--muted);flex-wrap:wrap;gap:8px 12px;margin:10px 0;font-size:10px;display:flex}.legend span{align-items:center;gap:4px;display:flex}.legend i{border-radius:50%;width:7px;height:7px;display:inline-block}.chord-dot{background:#6c9b77}.scale-dot{background:#c4ae70}.outside-dot{background:#a3afa4}.readout{background:var(--paper);border-radius:5px;min-height:65px;margin:14px 0;padding:11px;font-size:12px}.check{align-items:center;gap:6px;display:flex}.check input{accent-color:var(--green)}.audio-controls{flex-wrap:wrap;align-items:center;gap:7px;margin-top:20px;display:flex}.audio-controls button{padding:7px 9px;font-size:11px}.audio-controls label{align-items:center;gap:5px;font-size:10px;display:flex}.audio-controls input{width:65px;accent-color:var(--green)}.micro{color:var(--muted);margin-top:13px;font-size:11px;line-height:1.6}.experiment-section{border-top:1px solid var(--line);margin-top:19px;padding-top:15px}.experiment-section p{font-size:12px}.experiment-section .row{flex-wrap:wrap;gap:5px;margin:8px 0;display:flex}.experiment-section button{padding:7px 10px;font-size:12px}.voice-info{min-height:24px;color:var(--green)}.circle{border:1px dashed #c6d0c0;border-radius:50%;width:240px;height:240px;margin:25px auto;position:relative}.circle:before{content:"↻ +7";color:var(--muted);place-items:center;font-size:18px;display:grid;position:absolute;inset:0}.circle button{z-index:1;border-radius:50%;width:38px;height:38px;padding:0;position:absolute;transform:translate(-50%,-50%)}.circle-detail{min-height:40px;font-size:13px!important}.blues-bars{grid-template-columns:repeat(4,1fr);gap:5px;margin:13px 0;display:grid}.blues-bars span{background:var(--paper);text-align:center;padding:5px;font-size:12px}.blues-bars span.playing{background:var(--green);color:#fff}.standalone-lab{grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr);gap:40px;margin-bottom:60px;display:grid}.standalone-lab .lab{padding:30px}.standalone-lab .piano{height:200px}.lab-reading a{border-bottom:1px solid var(--line);padding:14px 0;font-size:14px;display:block}.lab-reading h2{font-size:24px}.readout,.voice-info{overflow-wrap:anywhere}@media (min-width:1100px){.lesson-layout aside{align-self:start}}@media (max-width:1000px){.header{gap:20px}.main-nav{gap:15px;font-size:12px}.hero{gap:35px}.lesson-layout{grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);gap:28px}.lab{padding:17px}.article-grid{gap:14px}.article-card{padding:20px}}@media (max-width:780px){.header,main,footer{padding-left:23px;padding-right:23px}.header{flex-wrap:wrap;gap:14px;padding-top:18px;padding-bottom:16px}.brand{font-size:21px}.languages{margin-left:auto}.main-nav{order:3;justify-content:space-between;width:100%;margin-left:0}.hero{grid-template-columns:1fr;padding:45px 0}.hero-diagram{width:100%;max-width:400px;margin:0 auto}.hero h1{max-width:580px}.hero .lead{max-width:100%}.chapter-grid{grid-template-columns:1fr}.section-heading{flex-direction:column;align-items:flex-start;gap:15px}.section-heading>p{max-width:100%}.article-grid,.lesson-layout{grid-template-columns:1fr}.lesson-layout aside{order:2}.lab{padding:22px}.lab .piano{height:180px}.lesson-list{display:none}.standalone-lab{grid-template-columns:1fr}.article-body{margin-top:30px}.approach{padding:28px}.page-intro{padding-top:40px}.lesson-text h1{font-size:39px}footer{flex-direction:column;gap:15px}footer>div:last-child{text-align:left}.article-card h3{font-size:25px}}@media (max-width:400px){.header,main,footer{padding-left:17px;padding-right:17px}.lab,.standalone-lab .lab{padding:14px}.lab-controls{grid-template-columns:1fr}.piano button span{font-size:9px}.main-nav{font-size:11px}.languages a{padding:4px}.hero h1{font-size:37px}.lesson-text h1{font-size:34px}.circle{width:215px;height:215px}.chapter-card{gap:13px}.hero-diagram{padding:25px 18px 16px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media print{.header,footer,.lab,.quiz,.lesson-list,#complete,.lesson-next{display:none}.lesson-layout{display:block}.lesson-text,.article-body{max-width:100%}body{color:#000;background:#fff}.lead,a{color:#000}}.quiz [role=status]{margin-top:14px;font-weight:550}.hero-diagram{background:linear-gradient(145deg,#edf1e2,#dce8d6)}.chapter-card{transition:background .15s}.chapter-card:hover{background:#edf0e7}.article-card{transition:transform .15s,border-color .15s}.article-card:hover{border-color:#a3b99e;transform:translateY(-3px)}.lesson-text section{scroll-margin-top:25px}.lab{box-shadow:0 8px 30px #213d340a}@media (prefers-reduced-motion:reduce){.article-card,.chapter-card{transition:none}.article-card:hover{transform:none}}