:root { --fg:#111; --muted:#555; --bg:#fff; --link:#0a58ca; --border:#eee; }
*{box-sizing:border-box}
body{margin:0;padding:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:920px;margin:0 auto;padding:24px}
header,footer{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fafafa}
nav a{margin-right:16px}
.muted{color:var(--muted)}
.tag{font-size:12px;padding:2px 8px;border:1px solid var(--border);border-radius:9999px;margin-right:6px}
.hero h1{margin:.2em 0}
.hero--profile{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero--profile .hero-text{flex:1 1 260px}
.hero-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.grid{display:grid;gap:16px}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border:1px solid var(--border);border-radius:12px;padding:16px;background:#fff}
pre,code{background:#f6f8fa;border:1px solid #eee;border-radius:6px;padding:2px 6px}
.repro{border-left:4px solid #ddd;padding-left:12px;margin:12px 0}