/*fern-site-stylesheet*/@font-face {
    font-family: 'Work Sans';
    src: url('/_fern-files/deepgram.docs.buildwithfern.com/72cd8f67849cc714f3364eeeb378df9a49f4aff00e6a3640fad36c9c93a9b197/assets/fonts/WorkSans-2026.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Perfektta';
    src: url('/_fern-files/deepgram.docs.buildwithfern.com/e78a72ba8fefecdec2746d112eb45d0589768c91a5a896f2d3b62438879fb37c/assets/fonts/Perfektta-SemiBold-2026.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-019D, U+01E6-0237, U+0259-0272, U+02B9-02DD, U+0300-0328, U+0394-03C9, U+0E3F, U+1E20-1E21, U+1E80-1EF9, U+2070-20BF, U+2113-212E, U+2153-215E, U+2190-21BB, U+2202-2265, U+2460-2468, U+24EA-24FF, U+25CA-25CF, U+2776-277E, U+2934-2935, U+2B10-2B11, U+2B8C-2B8F, U+E2CC-E2E1;
}
@font-face {
    font-family: 'Perfektta';
    src: url('/_fern-files/_img/e78a72ba8fefecdec2746d112eb45d05-v1.latin.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2009, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'Azeret Mono';
    src: url('/_fern-files/deepgram.docs.buildwithfern.com/20cbb538069d5e673d5135054371558b78716564ad2ed9aabfa3112cd060306c/assets/fonts/AzeretMono-2026.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Work Sans Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 111.93%;
    ascent-override: 83.09%;
    descent-override: 21.71%;
    line-gap-override: 0.00%;
}
@font-face {
    font-family: 'Perfektta Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 89.05%;
    ascent-override: 103.31%;
    descent-override: 19.65%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 24px;
  --font-body: 'Work Sans', 'Work Sans Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Perfektta', 'Perfektta Fallback', 'Work Sans', 'Work Sans Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'Azeret Mono', 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: #f6f8fa;
  --accent-2: #eff4f9;
  --accent-3: #e2eef9;
  --accent-4: #d3e6fb;
  --accent-5: #c2dcf9;
  --accent-6: #aecff2;
  --accent-7: #93beea;
  --accent-8: #6ca7e2;
  --accent-9: #0172c4;
  --accent-10: #0064b5;
  --accent-11: #006dbe;
  --accent-12: #0f385d;

  --accent-a1: #e8f4ff49;
  --accent-a2: #a3d1ff25;
  --accent-a3: #49a8ff25;
  --accent-a4: #9dccff6e;
  --accent-a5: #002cff25;
  --accent-a6: #016fe54f;
  --accent-a7: #026cd76b;
  --accent-a8: #0069d292;
  --accent-a9: #0071c4fe;
  --accent-a10: #0064b5;
  --accent-a11: #006dbe;
  --accent-a12: #002c53f0;

  --accent-contrast: #fff;
  --accent-surface: #ecf3f9cc;
  --accent-indicator: #0172c4;
  --accent-track: #0172c4;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(97.8% 0.0036 249.9);
      --accent-2: oklch(96.5% 0.009 249.9);
      --accent-3: oklch(94.3% 0.02 249.9);
      --accent-4: oklch(91.8% 0.0345 249.9);
      --accent-5: oklch(88.5% 0.0482 249.9);
      --accent-6: oklch(84.2% 0.0613 249.9);
      --accent-7: oklch(78.6% 0.0785 249.9);
      --accent-8: oklch(71.1% 0.1071 249.9);
      --accent-9: oklch(54.3% 0.1531 249.9);
      --accent-10: oklch(49.7% 0.1531 249.9);
      --accent-11: oklch(52.6% 0.1531 249.9);
      --accent-12: oklch(33.2% 0.0792 249.9);

      --accent-a1: color(display-p3 0.9098 0.9569 1 / 0.286);
      --accent-a2: color(display-p3 0.0118 0.4902 0.9725 / 0.048);
      --accent-a3: color(display-p3 0.0118 0.4902 0.9725 / 0.096);
      --accent-a4: color(display-p3 0 0.4078 1 / 0.143);
      --accent-a5: color(display-p3 0.0039 0.4078 0.9373 / 0.211);
      --accent-a6: color(display-p3 0.0039 0.3765 0.851 / 0.286);
      --accent-a7: color(display-p3 0.0039 0.3529 0.7843 / 0.381);
      --accent-a8: color(display-p3 0 0.3412 0.7725 / 0.52);
      --accent-a9: color(display-p3 0 0.3137 0.6941 / 0.81);
      --accent-a10: color(display-p3 0 0.2667 0.6314 / 0.838);
      --accent-a11: color(display-p3 0 0.2941 0.6667 / 0.818);
      --accent-a12: color(display-p3 0 0.1216 0.2784 / 0.893);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9333 0.9529 0.9765 / 0.8);
      --accent-indicator: oklch(54.3% 0.1531 249.9);
      --accent-track: oklch(54.3% 0.1531 249.9);
    }
  }
}


.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: #020b13;
  --accent-2: #0b1922;
  --accent-3: #002a41;
  --accent-4: #00365b;
  --accent-5: #00436c;
  --accent-6: #00527e;
  --accent-7: #006395;
  --accent-8: #0079b4;
  --accent-9: #00b2ff;
  --accent-10: #00a6f3;
  --accent-11: #55c1ff;
  --accent-12: #bfe7ff;

  --accent-a1: #0024f00a;
  --accent-a2: #15a3ff19;
  --accent-a3: #0097fc3a;
  --accent-a4: #008efd55;
  --accent-a5: #0099ff66;
  --accent-a6: #00a2ff79;
  --accent-a7: #00a7ff91;
  --accent-a8: #00aaffb1;
  --accent-a9: #00b2ff;
  --accent-a10: #00aefff3;
  --accent-a11: #55c1ff;
  --accent-a12: #bfe7ff;

  --accent-contrast: #fff;
  --accent-surface: #0c283a80;
  --accent-indicator: #00b2ff;
  --accent-track: #00b2ff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(14.5% 0.0241 238.3);
      --accent-2: oklch(20.5% 0.0273 238.3);
      --accent-3: oklch(26.9% 0.0629 238.3);
      --accent-4: oklch(31.4% 0.0936 238.3);
      --accent-5: oklch(36.2% 0.1018 238.3);
      --accent-6: oklch(41.4% 0.1061 238.3);
      --accent-7: oklch(47.5% 0.1148 238.3);
      --accent-8: oklch(54.6% 0.133 238.3);
      --accent-9: oklch(72.5% 0.1617 238.3);
      --accent-10: oklch(68.9% 0.1617 238.3);
      --accent-11: oklch(77.4% 0.1346 238.3);
      --accent-12: oklch(90.8% 0.0566 238.3);

      --accent-a1: color(display-p3 0 0.1608 0.9922 / 0.033);
      --accent-a2: color(display-p3 0.2078 0.6667 1 / 0.094);
      --accent-a3: color(display-p3 0.0941 0.6 1 / 0.217);
      --accent-a4: color(display-p3 0.1529 0.5686 1 / 0.319);
      --accent-a5: color(display-p3 0.1922 0.6078 1 / 0.388);
      --accent-a6: color(display-p3 0.2392 0.651 1 / 0.458);
      --accent-a7: color(display-p3 0.2627 0.6588 1 / 0.552);
      --accent-a8: color(display-p3 0.2863 0.6745 1 / 0.674);
      --accent-a9: color(display-p3 0.3176 0.7059 1 / 0.972);
      --accent-a10: color(display-p3 0.3098 0.6863 1 / 0.927);
      --accent-a11: color(display-p3 0.4588 0.7686 1 / 0.976);
      --accent-a12: color(display-p3 0.7882 0.9137 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.0706 0.1569 0.2196 / 0.5);
      --accent-indicator: oklch(72.5% 0.1617 238.3);
      --accent-track: oklch(72.5% 0.1617 238.3);
    }
  }
}


