/* Loaded only on custom Astro pages through astro.cssOverrides. */
body.site-shell {
	--frontmark-astro-page-gutter: 40px;
	--frontmark-astro-mobile-gutter: 28px;
	--frontmark-astro-max-width: 1120px;
	--frontmark-astro-main-width: 1120px;
	--frontmark-astro-content-width: 1100px;
	--frontmark-astro-main-padding: 72px;
	--frontmark-astro-content-padding: 64px;
	--frontmark-astro-mobile-main-padding: 44px;
	--frontmark-astro-mobile-content-padding: 44px;
	--sl-color-text: var(--frontmark-text);
	--sl-color-text-invert: var(--frontmark-ink);
	--sl-color-red-low: color-mix(in srgb, var(--frontmark-danger) 22%, var(--frontmark-ink));
	--sl-color-red: var(--frontmark-danger);
	--sl-color-red-high: var(--frontmark-color-fecaca, #fecaca);
	--sl-color-green: var(--frontmark-color-00c853);
	--sl-color-green-high: var(--frontmark-color-86efac, #86efac);
	--sl-font-system: var(--frontmark-font-text, ui-sans-serif, system-ui, sans-serif);
	--sl-text-xs: 0.75rem;
	--sl-text-sm: 0.875rem;
	--sl-text-base: 1rem;
	--sl-text-lg: 1.125rem;
	--sl-text-h4: 1.25rem;
}

.site-shell .hero {
	align-items: end;
	min-height: auto;
	margin-bottom: 0;
}

.site-shell .hero-visual {
	min-height: clamp(12rem, 28vw, 21rem);
}


.site-shell .home-feature-content {
	margin-top: clamp(0.5rem, 1.2vw, 0.85rem);
}

.frontmark-home-demo {
	margin-block: 0 clamp(1.5rem, 4vw, 3rem);
}

.site-shell .frontmark-home-demo h2,
.site-shell .home-feature-content.prose > h2 {
	margin-block-start: 0;
}

.frontmark-code-window {
	position: relative;
	margin-block: 1.35rem 0;
	border: 1px solid color-mix(in srgb, var(--frontmark-cyan) 34%, transparent);
	border-radius: 8px;
	padding-block-start: 2.45rem;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--frontmark-panel) 84%, transparent), transparent 2.45rem),
		color-mix(in srgb, var(--frontmark-ink) 88%, transparent);
	box-shadow: 0 1.1rem 2.8rem color-mix(in srgb, var(--frontmark-ink) 34%, transparent);
	overflow: hidden;
}

.frontmark-code-window::before {
	content: "";
	position: absolute;
	inset-block-start: 0.88rem;
	inset-inline-start: 1rem;
	width: 0.68rem;
	height: 0.68rem;
	border-radius: 50%;
	background: var(--frontmark-color-ff5f57);
	box-shadow:
		1.05rem 0 0 var(--frontmark-color-ffbd2e),
		2.1rem 0 0 var(--frontmark-color-28c840);
}

.frontmark-code-window::after {
	content: "frontmark-demo.md";
	position: absolute;
	inset-block-start: 0.74rem;
	inset-inline: 0;
	color: var(--frontmark-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.78rem;
	font-weight: 800;
	text-align: center;
}

.frontmark-code-window .expressive-code,
.frontmark-code-window pre {
	margin: 0;
}

.frontmark-code-window .expressive-code figure.frame,
.frontmark-code-window pre {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.frontmark-code-window .expressive-code figure.frame figcaption.header {
	display: none;
}

.home-feature-content.prose > .mkdocs-container,
.home-feature-content.prose > .mkdocs-parallax {
	margin-block: 1.35rem clamp(2rem, 5vw, 3.5rem);
}

.home-feature-content.prose > .mkdocs-card-grid {
	margin-block-start: 1.35rem;
}