.flow-lab{--flow-track:#bdbdb0;--flow-orange:#ce4a13;background:#eeede5;border:1px solid #deddd4;border-radius:28px;overflow:hidden}.flow-lab-topline{justify-content:space-between;align-items:center;gap:16px;padding:24px 30px 0;font-size:1rem;display:flex}.flow-lab-topline>span:first-child{align-items:center;gap:10px;font-weight:600;display:flex}.flow-lab-topline svg{color:#b44015}.flow-lab-demo-label{color:var(--muted);font-size:.9375rem}.flow-lab-controls{justify-content:space-between;align-items:center;gap:24px;padding:22px 30px;display:flex}.flow-lab-controls fieldset{border:0;flex-wrap:wrap;gap:6px;min-width:0;margin:0;padding:0;display:flex}.flow-lab-controls button{color:#34352c;background:0 0;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:10px 16px;font-size:1rem;display:inline-flex}.flow-lab-controls button[aria-pressed=true]{color:#171815;background:#fffef9;border-color:#d3d1c3;box-shadow:0 3px 7px #17181506}.flow-lab-controls button[aria-pressed=true] svg{color:#b44015}.flow-lab-playback{gap:4px;display:flex}.flow-lab-playback button{padding-inline:12px}.flow-lab-playback button:last-child{border-color:#b5b5a9;border-radius:50%;width:44px;padding:10px}.flow-lab-board{background-image:radial-gradient(#b8b8a680 1px,#0000 1px);background-size:18px 18px;border-top:1px solid #dad9ce;border-bottom:1px solid #dad9ce;grid-template-columns:minmax(210px,1fr) minmax(60px,.35fr) 148px minmax(60px,.35fr) minmax(270px,1.2fr);align-items:center;padding:35px 36px 68px;display:grid}.flow-lab-source{background:#fffef9;border:1px solid #d4d3c7;border-radius:22px;padding:22px;position:relative;box-shadow:0 10px 28px -20px #292d2670}.flow-lab-source[data-active=true]{border-color:#d77344}.flow-node-topline{align-items:center;gap:10px;font-size:.9375rem;display:flex}.flow-node-badge{color:#ad3e16;background:#f9e2ce;border-radius:10px;place-items:center;width:34px;height:34px;display:grid}.flow-source-dot{background:var(--orange);border-radius:50%;width:7px;height:7px;margin-left:auto}.flow-lab-source>h3{letter-spacing:-.04em;margin:22px 0 18px;font-size:clamp(1.25rem,1.65vw,1.8rem);line-height:1.15}.flow-example-message{border-left:2px solid var(--orange);background:#f2f1e9;border-radius:0 10px 10px 0;padding:16px;position:relative}.flow-example-message>span:first-child{color:#585c51;font-size:.875rem}.flow-example-message p{margin:7px 0 9px;font-size:1rem;line-height:1.4}.flow-example-message>span:last-child{color:#66695f;font-size:.875rem}.flow-source-trigger{color:#a7370e;background:0 0;border:0;justify-content:space-between;align-items:center;width:100%;min-height:44px;margin-top:16px;padding:9px 0;font-size:.9375rem;font-weight:600;display:flex}.flow-lab-step{text-align:center;color:#55594d;white-space:nowrap;font-size:.875rem;position:absolute;top:calc(100% + 20px);left:0;right:0}.flow-lab-router{text-align:center;position:relative}.flow-router-label{color:#55594d;margin-bottom:14px;font-size:.875rem;display:block}.flow-router-chip{background:#252920;border:1px solid #42473b;border-radius:36px;place-items:center;width:148px;height:148px;display:grid;position:relative;box-shadow:0 0 0 6px #eeede5,0 0 0 7px #bdbeb1,0 18px 32px -20px #20261e80}.flow-router-chip>img{width:65px;height:auto}.flow-router-chip>i{border:1px solid #818c7136;border-radius:27px;position:absolute;inset:10px}.flow-router-light{background:var(--orange);border-radius:3px;width:20px;height:3px;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.flow-lab-router[data-active=true] .flow-router-chip{border-color:#fb6222;box-shadow:0 0 0 6px #fb622218,0 0 0 7px #fb62226b,0 14px 36px -16px #d75b3460}.flow-lab-router>p{margin-top:20px;font-size:.9375rem;line-height:1.35}.flow-lab-router>.flow-lab-step{top:calc(100% + 14px)}.flow-lab-wire{min-width:0;height:360px;position:relative}.flow-lab-wire>svg:first-child{width:100%;height:100%;display:block;overflow:visible}.flow-wire-track,.flow-wire-lit{fill:none;stroke-width:1.5px;vector-effect:non-scaling-stroke}.flow-wire-track{stroke:var(--flow-track)}.flow-wire-lit{stroke:#cc5a29;opacity:0}.flow-wire-lit[data-lit=true]{opacity:1}.flow-signal{fill:#db501b}.flow-lab-destinations{grid-template-rows:repeat(3,112px);gap:12px;display:grid;position:relative}.flow-lab-destination{background:#f9f8f1;border:1px solid #d4d3c7;border-radius:18px;align-items:center;gap:12px;padding:16px;display:flex;position:relative;box-shadow:0 5px 12px -10px #252a2250}.flow-destination-icon{color:#52594a;background:#ecebe0;border-radius:12px;flex:0 0 42px;place-items:center;height:42px;display:grid}.flow-lab-destination h3{font-size:1rem;font-weight:600;line-height:1.3}.flow-lab-destination p{color:#616658;margin-top:4px;font-size:.875rem;line-height:1.4}.flow-destination-state{color:#6b705f;margin-top:5px;font-size:.875rem;display:block}.flow-destination-check{color:#49623c;border:1px solid #b8bdaf;border-radius:50%;flex:0 0 22px;place-items:center;height:22px;margin-left:auto;display:grid}.flow-destination-check i{background:#afb4a5;border-radius:50%;width:4px;height:4px}.flow-lab-destination[data-active=true]{background:#fff8ef;border-color:#db501b}.flow-lab-destination[data-active=true] .flow-destination-state{color:#ae3e12}.flow-lab-destination[data-complete=true] .flow-destination-check{background:#dfe9d5;border-color:#bdcdb0}.flow-lab-destination[data-complete=true] .flow-destination-state{color:#46603b}.flow-lab-progress{background:#fbfaf5;padding:24px 30px}.flow-progress-caption{align-items:center;gap:18px;display:flex}.flow-progress-number{letter-spacing:-.05em;color:#b94414;font-variant-numeric:tabular-nums;font-size:1.45rem}.flow-progress-number>span{color:#74786a;letter-spacing:0;padding-left:4px;font-size:.9375rem}.flow-progress-caption>p{font-size:1rem}.flow-progress-status{color:#5e6356;margin-left:auto;font-size:.875rem}.flow-progress-segments{grid-template-columns:repeat(6,1fr);gap:6px;margin-top:16px;display:grid}.flow-progress-segments span{background:#dedfd3;border-radius:4px;height:3px}.flow-progress-segments span[data-done=true]{background:var(--orange)}.flow-lab-disclosure{color:#5e6356;padding:16px 30px;font-size:.9375rem}.flow-mobile-down,.flow-mobile-branch{display:none}@media (hover:hover) and (pointer:fine){.flow-lab-controls button:hover{background:#e1e1d7}.flow-lab-controls button[aria-pressed=true]:hover{background:#fffef9}.flow-source-trigger:hover{color:#171815}}@media (prefers-reduced-motion:no-preference){.flow-lab-source,.flow-lab-destination,.flow-router-chip{transition:border-color .22s,background-color .22s,box-shadow .22s}.flow-progress-segments span{transition:background-color .25s}}@media (max-width:1100px) and (min-width:761px){.flow-lab-board{grid-template-columns:minmax(180px,1fr) 40px 112px 48px minmax(218px,1.15fr);padding-inline:24px}.flow-router-chip{border-radius:28px;width:112px;height:112px}.flow-router-chip>i{border-radius:20px}.flow-router-chip img{width:52px}.flow-lab-source{padding:16px}.flow-lab-destination{gap:9px;padding:12px}.flow-destination-icon{border-radius:9px;flex-basis:32px;height:32px}.flow-destination-check{display:none}}@media (max-width:760px){.flow-lab-topline{padding:22px 22px 0}.flow-lab-controls{align-items:start;gap:12px;padding:18px 22px}.flow-lab-controls fieldset{flex:1}.flow-lab-controls button{padding:10px 12px;font-size:.9375rem}.flow-lab-playback{flex-direction:column;align-items:center;gap:8px}.flow-lab-playback button:first-child{width:44px;padding:10px}.flow-lab-playback button:first-child span{display:none}.flow-lab-board{grid-template-columns:1fr;padding:28px 24px}.flow-lab-source{padding:22px}.flow-lab-source h3{max-width:20ch;font-size:1.5rem}.flow-lab-step{text-align:left;margin-top:18px;display:block;position:static}.flow-lab-router{text-align:left;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px 22px;margin:0 7px;display:grid}.flow-router-chip{border-radius:26px;grid-area:1/1/4;width:96px;height:96px}.flow-router-chip>i{border-radius:19px;inset:8px}.flow-router-chip img{width:44px}.flow-router-light{width:14px;bottom:9px}.flow-router-label{margin:0}.flow-lab-router>p{margin:0;font-size:1rem}.flow-lab-router>.flow-lab-step{white-space:normal;margin:0;font-size:.875rem}.flow-lab-wire{width:24px;height:62px;margin-left:43px}.flow-lab-wire>svg:first-child{display:none}.flow-lab-wire:before{content:"";background:var(--flow-track);width:1px;position:absolute;top:0;bottom:0;left:50%}.flow-mobile-down{color:#8c9280;background:#eeede5;padding:2px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.flow-lab-wire-in[data-active=true] .flow-mobile-down{color:#bd4314}.flow-lab-destinations{grid-template-rows:repeat(3,minmax(112px,auto));padding-left:24px}.flow-lab-destinations:before{content:"";background:var(--flow-track);width:1px;position:absolute;top:0;bottom:56px;left:0}.flow-mobile-branch{width:24px;height:112px;display:block;position:absolute;top:0;left:-25px;overflow:visible}.flow-lab-wire-out{margin-left:0}.flow-lab-wire-out:before,.flow-lab-wire-out .flow-mobile-down{left:0}.flow-lab-destination{padding:16px}.flow-lab-progress{padding:22px}.flow-lab-disclosure{padding:16px 22px}.flow-progress-status{display:none}}@media (max-width:480px){.flow-lab{border-radius:22px}.flow-lab-topline{align-items:start;padding:18px 16px 0}.flow-lab-demo-label{text-align:right;max-width:8ch;font-size:.875rem}.flow-lab-controls{padding:16px}.flow-lab-controls fieldset{gap:3px}.flow-lab-board{padding:24px 16px}.flow-lab-source{padding:18px}.flow-lab-source h3{font-size:1.4rem}.flow-lab-destination{gap:10px;padding:14px 10px}.flow-destination-icon{flex-basis:30px;height:34px}.flow-destination-icon svg{width:19px}.flow-destination-check{display:none}.flow-progress-caption{gap:12px}.flow-lab-progress{padding:18px 16px}.flow-lab-disclosure{padding:16px}}@media (min-width:761px){.flow-lab-router{height:360px}.flow-router-label{margin:0;position:absolute;top:66px;left:0;right:0}.flow-router-chip{position:absolute;top:106px;left:0}.flow-lab-router>p{margin:0;position:absolute;top:276px;left:0;right:0}.flow-lab-router>.flow-lab-step{top:337px}}@media (min-width:761px) and (max-width:1100px){.flow-router-chip{top:124px}}@media (max-width:760px){.flow-lab-wire-out{width:55px}.flow-lab-wire-out:before{border-top:1px solid var(--flow-track);border-left:1px solid var(--flow-track);background:0 0;border-top-left-radius:16px;width:55px}}.flow-source-tool{gap:2px;min-width:0;display:grid}.flow-source-tool strong{font-size:16px;font-weight:600}.flow-source-tool>span{color:#616658;font-size:14px;line-height:1.35}.flow-lab-destination>.automation-tool-mark{border-radius:11px;flex-basis:40px;width:40px;height:40px}.flow-lab-destination>div{min-width:0}@media (max-width:1100px){.flow-lab-destination>.automation-tool-mark{flex-basis:30px;width:30px;height:34px}.flow-lab-destination>.automation-tool-mark img{width:25px;height:25px}}
