/*fern-site-stylesheet*/@font-face {
    font-family: 'Unica77Cohere';
    src: url('/_fern-files/cohere.docs.buildwithfern.com/930ddb5be21405c7cd2f3eea769351a1b09d6bd609624e3bed6ce6e1a890dcc9/assets/Unica77Cohere/Unica77CohereWeb-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Unica77Cohere';
    src: url('/_fern-files/cohere.docs.buildwithfern.com/9799faca170e0f8858a85d8ab8668351b5acc879f6b20eb010c733371f382363/assets/Unica77Cohere/Unica77CohereWeb-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Unica77Cohere';
    src: url('/_fern-files/cohere.docs.buildwithfern.com/9975c9b91455bd5ac78bf93101bf3294ded9cd5c689725f78f6a6c5a85563868/assets/Unica77Cohere/Unica77CohereWeb-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Unica77Cohere';
    src: url('/_fern-files/cohere.docs.buildwithfern.com/814f04a334046e4900358078afe2c97693d9b8819d6d390b0d929b2e5bd9b22e/assets/Unica77Cohere/Unica77CohereWeb-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Unica77Cohere';
    src: url('/_fern-files/cohere.docs.buildwithfern.com/183842c4a6be769d8f13ca2c2dbb21d338cf6bb2af3ddf5302ee128dc0d67853/assets/Unica77Cohere/Unica77CohereWeb-Bold.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Unica77Cohere';
    src: url('/_fern-files/cohere.docs.buildwithfern.com/cf69bfb0ffba2d7d000ea1ddcebaecd366598fb3dd67a387bd5f7f5cd03e912d/assets/Unica77Cohere/Unica77CohereWeb-BoldItalic.woff2') format('woff2');
    font-weight: 600 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'CohereVariable';
    src: url('/_fern-files/cohere.docs.buildwithfern.com/0ec26a04ccb642f06f7634eae2e27385428ee9b1bdc7b68cc3f4c13b58c2a819/assets/CohereVariable.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'CohereMono';
    src: url('/_fern-files/cohere.docs.buildwithfern.com/7135321047cbd149ae5b1619cc7eba08a3543f5f50bf868eb805fef0676b9065/assets/CohereMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'CohereMono';
    src: url('/_fern-files/cohere.docs.buildwithfern.com/88c65b9002fc8a9cba70c0bf2a309d6f388559224a764907b470b4ac3427ba05/assets/CohereMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 50px;
  --header-height-real: 50px;
  --mobile-header-height-real: 50px;
  --content-width: 640px;
  --sidebar-width: 298px;
  --page-width: 100vw;
  --logo-height: 16px;
  --font-body: 'Unica77Cohere', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'CohereVariable', 'Unica77Cohere', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'CohereMono', 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: #e0e2e1;
  --accent-2: #d9dddb;
  --accent-3: #cad5d0;
  --accent-4: #bcccc5;
  --accent-5: #aec3ba;
  --accent-6: #9fb8ae;
  --accent-7: #8daa9e;
  --accent-8: #729687;
  --accent-9: #39594d;
  --accent-10: #2a4a3e;
  --accent-11: #2c4c40;
  --accent-12: #1e2f28;

  --accent-a1: #94bcfe18;
  --accent-a2: #0760b111;
  --accent-a3: #01637221;
  --accent-a4: #045f5c31;
  --accent-a5: #015b4f40;
  --accent-a6: #03564751;
  --accent-a7: #034f3d65;
  --accent-a8: #00493382;
  --accent-a9: #012c1fc1;
  --accent-a10: #00281bd1;
  --accent-a11: #00291bcf;
  --accent-a12: #01150edf;

  --accent-contrast: #fff;
  --accent-surface: #d6dbdbcc;
  --accent-indicator: #39594d;
  --accent-track: #39594d;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(91.1% 0.0028 168.8);
      --accent-2: oklch(89.4% 0.0055 168.8);
      --accent-3: oklch(86.3% 0.0133 168.8);
      --accent-4: oklch(83.2% 0.0203 168.8);
      --accent-5: oklch(79.9% 0.0258 168.8);
      --accent-6: oklch(76.1% 0.0307 168.8);
      --accent-7: oklch(71.2% 0.036 168.8);
      --accent-8: oklch(64.1% 0.0454 168.8);
      --accent-9: oklch(43.5% 0.0428 168.8);
      --accent-10: oklch(37.9% 0.0428 168.8);
      --accent-11: oklch(38.7% 0.0428 168.8);
      --accent-12: oklch(28.7% 0.0245 168.8);

      --accent-a1: color(display-p3 0.4157 0.6549 1 / 0.063);
      --accent-a2: color(display-p3 0.0118 0.3255 0.6196 / 0.061);
      --accent-a3: color(display-p3 0.0039 0.3529 0.3922 / 0.121);
      --accent-a4: color(display-p3 0.0039 0.3059 0.298 / 0.177);
      --accent-a5: color(display-p3 0.0039 0.298 0.2549 / 0.233);
      --accent-a6: color(display-p3 0.0039 0.2784 0.2353 / 0.294);
      --accent-a7: color(display-p3 0.0039 0.251 0.1922 / 0.367);
      --accent-a8: color(display-p3 0.0039 0.2392 0.1647 / 0.479);
      --accent-a9: color(display-p3 0 0.1373 0.0902 / 0.725);
      --accent-a10: color(display-p3 0 0.1216 0.0784 / 0.789);
      --accent-a11: color(display-p3 0 0.1255 0.0824 / 0.781);
      --accent-a12: color(display-p3 0 0.0588 0.0314 / 0.854);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.8392 0.8588 0.8549 / 0.8);
      --accent-indicator: oklch(43.5% 0.0428 168.8);
      --accent-track: oklch(43.5% 0.0428 168.8);
    }
  }
}


.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: #0c100e;
  --accent-2: #131917;
  --accent-3: #1a2a23;
  --accent-4: #1e372d;
  --accent-5: #284439;
  --accent-6: #335246;
  --accent-7: #416355;
  --accent-8: #4f7968;
  --accent-9: #517b6a;
  --accent-10: #496c5e;
  --accent-11: #9bc7b4;
  --accent-12: #ceefe0;

  --accent-a1: #008f0002;
  --accent-a2: #6cf7c90b;
  --accent-a3: #70fdbf1d;
  --accent-a4: #68fdc12b;
  --accent-a5: #7ffccb39;
  --accent-a6: #8ffdd248;
  --accent-a7: #9dfdd55a;
  --accent-a8: #a0ffd871;
  --accent-a9: #a2ffd973;
  --accent-a10: #a5ffdb63;
  --accent-a11: #c6ffe6c4;
  --accent-a12: #dcffefee;

  --accent-contrast: #fff;
  --accent-surface: #17231f80;
  --accent-indicator: #517b6a;
  --accent-track: #517b6a;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(16.8% 0.0075 167.1);
      --accent-2: oklch(20.8% 0.0107 167.1);
      --accent-3: oklch(26.8% 0.0245 167.1);
      --accent-4: oklch(31.3% 0.0358 167.1);
      --accent-5: oklch(35.9% 0.0396 167.1);
      --accent-6: oklch(41% 0.0419 167.1);
      --accent-7: oklch(47% 0.0461 167.1);
      --accent-8: oklch(53.9% 0.054 167.1);
      --accent-9: oklch(54.7% 0.054 167.1);
      --accent-10: oklch(50% 0.0461 167.1);
      --accent-11: oklch(79.3% 0.054 167.1);
      --accent-12: oklch(92.4% 0.039 167.1);

      --accent-a1: color(display-p3 0 0.8431 0 / 0.005);
      --accent-a2: color(display-p3 0.5294 0.9961 0.8078 / 0.042);
      --accent-a3: color(display-p3 0.5451 0.9961 0.7529 / 0.113);
      --accent-a4: color(display-p3 0.5647 0.9961 0.8039 / 0.163);
      --accent-a5: color(display-p3 0.6196 1 0.8392 / 0.217);
      --accent-a6: color(display-p3 0.6745 1 0.8588 / 0.275);
      --accent-a7: color(display-p3 0.7059 1 0.8667 / 0.346);
      --accent-a8: color(display-p3 0.7137 1 0.8667 / 0.438);
      --accent-a9: color(display-p3 0.7216 1 0.8706 / 0.446);
      --accent-a10: color(display-p3 0.7333 1 0.8784 / 0.384);
      --accent-a11: color(display-p3 0.8235 0.9961 0.9098 / 0.763);
      --accent-a12: color(display-p3 0.8902 1 0.9451 / 0.93);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0941 0.1333 0.1176 / 0.5);
      --accent-indicator: oklch(54.7% 0.054 167.1);
      --accent-track: oklch(54.7% 0.054 167.1);
    }
  }
}


.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(57, 89, 77, 1);
  --background: rgba(232, 230, 222, 1);
  --border: rgba(224, 224, 224, 1);
  --sidebar-background: rgba(250, 250, 250, 1);
  --header-background: rgba(250, 250, 250, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #e8e6de;
}

.dark {
  color-scheme: dark;
  --accent: rgba(81, 123, 106, 1);
  --background: rgba(15, 15, 15, 1);
  --border: rgba(41, 41, 41, 1);
  --sidebar-background: rgba(28, 28, 28, 1);
  --header-background: rgba(28, 28, 28, 1);
  --card-background: rgba(0, 0, 0, 1);
  --theme-color: #0f0f0f;
}

/* Canvas Body Theme */
:root [data-body-theme="canvas"] .canvas-wrapper {
  display: flex;
  width: 100%;
  overflow: auto;
  height: 100%;
  border-radius: 16px 16px 16px 16px;
  justify-content: center;
  align-items: flex-start;
  margin-right: 12px;
  margin-bottom: 12px;
  height: calc(100vh - var(--header-height-real) - 12px);
  border: 1px solid var(--border);
  background-color: var(--card-background);
}

:root [data-body-theme="canvas"] body {
  overflow: hidden;
}


:root [data-body-theme="canvas"] #fern-toc {
  position: sticky;
  max-height: calc(100vh - var(--header-height-real) - 12px);
  overflow-y: auto;
  overflow-x: hidden;
  top: 0;
}

