/*fern-site-stylesheet*/:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --logo-height: 30px;
  --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: #fffcfa;
  --accent-2: #fff5eb;
  --accent-3: #ffe9d2;
  --accent-4: #ffd8b7;
  --accent-5: #ffcba1;
  --accent-6: #ffbb86;
  --accent-7: #ffa257;
  --accent-8: #ff871c;
  --accent-9: #ff861a;
  --accent-10: #f27b00;
  --accent-11: #c85900;
  --accent-12: #5e2a00;

  --accent-a1: #ff660005;
  --accent-a2: #ff800014;
  --accent-a3: #ff83002d;
  --accent-a4: #ff750048;
  --accent-a5: #ff72005e;
  --accent-a6: #ff700079;
  --accent-a7: #ff7200a8;
  --accent-a8: #ff7800e3;
  --accent-a9: #ff7800e5;
  --accent-a10: #f27b00;
  --accent-a11: #c85900;
  --accent-a12: #5e2a00;

  --accent-contrast: #fff;
  --accent-surface: #fff3e6cc;
  --accent-indicator: #ff861a;
  --accent-track: #ff861a;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.2% 0.0036 54.02);
      --accent-2: oklch(97.9% 0.0208 54.02);
      --accent-3: oklch(95.8% 0.0499 54.02);
      --accent-4: oklch(92% 0.1099 54.02);
      --accent-5: oklch(89% 0.1444 54.02);
      --accent-6: oklch(85.7% 0.149 54.02);
      --accent-7: oklch(80.5% 0.1526 54.02);
      --accent-8: oklch(74.5% 0.1791 54.02);
      --accent-9: oklch(74.2% 0.1791 54.02);
      --accent-10: oklch(70.6% 0.1791 54.02);
      --accent-11: oklch(59.2% 0.1791 54.02);
      --accent-12: oklch(35% 0.0931 54.02);

      --accent-a1: color(display-p3 0.8039 0.4118 0.0196 / 0.02);
      --accent-a2: color(display-p3 0.898 0.4784 0.0078 / 0.075);
      --accent-a3: color(display-p3 0.9059 0.502 0.0039 / 0.165);
      --accent-a4: color(display-p3 0.9137 0.4431 0.0039 / 0.267);
      --accent-a5: color(display-p3 0.9098 0.4353 0.0039 / 0.346);
      --accent-a6: color(display-p3 0.9137 0.4275 0.0039 / 0.444);
      --accent-a7: color(display-p3 0.9176 0.4235 0 / 0.604);
      --accent-a8: color(display-p3 0.9176 0.4157 0 / 0.765);
      --accent-a9: color(display-p3 0.9176 0.4118 0 / 0.769);
      --accent-a10: color(display-p3 0.8667 0.3922 0 / 0.812);
      --accent-a11: color(display-p3 0.6863 0.2784 0 / 0.863);
      --accent-a12: color(display-p3 0.3098 0.1373 0 / 0.953);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 1 0.9529 0.9098 / 0.8);
      --accent-indicator: oklch(74.2% 0.1791 54.02);
      --accent-track: oklch(74.2% 0.1791 54.02);
    }
  }
}


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

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

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

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

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

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


