/* Copyright (c) 2026 dsy4567, view license at <https://github.com/dsy4567/dsy4567.github.io/blob/main/LICENSE.md> */

@charset "utf-8";

/*

Ctrl + F 导航

延后显示元素
@keyframes
@media
::*
html/body/通用元素
通用工具类 class
导航栏、左右栏
导航栏和进度条
main、左右栏
左栏
页脚
侧边按钮-通用
侧边按钮-关闭侧边按钮
侧边按钮-关闭侧边按钮、回到顶部
侧边按钮-网易云音乐
侧边按钮-主题
首页
博客
友链
移动端

*/

/* ==================== 延后显示元素 ==================== */
main > #分界线 {
	visibility: visible;
}
.进度条外面,
div#侧边按钮容器 {
	display: block;
}

/* ==================== @keyframes ==================== */
@keyframes 进度条 {
	from {
		width: 0%;
	}
	to {
		width: 90%;
	}
}
@keyframes 匀速转 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes 显示 {
	0% {
		opacity: 0;
		transform: translateY(64px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
@keyframes 隐藏 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes 闪烁 {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	50.1% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes 封面平移 {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(calc(var(--item-height) - 100%));
	}
}
@supports (animation-timeline: scroll()) {
	@keyframes 顶部大图背景 {
		0% {
			/* border-radius: var(--border-radius); */
			/* 平移窗口围绕图片中线对称：起点在中线前 平移量/2 处，横图平移量为 0，此处即 0 */
			transform: translateY(calc((var(--cover-travel) - var(--cover-overflow)) / 2));
		}
		100% {
			/* transform: translateY(max(calc(var(--cover-scroll-range) * -1), calc(100cqh - 100%))); */
			/* 终点在中线后 平移量/2 处；平移量取溢出量与一个滚动范围中的较小者，横图为 0 */
			transform: translateY(calc((0px - var(--cover-overflow) - var(--cover-travel)) / 2));
		}
	}
	@keyframes 顶部大图桌面端 {
		/* 0% {
		} */
		16% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(32px);
		}
	}
	@keyframes 顶部大图移动端 {
		0% {
			transform: translateY(0);
			/* border-radius: var(--border-radius); */
		}
		24% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-79px);
		}
		66% {
			opacity: 1;
		}
		100% {
			opacity: 0;
			transform: translateY(-158px);
		}
	}
	@keyframes 左栏移动端 {
		0% {
			opacity: 1;
		}
		24% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes 左栏阴影上移动端 {
		0% {
			opacity: 1;
		}
		24% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes 左栏下透明遮罩移动端 {
		0% {
			border-top: 0 solid transparent;
		}
		24% {
			border-top: 0 solid transparent;
		}
		24.01% {
			border-top: min(var(--height), var(--maxh)) solid transparent;
		}
		100% {
			border-top: min(var(--height), var(--maxh)) solid transparent;
		}
	}
}
@keyframes 高频闪烁 {
	0% {
		opacity: 0.3;
	}
	25% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
	75% {
		opacity: 1;
	}
	100% {
		opacity: 0.3;
	}
}
@keyframes 延迟不可点击 {
	0% {
		pointer-events: auto;
	}
	99.9% {
		pointer-events: auto;
	}
	100% {
		pointer-events: none;
	}
}
/* 循环动画 */
.加载中 .网易云音乐-最近在听-精选歌词-单句,
.加载中 .网易云音乐-最近在听-精选歌词-歌曲信息,
.加载中 .网易云音乐-最近在听-播放排行项,
.侧边按钮容器-拥有更多选项#网易云音乐 #网易云音乐封面,
.侧边按钮容器-拥有更多选项#网易云音乐 #网易云音乐封面 + svg {
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

/* ==================== @media ==================== */
@media (forced-colors: active) {
	a:hover {
		outline: 2px solid #0000ff;
	}
	svg.fill {
		fill: #0000ff !important;
	}
	svg.stroke {
		stroke: #0000ff !important;
	}
}
@media (prefers-color-scheme: light) {
	@media (forced-colors: active) {
		a:hover {
			outline: 2px solid #0000ff;
		}
		svg.fill {
			fill: #0000ff !important;
		}
		svg.stroke {
			stroke: #0000ff !important;
		}
	}
}
@media (prefers-color-scheme: dark) {
	@media (forced-colors: active) {
		a:hover {
			outline: 2px solid #ffff00;
		}
		svg.fill {
			fill: #ffff00 !important;
		}
		svg.stroke {
			stroke: #ffff00 !important;
		}
	}
}
@media (prefers-reduced-data: reduce) {
}
@media print {
	html,
	body {
		--bg-color: #fff !important;
		--surface-1: #fff !important;
		--surface-2: #fff !important;
		--text-color: #000 !important;
		--overlay: #0000 !important;
		--overlay-strong: #0000 !important;
		--selection-bg: #0000 !important;
		--accent-color: #000 !important;
		--accent-color-transparent: #0000 !important;
		--accent-text-color: #fff !important;
		color-scheme: light !important;
	}
	a::after {
		font-size: 0.8em;
		opacity: 0.8;
		word-break: break-all;
		content: " (" attr(href) ")" !important;
	}
	a.hash链接::after {
		content: "" !important;
	}
	main > .右 :is(h1, h2, h3, h4, h5, h6):not(.含图标)::before {
		opacity: 0;
	}
	main {
		flex-direction: column !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
	}
	section,
	article,
	img,
	video {
		border: none !important;
	}
	section,
	article {
		box-shadow: none !important;
		margin-top: unset !important;
		padding: 8px !important;
	}
	main > .右 {
		display: block !important;
		padding: 0 !important;
		position: unset !important;
		width: 100% !important;
	}
	nav {
		transform: translateY(0px) !important;
		box-shadow: none !important;
		position: relative !important;
		border-bottom: 1px solid #000;
	}
	x-spoiler {
		color: #fff;
	}
	pre {
		background-color: #fff !important;
		color: #000 !important;
		border: var(--border-width) var(--border-style) #000 !important;
	}
	main > .左,
	main > #分界线,
	footer,
	nav#导航栏,
	body > #侧边按钮容器,
	body > #侧边遮罩 {
		display: none !important;
	}
}

/* ==================== ::* ==================== */
body::selection {
	background-color: var(--accent-color);
	color: var(--accent-text-color);
}

::-webkit-scrollbar-thumb:active {
	background-color: var(--overlay-strong);
}

/* ==================== html/body/通用元素 ==================== */
button:disabled,
input:disabled {
	cursor: not-allowed;
}
*:focus-visible {
	outline: 2px dashed var(--link-color) !important;
}
/* 动态换页后焦点会落到正文容器 main > .右[tabindex="-1"] 上，它不是交互控件，
   隐藏其焦点轮廓，避免键盘换页时给整篇正文描边；可交互元素的轮廓仍由上面的规则保留 */
main > .右[tabindex="-1"]:focus,
main > .右[tabindex="-1"]:focus-visible {
	outline: none !important;
}
a {
	-webkit-tap-highlight-color: var(--accent-color-transparent);
}
a:hover,
a:focus-visible {
	/* 用长写属性代替 text-decoration 简写：简写含线宽，Chrome 87+ 才支持，86 会整条丢弃 */
	text-decoration-line: underline;
	text-decoration-color: var(--link-color);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
a:has(img, svg) {
	text-decoration: none;
}

abbr {
	cursor: help;
	text-decoration: dashed underline var(--accent-color);
}

html,
body,
div,
section,
article,
nav,
main > .右::after {
	transition: var(--transition) background-color;
}

main > .右 :is(.高亮-滚动, .高亮-鼠标):is(h1, h2, h3, h4, h5, h6):not(.含图标)::before {
	opacity: 1;
}
main > .右 :is(h1, h2, h3, h4, h5, h6):not(.含图标):target::before {
	background-color: mark;
	opacity: 1;
}

/* ==================== 通用工具类 class ==================== */
/* 仅可通过键盘聚焦显示 */
.隐藏链接:focus-visible {
	width: auto;
	height: auto;
	opacity: 1;
	z-index: 999;
}

.横幅 {
	animation-duration: var(--transition);
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: 显示;
}
div.通知 {
	animation-duration: var(--transition);
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: 显示;
	/* animation-name: 隐藏; */
	box-shadow: var(--box-shadow-strong);
	background-color: var(--surface-1);
	border: var(--border);
	border-radius: var(--border-radius);
	opacity: 0;
	margin: 16px;
	padding: 8px;
	pointer-events: none;
	position: fixed;
	bottom: 32px;
	word-break: break-all;
	z-index: 1008;
}

.悬浮卡片 {
	background-color: var(--surface-1);
	border: var(--border);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow-strong);
	margin: 8px;
	padding: 4px;
	max-height: 33vh;
	position: fixed;
	overflow: auto;
	z-index: 997;
}

.悬浮卡片提示 {
	background-color: var(--accent-color);
	color: var(--accent-text-color);
}

.悬浮卡片错误 {
	background-color: #000;
	color: #f00;
}

.横幅 {
	background-color: var(--surface-2);
	box-shadow: var(--box-shadow-strong);
	font-size: larger;
	padding: 2px;
	position: fixed;
	bottom: 0;
	text-align: center;
	width: 100%;
	z-index: 996;
	cursor: pointer;
}

.暂停动画 {
	animation-play-state: paused;
}
/* ==================== 导航栏、左右栏 ==================== */
/* 封面滚动动画的滚动范围：封面、封面背景层、左栏及其阴影共用同一段进度，完成时刻才会一致。
   桌面端封面随页面滚出视口即播放完毕，故取「封面高度 + 顶部偏移」 */
:root {
	--cover-scroll-range: calc(45vh + 108px);
}
nav#导航栏 {
	box-shadow: var(--box-shadow);
	transition:
		var(--transition) background-color,
		var(--transition) transform;
	backdrop-filter: blur(4px);
}
.隐藏导航栏 #导航栏 {
	transform: translateY(calc(-50px - 8px));
}

