/*fern-site-stylesheet*/@font-face {
    font-family: 'Neue Montreal';
    src: url('/_fern-files/zep.docs.buildwithfern.com/409fded6361214cd2143484f9d722789cc85bdd0f20d86d2246b41c7feb002ce/fonts/PPNeueMontreal-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url('/_fern-files/zep.docs.buildwithfern.com/ca2ca0d526b94b519eb3c5bd20e1773b0021050d8cba1d36195695ada830b78f/fonts/PPNeueMontreal-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url('/_fern-files/zep.docs.buildwithfern.com/1b4772ccd0366cbbc8549d24b01ad06ea220a06ff1b043948ee3a9e944191927/fonts/PPNeueMontreal-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url('/_fern-files/zep.docs.buildwithfern.com/09628dfb3ffb0eabef05d7030cb64c9e06b12984eadc7c19239ad36faeed25c3/fonts/PPNeueMontreal-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url('/_fern-files/zep.docs.buildwithfern.com/409fded6361214cd2143484f9d722789cc85bdd0f20d86d2246b41c7feb002ce/fonts/PPNeueMontreal-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url('/_fern-files/zep.docs.buildwithfern.com/ca2ca0d526b94b519eb3c5bd20e1773b0021050d8cba1d36195695ada830b78f/fonts/PPNeueMontreal-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url('/_fern-files/zep.docs.buildwithfern.com/1b4772ccd0366cbbc8549d24b01ad06ea220a06ff1b043948ee3a9e944191927/fonts/PPNeueMontreal-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neue Montreal';
    src: url('/_fern-files/zep.docs.buildwithfern.com/09628dfb3ffb0eabef05d7030cb64c9e06b12984eadc7c19239ad36faeed25c3/fonts/PPNeueMontreal-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PP Neue Montreal Mono';
    src: url('/_fern-files/zep.docs.buildwithfern.com/015969c26357281f3452e7932325d1ec65cea27a61e354f66014fd0942aad76e/fonts/PPNeueMontrealMono-Book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PP Neue Montreal Mono';
    src: url('/_fern-files/zep.docs.buildwithfern.com/8e6ab0d48c048a9fe04cb72842d459313533f954016e5098f3424dfe4b15653f/fonts/PPNeueMontrealMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PP Neue Montreal Mono';
    src: url('/_fern-files/zep.docs.buildwithfern.com/01acc601553829a6a362597fe201b775229203c0402989b82d43dcce68168608/fonts/PPNeueMontrealMono-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --logo-height: 28px;
  --font-body: 'Neue Montreal', -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Neue Montreal', -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, 'Neue Montreal', -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'PP Neue Montreal Mono', ui-monospace, SF Mono, SFMono-Regular, Menlo, Consolas, monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #f6f5f9;
  --accent-2: #f3f1f9;
  --accent-3: #ece6fb;
  --accent-4: #e4dafc;
  --accent-5: #dbcdfa;
  --accent-6: #cfbdf7;
  --accent-7: #c0a7f1;
  --accent-8: #ad8beb;
  --accent-9: #4f2d7f;
  --accent-10: #603f92;
  --accent-11: #6d4aa3;
  --accent-12: #401c6e;

  --accent-a1: #f0efff66;
  --accent-a2: #e9e5ff66;
  --accent-a3: #e3daff99;
  --accent-a4: #dbcdffb3;
  --accent-a5: #bda2ff80;
  --accent-a6: #2300ff33;
  --accent-a7: #4a01e954;
  --accent-a8: #4d01df71;
  --accent-a9: #2a0065d1;
  --accent-a10: #2c0171bf;
  --accent-a11: #320281b4;
  --accent-a12: #2a015de3;

  --accent-contrast: #fff;
  --accent-surface: #f2effacc;
  --accent-indicator: #4f2d7f;
  --accent-track: #4f2d7f;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(97.3% 0.0048 299.1);
      --accent-2: oklch(96.1% 0.0106 299.1);
      --accent-3: oklch(93.5% 0.0294 299.1);
      --accent-4: oklch(90.7% 0.0468 299.1);
      --accent-5: oklch(87.4% 0.0637 299.1);
      --accent-6: oklch(83.3% 0.0822 299.1);
      --accent-7: oklch(77.8% 0.1064 299.1);
      --accent-8: oklch(70.7% 0.1403 299.1);
      --accent-9: oklch(38.5% 0.1329 299.1);
      --accent-10: oklch(44.7% 0.1329 299.1);
      --accent-11: oklch(49% 0.1403 299.1);
      --accent-12: oklch(32.8% 0.1329 299.1);

      --accent-a1: color(display-p3 0.9412 0.9373 1 / 0.4);
      --accent-a2: color(display-p3 0.8902 0.8745 0.9961 / 0.3);
      --accent-a3: color(display-p3 0.8353 0.7922 1 / 0.4);
      --accent-a4: color(display-p3 0.7451 0.6745 1 / 0.4);
      --accent-a5: color(display-p3 0.3333 0.1137 1 / 0.2);
      --accent-a6: color(display-p3 0.2196 0.0039 0.9294 / 0.237);
      --accent-a7: color(display-p3 0.2353 0.0039 0.8549 / 0.326);
      --accent-a8: color(display-p3 0.2431 0.0039 0.8157 / 0.438);
      --accent-a9: color(display-p3 0.1294 0 0.3725 / 0.812);
      --accent-a10: color(display-p3 0.1451 0 0.4118 / 0.743);
      --accent-a11: color(display-p3 0.1647 0 0.4706 / 0.699);
      --accent-a12: color(display-p3 0.1294 0 0.3451 / 0.88);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9412 0.9373 0.9765 / 0.8);
      --accent-indicator: oklch(38.5% 0.1329 299.1);
      --accent-track: oklch(38.5% 0.1329 299.1);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfdfc;
  --grayscale-2: #f9f9f8;
  --grayscale-3: #f1f0ef;
  --grayscale-4: #e9e8e6;
  --grayscale-5: #e2e1de;
  --grayscale-6: #dad9d6;
  --grayscale-7: #cfceca;
  --grayscale-8: #bcbbb5;
  --grayscale-9: #8d8d86;
  --grayscale-10: #82827c;
  --grayscale-11: #63635e;
  --grayscale-12: #21201c;

  --grayscale-a1: #55550003;
  --grayscale-a2: #25250007;
  --grayscale-a3: #20100010;
  --grayscale-a4: #1f150019;
  --grayscale-a5: #1f180021;
  --grayscale-a6: #19130029;
  --grayscale-a7: #19140035;
  --grayscale-a8: #1915014a;
  --grayscale-a9: #0f0f0079;
  --grayscale-a10: #0c0c0083;
  --grayscale-a11: #080800a1;
  --grayscale-a12: #060500e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8d8d86;
  --grayscale-track: #8d8d86;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.992 0.992 0.989);
      --grayscale-2: color(display-p3 0.977 0.977 0.973);
      --grayscale-3: color(display-p3 0.943 0.942 0.936);
      --grayscale-4: color(display-p3 0.913 0.912 0.903);
      --grayscale-5: color(display-p3 0.885 0.883 0.873);
      --grayscale-6: color(display-p3 0.854 0.852 0.839);
      --grayscale-7: color(display-p3 0.813 0.81 0.794);
      --grayscale-8: color(display-p3 0.738 0.734 0.713);
      --grayscale-9: color(display-p3 0.553 0.553 0.528);
      --grayscale-10: color(display-p3 0.511 0.511 0.488);
      --grayscale-11: color(display-p3 0.388 0.388 0.37);
      --grayscale-12: color(display-p3 0.129 0.126 0.111);

      --grayscale-a1: #55550003;
      --grayscale-a2: #25250007;
      --grayscale-a3: #20100010;
      --grayscale-a4: #1f150019;
      --grayscale-a5: #1f180021;
      --grayscale-a6: #19130029;
      --grayscale-a7: #19140035;
      --grayscale-a8: #1915014a;
      --grayscale-a9: #0f0f0079;
      --grayscale-a10: #0c0c0083;
      --grayscale-a11: #080800a1;
      --grayscale-a12: #060500e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.553 0.553 0.528);
      --grayscale-track: color(display-p3 0.553 0.553 0.528);
    }
  }
}


.dark {
  --accent-1: #141316;
  --accent-2: #1a181e;
  --accent-3: #26222d;
  --accent-4: #2f2939;
  --accent-5: #373043;
  --accent-6: #413a4e;
  --accent-7: #51495f;
  --accent-8: #6b617d;
  --accent-9: #cbbee3;
  --accent-10: #c1b4d8;
  --accent-11: #bbafd3;
  --accent-12: #ebe6f3;

  --accent-a1: #00bb0003;
  --accent-a2: #b5f15c08;
  --accent-a3: #eeeaf514;
  --accent-a4: #decbfd21;
  --accent-a5: #dbc5ff2c;
  --accent-a6: #dac9fc39;
  --accent-a7: #dfcdfd4c;
  --accent-a8: #dfccff6d;
  --accent-a9: #e4d6ffe0;
  --accent-a10: #e3d5fed4;
  --accent-a11: #e3d5ffce;
  --accent-a12: #f7f1fff2;

  --accent-contrast: #251d32;
  --accent-surface: #1f1f2080;
  --accent-indicator: #cbbee3;
  --accent-track: #cbbee3;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(18.8% 0.0076 301.3);
      --accent-2: oklch(21.4% 0.0113 301.3);
      --accent-3: oklch(25.9% 0.0212 301.3);
      --accent-4: oklch(29.3% 0.0303 301.3);
      --accent-5: oklch(32.5% 0.0331 301.3);
      --accent-6: oklch(36.5% 0.0341 301.3);
      --accent-7: oklch(42.2% 0.038 301.3);
      --accent-8: oklch(51.2% 0.0462 301.3);
      --accent-9: oklch(82.4% 0.053 301.3);
      --accent-10: oklch(79.2% 0.053 301.3);
      --accent-11: oklch(77.6% 0.053 301.3);
      --accent-12: oklch(93.3% 0.0177 301.3);

      --accent-a1: color(display-p3 0.0784 0.9412 0 / 0.009);
      --accent-a2: color(display-p3 0.8667 0.9843 0.502 / 0.03);
      --accent-a3: color(display-p3 0.9647 0.9569 0.9961 / 0.075);
      --accent-a4: color(display-p3 0.8784 0.8039 0.9922 / 0.128);
      --accent-a5: color(display-p3 0.8549 0.7765 0.9961 / 0.172);
      --accent-a6: color(display-p3 0.8627 0.8 1 / 0.22);
      --accent-a7: color(display-p3 0.8902 0.8275 1 / 0.29);
      --accent-a8: color(display-p3 0.8667 0.8118 0.9961 / 0.422);
      --accent-a9: color(display-p3 0.898 0.851 0.9961 / 0.865);
      --accent-a10: color(display-p3 0.898 0.851 1 / 0.816);
      --accent-a11: color(display-p3 0.8941 0.8431 1 / 0.794);
      --accent-a12: color(display-p3 0.9686 0.9529 1 / 0.943);

      --accent-contrast: #251d32;
      --accent-surface: color(display-p3 0.1255 0.1176 0.1176 / 0.5);
      --accent-indicator: oklch(82.4% 0.053 301.3);
      --accent-track: oklch(82.4% 0.053 301.3);
    }
  }
}


.dark {
  --grayscale-1: #121113;
  --grayscale-2: #1a191b;
  --grayscale-3: #232225;
  --grayscale-4: #2b292d;
  --grayscale-5: #323035;
  --grayscale-6: #3c393f;
  --grayscale-7: #49474e;
  --grayscale-8: #625f69;
  --grayscale-9: #6f6d78;
  --grayscale-10: #7c7a85;
  --grayscale-11: #b5b2bc;
  --grayscale-12: #eeeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f5f4f609;
  --grayscale-a3: #ebeaf814;
  --grayscale-a4: #eee5f81d;
  --grayscale-a5: #efe6fe25;
  --grayscale-a6: #f1e6fd30;
  --grayscale-a7: #eee9ff40;
  --grayscale-a8: #eee7ff5d;
  --grayscale-a9: #eae6fd6e;
  --grayscale-a10: #ece9fd7c;
  --grayscale-a11: #f5f1ffb7;
  --grayscale-a12: #fdfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6f6d78;
  --grayscale-track: #6f6d78;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.07 0.067 0.074);
      --grayscale-2: color(display-p3 0.101 0.098 0.105);
      --grayscale-3: color(display-p3 0.138 0.134 0.144);
      --grayscale-4: color(display-p3 0.167 0.161 0.175);
      --grayscale-5: color(display-p3 0.196 0.189 0.206);
      --grayscale-6: color(display-p3 0.232 0.225 0.245);
      --grayscale-7: color(display-p3 0.286 0.277 0.302);
      --grayscale-8: color(display-p3 0.383 0.373 0.408);
      --grayscale-9: color(display-p3 0.434 0.428 0.467);
      --grayscale-10: color(display-p3 0.487 0.48 0.519);
      --grayscale-11: color(display-p3 0.707 0.7 0.735);
      --grayscale-12: color(display-p3 0.933 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f5f4f609;
      --grayscale-a3: #ebeaf814;
      --grayscale-a4: #eee5f81d;
      --grayscale-a5: #efe6fe25;
      --grayscale-a6: #f1e6fd30;
      --grayscale-a7: #eee9ff40;
      --grayscale-a8: #eee7ff5d;
      --grayscale-a9: #eae6fd6e;
      --grayscale-a10: #ece9fd7c;
      --grayscale-a11: #f5f1ffb7;
      --grayscale-a12: #fdfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.434 0.428 0.467);
      --grayscale-track: color(display-p3 0.434 0.428 0.467);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(79, 45, 127, 1);
  --background: rgba(250, 249, 245, 1);
  --border: rgba(230, 225, 238, 1);
  --sidebar-background: rgba(250, 249, 245, 1);
  --header-background: rgba(250, 249, 245, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #faf9f5;
}

.dark {
  color-scheme: dark;
  --accent: rgba(203, 190, 227, 1);
  --background: rgba(21, 17, 28, 1);
  --border: rgba(46, 38, 57, 1);
  --sidebar-background: rgba(21, 17, 28, 1);
  --header-background: rgba(21, 17, 28, 1);
  --card-background: rgba(30, 24, 40, 1);
  --theme-color: #15111c;
}

/* =========================================================================
   Zep documentation theme — Zep Design System v4
   Token values mirror the v4 design system (tokens/colors.css,
   typography.css, spacing.css). docs.yml sets the base colors and the
   fonts: PP Neue Montreal (headings and body) and PP Neue Montreal Mono
   (code, eyebrows, labels). The v4 display serif is not used, for
   legibility. v4 uses no italics, no shadows, and no gradients; emphasis
   is color or weight. Daisy Bush is an accent, never a surface fill.
   v4 has no dark theme; the dark values below are derived from the v4
   purple scale and paper pair.
   ========================================================================= */

:root {
  /* --- Purple scale (Daisy Bush = 700) --- */
  --zep-purple-950: #1e1233;
  --zep-purple-800: #3f2168;
  --zep-purple-700: #4f2d7f;
  --zep-purple-300: #cbbee3;
  --zep-purple-200: #ddd4ec;
  --zep-purple-100: #eee9f7;
  --zep-purple-50: #f5f3f8;

  /* --- Surfaces (light) --- */
  --zep-bg-page: #faf9f5; /* --paper */
  --zep-bg-tint: #f2eee7; /* --paper-tint */
  --zep-bg-card: #ffffff;
  --zep-bg-raised: #fcfbfd;
  --zep-bg-code: #f2eee7;

  /* --- Text (light) --- */
  --zep-text-default: #1a1a1a; /* --ink-900 */
  --zep-text-body: #4a4a4a; /* --ink-700 */
  --zep-text-muted: #5a5a5a; /* --ink-600 */
  --zep-text-soft: #8a8a8a; /* --ink-400 */

  /* --- Lines (light) --- */
  --zep-rule-strong: #1a1a1a;
  --zep-rule-hair: #e6e1ee; /* --line-300 */
  --zep-border-card: #e4e1ea; /* --line-400 */
  --zep-border-strong: #d9d2e5; /* --line-500 */

  /* --- Code (light) --- */
  --zep-code-inline: #3f2168;

  /* --- Status --- */
  --zep-allow-fg: #3e5a45;
  --zep-allow-bg: #e6ece7;
  --zep-deny-fg: #7a4358;
  --zep-deny-bg: #f3e7ec;

  /* --- Shape and motion --- */
  --zep-radius-chip: 4px;
  --zep-radius-control: 6px; /* buttons, cards, inputs, code */
  --zep-duration: 150ms;
  --zep-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Type --- */
  --zep-font-mono: "PP Neue Montreal Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
    Consolas, monospace;
  --zep-tracking-eyebrow: 0.08em;

  /* Active accent resolves per color scheme. */
  --zep-accent: var(--zep-purple-700);
  --zep-accent-hover: var(--zep-purple-800);
  --zep-focus-halo: rgba(79, 45, 127, 0.18);
}

.dark {
  --zep-bg-page: #15111c;
  --zep-bg-tint: #1b1624;
  --zep-bg-card: #1e1828;
  --zep-bg-raised: #221b2d;
  --zep-bg-code: #1c1428; /* --code-bg */

  --zep-text-default: #f2eee7; /* --paper-tint */
  --zep-text-body: #d6d0dd;
  --zep-text-muted: #b3acc0; /* --ink-200 */
  --zep-text-soft: #8f84a6; /* --code-chrome */

  --zep-rule-strong: #f2eee7;
  --zep-rule-hair: #2e2639;
  --zep-border-card: #2e2639;
  --zep-border-strong: #3d3350;

  --zep-code-inline: #ddd4ec;

  --zep-allow-fg: #b9d0bf;
  --zep-allow-bg: #1f2a22;
  --zep-deny-fg: #e3b9c9;
  --zep-deny-bg: #2e1c24;

  --zep-accent: var(--zep-purple-300);
  --zep-accent-hover: var(--zep-purple-200);
  --zep-focus-halo: rgba(203, 190, 227, 0.22);
}

/* =========================================================================
   Base — selection, focus, no italics
   ========================================================================= */
::selection {
  background: var(--zep-purple-700);
  color: #ffffff;
}

:focus-visible {
  outline: 2px solid var(--zep-accent);
  outline-offset: 2px;
}

/* v4 uses no italics. Emphasis is weight. */
main article em,
main article i,
main article cite {
  font-style: normal;
  font-weight: 500;
  color: var(--zep-text-default);
}

/* =========================================================================
   Typography — Neue Montreal headings, tight tracking
   Headings sit at Medium (500) with the v4 display tracking. Fern's default
   heading weight reads too heavy for Neue Montreal at display sizes.
   ========================================================================= */
main article h1,
main article h2,
main article h3,
main article h4 {
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--zep-text-default);
  text-wrap: balance;
}

main article h1 {
  letter-spacing: -0.03em;
}

/* Emphasis in a heading carries the accent color, not an italic. */
main article h1 em,
main article h2 em,
main article h3 em {
  font-style: normal;
  font-weight: inherit;
  color: var(--zep-accent);
}

/* Body copy uses the v4 body ink and line height. */
main article .prose p,
main article .prose li {
  color: var(--zep-text-body);
  text-wrap: pretty;
}

main article .prose strong {
  color: var(--zep-text-default);
  font-weight: 600;
}

/* =========================================================================
   Eyebrow — v4 mono label: Medium 500, 12px, uppercase, +0.08em, with an
   8px square marker. Applied to the section breadcrumb above the page
   title. Sidebar navigation stays in the sans for scanning.
   ========================================================================= */
main article header .fern-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--zep-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--zep-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--zep-accent);
  text-decoration: none;
}

main article header .fern-breadcrumb-item:first-child::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
}

/* =========================================================================
   Links — Daisy Bush. v4 underlines links on hover only. Docs body links
   keep a light underline so they do not depend on color alone; hover
   darkens the text and the underline. Scoped to inline links: the
   Markdown link class and raw HTML anchors in the prose that have no
   class or inline style. Block links (linked cards, footer navigation)
   have a class, so they keep Fern's own styles and no underline.
   ========================================================================= */
main article a.fern-mdx-link,
main article .prose a[href]:not([class]):not([style]) {
  color: var(--zep-accent);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--zep-purple-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.dark main article a.fern-mdx-link,
.dark main article .prose a[href]:not([class]):not([style]) {
  text-decoration-color: color-mix(in srgb, var(--zep-purple-300), transparent 55%);
}

main article a.fern-mdx-link:hover,
main article .prose a[href]:not([class]):not([style]):hover {
  color: var(--zep-accent-hover);
  text-decoration-color: currentColor;
}
main article a.fern-mdx-link:focus-visible,
main article .prose a[href]:not([class]):not([style]):focus-visible {
  color: var(--zep-accent-hover);
  text-decoration-color: currentColor; outline: none;
}

/* Heading links (for example, changelog entry titles that link to their
   permalink) keep the heading ink and take the accent on hover. */
main article h1 a,
main article h2 a,
main article h3 a,
main article h4 a,
main article a h1,
main article a h2,
main article a h3,
main article a h4 {
  color: var(--zep-text-default);
}

main article h1 a:hover,
main article h2 a:hover,
main article h3 a:hover,
main article h4 a:hover,
main article a:hover h1,
main article a:hover h2,
main article a:hover h3,
main article a:hover h4 {
  color: var(--zep-accent);
}
main article h1 a:focus-visible,
main article h2 a:focus-visible,
main article h3 a:focus-visible,
main article h4 a:focus-visible,
main article a:focus-within h1,
main article a:focus-within h2,
main article a:focus-within h3,
main article a:focus-within h4 {
  color: var(--zep-accent); outline: none;
}

/* =========================================================================
   Code — PP Neue Montreal Mono on the paper tint, 6px radius.
   ========================================================================= */
code,
pre,
kbd,
samp {
  font-family: var(--zep-font-mono);
}

:not(pre) > code {
  background: var(--zep-bg-code);
  border: 1px solid var(--zep-rule-hair);
  border-radius: var(--zep-radius-chip);
  color: var(--zep-code-inline);
  font-variant-ligatures: none;
}

main article pre {
  background: var(--zep-bg-code);
  border: 1px solid var(--zep-rule-hair);
  border-radius: var(--zep-radius-control);
}

/* Fern's code group frame (tabs + block) uses a 12px radius. */
.fern-code {
  border-radius: var(--zep-radius-control) !important;
}

/* The dark syntax theme sets italic keywords and comments. v4 uses no
   italics. */
pre span,
.fern-code span {
  font-style: normal !important;
}

/* =========================================================================
   Cards and callouts — white, 1px border, 6px radius, no shadow.
   ========================================================================= */
.fern-card,
.fern-callout {
  border-radius: var(--zep-radius-control);
  border-color: var(--zep-border-card);
  box-shadow: none;
}

.fern-card {
  background: var(--zep-bg-card);
  transition: border-color var(--zep-duration) var(--zep-ease);
}

.fern-card:hover {
  border-color: var(--zep-accent);
  box-shadow: none;
}
.fern-card:focus-visible {
  border-color: var(--zep-accent);
  box-shadow: none; outline: none;
}

/* =========================================================================
   Announcement banner.
   Fern paints it with a solid `--accent` fill (a `bg-(color:--accent)` div
   inside `#fern-header`; current Fern wraps it in an astro-island, so the
   selector is not a direct-child selector). v4
   does not use Daisy Bush as a surface fill. Repaint the banner on the
   paper tint with ink text, a Daisy Bush link, and a hairline below.
   Targeted by the banner's `--accent-contrast` text class (unique to it
   within the header).
   ========================================================================= */
#fern-header div[class*="--accent-contrast"] {
  background-color: var(--zep-bg-tint) !important;
  color: var(--zep-text-default) !important;
  border-bottom: 1px solid var(--zep-rule-hair);
}

#fern-header div[class*="--accent-contrast"] a,
#fern-header div[class*="--accent-contrast"] .fern-mdx-link {
  color: var(--zep-accent) !important;
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--zep-purple-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#fern-header div[class*="--accent-contrast"] a:hover,
#fern-header div[class*="--accent-contrast"] .fern-mdx-link:hover {
  color: var(--zep-accent-hover) !important;
  text-decoration-color: currentColor;
}
#fern-header div[class*="--accent-contrast"] a:focus-visible,
#fern-header div[class*="--accent-contrast"] .fern-mdx-link:focus-visible {
  color: var(--zep-accent-hover) !important;
  text-decoration-color: currentColor; outline: none;
}

