/* Neon belongs to the link's words, never to a full-column separator. */
.neon-ink{position:relative;display:inline-block;line-height:16px}
.neon-ink::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--link-paint,linear-gradient(90deg,#c7ff3f 0 42%,#5be7ff 42% 67%,#ff57c8 67% 100%));
  opacity:0;pointer-events:none;
}
.neon-link[data-link-pattern="dots"] .neon-ink::after{
  height:3px;bottom:-5px;
  -webkit-mask-image:radial-gradient(circle at 1.5px 1.5px,#000 1.2px,transparent 1.5px);
  mask-image:radial-gradient(circle at 1.5px 1.5px,#000 1.2px,transparent 1.5px);
  -webkit-mask-size:6px 3px;mask-size:6px 3px;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
}
@media(hover:hover){.neon-link:hover .neon-ink::after{opacity:1}}
.neon-link:focus-visible .neon-ink::after{opacity:1}
.brand-link{--brand-a:#c7ff3f;--brand-b:#5be7ff;--brand-c:#ff57c8}
.brand-name{position:relative;display:inline-block;line-height:inherit}
.brand-name::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,var(--brand-a) 0 18.75%,var(--brand-b) 18.75% 50%,var(--brand-c) 50% 100%);
}
.brand-piece{fill:currentColor;transform:translate(0,0);transition:fill 100ms linear}
.brand-piece-top{--piece-x:-12px;--piece-y:-4px;--piece-ink:var(--brand-a)}
.brand-piece-bottom{--piece-x:12px;--piece-y:4px;--piece-ink:var(--brand-b)}
@keyframes zebra-register{
  0%,70%,100%{transform:translate(0,0)}
  24%,40%{transform:translate(var(--piece-x),var(--piece-y))}
}
@media(hover:hover){
  .brand-link:hover .brand-piece{fill:var(--piece-ink);animation:zebra-register 360ms cubic-bezier(.2,.8,.2,1) both}
  .brand-link:hover .brand-name::after{opacity:1}
}
.brand-link:focus-visible .brand-piece{fill:var(--piece-ink);animation:zebra-register 360ms cubic-bezier(.2,.8,.2,1) both}
.brand-link:focus-visible .brand-name::after{opacity:1}
body.is-paused .brand-piece{animation:none!important;transition:none}
@media(prefers-reduced-motion:reduce){.brand-piece{animation:none!important;transition:none}}
@media(forced-colors:active){
  .neon-ink::after{background:LinkText;forced-color-adjust:none}
  .neon-link[data-link-pattern="dots"] .neon-ink::after{-webkit-mask:none;mask:none;height:2px;bottom:-4px}
  .brand-link{--brand-a:LinkText;--brand-b:LinkText;--brand-c:LinkText}
  .brand-name::after{background:LinkText;forced-color-adjust:none}
  .brand-piece{fill:currentColor!important}
}