/* ==================== 导航栏和进度条 ==================== */
.进度条外面 {
	background-color: transparent;
	transition:
		var(--transition-slow) opacity,
		var(--transition) background-color;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	/* 层叠顺序：.进度条外面 1005 < #侧边按钮容器 1007 < .通知 1008。侧边按钮叠于 .进度条外面 之上 */
	z-index: 1005;
}
.进度条外面.显示 {
	background-color: var(--overlay);
	opacity: 1;
	pointer-events: auto;
}
.进度条 {
	animation-duration: 10s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(0, 0, 0.3, 1);
	background-color: var(--accent-color);
	box-shadow: var(--box-shadow-strong);
	position: fixed;
	top: 0;
	left: 0;
	transition:
		var(--transition-slow) width,
		var(--transition) background-color;
	width: 100%;
	max-width: 100%;
	height: 2px;
}
.进度条外面.显示 > .进度条 {
	animation-name: 进度条;
}

@supports (animation-timeline: scroll()) {
	/* 封面平移动画落在 .顶部大图层 > img 上：图片按自身高度溢出容器，平移量用 cqh 引用容器高度 */
	body > #顶部大图 {
		animation-name: 顶部大图桌面端;
		container-type: size;
	}
	/* fill-mode 必须放在 @supports 内：不支持滚动时间线时动画时长为 0s，
	   若同时带上 both 会直接停在 100% 关键帧（移动端大图永久不可见） */
	body > #顶部大图,
	.顶部大图层 > img {
		animation-fill-mode: both;
		animation-timing-function: linear;
	}
	.顶部大图层 > img {
		/* 溢出量 = 图片渲染高度 - 容器高度；横图由 object-fit: cover 只裁左右，溢出为 0 */
		--cover-overflow: calc(100% - 100cqh);
		/* 实际平移量，不超过一个滚动范围；溢出更小时即为溢出量 */
		--cover-travel: min(var(--cover-overflow), var(--cover-scroll-range));
		animation-name: 顶部大图背景;
	}
	body > #顶部大图,
	.顶部大图层 > img,
	main .左,
	main > .左::before,
	main > .左::after {
		animation-timeline: scroll(root);
		animation-range: 0 var(--cover-scroll-range);
	}
}

