/* ---------- Theme (light / dark) ---------- */
:root{
  --bg:#ffffff; --fg:#111827; --muted:#6b7280;
  --surface:#f8fafc; --card:#ffffff; --border:#e5e7eb;
  --accent:#8b5cf6; --accent2:#ec4899; --ring:#c4b5fd;
  --shadow:0 10px 20px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020; --fg:#e5e7eb; --muted:#9ca3af;
    --surface:#0f1630; --card:#121831; --border:#1f2847;
    --accent:#8b5cf6; --accent2:#ec4899; --ring:#7c3aed;
    --shadow:0 20px 40px rgba(0,0,0,.35);
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, #f5f3ff 0%, transparent 50%),
    radial-gradient(1200px 600px at 100% 0%, #fdf2f8 0%, transparent 50%),
    var(--bg);
  color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  line-height:1.6;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:3px solid var(--ring); outline-offset:3px; border-radius:10px}

.container{max-width:960px;margin:0 auto;padding:24px}

/* ---------- Header / Nav ---------- */
.header{
  padding:72px 24px 32px;
  background:linear-gradient(135deg, rgba(139,92,246,.12), rgba(236,72,153,.10));
  border-bottom:1px solid var(--border);
}
.header .title{font-size:40px;font-weight:900;margin:0;letter-spacing:.2px}
.header .subtitle{color:var(--muted);margin:10px 0 0}
.nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.nav a{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px;border-radius:999px;
  background:var(--card); color:var(--fg);
  border:1px solid var(--border); box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nav a:hover{transform:translateY(-1px)}

/* ---------- Sections / Cards ---------- */
.section{padding:24px 0;border-top:1px solid var(--border)}
.h2{font-size:22px;margin:0 0 12px}
.card{
  padding:18px;border:1px solid var(--border);
  border-radius:18px;background:var(--card);
  box-shadow:var(--shadow)
}
.badge{
  display:inline-block;padding:2px 8px;border-radius:999px;
  background:linear-gradient(90deg,rgba(139,92,246,.18),rgba(236,72,153,.18));
  color:var(--fg); font-size:12px; margin-left:8px; font-weight:700
}

/* ---------- Typography helpers ---------- */
.small{font-size:14px;color:var(--muted)}
code,kbd{
  background:rgba(125,125,125,.12); padding:2px 6px; border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
}

/* ---------- Footer ---------- */
.footer{padding:36px 24px;color:var(--muted)}