.animate-in{animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.fade-in-0{animation-name:fade-in}.zoom-in-95{animation-name:zoom-in}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes zoom-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.mermaid-diagram svg{max-width:100%;height:auto;margin:0 auto;transition:transform .2s cubic-bezier(.4,0,.2,1);display:block}.mermaid-diagram .node rect,.mermaid-diagram .node circle,.mermaid-diagram .node ellipse,.mermaid-diagram .node polygon{stroke-width:2px;transition:all .2s}.mermaid-diagram .node:hover rect,.mermaid-diagram .node:hover circle,.mermaid-diagram .node:hover ellipse,.mermaid-diagram .node:hover polygon{filter:brightness(1.1);stroke-width:3px}.mermaid-diagram .edgePath .path{stroke-width:2px;transition:stroke-width .2s}.mermaid-diagram .edgePath:hover .path{stroke-width:3px}.react-flow__node{cursor:pointer;transition:all .2s}.react-flow__node:hover{z-index:10;transform:scale(1.05)}.react-flow__node-default{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.react-flow__node-default:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.dark .react-flow__node{border-color:#475569}.dark .react-flow__edge-path{stroke:#64748b}.dark .react-flow__controls{background:#1e293b;border-color:#475569}.dark .react-flow__controls button{color:#e2e8f0;background:#334155;border-color:#475569}.dark .react-flow__controls button:hover{background:#475569}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.6}}.visualization-loading{animation:2s ease-in-out infinite pulse-glow}@media (max-width:768px){.mermaid-diagram svg{max-width:100%;height:auto}.react-flow__node{padding:.5rem;font-size:.875rem}.react-flow__controls{bottom:.5rem;left:.5rem}}.visualization-error{animation:.5s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.visualization-container{transition:opacity .3s,transform .3s}.visualization-container.loading{opacity:.6}.mermaid-diagram text,.react-flow__node text{-webkit-user-select:text;user-select:text}.dark .mermaid-diagram .node text{fill:#e2e8f0!important}.dark .mermaid-diagram .edgeLabel{color:#e2e8f0!important;background-color:#1e293b!important}@media print{.mermaid-diagram svg{break-inside:avoid;max-width:100%}.react-flow{break-inside:avoid}}
