.hero-carousel .hero-frame{inset:0;opacity:0;transition:opacity .55s ease;object-position:center 55%}
.hero-carousel .hero-frame.is-active{opacity:1}
.hero-carousel .hero-frame:first-of-type{object-position:62% center}
.hero-carousel figcaption{bottom:68px;z-index:1}
.hero-carousel-controls{position:absolute;z-index:2;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:4px;border-radius:28px;background:#12384ded;color:white;box-shadow:0 2px 12px #0002}
.hero-carousel-controls[hidden]{display:none}
.hero-carousel-controls button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:0;border-radius:50%;background:transparent;color:white;font:20px Arial;cursor:pointer}
.hero-carousel-controls button:hover{background:#ffffff24}
.hero-carousel-controls button:focus-visible{outline:3px solid #edb541;outline-offset:1px}
.hero-carousel-controls output{min-width:42px;text-align:center;font:12px Arial;font-variant-numeric:tabular-nums}
.hero-carousel-controls button[data-action="pause"]{font-size:15px}
@media(prefers-reduced-motion:reduce){.hero-carousel .hero-frame{transition:none}}