.creator-carousel { min-width: 0; }
.creator-carousel__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.creator-carousel__header h2 { margin: 0; }
.creator-carousel__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.creator-carousel__actions > a { white-space: nowrap; }
.creator-carousel__controls { display: flex; align-items: center; gap: 6px; }
.creator-carousel [hidden] { display: none !important; }
.creator-carousel__button {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  color: #1685b3; background: #f3fbff; border: 1px solid #d7eaf5; border-radius: 50%;
  cursor: pointer; transition: background-color 150ms, border-color 150ms, opacity 150ms;
}
.creator-carousel__button:disabled { cursor: default; opacity: .35; }
.creator-carousel__viewport { position: relative; }
.creator-carousel__viewport::before, .creator-carousel__viewport::after {
  position: absolute; z-index: 1; top: 0; bottom: 4px; width: 22px; content: "";
  pointer-events: none; opacity: 0; transition: opacity 150ms;
}
.creator-carousel__viewport::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.creator-carousel__viewport::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }
.creator-carousel.has-previous .creator-carousel__viewport::before,
.creator-carousel.has-next .creator-carousel__viewport::after { opacity: 1; }
.creator-carousel__track {
  display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 6px;
  scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #b8dfef transparent;
}
.creator-carousel__card { box-sizing: border-box; flex: 0 0 180px; min-width: 0; scroll-snap-align: start; }
.creator-carousel__card img { -webkit-user-drag: none; }
.creator-carousel.is-enhanced .creator-carousel__track { scrollbar-width: none; }
.creator-carousel.is-enhanced .creator-carousel__track::-webkit-scrollbar { display: none; }
.creator-carousel.has-overflow .creator-carousel__track { cursor: grab; }
.creator-carousel.is-dragging .creator-carousel__track { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.creator-carousel.is-dragging .creator-carousel__card { cursor: grabbing; }
.creator-carousel__button:focus-visible, .creator-carousel__track:focus-visible, .creator-carousel__card:focus-visible {
  outline: 2px solid #00aff0; outline-offset: 2px;
}
.creator-carousel__card:focus-visible { outline-offset: -2px; }
.creator-carousel__progress { height: 2px; margin-top: 9px; overflow: hidden; border-radius: 2px; background: #e8f4fa; }
.creator-carousel__progress > span { display: block; height: 100%; min-width: 20px; border-radius: inherit; background: #63c5ec; }
@media (hover: hover) {
  .creator-carousel__button:hover:not(:disabled) { background: #e3f5fd; border-color: #8ed4ef; }
}
@media (max-width: 420px) {
  .creator-carousel__header { flex-wrap: wrap; gap: 8px; }
  .creator-carousel__actions { margin-left: auto; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .creator-carousel__button, .creator-carousel__viewport::before, .creator-carousel__viewport::after { transition: none; }
  .creator-carousel__track { scroll-behavior: auto; }
}