.system-view--motion {align-self:center}
.system-view--motion>figcaption {align-items:center}
.system-view--motion>figcaption a {color:var(--muted);border-bottom:1px solid var(--line)}
.hero-motion {background:var(--pale);border:1px solid var(--line);padding:8px 10px 0}
.hero-motion canvas {display:block;width:100%;height:auto;aspect-ratio:460/368}
.hero-motion__controls {display:flex;align-items:center;gap:6px;min-height:44px;border-top:1px solid var(--line)}
.hero-motion__status {flex:1;color:var(--green);font-size:12px;line-height:1.3;padding-right:8px}
.hero-motion__controls button {border:0;background:transparent;color:var(--green);font-size:12px;min-height:44px;padding:8px;cursor:pointer}
.hero-motion__controls button:hover {background:var(--mint)}
.hero-motion__legend {display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);padding:12px 0 0}
.hero-motion__legend span {display:flex;align-items:center;gap:6px}
.hero-motion__legend i {width:8px;height:8px;display:inline-block;background:#17886b;border-radius:1px}
.hero-motion__legend span:nth-child(2) i {background:#3977aa;transform:rotate(45deg)}
.hero-motion__legend span:nth-child(3) i {background:#b77b27;border-radius:50%}
.system-view--motion .system-view__atoms {padding-block:8px}
@media(max-width:600px){
 .hero-motion {padding:8px 4px 0}
 .hero-motion__legend {gap:5px;font-size:12px}
 .hero-motion__controls {gap:0;padding-inline:6px}
}