/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 720px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --logo-height: 40px;
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 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: #f8f7f6;
  --accent-2: #fbf1e8;
  --accent-3: #ffe7cf;
  --accent-4: #ffd8aa;
  --accent-5: #ffcb8f;
  --accent-6: #f8bf85;
  --accent-7: #e6ae73;
  --accent-8: #d8974f;
  --accent-9: #e08a00;
  --accent-10: #d37e00;
  --accent-11: #ab6000;
  --accent-12: #4e351a;

  --accent-a1: #95622f05;
  --accent-a2: #ffcda033;
  --accent-a3: #ffe7cf;
  --accent-a4: #ffd8aa;
  --accent-a5: #ffcb8f;
  --accent-a6: #f67d0278;
  --accent-a7: #d56d008a;
  --accent-a8: #c96a01af;
  --accent-a9: #e08a00;
  --accent-a10: #d37e00;
  --accent-a11: #ab6000;
  --accent-a12: #3b1f01e5;

  --accent-contrast: #fff;
  --accent-surface: #fbefe4cc;
  --accent-indicator: #e08a00;
  --accent-track: #e08a00;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(97.7% 0.0022 66.97);
      --accent-2: oklch(96.4% 0.0158 66.97);
      --accent-3: oklch(94.3% 0.0418 66.97);
      --accent-4: oklch(90.9% 0.0774 66.97);
      --accent-5: oklch(87.9% 0.1001 66.97);
      --accent-6: oklch(84.4% 0.0988 66.97);
      --accent-7: oklch(79% 0.1003 66.97);
      --accent-8: oklch(72.6% 0.1179 66.97);
      --accent-9: oklch(70.7% 0.1564 66.97);
      --accent-10: oklch(67% 0.1564 66.97);
      --accent-11: oklch(56.1% 0.1497 66.97);
      --accent-12: oklch(35.1% 0.0543 66.97);

      --accent-a1: color(display-p3 0.4902 0.2471 0 / 0.016);
      --accent-a2: color(display-p3 0.9255 0.4627 0.0039 / 0.068);
      --accent-a3: color(display-p3 1 0.6275 0.1961 / 0.2);
      --accent-a4: color(display-p3 0.9686 0.5451 0 / 0.296);
      --accent-a5: color(display-p3 0.9529 0.5373 0 / 0.396);
      --accent-a6: color(display-p3 0.8824 0.4706 0 / 0.436);
      --accent-a7: color(display-p3 0.7569 0.4078 0 / 0.504);
      --accent-a8: color(display-p3 0.7098 0.3882 0 / 0.636);
      --accent-a9: color(display-p3 0.7961 0.4549 0 / 0.804);
      --accent-a10: color(display-p3 0.7373 0.4078 0 / 0.82);
      --accent-a11: color(display-p3 0.5804 0.302 0 / 0.868);
      --accent-a12: color(display-p3 0.1961 0.1059 0 / 0.88);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9765 0.9412 0.898 / 0.8);
      --accent-indicator: oklch(70.7% 0.1564 66.97);
      --accent-track: oklch(70.7% 0.1564 66.97);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfcfc;
  --grayscale-2: #f9f9f9;
  --grayscale-3: #f0f0f0;
  --grayscale-4: #e8e8e8;
  --grayscale-5: #e0e0e0;
  --grayscale-6: #d9d9d9;
  --grayscale-7: #cecece;
  --grayscale-8: #bbbbbb;
  --grayscale-9: #8d8d8d;
  --grayscale-10: #838383;
  --grayscale-11: #646464;
  --grayscale-12: #202020;

  --grayscale-a1: #00000003;
  --grayscale-a2: #00000006;
  --grayscale-a3: #0000000f;
  --grayscale-a4: #00000017;
  --grayscale-a5: #0000001f;
  --grayscale-a6: #00000026;
  --grayscale-a7: #00000031;
  --grayscale-a8: #00000044;
  --grayscale-a9: #00000072;
  --grayscale-a10: #0000007c;
  --grayscale-a11: #0000009b;
  --grayscale-a12: #000000df;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.988);
      --grayscale-2: color(display-p3 0.975 0.975 0.975);
      --grayscale-3: color(display-p3 0.939 0.939 0.939);
      --grayscale-4: color(display-p3 0.908 0.908 0.908);
      --grayscale-5: color(display-p3 0.88 0.88 0.88);
      --grayscale-6: color(display-p3 0.849 0.849 0.849);
      --grayscale-7: color(display-p3 0.807 0.807 0.807);
      --grayscale-8: color(display-p3 0.732 0.732 0.732);
      --grayscale-9: color(display-p3 0.553 0.553 0.553);
      --grayscale-10: color(display-p3 0.512 0.512 0.512);
      --grayscale-11: color(display-p3 0.392 0.392 0.392);
      --grayscale-12: color(display-p3 0.125 0.125 0.125);

      --grayscale-a1: #00000003;
      --grayscale-a2: #00000006;
      --grayscale-a3: #0000000f;
      --grayscale-a4: #00000017;
      --grayscale-a5: #0000001f;
      --grayscale-a6: #00000026;
      --grayscale-a7: #00000031;
      --grayscale-a8: #00000044;
      --grayscale-a9: #00000072;
      --grayscale-a10: #0000007c;
      --grayscale-a11: #0000009b;
      --grayscale-a12: #000000df;

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


