:root {
  --octc-color-primary: #4f6fae;
  --octc-color-primary-hover: #425f96;
  --octc-color-bg: #ffffff;
  --octc-color-bg-alt: #f5f7fb;
  --octc-color-text: #131a30;
  --octc-color-text-muted: #4f607b;
  --octc-color-border: #d2dbea;
  --octc-color-code-bg: #101a31;
  --octc-color-code-bg-top: #18264a;
  --octc-color-code-text: #edf3ff;
}
[data-theme="dark"] {
  --octc-color-primary: #86a4da;
  --octc-color-primary-hover: #a3bbe8;
  --octc-color-bg: #060816;
  --octc-color-bg-alt: #0d1528;
  --octc-color-text: #ebf2ff;
  --octc-color-text-muted: #8ea0bf;
  --octc-color-border: #223252;
  --octc-color-code-bg: #0a1020;
  --octc-color-code-bg-top: #0a1020;
  --octc-color-code-text: #e7f0ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --octc-color-primary: #86a4da;
    --octc-color-primary-hover: #a3bbe8;
    --octc-color-bg: #060816;
    --octc-color-bg-alt: #0d1528;
    --octc-color-text: #ebf2ff;
    --octc-color-text-muted: #8ea0bf;
    --octc-color-border: #223252;
    --octc-color-code-bg: #0a1020;
    --octc-color-code-bg-top: #0a1020;
    --octc-color-code-text: #e7f0ff;
  }
}
:root {
  --octc-sidebar-width: 260px;
  --octc-header-height: 60px;
  --octc-max-content-width: 960px;
}
:root {
  --octc-font-sans: "IBM Plex Sans", "Avenir Next", "Segoe UI Variable", "Segoe UI", sans-serif;
  --octc-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}
/* Generated from docs/_site/brand/cdkd.tokens.json by docs/_site/brand/tokens.ts. */

:root {
  --cdkd-navy: #232F3E;
  --cdkd-orange: #FF8A1F;
  --cdkd-paper: #F7F7F4;
  --cdkd-cloud: #F2F4F6;
  --cdkd-night: #0D141E;
  --cdkd-font-sans: "Geist", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cdkd-font-jp: "Noto Sans JP", "Geist", system-ui, sans-serif;
  --cdkd-font-mono: "Geist Mono", "Noto Sans JP", ui-monospace, SFMono-Regular, Consolas, monospace;
  --cdkd-weight-regular: 400;
  --cdkd-weight-medium: 500;
  --cdkd-weight-semibold: 600;
  --cdkd-font-features-ui: "kern" 1, "liga" 1;
  --cdkd-font-features-code: "liga" 0, "calt" 0;
  --cdkd-numeric-data: tabular-nums lining-nums slashed-zero;
  --cdkd-type-display-size: 3.5rem;
  --cdkd-type-display-leading: 4rem;
  --cdkd-type-display-weight: 600;
  --cdkd-type-display-tracking: -0.04em;
  --cdkd-type-h1-size: 2.5rem;
  --cdkd-type-h1-leading: 3rem;
  --cdkd-type-h1-weight: 600;
  --cdkd-type-h1-tracking: -0.03em;
  --cdkd-type-h2-size: 2rem;
  --cdkd-type-h2-leading: 2.5rem;
  --cdkd-type-h2-weight: 600;
  --cdkd-type-h2-tracking: -0.025em;
  --cdkd-type-h3-size: 1.5rem;
  --cdkd-type-h3-leading: 2rem;
  --cdkd-type-h3-weight: 600;
  --cdkd-type-h3-tracking: -0.015em;
  --cdkd-type-body-size: 1rem;
  --cdkd-type-body-leading: 1.625rem;
  --cdkd-type-body-weight: 400;
  --cdkd-type-body-tracking: 0em;
  --cdkd-type-body-jp-size: 1rem;
  --cdkd-type-body-jp-leading: 1.75rem;
  --cdkd-type-body-jp-weight: 400;
  --cdkd-type-body-jp-tracking: 0em;
  --cdkd-type-small-size: 0.875rem;
  --cdkd-type-small-leading: 1.375rem;
  --cdkd-type-small-weight: 400;
  --cdkd-type-small-tracking: 0em;
  --cdkd-type-label-size: 0.875rem;
  --cdkd-type-label-leading: 1.25rem;
  --cdkd-type-label-weight: 500;
  --cdkd-type-label-tracking: 0em;
  --cdkd-type-caption-size: 0.75rem;
  --cdkd-type-caption-leading: 1.125rem;
  --cdkd-type-caption-weight: 400;
  --cdkd-type-caption-tracking: 0em;
  --cdkd-type-overline-size: 0.6875rem;
  --cdkd-type-overline-leading: 1rem;
  --cdkd-type-overline-weight: 500;
  --cdkd-type-overline-tracking: 0.08em;
  --cdkd-type-code-size: 0.875rem;
  --cdkd-type-code-leading: 1.375rem;
  --cdkd-type-code-weight: 400;
  --cdkd-type-code-tracking: 0em;
  --cdkd-type-metric-size: 2rem;
  --cdkd-type-metric-leading: 2.5rem;
  --cdkd-type-metric-weight: 500;
  --cdkd-type-metric-tracking: -0.025em;
  --cdkd-space-0: 0rem;
  --cdkd-space-1: 0.25rem;
  --cdkd-space-2: 0.5rem;
  --cdkd-space-3: 0.75rem;
  --cdkd-space-4: 1rem;
  --cdkd-space-5: 1.25rem;
  --cdkd-space-6: 1.5rem;
  --cdkd-space-8: 2rem;
  --cdkd-space-10: 2.5rem;
  --cdkd-space-12: 3rem;
  --cdkd-space-16: 4rem;
  --cdkd-space-20: 5rem;
  --cdkd-space-24: 6rem;
  --cdkd-radius-sm: 4px;
  --cdkd-radius-md: 8px;
  --cdkd-radius-lg: 12px;
  --cdkd-radius-xl: 16px;
  --cdkd-size-control-height: 44px;
  --cdkd-size-icon-sm: 16px;
  --cdkd-size-icon: 20px;
  --cdkd-size-icon-lg: 24px;
  --cdkd-border-width: 1px;
  --cdkd-border-focus-width: 2px;
  --cdkd-border-focus-offset: 3px;
  --cdkd-layout-max: 75rem;
  --cdkd-layout-gutter: 1.5rem;
  --cdkd-layout-measure: 68ch;
  --cdkd-layout-measure-jp: 40em;
  --cdkd-layout-breakpoint: 48rem;
  --cdkd-layout-columns-desktop: 12;
  --cdkd-layout-columns-mobile: 4;
  --cdkd-layout-gutter-mobile: 1rem;
  --cdkd-motion-fast: 120ms;
  --cdkd-motion-normal: 180ms;
  --cdkd-motion-slow: 240ms;
  --cdkd-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --cdkd-motion-distance: 4px;
  --cdkd-syntax-background: #0D141E;
  --cdkd-syntax-foreground: #F2F4F6;
  --cdkd-syntax-function: #FFAD5C;
  --cdkd-syntax-constant: #8ABEFF;
  --cdkd-syntax-string: #69D8A6;
  --cdkd-syntax-string-expression: #69D8A6;
  --cdkd-syntax-keyword: #F9C16D;
  --cdkd-syntax-parameter: #F2F4F6;
  --cdkd-syntax-punctuation: #B6C2CF;
  --cdkd-syntax-comment: #98A9BA;
  --cdkd-syntax-link: #8ABEFF;
  --cdkd-syntax-highlight: #FF8A1F;
  --cdkd-syntax-added: #69D8A6;
  --cdkd-syntax-removed: #FF9AA5;
  --cdkd-syntax-warned: #F9C16D;
  --cdkd-syntax-line-number: #657A90;
  --cdkd-syntax-title-bg: #141F2B;
  --cdkd-syntax-title-text: #B6C2CF;
  --cdkd-syntax-title-border: #2E4053;
  --cdkd-color-accent: #FF8A1F;
  --cdkd-color-accent-hover: #F98216;
  --cdkd-color-accent-active: #F57D10;
  --cdkd-color-on-accent: #232F3E;
  --cdkd-color-logo-route: #FF8A1F;
  --cdkd-color-code-bg: #0D141E;
  --cdkd-color-code-text: #F2F4F6;
  --cdkd-color-code-muted: #98A9BA;
  --cdkd-color-code-accent: #FF8A1F;
  --cdkd-color-bg: #F7F7F4;
  --cdkd-color-surface: #FFFFFF;
  --cdkd-color-surface-alt: #ECEFEE;
  --cdkd-color-text: #232F3E;
  --cdkd-color-text-secondary: #4D5B6A;
  --cdkd-color-text-muted: #596779;
  --cdkd-color-border: #788592;
  --cdkd-color-border-subtle: #D7DEE3;
  --cdkd-color-link: #A84600;
  --cdkd-color-link-hover: #873B00;
  --cdkd-color-focus: #A84600;
  --cdkd-color-accent-border: #7A3400;
  --cdkd-color-selected: #FFF0E2;
  --cdkd-color-on-selected: #A84600;
  --cdkd-color-disabled-bg: #E6E9EB;
  --cdkd-color-disabled-text: #7A8794;
  --cdkd-color-disabled-border: #CBD3DA;
  --cdkd-color-success: #146B4B;
  --cdkd-color-success-bg: #E4F3EB;
  --cdkd-color-warning: #8C5000;
  --cdkd-color-warning-bg: #FFF0DA;
  --cdkd-color-danger: #B33440;
  --cdkd-color-danger-bg: #FCECEF;
  --cdkd-color-info: #1D5EA6;
  --cdkd-color-info-bg: #E7F0FC;
  --cdkd-color-logo-cloud: #232F3E;
  --cdkd-shadow-sm: 0 2px 8px rgb(13 20 30 / 6%);
  --cdkd-shadow-lg: 0 12px 32px rgb(13 20 30 / 10%);
  --cdkd-code-frame: transparent;
}