.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(1, 114, 196, 1);
  --background: rgba(252, 250, 248, 1);
  --border: rgba(220, 216, 213, 1);
  --sidebar-background: rgba(252, 250, 248, 1);
  --header-background: rgba(252, 250, 248, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fcfaf8;
}

.dark {
  color-scheme: dark;
  --accent: rgba(0, 178, 255, 1);
  --background: rgba(10, 10, 10, 1);
  --border: rgba(36, 36, 36, 1);
  --sidebar-background: rgba(10, 10, 10, 1);
  --header-background: rgba(10, 10, 10, 1);
  --card-background: rgba(20, 20, 20, 1);
  --theme-color: #0a0a0a;
}

/**
 * Deepgram colors
 *
 * Rebrand (lands 2026-10-29): these legacy variables now carry the kit's
 * semantic tokens, so the older blocks below pick up the new palette. The
 * same values are set in fern/docs.yml (colors). The full token set and the
 * rebrand overrides live in the "Rebrand" block at the end of this file.
 *
 * @see fern/docs.yml
 */

:root {
  --background-rgb: 252, 250, 248; /* surface/canvas */
  --body-text-rgb: 36, 36, 36; /* text/secondary */
  --header-text-rgb: 29, 29, 29; /* text/primary */
  --accent-primary-rgb: 1, 114, 196; /* text/link */
  --sidebar-background-rgb: 252, 250, 248;
  --header-background-rgb: 252, 250, 248;
  --card-background-rgb: 255, 255, 255; /* card: white in light (item 9) */
  --border-rgb: 220, 216, 213; /* border/subtle */

  /* deepgram main */
  --deepgram-background: rgb(var(--background-rgb));
  --deepgram-body-text: rgb(var(--body-text-rgb));

  --deepgram-accent-primary: rgb(var(--accent-primary-rgb));
  --deepgram-sidebar-background: rgb(var(--sidebar-background-rgb));
  --deepgram-header-background: rgb(var(--header-background-rgb));
  --deepgram-header-text: rgb(var(--header-text-rgb));
  --deepgram-card-background: rgb(var(--card-background-rgb));
  --deepgram-border: rgb(var(--border-rgb));
  --deepgram-muted-text: #5f5e5e; /* text/tertiary, solid for contrast */
}

html.dark {
  --background-rgb: 10, 10, 10;
  --body-text-rgb: 204, 204, 204;
  --header-text-rgb: 252, 250, 248;
  --accent-primary-rgb: 0, 178, 255;
  --sidebar-background-rgb: 10, 10, 10;
  --header-background-rgb: 10, 10, 10;
  --card-background-rgb: 20, 20, 20;
  --border-rgb: 36, 36, 36;
  --deepgram-muted-text: #989898;
}

/**
 * Fern styles
 */

body {
  background-color: var(--deepgram-background);
  color: var(--deepgram-body-text);
}

/* [INT] .text-body inside the card */
/* Override Fern's built-in 12px card title indent */
.fern-card .text-body {
  margin-left: 0 !important;
}

/*
 * Deepgram Badge: availability markers in fern/snippets. Rebrand: tinted
 * status pills with mono labels; each variant sets --mark (the fill tint)
 * and --mark-ink (the label color), from the kit tokens in the rebrand block.
 */
.dg-badge {
  --mark: var(--rb-phosphor);
  --mark-ink: var(--rb-ink-phosphor);

  display: inline-flex;
  font-family: var(--rb-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--mark-ink);
  background: color-mix(in srgb, var(--mark) 16%, transparent);
  border-radius: 999px;
}

.dg-badge span {
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dg-badge.strike-through {
  text-decoration: line-through;
}

/* Support both naming patterns */
.dg-badge.unavailable {
  --mark: var(--rb-border-hover);
  --mark-ink: var(--rb-text-3);
}

.dg-badge.experimental {
  --mark: var(--rb-led);
  --mark-ink: var(--rb-ink-led);
}

.dg-badge.deprecated {
  --mark: var(--rb-bakelite);
  --mark-ink: var(--rb-ink-bakelite);
}

.dg-badge.pink {
  --mark: var(--rb-glass);
  --mark-ink: var(--rb-ink-glass);
}

.dg-badge .fa-icon {
  background: var(--mark-ink);
  margin-right: 0.5rem;
}

.dg-badge .fern-mdx-icon {
  margin-right: 0.25rem;
}


/**
 * Deepgram Navigation Tabs
 */

/* [ID] .fern-header-tabs; [INT] the a[role="tab"][data-state] + ::after shape.
   Attribute selectors, not child combinators: Fern wraps the tabs in
   astro-island and extra divs, and the wrapper depth changes between releases. */
.fern-header-tabs a[role="tab"] {
  font-weight: 500 !important;
}

/* Active and inactive tab colors and the underline: see the rebrand block. */
.fern-header-tabs a[role="tab"][data-state="active"]::after {
  height: 0.125rem;
}

/**
 * Deepgram Header
 */

/* [ID] */
/* Keep navbar buttons on one line when the header compresses */
.fern-header-navbar-links > .fern-button {
  white-space: nowrap;
  flex-shrink: 0;
}

/**
 * Fern Sidebar
 *
 * Rebrand: the selected row is a neutral rounded fill (no indicator bar),
 * inset from the sidebar edge as in the kit.
 */

/* [INT] #fern-sidebar-scroll-area and the data-theme attribute */
@layer components {

  @media (width>=64rem) {

    [data-theme="default"] #fern-sidebar-scroll-area {
      background-color: var(--deepgram-sidebar-background);
    }
  
}

}

/**
 * Fern TW styles
 */

/*
 * Text styles
 */

h1,
h2,
h3 {
  color: var(--deepgram-header-text);
}

/*
 * Getting Started with STT Page
 */

.clickable-card .text-body {
    font-size: 1.1rem;
}
/* Align clickable card titles with body text */


/* Voice model table styling */

/* Hide timestamps in audio players within the voice model tables */
.voice-model-table audio::-webkit-media-controls-current-time-display,
.voice-model-table audio::-webkit-media-controls-time-remaining-display,
.voice-model-table audio::-webkit-media-controls-total-time-display,
.voice-model-table audio::-webkit-media-controls-end-time-display,
.voice-model-table audio::-webkit-media-controls-timeline,
.voice-model-table audio::-webkit-media-controls-volume-slider,
.voice-model-table audio::-webkit-media-controls-mute-button,
.voice-model-table audio::-webkit-media-controls-seek-back-button,
.voice-model-table audio::-webkit-media-controls-seek-forward-button,
.voice-model-table audio::-webkit-media-controls-playback-rate-button,
.voice-model-table audio::-webkit-media-controls-return-to-realtime-button,
.voice-model-table audio::-webkit-media-controls-pip-toggle-button,
.voice-model-table audio::-webkit-media-controls-airplay-button,
.voice-model-table audio::-webkit-media-controls-download-button {
  display: none !important;
}

