/* One stylesheet, no build step, no framework. Dark and light both, from the reader's own setting. */
:root {
  --bg: #0f1219; --bg-alt: #131822; --panel: #151a23; --line: #232a36;
  --text: #dbe0ea; --dim: #8f98a9; --accent: #7fd8a0; --code: #cbd4e4;
  --codebg: #10141c;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfcfd; --bg-alt: #f4f6f9; --panel: #ffffff; --line: #e3e7ee;
    --text: #1a1f28; --dim: #5b6472; --accent: #1c7a4a; --code: #23303f;
    --codebg: #f3f5f8;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The top bar lives in ../header.css — the same file, the same markup and the same class names as the
   landing page. It reads --bar and the palette above and nothing else. */

/* ---- reference layout ---- */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 40; padding: 10px 16px; background: var(--panel); }
.skip-link:focus { top: 12px; }
.shell { display: grid; grid-template-columns: 300px minmax(0, 1fr) 220px; max-width: 1680px; margin: 0 auto; }
.side {
  border-right: 1px solid var(--line); background: var(--bg-alt);
  padding: 24px 16px 40px;
  position: sticky; top: var(--bar); align-self: start;
  height: calc(100vh - var(--bar)); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
main { min-width: 0; padding: 44px clamp(24px, 3vw, 56px) 80px; overflow-wrap: anywhere; }
.article-side { position: sticky; top: var(--bar); align-self: start; max-height: calc(100vh - var(--bar)); overflow-y: auto; padding: 44px 20px 32px 8px; }
.article-toc p { margin-bottom: 14px; font-size: 1rem; font-weight: 600; }
.article-toc ul { list-style: none; margin: 0; padding: 0; }
.article-toc li { margin: 0; }
.article-toc a { display: block; padding: 5px 12px; border-left: 2px solid var(--line); color: var(--dim); text-decoration: none; font-size: 0.875rem; }
.article-toc a:hover, .article-toc a.current-member { color: var(--accent); border-left-color: var(--accent); }
.sidebar-toggle { display: none; }

/* ---- API tree ---- */
.toc { font-size: 0.875rem; line-height: 1.5; }
.api-toc { display: flex; flex-direction: column; height: 100%; }
.api-toc > :not(#api-tree) { flex-shrink: 0; }
#api-tree { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.toc-heading { color: var(--text); font-size: 1rem; font-weight: 600; margin: 0 8px 18px; }
.toc a { color: var(--dim); text-decoration: none; display: block; overflow-wrap: anywhere; }
.toc a:hover { color: var(--text); background: var(--panel); }
.toc a.current, .toc a.current-member { color: var(--accent); font-weight: 600; background: var(--panel); border-left-color: var(--accent); }
.toc-top { padding: 8px 12px; margin-bottom: 12px; border-left: 2px solid transparent; }
.api-search { margin: 0 8px 16px; }
.api-search label { display: block; margin-bottom: 6px; color: var(--dim); }
.api-search input { width: 100%; min-width: 0; padding: 9px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--dim); border-radius: 4px; }
.api-search input::placeholder { color: var(--dim); }
.toc details > summary { cursor: pointer; list-style: none; position: relative; padding: 7px 8px 7px 26px; user-select: none; overflow-wrap: anywhere; }
.toc details > summary::-webkit-details-marker { display: none; }
.toc details > summary::before { content: ""; position: absolute; left: 10px; top: 14px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: 0.7; }
.toc details[open] > summary::before { transform: rotate(45deg); top: 12px; }
.toc summary:hover { background: var(--panel); }
.group { margin-top: 4px; }
.group > summary { color: var(--text); font-weight: 600; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0; }
.group > ul { margin: 2px 0 10px 10px; }
.group > ul > li > a { padding: 7px 12px; border-left: 2px solid transparent; }
.type-node > summary { color: var(--dim); }
.type-node[data-current] > summary { color: var(--text); }
.type-members { border-left: 1px solid var(--line); margin: 2px 0 8px 16px; padding-left: 4px; }
.type-overview { padding: 7px 10px; border-left: 2px solid transparent; }
.member-group > summary { color: var(--dim); }
.api-member a { padding: 6px 8px 6px 14px; border-left: 2px solid transparent; }
.filter-status { margin: 16px 8px; color: var(--dim); }

/* ---- prose ---- */
h1 { font-size: 2.5rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 16px; scroll-margin-top: calc(var(--bar) + 20px); }
h2 { font-size: 1.65rem; line-height: 1.3; margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--bar) + 12px); }
h3 { font-size: 1.125rem; margin: 24px 0 8px; }
p { margin: 0 0 14px; }
a { color: var(--accent); }
.crumb { color: var(--dim); font-size: 0.875rem; margin-bottom: 8px; }
.crumb a { color: var(--dim); }
.type-meta { color: var(--dim); font-size: 0.875rem; margin: 12px 0 20px; }
.lede, .blurb { color: var(--dim); }
.blurb { margin-top: -4px; }
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em; color: var(--code);
}
pre {
  margin: 0 0 14px; padding: 10px 12px; overflow-x: auto;
  background: var(--codebg); border: 1px solid var(--line); border-radius: 6px;
}
pre code { color: var(--code); white-space: pre; }
pre.decl { font-size: 0.875rem; }
pre.decl code { white-space: pre-wrap; overflow-wrap: anywhere; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }
blockquote {
  margin: 0 0 16px; padding: 12px 16px;
  border-left: 3px solid var(--accent); background: var(--bg-alt); border-radius: 0 6px 6px 0;
}
blockquote p:last-child { margin-bottom: 0; }

