/* The public documentation (/docs): tools/docsite. The brief's look (warm paper, ink rules, Newsreader
   headings, Geist text, Geist Mono labels and code); the fonts are the brief's own, copied in at build
   time. Nothing from another site. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #f6f4ee;
  --bg-soft: #eeebe2;
  --bg-code: #efece3;
  --card: #fffdf8;
  --fg: #16191a;
  --fg-soft: #4b5254;
  --fg-faint: #6a7173;
  --line: #d8d3c6;
  --accent: #0b5d58;
  --accent-deep: #08443f;
  --accent-soft: #dcebe7;
  --on-accent: #ffffff;
  --mark: #f4e6da;
  --radius: 3px;
  --top: 60px;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* code colours (Pygments classes) */
  --k: #0b5d58; --s: #6b5a12; --n: #9a4a17; --c: #6a7173; --o: #08443f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101314; --bg-soft: #161a1b; --bg-code: #1b2021; --card: #1b2021; --fg: #ecebe6;
    --fg-soft: #a6adab; --fg-faint: #858d8b; --line: #2d3435; --accent: #5fbfb3; --accent-deep: #93d8ce;
    --accent-soft: #15302d; --on-accent: #06201e; --mark: #33231a;
    --k: #5fbfb3; --s: #d6c27a; --n: #e39462; --c: #858d8b; --o: #93d8ce;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101314; --bg-soft: #161a1b; --bg-code: #1b2021; --card: #1b2021; --fg: #ecebe6;
  --fg-soft: #a6adab; --fg-faint: #858d8b; --line: #2d3435; --accent: #5fbfb3; --accent-deep: #93d8ce;
  --accent-soft: #15302d; --on-accent: #06201e; --mark: #33231a;
  --k: #5fbfb3; --s: #d6c27a; --n: #e39462; --c: #858d8b; --o: #93d8ce;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: 30; background: var(--bg); padding: 6px 10px; }

/* top bar */
.top {
  position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center;
  gap: 16px; padding: 0 20px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 600; white-space: nowrap; }
.brand:hover { color: var(--fg); text-decoration: none; }
.brand .mark {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 3px;
  background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 600;
}
.brand em {
  font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
  border-left: 1px solid var(--line); padding-left: 10px;
}
.search { position: relative; flex: 1; max-width: 520px; margin-left: auto; }
.search input {
  width: 100%; height: 38px; padding: 0 40px 0 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); color: var(--fg); font: inherit; font-size: 15px;
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.search kbd {
  position: absolute; right: 10px; top: 9px; font: 12px var(--mono); color: var(--fg-faint);
  border: 1px solid var(--line); border-radius: 3px; padding: 0 5px;
}
#results {
  position: absolute; top: 44px; left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--fg); border-radius: var(--radius);
  max-height: min(70vh, 560px); overflow: auto;
}
#results a { display: block; padding: 8px 10px; border-radius: 2px; color: var(--fg); }
#results a:hover, #results a[aria-selected="true"] { background: var(--accent-soft); text-decoration: none; }
#results small { display: block; color: var(--fg-faint); font-size: 12.5px; }
#results p { margin: 8px 10px; color: var(--fg-faint); font-size: 14px; }
.links { display: flex; gap: 20px; align-items: center; font-size: 15px; white-space: nowrap; }
.links a { color: var(--fg-soft); }
.links a:hover { color: var(--fg); text-decoration: none; }
.links .app {
  color: var(--on-accent); background: var(--accent); padding: 8px 14px; border-radius: var(--radius); font-weight: 600;
}
.links .app:hover { color: var(--on-accent); background: var(--accent-deep); }
.menu { display: none; width: 38px; height: 38px; border: 1px solid var(--fg); border-radius: var(--radius); background: var(--bg); cursor: pointer; }
.menu span, .menu span::before, .menu span::after { display: block; width: 16px; height: 2px; background: var(--fg); margin: 0 auto; position: relative; content: ""; }
.menu span::before { position: absolute; top: -5px; }
.menu span::after { position: absolute; top: 5px; }

/* layout */
.layout { display: grid; grid-template-columns: 272px minmax(0, 1fr) 232px; max-width: 1440px; margin: 0 auto; }
.sidebar {
  position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow-y: auto;
  padding: 24px 12px 40px 20px; border-right: 1px solid var(--line); font-size: 14.5px;
}
.sidebar details { margin-bottom: 12px; }
.sidebar summary {
  cursor: pointer; list-style: none; font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-soft); padding: 6px 8px;
}
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::after { content: "›"; float: right; transition: transform 0.15s; }
.sidebar details[open] summary::after { transform: rotate(90deg); }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li a { display: block; padding: 5px 8px; border-left: 2px solid transparent; color: var(--fg-soft); line-height: 1.4; }
.sidebar li a:hover { background: var(--bg-soft); color: var(--fg); text-decoration: none; }
.sidebar li a[aria-current="page"] { background: var(--accent-soft); border-left-color: var(--accent); color: var(--fg); font-weight: 600; }
.content { padding: 40px 56px 72px; min-width: 0; }
.crumb {
  max-width: 820px; margin: 0 0 20px; padding-top: 12px; border-top: 2px solid var(--fg);
  font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}