/* ==================== main、左右栏 ==================== */
main > #分界线 {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100vh - var(--border-width) * 2);
	transition: var(--transition) background-color;
}
main > #分界线::after {
	content: "";
	background-color: var(--surface-1);
	border-radius: var(--border-radius);
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
}
body.宽屏 > main > #分界线 {
	margin: 0;
	position: fixed;
	left: 0px;
	top: 0;
}
main > #分界线 > .特小尺寸 {
	background: var(--surface-1);
	border-radius: 50%;
	box-shadow: var(--box-shadow-strong);
	opacity: 0;
	position: absolute;
	transition:
		var(--transition) opacity,
		var(--transition) transform;
	z-index: 1;
}
main > #分界线 > .特小尺寸 > path {
	transform: translateX(-2px);
}
main > #分界线:hover > .特小尺寸,
main > #分界线:focus-visible > .特小尺寸 {
	opacity: 1;
}
body.宽屏 > main #分界线 > .特小尺寸 {
	transform: rotateY(180deg);
}

body.宽屏 > main {
	max-width: 1800px;
}
body.宽屏 > main .左 {
	display: none;
	width: 0%;
}
body.宽屏 > main .右 {
	width: 100%;
	max-width: unset;
}

/* ==================== 左栏 ==================== */
main > .左 {
	transition: var(--transition) background-color;
}

section#我 > .头像 {
	transition: var(--transition) transform;
}
section#我 > .头像:hover {
	transform: rotate(360deg);
}

