@charset "utf-8";

/**
 * site-components.css - 网站基础组件样式集合  
 * 包含：
 * - 颜色变量系统（2025-06添加）
 *   - 主色/辅助色定义
 *   - 中性色阶定义
 *   - 系统状态色定义

 * - 导航系统（2025-06添加）
 *   - 固定定位头部栏
 *   - 下拉菜单组件
 *   - 主页动画效果
 *   - 返回顶部美化

 * - 幻灯片组件系统（2025-06-11添加）
 *   - 轮播图容器
 *   - 导航箭头与指示点
 *   - 文章卡片叠加效果
 
 * - 动画控制（2025-06-12添加）
 *   - 淡入动画控制
 
 * - 首页文章列表系统（2025-06-13添加）
 *   - 主内容区网格布局
 *   - 文章卡片图文排版
 *   - 文章加载更多样式
 
 * - 动态评论系统（2025-06-13添加）
 *   - 时间线布局
 *   - 评论层级结构
 *   - 回复表单交互
 
 * - 侧边栏组件系统（2025-06-14更新）
 *   - 粘性定位容器
 *   - 作者信息卡片
 *   - 搜索框交互
 *   - 最新评论美化
 
 * - 分类文章模块（2025-06-14添加）
 *   - 响应式网格布局
 *   - 卡片式文章展示
 *   - 分类标题区域
 *   - 移动端横向滚动
 
 * - 链接特效系统（2025-06-15添加）
 *   - 下划线动画效果
 *   - 颜色过渡交互
 *   - 懒加载动画效果
 
 *- 文章页美化系统（2025-06-16添加）
 *   - 全屏封面图懒加载
 *   - 标题区域磨砂效果
 *   - 响应式内容布局
 *   - 元数据交互优化
 
 * - 评论组件系统（2025-06-17更新）
 *   - 表单交互系统
 *   - 视差滚动动画
 *   - 多级回复结构
 *   - 分页控制组件
 *   - 空状态UI设计
 
 * - 首页动态流样式（2025-06-18添加）
 *   - 卡片式消息容器
 *   - 响应式元数据展示
 *   - 图标交互效果
 *   - 移动端布局优化
 
 * - 文章页动态样式（2025-06-18添加）
 *   - 标题区域毛玻璃效果
 *   - 响应式信息栏
 *   - 移动端布局优化
 
  * - 动态页面布局（2025-06-18添加）
 *   - 固定背景图片效果
 *   - 毛玻璃内容面板
 *   - 面包屑导航样式
 *   - 响应式布局转换
 
 * - 页脚组件系统（2025-06-19添加）
 *   - 非对称设计布局
 *   - 记忆天数统计
 *   - 友链网格展示
 *   - 底部版权信息
 *   - 响应式适配优化
 
 * - 相册分类组件（2025-06-21添加）
 *   - 卡片悬停动画
 *   - 模糊渐变遮罩层
 *   - 元数据动态显示
 *   - 响应式高度控制
 
 * - 分类页默认样式（2025-06-22添加）
 *   - 网格布局系统
 *   - 图片遮罩效果
 *   - 日期标记定位
 *   - 内容渐变过渡
 
 * - 友链页面样式（2025-06-22添加）
 *   - 双栏响应式布局
 *   - 友链卡片设计
 *   - 头像展示优化
 *   - 悬停交互效果
 
 * - 友链页面样式（2025-06-23更新）
 *   - 双栏响应式布局
 *   - 友链卡片设计
 *   - 头像展示优化
 *   - 悬停交互效果
 *   - 描述文本样式
 
 * - 文章内容美化（2025-06-24更新）
 *   - 表格样式优化
 *   - 多媒体嵌入效果
 *   - 代码块高亮样式
 *   - 排版元素增强
 *   - 交互状态动画
 
 
 
 */
:root {
	/* 核心主色 - 科技蓝（可调整饱和度/明度） */
	--color-primary: 215 80% 60%;
	--color-primary-light: 215 80% 75%;
	--color-primary-dark: 215 80% 45%;
	/* 辅助色 - 活力橙 */
	--color-secondary: 25 85% 60%;
	--color-secondary-light: 25 85% 75%;
	--color-secondary-dark: 25 85% 45%;
	/* 中性色 - 阶梯灰度 */
	--color-gray-100: 0 0% 98%;
	--color-gray-200: 0 0% 90%;
	--color-gray-300: 0 0% 80%;
	--color-gray-400: 0 0% 60%;
	--color-gray-500: 0 0% 50%;
	--color-gray-600: 0 0% 40%;
	--color-gray-700: 0 0% 30%;
	--color-gray-800: 0 0% 20%;
	--color-gray-900: 0 0% 10%;
	/* 系统色 - 状态反馈 */
	--color-success: 145 70% 50%;
	--color-warning: 45 90% 55%;
	--color-danger: 5 85% 55%;
	--color-info: 190 80% 50%;
	/* 背景色*/
	--bg-base: 215 0% 98%;
	--bg-darker: 215 0% 96%;
	--nav-height: 4rem;
}

/* 同用 */
.fixed {
	--nav-height: 3rem;
}

.line-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--line-clamp, 1);
	text-overflow: ellipsis;
	overflow: hidden;
}

/* 主导航栏样式 */
.site-header {
	position: relative;
	border-radius: 0;
	inset: 0;
	gap: 3rem;
	padding-inline: 1rem;
	height: var(--nav-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: hsl(var(--bg-darker));
	z-index: 1000;
	/* 确保高于其他元素 */
	transition: height .5s, inset .35s;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.fixed .site-header {
	position: fixed;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 导航项基础样式 */
@media (width >=1025px) {
	.main-navigation {
		display: flex;
		align-items: center;
		flex: 1;
		min-width: 0;
		/* 防止内容溢出 */
	}

	.nav-item {
		position: relative;
		list-style: none;
	}

	.nav-link {
		display: inline-block;
		color: hsl(var(--color-gray-900) / 1);
		text-decoration: none;
		font-size: 16px;
		transition: color 0.3s ease;
	}

	.nav-link:hover {
		color: hsl(var(--color-primary) / 1);
	}

	.dropdown-container {
		display: flex;
	}

	/* 下拉菜单容器 */
	.dropdown-menu {
		display: flex;
		margin-left: auto;
	}

	/* 下拉触发器 */
	.dropdown-toggle {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		background: transparent;
		border: none;
		color: #333;
		font-size: 16px;
		cursor: pointer;
		transition: color 0.3s ease;
	}

	.dropdown-toggle:hover {
		color: #0066cc;
	}

	/* 下拉菜单内容 - 初始隐藏状态 */
	.dropdown-parent>.widget-list,
	#nav-menu {
		position: absolute;
		top: 100%;
		left: 0;
		margin: 0;
		opacity: 0;
		z-index: 30;
		display: grid;
		align-items: start;
		transition: 0.5s;
		min-width: 20rem;
		max-height: calc(100vh - var(--nav-height) - 2rem);
		color: hsl(var(--color-gray-600));
		border-radius: 6px;
		overflow: clip auto;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-10px);
		transform-origin: top left;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		background-color: hsl(var(--bg-base) / 95%);
		outline: 1px solid hsl(var(--color-primary) / .05);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
	}

	.dropdown-parent>.widget-list:hover,
	#nav-menu:hover {
		outline: 1px solid hsl(var(--color-primary) / .5);
		transform: translateY(-3px);
		box-shadow: 0 7px 15px 0 hsl(var(--color-primary) / .1);
	}
}

/* 下拉菜单项 */
.category-level-0 {
	list-style: none;
	margin: .5rem;
	border-radius: 6px;
}

.category-level-0 a {
	display: block;
	padding: .5rem 1rem;
	border-radius: 3px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.category-level-0 a:hover {
	background-color: hsl(var(--color-primary) / .05);
	color: hsl(var(--color-primary) / .8);
}

/* 悬停时显示下拉菜单 */
.nav-item:hover .widget-list,
.nav-item:hover #nav-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* 二级菜单 */
.dropdown-parent>.widget-list .widget-list {
	display: grid;
	align-items: start;
	grid: auto / repeat(auto-fill, minmax(min(18rem / 2 - 1rem, 100%), 1fr));
}

.dropdown-parent>.widget-list li {
	transition: 0.3s;
	border-radius: 6px;
}

.dropdown-parent>.widget-list li:hover {
	background: hsl(var(--color-primary) / .05);
}

.header-title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	white-space: nowrap;
}

.header_logo {
	display: flex;
	color: hsl(var(--color-gray-900) / 1);
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	line-height: 2;
	font-size: 1.2rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.3s all;
}

.header_logo .content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	transition: opacity 0.25s;
}

.header_logo i {
	color: hsl(var(--color-gray-900) / 1);
	position: absolute;
	opacity: 0;
	line-height: 1;
	font-size: 26px;
	transition: opacity 0.35s all;
}

.header_logo:hover {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	background: hsl(var(--bg-base) / 50%);
}

.header_logo:hover i {
	opacity: 1;
}

.header_logo:hover .content {
	opacity: 0;
}

.site-header .header-tools {
	display: flex;
	align-items: center;
}

.site-header .header-tools button {
	border: 0;
	background: none;
	margin-right: 1rem;
}

