:root{
  --bg:#0e0e12; --fg:#f3f3f6; --muted:#b8b8c2; --accent:#8a7bff;
  --card:#161620; --line:#262637; --radius:14px; --max:980px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:24px}
.nav{display:flex;gap:18px;align-items:center;justify-content:space-between;margin:12px 0 28px}
.nav a{color:var(--muted)}
.brand{font-weight:700;letter-spacing:.5px;color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card img{display:block;width:100%;height:auto}
.card .pad{padding:14px}
.badge{display:inline-block;background:#1f1f2e;border:1px solid var(--line);padding:2px 8px;border-radius:999px;color:var(--muted);font-size:.8rem}
.footer{margin:48px 0 12px;color:var(--muted);font-size:.9rem}
.hero{padding:18px 0 28px;border-bottom:1px solid var(--line);margin-bottom:28px}
.hero h1{margin:0 0 6px;font-size:2rem}
.hero p{margin:0;color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.btn{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#1b1b28;color:var(--fg)}
.btn:hover{background:#222237}
.prose h2,.prose h3{margin-top:1.2em}
.prose p{color:#d9d9e2}
img.round{border-radius:12px;border:1px solid var(--line)}