/*fern-site-stylesheet*/@font-face {
    font-family: 'GT-Planar';
    src: url('/_fern-files/fern-eng.docs.buildwithfern.com/a8f095799dd15f03b9a1f7d1d0612292d837452a4f54328f3c53f3e6f64608f4/assets/GT-Planar.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-017E, U+01FC-0237, U+1E80-1E85, U+1EF2-1EF3;
}
@font-face {
    font-family: 'GT-Planar';
    src: url('/_fern-img/a8f095799dd15f03b9a1f7d1d0612292-v1.latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020, U+002C-002E, U+0030-0039, U+0041-005A, U+0061-007A, U+00A0, U+00AA, U+00BA, U+00C0-00D6, U+00D8-00DE, U+00E0-00EF, U+00F1-00F6, U+00F8-00FF, U+0131, U+0152-0153;
}
@font-face {
    font-family: 'GT-Planar';
    src: url('/_fern-files/fern-eng.docs.buildwithfern.com/99485baca0155691a5be09ae38cbd12f069be089e4298087de880212393ebf2a/assets/GT-Planar-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-019D, U+01E6-0237, U+0259-0272, U+02C7-02DD, U+0300-0328, U+1E80-1EF9, U+207A-208E, U+20BA-20BF, U+2100-2117, U+2153-215E, U+2190-2205, U+2248-2265, U+231B, U+23F3, U+2460-2468, U+25CB-25CF, U+2620, U+2776-277E, U+2B10, U+F8FF, U+FB01-FB02, U+1D11E, U+1F503;
}
@font-face {
    font-family: 'GT-Planar';
    src: url('/_fern-img/99485baca0155691a5be09ae38cbd12f-v1.latin.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000D, U+0020-007E, U+00A0-00AB, U+00AD-00B4, U+00B6-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2002-2005, U+2007-200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
}
@font-face {
    font-family: 'GT-Planar';
    src: url('/_fern-files/fern-eng.docs.buildwithfern.com/4c450750364f55abbf3c6d8277854d98a2608a70f0eb9b7ef67d7bb10072bdf4/assets/GT-Planar-Bold.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-017E, U+01FC-0237, U+1E80-1E85, U+1EF2-1EF3;
}
@font-face {
    font-family: 'GT-Planar';
    src: url('/_fern-img/4c450750364f55abbf3c6d8277854d98-v1.latin.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020, U+002C-002E, U+0030-0039, U+0041-005A, U+0061-007A, U+00A0, U+00AA, U+00BA, U+00C0-00D6, U+00D8-00DE, U+00E0-00EF, U+00F1-00F6, U+00F8-00FF, U+0131, U+0152-0153;
}
@font-face {
    font-family: 'GT-Planar-Bold';
    src: url('/_fern-files/fern-eng.docs.buildwithfern.com/4c450750364f55abbf3c6d8277854d98a2608a70f0eb9b7ef67d7bb10072bdf4/assets/GT-Planar-Bold.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-017E, U+01FC-0237, U+1E80-1E85, U+1EF2-1EF3;
}
@font-face {
    font-family: 'GT-Planar-Bold';
    src: url('/_fern-img/4c450750364f55abbf3c6d8277854d98-v1.latin.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020, U+002C-002E, U+0030-0039, U+0041-005A, U+0061-007A, U+00A0, U+00AA, U+00BA, U+00C0-00D6, U+00D8-00DE, U+00E0-00EF, U+00F1-00F6, U+00F8-00FF, U+0131, U+0152-0153;
}
@font-face {
    font-family: 'GT-Planar Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 103.41%;
    ascent-override: 92.45%;
    descent-override: 18.76%;
    line-gap-override: 0.00%;
}
@font-face {
    font-family: 'GT-Planar-Bold Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 108.57%;
    ascent-override: 88.05%;
    descent-override: 17.87%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 75px;
  --header-height-real: 75px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1504px;
  --logo-height: 20px;
  --font-body: 'GT-Planar', 'GT-Planar Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'GT-Planar-Bold', 'GT-Planar-Bold Fallback', 'GT-Planar', 'GT-Planar 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;
}

@media not all and (min-width: 48rem) {
  :root { --header-height: var(--mobile-header-height-real); }
}

: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: #fafefa;
  --accent-2: #f4fcf3;
  --accent-3: #e6f8e4;
  --accent-4: #d6f3d3;
  --accent-5: #c2ecbe;
  --accent-6: #aae2a5;
  --accent-7: #88d382;
  --accent-8: #52bf4c;
  --accent-9: #008700;
  --accent-10: #007900;
  --accent-11: #008300;
  --accent-12: #1a3e18;

  --accent-a1: #00cc0005;
  --accent-a2: #16c0000c;
  --accent-a3: #13bd001b;
  --accent-a4: #12ba002c;
  --accent-a5: #10b50041;
  --accent-a6: #0fad015a;
  --accent-a7: #0da6007d;
  --accent-a8: #09a400b3;
  --accent-a9: #008700;
  --accent-a10: #007900;
  --accent-a11: #008300;
  --accent-a12: #022a00e7;

  --accent-contrast: #fff;
  --accent-surface: #f1fbf0cc;
  --accent-indicator: #008700;
  --accent-track: #008700;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0076 142.5);
      --accent-2: oklch(98.2% 0.013 142.5);
      --accent-3: oklch(96.1% 0.0328 142.5);
      --accent-4: oklch(93.4% 0.0524 142.5);
      --accent-5: oklch(90.1% 0.075 142.5);
      --accent-6: oklch(85.8% 0.1012 142.5);
      --accent-7: oklch(79.8% 0.1347 142.5);
      --accent-8: oklch(71.6% 0.1844 142.5);
      --accent-9: oklch(54% 0.1838 142.5);
      --accent-10: oklch(49.3% 0.1838 142.5);
      --accent-11: oklch(52.7% 0.1838 142.5);
      --accent-12: oklch(32.7% 0.0758 142.5);

      --accent-a1: color(display-p3 0.2157 0.8039 0.0196 / 0.02);
      --accent-a2: color(display-p3 0.1098 0.7333 0.0196 / 0.044);
      --accent-a3: color(display-p3 0.1294 0.6863 0.0118 / 0.099);
      --accent-a4: color(display-p3 0.149 0.6863 0.0039 / 0.161);
      --accent-a5: color(display-p3 0.1373 0.6745 0.0039 / 0.24);
      --accent-a6: color(display-p3 0.1451 0.6392 0.0039 / 0.334);
      --accent-a7: color(display-p3 0.1294 0.6078 0.0039 / 0.459);
      --accent-a8: color(display-p3 0.1294 0.5961 0 / 0.644);
      --accent-a9: color(display-p3 0.102 0.4431 0 / 0.859);
      --accent-a10: color(display-p3 0.0941 0.3922 0 / 0.879);
      --accent-a11: color(display-p3 0.102 0.4275 0 / 0.863);
      --accent-a12: color(display-p3 0.0275 0.1412 0 / 0.887);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9804 0.9451 / 0.8);
      --accent-indicator: oklch(54% 0.1838 142.5);
      --accent-track: oklch(54% 0.1838 142.5);
    }
  }
}


.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: #0d130c;
  --accent-2: #131b12;
  --accent-3: #192c15;
  --accent-4: #1c3b15;
  --accent-5: #23491b;
  --accent-6: #2c5822;
  --accent-7: #356929;
  --accent-8: #3d7c2e;
  --accent-9: #70e155;
  --accent-10: #65d649;
  --accent-11: #64d549;
  --accent-12: #bbf3af;

  --accent-a1: #00bb0003;
  --accent-a2: #40f9000b;
  --accent-a3: #58ff251d;
  --accent-a4: #50ff1f2d;
  --accent-a5: #5eff353c;
  --accent-a6: #6bfd454d;
  --accent-a7: #72fd4f5f;
  --accent-a8: #73ff4f73;
  --accent-a9: #7eff5fdf;
  --accent-a10: #76fe54d4;
  --accent-a11: #76ff55d2;
  --accent-a12: #c3feb7f3;

  --accent-contrast: #172614;
  --accent-surface: #15251280;
  --accent-indicator: #70e155;
  --accent-track: #70e155;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(17.9% 0.0178 140);
      --accent-2: oklch(21% 0.0201 140);
      --accent-3: oklch(26.9% 0.0462 140);
      --accent-4: oklch(31.8% 0.0731 140);
      --accent-5: oklch(36.6% 0.0853 140);
      --accent-6: oklch(41.5% 0.0967 140);
      --accent-7: oklch(46.8% 0.1107 140);
      --accent-8: oklch(52.6% 0.1287 140);
      --accent-9: oklch(81.4% 0.2064 140);
      --accent-10: oklch(78.2% 0.2064 140);
      --accent-11: oklch(78% 0.2064 140);
      --accent-12: oklch(90.8% 0.107 140);

      --accent-a1: color(display-p3 0 0.9412 0 / 0.009);
      --accent-a2: color(display-p3 0.4353 0.9804 0.0784 / 0.043);
      --accent-a3: color(display-p3 0.4824 0.9961 0.2157 / 0.114);
      --accent-a4: color(display-p3 0.498 0.9961 0.2353 / 0.173);
      --accent-a5: color(display-p3 0.5255 1 0.3098 / 0.232);
      --accent-a6: color(display-p3 0.5725 1 0.3686 / 0.295);
      --accent-a7: color(display-p3 0.5922 1 0.3961 / 0.366);
      --accent-a8: color(display-p3 0.5961 1 0.4078 / 0.446);
      --accent-a9: color(display-p3 0.6314 1 0.4627 / 0.862);
      --accent-a10: color(display-p3 0.6157 1 0.4353 / 0.816);
      --accent-a11: color(display-p3 0.6157 1 0.4353 / 0.811);
      --accent-a12: color(display-p3 0.8196 1 0.749 / 0.942);

      --accent-contrast: #172614;
      --accent-surface: color(display-p3 0.0941 0.1333 0.0706 / 0.5);
      --accent-indicator: oklch(81.4% 0.2064 140);
      --accent-track: oklch(81.4% 0.2064 140);
    }
  }
}


.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(0, 135, 0, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(224, 225, 230, 1);
  --sidebar-background: initial;
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(112, 225, 85, 1);
  --background: rgba(17, 17, 19, 1);
  --border: rgba(57, 58, 64, 1);
  --sidebar-background: initial;
  --header-background: rgba(17, 17, 19, 1);
  --card-background: rgba(34, 35, 37, 1);
  --theme-color: #111113;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
  -webkit-appearance: none;
  appearance: none;
}

#builtwithfern {
  display: none !important;
}

