/* ============================================================
   卡速售2.0 文档 · 仅补充主页 styles.css 未覆盖的文档布局
   基础重置 / 字体 / 颜色变量 / 按钮等均复用主页
   顶栏复用主页 common_header + page_toggle 双层结构
   侧边栏采用 thyuu.com 风格：毛玻璃浮岛 + 胶囊项 + 光晕指示
   ============================================================ */

:root {
	--sidebar-w: 18rem;
	--transition-fast: .15s ease;
	--transition-normal: .2s ease;
	--transition-slow: .3s ease;
	--transition-panel: .4s cubic-bezier(.5, 0, 0, 1.4);
	--transition-hover: .3s cubic-bezier(.4, 0, .2, 1);
	--shadow-card: 0 0 1em var(--color-grey-05);
	--shadow-card-hover: 0 1em 3em var(--color-grey-10);
}

/* 文档布局容器（覆盖主页 body 的 overflow:clip） */
body {
	overflow: auto;
}

/* ============================================================
   背景特效 · 与主页一致的太阳系光晕动画
   复用主页 styles.css 中 .sun-area 的基础样式
   此处仅补充文档页的定位适配
   ============================================================ */

.doc_bg-sun {
	position: fixed;
	font-size: 100vmax;
	inset: -.75em auto auto;
	color: var(--color-main-50);
	z-index: 0;
	pointer-events: none;
	animation: sun-scale 1s;
}

/* 确保所有内容在背景之上 */
.doc_progress,
.page_toggle,
.doc_layout,
.doc_toc,
.doc_backtop {
	position: relative;
	z-index: 1;
}

/* 进度条和底部导航条需要更高层级 */
.doc_progress {
	z-index: 101;
}

.page_toggle {
	z-index: 99;
}

/* 侧边栏和主内容区保持毛玻璃效果，背景光晕可透出 */
.doc_sidebar {
	z-index: 2;
}

.doc_main {
	z-index: 2;
}

/* 移动端遮罩层 */
.doc_overlay {
	z-index: 94;
}

/* 灯箱 */
.doc_lightbox {
	z-index: 200;
}

/* 文档页导航条 · 始终固定在顶部，覆盖主页的分屏滚动逻辑 */
.page_toggle {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;
	inset: 0 0 auto;
	max-width: none;
	border-radius: 0 0 var(--gap) var(--gap);
	animation: none;
	opacity: 1;
	transition: none;
}

.doc_main {
	z-index: 2;
}

/* 导航链接复用主页按钮风格 */
.page_toggle .toggle-scroll a {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: 1rem;
	background: none;
	white-space: nowrap;
	scroll-snap-align: start;
}

.page_toggle .toggle-scroll a:hover {
	color: var(--color-main-100);
}

.page_toggle .toggle-scroll a::before {
	font-size: 1.1em;
}

/* 光晕指示器（与主页 button:after 一致） */
.page_toggle .toggle-scroll a::after {
	content: "";
	position: absolute;
	inset: auto 0 -.5em;
	height: .75em;
	border-radius: 50%;
	box-shadow: 0 -1em 2em transparent, 0 1em transparent inset;
	transition: inherit;
}

.page_toggle .toggle-scroll a:hover::after {
	box-shadow: 0 -1em 2em var(--color-main-50), 0 1em var(--color-main-10) inset;
}

/* ============================================================
   阅读进度条
   ============================================================ */

.doc_progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, var(--color-main-100), hsl(var(--custom-subs-hue, 214deg) var(--custom-subs-sat, 70%) var(--custom-subs-lig, 50%)));
	z-index: 101;
	transition: width var(--transition-fast);
	border-radius: 0 2px 2px 0;
	box-shadow: 0 0 8px var(--color-main-50);
}

/* ============================================================
   布局
   ============================================================ */

.doc_layout {
	display: flex;
	align-items: flex-start;
	min-height: calc(100dvh - 4em);
	padding-top: 4em; /* 为固定顶部导航栏留出空间 */
}

