:root {
	color-scheme: light;
	--header-height: 4.5rem;
	--ink: #17191c;
	--muted: #626a70;
	--paper: #f3f2ee;
	--paper-rgb: 243, 242, 238;
	--surface: #f6f2e9;
	--surface-soft: #e8e7e1;
	--accent: #cf7540;
	--accent-strong: #93451f;
	--accent-soft: #f1c5a7;
	--warm: #8b989f;

	--line: rgba(23, 25, 28, .15);
	--line-strong: rgba(23, 25, 28, .28);

	--shadow: 0 1.5rem 5rem rgba(23, 25, 28, .12);
	--radius: 1.375rem; --radius-pill: 100rem; --transparent: transparent;

	--code: #181b1f;
	--code-top: #22262b;
	--code-text: #d9dde0;
	--code-muted: #aeb5ba;
	--code-muted-strong: #9fa7ac;
	--code-muted-soft: #b8c0c5;
	--code-panel: #1b1f22;
	--code-panel-deep: #161a1d;
	--code-surface: #111416;
	--code-accent: #c8d3d8;
	--code-heading: #e4e8ea;
	--code-dot: #667077;
	--code-dot-mid: #8b989f;
	--code-dot-light: #9aa4aa;

	--warning: #b27555;
	--light-ink: #17191c;
	--light-paper: #f3f2ee;
	--white-rgb: 255, 255, 255;
	--black-rgb: 0, 0, 0;
	--code-accent-rgb: 200, 211, 216;

	--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	&[data-theme="dark"] { color-scheme: dark;
		--ink: #f6f2e9;
		--muted: #a9b0b5;
		--paper: #111416;
		--paper-rgb: 17, 20, 22;
		--surface: #191d20;
		--surface-soft: #22272b;
		--accent: #e69a68;
		--accent-strong: #ffc39b;
		--accent-soft: #68422f;
		--warm: #95a2a9;
		--line: rgba(236, 237, 239, .14);
		--line-strong: rgba(236, 237, 239, .28);
		--code: #090b0c;
		--code-top: #141719;
		--code-text: #e2e5e7;
		--shadow: 0 1.5rem 5rem rgba(0, 0, 0, .32);
	}
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1.375rem); }
body { margin: 0; color: var(--ink);
	background: radial-gradient(circle at 8% 3%, color-mix(in srgb, var(--accent) 13%, var(--transparent)), var(--transparent) 28rem), var(--paper); font-family: var(--sans); line-height: 1.6; transition: color 180ms ease, background-color 180ms ease; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: var(--transparent); }
button { color: inherit; font: inherit; -webkit-tap-highlight-color: var(--transparent); }
img { max-width: 100%; }
::selection { color: var(--ink); background: var(--accent-soft); }
:focus-visible { outline: 0.1875rem solid var(--accent); outline-offset: 0.1875rem; }
h1 { max-width: 43.75rem; margin: 0; font-size: clamp(3.1rem, 5.8vw, 6rem); font-weight: 900; letter-spacing: -.072em; line-height: .92; }
h2 { margin: 0; font-size: clamp(2.45rem, 4.6vw, 4.8rem); font-weight: 870; letter-spacing: -.06em; line-height: .98; }

.wrap { width: min(77.5rem, calc(100% - 3rem)); margin-inline: auto; }
.sr-only { position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 0.625rem; left: 0.625rem; z-index: 100; padding: 0.625rem 0.875rem; color: var(--paper); background: var(--ink); border-radius: 0.5rem; transform: translateY(-150%);
	&:focus { transform: none; }
}