.fern-header, .fern-header-tabs { 
  backdrop-filter: blur(0.5rem);
  background-color: transparent !important;
}

:is(.dark) .fern-header, :is(.dark) .fern-header-tabs {
  background-color: transparent !important;
}

.fern-button-text {
  font-weight: 500 !important;
}

.fern-layout-footer.not-prose {
  margin-top: 4rem !important;
}

.prose {
  color: var(--grayscale-12) !important;
}

h1, h2, h3 {
  letter-spacing: -0.02em !important;
}

/*** START -- MERMAID DIAGRAMS STYLING ***/
#mermaid-svg {

  rect {
    stroke: var(--accent-a6) !important;
    fill: var(--accent-a3) !important;
  }

  tspan, text {
    font-family: var(--font-body) !important;
    color: var(--grayscale-10) !important;
  }

  line, .messageLine0 {
    stroke: var(--grayscale-a9) !important;
  }

  #arrowhead path {
    fill: var(--grayscale-9) !important;
    stroke: var(--grayscale-9) !important;
  }

  .actor-line {
    stroke: var(--accent-a6) !important;
  }
  
  .actor-top {
    rx: 1rem !important;
    ry: 1rem !important;
  }

  .actor-bottom {
    rx: 1rem !important;
    ry: 1rem !important;
  }

}