/* ============================================================
   侧边栏 · thyuu.com 浮岛风格
   ============================================================ */

.doc_sidebar {
	position: fixed;
	top: 4em;
	left: 0;
	z-index: 95;
	width: var(--sidebar-w);
	max-height: calc(100dvh - 5em);
	padding: var(--gap);
	display: flex;
	flex-flow: column;
	gap: var(--gap);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	/* 毛玻璃浮岛 */
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	border-radius: 0 var(--gap) var(--gap) 0;
	box-shadow: 0 0 1em var(--color-grey-05);
	border: 1px solid var(--color-grey-05);
	/* 默认隐藏，点击按钮滑出 */
	transform: translateX(-100%);
	transition: transform var(--transition-panel);
}

.doc_sidebar.is-open {
	transform: none;
}

/* 搜索框 */
.doc_search {
	position: relative;
	display: flex;
	align-items: center;
}

.doc_search i {
	position: absolute;
	left: 1em;
	color: var(--color-grey-50);
	font-size: .9em;
	pointer-events: none;
}

.doc_search input {
	width: 100%;
	padding: .7em 1em .7em 2.8em;
	font-size: .875em;
	color: inherit;
	background: var(--color-grey-05);
	border-radius: 2em;
	transition: var(--transition-hover);
	border: 1px solid transparent;
}

.doc_search input:focus {
	background: var(--bgc);
	border-color: var(--color-main-50);
	box-shadow: 0 0 0 3px var(--color-main-10);
}

.doc_search input::placeholder {
	color: var(--color-grey-50);
}

/* ============================================================
   导航树 · 胶囊分组 + 光晕指示
   ============================================================ */

.doc_nav {
	display: flex;
	flex-flow: column;
	gap: .5em;
}

/* 顶层分组 — 胶囊容器 */
.doc_nav > .doc_nav-group {
	border-radius: var(--gap);
	overflow: hidden;
}

/* 分组标题项 */
.doc_nav-item {
	display: flex;
	align-items: center;
	gap: .5em;
	padding: .6em 1em;
	font-size: .875em;
	color: var(--color-grey-50);
	border-radius: calc(var(--gap) / 2);
	transition: var(--transition-hover);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	font-weight: 300;
	letter-spacing: .02em;
}

/* 活跃项底部光晕指示器（与 thyuu page_toggle 一致） */
.doc_nav-item.is-active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 20%;
	right: 20%;
	height: .6em;
	border-radius: 50%;
	box-shadow: 0 -1em 1.5em var(--color-main-50), 0 .5em var(--color-main-10) inset;
	pointer-events: none;
}

/* 顶层分组标题样式 */
.doc_nav > .doc_nav-group > .doc_nav-item {
	font-size: .8em;
	font-weight: 500;
	color: var(--color-grey-30);
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: .8em 1em .4em;
}

.doc_nav > .doc_nav-group > .doc_nav-item:hover {
	color: var(--color-grey-50);
	background: none;
}

/* 涟漪效果 */
.doc_nav-item .ripple {
	position: absolute;
	border-radius: 50%;
	background: var(--color-main-10);
	transform: scale(0);
	animation: rippleAnim var(--transition-slow);
	pointer-events: none;
}

@keyframes rippleAnim {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

.doc_nav-item:hover {
	color: var(--color-main-100);
	background: var(--color-main-10);
}

.doc-nav-icon {
	flex: 0 0 auto;
	font-style: normal;
	font-size: 1.15em;
}

.doc-nav-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 搜索高亮 */
.doc-nav-label mark {
	background: var(--color-main-10);
	color: var(--color-main-100);
	border-radius: 2px;
	padding: 0 2px;
	font-style: normal;
}

/* 展开箭头 */
.doc-nav-toggle {
	flex: 0 0 auto;
	font-size: .65em;
	color: var(--color-grey-30);
	transition: transform var(--transition-hover);
	padding: .2em;
	border-radius: 50%;
}

.doc_nav-item:hover .doc-nav-toggle {
	color: var(--color-main-50);
}

/* 活跃项 */
.doc_nav-item.is-active {
	color: var(--color-main-100);
	background: var(--color-main-10);
	font-weight: 500;
}

/* 父级路径项 */
.doc_nav-item.is-parent {
	color: var(--color-main-100);
}

/* 子项容器 — 缩进式 */
.doc_nav-children {
	display: flex;
	flex-flow: column;
	gap: .05em;
	padding-left: 1.2em;
	margin-left: .8em;
	border-left: 1.5px solid var(--color-grey-05);
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--transition-panel);
}