.dark {
  --accent-1: #1a1813;
  --accent-2: #211c15;
  --accent-3: #302411;
  --accent-4: #3f2a02;
  --accent-5: #4b3303;
  --accent-6: #584015;
  --accent-7: #6c5124;
  --accent-8: #896830;
  --accent-9: #eeb03e;
  --accent-10: #e3a530;
  --accent-11: #fabf5a;
  --accent-12: #fbe5c2;

  --accent-a1: #e3190005;
  --accent-a2: #ee67000d;
  --accent-a3: #fb82001d;
  --accent-a4: #ff7e002d;
  --accent-a5: #fc8d003b;
  --accent-a6: #fda40449;
  --accent-a7: #fdb1315f;
  --accent-a8: #ffba457e;
  --accent-a9: #febb41ed;
  --accent-a10: #feb833e1;
  --accent-a11: #ffc35bfa;
  --accent-a12: #ffe9c5fb;

  --accent-contrast: #2c1f09;
  --accent-surface: #2c200f80;
  --accent-indicator: #eeb03e;
  --accent-track: #eeb03e;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(20.9% 0.01 78.7);
      --accent-2: oklch(22.9% 0.0152 78.7);
      --accent-3: oklch(27% 0.0364 78.7);
      --accent-4: oklch(30.3% 0.0612 78.7);
      --accent-5: oklch(34% 0.0683 78.7);
      --accent-6: oklch(38.9% 0.0668 78.7);
      --accent-7: oklch(45.4% 0.0709 78.7);
      --accent-8: oklch(53.8% 0.0847 78.7);
      --accent-9: oklch(79.6% 0.144 78.7);
      --accent-10: oklch(76.3% 0.144 78.7);
      --accent-11: oklch(84.1% 0.1355 78.7);
      --accent-12: oklch(93.1% 0.052 78.7);

      --accent-a1: color(display-p3 0.9608 0.098 0 / 0.018);
      --accent-a2: color(display-p3 1 0.4627 0 / 0.043);
      --accent-a3: color(display-p3 0.9922 0.5451 0 / 0.104);
      --accent-a4: color(display-p3 0.9961 0.549 0 / 0.164);
      --accent-a5: color(display-p3 1 0.6157 0 / 0.211);
      --accent-a6: color(display-p3 1 0.6941 0.1216 / 0.267);
      --accent-a7: color(display-p3 1 0.7373 0.2784 / 0.352);
      --accent-a8: color(display-p3 0.9961 0.7647 0.349 / 0.473);
      --accent-a9: color(display-p3 1 0.7765 0.3608 / 0.889);
      --accent-a10: color(display-p3 1 0.7647 0.3216 / 0.842);
      --accent-a11: color(display-p3 1 0.8 0.4392 / 0.94);
      --accent-a12: color(display-p3 1 0.9294 0.8 / 0.966);

      --accent-contrast: #2c1f09;
      --accent-surface: color(display-p3 0.1647 0.1255 0.0627 / 0.5);
      --accent-indicator: oklch(79.6% 0.144 78.7);
      --accent-track: oklch(79.6% 0.144 78.7);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

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

.light, :root {
  color-scheme: light;
  --accent: rgba(224, 138, 0, 1);
  --background: rgba(250, 250, 250, 1);
  --border: rgba(229, 229, 229, 1);
  --sidebar-background: initial;
  --header-background: rgba(250, 250, 250, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fafafa;
}

.dark {
  color-scheme: dark;
  --accent: rgba(238, 176, 62, 1);
  --background: rgba(22, 24, 28, 1);
  --border: rgba(48, 52, 58, 1);
  --sidebar-background: initial;
  --header-background: rgba(22, 24, 28, 1);
  --card-background: rgba(32, 35, 41, 1);
  --theme-color: #16181c;
}

/* 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;
}

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
  --ob-scroll-thumb: rgba(9, 10, 11, 0.16);
  --ob-scroll-thumb-hover: rgba(9, 10, 11, 0.28);
}

.dark {
  --ob-scroll-thumb: rgba(255, 255, 255, 0.18);
  --ob-scroll-thumb-hover: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   FERN OVERRIDES
   Tweaks to Fern's own chrome that docs.yml has no option for.
   ========================================================================== */

/* Fern has no config option for the desktop divider next to a canvas body. */
.fern-sidebar-desktop {
  border-right: 0;
}

#fern-header {
  border-bottom: 0;
}

/* Fern's --header-height disagrees with the header it draws once tabs sit in it: on desktop it
   leaves out the tabs row, so the card slides under it, and below 64rem it keeps the tabs row
   Fern has hidden. Either way the page gets a second, short scroll. */
:root {
  --ob-tabs-row: 0px;
}

@media (min-width: 64rem) {

  :root {
    --ob-tabs-row: 44px;
  }

  /* Starts the tabs just inside the card, which begins right after the sidebar. */
  .fern-header-tabs {
    height: var(--ob-tabs-row);
    padding-left: calc(var(--spacing-sidebar-width) + 70px);
  }

}

:root [data-body-theme="canvas"] .fern-main {
  margin-top: calc(var(--header-height-real) + var(--ob-tabs-row));
}

:root [data-body-theme="canvas"] .canvas-wrapper {
  height: calc(100vh - var(--header-height-real) - var(--ob-tabs-row) - 12px);
}

:root [data-body-theme="canvas"] #fern-toc {
  max-height: calc(100vh - var(--header-height-real) - var(--ob-tabs-row) - 12px);
}

