:root
{
	--bg: #ffffff;
	--surface: #f4f7fb;
	--border: #dde4ee;
	--text: #0a1421;
	--muted: #4d5b6e;
	--accent: #218cf2;
	--accent-strong: #3474ef;
	--accent-soft: #02cfff;
	--gradient: linear-gradient( 135deg, #02cfff 0%, #218cf2 55%, #3474ef 100% );
	--code-bg: #eef2f7;
	--radius: 14px;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, sans-serif;
	--mono: ui-monospace, "JetBrains Mono", "Fira Code", "Source Code Pro", Menlo, Consolas, monospace;
}

@media ( prefers-color-scheme: dark )
{
	:root
	{
		--bg: #0a1421;
		--surface: #111c2b;
		--border: #223247;
		--text: #e8edf4;
		--muted: #a2afc2;
		--accent: #4fa8ff;
		--accent-strong: #6fb8ff;
		--code-bg: #0f1a29;
	}
}

*, *::before, *::after
{
	box-sizing: border-box;
}

html
{
	scroll-behavior: smooth;
}

body
{
	margin: 0;
	background: var( --bg );
	color: var( --text );
	font-family: var( --font );
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a
{
	color: var( --accent );
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

img
{
	max-width: 100%;
	height: auto;
}

.container
{
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Header */

.site-header
{
	position: sticky;
	top: 0;
	z-index: 10;
	background: color-mix( in srgb, var( --bg ) 88%, transparent );
	backdrop-filter: blur( 10px );
	border-bottom: 1px solid var( --border );
}

.site-header__inner
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}

.brand img
{
	display: block;
	height: 36px;
	width: auto;
}

.site-nav
{
	display: flex;
	gap: 22px;
}

.site-nav a
{
	color: var( --text );
	font-weight: 500;
}

.site-nav a[aria-current="page"]
{
	color: var( --accent );
}

/* Footer */

.site-footer
{
	margin-top: 64px;
	border-top: 1px solid var( --border );
	color: var( --muted );
	font-size: 0.9rem;
}

.site-footer__inner
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 24px;
	padding-bottom: 24px;
}

.site-footer p
{
	margin: 0;
}

/* Buttons */

.button
{
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid var( --border );
	border-radius: 999px;
	background: var( --surface );
	color: var( --text );
	font-weight: 600;
}

.button:hover
{
	text-decoration: none;
	border-color: var( --accent );
}

.button--primary
{
	border: none;
	background: var( --gradient );
	color: #ffffff;
}

.button--primary:hover
{
	filter: brightness( 1.08 );
}

/* Landing */

.hero
{
	position: relative;
	overflow: hidden;
	padding: 88px 0 72px;
	text-align: center;
}

.hero::before
{
	content: "";
	position: absolute;
	inset: -40% -20% auto;
	height: 120%;
	background: radial-gradient( ellipse at 50% 0%, color-mix( in srgb, var( --accent-soft ) 22%, transparent ), transparent 60% );
	pointer-events: none;
}

.hero__inner
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.hero__logo img
{
	height: 96px;
	width: auto;
}

.hero__title
{
	margin: 8px 0 0;
	font-size: clamp( 1.9rem, 4.5vw, 3rem );
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 700;
	max-width: 18ch;
}

.hero__lead
{
	margin: 0;
	max-width: 58ch;
	font-size: 1.15rem;
	color: var( --muted );
}

.hero__actions
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
}

.pillars
{
	padding: 24px 0 48px;
}

.pillars__list, .stack__grid
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
}

.pillar, .component
{
	padding: 24px;
	border: 1px solid var( --border );
	border-radius: var( --radius );
	background: var( --surface );
}

.pillar__title
{
	margin: 0 0 8px;
	font-size: 1.15rem;
}

.pillar p, .component p
{
	margin: 0;
	color: var( --muted );
}

.stack
{
	padding: 24px 0 24px;
}

.section-title
{
	margin: 0 0 6px;
	font-size: 1.7rem;
	letter-spacing: -0.01em;
}

.section-lead
{
	margin: 0 0 24px;
	max-width: 64ch;
	color: var( --muted );
}

.component__name
{
	margin: 0;
	font-size: 1.1rem;
}

.component .component__role
{
	margin: 2px 0 10px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --accent );
}

