/* notebook.css — entry file of the notebook theme
 *
 * The import order is the cascade. For delivery the build joins the parts into a
 * single file (plain text concatenation in place of the @import lines), so the
 * browser makes one request; the @import form here is the source and works
 * directly in the browser during development.
 *
 * The layer order has to come before the imports. Layers rank by the order they
 * are first declared, from properties (lowest) to utilities (highest); whatever is
 * unlayered (site palette, html/body rules, Shiki) wins against every layer.
 *
 * `properties` must come first. If it were missing from the list,
 * tokens.css would open the layer itself and it would be the last declared, and so
 * the strongest: the --tw-* fallback values in it (e.g. --tw-border-style: solid)
 * would then beat the values that utilities set later.
 *
 * catalogue.css (catalogue components) comes last. Its rules live in
 * `@layer components`; within that layer they therefore come after layout.css and
 * components.css. The image zoom rules are unlayered.
 */

@layer properties, theme, base, components, utilities;

/* ---- tokens.css ---- */
/* tokens.css — design tokens of the notebook theme
 *
 * Order and cascade:
 *   1. @layer properties  – fallback initial values of the --tw-* variables
 *                           for browsers without @property (Safari branch)
 *   2. @layer theme       – Tailwind theme plus the default colours
 *   3. unlayered          – the default dark palette and sidebar overrides
 *                           and --fd-sidebar-drawer-offset
 *   4. unlayered          – the site palette, inserted by the build at the
 *                           `@pholio:palette` marker (theme.light, theme.dark,
 *                           theme.palette_css)
 *   5. @property          – registered --tw-* variables
 *
 * Important: blocks 3 and 4 are unlayered and therefore win against
 * every @layer rule. The @layer theme palette still stays, because it defines tokens
 * a site palette usually doesn't override (--color-fd-info/warning/error/success/idea,
 * --color-fd-diff-*, --color-fd-overlay, --animate-*).
 *
 * Not included: --fd-layout-width. The token isn't global; only the
 * start page sets it (1400px). The notebook layout uses the
 * fallback var(--fd-layout-width, 97rem).
 */

@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-style: solid;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-divide-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --breakpoint-sm: 40rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-3xl: 48rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-xs: 4px;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-fd-background: #f5f5f5;
    --color-fd-foreground: #0a0a0a;
    --color-fd-muted: #f5f5f5;
    --color-fd-muted-foreground: #737373;
    --color-fd-popover: #fafafa;
    --color-fd-popover-foreground: #272727;
    --color-fd-card: #f1f1f1;
    --color-fd-card-foreground: #0a0a0a;
    --color-fd-border: #cccccc80;
    --color-fd-primary: #171717;
    --color-fd-primary-foreground: #fafafa;
    --color-fd-secondary: #ededed;
    --color-fd-secondary-foreground: #171717;
    --color-fd-accent: #d1d1d180;
    --color-fd-accent-foreground: #171717;
    --color-fd-ring: #a3a3a3;
    --color-fd-overlay: #0003;
    --color-fd-info: #3080ff;
    --color-fd-warning: #f99c00;
    --color-fd-error: #fb2c36;
    --color-fd-success: #00c758;
    --color-fd-idea: #ee7e00;
    --color-fd-diff-remove: #c80a641f;
    --color-fd-diff-remove-symbol: #e60a64;
    --color-fd-diff-add: #0eb4641a;
    --color-fd-diff-add-symbol: #0ac864;
    --animate-fd-fade-in: fd-fade-in .3s ease;
    --animate-fd-fade-out: fd-fade-out .3s ease;
    --animate-fd-dialog-in: fd-dialog-in .3s cubic-bezier(.16, 1, .3, 1);
    --animate-fd-dialog-out: fd-dialog-out .3s cubic-bezier(.16, 1, .3, 1);
    --animate-fd-popover-in: fd-popover-in .1s ease;
    --animate-fd-popover-out: fd-popover-out .1s ease;
    --animate-fd-sidebar-in: fd-sidebar-in .25s ease;
    --animate-fd-sidebar-out: fd-sidebar-out .25s ease;
  }

  @supports (color: lab(0% 0 0)) {
    :root, :host {
      --color-fd-info: lab(54.1736% 13.3369 -74.6839);
      --color-fd-warning: lab(72.7183% 31.8672 97.9407);
      --color-fd-error: lab(55.4814% 75.0732 48.8528);
      --color-fd-success: lab(70.5521% -66.5147 45.8073);
      --color-fd-idea: lab(64.7587% 46.0756 133.272);
    }
  }
}

/* --- Default dark palette and sidebar overrides (unlayered) --- */

.dark {
  --color-fd-background: #121212;
  --color-fd-foreground: #ebebeb;
  --color-fd-muted: #212121;
  --color-fd-muted-foreground: #b3b3b3cc;
  --color-fd-popover: #1e1e1e;
  --color-fd-popover-foreground: #dedede;
  --color-fd-card: #191919;
  --color-fd-card-foreground: #fafafa;
  --color-fd-border: #6663;
  --color-fd-primary: #fafafa;
  --color-fd-primary-foreground: #171717;
  --color-fd-secondary: #212121;
  --color-fd-secondary-foreground: #ebebeb;
  --color-fd-accent: #6868684d;
  --color-fd-accent-foreground: #e6e6e6;
  --color-fd-ring: #8c8c8c;
  --color-fd-overlay: #0003;
}

.dark #nd-sidebar {
  --color-fd-muted: #292929;
  --color-fd-secondary: #2e2e2e;
  --color-fd-muted-foreground: #b8b8b8;
}

:root {
  --fd-sidebar-drawer-offset: 100%;
}

[dir="rtl"] {
  --fd-sidebar-drawer-offset: -100%;
}

:root {
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-weight-bold: 600;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.875rem;
  --radius-2xl: 1.125rem;
}
:root {
  --color-fd-background: oklch(1 0 0);
  --color-fd-foreground: oklch(0.145 0 0);
  --color-fd-muted: oklch(0.96 0 0);
  --color-fd-muted-foreground: oklch(0.52 0 0);
  --color-fd-popover: oklch(1 0 0);
  --color-fd-popover-foreground: oklch(0.145 0 0);
  --color-fd-card: oklch(1 0 0);
  --color-fd-card-foreground: oklch(0.145 0 0);
  --color-fd-border: oklch(0.922 0 0);
  --color-fd-primary: oklch(0 0 0);
  --color-fd-primary-foreground: oklch(0.985 0 0);
  --color-fd-secondary: oklch(0.97 0 0);
  --color-fd-secondary-foreground: oklch(0 0 0);
  --color-fd-accent: oklch(0.94 0 0);
  --color-fd-accent-foreground: oklch(0.205 0 0);
  --color-fd-ring: oklch(0.55 0 0);
}
.dark {
  --color-fd-background: oklch(0.205 0 0);
  --color-fd-foreground: oklch(0.985 0 0);
  --color-fd-muted: oklch(0.265 0 0);
  --color-fd-muted-foreground: oklch(0.708 0 0);
  --color-fd-popover: oklch(0.265 0 0);
  --color-fd-popover-foreground: oklch(0.985 0 0);
  --color-fd-card: oklch(0.245 0 0);
  --color-fd-card-foreground: oklch(0.985 0 0);
  --color-fd-border: oklch(0.29 0 0);
  --color-fd-primary: oklch(0.985 0 0);
  --color-fd-primary-foreground: oklch(0 0 0);
  --color-fd-secondary: oklch(0.245 0 0);
  --color-fd-secondary-foreground: oklch(0.985 0 0);
  --color-fd-accent: oklch(0.285 0 0);
  --color-fd-accent-foreground: oklch(0.985 0 0);
  --color-fd-ring: oklch(0.7 0 0);
}

/* --- @property: registered --tw-* variables --- */

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

/* ---- reset.css ---- */
/* reset.css — Tailwind v4 preflight
 *
 * The preflight in @layer base, unchanged. The end of the block adds the theme's
 * two base rules:
 *   *, ::after, ::before, ::backdrop { border-color: var(--color-fd-border, currentColor) }
 *   body { background-color/color }
 *
 * After it, unlayered, two page rules:
 *   html { scrollbar-gutter: stable }
 *   html > body[data-scroll-locked] { … }
 * They must stay unlayered; otherwise the
 * scrollbar-gutter rule, which has no !important, loses against layout utilities.
 */

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  *, :after, :before, ::backdrop {
    border-color: var(--color-fd-border, currentColor);
  }

  ::file-selector-button {
    border-color: var(--color-fd-border, currentColor);
  }

  body {
    background-color: var(--color-fd-background);
    color: var(--color-fd-foreground);
  }
}

/* --- Page rules (unlayered) --- */

/* The page never drags past its top or bottom edge (rubber-band scrolling). */
html, body {
  overscroll-behavior: none;
}

html {
  scrollbar-gutter: stable;
}

html > body[data-scroll-locked] {
  --removed-body-scroll-bar-size: 0px !important;
  margin-right: 0 !important;
}

/* ---- fonts.css ---- */
/* fonts.css — Inter (variable) plus fallback metrics
 *
 * One @font-face block per Google Fonts subset of Inter 4 (variable),
 * font-weight: 100 900, font-display: swap, each with its unicode-range. The file
 * names follow the subsets: inter-latin.woff2, inter-latin-ext.woff2,
 * inter-cyrillic(-ext).woff2, inter-greek(-ext).woff2, inter-vietnamese.woff2.
 * `Inter Fallback` adjusts a local Arial to Inter's metrics, so the text doesn't
 * shift when the web font arrives.
 *
 * The url() values are relative to the delivered notebook.css. With the CSS at
 * assets/css/notebook.css, the fonts live at assets/fonts/inter/.
 */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-greek-ext.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-greek.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-vietnamese.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter/inter-latin.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter Fallback;
  src: local(Arial);
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0.0%;
  size-adjust: 107.12%;
}

/* The font family, directly on html. font-feature-settings and
 * font-variation-settings stay unset (the preflight in reset.css sets them to
 * `normal` through the variable fallback). A site sets its own text font with
 * the design token --font-text (theme.tokens.font-text); without it, Inter.
 */
html {
  font-family: var(--font-text, Inter, Inter Fallback);
  font-style: normal;
}

/* ---- animations.css ---- */
/* animations.css — every @keyframes of the theme
 *
 * Tailwind v4 output, unchanged.
 *
 * The matching shorthands --animate-fd-* and --animate-pulse live in tokens.css
 * (@layer theme), because Tailwind defines them there. So does
 * --fd-sidebar-drawer-offset (used by fd-sidebar-in/out).
 */

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes fd-sidebar-in {
  from {
    transform: translateX(var(--fd-sidebar-drawer-offset));
  }
}

@keyframes fd-sidebar-out {
  to {
    transform: translateX(var(--fd-sidebar-drawer-offset));
  }
}

@keyframes fd-dialog-in {
  from {
    opacity: 0;
    transform: scale(1.06);
  }

  to {
    transform: scale(1);
  }
}

@keyframes fd-dialog-out {
  from {
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.04);
  }
}

@keyframes fd-popover-in {
  from {
    opacity: 0;
    transform: scale(.9);
  }
}

@keyframes fd-popover-out {
  to {
    opacity: 0;
    transform: scale(.9);
  }
}

@keyframes fd-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fd-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* ---- layout.css ---- */
/* layout.css — grid, header, sidebar, table of contents, TOC popover,
 * article frame and the start page scaffold.
 *
 * Every nd- class names in its comment the Tailwind utilities its declarations are
 * written from; the declarations are Tailwind v4's output for those utilities,
 * value by value, including the `@supports (color: color-mix(in lab, …))` pairs
 * (fallback hex value first, `color-mix(in oklab, …)` after it) and the `rtl:`
 * variants.
 *
 * Layer: `components`. The typography rules from prose.css (layer `utilities`)
 * must win against the component classes: `.prose :where(figure)` beats the
 * screenshot's `my-6`. The only element that must win against `.prose` the other
 * way round is a table of contents entry; it doesn't carry the `prose` class and
 * gets the declarations it needs directly in `.nd-toc-item` (see components.css).
 *
 * States live on `data-*`/`aria-*` attributes and pseudo-classes, not on modifier
 * classes. Where a state has no attribute (active section tab, closed folder
 * chevron), a second component class or a rule on the parent element stands in
 * for it; each of these places is commented below.
 */

