dialog{position:fixed;inset:0;padding:1rem;display:grid;place-items:center;width:100%;height:100%;max-width:unset;max-height:unset;overflow:hidden;border:none;background-color:rgba(0,0,0,0);transition:opacity 350ms ease}dialog::backdrop{background-color:rgba(0,0,0,.5);backdrop-filter:blur(8px)}dialog .modal__content{z-index:1;position:relative;margin:var(--spacings-3) var(--container-px);width:min(100%,var(--bs-column-width)*6 + var(--bs-gap)*5);max-width:500px;max-height:80dvh;background-color:var(--color-white);translate:0 -50px;transition:translate 500ms ease}dialog .modal__close{position:absolute;top:var(--spacings-2);right:var(--spacings-2);color:#000;opacity:1;transition:opacity 350ms ease}dialog .modal__close svg{width:24px;height:24px;display:block}dialog .modal__body,dialog .modal__header{padding:var(--spacings-2)}dialog .modal__header:has(.modal__title){border-bottom:1px solid var(--color-hsla-black-15)}dialog .modal__body .frame{padding-inline:0}dialog .modal__backdrop{z-index:-1;position:absolute;inset:0;background-color:rgba(0,0,0,0)}dialog[open] .modal__content{translate:0}dialog:not([open]){pointer-events:none;opacity:0}dialog:not([open]) .modal__content{visibility:hidden;transition:translate 500ms ease,visibility 0ms ease 500ms}@media(hover: hover)and (pointer: fine){.modal__close:focus-visible{outline:none}.modal__close:focus-visible svg{outline:2px solid #000;outline-offset:4px}.modal__close:hover{opacity:.5}}