/* ---- the book ----
   A chapter is prose with three recurring shapes in it: numbered steps, an aside worth knowing, and
   the demo scene that shows the thing running. Each is styled once here rather than in every
   fragment, so a chapter stays readable as HTML source. */
h3 { scroll-margin-top: calc(var(--bar) + 12px); }

/* An anchor with nothing in it, so a link can land somewhere that has no heading of its own. */
.jump { display: block; height: 0; scroll-margin-top: calc(var(--bar) + 12px); }

ol.steps { counter-reset: step; list-style: none; padding-left: 0; margin: 14px 0 18px; }
ol.steps > li {
  position: relative; padding-left: 34px; margin-bottom: 10px;
}
ol.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-alt); border: 1px solid var(--line);
  color: var(--dim); font-size: 11.5px; font-weight: 650;
  display: flex; align-items: center; justify-content: center;
}

p.tip, div.tip {
  margin: 16px 0; padding: 12px 16px;
  border-left: 3px solid var(--line); background: var(--bg-alt);
  border-radius: 0 6px 6px 0; color: var(--dim); font-size: 14px;
}
.tip strong, .tip b { color: var(--text); }
.tip p { margin: 0 0 8px; }
.tip p:last-child { margin: 0; }

/* Run it yourself. Every chapter ends with the scene in the demo that shows what it just described,
   because a paragraph about additive blending is worth less than four seconds of watching it. */
.try {
  margin: 26px 0 0; padding: 14px 18px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 10px;
}
.try h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); }
.try p { margin: 0 0 10px; font-size: 14px; }
.try pre { margin: 0; }

/* Previous and next, because a book read in the sidebar is a book read out of order. */
.chapter-nav {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14px;
}
.chapter-nav a { text-decoration: none; }
.chapter-nav .none { color: var(--dim); }

/* A term link is not a navigation link: it is an offer, in the middle of a sentence, to go and find
   out what a word means. It reads as text with a hint under it rather than as something to click. */
a.term-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted var(--dim);
}
a.term-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- glossary ----
   Every reference page links here, so an entry has to stand on its own: what the word means, then
   what it is called in this API, then where it is taught. */
.term { padding: 16px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar) + 12px); }
.term:target { background: var(--bg-alt); border-radius: 8px; padding: 16px; }
.term h3 { margin: 0 0 6px; font-size: 16px; }
.term p { margin: 0 0 8px; }
.term p:last-child { margin: 0; }
.term .where { font-size: 13.5px; color: var(--dim); }
.term .where code { font-size: 0.92em; }

/* Syntax colors affect tokens only, preserving the shared code layout and copyable whitespace.
   The short classes keep older guide fragments colored when JavaScript is disabled. */
:root {
  --syntax-keyword: #c9a2f3; --syntax-type: #82c7f5; --syntax-string: #ecc48d;
  --syntax-number: #f7a278; --syntax-comment: #99a8bd; --syntax-function: #82dacb;
}
@media (prefers-color-scheme: light) {
  :root {
    --syntax-keyword: #7938ad; --syntax-type: #075985; --syntax-string: #886012;
    --syntax-number: #b33f23; --syntax-comment: #586477; --syntax-function: #087460;
  }
}
pre .k, pre .hljs-keyword, pre .hljs-literal, pre .hljs-meta { color: var(--syntax-keyword); }
pre .hljs-type, pre .hljs-built_in, pre .hljs-attr, pre .hljs-attribute, pre .hljs-variable,
pre .hljs-title.class_ { color: var(--syntax-type); }
pre .hljs-title, pre .hljs-name, pre .hljs-selector-tag { color: var(--syntax-function); }
pre .s, pre .hljs-string, pre .hljs-regexp { color: var(--syntax-string); }
pre .hljs-number, pre .hljs-symbol { color: var(--syntax-number); }
pre .c, pre .hljs-comment { color: var(--syntax-comment); font-style: italic; }
pre .hljs-subst { color: var(--code); }
pre a.api-type-link { color: var(--syntax-type); text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 0.18em; }
pre a.api-type-link:hover, pre a.api-type-link:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
pre a.api-type-link span { color: inherit; }