@layer components {

  /* ====================================================================
     Document and grid
     ==================================================================== */

  /* .nd-body  <-  flex flex-col min-h-screen */
  .nd-body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  /* .nd-layout  <-  [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-sidebar-width:0px] [--fd-toc-popover-height:0px] [--fd-toc-width:0px] auto-cols-auto auto-rows-auto data-[column-changed=true]:transition-[grid-template-columns] grid min-h-(--fd-docs-height) overflow-x-clip */
  .nd-layout {
    display: grid;
    min-height: var(--fd-docs-height);
    grid-auto-columns: auto;
    grid-auto-rows: auto;
    overflow-x: clip;
    --fd-docs-height: 100dvh;
    --fd-header-height: 0px;
    --fd-sidebar-width: 0px;
    --fd-toc-popover-height: 0px;
    --fd-toc-width: 0px;
  }
  .nd-layout[data-column-changed="true"] {
    transition-property: grid-template-columns;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* Collapsed sidebar. Dropping only the sidebar column would let the page column
     grow to the left edge and open a wide dead zone before the table of contents.
     Instead the page column
     is only as wide as the article (900px) plus its padding, and never closer than a
     48px gutter to the window. The two outer 1fr columns share the rest, which
     centres content and table of contents as one group. The sidebar area still starts
     at the window edge (it spans the first column), so the hover zone and peek stay put.
     It overrides only the columns of the inline grid-template, so it applies at first
     paint once sidebar-restore.js sets the attribute, and it animates with the
     data-column-changed transition above. Below 768px there is no desktop sidebar. */
  @media (min-width: 48rem) {
    .nd-layout[data-sidebar-collapsed="true"] {
      --fd-collapsed-page-width: calc(900px + var(--spacing) * 16);
      --fd-collapsed-gutter: calc(var(--spacing) * 12);
      grid-template-columns:
        minmax(min-content, 1fr) 0px
        minmax(0, min(var(--fd-collapsed-page-width), calc(100% - var(--fd-toc-width) - 2 * var(--fd-collapsed-gutter))))
        var(--fd-toc-width) minmax(min-content, 1fr) !important;
    }
    /* The header keeps the span it has with the sidebar expanded (the full window, at
       most the layout width): only content and table of contents move, and the
       collapse trigger stays under the pointer instead of moving with the group.
       Size containment keeps the spanning header's min-content width out of the
       outer minmax(min-content, 1fr) columns, which it would otherwise inflate. */
    .nd-layout[data-sidebar-collapsed="true"] > .nd-header {
      grid-column: 1 / -1;
      justify-self: center;
      width: min(100%, var(--fd-layout-width, 97rem));
      contain: inline-size;
    }
  }

  /* ====================================================================
     Header
     ==================================================================== */

  /* .nd-header  <-  [grid-area:header] backdrop-blur-sm data-[transparent=false]:bg-fd-background/80 flex flex-col sticky top-(--fd-docs-row-1) transition-colors z-10 layout:[--fd-header-height:--spacing(14)] */
  .nd-header {
    position: sticky;
    top: var(--fd-docs-row-1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    grid-area: header;
  }
  .nd-header[data-transparent="false"] {
    background-color: #f5f5f5cc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-header[data-transparent="false"] {
      background-color: color-mix(in oklab, var(--color-fd-background) 80%, transparent);
    }
  }
  :is(#nd-notebook-layout:has(.nd-header), #nd-home-layout:has(.nd-header)) {
    --fd-header-height: calc(var(--spacing) * 14);
    --fd-header-height: calc(var(--spacing) * 14);
    --fd-header-height: calc(var(--spacing) * 14);
    --fd-header-height: calc(var(--spacing) * 14);
    --fd-header-height: calc(var(--spacing) * 14);
  }

  /* .nd-header-tabs  <-  lg:layout:[--fd-header-height:--spacing(24)] */
  @media (min-width: 64rem) {
    :is(#nd-notebook-layout:has(.nd-header-tabs), #nd-home-layout:has(.nd-header-tabs)) {
      --fd-header-height: calc(var(--spacing) * 24);
      --fd-header-height: calc(var(--spacing) * 24);
      --fd-header-height: calc(var(--spacing) * 24);
      --fd-header-height: calc(var(--spacing) * 24);
      --fd-header-height: calc(var(--spacing) * 24);
    }
  }

  /* .nd-header-body  <-  border-b flex gap-2 h-14 md:px-6 px-4 */
  .nd-header-body {
    display: flex;
    height: calc(var(--spacing) * 14);
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
  }
  @media (min-width: 48rem) {
    .nd-header-body {
      padding-inline: calc(var(--spacing) * 6);
    }
  }

  /* .nd-header-start  <-  flex flex-1 items-center */
  .nd-header-start {
    display: flex;
    flex: 1;
    align-items: center;
  }

  /* .nd-header-end  <-  flex flex-1 items-center justify-end md:gap-2 */
  .nd-header-end {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
  }
  @media (min-width: 48rem) {
    .nd-header-end {
      gap: calc(var(--spacing) * 2);
    }
  }

  /* .nd-header-mobile  <-  flex items-center md:hidden */
  .nd-header-mobile {
    display: flex;
    align-items: center;
  }
  @media (min-width: 48rem) {
    .nd-header-mobile {
      display: none;
    }
  }

  /* .nd-header-desktop  <-  flex gap-2 items-center max-md:hidden */
  .nd-header-desktop {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  @media not (min-width: 48rem) {
    .nd-header-desktop {
      display: none;
    }
  }

  /* .nd-header-trigger  <-  -me-1.5 */
  .nd-header-trigger {
    margin-inline-end: calc(var(--spacing) * -1.5);
  }

  /* ====================================================================
     Navigation title and header links
     ==================================================================== */

  /* .nd-nav-title  <-  font-semibold gap-2.5 inline-flex items-center */
  .nd-nav-title {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  /* .nd-nav-title-inner  <-  flex gap-2 items-center */
  .nd-nav-title-inner {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }

  /* .nd-nav-logo  <-  rounded-full */
  .nd-nav-logo {
    border-radius: 3.40282e38px;
  }

  /* .nd-strong  <-  font-semibold */
  .nd-strong {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  /* .nd-nav-links  <-  empty:hidden flex gap-6 items-center max-lg:hidden */
  .nd-nav-links {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 6);
  }
  .nd-nav-links:empty {
    display: none;
  }
  @media not (min-width: 64rem) {
    .nd-nav-links {
      display: none;
    }
  }

  /* .nd-nav-link  <-  data-[active=true]:text-fd-primary hover:text-fd-accent-foreground text-fd-muted-foreground text-sm transition-colors */
  .nd-nav-link {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-nav-link:hover {
      color: var(--color-fd-accent-foreground);
    }
  }
  .nd-nav-link[data-active="true"] {
    color: var(--color-fd-primary);
  }

  /* ====================================================================
     Section tabs
     ==================================================================== */

  /* .nd-tabs  <-  border-b flex flex-row gap-6 h-10 items-end max-lg:hidden overflow-x-auto px-6 */
  .nd-tabs {
    display: flex;
    height: calc(var(--spacing) * 10);
    flex-direction: row;
    align-items: flex-end;
    gap: calc(var(--spacing) * 6);
    overflow-x: auto;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 6);
  }
  @media not (min-width: 64rem) {
    .nd-tabs {
      display: none;
    }
  }

  /* .nd-tab  <-  inline-flex border-b-2 transition-colors items-center pb-1.5 font-medium gap-2 text-nowrap text-sm hover:text-fd-accent-foreground border-transparent text-fd-muted-foreground */
  .nd-tab {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
    border-color: #0000;
    padding-bottom: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-wrap: nowrap;
    color: var(--color-fd-muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-tab:hover {
      color: var(--color-fd-accent-foreground);
    }
  }

  /* .nd-tab-active  <-  border-fd-primary text-fd-primary */
  .nd-tab-active {
    border-color: var(--color-fd-primary);
    color: var(--color-fd-primary);
  }

  /* ====================================================================
     Sidebar
     ==================================================================== */

  /* .nd-sidebar-placeholder  <-  *:pointer-events-auto [grid-area:sidebar] h-[calc(var(--fd-docs-height)-var(--fd-docs-row-2))] max-md:hidden md:layout:[--fd-sidebar-width:268px] pointer-events-none sticky top-(--fd-docs-row-2) z-20 */
  .nd-sidebar-placeholder {
    pointer-events: none;
    position: sticky;
    top: var(--fd-docs-row-2);
    z-index: 20;
    height: calc(var(--fd-docs-height) - var(--fd-docs-row-2));
    grid-area: sidebar;
  }
  :is(.nd-sidebar-placeholder > *) {
    pointer-events: auto;
  }
  @media not (min-width: 48rem) {
    .nd-sidebar-placeholder {
      display: none;
    }
  }
  @media (min-width: 48rem) {
    :is(#nd-notebook-layout:has(.nd-sidebar-placeholder), #nd-home-layout:has(.nd-sidebar-placeholder)) {
      --fd-sidebar-width: 268px;
      --fd-sidebar-width: 268px;
      --fd-sidebar-width: 268px;
      --fd-sidebar-width: 268px;
      --fd-sidebar-width: 268px;
    }
  }

  /* .nd-sidebar  <-  *:w-(--fd-sidebar-width) absolute duration-250 flex flex-col inset-y-0 items-end start-0 text-sm w-full */
  .nd-sidebar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--spacing) * 0);
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-duration: .25s;
    transition-duration: .25s;
  }
  :is(.nd-sidebar > *) {
    width: var(--fd-sidebar-width);
  }

  /* .nd-sidebar-head  <-  empty:hidden flex flex-col gap-3 p-4 pb-2 */
  .nd-sidebar-head {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .nd-sidebar-head:empty {
    display: none;
  }

  /* .nd-sidebar-foot  <-  border-t flex-row hidden items-center px-4 py-2.5 text-fd-muted-foreground */
  .nd-sidebar-foot {
    display: none;
    flex-direction: row;
    align-items: center;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    color: var(--color-fd-muted-foreground);
  }

  /* ------------------------------------------------------------------
     Sidebar states that only JavaScript establishes

     The states are attributes on the `aside`: `data-collapsed`,
     `data-hovered` and `data-collapse-transition`, set by js/sidebar.js. The
     rules here hang on them.
     ------------------------------------------------------------------ */

  #nd-sidebar[data-collapsed="true"] {
    inset-block: calc(var(--spacing) * 2);
    width: var(--fd-sidebar-width);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-radius: var(--radius-xl);
    background-color: var(--color-fd-card);
  }

  /* After a collapse or expand click, width, height, offset and colour transition.
     The transition (`transition-[width,inset-block,translate,background-color]`)
     stays until the sidebar's next state change (usually the next hover):
     js/sidebar.js sets `data-collapse-transition` for exactly that lifetime;
     `data-column-changed` lasts only ~2 frames and drives nothing but the
     transition of the grid columns on the layout. The duration comes from
     `duration-250` in `.nd-sidebar`. */
  #nd-sidebar[data-collapse-transition] {
    transition-property: width, inset-block, translate, background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* Collapsed and without a fresh change, only the box moves. */
  #nd-sidebar[data-collapsed="true"]:not([data-collapse-transition]) {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  #nd-sidebar[data-collapsed="true"]:not([data-hovered="true"]) {
    --tw-translate-x: calc(var(--fd-sidebar-width) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  #nd-sidebar[data-collapsed="true"][data-hovered="true"] {
    --tw-translate-x: calc(var(--spacing) * 2);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  /* The 4 px wide zone at the edge over which the collapsed sidebar opens.
     js/sidebar.js creates the element; it needs only this one class. */
  .nd-sidebar-hoverzone {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(var(--spacing) * 4);
  }

  /* ------------------------------------------------------------------
     Drawer below 768 px (`aside#nd-sidebar-mobile`) and its overlay

     The generator emits both closed: the overlay as
     <template data-sidebar-overlay>, the drawer with `nd-invisible`.
     Opening and closing hang on `data-state="open|closed"`, which
     js/sidebar.js sets; after `animationend` it toggles `nd-invisible`.
     Header and entries use the classes of the desktop sidebar.
     ------------------------------------------------------------------ */

  /* .nd-drawer  <-  fixed text-[0.9375rem] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out */
  .nd-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: calc(var(--spacing) * 0);
    z-index: 40;
    display: flex;
    width: 85%;
    max-width: 380px;
    flex-direction: column;
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 1px;
    background-color: var(--color-fd-background);
    font-size: .9375rem;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .nd-drawer[data-state="closed"] {
    animation: var(--animate-fd-sidebar-out);
  }
  .nd-drawer[data-state="open"] {
    animation: var(--animate-fd-sidebar-in);
  }

  /* .nd-drawer-overlay  <-  fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out */
  .nd-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    --tw-backdrop-blur: blur(var(--blur-xs));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }
  .nd-drawer-overlay[data-state="closed"] {
    animation: var(--animate-fd-fade-out);
  }
  .nd-drawer-overlay[data-state="open"] {
    animation: var(--animate-fd-fade-in);
  }

  /* .nd-drawer-close  <-  rounded-md p-1.5 [&_svg]:size-4.5 ms-auto text-fd-muted-foreground */
  .nd-drawer-close {
    margin-inline-start: auto;
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 1.5);
    color: var(--color-fd-muted-foreground);
  }
  .nd-drawer-close svg {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }

  /* .nd-drawer-foot  <-  flex-row text-fd-muted-foreground items-center border-t p-4 pt-2 justify-end flex */
  .nd-drawer-foot {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 2);
    color: var(--color-fd-muted-foreground);
  }


  /* ====================================================================
     Sidebar scroll area
     ==================================================================== */

  /* .nd-scroll  <-  flex-1 min-h-0 */
  .nd-scroll {
    min-height: 0;
    flex: 1;
  }

  /* .nd-scroll-viewport  <-  overscroll-contain p-4 rounded-[inherit] size-full */
  .nd-scroll-viewport {
    width: 100%;
    height: 100%;
    overscroll-behavior: contain;
    border-radius: inherit;
    padding: calc(var(--spacing) * 4);
  }

  /* .nd-sidebar-list  <-  flex flex-col gap-0.5 */
  .nd-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * .5);
  }

  /* js/scroll-area.js creates the scrollbar and thumb of the ScrollArea. The bar
     is visible only while `data-hovering` is set, as in Base UI's ScrollArea. */

  /* .nd-scroll-bar  <-  flex select-none transition-opacity h-full w-1.5 */
  .nd-scroll-bar {
    display: flex;
    height: 100%;
    width: calc(var(--spacing) * 1.5);
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    -webkit-user-select: none;
    user-select: none;
  }

  /* .nd-scroll-bar:not([data-hovering])  <-  opacity-0 */
  .nd-scroll-bar:not([data-hovering]) {
    opacity: 0;
  }

  /* .nd-scroll-thumb  <-  relative flex-1 rounded-full bg-fd-border */
  .nd-scroll-thumb {
    position: relative;
    flex: 1;
    border-radius: 3.40282e38px;
    background-color: var(--color-fd-border);
  }


  /* ====================================================================
     Sidebar entries
     ==================================================================== */

  /* .nd-sidebar-item  <-  relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0 */
  .nd-sidebar-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    text-align: start;
    overflow-wrap: anywhere;
    color: var(--color-fd-muted-foreground);
  }
  .nd-sidebar-item svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }

  /* .nd-sidebar-item-link  <-  transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors */
  .nd-sidebar-item-link {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-sidebar-item-link:hover {
      background-color: #d1d1d140;
    }
  }
  @media (hover: hover) {
    @supports (color: color-mix(in lab, red, red)) {
      .nd-sidebar-item-link:hover {
        background-color: color-mix(in oklab, var(--color-fd-accent) 50%, transparent);
      }
    }
  }
  @media (hover: hover) {
    .nd-sidebar-item-link:hover {
      color: #171717cc;
    }
  }
  @media (hover: hover) {
    @supports (color: color-mix(in lab, red, red)) {
      .nd-sidebar-item-link:hover {
        color: color-mix(in oklab, var(--color-fd-accent-foreground) 80%, transparent);
      }
    }
  }
  @media (hover: hover) {
    .nd-sidebar-item-link:hover {
      transition-property: none;
    }
  }
  .nd-sidebar-item-link[data-active="true"] {
    background-color: #1717171a;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-sidebar-item-link[data-active="true"] {
      background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
    }
  }
  .nd-sidebar-item-link[data-active="true"] {
    color: var(--color-fd-primary);
  }
  @media (hover: hover) {
    .nd-sidebar-item-link[data-active="true"]:hover {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
    }
  }

  /* .nd-sidebar-item-button  <-  transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none */
  .nd-sidebar-item-button {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-sidebar-item-button:hover {
      background-color: #d1d1d140;
    }
  }
  @media (hover: hover) {
    @supports (color: color-mix(in lab, red, red)) {
      .nd-sidebar-item-button:hover {
        background-color: color-mix(in oklab, var(--color-fd-accent) 50%, transparent);
      }
    }
  }
  @media (hover: hover) {
    .nd-sidebar-item-button:hover {
      color: #171717cc;
    }
  }
  @media (hover: hover) {
    @supports (color: color-mix(in lab, red, red)) {
      .nd-sidebar-item-button:hover {
        color: color-mix(in oklab, var(--color-fd-accent-foreground) 80%, transparent);
      }
    }
  }
  @media (hover: hover) {
    .nd-sidebar-item-button:hover {
      transition-property: none;
    }
  }

  /* .nd-sidebar-item-mark  <-  data-[active=true]:before:content-[''] data-[active=true]:before:bg-fd-primary data-[active=true]:before:absolute data-[active=true]:before:w-px data-[active=true]:before:inset-y-2.5 data-[active=true]:before:start-2.5 */
  .nd-sidebar-item-mark[data-active="true"]:before {
    content: var(--tw-content);
    position: absolute;
    content: var(--tw-content);
    inset-block: calc(var(--spacing) * 2.5);
  }
  .nd-sidebar-item-mark[data-active="true"]:before {
    content: var(--tw-content);
    inset-inline-start: calc(var(--spacing) * 2.5);
  }
  .nd-sidebar-item-mark[data-active="true"]:before {
    content: var(--tw-content);
    width: 1px;
    content: var(--tw-content);
    background-color: var(--color-fd-primary);
    --tw-content: "";
    content: var(--tw-content);
  }

  /* .nd-sidebar-trigger  <-  w-full */
  .nd-sidebar-trigger {
    width: 100%;
  }

  /* .nd-sidebar-menu  <-  lg:hidden */
  @media (min-width: 64rem) {
    .nd-sidebar-menu {
      display: none;
    }
  }

  /* .nd-sidebar-menu-last  <-  mb-4 */
  .nd-sidebar-menu-last {
    margin-bottom: calc(var(--spacing) * 4);
  }

  /* .nd-sidebar-chevron  <-  ms-auto transition-transform */
  .nd-sidebar-chevron {
    margin-inline-start: auto;
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* The chevron of a closed folder (`-rotate-90 rtl:rotate-90`). The state comes
   * from the trigger: js/collapsible.js sets `data-panel-open` there while the
   * panel is open, so no class has to be swapped. */
  :not([data-panel-open]) > .nd-sidebar-chevron {
    rotate: -90deg;
  }
  :not([data-panel-open]) > .nd-sidebar-chevron:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) {
    rotate: 90deg;
  }

  /* .nd-sidebar-panel  <-  overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) transition-[height,opacity] data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:h-0 data-ending-style:opacity-0 relative flex flex-col gap-0.5 pt-0.5 */
  .nd-sidebar-panel {
    position: relative;
    display: flex;
    height: var(--collapsible-panel-height);
    flex-direction: column;
    gap: calc(var(--spacing) * .5);
    overflow: hidden;
    padding-top: calc(var(--spacing) * .5);
    transition-property: height, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .nd-sidebar-panel[data-ending-style] {
    height: 0;
    opacity: 0;
  }
  .nd-sidebar-panel[data-starting-style] {
    height: 0;
    opacity: 0;
  }
  .nd-sidebar-panel[hidden]:not([hidden="until-found"]) {
    display: none;
  }

  /* .nd-sidebar-panel-line  <-  before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5 */
  .nd-sidebar-panel-line:before {
    content: var(--tw-content);
    position: absolute;
    content: var(--tw-content);
    inset-block: var(--spacing);
  }
  .nd-sidebar-panel-line:before {
    content: var(--tw-content);
    inset-inline-start: calc(var(--spacing) * 2.5);
  }
  .nd-sidebar-panel-line:before {
    content: var(--tw-content);
    width: 1px;
    content: var(--tw-content);
    background-color: var(--color-fd-border);
    --tw-content: "";
    content: var(--tw-content);
  }

  /* .nd-sidebar-sep  <-  inline-flex items-center gap-2 mb-1.5 px-2 mt-6 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0 */
  .nd-sidebar-sep {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 1.5);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
  }
  .nd-sidebar-sep:empty {
    margin-bottom: 0;
  }
  .nd-sidebar-sep svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }

  /* .nd-sidebar-sep-top  <-  first:mt-0 */
  .nd-sidebar-sep-top:first-child {
    margin-top: 0;
  }

  /* ====================================================================
     Main column and article
     ==================================================================== */

  /* .nd-main  <-  [grid-area:main] grid */
  .nd-main {
    display: grid;
    grid-area: main;
  }

  /* .nd-page  <-  *:max-w-[900px] flex flex-col gap-4 md:pt-8 md:px-6 min-w-0 px-4 py-6 xl:pt-14 xl:px-8 */
  .nd-page {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 6);
  }
  /* The width of the article children lives in utilities.css: the child `div.prose`
   * carries `.prose { max-width: none }` from prose.css, which lives in the
   * `utilities` layer. `*:max-w-[900px]` wins through its place after prose.css
   * in the same layer. */
  @media (min-width: 48rem) {
    .nd-page {
      padding-inline: calc(var(--spacing) * 6);
      padding-top: calc(var(--spacing) * 8);
    }
  }
  @media (min-width: 80rem) {
    .nd-page {
      padding-inline: calc(var(--spacing) * 8);
      padding-top: calc(var(--spacing) * 14);
    }
  }

  /* .nd-page-title  <-  font-semibold text-[1.75em] */
  .nd-page-title {
    font-size: 1.75em;
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  /* .nd-page-desc  <-  mb-8 text-fd-muted-foreground text-lg */
  .nd-page-desc {
    margin-bottom: calc(var(--spacing) * 8);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-fd-muted-foreground);
  }


  /* .nd-page-stand  <-  -mt-4 mb-6 text-fd-muted-foreground text-sm */
  .nd-page-stand {
    margin-top: calc(var(--spacing) * -4);
    margin-bottom: calc(var(--spacing) * 6);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-prose  <-  flex-1 */
  .nd-prose {
    flex: 1;
  }

  /* ====================================================================
     Table of contents: column
     ==================================================================== */

  /* .nd-toc  <-  [grid-area:toc] flex flex-col h-[calc(var(--fd-docs-height)-var(--fd-docs-row-3))] max-xl:hidden pb-2 pe-4 pt-12 sticky top-(--fd-docs-row-3) w-(--fd-toc-width) xl:layout:[--fd-toc-width:268px] */
  .nd-toc {
    position: sticky;
    top: var(--fd-docs-row-3);
    display: flex;
    height: calc(var(--fd-docs-height) - var(--fd-docs-row-3));
    width: var(--fd-toc-width);
    flex-direction: column;
    padding-inline-end: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 12);
    padding-bottom: calc(var(--spacing) * 2);
    grid-area: toc;
  }
  @media not (min-width: 80rem) {
    .nd-toc {
      display: none;
    }
  }
  @media (min-width: 80rem) {
    :is(#nd-notebook-layout:has(.nd-toc), #nd-home-layout:has(.nd-toc)) {
      --fd-toc-width: 268px;
      --fd-toc-width: 268px;
      --fd-toc-width: 268px;
      --fd-toc-width: 268px;
      --fd-toc-width: 268px;
    }
  }

  /* .nd-toc-empty  <-  hidden xl:layout:[--fd-toc-width:268px] */
  .nd-toc-empty {
    display: none;
  }
  @media (min-width: 80rem) {
    :is(#nd-notebook-layout:has(.nd-toc-empty), #nd-home-layout:has(.nd-toc-empty)) {
      --fd-toc-width: 268px;
      --fd-toc-width: 268px;
      --fd-toc-width: 268px;
      --fd-toc-width: 268px;
      --fd-toc-width: 268px;
    }
  }

  /* .nd-toc-title  <-  gap-1.5 inline-flex items-center text-fd-muted-foreground text-sm */
  .nd-toc-title {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-toc-title-icon  <-  size-4 */
  .nd-toc-title-icon {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  /* .nd-toc-scroll  <-  [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] min-h-0 ms-px overflow-x-clip overflow-y-auto overscroll-contain py-3 relative text-sm */
  .nd-toc-scroll {
    position: relative;
    margin-inline-start: 1px;
    min-height: 0;
    scrollbar-width: none;
    /* The one fade Pholio keeps: entries soften out at the top and bottom edge of the list
       instead of being cut off hard under "On this page". */
    -webkit-mask-image: linear-gradient(#0000, #fff 16px calc(100% - 16px), #0000);
    mask-image: linear-gradient(#0000, #fff 16px calc(100% - 16px), #0000);
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  /* .nd-toc-list  <-  flex flex-col relative */
  .nd-toc-list {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* ====================================================================
     Table of contents: popover frame
     ==================================================================== */

  /* .nd-tocpop  <-  [grid-area:toc-popover] h-(--fd-toc-popover-height) max-xl:layout:[--fd-toc-popover-height:--spacing(10)] sticky top-(--fd-docs-row-2) xl:hidden z-10 */
  .nd-tocpop {
    position: sticky;
    top: var(--fd-docs-row-2);
    z-index: 10;
    height: var(--fd-toc-popover-height);
    grid-area: toc-popover;
  }
  @media (min-width: 80rem) {
    .nd-tocpop {
      display: none;
    }
  }
  @media not (min-width: 80rem) {
    :is(#nd-notebook-layout:has(.nd-tocpop), #nd-home-layout:has(.nd-tocpop)) {
      --fd-toc-popover-height: calc(var(--spacing) * 10);
      --fd-toc-popover-height: calc(var(--spacing) * 10);
      --fd-toc-popover-height: calc(var(--spacing) * 10);
      --fd-toc-popover-height: calc(var(--spacing) * 10);
      --fd-toc-popover-height: calc(var(--spacing) * 10);
    }
  }

  /* .nd-tocpop-header  <-  backdrop-blur-sm bg-fd-background/80 border-b transition-colors */
  .nd-tocpop-header {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    background-color: #f5f5f5cc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-tocpop-header {
      background-color: color-mix(in oklab, var(--color-fd-background) 80%, transparent);
    }
  }
  .nd-tocpop-header {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* Panel of the collapsible TOC bar. The generator writes it as
     <template data-collapsible-panel> into the `header`; js/collapsible.js
     inserts it on opening and sets the phase attributes. */

  /* .nd-collapsible-panel  <-  overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) transition-[height,opacity] data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:h-0 data-ending-style:opacity-0 */
  .nd-collapsible-panel {
    height: var(--collapsible-panel-height);
    overflow: hidden;
    transition-property: height, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .nd-collapsible-panel[data-ending-style] {
    height: 0;
    opacity: 0;
  }
  .nd-collapsible-panel[data-starting-style] {
    height: 0;
    opacity: 0;
  }
  .nd-collapsible-panel[hidden]:not([hidden="until-found"]) {
    display: none;
  }

  /* .nd-tocpop-content  <-  flex flex-col px-4 max-h-[50vh] md:px-6 */
  .nd-tocpop-content {
    display: flex;
    max-height: 50vh;
    flex-direction: column;
    padding-inline: calc(var(--spacing) * 4);
  }
  @media (min-width: 48rem) {
    .nd-tocpop-content {
      padding-inline: calc(var(--spacing) * 6);
    }
  }


  /* ====================================================================
     Start page: scaffold and header
     ==================================================================== */

  /* .nd-home  <-  [--fd-layout-width:1400px] flex flex-1 flex-col */
  .nd-home {
    display: flex;
    flex: 1;
    flex-direction: column;
    --fd-layout-width: 1400px;
  }

  /* .nd-home-header  <-  h-14 sticky top-0 z-40 */
  .nd-home-header {
    position: sticky;
    top: 0;
    z-index: 40;
    height: calc(var(--spacing) * 14);
  }

  /* .nd-home-nav  <-  backdrop-blur-lg bg-fd-background/80 border-b transition-[box-shadow,background-color,border-radius] */
  .nd-home-nav {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    background-color: #f5f5f5cc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-home-nav {
      background-color: color-mix(in oklab, var(--color-fd-background) 80%, transparent);
    }
  }
  .nd-home-nav {
    --tw-backdrop-blur: blur(var(--blur-lg));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    transition-property: box-shadow, background-color, border-radius;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* .nd-home-nav-row  <-  flex h-14 items-center max-w-(--fd-layout-width) mx-auto px-4 w-full */
  .nd-home-nav-row {
    margin-inline: auto;
    display: flex;
    height: calc(var(--spacing) * 14);
    width: 100%;
    max-width: var(--fd-layout-width);
    align-items: center;
    padding-inline: calc(var(--spacing) * 4);
  }

  /* .nd-home-nav-list  <-  flex flex-row gap-2 items-center max-sm:hidden px-6 */
  .nd-home-nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 6);
  }
  @media not (min-width: 40rem) {
    .nd-home-nav-list {
      display: none;
    }
  }

  /* .nd-home-nav-item  <-  list-none text-sm */
  .nd-home-nav-item {
    list-style-type: none;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  /* .nd-home-nav-link  <-  [&_svg]:size-4 data-[active=true]:text-fd-primary gap-1 hover:text-fd-accent-foreground inline-flex items-center p-2 text-fd-muted-foreground transition-colors */
  .nd-home-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    padding: calc(var(--spacing) * 2);
    color: var(--color-fd-muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-home-nav-link:hover {
      color: var(--color-fd-accent-foreground);
    }
  }
  .nd-home-nav-link[data-active="true"] {
    color: var(--color-fd-primary);
  }
  .nd-home-nav-link svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  /* .nd-home-nav-wide  <-  flex flex-1 flex-row gap-1.5 items-center justify-end max-lg:hidden */
  .nd-home-nav-wide {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: calc(var(--spacing) * 1.5);
  }
  @media not (min-width: 64rem) {
    .nd-home-nav-wide {
      display: none;
    }
  }

  /* .nd-home-nav-icons  <-  empty:hidden flex flex-row gap-2 items-center */
  .nd-home-nav-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .nd-home-nav-icons:empty {
    display: none;
  }

  /* .nd-home-nav-narrow  <-  -me-1.5 flex flex-row items-center lg:hidden ms-auto */
  .nd-home-nav-narrow {
    margin-inline-start: auto;
    margin-inline-end: calc(var(--spacing) * -1.5);
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  @media (min-width: 64rem) {
    .nd-home-nav-narrow {
      display: none;
    }
  }

  /* .nd-home-menu-chevron  <-  transition-transform */
  .nd-home-menu-chevron {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* .nd-home-main  <-  flex flex-1 flex-col */
  .nd-home-main {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  /* .nd-home-section  <-  lg:max-w-7xl max-w-6xl mx-auto px-6 py-16 w-full */
  .nd-home-section {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-6xl);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 16);
  }
  @media (min-width: 64rem) {
    .nd-home-section {
      max-width: var(--container-7xl);
    }
  }

  /* ------------------------------------------------------------------
     Collapsible start page menu below `lg`

     The panel is a <template data-collapsible-panel> in `nav.nd-home-nav`
     (components/home-header.php); js/collapsible.js inserts it and sets
     `--collapsible-panel-height` and the phases `data-starting-style` /
     `data-ending-style`. When open, `header#nd-nav` carries `data-open` and
     the trigger `data-panel-open`. The rules for the open menu
     (`max-lg:shadow-lg max-lg:rounded-b-2xl` on `nav`, `rotate-180` on the
     chevron) read these attributes.
     ------------------------------------------------------------------ */

  /* .nd-home-menu-panel  <-  overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) transition-[height,opacity] data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:h-0 data-ending-style:opacity-0 mx-auto max-w-(--fd-layout-width) lg:hidden */
  .nd-home-menu-panel {
    margin-inline: auto;
    height: var(--collapsible-panel-height);
    max-width: var(--fd-layout-width);
    overflow: hidden;
    transition-property: height, opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .nd-home-menu-panel[data-ending-style] {
    height: 0;
    opacity: 0;
  }
  .nd-home-menu-panel[data-starting-style] {
    height: 0;
    opacity: 0;
  }
  @media (min-width: 64rem) {
    .nd-home-menu-panel {
      display: none;
    }
  }
  .nd-home-menu-panel[hidden]:not([hidden="until-found"]) {
    display: none;
  }

  /* .nd-home-menu  <-  flex flex-col pt-2 p-4 sm:flex-row sm:items-center sm:justify-end */
  .nd-home-menu {
    display: flex;
    flex-direction: column;
    padding: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 2);
  }
  @media (min-width: 40rem) {
    .nd-home-menu {
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
    }
  }

  /* .nd-home-menu-link  <-  inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4 sm:hidden */
  .nd-home-menu-link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-home-menu-link:hover {
      color: #27272780;
    }
  }
  @media (hover: hover) {
    @supports (color: color-mix(in lab, red, red)) {
      .nd-home-menu-link:hover {
        color: color-mix(in oklab, var(--color-fd-popover-foreground) 50%, transparent);
      }
    }
  }
  .nd-home-menu-link[data-active="true"] {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-fd-primary);
  }
  @media (min-width: 40rem) {
    .nd-home-menu-link {
      display: none;
    }
  }
  .nd-home-menu-link svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  /* .nd-home-menu-foot  <-  -ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2 */
  .nd-home-menu-foot {
    margin-inline-start: calc(var(--spacing) * -1.5);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  @media not (min-width: 40rem) {
    .nd-home-menu-foot {
      margin-top: calc(var(--spacing) * 2);
    }
  }

  /* .nd-home-menu-sep  <-  flex-1 */
  .nd-home-menu-sep {
    flex: 1;
  }

  /* #nd-nav[data-open] .nd-home-nav  <-  max-lg:shadow-lg max-lg:rounded-b-2xl */
  @media not (min-width: 64rem) {
    #nd-nav[data-open] .nd-home-nav {
      border-bottom-right-radius: var(--radius-2xl);
      border-bottom-left-radius: var(--radius-2xl);
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  /* [data-panel-open] > .nd-home-menu-chevron  <-  rotate-180 */
  [data-panel-open] > .nd-home-menu-chevron {
    rotate: 180deg;
  }
}

/* ---- components.css ---- */
/* components.css — buttons, search trigger, search dialog, theme toggle,
 * section switcher, breadcrumbs, footer navigation, TOC entries, headings,
 * callout, cards, images, tables and the content components of the start
 * page.
 *
 * Origin, layer and how to read the comments: see the head of layout.css.
 */

@layer components {

  /* ====================================================================
     Buttons (buttonVariants)
     ==================================================================== */

  /* .nd-btn  <-  inline-flex items-center justify-center text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring */
  .nd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .1s;
    transition-duration: .1s;
  }
  .nd-btn:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-fd-ring);
    --tw-outline-style: none;
    outline-style: none;
  }
  .nd-btn:disabled {
    pointer-events: none;
    opacity: .5;
  }

  /* .nd-btn-ghost  <-  hover:bg-fd-accent hover:text-fd-accent-foreground */
  @media (hover: hover) {
    .nd-btn-ghost:hover {
      background-color: var(--color-fd-accent);
      color: var(--color-fd-accent-foreground);
    }
  }

  /* .nd-btn-secondary  <-  bg-fd-secondary border text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground */
  .nd-btn-secondary {
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-secondary);
    color: var(--color-fd-muted-foreground);
  }
  @media (hover: hover) {
    .nd-btn-secondary:hover {
      background-color: var(--color-fd-accent);
      color: var(--color-fd-accent-foreground);
    }
  }

  /* .nd-btn-icon  <-  p-2 rounded-md [&_svg]:size-4.5 */
  .nd-btn-icon {
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2);
  }
  .nd-btn-icon svg {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }

  /* .nd-btn-icon-sm  <-  p-1.5 rounded-full [&_svg]:size-4.5 */
  .nd-btn-icon-sm {
    border-radius: 3.40282e38px;
    padding: calc(var(--spacing) * 1.5);
  }
  .nd-btn-icon-sm svg {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }

  /* .nd-btn-icon-xs  <-  p-1 rounded-md [&_svg]:size-4 */
  .nd-btn-icon-xs {
    border-radius: var(--radius-md);
    padding: var(--spacing);
  }
  .nd-btn-icon-xs svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  /* .nd-btn-sm  <-  p-1.5 rounded-md [&_svg]:size-5 */
  .nd-btn-sm {
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 1.5);
  }
  .nd-btn-sm svg {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  /* ====================================================================
     Search trigger
     ==================================================================== */

  /* .nd-search  <-  inline-flex items-center gap-2 border bg-fd-secondary/50 p-1.5 ps-2.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground w-full */
  .nd-search {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: #ededed80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-search {
      background-color: color-mix(in oklab, var(--color-fd-secondary) 50%, transparent);
    }
  }
  .nd-search {
    padding: calc(var(--spacing) * 1.5);
    padding-inline-start: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-search:hover {
      background-color: var(--color-fd-accent);
      color: var(--color-fd-accent-foreground);
    }
  }

  /* .nd-search-wide  <-  rounded-xl max-w-sm my-auto max-md:hidden */
  .nd-search-wide {
    margin-block: auto;
    max-width: var(--container-sm);
    border-radius: var(--radius-xl);
  }
  @media not (min-width: 48rem) {
    .nd-search-wide {
      display: none;
    }
  }

  /* .nd-search-home  <-  rounded-full max-w-[240px] */
  .nd-search-home {
    max-width: 240px;
    border-radius: 3.40282e38px;
  }

  /* .nd-search-icon  <-  size-4 */
  .nd-search-icon {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  /* .nd-search-keys  <-  gap-0.5 inline-flex ms-auto */
  .nd-search-keys {
    margin-inline-start: auto;
    display: inline-flex;
    gap: calc(var(--spacing) * .5);
  }

  /* .nd-search-key  <-  bg-fd-background border px-1.5 rounded-md */
  .nd-search-key {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-background);
    padding-inline: calc(var(--spacing) * 1.5);
  }

  /* ====================================================================
     Search dialog (closed remainder in the DOM)
     ==================================================================== */

  /* .nd-dialog-backdrop  <-  backdrop-blur-xs bg-fd-overlay data-closed:animate-fd-fade-out data-open:animate-fd-fade-in fixed inset-0 z-50 */
  .nd-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background-color: var(--color-fd-overlay);
    --tw-backdrop-blur: blur(var(--blur-xs));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }
  .nd-dialog-backdrop[data-closed] {
    animation: var(--animate-fd-fade-out);
  }
  .nd-dialog-backdrop[data-open] {
    animation: var(--animate-fd-fade-in);
  }

  /* .nd-dialog-footer  <-  bg-fd-secondary/50 empty:hidden p-3 */
  .nd-dialog-footer {
    background-color: #ededed80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-dialog-footer {
      background-color: color-mix(in oklab, var(--color-fd-secondary) 50%, transparent);
    }
  }
  .nd-dialog-footer {
    padding: calc(var(--spacing) * 3);
  }
  .nd-dialog-footer:empty {
    display: none;
  }

  /* ====================================================================
     Search dialog (open; created by js/search-dialog.js)
     ==================================================================== */

  /* Source of the utility lists: the class constants and templates in
     js/search-dialog.js. The active result hangs on `aria-selected="true"`. */

  /* .nd-dialog  <-  fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl overflow-hidden data-closed:animate-fd-dialog-out data-open:animate-fd-dialog-in focus-visible:outline-none *:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0 */
  .nd-dialog {
    position: fixed;
    top: calc(var(--spacing) * 4);
    left: 50%;
    z-index: 50;
    width: calc(100% - 1rem);
    max-width: var(--breakpoint-sm);
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    overflow: hidden;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-popover);
    color: var(--color-fd-popover-foreground);
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  :is(.nd-dialog > *) {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  :is(.nd-dialog > *):last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }
  .nd-dialog:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  :is(.nd-dialog > *):has( + :last-child[data-empty="true"]) {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }
  .nd-dialog[data-closed] {
    animation: var(--animate-fd-dialog-out);
  }
  .nd-dialog[data-open] {
    animation: var(--animate-fd-dialog-in);
  }
  :is(.nd-dialog > *)[data-empty="true"] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }
  @media (min-width: 48rem) {
    .nd-dialog {
      top: calc(50% - 250px);
    }
  }

  /* .nd-search-head  <-  flex flex-row items-center gap-2 p-3 */
  .nd-search-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 3);
  }

  /* .nd-search-head-icon  <-  size-5 text-fd-muted-foreground */
  .nd-search-head-icon {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-search-loading  <-  animate-pulse duration-400 */
  .nd-search-loading {
    animation: var(--animate-pulse);
    --tw-duration: .4s;
    transition-duration: .4s;
  }

  /* .nd-search-input  <-  w-0 flex-1 bg-transparent text-lg placeholder:text-fd-muted-foreground focus-visible:outline-none */
  .nd-search-input {
    width: 0;
    flex: 1;
    background-color: #0000;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .nd-search-input::placeholder {
    color: var(--color-fd-muted-foreground);
  }
  .nd-search-input:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  /* .nd-search-close  <-  rounded-md p-2 border hover:bg-fd-accent hover:text-fd-accent-foreground gap-1 px-2 py-1.5 text-xs font-mono text-fd-muted-foreground */
  .nd-search-close {
    gap: var(--spacing);
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-fd-muted-foreground);
  }
  @media (hover: hover) {
    .nd-search-close:hover {
      background-color: var(--color-fd-accent);
      color: var(--color-fd-accent-foreground);
    }
  }

  /* .nd-search-results  <-  overflow-hidden h-(--fd-animated-height) transition-[height] */
  .nd-search-results {
    height: var(--fd-animated-height);
    overflow: hidden;
    transition-property: height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* .nd-search-list  <-  w-full flex flex-col overflow-y-auto overscroll-contain max-h-[460px] p-1 */
  .nd-search-list {
    display: flex;
    max-height: 460px;
    width: 100%;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing);
  }

  /* .nd-search-item  <-  relative select-none shrink-0 px-2.5 py-2 text-start text-sm overflow-hidden rounded-lg */
  .nd-search-item {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2.5);
    padding-block: calc(var(--spacing) * 2);
    text-align: start;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    -webkit-user-select: none;
    user-select: none;
  }

  /* .nd-search-item[aria-selected="true"]  <-  bg-fd-accent text-fd-accent-foreground */
  .nd-search-item[aria-selected="true"] {
    background-color: var(--color-fd-accent);
    color: var(--color-fd-accent-foreground);
  }

  /* .nd-search-crumbs  <-  inline-flex items-center text-fd-muted-foreground text-xs empty:hidden */
  .nd-search-crumbs {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-fd-muted-foreground);
  }
  .nd-search-crumbs:empty {
    display: none;
  }

  /* Separator between the breadcrumbs of a result: `ChevronRight` with
     `size-4 rtl:rotate-180`. */
  /* .nd-search-crumb-sep  <-  size-4 rtl:rotate-180 */
  .nd-search-crumb-sep {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .nd-search-crumb-sep:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) {
    rotate: 180deg;
  }

  /* .nd-search-item-line  <-  absolute inset-s-3 inset-y-0 w-px bg-fd-border */
  .nd-search-item-line {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--spacing) * 3);
    width: 1px;
    background-color: var(--color-fd-border);
  }

  /* .nd-search-item-hash  <-  absolute inset-s-6 top-2.5 size-4 text-fd-muted-foreground */
  .nd-search-item-hash {
    position: absolute;
    inset-inline-start: calc(var(--spacing) * 6);
    top: calc(var(--spacing) * 2.5);
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-search-item-body  <-  min-w-0 */
  .nd-search-item-body {
    min-width: 0;
  }

  /* .nd-search-item-page  <-  font-medium */
  .nd-search-item-page {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  /* .nd-search-item-heading  <-  ps-8 font-medium */
  .nd-search-item-heading {
    padding-inline-start: calc(var(--spacing) * 8);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  /* .nd-search-item-text  <-  ps-4 text-fd-popover-foreground/80 */
  .nd-search-item-text {
    padding-inline-start: calc(var(--spacing) * 4);
    color: #272727cc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-search-item-text {
      color: color-mix(in oklab, var(--color-fd-popover-foreground) 80%, transparent);
    }
  }

  /* .nd-search-md-p  <-  min-w-0 */
  .nd-search-md-p {
    min-width: 0;
  }

  /* .nd-search-mark  <-  text-fd-primary underline */
  .nd-search-mark {
    color: var(--color-fd-primary);
    text-decoration-line: underline;
  }

  /* .nd-search-strong  <-  text-fd-accent-foreground font-medium */
  .nd-search-strong {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-fd-accent-foreground);
  }

  /* .nd-search-code  <-  border rounded-md px-px bg-fd-secondary text-fd-secondary-foreground */
  .nd-search-code {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-secondary);
    padding-inline: 1px;
    color: var(--color-fd-secondary-foreground);
  }

  /* .nd-search-tag  <-  inline-flex max-w-full items-center border p-0.5 rounded-md bg-fd-card text-fd-card-foreground divide-x divide-fd-border */
  .nd-search-tag {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
  }
  :where(.nd-search-tag > :not(:last-child)) {
    --tw-divide-x-reverse: 0;
    border-inline-style: var(--tw-border-style);
    border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
    border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    border-color: var(--color-fd-border);
  }
  .nd-search-tag {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-card);
    padding: calc(var(--spacing) * .5);
    color: var(--color-fd-card-foreground);
  }

  /* .nd-search-tag-name  <-  rounded-sm px-0.5 me-1 bg-fd-primary font-medium text-xs text-fd-primary-foreground border-none */
  .nd-search-tag-name {
    margin-inline-end: var(--spacing);
    border-radius: var(--radius-sm);
    --tw-border-style: none;
    border-style: none;
    background-color: var(--color-fd-primary);
    padding-inline: calc(var(--spacing) * .5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-fd-primary-foreground);
  }

  /* .nd-search-tag-field  <-  truncate text-xs text-fd-muted-foreground px-1 */
  .nd-search-tag-field {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-inline: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-search-tag-key  <-  text-fd-card-foreground */
  .nd-search-tag-key {
    color: var(--color-fd-card-foreground);
  }

  /* .nd-search-tag-children  <-  ps-1 */
  .nd-search-tag-children {
    padding-inline-start: var(--spacing);
  }

  /* .nd-search-empty  <-  py-12 text-center text-sm text-fd-muted-foreground */
  .nd-search-empty {
    padding-block: calc(var(--spacing) * 12);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
  }


  /* ====================================================================
     Theme toggle
     ==================================================================== */

  /* .nd-theme  <-  *:rounded-full border inline-flex items-center overflow-hidden p-1 rounded-full */
  .nd-theme {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border-radius: 3.40282e38px;
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: var(--spacing);
  }
  :is(.nd-theme > *) {
    border-radius: 3.40282e38px;
  }

  /* .nd-theme-icon  <-  p-1.5 size-6.5 text-fd-muted-foreground */
  .nd-theme-icon {
    width: calc(var(--spacing) * 6.5);
    height: calc(var(--spacing) * 6.5);
    padding: calc(var(--spacing) * 1.5);
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-theme-icon-active  <-  bg-fd-accent text-fd-accent-foreground */
  .nd-theme-icon-active {
    background-color: var(--color-fd-accent);
    color: var(--color-fd-accent-foreground);
  }

  /* ====================================================================
     Sidebar section switcher
     ==================================================================== */

  /* .nd-tabsdrop  <-  bg-fd-secondary/50 border data-[popup-open]:bg-fd-accent data-[popup-open]:text-fd-accent-foreground flex gap-2 hover:bg-fd-accent items-center p-2 rounded-lg text-fd-secondary-foreground text-start transition-colors */
  .nd-tabsdrop {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: #ededed80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-tabsdrop {
      background-color: color-mix(in oklab, var(--color-fd-secondary) 50%, transparent);
    }
  }
  .nd-tabsdrop {
    padding: calc(var(--spacing) * 2);
    text-align: start;
    color: var(--color-fd-secondary-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-tabsdrop:hover {
      background-color: var(--color-fd-accent);
    }
  }
  .nd-tabsdrop[data-popup-open] {
    background-color: var(--color-fd-accent);
    color: var(--color-fd-accent-foreground);
  }

  /* `lg:hidden` is separate, because the same section switcher appears in the
     drawer without this class (mode `tabMode: navbar` hides only the one in
     the desktop sidebar from `lg`). */
  /* .nd-tabsdrop-navbar  <-  lg:hidden */
  @media (min-width: 64rem) {
    .nd-tabsdrop-navbar {
      display: none;
    }
  }

  /* .nd-tabsdrop-iconbox  <-  empty:hidden md:size-5 shrink-0 size-9 */
  .nd-tabsdrop-iconbox {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    flex-shrink: 0;
  }
  .nd-tabsdrop-iconbox:empty {
    display: none;
  }
  @media (min-width: 48rem) {
    .nd-tabsdrop-iconbox {
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
    }
  }

  /* .nd-tabsdrop-iconinner  <-  [&_svg]:size-full max-md:bg-fd-secondary max-md:border max-md:p-1.5 max-md:rounded-md size-full */
  .nd-tabsdrop-iconinner {
    width: 100%;
    height: 100%;
  }
  @media not (min-width: 48rem) {
    .nd-tabsdrop-iconinner {
      border-radius: var(--radius-md);
      border-style: var(--tw-border-style);
      border-width: 1px;
      background-color: var(--color-fd-secondary);
      padding: calc(var(--spacing) * 1.5);
    }
  }
  .nd-tabsdrop-iconinner svg {
    width: 100%;
    height: 100%;
  }

  /* .nd-tabsdrop-title  <-  font-medium text-sm */
  .nd-tabsdrop-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  /* .nd-tabsdrop-desc  <-  empty:hidden md:hidden text-fd-muted-foreground text-sm */
  .nd-tabsdrop-desc {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
  }
  .nd-tabsdrop-desc:empty {
    display: none;
  }
  @media (min-width: 48rem) {
    .nd-tabsdrop-desc {
      display: none;
    }
  }

  /* .nd-tabsdrop-chevron  <-  ms-auto shrink-0 size-4 text-fd-muted-foreground */
  .nd-tabsdrop-chevron {
    margin-inline-start: auto;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-fd-muted-foreground);
  }

  /* Popup of the section switcher (Base UI popover, created by js/popover.js)
     and the content from <template data-nd-tabs-popup>. Open/closed through
     `data-open` / `data-closed`; the inactive option carries `nd-invisible`
     on its check mark. */

  /* .nd-popover-positioner  <-  z-50 */
  .nd-popover-positioner {
    z-index: 50;
  }

  /* .nd-popover  <-  z-50 origin-(--transform-origin) overflow-y-auto overscroll-contain max-h-(--available-height) min-w-[240px] max-w-[98vw] rounded-xl border bg-fd-popover/60 backdrop-blur-lg text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-closed:animate-fd-popover-out data-open:animate-fd-popover-in */
  .nd-popover {
    z-index: 50;
    max-height: var(--available-height);
    max-width: 98vw;
    min-width: 240px;
    transform-origin: var(--transform-origin);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: #fafafa99;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-popover {
      background-color: color-mix(in oklab, var(--color-fd-popover) 60%, transparent);
    }
  }
  .nd-popover {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-popover-foreground);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-backdrop-blur: blur(var(--blur-lg));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }
  .nd-popover:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  .nd-popover[data-closed] {
    animation: var(--animate-fd-popover-out);
  }
  .nd-popover[data-open] {
    animation: var(--animate-fd-popover-in);
  }

  /* Page menu next to the page title (components/page-actions.php,
     js/page-actions.js), modelled on Mintlify's page
     menu, built from buttonVariants secondary and the popover above. */

  /* .nd-btn-text-sm  <-  rounded-md gap-1 px-2 py-1.5 text-xs (buttonVariants size sm) */
  .nd-btn-text-sm {
    gap: var(--spacing);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  /* .nd-page-heading  <-  flex flex-wrap items-start justify-between gap-x-4 gap-y-3 */
  .nd-page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: calc(var(--spacing) * 4);
    row-gap: calc(var(--spacing) * 3);
  }
  .nd-page-heading > .nd-page-title {
    min-width: 0;
    flex: 1 1 16rem;
  }

  /* .nd-page-actions  <-  flex shrink-0 mt-1.5 (centers the 30 px trigger on the title's first line) */
  .nd-page-actions {
    display: flex;
    flex-shrink: 0;
    margin-top: calc(var(--spacing) * 1.5);
  }

  /* One bordered group, so both halves share one border and radius:
     .nd-page-actions-group  <-  inline-flex items-stretch overflow-hidden rounded-md border bg-fd-secondary text-fd-secondary-foreground */
  .nd-page-actions-group {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-secondary);
    color: var(--color-fd-secondary-foreground);
  }
  .nd-page-actions-group > .nd-btn {
    border-radius: 0;
  }
  @media (hover: hover) {
    .nd-page-actions-group > .nd-btn:hover {
      background-color: var(--color-fd-accent);
      color: var(--color-fd-accent-foreground);
    }
  }
  /* The group clips overflow, so the focus ring is drawn inside the half. */
  .nd-page-actions-group > .nd-btn:focus-visible {
    --tw-ring-inset: inset;
  }

  /* .nd-page-copy  <-  gap-1.5 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground */
  .nd-page-copy {
    gap: calc(var(--spacing) * 1.5);
  }
  .nd-page-copy svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-page-open  <-  px-1.5 border-s data-[popup-open]:bg-fd-accent data-[popup-open]:text-fd-accent-foreground */
  .nd-page-open {
    padding-inline: calc(var(--spacing) * 1.5);
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 1px;
  }
  .nd-page-open[data-popup-open] {
    background-color: var(--color-fd-accent);
    color: var(--color-fd-accent-foreground);
  }

  /* .nd-page-open-chevron  <-  size-3.5 text-fd-muted-foreground transition-[rotate] duration-150, rotate-180 while open */
  .nd-page-open-chevron {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
    color: var(--color-fd-muted-foreground);
    transition-property: rotate;
    transition-duration: .15s;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  }
  .nd-page-open[data-popup-open] .nd-page-open-chevron {
    rotate: 180deg;
  }

  /* Copied (2000 ms): the check replaces the copy icon, "Copied" replaces the label. */
  .nd-page-copy-done,
  .nd-page-copy-copied,
  [data-checked] .nd-page-copy-idle,
  [data-checked] .nd-page-copy-label {
    display: none;
  }
  [data-checked] .nd-page-copy-done {
    display: block;
  }
  [data-checked] .nd-page-copy-copied {
    display: inline;
  }

  /* .nd-page-actions-popup  <-  flex flex-col w-72 p-1.5 (the width is fixed, so popover.js measures it right away) */
  .nd-page-actions-popup {
    display: flex;
    width: calc(var(--spacing) * 72);
    flex-direction: column;
    padding: calc(var(--spacing) * 1.5);
  }
  /* Opaque, unlike the section switcher's nd-popover (bg-fd-popover/60 backdrop-blur-lg):
     bg-fd-popover backdrop-blur-none, border and shadow stay. */
  .nd-popover.nd-page-actions-popup {
    background-color: var(--color-fd-popover);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* .nd-page-actions-item  <-  flex w-full items-center gap-3 rounded-lg p-2 text-start hover:bg-fd-accent hover:text-fd-accent-foreground */
  .nd-page-actions-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 2);
    text-align: start;
  }
  @media (hover: hover) {
    .nd-page-actions-item:hover {
      background-color: var(--color-fd-accent);
      color: var(--color-fd-accent-foreground);
    }
  }
  .nd-page-actions-item:focus-visible {
    background-color: var(--color-fd-accent);
    color: var(--color-fd-accent-foreground);
    --tw-outline-style: none;
    outline-style: none;
  }

  /* .nd-page-actions-tile  <-  flex size-8 shrink-0 items-center justify-center rounded-md border bg-fd-background [&_svg]:size-4 */
  .nd-page-actions-tile {
    display: flex;
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-background);
    color: var(--color-fd-foreground);
  }
  .nd-page-actions-tile svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  /* .nd-page-actions-logo  <-  text-black dark:text-white (the marks are single-color, filled with currentColor) */
  .nd-page-actions-logo {
    color: #000;
  }
  .dark .nd-page-actions-logo {
    color: #fff;
  }

  /* .nd-page-actions-text  <-  flex min-w-0 flex-col */
  .nd-page-actions-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  /* .nd-page-actions-title  <-  inline-flex items-center gap-1 text-sm font-medium */
  .nd-page-actions-title {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  /* .nd-page-actions-external  <-  size-3 text-fd-muted-foreground */
  .nd-page-actions-external {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-page-actions-desc  <-  text-xs text-fd-muted-foreground */
  .nd-page-actions-desc {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-tabsdrop-popup  <-  flex flex-col gap-1 w-(--anchor-width) p-1 */
  .nd-tabsdrop-popup {
    display: flex;
    width: var(--anchor-width);
    flex-direction: column;
    gap: var(--spacing);
    padding: var(--spacing);
  }

  /* .nd-tabsdrop-option  <-  flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground */
  .nd-tabsdrop-option {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding: calc(var(--spacing) * 1.5);
  }
  @media (hover: hover) {
    .nd-tabsdrop-option:hover {
      background-color: var(--color-fd-accent);
      color: var(--color-fd-accent-foreground);
    }
  }

  /* .nd-tabsdrop-option-iconbox  <-  shrink-0 size-9 md:mb-auto md:size-5 empty:hidden */
  .nd-tabsdrop-option-iconbox {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
    flex-shrink: 0;
  }
  .nd-tabsdrop-option-iconbox:empty {
    display: none;
  }
  @media (min-width: 48rem) {
    .nd-tabsdrop-option-iconbox {
      margin-bottom: auto;
      width: calc(var(--spacing) * 5);
      height: calc(var(--spacing) * 5);
    }
  }

  /* .nd-tabsdrop-option-title  <-  text-sm font-medium leading-none */
  .nd-tabsdrop-option-title {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  /* .nd-tabsdrop-option-desc  <-  text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden */
  .nd-tabsdrop-option-desc {
    margin-top: var(--spacing);
    font-size: .8125rem;
    color: var(--color-fd-muted-foreground);
  }
  .nd-tabsdrop-option-desc:empty {
    display: none;
  }

  /* .nd-tabsdrop-check  <-  shrink-0 ms-auto size-3.5 text-fd-primary */
  .nd-tabsdrop-check {
    margin-inline-start: auto;
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
    flex-shrink: 0;
    color: var(--color-fd-primary);
  }


  /* ====================================================================
     Breadcrumbs
     ==================================================================== */

  /* .nd-crumb  <-  flex gap-1.5 items-center text-fd-muted-foreground text-sm */
  .nd-crumb {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-crumb-item  <-  truncate */
  .nd-crumb-item {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  /* .nd-crumb-current  <-  font-medium text-fd-primary */
  .nd-crumb-current {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-fd-primary);
  }

  /* .nd-crumb-link  <-  transition-opacity hover:opacity-80 */
  .nd-crumb-link {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-crumb-link:hover {
      opacity: .8;
    }
  }

  /* .nd-crumb-sep  <-  size-3.5 shrink-0 */
  .nd-crumb-sep {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
    flex-shrink: 0;
  }

  /* ====================================================================
     Footer navigation
     ==================================================================== */

  /* .nd-pager  <-  @container gap-4 grid grid-cols-2 */
  .nd-pager {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
  }

  /* .nd-pager-single  <-  grid-cols-1 */
  .nd-pager-single {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  /* .nd-pager-item  <-  flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground @max-lg:col-span-full */
  .nd-pager-item {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    padding: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-pager-item:hover {
      background-color: #d1d1d166;
    }
  }
  @media (hover: hover) {
    @supports (color: color-mix(in lab, red, red)) {
      .nd-pager-item:hover {
        background-color: color-mix(in oklab, var(--color-fd-accent) 80%, transparent);
      }
    }
  }
  @media (hover: hover) {
    .nd-pager-item:hover {
      color: var(--color-fd-accent-foreground);
    }
  }
  @container not (min-width: 32rem) {
    .nd-pager-item {
      grid-column: 1 / -1;
    }
  }

  /* .nd-pager-item-next  <-  text-end */
  .nd-pager-item-next {
    text-align: end;
  }

  /* .nd-pager-head  <-  inline-flex items-center gap-1.5 font-medium */
  .nd-pager-head {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  /* .nd-pager-head-next  <-  flex-row-reverse */
  .nd-pager-head-next {
    flex-direction: row-reverse;
  }

  /* .nd-pager-icon  <-  -mx-1 size-4 shrink-0 rtl:rotate-180 */
  .nd-pager-icon {
    margin-inline: calc(var(--spacing) * -1);
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
  }
  .nd-pager-icon:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) {
    rotate: 180deg;
  }

  /* .nd-pager-desc  <-  text-fd-muted-foreground truncate */
  .nd-pager-desc {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: var(--color-fd-muted-foreground);
  }

  /* ====================================================================
     Table of contents: entries and lines
     ==================================================================== */

  /* The entry takes the five declarations of `.prose` directly instead of the
   * class: in prose.css the typography rules live in the `utilities` layer and
   * would beat `text-sm` and `text-fd-muted-foreground` of the component layer.
   * The descendant rules of `.prose` aren't needed: the entry contains only text
   * and the line graphic. */
  .nd-toc-item {
    --tw-prose-size: 1;
    color: var(--tw-prose-body);
    max-width: none;
    font-size: calc(1rem * var(--tw-prose-size));
    line-height: calc(1.75rem * var(--tw-prose-size));
  }

  /* .nd-toc-item  <-  relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere data-[active=true]:text-fd-primary */
  .nd-toc-item {
    position: relative;
    scroll-margin: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    overflow-wrap: anywhere;
    color: var(--color-fd-muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-toc-item:hover {
      color: var(--color-fd-accent-foreground);
    }
  }
  .nd-toc-item[data-active="true"] {
    color: var(--color-fd-primary);
  }

  /* The first and last entries lose their outer padding (`pt-0`, `pb-0`). The
   * element type decides: js/toc.js puts the thumb
   * track as the first child (`div`) in front of the entries (`a`), hence
   * `:first-of-type`/`:last-of-type` instead of `:first-child`/`:last-child` –
   * otherwise the first entry would keep its 6 px at the top after insertion. */
  .nd-toc-item:first-of-type {
    padding-top: 0;
  }

  .nd-toc-item:last-of-type {
    padding-bottom: 0;
  }

  /* .nd-toc-line  <-  -top-1.5 -z-1 absolute bottom-0 h-[calc(100%+--spacing(1.5))] inset-s-0 rtl:-scale-x-100 */
  .nd-toc-line {
    position: absolute;
    inset-inline-start: 0;
    top: calc(var(--spacing) * -1.5);
    bottom: 0;
    z-index: calc(1 * -1);
    height: calc(100% + calc(var(--spacing) * 1.5));
  }
  .nd-toc-line:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  /* .nd-toc-line-turn  <-  bottom-1.5 h-full */
  .nd-toc-line-turn {
    bottom: calc(var(--spacing) * 1.5);
    height: 100%;
  }

  /* .nd-toc-line-stroke  <-  stroke-fd-foreground/10 */
  .nd-toc-line-stroke {
    stroke: #0a0a0a1a;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-toc-line-stroke {
      stroke: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
    }
  }

  /* Thumb track of the table of contents (`ThumbTrack`). js/toc.js measures path,
     width, height and `--track-top/-bottom` and writes them inline. */

  /* .nd-toc-thumb  <-  absolute top-0 inset-s-0 origin-center rtl:-scale-x-100 */
  .nd-toc-thumb {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    transform-origin: center;
  }
  .nd-toc-thumb:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *) {
    --tw-scale-x: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  /* .nd-toc-thumb-svg  <-  absolute transition-[clip-path] */
  .nd-toc-thumb-svg {
    position: absolute;
    transition-property: clip-path;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* .nd-toc-thumb-path  <-  stroke-fd-primary */
  .nd-toc-thumb-path {
    stroke: var(--color-fd-primary);
  }


  /* ====================================================================
     Table of contents: popover trigger
     ==================================================================== */

  /* .nd-tocpop-trigger  <-  [&_svg]:size-4 flex focus-visible:outline-none gap-2.5 h-10 items-center md:px-6 px-4 py-2.5 text-fd-muted-foreground text-sm text-start w-full */
  .nd-tocpop-trigger {
    display: flex;
    height: calc(var(--spacing) * 10);
    width: 100%;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: start;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
  }
  .nd-tocpop-trigger:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  @media (min-width: 48rem) {
    .nd-tocpop-trigger {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .nd-tocpop-trigger svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  /* .nd-tocpop-progress  <-  shrink-0 */
  .nd-tocpop-progress {
    flex-shrink: 0;
  }

  /* .nd-tocpop-ring  <-  stroke-current/25 */
  .nd-tocpop-ring {
    stroke: currentColor;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-tocpop-ring {
      stroke: color-mix(in oklab, currentcolor 25%, transparent);
    }
  }

  /* .nd-tocpop-bar  <-  transition-all */
  .nd-tocpop-bar {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* .nd-tocpop-labels  <-  *:col-start-1 *:my-auto *:row-start-1 flex-1 grid */
  .nd-tocpop-labels {
    display: grid;
    flex: 1;
  }
  :is(.nd-tocpop-labels > *) {
    grid-column-start: 1;
    grid-row-start: 1;
    margin-block: auto;
  }

  /* Page title and active heading lie on top of each other. js/toc-popover.js
     decides which one is visible through a class, as there is no attribute
     for it. Initial state: page title with `nd-tocpop-label-up`. */
  /* .nd-tocpop-label-page  <-  transition-[opacity,translate,color] truncate */
  .nd-tocpop-label-page {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition-property: opacity, translate, color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* .nd-tocpop-label-up  <-  -translate-y-full opacity-0 pointer-events-none */
  .nd-tocpop-label-up {
    pointer-events: none;
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 0;
  }

  /* .nd-tocpop-label-down  <-  translate-y-full opacity-0 pointer-events-none */
  .nd-tocpop-label-down {
    pointer-events: none;
    --tw-translate-y: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
    opacity: 0;
  }

  /* .nd-tocpop-label-active  <-  transition-[opacity,translate] truncate */
  .nd-tocpop-label-active {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition-property: opacity, translate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* .nd-tocpop-chevron  <-  mx-0.5 shrink-0 transition-transform */
  .nd-tocpop-chevron {
    margin-inline: calc(var(--spacing) * .5);
    flex-shrink: 0;
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* Open state of the collapsible bar (`shadow-lg`, `text-fd-primary`,
     `rotate-180`, `text-fd-foreground`): the rule reads `data-open` on the root, which js/collapsible.js
     sets like Base UI. */
  /* [data-toc-popover][data-open] .nd-tocpop-header  <-  shadow-lg */
  [data-toc-popover][data-open] .nd-tocpop-header {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  /* [data-toc-popover][data-open] .nd-tocpop-progress  <-  text-fd-primary */
  [data-toc-popover][data-open] .nd-tocpop-progress {
    color: var(--color-fd-primary);
  }

  /* [data-toc-popover][data-open] .nd-tocpop-chevron  <-  rotate-180 */
  [data-toc-popover][data-open] .nd-tocpop-chevron {
    rotate: 180deg;
  }

  /* [data-toc-popover][data-open] .nd-tocpop-label-page  <-  text-fd-foreground */
  [data-toc-popover][data-open] .nd-tocpop-label-page {
    color: var(--color-fd-foreground);
  }


  /* ====================================================================
     Headings in the article
     ==================================================================== */

  /* .nd-heading  <-  flex flex-row gap-1 items-center scroll-m-28 */
  .nd-heading {
    display: flex;
    scroll-margin: calc(var(--spacing) * 28);
    flex-direction: row;
    align-items: center;
    gap: var(--spacing);
  }

  /* .nd-heading-copy  <-  group-hover/heading:opacity-100 opacity-0 shrink-0 text-fd-muted-foreground transition-opacity */
  .nd-heading-copy {
    flex-shrink: 0;
    color: var(--color-fd-muted-foreground);
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-heading-copy:is(:where(.nd-heading):hover *) {
      opacity: 1;
    }
  }

  /* ====================================================================
     Callout
     ==================================================================== */

  /* .nd-callout  <-  bg-fd-card border flex gap-2 my-4 p-3 ps-1 rounded-xl shadow-md text-fd-card-foreground text-sm */
  .nd-callout {
    margin-block: calc(var(--spacing) * 4);
    display: flex;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-card);
    padding: calc(var(--spacing) * 3);
    padding-inline-start: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-card-foreground);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  /* .nd-callout-stripe  <-  bg-(--callout-color)/50 rounded-sm w-0.5 */
  .nd-callout-stripe {
    width: calc(var(--spacing) * .5);
    border-radius: var(--radius-sm);
    background-color: var(--callout-color);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-callout-stripe {
      background-color: color-mix(in oklab, var(--callout-color) 50%, transparent);
    }
  }

  /* .nd-callout-icon  <-  -me-0.5 fill-(--callout-color) size-5 text-fd-card */
  .nd-callout-icon {
    margin-inline-end: calc(var(--spacing) * -.5);
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
    fill: var(--callout-color);
    color: var(--color-fd-card);
  }

  /* .nd-callout-body  <-  flex flex-1 flex-col gap-2 min-w-0 */
  .nd-callout-body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: calc(var(--spacing) * 2);
  }

  /* .nd-callout-icon-idea  <-  text-(--callout-color) */
  .nd-callout-icon-idea {
    color: var(--callout-color);
  }

  /* .nd-callout-title  <-  font-medium my-0! */
  .nd-callout-title {
    margin-block: 0 !important;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  /* .nd-callout-desc  <-  empty:hidden text-fd-muted-foreground */
  .nd-callout-desc {
    color: var(--color-fd-muted-foreground);
  }
  .nd-callout-desc:empty {
    display: none;
  }

  /* ====================================================================
     Cards
     ==================================================================== */

  /* .nd-cards  <-  @container gap-3 grid grid-cols-2 */
  .nd-cards {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 3);
  }

  /* .nd-card  <-  @max-lg:col-span-full bg-fd-card block border hover:bg-fd-accent/80 p-4 rounded-xl text-fd-card-foreground transition-colors */
  .nd-card {
    display: block;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-card);
    padding: calc(var(--spacing) * 4);
    color: var(--color-fd-card-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-card:hover {
      background-color: #d1d1d166;
    }
  }
  @media (hover: hover) {
    @supports (color: color-mix(in lab, red, red)) {
      .nd-card:hover {
        background-color: color-mix(in oklab, var(--color-fd-accent) 80%, transparent);
      }
    }
  }
  @container not (min-width: 32rem) {
    .nd-card {
      grid-column: 1 / -1;
    }
  }

  /* .nd-card-icon  <-  mb-2 w-fit shadow-md rounded-lg border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4 */
  .nd-card-icon {
    margin-bottom: calc(var(--spacing) * 2);
    width: fit-content;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-muted);
    padding: calc(var(--spacing) * 1.5);
    color: var(--color-fd-muted-foreground);
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .nd-card-icon svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  /* .nd-card-title  <-  font-medium mb-1 text-sm */
  .nd-card-title {
    margin-bottom: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  /* .nd-card-desc  <-  my-0! text-fd-muted-foreground text-sm */
  .nd-card-desc {
    margin-block: 0 !important;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-card-body  <-  empty:hidden text-fd-muted-foreground text-sm */
  .nd-card-body {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
  }
  .nd-card-body:empty {
    display: none;
  }

  /* ====================================================================
     Images and tables
     ==================================================================== */

  /* .nd-figure  <-  bg-fd-card border border-fd-border my-6 overflow-hidden rounded-xl shadow-sm */
  .nd-figure {
    margin-block: calc(var(--spacing) * 6);
    overflow: hidden;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-fd-border);
    background-color: var(--color-fd-card);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  /* .nd-figure-light  <-  block w-full */
  .nd-figure-light {
    display: block;
    width: 100%;
  }

  /* .nd-figure-twin  <-  dark:hidden */
  .nd-figure-twin:where(.dark, .dark *) {
    display: none;
  }

  /* .nd-figure-dark  <-  hidden w-full dark:block */
  .nd-figure-dark {
    display: none;
    width: 100%;
  }
  .nd-figure-dark:where(.dark, .dark *) {
    display: block;
  }

  /* .nd-image  <-  bg-fd-card border border-fd-border my-6 rounded-xl shadow-sm w-full */
  .nd-image {
    margin-block: calc(var(--spacing) * 6);
    width: 100%;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-fd-border);
    background-color: var(--color-fd-card);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  /* .nd-table  <-  my-6 overflow-auto relative */
  .nd-table {
    position: relative;
    margin-block: calc(var(--spacing) * 6);
    overflow: auto;
  }

  /* ====================================================================
     Start page: hero
     ==================================================================== */

  /* .nd-hero  <-  border-b border-fd-border overflow-hidden relative */
  .nd-hero {
    position: relative;
    overflow: hidden;
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: var(--color-fd-border);
  }

  /* .nd-hero-img  <-  absolute inset-0 -z-10 h-full w-full object-cover object-[60%_35%] */
  .nd-hero-img {
    position: absolute;
    inset: 0;
    z-index: calc(10 * -1);
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 60% 35%;
  }

  /* .nd-hero-img-light  <-  dark:hidden */
  .nd-hero-img-light:where(.dark, .dark *) {
    display: none;
  }

  /* .nd-hero-img-dark  <-  hidden dark:block */
  .nd-hero-img-dark {
    display: none;
  }
  .nd-hero-img-dark:where(.dark, .dark *) {
    display: block;
  }

  /* .nd-hero-wash  <-  -z-10 absolute bg-fd-background/80 inset-0 */
  .nd-hero-wash {
    position: absolute;
    inset: 0;
    z-index: calc(10 * -1);
    background-color: #f5f5f5cc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-hero-wash {
      background-color: color-mix(in oklab, var(--color-fd-background) 80%, transparent);
    }
  }

  /* .nd-hero-fade  <-  -z-10 absolute bottom-0 h-28 inset-x-0 */
  .nd-hero-fade {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: calc(10 * -1);
    height: calc(var(--spacing) * 28);
  }

  /* .nd-hero-inner  <-  flex flex-col gap-6 lg:max-w-7xl max-w-6xl md:py-32 mx-auto px-6 py-24 w-full */
  .nd-hero-inner {
    margin-inline: auto;
    display: flex;
    width: 100%;
    max-width: var(--container-6xl);
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 24);
  }
  @media (min-width: 48rem) {
    .nd-hero-inner {
      padding-block: calc(var(--spacing) * 32);
    }
  }
  @media (min-width: 64rem) {
    .nd-hero-inner {
      max-width: var(--container-7xl);
    }
  }

  /* .nd-hero-kicker  <-  flex gap-3 items-center */
  .nd-hero-kicker {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
  }

  /* .nd-hero-icon  <-  rounded-xl shadow-sm size-12 */
  .nd-hero-icon {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
    border-radius: var(--radius-xl);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  /* .nd-hero-title  <-  font-bold max-w-3xl md:text-6xl text-4xl tracking-tight */
  .nd-hero-title {
    max-width: var(--container-3xl);
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  @media (min-width: 48rem) {
    .nd-hero-title {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
  }

  /* .nd-hero-lead  <-  max-w-xl md:text-xl text-fd-muted-foreground text-lg */
  .nd-hero-lead {
    max-width: var(--container-xl);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-fd-muted-foreground);
  }
  @media (min-width: 48rem) {
    .nd-hero-lead {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }

  /* .nd-hero-actions  <-  flex flex-wrap gap-3 mt-2 */
  .nd-hero-actions {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 3);
  }

  /* .nd-hero-btn  <-  inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors */
  .nd-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* .nd-hero-btn-primary  <-  bg-fd-primary text-fd-primary-foreground shadow-sm hover:bg-fd-primary/90 */
  .nd-hero-btn-primary {
    background-color: var(--color-fd-primary);
    color: var(--color-fd-primary-foreground);
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  @media (hover: hover) {
    .nd-hero-btn-primary:hover {
      background-color: #171717e6;
    }
  }
  @media (hover: hover) {
    @supports (color: color-mix(in lab, red, red)) {
      .nd-hero-btn-primary:hover {
        background-color: color-mix(in oklab, var(--color-fd-primary) 90%, transparent);
      }
    }
  }

  /* .nd-hero-btn-secondary  <-  border border-fd-border bg-fd-background/70 backdrop-blur hover:bg-fd-accent */
  .nd-hero-btn-secondary {
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-fd-border);
    background-color: #f5f5f5b3;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-hero-btn-secondary {
      background-color: color-mix(in oklab, var(--color-fd-background) 70%, transparent);
    }
  }
  .nd-hero-btn-secondary {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }
  @media (hover: hover) {
    .nd-hero-btn-secondary:hover {
      background-color: var(--color-fd-accent);
    }
  }

  /* The secondary hero button sits over image and gradient with a 70 % opaque
     background and `backdrop-blur`. Chromium rasterises such an element
     differently once a transition of its background colour has run, and
     theme-init.js sets the theme before the first paint, so none runs on
     load. `@starting-style` runs the same transition (`transition-colors`,
     150 ms) once on the first style resolution; the final value stays the
     same. */
  @starting-style {
    .nd-hero-btn-secondary {
      background-color: transparent;
    }
  }

  /* .nd-hero-btn-icon  <-  size-4 */
  .nd-hero-btn-icon {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  /* ====================================================================
     Start page: section cards
     ==================================================================== */

  /* .nd-home-kicker  <-  font-medium text-fd-muted-foreground text-sm tracking-[0.2em] uppercase */
  .nd-home-kicker {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    --tw-tracking: .2em;
    letter-spacing: .2em;
    color: var(--color-fd-muted-foreground);
    text-transform: uppercase;
  }

  /* .nd-home-grid  <-  gap-4 grid grid-cols-1 lg:grid-cols-4 mt-6 sm:grid-cols-2 */
  .nd-home-grid {
    margin-top: calc(var(--spacing) * 6);
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing) * 4);
  }
  @media (min-width: 40rem) {
    .nd-home-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 64rem) {
    .nd-home-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* .nd-home-card  <-  bg-fd-card border border-fd-border flex flex-col gap-3 hover:bg-fd-accent p-5 rounded-xl transition-colors */
  .nd-home-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-fd-border);
    background-color: var(--color-fd-card);
    padding: calc(var(--spacing) * 5);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-home-card:hover {
      background-color: var(--color-fd-accent);
    }
  }

  /* .nd-home-card-icon  <-  size-6 text-fd-primary */
  .nd-home-card-icon {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    color: var(--color-fd-primary);
  }

  /* .nd-home-card-text  <-  text-fd-muted-foreground text-sm */
  .nd-home-card-text {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-home-card-more  <-  font-medium gap-1 inline-flex items-center mt-auto text-fd-primary text-sm */
  .nd-home-card-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-fd-primary);
  }

  /* .nd-home-card-arrow  <-  group-hover:translate-x-0.5 size-4 transition-transform */
  .nd-home-card-arrow {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-home-card-arrow:is(:where(.nd-home-card):hover *) {
      --tw-translate-x: calc(var(--spacing) * .5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
}

/* Two rules hang on attribute and element names instead of utilities and
 * sit at the end of the `utilities` layer. They must beat the component layer – which is why
 * the full search field is opaque and not `bg-fd-secondary/50`.
 *
 * On hover the accent background must still win. The hover colour of
 * `.nd-search` lives in `components` and would lose against this rule through
 * the layer; the background would stay and its transition would never run.
 * That is why the hover colour appears here once more, in `utilities`, where
 * `.nd-search:hover` (0,2,0) is more specific than `button[data-search-full]`
 * (0,1,1). */
@layer utilities {
  button[data-search-full] {
    background-color: var(--color-fd-background);
  }

  @media (hover: hover) {
    .nd-search:hover {
      background-color: var(--color-fd-accent);
    }
  }

  figure.shiki {
    background-color: var(--color-fd-card);
  }
}

/* Unlayered; needed by the component catalogue. */
.fd-page-tree-item-name {
  align-items: center;
  gap: var(--spacing);
  width: 100%;
  display: inline-flex;
}

/* ---- prose.css ---- */
/* prose.css — typography of the article body, steps utilities and Shiki rules
 *
 * The .prose rules are Tailwind typography plugin output and live in
 * @layer utilities, so rules that must lose against them go into
 * @layer components (layout.css, components.css).
 *
 * Contents, in order:
 *   .fd-step:before, .fd-steps (with @media 40rem)
 *   .prose … .prose-no-margin
 *   .fd-scroll-container::-webkit-scrollbar*
 *   .shiki rules (unlayered)
 *
 * Trap when editing: check the braces of the @media 40rem block. With one missing
 * the file stays valid, but every .prose rule slides into the media query and is
 * out of effect below 40rem.
 */

@layer utilities {
  .fd-step:before {
    background-color: var(--color-fd-secondary);
    color: var(--color-fd-secondary-foreground);
    content: counter(step);
    counter-increment: step;
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    border-radius: 3.40282e38px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    line-height: 1.25rem;
    display: flex;
    position: absolute;
    inset-inline-start: calc(var(--spacing) * -4);
  }

  .fd-steps {
    counter-reset: step;
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 1px;
    margin-inline-start: calc(var(--spacing) * 2);
    padding-inline-start: calc(var(--spacing) * 6);
    position: relative;
  }

  @media (min-width: 40rem) {
    .fd-steps {
      margin-inline-start: calc(var(--spacing) * 4);
    }

    .fd-steps {
      padding-inline-start: calc(var(--spacing) * 7);
    }
  }

  .prose {
    --tw-prose-size: 1;
    color: var(--tw-prose-body);
    max-width: none;
    font-size: calc(1rem * var(--tw-prose-size));
    line-height: calc(1.75rem * var(--tw-prose-size));
  }

  .prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-lead);
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    font-size: 1.25em;
    line-height: 1.6;
  }

  .prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: calc(1rem * var(--tw-prose-size));
    list-style-type: disc;
  }

  .prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .5em;
    margin-bottom: .5em;
  }

  .prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: .375em;
  }

  .prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-inline-start: 0;
  }

  .prose :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .75em;
    margin-bottom: .75em;
  }

  .prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
  }

  .prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 1.25em;
  }

  .prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
  }

  .prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 1.25em;
  }

  .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .75em;
    margin-bottom: .75em;
  }

  .prose :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .prose :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    margin-top: 1.25em;
    font-weight: 600;
  }

  .prose :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: .5em;
    padding-inline-start: 1.625em;
  }

  .prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-color: var(--tw-prose-hr);
    border-top-width: 1px;
    margin-top: 3em;
    margin-bottom: 3em;
  }

  .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .prose :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-bold);
    font-weight: 500;
  }

  .prose :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
  }

  .prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
    list-style-type: decimal;
  }

  .prose :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-alpha;
  }

  .prose :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-alpha;
  }

  .prose :where(ol[type="A" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-alpha;
  }

  .prose :where(ol[type="a" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-alpha;
  }

  .prose :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-roman;
  }

  .prose :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-roman;
  }

  .prose :where(ol[type="I" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: upper-roman;
  }

  .prose :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: lower-roman;
  }

  .prose :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    list-style-type: decimal;
  }

  .prose :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
    color: var(--tw-prose-counters);
    font-weight: 400;
  }

  .prose :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker {
    color: var(--tw-prose-bullets);
  }

  .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-quotes);
    border-inline-start-width: .25rem;
    border-inline-start-color: var(--tw-prose-quote-borders);
    quotes: "“""”""‘""’";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-inline-start: 1em;
    font-style: italic;
    font-weight: 500;
  }

  .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):before {
    content: open-quote;
  }

  .prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):after {
    content: close-quote;
  }

  .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 800;
    font-size: calc(var(--text-3xl) * var(--tw-prose-size));
    margin-top: 0;
    margin-bottom: .888889em;
    line-height: 1.11111;
  }

  .prose :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-weight: 900;
  }

  .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.33333;
  }

  .prose :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-weight: 800;
  }

  .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    margin-top: 1.6em;
    margin-bottom: .6em;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.6;
  }

  .prose :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-weight: 700;
  }

  .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    margin-top: 1.5em;
    margin-bottom: .5em;
    font-weight: 600;
    line-height: 1.5;
  }

  .prose :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-weight: 700;
  }

  .prose :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
  }

  .prose :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .prose :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
    display: block;
  }

  .prose :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .prose :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .prose :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding-top: .1875em;
    padding-inline-end: .375em;
    padding-bottom: .1875em;
    color: var(--tw-prose-kbd);
    box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows);
    border-radius: .3125rem;
    padding-inline-start: .375em;
    font-family: inherit;
    font-size: .875em;
    font-weight: 500;
  }

  .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    padding: calc(3px * var(--tw-prose-size));
    font-size: calc(13px * var(--tw-prose-size));
    border: 1px solid;
    border-color: var(--color-fd-border);
    background: var(--color-fd-muted);
    color: var(--tw-prose-code);
    border-radius: 5px;
    font-weight: 400;
  }

  .prose :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
  }

  .prose :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-size: calc(var(--text-2xl) * var(--tw-prose-size));
  }

  .prose :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-size: .875em;
  }

  .prose :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
    font-size: .9em;
  }

  .prose :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)), .prose :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: inherit;
  }

  .prose :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 600;
  }

  .prose :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .prose :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .prose :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-captions);
    margin-top: .857143em;
    font-size: .875em;
    line-height: 1.42857;
  }

  .prose :where(a:not([data-card])):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    color: var(--tw-prose-links);
    text-underline-offset: 3.5px;
    text-decoration: underline;
    -webkit-text-decoration-color: var(--color-fd-primary);
    text-decoration-color: var(--color-fd-primary);
    font-weight: 500;
    text-decoration-thickness: 1.5px;
    transition: opacity .2s;
  }

  .prose :where(a:not([data-card]):hover):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    opacity: .8;
  }

  .prose {
    --tw-prose-body: #0a0a0ae6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .prose {
      --tw-prose-body: color-mix(in oklab, var(--color-fd-foreground) 90%, transparent);
    }
  }

  .prose {
    --tw-prose-headings: var(--color-fd-foreground);
    --tw-prose-lead: var(--color-fd-foreground);
    --tw-prose-links: var(--color-fd-foreground);
    --tw-prose-bold: var(--color-fd-foreground);
    --tw-prose-counters: var(--color-fd-muted-foreground);
    --tw-prose-bullets: var(--color-fd-muted-foreground);
    --tw-prose-hr: var(--color-fd-border);
    --tw-prose-quotes: var(--color-fd-foreground);
    --tw-prose-quote-borders: var(--color-fd-border);
    --tw-prose-captions: var(--color-fd-foreground);
    --tw-prose-code: var(--color-fd-foreground);
    --tw-prose-th-borders: var(--color-fd-border);
    --tw-prose-td-borders: var(--color-fd-border);
    --tw-prose-kbd: var(--color-fd-foreground);
    --tw-prose-kbd-shadows: #17171780;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .prose {
      --tw-prose-kbd-shadows: color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
    }
  }

  .prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
  }

  .prose :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-bottom: 0;
  }

  .prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-fd-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-fd-border);
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: .875em;
    line-height: 1.71429;
    overflow: hidden;
  }

  .prose :where(th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    text-align: start;
    padding: calc(var(--spacing) * 2.5 * var(--tw-prose-size));
    border-inline-start: 1px solid var(--color-fd-border);
    background: var(--color-fd-muted);
  }

  .prose :where(th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-inline-start: none;
  }

  .prose :where(th:not(tr:last-child *), td:not(tr:last-child *)):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-bottom: 1px solid var(--color-fd-border);
  }

  .prose :where(td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    text-align: start;
    border-inline-start: 1px solid var(--color-fd-border);
    padding: calc(var(--spacing) * 2.5 * var(--tw-prose-size));
  }

  .prose :where(td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-inline-start: none;
  }

  .prose :where(tfoot th, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-top-width: 1px;
    border-top-color: var(--tw-prose-th-borders);
  }

  .prose :where(thead th, thead td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-th-borders);
  }

  .prose-no-margin > :first-child {
    margin-top: 0;
  }

  .prose-no-margin > :last-child {
    margin-bottom: 0;
  }

  .fd-scroll-container::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .fd-scroll-container::-webkit-scrollbar-thumb {
    background: var(--color-fd-border);
    border-radius: 5px;
  }

  .fd-scroll-container::-webkit-scrollbar-track {
    background: none;
  }

  .fd-scroll-container::-webkit-scrollbar-corner {
    display: none;
  }
}

