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

@charset "utf-8";

:root {
	--hostname: "dsy4567.icu";
}

/* ==================== 延后显示元素/本来就需要隐藏的元素 ==================== */
main > #分界线 {
	visibility: hidden;
}
.进度条外面,
.标签 > div,
div#侧边按钮容器,
section#我 > br {
	display: none;
}

/* ==================== @keyframes ==================== */
@keyframes 标记 {
	0% {
		background-color: mark;
		color: marktext;
	}
	75% {
		background-color: mark;
		color: marktext;
	}
	100% {
		background-color: inherit;
		color: inherit;
	}
}

/* ==================== @media ==================== */
:root {
	--bg-color: #f7f7f7;
	--surface-1: #ffffff;
	--surface-2: #f2f2f2;
	--text-color: #222;
	--overlay-soft: #8881;
	--overlay: #8885;
	--overlay-strong: #888;
	--selection-bg: #0006;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #18171c;
		--surface-1: #222027;
		--surface-2: #2a2931;
		--text-color: #ccc;
		--overlay-soft: #3333;
		--overlay: #fff2;
		--overlay-strong: #888;
		--selection-bg: #fff5;
		color-scheme: dark;
	}
}
:root.深色 {
	--bg-color: #18171c;
	--surface-1: #222027;
	--surface-2: #2a2931;
	--text-color: #ccc;
	--overlay-soft: #3333;
	--overlay: #fff2;
	--overlay-strong: #888;
	--selection-bg: #fff5;
	color-scheme: dark;
}
:root.浅色 {
	--bg-color: #f7f7f7;
	--surface-1: #ffffff;
	--surface-2: #f2f2f2;
	--text-color: #222;
	--overlay-soft: #8881;
	--overlay: #8885;
	--overlay-strong: #888;
	--selection-bg: #0006;
	color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
	html {
		scroll-behavior: auto !important;
	}
}

