/*fern-site-stylesheet*/@font-face {
    font-family: 'Aeonik Pro';
    src: url('/_fern-files/smallest-ai.docs.buildwithfern.com/2da788b0c34b61efbfbea5ece3149fc4af1262ea820b3e0afa643ad822139751/docs/assets/fonts/aeonikpro-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aeonik Pro';
    src: url('/_fern-files/smallest-ai.docs.buildwithfern.com/8605c2686b1fd4bc94a920d598b0bab1aa22ba107052b64329fe453de5b673e5/docs/assets/fonts/aeonikpro-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aeonik Pro';
    src: url('/_fern-files/smallest-ai.docs.buildwithfern.com/2da788b0c34b61efbfbea5ece3149fc4af1262ea820b3e0afa643ad822139751/docs/assets/fonts/aeonikpro-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aeonik Pro';
    src: url('/_fern-files/smallest-ai.docs.buildwithfern.com/8605c2686b1fd4bc94a920d598b0bab1aa22ba107052b64329fe453de5b673e5/docs/assets/fonts/aeonikpro-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('/_fern-files/smallest-ai.docs.buildwithfern.com/afaacc4c5fbba89d2ebf7a02dc4070208540874592a5504d57175782fe893101/docs/assets/fonts/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 768px;
  --sidebar-width: 256px;
  --page-width: 1400px;
  --logo-height: 28px;
  --font-body: 'Aeonik Pro', system-ui, -apple-system, Segoe UI, sans-serif, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Aeonik Pro', system-ui, -apple-system, Segoe UI, sans-serif, 'Aeonik Pro', system-ui, -apple-system, Segoe UI, sans-serif, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace, 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);
}


:root {
  --accent-1: #fcfcfc;
  --accent-2: #f9f9f9;
  --accent-3: #f0f0f0;
  --accent-4: #e8e8e8;
  --accent-5: #e1e1e1;
  --accent-6: #d9d9d9;
  --accent-7: #cecece;
  --accent-8: #bbb;
  --accent-9: #010101;
  --accent-10: #212121;
  --accent-11: #636363;
  --accent-12: #1f1f1f;

  --accent-a1: #00000003;
  --accent-a2: #00000006;
  --accent-a3: #0000000f;
  --accent-a4: #00000017;
  --accent-a5: #0000001e;
  --accent-a6: #00000026;
  --accent-a7: #00000031;
  --accent-a8: #00000044;
  --accent-a9: #000000fe;
  --accent-a10: #000000de;
  --accent-a11: #0000009c;
  --accent-a12: #000000e0;

  --accent-contrast: #fff;
  --accent-surface: #f8f8f8cc;
  --accent-indicator: #010101;
  --accent-track: #010101;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --accent-1: oklch(99.2% 0 none);
      --accent-2: oklch(98.1% 0 none);
      --accent-3: oklch(95.5% 0 none);
      --accent-4: oklch(93.1% 0 none);
      --accent-5: oklch(90.9% 0 none);
      --accent-6: oklch(88.5% 0 none);
      --accent-7: oklch(85.1% 0 none);
      --accent-8: oklch(79.2% 0 none);
      --accent-9: oklch(6.7% 0 none);
      --accent-10: oklch(24.7% 0 none);
      --accent-11: oklch(50.1% 0 none);
      --accent-12: oklch(24% 0 none);

      --accent-a1: color(display-p3 0 0 0 / 0.0118);
      --accent-a2: color(display-p3 0 0 0 / 0.0235);
      --accent-a3: color(display-p3 0 0 0 / 0.0588);
      --accent-a4: color(display-p3 0 0 0 / 0.0902);
      --accent-a5: color(display-p3 0 0 0 / 0.1176);
      --accent-a6: color(display-p3 0 0 0 / 0.149);
      --accent-a7: color(display-p3 0 0 0 / 0.1922);
      --accent-a8: color(display-p3 0 0 0 / 0.2667);
      --accent-a9: color(display-p3 0 0 0 / 0.9961);
      --accent-a10: color(display-p3 0 0 0 / 0.8706);
      --accent-a11: color(display-p3 0 0 0 / 0.6118);
      --accent-a12: color(display-p3 0 0 0 / 0.8784);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9725 0.9725 0.9725 / 0.8);
      --accent-indicator: oklch(6.7% 0 none);
      --accent-track: oklch(6.7% 0 none);
    }
  }
}


:root {
  --grayscale-1: #fcfcfc;
  --grayscale-2: #f9f9f9;
  --grayscale-3: #f0f0f0;
  --grayscale-4: #e8e8e8;
  --grayscale-5: #e0e0e0;
  --grayscale-6: #d9d9d9;
  --grayscale-7: #cecece;
  --grayscale-8: #bbbbbb;
  --grayscale-9: #8d8d8d;
  --grayscale-10: #838383;
  --grayscale-11: #646464;
  --grayscale-12: #202020;

  --grayscale-a1: #00000003;
  --grayscale-a2: #00000006;
  --grayscale-a3: #0000000f;
  --grayscale-a4: #00000017;
  --grayscale-a5: #0000001f;
  --grayscale-a6: #00000026;
  --grayscale-a7: #00000031;
  --grayscale-a8: #00000044;
  --grayscale-a9: #00000072;
  --grayscale-a10: #0000007c;
  --grayscale-a11: #0000009b;
  --grayscale-a12: #000000df;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.988);
      --grayscale-2: color(display-p3 0.975 0.975 0.975);
      --grayscale-3: color(display-p3 0.939 0.939 0.939);
      --grayscale-4: color(display-p3 0.908 0.908 0.908);
      --grayscale-5: color(display-p3 0.88 0.88 0.88);
      --grayscale-6: color(display-p3 0.849 0.849 0.849);
      --grayscale-7: color(display-p3 0.807 0.807 0.807);
      --grayscale-8: color(display-p3 0.732 0.732 0.732);
      --grayscale-9: color(display-p3 0.553 0.553 0.553);
      --grayscale-10: color(display-p3 0.512 0.512 0.512);
      --grayscale-11: color(display-p3 0.392 0.392 0.392);
      --grayscale-12: color(display-p3 0.125 0.125 0.125);

      --grayscale-a1: #00000003;
      --grayscale-a2: #00000006;
      --grayscale-a3: #0000000f;
      --grayscale-a4: #00000017;
      --grayscale-a5: #0000001f;
      --grayscale-a6: #00000026;
      --grayscale-a7: #00000031;
      --grayscale-a8: #00000044;
      --grayscale-a9: #00000072;
      --grayscale-a10: #0000007c;
      --grayscale-a11: #0000009b;
      --grayscale-a12: #000000df;

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


.dark {
  --accent-1: #000;
  --accent-2: #121211;
  --accent-3: #1f1f1d;
  --accent-4: #282826;
  --accent-5: #30302e;
  --accent-6: #3a3a37;
  --accent-7: #484845;
  --accent-8: #60605e;
  --accent-9: #fff;
  --accent-10: #f6f6f4;
  --accent-11: #b3b3b0;
  --accent-12: #eeeeec;

  --accent-a1: #00000000;
  --accent-a2: #fffff112;
  --accent-a3: #ffffef1f;
  --accent-a4: #fffff328;
  --accent-a5: #fffff530;
  --accent-a6: #fffff23a;
  --accent-a7: #fffff548;
  --accent-a8: #fffffa60;
  --accent-a9: #ffffff;
  --accent-a10: #fffffdf6;
  --accent-a11: #fffffbb3;
  --accent-a12: #fffffdee;

  --accent-contrast: #311921;
  --accent-surface: #24242280;
  --accent-indicator: #fff;
  --accent-track: #fff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(0% 0.0023 106.5);
      --accent-2: oklch(18.3% 0.0022 106.5);
      --accent-3: oklch(23.9% 0.0032 106.5);
      --accent-4: oklch(27.5% 0.0036 106.5);
      --accent-5: oklch(30.8% 0.004 106.5);
      --accent-6: oklch(34.7% 0.004 106.5);
      --accent-7: oklch(40% 0.004 106.5);
      --accent-8: oklch(49% 0.004 106.5);
      --accent-9: oklch(100% 0 none);
      --accent-10: oklch(97.3% 0.0027 106.5);
      --accent-11: oklch(76.7% 0.004 106.5);
      --accent-12: oklch(94.8% 0.0027 106.5);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 0.9961 0.9961 0.9412 / 0.071);
      --accent-a3: color(display-p3 1 1 0.9333 / 0.122);
      --accent-a4: color(display-p3 1 1 0.9529 / 0.157);
      --accent-a5: color(display-p3 0.9961 0.9961 0.9569 / 0.189);
      --accent-a6: color(display-p3 1 1 0.949 / 0.228);
      --accent-a7: color(display-p3 1 1 0.9569 / 0.283);
      --accent-a8: color(display-p3 1 1 0.9804 / 0.377);
      --accent-a9: color(display-p3 1 1 1);
      --accent-a10: color(display-p3 1 1 0.9922 / 0.965);
      --accent-a11: color(display-p3 1 1 0.9843 / 0.702);
      --accent-a12: color(display-p3 1 1 0.9922 / 0.934);

      --accent-contrast: #311921;
      --accent-surface: color(display-p3 0.1412 0.1412 0.1333 / 0.5);
      --accent-indicator: oklch(100% 0 none);
      --accent-track: oklch(100% 0 none);
    }
  }
}


