/*fern-site-stylesheet*/@font-face {
    font-family: 'Lumen Sans';
    src: url('/docs/_fern-files/ydc.docs.buildwithfern.com/bf929dd33997c343478905ebe48834cc7b4da756dfbe377fb5e43482b89b860b/assets/fonts/lumen_sans-400-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lumen Sans';
    src: url('/docs/_fern-files/ydc.docs.buildwithfern.com/7f6443295b0168200b35601d36bf9a50d6ee315e889b8aebbe06fc2e82222fc1/assets/fonts/lumen_sans-500-webfont.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lumen Sans';
    src: url('/docs/_fern-files/ydc.docs.buildwithfern.com/705d80834bfc74a958e723f98e079b775e4dfd61d8c3bec33203e723cf2ed887/assets/fonts/lumen_sans-600-webfont.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 60px;
  --header-height-real: 60px;
  --mobile-header-height-real: 60px;
  --content-width: 800px;
  --sidebar-width: 250px;
  --page-width: 100vw;
  --logo-height: 28px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Lumen Sans', 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: #fdfdff;
  --accent-2: #f7f9ff;
  --accent-3: #eef2fe;
  --accent-4: #e1e9ff;
  --accent-5: #d3deff;
  --accent-6: #c2d0ff;
  --accent-7: #acbdfa;
  --accent-8: #8fa2f1;
  --accent-9: #222b5f;
  --accent-10: #333f75;
  --accent-11: #5060a8;
  --accent-12: #222b5f;

  --accent-a1: #0000ff02;
  --accent-a2: #0040ff08;
  --accent-a3: #003cf011;
  --accent-a4: #0044ff1e;
  --accent-a5: #0040ff2c;
  --accent-a6: #003bff3d;
  --accent-a7: #0035f053;
  --accent-a8: #002ce070;
  --accent-a9: #000a46dd;
  --accent-a10: #000f53cc;
  --accent-a11: #001880af;
  --accent-a12: #000a46dd;

  --accent-contrast: #fff;
  --accent-surface: #f5f8ffcc;
  --accent-indicator: #222b5f;
  --accent-track: #222b5f;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.002 272.5);
      --accent-2: oklch(98.2% 0.0086 272.5);
      --accent-3: oklch(96.1% 0.0174 272.5);
      --accent-4: oklch(93.5% 0.0347 272.5);
      --accent-5: oklch(90.4% 0.0522 272.5);
      --accent-6: oklch(86.4% 0.0713 272.5);
      --accent-7: oklch(80.7% 0.0884 272.5);
      --accent-8: oklch(73% 0.1166 272.5);
      --accent-9: oklch(31.2% 0.0925 272.5);
      --accent-10: oklch(38.5% 0.0925 272.5);
      --accent-11: oklch(51% 0.1166 272.5);
      --accent-12: oklch(31.3% 0.0925 272.5);

      --accent-a1: color(display-p3 0.0196 0.0196 1 / 0.008);
      --accent-a2: color(display-p3 0.0196 0.2667 0.8784 / 0.032);
      --accent-a3: color(display-p3 0.0078 0.1922 0.8784 / 0.063);
      --accent-a4: color(display-p3 0.0039 0.2471 0.9333 / 0.114);
      --accent-a5: color(display-p3 0.0039 0.2196 0.9294 / 0.165);
      --accent-a6: color(display-p3 0.0039 0.1922 0.9333 / 0.228);
      --accent-a7: color(display-p3 0.0039 0.1647 0.8784 / 0.314);
      --accent-a8: color(display-p3 0.0039 0.1333 0.8157 / 0.424);
      --accent-a9: color(display-p3 0 0.0314 0.2549 / 0.859);
      --accent-a10: color(display-p3 0 0.051 0.298 / 0.793);
      --accent-a11: color(display-p3 0 0.0745 0.4667 / 0.675);
      --accent-a12: color(display-p3 0 0.0314 0.2549 / 0.859);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9608 0.9725 1 / 0.8);
      --accent-indicator: oklch(31.2% 0.0925 272.5);
      --accent-track: oklch(31.2% 0.0925 272.5);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

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


.dark {
  --accent-1: #1d2230;
  --accent-2: #1f2436;
  --accent-3: #26305c;
  --accent-4: #2b3776;
  --accent-5: #324088;
  --accent-6: #3a4997;
  --accent-7: #4354aa;
  --accent-8: #4c5fc4;
  --accent-9: #5368ee;
  --accent-10: #4e61c6;
  --accent-11: #9ab2ff;
  --accent-12: #d6e1ff;

  --accent-a1: #0023fd0d;
  --accent-a2: #003cfe14;
  --accent-a3: #3259fd41;
  --accent-a4: #3b5bff5f;
  --accent-a5: #4564ff74;
  --accent-a6: #506dfe86;
  --accent-a7: #5874ff9c;
  --accent-a8: #5c76ffba;
  --accent-a9: #566dfeec;
  --accent-a10: #5d77febd;
  --accent-a11: #9ab2ff;
  --accent-a12: #d6e1ff;

  --accent-contrast: #fff;
  --accent-surface: #1d264780;
  --accent-indicator: #5368ee;
  --accent-track: #5368ee;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(25.3% 0.0282 271.8);
      --accent-2: oklch(26.5% 0.0346 271.8);
      --accent-3: oklch(32.3% 0.0796 271.8);
      --accent-4: oklch(36.4% 0.108 271.8);
      --accent-5: oklch(40.1% 0.1206 271.8);
      --accent-6: oklch(43.7% 0.1272 271.8);
      --accent-7: oklch(47.8% 0.1381 271.8);
      --accent-8: oklch(52.5% 0.1577 271.8);
      --accent-9: oklch(57.7% 0.2016 271.8);
      --accent-10: oklch(53.3% 0.1577 271.8);
      --accent-11: oklch(78.2% 0.1423 271.8);
      --accent-12: oklch(91.1% 0.049 271.8);

      --accent-a1: color(display-p3 0 0.1333 1 / 0.046);
      --accent-a2: color(display-p3 0.0275 0.2431 0.9961 / 0.074);
      --accent-a3: color(display-p3 0.2353 0.3647 1 / 0.239);
      --accent-a4: color(display-p3 0.2588 0.3686 1 / 0.354);
      --accent-a5: color(display-p3 0.3059 0.4078 1 / 0.432);
      --accent-a6: color(display-p3 0.3451 0.4392 0.9961 / 0.5);
      --accent-a7: color(display-p3 0.3765 0.4706 1 / 0.583);
      --accent-a8: color(display-p3 0.3922 0.4706 1 / 0.702);
      --accent-a9: color(display-p3 0.3686 0.4392 1 / 0.886);
      --accent-a10: color(display-p3 0.3961 0.4745 0.9961 / 0.712);
      --accent-a11: color(display-p3 0.6353 0.7098 1 / 0.973);
      --accent-a12: color(display-p3 0.8588 0.8941 1 / 0.987);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1176 0.149 0.2667 / 0.5);
      --accent-indicator: oklch(57.7% 0.2016 271.8);
      --accent-track: oklch(57.7% 0.2016 271.8);
    }
  }
}