:root [data-body-theme="canvas"] #fern-toc:has(> *) {
  margin-right: 12px;
}

:root [data-body-theme="canvas"] .fern-layout-guide,
:root [data-body-theme="canvas"] .fern-layout-overview {
  width: 100%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

:root [data-body-theme="canvas"] .fern-layout-reference {
  width: 100%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

/* The sticky changelog day label offsets its top by the header height by default
   (window scroll). On canvas the scroll container already starts below the fixed
   header, so zero the offset to keep the date from pinning too early. */
:root [data-body-theme="canvas"] {
  --fern-changelog-sticky-top: 0px;
}

#fern-announcement {
    border-radius: 0.5rem !important;
    overflow: hidden !important;
}

#fern-announcement > div > div {
    display: flex !important;
    align-items: center !important;
}

#fern-announcement button.absolute.right-0.fern-button {
    right: 0.625rem !important;
}

.fern-changelog>main {
    width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 525 !important;
  /* font-family: CohereText !important; */
  font-feature-settings: "cuts" 0;
}

h1 {
  font-weight: 400 !important;
  /* font-size: 35px !important; */
}

h2 {
  font-weight: 450 !important;
  letter-spacing: -0.01em;
  font-style: normal;
  /* font-size: 24px !important; */
  line-height: 110%;
}

