:root { --bg:#f6f4ef; --ink:#1f2328; --muted:#667085; --panel:#fff; --line:#ded7c9; --accent:#7a5cff; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height:1.6; }
header, main, footer { width:min(68rem, calc(100% - 2rem)); margin:0 auto; }
header { padding:2rem 0 1rem; }
nav { display:flex; flex-wrap:wrap; gap:.7rem; }
nav a { color:var(--ink); text-decoration:none; border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:.35rem .7rem; }
.hero, article, .card { background:var(--panel); border:1px solid var(--line); border-radius:1rem; padding:clamp(1rem,3vw,2rem); margin:1rem 0; }
.hero h1 { font-size:clamp(2rem,7vw,5rem); line-height:1; margin:.2rem 0 1rem; }
.kicker { color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1rem; }
.meta { color:var(--muted); }
code { background:#ece8ff; padding:.1rem .25rem; border-radius:.25rem; }
footer { padding:3rem 0; color:var(--muted); }