/* Captions follow the assembly cycle; decorative motion stays with the model. */
.studio-story { position:absolute; inset:0; z-index:1; pointer-events:none; color:#e5eae4; }
.studio-story[hidden] { display:none; }
.studio-story-caption { position:absolute; top:91px; left:25px; right:25px; }
.studio-story-index { display:block; color:#c8a36b; font:8px/1.6 monospace; letter-spacing:1px; }
.studio-story-title { display:block; margin-top:5px; font-size:24px; line-height:1.12; letter-spacing:-.7px; font-weight:400; }
.studio-story-detail { margin-top:6px; font-size:10px; line-height:1.6; color:#b9cbd0; max-width:280px; }
.studio-story-track { position:absolute; right:25px; bottom:64px; width:min(260px,56%); display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.studio-story-track span { height:2px; background:#8fa8ad40; position:relative; overflow:hidden; }
.studio-story-track span::after { content:""; position:absolute; inset:0; background:#d9b075; transform:scaleX(var(--stage-progress,0)); transform-origin:left; }
.studio-story-track span.is-current { background:#c9ad7966; }
.studio-story[data-motion=paused] .studio-story-track { opacity:.4; }
@media(min-width:801px) and (max-width:1100px) {
  .studio-story-caption { left:18px; right:18px; }
  .studio-story-title { font-size:21px; }
  .studio-story-detail { max-width:210px; font-size:9px; }
  .studio-story-track { right:18px; }
}
@media(max-width:800px) {
  .studio-story-caption { top:83px; left:18px; right:18px; }
  .studio-story-title { font-size:20px; }
  .studio-story-detail { max-width:240px; font-size:9px; }
  .studio-story-track { right:18px; bottom:62px; width:46%; }
}
@media(max-width:590px) {
  .studio-story-caption { top:63px; }
  .studio-story-index { font-size:7px; letter-spacing:.7px; }
  .studio-story-title { font-size:16px; margin-top:3px; letter-spacing:-.3px; }
  .studio-story-detail { display:none; }
  .studio-story-track { bottom:52px; width:44%; }
}
@media print { .studio-story { display:none; } }