.prose-block
{
	padding: 32px 0 0;
}

/* Docs layout */

.docs-layout
{
	display: grid;
	grid-template-columns: 240px minmax( 0, 1fr );
	gap: 48px;
	padding-top: 32px;
}

@media ( min-width: 1100px )
{
	.docs-layout:has( .docs-toc )
	{
		grid-template-columns: 240px minmax( 0, 1fr ) 200px;
	}
}

@media ( max-width: 799px )
{
	.docs-layout
	{
		grid-template-columns: minmax( 0, 1fr );
		gap: 24px;
	}

	.docs-toc
	{
		display: none;
	}
}

.docs-sidebar, .docs-toc
{
	font-size: 0.93rem;
}

@media ( min-width: 800px )
{
	.docs-sidebar, .docs-toc
	{
		position: sticky;
		top: 88px;
		align-self: start;
		max-height: calc( 100vh - 104px );
		overflow-y: auto;
	}
}

.docs-nav a, .docs-toc a
{
	color: var( --muted );
}

.docs-nav a:hover, .docs-toc a:hover
{
	color: var( --text );
	text-decoration: none;
}

.docs-nav a[aria-current="page"]
{
	color: var( --accent );
	font-weight: 600;
}

.docs-nav a.docs-nav__root
{
	display: block;
	font-weight: 700;
	color: var( --text );
	margin-bottom: 16px;
}

.docs-nav__group
{
	margin-bottom: 18px;
}

.docs-nav__group-title
{
	display: block;
	font-weight: 600;
	color: var( --text );
	margin-bottom: 4px;
}

.docs-nav ul, .docs-toc ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.docs-nav li a
{
	display: block;
	padding: 4px 0 4px 12px;
	border-left: 2px solid var( --border );
}

.docs-nav li a[aria-current="page"]
{
	border-left-color: var( --accent );
}

.docs-nav ul ul
{
	margin-left: 12px;
}

.docs-toc__title
{
	margin: 0 0 8px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --muted );
}

.docs-toc li a
{
	display: block;
	padding: 3px 0;
}

.docs-toc ul ul
{
	padding-left: 12px;
}

.docs-breadcrumb
{
	margin: 0 0 4px;
	font-size: 0.9rem;
	color: var( --muted );
}

.docs-index
{
	list-style: none;
	padding: 0;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
}

.docs-index li
{
	padding: 16px 18px;
	border: 1px solid var( --border );
	border-radius: var( --radius );
	background: var( --surface );
}

.docs-index li a
{
	font-weight: 600;
}

.docs-index li p
{
	margin: 4px 0 0;
	font-size: 0.93rem;
	color: var( --muted );
}

.docs-pager
{
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var( --border );
	font-weight: 500;
}

.docs-pager__next
{
	margin-left: auto;
}

/* Prose */

.prose
{
	max-width: 76ch;
}

.prose h1
{
	margin: 0 0 16px;
	font-size: 2.2rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.prose h2
{
	margin: 40px 0 12px;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
}

.prose h3
{
	margin: 28px 0 8px;
	font-size: 1.15rem;
}

.prose p, .prose ul, .prose ol
{
	margin: 0 0 16px;
}

.prose li
{
	margin-bottom: 4px;
}

.prose code
{
	font-family: var( --mono );
	font-size: 0.9em;
	background: var( --code-bg );
	padding: 2px 6px;
	border-radius: 6px;
}

.prose pre
{
	margin: 0 0 20px;
	padding: 16px 18px;
	overflow-x: auto;
	border: 1px solid var( --border );
	border-radius: var( --radius );
	background: var( --code-bg ) !important;
	font-size: 0.9rem;
	line-height: 1.5;
}

.prose pre code
{
	background: none;
	padding: 0;
	font-size: inherit;
}

.prose blockquote
{
	margin: 0 0 16px;
	padding: 4px 18px;
	border-left: 3px solid var( --accent );
	color: var( --muted );
}

.prose table
{
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
	font-size: 0.95rem;
}

.prose th, .prose td
{
	padding: 8px 10px;
	border-bottom: 1px solid var( --border );
	text-align: left;
	vertical-align: top;
}

.prose th
{
	color: var( --muted );
	font-weight: 600;
}

.not-found
{
	padding: 80px 16px;
}