@font-face {
	font-family: "STIX Two Text";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/STIXTwoText-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "STIX Two Text";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/STIXTwoText-Italic.ttf") format("truetype");
}

@font-face {
	font-family: "STIX Two Text";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/STIXTwoText-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/Lato-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/assets/fonts/Lato-Bold.ttf") format("truetype");
}

:root {
	--background: hsl(40 100% 99%);
	--surface: hsl(34 33% 96%);
	--surface-active: hsl(33 29% 92%);
	--surface-raised: hsla(40 100% 99% / 0.72);
	--header-background: hsla(40 100% 99% / 0.94);
	--sidebar-background: hsl(36 45% 98%);
	--code-background: hsl(33 41% 97%);
	--content-ink: hsl(28 9% 15%);
	--ink: hsl(30 11% 7%);
	--secondary: hsl(30 8% 31%);
	--muted: hsl(30 8% 49%);
	--line: hsl(32 20% 84%);
	--line-soft: hsl(32 24% 91%);
	--accent: hsl(27 16% 23%);
	--button-contrast: hsl(40 100% 99%);
	--warm-shadow: hsla(27 16% 23% / 0.18);
	--search-overlay: hsla(30 11% 7% / 0.28);
	--header-height: 74px;
	--header-inset: 14px;
	--sidebar-width: 21rem;
	color: var(--ink);
	background: var(--background);
	font-family: "Lato", Arial, sans-serif;
	font-size: 18px;
	line-height: 1.6;
}

:root[data-theme="dark"] {
	--background: hsl(30 10% 14%);
	--surface: hsl(30 10% 18%);
	--surface-active: hsl(31 11% 23%);
	--surface-raised: hsla(31 11% 22% / 0.78);
	--header-background: hsla(30 10% 13% / 0.94);
	--sidebar-background: hsl(30 10% 15%);
	--code-background: hsl(30 10% 16%);
	--content-ink: hsl(34 18% 84%);
	--ink: hsl(36 24% 91%);
	--secondary: hsl(34 13% 73%);
	--muted: hsl(32 9% 57%);
	--line: hsl(30 11% 32%);
	--line-soft: hsl(30 10% 25%);
	--accent: hsl(35 31% 70%);
	--button-contrast: hsl(30 10% 14%);
	--warm-shadow: hsla(30 11% 4% / 0.36);
	--search-overlay: hsla(30 11% 4% / 0.48);
}

* {
	box-sizing: border-box;
}

HTML {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 32px);
}

BODY {
	min-width: 320px;
	margin: 0;
	background: var(--background);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

BUTTON,
INPUT {
	font: inherit;
}

A {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.site-header {
	position: sticky;
	z-index: 40;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	padding: 0 24px;
	background: var(--header-background);
	border-bottom: 1px solid var(--line-soft);
	backdrop-filter: blur(16px);
}

.site-identity {
	display: flex;
	align-items: center;
	gap: 18px;
}

.wordmark {
	display: block;
	width: 42px;
	height: 42px;
	text-decoration: none;
}

.wordmark IMG {
	display: block;
	width: 100%;
	height: 100%;
}

.site-section {
	color: var(--ink);
	cursor: default;
	font-family: "STIX Two Text", Georgia, serif;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	user-select: none;
}

.site-identity.extended-mode-flash .wordmark,
.site-identity.extended-mode-flash .site-section {
	animation: extended-mode-flash 600ms ease-in-out;
}

@keyframes extended-mode-flash {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-left: auto;
}

.theme-toggle {
	display: block;
	width: 66px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--secondary);
	cursor: pointer;
}

.theme-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.theme-toggle__track {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 4px 9px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 999px;
	box-shadow: inset 0 1px 2px var(--warm-shadow);
}

.theme-toggle__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	background: var(--background);
	border: 1px solid var(--line-soft);
	border-radius: 50%;
	box-shadow: 0 4px 14px var(--warm-shadow);
	color: var(--ink);
	transition: transform 170ms ease, background 170ms ease, color 170ms ease;
}

.theme-toggle__icon {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
}

.theme-toggle__icon SVG {
	display: block;
	width: 100%;
	height: 100%;
}

.theme-toggle__icon--sun {
	color: hsl(36 32% 45%);
}

.theme-toggle__icon--moon {
	color: var(--muted);
}

:root[data-theme="dark"] .theme-toggle__thumb {
	transform: translateX(32px);
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
	color: hsl(36 34% 72%);
}

