/*fern-site-stylesheet*/@font-face {
    font-family: 'Fellix';
    src: url('/_fern-files/hume.docs.buildwithfern.com/5b54c45ace9021a93bdf4fe1923bbc57d50455a14290d32b8036592cb207d443/docs/fonts/FellixVF.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-0192, U+01EA-0243, U+02C7-02DD, U+0300-0328, U+0394-03C9, U+0E3F, U+1E80-1E9E, U+1EF2-1EF3, U+20BD, U+2116-2126, U+215B-215E, U+2190-2199, U+2202-2265, U+25CA-25CF;
}
@font-face {
    font-family: 'Fellix';
    src: url('/_fern-files/_img/5b54c45ace9021a93bdf4fe1923bbc57-v1.latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, 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+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'Fellix';
    src: url('/_fern-files/hume.docs.buildwithfern.com/a651f94693e3a1fd81d8a4da4a681158bd60a511d09d04dc082524009ba941ce/docs/fonts/FellixItalicVF.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-0192, U+01EA-0243, U+02C7-02DD, U+0300-0328, U+0394-03C0, U+0E3F, U+1E80-1E9E, U+1EF2-1EF3, U+20BD, U+2116-2126, U+215B-215E, U+2190-2199, U+2202-2265, U+25CA-25CF;
}
@font-face {
    font-family: 'Fellix';
    src: url('/_fern-files/_img/a651f94693e3a1fd81d8a4da4a681158-v1.latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, 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+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'Fraktion';
    src: url('/_fern-files/hume.docs.buildwithfern.com/1458fb77268ce85361a842b20cce24692f6028caa0445494e9b63eb463ae9fbf/docs/fonts/PPFraktionMono-Variable.ttf') format('ttf');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-019D, U+01E6-0237, U+0259-0272, U+02C7-02DD, U+0300-0335, U+03BC, U+1E80-1EF9, U+2070-2089, U+20BF, U+2116, U+2150-215F, U+2189-21BB, U+2202-2265, U+231A, U+2460-2469, U+24EA-24FF, U+25B6-25CA, U+25EF, U+2776-277F, U+2B1B-2B24, U+E132-E133, U+FB01-FB02;
}
@font-face {
    font-family: 'Fraktion';
    src: url('/_fern-files/_img/1458fb77268ce85361a842b20cce2469-v1.latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A1-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'Fellix Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 103.19%;
    ascent-override: 88.77%;
    descent-override: 19.29%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 48px;
  --header-height-real: 48px;
  --mobile-header-height-real: 48px;
  --content-width: 704px;
  --sidebar-width: 256px;
  --page-width: 100vw;
  --logo-height: 20px;
  --font-body: 'Fellix', 'Fellix Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Fellix', 'Fellix Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'Fraktion', 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: #fcfcfc;
  --accent-2: #f9f9f9;
  --accent-3: #efefef;
  --accent-4: #e8e8e8;
  --accent-5: #e0e0e0;
  --accent-6: #d8d8d8;
  --accent-7: #cecece;
  --accent-8: #bbb;
  --accent-9: #000;
  --accent-10: #2e2e2e;
  --accent-11: #646464;
  --accent-12: #202020;

  --accent-a1: #00000003;
  --accent-a2: #00000006;
  --accent-a3: #00000010;
  --accent-a4: #00000017;
  --accent-a5: #0000001f;
  --accent-a6: #00000027;
  --accent-a7: #00000031;
  --accent-a8: #00000044;
  --accent-a9: #000000;
  --accent-a10: #000000d1;
  --accent-a11: #0000009b;
  --accent-a12: #000000df;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.1% 0 none);
      --accent-2: oklch(98.1% 0 none);
      --accent-3: oklch(95.3% 0 none);
      --accent-4: oklch(93% 0 none);
      --accent-5: oklch(90.8% 0 none);
      --accent-6: oklch(88.4% 0 none);
      --accent-7: oklch(85.1% 0 none);
      --accent-8: oklch(79.1% 0 none);
      --accent-9: oklch(0% 0 none);
      --accent-10: oklch(30% 0 none);
      --accent-11: oklch(50.3% 0 none);
      --accent-12: oklch(24.3% 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.0627);
      --accent-a4: color(display-p3 0 0 0 / 0.0902);
      --accent-a5: color(display-p3 0 0 0 / 0.1216);
      --accent-a6: color(display-p3 0 0 0 / 0.1529);
      --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);
      --accent-a10: color(display-p3 0 0 0 / 0.8196);
      --accent-a11: color(display-p3 0 0 0 / 0.6078);
      --accent-a12: color(display-p3 0 0 0 / 0.8745);

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


.light, :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) {
    .light, :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: #1a1a19;
  --accent-2: #212120;
  --accent-3: #292927;
  --accent-4: #2f2f2d;
  --accent-5: #353533;
  --accent-6: #3e3e3b;
  --accent-7: #4a4a48;
  --accent-8: #62625f;
  --accent-9: #fff;
  --accent-10: #f6f6f4;
  --accent-11: #b3b3b0;
  --accent-12: #eeeeec;

  --accent-a1: #006ec103;
  --accent-a2: #9ce5fd0a;
  --accent-a3: #d5fcfa12;
  --accent-a4: #def9f819;
  --accent-a5: #e4f9f720;
  --accent-a6: #ebfaf22a;
  --accent-a7: #f2fcfb37;
  --accent-a8: #f9fffa51;
  --accent-a9: #ffffff;
  --accent-a10: #fefefcf6;
  --accent-a11: #fefffbab;
  --accent-a12: #fefefced;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(21.6% 0.0023 106.5);
      --accent-2: oklch(24.6% 0.0022 106.5);
      --accent-3: oklch(28.1% 0.0032 106.5);
      --accent-4: oklch(30.5% 0.0036 106.5);
      --accent-5: oklch(33% 0.004 106.5);
      --accent-6: oklch(36.1% 0.004 106.5);
      --accent-7: oklch(40.8% 0.004 106.5);
      --accent-8: oklch(49.4% 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.5373 0.9647 / 0.009);
      --accent-a2: color(display-p3 0.7098 0.9059 0.9961 / 0.039);
      --accent-a3: color(display-p3 0.8902 0.9961 0.9882 / 0.07);
      --accent-a4: color(display-p3 0.9255 1 0.9922 / 0.096);
      --accent-a5: color(display-p3 0.9451 1 0.9922 / 0.122);
      --accent-a6: color(display-p3 0.9608 1 0.9686 / 0.161);
      --accent-a7: color(display-p3 0.9686 0.9961 0.9882 / 0.214);
      --accent-a8: color(display-p3 0.9843 1 0.9765 / 0.318);
      --accent-a9: color(display-p3 1 1 1);
      --accent-a10: color(display-p3 1 1 0.9922 / 0.961);
      --accent-a11: color(display-p3 0.9961 1 0.9843 / 0.67);
      --accent-a12: color(display-p3 1 1 0.9882 / 0.927);

      --accent-contrast: #311921;
      --accent-surface: color(display-p3 0.149 0.1569 0.1569 / 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);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 0, 0, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(231, 229, 228, 1);
  --sidebar-background: rgba(255, 255, 255, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(255, 255, 255, 1);
  --background: rgba(28, 25, 23, 1);
  --border: rgba(68, 64, 59, 1);
  --sidebar-background: rgba(28, 25, 23, 1);
  --header-background: rgba(28, 25, 23, 1);
  --card-background: rgba(28, 25, 23, 1);
  --theme-color: #1c1917;
}

/**
* ---------------------------------
* Global Section
* ---------------------------------
*/
/* Fern draws its text, fills and borders from a 12-step gray scale. The warm grays of Radix's sand scale sit with the stone palette of cloud.hume.ai, and the two text steps take the platform's text colors. The platform's secondary text is darkened in light mode to reach 4.5:1 contrast on white. Fern draws the selected sidebar link, the selected tab and inline code in text steps it derives by lightening the accent, which with a black accent come out lighter than the text around them. Those steps take the text color, and selection is marked by a fill, as on the platform. */
:root,
.light {
  --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: #79716b;
  --grayscale-12: #000000;
  --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: #79716b;
  --grayscale-a12: #000000;
  --accent-11: #000000;
  --accent-12: #000000;
  --accent-a11: #000000;
  --accent-a12: #000000;
}

.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: #e7e5e4;
  --grayscale-12: #ffffff;
  --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: #e7e5e4;
  --grayscale-a12: #ffffff;
  --accent-11: #ffffff;
  --accent-12: #ffffff;
  --accent-a11: #ffffff;
  --accent-a12: #ffffff;
}

/* The platform sets its text in black Fellix at a weight of 350, its titles at 500, and nothing heavier. Fern asks for 700 and 800 on headings, which the variable font would draw much heavier, and sets body text in a near-black. */
body#fern-docs {
  font-weight: 350;
  color: var(--grayscale-12);
}

body#fern-docs :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 500;
  letter-spacing: normal;
}

body#fern-docs :is(strong, b, kbd, .fern-mdx-link, .fern-card .font-semibold, .fern-scroll-walkthrough-step-marker) {
  font-weight: 500;
}

/* At the page title's size, 500 reads as bold. */
body#fern-docs h1.fern-page-heading {
  font-weight: 400;
}