.标签 > div {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.标签 > div > a {
	color: var(--text-color);
	background-color: var(--accent-color-transparent);
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	line-height: 3;
	margin-left: 0px;
	padding: 0 8px;
	white-space: nowrap;
}

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

/* ==================== 侧边按钮-通用 ==================== */
div#侧边按钮容器 {
	--border: 1px solid var(--overlay);
	--border-soft: 1px solid var(--overlay);
	position: fixed;
	right: 0px;
	z-index: 1007;
	top: max(-46px, calc(75vh - 46px * 3));
	transition-delay: 0ms;
}
@media (any-pointer: coarse) {
	div#侧边按钮容器 {
		top: max(0px, calc(75vh - 46px * 4));
	}
}
.侧边按钮容器-无更多选项,
.侧边按钮容器-拥有更多选项 {
	box-shadow: var(--box-shadow-strong);
	background-color: var(--surface-2);
	border: var(--border);
	border-radius: 50%;
	display: flex;
	opacity: 0.7;
	margin-top: 5px;
	padding: 4px;
	position: relative;
	transform: translateX(-4px);
	align-items: center;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	justify-content: center;
}
/* 黑色半透明全屏遮罩，挡住面板外的点击，点击遮罩/收起按钮自动隐藏。
   元素由 js/main.js 动态创建，紧邻 #侧边按钮容器 之后（与容器同为 body 的直接子元素），
   故这里用兄弟选择器而非 body:has()：展开任一 .侧边按钮容器-拥有更多选项（悬停或内部聚焦）时
   由 JS 添加 .显示，指针离开面板即移除 */
div#侧边遮罩 {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	opacity: 0;
	transition:
		opacity var(--transition),
		pointer-events var(--transition);
	transition-behavior: allow-discrete;
	transition-delay: 0s;
	pointer-events: none;
	z-index: 1006;
}
/* 加类名是为了防止首屏闪烁，元素必须变化一次才能应用样式 */
div#侧边遮罩.隐藏 {
	background-color: #000;
}
div#侧边遮罩.显示 {
	background-color: #000;
	opacity: 0.7;
	pointer-events: auto;
	transition-delay: var(--transition);
}
body.正在加载 > #侧边遮罩.显示 {
	opacity: 0;
}

/* 键盘聚焦（:focus-visible）判定由 JS 给容器加 .有键盘焦点 承担，取代 :has(:focus-visible)：
   鼠标点击得到的焦点不是 :focus-visible，不会加该类名，故不会把面板误判为展开（见 js/main.js 的 同步焦点状态） */
#侧边按钮容器 > .侧边按钮容器-拥有更多选项:hover,
#侧边按钮容器 > .侧边按钮容器-拥有更多选项:focus-visible,
#侧边按钮容器 > .侧边按钮容器-无更多选项:hover,
#侧边按钮容器 > .侧边按钮容器-无更多选项:focus-visible,
#侧边按钮容器.有键盘焦点 > .侧边按钮容器-拥有更多选项:focus-within {
	opacity: 1;
}
#侧边按钮容器 > .侧边按钮容器-拥有更多选项:hover,
#侧边按钮容器 > .侧边按钮容器-拥有更多选项:focus-visible,
#侧边按钮容器 > .侧边按钮容器-无更多选项:hover,
#侧边按钮容器 > .侧边按钮容器-无更多选项:focus-visible,
#侧边按钮容器.有键盘焦点 > .侧边按钮容器-拥有更多选项:focus-within,
#侧边按钮容器 > .侧边按钮容器-无更多选项#关闭侧边按钮 {
	border-radius: unset;
	border-top-left-radius: 50%;
	border-bottom-left-radius: 50%;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 1px solid transparent;
	transform: translateX(1px);
}

#侧边按钮容器 > .侧边按钮容器-拥有更多选项:hover,
#侧边按钮容器 > .侧边按钮容器-拥有更多选项:focus-visible,
#侧边按钮容器.有键盘焦点 > .侧边按钮容器-拥有更多选项:focus-within {
	border-bottom-left-radius: 0;
	z-index: 1;
}

/* 防动画期间误触 */
#侧边按钮容器 > .侧边按钮容器-拥有更多选项::before,
#侧边按钮容器 > .侧边按钮容器-无更多选项::before {
	display: block;
	position: absolute;
	height: calc(100% + 2px);
	z-index: 1;
}
#侧边按钮容器 > .侧边按钮容器-无更多选项:hover::before {
	content: "";
	background: transparent;
	border-radius: 50%;
	left: -6px;
	width: calc(100% + 2px);
}
#侧边按钮容器 > .侧边按钮容器-拥有更多选项::before {
	content: "";
	background-color: transparent;
	left: 0;
	bottom: -7px;
	width: var(--container-width);
	height: calc(100% + 7px);
	visibility: visible;
	transition: var(--transition) visibility;
}
#侧边按钮容器 > .侧边按钮容器-拥有更多选项:hover::before {
	visibility: hidden;
}

#侧边按钮容器 > .侧边按钮容器-拥有更多选项,
#侧边按钮容器 > .侧边按钮容器-无更多选项,
div#侧边按钮容器 .更多选项 {
	transition:
		var(--transition) border-radius,
		var(--transition) transform,
		var(--transition) opacity,
		var(--transition) visibility;
	transition-behavior: allow-discrete;
}

