/* Scoped to the motion workbench; no global controls or animation overrides. */
.learn-play #animation > .grid-3:has(.mw-motion-card) { grid-template-columns: 1fr; gap: 18px; }
.learn-play #animation .mw-motion-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: stretch; padding: 18px; border: 1px solid #35425f; background: linear-gradient(125deg,#121e33,#211d39); transform: none; }
.learn-play #animation .mw-motion-card > img { width: 100%; max-width: 100%; height: 100%; min-height: 240px; max-height: 420px; margin: 0; grid-row: auto; object-fit: cover; border-radius: 12px; }
.learn-play #animation .mw-motion-card.mw-motion-selected { border-color: #9987cf; }
.mw-motion-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.learn-play #animation .mw-motion-copy h3 { margin: 0 0 7px; color: #eeeaff; }
.learn-play #animation .mw-motion-copy p { margin: 0 0 10px; color: #b9c6de; font-size: 13px; }
.mw-motion-overview { background: #101c30; border: 1px solid #34415f; border-radius: 10px; overflow: hidden; margin: 4px 0 12px; }
.mw-motion-overview svg { display: block; width: 100%; height: 150px; }
.mw-motion-overview text { fill: #d4dcf4; font: 18px system-ui,sans-serif; }
.mw-motion-steps { display: flex; gap: 7px; flex-wrap: wrap; }
#animation .mw-motion-steps button { flex: 1 1 100px; min-height: 44px; border: 1px solid #4f5b7c; border-radius: 9px; padding: 9px 10px; background: #202a45; color: #dce3f6; font: inherit; font-size: 12px; cursor: pointer; line-height: 1.5; }
#animation .mw-motion-steps button:hover { border-color: #b2a1e9; background: #302f54; }
#animation .mw-motion-steps button[aria-current="step"] { background: #514184; border-color: #b6a2ec; color: #fff; box-shadow: inset 0 -2px #b3a2ee; }
#animation .mw-motion-steps button:focus-visible { outline: 3px solid #a6e4f8; outline-offset: 3px; }
#animation .mw-motion-status { color: #d7ccff; font-size: 13px; min-height: 22px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
#animation .mw-motion-tip { color: #b5c5df; min-height: 22px; margin-top: 0; }
@media (max-width: 600px) {
  .learn-play #animation .mw-motion-card { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  .learn-play #animation .mw-motion-card > img { height: auto; min-height: 0; max-height: 250px; aspect-ratio: 16/9; }
  .mw-motion-overview svg { height: 130px; }
  #animation .mw-motion-steps button { flex-basis: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  #animation .mw-motion-card, #animation .mw-motion-card * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}