.doc_nav-group.is-open > .doc_nav-children {
	max-height: 100em;
}

.doc_nav-group.is-open > .doc_nav-item .doc-nav-toggle {
	transform: rotate(90deg);
}

.doc_nav-item[hidden] {
	display: none;
}

/* ============================================================
   主内容区
   ============================================================ */

.doc_main {
	flex: 1;
	min-width: 0;
	padding: 1em clamp(1em, 5vw, 4rem) 5rem;
	scrollbar-width: thin;
}

.doc_content {
	max-width: 50em;
	margin: 0 auto;
}

/* ============================================================
   面包屑导航
   ============================================================ */

.doc_breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3em;
	margin-bottom: 1em;
	font-size: .8em;
	color: var(--color-grey-50);
}

.doc_breadcrumb a {
	color: var(--color-grey-50);
	border-bottom: none;
	transition: var(--transition-normal);
	padding: .2em .4em;
	border-radius: .3em;
}

.doc_breadcrumb a:hover {
	color: var(--color-main-100);
	background: var(--color-main-10);
}

.doc_breadcrumb .is-current {
	color: var(--color-main-100);
	font-weight: 500;
}

.doc_breadcrumb-sep {
	font-size: .6em;
	opacity: .4;
}

/* ============================================================
   搜索无结果提示
   ============================================================ */

.doc_nav-empty {
	padding: 1.5em 1em;
	text-align: center;
	font-size: .8em;
	color: var(--color-grey-50);
}

.doc_nav-empty::before {
	content: "🔍";
	display: block;
	font-size: 2em;
	margin-bottom: .5em;
	opacity: .4;
}

/* 页面切换动画 — 内容元素交错入场 */
.doc_content.is-entering > * {
	animation: docStaggerIn var(--transition-slow) both;
}

.doc_content.is-entering > *:nth-child(1)  { animation-delay: 0s; }
.doc_content.is-entering > *:nth-child(2)  { animation-delay: .04s; }
.doc_content.is-entering > *:nth-child(3)  { animation-delay: .08s; }
.doc_content.is-entering > *:nth-child(4)  { animation-delay: .12s; }
.doc_content.is-entering > *:nth-child(5)  { animation-delay: .14s; }
.doc_content.is-entering > *:nth-child(6)  { animation-delay: .16s; }
.doc_content.is-entering > *:nth-child(7)  { animation-delay: .18s; }
.doc_content.is-entering > *:nth-child(8)  { animation-delay: .2s; }
.doc_content.is-entering > *:nth-child(n+9) { animation-delay: .22s; }

@keyframes docStaggerIn {
	from {
		opacity: 0;
		transform: translateY(.6em);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* h1 入场单独加长动画 */
.doc_content.is-entering > h1:first-child {
	animation: docH1In var(--transition-slow) both;
}

@keyframes docH1In {
	from {
		opacity: 0;
		transform: translateY(.8em);
		letter-spacing: .08em;
	}
	to {
		opacity: 1;
		transform: none;
		letter-spacing: .02em;
	}
}

/* ============================================================
   文档内容 · 排版系统（对齐主页设计语言）
   ============================================================ */

/* --- 标题层级 --- */

.doc_content h1 {
	font-family: "FontQu Smile 常规", 'MiSans VF', sans-serif;
	font-weight: 100;
	font-size: clamp(2em, 5vw, 2.8em);
	margin: 0 0 .6em;
	line-height: 1.25;
	letter-spacing: .02em;
	color: var(--color-main-100);
	text-wrap: balance;
}

.doc_content h2 {
	font-family: "FontQu Smile 常规", 'MiSans VF', sans-serif;
	font-weight: 100;
	font-size: clamp(1.5em, 3vw, 2em);
	margin: 2em 0 .7em;
	line-height: 1.3;
	color: hsl(var(--hue) var(--sat) var(--lig) / .85);
	scroll-margin-top: 5em;
	position: relative;
	padding-bottom: .5em;
}

.doc_content h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2.5em;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--color-main-100), transparent);
	opacity: .5;
}

