/* The manual's theme over mdBook's: the landing page's palette, dark whatever the system prefers, quiet chrome.
   The palette is declared under the landing page's own names, the site build checks the values agree, and mdBook's
   names are mapped onto it, all on the root at the rank of mdBook's no-script rule, so whichever theme its script
   lands on, or none, reads the same, and its theme menu is hidden. Text has two tones: the ink, `--fg`, for
   headings, emphasis and the chrome, and `--text` a step below it for the running prose, so a long read never
   glares. */

html:root {
  --sidebar-target-width: 280px;
  --content-max-width: 800px;
  --menu-bar-height: 56px;
  --page-padding: 24px;
  --mono-font: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --code-font-size: 0.875em;

  /* The landing page's palette, under its names */
  --bg: #0f0f10;
  --fg: #ececec;
  --muted: #9c9ca3;
  --faint: #84848c;
  --line: #232326;
  --line-strong: #303035;
  --panel: #151517;
  --accent: #e5761d;
  --accent-ink: #ea8a40;
  --accent-soft: rgba(234, 138, 64, .12);
  --term-bg: #141416;
  --term-fg: #ebe8e3;
  --term-dim: #8f8c86;
  --term-in: #ffffff;
  --term-ok: #8fd48a;
  --term-mid: #f0c060;
  --term-no: #ff7b73;
  --tk-key: #f0a15c;
  --tk-table: #a3a6ff;
  --tk-string: #9ad18f;
  --tk-num: #f0c060;
  --tk-comment: #8b8b8b;
  --tk-punct: #868686;
  --tk-kw: #a3a6ff;

  /* The manual's own two: the running prose, and the sidebar's links */
  --text: #cccccc;
  --sidebar-fg: #bdbdbd;

  /* mdBook's names, onto the palette */
  --sidebar-bg: var(--panel);
  --sidebar-non-existant: var(--faint);
  --sidebar-active: var(--accent-ink);
  --sidebar-spacer: var(--line);
  --sidebar-header-border-color: var(--line);
  --scrollbar: var(--line-strong);
  --icons: var(--faint);
  --icons-hover: var(--fg);
  --links: var(--accent-ink);
  --inline-code-color: var(--text);
  --theme-hover: var(--line);
  --quote-bg: color-mix(in srgb, var(--accent) 5%, var(--panel));
  --quote-border: var(--accent);
  --warning-border: var(--accent);
  --table-border-color: var(--line);
  --table-header-bg: transparent;
  --table-alternate-bg: transparent;
  --searchbar-border-color: var(--line-strong);
  --searchbar-bg: var(--panel);
  --searchbar-fg: var(--fg);
  --searchbar-shadow-color: transparent;
  --searchresults-header-fg: var(--muted);
  --searchresults-border-color: var(--line);
  --searchresults-li-bg: var(--panel);
  --search-mark-bg: color-mix(in srgb, var(--accent) 25%, var(--bg));
  --footnote-highlight: var(--search-mark-bg);
  --color-scheme: dark;
  --copy-button-filter: invert(55%);
  --copy-button-filter-hover: invert(95%);
  --overlay-bg: rgba(0, 0, 0, 0.5);
}

/* Type */

html {
  font-family: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
}

/* The page reads in the text tone. Headings keep the ink through mdBook's own rule; emphasis takes it back. */
.content main {
  padding: 12px 0 64px;
  color: var(--text);
}

.content strong {
  color: var(--fg);
}

.content p,
.content li {
  line-height: 1.65;
}

/* Lines break so that no last line is a lone word, and headings balance their lines */
.content :is(p, li, dd) {
  text-wrap: pretty;
}

.content :is(h1, h2, h3, h4) {
  text-wrap: balance;
}

.content li + li {
  margin-top: 0.3em;
}

.content h1 {
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin: 0.5em 0 0.7em;
}

.content h2 {
  font-size: 2.15rem;
  font-weight: 560;
  letter-spacing: -0.012em;
  margin-block-start: 2.4em;
  margin-block-end: 0.6em;
}

.content h3 {
  font-size: 1.7rem;
  font-weight: 560;
  margin-block-start: 2em;
}

.content a,
.content a:visited {
  color: var(--links);
}

.content .header:link,
.content .header:visited {
  color: var(--fg);
}

/* Code */

