.carousel-stage{position:relative}
.carousel{scroll-behavior:auto;overflow-anchor:none}
.carousel-controls{position:absolute;inset:auto var(--content-gutter) calc(50% - .5px);transform:none;display:flex;justify-content:space-between;align-items:center;gap:12px;width:auto;margin:0;padding:0 32px;z-index:3;pointer-events:none}
.carousel-controls .icon-button{pointer-events:auto;flex:0 0 90px;width:90px;height:52px;border:0;border-radius:4px;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color 300ms ease}
.carousel-controls .icon-button img{width:24px;height:24px;max-width:24px;max-height:24px;filter:brightness(0) invert(1)}
.carousel-controls .icon-button:is(:hover,:focus-visible){background:rgba(255,255,255,.6)}
.audience-tabs button{position:relative;isolation:isolate;overflow:hidden}
.audience-tabs[data-cycling=true] button[aria-selected=true]{background:#fcfcfc}
.audience-tabs[data-cycling=true] button[aria-selected=true]::after{content:'';position:absolute;inset:0;background:#dbdbdb;z-index:-1;animation:audience-progress 8s linear both}
@keyframes audience-progress{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media(hover:hover) and (pointer:fine){
  .carousel-controls{opacity:0;translate:0 20px;transition:opacity 500ms ease,translate 500ms ease}
  .carousel-controls .icon-button{pointer-events:none}
  .carousel-stage:is(:hover,:focus-within) .carousel-controls{opacity:1;translate:0 0}
  .carousel-stage:is(:hover,:focus-within) .carousel-controls .icon-button{pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){.carousel-controls{transition:none;translate:none}.audience-tabs button::after{animation:none!important}}