/*fern-site-stylesheet*/@font-face {
    font-family: 'Muoto-Regular';
    src: url('/_fern-files/nominal.docs.buildwithfern.com/c57f4b91645ccb2c3eb9fc4119492282fac983301005f66cbcfe0dd509f5765b/assets/Muoto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muoto-Regular';
    src: url('/_fern-files/nominal.docs.buildwithfern.com/9e3bd1a883d0b6ddf98a1d7629015ecc270f641e07fbf97324fce6599c3c1c73/assets/Muoto-Medium.woff2') format('woff2');
    font-weight: 500 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist-Semibold';
    src: url('/_fern-files/nominal.docs.buildwithfern.com/c57f4b91645ccb2c3eb9fc4119492282fac983301005f66cbcfe0dd509f5765b/assets/Muoto-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist-Semibold';
    src: url('/_fern-files/nominal.docs.buildwithfern.com/9e3bd1a883d0b6ddf98a1d7629015ecc270f641e07fbf97324fce6599c3c1c73/assets/Muoto-Medium.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FraktionMono-Medium';
    src: url('/_fern-files/nominal.docs.buildwithfern.com/9df78e6af7bf312c03c08e237719a47201dbcda24243aae6797e5784bad99314/assets/PPFraktionMono-Medium.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 56px;
  --header-height-real: 56px;
  --mobile-header-height-real: 56px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --logo-height: 16px;
  --radius: 0px;
  --font-body: 'Muoto-Regular', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Geist-Semibold', 'Muoto-Regular', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'FraktionMono-Medium', 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: #f0f0f0;
  --accent-4: #e8e8e8;
  --accent-5: #e1e1e1;
  --accent-6: #d9d9d9;
  --accent-7: #cecece;
  --accent-8: #bbb;
  --accent-9: #0b0b0b;
  --accent-10: #262626;
  --accent-11: #636363;
  --accent-12: #1f1f1f;

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

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

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

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

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9725 0.9725 0.9725 / 0.8);
      --accent-indicator: oklch(15% 0 none);
      --accent-track: oklch(15% 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: #1f1f1f;
  --accent-2: #262626;
  --accent-3: #2f2f2f;
  --accent-4: #353535;
  --accent-5: #3b3b3b;
  --accent-6: #434343;
  --accent-7: #505050;
  --accent-8: #666;
  --accent-9: #fff;
  --accent-10: #f6f6f6;
  --accent-11: #b6b6b6;
  --accent-12: #eee;

  --accent-a1: #00000000;
  --accent-a2: #ffffff08;
  --accent-a3: #ffffff12;
  --accent-a4: #ffffff19;
  --accent-a5: #ffffff20;
  --accent-a6: #ffffff29;
  --accent-a7: #ffffff38;
  --accent-a8: #ffffff51;
  --accent-a9: #ffffff;
  --accent-a10: #fffffff5;
  --accent-a11: #ffffffac;
  --accent-a12: #ffffffec;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(23.9% 0 none);
      --accent-2: oklch(26.9% 0 none);
      --accent-3: oklch(30.4% 0 none);
      --accent-4: oklch(32.8% 0 none);
      --accent-5: oklch(35.2% 0 none);
      --accent-6: oklch(38.2% 0 none);
      --accent-7: oklch(43% 0 none);
      --accent-8: oklch(51% 0 none);
      --accent-9: oklch(100% 0 none);
      --accent-10: oklch(97.3% 0 none);
      --accent-11: oklch(77.6% 0 none);
      --accent-12: oklch(94.9% 0 none);

      --accent-a1: color(display-p3 0 0 0 / 0);
      --accent-a2: color(display-p3 1 1 1 / 0.0313);
      --accent-a3: color(display-p3 1 1 1 / 0.0714);
      --accent-a4: color(display-p3 1 1 1 / 0.0982);
      --accent-a5: color(display-p3 1 1 1 / 0.125);
      --accent-a6: color(display-p3 1 1 1 / 0.1607);
      --accent-a7: color(display-p3 1 1 1 / 0.2188);
      --accent-a8: color(display-p3 1 1 1 / 0.317);
      --accent-a9: color(display-p3 1 1 1);
      --accent-a10: color(display-p3 1 1 1 / 0.9598);
      --accent-a11: color(display-p3 1 1 1 / 0.6741);
      --accent-a12: color(display-p3 1 1 1 / 0.9241);

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


.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(11, 11, 11, 1);
  --background: rgba(255, 255, 255, 1);
  --border: #000;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fff;
}

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

/* ------------------------------------------------------------------------------------------------
 * BASE COLORS
 * Pulled directly from Galaxy's tailwind config
 */

:root {

  --white: 0 0% 100%;
  --black: 0 0% 0%;
  --brand: 160 100% 26%;

  /* Neutral */
  --neutral-50: 0 0% 98%;
  --neutral-100: 0 0% 96.1%;
  --neutral-200: 0 0% 89.8%;
  --neutral-300: 0 0% 83.1%;
  --neutral-400: 0 0% 63.9%;
  --neutral-500: 0 0% 42.1%;
  --neutral-600: 0 0% 28.2%;
  --neutral-700: 0 0% 20%;
  --neutral-800: 0 0% 12%;
  --neutral-900: 0 0% 7%;
  --neutral-950: 0 0% 4.5%;

  /* Red */
  --red-50: 0 85.7% 97.3%;
  --red-100: 0 93.3% 94.1%;
  --red-200: 0 96.3% 89.4%;
  --red-300: 0 93.5% 81.8%;
  --red-400: 0 90.6% 70.8%;
  --red-500: 0 84.2% 60.2%;
  --red-600: 0 72.2% 50.6%;
  --red-700: 0 73.7% 41.8%;
  --red-800: 0 70% 35.3%;
  --red-900: 0 62.8% 30.6%;
  --red-950: 0 74.7% 15.5%;

  /* Orange */
  --orange-50: 33.3 100% 96.5%;
  --orange-100: 34.3 100% 91.8%;
  --orange-200: 32.1 97.7% 83.1%;
  --orange-300: 30.7 97.2% 72.4%;
  --orange-400: 27 96% 61%;
  --orange-500: 24.6 95% 53.1%;
  --orange-600: 20.5 90.2% 48.2%;
  --orange-700: 17.5 88.3% 40.4%;
  --orange-800: 15 79.1% 33.7%;
  --orange-900: 15.3 74.6% 27.8%;
  --orange-950: 13 81.1% 14.5%;

  /* Amber */
  --amber-50: 48 100% 96.1%;
  --amber-100: 48 96.5% 88.8%;
  --amber-200: 48 96.6% 76.7%;
  --amber-300: 45.9 96.7% 64.5%;
  --amber-400: 43.3 96.4% 56.3%;
  --amber-500: 37.7 92.1% 50.2%;
  --amber-600: 32.1 94.6% 43.7%;
  --amber-700: 26 90.5% 37.1%;
  --amber-800: 22.7 82.5% 31.4%;
  --amber-900: 21.7 77.8% 26.5%;
  --amber-950: 20.9 91.7% 14.1%;

  /* Yellow */
  --yellow-50: 54.5 91.7% 95.3%;
  --yellow-100: 54.9 96.7% 88%;
  --yellow-200: 52.8 98.3% 76.9%;
  --yellow-300: 50.4 97.8% 63.5%;
  --yellow-400: 47.9 95.8% 53.1%;
  --yellow-500: 45.4 93.4% 47.5%;
  --yellow-600: 40.6 96.1% 40.4%;
  --yellow-700: 35.5 91.7% 32.9%;
  --yellow-800: 31.8 81% 28.8%;
  --yellow-900: 28.4 72.5% 25.7%;
  --yellow-950: 26 83.3% 14.1%;

  /* Lime */
  --lime-50: 78.3 92% 95.1%;
  --lime-100: 79.6 89.1% 89.2%;
  --lime-200: 80.9 88.5% 79.6%;
  --lime-300: 82 84.5% 67.1%;
  --lime-400: 82.7 78% 55.5%;
  --lime-500: 83.7 80.5% 44.3%;
  --lime-600: 84.8 85.2% 34.5%;
  --lime-700: 85.9 78.4% 27.3%;
  --lime-800: 86.3 69% 22.7%;
  --lime-900: 87.6 61.2% 20.2%;
  --lime-950: 89.3 80.4% 10%;

  /* Green */
  --green-50: 138.5 76.5% 96.7%;
  --green-100: 140.6 84.2% 92.5%;
  --green-200: 141 78.9% 85.1%;
  --green-300: 141.7 76.6% 73.1%;
  --green-400: 141.9 69.2% 58%;
  --green-500: 142.1 70.6% 45.3%;
  --green-600: 142.1 76.2% 36.3%;
  --green-700: 142.4 71.8% 29.2%;
  --green-800: 142.8 64.2% 24.1%;
  --green-900: 143.8 61.2% 20.2%;
  --green-950: 144.9 80.4% 10%;

  /* Emerald */
  --emerald-50: 151.8 81% 95.9%;
  --emerald-100: 149.3 80.4% 90%;
  --emerald-200: 152.4 76% 80.4%;
  --emerald-300: 156.2 71.6% 66.9%;
  --emerald-400: 158.1 64.4% 51.6%;
  --emerald-500: 160.1 84.1% 39.4%;
  --emerald-600: 161.4 93.5% 30.4%;
  --emerald-700: 162.9 93.5% 24.3%;
  --emerald-800: 163.1 88.1% 19.8%;
  --emerald-900: 164.2 85.7% 16.5%;
  --emerald-950: 165.7 91.3% 9%;

  /* Teal */
  --teal-50: 166.2 76.5% 96.7%;
  --teal-100: 167.2 85.5% 89.2%;
  --teal-200: 168.4 83.8% 78.2%;
  --teal-300: 170.6 76.9% 64.3%;
  --teal-400: 172.5 66% 50.4%;
  --teal-500: 173.4 80.4% 40%;
  --teal-600: 174.7 83.9% 31.6%;
  --teal-700: 175.3 77.4% 26.1%;
  --teal-800: 176.1 69.4% 21.8%;
  --teal-900: 175.9 60.8% 19%;
  --teal-950: 178.6 84.3% 10%;

  /* Cyan */
  --cyan-50: 183.2 100% 96.3%;
  --cyan-100: 185.1 95.9% 90.4%;
  --cyan-200: 186.2 93.5% 81.8%;
  --cyan-300: 187 92.4% 69%;
  --cyan-400: 187.9 85.7% 53.3%;
  --cyan-500: 188.7 94.5% 42.7%;
  --cyan-600: 191.6 91.4% 36.5%;
  --cyan-700: 192.9 82.3% 31%;
  --cyan-800: 194.4 69.6% 27.1%;
  --cyan-900: 196.4 63.6% 23.7%;
  --cyan-950: 197 78.9% 14.9%;

  /* Sky */
  --sky-50: 204 100% 97.1%;
  --sky-100: 204 93.8% 93.7%;
  --sky-200: 200.6 94.4% 86.1%;
  --sky-300: 199.4 95.5% 73.9%;
  --sky-400: 198.4 93.2% 59.6%;
  --sky-500: 198.6 88.7% 48.4%;
  --sky-600: 200.4 98% 39.4%;
  --sky-700: 201.3 96.3% 32.2%;
  --sky-800: 201 90% 27.5%;
  --sky-900: 202 80.3% 23.9%;
  --sky-950: 204 80.2% 15.9%;

  /* Blue */
  --blue-50: 213.8 100% 96.9%;
  --blue-100: 214.3 94.6% 92.7%;
  --blue-200: 213.3 96.9% 87.3%;
  --blue-300: 211.7 96.4% 78.4%;
  --blue-400: 213.1 93.9% 67.8%;
  --blue-500: 217.2 91.2% 59.8%;
  --blue-600: 221.2 83.2% 53.3%;
  --blue-700: 224.3 76.3% 48%;
  --blue-800: 225.9 70.7% 40.2%;
  --blue-900: 224.4 64.3% 32.9%;
  --blue-950: 226.2 57% 21%;

  /* Indigo */
  --indigo-50: 225.9 100% 96.7%;
  --indigo-100: 226.5 100% 93.9%;
  --indigo-200: 228 96.5% 88.8%;
  --indigo-300: 229.7 93.5% 81.8%;
  --indigo-400: 234.5 89.5% 73.9%;
  --indigo-500: 238.7 83.5% 66.7%;
  --indigo-600: 243.4 75.4% 58.6%;
  --indigo-700: 244.5 57.9% 50.6%;
  --indigo-800: 243.7 54.5% 41.4%;
  --indigo-900: 242.2 47.4% 34.3%;
  --indigo-950: 243.8 47.1% 20%;

  /* Violet */
  --violet-50: 250 100% 97.6%;
  --violet-100: 251.4 91.3% 95.5%;
  --violet-200: 250.5 95.2% 91.8%;
  --violet-300: 252.5 94.7% 85.1%;
  --violet-400: 255.1 91.7% 76.3%;
  --violet-500: 258.3 89.5% 66.3%;
  --violet-600: 262.1 83.3% 57.8%;
  --violet-700: 263.4 70% 50.4%;
  --violet-800: 263.4 69.3% 42.2%;
  --violet-900: 263.5 67.4% 34.9%;
  --violet-950: 261.2 72.6% 22.9%;

  /* Purple */
  --purple-50: 270 100% 98%;
  --purple-100: 268.7 100% 95.5%;
  --purple-200: 268.6 100% 91.8%;
  --purple-300: 269.2 97.4% 85.1%;
  --purple-400: 270 95.2% 75.3%;
  --purple-500: 270.7 91% 65.1%;
  --purple-600: 271.5 81.3% 55.9%;
  --purple-700: 272.1 71.7% 47.1%;
  --purple-800: 272.9 67.2% 39.4%;
  --purple-900: 273.6 65.6% 32%;
  --purple-950: 273.5 86.9% 21%;

  /* Fuchsia */
  --fuchsia-50: 289.1 100% 97.8%;
  --fuchsia-100: 287 100% 95.5%;
  --fuchsia-200: 288.3 95.8% 90.6%;
  --fuchsia-300: 291.1 93.1% 82.9%;
  --fuchsia-400: 292 91.4% 72.5%;
  --fuchsia-500: 292.2 84.1% 60.6%;
  --fuchsia-600: 293.4 69.5% 48.8%;
  --fuchsia-700: 294.7 72.4% 39.8%;
  --fuchsia-800: 295.4 70.2% 32.9%;
  --fuchsia-900: 296.7 63.6% 28%;
  --fuchsia-950: 296.8 90.2% 16.1%;

  /* Pink */
  --pink-50: 327.3 73.3% 97.1%;
  --pink-100: 325.7 77.8% 94.7%;
  --pink-200: 325.9 84.6% 89.8%;
  --pink-300: 327.4 87.1% 81.8%;
  --pink-400: 328.6 85.5% 70.2%;
  --pink-500: 330.4 81.2% 60.4%;
  --pink-600: 333.3 71.4% 50.6%;
  --pink-700: 335.1 77.6% 42%;
  --pink-800: 335.8 74.4% 35.3%;
  --pink-900: 335.9 69% 30.4%;
  --pink-950: 336.2 83.9% 17.1%;

  /* Rose */
  --rose-50: 355.7 100% 97.3%;
  --rose-100: 355.6 100% 94.7%;
  --rose-200: 352.7 96.1% 90%;
  --rose-300: 352.6 95.7% 81.8%;
  --rose-400: 351.3 94.5% 71.4%;
  --rose-500: 349.7 89.2% 60.2%;
  --rose-600: 346.8 77.2% 49.8%;
  --rose-700: 345.3 82.7% 40.8%;
  --rose-800: 343.4 79.7% 34.7%;
  --rose-900: 341.5 75.5% 30.4%;
  --rose-950: 343.1 87.7% 15.9%;

  /* Slate - used for blue grey */
  --slate-50: 210 40% 98%;
  --slate-100: 210 40% 96.1%;
  --slate-200: 214.3 31.8% 91.4%;
  --slate-300: 212.7 26.8% 83.9%;
  --slate-400: 215 20.2% 65.1%;
  --slate-500: 215.4 16.3% 46.9%;
  --slate-600: 215.3 19.3% 34.5%;
  --slate-700: 215.3 25% 26.7%;
  --slate-800: 217.2 32.6% 17.5%;
  --slate-900: 222.2 47.4% 11.2%;
  --slate-950: 222.2 84% 4.9%;
}

/* ------------------------------------------------------------------------------------------------
 * THEME/SEMANTIC COLORS
 * Pulled from Galaxy's tailwind config
 */

 /* Light theme */
:root {
  /**
   * Global
   */

  /* Backgrounds */
  --background: hsl(var(--white));
  --background-muted: hsl(var(--neutral-100)); 
  --background-raised: hsl(var(--white));
  --background-hover: hsl(var(--neutral-900) / 5%);
  --background-active: hsl(var(--neutral-900) / 10%);
  --background-active-hover: hsl(var(--neutral-600) / 7.5%);
  --background-disabled: hsl(var(--neutral-100));
  --background-overlay: hsl(var(--neutral-900) / 20%);
  --background-brand: hsl(var(--brand));
  --background-inverse: hsl(var(--neutral-900));

  /* Foregrounds */
  --foreground: hsl(var(--neutral-700)); 
  --foreground-muted: hsl(var(--neutral-500));
  --foreground-title: hsl(var(--neutral-950));
  --foreground-brand: hsl(var(--brand));
  --foreground-active: hsl(var(--neutral-950));
  --foreground-disabled: hsl(var(--neutral-400));
  --foreground-status-error: hsl(var(--red-700));
  --foreground-status-success: hsl(var(--green-700));
  --foreground-status-warning: hsl(var(--yellow-800));

  /* Borders */
  --border: hsl(var(--neutral-900) / 9%);
  --border-muted: hsl(var(--neutral-900) / 6%);
  --border-hover: hsl(var(--neutral-900) / 12.5%);
  --border-active: hsl(var(--neutral-900) / 15%);

  /* Statuses */
  --status-success: hsl(var(--green-600));
  --status-warning: hsl(var(--yellow-500));
  --status-error: hsl(var(--red-600));
  
  /* To deprecate */
  --placeholder: hsl(var(--neutral-100)); 
  --selection-muted: hsl(var(--green-800));

  /* Used for focus ring */
  --ring: hsl(var(--emerald-500));

  /* Drop shadows */
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.2);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Border radius for card, input and buttons */
  --radius: 0rem;

  /* Base grid size */
  --base: 0.25rem;

  /* Default header/toolbar height */
  --header-height: 3rem;
  
  /* New header/toolbar height */
  --editor-header-height: 3rem;
  
  /* New side nav widths */
  --side-nav-width: 12rem;
  --side-nav-width-collapsed: 3rem;

  /* Editor popover sizes */
  --editor-popover-width: 25rem;
  --editor-popover-height: 18rem;

  /* Detail page margins */
  --detail-page-margin: 2rem;
  --detail-page-margin-overview: 1.5rem;

  /**
   * Components
   */

  /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
  --popover-background: hsl(var(--white));
  --popover-foreground: hsl(var(--neutral-700));
  --popover-border: hsl(var(--neutral-300));

  /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
  --input-background: hsl(var(--white));
  --input-border: hsl(var(--neutral-300));
  --input-border-hover: hsl(var(--neutral-400));
  --input-border-active: hsl(var(--neutral-500));

  /* Border color for inputs such as <Checkbox />, <Radio /> */
  --choice-border: hsl(var(--neutral-400));
  --choice-border-hover: hsl(var(--neutral-500));
  --choice-background-active: hsl(var(--background-inverse));
  --choice-background-active-hover: hsl(var(--choice-background-active) / 80%);

  /* Primary colors for <Button /> */
  --button-primary-background: hsl(var(--neutral-950));
  --button-primary-background-hover: hsl(var(--neutral-700));
  --button-primary-foreground: hsl(var(--white));
  --button-primary-border: hsl(var(--neutral-950));
  --button-primary-border-hover: hsl(var(--neutral-800));

  /* Secondary colors for <Button /> */
  --button-secondary-background: hsl(var(--neutral-50));
  --button-secondary-background-hover: hsl(var(--background-hover));
  --button-secondary-foreground: hsl(var(--foreground));
  --button-secondary-border: hsl(var(--neutral-200));
  --button-secondary-border-hover: hsl(var(--neutral-300));

  /* Colors for <Switch /> */
  --switch-background:  hsl(var(--neutral-900) / 20%);
  --switch-background-hover:  hsl(var(--neutral-900) / 40%);
  --switch-background-active: hsl(var(--background-inverse));
  --switch-handle-background: hsl(var(--background));

  /* Badges */
  --badge-background: hsl(var(--neutral-900) / 10%); /* originally --badge */
  --badge-foreground: hsl(var(--neutral-600));
  --badge-background-hover: hsl(var(--neutral-900) / 15%); /* originally --badge-hover */

  --badge-metal-background: hsl(var(--neutral-900) / 20%);
  --badge-metal-foreground: hsl(var(--neutral-700));
  --badge-metal-background-hover: hsl(var(--neutral-900) / 25%);

  --badge-green-background: hsl(var(--green-500) / 12.5%);
  --badge-green-foreground: hsl(var(--green-800));
  --badge-green-background-hover: hsl(var(--green-500) / 17.5%);

  --badge-yellow-background: hsl(var(--yellow-500) / 12.5%);
  --badge-yellow-foreground: hsl(var(--yellow-900));
  --badge-yellow-background-hover: hsl(var(--yellow-500) / 17.5%);

  --badge-red-background: hsl(var(--red-500) / 12.5%);
  --badge-red-foreground: hsl(var(--red-800));
  --badge-red-background-hover: hsl(var(--red-500) / 17.5%);

  --badge-purple-background: hsl(var(--fuchsia-500) / 10%);
  --badge-purple-foreground: hsl(var(--fuchsia-800));
  --badge-purple-background-hover: hsl(var(--fuchsia-500) / 15%);

  --badge-blue-background: hsl(var(--blue-500) / 10%);
  --badge-blue-foreground: hsl(var(--blue-800));
  --badge-blue-background-hover: hsl(var(--blue-500) / 15%);

  --badge-blue-grey-background: hsl(var(--slate-600) / 10%);
  --badge-blue-grey-foreground: hsl(var(--slate-900));
  --badge-blue-grey-background-hover: hsl(var(--slate-600) / 15%);

  --badge-amber-background: hsl(var(--amber-500) / 10%);
  --badge-amber-foreground: hsl(var(--amber-800));
  --badge-amber-background-hover: hsl(var(--amber-500) / 15%);

  --badge-orange-background: hsl(var(--orange-500) / 10%);
  --badge-orange-foreground: hsl(var(--orange-800));
  --badge-orange-background-hover: hsl(var(--orange-500) / 15%);

  --badge-lime-background: hsl(var(--lime-500) / 10%);
  --badge-lime-foreground: hsl(var(--lime-800));
  --badge-lime-background-hover: hsl(var(--lime-500) / 15%);

  --badge-cyan-background: hsl(var(--cyan-500) / 10%);
  --badge-cyan-foreground: hsl(var(--cyan-800));
  --badge-cyan-background-hover: hsl(var(--cyan-500) / 15%);

  --badge-teal-background: hsl(var(--teal-500) / 10%);
  --badge-teal-foreground: hsl(var(--teal-800));
  --badge-teal-background-hover: hsl(var(--teal-500) / 15%);

  --badge-deep-purple-background: hsl(var(--purple-700) / 10%);
  --badge-deep-purple-foreground: hsl(var(--purple-950));
  --badge-deep-purple-background-hover: hsl(var(--purple-700) / 15%);

  --badge-indigo-background: hsl(var(--indigo-500) / 10%);
  --badge-indigo-foreground: hsl(var(--indigo-800));
  --badge-indigo-background-hover: hsl(var(--indigo-500) / 15%);
}

/* Dark theme */
.dark {

  /* Backgrounds */
  --background: hsl(var(--neutral-800));
  --background-muted: hsl(var(--neutral-900));
  --background-hover: hsl(var(--white) / 7.5%);
  --background-active: hsl(var(--white) / 12.5%);
  --background-active-hover: hsl(var(--white) / 10%);
  --background-raised: var(--neutral-700);
  --background-brand: hsl(var(--brand));
  --background-disabled: hsl(var(--neutral-700));
  --background-overlay: hsl(var(--black) / 40%);
  --background-inverse: hsl(var(--white));

  /* Foregrounds */
  --foreground: hsl(var(--neutral-300)); 
  --foreground-muted: hsl(var(--neutral-400));
  --foreground-title: hsl(var(--white));
  --foreground-active: hsl(var(--white));
  --foreground-brand: hsl(var(--brand));
  --foreground-disabled: hsl(var(--neutral-500));
  --foreground-status-error: hsl(var(--red-400));
  --foreground-status-success: hsl(var(--green-300));
  --foreground-status-warning: hsl(var(--yellow-300));

  /* Borders */
  --border: hsl(var(--white) / 8%);
  --border-muted: hsl(var(--white) / 5%);
  --border-hover: hsl(var(--white) / 12.5%);
  --border-active: hsl(var(--white) / 15%);

  /* Statuses */
  --status-success: hsl(var(--green-500));
  --status-warning: hsl(var(--yellow-400));
  --status-error: hsl(var(--red-500));
  
  /* To deprecate */
  --selection-muted: hsl(var(--white));

  /* Used for focus ring */
  --ring: hsl(var(--emerald-300));

  /* Drop shadows */
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 1), 0 1px 2px -1px rgb(0 0 0 / 1);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Border radius for card, input and buttons */
  --radius: 0rem;


  /**
   * Components
   */

  /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
  --popover-background: hsl(var(--neutral-700));
  --popover-foreground: hsl(var(--neutral-300));
  --popover-border: hsl(var(--neutral-600));

  /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
  --input-background: hsl(var(--neutral-800));
  --input-border: hsl(var(--neutral-700));
  --input-border-hover: hsl(var(--neutral-600));
  --input-border-active: hsl(var(--neutral-400));

  /* Border color for inputs such as <Checkbox />, <Radio /> */
  --choice-border: hsl(var(--neutral-400));
  --choice-border-hover: hsl(var(--neutral-300));
  --choice-background-active: hsl(var(--background-inverse));
  --choice-background-active-hover: hsl(var(--background-inverse) / 80%);

  /* Primary colors for <Button /> */
  --button-primary-background: hsl(var(--white));
  --button-primary-background-hover: hsl(var(--neutral-300));
  --button-primary-foreground: hsl(var(--neutral-900));
  --button-primary-border: hsl(var(--white));
  --button-primary-border-hover: hsl(var(--white));

  /* Secondary colors for <Button /> */
  --button-secondary-background: hsl(var(--neutral-800));
  --button-secondary-background-hover: hsl(var(--background-hover));
  --button-secondary-foreground: hsl(var(--foreground));
  --button-secondary-border: hsl(var(--neutral-700));
  --button-secondary-border-hover: hsl(var(--neutral-600));

  /* Colors for <Switch /> */
  --switch-background:  hsl(var(--white) / 30%);
  --switch-background-hover:  hsl(var(--white) / 50%);
  --switch-background-active: hsl(var(--background-inverse));
  --switch-handle-background: hsl(var(--background));

  /* Badges */
  --badge-background: hsl(var(--white) / 10%);
  --badge-foreground: hsl(var(--neutral-300));
  --badge-background-hover: hsl(var(--white) / 15%);

  --badge-metal-background: hsl(var(--white) / 15%);
  --badge-metal-foreground: var(--neutral-200);
  --badge-metal-background-hover: hsl(var(--white) / 20%);

  --badge-green-background: hsl(var(--green-500) / 10%);
  --badge-green-foreground: hsl(var(--green-200));
  --badge-green-background-hover: hsl(var(--green-500) / 15%);

  --badge-yellow-background: hsl(var(--yellow-500) / 10%);
  --badge-yellow-foreground: hsl(var(--yellow-200));
  --badge-yellow-background-hover: hsl(var(--yellow-500) / 15%);

  --badge-red-background: hsl(var(--red-500) / 12.5%);
  --badge-red-foreground: hsl(var(--red-200));
  --badge-red-background-hover: hsl(var(--red-500) / 15%);

  --badge-purple-background: hsl(var(--fuchsia-500) / 12.5%);
  --badge-purple-foreground: hsl(var(--fuchsia-200));
  --badge-purple-background-hover: hsl(var(--fuchsia-500) / 17.5%);

  --badge-blue-background: hsl(var(--blue-500) / 12.5%);
  --badge-blue-foreground: hsl(var(--blue-200));
  --badge-blue-background-hover: hsl(var(--blue-500) / 17.5%);

  --badge-blue-grey-background: hsl(var(--slate-50) / 15%);
  --badge-blue-grey-foreground: hsl(var(--slate-50));
  --badge-blue-grey-background-hover: hsl(var(--slate-50) / 20%);

  --badge-amber-background: hsl(var(--amber-500) / 10%);
  --badge-amber-foreground: hsl(var(--amber-200));
  --badge-amber-background-hover: hsl(var(--amber-500) / 15%);

  --badge-orange-background: hsl(var(--orange-500) / 10%);
  --badge-orange-foreground: hsl(var(--orange-200));
  --badge-orange-background-hover: hsl(var(--orange-500) / 15%);

  --badge-lime-background: hsl(var(--lime-500) / 10%);
  --badge-lime-foreground: hsl(var(--lime-200));
  --badge-lime-background-hover: hsl(var(--lime-500) / 15%);

  --badge-cyan-background: hsl(var(--cyan-500) / 10%);
  --badge-cyan-foreground: hsl(var(--cyan-200));
  --badge-cyan-background-hover: hsl(var(--cyan-500) / 15%);

  --badge-teal-background: hsl(var(--teal-500) / 10%);
  --badge-teal-foreground: hsl(var(--teal-200));
  --badge-teal-background-hover: hsl(var(--teal-500) / 15%);

  --badge-deep-purple-background: hsl(var(--purple-700) / 10%);
  --badge-deep-purple-foreground: hsl(var(--purple-50));
  --badge-deep-purple-background-hover: hsl(var(--purple-700) / 15%);

  --badge-indigo-background: hsl(var(--indigo-500) / 10%);
  --badge-indigo-foreground: hsl(var(--indigo-200));
  --badge-indigo-background-hover: hsl(var(--indigo-500) / 15%);

  color-scheme: dark;
}

html, body {
  color: var(--foreground);
  background-color: var(--background);
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  color: var(--foreground-title);
}

div, a, button {
  border-radius: 0px !important;
}

.fern-button, .fern-button.large {

  font-weight: 600;
  & > .fern-button-content {

    & > svg, & > .fa-icon {
      width: 1rem;
      height: 1rem;
    }
  
}

}

.fern-accordion-item [role="region"] > div{
  padding-inline: 12px;
}

.fern-announcement .fern-mdx-link {
  color: var(--button-primary-foreground);
}

.fern-header-tabs [role="tab"][aria-selected="true"] {
  color: var(--foreground-active);
}

.fern-header-tabs [role="tab"]:not(.disabled):not([aria-selected="true"]):hover {
  background: var(--background-hover);
}
.fern-header-tabs [role="tab"]:not(.disabled):not([aria-selected="true"]):focus-visible {
  background: var(--background-hover);
}

/* Logo + product selector */

.fern-header-logo-container > div {
  gap: 0px;
}

.fern-product-selector {

  transform: translateY(-1.5px);
  & .product-dropdown-trigger {

  & .product-item-title {
    font-size: 1.3rem;
    font-family: var(--font-code);
    /* THIS IS A HACK TO GET IT TO USE GT PRESSURA */
    letter-spacing: -0.045em;
    text-transform: uppercase;
  }
    & > svg {
      margin-top: 4px;
    }
  
}

}

[data-testid=product-dropdown-content], div:has([data-testid=product-dropdown-content]) {
  max-width: 400px;
}

/* Hide home link in product selector dropdown */
.fern-product-selector-radio-group > a:first-child {
  display: none !important;
}

/* .fern-sidebar-heading-content, .fern-sidebar-group .fern-sidebar-link:not(.nested) span:not(.fern-sidebar-link-title) { */
.fern-sidebar-heading-content {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--foreground-muted);
  letter-spacing: 0.05em;
}

.fern-card > .flex-row {
  align-items: center;
}

.fern-sidebar-link[data-state="active"] {
  color: var(--foreground-active);
  background: var(--background-active);
}

/* ------------------------------------------------------------------------------------------------
 * FIX: Search dialog preview tooltip flickering (DOC-269)
 *
 * The search preview card (Radix Popper) flickers between left and right sides because
 * Floating UI's flip middleware constantly recalculates when there isn't enough viewport
 * space for the 384px-wide preview beside the 640px-wide search dialog.
 *
 * Fix: Hide the preview when there isn't enough room (< 1100px viewport), and disable
 * the slide/fade animation on the preview so side changes don't cause visible flickering.
 */

/* Hide the search preview card when viewport is too narrow for it to fit without flickering */
@media (max-width: 1100px) {

  #fern-search-dialog ~ [data-radix-popper-content-wrapper] {
    display: none !important;
  }

}

