*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fafafa;--surface:#fff;--text:#1a1a2e;--muted:#64748b;
  --accent:#6366f1;--accent-light:#eef2ff;--border:#e2e8f0;
  --code-bg:#f1f5f9;--radius:8px;--max-w:860px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0f172a;--surface:#1e293b;--text:#e2e8f0;--muted:#94a3b8;
    --accent:#818cf8;--accent-light:#1e1b4b;--border:#334155;
    --code-bg:#0f172a;
  }
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.7}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* layout */
.container{max-width:var(--max-w);margin:0 auto;padding:0 1.25rem}
header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
header .container{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
.logo span{color:var(--accent)}
nav{display:flex;gap:1.25rem;font-size:.9rem}
nav a{color:var(--muted);font-weight:500}
nav a:hover,nav a.active{color:var(--accent);text-decoration:none}

/* hero */
.hero{padding:3.5rem 0 2.5rem;text-align:center}
.hero-logo{width:120px;height:120px;border-radius:50%;margin-bottom:1.25rem}
.hero h1{font-size:2.25rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.75rem}
.hero p{color:var(--muted);font-size:1.1rem;max-width:600px;margin:0 auto}
.badge{display:inline-block;font-size:.75rem;font-weight:600;color:var(--accent);background:var(--accent-light);padding:.2rem .65rem;border-radius:999px;margin-bottom:1rem}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:2rem 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:box-shadow .15s}
.card:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)}
.card h3{font-size:1rem;margin-bottom:.35rem}
.card p{color:var(--muted);font-size:.88rem}

/* content pages */
.page{padding:2.5rem 0 4rem}
.page h1{font-size:1.75rem;font-weight:800;margin-bottom:.5rem}
.page h2{font-size:1.25rem;font-weight:700;margin:2rem 0 .5rem;padding-top:.5rem;border-top:1px solid var(--border)}
.page h3{font-size:1.05rem;font-weight:600;margin:1.25rem 0 .4rem}
.page p,.page li{color:var(--text);font-size:.95rem}
.page ul,.page ol{padding-left:1.25rem;margin:.5rem 0}
.page li{margin-bottom:.3rem}

/* code */
code{font-family:var(--mono);font-size:.85em;background:var(--code-bg);padding:.15em .35em;border-radius:4px}
pre{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;overflow-x:auto;margin:.75rem 0 1.25rem}
pre code{background:none;padding:0;font-size:.85rem;line-height:1.6}

/* steps */
.step{display:flex;gap:.85rem;margin:1rem 0}
.step-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:.15rem}
.step-body{flex:1}

/* diagram */
.diagram{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;margin:1.5rem 0;font-family:var(--mono);font-size:.82rem;line-height:1.8;white-space:pre;overflow-x:auto}

/* footer */
footer{border-top:1px solid var(--border);padding:1.5rem 0;text-align:center;color:var(--muted);font-size:.82rem;margin-top:2rem}

/* responsive */
@media(max-width:600px){
  .hero h1{font-size:1.6rem}
  nav{gap:.75rem;font-size:.82rem}
  .cards{grid-template-columns:1fr}
}