:root {
  --bg: #03030a;
  --fg: #ffffff;
  --accent1: #8a05ff;
  --accent2: #d64fff;
  --card: #11111a;
  --muted: #a0a0b3;
  --border: #1d1d29;
}
*{box-sizing:border-box}
body {
  margin:0; font-family: 'Chakra Petch', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.6;
}
header, footer {max-width:900px;margin:24px auto;padding:0 16px}
h1 {font-size:1.9rem;margin:0 0 8px;color:var(--accent1);letter-spacing:.2px}
.sub {color:var(--muted);font-size:.95rem}
.nav {display:flex;gap:8px;margin-top:12px}
.tab {display:inline-block;padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:#fff;text-decoration:none;background:#0f0f18}
.tab.active {background:linear-gradient(90deg,var(--accent1),var(--accent2));border-color:transparent}
.grid {max-width:900px;margin:16px auto 48px;padding:0 16px;display:grid;gap:16px}
.card {background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.card h2 {margin:0 0 8px;font-size:1.15rem}
.card a {color:var(--accent2);text-decoration:none}
.card a:hover {text-decoration:underline}
.meta {font-size:.85rem;color:var(--muted)}
.badge {font-size:.72rem;background:var(--accent1);padding:2px 8px;border-radius:999px;margin-left:8px;color:#fff}
footer {color:var(--muted);font-size:.9rem;text-align:center}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent2);display:inline-block;margin-right:8px}
.placeholder{display:grid;place-items:center;height:50vh}
code{background:#191926;border:1px solid #24243a;border-radius:6px;padding:2px 6px}