/* astwerk docs — one file, no preprocessor, no framework. */

/* Dark is the unconditional default — not tied to prefers-color-scheme — so
   [data-theme="light"] is the only override. The toggle script in layout.templ
   sets that attribute from localStorage before paint, so there's no flash. */
:root {
	--bg: #0f1117;
	--bg-raised: #171a22;
	--bg-subtle: #1b1f2a;
	--fg: #e8ebf2;
	--fg-strong: #ffffff;
	--muted: #9aa3b5;
	--muted-2: #6b7385;
	--line: #272c3a;
	--line-strong: #343b4d;
	--accent: #7c8cff;
	--accent-2: #9d6bff;
	--accent-contrast: #ffffff;
	--accent-soft: #1e2440;
	--code-bg: #141722;
	--code-line: #232838;
	--success: #3fd08f;
	--warning: #f0a24c;
	--danger: #f06f68;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.28);
	--shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.4);
	--radius: 10px;
	--radius-sm: 7px;
	--radius-pill: 999px;
	--mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--grad: linear-gradient(120deg, var(--accent), var(--accent-2));
}

[data-theme="light"] {
	--bg: #f7f8fc;
	--bg-raised: #ffffff;
	--bg-subtle: #e9ecf5;
	--fg: #1c1f2b;
	--fg-strong: #0f1117;
	--muted: #5b6272;
	--muted-2: #878ea0;
	--line: #d9dde9;
	--line-strong: #c6cbd9;
	--accent: #4c63e8;
	--accent-2: #7a3fd6;
	--accent-contrast: #ffffff;
	--accent-soft: #ecefff;
	--code-bg: #f3f4fa;
	--code-line: #e4e7f0;
	--success: #138a5c;
	--warning: #b26a14;
	--danger: #c74c44;
	--shadow: 0 1px 2px rgba(30, 34, 50, 0.06), 0 10px 28px rgba(30, 34, 50, 0.08);
	--shadow-lg: 0 2px 4px rgba(30, 34, 50, 0.07), 0 18px 42px rgba(30, 34, 50, 0.12);
}

/* In light mode a single soft halo reads cleaner than the dark theme's two
   corner glows — white should stay white, with just a hint of the accent. */
[data-theme="light"] body {
	background:
		radial-gradient(80rem 36rem at 50% -14rem, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%),
		var(--bg);
	background-repeat: no-repeat;
}

/* The hero's corner glows are heavy at the dark theme's intensity on white. */
[data-theme="light"] .hero::before {
	background:
		radial-gradient(45% 55% at 30% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
		radial-gradient(40% 50% at 75% 30%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 70%);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
	margin: 0;
	background:
		radial-gradient(70rem 38rem at 82% -10rem, color-mix(in srgb, var(--accent) 7%, transparent), transparent 65%),
		radial-gradient(60rem 32rem at 8% -12rem, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 65%),
		var(--bg);
	background-repeat: no-repeat;
	color: var(--fg);
	font: 16px/1.65 var(--sans);
	-webkit-text-size-adjust: 100%;
	transition: background-color 0.18s ease, color 0.18s ease;
}

::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }

/* Slim, themed scrollbars. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
	background: var(--line-strong);
	border-radius: var(--radius-pill);
	border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

code, pre { font-family: var(--mono); font-size: 0.9em; }

code {
	background: var(--code-bg);
	padding: 0.14em 0.38em;
	border-radius: 5px;
	border: 1px solid var(--line);
}

pre code { background: none; padding: 0; border: 0; }

/* Code blocks — a container with a header bar (language + copy button) and the
   highlighted <pre> inside. Markdown fences and templ snippets both end up as
   `pre.chroma`; the inline script in layout.templ wraps the markdown ones and
   wires every copy button. */
.code {
	position: relative;
	margin: 1.35rem 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--code-bg);
	box-shadow: var(--shadow);
	overflow: hidden;
}
/* Every code block gets a thin gradient hairline at the top, so a fence reads
   as a surface with a header rather than a grey slab. */
.code::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, transparent), color-mix(in srgb, var(--accent-2) 80%, transparent));
	opacity: 0.5;
	pointer-events: none;
}

.code-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.45rem 0.7rem 0.45rem 0.9rem;
	border-bottom: 1px solid var(--code-line);
	background: color-mix(in srgb, var(--code-bg) 55%, var(--bg-raised));
	font-size: 0.78rem;
}

