.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + var(--locator-h) + var(--safe-b) + 14px);
  max-width: calc(100vw - 32px);
  padding: 9px 16px;
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  box-shadow: 0 6px 24px rgb(0 0 0 / .3);
  transform: translate(-50%, 8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms, transform 160ms var(--ease);
  z-index: 100;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }