.carousel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(24px,7vw,96px); width: min(100%,1120px); min-height: 420px; }
.carousel-visual { position: relative; display: grid; min-height: 420px; overflow: hidden; place-items: center; }
.character-viewer { position: absolute; top: 50%; left: 50%; display: block; width: min(100%,240px); height: auto; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) translateX(110%); transition: transform .6s cubic-bezier(.22,.68,0,1), opacity .6s ease; }
.character-viewer.is-active { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%); }
.character-viewer.exit-left, .character-viewer.enter-left { opacity: 0; transform: translate(-50%,-50%) translateX(-110%); }
.character-viewer.exit-right, .character-viewer.enter-right { opacity: 0; transform: translate(-50%,-50%) translateX(110%); }
.carousel-content { position: relative; min-height: 420px; }
.carousel-slides { position: absolute; top: 55px; right: 0; left: 0; display: grid; overflow: hidden; }
.carousel-slide { grid-area: 1 / 1; transition: transform .6s cubic-bezier(.22,.68,0,1), opacity .6s ease; }
.carousel-slide[hidden] { display: none; }
.carousel-slide.exit-right, .carousel-slide.enter-right { opacity: 0; transform: translateX(110%); }
.carousel-slide.exit-left, .carousel-slide.enter-left { opacity: 0; transform: translateX(-110%); }
.carousel-slide h1 { margin: 0 0 18px; font-family: var(--serif); font-size: clamp(32px,4.5vw,56px); font-weight: 400; letter-spacing: -.065em; line-height: .98; }
.carousel-slide p { max-width: 440px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.carousel-slide p.character-alias { margin: -8px 0 12px; color: var(--ink); font-size: 18px; font-weight: 600; }
.carousel-indicators { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -18px 0 18px; }
.carousel-indicator { display: grid; width: 16px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; place-items: center; }
.indicator-track { position: relative; display: block; width: 8px; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(241,242,246,.45); transition: width .2s ease; }
.carousel-indicator.is-active { width: 36px; }
.carousel-indicator.is-active .indicator-track { width: 28px; }
.indicator-progress { position: absolute; inset: 0; border-radius: inherit; background: #a8f6f0; transform: scaleX(0); transform-origin: left; }
.carousel-indicator.is-active .indicator-progress { animation: carousel-progress 10s linear forwards; }
.carousel-indicators.is-paused .carousel-indicator.is-active .indicator-progress { animation-play-state: paused; background: #ff8a8a; }
@keyframes carousel-progress { to { transform: scaleX(1); } }
.beta-carousel { width: min(100%,1120px); margin-top: 4px; }
.beta-person { text-align: center; }
.beta-character-viewer { display: block; width: min(100%,240px); height: auto; margin: 0 auto; }
.beta-person h4 { margin: 0; font-size: 16px; }