.fern-sidebar-heading-content {
  font-weight: 500 !important;
}

.fern-header-tab-button .font-medium {
  font-weight: 400 !important;
}

.fern-mdx-link {
  font-weight: 400 !important;
}

.fern-announcement .fern-mdx-link, .fern-announcement svg.external-link-icon {
    color: #fff !important;
}

/* .font-semibold {
  font-weight: 500 !important;
} */

.fern-api-property-key {
  font-weight: 500 !important;
}

th {
  font-weight: 500 !important;
}

@layer utilities {

  .image-desktop {
    display: none;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }

  @media only screen and (min-width: 768px) {

    .image-desktop {
      display: block;
    }
  
}

  .image-mobile {
    display: block;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }

  @media only screen and (min-width: 768px) {

    .image-mobile {
      display: none;
    }
  
}

}

/*! BEGIN STYLESHEET_HUB2 */
button[class^="Sidebar-link-buttonWrapper"] {
  display: none !important;
}

.flex-col-to-row {
  flex-direction: column;
}

.flex-row-to-col {
  flex-direction: row;
}

.w-100-to-50 {
  max-width: 100%;
}

.w-100-to-75-to-50 {
  max-width: 100%;
}

.h1-title {
  /* font-family: CohereText !important; */
  letter-spacing: -0.01em;
  font-style: normal;
  font-weight: 400;
  font-size: 35px !important;
  line-height: 100%;
}

.h2-title {
  /* font-family: CohereText !important; */
  letter-spacing: -0.01em;
  font-style: normal;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 110%;
}