.code-lang {
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--muted-2);
}
.code-lang::before {
	content: "";
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.45rem;
	border-radius: 2px;
	background: var(--grad);
	vertical-align: 0.02rem;
}

.code-copy {
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.22rem 0.65rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--bg-raised);
	color: var(--muted);
	cursor: pointer;
	transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.code-copy:hover { color: var(--accent); border-color: var(--accent); }
.code-copy[data-copied="true"] { color: var(--success); border-color: var(--success); }

pre.chroma {
	margin: 0;
	padding: 1rem 1.1rem !important;
	overflow-x: auto;
	background: transparent;
}

/* A bare `pre.chroma` before the script has wrapped it still gets a fallback. */
.prose > pre.chroma,
.wide > pre.chroma {
	margin: 1.35rem 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--code-bg);
	overflow-x: auto;
	box-shadow: var(--shadow);
}

.skip {
	position: absolute;
	left: -9999px;
}
.skip:focus {
	left: 1rem;
	top: 0.75rem;
	z-index: 20;
	background: var(--bg-raised);
	padding: 0.55rem 0.8rem;
	border: 2px solid var(--accent);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- Top bar --- */

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 0.85rem 1.5rem;
	position: sticky;
	top: 0;
	background: color-mix(in srgb, var(--bg) 85%, transparent);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	z-index: 10;
}
/* The hairline under the bar is a gradient, not a flat rule — it fades in
   toward the middle and picks up the accent, so the bar reads as a surface
   edge rather than a line. */
.topbar::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 35%, color-mix(in srgb, var(--accent-2) 55%, transparent) 65%, transparent);
	opacity: 0.85;
	pointer-events: none;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.08rem;
	color: var(--fg-strong);
	text-decoration: none;
	letter-spacing: -0.02em;
}
.brand .mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 7px;
	background: var(--grad);
	color: var(--accent-contrast);
	font-size: 1rem;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent);
	transition: transform 0.16s ease;
}
.brand:hover .mark { transform: rotate(-8deg) scale(1.08); }

.topnav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.topnav a {
	color: var(--muted);
	text-decoration: none;
	font-size: 0.94rem;
	font-weight: 500;
	padding: 0.3rem 0.1rem;
	position: relative;
	transition: color 0.12s ease;
}
.topnav a:hover { color: var(--fg-strong); }
.topnav a[aria-current] { color: var(--fg-strong); font-weight: 600; }
.topnav a[aria-current]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.05rem;
	height: 2px;
	border-radius: 2px;
	background: var(--grad);
}

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--bg-raised);
	color: var(--fg);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	transition: border-color 0.12s ease, transform 0.12s ease;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.theme-toggle::before { content: "\2600"; } /* ☀ — click to go light */
[data-theme="light"] .theme-toggle::before { content: "\1F319"; } /* 🌙 — click to go dark */

/* --- Layout --- */

.with-sidebar {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr);
	gap: 3rem;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
	align-items: start;
}

main { min-width: 0; }
main.wide { max-width: 56rem; margin: 0 auto; padding: 3rem 1.5rem 4rem; }

