.hero-carousel { position: relative; background: #06131b; }
.hero-carousel [hidden] { display: none !important; }
.hero-carousel .hero { padding-bottom: 110px; }
.hero-carousel-controls { position: absolute; bottom: 24px; inset-inline: 0; display: flex; justify-content: center; gap: 22px; z-index: 12; }
.hero-carousel-controls button { display: flex; flex-direction: column; gap: 9px; align-items: center; justify-content: center; min-width: 74px; min-height: 44px; padding: 8px 4px; color: #9eabb6; background: transparent; border: 0; font: 600 10px/1.2 Inter, sans-serif; letter-spacing: .16em; cursor: pointer; transition: color .2s; }
.hero-selector-line { display: block; width: 42px; height: 2px; background: currentColor; opacity: .5; transition: width .2s, opacity .2s; }
.hero-carousel-controls button[aria-pressed="true"] { color: #ff78ae; }
.hero-carousel-controls button[aria-pressed="true"] .hero-selector-line { width: 64px; opacity: 1; }
.hero-carousel-controls button:hover { color: #fff; }
.hero-carousel-controls button:focus-visible { outline: 2px solid #ff78ae; outline-offset: 4px; }
.wave3-hero-picture, .wave3-hero-shade { position: absolute; inset: 0; }
.wave3-hero-picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.wave3-hero-shade { pointer-events: none; background: linear-gradient(90deg, #06131bf5 0%, #06131bd9 20%, #06131b75 44%, #06131b00 70%), linear-gradient(0deg, #06131be8, #06131b00 27%), linear-gradient(180deg, #06131b82, #06131b00 24%); }
.wave3-hero .hero-content > * { max-width: 540px; }
.wave3-hero h1 { white-space: nowrap; font-size: clamp(64px, 7.2vw, 100px); }
.wave3-release-note { font: 12px/1.6 Inter, sans-serif; color: #d8dce1; margin: 18px 0 0; }
@media (min-width: 861px) and (max-width: 1100px) { .wave3-hero .hero-content > * { max-width: 430px; } .wave3-hero .hero-ctas { flex-wrap: wrap; } }
@media (max-width: 860px) {
  .hero-carousel .hero { min-height: 0; padding-top: 0; padding-bottom: 105px; }
  .hero-carousel .hero-heading { font-size: 64px; white-space: nowrap; }
  .wave3-hero-picture { position: relative; display: block; height: clamp(500px, 72vh, 640px); margin-bottom: clamp(-280px, -34vw, -190px); }
  .wave3-hero-picture img { object-position: 76% center; }
  .wave3-hero-shade { height: clamp(500px, 72vh, 640px); bottom: auto; background: linear-gradient(180deg, #06131b80, #06131b00 23%, #06131b00 43%, #06131b80 67%, #06131b 100%); }
  .wave3-hero .container { position: relative; padding-top: 0; z-index: 5; }
  .wave3-hero .hero-content > * { max-width: 100%; }
  .wave3-hero .hero-content { padding-bottom: 0; }
  .wave3-hero .vertical-marker { display: none; }
  /* Follow the character rather than the middle of the wide panorama. */
  .hero-carousel .wave2-hero .hero-city.hero-city-image { background-position: 72% 36%; background-size: cover; }
  .hero-carousel .wave2-hero .hero-art-fade { background: linear-gradient(180deg, #06131b66, #06131b00 22%, #06131b00 43%, #06131b80 67%, #06131b 100%); }
}
@media (max-width: 480px) {
  .hero-carousel .hero-heading, .wave3-hero h1 { font-size: 46px; }
  .hero-carousel .wave2-hero .hero-city.hero-city-image { background-position: 67% 36%; }
}
@media (prefers-reduced-motion: reduce) { .hero-carousel-controls button, .hero-selector-line { transition: none; } }