/* The piece carousel built from units (unit-carousel.js). Link after
   unit.css. carousel.js reads --hu (piece spacing: GAP = 2 units) and
   --accent (the Yellow swatch); both point at the unit system here. */
:root { --accent: #FED700; }
body { --hu: var(--S); }

/* The frame's FACE is the mask: the track fills it and clips to it. */
.car-frame > .body > .face { display: block; }
.carousel-track {
  position: absolute; inset: 0;
  cursor: grab; user-select: none; -webkit-user-drag: none;
  touch-action: pan-y; clip-path: inset(0);
}
.carousel-track.is-dragging { cursor: grabbing; }
/* Slide styles: the same as site/elements/demo.html's carousel block. */
.car-slide {
  position: absolute; left: 50%; top: 50%;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
  transition: transform .34s cubic-bezier(.2, .7, .2, 1);
  user-select: none; -webkit-user-drag: none;
}
@media (prefers-reduced-motion: reduce) { .car-slide { transition: none; } }
.car-slide img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  -webkit-user-drag: none; user-select: none; touch-action: none; pointer-events: none;
  filter: var(--car-recolor, none);
}
.car-slide.is-center { cursor: grab; }
.car-slide.is-center.is-spinning { cursor: grabbing; }

.car-arrow svg { width: var(--S); height: var(--S); fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: square; }