/* =========================================================================
   Buttons — primary is solid Daisy Bush and darkens on hover. Secondary
   keeps a Daisy Bush outline on a transparent fill. 6px radius, Medium.
   ========================================================================= */
.fern-button,
.fern-link-button {
  border-radius: var(--zep-radius-control) !important;
  font-weight: 500;
}

.fern-button-primary,
.fern-link-primary {
  background-color: var(--zep-purple-700) !important;
  border-color: var(--zep-purple-700) !important;
  color: #ffffff !important;
}

.fern-button-primary:hover,
.fern-link-primary:hover {
  background-color: var(--zep-purple-800) !important;
  border-color: var(--zep-purple-800) !important;
}
.fern-button-primary:focus-visible,
.fern-link-primary:focus-visible {
  background-color: var(--zep-purple-800) !important;
  border-color: var(--zep-purple-800) !important; outline: none;
}

/* Header navbar: Fern renders every `primary` navbar link as an outline.
   v4 allows one solid primary per view, so the last link (Sign Up) is
   solid and the others keep the Daisy Bush outline. */
.fern-header-navbar-links .fern-button.primary {
  border-radius: var(--zep-radius-control) !important;
  font-weight: 500;
}

.fern-header-navbar-links > a.fern-button.primary:last-of-type {
  background-color: var(--zep-purple-700) !important;
  border-color: var(--zep-purple-700) !important;
  color: #ffffff !important;
}

