/* Preserve the full cinematic composition instead of cropping it. */
.viewer video {
  background: #000;
  object-fit: contain;
}

@media (max-width: 780px) {
  .app-hero video {
    object-position: 56% center;
  }

  .viewer {
    height: 100dvh;
    min-height: 100svh;
  }

  .viewer video {
    object-fit: contain;
  }

  .viewer-ui {
    inset: 64px 0 0;
    padding: 18px 14px 24px;
  }

  .scene-head {
    font-size: 8px;
    letter-spacing: .12em;
  }

  .scene-caption {
    width: 100%;
    max-width: none;
    padding-top: 70px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .72), transparent);
  }

  .scene-caption h2 {
    font-size: 36px;
    line-height: 1;
  }

  .scene-caption > p:not(.eyebrow) {
    margin-right: 12px;
    font-size: 12px;
    line-height: 1.45;
  }

  .progress {
    margin-top: 14px;
  }

  .start-card {
    padding: 20px 18px;
  }

  .start-card h1 {
    font-size: 52px;
  }

  .start-card > p:not(.eyebrow) {
    font-size: 13px;
    line-height: 1.5;
  }

  .play-orb {
    width: 74px;
    height: 74px;
    touch-action: manipulation;
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .viewer-shade {
    background: linear-gradient(0deg, rgba(0, 0, 0, .92), transparent 40%, rgba(0, 0, 0, .72));
  }

  .scene-caption h2 {
    font-size: 32px;
  }
}