/* Scoped motion direction: champagne, deliberate pacing, no flashing. */
#agent-flow{--route-gold:#e4c793;--route-muted:#8a7859;--route-duration:5600ms}
#agent-flow .route-toolbar[hidden]{display:none}
#agent-flow .route-toolbar{display:flex;align-items:center;gap:16px;margin:32px 0 0;min-height:46px;padding-bottom:15px;border-bottom:1px solid #c3a36a24}
#agent-flow .route-progress{display:flex;gap:5px;max-width:180px;flex:1}
#agent-flow .route-progress>span{height:2px;background:#cbb07d24;position:relative;flex:1;overflow:hidden}
#agent-flow .route-progress>span:after{content:'';position:absolute;inset:0;background:var(--route-gold);transform:scaleX(0);transform-origin:left}
#agent-flow .route-progress>span.is-past:after{transform:scaleX(1)}
#agent-flow .route-progress>span.is-current:after{animation:route-progress var(--route-duration) linear both}
#agent-flow .route-position{font:12px Georgia,serif;letter-spacing:1.5px;color:var(--route-gold);white-space:nowrap}
#agent-flow .route-mode{font-size:11px;color:#9b9589;letter-spacing:.2px}
#agent-flow .route-toggle{display:inline-flex;align-items:center;gap:10px;margin-left:auto;color:#d8c49f;border:1px solid #b59c6d3b;background:#c5a36a05;border-radius:30px;padding:10px 15px;min-height:44px;cursor:pointer;font:inherit;font-size:11px;transition:background .3s,border-color .3s}
#agent-flow .route-toggle:hover{background:#c5a36a10;border-color:#b59c6d88}
#agent-flow .route-control-icon{width:12px;text-align:center;letter-spacing:1px}
#agent-flow .flow-map{margin-top:28px;gap:42px 36px}
#agent-flow .flow-node{isolation:isolate;border-top-color:#76623c70;transition:background .7s,border-color .7s,box-shadow .7s;min-height:285px}
#agent-flow .flow-node:before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 20% 0,#d7b47713,transparent 75%);opacity:0;transition:opacity .8s}
#agent-flow .flow-node:after{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:linear-gradient(90deg,#aa8148,#f2dcaf,#aa81484d);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--motion-ease)}
#agent-flow .flow-node-4:after,#agent-flow .flow-node-5:after,#agent-flow .flow-node-6:after{transform-origin:right}
#agent-flow .flow-node.is-active:before{opacity:1}
#agent-flow .flow-node.is-active:after,#agent-flow .flow-node.is-complete:after{transform:scaleX(1)}
#agent-flow .flow-node.is-complete:after{opacity:.38}
#agent-flow .flow-top{margin-bottom:14px}
#agent-flow .flow-node h3{transition:color .6s}
#agent-flow .flow-node.is-active h3{color:#f0d7a9}
#agent-flow .flow-node .flow-icon{transition:color .6s; color:#b69a65}
#agent-flow .flow-node.is-active .flow-icon{color:#f0d7a9}
#agent-flow .route-step{border:0;background:none;padding:5px;min-width:44px;min-height:44px;cursor:pointer;transition:color .4s;font:italic 28px Georgia,serif;letter-spacing:1px;color:#8c7957}
#agent-flow .route-step:hover,#agent-flow .is-active .route-step{color:#f1dbb1}
#agent-flow button:focus-visible{outline:2px solid #e4c793;outline-offset:5px}
#agent-flow .flow-arrow{stroke:#736246;opacity:.65;transition:stroke .6s,opacity .6s}
#agent-flow .is-complete>.flow-arrow{stroke:#c5a36c;opacity:1}
#agent-flow .is-active>.flow-arrow{stroke:#f0d7aa;opacity:1;stroke-dasharray:46;animation:route-arrow var(--route-duration) ease-in-out both}
#agent-flow .route-visual{height:76px;position:relative;display:flex;align-items:center;margin:0 0 20px;border:1px solid #c7aa7718;background:linear-gradient(110deg,#d0ac6e07,#d0ac6e02);border-radius:9px;padding:0 14px;overflow:hidden;color:#b9a37f;opacity:.62;transition:opacity .6s,border-color .6s}
#agent-flow .is-active .route-visual,#agent-flow .is-complete .route-visual{opacity:1;border-color:#c7aa7735}
#agent-flow .route-visual svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#agent-flow .route-profile{display:flex;align-items:center;gap:11px;width:100%}
#agent-flow .route-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid #c7aa7740;background:#c7aa7709;flex:none}
#agent-flow .route-avatar svg{width:21px;height:21px}
#agent-flow .route-profile-lines{display:flex;flex-direction:column;gap:7px;flex:1}
#agent-flow .route-profile-lines i{height:3px;width:75%;background:#c7aa773e;border-radius:4px}
#agent-flow .route-profile-lines i+ i{width:50%;opacity:.5}
#agent-flow .route-profile-match{font-size:9px;white-space:nowrap;color:#d2b783}
#agent-flow .route-profile-match b{font-weight:400;margin-left:5px}
#agent-flow .route-scan{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#e4c79313 50%,transparent 70%);transform:translateX(-120%)}
#agent-flow .is-active .route-scan{animation:route-scan 2s .1s ease-in-out both}
#agent-flow .is-active .route-profile-match{animation:route-enter .65s .9s both}
#agent-flow .route-visual-2{flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}
#agent-flow .route-message{display:flex;align-items:center;gap:7px;height:19px;border:1px solid #c7aa7733;background:#c7aa7708;border-radius:6px;padding:5px 9px;width:71%}
#agent-flow .route-message-two{align-self:flex-end;width:57%;background:#c7aa7713}
#agent-flow .route-message i{height:2px;background:#d4bb894f;width:64%;border-radius:2px}
#agent-flow .route-message i+i{width:18%;opacity:.5}
#agent-flow .route-dots{display:flex;gap:3px;margin-left:auto}
#agent-flow .route-dots b{height:3px;width:3px;border-radius:50%;background:#cbb180}
#agent-flow .is-active .route-message-one{animation:route-enter .7s .15s both}
#agent-flow .is-active .route-message-two{animation:route-enter .7s .8s both}
#agent-flow .is-active .route-dots b{animation:route-dot 1.4s 1.2s 2 ease-in-out}
#agent-flow .is-active .route-dots b:nth-child(2){animation-delay:1.4s}
#agent-flow .is-active .route-dots b:nth-child(3){animation-delay:1.6s}
#agent-flow .route-consent{display:flex;align-items:center;gap:13px;font-size:10px}
#agent-flow .route-consent svg{width:40px;height:40px;flex:none}
#agent-flow .route-consent circle{stroke:#c7aa7740}
#agent-flow .route-consent path{stroke-dasharray:90;stroke-dashoffset:0;stroke:#ead3a8;stroke-width:1.8}
#agent-flow .is-active .route-consent path{animation:route-draw 1s .2s both}
#agent-flow .is-active .route-consent span{animation:route-enter .7s .65s both}
#agent-flow .route-publication{display:flex;align-items:center;gap:13px;width:100%}
#agent-flow .route-post{display:grid;place-items:center;width:29px;height:43px;border-radius:5px;border:1px solid #c7aa7750;background:linear-gradient(150deg,#9f835a25,transparent);flex:none}
#agent-flow .route-post svg{width:19px;height:19px;stroke-width:1}
#agent-flow .route-link{display:flex;flex-direction:column;gap:6px;flex:1}
#agent-flow .route-link b{font-size:11px;font-weight:400;letter-spacing:.4px}
#agent-flow .route-link i{height:2px;width:80%;background:#c7aa773f;transform-origin:left}
#agent-flow .route-published{display:grid;place-items:center;height:25px;width:25px;border:1px solid #c7aa7730;border-radius:50%;font-size:16px}
#agent-flow .is-active .route-link i{animation:route-progress 1.4s .3s both}
#agent-flow .is-active .route-published{animation:route-enter .7s 1s both}
#agent-flow .route-transfer{display:flex;align-items:center;gap:10px;width:100%}
#agent-flow .route-file svg{width:26px;height:31px}
#agent-flow .route-transfer-line{flex:1;height:1px;background:#c7aa7730;position:relative}
#agent-flow .route-transfer-line i{position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:#ead0a1;box-shadow:0 0 8px #eac58a55;opacity:0}
#agent-flow .route-recipient{font-size:10px;white-space:nowrap;border:1px solid #c7aa772e;border-radius:5px;padding:7px}
#agent-flow .is-active .route-transfer-line i{animation:route-transfer 1.7s .3s 2 ease-in-out}
#agent-flow .route-reward{display:flex;align-items:center;gap:12px;width:100%}
#agent-flow .route-reward-value{font:36px Georgia,serif;letter-spacing:-2px;color:#e8cfa2;white-space:nowrap}
#agent-flow .route-reward-value>span{font-size:20px;margin-left:2px}
#agent-flow .route-reward-caption{font-size:10px;line-height:1.7;white-space:nowrap}
#agent-flow .route-reward-caption small{font-size:8px;color:#928674}
#agent-flow .route-reward>svg{width:57px;height:40px;margin-left:auto;flex-shrink:1;min-width:20px;color:#d3b783}
#agent-flow .route-chart-base{stroke:#c7aa7728}
#agent-flow .route-chart{stroke-dasharray:90;stroke-width:1.6}
#agent-flow .is-active .route-chart{animation:route-draw 1.9s .25s both}
#agent-flow .is-active .route-chart-tip{animation:route-enter .4s 1.7s both}
#agent-flow .is-active .route-reward-value{animation:route-enter 1s .2s both}
#agent-flow.is-paused *,#agent-flow.is-paused *:after{animation-play-state:paused!important}
@keyframes route-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes route-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes route-draw{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
@keyframes route-scan{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes route-dot{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes route-transfer{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 5px);opacity:0}}
@keyframes route-arrow{0%,55%{stroke-dashoffset:46;opacity:.25}85%,100%{stroke-dashoffset:0;opacity:1}}
@media(max-width:1000px) and (min-width:761px){#agent-flow .route-visual{padding:0 9px}#agent-flow .route-profile-match{font-size:8px}#agent-flow .route-reward{gap:7px}#agent-flow .route-reward>svg{display:none}#agent-flow .route-reward-caption{font-size:9px}#agent-flow .route-consent{font-size:9px;gap:8px}#agent-flow .route-recipient{font-size:9px;padding:5px}}
@media(max-width:760px){#agent-flow .route-toolbar{margin-top:24px;gap:11px;padding-bottom:12px}#agent-flow .route-progress{max-width:100px}#agent-flow .route-mode{font-size:9px;margin-left:auto}#agent-flow .route-toggle{display:none}#agent-flow .route-position{font-size:10px}#agent-flow .flow-map{gap:30px;margin-top:22px}#agent-flow .flow-node{min-height:208px;padding:18px 14px 19px 63px;border-radius:0}#agent-flow .flow-node:after{transform-origin:left}#agent-flow .flow-top{margin:0}#agent-flow .route-step{position:absolute;left:2px;top:62px;font-size:21px}#agent-flow .route-visual{height:65px;margin-bottom:17px;padding:0 12px}#agent-flow .route-reward-value{font-size:32px}#agent-flow .route-reward-caption{font-size:9px}#agent-flow .flow-arrow{left:calc(50% - 15px);right:auto;top:calc(100% + 2px)}#agent-flow .route-progress>span.is-current:after{animation:none;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){#agent-flow *,#agent-flow *:before,#agent-flow *:after{animation:none!important;transition:none!important}#agent-flow .route-progress>span.is-current:after{transform:scaleX(1)}#agent-flow .route-visual{opacity:1}#agent-flow .route-toggle{display:none}#agent-flow .route-scan,#agent-flow .route-transfer-line i{display:none}}

/* Final stage: incoming credits dissolve into the balance. */
#agent-flow .route-reward{gap:10px}
#agent-flow .route-reward-value{flex:none}
#agent-flow .route-reward-caption{flex:1;min-width:0;white-space:normal;line-height:1.55}
#agent-flow .route-balance{position:relative;display:block;width:54px;height:66px;flex:0 0 54px;margin-left:auto;color:#e5c997}
#agent-flow .route-credit{position:absolute;top:0;left:15px;display:block;white-space:nowrap;font:12px Georgia,serif;letter-spacing:1px;opacity:0;transform:translate3d(0,-3px,0);will-change:transform,opacity;z-index:2}
#agent-flow .route-credit-b{left:6px;--credit-x:8px}
#agent-flow .route-credit-c{left:23px;--credit-x:-8px}
#agent-flow .route-wallet{position:absolute;left:5px;top:28px;width:44px;height:31px;display:block}
#agent-flow .route-wallet svg{position:relative;z-index:1;width:44px;height:31px;stroke-width:1.15;fill:none;color:#c3a779}
#agent-flow .route-wallet .route-wallet-body{fill:#c1a26b08}
#agent-flow .route-wallet-halo{position:absolute;inset:0 1px;border-radius:9px;background:radial-gradient(ellipse,#e5bb6624,transparent 75%);opacity:0;transform:scale(.8);z-index:0}
#agent-flow .route-balance-label{position:absolute;bottom:-1px;width:100%;text-align:center;font-size:8px;letter-spacing:.5px;color:#a69880}
#agent-flow .is-active .route-credit{animation:route-credit-in 2.2s 0s 2 cubic-bezier(.25,.1,.3,1) both}
#agent-flow .is-active .route-credit-b{animation-delay:.6s}
#agent-flow .is-active .route-credit-c{animation-delay:1.2s}
#agent-flow .is-active .route-wallet-halo{animation:route-wallet-light 2.2s .55s 2 ease-in-out both}
#agent-flow .is-active .route-wallet svg{animation:route-wallet-receive 2.2s .55s 2 ease-in-out both}
@keyframes route-credit-in{0%{opacity:0;transform:translate3d(0,-3px,0) scale(.96)}15%{opacity:1;transform:translate3d(0,2px,0) scale(1)}45%{opacity:1}70%{opacity:0;transform:translate3d(var(--credit-x,0px),33px,0) scale(.55)}100%{opacity:0;transform:translate3d(var(--credit-x,0px),33px,0) scale(.55)}}
@keyframes route-wallet-light{0%,100%{opacity:0;transform:scale(.8)}30%{opacity:1;transform:scale(1.35)}65%{opacity:.25;transform:scale(1.5)}}
@keyframes route-wallet-receive{0%,100%{color:#c3a779}30%,50%{color:#f5dfb6}}
@media(max-width:1000px) and (min-width:761px){#agent-flow .route-balance{width:43px;flex-basis:43px}#agent-flow .route-wallet{left:0}#agent-flow .route-reward{gap:7px}#agent-flow .route-reward-value{font-size:30px}#agent-flow .route-reward-caption{font-size:9px}}
@media(max-width:760px){#agent-flow .route-balance{height:61px;width:46px;flex-basis:46px}#agent-flow .route-wallet{top:25px;left:1px}#agent-flow .route-balance-label{font-size:7px;bottom:-3px}#agent-flow .route-credit{font-size:11px}#agent-flow .route-reward{gap:8px}}
@media(prefers-reduced-motion:reduce){#agent-flow .route-credit,#agent-flow .route-wallet-halo{display:none}#agent-flow .route-balance *{animation:none!important}}