.popup.svelte-ilq1pe{--_bg: var(--popup-close-color, var(--color-white));--r: 50px;--p: 8px;--closed-size: 72px;--color: var(--color-dark-purple);--shape-duration: .45s;--shape-open-delay: .15s;--shape-ease: var(--ease-in-out-quint);position:relative;inline-size:327px;block-size:129px;contain:style}.popup.svelte-ilq1pe .popup__pill:where(.svelte-ilq1pe){clip-path:inset(0 0 0 0 round var(--r));background-color:var(--color);block-size:100%;inline-size:100%;padding:var(--p);color:var(--color-white);contain:strict;will-change:clip-path;display:flex;align-items:center;gap:20px;transition-property:clip-path;transition-duration:var(--shape-duration);transition-timing-function:var(--shape-ease);transition-delay:var(--shape-open-delay)}.popup.svelte-ilq1pe .popup__pill:where(.svelte-ilq1pe) img:where(.svelte-ilq1pe){aspect-ratio:1;block-size:100%;border-radius:calc(var(--r) - var(--p));background-color:var(--color-dark-purple);flex-shrink:0}.popup.svelte-ilq1pe .popup__pill:where(.svelte-ilq1pe) article:where(.svelte-ilq1pe){flex-grow:1;display:flex;flex-direction:column;gap:6px}.popup.svelte-ilq1pe .popup__pill:where(.svelte-ilq1pe) h4:where(.svelte-ilq1pe){color:var(--color-yellow)}.popup.svelte-ilq1pe .popup__pill:where(.svelte-ilq1pe) img:where(.svelte-ilq1pe),.popup.svelte-ilq1pe .popup__pill:where(.svelte-ilq1pe) article:where(.svelte-ilq1pe){transition-property:opacity,transform;transition-duration:.8s,var(--shape-duration);transition-timing-function:var(--ease-in-out-quint);transition-delay:calc(var(--shape-open-delay) + var(--i) * .15s)}.popup.svelte-ilq1pe .popup__dots:where(.svelte-ilq1pe){position:absolute;inset-block-end:0;inset-inline-end:0;contain:strict;block-size:var(--closed-size);inline-size:var(--closed-size);display:flex;justify-content:center;align-items:center;gap:4px;cursor:pointer;pointer-events:none;opacity:0;transition-property:opacity;transition-duration:var(--shape-duration);transition-timing-function:var(--shape-ease)}.popup.svelte-ilq1pe .popup__dots:where(.svelte-ilq1pe) .dot:where(.svelte-ilq1pe){block-size:6px;aspect-ratio:1;border-radius:6px;background-color:var(--color-white);z-index:1}.popup.svelte-ilq1pe .popup__close:where(.svelte-ilq1pe){--z: 36px;position:absolute;inset-inline-end:calc(var(--z) * -.15);inset-block-start:calc(var(--z) * -.15);block-size:var(--z);inline-size:var(--z);background-color:var(--_bg);border-radius:var(--z);z-index:1;padding:.5em;box-sizing:border-box;contain:strict;cursor:pointer;transition-property:opacity,transform,background-color;transition-duration:.55s,.25s;transition-timing-function:var(--shape-ease);transition-delay:var(--shape-open-delay)}.popup.svelte-ilq1pe .popup__corner:where(.svelte-ilq1pe){position:absolute;inset-block-end:0;inset-inline-end:0;block-size:var(--closed-size);inline-size:var(--closed-size);background-color:var(--color);border-radius:var(--r) var(--r) 0 var(--r);transform-origin:bottom right;transform:scale(1.5);transition-property:transform;transition-duration:var(--shape-duration);transition-timing-function:var(--shape-ease);transition-delay:var(--shape-open-delay)}.popup.closed.svelte-ilq1pe .popup__pill:where(.svelte-ilq1pe){clip-path:inset(calc(100% - var(--closed-size) - 1px) 0 0 calc(100% - var(--closed-size) - 1px) round var(--r));pointer-events:none}.popup.closed.svelte-ilq1pe .popup__pill:where(.svelte-ilq1pe) img:where(.svelte-ilq1pe),.popup.closed.svelte-ilq1pe .popup__pill:where(.svelte-ilq1pe) article:where(.svelte-ilq1pe){transform:translateY(10px);opacity:0;transition-delay:calc(var(--i) * .1s);transition-duration:.65s,calc(var(--shape-duration) * 1.6);transition-timing-function:var(--ease-in-out-quint)}.popup.closed.svelte-ilq1pe .popup__corner:where(.svelte-ilq1pe){transform:scale(1)}.popup.closed.svelte-ilq1pe .popup__close:where(.svelte-ilq1pe){opacity:0;transform:translateY(10px) scale(0);transition-duration:.35s;transition-delay:0}.popup.closed.svelte-ilq1pe .popup__dots:where(.svelte-ilq1pe){pointer-events:auto;opacity:1;transition-property:opacity;transition-delay:calc(var(--shape-open-delay) + .5s)}.popup.closed.svelte-ilq1pe .popup__dots:where(.svelte-ilq1pe) .dot:where(.svelte-ilq1pe){transition-delay:.85s;opacity:1;animation:svelte-ilq1pe-dot-flashing 1.2s infinite alternate;animation-delay:calc(var(--i) * .2s)}@keyframes svelte-ilq1pe-dot-flashing{0%{transform:translateY(-65%)}50%,to{transform:translateY(0)}}
