@anglefeint/astro-theme 0.1.0-alpha.0

package/src/styles/global.css

@@ -0,0 +1,1867 @@
+/*
+  The CSS in this style tag is based off of Bear Blog's default CSS.
+  https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
+  License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
+ */
+
+:root {
+	--accent: #2337ff;
+	--accent-dark: #000d8a;
+	--black: 15, 18, 25;
+	--gray: 96, 115, 159;
+	--gray-light: 229, 233, 240;
+	--gray-dark: 34, 41, 57;
+	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
+	--box-shadow:
+    0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
+    0 16px 32px rgba(var(--gray), 33%);
+	/* Dark theme */
+	--bg: #000;
+	--text: 220, 220, 220;
+	--text-muted: 160, 160, 160;
+	--border: 60, 60, 60;
+  --chrome-bg: var(--bg);
+  --chrome-border: rgb(var(--border));
+  --chrome-link: rgb(var(--text));
+  --chrome-link-hover: rgb(var(--text));
+  --chrome-active: var(--accent);
+  --chrome-text-muted: rgb(var(--text-muted));
+}
+@font-face {
+	font-family: "Atkinson";
+	src: url("/fonts/atkinson-regular.woff") format("woff");
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+@font-face {
+	font-family: "Atkinson";
+	src: url("/fonts/atkinson-bold.woff") format("woff");
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
+}
+body {
+	font-family: "Atkinson", sans-serif;
+	margin: 0;
+	padding: 0;
+	text-align: left;
+	background: var(--bg);
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	color: rgb(var(--text));
+	font-size: 20px;
+	line-height: 1.7;
+	/* Sticky footer: flex column, main grows to push footer to viewport bottom */
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+}
+main {
+	width: 720px;
+	max-width: calc(100% - 2em);
+	margin: auto;
+	padding: 3em 1em;
+	flex: 1 1 auto;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin: 0 0 0.5rem 0;
+	color: rgb(var(--text));
+	line-height: 1.2;
+}
+h1 {
+	font-size: 3.052em;
+}
+h2 {
+	font-size: 2.441em;
+}
+h3 {
+	font-size: 1.953em;
+}
+h4 {
+	font-size: 1.563em;
+}
+h5 {
+	font-size: 1.25em;
+}
+strong,
+b {
+	font-weight: 700;
+}
+a {
+	color: var(--accent);
+}
+a:hover {
+	color: var(--accent);
+}
+p {
+	margin-bottom: 1em;
+}
+.prose p {
+	margin-bottom: 2em;
+}
+textarea {
+	width: 100%;
+	font-size: 16px;
+}
+input {
+	font-size: 16px;
+}
+table {
+	width: 100%;
+}
+img {
+	max-width: 100%;
+	height: auto;
+	border-radius: 8px;
+}
+code {
+	padding: 2px 5px;
+	background-color: rgb(var(--border));
+	border-radius: 2px;
+}
+pre {
+	padding: 1.5em;
+	border-radius: 8px;
+	background-color: rgb(var(--border));
+}
+pre > code {
+	all: unset;
+}
+blockquote {
+	border-left: 4px solid var(--accent);
+	padding: 0 0 0 20px;
+	margin: 0;
+	font-size: 1.333em;
+}
+hr {
+	border: none;
+	border-top: 1px solid rgb(var(--border));
+}
+@media (max-width: 720px) {
+	body {
+		font-size: 18px;
+	}
+	main {
+		padding: 1em;
+	}
+}
+
+.sr-only {
+	border: 0;
+	padding: 0;
+	margin: 0;
+	position: absolute !important;
+	height: 1px;
+	width: 1px;
+	overflow: hidden;
+	/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
+	clip: rect(1px 1px 1px 1px);
+	/* maybe deprecated but we need to support legacy browsers */
+	clip: rect(1px, 1px, 1px, 1px);
+	/* modern browsers, clip-path works inwards from each corner */
+	clip-path: inset(50%);
+	/* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
+	white-space: nowrap;
+}
+
+/* ========== Blade Runner 博客列表页 (body.br-page) ========== */
+body.br-page {
+  background: #090b12 !important;
+	background-image: none !important;
+	background-size: auto !important;
+	min-height: 100vh !important;
+  --chrome-bg: rgba(7, 13, 24, 0.72);
+  --chrome-border: rgba(112, 196, 255, 0.2);
+  --chrome-link: rgba(196, 226, 255, 0.92);
+  --chrome-link-hover: rgba(232, 206, 245, 0.98);
+  --chrome-active: rgba(228, 158, 224, 0.9);
+  --chrome-text-muted: rgba(156, 188, 224, 0.76);
+}
+body.br-page::before {
+  content: "";
+	position: fixed;
+	inset: 0;
+	z-index: -1;
+  background: linear-gradient(
+    180deg,
+    #05070b 0%,
+    #090c14 20%,
+    #111a2d 52%,
+    #090c14 80%,
+    #05070b 100%
+  );
+}
+body.br-page::after {
+  content: "";
+	position: fixed;
+	inset: 0;
+	z-index: -1;
+  background:
+    radial-gradient(
+      ellipse 82% 52% at 50% 18%,
+      rgba(110, 186, 255, 0.14) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse 62% 42% at 82% 78%,
+      rgba(255, 132, 88, 0.06) 0%,
+      transparent 40%
+    ),
+    radial-gradient(
+      ellipse 52% 37% at 20% 62%,
+      rgba(226, 150, 214, 0.06) 0%,
+      transparent 45%
+    );
+  animation: br-fog-drift 20s ease-in-out infinite alternate;
+	pointer-events: none;
+}
+@keyframes br-fog-drift {
+  0% {
+    opacity: 0.7;
+    transform: translate(-2%, -1%);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(2%, 1%);
+  }
+}
+body.br-page .br-rain {
+	position: fixed;
+	inset: 0;
+	pointer-events: none;
+  z-index: 6;
+	overflow: hidden;
+  contain: layout paint;
+}
+/* Blade Runner: 雨滴 - 白色中脏脏的感觉，非琥珀也非冷青 */
+body.br-page .br-rain-drop {
+	position: absolute;
+	top: -20px;
+  width: 6px;
+  height: 38px;
+  clip-path: polygon(1.5px 0, 4.5px 0, 6px 100%, 0 100%);
+  will-change: transform;
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(210, 208, 198, 0.38) 40%,
+    rgba(195, 190, 182, 0.52) 70%,
+    transparent 100%
+  );
+	animation: br-rain-fall linear infinite;
+}
+@keyframes br-rain-fall {
+  to {
+    transform: translateY(100vh);
+  }
+}
+/* Mesh-page: scanlines only on header and footer; fade on hover */
+body.mesh-page header .mesh-scanlines,
+body.mesh-page footer .mesh-scanlines {
+  position: absolute;
+  inset: 0;
+  contain: layout paint;
+  z-index: 1;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.55) 2px,
+    rgba(0, 0, 0, 0.55) 4px
+  );
+  pointer-events: none;
+  opacity: 0.78;
+  transition: opacity 0.3s ease;
+}
+body.mesh-page header .mesh-scanlines::after,
+body.mesh-page footer .mesh-scanlines::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 1px,
+    rgba(0, 0, 0, 0.12) 1px,
+    rgba(0, 0, 0, 0.12) 2px
+  );
+  pointer-events: none;
+  opacity: 0.8;
+}
+body.mesh-page header:hover .mesh-scanlines,
+body.mesh-page footer:hover .mesh-scanlines {
+  opacity: 0;
+}
+body.br-page .br-spotlight {
+	position: fixed;
+  top: 0;
+  left: 0;
+  width: calc(hypot(100vw, 100vh) * 1.3 / 1.41421356);
+  height: calc(hypot(100vw, 100vh) * 1.3 / 1.41421356);
+  pointer-events: none;
+  z-index: 5;
+  contain: layout paint;
+}
+body.br-page .br-spotlight-tl {
+  position: absolute;
+	inset: 0;
+  transform-origin: 0 0;
+  background: conic-gradient(
+    from 180deg at 0 0,
+    transparent 0deg 302deg,
+    rgba(120, 192, 255, 0.18) 304deg,
+    rgba(96, 182, 255, 0.32) 307deg,
+    rgba(206, 234, 255, 0.92) 310deg,
+    rgba(96, 182, 255, 0.32) 313deg,
+    rgba(120, 192, 255, 0.18) 316deg,
+    transparent 319deg 360deg
+  );
+  animation: br-spotlight-sweep-tl 12s ease-in-out infinite;
+}
+body.br-page .br-spotlight-tr {
+  position: absolute;
+  inset: 0;
+  transform-origin: 100% 0;
+  background: conic-gradient(
+    from 180deg at 100% 0,
+    transparent 0deg 33deg,
+    rgba(120, 192, 255, 0.18) 35deg,
+    rgba(96, 182, 255, 0.32) 38deg,
+    rgba(206, 234, 255, 0.92) 41deg,
+    rgba(96, 182, 255, 0.32) 44deg,
+    rgba(120, 192, 255, 0.18) 47deg,
+    transparent 50deg 360deg
+  );
+  animation: br-spotlight-sweep-tr 24s ease-in-out infinite;
+  animation-delay: -1.5s;
+}
+@keyframes br-spotlight-sweep-tl {
+  0% {
+    transform: rotate(50deg);
+  }
+  50% {
+    transform: rotate(-50deg);
+  }
+  100% {
+    transform: rotate(50deg);
+  }
+}
+@keyframes br-spotlight-sweep-tr {
+  0%,
+  100% {
+    transform: rotate(-60deg);
+  }
+  50% {
+    transform: rotate(60deg);
+  }
+}
+body.br-page .br-flicker {
+  position: fixed;
+  inset: 0;
+  contain: layout paint;
+  background:
+    radial-gradient(
+      ellipse 25% 30% at 85% 20%,
+      rgba(255, 146, 96, 0.18) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 20% 24% at 20% 68%,
+      rgba(96, 182, 255, 0.28) 0%,
+      transparent 55%
+    ),
+    radial-gradient(
+      ellipse 28% 35% at 70% 85%,
+      rgba(224, 146, 212, 0.2) 0%,
+      transparent 55%
+    );
+  animation: br-neon-flicker-glow 6s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+@keyframes br-neon-flicker-glow {
+  0%,
+  100% {
+    opacity: 0.8;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  75% {
+    opacity: 0.95;
+  }
+}
+body.br-page .br-haze {
+  position: fixed;
+  inset: 0;
+  contain: layout paint;
+  background:
+    radial-gradient(
+      ellipse 100% 80% at 50% 50%,
+      rgba(52, 84, 128, 0.08) 0%,
+      transparent 60%
+    ),
+    radial-gradient(
+      ellipse 40% 30% at 30% 30%,
+      rgba(224, 144, 208, 0.05) 0%,
+      transparent 50%
+    ),
+    radial-gradient(
+      ellipse 35% 25% at 70% 70%,
+      rgba(255, 134, 92, 0.04) 0%,
+      transparent 50%
+    );
+  animation: br-haze-drift 20s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
+}
+@keyframes br-haze-drift {
+  0% {
+    opacity: 0.5;
+    transform: translate(3%, 2%) scale(1.05);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-3%, -2%) scale(0.95);
+  }
+}
+body.br-page .br-vignette {
+  position: fixed;
+  inset: 0;
+  contain: layout paint;
+  background: radial-gradient(
+    ellipse 80% 80% at 50% 50%,
+    transparent 40%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+	pointer-events: none;
+	z-index: 3;
+}
+body.br-page .br-rain-drop--thin {
+  width: 4px;
+  height: 28px;
+  clip-path: polygon(0.5px 0, 3.5px 0, 4px 100%, 0 100%);
+}
+body.br-page .br-rain-drop--fog {
+  opacity: 0.15;
+  filter: blur(0.5px);
+}
+body.br-page .br-rain-drop--skew {
+  animation-name: br-rain-fall-skew;
+}
+@keyframes br-rain-fall-skew {
+  to {
+    transform: skewX(-3deg) translateY(100vh);
+  }
+}
+body.br-page .br-dust {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  overflow: hidden;
+  contain: layout paint;
+}
+body.br-page .br-dust-particle {
+  position: absolute;
+  border-radius: 50%;
+  will-change: transform;
+  background: rgba(176, 216, 248, 0.68);
+  box-shadow:
+    0 0 10px rgba(126, 196, 255, 0.35),
+    0 0 20px rgba(214, 146, 210, 0.16);
+  animation: br-dust-float linear infinite;
+}
+@keyframes br-dust-float {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.7;
+  }
+  25% {
+    transform: translate(15px, -8px) scale(1.1);
+    opacity: 0.95;
+  }
+  50% {
+    transform: translate(-10px, -20px) scale(0.9);
+    opacity: 0.8;
+  }
+  75% {
+    transform: translate(8px, -15px) scale(1.05);
+    opacity: 0.9;
+  }
+  100% {
+    transform: translate(0, -30px) scale(1);
+    opacity: 0.7;
+  }
+}
+body.page-home header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+}
+body.br-page header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 6;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+}
+body.br-page main {
+	position: relative;
+  z-index: 5;
+	width: 960px;
+	padding-top: calc(3em + 56px);
+}
+body.br-page .title,
+body.br-page .date {
+  color: rgba(202, 228, 255, 0.93);
+}
+body.br-page .date {
+  color: rgba(150, 186, 228, 0.68);
+}
+body.br-page ul {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 2rem;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+body.br-page ul li {
+	width: calc(50% - 1rem);
+}
+body.br-page ul li * {
+	text-decoration: none;
+}
+body.br-page ul li:first-child {
+	width: 100%;
+	margin-bottom: 1rem;
+	text-align: center;
+}
+body.br-page ul li:first-child img {
+  width: 100%;
+}
+body.br-page ul li:first-child .title {
+  font-size: 2.369rem;
+}
+body.br-page ul li a {
+	display: block;
+	position: relative;
+	padding: 1rem;
+  border-radius: 4px;
+  border: 1px solid rgba(116, 194, 255, 0.24);
+  box-shadow:
+    0 0 6px rgba(100, 182, 255, 0.1),
+    0 0 16px rgba(88, 164, 240, 0.07),
+    inset 0 0 8px rgba(224, 146, 210, 0.03);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.3s;
+}
+body.br-page ul li a:hover {
+  border-color: rgba(124, 204, 255, 0.62);
+  box-shadow:
+    0 0 10px rgba(112, 196, 255, 0.3),
+    0 0 24px rgba(214, 146, 210, 0.2),
+    inset 0 0 18px rgba(136, 204, 255, 0.08);
+  animation: br-neon-flicker 0.45s ease-in-out infinite;
+}
+@keyframes br-neon-flicker {
+  0%,
+  100% {
+    box-shadow:
+      0 0 10px rgba(112, 196, 255, 0.3),
+      0 0 24px rgba(214, 146, 210, 0.2),
+      inset 0 0 18px rgba(136, 204, 255, 0.08);
+  }
+  50% {
+    box-shadow:
+      0 0 7px rgba(112, 196, 255, 0.22),
+      0 0 15px rgba(214, 146, 210, 0.14),
+      inset 0 0 10px rgba(136, 204, 255, 0.06);
+  }
+}
+body.br-page ul li a:hover .title {
+  animation: br-glitch 0.3s ease-in-out;
+  color: rgb(212, 236, 255);
+  text-shadow:
+    0 0 10px rgba(120, 200, 255, 0.62),
+    0 0 22px rgba(222, 150, 214, 0.3),
+    0 0 34px rgba(90, 170, 240, 0.2);
+}
+@keyframes br-glitch {
+  0% {
+    transform: translate(0);
+    text-shadow: 0 0 8px rgba(120, 200, 255, 0.55);
+  }
+  20% {
+    transform: translate(-2px, 2px);
+    text-shadow:
+      2px 0 rgba(224, 150, 214, 0.55),
+      -2px 0 rgba(120, 202, 255, 0.5);
+  }
+  40% {
+    transform: translate(2px, -2px);
+    text-shadow:
+      -2px 0 rgba(120, 202, 255, 0.5),
+      2px 0 rgba(224, 150, 214, 0.55);
+  }
+  60% {
+    transform: translate(-1px, 1px);
+  }
+  80% {
+    transform: translate(1px, -1px);
+  }
+  100% {
+    transform: translate(0);
+    text-shadow: 0 0 8px rgba(120, 200, 255, 0.55);
+  }
+}
+body.br-page ul li a:hover .date {
+  color: rgba(196, 226, 255, 0.95);
+  text-shadow:
+    0 0 10px rgba(120, 194, 255, 0.45),
+    0 0 20px rgba(218, 148, 210, 0.26);
+}
+body.br-page .img-wrapper {
+	position: relative;
+  margin-bottom: 0.5rem;
+  border-radius: 4px;
+	overflow: hidden;
+}
+/* 水平扫线 - 日式樱花+赛博蓝 */
+body.br-page .img-wrapper::before {
+  content: "";
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: -20px;
+  height: 10px;
+  z-index: 3;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 182, 228, 0.74),
+    rgba(234, 148, 214, 0.88),
+    rgba(170, 200, 255, 0.9),
+    rgba(234, 148, 214, 0.88),
+    rgba(255, 182, 228, 0.74),
+    transparent
+  );
+  box-shadow:
+    0 0 24px rgba(232, 150, 214, 0.62),
+    0 0 48px rgba(110, 182, 255, 0.32);
+  pointer-events: none;
+  transition: top 1.2s linear;
+}
+body.br-page ul li a:hover .img-wrapper::before {
+  top: 100%;
+}
+body.br-page .img-wrapper::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+	z-index: 2;
+  box-shadow:
+    inset 0 0 25px rgba(108, 190, 255, 0.16),
+    inset 0 0 50px rgba(224, 148, 212, 0.1);
+	pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+body.br-page ul li a:hover .img-wrapper::after {
+  opacity: 1;
+}
+body.br-page ul li img {
+	display: block;
+	width: 100%;
+	height: auto;
+  filter: saturate(0.75) contrast(1.05) brightness(0.88) sepia(0.15)
+    hue-rotate(-2deg);
+  transition:
+    filter 0.3s,
+    box-shadow 0.3s;
+}
+body.br-page ul li a:hover img {
+  filter: saturate(0.88) contrast(1.11) brightness(0.94) sepia(0.08)
+    hue-rotate(-6deg);
+  box-shadow:
+    0 0 15px rgba(116, 194, 255, 0.22),
+    0 0 30px rgba(224, 148, 212, 0.2);
+}
+body.br-page .title {
+  margin: 0;
+  line-height: 1;
+  transition:
+    color 0.2s,
+    text-shadow 0.2s;
+}
+body.br-page .date {
+  margin: 0;
+  transition:
+    color 0.2s,
+    text-shadow 0.2s;
+}
+/* BR2049: Las Vegas/baseline 橙色光晕点缀 */
+body.br-page footer {
+  box-shadow:
+    0 -4px 42px rgba(104, 182, 255, 0.14),
+    0 -4px 36px rgba(224, 146, 210, 0.16);
+}
+/* BR2049: 页面加载时轻微 glitch，可察觉但不抢眼 */
+body.br-page .br-load-glitch {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    rgba(226, 146, 210, 0.1) 0%,
+    transparent 45%,
+    transparent 55%,
+    rgba(104, 182, 255, 0.12) 100%
+  );
+  mix-blend-mode: screen;
+  opacity: 0;
+  animation: br-load-glitch 12s ease-out 0.5s infinite;
+}
+@keyframes br-load-glitch {
+  /* 每 8 秒一周期：前 6.5s 静默，后 1.5s 执行 glitch */
+  0%,
+  81%,
+  100% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+  83% {
+    opacity: 1;
+    transform: translateX(-3px);
+  }
+  86% {
+    opacity: 0.9;
+    transform: translateX(3px);
+  }
+  90% {
+    opacity: 0.5;
+    transform: translateX(-2px);
+  }
+}
+@media (max-width: 720px) {
+  body.br-page main {
+    padding-top: calc(1em + 56px);
+  }
+  body.br-page ul {
+    gap: 0.5em;
+  }
+  body.br-page ul li {
+    width: 100%;
+    text-align: center;
+  }
+  body.br-page ul li:first-child {
+    margin-bottom: 0;
+  }
+  body.br-page ul li:first-child .title {
+    font-size: 1.563em;
+  }
+  /* 移动端减少特效，减轻 GPU 压力 */
+  body.br-page .br-rain-drop:nth-child(2n) {
+    display: none;
+  }
+  body.br-page .br-dust-particle:nth-child(2n) {
+    display: none;
+  }
+  body.br-page .br-flicker {
+    animation-duration: 8s;
+  }
+}
+
+/* ========== 点线网络 漂浮浮动 文章页 (body.mesh-page) ========== */
+body.mesh-page {
+  background: #03060c !important;
+  background-image: none !important;
+  min-height: 100vh;
+  --chrome-bg: rgba(14, 10, 16, 0.72);
+  --chrome-border: rgba(255, 106, 132, 0.14);
+  --chrome-link: rgba(214, 243, 255, 0.92);
+  --chrome-link-hover: rgba(255, 168, 188, 0.98);
+  --chrome-active: rgba(132, 214, 255, 0.92);
+  --chrome-text-muted: rgba(178, 220, 238, 0.7);
+}
+/* 终端式滚动条 */
+body.mesh-page {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 106, 132, 0.48) transparent;
+}
+body.mesh-page::-webkit-scrollbar {
+  width: 6px;
+}
+body.mesh-page::-webkit-scrollbar-track {
+  background: transparent;
+}
+body.mesh-page::-webkit-scrollbar-thumb {
+  background: rgba(255, 106, 132, 0.34);
+  border-radius: 3px;
+}
+body.mesh-page::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 120, 152, 0.58);
+  box-shadow: 0 0 8px rgba(255, 106, 132, 0.4);
+}
+body.mesh-page::-webkit-scrollbar-thumb {
+  box-shadow: 0 0 6px rgba(255, 106, 132, 0.26);
+}
+.mesh-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.mesh-glow {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    140deg,
+    #05060b 0%,
+    #0b1322 24%,
+    #0f1d2f 46%,
+    #221018 72%,
+    #13070f 100%
+  );
+}
+.mesh-glow-shift {
+  animation: mesh-glow-shift 25s ease-in-out infinite;
+}
+@keyframes mesh-glow-shift {
+  0%,
+  100% {
+    filter: brightness(1) saturate(1);
+  }
+  33% {
+    filter: brightness(1.02) saturate(1.1) hue-rotate(5deg);
+  }
+  66% {
+    filter: brightness(0.99) saturate(1.05) hue-rotate(-3deg);
+  }
+}
+/* 柔和光晕：中心径向青蓝光 */
+.mesh-haze {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    ellipse 92% 72% at 50% 38%,
+    rgba(122, 212, 252, 0.08) 0%,
+    rgba(255, 90, 120, 0.06) 34%,
+    transparent 65%
+  );
+  animation: mesh-haze-drift 18s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+@keyframes mesh-haze-drift {
+  0% {
+    opacity: 0.8;
+    transform: translate(2%, 1%) scale(1.02);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-2%, -1%) scale(0.98);
+  }
+}
+/* 边缘暗角 */
+.mesh-vignette {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    ellipse 75% 75% at 50% 50%,
+    transparent 45%,
+    rgba(0, 0, 0, 0.25) 100%
+  );
+  pointer-events: none;
+}
+.mesh-stripe {
+  position: absolute;
+  inset: 0;
+  opacity: 0.06;
+  background: repeating-linear-gradient(
+    90deg,
+    transparent,
+    transparent 1px,
+    rgba(196, 232, 255, 0.28) 1px,
+    rgba(196, 232, 255, 0.28) 2px
+  );
+}
+/* 噪点层 */
+.mesh-noise {
+  position: absolute;
+  inset: 0;
+  opacity: 0.04;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  pointer-events: none;
+}
+/* 六边形网格 */
+.mesh-hex-grid {
+  position: absolute;
+  inset: 0;
+  opacity: 0.11;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='49'%3E%3Cpath d='M28 0L56 14.5v29L28 49L0 43.5v-29z' fill='none' stroke='rgba(255,112,140,0.42)' stroke-width='0.5'/%3E%3Cpath d='M0 14.5L28 29v14.5' fill='none' stroke='rgba(162,220,255,0.32)' stroke-width='0.4'/%3E%3C/svg%3E");
+  background-size: 56px 49px;
+  pointer-events: none;
+}
+/* 思维流粒子 */
+.mesh-thought-particles {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.mesh-particle {
+  position: absolute;
+  left: var(--x, 50%);
+  top: var(--y, 50%);
+  width: 4px;
+  height: 4px;
+  background: rgba(255, 138, 158, 0.6);
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(255, 110, 136, 0.36);
+  animation: mesh-particle-float var(--d, 4s) ease-in-out infinite;
+  animation-delay: calc(var(--i, 0) * -0.3s);
+}
+.mesh-particle:nth-child(3n) {
+  width: 6px;
+  height: 6px;
+  background: rgba(168, 224, 255, 0.56);
+  box-shadow: 0 0 12px rgba(124, 206, 255, 0.34);
+}
+.mesh-particle:nth-child(5n) {
+  width: 2px;
+  height: 2px;
+  background: rgba(182, 255, 218, 0.62);
+  box-shadow: 0 0 8px rgba(182, 255, 218, 0.28);
+}
+@keyframes mesh-particle-float {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+    opacity: 0.5;
+  }
+  25% {
+    transform: translate(8px, -12px) scale(1.2);
+    opacity: 0.8;
+  }
+  50% {
+    transform: translate(-6px, 6px) scale(0.9);
+    opacity: 0.6;
+  }
+  75% {
+    transform: translate(4px, 8px) scale(1.1);
+    opacity: 0.7;
+  }
+}
+.mesh-network {
+  position: absolute;
+  inset: -8%;
+  width: 116%;
+  height: 116%;
+  opacity: 1;
+  filter: brightness(1.28) saturate(1.08);
+  animation: mesh-drift 25s ease-in-out infinite;
+}
+@keyframes mesh-drift {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  25% {
+    transform: translate(1.2%, 0.6%) scale(1.008);
+  }
+  50% {
+    transform: translate(-0.8%, 1%) scale(0.995);
+  }
+  75% {
+    transform: translate(0.5%, -0.8%) scale(1.005);
+  }
+}
+.mesh-network .mesh-dots circle {
+  transform-origin: center;
+  animation:
+    mesh-dot-float 8s ease-in-out infinite,
+    mesh-dot-breathe 5s ease-in-out infinite;
+}
+.mesh-network .mesh-dots circle:nth-child(odd) {
+  animation-delay: -3s;
+}
+.mesh-network .mesh-dots circle:nth-child(3n) {
+  animation-delay: -5s;
+}
+.mesh-network .mesh-dots circle:nth-child(5n) {
+  animation-duration: 10s;
+}
+.mesh-network .mesh-dots circle:nth-child(4n) {
+  animation-delay: -1s;
+}
+.mesh-network .mesh-lines line {
+  stroke-dasharray: 6 12;
+  animation: mesh-line-pulse 4s linear infinite;
+}
+.mesh-network .mesh-lines line:nth-child(odd) {
+  animation-delay: -2s;
+}
+@keyframes mesh-line-pulse {
+  to {
+    stroke-dashoffset: -18;
+  }
+}
+@keyframes mesh-dot-float {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  33% {
+    transform: translate(1.5px, -2px);
+  }
+  66% {
+    transform: translate(-1px, 1.5px);
+  }
+}
+@keyframes mesh-dot-breathe {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.75;
+  }
+}
+body.mesh-page .mesh-content,
+body.mesh-page footer {
+  position: relative;
+  z-index: 10;
+}
+/* GPU 风格：散热鳍片 + PCB 底 + 金属边框 */
+body.mesh-page .mesh-content .prose {
+  position: relative;
+  background:
+    repeating-linear-gradient(
+      90deg,
+      transparent 0,
+      transparent 19px,
+      rgba(50, 90, 70, 0.03) 19px,
+      rgba(50, 90, 70, 0.03) 20px
+    ),
+    repeating-linear-gradient(
+      180deg,
+      transparent 0,
+      transparent 2px,
+      rgba(55, 65, 80, 0.14) 2px,
+      rgba(55, 65, 80, 0.14) 4px
+    ),
+    linear-gradient(135deg, rgba(14, 18, 24, 0.97) 0%, rgba(10, 14, 20, 0.95) 50%, rgba(6, 10, 16, 0.97) 100%),
+    radial-gradient(
+      ellipse 80% 50% at 50% 0%,
+      rgba(70, 110, 150, 0.06),
+      transparent 60%
+    );
+  backdrop-filter: blur(16px) saturate(1.1);
+  -webkit-backdrop-filter: blur(16px) saturate(1.1);
+  border-radius: 8px;
+  padding: 2em;
+  border: 1px solid rgba(140, 155, 175, 0.35);
+  box-shadow:
+    0 0 60px rgba(0, 0, 0, 0.5),
+    inset 0 1px 0 rgba(200, 210, 225, 0.12),
+    inset 0 -1px 0 rgba(40, 50, 65, 0.4),
+    inset 0 0 0 1px rgba(100, 120, 150, 0.15);
+  animation: mesh-breathe 6s ease-in-out infinite;
+}
+/* 呼吸式微动 */
+@keyframes mesh-breathe {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.98;
+    transform: scale(1.001);
+  }
+}
+/* 加载扫描线 */
+.mesh-load-scan {
+  position: fixed;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(100, 255, 180, 0.6),
+    rgba(120, 180, 255, 0.6),
+    transparent
+  );
+  box-shadow: 0 0 12px rgba(100, 255, 180, 0.5);
+  animation: mesh-scan 0.8s ease-out forwards;
+  pointer-events: none;
+  z-index: 20;
+}
+@keyframes mesh-scan {
+  0% {
+    top: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 100vh;
+    opacity: 0.2;
+  }
+}
+/* 文章区域渐显 */
+.mesh-article {
+  animation: mesh-article-in 0.6s ease-out forwards;
+  opacity: 0;
+}
+@keyframes mesh-article-in {
+  to {
+    opacity: 1;
+  }
+}
+.mesh-title {
+  animation: mesh-title-in 0.5s ease-out 0.15s forwards;
+  opacity: 0;
+}
+@keyframes mesh-title-in {
+  to {
+    opacity: 1;
+  }
+}
+.mesh-prose-body {
+  animation: mesh-prose-in 0.6s ease-out 0.35s forwards;
+  opacity: 0;
+}
+@keyframes mesh-prose-in {
+  to {
+    opacity: 1;
+  }
+}
+/* 标题/正文区光晕 */
+body.mesh-page .mesh-content .prose .mesh-title {
+  text-shadow:
+    0 0 20px rgba(132, 214, 255, 0.18),
+    0 0 36px rgba(160, 224, 255, 0.16);
+}
+body.mesh-page .mesh-content .prose .mesh-prose-body {
+  box-shadow: inset 0 0 80px rgba(124, 206, 255, 0.035);
+}
+/* GPU 金属边框：铝银质感 */
+body.mesh-page .mesh-content .prose::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(
+    135deg,
+    rgba(200, 210, 225, 0.4) 0%,
+    rgba(140, 155, 180, 0.25) 25%,
+    rgba(100, 115, 140, 0.2) 50%,
+    rgba(140, 155, 180, 0.28) 75%,
+    rgba(180, 195, 215, 0.35) 100%
+  );
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+body.mesh-page .mesh-content .prose:hover::before {
+  opacity: 1.3;
+}
+/* 链接 hover 光晕/脉冲 */
+body.mesh-page .mesh-content .prose a {
+  text-decoration: none;
+  padding: 0 2px;
+  border-radius: 2px;
+  transition:
+    box-shadow 0.25s ease,
+    text-shadow 0.25s ease,
+    color 0.25s ease;
+}
+body.mesh-page .mesh-content .prose a:hover {
+  box-shadow:
+    0 0 12px rgba(140, 210, 242, 0.4),
+    0 0 24px rgba(132, 214, 255, 0.28);
+  text-shadow:
+    0 0 10px rgba(162, 222, 248, 0.56),
+    0 0 20px rgba(138, 214, 255, 0.3);
+  color: rgba(190, 236, 255, 0.98);
+}
+/* 代码块：输出窗口风格 */
+body.mesh-page .mesh-content .prose code {
+  background: rgba(10, 18, 30, 0.72);
+  border: 1px solid rgba(126, 192, 224, 0.26);
+  color: rgba(196, 232, 248, 0.92);
+}
+body.mesh-page .mesh-content .prose pre {
+  background: rgba(8, 12, 22, 0.88);
+  border: 1px solid rgba(142, 218, 255, 0.2);
+  box-shadow:
+    inset 0 0 34px rgba(14, 34, 54, 0.44),
+    0 0 20px rgba(132, 214, 255, 0.08),
+    0 0 0 1px rgba(146, 214, 244, 0.14);
+  border-radius: 6px;
+  overflow: hidden;
+}
+body.mesh-page .mesh-content .prose pre code {
+  background: transparent;
+  border: none;
+  color: inherit;
+}
+/* 引用块：输出窗口风格 + 命令提示符 */
+body.mesh-page .mesh-content .prose blockquote {
+  position: relative;
+  background: rgba(12, 18, 30, 0.64);
+  border: 1px solid rgba(126, 192, 224, 0.22);
+  border-left: 3px solid rgba(146, 214, 244, 0.56);
+  padding: 1em 1.25em 1em 2.5em;
+  border-radius: 4px;
+  box-shadow:
+    0 0 16px rgba(136, 206, 238, 0.1),
+    inset 0 0 20px rgba(8, 28, 44, 0.26);
+}
+body.mesh-page .mesh-content .prose blockquote::before {
+  content: ">";
+  position: absolute;
+  left: 0.6em;
+  top: 1em;
+  color: rgba(156, 220, 246, 0.8);
+  font-family: monospace;
+  font-weight: bold;
+}
+/* 代码块命令提示符 */
+body.mesh-page .mesh-content .prose pre {
+  position: relative;
+  padding-left: 2.5em;
+  padding-top: 2.2em;
+}
+body.mesh-page .mesh-content .prose pre::before {
+  content: "●  ●  ●   runtime";
+  position: absolute;
+  left: 1em;
+  top: 0.9em;
+  color: rgba(168, 226, 248, 0.72);
+  font-family: monospace;
+  font-size: 0.72em;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  text-shadow: 0 0 8px rgba(124, 206, 246, 0.28);
+}
+body.mesh-page .mesh-content .prose pre::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    110deg,
+    rgba(132, 214, 255, 0) 0%,
+    rgba(132, 214, 255, 0.18) 48%,
+    rgba(132, 214, 255, 0) 100%
+  );
+  transform: translateX(-130%);
+  transition: transform 0.5s ease;
+}
+body.mesh-page .mesh-content .prose pre:hover::after {
+  transform: translateX(130%);
+}
+body.mesh-page .mesh-content .prose blockquote::after {
+  content: "reference";
+  position: absolute;
+  right: 1em;
+  top: 0.9em;
+  color: rgba(172, 230, 252, 0.64);
+  font-family: ui-monospace, monospace;
+  font-size: 0.66em;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+body.mesh-page header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 11;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+}
+body.mesh-page .mesh-content {
+  padding-top: calc(3em + 56px);
+}
+@media (max-width: 720px) {
+  body.mesh-page .mesh-content {
+    padding-top: calc(1em + 56px);
+  }
+}
+/* ========== 新增 AI 风格特效 ========== */
+/* 复古块状光标（正文末尾） */
+.mesh-block-cursor {
+  display: inline-block;
+  width: 0.6em;
+  height: 1.1em;
+  background: rgba(150, 226, 255, 0.94);
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: mesh-block-cursor-blink 1s step-end infinite;
+}
+@keyframes mesh-block-cursor-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+/* 阅读进度条（紫色，更醒目） */
+.mesh-read-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 4px;
+  width: calc(var(--read-progress, 0) * 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(132, 214, 255, 0.92),
+    rgba(94, 196, 255, 0.94)
+  );
+  box-shadow: 0 0 14px rgba(104, 204, 255, 0.45);
+  z-index: 100;
+  transition: width 0.08s ease-out;
+}
+/* 鼠标跟随光斑 */
+.mesh-mouse-glow {
+  position: fixed;
+  width: 300px;
+  height: 300px;
+  left: calc(var(--mouse-x, -9999px) - 150px);
+  top: calc(var(--mouse-y, -9999px) - 150px);
+  background: radial-gradient(
+    circle,
+    rgba(124, 210, 248, 0.1) 0%,
+    transparent 70%
+  );
+  pointer-events: none;
+  z-index: 1;
+  transition: opacity 0.3s;
+}
+body.mesh-page:not(:hover) .mesh-mouse-glow {
+  opacity: 0.5;
+}
+/* 深度模糊：上下边缘虚化 */
+.mesh-depth-blur {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 15;
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 15%,
+    black 85%,
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 15%,
+    black 85%,
+    transparent 100%
+  );
+  backdrop-filter: blur(0);
+  transition: backdrop-filter 0.3s;
+}
+.mesh-depth-blur::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  mask-image: linear-gradient(
+    to bottom,
+    black 0%,
+    transparent 12%,
+    transparent 88%,
+    black 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    black 0%,
+    transparent 12%,
+    transparent 88%,
+    black 100%
+  );
+}
+/* 思考中三连点 */
+.mesh-thinking-dots {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  display: flex;
+  gap: 6px;
+  z-index: 50;
+  opacity: 1;
+  animation: mesh-thinking-fade 0.8s ease-out 1.2s forwards;
+}
+.mesh-thinking-dots span {
+  width: 6px;
+  height: 6px;
+  background: rgba(150, 226, 255, 0.82);
+  border-radius: 50%;
+  animation: mesh-dot-pulse 0.8s ease-in-out infinite;
+}
+.mesh-thinking-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.mesh-thinking-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@keyframes mesh-thinking-fade {
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+@keyframes mesh-dot-pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+/* 故障效果：链接/代码块 hover 极轻微 RGB 分离 */
+body.mesh-page .mesh-content .prose a:hover {
+  animation: mesh-glitch-link 0.4s ease-out;
+}
+body.mesh-page .mesh-content .prose pre:hover {
+  animation: mesh-glitch-pre 0.35s ease-out;
+}
+@keyframes mesh-glitch-link {
+  0%,
+  100% {
+    text-shadow:
+      0 0 10px rgba(100, 255, 220, 0.6),
+      0 0 20px rgba(120, 180, 255, 0.3);
+  }
+  20% {
+    text-shadow:
+      -0.5px 0 rgba(88, 176, 236, 0.4),
+      0.5px 0 rgba(100, 255, 220, 0.4);
+  }
+  40% {
+    text-shadow:
+      0.5px 0 rgba(88, 176, 236, 0.3),
+      -0.5px 0 rgba(100, 255, 220, 0.3);
+  }
+  60% {
+    text-shadow:
+      0 0 10px rgba(100, 255, 220, 0.6),
+      0 0 20px rgba(120, 180, 255, 0.3);
+  }
+}
+@keyframes mesh-glitch-pre {
+  0%,
+  100% {
+    box-shadow:
+      inset 0 0 30px rgba(0, 40, 80, 0.3),
+      0 0 20px rgba(100, 220, 255, 0.06);
+  }
+  30% {
+    box-shadow:
+      inset 0 0 30px rgba(0, 40, 80, 0.3),
+      -1px 0 rgba(84, 170, 230, 0.15),
+      1px 0 rgba(80, 255, 200, 0.15);
+  }
+}
+/* 悬浮预览卡 */
+body.mesh-page .mesh-content .prose a.mesh-link-preview {
+  position: relative;
+}
+body.mesh-page .mesh-content .prose a.mesh-link-preview::after {
+  content: attr(data-preview);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px);
+  padding: 6px 12px;
+  background: rgba(6, 14, 24, 0.95);
+  border: 1px solid rgba(100, 255, 180, 0.3);
+  border-radius: 6px;
+  font-size: 0.75em;
+  color: rgba(180, 255, 220, 0.9);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.2s,
+    transform 0.2s;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+}
+body.mesh-page .mesh-content .prose a.mesh-link-preview:hover::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(-12px);
+}
+/* 时间戳日志风格 */
+.mesh-log-date {
+  font-family: ui-monospace, monospace;
+  font-size: 0.85em;
+}
+.mesh-log-label {
+  color: rgba(100, 255, 180, 0.7);
+  margin-right: 0.25em;
+}
+
+/* ========== AI 时代氛围增强 ========== */
+/* 元信息终端化 */
+.mesh-meta-terminal {
+  font-family: ui-monospace, monospace;
+  font-size: 0.78em;
+  color: rgba(180, 224, 246, 0.84);
+  margin-bottom: 0.62em;
+  letter-spacing: 0.04em;
+}
+.mesh-system-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-bottom: 0.55rem;
+}
+.mesh-system-chip {
+  font-family: ui-monospace, monospace;
+  font-size: 0.68em;
+  color: rgba(186, 232, 252, 0.94);
+  background: rgba(8, 18, 30, 0.82);
+  border: 1px solid rgba(126, 192, 224, 0.34);
+  border-radius: 5px;
+  padding: 0.16rem 0.5rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+/* 提示词式标题 */
+.mesh-prompt-line {
+  font-size: 0.86em;
+  color: rgba(154, 218, 246, 0.8);
+  margin-bottom: 0.4em;
+}
+.mesh-prompt-topic {
+  color: rgba(188, 232, 252, 0.88);
+  font-style: normal;
+}
+/* 对话气泡 / Response 区域 */
+.mesh-response-wrap {
+  position: relative;
+  border: 1px solid rgba(152, 222, 255, 0.2);
+  background: linear-gradient(
+    180deg,
+    rgba(10, 16, 28, 0.54),
+    rgba(16, 8, 16, 0.4)
+  );
+  border-radius: 8px;
+  padding: 0.75rem 0.9rem 0.45rem;
+  box-shadow:
+    inset 0 0 0 1px rgba(138, 206, 238, 0.12),
+    0 8px 26px rgba(0, 0, 0, 0.32);
+}
+.mesh-response-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6em;
+  margin-bottom: 0.8em;
+}
+.mesh-response-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: linear-gradient(
+    145deg,
+    rgba(118, 204, 244, 0.62),
+    rgba(132, 214, 255, 0.42)
+  );
+  border: 1px solid rgba(136, 208, 242, 0.42);
+  box-shadow:
+    0 0 0 2px rgba(10, 18, 28, 0.64),
+    0 0 14px rgba(124, 206, 246, 0.32);
+}
+.mesh-response-label {
+  font-size: 0.8em;
+  color: rgba(170, 226, 250, 0.92);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.mesh-response-meta {
+  margin-left: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.85rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.68em;
+  color: rgba(188, 226, 248, 0.76);
+}
+.mesh-response-meta strong {
+  color: rgba(194, 236, 252, 0.96);
+  font-weight: 600;
+}
+/* 字数/Token 角落 */
+.mesh-stats-corner {
+  position: absolute;
+  top: 0.5em;
+  right: 1em;
+  font-family: ui-monospace, monospace;
+  font-size: 0.7em;
+  color: rgba(176, 218, 240, 0.58);
+}
+.mesh-model-id {
+  color: rgba(158, 218, 246, 0.82);
+}
+/* Regenerate 按钮 */
+.mesh-regenerate {
+  display: block;
+  margin: 2em auto 0;
+  padding: 0.5em 1.2em;
+  font-size: 0.85em;
+  font-family: ui-monospace, monospace;
+  color: rgba(188, 234, 252, 0.94);
+  background: rgba(10, 18, 28, 0.68);
+  border: 1px solid rgba(126, 192, 224, 0.34);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.mesh-regenerate:hover:not(:disabled) {
+  background: rgba(126, 192, 224, 0.12);
+  box-shadow: 0 0 14px rgba(124, 206, 246, 0.24);
+}
+.mesh-regenerate:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.mesh-regenerating {
+  pointer-events: none;
+}
+.mesh-regenerate-flash {
+  animation: mesh-flash 0.6s ease-out;
+}
+@keyframes mesh-flash {
+  0% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* 首字放大 */
+body.mesh-page
+  .mesh-content
+  .prose
+  .mesh-prose-body
+  > p:first-of-type::first-letter {
+  float: left;
+  font-size: 3.2em;
+  line-height: 0.9;
+  margin-right: 0.1em;
+  color: rgba(160, 226, 252, 0.94);
+  text-shadow: 0 0 22px rgba(124, 206, 246, 0.3);
+}
+/* 段落滚动浮现 */
+.mesh-prose-body p,
+.mesh-prose-body h2,
+.mesh-prose-body h3,
+.mesh-prose-body pre,
+.mesh-prose-body blockquote,
+.mesh-prose-body ul,
+.mesh-prose-body ol {
+  opacity: 0;
+  transform: translateY(12px);
+  transition:
+    opacity 0.5s ease,
+    transform 0.5s ease;
+}
+.mesh-prose-body .mesh-para-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ========== 相关文章 + 返回博客 ========== */
+.mesh-related {
+  width: 720px;
+  max-width: calc(100% - 2em);
+  margin: 2.5rem auto 1.5rem;
+}
+.mesh-related-title {
+  font-size: 0.9em;
+  color: rgba(172, 228, 252, 0.88);
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+.mesh-related-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+@media (max-width: 780px) {
+  .mesh-related-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.mesh-related-card {
+  display: block;
+  background: rgba(12, 10, 20, 0.7);
+  border: 1px solid rgba(126, 192, 224, 0.24);
+  border-radius: 6px;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+}
+.mesh-related-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 0 24px rgba(124, 206, 246, 0.2);
+  border-color: rgba(172, 228, 255, 0.34);
+}
+.mesh-related-img {
+  aspect-ratio: 16/9;
+  overflow: hidden;
+}
+.mesh-related-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.mesh-related-placeholder {
+  aspect-ratio: 16/9;
+  background: linear-gradient(
+    135deg,
+    rgba(22, 8, 16, 0.9),
+    rgba(14, 24, 42, 0.8)
+  );
+  border-bottom: 1px solid rgba(126, 192, 224, 0.22);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.mesh-related-placeholder span {
+  font-size: 2em;
+  color: rgba(168, 222, 246, 0.62);
+  font-weight: 600;
+}
+.mesh-related-card-title {
+  padding: 0.75rem 1rem 0.25rem;
+  font-size: 0.95em;
+  margin: 0;
+  color: rgba(220, 245, 255, 0.95);
+}
+.mesh-related-card-date {
+  padding: 0 1rem 0.75rem;
+  font-size: 0.75em;
+  color: rgba(176, 216, 238, 0.66);
+  margin: 0;
+}
+.mesh-back-to-blog {
+  width: 720px;
+  max-width: calc(100% - 2em);
+  margin: 0 auto 2.5rem;
+}
+.mesh-back-to-blog a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+  color: rgba(188, 226, 248, 0.84);
+  text-decoration: none;
+  padding: 0.5rem 0;
+  transition:
+    color 0.2s ease,
+    text-shadow 0.2s ease;
+}
+.mesh-back-to-blog a:hover {
+  color: rgba(188, 236, 255, 0.98);
+  text-shadow: 0 0 12px rgba(124, 206, 246, 0.3);
+}
+.mesh-back-prompt {
+  color: rgba(154, 218, 246, 0.78);
+}
+
+/* 回到顶部按钮：芯片电路图风格 */
+.mesh-back-to-top {
+  position: fixed;
+  /* 文章宽 720px 居中时，右半边空隙中心 = (100vw - 720px)/2 + 720px + (100vw - 720px)/4 = 75vw + 180px */
+  left: calc(75vw + 180px);
+  top: 68%;
+  transform: translate(-50%, calc(-50% + 8px));
+  z-index: 50;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid rgba(126, 192, 224, 0.44);
+  border-radius: 10px;
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='rgba(80,160,220,0.5)'/%3E%3Cstop offset='1' stop-color='rgba(100,180,240,0.35)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='6' width='32' height='32' rx='2' fill='none' stroke='url(%23g)' stroke-width='0.8'/%3E%3Cpath d='M6 8 Q6 6 8 6' fill='none' stroke='url(%23g)' stroke-width='0.8'/%3E%3Crect x='18' y='18' width='8' height='8' fill='rgba(124,206,246,0.08)' stroke='rgba(100,180,220,0.5)' stroke-width='0.6'/%3E%3Crect x='10' y='4' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='17' y='4' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='24' y='4' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='31' y='4' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='10' y='38' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='17' y='38' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='24' y='38' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='31' y='38' width='3' height='2' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='4' y='10' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='4' y='17' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='4' y='24' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='4' y='31' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='38' y='10' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='38' y='17' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='38' y='24' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Crect x='38' y='31' width='2' height='3' fill='rgba(100,180,220,0.5)'/%3E%3Cline x1='12' y1='6' x2='12' y2='18' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='19' y1='6' x2='19' y2='18' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='26' y1='6' x2='26' y2='18' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='33' y1='6' x2='33' y2='18' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='6' y1='12' x2='18' y2='12' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='6' y1='19' x2='18' y2='19' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='26' y1='12' x2='38' y2='12' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3Cline x1='26' y1='19' x2='38' y2='19' stroke='rgba(100,180,220,0.35)' stroke-width='0.5'/%3E%3C/svg%3E"),
+    linear-gradient(180deg, rgba(12, 22, 36, 0.95), rgba(8, 16, 28, 0.98));
+  background-size: 100% 100%, 100% 100%;
+  background-position: 0 0, 0 0;
+  color: rgba(190, 236, 255, 0.95);
+  font-size: 1.35em;
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity 0.25s ease,
+    transform 0.25s ease,
+    border-color 0.2s,
+    box-shadow 0.2s;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 0 20px rgba(124, 206, 246, 0.18);
+}
+.mesh-back-to-top.visible {
+  opacity: 1;
+  transform: translate(-50%, -50%);
+}
+.mesh-back-to-top:hover {
+  border-color: rgba(162, 222, 248, 0.72);
+  box-shadow: 0 0 24px rgba(124, 206, 246, 0.36);
+}
+@media (max-width: 840px) {
+  /* 视口较窄时右侧空隙太小，改回贴右 */
+  .mesh-back-to-top {
+    left: auto;
+    right: 1rem;
+    transform: translateY(calc(-50% + 8px));
+  }
+  .mesh-back-to-top.visible {
+    transform: translateY(-50%);
+  }
+}