.dark {
  --grayscale-1: #111110;
  --grayscale-2: #191918;
  --grayscale-3: #222221;
  --grayscale-4: #2a2a28;
  --grayscale-5: #31312e;
  --grayscale-6: #3b3a37;
  --grayscale-7: #494844;
  --grayscale-8: #62605b;
  --grayscale-9: #6f6d66;
  --grayscale-10: #7c7b74;
  --grayscale-11: #b5b3ad;
  --grayscale-12: #eeeeec;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f4f4f309;
  --grayscale-a3: #f6f6f513;
  --grayscale-a4: #fefef31b;
  --grayscale-a5: #fbfbeb23;
  --grayscale-a6: #fffaed2d;
  --grayscale-a7: #fffbed3c;
  --grayscale-a8: #fff9eb57;
  --grayscale-a9: #fffae965;
  --grayscale-a10: #fffdee73;
  --grayscale-a11: #fffcf4b0;
  --grayscale-a12: #fffffded;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6f6d66;
  --grayscale-track: #6f6d66;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.063);
      --grayscale-2: color(display-p3 0.098 0.098 0.094);
      --grayscale-3: color(display-p3 0.135 0.135 0.129);
      --grayscale-4: color(display-p3 0.164 0.163 0.156);
      --grayscale-5: color(display-p3 0.193 0.192 0.183);
      --grayscale-6: color(display-p3 0.23 0.229 0.217);
      --grayscale-7: color(display-p3 0.285 0.282 0.267);
      --grayscale-8: color(display-p3 0.384 0.378 0.357);
      --grayscale-9: color(display-p3 0.434 0.428 0.403);
      --grayscale-10: color(display-p3 0.487 0.481 0.456);
      --grayscale-11: color(display-p3 0.707 0.703 0.68);
      --grayscale-12: color(display-p3 0.933 0.933 0.926);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f4f4f309;
      --grayscale-a3: #f6f6f513;
      --grayscale-a4: #fefef31b;
      --grayscale-a5: #fbfbeb23;
      --grayscale-a6: #fffaed2d;
      --grayscale-a7: #fffbed3c;
      --grayscale-a8: #fff9eb57;
      --grayscale-a9: #fffae965;
      --grayscale-a10: #fffdee73;
      --grayscale-a11: #fffcf4b0;
      --grayscale-a12: #fffffded;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.434 0.428 0.403);
      --grayscale-track: color(display-p3 0.434 0.428 0.403);
    }
  }
}