/* The changelog comes in two layouts. The local preview (`fern docs dev`) puts it straight into
   .fern-main, off the card every other page sits on, so the rule below draws that card around it.
   The published site puts it inside .canvas-wrapper, which already is the card - drawing a second
   one there nests them and gives the entry its own scroll. */
:root [data-body-theme="canvas"] .fern-main > .fern-layout-changelog {
  flex: 1;
  min-height: calc(100vh - var(--header-height-real) - var(--ob-tabs-row) - 12px);
  margin-left: 0;
  margin-right: 12px;
  /* The article inside already pads itself the way a page inside the card does. */
  padding-inline: 0;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background-color: var(--card-background);
}

/* Inside the card Fern still sizes both pages to the full viewport under the header, 12px taller
   than the card, and makes the entry's layout a scroll box of its own. The min-height keeps the
   footer at the bottom of the card: the card's height less its 1px borders. */
:root [data-body-theme="canvas"] .canvas-wrapper :is(.fern-layout-changelog-overview, .fern-layout-changelog-entry) {
  min-height: calc(100vh - var(--header-height-real) - var(--ob-tabs-row) - 14px);
  margin: 0;
  padding-inline: 0;
}

:root [data-body-theme="canvas"] .fern-main .canvas-wrapper .fern-layout-changelog {
  max-width: none;
  max-height: none;
  margin-inline: 0;
  padding-inline: 0;
  overflow-y: visible;
}