/* Remove the slide/fade animation on the search preview card to prevent visible flickering
   when Floating UI recalculates the side. The preview appears instantly instead. */
#fern-search-dialog ~ [data-radix-popper-content-wrapper] > [data-side] {
  animation: none !important;
}

.home-hero {

    width: 100%;
    background: linear-gradient(to bottom, var(--background-muted) 0%, var(--background) 100%);
    min-height: 400px;
    & .home-container {
        gap: 4rem;
        display: flex;
        align-items: center;
    }

}

.home-hero-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    text-wrap: balance;
    padding: 4rem 0;
}

.home-title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-wrap: balance;
}

.home-container {
    max-width: 800px;
    padding: 0 1.5rem;
    margin: 0 auto;
}

.hero-logo {
    height: 400px;
    width: 400px;
    margin-right: -4rem;
}

.home-content {
    background-color: var(--background);
    padding: 0 0 6rem 0;
}

.home-card-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
}

.interactive-card {

    text-decoration: none;
    font-weight: unset;
    transition: background-color 0.2s ease;
    &:hover {
        background-color: var(--background-hover);
    }
&:focus-visible {
        background-color: var(--background-hover);
    }

}

.home-card {

    display: flex;
    &:not(:last-child) {
        border-bottom: 1px solid var(--border);
    }

}

