.motion-stage { position: relative; }
.motion-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.motion-overlay[hidden], .motion-notes[hidden] { display: none; }
.motion-marker { fill: none; opacity: .65; }
.motion-marker ellipse { vector-effect: non-scaling-stroke; }
.motion-marker-halo { stroke: #fff; stroke-width: 3.5px; opacity: .35; }
.motion-marker-ring { stroke-width: 2px; }
.motion-marker-baseline .motion-marker-ring { stroke: #df3838; stroke-dasharray: 7 3; }
.motion-marker-ours .motion-marker-ring { stroke: #36bd69; }
.motion-notes { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 16px; background: #fff; border-top: 1px solid #ebeee6; font-size: 12px; line-height: 1.5; }
.motion-note { color: #b52d2d; }
.motion-speed { flex-shrink: 0; color: #666d62; font-variant-numeric: tabular-nums; }
.player:fullscreen .motion-stage { width: min(100%, calc((100vh - 160px) * 1696 / 480)); margin: auto; flex-shrink: 0; }
.player:fullscreen .motion-notes { flex-shrink: 0; }
@media (max-width: 600px) {
  .motion-notes { align-items: flex-start; padding: 8px 10px; gap: 8px; min-height: 52px; font-size: 11px; }
  .motion-note { max-width: 62%; }
  .motion-speed { font-size: 10px; }
}