/*** END -- MERMAID DIAGRAMS STYLING ***/

/* HACK: hide the changelog icon for changelog pages */
.fern-sidebar-link[href$="changelog"] > svg {
  display: none;
}

/*** START -- HIGHLIGHTED FRAME STYLING ***/
.highlight-frame {

  background:
    radial-gradient(circle at 20% 50%, hsla(109,80%,78%,0.5) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, hsla(222,83%,81%,0.5) 0%, transparent 50%),
    radial-gradient(circle at 50% 20%, hsla(108,91%,90%,0.5) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, hsla(222,75%,72%,0.5) 0%, transparent 50%),
    hsla(222,58%,66%,0.5);
  background-size: 100% 100%;
  border-radius: 1rem;
  padding: 0.5rem;
  margin: 1rem 0;

  .highlight-frame-content {

    padding: 1rem;
    background-color: var(--background, lightdark(#fff,#000));
    border-radius: 0.5rem;
    overflow: hidden;

    > *:first-child {
      margin-top: 0;
    }
    
    > *:last-child {
      margin-bottom: 0;
    }
  
}

  .highlight-frame-content-not-prose {
    padding: 0.5rem;
    background-color: var(--background, lightdark(#fff,#000));
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .highlight-frame-content-sticky {
    padding: 0.5rem;
    background-color: var(--background, lightdark(#fff,#000));
    border-radius: 0.5rem;
  }

  > *:first-child {
    margin-top: 0;
  }
  
  > *:last-child {
    margin-bottom: 0;
  }

}
/*** END -- HIGHLIGHTED FRAME STYLING ***/

/*** START -- ASK AI PANEL STYLING ***/
@media (min-width: 1024px) {

  #fern-ask-ai-panel-header {
    height: calc(var(--header-height-real) + 1px);
  }

}
/*** END -- ASK AI PANEL STYLING ***/