:root{
  --bg:#ffffff;
  --side:#faf8f3;
  --ink:#191526;
  --body:#3b3650;
  --muted:#6f6985;
  --accent:#b5830f;
  --accent-2:#8a4dd0;
  --line:#ece6da;
  --line-2:#f1ece2;
  --code-bg:#0e0c16;
  --code-ink:#ece6d6;
  --sidebar-w:280px;
  --header-h:62px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  /* syntax */
  --t-com:#7d7790;--t-str:#c9a36a;--t-num:#e08aa6;--t-kw:#8fb6ff;--t-builtin:#3bb0b0;
  --t-config:#a07be0;--t-fn:#d9a93a;--t-divine:#d4a017;--t-chaos:#b15cff;--t-certain:#2faf6a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--body);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono);font-size:.88em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* header */
.dheader{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:40;
  display:flex;align-items:center;gap:18px;padding:0 22px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.dbrand{font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--ink);display:flex;align-items:center;gap:8px}
.dbrand .mk{color:var(--accent)}
.dheader .spacer{flex:1}
.dheader nav{display:flex;gap:20px;font-size:.92rem;font-weight:500}
.dheader nav a{color:var(--muted)}
.dheader nav a:hover{color:var(--ink);text-decoration:none}
.dsearch{position:relative}
.dsearch input{
  font:inherit;font-size:.88rem;padding:7px 12px 7px 32px;width:200px;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);
}
.dsearch input:focus{outline:none;border-color:var(--accent)}
.dsearch::before{content:"⌕";position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1rem}
.dsearch-results{
  position:absolute;top:42px;left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.12);max-height:340px;overflow:auto;display:none;z-index:60;
}
.dsearch-results.open{display:block}
.dsearch-results a{display:block;padding:9px 14px;color:var(--ink);font-size:.88rem;border-bottom:1px solid var(--line-2)}
.dsearch-results a:hover,.dsearch-results a.sel{background:var(--side);text-decoration:none}
.dsearch-results .grp{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-right:8px}
.dsearch-empty{padding:14px;color:var(--muted);font-size:.86rem}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:38px;height:34px;cursor:pointer;font-size:1.1rem;color:var(--ink)}

/* sidebar */
.dside{
  position:fixed;top:var(--header-h);bottom:0;left:0;width:var(--sidebar-w);z-index:30;
  overflow-y:auto;padding:24px 14px 60px;background:var(--side);border-right:1px solid var(--line);
}
.dside .group{margin-bottom:22px}
.dside .group-label{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:0 12px;margin-bottom:8px;
}
.dside a{
  display:block;padding:7px 12px;border-radius:8px;color:var(--body);font-size:.9rem;font-weight:500;
  border-left:2px solid transparent;
}
.dside a:hover{background:#fff;color:var(--ink);text-decoration:none}
.dside a.active{background:#fff;color:var(--accent);border-left-color:var(--accent);font-weight:600}

/* content */
.dmain{margin-left:var(--sidebar-w);padding:var(--header-h) 0 0}
.darticle{max-width:780px;margin:0 auto;padding:42px 32px 80px}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.darticle h1{font-family:var(--serif);font-weight:800;font-size:2.5rem;line-height:1.1;color:var(--ink);margin:0 0 10px;letter-spacing:-.02em}
.darticle h2{font-family:var(--serif);font-weight:700;font-size:1.55rem;color:var(--ink);margin:42px 0 12px;scroll-margin-top:80px}
.darticle h3{font-weight:700;font-size:1.12rem;color:var(--ink);margin:28px 0 8px}
.darticle p{margin:0 0 16px}
.darticle ul,.darticle ol{margin:0 0 16px;padding-left:22px}
.darticle li{margin:6px 0}
.darticle strong{color:var(--ink);font-weight:600}
.lede{font-size:1.15rem;color:var(--muted)}
.darticle a{font-weight:500}

/* inline code */
.darticle p code,.darticle li code,.darticle td code,.darticle h3 code{
  background:#f4efe6;color:#9a5b00;padding:.12em .4em;border-radius:5px;font-size:.85em;border:1px solid #efe7d8;
}

/* code blocks */
.darticle pre{
  background:var(--code-bg);border-radius:12px;padding:18px 20px;overflow-x:auto;margin:0 0 18px;
  position:relative;border:1px solid #221d33;
}
.darticle pre code{color:var(--code-ink);font-size:.86rem;line-height:1.7;white-space:pre;background:none;border:none;padding:0}
.copy{
  position:absolute;top:9px;right:9px;font-family:var(--mono);font-size:.7rem;color:#9b93ac;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:3px 9px;cursor:pointer;
}
.copy:hover{color:var(--t-divine)}
.copy.done{color:var(--t-certain)}

/* tables */
.darticle table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.9rem}
.darticle th,.darticle td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.darticle th{font-weight:700;color:var(--ink);border-bottom:2px solid var(--line)}
.darticle tr:last-child td{border-bottom:none}

/* callout */
.note{
  border-left:3px solid var(--accent);background:#fcf8ee;border-radius:0 10px 10px 0;
  padding:14px 18px;margin:0 0 18px;font-size:.94rem;
}
.note.warn{border-left-color:#e0556b;background:#fdf1f2}
.note strong{color:var(--ink)}

/* prev/next */
.pager{display:flex;gap:16px;margin-top:48px;border-top:1px solid var(--line);padding-top:26px}
.pager a{
  flex:1;border:1px solid var(--line);border-radius:12px;padding:16px 18px;color:var(--ink);
  display:flex;flex-direction:column;gap:3px;transition:border-color .15s,box-shadow .15s;
}
.pager a:hover{border-color:var(--accent);box-shadow:0 6px 20px rgba(0,0,0,.06);text-decoration:none}
.pager .dir{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.pager .ttl{font-weight:600;color:var(--accent)}
.pager .next{text-align:right;align-items:flex-end}

/* footer */
.dfoot{margin-left:var(--sidebar-w);border-top:1px solid var(--line);padding:24px 32px;color:var(--muted);font-size:.85rem;text-align:center}
.dfoot a{color:var(--muted)}

.scrim{display:none}

/* syntax classes */
.t-com{color:var(--t-com);font-style:italic}.t-str{color:var(--t-str)}.t-num{color:var(--t-num)}
.t-lit{color:var(--t-num)}.t-kw{color:var(--t-kw)}.t-builtin{color:var(--t-builtin)}
.t-config{color:var(--t-config)}.t-fn{color:var(--t-fn)}
.t-divine{color:var(--t-divine);font-weight:600}.t-chaos{color:var(--t-chaos);font-weight:600}.t-certain{color:var(--t-certain);font-weight:600}

@media (max-width:920px){
  .dside{transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.2)}
  body.nav-open .dside{transform:none}
  .dmain,.dfoot{margin-left:0}
  .burger{display:block}
  .dheader nav{display:none}
  .dsearch input{width:140px}
  body.nav-open .scrim{display:block;position:fixed;inset:var(--header-h) 0 0;background:rgba(0,0,0,.35);z-index:25}
  .darticle{padding:32px 20px 64px}
  .pager{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.dside{transition:none}}