.joe_detail__article .sixteen-mermaid {
  margin: 24px 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--classC);
  border-radius: var(--radius-inner);
  background: var(--sub-background);
}
.joe_detail__article .sixteen-mermaid__canvas {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.joe_detail__article .sixteen-mermaid__canvas > svg {
  display: block;
  width: auto;
  max-width: none !important;
  min-width: min(100%, 320px);
  height: auto;
  margin: 0 auto;
}
html[data-mode="dark"] .joe_detail__article .sixteen-mermaid__canvas svg[aria-roledescription="mindmap"] text {
  fill: #f8fafc !important;
}
html[data-mode="dark"] .joe_detail__article .sixteen-mermaid__canvas svg[aria-roledescription="mindmap"] foreignObject * {
  color: #f8fafc !important;
}
.joe_detail__article .sixteen-mermaid__message {
  margin-top: 10px;
  color: var(--minor);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.joe_detail__article .sixteen-mermaid[data-state="ready"] .sixteen-mermaid__message { display: none; }
.joe_detail__article .sixteen-mermaid[data-state="error"] { border-color: #dc2626; }
.joe_detail__article .sixteen-mermaid[data-state="error"] .sixteen-mermaid__message { color: #dc2626; }
.joe_detail__article .sixteen-mermaid[data-state="error"] pre {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  color: var(--main);
  background: var(--background);
  white-space: pre;
  text-align: left;
}
@media (max-width: 600px) {
  .joe_detail__article .sixteen-mermaid { padding: 12px; }
}