:root {
	color-scheme: light;
	--color-bg: #f4f1ea;
	--color-surface: #fdfcfa;
	--color-ink: #1c1a17;
	--color-muted: #57534a;
	--color-faint: #9d968a;
	--color-accent: #b5502e;
	--color-line: #e3dfd6;
	--color-line-soft: #edeae2;
	--font-display: 'Fraunces', 'Songti SC', 'Noto Serif SC', serif;
	--font-body: 'Inter', 'Poppins', 'PingFang SC', 'Microsoft YaHei', sans-serif;
	--space-md: 2rem;
	--content-width: 72rem;
	--gutter: clamp(1.25rem, 4vw, 4rem);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
	scroll-behavior: smooth;
	background: var(--color-bg);
}

body {
	margin: 0;
	min-width: 20rem;
	min-height: 100svh;
	overflow-x: hidden;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
}

/* ===== 顶部导航 ===== */
.site-header {
	position: fixed;
	z-index: 20;
	top: 0;
	left: 0;
	width: 100%;
	padding: max(1rem, env(safe-area-inset-top)) var(--gutter) 0;
	pointer-events: none;
	transition: transform 0.35s var(--ease-out);
}

/* 向下滚动时隐藏，向上滚动时出现 */
.site-header.is-hidden {
	transform: translateY(-110%);
}

/* 滚动后：毛玻璃浮起，从内容之上分离出来 */
.site-header.is-scrolled .site-header__inner {
	background: rgba(253, 252, 250, 0.8);
	backdrop-filter: blur(16px) saturate(1.2);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	border: 1px solid rgba(28, 26, 23, 0.07);
	border-radius: 999px;
	padding: 0.625rem 1.5rem;
	box-shadow:
		0 1px 2px rgba(28, 26, 23, 0.04),
		0 8px 28px rgba(28, 26, 23, 0.07);
	transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out),
		padding 0.3s var(--ease-out);
}

.site-header__inner {
	display: flex;
	width: min(100%, var(--content-width));
	margin-inline: auto;
	align-items: center;
	justify-content: space-between;
}

.site-header__brand,
.ai-chat__brand-row {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	pointer-events: auto;
}

.site-mark {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	pointer-events: auto;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	pointer-events: auto;
}

.site-nav__links {
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__links a {
	color: var(--color-muted);
	white-space: nowrap;
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 180ms var(--ease-out);
}

.site-nav__links a:hover {
	color: var(--color-ink);
}

.site-nav__cta {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--color-ink);
	border-radius: 999px;
	color: var(--color-ink);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}

.site-nav__cta:hover {
	background: var(--color-ink);
	color: #ffffff;
}

/* ===== 首页 ===== */
.home {
	padding: 9rem var(--gutter) 0;
}

.home__inner {
	width: min(100%, var(--content-width));
	margin-inline: auto;
}

/* 刊头：巨型标题压住整页 */
.home__masthead {
	padding: clamp(1rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--color-line);
	text-align: center;
}

.home__masthead-title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: clamp(3rem, 9vw, 7.5rem);
	font-weight: 480;
	line-height: 1.02;
	letter-spacing: -0.02em;
}

/* 打字机光标 */
.typewriter-cursor {
	display: inline-block;
	width: 0.06em;
	height: 0.82em;
	margin-left: 0.06em;
	vertical-align: -0.08em;
	background: var(--color-ink);
	animation: typewriter-blink 0.9s steps(1) infinite;
}

@keyframes typewriter-blink {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.typewriter-cursor {
		animation: none;
	}
}

.home__masthead-sub {
	margin: 1.25rem 0 0;
	color: var(--color-faint);
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
}

/* 主体：左侧文章网格 + 右侧边栏 */
.home__layout {
	display: grid;
	grid-template-columns: minmax(0, 2.4fr) minmax(15rem, 1fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

/* 文章卡片网格 */
.home__post-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.post-card {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(28, 26, 23, 0.03);
	transition:
		transform 240ms var(--ease-out),
		box-shadow 240ms var(--ease-out),
		border-color 240ms var(--ease-out);
}

.post-card:hover {
	border-color: #d6cfc2;
	box-shadow: 0 6px 20px rgba(28, 26, 23, 0.07);
	transform: translateY(-0.2rem);
}

.post-card__link {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	height: 100%;
	padding: 1.5rem 1.5rem 1.25rem;
	text-decoration: none;
}

.post-card__cover {
	display: block;
	margin: -1.5rem -1.5rem 0.75rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-line-soft);
}

.post-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms var(--ease-out);
}

.post-card:hover .post-card__cover img {
	transform: scale(1.04);
}

