.pp-mq {
  position: relative;
  height: 0;
  overflow-x: clip;
  pointer-events: none;
}


.pp-mq__band {
  position: absolute;
  top: 0;
  left: -3%;
  width: 106%;
  padding-block: var(--space-4);
  background: var(--color-ink);
  color: var(--color-accent);
  transform: translateY(-50%) rotate(-2.5deg); 
  pointer-events: none;
}


.pp-mq__track {
  display: flex;
  width: max-content;
  animation: pp-mq-slide calc(var(--dur-drift) * 4) linear infinite;
}

@keyframes pp-mq-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-1500px); }
}

.pp-mq__unit {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}


.pp-mq__item {
  position: relative;
  flex: 0 0 300px;
  overflow: hidden;
  padding-inline: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-title-s);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pp-mq__item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: var(--space-2);
  height: var(--space-2);
  background: var(--color-accent);
  transform: translate(50%, -50%) rotate(45deg);
}


.pp-mq__btn {
  position: absolute;
  right: var(--space-2);
  bottom: 0;
  z-index: 2;
  min-height: var(--tap-l);
  min-width: var(--tap-l);
  padding: 0 var(--space-3);
  border: var(--border) solid var(--color-ink);
  border-radius: var(--radius-m);
  background: var(--color-accent);
  color: var(--color-ink);
  font: 650 var(--pp-text-sm) / 1.2 var(--font-body);
  pointer-events: auto;
  cursor: pointer;
}


.pp-mq__band:focus-within .pp-mq__track,
.pp-mq[data-pp-mq="still"] .pp-mq__track {
  animation-play-state: paused;
}


@media (prefers-reduced-motion: reduce) {
  .pp-mq__track { animation: none; }
}