:root{
  --brand:#6E3BFF; --brand-2:#FF6B5E;
  --bg:#ffffff; --bg-soft:#f7f6fb; --surface:#ffffff;
  --ink:#1b1230; --ink-soft:#5a5170; --muted:#8a82a0;
  --border:#ececf3; --sidebar:#fbfaff;
  --note-bg:#f3eaff; --warn-bg:#fff4e6; --warn-bd:#ffd9a8;
  --radius:12px; --maxw:760px; --sbw:280px;
  /* Single typographic system — one sans family everywhere, one mono for code. */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
[data-theme="dark"]{
  --bg:#0b0712; --bg-soft:#120c1f; --surface:#150f24;
  --ink:#f2eefb; --ink-soft:#c4bcd8; --muted:#8c83a6;
  --border:#241a3a; --sidebar:#0e0a18;
  --note-bg:#1c1330; --warn-bg:#241a10; --warn-bd:#5a4420;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font);
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:30; height:60px;
  display:flex; align-items:center; gap:16px; padding:0 20px;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; color:var(--ink)}
.brand .logo{width:28px;height:28px;border-radius:8px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:700}
.search{flex:1; max-width:420px; position:relative}
.search input{
  width:100%; height:38px; padding:0 12px 0 36px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg-soft); color:var(--ink); font-size:14px;
}
.search:before{content:"🔎"; position:absolute; left:11px; top:8px; font-size:14px; opacity:.6}
.search-results{
  position:absolute; top:44px; left:0; right:0; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.18);
  overflow:hidden; max-height:60vh; overflow-y:auto;
}
.search-results a{display:block; padding:10px 14px; color:var(--ink); border-bottom:1px solid var(--border)}
.search-results a:hover{background:var(--bg-soft); text-decoration:none}
.search-results small{display:block; color:var(--muted); font-size:12.5px}
.top-actions{display:flex; align-items:center; gap:10px; margin-left:auto}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--bg-soft);
  cursor:pointer;font-size:16px;display:grid;place-items:center;color:var(--ink)}
.cta{background:var(--brand);color:#fff;border-radius:10px;padding:0 16px;height:38px;display:inline-flex;
  align-items:center;font-weight:600;font-size:14px}
.cta:hover{text-decoration:none;filter:brightness(1.05)}
.menu-btn{display:none}

/* Layout */
.layout{display:flex; align-items:flex-start; max-width:1240px; margin:0 auto}
.sidebar{
  width:var(--sbw); flex:0 0 var(--sbw); position:sticky; top:60px;
  height:calc(100vh - 60px); overflow-y:auto; padding:24px 16px 40px;
  background:var(--sidebar); border-right:1px solid var(--border);
}
.sb-group{margin-bottom:22px}
.sb-group h4{margin:0 0 8px; padding:0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.sb-link{display:block; padding:7px 10px; border-radius:8px; color:var(--ink-soft); font-size:14.5px}
.sb-link:hover{background:var(--bg-soft); color:var(--ink); text-decoration:none}
.sb-link.active{background:color-mix(in srgb,var(--brand) 14%, transparent); color:var(--brand); font-weight:600}

.content{flex:1; min-width:0; padding:40px 48px 80px; display:flex; justify-content:center}
.article{width:100%; max-width:var(--maxw)}
.eyebrow{color:var(--brand); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase}
/* Headings share the body sans family — one typeface across the whole guide.
   Hierarchy comes from size/weight, not from a second (serif) font. */
.article h1{font-family:var(--font); font-weight:800; font-size:34px; line-height:1.2; letter-spacing:-.01em; margin:6px 0 8px}
.lead{color:var(--ink-soft); font-size:18px; margin:0 0 28px}
.article h2{font-family:var(--font); font-weight:700; font-size:22px; line-height:1.3; margin:34px 0 12px; padding-top:8px}
.article h3{font-family:var(--font); font-weight:700; font-size:17px; line-height:1.35; margin:24px 0 8px}
.article p{margin:14px 0}
.article ul,.article ol{margin:14px 0; padding-left:22px}
.article li{margin:6px 0}
.article table{width:100%; border-collapse:collapse; margin:18px 0; font-size:15px}
.article th,.article td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top}
.article th{color:var(--muted); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em}

/* Code — one uniform monospace treatment (inline + block). */
.article code{font-family:var(--mono); font-size:.86em; background:var(--bg-soft);
  border:1px solid var(--border); border-radius:6px; padding:1px 6px}
.article pre{font-family:var(--mono); font-size:13px; line-height:1.55; background:var(--bg-soft);
  border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin:18px 0; overflow-x:auto}
.article pre code{background:none; border:0; padding:0; font-size:inherit}

.cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0}
.cards.small{grid-template-columns:repeat(3,1fr)}
.card{display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface); color:var(--ink)}
a.card:hover{border-color:var(--brand); text-decoration:none; transform:translateY(-1px)}
.card .card-ic{font-size:20px}
.card b{font-size:15px}
.card span{color:var(--ink-soft); font-size:13.5px}

ol.steps{counter-reset:s; list-style:none; padding-left:0}
ol.steps li{position:relative; padding:10px 0 10px 44px; border-left:2px solid var(--border); margin-left:14px}
ol.steps li:before{counter-increment:s; content:counter(s); position:absolute; left:-15px; top:8px;
  width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}

.note,.warn{border-radius:var(--radius); padding:14px 16px; margin:20px 0; font-size:14.5px}
.note{background:var(--note-bg); border:1px solid color-mix(in srgb,var(--brand) 25%, transparent)}
.warn{background:var(--warn-bg); border:1px solid var(--warn-bd)}
/* Highlighted "equation" callout (e.g. Post → … → $). A standardized note
   variant — centered, slightly larger — instead of one-off inline styles. */
.note.eq{text-align:center; font-size:16px}

/* Inline pill used on plan headings (e.g. "Most popular"). */
.badge{display:inline-block; vertical-align:middle; margin-left:8px;
  background:color-mix(in srgb,var(--brand) 14%, transparent);
  color:var(--brand); border:1px solid color-mix(in srgb,var(--brand) 30%, transparent);
  padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600;
  letter-spacing:.02em; text-transform:none}

.btn{display:inline-flex; align-items:center; gap:6px; background:var(--brand); color:#fff;
  padding:10px 18px; border-radius:10px; font-weight:600; font-size:14px; margin-top:18px}
.btn:hover{text-decoration:none; filter:brightness(1.05)}

.pager{display:flex; justify-content:space-between; gap:12px; margin-top:48px; padding-top:24px; border-top:1px solid var(--border)}
.pager a{flex:1; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface)}
.pager a:hover{border-color:var(--brand); text-decoration:none}
.pager small{display:block; color:var(--muted); font-size:12px}
.pager .next{text-align:right}

.backdrop{display:none}
@media (max-width:900px){
  .menu-btn{display:grid}
  .sidebar{position:fixed; left:0; top:60px; z-index:40; transform:translateX(-100%); transition:transform .2s}
  .sidebar.open{transform:none}
  .backdrop.show{display:block; position:fixed; inset:60px 0 0; background:rgba(0,0,0,.4); z-index:35}
  .content{padding:28px 20px 60px}
  .cards,.cards.small{grid-template-columns:1fr}
  .cta span{display:none}
  .article h1{font-size:30px}
}

/* ── On this page (right TOC) + active line/dot ──────────────────── */
/* Full-width: sidebar flush-left, TOC flush-right, content fills the rest
   (no centered max-width margin — removes the big empty left margin). */
.layout { max-width:none; }
.article { max-width:860px; }
.toc { width:240px; flex:0 0 240px; position:sticky; top:60px; height:calc(100vh - 60px);
  overflow-y:auto; padding:40px 20px 40px 24px; }
.toc:empty { display:none; }
.toc-title { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:600; }
.toc-list { list-style:none; margin:0; padding:0; position:relative; border-left:2px solid var(--border); }
.toc-link { display:block; position:relative; padding:8px 0 8px 18px; color:var(--ink-soft); font-size:13.5px; line-height:1.45; transition:color .15s; }
.toc-link.lvl-3 { padding-left:30px; font-size:13px; }
.toc-link:hover { color:var(--ink); text-decoration:none; }
.toc-link.active { color:var(--brand); font-weight:600; }
/* Active segment of the BAR — the line lights up brand-color for the
   active section (the part that aligns with the current heading). */
.toc-link::after { content:""; position:absolute; left:-2px; top:4px; bottom:4px; width:2px; border-radius:2px;
  background:transparent; transition:background .2s; }
.toc-link.active::after { background:var(--brand); }
/* the dot that rides the line at the active section */
.toc-link::before { content:""; position:absolute; left:-6px; top:13px; width:10px; height:10px; border-radius:50%; z-index:1;
  background:transparent; transition:background .2s, box-shadow .2s; }
.toc-link.active::before { background:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
@media (max-width:1180px){ .toc { display:none; } }

/* ── Scrollbars: thin & subtle (was a chunky gray default bar) ────── */
.sidebar, .toc, body { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.sidebar::-webkit-scrollbar, .toc::-webkit-scrollbar, body::-webkit-scrollbar { width:8px; height:8px; }
.sidebar::-webkit-scrollbar-track, .toc::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb, .toc::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background:var(--border); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
.sidebar:hover::-webkit-scrollbar-thumb, .toc:hover::-webkit-scrollbar-thumb {
  background:color-mix(in srgb, var(--brand) 35%, var(--border)); background-clip:content-box; }