[data-theme='dark'] {
  --cdkd-color-accent: #FF8A1F;
  --cdkd-color-accent-hover: #F98216;
  --cdkd-color-accent-active: #F57D10;
  --cdkd-color-on-accent: #232F3E;
  --cdkd-color-logo-route: #FF8A1F;
  --cdkd-color-code-bg: #0D141E;
  --cdkd-color-code-text: #F2F4F6;
  --cdkd-color-code-muted: #98A9BA;
  --cdkd-color-code-accent: #FF8A1F;
  --cdkd-color-bg: #0D141E;
  --cdkd-color-surface: #141F2B;
  --cdkd-color-surface-alt: #1D2C3C;
  --cdkd-color-text: #F2F4F6;
  --cdkd-color-text-secondary: #B6C2CF;
  --cdkd-color-text-muted: #98A9BA;
  --cdkd-color-border: #657A90;
  --cdkd-color-border-subtle: #2E4053;
  --cdkd-color-link: #FF8A1F;
  --cdkd-color-link-hover: #FFAD5C;
  --cdkd-color-focus: #FF8A1F;
  --cdkd-color-accent-border: #FF8A1F;
  --cdkd-color-selected: #392717;
  --cdkd-color-on-selected: #FFAD5C;
  --cdkd-color-disabled-bg: #202C39;
  --cdkd-color-disabled-text: #697B8E;
  --cdkd-color-disabled-border: #34485C;
  --cdkd-color-success: #69D8A6;
  --cdkd-color-success-bg: #163127;
  --cdkd-color-warning: #F9C16D;
  --cdkd-color-warning-bg: #332818;
  --cdkd-color-danger: #FF9AA5;
  --cdkd-color-danger-bg: #362129;
  --cdkd-color-info: #8ABEFF;
  --cdkd-color-info-bg: #192D46;
  --cdkd-color-logo-cloud: #F2F4F6;
  --cdkd-shadow-sm: 0 2px 8px rgb(0 0 0 / 18%);
  --cdkd-shadow-lg: 0 12px 32px rgb(0 0 0 / 24%);
  --cdkd-code-frame: var(--cdkd-color-border-subtle);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --cdkd-color-accent: #FF8A1F;
    --cdkd-color-accent-hover: #F98216;
    --cdkd-color-accent-active: #F57D10;
    --cdkd-color-on-accent: #232F3E;
    --cdkd-color-logo-route: #FF8A1F;
    --cdkd-color-code-bg: #0D141E;
    --cdkd-color-code-text: #F2F4F6;
    --cdkd-color-code-muted: #98A9BA;
    --cdkd-color-code-accent: #FF8A1F;
    --cdkd-color-bg: #0D141E;
    --cdkd-color-surface: #141F2B;
    --cdkd-color-surface-alt: #1D2C3C;
    --cdkd-color-text: #F2F4F6;
    --cdkd-color-text-secondary: #B6C2CF;
    --cdkd-color-text-muted: #98A9BA;
    --cdkd-color-border: #657A90;
    --cdkd-color-border-subtle: #2E4053;
    --cdkd-color-link: #FF8A1F;
    --cdkd-color-link-hover: #FFAD5C;
    --cdkd-color-focus: #FF8A1F;
    --cdkd-color-accent-border: #FF8A1F;
    --cdkd-color-selected: #392717;
    --cdkd-color-on-selected: #FFAD5C;
    --cdkd-color-disabled-bg: #202C39;
    --cdkd-color-disabled-text: #697B8E;
    --cdkd-color-disabled-border: #34485C;
    --cdkd-color-success: #69D8A6;
    --cdkd-color-success-bg: #163127;
    --cdkd-color-warning: #F9C16D;
    --cdkd-color-warning-bg: #332818;
    --cdkd-color-danger: #FF9AA5;
    --cdkd-color-danger-bg: #362129;
    --cdkd-color-info: #8ABEFF;
    --cdkd-color-info-bg: #192D46;
    --cdkd-color-logo-cloud: #F2F4F6;
    --cdkd-shadow-sm: 0 2px 8px rgb(0 0 0 / 18%);
    --cdkd-shadow-lg: 0 12px 32px rgb(0 0 0 / 24%);
    --cdkd-code-frame: var(--cdkd-color-border-subtle);
  }
}

@media (max-width: 48rem) {
  :root {
    --cdkd-type-display-size: 2.5rem;
    --cdkd-type-display-leading: 3rem;
    --cdkd-type-h1-size: 2rem;
    --cdkd-type-h1-leading: 2.5rem;
    --cdkd-type-h2-size: 1.75rem;
    --cdkd-type-h2-leading: 2.25rem;
    --cdkd-type-h3-size: 1.375rem;
    --cdkd-type-h3-leading: 1.875rem;
    --cdkd-type-code-size: 0.8125rem;
    --cdkd-type-code-leading: 1.3125rem;
    --cdkd-type-metric-size: 1.75rem;
    --cdkd-type-metric-leading: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cdkd-motion-fast: 0ms;
    --cdkd-motion-normal: 0ms;
    --cdkd-motion-slow: 0ms;
    --cdkd-motion-distance: 0px;
  }
}
/*
 * Geist and Geist Mono, self-hosted (SIL OFL 1.1, docs/_site/public/fonts).
 * Noto Sans JP stays a fallback name in the token stacks: the site is English
 * and does not ship it.
 */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/*
 * cdkd.dev theme layer on Ox Content's core stylesheet -- the reading pages.
 *
 * These pages are for finding and reading: a quiet header, a sidebar whose
 * groups fold, an outline that tracks the section, and text set at the
 * brand's body measure. Every value comes from a `--cdkd-*` token (generated
 * from docs/_site/brand/cdkd.tokens.json); Ox Content's `--octc-*` variables
 * are pointed at those tokens once, below, so core components follow the
 * brand without per-component overrides. Structure comes from space and the
 * three surface tones -- not rules, numbering, capitals or glow.
 */