.dark {
  --accent-1: #1e1915;
  --accent-2: #241c16;
  --accent-3: #382214;
  --accent-4: #4a2405;
  --accent-5: #572c09;
  --accent-6: #653818;
  --accent-7: #7b4824;
  --accent-8: #9d5c2e;
  --accent-9: #ff861a;
  --accent-10: #f27b00;
  --accent-11: #ffa15a;
  --accent-12: #ffdec9;

  --accent-a1: #ee000006;
  --accent-a2: #f142000d;
  --accent-a3: #fb550023;
  --accent-a4: #fc490037;
  --accent-a5: #ff5d0045;
  --accent-a6: #fd741455;
  --accent-a7: #ff86326d;
  --accent-a8: #fe8d3d93;
  --accent-a9: #ff861a;
  --accent-a10: #ff8100f1;
  --accent-a11: #ffa15a;
  --accent-a12: #ffdec9;

  --accent-contrast: #fff;
  --accent-surface: #2f1e1380;
  --accent-indicator: #ff861a;
  --accent-track: #ff861a;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(21.7% 0.0107 54.02);
      --accent-2: oklch(23.3% 0.0172 54.02);
      --accent-3: oklch(27.6% 0.0408 54.02);
      --accent-4: oklch(30.7% 0.0717 54.02);
      --accent-5: oklch(34.3% 0.0782 54.02);
      --accent-6: oklch(39.1% 0.0784 54.02);
      --accent-7: oklch(45.6% 0.0854 54.02);
      --accent-8: oklch(54.1% 0.1048 54.02);
      --accent-9: oklch(74.2% 0.1791 54.02);
      --accent-10: oklch(70.6% 0.1791 54.02);
      --accent-11: oklch(79.9% 0.1469 54.02);
      --accent-12: oklch(92.4% 0.047 54.02);

      --accent-a1: color(display-p3 0.9725 0 0 / 0.018);
      --accent-a2: color(display-p3 0.9922 0.2824 0 / 0.044);
      --accent-a3: color(display-p3 1 0.3922 0 / 0.122);
      --accent-a4: color(display-p3 1 0.349 0 / 0.192);
      --accent-a5: color(display-p3 1 0.4235 0 / 0.244);
      --accent-a6: color(display-p3 1 0.5137 0.1686 / 0.305);
      --accent-a7: color(display-p3 1 0.5765 0.2706 / 0.396);
      --accent-a8: color(display-p3 1 0.6078 0.3176 / 0.535);
      --accent-a9: color(display-p3 1 0.5804 0.2392 / 0.931);
      --accent-a10: color(display-p3 1 0.5608 0.2 / 0.879);
      --accent-a11: color(display-p3 1 0.6824 0.4235 / 0.944);
      --accent-a12: color(display-p3 0.9961 0.8902 0.8118 / 0.979);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1725 0.1176 0.0784 / 0.5);
      --accent-indicator: oklch(74.2% 0.1791 54.02);
      --accent-track: oklch(74.2% 0.1791 54.02);
    }
  }
}


