:root {
  --图像容器宽度: 1001px;
  --实际图像间距: 100px;
  --图像宽度: calc(var(--图像容器宽度) - var(--实际图像间距));
  --图像容器高度: calc(var(--图像宽度) * 9 / 16);
  --图像长廊分区高度: calc(var(--图像容器高度) + 150px);
  --图像移动时长: 350ms;
  --网站风格颜色: rgb(42, 151, 140);
  --分页渐变黑色标位置: 0.25%;
  --分页渐变透明色标位置: 0.25%;
  --光标-默认: url("/Images/Common/鼠标-默认.cur"), auto;
  --光标-手指: url("/Images/Common/鼠标-指向.cur"), pointer;
  --中文字体: "Noto Sans SC", 微软雅黑, sans-serif;
  --代码字体: "JetBrains Mono", Consolas, monospace;
  --中文代码混合字体: "JetBrains Mono", Consolas, "Noto Sans SC", 微软雅黑, sans-serif;
  --无衬线字体: "Inter", sans-serif;
}

/* 添加平滑滚动样式 */
html {
  scroll-behavior: smooth;
}

.main-content {
  background-image: linear-gradient(60deg, #0d0f11 0%, #22272b 100%);
  position: relative;
  margin: 0 auto;
  padding-bottom: 200px;
  width: 100%;
  height: fit-content;
  font-family: var(--中文代码混合字体);
}

.背景渐变区 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
}

