/*fern-site-stylesheet*/@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/deepgram.docs.buildwithfern.com/c88db2401bef7e1203e0933cc5525a0f81863bfd076756db12acea5596f089ec/assets/Inter.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roobert';
    src: url('/_fern-files/deepgram.docs.buildwithfern.com/498f8cd8cc83214f2c12f7cd101a50f8a38089a7c4d663ac8357d93a9533ac85/assets/Roobert.woff2') format('woff2');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FiraMono';
    src: url('/_fern-files/deepgram.docs.buildwithfern.com/8ef87eace096c4a0657095ee5a562293672a90c41f9481d70576e2225da4d0f7/assets/FiraMono.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: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 32px;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Roobert', 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'FiraMono', 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: #f0f4f2;
  --accent-2: #e8f0ec;
  --accent-3: #d8ebe2;
  --accent-4: #c6e4d6;
  --accent-5: #b3dcc9;
  --accent-6: #9bd0b8;
  --accent-7: #79c0a2;
  --accent-8: #42ab84;
  --accent-9: #00976e;
  --accent-10: #008a62;
  --accent-11: #00734d;
  --accent-12: #193b2e;

  --accent-a1: #21cb2306;
  --accent-a2: #099a2f0e;
  --accent-a3: #07a34b1f;
  --accent-a4: #019d4b31;
  --accent-a5: #01994d45;
  --accent-a6: #01914d5e;
  --accent-a7: #028e5182;
  --accent-a8: #01915abb;
  --accent-a9: #00976e;
  --accent-a10: #008a62;
  --accent-a11: #00734d;
  --accent-a12: #002617e5;

  --accent-contrast: #fff;
  --accent-surface: #e5efeacc;
  --accent-indicator: #00976e;
  --accent-track: #00976e;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(96.3% 0.0043 165.6);
      --accent-2: oklch(94.7% 0.0095 165.6);
      --accent-3: oklch(92.3% 0.0237 165.6);
      --accent-4: oklch(89.4% 0.0371 165.6);
      --accent-5: oklch(85.9% 0.0505 165.6);
      --accent-6: oklch(81.4% 0.0653 165.6);
      --accent-7: oklch(75.3% 0.0848 165.6);
      --accent-8: oklch(67% 0.1131 165.6);
      --accent-9: oklch(60% 0.1251 165.6);
      --accent-10: oklch(55.7% 0.1251 165.6);
      --accent-11: oklch(48.3% 0.1251 165.6);
      --accent-12: oklch(32.3% 0.0471 165.6);

      --accent-a1: color(display-p3 0.2157 0.7765 0.0353 / 0.021);
      --accent-a2: color(display-p3 0.0039 0.5608 0.0902 / 0.049);
      --accent-a3: color(display-p3 0.0118 0.5451 0.2078 / 0.103);
      --accent-a4: color(display-p3 0.0039 0.5412 0.2196 / 0.168);
      --accent-a5: color(display-p3 0.0039 0.5333 0.2275 / 0.237);
      --accent-a6: color(display-p3 0.0039 0.502 0.2196 / 0.323);
      --accent-a7: color(display-p3 0.0039 0.4745 0.2314 / 0.441);
      --accent-a8: color(display-p3 0 0.4706 0.2471 / 0.609);
      --accent-a9: color(display-p3 0 0.4471 0.251 / 0.731);
      --accent-a10: color(display-p3 0 0.3961 0.2118 / 0.756);
      --accent-a11: color(display-p3 0 0.3137 0.1529 / 0.8);
      --accent-a12: color(display-p3 0 0.1098 0.0588 / 0.862);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.902 0.9333 0.9176 / 0.8);
      --accent-indicator: oklch(60% 0.1251 165.6);
      --accent-track: oklch(60% 0.1251 165.6);
    }
  }
}