:root {
  color-scheme: light;
  --accent: rgba(1, 1, 1, 1);
  --background: rgba(255, 255, 255, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

.dark {
  color-scheme: light;
  --background: #000000;
  --accent: #ffffff;
}

/* Smallest design system alignment (smallest.design).
   Aeonik Pro ships two weights (400, 500). Anything the theme asks to render
   at 600/700 must fall back to the 500 face, never a synthesised bold: the
   browser's faux bold smears the outlines and reads as a "border" on text.
   font-synthesis-weight turns the synthesis off; the weight caps below keep
   older browsers honest. */
html {
    font-synthesis-weight: none;
    font-synthesis: style small-caps;
}

h1, h2, h3, h4, h5, h6,
strong, b, th, dt,
.font-bold:not(atoms-widget *), .font-semibold:not(atoms-widget *),
.fern-sidebar-link[data-state="active"],
.fern-header-tab[data-state="active"],
.fern-toc a, .fern-toc li,
.fern-sidebar-heading-content, .fern-docs-badge, .fern-kbd, code, kbd,
.fern-header-button, .fern-button {
    font-weight: 500 !important;
}

/* Fern fakes a semibold on the active sidebar link and header tab with a
   0.5px text stroke. On Aeonik that reads as an outline around every glyph
   (the "border on the text" people noticed). Emphasis comes from colour. */
.fern-sidebar-link[data-state="active"] .fern-sidebar-link-title-inner,
.fern-sidebar-link[data-state="active"] .fern-sidebar-link-title-inner *,
#fern-header [data-radix-collection-item][data-state="active"] > span,
#fern-header [data-radix-collection-item][data-state="active"] > span * {
    -webkit-text-stroke-width: 0 !important;
}
.fern-sidebar-link[data-state="active"],
.fern-sidebar-link[data-state="active"] * {
    color: var(--grayscale-12) !important;
}

/* Badges: one quiet system. Grey outlined for status and mode tags (Beta,
   Real-Time, Pre-Recorded), accent solid for "Latest Release", Fern's red for
   Deprecated. Legacy colour props on <Badge> map onto these classes. */
.fern-docs-badge {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    letter-spacing: 0 !important;
    vertical-align: middle;
    white-space: nowrap;
}
.fern-docs-badge.yellow,
.fern-docs-badge.green,
.fern-docs-badge.blue,
.fern-docs-badge.gray {
    background: var(--grayscale-a2) !important;
    color: var(--grayscale-a11) !important;
    box-shadow: inset 0 0 0 1px var(--grayscale-a5) !important;
}
.fern-docs-badge.purple {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
}
/* A table cell whose content is "word + badge" must not wrap the badge onto
   its own line; let the column grow instead. */
td:has(> .fern-docs-badge) {
    white-space: nowrap;
}

/* Tables: 14/20 type so five columns fit the 46rem column, cells aligned to
   the top so multi-line rows read left to right, inline code never breaks
   mid-token, and the empty header row markdown needs for key/value tables
   (| | |) is hidden. */
.fern-table td,
.fern-table th {
    font-size: 14px;
    line-height: 20px;
    padding: 10px 12px;
    vertical-align: top;
}
.fern-table td code,
.fern-table th code {
    white-space: nowrap;
    font-size: 13px;
}
.fern-table thead:not(:has(th:not(:empty))) {
    display: none;
}

/* Header chrome: search at half width, brand lockup at 28px. */
#fern-search-button,
#fern-header [class*="search-button"] {
    max-width: 18rem !important;
    margin: 0 auto !important; /* centre the capped button in its 640px slot */
}

