/* CSS文件 - 层叠样式表，用于控制网页的外观和布局 */

/* ===== 全局重置和基础样式 ===== */

/* 通用选择器 * 选择所有元素，用于重置默认样式 */
* {
    margin: 0; /* 重置外边距为0 */
    padding: 0; /* 重置内边距为0 */
    box-sizing: border-box; /* 设置盒模型为border-box，包含边框和内边距在宽度内 */
}

/* 设置HTML根元素的字体大小，用于rem单位的计算基准 */
html {
    font-size: 16px; /* 基础字体大小16像素 */
    scroll-behavior: smooth; /* 平滑滚动效果 */
}

/* body元素样式，设置整个页面的基础外观 */
body {
    font-family: 'Arial', 'Microsoft YaHei', sans-serif; /* 字体族，优先使用Arial，然后微软雅黑，最后无衬线字体 */
    line-height: 1.6; /* 行高1.6倍，增加可读性 */
    color: #333; /* 文字颜色为深灰色 */
    background-color: #f8f9fa; /* 背景色为浅灰色 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
}

/* 容器类，用于限制内容宽度和居中 */
.container {
    max-width: 1200px; /* 最大宽度1200像素 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 20px; /* 左右内边距20像素 */
}

/* ===== 头部导航样式 ===== */

/* 头部容器样式 */
.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景，从左上到右下，蓝色到紫色 */
    color: white; /* 文字颜色白色 */
    padding: 1rem 0; /* 上下内边距1rem */
    position: fixed; /* 固定定位，滚动时保持在顶部 */
    top: 0; /* 距离顶部0 */
    left: 0; /* 距离左边0 */
    right: 0; /* 距离右边0 */
    z-index: 1000; /* 层级1000，确保在其他元素之上 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 导航容器样式 */
.navigation {
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 居中 */
    padding: 0 20px; /* 左右内边距 */
}

/* logo区域样式 */
.logo h1 {
    font-size: 1.8rem; /* 字体大小1.8rem */
    font-weight: bold; /* 粗体 */
    margin: 0; /* 去除默认边距 */
}

/* 导航菜单样式 */
.nav-menu {
    display: flex; /* 弹性布局 */
    list-style: none; /* 去除列表标记 */
    gap: 2rem; /* 项目间距2rem */
}

/* 导航链接样式 */
.nav-menu a {
    color: white; /* 文字颜色白色 */
    text-decoration: none; /* 去除下划线 */
    font-weight: 500; /* 字体粗细500 */
    transition: all 0.3s ease; /* 所有属性0.3秒过渡效果 */
    padding: 0.5rem 1rem; /* 内边距 */
    border-radius: 5px; /* 圆角5像素 */
}

/* 导航链接悬停效果 */
.nav-menu a:hover {
    background-color: rgba(255,255,255,0.2); /* 半透明白色背景 */
    transform: translateY(-2px); /* 向上移动2像素 */
}

/* 移动端菜单按钮 */
.menu-toggle {
    display: none; /* 默认隐藏 */
    flex-direction: column; /* 垂直排列 */
    background: none; /* 无背景 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标指针 */
    padding: 0.5rem; /* 内边距 */
}

/* 汉堡菜单线条 */
.menu-toggle span {
    width: 25px; /* 宽度25像素 */
    height: 3px; /* 高度3像素 */
    background-color: white; /* 白色背景 */
    margin: 2px 0; /* 上下边距2像素 */
    transition: 0.3s; /* 0.3秒过渡 */
    border-radius: 2px; /* 圆角 */
}

/* ===== 主要内容区域样式 ===== */

/* 主内容容器 */
.main-content {
    margin-top: 80px; /* 顶部边距，为固定头部留空间 */
    padding: 0; /* 无内边距 */
}

/* 通用区域样式 */
section {
    padding: 4rem 0; /* 上下内边距4rem */
    margin: 0 auto; /* 居中 */
    max-width: 1200px; /* 最大宽度 */
}

/* 区域标题样式 */
section h2 {
    text-align: center; /* 文字居中 */
    margin-bottom: 3rem; /* 下边距3rem */
    font-size: 2.5rem; /* 字体大小2.5rem */
    color: #2c3e50; /* 深蓝灰色 */
    position: relative; /* 相对定位，为伪元素做准备 */
}

/* 标题下方装饰线 */
section h2::after {
    content: ''; /* 空内容 */
    position: absolute; /* 绝对定位 */
    bottom: -10px; /* 距离底部-10像素 */
    left: 50%; /* 左边距50% */
    transform: translateX(-50%); /* 向左移动50%，实现居中 */
    width: 50px; /* 宽度50像素 */
    height: 3px; /* 高度3像素 */
    background: linear-gradient(90deg, #667eea, #764ba2); /* 渐变背景 */
    border-radius: 2px; /* 圆角 */
}

/* ===== 首页英雄区域样式 ===== */

/* 英雄区域容器 */
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); /* 多彩渐变背景 */
    color: white; /* 白色文字 */
    text-align: center; /* 文字居中 */
    padding: 2rem 1rem; /* 减少内边距 */
    margin-top: 0; /* 顶部边距0 */
    position: relative; /* 相对定位，用于添加装饰元素 */
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 英雄区域装饰背景 */
.hero-section::before {
    content: ''; /* 空内容 */
    position: absolute; /* 绝对定位 */
    top: -50%; /* 顶部位置 */
    left: -50%; /* 左侧位置 */
    width: 200%; /* 宽度200% */
    height: 200%; /* 高度200% */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="25" r="3" fill="rgba(255,255,255,0.08)"/><circle cx="50" cy="50" r="1.5" fill="rgba(255,255,255,0.12)"/><circle cx="25" cy="75" r="2.5" fill="rgba(255,255,255,0.06)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/></svg>') repeat; /* SVG装饰图案 */
    animation: float 20s ease-in-out infinite; /* 浮动动画 */
    z-index: 0; /* 层级在内容之下 */
}