/* ==================== ::* ==================== */
/* ::-webkit-scrollbar 会频繁重绘，新浏览器改由标准属性，
旧 Chrome 回退 */
html {
	scrollbar-color: var(--overlay) transparent;
}
::-webkit-scrollbar {
	background-color: transparent;
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-thumb {
	background-color: var(--overlay);
	border-radius: var(--border-radius);
}
::-webkit-scrollbar-corner {
	background-color: transparent;
}

/* ==================== html/body/通用元素 ==================== */
:root {
	--border-width: 1px;
	--border-style: solid;
	--border-color: var(--overlay-soft);
	--border-color-strong: var(--overlay-strong);
	--border: var(--border-width) var(--border-style) var(--border-color);
	--border-strong: var(--border-width) var(--border-style) var(--border-color-strong);
	--border-radius: 12px;
	--box-shadow-color: rgba(0, 0, 0, var(--accent-color-opacity));
	--box-shadow: var(--box-shadow-color) 0px 0px 12px 0px;
	--box-shadow-strong: var(--box-shadow-color) 0px 4px 16px 8px;
	--footer-blank-height: 50vh;
	--line-height: 1.6;
	--transition: 0.3s;
	--transition-slow: 1s;
}
html {
	/* 中性缺省强调色 */
	--accent-color: var(--text-color);
	--accent-color-transparent: var(--overlay);
	--accent-color-opacity: 0.18;
	--accent-text-color: var(--bg-color);
	--link-color: var(--text-color);
	scroll-behavior: smooth;
}
body {
	background-color: var(--bg-color);
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: "ZCOOL KuaiLe", sans-serif;
	font-weight: 400;
	line-height: var(--line-height);
	margin: 0;
	padding: 0;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

a,
svg {
	color: var(--link-color);
}
a {
	text-decoration: none;
}
a.无滤镜,
a.无滤镜:hover,
a.无滤镜:focus-visible {
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
	margin-left: 8px;
	padding: 0 4px;
	position: relative;
}

img,
video {
	background-color: var(--bg-color);
	border-radius: var(--border-radius);
}

x-spoiler {
	background-color: #000;
	color: #000;
	transition: var(--transition) color;
}
x-spoiler:hover,
x-spoiler:focus-visible {
	color: #fff;
}

svg[data-icon] {
	background-color: var(--bg-color);
	border-radius: 50%;
}

section,
article {
	background-color: var(--surface-1);
	border: var(--border);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	margin: 0 8px 8px 8px;
	padding: 12px;
	word-break: break-word;
}
section > :is(section, article),
article > :is(section, article) {
	margin: 0 -4px 8px -4px;
	padding: 12px;
}

section h2 svg,
article h2 svg {
	margin-right: 8px;
}
section img,
section video,
article img,
article video {
	max-width: 100%;
	height: auto;
}

section > h2:first-child,
article > h2:first-child {
	margin-top: 8px;
}

/* 不支持 :has/is() 的浏览器（如 Chrome 86）会整条规则失效，故需 @supports 兜底副本 */
/* 但此类样式无替代方案，故不使用 @supports */
:is(section, article) :is(h1, h2, h3, h4, h5, h6) {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
}
:is(section, article) :is(h1, h2, h3, h4, h5, h6)::before {
	content: "";
	border-radius: var(--border-radius);
	display: block;
	position: absolute;
}
main > .右 :where(h1, h2, h3, h4, h5, h6)::before {
	background-color: var(--accent-color);
	/* 用 opacity 而非 bgc:act 减少重绘量 */
	opacity: var(--accent-color-opacity);
	width: 4px;
	height: 100%;
	left: -8px;
	transition: opacity var(--transition);
}
:is(h1, h2, h3, h4, h5, h6).含图标::before {
	background: linear-gradient(to right, var(--accent-color), var(--accent-color-transparent));
	opacity: 1;
	width: 5em;
	max-width: 50%;
	height: 4px;
	bottom: -0.3em;
	left: 0;
}

blockquote {
	background-color: var(--surface-2);
	border: 1px solid var(--accent-color-transparent);
	border-left: 4px solid var(--accent-color-transparent);
	border-radius: var(--border-radius);
	margin: 4px 0;
	padding: 0 8px;
}
code {
	background-color: var(--overlay);
	border: 1px solid transparent;
	border-radius: 6px;
	font-family: "Source Code Pro", monospace;
}
pre {
	background-color: transparent;
	color: var(--text-color);
	border: var(--border);
	border-radius: var(--border-radius);
	overflow: auto;
	padding: 0;
}
pre > code {
	display: block;
	background-color: transparent;
	border: none;
	margin: 0;
	padding: 1em;
}
pre code.hljs {
	display: block;
	overflow-x: auto;
	padding: 1em;
	position: relative;
}
code.hljs {
	padding: 3px 5px;
}

hr {
	border-color: var(--overlay);
}

table {
	border: var(--border);
	border-collapse: separate;
	border-radius: var(--border-radius);
	border-spacing: 0;
	margin: 4px 0;
	max-width: 100%;
	overflow: hidden;
}
th,
td {
	border-right: var(--border);
	border-bottom: var(--border);
	padding: 4px 8px;
}
tr > :last-child {
	border-right: none;
}
tr:last-child > * {
	border-bottom: none;
}
th {
	background-color: var(--overlay);
}

input {
	accent-color: var(--accent-color);
}

/* ==================== 通用工具类 class ==================== */
.隐藏链接,
.隐藏文字 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	overflow: hidden;
}

.标记 {
	animation-duration: 3s;
	animation-name: 标记;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	transition:
		var(--transition) color,
		var(--transition) background-color;
}

.淡化 {
	opacity: 0.7;
}

.元数据 {
	display: block;
	width: 100%;
	border-top: 2px var(--border-style) var(--overlay);
	font-style: italic;
	margin-top: 8px;
	padding-top: 8px;
}

.头像 {
	border-radius: 50%;
}

.特小尺寸,
.小尺寸,
.中尺寸,
.大尺寸 {
	width: var(--width);
	height: var(--height);
	max-width: 100%;
	max-height: 100%;
}
img:is(.特小尺寸, .小尺寸, .中尺寸, .大尺寸) {
	max-width: unset;
	max-height: unset;
}
.特小尺寸 {
	--width: 24px;
	--height: 24px;
}
.小尺寸 {
	--width: 32px;
	--height: 32px;
}
.中尺寸 {
	--width: 48px;
	--height: 48px;
}
.大尺寸 {
	--width: 128px;
	--height: 128px;
}

.组 {
	background-color: var(--bg-color);
	border-radius: var(--border-radius);
	display: flex;
	max-width: 100%;
	overflow: auto;
	padding: 16px;
}
.组 > section {
	max-width: 256px;
	min-width: 256px;
}

.fill {
	fill: var(--link-color);
}
.stroke {
	stroke: var(--link-color);
}

/* ==================== 导航栏、左右栏 ==================== */
@media only screen and (max-width: 435px) {
	#导航栏 > .右 > a svg {
		display: none;
	}
}

