.mermaid-diagram {
  margin: 2rem 0;
  padding: clamp(1rem, 3vw, 2rem);
  overflow-x: auto;
  border: 1px solid #dfe5e8;
  border-radius: 1rem;
  background: #f7f9f8;
  color: #172326;
  scrollbar-width: thin;
  scrollbar-color: #087a6b #e3f3f0;
}

.mermaid-diagram::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.mermaid-diagram::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #e3f3f0;
}

.mermaid-diagram::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #087a6b;
}

.mermaid-diagram svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.mermaid-diagram:focus-visible {
  outline: 2px solid #087a6b;
  outline-offset: 3px;
}

@media (max-width: 48rem) {
  .mermaid-diagram--wide svg {
    width: 56rem;
    max-width: none;
  }
}