.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(34, 43, 95, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(231, 232, 236, 1);
  --sidebar-background: rgba(249, 249, 251, 1);
  --header-background: rgba(249, 249, 251, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(83, 104, 238, 1);
  --background: rgba(34, 34, 37, 1);
  --border: rgba(58, 58, 63, 1);
  --sidebar-background: rgba(16, 16, 18, 1);
  --header-background: rgba(16, 16, 18, 1);
  --card-background: rgba(34, 34, 37, 1);
  --theme-color: #222225;
}

/* Canvas Body Theme */
:root [data-body-theme="canvas"] .canvas-wrapper {
  display: flex;
  width: 100%;
  overflow: auto;
  height: 100%;
  border-radius: 16px 16px 16px 16px;
  justify-content: center;
  align-items: flex-start;
  margin-right: 12px;
  margin-bottom: 12px;
  height: calc(100vh - var(--header-height-real) - 12px);
  border: 1px solid var(--border);
  background-color: var(--card-background);
}

:root [data-body-theme="canvas"] body {
  overflow: hidden;
}


:root [data-body-theme="canvas"] #fern-toc {
  position: sticky;
  max-height: calc(100vh - var(--header-height-real) - 12px);
  overflow-y: auto;
  overflow-x: hidden;
  top: 0;
}

:root [data-body-theme="canvas"] #fern-toc:has(> *) {
  margin-right: 12px;
}

