.animation-controls {
  display: grid;
  grid-template-columns: auto auto auto minmax(120px, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 10px;
  background: #edf6ff;
  border-radius: 14px;
}
.animation-controls button {
  border: 1px solid var(--line);
  min-height: 40px;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  padding: 7px 11px;
  font-weight: 800;
  cursor: pointer;
}
.animation-controls button:first-child { background: var(--blue); border-color:var(--blue); color: #fff; }
.animation-controls label,
.animation-controls output { font-size: 10px; color: var(--muted); }
.animation-controls output { text-align: right; color: var(--ink); font-weight: 800; }
.animation-controls input { width: 100%; accent-color: var(--violet); }
#svg [data-step].animation-active rect { stroke: #18231e; stroke-width: 2; }
.motion-panel { margin-top: 12px; padding: 12px 14px 8px; background: #fbfdff; border: 1px solid var(--line); border-radius: 16px; overflow:hidden; }
.motion-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.motion-heading strong { color:var(--ink); font-size:13px; }
.motion-heading span { color:var(--muted); font-size:11px; font-weight:800; }
#motionSvg { width:100%; height:auto; display:block; }
.motion-equation { min-height:1.5em; margin:0 0 2px; text-align:center; color:var(--ink); font-size:11px; font-weight:800; }
.calculation-heading { display:flex; justify-content:space-between; margin:14px 4px 0; color:var(--ink); font-weight:900; font-size:12px; }
.calculation-heading span { color:var(--muted); font-size:10px; font-weight:700; }
#motionSvg .motion-trail { opacity:.34; }
#motionSvg .motion-actor { filter:drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
#motionSvg text { font-family:inherit; }
@media (max-width: 850px) {
  .animation-controls { grid-template-columns: auto auto 1fr; }
  .animation-controls label { display: none; }
  .animation-controls input { grid-column: 1 / -1; }
  .animation-controls output { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 600px) {
  .layout > article { min-width: 0; }
  .diagram{overflow:hidden}
  .diagram #svg,.motion-panel{width:100%;max-width:100%}
  .animation-controls{grid-template-columns:1fr 1fr;gap:7px}
  .animation-controls input{grid-column:1/-1}
  .animation-controls output{grid-column:1/-1}
}
@media (prefers-reduced-motion: reduce) {
  .animation-controls button:first-child { display: none; }
}