.渐变分区 {
  width: 100%;
  height: max(100vh, 1500px);
  mask-image: radial-gradient(ellipse 150% 40% at center center, #000d 20%, #0005 50%, #0000);
}

.渐变分区:nth-child(1) {
  background: radial-gradient(circle at right center, #4b296980, #563277 25%, #4a378c 40%, #4066a8 65%, #32517380);
}

.渐变分区:nth-child(2) {
  background: radial-gradient(circle at right center, #25634e80, #2b4741 25%, #42421b 40%, #523926 65%, #733c3280);
}

.渐变分区:nth-child(3) {
  background: radial-gradient(circle at right center, #2c421e80, #254e3b 25%, #262f55 40%, #4b2b57 65%, #73323780);
}

.渐变分区:nth-child(4) {
  background: radial-gradient(circle at right center, #31588dbc, #362d8a 25%, #613d2b 40%, #5c2f39 65%, #7d8531bf);
}

.主页分区 {
  padding: 100px 0;
  position: relative;
}

.介绍分区 {
  position: relative;
  min-height: clamp(1200px, 110vh, 1700px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100px 0 120px 0;
}

.背景修饰容器 {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  mix-blend-mode: screen;
  mask-image: linear-gradient(0deg, transparent 0%, #0003 5%);
}

.背景修饰容器 > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.介绍分区标题,
.介绍分区中文标题,
.介绍分区英文标题 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.介绍分区中文标题 {
  position: relative;
  font-size: clamp(20px, 2.2vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 20px;
  animation: titleReveal 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.介绍分区中文标题::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--网站风格颜色), transparent);
  border-radius: 2px;
  animation: lineExpand 1s ease-out 0.5s forwards;
  opacity: 0;
}

.介绍分区中文标题::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  border-radius: 1px;
  animation: lineExpand 0.8s ease-out 0.7s forwards;
  opacity: 0;
}

.介绍分区大标题 {
  display: block;
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 25%, var(--网站风格颜色) 50%, #2a978c 75%, #ffffff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease-in-out infinite, textGlow 2s ease-in-out infinite alternate;
  position: relative;
}

.介绍分区大标题:first-child {
  margin-bottom: 8px;
  animation-delay: 0s;
}

.介绍分区大标题:last-child {
  animation-delay: 0.3s;
}

.介绍分区英文标题 {
  position: relative;
  font-size: clamp(14px, 1.2vw, 18px);
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 25px 0;
  animation: subtitleFade 1s ease-out 0.8s forwards;
  opacity: 0;
  transform: translateY(20px);
}

.介绍分区英文标题::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.5px;
}

.介绍分区英文标题 > :where(.介绍分区大标题, .介绍分区小标题) {
  font-weight: inherit;
  display: block;
  margin: 2px 0;
  transition: color 0.3s ease;
}

.介绍分区英文标题:hover > :where(.介绍分区大标题, .介绍分区小标题) {
  color: rgba(255, 255, 255, 0.9);
}

/* 标题动画 */
@keyframes titleReveal {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  50% {
    opacity: 0.7;
    transform: translateY(15px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lineExpand {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes textGlow {
  0% {
    filter: drop-shadow(0 0 5px rgba(42, 151, 140, 0.3));
  }
  100% {
    filter: drop-shadow(0 0 20px rgba(42, 151, 140, 0.6));
  }
}

@keyframes subtitleFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 添加装饰性背景元素 */
.介绍分区标题::before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(42, 151, 140, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
  z-index: -1;
}

.介绍分区标题::after {
  content: "";
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(42, 151, 140, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 8s ease-in-out infinite reverse;
  z-index: -1;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
  }
  66% {
    transform: translateY(10px) rotate(240deg);
  }
}

.介绍分区容器 {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 40px 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 新增：统计数据展示样式 */
.统计数据展示 {
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: clamp(16px, 3vw, 24px); */
  margin: 30px 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.统计项目 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  transition: transform 0.3s ease;
  animation: pulse 2s ease-in-out infinite;
}

.统计项目:nth-child(1) {
  animation-delay: 0s;
}
.统计项目:nth-child(2) {
  animation-delay: 0.5s;
}
.统计项目:nth-child(3) {
  animation-delay: 1s;
}
.统计项目:nth-child(4) {
  animation-delay: 1.5s;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.统计项目:hover {
  transform: translateY(-5px) scale(1.1);
}

.统计数字 {
  font-size: clamp(16px, 2vw, 24px);
  font-weight: bold;
  color: var(--网站风格颜色);
  text-shadow: 0 0 20px rgba(42, 151, 140, 0.5);
}

.统计标签 {
  font-size: clamp(12px, 1vw, 16px);
  color: rgb(180, 180, 180);
  font-weight: 300;
}

/* 新增：核心功能展示样式 */
.核心功能展示 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  width: 90%;
  max-width: 1000px;
  margin: 30px 0;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.功能卡片 {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
}

.功能卡片::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.功能卡片:hover::before {
  left: 100%;
}

.功能卡片:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(42, 151, 140, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.功能图标 {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, var(--网站风格颜色), #2a978c);
  border-radius: 12px;
  font-size: 20px;
  color: white;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.功能卡片:hover .功能图标 {
  transform: rotate(5deg) scale(1.1);
}

.功能内容 {
  flex: 1;
}

.功能标题 {
  font-size: clamp(16px, 1.1vw, 20px);
  margin-bottom: 8px;
  color: white;
  font-weight: 500;
}

.功能描述 {
  font-size: clamp(14px, 0.9vw, 16px);
  color: rgb(180, 180, 180);
  line-height: 1.5;
  font-weight: 300;
}

/* 新增：开始探索按钮样式 */
.开始探索区域 {
  margin: 30px 0;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.开始探索按钮 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  background: linear-gradient(135deg, var(--网站风格颜色), #2a978c);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 500;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 5px 15px rgba(42, 151, 140, 0.3);
  position: relative;
  overflow: hidden;
  cursor: url("/Images/Common/鼠标-指向.cur"), pointer;
}

.开始探索按钮::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.开始探索按钮:hover::before {
  left: 100%;
}

.开始探索按钮:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(42, 151, 140, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}

.开始探索按钮:active {
  transform: translateY(0);
}

.开始探索按钮:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.按钮文本 {
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.开始探索按钮 i {
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.开始探索按钮:hover i {
  transform: translateY(3px);
}

/* 添加滚动提示动画 */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  60% {
    transform: translateY(-3px);
  }
}

.开始探索按钮 i {
  animation: bounce 2s infinite;
}

/* 为交互式学习中心分区添加滚动偏移 */
.交互式学习中心分区 {
  scroll-margin-top: 80px; /* 确保滚动到此处时有适当间距 */
  padding: 100px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

@property --径向渐变发散距离 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.交互式学习中心容器 {
  position: relative;
  width: max(80%, 1000px);
  height: max(85vh, 800px);
  outline: solid 2px #def1;
  background-color: #ffffff05;
  background-image: radial-gradient(ellipse at 50% 8%, #def3 0%, transparent var(--径向渐变发散距离));
  padding: 2.5%;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  transition: background-color 250ms;
}

.交互式学习中心标题区 {
  width: 100%;
}

.交互式学习中心大标题 {
  position: relative;
  font-size: clamp(40px, 3vw, 100px);
  font-weight: normal;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.交互式学习中心大标题 > a {
  position: relative;
  height: 100%;
  padding: 10px 0;
  color: white;
}

.交互式学习中心容器:has(a:hover) {
  --径向渐变发散距离: 100%;
  background-color: transparent;
  transition: --径向渐变发散距离 500ms cubic-bezier(0.1, 0.75, 0.2, 0.9);
}

.交互式学习中心小标题 {
  color: rgb(175, 175, 175);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
  font-weight: normal;
  font-size: 1.25em;
}

.交互式学习中心展示区 {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

.交互式学习中心展示分区 {
  position: relative;
  width: max(25%, 250px);
  height: 100%;
  background: center/cover no-repeat radial-gradient(circle at 50% 10%, #ffffff2a 5%, #ffffff07 90%);
  box-shadow: 4px 4px 10px 0 #0002;
  border-radius: 10px;
  overflow: hidden;
}

.展示分区背景 {
  position: absolute;
  width: 100%;
  height: 65%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.展示分区背景 > img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.展示分区内容 {
  position: absolute;
  width: 85%;
  height: 25%;
  left: 25px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.展示分区标题 {
  font-size: 1.125em;
}

.展示分区描述 {
  font-size: 0.9em;
  color: rgb(160, 160, 160);
}

.博客分区 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.博客容器 {
  position: relative;
  width: max(100%, 1000px);
  height: max(90vh, 800px);
  display: flex;
  justify-content: center;
  gap: 5vw;
}

.博客背景区 {
  position: absolute;
  height: 70%;
  aspect-ratio: 1;
  left: 50%;
  top: 47.5%;
  translate: 7.5% -50%;
}

.博客背景容器 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.博客背景容器 > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.博客左区 {
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: min(5vh, 100px);
}

.博客标题区 {
  padding: 0 25px;
}

.博客大标题 {
  font-size: clamp(35px, 4vw, 100px);
}

.博客小标题 {
  color: rgb(175, 175, 175);
  font-weight: normal;
  font-size: clamp(16px, 1.25vw, 50px);
}

.博客子分区容器 {
  display: flex;
  flex-direction: column;
}

.经验之谈子分区,
.知识库子分区 {
  display: flex;
  gap: 25px;
  padding: 50px 25px;
}

.经验之谈子分区:hover,
.知识库子分区:hover {
  background-color: #def1;
}

.博客子分区容器:has(.经验之谈子分区:hover, .知识库子分区:hover) .分割线 {
  opacity: 0;
}

.博客Logo容器 {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: center/cover no-repeat radial-gradient(circle at 50% 10%, #ffffff2a 5%, #ffffff10 80%);
}

.博客Logo容器 > img {
  width: 75%;
  height: 75%;
  object-fit: contain;
}

.博客子分区内容 {
  width: 300px;
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.博客子分区标题 {
  font-size: 1.25em;
  transition: 250ms;
}

.博客子分区描述 {
  font-weight: normal;
  color: rgb(160, 160, 160);
}

.分割线 {
  width: 100%;
  height: 1px;
  background-image: linear-gradient(90deg, transparent 0%, #fff1 5%, #fff3 40%, #fff3 60%, #fff1 95%, transparent 100%);
}

.博客右区 {
  position: relative;
  width: 35%;
  height: 100%;
}

.博客右区背景容器 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.博客右区背景容器 > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.博客子分区:hover .博客子分区标题 {
  font-size: 1.5em;
}

.App和游戏容器 {
  position: relative;
  width: max(100%, 1000px);
  height: max(50vh, 800px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.App和游戏导航区 {
  position: relative;
  width: clamp(250px, 17.5%, 300px);
  height: 100%;
  border-radius: 10px 0 0 10px;
  overflow: hidden;
  border-top: solid 1px #def2;
  border-bottom: solid 1px #def2;
  border-left: solid 1px #def2;
  border-right: solid 1px #def5;
}

@property --径向渐变原点垂直坐标 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

.App和游戏导航区背景 {
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  background-image: radial-gradient(ellipse at 50% var(--径向渐变原点垂直坐标), #bdf5 0%, #bdf1 100%);
  transition: 250ms, --径向渐变原点垂直坐标 250ms;
}

.App游戏和导航区:has(.App导航区):hover .App和游戏导航区背景 {
  --径向渐变原点垂直坐标: 20%;
}

.App游戏和导航区:has(.游戏导航区):hover .App和游戏导航区背景 {
  --径向渐变原点垂直坐标: 80%;
}

.App和游戏导航分区 {
  position: relative;
  height: 50%;
  display: flex;
  flex-direction: column;
  background-color: #bbddff06;
  transition: 250ms;
}

.App和游戏导航图像容器 {
  width: 100%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.App和游戏导航图像容器 > img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.App和游戏导航文本区 {
  height: 25%;
  border-top: solid 1px #def2;
  display: flex;
  flex-direction: column;
}

.App和游戏导航标题 {
  padding: 15px 20px 5px;
}

.App和游戏导航描述 {
  font-size: 0.9em;
  color: rgb(170, 170, 170);
  padding: 0 20px 20px;
}

.App和游戏范例区 {
  position: relative;
  width: clamp(800px, 60%, 1200px);
  height: 100%;
  border-right: solid 1px #def2;
  border-top: solid 1px #def2;
  border-bottom: solid 1px #def2;
  overflow: hidden;
}

.范例分区 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  /* translate: 100% 0; */
  clip-path: inset(50% 50% 50% 50%);
  pointer-events: none;
  transition: 250ms;
}

.范例分区.当前范例分区 {
  /* translate: 0 0; */
  clip-path: inset(0 0 0 0);
  pointer-events: all;
}

.范例链接 {
  position: relative;
  width: 50%;
  height: 50%;
  transition: 250ms;
}

.范例链接:hover {
  background-color: #fff2;
}

.范例链接::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 0%, #0005 75%, #000 100%);
}

.范例背景 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.范例背景 > img {
  width: 80%;
  height: 80%;
  object-fit: cover;
}

.范例信息 {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80%;
  height: 25%;
  translate: -50% 0;
  padding: 0 2.5%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.范例标题 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.范例标题-下 {
  font-size: 0.8em;
  color: rgb(170, 170, 170);
  font-weight: normal;
  font-family: var(--无衬线字体);
}

.范例作者容器 {
  height: 60%;
  aspect-ratio: 1;
}

.范例作者容器 > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.横线,
.竖线 {
  position: absolute;
}

.横线 {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  background-image: linear-gradient(90deg, transparent 15%, #fff3 45%, #fff3 55%, transparent 85%);
}

.竖线 {
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  translate: -50% 0;
  background-image: linear-gradient(transparent 15%, #fff3 45%, #fff3 55%, transparent 85%);
}

.第三方教程与软件分区容器 {
  position: relative;
  width: max(100%, 1000px);
  height: min(90vh, 800px);
}

.容器背景 {
  position: absolute;
  width: 100%;
  height: max(2500px, 250%);
  top: 0;
  filter: brightness(0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  mask-image: linear-gradient(transparent 2%, #0002 50%);
}

.容器背景 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.第三方教程与软件访问区 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5vw;
}

.访问分区 {
  width: min(25%, 350px);
  height: min(75%, 650px);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background-image: linear-gradient(320deg, rgb(44, 52, 115) 10%, rgb(49, 68, 94) 100%);
  box-shadow: 10px 10px 10px 0 #0007;
  transition: 250ms;
}

.访问分区:hover {
  scale: 1.1;
  box-shadow: 0 0 30px 15px #0007;
}

.访问Logo容器 {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.访问Logo容器 > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.三点区 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 12%;
}

.点 {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background-color: rgb(214, 214, 214);
}

.访问信息区 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.访问标题 {
  padding: 0 15px 15px;
}

.访问描述 {
  padding: 0 10%;
  color: rgb(200, 200, 200);
}

/* <!-- ------------------ ↓ 响应式设计 ------------------- --> */

/* 移动端适配 */
@media (max-width: 768px) {
  .介绍分区 {
    min-height: clamp(1400px, 130vh, 1900px);
    padding: 80px 0 100px 0;
  }

  .介绍分区中文标题 {
    font-size: clamp(18px, 2.5vw, 28px);
    margin-bottom: 15px;
  }

  .介绍分区英文标题 {
    font-size: clamp(12px, 1.5vw, 16px);
    margin-top: 20px;
    letter-spacing: 1px;
  }

  .介绍分区容器 {
    gap: min(35px, 2vh);
    padding: 30px 0;
  }

  .统计数据展示 {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    margin: 20px 0;
  }

  .核心功能展示 {
    grid-template-columns: 1fr;
    gap: 15px;
    width: 95%;
    margin: 20px 0;
  }

  .功能卡片 {
    padding: 20px;
    gap: 15px;
  }

  .开始探索区域 {
    margin: 20px 0;
  }
}

/* 平板端适配 */
@media (min-width: 769px) and (max-width: 1024px) {
  .介绍分区 {
    min-height: clamp(1300px, 120vh, 1800px);
    padding: 90px 0 110px 0;
  }

  .介绍分区中文标题 {
    font-size: clamp(22px, 2.8vw, 40px);
  }

  .介绍分区英文标题 {
    font-size: clamp(13px, 1.3vw, 18px);
  }

  .介绍分区容器 {
    gap: min(40px, 2.2vh);
    padding: 35px 0;
  }

  .核心功能展示 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 25px 0;
  }

  .统计数据展示 {
    gap: 40px;
    margin: 25px 0;
  }

  .开始探索区域 {
    margin: 25px 0;
  }
}

/* <!-- ------------------ ↑ 响应式设计 ------------------- --> */

/* 贡献者与宗旨分区样式 */
.贡献者与宗旨分区 {
  position: relative;
  height: clamp(800px, 90vh, 950px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 0;
  overflow: hidden;
}

.贡献者与宗旨容器 {
  position: relative;
  width: 90%;
  max-width: 1400px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;
}

.分区背景装饰 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.背景渐变层 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 50%, rgba(42, 151, 140, 0.1) 0%, transparent 70%);
  animation: pulse 4s ease-in-out infinite;
}

.背景图案层 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px, 30px 30px;
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(1deg);
  }
}

.分区标题区 {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 20px;
}

.分区主标题 {
  font-size: clamp(40px, 4vw, 80px);
  font-weight: 300;
  color: white;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #fff, var(--网站风格颜色));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.分区副标题 {
  font-size: clamp(16px, 1.5vw, 24px);
  color: rgb(180, 180, 180);
  font-weight: 300;
  letter-spacing: 1px;
}

.内容展示区 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 40px;
  width: 100%;
}

.贡献者卡片,
.宗旨卡片 {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 40px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(0) scale(1);
  transition: transform 0.3s ease-out, background 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
  overflow: hidden;
}

.贡献者卡片:hover,
.宗旨卡片:hover {
  transform: translateY(-10px) scale(1.02);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(42, 151, 140, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.卡片装饰 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  pointer-events: none;
}

.装饰圆环 {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border: 2px solid rgba(42, 151, 140, 0.3);
  border-radius: 50%;
  animation: rotate 10s linear infinite;
}

.装饰线条 {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--网站风格颜色));
  transform: rotate(45deg);
}

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

.卡片内容 {
  position: relative;
  z-index: 1;
}

.卡片图标 {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--网站风格颜色), #2a978c);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
  font-size: 24px;
  color: white;
  box-shadow: 0 10px 20px rgba(42, 151, 140, 0.3);
}

.卡片标题 {
  font-size: clamp(24px, 2vw, 32px);
  color: white;
  margin-bottom: 15px;
  font-weight: 500;
}

.卡片描述 {
  font-size: clamp(14px, 1vw, 16px);
  color: rgb(200, 200, 200);
  line-height: 1.6;
  margin-bottom: 25px;
  font-weight: 300;
}

.贡献者预览 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
}

.贡献者头像 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.贡献者头像:hover {
  transform: scale(1.1);
}

.贡献者头像 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.贡献者头像.更多 {
  background: linear-gradient(135deg, var(--网站风格颜色), #2a978c);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.宗旨要点 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 25px;
}

.要点项目 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgb(200, 200, 200);
}

.要点项目 i {
  color: var(--网站风格颜色);
  font-size: 12px;
}

.卡片链接 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--网站风格颜色);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  padding: 8px 0;
}

.卡片链接:hover {
  gap: 12px;
  color: #2a978c;
}

.卡片链接 i {
  transition: transform 0.3s ease;
}

.卡片链接:hover i {
  transform: translateX(5px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .贡献者与宗旨分区 {
    min-height: clamp(1000px, 100vh, 1400px);
    padding: 60px 0;
  }

  .贡献者与宗旨容器 {
    width: 95%;
    gap: 40px;
  }

  .内容展示区 {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .贡献者卡片,
  .宗旨卡片 {
    padding: 30px;
  }

  .宗旨要点 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .贡献者预览 {
    justify-content: center;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .贡献者与宗旨容器 {
    width: 95%;
    gap: 50px;
  }

  .内容展示区 {
    gap: 35px;
  }

  .贡献者卡片,
  .宗旨卡片 {
    padding: 35px;
  }
}