.module-visual.has-motion-demo { aspect-ratio:auto;border:0;border-radius:0;background:transparent;overflow:visible; }
.motion-screen { border:7px solid var(--navy);border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:var(--navy); }
.motion-screen iframe { display:block;width:100%;height:100%;border:0;pointer-events:none; }
.motion-playbar { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px; }
.motion-caption { display:grid;gap:4px; }
.motion-caption strong { font-size:14px;color:var(--navy); }
.motion-status { font-size:12px;color:var(--muted); }
.motion-actions { display:flex;gap:8px;flex:none; }
.motion-actions button { min-height:44px;border:1px solid var(--line);border-radius:7px;padding:8px 13px;background:#fff;color:var(--navy);font:inherit;font-size:13px;cursor:pointer; }
.motion-actions button:first-child { background:var(--navy);border-color:var(--navy);color:#e7c98f; }
.motion-actions button:disabled { opacity:.5;cursor:wait; }
.motion-actions button:focus-visible,.motion-options select:focus-visible,.motion-options input:focus-visible { outline:2px solid var(--gold);outline-offset:3px; }
.motion-options { display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:12px;font-size:12px;color:var(--muted); }
.motion-options label { display:flex;gap:8px;align-items:center;min-height:44px; }
.motion-options select { width:auto;min-height:44px;padding:6px 28px 6px 10px;font:inherit;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--navy); }
.motion-options input { width:17px;height:17px;margin:0;accent-color:var(--gold); }
.motion-note { display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:11px;color:var(--muted);margin:8px 0 0;line-height:1.7; }
.motion-note a { color:var(--navy);text-decoration:underline;text-underline-offset:3px; }
.motion-screen:fullscreen { width:100vw;height:100vh;border:0;border-radius:0;aspect-ratio:auto; }
@media(max-width:600px) { .motion-screen { border-width:4px; }.motion-playbar { align-items:flex-start;flex-wrap:wrap;gap:10px; }.motion-actions { width:100%; }.motion-actions button:first-child { flex:1; }.motion-options { gap:8px;justify-content:space-between; }.motion-options select { max-width:190px;font-size:12px; }.motion-note { font-size:10px; } }