div.dialog{position:fixed;inset:0;display:none;place-items:center}div.dialog>.overlay{background-color:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:dialogOverlayShow .3s cubic-bezier(.16,1,.3,1);grid-area:1/1/2/2;width:100%;height:100%;z-index:-1}div.dialog :where(.sticky){position:-webkit-sticky;position:sticky;top:0;border-radius:.5rem;background-color:var(--contrast);width:calc(100% + 1rem);padding:.5rem;margin:-.5rem -.5rem 1rem;z-index:10;box-shadow:0 0 0 0 rgba(0,0,0,0);transition:box-shadow .3s ease-out}:where(div.dialog>.content){background-color:var(--contrast);border-radius:.5rem;padding:1rem;width:95%;height:-moz-fit-content;height:fit-content;max-width:450px;max-height:90vh;overflow-y:auto;grid-area:1/1/2/2;position:relative;scrollbar-width:thin;animation:dialogContentShow .15s cubic-bezier(.16,1,.3,1);transition:max-height .3s ease-in-out}:where(div.dialog>.content).scrolled .sticky{transition:box-shadow .2s ease-out;box-shadow:.2rem .2rem .5rem .3rem var(--transparent-contrast-15)}@media screen and (max-width:600px){:where(div.dialog>.content){padding:.5rem}}:where(div.dialog>.content).scrollGradient:after{content:"";display:block;position:-webkit-sticky;position:sticky;bottom:-1rem;left:0;right:0;height:2rem;margin-top:-1.5rem;flex-shrink:0;background:linear-gradient(to bottom,transparent,var(--contrast));pointer-events:none;z-index:5}@keyframes dialogContentShow{0%{translate:0 2vh;scale:97%}to{translate:0 0;scale:100%}}@keyframes dialogOverlayShow{0%{opacity:0}to{opacity:1}}