.fern-header-navbar-links > a.fern-button.primary:last-of-type:hover {
  background-color: var(--zep-purple-800) !important;
  border-color: var(--zep-purple-800) !important;
}
.fern-header-navbar-links > a.fern-button.primary:last-of-type:focus-visible {
  background-color: var(--zep-purple-800) !important;
  border-color: var(--zep-purple-800) !important; outline: none;
}

.fern-header-navbar-links > a.fern-button.primary:last-of-type * {
  color: inherit !important;
}

.fern-button-secondary {
  background-color: transparent !important;
  border-color: var(--zep-accent) !important;
  color: var(--zep-accent) !important;
}

.fern-button-secondary:hover {
  background-color: transparent !important;
  border-color: var(--zep-accent-hover) !important;
  color: var(--zep-accent-hover) !important;
}
.fern-button-secondary:focus-visible {
  background-color: transparent !important;
  border-color: var(--zep-accent-hover) !important;
  color: var(--zep-accent-hover) !important; outline: none;
}

/* =========================================================================
   Inputs — hairline at rest; focus adds a Daisy Bush border and a 3px halo.
   ========================================================================= */
.fern-input,
.fern-textarea {
  border-radius: var(--zep-radius-control);
}

.fern-input:focus,
.fern-textarea:focus {
  border-color: var(--zep-accent) !important;
  box-shadow: 0 0 0 3px var(--zep-focus-halo) !important;
}

