.flash {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 40;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 0.65em 1.2em;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  font: 600 1rem/1.3 var(--font-display);
  transform: translateX(-50%);
  animation: flash-in 380ms cubic-bezier(.3,1.5,.6,1) 1;
}

.flash--alert { background: var(--accent-pale); }
.flash--leaving { animation: flash-out 300ms ease 1 forwards; }

@keyframes flash-in {
  from { transform: translate(-50%, -150%); }
  to { transform: translate(-50%, 0); }
}

@keyframes flash-out {
  to { transform: translate(-50%, -150%); opacity: 0; }
}