:root { color-scheme: light dark; --accent:#087cff; --panel:rgba(127,127,127,.10); }
* { box-sizing:border-box; }
body { margin:0; font:17px/1.58 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { max-width:880px; margin:auto; padding:64px 24px 96px; }
nav { display:flex; gap:22px; flex-wrap:wrap; margin-bottom:64px; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:clamp(42px,8vw,72px); line-height:1.02; margin:.2em 0; letter-spacing:-.045em; }
h2 { margin-top:2.2em; } .lead { font-size:23px; max-width:720px; color:#777; }
.badge { display:inline-block; padding:6px 12px; border-radius:99px; background:var(--panel); font-weight:650; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:34px 0; }
.card { padding:24px; border-radius:22px; background:var(--panel); }
.card h3 { margin-top:0; } footer { margin-top:72px; color:#777; font-size:14px; }
code { padding:2px 6px; border-radius:6px; background:var(--panel); }