.voice-model-table audio {
  width: 100px;
}

/* [ID] .fern-filter-* hooks */
/* Changelog filter dropdown text override */
/* Use official Fern selector instead of Tailwind utilities */
.fern-filter-dropdown-button-text {
  font-size: 0; /* Hide all text */
}

.fern-filter-dropdown-button-text::after {
  content: "Select product"; /* Inject new text */
  font-size: 1rem; /* Restore font size for injected text */
}

.fern-filter-dropdown-button-text svg {
  font-size: 1rem; /* Restore font size for icon */
}

/* Changelog filter badge - selected state (matches the "Free API Key" inverse pill) */
button.fern-filter-badge,
button.fern-docs-badge.fern-filter-badge,
.fern-docs-badge.fern-filter-badge {
  background-color: var(--deepgram-header-text) !important;
  color: var(--deepgram-background) !important; /* Uses background color for text - auto adapts to light/dark */
  border-color: var(--deepgram-header-text) !important;
  border-radius: 999px !important;
  font-family: var(--rb-mono);
}

/* Override grayscale filter */
button.fern-filter-badge.grayscale {
  filter: none !important;
}

/* [ID] .fern-dropdown-checkmark (the changelog filter's selected item):
   neutral ink, not the accent */
.fern-dropdown-checkmark {
  color: var(--deepgram-header-text) !important;
}

/*
 * Ask AI Button: the glass pill with a fuchsia ring. Drawn in the rebrand
 * block at the end of this file (it replaced the old gradient-border glow).
 */

/* Hide Fern's external-link icon on the Add to Slack button */
.slack-button a img + img,
.slack-button a svg {
  display: none !important;
}

/* Match the Ask AI button to the Add to Slack button (139x40) beside it */
.support-cta .fern-button {
  width: 139px;
  height: 40px;
  box-sizing: border-box;
  flex: none;
}

/* =====================================================================
 * Rebrand (lands 2026-10-29). Appended last so it wins.
 *
 * Tokens: the "Deepgram Rebrand UI Kit" semantic tokens plus design's
 * 2026-10-14/15 decisions. Fern puts .dark on <html>; light is the bare :root.
 *
 * Every rule below carries a tag for how it reaches Fern's markup:
 *   [VAR] a Fern-generated CSS variable only (stable)
 *   [ID]  a Fern element id or documented .fern-* hook (semi-stable)
 *   [INT] an internal class, Tailwind utility, attribute or DOM shape
 *         (fragile: can break whenever Fern updates its hosted renderer;
 *         re-check these on every preview before launch)
 *
 * Rules carried from the kit: fuchsia means only the one primary action per
 * screen, selected states and focus, and on docs selected states are neutral.
 * Perfektta 600 only at 28px and up; Work Sans everywhere else; Azeret Mono
 * for buttons, eyebrows, code and model IDs.
 * ===================================================================== */

/* ---- display font ----
   [INT] Fern splits the Perfektta file into unicode-range subsets and serves
   the Basic Latin one from /_fern-img/, which 404s on hosted previews, so
   headings fell back to Arial. This face loads the whole file Fern already
   uploads from docs.yml (typography.headingsFont), by its content-addressed
   (sha256) CDN path. If the font file changes, update the hash here; if this
   URL ever fails, --rb-display falls back to Fern's own Perfektta face. */
