.order-flow{--of-canvas:#f5f4ef;--of-canvas-dot:#d8d5ca;--of-ink:#1c1c1e;--of-ink-2:#57575e;--of-ink-3:#8d8d94;--of-node:#fff;--of-node-line:#d9d6cc;--of-panel:#fcfbf8;--of-panel-line:#e7e4db;--of-live:#0a9a68;--of-live-soft:#ddf5ea;--of-customer:#2f6be4;--of-customer-soft:#e5edfd;--of-sales:#d4720a;--of-sales-soft:#fcefdc;--of-system:#5f6b7d;--of-system-soft:#eceff3;--of-time:#0b8583;--of-time-soft:#dcf2f1;--of-added:#7a3fe0;--of-added-soft:#f0e9fd;--of-pill:#fbc84b;--of-band:#e4f3da;--of-sticky:#cfe5ff;background-color:var(--of-canvas);color:var(--of-ink)}.dark .order-flow{--of-canvas:#161618;--of-canvas-dot:#2c2c30;--of-ink:#f2f2f3;--of-ink-2:#b4b4bb;--of-ink-3:#7b7b84;--of-node:#222226;--of-node-line:#3a3a40;--of-panel:#1b1b1e;--of-panel-line:#2d2d32;--of-live:#34d399;--of-live-soft:#123a2b;--of-customer:#6e9bff;--of-customer-soft:#1a2744;--of-sales:#f5a33b;--of-sales-soft:#3a2810;--of-system:#9aa5b7;--of-system-soft:#262b33;--of-time:#3cc7c3;--of-time-soft:#0f3130;--of-added:#b08bff;--of-added-soft:#2a1f44;--of-pill:#e8b43a;--of-band:#1c2a17;--of-sticky:#1d3450}.order-flow .board-viewport{background-color:var(--of-canvas);background-image:radial-gradient(var(--of-canvas-dot) 1.1px, transparent 1.1px);cursor:grab;touch-action:none}.order-flow .board-viewport.is-panning{cursor:grabbing}.order-flow .board-world.is-animating{transition:transform .7s cubic-bezier(.22,1,.36,1)}.order-flow .state-node{transition:box-shadow .3s,border-color .3s,background-color .3s,opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1)}.order-flow .state-node.is-live{box-shadow:0 0 0 3px var(--of-live), 0 0 0 9px color-mix(in oklab, var(--of-live) 18%, transparent), 0 12px 28px -10px color-mix(in oklab, var(--of-live) 55%, transparent)}.order-flow .state-node.just-entered{animation:.52s cubic-bezier(.34,1.56,.64,1) of-node-pop}@keyframes of-node-pop{0%{transform:scale(.94)}60%{transform:scale(1.04)}to{transform:scale(1)}}.order-flow .state-node.is-nudged{animation:.42s cubic-bezier(.36,.07,.19,.97) of-node-nudge}@keyframes of-node-nudge{20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.order-flow .live-dot:after{content:"";background:var(--of-live);border-radius:999px;animation:1.8s cubic-bezier(0,0,.2,1) infinite of-live-ping;position:absolute;inset:0}@keyframes of-live-ping{75%,to{opacity:0;transform:scale(2.6)}}.order-flow .edge-path{transition:stroke .3s,opacity .3s,stroke-width .3s}.order-flow .edge-fired{stroke-dasharray:8 1000;animation:.9s cubic-bezier(.4,0,.2,1) forwards of-edge-draw}@keyframes of-edge-draw{0%{stroke-dasharray:0 3000;opacity:1}70%{stroke-dasharray:3000 0;opacity:1}to{stroke-dasharray:3000 0;opacity:0}}.order-flow .chip{transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,opacity .3s,background-color .3s}.order-flow .chip.is-enabled:hover{transform:translateY(-2px)scale(1.05)}.order-flow .chip.is-highlighted:before{content:"";border:2px solid var(--chip-ring,currentColor);pointer-events:none;border-radius:999px;animation:1.4s ease-out infinite of-chip-ring;position:absolute;inset:-5px}@keyframes of-chip-ring{0%{opacity:.9;transform:scale(.96)}to{opacity:0;transform:scale(1.25)}}.order-flow .effect-flash{animation:1.6s ease-out of-effect-flash}@keyframes of-effect-flash{0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--of-system) 60%, transparent);transform:scale(1)}15%{box-shadow:0 0 0 10px color-mix(in oklab, var(--of-system) 25%, transparent);transform:scale(1.05)}to{transform:scale(1);box-shadow:0 0 0 22px #0000}}.order-flow .popover-in{animation:.18s cubic-bezier(.22,1,.36,1) of-popover-in}@keyframes of-popover-in{0%{opacity:0;transform:translateY(4px)scale(.98)}}.order-flow .fade-up{animation:.42s cubic-bezier(.22,1,.36,1) both of-fade-up}@keyframes of-fade-up{0%{opacity:0;transform:translateY(6px)}}.order-flow .scroll-soft{scrollbar-width:thin;scrollbar-color:var(--of-panel-line) transparent}@media (prefers-reduced-motion:reduce){.order-flow *,.order-flow :before,.order-flow :after{transition-duration:1ms!important;animation-duration:1ms!important}}