/*fern-site-stylesheet*/@font-face {
    font-family: 'DM-Sans-Regular';
    src: url('/_fern-files/invofox.docs.buildwithfern.com/177628e7287755e9c42cb9adcee0d7b59183e2c1c9480a047005b39d806089c2/assets/fonts/DMSans-Regular.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open-Sans-Bold';
    src: url('/_fern-files/invofox.docs.buildwithfern.com/1a472074d638d641c1d9488a682fe32b508fadb45aaafd15ea0085769933c908/assets/fonts/OpenSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains-Mono-Regular';
    src: url('/_fern-files/invofox.docs.buildwithfern.com/bd0acc9fc9da437a26e7d3abfa0a4ff2094e835e0c26b83af2823cafd60eed1d/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1408px;
  --logo-height: 20px;
  --font-body: 'DM-Sans-Regular', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Open-Sans-Bold', 'DM-Sans-Regular', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'JetBrains-Mono-Regular', 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: #fbfefc;
  --accent-2: #f4fbf7;
  --accent-3: #e6f6ed;
  --accent-4: #d7f0e2;
  --accent-5: #c6e8d5;
  --accent-6: #b1dcc4;
  --accent-7: #94ccae;
  --accent-8: #69b790;
  --accent-9: #13865a;
  --accent-10: #00784d;
  --accent-11: #028054;
  --accent-12: #203a2d;

  --accent-a1: #00c04004;
  --accent-a2: #00a3460b;
  --accent-a3: #00a44819;
  --accent-a4: #00a04728;
  --accent-a5: #00994439;
  --accent-a6: #008d3f4e;
  --accent-a7: #01863e6b;
  --accent-a8: #00854396;
  --accent-a9: #007c4dec;
  --accent-a10: #00784d;
  --accent-a11: #007f53fd;
  --accent-a12: #001e0fdf;

  --accent-contrast: #fff;
  --accent-surface: #f1faf5cc;
  --accent-indicator: #13865a;
  --accent-track: #13865a;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0037 160.7);
      --accent-2: oklch(98.2% 0.0082 160.7);
      --accent-3: oklch(95.9% 0.0205 160.7);
      --accent-4: oklch(93.3% 0.032 160.7);
      --accent-5: oklch(90.1% 0.0435 160.7);
      --accent-6: oklch(85.8% 0.0562 160.7);
      --accent-7: oklch(79.9% 0.073 160.7);
      --accent-8: oklch(71.7% 0.0973 160.7);
      --accent-9: oklch(55% 0.1179 160.7);
      --accent-10: oklch(50.4% 0.1179 160.7);
      --accent-11: oklch(52.9% 0.1179 160.7);
      --accent-12: oklch(32.4% 0.0404 160.7);

      --accent-a1: color(display-p3 0.0235 0.6745 0.0235 / 0.012);
      --accent-a2: color(display-p3 0.0235 0.6118 0.2196 / 0.04);
      --accent-a3: color(display-p3 0.0118 0.5529 0.2353 / 0.087);
      --accent-a4: color(display-p3 0.0078 0.549 0.2078 / 0.138);
      --accent-a5: color(display-p3 0.0078 0.5255 0.1843 / 0.197);
      --accent-a6: color(display-p3 0.0039 0.4824 0.1765 / 0.271);
      --accent-a7: color(display-p3 0.0039 0.4431 0.1725 / 0.373);
      --accent-a8: color(display-p3 0 0.4353 0.1765 / 0.514);
      --accent-a9: color(display-p3 0 0.3647 0.1608 / 0.757);
      --accent-a10: color(display-p3 0 0.3294 0.1412 / 0.8);
      --accent-a11: color(display-p3 0 0.3569 0.1608 / 0.785);
      --accent-a12: color(display-p3 0 0.0863 0.0353 / 0.851);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9569 0.9804 0.9608 / 0.8);
      --accent-indicator: oklch(55% 0.1179 160.7);
      --accent-track: oklch(55% 0.1179 160.7);
    }
  }
}