/* 浮动动画 */
@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(2%, -2%) rotate(1deg); }
    66% { transform: translate(-2%, 2%) rotate(-1deg); }
}

/* 英雄区域内容容器 */
.hero-content {
    position: relative; /* 相对定位，确保内容在装饰背景之上 */
    z-index: 1; /* 层级在装饰背景之上 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 纵向排列 */
    align-items: center; /* 水平居中 */
    gap: 1rem; /* 减小元素间距到1rem */
}

/* 英雄区域标题 */
.hero-content h2 {
    font-size: 2.2rem; /* 减小标题字体 */
    margin-bottom: 0; /* 去除下边距，使用gap控制间距 */
    color: white; /* 白色文字 */
    text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* 文字阴影增强可读性 */
    animation: fadeInUp 1s ease-out; /* 淡入上滑动画 */
}

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

/* 英雄区域标题去除下划线 */
.hero-content h2::after {
    display: none; /* 隐藏装饰线 */
}

/* 英雄区域描述文字 */
.hero-description {
    font-size: 1.2rem; /* 字体大小 */
    margin: 0; /* 重置边距，使用flex gap控制 */
    max-width: 600px; /* 最大宽度 */
    text-shadow: 0 1px 5px rgba(0,0,0,0.2); /* 文字阴影 */
    line-height: 1.8; /* 行高增强可读性 */
    animation: fadeInUp 1s ease-out 0.2s both; /* 延迟动画 */
}

/* 行动按钮样式 */
.cta-button {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24); /* 橙红渐变背景 */
    animation: fadeInUp 1s ease-out 0.4s both; /* 延迟动画 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 1rem 2rem; /* 内边距 */
    font-size: 1.1rem; /* 字体大小 */
    border-radius: 50px; /* 圆角按钮 */
    cursor: pointer; /* 鼠标指针 */
    transition: all 0.3s ease; /* 过渡效果 */
    margin-bottom: 0.01rem; /* 下边距 */
    box-shadow: 0 5px 15px rgba(255,107,107,0.3); /* 阴影 */
}

/* 按钮悬停效果 */
.cta-button:hover {
    transform: translateY(-3px); /* 向上移动 */
    box-shadow: 0 8px 25px rgba(255,107,107,0.4); /* 更强阴影 */
}

/* 英雄区域图片 */
.hero-image img {
    max-width: 100%; /* 最大宽度100% */
    height: auto; /* 高度自动 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* 阴影 */
    margin-top: 2rem; /* 顶部边距 */
}

/* 英雄区域图片占位符 */
.hero-image-placeholder {
    width: 100px; /* 减小宽度到300像素 */
    height: 100px; /* 减小高度到200像素 */
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%); /* 半透明白色渐变背景 */
    border-radius: 15px; /* 增大圆角 */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.08); /* 多层阴影 */
    margin: 0; /* 去除边距，使用flex gap控制 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    max-width: 100%; /* 响应式最大宽度 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    border: 1px solid rgba(255,255,255,0.2); /* 半透明边框 */
    animation: fadeInUp 1s ease-out 0.6s both; /* 延迟动画 */
    transition: transform 0.3s ease; /* 变换过渡效果 */
}

/* 鼠标悬停效果 */
.hero-image-placeholder:hover {
    transform: translateY(-5px) scale(1.02); /* 悬停时上移并略微放大 */
}

/* 占位符内容 */
.placeholder-content {
    text-align: center; /* 文本居中 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    gap: 1rem; /* 图标和文字间距 */
}

/* 英雄区域占位符图标样式 */
.hero-image-placeholder .placeholder-content i {
    color: #4CAF50; /* 绿色图标 */
    opacity: 0.8; /* 透明度 */
    transition: all 0.3s ease; /* 过渡效果 */
}

/* 英雄区域占位符文字样式 */
.hero-image-placeholder .placeholder-content span {
    color: #2E7D32; /* 深绿色文字 */
    font-weight: bold; /* 粗体 */
    font-size: 1.2rem; /* 字体大小 */
    margin: 0; /* 重置边距 */
}

/* ===== 关于我区域样式 ===== */

/* 关于区域内容布局 */
.about-content {
    display: grid; /* 网格布局 */
    grid-template-columns: 2fr 1fr; /* 两列，比例2:1 */
    gap: 3rem; /* 网格间距 */
    padding: 0 2rem; /* 左右内边距 */
}

/* 关于区域文字部分 */
.about-text {
    font-size: 1.1rem; /* 字体大小 */
    line-height: 1.8; /* 行高 */
}

/* 高亮文字样式 */
.highlight {
    background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%); /* 渐变背景 */
    padding: 2px 6px; /* 内边距 */
    border-radius: 3px; /* 圆角 */
    font-weight: bold; /* 粗体 */
}

/* 引用块样式 */
blockquote {
    border-left: 4px solid #667eea; /* 左边框 */
    padding-left: 1.5rem; /* 左内边距 */
    margin: 2rem 0; /* 上下边距 */
    font-style: italic; /* 斜体 */
    background-color: #f8f9fa; /* 背景色 */
    padding: 1rem 1.5rem; /* 内边距 */
    border-radius: 0 5px 5px 0; /* 右侧圆角 */
}

/* 详情折叠元素样式 */
details {
    margin: 1.5rem 0; /* 上下边距 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 5px; /* 圆角 */
    padding: 1rem; /* 内边距 */
}

