@layer story {
  .beyond-stage.has-model { height: 700px; padding-bottom: 128px; }
  .has-model .stage-window { position: relative; width: min(100%, 420px); height: 540px; transform: none; overflow: hidden; }
  .has-model .stage-poster { width: 100%; height: 100%; object-fit: contain; }
  .has-model .stage-window model-viewer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #d7bfd8; --poster-color: #d7bfd8; }
  .has-model .stage-window [hidden], .model-controls [hidden] { display: none; }
  .model-controls { position: absolute; bottom: 65px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
  .model-controls button { border: 1px solid #d3adca; color: #fff4fa; background: #2f1b35; padding: 10px 14px; min-height: 44px; font-size: 12px; line-height: 1.3; cursor: pointer; }
  .model-controls button:hover { background: #58364f; }
  .model-controls button:disabled { opacity: .65; cursor: progress; }
  .model-status { position: absolute; bottom: 13px; left: 8px; right: 8px; margin: 0; color: #e0c6dc; text-align: center; font-size: 11px; line-height: 1.5; }
  .has-model .stage-caption { top: 8px; bottom: auto; left: 0; right: 0; text-align: center; pointer-events: none; }
  .has-model .stage-ring { pointer-events: none; }
  @media (max-width: 767px) {
    .beyond-stage.has-model { height: 660px; padding-top: 30px; padding-bottom: 170px; }
    .has-model .stage-window { width: min(100%, 330px); height: 450px; }
    .model-controls { bottom: 70px; max-width: 320px; margin-inline: auto; }
    .model-status { bottom: 12px; }
  }
}