/* ============================================
   字体大小系统 - 统一字体大小方案
   ============================================
   基础字体: 1rem (16px)
   类型比例: 1.2 (Minor Third)
   
   字体层级:
   - h1: 2.25rem (36px) - 页面主标题
   - h2: 1.75rem (28px) - 章节标题
   - h3: 1.5rem (24px) - 小节标题
   - h4: 1.25rem (20px) - 子标题
   - 正文: 1.125rem (18px) - 主要内容
   - 小号: 0.875rem (14px) - 代码、辅助文本
   ============================================ */

/* 统一的顶部区域背景动画 - 覆盖 header 和 tabs */
.md-header,
.md-tabs {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--md-primary-fg-color) 0%, var(--md-accent-fg-color) 100%) !important;
}

/* 顶部标题栏 */
.md-header {
  font-size: 1.0rem !important;
}

/* 顶部导航标签容器 */
.md-tabs {
  font-size: 1.0rem !important;
}

/* 统一的渐变流动背景动画 - 覆盖整个顶部区域 */
.md-header::before,
.md-tabs::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(102, 126, 234, 1) 0%,
    rgba(118, 75, 162, 1) 12.5%,
    rgba(102, 126, 234, 1) 25%,
    rgba(118, 75, 162, 1) 37.5%,
    rgba(102, 126, 234, 1) 50%,
    rgba(118, 75, 162, 1) 62.5%,
    rgba(102, 126, 234, 1) 75%,
    rgba(118, 75, 162, 1) 87.5%,
    rgba(102, 126, 234, 1) 100%
  );
  background-size: 400% 100%;
  animation: gradientFlow 8s linear infinite;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}

/* 统一的光束扫过动画 */
.md-header::after,
.md-tabs::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  animation: beamSweep 4s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* 渐变流动动画 - 更明显的效果 */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* 光束扫过动画 - 更明显的效果 */
@keyframes beamSweep {
  0% {
    left: -50%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 150%;
    opacity: 0;
  }
}

/* 确保导航标签内容在动画之上 */
.md-header__inner,
.md-header__title,
.md-tabs__item,
.md-tabs__link {
  position: relative;
  z-index: 1;
}

.md-tabs__item {
  font-size: 1.0rem !important;
}

/* 顶部导航标签文字 ("首页", "快速开始", "命令行参考", "许可证") */
.md-tabs__link {
  font-size: 1.0rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  transition: all 0.3s ease !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  opacity: 1 !important;
}