.doc_content h3 {
	font-weight: 500;
	font-size: 1.3em;
	margin: 1.6em 0 .6em;
	line-height: 1.5;
	color: hsl(0deg 0% 25%);
	scroll-margin-top: 5em;
	position: relative;
	padding-left: .8em;
}

.doc_content h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 4px;
	height: calc(1em - .1em);
	border-radius: 2px;
	background: var(--color-main-100);
	opacity: .6;
}

.doc_content h4 {
	font-weight: 500;
	font-size: 1.1em;
	margin: 1.4em 0 .5em;
	line-height: 1.5;
	color: hsl(0deg 0% 30%);
	scroll-margin-top: 5em;
}

.doc_content h5 {
	font-size: 1em;
	font-weight: 500;
	margin: 1.2em 0 .4em;
	color: var(--color-grey-50);
}

.doc_content h6 {
	font-size: .875em;
	font-weight: 500;
	margin: 1em 0 .3em;
	color: var(--color-grey-50);
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* --- 段落 --- */

.doc_content p {
	margin: .8em 0;
	line-height: 2;
	font-weight: 300;
	color: hsl(0deg 0% 30%);
	text-autospace: ideograph-alpha;
}

/* --- 列表 --- */

.doc_content ul,
.doc_content ol {
	margin: .8em 0;
	padding-left: 1.5em;
}

.doc_content ul li,
.doc_content ol li {
	margin: .35em 0;
	line-height: 1.9;
	font-weight: 300;
	color: hsl(0deg 0% 30%);
}

.doc_content ul li {
	list-style: none;
	position: relative;
	padding-left: .2em;
}

.doc_content ul li::before {
	content: "";
	position: absolute;
	left: -1em;
	top: .75em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-main-100);
	opacity: .6;
}

.doc_content ol li {
	list-style: none;
	counter-increment: doc-ol;
	position: relative;
	padding-left: .4em;
}

.doc_content ol {
	counter-reset: doc-ol;
}

.doc_content ol li::before {
	content: counter(doc-ol);
	position: absolute;
	left: -1.6em;
	top: .2em;
	width: 1.4em;
	height: 1.4em;
	line-height: 1.4em;
	text-align: center;
	font-size: .7em;
	font-weight: 500;
	color: var(--color-main-100);
	background: var(--color-main-10);
	border-radius: 50%;
}

/* --- 链接 --- */

.doc_content a {
	color: var(--color-main-100);
	border-bottom: 1px solid var(--color-main-50);
	transition: var(--transition-hover);
}

.doc_content a:hover {
	opacity: .8;
}

/* 代码块内链接不使用下划线 */
.doc_content pre a {
	color: inherit;
	border-bottom: none;
}

.doc_content pre a:hover {
	opacity: .8;
}

/* --- 图片 --- */

.doc_content img {
	display: block;
	margin: 1.5em auto;
	max-width: 100%;
	border-radius: var(--gap);
	box-shadow: 0 0 1em var(--color-grey-05);
	border: 1px solid var(--color-grey-05);
	cursor: zoom-in;
	transition: transform var(--transition-panel), box-shadow var(--transition-panel);
}

.doc_content img:hover {
	box-shadow: 0 .5em 2em var(--color-grey-10);
	transform: translateY(-3px);
}