.light, :root {
  --grayscale-1: #fcfcfd;
  --grayscale-2: #f9f9fb;
  --grayscale-3: #f0f0f3;
  --grayscale-4: #e8e8ec;
  --grayscale-5: #e0e1e6;
  --grayscale-6: #d9d9e0;
  --grayscale-7: #cdced6;
  --grayscale-8: #b9bbc6;
  --grayscale-9: #8b8d98;
  --grayscale-10: #80838d;
  --grayscale-11: #60646c;
  --grayscale-12: #1c2024;

  --grayscale-a1: #00005503;
  --grayscale-a2: #00005506;
  --grayscale-a3: #0000330f;
  --grayscale-a4: #00002d17;
  --grayscale-a5: #0009321f;
  --grayscale-a6: #00002f26;
  --grayscale-a7: #00062e32;
  --grayscale-a8: #00083046;
  --grayscale-a9: #00051d74;
  --grayscale-a10: #00071b7f;
  --grayscale-a11: #0007149f;
  --grayscale-a12: #000509e3;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.988 0.988 0.992);
      --grayscale-2: color(display-p3 0.976 0.976 0.984);
      --grayscale-3: color(display-p3 0.94 0.941 0.953);
      --grayscale-4: color(display-p3 0.908 0.909 0.925);
      --grayscale-5: color(display-p3 0.88 0.881 0.901);
      --grayscale-6: color(display-p3 0.85 0.852 0.876);
      --grayscale-7: color(display-p3 0.805 0.808 0.838);
      --grayscale-8: color(display-p3 0.727 0.733 0.773);
      --grayscale-9: color(display-p3 0.547 0.553 0.592);
      --grayscale-10: color(display-p3 0.503 0.512 0.549);
      --grayscale-11: color(display-p3 0.379 0.392 0.421);
      --grayscale-12: color(display-p3 0.113 0.125 0.14);

      --grayscale-a1: #00005503;
      --grayscale-a2: #00005506;
      --grayscale-a3: #0000330f;
      --grayscale-a4: #00002d17;
      --grayscale-a5: #0009321f;
      --grayscale-a6: #00002f26;
      --grayscale-a7: #00062e32;
      --grayscale-a8: #00083046;
      --grayscale-a9: #00051d74;
      --grayscale-a10: #00071b7f;
      --grayscale-a11: #0007149f;
      --grayscale-a12: #000509e3;

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


.dark {
  --accent-1: #050d0a;
  --accent-2: #0f1a15;
  --accent-3: #092d21;
  --accent-4: #003d29;
  --accent-5: #004b34;
  --accent-6: #005a40;
  --accent-7: #006b4d;
  --accent-8: #00805b;
  --accent-9: #a1f9d4;
  --accent-10: #97efca;
  --accent-11: #66cfa6;
  --accent-12: #9df5d0;

  --accent-a1: #00b50003;
  --accent-a2: #4bfb9c10;
  --accent-a3: #00fca124;
  --accent-a4: #00fc9735;
  --accent-a5: #00ffa543;
  --accent-a6: #00feac53;
  --accent-a7: #00fdb165;
  --accent-a8: #00fdb07b;
  --accent-a9: #a5ffd9f9;
  --accent-a10: #a0fed6ef;
  --accent-a11: #7dffcccd;
  --accent-a12: #a3ffd8f5;

  --accent-contrast: #0b281d;
  --accent-surface: #13291e80;
  --accent-indicator: #a1f9d4;
  --accent-track: #a1f9d4;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(15% 0.0156 165.9);
      --accent-2: oklch(20.7% 0.0197 165.9);
      --accent-3: oklch(26.8% 0.0476 165.9);
      --accent-4: oklch(31.6% 0.0695 165.9);
      --accent-5: oklch(36.4% 0.0798 165.9);
      --accent-6: oklch(41.3% 0.0881 165.9);
      --accent-7: oklch(46.7% 0.0993 165.9);
      --accent-8: oklch(52.8% 0.1153 165.9);
      --accent-9: oklch(91.6% 0.0996 165.9);
      --accent-10: oklch(88.7% 0.0996 165.9);
      --accent-11: oklch(78% 0.1153 165.9);
      --accent-12: oklch(90.5% 0.0996 165.9);

      --accent-a1: color(display-p3 0 0.9176 0 / 0.009);
      --accent-a2: color(display-p3 0.4235 0.9922 0.6196 / 0.062);
      --accent-a3: color(display-p3 0.302 0.9922 0.6824 / 0.136);
      --accent-a4: color(display-p3 0.2588 1 0.6314 / 0.201);
      --accent-a5: color(display-p3 0.3176 1 0.6863 / 0.259);
      --accent-a6: color(display-p3 0.3647 1 0.7098 / 0.32);
      --accent-a7: color(display-p3 0.3882 1 0.7294 / 0.386);
      --accent-a8: color(display-p3 0.4078 1 0.7294 / 0.472);
      --accent-a9: color(display-p3 0.7333 1 0.8667 / 0.968);
      --accent-a10: color(display-p3 0.7176 1 0.8588 / 0.927);
      --accent-a11: color(display-p3 0.6275 1 0.8235 / 0.796);
      --accent-a12: color(display-p3 0.7255 0.9961 0.8627 / 0.951);

      --accent-contrast: #0b281d;
      --accent-surface: color(display-p3 0.0863 0.1569 0.1255 / 0.5);
      --accent-indicator: oklch(91.6% 0.0996 165.9);
      --accent-track: oklch(91.6% 0.0996 165.9);
    }
  }
}


