:root {
	color-scheme: light dark;
	--st-color-canvas: #f7f8fa;
	--st-color-surface: #ffffff;
	--st-color-text: #172033;
	--st-color-muted: #526078;
	--st-color-border: #d8dee9;
	--st-color-accent: #3157d5;
	--st-color-accent-strong: #2443a8;
	--st-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;
	--st-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	--st-radius-sm: 0.5rem;
	--st-radius-md: 0.875rem;
	--st-shadow-card: 0 1rem 2.5rem rgb(23 32 51 / 8%);
	--st-space-1: 0.25rem;
	--st-space-2: 0.5rem;
	--st-space-3: 0.75rem;
	--st-space-4: 1rem;
	--st-space-6: 1.5rem;
	--st-space-8: 2rem;
	--st-space-12: 3rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--st-color-canvas: #101522;
		--st-color-surface: #182032;
		--st-color-text: #f4f6fb;
		--st-color-muted: #b4bed0;
		--st-color-border: #323e55;
		--st-color-accent: #8ba4ff;
		--st-color-accent-strong: #aec0ff;
		--st-shadow-card: 0 1rem 2.5rem rgb(0 0 0 / 25%);
	}
}

.st-shell {
	min-height: 100vh;
	margin: 0;
	background: var(--st-color-canvas);
	color: var(--st-color-text);
	font-family: var(--st-font-sans);
	line-height: 1.6;
}

.st-container {
	box-sizing: border-box;
	width: min(100% - 2rem, 48rem);
	margin-inline: auto;
	padding-block: clamp(3rem, 10vw, 8rem);
}

.st-stack > * {
	margin-block: 0;
}

.st-stack > * + * {
	margin-block-start: var(--st-space-4);
}

.st-eyebrow {
	color: var(--st-color-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.st-lede {
	max-width: 42rem;
	color: var(--st-color-muted);
	font-size: clamp(1.125rem, 3vw, 1.375rem);
}

.st-card {
	padding: clamp(1.25rem, 4vw, 2rem);
	border: 1px solid var(--st-color-border);
	border-radius: var(--st-radius-md);
	background: var(--st-color-surface);
	box-shadow: var(--st-shadow-card);
}

.st-card code {
	display: block;
	overflow-x: auto;
	padding: var(--st-space-3) var(--st-space-4);
	border-radius: var(--st-radius-sm);
	background: var(--st-color-canvas);
	font-family: var(--st-font-mono);
	font-size: 0.875rem;
}

.st-button {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
	padding: var(--st-space-3) var(--st-space-4);
	border-radius: var(--st-radius-sm);
	background: var(--st-color-accent);
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.st-button:hover,
.st-button:focus-visible {
	background: var(--st-color-accent-strong);
}

.st-button:focus-visible {
	outline: 3px solid var(--st-color-accent);
	outline-offset: 3px;
}