/* ================= 设计令牌 (Design Tokens) ================= */
        :root {
            --bg-page: #ffffff;
            --bg-card: #ffffff;
            --text-primary: #111111;
            --text-secondary: #666666;
            --text-tertiary: #999999;
            --accent-color: #ea580c;
            --border-color: #eeeeee;
            --bg-muted: #f9f9f9;
            --radius-md: 12px;
            --radius-lg: 20px;
            --transition: all 0.3s ease;
            --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-page);
            color: var(--text-primary);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            padding: 1rem 0.5rem;
            overflow-x: hidden;
        }
        a { color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border-color); transition: var(--transition); }
        a:hover { color: var(--accent-color); border-color: var(--accent-color); }

        .container { max-width: 900px; margin: 0 auto; position: relative; }

        /* 打印按钮 */
        .btn-print {
            position: absolute; top: 10px; right: 10px;
            background: var(--text-primary); border: none; color: #ffffff;
            width: 40px; height: 40px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; z-index: 10; transition: var(--transition);
        }
        .btn-print:hover { background: var(--accent-color); transform: scale(1.05); }
        .print-text { display: none; }

        /* ================= 首屏 Hero 区域 ================= */
        .hero { padding: 3rem 1rem 2rem; position: relative; z-index: 1; }
        .hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.5rem; font-family: monospace; font-size: 0.75rem; letter-spacing: 0.5px; }
        .tag { padding: 4px 10px; border: 1px solid var(--border-color); display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; }
        .tag.dark { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }
        .tag-dot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; display: inline-block; }
        .tag-version { color: var(--text-tertiary); margin-top: 10px; width: 100%; letter-spacing: 4px; font-size: 0.7rem; }

        .hero-title-group { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
        .hero-name { font-size: 4.5rem; font-weight: 900; line-height: 1; letter-spacing: -2px; color: var(--text-primary); }
        .hero-name .dot { color: var(--accent-color); }

        /* 圆形真实头像框 */
        .hero-avatar {
            width: 90px; height: 90px; border-radius: 50%; border: 3px solid #fff;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15); overflow: hidden; flex-shrink: 0;
            background: var(--bg-muted); position: relative;
            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .hero-avatar:hover { transform: scale(1.05) rotate(5deg); }
        .hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 2; }
        .hero-avatar::before { content: '头像.jpg'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.6rem; font-family: monospace; color: var(--text-tertiary); z-index: 1; }

        .hero-flog { font-size: 2rem; font-weight: 800; color: var(--text-secondary); margin-bottom: 1.5rem; letter-spacing: -1px; }
        .hero-intro { font-size: 1.05rem; line-height: 1.8; max-width: 650px; color: var(--text-secondary); margin-bottom: 2.5rem; }
        .hero-intro strong { color: var(--text-primary); font-weight: 700; }

        /* 高级极简进场动画 */
        .hero-anim-item { opacity: 0; transform: translateY(20px); animation: heroFadeIn 1s cubic-bezier(0.2, 1, 0.3, 1) forwards; position: relative; }
        @keyframes heroFadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
        .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; }

        .card { margin-bottom: 3rem; }
        .section-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: -0.5px; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; display: inline-block; }

        /* ================= 横向滑动容器 ================= */
        .scroll-pin-wrapper { position: relative; height: 250vh; margin-top: 2rem; }
        .scroll-pin-sticky { position: sticky; top: 5vh; overflow: hidden; padding-bottom: 1rem; z-index: 10; }
        .horizontal-track-container { margin-top: 2rem; width: 100%; }
        .skills-grid.horizontal-track { position: relative; display: flex; flex-direction: row; gap: 2rem; width: max-content; padding: 0 1rem 2rem 1rem; will-change: transform; }

        .window-block {
            position: relative; aspect-ratio: 3 / 4; width: 80vw; max-width: 360px; flex-shrink: 0;
            border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            transition: transform 0.3s ease; background-color: var(--text-primary);
        }
        .window-block:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.25); }

        .panorama-layer { position: absolute; top: 0; left: 0; height: 100%; z-index: 0; pointer-events: none; }
        .scene-bg { width: 100%; height: 100%; background-image: url('../assets/home/photo.jpg'); background-size: cover; background-position: center bottom; will-change: filter; }
        .ambient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: overlay; }
        .sun-element { position: absolute; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 1; filter: blur(2px); will-change: left, top, background, box-shadow, opacity; }

        .block-content { position: relative; z-index: 5; height: 100%; padding: 2.5rem 2rem; display: flex; flex-direction: column; justify-content: space-between; }
        .block-top { font-size: 0.8rem; font-family: monospace; font-weight: 600; opacity: 0.9; margin-bottom: 1.5rem; color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
        .block-bottom { font-size: 0.95rem; font-weight: 700; margin-top: auto; display: flex; align-items: center; gap: 5px; color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
        .title-wrapper { display: flex; align-items: flex-start; gap: 10px; }
        .block-title { font-size: 2.2rem; font-weight: 900; line-height: 1.2; letter-spacing: -1px; position: relative; color: #ffffff; will-change: color;}
        .title-icon { width: 32px; height: 32px; fill: #ffffff; flex-shrink: 0; margin-top: 5px; will-change: fill;}

        /* ================= 教育经历 ================= */
        .academic-section { margin-bottom: 12rem; margin-top: 2rem; }
        .academic-header { margin-bottom: 2rem; }
        .academic-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-color); font-weight: 900; font-size: 0.85rem; letter-spacing: 1px; margin-bottom: 1rem; text-transform: uppercase; }
        .academic-tag svg { width: 18px; height: 18px; fill: currentColor; }
        .academic-tag span { font-family: monospace; opacity: 0.7; color: var(--text-tertiary); }
        .academic-title { font-size: 2.8rem; font-weight: 900; color: var(--text-primary); letter-spacing: -1px; line-height: 1.1; }
        .academic-card { background: var(--bg-muted); padding: 1rem 2rem; position: relative; overflow: hidden; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
        .academic-watermark { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: 220px; height: 220px; fill: var(--text-primary); opacity: 0.03; pointer-events: none; z-index: 0; }
        .academic-row { display: flex; justify-content: space-between; align-items: center; padding: 1.8rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); position: relative; z-index: 1; flex-wrap: wrap; gap: 10px; }
        .academic-row:last-child { border-bottom: none; }
        .academic-label { color: var(--text-tertiary); font-size: 0.95rem; font-weight: 700; min-width: 100px; }
        .academic-value { color: var(--text-primary); font-size: 1.25rem; font-weight: 900; text-align: right; }

        /* ================= 暗黑极简作品列表 (AI) ================= */
        .dark-portfolio-container {
            background-color: #111111; border-radius: var(--radius-lg); padding: 1rem 3rem; box-shadow: 0 20px 50px rgba(0,0,0,0.15); margin-bottom: 8rem;
        }

        .dp-item {
            position: relative; display: flex; align-items: center; padding: 3rem 2rem; margin: 0 -2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15);
            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease; cursor: pointer; z-index: 1; border-radius: 16px; overflow: hidden;
        }
        .dp-item:last-child { border-bottom: none; }

        /* 垂直爆发的渐变反馈层 */
        .dp-item::before {
            content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #f8f9fa, #ffffff, #f8f9fa);
            transform: translateY(-50%) scaleY(0); transform-origin: center; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: -1; border-radius: 16px;
        }

        .dp-item:hover { transform: translateX(15px); border-color: transparent; }
        .dp-item:hover::before { transform: translateY(-50%) scaleY(1); }

        /* 核心修改：大幅加粗序号字体描边 */
        .dp-number { font-family: 'Impact', sans-serif; font-size: 5rem; color: transparent; -webkit-text-stroke: 3px rgba(255, 255, 255, 0.8); letter-spacing: 2px; min-width: 100px; line-height: 1; transition: -webkit-text-stroke-color 0.4s ease; }
        .dp-text { flex: 1; padding-left: 2rem; }
        .dp-title { font-family: 'Impact', 'Arial Black', sans-serif; font-size: 2.2rem; color: #ffffff; letter-spacing: 1px; margin-bottom: 0.8rem; text-transform: uppercase; transition: color 0.4s ease; }
        .dp-desc { color: #a3a3a3; font-size: 1rem; letter-spacing: 1px; font-weight: 500; transition: color 0.4s ease; }
        .dp-date { font-family: monospace; color: #a3a3a3; font-size: 1rem; letter-spacing: 3px; min-width: 100px; text-align: right; font-weight: 600; transition: color 0.4s ease; }

        /* 海蓝色文字反馈 */
        .dp-item:hover .dp-number { -webkit-text-stroke-color: #111111; }
        .dp-item:hover .dp-title { color: #00b4d8; }
        .dp-item:hover .dp-desc { color: #444444; }
        .dp-item:hover .dp-date { color: #444444; }

        /* ================= 鼠标悬浮图片弹窗特效 (减少1/4) ================= */
        .cursor-follower {
            position: fixed; top: 0; left: 0;
            width: 270px; /* 精确缩小至原 360px 的 1/4 (约 270px) */
            aspect-ratio: 16/9; pointer-events: none; z-index: 9999; opacity: 0;
            transform: translate(-50%, -50%) scale(0.5) rotate(-15deg); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.4); background: #222; display: flex; align-items: center; justify-content: center;
        }
        .cursor-follower.active { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(5deg); }
        .cursor-follower img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; }

        @keyframes followerImgSpin { 0% { transform: rotate(-25deg) scale(0.6); opacity: 0; filter: blur(5px); } 100% { transform: rotate(0deg) scale(1); opacity: 1; filter: blur(0px); } }
        .follower-placeholder { position: absolute; font-family: monospace; color: rgba(255,255,255,0.4); font-size: 1.2rem; font-weight: bold; z-index: 1; }

        /* ================= 主页 椭圆 3D 无限滚动轮播 ================= */
        .elliptical-slider-wrapper {
            position: relative;
            width: 100%;
            height: 60vh;
            min-height: 450px;
            perspective: 1200px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at center, rgba(0,0,0,0.03) 0%, transparent 70%);
            margin-top: 1rem;
            margin-bottom: 2rem;
            border-radius: var(--radius-lg);
            /* 防止拖动鼠标变蓝 */
            user-select: none;
            -webkit-user-select: none;
        }
        .elliptical-container {
            position: relative;
            width: 100%;
            height: 100%;
            /* 移除 preserve-3d, 强制按照 CSS 的 z-index 来做严格排序避免穿模 */
            transform-style: flat;
        }
        .elliptical-item {
            position: absolute;
            top: 50%; left: 50%;
            width: 45vw; max-width: 600px;
            aspect-ratio: 16/9;
            background: #111;
            border-radius: 12px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            /* 去除边框，只保留过渡效果 */
            transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, z-index 0.6s ease;
            overflow: hidden; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transform-origin: center;
            transform: translate(-50%, -50%);
        }
        .elliptical-item img {
            width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; z-index: 2; position: relative;
        }
        .elliptical-item::before {
            content: attr(data-img); position: absolute; font-family: monospace; font-size: 1.2rem; color: rgba(255,255,255,0.4); font-weight: bold; z-index: 1; pointer-events: none;
        }
        /* 空间暗化遮罩 */
        .elliptical-item::after {
            content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); transition: background 0.6s ease; pointer-events: none; z-index: 3;
        }
        .elliptical-item.active::after { background: transparent; }
        .elliptical-item.active { box-shadow: 0 25px 50px rgba(0,0,0,0.4); z-index: 10 !important; }

        /* 底部控制按钮布局 */
        .elliptical-nav-container {
            width: 100%;
            max-width: 850px;
            margin: 0 auto 6rem;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            /* 防止按钮拖动被选中 */
            user-select: none;
            -webkit-user-select: none;
        }
        .elliptical-line {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--accent-color);
            z-index: 1;
        }
        .elliptical-nav-buttons {
            position: relative;
            display: flex;
            gap: 15px;
            background: var(--bg-page);
            padding: 0 20px;
            z-index: 2;
        }
        .ell-btn {
            width: 40px; height: 40px; border-radius: 4px; background: #ffffff; color: #111;
            border: 1px solid #cccccc; cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .ell-btn:hover { background: #f0f0f0; border-color: #999; }
        .ell-btn svg { width: 20px; height: 20px; stroke-width: 2.5; pointer-events: none; }


        /* ================= 滚动渐显动画特效 ================= */
        .fade-in-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.2, 1, 0.3, 1), transform 0.8s cubic-bezier(0.2, 1, 0.3, 1); will-change: opacity, transform; }
        .fade-in-up.visible { opacity: 1; transform: translateY(0); }
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }

        @media (max-width: 768px) {
            .academic-row { flex-direction: column; align-items: flex-start; padding: 1.2rem 0; }
            .academic-value { text-align: left; font-size: 1.15rem; }
            .academic-title { font-size: 2.2rem; }

            .dark-portfolio-container { padding: 1rem 1rem; }
            .dp-item { flex-direction: column; align-items: flex-start; padding: 2rem 1.5rem; margin: 0 -0.5rem; gap: 0.5rem; border-radius: 12px; }
            .dp-item::before { border-radius: 12px; }
            /* 手机端进一步优化数字显示，避免换行切断 */
            .dp-number { font-size: 3.5rem; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.8); }
            .dp-text { padding-left: 0; margin-top: 0.5rem; width: 100%; }
            .dp-title { font-size: 1.8rem; line-height: 1.1; margin-bottom: 0.5rem; }
            /* 修复文字截断问题，确保完整展示 */
            .dp-desc { font-size: 0.9rem; line-height: 1.6; word-break: keep-all; padding-right: 5px; }
            .dp-date { text-align: left; margin-top: 1rem; }

            .cursor-follower { display: none !important; }

            .elliptical-item { width: 75vw; }
            .elliptical-slider-wrapper { height: 40vh; min-height: 300px; }
            .hero-avatar { width: 70px; height: 70px; }
        }

        .footer { text-align: left; padding: 2rem 1rem; border-top: 1px solid var(--border-color); color: var(--text-tertiary); font-size: 0.85rem; font-family: monospace; margin-top: 4rem;}

        @media (min-width: 768px) {
            body { padding: 3rem 2rem; }
            .btn-print { width: auto; height: auto; border-radius: 0; padding: 10px 20px; font-weight: 800; letter-spacing: 1px;}
            .print-text { display: inline; margin-left: 8px; }
            .hero { padding: 2rem 0 4rem; }
            .hero-name { font-size: 7rem; }
            .hero-avatar { width: 110px; height: 110px; border-width: 5px; }
            .hero-flog { font-size: 2.8rem; }
            .hero-intro { font-size: 1.15rem; }
            .skills-grid.horizontal-track { gap: 3rem; padding: 0 2rem 2rem 2rem; }
            .window-block { max-width: 380px; }
            .edu-item { flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem;}
        }

        @media print {
            body { background: white; color: black; padding: 0; }
            .container { max-width: 100%; width: 100%; }
            .btn-print, .footer, .cursor-follower { display: none !important; }
            .hero { padding: 0 0 2rem; }
            .scroll-pin-wrapper { height: auto !important; margin-top: 2rem !important; }
            .scroll-pin-sticky { position: static !important; overflow: visible !important; }
            .skills-grid.horizontal-track { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1rem !important; width: 100% !important; padding: 0 !important; transform: none !important; }
            .window-block { width: auto !important; max-width: none !important; aspect-ratio: auto !important; background: #333 !important; }
            .panorama-layer { display: none !important; }
            .academic-card { border: 1px solid #ddd; }
            .dark-portfolio-container { background-color: white !important; color: black !important; box-shadow: none !important; border: 1px solid #ddd; }
            .dp-number { -webkit-text-stroke: 1.5px black !important; }
            .dp-title, .dp-desc, .dp-date { color: black !important; }
            .dp-item { border-bottom: 1px solid #ccc !important; padding: 1.5rem 0 !important; margin: 0 !important; }
            .dp-item::before { display: none !important; }
            .elliptical-slider-wrapper, .elliptical-nav-container { display: none !important; }
        }