:root{
  --bg:#0f1216; --panel:#171b22; --panel2:#1d222b; --ink:#e6e9ef; --muted:#9aa4b2;
  --line:#2a313c; --amber:#d9b572; --red:#e58974; --blue:#8ab1cc; --sage:#94b27d;
  --green:#7fd18b; --code:#c9d4e3; --codebg:#11151b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px; margin:0 auto; padding:0 24px 96px}

/* top nav */
nav.top{position:sticky; top:0; z-index:5; background:rgba(15,18,22,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line); margin:0 -24px 0;
  padding:11px 24px; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
nav.top .brand{font-weight:700; margin-right:10px; color:#f2f4f8}
nav.top a{color:var(--muted); text-decoration:none; padding:4px 10px; border-radius:6px; font-size:14px}
nav.top a:hover{color:var(--ink); background:rgba(255,255,255,.04)}
nav.top a.active{color:#12161b; background:var(--amber); font-weight:600}

header.doc{border-bottom:1px solid var(--line); padding:34px 0 22px; margin-bottom:8px}
h1{font-size:30px; line-height:1.2; margin:0 0 8px}
.sub{color:var(--muted); font-size:15px}
.meta{color:var(--muted); font-size:13px; margin-top:14px}
.meta code{background:var(--codebg); padding:1px 6px; border-radius:4px}
h2{font-size:22px; margin:42px 0 12px; padding-top:10px; border-top:1px solid var(--line)}
h3{font-size:17px; margin:26px 0 8px; color:#f2f4f8}
p{margin:10px 0}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px; color:var(--code)}
p code,li code,td code{background:var(--codebg); padding:1px 6px; border-radius:4px; white-space:nowrap}
pre{background:var(--codebg); border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; overflow:auto; font-size:13px; line-height:1.55; color:var(--code)}
pre code{background:none; padding:0; white-space:pre}
ul,ol{padding-left:22px} li{margin:6px 0}
table{border-collapse:collapse; width:100%; margin:14px 0; font-size:14px}
th,td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top}
th{background:var(--panel2); color:#f2f4f8; font-weight:600}
tr:nth-child(even) td{background:rgba(255,255,255,.015)}
.callout{border-radius:8px; padding:14px 18px; margin:18px 0; border:1px solid; border-left-width:4px}
.c-crit{background:rgba(229,137,116,.08); border-color:var(--red)}
.c-safe{background:rgba(148,178,125,.09); border-color:var(--sage)}
.c-info{background:rgba(138,177,204,.08); border-color:var(--blue)}
.c-rec{background:rgba(217,181,114,.09); border-color:var(--amber)}
.callout .t{font-weight:700; margin-bottom:4px; display:block}
.pill{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:2px 8px; border-radius:999px; vertical-align:middle}
.p-ok{background:rgba(127,209,139,.16); color:var(--green)}
.p-bad{background:rgba(229,137,116,.16); color:var(--red)}
.p-new{background:rgba(217,181,114,.16); color:var(--amber)}
.st{display:inline-block; font:700 10.5px ui-monospace,monospace; letter-spacing:.03em;
  padding:1px 6px; border-radius:5px; margin-right:6px; vertical-align:2px}
.st-done{background:rgba(127,209,139,.16); color:var(--green)}
.st-part{background:rgba(217,181,114,.16); color:var(--amber)}
.st-todo{background:rgba(154,164,178,.16); color:var(--muted)}
.toc{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px 22px; margin:22px 0}
.toc h4{margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.toc ol{margin:0; columns:2; column-gap:32px}
.toc a{color:var(--ink)}
.ok{color:var(--green); font-weight:700}
.bad{color:var(--red); font-weight:700}
.lead{font-size:17px; color:#eef1f6}
.flow{background:var(--codebg); border:1px solid var(--line); border-radius:8px; padding:16px;
  font:12.5px/1.5 ui-monospace,monospace; color:var(--code); overflow:auto; white-space:pre}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:16px 0}
.card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px}
.card h4{margin:0 0 6px; font-size:15px}
.card p{margin:0; font-size:13.5px; color:var(--muted)}
kbd{font:12px ui-monospace,monospace; background:var(--panel2); border:1px solid var(--line);
  border-bottom-width:2px; border-radius:5px; padding:1px 6px}
footer{margin-top:56px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px}
@media (max-width:640px){ .toc ol{columns:1} h1{font-size:25px} }