.site-shell .frontmark-render-preview {
	position: relative;
	margin-block: 1.5rem clamp(2rem, 5vw, 3.5rem);
	border: 1px solid color-mix(in srgb, var(--frontmark-cyan, #12c6d8) 36%, transparent);
	border-radius: 10px;
	padding: clamp(1.2rem, 2.4vw, 2rem);
	padding-block-start: 4.1rem;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--frontmark-panel, #061e30) 92%, transparent), transparent 3rem),
		color-mix(in srgb, var(--frontmark-ink, #000713) 78%, transparent);
	box-shadow:
		0 1.2rem 3rem color-mix(in srgb, var(--frontmark-ink, #000713) 34%, transparent),
		inset 0 1px color-mix(in srgb, white 8%, transparent);
	overflow: hidden;
}

.site-shell .frontmark-render-preview::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2.85rem;
	border-bottom: 1px solid color-mix(in srgb, var(--frontmark-cyan, #12c6d8) 28%, transparent);
	background:
		radial-gradient(circle at 1.2rem 50%, var(--frontmark-color-ff5f57, #ff5f57) 0 0.34rem, transparent 0.36rem),
		radial-gradient(circle at 2.35rem 50%, var(--frontmark-color-ffbd2e, #ffbd2e) 0 0.34rem, transparent 0.36rem),
		radial-gradient(circle at 3.5rem 50%, var(--frontmark-color-28c840, #28c840) 0 0.34rem, transparent 0.36rem),
		linear-gradient(90deg, color-mix(in srgb, var(--frontmark-panel, #061e30) 96%, transparent), color-mix(in srgb, var(--frontmark-cyan, #12c6d8) 12%, transparent));
}

.site-shell .frontmark-render-preview::after {
	content: "Preview";
	position: absolute;
	inset-block-start: 0.72rem;
	inset-inline-end: 1rem;
	border: 1px solid color-mix(in srgb, var(--frontmark-cyan, #12c6d8) 62%, transparent);
	border-radius: 5px;
	padding: 0.18rem 0.62rem;
	background:
		linear-gradient(135deg, transparent 0 38%, color-mix(in srgb, white 82%, transparent) 46% 52%, transparent 60%) -130% 0 / 230% 100% no-repeat,
		color-mix(in srgb, var(--frontmark-cyan, #12c6d8) 18%, var(--frontmark-ink, #000713));
	color: var(--frontmark-cyan-soft, #b7f7fb);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
	transform: rotate(9deg);
	transform-origin: center;
	animation: frontmarkPreviewDiagonalBlink 1.7s ease-in-out infinite;
}

.site-shell .frontmark-render-preview > h2:first-child {
	margin-block-start: 0;
}

.site-shell .frontmark-render-preview .mkdocs-container,
.site-shell .frontmark-render-preview .mkdocs-parallax {
	margin-block: 1.35rem clamp(1.8rem, 4vw, 3rem);
}

@keyframes frontmarkPreviewDiagonalBlink {
	0%,
	100% {
		opacity: 0.78;
		filter: saturate(0.9);
		background-position: -130% 0, 0 0;
	}

	42% {
		opacity: 1;
		filter: saturate(1.25) brightness(1.08);
		background-position: 130% 0, 0 0;
	}

	58% {
		opacity: 0.58;
		filter: saturate(0.8);
	}
}