/* Shared timing source for the current preview; content timelines remain independent. */
:root:has(.motion-prototype),
.motion-prototype {
  --motion-duration-feedback: 120ms;
  --motion-duration-state: 180ms;
  --motion-duration-panel: 240ms;
  --motion-duration-scene: 320ms;
  --motion-ease-standard: cubic-bezier(.2,.7,.2,1);
  --motion-distance-icon: 2px;
  --motion-distance-panel: 4px;
  --motion-distance-content: 8px;
  --motion-distance-scene: 16px;
}
.motion-prototype .motion-playback-controls { display:flex; justify-content:center; align-items:center; gap:4px; color:var(--muted,#666); }
.motion-prototype .motion-playback-button {
  display:grid; place-items:center; width:44px; height:44px; flex:none;
  padding:0; border:0; border-radius:50%; background:transparent; color:inherit; cursor:pointer;
  transition:color var(--motion-duration-feedback) var(--motion-ease-standard),background-color var(--motion-duration-feedback) var(--motion-ease-standard);
}
.motion-prototype .motion-playback-button:hover { background:var(--surface,#f5f5f5); color:var(--ink,#000); }
.motion-prototype .motion-playback-button:focus-visible { outline:1px solid currentColor; outline-offset:2px; }
.motion-prototype .motion-playback-button:disabled { opacity:.35; cursor:default; }
.motion-prototype .motion-playback-button svg { width:18px; height:18px; display:block; pointer-events:none; }
.motion-prototype .motion-playback-button [data-motion-play] { display:none; }
.motion-prototype .motion-playback-button[data-paused="true"] [data-motion-play] { display:block; }
.motion-prototype .motion-playback-button[data-paused="true"] [data-motion-pause] { display:none; }
@media (prefers-reduced-motion: reduce) {
  .motion-prototype .motion-playback-button { transition:none; }
}