@anglefeint/astro-theme 0.1.3 → 0.1.4

package/public/styles/theme-ai.css

@@ -0,0 +1,1112 @@
+/* AI theme styles extracted from global.css */
+body.ai-page header .ai-scanlines,
+body.ai-page footer .ai-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.ai-page header .ai-scanlines::after,
+body.ai-page footer .ai-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.ai-page header:hover .ai-scanlines,
+body.ai-page footer:hover .ai-scanlines {
+  opacity: 0;
+}
+/* ========== 点线网络 漂浮浮动 文章页 (body.ai-page) ========== */
+body.ai-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.ai-page {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 106, 132, 0.48) transparent;
+}
+body.ai-page::-webkit-scrollbar {
+  width: 6px;
+}
+body.ai-page::-webkit-scrollbar-track {
+  background: transparent;
+}
+body.ai-page::-webkit-scrollbar-thumb {
+  background: rgba(255, 106, 132, 0.34);
+  border-radius: 3px;
+}
+body.ai-page::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 120, 152, 0.58);
+  box-shadow: 0 0 8px rgba(255, 106, 132, 0.4);
+}
+body.ai-page::-webkit-scrollbar-thumb {
+  box-shadow: 0 0 6px rgba(255, 106, 132, 0.26);
+}
+.ai-bg {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.ai-glow {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    140deg,
+    #05060b 0%,
+    #0b1322 24%,
+    #0f1d2f 46%,
+    #221018 72%,
+    #13070f 100%
+  );
+}
+.ai-glow-shift {
+  animation: ai-glow-shift 25s ease-in-out infinite;
+}
+@keyframes ai-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);
+  }
+}
+/* 柔和光晕：中心径向青蓝光 */
+.ai-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: ai-haze-drift 18s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+@keyframes ai-haze-drift {
+  0% {
+    opacity: 0.8;
+    transform: translate(2%, 1%) scale(1.02);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-2%, -1%) scale(0.98);
+  }
+}
+/* 边缘暗角 */
+.ai-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;
+}
+.ai-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
+  );
+}
+/* 噪点层 */
+.ai-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;
+}
+/* 六边形网格 */
+.ai-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;
+}
+/* 思维流粒子 */
+.ai-thought-particles {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.ai-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: ai-particle-float var(--d, 4s) ease-in-out infinite;
+  animation-delay: calc(var(--i, 0) * -0.3s);
+}
+.ai-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);
+}
+.ai-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 ai-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;
+  }
+}
+.ai-network {
+  position: absolute;
+  inset: -8%;
+  width: 116%;
+  height: 116%;
+  opacity: 1;
+  filter: brightness(1.28) saturate(1.08);
+  animation: ai-drift 25s ease-in-out infinite;
+}
+@keyframes ai-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);
+  }
+}
+.ai-network .ai-dots circle {
+  transform-origin: center;
+  animation:
+    ai-dot-float 8s ease-in-out infinite,
+    ai-dot-breathe 5s ease-in-out infinite;
+}
+.ai-network .ai-dots circle:nth-child(odd) {
+  animation-delay: -3s;
+}
+.ai-network .ai-dots circle:nth-child(3n) {
+  animation-delay: -5s;
+}
+.ai-network .ai-dots circle:nth-child(5n) {
+  animation-duration: 10s;
+}
+.ai-network .ai-dots circle:nth-child(4n) {
+  animation-delay: -1s;
+}
+.ai-network .ai-lines line {
+  stroke-dasharray: 6 12;
+  animation: ai-line-pulse 4s linear infinite;
+}
+.ai-network .ai-lines line:nth-child(odd) {
+  animation-delay: -2s;
+}
+@keyframes ai-line-pulse {
+  to {
+    stroke-dashoffset: -18;
+  }
+}
+@keyframes ai-dot-float {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  33% {
+    transform: translate(1.5px, -2px);
+  }
+  66% {
+    transform: translate(-1px, 1.5px);
+  }
+}
+@keyframes ai-dot-breathe {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.75;
+  }
+}
+body.ai-page .ai-content,
+body.ai-page footer {
+  position: relative;
+  z-index: 10;
+}
+/* GPU 风格：散热鳍片 + PCB 底 + 金属边框 */
+body.ai-page .ai-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: ai-breathe 6s ease-in-out infinite;
+}
+/* 呼吸式微动 */
+@keyframes ai-breathe {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.98;
+    transform: scale(1.001);
+  }
+}
+/* 加载扫描线 */
+.ai-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: ai-scan 0.8s ease-out forwards;
+  pointer-events: none;
+  z-index: 20;
+}
+@keyframes ai-scan {
+  0% {
+    top: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 100vh;
+    opacity: 0.2;
+  }
+}
+/* 文章区域渐显 */
+.ai-article {
+  animation: ai-article-in 0.6s ease-out forwards;
+  opacity: 0;
+}
+@keyframes ai-article-in {
+  to {
+    opacity: 1;
+  }
+}
+.ai-title {
+  animation: ai-title-in 0.5s ease-out 0.15s forwards;
+  opacity: 0;
+}
+@keyframes ai-title-in {
+  to {
+    opacity: 1;
+  }
+}
+.ai-prose-body {
+  animation: ai-prose-in 0.6s ease-out 0.35s forwards;
+  opacity: 0;
+}
+@keyframes ai-prose-in {
+  to {
+    opacity: 1;
+  }
+}
+/* 标题/正文区光晕 */
+body.ai-page .ai-content .prose .ai-title {
+  text-shadow:
+    0 0 20px rgba(132, 214, 255, 0.18),
+    0 0 36px rgba(160, 224, 255, 0.16);
+}
+body.ai-page .ai-content .prose .ai-prose-body {
+  box-shadow: inset 0 0 80px rgba(124, 206, 255, 0.035);
+}
+/* GPU 金属边框：铝银质感 */
+body.ai-page .ai-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.ai-page .ai-content .prose:hover::before {
+  opacity: 1.3;
+}
+/* 链接 hover 光晕/脉冲 */
+body.ai-page .ai-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.ai-page .ai-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.ai-page .ai-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.ai-page .ai-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.ai-page .ai-content .prose pre code {
+  background: transparent;
+  border: none;
+  color: inherit;
+}
+/* 引用块：输出窗口风格 + 命令提示符 */
+body.ai-page .ai-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.ai-page .ai-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.ai-page .ai-content .prose pre {
+  position: relative;
+  padding-left: 2.5em;
+  padding-top: 2.2em;
+}
+body.ai-page .ai-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.ai-page .ai-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.ai-page .ai-content .prose pre:hover::after {
+  transform: translateX(130%);
+}
+body.ai-page .ai-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.ai-page header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 11;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+}
+body.ai-page .ai-content {
+  padding-top: calc(3em + 56px);
+}
+@media (max-width: 720px) {
+  body.ai-page .ai-content {
+    padding-top: calc(1em + 56px);
+  }
+}
+/* ========== 新增 AI 风格特效 ========== */
+/* 复古块状光标（正文末尾） */
+.ai-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: ai-block-cursor-blink 1s step-end infinite;
+}
+@keyframes ai-block-cursor-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+/* 阅读进度条（紫色，更醒目） */
+.ai-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;
+}
+/* 鼠标跟随光斑 */
+.ai-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.ai-page:not(:hover) .ai-mouse-glow {
+  opacity: 0.5;
+}
+/* 深度模糊：上下边缘虚化 */
+.ai-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;
+}
+.ai-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%
+  );
+}
+/* 思考中三连点 */
+.ai-thinking-dots {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  display: flex;
+  gap: 6px;
+  z-index: 50;
+  opacity: 1;
+  animation: ai-thinking-fade 0.8s ease-out 1.2s forwards;
+}
+.ai-thinking-dots span {
+  width: 6px;
+  height: 6px;
+  background: rgba(150, 226, 255, 0.82);
+  border-radius: 50%;
+  animation: ai-dot-pulse 0.8s ease-in-out infinite;
+}
+.ai-thinking-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.ai-thinking-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@keyframes ai-thinking-fade {
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+@keyframes ai-dot-pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+/* 故障效果：链接/代码块 hover 极轻微 RGB 分离 */
+body.ai-page .ai-content .prose a:hover {
+  animation: ai-glitch-link 0.4s ease-out;
+}
+body.ai-page .ai-content .prose pre:hover {
+  animation: ai-glitch-pre 0.35s ease-out;
+}
+@keyframes ai-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 ai-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.ai-page .ai-content .prose a.ai-link-preview {
+  position: relative;
+}
+body.ai-page .ai-content .prose a.ai-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.ai-page .ai-content .prose a.ai-link-preview:hover::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(-12px);
+}
+/* 时间戳日志风格 */
+.ai-log-date {
+  font-family: ui-monospace, monospace;
+  font-size: 0.85em;
+}
+.ai-log-label {
+  color: rgba(100, 255, 180, 0.7);
+  margin-right: 0.25em;
+}
+
+/* ========== AI 时代氛围增强 ========== */
+/* 元信息终端化 */
+.ai-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;
+}
+.ai-system-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin-bottom: 0.55rem;
+}
+.ai-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;
+}
+/* 提示词式标题 */
+.ai-prompt-line {
+  font-size: 0.86em;
+  color: rgba(154, 218, 246, 0.8);
+  margin-bottom: 0.4em;
+}
+.ai-prompt-topic {
+  color: rgba(188, 232, 252, 0.88);
+  font-style: normal;
+}
+/* 对话气泡 / Response 区域 */
+.ai-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);
+}
+.ai-response-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6em;
+  margin-bottom: 0.8em;
+}
+.ai-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);
+}
+.ai-response-label {
+  font-size: 0.8em;
+  color: rgba(170, 226, 250, 0.92);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.ai-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);
+}
+.ai-response-meta strong {
+  color: rgba(194, 236, 252, 0.96);
+  font-weight: 600;
+}
+/* 字数/Token 角落 */
+.ai-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);
+}
+.ai-model-id {
+  color: rgba(158, 218, 246, 0.82);
+}
+/* Regenerate 按钮 */
+.ai-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;
+}
+.ai-regenerate:hover:not(:disabled) {
+  background: rgba(126, 192, 224, 0.12);
+  box-shadow: 0 0 14px rgba(124, 206, 246, 0.24);
+}
+.ai-regenerate:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.ai-regenerating {
+  pointer-events: none;
+}
+.ai-regenerate-flash {
+  animation: ai-flash 0.6s ease-out;
+}
+@keyframes ai-flash {
+  0% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* 首字放大 */
+body.ai-page
+  .ai-content
+  .prose
+  .ai-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);
+}
+/* 段落滚动浮现 */
+.ai-prose-body p,
+.ai-prose-body h2,
+.ai-prose-body h3,
+.ai-prose-body pre,
+.ai-prose-body blockquote,
+.ai-prose-body ul,
+.ai-prose-body ol {
+  opacity: 0;
+  transform: translateY(12px);
+  transition:
+    opacity 0.5s ease,
+    transform 0.5s ease;
+}
+.ai-prose-body .ai-para-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ========== 相关文章 + 返回博客 ========== */
+.ai-related {
+  width: 720px;
+  max-width: calc(100% - 2em);
+  margin: 2.5rem auto 1.5rem;
+}
+.ai-related-title {
+  font-size: 0.9em;
+  color: rgba(172, 228, 252, 0.88);
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+.ai-related-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+@media (max-width: 780px) {
+  .ai-related-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.ai-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;
+}
+.ai-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);
+}
+.ai-related-img {
+  aspect-ratio: 16/9;
+  overflow: hidden;
+}
+.ai-related-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ai-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;
+}
+.ai-related-placeholder span {
+  font-size: 2em;
+  color: rgba(168, 222, 246, 0.62);
+  font-weight: 600;
+}
+.ai-related-card-title {
+  padding: 0.75rem 1rem 0.25rem;
+  font-size: 0.95em;
+  margin: 0;
+  color: rgba(220, 245, 255, 0.95);
+}
+.ai-related-card-date {
+  padding: 0 1rem 0.75rem;
+  font-size: 0.75em;
+  color: rgba(176, 216, 238, 0.66);
+  margin: 0;
+}
+.ai-back-to-blog {
+  width: 720px;
+  max-width: calc(100% - 2em);
+  margin: 0 auto 2.5rem;
+}
+.ai-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;
+}
+.ai-back-to-blog a:hover {
+  color: rgba(188, 236, 255, 0.98);
+  text-shadow: 0 0 12px rgba(124, 206, 246, 0.3);
+}
+.ai-back-prompt {
+  color: rgba(154, 218, 246, 0.78);
+}
+
+/* 回到顶部按钮：芯片电路图风格 */
+.ai-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);
+}
+.ai-back-to-top.visible {
+  opacity: 1;
+  transform: translate(-50%, -50%);
+}
+.ai-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) {
+  /* 视口较窄时右侧空隙太小，改回贴右 */
+  .ai-back-to-top {
+    left: auto;
+    right: 1rem;
+    transform: translateY(calc(-50% + 8px));
+  }
+  .ai-back-to-top.visible {
+    transform: translateY(-50%);
+  }
+}