/* FK Grotesk — self-hosted */
@font-face {
  font-family: 'FK Grotesk';
  src: url('fonts/FKGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FK Grotesk';
  src: url('fonts/FKGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FK Grotesk';
  src: url('fonts/FKGrotesk.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FK Grotesk Mono';
  src: url('fonts/FKGroteskMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --royal-blue-600: #4e36f5;
  --royal-blue-500: #5b53ff;
  --royal-blue-400: #7579ff;
  --royal-blue-300: #9ca7ff;
  --royal-blue-200: #c2cbff;
  --royal-blue-50: #ecf0ff;
  --royal-blue-25: #f5f7ff;
  --dark-blue-900: #0d0d18;
  --dark-blue-700: #2b2c4f;
  --dark-blue-500: #35386f;
  --dark-blue-400: #404489;
  --dark-blue-300: #747bbc;
  --dark-blue-200: #a5a9d4;
  --dark-blue-100: #cfd0e8;
  --dark-blue-50: #e9e9f5;
  --dark-blue-25: #f5f5fa;
  --ink-light-700: #384250;
  --ink-light-600: #4d5761;
  --ink-light-500: #6c737f;
  --ink-light-400: #9da4ae;
  --ink-light-300: #d2d6db;
  --ink-light-200: #e5e7eb;
  --ink-light-100: #f3f4f6;
  --ink-light-25: #fcfcfd;
  --sidebar-width: 272px;
  --toc-width: 240px;
  --header-height: 56px;
  --font-sans: 'FK Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'FK Grotesk Mono', 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
}

/* Semantic roles. Rules below reference these, never the palette directly, so
   the dark theme at the end of this file is one re-pointing of this block. */
:root {
  color-scheme: light dark;

  --bg: var(--ink-light-25);
  --surface: var(--dark-blue-25);
  --surface-accent: var(--royal-blue-25);
  --surface-hover: var(--royal-blue-50);
  /* Filled band behind a nav section heading. A step darker than --surface, so
     the heading reads as a rule across the column rather than as another item. */
  --surface-band: var(--ink-light-200);

  --text: var(--dark-blue-900);
  --text-secondary: var(--ink-light-700);
  --text-muted: var(--ink-light-600);
  --text-faint: var(--ink-light-500);
  --text-quote: var(--dark-blue-700);

  --border: var(--ink-light-200);
  --border-strong: var(--ink-light-300);
  --border-accent: var(--royal-blue-300);
  --border-accent-subtle: var(--royal-blue-200);

  --accent: var(--royal-blue-500);
  --accent-strong: var(--royal-blue-600);

  --code-surface: var(--dark-blue-900);
  --code-border: var(--dark-blue-700);
  --code-text: var(--royal-blue-600);
  --code-block-text: #e2e8f0;

  --focus-ring: #deefff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.32px;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 100;
  gap: 12px;
}

.header-logo {
  height: 18px;
  width: auto;
}

.header-divider {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
}

.header-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.14px;
}

.header-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Hidden below the drawer breakpoint rather than wrapped or scrolled: the header
   is a fixed 56px so a second row would be clipped, and all four destinations
   are already in the drawer. */
.header-nav {
  display: none;
  margin-left: auto;
  gap: 2px;
}

.header-nav-link {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: -0.14px;
}

.header-nav-link:hover {
  background: var(--surface-hover);
  color: var(--accent-strong);
}

.header-nav-link.active {
  background: var(--surface-hover);
  color: var(--accent);
  font-weight: 500;
}

/* The drawer holds no content — it is a state toggle the sidebar reads via
   :has(). Wrapping the sidebar in it instead would hide the sidebar on desktop,
   because browsers hide closed <details> content on a shadow-DOM slot that
   author CSS cannot reach. */
.nav-drawer {
  margin-left: auto;
}

/* 44px is the mobile tap-target floor, above the 40px medium button height. */
.nav-drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.nav-drawer-icon {
  flex-shrink: 0;
}

.nav-drawer-toggle::-webkit-details-marker {
  display: none;
}

.nav-drawer-toggle:hover {
  background: var(--surface-hover);
  color: var(--accent-strong);
}

.nav-drawer[open] .nav-drawer-toggle {
  background: var(--surface-hover);
  color: var(--accent);
}

/* box-shadow rather than outline so the 6px radius is preserved */
.nav-drawer-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

@media (prefers-reduced-motion: no-preference) {
  .nav-drawer-toggle {
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease-in-out;
  }
  .sidebar-link {
    transition: background-color 200ms ease, color 200ms ease;
  }
}

/* Search — the trigger in the header, and the palette it opens. Both are inert
   until assets/search.js runs: the button ships hidden and the dialog does not
   exist in the markup at all, so a page without the script is simply a page
   without search. */
.search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 44px is the mobile tap-target floor, as on the drawer toggle. */
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: -0.14px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
}

/* Outranks the display above, which would otherwise show the button before the
   script has revealed it. */
.search-trigger[hidden] {
  display: none;
}

.search-trigger:hover {
  background: var(--surface-hover);
  border-color: var(--border-accent-subtle);
  color: var(--accent-strong);
}

.search-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.search-icon {
  flex-shrink: 0;
}

/* Icon only until the header has the room for words. */
.search-trigger-label,
.search-trigger-hint {
  display: none;
}

.search-trigger-hint {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

.search-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 96px));
  /* Near the top rather than centred: the list grows downwards as you type, and
     a centred box would shift under the reader's eye as it did. */
  margin: 10vh auto auto;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 24px 48px -12px rgb(13 13 24 / 0.25);
}

