.toasts { bottom: auto; top: 76px; }
body.phone .toasts { bottom: auto; }
.toasts .toast.out { translate: 0 -14px; transition: opacity .22s ease-in, translate .22s ease-in; }

@media (prefers-reduced-motion: no-preference) {
  .m-in { animation: m-up .24s var(--md, 0ms) cubic-bezier(.2,.9,.25,1) both; }
  .toasts .toast { animation: m-toast .46s cubic-bezier(.3,1.6,.5,1); }
  .tab-btn.on canvas, .nav-btn.on canvas { animation: m-hop .42s var(--spring); }
  .tab-btn.pip::before { animation: m-pip .34s .12s var(--spring) both; }
  .more-tile.on canvas { animation: m-hop .42s .1s var(--spring) both; }
}

@media (prefers-reduced-motion: reduce) {
  .toasts .toast, .enter { animation: none; }
  .toasts .toast.out { translate: none; }
}

@keyframes m-up { from { opacity: 0; translate: 0 10px; } }
@keyframes m-toast { from { opacity: 0; transform: translateY(-28px) scale(.96); } 60% { opacity: 1; } }
@keyframes m-hop { 0% { translate: 0 0; } 35% { translate: 0 -6px; scale: 1.08 .94; } 70% { translate: 0 1px; scale: .96 1.04; } 100% { translate: 0 0; scale: 1; } }
@keyframes m-pip { from { scale: 0; } }