/* A single clipped pill prevents tiny scaled corners and stale pseudo-element lines. */
.carousel-dots { gap:2px; }
.carousel-dot {
  appearance:none;
  position:relative;
  display:block;
  flex:0 0 auto;
  width:24px;
  height:44px;
  margin:0;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  box-shadow:none;
  transition:width .22s ease;
  -webkit-tap-highlight-color:transparent;
}
.carousel-dot::before,.carousel-dot::after { content:none; display:none; }
.carousel-dot.is-active { width:48px; background:transparent; }
.carousel-dot .carousel-dot-track {
  position:absolute;
  display:block;
  left:50%;
  top:18px;
  width:8px;
  height:8px;
  overflow:hidden;
  border:0;
  border-radius:999px;
  background:#b5b5b8;
  transform:translateX(-50%);
  transition:width .22s ease;
  pointer-events:none;
}
.carousel-dot.is-active .carousel-dot-track { width:40px; }
.carousel-dot .carousel-dot-fill {
  position:absolute;
  display:block;
  left:0;
  top:0;
  width:calc(8px + 32px * var(--carousel-progress,0));
  height:8px;
  border:0;
  border-radius:999px;
  background:#1d1d1f;
  transform:none;
  opacity:0;
  transition:none;
  pointer-events:none;
}
.carousel-dot.is-active .carousel-dot-fill { opacity:1; }
.carousel-dot:focus-visible { outline:2px solid #855f42; outline-offset:0; }
@media(prefers-reduced-motion:reduce) {
  .carousel-dot,.carousel-dot .carousel-dot-track { transition:none; }
  .carousel-dot.is-active .carousel-dot-fill { width:40px; transform:none; }
}