:root {
  --bg-group0: hsla(51, 71%, 85%, 0.6);
  --bg-group0a: hsla(18, 97%, 90%, 0.6);
  --border-group0: hsla(51, 71%, 85%, 1);
  --border-group0a: hsla(18, 97%, 90%, 1);
  --bg-group1: hsla(34, 78%, 72%, 1);
  --bg-group1a: hsla(18, 97%, 77%, 1);
  --border-group1: hsla(34, 78%, 50%, 1);
  --border-group1a: hsla(18, 97%, 70%, 1);
  --path-stroke: hsl(182, 71%, 20%);
  --mask-light: rgba(255, 255, 255, 0.40);
  --mask-dark: rgba(0, 0, 0, 0.40);

}

.mermaid [aria-roledescription="sequence"] rect.rect,
.mermaid .cluster > rect {
  fill: var(--bg-group0a) !important;
  stroke: var(--border-group0a) !important;
  stroke-width: 2px !important;
  rx: 15 !important;
  ry: 15 !important;
  filter: drop-shadow(0 1px 4px var(--mask-dark));
}

.mermaid [aria-roledescription="sequence"] text.text,
.mermaid .cluster text { 
  font-weight:bold !important;
  font-size:1.2em !important;
}

/* Node formatting */
.mermaid [aria-roledescription="sequence"] rect.actor,
.mermaid .node > path,
.mermaid .node > rect {
  fill: var(--bg-group1a) !important;
  stroke: var(--border-group1a) !important;
  stroke-width: 2px !important;
  rx: 10 !important;
  ry: 10 !important;
}

.mermaid .nodes text {
  font-size:1em;
}

.mermaid [aria-roledescription="sequence"] >g line,
.mermaid .edgePaths > path {
  stroke: var(--path-stroke) !important;
  stroke-width: 1px !important;
}

/* Example icons */
.mermaid .icon-api .label > foreignObject > div {
  background-image: url("https://unpkg.com/lucide-static/icons/server.svg");
}

.mermaid .icon-ui .label > foreignObject > div {
  background-image: url("https://unpkg.com/lucide-static/icons/app-window.svg");
}

.mermaid .icon-db .label > foreignObject > div {
  background-image: url("https://unpkg.com/lucide-static/icons/database.svg");
}

.mermaid .icon-llm .label > foreignObject > div {
  background-image: url("https://unpkg.com/lucide-static/icons/brain.svg");
}