/* Shared shell: the third article's 480px stage + 56px footer + two borders. */
section.motion-preview {
  --motion-preview-height: 538px;
  --motion-preview-footer: 56px;
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--motion-preview-footer);
  height: var(--motion-preview-height);
}
/* Type specificity keeps lazy-loaded effect styles from resizing the shell. */
section.motion-preview > :is(.motion-stage, .thinking-stage, .game-stage, .particle-image-stage, .stage, .motion-loading-stage) {
  box-sizing: border-box;
  width: 100%; height: 100%; min-height: 0; max-height: none; aspect-ratio: auto;
}
section.motion-preview > :is(.motion-controls, .thinking-preview-footer, .game-footer, .controls, .motion-loading-footer) {
  box-sizing: border-box;
  min-width: 0;
  height: var(--motion-preview-footer); min-height: 0; max-height: var(--motion-preview-footer);
}
section.motion-preview > :is(.motion-controls, .controls) { align-self: stretch; padding-block: 8px; }
section.motion-preview .motion-error:not([hidden]) { position: absolute; left: 16px; right: 16px; bottom: 64px; margin: 0; }
section.motion-preview.motion-loading { min-height: 0; }
.motion-loading-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; }
@media (max-width: 700px) {
  section.motion-preview { height: auto; grid-template-rows: auto var(--motion-preview-footer); }
  section.motion-preview > :is(.motion-stage, .thinking-stage, .game-stage, .particle-image-stage, .stage, .motion-loading-stage) {
    height: auto; min-height: 280px; max-height: 480px; aspect-ratio: 1;
  }
  section.motion-preview > .motion-controls { padding-block: 6px; }
}