:root{--bg:#fffaf0;--ink:#2d3142;--muted:#5c6378;--accent:#2a7de1;--sun:#ffd166;--leaf:#6cc070;--card:#ffffff}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Nunito","Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;font-size:18px;line-height:1.65}
a{color:var(--accent)}
.hero{text-align:center;padding:3.2rem 1.5rem 2.4rem;background:linear-gradient(180deg,#bde0fe 0%,#d8f3dc 70%,var(--bg) 100%);border-bottom:6px solid var(--sun)}
.hero.small{padding:2.4rem 1.5rem 1.8rem}
h1,h2,h3{font-family:"Baloo 2","Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#1d3557}
h1{font-size:clamp(1.9rem,5.5vw,3.2rem);margin:.2em 0}
h2{font-size:1.3rem;margin-top:2rem}
.sub{font-size:1.15rem;color:#344966;max-width:42rem;margin:.4rem auto 0}
main{max-width:50rem;margin:0 auto;padding:1rem 1.5rem 3rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1.5rem 0}
.card{border:2px solid #e3ecf7;border-radius:18px;padding:1.2rem;background:var(--card);box-shadow:0 3px 0 #e3ecf7}
.card h3{margin:.1rem 0 .4rem;font-size:1.15rem}
.muted{color:var(--muted)}
nav{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:1.1rem;font-weight:700}
nav a{text-decoration:none;background:#fff;padding:.35rem .9rem;border-radius:999px;border:2px solid #cfe1f7}
code{background:#eef3fb;padding:.05rem .35rem;border-radius:6px;font-size:.92em}
footer{border-top:2px dashed #e3d5b5;text-align:center;padding:2rem 1rem;color:var(--muted);font-size:.95rem}