.demo-motion{flex-direction:column;gap:20px;inline-size:100%;display:flex}.demo-motion-tracks{flex-direction:column;gap:12px;display:flex}.demo-motion-track{align-items:center;gap:16px;display:flex}.demo-motion-label{inline-size:150px;font-family:var(--md-ref-typeface-plain);font-size:var(--md-sys-typescale-label-large-size);color:var(--md-sys-color-on-surface-variant);flex:none}.demo-motion-rail{border-radius:var(--md-sys-shape-corner-full);background:var(--md-sys-color-surface-container-highest);flex:none;block-size:28px;inline-size:clamp(160px,46vw,380px);position:relative}.demo-motion-dot{border-radius:var(--md-sys-shape-corner-full);background:var(--md-sys-color-primary);block-size:28px;inline-size:28px;animation:demo-motion-slide var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-emphasized) infinite alternate;position:absolute;inset-block:0}.demo-motion[data-playing=false] .demo-motion-dot{animation-play-state:paused}.demo-motion-dot[data-ease=emphasized]{animation-timing-function:var(--md-sys-motion-easing-emphasized)}.demo-motion-dot[data-ease=emphasized-decelerate]{animation-timing-function:var(--md-sys-motion-easing-emphasized-decelerate)}.demo-motion-dot[data-ease=emphasized-accelerate]{animation-timing-function:var(--md-sys-motion-easing-emphasized-accelerate)}.demo-motion-dot[data-ease=standard]{animation-timing-function:var(--md-sys-motion-easing-standard)}.demo-motion-dot[data-ease=standard-decelerate]{animation-timing-function:var(--md-sys-motion-easing-standard-decelerate)}.demo-motion-dot[data-ease=standard-accelerate]{animation-timing-function:var(--md-sys-motion-easing-standard-accelerate)}.demo-motion-dot[data-ease=fast-spatial]{animation-timing-function:var(--md-sys-motion-easing-fast-spatial)}.demo-motion-dot[data-duration=short2]{animation-duration:var(--md-sys-motion-duration-short2)}.demo-motion-dot[data-duration=short4]{animation-duration:var(--md-sys-motion-duration-short4)}.demo-motion-dot[data-duration=medium2]{animation-duration:var(--md-sys-motion-duration-medium2)}.demo-motion-dot[data-duration=medium4]{animation-duration:var(--md-sys-motion-duration-medium4)}.demo-motion-dot[data-duration=long2]{animation-duration:var(--md-sys-motion-duration-long2)}.demo-motion-dot[data-duration=long4]{animation-duration:var(--md-sys-motion-duration-long4)}@keyframes demo-motion-slide{0%{inset-inline-start:0}to{inset-inline-start:calc(100% - 28px)}}@media (prefers-reduced-motion:reduce){.demo-motion-dot{animation:none}}