@font-face {
    font-family: 'Open Sans';
    src: url('/_fern-files/itential.docs.buildwithfern.com/177359dff5017066301cff7264b86851b60b68628636255015d1db37b54b344d/docs/assets/fonts/OpenSans-VariableFont_wdth,wght.ttf') format('ttf');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('/_fern-files/itential.docs.buildwithfern.com/4b8ef9ed255ebe7341aa566554c0f3e87ee10ce06d2085f07ccf66f41ef96c28/docs/assets/fonts/InterTight-VariableFont_wght.ttf') format('ttf');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Mono';
    src: url('/_fern-files/itential.docs.buildwithfern.com/e03013e0baa5690a803c188da2214d920c3245b25ad78421ecc8ae86cd842ae9/docs/assets/fonts/roboto-mono-v31-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto Mono';
    src: url('/_fern-files/itential.docs.buildwithfern.com/ce7027efa5c894e8b244b0ca05ec121b6a85655957afd9c76c59b56910de7d4e/docs/assets/fonts/roboto-mono-v31-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 800px;
  --sidebar-width: 288px;
  --page-width: 1600px;
  --logo-height: 30px;
  --font-body: 'Open Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Roboto', 'Open Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  /* Low-specificity (0,1,0) block: safe only because the library sets no :root
     default for these. If you add a var here (or to the theme block below), add
     it to LOADER_LOW_SPECIFICITY_VARS in theme-css-var-collisions.test.ts. */
  --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: #f6f8fa;
  --accent-2: #eff4f8;
  --accent-3: #e2edf9;
  --accent-4: #d3e6f8;
  --accent-5: #c3dbf4;
  --accent-6: #aeceee;
  --accent-7: #95bde3;
  --accent-8: #70a5d8;
  --accent-9: #005996;
  --accent-10: #004985;
  --accent-11: #1766a4;
  --accent-12: #193956;

  --accent-a1: #2f95fb05;
  --accent-a2: #117bd00c;
  --accent-a3: #0676f019;
  --accent-a4: #027bee28;
  --accent-a5: #0470e039;
  --accent-a6: #016ad24e;
  --accent-a7: #0365c268;
  --accent-a8: #0060bc8d;
  --accent-a9: #005996;
  --accent-a10: #004985;
  --accent-a11: #00579be8;
  --accent-a12: #002444e6;

  --accent-contrast: #fff;
  --accent-surface: #ecf3f8cc;
  --accent-indicator: #005996;
  --accent-track: #005996;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(97.8% 0.0035 248.1);
      --accent-2: oklch(96.4% 0.0082 248.1);
      --accent-3: oklch(94.2% 0.0193 248.1);
      --accent-4: oklch(91.6% 0.0314 248.1);
      --accent-5: oklch(88.2% 0.0431 248.1);
      --accent-6: oklch(84% 0.0559 248.1);
      --accent-7: oklch(78.3% 0.0697 248.1);
      --accent-8: oklch(70.6% 0.0935 248.1);
      --accent-9: oklch(45.3% 0.1223 248.1);
      --accent-10: oklch(39.9% 0.1223 248.1);
      --accent-11: oklch(49.6% 0.1223 248.1);
      --accent-12: oklch(33.7% 0.064 248.1);

      --accent-a1: color(display-p3 0 0.4902 0.9804 / 0.016);
      --accent-a2: color(display-p3 0 0.3922 0.7843 / 0.04);
      --accent-a3: color(display-p3 0 0.4039 0.8941 / 0.088);
      --accent-a4: color(display-p3 0 0.3922 0.8706 / 0.14);
      --accent-a5: color(display-p3 0 0.3529 0.8235 / 0.2);
      --accent-a6: color(display-p3 0 0.3529 0.7725 / 0.28);
      --accent-a7: color(display-p3 0 0.3294 0.698 / 0.372);
      --accent-a8: color(display-p3 0 0.3137 0.6863 / 0.504);
      --accent-a9: color(display-p3 0 0.2392 0.498 / 0.856);
      --accent-a10: color(display-p3 0 0.1961 0.4471 / 0.888);
      --accent-a11: color(display-p3 0 0.251 0.5373 / 0.804);
      --accent-a12: color(display-p3 0 0.1059 0.2314 / 0.868);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9333 0.9529 0.9725 / 0.8);
      --accent-indicator: oklch(45.3% 0.1223 248.1);
      --accent-track: oklch(45.3% 0.1223 248.1);
    }
  }
}