.sidebar { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.sidebar-title {
	font-family: var(--display);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--muted-2);
	margin: 0 0 1rem 0.15rem;
	font-weight: 700;
}
.sidebar-group { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 1.3rem; }
.sidebar-group:last-child { margin-bottom: 0; }
.sidebar-group-title {
	font-family: var(--display);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted-2);
	opacity: 0.9;
	margin: 0 0 0.35rem 0.6rem;
	font-weight: 700;
}
.sidebar-group a {
	color: var(--muted);
	text-decoration: none;
	padding: 0.38rem 0.65rem;
	border-radius: 7px;
	font-size: 0.93rem;
	border-left: 2px solid transparent;
	transition: background-color 0.1s ease, color 0.1s ease;
}
.sidebar-group a:hover { color: var(--fg-strong); background: var(--bg-subtle); }
.sidebar-group a.active {
	color: var(--accent);
	background: linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 45%, transparent));
	font-weight: 650;
	border-left-color: var(--accent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.sidebar-sub {
	list-style: none;
	margin: 0.15rem 0 0.4rem;
	padding: 0 0 0 0.55rem;
	border-left: 1px solid var(--line);
	margin-left: 1rem;
}
.sidebar-sub a {
	display: block;
	color: var(--muted);
	text-decoration: none;
	font-size: 0.85rem;
	padding: 0.28rem 0.7rem;
	border-left: none;
}
.sidebar-sub a:hover { color: var(--fg-strong); }
.sidebar-sub a.active { color: var(--accent); font-weight: 650; }
.sidebar-sub a.deep { padding-left: 1.35rem; font-size: 0.8rem; }

@media (max-width: 860px) {
	.with-sidebar { grid-template-columns: 1fr; gap: 1.5rem; }
	.sidebar { position: static; max-height: none; }
	.sidebar-group { flex-flow: row wrap; }
}

/* --- Prose --- */

.prose h1, .prose h2, .prose h3 { font-family: var(--display); }
.prose h1 {
	font-size: 2.15rem;
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin: 0 0 0.5rem;
	color: var(--fg-strong);
}
.prose h2 {
	font-size: 1.4rem;
	letter-spacing: -0.015em;
	margin: 2.8rem 0 0.9rem;
	color: var(--fg-strong);
}
/* A gradient overline instead of a flat rule: headings start with a short
   accent bar, so a section boundary reads as a highlight, not a line. */
.prose h2::before {
	content: "";
	display: block;
	width: 2.8rem;
	height: 0.24rem;
	border-radius: var(--radius-pill);
	background: var(--grad);
	margin-bottom: 0.55rem;
}
.prose h3 { font-size: 1.1rem; margin: 1.9rem 0 0.5rem; color: var(--fg-strong); }

/* Full-width pages (the home page) get the same overline treatment for their
   section headings. */
main.wide h2 {
	font-family: var(--display);
	font-size: 1.5rem;
	letter-spacing: -0.015em;
	margin: 2.6rem 0 0.9rem;
	color: var(--fg-strong);
}
main.wide h2::before {
	content: "";
	display: block;
	width: 2.8rem;
	height: 0.24rem;
	border-radius: var(--radius-pill);
	background: var(--grad);
	margin-bottom: 0.55rem;
}
.prose p, .prose li { max-width: 44rem; }
.prose .lede {
	font-size: 1.12rem;
	color: var(--muted);
	margin: 0 0 2rem;
	max-width: 44rem;
}
.prose blockquote {
	margin: 1.3rem 0;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	background: var(--bg-subtle);
	color: var(--muted);
}
.prose blockquote p { margin: 0; }
.prose table {
	border-collapse: collapse;
	width: 100%;
	margin: 1.3rem 0;
	font-size: 0.93rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.prose th, .prose td {
	text-align: left;
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.prose thead th { background: var(--bg-subtle); font-weight: 650; border-bottom: 1px solid var(--line-strong); }
.prose tbody tr:last-child td { border-bottom: 0; }

/* Collapsible sections — <details> in the docs markdown. A bordered block with
   an accent spine so a closed section reads as "extra material", not body
   text, and the chevron makes its state obvious. */
.prose details {
	position: relative;
	margin: 1.3rem 0;
	padding: 0.15rem 1.05rem 0.4rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 4rem),
		var(--bg-subtle);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.prose details[open] {
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 3rem),
		color-mix(in srgb, var(--bg-subtle) 60%, var(--bg));
	border-color: var(--line-strong);
	padding-bottom: 0.85rem;
}
.prose details > summary {
	cursor: pointer;
	list-style: none;
	padding: 0.7rem 0 0.4rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--fg-strong);
	user-select: none;
	transition: color 0.12s ease;
}
.prose details > summary::-webkit-details-marker { display: none; }
.prose details > summary::before {
	content: "\25B8";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2rem;
	height: 1.2rem;
	margin-right: 0.5rem;
	border-radius: 5px;
	background: var(--accent-soft);
	border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
	color: var(--accent);
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.prose details[open] > summary::before {
	transform: rotate(90deg);
	background: color-mix(in srgb, var(--accent) 18%, var(--accent-soft));
	border-color: var(--accent);
}
.prose details > summary:hover { color: var(--accent); }
.prose details > :not(summary) { animation: details-in 0.16s ease; }
.prose details > :last-child { margin-bottom: 0.4rem; }
@keyframes details-in { from { opacity: 0; transform: translateY(-2px); } }

.doc-list dt { margin-top: 1.15rem; font-weight: 600; }
.doc-list dd { margin: 0.15rem 0 0; color: var(--muted); max-width: 44rem; }

ul.plain { padding-left: 1.15rem; }
ul.plain li { margin: 0.3rem 0; }

/* --- Pager --- */

.pager {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 3.5rem 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--line);
}
.pager a {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	font-weight: 600;
	padding: 0.65rem 0.95rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	max-width: 48%;
	background: var(--bg-raised);
	transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease, padding 0.12s ease;
}
/* Arrows slide in from the outer edge on hover, pointing the way the pager
   moves. */
.pager a.prev::before, .pager a.next::after {
	content: "\2190";
	position: absolute;
	top: 50%;
	font-weight: 700;
	color: var(--accent);
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.pager a.prev::before { left: 0.35rem; transform: translate(-0.3rem, -50%); }
.pager a.next::after { content: "\2192"; right: 0.35rem; transform: translate(0.3rem, -50%); }
.pager a:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.pager a.prev:hover::before, .pager a.next:hover::after { opacity: 1; transform: translate(0, -50%); }
.pager a.prev:hover { padding-left: 1.55rem; }
.pager a.next:hover { padding-right: 1.55rem; }
.pager a span {
	font-size: 0.74rem;
	font-weight: 500;
	color: var(--muted-2);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.pager .next { margin-left: auto; text-align: right; }

/* --- Home --- */

.hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 3.5rem;
	align-items: center;
	padding: 3rem 0 3.5rem;
	border-bottom: 1px solid var(--line);
	margin-bottom: 2.5rem;
}
.hero::before {
	content: "";
	position: absolute;
	inset: -4rem -8rem auto;
	height: 24rem;
	background:
		radial-gradient(45% 55% at 30% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
		radial-gradient(40% 50% at 75% 30%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%);
	pointer-events: none;
	filter: blur(6px);
}
/* A faint blueprint grid behind the hero, fading out downward. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px);
	background-size: 2.5rem 2.5rem;
	mask-image: radial-gradient(70% 90% at 50% 0%, black, transparent 82%);
	-webkit-mask-image: radial-gradient(70% 90% at 50% 0%, black, transparent 82%);
	pointer-events: none;
}
.hero-copy, .hero-window { position: relative; z-index: 1; }
@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; gap: 2.2rem; }
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--display);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--muted);
	background: var(--bg-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 0.3rem 0.8rem;
	margin: 0 0 1.1rem;
}
.eyebrow::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--success);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}

.hero h1 {
	font-size: clamp(2.7rem, 7vw, 4.2rem);
	margin: 0 0 0.7rem;
	letter-spacing: -0.04em;
	line-height: 1.02;
	background: linear-gradient(120deg, var(--fg-strong) 20%, var(--accent) 60%, var(--accent-2));
	background-size: 220% auto;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: hero-shimmer 9s ease-in-out infinite;
}
@keyframes hero-shimmer {
	0%, 100% { background-position: 0% center; }
	50% { background-position: 100% center; }
}
.tagline { font-size: 1.22rem; color: var(--muted); max-width: 38rem; margin-top: 0; }
.install {
	background:
		linear-gradient(var(--code-bg), var(--code-bg)) padding-box,
		linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--accent-2) 60%, transparent)) border-box;
	border: 1px solid transparent;
	border-radius: var(--radius);
	padding: 0.85rem 1rem;
	overflow-x: auto;
	max-width: 38rem;
	box-shadow: var(--shadow);
}
.install code { background: none; border: 0; padding: 0; }
.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 1.4rem 0 0;
}
.badges li {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--muted);
	background: var(--bg-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 0.28rem 0.75rem;
}

/* The hero's live "tree is the site" window, with a gradient frame. The
   frame's middle is a faint accent, not a neutral line, so it stays visible
   on both themes. */
.hero-window {
	border: 1px solid transparent;
	border-radius: var(--radius);
	background:
		linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
		linear-gradient(140deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent-2) 20%, transparent) 45%, color-mix(in srgb, var(--accent-2) 50%, transparent)) border-box;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}
.hero-window-bar {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 0.9rem;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, var(--bg-subtle), color-mix(in srgb, var(--bg-subtle) 80%, var(--bg)));
}
.hero-window-bar .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.hero-window-bar .dot-r { background: #ff5f57; }
.hero-window-bar .dot-y { background: #febc2e; }
.hero-window-bar .dot-g { background: #28c840; }
.hero-window-title {
	margin-left: 0.5rem;
	font-family: var(--display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--muted);
}
.hero-window-body { padding: 1.1rem 1.2rem 1.15rem; }
.chips { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.chips button {
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.32rem 0.85rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--bg-subtle);
	color: var(--fg);
	cursor: pointer;
	transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
.chips button:hover { border-color: var(--accent); color: var(--accent); }
.chips button.on {
	border-color: var(--success);
	color: var(--success);
	background: color-mix(in srgb, var(--success) 12%, var(--bg-subtle));
}
.hero-window .tree-output { margin: 0; }
.hero-window-note {
	margin: 0.9rem 0 0;
	font-size: 0.82rem;
	color: var(--muted);
}
.hero-window-note code { font-size: 0.9em; }
.cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.7rem; }
.button {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--grad);
	color: var(--accent-contrast);
	padding: 0.62rem 1.2rem;
	border-radius: var(--radius);
	text-decoration: none;
	font-weight: 600;
	border: 1px solid transparent;
	transition: filter 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
	box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* A shine sweeps across the primary button on hover. */
.button::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -45%;
	width: 35%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-18deg);
	transition: left 0.5s ease;
	pointer-events: none;
}
.button:hover::after { left: 120%; }
.button.ghost {
	background: var(--bg-raised);
	color: var(--accent);
	border: 1px solid var(--accent);
	box-shadow: none;
}
.button.ghost:hover {
	border-color: var(--accent-2);
	color: var(--accent-2);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 18%, transparent);
}
.button:hover { filter: brightness(1.1); transform: translateY(-2px); }