.h3-title {
  /* font-family: CohereText !important; */
  font-style: normal;
  font-weight: 500;
  font-size: 16.8px !important;
  line-height: 124%;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
}

.h4-title {
  /* font-family: CohereText !important; */
  font-style: normal;
  font-weight: 500;
  font-size: 16px !important;
  line-height: 150%;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
}

.p-base {
  /* font-family: CohereText !important; */
  font-style: normal;
  font-weight: 400;
  font-size: 14px !important;
  line-height: 150%;
  letter-spacing: 0.03em;
}

@media only screen and (min-width: 768px) {

  .flex-col-to-row {
    flex-direction: row;
  }

  .flex-row-to-col {
    flex-direction: column;
  }

  .w-100-to-50 {
    max-width: 45%;
  }

  .w-100-to-75-to-50 {
    max-width: 75%;
  }

}

@media only screen and (min-width: 1024px) {

  .w-100-to-75-to-50 {
    max-width: 50%;
  }

  .p-base {
    font-size: 16px;
  }

}

@media (max-width: 1024px) {

  .fern-body {
    gap: 0px !important;
  }

}

/*! END STYLESHEET_HUB2 */

/*~~~~~~~~~GENERAL STYLES~~~~~~~~~~~*/
.grid-container-fluid {
  margin: 0 !important;
}

#content-container {
  max-width: 100% !important;
}

#content-head h1 {
  display: none;
}

.page-title {
  margin-bottom: 24px !important;
}

/* Mobile First Design */

:root {
  --simple-card-bg-color: #f5f4f2;
  --divider-border-color: #bdbdbd;
  --page-padding: 12px;
}

.dark {
  --simple-card-bg-color: #1a1a1a;
  --divider-border-color: #1a1a1a;
}

.divider {
  border: solid var(--divider-border-color);
  border-width: 1px 0px 0px 0px;
  margin-bottom: 40px;
}

.page-title-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  height: 100%;
  padding-top: 40px;
}

.page-secondary-title-container {
  margin-top: 48px;
  margin-bottom: 32px;
}

.page-blurb {
  width: 100%;
}

.all-cards-container {
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 40px;
}

.cards-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@layer components {

  .small-tag-light {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 12px;
    width: 90px;
    height: 22px;
    background: #ebebf8;
    border: 1px solid rgba(43, 38, 73, 0.2);
    border-radius: 30px;
    font-size: 10.5px;
    color: #333293;
    white-space: nowrap;
  }

  .small-tag-dark {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 12px;
    width: 72px;
    height: 22px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      #2b2649;
    border: 1px solid rgba(46, 78, 74, 0.5);
    border-radius: 30px;
    font-size: 10.5px;
    color: #ebebf8;
    white-space: nowrap;
  }

}

.small-tag-container {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.simple-card-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--divider-border-color);
  border-radius: 10px;
}

.simple-card-text-and-link-container {
  background: var(--simple-card-bg-color);
  border-top: 1px solid var(--divider-border-color);
  border-radius: 0px 0px 10px 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.simple-card-text-container {
  display: flex;
  flex-direction: column;
  /* padding: 0px 24px 0px 24px; */
  /* if there is a tag or time data exists on the card */
  padding: 32px 24px 16px 24px;
}

.simple-card-link-container {
  display: flex;
  flex-direction: column;
  padding: 14px 24px 17px 24px;
  text-decoration: none;
  margin-top: auto;
}

.toc-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.toc-item {
  padding: 8px 16px 8px 0px;
  border-radius: 10px;
  margin-right: 8px;
  white-space: nowrap;
}

/* MD and above */
@media only screen and (min-width: 768px) {

  .page-blurb {
    width: 60%;
  }

  .all-cards-container {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
  }

  .page-title-container {
    min-height: 260px;
    background-image: none !important;
    height: auto;
    padding-top: 0px;
    justify-content: center;
  }

  .page-secondary-title-container {
    margin-top: 70px;
  }

  .cards-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 40px;
  }

  .p-title {
    min-height: 72px;
  }

  .simple-card-link-container {
    padding-top: 0px;
  }

  .toc-list {
    flex-direction: row;
  }

}

/* LG and higher */
@media only screen and (min-width: 1024px) {

  .page-title-container {
    padding-top: 0px;
  }

  .page-blurb {
    width: 50%;
  }

  .cards-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 40px;
  }

  .p-title {
    min-height: 72px;
  }

}