.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: #080205;
  --accent-2: #200e17;
  --accent-3: #3a1128;
  --accent-4: #510835;
  --accent-5: #601141;
  --accent-6: #711f4f;
  --accent-7: #8b2e63;
  --accent-8: #b23b80;
  --accent-9: #ff52b7;
  --accent-10: #f144ab;
  --accent-11: #ff85cd;
  --accent-12: #ffcfe7;

  --accent-a1: #ff400008;
  --accent-a2: #ff700020;
  --accent-a3: #ff4b4a3a;
  --accent-a4: #ff1a6751;
  --accent-a5: #ff2e7b60;
  --accent-a6: #ff468d71;
  --accent-a7: #ff559c8b;
  --accent-a8: #ff55abb2;
  --accent-a9: #ff52b7;
  --accent-a10: #ff48b3f1;
  --accent-a11: #ff85cd;
  --accent-a12: #ffcfe7;

  --accent-contrast: #fff;
  --accent-surface: #401c1180;
  --accent-indicator: #ff52b7;
  --accent-track: #ff52b7;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(10.6% 0.0193 348.6);
      --accent-2: oklch(19.3% 0.0337 348.6);
      --accent-3: oklch(25.3% 0.0705 348.6);
      --accent-4: oklch(29.4% 0.1124 348.6);
      --accent-5: oklch(33.5% 0.1211 348.6);
      --accent-6: oklch(38.6% 0.125 348.6);
      --accent-7: oklch(45.6% 0.1387 348.6);
      --accent-8: oklch(54.4% 0.1692 348.6);
      --accent-9: oklch(70.5% 0.2286 348.6);
      --accent-10: oklch(66.8% 0.2286 348.6);
      --accent-11: oklch(78.8% 0.2138 348.6);
      --accent-12: oklch(90.6% 0.067 348.6);

      --accent-a1: color(display-p3 0.9804 0.2824 0 / 0.028);
      --accent-a2: color(display-p3 1 0.502 0 / 0.118);
      --accent-a3: color(display-p3 1 0.3804 0.3176 / 0.208);
      --accent-a4: color(display-p3 1 0.2157 0.4353 / 0.291);
      --accent-a5: color(display-p3 1 0.2745 0.5216 / 0.346);
      --accent-a6: color(display-p3 1 0.3569 0.5804 / 0.408);
      --accent-a7: color(display-p3 1 0.4157 0.651 / 0.502);
      --accent-a8: color(display-p3 1 0.4118 0.702 / 0.648);
      --accent-a9: color(display-p3 1 0.4039 0.7529 / 0.926);
      --accent-a10: color(display-p3 1 0.3686 0.7373 / 0.871);
      --accent-a11: color(display-p3 1 0.5804 0.8353 / 0.938);
      --accent-a12: color(display-p3 1 0.8471 0.9255 / 0.969);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.2275 0.1176 0.0706 / 0.5);
      --accent-indicator: oklch(70.5% 0.2286 348.6);
      --accent-track: oklch(70.5% 0.2286 348.6);
    }
  }
}


.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(0, 89, 150, 1);
  --background: rgba(250, 250, 250, 1);
  --border: rgba(196, 212, 232, 1);
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #fafafa;
}

.dark {
  color-scheme: dark;
  --accent: rgba(255, 82, 183, 1);
  --background: rgba(0, 0, 30, 1);
  --border: rgba(48, 54, 61, 1);
  --sidebar-background: initial;
  --header-background: color-mix(in srgb, var(--background), transparent 30%);
  --card-background: initial;
  --theme-color: #00001e;
}

/* Style the filter dropdown button */
.fern-filter-dropdown-button {
  border-color: var(--accent-a7);
  background-color: var(--accent-a2);
}

.fern-filter-dropdown-button:hover {
  border-color: var(--accent-a9);
  background-color: var(--accent-a3);
}
/* Make selected badges use your accent color */
.fern-filter-badge.fern-filter-badge-selected {
  background-color: var(--accent-a9);
  color: var(--accent-contrast);
  border-color: var(--accent-a9);
}
/* Style unselected badges with muted appearance */
.fern-filter-badge.fern-filter-badge-unselected {
  background-color: transparent;
  color: var(--grayscale-a10);
  border-color: var(--grayscale-a6);
}