.site-header { position: sticky; top: 0; z-index: 30; background: rgba(var(--paper-rgb), .86); border-bottom: 0.0625rem solid var(--transparent); backdrop-filter: blur(1.125rem); transition: border-color 180ms ease, background 180ms ease;
	&.is-scrolled { border-color: var(--line); }
	.nav { display: flex; height: var(--header-height); align-items: center; justify-content: space-between; }
	.brand { display: inline-flex; align-items: center; gap: 0.6875rem; font-weight: 850; letter-spacing: -.035em; }
	.logo { display: grid; width: 2.1875rem; height: 2.1875rem; place-items: center; color: var(--paper); background: var(--ink); border-radius: 0.625rem; transform: rotate(-4deg); }
	.nav-links { display: flex; align-items: center; gap: 1.625rem; font-size: 90%; font-weight: 700;
		& > a:not(.button):hover { color: var(--accent-strong); }
	}
	.menu-button { display: none; width: 2.625rem; height: 2.625rem; padding: 0; background: var(--surface); border: 0.0625rem solid var(--line); border-radius: 50%;
		span[aria-hidden] { position: relative; display: block; width: 1.0625rem; height: 0.125rem; margin: auto; background: var(--ink);
			&::before,
			&::after { position: absolute; left: 0; width: 1.0625rem; height: 0.125rem; background: var(--ink); content: ""; }
			&::before { top: -0.375rem; }
			&::after { top: 0.375rem; }
		}
	}
	.theme-toggle { position: relative; display: grid; width: 2.5rem; height: 2.5rem; padding: 0; place-items: center; overflow: hidden; background: var(--surface); border: 0.0625rem solid var(--line); border-radius: 50%; cursor: pointer;
		.theme-icon { position: absolute; line-height: 1; transition: transform 180ms ease, opacity 180ms ease; }
		.theme-icon-sun { opacity: 1; transform: translateY(0); }
		.theme-icon-moon { opacity: 0; transform: translateY(1.375rem); }
	}
}

[data-theme="dark"] .theme-toggle {
	.theme-icon-sun { opacity: 0; transform: translateY(-1.375rem); }
	.theme-icon-moon { opacity: 1; transform: translateY(0); }
}

.button { display: inline-flex; min-height: 2.9375rem; padding: 0 1.25rem; align-items: center; justify-content: center; gap: 0.5625rem; color: var(--paper); background: var(--ink); border: 0.0625rem solid var(--ink); border-radius: var(--radius-pill); font-weight: 780; box-shadow: 0 0.375rem 0 color-mix(in srgb, var(--ink) 16%, var(--transparent)); transition: transform 150ms ease, box-shadow 150ms ease;
	&:hover { box-shadow: 0 0.1875rem 0 color-mix(in srgb, var(--ink) 14%, var(--transparent)); transform: translateY(0.1875rem); }
	&.button-small { min-height: 2.4375rem; padding-inline: 1rem; box-shadow: none; }
	&.button-ghost { color: var(--ink); background: var(--transparent); border-color: var(--line-strong); box-shadow: none;
		&:hover { background: var(--surface); box-shadow: none; transform: none; }
	}
	&.button-light { flex: 0 0 auto; color: var(--light-ink); background: var(--light-paper); border-color: var(--light-paper); box-shadow: 0 0.375rem 0 rgba(var(--white-rgb), .16); }
}

.section-label { margin: 0 0 0.75rem; color: var(--accent-strong); font: 700 73%/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

.hero { display: flex; min-height: calc(100svh - var(--header-height)); overflow: hidden;
	.hero-inner { display: grid; padding-block: clamp(2.125rem, 6vh, 4.375rem) clamp(1.375rem, 4vh, 2.625rem); align-content: space-between; gap: clamp(1.75rem, 5vh, 3.375rem); }
	.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(25.625rem, .98fr); align-items: center; gap: clamp(2.5rem, 6vw, 4.75rem); }
	.hero-label { display: inline-flex; margin: 0 0 1.125rem; padding: 0.4375rem 0.75rem; align-items: center; gap: 0.5rem; color: var(--muted); background: color-mix(in srgb, var(--surface) 62%, var(--transparent)); border: 0.0625rem solid var(--line); border-radius: var(--radius-pill); font-size: 72%; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
		&::before { width: 0.4375rem; height: 0.4375rem; background: var(--warm); border-radius: 50%; box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--warm) 17%, var(--transparent)); content: ""; }
	}
	.h1-accent { position: relative; display: inline-block; color: var(--accent-strong);
		&::after { position: absolute; right: 0; bottom: -.06em; left: .03em; height: .1em; background: var(--accent-soft); border-radius: 0.625rem; content: ""; transform: rotate(-1.5deg); z-index: -1; }
	}
	.hero-copy { max-width: 37.5rem; margin: 1.5rem 0 0; color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.16rem); }
	.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6875rem; }
	.quick-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.125rem; margin: 1.5625rem 0 0; padding: 0; color: var(--muted); font: 76%/1.4 var(--mono); list-style: none;
		li::before { margin-right: 0.375rem; color: var(--accent-strong); content: "+"; }
	}
	.code-stage { position: relative; isolation: isolate;
		&::before { position: absolute; right: -2.1875rem; bottom: -2.1875rem; width: 8.125rem; height: 8.125rem; background: var(--accent-soft); border-radius: 50%; content: ""; z-index: -1; }
		&::after { position: absolute; top: -1.625rem; left: -1.6875rem; width: 4.5rem; height: 4.5rem; background: var(--warm); border-radius: 1.375rem; content: ""; transform: rotate(16deg); z-index: -1; }
	}
	.code-window { overflow: hidden; background: var(--code); border: 0.0625rem solid rgba(var(--white-rgb), .11); border-radius: var(--radius); box-shadow: var(--shadow);
		.code-bar { display: flex; padding: 0.75rem 0.9375rem; align-items: center; justify-content: space-between; color: var(--code-muted); background: var(--code-top); border-bottom: 0.0625rem solid rgba(var(--white-rgb), .08); font: 70%/1 var(--mono); }
		pre { min-height: 20.375rem; margin: 0; padding: 1.4375rem; overflow-x: auto; color: var(--code-text); font: 78%/1.63 var(--mono); white-space: pre; }
		code { color: inherit; font: inherit; text-shadow: none; }
	}
	.dots { display: flex; gap: 0.375rem;
		i { width: 0.5rem; height: 0.5rem; background: var(--code-dot); border-radius: 50%; }
		i:first-child { background: var(--code-dot-mid); }
		i:nth-child(2) { background: var(--code-dot-light); }
		i:last-child { background: var(--code-accent); }
	}
	.hero-benefits { display: grid; grid-template-columns: repeat(4, 1fr); background: color-mix(in srgb, var(--surface) 66%, var(--transparent)); border: 0.0625rem solid var(--line); border-radius: 1.125rem; backdrop-filter: blur(0.625rem);
		div { display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 0.5em; min-width: 0; padding: 1em 0.875em; text-align: center; border-right: 0.0625rem solid var(--line);
			&:last-child { border: 0; }
		}
		strong { color: var(--accent-strong); font-size: 100%; letter-spacing: -.045em; line-height: 1.1; }
		span { color: var(--muted); }
	}
}