/* Fern sets keyboard hints and the method and status badges in the system monospace font, as important declarations inside its cascade layers. Those outrank every unlayered rule, so the code font is set as an important declaration in Fern's base layer, where the ID selector beats Fern's keyboard rule and the earlier layer beats its badge rule in the components layer. */
@layer base {

  body#fern-docs :is(kbd, .fern-docs-badge[data-badge-type="http-method"], .fern-docs-badge[data-badge-type="status-code"]) {
    font-family: var(--font-code) !important;
  }

}

/**
* ---------------------------------
* Header Section
* ---------------------------------
*/
/* Fern imitates bold on the selected tab with a text stroke, which fills in the letters at this size. The platform's tabs mark selection with color and an underline alone. */
body#fern-docs #fern-header a[role="tab"][aria-selected="true"] span {
  -webkit-text-stroke: 0;
  font-weight: 500;
}

/* Buttons are the platform's pills: the navbar link is its primary button and the page actions its outlined secondary button. */
body#fern-docs .fern-header-navbar-links .fern-button,
body#fern-docs .fern-page-actions {
  border-radius: 9999px;
}

body#fern-docs .fern-page-actions > .fern-button:first-child {
  border-radius: 9999px 0 0 9999px;
}

body#fern-docs .fern-page-actions > .fern-button:last-child {
  border-radius: 0 9999px 9999px 0;
}

body#fern-docs :is(.fern-header-navbar-links, .fern-page-actions) .fern-button {
  font-weight: 500;
}

/**
* ---------------------------------
* Card Section
* ---------------------------------
*/
.fern-card span.card-icon {
  opacity: 0.7;
}

/**
* ---------------------------------
* Surfaces Section
* ---------------------------------
*/