.post-card__cat {
	color: var(--color-accent);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.post-card__title {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.3;
	transition: color 180ms var(--ease-out);
}

.post-card:hover .post-card__title {
	color: var(--color-accent);
}

.post-card__summary {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.875rem;
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card__date {
	margin-top: auto;
	padding-top: 0.75rem;
	color: var(--color-faint);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.home__archive {
	display: inline-block;
	margin-top: 2.5rem;
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--color-line);
	padding-bottom: 0.2rem;
	transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.home__archive:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

/* 右侧边栏 */
.home__sidebar {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	position: sticky;
	top: 6.5rem;
}

.side-block {
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--color-line);
}

.side-block:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.side-block__title {
	margin: 0 0 1.1rem;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 500;
}

.side-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.side-list li + li {
	margin-top: 0.55rem;
}

.side-list a {
	color: var(--color-muted);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color 180ms var(--ease-out);
}

.side-list a:hover {
	color: var(--color-accent);
}

.side-posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.side-posts li + li {
	margin-top: 1rem;
}

.side-posts a {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
}

.side-posts__title {
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.45;
	transition: color 180ms var(--ease-out);
}

.side-posts a:hover .side-posts__title {
	color: var(--color-accent);
}

.side-posts time {
	color: var(--color-faint);
	font-size: 0.75rem;
}

.side-about {
	margin: 0 0 0.9rem;
	color: var(--color-muted);
	font-size: 0.875rem;
	line-height: 1.7;
}

.side-about__link {
	color: var(--color-ink);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 180ms var(--ease-out);
}

.side-about__link:hover {
	color: var(--color-accent);
}


/* ===== 页脚 ===== */
.site-footer {
	position: relative;
	z-index: 2;
	padding: 3rem var(--gutter) max(4rem, env(safe-area-inset-bottom));
	color: var(--color-faint);
	font-size: 0.8125rem;
}

.site-footer__inner {
	display: flex;
	width: min(100%, var(--content-width));
	margin-inline: auto;
	align-items: center;
	justify-content: space-between;
}

.site-footer p {
	margin: 0;
}

.site-footer__back {
	color: var(--color-muted);
	text-decoration: none;
	transition: color 180ms var(--ease-out);
}

.site-footer__back:hover {
	color: var(--color-ink);
}

/* ===== 页眉唱片播放器 ===== */
.gmk-music {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 0;
	border-radius: 0.25rem;
	background: transparent;
	color: var(--color-ink);
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

.gmk-music:hover {
	filter: brightness(1.12);
}

.gmk-music:active {
	transform: scale(0.96);
}

.gmk-music:disabled {
	opacity: 0.45;
	cursor: default;
}

.gmk-music:disabled:hover {
	filter: none;
}

.gmk-music:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.gmk-music__disc {
	position: absolute;
	left: 0.125rem;
	top: 0.375rem;
	width: 2.625rem;
	height: 2.625rem;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, #111111 0 1px, #252525 2px, #101010 3px, #191919 4px);
	box-shadow: inset 0 0 0 2px #0c0c0d, inset 0 0 6px #353535, 0 2px 4px rgba(28, 26, 23, 0.25);
}

.gmk-music__disc::before {
	position: absolute;
	inset: 29%;
	border-radius: 50%;
	background: conic-gradient(from -35deg, #d83b1e 0 47%, #e7a64d 47% 100%);
	box-shadow: 0 0 0 2px #0e0e0e, inset 0 0 0 1px rgba(16, 13, 11, 0.28);
	content: '';
}

.gmk-music__disc::after {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.32rem;
	height: 0.32rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ffffff, #8b8580 75%);
	box-shadow: 0 0 0 1px rgba(19, 16, 14, 0.7);
	content: '';
	transform: translate(-50%, -50%);
}

.gmk-music__arm {
	position: absolute;
	z-index: 1;
	left: 2.7rem;
	top: 0.15rem;
	width: 0.18rem;
	height: 1.85rem;
	border-radius: 0.15rem;
	background: linear-gradient(90deg, #77716d, #f0ece5 45%, #77716d);
	box-shadow: 1px 1px 2px rgba(16, 15, 14, 0.3);
	transform: rotate(-9deg);
	transform-origin: 50% 0.12rem;
	transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gmk-music__arm::before {
	position: absolute;
	left: 50%;
	top: -0.12rem;
	width: 0.48rem;
	height: 0.48rem;
	border: 2px solid #817b76;
	border-radius: 50%;
	background: #e5e0d7;
	content: '';
	transform: translateX(-50%);
}

.gmk-music__arm::after {
	position: absolute;
	left: -0.09rem;
	bottom: -0.05rem;
	width: 0.36rem;
	height: 0.48rem;
	border-radius: 0.1rem 0.1rem 0.03rem 0.03rem;
	background: #4b4743;
	content: '';
}

.gmk-music__note {
	position: absolute;
	z-index: 2;
	color: var(--color-accent);
	font-family: Georgia, serif;
	font-weight: 700;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
}

.gmk-music__note--one {
	left: 2.5rem;
	top: 0.9rem;
	font-size: 0.85rem;
}

.gmk-music__note--two {
	left: 1.9rem;
	top: 0.6rem;
	font-size: 0.7rem;
}

.gmk-music.is-playing .gmk-music__disc {
	animation: gmk-disc-spin 2.4s linear 380ms infinite;
}

.gmk-music.is-playing .gmk-music__arm {
	transform: rotate(22deg);
}

.gmk-music.is-playing .gmk-music__note--one {
	animation: gmk-note-rise 1.9s ease-out 650ms infinite;
}

.gmk-music.is-playing .gmk-music__note--two {
	animation: gmk-note-rise 1.9s ease-out 1.35s infinite;
}

@keyframes gmk-disc-spin {
	to { transform: rotate(360deg); }
}

@keyframes gmk-note-rise {
	0% { opacity: 0; transform: translate(0, 0) scale(0.8); }
	18% { opacity: 0.9; }
	100% { opacity: 0; transform: translate(0.35rem, -1.25rem) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	.gmk-music.is-playing .gmk-music__disc {
		animation: none;
	}

	.gmk-music__arm {
		transition: none;
	}

	.gmk-music.is-playing .gmk-music__note {
		animation: none;
		opacity: 0.85;
	}
}

/* ===== 音乐控制区：点击唱片后在导航栏内向右展开 ===== */
.gmk-music-wrap {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.gmk-music-panel {
	position: absolute;
	z-index: 60;
	left: calc(100% + 0.55rem);
	top: 50%;
	box-sizing: border-box;
	width: min(14.5rem, calc(100vw - 8rem));
	padding: 0.4rem 0.65rem 0.45rem;
	border: 1px solid var(--color-line);
	border-radius: 0.75rem;
	background: var(--color-surface);
	box-shadow: 0 8px 20px rgba(28, 26, 23, 0.1);
	transform: translateY(-50%);
	animation: gmk-panel-in 0.2s var(--ease-out);
}

.gmk-music-panel[hidden] {
	display: none;
}

@keyframes gmk-panel-in {
	from {
		opacity: 0;
		transform: translate(-0.4rem, -50%) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translate(0, -50%) scale(1);
	}
}

.gmk-music-panel__progress {
	margin-bottom: 0.25rem;
}

.gmk-music-panel__range {
	display: block;
	width: 100%;
	height: 3px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 999px;
	background: var(--color-line);
	cursor: pointer;
	outline: none;
}

.gmk-music-panel__range::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--color-accent);
	border: 2px solid var(--color-surface);
	box-shadow: 0 1px 3px rgba(28, 26, 23, 0.3);
	cursor: pointer;
}

.gmk-music-panel__range::-moz-range-thumb {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--color-accent);
	border: 2px solid var(--color-surface);
	box-shadow: 0 1px 3px rgba(28, 26, 23, 0.3);
	cursor: pointer;
}

.gmk-music-panel__time {
	display: flex;
	justify-content: space-between;
	margin-top: 0.2rem;
	font-size: 0.65rem;
	color: var(--color-faint);
	font-variant-numeric: tabular-nums;
}

.gmk-music-panel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.gmk-music-panel__btn {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-muted);
	font-size: 0.62rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), background 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.gmk-music-panel__btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.gmk-music-panel__btn:active {
	transform: scale(0.94);
}

.gmk-music-panel__btn--play {
	width: 2.15rem;
	height: 2.15rem;
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: #fff;
	font-size: 0.72rem;
}

.gmk-music-panel__btn--play:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

/* ===== 旧聊天挂件（保留样式供回退，新入口已改为独立页面） ===== */
.chat-window {
	position: fixed;
	z-index: 50;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	width: min(24rem, calc(100vw - 2rem));
	height: min(34rem, calc(100svh - 4rem));
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: 1.25rem;
	background: #ffffff;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);
	animation: chat-in 0.28s var(--ease-out);
}

.chat-window[hidden] {
	display: none;
}

@keyframes chat-in {
	from {
		opacity: 0;
		transform: translateY(1rem) scale(0.98);
	}

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

.chat__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-line);
}

.chat__avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--color-ink);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.chat__avatar::after {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0.625rem;
	height: 0.625rem;
	content: '';
	border: 2px solid #ffffff;
	border-radius: 999px;
	background: #22c55e;
}

.chat__head-info {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	flex: 1;
	min-width: 0;
}

.chat__head-name {
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

.chat__head-status {
	color: var(--color-faint);
	font-size: 0.75rem;
}

.chat__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: -0.25rem -0.5rem 0 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--color-muted);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}

.chat__close:hover {
	background: #f3f4f6;
	color: var(--color-ink);
}

.chat__messages {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	overflow-y: auto;
	background: #fafafa;
}

.chat__msg {
	max-width: 85%;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.chat__msg--bot {
	align-self: flex-start;
	border: 1px solid var(--color-line);
	border-radius: 1rem 1rem 1rem 0.25rem;
	background: #ffffff;
	color: var(--color-ink);
}

.chat__msg--user {
	align-self: flex-end;
	border-radius: 1rem 1rem 0.25rem 1rem;
	background: var(--color-ink);
	color: #ffffff;
}

.chat__typing {
	display: flex;
	gap: 0.3rem;
	align-items: center;
	padding: 0.9rem 1rem;
}

.chat__typing span {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 999px;
	background: var(--color-faint);
	animation: chat-dot 1.2s infinite;
}

.chat__typing span:nth-child(2) {
	animation-delay: 0.15s;
}

.chat__typing span:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes chat-dot {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.4;
	}

	30% {
		transform: translateY(-0.25rem);
		opacity: 1;
	}
}

.chat__input {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.75rem;
	border-top: 1px solid var(--color-line);
	background: #ffffff;
}

.chat__field {
	flex: 1;
	min-width: 0;
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	background: #ffffff;
	color: var(--color-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	outline: none;
	transition: border-color 180ms var(--ease-out);
}

.chat__field:focus {
	border-color: var(--color-accent);
}

.chat__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border: none;
	border-radius: 999px;
	background: var(--color-ink);
	color: #ffffff;
	font-size: 1rem;
	cursor: pointer;
	transition: background 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.chat__send:hover {
	background: var(--color-accent);
	transform: translateY(-1px);
}

.chat__send:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

.chat__foot {
	padding: 0.5rem 1.25rem max(0.75rem, env(safe-area-inset-bottom));
	border-top: 1px solid var(--color-line);
	background: #ffffff;
	color: var(--color-faint);
	font-size: 0.6875rem;
	text-align: center;
}


/* ===== 独立 AI 对话页 ===== */
.ai-chat {
	display: grid;
	min-height: 100svh;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: var(--color-bg);
}

.ai-chat__topbar {
	display: flex;
	position: relative;
	z-index: 2;
	align-items: center;
	justify-content: space-between;
	padding: max(0.875rem, env(safe-area-inset-top)) clamp(1rem, 3vw, 2.5rem) 0.875rem;
	border-bottom: 1px solid var(--color-line);
	background: rgba(253, 252, 250, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.ai-chat__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--color-ink);
	text-decoration: none;
}

.ai-chat__brand-mark,
.ai-chat__message-avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--color-ink);
	color: #ffffff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ai-chat__brand-mark img,
.ai-chat__message-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.site-mark__avatar {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	object-fit: cover;
	display: block;
}

.ai-chat__brand-copy {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.ai-chat__brand-copy strong {
	font-size: 0.9375rem;
	font-weight: 600;
}

.ai-chat__brand-copy small {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.2rem;
	color: var(--color-faint);
	font-size: 0.75rem;
}

.ai-chat__brand-copy i {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 999px;
	background: #22c55e;
}

.ai-chat__back {
	padding: 0.6rem 1rem;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	background: var(--color-surface);
	color: var(--color-muted);
	font-size: 0.8125rem;
	text-decoration: none;
	transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.ai-chat__back:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.ai-chat__stage {
	display: flex;
	min-height: 0;
	justify-content: center;
	overflow: hidden;
}

.ai-chat__messages {
	display: flex;
	width: min(100%, 52rem);
	min-height: 0;
	flex-direction: column;
	gap: 1.5rem;
	padding: clamp(2rem, 6vh, 5rem) clamp(1rem, 4vw, 2.5rem) 2rem;
	overflow-y: auto;
}

.ai-chat__welcome {
	width: min(100%, 42rem);
	margin: auto;
	text-align: center;
	animation: chat-page-in 0.45s var(--ease-out);
}

.ai-chat__welcome[hidden] {
	display: none;
}

.ai-chat__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--color-accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.ai-chat__welcome h1 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 7vw, 5rem);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 1;
}

.ai-chat__welcome > p:not(.ai-chat__eyebrow) {
	max-width: 34rem;
	margin: 1.25rem auto 0;
	color: var(--color-muted);
	font-size: 0.9375rem;
	line-height: 1.8;
}

.ai-chat__suggestions {
	display: grid;
	margin-top: 2.5rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}

.ai-chat__suggestions button {
	min-height: 4rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--color-line);
	border-radius: 1rem;
	background: var(--color-surface);
	color: var(--color-muted);
	font-family: inherit;
	font-size: 0.8125rem;
	line-height: 1.45;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(28, 26, 23, 0.03);
	transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.ai-chat__suggestions button:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(28, 26, 23, 0.06);
}

