.step-diagram{min-width:0;margin:1.5rem 0;padding:0}.step-diagram *{box-sizing:border-box;margin:0}.step-diagram__title{font-weight:600;font-size:var(--sl-text-h5);margin-bottom:.5rem}.step-diagram__canvas{border:1px solid var(--sl-color-hairline);background-color:var(--sl-color-bg-nav);border-radius:.5rem;padding:.5rem;overflow-x:auto}.step-diagram__canvas:focus-visible{outline:2px solid var(--sl-color-accent);outline-offset:2px}.step-diagram__canvas svg{width:100%;min-width:0;height:auto;display:block}.step-diagram__box{fill:var(--sl-color-bg);stroke:var(--sl-color-hairline-light);stroke-width:1.5px;transition:fill .2s,stroke .2s}.step-diagram__node text{fill:var(--sl-color-text);text-anchor:middle;dominant-baseline:middle;font-size:14px}.step-diagram__node--active .step-diagram__box{fill:var(--sl-color-accent-low);stroke:var(--sl-color-accent);stroke-width:2px}.step-diagram__halo{fill:none;stroke:var(--sl-color-accent);stroke-width:2px;opacity:.35;animation:1.8s ease-in-out infinite sd-halo}.step-diagram__sub{fill:var(--sl-color-gray-2);font-size:11.5px}.step-diagram__icon{fill:none;stroke:var(--sl-color-gray-2);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.step-diagram__node--active .step-diagram__icon{stroke:var(--sl-color-accent)}.step-diagram__node--ok .step-diagram__box{fill:var(--sl-color-green-low);stroke:var(--sl-color-green);stroke-width:2px}.step-diagram__node--warn .step-diagram__box{fill:var(--sl-color-orange-low);stroke:var(--sl-color-orange);stroke-width:2px}.step-diagram__node--danger .step-diagram__box{fill:var(--sl-color-red-low);stroke:var(--sl-color-red);stroke-width:2px}.step-diagram__node--info .step-diagram__box{fill:var(--sl-color-blue-low);stroke:var(--sl-color-blue);stroke-width:2px}.step-diagram__node--ok .step-diagram__icon{stroke:var(--sl-color-green)}.step-diagram__node--warn .step-diagram__icon{stroke:var(--sl-color-orange)}.step-diagram__node--danger .step-diagram__icon{stroke:var(--sl-color-red)}.step-diagram__node--info .step-diagram__icon{stroke:var(--sl-color-blue)}.step-diagram__node--ok .step-diagram__halo{stroke:var(--sl-color-green)}.step-diagram__node--warn .step-diagram__halo{stroke:var(--sl-color-orange)}.step-diagram__node--danger .step-diagram__halo{stroke:var(--sl-color-red)}.step-diagram__node--info .step-diagram__halo{stroke:var(--sl-color-blue)}.step-diagram__badge rect{fill:var(--sl-color-gray-1);stroke:none}.step-diagram__badge text{fill:var(--sl-color-bg);text-anchor:middle;dominant-baseline:middle;font-size:11px;font-weight:700}.step-diagram__node--ok .step-diagram__badge rect{fill:var(--sl-color-green)}.step-diagram__node--warn .step-diagram__badge rect{fill:var(--sl-color-orange)}.step-diagram__node--danger .step-diagram__badge rect{fill:var(--sl-color-red)}.step-diagram__node--info .step-diagram__badge rect{fill:var(--sl-color-blue)}.step-diagram__edge{stroke:var(--sl-color-gray-3);stroke-width:1.5px;transition:stroke .2s}.step-diagram__edge--active{stroke:var(--sl-color-accent);stroke-width:2.2px;stroke-dasharray:7 5;animation:.9s linear infinite sd-flow}.step-diagram__arrowhead{fill:var(--sl-color-gray-3)}.step-diagram__arrowhead--active{fill:var(--sl-color-accent)}.step-diagram__group rect{fill:none;stroke:var(--sl-color-gray-3);stroke-width:1px;stroke-dasharray:4 3}.step-diagram__group text{fill:var(--sl-color-text-accent);font-size:12px;font-weight:600}.step-diagram__message circle{fill:var(--sl-color-text-accent);stroke:var(--sl-color-bg);stroke-width:2px;filter:drop-shadow(0 0 5px var(--sl-color-accent))}.step-diagram__packet-pill{fill:var(--sl-color-text-accent);stroke:none}.step-diagram__packet-label{fill:var(--sl-color-bg);text-anchor:middle;dominant-baseline:middle;font-size:11px;font-weight:700;font-family:var(--sl-font-mono)}.step-diagram__activity{min-height:4rem;font-size:var(--sl-text-sm);color:var(--sl-color-text-accent);flex-wrap:wrap;align-items:center;gap:.4rem 1rem;padding:.75rem 0;display:flex}.step-diagram__activity-item{flex-wrap:wrap;align-items:center;gap:.4rem;display:inline-flex}.step-diagram__activity code{background:var(--sl-color-bg-nav);overflow-wrap:anywhere;white-space:normal;border-radius:.25rem;padding:.2rem .4rem}.step-diagram__controls{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem;display:flex}.step-diagram__controls button,.step-diagram__zoom{font:inherit;font-size:var(--sl-text-sm);border:1px solid var(--sl-color-hairline);background-color:var(--sl-color-bg-nav);color:var(--sl-color-text);cursor:pointer;border-radius:.25rem;padding:.35rem .75rem}.step-diagram__controls button:hover:not(:disabled),.step-diagram__zoom:hover{border-color:var(--sl-color-accent);color:var(--sl-color-text-accent)}.step-diagram__controls button:disabled{opacity:.5;cursor:not-allowed}.step-diagram__controls button:focus-visible,.step-diagram__zoom:focus-visible{outline:2px solid var(--sl-color-accent);outline-offset:2px}.step-diagram__zoom{margin-bottom:.5rem}.step-diagram__counter{font-size:var(--sl-text-sm);color:var(--sl-color-text-accent);font-variant-numeric:tabular-nums;margin-inline-start:auto}.step-diagram__caption{font-size:var(--sl-text-sm);color:var(--sl-color-text);min-height:4.5em;margin-top:.5rem}@keyframes sd-flow{to{stroke-dashoffset:-24px}}@keyframes sd-halo{0%,to{opacity:.15}50%{opacity:.55}}@media (prefers-reduced-motion:reduce){.step-diagram *{transition:none;animation:none!important}}@media (width<=30rem){.step-diagram__counter{width:100%;margin-inline-start:0}}