style(notebook): flatten cards and add side physics doodles

Remove panel/card borders and shadows for a flatter reading layout.
Add SideDoodles with physics formulas/curves, random angles on load.

src/components/Footer.astro

@@ -14,7 +14,9 @@ const year = new Date().getFullYear();
 
 <style>
 	footer {
-		border-top: 1px solid rgb(var(--line));
+		position: relative;
+		z-index: 1;
+		border-top: 1px solid color-mix(in srgb, rgb(var(--line)) 55%, transparent);
 		padding: 1.75rem 1rem 2.75rem;
 		text-align: center;
 		color: rgb(var(--muted));

src/components/Header.astro

@@ -22,8 +22,8 @@ import HeaderLink from './HeaderLink.astro';
 		z-index: 20;
 		backdrop-filter: blur(10px);
 		background: rgba(var(--surface), 0.86);
-		border-bottom: 1px solid rgb(var(--line));
+		border-bottom: 1px solid color-mix(in srgb, rgb(var(--line)) 55%, transparent);
-		transition: box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
+		transition: background var(--dur) var(--ease-out);
 	}
 	nav {
 		width: var(--wide);

src/components/SideDoodles.astro

@@ -0,0 +1,432 @@
+---
+/**
+ * 大屏两侧随性手绘：物理公式 / 曲线。
+ * 摆放与角度在客户端随机，每次刷新略有不同。
+ */
+---
+
+<div class="side-doodles" aria-hidden="true">
+	<svg class="doodle left-stack" viewBox="0 0 170 920" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<!-- 薛定谔 -->
+		<g class="piece" data-x="2" data-y="8">
+			<text class="eq" x="2" y="26" font-size="13">iℏ ∂ψ/∂t = Ĥψ</text>
+			<path
+				d="M6 34 q28 9 58 2 t52 -1"
+				stroke="currentColor"
+				stroke-width="1.1"
+				stroke-linecap="round"
+				opacity="0.4"></path>
+			<text class="eq scrawl" x="10" y="52" font-size="9">wave fn…?</text>
+		</g>
+
+		<!-- 双缝 -->
+		<g class="piece" data-x="18" data-y="70">
+			<path d="M10 8 v70" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.55"></path>
+			<path d="M10 20 h8 M10 48 h8" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"></path>
+			<path
+				d="M22 20 c8 -10 14 -9 22 0 s16 11 24 1 14 -10 22 0 12 8 18 2"
+				stroke="currentColor"
+				stroke-width="1.35"
+				stroke-linecap="round"
+				fill="none"></path>
+			<path
+				d="M22 48 c9 -8 15 -7 21 2 s15 9 23 0 13 -9 21 1 14 7 20 0"
+				stroke="currentColor"
+				stroke-width="1.3"
+				stroke-linecap="round"
+				fill="none"
+				opacity="0.85"></path>
+			<path d="M112 8 v62" stroke="currentColor" stroke-width="1.15" opacity="0.5"></path>
+			<path
+				d="M116 14 v6 M116 28 v10 M116 46 v5 M116 58 v8"
+				stroke="currentColor"
+				stroke-width="2.4"
+				stroke-linecap="round"
+				opacity="0.7"></path>
+			<text class="eq scrawl" x="18" y="86" font-size="10">Young · 2 slits</text>
+		</g>
+
+		<!-- 麦克斯韦 -->
+		<g class="piece" data-x="-2" data-y="195">
+			<text class="eq" x="4" y="18" font-size="11">∇·E = ρ/ε₀</text>
+			<text class="eq" x="12" y="36" font-size="11">∇·B = 0</text>
+			<text class="eq" x="6" y="54" font-size="11">∇×E = −∂B/∂t</text>
+			<text class="eq" x="10" y="72" font-size="11">∇×B = μ₀J + μ₀ε₀∂E/∂t</text>
+			<path
+				d="M8 80 c20 6 40 -2 70 4 18 4 30 1 48 -3"
+				stroke="currentColor"
+				stroke-width="1"
+				stroke-linecap="round"
+				opacity="0.35"></path>
+		</g>
+
+		<!-- 势阱 -->
+		<g class="piece" data-x="28" data-y="300">
+			<path
+				d="M18 20 v55 h70 v-55"
+				stroke="currentColor"
+				stroke-width="1.55"
+				stroke-linecap="round"
+				stroke-linejoin="round"></path>
+			<path d="M18 75 q18 4 35 -1 t35 2" stroke="currentColor" stroke-width="1.2" opacity="0.45"></path>
+			<path d="M28 62 h50 M32 48 h42 M38 34 h30" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"></path>
+			<path
+				d="M30 62 c8 -14 18 -14 26 0 s16 12 24 -2"
+				stroke="currentColor"
+				stroke-width="1.4"
+				stroke-linecap="round"
+				fill="none"
+				opacity="0.8"></path>
+			<path
+				d="M34 48 c6 -10 12 -9 18 1 6 9 12 8 20 -1"
+				stroke="currentColor"
+				stroke-width="1.2"
+				stroke-linecap="round"
+				fill="none"
+				opacity="0.65"></path>
+			<text class="eq scrawl" x="12" y="98" font-size="10">Eₙ = n²π²ℏ²/2mL²</text>
+		</g>
+
+		<!-- E=mc² -->
+		<g class="piece" data-x="8" data-y="430">
+			<text class="eq" x="6" y="28" font-size="20">E = mc²</text>
+			<path d="M10 36 q30 8 55 0" stroke="currentColor" stroke-width="1.1" opacity="0.4"></path>
+			<text class="eq scrawl" x="8" y="54" font-size="9">…or rest energy</text>
+		</g>
+
+		<!-- 摆线 -->
+		<g class="piece" data-x="20" data-y="500">
+			<path d="M8 18 h110 M12 12 v55" stroke="currentColor" stroke-width="1.05" opacity="0.45" stroke-linecap="round"></path>
+			<path
+				d="M14 22 c8 0 12 18 20 28 6 8 12 12 18 12 8 0 12 -10 18 -22 6 -12 10 -18 18 -18 6 0 10 8 14 16"
+				stroke="currentColor"
+				stroke-width="1.55"
+				stroke-linecap="round"
+				fill="none"></path>
+			<circle cx="34" cy="38" r="11" stroke="currentColor" stroke-width="1.15" opacity="0.55"></circle>
+			<path d="M34 38 l7 -6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" opacity="0.7"></path>
+			<text class="eq scrawl" x="50" y="78" font-size="10">cycloid</text>
+		</g>
+
+		<!-- 拉格朗日 -->
+		<g class="piece" data-x="-4" data-y="610">
+			<text class="eq" x="4" y="22" font-size="13">L = T − V</text>
+			<text class="eq" x="8" y="44" font-size="11">d/dt(∂L/∂q̇) = ∂L/∂q</text>
+			<path
+				d="M6 54 c25 7 48 -3 78 5"
+				stroke="currentColor"
+				stroke-width="1"
+				stroke-linecap="round"
+				opacity="0.35"></path>
+			<path
+				d="M100 28 c8 -6 16 -2 14 8 -2 10 -14 12 -18 4 -3 -6 0 -10 4 -12"
+				stroke="currentColor"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				fill="none"
+				opacity="0.7"></path>
+		</g>
+
+		<!-- 热方程 -->
+		<g class="piece" data-x="16" data-y="700">
+			<text class="eq" x="4" y="22" font-size="12">∂u/∂t = κ ∇²u</text>
+			<path
+				d="M10 48 c18 -22 36 -24 52 -4 14 18 28 16 42 -2"
+				stroke="currentColor"
+				stroke-width="1.35"
+				stroke-linecap="round"
+				fill="none"></path>
+			<path
+				d="M12 52 c16 -12 34 -14 48 -2 12 10 26 10 40 0"
+				stroke="currentColor"
+				stroke-width="1.1"
+				stroke-linecap="round"
+				opacity="0.55"
+				fill="none"></path>
+			<path
+				d="M14 56 c14 -6 30 -6 42 0 12 6 24 4 36 0"
+				stroke="currentColor"
+				stroke-width="1"
+				stroke-linecap="round"
+				opacity="0.4"
+				fill="none"></path>
+		</g>
+
+		<!-- ℏ c G -->
+		<g class="piece" data-x="30" data-y="820">
+			<text class="eq" x="0" y="20" font-size="14">ℏ · c · G</text>
+			<path d="M4 28 q20 6 40 -2 t36 4" stroke="currentColor" stroke-width="1" opacity="0.4" stroke-linecap="round"></path>
+			<path
+				d="M90 12 l2 5 5 1 -4 3 1 5 -4 -3 -4 3 1 -5 -4 -3 5 -1 z"
+				stroke="currentColor"
+				stroke-width="0.9"
+				stroke-linejoin="round"
+				opacity="0.6"></path>
+			<circle cx="108" cy="28" r="1.8" stroke="currentColor" stroke-width="1" opacity="0.5"></circle>
+			<circle cx="118" cy="14" r="1.2" stroke="currentColor" stroke-width="1" opacity="0.45"></circle>
+		</g>
+	</svg>
+
+	<svg class="doodle right-stack" viewBox="0 0 170 920" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<!-- Lissajous -->
+		<g class="piece" data-x="10" data-y="4">
+			<path
+				d="M12 12 h95 v70 h-95 z"
+				stroke="currentColor"
+				stroke-width="1.1"
+				stroke-linejoin="round"
+				opacity="0.4"></path>
+			<path
+				d="M30 48 c0 -18 12 -28 28 -28 14 0 22 10 22 22 0 16 -12 20 -22 20 -14 0 -28 -8 -28 -22 0 -12 10 -18 20 -18 12 0 18 8 18 16 0 10 -8 14 -16 14 -8 0 -14 -4 -14 -12"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linecap="round"
+				fill="none"></path>
+			<path
+				d="M42 30 c18 4 28 16 30 32 -2 14 -14 22 -28 20 -12 -2 -20 -12 -18 -24 2 -10 12 -16 22 -14"
+				stroke="currentColor"
+				stroke-width="1.2"
+				stroke-linecap="round"
+				opacity="0.55"
+				fill="none"></path>
+			<text class="eq scrawl" x="20" y="102" font-size="10">Lissajous · 3∶2</text>
+		</g>
+
+		<!-- 洛伦兹 + 光锥 -->
+		<g class="piece" data-x="22" data-y="130">
+			<text class="eq" x="4" y="20" font-size="12">γ = 1/√(1−v²/c²)</text>
+			<text class="eq" x="10" y="42" font-size="11">t′ = γ(t − vx/c²)</text>
+			<path
+				d="M70 88 l-28 -36 M70 88 l28 -36 M42 52 h56"
+				stroke="currentColor"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				opacity="0.75"></path>
+			<path d="M70 88 v-48" stroke="currentColor" stroke-width="1" stroke-dasharray="2 3" opacity="0.45"></path>
+			<text class="eq scrawl" x="78" y="58" font-size="9">light cone</text>
+		</g>
+
+		<!-- Bohr -->
+		<g class="piece" data-x="4" data-y="250">
+			<ellipse cx="55" cy="48" rx="42" ry="36" stroke="currentColor" stroke-width="1.2" opacity="0.5"></ellipse>
+			<ellipse cx="55" cy="48" rx="30" ry="24" stroke="currentColor" stroke-width="1.25" opacity="0.7"></ellipse>
+			<ellipse cx="55" cy="48" rx="18" ry="14" stroke="currentColor" stroke-width="1.3"></ellipse>
+			<circle cx="55" cy="48" r="4" stroke="currentColor" stroke-width="1.4"></circle>
+			<circle cx="84" cy="40" r="2.5" stroke="currentColor" stroke-width="1.2"></circle>
+			<path d="M78 36 q10 -8 14 2" stroke="currentColor" stroke-width="1" opacity="0.5" stroke-linecap="round"></path>
+			<text class="eq scrawl" x="18" y="100" font-size="10">Bohr · n=1,2,3…</text>
+		</g>
+
+		<!-- Fourier -->
+		<g class="piece" data-x="26" data-y="370">
+			<path
+				d="M8 40 h16 v-22 h22 v44 h22 v-44 h22 v22 h16"
+				stroke="currentColor"
+				stroke-width="1.45"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				fill="none"></path>
+			<path
+				d="M8 78 c8 -12 12 -12 18 0 s12 12 18 0 12 -12 18 0 12 12 18 0 12 -12 18 0 12 10 16 2"
+				stroke="currentColor"
+				stroke-width="1.25"
+				stroke-linecap="round"
+				fill="none"
+				opacity="0.75"></path>
+			<path
+				d="M8 92 c4 -6 6 -6 10 0 s8 6 12 0 6 -6 10 0 8 6 12 0 6 -6 10 0 8 6 12 0 6 -5 10 0 6 5 10 0"
+				stroke="currentColor"
+				stroke-width="1.05"
+				stroke-linecap="round"
+				opacity="0.5"
+				fill="none"></path>
+			<text class="eq scrawl" x="14" y="118" font-size="10">Fourier · Σ sin</text>
+		</g>
+
+		<!-- 概率云 -->
+		<g class="piece" data-x="12" data-y="510">
+			<path
+				d="M40 50 c-18 -22 -8 -42 12 -40 18 2 26 18 20 34 -4 12 -18 16 -28 10 -8 -4 -10 -12 -4 -18 4 -5 12 -4 14 2"
+				stroke="currentColor"
+				stroke-width="1.4"
+				stroke-linecap="round"
+				fill="none"></path>
+			<path
+				d="M52 42 c12 -8 28 -2 30 14 2 14 -10 26 -24 24 -10 -1 -16 -10 -12 -18"
+				stroke="currentColor"
+				stroke-width="1.2"
+				stroke-linecap="round"
+				opacity="0.65"
+				fill="none"></path>
+			<path
+				d="M28 58 c-6 10 0 24 14 26 12 2 20 -8 16 -18"
+				stroke="currentColor"
+				stroke-width="1.15"
+				stroke-linecap="round"
+				opacity="0.55"
+				fill="none"></path>
+			<circle cx="48" cy="48" r="1.5" fill="currentColor" opacity="0.5"></circle>
+			<text class="eq scrawl" x="8" y="100" font-size="10">|ψ|² · orbital mess</text>
+		</g>
+
+		<!-- 波动方程 -->
+		<g class="piece" data-x="30" data-y="620">
+			<text class="eq" x="2" y="22" font-size="12">∂²u/∂t² = c² ∇²u</text>
+			<path
+				d="M6 48 c10 -16 18 -16 28 0 s20 16 30 0 18 -14 28 0 16 12 24 2"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linecap="round"
+				fill="none"></path>
+			<path
+				d="M10 58 c9 -12 16 -12 24 0 s16 12 24 0 14 -10 22 0 12 8 18 1"
+				stroke="currentColor"
+				stroke-width="1.15"
+				stroke-linecap="round"
+				opacity="0.5"
+				fill="none"></path>
+			<text class="eq scrawl" x="70" y="78" font-size="9">→ wave</text>
+		</g>
+
+		<!-- 黑体 -->
+		<g class="piece" data-x="0" data-y="720">
+			<path d="M10 70 h110 M14 16 v58" stroke="currentColor" stroke-width="1.05" opacity="0.45" stroke-linecap="round"></path>
+			<path
+				d="M16 66 c8 -2 14 -8 20 -28 6 -20 12 -36 22 -40 8 -3 14 4 20 18 8 18 16 36 28 42 8 4 16 4 28 2"
+				stroke="currentColor"
+				stroke-width="1.55"
+				stroke-linecap="round"
+				fill="none"></path>
+			<path
+				d="M18 66 c6 -1 12 -6 16 -18 5 -14 10 -24 18 -28 6 -3 10 2 14 12 6 14 12 26 22 30 8 3 16 2 26 0"
+				stroke="currentColor"
+				stroke-width="1.2"
+				stroke-linecap="round"
+				opacity="0.55"
+				fill="none"></path>
+			<path d="M48 18 v48" stroke="currentColor" stroke-width="1" stroke-dasharray="2 3" opacity="0.4"></path>
+			<text class="eq scrawl" x="20" y="90" font-size="10">Planck · blackbody</text>
+			<text class="eq scrawl" x="70" y="36" font-size="9">λ_max T≈const</text>
+		</g>
+
+		<!-- F=ma 划掉 -->
+		<g class="piece" data-x="18" data-y="840">
+			<text class="eq" x="0" y="18" font-size="12" opacity="0.45">F=ma</text>
+			<path d="M0 12 l38 10" stroke="currentColor" stroke-width="1.2" opacity="0.5" stroke-linecap="round"></path>
+			<text class="eq" x="8" y="40" font-size="12">F = dp/dt</text>
+		</g>
+	</svg>
+</div>
+
+<script>
+	function scatterDoodles() {
+		const root = document.querySelector('.side-doodles');
+		if (!root) return;
+
+		const pieces = root.querySelectorAll('.piece');
+		pieces.forEach((g) => {
+			const baseX = Number(g.getAttribute('data-x') || 0);
+			const baseY = Number(g.getAttribute('data-y') || 0);
+			// 角度：大约 ±20°，偶尔更大一点
+			const angle = (Math.random() * 40 - 20) * (Math.random() < 0.15 ? 1.35 : 1);
+			// 位移抖动
+			const jx = Math.random() * 22 - 11;
+			const jy = Math.random() * 18 - 9;
+			const op = 0.72 + Math.random() * 0.28;
+
+			g.setAttribute(
+				'transform',
+				`translate(${(baseX + jx).toFixed(1)}, ${(baseY + jy).toFixed(1)}) rotate(${angle.toFixed(1)})`,
+			);
+			g.style.opacity = String(op.toFixed(2));
+		});
+
+		// 整侧栏也略微随机歪一点
+		root.querySelectorAll('.doodle').forEach((svg, i) => {
+			const tilt = (Math.random() * 3.2 - 1.6) * (i === 0 ? -1 : 1);
+			const shiftY = Math.random() * 3 - 1.5;
+			svg.style.setProperty('--tilt', `${tilt.toFixed(2)}deg`);
+			svg.style.setProperty('--shift-y', `${shiftY.toFixed(1)}%`);
+		});
+	}
+
+	scatterDoodles();
+	document.addEventListener('astro:page-load', scatterDoodles);
+</script>
+
+<style>
+	.side-doodles {
+		display: none;
+		pointer-events: none;
+		user-select: none;
+	}
+
+	@media (min-width: 1280px) {
+		.side-doodles {
+			display: block;
+		}
+	}
+
+	.doodle {
+		position: fixed;
+		top: 48%;
+		width: clamp(96px, 9.5vw, 148px);
+		height: auto;
+		max-height: min(92vh, 920px);
+		/* --tilt / --shift-y 由脚本写入 */
+		transform: translateY(calc(-48% + var(--shift-y, 0%))) rotate(var(--tilt, 0deg));
+		color: var(--accent);
+		opacity: 0.17;
+		z-index: 0;
+	}
+
+	.left-stack {
+		left: max(0.2rem, calc((100vw - min(72rem, 100vw)) / 2 - 8.6rem));
+	}
+
+	.right-stack {
+		right: max(0.2rem, calc((100vw - min(72rem, 100vw)) / 2 - 8.6rem));
+	}
+
+	.eq {
+		fill: currentColor;
+		font-family: 'Segoe UI', 'Cambria Math', Georgia, 'Times New Roman', serif;
+		font-style: italic;
+		font-weight: 500;
+		letter-spacing: -0.01em;
+	}
+
+	.eq.scrawl {
+		font-family: 'Segoe UI', 'Comic Sans MS', 'Bradley Hand', cursive, sans-serif;
+		font-style: italic;
+		font-weight: 400;
+		opacity: 0.85;
+		letter-spacing: 0.01em;
+	}
+
+	.piece {
+		opacity: 0.9;
+		transform-box: fill-box;
+		transform-origin: center;
+	}
+
+	@media (min-width: 1600px) {
+		.doodle {
+			opacity: 0.21;
+			width: clamp(118px, 10vw, 168px);
+		}
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.doodle {
+			opacity: 0.19;
+			color: var(--accent-dark);
+		}
+
+		@media (min-width: 1600px) {
+			.doodle {
+				opacity: 0.24;
+			}
+		}
+	}
+</style>

src/layouts/BaseLayout.astro

@@ -2,6 +2,7 @@
 import BaseHead from '../components/BaseHead.astro';
 import Footer from '../components/Footer.astro';
 import Header from '../components/Header.astro';
+import SideDoodles from '../components/SideDoodles.astro';
 
 interface Props {
 	title: string;
@@ -19,6 +20,7 @@ const { title, description = '', wide = false } = Astro.props;
 		<BaseHead title={title} description={description} />
 	</head>
 	<body>
+		<SideDoodles />
 		<Header />
 		<main class:list={[{ wide, boarded: wide }]}>
 			<slot />

src/layouts/ProseLayout.astro

@@ -208,7 +208,7 @@ const parentFolder =
 	.hero-image :global(img) {
 		width: 100%;
 		display: block;
-		box-shadow: var(--shadow);
+		box-shadow: none;
 	}
 	.prose :global(> *:first-child) {
 		margin-top: 0;

src/pages/index.astro

@@ -214,8 +214,9 @@ const latestDate = (() => {
 		border: 1px solid var(--accent);
 	}
 	.btn-ghost {
-		border: 1px solid rgb(var(--line));
+		border: none;
 		color: rgb(var(--ink));
+		background: color-mix(in srgb, rgb(var(--code-bg)) 80%, transparent);
 	}
 	.metric.linkish {
 		text-decoration: none;
@@ -224,16 +225,15 @@ const latestDate = (() => {
 	}
 	.featured-panel {
 		padding: 0;
-		overflow: hidden;
+		overflow: visible;
 	}
 	.featured {
 		display: block;
-		padding: 1.1rem 1.15rem;
+		padding: 0.85rem 0.15rem 1rem;
 		text-decoration: none;
 		color: inherit;
-		background:
+		background: transparent;
-			radial-gradient(ellipse 90% 80% at 100% 0%, var(--accent-soft), transparent 55%),
+		border-bottom: 1px solid color-mix(in srgb, rgb(var(--line)) 70%, transparent);
-			rgb(var(--surface-elevated));
 	}
 	.featured-top {
 		display: flex;
@@ -280,15 +280,15 @@ const latestDate = (() => {
 		display: flex;
 		justify-content: space-between;
 		gap: 0.4rem;
-		padding: 0.6rem 0.7rem;
+		padding: 0.55rem 0.45rem;
-		border: 1px solid rgb(var(--line));
+		border: none;
-		border-radius: 8px;
+		border-radius: 6px;
 		text-decoration: none;
 		color: inherit;
-		background: rgb(var(--code-bg));
+		background: color-mix(in srgb, rgb(var(--code-bg)) 65%, transparent);
 	}
 	.folder-card:hover {
-		border-color: var(--accent);
+		background: var(--accent-soft);
 		color: inherit;
 	}
 	.folder-card-name {

src/pages/posts/folder/[...folder].astro

@@ -141,15 +141,15 @@ const crumbs = folder.split('/').filter(Boolean);
 		justify-content: space-between;
 		align-items: center;
 		gap: 0.5rem;
-		padding: 0.65rem 0.75rem;
+		padding: 0.55rem 0.45rem;
-		border: 1px solid rgb(var(--line));
+		border: none;
-		border-radius: 8px;
+		border-radius: 6px;
 		text-decoration: none;
 		color: inherit;
-		background: rgb(var(--code-bg));
+		background: color-mix(in srgb, rgb(var(--code-bg)) 65%, transparent);
 	}
 	.folder-card:hover {
-		border-color: var(--accent);
+		background: var(--accent-soft);
 		color: inherit;
 	}
 	.folder-card-name {

src/pages/posts/index.astro

@@ -107,15 +107,15 @@ const rootEntries = posts.filter((n) => !n.id.includes('/'));
 		justify-content: space-between;
 		align-items: center;
 		gap: 0.5rem;
-		padding: 0.65rem 0.75rem;
+		padding: 0.55rem 0.45rem;
-		border: 1px solid rgb(var(--line));
+		border: none;
-		border-radius: 8px;
+		border-radius: 6px;
 		text-decoration: none;
 		color: inherit;
-		background: rgb(var(--code-bg));
+		background: color-mix(in srgb, rgb(var(--code-bg)) 65%, transparent);
 	}
 	.folder-card:hover {
-		border-color: var(--accent);
+		background: var(--accent-soft);
 		color: inherit;
 	}
 	.folder-card-name {

src/pages/tags/index.astro

@@ -125,9 +125,9 @@ const groups = groupTagsByInitial(allStats);
 		width: 100%;
 		margin-top: 0.85rem;
 		padding: 0.55rem 0.75rem;
-		border: 1px solid rgb(var(--line));
+		border: none;
-		border-radius: 8px;
+		border-radius: 6px;
-		background: rgb(var(--surface));
+		background: color-mix(in srgb, rgb(var(--code-bg)) 80%, transparent);
 		color: rgb(var(--ink));
 		font: inherit;
 	}

src/styles/board.css

@@ -28,11 +28,11 @@
 }
 
 .panel {
-	border: 1px solid rgb(var(--line));
+	border: none;
-	border-radius: var(--radius);
+	border-radius: 0;
-	background: rgb(var(--surface-elevated));
+	background: transparent;
-	box-shadow: var(--shadow);
+	box-shadow: none;
-	padding: 0.85rem 0.95rem;
+	padding: 0.55rem 0.15rem 0.75rem;
 }
 
 .panel-head {
@@ -40,7 +40,9 @@
 	align-items: baseline;
 	justify-content: space-between;
 	gap: 0.75rem;
-	margin-bottom: 0.6rem;
+	margin-bottom: 0.55rem;
+	padding-bottom: 0.35rem;
+	border-bottom: 1px solid color-mix(in srgb, rgb(var(--line)) 70%, transparent);
 }
 
 .panel-head h2,
@@ -82,8 +84,8 @@
 
 .metric {
 	padding: 0.5rem 0.55rem;
-	border-radius: 8px;
+	border-radius: 6px;
-	background: rgb(var(--code-bg));
+	background: color-mix(in srgb, rgb(var(--code-bg)) 70%, transparent);
 }
 
 .metric strong {
@@ -139,7 +141,7 @@
 }
 
 .dense-list > li + li {
-	border-top: 1px solid rgb(var(--line));
+	border-top: 1px solid color-mix(in srgb, rgb(var(--line)) 55%, transparent);
 }
 
 .dense-item {

src/styles/global.css

@@ -12,9 +12,10 @@
 	--surface: 252, 251, 248;
 	--surface-elevated: 255, 255, 255;
 	--code-bg: 242, 241, 237;
-	--shadow: 0 1px 2px rgba(var(--ink), 0.04), 0 8px 24px rgba(var(--ink), 0.05);
+	/* 弱化卡片感：阴影默认关闭，仅极少数浮层可用 */
-	--shadow-lift: 0 4px 12px rgba(var(--ink), 0.07), 0 14px 32px rgba(var(--ink), 0.08);
+	--shadow: none;
-	--radius: 10px;
+	--shadow-lift: none;
+	--radius: 8px;
 	/* 阅读正文略宽一点；列表/首页用更宽壳，减少大屏两侧空旷 */
 	--content: 46rem;
 	--wide: min(72rem, calc(100vw - 3rem));
@@ -38,8 +39,8 @@
 		--surface: 18, 20, 22;
 		--surface-elevated: 26, 28, 31;
 		--code-bg: 34, 37, 42;
-		--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
+		--shadow: none;
-		--shadow-lift: 0 6px 18px rgba(0, 0, 0, 0.35), 0 16px 36px rgba(0, 0, 0, 0.28);
+		--shadow-lift: none;
 	}
 }
 
@@ -71,9 +72,16 @@ body {
 	overflow-wrap: break-word;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
+	/* 大屏两侧极淡纸纹点缀，避免纯色空白 */
+	background-image:
+		radial-gradient(ellipse 42% 28% at 8% 18%, var(--accent-soft), transparent 70%),
+		radial-gradient(ellipse 36% 24% at 92% 72%, var(--accent-soft), transparent 68%);
+	background-attachment: fixed;
 }
 
 main {
+	position: relative;
+	z-index: 1;
 	width: var(--content);
 	max-width: 100%;
 	margin: 0 auto;
@@ -188,8 +196,7 @@ img {
 }
 
 .prose img:hover {
-	transform: translateY(-2px);
+	transform: translateY(-1px);
-	box-shadow: var(--shadow-lift);
 }
 
 hr {
@@ -211,16 +218,10 @@ pre {
 	border-radius: var(--radius);
 	overflow-x: auto;
 	background: rgb(var(--code-bg));
-	border: 1px solid rgb(var(--line));
+	border: none;
 	margin: 0 0 1.2em;
 	font-size: 0.84em;
 	line-height: 1.55;
-	transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
-}
-
-pre:hover {
-	border-color: color-mix(in srgb, var(--accent) 35%, rgb(var(--line)));
-	box-shadow: var(--shadow);
 }
 
 pre > code {
@@ -293,14 +294,12 @@ blockquote:has(> p:first-child) {
 	line-height: 1.45;
 	transition:
 		background var(--dur-fast) var(--ease-out),
-		transform var(--dur-fast) var(--ease-out),
+		transform var(--dur-fast) var(--ease-out);
-		box-shadow var(--dur-fast) var(--ease-out);
 }
 
 .tag:hover {
-	background: rgba(31, 107, 90, 0.22);
+	background: color-mix(in srgb, var(--accent) 22%, transparent);
 	transform: translateY(-1px);
-	box-shadow: 0 2px 8px rgba(31, 107, 90, 0.12);
 	color: var(--accent-dark);
 }
 
@@ -352,30 +351,27 @@ blockquote:has(> p:first-child) {
 
 .card {
 	display: block;
-	padding: 0.95rem 1.05rem;
+	padding: 0.85rem 0.35rem;
-	border: 1px solid rgb(var(--line));
+	border: none;
-	border-radius: var(--radius);
+	border-radius: 6px;
-	background: rgb(var(--surface-elevated));
+	background: transparent;
 	text-decoration: none;
 	color: inherit;
-	box-shadow: var(--shadow);
+	box-shadow: none;
 	transition:
-		border-color var(--dur) var(--ease-out),
 		transform var(--dur) var(--ease-out),
-		box-shadow var(--dur) var(--ease-out),
 		background var(--dur) var(--ease-out);
 }
 
 .card:hover {
-	border-color: color-mix(in srgb, var(--accent) 55%, rgb(var(--line)));
+	transform: none;
-	transform: translateY(-3px);
+	box-shadow: none;
-	box-shadow: var(--shadow-lift);
 	color: inherit;
-	background: color-mix(in srgb, rgb(var(--surface-elevated)) 92%, var(--accent-soft));
+	background: var(--accent-soft);
 }
 
 .card:active {
-	transform: translateY(-1px);
+	transform: none;
 	transition-duration: var(--dur-fast);
 }