:root{
  --ink:#13211b;--muted:#5d6b64;--paper:#fffdf7;--panel:#f4f0e6;--line:#ded8c8;
  --green:#24513d;--green2:#173a2b;--gold:#d9a441;--cream:#fff8e8;--danger:#7b2e2e;
  --max:1180px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.68}
a{color:var(--green);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%}
.skip{position:absolute;left:-9999px;top:auto}.skip:focus{left:12px;top:12px;background:#fff;padding:.7rem 1rem;z-index:1000;border:2px solid var(--ink)}
.topnote{background:var(--green2);color:white;font-size:.87rem;text-align:center;padding:.42rem 1rem}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,247,.96);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--max);margin:auto;display:flex;align-items:center;gap:1.1rem;padding:.78rem 1rem}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:850;font-size:1.25rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo{width:38px;height:38px;border-radius:10px;background:var(--ink);display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:7px;align-items:end}
.logo i{display:block;background:white;border-radius:1px;height:100%}.logo i:nth-child(2),.logo i:nth-child(4){height:62%;background:var(--gold)}
.nav{display:flex;gap:.9rem;align-items:center;margin-left:auto}
.nav a{text-decoration:none;color:var(--ink);font-weight:650;font-size:.94rem}
.header-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--gold);color:#1d1b15!important;font-weight:850;text-decoration:none!important;border-radius:9px;padding:.68rem .95rem;border:1px solid #b68120;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.header-cta:hover,.button:hover{filter:brightness(.97)}
.menu{display:none;border:1px solid var(--line);background:white;border-radius:8px;padding:.58rem .75rem;font-weight:800}
.hero{max-width:var(--max);margin:0 auto;padding:4rem 1rem 2.7rem;display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center}
.eyebrow{font-weight:850;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--green)}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em}h1{font-size:clamp(2.35rem,5vw,4.8rem);margin:.3rem 0 1rem}h2{font-size:clamp(1.55rem,3vw,2.15rem);margin:2.3rem 0 .75rem}h3{font-size:1.12rem;margin:1.5rem 0 .45rem}
.lede{font-size:1.18rem;color:#34443b;max-width:760px}
.piano-graphic{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:1.3rem;min-height:280px;display:flex;flex-direction:column;justify-content:center}
.keys{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;height:170px;align-items:start}.key{background:white;border:1px solid #cfc8b8;border-radius:0 0 7px 7px;height:100%}.key.black{background:var(--ink);height:60%;margin-left:-40%;margin-right:-40%;z-index:2;border:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.35rem}.ghost{background:transparent;color:var(--green)!important;border-color:var(--green)}
.wrap{max-width:var(--max);margin:auto;padding:0 1rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.card{border:1px solid var(--line);background:white;border-radius:14px;padding:1.2rem}.card h3{margin-top:.2rem}.card p{color:var(--muted)}.card a.stretched{font-weight:800;text-decoration:none}
.section{padding:2.6rem 0}.section.tint{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.article-shell{max-width:var(--max);margin:auto;padding:1.5rem 1rem 4rem;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:2.3rem}
.breadcrumbs{font-size:.87rem;color:var(--muted);margin-bottom:1.5rem}.breadcrumbs a{color:var(--muted)}
.article h1{font-size:clamp(2.2rem,5vw,4rem);max-width:900px}.article p,.article li{font-size:1.05rem}.article ul{padding-left:1.25rem}
.callout{border-left:5px solid var(--gold);background:var(--cream);padding:1rem 1.1rem;border-radius:8px;margin:1.5rem 0}
.cta-box{background:var(--green2);color:white;border-radius:16px;padding:1.4rem;margin:2rem 0}.cta-box h2,.cta-box h3{margin-top:0;color:white}.cta-box p{color:#edf3ef}.cta-box .fine{font-size:.8rem;opacity:.88}
.sidebar{position:relative}.sticky{position:sticky;top:92px}.side-card{border:1px solid var(--line);background:white;border-radius:14px;padding:1.15rem;margin-bottom:1rem}.side-card h2,.side-card h3{margin-top:0}.side-card ul{padding-left:1rem;margin:.5rem 0}.side-card li{margin:.4rem 0}
.disclosure{font-size:.88rem;color:var(--muted);border:1px solid var(--line);background:#faf8f1;border-radius:10px;padding:.8rem 1rem}
.related{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}.related a{display:block;padding:.85rem;border:1px solid var(--line);border-radius:10px;text-decoration:none;font-weight:750;background:white}
.compare{width:100%;border-collapse:collapse;margin:1.2rem 0}.compare th,.compare td{border:1px solid var(--line);padding:.75rem;text-align:left;vertical-align:top}.compare th{background:var(--panel)}
footer{background:var(--ink);color:#eaf0ec;padding:2.4rem 1rem;margin-top:2rem}footer .foot{max-width:var(--max);margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}footer a{color:#fff}footer p{color:#c8d2cc}
.mobile-cta{display:none}
.small{font-size:.88rem;color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
@media(max-width:900px){
 .nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--paper);padding:1rem;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}
 .nav.open{display:flex}.nav .header-cta{display:none}.menu{display:block;margin-left:auto}
 .hero{grid-template-columns:1fr;padding-top:2.5rem}.piano-graphic{min-height:190px}.keys{height:120px}
 .grid{grid-template-columns:1fr 1fr}.article-shell{grid-template-columns:1fr}.sidebar{display:none}
 footer .foot{grid-template-columns:1fr 1fr}
 .mobile-cta{display:block;position:sticky;bottom:0;z-index:45;background:rgba(23,58,43,.97);padding:.55rem 1rem;border-top:1px solid rgba(255,255,255,.18);text-align:center}.mobile-cta a{width:min(100%,520px)}
}
@media(max-width:580px){.grid,.related,footer .foot{grid-template-columns:1fr}.topnote{font-size:.78rem}.header-inner{gap:.55rem}.brand{font-size:1.05rem}.logo{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}