/* Cards, tables and code blocks share the shape of the cards on cloud.hume.ai: a 4px radius and a hairline border with no shadow. The gradient is the platform's spectrum. */
:root {
  --hume-gradient: linear-gradient(90deg, #4ebc9c, #3452aa, #6e50aa, #d29c7c);
  --surface-radius: 0.25rem;
  --code-background: #ffffff;
}

.dark {
  --code-background: #0c0a09;
}

body#fern-docs .fern-card,
body#fern-docs .fern-footer-prev,
body#fern-docs .fern-footer-next,
body#fern-docs .fern-code,
body#fern-docs .fern-endpoint-request-snippet,
body#fern-docs .fern-endpoint-response-snippet {
  border-radius: var(--surface-radius);
  box-shadow: none;
}

/* Code blocks take one fill, white in light mode and the darker stone of cloud.hume.ai's code in dark mode, with the title as a caption and no header bar. Shiki sets a white background on the code itself. */
body#fern-docs :is(.fern-code, .fern-endpoint-request-snippet, .fern-endpoint-response-snippet) {
  background-color: var(--code-background);
}

body#fern-docs :is(.fern-code, .fern-endpoint-request-snippet, .fern-endpoint-response-snippet) :is(.fern-code-header, pre) {
  background-color: transparent !important;
}

body#fern-docs :is(.fern-code, .fern-endpoint-request-snippet, .fern-endpoint-response-snippet) .fern-code-header-inner {
  box-shadow: none;
}

/* A border cannot take a gradient, and a gradient cannot be animated, so the gradient ring is a layer over the border, masked to its width, that fades in on hover. */
body#fern-docs .fern-card.interactive::before,
body#fern-docs a.cookbook-card::before,
body#fern-docs .use-case-card::before,
body#fern-docs .fern-footer-next::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--hume-gradient);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

body#fern-docs .fern-card.interactive:hover::before,
body#fern-docs a.cookbook-card:hover::before,
body#fern-docs .use-case-card:hover:not(:has(dialog[open]))::before,
body#fern-docs .use-case-card:has(.use-case-title button:focus-visible)::before,
body#fern-docs .fern-footer-next:hover::before {
  opacity: 1;
}
body#fern-docs .fern-card.interactive:focus-visible::before,
body#fern-docs a.cookbook-card:focus-visible::before,
body#fern-docs .use-case-card:focus-visible:not(:has(dialog[open]))::before,
body#fern-docs .fern-footer-next:focus-visible::before {
  opacity: 1;
}

/* Fern darkens the border of cards and of the next page link on hover, which would show as a dark outline before the gradient fades in over it. */
body#fern-docs .fern-card.interactive:hover,
body#fern-docs .fern-footer-next:hover {
  border-color: var(--border);
}
body#fern-docs .fern-card.interactive:focus-visible,
body#fern-docs .fern-footer-next:focus-visible {
  border-color: var(--border);
}

@media (prefers-reduced-motion: reduce) {

  body#fern-docs .fern-card.interactive::before,
  body#fern-docs a.cookbook-card::before,
  body#fern-docs .use-case-card::before,
  body#fern-docs .fern-footer-next::before {
    transition: none;
  }

}

/* The tray around the previous and next page links is inset from its edge by its padding, so its radius is the links' radius plus that padding, keeping the corners concentric. */
body#fern-docs .fern-footer-nav {
  border-radius: calc(var(--surface-radius) + var(--spacing));
}

/* The previous link has no border to take the gradient ring, so both links answer hover by darkening their label and arrow. */
body#fern-docs .fern-footer-prev:hover :is(span, svg),
body#fern-docs .fern-footer-next:hover > span :is(span, svg) {
  color: var(--grayscale-a12);
}
body#fern-docs .fern-footer-prev:focus-within :is(span, svg),
body#fern-docs .fern-footer-next:focus-within > span :is(span, svg) {
  color: var(--grayscale-a12);
}

/* Fern clips the next link to its padding box, which hides the gradient ring drawn over its border. The title inside truncates on its own. */
body#fern-docs .fern-footer-next {
  overflow: visible;
}

/* Fern sets the next page's title in bold, heavier than the titles of cards. */
body#fern-docs .fern-footer-next .font-bold {
  font-weight: 500;
}

/* Fern draws the table's border on a wrapper around its scroll area, so the wrapper takes the radius and clips the header row's fill at the corners. */
body#fern-docs .fern-table-root {
  border-radius: var(--surface-radius);
  overflow: hidden;
}

body#fern-docs table.fern-table tbody tr:last-child > :is(td, th) {
  border-bottom: 0;
}

/* Tabs and code group tabs are the platform's segmented control, in place of Fern's underline: a bordered strip whose selected segment is filled. The Tabs component marks its tabs only by role, and draws the selected underline as a pseudo-element. */
body#fern-docs div:has(> .fern-x-overflow > h6[role="tab"]) {
  border-bottom-width: 0;
}

body#fern-docs .fern-x-overflow:has(> h6[role="tab"]),
body#fern-docs .fern-code-group-tabs {
  flex: none;
  align-self: center;
  gap: 0.125rem;
  border: 1px solid var(--border);
  border-radius: var(--surface-radius);
  background-color: var(--card-background);
  padding: 0.125rem;
}

body#fern-docs .fern-code-group-tabs {
  margin-inline-start: 0.5rem;
}

body#fern-docs :is(h6[role="tab"], .fern-code-group-tab) {
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0.1875rem;
  box-shadow: none;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: normal;
  color: var(--grayscale-11);
}

body#fern-docs :is(h6[role="tab"], .fern-code-group-tab):hover {
  color: var(--grayscale-12);
}
body#fern-docs :is(h6[role="tab"], .fern-code-group-tab):focus-visible {
  color: var(--grayscale-12);
}

body#fern-docs :is(h6[role="tab"], .fern-code-group-tab)[data-state="active"] {
  background-color: var(--grayscale-a4);
  color: var(--grayscale-12);
}