/* =========================================================================
   Tables — v4 ruled columns: 2px ink rule on top of the header, 1px
   hairlines between rows, mono uppercase header labels.
   ========================================================================= */
.fern-table th {
  background-color: transparent;
  border-top: 2px solid var(--zep-rule-strong);
  border-bottom: 1px solid var(--zep-rule-hair);
  font-family: var(--zep-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--zep-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--zep-text-default);
}

.fern-table td {
  border-bottom: 1px solid var(--zep-rule-hair);
}

/* =========================================================================
   API reference — accent rule on endpoints.
   ========================================================================= */
.fern-api-endpoint {
  border-left: 2px solid var(--zep-accent);
}

.dark .fern-api-endpoint {
  background-color: var(--zep-bg-tint);
}

/* =========================================================================
   Header background — flat paper. v4 uses no gradients.
   ========================================================================= */
.fern-background-image {
  background-image: none;
  background-color: var(--zep-bg-page);
}

/* =========================================================================
   Overview hero — v4 painting plate (overview.mdx).
   A full-colour painting, a bottom scrim, and white type. The title is in
   the hero, so Fern's own page header is hidden on the page that has one.
   The painting is the same in both themes.
   ========================================================================= */
main article:has(.zep-hero) header:has(.fern-page-heading) {
  display: none;
}

