/*fern-site-stylesheet*/@font-face {
    font-family: 'Geist';
    src: url('/_fern-files/humanapproved.docs.buildwithfern.com/9b6f5ff45b278c744b5f379a2c4ecbaf858a842b8eaf82ac8d21b699ca16c608/assets/fonts/geist-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/_fern-files/humanapproved.docs.buildwithfern.com/a0d054c4af557de20afd6ca59f47ab353bcaec49c63ff04b6c9d39d0f8910557/assets/fonts/space-grotesk-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 104.76%;
    ascent-override: 95.94%;
    descent-override: 28.16%;
    line-gap-override: 0.00%;
}
@font-face {
    font-family: 'Space Grotesk Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 109.47%;
    ascent-override: 89.89%;
    descent-override: 26.67%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 760px;
  --sidebar-width: 272px;
  --page-width: 100vw;
  --logo-height: 26px;
  --font-body: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Space Grotesk', 'Space Grotesk Fallback', 'Geist', 'Geist Fallback', 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: #fbfef9;
  --accent-2: #f5fbf2;
  --accent-3: #e8f8e0;
  --accent-4: #d9f3cc;
  --accent-5: #c7ebb4;
  --accent-6: #b0e196;
  --accent-7: #9acf7c;
  --accent-8: #80b562;
  --accent-9: #163300;
  --accent-10: #2a4816;
  --accent-11: #497a28;
  --accent-12: #203e0b;

  --accent-a1: #55d50006;
  --accent-a2: #3bb1000d;
  --accent-a3: #42c6001f;
  --accent-a4: #41c30033;
  --accent-a5: #41bc014b;
  --accent-a6: #40b70069;
  --accent-a7: #3ba20083;
  --accent-a8: #3187009d;
  --accent-a9: #163300;
  --accent-a10: #163700e9;
  --accent-a11: #276100d7;
  --accent-a12: #163500f4;

  --accent-contrast: #fff;
  --accent-surface: #f3faefcc;
  --accent-indicator: #163300;
  --accent-track: #163300;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0084 135.1);
      --accent-2: oklch(98.2% 0.0144 135.1);
      --accent-3: oklch(96.1% 0.0363 135.1);
      --accent-4: oklch(93.4% 0.058 135.1);
      --accent-5: oklch(90.1% 0.083 135.1);
      --accent-6: oklch(85.8% 0.1119 135.1);
      --accent-7: oklch(79.8% 0.1258 135.1);
      --accent-8: oklch(71.6% 0.1258 135.1);
      --accent-9: oklch(28.7% 0.0839 135.1);
      --accent-10: oklch(36.4% 0.0839 135.1);
      --accent-11: oklch(52.7% 0.1258 135.1);
      --accent-12: oklch(32.7% 0.0839 135.1);

      --accent-a1: color(display-p3 0.5137 0.8392 0.0235 / 0.024);
      --accent-a2: color(display-p3 0.2667 0.6745 0.0235 / 0.048);
      --accent-a3: color(display-p3 0.3137 0.7255 0.0039 / 0.114);
      --accent-a4: color(display-p3 0.3176 0.7333 0.0078 / 0.189);
      --accent-a5: color(display-p3 0.302 0.702 0.0039 / 0.275);
      --accent-a6: color(display-p3 0.2902 0.6824 0.0039 / 0.381);
      --accent-a7: color(display-p3 0.2627 0.6 0.0039 / 0.479);
      --accent-a8: color(display-p3 0.2157 0.4941 0 / 0.581);
      --accent-a9: color(display-p3 0.0863 0.1686 0 / 0.969);
      --accent-a10: color(display-p3 0.0902 0.1843 0 / 0.887);
      --accent-a11: color(display-p3 0.1569 0.3412 0 / 0.797);
      --accent-a12: color(display-p3 0.0824 0.1765 0 / 0.922);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9804 0.9412 / 0.8);
      --accent-indicator: oklch(28.7% 0.0839 135.1);
      --accent-track: oklch(28.7% 0.0839 135.1);
    }
  }
}


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

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

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

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

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

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


