/*fern-site-stylesheet*/@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/b6f9db9e45be20f3c1312c97fbee7ec36b7d8280f8caa4d53c9ba0408cc9997a/docs/assets/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/220976705fbec109f43c5cfdceca639e99ace7e51f3eb67292b105d3575eb39b/docs/assets/fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 500 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/708b7baa59a80d80465229b74f1dcb599d3ee76515a93d304337b92efb964afe/docs/assets/fonts/Inter-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/af46bd584de8bb0aabfdab5c8651f943b089d09959ba30ae75454689c56f3bd2/docs/assets/fonts/Inter-BoldItalic.woff2') format('woff2');
    font-weight: 500 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/b6f9db9e45be20f3c1312c97fbee7ec36b7d8280f8caa4d53c9ba0408cc9997a/docs/assets/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/220976705fbec109f43c5cfdceca639e99ace7e51f3eb67292b105d3575eb39b/docs/assets/fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 500 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/708b7baa59a80d80465229b74f1dcb599d3ee76515a93d304337b92efb964afe/docs/assets/fonts/Inter-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/af46bd584de8bb0aabfdab5c8651f943b089d09959ba30ae75454689c56f3bd2/docs/assets/fonts/Inter-BoldItalic.woff2') format('woff2');
    font-weight: 500 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'IBMPlexMono';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/49ce58b41a0e1cb921c0f58d9a5b8b96a2cc21437c7066f3ba4f24873076d131/docs/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBMPlexMono';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/5788454f0ba4bd6300752c474215c4dd926682fa173ae1c6252d57828b6a235d/docs/assets/fonts/IBMPlexMono-Bold.woff2') format('woff2');
    font-weight: 500 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBMPlexMono';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/6afc2a6edd9a1d1f8104daf139a5062392f47da2f97fe19cb18a6a5a1fa67ec3/docs/assets/fonts/IBMPlexMono-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'IBMPlexMono';
    src: url('/_fern-files/instabase.docs.buildwithfern.com/b0bfaa05c90c662c164ca0515ec42baddac93129eab1af067f8872d84f10df46/docs/assets/fonts/IBMPlexMono-BoldItalic.woff2') format('woff2');
    font-weight: 500 900;
    font-style: italic;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 688px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 32px;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Inter', 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'IBMPlexMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


:root {
  --accent-1: #fdfdff;
  --accent-2: #f7f8ff;
  --accent-3: #eef1ff;
  --accent-4: #e1e8ff;
  --accent-5: #d4dcff;
  --accent-6: #c3ceff;
  --accent-7: #aeb9ff;
  --accent-8: #919cff;
  --accent-9: #5a52fa;
  --accent-10: #4f47e1;
  --accent-11: #5048e2;
  --accent-12: #25246e;

  --accent-a1: #0000ff02;
  --accent-a2: #0020ff08;
  --accent-a3: #002dff11;
  --accent-a4: #003cff1e;
  --accent-a5: #0130ff2b;
  --accent-a6: #002fff3c;
  --accent-a7: #0023ff51;
  --accent-a8: #001aff6e;
  --accent-a9: #0c00f8ad;
  --accent-a10: #0b00d6b8;
  --accent-a11: #0b00d7b7;
  --accent-a12: #010056db;

  --accent-contrast: #fff;
  --accent-surface: #f5f6ffcc;
  --accent-indicator: #5a52fa;
  --accent-track: #5a52fa;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --accent-1: oklch(99.4% 0.0031 277.2);
      --accent-2: oklch(98.2% 0.0117 277.2);
      --accent-3: oklch(96.1% 0.0225 277.2);
      --accent-4: oklch(93.5% 0.0452 277.2);
      --accent-5: oklch(90.4% 0.0677 277.2);
      --accent-6: oklch(86.4% 0.0907 277.2);
      --accent-7: oklch(80.8% 0.1142 277.2);
      --accent-8: oklch(72.9% 0.1519 277.2);
      --accent-9: oklch(55.4% 0.2402 277.2);
      --accent-10: oklch(50.9% 0.2243 277.2);
      --accent-11: oklch(51% 0.2243 277.2);
      --accent-12: oklch(31.4% 0.1247 277.2);

      --accent-a1: color(display-p3 0.0196 0.0196 1 / 0.008);
      --accent-a2: color(display-p3 0.0196 0.1451 0.8784 / 0.032);
      --accent-a3: color(display-p3 0.0078 0.1294 0.9412 / 0.063);
      --accent-a4: color(display-p3 0.0039 0.2118 0.9333 / 0.114);
      --accent-a5: color(display-p3 0.0039 0.1686 0.9294 / 0.165);
      --accent-a6: color(display-p3 0.0039 0.1608 0.9333 / 0.228);
      --accent-a7: color(display-p3 0.0039 0.1176 0.9373 / 0.31);
      --accent-a8: color(display-p3 0.0039 0.0863 0.9373 / 0.424);
      --accent-a9: color(display-p3 0.0431 0 0.9176 / 0.679);
      --accent-a10: color(display-p3 0.0392 0 0.7922 / 0.722);
      --accent-a11: color(display-p3 0.0392 0 0.8 / 0.718);
      --accent-a12: color(display-p3 0.0039 0 0.3216 / 0.859);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9608 0.9725 1 / 0.8);
      --accent-indicator: oklch(55.4% 0.2402 277.2);
      --accent-track: oklch(55.4% 0.2402 277.2);
    }
  }
}


