:root { --pop-scrim: rgb(3 7 13 / .62); --pop-r: 20px; --pop-mv: 48px; --pop-x: 12px; }

:root { --pop-top: max(16px, env(safe-area-inset-top)); --pop-bar: calc(93px + env(safe-area-inset-bottom)); --pop-band: calc(100dvh - var(--pop-top) - var(--pop-bar)); }
@media (min-width: 768px) { :root { --pop-top: var(--pop-mv); --pop-bar: var(--pop-mv); } }
@media (min-width: 768px) { :root { --pop-r: 24px; --pop-mv: 64px; --pop-x: 16px; } }
dialog.pop { width: min(var(--pop-w, 560px), 100vw - 32px); max-width: none; max-height: min(800px, 100dvh - 2 * var(--pop-mv)); margin: auto; padding: 0; border: 0; border-radius: var(--pop-r); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; }
dialog.pop::backdrop { background: var(--pop-scrim); }
.pop--s { --pop-w: 560px; } .pop--m { --pop-w: 640px; } .pop--l { --pop-w: 720px; } .pop--xl { --pop-w: 960px; }
.pop__x { position: absolute; z-index: 5; top: var(--pop-x); right: var(--pop-x); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(3 7 13 / .72); color: #FFFFFF; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pop__x:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 4px #03070D; }
@media (hover: hover) and (pointer: fine) { .pop__x:hover { background: #03070D; } }
dialog.pop[open] { animation: pop-in 200ms cubic-bezier(.2, .8, .2, 1); }
dialog.pop[open]::backdrop { animation: pop-fade 160ms linear; }
@keyframes pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pop-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.pop[open] { animation: pop-opacity 120ms linear; } dialog.pop[open]::backdrop { animation: pop-opacity 120ms linear; } }
@keyframes pop-opacity { from { opacity: 0; } to { opacity: 1; } }
html[data-motion="off"] dialog.pop[open], html[data-motion="off"] dialog.pop[open]::backdrop { animation: none; }