.law h2 { margin-top: 0; }
.law blockquote {
	font-family: var(--display);
	font-size: 1.15rem;
	border-left: 3px solid var(--accent);
	padding: 1rem 1.2rem;
	margin: 0;
	background: var(--bg-subtle);
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-top: 1.2rem;
}
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.15rem 1.15rem 1.35rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	background: var(--bg-raised);
	overflow: hidden;
	transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
/* A gradient bar slides across the top on hover, and an arrow slides in at
   the corner — the card announces itself as a link. */
.card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--grad);
	opacity: 0;
	transition: opacity 0.14s ease;
}
.card::after {
	content: "\2192";
	position: absolute;
	right: 0.9rem;
	bottom: 0.65rem;
	color: var(--accent);
	font-weight: 700;
	opacity: 0;
	transform: translate(-0.25rem, 0.25rem);
	transition: opacity 0.14s ease, transform 0.14s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); transform: translateY(-3px); }
.card:hover::before { opacity: 1; }
.card:hover::after { opacity: 1; transform: translate(0, 0); }
.card h3 { margin: 0; font-size: 1.02rem; color: var(--fg-strong); font-family: var(--display); }
.card h3 code {
	color: var(--accent);
	font-size: 0.72em;
	background: var(--accent-soft);
	border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
	border-radius: var(--radius-pill);
	padding: 0.14em 0.55em;
}
.card p { margin: 0; color: var(--muted); font-size: 0.93rem; max-width: none; }

