Pure CSS Carousel

<!-- Pure CSS Carousel — scroll-snap, zero JS.
     Swipe / drag / arrow-keys move between slides. -->
<div class="nuda-css-carousel">
  <div class="nuda-css-carousel__track" tabindex="0" aria-label="Slides">
    <div class="nuda-css-carousel__slide">Slide 1</div>
    <div class="nuda-css-carousel__slide">Slide 2</div>
    <div class="nuda-css-carousel__slide">Slide 3</div>
  </div>
  <div class="nuda-css-carousel__dots" aria-hidden="true">
    <span class="nuda-css-carousel__dot"></span>
    <span class="nuda-css-carousel__dot"></span>
    <span class="nuda-css-carousel__dot"></span>
  </div>
</div>

/* Pure CSS Carousel
   CSS scroll-snap. Swipe / drag / focus + arrow keys.
   No JS. Customize: --nuda-css-car-accent */

.nuda-css-carousel {
  --nuda-css-car-accent: #e4ff54;
  width: 100%;
  max-width: 480px;
}

.nuda-css-carousel__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nuda-css-carousel__track::-webkit-scrollbar { height: 0; }

.nuda-css-carousel__track:focus-visible {
  outline: 2px solid var(--nuda-css-car-accent);
  outline-offset: 2px;
}

.nuda-css-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #09090b;
  border-radius: 14px;
  background: var(--nuda-css-car-accent);
}

.nuda-css-carousel__slide:nth-child(2) { background: #7dd3fc; }
.nuda-css-carousel__slide:nth-child(3) { background: #fca5a5; }

.nuda-css-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 0.7rem;
}

.nuda-css-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s, transform 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-css-carousel__track { scroll-behavior: auto; }
  .nuda-css-carousel__dot { transition: none; }
}