/* ---- overview cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 8px; }
.card {
  display: block; padding: 16px 18px; text-decoration: none;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 10px;
}
.card:hover { border-color: var(--accent); }
.card h3 { margin: 0 0 6px; font-size: 15px; color: var(--text); }
.card p { margin: 0; font-size: 13px; color: var(--dim); }

/* ---- member tables ---- */
table.members { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 18px 0 28px; font-size: 0.9375rem; }
table.members th { text-align: left; color: var(--text); font-size: 0.875rem; font-weight: 600; background: var(--bg-alt); padding: 10px 14px; border: 1px solid var(--line); }
table.members td { vertical-align: top; padding: 14px; border: 1px solid var(--line); overflow-wrap: anywhere; }
table.members th:first-child { width: 42%; }
table.members td p:last-child { margin-bottom: 0; }
table.members pre { margin: 0; background: none; border: none; padding: 0; overflow: visible; }
table.members pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
table.members tr { scroll-margin-top: calc(var(--bar) + 20px); }
table.members tr:target { background: var(--bg-alt); outline: 2px solid var(--accent); outline-offset: -2px; }
table.type-index th:first-child { width: 32%; }
dl.params { margin: 8px 0 0; }
dl.params dt { font-size: 13px; margin-top: 6px; }
dl.params dd { margin: 0 0 0 16px; color: var(--dim); }
dl.params dd p { margin-bottom: 4px; }
.returns { margin-top: 8px; }
.returns > span {
  display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--dim); margin-right: 8px;
}
.returns p { display: inline; }
.undocumented { color: var(--dim); }

/* ---- diagrams ----
   Hand-drawn SVG, coloured from the same custom properties as the page, so a diagram is legible in
   both themes without shipping the picture twice. Narrow screens scroll it rather than shrink it:
   a diagram squeezed to 320px is not a smaller diagram, it is an unreadable one. */
.diagram { margin: 20px 0 26px; overflow-x: auto; }
.diagram svg { display: block; width: 100%; max-width: 720px; min-width: 600px; height: auto; }
.d-band { fill: var(--bg-alt); stroke: var(--line); }
.d-box { fill: var(--panel); stroke: var(--line); }
.d-box-accent { fill: var(--panel); stroke: var(--accent); }
.d-band-label {
  fill: var(--dim); font: 650 10px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.d-title { fill: var(--text); font: 600 13.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.d-sub { fill: var(--dim); font: 11.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.d-mono { fill: var(--code); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.d-mono-accent { fill: var(--accent); font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.d-edge { stroke: var(--dim); stroke-width: 1.4; fill: none; }
.d-head { fill: var(--dim); }
.d-note { fill: var(--dim); font: italic 11.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.d-rule { stroke: var(--line); stroke-width: 1; stroke-dasharray: 5 5; fill: none; }
.caption { color: var(--dim); font-size: 13px; margin: -14px 0 22px; }

/* ---- footer ---- */
footer {
  border-top: 1px solid var(--line); padding: 20px 24px; color: var(--dim); font-size: 12px;
  text-align: center;
}

/* Keep the topic tree useful on laptops, and behind a toggle on narrow screens. */
@media (max-width: 1200px) {
  .shell { grid-template-columns: 280px minmax(0, 1fr); }
  .article-side { display: none; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; max-height: 60vh; border-right: none; border-bottom: 1px solid var(--line); padding: 16px; }
  .has-doc-nav .side { display: none; }
  .has-doc-nav .side.is-open { display: block; }
  .sidebar-toggle { display: block; width: 100%; padding: 12px 20px; text-align: left; font: inherit; font-weight: 600; color: var(--accent); background: var(--bg-alt); border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
  main { padding: 28px 20px 56px; }
  h1 { font-size: 2rem; }
}
@media (max-width: 540px) {
  table.members, table.members tbody, table.members tr, table.members td { display: block; width: 100%; }
  table.members thead { display: none; }
  table.members tr { border: 1px solid var(--line); margin-bottom: 12px; }
  table.members td { border: 0; }
  table.members td:first-child { background: var(--bg-alt); padding-bottom: 10px; }
  table.members td + td { border-top: 1px solid var(--line); }
}