.ai-chat__row {
	display: flex;
	width: 100%;
	align-items: flex-start;
	gap: 0.9rem;
	animation: chat-page-in 0.28s var(--ease-out);
}

.ai-chat__row--user {
	flex-direction: row-reverse;
}

.ai-chat__message-avatar {
	width: 2rem;
	height: 2rem;
	font-size: 0.625rem;
}

.ai-chat__row--user .ai-chat__message-avatar {
	background: var(--color-accent);
}

.ai-chat__bubble {
	max-width: min(85%, 40rem);
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--color-line);
	border-radius: 0.35rem 1rem 1rem 1rem;
	background: var(--color-surface);
	color: var(--color-ink);
	font-size: 0.9375rem;
	line-height: 1.75;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.ai-chat__row--user .ai-chat__bubble {
	border-color: var(--color-ink);
	border-radius: 1rem 0.35rem 1rem 1rem;
	background: var(--color-ink);
	color: #ffffff;
}

.ai-chat__typing .ai-chat__bubble {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding-block: 1.05rem;
}

.ai-chat__typing i {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 999px;
	background: var(--color-faint);
	animation: chat-dot 1.2s infinite;
}

.ai-chat__typing i:nth-child(2) {
	animation-delay: 0.15s;
}

.ai-chat__typing i:nth-child(3) {
	animation-delay: 0.3s;
}

