:root {
	--color-bg: #ffffff;
	--color-bg-surface: #f7f7f5;
	--color-text: #1a1a18;
	--color-text-muted: #6b6b66;
	--color-border: #e3e3df;
	--color-accent: #185fa5;
	--color-accent-bg: #e6f1fb;
	--color-accent-border: #85b7eb;
	--color-brand: #557733;
	--color-brand-bg: #eef3e4;
	--color-brand-border: #a9c98c;
	--color-success: #3b6d11;
	--color-success-bg: #eaf3de;
	--color-success-border: #97c459;
	--color-pro: #3c3489;
	--color-pro-bg: #eeedfe;
	--color-pro-border: #afa9ec;
	--color-warning: #854f0b;
	--color-warning-bg: #faeeda;
	--color-warning-border: #ef9f27;
	--color-danger: #a32d2d;
	--color-danger-bg: #fcebeb;
	--color-danger-border: #f09595;
	--color-code-bg: #f7f7f5;

	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 40px;

	--radius: 8px;
	--sidebar-width: clamp(220px, 28vw, 320px);
	--toc-width: 240px;
}

:root[data-theme="dark"] {
	--color-bg: #16181d;
	--color-bg-surface: #1f2229;
	--color-text: #e6e6e3;
	--color-text-muted: #9a9a97;
	--color-border: #33363d;
	--color-accent: #6fa8dc;
	--color-accent-bg: #1c2a38;
	--color-accent-border: #3a5a75;
	--color-brand: #557733;
	--color-brand-bg: #eef3e4;
	--color-brand-border: #a9c98c;
	--color-success: #7cbf4a;
	--color-success-bg: #1e2b12;
	--color-success-border: #3f5c28;
	--color-pro: #9089d9;
	--color-pro-bg: #211f38;
	--color-pro-border: #453f6e;
	--color-warning: #e0a542;
	--color-warning-bg: #332510;
	--color-warning-border: #5c4420;
	--color-danger: #e07272;
	--color-danger-bg: #331616;
	--color-danger-border: #5c2626;
	--color-code-bg: #1a1d23;
}

* { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg);
}

h1, h2, h3, h4 { font-weight: 500; line-height: 1.3; }
h1 { font-size: 28px; margin: 0 0 var(--space-md); }
.page-title-version {
	font-weight: 400;
	font-size: 16px;
	color: var(--color-text-muted);
}
h2 { font-size: 22px; margin: var(--space-lg) 0 var(--space-sm); }
h3 { font-size: 18px; margin: var(--space-lg) 0 var(--space-sm); }

.heading-anchor {
	opacity: 0;
	margin-left: var(--space-sm);
	font-size: 0.7em;
	font-weight: 400;
	color: var(--color-text-muted);
	text-decoration: none;
	vertical-align: middle;
}
h1:hover .heading-anchor,
h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor,
.heading-anchor:focus {
	opacity: 1;
}
.heading-anchor:hover { color: var(--color-accent); }

p { margin: 0 0 var(--space-md); }

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

/* ============================================================
   Header
   ============================================================ */
.site-header {
	background: var(--color-brand);
	border-bottom: 1px solid var(--color-brand);
}
.site-header-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--space-sm) var(--space-sm);
	display: flex;
	align-items: center;
}
.theme-menu {
	position: relative;
	margin-left: auto;
}
.theme-toggle-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: #ffffff;
	font-size: 16px;
	line-height: 1;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
}
.theme-toggle-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}
.theme-menu-list {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 4px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	min-width: 110px;
	z-index: 50;
	overflow: hidden;
}
.theme-menu-list.is-open {
	display: block;
}
.theme-menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 6px 10px;
	font-size: 13px;
	color: var(--color-text);
	cursor: pointer;
}
.theme-menu-item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	flex-shrink: 0;
}
.theme-menu-item:hover {
	background: var(--color-bg-surface);
}
.theme-menu-item[aria-current="true"] {
	color: var(--color-accent);
	font-weight: 500;
}
.site-title {
	font-weight: 500;
	font-size: 15px;
	color: #ffffff;
}
.site-version {
	font-weight: 400;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   Layout
   ============================================================ */
.layout {
	display: grid;
	grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
	max-width: 1320px;
	margin: 0 auto;
}
@media (min-width: 1280px) {
	.layout {
		grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--toc-width);
	}
}

