/* Ambient loops remain automatic; optional controls stay in one native disclosure. */
.motion-panel { z-index:12; }
.motion-panel summary { color:#b5b8af; font-size:11px; min-height:44px; align-items:center; }
.motion-panel summary:hover { color:#f1ece2; }
.motion-panel summary:focus-visible { outline:2px solid #d3c3a5; outline-offset:4px; }
.motion-panel .motion-panel-inner { display:flex; flex-direction:column; gap:10px; width:300px; min-width:0; max-width:calc(100vw - 44px); max-height:min(70vh,420px); overflow:auto; padding:18px; bottom:52px; background:#171c19fa; border:1px solid #777e6b; box-shadow:0 15px 45px #0008; border-radius:3px; }
.motion-panel .motion-state { display:grid; gap:9px; margin:0; max-width:none; }
.motion-panel .motion-panel-inner button,
.motion-panel .motion-panel-inner #showcase-motion,
.motion-panel .motion-panel-inner #hero-play { position:static; inset:auto; display:flex; width:100%; min-height:44px; align-items:center; justify-content:space-between; gap:16px; text-align:left; margin:0; padding:11px 12px; color:#f1eee6; background:#252c25; border:1px solid #69745e; border-radius:2px; font:500 12px/1.5 var(--sans,Arial,sans-serif); }
.motion-panel .motion-panel-inner button:hover { background:#364030; border-color:#bdb39b; }
.motion-panel .motion-panel-inner button:focus-visible { outline:2px solid #dfcba5; outline-offset:3px; }
.motion-panel .motion-panel-inner button:disabled { opacity:.62; cursor:default; }
.motion-panel .motion-state #motion-status { max-width:none; font-size:11px; line-height:1.6; color:#bac1b4; }
.motion-panel .motion-state .hero-play [data-control-label] { font-size:12px; }
.motion-panel #showcase-motion>span { display:none; }
@media(max-width:700px) { .motion-panel .motion-panel-inner { width:min(300px,calc(100vw - 44px)); bottom:50px; } }