/* 详情标题样式 */
summary {
    cursor: pointer; /* 鼠标指针 */
    font-weight: bold; /* 粗体 */
    padding: 0.5rem; /* 内边距 */
    margin: -1rem; /* 负边距抵消父元素内边距 */
    margin-bottom: 0; /* 下边距0 */
    background-color: #f1f3f4; /* 背景色 */
    border-radius: 5px 5px 0 0; /* 上方圆角 */
}

/* 详情展开时标题样式 */
details[open] summary {
    margin-bottom: 1rem; /* 下边距 */
    border-radius: 5px; /* 全圆角 */
}

/* 进度条容器 */
.progress-bars {
    background: white; /* 白色背景 */
    padding: 2rem; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 阴影 */
}

/* 进度条项目 */
.progress-item {
    margin-bottom: 1.5rem; /* 下边距 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 1rem; /* 间距 */
}

/* 进度条标签 */
.progress-item label {
    min-width: 100px; /* 最小宽度 */
    font-weight: bold; /* 粗体 */
}

/* 进度条元素 */
progress {
    flex: 1; /* 占据剩余空间 */
    height: 20px; /* 高度 */
    border-radius: 10px; /* 圆角 */
    border: none; /* 无边框 */
    background-color: #e0e0e0; /* 背景色 */
}

/* WebKit浏览器进度条样式 */
progress::-webkit-progress-bar {
    background-color: #e0e0e0; /* 背景色 */
    border-radius: 10px; /* 圆角 */
}

progress::-webkit-progress-value {
    background: linear-gradient(90deg, #667eea, #764ba2); /* 渐变填充 */
    border-radius: 10px; /* 圆角 */
}

/* Firefox浏览器进度条样式 */
progress::-moz-progress-bar {
    background: linear-gradient(90deg, #667eea, #764ba2); /* 渐变填充 */
    border-radius: 10px; /* 圆角 */
}

/* ===== 技能区域样式 ===== */

/* 技能网格布局 */
.skills-grid {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自适应列，最小300px */
    gap: 2rem; /* 网格间距 */
    padding: 0 2rem; /* 左右内边距 */
}

/* 技能卡片样式 */
.skill-card {
    background: white; /* 白色背景 */
    border-radius: 15px; /* 圆角 */
    padding: 2rem; /* 内边距 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* 阴影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
    border: 1px solid #f0f0f0; /* 边框 */
}

/* 技能卡片悬停效果 */
.skill-card:hover {
    transform: translateY(-5px); /* 向上移动 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* 更强阴影 */
}

/* 卡片头部 */
.card-header {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 1rem; /* 间距 */
    margin-bottom: 1.5rem; /* 下边距 */
}

/* 技能图标 */
.skill-icon {
    font-size: 2rem; /* 字体大小 */
}

/* 技能列表 */
.skill-list {
    list-style: none; /* 去除列表标记 */
    margin: 1rem 0; /* 上下边距 */
}

/* 技能列表项 */
.skill-list li {
    padding: 0.3rem 0; /* 上下内边距 */
    position: relative; /* 相对定位 */
    padding-left: 1.5rem; /* 左内边距为图标留空间 */
}

/* 技能列表项前的图标 */
.skill-list li::before {
    content: '✓'; /* 对勾符号 */
    position: absolute; /* 绝对定位 */
    left: 0; /* 左边距0 */
    color: #27ae60; /* 绿色 */
    font-weight: bold; /* 粗体 */
}

/* 度量条样式 */
meter {
    width: 100%; /* 宽度100% */
    height: 15px; /* 高度 */
    border-radius: 8px; /* 圆角 */
    border: none; /* 无边框 */
}

/* WebKit浏览器度量条样式 */
meter::-webkit-meter-bar {
    background-color: #e0e0e0; /* 背景色 */
    border-radius: 8px; /* 圆角 */
}

meter::-webkit-meter-optimum-value {
    background: linear-gradient(90deg, #27ae60, #2ecc71); /* 绿色渐变 */
    border-radius: 8px; /* 圆角 */
}

/* ===== 项目区域样式 ===== */

/* 项目容器 */
.projects-container {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* 自适应列 */
    gap: 2rem; /* 间距 */
    padding: 0 2rem; /* 左右内边距 */
}

/* 项目卡片 */
.project-card {
    background: white; /* 白色背景 */
    border-radius: 15px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* 阴影 */
    transition: transform 0.3s ease; /* 过渡效果 */
}

/* 项目卡片悬停效果 */
.project-card:hover {
    transform: translateY(-5px); /* 向上移动 */
}

/* 项目图片容器 */
.project-image {
    margin: 0; /* 去除默认边距 */
    position: relative; /* 相对定位 */
}

/* 项目图片 */
.project-image img {
    width: 100%; /* 宽度100% */
    height: 200px; /* 固定高度 */
    object-fit: cover; /* 保持比例裁剪 */
}

/* 项目图片占位符 */
.project-image-placeholder {
    width: 100%; /* 宽度100% */
    height: 200px; /* 固定高度200像素 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    border-radius: 8px; /* 圆角 */
}

/* 计算器项目占位符背景 */
.calculator-project {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); /* 蓝色渐变背景 */
}

/* 待办清单项目占位符背景 */
.todo-project {
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%); /* 绿色渐变背景 */
}

/* 图片说明 */
figcaption {
    position: absolute; /* 绝对定位 */
    bottom: 0; /* 底部对齐 */
    left: 0; /* 左对齐 */
    right: 0; /* 右对齐 */
    background: linear-gradient(transparent, rgba(0,0,0,0.7)); /* 渐变背景 */
    color: white; /* 白色文字 */
    padding: 1rem; /* 内边距 */
    font-size: 0.9rem; /* 字体大小 */
}

/* 项目信息区域 */
.project-info {
    padding: 1.5rem; /* 内边距 */
}

/* 技术标签容器 */
.project-tech {
    margin: 1rem 0; /* 上下边距 */
    display: flex; /* 弹性布局 */
    flex-wrap: wrap; /* 换行 */
    gap: 0.5rem; /* 间距 */
}

/* 技术标签样式 */
.tech-tag {
    background: linear-gradient(45deg, #667eea, #764ba2); /* 渐变背景 */
    color: white; /* 白色文字 */
    padding: 0.3rem 0.8rem; /* 内边距 */
    border-radius: 20px; /* 圆角 */
    font-size: 0.8rem; /* 字体大小 */
    font-weight: 500; /* 字体粗细 */
}

/* 项目按钮容器 */
.project-buttons {
    display: flex; /* 弹性布局 */
    gap: 1rem; /* 间距 */
    margin: 1rem 0; /* 上下边距 */
}

/* 项目描述（默认隐藏） */
.project-description {
    margin-top: 1rem; /* 顶部边距 */
    padding: 1rem; /* 内边距 */
    background-color: #f8f9fa; /* 背景色 */
    border-radius: 5px; /* 圆角 */
    border-left: 3px solid #667eea; /* 左边框 */
}

/* ===== 演示区域样式 ===== */

/* 演示容器 */
.demo-container {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自适应列 */
    gap: 2rem; /* 间距 */
    padding: 0 2rem; /* 左右内边距 */
}

/* 演示项目 */
.demo-item {
    background: white; /* 白色背景 */
    padding: 2rem; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 3px 15px rgba(0,0,0,0.1); /* 阴影 */
    text-align: center; /* 文字居中 */
}

/* 演示项目标题 */
.demo-item h3 {
    margin-bottom: 1rem; /* 下边距 */
    color: #2c3e50; /* 深蓝灰色 */
}

/* 颜色选择器 */
input[type="color"] {
    width: 50px; /* 宽度 */
    height: 50px; /* 高度 */
    border: none; /* 无边框 */
    border-radius: 50%; /* 圆形 */
    cursor: pointer; /* 鼠标指针 */
    margin: 0.5rem; /* 边距 */
}

/* 滑块样式 */
input[type="range"] {
    width: 100%; /* 宽度100% */
    margin: 1rem 0; /* 上下边距 */
    -webkit-appearance: none; /* 去除默认样式（WebKit浏览器） */
    appearance: none; /* 去除默认样式（标准属性） */
    height: 5px; /* 高度 */
    border-radius: 5px; /* 圆角 */
    background: #ddd; /* 背景色 */
    outline: none; /* 去除轮廓 */
}

/* 滑块滑块样式 */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* 去除默认样式 */
    appearance: none; /* 去除默认样式 */
    height: 20px; /* 高度 */
    width: 20px; /* 宽度 */
    border-radius: 50%; /* 圆形 */
    background: #667eea; /* 背景色 */
    cursor: pointer; /* 鼠标指针 */
}

input[type="range"]::-moz-range-thumb {
    height: 20px; /* 高度 */
    width: 20px; /* 宽度 */
    border-radius: 50%; /* 圆形 */
    background: #667eea; /* 背景色 */
    cursor: pointer; /* 鼠标指针 */
    border: none; /* 无边框 */
}

/* 计数器控件 */
.counter-controls {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    gap: 1rem; /* 间距 */
    margin: 1rem 0; /* 上下边距 */
}

/* 计数器按钮 */
.counter-controls button {
    width: 40px; /* 宽度 */
    height: 40px; /* 高度 */
    border: none; /* 无边框 */
    border-radius: 50%; /* 圆形 */
    background: #667eea; /* 背景色 */
    color: white; /* 白色文字 */
    font-size: 1.2rem; /* 字体大小 */
    cursor: pointer; /* 鼠标指针 */
    transition: all 0.3s ease; /* 过渡效果 */
}

/* 计数器按钮悬停效果 */
.counter-controls button:hover {
    background: #5a6fd8; /* 更深的背景色 */
    transform: scale(1.1); /* 放大1.1倍 */
}

/* 计数器数值显示 */
#counterValue {
    font-size: 2rem; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    color: #2c3e50; /* 深蓝灰色 */
}