.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(0, 151, 110, 1);
  --background: rgba(245, 245, 247, 1);
  --border: rgba(229, 229, 231, 1);
  --sidebar-background: rgba(245, 245, 247, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #f5f5f7;
}

.dark {
  color-scheme: dark;
  --accent: rgba(161, 249, 212, 1);
  --background: rgba(11, 11, 12, 1);
  --border: rgba(44, 44, 51, 1);
  --sidebar-background: rgba(11, 11, 12, 1);
  --header-background: rgba(26, 26, 31, 1);
  --card-background: rgba(0, 0, 0, 1);
  --theme-color: #0b0b0c;
}

/**
 * Deepgram colors
 *
 * These are the colors that Deepgram uses for their main theme.
 * These are also set separately in the fern/docs.yml file.
 *
 * @see fern/docs.yml
 */

:root {
  --background-rgb: 251, 251, 255;
  --body-text-rgb: 35, 35, 41;
  --header-text-rgb: 11, 11, 12;
  --accent-primary-rgb: 2, 122, 56;
  --sidebar-background-rgb: 251, 251, 255;
  --header-background-rgb: 255, 255, 255;
  --card-background-rgb: 255, 255, 255;
  --border-rgb: 225, 225, 229;

  --hl-dark-blue: #201cff;
  --hl-meadow: #13ef95;
  --hl-pink: #ff2eea;
  --hl-light-pink: #ffafea;
  --hl-blue: #4b3cff;
  --hl-orange: #ed9e79;
  --hl-red: #cc0000;
  --hl-gray: #6c6c70;
  --hl-light-gray: #949498;

  /* 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: rgba(var(--body-text-rgb), 0.5);
}

html.dark {
  --background-rgb: 11, 11, 12;
  --body-text-rgb: 225, 225, 229;
  --header-text-rgb: 251, 251, 255;
  --accent-primary-rgb: 161, 249, 212;
  --sidebar-background-rgb: 11, 11, 12;
  --header-background-rgb: 26, 26, 31;
  --card-background-rgb: 0, 0, 0;
  --border-rgb: 44, 44, 51;
}

/**
 * Fern styles
 */

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

.fern-header-right-menu .fern-button {
  font-weight: 600;
  color: var(--deepgram-header-text);
}

.fern-header-right-menu .fern-button:not([disabled]).filled.primary {
  background-color: var(--deepgram-body-text);
  color: var(--deepgram-background);
}


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

:root {
  --dg-fill: linear-gradient(45deg,
      var(--deepgram-header-background),
      var(--deepgram-header-background));
  --dg-primary: linear-gradient(45deg,
      var(--hl-dark-blue) -91.5%,
      var(--deepgram-accent-primary) 80.05%);
  --dg-experimental: linear-gradient(45deg,
      var(--hl-pink) -99.24%,
      var(--hl-blue) 99.26%);
  --dg-deprecated: linear-gradient(45deg,
      var(--hl-orange) -99.24%,
      var(--hl-red) 99.26%);
  --dg-pink-gradient: linear-gradient(45deg,
      var(--hl-pink) -99.24%,
      var(--hl-light-pink) 99.26%);
  --dg-unavailable: linear-gradient(45deg,
      var(--hl-gray) -99.24%,
      var(--hl-light-gray) 99.26%);
  --dg-primary-hover: linear-gradient(45deg,
      var(--deepgram-body-text) -91.5%,
      var(--deepgram-body-text) 80.05%);
}

/*
 * Deepgram Badge
 */
.dg-badge {
  --gradient: var(--dg-primary);

  font-size: 12px;
  background: var(--dg-fill) padding-box, var(--gradient) border-box;
  border-radius: 0.5rem;
  border: 0.125rem solid transparent;
}

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

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

/* Support both naming patterns */
.dg-badge.unavailable {
  --gradient: var(--dg-unavailable);
}

.dg-badge.experimental {
  --gradient: var(--dg-experimental);
}

.dg-badge.deprecated {
  --gradient: var(--dg-deprecated);
}

.dg-badge.pink {
  --gradient: var(--dg-pink-gradient);
}

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

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


/**
 * Deepgram Navigation Tabs
 */

.fern-header-tabs > div > a {
  font-weight: 600 !important;
}

.fern-header-tabs > div > a[data-state="active"] {
  color: var(--deepgram-body-text) !important;
}

.fern-header-tabs > div > a[data-state="inactive"] {
  color: var(--deepgram-muted-text) !important;
}

.fern-header-tabs > div > a[data-state="active"]:after {
  height: 0.125rem;
  background-color: none;
  background: var(--dg-primary);
}

/**
 * Deepgram Header
 */

.fern-header-navbar-links > .fern-button:not([disabled]).filled.primary {
  background-color: var(--deepgram-accent-primary);
}

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

/**
 * Fern Sidebar
 */

@layer components {

  @media (width>=64rem) {

    [data-theme="default"] #fern-sidebar-scroll-area {
      padding-left: 0 !important;
      padding-inline: 0 !important;
      background-color: var(--deepgram-sidebar-background);
    }

    [data-theme="default"] #fern-sidebar-scroll-area .fern-sidebar-link {
      border-radius: 0 !important;
      padding-left: 2rem;
    }

    [data-theme="default"]
      #fern-sidebar-scroll-area
      .fern-sidebar-link[data-state="active"]::after {
      right: 0 !important;
      left: auto !important;
    }
  
}

  [data-theme="default"]
    #fern-sidebar-scroll-area
    .fern-sidebar-group.lg\:px-1 {
    padding-inline: 0 !important;
  }

  [data-theme="default"]
    #fern-sidebar-scroll-area
    .fern-sidebar-link[data-state="active"] {
    background-color: rgba(var(--body-text-rgb), 0.1);
  }

  [data-theme="default"]
    #fern-sidebar-scroll-area
    .fern-sidebar-link[data-state="active"]::after {
    content: "";
    position: absolute;
    right: auto;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background: var(--dg-primary);
    z-index: 1;
  }

  [data-theme="default"]
    #fern-sidebar-scroll-area
    .fern-sidebar-link[data-state="active"] {
    position: relative;
  }

  [data-theme="default"] #fern-sidebar-scroll-area .fern-sidebar-heading {
    padding-left: 2rem;
  }

}

