/* 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 {
  --color-fd-primary: hsl(0 0% 9%);
}
.dark {
  --color-fd-primary: hsl(0 0% 98%);
}

/* --- @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).
 */
html {
  font-family: 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;
  }
}