body#fern-docs h6[role="tab"]::before {
  content: none;
}

body#fern-docs .fern-code-group-tab-label {
  border-radius: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* Sidebar links take the corners of the platform's sidebar items. */
body#fern-docs .fern-sidebar-link {
  border-radius: 0.5rem;
}

/* Inline code keeps a small radius so it never reads as a primitive pill, which carries meaning. */
body#fern-docs .fern-prose :not(pre) > code:not(.primitive-chip) {
  border-radius: 0.375rem;
  background-color: var(--grayscale-a3);
  box-shadow: none;
  font-weight: 400;
}

/**
* ---------------------------------
* Labels Section
* ---------------------------------
*/

/* Labels match the section labels on hume.ai and in the Hume platform, including the sidebar's section headings and the label above each page title: small, spaced, uppercase monospace. A sidebar section with its own page renders as a link followed by its group of pages rather than as a heading, so it is matched by that structure. */
body#fern-docs table.fern-table th,
body#fern-docs #fern-toc div:has(+ .toc-root),
body#fern-docs .fern-sidebar-heading-content,
body#fern-docs .fern-sidebar-link:has(+ .fern-sidebar-group) .fern-sidebar-link-title-inner,
body#fern-docs .fern-breadcrumb .fern-breadcrumb-item {
  font-family: var(--font-code, ui-monospace, monospace);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grayscale-11);
}

body#fern-docs table.fern-table th code {
  text-transform: none;
}

/* Code block titles are often file names, which are case sensitive, so they take the monospace face without the uppercase. */
body#fern-docs .fern-code-label:not(.fern-code-group-tab-label) {
  font-family: var(--font-code, ui-monospace, monospace);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--grayscale-11);
}

/* Method and status badges take the shape and weight of the platform's badges, and keep Fern's colors, which tell the methods apart. */
body#fern-docs .fern-docs-badge:is([data-badge-type="http-method"], [data-badge-type="status-code"]) {
  border-radius: var(--surface-radius);
  font-weight: 500;
}

body#fern-docs .fern-docs-badge[data-badge-type="http-method"] {
  font-size: 0.625rem;
  letter-spacing: 0.05em;
}

/* Fern's wordWrap lets a line break between any two characters, which splits words and URLs. Wrapped lines break at spaces, and only a word longer than the line breaks inside it. */
body#fern-docs .code-block-line-group.word-wrap .code-block-line-content {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* The expanded view ignores wordWrap and shows each line unwrapped, so a wrapped block runs off the side of it. */
body#fern-docs .fern-code-block:has(.code-block-line-group.word-wrap) .fern-expand-button {
  display: none;
}

/**
* ---------------------------------
* Callout Section
* ---------------------------------
*/

/* Callouts match the alerts on cloud.hume.ai: a solid pastel fill with dark text in both themes. */
div.fern-callout {
  --callout-fill: #eec3f2;
  border-width: 0 !important;
  border-radius: 0.375rem !important;
  background: var(--callout-fill) !important;
  box-shadow: none !important;
}

div.fern-callout[data-intent="info"] {
  --callout-fill: #b7d2ec;
}

/* Some pages write the warning intent as `warn`, which Fern passes through unrecognized. */
div.fern-callout:is([data-intent="warning"], [data-intent="warn"]) {
  --callout-fill: #ffc783;
}

div.fern-callout[data-intent="tip"] {
  --callout-fill: #bce6be;
}

div.fern-callout * {
  color: #292524 !important;
}

div.fern-callout code:not(.primitive-chip) {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3) !important;
}

/**
* ---------------------------------
* Message Flow Section
* ---------------------------------
*/

/* The lane's dashed side borders are the two lifelines, so every row continues them. */
.message-flow {
  --message-flow-time-width: 8.25rem;
  --message-flow-lifeline: var(--grayscale-a6);
  --message-flow-arrow: var(--grayscale-a11);
  --message-flow-arrow-offset: 0.75rem;
  padding-inline: 2.5rem;
  font-size: 0.9375rem;
}

.message-flow.timed {
  padding-left: 0;
}

.message-flow-head,
.message-flow-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.message-flow.timed .message-flow-head,
.message-flow.timed .message-flow-row {
  grid-template-columns: var(--message-flow-time-width) minmax(0, 1fr);
}

.message-flow-head {
  align-items: end;
  padding-bottom: 0.5rem;
}

.message-flow-head .message-flow-lane {
  display: flex;
  justify-content: space-between;
}

.message-flow-actor {
  border: 1px solid var(--message-flow-lifeline);
  border-radius: 0.5rem;
  background: var(--grayscale-a2);
  padding: 0.25rem 0.75rem;
  font-weight: 500;
  color: var(--grayscale-12);
}

.message-flow-actor:first-child {
  transform: translateX(-50%);
}

.message-flow-actor:last-child {
  transform: translateX(50%);
}

.message-flow-row .message-flow-lane {
  position: relative;
  border-inline: 1px dashed var(--message-flow-lifeline);
  padding: 0.625rem 1rem calc(var(--message-flow-arrow-offset) + 0.5rem);
  text-align: center;
}

.message-flow-row .message-flow-lane::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: var(--message-flow-arrow-offset);
  border-top: 1px solid var(--message-flow-arrow);
}

.message-flow-row .message-flow-lane::after {
  content: "";
  position: absolute;
  bottom: calc(var(--message-flow-arrow-offset) - 4px);
  border-block: 4.5px solid transparent;
}

.message-flow-row.send .message-flow-lane::after {
  right: 0;
  border-left: 8px solid var(--message-flow-arrow);
}

