:root{--ink:#111;--muted:#666;--surface:#fff;--line:#e6e3ee;--accent:#5b3df5;--wash:#f7f6fb}
@media (prefers-color-scheme:dark){:root{--ink:#eee;--muted:#9a96a8;--surface:#0b0a12;--line:#26232f;--accent:#8b74ff;--wash:#141220}}
*{box-sizing:border-box}body{margin:0;font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--surface)}
main{max-width:880px;margin:0 auto;padding:48px 20px}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:2rem;line-height:1.2;margin:0 0 .5rem}h2{font-size:1.15rem;margin:2rem 0 .75rem}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:1.5rem}.crumb a{color:var(--muted)}
.badge{display:inline-block;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--line);color:var(--muted);margin-bottom:1rem}
.badge.native{border-color:var(--accent);color:var(--accent)}
.lede{color:var(--muted);max-width:60ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;padding:0;list-style:none}
.grid li{border:1px solid var(--line);border-radius:10px;background:var(--wash)}
.grid a{display:block;padding:.6rem .85rem;color:var(--ink)}
.cta{display:inline-block;margin-top:2rem;padding:.7rem 1.3rem;border-radius:10px;background:var(--accent);color:#fff;font-weight:600}
.cta:hover{text-decoration:none;opacity:.92}
footer{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}