.header {
  padding: 9px 0 17px 0;
  display: flex;
  flex-direction: column;
}

/* .fern-header .fern-button-text {
  font-family: CohereText,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif !important;
  -webkit-font-smoothing: unset !important;
}

.fern-sidebar-content .fern-button-text {
  font-family: CohereText,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif !important;
  -webkit-font-smoothing: unset !important;
} */

/* BEGIN 2025-12-01 MOBILE HEADER STYLES PATCH */

.fern-header-logo-container img {

  @media screen and (max-width: 576px) {

    width: 21px !important;
    object-fit: cover !important;
    object-position: left !important;
  
}

}

#fern-ask-ai-button {

  @media screen and (max-width: 506px) {

    padding-right: 12px !important;
  
}

}

#fern-ask-ai-button .fern-button-text {

  @media screen and (max-width: 506px) {

    display: none !important;
  
}

}

#fern-search-button .fern-kbd {

  @media screen and (max-width: 460px) {

    display: none !important;
  
}

}

div:has(#fern-search-button) {

  @media screen and (max-width: 438px) {

    justify-content: flex-end !important;
  
}

}

#fern-search-button {

  @media screen and (max-width: 438px) {

    padding-left: 12px !important;
    flex-basis: 40px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    gap: 0 !important;
    font-size: 0 !important;
  
}

}

/* END 2025-12-01 MOBILE HEADER STYLES PATCH */

#content {
  padding: 0 32px;
}

#content-head {
  display: none;
}

.guide-page-title {
  font-size: 29px !important;
}

.back-button .github-button {
  border-radius: 0 !important;
  border-width: 0 !important;
  background-color: inherit !important;
}

.cookbook-nav-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.authors-container {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  gap: 2px 14px;
}

.author-container:not(:is(.simple-card-container *)) {
  margin-bottom: 10px;
  margin-top: -10px;
}

.author-container:is(.simple-card-container *) {
  margin-top: 20px;
}

.author-container {
  line-height: 1.5em;
  display: flex;
  flex-direction: row;
  vertical-align: middle;
  flex-shrink: 0;
}

.author-image {
  height: 1.5em;
  margin: 0px 6px 6px 0px !important;
  border-radius: 50%;
}

.author-name {
  white-space: nowrap;
  vertical-align: middle;
}

@media only screen and (min-width: 620px) {

  .guide-page-title {
    width: 70%;
  }

  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0 17px 0;
  }

  .git--button {
    width: 145px !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;

    width: 154px;
    height: 35px;

    background: #d4d9d4;
    border: 1px solid #9daaa4;
    border-radius: 6px;
  }

}

@media only screen and (min-width: 1024px) {

  .guide-page-title {
    font-size: 46px !important;
  }

  .header {
    padding: 9px 0 32px 0;
  }

}

.side {
  width: 40% !important;
  float: right !important;
  margin-left: .75rem !important;
}

.light-bg {
  background-color: #f7f7f7 !important;
  border-color: #e0e0e0 !important;
  border-radius: .5rem !important;
  border-width: 1px !important;
  padding: 15px !important;
}

.dark-text {
  color: #1a1a1a !important;
}

.dataframe {
  display: block !important;
  overflow: auto !important;
  border-color: #e0e0e0 !important;
  border-radius: .5rem !important;
  border-width: 1px !important;
}

:is(.dark) .dataframe {
  border-color: #ffffff22 !important;
}

.fern-table td {
  max-width: 400px !important;
  overflow: wrap !important;
}

.fern-table th {
  max-width: 400px !important;
  overflow: wrap !important;
}

