/* Shared visual interface: colored cores, dim resting bulbs, and lit halos. */
.has-marquee-lights::before,
.topbar.has-marquee-lights::after {
  display: none;
}
.has-marquee-lights > .marquee-lights {
  position: absolute;
  inset: 2px 8px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 10px;
  pointer-events: none;
  contain: layout paint;
}
.marquee-lights i {
  --bulb: #ff79b5;
  flex: 0 0 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bulb);
  opacity: .2;
}
.marquee-lights i:nth-child(4n + 2) { --bulb: #ffe26b; }
.marquee-lights i:nth-child(4n + 3) { --bulb: #5de5e5; }
.marquee-lights i:nth-child(4n) { --bulb: #cb79f2; }
.marquee-lights i.lit {
  opacity: 1;
  background: radial-gradient(circle, #fffce9 0 1px, var(--bulb) 2px);
  box-shadow: 0 0 5px 1px var(--bulb);
}
.topbar > .marquee-lights { top: auto; bottom: -5px; }
body.less-motion .marquee-lights i,
.collection-reduced .marquee-lights i { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .marquee-lights i { opacity: 1; }
}