.carousel-navigation { display: flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; max-width: 100%; margin: 24px auto 0; }
.carousel-navigation .carousel-arrow { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); background: #fff; cursor: pointer; }
.carousel-navigation .carousel-arrow:hover:not(:disabled) { background: var(--sky); }
.carousel-navigation .carousel-arrow:disabled { border-color: var(--line); color: var(--muted); opacity: .45; cursor: default; }
.carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; min-width: 0; gap: 0; }
.carousel-navigation .carousel-dot { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.carousel-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #7c91ad; }
.carousel-dot[aria-current="true"]::before { width: 9px; height: 9px; background: var(--blue); }
.carousel-navigation button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.carousel-navigation[hidden] { display: none; }
.hero-carousel-controls.carousel-navigation { justify-content: flex-start; max-width: 100%; margin: 0 0 12px; }
.rail-actions { flex-direction: column; align-items: center; }
.rail-actions .carousel-navigation { margin-top: 0; }
.stories-track { scrollbar-width: none; }
.stories-track::-webkit-scrollbar { display: none; }
@media (max-width: 700px) {
  .carousel-navigation { gap: 8px; }
}