/* The landing page has no sidebar navigation, but Fern still reserves the
   sidebar column (marked data-empty), so the content sits right of centre.
   Remove the empty column so the content centres. */
#fern-sidebar[data-empty="true"] {
  display: none;
}

.zep-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  margin: 2rem 0 2.5rem;
  overflow: hidden;
  border-radius: var(--zep-radius-control);
  background: #696350; /* painting placeholder colour */
  color: #ffffff;
}

/* Fern wraps every MDX image in a zoom container
   (span[data-rmiz] > span[data-rmiz-content] > img, plus a zoom button)
   and sets an inline aspect-ratio on the img. Stretch the wrapper over the
   hero, hide the zoom button, and let the img fill it. */
.zep-hero > [data-rmiz] {
  position: absolute !important;
  inset: 0;
  display: block;
}

.zep-hero > [data-rmiz] > [data-rmiz-content] {
  display: block;
  width: 100%;
  height: 100%;
}

.zep-hero [data-rmiz-btn-zoom] {
  display: none !important;
}

.zep-hero .zep-hero__img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  margin: 0;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 0;
}

.zep-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 12, 34, 0.72) 0, rgba(20, 12, 34, 0.35) 45%, rgba(20, 12, 34, 0) 75%);
}

.zep-hero__content {
  position: relative;
  max-width: 640px;
  padding: 40px 40px 48px;
}