.light, :root {
  --grayscale-1: #fbfdfc;
  --grayscale-2: #f7f9f8;
  --grayscale-3: #eef1f0;
  --grayscale-4: #e6e9e8;
  --grayscale-5: #dfe2e0;
  --grayscale-6: #d7dad9;
  --grayscale-7: #cbcfcd;
  --grayscale-8: #b8bcba;
  --grayscale-9: #868e8b;
  --grayscale-10: #7c8481;
  --grayscale-11: #5f6563;
  --grayscale-12: #1a211e;

  --grayscale-a1: #00804004;
  --grayscale-a2: #00402008;
  --grayscale-a3: #002d1e11;
  --grayscale-a4: #001f1519;
  --grayscale-a5: #00180820;
  --grayscale-a6: #00140d28;
  --grayscale-a7: #00140a34;
  --grayscale-a8: #000f0847;
  --grayscale-a9: #00110b79;
  --grayscale-a10: #00100a83;
  --grayscale-a11: #000a07a0;
  --grayscale-a12: #000805e5;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #868e8b;
  --grayscale-track: #868e8b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.986 0.992 0.988);
      --grayscale-2: color(display-p3 0.97 0.977 0.974);
      --grayscale-3: color(display-p3 0.935 0.944 0.94);
      --grayscale-4: color(display-p3 0.904 0.913 0.909);
      --grayscale-5: color(display-p3 0.875 0.885 0.88);
      --grayscale-6: color(display-p3 0.844 0.854 0.849);
      --grayscale-7: color(display-p3 0.8 0.811 0.806);
      --grayscale-8: color(display-p3 0.725 0.738 0.732);
      --grayscale-9: color(display-p3 0.531 0.556 0.546);
      --grayscale-10: color(display-p3 0.492 0.515 0.506);
      --grayscale-11: color(display-p3 0.377 0.395 0.389);
      --grayscale-12: color(display-p3 0.107 0.129 0.118);

      --grayscale-a1: #00804004;
      --grayscale-a2: #00402008;
      --grayscale-a3: #002d1e11;
      --grayscale-a4: #001f1519;
      --grayscale-a5: #00180820;
      --grayscale-a6: #00140d28;
      --grayscale-a7: #00140a34;
      --grayscale-a8: #000f0847;
      --grayscale-a9: #00110b79;
      --grayscale-a10: #00100a83;
      --grayscale-a11: #000a07a0;
      --grayscale-a12: #000805e5;

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


.dark {
  --accent-1: #0b100c;
  --accent-2: #141915;
  --accent-3: #1c291f;
  --accent-4: #223827;
  --accent-5: #2a4631;
  --accent-6: #34553c;
  --accent-7: #3d6547;
  --accent-8: #477753;
  --accent-9: #64b279;
  --accent-10: #58a66e;
  --accent-11: #7ecc92;
  --accent-12: #c4eecd;

  --accent-a1: #00b80003;
  --accent-a2: #a2f8670c;
  --accent-a3: #91fc8d1d;
  --accent-a4: #84fc8e2d;
  --accent-a5: #89fc993c;
  --accent-a6: #90fda24c;
  --accent-a7: #91fda55d;
  --accent-a8: #92fda770;
  --accent-a9: #8dffaaae;
  --accent-a10: #84ffa5a1;
  --accent-a11: #9bfeb3ca;
  --accent-a12: #d1fedbee;

  --accent-contrast: #fff;
  --accent-surface: #1b241980;
  --accent-indicator: #64b279;
  --accent-track: #64b279;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(16.4% 0.0109 151.2);
      --accent-2: oklch(20.7% 0.0115 151.2);
      --accent-3: oklch(26.6% 0.0252 151.2);
      --accent-4: oklch(31.8% 0.0421 151.2);
      --accent-5: oklch(36.6% 0.0496 151.2);
      --accent-6: oklch(41.5% 0.0571 151.2);
      --accent-7: oklch(46.8% 0.0659 151.2);
      --accent-8: oklch(52.5% 0.0767 151.2);
      --accent-9: oklch(69.8% 0.1143 151.2);
      --accent-10: oklch(66% 0.1143 151.2);
      --accent-11: oklch(78% 0.1143 151.2);
      --accent-12: oklch(91% 0.0623 151.2);

      --accent-a1: color(display-p3 0 0.9294 0 / 0.009);
      --accent-a2: color(display-p3 0.7333 0.9961 0.4078 / 0.046);
      --accent-a3: color(display-p3 0.6745 0.9922 0.5882 / 0.113);
      --accent-a4: color(display-p3 0.651 0.9961 0.5961 / 0.171);
      --accent-a5: color(display-p3 0.651 1 0.651 / 0.229);
      --accent-a6: color(display-p3 0.6745 1 0.6745 / 0.291);
      --accent-a7: color(display-p3 0.6784 1 0.6941 / 0.357);
      --accent-a8: color(display-p3 0.6784 1 0.6941 / 0.432);
      --accent-a9: color(display-p3 0.6706 0.9961 0.702 / 0.673);
      --accent-a10: color(display-p3 0.6431 1 0.6863 / 0.623);
      --accent-a11: color(display-p3 0.7098 1 0.7373 / 0.781);
      --accent-a12: color(display-p3 0.8588 1 0.8745 / 0.926);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1098 0.1412 0.0941 / 0.5);
      --accent-indicator: oklch(69.8% 0.1143 151.2);
      --accent-track: oklch(69.8% 0.1143 151.2);
    }
  }
}