/* Scoped to [open] so the closed dialog keeps the display:none it is given by
   the browser. */
.search-dialog[open] {
  display: flex;
  flex-direction: column;
}

.search-dialog::backdrop {
  background: rgb(13 13 24 / 0.4);
}

html:has(.search-dialog[open]) {
  overflow: hidden;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
}

.search-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: -0.32px;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
}

.search-input::placeholder {
  color: var(--text-faint);
}

.search-close {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}

.search-close:hover {
  background: var(--surface-hover);
  color: var(--accent-strong);
}

.search-status {
  padding: 10px 16px 2px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.search-results {
  flex: 1;
  /* Without this the list refuses to shrink below its content and the dialog
     grows past its own max-height instead of scrolling. */
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  padding: 6px 8px 8px;
}

.search-result-link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.search-result-link:hover,
.search-result-link.active {
  background: var(--surface-hover);
}

.search-result-page {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.search-result-heading {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  /* An operation heading is a whole URL path with no spaces to break at, and it
     is wider than the palette on a phone. */
  overflow-wrap: anywhere;
}

.search-result-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Weight and colour rather than a highlight band, so a match still reads on the
   selected row, whose background would otherwise swallow it. */
.search-dialog mark {
  background: none;
  color: var(--accent-strong);
  font-weight: 500;
}

/* Sidebar — mobile first, so it is the drawer panel and starts closed. A browser
   without :has() support therefore degrades to no mobile nav, which is the
   behaviour before this change, rather than to a broken desktop. */
.sidebar {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  overflow-y: auto;
  z-index: 90;
}

/* Specificity is load-bearing: this also has to beat the per-page rule that
   hides the sidebar on API reference pages, where the drawer is the only nav. */
.header:has(.nav-drawer[open]) ~ .sidebar {
  display: block;
  overscroll-behavior: contain;
}

/* Two devices carry the hierarchy, and both run the full width of the column so
   the eye picks up the structure before it reads any label: a filled band behind
   each section heading, and an indent step on the links under it. */
.sidebar-section-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-band);
  padding: 12px 24px;
  letter-spacing: -0.12px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  padding: 12px 24px 12px 40px;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
  letter-spacing: -0.14px;
}

.sidebar-link:hover {
  background: var(--surface-hover);
  color: var(--accent-strong);
}

.sidebar-link.active {
  color: var(--accent);
  font-weight: 500;
}

/* Only the current page shows the arrow, so it marks position rather than
   inviting a click. Reserving no space for it costs nothing: the labels sit
   well clear of the 16px it takes. */
.sidebar-arrow {
  display: none;
  flex-shrink: 0;
}

.sidebar-link.active .sidebar-arrow {
  display: block;
}

/* Main content area */
.main {
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
}

/* Guide pages. Mobile first: the table of contents stacks above the content
   until the viewport is wide enough to give it a column of its own. The gap is
   padding here rather than a margin on the contents, which would collapse
   through this box and out to .main. */
.guide-layout {
  display: block;
  padding-top: 24px;
}

/* The API URLs printed in inline code run to ~690px unbroken. `anywhere` rather
   than `break-word` because only `anywhere` lowers the min-content width, and it
   is the min-content floor that was pushing guide pages off a phone screen. */
/* width: 100% resolves against the track. Without it the `margin: 0 auto` below
   makes this shrink-to-fit, which floors at min-content and so ignores how narrow
   the viewport actually is. */