.message-flow-row.receive .message-flow-lane::after {
  left: 0;
  border-right: 8px solid var(--message-flow-arrow);
}

.message-flow-message {
  display: block;
  line-height: 1.45;
  color: var(--grayscale-a11);
}

.message-flow .message-flow-message code {
  border: 0;
  box-shadow: none;
  background: none;
  padding: 0;
  font-family: var(--font-code);
  font-size: 0.875rem;
  color: var(--grayscale-12);
}

.message-flow-time {
  align-self: end;
  padding-right: 1rem;
  padding-bottom: calc(var(--message-flow-arrow-offset) - 0.5rem);
  text-align: right;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--grayscale-a10);
}

.message-flow-head .message-flow-time {
  padding-bottom: 0.375rem;
  padding-right: 3rem;
}

.message-flow-direction {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/**
* ---------------------------------
* Scroll Walkthrough Section
* ---------------------------------
*/

/* The notes carry the page's explanations, so they use the body text color rather than Fern's secondary gray. */
.fern-scroll-walkthrough-step-body,
.fern-scroll-walkthrough-substep-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: inherit;
}

/* Pages that hold a walkthrough use the overview layout, whose column is wide enough for the notes and code panel side by side. Prose at that width runs past 100 characters a line, so everything else is capped at a narrower width, aligned to the walkthrough's left edge. The published build wraps the page content in an astro-island element that the local preview omits, so each rule names both structures. */
.fern-layout-overview .fern-prose > div > *,
.fern-layout-overview .fern-prose > astro-island > div > * {
  max-width: 52rem;
}

/* Below 64rem the code panel is hidden and the walkthrough is a single column, so it takes the same cap. */
@media (min-width: 64rem) {

  .fern-layout-overview .fern-prose > div > :is(.fern-scroll-walkthrough, :has(.fern-scroll-walkthrough)),
  .fern-layout-overview .fern-prose > astro-island > div > :is(.fern-scroll-walkthrough, :has(.fern-scroll-walkthrough)) {
    max-width: none;
  }

}

/* A step whose notes sit in one substep, which narrow screens need to show its code, would number that substep 1 under the step's own number. Walkthroughs with this class leave a lone substep unmarked. */
.fern-scroll-walkthrough.hide-lone-substep-markers .fern-scroll-walkthrough-substep:only-child .fern-scroll-walkthrough-substep-marker {
  display: none;
}

/**
* ---------------------------------
* Fit Columns Section
* ---------------------------------
*/

/* Fern gives every table cell a 12rem minimum width, so no column can be narrower than that, `width` attributes below it have no effect, and a table of four columns overflows the content column. Tables with this class drop the minimum, so short columns such as status codes shrink to their content. */
.fern-table.fit-columns td,
.fern-table.fit-columns th {
  min-width: 0;
}

/**
* ---------------------------------
* Use Cases Section
* ---------------------------------
*/

/* Each primitive takes one hue from the gradient on hume.ai and keeps it wherever it appears. The hues are the only color on the page, as on the marketing site. */
:root {
  --primitive-noul: #7a93e0;
  --primitive-choice: #6fd3b5;
  --primitive-score: #e6b89a;
  --primitive-span: #a08ae0;
  --primitive-ink: #202020;
}

/* Pills keep their light-mode colors in dark mode too, so each primitive looks the same in both themes: an opaque tint of the hue with dark text. */
.primitive-chip {
  --chip-color: var(--grayscale-a6);
  display: inline-block;
  border: 0;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--chip-color) 30%, #fff);
  box-shadow: none;
  padding: 0.0625rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--primitive-ink);
}

.primitive-chip.noul { --chip-color: var(--primitive-noul); }
.primitive-chip.choice { --chip-color: var(--primitive-choice); }
.primitive-chip.score { --chip-color: var(--primitive-score); }
.primitive-chip.span { --chip-color: var(--primitive-span); }

.primitive-chip-link {
  text-decoration: none;
}

/* The overview layout caps prose at 52rem, and the use case grid takes the full column so that three cards fit in a row. */
.fern-layout-overview .fern-prose .use-case-grid {
  max-width: none;
}

/* The 16 industries fill 4 rows of 4, or 8 rows of 2 on narrow screens, so no row is left short. */
.use-case-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 40rem) {

  .use-case-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

.use-case-picker li {
  margin: 0;
  padding: 0;
}

.use-case-picker button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  border: 1px solid var(--grayscale-a5);
  border-radius: var(--surface-radius);
  padding: 0.625rem 0.875rem;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--grayscale-12);
  cursor: pointer;
  transition:
    border-color 120ms,
    background-color 120ms;
}

.use-case-picker button:hover {
  border-color: var(--grayscale-a7);
  background-color: var(--grayscale-a2);
}
.use-case-picker button:focus-visible {
  border-color: var(--grayscale-a7);
  background-color: var(--grayscale-a2);
}

.use-case-picker button[aria-pressed="true"] {
  border-color: var(--grayscale-12);
  background-color: var(--grayscale-a2);
  font-weight: 500;
}

.use-case-picker svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--grayscale-11);
}

.use-case-picker button[aria-pressed="true"] svg {
  color: var(--grayscale-12);
}

.use-case-picker-name {
  flex: 1;
  min-width: 0;
}

.use-case-picker-count {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--grayscale-11);
}

.use-case-search-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0 1.25rem;
}

.use-case-search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  border: 1px solid var(--grayscale-a5);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: text;
}

.use-case-search:focus-within {
  border-color: var(--grayscale-a7);
}

.use-case-search svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  color: var(--grayscale-11);
}

.use-case-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 0.875rem;
  color: var(--grayscale-12);
  outline: none;
}

.use-case-search input::-webkit-search-cancel-button {
  display: none;
}