/* --- Code blocks: .shiki (unlayered) --- */

.shiki:not(.not-pholio-codeblock *) {
  --padding-left: calc(var(--spacing) * 4);
  --padding-right: calc(var(--spacing) * 4);
}

.shiki:not(.not-pholio-codeblock *) code span {
  color: var(--shiki-light);
  font-style: var(--shiki-light-font-style);
}

.shiki:not(.not-pholio-codeblock *) .line {
  padding-left: var(--padding-left);
  padding-right: var(--padding-right);
  position: relative;
}

.shiki:not(.not-pholio-codeblock *) .line:empty {
  height: 1lh;
}

.shiki:not(.not-pholio-codeblock *).has-focused .line:not(.focused) {
  filter: blur(2px);
  transition: filter .2s;
}

.shiki:not(.not-pholio-codeblock *).has-focused:hover .line:not(.focused) {
  filter: blur();
}

.shiki:not(.not-pholio-codeblock *) .diff:before {
  left: calc(var(--spacing) * 1.5);
  position: absolute;
}

.shiki:not(.not-pholio-codeblock *) .diff.remove {
  opacity: .7;
  --fd-counter-color: var(--color-fd-diff-remove-symbol);
  background-color: var(--color-fd-diff-remove);
}

.shiki:not(.not-pholio-codeblock *) .diff.remove:before {
  content: "-";
  color: var(--color-fd-diff-remove-symbol);
}