.ai-chat__composer-wrap {
	position: relative;
	z-index: 2;
	padding: 0 clamp(1rem, 4vw, 2.5rem) max(0.875rem, env(safe-area-inset-bottom));
	background: var(--color-bg);
}

.ai-chat__composer {
	display: flex;
	width: min(100%, 48rem);
	margin-inline: auto;
	align-items: flex-end;
	gap: 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--color-line);
	border-radius: 1.5rem;
	background: var(--color-surface);
	box-shadow: 0 10px 30px rgba(28, 26, 23, 0.06);
	transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.ai-chat__composer:focus-within {
	border-color: var(--color-accent);
	box-shadow: 0 10px 30px rgba(28, 26, 23, 0.08);
}

.ai-chat__field {
	width: 100%;
	min-height: 2.75rem;
	max-height: 9rem;
	resize: none;
	border: none;
	background: transparent;
	color: var(--color-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.55;
	outline: none;
	padding: 0.65rem 0.5rem;
}

.ai-chat__field::placeholder {
	color: var(--color-faint);
}

.ai-chat__send {
	display: inline-flex;
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: var(--color-accent);
	color: #ffffff;
	cursor: pointer;
	transition: background 180ms var(--ease-out), transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}

.ai-chat__send svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.ai-chat__send:hover {
	background: #9a4226;
	transform: translateY(-1px);
}

.ai-chat__send:disabled {
	opacity: 0.35;
	cursor: wait;
	transform: none;
}

.ai-chat__notice {
	margin: 0.55rem auto 0;
	color: var(--color-faint);
	font-size: 0.6875rem;
	text-align: center;
}

@keyframes chat-page-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===== 滚动进入动画（仅在 JS 可用时隐藏元素） ===== */
.js.reveal-ready [data-reveal] {
	opacity: 0;
	transform: translateY(3rem) scale(0.98);
	transition:
		opacity 0.9s var(--ease-out),
		transform 0.9s var(--ease-out);
	will-change: opacity, transform;
}

.js.reveal-ready [data-reveal].is-visible {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

.js.reveal-ready [data-reveal='left'] {
	transform: translateX(-3rem);
}

.js.reveal-ready [data-reveal='right'] {
	transform: translateX(3rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ===== 子页面通用 ===== */
.page {
	padding: 10rem var(--gutter) 0;
}

.page__inner {
	width: min(100%, var(--content-width));
	margin-inline: auto;
}

.page__hero {
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.page__eyebrow {
	margin: 0 0 1rem;
	color: var(--color-faint);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.page__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.page__title em {
	font-style: italic;
	color: var(--color-ink);
}

.page__lead {
	max-width: 36rem;
	margin: 1.5rem 0 0;
	color: var(--color-muted);
	font-size: 1.125rem;
	line-height: 1.7;
}

.page__lead em {
	font-style: italic;
	color: var(--color-ink);
}

.page__body {
	max-width: 42rem;
	padding-bottom: 6rem;
}

.page__story p {
	color: var(--color-muted);
	font-size: 1rem;
	line-height: 1.85;
}

.page__h2 {
	margin: 3rem 0 1rem;
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 500;
}

.page__list {
	margin: 1rem 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.page__list li {
	padding-left: 1.25rem;
	position: relative;
	color: var(--color-muted);
	line-height: 1.7;
}

.page__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--color-accent);
}

.page__list strong {
	color: var(--color-ink);
	font-weight: 600;
}

.page__endnote {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-line);
	color: var(--color-faint);
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* 空状态占位 */
.page__empty {
	padding: 3rem 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	color: var(--color-faint);
	font-size: 1rem;
}

/* 随笔索引：每个分类只显示最近两条 */
.notes-index {
	margin-top: clamp(4rem, 8vw, 7rem);
	border-top: 1px solid var(--color-line);
}

.notes-index__group {
	scroll-margin-top: 7rem;
	display: grid;
	grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 2fr);
	gap: clamp(2rem, 6vw, 6rem);
	padding: clamp(3rem, 6vw, 5rem) 0;
	border-bottom: 1px solid var(--color-line);
}

.notes-index__aside {
	position: sticky;
	top: 7rem;
	align-self: start;
}

.notes-index__aside p {
	margin: 0 0 0.8rem;
	color: var(--color-accent);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.notes-index__aside h2 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 500;
	line-height: 1;
}

.notes-index__aside span {
	display: block;
	margin-top: 1rem;
	color: var(--color-faint);
	font-size: 0.78rem;
}

.notes-index__desc {
	max-width: 40rem;
	margin: 0 0 2rem;
	color: var(--color-muted);
	font-size: 1rem;
	line-height: 1.75;
}

.notes-index__preview {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-line);
}

.notes-index__preview li {
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--color-line);
}

.notes-index__preview-link {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: 1.5rem;
	text-decoration: none;
}

.notes-index__preview h3 {
	transition: color 180ms var(--ease-out);
}

.notes-index__preview-link:hover h3 {
	color: var(--color-accent);
}

.notes-index__preview time {
	padding-top: 0.2rem;
	color: var(--color-faint);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.notes-index__preview h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.35;
}

.notes-index__preview p {
	margin: 0.55rem 0 0;
	color: var(--color-muted);
	font-size: 0.875rem;
	line-height: 1.65;
}

.notes-index__more {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: 1.5rem;
	color: var(--color-ink);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.notes-index__more span {
	color: var(--color-accent);
	transition: transform 180ms var(--ease-out);
}

.notes-index__more:hover span {
	transform: translateX(0.3rem);
}

/* 分类时间线页面 */
.journal {
	padding: 9rem var(--gutter) 0;
}

.journal__inner {
	width: min(100%, var(--content-width));
	margin-inline: auto;
}

.journal__hero {
	padding-bottom: clamp(3rem, 7vw, 6rem);
	border-bottom: 1px solid var(--color-line);
}

.journal__back {
	display: inline-block;
	margin-bottom: clamp(3rem, 8vw, 6rem);
	color: var(--color-muted);
	font-size: 0.8rem;
	text-decoration: none;
}

.journal__back:hover {
	color: var(--color-accent);
}

.journal__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
	gap: clamp(2rem, 7vw, 8rem);
	align-items: end;
}

.journal__eyebrow {
	margin: 0 0 1rem;
	color: var(--color-accent);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.journal__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(4rem, 11vw, 8rem);
	font-weight: 500;
	line-height: 0.85;
	letter-spacing: -0.055em;
}

.journal__intro p {
	margin: 0;
	color: var(--color-muted);
	font-size: 1.05rem;
	line-height: 1.8;
}

.journal__intro span {
	display: block;
	margin-top: 1.4rem;
	color: var(--color-faint);
	font-size: 0.75rem;
}

.timeline {
	position: relative;
}

.timeline::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10rem;
	width: 1px;
	background: var(--color-line);
	content: "";
}

.timeline__entry {
	display: grid;
	grid-template-columns: 10rem minmax(0, 1fr);
	border-bottom: 1px solid var(--color-line);
}

.timeline__date {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 14rem;
	padding: 2.5rem 2.3rem 2.5rem 0;
}

.timeline__date::after {
	position: absolute;
	top: 3rem;
	right: -0.32rem;
	width: 0.62rem;
	height: 0.62rem;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent);
	content: "";
}

