.dotflow{flex-direction:column;margin:32px 0 40px;display:flex;position:relative}.df-figure{margin:0}.df-figure figcaption{color:var(--secondary);margin-top:12px;font-size:14px;line-height:1.43}.df-panel{background:var(--raised);border:1px solid var(--border);border-radius:10px;padding:16px;container-type:inline-size}.df-pause-input{opacity:0;width:1px;height:1px;margin:0;position:absolute;top:0;right:0}.df-pause{box-sizing:border-box;border:1px solid var(--border);min-height:44px;font-family:var(--mono);letter-spacing:-.24px;text-transform:uppercase;color:var(--bone);cursor:pointer;transition:border-color .15s var(--ease);border-radius:3px;align-self:flex-end;align-items:center;gap:8px;margin-bottom:8px;padding:0 14px;font-size:12px;line-height:1;display:inline-flex}.df-pause:hover{border-color:var(--muted)}.df-pause-box{box-sizing:border-box;border:1px solid var(--bone);width:10px;height:10px}.df-pause-input:checked+.df-pause .df-pause-box{background:var(--bone)}.df-pause-input:focus-visible+.df-pause{outline:2px solid var(--bone);outline-offset:2px}.dotflow .df-pause[hidden]{display:none}@media (prefers-reduced-motion:reduce){.df-pause-input,.df-pause{display:none}}.dotflow .df-steps{margin:24px 0 0}.df-steps li{margin:0 0 8px}.df-steps strong{font-weight:500}.df-stage{--df-axis:h;aspect-ratio:var(--df-ratio-h,19 / 10);position:relative}.df-canvas,.df-fallback{width:100%;height:100%;position:absolute;inset:0}.df-fallback{background-image:radial-gradient(circle, var(--graphite) .8px, transparent 1.2px);background-size:24px 24px}.df-fallback polyline{fill:none;stroke-width:1.1px;stroke-linecap:round;stroke-dasharray:0 2.4;opacity:.8}.df-fallback .df-fallback-loop{stroke-width:.7px;stroke-dasharray:0 1.6}.df-fallback-v,.dotflow[data-live] .df-fallback{display:none}.df-labels{position:absolute;inset:0}.dotflow .df-label{left:var(--x);top:var(--y);width:var(--w);font-family:var(--mono);letter-spacing:-.24px;flex-direction:column;gap:2px;margin:0;font-size:12px;line-height:1.3;display:flex;position:absolute}.df-end{text-align:right;align-items:flex-end}.df-name,.df-detail{background:var(--raised);width:fit-content;max-width:100%;box-shadow:0 0 0 2px var(--raised)}.df-name{color:var(--bone)}.df-detail{color:var(--muted)}.df-lane .df-name{align-items:center;gap:6px;display:inline-flex}.df-lane .df-name:before{content:"";background:var(--c);border-radius:50%;flex:none;width:6px;height:6px}@container (width<=560px){.df-stage{--df-axis:v;aspect-ratio:var(--df-ratio-v,10 / 23)}.df-labels{flex-direction:column;justify-content:space-between;width:36%;display:flex;left:auto}.df-fallback-h{display:none}.dotflow:not([data-live]) .df-fallback-v{display:block}.dotflow .df-label{letter-spacing:-.2px;gap:0;width:auto;font-size:11px;line-height:1.25;position:static}.df-end{text-align:left;align-items:flex-start}}.cost-funnel .df-label{overflow-wrap:anywhere}.df-fallback polygon{fill:var(--viz-2);opacity:.35}@container (width>=561px){.cost-funnel .df-label{box-sizing:border-box;padding-right:8px}}@container (width<=560px){.cost-funnel .df-labels{display:block}.dotflow.cost-funnel .df-label{left:0;top:var(--down);width:100%;position:absolute}}.dotflow .cf-steps{margin:24px 0 0}.cf-steps li{margin:0 0 12px}.cf-step-name{font-weight:500;display:block}.cf-step-detail{color:var(--secondary);font-size:14px;line-height:1.43;display:block}.cf-step-figures{font-family:var(--mono);letter-spacing:-.24px;color:var(--bone);flex-wrap:wrap;gap:0 16px;font-size:13px;line-height:1.5;display:flex}