.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(255, 134, 26, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(255, 134, 26, 1);
  --background: rgba(25, 26, 26, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #191a1a;
}

/* Mux-style colored tag pills for changelog. */
/* Targets badges tagged via assets/changelog-tags.js. */

/* Each tag defines its hue once, as an RGB triple plus the two foregrounds.
   The shared rules below turn those into a translucent tint for dark mode and
   the solid pastel for light mode, so a pill never reads as a white blob on
   the dark theme (which is this site's default). */
.fern-docs-badge[data-tag="New"],
.fern-filter-badge[data-tag="New"] {
  --ibee-tag-rgb: 245 158 11;
  --ibee-tag-fg-dark: #fcd34d;
  --ibee-tag-bg-light: #fde68a;
  --ibee-tag-fg-light: #92400e;
}

.fern-docs-badge[data-tag="Beta"],
.fern-filter-badge[data-tag="Beta"] {
  --ibee-tag-rgb: 139 92 246;
  --ibee-tag-fg-dark: #c4b5fd;
  --ibee-tag-bg-light: #ddd6fe;
  --ibee-tag-fg-light: #5b21b6;
}

.fern-docs-badge[data-tag="Improvement"],
.fern-filter-badge[data-tag="Improvement"] {
  --ibee-tag-rgb: 59 130 246;
  --ibee-tag-fg-dark: #93c5fd;
  --ibee-tag-bg-light: #bfdbfe;
  --ibee-tag-fg-light: #1e40af;
}

.fern-docs-badge[data-tag="Update"],
.fern-filter-badge[data-tag="Update"] {
  --ibee-tag-rgb: 107 114 128;
  --ibee-tag-fg-dark: #d1d5db;
  --ibee-tag-bg-light: #d1d5db;
  --ibee-tag-fg-light: #374151;
}

.fern-docs-badge[data-tag="Deprecated"],
.fern-filter-badge[data-tag="Deprecated"] {
  --ibee-tag-rgb: 239 68 68;
  --ibee-tag-fg-dark: #fca5a5;
  --ibee-tag-bg-light: #fecaca;
  --ibee-tag-fg-light: #991b1b;
}

.fern-docs-badge[data-tag="Breaking"],
.fern-filter-badge[data-tag="Breaking"] {
  --ibee-tag-rgb: 220 38 38;
  --ibee-tag-fg-dark: #f87171;
  --ibee-tag-bg-light: #fca5a5;
  --ibee-tag-fg-light: #7f1d1d;
}

.fern-docs-badge[data-tag="Security"],
.fern-filter-badge[data-tag="Security"] {
  --ibee-tag-rgb: 234 88 12;
  --ibee-tag-fg-dark: #fdba74;
  --ibee-tag-bg-light: #fed7aa;
  --ibee-tag-fg-light: #7c2d12;
}

/* Product tags share a neutral teal accent */
.fern-docs-badge[data-product="true"],
.fern-filter-badge[data-product="true"] {
  --ibee-tag-rgb: 20 184 166;
  --ibee-tag-fg-dark: #5eead4;
  --ibee-tag-bg-light: #ccfbf1;
  --ibee-tag-fg-light: #115e59;
}

/* Paint the pills (dark theme — the default).
   Filter pills are only painted while SELECTED: Fern marks the inactive ones
   with .fern-filter-badge-unselected, and colouring those made every filter
   look permanently active.

   `filter: none` is the load-bearing line. Fern renders these pills as
   `.fern-docs-badge.grayscale.subtle`, where `grayscale` is meant as a colour
   NAME — but it collides with Tailwind's `.grayscale` utility, which resolves
   to `filter: grayscale(100%)`. That filter desaturates whatever the pill
   paints, so every colour set here was silently rendered as grey no matter
   how it was specified. `!important` is needed alongside it because the
   utility layer outranks this stylesheet. */
/* NOTE the :not(.fern-filter-badge) on the first two selectors — a filter pill
   carries BOTH classes (fern-docs-badge AND fern-filter-badge), so without it
   the generic rule repaints the unselected filters that the rules below are
   deliberately skipping. */
.fern-docs-badge[data-tag]:not(.fern-filter-badge),
.fern-docs-badge[data-product="true"]:not(.fern-filter-badge),
.fern-filter-badge[data-tag]:not(.fern-filter-badge-unselected),
.fern-filter-badge[data-product="true"]:not(.fern-filter-badge-unselected) {
  filter: none !important;
  background-color: rgb(var(--ibee-tag-rgb) / 0.16) !important;
  color: var(--ibee-tag-fg-dark) !important;
  border-color: rgb(var(--ibee-tag-rgb) / 0.4) !important;
}

/* Light theme keeps the original solid pastels. */
:root.light .fern-docs-badge[data-tag]:not(.fern-filter-badge),
:root.light .fern-docs-badge[data-product="true"]:not(.fern-filter-badge),
:root.light .fern-filter-badge[data-tag]:not(.fern-filter-badge-unselected),
:root.light .fern-filter-badge[data-product="true"]:not(.fern-filter-badge-unselected) {
  background-color: var(--ibee-tag-bg-light) !important;
  color: var(--ibee-tag-fg-light) !important;
  border-color: rgb(var(--ibee-tag-rgb)) !important;
}

/* Unselected filter pills: hint the hue on the border only, so you can still
   tell them apart without them reading as active. */
.fern-filter-badge[data-tag].fern-filter-badge-unselected:hover,
.fern-filter-badge[data-product="true"].fern-filter-badge-unselected:hover {
  filter: none !important;
  border-color: rgb(var(--ibee-tag-rgb) / 0.55) !important;
}
.fern-filter-badge[data-tag].fern-filter-badge-unselected:focus-visible,
.fern-filter-badge[data-product="true"].fern-filter-badge-unselected:focus-visible {
  filter: none !important;
  border-color: rgb(var(--ibee-tag-rgb) / 0.55) !important; outline: none;
}

/* Month-year header injected by changelog-tags.js (Mux-style) */
.changelog-month-header {
  text-align: center;
  margin: 3rem 0 1.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  font-weight: 500;
  text-transform: uppercase;
  color: rgb(156 163 175);
  border-bottom: 1px solid rgb(75 85 99 / 0.3);
}

/* Active month in the right rail */
.changelog-month-rail-item--active a {
  color: var(--accent-11, #ff7a00) !important;
  font-weight: 600;
}

/* Bottom-of-page Previous / Next navigation (injected by theme-switcher.js) */
.ibee-page-nav {
  display: flex !important;
  width: 100% !important;
  margin: auto;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: stretch;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  box-sizing: border-box;
}

@media (max-width: 768px) {

  .ibee-page-nav {
    width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

}

.ibee-page-nav-link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--grayscale-a12, #fff);
  max-width: 45%;
  transition: color 120ms ease;
}

.ibee-page-nav-prev {
  align-items: flex-start;
  text-align: left;
}

.ibee-page-nav-next {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}

.ibee-page-nav-direction {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--grayscale-a11, rgb(180 180 185));
}

.ibee-page-nav-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.ibee-page-nav-link:hover .ibee-page-nav-title {
  color: var(--accent-11, #ff7a00);
}
.ibee-page-nav-link:focus-within .ibee-page-nav-title {
  color: var(--accent-11, #ff7a00); outline: none;
}

:root.light .ibee-page-nav {
  border-top-color: rgb(0 0 0 / 0.08);
}
:root.light .ibee-page-nav-link {
  color: var(--grayscale-a12, #111);
}
:root.light .ibee-page-nav-direction {
  color: var(--grayscale-a11, #555);
}

/* Hide Fern's native site footer entirely — we render our own self-contained
   footer below to avoid the duplicate social-icon row. */
#fern-footer {
  display: none !important;
}

/* Hide Fern's "Built with Fern" badge/watermark and any of its wrappers. */
#builtwithfern,
a[href*="buildwithfern.com" i],
a[href*="buildwithfern.dev" i],
a[href*="//fern.dev" i],
a[href*="//fern.com" i],
a[href*="//www.fern" i],
a[href*="getfern" i],
[class*="builtwithfern" i],
[class*="built-with-fern" i],
[class*="powered-by-fern" i],
[class*="fern-watermark" i],
[class*="fern-attribution" i],
[class*="fern-branding" i],
[id*="builtwithfern" i],
[id*="fern-watermark" i],
[aria-label*="Built with fern" i],
[aria-label*="powered by fern" i] {
  display: none !important;
}

/* Catch the badge by its containing wrapper too — Fern often renders the
   "Built with fern" link inside its layout footer. */
.fern-layout-footer:has(a[href*="buildwithfern" i]),
.fern-layout-footer:has(a[href*="fern.dev" i]),
.fern-layout-footer:has(a[href*="fern.com" i]) {
  display: none !important;
}

/* Strip the divider line painted in the area around "Built with fern".
   Zero borders on the layout footer / watermark anchor — but EXCLUDE our
   .ibee-page-nav (which has its own border-top above the prev/next links). */
.fern-layout-footer,
.fern-layout-footer > *:not(.ibee-page-nav),
.fern-layout-footer-toolbar,
#builtwithfern,
#builtwithfern + *:not(.ibee-page-nav):not(.ibee-site-footer),
.fern-layout-footer + *:not(.ibee-page-nav):not(.ibee-site-footer) {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* Hide any horizontal rule Fern places between the article and our footer. */
main hr,
body > hr,
.fern-layout-footer + hr,
#builtwithfern + hr {
  display: none !important;
}

/* Self-contained site footer injected at end of <body>. Single row:
   Terms · Privacy   |   © Copyright   |   X · LinkedIn · Instagram
   Flows inline at the bottom of the page (no longer fixed) so it sits
   below the page content and scrolls with it on every page. */
.ibee-site-footer {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap;
  gap: 1.5rem;
  padding: 1rem 2rem;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  background: var(--background, #111113);
  margin-top: 1.5rem;
}

.ibee-site-footer > * {
  flex: 0 0 auto;
}

/* Contact Support pill in the footer (leftmost) */
.ibee-footer-support {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1px solid rgb(255 255 255 / 0.14);
  /* background: transparent; */
  color: var(--grayscale-a12, #fff);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}

.ibee-footer-support:hover {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.22);
}
.ibee-footer-support:focus-visible {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.22); outline: none;
}

:root.light .ibee-footer-support {
  border-color: rgb(0 0 0 / 0.14);
  color: var(--grayscale-a12, #111);
}

:root.light .ibee-footer-support:hover {
  background: rgb(0 0 0 / 0.04);
  border-color: rgb(0 0 0 / 0.22);
}
:root.light .ibee-footer-support:focus-visible {
  background: rgb(0 0 0 / 0.04);
  border-color: rgb(0 0 0 / 0.22); outline: none;
}

.ibee-footer-social {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.ibee-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--grayscale-a11, rgb(180 180 185));
  transition: color 120ms ease;
}

.ibee-footer-social-link:hover {
  color: var(--grayscale-a12, #fff);
}
.ibee-footer-social-link:focus-visible {
  color: var(--grayscale-a12, #fff); outline: none;
}

:root.light .ibee-site-footer {
  border-top-color: rgb(0 0 0 / 0.08);
}
:root.light .ibee-footer-social-link {
  color: var(--grayscale-a11, #555);
}
:root.light .ibee-footer-social-link:hover {
  color: var(--grayscale-a12, #111);
}
:root.light .ibee-footer-social-link:focus-visible {
  color: var(--grayscale-a12, #111); outline: none;
}

/* Mobile action cluster (Login / Get Started / Theme) — hidden on desktop;
   shown inside the mobile menu drawer (.ibee-mobile-menu-actions). */
.ibee-footer-mobile-actions {
  display: none;
}

/* Shared base for the action cluster items */
.ibee-footer-mobile-link,
.ibee-footer-mobile-cta,
.ibee-footer-mobile-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  border: 0;
}

/* Login — plain text link */
.ibee-footer-mobile-link {
  color: var(--grayscale-a12, #fff);
  background: transparent;
  font-size: 0.95rem;
  padding: 0.6rem 0.9rem;
}
.ibee-footer-mobile-link:hover {
  color: var(--accent-11, #ff7a00);
}
.ibee-footer-mobile-link:focus-visible {
  color: var(--accent-11, #ff7a00); outline: none;
}

/* Get Started — prominent filled pill (Mux SIGN UP style) */
.ibee-footer-mobile-cta {
  color: #fff;
  background: var(--accent-9, #ff7a00);
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.05);
  transition: filter 120ms ease, transform 120ms ease;
}
.ibee-footer-mobile-cta:hover {
  filter: brightness(1.08);
}
.ibee-footer-mobile-cta:focus-visible {
  filter: brightness(1.08); outline: none;
}
.ibee-footer-mobile-cta:active {
  transform: scale(0.98);
}

/* Theme — circular icon button */
.ibee-footer-mobile-theme {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9999px;
  background: transparent;
  color: var(--grayscale-a12, #fff);
  border: 1px solid rgb(255 255 255 / 0.16);
  padding: 0;
  flex: 0 0 auto;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.ibee-footer-mobile-theme:hover {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.24);
}
.ibee-footer-mobile-theme:focus-visible {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.24); outline: none;
}
.ibee-footer-mobile-theme svg {
  display: block;
}

@media (max-width: 768px) {

  .ibee-site-footer {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
  }
  /* On mobile, footer shows: Contact Support · Terms · Privacy. Hide the
     copyright, social icons, and the mobile action cluster (those move into
     the mobile menu drawer instead). */
  .ibee-site-footer .ibee-footer-copyright,
  .ibee-site-footer .ibee-footer-social,
  .ibee-site-footer .ibee-footer-mobile-actions {
    display: none !important;
  }
  .ibee-footer-support {
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
  }
  .ibee-footer-left {
    gap: 1rem;
  }

}

/* Mobile menu drawer: Login / Get Started / Theme cluster — equal-spaced row.
   IMPORTANT: only apply at mobile widths. If this leaks to desktop, the
   parent article/TOC get squished into 1ch-wide columns. */
@media (max-width: 1024px) {

  .ibee-mobile-actions-flexed,
  .ibee-mobile-menu-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    padding: 1rem 1.25rem !important;
    border-top: 1px solid rgb(255 255 255 / 0.08) !important;
    margin-top: auto !important;
    position: sticky;
    bottom: 0;
    background: var(--background, #111113);
    backdrop-filter: blur(8px);
    z-index: 5;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ibee-mobile-actions-flexed > *,
  .ibee-mobile-menu-actions > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

}

/* Add bottom breathing room to the mobile sidebar / drawer so the action
   row doesn't sit flush against the screen edge. */
@media (max-width: 1024px) {

  [role="dialog"][data-state="open"],
  [data-mobile-menu][data-state="open"],
  .fern-sidebar-mobile,
  #fern-sidebar {
    padding-bottom: 1.5rem !important;
  }

}

/* Override Fern's button styling for the moved-in items. */
.ibee-mobile-menu-actions .ibee-mobile-action-login {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem !important;
  margin: 0 !important;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--grayscale-a12, #fff) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.ibee-mobile-menu-actions .ibee-mobile-action-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  padding: 0.7rem 1.25rem !important;
  margin: 0 !important;
  width: auto !important;
  background: var(--accent-9, #ff7a00) !important;
  border: 0 !important;
  border-radius: 9999px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.ibee-mobile-menu-actions .ibee-mobile-action-cta:hover {
  filter: brightness(1.08);
}
.ibee-mobile-menu-actions .ibee-mobile-action-cta:focus-visible {
  filter: brightness(1.08); outline: none;
}

.ibee-mobile-menu-actions .ibee-mobile-action-theme {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.4rem !important;
  height: 2.4rem !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 1px solid rgb(255 255 255 / 0.16) !important;
  border-radius: 9999px !important;
  color: var(--grayscale-a12, #fff) !important;
}
/* Hide the "Dark"/"Light" text label Fern puts beside the theme icon */
.ibee-mobile-menu-actions .ibee-mobile-action-theme > *:not(svg) {
  display: none !important;
}

:root.light .ibee-mobile-menu-actions {
  border-top-color: rgb(0 0 0 / 0.08);
  background: var(--background, #fff);
}
:root.light .ibee-mobile-menu-actions .ibee-mobile-action-login {
  color: var(--grayscale-a12, #111) !important;
}
:root.light .ibee-mobile-menu-actions .ibee-mobile-action-theme {
  color: var(--grayscale-a12, #111) !important;
  border-color: rgb(0 0 0 / 0.18) !important;
}

:root.light .ibee-footer-mobile-link {
  color: var(--grayscale-a12, #111);
}
:root.light .ibee-footer-mobile-theme {
  color: var(--grayscale-a12, #111);
  border-color: rgb(0 0 0 / 0.18);
}
:root.light .ibee-footer-mobile-theme:hover {
  background: rgb(0 0 0 / 0.04);
  border-color: rgb(0 0 0 / 0.28);
}
:root.light .ibee-footer-mobile-theme:focus-visible {
  background: rgb(0 0 0 / 0.04);
  border-color: rgb(0 0 0 / 0.28); outline: none;
}

:root.light .ibee-footer-mobile-link {
  color: var(--grayscale-a12, #111);
}
:root.light .ibee-footer-mobile-theme {
  color: var(--grayscale-a11, #555);
}

.ibee-footer-left {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
  margin-right: auto;
}

.ibee-footer-link {
  color: var(--grayscale-a11, rgb(180 180 185));
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 120ms ease;
}

.ibee-footer-link:hover {
  color: var(--grayscale-a12, #fff);
}
.ibee-footer-link:focus-visible {
  color: var(--grayscale-a12, #fff); outline: none;
}

.ibee-footer-copyright {
  color: var(--grayscale-a11, rgb(180 180 185));
  font-size: 0.9rem;
  white-space: nowrap;
}

:root.light .ibee-footer-link,
:root.light .ibee-footer-copyright {
  color: var(--grayscale-a11, #555);
}
:root.light .ibee-footer-link:hover {
  color: var(--grayscale-a12, #111);
}
:root.light .ibee-footer-link:focus-visible {
  color: var(--grayscale-a12, #111); outline: none;
}

/* Welcome page: give the home article full content width (override Fern's
   prose max-width which is meant for long-form reading). */
/* article:has(.ibee-hero-cards) {
  max-width: none !important;
  width: 90% !important;
} */
/* article:has(.ibee-hero-cards) .fern-prose,
article:has(.ibee-hero-cards) [class*="prose"] {
  max-width: none !important;
} */



/* Welcome page hero cards: force 2 columns on desktop, stack on mobile.
   Fern's CardGroup ignores cols={2} at wide viewports without an explicit
   override, which is why the 3 hero cards were rendering as a wider 3-col
   row than the sections below. */
/* .ibee-hero-cards > div,
.ibee-hero-cards [class*="cards"],
.ibee-hero-cards [class*="grid"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
} */



/* Regions & locations page row layout */
.ibee-region-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(0, 2fr);
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.ibee-region-row:last-of-type {
  border-bottom: 0;
}

.ibee-region-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.ibee-region-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--grayscale-a12, #fff);
}
.ibee-region-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--grayscale-a11, rgb(160 160 165));
  letter-spacing: 0.04em;
}

.ibee-region-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  width: fit-content;
}

.ibee-status-available {
  color: #22c55e;
  background: rgb(34 197 94 / 0.12);
  border: 1px solid rgb(34 197 94 / 0.3);
}

.ibee-status-preorder {
  color: #f59e0b;
  background: rgb(245 158 11 / 0.12);
  border: 1px solid rgb(245 158 11 / 0.3);
}

.ibee-status-coming {
  color: #94a3b8;
  background: rgb(148 163 184 / 0.12);
  border: 1px solid rgb(148 163 184 / 0.3);
}

.ibee-region-desc {
  color: var(--grayscale-a11, rgb(160 160 165));
  font-size: 0.9rem;
}
.ibee-region-desc a {
  color: var(--accent-11, #ff7a00);
  text-decoration: none;
}
.ibee-region-desc a:hover {
  text-decoration: underline;
}
.ibee-region-desc a:focus-visible {
  text-decoration: underline; outline: none;
}

:root.light .ibee-region-row {
  border-bottom-color: rgb(0 0 0 / 0.08);
}
:root.light .ibee-region-name {
  color: var(--grayscale-a12, #111);
}
:root.light .ibee-region-code,
:root.light .ibee-region-desc {
  color: var(--grayscale-a11, #555);
}

@media (max-width: 768px) {

  .ibee-region-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

}

/* Highlight "Visit ibee.ai" external link in the sidebar (Mux-style boxed) */
#fern-sidebar a[href="https://ibee.ai/"],
.fern-sidebar-desktop a[href="https://ibee.ai/"],
aside a[href="https://ibee.ai/"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin: 0.75rem 0.5rem !important;
  padding: 0.6rem 0.85rem !important;
  border: 1px solid rgb(255 255 255 / 0.14) !important;
  border-radius: 0.6rem !important;
  background: transparent !important;
  color: var(--grayscale-a12, #fff) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  transition: background-color 120ms ease, border-color 120ms ease;
}

#fern-sidebar a[href="https://ibee.ai/"]:hover,
.fern-sidebar-desktop a[href="https://ibee.ai/"]:hover,
aside a[href="https://ibee.ai/"]:hover {
  background: rgb(255 255 255 / 0.06) !important;
  border-color: rgb(255 255 255 / 0.22) !important;
}
#fern-sidebar a[href="https://ibee.ai/"]:focus-visible,
.fern-sidebar-desktop a[href="https://ibee.ai/"]:focus-visible,
aside a[href="https://ibee.ai/"]:focus-visible {
  background: rgb(255 255 255 / 0.06) !important;
  border-color: rgb(255 255 255 / 0.22) !important; outline: none;
}

/* Style the LEFT icon (the one we set via the icon: field). */
#fern-sidebar a[href="https://ibee.ai/"] > svg:first-child,
#fern-sidebar a[href="https://ibee.ai/"] > i:first-child,
.fern-sidebar-desktop a[href="https://ibee.ai/"] > svg:first-child,
.fern-sidebar-desktop a[href="https://ibee.ai/"] > i:first-child,
aside a[href="https://ibee.ai/"] > svg:first-child,
aside a[href="https://ibee.ai/"] > i:first-child {
  display: inline-flex !important;
  padding: 0.25rem !important;
  border: 1px solid rgb(255 255 255 / 0.14) !important;
  border-radius: 0.35rem !important;
  font-size: 0.8em !important;
}

/* Hide Fern's automatic external-link indicator on the RIGHT. */
#fern-sidebar a[href="https://ibee.ai/"] > svg:last-child,
#fern-sidebar a[href="https://ibee.ai/"] > i:last-child,
.fern-sidebar-desktop a[href="https://ibee.ai/"] > svg:last-child,
.fern-sidebar-desktop a[href="https://ibee.ai/"] > i:last-child,
aside a[href="https://ibee.ai/"] > svg:last-child,
aside a[href="https://ibee.ai/"] > i:last-child {
  display: none !important;
}
/* But re-show the icon if there is only one icon (which means it's the
   leading icon, not the trailing external-link indicator). */
#fern-sidebar a[href="https://ibee.ai/"] > svg:first-child:last-child,
#fern-sidebar a[href="https://ibee.ai/"] > i:first-child:last-child,
.fern-sidebar-desktop a[href="https://ibee.ai/"] > svg:first-child:last-child,
.fern-sidebar-desktop a[href="https://ibee.ai/"] > i:first-child:last-child,
aside a[href="https://ibee.ai/"] > svg:first-child:last-child,
aside a[href="https://ibee.ai/"] > i:first-child:last-child {
  display: inline-flex !important;
}

:root.light #fern-sidebar a[href="https://ibee.ai/"],
:root.light .fern-sidebar-desktop a[href="https://ibee.ai/"],
:root.light aside a[href="https://ibee.ai/"] {
  border-color: rgb(0 0 0 / 0.14) !important;
  color: var(--grayscale-a12, #111) !important;
}

:root.light #fern-sidebar a[href="https://ibee.ai/"]:hover,
:root.light .fern-sidebar-desktop a[href="https://ibee.ai/"]:hover,
:root.light aside a[href="https://ibee.ai/"]:hover {
  background: rgb(0 0 0 / 0.04) !important;
  border-color: rgb(0 0 0 / 0.22) !important;
}
:root.light #fern-sidebar a[href="https://ibee.ai/"]:focus-visible,
:root.light .fern-sidebar-desktop a[href="https://ibee.ai/"]:focus-visible,
:root.light aside a[href="https://ibee.ai/"]:focus-visible {
  background: rgb(0 0 0 / 0.04) !important;
  border-color: rgb(0 0 0 / 0.22) !important; outline: none;
}

:root.light #fern-sidebar a[href="https://ibee.ai/"] svg,
:root.light #fern-sidebar a[href="https://ibee.ai/"] i,
:root.light .fern-sidebar-desktop a[href="https://ibee.ai/"] svg,
:root.light .fern-sidebar-desktop a[href="https://ibee.ai/"] i,
:root.light aside a[href="https://ibee.ai/"] svg,
:root.light aside a[href="https://ibee.ai/"] i {
  border-color: rgb(0 0 0 / 0.14) !important;
}

/* "Contact Support" button — fixed bottom row of the sidebar.
 *
 * Previously this used `position: sticky; bottom: 0`, which kept the button
 * visible while the nav scrolled but caused links to slide *under* the
 * button (the "floating" look). The new layout makes the sidebar a flex
 * column: the nav above scrolls in its own region, and the button sits in
 * a separate, non-scrolling bottom strip — same fixed place regardless of
 * sidebar scroll position, with no overlap.
 */
/* Contact Support pill: lives as the last child of the sidebar and pins
   itself to the bottom of the sidebar's scroll viewport. Using `sticky`
   instead of `fixed` means the pill always matches the real sidebar width
   (Fern resizes the column on wider viewports, and the sidebar collapses
   into a drawer on mobile — sticky tracks both automatically). */
.ibee-sidebar-support {
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* `margin-top: auto` pushes the pill to the bottom of the sidebar column
     when the nav is short; `position: sticky; bottom: 0` keeps it pinned
     while scrolling a long nav. Negative inline margins cancel the
     sidebar's left/right padding so the pill stretches edge-to-edge. */
  margin: auto -1rem 0;
  width: calc(100% + 2rem);
  padding: 0.7rem 1rem;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 0;
  background: var(--background, #111113);
  color: var(--grayscale-a12, #fff);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  box-sizing: border-box;
}

/* Make the sidebar a flex column with no bottom padding so `margin-top: auto`
   on the pill pushes it all the way to the bottom edge (no gap). Also force
   the sidebar to be at least viewport-tall so the auto-margin has space to
   work with even when the nav has few items. */
aside:has(> .ibee-sidebar-support),
nav:has(> .ibee-sidebar-support),
[id*="sidebar" i]:has(> .ibee-sidebar-support),
.fern-sidebar-desktop:has(> .ibee-sidebar-support) {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
  min-height: 100% !important;
}

.ibee-sidebar-support svg {
  flex: 0 0 auto;
}

:root.light .ibee-sidebar-support {
  border-color: rgb(0 0 0 / 0.12);
  background: var(--background, #fff);
  color: var(--grayscale-a12, #111);
}

/* "Docs" pill next to the logo (Mux-style) */
.logo-docs-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.1);
  color: var(--grayscale-a12, #fff);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  user-select: none;
}

:root.light .logo-docs-badge {
  background-color: rgb(0 0 0 / 0.08);
  color: var(--grayscale-a12, #111);
}

/* Header tabs: render icon and label side-by-side (icon Docs) */
.fern-header-tabs a,
.fern-header-tabs button,
.fern-header-tab,
[data-tab-button] {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.fern-header-tabs svg,
.fern-header-tabs i,
.fern-header-tab svg,
.fern-header-tab i,
[data-tab-button] svg,
[data-tab-button] i {
  display: inline-flex !important;
  font-size: 0.95em;
  line-height: 1;
}

/* Brand orange for accent text in light mode (Fern auto-darkens accent-11 to #c85900) */
:root.light {
  --accent-11: #ff861a;
  --accent-a11: #ff861a;
}