.ii-tool-preview {
	--bento-dot: rgba(0, 0, 0, 0.1);
	--bento-card-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.05),
		0 12px 24px rgba(0, 0, 0, 0.05);

	position: relative;
	width: 100%;
	aspect-ratio: 1600 / 893;
	border-radius: var(--ii-radius-md);
	overflow: hidden;
	border: 1px solid var(--ii-border);
	background: var(--ii-bg-tertiary);
	pointer-events: none;
}

.dark .ii-tool-preview {
	--bento-dot: rgba(255, 255, 255, 0.09);
	--bento-card-shadow: inset 0 -20px 80px -20px #ffffff1f;
}

.ii-tool-preview .ii-tool-compare {
	position: absolute;
	inset: 0;
	width: auto;
	max-width: none;
	margin: 0;
	border-radius: inherit;
	background: transparent;
}

.ii-tool-preview .ii-tool-compare-stage {
	width: 100%;
	height: 100%;
}

.ii-tool-preview .ii-tool-compare-img--after {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

.ii-tool-preview .ii-tool-compare-img--before {
	clip-path: inset(0 50% 0 0);
}

.ii-tool-preview .ii-tool-compare-divider,
.ii-tool-preview .ii-tool-compare-handle {
	left: 50%;
}

.ii-tool-preview--finder {
	background: var(--ii-surface-white);
}

.ii-tool-preview--merge {
	aspect-ratio: auto;
	height: 480px;
	border-radius: var(--ii-radius-lg);
	background: var(--ii-surface-white);
}

@media (max-width: 768px) {
	.ii-tool-preview--merge {
		height: 340px;
	}

	.ii-tool-preview--merge .bento-scene-merge {
		padding: var(--ii-space-4);
	}
}