.docs-search {
	display: flex;
	align-items: center;
	gap: 11px;
	width: auto;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--secondary);
	cursor: pointer;
	font-size: 0.86rem;
	text-align: left;
	opacity: 1;
}

.docs-search:hover,
.docs-search:focus-visible {
	color: var(--ink);
	outline: 0;
}

.docs-search-icon {
	display: block;
	font-size: 3rem;
	line-height: 1;
	transform: translateY(-0.2rem);
}

.docs-search KBD {
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--muted);
	font: inherit;
	font-size: 0.86rem;
}

.docs-layout {
	display: grid;
	grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
	align-items: start;
}

.docs-sidebar {
	position: sticky;
	top: var(--header-height);
	height: calc(100vh - var(--header-height));
	overflow-y: auto;
	padding: 24px 20px 48px 32px;
	background: var(--sidebar-background);
	border-right: 1px solid var(--line-soft);
	scrollbar-color: hsl(30 15% 70%) transparent;
	scrollbar-width: thin;
	overscroll-behavior: contain;
}

.docs-nav {
	counter-reset: docs-nav-item;
	margin: 0;
	padding: 0;
	list-style: none;
}

.docs-nav .docs-nav {
	margin-top: 4px;
	padding-left: 18px;
}

.docs-nav LI {
	margin: 4px 0;
	list-style: none;
}

.docs-nav > LI:not(.docs-nav-missing):not(.docs-nav-unnumbered),
BODY.docs-debug .docs-nav > LI.docs-nav-missing {
	counter-increment: docs-nav-item;
}

.docs-nav-missing {
	display: none;
}

BODY.docs-debug .docs-nav-missing {
	display: list-item;
}

.docs-nav LI::marker {
	content: "";
}

.docs-nav-entry {
	display: flex;
	gap: 0.45em;
	padding: 4px 10px;
	color: var(--secondary);
	font-size: 0.86rem;
	line-height: 1.45;
	text-decoration: none;
}

.docs-nav-number {
	display: inline-block;
	flex: 0 0 auto;
	color: var(--muted);
}

.docs-nav-number::before {
	content: counter(docs-nav-item) ".";
}

.docs-nav-missing-marker {
	flex: 0 0 auto;
}

.docs-nav-title {
	min-width: 0;
}

.docs-nav-entry:not(A),
.docs-nav-level-0 > LI > A.docs-nav-entry {
	margin-top: 13px;
	color: var(--ink);
	font-weight: 700;
}

.docs-nav A:hover {
	background: var(--surface);
	color: var(--ink);
}

.docs-nav A[aria-current="page"] {
	background: var(--surface-active);
	color: var(--ink);
}

.docs-content {
	width: min(100%, 900px);
	min-width: 0;
	padding: 34px clamp(32px, 6vw, 84px) 120px clamp(48px, 9vw, 142px);
}

.docs-content H1,
.docs-content H2,
.docs-content H3,
.docs-content H4 {
	color: var(--ink);
	font-family: "STIX Two Text", Georgia, serif;
	font-weight: 700;
	line-height: 1.12;
}

.docs-content H1 {
	margin: 0 0 20px;
	font-size: clamp(3rem, 5vw, 4.25rem);
}

.docs-content H2 {
	margin: 60px 0 16px;
	font-size: clamp(2rem, 3vw, 2.55rem);
}

.docs-content H3 {
	margin: 42px 0 12px;
	font-size: 1.55rem;
}

.docs-content H4 {
	margin: 34px 0 10px;
	font-size: 1.18rem;
}

.docs-content P,
.docs-content UL,
.docs-content OL,
.docs-content BLOCKQUOTE,
.docs-content TABLE {
	margin-block: 0 22px;
}

.docs-content P,
.docs-content LI {
	max-width: 70ch;
}

.docs-content UL,
.docs-content OL {
	padding-left: 1.35em;
}

.docs-content LI + LI {
	margin-top: 7px;
}

.docs-content BLOCKQUOTE {
	margin-inline: 0;
	padding: 2px 0 2px 22px;
	border-left: 2px solid var(--line);
	color: var(--secondary);
}

.docs-content P,
.docs-content LI,
.docs-content BLOCKQUOTE,
.docs-content TABLE {
	color: var(--content-ink);
	font-family: "Lato", Arial, sans-serif;
	font-size: 0.98rem;
	line-height: 1.78;
}

.docs-content HR {
	margin-block: 52px;
	border: 0;
	border-top: 1px solid var(--line);
}

