:root{--ink:#18312e;--muted:#53706b;--sage:#dfeae3;--line:#cbd8d0;--gold:#cf9652;--paper:#f8f8f3;--white:#fff;--brand:#1d5e50;--dark:#113d36}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font:16.5px/1.72 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:#17604f;text-underline-offset:3px}a:hover{color:#0b3f35}h1,h2,h3{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.025em;line-height:1.2;color:#163f36}h1{font-size:clamp(2.25rem,4vw,4.2rem);margin:.3em 0 .35em}h2{font-size:1.8rem;margin:2.2rem 0 .7rem}h3{font-size:1.3rem;margin:1.7rem 0 .6rem}p{margin:0 0 1.2em}ul,ol{padding-left:1.6em}li{margin:.35em 0}strong{font-weight:720}.shell{max-width:1200px;margin:0 auto;padding:0 25px}.skip{position:absolute;top:-100px;left:12px;background:white;padding:10px;z-index:999}.skip:focus{top:10px}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #d6a44e;outline-offset:3px}.top{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:10}.top-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font-weight:800;color:var(--ink);line-height:1.2;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--brand);color:white;font-size:22px}.brand small{font-weight:500;display:block;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-size:9px}.top nav{display:flex;align-items:center;gap:15px}.top nav a{font-size:13px;text-decoration:none;font-weight:670}.nav-toggle{display:none;border:1px solid var(--line);background:white;color:var(--ink);padding:9px 12px;border-radius:8px}.button,button{display:inline-flex;gap:9px;align-items:center;justify-content:center;text-align:center;border-radius:9px;border:0;padding:11px 17px;background:var(--brand);color:white;text-decoration:none;font:700 14px/1.45 inherit;cursor:pointer}.button:hover,button:hover{background:#133f36;color:white}.button.secondary,button.secondary{background:#e1eee8;color:#124235;border:1px solid #9fbfb1}.button.secondary:hover{background:#cbe2d6;color:#124235}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:#876f4a;font-weight:800}.hero{padding:65px 0 55px;background:radial-gradient(circle at 85% 20%,#e0e9db 0,transparent 38%),linear-gradient(140deg,#fafbf6,#ebf1ea);border-bottom:1px solid var(--line)}.hero p.lead{max-width:710px;font-size:1.16rem;line-height:1.7;color:#38524c}.pill{background:#f4e8d9;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700;color:#735533;display:inline-block}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.home-intro{max-width:700px}.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 36px}.panel{background:white;border:1px solid #dce6db;border-radius:14px;padding:23px}.panel h3{margin:0 0 10px}.panel a{text-decoration:none;font-weight:750}.panel p{color:var(--muted);font-size:.94rem}.panel .kicker{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#997144;margin:0 0 9px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}.section-head h2{margin-bottom:0}.resource-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.resource-row a{background:white;border:1px solid #e0e9e3;border-radius:9px;padding:12px 15px;text-decoration:none;font-size:14px;line-height:1.4}.resource-row a:hover{border-color:#7ba898}.page-shell{display:grid;grid-template-columns:minmax(0,800px) 280px;gap:52px;align-items:start;padding-top:42px;padding-bottom:70px}.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:12px}.breadcrumbs a{color:var(--muted)}.article header{border-bottom:1px solid var(--line);padding:4px 0 26px;margin-bottom:32px}.article h1{font-size:clamp(2.15rem,3vw,3.5rem)}.article .intro{font-size:1.1rem;color:#395b50;max-width:760px}.article-body{min-width:0;overflow-wrap:anywhere}.article-body h2:first-of-type{margin-top:1.5rem}.article-body table{border-collapse:collapse;font-size:14px;line-height:1.55;width:100%;margin:15px 0 28px;background:#fff}.article-body th,.article-body td{border:1px solid #d8e4dc;padding:10px;vertical-align:top;text-align:left}.article-body th{background:#e7efe9;font-weight:750}.article-body table{display:block;overflow-x:auto}.article-body blockquote{border-left:3px solid #cfa672;padding-left:18px}.article-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--muted);font-size:12px}.aside{position:sticky;top:20px}.aside .panel{margin:0 0 18px}.aside h3{font-size:1.1rem}.aside a{display:block;font-size:14px;margin:9px 0}.disclosure{background:#f7f1e5;border:1px solid #ead6b9;border-radius:10px;padding:12px 14px;color:#5f4e39;font-size:13px;line-height:1.55;margin:18px 0}.cta-block{padding:22px;border-radius:13px;background:#e2eee4;border:1px solid #c0d8c9;margin:24px 0 32px}.cta-block p{margin:4px 0 13px}.cta-block h2{font-size:1.45rem;margin:0}.small{color:var(--muted);font-size:13px}.sources{border-top:1px solid var(--line);margin-top:35px;padding-top:8px}.sources ul{font-size:13px}.related{margin-top:32px;border-top:1px solid var(--line)}.related a{display:block;margin:9px 0}.footer{background:#133e36;color:#d9e9df;padding:40px 0}.footer a{color:#d9e9df}.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px}.footer small{display:block;color:#b6d1c6}.footer nav{display:flex;flex-wrap:wrap;gap:16px;font-size:13px}.tool-panel{background:white;border:2px solid #b8d4c5;border-radius:13px;padding:18px;margin:25px 0}.tool-panel h2{margin:0 0 16px}.tool-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tool-controls label{display:flex;flex-direction:column;font-size:13px;font-weight:700;gap:5px}.tool-controls input,.tool-controls select{border:1px solid #a8c0b4;border-radius:7px;padding:10px;background:white;color:var(--ink);font:inherit}.tool-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.error{color:#a52828;font-weight:700}.practice-card{border:1px solid #93b2a6;border-radius:10px;padding:14px;break-inside:avoid}.practice-card table{font-size:12px}.keyboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.keyboard-grid img{max-width:100%;height:auto}.article-body figure{margin:22px 0}.article-body figure>img{max-width:100%;height:auto}.article-body figcaption{font-size:12px;color:#526e63;margin:6px 0 0}.chart-preview{padding:20px;background:white;border:1px solid #d3e2d7;border-radius:10px}.piano-diagram{display:flex;max-width:360px;min-height:140px;justify-content:center}.piano-diagram span{display:flex;align-items:flex-end;justify-content:center;flex:1;border:2px solid #1a2926;border-radius:0 0 5px 5px;padding:8px;font-weight:800;background:linear-gradient(white,#ecf0eb);position:relative}.piano-diagram span:not(:last-child){border-right:none}.piano-diagram span:nth-child(1):after,.piano-diagram span:nth-child(2):after,.piano-diagram span:nth-child(4):after,.piano-diagram span:nth-child(5):after,.piano-diagram span:nth-child(6):after{content:"";position:absolute;width:45%;height:60%;right:-22.5%;top:0;background:#22352f;z-index:1;border-radius:0 0 3px 3px}.download-action{margin:14px 0}.trust-content{max-width:790px;padding:44px 25px 80px}details{background:white;border:1px solid var(--line);border-radius:8px;padding:11px 16px;margin:20px 0}summary{cursor:pointer;font-weight:750}body>main{min-height:50vh}
@media(max-width:950px){.page-shell{grid-template-columns:1fr}.aside{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.top nav{gap:10px}}
@media(max-width:700px){.shell{padding-left:17px;padding-right:17px}.top-inner{min-height:65px}.top nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;background:white;padding:18px;box-shadow:0 12px 19px #0002}.top nav.open{display:flex}.top nav a{padding:10px 6px}.nav-toggle{display:inline-flex}.hero{padding:43px 0}.home-grid{grid-template-columns:1fr}.resource-row{grid-template-columns:1fr}.aside{grid-template-columns:1fr}.page-shell{gap:25px;padding-top:22px}.tool-controls{grid-template-columns:1fr}.keyboard-grid{grid-template-columns:1fr}.article-body th,.article-body td{padding:7px}.footer-inner{flex-direction:column}h2{font-size:1.5rem}}
@media print{.top,.footer,.aside,.hero-actions,.tool-actions,.breadcrumbs,.related,.sources,.cta-block{display:none!important}body{background:white;color:black;font-size:12px}body.print-card .article header,body.print-card .article-body > :not(#practice-planner){display:none!important}body.print-card .article-body #practice-planner > :not(#planner-result){display:none!important}body.print-card .article-body #practice-planner{margin:0;padding:0}.page-shell{display:block;padding:0}.article header{margin-bottom:10px;padding:0}.article h1{font-size:23px}.tool-panel{border:0;padding:0}.tool-controls{display:none}.practice-card{padding:0;border:0}.article-body table{break-inside:avoid;font-size:10px}.article-body h2{font-size:17px;break-after:avoid}#planner-result{break-inside:avoid} @page{size:auto;margin:12mm}}
@media(max-width:370px){.brand{font-size:13px;white-space:normal;min-width:0;line-height:1.05}.brand small{font-size:7px}.brand-mark{flex-shrink:0;width:31px;height:31px;font-size:16px}.top-inner{gap:6px}.nav-toggle{font-size:12px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}