.timeline__date time {
	color: var(--color-muted);
	font-size: 0.78rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.timeline__date span {
	color: #d4d4d8;
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-style: italic;
}

.timeline__content {
	padding: 0 0 0 clamp(2rem, 6vw, 6rem);
}

.timeline__content summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2rem;
	align-items: end;
	padding: 2.5rem 0;
	cursor: pointer;
	list-style: none;
}

.timeline__content summary::-webkit-details-marker {
	display: none;
}

.timeline__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: 0.8rem;
}

.timeline__tags span {
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	background: #f4f4f5;
	color: #52525b;
	font-size: 0.68rem;
	font-weight: 500;
}

.timeline__summary-copy h2 {
	max-width: 45rem;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.65rem, 3vw, 2.5rem);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -0.02em;
	transition: color 180ms var(--ease-out);
}

.timeline__content summary:hover h2 {
	color: var(--color-accent);
}

.timeline__summary-copy > p {
	max-width: 42rem;
	margin: 0.85rem 0 0;
	color: var(--color-muted);
	font-size: 0.92rem;
	line-height: 1.7;
}

.timeline__toggle {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding-bottom: 0.15rem;
	color: var(--color-muted);
	font-size: 0.75rem;
	white-space: nowrap;
}

.timeline__toggle i {
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	color: var(--color-accent);
	font-size: 1rem;
	font-style: normal;
	transition: transform 300ms var(--ease-out), background 180ms ease;
}

.timeline__toggle-less {
	display: none;
}

.timeline__content[open] .timeline__toggle-more {
	display: none;
}

.timeline__content[open] .timeline__toggle-less {
	display: inline;
}

.timeline__content[open] .timeline__toggle i {
	transform: rotate(45deg);
	background: #f7f7f7;
}

.timeline__body {
	max-width: 46rem;
	padding: 0 0 3.2rem;
	animation: timeline-open 300ms var(--ease-out) both;
}

.timeline__body p {
	margin: 0 0 1.25rem;
	color: #4b4650;
	font-size: 1rem;
	line-height: 1.9;
}

/* 时间线折叠预览：只显示前 100 字摘要 + 阅读全文入口 */
.timeline__preview-text {
	margin: 0 0 1.1rem;
	color: #4b4650;
	font-size: 1rem;
	line-height: 1.9;
}

.timeline__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-accent);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: gap 180ms var(--ease-out);
}

.timeline__read-more:hover {
	gap: 0.7rem;
}

@keyframes timeline-open {
	from { opacity: 0; transform: translateY(-0.5rem); }
	to { opacity: 1; transform: translateY(0); }
}

/* 时间线标题 → 独立文章页 */
.timeline__title-link {
	color: inherit;
	text-decoration: none;
}

/* ===== 文章独立页面 ===== */
.article {
	padding: 9rem var(--gutter) 0;
}

.article__inner {
	width: min(100%, 48rem);
	margin-inline: auto;
}

.article__back {
	display: inline-block;
	margin-bottom: clamp(3rem, 8vw, 5rem);
	color: var(--color-muted);
	font-size: 0.8rem;
	text-decoration: none;
}

.article__back:hover {
	color: var(--color-accent);
}

.article__meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--color-faint);
	font-size: 0.78rem;
}

.article__meta a {
	color: var(--color-accent);
	font-weight: 600;
	text-decoration: none;
}