/* The feed, and an entry's content on its own page, are narrower than the article and centre
   themselves inside it. */
:root [data-body-theme="canvas"] .fern-changelog-feed,
:root [data-body-theme="canvas"] .fern-layout-changelog .fern-changelog-content {
  margin-inline: 0;
}

/* Its article measures its own min-height from the header, which would push the card past the
   fold, and centres itself once the card outgrows its max-width on a wide screen. The left padding
   follows a guide page, whose text column (content width beside a 375px table of contents and
   gutters) centres in up to 37.5px of slack. */
:root [data-body-theme="canvas"] :is(.fern-layout-changelog, .fern-layout-changelog-overview) > article {
  min-height: 0;
  margin-inline: 0;
  padding-left: calc(32px + clamp(0px, (100% - var(--spacing-content-width) - 375px) / 2, 37.5px));
}

/* The padding above measures from the card's full width, which the empty table of contents would
   otherwise take a column of. */
:root [data-body-theme="canvas"] :is(.fern-main, .canvas-wrapper):has(.fern-layout-changelog, .fern-layout-changelog-overview) > #fern-toc:empty {
  display: none;
}

/* The entry's wrapper grows into that freed width on its own. The feed's does not, and the card
   centres it. */
:root [data-body-theme="canvas"] .canvas-wrapper > .fern-layout-content-wrapper:has(> .fern-layout-changelog-overview) {
  flex: 1;
}

#fern-sidebar [role="tab"] > span:first-child:not(:last-child) {
  display: none;
}

#fern-sidebar [role="tab"],
.fern-sidebar-link {
  transition: color 120ms ease, background-color 120ms ease !important;
}

#fern-sidebar [role="tab"][data-state="inactive"]:hover,
.fern-sidebar-link:hover {
  color: var(--grayscale-a12);
  background-color: var(--grayscale-a3);
}
#fern-sidebar [role="tab"][data-state="inactive"]:focus-visible,
.fern-sidebar-link:focus-visible {
  color: var(--grayscale-a12);
  background-color: var(--grayscale-a3); outline: none;
}

#fern-sidebar .fern-scroll-area-scrollbar {
  background-color: transparent;
}

#fern-sidebar .fern-scroll-area-thumb {
  background-color: var(--ob-scroll-thumb);
  transition: background-color 120ms ease;
}

#fern-sidebar .fern-scroll-area-scrollbar:hover .fern-scroll-area-thumb {
  background-color: var(--ob-scroll-thumb-hover);
}
#fern-sidebar .fern-scroll-area-scrollbar:focus-within .fern-scroll-area-thumb {
  background-color: var(--ob-scroll-thumb-hover); outline: none;
}

.canvas-wrapper {
  scrollbar-color: var(--ob-scroll-thumb) transparent;
  scrollbar-width: thin;
}

.canvas-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.canvas-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.canvas-wrapper::-webkit-scrollbar-thumb {
  background: var(--ob-scroll-thumb);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

.canvas-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--ob-scroll-thumb-hover);
  background-clip: content-box;
}
.canvas-wrapper::-webkit-scrollbar-thumb:focus-visible {
  background: var(--ob-scroll-thumb-hover);
  background-clip: content-box;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.fern-page-heading {
  font-size: 32px;
}

/* Fern's prose default of 1.25em leaves too much air between short paragraphs. */
.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  margin: 1em 0;
}

/* ==========================================================================
   UTILITIES
   Classes for MDX content. Prefix with `ob-` so they never collide with Fern's.
   ========================================================================== */

.ob-rounded {
  border-radius: 12px;
}