.guide-content {
  width: 100%;
  max-width: 800px;
  min-width: 0;
  padding: 24px 20px 60px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.main > .guide-content {
  margin: 0 auto;
}

/* Table of contents. Below the three-column breakpoint this used to be
   display: none, and readers read that as removed rather than as hidden, so it
   stays on the page as a wrapped index of the top-level sections. Wrapped
   rather than stacked because the longest guide carries 25 of them: as a list
   that is a screen of navigation before the first paragraph, and as an index it
   is four lines. */
.toc {
  margin: 0 20px;
  padding: 12px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}

.toc-title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.toc-item-sub {
  display: none;
}

/* Text S. The -0.14px tracking belongs to 14px; paired with the 12px this used
   to be, it was tighter than any step of the scale allows. */
.toc-link {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px;
  line-height: 18px;
  letter-spacing: -0.14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}

.toc-link:hover {
  color: var(--accent);
  border-color: var(--border-accent);
}

/* Set by assets/toc.js on the section under the header. */
.toc-link.active {
  color: var(--accent);
  border-color: var(--border-accent);
  background: var(--surface-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .toc-link {
    transition: color 200ms ease, border-color 200ms ease;
  }
}

.guide-content h1[id],
.guide-content h2[id],
.guide-content h3[id] {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.guide-content h1 {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.56px;
}

.guide-content h2 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text);
  letter-spacing: -0.44px;
}

.guide-content h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  margin-top: 28px;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: -0.34px;
}

.guide-content p {
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.guide-content a {
  color: var(--accent);
  text-decoration: none;
}

.guide-content a:hover {
  text-decoration: underline;
}

.guide-content ul, .guide-content ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.guide-content li {
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.guide-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--code-text);
  letter-spacing: 0;
}

.guide-content pre {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow-x: auto;
  background: var(--code-surface);
  border: 1px solid var(--code-border);
}

.guide-content pre code {
  display: block;
  padding: 16px 20px;
  background: none;
  border: none;
  color: var(--code-block-text);
  font-size: 13px;
  line-height: 1.6;
}

.guide-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.guide-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 14px;
}

.guide-content th {
  text-align: left;
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  color: var(--text);
}

.guide-content td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.guide-content blockquote {
  border-left: 3px solid var(--border-accent);
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--surface-accent);
  border-radius: 0 6px 6px 0;
}

.guide-content blockquote p {
  margin-bottom: 0;
  color: var(--text-quote);
}

.guide-content strong {
  font-weight: 600;
  color: var(--text);
}