:root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

.inline {
    display: inline;
}

.icons {
    display:inline-block;
    width: 22px;
    height: 18px;
}

.icons img {
    margin-bottom: 0;
    margin-top: 0;
}

/* start Instabase customizations */

:root {
    --badge-border-color: #404040;
    --badge-border-radius: 6px;
    --badge-border-style: solid;
    --badge-border-width: 1px;
    --badge-text-color: #404040;
    --badge-font-size: 85%;
    --badge-padding-horizontal: 4px;
    --badge-padding-vertical: 3px;

    /* background for backticked text, text blocks, and cards (light mode) */
    --card-background: #FFFFFF !important;
}

.prose {
    /* noinspection CssUnresolvedCustomProperty */
    --tw-prose-counters: var(--grayscale-a12) !important;
    --tw-prose-code: inherit !important;
}

/* noinspection CssUnresolvedCustomProperty */
.example-class {
    color: var(--main-color);
    font-size: var(--font-size);
}

/* make text in callouts same size as body text */
.fern-callout .text-sm {
    font-size: .875rem !important;
}

/* set color for callout text and icons */
.fern-callout,
.fern-callout svg {
    color: black !important;
}

.fern-callout[data-intent="info"] {
    background-color: #FFFEF0 !important;
}

/* noinspection CssUnresolvedCustomProperty */
.fern-callout[data-intent="note"] {
    background-color: var(--accent-a2) !important;
}

.fern-callout[data-intent="tip"],
.fern-callout[data-intent="check"] {
    background-color: #F5FBF8 !important;
}

.fern-callout[data-intent="warning"],
.fern-callout[data-intent="error"] {
    background-color: #FFF5F5 !important;
    border-color: #FFB5B5 !important;
}

.fern-callout[data-intent="launch"] {
    background-color: #F3F3F3 !important;
    border-color: darkgray !important;
}

/* Video callout: repurposes the unused Success intent for linked video walkthroughs.
   Use <Success className="video-callout" icon="circle-play" title="..."> in MDX. */
.fern-callout.video-callout,
.fern-callout[data-intent="success"].video-callout {
    background-color: #EEEDFE !important;
    border-color: #5A52FA !important;
}

/* make text in tables the same size as body text */
.fern-table {
    font-size: .875rem;
}

/* shrink main text size */
.prose {
    font-size: .875rem;
}

.prose code {
    font-weight: inherit !important; /* inherits from parent */
}

/* make links non-bold and same color as their underlining */
.fern-mdx-link {
    font-weight: normal;
    text-decoration: none;
}
/* text in announcement banner should be white */
.fern-announcement .fern-mdx-link {
    color: white;
}

/* See style guide in Confluence for instructions on .badge, .header-badge, and .header-badge-container */

.badge {
    border: var(--badge-border-width) var(--badge-border-style) var(--badge-border-color);
    border-radius: var(--badge-border-radius);
    color: var(--badge-text-color);
    font-weight: normal;
    font-size: var(--badge-font-size);
    padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
}

/* Purple badge variant: outline only, same purple as home page (#5A52FA) */
.badge.badge-purple {
    border-color: #5A52FA;
    color: #5A52FA;
}

.header-badge {
    position: absolute;
    top: 2px;
}

.header-badge-container {
    position: relative;
    margin-top: 48px;
}

h1,
.fern-page-heading {
    font-size: 1.75em !important;
}

/* H2 font size */
.prose :where(h2):not(:where([class~=not-prose], [class~=not-prose] *)) {
    font-size: 1.65em !important;
}

/* enlarge H3 font size */
.prose :where(h3):not(:where([class~=not-prose], [class~=not-prose] *)) {
    font-size: 1.5em
}

/* color of dark/light mode switcher should be same color as dim text when in dark mode */
/* note that this is moot while we've hidden the dark/light mode switcher (see below) */
svg.text-intent-default {
    color: rgb(229, 231, 235);
}