/* -- Ox Content variables, resolved through the brand tokens ---------------- */
/* `:root:root` outranks both of core's dark blocks; the `--cdkd-*` values
   switch on their own, so one declaration covers every theme state. */
:root:root {
  --octc-font-sans: var(--cdkd-font-sans);
  --octc-font-mono: var(--cdkd-font-mono);
  --octc-header-height: 64px;
  --octc-sidebar-width: 272px;
  --octc-max-content-width: 760px;

  --octc-color-bg: var(--cdkd-color-bg);
  --octc-color-bg-alt: var(--cdkd-color-surface-alt);
  --octc-color-text: var(--cdkd-color-text);
  --octc-color-text-muted: var(--cdkd-color-text-muted);
  --octc-color-border: var(--cdkd-color-border-subtle);
  --octc-color-primary: var(--cdkd-color-link);
  --octc-color-primary-hover: var(--cdkd-color-link-hover);
  --octc-color-on-primary: var(--cdkd-color-on-accent);
  --octc-color-backdrop: rgb(13 20 30 / 56%);
  --octc-surface-glass: var(--cdkd-color-surface);
  --octc-surface-line: var(--cdkd-color-border-subtle);
  --octc-surface-noise-image: none;

  --octc-color-tip: var(--cdkd-color-success);
  --octc-color-info: var(--cdkd-color-info);
  --octc-color-warning: var(--cdkd-color-warning);
  --octc-color-danger: var(--cdkd-color-danger);
  --octc-color-success: var(--cdkd-color-success);

  --octc-color-code-bg: var(--cdkd-color-code-bg);
  --octc-color-code-bg-top: var(--cdkd-color-code-bg);
  --octc-color-code-text: var(--cdkd-color-code-text);
  --octc-color-code-frame-border: var(--cdkd-code-frame);

  --octc-focus-ring: var(--cdkd-border-focus-width) solid var(--cdkd-color-focus);
  --octc-focus-offset: var(--cdkd-border-focus-offset);
  --octc-motion-base: var(--cdkd-motion-normal);
  --octc-motion-ease: var(--cdkd-motion-ease);
  --octc-touch-target: var(--cdkd-size-control-height);

  /* Lets `height: auto` animate, for the folding sidebar groups. */
  interpolate-size: allow-keywords;
}

/* -- Page --------------------------------------------------------------------- */
html {
  background: var(--cdkd-color-bg);
}

body {
  font-family: var(--cdkd-font-sans);
  font-feature-settings: var(--cdkd-font-features-ui);
  color: var(--cdkd-color-text);
  background: var(--cdkd-color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--cdkd-color-selected);
  color: var(--cdkd-color-text);
}

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: var(--cdkd-border-focus-width) solid var(--cdkd-color-focus);
  outline-offset: var(--cdkd-border-focus-offset);
}

