@anglefeint/astro-theme 0.1.18 → 0.1.20

package/src/styles/theme-ai.css

@@ -1,1062 +1,8 @@
-/* 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-canvas {
-  position: absolute;
-  inset: -8%;
-  width: 116%;
-  height: 116%;
-  opacity: 1;
-  pointer-events: none;
-  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);
-  }
-}
-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%);
-  }
-}
+/* AI style entrypoint: imported in stable order to avoid visual regressions. */
+@import "./ai/base.css";
+@import "./ai/background.css";
+@import "./ai/hero.css";
+@import "./ai/prose.css";
+@import "./ai/controls.css";
+@import "./ai/related.css";
+@import "./ai/responsive.css";