CODE {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
	tab-size: 2;
}

:not(PRE) > CODE {
	padding: 0.08rem 0.3rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 3px;
	color: var(--accent);
	white-space: break-spaces;
}

PRE {
	margin: 28px 0;
	overflow: auto;
	padding: 24px 26px;
	background: var(--code-background);
	border: 1px solid var(--line);
	border-radius: 3px;
	color: var(--ink);
	line-height: 1.55;
	tab-size: 2;
}

PRE CODE {
	display: block;
	min-width: max-content;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 0.82rem;
	white-space: pre;
}

.first-code-example {
	margin: 28px 0;
}

.first-code-example PRE {
	margin: 0;
}

.first-code-panels {
	position: relative;
	overflow: auto;
	background: var(--code-background);
	border: 1px solid var(--line);
	border-radius: 3px;
}

.first-code-panels::before {
	display: none;
	height: 42px;
	background: hsl(35 14% 93%);
	border-bottom: 1px solid hsl(35 14% 86%);
	content: "";
}

.first-code-panels::after {
	display: none;
	position: absolute;
	top: 16px;
	left: 26px;
	width: 10px;
	height: 10px;
	background: hsl(35 8% 82%);
	border-radius: 50%;
	box-shadow: 18px 0 0 hsl(35 8% 82%), 36px 0 0 hsl(35 8% 82%);
	content: "";
}

.first-code-example:has(.first-code-tokenized:not([hidden])) .first-code-panels {
	background: hsl(0 0% 100%);
	border-color: hsl(35 14% 82%);
	border-radius: 8px;
	box-shadow: 0 18px 54px var(--warm-shadow);
}

.first-code-example:has(.first-code-tokenized:not([hidden])) .first-code-panels::before,
.first-code-example:has(.first-code-tokenized:not([hidden])) .first-code-panels::after {
	display: block;
}

.first-code-panels PRE {
	border: 0;
	border-radius: 0;
}

.first-code-tokenized {
	min-width: max-content;
	padding: 24px 26px;
	background: hsl(0 0% 100%);
}

.first-code-tokenized .root {
	font-size: 0.82rem;
	padding: 0;
}

.first-code-toggle {
	display: flex;
	justify-content: flex-end;
	gap: 18px;
	margin-top: 0.75rem;
	margin-right: 0.5rem;
}

.first-code-toggle-option {
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.66rem;
	letter-spacing: 0;
}

.first-code-toggle-option.is-active {
	color: var(--ink);
}

.first-code-toggle-option:disabled {
	cursor: default;
	opacity: 0.42;
}

:root[data-theme="dark"] .first-code-panels::before {
	background: hsl(220 0% 22%);
	border-bottom-color: hsl(220 0% 29%);
}

:root[data-theme="dark"] .first-code-panels::after {
	background: hsl(220 0% 46%);
	box-shadow: 18px 0 0 hsl(220 0% 46%), 36px 0 0 hsl(220 0% 46%);
}

:root[data-theme="dark"] .first-code-example:has(.first-code-tokenized:not([hidden])) .first-code-panels {
	background: hsl(220 0% 15%);
	border-color: hsl(220 0% 34%);
	box-shadow: 0 18px 54px hsl(220 20% 4% / 0.32);
}

:root[data-theme="dark"] .first-code-tokenized {
	background: hsl(220 0% 15%);
}

TABLE {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

TH,
TD {
	padding: 11px 13px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

TH {
	color: var(--secondary);
	font-weight: 700;
}

.docs-menu-button,
.docs-menu-scrim {
	display: none;
}

.docs-search-overlay {
	position: fixed;
	z-index: 80;
	inset: 0;
	display: grid;
	place-items: start center;
	padding: min(12vh, 92px) 20px 32px;
	background: var(--search-overlay);
	backdrop-filter: blur(4px);
}

.docs-search-overlay[hidden] {
	display: none;
}

.docs-search-dialog {
	width: min(720px, 100%);
}

.docs-search-panel {
	overflow: hidden;
	background: var(--background);
	border: 1px solid var(--line);
	box-shadow: 0 24px 80px var(--warm-shadow);
}

.docs-search-form {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line-soft);
	color: var(--muted);
}

.docs-search-form INPUT {
	width: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--ink);
	outline: 0;
}

.docs-search-form INPUT::placeholder {
	color: var(--muted);
}

.docs-search-close {
	width: 30px;
	height: 30px;
	padding: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--secondary);
	cursor: pointer;
	line-height: 1;
}