/* Light mode — strip Fern's accent-derived background gradient, force white */
html:not(.dark) body,
html:not(.dark) main,
html:not(.dark) .fern-layout,
html:not(.dark) #fern-main,
html:not(.dark) .fern-main-content,
html:not(.dark) [data-fern-page] {
  background: #ffffff !important;
  background-image: none !important;
}

/* Light mode font colors */
body {
  color: #00001E;
}

/* Light mode — ensure prose body text is fully legible on #f5f8fd background */
:not(.dark) .prose,
:not(.dark) .prose p,
:not(.dark) .prose li,
:not(.dark) .prose td,
:not(.dark) .prose th,
:not(.dark) .prose blockquote,
:not(.dark) .prose strong,
:not(.dark) .prose em,
:not(.dark) .prose dd,
:not(.dark) .prose dt {
  color: #00001E;
}

/* Light mode headings */
:not(.dark) .prose h1,
:not(.dark) .prose h2,
:not(.dark) .prose h3,
:not(.dark) .prose h4,
:not(.dark) .prose h5,
:not(.dark) .prose h6 {
  color: #00001E;
}

/* Light mode — sidebar navigation text */
:not(.dark) .fern-sidebar-item,
:not(.dark) .fern-sidebar-heading,
:not(.dark) .fern-sidebar-group-title,
:not(.dark) nav a,
:not(.dark) aside a {
  color: #1a1a3e;
}

/* Light mode — secondary / muted text */
:not(.dark) .fern-callout,
:not(.dark) figcaption,
:not(.dark) .fern-step-name,
:not(.dark) .fern-step-content p {
  color: #2d2d50;
}

/* Light mode — inline code contrast */
:not(.dark) .prose code:not(pre code) {
  color: #00001E;
  background-color: rgba(0, 0, 30, 0.07);
}

/* Dark mode font colors */
.dark body {
  color: #ffffff;
}

/* Dark mode — ensure prose body text is fully legible on #00001E background */
.dark .prose,
.dark .prose p,
.dark .prose li,
.dark .prose td,
.dark .prose th,
.dark .prose blockquote,
.dark .prose strong,
.dark .prose em,
.dark .prose dd,
.dark .prose dt,
.dark [data-theme="dark"] p,
.dark [data-theme="dark"] li {
  color: #f0f4ff;
}

/* Dark mode headings */
.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
  color: #ffffff;
}

/* Dark mode — sidebar navigation text */
.dark .fern-sidebar-item,
.dark .fern-sidebar-heading,
.dark .fern-sidebar-group-title,
.dark nav a,
.dark aside a {
  color: #e2e8f0;
}

/* Dark mode — secondary / muted text (callouts, captions, labels) */
.dark .fern-callout,
.dark figcaption,
.dark .fern-step-name,
.dark .fern-step-content p {
  color: #cbd5e1;
}

/* Dark mode — inline code contrast */
.dark .prose code:not(pre code) {
  color: #f0f4ff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Link font color */
.prose a.fern-mdx-link,
.fern-mdx-link {
  color: #0066CC !important;
}

.dark .prose a.fern-mdx-link,
.dark .fern-mdx-link {
  color: #5CA7FF !important;
}

/* Announcement banner links — restore Fern's built-in text-inherit so link
   color matches the banner's accent-contrast text instead of the global
   link blue, which is illegible against the blue accent background */
#fern-announcement .fern-mdx-link {
  color: inherit !important;
}

.fern-product-selector {
  font-size: 16px;
}

.fern-version-selector,
.fern-version-selector * {
  font-size: 16px !important;
}

@media (min-width: 1024px) {
  .fern-product-selector-radio-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0;
  }
}

/* Light mode - pink icons */
:not(.dark) .fern-card-icon,
:not(.dark) .fern-card svg,
:not(.dark) .fern-card .fern-icon,
:not(.dark) .fern-product-selector-radio-group svg,
:not(.dark) .fern-product-selector-radio-group svg path,
:not(.dark) .fern-product-selector-radio-group [class*="icon"] {
  color: #FF0095 !important;
  fill: #FF0095 !important;
}

/* Dark mode icons */
.dark .fern-card-icon,
.dark .fern-card svg,
.dark .fern-card .fern-icon,
.dark .fern-product-selector-radio-group svg,
.dark .fern-product-selector-radio-group svg path,
.dark .fern-product-selector-radio-group [class*="icon"] {
  color: #0099FF !important;
  fill: #0099FF !important;
}