main article .zep-hero .zep-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--zep-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--zep-tracking-eyebrow);
  text-transform: uppercase;
  color: #ffffff;
}

.zep-hero__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
}

main article .zep-hero .zep-hero__title {
  margin: 0;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #ffffff;
}

main article .zep-hero .zep-hero__lead {
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {

  .zep-hero {
    min-height: 360px;
  }

  .zep-hero__content {
    padding: 24px 20px 32px;
  }

  main article .zep-hero .zep-hero__title {
    font-size: 36px;
    line-height: 1.08;
  }

  main article .zep-hero .zep-hero__lead {
    font-size: 16px;
  }

}

/* Plugin promo card (overview.mdx): v4 card with a mono eyebrow and one
   solid Daisy Bush button. */
.zep-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 1.5rem 0 2.5rem;
  padding: 20px 24px;
  background: var(--zep-bg-card);
  border: 1px solid var(--zep-border-card);
  border-radius: var(--zep-radius-control);
}

.zep-promo > div {
  flex: 1 1 240px;
}

main article .zep-promo .zep-promo__eyebrow,
main article .zep-section-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--zep-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--zep-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--zep-accent);
}

/* The section eyebrow is an h2 (for heading navigation) styled as a v4
   eyebrow, so it resets the heading size, weight, and tracking. */