.dark {
  --accent-1: #0e120c;
  --accent-2: #141a11;
  --accent-3: #1e2918;
  --accent-4: #28371e;
  --accent-5: #314525;
  --accent-6: #3b532c;
  --accent-7: #466334;
  --accent-8: #52763c;
  --accent-9: #9fe870;
  --accent-10: #9bdb72;
  --accent-11: #a5e67c;
  --accent-12: #d6f9c2;

  --accent-a1: #00ba0003;
  --accent-a2: #6df8000b;
  --accent-a3: #95fd4b1b;
  --accent-a4: #a2fd5b2a;
  --accent-a5: #a4fe6739;
  --accent-a6: #a9fe6f48;
  --accent-a7: #abfe7459;
  --accent-a8: #abff756d;
  --accent-a9: #adfe79e7;
  --accent-a10: #b4ff83d9;
  --accent-a11: #b6fe88e5;
  --accent-a12: #dbffc7f9;

  --accent-contrast: #192612;
  --accent-surface: #18241180;
  --accent-indicator: #9fe870;
  --accent-track: #9fe870;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(17.4% 0.0139 134.6);
      --accent-2: oklch(20.7% 0.0184 134.6);
      --accent-3: oklch(26.6% 0.0335 134.6);
      --accent-4: oklch(31.6% 0.0471 134.6);
      --accent-5: oklch(36.4% 0.0578 134.6);
      --accent-6: oklch(41.2% 0.0684 134.6);
      --accent-7: oklch(46.5% 0.0797 134.6);
      --accent-8: oklch(52.4% 0.094 134.6);
      --accent-9: oklch(85.7% 0.1698 134.6);
      --accent-10: oklch(82.6% 0.1523 134.6);
      --accent-11: oklch(85.7% 0.1523 134.6);
      --accent-12: oklch(94.2% 0.0804 134.6);

      --accent-a1: color(display-p3 0 0.9373 0 / 0.009);
      --accent-a2: color(display-p3 0.5333 1 0.0745 / 0.042);
      --accent-a3: color(display-p3 0.6627 1 0.3725 / 0.105);
      --accent-a4: color(display-p3 0.7098 0.9961 0.4314 / 0.164);
      --accent-a5: color(display-p3 0.7255 0.9961 0.4667 / 0.218);
      --accent-a6: color(display-p3 0.7412 0.9961 0.498 / 0.277);
      --accent-a7: color(display-p3 0.749 1 0.5176 / 0.344);
      --accent-a8: color(display-p3 0.749 1 0.5255 / 0.423);
      --accent-a9: color(display-p3 0.7569 1 0.549 / 0.896);
      --accent-a10: color(display-p3 0.7725 0.9961 0.5725 / 0.842);
      --accent-a11: color(display-p3 0.7804 1 0.5922 / 0.888);
      --accent-a12: color(display-p3 0.8941 1 0.8 / 0.971);

      --accent-contrast: #192612;
      --accent-surface: color(display-p3 0.102 0.1333 0.0706 / 0.5);
      --accent-indicator: oklch(85.7% 0.1698 134.6);
      --accent-track: oklch(85.7% 0.1698 134.6);
    }
  }
}


.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(22, 51, 0, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(212, 212, 212, 1);
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(159, 232, 112, 1);
  --background: rgba(16, 16, 18, 1);
  --border: rgba(59, 59, 59, 1);
  --sidebar-background: rgba(16, 16, 18, 1);
  --header-background: rgba(16, 16, 18, 1);
  --card-background: rgba(24, 24, 26, 1);
  --theme-color: #101012;
}

/*
 * The marketing site's look for the docs (human-approved-site, app/_home/dark.css): ink on white,
 * lines and muted text as the ink at reduced opacity, the lime as fills with ink on them, and the
 * dark green for accent text. Fern's own colours and fonts come from docs.yml; this sheet styles
 * the parts docs.yml can't reach. Dark mode (html.dark) follows the site's black band.
 */
:root {
  --ha-bg: #ffffff;
  --ha-ink: #101012;
  --ha-ink-muted: rgba(16, 16, 18, 0.72);
  --ha-ink-ghost: rgba(16, 16, 18, 0.6);
  --ha-line: rgba(16, 16, 18, 0.18);
  --ha-line-soft: rgba(16, 16, 18, 0.12);
  --ha-line-strong: rgba(16, 16, 18, 0.3);
  --ha-soft: rgba(16, 16, 18, 0.035);
  --ha-lime: #9fe870;
  --ha-accent-text: #163300;
  --ha-surface: #ffffff;
  --ha-code-bg: #ffffff;
  --ha-amber: #7a3e00;
  --ha-amber-soft: #fff8e6;
  --ha-amber-line: #f3d48a;
  --ha-shadow: 0 0 0 1px rgba(17, 19, 24, 0.02), 0 18px 40px -30px rgba(17, 19, 24, 0.28);
}
html.dark {
  --ha-bg: #101012;
  --ha-ink: #fcfcf8;
  --ha-ink-muted: rgba(252, 252, 248, 0.78);
  --ha-ink-ghost: rgba(252, 252, 248, 0.6);
  --ha-line: rgba(252, 252, 248, 0.18);
  --ha-line-soft: rgba(252, 252, 248, 0.12);
  --ha-line-strong: rgba(252, 252, 248, 0.32);
  --ha-soft: rgba(252, 252, 248, 0.05);
  --ha-accent-text: #9fe870;
  --ha-surface: #18181a;
  --ha-code-bg: #18181a;
  --ha-amber: #f6c96b;
  --ha-amber-soft: #241b08;
  --ha-amber-line: #5a4312;
  --ha-shadow: none;
}