.dark {
  --grayscale-1: #111113;
  --grayscale-2: #18191b;
  --grayscale-3: #212225;
  --grayscale-4: #272a2d;
  --grayscale-5: #2e3135;
  --grayscale-6: #363a3f;
  --grayscale-7: #43484e;
  --grayscale-8: #5a6169;
  --grayscale-9: #696e77;
  --grayscale-10: #777b84;
  --grayscale-11: #b0b4ba;
  --grayscale-12: #edeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #d8f4f609;
  --grayscale-a3: #ddeaf814;
  --grayscale-a4: #d3edf81d;
  --grayscale-a5: #d9edfe25;
  --grayscale-a6: #d6ebfd30;
  --grayscale-a7: #d9edff40;
  --grayscale-a8: #d9edff5d;
  --grayscale-a9: #dfebfd6d;
  --grayscale-a10: #e5edfd7b;
  --grayscale-a11: #f1f7feb5;
  --grayscale-a12: #fcfdffef;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.074);
      --grayscale-2: color(display-p3 0.095 0.098 0.105);
      --grayscale-3: color(display-p3 0.13 0.135 0.145);
      --grayscale-4: color(display-p3 0.156 0.163 0.176);
      --grayscale-5: color(display-p3 0.183 0.191 0.206);
      --grayscale-6: color(display-p3 0.215 0.226 0.244);
      --grayscale-7: color(display-p3 0.265 0.28 0.302);
      --grayscale-8: color(display-p3 0.357 0.381 0.409);
      --grayscale-9: color(display-p3 0.415 0.431 0.463);
      --grayscale-10: color(display-p3 0.469 0.483 0.514);
      --grayscale-11: color(display-p3 0.692 0.704 0.728);
      --grayscale-12: color(display-p3 0.93 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #d8f4f609;
      --grayscale-a3: #ddeaf814;
      --grayscale-a4: #d3edf81d;
      --grayscale-a5: #d9edfe25;
      --grayscale-a6: #d6ebfd30;
      --grayscale-a7: #d9edff40;
      --grayscale-a8: #d9edff5d;
      --grayscale-a9: #dfebfd6d;
      --grayscale-a10: #e5edfd7b;
      --grayscale-a11: #f1f7feb5;
      --grayscale-a12: #fcfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.415 0.431 0.463);
      --grayscale-track: color(display-p3 0.415 0.431 0.463);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(19, 134, 90, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(229, 231, 235, 1);
  --sidebar-background: rgba(249, 250, 251, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(100, 178, 121, 1);
  --background: rgba(13, 14, 17, 1);
  --border: rgba(55, 65, 81, 1);
  --sidebar-background: rgba(17, 24, 39, 1);
  --header-background: rgba(31, 41, 55, 1);
  --card-background: rgba(31, 41, 55, 1);
  --theme-color: #0d0e11;
}

/* Override to disable list item bullets and use disc style */
[class*="before:content-['-']"] > li:before {
    content: "•" !important;
}

/* =========================================================================
   Home "How it works" animated flow  (Upload -> Invofox -> JSON)
   Pure CSS/SVG. Brand greens. Dark-mode + reduced-motion aware.
   ========================================================================= */
.ix-flow {
  --ix-green: #13865a;
  --ix-green-2: #00b476;
  --ix-surface: #ffffff;
  --ix-surface-2: #f9fafb;
  --ix-border: #e5e7eb;
  --ix-muted: #9ca3af;
  --ix-text: #3d4045;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 2rem 1rem;
  margin: 1.5rem 0;
  border: 1px solid var(--ix-border);
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(19, 134, 90, 0.06), transparent 60%),
    var(--ix-surface-2);
}

/* dark mode (Fern toggles .dark on a root element) */
.dark .ix-flow {
  --ix-surface: #1f2937;
  --ix-surface-2: #111827;
  --ix-border: #374151;
  --ix-muted: #6b7280;
  --ix-text: #e5e7eb;
  --ix-green: #64b279;
}

.ix-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.ix-card {
  position: relative;
  width: 116px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--ix-border);
  background: var(--ix-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ix-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ix-text);
  text-align: center;
}

/* --- Stage 1: file --- */
.ix-file {
  position: relative;
  width: 52px;
  height: 64px;
  border-radius: 6px;
  background: var(--ix-surface);
  border: 1.5px solid var(--ix-green);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  animation: ix-float 3s ease-in-out infinite;
}
.ix-file::before { /* folded corner */
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  background: var(--ix-surface-2);
  border-left: 1.5px solid var(--ix-green);
  border-bottom: 1.5px solid var(--ix-green);
  border-bottom-left-radius: 5px;
}
.ix-file .ix-line {
  height: 4px;
  border-radius: 2px;
  background: var(--ix-green);
  opacity: 0.5;
}
.ix-file .ix-line.short { width: 60%; }

/* --- Stage 2: Invofox "thinking" --- */
.ix-logo { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.ix-logo svg { width: 40px; height: auto; position: relative; z-index: 2; }
.ix-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ix-green-2);
  opacity: 0;
  animation: ix-ring 2.4s ease-out infinite;
}
.ix-dots {
  position: absolute;
  bottom: -16px;
  display: flex;
  gap: 5px;
}
.ix-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ix-green);
  display: inline-block;
  animation: ix-bounce 1.2s ease-in-out infinite;
}
.ix-dots i:nth-child(2) { animation-delay: 0.15s; }
.ix-dots i:nth-child(3) { animation-delay: 0.3s; }