/* --- 分隔线 --- */

.doc_content hr {
	border: none;
	height: 1px;
	margin: 2.5em 0;
	background: linear-gradient(90deg, transparent, var(--color-grey-10), transparent);
}

/* --- 引用块 --- */

.doc_content blockquote {
	margin: 1.2em 0;
	padding: 1em 1.5em;
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	border-radius: calc(var(--gap) / 2);
	border-left: 4px solid var(--color-main-100);
	box-shadow: 0 0 1em var(--color-grey-05);
	font-size: .95em;
	color: hsl(0deg 0% 35%);
}

.doc_content blockquote p {
	margin: .3em 0;
}

/* --- 表格 --- */

.doc_content table {
	margin: 1em 0;
	font-size: .875em;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--gap);
	overflow: hidden;
	border: 1px solid var(--color-grey-05);
	box-shadow: 0 0 1em var(--color-grey-05);
}

.doc_content table th,
.doc_content table td {
	padding: .75em 1em;
	border-bottom: 1px solid var(--color-grey-05);
	text-align: left;
	font-weight: 300;
	transition: var(--transition-hover);
}

.doc_content table thead th {
	font-weight: 600;
	color: var(--color-main-100);
	background: var(--color-main-10);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 2px solid var(--color-main-50);
	position: sticky;
	top: 5em;
	z-index: 2;
}

.doc_content table thead th:first-child {
	border-top-left-radius: var(--gap);
}

.doc_content table thead th:last-child {
	border-top-right-radius: var(--gap);
}

.doc_content table tbody tr:hover td {
	background: var(--color-main-10);
}

.doc_content table tbody tr:last-child td {
	border-bottom: none;
}

.doc_content table tbody tr:last-child td:first-child {
	border-bottom-left-radius: var(--gap);
}

.doc_content table tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--gap);
}

/* --- 代码块 --- */

.doc_content pre {
	margin: 1.2em 0;
	padding: var(--gap);
	background: hsl(220deg 20% 12%);
	color: hsl(0deg 0% 88%);
	border-radius: var(--gap);
	overflow-x: auto;
	font-size: .85em;
	line-height: 1.75;
	position: relative;
	border: 1px solid hsl(0deg 0% 0% / .08);
	box-shadow: 0 .5em 2em hsl(0deg 0% 0% / .08);
}

.doc_content pre code {
	font-family: 'Monaco', 'Consolas', 'MiSans VF', monospace;
	white-space: pre;
	padding: 0;
	background: none;
	color: inherit;
}

/* 复制按钮 */
.doc_pre-copy {
	position: absolute;
	top: .7em;
	right: .7em;
	padding: .45em .9em;
	font-size: .78em;
	color: hsl(0deg 0% 55%);
	background: hsl(220deg 20% 18%);
	border-radius: .5em;
	cursor: pointer;
	opacity: 0;
	transition: var(--transition-hover);
	border: 1px solid hsl(0deg 0% 0% / .1);
	line-height: 1;
}

.doc_content pre:hover .doc_pre-copy {
	opacity: 1;
}

.doc_pre-copy:hover {
	color: #fff;
	background: hsl(220deg 20% 25%);
	border-color: hsl(0deg 0% 0% / .15);
}

.doc_pre-copy.is-copied {
	color: #4ade80;
	border-color: hsl(140deg 50% 40% / .3);
}

/* 行号 */
.doc_content pre.is-linenums {
	padding-left: 3.5em;
	counter-reset: line;
}

.doc_content pre.is-linenums code {
	display: flex;
	flex-flow: column;
}

.doc_content pre.is-linenums .doc-line {
	counter-increment: line;
	display: flex;
}

.doc_content pre.is-linenums .doc-line::before {
	content: counter(line);
	display: inline-block;
	width: 2.5em;
	margin-right: 1em;
	text-align: right;
	color: hsl(0deg 0% 30%);
	flex-shrink: 0;
	user-select: none;
}

