:root{--accent:#0f766e;--accent-soft:#ccfbf1;--chord:#0f766e;--bg:#f4f8f7;--line:#dbe7e4}
@media (prefers-color-scheme: dark){:root{--accent:#2dd4bf;--accent-soft:#123a36;--chord:#2dd4bf;--bg:#111615;--line:#26322f}}
.brand{display:flex;align-items:center;gap:8px;font-size:1.15rem}
.brand svg{width:28px;height:28px;flex:none}
.hero{padding:26px 0 6px}
.hero h1{margin:0 0 6px;font-size:clamp(1.9rem,5vw,2.8rem)}
.hero .tag{font-weight:700;color:var(--accent);font-size:clamp(1.05rem,2.6vw,1.3rem);margin:0 0 8px}
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 4px}
@media (max-width:820px){.why{grid-template-columns:minmax(0,1fr)}}
.why div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.why b{display:block;margin-bottom:4px;font-size:1.02rem}
.why p{margin:0;color:var(--muted);font-size:.93rem}
.prose h2{margin-top:28px}
.prose p,.prose li{color:var(--ink)}
.src{font-size:.88rem;color:var(--muted)}
.src a{color:var(--accent)}
footer a{color:inherit}