/* Tab title legibility */
.fern-tabs .fern-tab-button,
.fern-tab-group .fern-tab-title,
[role="tab"],
button[role="tab"],
.fern-tabs [role="tab"],
.fern-tabs button,
[role="tablist"] button,
[role="tablist"] [role="tab"] {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* Tab button text color — light mode */
:not(.dark) [role="tab"],
:not(.dark) button[role="tab"],
:not(.dark) .fern-tabs .fern-tab-button,
:not(.dark) [role="tablist"] button {
  color: #00001E !important;
}

/* Tab button text color — dark mode */
.dark [role="tab"],
.dark button[role="tab"],
.dark .fern-tabs .fern-tab-button,
.dark [role="tablist"] button {
  color: #e2e8f0 !important;
}

/* Tab panel content — light mode */
:not(.dark) [role="tabpanel"],
:not(.dark) [role="tabpanel"] p,
:not(.dark) [role="tabpanel"] li,
:not(.dark) [role="tabpanel"] td,
:not(.dark) [role="tabpanel"] th {
  color: #00001E;
}

/* Tab panel content — dark mode */
.dark [role="tabpanel"],
.dark [role="tabpanel"] p,
.dark [role="tabpanel"] li,
.dark [role="tabpanel"] td,
.dark [role="tabpanel"] th {
  color: #f0f4ff;
}
/**
 * Itential Brand Mermaid Diagram Styles
 * For use with Fern documentation sites
 * 
 * Brand Colors:
 * - Navy (Primary): #00001E
 * - Bright Blue: #0099FF
 * - Pink: #FF0095
 * - Green: #71DE3C
 * - Purple: #AD0AFD
 * - Orange: #F36B21
 * 
 * Typography:
 * - Bebas Neue (headlines)
 * - Roboto (secondary)
 * - Open Sans (body)
 */

/* ============================================
   MERMAID BASE STYLES
   ============================================ */

.mermaid {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: transparent;
}

/* ============================================
   FLOWCHART STYLES
   ============================================ */

/* Node styles - Default rectangles */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
  fill: #00001E;
  stroke: #0099FF;
  stroke-width: 2px;
}

/* Node text */
.mermaid .node .label,
.mermaid .nodeLabel {
  font-family: 'Roboto', 'Open Sans', sans-serif;
  font-weight: 500;
  color: #ffffff;
  fill: #ffffff;
}

/* Primary nodes - Navy background with blue border */
.mermaid .node.default > rect,
.mermaid .node.default > polygon {
  fill: #00001E;
  stroke: #0099FF;
  stroke-width: 2px;
}

/* Special node classes for variety */
.mermaid .node.blue > rect,
.mermaid .node.blue > polygon {
  fill: #0099FF;
  stroke: #00001E;
}

.mermaid .node.pink > rect,
.mermaid .node.pink > polygon {
  fill: #FF0095;
  stroke: #00001E;
}

.mermaid .node.green > rect,
.mermaid .node.green > polygon {
  fill: #71DE3C;
  stroke: #00001E;
}

.mermaid .node.purple > rect,
.mermaid .node.purple > polygon {
  fill: #AD0AFD;
  stroke: #00001E;
}

.mermaid .node.orange > rect,
.mermaid .node.orange > polygon {
  fill: #F36B21;
  stroke: #00001E;
}

/* Edge/Arrow styles */
.mermaid .edgePath .path,
.mermaid .flowchart-link {
  stroke: #0099FF;
  stroke-width: 2px;
}

.mermaid .edgePath marker path,
.mermaid .marker {
  fill: #0099FF;
  stroke: #0099FF;
}

/* Edge labels */
.mermaid .edgeLabel {
  background-color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #00001E;
}

.mermaid .edgeLabel rect {
  fill: #ffffff;
  opacity: 0.9;
}

.mermaid .edgeLabel span {
  color: #00001E;
  fill: #00001E;
}

/* Cluster/Subgraph styles */
.mermaid .cluster rect {
  fill: rgba(0, 153, 255, 0.08);
  stroke: #0099FF;
  stroke-width: 1px;
  stroke-dasharray: 5, 5;
}

.mermaid .cluster span,
.mermaid .cluster .nodeLabel {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  color: #00001E;
  fill: #00001E;
}

/* ============================================
   SEQUENCE DIAGRAM STYLES
   ============================================ */

/* Actor boxes */
.mermaid .actor {
  fill: #00001E;
  stroke: #0099FF;
  stroke-width: 2px;
}