.home-card-section-header {

    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border);
    /* background-color: var(--background-muted); */
    & h2 {
        font-size: .75rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--foreground-muted);
    }

}

.home-card-content, .home-card-inner-grid-item {

    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1;
    flex-basis: 0;
    padding: 2rem;
    align-items: flex-start;
    justify-content: space-between;
    & .fern-button.minimal {
        margin: 0 -0.75rem;
    }

}

.home-card-image {
    align-self: stretch;
    min-height: 240px;
    width: 50%;
    flex-grow: 1;
    flex-basis: 0;
    object-fit: cover;
    object-position: top left;
    border-left: 1px solid var(--border);
    background-color: var(--background-muted);
}

.home-card-inner-grid {
    display: flex;
}

.home-card-inner-grid-item {

    &:not(:last-child) {
        border-right: 1px solid var(--border);
    }

}

.home-card-title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.home-card-title-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 768px) {

    .home-hero {
        min-height: unset;
    }
    .home-container {
        gap: 1rem;
    }
    .home-hero-content {
        gap: 1rem;
        padding: 2rem 0;
    }
    .hero-logo {
        display: none;
    }
    .home-card {
        flex-direction: column-reverse;
    }
    .home-card-image {
        flex: none;
        height: auto;
        min-height: 0;
        width: 100%;
        aspect-ratio: 16/7;
        border-left: none;
        border-bottom: 1px solid var(--border);
    }
    .home-card-inner-grid {
        flex-direction: column;
    }
    .home-card-inner-grid-item {

        border-right: none;
        border-bottom: 1px solid var(--border);
        &:last-child {
            border-bottom: none;
        }
    
}

}
.code-variables-panel__grid {
  display: grid;
  gap: 0.75rem 1rem;
}