.cdkd-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Without scripting, core hides every island. One the build rendered is
   finished markup, so it stays (theme/home.css keeps the hero's in place). */
@media (scripting: none) {
  [data-ox-island][data-ox-ssr] {
    display: contents !important;
  }
}

/* Icons are masks painted with a background color, which forced colors
   would clear: they take the text color instead. */
@media (forced-colors: active) {
  .iconify-icon {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}

/* The search button's name where core hides its visible word (640px and
   below); elsewhere the visible word names it and this stays out of it. */
.search-button .cdkd-search-name {
  display: none;

  @media (max-width: 640px) {
    display: block;
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Page to page, the content crossfades while the chrome stays put. */
@view-transition {
  navigation: auto;
}

/* Named only for navigation. During a theme toggle the whole page has to be
   one snapshot: a named element is captured on its own, cross-fades above
   the circle and switches theme ahead of it. */
:root:not([data-ox-theme-transition]) {
  & .header {
    view-transition-name: cdkd-header;
  }

  & .sidebar {
    view-transition-name: cdkd-sidebar;
  }
}

::view-transition-group(*) {
  animation-duration: var(--cdkd-motion-slow);
  animation-timing-function: var(--cdkd-motion-ease);
}

/* Going light, Ox Content shrinks the outgoing snapshot with a clip-path
   animation that does not fill forwards: on its last frame the dark
   snapshot is shown whole again before the transition ends. Its resting
   clip is already the end of the shrink, so that frame shows nothing. */
:root[data-ox-theme-transition='shrink']::view-transition-old(root) {
  clip-path: circle(0);
}

/* -- Header ------------------------------------------------------------------- */
/* Quiet on purpose: the page's own ground, no rule, no boxes. */
.header {
  background: var(--cdkd-color-bg);
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  transition:
    background-color var(--cdkd-motion-normal) var(--cdkd-motion-ease),
    color var(--cdkd-motion-normal) var(--cdkd-motion-ease);

  /* The lockup: wordmark at 20px and the symbol one em tall beside it, so
     the cloud spans the letters from ascender to baseline. */
  & .header-title {
    gap: var(--cdkd-space-2);
    font-size: 1.25rem;
    line-height: 1;
    font-weight: var(--cdkd-weight-semibold);
    letter-spacing: -0.03em;
    color: var(--cdkd-color-text);
  }

  & .header-logo {
    inline-size: auto;
    block-size: 1em;
    margin-inline-end: 0;
  }

  & .header-nav {
    margin-inline-start: var(--cdkd-space-8);
  }

  & .header-nav-list {
    gap: var(--cdkd-space-6);
  }

  & .header-nav-item a {
    font-size: var(--cdkd-type-small-size);
    color: var(--cdkd-color-text-secondary);
    text-decoration: none;
    transition: color var(--cdkd-motion-fast) var(--cdkd-motion-ease);

    &:hover {
      color: var(--cdkd-color-text);
    }
  }

  & .header-actions {
    gap: var(--cdkd-space-1);

    & :is(.social-link, .theme-toggle, .search-button) {
      border: 0;
      border-radius: var(--cdkd-radius-md);
      background: transparent;
      color: var(--cdkd-color-text-secondary);
      box-shadow: none;
      transition:
        background-color var(--cdkd-motion-fast) var(--cdkd-motion-ease),
        color var(--cdkd-motion-fast) var(--cdkd-motion-ease);

      &:hover {
        background: var(--cdkd-color-surface-alt);
        color: var(--cdkd-color-text);
      }
    }

    & .search-button {
      min-block-size: 36px;
      font-size: var(--cdkd-type-small-size);

      & kbd {
        border: 0;
        background: transparent;
        font-family: var(--cdkd-font-sans);
        font-size: var(--cdkd-type-caption-size);
        color: var(--cdkd-color-text-muted);
      }
    }
  }

  /* A phone has the bottom bar for navigation; the header keeps the name. */
  @media (max-width: 48rem) {
    & .header-nav {
      display: none;
    }
  }
}

/* -- Sidebar ------------------------------------------------------------------ */
/* The page's own ground in every theme; core tints it per theme with
   selectors this one outranks. */
:root:root .sidebar {
  background: var(--cdkd-color-bg);
}

.sidebar {
  border-inline-end: 0;

  & .nav-section + .nav-section {
    margin-block-start: var(--cdkd-space-4);
  }

  & .nav-title {
    border: 0;
    padding-block: var(--cdkd-space-2);
    font-size: var(--cdkd-type-small-size);
    line-height: var(--cdkd-type-small-leading);
    font-weight: var(--cdkd-weight-semibold);
    letter-spacing: 0;
    text-transform: none;
    color: var(--cdkd-color-text);
  }

  /* A folding group: the whole title row is the control, its chevron turns,
     and the list opens to its own height. */
  & .nav-section--collapsible {
    & > .nav-title--summary {
      align-items: center;
      justify-content: space-between;
      border-radius: var(--cdkd-radius-sm);
      padding-inline: var(--cdkd-space-2);
      transition: background-color var(--cdkd-motion-fast) var(--cdkd-motion-ease);

      &::before {
        order: 1;
        margin: 0;
        inline-size: 0.375rem;
        block-size: 0.375rem;
        border-width: 0 1.5px 1.5px 0;
        color: var(--cdkd-color-text-muted);
        transition: transform var(--cdkd-motion-normal) var(--cdkd-motion-ease);
      }

      &:hover {
        background: var(--cdkd-color-surface-alt);
      }
    }

  }

  /* A page with pages under it: its title is the link to the page, and the
     chevron at the end of the row folds the pages under it. */
  & .nav-details > .nav-summary {
    align-items: center;
    justify-content: space-between;
    border-radius: var(--cdkd-radius-sm);

    & > .nav-link {
      flex: 1;
      min-inline-size: 0;
    }

    &::before {
      order: 1;
      flex: none;
      margin: 0 0.6875rem 0 var(--cdkd-space-2);
      inline-size: 0.3125rem;
      block-size: 0.3125rem;
      border-width: 0 1.5px 1.5px 0;
      color: var(--cdkd-color-text-muted);
      transition: transform var(--cdkd-motion-normal) var(--cdkd-motion-ease);
    }
  }

  & :is(.nav-section--collapsible, .nav-details) {
    &::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size var(--cdkd-motion-normal) var(--cdkd-motion-ease),
        content-visibility var(--cdkd-motion-normal) allow-discrete;
    }

    &[open]::details-content {
      block-size: auto;
    }
  }

  & .nav-list {
    margin-block-start: var(--cdkd-space-1);
  }

  & .nav-link {
    position: relative;
    display: block;
    border: 0;
    border-radius: var(--cdkd-radius-sm);
    padding: 0.375rem var(--cdkd-space-3);
    font-size: var(--cdkd-type-small-size);
    line-height: var(--cdkd-type-small-leading);
    color: var(--cdkd-color-text-secondary);
    transition:
      background-color var(--cdkd-motion-fast) var(--cdkd-motion-ease),
      color var(--cdkd-motion-fast) var(--cdkd-motion-ease);

    &:hover {
      padding-inline-start: var(--cdkd-space-3);
      background: var(--cdkd-color-surface-alt);
      color: var(--cdkd-color-text);
    }

    /* The current page: tint, ink and weight together, so the state never
       rests on one cue. The tint settles in place as the page arrives;
       nothing moves between rows. */
    &.active {
      padding-inline-start: var(--cdkd-space-3);
      background: var(--cdkd-color-selected);
      color: var(--cdkd-color-on-selected);
      font-weight: var(--cdkd-weight-semibold);
      box-shadow: none;
      animation: cdkd-current-page var(--cdkd-motion-normal) var(--cdkd-motion-ease);
    }
  }
}

@keyframes cdkd-current-page {
  from {
    background-color: transparent;
  }
}

/* -- Content ------------------------------------------------------------------ */
.content {
  font-size: var(--cdkd-type-body-size);
  line-height: var(--cdkd-type-body-leading);

  & p {
    max-width: none;
  }

  & :is(h1, h2, h3, h4) {
    font-weight: var(--cdkd-weight-semibold);
    color: var(--cdkd-color-text);
    scroll-margin-block-start: calc(var(--octc-header-height) + var(--cdkd-space-6));
  }

  & h1 {
    font-size: var(--cdkd-type-h1-size);
    line-height: var(--cdkd-type-h1-leading);
    letter-spacing: var(--cdkd-type-h1-tracking);
    margin-block-end: var(--cdkd-space-4);
  }

  & h2 {
    font-size: 1.75rem;
    line-height: 2.25rem;
    letter-spacing: var(--cdkd-type-h2-tracking);
    margin-block-start: var(--cdkd-space-16);
    padding: 0;
    border: 0;
  }

  & h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: var(--cdkd-type-h3-tracking);
    margin-block-start: var(--cdkd-space-10);
  }

  & h2 + h3 {
    margin-block-start: var(--cdkd-space-6);
  }

  & h4 {
    font-size: var(--cdkd-type-body-size);
    line-height: 1.5rem;
    margin-block-start: var(--cdkd-space-8);
  }

  & strong {
    font-weight: var(--cdkd-weight-semibold);
  }

  & a:not(.ox-copy, .pager-link) {
    color: var(--cdkd-color-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    transition: text-decoration-color var(--cdkd-motion-fast) var(--cdkd-motion-ease);

    &:hover {
      color: var(--cdkd-color-link-hover);
      text-decoration-color: currentColor;
    }

    & code {
      color: inherit;
    }
  }

  & :not(pre) > code {
    font-family: var(--cdkd-font-mono);
    font-feature-settings: var(--cdkd-font-features-code);
    font-size: 0.875em;
    padding: 0.125em 0.375em;
    border: 1px solid var(--cdkd-color-border-subtle);
    border-radius: var(--cdkd-radius-sm);
    background: var(--cdkd-color-surface-alt);
    color: var(--cdkd-color-text);
    /* One token, one line (a flag never splits after its dashes); a span
       too long for that is marked long by plugins/code-spans.ts. */
    white-space: nowrap;

    /* Between words first, inside one only when a single word would not fit. */
    &.cdkd-code-long {
      white-space: normal;
      overflow-wrap: break-word;
    }
  }

  /* Heading text is its anchor id, so a heading's code is not marked and
     wraps as heading text does. */
  & :is(h1, h2, h3, h4, h5, h6) code {
    white-space: normal;
  }

  & hr {
    border: 0;
    border-block-start: 1px solid var(--cdkd-color-border-subtle);
    margin-block: var(--cdkd-space-12);
  }

  & kbd {
    font-family: var(--cdkd-font-mono);
    font-size: 0.8125em;
    padding: 0.0625em 0.375em;
    border: 1px solid var(--cdkd-color-border);
    border-block-end-width: 2px;
    border-radius: var(--cdkd-radius-sm);
    background: var(--cdkd-color-surface);
  }

  /* Code: Night in both themes, per the brand; on a Night page the frame
     keeps its edge. */
  & .ox-code {
    position: relative;
  }

  & pre {
    font-family: var(--cdkd-font-mono);
    font-feature-settings: var(--cdkd-font-features-code);
    border: 1px solid var(--cdkd-code-frame);
    border-radius: var(--cdkd-radius-md);
    line-height: var(--cdkd-type-code-leading);

    & code {
      font-size: var(--cdkd-type-code-size);
    }
  }

  & .ox-copy {
    border-radius: var(--cdkd-radius-sm);
    color: var(--cdkd-color-code-muted);

    &:hover {
      color: var(--cdkd-color-code-text);
      background: color-mix(in srgb, var(--cdkd-color-code-text) 10%, transparent);
    }
  }

  /* Package-manager tabs: one code frame, with the choice as its header.
     The active manager takes the brand route as its underline. */
  & .ox-tabs {
    margin-block: var(--cdkd-space-6);
    border: 1px solid var(--cdkd-code-frame);
    border-radius: var(--cdkd-radius-md);
    background: var(--cdkd-color-code-bg);
  }

  & .ox-tabs-header {
    gap: var(--cdkd-space-1);
    padding: 0 var(--cdkd-space-2);
    border-block-end: 1px solid color-mix(in srgb, var(--cdkd-color-code-text) 14%, transparent);

    & label {
      min-block-size: var(--cdkd-size-control-height);
      padding: 0 var(--cdkd-space-3);
      font-family: var(--cdkd-font-mono);
      font-size: var(--cdkd-type-small-size);
      font-weight: var(--cdkd-weight-regular);
      color: var(--cdkd-color-code-muted);
      border-block-end-width: 2px;
      margin-block-end: -1px;

      &:hover {
        color: var(--cdkd-color-code-text);
      }
    }

    & input[type='radio']:checked + label {
      color: var(--cdkd-color-code-text);
      border-block-end-color: var(--cdkd-color-accent);
    }

    & input[type='radio']:focus-visible + label {
      outline: var(--cdkd-border-focus-width) solid var(--cdkd-color-focus);
      outline-offset: -4px;
      border-radius: var(--cdkd-radius-sm);
    }

    @media (forced-colors: active) {
      & label {
        forced-color-adjust: none;
        color: CanvasText;
        border-block-end-color: Canvas;
      }

      & input[type='radio']:checked + label {
        color: Highlight;
        border-block-end-color: Highlight;
      }
    }
  }

  /* Diagrams (docs/_site/diagrams) are drawn in the page's own colors, so they
     follow the theme; on a phone the narrow drawing stands in for the wide
     one rather than shrinking its text. */
  & .cdkd-diagram {
    margin: var(--cdkd-space-8) 0;

    & svg {
      display: block;
      inline-size: 100%;
      block-size: auto;
      overflow: visible;
      font-family: var(--cdkd-font-sans);
    }

    & .cdkd-diagram__svg--wide {
      max-inline-size: 45rem;
    }

    & .cdkd-diagram__svg--narrow {
      display: none;
      max-inline-size: 22.5rem;
    }

    & .d-node rect {
      fill: var(--cdkd-color-surface);
      stroke: var(--cdkd-color-border);
      stroke-width: 1;
    }

    & .d-node--route rect {
      stroke: var(--cdkd-color-accent);
      stroke-width: 1.5;
    }

    & .d-title {
      fill: var(--cdkd-color-text);
      font-size: 15px;
      font-weight: var(--cdkd-weight-semibold);
    }

    & :is(.d-detail, .d-mono) {
      fill: var(--cdkd-color-text-secondary);
      font-size: 13px;
    }

    & .d-mono {
      font-family: var(--cdkd-font-mono);
      font-size: 12.5px;
    }

    & .d-note {
      fill: var(--cdkd-color-text-muted);
      font-size: 13px;
    }

    & .d-label {
      fill: var(--cdkd-color-text-muted);
      font-size: 12px;
    }

    & .d-edge {
      fill: none;
      stroke: var(--cdkd-color-text-muted);
      stroke-width: 1.25;
    }

    & .d-head {
      fill: var(--cdkd-color-text-muted);
    }

    /* In the reader's high-contrast palette, the route in its highlight. */
    @media (forced-colors: active) {
      & svg {
        forced-color-adjust: none;
      }

      & .d-node rect {
        fill: Canvas;
        stroke: CanvasText;
      }

      & .d-node--route rect {
        stroke: Highlight;
      }

      & :is(.d-title, .d-detail, .d-mono, .d-note, .d-label, .d-head) {
        fill: CanvasText;
      }

      & .d-edge {
        stroke: CanvasText;
      }
    }

    @media (max-width: 40rem) {
      & .cdkd-diagram__svg--wide {
        display: none;
      }

      & .cdkd-diagram__svg--narrow {
        display: block;
      }
    }
  }

  & .ox-tab-panel {
    padding: 0;
    background: transparent;

    & pre {
      margin: 0;
      border: 0;
      border-radius: 0 0 var(--cdkd-radius-md) var(--cdkd-radius-md);
    }
  }

  /* Tables: the header row set apart by weight and one firmer rule, rows by
     hairlines, numbers on their digits. */
  & table {
    border: 1px solid var(--cdkd-color-border-subtle);
    border-radius: var(--cdkd-radius-md);
    background: var(--cdkd-color-surface);
    font-size: var(--cdkd-type-small-size);
    line-height: var(--cdkd-type-small-leading);
    font-variant-numeric: var(--cdkd-numeric-data);
  }

  & :is(th, td) {
    border-inline-end: 0;
    border-block-end: 1px solid var(--cdkd-color-border-subtle);
    /* A row reads from its first line: a flag sits level with the start of
       its description, not halfway down it. */
    vertical-align: baseline;
  }

  & th {
    background: var(--cdkd-color-surface);
    font-weight: var(--cdkd-weight-semibold);
    color: var(--cdkd-color-text);
    border-block-end-color: var(--cdkd-color-border);
  }

  /* Quotes and callouts are tinted surfaces, not ruled ones. Callouts use
     the audited semantic pairs; orange is the brand route, never a warning. */
  & blockquote {
    border: 0;
    border-radius: var(--cdkd-radius-md);
    padding: var(--cdkd-space-4) var(--cdkd-space-5);
    background: var(--cdkd-color-surface-alt);
    color: var(--cdkd-color-text-secondary);

    &.ox-callout {
      --cdkd-callout-ink: var(--cdkd-color-info);
      --cdkd-callout-bg: var(--cdkd-color-info-bg);

      border: 0;
      background: var(--cdkd-callout-bg);
      color: var(--cdkd-color-text);
    }

    &.ox-callout--tip {
      --cdkd-callout-ink: var(--cdkd-color-success);
      --cdkd-callout-bg: var(--cdkd-color-success-bg);
    }

    &:is(.ox-callout--warning, .ox-callout--important) {
      --cdkd-callout-ink: var(--cdkd-color-warning);
      --cdkd-callout-bg: var(--cdkd-color-warning-bg);
    }

    &.ox-callout--caution {
      --cdkd-callout-ink: var(--cdkd-color-danger);
      --cdkd-callout-bg: var(--cdkd-color-danger-bg);
    }
  }

  & .ox-callout-title {
    font-size: var(--cdkd-type-label-size);
    font-weight: var(--cdkd-weight-semibold);
    letter-spacing: 0;
    text-transform: none;
    color: var(--cdkd-callout-ink);
  }

  @media (max-width: 48rem) {
    /* A phone has no room for columns: each row is set as a block, its first
       cell as the row's name and every other cell under its column's label.
       The labels and table roles come from the theme script; without it the
       table keeps its columns and scrolls sideways. */
    & table {
      inline-size: auto;
    }

    & table[data-cdkd-stack] {
      overflow: visible;

      & thead {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }

      & :is(tbody, tr, td) {
        display: block;
      }

      & tr {
        padding: var(--cdkd-space-4);
        border-block-end: 1px solid var(--cdkd-color-border-subtle);

        &:last-child {
          border-block-end: 0;
        }
      }

      & td {
        padding: 0;
        border: 0;
        /* Core keeps a phone's cells on one line for sideways scrolling. */
        white-space: normal;

        & + td {
          margin-block-start: var(--cdkd-space-2);
        }

        &:first-child {
          font-weight: var(--cdkd-weight-semibold);
          color: var(--cdkd-color-text);
        }

        &:not(:first-child)[data-label]::before {
          content: attr(data-label);
          /* Seen only: a screen reader already names the cell's column. */
          content: attr(data-label) / '';
          margin-inline-end: var(--cdkd-space-2);
          font-size: var(--cdkd-type-caption-size);
          line-height: var(--cdkd-type-caption-leading);
          color: var(--cdkd-color-text-muted);
        }
      }
    }

    & h2 {
      font-size: 1.5rem;
      line-height: 2rem;
      margin-block-start: var(--cdkd-space-12);
    }

    & h3 {
      font-size: 1.1875rem;
      line-height: 1.625rem;
    }
  }
}

/* Status marks (docs/_site/plugins/status-icons.ts): icon and color
   together, so shape alone still tells yes from no. */
.cdkd-status {
  display: inline-flex;
  vertical-align: -0.1875em;
  color: var(--cdkd-color-text-muted);

  &.cdkd-status--yes {
    color: var(--cdkd-color-success);
  }

  &.cdkd-status--no {
    color: var(--cdkd-color-danger);
  }

  &.cdkd-status--caution {
    color: var(--cdkd-color-warning);
  }

  & .cdkd-status__icon {
    display: inline-block;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    background-color: currentColor;
  }
}

/* -- On this page ------------------------------------------------------------- */
.toc {
  border-inline-start: 0;

  & .toc-title {
    border: 0;
    font-size: var(--cdkd-type-small-size);
    font-weight: var(--cdkd-weight-semibold);
    letter-spacing: 0;
    text-transform: none;
    color: var(--cdkd-color-text);
  }

  & .toc-link {
    border: 0;
    border-radius: var(--cdkd-radius-sm);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--cdkd-color-text-muted);
    transition: color var(--cdkd-motion-fast) var(--cdkd-motion-ease);

    &:hover,
    &.active {
      color: var(--cdkd-color-text);
    }

    &.active {
      font-weight: var(--cdkd-weight-medium);
    }
  }
}

/* Core shows the outline only from 1440px; a 1280 or 1366 laptop -- the
   common sizes -- got none, on pages like troubleshooting.md that carry 60
   headings. Lower it to 1280px and restate both declarations: `display`
   alone would float the outline over the text, since the reserve lives in
   the same block. */
@media (min-width: 1280px) {
  .toc {
    display: block;
  }

  .main--with-toc {
    padding-inline-end: 17rem;
  }
}

/* -- Page end ----------------------------------------------------------------- */
.pager {
  border-block-start: 0;
  gap: var(--cdkd-space-4);

  & .pager-link {
    flex: 1 1 0;
    padding: var(--cdkd-space-4);
    border: 1px solid var(--cdkd-color-border-subtle);
    border-radius: var(--cdkd-radius-md);
    background: var(--cdkd-color-surface);
    transition: border-color var(--cdkd-motion-fast) var(--cdkd-motion-ease);

    &:hover {
      border-color: var(--cdkd-color-border);

      & .pager-title {
        color: var(--cdkd-color-text);
      }
    }
  }

  & .pager-label {
    font-size: var(--cdkd-type-caption-size);
    letter-spacing: 0;
    text-transform: none;
  }
}

.last-updated {
  font-size: var(--cdkd-type-caption-size);
  color: var(--cdkd-color-text-muted);
  font-variant-numeric: var(--cdkd-numeric-data);
}

.site-footer {
  border-block-start: 0;
  color: var(--cdkd-color-text-muted);
  font-size: var(--cdkd-type-caption-size);
}

/* -- Search ------------------------------------------------------------------- */
.search-modal {
  border: 1px solid var(--cdkd-color-border-subtle);
  border-radius: var(--cdkd-radius-lg);
  background: var(--cdkd-color-surface);
  box-shadow: var(--cdkd-shadow-lg);

  /* The open modal already says where focus is; a ring inside it is noise. */
  & .search-input {
    font-family: var(--cdkd-font-sans);
    color: var(--cdkd-color-text);

    &:focus-visible {
      outline: none;
    }
  }

  & .search-result:is(.selected, :hover) {
    background: var(--cdkd-color-selected);
  }

  /* The scope a result came from, beside its title. */
  & .search-result-scope {
    margin-inline-start: var(--cdkd-space-2);
    color: var(--cdkd-color-text-muted);
    font-family: var(--cdkd-font-mono);
    font-size: var(--cdkd-type-caption-size);
    font-weight: 400;
  }
}

/* One button per search scope, under the input (plugins/search-scopes.ts). */
.cdkd-search-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cdkd-space-2);
  padding: var(--cdkd-space-2) var(--cdkd-space-4);
  border-block-end: 1px solid var(--cdkd-color-border-subtle);
}

