.toasts{--bad-night:#fd7468;z-index:50;inset-inline:16px;pointer-events:none;gap:12px;display:grid;position:fixed;top:64px}@supports (color:lab(0% 0 0)){.toasts{--bad-night:lab(65.8928% 52.8235 33.2136)}}.toasts[data-flip]{top:auto;bottom:80px}@media (min-width:768px){.toasts{width:min(470px,100vw - 48px);inset:auto 24px 80px auto}.toasts[data-flip]{top:24px;bottom:auto}}@media (min-width:1024px){.toasts{bottom:24px}}body:has([data-toast-clear]) .toasts{top:64px;bottom:auto}body:has([data-toast-clear]) .toasts>li:nth-last-child(n+3){display:none}@media (min-width:768px){body:has([data-toast-clear]) .toasts{top:24px}}.toasts>li{pointer-events:auto;background:var(--paper);color:var(--ink);animation:toast-tear .7s var(--ease-out-expo) both;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 16px 14px 14px;font-size:.9375rem;line-height:1.4;transition:opacity .2s linear;display:grid;position:relative;box-shadow:0 18px 40px #00000073;box-shadow:0 18px 40px lab(0% 0 0/.45)}.toasts>li[data-leaving]{opacity:0}.toasts b{font-weight:600}.toasts>li:not([data-toast=bad]):before{content:"";inset-inline:0;background:radial-gradient(circle at 5px 0, #0000 4.5px, var(--paper) 5px) 0 0 / 10px 6px repeat-x;height:6px;position:absolute;top:-5px}.toast-ic{width:30px;height:30px;color:var(--paper);background:#0d7435;background:lab(42.4567% -39.4857 26.31);border-radius:50%;place-items:center;display:grid}.toast-ic svg{stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}[data-toast=info] .toast-ic{background:var(--ink-2)}[data-toast=warn] .toast-ic{background:var(--sun-ink)}[data-toast=wait] .toast-ic{color:var(--ink-2);background:0 0}[data-toast=wait] .toast-ic svg{animation:1s linear infinite toast-spin}.toasts>li[data-toast=bad]{background:var(--night);color:var(--on-night);box-shadow:inset 0 0 0 1.5px var(--bad-night), 0 18px 40px #00000073}@supports (color:lab(0% 0 0)){.toasts>li[data-toast=bad]{box-shadow:inset 0 0 0 1.5px var(--bad-night), 0 18px 40px lab(0% 0 0/.45)}}[data-toast=bad] .toast-ic{color:var(--bad-night);box-shadow:inset 0 0 0 1.5px var(--bad-night);background:0 0}.toasts button{white-space:nowrap;min-height:44px;color:inherit;cursor:pointer;background:0 0;padding:0 14px;font-size:.875rem;font-weight:600;box-shadow:inset 0 0 0 1.5px}.toasts button:hover{background:color-mix(in oklch, currentColor 8%, transparent)}.toasts button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}@keyframes toast-tear{0%{opacity:0;clip-path:inset(0 0 100%);transform:translateY(-22px)}to{opacity:1;clip-path:inset(-10px 0 -60px);transform:none}}@keyframes toast-spin{to{rotate:360deg}}@media (prefers-reduced-motion:reduce){.toasts>li{animation:.2s linear both toast-fade}[data-toast=wait] .toast-ic svg{animation:none}}@keyframes toast-fade{0%{opacity:0}}