/* 时钟显示 */
.clock {
    background: linear-gradient(135deg, #667eea, #764ba2); /* 渐变背景 */
    color: white; /* 白色文字 */
    padding: 1rem; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    margin: 1rem 0; /* 上下边距 */
    font-family: 'Courier New', monospace; /* 等宽字体 */
    font-size: 1.2rem; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    text-align: center; /* 文字居中 */
}

/* ===== 表单样式 ===== */

/* 联系表单 */
.contact-form {
    max-width: 800px; /* 最大宽度 */
    margin: 0 auto; /* 居中 */
    background: white; /* 白色背景 */
    padding: 2rem; /* 内边距 */
    border-radius: 15px; /* 圆角 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* 阴影 */
}

/* 字段集样式 */
fieldset {
    border: 2px solid #e9ecef; /* 边框 */
    border-radius: 10px; /* 圆角 */
    padding: 1.5rem; /* 内边距 */
    margin-bottom: 2rem; /* 下边距 */
}

/* 图例样式 */
legend {
    font-weight: bold; /* 粗体 */
    font-size: 1.1rem; /* 字体大小 */
    color: #2c3e50; /* 深蓝灰色 */
    padding: 0 1rem; /* 左右内边距 */
}

/* 表单组 */
.form-group {
    margin-bottom: 1.5rem; /* 下边距 */
}

/* 表单标签 */
.form-group label {
    display: block; /* 块级元素 */
    margin-bottom: 0.5rem; /* 下边距 */
    font-weight: 500; /* 字体粗细 */
    color: #2c3e50; /* 深蓝灰色 */
}

/* 必填标记 */
abbr[title] {
    color: #e74c3c; /* 红色 */
    text-decoration: none; /* 去除下划线 */
}

/* 文本输入框 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="url"],
select,
textarea {
    width: 100%; /* 宽度100% */
    padding: 0.75rem; /* 内边距 */
    border: 2px solid #e9ecef; /* 边框 */
    border-radius: 5px; /* 圆角 */
    font-size: 1rem; /* 字体大小 */
    transition: all 0.3s ease; /* 过渡效果 */
    font-family: inherit; /* 继承字体 */
}

