.pp-roll {
  display: flex;
  height: 1.1em; 
}


.pp-roll__col {
  width: 1ch;
  overflow: hidden;
  background: var(--color-accent);
  color: var(--color-ink);
}


.pp-roll__strip {
  transition: transform var(--dur-count) var(--ease-out);
}

.pp-roll__strip > span {
  display: block; 
}


.pp-roll__strip[data-to="0"] { transform: translateY(0); }
.pp-roll__strip[data-to="1"] { transform: translateY(-1.1em); }
.pp-roll__strip[data-to="2"] { transform: translateY(-2.2em); }
.pp-roll__strip[data-to="3"] { transform: translateY(-3.3em); }
.pp-roll__strip[data-to="4"] { transform: translateY(-4.4em); }
.pp-roll__strip[data-to="5"] { transform: translateY(-5.5em); }
.pp-roll__strip[data-to="6"] { transform: translateY(-6.6em); }
.pp-roll__strip[data-to="7"] { transform: translateY(-7.7em); }
.pp-roll__strip[data-to="8"] { transform: translateY(-8.8em); }
.pp-roll__strip[data-to="9"] { transform: translateY(-9.9em); }


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