@font-face {
  font-family: "Perfektta DG";
  src: url("https://files.buildwithfern.com/deepgram.docs.buildwithfern.com/e78a72ba8fefecdec2746d112eb45d0589768c91a5a896f2d3b62438879fb37c/assets/fonts/Perfektta-SemiBold-2026.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens ---- */
:root {
  /* brand primitives (same in both modes) */
  --rb-fuchsia: #e042ff;
  --rb-fuchsia-hover: #e358fe;
  --rb-glass: #00b2ff;
  --rb-led: #a26ffd;
  --rb-phosphor: #86eb47;
  --rb-brass: #f7f300;
  --rb-bakelite: #fa8100;
  --rb-ink: #1d1d1d;
  --rb-off-white: #fcfaf8;

  /* light */
  --rb-canvas: #fcfaf8;
  --rb-default: #f7f4f1;
  --rb-raised: #f2efed;
  --rb-subtle: #f2efed;
  --rb-overlay: #ffffff;
  --rb-card: #ffffff; /* cards are pure white in light (item 9); dark uses surface/default */
  --rb-inverse: #0a0a0a;
  --rb-on-inverse: #fcfaf8;
  --rb-glass-fill: rgba(10, 10, 10, 0.04);
  --rb-glass-hover: rgba(10, 10, 10, 0.08);
  --rb-selected: rgba(10, 10, 10, 0.06);
  --rb-text-1: #1d1d1d;
  --rb-text-2: #242424;
  --rb-text-3: #5f5e5e;
  --rb-border-subtle: #dcd8d5;
  --rb-border: #beb9b6;
  --rb-border-hover: #5f5e5e;
  --rb-link: #0172c4;
  --rb-success: #408217;
  --rb-warning: #663300;
  --rb-error: #b43f36;
  --rb-info: #0068a0;
  --rb-focus-edge: #1d1d1d;
  --rb-shadow-overlay: 0 24px 64px rgba(29, 29, 29, 0.18);
  --rb-ink-glass: #0068a0;
  --rb-ink-led: #6a3bd6;
  --rb-ink-phosphor: #3b7815; /* kit #408217 is 4.1:1 on its tint; AA needs 4.5 */
  --rb-ink-brass: #6b6900;
  --rb-ink-bakelite: #a04e00;
  --rb-code-bg: #f2efed;
  --rb-code-fg: #242424;
  --rb-code-comment: #6e6b69;
  --rb-code-keyword: #6a3bd6;
  --rb-code-string: #3b7815; /* kit #408217 is 4.2:1 on the code surface */
  --rb-code-number: #a04e00;
  --rb-code-fn: #0169b6; /* kit #0172c4 is 4.4:1 on the code surface */
  --rb-code-prop: #6b6900;

  --rb-mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rb-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rb-display: "Perfektta DG", "Perfektta", "Work Sans", system-ui, sans-serif;
}

html.dark {
  --rb-canvas: #0a0a0a;
  --rb-default: #141414;
  --rb-raised: #1d1d1d;
  --rb-subtle: #242424;
  --rb-overlay: #242424;
  --rb-card: #141414;
  --rb-inverse: #fcfaf8;
  --rb-on-inverse: #1d1d1d;
  --rb-glass-fill: rgba(255, 255, 255, 0.05);
  --rb-glass-hover: rgba(255, 255, 255, 0.1);
  --rb-selected: rgba(255, 255, 255, 0.1);
  --rb-text-1: #fcfaf8;
  --rb-text-2: #cccccc;
  --rb-text-3: #989898;
  --rb-border-subtle: #242424;
  --rb-border: #2d2d2d;
  --rb-border-hover: #5f5e5e;
  --rb-link: #00b2ff;
  --rb-success: #5bba21;
  --rb-warning: #ffab00;
  --rb-error: #ef585a;
  --rb-info: #00b2ff;
  --rb-focus-edge: transparent;
  --rb-shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.64);
  --rb-ink-glass: #00b2ff;
  --rb-ink-led: #a26ffd;
  --rb-ink-phosphor: #86eb47;
  --rb-ink-brass: #f7f300;
  --rb-ink-bakelite: #fa8100;
  --rb-code-bg: #141414;
  --rb-code-fg: #cccccc;
  --rb-code-comment: #858585; /* contrast amendment: kit #7a7a7a is 4.3:1 on #141414; this is 5.0:1 */
  --rb-code-keyword: #a26ffd;
  --rb-code-string: #86eb47;
  --rb-code-number: #fa8100;
  --rb-code-fn: #00b2ff;
  --rb-code-prop: #f7f300;
}

/* ---- base type ---- */
/* [VAR] body font comes from docs.yml typography; tighten tracking like the kit */
body {
  letter-spacing: -0.01em;
}

/* [ID] page title: Perfektta display (always 28px and up) */
.fern-page-heading {
  font-family: var(--rb-display);
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* Fern sets the headings font on every heading. Only the page title and
   the home section titles are display size, so everything else returns to
   Work Sans. (html h2: beats Fern's element rule regardless of order.) */
html h2,
html h3,
html h4,
html h5,
html h6 {
  font-family: var(--rb-sans);
}

/* [INT] Fern's 404 page: a classless h1 inside .fern-main > div.w-screen, set
   to a bold the kit doesn't ship (Perfektta is 600 only), so browsers
   synthesized 800. Pin it to the display face at 600. The page's strings and
   its suggestion cards (Tailwind --grayscale utilities, no stable hook) are
   Fern's own and stay as they are. */
.fern-main > div.w-screen.items-center > div.text-center > h1 {
  font-family: var(--rb-display);
  font-weight: 600 !important;
  font-synthesis: none;
}

/* [ID] prose headings are Work Sans: below 28px the kit never uses Perfektta.
   The overview layout (home) keeps Perfektta section titles at 28px. */
.fern-prose h2,
.fern-prose h3,
.fern-prose h4,
.fern-prose h5,
.fern-prose h6 {
  font-family: var(--rb-sans);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* [ID] sidebar section headings */
.fern-sidebar-heading {
  font-family: var(--rb-sans);
}

/* ---- focus: 2px fuchsia ring at 2px, with a thin ink edge in light mode ---- */
/* [VAR]-free on purpose: Fern's own ring reads --accent (the link blue). */
:focus-visible {
  outline: 2px solid var(--rb-fuchsia) !important;
  outline-offset: 2px !important;
}

/* The thin ink edge sits outside the ring. A box-shadow would replace each
   component's own shadow, so it is added only on plain links, tabs and
   controls that have none, plus the header pills below (which re-state
   their ring). The gap layer is the canvas they sit on. */
html:not(.dark) :is(a, summary, [role="tab"], [role="menuitem"]):focus-visible:not(.fern-button, .fern-card) {
  box-shadow:
    0 0 0 2px var(--rb-canvas),
    0 0 0 5px var(--rb-focus-edge) !important;
}

/* Light mode text selection: ink text on a fuchsia marker */
html:not(.dark) ::selection {
  background: color-mix(in srgb, var(--rb-fuchsia) 28%, transparent);
  color: var(--rb-ink);
}

/* ---- neutral selected states ---- */
/* [ID] sidebar row; [INT] Fern tints the active row and icon from --accent */
.fern-sidebar-link {
  --accent-a3: var(--rb-selected);
  --accent-a11: var(--rb-text-1);
  --accent-11: var(--rb-text-1);
  --accent: var(--rb-text-1);
}

[data-theme="default"] #fern-sidebar-scroll-area .fern-sidebar-link[data-state="active"],
.fern-sidebar-link[data-state="active"] {
  background-color: var(--rb-selected) !important;
  color: var(--rb-text-1) !important;
  border-radius: 8px !important;
}

/* [INT] the active-row indicator Fern draws as ::after: none on docs */
[data-theme="default"] #fern-sidebar-scroll-area .fern-sidebar-link[data-state="active"]::after,
.fern-sidebar-link[data-state="active"]::after {
  content: none !important;
  display: none !important;
}

/* [INT] nested rows mark the active item with a ::before segment on the
   section's guide line: keep the guide line, drop the marker */
.fern-sidebar-link.nested[data-state="active"]::before {
  background: transparent !important;
}

/* [ID] header product tabs; [INT] the a[data-state] + ::after shape */
.fern-header-tabs {
  --accent: var(--rb-text-1);
  --accent-9: var(--rb-text-1);
  --accent-11: var(--rb-text-1);
  --accent-a11: var(--rb-text-1);
}

/* Active tab: ink text and an ink underline; inactive tabs: tertiary text */
.fern-header-tabs a[role="tab"][data-state="active"] {
  color: var(--rb-text-1) !important;
}

.fern-header-tabs a[role="tab"][data-state="inactive"] {
  color: var(--rb-text-3) !important;
}

/* every state, so the hover underline is ink too, never the link blue */
.fern-header-tabs a[role="tab"]::after {
  background: var(--rb-text-1) !important;
}

.fern-header-tabs a[role="tab"][data-state="inactive"] svg {
  color: var(--rb-text-3) !important;
}

/* [INT] selected-state icons Fern tints with --accent */
.fern-header-tabs a[role="tab"][data-state="active"] svg,
.fern-sidebar-link[data-state="active"] svg {
  color: var(--rb-text-1) !important;
}

/* [INT] TOC: .toc-root is not a fern-* hook. Active entry primary, rest tertiary. */
.toc-root {
  --accent-a9: var(--rb-text-1);
  --accent-a11: var(--rb-text-1);
  --accent: var(--rb-text-1);
}

/* [ID] code group language tabs: neutral, mono labels */
.fern-code-group-tabs {
  --accent: var(--rb-text-1);
  --accent-9: var(--rb-text-1);
  --accent-11: var(--rb-text-1);
  --accent-a11: var(--rb-text-1);
}

.fern-code-group-tab-label {
  font-family: var(--rb-mono);
  font-size: 12px;
}

/* ---- header: mono pill buttons ---- */
/* [ID] .fern-header-navbar-links / .fern-button; [INT] the variant classes */
.fern-header-navbar-links > .fern-button {
  border-radius: 999px !important;
  font-family: var(--rb-mono) !important;
  font-weight: 500 !important;
  font-size: 14px;
  letter-spacing: 0.03em;
  height: 40px;
  padding: 0 18px;
}

.fern-header-navbar-links > .fern-button.outlined {
  border: 0 !important;
  background: var(--rb-glass-fill) !important;
  box-shadow: inset 0 0 0 1px var(--rb-border) !important;
  color: var(--rb-text-1) !important;
}

.fern-header-navbar-links > .fern-button.outlined:hover {
  background: var(--rb-glass-hover) !important;
  box-shadow: inset 0 0 0 1px var(--rb-border-hover) !important;
}
.fern-header-navbar-links > .fern-button.outlined:focus-visible {
  background: var(--rb-glass-hover) !important;
  box-shadow: inset 0 0 0 1px var(--rb-border-hover) !important;
}

.fern-header-navbar-links > .fern-button.minimal {
  background: transparent !important;
  color: var(--rb-text-1) !important;
}

/* Free API Key: the inverse pill */
.fern-header-navbar-links > .fern-button:not([disabled]).filled.primary {
  background: var(--rb-inverse) !important;
  color: var(--rb-on-inverse) !important;
  box-shadow: none !important;
}

.fern-header-navbar-links > .fern-button:not([disabled]).filled.primary:hover {
  background: var(--rb-text-2) !important;
}
.fern-header-navbar-links > .fern-button:not([disabled]).filled.primary:focus-visible {
  background: var(--rb-text-2) !important;
}

/* Ask AI: glass pill with a fuchsia ring (replaces the gradient glow).
   [ID] #ask-ai-button; [INT] the href match for the navbar link */
.fern-header-navbar-links > a.fern-button[href$="/ask-ai"],
#ask-ai-button {
  background: var(--rb-glass-fill) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1.5px var(--rb-fuchsia) !important;
  color: var(--rb-text-1) !important;
  transform: none !important;
}

.fern-header-navbar-links > a.fern-button[href$="/ask-ai"]:hover,
#ask-ai-button:hover {
  background: var(--rb-glass-hover) !important;
}
.fern-header-navbar-links > a.fern-button[href$="/ask-ai"]:focus-visible,
#ask-ai-button:focus-visible {
  background: var(--rb-glass-hover) !important;
}

/* ---- cards ---- */
/* [ID] .fern-card: every MDX Card and CardGroup (home, guide and SDK cards).
   Light cards are pure white on the #FCFAF8 canvas and #F2EFED surfaces and
   keep the hairline so they still separate (feedback item 9). Dark stays on
   surface/default. */
.fern-card {
  border-radius: 8px !important;
  border-color: var(--rb-border-subtle) !important;
  background: var(--rb-card) !important;
}

/* Hover: the hairline darkens. Light stays white (a grey step on a white
   card reads as disabled); dark steps to raised as before. */
a.fern-card:hover,
.fern-card[href]:hover {
  border-color: var(--rb-border-hover) !important;
}
a.fern-card:focus-visible,
.fern-card[href]:focus-visible {
  border-color: var(--rb-border-hover) !important;
}

html.dark a.fern-card:hover,
html.dark .fern-card[href]:hover {
  background: var(--rb-raised) !important;
}
html.dark a.fern-card:focus-visible,
html.dark .fern-card[href]:focus-visible {
  background: var(--rb-raised) !important;
}

/* ---- callouts: glass info, bakelite warning, success, error ---- */
/* [ID] .fern-callout[data-intent] */
.fern-callout {
  border-radius: 12px !important;
  border: 1px solid var(--rb-border) !important;
  background: var(--rb-glass-fill) !important;
  color: var(--rb-text-2) !important;
}

.fern-callout[data-intent="info"],
.fern-callout[data-intent="note"],
.fern-callout[data-intent="launch"] {
  --accent: var(--rb-info);
}

.fern-callout[data-intent="info"] svg,
.fern-callout[data-intent="note"] svg,
.fern-callout[data-intent="launch"] svg {
  color: var(--rb-info) !important;
}

.fern-callout[data-intent="warning"] {
  background: color-mix(in srgb, var(--rb-bakelite) 7%, transparent) !important;
  border-color: color-mix(in srgb, var(--rb-bakelite) 22%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--rb-bakelite);
}

.fern-callout[data-intent="warning"] svg {
  color: var(--rb-ink-bakelite) !important;
}

.fern-callout[data-intent="success"],
.fern-callout[data-intent="check"],
.fern-callout[data-intent="tip"] {
  background: color-mix(in srgb, #5bba21 7%, transparent) !important;
  border-color: color-mix(in srgb, #5bba21 24%, transparent) !important;
  box-shadow: inset 3px 0 0 #5bba21;
}

.fern-callout[data-intent="success"] svg,
.fern-callout[data-intent="check"] svg,
.fern-callout[data-intent="tip"] svg {
  color: var(--rb-success) !important;
}

.fern-callout[data-intent="error"],
.fern-callout[data-intent="danger"] {
  background: color-mix(in srgb, #db292d 7%, transparent) !important;
  border-color: color-mix(in srgb, #db292d 26%, transparent) !important;
  box-shadow: inset 3px 0 0 #db292d;
}

.fern-callout[data-intent="error"] svg,
.fern-callout[data-intent="danger"] svg {
  color: var(--rb-error) !important;
}

/* ---- code blocks: kit surface, hairline, brand syntax colors ---- */
/* [ID] */
.fern-code,
.fern-code-block {
  border-radius: 12px !important;
  box-shadow: none !important;
}

.fern-code-block,
.fern-code::after {
  border-color: var(--rb-border-subtle) !important;
  --tw-ring-color: var(--rb-border-subtle) !important;
}

.fern-code-header,
.fern-code-group-header,
.fern-code-block-header {
  background: var(--rb-code-bg) !important;
  border-color: var(--rb-border-subtle) !important;
}

/* [INT] pre.code-block-root is internal */
pre.code-block-root {
  background-color: var(--rb-code-bg) !important;
  --shiki-dark-bg: var(--rb-code-bg) !important;
}

/* Syntax. Fern hard-codes its Shiki themes (github-light / material-dark) as
   inline styles, so the only lever is remapping the inline color values.
   [INT] and the most fragile rules in this file. */
/* Fern writes each token's colors inline, as "color:#HEX;--shiki-dark:#HEX"
   when server-rendered and as "color: rgb(); --shiki-dark: #HEX" once hydrated,
   so every value is matched in both spellings (i = any hex case).
   Dark: Fern's material-dark values. */
html.dark pre.code-block-root span:is([style*="--shiki-dark:#C3E88D" i], [style*="--shiki-dark: #C3E88D" i]) { --shiki-dark: var(--rb-code-string) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#C792EA" i], [style*="--shiki-dark: #C792EA" i]) { --shiki-dark: var(--rb-code-keyword) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#82AAFF" i], [style*="--shiki-dark: #82AAFF" i]) { --shiki-dark: var(--rb-code-fn) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#F78C6C" i], [style*="--shiki-dark: #F78C6C" i]) { --shiki-dark: var(--rb-code-number) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#FF9CAC" i], [style*="--shiki-dark: #FF9CAC" i]) { --shiki-dark: var(--rb-code-number) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#916B53" i], [style*="--shiki-dark: #916B53" i]) { --shiki-dark: var(--rb-code-number) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#FFCB6B" i], [style*="--shiki-dark: #FFCB6B" i]) { --shiki-dark: var(--rb-code-prop) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#F07178" i], [style*="--shiki-dark: #F07178" i]) { --shiki-dark: var(--rb-code-prop) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#546E7A" i], [style*="--shiki-dark: #546E7A" i]) { --shiki-dark: var(--rb-code-comment) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#545454" i], [style*="--shiki-dark: #545454" i]) { --shiki-dark: var(--rb-code-comment) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#8a8a8a" i], [style*="--shiki-dark: #8a8a8a" i]) { --shiki-dark: var(--rb-code-comment) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#EEFFFF" i], [style*="--shiki-dark: #EEFFFF" i]) { --shiki-dark: var(--rb-code-fg) !important; }
html.dark pre.code-block-root span:is([style*="--shiki-dark:#89DDFF" i], [style*="--shiki-dark: #89DDFF" i]) { --shiki-dark: var(--rb-code-fg) !important; }
/* Light: Fern's light theme reuses one color for unrelated tokens (its red
   marks keywords, punctuation and keys; its blue marks numbers and
   identifiers), so light mode keys on the token's dark value instead and
   both themes highlight the same way. Its comment grey (1.8:1) is the base. */
html:not(.dark) pre.code-block-root span:is([style*="color:#C2C3C5" i], [style*="color: rgb(194, 195, 197)"]) { color: var(--rb-code-comment) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#C3E88D" i], [style*="--shiki-dark: #C3E88D" i]) { color: var(--rb-code-string) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#C792EA" i], [style*="--shiki-dark: #C792EA" i]) { color: var(--rb-code-keyword) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#82AAFF" i], [style*="--shiki-dark: #82AAFF" i]) { color: var(--rb-code-fn) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#F78C6C" i], [style*="--shiki-dark: #F78C6C" i]) { color: var(--rb-code-number) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#FF9CAC" i], [style*="--shiki-dark: #FF9CAC" i]) { color: var(--rb-code-number) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#916B53" i], [style*="--shiki-dark: #916B53" i]) { color: var(--rb-code-number) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#FFCB6B" i], [style*="--shiki-dark: #FFCB6B" i]) { color: var(--rb-code-prop) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#F07178" i], [style*="--shiki-dark: #F07178" i]) { color: var(--rb-code-prop) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#546E7A" i], [style*="--shiki-dark: #546E7A" i]) { color: var(--rb-code-comment) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#545454" i], [style*="--shiki-dark: #545454" i]) { color: var(--rb-code-comment) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#8a8a8a" i], [style*="--shiki-dark: #8a8a8a" i]) { color: var(--rb-code-comment) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#EEFFFF" i], [style*="--shiki-dark: #EEFFFF" i]) { color: var(--rb-code-fg) !important; }
html:not(.dark) pre.code-block-root span:is([style*="--shiki-dark:#89DDFF" i], [style*="--shiki-dark: #89DDFF" i]) { color: var(--rb-code-fg) !important; }

/* [INT] Mermaid diagrams (.mermaid-container): sequence diagrams default to
   Trebuchet MS and their step numbers to sans-serif; labels are Work Sans. */
.mermaid-container svg :is(text, tspan),
.mermaid-container svg foreignObject * {
  font-family: var(--rb-sans) !important;
}

/* [ID] inline code (code inside a link keeps the link color, below) */
.fern-prose :not(pre) > code {
  font-family: var(--rb-mono);
  font-weight: 400 !important;
  background: var(--rb-raised) !important;
  border: 1px solid var(--rb-border-subtle) !important;
  color: var(--rb-text-1) !important;
  border-radius: 6px;
}

.fern-prose .fern-mdx-link > code,
.fern-prose .fern-mdx-link code {
  color: inherit !important;
}

/* On the raised inline-code chip the light link ink needs one step more (4.4:1) */
html:not(.dark) .fern-prose .fern-mdx-link code {
  color: #0169b6 !important;
}

/* ---- mono machine layer: breadcrumb, page actions, API keys/types, badges ---- */
/* [ID] */
.fern-breadcrumb,
.fern-breadcrumb-item {
  font-family: var(--rb-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rb-text-3) !important;
}

.fern-page-actions .fern-button {
  border-radius: 999px !important;
  font-family: var(--rb-mono);
}

.fern-api-property-key {
  font-family: var(--rb-mono) !important;
  color: var(--rb-text-1) !important;
}

.fern-api-property-type,
.fern-api-property-default {
  font-family: var(--rb-mono) !important;
  font-size: 12px;
  color: var(--rb-text-3) !important;
}

.fern-api-property-required {
  color: var(--rb-warning) !important;
  font-family: var(--rb-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.1em;
}

/* Fern sets ui-monospace with !important inside its cascade layers (kbd in
   base, method/status badges in components), and a layered !important beats
   any unlayered one. Declaring these in Fern's base layer, which comes before
   components, wins both. [INT] Fern's layer names and [data-badge-type] */
@layer base {

  .fern-web-socket-badge,
  .fern-docs-badge,
  .fern-docs-badge[data-badge-type],
  .fern-kbd {
    font-family: "Azeret Mono", ui-monospace, monospace !important;
  }

}

/* ---- links: accent-primary is the link blue; regular weight, underline on hover ---- */
/* [ID] */
.fern-mdx-link {
  font-weight: 400 !important;
}

/* Links inside running text keep an underline so they never rely on color
   alone (WCAG 1.4.1); a soft one, full strength on hover. Card link lists
   and other standalone links stay plain, as in the kit. */
.fern-prose p .fern-mdx-link,
.fern-prose li .fern-mdx-link,
.fern-callout .fern-mdx-link,
.fern-api-property .fern-mdx-link {
  text-decoration: underline !important;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent) !important;
  text-underline-offset: 3px;
}

.fern-prose .fern-card .fern-mdx-link {
  text-decoration: none !important;
}

.fern-mdx-link:hover {
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 3px;
}
.fern-mdx-link:focus-visible {
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 3px;
}

/* Light callout fills are a step darker than the canvas: the link ink goes
   a step darker with them (#0172c4 is 4.4:1 there). */
html:not(.dark) .fern-callout .fern-mdx-link {
  color: #0169b6 !important;
}

/* ---- Try it: the one fuchsia fill on an API reference page ---- */
/* No fern-* hook on the button, so match the playground href and the Tailwind
   utility, then swap Fern's own variables locally. [INT] */
.fern-layout-reference-aside a[class*="bg-(color:--accent)"],
a[href^="https://playground.deepgram.com"][class*="bg-(color:--accent)"] {
  --accent: var(--rb-fuchsia);
  --accent-10: var(--rb-fuchsia-hover);
  --accent-contrast: var(--rb-ink);
  border-radius: 999px !important;
  font-family: var(--rb-mono);
}

/* ---- text color ramp ---- */
/* [VAR] Fern's secondary text step (prose, card descriptions, inactive nav)
   becomes the kit's text/secondary instead of a 63-69% alpha. */
:root,
html.dark {
  --grayscale-a11: var(--rb-text-2);
}

/* [ID] links: the kit's link color exactly (Fern lifts --accent-11 for AAA) */
.fern-mdx-link {
  color: var(--rb-link) !important;
}

/* [ID] prose body copy */
.fern-prose {
  color: var(--rb-text-2);
}

/* ---- home page (fern/pages/home.mdx) ---- */
/* Model IDs as tinted mono pills: Flux in LED, Nova in glass */
.dg-model-tag {
  display: inline-block;
  margin-left: 6px;
  vertical-align: 1px;
  padding: 3px 7px;
  border-radius: 999px;
  font-family: var(--rb-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--rb-ink-led);
  background: color-mix(in srgb, var(--rb-led) 12%, transparent);
}

.dg-model-tag.nova {
  color: var(--rb-ink-glass);
  background: color-mix(in srgb, var(--rb-glass) 16%, transparent);
}

/* SDK cards: one brand accent per language (non-interactive color) */
.dg-lang-badge {
  --mark: var(--rb-border-hover);
  --mark-ink: var(--rb-text-1);

  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  /* Composited over the card color, not transparent, so the dark hover step
     to raised doesn't drop the .NET LED ink below AA (4.7:1 on #141414,
     4.3:1 had it followed the card to #1d1d1d). */
  background: color-mix(in srgb, var(--mark) var(--mark-mix, 16%), var(--rb-card));
  color: var(--mark-ink);
  font-family: var(--rb-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* The official marks (fern/assets/sdk-*-2026.svg, sources in REBRAND_PLAN.md)
   sit on the tint in their own colors; the Go logo is a wide wordmark, so it
   gets a wider slot. [INT] Fern's prose image rules (radius, margin) are
   reset so the mark renders as an icon. */
.dg-lang-badge img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.dg-lang-badge[data-lang="go"] img {
  width: 36px;
}

.dg-lang-badge[data-lang="py"] { --mark: var(--rb-glass); --mark-ink: var(--rb-ink-glass); }
.dg-lang-badge[data-lang="js"] { --mark: var(--rb-brass); --mark-ink: var(--rb-ink-brass); }
.dg-lang-badge[data-lang="go"] { --mark: var(--rb-phosphor); --mark-ink: var(--rb-ink-phosphor); }
.dg-lang-badge[data-lang="net"] { --mark: var(--rb-led); --mark-ink: var(--rb-ink-led); --mark-mix: 12%; }
.dg-lang-badge[data-lang="java"] { --mark: var(--rb-bakelite); --mark-ink: var(--rb-ink-bakelite); }

/* [ID] overview layout (home): section titles are display type at 28px */
.fern-layout-overview .fern-prose h2 {
  font-family: var(--rb-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* [INT] card title: Work Sans 19px medium, like the kit's card heading */
.fern-card .text-body.font-semibold {
  font-size: 19px;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--rb-text-1);
}

/* [INT] SDK cards: center the badge with the label, size the icon slot to it.
   16px between the badge and the title, the kit's pill spacing (item 10). */
.fern-card-icon-row:has(.dg-lang-badge) {
  align-items: center;
  gap: 16px;
}

.fern-card .card-icon:has(.dg-lang-badge) {
  width: 44px !important;
  height: 44px !important;
  margin-right: 0;
}

.fern-card:has(.dg-lang-badge) p {
  color: var(--rb-text-1);
  font-weight: 500;
}

.fern-card:has(.dg-lang-badge) {
  padding: 18px 20px !important;
  color: var(--rb-text-1);
  font-weight: 500;
}

/* =====================================================================
 * Embedded widgets, restyled from the host page (nothing is republished).
 * ===================================================================== */

/* ---- Ask AI chat (@deepgram/docs-chat, pinned in docs.yml) ----
   The widget reads --dg-primary and its --color-dg-* tokens, which it sets
   on :root at runtime; setting them on body wins for every widget node.
   [INT] the widget's token names (a separate package) */
body {
  --dg-primary: var(--rb-link);
  --dg-secondary: var(--rb-link);
  --color-dg-primary: var(--rb-link);
  --color-dg-secondary: var(--rb-link);
  --color-dg-background: var(--rb-canvas);
  --color-dg-charcoal: var(--rb-raised);
  --color-dg-solid: var(--rb-inverse);
  --color-dg-on-solid: var(--rb-on-inverse);
  --color-dg-border: var(--rb-border);
  --color-dg-pebble: var(--rb-border-hover);
  --color-dg-slate: var(--rb-text-3);
  --color-dg-text: var(--rb-text-1);
  --color-dg-fog: var(--rb-text-2);
  --color-dg-muted: var(--rb-text-3);
  --color-dg-danger: var(--rb-error);
  --font-dg-sans: var(--rb-sans);
}

/* docs-chat 0.1.6 draws its focused input with the old green/blue gradient
   border and glow. Canvas fill, border token, no glow; the global fuchsia
   :focus-visible outline stays. [INT] the widget's .dg-chat-input class */
body .dg-chat-input:focus {
  background: var(--rb-canvas) !important;
  border: 1px solid var(--rb-border-hover) !important;
  box-shadow: none !important;
}

/* ---- voice orb (relay agent.js, a separate repo) ----
   Its pills, intro card, focus rings and mic icon are DOM, so they take the
   kit tokens here (inline styles need !important). The animated ring is
   drawn on a canvas and keeps its own colors until the relay ships.
   [INT] every selector: the relay's ids and classes */
#dg-orb-container {
  background: radial-gradient(circle closest-side, transparent 74%, color-mix(in srgb, var(--rb-text-1) 8%, transparent) 78%, color-mix(in srgb, var(--rb-text-1) 8%, transparent) 82%, transparent 86%) !important;
}

#dg-orb-mic-btn svg {
  stroke: var(--rb-text-1) !important;
}

#dg-orb-wrapper .dg-orb-pill,
#dg-show-orb {
  border: 1px solid var(--rb-border) !important;
  background: var(--rb-overlay) !important;
  color: var(--rb-text-1) !important;
  font-family: var(--rb-mono) !important;
  box-shadow: var(--rb-shadow-overlay) !important;
}

#dg-orb-label-pill:hover,
#dg-orb-wrapper.dg-orb-hover #dg-orb-label-pill,
#dg-orb-mic-btn.dg-orb-pill:hover,
#dg-orb-wrapper.dg-orb-hover #dg-orb-mic-btn.dg-orb-pill,
#dg-show-orb:hover {
  border-color: var(--rb-border-hover) !important;
  background: var(--rb-raised) !important;
  color: var(--rb-text-1) !important;
}
#dg-orb-mic-btn.dg-orb-pill:focus-visible {
  border-color: var(--rb-border-hover) !important;
  background: var(--rb-raised) !important;
  color: var(--rb-text-1) !important;
}

#dg-orb-wrapper .dg-orb-pill .dg-dot,
#dg-nav-dot {
  background: var(--rb-success) !important;
}

/* [INT] The relay pulses the nav-toast dot with an inline old-green glow (rgba(19,239,147)); pin it to the success token. */
#dg-nav-dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rb-success) 35%, transparent) !important;
}

#dg-orb-intro {
  border: 1px solid var(--rb-border) !important;
  background: var(--rb-overlay) !important;
  color: var(--rb-text-2) !important;
  box-shadow: var(--rb-shadow-overlay) !important;
  font-family: var(--rb-sans) !important;
}

#dg-orb-intro h4 {
  color: var(--rb-text-1) !important;
  font-family: var(--rb-sans) !important;
}

#dg-orb-intro p,
#dg-orb-intro .dg-orb-note {
  color: var(--rb-text-2) !important;
  border-color: var(--rb-border-subtle) !important;
}