/* 输入框焦点状态 */
input:focus,
select:focus,
textarea:focus {
    outline: none; /* 去除轮廓 */
    border-color: #667eea; /* 边框色 */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); /* 阴影 */
}

/* 单选按钮和复选框组 */
.radio-group,
.checkbox-group {
    display: flex; /* 弹性布局 */
    flex-wrap: wrap; /* 换行 */
    gap: 1rem; /* 间距 */
}

/* 单选和复选框标签 */
.radio-label,
.checkbox-label {
    display: flex !important; /* 强制弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 0.5rem; /* 间距 */
    cursor: pointer; /* 鼠标指针 */
    font-weight: normal !important; /* 正常字体粗细 */
}

/* 隐藏默认单选按钮和复选框 */
input[type="radio"],
input[type="checkbox"] {
    width: auto; /* 自动宽度 */
    margin: 0; /* 无边距 */
}

/* 文本域 */
textarea {
    resize: vertical; /* 只允许垂直调整大小 */
    min-height: 120px; /* 最小高度 */
}

/* 字符计数 */
.char-count {
    display: block; /* 块级元素 */
    text-align: right; /* 右对齐 */
    color: #6c757d; /* 灰色 */
    font-size: 0.9rem; /* 字体大小 */
    margin-top: 0.25rem; /* 顶部边距 */
}

/* 错误消息 */
.error-message {
    color: #e74c3c; /* 红色 */
    font-size: 0.9rem; /* 字体大小 */
    margin-top: 0.25rem; /* 顶部边距 */
    display: block; /* 块级元素 */
}

/* 表单操作按钮容器 */
.form-actions {
    display: flex; /* 弹性布局 */
    gap: 1rem; /* 间距 */
    justify-content: center; /* 居中 */
    flex-wrap: wrap; /* 换行 */
}

/* 表单结果显示 */
.form-result {
    margin-top: 2rem; /* 顶部边距 */
    padding: 1rem; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    display: none; /* 默认隐藏 */
}

/* 成功消息 */
.form-result.success {
    background-color: #d4edda; /* 浅绿背景 */
    color: #155724; /* 深绿文字 */
    border: 1px solid #c3e6cb; /* 绿色边框 */
}

/* 错误消息 */
.form-result.error {
    background-color: #f8d7da; /* 浅红背景 */
    color: #721c24; /* 深红文字 */
    border: 1px solid #f5c6cb; /* 红色边框 */
}

/* ===== 按钮样式 ===== */

/* 通用按钮样式 */
.btn {
    padding: 0.75rem 1.5rem; /* 内边距 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    font-size: 1rem; /* 字体大小 */
    font-weight: 500; /* 字体粗细 */
    cursor: pointer; /* 鼠标指针 */
    text-decoration: none; /* 去除下划线 */
    display: inline-block; /* 内联块元素 */
    transition: all 0.3s ease; /* 过渡效果 */
    text-align: center; /* 文字居中 */
}

