/* Let mermaid diagrams use full available width and scroll if needed */
.md-content .mermaid {
  overflow-x: auto;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 1rem 2rem;
}

/* On wide screens, constrain the breakout to a reasonable max */
@media (min-width: 76.25em) {
  .md-content .mermaid {
    margin-left: -4rem;
    margin-right: -4rem;
    max-width: calc(100% + 8rem);
  }
}

/* Ensure SVG inside mermaid scales properly */
.md-content .mermaid svg {
  max-width: none;
  height: auto;
}