.use-case-search .use-case-search-clear {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: var(--grayscale-a3);
  cursor: pointer;
}

.use-case-search .use-case-search-clear svg {
  width: 0.75rem;
  height: 0.75rem;
}

.use-case-count {
  flex: none;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--grayscale-11);
}

/* Every row takes the height of the tallest card in the grid, so the bottom labels line up across rows. */
.use-case-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  grid-auto-rows: 1fr;
  gap: 1rem;
}

/* The whole card opens its dialog, through the title's button stretched over the card. The card takes the gradient ring from the Surfaces section on hover. */
.use-case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--grayscale-a5);
  border-radius: var(--surface-radius);
  padding: 1rem 1.25rem;
}

.use-case-card .use-case-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.use-case-card .use-case-industry {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--grayscale-11);
}

.use-case-card .use-case-industry svg {
  flex: none;
  width: 0.9375rem;
  height: 0.9375rem;
}

.use-case-card .use-case-title {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: inherit;
}

.use-case-card .use-case-title button {
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  outline: none;
}

.use-case-card .use-case-title button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* The primitive link sits above the title's stretched button so that it stays clickable. */
.use-case-card .primitive-chip-link {
  position: relative;
  z-index: 1;
}

/* The request JSON is shown only in the card's dialog. */
.use-case-card .use-case-body > :not(p) {
  display: none;
}

.use-case-card[hidden] {
  display: none;
}

/* The card's children are its question, then its context. */
.use-case-card .use-case-body > p {
  margin: 0;
}

/* The opening quote hangs into the margin so that the question's text lines up with the title. */
.use-case-card .use-case-body > p:first-child {
  margin-top: 0.5rem;
  text-indent: -0.4em;
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.5;
  color: inherit;
}

.use-case-card .use-case-body > p:first-child::before {
  content: "\201C";
}

.use-case-card .use-case-body > p:first-child::after {
  content: "\201D";
}

.use-case-card .use-case-body > p + p {
  margin: 0.625rem 0 1rem;
  font-size: 0.9375rem;
  font-weight: 350;
  line-height: 1.55;
  color: var(--grayscale-11);
}

/* The auto margin pushes the dimension and its rule to the bottom of the card. */
.use-case-card .use-case-dimension {
  margin: auto 0 0;
  border-top: 1px solid var(--grayscale-a5);
  padding-top: 0.625rem;
  text-align: right;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--grayscale-11);
}

/* Fern's base styles remove the margin that centers a modal dialog. */
.use-case-dialog {
  margin: auto;
  width: min(44rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 4rem);
  border: 1px solid var(--grayscale-a5);
  border-radius: 0.75rem;
  background-color: var(--grayscale-1);
  padding: 0;
  color: var(--grayscale-12);
  box-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.35);
  outline: none;
}

.use-case-dialog::backdrop {
  background-color: rgb(0 0 0 / 0.4);
}

@media (prefers-reduced-motion: no-preference) {

  .use-case-dialog[open] {
    animation: use-case-dialog-rise 160ms ease-out;
  }

}

@keyframes use-case-dialog-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.use-case-dialog-inner {
  padding: 1.25rem 1.5rem 1.5rem;
}

.use-case-dialog .use-case-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.use-case-dialog .use-case-industry {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--grayscale-11);
}

.use-case-dialog .use-case-industry svg {
  flex: none;
  width: 0.9375rem;
  height: 0.9375rem;
}

.use-case-dialog-close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -0.25rem -0.5rem -0.25rem 0.25rem;
  border-radius: 0.375rem;
  color: var(--grayscale-11);
  cursor: pointer;
}

.use-case-dialog-close:hover {
  background-color: var(--grayscale-a3);
  color: var(--grayscale-12);
}
.use-case-dialog-close:focus-visible {
  background-color: var(--grayscale-a3);
  color: var(--grayscale-12);
}

.use-case-dialog-close svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.use-case-dialog .use-case-dialog-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
}

.use-case-dialog-body > p {
  margin: 0;
}

.use-case-dialog-body > p:first-child {
  margin-top: 0.5rem;
  text-indent: -0.4em;
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.5;
}

.use-case-dialog-body > p:first-child::before {
  content: "\201C";
}

.use-case-dialog-body > p:first-child::after {
  content: "\201D";
}

.use-case-dialog-body > p + p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 350;
  line-height: 1.55;
  color: var(--grayscale-11);
}

.use-case-dialog-body > :not(p) {
  margin: 1.25rem 0 0;
}

.use-case-dialog .fern-feedback-button {
  display: none;
}

.use-case-dialog-foot {
  margin: 0.875rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--grayscale-11);
}

.use-case-grid .use-case-empty {
  color: var(--grayscale-11);
}

/**
* ---------------------------------
* Cookbooks Section
* ---------------------------------
*/

/* Each cookbook card draws the shape of the audio its app handles, in grays only, since color on these pages stands for a primitive. The card takes the gradient ring from the Surfaces section on hover. The whole card is one link, so the prose link underline is removed from its text. */
.cookbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  margin: 2rem 0 1rem;
}

body#fern-docs a.cookbook-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--grayscale-a5);
  border-radius: var(--surface-radius);
  padding: 1.25rem 1.25rem 1.125rem;
  color: var(--grayscale-12);
  text-decoration: none;
}

body#fern-docs a.cookbook-card:focus-visible {
  outline: 2px solid var(--grayscale-a11);
  outline-offset: 2px;
}

.cookbook-figure {
  display: flex;
  height: 7.5rem;
  margin-bottom: 1.25rem;
  border-radius: 0.125rem;
  background: var(--grayscale-a2);
  padding: 1rem 1.125rem;
}