/* ============================================================
   Sidebar nav
   ============================================================ */
.docs-nav {
	border-right: 1px solid var(--color-border);
	padding: var(--space-md) var(--space-sm);
	font-size: 14px;
	position: sticky;
	top: 0;
	align-self: start;
	max-height: 100vh;
	overflow-y: auto;
}
.docs-nav-tree, .docs-nav-subtree {
	list-style: none;
	margin: 0;
	padding: 0;
}
.docs-nav-subtree { padding-left: var(--space-md); }
.docs-nav-item { margin: 2px 0; }

/* row wraps the toggle chevron + link for items that have a
   subtree; leaf items keep the link on its own (no toggle),
   with matching left padding so text still lines up */
.docs-nav-row { display: flex; align-items: center; gap: 2px; }
.docs-nav-item > .docs-nav-link { margin-left: 20px; }

.docs-nav-toggle-item {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text-muted);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: rotate(0deg);
	transition: transform 0.15s ease;
}
.docs-nav-toggle-item::before { content: "\203A"; font-size: 14px; }
.docs-nav-item.is-expanded > .docs-nav-row > .docs-nav-toggle-item { transform: rotate(90deg); }
.docs-nav-row > .docs-nav-link { margin-left: 0; }

.docs-nav-item > .docs-nav-subtree { display: none; }
.docs-nav-item.is-expanded > .docs-nav-subtree { display: block; }

.docs-nav-link {
	display: block;
	padding: 4px var(--space-sm);
	border-radius: var(--radius);
	color: var(--color-text-muted);
	flex: 1;
	min-width: 0;
}
.docs-nav-link:hover {
	text-decoration: underline;
}
.docs-nav-link.is-active {
	color: var(--color-accent);
}

/* Mobile off-canvas drawer */
.docs-nav-toggle {
	display: none;
	border: none;
	background: none;
	font-size: 20px;
	cursor: pointer;
	color: #ffffff;
	margin-right: var(--space-sm);
}
.docs-nav-overlay { display: none; }

@media (max-width: 840px) {
	.layout { display: block; }
	.docs-nav-toggle { display: inline-flex; }
	.docs-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background: var(--color-bg);
		z-index: 100;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
	}
	.docs-nav.is-open { transform: translateX(0); }
	.docs-nav-overlay.is-open {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 99;
	}
}

/* ============================================================
   Content
   ============================================================ */
.content {
	padding: var(--space-lg);
	min-width: 0;
}

/* Breadcrumbs */
.breadcrumb-list {
	list-style: none;
	margin: 0 0 var(--space-md);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 14px;
	color: var(--color-text-muted);
}
.breadcrumb-item:not(:last-child)::after {
	content: ">";
	margin-left: 4px;
	color: var(--color-text-muted);
}
.breadcrumb-item a { color: var(--color-text-muted); }
.breadcrumb-current { color: var(--color-accent); }

/* ============================================================
   Admonitions
   ============================================================ */
.note, .tip, .important, .warning, .caution {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-sm) var(--space-md);
	margin: var(--space-md) 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.note { background: var(--color-accent-bg); border-color: var(--color-accent-border); color: var(--color-accent); }