main article h2.zep-section-eyebrow {
  margin: 0 0 16px;
  padding: 0;
  line-height: 1.3;
  letter-spacing: var(--zep-tracking-eyebrow);
  font-size: 12px;
  font-weight: 500;
  color: var(--zep-accent);
}

main article .zep-section-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
}

main article .zep-promo .zep-promo__title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 500;
  color: var(--zep-text-default);
}

main article .zep-promo .zep-promo__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--zep-text-muted);
}

main article a.zep-promo__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: var(--zep-purple-700);
  border-radius: var(--zep-radius-control);
  text-decoration: none;
  transition: background var(--zep-duration) var(--zep-ease);
}

main article a.zep-promo__cta:hover {
  color: #ffffff;
  background: var(--zep-purple-800);
}
main article a.zep-promo__cta:focus-visible {
  color: #ffffff;
  background: var(--zep-purple-800); outline: none;
}

/* =========================================================================
   Functional rules (preserved)
   ========================================================================= */

/* Hide playground button. */
div:has(> div > a[id*="playground-button"]) {
  display: none;
}

/* Hide the third header element (legacy layout adjustment). */
main article > header > *:nth-child(3) {
  display: none;
}

/* =========================================================================
   Architecture diagram — dark-mode color remaps for inline SVG assets.
   Maps the diagrams' baked-in light fills/strokes to dark-friendly tones.
   ========================================================================= */