/* 主要按钮 */
.btn-primary {
    background: linear-gradient(45deg, #667eea, #764ba2); /* 渐变背景 */
    color: white; /* 白色文字 */
}

/* 主要按钮悬停效果 */
.btn-primary:hover {
    background: linear-gradient(45deg, #5a6fd8, #6a42a0); /* 更深渐变 */
    transform: translateY(-2px); /* 向上移动 */
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); /* 阴影 */
}

/* 次要按钮 */
.btn-secondary {
    background-color: #6c757d; /* 灰色背景 */
    color: white; /* 白色文字 */
}

/* 次要按钮悬停效果 */
.btn-secondary:hover {
    background-color: #545b62; /* 更深灰色 */
    transform: translateY(-2px); /* 向上移动 */
}

/* 信息按钮 */
.btn-info {
    background-color: #17a2b8; /* 青色背景 */
    color: white; /* 白色文字 */
}

/* 信息按钮悬停效果 */
.btn-info:hover {
    background-color: #138496; /* 更深青色 */
    transform: translateY(-2px); /* 向上移动 */
}

/* ===== 表格样式 ===== */

/* 表格容器 */
.table-container {
    padding: 0 2rem; /* 左右内边距 */
    overflow-x: auto; /* 水平滚动 */
}

/* 数据表格 */
.data-table {
    width: 100%; /* 宽度100% */
    border-collapse: collapse; /* 合并边框 */
    background: white; /* 白色背景 */
    border-radius: 10px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 阴影 */
}

/* 表格标题 */
caption {
    font-size: 1.2rem; /* 字体大小 */
    font-weight: bold; /* 粗体 */
    margin-bottom: 1rem; /* 下边距 */
    color: #2c3e50; /* 深蓝灰色 */
}

/* 表头和数据单元格 */
th, td {
    padding: 1rem; /* 内边距 */
    text-align: left; /* 左对齐 */
    border-bottom: 1px solid #e9ecef; /* 下边框 */
}

/* 表头样式 */
th {
    background: linear-gradient(135deg, #667eea, #764ba2); /* 渐变背景 */
    color: white; /* 白色文字 */
    font-weight: 600; /* 字体粗细 */
}

/* 表格行悬停效果 */
tbody tr:hover {
    background-color: #f8f9fa; /* 浅灰背景 */
}

/* 表格脚部 */
tfoot th {
    background-color: #f8f9fa; /* 浅灰背景 */
    color: #2c3e50; /* 深蓝灰色 */
}

/* ===== 多媒体样式 ===== */

/* 多媒体容器 */
.media-container {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自适应列 */
    gap: 2rem; /* 间距 */
    padding: 0 2rem; /* 左右内边距 */
}

/* 多媒体项目 */
.media-item {
    background: white; /* 白色背景 */
    padding: 2rem; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 3px 15px rgba(0,0,0,0.1); /* 阴影 */
    text-align: center; /* 文字居中 */
}

/* 音频和视频控件 */
audio, video {
    width: 100%; /* 宽度100% */
    border-radius: 5px; /* 圆角 */
}

/* iframe样式 */
iframe {
    width: 100%; /* 宽度100% */
    border-radius: 5px; /* 圆角 */
    border: none; /* 无边框 */
}

/* ===== 侧边栏样式 ===== */

/* 侧边栏容器 */
.sidebar {
    position: fixed; /* 固定定位 */
    top: 80px; /* 距离顶部80像素（头部高度） */
    right: -300px; /* 默认隐藏在右侧 */
    width: 300px; /* 宽度300像素 */
    height: calc(100vh - 80px); /* 高度为视口高度减去头部高度 */
    background: white; /* 白色背景 */
    box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* 左侧阴影 */
    transition: right 0.3s ease; /* 滑动过渡效果 */
    z-index: 999; /* 层级 */
    overflow-y: auto; /* 垂直滚动 */
}

/* 侧边栏激活状态 */
.sidebar.active {
    right: 0; /* 滑入视图 */
}

/* 侧边栏内容 */
.sidebar-content {
    padding: 2rem; /* 内边距 */
}

/* 侧边栏导航 */
.sidebar-nav ul {
    list-style: none; /* 去除列表标记 */
}

/* 侧边栏链接 */
.sidebar-nav a {
    display: block; /* 块级元素 */
    padding: 0.75rem 1rem; /* 内边距 */
    color: #2c3e50; /* 深蓝灰色 */
    text-decoration: none; /* 去除下划线 */
    border-radius: 5px; /* 圆角 */
    margin-bottom: 0.5rem; /* 下边距 */
    transition: all 0.3s ease; /* 过渡效果 */
}

/* 侧边栏链接悬停效果 */
.sidebar-nav a:hover {
    background: linear-gradient(135deg, #667eea, #764ba2); /* 渐变背景 */
    color: white; /* 白色文字 */
    transform: translateX(5px); /* 向右移动 */
}

/* 侧边栏小部件 */
.sidebar-widget {
    margin-top: 2rem; /* 顶部边距 */
    padding: 1.5rem; /* 内边距 */
    background: #f8f9fa; /* 浅灰背景 */
    border-radius: 10px; /* 圆角 */
}

/* 侧边栏小部件标题 */
.sidebar-widget h4 {
    margin-bottom: 1rem; /* 下边距 */
    color: #2c3e50; /* 深蓝灰色 */
}

/* 侧边栏切换按钮 */
.sidebar-toggle {
    position: absolute; /* 绝对定位 */
    left: -50px; /* 位于侧边栏左侧 */
    top: 20px; /* 距离顶部20像素 */
    width: 50px; /* 宽度 */
    height: 50px; /* 高度 */
    background: linear-gradient(135deg, #667eea, #764ba2); /* 渐变背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    border-radius: 50% 0 0 50%; /* 左侧圆角 */
    cursor: pointer; /* 鼠标指针 */
    font-size: 1.2rem; /* 字体大小 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    transition: all 0.3s ease; /* 过渡效果 */
}

/* 侧边栏切换按钮悬停效果 */
.sidebar-toggle:hover {
    transform: translateX(-5px); /* 向左移动 */
}

/* 描述列表 */
dl {
    margin: 0; /* 无边距 */
}

/* 描述术语 */
dt {
    font-weight: bold; /* 粗体 */
    margin-top: 0.5rem; /* 顶部边距 */
}

/* 描述内容 */
dd {
    margin-left: 0; /* 无左边距 */
    margin-bottom: 0.5rem; /* 下边距 */
    color: #667eea; /* 蓝色 */
    font-weight: bold; /* 粗体 */
}

/* ===== 页脚样式 ===== */

/* 页脚容器 */
.footer {
    background: linear-gradient(135deg, #2c3e50, #34495e); /* 深色渐变背景 */
    color: white; /* 白色文字 */
    padding: 3rem 0 1rem; /* 内边距 */
    margin-top: 4rem; /* 顶部边距 */
}

/* 页脚内容 */
.footer-content {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自适应列 */
    gap: 2rem; /* 间距 */
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 居中 */
    padding: 0 2rem; /* 左右内边距 */
}

/* 页脚区域 */
.footer-section h4 {
    margin-bottom: 1rem; /* 下边距 */
    color: hsl(155, 79%, 48%); /* 绿色 */
}

/* 地址样式 */
address {
    font-style: normal; /* 正常字体样式 */
    line-height: 1.6; /* 行高 */
}

/* 页脚链接 */
.footer a {
    color: #74b9ff; /* 蓝色 */
    text-decoration: none; /* 去除下划线 */
    transition: color 0.3s ease; /* 过渡效果 */
}

/* 页脚链接悬停效果 */
.footer a:hover {
    color: #0984e3; /* 更深蓝色 */
}

/* 社交链接 */
.social-links {
    display: flex; /* 弹性布局 */
    gap: 1rem; /* 间距 */
}

/* 社交链接项 */
.social-links a {
    display: inline-block; /* 内联块元素 */
    padding: 0.5rem 1rem; /* 内边距 */
    background-color: rgba(255,255,255,0.1); /* 半透明背景 */
    border-radius: 5px; /* 圆角 */
    transition: all 0.3s ease; /* 过渡效果 */
}

/* 社交链接悬停效果 */
.social-links a:hover {
    background-color: rgba(255,255,255,0.2); /* 更明显的半透明背景 */
    transform: translateY(-2px); /* 向上移动 */
}

/* 页脚底部 */
.footer-bottom {
    text-align: center; /* 文字居中 */
    margin-top: 2rem; /* 顶部边距 */
    padding-top: 2rem; /* 顶部内边距 */
    border-top: 1px solid rgba(255,255,255,0.1); /* 顶部边框 */
    max-width: 1200px; /* 最大宽度 */
    margin-left: auto; /* 左边距自动 */
    margin-right: auto; /* 右边距自动 */
    padding-left: 2rem; /* 左内边距 */
    padding-right: 2rem; /* 右内边距 */
}

/* ===== 回到顶部按钮 ===== */

/* 回到顶部按钮 */
.back-to-top {
    position: fixed; /* 固定定位 */
    bottom: 30px; /* 距离底部30像素 */
    right: 30px; /* 距离右边30像素 */
    width: 50px; /* 宽度 */
    height: 50px; /* 高度 */
    background: linear-gradient(135deg, #667eea, #764ba2); /* 渐变背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    border-radius: 50%; /* 圆形 */
    font-size: 1.2rem; /* 字体大小 */
    cursor: pointer; /* 鼠标指针 */
    opacity: 0; /* 默认透明 */
    visibility: hidden; /* 默认隐藏 */
    transition: all 0.3s ease; /* 过渡效果 */
    z-index: 1000; /* 层级 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 阴影 */
}

/* 回到顶部按钮显示状态 */
.back-to-top.show {
    opacity: 1; /* 完全不透明 */
    visibility: visible; /* 可见 */
}

/* 回到顶部按钮悬停效果 */
.back-to-top:hover {
    transform: translateY(-3px); /* 向上移动 */
    box-shadow: 0 8px 25px rgba(0,0,0,0.4); /* 更强阴影 */
}

/* ===== 响应式设计 ===== */

/* 平板设备样式 (最大宽度768px) */
@media screen and (max-width: 768px) {
    /* 显示移动端菜单按钮 */
    .menu-toggle {
        display: flex; /* 显示汉堡菜单 */
    }
    
    /* 隐藏桌面导航菜单 */
    .nav-menu {
        display: none; /* 隐藏导航菜单 */
        position: absolute; /* 绝对定位 */
        top: 100%; /* 位于导航栏下方 */
        left: 0; /* 左对齐 */
        right: 0; /* 右对齐 */
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 渐变背景 */
        flex-direction: column; /* 垂直排列 */
        padding: 1rem; /* 内边距 */
        gap: 0; /* 无间距 */
    }
    
    /* 激活状态的移动端菜单 */
    .nav-menu.active {
        display: flex; /* 显示菜单 */
    }
    
    /* 移动端导航链接 */
    .nav-menu li {
        width: 100%; /* 宽度100% */
    }
    
    .nav-menu a {
        display: block; /* 块级元素 */
        padding: 1rem; /* 内边距 */
        border-bottom: 1px solid rgba(255,255,255,0.1); /* 底部边框 */
    }
    
    /* 英雄区域标题字体大小调整 */
    .hero-content h2 {
        font-size: 2rem; /* 减小字体 */
    }
    
    /* 区域标题字体大小调整 */
    section h2 {
        font-size: 2rem; /* 减小字体 */
    }
    
    /* 关于区域改为单列布局 */
    .about-content {
        grid-template-columns: 1fr; /* 单列 */
        gap: 2rem; /* 间距 */
    }
    
    /* 技能网格最小宽度调整 */
    .skills-grid {
        grid-template-columns: 1fr; /* 单列 */
    }
    
    /* 项目容器最小宽度调整 */
    .projects-container {
        grid-template-columns: 1fr; /* 单列 */
    }
    
    /* 演示容器最小宽度调整 */
    .demo-container {
        grid-template-columns: 1fr; /* 单列 */
    }
    
    /* 多媒体容器最小宽度调整 */
    .media-container {
        grid-template-columns: 1fr; /* 单列 */
    }
    
    /* 页脚内容最小宽度调整 */
    .footer-content {
        grid-template-columns: 1fr; /* 单列 */
        text-align: center; /* 文字居中 */
    }
    
    /* 表单按钮垂直排列 */
    .form-actions {
        flex-direction: column; /* 垂直排列 */
    }
    
    /* 项目按钮垂直排列 */
    .project-buttons {
        flex-direction: column; /* 垂直排列 */
    }
    
    /* 侧边栏宽度调整 */
    .sidebar {
        width: 280px; /* 减小宽度 */
        right: -280px; /* 调整隐藏位置 */
    }
    
    /* 回到顶部按钮位置调整 */
    .back-to-top {
        bottom: 20px; /* 距离底部20像素 */
        right: 20px; /* 距离右边20像素 */
        width: 45px; /* 减小宽度 */
        height: 45px; /* 减小高度 */
    }
}

/* 小屏手机设备样式 (最大宽度480px) */
@media screen and (max-width: 480px) {
    /* 基础字体大小调整 */
    html {
        font-size: 14px; /* 减小基础字体 */
    }
    
    /* 头部内边距调整 */
    .header {
        padding: 0.5rem 0; /* 减小内边距 */
    }
    
    /* 导航内边距调整 */
    .navigation {
        padding: 0 1rem; /* 减小左右内边距 */
    }
    
    /* logo字体大小调整 */
    .logo h1 {
        font-size: 1.5rem; /* 减小字体 */
    }
    
    /* 主内容顶部边距调整 */
    .main-content {
        margin-top: 60px; /* 减小顶部边距 */
    }
    
    /* 区域内边距调整 */
    section {
        padding: 2rem 1rem; /* 减小内边距 */
    }
    
    /* 英雄区域内边距调整 */
    .hero-section {
        padding: 3rem 1rem; /* 减小内边距 */
    }
    
    /* 英雄区域标题字体调整 */
    .hero-content h2 {
        font-size: 1.8rem; /* 进一步减小字体 */
    }
    
    /* 区域标题字体调整 */
    section h2 {
        font-size: 1.8rem; /* 进一步减小字体 */
    }
    
    /* 按钮内边距调整 */
    .btn {
        padding: 0.6rem 1.2rem; /* 减小内边距 */
        font-size: 0.9rem; /* 减小字体 */
    }
    
    /* 表格容器内边距调整 */
    .table-container {
        padding: 0 1rem; /* 减小左右内边距 */
    }
    
    /* 表格单元格内边距调整 */
    th, td {
        padding: 0.5rem; /* 减小内边距 */
        font-size: 0.9rem; /* 减小字体 */
    }
    
    /* 侧边栏宽度进一步调整 */
    .sidebar {
        width: 250px; /* 进一步减小宽度 */
        right: -250px; /* 调整隐藏位置 */
    }
    
    /* 侧边栏内容内边距调整 */
    .sidebar-content {
        padding: 1rem; /* 减小内边距 */
    }
    
    /* 回到顶部按钮进一步调整 */
    .back-to-top {
        width: 40px; /* 进一步减小 */
        height: 40px; /* 进一步减小 */
        font-size: 1rem; /* 减小字体 */
    }
}

/* 大屏设备样式 (最小宽度1200px) */
@media screen and (min-width: 1200px) {
    /* 容器最大宽度增加 */
    .container {
        max-width: 1400px; /* 增加最大宽度 */
    }
    
    /* 区域内边距增加 */
    section {
        padding: 5rem 0; /* 增加上下内边距 */
    }
    
    /* 英雄区域内边距增加 */
    .hero-section {
        padding: 2rem 2rem; /* 增加内边距 */
    }
    
    /* 技能网格列数增加 */
    .skills-grid {
        grid-template-columns: repeat(3, 1fr); /* 固定三列 */
    }
    
    /* 演示容器列数增加 */
    .demo-container {
        grid-template-columns: repeat(4, 1fr); /* 固定四列 */
    }
}

/* 打印样式 */
@media print {
    /* 隐藏不需要打印的元素 */
    .header,
    .sidebar,
    .back-to-top,
    .menu-toggle,
    .cta-button,
    .demo-section,
    .sidebar-toggle {
        display: none !important; /* 强制隐藏 */
    }
    
    /* 调整主内容顶部边距 */
    .main-content {
        margin-top: 0; /* 无顶部边距 */
    }
    
    /* 调整页面背景 */
    body {
        background: white !important; /* 强制白色背景 */
        color: black !important; /* 强制黑色文字 */
    }
    
    /* 调整区域内边距 */
    section {
        padding: 1rem 0; /* 减小内边距节约纸张 */
        page-break-inside: avoid; /* 避免区域内分页 */
    }
    
    /* 调整标题 */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid; /* 标题后避免分页 */
    }
    
    /* 调整表格 */
    table {
        page-break-inside: avoid; /* 避免表格内分页 */
    }
    
    /* 调整图片 */
    img {
        max-width: 100% !important; /* 图片最大宽度 */
        page-break-inside: avoid; /* 避免图片内分页 */
    }
}

/* ===== 无障碍增强 ===== */

/* 为键盘导航添加焦点样式 */
*:focus {
    outline: 2px solid #667eea; /* 蓝色轮廓 */
    outline-offset: 2px; /* 轮廓偏移 */
}

/* 跳转到主内容链接（屏幕阅读器用户） */
.skip-to-main {
    position: absolute; /* 绝对定位 */
    top: -40px; /* 默认隐藏在屏幕上方 */
    left: 6px; /* 左边距 */
    background: #667eea; /* 背景色 */
    color: white; /* 白色文字 */
    padding: 8px; /* 内边距 */
    text-decoration: none; /* 去除下划线 */
    border-radius: 0 0 4px 4px; /* 下方圆角 */
    z-index: 1001; /* 高层级 */
}

/* 焦点时显示跳转链接 */
.skip-to-main:focus {
    top: 0; /* 移动到可见位置 */
}

/* 减少动画对于有前庭疾病的用户 */
@media (prefers-reduced-motion: reduce) {
    /* 禁用所有动画和过渡 */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important; /* 极短动画时间 */
        animation-iteration-count: 1 !important; /* 只播放一次 */
        transition-duration: 0.01ms !important; /* 极短过渡时间 */
        scroll-behavior: auto !important; /* 禁用平滑滚动 */
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    /* 增强边框对比度 */
    .skill-card,
    .project-card,
    .demo-item,
    .contact-form {
        border: 2px solid #000; /* 黑色边框 */
    }
    
    /* 增强按钮对比度 */
    .btn {
        border: 2px solid #000; /* 黑色边框 */
    }
    
    /* 增强链接对比度 */
    a {
        text-decoration: underline; /* 添加下划线 */
    }
}

/* 深色模式支持（如果用户系统设置为深色模式） */
@media (prefers-color-scheme: dark) {
    /* 暂时保持浅色主题，可以在这里添加深色模式样式 */
    /* 这里可以根据需要实现深色模式 */
}