/**
 * Fern TW styles
 */

/**
 * Docsearch styles
 */

.DocSearch {
  /* docsearch variables that reference deepgram variables */
  --docsearch-primary-color: var(--deepgram-accent-primary);
  --docsearch-text-color: var(--deepgram-body-text);
  --docsearch-spacing: 12px;
  --docsearch-icon-stroke-width: 1.4;
  --docsearch-highlight-color: var(--deepgram-accent-primary);
  --docsearch-muted-color: var(--deepgram-muted-text);
  --docsearch-container-background: rgba(var(--background-rgb), 0.9);
  --docsearch-logo-color: var(--deepgram-accent-primary);

  /* modal */
  --docsearch-modal-width: 720px;
  --docsearch-modal-height: 800px;
  --docsearch-modal-background: var(--deepgram-card-background);
  --docsearch-modal-shadow: inset 1px 1px 0 0 var(--deepgram-background),
    0 3px 8px 0 var(--deepgram-background);

  /* searchbox */
  --docsearch-searchbox-height: 56px;
  --docsearch-searchbox-background: var(--deepgram-background);
  --docsearch-searchbox-focus-background: var(--deepgram-background);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--deepgram-accent-primary);

  /* hit */
  --docsearch-hit-height: 56px;
  --docsearch-hit-color: var(--docsearch-text-color);
  --docsearch-hit-active-color: var(--deepgram-background);
  --docsearch-hit-background: var(--deepgram-background);
  --docsearch-hit-shadow: 0 1px 3px 0 var(--deepgram-card-background);

  /* key */
  --docsearch-key-gradient: linear-gradient(
    -225deg,
    var(--deepgram-border) 0%,
    var(--deepgram-border) 100%
  );
  --docsearch-key-shadow: inset 0 -2px 0 0 var(--deepgram-border),
    inset 0 0 1px 1px var(--deepgram-border),
    0 1px 2px 1px var(--docsearch-muted-color);
  --docsearch-key-pressed-shadow: inset 0 -2px 0 0 var(--deepgram-border),
    inset 0 0 1px 1px var(--deepgram-border),
    0 1px 1px 0 var(--docsearch-muted-color);

  /* footer */
  --docsearch-footer-height: 44px;
  --docsearch-footer-background: var(--deepgram-card-background);
  --docsearch-footer-shadow: 0 -1px 0 0 var(--deepgram-border),
    0 -3px 6px 0 var(--deepgram-background);
}

