dialog :focus{outline:1px solid rgb(var(--primary));outline-offset:2px}.modal{position:fixed;top:0;border:none;max-width:100%;max-height:100%;width:100%;height:100%;background-color:rgba(0,0,0,0);display:block;padding:24px;visibility:hidden;transition:visibility 0s .3s;display:flex;justify-content:center;align-items:center}.modal::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,0);transition:background-color .15s}.modal::backdrop{display:none}.modal[open]{visibility:visible;transition:none}.modal[open]::before{background-color:rgba(var(--neutral_500), 0.5)}.modal[open]>.subWrapper{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}.modal>.subWrapper{clip-path:polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);transition:clip-path .3s cubic-bezier(0.33, 1, 0.68, 1);background-color:rgb(var(--neutral_0));border-radius:16px;width:min(100%,40.5rem);max-height:100%;display:flex;flex-direction:column;row-gap:24px;padding:32px 24px}.modal>.subWrapper>header{display:flex;flex-direction:column;justify-content:flex-start;row-gap:24px}.modal>.subWrapper>header button.close{color:rgb(var(--primary));display:flex;row-gap:4px;font-size:1rem;font-weight:600;align-self:flex-start;border-radius:8px;padding:8px}.modal>.subWrapper>header button.close img{width:1.5rem;height:1.5rem;filter:url(#primary)}.modal>.subWrapper>.actions{border-top:1px solid rgb(var(--neutral_200));padding:24px;display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:16px;row-gap:16px}