/* --- Callouts --- */

.callout {
	margin: 1.4rem 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--bg-subtle);
	font-size: 0.95rem;
}
.callout .callout-title {
	font-family: var(--display);
	display: block;
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.3rem;
}
.callout.note { border-left-color: var(--accent); }
.callout.note .callout-title { color: var(--accent); }
.callout.tip { border-left-color: var(--success); }
.callout.tip .callout-title { color: var(--success); }
.callout.warning { border-left-color: var(--warning); }
.callout.warning .callout-title { color: var(--warning); }

/* --- Demos --- */

.demo {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.25rem;
	margin: 1.3rem 0;
	background: var(--code-bg);
	box-shadow: var(--shadow);
}
.demo::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent-2) 70%, transparent));
	opacity: 0.35;
	pointer-events: none;
}
.demo button {
	font: inherit;
	font-size: 0.95rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--line-strong);
	background: var(--bg-raised);
	color: var(--fg);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color 0.1s ease, color 0.1s ease, transform 0.1s ease;
}
.demo button:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.demo input {
	font: inherit;
	font-size: 0.95rem;
	padding: 0.42rem 0.65rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--bg);
	color: var(--fg);
}
.demo input:focus { border-color: var(--accent); outline: none; }
.demo output {
	display: inline-block;
	min-width: 3ch;
	text-align: center;
	font-family: var(--mono);
	font-size: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.demo-note { color: var(--muted); font-size: 0.88rem; margin: 0.7rem 0 0; }
.demo form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.demo canvas { width: 100%; height: 200px; display: block; border-radius: var(--radius-sm); background: var(--bg); }
.demo label { display: inline-flex; align-items: center; gap: 0.45rem; }
.demo p { margin: 0.6rem 0; }

.counter-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* The tree step's live output — the build tree, rendered by an x effect. */
.tree-output {
	margin: 0.7rem 0 0;
	padding: 0.7rem 0.9rem;
	background: var(--bg);
	border: 1px solid var(--code-line);
	border-radius: var(--radius-sm);
	font-family: var(--mono);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--muted);
	white-space: pre;
	overflow-x: auto;
}