/* ==================== 导航栏、进度条、顶部大图 ==================== */
nav#导航栏 {
	background-color: var(--overlay-soft);
	box-sizing: border-box;
	border: var(--border);
	border-radius: var(--border-radius);
	color: var(--text-color);
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	overflow: overlay;
	position: sticky;
	top: 7px;
	height: 48px;
	z-index: 998;
	transform: translateY(0);
}
@media (max-height: 240px) {
	nav#导航栏 {
		position: relative;
	}
}
#导航栏 > .左,
#导航栏 > .右 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
#导航栏 > .左 > a,
#导航栏 > .右 > a {
	margin: 0 8px;
}
nav#导航栏 a {
	color: var(--text-color);
	display: flex;
	align-items: center;
	text-decoration: none;
	word-break: keep-all;
}
#导航栏 > .左 > .标题 {
	font-size: x-large;
	font-weight: 600;
}
nav#导航栏,
body > #顶部大图 {
	width: calc(100% - 90px - 18px);
	max-width: calc(1600px - 16px);
}

body > #顶部大图 {
	--height: min(33vw, 420px);
	background-color: var(--bg-color);
	border-radius: var(--border-radius);
	display: block;
	height: var(--height);
	overflow: hidden;
	position: relative;
	z-index: 1;
	margin-top: 64px;
}

#顶部大图 > .顶部大图层 {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	position: absolute;
	transition: var(--transition) opacity;
}
/* 最底下的基线层无变化。始终不透明且不参与过渡，作为兜底与背景，新层直接在其上淡入，
   避免首屏就存在的 .显示 层被重新赋值为透明 */
#顶部大图 > .顶部大图层:first-child {
	opacity: 1;
	transition: none;
}
#顶部大图 > .顶部大图层 > img {
	display: block;
	object-fit: cover;
	user-select: none;
	height: auto;
	min-height: 100%;
	width: 100%;
}
#顶部大图 > .顶部大图层.显示 {
	opacity: 1;
}

/* ==================== main、左右栏 ==================== */
main {
	--main-maxw: 1800px;
	--left-maxw: 420px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	max-width: var(--main-maxw);
}
main > .左,
main > .右 {
	overflow-y: auto;
	scrollbar-gutter: stable both-edges;
	padding-top: var(--top);
	padding-bottom: 4px;
	padding-left: 4px;
	padding-right: 4px;
}
main > .左,
main > .右,
main > #分界线 {
	--top: 80px;
}

main > .左 {
	--maxh: calc(100vh - 16px * 1);
	border-radius: var(--border-radius);
	position: sticky;
	top: 0;
	width: 50%;
	min-width: 320px;
	max-width: var(--left-maxw);
	max-height: var(--maxh);
}

main > .右 {
	width: 100%;
	max-width: calc(var(--main-maxw) - var(--left-maxw));
	min-height: 100vh;
}