.cdkd-search-scope {
  padding: var(--cdkd-space-1) var(--cdkd-space-2);
  border: 1px solid var(--cdkd-color-border-subtle);
  border-radius: var(--cdkd-radius-sm);
  background: transparent;
  color: var(--cdkd-color-text-secondary);
  font-family: var(--cdkd-font-mono);
  font-size: var(--cdkd-type-caption-size);
  cursor: pointer;
  transition:
    background var(--cdkd-motion-fast) var(--cdkd-motion-ease),
    color var(--cdkd-motion-fast) var(--cdkd-motion-ease);

  &:hover {
    background: var(--cdkd-color-surface-alt);
    color: var(--cdkd-color-text);
  }

  &[aria-pressed='true'] {
    border-color: var(--cdkd-color-border);
    background: var(--cdkd-color-selected);
    color: var(--cdkd-color-text);
  }

  &:focus-visible {
    outline: var(--cdkd-border-focus-width) solid var(--cdkd-color-focus);
    outline-offset: 1px;
  }
}

/* -- Line breaks ---------------------------------------------------------------- */

/* A heading breaks into lines of like length, never one word on its own; body
   text avoids a short last line. Both fall back to the browser's default. */
.content :is(h1, h2, h3, h4, h5),
.content .ox-card-title,
.sidebar .nav-link,
.toc .toc-link {
  text-wrap: balance;
}