/* 行内代码 */
.doc_content code {
	font-family: 'Monaco', 'Consolas', 'MiSans VF', monospace;
	font-size: .88em;
	padding: .15em .55em;
	background: var(--color-main-10);
	color: var(--color-main-100);
	border-radius: .4em;
	transition: var(--transition-hover);
}

/* --- 空状态 --- */

.doc-empty {
	padding: 3em var(--gap);
	text-align: center;
	color: var(--color-grey-50);
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	border-radius: var(--gap);
	box-shadow: 0 0 1em var(--color-grey-05);
	border: 1px solid var(--color-grey-05);
}

/* ============================================================
   图片灯箱
   ============================================================ */

.doc_lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: hsl(0deg 0% 0% / .85);
	-webkit-backdrop-filter: blur(1em);
	backdrop-filter: blur(1em);
	opacity: 0;
	pointer-events: none;
	transition: var(--transition-hover);
	cursor: zoom-out;
}

.doc_lightbox.is-show {
	opacity: 1;
	pointer-events: auto;
}

.doc_lightbox img {
	max-width: 90vw;
	max-height: 90vh;
	border-radius: var(--gap);
	box-shadow: 0 0 3em hsl(0deg 0% 0% / .5);
	transform: scale(.9);
	transition: var(--transition-panel);
}

.doc_lightbox.is-show img {
	transform: none;
}

.doc_lightbox-close {
	position: absolute;
	top: 1.5em;
	right: 1.5em;
	font-size: 1.5em;
	color: hsl(0deg 0% 80%);
	cursor: pointer;
	transition: var(--transition-hover);
	background: none;
	border: none;
	padding: .5em;
}

.doc_lightbox-close:hover {
	color: #fff;
	transform: rotate(90deg);
}

/* ============================================================
   目录浮窗 · hover 触发展开
   ============================================================ */

.doc_toc {
	position: fixed;
	top: 6em;
	right: 1.5em;
	z-index: 80;
	max-height: calc(100dvh - 8em);
	overflow-y: auto;
	scrollbar-width: none;
	font-size: .8em;
	color: var(--color-grey-50);
	pointer-events: none;
	/* 默认只显示触发标签 */
	width: auto;
	padding: .6em 1em;
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	border-radius: var(--gap);
	box-shadow: 0 0 1em var(--color-grey-05);
	border: 1px solid var(--color-grey-05);
	opacity: 0;
	transform: translateX(.5em);
	transition: var(--transition-panel);
}

.doc_toc::-webkit-scrollbar {
	display: none;
}

