:root {
	color-scheme: dark light;
	--bg: #0e1020;
	--panel: rgb(255 255 255 / 0.035);
	--line: #262a4d;
	--text: #e6e8ff;
	--muted: #9aa0cf;
	--accent: #a78bfa;
	--accent2: #5eead4;
	--code: #181b3a;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	color: var(--text);
	font:
		15.5px / 1.7 Inter,
		system-ui,
		-apple-system,
		"Segoe UI",
		"Noto Sans Thai",
		sans-serif;
	background:
		radial-gradient(900px 500px at 8% -5%, #2a2160 0%, transparent 60%),
		radial-gradient(800px 500px at 100% 20%, #123a45 0%, transparent 55%),
		var(--bg);
	background-attachment: fixed;
}
a {
	color: var(--accent);
}
.bar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem max(1.25rem, calc((100vw - 66rem) / 2));
	background: rgb(14 16 32 / 0.72);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}
.bar .spacer {
	flex: 1;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	text-decoration: none;
}
.brand svg {
	width: 1.6rem;
	height: 1.6rem;
	filter: drop-shadow(0 0 6px #a78bfa88);
}
.brand b {
	font-weight: 600;
}
.brand span {
	color: var(--accent);
}
.pill {
	white-space: nowrap;
	color: var(--muted);
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.15rem 0.8rem;
	font-size: 0.85rem;
}
.pill:hover {
	color: var(--text);
	border-color: var(--accent);
}
.btn {
	white-space: nowrap;
	background: var(--accent);
	color: #1a1233;
	border-radius: 10px;
	padding: 0.35rem 0.9rem;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}
.btn:hover {
	filter: brightness(1.1);
}
.wrap {
	max-width: 66rem;
	margin: 0 auto;
	padding: 2rem 1.25rem 5rem;
	display: grid;
	grid-template-columns: 14.5rem minmax(0, 1fr);
	gap: 2.2rem;
}
nav.toc {
	position: sticky;
	top: 4.6rem;
	align-self: start;
	font-size: 0.88rem;
	max-height: calc(100vh - 6rem);
	overflow: auto;
	padding: 0.9rem;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--panel);
}
nav.toc strong {
	display: block;
	margin: 0.6rem 0 0.25rem;
	padding: 0 0.6rem;
	color: var(--muted);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
nav.toc strong:first-child {
	margin-top: 0;
}
nav.toc a {
	display: block;
	padding: 0.28rem 0.6rem;
	border-radius: 8px;
	color: var(--muted);
	text-decoration: none;
}
nav.toc a:hover {
	color: var(--text);
	background: rgb(255 255 255 / 0.05);
}
nav.toc a.on {
	color: var(--text);
	background: rgb(167 139 250 / 0.16);
}
main {
	min-width: 0;
}
.hero {
	margin-bottom: 1.6rem;
}
h1 {
	margin: 0.2rem 0 0.4rem;
	font-size: 2.3rem;
	line-height: 1.15;
	letter-spacing: -0.03em;
	background: linear-gradient(100deg, #fff 10%, #c4b5fd 60%, #5eead4);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.muted {
	color: var(--muted);
	font-size: 0.95rem;
}
section.card {
	margin: 0 0 1.1rem;
	padding: 1.3rem 1.5rem 1.4rem;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--panel);
	scroll-margin-top: 4.6rem;
}
h2 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.6rem;
	font-size: 1.3rem;
	letter-spacing: -0.015em;
}
h2::before {
	content: "";
	width: 0.42rem;
	height: 1.25rem;
	border-radius: 4px;
	background: linear-gradient(var(--accent), var(--accent2));
}
h3 {
	margin: 1.4rem 0 0.25rem;
	font-size: 1rem;
	color: var(--accent2);
}
p {
	margin: 0.5rem 0;
}
ul,
ol {
	padding-left: 1.3rem;
}
li {
	margin: 0.3rem 0;
}
li::marker {
	color: var(--accent);
}
code,
kbd {
	font:
		12.5px / 1.5 "JetBrains Mono",
		ui-monospace,
		Menlo,
		monospace;
}
code {
	background: var(--code);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.05rem 0.4rem;
}
kbd {
	background: var(--code);
	border: 1px solid #2d3260;
	border-bottom-width: 2px;
	border-radius: 6px;
	padding: 0.05rem 0.45rem;
	white-space: nowrap;
}
table {
	width: 100%;
	margin: 0.8rem 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	font-size: 0.92rem;
}
th,
td {
	padding: 0.55rem 0.8rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}
tr:last-child td {
	border-bottom: 0;
}
th {
	background: rgb(255 255 255 / 0.05);
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
tr:nth-child(even) td {
	background: rgb(255 255 255 / 0.018);
}
.divider {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 3rem 0 2rem;
}
.lang {
	white-space: nowrap;
}
@media (max-width: 52rem) {
	.wrap {
		grid-template-columns: 1fr;
	}
	nav.toc {
		position: sticky;
		top: 3.4rem;
		z-index: 5;
		display: flex;
		gap: 0.3rem;
		max-height: none;
		margin: 0 -0.4rem;
		padding: 0.4rem;
		overflow-x: auto;
		border-radius: 12px;
		background: rgb(14 16 32 / 0.85);
		backdrop-filter: blur(12px);
	}
	nav.toc strong {
		display: none;
	}
	nav.toc a {
		flex: none;
		white-space: nowrap;
	}
	.bar {
		padding: 0.6rem 1rem;
		gap: 0.4rem;
	}
	.pill:first-of-type {
		display: none;
	}
	.btn,
	.pill {
		padding-inline: 0.65rem;
		font-size: 0.8rem;
	}
	h1 {
		font-size: 1.8rem;
	}
	section.card {
		padding: 1rem 1.05rem 1.1rem;
	}
	table {
		display: block;
		overflow-x: auto;
	}
}
@media (prefers-color-scheme: light) {
	:root {
		--bg: #f6f7ff;
		--panel: #ffffff;
		--line: #dcdff3;
		--text: #1b1e3b;
		--muted: #5b6190;
		--accent: #6d4cd6;
		--accent2: #0f8f86;
		--code: #eef0fd;
	}
	body {
		background:
			radial-gradient(900px 500px at 8% -5%, #e6defd 0%, transparent 60%),
			radial-gradient(800px 500px at 100% 20%, #d4f1ee 0%, transparent 55%),
			var(--bg);
	}
	.bar {
		background: rgb(246 247 255 / 0.8);
	}
	h1 {
		background: linear-gradient(100deg, #1b1e3b 10%, #6d4cd6 60%, #0f8f86);
		-webkit-background-clip: text;
		background-clip: text;
	}
	th {
		background: #f1f2fc;
	}
	tr:nth-child(even) td {
		background: #fafaff;
	}
	nav.toc a:hover {
		background: #eceefd;
	}
	nav.toc a.on {
		background: #e6defd;
	}
	@media (max-width: 52rem) {
		nav.toc {
			background: rgb(246 247 255 / 0.9);
		}
	}
	kbd {
		border-color: #cdd2ef;
	}
	.btn {
		color: #fff;
	}
}