.toc { position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow-y: auto; padding: 40px 20px; font-size: 13.5px; }
.toc p { margin: 0 0 10px; font: 500 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-soft); }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 0 3px 12px; color: var(--fg-faint); line-height: 1.4; margin-left: -1px; border-left: 2px solid transparent; }
.toc li.l3 a { padding-left: 24px; }
.toc li a:hover, .toc li a.on { color: var(--accent); border-left-color: var(--accent); text-decoration: none; }

/* the page */
.prose { max-width: 820px; }
.prose h1, .prose h2 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
.prose h1 { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 20px; }
.prose h2 {
  font-size: 1.85rem; line-height: 1.15; letter-spacing: -0.015em; margin: 52px 0 14px;
  padding-top: 14px; border-top: 1px solid var(--fg);
}
.prose h3 { font-size: 1.15rem; font-weight: 600; margin: 32px 0 8px; }
.prose h4 { font-size: 1rem; font-weight: 600; margin: 24px 0 6px; }
.prose h2 code, .prose h3 code { font-size: 0.8em; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose li { margin: 4px 0; }
.prose li > ul, .prose li > ol { margin: 4px 0; }
.prose strong { font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.prose blockquote { margin: 0 0 16px; padding: 12px 18px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--fg); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose img { max-width: 100%; height: auto; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.prose code { font: 0.86em var(--mono); background: var(--bg-code); padding: 0.12em 0.36em; border-radius: 2px; overflow-wrap: break-word; }
.prose a code { color: var(--accent); }
.prose pre.code {
  position: relative; margin: 0 0 18px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line);
  border-left: 2px solid var(--accent); overflow-x: auto; font: 13.5px/1.6 var(--mono); tab-size: 2;
}
.prose pre.code code { background: none; padding: 0; font: inherit; overflow-wrap: normal; }
.prose pre.code .copy {
  position: absolute; top: 8px; right: 8px; font: 12px var(--mono); padding: 3px 8px; border-radius: 2px;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg-soft); cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.prose pre.code:hover .copy, .prose pre.code .copy:focus { opacity: 1; }
.prose table {
  display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 24px; font-size: 14.5px;
  line-height: 1.5; border-top: 2px solid var(--fg);
}
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 9px 16px 9px 0; text-align: left; vertical-align: top; }
.prose th {
  font: 500 12px/1.4 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-soft);
  border-bottom-color: var(--fg);
}
.prose h1 + p { font-size: 1.15rem; color: var(--fg-soft); }
.k, .kd, .kn, .kc, .kr, .nt { color: var(--k); }
.s, .s1, .s2, .sb, .sh, .se, .dl { color: var(--s); }
.m, .mi, .mf, .nb, .kt { color: var(--n); }
.c, .c1, .cm, .ch, .cs { color: var(--c); font-style: italic; }
.o, .nv, .na, .nf { color: var(--o); }
.pager { display: flex; gap: 16px; justify-content: space-between; max-width: 820px; margin-top: 56px; }
.pager a { flex: 1; max-width: 50%; padding: 14px 0; border-top: 2px solid var(--fg); color: var(--fg); font-weight: 600; }
.pager a:hover { color: var(--accent); text-decoration: none; }
.pager span { display: block; font: 500 12px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); }
.pager .next { margin-left: auto; text-align: right; }
.foot { max-width: 820px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-faint); }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); max-width: 820px; margin: 8px 0 32px;
  border-top: 2px solid var(--fg);
}
.stats div { padding: 16px 16px 18px 0; border-bottom: 1px solid var(--line); }
.stats b { display: block; font: 400 2.2rem/1.1 var(--serif); letter-spacing: -0.02em; }
.stats span { font-size: 13.5px; color: var(--fg-soft); }
mark { background: var(--mark); color: inherit; border-radius: 2px; }

@media (max-width: 1180px) {
  .layout { grid-template-columns: 252px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .top { padding: 0 12px; gap: 10px; }
  .menu { display: block; }
  .brand .name, .links a:not(.app) { display: none; }
  .brand em { border-left: 0; padding-left: 0; }
  .links .app { padding: 7px 10px; font-size: 14px; }
  .search kbd { display: none; }
  .layout { display: block; }
  .sidebar {
    position: fixed; top: var(--top); left: 0; bottom: 0; width: min(320px, 86vw); height: auto; z-index: 15;
    background: var(--bg); transform: translateX(-100%); transition: transform 0.2s; border-right: 1px solid var(--fg);
  }
  body.nav-open .sidebar { transform: none; }
  .content { padding: 24px 16px 48px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .pager { flex-direction: column; }
  .pager a { max-width: none; }
}
@media print {
  .top, .sidebar, .toc, .pager { display: none; }
  .layout { display: block; }
}