body {
	background-image:
	url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/></filter><rect width='250' height='250' filter='url(%23n)' opacity='0.6'/></svg>"),
	radial-gradient(75.58% 90.33% at 58.67% 102.67%, hsl(245.2 100% 19.55%) 0%, hsl(245.2 100% 19.55%) 34%, transparent 100%), radial-gradient(88.89% 63.95% at -26.56% 22.29%, hsl(266.6 100% 20.62%) 0%, hsl(266.6 100% 20.62%) 29%, transparent 100%), radial-gradient(92.02% 45.20% at -25.90% 85.35%, hsl(306.4 44.68% 40.61%) 0%, hsl(306.4 44.68% 40.61%) 22%, transparent 100%), radial-gradient(94.64% 66.78% at -19.04% 73.03%, hsl(266.6 100% 20.62%) 0%, hsl(266.6 100% 20.62%) 30%, transparent 100%), linear-gradient(60.93deg, hsl(245.2 100% 19.55%) 0%, 61.8%, transparent 100%);
	background-blend-mode: soft-light, overlay, hard-light, overlay, normal;
	background-blend-mode: normal, normal, hard-light, overlay, soft-light;
	background-attachment: fixed;
}

/* ── Custom Properties ─────────────────────────────────────── */
:root {
	--bs-body-font-size: 18px;
	--sidebar-width: 265px;
	--code-bg: #f6f8fa;
	--code-border: #d1d9e0;
	--code-text: #24292f;
	--j-key: #0550ae;
	--j-string: #0a3069;
	--j-fn: #8250df;
	--j-number: #953800;
	--j-brace: #57606a;
	--j-comment: #6e7781;
}

/* ── Syntax highlighting ───────────────────────────────────── */

.j-key {
	color: var(--j-key);
}
.j-string {
	color: var(--j-string);
}
.j-fn {
	color: var(--j-fn);
	font-weight: 600;
}
.j-number {
	color: var(--j-number);
}
.j-brace {
	color: var(--j-brace);
}
.j-comment {
	color: var(--j-comment);
	font-style: italic;
}

/* ── Sidebar ───────────────────────────────────────────────── */

.layout {
	max-width: 1800px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: var(--sidebar-width) 1fr;
	gap: 1.5rem;
	padding: 1.5rem;
	align-items: start;
}

.sidebar {
	position: sticky;
	top: 1.5rem;
	overflow: auto;
	border-radius: 12px;
	background: var(--bs-body-bg);
}
.sidebar-logo-area {
	gap: 12px;
}
.logo {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	flex-shrink: 0;
}
.page-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.sidebar-nav .nav-link {
	padding: 0.8rem 0.6rem;
	border-radius: 5px;
}
.sidebar .sidebar-nav .nav-link:hover {
	background-color: rgba(var(--bs-body-color-rgb), 0.05);
}
.sidebar-nav .nav-link.active {	
	background: var(--bs-primary-bg-subtle) !important;	
}

/* ── Callout ───────────────────────────────────────────────── */

.callout {
	border-left: 3px solid var(--bs-primary);
	background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
	border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
	padding: 0.75rem 1rem;
}

/* ── Content ───────────────────────────────────────────────── */

section {
	padding: 48px 48px;
	background: var(--bs-body-bg);
	border-radius: 12px;
}

.card {
	--bs-card-border-radius: 16px;
}

/* ── Code block ────────────────────────────────────────────── */

.code-block {
	background: var(--code-bg);
	border: 1px solid var(--code-border);
	border-radius: var(--bs-border-radius-lg);
	padding: 1rem 1.25rem;
	font-size: 0.85em;
	line-height: 1.65;
	overflow-x: auto;
	color: var(--code-text);
}
.code-block code {
	background: transparent;
	color: inherit;
	padding: 0;
	font-size: inherit;
}

/* ── Label ─────────────────────────────────────────────────── */

.label-spaced { letter-spacing: 0.08em; }

/* ── Examples ──────────────────────────────────────────────── */

.example-toggle {
	padding-left: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}
.example-toggle .form-check-input {
	float: none;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
}

.example-layout {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	margin-top: 1.25rem;
}
.example-layout > div:last-child { position: sticky; top: 1.5rem; }
.example-arrow {
	color: var(--bs-secondary-color);
	padding: 2rem 1.25rem 0;
	font-size: 1.75rem;
	position: sticky;
	top: 110px;
	align-self: start;
	-webkit-user-select: none;
	user-select: none;
}
.swatch {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1px solid rgba(var(--bs-body-color-rgb), 0.12);
	flex-shrink: 0;
	vertical-align: middle;
}

/* ── Variables table ───────────────────────────────────────── */

.vars-table-wrap {
	border: 1px solid var(--code-border);
	border-radius: var(--bs-border-radius-lg);
	overflow: hidden;
}
.vars-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--code-bg);
	margin: 0;
}
.vars-table th {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: left;
	padding: 0.4rem 0.7rem;
	font-weight: 700;
	background: color-mix(in srgb, var(--code-border) 40%, var(--code-bg));
	color: var(--j-brace);
	border-bottom: 1px solid var(--code-border);
}
.vars-table td {
	padding: 0.25rem 0.7rem;
	vertical-align: middle;
	white-space: nowrap;
	border-bottom: 1px solid
		color-mix(in srgb, var(--code-border) 50%, transparent);
}
.vars-table tr:last-child td {
	border-bottom: none;
}
.vars-name {
	font-family: var(--bs-font-monospace);
	color: var(--code-text);
}
.vars-hex {
	font-family: var(--bs-font-monospace);
	color: var(--j-string);
	margin-left: 0.3em;
}
.vars-num-val {
	font-family: var(--bs-font-monospace);
	color: var(--j-number);
}
.vars-group {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--j-brace);
	background: color-mix(in srgb, var(--code-border) 25%, var(--code-bg));
	padding-top: 0.4rem !important;
	padding-bottom: 0.2rem !important;
}

/* ── Mobile — sidebar becomes a top bar ────────────────────── */

@media (max-width: 860px) {
	.layout {
		grid-template-columns: 1fr;
		padding: 0;
		gap: 0;
	}
	.sidebar {
		position: sticky;
		top: 0;
		border-radius: 0;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: visible;
		z-index: var(--bs-zindex-sticky);
	}
	.sidebar-logo-area {
		border-bottom: none;
		border-right: 1px solid var(--bs-border-color);
	}
	.sidebar-nav {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		flex: 1;
		padding: 0.5rem;
	}
	.sidebar-nav .nav-link { white-space: nowrap; }
	.sidebar-footer {
		flex-direction: row;
		border-top: none;
		border-left: 1px solid var(--bs-border-color);
		padding: 0.5rem 0.75rem;
	}
	.sidebar-ext-link span { display: none; }
	.doc-content { padding: 2rem 1.75rem; }
	.example-layout { grid-template-columns: 1fr; }
	.example-arrow { text-align: center; padding: 0.5rem 0; transform: rotate(90deg); }
}

@media (max-width: 560px) {
	.doc-content { padding: 1.5rem 1.25rem; }
}