.content :is(p, li, dd, blockquote, td, figcaption) {
  text-wrap: pretty;
}

/* Quoted output wraps where it would scroll (set by the theme script). */
.content pre.cdkd-pre-wrap,
.content pre.cdkd-pre-wrap code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* -- Steps and cards ---------------------------------------------------------- */

/* `::: steps`: core draws the numbers and the rail; a step's first line is
   its title. */
.content .ox-steps {
  padding-inline: var(--cdkd-space-4);
}

.content .ox-steps__item {
  &::before {
    border: 1px solid var(--cdkd-color-border);
    background: var(--cdkd-color-bg);
    color: var(--cdkd-color-text);
    font-weight: var(--cdkd-weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  & > :first-child {
    font-weight: var(--cdkd-weight-semibold);
  }
}

/* `::: card-grid` of `::: card`: where a hub page sends its reader next. */
.content .ox-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--cdkd-space-3);
  margin: var(--cdkd-space-6) 0;
}

.content .ox-card {
  padding: var(--cdkd-space-4);
  border: 1px solid var(--cdkd-color-border-subtle);
  border-radius: var(--cdkd-radius-md);
  background: var(--cdkd-color-surface);

  & .ox-card-title {
    margin: 0 0 var(--cdkd-space-2);
    color: var(--cdkd-color-text);
    font-weight: var(--cdkd-weight-semibold);
  }

  & > :not(.ox-card-title) {
    margin: 0;
    color: var(--cdkd-color-text-secondary);
    font-size: var(--cdkd-type-small-size);
    line-height: var(--cdkd-type-small-leading);
  }

  & > :not(.ox-card-title) + :not(.ox-card-title) {
    margin-block-start: var(--cdkd-space-2);
  }
}

/* -- Phone chrome ------------------------------------------------------------- */
.mobile-footer {
  background: var(--cdkd-color-bg);
  border-block-start: 1px solid var(--cdkd-color-border-subtle);

  & .mobile-footer-btn {
    color: var(--cdkd-color-text-secondary);
  }

  & .mobile-footer-label {
    font-size: 0.6875rem;
    letter-spacing: 0;
    text-transform: none;
  }
}

