/*fern-site-stylesheet*/@font-face {
    font-family: 'notion';
    src: url('/_fern-files/notion.ferndocs.com/c940764593d0fe5d596be327ca7558855e018039fb78509aa21921fd3644c3e4/docs/assets/fonts/font4.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0300-0323;
}
@font-face {
    font-family: 'notion';
    src: url('/_fern-img/c940764593d0fe5d596be327ca755885-v1.latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF;
}
@font-face {
    font-family: 'notion Fallback';
    src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
    size-adjust: 107.12%;
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0.00%;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 24px;
  --font-body: 'notion', 'notion Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'notion', 'notion Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 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: #fafcfe;
  --accent-2: #f4f8fe;
  --accent-3: #e8f2fe;
  --accent-4: #d9ebff;
  --accent-5: #c8e1ff;
  --accent-6: #b4d4fc;
  --accent-7: #99c3f6;
  --accent-8: #73abf0;
  --accent-9: #0075de;
  --accent-10: #0067cf;
  --accent-11: #0070d9;
  --accent-12: #093462;

  --accent-a1: #f8fbffaa;
  --accent-a2: #eff5ffaa;
  --accent-a3: #ddecffaa;
  --accent-a4: #d9ebff;
  --accent-a5: #c8e1ff;
  --accent-a6: #0170fd4b;
  --accent-a7: #006bee66;
  --accent-a8: #0066e68c;
  --accent-a9: #0075de;
  --accent-a10: #0067cf;
  --accent-a11: #0070d9;
  --accent-a12: #002d5cf6;

  --accent-contrast: #fff;
  --accent-surface: #f2f7ffcc;
  --accent-indicator: #0075de;
  --accent-track: #0075de;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --accent-1: oklch(99% 0.0032 254.3);
      --accent-2: oklch(97.8% 0.0092 254.3);
      --accent-3: oklch(95.7% 0.0191 254.3);
      --accent-4: oklch(93.4% 0.0358 254.3);
      --accent-5: oklch(90.2% 0.0516 254.3);
      --accent-6: oklch(86% 0.0663 254.3);
      --accent-7: oklch(80.5% 0.0854 254.3);
      --accent-8: oklch(73% 0.1169 254.3);
      --accent-9: oklch(56.8% 0.1824 254.3);
      --accent-10: oklch(52.3% 0.1824 254.3);
      --accent-11: oklch(55.3% 0.1824 254.3);
      --accent-12: oklch(32.4% 0.0932 254.3);

      --accent-a1: color(display-p3 0.9725 0.9882 1 / 0.667);
      --accent-a2: color(display-p3 0.8863 0.9294 1 / 0.334);
      --accent-a3: color(display-p3 0.7569 0.8588 1 / 0.334);
      --accent-a4: color(display-p3 0.5922 0.7647 1 / 0.334);
      --accent-a5: color(display-p3 0.0078 0.4 0.9922 / 0.197);
      --accent-a6: color(display-p3 0.0039 0.3765 0.9333 / 0.271);
      --accent-a7: color(display-p3 0.0039 0.3529 0.8824 / 0.365);
      --accent-a8: color(display-p3 0 0.3412 0.851 / 0.502);
      --accent-a9: color(display-p3 0 0.3176 0.8078 / 0.804);
      --accent-a10: color(display-p3 0 0.2745 0.7451 / 0.832);
      --accent-a11: color(display-p3 0 0.302 0.7882 / 0.816);
      --accent-a12: color(display-p3 0 0.1216 0.3098 / 0.91);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.949 0.9686 0.9961 / 0.8);
      --accent-indicator: oklch(56.8% 0.1824 254.3);
      --accent-track: oklch(56.8% 0.1824 254.3);
    }
  }
}


