/* The original recording stays at its intrinsic ratio. Controls occupy their
   own quiet top gutter, never the recorded application's content. */
.article-motion-stage {
  position:relative;
  width:100%;
  box-sizing:border-box;
}
.article-motion-stage > video {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
  padding:0;
  border:0;
}
.article-motion-stage.article-source-recording {
  max-width:var(--article-recording-width);
  margin-inline:auto;
}
.page > .original.article-reading .article-recording-source {
  margin:8px 0 0;
  text-align:center;
  color:var(--muted);
  font:460 12px/16px var(--ds-font);
}
[data-motion-enhanced] > .article-motion-stage {
  padding-top:42px;
  background:var(--ds-surface,#fff);
  border-radius:var(--ds-radius-stage,8px);
  box-shadow:var(--ds-stage-shadow,inset 0 0 0 1px #f2f2f2);
}
/* Buttons use the shared .ui-control geometry, states and reduced-motion
   behavior from design-tokens.css. Only the recording gutter belongs here. */
@media print {
  [data-motion-enhanced] > .article-motion-stage {padding-top:0;}
  .article-motion-stage > .article-motion-control {display:none;}
}