


:where(#agent-flow[data-bead-renderer]) .exo-bead{
  appearance:none;-webkit-appearance:none;
  box-sizing:content-box;padding:0;margin:0;border:0;border-radius:0;
  background:none;box-shadow:none;color:inherit;
  font:inherit;font-size:0;line-height:0;letter-spacing:0;text-align:left;
  min-width:0;min-height:0;overflow:visible;
  animation:none;pointer-events:auto;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

#agent-flow[data-bead-renderer] .exo-bead:is(:hover,:active,:focus,:focus-visible){background:none;border:0;box-shadow:none}

#agent-flow[data-bead-renderer][data-sprite-style] .exo-bead.agent-streak{height:3px;aspect-ratio:auto;border-radius:0;transform-origin:100% 50%;offset-anchor:100% 50%}
#agent-flow[data-bead-renderer][data-sprite-style=galaxy] .exo-bead.agent-streak{height:auto;aspect-ratio:1}

:where(#agent-flow[data-bead-renderer] .exo-bead)::before{top:0}

#agent-flow[data-bead-renderer][data-sprite-style] .exo-bead.agent-streak::before{animation:none;pointer-events:none;--transit-hue:inherit;--transit-glow:inherit}


#agent-flow[data-bead-renderer] .exo-bead{--transit-hue:var(--agent-ink,var(--bead-color,#adb2c0))}


#agent-flow[data-bead-renderer][data-sprite-style] .exo-bead.agent-streak::after{
  content:'';position:absolute;inset:auto;left:-6px;right:-6px;top:-10px;bottom:-10px;
  width:auto;height:auto;transform:none;border-radius:0;
  background:none;box-shadow:none;opacity:1;pointer-events:auto;
}

#agent-flow[data-bead-renderer][data-sprite-style=galaxy] .exo-bead.agent-streak::before{mix-blend-mode:screen}
#agent-flow[data-bead-renderer][data-sprite-style=galaxy] .exo-bead.agent-streak::after{
  left:-6px;right:-6px;top:-6px;bottom:-6px;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle closest-side,
    color-mix(in srgb,var(--agent-ink,#adb2c0) 34%,transparent) 0%,
    color-mix(in srgb,var(--agent-ink,#adb2c0) 14%,transparent) 38%,
    transparent 70%);
}
#agent-flow[data-bead-renderer][data-sprite-style=galaxy] .exo-bead.agent-streak:is(:hover,:focus-visible)::after{
  background:radial-gradient(circle closest-side,
    color-mix(in srgb,var(--agent-ink,#adb2c0) 60%,transparent) 0%,
    color-mix(in srgb,var(--agent-ink,#adb2c0) 25%,transparent) 45%,
    transparent 78%);
}

#agent-flow[data-bead-renderer] .exo-bead:focus-visible{outline:1px solid #fff;outline-offset:4px;z-index:5}
@media(forced-colors:active){#agent-flow[data-bead-renderer] .exo-bead{display:none!important}}