:root {
  --grayscale-1: #fdfdfc;
  --grayscale-2: #f9f9f8;
  --grayscale-3: #f1f0ef;
  --grayscale-4: #e9e8e6;
  --grayscale-5: #e2e1de;
  --grayscale-6: #dad9d6;
  --grayscale-7: #cfceca;
  --grayscale-8: #bcbbb5;
  --grayscale-9: #8d8d86;
  --grayscale-10: #82827c;
  --grayscale-11: #63635e;
  --grayscale-12: #21201c;

  --grayscale-a1: #55550003;
  --grayscale-a2: #25250007;
  --grayscale-a3: #20100010;
  --grayscale-a4: #1f150019;
  --grayscale-a5: #1f180021;
  --grayscale-a6: #19130029;
  --grayscale-a7: #19140035;
  --grayscale-a8: #1915014a;
  --grayscale-a9: #0f0f0079;
  --grayscale-a10: #0c0c0083;
  --grayscale-a11: #080800a1;
  --grayscale-a12: #060500e3;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --grayscale-1: color(display-p3 0.992 0.992 0.989);
      --grayscale-2: color(display-p3 0.977 0.977 0.973);
      --grayscale-3: color(display-p3 0.943 0.942 0.936);
      --grayscale-4: color(display-p3 0.913 0.912 0.903);
      --grayscale-5: color(display-p3 0.885 0.883 0.873);
      --grayscale-6: color(display-p3 0.854 0.852 0.839);
      --grayscale-7: color(display-p3 0.813 0.81 0.794);
      --grayscale-8: color(display-p3 0.738 0.734 0.713);
      --grayscale-9: color(display-p3 0.553 0.553 0.528);
      --grayscale-10: color(display-p3 0.511 0.511 0.488);
      --grayscale-11: color(display-p3 0.388 0.388 0.37);
      --grayscale-12: color(display-p3 0.129 0.126 0.111);

      --grayscale-a1: #55550003;
      --grayscale-a2: #25250007;
      --grayscale-a3: #20100010;
      --grayscale-a4: #1f150019;
      --grayscale-a5: #1f180021;
      --grayscale-a6: #19130029;
      --grayscale-a7: #19140035;
      --grayscale-a8: #1915014a;
      --grayscale-a9: #0f0f0079;
      --grayscale-a10: #0c0c0083;
      --grayscale-a11: #080800a1;
      --grayscale-a12: #060500e3;

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


.dark {
  --accent-1: #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(0, 117, 222, 1);
  --background: rgba(255, 254, 252, 1);
  --border: initial;
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fffefc;
}

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

/* Sidebar styling */
#fern-sidebar {
  border-right: 1px solid var(--border, var(--grayscale-a5)) !important;
  height: 100vh !important;
}

/* header styling */
#fern-header {
  border-color: var(--border, var(--grayscale-a5)) !important;
}


/* Landing page styles */

/* Hero Section */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0rem 4rem;
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.hero-text h1 {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  padding-top: 2rem;
}

.hero-text p {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--grayscale-a11);
}

.hero-aside {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-aside img {
  width: 372px;
  height: 460px;
  aspect-ratio: auto 372 / 460;
}
.dark .hero-aside img {
  filter: invert(1);
}

/* Invert all images in dark mode */

.dark .mcp-aside img {
  filter: invert(1);
}

.dark .update-aside img {
  filter: invert(1);
}

.dark .help-header img {
  filter: invert(1);
}

/* Invert the peeking character background image in dark mode */
.dark .code-block::before {
  filter: invert(1);
}

/* Divider styles */
.divider {
  border-top: 1px solid var(--grayscale-a5);
}

/* Sidekick Section */
.sidekick {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 4rem;
}

.sidekick-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-bottom: 3rem;
}

/* Fix for margin issues affecting ::before positioning */
.sidekick-aside.code-block {
  margin-inline: unset;
}

.hero .mx-auto,
.sidekick .mx-auto {
  margin-inline: unset !important;
}

.sidekick-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}



/* Create named View Timeline on the section that gets tracked */
.sidekick {
  view-timeline-name: --section-timeline;
  view-timeline-axis: block;
}

