#animation_controls { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:1001; box-sizing:border-box; width:max-content; max-width:calc(100vw - 24px); padding:10px 12px; border:1px solid #777; border-radius:8px; background:#202733; color:#fff; box-shadow:0 3px 12px #0005; font:14px Arial,sans-serif; }
#animation_controls .animation-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#animation_controls label { display:flex; align-items:center; gap:5px; }
#animation_controls button, #animation_controls select { font:inherit; min-height:36px; border:1px solid #8290a3; border-radius:4px; background:#fff; color:#142033; padding:4px 8px; }
#animation_controls select { max-width:220px; }
#animation_controls :focus-visible { outline:3px solid #7bd4ff; outline-offset:2px; }
#animation_controls input[type=range] { flex:1; min-width:80px; min-height:32px; accent-color:#7bd4ff; }
#animation_controls input[type=checkbox] { width:18px; height:18px; accent-color:#7bd4ff; }
#animation_time { min-width:110px; text-align:right; font-variant-numeric:tabular-nums; }
#animation_status { display:block; font-size:12px; color:#d7e3f5; }
@media(max-width:600px) { #animation_controls { bottom:8px; width:calc(100vw - 16px); padding:8px; } #animation_controls select { max-width:150px; } #animation_controls button { min-height:40px; } }