.api-section { padding: clamp(4.75rem, 9vw, 7.375rem) 0; color: var(--light-paper); background: var(--light-ink);
	.api-grid { display: grid; grid-template-columns: .72fr 1.28fr; align-items: start; gap: clamp(2.625rem, 7vw, 5.625rem); }
	.api-copy { position: sticky; top: calc(var(--header-height) + 2.375rem);
		.section-label { color: var(--code-accent); }
		& > p:not(.section-label) { max-width: 26.875rem; margin: 1.375rem 0 0; color: color-mix(in srgb, var(--light-paper) 70%, var(--transparent)); }
	}
	.api-callout { display: flex; max-width: 26.875rem; margin-top: 1.75rem; padding: 1.0625rem 1.125rem; flex-direction: column; gap: 0.3125rem; color: var(--code-text); background: var(--code-panel); border: 0.0625rem solid rgba(var(--code-accent-rgb), .28); border-left: 0.25rem solid var(--code-accent); border-radius: 0.625rem;
		strong { color: var(--light-paper); font: 750 75%/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
		span { color: var(--code-muted-soft); font-size: 86%; }
		code { color: var(--code-heading); }
	}
	.api-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; }
	.api-tab { padding: 0.6875rem 0.5rem; color: color-mix(in srgb, var(--light-paper) 62%, var(--transparent)); background: var(--transparent); border: 0.0625rem solid color-mix(in srgb, var(--light-paper) 18%, var(--transparent)); border-radius: var(--radius-pill); cursor: pointer; font: 750 80%/1 var(--mono);
		&[aria-selected="true"] { color: var(--light-ink); background: var(--code-accent); border-color: var(--code-accent); }
	}
	.example-code { overflow: hidden; background: var(--code-surface); border: 0.0625rem solid rgba(var(--white-rgb), .13); border-radius: var(--radius); box-shadow: 0 1.625rem 4.375rem rgba(var(--black-rgb), .24);
		.example-code-header { display: flex; min-height: 3rem; padding: 0 1.0625rem; align-items: center; justify-content: space-between; color: var(--code-muted); background: var(--code-panel); border-bottom: 0.0625rem solid rgba(var(--white-rgb), .09); font: 73%/1 var(--mono); }
		pre { min-height: 11.25rem; margin: 0; padding: 1.3125rem 1.5rem; overflow-x: auto; color: var(--code-text); font: 77%/1.58 var(--mono); white-space: pre; }
		code { color: inherit; font: inherit; text-shadow: none; }
		.example-footer { display: flex; padding: 0.875rem 1.0625rem; align-items: center; justify-content: space-between; gap: 1.25rem; color: var(--code-muted-strong); background: var(--code-panel-deep); border-top: 0.0625rem solid rgba(var(--white-rgb), .08); font-size: 81%;
			a { color: var(--code-accent); font-weight: 750; white-space: nowrap; }
		}
	}
	.api-fallback { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem;
		a { display: flex; padding: 1rem; flex-direction: column; gap: 0.3125rem; color: var(--code-text); background: var(--code-surface); border: 0.0625rem solid rgba(var(--white-rgb), .13); border-radius: 0.75rem; }
		code { color: var(--code-accent); font: 750 85%/1.3 var(--mono); }
		span { color: var(--code-muted-strong); font-size: 80%; }
	}
}