/* Animate the pseudo-element using the section's timeline */
.sidekick-aside {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.code-block::before {
  content: "";
  background: url(https://www.notion.so/front-static/external/readme/images/peeking@2x.png?cache=busted) no-repeat center center;
  background-size: contain;
  width: 88px;
  height: 168px;
  position: absolute;
  left: -76px;
  top: 50%;
  transform: translateY(-50%);
  
  /* Use the named timeline from the section */
  /* animation: scrollPeek linear both;
  animation-timeline: --section-timeline; */
}

@keyframes scrollPeek {
  entry 0% {
    transform: translateY(-50%) translateX(150px);
    opacity: 0;
  }
  entry 100% {
    transform: translateY(-50%) translateX(0px);
    opacity: 1;
  }
  exit 0% {
    transform: translateY(-50%) translateX(0px);
    opacity: 1;
  }
  exit 100% {
    transform: translateY(-50%) translateX(150px);
    opacity: 0;
  }
}

.sidekick-aside img {
  width: 449px;
  height: 319px;
  aspect-ratio: auto 449 / 319;
}

.sidekick-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.sidekick-text p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--grayscale-a11);
}


/* MCP Section */
.mcp-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 4rem;
}

.mcp-aside {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.mcp-aside img {
  width: 300px;
  height: 300px;
  aspect-ratio: auto 300 / 300;
}

.mcp-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mcp-text h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.mcp-text p {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: var(--grayscale-a11);
}

.mcp-text a {
  text-decoration: none;
  font-weight: 500;
}

/* Updates Section */
.updates {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 4rem;
}

.updates h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.updates-content {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 3rem;
  align-items: center;
}

.update-aside {
  display: flex;
  align-items: center;
  justify-content: center;
}

.update-item h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.update-item p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: var(--grayscale-a11);
}

.update-item a {
  text-decoration: none;
  font-weight: 500;
}

.update-aside img {
  width: 246px;
  height: 156px;
  aspect-ratio: auto 246 / 156;
}

/* Getting Help Section */
.help {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 4rem;
}

.help-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.help-header img {
  width: 247px;
  height: 142px;
  aspect-ratio: auto 247 / 142;
  flex-shrink: 0;
}

.help-header img.mx-auto {
  margin-inline: unset !important;
}

.help-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
}

.help-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.help-column {
  display: flex;
  flex-direction: column;
  min-height: 120px; /* Ensures minimum height for visual balance */
  align-items: flex-start; /* Align content to left */
}

/* Fix support column alignment specifically */
.help-column:last-child {
  justify-content: flex-start;
  align-items: flex-start;
}

.help-column h4 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.help-column a {
  display: block;
  margin-bottom: 1rem;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.5;
}

/* Remove underlines from ALL getting help section links */
.help-column a,
.help-column a:hover {
  text-decoration: none !important;
}
.help-column a:focus-visible {
  text-decoration: none !important;
}


/* Responsive Design */
@media (max-width: 768px) {

  .hero,
  .mcp-section {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 2rem;
  }
  
  .sidekick {
    padding: 3rem 2rem;
  }
  
  .updates,
  .help {
    padding: 3rem 2rem;
  }
  
  .sidekick-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .updates-content,
  .help-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .hero-text h1 {
    font-size: 2.5rem;
  }
  
  .sidekick-text h2,
  .mcp-text h2,
  .help-header h2 {
    font-size: 2rem;
  }
  
  .update-aside {
    display: none;
  }
  
  .help-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .help-header img {
    width: 180px;
    height: 103px;
    aspect-ratio: auto 180 / 103;
  }
  .help-header img.mx-auto {
    margin-inline: unset !important;
  }
  
  .hero-aside img {
    width: 280px;
    height: 346px;
    aspect-ratio: auto 280 / 346;
  }
  
  .sidekick-aside img {
    width: 320px;
    height: 227px;
    aspect-ratio: auto 320 / 227;
  }
  
  .mcp-aside img {
    width: 220px;
    height: 220px;
    aspect-ratio: auto 220 / 220;
  }
  
  .code-block::before {
    display: none;
  }

  .update-item {
    margin-top: 1rem;
  }

  #fern-announcement {
    font-size: 0.875rem;
  }

}
.fern-mdx-link{
  font-weight: var(--font-weight-semibold) !important;
  color: var(--accent-a10) !important;
}
.fern-mdx-link:hover{
  color: var(--accent-a11) !important;
}
.fern-mdx-link:focus-visible {
  color: var(--accent-a11) !important;
}
.fern-mdx-link .external-link-icon {
  display: none !important;
}
.promo-link {
  text-decoration: none !important;
  font-size: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all 0.2s ease !important;
  padding: 8px 0px !important;
}
  