/* --- Stage 3: JSON output --- */
.ix-json {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px;
  font-family: "JetBrains-Mono-Regular", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ix-text);
  text-align: left;
}
.ix-json code { white-space: pre; background: none; padding: 0; border: none; font-size: inherit; color: inherit; }
.ix-json .ix-k { color: var(--ix-green); }
.ix-json-line { opacity: 0.55; padding-left: 1.1em; }
.ix-json-line.l1 { animation: ix-line1 6s ease-in-out infinite; }
.ix-json-line.l2 { animation: ix-line2 6s ease-in-out infinite; }
.ix-json-line.l3 { animation: ix-line3 6s ease-in-out infinite; }

/* --- Connectors --- */
.ix-arrow {
  position: relative;
  width: 48px;
  height: 2px;
  background: var(--ix-border);
  flex: 0 0 auto;
  align-self: center;
  margin-bottom: 1.6rem;
}
.ix-arrow::before { /* arrow head */
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid var(--ix-border);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.ix-arrow::after { /* travelling dot */
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--ix-green-2);
  box-shadow: 0 0 8px var(--ix-green-2);
  opacity: 0;
}
.ix-arrow.a1::after { animation: ix-travel 6s ease-in-out infinite; }
.ix-arrow.a2::after { animation: ix-travel2 6s ease-in-out infinite; }

/* --- Sequential highlight per stage --- */
.ix-stage.s1 .ix-card { animation: ix-glow1 6s ease-in-out infinite; }
.ix-stage.s2 .ix-card { animation: ix-glow2 6s ease-in-out infinite; }
.ix-stage.s3 .ix-card { animation: ix-glow3 6s ease-in-out infinite; }

@keyframes ix-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ix-bounce { 0%,80%,100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-6px); opacity: 1; } }
@keyframes ix-ring { 0% { transform: scale(0.7); opacity: 0.8; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes ix-travel { 0%,22% { left: 0; opacity: 0; } 26% { opacity: 1; } 40% { left: 100%; opacity: 1; } 44%,100% { left: 100%; opacity: 0; } }
@keyframes ix-travel2 { 0%,55% { left: 0; opacity: 0; } 60% { opacity: 1; } 74% { left: 100%; opacity: 1; } 78%,100% { left: 100%; opacity: 0; } }

@keyframes ix-glow1 {
  0%, 33%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,0.04); border-color: var(--ix-border); transform: translateY(0); }
  10%, 22% { box-shadow: 0 0 0 3px rgba(19,134,90,0.18), 0 8px 20px rgba(19,134,90,0.18); border-color: var(--ix-green); transform: translateY(-2px); }
}
@keyframes ix-glow2 {
  0%, 33%, 66%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,0.04); border-color: var(--ix-border); transform: translateY(0); }
  43%, 55% { box-shadow: 0 0 0 3px rgba(19,134,90,0.18), 0 8px 20px rgba(19,134,90,0.18); border-color: var(--ix-green); transform: translateY(-2px); }
}
@keyframes ix-glow3 {
  0%, 66%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,0.04); border-color: var(--ix-border); transform: translateY(0); }
  76%, 92% { box-shadow: 0 0 0 3px rgba(19,134,90,0.18), 0 8px 20px rgba(19,134,90,0.18); border-color: var(--ix-green); transform: translateY(-2px); }
}

/* JSON lines reveal during stage 3 window (66%-100%) */
@keyframes ix-line1 { 0%,68% { opacity: 0.2; transform: translateX(-3px); } 74%,100% { opacity: 1; transform: translateX(0); } }
@keyframes ix-line2 { 0%,76% { opacity: 0.2; transform: translateX(-3px); } 82%,100% { opacity: 1; transform: translateX(0); } }
@keyframes ix-line3 { 0%,84% { opacity: 0.2; transform: translateX(-3px); } 90%,100% { opacity: 1; transform: translateX(0); } }