div#侧边按钮容器 .更多选项 {
	--padding-left-overflow: calc(var(--container-width) - 100vw);
	background: var(--surface-2);
	color: var(--text-color);
	border: 1px solid transparent;
	border-top: var(--border);
	border-left: var(--border);
	border-right: 1px solid transparent;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	padding-right: 32px;
	padding-left: var(--padding-left-overflow);
	transform: translateX(28px);
	box-sizing: border-box;
	height: 36px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	overflow: auto;
}
div#侧边按钮容器 .更多选项 + .更多选项 {
	border-bottom-left-radius: 19px;
	border-top: var(--border);
}
#侧边按钮容器 > .侧边按钮容器-拥有更多选项:hover > .更多选项,
#侧边按钮容器 > .侧边按钮容器-拥有更多选项:focus-visible > .更多选项,
#侧边按钮容器.有键盘焦点 > .侧边按钮容器-拥有更多选项:focus-within > .更多选项 {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
}

.侧边按钮容器-更多选项-按钮 {
	background-color: var(--surface-2);
	box-sizing: border-box;
	border: var(--border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px 0px 4px 4px;
	padding: 5px;
	cursor: pointer;
	width: 24px;
	height: 24px;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}
.侧边按钮容器-更多选项-按钮.激活,
.侧边按钮容器-更多选项-按钮:active {
	background-color: var(--overlay);
}

/* ==================== 侧边按钮-关闭侧边按钮 ==================== */
/* 只在触摸屏出现；默认视觉透明但保持可点、留在 AT 树中，展开任一面板时才显露 */
#侧边按钮容器 > .侧边按钮容器-无更多选项#关闭侧边按钮 {
	opacity: 0;
	display: none;
}
.侧边按钮容器-无更多选项#关闭侧边按钮 > svg {
	transform: translateX(2px) rotateY(180deg);
}
@media (any-pointer: coarse) {
	#侧边按钮容器 > .侧边按钮容器-无更多选项#关闭侧边按钮 {
		display: flex;
	}
	div#侧边按钮容器:has(> .侧边按钮容器-拥有更多选项:hover)
		> .侧边按钮容器-无更多选项#关闭侧边按钮 {
		border: var(--border);
		border-radius: 50%;
		opacity: 1;
		pointer-events: auto;
		transform: translateX(-4px);
	}
}

/* ==================== 侧边按钮-回到顶部 ==================== */
/* 页面处于顶部时不显示回到顶部：延迟 3s 后禁止点击，避免滚动/换页途中误触 */
body.顶部 .侧边按钮容器-无更多选项#回到顶部 {
	animation-name: 延迟不可点击;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	opacity: 0;
}
.侧边按钮容器-无更多选项#回到顶部 {
	animation-name: none;
}

/* ==================== 侧边按钮-网易云音乐 ==================== */
.侧边按钮容器-拥有更多选项#网易云音乐 {
	--container-width: calc(32px * 8);
}

#网易云音乐 #网易云音乐封面,
#网易云音乐 #网易云音乐封面 + svg {
	animation-duration: 5s;
	user-select: none;
}
#网易云音乐 #网易云音乐封面 {
	border-radius: 50%;
	display: none;
}
#网易云音乐 #网易云音乐封面[src*="http"] {
	display: block;
	object-fit: cover;
	object-position: center;
}
#网易云音乐 #网易云音乐封面[src*="http"] + svg {
	display: none;
}

#网易云音乐 .网易云封面旋转#网易云音乐封面 {
	animation-name: 匀速转;
	border-radius: 50%;
}
/* 本条须排在 .网易云封面旋转 之后：两者同特异性，靠源序让加载闪烁压过旋转，避免 !important */
#网易云音乐 #网易云音乐封面.网易云加载闪烁,
#网易云音乐 #网易云音乐封面.网易云加载闪烁 + svg {
	animation-name: 高频闪烁;
	animation-duration: 5s;
	animation-play-state: running;
}

#侧边按钮容器 > .侧边按钮容器-拥有更多选项#网易云音乐:hover,
#侧边按钮容器 > .侧边按钮容器-拥有更多选项#网易云音乐:focus-visible,
#侧边按钮容器.有键盘焦点 > .侧边按钮容器-拥有更多选项#网易云音乐:focus-within {
	transform: translateX(calc((var(--container-width) - 16px) * -1));
}

#网易云音乐 #歌词 {
	--font-size: 12px;
	color: var(--accent-color);
	font-size: var(--font-size);
	display: flex;
	flex-direction: column-reverse;
	position: absolute;
	user-select: none;
	pointer-events: none;
	right: 42px;
	text-align: end;
	word-wrap: break-word;
	width: max-content;
	min-width: 64px;
	max-width: min(calc(100vw - 306px), 33vw);
	height: calc(var(--line-height) * var(--font-size));
	transition:
		var(--transition) color,
		var(--transition) background-color;
	transition-delay: 0s;
}
#侧边按钮容器.更多选项已激活 #歌词 {
	color: #fff;
	transition-delay: var(--transition);
}

