:root{--popup-padding:clamp(2rem,5vw,4rem);--popup-maxwidth:800px;--popup-maxheight:80vh;--popup-width:90vw;--popup-border-radius:1rem}::view-transition-old(popup-slide){animation:popupOut .3s ease both}::view-transition-new(popup-slide){animation:popupIn .3s ease both}.popup[open]{display:grid;height:100vh;left:0;place-content:center;position:fixed;top:0;width:100vw;z-index:9999}.popup[open] .popup-backdrop{background:rgba(0,0,0,.5);height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}.popup-container{background:var(--body-background);border-radius:var(--popup-border-radius);color:var(--text-color);margin-left:auto;margin-right:auto;max-height:var(--popup-maxheight);max-width:var(--popup-maxwidth);overflow-y:auto;padding:var(--popup-padding);position:relative;width:calc(var(--popup-width) - var(--popup-padding)*2);z-index:1}.popup-trigger-hidden{display:none;list-style:none}.popup-trigger-hidden::-webkit-details-marker{display:none}.popup-step{display:none;&.active{display:block}}.popup-step.active:not(:has(.popup-step.active)){view-transition-name:popup-slide}.popup-close-button{appearance:none;background:var(--text-color);border:0;border-radius:2rem;color:var(--body-background);height:2rem;position:absolute;right:.5rem;top:.5rem;width:2rem;z-index:10}.popup-step hr{border:0;border-top:1px solid var(--text-color);margin:3rem auto;max-width:100%;opacity:.3}.popup-step-links{display:flex;flex-wrap:wrap;gap:0 1rem;justify-content:center;& .btn{--button-padding-small:0;margin-top:.75rem;padding:0}& a.btn-link{--button-padding-small:10px 36px 12px;padding:var(--button-padding-small)}}