.site-image-hover-preview {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 13000;
	display: grid;
	gap: 7px;
	max-width: min(720px, calc(100vw - 28px));
	max-height: min(760px, calc(100vh - 28px));
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, 0.62);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.06);
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px) scale(0.985);
	transition: opacity 120ms ease, transform 120ms ease;
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
}

.site-image-hover-preview.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.site-image-hover-preview img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(700px, calc(100vw - 44px));
	max-height: min(690px, calc(100vh - 104px));
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: contain;
	object-position: center;
}

.site-image-hover-preview strong,
.site-image-hover-preview span {
	display: block;
	max-width: min(700px, calc(100vw - 44px));
	overflow: hidden;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-image-hover-preview strong {
	color: #1d1d1f;
	font-size: 12.5px;
	font-weight: 760;
}

.site-image-hover-preview span {
	color: #6e6e73;
	font-size: 11.5px;
	font-weight: 650;
}

@media (hover: none), (pointer: coarse) {
	.site-image-hover-preview {
		display: none;
	}
}