/* Larger controls outside the artwork; same app icons and button shape. */
.demo-playback{display:flex;justify-content:center;gap:14px;margin:14px auto 0;max-width:1000px}
.demo-playback .app-hit{position:static;width:52px;height:52px;min-width:48px;min-height:48px;flex-shrink:0;border:1px solid #aebdcd;border-radius:12px;background:#f1f1f6}
.demo-playback .app-hit svg{width:28px;height:28px;fill:currentColor}
.demo-ready{max-width:1000px;margin:12px auto;color:#294e73;font-size:1rem;line-height:1.5}
.demo-object-picks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:12px auto}
.demo-object-picks button{font:inherit;min-height:48px;padding:9px 16px;border:1px solid #8ba6c2;border-radius:7px;color:#2c507b;background:#f1f4f8}
.demo-object-picks button[aria-pressed=true]{background:#d5e6f9;border-color:#3565a1}
@media(max-width:500px){.demo-timeline{gap:8px;font-size:.85rem}.demo-timeline output{font-size:.8rem}.demo-timeline label{font-size:.8rem}}

/* The playback row and timeline follow the width of the artwork. */
.demo-playback,.demo-timeline,.demo-ready,.demo-object-picks{width:min(100%,calc(var(--demo-fit-height)*1366/1024));max-width:none}
.dtm-stage .dtm-ui{clip-path:inset(0 0 15% 0)}

.demo-playback .demo-play-cue{animation:dtm-play-ready .85s ease-out;border-color:#4a90e2;background:#dcecff}
@keyframes dtm-play-ready{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(74,144,226,0)}45%{transform:scale(1.08);box-shadow:0 0 0 9px rgba(74,144,226,.25)}}
@media(prefers-reduced-motion:reduce){.demo-playback .demo-play-cue{animation:none;outline:2px solid #4a90e2;outline-offset:3px}}