/* Light mode (default) */
html:not([data-theme="dark"]) .mermaid {
  color: #222;
}

html:not([data-theme="dark"]) .mermaid .edgePath path,
html:not([data-theme="dark"]) .mermaid .flowchart-link {
  stroke: #444 !important;
  fill: none !important;
  opacity: 1 !important;
}

html:not([data-theme="dark"]) .mermaid .arrowheadPath,
html:not([data-theme="dark"]) .mermaid marker path {
  stroke: #444 !important;
  fill: #444 !important;
  opacity: 1 !important;
  stroke-width: 0 !important;
}

html:not([data-theme="dark"]) .mermaid .label,
html:not([data-theme="dark"]) .mermaid .node text {
  fill: #222;
}

html:not([data-theme="dark"]) .mermaid .node rect,
html:not([data-theme="dark"]) .mermaid .node circle,
html:not([data-theme="dark"]) .mermaid .node polygon {
  stroke: #666;
  fill: #fff;
}

/* Dark mode */
html[data-theme="dark"] .mermaid {
  color: #1e1e1e;
}

html[data-theme="dark"] .mermaid .edgePath path,
html[data-theme="dark"] .mermaid .flowchart-link {
  stroke: #cfcfcf !important;
  fill: none !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .mermaid .arrowheadPath,
html[data-theme="dark"] .mermaid marker path {
  stroke: #cfcfcf !important;
  fill: #cfcfcf !important;
  opacity: 1 !important;
  stroke-width: 0 !important;
}

html[data-theme="dark"] .mermaid .label,
html[data-theme="dark"] .mermaid .node text {
  stroke: #bdbdbd;
  fill: #1e1e1e;
}

html[data-theme="dark"] .mermaid .node rect,
html[data-theme="dark"] .mermaid .node circle,
html[data-theme="dark"] .mermaid .node polygon {
  stroke: #bdbdbd;
  fill: #1e1e1e;
}