.rp { --rp-on: var(--blue); --rp-off: color-mix(in oklab, var(--fg) 18%, transparent);
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 var(--rp-pair); }
.rp > .rp__ind { grid-area: 1 / 1; display: flex; align-items: center; min-width: 0; height: var(--rp-btn);
  margin-right: var(--rp-gap); margin-left: calc((var(--dot) - var(--pitch)) / 2); }
.rp > .rp__prev { grid-area: 1 / 2; }
.rp > .rp__next { grid-area: 1 / 3; }
.rp--snap { --rp-btn: 40px; --rp-pair: 12px; --rp-gap: 16px; --dot: 9px; --pill: 32px; --pitch: 24px; }
@media (min-width: 64rem) { .rp--snap { display: none; } }
.rail-ctl.rp { --rp-btn: 32px; --rp-pair: 8px; --rp-gap: 24px; --dot: 8px; --pill: 28px; --pitch: 22px; }
@media not all and (min-width: 24.375rem) { .rail-ctl.rp { --rp-gap: 16px; } }
@media (min-width: 48rem) { .rail-ctl.rp { --rp-btn: 24px; --dot: 7px; --pill: 24px; --pitch: 18px; } }
@media (min-width: 48rem) and (pointer: coarse) { .rail-ctl.rp { --pitch: 22px; } }
.rp__dot { display: flex; flex: none; align-items: center; justify-content: center; width: var(--pitch); height: 44px;
  transition: width .5s var(--ease-out-cubic); }
.rp__dot::before { content: ""; flex: none; width: var(--dot); height: var(--dot); border-radius: calc(infinity * 1px); background: var(--rp-off);
  transition: width .5s var(--ease-out-cubic), background-color .3s var(--ease); }
.rp__dot.is-on { width: calc(var(--pitch) - var(--dot) + var(--pill)); }
.rp__dot.is-on::before { width: var(--pill); background: var(--rp-on); }
@media (hover: hover) { .rp__dot:not(.is-on):hover::before { background: var(--fg-40); } }
.rp:not(.is-ready) .rp__ind *, .rp:not(.is-ready) .rp__ind ::before, .rp:not(.is-ready) .rp__ind ::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rp .rp__ind *, .rp .rp__ind ::before, .rp .rp__ind ::after { transition: none !important; }
  .rail__list, .nums__cards { scroll-behavior: auto; }
}