/* Floati motion-lesson player. Reuses the site tokens (--bg2/--bd/--accent/...). */
.motion-host { margin: 6px 0 20px; }
.ml-card { border: 1px solid var(--bd); border-radius: var(--radius-lg); background: var(--bg2);
  box-shadow: var(--shadow-soft); padding: 16px 16px 14px; }
.ml-stagewrap { background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent) 7%, var(--bg)) 0%, var(--bg) 70%);
  border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; }
.ml-stage { display: block; width: 100%; height: auto; }
.ml-caption { min-height: 2.8em; margin: 12px 4px 6px; color: var(--t2); font-size: .95rem; line-height: 1.5; }
.ml-caption:empty::before { content: ""; }
.ml-controls { display: flex; align-items: center; gap: 10px; }
.ml-btn { font-family: var(--mono); font-size: .76rem; letter-spacing: .03em; color: var(--t2);
  background: var(--bg); border: 1px solid var(--bd); border-radius: 100px; padding: 8px 14px; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.ml-btn:hover { color: var(--t1); border-color: color-mix(in srgb, var(--accent) 45%, var(--bd)); }
.ml-play { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 76%, #000); border-color: transparent; }
.ml-play::before { content: ""; width: 0; height: 0; margin-left: 3px;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid #fff; }
.ml-play.is-playing::before { width: 11px; height: 12px; margin-left: 0; border: none;
  border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; }
.ml-dots { display: flex; gap: 7px; margin-left: auto; }
.ml-dot { width: 9px; height: 9px; padding: 0; border-radius: 100px; border: none; cursor: pointer;
  background: var(--bg3); transition: background .25s var(--ease), transform .25s var(--ease); }
.ml-dot:hover { transform: scale(1.25); }
.ml-dot.on { background: var(--accent); }
@media (max-width: 560px) { .ml-caption { font-size: .9rem; } .ml-step, .ml-replay { padding: 8px 11px; } }