:root [data-body-theme="canvas"] .fern-layout-guide,
:root [data-body-theme="canvas"] .fern-layout-overview {
  width: 100%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

:root [data-body-theme="canvas"] .fern-layout-reference {
  width: 100%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

/* The sticky changelog day label offsets its top by the header height by default
   (window scroll). On canvas the scroll container already starts below the fixed
   header, so zero the offset to keep the date from pinning too early. */
:root [data-body-theme="canvas"] {
  --fern-changelog-sticky-top: 0px;
}

/* ============================================================================
   CSS Variables
   ============================================================================ */

:root {
    /* The rounded rectangle border around a page color */
    --Docs-Canvas-Border: light-dark(#e7e8ec, #292a2d);
    --Docs-Canvas-Background: light-dark(#ffffff, #222225);

    /* The separator lines found within the api reference  */
    --Docs-Content-Line-Line: light-dark(#f0f0f3, #3a3a3f);

    --Border-2: light-dark(#f0f0f3, #292a2d);
    --Border-3: light-dark(#e7e8ec, #3a3a3f);

    /* The background of the docs outside of the rounded rectange page. This same color is used in the docs.yml colors.sidebar-background and colors.header-background */
    --Console-Sidebar-Background-Rest: light-dark(#f9f9fb, #101012);

    --Foreground1: light-dark(#101012, #ffffff);
    --Foreground2: light-dark(#62636b, #cdced6);
    --Foreground3: light-dark(#81828c, #8c8d97);
    --Accent-Text: light-dark(#222b5f, #acbdfa);

    /* Badges */
    --Docs-Badge-Subtle-Background-Grayscale: light-dark(#f0f0f3, #3a3a3f);
    --Docs-Badge-Subtle-Foreground-Grayscale: light-dark(#62636b, #babbc5);
    --Docs-Badge-Subtle-Background-Red: light-dark(#ffebe9, #661717);
    --Docs-Badge-Subtle-Foreground-Red: light-dark(#d3232c, #f8a8a0);
    --Docs-Badge-Subtle-Background-Green: light-dark(#e1f8ec, #0c3d2a);
    --Docs-Badge-Subtle-Foreground-Green: light-dark(#008254, #75d3a8);
    --Docs-Badge-Subtle-Background-Amber: light-dark(#f9dd6d, #4c3902);
    --Docs-Badge-Subtle-Foreground-Amber: light-dark(#7a6306, #f7d13c);
    --Docs-Badge-Subtle-Background-Accent: light-dark(#eef2fe, #4757c9);
    --Docs-Badge-Subtle-Foreground-Accent: light-dark(#4757c9, #d3deff);

    --Docs-Scrollbar-Thumb: light-dark(#81828c, #8c8d97);

    --Docs-Segmented-Control-Background-On: light-dark(#ffffff, #3a3a3f);

    /* Sidebar */
    --Docs-Sidebar-Nav-Item-Background-Hover: light-dark(#f0f0f3, #292a2d);
    --Docs-Sidebar-Nav-Item-Background-Active: light-dark(#e7e8ec, #303135);

    --Docs-Sidebar-Search-Bar-Background-Rest: light-dark(#ffffff, #222225);

    /* Callouts */
    --Docs-Callout-Background: light-dark(#f9f9fb, #292a2d);

    --Docs-Callout-Icon-Foreground-Warning: light-dark(#b89408, #f5c60b);
    --Docs-Callout-Icon-Foreground-Success: light-dark(#00ad76, #10b981);
    --Docs-Callout-Icon-Foreground-Error: light-dark(#e13237, #ef4444);
    --Docs-Callout-Icon-Foreground-Launch: light-dark(#222b5f, #acbdfa);
    --Docs-Callout-Icon-Foreground-Tip: light-dark(#00ad76, #10b981);
    --Docs-Callout-Icon-Foreground-Check: light-dark(#00ad76, #10b981);

    /* Buttons */
    --Docs-Navbar-Button-Outline-Primary-Background-Rest: light-dark(
        #ffffff,
        rgba(255, 255, 255, 0.12)
    );
    --Docs-Navbar-Button-Outline-Primary-Background-Hover: light-dark(
        #f0f0f3,
        rgba(255, 255, 255, 0.2)
    );
    --Docs-Navbar-Button-Outline-Primary-Background-Pressed: light-dark(
        #e7e8ec,
        rgba(255, 255, 255, 0.16)
    );

    --Docs-Navbar-Button-Outline-Primary-Border-Rest: light-dark(
        #e7e8ec,
        #3a3a3f
    );
    --Docs-Navbar-Button-Outline-Primary-Border-Hover: light-dark(
        #e7e8ec,
        #47474e
    );
    --Docs-Navbar-Button-Outline-Primary-Border-Pressed: light-dark(
        #e7e8ec,
        #47474e
    );

    --Docs-Navbar-Button-Outline-Secondary-Background-Rest: light-dark(
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0)
    );
    --Docs-Navbar-Button-Outline-Secondary-Background-Hover: light-dark(
        #f0f0f3,
        rgba(255, 255, 255, 0.12)
    );
    --Docs-Navbar-Button-Outline-Secondary-Background-Pressed: light-dark(
        #e7e8ec,
        rgba(255, 255, 255, 0.16)
    );

    --Docs-Navbar-Button-Outline-Secondary-Border-Rest: light-dark(
        #e7e8ec,
        #292a2d
    );
    --Docs-Navbar-Button-Outline-Secondary-Border-Hover: light-dark(
        #e7e8ec,
        #292a2d
    );
    --Docs-Navbar-Button-Outline-Secondary-Border-Pressed: light-dark(
        #e7e8ec,
        #292a2d
    );

    --Docs-Ask-AI-Button-Background-Rest: light-dark(#FFFFFF, #222225);
    --Docs-Ask-AI-Button-Background-Hover: light-dark(#F0F0F3, #303135);

    --Docs-Content-TabGroup-Background: light-dark(#f5f5f6, #222225);

    --card-border-hover: light-dark(#cdced6, #62636b);

    /* Layout */
    --border-radius: 16px;
    --button-shadow: light-dark(
        0 3px 3px 0 rgba(18, 22, 39, 0.01),
        0 1px 2px 0 rgba(18, 22, 39, 0.01),
        0 3px 3px 0 rgba(255, 255, 255, 0.01),
        0 1px 2px 0 rgba(255, 255, 255, 0.01)
    );
    --shadow-color: rgba(18, 22, 39, 0.01);
    --shadow-color-mid: rgba(18, 22, 39, 0.02);
    --canvas-shadow: light-dark(
        0 16px 10px 0 var(--shadow-color),
        0 7px 7px 0 var(--shadow-color-mid),
        0 16px 10px 0 var(--shadow-color),
        0 7px 7px 0 var(--shadow-color-mid),
        0 2px 4px 0 var(--shadow-color-mid)
    );
    --card-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.03);
    --card-shadow-hover:
        0 8px 5px 0 rgba(18, 22, 39, 0.01), 0 3px 3px 0 rgba(18, 22, 39, 0.02),
        0 1px 2px 0 rgba(18, 22, 39, 0.02);

    color-scheme: light dark;
}

/* ============================================================================
   Base Styles
   ============================================================================ */

html,
main {
    background-color: var(--Console-Sidebar-Background-Rest) !important;
}

body {
    overflow: hidden;
}

/* Separator lines in api reference */
.bg-border-default {
    background-color: var(--Docs-Content-Line-Line);
}

/* The buttons in API requests and responses that say things like "Show x Properties" */
.fern-collapsible-card {
    border-color: var(--Border-3);
}

/* Border for API reference error codes and general page feedback buttons */
.border-border-default {
    border-color: var(--Border-3);
}

/*  Make sure the SSE event at the bottom of the box has rounded rectangles to so it doesnt crop the boxes border */
div.group.relative:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Make sure the API request and response snippet are 24px from the top of the screen */
@media (width >=48rem) {

    [data-theme="default"]
        .fern-layout-reference-content[data-kind="api"]
        .fern-layout-reference-aside {
        top: 24px;
    }

}

/* ============================================================================
   Announcement Banner
   ============================================================================ */

#fern-announcement {
    background-color: #4a5ee0;
}

#fern-announcement > div {
    min-height: unset !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    justify-content: center;
    position: relative;
    color: #fcfcfc;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

#fern-announcement a {
    color: #fcfcfc !important;
    text-decoration: underline !important;
}

#fern-announcement button {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    width: 32px !important;
    height: 32px !important;
    background-color: #4a5ee0 !important;
    border-radius: 8px !important;
    color: #fcfcfc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}

#fern-announcement button svg {
    color: #fcfcfc !important;
    stroke: #fcfcfc !important;
}

/* ============================================================================
   Layout Components
   ============================================================================ */

.fern-header-content {
    padding-right: 12px;
}

#fern-header {
    border-color: transparent !important;
}

/* Content Canvas */
.canvas-wrapper {
    display: flex;
    width: 100%;
    overflow: auto;
    height: 100%;
    border-radius: 16px 16px 16px 16px !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin-right: 12px !important;
    margin-bottom: 12px !important;
    height: calc(100vh - var(--header-height) - 14px) !important;
    border: 1px solid var(--Docs-Canvas-Border) !important;
    margin-top: 2px !important;
}

@media (width < 64rem) {

    .canvas-wrapper {
        margin-left: 12px;
        height: calc(100vh - var(--header-height) - 14px) !important;
    }

}

.toc-mobile {
    right: calc(var(--spacing) * 4 + 12px) !important;
}

.fern-layout-guide,
.fern-layout-overview,
.fern-layout-reference {
    width: 100% !important;
    border: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

@media (width < 48rem) {

    .fern-layout-reference {
        margin-right: 0px !important;
    }

}

.fern-layout-footer {
    margin: unset;
    padding: 48px 0px;
    margin-block: unset;
    align-items: center !important;
}

/* Table of Contents */
#fern-toc {
    position: sticky;
    height: calc(100vh - var(--header-height) - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    top: 0;
    width: var(--spacing-sidebar-width) !important;
    flex-shrink: 0;
}

:root [data-body-theme="canvas"] #fern-toc:has(> *) {
    margin-right: 12px;
}

/* Changes the color of the table of contents links to an accessible accent color */
a.block.break-words.text-sm.transition-colors.hover\:transition-none.text-\(color\:\-\-accent-a9\).font-bold.tracking-tight {
    color: var(--Accent-Text) !important;
    font-weight: 500 !important;
}

/* Line Styling */
ul.toc-root.not-prose::after {
    background-color: var(--Accent-Text);
}

/* ============================================================================
   Typography Styling
   ============================================================================ */

/* Heading Styling */
.fern-page-heading.text-balance.break-words {
    font-family: "Lumen Sans", sans-serif !important;
    font-weight: 500 !important;
}

/* Heading Styling for H2 */
.prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-family: "Lumen Sans", sans-serif !important;
    font-weight: 500 !important;
}

/* Heading Styling for H3 */
.prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    font-family: "Lumen Sans", sans-serif !important;
    font-weight: 500 !important;
}

/* Breadcrumb Styling */
.fern-breadcrumb-item {
    color: var(--Accent-Text);
    font-weight: var(--font-weight-medium) !important;
}

/* Link Styling */
.fern-mdx-link {
    color: var(--Accent-Text);
}

/* Code Styling */
p code {
    color: var(--Accent-Text);
}

/* ============================================================================
   Horizontal Tabs
   ============================================================================ */

/* Tab buttons follow the Figma Topbar spec (API Docs Q2, node 6202-4840):
   16px icons, SF Pro Medium 14px/20px with 0 letter-spacing, 16px/9px
   padding, 10px radius, 8px gaps, active pill rgba(25,25,25,0.05), text
   #202020 active and #646464 inactive. Figma reports SF Pro Medium as
   weight 510 (its variable-font axis position); the web header renders the
   system font stack, where Chromium rounds any weight above 500 up to 600
   (Semibold). 500 is the correct CSS translation of SF Pro Medium. */
[data-theme="default"]#fern-header [role="tablist"] {
    gap: 8px;
    /* The tabs are centered by the header grid, so when the first column is
       tight this margin is the only guaranteed gap between the search bar and
       the first tab. */
    margin-inline: 8px;
    line-height: 20px;
}

[data-theme="default"]#fern-header [data-radix-collection-item] {
    padding: 9px 16px;
    gap: 8px;
    border-radius: 10px;
    height: auto;
    font-size: 14px;
    font-weight: 500 !important;
    letter-spacing: 0;
    color: light-dark(#646464, #cdced6);
}

/* Fern wraps each tab icon in a span.fern-file-icon.size-5 (20px) box.
   The Figma spec is a fixed 16px icon box, so shrink the wrapper to match
   the 16px svg and center it — otherwise the icon floats in a 20px box and
   the 8px gap reads as 12px with the glyph sitting 2px high. */
[data-theme="default"]#fern-header [data-radix-collection-item] .fern-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    /* Fern ships this wrapper with margin-right: 8px; the tab's 8px flex gap
       owns the spacing per the Figma spec, so the margin would double it. */
    margin-right: 0;
}

[data-theme="default"]#fern-header [data-radix-collection-item] svg {
    width: 16px;
    height: 16px;
}

[data-theme="default"]#fern-header [data-radix-collection-item]:hover {
    background-color: var(--Docs-Sidebar-Nav-Item-Background-Hover);
}
[data-theme="default"]#fern-header [data-radix-collection-item]:focus-visible {
    background-color: var(--Docs-Sidebar-Nav-Item-Background-Hover);
}

[data-theme="default"]#fern-header [data-radix-collection-item]:after {
    display: none !important;
}

[data-theme="default"]#fern-header
    [data-radix-collection-item][data-state="active"] {
    color: light-dark(#202020, #ffffff);
    background-color: light-dark(
        rgba(25, 25, 25, 0.05),
        var(--Docs-Sidebar-Nav-Item-Background-Active)
    );
    font-weight: 500 !important;
}

.text-\(color\:--grayscale-a11\).m-0.mb-3.text-sm.font-medium {
    display: none !important;
}

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

/* Hide Changelog icon */
a[href="/docs/additional-resources/changelog"] svg.lucide-history {
  display: none;
}

/* Mobile sidebar tab switcher items: the 24px icon box centers the 20px
   .fern-file-icon wrapper, but Fern renders the svg at 16px and the wrapper
   is block, so the glyph floats top-left of the box instead of centering.
   Center the svg in the wrapper like the header tabs. */
#fern-sidebar-scroll-area .fern-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

#fern-sidebar {
    border-right-width: 0 !important;
}

.fern-sidebar-link {
    color: var(--Foreground2);
}

.fern-sidebar-link[data-state="active"] {
    /* When a page is highlighted in the sidebar, this is the color of the rounded rectangle */
    background-color: var(--Docs-Sidebar-Nav-Item-Background-Active);
    color: var(--Foreground1);
}

@media (hover: hover) {
    .fern-sidebar-link:hover {
        background-color: var(--Docs-Sidebar-Nav-Item-Background-Hover);
        color: var(--Foreground1);
    }

    .fern-sidebar-link:hover[data-state="active"] {
        background-color: var(--Docs-Sidebar-Nav-Item-Background-Active);
        color: var(--Foreground1);
    }
}

.fern-sidebar-heading.fern-sidebar-level-0 {
    margin-bottom: 0px !important;
}

/* Sidebar section headers that are collapsible (technically buttons) */
.fern-sidebar-link.fern-sidebar-level-1.\!text-body.font-semibold {
    font-size: var(--text-xs) !important;
    line-height: var(--line-height-xs) !important;
    color: var(--Foreground1);
}

/* Sidebar section headers */
.fern-sidebar-heading-content {
    font-size: var(--text-xs) !important;
    line-height: var(--line-height-xs) !important;
    color: var(--Foreground1);
}

/* ============================================================================
   Search Input
   ============================================================================ */

#fern-search-button {

    background-color: var(--Docs-Sidebar-Search-Bar-Background-Rest);
    box-shadow: var(--button-shadow);
    border: 1px solid var(--Border-3);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--Foreground3);
    outline: none;
    transition: border-color 0.2s ease;

    svg {
        stroke: var(--Foreground1);
    }

    .fern-kbd {
        color: var(--Foreground1);
    }

    &:focus {
        /* The color of the search bar outline when its selected. It shouldnt change when its focused on */
        border-color: var(--Border-3);
        box-shadow: 0 0 0 2px rgba(231, 232, 236, 0.1);
    }

    &::placeholder {
        color: var(--Foreground1);
        opacity: 0.6;
    }

}

/* Change margin top of the search button (targets parent div) */
div:has(#fern-search-button) {
    margin-top: 0px;
}

/* Header grid at 74.5rem and up, 2 columns: the first reserves the search
   bar's zone (sidebar width minus the header's 28px left padding, plus the
   208px bar and an 8px gutter) so the centered tabs never overlap the bar,
   and the second holds the right-side group at its content size so
   NavbarLinks never spills under the tabs. The tabs themselves live in
   .fern-tabs-overlay, which centers them on the main content window at
   every viewport. The full Figma-sized header needs 1188px, so below
   74.5rem the compact variant at the bottom of this file takes over. In
   production Fern.Search also renders the Ask AI button in the search zone;
   the Ask AI budget block widens these column floors for it with
   :has(#fern-ask-ai-button), which never matches on localhost. */
#fern-header .fern-header-desktop {
    grid-template-columns: minmax(calc(var(--spacing-sidebar-width) + 216px - 28px), 1fr)
        auto;
}

/* The tabs float above the grid, centered on the main content window: the
   canvas below the header spans [sidebar width, viewport - 12px], so the
   overlay spans exactly that horizontal zone and centers its content. The
   overlay ignores pointer events so clicks on its empty sides reach the
   search bar and NavbarLinks; the nav inside re-enables them. Top/bottom 0
   centers on the same vertical midpoint as the grid (the 12px paddings are
   symmetric). */
#fern-header .fern-tabs-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--spacing-sidebar-width);
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#fern-header .fern-tabs-overlay > nav {
    pointer-events: auto;
}

/* The header search bar. In flow inside the header grid's first column, with
   a margin that pins its left edge to the sidebar width, aligned with the
   main content column below the header at every viewport. 208px per the
   Figma spec; it only shrinks when the narrow-viewport grid floor above
   forces the first column below its wide-viewport floor. 28px is the
   header's left padding and 83px is the logo's rendered width at its fixed
   28px height. In production the wrap also carries the Ask AI button, so
   the budget rules in the Ask AI section below size the wrap and the bar
   yields the button's share inside it. */
#fern-header .fern-header-search-wrap {
    margin-left: calc(var(--spacing-sidebar-width) - 28px - 83px);
    min-width: 0;
}

@media (width >= 64rem) {

    #fern-header .fern-header-search-wrap {
        width: 256px;
        flex: 0 1 auto;
        min-width: 136px;
    }

    #fern-header .fern-header-search-bar {
        width: 100%;
        /* Grow to fill the wrap when the Ask AI button is absent (localhost)
           and yield to it when Fern renders the button in the same flex row
           in production. The Ask AI budget block below sizes the wrap for
           both cases. */
        flex: 1 1 auto;
        min-width: 112px;
    }

}

/* Wide-tier collision guard (no Ask AI button: localhost and PR previews).
   The centered tabs swing left toward the search zone as the viewport
   narrows, so from 74.5rem the wrap follows the same
   (100vw - 748px)/2 cap the Ask AI budget derives—without it the fixed
   256px width above pushed the bar 18px into the Documentation tab at the
   1192px floor, an overlap that faded out by ~1228px. Above ~1350px the cap
   lifts and the wrap is the full 256px again. */
@media (width >= 74.5rem) {

    #fern-header .fern-header-search-wrap {
        width: min(256px, calc((100vw - 748px) / 2));
    }

}

/* Ask AI Button */
#fern-ask-ai-button {
    border-radius: 12px;
    color: var(--Accent-Text);
    background-color: var(--Docs-Ask-AI-Button-Background-Rest);
}

#fern-ask-ai-button:hover {
    background-color: var(--Docs-Ask-AI-Button-Background-Hover);
    color: var(--Accent-Text);
}
#fern-ask-ai-button:focus-visible {
    background-color: var(--Docs-Ask-AI-Button-Background-Hover);
    color: var(--Accent-Text);
}

#fern-ask-ai-button:active {
    background-color: var(--Docs-Ask-AI-Button-Background-Hover);
    color: var(--Accent-Text);
}

/* Ask AI responsive budget. Fern renders #fern-ask-ai-button inside
   Fern.Search's flex row, to the right of the search bar: 83px with its
   label plus the row's 8px gap, 37px icon-only. The button only exists in
   production—the AI search backend attaches to hosted builds, not `fern
   dev`—so localhost must stay pixel-identical and every width here is
   scoped with :has(#fern-ask-ai-button). The bar's flex rule above makes it
   yield the button's share inside the wrap, so the wrap width is the whole
   search zone and the formulas below keep its right edge 8px clear of the
   centered tab group. */

/* The labeled button fits the full-sized header from 85rem; below that it
   drops to icon-only so the zone loses 45px instead of 91px. The mobile
   header (<1024px) renders the same button, so it gets the icon-only
   treatment here too. */
@media (width < 85rem) {

    #fern-ask-ai-button .fern-button-text {
        display: none;
    }

}

/* Full tier (85rem and up): 208px Figma bar + 8px gap + 83px labeled
   button. The zone's right edge sits at 549px; the tab group's left edge is
   (viewport + 238px)/2 - 235px, which leaves 15px of clearance at the
   1360px floor. */
@media (width >= 85rem) {

    #fern-header .fern-header-search-wrap:has(#fern-ask-ai-button) {
        width: 299px;
        min-width: 203px;
    }

}

/* Wide tier (74.5rem to 85rem): icon-only button. Same derivation as the
   compact tier's (100vw - 690px)/2 cap, with the wide tab track's 470px
   instead of the compact 393px. The zone stays 8px clear of the tab group,
   which narrows the bar from 256px at 1350px down to 177px at the 1192px
   floor. */
@media (74.5rem <= width < 85rem) {

    #fern-header .fern-header-search-wrap:has(#fern-ask-ai-button) {
        width: min(301px, calc((100vw - 748px) / 2));
        min-width: 157px;
    }

}

/* Compact tier (below 74.5rem): the icon-only button adds 45px to the
   zone, so the cap rises from 208px to 253px and the floor from 112px to
   157px. The (100vw - 690px)/2 collision cap is unchanged. */
@media (width < 74.5rem) {

    #fern-header .fern-header-search-wrap:has(#fern-ask-ai-button) {
        width: min(253px, calc((100vw - 690px) / 2));
        min-width: 157px;
    }

}

/* The header grid's first column reserves the search zone, button included:
   307px at the full tier (299px wrap + 8px gutter), 230px at the wide tier
   (the wrap's 222px floor at 1192px + 8px), and 165px at the compact tier
   (157px + 8px). */
@media (width >= 85rem) {

    #fern-header .fern-header-desktop:has(#fern-ask-ai-button) {
        grid-template-columns: minmax(calc(var(--spacing-sidebar-width) + 307px - 28px), 1fr)
            auto;
    }

}

@media (74.5rem <= width < 85rem) {

    #fern-header .fern-header-desktop:has(#fern-ask-ai-button) {
        grid-template-columns: minmax(calc(var(--spacing-sidebar-width) + 230px - 28px), 1fr)
            auto;
    }

}

@media (width < 74.5rem) {

    #fern-header .fern-header-desktop:has(#fern-ask-ai-button) {
        grid-template-columns: minmax(calc(var(--spacing-sidebar-width) + 165px - 28px), 1fr)
            auto;
    }

}

/* ============================================================================
   Segmented Control
   ============================================================================ */

.fern-segmented-control button[data-state="on"] {
    background-color: var(--Docs-Segmented-Control-Background-On);
    color: var(--Foreground1);
}

/* ============================================================================
   Callouts
   ============================================================================ */

.fern-callout {
    background-color: var(--Docs-Callout-Background);
    color: var(--Foreground1);
    border-color: var(--Border-3);
}

.fern-callout .fern-mdx-link svg {
    color: var(--Foreground1);
}

.fern-callout[data-intent="info"] svg:first-child {
    color: var(--Foreground2);
}

.fern-callout[data-intent="warning"] svg:first-child {
    color: var(--Docs-Callout-Icon-Foreground-Warning);
}

.fern-callout[data-intent="success"] svg:first-child {
    color: var(--Docs-Callout-Icon-Foreground-Success);
}

.fern-callout[data-intent="error"] svg:first-child {
    color: var(--Docs-Callout-Icon-Foreground-Error);
}

.fern-callout[data-intent="note"] svg:first-child {
    color: var(--Foreground2);
}

.fern-callout[data-intent="launch"] svg:first-child {
    color: var(--Docs-Callout-Icon-Foreground-Launch);
}

.fern-callout[data-intent="tip"] svg:first-child {
    color: var(--Docs-Callout-Icon-Foreground-Tip);
}

.fern-callout[data-intent="check"] svg:first-child {
    color: var(--Docs-Callout-Icon-Foreground-Check);
}

/* ============================================================================
   Buttons
   ============================================================================ */

/* Right-side buttons follow the Figma Topbar spec: 8px gaps, 38px icon
   buttons with 16px icons, and a #202020 Platform button with a 14px/510
   label, 9px/16px padding, and 10px radius. */
#fern-header .header-end {
    gap: 8px;
}

/* Platform button. 500, not Figma's raw 510: the system font stack rounds
   510 up to Semibold (see the tab buttons note above). */
.header-end .group.cursor-pointer.fern-button.filled.normal {
    background-color: light-dark(#202020, #fcfcfc);
    color: light-dark(#fcfcfc, #202020);
    font-size: 14px;
    font-weight: 500 !important;
    padding: 9px 16px;
    border-radius: 10px;
    height: 38px;
}

/* centering the Platform chevron in the header */
.header-end .group.cursor-pointer.fern-button.filled.normal .size-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

/* Discord button in the header */
.header-end .group.cursor-pointer.fern-button.minimal.normal {
    background-color: transparent;
    border: transparent;
    color: var(--Foreground2);
    font-weight: 600;
    transition: all 0.2s ease;
    height: 38px;
    width: 38px;
}

.header-end .group.cursor-pointer.fern-button.minimal.normal:hover {
    background-color: var(
        --Docs-Navbar-Button-Outline-Primary-Background-Hover
    );
    color: var(--Foreground1);
}
.header-end .group.cursor-pointer.fern-button.minimal.normal:focus-visible {
    background-color: var(
        --Docs-Navbar-Button-Outline-Primary-Background-Hover
    );
    color: var(--Foreground1);
}

.header-end .group.cursor-pointer.fern-button.minimal.normal:active {
    background-color: var(
        --Docs-Navbar-Button-Outline-Primary-Background-Pressed
    );
    color: var(--Foreground1);
}

/* centering the Platform icon in the header */
.header-end .group.cursor-pointer.fern-button.filled.normal .size-5 {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* centering the discord icon in the header */
.header-end .group.cursor-pointer.fern-button.minimal.normal .size-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

/* margin-right fix on the theme toggle button */
.header-end button {
    margin-left: 0px !important;
}

/* centering the discord icon in the mobile sidebar button */
.border-border-concealed
    .group.cursor-pointer.fern-button.minimal.normal
    .size-5 {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Batch vs Stream segmented control in API Reference */
.fern-segmented-control {
    background-color: var(--Docs-Content-TabGroup-Background);
}

/* ============================================================================
   Badges
   ============================================================================ */

.fern-docs-badge.blue.subtle {
    background-color: var(--Docs-Badge-Subtle-Background-Accent);
    color: var(--Docs-Badge-Subtle-Foreground-Accent);
}

.fern-docs-badge.green.subtle {
    background-color: var(--Docs-Badge-Subtle-Background-Green);
    color: var(--Docs-Badge-Subtle-Foreground-Green);
}

.fern-docs-badge.amber.subtle {
    background-color: var(--Docs-Badge-Subtle-Background-Amber);
    color: var(--Docs-Badge-Subtle-Foreground-Amber);
}

.fern-docs-badge.red.subtle {
    background-color: var(--Docs-Badge-Subtle-Background-Red);
    color: var(--Docs-Badge-Subtle-Foreground-Red);
}

.fern-docs-badge.accent.subtle {
    background-color: var(--Docs-Badge-Subtle-Background-Accent);
    color: var(--Docs-Badge-Subtle-Foreground-Accent);
}

.fern-docs-badge.grayscale.subtle {
    background-color: var(--Docs-Badge-Subtle-Background-Grayscale);
    color: var(--Docs-Badge-Subtle-Foreground-Grayscale);
}

/* "New" pill beside the `extraction` request property on POST /v1/search.
   Fern's x-fern-availability extension only accepts alpha, beta, preview,
   generally-available, deprecated, and legacy, so there is no supported way to
   put a custom "New" label on a request property. This injects one after the
   type and Optional chips, reusing the accent badge tokens above so it matches
   the rest of the badge set in both themes.

   This depends on two Fern internals with no compatibility guarantee: the
   generated anchor id and the property-meta class. If the pill disappears after
   a Fern upgrade, check that #request.body.extraction and
   .fern-api-property-meta still exist. Delete this block once `extraction` is no
   longer new. */
[id="request.body.extraction"] .fern-api-property-meta::after {
    content: "New";
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: var(--Docs-Badge-Subtle-Background-Accent);
    color: var(--Docs-Badge-Subtle-Foreground-Accent);
}

/* ============================================================================
   Card Styling
   ============================================================================ */

.card-icon {
    width: 24px !important;
    height: 24px !important;
    color: var(--Foreground1) !important;
    margin-bottom: 16px;
}

/* Decreases size of the description text in the card */
.fern-card .jsx-395584807 .jsx-395584807 .jsx-395584807:nth-of-type(2) {
    font-size: 14px;
}

/* Card Shadow and Border */
.fern-card {
    box-shadow: var(--card-shadow);
    border-color: var(--Border-3);
}

/* Card Shadow and Border on Hover */
.fern-card:hover {
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
}
.fern-card:focus-visible {
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
}

/* No hover Card Shadow and Border on Accordion Hover */
.fern-card.fern-accordion:hover {
    box-shadow: var(--card-shadow);
    border-color: var(--Border-3);
}
.fern-card.fern-accordion:focus-visible {
    box-shadow: var(--card-shadow);
    border-color: var(--Border-3);
}

/* ============================================================================
   Codeblock Styling
   ============================================================================ */

/* Codeblock Shadow and Border */
.border-card-border {
    box-shadow: var(--card-shadow);
}

/* Smaller code text for long example payloads. Wrap the fence in
   <div className="code-compact">. */
.code-compact pre,
.code-compact pre * {
    font-size: 12px !important;
    line-height: 1.6 !important;
}

/* ============================================================================
   Scrollbar
   ============================================================================ */

/* Webkit browsers */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--Docs-Scrollbar-Thumb);
    border-radius: 3px;
}

/* Firefox */
html {
    scrollbar-color: var(--Docs-Scrollbar-Thumb) transparent;
    scrollbar-width: thin;
}

/* Override Fern scrollbar thumb color. Otherwise, it's affected by accent-primary in docs.yml */
.fern-scroll-area-thumb {
    background-color: var(--Docs-Scrollbar-Thumb) !important;
}

li {
    position: relative;
}

/* ============================================================================
   Compact Header (below 74.5rem)
   ============================================================================ */

/* The full Figma Topbar needs 1188px: 48px header padding, the search bar's
   438px zone, the 506px tab track, and the 196px right-side group. Below
   74.5rem (1192px), compact instead of clipping: tighter tab gutters,
   smaller right-side buttons, an auto-sized right column so leftover space
   flows to the search bar, and the bar itself narrows from 208px down to
   ~140px at the 1024px floor. Everything else stays on spec. In production
   the search zone also carries the icon-only Ask AI button, so the bar
   narrows to ~122px at the floor instead; see the Ask AI budget rules
   above. */
@media (width < 74.5rem) {

    #fern-header .fern-header-desktop {
        grid-template-columns: minmax(calc(var(--spacing-sidebar-width) + 120px - 28px), 1fr)
            auto;
    }

    /* The tabs now float centered on the main content window, so the bar must
       yield before they reach it: its right edge stays 8px clear of the tab
       group's left edge, whose position is (viewport + 238px)/2 minus half
       the tab track. That works out to half the viewport minus 345px, capped
       at the spec's 208px (no shrink near the 74.5rem breakpoint) and
       floored by the 112px min-width below. */
    #fern-header .fern-header-search-wrap {
        width: min(208px, calc((100vw - 690px) / 2));
        min-width: 112px;
    }

    #fern-header .header-end {
        gap: 4px;
    }

    .header-end .group.cursor-pointer.fern-button.filled.normal {
        padding: 9px 12px;
        height: 36px;
    }

    .header-end .group.cursor-pointer.fern-button.minimal.normal {
        width: 36px;
        height: 36px;
    }

    [data-theme="default"]#fern-header [role="tablist"] {
        gap: 6px;
    }

    [data-theme="default"]#fern-header [data-radix-collection-item] {
        padding: 9px 8px;
        gap: 6px;
    }

}

/* ============================================================================
   Ultra-Compact Header (below 67.5rem)
   ============================================================================ */

/* Below 1080px the centered tab group can no longer clear the right-side
   group at compact sizes: at the 1024px floor the canvas center is 631px,
   so even a 112px search bar leaves only 396px for the tab track on the left
   and the right side needs to fit in 167px. Slim the tabs (8/6 padding, 4px
   gaps) and the right-side buttons (32px, 2px gaps) so everything clears
   with the group still exactly centered. */
@media (width < 67.5rem) {

    [data-theme="default"]#fern-header [role="tablist"] {
        gap: 4px;
    }

    [data-theme="default"]#fern-header [data-radix-collection-item] {
        padding: 8px 6px;
        gap: 5px;
    }

    #fern-header .header-end {
        gap: 2px;
    }

    .header-end .group.cursor-pointer.fern-button.filled.normal {
        padding: 9px 10px;
        height: 32px;
    }

    .header-end .group.cursor-pointer.fern-button.minimal.normal {
        width: 32px;
        height: 32px;
    }

}