/*
 * cdkd Night: the syntax theme for code on the Night surface (#0D141E), which
 * the brand uses for code in both page themes.
 *
 * Four hues, each a role rather than a rainbow step:
 *   route orange  commands and functions -- what runs (`cdkd`, `npm`, calls)
 *   blue          flags, keys, types and numbers -- what is configured
 *   green         strings
 *   amber         keywords
 * Structure (punctuation, comments) steps back to the cool grays, and plain
 * text is Cloud White. The roles are token references (SYNTAX_ROLES in
 * docs/_site/brand/tokens.ts) and every one holds at least 7:1 against Night;
 * tests/unit/scripts/docs-site-brand-tokens.test.ts recomputes the ratios.
 *
 * Ox Content's highlighter writes `color: var(--octc-syntax-token-*)` inline
 * on each token, so this file and the role map are the whole theme.
 */
:root:root {
  --octc-syntax-background: var(--cdkd-syntax-background);
  --octc-syntax-foreground: var(--cdkd-syntax-foreground);
  --octc-syntax-token-function: var(--cdkd-syntax-function);
  --octc-syntax-token-constant: var(--cdkd-syntax-constant);
  --octc-syntax-token-string: var(--cdkd-syntax-string);
  --octc-syntax-token-string-expression: var(--cdkd-syntax-string-expression);
  --octc-syntax-token-keyword: var(--cdkd-syntax-keyword);
  --octc-syntax-token-parameter: var(--cdkd-syntax-parameter);
  --octc-syntax-token-punctuation: var(--cdkd-syntax-punctuation);
  --octc-syntax-token-comment: var(--cdkd-syntax-comment);
  --octc-syntax-token-link: var(--cdkd-syntax-link);

  /* Line annotations: the same roles as tints, with a solid edge mark. */
  --octc-color-code-line-highlight: color-mix(in srgb, var(--cdkd-syntax-highlight) 12%, transparent);
  --octc-color-code-line-focus: color-mix(in srgb, var(--cdkd-syntax-highlight) 8%, transparent);
  --octc-color-code-line-add: color-mix(in srgb, var(--cdkd-syntax-added) 12%, transparent);
  --octc-color-code-line-add-border: var(--cdkd-syntax-added);
  --octc-color-code-line-remove: color-mix(in srgb, var(--cdkd-syntax-removed) 12%, transparent);
  --octc-color-code-line-remove-border: var(--cdkd-syntax-removed);
  --octc-color-code-line-warning: color-mix(in srgb, var(--cdkd-syntax-warned) 12%, transparent);
  --octc-color-code-line-warning-border: var(--cdkd-syntax-warned);
  --octc-color-code-line-error: color-mix(in srgb, var(--cdkd-syntax-removed) 14%, transparent);
  --octc-color-code-line-error-border: var(--cdkd-syntax-removed);
  --octc-color-code-line-dim: 0.5;
  --octc-color-code-line-number: var(--cdkd-syntax-line-number);

  /* File-name bar above a block: the next surface step up from Night. */
  --octc-color-code-title-bg: var(--cdkd-syntax-title-bg);
  --octc-color-code-title-text: var(--cdkd-syntax-title-text);
  --octc-color-code-title-border: var(--cdkd-syntax-title-border);
}

.content pre ::selection {
  background: color-mix(in srgb, var(--cdkd-color-code-accent) 28%, transparent);
  color: var(--cdkd-syntax-foreground);
}

/*
 * cdkd.dev home page: Ox Content's entry layout, composed as one poster.
 *
 * The first screen is the hero alone: the header steps aside while the hero
 * is under it (the `cdkd-hero-in-view` class, set by the theme script) and
 * returns once it has scrolled away. The hero splits in two. The copy holds
 * the left half on the page's own ground, so it follows the theme. The right
 * half is a field of Cloud Navy in both themes, and the symbol stands in it
 * far larger than the field, cut cleanly by the field's own edges: the route
 * enters from the copy's side and its head points out of the top corner,
 * always inside the frame. Below 52rem the field moves to the top. The
 * static symbol (the poster) sets that box in CSS; the key visual draws over
 * the poster's box.
 */

/* The hero runs edge to edge and up under the fixed header. */
.entry-page .layout {
  padding-block-start: 0;
}

.entry-page .main {
  padding: 0;
}

.entry-page > .header {
  transition:
    opacity var(--cdkd-motion-normal) var(--cdkd-motion-ease),
    translate var(--cdkd-motion-normal) var(--cdkd-motion-ease),
    visibility var(--cdkd-motion-normal) allow-discrete;
}

.entry-page.cdkd-hero-in-view > .header {
  opacity: 0;
  translate: 0 calc(-2 * var(--cdkd-motion-distance));
  visibility: hidden;
}