.code-variables-panel__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.code-variables-panel__label {
  background: transparent;
  padding: 0;
  font-size: 0.8rem;
  color: var(--foreground);
  border: none;
}

.code-variables-panel__hint {
  background: transparent;
  padding: 0.1rem;
  font-size: 0.75rem;
  color: var(--foreground-muted);
}

.code-variables-panel__input {
  width: 100%;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  font-family: var(--font-code);
  font-size: 0.875rem;
  color: var(--foreground);
  background-color: var(--input-background);
  border: 1px solid var(--input-border);
}

.code-variables-panel__input:hover {
  border-color: var(--input-border-hover);
}
.code-variables-panel__input:focus-visible {
  border-color: var(--input-border-hover);
}

.code-variables-panel__input:focus {
  outline: none;
  border-color: var(--input-border-active);
}

/*
  Styles for the Nominal for Developers "Connectors & SDKs" and "File Formats" pages, which use
  native Fern <Tabs> + <CardGroup>. Covers the shared footer / CTA bar, the
  attribution line, card logos, and full-width layout.

  Color tokens: scale vars (--brand, ...) are raw HSL triplets consumed as
  hsl(var(--x)) / hsl(var(--x) / NN%); semantic vars (--foreground, --border, ...)
  are full colors used bare.
*/

