.markdown-surface .mermaid{margin:1.5rem 0;overflow-x:auto}.markdown-surface .mermaid.mermaid-diagram{border:1px solid var(--border);border-radius:var(--radius);background:color-mix(in srgb, var(--card) 94%, transparent);position:relative;overflow:hidden}.markdown-surface .mermaid-diagram__viewport{padding:1rem 3.5rem 1rem 1rem;overflow:auto}.markdown-surface .mermaid-diagram__controls{z-index:1;flex-direction:column;gap:.5rem;display:flex;position:absolute;top:.75rem;right:.75rem}.markdown-surface .mermaid-diagram__control{border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:color-mix(in srgb, var(--background) 88%, transparent);min-width:2.5rem;height:2.5rem;color:var(--foreground);cursor:pointer;padding:0 .625rem;font-size:.875rem;font-weight:600}.markdown-surface .mermaid-diagram__control:hover{background:var(--accent)}.markdown-surface .mermaid svg{cursor:grab;touch-action:none;max-width:100%;height:auto}.markdown-surface .mermaid svg:active{cursor:grabbing}.markdown-surface .mermaid-diagram__control svg{width:1rem;height:1rem}.mermaid-dialog{background:#00000094;border:none;width:100vw;max-width:none;height:100vh;max-height:none;margin:0;padding:0}.mermaid-dialog::backdrop{background:#00000094}.mermaid-dialog__panel{width:100vw;height:100vh;padding:1rem;position:relative}.mermaid-dialog__body{height:100%}.mermaid-dialog__body .mermaid-diagram{height:100%;margin:0}.mermaid-dialog__body .mermaid-diagram__viewport{height:100%;padding-top:3.75rem}@media (width>=768px){.mermaid-dialog__panel{width:80vw;height:80vh;margin:10vh auto;padding:0}}