@media (max-width: 640px) {

  .ix-arrow { transform: rotate(90deg); width: 28px; margin: 0.2rem 0; }
  .ix-flow { flex-direction: column; }

}

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

  .ix-flow *, .ix-flow *::after, .ix-flow *::before { animation: none !important; }
  .ix-json-line { opacity: 1 !important; transform: none !important; }
  .ix-arrow::after { display: none; }

}

/* =========================================================================
   "API flag -> toggle" demo  (useSplitter false/true  <->  checkbox)
   Pure CSS. Shows how a boolean API parameter activates a feature.
   ========================================================================= */
.ivf-flag {
  --f-green: #13865a;
  --f-green-2: #00b476;
  --f-surface: #ffffff;
  --f-surface-2: #f9fafb;
  --f-border: #e5e7eb;
  --f-text: #3d4045;
  --f-muted: #9ca3af;
  --f-code: #0f172a;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 1.5rem 1rem;
  margin: 1.5rem 0;
  border: 1px solid var(--f-border);
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(19, 134, 90, 0.06), transparent 60%),
    var(--f-surface-2);
}
.dark .ivf-flag {
  --f-surface: #1f2937;
  --f-surface-2: #111827;
  --f-border: #374151;
  --f-text: #e5e7eb;
  --f-muted: #6b7280;
  --f-code: #e5e7eb;
  --f-green: #64b279;
}

.ivf-flag-side { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; flex: 0 0 auto; }
.ivf-flag-cap { font-size: 0.78rem; font-weight: 600; color: var(--f-muted); }

/* left: API code */
.ivf-flag-code {
  font-family: "JetBrains-Mono-Regular", ui-monospace, monospace;
  font-size: 0.9rem;
  color: var(--f-code);
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}
.ivf-flag-key { color: var(--f-green); }
.ivf-flag-vals { position: relative; display: inline-block; width: 3.4em; height: 1.2em; text-align: left; vertical-align: bottom; }
.ivf-flag-vals .ivf-flag-false,
.ivf-flag-vals .ivf-flag-true { position: absolute; left: 0; top: 0; font-weight: 700; }
.ivf-flag-false { color: #ef4444; animation: ivf-flag-false 4.5s ease-in-out infinite; }
.ivf-flag-true  { color: var(--f-green); animation: ivf-flag-true 4.5s ease-in-out infinite; }

/* connector */
.ivf-flag-link {
  position: relative;
  width: 46px;
  height: 2px;
  background: var(--f-border);
  flex: 0 0 auto;
  align-self: center;
  margin-bottom: 1.6rem;
}
.ivf-flag-link::before {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid var(--f-border);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.ivf-flag-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--f-green-2);
  box-shadow: 0 0 8px var(--f-green-2);
  opacity: 0;
  animation: ivf-flag-travel 4.5s ease-in-out infinite;
}

/* right: checkbox */
.ivf-flag-check { display: inline-flex; align-items: center; gap: 9px; font-size: 0.92rem; font-weight: 600; color: var(--f-text); }
.ivf-flag-box {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  border: 2px solid #cbd5e1;
  background: var(--f-surface);
  animation: ivf-flag-box 4.5s ease-in-out infinite;
}
.ivf-flag-box::after { /* tick */
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  animation: ivf-flag-tick 4.5s ease-in-out infinite;
}

@keyframes ivf-flag-false { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ivf-flag-true  { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ivf-flag-box {
  0%, 40% { background: var(--f-surface); border-color: #cbd5e1; }
  50%, 90% { background: var(--f-green); border-color: var(--f-green); }
  100% { background: var(--f-surface); border-color: #cbd5e1; }
}
@keyframes ivf-flag-tick {
  0%, 42% { opacity: 0; transform: rotate(45deg) scale(0.4); }
  52%, 90% { opacity: 1; transform: rotate(45deg) scale(1); }
  100% { opacity: 0; transform: rotate(45deg) scale(0.4); }
}
@keyframes ivf-flag-travel {
  0%, 42% { left: 0; opacity: 0; }
  46% { opacity: 1; }
  50% { left: 100%; opacity: 1; }
  54%, 100% { left: 100%; opacity: 0; }
}

@media (max-width: 640px) {

  .ivf-flag-link { transform: rotate(90deg); width: 26px; margin: 0.2rem 0; }

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

  .ivf-flag *, .ivf-flag *::after, .ivf-flag *::before { animation: none !important; }
  .ivf-flag-false { opacity: 0 !important; }
  .ivf-flag-true { opacity: 1 !important; }
  .ivf-flag-box { background: var(--f-green) !important; border-color: var(--f-green) !important; }
  .ivf-flag-box::after { opacity: 1 !important; transform: rotate(45deg) scale(1) !important; }

}

/* =========================================================================
   "Corrections feedback loop" demo — circular cycle
   (extract -> correct -> model improves -> repeat). Pure CSS, brand greens.
   ========================================================================= */
.ivf-cycle {
  --f-green: #13865a;
  --f-green-2: #00b476;
  --f-surface: #ffffff;
  --f-surface-2: #f9fafb;
  --f-border: #e5e7eb;
  --f-text: #3d4045;
  --f-muted: #9ca3af;

  position: relative;
  width: 360px;
  max-width: 100%;
  height: 320px;
  margin: 1.75rem auto;
  border: 1px solid var(--f-border);
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(19, 134, 90, 0.06), transparent 60%),
    var(--f-surface-2);
}
.dark .ivf-cycle {
  --f-surface: #1f2937;
  --f-surface-2: #111827;
  --f-border: #374151;
  --f-text: #e5e7eb;
  --f-muted: #6b7280;
  --f-green: #64b279;
}

/* dashed ring + orbiting comet */
.ivf-cycle-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  border: 2px dashed var(--f-border);
}
.ivf-cycle-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  animation: ivf-cycle-spin 6s linear infinite;
}
.ivf-cycle-dot {
  position: absolute;
  top: -6px; left: 50%;
  width: 11px; height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--f-green-2);
  box-shadow: 0 0 10px 2px var(--f-green-2);
}

