.flow-demo .flow-playback{display:flex;align-items:center;gap:8px}.flow-playback button{font:inherit;color:#526582;background:transparent;border:1px solid transparent;border-radius:6px;padding:7px 10px;min-height:36px;cursor:pointer}.flow-playback button:hover{background:#edf2ff;color:var(--action)}.flow-playback button:focus-visible,.flow-demo [data-sample]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.flow-playback button:disabled{opacity:.55;cursor:default}.flow-demo .flow-stage{padding-block:34px 44px;min-height:340px}.flow-demo .engine-column>strong{display:inline-block;line-height:1.4}.flow-demo .engine-tile{transition:border-color .3s,box-shadow .3s}.flow-demo[data-phase=judging] .engine-tile{border-color:#a9bcf5;box-shadow:0 0 0 5px #e6edff,0 10px 26px #3e63dd16}.flow-demo .rule-pill{min-width:150px;min-height:27px;text-align:center;justify-content:center}.flow-demo .connector{stroke:#cdd8ea;stroke-width:1.4;vector-effect:non-scaling-stroke;transition:stroke .25s}.flow-demo .signal{animation:none;opacity:0;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:12 100;stroke-dashoffset:var(--flow-offset,12);vector-effect:non-scaling-stroke}.flow-demo[data-phase=incoming] .signal[data-flow-path=input],.flow-demo[data-phase=routing][data-selected=billing] .signal[data-flow-path=billing],.flow-demo[data-phase=routing][data-selected=technical] .signal[data-flow-path=technical],.flow-demo[data-phase=routing][data-selected=human] .signal[data-flow-path=human]{opacity:1}.flow-demo[data-phase=settled][data-selected=billing] .connector[data-flow-path=billing],.flow-demo[data-phase=settled][data-selected=technical] .connector[data-flow-path=technical],.flow-demo[data-phase=settled][data-selected=human] .connector[data-flow-path=human]{stroke:#8aa5ef}.flow-demo .stacks-column{gap:24px;position:relative;z-index:1}.flow-demo .outcome-stack{display:block;isolation:isolate;padding:0;border:0;border-radius:12px;background:transparent;box-shadow:none;transform:none;min-height:72px;transition:none}.flow-demo .outcome-stack:before,.flow-demo .outcome-stack:after{content:"";position:absolute;inset:0 5px -6px;border:1px solid #dce4f0;border-radius:12px;background:#f8faff;z-index:-1;transform:none;transition:border-color .25s}.flow-demo .outcome-stack:before{inset:0 10px -12px;background:#f2f6fc;z-index:-2}.flow-demo .outcome-face{display:flex;align-items:center;gap:13px;position:relative;border:1px solid #dce4f0;border-radius:12px;padding:17px 15px;min-height:72px;background:#fff;transition:border-color .25s,box-shadow .25s}.flow-demo .outcome-face>div{min-width:0}.flow-demo .outcome-face>.outcome-icon{display:grid;place-items:center;margin:0;font-size:18px}.flow-demo .outcome-face>.outcome-icon.blue{color:#3e63dd}.flow-demo .outcome-face>.outcome-icon.teal{color:#20988d}.flow-demo .outcome-face>.outcome-icon.amber{color:#ab7919}.flow-demo .outcome-face strong{font-size:12px;line-height:1.4}.flow-demo .outcome-face>div>span{font-size:9px;line-height:1.5;color:#61718a}.flow-demo .outcome-face>.outcome-check{margin:0 0 0 auto;flex-shrink:0;color:var(--blue);font-size:13px;opacity:0}.flow-demo .outcome-stack.is-selected .outcome-face{border-color:#7393ed;box-shadow:0 5px 18px #3e63dd12}.flow-demo .outcome-stack.is-selected:before,.flow-demo .outcome-stack.is-selected:after{border-color:#b7c8f3}.flow-demo .outcome-stack.is-selected .outcome-check{opacity:1}.flow-demo .sample-switcher button{min-height:36px}@media(max-width:900px){.flow-demo .outcome-face{padding:14px 11px;gap:9px}.flow-demo .outcome-face strong{font-size:10px}.flow-demo .outcome-face>div>span{font-size:8px}.flow-demo .rule-pill{min-width:0;font-size:8px}}@media(max-width:600px){.flow-demo .flow-connectors{display:block}.flow-demo .engine-column:before,.flow-demo .engine-column:after{display:none}.flow-demo .flow-stage{gap:32px;padding:30px 25px 38px}.flow-demo .flow-toolbar{align-items:center;gap:12px;font-size:10px}.flow-demo .flow-toolbar>span{max-width:145px;line-height:1.5}.flow-demo .flow-playback{gap:0;flex-shrink:0}.flow-demo .flow-playback button{padding-inline:8px;min-height:44px}.flow-demo .stacks-column{gap:24px}.flow-demo .outcome-face{padding:15px 14px}.flow-demo .outcome-face strong{font-size:12px}.flow-demo .outcome-face>div>span{font-size:9px}.flow-demo .sample-switcher button{font-size:10px;min-height:44px}.flow-demo .engine-column>strong{justify-self:start}}@media(prefers-reduced-motion:reduce){.flow-demo .signal{display:none}.flow-demo .outcome-face,.flow-demo .engine-tile{transition:none}}