.site-header .header-tools .back-to-top {
	display: none;
}

.site-header .header-tools .back-to-top i {
	font-size: 1.6em;
}

.site-header .header-tools .theme-icon i {
	font-size: 1.5em;
}

.site-header .header-tools .gengduo,
.site-header .header-tools .compass,
.site-header .header-tools .zhuye {
	display: none;
}

.site-header .header-tools .gengduo i {
	font-size: 1.5em;
}

.site-header .header-tools .compass i {
	font-size: 1.3em;
}

.site-header .header-tools .zhuye i {
	font-size: 1.4em;
}

.site-header .header-tools .post-top-tools i.icon-icon-pinglun {
	font-size: 1.6em;
	color: hsl(var(--color-gray-700) / 1);
}

.site-header .header-tools .post-top-tools a[href="#comment"] {
	position: relative;
}

.site-header .header-tools .post-top-tools a[href="#comment"] span {
	position: absolute;
	inset: 0;
	font-size: .6em;
	line-height: 1;
}

@media (width <=1025px) {
	.fixed .site-header {
		inset: auto 0 0 0 !important;
	}

	.site-header .header-tools .gengduo,
	.site-header .header-tools .compass,
	.site-header .header-tools .zhuye {
		display: block;
	}

	body .single-list {
		margin-top: calc(var(--nav-height) + 1rem);
		margin-right: 1rem;
		margin-left: 1rem;
		margin-bottom: 1rem;
	}

	body .single-list,
	body .slick-track,
	body .slick-slide,
	body .single-item figure img {
		max-height: 60vh;
		min-height: 55vh;
	}

	body .index-main,
	body .index-category {
		padding: 1rem;
	}

	.header-title {
		display: none;
	}

	.main-navigation {
		display: flex;
		flex-flow: column;
		position: fixed;
		inset: 0 0 auto 0;
		padding: calc(var(--nav-height) + 1rem) .5rem .5rem;
		width: auto;
		border-radius: 6px;
		max-width: 100%;
		max-height: calc(100vh - (var(--nav-height) + 1rem));
		color: hsl(var(--color-gray-600));
		backdrop-filter: blur(16px) saturate(1.5);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		background-color: hsl(var(--bg-base) / 90%);
		outline: 1px solid hsl(var(--color-primary) / .05);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: scale(.98);
		z-index: -2;
		transform-origin: center top;
		transition: all 0.5s cubic-bezier(0.6, 0.1, 0, 1) 0s, pointer-events 0s ease 0s;
	}

	.fixed .main-navigation {
		inset: auto 0 0 0;
		padding: .5rem .5rem var(--nav-height);
		transform: scaleX(.95) translateY(100%);
	}

	.nav-open .main-navigation {
		opacity: 1;
		transform: none;
		visibility: visible;
		pointer-events: auto;
	}

	.main-navigation .dropdown-container {
		overflow: auto;
		scrollbar-width: none;
		overscroll-behavior: contain;
	}

	.main-navigation .dropdown-container li {
		list-style: none;
	}

	.main-navigation .dropdown-container .dropdown-toggle {
		border: 0;
		color: hsl(var(--color-primary));
		background: none;
	}

	.dropdown-container .dropdown-parent>.widget-list,
	.dropdown-container .nav-item .clearfix {
		display: grid;
		align-items: start;
		grid: auto / repeat(auto-fill, minmax(10rem, 1fr));
	}

	.site-header .header-tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		flex: 1;
	}

	.site-header .post-top-tools {
		display: none;
	}
}

/* 幻灯片 */
.single-list {
	--trfm-or: scale(.99);
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	margin: 2rem;
	height: 100%;
}

.slick-slide,
.slick-slide>div,
.slick-slide>div>div {
	border-radius: 6px !important;
	overflow: hidden !important;
	/* 确保子元素也遵循圆角 */
}

.single-list .slick-list {
	position: relative;
}

.single-list .single-item figure {
	position: relative;
}

.slick-track,
.slick-slide,
.single-item figure img {
	max-height: 87vh;
}

.single-list .single-item figure img {
	position: relative;
	height: 100%;
	width: 100%;
	object-fit: cover;
	z-index: -1;
}

