.toasts{z-index:var(--z-toast);left:var(--space-5);right:var(--space-5);bottom:calc(var(--mobile-nav-height) + var(--space-5) + env(safe-area-inset-bottom));gap:var(--space-3);pointer-events:none;justify-items:center;display:grid;position:fixed}@media (width>=768px){.toasts{bottom:var(--space-7)}}.toast{align-items:center;gap:var(--space-5);width:100%;max-width:28rem;min-height:2.75rem;padding:var(--space-3) var(--space-3) var(--space-3) var(--space-6);background:var(--color-bg-inverse);color:var(--color-text-inverse);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md);font-size:var(--font-size-base);pointer-events:auto;animation:toast-in var(--duration-normal) var(--easing-out);display:flex}@media (width>=768px){.toast{width:auto;min-width:18rem}}.toast--error{color:#fff;background:#b3261e}.toast__message{flex:1}.toast__action{align-items:center;gap:var(--space-3);height:2rem;padding:0 var(--space-4);border-radius:var(--border-radius-md);color:inherit;font-weight:var(--font-weight-semibold);background:0 0;border:0;display:inline-flex}.toast__action:hover{background:color-mix(in srgb, currentColor 12%, transparent)}.toast__action .kbd{border-color:color-mix(in srgb, currentColor 35%, transparent);color:inherit;background:0 0}.toast__close{border-radius:var(--border-radius-md);width:2rem;height:2rem;color:inherit;opacity:.7;background:0 0;border:0;place-items:center;display:grid}.toast__close:hover{opacity:1;background:color-mix(in srgb, currentColor 12%, transparent)}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}}