/* Inline code wears the colour of its sentence: ink in a heading or a lead, text in the prose, the link's in a link */
.content :not(pre) > code {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1em 0.38em;
  font-size: 0.86em;
  color: inherit;
}

.content pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  line-height: 1.85;
  overflow: auto;
}

.content pre > code {
  background: transparent;
  border: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* Code keeps its lines: one wider than the block scrolls, and the side it hides behind fades while there is more. A
   transcript wraps like the site's terminal, each wrapped line hanging under its start. Short inline code stays whole. */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes fades { from { --fade-r: 2.5em; } 10% { --fade-l: 2.5em; } 90% { --fade-r: 2.5em; } to { --fade-l: 2.5em; } }
@supports (animation-timeline: scroll()) {
  .content pre > code {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
    animation: fades linear both;
    animation-timeline: scroll(self inline);
  }
}
.content pre.term > code { white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 4ch hanging each-line; }
.content code.whole { white-space: nowrap; }

/* Tables of pages split their columns in one place, so a page of them reads as one list */
.content table.pages { table-layout: fixed; width: 100%; }
.content table.pages th:first-child { width: 30%; }
@media (max-width: 480px) { .content table.pages th:first-child { width: 40%; } }

.hljs {
  background: transparent;
  color: var(--fg);
}

.content pre > .buttons {
  margin: 8px 8px 0 0;
}

.content pre > .buttons button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  padding: 4px;
}

/* Tables, quotes, keys */

.content table {
  width: 100%;
  margin: 1.2em 0;
  font-size: 0.95em;
}

.content table thead tr {
  border: 0;
  border-bottom: 1px solid var(--line);
}

.content table th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 12px 10px;
}

.content table td {
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}

.content table tbody tr:last-child td {
  border-bottom: 0;
}

.content blockquote {
  margin: 1.4em 0;
  padding: 10px 18px;
  border: 0;
  border-left: 3px solid var(--quote-border);
  border-radius: 0 8px 8px 0;
  color: inherit;
}

.content kbd {
  border-radius: 5px;
  border: 1px solid var(--line);
  box-shadow: none;
  background: var(--panel);
}

/* The bar */

#mdbook-menu-bar {
  height: var(--menu-bar-height);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

#mdbook-menu-bar.bordered {
  border-bottom-color: var(--line);
}

.menu-title {
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.menu-title a {
  color: inherit;
  text-decoration: none;
}

.menu-title a::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: -5px;
  background: url("/logo.png") center / contain no-repeat;
}

.icon-button {
  color: var(--icons);
}

/* The wordmark at the bar's centre: the two sides share what is left, so it moves only when a side needs the room */
#mdbook-menu-bar .left-buttons, #mdbook-menu-bar .right-buttons { flex: 1 1 0; }
#mdbook-menu-bar .right-buttons { display: flex; align-items: center; justify-content: flex-end; }
#mdbook-menu-bar .menu-title { flex: none; }

/* On a phone the bar keeps what a reader uses, each a finger wide */
@media (max-width: 480px) {
  #mdbook-menu-bar .right-buttons a[href$="print.html"] { display: none; }
  #mdbook-menu-bar .icon-button, #mdbook-menu-bar .right-buttons > a { padding-inline: 9px; }
}

#mdbook-searchbar {
  border: 1px solid var(--searchbar-border-color);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 1.5rem;
}

#mdbook-searchbar:focus,
#mdbook-searchbar.active {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  border-color: var(--accent);
}

/* One theme, so no menu to choose it */
#mdbook-theme-toggle,
#mdbook-theme-list {
  display: none;
}

/* The sidebar */

.sidebar {
  font-size: 1.45rem;
  border-right: 1px solid var(--line);
}

.sidebar .sidebar-scrollbox {
  padding: 18px 12px 30px;
}

.chapter li.part-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 10px 6px;
}

/* The open page's own headings, listed under it */
.chapter li.header-item {
  font-size: 1.3rem;
  color: var(--muted);
  margin: 1px 0;
}

.chapter li.header-item a {
  padding: 4px 10px;
}

.chapter a.current-header {
  color: var(--sidebar-active);
}

.chapter li.chapter-item {
  margin-block-start: 2px;
}

.chapter li a {
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--sidebar-fg);
}

.chapter li a:hover {
  background: var(--theme-hover);
  color: var(--fg);
  text-decoration: none;
}