/* center */
.ivf-cycle-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 110px;
  text-align: center;
  color: var(--f-green);
}
.ivf-cycle-core svg { width: 24px; height: 24px; animation: ivf-cycle-spin 6s linear infinite; }
.ivf-cycle-core span { font-size: 0.74rem; font-weight: 700; color: var(--f-text); }

/* nodes (icon sits on the ring; label outside) */
.ivf-cycle-node { position: absolute; transform: translate(-50%, -50%); width: 54px; height: 54px; }
.ivf-cycle-node.top { top: calc(50% - 100px); left: 50%; }
.ivf-cycle-node.br  { top: calc(50% + 50px); left: calc(50% + 86.6px); }
.ivf-cycle-node.bl  { top: calc(50% + 50px); left: calc(50% - 86.6px); }
.ivf-cycle-ic {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--f-border);
  background: var(--f-surface);
  color: var(--f-green);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.ivf-cycle-ic svg { width: 25px; height: 25px; }
.ivf-cycle-lbl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 116px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--f-text);
  line-height: 1.2;
}
.ivf-cycle-node.top .ivf-cycle-lbl { bottom: calc(100% + 7px); }
.ivf-cycle-node.br .ivf-cycle-lbl,
.ivf-cycle-node.bl .ivf-cycle-lbl { top: calc(100% + 7px); }

.ivf-cycle-node.top .ivf-cycle-ic { animation: ivf-cycle-g-top 6s ease-in-out infinite; }
.ivf-cycle-node.br  .ivf-cycle-ic { animation: ivf-cycle-g-br 6s ease-in-out infinite; }
.ivf-cycle-node.bl  .ivf-cycle-ic { animation: ivf-cycle-g-bl 6s ease-in-out infinite; }

@keyframes ivf-cycle-spin { to { transform: rotate(360deg); } }
@keyframes ivf-cycle-g-top {
  0%, 7% { border-color: var(--f-green); box-shadow: 0 0 0 3px rgba(19,134,90,0.16), 0 6px 16px rgba(19,134,90,0.2); transform: scale(1.08); }
  16%, 88% { border-color: var(--f-border); box-shadow: 0 2px 6px rgba(0,0,0,0.06); transform: scale(1); }
  96%, 100% { border-color: var(--f-green); box-shadow: 0 0 0 3px rgba(19,134,90,0.16), 0 6px 16px rgba(19,134,90,0.2); transform: scale(1.08); }
}
@keyframes ivf-cycle-g-br {
  0%, 22% { border-color: var(--f-border); box-shadow: 0 2px 6px rgba(0,0,0,0.06); transform: scale(1); }
  29%, 38% { border-color: var(--f-green); box-shadow: 0 0 0 3px rgba(19,134,90,0.16), 0 6px 16px rgba(19,134,90,0.2); transform: scale(1.08); }
  46%, 100% { border-color: var(--f-border); box-shadow: 0 2px 6px rgba(0,0,0,0.06); transform: scale(1); }
}
@keyframes ivf-cycle-g-bl {
  0%, 55% { border-color: var(--f-border); box-shadow: 0 2px 6px rgba(0,0,0,0.06); transform: scale(1); }
  62%, 72% { border-color: var(--f-green); box-shadow: 0 0 0 3px rgba(19,134,90,0.16), 0 6px 16px rgba(19,134,90,0.2); transform: scale(1.08); }
  80%, 100% { border-color: var(--f-border); box-shadow: 0 2px 6px rgba(0,0,0,0.06); transform: scale(1); }
}

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

  .ivf-cycle-orbit, .ivf-cycle-core svg, .ivf-cycle-node .ivf-cycle-ic { animation: none !important; }

}

