.tp-diagram{border:1px solid var(--sl-color-gray-5);background:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sl-color-gray-5) 70%, transparent) 1px, transparent 0) 0 0 / 18px 18px, var(--sl-color-bg);border-radius:.875rem;margin:1.75rem 0;padding:1rem}.tp-diagram-scroll{overflow-x:auto}.tp-diagram svg{max-width:100%;height:auto;font-family:var(--sl-font);margin:0 auto;display:block}.tp-diagram-scroll{-webkit-overflow-scrolling:touch;position:relative}.tp-diagram.tp-scrollable .tp-diagram-scroll{mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),#0000)}.tp-diagram.tp-scrollable.tp-scrolled-end .tp-diagram-scroll{mask-image:none}.tp-scroll-hint{font-size:var(--sl-text-xs);color:var(--sl-color-gray-3);text-align:center;margin:.5rem 0 0;display:none}.tp-diagram.tp-scrollable .tp-scroll-hint{display:block}.tp-diagram figcaption{font-size:var(--sl-text-xs);color:var(--sl-color-gray-3);text-align:center;margin-top:.75rem}.tp-node rect{fill:var(--sl-color-bg-nav);stroke:var(--sl-color-gray-4);stroke-width:1.25px}.tp-node-label{fill:var(--sl-color-white);text-anchor:middle;font-size:13.5px;font-weight:600}.tp-node-sub{fill:var(--sl-color-gray-3);text-anchor:middle;font-size:11px;font-family:var(--__sl-font-mono,ui-monospace, SFMono-Regular, Menlo, monospace)}.tp-tone-accent rect{fill:var(--sl-color-accent-low);stroke:var(--sl-color-accent)}.tp-tone-accent .tp-node-label{fill:var(--sl-color-accent-high)}.tp-tone-you rect{fill:var(--sl-color-bg);stroke:var(--sl-color-white);stroke-dasharray:4 3}.tp-tone-success rect{fill:var(--sl-color-green-low);stroke:var(--sl-color-green)}.tp-tone-success .tp-node-label{fill:var(--sl-color-green-high)}.tp-tone-warning rect{fill:var(--sl-color-orange-low);stroke:var(--sl-color-orange)}.tp-tone-warning .tp-node-label{fill:var(--sl-color-orange-high)}.tp-tone-danger rect{fill:var(--sl-color-red-low);stroke:var(--sl-color-red)}.tp-tone-danger .tp-node-label{fill:var(--sl-color-red)}.tp-tone-muted rect{fill:#0000;stroke:var(--sl-color-gray-5)}.tp-tone-muted .tp-node-label{fill:var(--sl-color-gray-3);font-weight:500}.tp-edge{fill:none;stroke:var(--sl-color-gray-3);stroke-width:1.5px}.tp-dashed{stroke-dasharray:5 4}.tp-edge-label rect{fill:var(--sl-color-bg);stroke:var(--sl-color-gray-5)}.tp-edge-label text,.tp-message{fill:var(--sl-color-gray-2);text-anchor:middle;font-size:12px;font-family:var(--__sl-font-mono,ui-monospace, SFMono-Regular, Menlo, monospace)}.tp-message{paint-order:stroke;stroke:var(--sl-color-bg);stroke-width:4px;stroke-linejoin:round}.tp-lifeline{stroke:var(--sl-color-gray-5);stroke-width:1.25px;stroke-dasharray:3 4}.tp-self rect{fill:var(--sl-color-bg-nav);stroke:var(--sl-color-gray-5)}.tp-self text{fill:var(--sl-color-gray-2);text-anchor:middle;font-size:11px}.tp-flow-box{container-type:inline-size}.tp-flow{--tp-flow-gap:1.75rem;grid-template-columns:repeat(var(--tp-flow-steps,3), minmax(0, 1fr));gap:var(--tp-flow-gap);counter-reset:tp-step;margin:0;padding:0;list-style:none;display:grid}.tp-flow>li{margin:0;display:flex;position:relative}.tp-flow-step{border:1px solid var(--sl-color-gray-5);background:var(--sl-color-bg-nav);counter-increment:tp-step;border-radius:.75rem;flex:1;min-width:0;padding:.75rem .875rem}.tp-flow-step:before{content:counter(tp-step);background:var(--sl-color-accent);color:#fff;border-radius:999px;place-items:center;width:1.375rem;height:1.375rem;margin-bottom:.375rem;font-size:.75rem;font-weight:700;display:inline-grid}.tp-flow-step strong{color:var(--sl-color-white);font-size:var(--sl-text-sm);display:block}.tp-flow-step span{color:var(--sl-color-gray-3);font-size:var(--sl-text-xs);overflow-wrap:anywhere;margin-top:.125rem;line-height:1.4;display:block}.tp-flow-step code{white-space:normal;overflow-wrap:anywhere;font-size:.75rem}.tp-flow>li:not(:last-child):after{content:"→";top:50%;color:var(--sl-color-gray-4);font-size:1rem;line-height:1;position:absolute;inset-inline-end:calc(var(--tp-flow-gap) / -2);transform:translate(50%,-50%)}@container (width<=31rem){.tp-flow[data-steps="3"]{grid-template-columns:1fr}}@container (width<=41rem){.tp-flow[data-steps="4"]{grid-template-columns:1fr}}@container (width<=52rem){.tp-flow[data-steps="5"],.tp-flow[data-steps="6"]{grid-template-columns:1fr}}@container (width<=18rem){.tp-flow[data-steps="2"]{grid-template-columns:1fr}}@container (width<=31rem){.tp-flow[data-steps="3"]>li:not(:last-child):after{content:"↓"}}@container (width<=41rem){.tp-flow[data-steps="4"]>li:not(:last-child):after{content:"↓"}}@container (width<=52rem){.tp-flow[data-steps="5"]>li:not(:last-child):after,.tp-flow[data-steps="6"]>li:not(:last-child):after{content:"↓"}}@container (width<=18rem){.tp-flow[data-steps="2"]>li:not(:last-child):after{content:"↓"}}@container (width<=52rem){.tp-flow:is([data-steps="5"],[data-steps="6"])>li:not(:last-child):after{top:auto;bottom:calc(var(--tp-flow-gap) / -2);inset-inline-end:50%;transform:translate(50%,50%)}}@container (width<=41rem){.tp-flow[data-steps="4"]>li:not(:last-child):after{top:auto;bottom:calc(var(--tp-flow-gap) / -2);inset-inline-end:50%;transform:translate(50%,50%)}}@container (width<=31rem){.tp-flow[data-steps="3"]>li:not(:last-child):after{top:auto;bottom:calc(var(--tp-flow-gap) / -2);inset-inline-end:50%;transform:translate(50%,50%)}}@container (width<=18rem){.tp-flow[data-steps="2"]>li:not(:last-child):after{top:auto;bottom:calc(var(--tp-flow-gap) / -2);inset-inline-end:50%;transform:translate(50%,50%)}}.tp-arrowhead{fill:context-stroke}.tp-diagram:focus{outline:none}.tp-diagram:focus-visible{outline:2px solid var(--sl-color-accent);outline-offset:2px}.tp-diagram [data-part]{transition:opacity .25s,stroke .25s}.tp-stepping [data-part]{opacity:.12}.tp-stepping [data-part].tp-was{opacity:.4}.tp-stepping [data-part].tp-lit{opacity:1}.tp-stepping path[data-part].tp-lit,.tp-stepping [data-part].tp-lit .tp-edge{stroke:var(--sl-color-accent);stroke-width:2.25px}.tp-stepping .tp-node.tp-lit rect{stroke-width:2px;filter:drop-shadow(0 0 6px color-mix(in srgb, var(--sl-color-accent) 45%, transparent))}.tp-stepping .tp-edge-label.tp-lit rect,.tp-stepping .tp-self.tp-lit rect{stroke:var(--sl-color-accent)}.tp-stepping .tp-lit .tp-message,.tp-stepping .tp-edge-label.tp-lit text{fill:var(--sl-color-white);font-weight:600}.tp-stepping .tp-lifeline{opacity:.5}.tp-steps{border-top:1px solid var(--sl-color-gray-5);margin-top:.875rem;padding-top:.75rem}.tp-steps-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.tp-steps button{border:1px solid var(--sl-color-gray-5);background:var(--sl-color-bg-nav);min-height:2rem;color:var(--sl-color-white);font:inherit;font-size:var(--sl-text-sm);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:.375rem;padding:0 .75rem;font-weight:500;display:inline-flex}.tp-steps button:hover:not(:disabled){border-color:var(--sl-color-accent)}.tp-steps button:focus-visible{outline:2px solid var(--sl-color-accent);outline-offset:2px}.tp-steps button:disabled{opacity:.4;cursor:default}.tp-steps button svg{width:.875rem;height:.875rem}.tp-steps .tp-steps-start{background:var(--sl-color-accent);border-color:var(--sl-color-accent);color:#fff}.tp-steps-nav{align-items:center;gap:.375rem;display:flex}.tp-steps-nav [data-prev],.tp-steps-nav [data-next]{width:2rem;padding:0}.tp-steps-nav[hidden]{display:none}.tp-steps .tp-steps-all{color:var(--sl-color-gray-3);background:0 0;border-color:#0000;margin-inline-start:.375rem}.tp-steps-count{text-align:center;min-width:3.25rem;font-size:var(--sl-text-sm);font-variant-numeric:tabular-nums;color:var(--sl-color-gray-2)}.tp-steps-dots{gap:.3rem;display:flex}.tp-steps-dots span{background:var(--sl-color-gray-5);border-radius:999px;width:.4rem;height:.4rem;transition:all .2s}.tp-steps-dots span.tp-done{background:var(--sl-color-gray-3)}.tp-steps-dots span.tp-on{background:var(--sl-color-accent);width:1.1rem}.tp-steps-text{min-height:2.75em;font-size:var(--sl-text-sm);color:var(--sl-color-gray-2);margin:.75rem 0 0;line-height:1.5}.tp-steps-text[hidden]{display:none}.tp-steps-text strong{color:var(--sl-color-white)}@media (prefers-reduced-motion:reduce){.tp-diagram [data-part],.tp-steps-dots span{transition:none}}.tp-steps button[hidden]{display:none}