.orange-text {
  color: #e69138 !important;
  white-space : pre-wrap !important;
}
.dark-orange-text{
  color: #b45f06 !important;
}
.dark-red-text {
  color: #a20302 !important;
  white-space : pre-wrap !important;
}
.red-text {
  color: #cc0100 !important;
}
.bloody-red-text {
  color: #a31515 !important;
}
.dark-pink-text {
  color: #b80672 !important;
}
.magenta-text {
  color: #cc669f !important;
  white-space : pre-wrap !important;
}
.dark-magenta-text {
  color: #78345a !important;
}
.sangria-text {
  color: #981ea0 !important;
}
.dark-sangria-text {
  color: #6b1570 !important;
}
.brown-text {
  color: #5b0f00 !important;
}
.green-text {
  color: #6aa84f !important;
  white-space : pre-wrap !important;
}
.grass-green-text {
  color: #38761d !important;
}
.dark-green-text {
  color: #284e13 !important;
}
.quartz-text {
  color: #a64d79 !important;
}
.blue-text {
  color: #4078f2 !important;
}
.dark-blue-text {
  color: #1255cc !important;
}
.purple-text {
  color: #674ea7 !important;
}
.dark-purple-text {
  color: #361c75 !important;
}
.markdown-body code {
  color: inherit !important;
}
.cm-s-neo .cm-keyword {
  color: inherit !important;  
}
.cm-s-neo .cm-variable {
  color: inherit !important;  
}
.cm-s-neo .cm-string {
  color: inherit !important;  
}
.cm-s-neo .cm-property {
  color: inherit !important;  
}
.theme-light {
  color: #cc669f !important;
}
.override {
  line-height:100% !important;
}
.yellow-highlight{
  background-color: yellow !important;
  display: inline-block !important;
  width: 100px !important; /* Adjust the width as needed */
  /*height: 20px !important;*/ /* Adjust the height as needed */
}

.extra-yellow {
  color: #a31515 !important;
  background-color: #ffff00 !important;
}

.extra-green {
  color: #38761d !important;
}

/*
    This is hacky fix for the code block comment color
*/
.code-block-line-content span[style*="color: rgb(194, 195, 197)"] {
    color: rgb(155, 156, 158) !important;
}

:is(.dark) .simple-card-container {
    --divider-border-color: #2c2c2c;
}

/*
    Styles after redesign
*/
button.fern-version-selector {
    border-radius: .5rem;
    border: 1px solid rgb(174, 175, 179);    
}

.version-dropdown-trigger {
    height: 2rem;
    padding: 0.5rem 0.5rem 0.3rem 1rem;
}

.fern-scroll-area-thumb {
    background-color: rgba(57, 89, 77, 0.5);
}

div.fern-callout[data-intent="note"] a.fern-mdx-link {
    color: blue !important;
}

@media only screen and (min-width: 1024px) {

    /* hide theme selector on desktop */ 
    #fern-sidebar > div > div > div > button {
        display: none !important;
    }

}

code:not(.code-block) {
    font-weight: 500 !important;
}

.dark\:hidden:where(.dark,.dark *) {
  display: none !important;
}

.dark\:block:where(.dark,.dark *) {
  display: block !important;
}
/* Model showcase responsive grid */
@media only screen and (min-width: 768px) {

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

}

/* end of styles after redesign */

/* Fix: unlayered .hidden overrides Tailwind's layered lg:flex for navbar links */
@media only screen and (min-width: 1024px) {

  .fern-header-navbar-links {
    display: flex !important;
  }

}

/* ============================================
   Cohere theme migration: CSS overrides
   Replicates the cohereTheme visual style
   on the default theme layout.
   ============================================ */

/* --- CSS Variables (from CohereDocsStyle) --- */
:root {
  --header-offset: 0px;
  --card-border: #d8cfc1;
  --bg-color-search-dialog: #fafafa;
  --bg-color-header-tab-inactive-hover: #f5f5f5;
  --border-color-header-tab-active: #d8cfc1;
  --bg-color-header-tab-active: #e8e6de;
}

.dark {
  --card-background: #0f0f0f;
  --card-border: #4d4d4d;
  --bg-color-search-dialog: #1e1e1e;
  --bg-color-header-tab-inactive-hover: #292929;
  --border-color-header-tab-active: #4d4d4d;
  --bg-color-header-tab-active: #2a2a2a;
}

/* =============================================
   Floating card layout
   Make the header transparent, give its children
   (logo bar + tabs bar) individual card styling
   with gaps between them. --header-height is
   measured dynamically via ResizeObserver so all
   dependent elements auto-adjust.
   ============================================= */

/* --- Header: beige page background, padding from viewport edges --- */
/* The header element has the fern-background-image class, so we can't
   make it transparent or hide that class. Instead, give it the same
   beige background as the page so the child cards float on it. */
[data-theme="default"]#fern-header {
  background: var(--background) !important;
  border-bottom: none !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 12px !important;
}