/* Actor text */
.mermaid .actor-man,
.mermaid text.actor {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  fill: #ffffff;
}

/* Actor lines */
.mermaid .actor-line {
  stroke: #0099FF;
  stroke-width: 1px;
  stroke-dasharray: 3, 3;
}

/* Sequence messages/arrows */
.mermaid .messageLine0,
.mermaid .messageLine1 {
  stroke: #0099FF;
  stroke-width: 2px;
}

/* Dashed message lines */
.mermaid .messageLine1 {
  stroke-dasharray: 5, 5;
}

/* Message text */
.mermaid .messageText {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  fill: #00001E;
}

/* Sequence numbers */
.mermaid .sequenceNumber {
  fill: #ffffff;
}

/* Loop/Alt boxes */
.mermaid .loopText,
.mermaid .labelBox {
  fill: rgba(0, 153, 255, 0.1);
  stroke: #0099FF;
}

.mermaid .loopText tspan,
.mermaid .labelText {
  font-family: 'Roboto', sans-serif;
  fill: #00001E;
}

/* Activation boxes */
.mermaid .activation0,
.mermaid .activation1,
.mermaid .activation2 {
  fill: rgba(0, 153, 255, 0.2);
  stroke: #0099FF;
}

/* Notes */
.mermaid .note {
  fill: #F36B21;
  stroke: #00001E;
  stroke-width: 1px;
}

.mermaid .noteText {
  font-family: 'Open Sans', sans-serif;
  fill: #ffffff;
}

/* ============================================
   CLASS DIAGRAM STYLES
   ============================================ */

/* Class boxes */
.mermaid .classGroup rect {
  fill: #00001E;
  stroke: #0099FF;
  stroke-width: 2px;
}

/* Class title */
.mermaid .classGroup .title {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  fill: #ffffff;
}

/* Class members text */
.mermaid .classGroup .classText,
.mermaid .classGroup line {
  fill: #ffffff;
  stroke: rgba(255, 255, 255, 0.3);
}

/* Divider line */
.mermaid .classGroup line {
  stroke: #0099FF;
}

/* Relationship lines */
.mermaid .relation {
  stroke: #0099FF;
  stroke-width: 2px;
}

/* Composition/Aggregation markers */
.mermaid .composition,
.mermaid .aggregation {
  fill: #0099FF;
  stroke: #0099FF;
}

/* ============================================
   STATE DIAGRAM STYLES
   ============================================ */

/* States */
.mermaid .stateGroup rect,
.mermaid .statediagram-state rect {
  fill: #00001E;
  stroke: #0099FF;
  stroke-width: 2px;
  rx: 5px;
  ry: 5px;
}

/* State text */
.mermaid .stateGroup text,
.mermaid .statediagram-state text {
  font-family: 'Roboto', sans-serif;
  fill: #ffffff;
}

/* Start/End nodes */
.mermaid .start-state,
.mermaid .statediagram-cluster circle {
  fill: #71DE3C;
  stroke: #00001E;
}

.mermaid .end-state-outer {
  fill: #FF0095;
  stroke: #00001E;
}

.mermaid .end-state-inner {
  fill: #00001E;
}

/* Transitions */
.mermaid .transition {
  stroke: #0099FF;
  stroke-width: 2px;
}

/* Composite states */
.mermaid .statediagram-cluster rect {
  fill: rgba(0, 153, 255, 0.08);
  stroke: #0099FF;
  stroke-dasharray: 5, 5;
}

/* ============================================
   ENTITY RELATIONSHIP DIAGRAM STYLES
   ============================================ */

/* Entities */
.mermaid .er.entityBox {
  fill: #00001E;
  stroke: #0099FF;
  stroke-width: 2px;
}

/* Entity labels */
.mermaid .er.entityLabel {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  fill: #ffffff;
}

/* Attribute boxes */
.mermaid .er.attributeBoxOdd,
.mermaid .er.attributeBoxEven {
  fill: rgba(0, 153, 255, 0.1);
  stroke: #0099FF;
}

/* Relationship lines */
.mermaid .er.relationshipLine {
  stroke: #0099FF;
  stroke-width: 2px;
}

/* Relationship labels */
.mermaid .er.relationshipLabel {
  font-family: 'Open Sans', sans-serif;
  fill: #00001E;
}

/* ============================================
   GANTT CHART STYLES
   ============================================ */

