:root{
  --bg:#0f1115;
  --panel:#151924;
  --muted:#8892a6;
  --text:#e6eaf2;
  --accent:#7aa2f7;
  --accent-2:#9ece6a;
  --danger:#f7768e;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9;text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:24px}
.nav{
  position:sticky; top:0; z-index:10;
  background:rgba(15,17,21,.85); backdrop-filter: blur(8px);
  border-bottom:1px solid #202636;
}
.nav-inner{display:flex; align-items:center; gap:16px; padding:12px 24px}
.tabs{display:flex; gap:10px; margin-left:auto; flex-wrap:wrap}
.tabs a{
  padding:8px 14px; border-radius:999px; background:#0d1018; border:1px solid #202636;
  transition:.2s all;
}
.tabs a.active, .tabs a[aria-current="page"]{
  background:linear-gradient(135deg, rgba(122,162,247,.15), rgba(158,206,106,.15));
  border-color:#2d3650;
}
.hero{
  padding:56px 0 24px;
}
.card-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px}
.card{
  background:var(--panel); border:1px solid #252c3f; border-radius:16px; padding:18px; box-shadow: var(--shadow);
}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}
.footer{border-top:1px solid #202636; margin-top:40px; padding:24px; text-align:center; color:var(--muted)}
.badge{display:inline-block; padding:4px 10px; border:1px solid #2b3246; border-radius:999px; background:#0d1018; color:var(--muted); font-size:12px}
.list{margin:0; padding-left:18px}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     background:#0d1018; border:1px solid #272e42; padding:2px 6px; border-radius:6px; color:#cbd5e1;}
.figure{background:var(--panel); border:1px solid #252c3f; border-radius:16px; padding:14px; margin:20px 0}