/* =========================================================================
   Documentation tab — ported components (endpoint chips, badges) and the two
   custom diagrams: the Splitter boundary animation and the Import → File →
   Document ingestion hierarchy. Brand greens, dark-mode + reduced-motion aware.
   ========================================================================= */

/* ── Endpoint chip (METHOD + URL) ── */
.ivf-endpoint { display:flex; align-items:center; gap:10px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:11px 16px; margin:12px 0; font-family:'JetBrains Mono', monospace; font-size:13px; color:#111827; overflow-x:auto; }
.dark .ivf-endpoint { background:#111827; border-color:#374151; color:#e5e7eb; }
.ivf-method { display:inline-block; padding:2px 8px; border-radius:5px; font-size:11px; font-weight:700; flex-shrink:0; }
.ivf-method-post { background:#dcfce7; color:#166534; }
.ivf-method-get  { background:#dbeafe; color:#1e40af; }
.ivf-method-put  { background:#fef3c7; color:#92400e; }

/* ── Badges (Required / Optional, etc.) ── */
.ivf-badge { display:inline-block; padding:2px 8px; border-radius:100px; font-size:11px; font-weight:600; }
.ivf-badge-blue { background:#dbeafe; color:#1e40af; }
.ivf-badge-gray { background:#f3f4f6; color:#4b5563; }

/* ── Splitter boundary animation ── */
.ivf-bdemo { margin:20px 0 24px; background:#f9fafb; border:1px solid #bbf7d0; border-radius:12px; padding:24px 24px 20px; overflow:hidden; position:relative; }
.dark .ivf-bdemo { background:#111827; border-color:#1f4d39; }
.ivf-bdemo-cap { font-size:13px; color:#6b7280; margin-bottom:20px; position:relative; }
.dark .ivf-bdemo-cap { color:#9ca3af; }
.ivf-bstage { display:flex; align-items:flex-start; justify-content:center; position:relative; }
.ivf-bgroup-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
.ivf-bgroup { display:flex; gap:6px; align-items:center; }
.ivf-bpage { width:76px; height:96px; background:#fff; border:1px solid #d1d5db; border-radius:5px; position:relative; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.dark .ivf-bpage { background:#1f2937; border-color:#4b5563; }
.ivf-bpage::before { content:''; position:absolute; left:10px; right:20px; top:12px; height:4px; background:#d1d5db; border-radius:2px; }
.ivf-bpage::after { content:''; position:absolute; left:10px; right:10px; top:24px; height:2px; background:#e5e7eb; border-radius:1px; box-shadow:0 7px 0 #e5e7eb, 0 14px 0 #e5e7eb, 0 21px 0 #e5e7eb, 0 28px 0 #e5e7eb; }
.dark .ivf-bpage::before { background:#4b5563; }
.dark .ivf-bpage::after { background:#374151; box-shadow:0 7px 0 #374151, 0 14px 0 #374151, 0 21px 0 #374151, 0 28px 0 #374151; }
.ivf-bsep { width:16px; display:flex; align-items:center; justify-content:center; height:96px; flex-shrink:0; position:relative; }
.ivf-bsep::before { content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:0; border-left:2px dashed #13865a; opacity:0; animation:ivf-sepReveal 4.5s ease-in-out infinite; }
.dark .ivf-bsep::before { border-left-color:#64b279; }
.ivf-bgroup-label { font-size:10px; font-weight:600; color:#13865a; letter-spacing:0.05em; opacity:0; animation:ivf-labelReveal 4.5s ease-in-out infinite; }
.dark .ivf-bgroup-label { color:#64b279; }
.ivf-bscan { position:absolute; top:0; bottom:0; width:2px; background:linear-gradient(180deg, transparent 0%, #00b476 40%, #00b476 60%, transparent 100%); opacity:0; pointer-events:none; animation:ivf-scanAcross 4.5s ease-in-out infinite; }
@keyframes ivf-sepReveal   { 0%{opacity:0} 35%{opacity:0} 50%{opacity:1} 80%{opacity:1} 92%{opacity:0} 100%{opacity:0} }
@keyframes ivf-labelReveal { 0%{opacity:0} 50%{opacity:0} 62%{opacity:1} 80%{opacity:1} 92%{opacity:0} 100%{opacity:0} }
@keyframes ivf-scanAcross  { 0%{left:0%;opacity:0} 4%{opacity:0.7} 33%{left:100%;opacity:0.7} 36%{left:100%;opacity:0} 100%{left:100%;opacity:0} }

/* ── Ingestion hierarchy: Import → File → Document ── */
.ivf-ing { display:flex; flex-direction:column; gap:14px; position:relative; }
.ivf-ing-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ivf-ing-group { display:flex; flex-direction:column; gap:14px; }
.ivf-ing-docs { display:flex; gap:8px; }
.ivf-ing-cell { display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; }
.ivf-ing-card { width:44px; height:56px; background:#fff; border:1px solid #d1d5db; border-radius:4px; position:relative; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.dark .ivf-ing-card { background:#1f2937; border-color:#4b5563; }
.ivf-ing-card::before { content:''; position:absolute; left:7px; right:13px; top:8px; height:3px; background:#d1d5db; border-radius:2px; }
.ivf-ing-card::after { content:''; position:absolute; left:7px; right:7px; top:16px; height:2px; background:#e5e7eb; border-radius:1px; box-shadow:0 5px 0 #e5e7eb, 0 10px 0 #e5e7eb, 0 15px 0 #e5e7eb; }
.dark .ivf-ing-card::before { background:#4b5563; }
.dark .ivf-ing-card::after { background:#374151; box-shadow:0 5px 0 #374151, 0 10px 0 #374151, 0 15px 0 #374151; }
.ivf-ing-card.ivf-green { border-color:#13865a; }
.dark .ivf-ing-card.ivf-green { border-color:#64b279; }
.ivf-ing-import { height:56px; display:flex; align-items:center; justify-content:center; padding:0 16px; border:1.5px solid #13865a; border-radius:8px; background:#f0fdf4; color:#13865a; font-weight:700; font-size:12px; flex-shrink:0; }
.dark .ivf-ing-import { background:rgba(100,178,121,0.12); border-color:#64b279; color:#64b279; }
.ivf-ing-lbl { font-size:10px; font-weight:600; color:#6b7280; letter-spacing:0.03em; white-space:nowrap; }
.ivf-ing-lbl.ivf-green { color:#13865a; }
.dark .ivf-ing-lbl { color:#9ca3af; }
.dark .ivf-ing-lbl.ivf-green { color:#64b279; }
.ivf-ing-arrow { color:#13865a; font-size:18px; flex-shrink:0; }
.dark .ivf-ing-arrow { color:#64b279; }
.ivf-ing-note { font-size:11.5px; color:#6b7280; position:relative; }
.dark .ivf-ing-note { color:#9ca3af; }
.ivf-ing-divider { border-top:1px dashed #d1d5db; margin:2px 0; position:relative; }
.dark .ivf-ing-divider { border-color:#4b5563; }

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

  .ivf-bsep::before, .ivf-bgroup-label { animation:none; opacity:1; }
  .ivf-bscan { animation:none; opacity:0; }

}

/* ── Glossary category dividers (eyebrow label + fading rule) ── */
.ivf-gloss-cat { display:flex; align-items:center; gap:12px; margin:44px 0 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#13865a; }
.ivf-gloss-cat::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(19,134,90,0.35), transparent); }
.dark .ivf-gloss-cat { color:#64b279; }
.dark .ivf-gloss-cat::after { background:linear-gradient(90deg, rgba(100,178,121,0.40), transparent); }

/* ── Right-sidebar self-service CTA (injected below the "On this page" TOC) ── */
.ivf-toc-cta { margin-top: 22px; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; background: #ffffff; font-family: system-ui, sans-serif; }
.dark .ivf-toc-cta { border-color: #374151; background: #1f2937; }
.ivf-toc-cta-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: #111827; }
.dark .ivf-toc-cta-eyebrow { color: #f3f4f6; }
.ivf-toc-cta-eyebrow svg { width: 18px; height: 18px; flex: 0 0 18px; }
.ivf-toc-cta h4 { font-size: 14px; font-weight: 700; color: #111827; margin: 0 0 6px; }
.dark .ivf-toc-cta h4 { color: #f3f4f6; }
.ivf-toc-cta p { font-size: 12px; color: #6b7280; line-height: 1.5; margin: 0 0 12px; }
.dark .ivf-toc-cta p { color: #9ca3af; }
.ivf-toc-cta-btn { display: block; text-align: center; background: #13865a; color: #fff; font-size: 13px; font-weight: 700; padding: 9px 12px; border-radius: 8px; text-decoration: none; transition: background 0.15s ease; }
.ivf-toc-cta-btn:hover { background: #0f6f4a; color: #fff; }
.ivf-toc-cta-btn:focus-visible { background: #0f6f4a; color: #fff; outline: none;
}
.dark .ivf-toc-cta-btn { background: #64b279; color: #0d0e11; }
.dark .ivf-toc-cta-btn:hover { background: #7cc491; color: #0d0e11; }
.dark .ivf-toc-cta-btn:focus-visible { background: #7cc491; color: #0d0e11; outline: none;
}