/* Inner wrapper: flex column with gap between logo bar and tabs */
[data-theme="default"]#fern-header .width-before-scroll-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* --- Logo bar: card styling --- */
[data-theme="default"]#fern-header .fern-header-content {
  background: var(--header-background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

/* --- Tabs bar: separate card styling --- */
[data-theme="default"]#fern-header .fern-header-tabs {
  background: var(--header-background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --- Header tab items: bordered pills instead of underline indicators --- */
[data-theme="default"]#fern-header [data-radix-collection-item] {
  border-radius: 8px !important;
  height: 40px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  border: 1px solid transparent !important;
}

/* Remove the default underline indicator */
[data-theme="default"]#fern-header [data-radix-collection-item]::after {
  display: none !important;
}

/* Active tab: bordered with background */
[data-theme="default"]#fern-header [data-radix-collection-item][data-state="active"] {
  border-color: var(--border-color-header-tab-active) !important;
  background-color: var(--bg-color-header-tab-active) !important;
}

/* Remove bold text-stroke on active tab */
[data-theme="default"]#fern-header [data-radix-collection-item][data-state="active"] > span {
  -webkit-text-stroke: 0 !important;
}

/* Inactive tab: default border, hover background */
[data-theme="default"]#fern-header [data-radix-collection-item][data-state="inactive"] {
  border-color: var(--border) !important;
}

[data-theme="default"]#fern-header [data-radix-collection-item][data-state="inactive"]:hover {
  background-color: var(--bg-color-header-tab-inactive-hover) !important;
}
[data-theme="default"]#fern-header [data-radix-collection-item][data-state="inactive"]:focus-visible {
  background-color: var(--bg-color-header-tab-inactive-hover) !important; outline: none;
}

/* Center header tabs */
[data-theme="default"]#fern-header [role="tablist"] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =============================================
   Main content area: add padding to let the
   beige background show around content
   ============================================= */

/* Prevent body/page scroll — only the content card scrolls internally */
html, body {
  overflow: hidden !important;
  height: 100% !important;
}

/* Main fills remaining viewport below the fixed header, with padding for card gaps */
main[data-theme="default"] {
  padding: 12px !important;
  gap: 12px !important;
  height: calc(100vh - var(--header-height) - 12px) !important;
  min-height: 0 !important;
  overflow: visible !important;
  top: 12px !important;
}

/* --- Content card: fixed white card that fills remaining space, scrolls internally ---
   Targets every direct child of main except sidebar-related elements.
   data-theme="default" is ON the main element, so use main[data-theme=...].
   This covers: .canvas-wrapper, .fern-layout-*, CustomLayout (.width-before-scroll-bar), etc.
   On some layouts (the changelog) Fern nests the content in an <astro-island>, which is
   display: contents and so generates no box of its own; match through it as well, or the
   real content element never becomes a scroll container. */
main[data-theme="default"] > *:not(#fern-sidebar):not(#fern-sidebar-spacer):not(#fern-toc),
main[data-theme="default"] > astro-island > *:not(#fern-toc) {
  background: var(--header-background) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

/* --- Hide empty TOC (e.g. changelog entry pages) ---
   When the TOC has no children, hide it so it doesn't show as an empty card,
   and restore the content card's right border-radius. */
main[data-theme="default"] > #fern-toc:empty,
main[data-theme="default"] > astro-island > #fern-toc:empty {
  display: none !important;
}

/* --- TOC: visually merge with the content card ---
   The TOC (#fern-toc) is a sibling of the content in main. Give it the same
   card background and merge borders so TOC + content look like one card. */
main[data-theme="default"] > #fern-toc:not(:empty),
main[data-theme="default"] > astro-island > #fern-toc:not(:empty) {
  background: var(--header-background) !important;
  border: 1px solid var(--border) !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  max-height: 100% !important;
  height: auto !important;
  align-self: stretch !important;
  overflow-y: auto !important;
}

