/* Load after style.css. The outer band keeps its original angle and colors. */
:is(.ribbon, .name-band) > .marquee {
  display: block;
  width: 100%;
  animation: none;
  transform: none;
  will-change: auto;
}
.cb-marquee-viewport { overflow: hidden; }
/* Overscan also keeps the tilted menu bands covering both screen edges. */
.name-band.cb-marquee-viewport { width: 110%; margin-left: -5%; }
.cb-marquee { position: relative; text-align: left; }
.cb-marquee-track,
.cb-marquee-group {
  display: flex;
  width: max-content;
  box-sizing: border-box;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0;
  white-space: nowrap;
  direction: ltr;
}
.cb-marquee-track {
  animation: cb-marquee-loop var(--cb-marquee-duration, 30s) linear infinite;
  will-change: transform;
}
.cb-marquee-unit {
  display: block;
  box-sizing: border-box;
  flex: 0 0 auto;
  padding-inline-end: .35em;
  white-space: pre;
}
.marquee.reverse .cb-marquee-track { animation-direction: reverse; }
.is-marquee-paused .cb-marquee-track { animation-play-state: paused; }
.cb-marquee-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@keyframes cb-marquee-loop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--cb-marquee-distance, 0px)), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-marquee-track { animation: none !important; transform: none; will-change: auto; }
}