#dg-orb-intro button {
  border-radius: 999px !important;
  font-family: var(--rb-mono) !important;
}

#dg-orb-intro .dg-orb-cta {
  background: var(--rb-inverse) !important;
  color: var(--rb-on-inverse) !important;
}

#dg-orb-intro .dg-orb-later {
  background: var(--rb-glass-fill) !important;
  color: var(--rb-text-1) !important;
  border: 1px solid var(--rb-border) !important;
}

#dg-orb-mic-btn:focus-visible,
#dg-orb-intro button:focus-visible,
#dg-orb-label-pill:focus-visible,
#dg-orb-hide-btn:focus-visible,
#dg-show-orb:focus-visible {
  outline: 2px solid var(--rb-fuchsia) !important;
  outline-offset: 2px !important;
}

#dg-page-transition {
  background: var(--rb-canvas) !important;
}

#dg-nav-toast {
  background: var(--rb-overlay) !important;
  color: var(--rb-text-1) !important;
  border: 1px solid var(--rb-border) !important;
  font-family: var(--rb-sans) !important;
}

/* ---- gated demos: the "Login to try it" button (assets/docs-auth-overlay.js) ----
   The overlay injects its own <style> after this sheet, so these win with
   !important. The old brand green fill (#13ef93) becomes the kit's inverse
   pill: surface/inverse fill, text/inverse label in Azeret Mono, no green
   anywhere, fuchsia focus ring with the ink edge in light. [INT] the
   overlay's classes (.dg-auth-overlay, .dg-auth-overlay-label, -hint). */