/* Grid lines */
.mermaid .grid .tick line {
  stroke: rgba(0, 0, 30, 0.1);
}

.mermaid .grid path {
  stroke-width: 0;
}

/* Section backgrounds - cycling through brand colors */
.mermaid .section0 {
  fill: rgba(0, 153, 255, 0.15);
}

.mermaid .section1 {
  fill: rgba(173, 10, 253, 0.1);
}

.mermaid .section2 {
  fill: rgba(113, 222, 60, 0.1);
}

/* Task bars */
.mermaid .task0,
.mermaid .task1,
.mermaid .task2,
.mermaid .task3 {
  stroke-width: 0;
}

.mermaid .task0 {
  fill: #0099FF;
}

.mermaid .task1 {
  fill: #AD0AFD;
}

.mermaid .task2 {
  fill: #71DE3C;
}

.mermaid .task3 {
  fill: #F36B21;
}

/* Active tasks */
.mermaid .activeTask0,
.mermaid .activeTask1,
.mermaid .activeTask2,
.mermaid .activeTask3 {
  stroke: #00001E;
  stroke-width: 2px;
}

/* Done tasks */
.mermaid .doneTask0,
.mermaid .doneTask1,
.mermaid .doneTask2 {
  fill: #00001E;
  stroke: #0099FF;
}

/* Critical tasks */
.mermaid .critTask0,
.mermaid .critTask1,
.mermaid .critTask2 {
  fill: #FF0095;
  stroke: #00001E;
}

/* Task text */
.mermaid .taskText,
.mermaid .taskTextOutsideRight,
.mermaid .taskTextOutsideLeft {
  font-family: 'Open Sans', sans-serif;
  fill: #ffffff;
}

/* Section titles */
.mermaid .sectionTitle {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  fill: #00001E;
}

/* Today marker */
.mermaid .today {
  stroke: #FF0095;
  stroke-width: 2px;
  stroke-dasharray: 3, 3;
}

/* ============================================
   PIE CHART STYLES
   ============================================ */