#网易云音乐 > #音乐控件 {
	width: calc(var(--container-width) - 14px);
	right: calc(var(--container-width) * -1 + 42px);
}

#网易云音乐 > #播放列表 {
	box-shadow:
		inset 0 16px 10px -5px var(--accent-color-transparent),
		inset 0 -16px 10px -5px var(--accent-color-transparent);
	flex-direction: column;
	flex-wrap: nowrap;
	font-size: 0.9em;
	margin: 0;
	padding: 8px;
	position: absolute;
	top: 34px;
	left: -29px;
	width: calc(var(--container-width) + 21px);
	height: 160px;
	max-height: max(calc(25vh + 16px), 36px);
	overflow-y: auto;
	overflow-x: hidden;
}
.网易云音乐-播放列表-歌单项 {
	--progress: 0%;
	box-sizing: border-box;
	border: var(--border-soft);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	display: table-caption;
	user-select: none;
	white-space: nowrap;
	width: calc(100% + -10px);
	border-radius: var(--border-radius);
	padding: 4px;
	margin-bottom: 4px;
	position: relative;
}

.网易云音乐-播放列表-歌单项:hover,
.网易云音乐-播放列表-歌单项:focus-visible {
	background-color: var(--overlay);
}
.网易云音乐-播放列表-歌单项.正在播放 {
	background-color: var(--accent-color-transparent);
}
.网易云音乐-播放列表-歌单项.正在播放::after,
.网易云音乐-播放列表-歌单项.正在播放::before {
	content: "";
	display: block;
	position: absolute;
	pointer-events: none;
}
/* 左侧竖条：落在 li 外侧的面板内边距里，因此 li 不能靠 overflow 裁剪圆角 */
.网易云音乐-播放列表-歌单项.正在播放::before {
	background-color: var(--accent-color);
	border-radius: var(--border-radius);
	top: calc(50% - 18px);
	left: -8px;
	width: 3px;
	height: 36px;
}
/* 播放进度填充：元素铺满内边距盒、尺寸恒定，圆角便不会被浏览器按比例压缩，
   进度再小也不会从 li 的圆角处溢出；进度改用 background-size 表达，才能参与过渡。
   时长需与 ncm.js 的 进度更新间隔 一致，否则两次采样之间会先走完再停顿 */
.网易云音乐-播放列表-歌单项.正在播放::after {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: transparent;
	background-image: linear-gradient(var(--accent-color), var(--accent-color));
	background-repeat: no-repeat;
	background-size: var(--progress) 100%;
	opacity: 0.2;
	border-radius: calc(var(--border-radius) - 1px);
}

.网易云音乐-播放列表-歌单项-歌名,
.网易云音乐-播放列表-歌单项-歌手 {
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* ==================== 侧边按钮-主题 ==================== */
.侧边按钮容器-拥有更多选项#切换主题 {
	--container-width: calc(32px * 4);
}
#侧边按钮容器 > .侧边按钮容器-拥有更多选项#切换主题:hover,
#侧边按钮容器 > .侧边按钮容器-拥有更多选项#切换主题:focus-visible,
#侧边按钮容器.有键盘焦点 > .侧边按钮容器-拥有更多选项#切换主题:focus-within {
	transform: translateX(calc(-32px * 3 - 6px));
}

.侧边按钮容器-拥有更多选项#切换主题::before {
	height: 100%;
	bottom: 0;
}

/* 第一行：背景模式切换、自定义强调色调色盘 */
#切换主题 > #主题控件 {
	padding-right: 0;
	width: calc(32px * 3 + 8px);
	right: calc(var(--container-width) * -1 + 52px);
}

/* 背景模式按钮：填充色反映当前生效的背景（浅色→白、深色→黑、自动→渐变），边框提供轮廓 */
#切换主题 > #主题控件 > #背景模式 {
	background-color: var(--bg-color);
	border: var(--border);
}
html.深色 #切换主题 > #主题控件 > #背景模式[title*="自动"] {
	background-image: linear-gradient(to top left, #000 50%, #fff 50%);
	background-size: 125% 125%;
	background-position: 37.5%;
}

/* 下方：预设强调色色板，3 个一行 */
#切换主题 > #所有主题 {
	flex-wrap: wrap;
	height: auto;
	left: -1px;
	top: 34px;
	transform: none;
	width: calc(32px * 4 - -11px);
	padding: 6px;
	max-height: max(calc(25vh - 25px), 36px);
	overflow-y: auto;
	overflow-x: hidden;
}
#切换主题 > #所有主题 > button[aria-checked="true"] {
	outline: 2px solid var(--text-color);
}