.article__title {
	margin: 1.2rem 0 0;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 6vw, 4rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 1.4rem;
}

.article__tags span {
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: #f4f4f5;
	color: #52525b;
	font-size: 0.68rem;
	font-weight: 500;
}

.article__lead {
	margin: 1.6rem 0 0;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--color-line);
	color: var(--color-muted);
	font-size: 1.1rem;
	line-height: 1.8;
}

.article__body {
	padding: 2.5rem 0 3rem;
}

.article__body p {
	margin: 0 0 1.5rem;
	color: #4b4650;
	font-size: 1.05rem;
	line-height: 1.95;
}

/* 文章正文 Markdown 富格式排版 */
.article__body h2 {
	margin: 2.6rem 0 1.2rem;
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

.article__body h3 {
	margin: 2rem 0 0.9rem;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--color-ink);
}

.article__body h4 {
	margin: 1.8rem 0 0.7rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--color-ink);
}

.article__body strong {
	color: var(--color-ink);
	font-weight: 600;
}

.article__body ul,
.article__body ol {
	margin: 0 0 1.5rem;
	padding-left: 1.4rem;
	color: #4b4650;
	font-size: 1rem;
	line-height: 1.85;
}

.article__body li {
	margin: 0.35rem 0;
}

.article__body blockquote {
	margin: 1.6rem 0;
	padding: 0.9rem 1.4rem;
	border-left: 3px solid var(--color-ink);
	background: #f7f7f7;
	border-radius: 0 0.5rem 0.5rem 0;
	color: #3f3f46;
	font-size: 0.98rem;
	line-height: 1.8;
}

.article__body blockquote p {
	margin: 0;
	color: inherit;
	font-size: inherit;
}

.article__body a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.article__body a:hover {
	color: #3f3f46;
}

.article__body table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 1.6rem 0 2rem;
	border-collapse: collapse;
	font-size: 0.92rem;
	overflow-x: auto;
	scrollbar-width: thin;
}

.article__body th,
.article__body td {
	min-width: 9rem;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--color-line);
	text-align: left;
	vertical-align: top;
}

.article__body thead th {
	border-bottom: 2px solid var(--color-line);
	font-weight: 600;
	color: var(--color-ink);
}

.article__body tbody tr:hover {
	background: #f7f7f7;
}

/* 行内代码 */
.article__body code {
	padding: 0.15rem 0.4rem;
	border: 1px solid var(--color-line-soft);
	border-radius: 0.35rem;
	background: #f1eee7;
	color: #a34327;
	font-family: 'SFMono-Regular', 'JetBrains Mono', 'Fira Code', Consolas, 'Liberation Mono', monospace;
	font-size: 0.85em;
}

/* 代码块（Astro 内置 Shiki 高亮，主题 github-dark；这里只补布局，颜色交给 Shiki） */
.article__body pre {
	margin: 1.6rem 0;
	padding: 1.1rem 1.3rem;
	overflow-x: auto;
	border: 1px solid var(--color-line);
	border-radius: 0.75rem;
	font-family: 'SFMono-Regular', 'JetBrains Mono', 'Fira Code', Consolas, 'Liberation Mono', monospace;
	font-size: 0.875rem;
	line-height: 1.7;
	box-shadow: 0 1px 2px rgba(28, 26, 23, 0.04);
}

.article__body pre code {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
}

.article__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--color-line);
}

.article__nav-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.4rem;
	border: 1px solid var(--color-line);
	border-radius: 1rem;
	transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.article__nav-item span {
	color: var(--color-faint);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
}

.article__nav-item strong {
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}

a.article__nav-item {
	text-decoration: none;
}

a.article__nav-item:hover {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}

a.article__nav-item:hover strong {
	color: var(--color-accent);
}

.article__nav-item--empty {
	justify-content: center;
	color: var(--color-faint);
	font-size: 0.8rem;
}

.article__nav-item--next {
	align-items: flex-end;
	text-align: right;
}

@media (max-width: 42rem) {
	.article__nav {
		grid-template-columns: 1fr;
	}
}

/* 联系页列表 */
.page__contact {
	display: flex;
	flex-direction: column;
	font-style: normal;
	border-top: 1px solid var(--color-line);
}

.page__contact-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 0;
	text-decoration: none;
	border-bottom: 1px solid var(--color-line);
	transition: background 180ms var(--ease-out);
}

.page__contact-item:hover {
	background: #f7f7f7;
}

.page__contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex-shrink: 0;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	color: var(--color-ink);
	transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.page__contact-item:hover .page__contact-icon {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.page__contact-body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1;
	min-width: 0;
}

.page__contact-label {
	color: var(--color-faint);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.page__contact-value {
	color: var(--color-ink);
	font-size: 1rem;
	font-weight: 500;
}

.page__contact-arrow {
	color: var(--color-faint);
	font-size: 1.125rem;
	opacity: 0;
	transform: translateX(-0.5rem);
	transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.page__contact-item:hover .page__contact-arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--color-accent);
}

/* 作品页：全宽区块（卡片横排需要宽度） */
.page__section {
	padding-bottom: 3rem;
}

/* ===== 新闻页（Hacker News 列表） ===== */
.page__body--wide {
	max-width: 46rem;
}

.page__body--gallery {
	max-width: none;
	width: 100%;
}

.news__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-line);
}