.md-tabs__link:focus,
.md-tabs__link:hover {
  font-size: 1.0rem !important;
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* 激活状态的导航标签 */
.md-tabs__link--active {
  color: #ffffff !important;
  font-weight: 600 !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  border-bottom-color: #ffffff !important;
}

/* 导航标签内的文本和所有子元素 */
.md-tabs__link *,
.md-tabs__link span {
  font-size: 1.0rem !important;
  color: inherit !important;
}

/* 日间模式下的导航标签 */
[data-md-color-scheme="default"] .md-tabs__link {
  color: rgba(255, 255, 255, 0.95) !important;
}

[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

[data-md-color-scheme="default"] .md-tabs__link--active {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
}

/* 夜间模式下的导航标签 */
[data-md-color-scheme="slate"] .md-tabs__link {
  color: rgba(255, 255, 255, 0.92) !important;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
}

/* 顶部导航栏标题 */
.md-header__title {
  font-size: 1.0rem !important;
}

/* 侧边栏导航链接 */
.md-nav__link {
  font-size: 1.0rem !important;
}

/* 顶部导航栏整体 */
.md-header {
  font-size: 1.0rem !important;
}

/* 导航栏中的文本 */
.md-header__inner {
  font-size: 1.0rem !important;
}

/* 首页内容区域优化 */
.md-content {
  font-size: 1.125rem; /* 18px - 正文基础大小 */
  line-height: 1.8;
}

.md-content p {
  margin: 1.25rem 0;
}

.md-content h1 {
  font-size: 2.25rem; /* 36px - 页面主标题 */
  font-weight: 700;
  line-height: 1.2;
  margin: 2rem 0 1.5rem 0;
}

.md-content h2 {
  font-size: 1.75rem; /* 28px - 章节标题 */
  font-weight: 700;
  line-height: 1.3;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

.md-content h3 {
  font-size: 1.5rem; /* 24px - 小节标题 */
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.md-content h4 {
  font-size: 1.25rem; /* 20px - 子标题 */
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.md-content h5 {
  font-size: 1.125rem; /* 18px - 小标题 */
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.md-content h6 {
  font-size: 1rem; /* 16px - 最小标题 */
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* 代码块样式优化 - 行号和代码高度一致，移除外部边距，修复行号超出问题 */
.md-content pre,
.highlight pre {
  font-size: 1.125rem; /* 18px - 与正文一致 */
  line-height: 1.6;
  margin: 1rem 0; /* 减小上下外边距 */
}

/* 代码块容器 - 移除内边距，占满整个区域，确保整体滚动 */
.highlighttable,
.highlight {
  padding: 0 !important;
  margin: 0;
  overflow-x: auto; /* 允许水平滚动 */
  display: block; /* 确保作为块级元素 */
  width: 100%;
}

/* 代码块表格 - 占满宽度，移除内边距，确保行号和代码一起滚动 */
.highlighttable table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: auto; /* 允许表格根据内容调整 */
  min-width: 100%; /* 确保至少占满容器 */
}

.highlighttable tbody {
  padding: 0;
  margin: 0;
}

/* 表格行 - 确保没有额外的 padding/margin，高度由内容决定 */
.highlighttable tr {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1.6 !important; /* 统一行高 */
}

/* 行号单元格 - 与代码行高完全一致，移除所有内边距 */
.highlighttable .linenos,
.highlight .linenos,
.highlighttable td.linenos {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.6 !important; /* 与代码行高完全一致 */
  font-size: 1.125rem !important; /* 与代码字体大小完全一致 */
  vertical-align: top !important;
  height: auto !important;
  width: auto;
  min-width: 3rem;
  max-width: 4rem;
  white-space: nowrap;
  text-align: right;
  position: sticky;
  left: 0;
  background: inherit;
  z-index: 1;
  border: none !important;
}

/* 行号单元格内的内容 - 确保行高一致 */
.highlighttable .linenos span,
.highlight .linenos span {
  line-height: 1.6 !important;
  display: inline-block;
  height: auto;
}

/* 代码内容单元格 - 移除内边距，与行号行高完全一致 */
.highlighttable .code,
.highlight .code,
.highlighttable td.code {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.6 !important; /* 与行号行高完全一致 */
  vertical-align: top !important;
  height: auto !important;
  width: auto;
  min-width: 0;
  border: none !important;
}

/* 代码块内的代码 - 统一行高，确保与行号匹配 */
.highlighttable code,
.highlight code,
.md-content pre code,
.highlighttable pre,
.highlight pre {
  line-height: 1.6 !important; /* 统一行高 */
  margin: 0 !important;
  padding: 0 !important;
  white-space: pre;
  overflow-x: auto;
  display: block;
  font-size: 1.125rem !important; /* 确保字体大小一致 */
}

/* 代码块内的每一行 - 确保行高一致 */
.highlighttable code span,
.highlight code span {
  line-height: 1.6 !important;
  display: inline;
}

/* 行内代码 */
.md-content code:not(pre code) {
  font-size: 0.9em; /* 相对父元素，约 16px */
}

/* 链接优化 */
.md-content a {
  transition: color 0.2s ease;
}

.md-content a:hover {
  text-decoration: underline;
}

/* ============================================
   首页样式 - 从 index.md 移入以确保样式生效
   ============================================ */

/* Hero Section 动画和样式 */
.home-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 3rem 2rem;
  margin: 0 0 3rem 0;
  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: fadeInUpScale 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  animation: rotate 15s linear infinite;
}

.home-hero::after {
  content: '';
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
  animation: rotate 25s linear infinite reverse;
}

@keyframes fadeInUpScale {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.home-hero .hero-content {
  position: relative;
  z-index: 1;
}

.home-hero h1 {
  font-size: 2.25rem; /* 36px - Hero主标题 */
  margin: 0 0 0.75rem 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  animation: fadeInUpBounce 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes fadeInUpBounce {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }
  60% {
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-subtitle {
  font-size: 1.2rem; /* 19.2px - Hero副标题 */
  margin: 0.5rem 0;
  opacity: 0.95;
  font-weight: 600;
  line-height: 1.4;
  animation: fadeInUpBounce 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

.hero-description {
  font-size: 1.125rem; /* 18px - Hero描述 */
  margin: 0.75rem 0 1.5rem 0;
  opacity: 0.9;
  line-height: 1.6;
  animation: fadeInUpBounce 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  animation: fadeInUpBounce 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}

.btn {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn-primary {
  background: #ffffff;
  color: #667eea;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.btn-secondary {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
  border: 2px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-3px) scale(1.05);
}

.btn-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255,255,255,0.5);
}

.btn-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.8);
  transform: translateY(-3px) scale(1.05);
}

/* 核心特性卡片网格 */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.card {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 14px;
  padding: 1.25rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--md-primary-fg-color), transparent);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  border-color: var(--md-primary-fg-color);
}

.card-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: inline-block;
  transition: transform 0.3s ease;
}

.card:hover .card-icon {
  transform: scale(1.1) rotate(5deg);
}

.card h3 {
  margin: 0.5rem 0 0.75rem 0;
  font-size: 1.125rem; /* 18px - 卡片标题 */
  font-weight: 600;
  line-height: 1.3;
  color: var(--md-default-fg-color);
}

.card p {
  color: var(--md-default-fg-color--lighter);
  margin: 0.5rem 0;
  line-height: 1.6;
  font-size: 1.0625rem; /* 17px - 卡片正文 */
  flex-grow: 1;
}

.card a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem; /* 16px - 卡片链接 */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s ease;
  margin-top: auto;
  padding-top: 0.75rem;
}

.card a:hover {
  gap: 0.75rem;
}

/* 快速开始步骤 */
.quick-start {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.quick-start-step {
  text-align: center;
  padding: 1.25rem;
  background: var(--md-default-bg-color);
  border-radius: 14px;
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.quick-start-step:nth-child(1) { animation-delay: 0.1s; }
.quick-start-step:nth-child(2) { animation-delay: 0.2s; }
.quick-start-step:nth-child(3) { animation-delay: 0.3s; }

.quick-start-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-color: var(--md-primary-fg-color);
}

.step-number {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--md-primary-fg-color), var(--md-accent-fg-color));
  color: var(--md-primary-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 auto 1rem;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  transition: transform 0.3s ease;
}

.quick-start-step:hover .step-number {
  transform: scale(1.1) rotate(5deg);
}

.quick-start-step h4 {
  margin: 0.5rem 0 0.75rem 0;
  font-size: 1.125rem; /* 18px - 快速开始标题 */
  font-weight: 600;
  line-height: 1.3;
  color: var(--md-default-fg-color);
}

.quick-start-step pre {
  background: var(--md-code-bg-color);
  padding: 1rem;
  border-radius: 10px;
  text-align: left;
  margin-top: auto;
  font-size: 1.125rem; /* 18px - 与正文一致 */
  line-height: 1.6;
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: border-color 0.3s ease;
}

.quick-start-step:hover pre {
  border-color: var(--md-primary-fg-color);
}

/* 学习路径 */
.learning-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.path-card {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 14px;
  padding: 1.25rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.path-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--md-primary-fg-color);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.path-card:hover::before {
  transform: scaleY(1);
}

.path-card:hover {
  transform: translateX(5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-color: var(--md-primary-fg-color);
}

.path-card h4 {
  margin-top: 0;
  color: var(--md-primary-fg-color);
  font-size: 1.125rem; /* 18px - 学习路径标题 */
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.path-card p {
  color: var(--md-default-fg-color--lighter);
  margin-bottom: 1rem;
  font-size: 1.0625rem; /* 17px - 学习路径正文 */
  line-height: 1.6;
}

.path-card ol {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}

.path-card li {
  margin: 0.5rem 0;
  font-size: 1.0625rem; /* 17px - 学习路径列表项 */
  line-height: 1.6;
}

.path-card a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
  transition: all 0.2s ease;
}

.path-card a:hover {
  color: var(--md-accent-fg-color);
  text-decoration: underline;
  padding-left: 5px;
}

/* 标题样式优化 - 已在上面统一定义，这里只保留装饰样式 */

.md-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--md-primary-fg-color), transparent);
  border-radius: 2px;
}