/* A demo button that carries state — the tree and locale toggles — shows it
   as a pressed (success) style. */
.demo button.on {
	border-color: var(--success);
	color: var(--success);
	background: color-mix(in srgb, var(--success) 12%, var(--bg-raised));
}

/* The step 8 counter's value — the same treatment as the examples' output. */
.counter-value {
	display: inline-block;
	min-width: 3ch;
	text-align: center;
	font-family: var(--mono);
	font-size: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.todo-form { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.todo-form input { flex: 1; }

.demo .on {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--success) 18%, transparent);
	color: var(--success);
	font-weight: 650;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.todo-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.todo-list li { display: flex; gap: 0.5rem; margin-bottom: 0.45rem; }
.todo-list input { flex: 1; }

.warn {
	border-left: 3px solid var(--warning);
	padding: 0.5rem 0 0.5rem 1rem;
	color: var(--muted);
}

/* The tutorial's step checkpoints: a file list in a bordered box. */
.checkpoint {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.85rem 1.1rem;
	margin: 1.6rem 0;
	background: var(--bg-raised);
}
.checkpoint p { margin: 0 0 0.3rem; }
.checkpoint ul { margin: 0.35rem 0 0; padding-left: 1.3rem; }

/* The tutorial's "try it" experiments: a prompt with the expected outcome
   behind a reveal, so the reader checks their own result first. */
.tryit {
	margin: 1.6rem 0;
	padding: 1rem 1.15rem;
	border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line-strong));
	border-radius: var(--radius);
	background: var(--bg-raised);
}
.tryit > p { margin: 0 0 0.4rem; }
.tryit > p strong { color: var(--accent); }
.tryit details { margin-top: 0.3rem; }

/* --- Accent presets (switched by the home page's x.Document widget) --- */

[data-accent="emerald"] {
	--accent: #2fd08f;
	--accent-2: #1fb6a3;
	--accent-soft: #123028;
}
[data-accent="orange"] {
	--accent: #f0924a;
	--accent-2: #e56a3b;
	--accent-soft: #322210;
}

[data-theme="light"][data-accent="emerald"] {
	--accent: #12915f;
	--accent-2: #0d8c7f;
	--accent-soft: #e4f6ef;
}
[data-theme="light"][data-accent="orange"] {
	--accent: #c05a14;
	--accent-2: #b84820;
	--accent-soft: #fdeee2;
}

.accent-picker {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 1.1rem;
}
.accent-picker .accent-label {
	font-size: 0.85rem;
	font-weight: 650;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.accent-picker button {
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.42rem 0.9rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--bg-raised);
	color: var(--fg);
	cursor: pointer;
	transition: border-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.accent-picker button:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* --- Back to top --- */

.back-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--bg-raised);
	color: var(--fg);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.12s ease;
	box-shadow: var(--shadow);
	z-index: 9;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--grad); border-color: transparent; color: var(--accent-contrast); }

/* --- Footer --- */

.footer {
	position: relative;
	padding: 2rem 1.6rem;
	text-align: center;
	color: var(--muted);
	font-size: 0.9rem;
}
/* A short gradient hairline, fading out at both ends, instead of a full-width
   rule. */
.footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 20%;
	right: 20%;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
}
.footer p { margin: 0; }

/* --- Tutorial progress --- */

.step-list { list-style: none; padding: 0; margin: 1.4rem 0; }
.step-list li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	margin-bottom: 0.5rem;
	background: var(--bg-raised);
	transition: border-color 0.12s ease, background-color 0.12s ease;
}
.step-list li.done { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); background: var(--bg-subtle); }
.step-list li:hover { border-color: var(--line-strong); }
.step-list li.done:hover { border-color: color-mix(in srgb, var(--success) 60%, var(--line)); }
.step-list input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--accent);
	cursor: pointer;
	flex: none;
}
.step-list a { color: var(--fg); text-decoration: none; font-weight: 550; }
.step-list li.done a { color: var(--muted); text-decoration: line-through; }
.step-list a:hover { color: var(--accent); }

.progress {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.2rem 0;
}
.progress-bar {
	flex: 1;
	height: 0.5rem;
	border-radius: var(--radius-pill);
	background: var(--line);
	overflow: hidden;
}
.progress-bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--grad);
	transition: width 0.25s ease;
}
.progress-note { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

.step-progress {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
	margin: 0 0 1.6rem;
	padding: 0.75rem 0.95rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-raised);
}
.step-progress .progress-bar { flex: 1; min-width: 6rem; }
.step-done {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--fg);
	cursor: pointer;
	white-space: nowrap;
}
.step-done input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--accent);
	cursor: pointer;
}
.step-done:hover { color: var(--accent); }

.sidebar-group a.done::after {
	content: " ✓";
	color: var(--success);
	font-weight: 700;
}

/* --- Tutorial quizzes --- */

.quiz {
	margin: 1.6rem 0;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent-2);
	border-radius: var(--radius);
	background: var(--bg-subtle);
	box-shadow: var(--shadow);
}
.quiz-question { margin: 0 0 0.75rem; font-family: var(--display); font-weight: 650; }
.quiz-options {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	counter-reset: opt;
}
.quiz-option {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font: inherit;
	text-align: left;
	padding: 0.55rem 0.85rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--bg-raised);
	color: var(--fg);
	cursor: pointer;
	counter-increment: opt;
	transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}
.quiz-option::before {
	content: counter(opt, upper-alpha);
	flex: none;
	width: 1.3rem;
	margin-top: 0.08rem;
	text-align: right;
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--muted-2);
}
.quiz-option:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.quiz-option:hover:not(:disabled)::before { color: var(--accent); }
.quiz-option:active:not(:disabled) { transform: translateY(1px); }
.quiz-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz-option:disabled { cursor: default; }
.quiz-option.right {
	border-color: var(--success);
	color: var(--success);
	background: color-mix(in srgb, var(--success) 12%, var(--bg-raised));
}
.quiz-option.right::before { color: var(--success); }
.quiz-option.wrong {
	border-color: var(--danger);
	color: var(--danger);
	background: color-mix(in srgb, var(--danger) 12%, var(--bg-raised));
}
.quiz-option.wrong::before { color: var(--danger); }
.quiz-feedback { margin: 0.75rem 0 0; font-weight: 650; }
.quiz-feedback.right::before { content: "✓ "; }
.quiz-feedback.wrong::before { content: "✗ "; }
.quiz-feedback.right { color: var(--success); animation: quiz-pop 0.16s ease; }
.quiz-feedback.wrong { color: var(--danger); animation: quiz-pop 0.16s ease; }
.quiz-why {
	margin: 0.45rem 0 0;
	padding: 0.5rem 0.7rem;
	border-left: 2px solid var(--line-strong);
	font-size: 0.92rem;
	color: var(--muted);
	max-width: 44rem;
}
@keyframes quiz-pop { from { opacity: 0; transform: translateY(2px); } }
.quiz-reset {
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	margin-top: 0.75rem;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: var(--bg-raised);
	color: var(--muted);
	cursor: pointer;
	transition: color 0.12s ease, border-color 0.12s ease;
}
.quiz-reset:hover { color: var(--accent); border-color: var(--accent); }

/* Respect users who ask for less motion: the whole site's transitions and
   animations collapse to instant. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}