:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #18181b;
  --muted: #5b5b66;
  --line: rgba(0,0,0,.10);
  --accent: #0d9488;
  --code-bg: #f4f4f5;
  --sidebar-bg: #fafafa;
  --max: 46rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0e; --fg: #ececf1; --muted: #a1a1aa; --line: rgba(255,255,255,.12);
    --accent: #2dd4bf; --code-bg: #17171c; --sidebar-bg: #101015;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent); }
.skip {
  position: absolute; left: -9999px; top: 0; padding: .6rem 1rem;
  background: var(--bg); z-index: 100;
}
.skip:focus { left: 0; }

/* -- Top bar -- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1.25rem; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; text-decoration: none; color: inherit; font-size: .95rem; }
.repo { font-size: .85rem; text-decoration: none; }
.menu {
  display: none; border: 1px solid var(--line); background: transparent; color: inherit;
  border-radius: .45rem; padding: .25rem .5rem; cursor: pointer; font-size: 1rem;
}

/* -- Search -- */
.search { position: relative; margin-left: auto; width: min(22rem, 45vw); }
#q {
  width: 100%; padding: .4rem .7rem; border-radius: .5rem; font: inherit; font-size: .875rem;
  border: 1px solid var(--line); background: var(--code-bg); color: inherit;
}
.results {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; max-height: 65vh;
  overflow-y: auto; background: var(--bg); border: 1px solid var(--line);
  border-radius: .6rem; box-shadow: 0 12px 28px -12px rgba(0,0,0,.35); padding: .35rem;
}
.results a {
  display: block; padding: .45rem .6rem; border-radius: .4rem;
  text-decoration: none; color: inherit;
}
.results a:hover, .results a:focus { background: var(--code-bg); }
.results .where { display: block; font-size: .75rem; color: var(--muted); }
.results .none { padding: .6rem; color: var(--muted); font-size: .875rem; }

/* -- Layout -- */
.shell {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr) 14rem;
  gap: 2.5rem; max-width: 84rem; margin: 0 auto; padding: 2rem 1.25rem 5rem;
  align-items: start;
}
.sidebar { position: sticky; top: 4.25rem; max-height: calc(100vh - 5.5rem); overflow-y: auto; }
.sidebar section + section { margin-top: 1.4rem; }
.sidebar h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 .45rem;
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar a {
  display: block; padding: .28rem .6rem; border-radius: .4rem;
  text-decoration: none; color: inherit; font-size: .9rem;
  border-left: 2px solid transparent;
}
.sidebar a:hover { background: var(--sidebar-bg); }
.sidebar a[aria-current="page"] {
  color: var(--accent); border-left-color: var(--accent); font-weight: 600;
}

.toc { position: sticky; top: 4.25rem; max-height: calc(100vh - 5.5rem); overflow-y: auto; }
.toc h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 .45rem;
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: block; padding: .2rem 0; font-size: .82rem; color: var(--muted);
  text-decoration: none; overflow-wrap: anywhere;
}
.toc a:hover { color: var(--accent); }

/* -- Prose -- */
.prose { max-width: var(--max); }
.prose h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 1rem; letter-spacing: -.02em; }
.prose h2 {
  font-size: 1.3rem; margin: 2.4rem 0 .8rem; padding-top: .9rem;
  border-top: 1px solid var(--line); letter-spacing: -.01em;
}
.prose h3 { font-size: 1.05rem; margin: 1.8rem 0 .6rem; }
.prose h4 { font-size: .95rem; margin: 1.4rem 0 .5rem; color: var(--muted); }
.prose p { margin: 0 0 1rem; }
/* An item carrying real blocks renders as paragraphs; without this the list
   loosens up and stops looking like a list. */
.prose li > p { margin: 0 0 .5rem; }
.prose li > p:last-child { margin-bottom: 0; }
.prose li > blockquote { margin: .5rem 0; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.prose li { margin: .25rem 0; }
.prose li > ul, .prose li > ol { margin: .25rem 0 .25rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
/* These documents put a rule before most section headings, and h2 draws its
   own. Left alone that is two lines a few pixels apart. */
.prose hr + h2 { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
.prose blockquote {
  margin: 0 0 1rem; padding: .1rem 1rem; border-left: 3px solid var(--accent);
  color: var(--muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  background: var(--code-bg); padding: .12em .35em; border-radius: .3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em;
}
.prose pre {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: .6rem;
  padding: .9rem 1rem; overflow-x: auto; margin: 0 0 1.2rem;
}
.prose pre code { background: none; padding: 0; font-size: .82rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Code frames
   --------------------------------------------------------------------------
   Dark in both site themes, deliberately. An editor is dark in most people's
   editors, and a code block that inverts with the page reads as part of the
   prose rather than as something you are about to paste into a file.

   Colours are VS Code's Dark+ palette, because matching the editor a reader
   already has open is the whole point of the exercise.
*/
.code {
  --ed-bg: #1e1e1e;
  --ed-bar: #252526;
  --ed-fg: #d4d4d4;
  --ed-line: rgba(255,255,255,.08);
  --ed-gutter: #6e7681;

  margin: 0 0 1.3rem; border-radius: .6rem; overflow: hidden;
  border: 1px solid var(--ed-line); background: var(--ed-bg);
  box-shadow: 0 6px 20px -12px rgba(0,0,0,.55);
}
.code__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .75rem; background: var(--ed-bar);
  border-bottom: 1px solid var(--ed-line);
  font-size: .72rem; letter-spacing: .03em; color: #9d9d9d;
}
.code__name { font-weight: 600; text-transform: uppercase; }
.code__copy {
  margin-left: auto; border: 1px solid var(--ed-line); background: transparent;
  color: #c9c9c9; border-radius: .35rem; padding: .12rem .5rem;
  font: inherit; font-size: .7rem; cursor: pointer;
}
.code__copy:hover { background: rgba(255,255,255,.08); color: #fff; }
.code__copy[data-done] { color: #4ec9b0; border-color: #4ec9b0; }

.code__body { display: flex; align-items: stretch; }
/* Scoped with .code so it outranks the .prose pre rule above, which would
   otherwise hand the gutter that block's padding, background and border. */
.code .code__gutter {
  margin: 0; padding: .85rem .6rem .85rem .85rem; flex: none; text-align: right;
  color: var(--ed-gutter); background: var(--ed-bg);
  border: 0; border-right: 1px solid var(--ed-line); border-radius: 0;
  user-select: none; -webkit-user-select: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.65; overflow: hidden;
}
/* The font metrics live on both <pre> elements, not on the <code> inside.
   A <pre> without its own line-height inherits the body's — 26px against the
   gutter's 20.6px — and the numbers drift a line out of step by the tenth
   row. The two columns have to be metrically identical. */
.code .code__pre {
  margin: 0; padding: .85rem 1rem; flex: 1 1 auto; min-width: 0;
  background: var(--ed-bg); border: 0; border-radius: 0; overflow-x: auto;
  color: var(--ed-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.65;
}
.code .code__pre code {
  color: inherit; background: none; padding: 0;
  font-family: inherit; font-size: inherit; line-height: inherit;
}

/* -- Terminal ------------------------------------------------------------ */
.code--terminal { --ed-bg: #15151a; --ed-bar: #2b2b31; }
.code--terminal .code__bar { justify-content: flex-start; }
.code__dots { display: flex; gap: .32rem; }
.code__dots i { width: .62rem; height: .62rem; border-radius: 50%; display: block; }
.code__dots i:nth-child(1) { background: #ff5f57; }
.code__dots i:nth-child(2) { background: #febc2e; }
.code__dots i:nth-child(3) { background: #28c840; }

/* The prompt is drawn, never written: a reader copying the block gets the
   command, not a shell sigil they then have to delete. */
.code--terminal .ln { display: block; padding-left: 1.15rem; text-indent: -1.15rem; }
.code--terminal .ln--cmd::before {
  content: '$'; color: #27c93f; font-weight: 700;
  display: inline-block; width: 1.15rem; text-indent: 0;
}

/* -- Tokens (VS Code Dark+) ---------------------------------------------- */
.t-comment      { color: #6a9955; font-style: italic; }
.t-string       { color: #ce9178; }
.t-keyword      { color: #569cd6; }
.t-variable     { color: #9cdcfe; }
.t-number       { color: #b5cea8; }
.t-function     { color: #dcdcaa; }
.t-type         { color: #4ec9b0; }
.t-operator     { color: #d4d4d4; }
.t-tag          { color: #569cd6; }
.t-attr         { color: #9cdcfe; }
.t-attribute    { color: #c586c0; }
.t-directive    { color: #c586c0; }
.t-interpolation{ color: #dcdcaa; }
.t-envkey       { color: #9cdcfe; }
.t-flag         { color: #c586c0; }
.t-builtin      { color: #dcdcaa; }

@media (max-width: 40rem) {
  .code .code__gutter { display: none; }
}
.table-scroll { overflow-x: auto; margin: 0 0 1.2rem; }
.prose table { border-collapse: collapse; width: 100%; font-size: .875rem; }
.prose th, .prose td {
  border: 1px solid var(--line); padding: .45rem .65rem; text-align: left; vertical-align: top;
}
.prose th { background: var(--code-bg); font-weight: 600; }
.prose a.anchor {
  float: left; margin-left: -1rem; width: 1rem; opacity: 0;
  text-decoration: none; color: var(--muted); font-weight: 400;
}
.prose h1:hover .anchor, .prose h2:hover .anchor,
.prose h3:hover .anchor, .prose h4:hover .anchor { opacity: 1; }

.pagefoot {
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .85rem;
}

@media (max-width: 68rem) {
  .shell { grid-template-columns: 15rem minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 52rem) {
  .menu { display: block; }
  .search { width: auto; flex: 1; }
  .repo { display: none; }
  .shell { grid-template-columns: minmax(0, 1fr); padding-top: 1.25rem; }
  .sidebar {
    position: static; max-height: none; display: none;
    padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line);
  }
  .sidebar.open { display: block; }
}