.shiki:not(.not-pholio-codeblock *) .diff.add {
  --fd-counter-color: var(--color-fd-diff-add-symbol);
  background-color: var(--color-fd-diff-add);
}

.shiki:not(.not-pholio-codeblock *) .diff.add:before {
  content: "+";
  color: var(--color-fd-diff-add-symbol);
}

.shiki:not(.not-pholio-codeblock *) .highlighted {
  --fd-counter-color: var(--color-fd-primary);
  background-color: #1717171a;
}

@supports (color: color-mix(in lab, red, red)) {
  .shiki:not(.not-pholio-codeblock *) .highlighted {
    background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
  }
}

.shiki:not(.not-pholio-codeblock *) .highlighted:after {
  content: "";
  inset-block: 0;
  border-left-style: var(--tw-border-style);
  border-color: #17171780;
  border-left-width: 2px;
  position: absolute;
  left: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .shiki:not(.not-pholio-codeblock *) .highlighted:after {
    border-color: color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
  }
}

.shiki:not(.not-pholio-codeblock *) .highlighted-word {
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: #1717174d;
  margin-block: -1px;
  padding: 1px;
}

@supports (color: color-mix(in lab, red, red)) {
  .shiki:not(.not-pholio-codeblock *) .highlighted-word {
    border-color: color-mix(in oklab, var(--color-fd-primary) 30%, transparent);
  }
}