.dark .arch-diagram rect[fill="#FFFFFF"] {
  fill: var(--zep-bg-card);
}

.dark .arch-diagram rect[fill="#F4F2FC"] {
  fill: var(--zep-bg-tint);
}

.dark .arch-diagram rect[stroke="#E5E5E5"] {
  stroke: var(--zep-border-card);
}

.dark .arch-diagram rect[stroke="#421FCB"],
.dark .arch-diagram rect[stroke="#4226AA"] {
  stroke: var(--zep-purple-300);
}

.dark .arch-diagram text[fill="#2F2F2F"] {
  fill: var(--zep-text-default);
}

.dark .arch-diagram text[fill="#9CA3AF"] {
  fill: var(--zep-text-soft);
}

.dark .arch-diagram text[fill="#4226AA"],
.dark .arch-diagram line[stroke="#4226AA"],
.dark .arch-diagram polygon[fill="#4226AA"] {
  fill: var(--zep-purple-300);
  stroke: var(--zep-purple-300);
}

/* =========================================================================
   Build-with-Zep plugin promo slide-in (behavior in js/plugin-slidein.js).
   Non-blocking corner card. Positioned lower-LEFT on purpose: the lower-right
   corner holds the Kapa "Ask AI" widget. v4 card: white, 1px border, 6px
   radius, no shadow; mono eyebrow with a square marker.
   ========================================================================= */
#zep-plugin-slidein {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 9999;
  width: 340px;
  max-width: calc(100vw - 2.5rem);
  padding: 1rem 1.25rem 1.125rem;
  background: var(--zep-bg-card);
  color: var(--zep-text-default);
  border: 1px solid var(--zep-border-card);
  border-radius: var(--zep-radius-control);
  /* Enter state: nudged down and transparent; .is-visible animates it in. */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 200ms var(--zep-ease),
    transform 200ms var(--zep-ease);
}

#zep-plugin-slidein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.zep-slidein__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0.5rem;
  font-family: var(--zep-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--zep-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--zep-accent);
}

.zep-slidein__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
}

.zep-slidein__title {
  margin: 0 0 0.25rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.zep-slidein__body {
  margin: 0 0 0.875rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--zep-text-muted);
}

.zep-slidein__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: var(--zep-purple-700);
  border-radius: var(--zep-radius-control);
  text-decoration: none;
  transition: background var(--zep-duration) var(--zep-ease);
}

.zep-slidein__cta:hover {
  background: var(--zep-purple-800);
}
.zep-slidein__cta:focus-visible {
  background: var(--zep-purple-800); outline: none;
}

.zep-slidein__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--zep-text-soft);
  background: transparent;
  border: 0;
  border-radius: var(--zep-radius-chip);
  cursor: pointer;
}

.zep-slidein__close:hover {
  color: var(--zep-text-default);
  background: var(--zep-bg-tint);
}
.zep-slidein__close:focus-visible {
  color: var(--zep-text-default);
  background: var(--zep-bg-tint); outline: none;
}

@media (max-width: 480px) {

  #zep-plugin-slidein {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
  }

}

@media (prefers-reduced-motion: reduce) {

  #zep-plugin-slidein {
    transition: none;
    transform: none;
  }

}