/* Body copy in the secondary text colour (grayscale-11); headings, links,
   code and table headers stay in the primary colour. */
.fern-prose p,
.fern-prose li,
.fern-prose td {
    color: var(--grayscale-a11);
}
.fern-prose p strong,
.fern-prose li strong,
.fern-prose td strong,
.fern-prose td code {
    color: var(--grayscale-12);
}

/* Card icons at 20px, matching the Capabilities list. */
.fern-card .card-icon,
.fern-card .card-icon svg,
.fern-card .card-icon img {
    width: 20px !important;
    height: 20px !important;
}

/* Links in table cells (model names, endpoint names) never wrap. */
.fern-table td a {
    white-space: nowrap;
}

/* A status badge that opens the page sits on its own line with room below. */
.fern-prose > .fern-docs-badge:first-child,
.fern-prose > p:first-child > .fern-docs-badge:only-child {
    display: inline-flex;
    margin-bottom: 12px;
}

/* A single Card outside a CardGroup used to stretch across the whole column
   with one line of text inside. Cap it so it reads as a link tile. */
.fern-prose > a.fern-card,
.fern-prose > div.fern-card,
.fern-prose > .fern-card {
    max-width: 34rem;
}

/* Tags inside cards: a category tag above the copy on model cards, and a
   row of model chips under the copy on capability cards. */
.fern-card .fern-docs-badge {
    margin: 0 4px 6px 0;
}
.fern-card p:has(> .fern-docs-badge:only-child) {
    margin: 0 0 6px;
}
.fern-card p:has(> .fern-docs-badge:first-child + .fern-docs-badge),
.fern-card p:last-child:has(> .fern-docs-badge) {
    margin: 10px 0 0;
}

/* Type scale: 16/24 body, 14/20 for UI chrome (sidebar, tabs, header). */
.fern-sidebar-link,
.fern-sidebar-heading,
.fern-header-tab,
.fern-header-button,
#fern-search-button {
    font-size: 14px;
    line-height: 20px;
}

/* Surfaces: flat neutral-100 hover, 10px radius, no shadows on cards. */
.fern-card,
.fern-callout,
pre.fern-code-block,
.fern-code-group {
    border-radius: 10px !important;
    box-shadow: none !important;
}

.fern-sidebar-link:hover {
    border-radius: 8px;
}
.fern-sidebar-link:focus-visible {
    border-radius: 8px; outline: none;
}

/* Footer: hide the "Built with Fern" badge. */
a[href*="utm_campaign=buildWith"] {
    display: none !important;
}

/* Path tiles lift slightly on hover. */
.smallest-path-card:hover {
    transform: translateY(-2px);
}
.smallest-path-card:focus-visible {
    transform: translateY(-2px); outline: none;
}

@media (max-width: 767px) {

    .smallest-path-cards {
        grid-template-columns: 1fr !important;
    }

}

/* Stat strip and Need-help strip: quiet by default, brand accent on hover. */
.smallest-stat-link:hover,
.smallest-need-help-link:hover {
    background: var(--grayscale-a2, rgba(127, 127, 127, 0.06));
}
.smallest-stat-link:focus-visible,
.smallest-need-help-link:focus-visible {
    background: var(--grayscale-a2, rgba(127, 127, 127, 0.06)); outline: none;
}
.smallest-stat-link:hover .smallest-stat-arrow {
    opacity: 1;
    transform: translateX(3px);
}
.smallest-stat-link:focus-within .smallest-stat-arrow {
    opacity: 1;
    transform: translateX(3px); outline: none;
}