/* Phase selection stays outside the display, at a readable size on every device. */
.animation-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.animation-phases{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.animation-controls .animation-phases button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;border:1px solid #bdd4e1;border-radius:4px;background:#fff;color:#40677d;font-family:inherit;font-size:14px;line-height:1.4;text-align:center;cursor:pointer}
.animation-controls .animation-phases button:hover{border-color:#1786b2;background:#e8f4fa}
.animation-controls .animation-phases button[aria-pressed=true]{background:#087bb3;border-color:#087bb3;color:#fff}
.animation-controls button:focus-visible{outline:3px solid #51b4da;outline-offset:3px}
.animation-controls .pd-playback{margin-left:auto}
.animation-controls .pd-playback button{min-height:44px}
.ai-demo-caption-row{display:block}
.ai-demo-caption-row figcaption{margin-top:16px}
.ai-demo-playback{display:flex;gap:7px;margin-left:auto}
.ai-demo-playback button{min-height:44px}
.ma-controls .animation-phases{flex-basis:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ma-controls button{min-height:44px}
@media(max-width:1000px){
  .pd-controls.animation-controls{flex-direction:row;align-items:center}
}
@media(max-width:700px){
  .animation-controls .animation-phases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .animation-controls .animation-phases button{font-size:14px;padding:10px 8px}
  .animation-controls .animation-phases button:last-child:nth-child(odd){grid-column:1/-1}
  .ai-demo-playback{margin-left:auto;flex-wrap:wrap}
}