/* Pie slices - using brand secondary colors */
.mermaid .pieCircle:nth-child(1) { fill: #0099FF; }
.mermaid .pieCircle:nth-child(2) { fill: #FF0095; }
.mermaid .pieCircle:nth-child(3) { fill: #71DE3C; }
.mermaid .pieCircle:nth-child(4) { fill: #AD0AFD; }
.mermaid .pieCircle:nth-child(5) { fill: #F36B21; }
.mermaid .pieCircle:nth-child(6) { fill: #00001E; }

/* Pie slice outlines */
.mermaid .pieCircle {
  stroke: #ffffff;
  stroke-width: 2px;
}

/* Pie labels */
.mermaid .pieLabel {
  font-family: 'Open Sans', sans-serif;
  fill: #00001E;
}

/* Pie title */
.mermaid .pieTitleText {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  fill: #00001E;
}

/* Legend */
.mermaid .legend text {
  font-family: 'Open Sans', sans-serif;
  fill: #00001E;
}

/* ============================================
   MINDMAP STYLES
   ============================================ */

/* Root node */
.mermaid .mindmap-node .node-bkg {
  fill: #00001E;
  stroke: #0099FF;
  stroke-width: 2px;
}

/* First level nodes */
.mermaid .mindmap-node.section-0 .node-bkg { fill: #0099FF; stroke: #00001E; }
.mermaid .mindmap-node.section-1 .node-bkg { fill: #FF0095; stroke: #00001E; }
.mermaid .mindmap-node.section-2 .node-bkg { fill: #71DE3C; stroke: #00001E; }
.mermaid .mindmap-node.section-3 .node-bkg { fill: #AD0AFD; stroke: #00001E; }
.mermaid .mindmap-node.section-4 .node-bkg { fill: #F36B21; stroke: #00001E; }

/* Node text */
.mermaid .mindmap-node text {
  font-family: 'Roboto', sans-serif;
  fill: #ffffff;
}

/* Edges */
.mermaid .mindmap-edge {
  stroke: #0099FF;
  stroke-width: 2px;
}

/* ============================================
   TIMELINE STYLES
   ============================================ */

/* Period sections */
.mermaid .timeline-section-0 { fill: rgba(0, 153, 255, 0.15); }
.mermaid .timeline-section-1 { fill: rgba(173, 10, 253, 0.1); }
.mermaid .timeline-section-2 { fill: rgba(113, 222, 60, 0.1); }

/* Timeline items */
.mermaid .timeline-task {
  fill: #00001E;
  stroke: #0099FF;
  stroke-width: 2px;
}

/* Timeline text */
.mermaid .timeline-task-text {
  font-family: 'Open Sans', sans-serif;
  fill: #ffffff;
}

/* ============================================
   JOURNEY/USER JOURNEY STYLES
   ============================================ */

/* Section backgrounds */
.mermaid .journey-section {
  fill: rgba(0, 153, 255, 0.08);
}

/* Task boxes based on score */
.mermaid .journey-task {
  stroke: #00001E;
  stroke-width: 2px;
}

/* Positive experience (score 4-5) */
.mermaid .journey-task-5,
.mermaid .journey-task-4 {
  fill: #71DE3C;
}

/* Neutral experience (score 3) */
.mermaid .journey-task-3 {
  fill: #F36B21;
}

/* Negative experience (score 1-2) */
.mermaid .journey-task-2,
.mermaid .journey-task-1 {
  fill: #FF0095;
}

/* Journey text */
.mermaid .journey-section-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  fill: #00001E;
}

.mermaid .journey-task-text {
  font-family: 'Open Sans', sans-serif;
  fill: #00001E;
}

/* ============================================
   QUADRANT CHART STYLES
   ============================================ */

/* Quadrant backgrounds */
.mermaid .quadrant-1 { fill: rgba(0, 153, 255, 0.15); }
.mermaid .quadrant-2 { fill: rgba(113, 222, 60, 0.1); }
.mermaid .quadrant-3 { fill: rgba(243, 107, 33, 0.1); }
.mermaid .quadrant-4 { fill: rgba(173, 10, 253, 0.1); }

/* Axis lines */
.mermaid .quadrant-axis {
  stroke: #00001E;
  stroke-width: 2px;
}

/* Points */
.mermaid .quadrant-point {
  fill: #0099FF;
  stroke: #00001E;
  stroke-width: 2px;
}

/* Labels */
.mermaid .quadrant-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  fill: #00001E;
}

/* ============================================
   GIT GRAPH STYLES
   ============================================ */

/* Branch colors */
.mermaid .branch-label-0 { fill: #0099FF; }
.mermaid .branch-label-1 { fill: #FF0095; }
.mermaid .branch-label-2 { fill: #71DE3C; }
.mermaid .branch-label-3 { fill: #AD0AFD; }
.mermaid .branch-label-4 { fill: #F36B21; }

/* Commit nodes */
.mermaid .commit-id,
.mermaid .commit {
  font-family: 'Open Sans', monospace;
  fill: #00001E;
}

.mermaid .commit-highlight {
  fill: #0099FF;
  stroke: #00001E;
}

/* Branch lines */
.mermaid .branch-0 { stroke: #0099FF; }
.mermaid .branch-1 { stroke: #FF0095; }
.mermaid .branch-2 { stroke: #71DE3C; }
.mermaid .branch-3 { stroke: #AD0AFD; }
.mermaid .branch-4 { stroke: #F36B21; }

/* Tag labels */
.mermaid .tag-label {
  fill: #F36B21;
  stroke: #00001E;
  font-family: 'Roboto', sans-serif;
}

/* ============================================
   REQUIREMENT DIAGRAM STYLES
   ============================================ */

/* Requirement boxes */
.mermaid .requirement rect {
  fill: #00001E;
  stroke: #0099FF;
  stroke-width: 2px;
}

.mermaid .requirement text {
  font-family: 'Roboto', sans-serif;
  fill: #ffffff;
}

/* Element boxes */
.mermaid .element rect {
  fill: rgba(0, 153, 255, 0.15);
  stroke: #0099FF;
  stroke-width: 2px;
}

.mermaid .element text {
  fill: #00001E;
}

/* Relationship lines */
.mermaid .relationship {
  stroke: #0099FF;
  stroke-width: 2px;
}

/* ============================================
   C4 DIAGRAM STYLES
   ============================================ */

/* Person */
.mermaid .person {
  fill: #00001E;
  stroke: #0099FF;
  stroke-width: 2px;
}

/* Containers */
.mermaid .container {
  fill: #0099FF;
  stroke: #00001E;
  stroke-width: 2px;
}

/* Components */
.mermaid .component {
  fill: rgba(0, 153, 255, 0.5);
  stroke: #0099FF;
  stroke-width: 2px;
}

/* External systems */
.mermaid .external_system {
  fill: rgba(0, 0, 30, 0.1);
  stroke: #00001E;
  stroke-width: 2px;
  stroke-dasharray: 5, 5;
}

/* Boundaries */
.mermaid .system_boundary,
.mermaid .container_boundary {
  fill: transparent;
  stroke: #0099FF;
  stroke-dasharray: 10, 5;
}

/* C4 text */
.mermaid .c4Title {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  fill: #ffffff;
}

.mermaid .c4Description {
  font-family: 'Open Sans', sans-serif;
  fill: rgba(255, 255, 255, 0.8);
}

/* ============================================
   TOOLTIP STYLES
   ============================================ */

.mermaidTooltip {
  font-family: 'Open Sans', sans-serif;
  background-color: #00001E;
  color: #ffffff;
  border: 2px solid #0099FF;
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

@media (prefers-color-scheme: dark) {
  /* Adjust background colors for dark mode */
  .mermaid .edgeLabel {
    background-color: #00001E;
  }
  
  .mermaid .edgeLabel span {
    color: #ffffff;
    fill: #ffffff;
  }
  
  .mermaid .cluster rect {
    fill: rgba(0, 153, 255, 0.15);
  }
  
  .mermaid .cluster span,
  .mermaid .cluster .nodeLabel {
    color: #ffffff;
    fill: #ffffff;
  }
  
  .mermaid .sectionTitle,
  .mermaid .pieTitleText,
  .mermaid .legend text,
  .mermaid .pieLabel,
  .mermaid .messageText,
  .mermaid .er.relationshipLabel,
  .mermaid .journey-section-text,
  .mermaid .journey-task-text,
  .mermaid .quadrant-label,
  .mermaid .commit-id {
    fill: #ffffff;
  }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* High contrast focus states */
.mermaid .node:focus rect,
.mermaid .node:focus-visible rect {
  outline: 3px solid #FF0095;
  outline-offset: 2px;
}

/* Ensure sufficient contrast ratios */
.mermaid .messageText,
.mermaid .edgeLabel span {
  font-weight: 500;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media screen and (max-width: 768px) {
  .mermaid {
    font-size: 12px;
  }
  
  .mermaid .node .label,
  .mermaid .nodeLabel {
    font-size: 11px;
  }
  
  .mermaid .edgeLabel {
    font-size: 10px;
  }
}

/* Hide Fern's default footer */
#fern-footer {
    display: block !important;
}

/* Footer outer wrapper */
.footer-theme-b {
    padding: 0 40px;
}

/* Single line footer layout */
.footer-single-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    min-height: 60px;
}


/* Navigation links with dividers */
.footer-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.footer-nav-item {
    display: flex;
    align-items: center;
}

.footer-nav-item:not(:last-child)::after {
    content: '|';
    margin: 0 20px;
    color: #ccc;
    font-weight: normal;
}

.dark .footer-nav-item:not(:last-child)::after {
    color: #666;
}

.footer-nav a {
    text-decoration: none;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.footer-nav a:hover {
    color: #007bff;
    text-decoration: underline;
}

.dark .footer-nav a {
    color: #b0b0b0;
}

.dark .footer-nav a:hover {
    color: #4dabf7;
}

/* Copyright section */
.footer-copyright {
    font-size: 14px;
    color: #666;
    font-weight: bold;
    white-space: nowrap;
}

.dark .footer-copyright {
    color: #b0b0b0;
}

/* Responsive design */
@media (max-width: 1024px) {
    .footer-theme-b {
        padding: 0 24px;
    }

    .footer-left-content {
        gap: 20px;
    }

    .footer-nav-item:not(:last-child)::after {
        margin: 0 15px;
    }
}

@media (max-width: 768px) {
    .footer-theme-b {
        padding: 0 16px;
    }

    .footer-single-line {
        flex-direction: column;
        gap: 20px;
        padding: 30px 0;
        text-align: center;
    }

    .footer-left-content {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .footer-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 0;
    }

    .footer-nav-item:not(:last-child)::after {
        margin: 0 10px;
    }
}

@media (max-width: 480px) {
    .footer-nav {
        flex-direction: column;
        gap: 15px;
    }

    .footer-nav-item:not(:last-child)::after {
        display: none;
    }

    .footer-nav a {
        font-size: 16px;
        padding: 5px 0;
    }

    .footer-brand-logo img {
        max-width: 100px;
        max-height: 50px;
    }
}