@font-face {
    font-family: 'GT-Planar';
    src: url('/learn/_fern-files/fern.docs.buildwithfern.com/a8f095799dd15f03b9a1f7d1d0612292d837452a4f54328f3c53f3e6f64608f4/assets/GT-Planar.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT-Planar';
    src: url('/learn/_fern-files/fern.docs.buildwithfern.com/99485baca0155691a5be09ae38cbd12f069be089e4298087de880212393ebf2a/assets/GT-Planar-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT-Planar';
    src: url('/learn/_fern-files/fern.docs.buildwithfern.com/4c450750364f55abbf3c6d8277854d98a2608a70f0eb9b7ef67d7bb10072bdf4/assets/GT-Planar-Bold.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT-Planar-Bold';
    src: url('/learn/_fern-files/fern.docs.buildwithfern.com/4c450750364f55abbf3c6d8277854d98a2608a70f0eb9b7ef67d7bb10072bdf4/assets/GT-Planar-Bold.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

:root: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', 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', 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 {
  /* Low-specificity (0,1,0) block: safe only because the library sets no :root
     default for these. If you add a var here (or to the theme block below), add
     it to LOADER_LOW_SPECIFICITY_VARS in theme-css-var-collisions.test.ts. */
  --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;
}

.motivation p {
  max-width: unset !important;
}

.showcase h2 {
  margin-bottom: 0.25em;
}

:is(.dark) .showcase .logo-icon {
  filter: invert(1);
  margin-top: 0px;
  margin-bottom: 0px;
}

.logo-icon {
  margin-right: 10px;
}

.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 ***/

/*** START -- PRODUCT SELECTOR STYLING ***/
@media (min-width: 1024px) {
  div[data-testid="product-dropdown-content"] {
    border-radius: 1.5rem !important;
  }

  .product-dropdown-trigger {
    svg {
      transform: translateY(2px);
    }
  }

  .fern-product-selector {
    transform: translate(-2px, 2px);;
  }

  .product-item-title {
   font-size: 1.25rem;
  }

  div:has(> .fern-product-selector-radio-group) {
    margin-top: 0.5rem;
  }

  .fern-product-selector-radio-group { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 1.25rem;
    height: 248px;
    
    > a {
      max-width: 320px;
      margin: -0.75rem;
      position: relative;
      outline: none;

      .fern-selection-item{
        border-radius: 1rem;
        border-color: transparent;
        outline: none;
      }

    }

    > a[href*="home"] {
      grid-column: 1;
      grid-row: 1;
    }

    > a[href*="sdks"] {
      grid-column: 2;
      grid-row: 1;
    }

    > a[href*="docs"] {
      grid-column: 1;
      grid-row: 2;
    }

    > a[href*="dashboard"] {
      grid-column: 2;
      grid-row: 2;
    }

    > a[href*="cli-api-reference"] {
      grid-column: 1;
      grid-row: 3;
    }

    > a[href*="openapi"],
    > a[href*="asyncapi"],
    > a[href*="openrpc"],
    > a[href*="grpc"],
    > a[href*="ferndef"] {
      align-self: start;
      .fern-selection-item-subtitle {
        display: none;
      }
    }

    > a[href*="openapi"] {
      grid-column: 3;
      grid-row: 1;

      .fern-selection-item-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    > a[href*="asyncapi"] {
      grid-column: 3;
      grid-row: 2;
      transform: translateY(-32px);

      .fern-selection-item-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    > a[href*="openrpc"] {
      grid-column: 3;
      grid-row: 3;
      transform: translateY(-64px);

      .fern-selection-item-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    > a[href*="grpc"] {
      grid-column: 3;
      grid-row: 4;
      transform: translateY(-96px);

      .fern-selection-item-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    > a[href*="ferndef"] {
      grid-column: 3;
      grid-row: 5;
      transform: translateY(-96px);

      .fern-selection-item-icon {
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    > a[href="/learn/api-definitions"] {
      display: none;
    }
  }
}

@media (max-width: 640px) {
  .fern-product-selector-radio-group {
    width: 100%;
  }
  
  div[data-testid="product-dropdown-content"] {
    width: calc(100vw - 2rem) !important;
  }

  div.fern-scroll-area-viewport.group\/sidebar.mask-grad-y-3.sticky.overscroll-contain > div > div {
    border-top-width: 0px !important;
  }
}

:is(.dark) .fern-product-selector-radio-group a[href*="home"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-home-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="sdks"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-sdks-dark.png") !important;
} 

:is(.dark) .fern-product-selector-radio-group a[href*="docs"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-docs-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="cli-api-reference"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-cliapi-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="dashboard"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-dashboard-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="openapi"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/openapi-definition-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="ferndef"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/fern-definition-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="asyncapi"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/asyncapi-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="openrpc"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/openrpc-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="grpc"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/grpc-dark.png") !important;
}

:is(.dark) .fern-product-selector-radio-group a[href*="cli-generator"] img {
  content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-cli-generator-dark.png") !important;
}

/*** END -- PRODUCT SELECTOR STYLING ***/

/*** START -- DOCS HOMEPAGE STYLING ***/
.docs-homepage {
  position: relative;
  .fern-card {
    text-decoration: none !important;

    .external-link-icon {
      display: none !important;
    }
  } 


  .dashed-pattern-left {
    position: absolute;
    left: -4rem;
    top: -8.5rem;
    height: calc(100% + 26rem);
    width: 1rem;
    opacity: 1;
    pointer-events: none;
    border-right: 1px solid var(--grayscale-5);
    mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
    -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  }

  .dashed-pattern-right {
    position: absolute;
    right: -4rem;
    top: -8.5rem;
    height: calc(100% + 26rem);
    width: 1rem;
    opacity: 1;
    pointer-events: none;
    border-left: 1px solid var(--grayscale-5);
    mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  }


  .fern-card {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;

    .card-title {
      display: flex;
      gap: 0.25rem;
      align-items: center;
    }

    img {
      transition: transform 0.15s ease-in-out;
    }

    .arrow-right {
      height: 1rem;
      opacity: 0;
      transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
      transform: translateX(0px);
    }

    &:hover {
      img {
        transform: scale(1.01);
      }

      .arrow-right {
        opacity: 1;
        transform: translateX(2px);
      }
    }
  }
}
/*** END -- DOCS HOMEPAGE STYLING ***/

/*** START -- SDKS HOMEPAGE STYLING ***/
.sdks-homepage {
  position: relative;
  
  .changelog-button {
    display: flex;
    padding: 0.25rem 0.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease-in-out;
    position: relative;
    height: 2rem;
    text-decoration: none !important;

    img {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      position: relative;
    }

    div {
      font-size: 1rem;
      white-space: nowrap;
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      width: 0;
    }

    &:hover {
      gap: 0.25rem;
      background-color: var(--grayscale-a3);

      div {
        max-width: 200px;
        opacity: 1;
        width: fit-content;
      }
    }
  }

  .dashed-pattern-left {
    position: absolute;
    left: -4rem;
    top: -8.5rem;
    height: calc(100% + 26rem);
    width: 1rem;
    opacity: 1;
    pointer-events: none;
    border-right: 1px solid var(--grayscale-5);
    mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
    -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  }

  .dashed-pattern-right {
    position: absolute;
    right: -4rem;
    top: -8.5rem;
    height: calc(100% + 26rem);
    width: 1rem;
    opacity: 1;
    pointer-events: none;
    border-left: 1px solid var(--grayscale-5);
    mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  }

  .card-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fern-card {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    text-decoration: none !important;

    .external-link-icon {
      display: none !important;
    }

    .card-title {
      display: flex;
      gap: 0.25rem;
      align-items: center;
    }

    img {
      transition: transform 0.15s ease-in-out;
    }

    .arrow-right {
      height: 1rem;
      opacity: 0;
      transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
      transform: translateX(0px);
    }

    &:hover {
      img {
        transform: scale(1.01);
      }

      .arrow-right {
        opacity: 1;
        transform: translateX(2px);
      }
    }
  }
}
/*** END -- SDKS HOMEPAGE STYLING ***/

/*** START -- LANDING PAGE STYLING ***/
:is(.dark) {
  .lp-page-container {
    .dashed-gradient {
      background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_351_76922)"><rect width="100" height="100" fill="transparent"/><path d="M0 100L100 -7.07537e-07" stroke="%2362636C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_351_76922"><rect width="100" height="100" fill="white"/></clipPath></defs></svg>');
    }
  }

  .bg-gradient-green-left {
    background-image: radial-gradient(farthest-side, var(--green-2), transparent) !important;
  }

  .bg-gradient-blue-left {
    background-image: radial-gradient(farthest-side, var(--blue-2), transparent) !important;
  }

  .bg-gradient-green-right {
    background-image: radial-gradient(farthest-side, var(--green-2), transparent) !important;
  }

  .bg-gradient-blue-right {
    background-image: radial-gradient(farthest-side, var(--blue-2), transparent) !important;
  }
}

.bg-gradient-green-left {
  top: 0;
  width: 700px;
  height: 1000px;
  position: fixed;
  transform: translate(-50%, -10%) rotate(30deg);
  background-image: radial-gradient(farthest-side, var(--green-3), transparent);
}

.bg-gradient-blue-left {
  top: 0;
  width: 800px;
  height: 600px;
  position: fixed;
  transform: translate(-60%, 50%) rotate(-30deg);
  background-image: radial-gradient(farthest-side, var(--blue-3), transparent);
}

.bg-gradient-green-right {
  top: 0;
  width: 700px;
  height: 1000px;
  position: fixed;
  right: 0;
  transform: translate(50%, -10%) rotate(-30deg);
  background-image: radial-gradient(farthest-side, var(--green-3), transparent);
}

.bg-gradient-blue-right {
  top: 0;
  width: 800px;
  height: 600px;
  position: fixed;
  right: 0;
  transform: translate(60%, 50%) rotate(30deg);
  background-image: radial-gradient(farthest-side, var(--blue-3), transparent);
}

@media (max-width: 640px) {
  .bg-gradient-blue-left, .bg-gradient-green-right, .bg-gradient-blue-right, .bg-gradient-green-left {
    display: none;
  }
}

.lp-page-container {
  min-height: 100vh;
  position: relative;

  /* Hide the Radix wrapper only when it contains the fern anchor */
  [data-radix-popper-content-wrapper]:has(a.fern-anchor) {
    display: none !important;
  }

  .dashed-pattern {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1rem;
    opacity: 1;
    pointer-events: none;
    mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
    -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  }

  .dashed-pattern-left {
    left: -1rem;
    border-right: 1px solid var(--grayscale-5);
  }

  .dashed-pattern-right {
    right: -1rem;
    border-left: 1px solid var(--grayscale-5);
  }

  .main-content {
    max-width: 60rem;
    margin: 0 auto;
    position: relative;
    padding: 3rem 0;
  }

  .hero-section {
    margin-bottom: 3rem;
  }

  .hero-title-container {
    margin-bottom: 2rem;
    padding: 0 2rem;
  }

  .hero-title {
    font-size: 2.25rem;
    font-weight: bold;
    letter-spacing: -0.025em;
    color: var(--grayscale-12);
  }

  .hero-description {
    font-size: 1rem;
    color: var(--grayscale-10);
  }

  .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  /* Reusable panel card */
  .panel-card {
    border-top: 1px solid var(--grayscale-5);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .panel-card.with-left-border {
    border-left: 1px solid var(--grayscale-5);
  }

  .sdks-card {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .docs-card {
    gap: 1rem;
    grid-row: 1 / 3;
  }

  /* .ai-search-card inherits base panel styles */

  .card-header {
    display: flex;
    flex-direction: column;
  }

  .card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--grayscale-12);
    display: flex;
    gap: 0.25rem;
    align-items: center;
    text-decoration: none;

    img {
      height: 1rem;
      opacity: 0;
      transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
      transform: translateX(0px);
    }

    &:hover {
      img {
        opacity: 1;
        transform: translateX(2px);
      }
    }
  }

  .card-description {
    font-size: 0.875rem;
    color: var(--grayscale-10);
  }

  .sdks-preview {
    width: 100%;
    position: relative;
  }

  .preview-img {
    width: 100%;
    object-fit: cover;
  }

  .language-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .language-icons-label {
    font-size: 0.875rem;
    color: #62636c;
    margin-right: 0.5rem;
  }

  .language-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    border-radius: 0.25rem;

    &:hover {
      background-color: var(--grayscale-a3);
    }
  }

  .language-icon-img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
  }

  .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .action-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .community-section {
    border-top: 1px solid var(--grayscale-5);
    border-bottom: 1px solid var(--grayscale-5);
    padding: 3rem 2rem;
    
    &.specs {
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: none;
    }
  }

  .community-title-container {
    margin-bottom: 2rem;

    &.specs {
      margin-bottom: 0rem;
      flex: 1;
    }
  }

  .community-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .specs-grid {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex: 1;
    flex-wrap: wrap;
  }

  .community-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    align-items: flex-start;
  }

  .community-card-header {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .specs-card {
    flex-direction: row;
    align-items: center;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none !important;
    
    img {
      width: 2rem;
      height: 2rem;
    }

    &:hover {
      background-color: var(--grayscale-a3);
    }
  }

  .community-card-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--grayscale-12);
  }

  .community-card-description {
    font-size: 0.875rem;
    color: var(--grayscale-10);
    margin-bottom: 0.5rem;
  }

  .twitter-strikethrough {
    text-decoration: line-through;
  }

  .help-section {
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .help-buttons {
    display: flex;
    gap: 1.5rem;
  }

  .a-btn {
    text-decoration: none !important;
    font-weight: 500 !important;
    width: fit-content !important;

    img {
      transition: transform 0.15s ease-in-out;
      transform: translate(0px, 0px);
    }

    svg {
      display: none !important;
    }

    &.no-hover {
      cursor: default;

      &:hover {
        background: none !important;
        color: var(--grayscale-a11) !important;
      }
    }

    &:hover {
      img:not(:first-child) {
        transform: translate(2px, 0px);
      }
    }
  }

  /* Responsive Design - Mobile First */
  @media (max-width: 640px) {
    .main-content {
      padding: 2rem 0rem;
    }

    .dashed-pattern-left {
      left: 0px;
      display: none;
    }

    .dashed-pattern-right {
      right: 0px;
      display: none;
    }

    .hero-section {
      margin-bottom: 2rem;
    }

    .hero-title-container {
      padding: 0 1rem;
    }

    .feature-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      gap: 0;
    }

    .sdks-card {
      padding: 2rem 1rem;
    }

    .docs-card {
      padding: 2rem 1rem;
      border-left: none;
      grid-column: 1;
      grid-row: auto;
    }

    .ai-search-card {
      padding: 2rem 1rem;
    }

    .card-title {
      font-size: 1.375rem;
    }

    /* .card-description {
      font-size: 1.0625rem;
    } */

    .language-icons-label {
      width: 100%;
    }

    .action-buttons {
      flex-direction: row;
      gap: 0.75rem;
      align-items: stretch;
      flex-wrap: wrap;
    }

    .action-buttons-vertical {
      gap: 0.75rem;
    }

    .community-section {
      padding: 2rem 1rem;

      &.specs {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    .community-title-container {
      &.specs {
        margin-bottom: 2rem;
      }
    }

    .specs-card {
      padding-left: 0;
      padding-right: 0;
    }

    .community-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .community-card {
      border-radius: 0.5rem;
      transition: all 0.2s ease;
    }

    .community-card-header {
      flex-direction: row;
      align-items: center;
    }

    .help-section {
      padding: 2rem 1rem;
    }

    .help-buttons {
      flex-direction: column;
      gap: 1rem;
    }

    
  }

  /* Tablet breakpoint - Better use of space */
  @media (max-width: 720px) and (min-width: 481px) {
    .community-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .hero-title {
      font-size: 2rem;
    }

    .feature-grid {
      gap: 1px;
    }
  }

  /* Very small screens */
  @media (max-width: 480px) {
    .hero-title {
      font-size: 1.75rem;
    }

    .card-title {
      font-size: 1.25rem;
    }

    .specs-grid {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .language-icons-label {
      margin-right: 0;
      margin-bottom: 0.5rem;
    }
  }
}



.sdk-rive {
  aspect-ratio: 369/93;
  width: 100%;
  display: block;
  overflow: visible; /* Changed from hidden - was clipping interactive areas */
  transform: translateY(0px);
  transition: transform 250ms ease-out !important;
  will-change: transform;
  /* Ensure click events can reach the canvas */
  pointer-events: auto;
  min-height: 104px;
}

.sdk-rive:hover {
  transform: translateY(-3px) !important;
}

.docs-rive {
  min-height: 213px;
}

.ask-fern-rive {
  min-height: 114px;
}

@media (max-width: 640px) {
  .sdk-rive {
    min-height: inherit;
  }

  .docs-rive {
    min-height: inherit;
  }

  .ask-fern-rive {
    min-height: inherit;
  }
}

/* Ensure the canvas can receive clicks and is properly layered */
.rive-container {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  /* Ensure container doesn't block events */
  pointer-events: none;
}

/* Fade out effect for AI animation */
.rive-container.fade-bottom {
  mask: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

.rive-container canvas {
  width: 100%;
  height: 100%;
  vertical-align: baseline;
  display: inline-block;
  /* Allow canvas to receive events while container doesn't */
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
  vertical-align: baseline;
  display: inline-block;
}

/*** END -- LANDING PAGE STYLING ***/

/* HACK: add a slash to markdown snippet documentation (otherwise it gets parsed by CLI) */
.modify-snippet tbody tr:nth-child(1) td:last-of-type .line span:last-of-type:before,
.modify-snippet tbody tr:nth-child(5) td:last-of-type .line span:last-of-type:before {
  content: "/";
  display: inline-block;
}

.modify-titled-snippet tbody tr:last-child td:last-of-type .line span:last-of-type:before {
  content: "/";
  display: inline-block;
}

/*** START -- FERN EDITOR STYLING ***/
.fe-action-button {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--grayscale-12);

  svg.external-link-icon {
    display: none;
  }
}
/*** END -- FERN EDITOR STYLING ***/

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

/*** START -- HIGHLIGHTED FRAME STYLING ***/
/* @keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
} */

.highlight-frame {
  /* background-color: var(--accent-a2); */
  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;
  /* animation: gradient-shift 20s ease-in-out infinite; */

  .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;
    /* No overflow: hidden to allow sticky positioning */
  }

  > *: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 ***/