:root{
  --background: #0b0b0c;
  --surface: #101012;
  --card: #121216;
  --border: #25252a;
  --brand: #5b86ff;
  --brand-border: #4a6fe0;
  --foreground: #e9e9ee;
  --muted-foreground: #a4a7b0;
}

*{ box-sizing: border-box; }
html, body{ height:100% }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 10% -10%, rgba(70,80,255,.08), transparent 60%), var(--background);
  color: var(--foreground);
}

.container{ width:min(1100px, 92vw); margin-inline:auto }

.site-header{ position:sticky; top:0; z-index:40; backdrop-filter: blur(6px); background: color-mix(in oklab, var(--background) 85%, transparent); border-bottom:1px solid var(--border) }
.header-grid{ display:grid; grid-template-columns: 1fr auto; align-items:center; padding:.8rem 0 }
.brand{ display:inline-flex; align-items:center; gap:.5rem; color:var(--foreground); text-decoration:none; font-weight:700; letter-spacing:.02em }
.brand-dot{ width:.75rem; height:.75rem; border-radius:999px; background:var(--brand); display:inline-block; box-shadow: 0 0 24px var(--brand) }
.nav a{ color:var(--muted-foreground); text-decoration:none; margin-left:1rem }
.nav .pill{ padding:.45rem .7rem; border:1px solid var(--border); border-radius:.8rem }
.nav a:hover{ color:var(--foreground) }

.section{ padding: 3rem 0 }
.section-title{ font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1rem }
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem }
.card{
  border:1px solid var(--border); border-radius: 1rem; padding: 1rem; background: linear-gradient(180deg, var(--card), var(--surface));
}

.deck-grid{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .8rem }
.deck-card{ border:1px dashed var(--border); border-radius:.9rem; padding: .9rem; color: var(--muted-foreground) }
.steps{ display:grid; gap:.5rem; padding-left: 1rem }
.button{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:.9rem; background:var(--brand); color:white; text-decoration:none; border:1px solid var(--brand-border); font-weight:600 }

/* Utilities */
code{ background: #0f1216; border:1px solid #1e1f25; padding:.15rem .35rem; border-radius:.35rem }

/* Responsive */
@media (max-width: 900px){
  .cards{ grid-template-columns: 1fr }
  .deck-grid{ grid-template-columns: repeat(2, 1fr) }
}