@windcoder/astro-theme-orchid 0.0.0-stage → 0.2.0

package/src/styles/global.css

@@ -0,0 +1,4864 @@
+/* ==========================================================================
+   @windcoder/astro-theme-orchid — 全局样式
+   移植自 design/prototype/styles.css（冻结原型），差异：
+   1. accent 三变量化：--accent-h/s/l 由构建期 accentColor 注入，
+      派生色用 calc 公式（与原型 #4a9d8f 硬编码值数学等价）
+   2. 搜索浮层 / 调色面板 / 评论 / 画廊 modal 的 CSS 先行就位（M3b 启用对应 DOM）
+   3. 补充：callout tip/important/danger、.h-anchor 标题锚点
+      （代码块样式自 §4.61 起由 Expressive Code 内联输出接管，本文件不再维护）
+   ========================================================================== */
+
+@import "tailwindcss";
+
+/* ---------- 1. 设计令牌 ---------- */
+:root {
+	--accent-h: 170;
+	--accent-s: 36%;
+	--accent-l: 45%;
+	--accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
+	--accent-deep: hsl(
+		var(--accent-h) var(--accent-s) calc(var(--accent-l) - 10%)
+	);
+	--accent-soft: hsl(var(--accent-h) calc(var(--accent-s) + 4%) 92%);
+	--accent-ink: hsl(
+		var(--accent-h) var(--accent-s) calc(var(--accent-l) - 15%)
+	);
+	--bg: #f6f4ef;
+	--bg-soft: #efede6;
+	--surface: #fdfcf9;
+	--ink: #2f2d2a;
+	--ink-2: #57544e;
+	--muted: #8b877e;
+	--border: #e3dfd4;
+	--border-2: #d5d0c2;
+	--font-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
+	--font-body:
+		-apple-system, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
+	--font-mono:
+		ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", monospace;
+	--radius: 12px;
+	--radius-sm: 8px;
+	--shadow-sm:
+		0 1px 2px rgba(47, 45, 42, 0.05), 0 2px 8px rgba(47, 45, 42, 0.04);
+	--shadow-md:
+		0 2px 6px rgba(47, 45, 42, 0.07), 0 10px 28px rgba(47, 45, 42, 0.08);
+	--header-h: 64px;
+}
+
+html.dark {
+	--accent: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 10%));
+	--accent-deep: hsl(
+		var(--accent-h) var(--accent-s) calc(var(--accent-l) + 17%)
+	);
+	--accent-soft: hsl(var(--accent-h) calc(var(--accent-s) - 16%) 20%);
+	--accent-ink: hsl(
+		var(--accent-h) var(--accent-s) calc(var(--accent-l) + 25%)
+	);
+	--bg: #131516;
+	--bg-soft: #181b1c;
+	--surface: #1a1d1e;
+	--ink: #e5e2db;
+	--ink-2: #b9b5ac;
+	--muted: #8a867e;
+	--border: #282c2d;
+	--border-2: #333839;
+	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);
+	--shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.32);
+}
+
+/* ---------- 2. Reset ---------- */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+* {
+	margin: 0;
+}
+html {
+	-webkit-text-size-adjust: 100%;
+	scroll-behavior: smooth;
+	/* 移动端横向滚动兜底（§4.13→§4.56）：clip 不产生滚动容器、不影响 sticky；
+	   旧浏览器回退行（overflow-x: hidden 双写）移除以通过 biome noDuplicateProperties */
+	overflow-x: clip;
+}
+body {
+	font-family: var(--font-body);
+	font-size: 16px;
+	line-height: 1.75;
+	color: var(--ink);
+	background-color: var(--bg);
+	background-image:
+		radial-gradient(
+			1100px 520px at 85% -10%,
+			hsl(var(--accent-h) 32% 90% / 0.55),
+			transparent 60%
+		),
+		radial-gradient(
+			900px 480px at -10% 20%,
+			hsl(var(--accent-h) 25% 88% / 0.4),
+			transparent 55%
+		);
+	background-attachment: fixed;
+	-webkit-font-smoothing: antialiased;
+}
+html.dark body {
+	background-image:
+		radial-gradient(
+			1100px 520px at 85% -10%,
+			hsl(var(--accent-h) 25% 22% / 0.5),
+			transparent 60%
+		),
+		radial-gradient(
+			900px 480px at -10% 20%,
+			hsl(var(--accent-h) 20% 18% / 0.4),
+			transparent 55%
+		);
+}
+img {
+	display: block;
+	max-width: 100%;
+}
+[hidden] {
+	display: none !important;
+}
+button,
+input {
+	font: inherit;
+	color: inherit;
+}
+button {
+	cursor: pointer;
+	background: none;
+	border: none;
+	padding: 0;
+}
+a {
+	color: var(--accent-ink);
+	text-decoration: none;
+}
+a:hover {
+	color: var(--accent-deep);
+}
+html.dark a:hover {
+	color: var(--accent);
+}
+::selection {
+	background: var(--accent-soft);
+	color: var(--accent-ink);
+}
+
+.shell {
+	max-width: var(--page-width, 1600px);
+	margin-inline: auto;
+	/* §4.46 对齐参考站 px-2 md:px-4：容器内边距 16px，页面留白交给列距与卡片内边距 */
+	padding-inline: 16px;
+}
+/* xl(1280+) 对齐参考站 w-92vw 策略：容器取 min(92vw, pageWidth)，
+   宽屏最多 1600px 居中、两侧留 4% 呼吸位；<1280px 全宽铺满（§4.32 迭代） */
+@media (min-width: 1280px) {
+	.shell {
+		max-width: min(92vw, var(--page-width, 1600px));
+	}
+}
+.muted {
+	color: var(--muted);
+}
+
+.skip-link {
+	position: absolute;
+	left: 16px;
+	top: -48px;
+	z-index: 200;
+	padding: 8px 16px;
+	border-radius: var(--radius-sm);
+	background: var(--accent);
+	color: #fff;
+	transition: top 0.2s;
+}
+.skip-link:focus {
+	top: 12px;
+}
+
+/* ---------- 3. Header ---------- */
+.site-header {
+	position: sticky;
+	top: 0;
+	z-index: 100;
+	height: var(--header-h);
+	background: color-mix(in srgb, var(--bg) 78%, transparent);
+	-webkit-backdrop-filter: blur(14px);
+	backdrop-filter: blur(14px);
+	border-bottom: 1px solid var(--border);
+}
+.header-inner {
+	display: flex;
+	align-items: center;
+	gap: 24px;
+	height: var(--header-h);
+}
+.site-title {
+	font-family: var(--font-display);
+	font-size: 22px;
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	color: var(--ink);
+	white-space: nowrap;
+	/* Logo（§4.20）：随标题行内对齐，flex 居中保证不同高度图片垂直居中 */
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+}
+.nav-logo {
+	width: auto;
+	height: 26px;
+	border-radius: 5px;
+	flex: none;
+}
+.site-title:hover {
+	color: var(--accent-deep);
+}
+html.dark .site-title:hover {
+	color: var(--accent);
+}
+.site-nav {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	margin-left: 8px;
+}
+.nav-link {
+	padding: 6px 14px;
+	border-radius: 999px;
+	color: var(--ink-2);
+	font-size: 15px;
+	transition:
+		color 0.15s,
+		background-color 0.15s;
+}
+.nav-link:hover {
+	color: var(--ink);
+	background: var(--bg-soft);
+}
+/* nav 子菜单（§4.16）：桌面 hover 展开，无 href 父项/移动端点击 toggle */
+.nav-item {
+	position: relative;
+}
+.nav-sub-toggle {
+	background: none;
+	border: 0;
+	cursor: pointer;
+	font: inherit;
+}
+/* 父项 chevron（§4.27）：label 后下拉标识，桌面 hover / 移动端展开时旋转 */
+.has-sub > .nav-link {
+	display: inline-flex;
+	align-items: center;
+}
+.nav-caret {
+	flex: none;
+	width: 14px;
+	height: 14px;
+	margin-inline-start: 4px;
+	transition: transform 0.15s;
+}
+.nav-item.has-sub:hover .nav-caret,
+.nav-item.open-sub .nav-caret {
+	transform: rotate(180deg);
+}
+.nav-sub {
+	position: absolute;
+	top: calc(100% + 6px);
+	left: 50%;
+	transform: translateX(-50%) translateY(4px);
+	min-width: 128px;
+	padding: 6px;
+	border-radius: var(--radius);
+	background: var(--surface);
+	border: 1px solid var(--border);
+	box-shadow: var(--shadow-md);
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	transition:
+		opacity 0.15s,
+		transform 0.15s,
+		visibility 0.15s;
+	z-index: 110;
+}
+/* 透明桥（§4.40）：补齐面板与父项间 6px 空隙，鼠标移向子菜单不丢 :hover；
+   仅面板展开态（hover/open-sub 下 pointer-events 生效）需要承接 */
+.nav-sub::before {
+	content: "";
+	position: absolute;
+	top: -7px;
+	left: 0;
+	right: 0;
+	height: 7px;
+}
+.nav-item.has-sub:hover .nav-sub,
+.nav-item.open-sub .nav-sub {
+	opacity: 1;
+	visibility: visible;
+	pointer-events: auto;
+	transform: translateX(-50%) translateY(0);
+}
+.nav-sub-link {
+	padding: 7px 12px;
+	border-radius: var(--radius-sm);
+	font-size: 14px;
+	color: var(--ink-2);
+	white-space: nowrap;
+}
+.nav-sub-link:hover {
+	color: var(--ink);
+	background: var(--bg-soft);
+}
+.nav-item.is-active > .nav-link,
+.nav-item.is-active > .nav-sub-toggle {
+	color: var(--accent-ink);
+	background: var(--accent-soft);
+}
+@media (max-width: 860px) {
+	.nav-sub-toggle {
+		width: 100%;
+		text-align: left;
+		justify-content: flex-start;
+	}
+	/* static 布局下伪元素会相对 nav-item 错位，移动端禁用桥 */
+	.nav-sub::before {
+		content: none;
+	}
+	.nav-sub {
+		position: static;
+		transform: none;
+		display: none;
+		border: 0;
+		background: transparent;
+		box-shadow: none;
+		padding: 2px 0 4px 14px;
+		min-width: 0;
+		opacity: 1;
+		visibility: visible;
+		pointer-events: auto;
+	}
+	.nav-item.has-sub:hover .nav-sub {
+		opacity: 1;
+		visibility: visible;
+		pointer-events: auto;
+		transform: none;
+	}
+	.nav-item.open-sub .nav-sub {
+		display: flex;
+		transform: none;
+	}
+}
+.nav-link.is-active {
+	color: var(--accent-ink);
+	background: var(--accent-soft);
+	font-weight: 500;
+}
+.header-actions {
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+.icon-btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 38px;
+	height: 38px;
+	border-radius: 10px;
+	color: var(--ink-2);
+	transition:
+		color 0.15s,
+		background-color 0.15s;
+}
+.icon-btn:hover {
+	color: var(--ink);
+	background: var(--bg-soft);
+}
+.icon-btn svg {
+	width: 20px;
+	height: 20px;
+}
+#modeToggle .i-sun {
+	display: none;
+}
+html.dark #modeToggle .i-moon {
+	display: none;
+}
+html.dark #modeToggle .i-sun {
+	display: block;
+}
+.nav-burger {
+	display: none;
+}
+
+/* palette（调色面板，M3b 启用入口按钮） */
+.palette-wrap {
+	position: relative;
+}
+.palette-pop {
+	position: absolute;
+	right: 0;
+	top: calc(100% + 10px);
+	z-index: 110;
+	min-width: 216px;
+	padding: 14px;
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow-md);
+}
+.palette-title {
+	font-size: 12px;
+	color: var(--muted);
+	margin-bottom: 10px;
+	letter-spacing: 0.08em;
+}
+.palette-row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+.swatch {
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	background: var(--sw);
+	border: 2px solid transparent;
+	box-shadow: inset 0 0 0 2px var(--surface);
+	transition:
+		transform 0.15s,
+		border-color 0.15s;
+}
+.swatch:hover {
+	transform: scale(1.12);
+}
+.swatch.is-active {
+	border-color: var(--accent-ink);
+}
+.hue-slider {
+	width: 100%;
+	height: 14px;
+	margin-top: 14px;
+	appearance: none;
+	-webkit-appearance: none;
+	background: linear-gradient(
+		to right,
+		hsl(0 80% 60%),
+		hsl(30 80% 60%),
+		hsl(60 80% 60%),
+		hsl(100 80% 60%),
+		hsl(140 80% 60%),
+		hsl(170 80% 60%),
+		hsl(210 80% 60%),
+		hsl(250 80% 60%),
+		hsl(290 80% 60%),
+		hsl(330 80% 60%),
+		hsl(360 80% 60%)
+	);
+	border-radius: 999px;
+	cursor: pointer;
+	outline-offset: 3px;
+}
+.hue-slider::-webkit-slider-thumb {
+	appearance: none;
+	-webkit-appearance: none;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background: var(--surface);
+	border: 2px solid var(--accent);
+	box-shadow: var(--shadow-sm);
+}
+.hue-slider::-moz-range-thumb {
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background: var(--surface);
+	border: 2px solid var(--accent);
+	box-shadow: var(--shadow-sm);
+}
+.palette-foot {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: 12px;
+}
+.hue-badge {
+	font-size: 12px;
+	color: var(--muted);
+	font-variant-numeric: tabular-nums;
+}
+.palette-reset {
+	font-size: 12px;
+	color: var(--ink-2);
+	padding: 3px 10px;
+	border-radius: 8px;
+	border: 1px solid var(--border);
+	transition:
+		color 0.15s,
+		border-color 0.15s,
+		background-color 0.15s;
+}
+.palette-reset:hover {
+	color: var(--accent-ink);
+	border-color: var(--accent);
+	background: var(--accent-soft);
+}
+
+/* 搜索（M3b-b6→§4.56）：导航栏内联搜索框 + 结果浮层（对齐参考项目 Navbar 形态） */
+.search-wrap {
+	position: relative;
+}
+/* 桌面内联搜索框：icon + input，输入即搜，focus 扩宽 */
+.nav-search {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	height: 38px;
+	padding: 0 12px;
+	border-radius: 10px;
+	background: var(--bg-soft);
+	color: var(--muted);
+	transition:
+		background-color 0.15s,
+		color 0.15s;
+}
+.nav-search:hover,
+.nav-search:focus-within {
+	color: var(--ink-2);
+}
+.nav-search svg {
+	width: 16px;
+	height: 16px;
+	flex: none;
+}
+.nav-search input {
+	width: 150px;
+	border: none;
+	outline: none;
+	background: transparent;
+	font: inherit;
+	font-size: 14px;
+	color: var(--ink);
+	transition: width 0.2s;
+}
+.nav-search input:focus {
+	width: 220px;
+}
+.nav-search input::placeholder {
+	color: var(--muted);
+}
+.nav-search input::-webkit-search-cancel-button {
+	-webkit-appearance: none;
+}
+/* 移动端 icon 按钮：<640px 替代内联框（对齐参考项目移动端形态） */
+.nav-search-toggle {
+	display: none;
+}
+.search-pop {
+	position: absolute;
+	right: 0;
+	top: calc(100% + 10px);
+	z-index: 110;
+	width: 380px;
+	max-width: calc(100vw - 32px);
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow-md);
+	overflow: hidden;
+}
+/* 浮层内输入框仅移动端显示（桌面输入在内联框中完成） */
+.search-bar {
+	display: none;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 14px;
+	border-bottom: 1px solid var(--border);
+	color: var(--muted);
+}
+.search-bar svg {
+	width: 16px;
+	height: 16px;
+	flex: none;
+}
+.search-bar input {
+	flex: 1;
+	min-width: 0;
+	border: none;
+	outline: none;
+	background: transparent;
+	font: inherit;
+	font-size: 14px;
+	color: var(--ink);
+}
+.search-bar input::placeholder {
+	color: var(--muted);
+}
+.search-bar input::-webkit-search-cancel-button {
+	-webkit-appearance: none;
+}
+.search-results {
+	max-height: 56vh;
+	overflow-y: auto;
+	overscroll-behavior: contain;
+}
+.search-item {
+	display: block;
+	padding: 10px 14px;
+	transition: background-color 0.15s;
+}
+.search-item:hover {
+	background: var(--bg-soft);
+}
+.search-item + .search-item {
+	border-top: 1px solid var(--border);
+}
+.search-item-title {
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--ink);
+}
+.search-item-excerpt {
+	margin-top: 3px;
+	font-size: 12px;
+	line-height: 1.6;
+	color: var(--muted);
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+.search-item-excerpt mark,
+.search-item-title mark {
+	background: var(--accent-soft);
+	color: var(--accent-ink);
+	padding: 0 1px;
+	border-radius: 3px;
+}
+.search-hint {
+	padding: 14px;
+	font-size: 13px;
+	color: var(--muted);
+	text-align: center;
+}
+
+/* ---------- 3.5 背景壁纸（§4.35，banner 单模式） ---------- */
+/* Header 为 sticky 且背景半透明 + 毛玻璃：负 margin 让横幅上缘滑入 Header 底下 */
+.wallpaper-banner {
+	position: relative;
+	height: var(--banner-h, 32vh);
+	margin-top: calc(-1 * var(--header-h));
+	overflow: hidden;
+}
+.wallpaper-banner img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: var(--banner-pos, center);
+}
+/* 黑蒙层：深浅模式同色（orchid-blog 口径），只保证压暗不改变色调 */
+.wallpaper-dim {
+	position: absolute;
+	inset: 0;
+	background: rgba(0, 0, 0, var(--banner-dim, 0.2));
+}
+/* hero 叠加（§4.39）：首页 hero 启用时主句/副句居中压到 banner 上；
+   banner 上缘滑入 Header 底下（负 margin），文字区加 padding-top 补偿做视觉居中 */
+.wallpaper-hero {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: var(--header-h) 24px 0;
+	text-align: center;
+}
+.wallpaper-hero .hero-quote {
+	color: #fff;
+	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
+}
+/* banner 上强调色需提亮：accent-ink 在黑蒙层上偏暗，混入白色保证可读 */
+.wallpaper-hero .hero-quote em {
+	color: color-mix(in srgb, var(--accent) 45%, #fff);
+}
+.wallpaper-hero .hero-sub {
+	color: rgba(255, 255, 255, 0.88);
+	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
+}
+
+/* ---------- 4. Main 通用 ---------- */
+.site-main {
+	min-height: calc(100vh - var(--header-h) - 200px);
+	padding: 40px 0 64px;
+}
+.section-title {
+	font-family: var(--font-display);
+	font-size: 22px;
+	font-weight: 700;
+	margin-bottom: 20px;
+	letter-spacing: 0.02em;
+}
+.card {
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow-sm);
+}
+.chip {
+	display: inline-flex;
+	align-items: center;
+	padding: 2px 12px;
+	border-radius: 999px;
+	font-size: 13px;
+	/* §4.46 对齐参考站 text-sm font-bold 标签层级 */
+	font-weight: 600;
+	color: var(--ink-2);
+	background: var(--bg-soft);
+	border: 1px solid var(--border);
+	transition:
+		color 0.15s,
+		border-color 0.15s,
+		background-color 0.15s;
+}
+.chip:hover {
+	color: var(--accent-ink);
+	border-color: var(--accent);
+}
+.chip.is-on {
+	color: var(--accent-ink);
+	background: var(--accent-soft);
+	border-color: var(--accent);
+}
+.btn {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 9px 22px;
+	border-radius: 999px;
+	background: var(--accent);
+	color: #fff;
+	font-size: 15px;
+	border: 1px solid var(--accent);
+	transition:
+		background-color 0.15s,
+		border-color 0.15s,
+		transform 0.15s;
+}
+.btn:hover {
+	background: var(--accent-deep);
+	border-color: var(--accent-deep);
+	color: #fff;
+}
+html.dark .btn:hover {
+	background: var(--accent);
+	border-color: var(--accent);
+	color: #131516;
+}
+.btn-ghost {
+	background: transparent;
+	color: var(--accent-ink);
+	border-color: var(--border-2);
+}
+.btn-ghost:hover {
+	background: var(--accent-soft);
+	color: var(--accent-ink);
+	border-color: var(--accent);
+}
+
+/* reveal */
+.reveal {
+	opacity: 0;
+	transform: translateY(14px);
+	transition:
+		opacity 0.6s ease,
+		transform 0.6s ease;
+}
+.reveal.is-in {
+	opacity: 1;
+	transform: none;
+}
+
+/* ---------- 5. 首页 ---------- */
+.hero {
+	padding: 28px 0 36px;
+	text-align: center;
+}
+.hero-quote {
+	font-family: var(--font-display);
+	font-size: clamp(26px, 4vw, 38px);
+	font-weight: 700;
+	letter-spacing: 0.04em;
+}
+.hero-quote em {
+	font-style: normal;
+	color: var(--accent-ink);
+}
+.hero-sub {
+	margin-top: 14px;
+	color: var(--muted);
+	font-size: 15px;
+}
+
+.home-layout {
+	display: grid;
+	/* minmax(0,1fr)（§4.24）：单列下限归零，防分类栏/文章卡等宽内容撑破轨道产生横向滚动 */
+	grid-template-columns: minmax(0, 1fr);
+	gap: 32px;
+	align-items: start;
+}
+@media (min-width: 1025px) {
+	.home-layout {
+		grid-template-columns: minmax(0, 1fr) 280px;
+		/* §4.46 对齐参考站 gap-4：桌面列距 16px（移动端保持 32px 纵向节奏） */
+		gap: 16px;
+	}
+}
+
+.post-card {
+	display: grid;
+	grid-template-columns: 1fr;
+	position: relative;
+	overflow: hidden;
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow-sm);
+	transition:
+		box-shadow 0.2s,
+		transform 0.2s,
+		border-color 0.2s;
+}
+.post-card:hover {
+	box-shadow: var(--shadow-md);
+	transform: translateY(-2px);
+	border-color: var(--border-2);
+}
+.post-cover {
+	position: relative;
+	aspect-ratio: 16 / 9;
+	overflow: hidden;
+}
+.post-cover img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	transition: transform 0.5s ease;
+}
+.post-card:hover .post-cover img {
+	transform: scale(1.03);
+}
+.post-body {
+	padding: 22px 24px 24px;
+}
+/* 无封面卡：为右侧 .post-enter 竖条（52px + 右偏 12px + 间隙）预留 80px（§4.34 迭代，
+   对齐参考站 no-cover content calc(100%-52px-12px) 留白；compact/text-only 行不预留） */
+.post-card.no-cover:not(.compact) .post-body {
+	padding-right: 80px;
+}
+.post-title {
+	font-family: var(--font-display);
+	font-size: 20px;
+	font-weight: 700;
+	line-height: 1.5;
+}
+.post-title a {
+	color: var(--ink);
+}
+.post-title a:hover {
+	color: var(--accent-deep);
+}
+html.dark .post-title a:hover {
+	color: var(--accent);
+}
+.post-card:hover .post-title a {
+	color: var(--accent-deep);
+}
+html.dark .post-card:hover .post-title a {
+	color: var(--accent);
+}
+.post-excerpt {
+	margin-top: 8px;
+	color: var(--ink-2);
+	font-size: 15px;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+.post-meta {
+	margin-top: 12px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px 14px;
+	color: var(--muted);
+	font-size: 13px;
+}
+.post-meta .dot::before {
+	content: "·";
+	margin-right: 14px;
+}
+.post-tags {
+	margin-top: 12px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+.pin-badge {
+	position: absolute;
+	top: 14px;
+	left: 14px;
+	z-index: 2;
+	padding: 3px 12px;
+	border-radius: 999px;
+	background: var(--accent);
+	color: #fff;
+	font-size: 12px;
+	letter-spacing: 0.1em;
+}
+/* 无封面卡右侧进入按钮竖条（对齐参考站 post-card-enter-btn）：
+   上/下/右各内缩 12px、宽 52px，浅 accent 底 + chevron */
+.post-enter {
+	position: absolute;
+	top: 12px;
+	right: 12px;
+	bottom: 12px;
+	z-index: 2;
+	width: 52px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 12px;
+	background: var(--accent-soft);
+	color: var(--accent-deep);
+	transition:
+		background 0.2s,
+		transform 0.15s;
+}
+.post-enter:hover {
+	background: color-mix(in srgb, var(--accent) 22%, var(--surface));
+}
+.post-enter:active {
+	transform: scale(0.95);
+}
+.post-enter svg {
+	width: 26px;
+	height: 26px;
+}
+html.dark .post-enter {
+	color: var(--accent);
+}
+/* compact 紧凑行不挂竖条（其封面/文本行本身已横排） */
+.post-card.compact .post-enter {
+	display: none;
+}
+/* 置顶卡（featured，§4.55）：列表形态下与普通卡同构同高——封面左置内缩圆角块，
+   样式镜像普通卡右置封面（同 30% 宽 + 16px 边距 + 12px 圆角，图文间隔一致），
+   不再使用贴边大图 + 加大标题的特化形态 */
+@media (min-width: 641px) {
+	.post-list:not(.grid-mode) .post-card.featured.has-cover .post-cover {
+		position: absolute;
+		top: 16px;
+		left: 16px;
+		bottom: 16px;
+		right: auto;
+		width: 30%;
+		aspect-ratio: auto;
+		min-height: 0;
+		border-radius: 12px;
+	}
+	.post-list:not(.grid-mode) .post-card.featured.has-cover .post-body {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		min-height: 196px;
+		/* 左留：封面 30% + 左偏 16px + 图文间隙 16px；右留 32px 常规边距（§4.56 镜像普通卡） */
+		padding: 28px 32px 28px calc(30% + 32px);
+	}
+}
+.post-card.text-only .post-cover {
+	display: none;
+}
+/* 列表第三种形态：紧凑行（compact），可按篇混排 */
+.post-card.compact {
+	grid-template-columns: 128px 1fr;
+}
+.post-card.compact .post-cover {
+	aspect-ratio: 4 / 3;
+}
+.post-card.compact .post-body {
+	padding: 13px 18px;
+	align-self: center;
+}
+.post-card.compact .post-title {
+	font-size: 16px;
+	line-height: 1.55;
+}
+.post-card.compact .post-excerpt {
+	-webkit-line-clamp: 1;
+	margin-top: 4px;
+	font-size: 13.5px;
+}
+.post-card.compact .post-meta {
+	margin-top: 6px;
+	font-size: 12.5px;
+}
+.post-card.compact .post-tags {
+	display: none;
+}
+.post-card.compact.text-only {
+	grid-template-columns: 1fr;
+}
+
+/* 列表形态切换（§4.34→§4.55）：按钮移至导航栏 actions 区（复用 .icon-btn 形态），
+   仅首页/列表页显示（body[data-page="home"] 显隐，无闪烁）；图标由按钮 aria-pressed 驱动 */
+.layout-switch {
+	display: none;
+}
+body[data-page="home"] .layout-switch {
+	display: inline-flex;
+}
+.layout-switch .ic-grid {
+	display: none;
+}
+.layout-switch[aria-pressed="true"] .ic-list {
+	display: none;
+}
+.layout-switch[aria-pressed="true"] .ic-grid {
+	display: block;
+}
+.post-list.grid-mode {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(var(--col-w, 320px), 1fr));
+	gap: 20px;
+	align-items: stretch;
+}
+/* 非卡片条目（分类栏/标题/分页/空态）占满整行；
+   :has(.post-card) 例外——兼容站点 override 把卡片包在 div.relative 里（demo 即如此），
+   包裹层应作为普通网格单元参与排列，否则会整行跨越把网格压成单列 */
+.post-list.grid-mode > :not(.post-card):not(:has(.post-card)) {
+	grid-column: 1 / -1;
+}
+/* 卡片包裹层（override 场景）：自身拉伸为弹性盒，让内部卡片填满单元并等高 */
+.post-list.grid-mode > :has(.post-card) {
+	display: flex;
+	min-width: 0;
+}
+.post-list.grid-mode > :has(.post-card) > .post-card {
+	flex: 1;
+	min-width: 0;
+}
+/* featured（无论直接 article 还是 override 包裹层）始终独占整行 */
+.post-list.grid-mode > :has(.post-card.featured) {
+	grid-column: 1 / -1;
+}
+/* 列表形态：flex 纵向 gap 统一间距（对齐参考站 flex-col gap-4），
+   不依赖相邻 margin，杜绝 margin 折叠/与 gap 叠加；子项自带垂直 margin 归零 */
+.post-list:not(.grid-mode) {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+/* 两种形态统一由容器 gap 控制节奏，子项自带垂直 margin 归零（grid/flex 下 margin 不折叠会叠加） */
+.post-list > * {
+	margin-block: 0;
+}
+/* 网格内全部卡片恢复纵向、封面在上（覆盖 featured 横排与 compact 紧凑行） */
+.post-list.grid-mode .post-card {
+	display: flex;
+	flex-direction: column;
+	grid-template-columns: none;
+}
+.post-list.grid-mode .post-card.featured {
+	grid-column: 1 / -1;
+}
+.post-list.grid-mode .post-card.featured .post-cover {
+	aspect-ratio: 16 / 9;
+	min-height: 0;
+}
+.post-list.grid-mode .post-card.compact .post-cover {
+	aspect-ratio: 16 / 9;
+}
+.post-list.grid-mode .post-card.compact .post-body {
+	padding: 18px 20px 20px;
+	align-self: auto;
+}
+/* 随机封面全源失败（§4.33）：藏 img 露出 LQIP 渐变占位 */
+.post-card .post-cover img.cover-broken {
+	visibility: hidden;
+}
+/* 移动端小屏（§4.55）：布局开关对移动端不生效——网格强制还原单列上下布局
+   （卡片本就 flex column：封面在上、标题/简介等文字在下） */
+@media (max-width: 767px) {
+	.post-list.grid-mode {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+	}
+}
+/* 列表形态（非网格）普通 cover 卡桌面：封面右浮为内缩圆角块，正文居左铺满，
+   与网格形态（封面在上全宽贴边）拉开结构差异。对齐参考站 post-card-image：
+   absolute top/right/bottom 16px + 宽 30% + 独立圆角，封面不贴卡片边；
+   无封面卡（.no-cover）不命中本规则，文字不会被挤到左列 */
+@media (min-width: 641px) {
+	.post-list:not(.grid-mode)
+		.post-card:not(.featured):not(.compact).has-cover
+		.post-cover {
+		position: absolute;
+		top: 16px;
+		right: 16px;
+		bottom: 16px;
+		left: auto;
+		width: 30%;
+		aspect-ratio: auto;
+		min-height: 0;
+		border-radius: 12px;
+	}
+	.post-list:not(.grid-mode)
+		.post-card:not(.featured):not(.compact).has-cover
+		.post-body {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		min-height: 196px;
+		/* 右留：封面 30% + 右偏 16px + 图文间隙 16px */
+		padding: 28px calc(30% + 32px) 28px 32px;
+	}
+}
+
+/* 分类导航栏（§4.15）：全站顶部横条，pill 横排 + 滚动区隐藏滚动条 */
+.category-bar {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin-bottom: 24px;
+	padding: 8px 12px;
+}
+.bar-scroll {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex: 1;
+	min-width: 0;
+	overflow-x: auto;
+	scrollbar-width: none;
+}
+.bar-scroll::-webkit-scrollbar {
+	display: none;
+}
+.category-pill {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 6px 14px;
+	border-radius: 999px;
+	font-size: 14px;
+	color: var(--ink-2);
+	white-space: nowrap;
+	transition:
+		color 0.15s,
+		background-color 0.15s;
+}
+.category-pill:hover {
+	color: var(--ink);
+	background: var(--bg-soft);
+}
+.category-pill.is-active {
+	color: var(--accent-ink);
+	background: var(--accent-soft);
+}
+.pill-count {
+	padding: 3px 7px;
+	border-radius: 999px;
+	background: var(--bg-soft);
+	color: var(--muted);
+	font-size: 11px;
+	line-height: 1;
+	font-variant-numeric: tabular-nums;
+}
+.category-pill.is-active .pill-count {
+	background: var(--accent);
+	color: #fff;
+}
+.bar-divider {
+	width: 1px;
+	height: 18px;
+	flex: none;
+	margin-inline: 4px;
+	background: var(--border);
+}
+
+/* 溢出横向滚动 + 右缘渐隐（§4.21，替代 §4.18 折叠下拉）：
+   app.ts 检测 scrollWidth 溢出后给 .category-bar 加 .is-scrollable，
+   mask 只作用于滚动区，让最后一个 pill 右缘淡出提示可滑；「更多」固定显示 */
+.bar-more {
+	flex: none;
+}
+.bar-more-arrow {
+	width: 14px;
+	height: 14px;
+}
+.category-bar.is-scrollable .bar-scroll {
+	-webkit-mask-image: linear-gradient(
+		to right,
+		#000 calc(100% - 36px),
+		transparent
+	);
+	mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
+}
+
+/* sidebar */
+/* §4.45：min-width:0 阻断子内容 min-content 沿 grid/flex 链向上撑宽，
+   保证侧栏宽度恒定（内容在卡片内截断，而非卡片被内容撑动）
+   §4.50：align-self:stretch 拉伸 aside 至行轨道高度（父级 align-items:start 不拉伸 item），
+   为 .side-sticky 提供粘性活动空间；display 改 flex column，防止内部行被 stretch 拉伸撑大组间距 */
+.sidebar {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	min-width: 0;
+	align-self: stretch;
+}
+/* §4.50 position 分组容器（top/sticky 双组）：组内卡片间距保持 20px 节奏 */
+.side-top,
+.side-sticky {
+	display: grid;
+	gap: 20px;
+	min-width: 0;
+}
+/* §4.50 sticky 组：≥768px 吸附于 sticky header 下方跟随滚动
+   （top 间距对齐独立 toc 的 calc(var(--header-h) + 24px)）；移动端平铺无 sticky */
+@media (min-width: 768px) {
+	.side-sticky {
+		position: sticky;
+		top: calc(var(--header-h) + 24px);
+	}
+}
+/* §4.49 移动端差异化侧栏：<768px 隐藏 hideOnMobile 的 widget（默认 toc/calendar 隐藏）。
+   参照 orchid-blog「移动端独立组件列表 + md 断点显隐」机制，此处用单 DOM + 显隐位等价实现 */
+@media (max-width: 767px) {
+	.side-hide-m {
+		display: none !important;
+	}
+}
+/* §4.46 对齐参考站：内边距收窄至 16px、圆角 16px（scoped 覆盖，不动全局 --radius），
+   白卡贴边更舒展、视觉上更宽 */
+.side-card {
+	padding: 20px 16px;
+	border-radius: 16px;
+	min-width: 0;
+	max-width: 100%;
+}
+/* §4.46 对齐参考站 WidgetLayout 标题：text-lg font-bold + 主题色竖条 before:w-1 h-4 */
+.side-card h3 {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 16px;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	color: var(--ink);
+	margin-bottom: 12px;
+}
+.side-card h3::before {
+	content: "";
+	width: 4px;
+	height: 16px;
+	border-radius: 2px;
+	background: var(--accent);
+	flex: none;
+}
+.side-card p {
+	font-size: 14px;
+	color: var(--ink-2);
+}
+.cat-list {
+	display: grid;
+	gap: 8px;
+	font-size: 14px;
+}
+.cat-list a {
+	display: flex;
+	justify-content: space-between;
+	/* §4.46 对齐参考站条目加粗层级 */
+	font-weight: 600;
+	color: var(--ink-2);
+}
+.cat-list a:hover {
+	color: var(--accent-ink);
+}
+.cat-list .count {
+	color: var(--muted);
+	font-variant-numeric: tabular-nums;
+}
+/* 个人资料卡（§4.55）：对齐参考项目——全宽大头像 + hover 遮罩 + 居中名字/装饰条/简介 + 居中按钮组 */
+.profile-avatar-link {
+	display: block;
+	position: relative;
+	overflow: hidden;
+	border-radius: 12px;
+}
+.profile-avatar-link::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background: rgba(0, 0, 0, 0);
+	transition: background 0.2s;
+}
+.profile-avatar-link:hover::after {
+	background: rgba(0, 0, 0, 0.25);
+}
+.profile-avatar {
+	display: block;
+	width: 100%;
+	aspect-ratio: 1 / 1;
+	object-fit: cover;
+	border: 1px solid var(--border);
+	border-radius: 12px;
+}
+.profile-id {
+	display: grid;
+	gap: 7px;
+	justify-items: center;
+	margin-top: 14px;
+}
+.profile-name {
+	font-family: var(--font-display);
+	font-size: 20px;
+	font-weight: 700;
+	text-align: center;
+	color: var(--ink);
+}
+a.profile-name:hover {
+	color: var(--accent-deep);
+}
+html.dark a.profile-name:hover {
+	color: var(--accent);
+}
+.profile-bar {
+	width: 20px;
+	height: 4px;
+	border-radius: 2px;
+	background: var(--accent);
+}
+.profile-bio {
+	margin-top: 10px;
+	font-size: 13.5px;
+	line-height: 1.7;
+	text-align: center;
+	color: var(--muted);
+}
+.profile-links {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 8px;
+	margin-top: 14px;
+}
+.profile-links a {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	height: 40px;
+	padding: 0 12px;
+	border-radius: 10px;
+	background: var(--bg-soft);
+	font-size: 13px;
+	color: var(--ink-2);
+	transition:
+		color 0.15s,
+		background 0.15s;
+}
+.profile-links a:hover {
+	color: var(--accent-ink);
+	background: var(--accent-soft);
+}
+.profile-link-icon {
+	display: inline-flex;
+	width: 20px;
+	height: 20px;
+}
+.profile-link-icon svg {
+	width: 100%;
+	height: 100%;
+}
+.side-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+/* §4.48 标签卡「…更多」入口：虚线边框弱化与常规 chip 区分，点击进标签页 */
+.chip-more {
+	border-style: dashed;
+	color: var(--muted);
+}
+.side-friends {
+	display: grid;
+	gap: 9px;
+}
+/* 侧栏公告（M3b-b3）：content 支持 \n 换行展示 */
+.side-announcement {
+	white-space: pre-line;
+}
+.side-announcement-foot {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	margin-top: 12px;
+}
+.side-close {
+	width: 26px;
+	height: 26px;
+	flex: none;
+	border-radius: 8px;
+	border: 1px solid var(--border);
+	background: transparent;
+	color: var(--muted);
+	font-size: 12px;
+	line-height: 1;
+	cursor: pointer;
+	transition:
+		color 0.15s,
+		border-color 0.15s,
+		background 0.15s;
+}
+.side-close:hover {
+	color: var(--accent-ink);
+	border-color: var(--accent);
+	background: var(--accent-soft);
+}
+/* 侧栏广告位（M3b-b3）：关闭钮默认隐身，hover 卡片淡入 */
+.advertisement-widget {
+	position: relative;
+}
+.ad-close {
+	position: absolute;
+	top: 10px;
+	right: 10px;
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	border: 1px solid var(--border);
+	background: var(--surface);
+	color: var(--muted);
+	font-size: 11px;
+	line-height: 1;
+	cursor: pointer;
+	opacity: 0;
+	transition: opacity 0.2s;
+}
+.advertisement-widget:hover .ad-close,
+.ad-close:focus-visible {
+	opacity: 1;
+}
+.ad-close:hover {
+	color: var(--accent-ink);
+	border-color: var(--accent);
+}
+.ad-body {
+	display: grid;
+	gap: 10px;
+	justify-items: center;
+	text-align: center;
+}
+.ad-body img {
+	width: 100%;
+	height: auto;
+	border-radius: 10px;
+	border: 1px solid var(--border);
+}
+.side-friends a {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	font-size: 13.5px;
+	color: var(--ink-2);
+}
+.side-friends a:hover {
+	color: var(--accent-deep);
+}
+html.dark .side-friends a:hover {
+	color: var(--accent);
+}
+.side-friends img {
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	border: 1px solid var(--border);
+}
+.side-more {
+	display: inline-block;
+	margin-top: 12px;
+	font-size: 13px;
+}
+.site-info {
+	display: grid;
+	gap: 8px;
+	font-size: 14px;
+	color: var(--ink-2);
+}
+.site-info b {
+	font-weight: 600;
+	color: var(--ink);
+	font-variant-numeric: tabular-nums;
+}
+.site-info .row {
+	display: flex;
+	justify-content: space-between;
+}
+
+/* 日历 widget（月视图 + 活跃度热力图） */
+/* §4.45：宽度恒定——<qy-calendar> 无 class，选择器用标签名；
+   自定义元素默认 display:inline（宽度随内容 shrink-to-fit），文章标题 min-content
+   会沿 inline/flex 链向上撑宽卡片，导致侧栏宽度随列表有无文章/标题长短变动；
+   display:block + min-width:0 + max-width:100% 斩断传播，列表在固定宽度内截断 */
+qy-calendar {
+	--cal-cell: 13px;
+	display: block;
+	min-width: 0;
+	max-width: 100%;
+}
+.cal-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 10px;
+}
+/* §4.47 年月标签改为可点按钮：加粗加大 + 悬停/展开态，▾ 提示可开合年月选择器
+   §4.54 极简不是小家子气：日期与箭头控件整体放大一档，重置按钮移至日期 ▾ 之后 */
+.cal-month {
+	font-size: 17px;
+	font-weight: 700;
+	color: var(--ink);
+	font-variant-numeric: tabular-nums;
+	font-family: inherit;
+	background: transparent;
+	border: 0;
+	padding: 4px 12px;
+	border-radius: 8px;
+	cursor: pointer;
+	user-select: none;
+	transition:
+		background 0.15s ease,
+		color 0.15s ease;
+}
+.cal-month::after {
+	content: "▾";
+	display: inline-block;
+	font-size: 12px;
+	margin-left: 6px;
+	color: var(--muted);
+	transition: transform 0.15s ease;
+}
+.cal-month:hover {
+	background: var(--bg-soft);
+}
+.cal-month.open {
+	color: var(--accent);
+	background: var(--accent-soft);
+}
+.cal-month.open::after {
+	transform: rotate(180deg);
+}
+.cal-head-r {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+/* §4.54 日期 + 重置按钮成组居中（重置紧跟日期 ▾ 之后） */
+.cal-head-c {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+/* §4.47 翻月/回当月/年步进按钮统一外观（§4.54 放大一档）：
+   结构简化后由「.cal-nav button 后代选择器」改为类直配（.cal-nav/.cal-home/.cal-py） */
+.cal-nav,
+.cal-home,
+.cal-py {
+	width: 28px;
+	height: 28px;
+	display: grid;
+	place-items: center;
+	border: 1px solid var(--border);
+	border-radius: 8px;
+	background: transparent;
+	color: var(--muted);
+	font-size: 16px;
+	line-height: 1;
+	font-family: inherit;
+	cursor: pointer;
+	transition:
+		color 0.2s ease,
+		border-color 0.2s ease;
+}
+.cal-nav:hover:not(:disabled),
+.cal-home:hover:not(:disabled),
+.cal-py:hover:not(:disabled) {
+	color: var(--accent);
+	border-color: var(--accent);
+}
+.cal-nav:disabled,
+.cal-home:disabled,
+.cal-py:disabled {
+	opacity: 0.35;
+	cursor: default;
+}
+/* §4.47 回到本月按钮：仅非当月渲染，主题色与翻月箭头区分 */
+.cal-home {
+	color: var(--accent);
+	border-color: currentColor;
+}
+/* §4.47 年月选择器：年步进行 + 4 列月网格（未来月置灰、当前浏览月高亮） */
+.cal-picker {
+	border: 1px solid var(--border);
+	border-radius: 10px;
+	background: var(--bg-soft);
+	padding: 10px;
+	margin-bottom: 10px;
+}
+.cal-picker-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 8px;
+}
+.cal-py-label {
+	font-size: 14px;
+	font-weight: 700;
+	color: var(--ink);
+	font-variant-numeric: tabular-nums;
+}
+.cal-picker-months {
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	gap: 4px;
+}
+.cal-pm {
+	font-size: 11.5px;
+	padding: 5px 0;
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	background: transparent;
+	color: var(--muted);
+	font-family: inherit;
+	font-variant-numeric: tabular-nums;
+	cursor: pointer;
+	transition:
+		color 0.15s ease,
+		border-color 0.15s ease,
+		background 0.15s ease;
+}
+.cal-pm:hover:not(:disabled) {
+	color: var(--accent);
+	border-color: var(--accent);
+}
+.cal-pm.on {
+	color: var(--accent);
+	border-color: var(--accent);
+	background: var(--accent-soft);
+	font-weight: 600;
+}
+.cal-pm:disabled {
+	opacity: 0.35;
+	cursor: default;
+}
+.cal-grid {
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	gap: 2px;
+	text-align: center;
+}
+.cal-week {
+	font-size: 10.5px;
+	color: var(--muted);
+	padding-bottom: 4px;
+}
+.cal-day {
+	position: relative;
+	aspect-ratio: 1;
+	display: grid;
+	place-items: center;
+	font-size: 11px;
+	color: var(--ink-2);
+	border-radius: 6px;
+	font-variant-numeric: tabular-nums;
+}
+.cal-day.dim {
+	color: transparent;
+	pointer-events: none;
+}
+.cal-day.has-post {
+	background: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.16);
+	color: var(--accent-deep);
+	font-weight: 600;
+}
+html.dark .cal-day.has-post {
+	color: var(--accent);
+}
+.cal-day.today {
+	outline: 1.5px solid var(--accent);
+	outline-offset: -1.5px;
+}
+.cal-heat {
+	/* §4.43：去「活跃度」标题；§4.44 还原 orchid-blog 原版两行结构：月份标签行 + 12×4 格子网格 */
+	margin-top: 12px;
+}
+/* 月份标签行（§4.43 数字展示，§4.44 独立一行 grid 12 列，同原版） */
+.cal-heat-labels {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+	gap: 2px;
+	margin-bottom: 4px;
+}
+.cal-heat-label {
+	font-size: 9px;
+	font-weight: 400;
+	line-height: 1;
+	text-align: center;
+	color: var(--muted);
+}
+/* 48 个正方形小格子平铺 12×4（§4.44 还原原版：格子 width:85% + aspect-ratio:1 自持正方形，
+   行高由内容撑起；仅 row-gap 无 column-gap，列间隙由 85% 宽度留出，同原版）；
+   教训：§4.43 曾把 aspect-ratio 放在 <i> 格子上（inline 不生效）且列级外包 div 截断
+   stretch 链，导致格子高 0、热力图塌成 12px——grid item 会被 block 化，
+   此处显式 display:block 确保 aspect-ratio 生效 */
+.cal-heat-grid {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+	grid-template-rows: repeat(4, 1fr);
+	row-gap: 2px;
+}
+.cal-heat-cell {
+	display: block;
+	width: 85%;
+	aspect-ratio: 1;
+	margin: auto;
+	border-radius: 2px;
+	cursor: pointer;
+	transition: box-shadow 0.15s ease;
+	background: hsl(
+		var(--accent-h) var(--accent-s) var(--accent-l) /
+		max(var(--o, 0), 0.08)
+	);
+}
+/* 未来月份格子（§4.44）：无 role，不可点击跳月 */
+.cal-heat-cell:not([role="button"]) {
+	cursor: default;
+}
+.cal-heat-cell[role="button"]:hover {
+	box-shadow: 0 0 1px 1.5px hsl(var(--accent-h) var(--accent-s) var(--accent-l));
+}
+.cal-heat-cell:focus-visible {
+	outline: 1.5px solid var(--accent);
+	outline-offset: 1px;
+	border-radius: 2px;
+}
+
+/* 热力图下方文章列表（§4.40，§4.43 移至热力图下）：月视图 → 热力图 → 列表；
+   默认当月全部，点日期过滤当日；按时间倒序，左标题右日期，超宽标题省略号截断，过长纵向滚动 */
+/* §4.45：链条加 min-width:0，文章列表在 widget 固定宽度内截断 */
+.cal-list {
+	margin-top: 10px;
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	min-width: 0;
+}
+.cal-list-items {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	max-height: 176px;
+	overflow-y: auto;
+	min-width: 0;
+}
+.cal-post {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 8px;
+	font-size: 13px;
+	line-height: 1.5;
+	color: var(--ink-2);
+	padding: 4px 8px;
+	border-radius: var(--radius-sm);
+	min-width: 0;
+}
+/* 左侧标题：flex:1 1 0 + min-width:0 允许收缩，超宽省略号截断（§4.43/§4.45） */
+.cal-post-title {
+	flex: 1 1 0;
+	min-width: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+/* 右侧发布日期：不压缩、弱化色（§4.43） */
+.cal-post-date {
+	flex-shrink: 0;
+	font-size: 12px;
+	color: var(--muted);
+}
+.cal-post:hover {
+	color: var(--accent-ink);
+	background: var(--bg-soft);
+}
+/* 有文章的日期可点选（§4.40）：选中态实底强调色，与 today 描边叠加可区分 */
+.cal-day.has-post {
+	cursor: pointer;
+}
+.cal-day.sel {
+	background: var(--accent);
+	color: #fff;
+	font-weight: 600;
+}
+
+/* 文章页侧栏目录 */
+.side-toc {
+	display: grid;
+	gap: 2px;
+}
+.side-toc a {
+	font-size: 13px;
+	color: var(--ink-2);
+	text-decoration: none;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	padding: 3px 6px;
+	border-radius: 6px;
+	transition:
+		color 0.2s ease,
+		background 0.2s ease;
+}
+.side-toc a:hover {
+	color: var(--accent-deep);
+	background: var(--accent-soft);
+}
+html.dark .side-toc a:hover {
+	color: var(--accent);
+}
+.side-toc .toc-depth-3 {
+	padding-left: 18px;
+}
+.side-toc .toc-depth-4 {
+	padding-left: 30px;
+}
+
+/* pagination（§4.53 双模式，§4.54 去胶囊改方块、统一宽度多列页码）：
+   PC 页码条 .pg-nums，移动端上下页 .pg-adj */
+.pagination {
+	margin-top: 32px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 14px;
+	font-size: 14px;
+	color: var(--muted);
+}
+.page-item {
+	min-width: 38px;
+	padding: 6px 10px;
+	box-sizing: border-box;
+	border: 1px solid var(--border);
+	border-radius: 6px;
+	color: var(--ink-2);
+	background: var(--surface);
+	text-align: center;
+	/* 显式行高（§4.55）：箭头与数字页码完全同尺寸 */
+	line-height: 1.5;
+}
+a.page-item:hover {
+	border-color: var(--accent);
+	color: var(--accent-ink);
+}
+.page-item.disabled {
+	color: var(--muted);
+	opacity: 0.55;
+	cursor: not-allowed;
+}
+.pg-nums {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex-wrap: wrap;
+	justify-content: center;
+}
+.page-item.current {
+	border-color: var(--accent);
+	background: var(--accent-soft);
+	color: var(--accent-ink);
+	font-weight: 600;
+}
+.pg-gap {
+	color: var(--muted);
+	padding: 0 2px;
+}
+.pg-adj {
+	display: none;
+	align-items: center;
+	gap: 14px;
+}
+@media (max-width: 767px) {
+	.pg-nums {
+		display: none;
+	}
+	.pg-adj {
+		display: flex;
+	}
+}
+
+/* ---------- 6. 文章页 ---------- */
+.post-header {
+	margin: 0 0 28px;
+}
+.post-header .chip {
+	margin-bottom: 16px;
+}
+.post-title-lg {
+	font-family: var(--font-display);
+	font-size: clamp(26px, 4vw, 36px);
+	font-weight: 700;
+	line-height: 1.4;
+	letter-spacing: 0.02em;
+}
+.post-header .post-meta {
+	margin-top: 16px;
+}
+/* meta 区图标化（§4.14，参考 orchid-blog PostMeta）：图标 + 文本同行 */
+.post-meta .meta-item {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+}
+.post-meta .meta-item svg {
+	width: 14px;
+	height: 14px;
+	flex-shrink: 0;
+	opacity: 0.85;
+}
+/* 分类/标签内联链接（§4.22，对齐 orchid-blog）：文字链接 + 「/」分隔 */
+.post-meta .meta-item a {
+	color: inherit;
+	text-decoration: none;
+	white-space: nowrap;
+	transition: color 0.15s;
+}
+.post-meta .meta-item a:hover {
+	color: var(--accent-ink);
+}
+.post-meta .tag-sep {
+	color: var(--muted);
+	opacity: 0.6;
+}
+/* 标签较多时组内换行（行间收紧），整组仍作为一项参与 meta 行换行 */
+.post-meta .meta-tags-item {
+	flex-wrap: wrap;
+	row-gap: 2px;
+}
+.article-cover {
+	position: relative;
+	margin: 0 0 36px;
+	border-radius: var(--radius);
+	overflow: hidden;
+	border: 1px solid var(--border);
+	box-shadow: var(--shadow-sm);
+	cursor: zoom-in;
+}
+.article-cover img {
+	width: 100%;
+	aspect-ratio: 16 / 9;
+	object-fit: cover;
+}
+.article-cover figcaption {
+	padding: 10px 16px;
+	font-size: 13px;
+	color: var(--muted);
+	text-align: center;
+	background: var(--surface);
+}
+
+/* 左右两栏：≥768px 正文列 + 侧栏列（对齐参考模板 md 断点），≤767px 单列堆叠 */
+.post-layout {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	gap: 36px;
+	align-items: start;
+	max-width: 900px;
+	margin: 0 auto;
+}
+.post-main {
+	/* min-width:0 防 nowrap 标题/代码撑破网格轨道 */
+	min-width: 0;
+}
+@media (min-width: 768px) {
+	.post-layout {
+		grid-template-columns: minmax(0, 1fr) 280px;
+		/* §4.46 侧栏统一 280px（与首页一致），max-width 同步 +60px 保持正文阅读行宽不变（§4.32 迭代） */
+		max-width: 1180px;
+	}
+}
+.prose {
+	font-size: 16.5px;
+	color: var(--ink);
+	/* 长英文词/URL 换行（§4.13）：防撑破窄屏容器 */
+	overflow-wrap: break-word;
+}
+.prose > * + * {
+	margin-top: 1em;
+}
+.prose h2 {
+	font-family: var(--font-display);
+	font-size: 24px;
+	font-weight: 700;
+	margin-top: 2em;
+	padding-bottom: 0.4em;
+	border-bottom: 1px solid var(--border);
+	scroll-margin-top: calc(var(--header-h) + 20px);
+}
+.prose h3 {
+	font-family: var(--font-display);
+	font-size: 19px;
+	font-weight: 700;
+	margin-top: 1.8em;
+	scroll-margin-top: calc(var(--header-h) + 20px);
+}
+.prose h4 {
+	font-family: var(--font-display);
+	font-size: 16.5px;
+	font-weight: 700;
+	margin-top: 1.6em;
+	scroll-margin-top: calc(var(--header-h) + 20px);
+}
+.prose blockquote {
+	padding: 12px 20px;
+	border-left: 3px solid var(--accent);
+	background: var(--accent-soft);
+	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+	color: var(--accent-ink);
+}
+html.dark .prose blockquote {
+	color: var(--ink-2);
+}
+.prose ul,
+.prose ol {
+	padding-left: 1.6em;
+}
+.prose li + li {
+	margin-top: 0.35em;
+}
+.prose li::marker {
+	color: var(--accent);
+}
+.prose code:not(pre code) {
+	font-family: var(--font-mono);
+	font-size: 0.88em;
+	padding: 2px 7px;
+	border-radius: 6px;
+	background: var(--bg-soft);
+	border: 1px solid var(--border);
+	color: var(--accent-ink);
+}
+/* 代码块（§4.61 起由 Expressive Code 接管）：EC 自带完整样式（useStyleReset
+   all:revert 防站点样式干扰）与复制/折叠/行号交互，双主题选择器为
+   html.dark / html:not(.dark)，随 codeTheme 配置内联进首个代码块输出 */
+/* 折叠插件样式修复（§4.62）：EC 内联插件 baseStyles 时统一加 .expressive-code
+   祖先前缀，而 expressive-code-collapsible 把折叠按钮/渐隐层/内容包装渲染在
+   figure.expressive-code 之外（.ec-collapse 直下），前缀选择器永不命中——按钮失去
+   absolute 定位与命中区域，真实点击无法展开。此处按插件原语义补不带前缀的等价规则；
+   渐隐底色与 codeTheme 双主题（github-light/github-dark）默认代码底色一致，换色需同步 */
+.ec-collapse {
+	position: relative;
+	--ec-collapse-bg-color: #fff;
+	--ec-collapse-accent-color: var(--accent);
+}
+html.dark .ec-collapse {
+	--ec-collapse-bg-color: #24292e;
+}
+.ec-collapse__content {
+	position: relative;
+}
+.ec-collapse.ec-collapse--collapsed .ec-collapse__content {
+	max-height: var(--ec-collapse-preview-height, 280px);
+	overflow: hidden;
+}
+.ec-collapse.ec-collapse--expanded .ec-collapse__content {
+	max-height: none;
+}
+.ec-collapse__gradient {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 80px;
+	background: linear-gradient(
+		to bottom,
+		transparent 0%,
+		var(--ec-collapse-bg-color) 100%
+	);
+	pointer-events: none;
+	opacity: 1;
+	transition: opacity 0.3s ease;
+	z-index: 10;
+}
+.ec-collapse.ec-collapse--expanded .ec-collapse__gradient {
+	opacity: 0;
+	pointer-events: none;
+}
+.ec-collapse__toggle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	margin: 0 auto;
+	padding: 6px 16px;
+	background-color: rgba(0, 0, 0, 0.05);
+	border: 1px solid rgba(0, 0, 0, 0.15);
+	border-radius: 20px;
+	color: var(--ec-collapse-accent-color);
+	font-size: 0.85rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition:
+		background-color 0.2s ease,
+		border-color 0.2s ease;
+}
+.ec-collapse.ec-collapse--collapsed .ec-collapse__toggle {
+	position: absolute;
+	bottom: 12px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 20;
+	margin: 0;
+}
+.ec-collapse.ec-collapse--expanded .ec-collapse__toggle {
+	position: relative;
+	margin: 12px auto;
+}
+.ec-collapse__toggle:hover {
+	background-color: rgba(0, 0, 0, 0.08);
+	border-color: rgba(0, 0, 0, 0.25);
+}
+html.dark .ec-collapse__toggle {
+	background-color: rgba(255, 255, 255, 0.1);
+	border-color: rgba(255, 255, 255, 0.2);
+}
+html.dark .ec-collapse__toggle:hover {
+	background-color: rgba(255, 255, 255, 0.15);
+	border-color: rgba(255, 255, 255, 0.3);
+}
+.ec-collapse__toggle:focus-visible {
+	outline: 2px solid var(--ec-collapse-accent-color);
+	outline-offset: 2px;
+}
+.ec-collapse__icon {
+	transition: transform 0.3s ease;
+}
+.ec-collapse.ec-collapse--expanded .ec-collapse__icon {
+	transform: rotate(180deg);
+}
+.ec-collapse__text-collapse {
+	display: none;
+}
+.ec-collapse.ec-collapse--expanded .ec-collapse__text-expand {
+	display: none;
+}
+.ec-collapse.ec-collapse--expanded .ec-collapse__text-collapse {
+	display: inline;
+}
+@media (prefers-reduced-motion: reduce) {
+	.ec-collapse__gradient,
+	.ec-collapse__toggle,
+	.ec-collapse__icon {
+		transition: none;
+	}
+}
+/* 宽表滚动容器化（§4.13）：display:block + overflow-x:auto，多列宽表窄屏内滚不撑破页面 */
+.prose table {
+	display: block;
+	width: max-content;
+	max-width: 100%;
+	overflow-x: auto;
+	border-collapse: collapse;
+	font-size: 14.5px;
+}
+.prose th,
+.prose td {
+	padding: 9px 14px;
+	text-align: left;
+	border-bottom: 1px solid var(--border);
+}
+.prose th {
+	font-weight: 600;
+	color: var(--muted);
+	font-size: 13px;
+	letter-spacing: 0.04em;
+	background: var(--bg-soft);
+}
+.prose figure {
+	margin: 0;
+	border-radius: var(--radius-sm);
+	overflow: hidden;
+	border: 1px solid var(--border);
+}
+.prose figure img {
+	width: 100%;
+}
+.prose figcaption {
+	padding: 8px 14px;
+	font-size: 13px;
+	color: var(--muted);
+	text-align: center;
+	background: var(--surface);
+}
+.prose hr {
+	border: none;
+	border-top: 1px dashed var(--border-2);
+	margin: 2em 0;
+}
+.prose a {
+	border-bottom: 1px solid var(--accent);
+}
+/* 标题锚点（原型无，hover 显形） */
+.prose .h-anchor {
+	margin-left: 8px;
+	opacity: 0;
+	font-weight: 400;
+	border-bottom: none;
+	transition: opacity 0.15s;
+}
+.prose h2:hover .h-anchor,
+.prose h3:hover .h-anchor,
+.prose h4:hover .h-anchor {
+	opacity: 0.55;
+}
+.callout {
+	display: flex;
+	gap: 12px;
+	padding: 14px 18px;
+	border-radius: var(--radius-sm);
+	font-size: 15px;
+	line-height: 1.7;
+	border: 1px solid var(--border);
+	background: var(--bg-soft);
+}
+.callout .co-icon {
+	flex: none;
+	width: 20px;
+	height: 20px;
+	margin-top: 3px;
+}
+.callout.info {
+	border-color: hsl(var(--accent-h) 30% 60% / 0.5);
+	background: var(--accent-soft);
+}
+.callout.tip {
+	border-color: hsl(var(--accent-h) 30% 60% / 0.5);
+	background: var(--accent-soft);
+}
+.callout.important {
+	border-color: hsl(262 60% 60% / 0.45);
+	background: hsl(262 55% 94%);
+}
+html.dark .callout.important {
+	background: hsl(262 30% 18%);
+}
+.callout.warn {
+	border-color: hsl(38 60% 55% / 0.45);
+	background: hsl(38 55% 92%);
+}
+html.dark .callout.warn {
+	background: hsl(38 30% 16%);
+}
+.callout.danger {
+	border-color: hsl(2 60% 55% / 0.45);
+	background: hsl(2 55% 95%);
+}
+html.dark .callout.danger {
+	background: hsl(2 30% 16%);
+}
+.callout.success {
+	border-color: hsl(142 55% 45% / 0.45);
+	background: hsl(142 50% 93%);
+}
+html.dark .callout.success {
+	background: hsl(142 30% 15%);
+}
+.callout.quote {
+	border-color: var(--border-2);
+	background: var(--bg-soft);
+}
+.callout b {
+	display: block;
+	margin-bottom: 2px;
+}
+.callout p {
+	color: var(--ink-2);
+}
+
+/* toc */
+.toc {
+	position: sticky;
+	top: calc(var(--header-h) + 24px);
+	display: none;
+	font-size: 13.5px;
+}
+@media (min-width: 768px) {
+	.toc {
+		display: block;
+	}
+}
+.toc-title {
+	font-size: 12px;
+	letter-spacing: 0.12em;
+	color: var(--muted);
+	margin-bottom: 10px;
+}
+.toc a {
+	display: block;
+	padding: 5px 0 5px 14px;
+	color: var(--ink-2);
+	border-left: 2px solid var(--border);
+	line-height: 1.5;
+	transition:
+		color 0.15s,
+		border-color 0.15s;
+}
+.toc a:hover {
+	color: var(--ink);
+}
+.toc a.is-active {
+	color: var(--accent-ink);
+	border-left-color: var(--accent);
+	font-weight: 500;
+}
+
+/* post footer */
+/* outdated-card（§4.11 文章过时提醒）：琥珀色警示调，与卡片设计语言一致 */
+.outdated-card {
+	margin-top: 36px;
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	padding: 14px 18px;
+	font-size: 13.5px;
+	line-height: 1.7;
+	color: hsl(30 22% 40%);
+	border: 1px solid hsl(38 55% 78%);
+	border-radius: var(--radius-sm);
+	background: hsl(40 60% 95%);
+}
+.outdated-icon {
+	flex: none;
+	display: grid;
+	place-items: center;
+	width: 30px;
+	height: 30px;
+	border-radius: var(--radius-sm);
+	color: hsl(28 60% 42%);
+	background: hsl(38 70% 87%);
+}
+.outdated-line {
+	color: var(--muted);
+}
+.outdated-line strong,
+.outdated-days {
+	color: inherit;
+}
+.outdated-warning {
+	margin-top: 4px;
+	font-weight: 600;
+	color: hsl(28 55% 44%);
+}
+html.dark .outdated-card {
+	color: hsl(38 22% 74%);
+	border-color: hsl(38 25% 28%);
+	background: hsl(38 22% 15%);
+}
+html.dark .outdated-icon {
+	color: hsl(38 65% 72%);
+	background: hsl(38 25% 22%);
+}
+html.dark .outdated-warning {
+	color: hsl(38 65% 66%);
+}
+.license {
+	margin-top: 36px;
+	padding: 14px 18px;
+	font-size: 13.5px;
+	color: var(--muted);
+	border: 1px dashed var(--border-2);
+	border-radius: var(--radius-sm);
+	background: var(--bg-soft);
+}
+.post-nav {
+	margin-top: 24px;
+	display: grid;
+	gap: 12px;
+	grid-template-columns: 1fr 1fr;
+}
+.post-nav a,
+.post-nav .pn-disabled {
+	display: block;
+	padding: 14px 18px;
+	border-radius: var(--radius-sm);
+	border: 1px solid var(--border);
+	background: var(--surface);
+}
+.post-nav a:hover {
+	border-color: var(--accent);
+}
+.post-nav .pn-label {
+	font-size: 12px;
+	color: var(--muted);
+	letter-spacing: 0.1em;
+}
+.post-nav .pn-title {
+	margin-top: 4px;
+	font-weight: 600;
+	font-size: 14.5px;
+	color: var(--ink);
+}
+.post-nav a:hover .pn-title {
+	color: var(--accent-ink);
+}
+.post-nav .next {
+	text-align: right;
+}
+.post-nav .pn-disabled {
+	opacity: 0.55;
+}
+
+/* comments（M3b Artalk 启用） */
+.comments {
+	margin-top: 44px;
+}
+.comments-list {
+	display: grid;
+	gap: 18px;
+}
+.comment {
+	display: flex;
+	gap: 14px;
+	padding: 16px 18px;
+}
+.comment-avatar {
+	flex: none;
+	width: 42px;
+	height: 42px;
+	border-radius: 50%;
+	overflow: hidden;
+	border: 1px solid var(--border);
+}
+.comment-avatar img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.comment-main {
+	flex: 1;
+	min-width: 0;
+}
+.comment-head {
+	display: flex;
+	align-items: baseline;
+	gap: 10px;
+}
+.comment-author {
+	font-weight: 600;
+	font-size: 14.5px;
+}
+.comment-author.owner {
+	color: var(--accent-ink);
+}
+.comment-time {
+	font-size: 12.5px;
+	color: var(--muted);
+}
+.comment-content {
+	margin-top: 4px;
+	font-size: 15px;
+	color: var(--ink-2);
+	overflow-wrap: break-word;
+}
+.comment-reply {
+	margin-top: 14px;
+	padding-left: 14px;
+	border-left: 2px solid var(--border);
+	display: grid;
+	gap: 12px;
+}
+.comment-form {
+	margin-top: 24px;
+	padding: 20px 22px;
+}
+.comment-form h3 {
+	font-size: 15px;
+	margin-bottom: 14px;
+	font-family: var(--font-display);
+}
+.form-grid {
+	display: grid;
+	gap: 12px;
+}
+.form-grid input,
+.form-grid textarea {
+	width: 100%;
+	padding: 10px 14px;
+	border-radius: var(--radius-sm);
+	border: 1px solid var(--border-2);
+	background: var(--bg);
+	color: var(--ink);
+	transition:
+		border-color 0.15s,
+		box-shadow 0.15s;
+	resize: vertical;
+}
+.form-grid input:focus,
+.form-grid textarea:focus {
+	outline: none;
+	border-color: var(--accent);
+	box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.form-grid .input-error {
+	border-color: #c0564f;
+	box-shadow: 0 0 0 3px hsl(2 45% 90%);
+}
+html.dark .form-grid .input-error {
+	box-shadow: 0 0 0 3px hsl(2 45% 25%);
+}
+.form-error {
+	font-size: 13px;
+	color: #c0564f;
+	min-height: 1.4em;
+}
+.form-ok {
+	font-size: 13px;
+	color: var(--accent-ink);
+	min-height: 1.4em;
+}
+
+/* ---------- 7. 归档 ---------- */
+.archive-head {
+	max-width: 760px;
+	margin-bottom: 32px;
+}
+.archive-head .page-title {
+	font-family: var(--font-display);
+	font-size: 30px;
+	font-weight: 700;
+}
+.archive-head .page-sub {
+	margin-top: 6px;
+	color: var(--muted);
+	font-size: 14.5px;
+}
+.timeline {
+	max-width: 760px;
+	margin: 0 auto;
+}
+.archive-year {
+	display: flex;
+	align-items: baseline;
+	gap: 12px;
+	margin: 28px 0 8px;
+	scroll-margin-top: calc(var(--header-h) + 20px);
+}
+.archive-year .y {
+	font-family: var(--font-display);
+	font-size: 24px;
+	font-weight: 700;
+}
+.archive-year .c {
+	font-size: 13px;
+	color: var(--muted);
+}
+.timeline-items {
+	margin-left: 7px;
+	border-left: 2px solid var(--border);
+	padding-left: 26px;
+	display: grid;
+	gap: 6px;
+}
+.timeline-item {
+	position: relative;
+	padding: 10px 0;
+}
+.timeline-item::before {
+	content: "";
+	position: absolute;
+	left: -33px;
+	top: 22px;
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background: var(--accent);
+	box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.timeline-item .t-date {
+	font-size: 13px;
+	color: var(--muted);
+	font-variant-numeric: tabular-nums;
+}
+.timeline-item .t-title {
+	display: inline-block;
+	margin-left: 10px;
+	font-weight: 600;
+	color: var(--ink);
+}
+.timeline-item a:hover .t-title {
+	color: var(--accent-deep);
+}
+html.dark .timeline-item a:hover .t-title {
+	color: var(--accent);
+}
+.timeline-item .t-meta {
+	margin-left: 10px;
+	font-size: 12.5px;
+	color: var(--muted);
+}
+
+/* 归档按年折叠（§4.30）：年份头为按钮时重置原生样式，fold 收起该年时间线 */
+button.archive-year {
+	background: none;
+	border: 0;
+	padding: 0;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+	text-align: left;
+}
+button.archive-year .year-caret {
+	width: 16px;
+	height: 16px;
+	align-self: center;
+	color: var(--muted);
+	transition: transform 0.15s;
+}
+.timeline.fold button.archive-year .year-caret {
+	transform: rotate(-90deg);
+}
+.timeline.fold .timeline-items {
+	display: none;
+}
+
+/* ---------- 7.1 专题（§4.31） ---------- */
+.series-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+	gap: 16px;
+	margin-bottom: 32px;
+}
+.series-card {
+	display: block;
+	padding: 20px 22px;
+}
+.series-card:hover {
+	border-color: var(--accent-soft);
+}
+.series-name {
+	margin: 0 0 8px;
+	font-size: 17px;
+	font-weight: 700;
+	color: var(--ink);
+}
+.series-card:hover .series-name {
+	color: var(--accent-deep);
+}
+.series-meta {
+	margin: 0;
+	display: flex;
+	gap: 8px;
+	font-size: 13px;
+	color: var(--muted);
+}
+.series-empty {
+	padding: 26px 30px;
+	color: var(--muted);
+	text-align: center;
+}
+.series-crumb a {
+	color: var(--accent);
+}
+.series-crumb a:hover {
+	text-decoration: underline;
+}
+.series-list {
+	list-style: none;
+	margin: 0 auto;
+	padding: 0;
+	max-width: 760px;
+	display: grid;
+	gap: 10px;
+}
+/* §4.75 专题分组：详情页组头（组内首条之前的小标题） */
+.series-group-title {
+	margin-top: 16px;
+	padding-left: 2px;
+	font-size: 13px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	color: var(--muted);
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+.series-group-title::before {
+	content: "";
+	width: 14px;
+	height: 3px;
+	border-radius: 2px;
+	background: var(--accent);
+}
+.series-group-title:first-child {
+	margin-top: 0;
+}
+.series-link {
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	padding: 14px 18px;
+}
+.series-idx {
+	flex: none;
+	width: 26px;
+	height: 26px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background: var(--accent-soft);
+	color: var(--accent-deep);
+	font-size: 13px;
+	font-weight: 700;
+	font-variant-numeric: tabular-nums;
+}
+.series-title {
+	flex: 1;
+	min-width: 0;
+	font-weight: 600;
+	color: var(--ink);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.series-link:hover .series-title {
+	color: var(--accent-deep);
+}
+.series-date {
+	flex: none;
+	font-size: 13px;
+	color: var(--muted);
+	font-variant-numeric: tabular-nums;
+}
+/* 文章页专题导航卡（§4.31）：目录超 6 项限高滚动 */
+.series-nav {
+	margin: 0 0 28px;
+	padding: 16px 20px;
+}
+.series-nav-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	flex-wrap: wrap;
+	margin-bottom: 10px;
+}
+.series-nav-title {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 15.5px;
+	font-weight: 700;
+	color: var(--ink);
+}
+.series-nav-title svg {
+	width: 16px;
+	height: 16px;
+	color: var(--accent);
+}
+.series-nav-progress {
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+	font-size: 13px;
+}
+.series-nav-progress a {
+	color: var(--accent);
+}
+.series-nav-progress a:hover {
+	text-decoration: underline;
+}
+.series-nav-count {
+	color: var(--muted);
+	font-variant-numeric: tabular-nums;
+}
+.series-nav-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	max-height: 280px;
+	overflow-y: auto;
+	display: grid;
+	gap: 2px;
+}
+/* §4.75 专题分组：文章页专题目录组头 */
+.series-nav-group {
+	margin-top: 8px;
+	padding-left: 2px;
+	font-size: 12px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	color: var(--muted);
+}
+.series-nav-group:first-child {
+	margin-top: 0;
+}
+.series-nav-item {
+	position: relative;
+	padding-left: 14px;
+}
+.series-nav-item::before {
+	content: "";
+	position: absolute;
+	left: 2px;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background: var(--border);
+}
+.series-nav-item.cur::before {
+	background: var(--accent);
+}
+.series-nav-row {
+	display: flex;
+	align-items: baseline;
+	gap: 8px;
+	padding: 4px 0;
+	font-size: 14px;
+	color: var(--ink-2);
+}
+a.series-nav-row:hover {
+	color: var(--accent-deep);
+}
+.series-nav-idx {
+	flex: none;
+	min-width: 18px;
+	text-align: right;
+	color: var(--muted);
+	font-size: 12.5px;
+	font-variant-numeric: tabular-nums;
+}
+.series-nav-label {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.series-nav-item.cur .series-nav-row {
+	font-weight: 600;
+	color: var(--accent-deep);
+}
+html.dark .series-nav-item.cur .series-nav-row {
+	color: var(--accent);
+}
+@media (max-width: 560px) {
+	.series-date,
+	.series-nav-count {
+		display: none;
+	}
+}
+
+/* ---------- 8. 标签页 ---------- */
+.tag-cloud {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 14px 18px;
+	align-items: baseline;
+	padding: 26px 30px;
+	margin-bottom: 32px;
+}
+.tag-s1 {
+	font-size: 15px;
+	color: var(--ink-2);
+}
+.tag-s3 {
+	font-size: 24px;
+}
+.tag-cloud a {
+	display: inline-block;
+	line-height: 1.5;
+	transition:
+		color 0.15s,
+		transform 0.15s;
+}
+.tag-cloud a:hover {
+	transform: translateY(-2px);
+}
+.tag-cloud .tag-count {
+	font-size: 0.7em;
+	color: var(--muted);
+	margin-left: 3px;
+	vertical-align: super;
+}
+.tag-list-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 16px;
+}
+.tag-list {
+	display: grid;
+	gap: 14px;
+	max-width: 760px;
+}
+.tag-empty {
+	padding: 40px 0;
+	text-align: center;
+	color: var(--muted);
+}
+
+/* ---------- 9. 画廊 / 友链（路由 M3b 接入） ---------- */
+.chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+	margin-bottom: 26px;
+}
+.gallery-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	gap: 20px;
+}
+.album-card {
+	overflow: hidden;
+	cursor: pointer;
+	transition:
+		box-shadow 0.2s,
+		transform 0.2s,
+		border-color 0.2s;
+}
+.album-card:hover {
+	box-shadow: var(--shadow-md);
+	transform: translateY(-3px);
+	border-color: var(--border-2);
+}
+.album-card.hidden {
+	display: none;
+}
+.album-cover {
+	position: relative;
+	aspect-ratio: 1;
+	overflow: hidden;
+}
+.album-cover img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	transition: transform 0.5s ease;
+}
+.album-card:hover .album-cover img {
+	transform: scale(1.04);
+}
+.album-cover .lock-badge {
+	position: absolute;
+	top: 12px;
+	right: 12px;
+	z-index: 2;
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	padding: 4px 12px;
+	border-radius: 999px;
+	font-size: 12px;
+	background: rgba(0, 0, 0, 0.55);
+	color: #fff;
+	-webkit-backdrop-filter: blur(6px);
+	backdrop-filter: blur(6px);
+}
+.album-cover .lock-badge svg {
+	width: 13px;
+	height: 13px;
+}
+.album-info {
+	padding: 14px 18px 16px;
+	display: flex;
+	align-items: baseline;
+	gap: 10px;
+}
+.album-name {
+	font-weight: 600;
+	font-family: var(--font-display);
+	font-size: 16.5px;
+}
+.album-count {
+	margin-left: auto;
+	font-size: 13px;
+	color: var(--muted);
+}
+.album-tags {
+	padding: 0 18px 16px;
+	margin-top: -6px;
+	display: flex;
+	gap: 6px;
+}
+.album-tags .chip {
+	font-size: 12px;
+	padding: 1px 10px;
+}
+.album-sub {
+	padding: 0 18px;
+	margin-top: -8px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	font-size: 12.5px;
+	color: var(--muted);
+}
+.album-cover-fallback {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--muted);
+	background: var(--bg-soft);
+}
+.album-cover-fallback svg {
+	width: 34px;
+	height: 34px;
+	opacity: 0.55;
+}
+
+/* 相册列表搜索（M3b-b8）：与 modal input 同一套视觉 */
+.gallery-search {
+	position: relative;
+	margin-bottom: 16px;
+}
+.gallery-search svg {
+	position: absolute;
+	left: 13px;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 16px;
+	height: 16px;
+	color: var(--muted);
+	pointer-events: none;
+}
+.gallery-search input {
+	width: 100%;
+	padding: 10px 14px 10px 38px;
+	border-radius: var(--radius-sm);
+	border: 1px solid var(--border-2);
+	background: var(--bg);
+	color: var(--ink);
+	font-size: 14px;
+	transition:
+		border-color 0.15s,
+		box-shadow 0.15s;
+}
+.gallery-search input:focus {
+	outline: none;
+	border-color: var(--accent);
+	box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.gallery-empty {
+	padding: 48px 0;
+	text-align: center;
+	color: var(--muted);
+}
+
+/* 相册详情页（M3b-b8）：封面横幅 + 瀑布流 */
+.gallery-banner {
+	position: relative;
+	overflow: hidden;
+	border-radius: var(--radius);
+	aspect-ratio: 3 / 1;
+	min-height: 200px;
+	max-height: 360px;
+	background: var(--bg-soft);
+}
+.gallery-banner > img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.gallery-banner::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(
+		to top,
+		rgba(0, 0, 0, 0.72),
+		rgba(0, 0, 0, 0.28) 45%,
+		rgba(0, 0, 0, 0.05)
+	);
+}
+.gallery-back {
+	position: absolute;
+	top: 16px;
+	left: 16px;
+	z-index: 2;
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 6px 14px;
+	border-radius: 999px;
+	font-size: 13px;
+	color: rgba(255, 255, 255, 0.92);
+	background: rgba(0, 0, 0, 0.32);
+	-webkit-backdrop-filter: blur(6px);
+	backdrop-filter: blur(6px);
+	transition: background-color 0.15s;
+}
+.gallery-back:hover {
+	background: rgba(0, 0, 0, 0.52);
+	color: #fff;
+}
+.gallery-back svg {
+	width: 14px;
+	height: 14px;
+}
+.gallery-banner-inner {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1;
+	padding: 22px 26px;
+	color: #fff;
+}
+.gallery-title {
+	font-family: var(--font-display);
+	font-size: 24px;
+	font-weight: 700;
+}
+.gallery-desc {
+	margin-top: 6px;
+	max-width: 640px;
+	font-size: 14px;
+	color: rgba(255, 255, 255, 0.78);
+}
+.gallery-meta {
+	margin-top: 10px;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 16px;
+	font-size: 13px;
+	color: rgba(255, 255, 255, 0.82);
+}
+.gallery-meta svg {
+	width: 14px;
+	height: 14px;
+	vertical-align: -2px;
+	margin-right: 3px;
+}
+.gallery-meta .gallery-meta-tags {
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+.gallery-meta .gallery-meta-tags span {
+	padding: 1px 10px;
+	border-radius: 999px;
+	font-size: 12px;
+	background: rgba(255, 255, 255, 0.2);
+	-webkit-backdrop-filter: blur(6px);
+	backdrop-filter: blur(6px);
+}
+/* 无封面降级：卡式头部 */
+.gallery-head-plain {
+	padding: 20px 24px;
+}
+.gallery-head-plain .gallery-title {
+	color: var(--ink);
+}
+/* 降级头部 meta 位于浅色卡面：覆盖横幅白色系配色 */
+.gallery-head-plain .gallery-meta {
+	color: var(--muted);
+}
+.gallery-head-plain .gallery-meta .gallery-meta-tags span {
+	background: var(--bg-soft);
+	color: var(--ink-2);
+	-webkit-backdrop-filter: none;
+	backdrop-filter: none;
+}
+/* 筛选容器 custom element：默认 inline，恢复块级 */
+gallery-filter {
+	display: block;
+}
+
+.gallery-masonry {
+	column-count: 2;
+	column-gap: 12px;
+}
+@media (min-width: 640px) {
+	.gallery-masonry {
+		column-width: var(--col-width, 240px);
+		column-count: auto;
+	}
+}
+.gallery-photo {
+	position: relative;
+	break-inside: avoid;
+	margin: 0 0 12px;
+	overflow: hidden;
+	border-radius: var(--radius-sm);
+	background: var(--bg-soft);
+	cursor: zoom-in;
+}
+.gallery-photo img {
+	display: block;
+	width: 100%;
+	height: auto;
+	transition: transform 0.35s ease;
+}
+.gallery-photo:hover img {
+	transform: scale(1.025);
+}
+
+/* 灯箱（§4.69）：样式由 photoswipe/photoswipe.css 提供（BaseLayout 引入） */
+/* 灯箱自定义 UI（§4.70/§4.71）：全屏/自动播放按钮与缩略图条（可开关、内容居中）。
+   自定义图标用 .qy-pswp-icn 独立类名，避开 .pswp__icn 的 fill 覆盖（图标走 stroke 描边） */
+.qy-pswp-icn {
+	position: absolute;
+	inset: 0;
+	margin: auto;
+	width: 24px;
+	height: 24px;
+	stroke: var(--pswp-icon-color, #fff);
+	fill: none;
+	stroke-width: 1.6;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	pointer-events: none;
+}
+.qy-icn-fill {
+	fill: var(--pswp-icon-color, #fff);
+	stroke: none;
+}
+.pswp__button--qy-fullscreen .qy-icn-fs-exit,
+.pswp__button--qy-slideshow .qy-icn-pause {
+	display: none;
+}
+.pswp__button--qy-slideshow.is-active .qy-icn-play {
+	display: none;
+}
+.pswp__button--qy-slideshow.is-active .qy-icn-pause {
+	display: block;
+}
+.pswp:fullscreen .pswp__button--qy-fullscreen .qy-icn-fs-enter,
+.pswp:-webkit-full-screen .pswp__button--qy-fullscreen .qy-icn-fs-enter {
+	display: none;
+}
+.pswp:fullscreen .pswp__button--qy-fullscreen .qy-icn-fs-exit,
+.pswp:-webkit-full-screen .pswp__button--qy-fullscreen .qy-icn-fs-exit {
+	display: block;
+}
+.pswp__qy-thumbs {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 10;
+	display: flex;
+	gap: 8px;
+	padding: 10px 12px;
+	overflow-x: auto;
+	background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
+	-webkit-overflow-scrolling: touch;
+	scrollbar-width: none;
+}
+.pswp__qy-thumbs::-webkit-scrollbar {
+	display: none;
+}
+.pswp__qy-thumb {
+	flex: 0 0 auto;
+	width: 64px;
+	height: 40px;
+	padding: 0;
+	border: 1px solid transparent;
+	border-radius: 4px;
+	overflow: hidden;
+	opacity: 0.5;
+	background: none;
+	cursor: pointer;
+}
+.pswp__qy-thumb img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.pswp__qy-thumb:hover {
+	opacity: 0.85;
+}
+.pswp__qy-thumb.is-active {
+	opacity: 1;
+	border-color: var(--pswp-icon-color, #fff);
+}
+/* §4.71：缩略图条内容居中——首尾缩略图 margin auto 撑开空隙；图多溢出时 auto 归零，
+   自然退化为左对齐横向滚动，不会裁切左侧（flex 对齐安全技巧） */
+.pswp__qy-thumbs > .pswp__qy-thumb:first-child {
+	margin-left: auto;
+}
+.pswp__qy-thumbs > .pswp__qy-thumb:last-child {
+	margin-right: auto;
+}
+/* §4.71：开关按钮收起缩略图条 */
+.pswp__qy-thumbs.is-hidden {
+	display: none;
+}
+@media (max-width: 639px) {
+	.pswp__qy-thumbs {
+		display: none;
+	}
+}
+
+/* modal（加密相册，M3b） */
+.modal {
+	position: fixed;
+	inset: 0;
+	z-index: 320;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(12, 14, 15, 0.55);
+	-webkit-backdrop-filter: blur(4px);
+	backdrop-filter: blur(4px);
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.2s;
+}
+.modal.open {
+	opacity: 1;
+	pointer-events: auto;
+}
+.modal-box {
+	width: min(360px, calc(100vw - 48px));
+	padding: 26px 26px 22px;
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow-md);
+}
+.modal-box h3 {
+	font-family: var(--font-display);
+	font-size: 18px;
+	margin-bottom: 6px;
+}
+.modal-box .modal-hint {
+	font-size: 13.5px;
+	color: var(--muted);
+	margin-bottom: 16px;
+}
+.modal-box input {
+	width: 100%;
+	padding: 10px 14px;
+	border-radius: var(--radius-sm);
+	border: 1px solid var(--border-2);
+	background: var(--bg);
+	color: var(--ink);
+}
+.modal-box input:focus {
+	outline: none;
+	border-color: var(--accent);
+	box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.modal-actions {
+	margin-top: 16px;
+	display: flex;
+	justify-content: flex-end;
+	gap: 10px;
+}
+.modal-error {
+	margin-top: 10px;
+	font-size: 13px;
+	color: #c0564f;
+	min-height: 1.3em;
+}
+.modal-box.shake {
+	animation: shake 0.4s;
+}
+@keyframes shake {
+	0%,
+	100% {
+		transform: translateX(0);
+	}
+	25% {
+		transform: translateX(-7px);
+	}
+	50% {
+		transform: translateX(6px);
+	}
+	75% {
+		transform: translateX(-4px);
+	}
+}
+
+/* ---------- 10. 友链 ---------- */
+.friend-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+	gap: 20px;
+}
+.friend-card {
+	display: flex;
+	gap: 16px;
+	align-items: center;
+	padding: 20px 22px;
+	color: var(--ink);
+	transition:
+		box-shadow 0.2s,
+		transform 0.2s,
+		border-color 0.2s;
+}
+.friend-card:hover {
+	box-shadow: var(--shadow-md);
+	transform: translateY(-2px);
+	border-color: var(--border-2);
+	color: var(--ink);
+}
+.friend-avatar {
+	flex: none;
+	width: 56px;
+	height: 56px;
+	border-radius: 50%;
+	overflow: hidden;
+	border: 1px solid var(--border);
+}
+.friend-avatar img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.friend-name {
+	font-weight: 700;
+	font-size: 16px;
+	font-family: var(--font-display);
+}
+.friend-card:hover .friend-name {
+	color: var(--accent-deep);
+}
+html.dark .friend-card:hover .friend-name {
+	color: var(--accent);
+}
+.friend-desc {
+	margin-top: 3px;
+	font-size: 13.5px;
+	color: var(--muted);
+	line-height: 1.6;
+}
+.friend-apply {
+	margin-top: 20px;
+	padding: 24px 26px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 18px;
+	flex-wrap: wrap;
+}
+.friend-apply .fa-title {
+	font-family: var(--font-display);
+	font-weight: 700;
+	font-size: 17px;
+}
+.friend-apply .fa-desc {
+	margin-top: 4px;
+	font-size: 14px;
+	color: var(--muted);
+}
+.friend-tags {
+	margin-top: 7px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+}
+.friend-tags .chip {
+	font-size: 11px;
+	padding: 1px 9px;
+}
+
+/* ---------- 10.1 字头像兜底（友链/打赏名单无图时） ---------- */
+.avatar-fallback {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--accent-soft);
+	color: var(--accent-ink);
+	font-weight: 700;
+	user-select: none;
+}
+.friend-avatar .avatar-fallback {
+	width: 100%;
+	height: 100%;
+	font-size: 20px;
+	font-family: var(--font-display);
+}
+.side-friends .avatar-fallback {
+	width: 24px;
+	height: 24px;
+	font-size: 12px;
+	border-radius: 50%;
+	border: 1px solid var(--border);
+	flex: none;
+}
+.sponsor-item-avatar.avatar-fallback {
+	border-radius: 50%;
+	font-size: 14px;
+}
+
+/* ---------- 10.2 独立页（关于/留言板）正文卡 ---------- */
+.page-card {
+	margin-top: 26px;
+	padding: 26px 30px;
+}
+.page-card .prose > :first-child,
+.prose.page-card > :first-child {
+	margin-top: 0;
+}
+.comment-placeholder {
+	text-align: center;
+	color: var(--muted);
+	font-size: 14px;
+}
+.comment-placeholder p {
+	margin: 8px 0;
+}
+
+/* ---------- 10.3 打赏页 ---------- */
+.sponsor-usage {
+	margin-top: 26px;
+	padding: 14px 18px;
+	font-size: 14px;
+	color: var(--ink-2);
+	line-height: 1.7;
+	background: var(--accent-soft);
+	border: 1px solid hsl(var(--accent-h) 30% 60% / 0.45);
+}
+.sponsor-grid {
+	margin-top: 26px;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	gap: 20px;
+}
+.sponsor-method {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+	padding: 26px 22px;
+	text-align: center;
+}
+.sponsor-method .sm-name {
+	font-family: var(--font-display);
+	font-weight: 700;
+	font-size: 17px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+.sponsor-method .sm-icon {
+	font-size: 20px;
+}
+.sponsor-method .sm-desc {
+	margin: 0;
+	font-size: 13.5px;
+	color: var(--muted);
+}
+.sponsor-qr {
+	width: 180px;
+	height: 180px;
+	padding: 12px;
+	background: #fff;
+	border: 1px solid var(--border);
+	border-radius: 12px;
+	object-fit: contain;
+}
+.sponsor-qr-empty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--muted);
+	font-size: 13px;
+}
+.sponsor-method .sm-link {
+	margin-top: auto;
+}
+.sponsor-list-title {
+	font-family: var(--font-display);
+	font-size: 17px;
+	font-weight: 700;
+	margin: 0 0 14px;
+}
+.sponsor-list-title .sl-count {
+	margin-left: 8px;
+	font-size: 12px;
+	color: var(--muted);
+	font-variant-numeric: tabular-nums;
+	font-weight: 400;
+}
+.sponsor-list {
+	display: grid;
+	gap: 10px;
+}
+.sponsor-item {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 14px;
+	border: 1px solid var(--border);
+	border-radius: 14px;
+}
+.sponsor-item-avatar {
+	flex: none;
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	object-fit: cover;
+	border: 1px solid var(--border);
+}
+.sponsor-item-name {
+	font-size: 14px;
+	font-weight: 600;
+	display: flex;
+	align-items: baseline;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+.sponsor-item-name .sl-amount {
+	color: var(--accent-ink);
+	font-size: 13px;
+}
+.sponsor-item-date {
+	font-size: 12.5px;
+	color: var(--muted);
+}
+
+/* ---------- 11. Footer ---------- */
+.site-footer {
+	border-top: 1px solid var(--border);
+	background: var(--bg-soft);
+}
+.footer-inner {
+	padding: 36px 24px 40px;
+	text-align: center;
+}
+/* §4.57 行距统一收口：任意行（含自定义行）相邻间距恒定，customHtml 缺省时无多余上边距 */
+.footer-inner > * + * {
+	margin-top: 6px;
+}
+.footer-line {
+	font-size: 14px;
+	color: var(--ink-2);
+}
+/* §4.57 页脚链接（RSS/Sitemap/Powered by/自定义行）统一 accent 风格，hover 才出下划线 */
+.footer-line a,
+.footer-sub a,
+.footer-custom a {
+	color: var(--accent);
+	text-decoration: none;
+}
+.footer-line a:hover,
+.footer-sub a:hover,
+.footer-custom a:hover {
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+.footer-sep {
+	margin: 0 6px;
+	color: var(--muted);
+}
+.footer-sub {
+	font-size: 12.5px;
+	color: var(--muted);
+}
+/* §4.57 自定义行（备案号/统计等多段内容）：flex 换行居中，与相邻行同字号同色 */
+.footer-custom {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 2px 16px;
+	font-size: 12.5px;
+	color: var(--muted);
+}
+
+/* ---------- 12. 搜索浮层（M3b Pagefind 启用） ---------- */
+.search-overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 250;
+	background: rgba(12, 14, 15, 0.45);
+	-webkit-backdrop-filter: blur(6px);
+	backdrop-filter: blur(6px);
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+	padding: 12vh 20px 0;
+}
+.search-overlay[hidden] {
+	display: none !important;
+}
+.search-panel {
+	width: min(560px, 100%);
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow-md);
+	overflow: hidden;
+}
+.search-box {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 14px 16px;
+	border-bottom: 1px solid var(--border);
+}
+.search-box > svg {
+	flex: none;
+	width: 18px;
+	height: 18px;
+	color: var(--muted);
+}
+.search-box input {
+	flex: 1;
+	border: none;
+	background: transparent;
+	outline: none;
+	font-size: 16px;
+	color: var(--ink);
+}
+.search-box input::placeholder {
+	color: var(--muted);
+}
+.search-results {
+	max-height: 320px;
+	overflow-y: auto;
+	padding: 8px;
+}
+.search-item {
+	display: block;
+	width: 100%;
+	text-align: left;
+	padding: 10px 14px;
+	border-radius: var(--radius-sm);
+}
+.search-item .si-title {
+	font-size: 14.5px;
+	font-weight: 600;
+	color: var(--ink);
+}
+.search-item .si-meta {
+	margin-top: 2px;
+	font-size: 12.5px;
+	color: var(--muted);
+}
+.search-item.is-active,
+.search-item:hover {
+	background: var(--accent-soft);
+}
+.search-item.is-active .si-title {
+	color: var(--accent-ink);
+}
+.search-empty {
+	padding: 34px 0;
+	text-align: center;
+	color: var(--muted);
+	font-size: 14px;
+}
+.search-hint {
+	padding: 10px 16px;
+	font-size: 12px;
+	color: var(--muted);
+	border-top: 1px solid var(--border);
+	background: var(--bg-soft);
+}
+
+/* ---------- 13. back-top ---------- */
+/* 阅读进度条（§4.12）：fixed 顶边 3px，scaleX 驱动零重排；层级盖过 header(100)、让位 skip-link(200) */
+.read-progress {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 150;
+	width: 100%;
+	height: 3px;
+	transform-origin: 0 50%;
+	transform: scaleX(0);
+	background: linear-gradient(
+		90deg,
+		var(--accent),
+		var(--accent-deep, var(--accent))
+	);
+	pointer-events: none;
+}
+.back-top {
+	position: fixed;
+	right: 26px;
+	bottom: 30px;
+	z-index: 90;
+	width: 42px;
+	height: 42px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--surface);
+	color: var(--ink-2);
+	border: 1px solid var(--border);
+	box-shadow: var(--shadow-sm);
+	transition:
+		color 0.15s,
+		border-color 0.15s,
+		transform 0.15s;
+}
+.back-top:hover {
+	color: var(--accent-ink);
+	border-color: var(--accent);
+	transform: translateY(-2px);
+}
+.back-top svg {
+	width: 20px;
+	height: 20px;
+}
+
+/* ---------- 14. 响应式 ---------- */
+@media (max-width: 860px) {
+	.site-nav {
+		position: absolute;
+		top: var(--header-h);
+		left: 0;
+		right: 0;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 2px;
+		margin: 0;
+		padding: 10px 16px 14px;
+		background: var(--surface);
+		border-bottom: 1px solid var(--border);
+		box-shadow: var(--shadow-md);
+		display: none;
+	}
+	.site-nav.open {
+		display: flex;
+	}
+	.nav-link {
+		padding: 10px 14px;
+		border-radius: var(--radius-sm);
+	}
+	.nav-burger {
+		display: inline-flex;
+	}
+}
+@media (max-width: 640px) {
+	/* 小屏留白收紧（§4.13）：24px 留白在窄屏占比过大 */
+	.shell {
+		padding-inline: 16px;
+	}
+	.post-body {
+		padding: 18px 18px 20px;
+	}
+	.post-card.no-cover:not(.compact) .post-body {
+		padding-right: 72px;
+	}
+	.side-card {
+		/* §4.46 移动端与桌面统一 16px 内边距 */
+		padding: 16px;
+	}
+	.site-main {
+		padding-top: 24px;
+	}
+	.hero {
+		padding: 12px 0 28px;
+	}
+	.post-card.featured {
+		grid-template-columns: 1fr;
+	}
+	.post-card.featured .post-cover {
+		aspect-ratio: 16 / 9;
+		min-height: 0;
+	}
+	.post-card.compact {
+		grid-template-columns: 96px 1fr;
+	}
+	.post-nav {
+		grid-template-columns: 1fr;
+	}
+	.post-nav .next {
+		text-align: left;
+	}
+	.home-layout {
+		gap: 24px;
+	}
+	.back-top {
+		right: 16px;
+		bottom: 20px;
+	}
+	/* 搜索移动端形态（§4.56）：内联框退化为 icon 按钮，浮层内含输入框 */
+	.nav-search {
+		display: none;
+	}
+	.nav-search-toggle {
+		display: inline-flex;
+	}
+	.search-bar {
+		display: flex;
+	}
+	/* 搜索浮层移动端：fixed 贴边铺开 */
+	.search-pop {
+		position: fixed;
+		left: 12px;
+		right: 12px;
+		top: calc(var(--header-h) + 8px);
+		width: auto;
+	}
+}
+
+/* ---------- 15. 动效偏好 ---------- */
+@media (prefers-reduced-motion: reduce) {
+	html {
+		scroll-behavior: auto;
+	}
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		transition-duration: 0.01ms !important;
+	}
+	.reveal {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+/* ---------- 16. 图表与公式 / 邮箱防爬（M3b-b4） ---------- */
+.diagram-container {
+	position: relative;
+	margin: 24px 0;
+	padding: 4px;
+	overflow: hidden;
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	background: var(--surface);
+	/* 触摸设备：垂直滚动留给页面，捏合交给全屏层 */
+	touch-action: pan-y;
+}
+.diagram-wrapper {
+	text-align: center;
+}
+.mermaid-svg-light svg,
+.mermaid-svg-dark svg,
+.plantuml-image {
+	max-width: 100%;
+	height: auto;
+	margin: 0 auto;
+}
+/* Mermaid 构建期双主题：同一份图渲染两份 SVG，按暗色模式显隐 */
+.mermaid-svg-dark {
+	display: none;
+}
+html.dark .mermaid-svg-light {
+	display: none;
+}
+html.dark .mermaid-svg-dark {
+	display: block;
+}
+
+/* Mermaid 渲染失败降级：提示 + 源码 */
+.mermaid-error {
+	padding: 14px 16px;
+	text-align: left;
+}
+.mermaid-error p,
+.plantuml-error p {
+	font-size: 0.9em;
+	color: var(--muted);
+}
+.mermaid-error .mermaid-fallback-code {
+	margin: 10px 0 0;
+	padding: 14px;
+	font-family: var(--font-mono);
+	font-size: 0.85em;
+	line-height: 1.6;
+	overflow-x: auto;
+	white-space: pre-wrap;
+	word-break: break-word;
+	background: var(--bg-soft);
+	border-radius: var(--radius-sm);
+}
+
+/* PlantUML 加载失败：提示 + 重试 */
+.plantuml-error {
+	padding: 2px 0 10px;
+	text-align: center;
+}
+.plantuml-error button {
+	margin-top: 8px;
+	padding: 4px 14px;
+	border: 1px solid var(--border-2);
+	border-radius: var(--radius-sm);
+	background: var(--surface);
+	color: var(--ink-2);
+	font-size: 0.85em;
+	cursor: pointer;
+}
+.plantuml-error button:hover {
+	color: var(--ink);
+	border-color: var(--muted);
+}
+
+/* pan-zoom 控制栏：悬停浮出，触屏常显 */
+.diagram-controls {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	z-index: 2;
+	display: flex;
+	gap: 2px;
+	padding: 3px;
+	background: hsl(0 0% 100% / 0.85);
+	backdrop-filter: blur(4px);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-sm);
+	box-shadow: var(--shadow-sm);
+	opacity: 0;
+	transition: opacity 0.18s ease;
+}
+html.dark .diagram-controls {
+	background: hsl(0 0% 8% / 0.85);
+}
+.diagram-container:hover .diagram-controls,
+.diagram-container:focus-within .diagram-controls {
+	opacity: 1;
+}
+.diagram-ctrl-btn {
+	width: 26px;
+	height: 26px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+	border-radius: 6px;
+	background: transparent;
+	color: var(--ink-2);
+	font-size: 14px;
+	line-height: 1;
+	cursor: pointer;
+}
+.diagram-ctrl-btn:hover {
+	background: var(--bg-soft);
+	color: var(--ink);
+}
+
+/* 全屏查看层 */
+.diagram-fullscreen-overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: hsl(0 0% 0% / 0.8);
+	backdrop-filter: blur(3px);
+}
+.diagram-fs-content {
+	width: 94vw;
+	height: 86vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	cursor: grab;
+}
+.diagram-fs-content svg,
+.diagram-fs-content img {
+	max-width: 100%;
+	max-height: 100%;
+}
+.diagram-fs-controls {
+	position: absolute;
+	top: 18px;
+	right: 18px;
+	display: flex;
+	gap: 4px;
+	padding: 4px;
+	background: hsl(0 0% 100% / 0.92);
+	border-radius: var(--radius-sm);
+	box-shadow: var(--shadow-md);
+}
+html.dark .diagram-fs-controls {
+	background: hsl(0 0% 12% / 0.92);
+}
+.diagram-fs-controls .diagram-ctrl-btn {
+	width: 30px;
+	height: 30px;
+	font-size: 16px;
+}
+
+/* KaTeX：宽公式横向滚动而非撑破版心 */
+.katex-display {
+	overflow-x: auto;
+	overflow-y: hidden;
+	padding: 4px 0;
+}
+/* math 块（§4.61 起）：rehype-katex 先于 EC 执行，产物直接落入 .prose，
+   KaTeX 取 currentColor 随 .prose 的 var(--ink) 自动适配双主题 */
+
+/* 邮箱防爬：href 已置 '#'，保持可点击的视觉暗示 */
+a[data-encoded-email] {
+	cursor: pointer;
+}
+
+/* 加密文章（M3b-b7）：锁卡 + 解密容器 + meta 锁标 */
+.enc-flag {
+	color: var(--accent);
+}
+.enc-box {
+	display: flex;
+	justify-content: center;
+	padding: 3rem 1rem;
+}
+.enc-card {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	max-width: 360px;
+	padding: 2rem 1.5rem;
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow-sm);
+	text-align: center;
+}
+.enc-icon {
+	width: 44px;
+	height: 44px;
+	color: var(--accent);
+}
+.enc-title {
+	margin: 0;
+	font-family: var(--font-display);
+	font-size: 1.05rem;
+	font-weight: 700;
+}
+.enc-desc {
+	margin: 0;
+	font-size: 0.85rem;
+	color: var(--ink-2);
+}
+.enc-hint {
+	margin: 0;
+	font-size: 0.78rem;
+	color: var(--muted);
+}
+.enc-form {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	width: 100%;
+	margin-top: 6px;
+}
+.enc-form input {
+	width: 100%;
+	padding: 9px 12px;
+	font-size: 0.9rem;
+	color: var(--ink);
+	background: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-sm);
+	outline: none;
+	transition: border-color 0.15s ease;
+}
+.enc-form input:focus {
+	border-color: var(--accent);
+}
+.enc-form button {
+	padding: 9px 12px;
+	font-size: 0.9rem;
+	font-weight: 500;
+	cursor: pointer;
+	color: #fff;
+	background: var(--accent);
+	border: none;
+	border-radius: var(--radius-sm);
+	transition:
+		filter 0.15s ease,
+		transform 0.1s ease;
+}
+.enc-form button:hover {
+	filter: brightness(1.06);
+}
+.enc-form button:active {
+	transform: scale(0.98);
+}
+.enc-error {
+	margin: 0;
+	font-size: 0.78rem;
+	color: #d4574e;
+}
+
+@media (max-width: 640px) {
+	/* 触屏无 hover：图表控制栏常显 */
+	.diagram-controls {
+		opacity: 1;
+	}
+}
+
+/* ---------- 17. 相关/随机文章推荐（M3b-b9） ---------- */
+.related-grid {
+	display: grid;
+	/* minmax(0,1fr) 防止轨道被 nowrap 标题的 min-content 撑破页面 */
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 16px;
+	margin: 28px 0;
+}
+.related-card {
+	display: flex;
+	flex-direction: column;
+	/* 同原版 card-base：min-width:0 + overflow:hidden 保证截断链生效 */
+	min-width: 0;
+	overflow: hidden;
+	padding: 18px 20px;
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	box-shadow: var(--shadow-sm);
+}
+.related-head {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding-bottom: 12px;
+	margin-bottom: 6px;
+	font-family: var(--font-display);
+	font-size: 0.95rem;
+	font-weight: 700;
+	border-bottom: 1px dashed var(--border);
+}
+.related-head svg {
+	width: 18px;
+	height: 18px;
+	flex-shrink: 0;
+	color: var(--accent);
+}
+.related-badge {
+	margin-left: auto;
+	padding: 2px 8px;
+	font-size: 0.68rem;
+	font-weight: 500;
+	letter-spacing: 0.02em;
+	color: var(--accent-ink);
+	background: var(--accent-soft);
+	border-radius: 999px;
+}
+.related-list {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+}
+.related-item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 10px 8px;
+	margin: 0 -8px;
+	border-radius: var(--radius-sm);
+	transition: background-color 0.15s ease;
+}
+.related-item + .related-item {
+	border-top: 1px dashed var(--border);
+}
+.related-item:hover {
+	background: var(--bg-soft);
+}
+.related-num {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	flex-shrink: 0;
+	font-size: 0.75rem;
+	font-weight: 700;
+	color: var(--accent-ink);
+	background: var(--accent-soft);
+	border-radius: var(--radius-sm);
+}
+.related-body {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	flex: 1;
+	min-width: 0;
+}
+.related-title {
+	font-size: 0.875rem;
+	font-weight: 700;
+	color: var(--ink);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	transition: color 0.15s ease;
+}
+.related-item:hover .related-title {
+	color: var(--accent-ink);
+}
+.related-meta {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+	font-size: 0.75rem;
+	color: var(--muted);
+}
+.related-cat {
+	flex-shrink: 0;
+	padding: 1px 7px;
+	font-size: 0.68rem;
+	color: var(--ink-2);
+	background: var(--bg-soft);
+	border-radius: 999px;
+}
+.related-desc {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.related-arrow {
+	width: 18px;
+	height: 18px;
+	flex-shrink: 0;
+	color: var(--muted);
+	transition:
+		color 0.15s ease,
+		transform 0.15s ease;
+}
+.related-item:hover .related-arrow {
+	color: var(--accent);
+	transform: translateX(2px);
+}
+.related-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	flex: 1;
+	min-height: 140px;
+	font-size: 0.85rem;
+	color: var(--muted);
+}
+.related-empty svg {
+	width: 32px;
+	height: 32px;
+	opacity: 0.5;
+}
+
+@media (max-width: 860px) {
+	.related-grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+/* ---------- 18. LQIP 占位渐变（M3b-b9） ---------- */
+/* 占位层绝对定位盖在 img 上（z-index 低于各容器内徽标/文案 z-index 1/2）；
+   图片在下方正常加载，加载完成后容器加 .qy-img-in 驱动占位淡出。
+   不给 img 加 opacity/transition，避免覆盖 .post-cover img 的 hover 缩放过渡 */
+.qy-lqip {
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+	pointer-events: none;
+	transition: opacity 0.6s ease;
+}
+.qy-img-in > .qy-lqip {
+	opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+	.qy-lqip {
+		transition: none;
+	}
+}
+
+/* ---------- 19. 分享海报（M3b-b9） ---------- */
+/* 文章页支持卡（打赏 + 分享海报入口） */
+.support-card {
+	margin-top: 28px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 18px;
+	padding: 18px 22px;
+	border: 1px dashed var(--border);
+	border-radius: 14px;
+	background: var(--surface);
+}
+.support-info h3 {
+	margin: 0;
+	font-size: 1rem;
+	color: var(--ink);
+}
+.support-info p {
+	margin: 4px 0 0;
+	font-size: 0.85rem;
+	color: var(--muted);
+}
+.support-actions {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	flex-shrink: 0;
+}
+.btn-sponsor {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 22px;
+	border: 1px solid var(--accent);
+	border-radius: 999px;
+	background: var(--accent-soft);
+	color: var(--accent-deep);
+	font-size: 0.875rem;
+	text-decoration: none;
+	transition:
+		background 0.2s ease,
+		color 0.2s ease;
+}
+.btn-sponsor:hover {
+	background: var(--accent);
+	color: var(--surface);
+}
+.btn-sponsor svg {
+	width: 15px;
+	height: 15px;
+}
+@media (max-width: 640px) {
+	.support-card {
+		flex-direction: column;
+		align-items: stretch;
+		text-align: center;
+	}
+	.support-actions {
+		justify-content: center;
+	}
+}
+.btn-poster {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 22px;
+	border: 1px solid var(--border);
+	border-radius: 999px;
+	background: transparent;
+	color: var(--muted);
+	font-size: 0.875rem;
+	cursor: pointer;
+	transition:
+		color 0.2s ease,
+		border-color 0.2s ease;
+}
+.btn-poster:hover {
+	color: var(--accent);
+	border-color: var(--accent);
+}
+.btn-poster svg {
+	width: 15px;
+	height: 15px;
+}
+
+/* 弹窗（z-index 高于 lightbox 320）；海报 PNG 固定白底，卡片头部/底部跟随主题 */
+.poster-modal {
+	position: fixed;
+	inset: 0;
+	z-index: 330;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 20px;
+	background: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(4px);
+	animation: poster-fade 0.2s ease;
+}
+@keyframes poster-fade {
+	from {
+		opacity: 0;
+	}
+}
+.poster-card {
+	display: flex;
+	flex-direction: column;
+	width: min(480px, 92vw);
+	max-height: 88vh;
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: 14px;
+	box-shadow: var(--shadow-md);
+	overflow: hidden;
+	animation: poster-pop 0.25s ease;
+}
+@keyframes poster-pop {
+	from {
+		opacity: 0;
+		transform: translateY(12px) scale(0.98);
+	}
+}
+.poster-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 16px;
+	border-bottom: 1px solid var(--border);
+}
+.poster-head strong {
+	font-size: 0.95rem;
+	color: var(--ink);
+}
+.poster-close {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	border: none;
+	border-radius: var(--radius-sm);
+	background: transparent;
+	color: var(--muted);
+	cursor: pointer;
+	transition:
+		background 0.2s ease,
+		color 0.2s ease;
+}
+.poster-close:hover {
+	background: var(--bg-soft);
+	color: var(--ink);
+}
+.poster-stage {
+	flex: 1;
+	overflow: auto;
+	padding: 16px;
+}
+.poster-img {
+	display: block;
+	width: 100%;
+	height: auto;
+	border-radius: var(--radius-sm);
+}
+.poster-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	min-height: 160px;
+	color: var(--muted);
+	font-size: 0.875rem;
+}
+.poster-spinner {
+	width: 18px;
+	height: 18px;
+	border-radius: 50%;
+	border: 2px solid var(--border);
+	border-top-color: var(--accent);
+	animation: poster-spin 0.8s linear infinite;
+}
+@keyframes poster-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+.poster-foot {
+	display: flex;
+	gap: 10px;
+	padding: 12px 16px;
+	border-top: 1px solid var(--border);
+}
+.poster-btn {
+	flex: 1;
+	padding: 9px 0;
+	border: 1px solid var(--border);
+	border-radius: 9px;
+	background: transparent;
+	color: var(--muted);
+	font-size: 0.875rem;
+	cursor: pointer;
+	transition:
+		color 0.2s ease,
+		border-color 0.2s ease;
+}
+.poster-btn:hover:not(:disabled) {
+	color: var(--accent);
+	border-color: var(--accent);
+}
+.poster-btn:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+@media (prefers-reduced-motion: reduce) {
+	.poster-modal,
+	.poster-card {
+		animation: none;
+	}
+	.poster-spinner {
+		animation-duration: 2s;
+	}
+}
+
+/* ------------------------------------------- image-grid（[grid] 图片网格） */
+.image-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	align-items: stretch;
+	gap: 1rem;
+	margin: 1.5rem 0;
+}
+@media (min-width: 768px) {
+	.image-grid[data-cols="2"] {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	.image-grid[data-cols="3"] {
+		grid-template-columns: repeat(3, 1fr);
+	}
+	.image-grid[data-cols="4"] {
+		grid-template-columns: repeat(4, 1fr);
+	}
+}
+.image-grid img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: var(--radius-sm);
+}
+/* 覆盖 .prose figure 的边框/背景（网格内图片铺满格子） */
+.image-grid figure {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	border: none;
+	overflow: hidden;
+	border-radius: var(--radius-sm);
+}
+.image-grid figure img {
+	flex-grow: 1;
+	min-height: 0;
+}
+.image-grid figcaption {
+	margin-top: 0.5rem;
+	margin-bottom: 0;
+	padding: 0 2px;
+	background: transparent;
+	color: var(--ink-2);
+}
+
+/* --------------------------------------- card-github（GitHub 仓库卡片） */
+/* 注意：卡片是 .prose 内的 a 元素，必须覆盖 .prose a 的 border-bottom accent */
+.prose a.card-github {
+	display: block;
+	position: relative;
+	margin: 1.25rem 0;
+	padding: 1.1rem 1.5rem;
+	color: var(--ink);
+	background: var(--bg-soft);
+	border: 1px solid var(--border);
+	border-radius: var(--radius);
+	text-decoration: none;
+}
+.prose a.card-github:hover {
+	background: var(--accent-soft);
+	color: var(--accent-ink);
+}
+.prose a.card-github:hover .gc-titlebar {
+	color: var(--accent-ink);
+}
+.prose a.card-github:hover .gc-stars,
+.prose a.card-github:hover .gc-forks,
+.prose a.card-github:hover .gc-license,
+.prose a.card-github:hover .gc-description {
+	color: var(--ink);
+}
+.prose a.card-github:hover .gc-stars::before,
+.prose a.card-github:hover .gc-forks::before,
+.prose a.card-github:hover .gc-license::before {
+	background-color: var(--ink);
+}
+.prose a.card-github:active {
+	scale: 0.98;
+}
+.prose a.card-github .gc-titlebar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 0.5rem;
+	color: var(--ink);
+	font-size: 1.25rem;
+	font-weight: 500;
+}
+.prose a.card-github .gc-titlebar-left {
+	display: flex;
+	flex-flow: row nowrap;
+	gap: 0.5rem;
+}
+.prose a.card-github .gc-repo {
+	font-weight: bold;
+}
+.prose a.card-github .gc-owner {
+	position: relative;
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	gap: 0.5rem;
+	font-weight: 300;
+}
+.prose a.card-github .gc-avatar {
+	display: block;
+	overflow: hidden;
+	width: 1.5rem;
+	height: 1.5rem;
+	margin-top: -0.1rem;
+	background-color: var(--accent);
+	background-size: cover;
+	border-radius: 50%;
+}
+.prose a.card-github .gc-description {
+	margin-bottom: 0.7rem;
+	font-size: 1rem;
+	font-weight: 300;
+	line-height: 1.5rem;
+	color: var(--ink-2);
+}
+.prose a.card-github .gc-infobar {
+	display: flex;
+	flex-flow: row nowrap;
+	gap: 1.5rem;
+	width: fit-content;
+	color: var(--ink-2);
+}
+.prose a.card-github .gc-language {
+	display: none;
+}
+.prose a.card-github .gc-stars,
+.prose a.card-github .gc-forks,
+.prose a.card-github .gc-license,
+.prose a.card-github .github-logo {
+	font-weight: 500;
+	font-size: 0.875rem;
+	opacity: 0.9;
+}
+.prose a.card-github .gc-stars::before,
+.prose a.card-github .gc-forks::before,
+.prose a.card-github .gc-license::before,
+.prose a.card-github .github-logo::before {
+	content: " ";
+	display: inline-block;
+	height: 1.3em;
+	width: 1.3em;
+	margin-right: 0.4rem;
+	vertical-align: -0.24em;
+	font-size: inherit;
+	background-color: var(--ink-2);
+	overflow: visible;
+	-webkit-mask-size: contain;
+	mask-size: contain;
+	-webkit-mask-position: center;
+	mask-position: center;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	transition-property: background-color, background;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 0.15s;
+}
+.prose a.card-github .gc-stars::before {
+	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z'%3E%3C/path%3E%3C/svg%3E");
+	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z'%3E%3C/path%3E%3C/svg%3E");
+}
+.prose a.card-github .gc-license::before {
+	margin-right: 0.5rem;
+	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z'%3E%3C/path%3E%3C/svg%3E");
+	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z'%3E%3C/path%3E%3C/svg%3E");
+}
+.prose a.card-github .gc-forks::before {
+	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'%3E%3C/path%3E%3C/svg%3E");
+	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'%3E%3C/path%3E%3C/svg%3E");
+}
+.prose a.card-github .github-logo {
+	font-size: 1.25rem;
+}
+.prose a.card-github .github-logo::before {
+	margin-right: 0;
+	background-color: var(--ink);
+	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 496 512'%3E%3Cpath fill='%23a1f7cb' d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9c1.6 2.3 4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2'/%3E%3C/svg%3E");
+	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 496 512'%3E%3Cpath fill='%23a1f7cb' d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9c1.6 2.3 4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2'/%3E%3C/svg%3E");
+}
+.prose a.card-github.fetch-waiting {
+	pointer-events: none;
+	opacity: 0.7;
+	transition: opacity 0.15s ease-in-out;
+}
+.prose a.card-github.fetch-waiting .gc-description,
+.prose a.card-github.fetch-waiting .gc-infobar,
+.prose a.card-github.fetch-waiting .gc-avatar {
+	background-color: var(--ink-2);
+	color: transparent;
+	opacity: 0.5;
+	animation: card-pulsate 2s infinite linear;
+	user-select: none;
+}
+.prose a.card-github.fetch-waiting .gc-description::before,
+.prose a.card-github.fetch-waiting .gc-infobar::before,
+.prose a.card-github.fetch-waiting .gc-avatar::before {
+	background-color: transparent;
+}
+.prose a.card-github.fetch-waiting .gc-repo {
+	margin-left: -0.1rem;
+}
+.prose a.card-github.fetch-waiting .gc-description,
+.prose a.card-github.fetch-waiting .gc-infobar {
+	border-radius: 0.5rem;
+}
+.prose a.card-github.fetch-error {
+	pointer-events: all;
+	opacity: 1;
+}
+@keyframes card-pulsate {
+	0% {
+		opacity: 0.15;
+	}
+	50% {
+		opacity: 0.25;
+	}
+	100% {
+		opacity: 0.15;
+	}
+}
+.prose a.card-github,
+.prose a.card-github .gc-description,
+.prose a.card-github .gc-titlebar,
+.prose a.card-github .gc-stars,
+.prose a.card-github .gc-forks,
+.prose a.card-github .gc-license,
+.prose a.card-github .gc-avatar,
+.prose a.card-github .github-logo {
+	transition-property: all;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 0.15s;
+}