/* 基础重置与全局样式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* 色彩变量定义 */
  :root {
    --primary-color: #1E3A84; /* 主色调，深蓝色，传达科技感与专业性 */
    --secondary-color: #F5F7FA; /* 辅助色，浅灰色，用于内容背景及对比 */
    --white-color: #FFFFFF; /* 白色，用于文字及主要图形 */
    --accent-color: #0EA5E9; /* 点缀色，电光蓝，增强动感和现代感 */
    --highlight-color: #F97316; /* 亮橙色，用于吸引注意力的按钮 */
  }

  /* 体裁与排版 */
  body {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* 使用现代无衬线字体，提升可读性 */
    background-color: var(--primary-color); /* 设置整体背景色为主色调 */
    color: var(--white-color); /* 全局文字颜色为白色，确保对比度 */
    line-height: 1.6; /* 设置行高，提升文本可读性 */
    font-size: 16px; /* 设置基础字体大小 */
    padding-top: 60px; /* 为固定导航栏预留顶部空间，避免内容被遮挡 */
  }

  /* 导航栏样式 */
  .navbar {
    position: fixed; /* 固定在页面顶部 */
    top: 0;
    width: 100%; /* 宽度为100%，确保覆盖整个顶部 */
    background-color: var(--primary-color); /* 导航栏背景色为主色调 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素之间拉开间距 */
    align-items: center; /* 子元素垂直居中 */
    padding: 15px 30px; /* 内边距，提供适当空间 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 添加下阴影，增强层次感 */
    z-index: 1000; /* 提高导航栏层级，确保在顶部显示 */
  }

  /* 导航栏Logo样式 */
  .navbar .logo {
    font-size: 24px; /* Logo字体大小 */
    font-weight: bold; /* 加粗字体 */
    color: var(--white-color); /* Logo文字颜色为白色 */
    text-decoration: none; /* 去除下划线 */
  }

  /* 导航链接容器 */
  .navbar .nav-links {
    display: flex; /* 使用Flexbox水平排列 */
    gap: 20px; /* 子元素间距 */
  }

  /* 单个导航链接样式 */
  .navbar .nav-links a {
    color: var(--white-color); /* 链接文字颜色为白色 */
    text-decoration: none; /* 去除下划线 */
    font-size: 16px; /* 链接文字大小 */
    transition: color 0.3s ease, border-bottom 0.3s ease; /* 动画过渡效果 */
    rel="nofollow"; /* 添加nofollow属性 */
  }

  /* 悬停时导航链接样式 */
  .navbar .nav-links a:hover {
    color: var(--accent-color); /* 悬停时颜色变为点缀色 */
    border-bottom: 2px solid var(--accent-color); /* 添加下边框 */
  }

  /* 引导区样式 */
  .hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%); /* 渐变背景 */
    padding: 100px 20px; /* 内边距，提供充分空间 */
    text-align: center; /* 文本居中 */
    color: var(--white-color); /* 文字颜色为白色 */
  }

  /* 引导区主标题样式 */
  .hero h1 {
    font-size: 48px; /* 标题字体大小 */
    margin-bottom: 20px; /* 下边距 */
  }

  /* 引导区描述文本样式 */
  .hero p {
    font-size: 18px; /* 描述文本字体大小 */
    color: var(--secondary-color); /* 文本颜色为浅灰色 */
    max-width: 800px; /* 最大宽度 */
    margin: 0 auto; /* 居中对齐 */
  }

  /* 容器样式 */
  .container {
    max-width: 1200px; /* 容器最大宽度 */
    margin: 40px auto; /* 上下外边距40px，水平居中 */
    padding: 0 20px; /* 左右内边距 */
    display: grid; /* 使用Grid布局 */
    grid-template-columns: repeat(12, 1fr); /* 12列网格系统 */
    gap: 20px; /* 网格间距 */
  }

  /* 文章样式 */
  article {
    grid-column: 1 / -1; /* 占据整个网格 */
    background-color: var(--secondary-color); /* 文章背景色为浅灰色 */
    padding: 40px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 阴影效果 */
    color: #333; /* 文字颜色加深，提升可读性 */
  }

  /* 文章不同级别标题样式 */
  article h2, article h3, article h4 {
    color: var(--primary-color); /* 标题颜色为主色调 */
    margin-bottom: 20px; /* 下边距 */
  }

  article h2 {
    font-size: 32px; /* h2字体大小 */
  }

  article h3 {
    font-size: 24px; /* h3字体大小 */
  }

  article h4 {
    font-size: 20px; /* h4字体大小 */
  }

  /* 文章段落样式 */
  article p {
    font-size: 16px; /* 段落字体大小 */
    margin-bottom: 20px; /* 下边距 */
  }

  /* 表格样式 */
  table {
    width: 100%; /* 表格宽度 */
    border-collapse: collapse; /* 去除表格间隙 */
    margin-bottom: 20px; /* 下边距 */
  }

  /* 表格单元格样式 */
  table th, table td {
    padding: 12px; /* 内边距 */
    border: 1px solid #ddd; /* 边框 */
    text-align: left; /* 左对齐 */
  }

  /* 表格表头样式 */
  table th {
    background-color: var(--primary-color); /* 表头背景色为主色调 */
    color: var(--white-color); /* 表头文字颜色为白色 */
  }

  /* 代码块样式 */
  pre {
    background-color: #f5f5f5; /* 代码块背景色 */
    padding: 20px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    overflow: auto; /* 内容溢出时出现滚动条 */
    margin-bottom: 20px; /* 下边距 */
  }

  pre code {
    font-family: 'Courier New', Courier, monospace; /* 等宽字体 */
    color: #333; /* 字体颜色加深 */
    position: relative;
  }

  pre code::before {
    content: "代码示例"; /* 代码块上方添加标签 */
    display: block;
    font-size: 14px; /* 标签字体大小 */
    font-weight: bold; /* 加粗 */
    margin-bottom: 10px; /* 下边距 */
    color: var(--primary-color); /* 标签颜色为主色调 */
  }

  pre code {
    overflow: visible; /* 确保伪元素不会被隐藏 */
  }

  /* 图片画廊样式 */
  .image-gallery {
    display: flex; /* 使用Flexbox布局 */
    flex-wrap: wrap; /* 换行显示 */
    gap: 20px; /* 图片间距 */
    margin-bottom: 20px; /* 下边距 */
  }

  .image-gallery img {
    width: 100%; /* 图片宽度自适应 */
    max-width: 320px; /* 最大宽度320px */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 阴影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡动画 */
    alt: ""; /* 确保alt属性为空 */
  }

  .image-gallery img:hover {
    transform: scale(1.05); /* 悬停时放大 */
    box-shadow: 0 6px 10px rgba(0,0,0,0.15); /* 增强阴影 */
  }

  /* 订阅区样式 */
  .subscribe-section {
    background-color: var(--secondary-color); /* 背景色为浅灰色 */
    padding: 60px 20px; /* 内边距 */
    text-align: center; /* 文本居中 */
  }

  .subscribe-section .subscribe-button {
    background-color: var(--highlight-color); /* 按钮背景为亮橙色 */
    color: var(--white-color); /* 文字颜色为白色 */
    border: none; /* 无边框 */
    padding: 15px 30px; /* 内边距 */
    border-radius: 25px; /* 圆角 */
    font-size: 18px; /* 字体大小 */
    cursor: pointer; /* 鼠标为手型 */
    transition: background-color 0.3s ease; /* 过渡动画 */
  }

  .subscribe-section .subscribe-button:hover {
    background-color: #e67e22; /* 悬停时颜色加深 */
  }

  /* 响应式样式 */
  @media (max-width: 768px) {
    .navbar .nav-links {
      display: none; /* 隐藏导航链接 */
    }

    .navbar .menu-toggle {
      display: block; /* 显示菜单切换按钮 */
      cursor: pointer;
      color: var(--white-color);
      font-size: 24px;
    }

    /* 调整图片画廊布局 */
    .image-gallery {
      justify-content: center; /* 居中对齐 */
    }

    /* 调整订阅按钮宽度 */
    .subscribe-section .subscribe-button {
      width: 100%; /* 按钮占满全宽 */
      padding: 15px 0; /* 内边距 */
    }
  }

  @media (max-width: 480px) {
    .hero h1 {
      font-size: 32px; /* 调整标题字体大小 */
    }

    .hero p {
      font-size: 16px; /* 调整描述文本字体大小 */
    }

    article h2 {
      font-size: 24px; /* 调整h2字体大小 */
    }

    article h3 {
      font-size: 20px; /* 调整h3字体大小 */
    }

    article p {
      font-size: 14px; /* 调整段落字体大小 */
    }
  }

  /* 其他辅助样式 */
  .footer {
    background-color: var(--primary-color); /* 背景色为主色调 */
    padding: 40px 20px; /* 内边距 */
    text-align: center; /* 文本居中 */
    color: var(--white-color); /* 文字颜色为白色 */
  }

  .footer a {
    color: var(--white-color); /* 链接文字颜色为白色 */
    text-decoration: none; /* 去除下划线 */
    margin: 0 10px; /* 链接间距 */
    transition: color 0.3s ease; /* 过渡动画 */
    rel="nofollow"; /* 添加nofollow属性 */
  }

  .footer a:hover {
    color: var(--accent-color); /* 悬停时颜色变为点缀色 */
  }

  /* 折叠菜单样式 */
  .navbar .menu-toggle {
    display: none; /* 默认隐藏菜单按钮 */
  }

  @media (max-width: 768px) {
    .navbar .nav-links.active {
      display: flex; /* 点击菜单按钮时显示导航链接 */
      flex-direction: column;
      width: 100%;
      background-color: var(--primary-color);
      position: absolute;
      top: 60px;
      left: 0;
      padding: 20px 0;
    }

    .navbar .nav-links.active a {
      padding: 10px 20px;
      border-top: 1px solid #ddd;
    }
  }

  /* 按钮样式 */
  .button {
    background-color: var(--accent-color); /* 按钮背景色为点缀色 */
    border: none; /* 无边框 */
    color: var(--white-color); /* 按钮文字颜色为白色 */
    padding: 12px 24px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 鼠标为手型 */
    transition: background-color 0.3s ease, transform 0.3s ease; /* 过渡动画 */
  }

  .button:hover {
    background-color: #0b8dcf; /* 悬停时颜色加深 */
    transform: translateY(-2px); /* 悬停时上移 */
  }