.news__src {
	color: var(--color-accent);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.news__updated {
	color: var(--color-faint);
	font-size: 0.8125rem;
}

.news__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.news__item {
	border-bottom: 1px solid var(--color-line);
}

.news__link {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	padding: 1.4rem 0.25rem;
	text-decoration: none;
	transition: background 180ms var(--ease-out), padding 180ms var(--ease-out);
}

.news__link:hover {
	background: #f7f7f7;
	padding-left: 1rem;
	padding-right: 1rem;
}

.news__rank {
	flex-shrink: 0;
	width: 2rem;
	color: var(--color-faint);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-style: italic;
	font-variant-numeric: tabular-nums;
}

.news__main {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1;
	min-width: 0;
}

.news__title {
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.35;
	transition: color 180ms var(--ease-out);
}

.news__link:hover .news__title {
	color: var(--color-accent);
}

.news__meta {
	color: var(--color-faint);
	font-size: 0.8125rem;
}

.news__arrow {
	flex-shrink: 0;
	color: var(--color-accent);
	font-size: 1.125rem;
	opacity: 0;
	transform: translate(-0.4rem, 0.4rem);
	transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.news__link:hover .news__arrow {
	opacity: 1;
	transform: translate(0, 0);
}

.news__note {
	margin: 2rem 0 0;
	color: var(--color-faint);
	font-size: 0.8125rem;
	line-height: 1.7;
}

@media (max-width: 640px) {
	.news__link {
		gap: 0.75rem;
	}

	.news__rank {
		width: 1.5rem;
		font-size: 1rem;
	}

	.news__title {
		font-size: 1.0625rem;
	}
}

/* 作品页：全宽区块（卡片横排需要宽度） */

/* 作品页卡片：横排 4 个一行，紧凑卡片 */
.page__works {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.page__work-card {
	text-decoration: none;
	border: 1px solid var(--color-line);
	border-radius: 1rem;
	overflow: hidden;
	transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.page__work-card:hover {
	border-color: var(--color-accent);
	transform: translateY(-0.25rem);
}

.page__work-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	padding: 0 0.75rem;
	background: linear-gradient(135deg, #f4f4f5, #ececee);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
}

.page__work-thumb span {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 照片态：真实图片做背景，深色遮罩 + 白色标题 */
.page__work-thumb {
	position: relative;
	overflow: hidden;
}

.page__work-thumb--photo {
	background: #1f2937;
	color: #ffffff;
}

.page__work-thumb--photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--ease-out);
}

.page__work-card:hover .page__work-thumb--photo img {
	transform: scale(1.05);
}

.page__work-thumb--photo::after {
	position: absolute;
	inset: 0;
	content: '';
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.62) 100%);
}

.page__work-thumb--photo span {
	position: relative;
	z-index: 1;
	color: #ffffff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.page__work-meta {
	padding: 1rem 1.1rem 1.1rem;
}

.page__work-name {
	margin: 0 0 0.4rem;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.page__work-tag {
	display: inline-block;
	color: var(--color-faint);
	font-size: 0.8125rem;
}

.page__work-desc {
	margin: 0.75rem 0 0;
	color: var(--color-muted);
	font-size: 0.875rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 分页控件 */
.page__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-top: 1.75rem;
}

.page__pager[hidden] {
	display: none;
}

.page__pager-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	background: transparent;
	color: var(--color-ink);
	font-size: 1rem;
	cursor: pointer;
	transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.page__pager-btn:hover:not(:disabled) {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.page__pager-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.page__pager-info {
	color: var(--color-faint);
	font-size: 0.875rem;
	min-width: 3rem;
	text-align: center;
}

.page__pager-numbers {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.page__pager-num {
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.4rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	background: none;
	color: var(--color-muted);
	font-size: 0.875rem;
	cursor: pointer;
	transition:
		color 150ms var(--ease-out),
		border-color 150ms var(--ease-out),
		background 150ms var(--ease-out);
}

.page__pager-num:hover {
	color: var(--color-accent);
}

.page__pager-num.is-active {
	border-color: var(--color-line);
	background: var(--color-paper, #fff);
	color: var(--color-ink);
	font-weight: 600;
}

.page__pager-dots {
	color: var(--color-faint);
	font-size: 0.875rem;
	user-select: none;
}

@media (max-width: 640px) {
	.page__pager {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.page__pager-numbers {
		flex-wrap: wrap;
		justify-content: center;
	}
}

.page__more-link {
	display: inline-block;
	margin-top: 2rem;
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-style: italic;
	text-decoration: none;
	transition: color 180ms var(--ease-out);
}

.page__more-link:hover {
	color: var(--color-accent);
}

/* 作品页区块头 */
.page__section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 3rem 0 1.5rem;
}

.page__section-head:first-of-type {
	margin-top: 0;
}

.page__section-head .page__h2 {
	margin: 0;
}

.page__count {
	color: var(--color-faint);
	font-size: 0.875rem;
	flex-shrink: 0;
}

.page__work-tags {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.25rem;
}

.page__work-star {
	color: var(--color-accent);
}

/* star 项目列表 */
.page__starred {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-line);
}

.page__starred-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--color-line);
}

.page__starred-item > a {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	flex: 1;
	text-decoration: none;
}

.page__starred-name {
	color: var(--color-ink);
	font-weight: 600;
	font-size: 1rem;
	transition: color 180ms var(--ease-out);
}

.page__starred-item:hover .page__starred-name {
	color: var(--color-accent);
}

.page__starred-desc {
	color: var(--color-muted);
	font-size: 0.875rem;
	line-height: 1.5;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.page__starred-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.page__starred-lang {
	color: var(--color-faint);
	font-size: 0.8125rem;
}

.page__starred-star {
	color: var(--color-accent);
	font-size: 0.8125rem;
	font-weight: 500;
}

@media (max-width: 1024px) {
	.page__works {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.page__works {
		grid-template-columns: minmax(0, 1fr);
	}

	.page__starred-item {
		flex-direction: column;
		gap: 0.5rem;
	}
}


/* ===== 响应式 ===== */
@media (max-width: 42rem) {
	.ai-chat__topbar {
		padding-inline: 1rem;
	}

	.ai-chat__brand-row {
		gap: 0.5rem;
	}

	.ai-chat__brand-copy strong {
		font-size: 0.875rem;
	}

	.ai-chat__back {
		padding: 0.5rem 0.75rem;
	}

	.ai-chat__messages {
		padding: 2rem 1rem 1.5rem;
	}

	.ai-chat__welcome {
		margin-block: auto;
	}

	.ai-chat__welcome h1 {
		font-size: clamp(2.5rem, 13vw, 4rem);
	}

	.ai-chat__suggestions {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 2rem;
	}

	.ai-chat__suggestions button {
		min-height: 3.25rem;
	}

	.ai-chat__bubble {
		max-width: calc(100% - 2.75rem);
	}

	.ai-chat__composer-wrap {
		padding-inline: 0.75rem;
	}

	.ai-chat__composer {
		border-radius: 1.25rem;
		padding: 0.55rem;
	}

	/* 导航：小屏不隐藏链接，改放到 header 下方一条可横向滚动的次级导航 */
	.site-header__inner {
		flex-wrap: wrap;
		row-gap: 0.75rem;
	}

	.site-nav {
		width: 100%;
		gap: 1rem;
	}

	.site-nav__links {
		display: flex;
		flex: 1;
		gap: 1.25rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 0.125rem;
	}

	.site-nav__links::-webkit-scrollbar {
		display: none;
	}

	.site-nav__links a {
		white-space: nowrap;
	}

	.site-nav__cta {
		flex-shrink: 0;
		padding: 0.5rem 1rem;
	}

	/* 首页：收紧顶部留白，避免手机上一进来空一大块 */
	.home {
		padding-top: 8.5rem;
	}

	.home__title {
		font-size: clamp(2.5rem, 12vw, 4rem);
		line-height: 1.06;
	}

	/* 子页面与随笔页顶部留白同样收紧 */
	.page {
		padding-top: 8rem;
	}

	.journal {
		padding-top: 7.5rem;
	}

	/* 新版式移动端：边栏沉底、卡片网格变单列 */
	.home__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 3rem;
	}

	.home__post-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.home__sidebar {
		position: static;
	}

	.home__masthead {
		text-align: left;
	}

	.notes-index__group,
	.journal__hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.notes-index__aside {
		position: static;
	}

	.notes-index__preview li {
		border-bottom: 1px solid var(--color-line);
	}

	.notes-index__preview-link {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.55rem;
	}

	.timeline::before {
		left: 0.3rem;
	}

	.timeline__entry {
		grid-template-columns: minmax(0, 1fr);
		padding-left: 1.5rem;
	}

	.timeline__date {
		min-height: 0;
		padding: 2rem 0 0;
	}

	.timeline__date::after {
		top: 2.3rem;
		left: -1.5rem;
		right: auto;
	}

	.timeline__date span {
		display: none;
	}

	.timeline__content {
		padding-left: 0;
	}

	.timeline__content summary {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
		padding-top: 1rem;
	}

	.timeline__toggle {
		justify-self: start;
	}
}

/* ===== 相册（照片墙） ===== */
.photo-grid {
	columns: 3;
	column-gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.photo-grid > li {
	break-inside: avoid;
	margin-bottom: 1.5rem;
}

.photo-card {
	border: none;
	border-radius: 1rem;
	overflow: hidden;
	background: transparent;
	transition: transform 180ms var(--ease-out);
}

.photo-card:hover {
	transform: translateY(-3px);
}

.photo-card:hover {
	border-color: var(--color-accent);
	transform: translateY(-0.25rem);
}

/* 照片卡片整体作为可点击按钮 */
.photo-card__btn {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.photo-card__btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* ===== lookbook reveal：照片卡片滚动进入视口时逐张浮现 ===== */
.js [data-photo-reveal] {
	opacity: 0;
	transform: translateY(3rem) scale(0.96);
	clip-path: inset(12% 0 0 0);
	transition:
		opacity 0.8s var(--ease-out),
		transform 0.8s var(--ease-out),
		clip-path 0.8s var(--ease-out);
	transition-delay: var(--stagger, 0s);
	will-change: opacity, transform, clip-path;
}

.js [data-photo-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0) scale(1);
	clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
	.js [data-photo-reveal] {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}
}

/* ===== 相册详情：照片在网格与详情之间连续移动 ===== */
.photo-detail {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: clamp(1.25rem, 4vw, 4rem);
	overflow-y: auto;
	border: 0;
	background: transparent;
	color: var(--color-ink);
	transition: background-color 300ms var(--ease-out);
}

.photo-detail:not([open]) {
	display: none;
}

.photo-detail.is-open {
	background: var(--color-bg);
}

.photo-detail::backdrop {
	background: rgba(28, 26, 23, 0.18);
}

.photo-detail__inner {
	display: flex;
	width: min(100%, var(--content-width));
	min-height: calc(100dvh - 2 * clamp(1.25rem, 4vw, 4rem));
	margin-inline: auto;
	flex-direction: column;
	justify-content: center;
}

.photo-detail__back {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 1rem;
	margin-bottom: 1.5rem;
	border: 1px solid var(--color-line);
	border-radius: 0.5rem;
	background: var(--color-surface);
	color: var(--color-ink);
	font-size: 0.9rem;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 240ms var(--ease-out), border-color 180ms var(--ease-out);
}

.photo-detail__back:hover {
	border-color: var(--color-accent);
}

.photo-detail__back:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.photo-detail.is-ready .photo-detail__back {
	opacity: 1;
	pointer-events: auto;
}

.photo-detail__layout {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 2.5rem;
	align-items: center;
}

.photo-detail__figure {
	margin: 0;
	border-radius: 0.5rem;
	overflow: hidden;
}

.photo-detail__figure img {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}

.photo-detail__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.photo-detail.is-content-visible .photo-detail__text {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 120ms;
}

.photo-detail__moving-image {
	position: fixed;
	z-index: 2;
	border-radius: 0.5rem;
	object-fit: cover;
	pointer-events: none;
	transform-origin: top left;
}

.photo-detail__date {
	font-size: 0.85rem;
	color: var(--color-muted, #8a8680);
	letter-spacing: 0.04em;
}

.photo-detail__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-ink);
}

.photo-detail__desc {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--color-ink-soft, #55504a);
}

.photo-detail__source {
	display: inline-block;
	margin-top: 1.25rem;
	font-size: 0.875rem;
	color: var(--color-accent, #b5502e);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.photo-detail__source:hover {
	opacity: 0.75;
}

.photo-card figure {
	margin: 0;
}

.photo-card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1rem;
}

.photo-card figcaption {
	padding: 0.75rem 1rem 0.25rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-ink);
}

.photo-card__date {
	display: block;
	padding: 0 1rem 0.75rem;
	font-size: 0.8rem;
	color: var(--color-muted, #8a8680);
}

@media (max-width: 720px) {
	.photo-grid {
		columns: 2;
	}

	.photo-detail__layout {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

@media (max-width: 480px) {
	.photo-grid {
		columns: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.photo-detail,
	.photo-detail__back,
	.photo-detail__text {
		transition: none;
	}
}