:root{
  --bg:#F5F7FA; --surface:#FFFFFF; --ink:#14304B; --body:#475A6C; --muted:#5A6B7B; --dim:#8497A8;
  --line:#E1E7EE; --line-soft:#EDF1F5; --navy:#184068; --navy-terminal:#102F4E;
  --red:#C00000; --green:#00A24A; --code-ink:#E8EEF4;
  --sans:'Hanken Grotesk',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
code,pre{font-family:var(--mono)}

/* top nav */
.docs-top{display:flex;align-items:center;gap:20px;padding:14px 24px;border-bottom:1px solid var(--line);
  background:var(--surface);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.docs-top .brand{display:flex;align-items:center;gap:8px;font-weight:800}
.docs-top .brand img{height:26px;width:26px;border-radius:7px}
/* canonical lockup wordmark: applies in both the header .brand link and the footer bar,
   both carry class docs-top */
.docs-top .rc-wm{font-weight:700;letter-spacing:-.01em}
.docs-top .rc-wm-dim{color:var(--dim)}
.docs-top .docs-scope{font-weight:600;color:var(--muted)}
.docs-top nav{display:flex;gap:16px;flex-wrap:wrap}
.docs-top .spacer{flex:1}

/* layout */
.docs-main{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;max-width:1120px;margin:0 auto;padding:28px 24px}
.docs-side{font-size:14px}
.docs-side h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:18px 0 8px}
.docs-side a{display:block;padding:4px 0;color:var(--body)}
.docs-article{min-width:0}
.docs-article h1{font-size:34px;line-height:1.15;margin:0 0 8px}
.docs-article .lede{font-size:18px;color:var(--body);margin:0 0 24px}
.docs-article h2{font-size:22px;margin:34px 0 10px;padding-top:8px}
.docs-article p{color:var(--body)}
.verified{font-size:13px;color:var(--muted);margin-top:40px;border-top:1px solid var(--line-soft);padding-top:14px}

/* surface toggle */
.surface-toggle{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px;margin:0 0 22px}
.surface-toggle [role=tab]{font:inherit;font-weight:700;font-size:14px;border:0;background:transparent;color:var(--muted);
  padding:7px 16px;border-radius:7px;cursor:pointer}
.surface-toggle [role=tab][aria-selected=true]{background:var(--navy);color:#fff}
.surface-toggle .compare{margin-left:auto;font-size:13px;color:var(--body);display:flex;align-items:center;gap:6px;cursor:pointer}

/* surfaces: no-JS default shows all, stacked */
.surfaces{display:grid;gap:14px;margin:12px 0 4px}
.surface{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:14px 16px;position:relative}
.surface-label{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#fff;background:var(--navy);border-radius:5px;padding:2px 8px;margin-bottom:8px}
.surface[data-surface=cli] .surface-label{background:var(--navy-terminal)}
.surface[data-surface=mcp] .surface-label{background:#3A5E82}
.surface p{margin:.3em 0}
.surface pre{background:var(--navy-terminal);color:var(--code-ink);border-radius:8px;padding:12px 14px;overflow:auto;font-size:13.5px}
.surface :not(pre)>code{background:#EEF2F6;color:var(--ink);border-radius:4px;padding:1px 5px;font-size:.92em}

/* JS-enhanced: a surface is chosen -> hide the others */
body[data-surface=ui] .surface:not([data-surface=ui]),
body[data-surface=cli] .surface:not([data-surface=cli]),
body[data-surface=mcp] .surface:not([data-surface=mcp]){display:none}
/* compare mode: show all three as columns (specificity must beat the hide rules above) */
body.compare .surface[data-surface=ui],
body.compare .surface[data-surface=cli],
body.compare .surface[data-surface=mcp]{display:block}
body.compare .surfaces{grid-template-columns:repeat(3,minmax(0,1fr))}

/* copy buttons */
.copy-btn,.md-btn{font:inherit;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--surface);
  color:var(--body);border-radius:6px;padding:3px 9px;cursor:pointer}
.surface pre .copy-btn{position:absolute;top:8px;right:8px}
.surface pre{position:relative}

/* tables */
.docs-article table{border-collapse:collapse;width:100%;font-size:14px;margin:14px 0}
.docs-article th,.docs-article td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.docs-article th{background:var(--line-soft)}

/* responsive */
@media (max-width:900px){
  .docs-main{grid-template-columns:1fr}
  .docs-side{order:2;border-top:1px solid var(--line);padding-top:12px}
}
@media (max-width:767px){
  body.compare .surfaces{grid-template-columns:1fr}
  .docs-article h1{font-size:27px}
}