* { box-sizing: border-box; }
html, body, #carousel { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #080808; }
body { font-family: system-ui, sans-serif; }
.slides, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; transition: opacity 900ms ease-in-out; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.05); transition: transform 10s ease-out; }
.slide.active img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .slide, .slide img { transition: none; }
}
.empty-state { position: absolute; inset: 0; display: grid; place-items: center; color: #ddd; font-size: clamp(1.1rem, 3vw, 2rem); }
.empty-state[hidden] { display: none; }
.controls { position: absolute; inset: 0; opacity: 0; transition: opacity 250ms ease; pointer-events: none; }
.controls.visible { opacity: 1; pointer-events: auto; }
button, .icon-button { color: white; border: 0; background: rgb(0 0 0 / 40%); cursor: pointer; }
.arrow { position: absolute; top: 0; bottom: 0; width: 16%; min-width: 64px; font-size: clamp(3rem, 8vw, 7rem); text-shadow: 0 1px 5px #000; }
.arrow:hover, .icon-button:hover { background: rgb(0 0 0 / 65%); }
.left { left: 0; text-align: left; padding-left: 2vw; }
.right { right: 0; text-align: right; padding-right: 2vw; }
.bottom-controls { position: absolute; bottom: max(1.25rem, env(safe-area-inset-bottom)); right: max(1.25rem, env(safe-area-inset-right)); display: flex; gap: .6rem; }
.icon-button { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; text-decoration: none; font-size: 1.35rem; }