/* Motion supports a change of state without changing the scale of the content. */
.primary-nav a,.header-tool,.line-link,.topic-filters button{transition:color 150ms ease,border-color 150ms ease}

/* Keep photographs and playback controls steady while the reader explores. These
   scoped rules also take precedence over the component stylesheet loaded later. */
#main .ed-pic-frame img,
#main .ed-zoom .ed-pic-frame img{transition:opacity 220ms ease-out}
#main .ed-zoom:hover .ed-pic-frame img,
#main .ed-zoom:focus-within .ed-pic-frame img{transform:none}
#main .ed-play{transition:background-color 150ms ease}
#main .ed-film:hover .ed-play,
#main .ed-film:focus-visible .ed-play{transform:none}
#main .ed-pages img{transition:opacity 150ms ease}
#main .ed-pages a:hover img{transform:none}

/* The Lab's small preview drawings are an invitation, not an autoplaying demo.
   Interactive experiment animations use their own classes and remain intact. */
#main .ed-scene .s-flow{animation:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .primary-nav a,.header-tool,.line-link,.topic-filters button,
  #main .ed-pic-frame img,#main .ed-zoom .ed-pic-frame img,
  #main .ed-play,#main .ed-pages img{transition:none}
}