.tip { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.important { background: var(--color-pro-bg); border-color: var(--color-pro-border); color: var(--color-pro); }
.caution { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.warning { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.note p, .tip p, .important p, .warning p, .caution p { margin: 0; color: inherit; }
.note .title, .tip .title, .important .title, .warning .title, .caution .title {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

/* ============================================================
   Code blocks
   ============================================================ */
.programlisting, pre.screen {
	position: relative;
	background: var(--color-code-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-md);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1.6;
}
.code-copy-btn {
	position: absolute;
	top: 6px;
	right: 6px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text-muted);
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.code-copy-btn:hover {
	color: var(--color-text);
	background: var(--color-bg-surface);
}
.code-copy-btn.is-copied {
	color: var(--color-success);
	border-color: var(--color-success-border);
}

/* ============================================================
   Images / figures
   ============================================================ */
div.mediaobject img, .figure img, article img {
	display: block;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	margin: 0 auto;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
}
div.mediaobject table {
	width: auto !important;
	max-width: 100% !important;
}
.caption p, div.mediaobject + .caption p {
	text-align: center;
	font-size: 13px;
	color: var(--color-text-muted);
	margin-top: var(--space-xs);
}

/* ============================================================
   Tables
   ============================================================ */
div.table {
	overflow-x: auto;
}
div.table table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space-md) 0;
	font-size: 14px;
}
div.table table th, div.table table td {
	border: 1px solid var(--color-border);
	padding: var(--space-sm);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}
div.table table th { background: var(--color-bg-surface); font-weight: 500; }
div.table > p.title { text-align: center; font-weight: 500; margin-bottom: var(--space-sm); }

/* ============================================================
   Chapter TOC
   ============================================================ */
.toc {
	margin: var(--space-md) 0 var(--space-lg);
}
.toc dl { margin: 0; }
.toc dt { margin: 6px 0; font-weight: 400; }
.toc dd { margin: 0 0 6px var(--space-md); }
.toc a { color: var(--color-accent); }
.toc a:hover { text-decoration: underline; }

/* ============================================================
   Prev / next nav
   ============================================================ */
.prev-next {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-xl);
	padding-top: var(--space-md);
}
.prevnext-link {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	max-width: 48%;
	color: var(--color-text);
	border-radius: var(--radius);
	padding: 4px;
}
.prevnext-link:hover { background: var(--color-bg-surface); text-decoration: none; }
.prevnext-icon {
	font-size: 16px;
	color: var(--color-text-muted);
	flex-shrink: 0;
}
.prevnext-text { display: flex; flex-direction: column; min-width: 0; }
.prevnext-next { margin-left: auto; }
.prevnext-next .prevnext-text { text-align: right; }
.prevnext-label { font-size: 12px; color: var(--color-text-muted); }
.prevnext-title {
	font-size: 14px;
	font-weight: 500;
}

/* ============================================================
   On-page TOC (right rail)
   ============================================================ */
.on-page-toc {
	display: none;
	border-left: 1px solid var(--color-border);
	padding: var(--space-md) var(--space-sm);
	font-size: 14px;
	color: var(--color-text-muted);
	position: sticky;
	top: 0;
	align-self: start;
	max-height: 100vh;
	overflow-y: auto;
}
@media (min-width: 1280px) {
	.on-page-toc { display: block; }
}
.on-page-toc a { color: var(--color-text-muted); display: block; padding: 2px 0; }
.on-page-toc a.is-active { color: var(--color-accent); }
.on-page-toc-label { margin-bottom: 6px; font-weight: 500; color: var(--color-text); }

/* Mobile/tablet fallback — shown below the desktop rail's
   breakpoint, at the top of the content, collapsed by default */
.on-page-toc-mobile {
	display: block;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md);
	font-size: 14px;
}
.on-page-toc-mobile summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--color-text);
}
.on-page-toc-mobile nav {
	margin-top: var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.on-page-toc-mobile a {
	color: var(--color-text-muted);
	font-size: 14px;
	padding: 2px 0;
}
.on-page-toc-mobile a.is-active { color: var(--color-accent); }
@media (min-width: 1280px) {
	.on-page-toc-mobile { display: none; }
}

/* ============================================================
   Menuchoice and GUI elements
   ============================================================ */
.menuchoice, .guibutton, .guilabel { font-weight: 500; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	border-top: 1px solid var(--color-border);
}
.site-footer-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--space-md) var(--space-sm);
	font-size: 13px;
	color: var(--color-text-muted);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm);
}
.copyright { margin: 0; }
.footer-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
}
.footer-sep { color: var(--color-text-muted); }

@media (max-width: 840px) {
	.site-footer-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* ============================================================
   Back to top
   ============================================================ */
.back-to-top {
	position: fixed;
	right: var(--space-lg);
	bottom: var(--space-lg);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	z-index: 50;
}
.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}
.back-to-top:hover { background: var(--color-bg-surface); }