:root {
            --bg-light: #ffffffd1;
            --bg-medium: #cfcfcfd1;
            --bg-dark: #616161d1;
            --text-light: #ffffff;
            --text-dark: #616161;
            --transition: all 0.3s ease;
        }
 
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--bg-light);
            background-image: url('background/static/2025-03.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }
		
		input {
		background-color: #cfcfcf00;
		}
		
/* 视差系统核心样式 */
#parallax-bg, #parallax-fg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  will-change: transform;
}
 
/* 背景层扩大防穿帮 */
#parallax-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate3d(0,0,0); /* 硬件加速 */
}
 
/* 前景层全屏设置 */
#parallax-fg {
  background-size: cover !important; /* 强制全屏 */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0; /* 默认隐藏 */
  transform: translate3d(0,0,0);
}
 
/* 视差激活时的效果 */
body.parallax-active #parallax-fg {
  opacity: 1;
  transition: transform 0.05s linear;
}
 
        /* 粒子效果 */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }
 
        /* 名片容器 */
        .card-container {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 50px;
            z-index: 10;
            transition: var(--transition);
        }
 
        @media (max-width: 1024px) {
            .card-container {
                right: 50%;
                transform: translate(50%, -50%);
            }
        }
 
        /* 名片 */
        .card {
            width: 350px;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            background-color: var(--bg-light);
            position: relative;
            transition: var(--transition);
            animation: float 6s ease-in-out infinite;
            transform-style: preserve-3d;
            will-change: transform;
        }
 
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0.5deg); }
            50% { transform: translateY(-10px) rotate(-0.5deg); }
        }
 
        /* 头像 */
        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: block;
            object-fit: cover;
            border: 3px solid #f5f5f5;
            transition: var(--transition);
        }
 
        .avatar:hover {
            transform: scale(1.05);
        }
 
        /* 名称 */
        .name {
            text-align: center;
            margin-bottom: 10px;
            color: var(--text-dark);
			line-height:160%;
        }
 
        .name h1 {
            font-size: 24px;
            font-weight: 600;
            margin: 0;
        }
 
        .name h2 {
            font-size: 16px;
            font-weight: 400;
            margin: 5px 0 0;
            color: #888;
        }
 
        /* 职业 */
        .occupation {
            text-align: center;
            margin: 10px 0;
            color: var(--text-dark);
            font-size: 18px;
            font-weight: 500;
        }
 
        /* 按钮 */
        .buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
 
        .btn {
            padding: 8px 15px;
            border-radius: 20px;
            background-color: transparent;
            border: 1px solid var(--text-dark);
            color: var(--text-dark);
            cursor: pointer;
            transition: var(--transition);
            font-size: 14px;
        }
 
        .btn:hover {
            background-color: var(--text-dark);
            color: var(--bg-light);
        }
 
        /* 社交图标 */
        .social-icons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 15px 0;
        }
 
        .social-icon {
            font-size: 20px;
            color: var(--text-dark);
            transition: var(--transition);
        }
 
        .social-icon:hover {
            transform: translateY(-3px);
        }
 
        /* 邮箱 */
        .email {
            text-align: center;
            color: var(--text-dark);
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

         .text {
            text-align: center;
            font-size: 14px;
            margin-bottom: 10px;
            color: var(--text-dark);
        }
 
        /* 主题切换 */
        .theme-toggle {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 8px;
            z-index: 20;
        }
 
        .theme-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }
 
        .theme-btn.light {
            background-color: var(--bg-light);
            border: 1px solid #ddd;
        }
 
        .theme-btn.medium {
            background-color: var(--bg-medium);
        }
 
        .theme-btn.dark {
            background-color: var(--bg-dark);
        }
 
        .theme-btn.active {
            transform: scale(1.1);
            box-shadow: 0 0 0 2px var(--text-dark);
        }
		
		.background-image {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: background-image 1s ease;
        }
 
        /* 背景图标 */
        .background-icon {
            position: fixed;
            left: 30px;
            bottom: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: var(--transition);
        }
 
        .background-icon:hover {
            background-color: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
 
        .background-icon::after {
            content: '查看迄今为止使用过的背景！';
            position: absolute;
            left: 60px;
            white-space: nowrap;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            opacity: 0;
            transition: var(--transition);
        }
 
        .background-icon:hover::after {
            opacity: 1;
        }
 
        /* 弹窗 */
        .modal {
            position: fixed;
            top: 50%;
            left: 100px;
            transform: translateY(-50%);
            width: 400px;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            background-color: var(--bg-light);
            z-index: 100;
            transition: var(--transition);
            display: none;
            color: var(--text-dark);
        }
 
        .modal.active {
            display: block;
        }
 
        .modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 20px;
            cursor: pointer;
            color: var(--text-dark);
        }
 
        .modal-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
            text-align: center;
        }
 
        .modal-content {
            max-height: 70vh;
            overflow-y: auto;
            padding-right: 10px;
        }
 
        @media (max-width: 1024px) {
            .modal {
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80%;
                max-width: 350px;
            }
        }
 
        /* 社团项目 */
        .group-item {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
 
        .group-logo {
            width: 50px;
            height: 50px;
            border-radius: 5px;
            object-fit: cover;
            flex-shrink: 0;
            background-color: #e7e7e7;
        }
 
        .group-info h3 {
            margin: 0 0 5px;
            font-size: 16px;
        }
 
        .group-info p {
            margin: 0;
            font-size: 14px;
            color: #666;
        }
 
        /* 网站卡片 */
        .website-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
 
        .website-card {
            padding: 15px;
            border-radius: 10px;
            background-color: #f9f9f9;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
        }
 
        .website-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
 
        .website-logo {
            width: 40px;
            height: 40px;
            margin: 0 auto 10px;
            object-fit: contain;
        }
 
        .website-card h3 {
            margin: 5px 0;
            font-size: 14px;
        }
 
        .website-card p {
            margin: 0;
            font-size: 12px;
            color: #888;
        }
 
        /* 暗色模式 */
        body.dark {
            background-color: var(--bg-dark);
        }
 
        .dark .card,
        .dark .modal {
            background-color: var(--bg-dark);
            color: var(--text-light);
        }
 
        .dark .name h1,
        .dark .text,
        .dark .occupation,
        .dark .email,
        .dark .btn,
        .dark .social-icon,
        .dark .group-info h3,
        .dark .website-card h3,
        .dark .modal-title,
        .dark .modal-close {
            color: var(--text-light);
        }
 
        .dark .name h2,
        .dark .group-info p,
        .dark .website-card p {
            color: rgba(255, 255, 255, 0.7);
        }
 
        .dark .btn {
            border-color: var(--text-light);
        }
 
        .dark .btn:hover {
            background-color: var(--text-light);
            color: var(--bg-dark);
        }
 
        .dark .website-card {
            background-color: rgba(255, 255, 255, 0.1);
        }
 
        /* 中等模式 */
        body.medium {
            background-color: var(--bg-medium);
        }
 
        .medium .card,
        .medium .modal {
            background-color: var(--bg-medium);
            color: var(--text-dark);
        }
 
        .medium .name h1,
        .medium .occupation,
        .medium .email,
        .medium .btn,
        .medium .social-icon,
        .medium .group-info h3,
        .medium .website-card h3,
        .medium .modal-title,
        .medium .modal-close {
            color: var(--text-dark);
        }
 
        .medium .name h2,
        .medium .group-info p,
        .medium .website-card p {
            color: #666;
        }
 
        .medium .btn {
            border-color: var(--text-dark);
        }
 
        .medium .btn:hover {
            background-color: var(--text-dark);
            color: var(--bg-medium);
        }
		
.parallax-effect {
  /* 背景层扩大防穿帮 */
  & #parallax-bg {
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
  }
 
  /* 前景层放大 */
  & #parallax-fg {
    background-size: 50% auto;
    background-position: center 80%;
    opacity: 1;
    transition: transform 0.1s linear;
    
    /* 硬件加速 */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }
 
  /* 鼠标视差效果 */
  @media (hover: hover) {
    & #parallax-bg {
      transition: transform 0.5s ease-out;
    }
    
    &:hover #parallax-bg {
      transform: translate3d(
        calc(var(--mouse-x) * 10px), 
        calc(var(--mouse-y) * 10px), 
        0 
      );
    }
    
    &:hover #parallax-fg {
      transform: translate3d(
        calc(var(--mouse-x) * 20px), 
        calc(var(--mouse-y) * 20px), 
        0
      );
    }
  }
 
  /* 移动端适配 */
  @media (max-width: 768px) {
    & #parallax-bg {
      top: -5%;
      left: -5%;
      width: 110%;
      height: 110%;
    }
    
    & #parallax-fg {
      background-size: 70% auto;
      background-position: center 70%;
    }
  }
}

/* 防止静态背景被视差影响 */
body:not(.parallax-active) #parallax-bg {
}
 
/* 首次加载前景控制 */
#parallax-fg[data-firstload] {
  opacity: 1 !important;
  pointer-events: none;
}