dialog::backdrop,
dialog::-webkit-backdrop {
	background-color: #000a;
	cursor: pointer;
	backdrop-filter: contrast(0.4) brightness(0.9);
}
	#img-dialog {
		padding: 0;
		border: none;
		outline: none !important;
		background-color: transparent;
		animation: modal-popup ease-in 0.1s;
		--superellipse: 60px;
		mask: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,1 c0,-1 0,-1 1,-1 l99,0 l0,100 l-100,0 Z"/></svg>') top left / calc(var(--superellipse) * 100) no-repeat intersect, url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l99,0 c1,0 1,0 1,1 l0,99 l-100,0 l0,-100 Z"/></svg>') top right / calc(var(--superellipse) * 100) no-repeat intersect, url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,99 c0,1 -0,1 -1,1 l-99,0 Z"/></svg>') bottom right / calc(var(--superellipse) * 100) no-repeat intersect, url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="m0,0 l100,0 l0,100 l-99,0 c-1,0 -1,-0 -1,-1 Z"/></svg>') bottom left / calc(var(--superellipse) * 100) no-repeat intersect;
		border-radius: 0 !important;
		max-width: calc(100vw - var(--page-padding) * 2);
		max-height: calc(100vh - var(--page-padding) * 2);
	}
	#img-dialog img {
		cursor: zoom-out;
		max-width: calc(100vw - var(--page-padding) * 2);
		max-height: calc(100vh - var(--page-padding) * 2);
	}
	img[data-big-src] {
		cursor: zoom-in;
	}

	@keyframes modal-popup {
		0% {
			opacity: 0.4;
			transform: scale(0.98);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}