.chapter li a.active {
  color: var(--sidebar-active);
  background: var(--accent-soft);
}

.sidebar .sidebar-resize-handle {
  background: transparent;
}

/* Previous and next */

.nav-chapters {
  color: var(--icons);
}

.nav-chapters:hover {
  background: var(--panel);
  color: var(--fg);
}

.nav-wrapper {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 20px;
}

.mobile-nav-chapters {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Code, in the site's palette */

.hljs-comment, .hljs-quote { color: var(--tk-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type, .hljs-meta { color: var(--tk-kw); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--tk-string); }
.hljs-number, .hljs-literal { color: var(--tk-num); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: var(--tk-key); }
.hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--tk-table); font-weight: 500; }
.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-punctuation { color: var(--fg); }

/* A transcript, or a command: the site's terminal, in both themes */

.content pre.term {
  background: var(--term-bg);
  border-color: var(--line);
  color: var(--term-fg);
}

.content pre.term code { color: var(--term-fg); }
pre.term .p, pre.term .arrow { color: var(--accent); }
pre.term .in, pre.term .name { color: var(--term-in); }
pre.term .name { font-weight: 500; }
pre.term .own, pre.term .c { color: var(--term-dim); }
pre.term .c { font-style: italic; }
pre.term .out { color: var(--term-fg); }
pre.term .add, pre.term .hi { color: var(--term-ok); }
pre.term .del, pre.term .no { color: var(--term-no); }
pre.term .mid { color: var(--term-mid); }
pre.term .buttons button { color: var(--term-dim); }
pre.term .buttons button:hover { color: var(--term-fg); }

/* The bar: the brand leads home, and the site's pages sit beside the icons */

.right-buttons a.site {
  display: inline-block;
  margin: 0 14px 0 0;
  padding: 0 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sidebar-fg);
  text-decoration: none;
  vertical-align: 1px;
}

.right-buttons a.site:hover { color: var(--links); }

/* Get started, the one warm link in the bar, underlined softly */
.right-buttons a.start { color: var(--links); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.right-buttons a.start:hover { color: var(--fg); text-decoration-color: var(--accent); }

/* Below tablet width the bar is full; the examples at the end of the page lead the way instead. */
@media (max-width: 720px) {
  .right-buttons a.site { display: none; }
}

/* The examples, closing every page. The tracks may go narrower than a sentence, which then ends in an
   ellipsis instead of widening the card past the column. */

.at-work {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem 3.2rem;
  align-items: center;
  margin: 6rem 0 1rem;
  padding: 2.6rem 3rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.at-work .label {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: 560;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--links);
}

.at-work h2 {
  margin: 0 0 1rem;
  color: var(--fg);
  font-size: 2.5rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.at-work .words p {
  margin: 0 0 1.8rem;
  color: var(--muted);
  font-size: 1.55rem;
  line-height: 1.55;
}

/* Named under .content, so the links here outrank mdBook's own link rule without a flag on each one. */
.content .at-work .go,
.content .at-work .go:visited {
  display: inline-block;
  padding: 1rem 1.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-weight: 500;
  font-size: 1.5rem;
  text-decoration: none;
  transition: border-color 0.15s;
}

.content .at-work .go:hover { border-color: var(--muted); }

.at-work .said {
  margin: 0;
  padding: 1.5rem 1.8rem;
  list-style: none;
  border-radius: 12px;
  background: var(--term-bg);
  border: 1px solid var(--line);
  font: 1.3rem/1.9 var(--mono-font);
}

.content .at-work .said a,
.content .at-work .said a:visited {
  display: block;
  color: var(--term-dim);
  text-decoration: none;
  overflow-wrap: anywhere;
  text-indent: 2ch hanging;  /* a long sentence wraps under its own start, never cut short */
  transition: color 0.15s;
}

.content .at-work .said a:hover { color: var(--term-in); }
.at-work .said i { font-style: normal; color: var(--accent); }

@media (max-width: 720px) {
  .at-work { grid-template-columns: minmax(0, 1fr); padding: 2rem 2.2rem; }
}

/* Under the card, one quiet line: the FAQ, the privacy policy and the repository, on every page of the manual. */

.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  margin: 1.6rem 0 0;
  font-size: 1.35rem;
  color: var(--muted);
}

.content .colophon a,
.content .colophon a:visited {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

.content .colophon a:hover { color: var(--fg); }