/* -- Hero --------------------------------------------------------------------- */
.entry-page .hero {
  /* The copy lines up with the page column, until a very wide screen would
     strand it in a fixed box beside an ever-larger field: from there it keeps
     a share of the width instead, and the headline keeps growing. */
  --cdkd-hero-inline: max(
    var(--cdkd-layout-gutter),
    min(calc((100vw - var(--cdkd-layout-max)) / 2), 14vw)
  );

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  inline-size: 100%;
  max-inline-size: none;
  block-size: max(40rem, 100svh);
  margin: 0;
  padding: 0;
  text-align: start;
  color: var(--cdkd-color-text);
  background: var(--cdkd-color-bg);
  border: 0;
  overflow: hidden;

  &::after {
    content: none;
  }

  & .hero-content {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    max-inline-size: none;
    margin: 0;
    padding: var(--cdkd-space-16) var(--cdkd-space-16) var(--cdkd-space-16) var(--cdkd-hero-inline);

    /* The copy settles in step with the symbol's assembly: each line rises
       the brand's 8px, in reading order. Reduced motion zeroes both. */
    & > * {
      animation: cdkd-rise var(--cdkd-motion-slow) var(--cdkd-motion-ease) both;
    }

    & > :nth-child(2) {
      animation-delay: 60ms;
    }

    & > :nth-child(3) {
      animation-delay: 120ms;
    }

    & > :nth-child(n + 4) {
      animation-delay: 180ms;
    }

    /* An island is `display: contents` by default, which would skip the rise. */
    & > [data-ox-island] {
      display: block;
    }
  }

  /* h1 carries the product name, set small as the line the headline hangs
     from; the headline carries the size. */
  & .hero-name {
    display: flex;
    align-items: baseline;
    gap: var(--cdkd-space-3);
    margin: 0 0 var(--cdkd-space-8);
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: var(--cdkd-weight-semibold);
    letter-spacing: -0.03em;
    color: var(--cdkd-color-text);

    &::after {
      content: 'CDK Direct';
      font-size: var(--cdkd-type-body-size);
      font-weight: var(--cdkd-weight-regular);
      letter-spacing: 0;
      color: var(--cdkd-color-text-muted);
    }
  }

  & .hero-text {
    max-inline-size: 7em;
    margin: 0;
    font-size: clamp(3rem, 1.25rem + 3.6vw, 7rem);
    line-height: 0.98;
    font-weight: var(--cdkd-weight-semibold);
    letter-spacing: -0.052em;
    color: var(--cdkd-color-text);
    text-wrap: balance;
  }

  & .hero-tagline {
    max-inline-size: 24em;
    margin: var(--cdkd-space-8) 0 0;
    font-size: clamp(1.1875rem, 0.75rem + 0.55vw, 1.5rem);
    line-height: 1.52;
    color: var(--cdkd-color-text-secondary);
    text-align: start;
    text-wrap: pretty;
  }

  /* One primary action; the second is a bordered secondary; the third is a
     plain link. */
  & .hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--cdkd-space-3);
    margin-block-start: var(--cdkd-space-12);
  }

  & .hero-action {
    min-inline-size: 0;
    min-block-size: var(--cdkd-size-control-height);
    padding: 0 var(--cdkd-space-6);
    border: 1px solid transparent;
    border-radius: var(--cdkd-radius-md);
    font-size: var(--cdkd-type-label-size);
    line-height: var(--cdkd-type-label-leading);
    font-weight: var(--cdkd-weight-medium);
    text-decoration: none;
    transition:
      background-color var(--cdkd-motion-fast) var(--cdkd-motion-ease),
      border-color var(--cdkd-motion-fast) var(--cdkd-motion-ease),
      transform var(--cdkd-motion-fast) var(--cdkd-motion-ease);

    &:active {
      transform: translateY(1px);
    }
  }

  & .hero-action-brand {
    background: var(--cdkd-color-accent);
    border-color: var(--cdkd-color-accent-border);
    color: var(--cdkd-color-on-accent);

    &:hover {
      background: var(--cdkd-color-accent-hover);
      border-color: var(--cdkd-color-accent-border);
      color: var(--cdkd-color-on-accent);
    }

    &:active {
      background: var(--cdkd-color-accent-active);
    }
  }

  & .hero-action-alt {
    background: var(--cdkd-color-surface);
    border-color: var(--cdkd-color-border);
    color: var(--cdkd-color-text);

    &:hover {
      background: var(--cdkd-color-surface-alt);
      border-color: var(--cdkd-color-border);
      color: var(--cdkd-color-text);
    }

    &:last-child {
      padding-inline: var(--cdkd-space-3);
      border-color: transparent;
      background: transparent;
      color: var(--cdkd-color-text-secondary);

      &:hover {
        background: transparent;
        color: var(--cdkd-color-text);
      }
    }
  }

  & .hero-content .cdkd-command {
    max-inline-size: 24rem;
    margin-block-start: var(--cdkd-space-6);
  }

  /* The field: Cloud Navy in both themes, the symbol cut by its edges. The
     symbol is the light-ground colorway on it, whatever the page theme, and
     the key visual reads its colors from here. */
  & .hero-image {
    --cdkd-color-logo-cloud: var(--cdkd-cloud);
    --cdkd-color-logo-route: var(--cdkd-orange);

    position: relative;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    max-inline-size: none;
    margin: 0;
    overflow: hidden;
    background: var(--cdkd-navy);
    pointer-events: none;

    & img {
      position: absolute;
      inset-block-start: 13%;
      inset-inline-end: 6.5%;
      inline-size: 140%;
      block-size: auto;
      max-inline-size: none;
    }

    & > [data-ox-island] {
      position: absolute;
      inset: 0;
      display: block;
    }
  }

  /* Narrow: the field becomes the top of the screen -- never less than a
     third of it -- and the copy follows on the page's ground, standing clear
     of the phone's bottom bar. */
  @media (max-width: 52rem) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(36svh, 1fr) auto;
    align-items: stretch;

    & .hero-image {
      grid-column: 1;
      grid-row: 1;

      & img {
        inset-block-start: 10%;
        inline-size: max(120%, 52rem);
      }
    }

    & .hero-content {
      grid-row: 2;
      max-inline-size: 40rem;
      padding: var(--cdkd-space-10) var(--cdkd-layout-gutter)
        calc(var(--octc-mobile-footer-height) + var(--cdkd-space-8));
    }
  }

  @media (max-width: 48rem) {
    & .hero-content {
      padding-inline: var(--cdkd-layout-gutter-mobile);
      padding-block-start: var(--cdkd-space-8);
    }

    & .hero-image img {
      inline-size: 150%;
    }

    & .hero-name {
      margin-block-end: var(--cdkd-space-3);
      font-size: 1.125rem;

      &::after {
        font-size: var(--cdkd-type-small-size);
      }
    }

    & .hero-text {
      font-size: clamp(2.25rem, 9.2vw, 2.875rem);
      line-height: 1;
      max-inline-size: none;
    }

    & .hero-tagline {
      margin-block-start: var(--cdkd-space-4);
      font-size: var(--cdkd-type-body-size);
      line-height: var(--cdkd-type-body-leading);
    }

    & .hero-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-inline-size: 28rem;
      margin-block-start: var(--cdkd-space-6);
    }

    & .hero-action {
      inline-size: 100%;
      justify-content: center;
    }

    & .hero-action-brand {
      grid-column: 1 / -1;
    }

    & .hero-content .cdkd-command {
      display: none;
    }
  }
}

/* The field always takes the light-on-navy symbol; core's own
   `display: block` on hero images outranks the theme-asset toggle. */
.entry-page .hero-image img.theme-asset--light {
  display: none;
}

.entry-page .hero-image img.theme-asset--dark {
  display: block;
}

/* Without scripting, the hero's rendered islands keep their place (core
   would hide them; theme/cdkd.css keeps the rest). */
@media (scripting: none) {
  .entry-page .hero .hero-content > [data-ox-island][data-ox-ssr] {
    display: block !important;
  }
}

/* With scripting on, the poster waits for the scene, which opens from the
   line screen rather than the solid symbol; it shows after a beat if the
   scene never comes. */
@media (scripting: enabled) {
  .entry-page .hero-image img {
    opacity: 0;
    animation: cdkd-poster-fallback 0s linear 1.5s forwards;
  }

  .entry-page .hero-image:is(.has-poster, .has-scene) img {
    animation: none;
  }

  .entry-page .hero-image.has-poster img {
    opacity: 1;
  }
}

@keyframes cdkd-rise {
  from {
    opacity: 0;
    translate: 0 calc(2 * var(--cdkd-motion-distance));
  }
}

@keyframes cdkd-poster-fallback {
  to {
    opacity: 1;
  }
}

/* -- Features ----------------------------------------------------------------- */
.entry-page .features {
  max-inline-size: var(--cdkd-layout-max);
  margin: 0 auto;
  padding: var(--cdkd-space-24) var(--cdkd-layout-gutter) var(--cdkd-space-20);

  & .features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cdkd-space-12);
    max-inline-size: none;
    border: 0;
  }

  & .feature-card {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;

    &:hover {
      background: transparent;

      & .feature-title {
        color: var(--cdkd-color-text);
      }
    }
  }

  & .feature-icon {
    display: block;
    inline-size: auto;
    block-size: auto;
    margin-block-end: var(--cdkd-space-5);
    border-radius: 0;
    background: none;
    color: var(--cdkd-color-text);

    & .iconify-icon {
      display: block;
      inline-size: 28px;
      block-size: 28px;
      background-color: currentColor;
    }
  }

  & .feature-title {
    margin: 0 0 var(--cdkd-space-2);
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: var(--cdkd-weight-semibold);
    letter-spacing: -0.02em;
    color: var(--cdkd-color-text);
  }

  & .feature-details {
    font-size: var(--cdkd-type-body-size);
    line-height: var(--cdkd-type-body-leading);
    color: var(--cdkd-color-text-secondary);
  }

  @media (max-width: 48rem) {
    padding: var(--cdkd-space-16) var(--cdkd-layout-gutter-mobile) var(--cdkd-space-12);

    & .features-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--cdkd-space-10);
    }
  }
}

/* -- Body sections ------------------------------------------------------------ */
.entry-page .entry-content {
  max-inline-size: var(--cdkd-layout-max);
  padding: 0 var(--cdkd-layout-gutter) var(--cdkd-space-24);

  & .content {
    max-inline-size: none;
    padding: 0;

    & h2 {
      margin-block-start: 0;
      font-size: var(--cdkd-type-h1-size);
      line-height: var(--cdkd-type-h1-leading);
      letter-spacing: var(--cdkd-type-h1-tracking);
    }

    & h2 + p {
      max-inline-size: 40rem;
      font-size: 1.125rem;
      line-height: 1.75rem;
      color: var(--cdkd-color-text-secondary);
    }
  }

  @media (max-width: 48rem) {
    padding-inline: var(--cdkd-layout-gutter-mobile);
  }
}