@media (min-width: 1024px) {

  .DocSearch-Button {
    width: 100%;
  }

}

#docsearch-input,
#docsearch-input:focus,
#docsearch-input:active {
  --tw-ring-color: transparent !important;
}

.DocSearch-Button {
  outline: 1px solid var(--docsearch-muted-color);

  transform: scale(0.9);
  padding: 0;
  margin: 0;
  align-items: center;
  background: transparent;
}

.DocSearch-Search-Icon {
  margin-left: 0.75rem;
  margin-right: 1rem;
}

.DocSearch-Button-Keys {
  margin-right: 0.50rem
}

.DocSearch-Button:hover {
  border-color: var(--deepgram-border);
  outline: none;
}
.DocSearch-Button:focus-visible {
  border-color: var(--deepgram-border);
  outline: none;
}

.DocSearch-Button:active,
.DocSearch-Button:focus {
  background: none;
  box-shadow: none;
  color: transparent;
  outline: none;
}

.DocSearch-Logo {
  display: none;
}

/*
 * 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;
}

/* 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 "Free API Key" button style) */
button.fern-filter-badge,
button.fern-docs-badge.fern-filter-badge,
.fern-docs-badge.fern-filter-badge {
  background-color: var(--deepgram-accent-primary) !important;
  color: var(--deepgram-background) !important; /* Uses background color for text - auto adapts to light/dark */
  border-color: var(--deepgram-accent-primary) !important;
}

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

/* Dropdown menu checkmark - make it green when checked */
.fern-dropdown-checkmark  {
  color: var(--deepgram-accent-primary) !important;
}

/* Also target items with bg-accent-subtle class (selected state) */
.fern-dropdown-item.bg-accent-subtle svg.lucide-check {
  color: var(--deepgram-accent-primary) !important;
}

/*
 * Ask AI Button — gradient border glow
 */
#ask-ai-button {
  background:
    linear-gradient(var(--header-background, #1a1a1f), var(--header-background, #1a1a1f)) padding-box,
    linear-gradient(90deg, #008fc1, #00f099, #008fc1, #00f099) border-box !important;
  border: 1px solid transparent !important;
  box-shadow:
    6px 0 15px 0 rgba(56, 237, 172, 0.2),
    -6px 0 15px 0 rgba(20, 154, 251, 0.2);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

#ask-ai-button:hover {
  box-shadow:
    6px 0 20px 0 rgba(56, 237, 172, 0.35),
    -6px 0 20px 0 rgba(20, 154, 251, 0.35);
  transform: translateY(-1px);
}
#ask-ai-button:focus-visible {
  box-shadow:
    6px 0 20px 0 rgba(56, 237, 172, 0.35),
    -6px 0 20px 0 rgba(20, 154, 251, 0.35);
  transform: translateY(-1px); outline: none;
}

#ask-ai-button:active {
  transform: translateY(0);
}