/* prevent line breaks on spaces or hyphens */
.no-break {
    white-space: nowrap;
}

.hyphens-auto {
    hyphens: none;
}

/* centered and italicized */
.caption {
    display: flex;
    justify-content: center;
    font-style: italic;
    color: darkgray;
}

/* make tabs across the top more prominent and findable */
.fern-header-tab-button > div > span {
    font-size: larger !important;
}

a[role="tab"] {
    font-size: larger !important;
}

/* disable line numbers in some code blocks */
/* use `<div class="no-line-numbers">` before the code block in a MDX file */
.no-line-numbers .code-block-line-gutter > span {
    display: none;
}

.no-line-numbers .code-block-line-content > .line {
    display: inline-block;
}

/* next two classes make inline icons (like the trash can, for deleting) right size and right padding */
.inline-icon {
    display: inline-block;
    vertical-align: middle;
}

.inline-icon img {
    margin-top: 0;
    margin-bottom: 0;
}

/* noinspection CssUnresolvedCustomProperty */
.\[\&\>li\]\:before\:text-\(color\:--grayscale-a10\)>li:before {
    color: var(--grayscale-a12);
}

/* noinspection CssUnresolvedCustomProperty */
.\[\&\>li\]\:before\:content-\[\'-\'\]>li:before {
    --tw-content: "•";
    color: var(--grayscale-a12);
}

/* noinspection CssUnresolvedCustomProperty */
.text-\(color\:--green-a11\),
.text-\(color\:--blue-a11\),
.text-\(color\:--yellow-a11\),
.text-\(color\:--red-a11\),
.text-\(color\:--grayscale-a11\),
.text-\(color\:--amber-a11\),
.text-\(color\:--green-a11\) svg,
.text-\(color\:--blue-a11\) svg,
.text-\(color\:--yellow-a11\) svg,
.text-\(color\:--red-a11\) svg,
.text-\(color\:--grayscale-a11\) svg,
.text-\(color\:--amber-a11\) svg {
    color: var(--tw-prose-body) !important;
}

.fern-page-actions {
    display: none !important;
}

.welcome-grid .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* For mobile responsiveness */
@media (max-width: 768px) {
  .welcome-grid .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .welcome-grid .cards {
    grid-template-columns: 1fr;
  }
}

/* Custom welcome page styling - Updated for compact layout */
.welcome-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Equal heights per row; three tiles per row on desktop (six-column grid, cards span two). */
.welcome-grid {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  grid-template-columns: 1fr;
}

.welcome-grid .card {
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 641px) and (max-width: 1023px) {
  .welcome-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .welcome-grid .card {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .welcome-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .welcome-grid .card {
    grid-column: span 2;
  }
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-icon {
  background: #f5f5f7;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.card-icon i {
  font-size: 1rem;
  color: #5A52FA;
}

.card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.card p {
  margin-bottom: 1rem;
  flex-grow: 1;
  font-size: 0.875rem;
}

.card-link {
  color: #5A52FA;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.875rem;
}

.card-link:hover {
  text-decoration: underline;
}

.note {
  background: #f5f5f7;
  border-left: 4px solid #5A52FA;
  padding: 0.75rem;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
}

.note p {
  margin-bottom: 0;
  font-size: 0.875rem;
}

/* Enhanced responsive adjustments */
@media (max-width: 1200px) {
  .welcome-container {
    max-width: 800px;
    padding: 1rem;
  }

  .welcome-grid {
    gap: 0.875rem;
  }
}

@media (max-width: 1024px) {
  .welcome-container {
    max-width: 700px;
  }
}

@media (max-width: 640px) {
  .welcome-container {
    padding: 1rem;
  }
}

/* unbolds h3 header on welcome page */
.unbold-header {
    font-weight: normal !important;
}

/* More aggressive fix for Fern card icons */
.card-icon:not(.welcome-grid .card-icon) {
    border-radius: 0 !important;
    clip-path: none !important;
    overflow: visible !important;
}

/* Preserve welcome page card styling */
.welcome-grid .card-icon {
    border-radius: 50% !important;
    clip-path: initial !important;
    overflow: hidden !important;
}

/* Disable "try it" feature on API reference pages, while we figure out why uploading
a PDF with "try it" and the "Upload file to batch" operation corrupts the PDF. */
[id^="playground-button"] {
    display: none;
}

/* Disable the gray box that holds the "try it" button that's disabled above. */
main > div > article > div > aside > div > div > div:nth-of-type(2) {
    display: none;
}
\&\ > li\]\:before\:content-\[\'-\'\] > li:before { --tw-content: "•"; color: var(--grayscale-a12);
}

/* noinspection CssUnresolvedCustomProperty */
.text-\(color\:--green-a11\),
.text-\(color\:--blue-a11\),
.text-\(color\:--yellow-a11\),
.text-\(color\:--red-a11\),
.text-\(color\:--grayscale-a11\),
.text-\(color\:--amber-a11\),
.text-\(color\:--green-a11\) svg,
.text-\(color\:--blue-a11\) svg,
.text-\(color\:--yellow-a11\) svg,
.text-\(color\:--red-a11\) svg,
.text-\(color\:--grayscale-a11\) svg,
.text-\(color\:--amber-a11\) svg { color: var(--tw-prose-body) !important;
}

.fern-page-actions { display: none !important;
}

.welcome-grid .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}

