:root{--bg:#fff;--fg:#1c1c1e;--muted:#6b6b70;--card:#f4f4f6;--accent:#2f80ed}
@media (prefers-color-scheme:dark){:root{--bg:#111113;--fg:#f2f2f4;--muted:#9a9aa0;--card:#1c1c1f;--accent:#6aa9ff}}
*{box-sizing:border-box}
body{margin:0;font:1.0625rem/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--fg)}
header{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;align-items:center;max-width:60rem;margin:0 auto;padding:1rem}
.brand{font-weight:700;font-size:1.25rem;color:inherit;text-decoration:none}
.langs{font-size:.9rem;color:var(--muted)}
.langs a[aria-current]{font-weight:700;color:var(--fg)}
a{color:var(--accent)}
main{max-width:60rem;margin:0 auto;padding:1rem 1rem 4rem}
h1{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.2;margin:1rem 0 2rem}
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{background:var(--card);border-radius:1.25rem;padding:1.5rem;display:flex;flex-direction:column}
.card h2{margin:1rem 0 .25rem;font-size:1.3rem}
.card p{margin:.25rem 0}
.icon{width:4rem;height:4rem;border-radius:22%;display:block}
.actions{margin-top:auto!important;padding-top:1rem;display:flex;flex-direction:column;align-items:stretch;gap:.5rem;min-height:5.5rem}
.button{background:var(--accent);color:#fff;text-decoration:none;padding:.5rem .75rem;border-radius:.6rem;font-weight:600;font-size:.9rem;white-space:nowrap;text-align:center}
.link{font-size:.9rem;text-align:center}
.muted{color:var(--muted)}
main h2{margin-top:2rem}