/* R25: illustrative workflows; no live metrics or API connections. */
.r25-flow{position:relative;z-index:3;margin:0 13px 12px;padding:15px 9px 9px;border:1px solid rgba(91,202,251,.28);border-radius:14px;background:linear-gradient(135deg,rgba(4,22,47,.93),rgba(13,37,76,.96));box-shadow:inset 0 0 20px rgba(26,126,219,.12)}
.r25-flow-track{height:3px;margin:18px 9% -3px;position:relative;background:linear-gradient(90deg,#3979b5,#77e6ff,#958cff);border-radius:4px}
.r25-flow-token{position:absolute;left:0;top:50%;width:11px;height:11px;transform:translate(-50%,-50%);border-radius:50%;background:#b3faff;box-shadow:0 0 11px 4px rgba(60,196,255,.65);transition:left .65s cubic-bezier(.2,.8,.2,1)}
.r25-flow-steps{display:flex;justify-content:space-between;gap:3px;position:relative}
.r25-node{min-width:0;flex:1;padding:12px 1px 5px;background:none;border:0;color:#a9c9e6;cursor:pointer;font-size:clamp(7px,1.6vw,10px);font-weight:700;letter-spacing:.03em;line-height:1.4;transition:color .18s ease,text-shadow .18s ease}
.r25-node::before{content:"";display:block;width:10px;height:10px;border:1px solid #6acbf9;background:#0d3462;border-radius:50%;margin:-4px auto 9px;box-shadow:0 0 7px #3c9de7;transition:transform .18s,background .18s}
.r25-node:hover,.r25-node:focus-visible,.r25-node[data-active="true"]{color:#fff;text-shadow:0 0 10px #50d9ff}
.r25-node:hover::before,.r25-node:focus-visible::before,.r25-node[data-active="true"]::before{background:#aff6ff;transform:scale(1.4)}
.r25-node:focus-visible{outline:2px solid #8ee7ff;outline-offset:2px;border-radius:5px}
.r25-flow-caption{font-size:10px!important;line-height:1.5!important;margin:7px 3px 0!important;color:#99b9d4!important;min-height:30px}
.r25-flow[data-paused="true"] .r25-flow-token{transition-duration:.3s}

@media(prefers-reduced-motion:reduce){.r25-flow-token{transition:none!important}.r25-node{transition:none!important}}
@media(max-width:500px){.r25-flow{margin:0 10px 10px;padding:12px 6px 8px}.r25-node{font-size:8px}}