/* For mobile responsiveness */
@media (max-width: 768px) { .welcome-grid .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) { .welcome-grid .cards { grid-template-columns: 1fr; }
}

/* Custom welcome page styling - Updated for compact layout */
.welcome-container { max-width: 900px; margin: 0 auto; padding: 1.5rem;
}

/* Equal heights per row; three tiles per row on desktop (six-column grid, cards span two). */
.welcome-grid { display: grid; gap: 1rem; margin: 1.5rem 0; grid-template-columns: 1fr;
}

.welcome-grid .card { box-sizing: border-box; min-width: 0;
}

@media (min-width: 641px) and (max-width: 1023px) { .welcome-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .welcome-grid .card { grid-column: span 2; }
}

@media (min-width: 1024px) { .welcome-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .welcome-grid .card { grid-column: span 2; }
}

.card { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); padding: 1rem; display: flex; flex-direction: column; height: 100%;
}

.card-icon { background: #f5f5f7; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem;
}

.card-icon i { font-size: 1rem; color: #5A52FA;
}

.card h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.1rem;
}

.card p { margin-bottom: 1rem; flex-grow: 1; font-size: 0.875rem;
}

.card-link { color: #5A52FA; font-weight: 500; text-decoration: none; font-size: 0.875rem;
}

.card-link:focus-within { text-decoration: underline;
}

.note { background: #f5f5f7; border-left: 4px solid #5A52FA; padding: 0.75rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0;
}

.note p { margin-bottom: 0; font-size: 0.875rem;
}

/* Enhanced responsive adjustments */
@media (max-width: 1200px) { .welcome-container { max-width: 800px; padding: 1rem; } .welcome-grid { gap: 0.875rem; }
}

@media (max-width: 1024px) { .welcome-container { max-width: 700px; }
}

@media (max-width: 640px) { .welcome-container { padding: 1rem; }
}

/* unbolds h3 header on welcome page */
.unbold-header { font-weight: normal !important;
}

/* More aggressive fix for Fern card icons */
.card-icon:not(.welcome-grid .card-icon) { border-radius: 0 !important; clip-path: none !important; overflow: visible !important;
}

/* Preserve welcome page card styling */
.welcome-grid .card-icon { border-radius: 50% !important; clip-path: initial !important; overflow: hidden !important;
}

/* Disable "try it" feature on API reference pages, while we figure out why uploading
a PDF with "try it" and the "Upload file to batch" operation corrupts the PDF. */
[id^="playground-button"] { display: none;
}

/* Disable the gray box that holds the "try it" button that's disabled above. */
main > div > article > div > aside > div > div > div:nth-of-type(2) {
    display: none; outline: none;
}

/* Responsive YouTube embeds (16:9). Scoped to prose content so Scribe embeds are unaffected. */
.prose iframe[src*="youtube.com"],
.prose iframe[src*="youtu.be"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Fern MDX cards default to text-base (16px); match body text (14px) with a larger title */
a.fern-card.text-base,
.fern-card.text-base {
    font-size: 0.875rem !important;
    line-height: 1.625;
}

/* Card description */
a.fern-card .w-full.space-y-1 p,
.fern-card .w-full.space-y-1 p {
    font-size: inherit !important;
    line-height: inherit;
}

/* Card title: Fern renders title as text-base font-semibold (not .card-title).
   Scope to the card title element -- accordions also carry .fern-card, so an
   unscoped .font-semibold rule enlarges bold text in accordion content. */
a.fern-card .w-full.space-y-1 > .font-semibold,
.fern-card .w-full.space-y-1 > .font-semibold {
    font-size: 1.125rem !important;
    line-height: 1.4;
    font-weight: 600;
}

/* Balance left-positioned card icons with title/body size (inline styles default to 32px) */
a.fern-card .card-icon,
.fern-card .card-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    min-height: 1.5rem !important;
}

a.fern-card .card-icon svg,
.fern-card .card-icon svg {
    width: 100% !important;
    height: 100% !important;
}

/* end Instabase customizations */