main > #分界线 {
	--border-width: 16px;
	--margin-x: calc((var(--border-width) * 2 + var(--width) - 24px) * -0.5);
	--width: 4px;
	border: var(--border-width) solid var(--bg-color);
	border: var(--border-width) solid transparent;
	box-sizing: content-box;
	margin-top: var(--top);
	margin-left: var(--margin-x);
	margin-right: var(--margin-x);
	position: sticky;
	top: 0;
	width: var(--width);
}
main > #分界线 > .特小尺寸 {
	max-width: var(--width);
	max-height: var(--height);
}

/* ==================== 左栏 ==================== */
.左 > section#我 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

section#我 > .头像 {
	margin-bottom: -64px;
	position: relative;
	top: -64px;
	max-width: unset;
	max-height: unset;
}
section#我 > h2 {
	margin: 0.25em 0;
}
section#我 > #联系方式 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 -8px;
}
section#我 > #联系方式 > a {
	display: flex;
	margin: 0 4px;
}
.rss {
	transform: translate(-4px, 2px) rotate(45deg);
}

section#我 > #关注被关注码龄 {
	font-size: smaller;
	margin: 0 0 1em;
}

#一言 .语句 {
	text-decoration: underline wavy var(--accent-color);
	text-underline-offset: 2px;
	text-align: center;
	overflow-y: auto;
	height: calc(var(--line-height) * 2em);
	margin-top: 2em;
}
#一言 .作者 {
	opacity: 0.7;
	text-align: end;
	padding-top: 4px;
}
#一言 .作者,
#一言 .语句 {
	display: block;
}

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

footer#copyright {
	background-color: var(--surface-1);
	border-top: 1px solid transparent;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	padding: 16px 0;
	margin: 32px 0 0;
	text-align: center;
	width: 100%;
	z-index: 1;
	overflow-x: auto;
}

/* ==================== 移动端 ==================== */
/* 该数值同时存在于 main.js */
@media only screen and (max-width: 840px) {
	nav#导航栏 {
		width: calc(100% - 18px);
	}
	body > #顶部大图 {
		--height: calc(64px + min(calc(64vh), 430px));
		border-radius: 0;
		margin-top: 66px;
		position: fixed;
		width: 100%;
		height: var(--height);
		z-index: -1;
	}
	main {
		flex-direction: column;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}
	main > .左,
	main > .右 {
		display: block;
		width: 100%;
		min-width: unset;
		max-width: unset;
	}
	main .左 {
		--height: 45vh;
		--maxh: 420px;
		--left-maxw: 540px;
		height: var(--height);
		scrollbar-width: none;
		padding-top: 64px;
		top: 64px;
		z-index: 0;
	}
	main > .左 > section:last-child,
	main > .左 > article:last-child {
		margin-bottom: min(calc(var(--height) + -32px), 380px);
	}
	main > .左::-webkit-scrollbar {
		display: none;
		width: 0;
	}
	body > #顶部大图 > .顶部大图层 > img,
	main .左 {
		border-radius: var(--border-radius) var(--border-radius) 0 0;
	}
	main .左 > section {
		--margin-x: max(8px, calc((100% - var(--left-maxw)) / 2));
		margin-left: var(--margin-x);
		margin-right: var(--margin-x);
	}
	main > #分界线 {
		display: none !important;
	}
	main > .右 {
		background-color: var(--bg-color);
		border-radius: var(--border-radius) var(--border-radius) 0 0;
		box-shadow: var(--box-shadow);
		z-index: 1;
		position: relative;
		margin-top: 0;
		padding-top: 16px;
		padding-left: 0;
		padding-right: 0;
		overflow-y: unset;
	}
	/* 挡住右栏底部溢出阴影 */
	main > .右::after {
		content: "";
		background-color: var(--bg-color);
		display: block;
		position: absolute;
		left: 0;
		bottom: -60px;
		z-index: -1;
		width: 100%;
		height: 64px;
	}

	@supports (animation-timeline: scroll()) {
		body > #顶部大图 {
			border-radius: var(--border-radius) var(--border-radius) 0 0;
		}
	}
}

/* ==================== 网易云音乐小组件 ==================== */
/* 骨架在 light DOM，此处仅占位 */
x-163music {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 64px;
}