.cookbook-title {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
}

.cookbook-description {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--grayscale-11);
}

.cookbook-meta {
  margin-top: auto;
  padding-top: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--grayscale-11);
}

/* Many recordings: one row per file, with the same question columns in every row. */
.cookbook-files {
  flex-direction: column;
  justify-content: space-between;
}

.cookbook-file-row {
  display: grid;
  grid-template-columns: 5.5rem repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0.5rem;
}

.cookbook-file-name {
  font-size: 0.75rem;
  line-height: 1;
  color: var(--grayscale-11);
}

.cookbook-cell {
  height: 0.875rem;
  border-radius: 0.25rem;
  background: var(--grayscale-a4);
}

/* Live audio: the stream is cut into clips, and each finished clip has an answer under it. The last clip is still recording, so its answer slot is empty. */
.cookbook-stream {
  gap: 0.5rem;
}

.cookbook-clip {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.625rem;
}

.cookbook-wave {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--grayscale-a5);
  padding: 0 0.25rem 0.5rem;
}

.cookbook-wave > span {
  width: 0.1875rem;
  height: calc(var(--h) * 100%);
  border-radius: 9999px;
  background: var(--grayscale-a9);
}

.cookbook-clip-recording .cookbook-wave {
  border-bottom-style: dashed;
}

.cookbook-clip-recording .cookbook-wave > span:nth-child(n + 5) {
  background: var(--grayscale-a5);
}

.cookbook-answer {
  height: 0.875rem;
  border-radius: 0.25rem;
  background: var(--grayscale-a4);
}

.cookbook-clip-recording .cookbook-answer {
  border: 1px dashed var(--grayscale-a6);
  background: none;
}

/**
* ---------------------------------
* Answer Chart Section
* ---------------------------------
*/

/* Each chart draws one answer in its primitive's hue. The pastel hues are below 3:1 contrast on the page, so every value the chart shows is also printed as text. Data reaches the CSS as unitless custom properties set in the page, such as `--value` for a probability. */
.answer-chart {
  --chart-color: var(--grayscale-a8);
  --chart-track: var(--grayscale-a3);
  margin: 1.5rem 0;
  border: 1px solid var(--grayscale-a5);
  border-radius: var(--surface-radius);
  padding: 1rem 1.25rem 1.125rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--grayscale-12);
  font-variant-numeric: tabular-nums;
}

.answer-chart.noul { --chart-color: var(--primitive-noul); }
.answer-chart.choice { --chart-color: var(--primitive-choice); }
.answer-chart.score { --chart-color: var(--primitive-score); }
.answer-chart.span { --chart-color: var(--primitive-span); }

.answer-chart .answer-chart-title {
  margin: 0 0 1rem;
  color: var(--grayscale-11);
}

.answer-chart .answer-chart-note {
  margin: 0.875rem 0 0;
  color: var(--grayscale-11);
}

/* Bars for a share of raters, one row per option, on a track that spans 0 to 1. */
.answer-chart-row,
.answer-chart-axis {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 0.75rem;
}

.answer-chart-row + .answer-chart-row {
  margin-top: 0.625rem;
}

.answer-chart-row.top .answer-chart-name {
  font-weight: 500;
}

.answer-chart-track {
  position: relative;
  height: 0.75rem;
  border-radius: 2px;
  background: var(--chart-track);
}

.answer-chart-bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: calc(var(--value) * 100%);
  border-radius: 0 4px 4px 0;
  background: var(--chart-color);
}

.answer-chart-mark {
  position: absolute;
  inset-block: -0.3125rem;
  left: calc(var(--at) * 100%);
  width: 2px;
  transform: translateX(-1px);
  background: var(--grayscale-12);
}

.answer-chart-axis {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--grayscale-11);
}

.answer-chart-ticks {
  position: relative;
  grid-column: 2;
  height: 1rem;
}

.answer-chart-ticks > span {
  left: calc(var(--at) * 100%);
}

/* Columns for a score, one per level in criteria order, scaled so the largest share, `--max`, fills the plot. The strip under the labels places the mean level between the columns, so column widths stay equal and leave no gaps that would shift it. */
.answer-chart-columns {
  display: grid;
  grid-template-columns: repeat(var(--levels), minmax(0, 1fr));
}

.answer-chart-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 6rem;
  border-bottom: 1px solid var(--grayscale-a5);
}

.answer-chart-column .answer-chart-bar {
  position: static;
  width: min(100%, 1.5rem);
  height: calc(var(--value) / var(--max) * 4.5rem);
  margin-top: 0.25rem;
  border-radius: 4px 4px 0 0;
}

.answer-chart-column.muted .answer-chart-bar {
  opacity: 0.35;
}

.answer-chart-level {
  padding-top: 0.375rem;
  text-align: center;
  overflow-wrap: normal;
}

.answer-chart-level small {
  display: block;
  font-size: 0.75rem;
  color: var(--grayscale-11);
}

.answer-chart-mean {
  position: relative;
  height: 2.75rem;
  margin-top: 0.5rem;
  margin-inline: calc(50% / var(--levels));
}

.answer-chart-mean::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0.3125rem;
  border-top: 1px solid var(--grayscale-a5);
}

.answer-chart-dot {
  position: absolute;
  top: 0;
  left: calc(var(--score) / (var(--levels) - 1) * 100%);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}

.answer-chart-dot::before {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  margin-bottom: 0.25rem;
  border-radius: 9999px;
  background: var(--chart-color);
}

/* Spans on a timeline of the recording, labeled above and placed by their start and end in milliseconds against the timeline's `--length`. */
.answer-chart-timeline {
  position: relative;
  height: 1.5rem;
  border-radius: 4px;
  background: var(--chart-track);
}

