/*fern-site-stylesheet*/@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/zep.docs.buildwithfern.com/8909904ab6c872eb994093482a88a28eca2cd95912d7b6fecd72103b0dc07edc/fonts/Inter-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/zep.docs.buildwithfern.com/7ea9d2f1274cebee837f0c6eebb426c18fbb2333a6b6da4d02ec5cf47db7fb8e/fonts/Inter-latin-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/zep.docs.buildwithfern.com/f3779f1efccc4bdcdf9c0a02ab95bf6bd092ed09c48c08cedc725889edd1d19f/fonts/Inter-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/zep.docs.buildwithfern.com/f9a06e79cd3a2a20951c0f0e28f66dd0e6d3fda73911d640a2125c8fcb78f21a/fonts/Inter-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Reckless Standard M';
    src: url('/_fern-files/zep.docs.buildwithfern.com/0c1a9589312df38778c65ad72fa525ef896fcb1f87b58b61d42fbbf0429812fe/fonts/RecklessStandardM-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Reckless Standard M';
    src: url('/_fern-files/zep.docs.buildwithfern.com/d0ce4d182a235bd4288ece53d882777470cd66273baac19563a30d8dc9cdae70/fonts/RecklessStandardM-RegularItalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Reckless Standard M';
    src: url('/_fern-files/zep.docs.buildwithfern.com/294bc1036ed768a9597757ac7b32eeddc247c799f20a1664fd472e055f15e84f/fonts/RecklessStandardM-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Reckless Standard M';
    src: url('/_fern-files/zep.docs.buildwithfern.com/26bd015611c3ecf96e2dd80a39d8bda487b01e6c7bb21a7afdd8cab7cb0362d3/fonts/RecklessStandardM-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: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Reckless Standard M', Georgia, Times New Roman, serif, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 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: #f7f6fa;
  --accent-2: #f4f2fa;
  --accent-3: #ede7fc;
  --accent-4: #e5dbfd;
  --accent-5: #dccefc;
  --accent-6: #d0bef8;
  --accent-7: #c1a9f3;
  --accent-8: #ae8ced;
  --accent-9: #4f2d7f;
  --accent-10: #603f92;
  --accent-11: #6e4ba5;
  --accent-12: #401c6e;

  --accent-a1: #f3f0ff60;
  --accent-a2: #ebe5ff60;
  --accent-a3: #e6dcffa0;
  --accent-a4: #dfd1ffc0;
  --accent-a5: #cbb4ffa0;
  --accent-a6: #0000ff20;
  --accent-a7: #4b01eb53;
  --accent-a8: #4f02e071;
  --accent-a9: #2b0165d2;
  --accent-a10: #2c0070bf;
  --accent-a11: #320082b3;
  --accent-a12: #2a015de3;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(97.6% 0.0048 299.1);
      --accent-2: oklch(96.4% 0.0106 299.1);
      --accent-3: oklch(93.9% 0.0294 299.1);
      --accent-4: oklch(91.1% 0.0468 299.1);
      --accent-5: oklch(87.8% 0.0637 299.1);
      --accent-6: oklch(83.7% 0.0822 299.1);
      --accent-7: oklch(78.2% 0.1064 299.1);
      --accent-8: oklch(71.1% 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.3% 0.1403 299.1);
      --accent-12: oklch(32.8% 0.1329 299.1);

      --accent-a1: color(display-p3 0.949 0.9412 1 / 0.375);
      --accent-a2: color(display-p3 0.8863 0.8549 1 / 0.25);
      --accent-a3: color(display-p3 0.8353 0.7843 1 / 0.375);
      --accent-a4: color(display-p3 0.7412 0.6588 1 / 0.375);
      --accent-a5: color(display-p3 0.4784 0.2902 1 / 0.25);
      --accent-a6: color(display-p3 0.2353 0 0.9216 / 0.236);
      --accent-a7: color(display-p3 0.2353 0.0039 0.8588 / 0.32);
      --accent-a8: color(display-p3 0.2549 0 0.8275 / 0.436);
      --accent-a9: color(display-p3 0.1294 0 0.3725 / 0.812);
      --accent-a10: color(display-p3 0.1412 0 0.4118 / 0.744);
      --accent-a11: color(display-p3 0.1647 0 0.4784 / 0.696);
      --accent-a12: color(display-p3 0.1294 0 0.3373 / 0.88);

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


.light, :root {
  --grayscale-1: #fcfdfc;
  --grayscale-2: #f8faf8;
  --grayscale-3: #eff1ef;
  --grayscale-4: #e7e9e7;
  --grayscale-5: #dfe2df;
  --grayscale-6: #d7dad7;
  --grayscale-7: #cccfcc;
  --grayscale-8: #b9bcb8;
  --grayscale-9: #898e87;
  --grayscale-10: #7f847d;
  --grayscale-11: #60655f;
  --grayscale-12: #1d211c;

  --grayscale-a1: #00550003;
  --grayscale-a2: #00490007;
  --grayscale-a3: #00200010;
  --grayscale-a4: #00160018;
  --grayscale-a5: #00180020;
  --grayscale-a6: #00140028;
  --grayscale-a7: #000f0033;
  --grayscale-a8: #040f0047;
  --grayscale-a9: #050f0078;
  --grayscale-a10: #040e0082;
  --grayscale-a11: #020a00a0;
  --grayscale-a12: #010600e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #898e87;
  --grayscale-track: #898e87;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.989 0.992 0.989);
      --grayscale-2: color(display-p3 0.974 0.98 0.973);
      --grayscale-3: color(display-p3 0.939 0.945 0.937);
      --grayscale-4: color(display-p3 0.907 0.914 0.905);
      --grayscale-5: color(display-p3 0.878 0.885 0.875);
      --grayscale-6: color(display-p3 0.846 0.855 0.843);
      --grayscale-7: color(display-p3 0.803 0.812 0.8);
      --grayscale-8: color(display-p3 0.727 0.738 0.723);
      --grayscale-9: color(display-p3 0.541 0.556 0.532);
      --grayscale-10: color(display-p3 0.5 0.515 0.491);
      --grayscale-11: color(display-p3 0.38 0.395 0.374);
      --grayscale-12: color(display-p3 0.117 0.129 0.111);

      --grayscale-a1: #00550003;
      --grayscale-a2: #00490007;
      --grayscale-a3: #00200010;
      --grayscale-a4: #00160018;
      --grayscale-a5: #00180020;
      --grayscale-a6: #00140028;
      --grayscale-a7: #000f0033;
      --grayscale-a8: #040f0047;
      --grayscale-a9: #050f0078;
      --grayscale-a10: #040e0082;
      --grayscale-a11: #020a00a0;
      --grayscale-a12: #010600e3;

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


.dark {
  --accent-1: #0f080b;
  --accent-2: #201019;
  --accent-3: #371729;
  --accent-4: #4c1536;
  --accent-5: #591d41;
  --accent-6: #6a2a4f;
  --accent-7: #833a64;
  --accent-8: #a74a7f;
  --accent-9: #d5479d;
  --accent-10: #c63890;
  --accent-11: #ff85d0;
  --accent-12: #fdd2e7;

  --accent-a1: #df000c06;
  --accent-a2: #fe4da717;
  --accent-a3: #ff51ae2f;
  --accent-a4: #fe33aa45;
  --accent-a5: #fd45b153;
  --accent-a6: #ff5cb864;
  --accent-a7: #ff6cbf7e;
  --accent-a8: #fe6dc0a4;
  --accent-a9: #fe53bbd4;
  --accent-a10: #ff46b8c4;
  --accent-a11: #ff85d0;
  --accent-a12: #ffd4e9fd;

  --accent-contrast: #fff;
  --accent-surface: #36162780;
  --accent-indicator: #d5479d;
  --accent-track: #d5479d;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(14.5% 0.0164 347.1);
      --accent-2: oklch(20% 0.0293 347.1);
      --accent-3: oklch(25.7% 0.0579 347.1);
      --accent-4: oklch(29.7% 0.0923 347.1);
      --accent-5: oklch(33.7% 0.0987 347.1);
      --accent-6: oklch(38.8% 0.1017 347.1);
      --accent-7: oklch(45.8% 0.1131 347.1);
      --accent-8: oklch(54.5% 0.1375 347.1);
      --accent-9: oklch(62.1% 0.1971 347.1);
      --accent-10: oklch(58% 0.1971 347.1);
      --accent-11: oklch(78.9% 0.1791 347.1);
      --accent-12: oklch(90.5% 0.0554 347.1);

      --accent-a1: color(display-p3 0.9647 0 0.0431 / 0.017);
      --accent-a2: color(display-p3 0.9961 0.3765 0.7137 / 0.082);
      --accent-a3: color(display-p3 1 0.3922 0.7216 / 0.168);
      --accent-a4: color(display-p3 1 0.2784 0.7176 / 0.245);
      --accent-a5: color(display-p3 1 0.349 0.7529 / 0.294);
      --accent-a6: color(display-p3 1 0.4353 0.7765 / 0.36);
      --accent-a7: color(display-p3 1 0.4863 0.7882 / 0.458);
      --accent-a8: color(display-p3 1 0.498 0.8 / 0.592);
      --accent-a9: color(display-p3 1 0.4039 0.7765 / 0.764);
      --accent-a10: color(display-p3 1 0.3608 0.7647 / 0.707);
      --accent-a11: color(display-p3 1 0.5804 0.8549 / 0.935);
      --accent-a12: color(display-p3 1 0.8627 0.9373 / 0.964);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1961 0.0941 0.1412 / 0.5);
      --accent-indicator: oklch(62.1% 0.1971 347.1);
      --accent-track: oklch(62.1% 0.1971 347.1);
    }
  }
}


.dark {
  --grayscale-1: #111111;
  --grayscale-2: #191919;
  --grayscale-3: #222222;
  --grayscale-4: #2a2a2a;
  --grayscale-5: #313131;
  --grayscale-6: #3a3a3a;
  --grayscale-7: #484848;
  --grayscale-8: #606060;
  --grayscale-9: #6e6e6e;
  --grayscale-10: #7b7b7b;
  --grayscale-11: #b4b4b4;
  --grayscale-12: #eeeeee;

  --grayscale-a1: #00000000;
  --grayscale-a2: #ffffff09;
  --grayscale-a3: #ffffff12;
  --grayscale-a4: #ffffff1b;
  --grayscale-a5: #ffffff22;
  --grayscale-a6: #ffffff2c;
  --grayscale-a7: #ffffff3b;
  --grayscale-a8: #ffffff55;
  --grayscale-a9: #ffffff64;
  --grayscale-a10: #ffffff72;
  --grayscale-a11: #ffffffaf;
  --grayscale-a12: #ffffffed;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.067);
      --grayscale-2: color(display-p3 0.098 0.098 0.098);
      --grayscale-3: color(display-p3 0.135 0.135 0.135);
      --grayscale-4: color(display-p3 0.163 0.163 0.163);
      --grayscale-5: color(display-p3 0.192 0.192 0.192);
      --grayscale-6: color(display-p3 0.228 0.228 0.228);
      --grayscale-7: color(display-p3 0.283 0.283 0.283);
      --grayscale-8: color(display-p3 0.375 0.375 0.375);
      --grayscale-9: color(display-p3 0.431 0.431 0.431);
      --grayscale-10: color(display-p3 0.484 0.484 0.484);
      --grayscale-11: color(display-p3 0.706 0.706 0.706);
      --grayscale-12: color(display-p3 0.933 0.933 0.933);

      --grayscale-a1: #00000000;
      --grayscale-a2: #ffffff09;
      --grayscale-a3: #ffffff12;
      --grayscale-a4: #ffffff1b;
      --grayscale-a5: #ffffff22;
      --grayscale-a6: #ffffff2c;
      --grayscale-a7: #ffffff3b;
      --grayscale-a8: #ffffff55;
      --grayscale-a9: #ffffff64;
      --grayscale-a10: #ffffff72;
      --grayscale-a11: #ffffffaf;
      --grayscale-a12: #ffffffed;

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

.light, :root {
  color-scheme: light;
  --accent: rgba(79, 45, 127, 1);
  --background: rgba(250, 250, 247, 1);
  --border: rgba(229, 224, 213, 1);
  --sidebar-background: rgba(250, 250, 247, 1);
  --header-background: rgba(250, 250, 247, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fafaf7;
}

.dark {
  color-scheme: dark;
  --accent: rgba(213, 71, 157, 1);
  --background: rgba(10, 10, 11, 1);
  --border: rgba(38, 38, 44, 1);
  --sidebar-background: rgba(10, 10, 11, 1);
  --header-background: rgba(10, 10, 11, 1);
  --card-background: rgba(21, 21, 27, 1);
  --theme-color: #0a0a0b;
}

/* =========================================================================
   Zep documentation theme — aligned to getzep.com
   Token values mirror www.getzep.com/src/app/globals.css (reskin
   foundations §3). Base colors and the Reckless Standard M (display) +
   PP Neue Montreal (body) fonts are wired in docs.yml; this file refines
   surfaces, headings, links, code, callouts, and tables to match the
   website's editorial feel.
   ========================================================================= */

:root {
  /* --- Brand: Daisy Bush family --- */
  --zep-primary: #4f2d7f;
  --zep-primary-hover: #3f2168;
  --zep-primary-medium: #5f3996;
  --zep-secondary: #b07d94; /* dusty rose */
  --zep-magenta: #d5479d; /* dark-mode accent / pink logo lockup */

  /* --- Surfaces (light) --- */
  --zep-bg-page: #fafaf7;
  --zep-bg-alt: #f4f2ec;
  --zep-bg-stage: #edeae3;
  --zep-bg-card: #ffffff;
  --zep-bg-card-soft: #f5f2ec;
  --zep-bg-purple-tint: #f4f2fc;
  --zep-bg-code: #f5f2ec;

  /* --- Text (light) --- */
  --zep-text-default: #1a1a1a;
  --zep-text-muted: #5a5a5a;
  --zep-text-soft: #8a8a8a;

  /* --- Borders (light) --- */
  --zep-border: #e5e0d5; /* warm soft border */
  --zep-border-strong: #c4c4c4;

  /* --- Code syntax (light) --- */
  --zep-code-fg: #2f2f2f;
  --zep-code-keyword: #3f2168;
  --zep-code-string: #5f3996;
  --zep-code-comment: #8b7e6f;

  /* --- Radii / shadow --- */
  --zep-radius-card: 12px;
  --zep-radius-button: 8px;
  --zep-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --zep-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* Active accent resolves per color scheme. */
  --zep-accent: var(--zep-primary);
  --zep-accent-hover: var(--zep-primary-hover);
}

.dark {
  --zep-bg-page: #0a0a0b;
  --zep-bg-alt: #15151b;
  --zep-bg-stage: #15151b;
  --zep-bg-card: #15151b;
  --zep-bg-card-soft: #1a1a22;
  --zep-bg-purple-tint: #1e1535;
  --zep-bg-code: #15151b;

  --zep-text-default: #f5f4f7;
  --zep-text-muted: #b4b2bd;
  --zep-text-soft: #8a8794;

  --zep-border: #26262c;
  --zep-border-strong: #3a3a44;

  --zep-code-fg: #e6e4ea;
  --zep-code-keyword: #c9a9f0;
  --zep-code-string: #d6a8df;
  --zep-code-comment: #8a8794;

  --zep-accent: var(--zep-magenta);
  --zep-accent-hover: var(--zep-primary-medium);
}

/* =========================================================================
   Typography — Reckless display feel
   Reckless reads best at regular/medium weight with tight tracking; Fern's
   default heading weight over-weights a serif (and would synthesize faux
   bold above 600). Pin content headings to medium with brand tracking.
   ========================================================================= */
main article h1,
main article h2,
main article h3,
main article h4 {
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--zep-text-default);
}

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

/* Italic emphasis in headings carries the brand accent, mirroring the
   website's italic display accents. */
main article h1 em,
main article h2 em,
main article h3 em {
  font-style: italic;
  color: var(--zep-accent);
}

/* =========================================================================
   Links
   ========================================================================= */
main article a {
  color: var(--zep-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

main article a:hover {
  color: var(--zep-accent-hover);
}
main article a:focus-visible {
  color: var(--zep-accent-hover); outline: none;
}

/* Heading links (e.g. changelog entry titles, which link to their permalink)
   inherit the accent color. In dark mode the accent is pink (--zep-magenta),
   which is low-contrast for large title text. Render these title links in the
   default heading color (white) in dark mode, keeping an accent hover so they
   still read as links. */
.dark main article h1 a,
.dark main article h2 a,
.dark main article h3 a,
.dark main article h4 a,
.dark main article a h1,
.dark main article a h2,
.dark main article a h3,
.dark main article a h4 {
  color: var(--zep-text-default);
}

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

/* =========================================================================
   Code — warm editorial tint
   ========================================================================= */
:not(pre) > code {
  background: var(--zep-bg-code);
  border: 1px solid var(--zep-border);
  border-radius: var(--zep-radius-code, 4px);
  color: var(--zep-code-keyword);
  font-variant-ligatures: none;
}

.dark :not(pre) > code {
  color: var(--zep-code-keyword);
}

/* Code block frame on the warm surface. */
main article pre {
  background: var(--zep-bg-code);
  border: 1px solid var(--zep-border);
  border-radius: var(--zep-radius-card);
}

/* =========================================================================
   Callouts / cards — white cards on warm soft borders, brand radius.
   ========================================================================= */
.fern-card,
.fern-callout {
  border-radius: var(--zep-radius-card);
  border-color: var(--zep-border);
}

.fern-card {
  background: var(--zep-bg-card);
  box-shadow: var(--zep-shadow-sm);
  transition:
    transform var(--zep-duration, 150ms) ease,
    box-shadow var(--zep-duration, 150ms) ease;
}

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

/* =========================================================================
   Announcement banner.
   Fern paints it with a solid `--accent` fill (a `bg-(color:--accent)` div
   that is the first content child of `header.fern-background-image`). The
   design system reserves solid #4f2d7f / accent for foreground + small
   controls; background regions use surface tints. Repaint the banner as the
   light purple-tint surface with default text and a primary-colored link —
   mirroring the website's tinted "pill" treatment. Targeted by the banner's
   `--accent-contrast` text class (unique to it within the header).
   ========================================================================= */
header.fern-background-image > div[class*="--accent-contrast"] {
  background-color: var(--zep-bg-purple-tint) !important;
  color: var(--zep-text-default) !important;
  border-bottom: 1px solid var(--zep-border);
}

header.fern-background-image > div[class*="--accent-contrast"] a,
header.fern-background-image > div[class*="--accent-contrast"] .fern-mdx-link {
  color: var(--zep-accent) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* =========================================================================
   Buttons + primary interactive elements — brand purple (light),
   pink (dark).
   ========================================================================= */
.fern-button-primary,
.fern-link-primary {
  background-color: var(--zep-accent) !important;
  border-color: var(--zep-accent) !important;
}

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

/* Secondary buttons are neutral (white card surface, soft border, default
   text); hover darkens the border. No solid-primary fill — matches the
   Button primitive's `secondary` variant. */
.fern-button-secondary {
  background-color: var(--zep-bg-card) !important;
  border-color: var(--zep-border-strong) !important;
  color: var(--zep-text-default) !important;
}

.fern-button-secondary:hover {
  background-color: var(--zep-bg-card) !important;
  border-color: var(--zep-text-default) !important;
  color: var(--zep-text-default) !important;
}
.fern-button-secondary:focus-visible {
  background-color: var(--zep-bg-card) !important;
  border-color: var(--zep-text-default) !important;
  color: var(--zep-text-default) !important; outline: none;
}

/* =========================================================================
   Inputs — focus ring in the active accent.
   ========================================================================= */
.fern-input:focus,
.fern-textarea:focus {
  border-color: var(--zep-accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--zep-accent), transparent 80%) !important;
}

/* =========================================================================
   Tables — warm header band, soft row borders.
   ========================================================================= */
.fern-table th {
  background-color: var(--zep-bg-card-soft);
  border-bottom: 2px solid var(--zep-border);
}

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

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

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

/* =========================================================================
   Hero background — very subtle brand wash over the warm page surface.
   ========================================================================= */
.fern-background-image {
  background-image: linear-gradient(
    135deg,
    var(--zep-bg-page) 0%,
    var(--zep-bg-purple-tint) 100%
  );
}

/* =========================================================================
   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-purple-tint);
}

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

.dark .arch-diagram rect[stroke="#421FCB"],
.dark .arch-diagram rect[stroke="#4226AA"] {
  stroke: #a78bce;
}

.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: #a78bce;
  stroke: #a78bce;
}

/* =========================================================================
   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. Uses the --zep-* tokens above so it
   tracks light/dark automatically. Placeholder styling — restyle freely.
   ========================================================================= */
#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);
  border-radius: var(--zep-radius-card);
  box-shadow: var(--zep-shadow-md);
  /* Enter state: nudged down and transparent; .is-visible animates it in. */
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

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

.zep-slidein__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zep-accent);
}

.zep-slidein__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

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

.zep-slidein__cta {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  background: var(--zep-accent);
  border-radius: var(--zep-radius-button);
  text-decoration: none;
}

.zep-slidein__cta:hover {
  background: var(--zep-accent-hover);
}
.zep-slidein__cta:focus-visible {
  background: var(--zep-accent-hover); 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-button);
  cursor: pointer;
}

.zep-slidein__close:hover {
  color: var(--zep-text-default);
  background: var(--zep-bg-card-soft);
}
.zep-slidein__close:focus-visible {
  color: var(--zep-text-default);
  background: var(--zep-bg-card-soft); 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;
  }

}