/*
  Full-width content on these pages. Fern centers <article> via mx-auto, which
  leaves a gap between the nav and the content; pin it flush-left instead. Scoped
  via :has(.marketplace-footer) so only these pages are affected.
*/
article:has(.marketplace-footer),
article:has(.marketplace-footer) ~ .fern-layout-footer {
  margin-left: 0;
  margin-right: auto;
}

/* Logo inside a native Fern <Card>: full card width, capped height, left-aligned,
   so wide wordmark logos aren't shrunk into an icon slot. */
.developers-card-logo {
  display: block;
  width: 100%;
  height: 44px;
  object-fit: contain;
  object-position: left;
  margin-bottom: 0.75rem;
}

/* Footer bar */
.marketplace-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.marketplace-footer-tagline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 240px;
}

.marketplace-footer-icon {
  font-size: 1.5rem;
  color: var(--foreground-muted);
}

.marketplace-footer-prompt {
  flex: 1 1 240px;
}

.marketplace-footer-title {
  margin: 0;
  font-weight: 600;
  color: var(--foreground-title);
}

.marketplace-footer-body {
  margin: 0;
  font-size: 0.9rem;
  color: var(--foreground-muted);
}

.marketplace-footer-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-weight: 600;
  color: var(--button-primary-foreground);
  background-color: hsl(var(--brand));
  text-decoration: none;
}

.marketplace-footer-cta:hover {
  opacity: 0.9;
}
.marketplace-footer-cta:focus-visible {
  opacity: 0.9;
}

/* Compact CTA bar, shown at the top so the prompt is visible without scrolling */
.marketplace-cta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  background-color: hsl(var(--brand) / 6%);
}

.marketplace-cta-bar .marketplace-footer-body {
  margin: 0;
}

.marketplace-cta-bar-title {
  font-weight: 600;
  color: var(--foreground-title);
}

.marketplace-attribution {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--foreground-muted);
}

@media (max-width: 768px) {

  .marketplace-footer {
    flex-direction: column;
    align-items: flex-start;
  }

}