html.dark #ask-ai-button {
  background:
    linear-gradient(var(--header-background, #1a1a1f), var(--header-background, #1a1a1f)) padding-box,
    linear-gradient(90deg, #008fc1, #00f099, #008fc1, #00f099) border-box !important;
  box-shadow:
    6px 0 15px 0 rgba(56, 237, 172, 0.2),
    -6px 0 15px 0 rgba(20, 154, 251, 0.2);
}

/* 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;
}

html:not(.dark) #ask-ai-button {
  background:
    linear-gradient(var(--header-background, #ffffff), var(--header-background, #ffffff)) padding-box,
    linear-gradient(90deg, #008fc1, #00f099, #008fc1, #00f099) border-box !important;
}

/**
 * Speak 26 announcement banner
 *
 * Mirrors the promo banner on deepgram.com (#promo-banner): five-stop
 * gradient, Speak logo left, Roobert copy centered, white CTA right.
 * Fern renders the docs.yml announcement as #fern-announcement, with the
 * message in its inner div (through a display: contents wrapper). The
 * logo is inlined so it does not depend on Fern uploading a CSS-only
 * asset. Breakpoints (576px, 992px) and type sizes (18px, 20px) follow
 * deepgram.com's banner.
 *
 * Temporary: added in deepgram-docs#1230. After October 29, 2026, delete
 * this whole block and restore or replace `announcement` in docs.yml
 * in the same PR. Removing only the message leaves dead CSS; removing
 * only the CSS leaves an unstyled banner showing both copy variants.
 */
#fern-announcement {
  --accent-contrast: #ffffff; /* dismiss icon */
  background: linear-gradient(90deg, #fa8100, #ffadd8, #a1f9d4, #00b2ff, #7f39ff);
  color: #000000;
}

#fern-announcement > div {
  min-height: 52px;
  padding-right: 4rem;
}

#fern-announcement > div > div {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.875rem 0;
  font-family: Roobert, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

#fern-announcement > div > div::before {
  content: "";
  flex-shrink: 0;
  width: 123px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg width=%22115%22 height=%2230%22 viewBox=%220 0 115 30%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M9.75871 23.5243C4.62085 23.5243 1.26023 20.4222 1.03404 15.6721H5.13786C5.36406 18.1926 7.04437 19.8083 9.75871 19.8083C12.1822 19.8083 13.8625 18.8388 13.8625 16.8354C13.8625 11.9884 1.71262 15.349 1.71262 6.68893C1.71262 2.97287 4.91167 0.387777 9.5002 0.387777C14.2826 0.387777 17.514 3.13443 17.7079 7.36752H13.6363C13.4425 5.39638 11.8914 4.07153 9.5002 4.07153C7.27056 4.07153 5.88108 5.10556 5.88108 6.68893C5.88108 11.6975 18.1926 7.94916 18.1926 16.7708C18.1926 20.9715 14.735 23.5243 9.75871 23.5243ZM19.9602 29.8578V6.97975H23.9348V9.01551C24.9042 7.62602 26.6491 6.72124 28.8141 6.72124C33.4996 6.72124 36.3755 10.1465 36.3755 15.1228C36.3755 20.0991 33.3057 23.5243 28.5233 23.5243C26.5522 23.5243 24.8073 22.7488 23.9348 21.4886V29.8578H19.9602ZM23.6763 15.1228C23.6763 18.1279 25.4212 20.0991 28.0709 20.0991C30.6883 20.0991 32.4333 18.1279 32.4333 15.1228C32.4333 12.1176 30.6883 10.1465 28.0709 10.1465C25.4212 10.1465 23.6763 12.1176 23.6763 15.1228ZM45.5046 23.5243C40.1729 23.5243 37.2 19.3235 37.2 15.0582C37.2 10.7604 39.8497 6.72124 45.1815 6.72124C50.6425 6.72124 53.0983 10.6958 53.0983 14.5734C53.0983 15.1228 53.066 15.6075 53.0337 15.9306H41.013C41.3039 18.548 42.9842 20.2283 45.5046 20.2283C47.5404 20.2283 48.8652 19.3882 49.2853 17.8371H53.1629C52.549 21.2947 49.5115 23.5243 45.5046 23.5243ZM41.11 13.3132H49.1237C48.9622 11.2451 47.5404 9.69409 45.1815 9.69409C42.9518 9.69409 41.53 10.8574 41.11 13.3132ZM59.6764 23.5243C56.4774 23.5243 54.28 21.4562 54.28 18.645C54.28 15.4782 56.7036 13.5071 60.3873 13.5071H63.3925C64.168 13.5071 64.5558 13.0547 64.5558 12.4084C64.5558 10.8251 63.3602 9.69409 61.2598 9.69409C59.1594 9.69409 57.8992 11.019 57.8345 12.4731H54.2477C54.4739 9.2417 57.2206 6.72124 61.4213 6.72124C65.5898 6.72124 68.498 9.11245 68.498 12.7962V23.2658H64.5558V20.8423C63.9095 22.458 62.003 23.5243 59.6764 23.5243ZM58.1254 18.4834C58.1254 19.7436 59.1271 20.5838 60.6135 20.5838C63.1016 20.5838 64.5558 18.8388 64.5558 16.383V16.1245H60.9043C59.224 16.1245 58.1254 17.0616 58.1254 18.4834ZM71.022 23.2658V1.34188e-05H75.0289V12.8931L81.2331 6.97975H86.274L79.6497 13.3455L86.8234 23.2658H82.041L76.9354 15.9952L75.0289 17.8371V23.2658H71.022Z%22 fill=%22%23101014%22%3E%3C/path%3E %3Cpath d=%22M91.0349 1.60556C90.4907 1.60556 90.1139 2.00328 90.1139 2.61033V4.66173H88.5439V2.54753C88.5439 1.18691 89.4231 0.265869 90.7 0.265869H91.3071V1.60556H91.0349Z%22 fill=%22%23101014%22%3E%3C/path%3E %3Cpath d=%22M92.8669 5.24784C92.7622 2.25447 94.688 0.328668 97.7023 0.328668C100.465 0.328668 102.454 2.04515 102.454 4.70359C102.454 6.60847 101.282 8.22028 99.042 9.32971L96.9487 10.3973C95.7556 11.0043 94.4159 12.1138 94.4159 13.5372H102.538V15.149H92.6785V13.8721C92.6785 11.2555 94.7299 9.6437 96.237 8.89013L98.4768 7.73883C100.047 6.94339 100.612 5.93862 100.612 4.66173C100.612 2.98712 99.3769 1.89862 97.7023 1.89862C95.8184 1.89862 94.6252 3.23831 94.7089 5.24784H92.8669Z%22 fill=%22%23101014%22%3E%3C/path%3E %3Cpath d=%22M109.746 5.35251C112.781 5.35251 114.916 7.46671 114.916 10.3345C114.916 13.2232 112.698 15.3165 109.662 15.3165C106.313 15.3165 104.22 12.6371 104.22 8.59707C104.22 3.09178 106.69 0.307734 109.935 0.307734C112.635 0.307734 114.623 1.89862 115 4.22214H113.221C112.886 2.79872 111.714 1.89862 109.955 1.89862C107.611 1.89862 106.041 4.41054 105.915 7.63417C106.522 6.27354 108.134 5.35251 109.746 5.35251ZM106.271 10.3135C106.271 12.2812 107.695 13.7046 109.683 13.7046C111.651 13.7046 113.074 12.2812 113.074 10.3135C113.074 8.36681 111.651 6.96432 109.683 6.96432C107.695 6.96432 106.271 8.36681 106.271 10.3135Z%22 fill=%22%23101014%22%3E%3C/path%3E %3C/svg%3E") no-repeat center / contain;
}

#fern-announcement .speak26-long,
#fern-announcement .speak26-short {
  flex: 1;
  text-align: center;
  text-wrap: balance;
}

#fern-announcement .speak26-short {
  display: none;
}

#fern-announcement a {
  flex-shrink: 0;
  margin-left: auto;
  color: #ffffff !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 4px;
  white-space: nowrap;
}

#fern-announcement a:hover {
  text-decoration: underline;
}
#fern-announcement a:focus-visible {
  text-decoration: underline; outline: none;
}

#fern-announcement a::after {
  content: " \2192" / "";
}

/* Fern's external-link icon; the arrow above replaces it */
#fern-announcement a svg {
  display: none;
}

@media (max-width: 991px) {

  #fern-announcement > div > div {
    font-size: 1.125rem;
  }

  #fern-announcement .speak26-long {
    display: none;
  }

  #fern-announcement .speak26-short {
    display: block;
  }

}

@media (max-width: 575px) {

  #fern-announcement > div {
    padding-right: 3rem;
  }

  #fern-announcement > div > div {
    padding: 0.75rem 0;
  }

  #fern-announcement > div > div::before {
    width: 107px;
    height: 28px;
  }

  #fern-announcement .speak26-short {
    display: none;
  }

}