.promo-link:hover {
  text-decoration: none !important;
}
.promo-link:focus-visible {
  text-decoration: none !important;
}
  
.arrow {
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
}
  
.promo-link:hover .arrow {
  transform: translateX(4px) !important;
}
.promo-link:focus-within .arrow {
  transform: translateX(4px) !important;
}

/* Examples page styles */
.examples-page {
    /* Dynamic padding that scales with viewport width */
    /* min: 2rem, preferred: 20% of viewport width, max: 16rem */
    padding: 2rem clamp(8rem, 30vw, 16rem);
}

.examples-hero {
    position: relative;
    margin-bottom: 2rem;
    margin-top: 2rem;
    height: 40px !important;
}

.examples-hero-image {
  position: relative;
  right: -275px;
  bottom: 100px; /* This positions the image to "rest" on the tab border */
  z-index: 1;
}

.examples-hero-image img {
  width: 600px;
  height: auto;
  aspect-ratio: auto;
}
.dark .examples-hero-image img {
  display: none !important;
}

.examples-page .fern-tabs {
  position: relative;
  z-index: 2;
}
.examples-page .fern-tab-panel {
  padding-top: 2rem;
}

/* Hide page actions on examples page */
.examples-page .fern-page-actions {
    display: none !important;
}

@media (max-width: 1490px) {

  .examples-hero-image {
    display: none; /* Hide the image on narrow screens */
  }

}

#fern-announcement {

  a {
    color: var(--grayscale-1) !important;
  }
  p {
    color: var(--grayscale-1) !important;
  }

}

.fern-card {

  border: 1px solid var(--grayscale-a5) !important;
  
  
  &.interactive {

    transition: box-shadow 0.2s ease !important;

    &:hover {
      box-shadow: 0px 4px 18px #0000000a,0px 2.025px 7.84688px rgba(0,0,0,.027),0px 0.8px 2.925px #00000005,0px 0.175px 1.04062px rgba(0,0,0,.013) !important;
    }
&:focus-visible {
      box-shadow: 0px 4px 18px #0000000a,0px 2.025px 7.84688px rgba(0,0,0,.027),0px 0.8px 2.925px #00000005,0px 0.175px 1.04062px rgba(0,0,0,.013) !important;
    }
  
}

}

ol ol {
  list-style-type: lower-roman;
}
@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&display=swap";#fern-footer .fern-layout-footer-toolbar{display:none!important}#fern-footer{background:transparent;border:none;padding:0}.global-footer{padding:70px 30px;align-items:flex-start;justify-items:flex-start;flex:1 0 auto;width:100%;z-index:1;max-width:1160px;box-sizing:border-box;margin:0 auto;background-color:var(--color-background);border-top:1px solid var(--grayscale-a5);display:grid;grid-template-columns:1fr auto auto auto;gap:3rem;color:var(--grayscale-a11)}.global-footer *{color:inherit}.global-footer__colophon{display:flex;flex-direction:column;gap:.5rem;max-width:300px}.notion-logo{margin:0;font-size:0;line-height:0}.dark .notion-logo svg{filter:invert(1)}.notion-logo svg{width:87px;height:30px}.global-footer__nav{display:flex;flex-direction:column;gap:.5rem}.global-footer__nav h5{margin:0 0 .5rem;font-weight:600;color:var(--grayscale-a12)}.global-footer__nav a{text-decoration:none}.copy{margin:0;line-height:1.5}.copy--body-s{font-size:.875rem}.copy--body-m{font-size:1rem}.copy--header{font-weight:600}.copy--mono{font-family:Roboto Mono,Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace;letter-spacing:.05em}.link:hover{color:var(--grayscale-a12)}
.link:focus-visible {color:var(--grayscale-a12)}@media (max-width: 768px) {
.global-footer{grid-template-columns:1fr;gap:2rem;padding:50px 20px}.global-footer__nav{gap:.5rem}
}@media (max-width: 480px) {
.global-footer{padding:40px 32px}.copy--body-s{font-size:.8125rem}.copy--body-m{font-size:.9375rem}
}@media print {
.global-footer{background:#fff!important;border-top:1px solid #000;color:#000!important}.global-footer *{color:#000!important}.global-footer a{color:#000!important;text-decoration:underline}
}