.copy-button,
.copy-code { padding: 0.375rem 0.625rem; color: inherit; background: var(--transparent); border: 0.0625rem solid rgba(var(--white-rgb), .16); border-radius: var(--radius-pill); cursor: pointer; font: inherit; }

.documentation { padding: clamp(5.25rem, 10vw, 8.4375rem) 0; background: var(--paper);
	.docs-heading { margin-bottom: 2.875rem;
		h2 { max-width: 48.75rem; }
		p { max-width: 40.625rem; margin: 1.375rem 0 0; color: var(--muted); font-size: 106%; }
	}
	.document-tabs { display: flex; margin-bottom: 1.75rem; flex-direction: column;
		a { display: flex; align-items: center; gap: 0.7em;
			padding: 0.6em 0.75em;
			color: var(--muted); background: var(--surface);
			border: 0.0625em solid var(--line); border-bottom: 0;
			font-weight: 730; line-height: 1.25;

			&:first-child { border-radius: 0.75em 0.75em 0 0; }
			&:last-child { border-bottom: 0.0625em solid var(--line); border-radius: 0 0 0.75em 0.75em; }
			&.is-active { color: var(--ink); background: var(--accent-soft); }
			span { color: var(--accent-strong); font: 70%/1 var(--mono); }
		}
	}
	.docs-layout { display: grid; grid-template-columns: minmax(0, 48.75rem) 13.125rem; justify-content: center; align-items: start; gap: clamp(3.4375rem, 8vw, 6.5625rem); }
	.page-toc { position: sticky; top: calc(var(--header-height) + 1.5rem); max-height: calc(100vh - var(--header-height) - 3rem); overflow-y: auto;
		p { margin: 0 0 0.5625rem; color: var(--muted); font: 700 70%/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
		.page-toc-sections nav { display: flex; flex-direction: column; gap: 0.1875rem; }
		.page-toc-sections a { padding: 0.3125rem 0.5625rem; color: var(--muted); border-left: 0.125rem solid var(--transparent); font-size: 78%; line-height: 1.35;
			&:hover,
			&.is-active { color: var(--ink); border-color: var(--accent); }
			&[data-level="h3"] { padding-left: 1.0625rem; }
		}
		.sidebar-close { display: none; }
	}
	.sidebar-toggle { display: none; }
}

.docs-article { min-width: 0; font-size: 100%;
	[id] { scroll-margin-top: calc(var(--header-height) + 6.5625rem); }
	.doc-source + .doc-source { margin-top: 7.1875rem; padding-top: 6.5625rem; border-top: 0.0625rem solid var(--line); }
	h2,
	h3,
	h4,
	h5 { position: relative; color: var(--ink); }
	h2 { margin: 5.3125rem 0 1.375rem; font-size: clamp(2rem, 3.7vw, 3.35rem); letter-spacing: -.05em; line-height: 1.04; }
	h3 { margin: 3.4375rem 0 1.0625rem; font-size: 165%; letter-spacing: -.035em; line-height: 1.15; }
	h4 { margin: 2.375rem 0 0.8125rem; font-size: 118%; }
	.doc-source > :first-child,
	.guide-header h2 { margin-top: 0; }
	.heading-anchor { position: absolute; margin-left: 0.5625rem; color: var(--accent); font: 600 65%/1 var(--mono); opacity: 0; transition: opacity 150ms ease; }
	:is(h2, h3, h4):hover .heading-anchor,
	.heading-anchor:focus { opacity: 1; }
	p { margin: 0 0 1.25rem; color: var(--muted); }
	strong { color: var(--ink); }
	a:not(.heading-anchor):not(.source-link) { color: var(--accent-strong); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 42%, var(--transparent)); text-underline-offset: 0.1875rem; }
	:not(pre) > code { padding: .12em .36em; color: var(--ink); background: var(--surface-soft); border: 0.0625rem solid var(--line); border-radius: 0.3125rem; font: 86%/1.4 var(--mono); }
	ul,
	ol { margin: 0 0 1.5rem; padding-left: 1.5625rem; color: var(--muted); }
	li { margin: 0.4375rem 0; padding-left: 0.25rem;
		&::marker { color: var(--accent); }
	}
	blockquote { margin: 1.625rem 0; padding: 0.1875rem 0 0.1875rem 1.375rem; border-left: 0.1875rem solid var(--accent);
		p { margin: 0; }
	}
	.guide-header { position: relative; margin-bottom: 3.4375rem;
		.section-label { margin-bottom: 0.875rem; }
	}
	.source-link { display: inline-flex; margin-top: 1.1875rem; color: var(--accent-strong); font-size: 80%; font-weight: 750; }
	.code-block { margin: 1.625rem 0 2rem; overflow: hidden; background: var(--code); border: 0.0625rem solid color-mix(in srgb, var(--code-text) 13%, var(--transparent)); border-radius: 0.875rem; box-shadow: 0 0.9375rem 2.375rem rgba(var(--black-rgb), .1);
		.code-label { display: flex; min-height: 2.6875rem; padding: 0 0.875rem; align-items: center; justify-content: space-between; color: var(--code-muted); background: var(--code-panel); border-bottom: 0.0625rem solid rgba(var(--white-rgb), .09); font: 73%/1 var(--mono); }
		pre { margin: 0; padding: 1.25rem; overflow-x: auto; color: var(--code-text); font: 78%/1.65 var(--mono); tab-size: 4; }
		code { color: inherit; font: inherit; text-shadow: none; }
	}
	.callout { margin: 1.625rem 0; padding: 1.1875rem 1.3125rem; background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface)); border: 0.0625rem solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-left: 0.25rem solid var(--accent); border-radius: 0.5625rem;
		& > strong { display: block; margin-bottom: 0.3125rem; font: 800 70%/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
		p { margin: 0; color: var(--muted); }
		&.warning,
		&.important { border-left-color: var(--warning); }
	}
	.table-wrap { max-width: 100%; margin: 1.75rem 0 2.25rem; overflow-x: auto; border: 0.0625rem solid var(--line); border-radius: 0.625rem; }
	table { width: 100%; border-collapse: collapse; font-size: 78%; white-space: nowrap;
		th,
		td { padding: 0.6875rem 0.8125rem; text-align: left; border-bottom: 0.0625rem solid var(--line); }
		th { color: var(--ink); background: var(--surface-soft); }
		td { color: var(--muted); }
		tr:last-child td { border-bottom: 0; }
	}
}