.answer-chart-span {
  position: absolute;
  inset-block: 0;
  left: calc(var(--start) / var(--length) * 100%);
  width: max(4px, calc((var(--end) - var(--start)) / var(--length) * 100%));
  border-radius: 4px;
  background: var(--chart-color);
}

.answer-chart-span-labels,
.answer-chart-time-ticks {
  position: relative;
}

.answer-chart-span-labels {
  height: 2.5rem;
  margin-bottom: 0.5rem;
}

.answer-chart-span-labels > span {
  position: absolute;
  left: calc((var(--start) + var(--end)) / 2 / var(--length) * 100%);
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
}

.answer-chart-span-labels > span.end {
  left: auto;
  right: calc(100% - var(--end) / var(--length) * 100%);
  transform: none;
  text-align: right;
}

.answer-chart-span-labels small {
  display: block;
  font-size: 0.75rem;
  color: var(--grayscale-11);
}

.answer-chart-time-ticks {
  height: 1rem;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--grayscale-11);
}

.answer-chart-time-ticks > span {
  left: calc(var(--at) / var(--length) * 100%);
}

/* Tick labels center on their mark, except the end labels, which align inward so they stay within the chart. */
:is(.answer-chart-ticks, .answer-chart-time-ticks) > span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

:is(.answer-chart-ticks, .answer-chart-time-ticks) > span:first-child {
  transform: none;
}

:is(.answer-chart-ticks, .answer-chart-time-ticks) > span:last-child {
  transform: translateX(-100%);
}

/* Lanes of spans on one time or value axis, each lane a row with a name and a status beside its track. Spans are placed by `--start` and `--end` against the chart's `--length`, in any unit. */
.answer-chart.lanes :is(.answer-chart-row, .answer-chart-axis) {
  grid-template-columns: 4.5rem minmax(0, 1fr) 4rem;
}

.answer-chart.lanes .answer-chart-axis .answer-chart-time-ticks {
  grid-column: 2;
  margin-top: 0;
}

.answer-chart.lanes .answer-chart-span-labels {
  height: 1.25rem;
  margin-bottom: 0;
}

.answer-chart-track.tall {
  height: 1.5rem;
}

.answer-chart-span {
  position: absolute;
  inset-block: 0;
  left: calc(var(--start) / var(--length) * 100%);
  width: max(4px, calc((var(--end) - var(--start)) / var(--length) * 100%));
  border-radius: 2px;
  background: var(--chart-color);
}

.answer-chart-span.muted {
  opacity: 0.35;
}

.answer-chart-span.event {
  background: var(--grayscale-11);
}

/* Parts sit edge to edge, so each gives up 2px to show where one ends and the next begins. */
.answer-chart-span.part {
  width: calc((var(--end) - var(--start)) / var(--length) * 100% - 2px);
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
  background: var(--grayscale-a4);
  font-size: 0.75rem;
  white-space: nowrap;
}

.answer-chart-span.part.current {
  background: color-mix(in srgb, var(--chart-color) 45%, transparent);
}

.answer-chart-span.review {
  background: var(--grayscale-a6);
}

.answer-chart-span.act {
  background: var(--grayscale-a10);
}

/* Dashed lines at `--guide-start` and `--guide-end` run through every track, so each lane can be read against one span, such as an event. */
.answer-chart.guided .answer-chart-track::after {
  content: "";
  position: absolute;
  inset-block: -0.3125rem;
  left: calc(var(--guide-start) / var(--length) * 100%);
  width: calc((var(--guide-end) - var(--guide-start)) / var(--length) * 100%);
  border-inline: 1px dashed var(--grayscale-a9);
  pointer-events: none;
}

/* A bracket over a span of the axis, labeled above, for a distance such as an offset. */
.answer-chart-measure-row {
  position: relative;
  height: 2.25rem;
}

.answer-chart-measure {
  position: absolute;
  bottom: 0.125rem;
  left: calc(var(--start) / var(--length) * 100%);
  width: calc((var(--end) - var(--start)) / var(--length) * 100%);
  height: 0.5rem;
  border-inline: 1px solid var(--grayscale-11);
  background: linear-gradient(var(--grayscale-11), var(--grayscale-11)) center / 100% 1px no-repeat;
}

.answer-chart-measure > span {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Two answers side by side, for comparing them on the same scale. */
.answer-chart-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.answer-chart .answer-chart-subtitle {
  margin: 0 0 0.75rem;
}

.answer-chart-subtitle small {
  display: block;
  font-size: 0.75rem;
  color: var(--grayscale-11);
}

/* Points on a strip, one per labeled clip, placed by its answer `--at` from 0 to 1. Hollow points mark the second label, so the two rows differ by shape as well as position. */
.answer-chart-track.strip {
  background: none;
}

.answer-chart-point {
  position: absolute;
  top: 50%;
  left: calc(var(--at) * 100%);
  width: 0.625rem;
  height: 0.625rem;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--grayscale-12);
  border-radius: 9999px;
  background: var(--grayscale-12);
  opacity: 0.75;
}

.answer-chart-point.hollow {
  background: none;
}

/* A screenshot comes in a light and a dark version, and only the one that matches the theme shows. Fern wraps each image in a zoom wrapper that keeps its place in a Frame, so the wrapper is hidden with it. */
.dark [data-rmiz]:has(> * > .screenshot-light),
:root:not(.dark) [data-rmiz]:has(> * > .screenshot-dark) {
  display: none;
}

/* Pages with the overview layout and no table of contents set their body at 52rem but let the subtitle run the full page width. */
.fern-page-subtitle {
  max-width: 52rem;
}