.stage { width: 100%; max-width: 1152px; display: flex; align-items: flex-start; gap: 64px; }
.words { flex: 0 0 340px; width: 340px; display: flex; flex-direction: column; }
.frame { position: relative; flex: 1 1 748px; max-width: 748px; aspect-ratio: 748 / 440; margin: 0; border-radius: 16px; background: var(--surface); overflow: hidden; }
.crop { position: absolute; left: -15.107%; top: -32.273%; width: 130.08%; height: 162.955%; }
.crop img, .crop svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.arrow { stroke: var(--ink); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.arrow-dots { stroke-dasharray: 0 28; }
.state { display: flex; flex-direction: column; align-items: stretch; }
.state:not([hidden]) { animation: dd-fade 240ms ease-out; }
@keyframes dd-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .state:not([hidden]) { animation: none; } }
.state .line { margin-top: 14px; }
.state .btn { margin-top: 32px; }
.status { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.status .line { margin-top: 0; }
@media (max-width: 1099px) {
  .stage { flex-direction: column; align-items: stretch; max-width: 560px; gap: 40px; }
  .frame { order: -1; flex: none; width: 100%; }
  .words { flex: none; width: auto; }
}