.dg-auth-overlay-label {
  background: var(--rb-inverse) !important;
  color: var(--rb-on-inverse) !important;
  font-family: var(--rb-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 11px 20px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.dg-auth-overlay:hover .dg-auth-overlay-label {
  box-shadow: none !important;
  background: var(--rb-text-2) !important; /* one step lighter in dark, darker in light */
}
.dg-auth-overlay:focus-within .dg-auth-overlay-label {
  box-shadow: none !important;
  background: var(--rb-text-2) !important; /* one step lighter in dark, darker in light */
}

.dg-auth-overlay:focus-visible .dg-auth-overlay-label {
  outline: 2px solid var(--rb-fuchsia);
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px var(--rb-canvas),
    0 0 0 5px var(--rb-focus-edge) !important;
}

.dg-auth-overlay-hint {
  font-family: var(--rb-sans) !important;
  color: var(--rb-text-2) !important;
}

.dg-auth-overlay {
  background: var(--rb-glass-fill) !important;
  border-color: var(--rb-border) !important;
}

/* ---- agent widget demo frames (assets/agent-widget-demos.js) ----
   Only the docs frame and its label; the widget inside keeps the product's
   default theme, and #demo-themed keeps its custom theme on purpose. [INT] */
[data-dg-demo] {
  background: var(--rb-default) !important;
  border-color: var(--rb-border-subtle) !important;
  border-radius: 12px;
}

[data-dg-demo][data-dg-demo-type]::before {
  font-family: var(--rb-mono) !important;
  font-weight: 500 !important;
}

[data-dg-demo][data-dg-demo-type="interactive"]::before {
  background: color-mix(in srgb, #5bba21 16%, transparent) !important;
  color: var(--rb-success) !important; /* dark #5bba21: 5.8:1 on the tint over #141414 */
  border-color: color-mix(in srgb, #5bba21 35%, transparent) !important;
}

/* Light: the frame sits on surface/default, where #408217 is 3.8:1 and the
   phosphor ink #3b7815 only 4.4:1 on the tint; the method-badge green
   #336912 (below) clears AA at 5.3:1. */
html:not(.dark) [data-dg-demo][data-dg-demo-type="interactive"]::before {
  color: #336912 !important;
}

/* [ID] .fern-docs-badge; [INT] its color variant classes. Fern's light
   green method badge (WSS, GET) is 4.1:1 on its tint, and the phosphor ink
   #3b7815 still only 4.4:1 there; #336912 clears AA (measured on the preview). */
html:not(.dark) .fern-docs-badge.green:not(.solid) {
  color: #336912 !important;
}

/* [INT] the endpoint path segments use Fern's --grayscale-a9 (3.3-3.7:1);
   the kit's tertiary text holds 4.5:1 in both themes. */
.fern-x-overflow [class*="--grayscale-a9"] {
  color: var(--rb-text-3) !important;
}

/* Focus edge for the header pills, keeping each pill's own ring. [ID] + [INT] variants */
html:not(.dark) .fern-header-navbar-links > .fern-button:focus-visible {
  box-shadow:
    inset 0 0 0 1px var(--rb-border),
    0 0 0 2px var(--rb-canvas),
    0 0 0 5px var(--rb-focus-edge) !important;
}

html:not(.dark) .fern-header-navbar-links > a.fern-button[href$="/ask-ai"]:focus-visible,
html:not(.dark) #ask-ai-button:focus-visible {
  box-shadow:
    inset 0 0 0 1.5px var(--rb-fuchsia),
    0 0 0 2px var(--rb-canvas),
    0 0 0 5px var(--rb-focus-edge) !important;
}

html:not(.dark) .fern-header-navbar-links > .fern-button.filled.primary:focus-visible {
  box-shadow:
    0 0 0 2px var(--rb-canvas),
    0 0 0 5px var(--rb-focus-edge) !important;
}

/* The same thin ink edge on Fern's other light-mode controls, which had only
   the fuchsia ring: search and theme buttons and the code-block buttons
   (Fern's Tailwind ring-accent class, whose blue inset ring this replaces),
   Copy page and its split menu, code blocks and code tabs. [ID] + [INT] */
html:not(.dark) #fern-search-button:focus-visible,
html:not(.dark) button.rounded-2[class*="focus-visible:ring-(color:--accent)"]:focus-visible,
html:not(.dark) .fern-page-actions .fern-button:focus-visible,
html:not(.dark) pre.code-block-root:focus-visible,
html:not(.dark) .fern-code .fern-scroll-area-viewport:focus-visible,
html:not(.dark) .fern-code-group-tab:focus-visible {
  box-shadow:
    0 0 0 2px var(--rb-canvas),
    0 0 0 5px var(--rb-focus-edge) !important;
}

/* Dark has no ink edge; drop Fern's link-blue ring so focus stays fuchsia only */
html.dark #fern-search-button:focus-visible,
html.dark button.rounded-2[class*="focus-visible:ring-(color:--accent)"]:focus-visible {
  box-shadow: none !important;
}

/* [INT] search dialog input (cmdk): an inset ring, so it clears the Esc chip */
[data-cmdk-fern-header] input:focus-visible {
  outline-offset: -2px !important;
}

/* Sidebar method badges: Fern's solid green (white text, 3.2:1) and the light
   subtle blue (4.1:1) take AA inks. [ID] .fern-docs-badge; [INT] variants */
.fern-docs-badge.green.solid {
  color: var(--rb-ink) !important;
}

html:not(.dark) .fern-docs-badge.blue:not(.solid) {
  color: var(--rb-ink-glass) !important;
}