/* Custom styling for Mermaid diagrams */
.mermaid {
    margin: 1em auto;
    text-align: center;
}

/* Ensure diagrams are responsive */
.mermaid svg {
    max-width: 100%;
    height: auto !important;
}

/* Better node styling */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
    fill: #f9f9f9;
    stroke: #999;
    stroke-width: 1px;
}

/* Make text in nodes more readable */
.mermaid .label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color: #333;
}

/* Style edges/arrows */
.mermaid .edgePath .path {
    stroke: #666;
    stroke-width: 1.5px;
}