/* The trademark sign in Arial, as on the site: this face maps U+2122 alone onto the local Arial, so
   naming it first in the heading stack lends it Arial's ™ (Space Grotesk's sits oddly) and nothing
   else. */
@font-face {
  font-family: "Trademark";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  unicode-range: U+2122;
}

/* Text in ink. */
.fern-prose,
.fern-page-heading {
  color: var(--ha-ink);
}

/* Headings: the site's display face, bold and tight (.dark-display's -0.035em on the title, a little
   less as they get smaller). */
h1.fern-page-heading,
.fern-prose h1,
.fern-prose h2,
.fern-prose h3,
.fern-prose h4 {
  font-family: "Trademark", var(--font-heading);
  font-weight: 700;
  color: var(--ha-ink);
}
h1.fern-page-heading,
.fern-prose h1 {
  letter-spacing: -0.035em;
}
.fern-prose h2 {
  letter-spacing: -0.025em;
}
.fern-prose h3,
.fern-prose h4 {
  letter-spacing: -0.015em;
}

/* The section label above each page's title: the site's eyebrow. */
.fern-breadcrumb,
.fern-breadcrumb-item {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ha-accent-text);
}
.fern-breadcrumb-item:hover {
  color: var(--ha-ink);
}
.fern-breadcrumb-item:focus-visible {
  color: var(--ha-ink);
}

/* Links in the text: ink with a thin, faint lime underline that turns full lime and thickens on
   hover and focus, while the text darkens to the accent. */
.fern-mdx-link {
  color: var(--ha-ink);
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ha-lime) 55%, transparent) !important;
  text-underline-offset: 3px;
  transition:
    text-decoration-color 120ms ease,
    text-decoration-thickness 120ms ease;
}
.fern-mdx-link:hover,
.fern-mdx-link:focus-visible {
  color: var(--ha-accent-text);
  text-decoration-color: var(--ha-lime) !important;
}
/* Fern sets the thickness as !important in its components layer, which only an !important in an
   earlier layer can beat. */
@layer base {

  .fern-mdx-link {
    text-decoration-thickness: 1px !important;
  }
  .fern-mdx-link:hover,
  .fern-mdx-link:focus-visible {
    text-decoration-thickness: 2px !important;
  }

}

/* The sidebar's current page: Fern's own grey highlight with ink text, as before the restyle. Fern
   draws it from the accent, which is now green, so it's set here. */
.fern-sidebar-link {
  color: var(--ha-ink-muted);
}
.fern-sidebar-link:hover {
  color: var(--ha-ink);
}
.fern-sidebar-link:focus-visible {
  color: var(--ha-ink);
}
.fern-sidebar-link[data-state="active"] {
  color: var(--ha-ink);
  background: color-mix(in srgb, var(--ha-ink) 6%, transparent);
}
.fern-sidebar-heading-content {
  color: var(--ha-ink);
}

:root {
  --ha-header-gap: 12px;
}

/* Code blocks stay light: white, a line-coloured border, rounded, and a touch of the site's
   shadow. In dark mode, a step up from the ground. */
