dialog{border:none;background:transparent;padding:0;margin:auto;max-width:100vw;max-height:100vh;max-width:100dvw;max-height:100dvh;overflow:visible;-webkit-user-select:none;user-select:none;color:var(--color)}dialog[open] .content{animation:modalIn .4s ease forwards}dialog.closing .content{animation:modalOut .4s ease forwards}dialog[open]::backdrop{animation:backdropIn .4s ease forwards}dialog.closing::backdrop{animation:backdropOut .4s ease forwards}@keyframes modalIn{0%{opacity:0;transform:translateY(2em)}to{opacity:1;transform:translateY(0)}}@keyframes modalOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(2em)}}@keyframes backdropIn{0%{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{background-color:color-mix(in srgb,var(--bg-dark),transparent 98%);-webkit-backdrop-filter:blur(1em);backdrop-filter:blur(1em)}}@keyframes backdropOut{0%{background-color:color-mix(in srgb,var(--bg-dark),transparent 98%);-webkit-backdrop-filter:blur(1em);backdrop-filter:blur(1em)}to{background-color:transparent;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}dialog .content{background-color:var(--bg);border-radius:1em;width:90vw;width:90dvw;max-width:1000px;box-shadow:var(--shadow);overflow:hidden}[data-theme=dark] :is(dialog .content){border:1px solid var(--border)}.btn-modal-close{float:right;width:1.5em;height:1.5em;padding:0;border-radius:50%;position:relative}.btn-modal-close:before,.btn-modal-close:after{content:"";position:absolute;top:50%;left:50%;width:.9em;height:.12em;background-color:currentColor;border-radius:1em}.btn-modal-close:before{transform:translate(-50%,-50%) rotate(45deg)}.btn-modal-close:after{transform:translate(-50%,-50%) rotate(-45deg)}dialog .content>.header{padding:1em;background-color:var(--card-bg);display:grid;grid-template-columns:1fr auto;align-items:center}dialog .content>.header h2,dialog .content>.header .h2{margin:0;color:var(--secondary);font-size:1.5em}dialog .content>.body{padding:2em;max-height:80dvh;overflow-y:auto;overscroll-behavior:none;position:relative}dialog .content>.body>:first-child{margin-top:0}dialog .content>.body>:last-child{margin-bottom:0}dialog .content>.footer{padding:1em;color:var(--secondary);background-color:var(--bg-dark)}dialog .content>.footer>:last-child{margin-bottom:0}@media only screen and (max-width:600px){dialog .content>.body{padding:1em}}
