#vanta-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	min-height: 100vh;
}

/* ! __________  ! P A G E . L A Y O U T */

.wrap {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	max-width: 660px;
	margin: 40px auto 40px auto;
}

.wrap_row {
	flex-direction: row;
}

.wrap_column {
	flex-direction: column;
}

/* ! _ */

.inner {
	display: flex;
	width: 100%;
}

.inner_start {
	align-items: stretch;
	justify-items: stretch;
}

.inner_row {
	flex-direction: row;
}

.inner_column {
	flex-direction: column;
}

.inner_center {
	align-items: center;
}

/* ! __________  ! P R I M A R Y . N A V */

.primary-nav {
	position: fixed;
	z-index: 99;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	max-width: 220px;
	min-width: 190px;

	gap: 6px;
	padding: 6px;
	border-radius: 16px;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.02),
			rgba(255, 255, 255, 0.004)
		),
		rgba(6, 6, 6, 0.68);

	backdrop-filter: blur(18px) saturate(120%);
	-webkit-backdrop-filter: blur(18px) saturate(120%);

	border-right: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		20px 0 48px -26px rgba(0, 0, 0, 0.95);
}

.primary-nav > a.current-page {
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.10),
			rgba(255, 255, 255, 0.03)
		),
		rgba(0, 0, 0, 0.22);

		border-color: color-mix(in srgb, var(--c_green-1) 65%, rgba(255, 255, 255, 0.10));
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.12) inset,
			0 0 0 1px color-mix(in srgb, var(--c_green-1) 28%, transparent) inset,
			0 10px 22px -18px rgba(0, 0, 0, 0.85);

		color: var(--c_green-1);
		font-weight: 700;
		cursor: vertical-text;
}

/* ! __________  ! B U T T O N S */

.button {
	display: flex;
	padding: 9px 12px;
	justify-content: center;
	align-items: center;
	width: 100%;
	border-radius: 33px;
	border: 1px solid var(--c_grey-8);
	background: var(--c_grey-7);
	color: var(--c_grey-3);
	text-align: center;
	font-size: 12px;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.06),
			rgba(255, 255, 255, 0.015)
		),
		rgba(0, 0, 0, 0.18);

	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.10) inset,
		0 10px 22px -18px rgba(0, 0, 0, 0.85);

	color: rgba(255, 255, 255, 0.70);
	transition:
		background 140ms ease-out,
		border-color 140ms ease-out,
		color 120ms ease-out,
		box-shadow 160ms ease-out;
}

.button:hover {
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.10),
			rgba(255, 255, 255, 0.03)
		),
		rgba(0, 0, 0, 0.22);

	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.90);
}

/* ! __________  ! M D . W R A P */

.doc-content_title {
	margin: 0 0 14px 0;
	padding: 0 2px;

	color: rgba(255, 255, 255, 0.92);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.2px;

	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06),
		0 18px 44px rgba(0, 0, 0, 0.65);
}

.md {
	width: 100%;
	padding: 18px 18px;

	border-radius: 18px;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.035),
			rgba(255, 255, 255, 0.008)
		),
		rgba(6, 6, 6, 0.62);

	backdrop-filter: blur(18px) saturate(120%);
	-webkit-backdrop-filter: blur(18px) saturate(120%);

	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 24px 80px -46px rgba(0, 0, 0, 0.95);

	color: rgba(255, 255, 255, 0.78);
}

/* ! __________  ! M A R K D O W N */

.md :where(h1, h2, h3, h4, h5, h6) {
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.2;
	letter-spacing: 0.2px;
	margin: 18px 0 10px 0;
}

.md h1 {
	font-size: 24px;
	font-weight: 600;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.md h2 {
	font-size: 18px;
	font-weight: 600;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.md h3 {
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.86);
}

.md h4 {
	font-size: 13px;
	font-weight: 760;
	color: rgba(255, 255, 255, 0.82);
}

.md :where(p, blockquote, pre, ul, ol, table) {
	margin: 12px 0;
}

.md p {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
}

.md :where(strong, b) {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 600;
}

.md :where(em, i) {
	color: rgba(255, 255, 255, 0.78);
	font-style: italic;
}

.md a {
	color: var(--c_green-1);
	text-decoration: none;
	border-bottom: 1px solid rgba(51, 177, 144, 0.35);
}

.md a:hover {
	border-bottom-color: rgba(51, 177, 144, 0.65);
	text-decoration: none;
}

.md hr {
	height: 1px;
	margin: 18px 0;
	background: rgba(255, 255, 255, 0.10);
}

.md :where(ul, ol) {
	list-style: revert;
	list-style-position: outside;

	display: block;
	gap: 0;

	padding: 0 0 0 18px;
	margin: 12px 0;

	color: rgba(255, 255, 255, 0.78);
}

.md :where(ul > li, ol > li) {
	display: list-item;
	font-size: 14px;
	line-height: 1.7;
	margin: 6px 0;
}

.md :where(ul > li::before, ol > li::before) {
	content: none;
}

.md blockquote {
	padding: 12px 12px 12px 14px;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.02),
			rgba(255, 255, 255, 0.004)
		),
		rgba(0, 0, 0, 0.38);

	border-radius: 14px;

	color: rgba(255, 255, 255, 0.74);
}

.md code {
	font-family: "JetBrains Mono";
	font-size: 0.95em;
	padding: 2px 6px;
	border-radius: 8px;

	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.86);

	white-space: normal;
}

.md pre {
	padding: 14px;
	border-radius: 16px;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.02),
			rgba(255, 255, 255, 0.006)
		),
		rgba(0, 0, 0, 0.40);

	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05) inset,
		0 16px 44px -34px rgba(0, 0, 0, 0.95);

	overflow: auto;
}

.md pre code {
	display: block;
	padding: 0;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.80);
	white-space: pre;
	tab-size: 4;
}

.md table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;

	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.02),
			rgba(255, 255, 255, 0.006)
		),
		rgba(0, 0, 0, 0.28);
}

.md th,
.md td {
	padding: 10px 10px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.md th {
	color: rgba(255, 255, 255, 0.88);
	font-weight: 600;
	background: rgba(255, 255, 255, 0.03);
}

.md tr:last-child td {
	border-bottom: none;
}

.md img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 18px 48px -34px rgba(0, 0, 0, 0.95);
}

.md > :first-child {
	margin-top: 0;
}

.md > :last-child {
	margin-bottom: 0;
}