/* 为什么选择部分 */
.why-section {
  margin: 1.5rem 0 1.75rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-radius: 14px;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.why-section h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.75rem; /* 28px - 统一使用h2标准大小 */
  line-height: 1.3;
}

.why-content {
  width: 100%;
  margin: 0;
  text-align: left;
}

.why-intro {
  font-size: 1.125rem; /* 18px - 统一正文大小 */
  line-height: 1.7;
  color: var(--md-default-fg-color);
  margin-bottom: 1rem;
}

.why-solution {
  font-size: 1.125rem; /* 18px - 统一正文大小 */
  line-height: 1.7;
  color: var(--md-default-fg-color--lighter);
  padding: 1.25rem;
  background: var(--md-default-bg-color);
  border-radius: 10px;
  text-align: left;
}

/* 成功消息 */
.success-message {
  text-align: center;
  padding: 1.25rem;
  margin: 1.25rem 0;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(56, 142, 60, 0.1) 100%);
  border-radius: 10px;
  border: 1px solid rgba(76, 175, 80, 0.3);
  font-size: 1.0625rem; /* 17px - 消息文本 */
  line-height: 1.6;
  color: var(--md-default-fg-color);
}

.success-message a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
  font-weight: 600;
}

.success-message a:hover {
  text-decoration: underline;
}