/* When TOC is visible and non-empty (xl+), close the gap and merge cards */
@media only screen and (min-width: 1280px) {

  /* Negative margin on TOC to eat the flex gap so it merges flush with content */
  main[data-theme="default"]:has(> #fern-toc:not(:empty)) > #fern-toc:not(:empty),
  main[data-theme="default"] > astro-island:has(> #fern-toc:not(:empty)) > #fern-toc:not(:empty) {
    margin-left: -12px !important;
  }

  main[data-theme="default"]:has(> #fern-toc:not(:empty)) > *:not(#fern-sidebar):not(#fern-sidebar-spacer):not(#fern-toc),
  main[data-theme="default"] > astro-island:has(> #fern-toc:not(:empty)) > *:not(#fern-toc) {
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

}

/* --- Content fills full height ---
   Make the content card and its inner layout stretch to fill the available space. */
main[data-theme="default"] .fern-layout-page {
  min-height: 100% !important;
  flex: 1 !important;
}

/* The changelog is itself the content card, not something inside one, so it has to be
   allowed to shrink below its content height in order to scroll. */
main[data-theme="default"] .fern-layout-changelog {
  min-height: 0 !important;
  flex: 1 !important;
}

main[data-theme="default"] > #fern-toc:not(:empty),
main[data-theme="default"] > astro-island > #fern-toc:not(:empty) {
  min-height: 100% !important;
}

/* --- Sidebar desktop: card-like with rounded corners and border --- */
@media only screen and (min-width: 1024px) {

  #fern-sidebar[data-viewport="desktop"],
  #fern-sidebar[data-viewport="desktop"][data-state="fixed"],
  #fern-sidebar[data-viewport="desktop"][data-state="sticky"] {
    background: var(--header-background) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    overflow: clip !important;
    /* Inset from viewport edges so all 4 corners are visible */
    left: 12px !important;
    bottom: 12px !important;
    top: calc(var(--header-height) + 12px) !important;
    /* Height comes from stretching to main's content box, not from the top/bottom insets
       above: Fern renders the sidebar position: sticky, and under sticky those insets
       position the element without constraining it, so height alone would grow to fit
       the nav and overflow the viewport. */
    align-self: stretch !important; 
    height: auto !important;
    margin-top: 12px !important;
  }

  /* Scrolling happens here rather than on the sidebar itself, which keeps overflow: clip
     above so the rounded corners still crop their contents. */
  #fern-sidebar[data-viewport="desktop"] #fern-sidebar-scroll-area {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 24px !important;
    padding-bottom: 48px !important;
    max-height: 100% !important;
    overflow-y: auto !important;
  }

}

/* --- Sidebar mobile: floating card in bottom-right --- */
#fern-sidebar[data-viewport="mobile"] {
  background: var(--header-background) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  overflow-y: auto !important;
  top: calc(var(--header-height) + 24px) !important;
  bottom: 12px !important;
  right: 12px !important;
}

#fern-sidebar[data-viewport="mobile"] #fern-sidebar-scroll-area {
  padding: 24px 16px 48px 16px !important;
}

/* Hide the background image inside the mobile sidebar */
#fern-sidebar[data-viewport="mobile"].fern-background-image {
  background-image: none !important;
}

#fern-sidebar[data-viewport="mobile"] .fern-selection-item {
  height: 3rem !important;
  padding: 0.5rem 0.5rem .5rem .5rem !important;
}


/* Sidebar overlay */
#fern-sidebar-overlay {
  top: calc(var(--header-height) + 12px) !important;
}

/* --- Canvas wrapper: match cohere border radius (8px instead of default 16px) --- */
.canvas-wrapper {
  border-radius: 8px !important;
  margin: 0 !important;
}

/* --- TOC position adjustments for canvas layout --- */
#fern-toc {
  top: 0 !important;
  max-height: calc(100dvh - var(--header-height) - 2.25rem - 2px) !important;
}

/* --- Reference layout aside adjustments --- */
.fern-layout-reference-content[data-kind="api"] .fern-layout-reference-aside {
  max-height: calc(100svh - var(--header-height) - 8.25rem - 2px) !important;
}

.fern-layout-reference {
  align-items: center !important;
}

@media only screen and (min-width: 768px) {

  .fern-layout-reference-content[data-kind="api"] .fern-layout-reference-aside {
    top: 24px !important;
    max-height: calc(100vh - var(--header-height) - 5.25rem - 2px) !important;
  }

}

.fern-layout-reference-content[data-kind="guide"] .fern-layout-reference-aside {
  top: 24px !important;
  padding-bottom: 48px !important;
}

/* --- Changelog aside --- */
.fern-changelog-content > aside {
  top: 16px !important;
}

.fern-layout-changelog[data-aside-state="visible"] {
  margin-bottom: 0px !important;
}

:root [data-body-theme="canvas"] #fern-toc:has(> *) {
  margin-right: 0px !important;
}

main[data-theme="default"]:has(div.fern-layout-changelog) #fern-sidebar,
main[data-theme="default"]:has(div.fern-layout-changelog) #fern-sidebar-spacer {
  display: none;
}

.dark .simple-card-link-container span {
  --tw-text-opacity: 1 !important;
  color: rgb(81 123 106 / var(--tw-text-opacity, 1)) !important;
}