.cta { padding: 0 0 5rem; background: var(--paper);
	.cta-box { display: flex; padding: clamp(2.375rem, 6vw, 4.375rem); align-items: center; justify-content: space-between; gap: 2.1875rem; color: var(--light-paper); background: var(--light-ink); border-radius: 1.625rem;
		.section-label { color: var(--code-accent); }
		h2 { max-width: 42.5rem; font-size: clamp(2.1rem, 4vw, 4rem); }
	}
}

.footer { color: var(--muted); background: var(--paper); border-top: 0.0625rem solid var(--line);
	.footer-row { display: flex; min-height: 6.25rem; align-items: center; justify-content: space-between; gap: 1.5rem; font-size: 80%; }
	.footer-links { display: flex; gap: 1.5rem; }
	a:hover { color: var(--ink); }
}

.reveal { opacity: 1; transform: none; }

@media (max-width: 67.5rem) {
	.hero {
		.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(23.125rem, .85fr); gap: 2.375rem; }
		.code-window pre { font-size: 70%; }
	}
	.documentation {
		.docs-layout { grid-template-columns: minmax(0, 47.5rem) 11.875rem; gap: 2.8125rem; }
	}
}

@media (max-width: 51.25rem) {
	:root { --header-height: 4.125rem; }
	.wrap { width: min(calc(100% - 2rem), 45rem); }
	.site-header {
		.menu-button { display: block; }
		.nav-links { position: absolute; top: calc(100% + 0.0625rem); right: 1rem; left: 1rem; display: none; padding: 1.125rem; flex-wrap: wrap; justify-content: center; background: var(--surface); border: 0.0625rem solid var(--line); border-radius: 0.875rem; box-shadow: var(--shadow);
			&.is-open { display: flex; }
		}
	}
	.hero { min-height: auto;
		.hero-inner { padding-block: 3.4375rem 1.875rem; }
		.hero-grid { grid-template-columns: 1fr; }
		.hero-copy-block { max-width: 40.625rem; }
		.code-stage { max-width: 40rem; }
		.code-window pre { min-height: auto; font-size: 76%; }
		.hero-benefits { margin-top: 0.625rem; }
	}
	.api-section {
		.api-grid { grid-template-columns: 1fr; }
		.api-copy { position: static; }
		.api-copy h2 br { display: none; }
	}
	.documentation {
		.docs-layout { display: block; }
		.page-toc { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(21rem, calc(100% - 2rem)); max-height: none; padding: 4.5rem 1.25rem 2rem; overflow-y: auto; background: var(--paper); border-left: 0.0625rem solid var(--line); box-shadow: var(--shadow); transform: translateX(105%); visibility: hidden; transition: transform 180ms ease, visibility 180ms;
			&.is-open { transform: none; visibility: visible; }
			.sidebar-close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 2.5rem; height: 2.5rem; padding: 0; place-items: center; background: var(--surface); border: 0.0625rem solid var(--line); border-radius: 50%; cursor: pointer; font-size: 150%; line-height: 1; }
		}
		.sidebar-toggle { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; display: flex; min-height: 3.25rem; padding: 0 1.125rem; align-items: center; gap: 0.5rem; color: var(--light-paper); background: var(--light-ink); border: 0.0625rem solid var(--line-strong); border-radius: var(--radius-pill); box-shadow: var(--shadow); cursor: pointer; font-weight: 750; }
	}
	.docs-article .doc-source + .doc-source { margin-top: 5.3125rem; padding-top: 4.6875rem; }
}

