/* Mermaid Diagram Styling */ .mermaid { text-align: center; margin: 20px auto; background-color: #fff; border: 1px solid #e1e4e8; border-radius: 6px; padding: 16px; } /* Ensure mermaid diagrams are responsive */ .mermaid svg { max-width: 100%; height: auto; } /* Enhanced stroke visibility for better diagram clarity */ .mermaid svg .actor rect { stroke-width: 2px; } /* Ensure text is always readable */ .mermaid svg text { fill: #000000; font-weight: 400; letter-spacing: 0.01em; } /* Larger text for actor labels */ .mermaid svg .actor text { font-size: 18px; font-weight: 500; } /* Clear message text */ .mermaid svg .messageText { font-size: 15px; font-weight: 400; } /* Thicker message lines for visibility */ .mermaid svg .messageLine0, .mermaid svg .messageLine1 { stroke-width: 1.5px; } /* Style for dark mode compatibility (if needed) */ @media (prefers-color-scheme: dark) { .mermaid { background-color: #0d1117; border-color: #30363d; } }