@layer components{.mermaid-diagram{--plot: .7s;--sweep: 1.8s}.mermaid-diagram foreignObject{overflow:visible}.mermaid-diagram .d-signal{opacity:0;stroke:hsl(var(--accent));stroke-width:2.5px;stroke-dasharray:.3 2;stroke-dashoffset:.3}@media screen and (prefers-reduced-motion:no-preference){.mermaid-diagram[data-draw=waiting] svg[data-flow=right],.mermaid-diagram[data-draw=play] svg[data-flow=right]{animation:diagram-plot-right var(--plot) cubic-bezier(.2,0,0,1) both}.mermaid-diagram[data-draw=waiting] svg[data-flow=left],.mermaid-diagram[data-draw=play] svg[data-flow=left]{animation:diagram-plot-left var(--plot) cubic-bezier(.2,0,0,1) both}.mermaid-diagram[data-draw=waiting] svg[data-flow=down],.mermaid-diagram[data-draw=play] svg[data-flow=down]{animation:diagram-plot-down var(--plot) cubic-bezier(.2,0,0,1) both}.mermaid-diagram[data-draw=waiting] svg[data-flow=up],.mermaid-diagram[data-draw=play] svg[data-flow=up]{animation:diagram-plot-up var(--plot) cubic-bezier(.2,0,0,1) both}.mermaid-diagram[data-draw=waiting] svg[data-flow]{animation-play-state:paused}.mermaid-diagram[data-draw=play] .d-signal{animation:diagram-signal calc(var(--d) * var(--sweep)) linear calc(var(--plot) + var(--s) * var(--sweep)) 1}.mermaid-diagram[data-draw=play] .d-light{animation:diagram-arrive .9s ease-out calc(var(--plot) + var(--t) * var(--sweep)) 1}}@keyframes diagram-plot-right{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes diagram-plot-left{0%{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}@keyframes diagram-plot-down{0%{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}@keyframes diagram-plot-up{0%{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes diagram-signal{0%{opacity:1;stroke-dashoffset:.3}to{opacity:1;stroke-dashoffset:-1}}@keyframes diagram-arrive{0%,35%{stroke:hsl(var(--accent));stroke-width:2px}}}