/* 滚动动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 页面加载动画 */
@keyframes pageLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  animation: pageLoad 0.5s ease-out;
  position: relative;
}

/* ============================================
   内容页面背景动画 - 除首页外的其他页面
   ============================================ */

/* 为主容器添加相对定位，确保内容在背景之上 */
.md-main,
.md-content,
.md-typeset {
  position: relative;
  z-index: 1;
}

/* 粒子光点背景动画 - 与顶栏和 Hero 动画完全不同 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    /* 多个光点粒子，更大更亮，形成明显的动态光点效果 */
    radial-gradient(circle at 15% 20%, rgba(102, 126, 234, 0.35) 0%, rgba(102, 126, 234, 0.15) 15%, transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(118, 75, 162, 0.32) 0%, rgba(118, 75, 162, 0.12) 18%, transparent 45%),
    radial-gradient(circle at 50% 60%, rgba(102, 126, 234, 0.28) 0%, rgba(102, 126, 234, 0.1) 20%, transparent 50%),
    radial-gradient(circle at 25% 80%, rgba(118, 75, 162, 0.3) 0%, rgba(118, 75, 162, 0.08) 22%, transparent 55%),
    radial-gradient(circle at 75% 15%, rgba(102, 126, 234, 0.33) 0%, rgba(102, 126, 234, 0.13) 16%, transparent 42%),
    radial-gradient(circle at 40% 90%, rgba(118, 75, 162, 0.29) 0%, rgba(118, 75, 162, 0.11) 19%, transparent 48%),
    radial-gradient(circle at 60% 40%, rgba(102, 126, 234, 0.27) 0%, rgba(102, 126, 234, 0.09) 21%, transparent 52%),
    radial-gradient(circle at 90% 70%, rgba(118, 75, 162, 0.31) 0%, rgba(118, 75, 162, 0.14) 17%, transparent 44%);
  background-size: 100% 100%;
  animation: particleFloat 22s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  will-change: transform, opacity;
}