.fern-code-block {
  background: var(--ha-code-bg);
  border: 1px solid var(--ha-line);
  border-radius: 14px;
  box-shadow: var(--ha-shadow);
  overflow: hidden;
}
.fern-code-block pre.code-block-root {
  background-color: var(--ha-code-bg) !important;
}
html.dark .fern-code-block pre.code-block-root {
  --shiki-dark-bg: var(--ha-code-bg) !important;
}
/* The site's monospace. */
:root:root {
  --font-code: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Cards: white, a soft line and the site's 16px corners. */
.fern-card {
  background: var(--ha-bg);
  border: 1px solid var(--ha-line-soft);
  border-radius: 16px;
  box-shadow: none;
  color: var(--ha-ink);
}
.fern-card.interactive:hover {
  border-color: var(--ha-line-strong);
}
.fern-card.interactive:focus-visible {
  border-color: var(--ha-line-strong);
}
.fern-card .card-icon {
  color: var(--ha-accent-text) !important;
}

/* Callouts: soft neutral with ink text, and an amber tint for warnings only. */
.fern-callout {
  border-radius: 12px;
  border: 1px solid var(--ha-line-soft);
  background: var(--ha-soft);
}
.fern-callout,
.fern-callout * {
  color: var(--ha-ink);
}
.fern-callout svg {
  color: var(--ha-ink-muted);
}
.fern-callout[data-intent="warning"],
.fern-callout[data-intent="danger"] {
  background: var(--ha-amber-soft);
  border-color: var(--ha-amber-line);
}
.fern-callout[data-intent="warning"] svg,
.fern-callout[data-intent="danger"] svg {
  color: var(--ha-amber);
}
.fern-callout code {
  color: inherit;
}

/* Tables: small muted headings over line-coloured rules. */
.fern-table th {
  color: var(--ha-ink-muted);
  font-weight: 600;
  font-size: 0.8125rem;
}
.fern-table th,
.fern-table td {
  border-color: var(--ha-line);
}
.fern-table td {
  color: var(--ha-ink);
}
/* The table's frame already draws the bottom edge, so the last row's rule would double it. */
.fern-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Sequence diagrams (Fern draws these with Mermaid itself, whose own styles are scoped to the
   diagram's id, hence !important): participants as white boxes with ink names and a line-coloured
   border, messages and loop labels in ink, numbered steps as ink circles. Wide enough that the
   labels stay legible; the diagram scrolls sideways on a narrow screen. */
.mermaid-container:has(svg[aria-roledescription="sequence"]) {
  overflow-x: auto;
}
.mermaid-container svg[aria-roledescription="sequence"] {
  min-width: 860px;
}
.mermaid-container svg rect.actor {
  fill: var(--ha-surface) !important;
  stroke: var(--ha-line-strong) !important;
  rx: 10px;
  ry: 10px;
}
.mermaid-container svg text.actor,
.mermaid-container svg text.actor > tspan {
  fill: var(--ha-ink) !important;
  stroke: none !important;
  font-family: inherit !important;
  font-weight: 500;
}
.mermaid-container svg .actor-line {
  stroke: var(--ha-line) !important;
}
.mermaid-container svg .messageText {
  fill: var(--ha-ink) !important;
  stroke: none !important;
}
.mermaid-container svg .messageLine0,
.mermaid-container svg .messageLine1 {
  stroke: var(--ha-ink-muted) !important;
}
.mermaid-container svg marker path,
.mermaid-container svg #arrowhead path,
.mermaid-container svg .arrowheadPath {
  fill: var(--ha-ink-muted) !important;
  stroke: var(--ha-ink-muted) !important;
}
/* The step numbers: the ground's colour on an ink circle. (Fern colours the number for each theme,
   with a more specific selector than a plain one here.) */
html .mermaid-container svg[aria-roledescription] text.sequenceNumber {
  fill: var(--ha-bg) !important;
  font-weight: 600;
}
.mermaid-container svg marker[id$="sequencenumber"] circle {
  fill: var(--ha-ink) !important;
  stroke: var(--ha-ink) !important;
}
.mermaid-container svg .loopLine {
  stroke: var(--ha-line-strong) !important;
}
.mermaid-container svg .labelBox {
  fill: var(--ha-surface) !important;
  stroke: var(--ha-line-strong) !important;
}
.mermaid-container svg .labelText,
.mermaid-container svg .labelText > tspan,
.mermaid-container svg .loopText,
.mermaid-container svg .loopText > tspan {
  fill: var(--ha-ink) !important;
}
.mermaid-container svg .note {
  fill: var(--ha-soft) !important;
  stroke: var(--ha-line) !important;
}
.mermaid-container svg .noteText,
.mermaid-container svg .noteText > tspan {
  fill: var(--ha-ink) !important;
}

/* The region dropdown (Fern versions, docs.yml), on the right of the header beside the theme toggle
   rather than by the logo, labelled "Region". Fern only offers it by the logo, so on a wide screen it's
   moved across; on a narrow one Fern shows it in the menu instead. */
@media (min-width: 1024px) {

  .fern-header-content .max-w-page-width {
    position: relative;
  }
  .fern-header-logo-container {
    position: static;
  }
  /* Region, then the theme toggle (36px), a gap apart. */
  .fern-header-selectors {
    position: absolute;
    right: calc(36px + var(--ha-header-gap));
    top: 50%;
    transform: translateY(-50%);
  }

}
/* Room for it on a mid-width screen: a narrower search box, so they don't overlap. */
@media (min-width: 1024px) and (max-width: 1439px) {

  .fern-header-content .max-w-\[640px\] {
    max-width: 420px;
  }

}
.fern-version-selector .version-dropdown-trigger {
  color: var(--ha-ink);
}
/* In the mobile menu Fern marks the dropdown with a tag icon, for versions; the label says what it is. */
.fern-version-selector .fern-selection-item-icon {
  display: none;
}
.fern-version-selector .version-dropdown-trigger::before {
  content: "Region";
  margin-right: 6px;
  color: var(--ha-ink-ghost);
  font-size: 0.8125rem;
}