.docs-search-close:hover,
.docs-search-close:focus-visible {
	background: var(--surface-active);
	color: var(--ink);
}

.docs-search-status {
	padding: 14px 16px;
	color: var(--muted);
	font-size: 0.84rem;
}

.docs-search-results {
	max-height: min(58vh, 520px);
	margin: 0;
	overflow-y: auto;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line-soft);
}

.docs-search-result {
	border-bottom: 1px solid var(--line-soft);
}

.docs-search-result A {
	display: block;
	padding: 15px 16px 17px;
	color: inherit;
	text-decoration: none;
}

.docs-search-result A:hover,
.docs-search-result A:focus-visible {
	background: var(--surface);
}

.docs-search-result-title {
	display: block;
	margin-bottom: 5px;
	color: var(--ink);
	font-weight: 700;
	line-height: 1.35;
}

.docs-search-result-excerpt {
	display: block;
	color: var(--secondary);
	font-size: 0.86rem;
	line-height: 1.55;
}

.docs-search-result-excerpt MARK {
	background: var(--surface-active);
	color: var(--ink);
	font-weight: 700;
}

@media (max-width: 64rem) {
	.site-header {
		padding-inline: 18px;
	}

	.docs-menu-button {
		position: fixed;
		z-index: 35;
		top: calc(var(--header-height) + var(--header-inset));
		left: 18px;
		display: grid;
		place-items: center;
		width: 39px;
		height: 39px;
		padding: 0;
		background: var(--accent);
		border: 1px solid var(--accent);
		border-radius: 0;
		color: var(--button-contrast);
	}

	.docs-menu-button SPAN:first-child {
		position: relative;
	}

	.docs-menu-button SPAN:first-child,
	.docs-menu-button SPAN:first-child::before,
	.docs-menu-button SPAN:first-child::after {
		display: block;
		width: 16px;
		height: 1px;
		background: currentColor;
		content: "";
	}

	.docs-menu-button SPAN:first-child::before,
	.docs-menu-button SPAN:first-child::after {
		position: absolute;
		left: 0;
	}

	.docs-menu-button SPAN:first-child::before {
		top: -5px;
	}

	.docs-menu-button SPAN:first-child::after {
		top: 5px;
	}

	BODY.docs-menu-open .docs-menu-button {
		display: none;
	}

	.docs-menu-scrim {
		position: fixed;
		z-index: 20;
		inset: var(--header-height) 0 0;
		background: hsla(30 22% 9% / 0.24);
		backdrop-filter: blur(2px);
	}

	BODY.docs-menu-open {
		overflow: hidden;
	}

	BODY.docs-menu-open .docs-menu-scrim {
		display: block;
	}

	.docs-layout {
		display: block;
	}

	.docs-sidebar {
		position: fixed;
		z-index: 30;
		top: var(--header-height);
		bottom: 0;
		left: 0;
		width: min(var(--sidebar-width), 88vw);
		height: auto;
		padding: 20px 20px 48px 24px;
		background: var(--sidebar-background);
		box-shadow: 18px 0 44px var(--warm-shadow);
		transform: translateX(-105%);
		transition: transform 180ms ease;
	}

	BODY.docs-menu-open .docs-sidebar {
		transform: translateX(0);
	}

	.docs-content {
		margin-inline: auto;
		padding: 84px clamp(22px, 7vw, 72px) 96px;
	}
}

@media (max-width: 40rem) {
	:root {
		--header-height: 62px;
		--header-inset: 11px;
		font-size: 17px;
	}

	.wordmark {
		width: 36px;
		height: 36px;
	}

	.site-section {
		display: inline;
	}

	.docs-search {
		gap: 9px;
	}

	.header-actions {
		gap: 18px;
	}

	.theme-toggle {
		width: 58px;
		height: 31px;
	}

	.theme-toggle__track {
		padding-inline: 8px;
	}

	.theme-toggle__thumb {
		width: 25px;
		height: 25px;
	}

	:root[data-theme="dark"] .theme-toggle__thumb {
		transform: translateX(27px);
	}

	.docs-menu-button {
		margin-left: auto;
	}

	.docs-content H1 {
		font-size: 2.65rem;
	}

	.docs-content H2 {
		font-size: 1.9rem;
	}

	PRE {
		margin-inline: -8px;
		padding-inline: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	HTML {
		scroll-behavior: auto;
	}

	.docs-sidebar {
		transition: none;
	}
}