.single-list .single-item figure:after {
	inset: 0;
	content: "" !important;
	position: absolute !important;
	background: linear-gradient(rgb(0 0 0 / 20%), #0000 30%, #181818);
	-webkit-backdrop-filter: brightness(.9) saturate(1.5);
	backdrop-filter: brightness(.9) saturate(1.5);
	pointer-events: none;
	border-radius: inherit;
	z-index: -1;
}

.slick-arrows-container {
	position: absolute;
	inset: auto auto .5rem .5rem;
	display: flex;
	gap: .5rem;
}

.single-list button,
.single-list button {
	z-index: 1;
	border: 0;
}

.single-list .slick-arrows-container button i {
	color: hsl(var(--color-gray-700) / 1);
	display: flex;
	line-height: 1;
	padding: .2rem;
	transition: .3s;
	border-radius: 50%;
	outline: thin solid hsl(var(--color-gray-100) / .1);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.single-list .slick-arrows-container button i:hover {
	color: hsl(var(--color-gray-600) / 1);
	background: hsl(var(--color-primary) / .1);
	outline: thin solid hsl(var(--color-primary) / .2);
}

.slick-dots {
	position: absolute;
	inset: auto .5rem .5rem auto;
	display: flex;
	gap: .5rem;
}

.slick-dots li {
	display: flex;
	line-height: 1;
	border-radius: 2em;
	overflow: hidden;
}

.slick-dots li button .dot-number {
	display: block;
	width: 28px;
	height: 8px;
	opacity: 0.2;
	background-color: hsl(var(--color-gray-100));
	font-size: 0;
	cursor: pointer;
	transition: all .2s linear, opacity .15s ease-in-out;
}

.slick-dots li button .dot-number:hover {
	opacity: 0.4;
}

.slick-dots li.slick-active button .dot-number {
	width: 8px;
	height: 8px;
	opacity: 0.8;
	background-color: hsl(var(--color-primary));
}

.single-item .article-header {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: hsl(var(--color-gray-100));
}

.single-item .article-header footer {
	inset: auto 0 0 0;
	padding: 1rem;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: hsl(var(--color-gray-300));
}

.single-item .article-header footer::before {
	content: '';
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	background: linear-gradient(hsl(0deg 0% 0% / 20%), #0000 4rem, #0000 50%, #333);
}

.single-item .article-header .article-title {
	font-size: clamp(1.2em, 3vw, 1.8em);
	color: hsl(var(--color-gray-200));
}

.single-item .article-header .article-tags {
	margin-block: .5rem;
	font-size: .7em;
	color: hsl(var(--color-gray-500));
}

.single-item .article-header footer .article-meta {
	display: flex;
	line-height: 1;
	gap: .5rem;
	font-size: .65em;
	align-items: center;
	padding-block: 1rem;
	color: hsl(var(--color-gray-500));
}

.single-item .article-header footer .article-meta img {
	border-radius: 50%;
}

.single-item .article-header footer .article-title {
	margin: .2rem 0;
}

.single-item .article-header footer .article-excerpt {
	--line-clamp: 2;
	font-size: .65em;
	max-width: 50rem;
	color: hsl(var(--color-gray-500));
	margin: .5rem 0;
}

.single-item .article-header footer button {
	outline: thin solid #0000;
	outline-offset: 1em;
	border-radius: 2em;
	background: hsl(var(--color-gray-100) / .1);
	white-space: nowrap;
	line-height: 1;
	padding: .5rem;
	transition: .45s;
	margin-top: 1rem;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.single-item .article-header footer button:hover {
	outline-color: hsl(var(--color-primary) / .8);
	outline-offset: 0;
}

.single-item .article-header footer button i {
	color: hsl(var(--color-gray-100) / .5);
	transition: .5s;
}

.single-item .article-header footer button:hover i {
	color: hsl(var(--color-primary) / .8);
}

/* 主容器动画设置 */
.fade-before {
	opacity: 0;
	transform: var(--trfm-or, top);
	transition: .7s, transform cubic-bezier(.6, .2, .25, 1) .7s, opacity .3s;
	/* 其他初始样式 */
}

.fade-after {
	opacity: 1;
	transform: var(--trfm, none);
	/* 其他动画后样式 */
}

/* 定义动画关键帧 */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 应用动画到元素类 */
.animated-item {
	opacity: 0;
	/* 初始状态 */
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	/* 保持动画结束状态 */
}

/* 首页文章列表 */
.index-main {
	display: flex;
	gap: 3rem;
	padding: 2rem;
	align-items: flex-start;
}

.index-main .articles-container {
	--line-clamp: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	position: relative;
	max-width: calc(100% - 22rem);
	width: 100%;
}
.index-main .articles-container .articles-main{
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	position: relative;
	width: 100%;
}

.index-main .articles-list .article-default {
	--trfm-or: translateX(1rem);
	position: relative;
	display: flex;
	overflow: hidden;
	flex: 100%;
	margin-bottom: 1rem;
	border-radius: 12px;
	/*padding:1rem;
	*/
	outline: 1px solid hsl(var(--color-primary) / .05);
}

@media (max-width:510px) {
	body .articles-list {
		display: grid;
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	body .index-main .articles-list .article-default {
		flex-wrap: wrap;
	}

	body .index-main .articles-list .post-content {
		margin-left: 0;
		margin-top: -2rem;
	}

	body .index-main .articles-list figure {
		max-width: none;
		min-height: none;
	}

	body .index-main .post-content .post-meta span:nth-child(5) {
		display: none;
	}
}

.index-main .articles-list figure {
	position: relative;
	transition: 1s;
	overflow: hidden;
	max-height: 10rem;
	min-height: 10rem;
	flex: 100%;
	max-width: 15rem;
}

.index-main .articles-list figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	transition: transform .5s;
}

.index-main .article-item:hover img {
	transform: scale(1.1);
}

.index-main .articles-list .post-content {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	place-content: space-between;
	flex: auto;
	gap: 1rem;
	padding: 1rem;
	margin-left: -30px;
	width: 100%;
	background: hsl(var(--bg-base) / .6);
	border-radius: 6px;
	transition: height .3s;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.index-main .post-content .post-title {
	color: hsl(var(--color-gray-900));
	font-size: 1.1em;
	flex: 100%;
}

.index-main .post-content .post-excerpt {
	color: hsl(var(--color-gray-600));
	font-size: .8em;
	flex: 100%;
}

.index-main .post-content .post-meta {
	color: hsl(var(--color-gray-600));
	font-size: .7em;
	display: flex;
	gap: 1rem;
	flex: 1;
}

.index-main .post-content .post-meta>* {
	line-height: 1;
	display: flex;
	align-items: center;
	gap: .3rem;
}

.index-main .post-content .post-meta i {
	font-size: 1.3em;
	line-height: 1;
	display: inline-block;
}

.index-main .archive_next {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.index-main .archive_next a {
	text-align: center;
	color: hsl(var(--color-gray-800));
	padding: 1rem 0;
	font-size: .8em;
	outline: thin solid hsl(var(--color-primary) / .05);
	border-radius: 6px;
	padding: .5rem 1rem;
	transition: outline .3s;
}

.index-main .archive_next a:hover {
	outline: thin solid hsl(var(--color-primary) / .5);
}

@media (width <=1025px) {
	.index-main .articles-main {
		max-width: none;
	}
}

/* 页面 动态 */

.dynamic-main {
	padding: 2rem;
}
.dynamic-main .comment-list{
    gap: 1rem;
    -moz-columns: 3;
    columns: 3;
}
.dynamic-main .comment-list .comment-item{
    -moz-column-break-inside: avoid;
    break-inside: avoid;
}

.dynamic-main .comment-item{
    display: flex;
    flex-flow: column;
    padding: 1rem;
    box-shadow: 0 0.2rem 1rem 0 hsl(0deg 0% 15% / 4%);
    outline: thin solid hsl(var(--color-primary) / 5%);
    border-radius: 6px;
    background: hsl(var(--bg-base));
    scroll-snap-align: start;
    color: hsl(var(--color-gray-600) / .8);
}
.dynamic-main .comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: .7em;
}
.dynamic-main .comment-header img{
    width: 25px;
    height: 25px;
    border-radius: 6px;
}
.dynamic-main .comment-body{
    margin-block: 0.5rem;
    font-size: .9em;
    letter-spacing: 1.5px;
}
.dynamic-main .comment-actions button{
    border: 0;
    background: none;
    margin-block: 1rem .5rem;
    font-size: .7em;
    display: flex;
    align-items: center;
    line-height: 1;
    gap: 0.2rem;
}
.comment-reply-form .comment-form-footer {
	display: flex;
	flex-flow: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0.5em 0 0;
}

.comment-reply-form .comment-form-footer .comment-form-fields {
	display: flex;
	flex-flow: wrap;
	gap: 0.5em;
	flex: auto;
}

.dynamic-main .comment-reply-form {
	margin: .5rem 0;
	border-top: thin solid hsl(var(--color-primary) / .05);
	padding: .5rem 0;
}

.comment-reply-form .comment-form-footer .comment-form-fields label {
	font-size: .8em;
	color: hsl(var(--color-gray-600));
	line-height: 1.5;
	vertical-align: middle;
	align-self: center;
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	flex: 8rem;
	height: 3em;
}

.comment-reply-form .comment-form-footer .comment-form-fields label input,
.comment-reply-form textarea {
	font-size: .8em;
	color: hsl(var(--color-gray-600));
	line-height: 1.5;
	background: 0;
	width: 100%;
	padding: 0.5rem 1rem;
	border-radius: 3px;
	vertical-align: middle;
	appearance: none;
	transition: .7s;
	border: 0;
	outline: thin solid hsl(var(--color-primary) / .05);
}

.comment-reply-form .comment-form-footer button {
	border: 0;
	border-radius: 6px;
	padding: 0.5rem 1rem;
	cursor: pointer;
	user-select: none;
	flex: none;
	font-size: .8em;
	background: none;
	color: hsl(var(--color-gray-600));
	outline: thin solid hsl(var(--color-primary) / .05);
}
.dynamic .respond {
	margin: 1rem 0;
}

.dynamic .respond textarea,
.dynamic .respond button,
.dynamic .respond select,
.dynamic .respond input {
	font-size: .8em;
	color: hsl(var(--color-gray-600));
	line-height: 1.5;
	background: 0;
	width: 100%;
	padding: 0.5rem 1rem;
	border-radius: 3px;
	vertical-align: middle;
	appearance: none;
	transition: .7s;
	border: 0;
	outline: thin solid hsl(var(--color-primary) / .05);
}

.dynamic .respond .form-foot {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	margin: 0.5em 0 0;
}
.dynamic-main .comment-children .comment-child {
	border-top: thin solid hsl(var(--color-primary) / .05);
	padding: .5rem 0;
	display: flex;
	gap: .5rem;
	color: hsl(var(--color-gray-400));
	font-size: .8em;
	flex-direction: column;
}

.dynamic-main .comment-children .comment-child .comment-meta {
	display: flex;
	gap: .5rem;
	align-items: center;
}

.dynamic-main .comment-children .comment-child .comment-avatar {
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.dynamic-main .comment-children .comment-child .comment-text {
	font-size: .8em;
	color: hsl(var(--color-gray-600));
}

.comment-reply-form .comment-form-footer {
	display: flex;
	flex-flow: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	margin: 0.5em 0 0;
}
@media (max-width:1025px) {
    .dynamic-main .comment-list {
        -moz-columns: 2;
        columns: 2;
    }
}
@media (max-width:767px) {
    .dynamic-main{
        padding: 1rem;
    }
    .dynamic-main .comment-list {
        -moz-columns: 1;
        columns: 1;
    }
}
/* 侧栏 */
.sidebar-sticky {
	width: 100%;
	max-width: 22rem;
	flex-shrink: 0;
	height: 100%;
	position: sticky;
	top: 0;
	z-index: 9;
}

.sidebar-sticky .sidebar-search {
	margin-bottom: 2rem;
}

.sidebar-sticky .sidebar-search input {
	font-size: .8em;
	color: hsl(var(--color-gray-600));
	line-height: 1.5;
	background: 0;
	width: 100%;
	padding: 0.5rem 1rem;
	border-radius: 3px;
	vertical-align: middle;
	appearance: none;
	background: hsl(var(--bg-base));
	transition: .7s;
	border: 0;
	outline: thin solid hsl(var(--color-primary) / .05);
}

.sidebar-sticky .sidebar-search input:focus {
	outline: thin solid hsl(var(--color-primary) / .5);
}

.sidebar-sticky .author-card {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 2rem;
	padding: .5rem .2rem;
	border-radius: 6px;
	background: hsl(var(--bg-base));
	box-shadow: 0 .2rem 1rem 0 hsl(0deg 0% 15% / 4%);
	outline: thin solid hsl(var(--color-primary) / .05);
	text-shadow: 2px 2px 2px hsla(212, 32.61%, 18.04%, .2), -1px -1px #fff;
}

.sidebar-sticky .author-avatar-wrapper {
	position: relative;
	height: fit-content;
}

.sidebar-sticky .author-avatar-wrapper img {
	border-radius: 6px;
	width: 60px;
	height: 60px;
}

.sidebar-sticky .author-badge {
	width: 25px;
	height: 25px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	inset: auto -.5rem -.2rem auto;
}

.sidebar-sticky .author-info {
	color: hsl(var(--color-gray-900));
	flex: 1 1 0%;
}

.sidebar-sticky .author-name {
	font-size: .9em;
}

.sidebar-sticky .author-bio {
	font-size: .7em;
	color: hsl(var(--color-gray-600));
}

.sidebar-sticky .sidebar-omments {
	margin: 1rem 0;
}
.sidebar-sticky .aside__item-contain .empty{
    font-size: .6em;
    color: hsl(var(--color-gray-400));
}

.sidebar-sticky .aside__item-contain .item {
	--trfm-or: translateY(1rem);
	display: flex;
	flex-flow: column;
	padding: 1rem;
	box-shadow: 0 .2rem 1rem 0 hsl(0deg 0% 15% / 4%);
	outline: thin solid hsl(var(--color-primary) / 5%);
	border-radius: 6px;
	margin: 1rem 0;
	background: hsl(var(--bg-base));
	scroll-snap-align: start;
	color: hsl(var(--color-gray-600) / .8);
}

.sidebar-sticky .aside__item-contain .item .user {
	display: flex;
	gap: .5rem;
	align-items: center;
	color: hsl(var(--color-gray-600) / .6);
}

.sidebar-sticky .aside__item-contain .item .user img {
	width: 45px;
	height: 45px;
	border-radius: 3px;
}

.sidebar-sticky .aside__item-contain .item .user .info {
	font-size: .9em;
	color: hsl(var(--color-gray-600) / .8);
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	flex: 1;
	gap: .2rem;
}

.sidebar-sticky .aside__item-contain .item .user .info .comment-post {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: space-between;
}

.sidebar-sticky .aside__item-contain .item .user .info .date {
	font-size: .7em;
	color: hsl(var(--color-gray-600) / .6);
}

.sidebar-sticky .aside__item-contain .item .user .info .comment-title {
	font-size: .8em;
	color: hsl(var(--color-gray-600) / .6);
}

.sidebar-sticky .aside__item-contain .item .reply {
	border-top: thin dashed hsl(var(--color-gray-200) / .5);
	padding-top: .5rem;
	margin-top: 1rem;
	color: hsl(var(--color-gray-600));
	font-size: .8em;
	line-height: 2;
}

.sidebar-sticky .overflow {
	max-height: 100vh;
	padding: .2rem;
	overflow-y: auto;
	scrollbar-width: none;
	overscroll-behavior: contain;
	transition: .3s;
}

@media (max-width:1025px) {
	.sidebar-sticky {
		right: -22rem;
		position: fixed;
		background: hsl(var(--bg-base) / 80%);
		padding: 1rem;
		transition: right .5s;
		outline: thin solid hsl(var(--color-primary) / .05);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
		-webkit-backdrop-filter: blur(16px) saturate(200%);
		backdrop-filter: blur(16px) saturate(200%);
	}

	.sidebar-sticky .overflow {
		padding: calc(var(--nav-height) - .5rem) .2rem .2rem .2rem;
	}

	.fixed .sidebar-sticky .overflow {
		padding: .5rem .5rem calc(var(--nav-height) + 1rem) .5rem;
	}

	.sidebar-open .sidebar-sticky {
		right: 0;
	}
}

/* 首页分类文章 */
.index-category {
	padding: 0 2rem;
	overflow: hidden;
}

.index-category .category-section {
	overflow: hidden;
	margin-bottom: 3rem;
}

@media (min-width:1180px) {
	.index-category .post-scroll-container .post-list {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		padding: 1rem;
	}
}

.index-category .post-scroll-container .post-list .post-card {
	--line-clamp: 2;
	--trfm-or: translateY(1rem);
	position: relative;
	display: flex;
	flex-flow: column;
	flex: 1;
	padding: .5rem;
	outline: thin solid hsl(var(--color-primary) / .05);
	border-radius: 6px;
	background: hsl(var(--bg-base));
	overflow: hidden;
}

.index-category .post-card:hover img {
	transform: scale(1.1);
}

.index-category .post-thumbnail-container {
	aspect-ratio: 16 / 9;
	position: relative;
	border-radius: 3px;
	transition: 1s;
	overflow: hidden;
}

.index-category .post-thumbnail-container img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .5s;
}

.index-category .post-content {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	place-content: space-between;
	flex: auto;
	gap: 0.5rem 1rem;
	padding: 1rem .5rem;
}

.index-category .post-content .post-title {
	font-weight: inherit;
	font-size: 1em;
	flex: 100%;
	color: hsl(var(--color-gray-800));
}

.index-category .post-content .post-excerpt {
	font-size: .7em;
	flex: 100%;
	color: hsl(var(--color-gray-500));
}

.index-category .post-content .post-meta {
	font-size: .7em;
	flex: 100%;
	color: hsl(var(--color-gray-500));
	display: flex;
	align-items: center;
	line-height: 1;
	gap: .5rem;
}

.index-category .post-content .post-meta>* {
	display: flex;
	align-items: center;
	gap: .2rem;
}

.index-category .category-header {
    position: relative;
	display: flex;
	margin: 1rem 0;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.index-category .read-more-container {
	position: relative;
	display: flex;
	align-items: center;
	gap: .3rem;
	outline: thin solid hsl(var(--color-primary) / .05);
	border-radius: 2rem;
	background: hsl(var(--bg-base));
	font-size: .6em;
	padding: .2rem .5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.index-category .read-more-container .category-title {
	color: hsl(var(--color-primary));
	padding: .2rem .5rem;
	border-radius: 2rem;
	outline: thin solid hsl(var(--color-primary) / .05);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.index-category .read-more-container i {
	color: hsl(var(--color-gray-800));
}

.index-category .category-header .category-description{
    position: relative;
    font-size: .7em;
    color: hsl(var(--color-gray-600));
}

.index-category .category-header span {
	content: attr(id);
	color: hsl(var(--color-primary) / .3);
	font-size: 10rem;
	font-weight: bold;
	letter-spacing: 15px;
	opacity: .1;
	position: absolute;
	text-transform: uppercase;
	top:0;
	right: 0;
	transform: translate(0%, -50%) skewX(-15deg);
	z-index: -1;
	font-family: fantasy;
}

@media (max-width:1180px) {
	.post-row {
		display: grid;
		grid: repeat(1, 1fr) / auto-flow min(100%, 22rem);
		justify-content: start;
		overflow: auto;
		padding: 1rem;
		gap: 1rem;
		scroll-padding: 1rem;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
}
@media (max-width:767px) {
    .index-category .category-header {
        flex-direction: column;
    }
    .index-category .category-header span{
        display: none;
    }
}

/* 固定链接特效 */
.bg-links {
    cursor: pointer;
    position: relative;
    text-decoration: none;
    word-break: break-all;
    padding-bottom: .2rem;
    display: inline-block; /* 确保伪元素定位正确 */
}

.bg-links::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, hsl(var(--color-primary) / 50%), hsl(var(--color-primary) / 50%));
    transform: translateX(-50%);
    transition: width 0.3s ease-out;
}

.bg-links:hover {
    color: hsl(var(--color-primary) / 90%);
}

.bg-links:hover::after {
    width: 100%;
}

/* 遮罩层 */
.global-overlay {
	position: fixed;
	background: hsl(0deg 0% 0% / 50%);
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(.98);
	transition: .5s, pointer-events 0s;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.global-overlay.active {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
	z-index: 8;
}

/* 懒加载 */
.lazy-loading,
.lazy-error {
	background-color: #f5f5f5;
	object-fit: contain;
	transform: scale(100);
	z-index: -9;
	transform-origin: center top;
	transition: all 0.5s cubic-bezier(0.6, 0.1, 0, 1) 0s, pointer-events 0s ease 0s;
}

.lazy-loading {
	transform: scale(1.2);
}

.lazy-loaded {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
}

img {
	position: relative;
}

img~media-loader {
	--trfm: scale(1.1);
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .7em;
	inset: 0;
	width: fit-content;
	height: 3em;
	line-height: 1;
	padding: 1em;
	margin: auto;
	gap: .5em;
	color: hsl(var(--color-gray-600));
	outline: thin solid hsl(var(--color-primary) / .05);
	border-radius: 2em;
	background: hsl(var(--bg-base));
	animation: opacity .3s .3s backwards, transform 1s .5s backwards;
	transform-origin: bottom;
	pointer-events: none;
	transition: .5s;
}

img.lazy-loaded~media-loader {
	opacity: 0;
	visibility: hidden;
	transform: scale(.98);
}

media-loader::before {
	content: "";
	border-top: 2px solid;
	border-radius: 50%;
	width: 1em;
	aspect-ratio: 1;
	animation: rotate 2s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes opacity {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes transform {
	0% {
		transform: translateY(1rem);
		transform-origin: top;
	}

	100% {
		transform: none;
	}
}

/* 文章页美化 */
.post-main .post-top {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 60vh;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	animation: min-height .8s backwards;
	animation-delay: .5s;
}

.post-main .post-top figure {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	inset: 0;
	background: #333;
	overflow: hidden;
}

.post-main .post-top figure img {
	width: calc(100% + 0%);
	height: calc(100% + 0%);
	max-width: none;
	min-height: inherit;
	object-fit: cover;
	transform: scale(1.1);
	transform-origin: top;
	opacity: 0;
	filter: none;
	transition: .5s;
}

.post-main .post-top figure img.lazy-loaded {
	opacity: 1;
	transform: none;
	animation: opacity .25s;
}

/* 文章页懒加载优化 */
.post-top media-loader {
	inset: calc(var(--nav-height) + 1rem) 0 auto;
}

.post-main .post-top hgroup {
	padding: 2rem 1rem;
	/* 添加内边距确保文字不贴边 */
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.post-main .post-top hgroup::before {
	content: '';
	position: absolute;
	inset: 0 0 -1px 0;
	/* 覆盖整个 hgroup */
	background: rgba(0, 0, 0, 0.5);
	/* 黑影透明度 */
	backdrop-filter: blur(10px);
	/* 磨砂效果 */
	-webkit-backdrop-filter: blur(10px);
	/* Safari 兼容 */
	mask: linear-gradient(#0000, #000 80%);
	-webkit-mask: linear-gradient(#0000, #000 80%);
}

.post-main .post-top hgroup .title {
	position: relative;
	z-index: 1;
	font-size: 1.2em;
	color: hsl(var(--color-gray-100));
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	/* 可选：为文字添加阴影增强可读性 */
}

.post-main .post-top hgroup .post-meta {
	position: relative;
	z-index: 1;
	font-size: .8em;
	color: hsl(var(--color-gray-300));
	display: flex;
	align-items: center;
	gap: 1rem;
	line-height: 1;
	flex-wrap: nowrap;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	overflow: scroll visible;
	scroll-padding: 1rem;
}

.post-main .post-top hgroup .post-meta>* {
	display: flex;
	align-items: center;
	gap: .2rem;
	line-height: 1;
	font-size: .7em;
	flex: 1 0 auto;
	background: hsl(var(--bg-base) / .2);
	padding: .2rem .5rem;
	border-radius: 6px;
	scroll-snap-align: start;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.post-main .post-top hgroup .post-tags{
    position: relative;
	z-index: 1;
	font-size: .8em;
	color: hsl(var(--color-gray-300));
	display: flex;
	align-items: center;
	gap: 1rem;
	line-height: 1;
	flex-wrap: nowrap;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	overflow: scroll visible;
	scroll-padding: 1rem;
}
.post-main .post-top hgroup .post-tags ul{
    display: flex;
    gap: 1rem;
    align-items: center;
}
.post-main .post-top hgroup .post-tags a{
    display: flex;
    align-items: center;
    gap: .2rem;
    line-height: 1;
    font-size: .7em;
    flex: 1 0 auto;
    padding: .2rem .5rem;
}

.post-main .post-layout {
	position: relative;
	display: flex;
	justify-items: center;
	gap: 2em;
	border-radius: 6px 6px 0 0;
	padding-block: 2rem;
	padding-inline: 2rem;
	background: hsl(var(--bg-darker));
	animation: transform .25s;
	transition: 1.5s;
}

.post-main .entry-layout {
	position: relative;
	max-width: calc(100% - 22rem);
	width: 100%;
	color: hsl(var(--color-gray-800));
	font-size: 1em;
}

:where(.entry-layout .article-content)>:where(p, pre, address, blockquote, figure, details, iframe, audio, video, h1, h2, h3, h4, h5, h6, ul, ol) {
	margin-block: 1rem !important;
}

/* 作者信息卡片 */
.author-cut-card{
    padding: 1rem;
    background: hsl(var(--bg-base));
	color: hsl(var(--color-gray-700));
    border-radius: 6px;
    margin: 2rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    transition: .3s;
}
.author-cut-card .author-name::after{
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: hsl(var(--color-primary) / .9);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}
.author-cut-card:hover .author-name::after{
    transform: scaleX(1);
    transform-origin: left;
}
.author-cut-card .card-header{
    transition: .3s;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
}
.author-cut-card .card-header img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: .2rem;
    background: hsl(var(--bg-darker));
}
.author-cut-card .card-header .social-links{
    display: flex;
    gap: .5rem;
    align-items: center;
    line-height:1;
    margin: 1rem 0;
}
.author-cut-card .card-header .social-links i{
    font-size: 1.2em;
    color: hsl(var(--color-gray-400));
    padding: .3rem;
    background: hsl(var(--bg-darker));
    border-radius: 50%;
    transition: .3s;
    outline: thin solid #0000;
}
.author-cut-card .card-header .social-links i:hover{
    box-shadow: 0 .2rem 1rem 0 hsl(0deg 0% 15% / 4%);
    outline: thin solid hsl(var(--color-primary) / 5%);
}

.author-cut-card .author-content{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.author-cut-card .author-content> *{
    flex: 100%;
}
.author-cut-card .author-header h3{
    font-size: 1em;
    position: relative;
    width: fit-content;
}
.author-content .author-bio{
	color: hsl(var(--color-gray-500));
    font-size: .8em;
}
.author-content .article-meta{
    display: flex;
    gap: .8rem;
}
.author-content .article-meta .meta-item{
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.author-content .article-meta .meta-item:after {
    content: attr(text);
    font-size: .6em;
    position: absolute;
    inset: 2rem 0 0 -1rem;
    width: min(10rem,42vw);
    height: fit-content;
    background: hsl(var(--bg-base));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    opacity: 0;
    transform: translateY(1rem);
    z-index: 2;
    pointer-events: none;
    text-align: center;
    transition: .3s;
    box-shadow: 0 .2rem 1rem 0 hsl(0deg 0% 15% / 4%);
    outline: thin solid hsl(var(--color-primary) / 5%);
}
.author-content .article-meta .meta-item:hover:after {
    opacity: 1;
    transform: none;
}
.author-content .article-meta .meta-item span:not([class]){
    color: hsl(var(--color-gray-900));
    font-size: .7em;
}
.author-content .article-meta .meta-item span.meta-icon i{
    color: hsl(var(--color-gray-900));
    font-size: 1.3em;
}
@media (width <=1025px) {
	.post-main .entry-layout {
		width: 100%;
		max-width: none;
	}

	.post-main .post-layout {
		padding-block: 1rem;
		padding-inline: 1rem;
	}
	
	.author-cut-card{
	    padding: .5rem !important;
	    flex-direction: column-reverse;
	}
    .author-cut-card .card-header{
        justify-content: center;
        margin-top: -1.2rem;
        align-items: center;
    }
}

/* 评论 */
.comments-section {
    border-radius: 6px;
    position: relative;
    padding: 0.5rem 1rem;
    background: hsl(var(--bg-base));
    margin-top: 3rem;
}
.comments-section .comments-title {
    margin: 1rem 0;
    font-size: .9em;
    color: hsl(var(--color-primary));
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.comment-container .post_comment .comment-reply-title{
    margin: 1rem 0;
    font-size: .9em;
    color: hsl(var(--color-primary));
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.comment-container .post_comment .comment-reply-title i {
    font-size: 1.8em;
}
.comment-container .respond{
    margin: 1rem 0;
}
.comment-container .comment-textarea{
    width: 100%;
    display: flex;
    position: relative;
    background: hsl(var(--bg-darker));
    color: hsl(var(--color-gray-600));
    border-radius: 6px 0 6px 6px;
}
.comment-container .comment-textarea textarea {
    flex: 1;
    min-height: 8rem;
    border: 0;
    padding: 0.5rem;
    font-size: .9em;
    color: hsl(var(--color-gray-600));
    resize: none;
    outline: 1px solid hsl(var(--bg-darker));
    border-radius: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.comment-container .comment-author-info {
    margin: 0.5rem 0;
    position: relative;
    display: flex;
    flex-flow: wrap;
    gap: 0.5em;
    flex: auto;
}
.comment-container .comment-author-info .list {
    flex: 8rem;
    display: inline-flex;
    width: 100%;
    flex-wrap: nowrap;
    vertical-align: bottom;
    align-items: center;
    outline: 1px solid hsl(var(--bg-darker));
    border-radius: 6px;
}
.comment-container .comment-author-info .list label {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    display: inline-block;
    background-color: hsl(var(--bg-darker));
    color: hsl(var(--color-gray-600));
    font-size: .9em;
    white-space: nowrap;
    padding: 0.5rem;
}
.comment-container .comment-author-info .list input {
    border: 0;
    padding: 0.5rem;
    font-size: .9em;
    flex: 1;
    color: hsl(var(--color-gray-600));
}
.comment-submit .submit-right {
    margin: 0.5rem 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.comment-submit .submit-right button{
    border: 0;
    background: hsl(var(--color-primary));
    color: hsl(var(--color-gray-100));
    padding: 0.5rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    font-size: .7em;
}
.comment-list .comment-body .comment-list__item-contain{
    border-bottom: 1px dashed hsl(var(--color-gray-200) / .5);
    padding: 0.5rem 0;
    margin: .5rem 0;
}
.comment-list .comment-body .comment-children{
    margin-left: 2rem;
}
.comment-list .comment-body  {
    flex-direction: column;
    gap: 1rem;
    display: flex;
}
.comments-section .comment-list .comment-list__item-contain .term {
    display: flex;
    gap: 0.5rem;
    flex: 1;
}
.comments-section .comment-list .comment-list__item-contain .term img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.comment-list .term .content {
    flex: 1;
}
.comment-list .term .content .user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.comment-list .term .content .author {
    font-size: .8em;
    color: hsl(var(--color-gray-900));
}
.comment-list .term .content .user .owner {
    color: hsl(var(--color-primary));
    background: hsl(var(--color-primary) / .1);
    padding: 0.1rem 0.5rem;
    line-height: 1;
    font-size: .4em;
    border-radius: 2rem;
    font-style: normal;
}
.comment-list .term .content .user .parent {
    font-size: .4em;
    color: hsl(var(--color-gray-300));
}
.comment-list .term .content .substance {
    font-size: .9em;
    color: hsl(var(--color-gray-700));
}
.comment-list .term .content .waiting {
    font-size: .9em;
    color: hsl(var(--color-gray-700));
}
.comment-list .term .content .handle {
    position: relative;
    font-size: .7em;
    color: hsl(var(--color-gray-500));
    display: flex;
    gap: 1rem;
    align-items: center;
}
.comment-list .term .content .handle .comment-reply{
    position: absolute;
    right: 0;
    border: 0;
    background: none;
}
.comment-list .term .content .handle .comment-reply i {
    font-size: 1.9em;
}
@supports (animation-timeline:view()) {
	.comment-list .comment-body .comment-list__item-contain{
		animation: scaleIn 1s;
		animation-timeline: view(block);
		animation-range: cover -10% cover 30%;
	}

	@keyframes scaleIn {
		from {
			transform: scale(0.85);
			opacity: 0;
		}

		to {
			transform: scale(1);
			opacity: 1;
		}
	}
}

.comments-section .comment__close {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 3rem 0;
	font-size: .9em;
	color: hsl(var(--color-gray-300));
}

.comments-section .comment__close i {
	font-size: 1.9em;
	color: hsl(var(--color-gray-300));
}

.comments-section .no-comments {
	background: hsl(var(--bg-darker));
	color: hsl(var(--color-gray-300));
	border-radius: 6px;
	font-size: .9em;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5rem 0;
}

.comments-section .no-comments i {
	font-size: 1.9em;
	color: hsl(var(--color-gray-300));
}

.comments-section .page-navigator {
	display: none;
}

.comments-section .page-navigators {
	display: flex;
	justify-content: center;
	margin: 3rem;
}

.comments-section .page-navigators button {
	border: 0;
	background: hsl(var(--bg-darker));
	padding: .5rem 1rem;
	border-radius: 6px;
	font-size: .6em;
	color: hsl(var(--color-gray-500));
	line-height: 1;
	display: flex;
	align-items: center;
	gap: .2rem;
}

.comments-section .page-navigators button i {
	font-size: 1.8em;
}

.comments-section #no-more {
	font-size: .6em;
	color: hsl(var(--color-gray-500));
	text-align: center;
	margin: 3rem 0;
}

/* 首页动态样式 */
.articles-main .articles-list {
	display: flex;
	flex-flow: row wrap;
	flex: 1;
	gap: 0 15px;
	align-items: flex-start;
}

.articles-list .say-item {
	--line-clamp: 1;
	flex: 110 45%;
	border-radius: 6px;
	border: none;
	position: relative;
	overflow: hidden;
	padding: 1rem;
	gap: 1rem;
	display: flex;
	background: hsl(var(--bg-base));
	margin-bottom: 1rem;
	outline: 1px solid hsl(var(--color-primary) / .05);
}

.articles-list .say-item .say-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	place-content: space-between;
	flex: auto;
	gap: 1rem;
}

.articles-list .say-item .say_title {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	flex: 100%;
}

.articles-list .say-item .say_title .item-meta-ico {
	background: 0 0;
	border: none;
	font-size: 25px;
	margin-right: 5px;
	user-select: none;
	border-radius: 50%;
	position: relative;
	display: inline-block;
	width: 35px;
	height: 35px;
	margin-top: -4px;
	flex-shrink: 0;
	opacity: .6;
	transition: opacity .3s;
}

.articles-list .say-item:hover .item-meta-ico {
	opacity: 1;
}

.articles-list .say-item .say_title .post-title {
	color: hsl(var(--color-gray-900));
	font-size: 1.1em;
}

.articles-list .say-item .post-excerpt {
	color: hsl(var(--color-gray-600));
	font-size: .8em;
	flex: 100%;
}

.articles-list .say-item .post-meta {
	color: hsl(var(--color-gray-600));
	font-size: .7em;
	display: flex;
	gap: 1rem;
	flex: 100%;
}

.articles-list .say-item .post-meta>* {
	line-height: 1;
	display: flex;
	align-items: center;
	gap: .3rem;
}

@media (max-width:767px) {
	.articles-list .say-item {
		flex: 1 383px;
	}

	body .index-main .say-item .post-meta span:nth-child(5) {
		display: none;
	}
}

/* 文章页动态样式 */
.post-main .say-article-header {
	overflow: hidden;
	position: relative;
	border-radius: 6px;
	margin: calc(var(--nav-height) + 1rem) 2rem 2rem 2rem;
	background: hsl(0deg 0% 11.17% / 10%) radial-gradient(at 10% 0%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 60%);
}

.post-main .say-article-header .say-bg {
	height: 360px;
	background: var(--say-img);
}

.say-article-header .say-article-content {
	position: absolute;
	inset: 15rem 0 0 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 1rem;
	padding-inline: 1rem;
	color: hsl(var(--color-gray-200));
}

.say-article-header .say-article-content:before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	mask: linear-gradient(#0000, #000 80%);
	-webkit-mask: linear-gradient(#0000, #000 80%);
}

.say-article-header .say-article-title {
	position: relative;
	z-index: 1;
	font-size: 1.9em;
	color: hsl(var(--color-gray-100));
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.say-article-header .say-article-info {
	position: relative;
	z-index: 1;
	font-size: .8em;
	color: hsl(var(--color-gray-300));
	display: flex;
	align-items: center;
	gap: 1rem;
	line-height: 1;
	flex-wrap: nowrap;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	overflow: scroll visible;
	scroll-padding: 1rem;
}

.say-article-header .say-article-info>* {
	display: flex;
	align-items: center;
	gap: .2rem;
	line-height: 1;
	font-size: .7em;
	flex: 1 0 auto;
	background: hsl(var(--bg-base) / .2);
	padding: .2rem .5rem;
	border-radius: 6px;
	scroll-snap-align: start;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.say-article-header .say-article-info>.say-icon {
	line-height: 1.3;
}

@media (max-width:767px) {
	.post-main .say-article-header {
		margin: 1rem;
	}

	.say-article-header .say-article-info {
		width: 100%;
	}
}

/* 页面 */
.page-main.page-split{
    padding: 0;
}
.page-main .page-banana .image-fixed {
	position: fixed;
	inset: 0;
}

.page-main .page-banana .image-fixed img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-main .article-fixed {
	position: relative;
	width: 60%;
	min-height: 100vh;
	z-index: 1;
	background: hsl(var(--bg-darker) / .9);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: rgb(0 0 0 / 50%) 0.5rem 0 1rem 0;
	animation: right 2s backwards;
}

.page-main .article-fixed {
	padding:2rem;
	color: hsl(var(--color-gray-700));
}

.page-main .article-fixed .crumbs_patch {
	font-size: .6em;
	color: hsl(var(--color-gray-500));
}

.page-main .article-fixed .article-title {
	font-size: 1.6em;
	text-align: center;
	padding-top: 2rem;
	padding-bottom: .5rem;
	color: hsl(var(--color-gray-900) /.7);
}

.page-main .article-fixed .article-info {
	font-size: .6em;
	text-align: center;
	padding-bottom: 1rem;
	color: hsl(var(--color-gray-500));
	display: flex;
	gap: .5rem;
    justify-content: center;
}
.page-main .article-fixed .article-info > *{
    display: flex;
    align-items: center;
    gap: .2rem;
}

@media (max-width:1024px) {
	body .page-main .page-banana .image-fixed {
		position: relative;
		height: 30vh;
	}

	body .page-main .article-fixed {
		width: 100%;
		min-height: auto;
		background: hsl(var(--bg-darker));
	}

	body .page-main .article-fixed {
		padding: 1rem;
	}

	body .page-main {
		padding: 1rem;
	}
}
/* 底部样式 */
.asymmetric-footer {
  position: relative;
    padding-block-start: 2rem;
  background:hsl(var(--bg-base));
  overflow: hidden;
    z-index: 1;
}

.footer-shape {
  position: absolute;
  top: 0;
  right: -50px;
  width: 40%;
  height: 100%;
  background: hsl(var(--color-primary) / .5);
  transform: skewX(350deg);
}

.footer-content {
    position: relative;
    padding-inline: 2rem;
    display: flex;
    justify-content: center;
    gap: 3rem
}
.asymmetric-footer .left-section ,.asymmetric-footer .right-section{
    padding: 1rem;
    background: hsl(var(--bg-darker) / .9);
    border-radius: 6px;
    max-width: 25rem;
    min-width: 25rem;
}
.footer-content .footer-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    line-height: 1;
}
.footer-content .footer-column .memory-header,.footer-content .footer-column .friends-header{
    display: flex;
    gap: .5rem;
}
.footer-content .footer-column .memory-header i,.footer-content .footer-column .friends-header i{
    font-size: 1.2em;
}
.left-section .footer-column h3{
    color: hsl(var(--color-gray-900));
    font-size: 1.2em;
    font-weight: 900;
}
.left-section .footer-column .memory-days{
    color: hsl(var(--color-gray-600));
}
.left-section .footer-column .memory-days .day-count{
    color: hsl(var(--color-primary));
    font-size: 1.1em;
    font-weight: 900;
}
.left-section .footer-column .memory-days span{
    font-size: .7em;
}
.left-section .footer-column .memory-list li{
    border-bottom: 1px dashed hsl(var(--color-gray-200) / .5);
    padding: .5rem 0;
    font-size: .8em;
    list-style: none;
    color: hsl(var(--color-gray-600));
}
.left-section .footer-column .memory-list li a{
    width: fit-content;
}
.right-section .friends-list{
    display: grid;
    grid: auto / repeat(2,1fr);
    gap: 0.75em;
}
.right-section .friends-list li {
    list-style: none;
    text-transform: capitalize;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: hsl(var(--color-gray-700));
}
.right-section .friends-list li a{
    position: relative;
    transition: .3s;
}
.right-section .friends-list li a:hover{
    color: hsl(var(--color-primary));
}
.right-section .friends-list li a::after {
    content: "" attr(title) "";
    font-size:.6em;
    opacity: .6;
    margin: 0 0 0 .5rem;
}
.right-section .friends-list .no-friends-hint {
    font-size: .6em;
    color: hsl(var(--color-gray-600));
}
.asymmetric-footer .footer-sign {
    display: flex;
    padding-block-start: 2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.asymmetric-footer .footer-sign svg{
    width: 25px;
    height: 25px;
    fill: hsl(var(--color-primary) / .9);
}
.asymmetric-footer .footer-sign p{
    font-size: .6em;
    color: hsl(var(--color-gray-700));
}
.asymmetric-footer .footer-bottom{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    background: hsl(var(--bg-darker));
    padding-block-start: 1rem;
    padding-block-end: 1rem;
    margin-block-start: 1rem;
    padding-inline: 1rem;
}
.asymmetric-footer .footer-bottom .elegant-footer{
    font-size: .6em;
    flex: auto;
    color: hsl(var(--color-gray-700));
}
.footer-bottom .elegant-footer .footer-meta {
    padding: .2rem 0;
}
.elegant-footer .footer-meta .theme-name{
    color: hsl(var(--color-primary) / .9);
}
.elegant-footer .footer-meta .divider{
    padding: 0 .2rem;
    opacity: .6;
}
.footer-bottom .elegant-footer .footer-poem {
    padding: .2rem 0;
}
.footer-bottom .elegant-footer .footer-poem p {
	margin: 0;
	position: relative;
}
.asymmetric-footer .footer-bottom .elegant-footer .footer-poem p::before,
.asymmetric-footer .footer-bottom .elegant-footer .footer-poem p::after {
	content: "“";
	opacity: 0.3;
	padding: 0 0.25rem;
	color: hsl(var(--color-primary) / .9);
}
.asymmetric-footer .footer-bottom .right {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}
.asymmetric-footer .footer-bottom .right a {
    cursor: pointer;
    color: hsl(var(--color-gray-900));
    font-size: .7em;
    filter: grayscale(1) opacity(.5);
    display: flex;
    flex-flow: nowrap row;
    align-items: center;
    white-space: nowrap;
    gap: 0 0.3rem;
    line-height: 1;
    background: none;
    transition: .3s;
}
.asymmetric-footer .footer-bottom .right a:hover {
    filter: grayscale(0) opacity(1);
}
.asymmetric-footer .footer-bottom .right a img{
    height: 1rem;
    width: 1rem;
}
.asymmetric-footer .footer-bottom .right a.upyun img{
    height: 3rem;
    width: 3rem;
}
@media (max-width: 1025px) {
    .asymmetric-footer .left-section, .asymmetric-footer .right-section{
        width: 100%;
        min-width: auto;
    }
    .footer-content {
        flex-direction: column;
    }
    .asymmetric-footer .footer-bottom .elegant-footer {
        flex: none;
    }
    .asymmetric-footer .footer-bottom{
        display: flex;
        justify-content: center;
        padding-block-end: calc(var(--nav-height) + 1rem);
    }
}

/* 首页相册分类样式 */
.category-photos .photos-card {
    position: relative;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex: auto;
    outline: thin solid hsl(var(--color-primary) / 5%);
    border-radius: 6px;
    overflow: hidden;
    transition: 1s;
}
.category-photos .photos-card:hover {
    flex-grow: 1.5;
}
.category-photos .photos-card figure {
    position: relative;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
}
.photos-card figure:after {
    position: absolute;
    inset: 0;
    content: "";
    z-index: 0;
    background: linear-gradient(rgb(0 0 0 / 20%), #0000 30%,#000);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    -webkit-mask: linear-gradient(#0000, #000 80%);
    mask: linear-gradient(#0000, #000 80%);
    pointer-events: none;
    border-radius: inherit;
}
.photos-card figure img {
    position: relative;
    object-fit: cover;
    width: 100%;
    vertical-align: middle;
    height: var(--siz, min(20rem, 26vw));
    transition: .3s;
}
.photos-card:hover figure img {
    transform: scale(.9);
    border-radius: 6px;
}
.photos-card hgroup{
    --line-clamp:1;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    place-content: space-between;
    align-items: center;
    color: hsl(var(--color-gray-700));
    inset:.5rem;
    gap: 0.5rem;
}
.photos-card hgroup a{
    display: flex;
    opacity: 0;
    transform: translateY(100%);
    transform-origin: top;
    transition: .5s;
}
.photos-card:hover hgroup a{
    transform: none;
    opacity: 1;
}
.photos-card hgroup h6 {
    color: hsl(var(--color-gray-400));
    font-size: .9em;
}
.photos-card hgroup .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    font-size: .7em;
    flex: 100%;
    gap: 0 1rem;
    margin: 0 0 auto;
    opacity: 0;
    transform: translateY(-100%);
    transform-origin: bottom;
    transition: .5s;
}
.photos-card:hover hgroup .post-meta{
    transform: none;
    opacity: 1;
}
.photos-card hgroup .post-meta > *{
    display: flex;
    align-items: center;
    gap: .2rem;
    color: hsl(var(--color-gray-300));
    font-size: .6em;
}
.photos-card hgroup b{
    line-height: 1;
    background: hsl(var(--bg-base) / .2);
    padding: .5rem 1rem;
    border-radius: 2rem;
    color: hsl(var(--color-gray-200));
    font-size: .7em;
    transform: none;
    opacity: 1;
    transition: .5s;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.photos-card:hover hgroup b{
    opacity: 0;
    transform: translateY(100%);
    transform-origin: top;
}
@media (max-width:1025px) {
    .photos-card{
        --siz: min(50vw, 13rem);
    }
    
}
/* 分类页默认样式 */
.category-main .articles-container .articles-main{
    display: grid !important;
    grid: auto-flow dense / repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    align-content: center;
    gap: 2rem !important;
}
.category-main .category-default{
    background: hsl(var(--bg-base));
    overflow: hidden;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    padding: .5rem;
    outline: 1px solid hsl(var(--color-primary) / .05);
}
.category-main .articles-container .articles-main figure {
    position: relative;
    transition: 1s;
    border-radius: 3px;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
}
.category-main .articles-container .articles-main figure img {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: .5s;
    -webkit-transition: .5s;
}
.category-main .articles-container .articles-main figure time{
    position: absolute;
    inset: auto 0 .3rem 0;
    display: flex;
    justify-content: center;
    font-size: .7em;
    gap: .2rem;
    line-height: 1;
    z-index: 1;
    color: hsl(var(--color-gray-300));
}
.category-main .articles-container .articles-main figure time > i{
    font-size: 1.2em;
}
.category-main .articles-container .articles-main figure:after {
    position: absolute;
    inset: 0;
    content: "";
    z-index: 0;
    background: linear-gradient(rgb(0 0 0 / 20%), #0000 30%, #000);
    -webkit-mask: linear-gradient(#0000, #000 80%);
    mask: linear-gradient(#0000, #000 80%);
    pointer-events: none;
    border-radius: inherit;
}
.category-main .default-category-content{
    background: hsl(var(--bg-base));
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem .5rem;
    -webkit-mask: linear-gradient(to bottom, rgb(0 0 0 / 0), #000 1rem);
}

/* 友链页面 */
.page-main {
    padding: 2rem;
}
.article-friends{
    display: flex;
    gap: 2rem;
    padding: 2rem;
    align-items: flex-start;
}

.links-column {
    display: grid !important;
    grid: auto-flow dense / repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    align-content: center;
    gap: 1rem !important;
    max-width: calc(100% - 30rem);
    width: 100%;
}
.links-column span{
    font-size: .7em;
    color: hsl(var(--color-gray-400));
}
.application-requirements {
    width: 100%;
    max-width: 30rem;
    flex-shrink: 0;
    height: 100%;
}
.page-main .links-column a{
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .5rem;
    background: hsl(var(--bg-base));
    border-radius: 6px;
    box-shadow: 0 0.2rem 1rem 0 hsl(0deg 0% 15% / 4%);
    outline: thin solid hsl(var(--color-primary) / .03);
    transition: .3s;
}
.page-main .links-column a:hover{
    box-shadow: 0 7px 15px 0 hsl(var(--color-primary) / .1);
    outline: thin solid hsl(var(--color-primary) / .1);
}

.page-main .links-column a img{
    width: 50px;
    height: 50px;
    border-radius: 6px;
}
.page-main .links-column a h6{
    font-size: .9em;
    color: hsl(var(--color-gray-800));
}
.page-main .links-column a span{
    font-size: .7em;
    color: hsl(var(--color-gray-500));
}
@media (max-width:1025px) {
    .article-friends {
        display: block;
        padding: 0;
    }
    .links-column{
        max-width: none;
    }
    .application-requirements{
        max-width: none;
    }
}

@media (max-width:1025px) {
    .index-main .articles-container{
        max-width: none;
    }
    
}

/* 文章页功能美化 */
.article-content .table-wrapper  {
    max-height: 20rem;
    white-space: pre;
    font-size: .7em;
    border: thin solid hsl(var(--color-primary) / 20%);
    border-radius: 6px;
    overflow: scroll visible;
    scrollbar-width: none;
    color: hsl(var(--color-gray-700));
    align-items: normal !important;
}
.article-content .table-wrapper table{
    white-space: pre-wrap;
    table-layout: fixed;
    width: 100%;
}
.article-content .table-wrapper table thead{
    border: 0;
    font-size: 1.1em;
    font-weight: 700;
    color: hsl(var(--color-gray-900));
}
.article-content .table-wrapper table thead tr{
    transition: .3s;
}
.article-content .table-wrapper table thead tr th{
    position: sticky;
    top: 0;
    border: 0;
    background: hsl(var(--color-primary) / .2);
}
.article-content .table-wrapper tbody tr:nth-child(odd) {
    background: rgba(167,177,190,.04);
}
.article-content .table-wrapper td, .article-content .table-wrapper th{
    padding: 12px;
    padding-inline: 16px;
    border: 0;
}
.article-content .table-wrapper td:not([align]), .article-content .table-wrapper th:not([align]){
    text-align: center;
}

/* 文章页图片集功能美化 */
.article-content .photo-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.article-content .photo-grid .text-layout-img{
    flex-grow: 1;
}
.article-content .photo-grid .text-layout-img{
    flex-grow: 1;
}
.article-content .photo-grid .text-layout-img > span{
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
}
.article-content .photo-grid >* img {
    display: block;
    max-width: 100%;
    border-radius:12px;
    object-fit: cover;
    transition: 0.5s;
    height: 15rem;
    max-height: 30vw;
    flex-grow: 1;
}
/* 图片排版 */
.article-content .text-layout-img>span{
    position: relative;
    border-radius: 12px;
    overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.article-content img {
	height: auto;
	cursor: zoom-in;
	border-radius: 12px;
	max-width: 100%;
	display: block;
	position: relative;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.article-content .text-layout-img {
	position: relative;
	border-radius: 12px;
	margin: auto;
	display: flex;
	margin-bottom:1rem;
    justify-content: center;
}
.article-content .text-layout-img span b{
    position: absolute;
    bottom: 0;
    background: hsl(var(--bg-base) / .5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    right: 0;
    left: 0;
    border-radius: 0 0 10px 12px;
    font-size: .6em;
    padding: .5rem;
    text-align: center;
    color: hsl(var(--color-gray-800));
}
/* 网易云样式 */
.article-content media-embed iframe {
	width: 100%;
	transition: .5s .5s;
}

.article-content .netease-music {
	width: 100%;
	height: 65px;
	padding: 0;
	overflow: hidden;
	margin:1rem 0;
}

/* qq音乐样式 */
.article-content .qq-music {
	width: 100%;
	height: 66px;
	padding: 0;
	overflow: hidden;
	margin:1rem 0;
}

/* 视频 */
.article-content .iframe-video {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-inline: auto;
	aspect-ratio: 16/9;
	/* 竖屏视频比例 */
	background: #000;
	color: #fff;
	margin: 0 auto;
	overflow: hidden;
	margin:1rem 0;
}

.article-content .iframe-video iframe {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: inherit;
	align-self: flex-start;
	z-index: 1;
	position: relative;
}

/* 多媒体 */
.article-content media-embed {
	display: block;
	position: relative;
	background: hsl(var(--bg-base));
	border-radius: 12px;
	outline: thin solid hsl(var(--color-primary) / .03);
}

.article-content media-embed:not(.loaded) iframe {
	opacity: 0;
	pointer-events: none;
}

.article-content media-embed:not(.loaded) .loading {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: .8em;
	width: fit-content;
	height: fit-content;
	line-height: 1;
	inset: 1em 0 auto;
	margin: auto;
	gap: .5em;
	color: hsl(var(--color-gray-600));
	padding: 1em 2em;
	border-radius: 2em;
	pointer-events: none;
	opacity: .5;
}

.article-content media-embed:not(.loaded) .loading:before {
	content: "";
	border-top: 2px solid hsl(var(--color-gray-600));
	border-radius: 50%;
	width: 1em;
	aspect-ratio: 1;
	animation: rotate 2s linear infinite;
}

.article-content media-embed.loaded .loading {
	display: none;
}

/* 链接样式 */
.article-content a:not([class]) {
	cursor: pointer;
	position: relative;
    color: hsl(var(--color-primary) / 90%);
    text-decoration: none;
    word-break: break-all;
}
.article-content a:not([class])::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transition: all 0.7s, background-position 0s ease 0s;
    background: linear-gradient(90deg,hsl(var(--color-primary) / 90%),hsl(var(--color-primary) / 50%)) no-repeat 50% 100% / 0 1px;
}
.article-content a:not([class]):hover::after {
    background-position-x: 50%;
    background-size: 100% 1px;
    transform: none;
}
/* 文章代码块美化 */
.article-content pre {
	background: hsl(var(--bg-base));
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    color: hsl(var(--color-gray-700));
    max-height: 20rem;
    line-height: 2;
}
.article-content pre code[class*="lang-"] {
    background: none;
    padding: 0;
}
.article-content code:not([class]) {
	font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    color: hsl(var(--color-gray-700));
    background: hsl(var(--color-primary) / .05);
    padding: 0.2em 0.8em;
    border-radius: 10px;
}

/* 引用样式 */
.article-content blockquote {
	border-left: 3px solid hsl(var(--color-primary));
    padding-inline: 1.2rem .5em;
    color: hsl(var(--color-gray-800));
    padding-block: 1rem;
    font-size: 1em;
    background: hsl(var(--bg-base));
    outline: thin solid hsl(var(--color-primary) / .01);
    border-radius: 6px;
    transition: .3s;
}
.article-content blockquote:hover {
    outline: thin solid hsl(var(--color-primary) / .1);
}

/* 加粗 */
.article-content strong {
	font-weight: bold;
    color: hsl(var(--color-gray-900));
    padding: .1rem;
}

/* 数字列表 */
.article-content ol {
    list-style-type: none;
    counter-reset: item;
}

.article-content ol li {
    position: relative;
    padding: .5rem;
    margin-block: .5rem;
    font-size: .95em;
    border-radius: 6px;
    color: hsl(var(--color-gray-700));
    transition: .3s;
    opacity: 1;
}
.article-content ol li::before {
    content: counter(item) ". ";
    counter-increment: item;
    color: hsl(var(--color-primary) / .5);
    font-weight: bold;
    margin-right: 10px;
    font-size: 1em;
}

.article-content ol li:hover {
    background: hsl(var(--bg-base));
    opacity: 1;
}

.article-content ol:hover li {
    opacity: 0.5;
}

.article-content ol:hover li:hover {
    opacity: 1;
}
/* 删除线 */
.article-content del{
    position: relative;
    display: inline-block;
    color: hsl(var(--color-gray-300));
    text-decoration-color: hsl(var(--color-gray-600));
    text-decoration-style: wavy;
}
/* 分割线 */
.article-content hr {
    /* 重置默认样式 */
    border: none; /* 去掉默认的边框 */
    margin: 0; /* 去掉默认的外边距 */
    padding: 0; /* 去掉默认的内边距 */

    /* 自定义样式 */
    color: hsl(var(--color-gray-300));
    position: relative;
    border-bottom: 2px dashed hsl(var(--color-primary));
    height: 25px; /* 给予足够的高度来显示文本 */
    line-height: 2; /* 调整行高 */
    text-align: end;
    margin-bottom: 25px;
}

.article-content hr::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: end;
    color: hsl(var(--color-primary) / .3);
    font-size: .6em;
}
/* 下划线 */
.article-content u {
    border-bottom: 2px solid hsl(var(--color-primary) / .8);
    text-decoration: unset;
    margin-inline:0.25rem;
    color: hsl(var(--color-gray-800));
}
/* 文里带有标签 */
.article-content a.tag-link {
    color: hsl(var(--color-primary) / .8);
    display: inline-block;
    -webkit-transition: transform .3s linear;
    transition: transform .3s linear;
}
.article-content a.tag-link:hover {
    background: hsl(var(--bg-base));
    color: hsl(var(--color-gray-800));
    font-weight: 700;
    -webkit-transform-origin: center 130%;
    transform-origin: center 60%;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.article-content{
    font-size: 1em;
    color: hsl(var(--color-gray-800));
}


/* 通用动画 */
@media (min-width:1025px) {
	@keyframes min-height {
		0% {
			min-height: 100vh
		}

		100% {
			min-height: 60vh
		}
	}

	@keyframes right {
		0% {
			width: 100%
		}

		100% {
			width: 60%
		}
	}

}