.gui-toast-group {
  position: fixed;
  z-index: 1;
  inset-block-end: 0;
  inset-inline: 0;
  padding-block-end: 5vh;

  display: grid;
  gap: 1vh;

  

  /* optimizations */
  pointer-events: none;
}

.gui-toast {
  --_duration: 3s;
  --_bg-lightness: 90%;
  --_travel-distance: 0;

  
  


  will-change: transform;
  animation: 
    fade-in .3s ease,
    slide-in .3s ease,
    fade-out .3s ease var(--_duration);

  

  @media (--motionOK) {
    --_travel-distance: 5vh;
  }
}

@keyframes fade-in {
  from { opacity: 0 }
}

@keyframes fade-out {
  to { opacity: 0 }
}

@keyframes slide-in {
  from { transform: translateY(var(--_travel-distance, 10px)) }
}