/* 首页排除背景动画 - 使用 :has() 选择器 */
body:has(.home-page)::before,
body:has(.home-hero)::before {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

/* 粒子光点浮动动画 - 光点缓慢移动和闪烁，形成动态光晕效果 */
@keyframes particleFloat {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.85;
  }
  15% {
    transform: translate(25px, -20px) scale(1.08) rotate(2deg);
    opacity: 1;
  }
  30% {
    transform: translate(-20px, 30px) scale(0.96) rotate(-2deg);
    opacity: 0.8;
  }
  45% {
    transform: translate(30px, 25px) scale(1.06) rotate(3deg);
    opacity: 1;
  }
  60% {
    transform: translate(-25px, -30px) scale(0.97) rotate(-3deg);
    opacity: 0.85;
  }
  75% {
    transform: translate(20px, 30px) scale(1.04) rotate(1.5deg);
    opacity: 0.95;
  }
  90% {
    transform: translate(-20px, -25px) scale(1) rotate(-1.5deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.85;
  }
}

/* 兼容性处理 - 对于不支持 :has() 的浏览器 */
@supports not selector(:has(*)) {
  /* 为所有页面添加粒子光点背景动画 */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
      radial-gradient(circle at 15% 20%, rgba(102, 126, 234, 0.35) 0%, rgba(102, 126, 234, 0.15) 15%, transparent 40%),
      radial-gradient(circle at 85% 30%, rgba(118, 75, 162, 0.32) 0%, rgba(118, 75, 162, 0.12) 18%, transparent 45%),
      radial-gradient(circle at 50% 60%, rgba(102, 126, 234, 0.28) 0%, rgba(102, 126, 234, 0.1) 20%, transparent 50%),
      radial-gradient(circle at 25% 80%, rgba(118, 75, 162, 0.3) 0%, rgba(118, 75, 162, 0.08) 22%, transparent 55%),
      radial-gradient(circle at 75% 15%, rgba(102, 126, 234, 0.33) 0%, rgba(102, 126, 234, 0.13) 16%, transparent 42%),
      radial-gradient(circle at 40% 90%, rgba(118, 75, 162, 0.29) 0%, rgba(118, 75, 162, 0.11) 19%, transparent 48%),
      radial-gradient(circle at 60% 40%, rgba(102, 126, 234, 0.27) 0%, rgba(102, 126, 234, 0.09) 21%, transparent 52%),
      radial-gradient(circle at 90% 70%, rgba(118, 75, 162, 0.31) 0%, rgba(118, 75, 162, 0.14) 17%, transparent 44%);
    background-size: 100% 100%;
    animation: particleFloat 22s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    will-change: transform, opacity;
  }
  
  /* 首页排除背景动画 - 通过检查 body 内是否有 .home-page 或 .home-hero */
  /* 注意：如果不支持 :has()，这个选择器不会生效，需要通过 JavaScript 添加类名 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-hero {
    padding: 2rem 1.5rem;
  }
  
  .home-hero h1 {
    font-size: 1.875rem; /* 30px - 移动端h1 */
  }
  
  .hero-subtitle {
    font-size: 1.0625rem; /* 17px - 移动端副标题 */
  }
  
  .hero-description {
    font-size: 1rem; /* 16px - 移动端描述 */
  }
  
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem; /* 16px - 移动端按钮 */
  }
  
  .md-content {
    font-size: 1.0625rem; /* 17px - 移动端正文 */
  }
  
  .md-content h1 {
    font-size: 1.875rem; /* 30px - 移动端h1 */
  }
  
  .md-content h2 {
    font-size: 1.5rem; /* 24px - 移动端h2 */
  }
  
  .md-content h3 {
    font-size: 1.375rem; /* 22px - 移动端h3 */
  }
  
  .md-content h4 {
    font-size: 1.125rem; /* 18px - 移动端h4 */
  }
  
  .home-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .card {
    padding: 1rem;
  }
  
  .quick-start {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .quick-start-step {
    padding: 1rem;
  }
  
  .learning-paths {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .path-card {
    padding: 1rem;
  }
  
  .why-section {
    padding: 1.25rem;
  }
}