.doc_toc.is-show {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* hover 时展开完整目录 */
.doc_toc.is-show:hover {
	width: 14em;
	padding: var(--gap);
}

.doc_toc-title {
	font-weight: 500;
	margin-bottom: 0;
	color: hsl(0deg 0% 30%);
	font-size: .9em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.doc_toc.is-show:hover .doc_toc-title {
	margin-bottom: .6em;
}

/* 目录链接默认隐藏 */
.doc_toc a {
	display: none;
	padding: .3em .6em .3em 1.2em;
	color: var(--color-grey-50);
	transition: var(--transition-normal);
	border-radius: .4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	position: relative;
}

/* 圆点指示器 */
.doc_toc a::before {
	content: "";
	position: absolute;
	left: .3em;
	top: 50%;
	width: .35em;
	height: .35em;
	border-radius: 50%;
	background: var(--color-grey-20);
	transform: translateY(-50%);
	transition: var(--transition-normal);
}

/* hover 时显示链接 */
.doc_toc.is-show:hover a {
	display: block;
}

.doc_toc a:hover,
.doc_toc a.is-active {
	color: var(--color-main-100);
}

.doc_toc a:hover::before,
.doc_toc a.is-active::before {
	background: var(--color-main-100);
	box-shadow: 0 0 .4em var(--color-main-50);
}

/* ============================================================
   分页导航
   ============================================================ */

.doc_pager {
	display: flex;
	justify-content: space-between;
	gap: var(--gap);
	max-width: 50em;
	margin: 3em auto 0;
}

.doc_pager a {
	display: flex;
	flex-flow: column;
	gap: .3em;
	padding: 1.2em 1.5em;
	border-radius: var(--gap);
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	box-shadow: 0 0 1em var(--color-grey-05);
	border: 1px solid var(--color-grey-05);
	transition: var(--transition-panel);
	max-width: 48%;
	color: var(--color-grey-50);
}

.doc_pager a:hover {
	color: var(--color-main-100);
	border-color: var(--color-main-50);
	box-shadow: 0 0 1.5em var(--color-main-10), 0 .5em 2em var(--color-grey-05);
	transform: translateY(-3px);
}

.doc_pager a:only-child {
	margin: 0 auto;
}

.doc-pager-label {
	font-size: .75em;
	color: var(--color-grey-50);
}

.doc-pager-title {
	font-size: .95em;
	font-weight: 500;
}

.doc_pager .is-next {
	margin-left: auto;
	text-align: right;
}

/* ============================================================
   页脚
   ============================================================ */

.doc_footer {
	max-width: 50em;
	margin: 3em auto 0;
	padding: 2em 0;
	text-align: center;
	font-size: .8em;
	color: var(--color-grey-50);
	border-top: 1px solid var(--color-grey-05);
}

.doc_footer a {
	color: var(--color-main-100);
}

/* ============================================================
   回到顶部
   ============================================================ */

.doc_backtop {
	position: fixed;
	right: 2em;
	bottom: 2em;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3em;
	height: 3em;
	font-size: 1.2em;
	color: var(--color-grey-50);
	background: var(--color-silv-50);
	-webkit-backdrop-filter: blur(1em) saturate(2);
	backdrop-filter: blur(1em) saturate(2);
	border-radius: 50%;
	box-shadow: 0 0 1em var(--color-grey-10);
	border: 1px solid var(--color-grey-05);
	opacity: 0;
	transform: translateY(1em);
	pointer-events: none;
	transition: var(--transition-panel);
}

.doc_backtop.is-show {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.doc_backtop:hover {
	color: var(--color-main-100);
	box-shadow: 0 0 1.5em var(--color-main-10);
}

/* ============================================================
   移动端遮罩层
   ============================================================ */

.doc_overlay {
	position: fixed;
	inset: 0;
	z-index: 94;
	background: hsl(0deg 0% 0% / .4);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: var(--transition-panel);
}

.doc_overlay.is-show {
	opacity: 1;
	pointer-events: auto;
}

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 900px) {
	.doc_layout {
		flex-flow: column;
		padding-top: 4em;
	}

	.doc_sidebar {
		width: min(var(--sidebar-w), 85vw);
		max-height: calc(100dvh - 4em);
	}

	.doc_main {
		padding: var(--gap) 1rem;
		width: 100%;
	}

	.doc_toc {
		display: none;
	}
}

@media (max-width: 500px) {
	.common_header .logo {
		font-size: 1em;
	}

	.doc_content h1 {
		font-size: 1.8em;
	}

	.doc_content h2 {
		font-size: 1.4em;
	}

	.doc_content h3 {
		font-size: 1.15em;
	}

	.doc_content blockquote {
		padding: .8em 1em;
		margin: 1em -1em;
		border-radius: calc(var(--gap) / 2);
	}

	.doc_content table {
		font-size: .78em;
	}

	.doc_content pre {
		font-size: .78em;
		padding: 1em;
		border-radius: calc(var(--gap) / 2);
	}

	.doc_pager {
		flex-flow: column;
	}

	.doc_pager a {
		max-width: 100%;
	}

	.doc_pager .is-next {
		text-align: left;
	}
}

@media (min-width: 1400px) {
	.doc_toc {
		right: max(1.5em, calc((100vw - 50em - var(--sidebar-w)) / 2 - 12em));
	}
}