#网易云音乐 #播放列表,
#切换主题 #所有主题 {
	border-left: var(--border);
	border-bottom: var(--border);
	padding-left: max(8px, calc(var(--padding-left-overflow) + 32px));
}
/* 防误触：#网易云音乐 的播放列表面板会向下盖住 #切换主题，读屏焦点落到被遮住的
   #切换主题 上会误触。故 #网易云音乐 被 hover（含读屏的模拟 hover）时隐藏 #切换主题；
   反向不需要处理：#切换主题 的面板不遮住 #网易云音乐，且 CSS 无前驱兄弟选择器。
   写死两个 id、只用后继兄弟选择器，无需 :has()，Chrome 86 亦可生效；:focus-visible 不参与判断 */
#侧边按钮容器 > .侧边按钮容器-拥有更多选项#网易云音乐:hover ~ #切换主题 {
	visibility: hidden;
}

/* ==================== 首页 ==================== */
.网易云音乐-最近在听-精选歌词::after,
.网易云音乐-最近在听-精选歌词::before {
	padding: 0;
	position: absolute;
	font-family: Arial;
	font-size: 48px;
	opacity: 0.3;
	width: 1px;
	height: 1px;
}
.网易云音乐-最近在听-精选歌词::after {
	content: "”";
	bottom: 40px;
	right: 32px;
}
.网易云音乐-最近在听-精选歌词::before {
	content: "“";
	top: 2px;
	left: 16px;
}

.网易云音乐-最近在听-精选歌词-单句 {
	text-align: center;
}
.网易云音乐-最近在听-精选歌词-歌曲信息 {
	text-align: end;
}
.网易云音乐-最近在听-精选歌词-单句,
.网易云音乐-最近在听-精选歌词-歌曲信息 {
	font-style: italic;
}

.加载中 .网易云音乐-最近在听-精选歌词-单句,
.加载中 .网易云音乐-最近在听-精选歌词-歌曲信息,
.加载中 .网易云音乐-最近在听-播放排行项 {
	border: 1px solid var(--overlay-strong);
	background-color: var(--overlay-strong);
	color: var(--overlay-strong);
	animation-name: 高频闪烁;
	animation-duration: 5s;
}

.网易云音乐-最近在听-播放排行 {
	counter-reset: index;
}
.网易云音乐-最近在听-播放排行项 {
	--item-height: 124px;
	animation-name: none;
	color: #fff;
	background-color: #333;
	font-size: smaller;
	font-weight: 600;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
	transition: var(--transition) border;
}
.网易云音乐-最近在听-播放排行项:hover,
.网易云音乐-最近在听-播放排行项:focus-visible {
	border: var(--border-strong);
}
.网易云音乐-最近在听-播放排行项:hover::after,
.网易云音乐-最近在听-播放排行项:focus-visible::after {
	background-color: transparent;
}
/* 封面平移动画（translateY 自上而下、再自下而上循环）：动画由 CSS 声明，home.js 只负责在 .大图就绪
   生效时把 currentTime 写成公共相位，使各封面进度一致；播不播放则看 #网易云音乐-最近在听 有没有 .播放中，
   由 animation-play-state 统一开关。animation 与 animation-play-state 分两条规则写，是因为
   animation 简写隐含 animation-play-state: running，写在一条里会互相覆盖。
   transform 走合成器，动画期间不逐帧重绘 */
.网易云音乐-最近在听-播放排行项-封面 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 0;
	pointer-events: none;
	/* 大图未就绪（或用户偏好减少动效）时不动画，默认居中显示 */
	user-select: none;
	transform: translateY(calc((var(--item-height) - 100%) / 2));
	transition: var(--transition) background-color;
}
/* 时长亦硬编码于 home.js 的 封面动画半周期毫秒：相位对齐要求两处一致 */
.网易云音乐-最近在听-播放排行项-封面.大图就绪 {
	animation: 封面平移 15s ease-in-out infinite alternate;
	animation-play-state: paused;
}
#网易云音乐-最近在听.播放中 .网易云音乐-最近在听-播放排行项-封面.大图就绪 {
	animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
	/* 减少动效时干脆不留动画：全局规则只把时长归零，暂停中的动画会停在起始位移而非居中 */
	.网易云音乐-最近在听-播放排行项-封面.大图就绪 {
		animation: none;
	}
}

