/* Reference timing: dot, expanding capsule, labels, then active indicator. */
@keyframes mode-capsule-intro{
 0%{opacity:0;clip-path:inset(0 calc(50% - 22px) 0 calc(50% - 22px) round 40px);transform:translate(-50%,24px) scale(.88);pointer-events:none}
 15%{opacity:1;clip-path:inset(0 calc(50% - 22px) 0 calc(50% - 22px) round 40px);transform:translate(-50%,5px) scale(1);pointer-events:none}
 60%{opacity:1;clip-path:inset(0 0 0 0 round 40px);transform:translate(-50%,-2px);pointer-events:none}
 82%{transform:translate(-50%,1px);pointer-events:none}
 100%{opacity:1;clip-path:inset(0 0 0 0 round 40px);transform:translate(-50%,0);pointer-events:auto}
}
@keyframes mode-label-intro{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes mode-indicator-intro{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
#mode-switch.is-ready{animation:mode-capsule-intro 1.05s cubic-bezier(.22,1,.36,1) both}
#mode-switch.is-ready button{animation:mode-label-intro .4s ease .48s both}
#mode-switch.is-ready::before{animation:mode-indicator-intro .5s cubic-bezier(.16,1,.3,1) .65s both}
@media(prefers-reduced-motion:reduce){#mode-switch.is-ready,#mode-switch.is-ready button,#mode-switch.is-ready::before{animation:none}}