.shiki:not(.not-pholio-codeblock *) .highlighted-word {
  background-color: #1717171a;
}

@supports (color: color-mix(in lab, red, red)) {
  .shiki:not(.not-pholio-codeblock *) .highlighted-word {
    background-color: color-mix(in oklab, var(--color-fd-primary) 10%, transparent);
  }
}

.shiki:not(.not-pholio-codeblock *) .highlighted-word {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.shiki:not(.not-pholio-codeblock *)[data-line-numbers] .twoslash-meta-line {
  padding-left: calc(var(--padding-left) + 7 * var(--spacing));
}

.shiki:not(.not-pholio-codeblock *)[data-line-numbers] .line {
  counter-increment: line;
  padding-left: calc(var(--padding-left) + 7 * var(--spacing));
}

.shiki:not(.not-pholio-codeblock *)[data-line-numbers] .line:after {
  content: counter(line);
  color: var(--fd-counter-color, #737373);
  position: absolute;
}

@supports (color: color-mix(in lab, red, red)) {
  .shiki:not(.not-pholio-codeblock *)[data-line-numbers] .line:after {
    color: color-mix(in oklab, var(--fd-counter-color, var(--color-fd-muted-foreground)) 60%, transparent);
  }
}

.shiki:not(.not-pholio-codeblock *)[data-line-numbers] .line:after {
  inset-block: 0;
  width: calc(var(--spacing) * 7);
  text-align: right;
  left: 0;
}

.dark .shiki:not(.not-pholio-codeblock *) code span {
  color: var(--shiki-dark);
  font-style: var(--shiki-dark-font-style);
}

code.shiki:not(.not-pholio-code *) span {
  color: var(--shiki-light);
  font-style: var(--shiki-light-font-style);
}

.dark code.shiki:not(.not-pholio-code *) span {
  color: var(--shiki-dark);
  font-style: var(--shiki-dark-font-style);
}

/* ---- utilities.css ---- */
/* utilities.css — the few helpers that stay in the markup as classes, because
 * JavaScript switches them on and off at runtime.
 *
 * Everything that describes a state the DOM already knows lives in layout.css or
 * components.css instead, on the `data-*` or `aria-*` attribute the element
 * already carries. What remains are the two visibility switches that
 * have no attribute: Base UI hides a portal element with `invisible` after the
 * exit animation and hides the empty result list of the search dialog with
 * `hidden`.
 *
 * `.not-prose`, `.prose-no-margin` and `.fd-scroll-container` keep their
 * names and live in prose.css; they aren't utilities of this theme but hooks the
 * typography rules themselves point at.
 *
 * Layer `utilities`: these helpers must beat the component rules, otherwise they
 * couldn't hide anything.
 *
 * Two more rules aren't helpers but need the same layer and the same place in the
 * cascade: the width of the article children. The first child of the article is
 * `div.nd-prose.prose`, and prose.css sets `max-width: none` there, also in the
 * `utilities` layer. `*:max-w-[900px]` has to come later in that layer to win.
 * Only this file is included after
 * prose.css, which is why the two rules live here and not in layout.css.
 */

@layer utilities {
  .nd-hidden {
    display: none;
  }

  .nd-invisible {
    visibility: hidden;
  }

  :is(.nd-page > *) {
    max-width: 900px;
  }

  :is(.nd-page-full > *) {
    max-width: 1285px;
  }
}

/* ---- catalogue.css ---- */
/* catalogue.css — content components of the catalogue:
 * tabs, code tabs, accordion, file tree, type table, banner, inline table of
 * contents, code block shell and image zoom.
 *
 * Layer and how to read the comments as in layout.css and components.css: every
 * nd- class names the Tailwind utilities its declarations are written from, in
 * Tailwind's output order.
 *
 * Not here, because they already exist: `.fd-steps`/`.fd-step` (prose.css), card and
 * callout icons (components.css), `.shiki` line rules (prose.css).
 * Deliberately without a rule: `sr-only`,
 * `footnotes`, `data-footnote-backref`, `contains-task-list`, `task-list-item`.
 *
 * Included after utilities.css; the rules live in `@layer components`, except
 * `[&>figure:only-child]:-m-4` (in `@layer utilities`, so it wins against prose.css).
 * The image zoom rules are unlayered.
 */

@layer components {

  /* ====================================================================
     Tabs (tabs.js); nd-tabbox, because nd-tabs are the section tabs of the header (layout.css)
     ==================================================================== */

  /* .nd-tabbox  <-  bg-fd-secondary border flex flex-col my-4 overflow-hidden rounded-xl */
  .nd-tabbox {
    margin-block: calc(var(--spacing) * 4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-secondary);
  }

  /* .nd-tabbox-list  <-  flex gap-3.5 overflow-x-auto px-4 text-fd-secondary-foreground (not-prose stays) */
  .nd-tabbox-list {
    display: flex;
    gap: calc(var(--spacing) * 3.5);
    overflow-x: auto;
    padding-inline: calc(var(--spacing) * 4);
    color: var(--color-fd-secondary-foreground);
  }

  /* .nd-tabbox-label  <-  font-medium me-auto my-auto text-sm */
  .nd-tabbox-label {
    margin-block: auto;
    margin-inline-end: auto;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  /* .nd-tabbox-trigger  <-  [&_svg]:size-4 border-b border-transparent data-[active]:border-fd-primary data-[active]:text-fd-primary disabled:opacity-50 disabled:pointer-events-none font-medium gap-2 hover:text-fd-accent-foreground inline-flex items-center py-2 text-fd-muted-foreground text-sm transition-colors whitespace-nowrap */
  .nd-tabbox-trigger {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    border-color: #0000;
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    color: var(--color-fd-muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .nd-tabbox-trigger:hover {
      color: var(--color-fd-accent-foreground);
    }
  }
  .nd-tabbox-trigger:disabled {
    pointer-events: none;
    opacity: .5;
  }
  .nd-tabbox-trigger[data-active] {
    border-color: var(--color-fd-primary);
    color: var(--color-fd-primary);
  }
  .nd-tabbox-trigger svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  /* .nd-tabbox-panel  <-  [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none bg-fd-background data-[inactive]:hidden outline-none p-4 rounded-xl text-[0.9375rem] (prose-no-margin stays) */
  .nd-tabbox-panel {
    border-radius: var(--radius-xl);
    background-color: var(--color-fd-background);
    padding: calc(var(--spacing) * 4);
    font-size: .9375rem;
    --tw-outline-style: none;
    outline-style: none;
  }
  .nd-tabbox-panel[data-inactive] {
    display: none;
  }
  .nd-tabbox-panel > figure:only-child {
    --tw-border-style: none;
    border-style: none;
  }

  /* ====================================================================
     Code tabs (CodeBlockTabs in codeblock.js)
     ==================================================================== */

  /* .nd-codetabs  <-  bg-fd-card border my-4 rounded-xl */
  .nd-codetabs {
    margin-block: calc(var(--spacing) * 4);
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-card);
  }

  /* .nd-codetabs-list  <-  flex flex-row overflow-x-auto px-2 text-fd-muted-foreground */
  .nd-codetabs-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding-inline: calc(var(--spacing) * 2);
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-codetabs-trigger  <-  [&_svg]:size-3.5 font-medium gap-2 group inline-flex items-center px-2 py-1.5 relative text-nowrap text-sm transition-colors
     + active text-fd-primary, otherwise hover:text-fd-accent-foreground (on the trigger's data-active) */
  .nd-codetabs-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    text-wrap: nowrap;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .nd-codetabs-trigger[data-active] {
    color: var(--color-fd-primary);
  }
  @media (hover: hover) {
    .nd-codetabs-trigger:not([data-active]):hover {
      color: var(--color-fd-accent-foreground);
    }
  }
  .nd-codetabs-trigger svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  /* .nd-codetabs-indicator  <-  absolute bottom-0 group-data-active:bg-fd-primary h-px inset-x-2 */
  .nd-codetabs-indicator {
    position: absolute;
    inset-inline: calc(var(--spacing) * 2);
    bottom: 0;
    height: 1px;
  }
  .nd-codetabs-indicator:is(:where(.nd-codetabs-trigger)[data-active] *) {
    background-color: var(--color-fd-primary);
  }

  /* ====================================================================
     Code block shell (CodeBlock, Pre in codeblock.js)
     ==================================================================== */

  /* .nd-codeblock  <-  border not-prose overflow-hidden relative shadow-sm shiki text-sm */
  .nd-codeblock {
    position: relative;
    overflow: hidden;
    border-style: var(--tw-border-style);
    border-width: 1px;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  /* .nd-codeblock-card  <-  bg-fd-card rounded-xl */
  .nd-codeblock-card {
    border-radius: var(--radius-xl);
    background-color: var(--color-fd-card);
  }

  /* .nd-codeblock-spaced  <-  my-4 */
  .nd-codeblock-spaced {
    margin-block: calc(var(--spacing) * 4);
  }

  /* .nd-codeblock-flush  <-  my-0 (DynamicCodeBlock) */
  .nd-codeblock-flush {
    margin-block: 0;
  }

  /* .nd-codeblock-tab  <-  -mb-px -mx-px bg-fd-secondary last:rounded-b-xl */
  .nd-codeblock-tab {
    margin-inline: -1px;
    margin-bottom: -1px;
    background-color: var(--color-fd-secondary);
  }
  .nd-codeblock-tab:last-child {
    border-bottom-right-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }

  /* .nd-codeblock-title  <-  border-b flex gap-2 h-9.5 items-center px-4 text-fd-muted-foreground */
  .nd-codeblock-title {
    display: flex;
    height: calc(var(--spacing) * 9.5);
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
    padding-inline: calc(var(--spacing) * 4);
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-codeblock-icon  <-  [&_svg]:size-3.5 */
  .nd-codeblock-icon svg {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  /* .nd-codeblock-caption  <-  flex-1 truncate */
  .nd-codeblock-caption {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  /* .nd-codeblock-actions  <-  empty:hidden */
  .nd-codeblock-actions:empty {
    display: none;
  }

  /* .nd-codeblock-actions-inline  <-  -me-2 */
  .nd-codeblock-actions-inline {
    margin-inline-end: calc(var(--spacing) * -2);
  }

  /* .nd-codeblock-actions-float  <-  absolute backdrop-blur-lg right-2 rounded-lg text-fd-muted-foreground top-2 z-2 */
  .nd-codeblock-actions-float {
    position: absolute;
    top: calc(var(--spacing) * 2);
    right: calc(var(--spacing) * 2);
    z-index: 2;
    border-radius: var(--radius-lg);
    color: var(--color-fd-muted-foreground);
    --tw-backdrop-blur: blur(var(--blur-lg));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  /* .nd-codeblock-copy  <-  data-checked:text-fd-accent-foreground hover:text-fd-accent-foreground (+ nd-btn nd-btn-icon-xs) */
  @media (hover: hover) {
    .nd-codeblock-copy:hover {
      color: var(--color-fd-accent-foreground);
    }
  }
  .nd-codeblock-copy[data-checked] {
    color: var(--color-fd-accent-foreground);
  }

  /* .nd-codeblock-viewport  <-  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring focus-visible:ring-inset max-h-[600px] overflow-auto py-3.5 text-[0.8125rem] (fd-scroll-container stays) */
  .nd-codeblock-viewport {
    max-height: 600px;
    overflow: auto;
    padding-block: calc(var(--spacing) * 3.5);
    font-size: .8125rem;
  }
  .nd-codeblock-viewport:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    --tw-ring-color: var(--color-fd-ring);
    --tw-outline-style: none;
    outline-style: none;
    --tw-ring-inset: inset;
  }

  /* .nd-codeblock-pre  <-  *:flex *:flex-col min-w-full w-max */
  .nd-codeblock-pre {
    width: max-content;
    min-width: 100%;
  }
  :is(.nd-codeblock-pre > *) {
    display: flex;
  }
  :is(.nd-codeblock-pre > *) {
    flex-direction: column;
  }

  /* ====================================================================
     Accordion (accordion.js)
     ==================================================================== */

  /* .nd-accordions  <-  bg-fd-card border divide-fd-border divide-y overflow-hidden rounded-lg */
  :where(.nd-accordions > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(.nd-accordions > :not(:last-child)) {
    border-color: var(--color-fd-border);
  }
  .nd-accordions {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-card);
  }

  /* .nd-accordion-header  <-  flex flex-row font-medium has-focus-visible:bg-fd-accent items-center scroll-m-24 text-fd-card-foreground (not-prose stays) */
  .nd-accordion-header {
    display: flex;
    scroll-margin: calc(var(--spacing) * 24);
    flex-direction: row;
    align-items: center;
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-fd-card-foreground);
  }
  .nd-accordion-header:has(:focus-visible) {
    background-color: var(--color-fd-accent);
  }

  /* .nd-accordion-trigger  <-  flex flex-1 focus-visible:outline-none gap-2 group items-center px-3 py-2.5 text-start */
  .nd-accordion-trigger {
    display: flex;
    flex: 1;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2.5);
    text-align: start;
  }
  .nd-accordion-trigger:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  /* .nd-accordion-chevron  <-  duration-200 group-data-panel-open:rotate-90 shrink-0 size-4 text-fd-muted-foreground transition-transform */
  .nd-accordion-chevron {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
    color: var(--color-fd-muted-foreground);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .2s;
    transition-duration: .2s;
  }
  .nd-accordion-chevron:is(:where(.nd-accordion-trigger)[data-panel-open] *) {
    rotate: 90deg;
  }

  /* .nd-accordion-copy  <-  me-2 p-2 rounded-md text-fd-muted-foreground (+ nd-btn nd-btn-ghost) */
  .nd-accordion-copy {
    margin-inline-end: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 2);
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-accordion-copy-icon  <-  size-3.5 */
  .nd-accordion-copy-icon {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  /* .nd-accordion-panel  <-  data-ending-style:h-0 data-starting-style:h-0 ease-out h-(--accordion-panel-height) overflow-hidden transition-[height] */
  .nd-accordion-panel {
    height: var(--accordion-panel-height);
    overflow: hidden;
    transition-property: height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .nd-accordion-panel[data-ending-style] {
    height: 0;
  }
  .nd-accordion-panel[data-starting-style] {
    height: 0;
  }

  /* .nd-accordion-content  <-  [&[hidden]:not([hidden='until-found'])]:hidden pb-2 px-4 text-[0.9375rem] (prose-no-margin stays) */
  .nd-accordion-content {
    padding-inline: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 2);
    font-size: .9375rem;
  }
  .nd-accordion-content[hidden]:not([hidden="until-found"]) {
    display: none;
  }

  /* Collapsible panel (CollapsibleContent in components/ui/collapsible.js) of file tree,
     type table and inline table of contents: the same styles as the panel of the
     collapsible TOC bar, so it reuses `nd-collapsible-panel` (rule in layout.css). */

  /* ====================================================================
     File tree (files.js)
     ==================================================================== */

  /* .nd-files  <-  bg-fd-card border p-2 rounded-md (not-prose stays) */
  .nd-files {
    border-radius: var(--radius-md);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-card);
    padding: calc(var(--spacing) * 2);
  }

  /* .nd-files-item  <-  [&_svg]:size-4 flex flex-row gap-2 hover:bg-fd-accent hover:text-fd-accent-foreground items-center px-2 py-1.5 rounded-md text-sm */
  .nd-files-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-md);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  @media (hover: hover) {
    .nd-files-item:hover {
      background-color: var(--color-fd-accent);
    }
  }
  @media (hover: hover) {
    .nd-files-item:hover {
      color: var(--color-fd-accent-foreground);
    }
  }
  .nd-files-item svg {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  /* .nd-files-folder  <-  w-full (on the folder trigger in addition to nd-files-item) */
  .nd-files-folder {
    width: 100%;
  }

  /* .nd-files-children  <-  border-l flex flex-col ms-2 ps-2 */
  .nd-files-children {
    margin-inline-start: calc(var(--spacing) * 2);
    display: flex;
    flex-direction: column;
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
    padding-inline-start: calc(var(--spacing) * 2);
  }

  /* ====================================================================
     Type table (type-table.js)
     ==================================================================== */

  /* .nd-typetable  <-  @container bg-fd-card border flex flex-col my-6 overflow-hidden p-1 rounded-2xl text-fd-card-foreground text-sm */
  .nd-typetable {
    container-type: inline-size;
    margin-block: calc(var(--spacing) * 6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-card);
    padding: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-card-foreground);
  }

  /* .nd-typetable-head  <-  flex font-medium items-center px-3 py-1 text-fd-muted-foreground (not-prose stays) */
  .nd-typetable-head {
    display: flex;
    align-items: center;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: var(--spacing);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-typetable-head-name  <-  w-1/4 */
  .nd-typetable-head-name {
    width: 25%;
  }

  /* .nd-typetable-hide-narrow  <-  @max-xl:hidden */
  @container not (min-width: 36rem) {
    .nd-typetable-hide-narrow {
      display: none;
    }
  }

  /* .nd-typetable-type-link  <-  underline */
  .nd-typetable-type-link {
    text-decoration-line: underline;
  }

  /* .nd-typetable-item  <-  border overflow-hidden rounded-xl scroll-m-20 transition-all
     + closed: border-transparent; open: bg-fd-background not-last:mb-2 shadow-sm (here on data-open) */
  .nd-typetable-item {
    scroll-margin: calc(var(--spacing) * 20);
    overflow: hidden;
    border-radius: var(--radius-xl);
    border-style: var(--tw-border-style);
    border-width: 1px;
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .nd-typetable-item:not([data-open]) {
    border-color: #0000;
  }
  .nd-typetable-item[data-open] {
    background-color: var(--color-fd-background);
  }
  .nd-typetable-item[data-open] {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .nd-typetable-item[data-open]:not(:last-child) {
    margin-bottom: calc(var(--spacing) * 2);
  }

  /* .nd-typetable-trigger  <-  flex flex-row group hover:bg-fd-accent items-center px-3 py-2 relative text-start w-full (not-prose stays) */
  .nd-typetable-trigger {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    text-align: start;
  }
  @media (hover: hover) {
    .nd-typetable-trigger:hover {
      background-color: var(--color-fd-accent);
    }
  }

  /* .nd-typetable-name  <-  font-medium font-mono min-w-fit pe-2 text-fd-primary w-1/4 */
  .nd-typetable-name {
    width: 25%;
    min-width: fit-content;
    padding-inline-end: calc(var(--spacing) * 2);
    font-family: var(--font-mono);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--color-fd-primary);
  }

  /* .nd-typetable-name-deprecated  <-  font-medium font-mono line-through min-w-fit pe-2 text-fd-primary/50 w-1/4
     (a class of its own for the whole list: tailwind-merge drops text-fd-primary when deprecated) */
  .nd-typetable-name-deprecated {
    width: 25%;
    min-width: fit-content;
    padding-inline-end: calc(var(--spacing) * 2);
    font-family: var(--font-mono);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: #17171780;
    text-decoration-line: line-through;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-typetable-name-deprecated {
      color: color-mix(in oklab, var(--color-fd-primary) 50%, transparent);
    }
  }

  /* .nd-typetable-chevron  <-  absolute inset-e-2 size-4 text-fd-muted-foreground transition-transform
     (group-data-[open]:rotate-180 never applies: the group is the trigger with data-panel-open) */
  .nd-typetable-chevron {
    position: absolute;
    inset-inline-end: calc(var(--spacing) * 2);
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    color: var(--color-fd-muted-foreground);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  /* .nd-typetable-body  <-  border-t gap-y-4 grid grid-cols-[1fr_3fr] overflow-auto p-3 text-sm (fd-scroll-container stays) */
  .nd-typetable-body {
    display: grid;
    grid-template-columns: 1fr 3fr;
    row-gap: calc(var(--spacing) * 4);
    overflow: auto;
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  /* .nd-typetable-desc  <-  col-span-full empty:hidden text-sm (prose prose-no-margin stay) */
  .nd-typetable-desc {
    grid-column: 1 / -1;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .nd-typetable-desc:empty {
    display: none;
  }

  /* .nd-typetable-field  <-  pe-2 text-fd-muted-foreground (not-prose stays) */
  .nd-typetable-field {
    padding-inline-end: calc(var(--spacing) * 2);
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-typetable-value  <-  my-auto (not-prose stays) */
  .nd-typetable-value {
    margin-block: auto;
  }

  /* ====================================================================
     Banner (banner.js)
     ==================================================================== */

  /* .nd-banner  <-  flex flex-row font-medium items-center justify-center px-4 sticky text-center text-sm top-0 z-40 */
  .nd-banner {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-inline: calc(var(--spacing) * 4);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  /* .nd-banner-normal  <-  bg-fd-secondary */
  .nd-banner-normal {
    background-color: var(--color-fd-secondary);
  }

  /* .nd-banner-rainbow  <-  bg-fd-secondary border-b */
  .nd-banner-rainbow {
    border-bottom: 1px solid var(--color-fd-border);
    background-color: var(--color-fd-secondary);
  }

  /* .nd-banner-close  <-  -translate-y-1/2 [&_svg]:size-4.5 absolute inset-e-2 p-1.5 rounded-md text-fd-muted-foreground/50 top-1/2 (+ nd-btn nd-btn-ghost) */
  .nd-banner-close {
    position: absolute;
    inset-inline-end: calc(var(--spacing) * 2);
    top: 50%;
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing) * 1.5);
    color: #73737380;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .nd-banner-close {
      color: color-mix(in oklab, var(--color-fd-muted-foreground) 50%, transparent);
    }
  }
  .nd-banner-close svg {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }

  /* ====================================================================
     Inline table of contents (inline-toc.js)
     ==================================================================== */

  /* .nd-inlinetoc  <-  bg-fd-card border rounded-lg text-fd-card-foreground (not-prose stays) */
  .nd-inlinetoc {
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    background-color: var(--color-fd-card);
    color: var(--color-fd-card-foreground);
  }

  /* .nd-inlinetoc-trigger  <-  font-medium group inline-flex items-center justify-between px-4 py-2.5 w-full */
  .nd-inlinetoc-trigger {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  /* .nd-inlinetoc-chevron  <-  duration-200 size-4 transition-transform
     (group-data-open:rotate-180 never applies: the trigger carries data-panel-open) */
  .nd-inlinetoc-chevron {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  /* .nd-inlinetoc-list  <-  flex flex-col p-4 pt-0 text-fd-muted-foreground text-sm */
  .nd-inlinetoc-list {
    display: flex;
    flex-direction: column;
    padding: calc(var(--spacing) * 4);
    padding-top: 0;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-fd-muted-foreground);
  }

  /* .nd-inlinetoc-item  <-  border-s hover:text-fd-accent-foreground py-1.5 */
  .nd-inlinetoc-item {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 1px;
    padding-block: calc(var(--spacing) * 1.5);
  }
  @media (hover: hover) {
    .nd-inlinetoc-item:hover {
      color: var(--color-fd-accent-foreground);
    }
  }
}

/* In `utilities`, after prose.css, so it beats `.prose :where(figure)`:
   a single figure without not-prose in the panel keeps -1rem instead of a 2em margin. */
@layer utilities {
  /* .nd-tabbox-panel  <-  [&>figure:only-child]:-m-4 */
  .nd-tabbox-panel > figure:only-child {
    margin: calc(var(--spacing) * -4);
  }
}

/* ======================================================================
   Image zoom: the stylesheet of react-medium-image-zoom, unlayered, for
   js/image-zoom.js.
   ====================================================================== */

[data-rmiz] {
  display: block;
  position: relative;
}

[data-rmiz-ghost] {
  pointer-events: none;
  position: absolute;
}

[data-rmiz-btn-zoom], [data-rmiz-btn-unzoom] {
  display: none;
}

[data-rmiz-content="found"] img {
  cursor: zoom-in;
}

[data-rmiz-modal][open] {
  background-color: #0000;
  width: 100dvw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  position: fixed;
  overflow: hidden;
}

[data-rmiz-modal]:focus-visible {
  outline: none;
}

[data-rmiz-modal-overlay] {
  transition: background-color .3s;
  position: absolute;
  inset: 0;
}

[data-rmiz-modal-overlay="visible"] {
  background-color: var(--color-fd-background);
}

[data-rmiz-modal-overlay="hidden"] {
  background-color: #0000;
}

[data-rmiz-modal-content] {
  width: 100%;
  height: 100%;
  position: relative;
}

[data-rmiz-modal]::backdrop {
  display: none;
}

[data-rmiz-modal-img] {
  cursor: zoom-out;
  image-rendering: high-quality;
  transform-origin: 0 0;
  transition: transform .3s;
  position: absolute;
}

@media (prefers-reduced-motion: reduce) {
  [data-rmiz-modal-overlay], [data-rmiz-modal-img] {
    transition-duration: .01ms !important;
  }
}

/* ---- theme.custom_css ---- */
/*
 * docs.dairo.app in Dairo's look (theme.custom_css, appended after Pholio's theme).
 * Colours, fonts and radii are tokens in pholio.config.php, copied from
 * dairo-frontend app/globals.css; this file holds what a token can't express:
 * the self-hosted mono font, links, code boxes and focus.
 */

/* Geist Mono, self-hosted like next/font serves it on dairo.app (assets/fonts, OFL-1.1). */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/GeistMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/GeistMono-Medium.woff2") format("woff2");
}

/* Callouts in the brand: notes and tips in the foreground (monochrome), warnings, errors and
 * successes in the frontend's own semantic colours (--warning, --destructive, --success). */
:root {
  --color-fd-info: oklch(0.145 0 0);
  --color-fd-idea: oklch(0.145 0 0);
  --color-fd-warning: oklch(0.68 0.13 75);
  --color-fd-error: oklch(0.58 0.22 27);
  --color-fd-success: oklch(0.62 0.13 162);
}
.dark {
  --color-fd-info: oklch(0.985 0 0);
  --color-fd-idea: oklch(0.985 0 0);
  --color-fd-warning: oklch(0.8 0.13 78);
  --color-fd-error: oklch(0.704 0.191 22.216);
  --color-fd-success: oklch(0.72 0.13 162);
}

/* One focus indicator for everything: a 2px ring-coloured outline, never a glow. */
:focus-visible {
  outline: 2px solid var(--color-fd-ring) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Headings and strong text in the foreground, body text one step softer. */
.prose {
  --tw-prose-bold: var(--color-fd-foreground);
  --tw-prose-links: var(--color-fd-foreground);
}
.nd-page-title {
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* Links in text: medium weight, a 30 % underline that turns solid on hover. */
.prose :where(a:not([data-card])):not(:where(.not-prose, .not-prose *)) {
  color: var(--color-fd-foreground);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--color-fd-foreground) 30%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s;
}
.prose :where(a:not([data-card])):not(:where(.not-prose, .not-prose *)):hover {
  text-decoration-color: var(--color-fd-foreground);
  opacity: 1;
}

/* Inline code: mono on the muted fill, no border. */
.prose :where(code):not(:where(.not-prose, .not-prose *)) {
  font-size: 0.8125em;
  padding: 2px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-fd-muted);
  color: var(--color-fd-foreground);
}

/* Code blocks: hairline border, muted fill at 40 %, no shadow. */
.nd-codeblock {
  border: 1px solid var(--color-fd-border);
  box-shadow: none;
  background: color-mix(in oklab, var(--color-fd-muted) 40%, transparent) !important;
}
.nd-codeblock-pre {
  font-size: 13px;
  line-height: 22px;
  background: transparent !important;
}

/* Hairline cards and figures without shadows. */
.nd-card,
.nd-figure {
  box-shadow: none;
}