.网易云音乐-最近在听-播放排行项::after,
.网易云音乐-最近在听-播放排行项::before {
	content: "";
	position: absolute;
	transition:
		var(--transition) background-color,
		var(--transition) opacity;
}
.网易云音乐-最近在听-播放排行项::after {
	top: 0;
	left: 0;
	background-color: var(--accent-color);
	opacity: 0.4;
	border-radius: calc(var(--border-radius) - 1px);
	width: min(var(--progress), 95%);
	height: 100%;
}
.网易云音乐-最近在听-播放排行项::before {
	content: var(--tip, "");
	background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
	opacity: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	width: 100%;
	z-index: 1;
}
.网易云音乐-最近在听-播放排行项:focus-visible::before {
	content: var(--tip-fv, "");
}
.网易云音乐-最近在听-播放排行项:hover::before,
.网易云音乐-最近在听-播放排行项:focus-visible::before {
	opacity: 1;
}
.加载中 .网易云音乐-最近在听-播放排行项-歌曲信息,
.加载中 .网易云音乐-最近在听-播放排行项-排名 {
	display: none;
}
.网易云音乐-最近在听-播放排行项-歌曲信息,
.网易云音乐-最近在听-播放排行项-排名 {
	z-index: 1;
	position: relative;
	background-color: #333c;
	border-radius: 4px;
	padding: 2px;
	margin: 4px;
	transition: var(--transition) background-color;
}
.网易云音乐-最近在听-播放排行项:hover > .网易云音乐-最近在听-播放排行项-歌曲信息,
.网易云音乐-最近在听-播放排行项:hover > .网易云音乐-最近在听-播放排行项-排名,
.网易云音乐-最近在听-播放排行项:focus-visible > .网易云音乐-最近在听-播放排行项-歌曲信息,
.网易云音乐-最近在听-播放排行项:focus-visible > .网易云音乐-最近在听-播放排行项-排名 {
	background-color: transparent;
}
.网易云音乐-最近在听-播放排行项-歌曲信息 > :first-child {
	margin-right: 0.5em;
}
.网易云音乐-最近在听-播放排行项-排名::after {
	content: "TOP " counter(index);
	counter-increment: index;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 加载失败提示：整体替换排行榜/歌词区域的内容，需覆盖该区域原有的行样式 */
.网易云音乐-最近在听-加载失败 {
	display: block;
	height: auto;
	margin: 12px;
	padding: 24px 12px;
	text-align: center;
	color: var(--text-color);
	background-color: transparent;
	border: 0;
	font-weight: normal;
}
/* 失败提示不渲染榜单行左侧的进度条 */
.网易云音乐-最近在听-加载失败::after {
	content: none;
}

/* ==================== 博客 ==================== */
.左 > .目录 > ul {
	word-break: keep-all;
	overflow-y: auto;
}

code.hljs::before {
	content: attr(data-lang) " | 双击复制代码";
	border-radius: var(--border-radius);
	font-size: 0.5em;
	margin: -12px;
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
}
code.hljs.已复制:hover::before {
	content: attr(data-lang) " | 已复制";
}

#评论区 {
	border: var(--border-width) var(--border-style) var(--overlay);
	background-color: var(--bg-color);
}
#评论区 .用户信息 {
	background-color: var(--surface-2);
	border: var(--border);
	border-radius: var(--border-radius);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 6px;
	margin-bottom: 12px;
	width: fit-content;
}
#评论区 .用户信息 > * {
	margin-right: 8px;
}

/* ==================== 友链 ==================== */

/* ==================== 移动端 ==================== */
/* 该数值同时存在于 main.js */
@media only screen and (max-width: 840px) {
	/* 移动端封面为 sticky，高度 64vh（上限 430px），同样取「封面高度 + 顶部偏移」 */
	:root {
		--cover-scroll-range: min(calc(64vh + 56px), 496px);
	}

	main > .左::before,
	main > .左::after {
		content: "";
		display: block;
		position: sticky;
		width: calc(100% - 14px);
		margin: 0px 0 0 8px;
		pointer-events: auto;
		z-index: 9;
	}
	main > .左::before {
		box-shadow: var(--box-shadow-strong);
		top: 0;
		transform: translateY(-64px);
	}
	main > .左::after {
		bottom: 0;
	}

	@supports (animation-timeline: scroll()) {
		body > #顶部大图 {
			animation-name: 顶部大图移动端;
			animation-range: 0 var(--cover-scroll-range);
		}
		main > .左::before {
			animation-name: 左栏阴影上移动端;
			pointer-events: auto;
		}
		main > .左::after {
			animation-name: 左栏下透明遮罩移动端;
			pointer-events: auto;
		}
		main .左 {
			animation: 左栏移动端 linear both;
		}
		main .左 {
			animation-timeline: scroll(root);
			animation-range: 1px var(--cover-scroll-range);
		}
	}
}

/* ==================== 网易云音乐小组件 ==================== */
/* 宿主无 .已加载 时由 ::before 呈现骨架，尺寸与填充后的卡片一致，替换时不产生偏移 */
x-163music:not(.已加载)::before {
	content: "";
	display: block;
	width: 328px;
	height: 64px;
	border-radius: 64px;
	background-color: var(--overlay-strong);
	animation: 高频闪烁 5s linear infinite;
}