.guide-content .info-box,
.guide-content .important-info {
  background: var(--surface-accent);
  border: 1px solid var(--border-accent-subtle);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

/* Scalar API reference — brand overrides */
.scalar-wrapper {
  height: calc(100vh - var(--header-height));
}

.scalar-wrapper .scalar-app {
  --scalar-font: 'FK Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --scalar-font-code: 'FK Grotesk Mono', 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
  --scalar-color-1: var(--text);
  --scalar-color-2: var(--text-secondary);
  --scalar-color-3: var(--text-faint);
  --scalar-color-accent: var(--accent);
  --scalar-color-background-1: var(--bg);
  --scalar-color-background-2: var(--surface);
  --scalar-color-background-3: var(--surface);
  --scalar-color-border: var(--border);
  --scalar-radius: 6px;
  --scalar-radius-lg: 8px;
}

/* Tablet and up — the drawer folds away and the sidebar becomes permanent */
@media (min-width: 48rem) {
  .header-nav {
    display: flex;
  }
  /* Off the touch floor and onto the header's own scale, with the word back. */
  .search-trigger {
    min-height: 34px;
    min-width: 0;
    justify-content: flex-start;
  }
  .search-trigger-label {
    display: inline;
  }
  .nav-drawer {
    display: none;
  }
  .sidebar {
    display: block;
    right: auto;
    width: var(--sidebar-width);
    border-right: 1px solid var(--border);
  }
  .main {
    margin-left: var(--sidebar-width);
  }
  .guide-content {
    padding: 40px 0 80px;
  }
  .main > .guide-content {
    padding: 40px 48px 80px;
  }
  /* Scoped so it cannot override the mobile padding above: both this and
     .main > .guide-content outrank .guide-content on specificity. */
  .guide-layout .guide-content {
    margin: 0 auto;
    padding: 40px 48px 80px;
  }
  .guide-layout {
    padding-top: 40px;
  }
  /* 800px content column less its two 48px gutters, so the box lines up with
     the text it summarises rather than with the column holding it. */
  .toc {
    max-width: 704px;
    margin: 0 auto;
  }
}

/* Desktop — the table of contents becomes a column of its own, sitting between
   the site nav and the content as it did before the migration. */
@media (min-width: 80rem) {
  /* The shortcut is advice, not a control, so it waits for a header with room
     to spare. */
  .search-trigger-hint {
    display: inline;
  }
  .guide-layout {
    display: grid;
    grid-template-columns: var(--toc-width) minmax(0, 1fr);
    gap: 0 32px;
    padding: 0 48px;
  }
  /* Both columns sit against the nav and the content takes the width that is
     left, rather than the pair being centred with a dead gutter on each side.
     The cap is a reading limit, not a layout one: past about 1100px a line of
     body text is too long to track back to the start of the next one. */
  .guide-layout .guide-content {
    max-width: 1100px;
    margin: 0;
    padding: 40px 0 80px;
  }
  /* The sticky offset already carries the 40px below the header, and the column
     is pinned from the first paint because its static position is above that
     offset. Padding on top of it would push the heading a step below the page
     title it sits beside. */
  .toc {
    position: sticky;
    top: calc(var(--header-height) + 40px);
    align-self: start;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    max-height: calc(100vh - var(--header-height) - 80px);
    overflow-y: auto;
  }
  /* A column has the room to stack, so the index becomes a list again and the
     sub-entries come back with it. */
  .toc-list {
    display: block;
  }
  .toc-item-sub {
    display: block;
  }
  .toc-link {
    padding: 8px 0 8px 12px;
    border: 0;
    border-radius: 0;
    background: none;
    /* The bar is the position marker, so it is drawn only where you are. */
    border-left: 2px solid transparent;
  }
  /* Indent carries the level. Entries wrap here, and a wrapped parent line sits
     at the parent indent, so the step has to clear the eye at a glance. */
  .toc-link-sub {
    padding-left: 28px;
    color: var(--text-faint);
  }
  .toc-link:hover {
    border-left-color: var(--border-accent);
  }
  /* Outranks the quieter .toc-link-sub colour, so a marked sub-entry reads the
     same as a marked section. */
  .toc-link.active {
    color: var(--accent);
    background: none;
    border-left-color: var(--accent);
  }
}

/* Dark theme. Re-points the role layer and nothing else; it follows the OS, so
   there is no toggle and no JavaScript. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--dark-blue-900);
    /* No ramp step sits between --dark-blue-900 and --dark-blue-700, so this is
       the 40% blend of the two: a panel that lifts off the page without
       glowing. */
    --surface: #19192e;
    --surface-accent: var(--surface);
    --surface-hover: var(--dark-blue-700);
    /* Dark needs less separation than light to read as a band, and taking the
       next step up would collide with --surface-hover on the links below it. */
    --surface-band: var(--surface);

    --text: var(--ink-light-100);
    --text-secondary: var(--ink-light-300);
    --text-muted: var(--ink-light-400);
    /* --ink-light-500 would be 4.04:1 here, under the 4.5:1 floor */
    --text-faint: var(--ink-light-400);
    --text-quote: var(--ink-light-300);

    --border: var(--dark-blue-700);
    --border-strong: var(--dark-blue-500);
    --border-accent: var(--royal-blue-400);
    --border-accent-subtle: var(--dark-blue-400);

    /* --royal-blue-500 drops to 2.61:1 on --surface-hover, where active nav
       links live, so the accent lightens by two steps in dark. */
    --accent: var(--royal-blue-300);
    --accent-strong: var(--royal-blue-200);

    --code-surface: var(--surface);
    --code-text: var(--royal-blue-300);
  }

  /* Screenshots are light-UI captures. A mat makes them read as inset artefacts
     rather than glaring holes, and keeps the colours they document honest. */
  .guide-content img {
    background: var(--ink-light-25);
    padding: 8px;
  }

  .scalar-wrapper .scalar-app {
    color-scheme: dark;
    --scalar-background-1: var(--bg);
    --scalar-background-2: var(--surface);
    --scalar-background-3: var(--surface-hover);
    --scalar-border-color: var(--border);
    --scalar-sidebar-background-1: var(--bg);
    --scalar-sidebar-border-color: var(--border);
    --scalar-sidebar-color-1: var(--text);
    --scalar-sidebar-color-2: var(--text-muted);
    --scalar-sidebar-color-active: var(--accent);
    --scalar-sidebar-item-hover-background: var(--surface-hover);
    --scalar-sidebar-item-hover-color: var(--accent-strong);
    --scalar-sidebar-item-active-background: var(--surface-hover);
    --scalar-sidebar-search-background: var(--surface);
    --scalar-sidebar-search-border-color: var(--border);
    --scalar-sidebar-search-color: var(--text-muted);
  }
}