@media (max-width: 35rem) {
	.wrap { width: min(calc(100% - 1.5rem), 32.5rem); }
	.site-header {
		.nav-links { right: 0.75rem; left: 0.75rem;
			& > a:not(.button) { width: 100%; text-align: center; }
			.button { flex: 1; }
		}
	}
	h1 { font-size: clamp(2.85rem, 15vw, 4.1rem); }
	.hero {
		.hero-actions .button { width: 100%; }
		.quick-facts { gap: 0.5rem 0.75rem; }
		.code-stage::after { left: -0.75rem; }
		.code-stage::before { right: -1rem; }
		.code-window pre { padding: 1.125rem; font-size: 66%; }
		.hero-benefits { grid-template-columns: 1fr 1fr;
			div { border-bottom: 0.0625rem solid var(--line); }
			div:nth-child(2) { border-right: 0; }
			div:nth-child(3),
			div:nth-child(4) { border-bottom: 0; }
		}
	}
	.api-section {
		.api-tabs { grid-template-columns: 1fr 1fr; }
		.example-code pre { min-height: 18.75rem; padding: 1.125rem; font-size: 70%; }
		.example-footer { align-items: flex-start; flex-direction: column; gap: 0.4375rem; }
	}
	.documentation {
		.docs-heading { margin-bottom: 2.125rem; }
	}
	.docs-article { font-size: 96%;
		h2 { margin-top: 4.25rem; }
		.heading-anchor { opacity: .45; }
		.code-block pre { padding: 1rem; font-size: 70%; }
	}
	.cta .cta-box,
	.footer .footer-row { align-items: flex-start; flex-direction: column; }
	.cta .cta-box .button { width: 100%; }
	.footer {
		.footer-row { padding-block: 1.75rem; }
		.footer-links { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
	}
}

@media (max-height: 47.5rem) and (min-width: 51.3125rem) {
	.hero {
		.hero-inner { padding-block: 1.75rem 1.375rem; gap: 1.375rem; }
		.hero-label { margin-bottom: 0.75rem; }
		.hero-copy { margin-top: 1.0625rem; }
		.hero-actions { margin-top: 1.25rem; }
		.quick-facts { margin-top: 1.125rem; }
		.code-window pre { min-height: 17.5rem; padding: 1.1875rem; font-size: 70%; }
		.hero-benefits div { padding-block: 0.6875rem; }
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.no-js {
	.menu-button,
	.theme-toggle,
	.api-tabs,
	.copy-code,
	.sidebar-toggle,
	.sidebar-close,
	#code-panel { display: none; }
	.nav-links { display: flex; }
}

@media (max-width: 51.25rem) {
	.no-js .documentation .page-toc { position: static; width: 100%; max-height: none; margin-bottom: 3rem; padding: 0; visibility: visible; background: var(--transparent); border: 0; box-shadow: none; transform: none; }
}