:root {
            --bg: #050505;
            --text-main: #ffffff;
            --text-muted: #888888;
            --accent: #ffffff;
            --easing: cubic-bezier(0.19, 1, 0.22, 1); /* 苹果风格的平滑曲线 */
        }

        /* --- 0. 全局设置 & 动态噪点质感 --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }

        /* overflow-x 必须同时加在 html 上：只写在 body 上时，
           根元素仍会因为 .hero-bg 的 scale(1.1) 和未揭示元素的 translate 产生横向滚动，
           部分移动端浏览器会因此整页缩小或能左右拖动 */
        html {
            overflow-x: hidden;
        }

        body {
            background-color: var(--bg);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
            overflow-x: hidden;
            position: relative;
            width: 100%;
        }

        body.custom-cursor-enabled,
        body.custom-cursor-enabled * {
            cursor: none; /* 仅在脚本确认可用时隐藏系统光标 */
        }

        html.modal-open,
        body.modal-open {
            overflow: hidden;
        }

        /* 电影胶片噪点层 */
        .noise-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.05;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIj48ZmlsdGVyIGlkPSJub2lzZSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNjUiIG51bSBPY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMSIvPjwvc3ZnPg==');
        }

        /* 自定义光标 */
        .cursor {
            width: 20px; height: 20px;
            border: 1px solid white;
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 10000;
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s, background 0.3s;
            mix-blend-mode: difference;
        }
        .cursor.hovered {
            width: 50px; height: 50px;
            background: white;
            mix-blend-mode: difference;
            border: none;
        }

        /* 在样式表顶部注册一个变量，用于实现光圈缩放的丝滑动画 */
        @property --cursor-radius {
            syntax: '<length>';
            initial-value: 10px;
            inherits: true;
        }

        nav {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 120px;
            z-index: 1000;
            background: linear-gradient(to bottom, rgba(5,5,5,0.8) 0%, rgba(5,5,5,0) 100%);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
        }

        /* 绝对定位让两个 ul 完美重叠，同时坐标系与全屏鼠标完全对齐 */
        nav ul {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-top: 30px;
            gap: 60px;
            list-style: none;
            margin: 0;
        }

        .nav-base { z-index: 1; }
        .nav-bold {
            z-index: 2;
            pointer-events: none; /* 让鼠标事件穿透到底层 */
            /* 核心裁剪魔法：只显示光标半径内的加粗区域 */
            clip-path: circle(var(--cursor-radius, 10px) at var(--mouse-x, -100px) var(--mouse-y, -100px));
            /* 过渡动画只作用于半径，保证坐标跟随无延迟 */
            transition: --cursor-radius 0.3s var(--easing);
        }

        nav a {
            color: #fff;
            text-decoration: none;
            font-size: 18px;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }

        /* 底层细体样式 */
        .nav-base a {
            font-weight: 500;
            opacity: 0.7;
            transition: opacity 0.3s ease;
        }
        .nav-base a:hover { opacity: 1; }

        /* 顶层光圈内样式：纯白极粗体（配合光标的反色，会变成纯黑！） */
        .nav-bold a {
            font-weight: 500; /* 核心修复：字重必须和底层的 500 完全一致，杜绝任何物理错位 */
            opacity: 1;
            text-shadow: none; /* 保持无阴影，防止反色后发糊 */
            -webkit-text-stroke: 1.4px #fff; /* 用 0.4px 的精准描边来模拟加粗，字体宽度不会改变，边缘绝对锐利 */
        }

        /* --- 2. Hero Section (视差入场) --- */
        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            perspective: 1000px;
            overflow: hidden; /* 裁掉被放大到 1.1 倍、并随鼠标位移的背景层 */
        }

        /* 首屏图与下方内容的衔接：底部叠一层渐变到页面底色，消除硬切边。
           不直接给 .hero-bg 加 mask —— 它带 scale(1.1) 且随鼠标位移，
           遮罩会跟着一起缩放偏移，渐变根本落不到可视边缘上。
           这层独立的叠加层不受变换影响，接缝始终干净。 */
        .hero::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 40%;
            background: linear-gradient(to bottom,
                rgba(5, 5, 5, 0) 0%,
                rgba(5, 5, 5, 0.55) 55%,
                rgba(5, 5, 5, 0.88) 80%,
                var(--bg) 100%);
            pointer-events: none;
            z-index: 1; /* 压住背景图，但在 .hero-content (z-index: 2) 之下 */
        }

        .hero-bg {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            /* 原图是 5184×3456 / 1.2MB 的大底片，直接交给 OSS 实时压到 1920 宽的 webp（约 65KB）。
               注意：这里的 URL 必须和 <head> 里 preload 的完全一致，否则会被当成两个资源、白下一次。 */
            background-image: url('https://jaychan-website.oss-cn-hangzhou.aliyuncs.com/images/hero-bg.jpg?x-oss-process=image/resize,w_1920/format,webp/quality,q_80');
            background-size: cover;
            background-position: center;
            /* 保持这个透明度 0.3，配合你的胶片噪点层，文字会非常清晰 */
            opacity: 0.3;
            transform: scale(1.1);
            transition: transform 0.2s ease-out;
        }

        /* --- Hero Section 排版优化 --- */
        .hero-content {
            z-index: 2;
            text-align: center;
            mix-blend-mode: normal; /* 保持文字绝对清晰 */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .hero-title {
            font-size: clamp(2.5rem, 6vw, 5rem);
            font-weight: 800;
            letter-spacing: 0.2em; /* 拉开字距，增加电影感 */
            opacity: 0;
            transform: translateY(30px);
            animation: textReveal 1.5s var(--easing) forwards 0.5s;
            text-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }

        .hero-subtitle {
            font-size: 0.85rem;
            letter-spacing: 0.4em;
            text-transform: uppercase;
            color: var(--text-muted);
            border-top: 1px solid rgba(255,255,255,0.2);
            border-bottom: 1px solid rgba(255,255,255,0.2);
            padding: 10px 0;
            width: fit-content;
            opacity: 0;
            transform: translateY(20px);
            animation: textReveal 1.5s var(--easing) forwards 0.8s;
        }

        .hero-manifesto {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #ccc;
            letter-spacing: 2px;
            font-weight: 300;
            margin-top: 10px;
            opacity: 0;
            transform: translateY(20px);
            animation: textReveal 1.5s var(--easing) forwards 1.1s;
        }

        /* --- 3. 动态滚动区域 (Scroll Sections) --- */
        section {
            max-width: 2160px;    /* 设置你想要的最大宽度，通常 1200px - 1440px 比较高级 */
            margin: 0 auto;       /* 关键：让容器在超过 1400px 时自动居中 */
            padding: 180px 10% 100px; /* 顶部留白更大，版块之间更有呼吸感 */
            position: relative;
        }

        /* --- About Section (并排布局) --- */
        .about-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .about-text h2 {
            font-size: 3rem; margin-bottom: 30px; line-height: 1.1;
        }
        .highlight { color: #fff; font-weight: 600; }
        .text-body { color: var(--text-muted); font-size: 1.1rem; line-height: 1.8; margin-bottom: 20px; }

        .about-image-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: 4px;
        }
        .about-image {
            width: 100%; height: auto; display: block;
            /* 压暗亮度(0.6)，微降饱和度(0.8)，增强对比度，拒绝黑白 */
            filter: brightness(0.6) saturate(0.8) contrast(1.1);
            transition: filter 0.5s, transform 0.5s;
        }
        .about-image-wrapper:hover .about-image {
            /* 鼠标悬停时：恢复原图的亮度和色彩，并微微放大 */
            filter: brightness(1) saturate(1) contrast(1);
            transform: scale(1.05);
        }

        /* --- Projects (折叠卡片效果) --- */
        .project-list {
            display: flex;
            flex-direction: column;
            gap: 2px; /* 极细间距 */
            border-top: 1px solid #222;
        }

        .project-item {
            padding: 40px 0;
            border-bottom: 1px solid #222;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            transition: background 0.3s;
            position: relative;
        }

        .project-item:hover {
            background: #111;
        }

        .project-item:hover .project-title { padding-left: 20px; color: #fff; }

        .project-year { font-family: monospace; color: #444; font-size: 1rem; }
        .project-title {
            font-size: 2.5rem; font-weight: 700; color: #888;
            transition: all 0.4s var(--easing);
        }
        .project-tags { font-size: 0.9rem; color: #555; text-align: right; }

        /* --- Audio Player (极简波形风格) --- */
        .audio-wrapper {
            margin-top: 60px;
            border: 1px solid #222;
            border-radius: 20px;
            padding: 25px 40px;
            background: rgba(20,20,20,0.5);
            backdrop-filter: blur(10px);
        }

        /* 统一版块大标题样式 */
        .section-header {
            font-size: 2.5rem;
            letter-spacing: 2px;
            margin-bottom: 40px;
            line-height: 1.1;
            color: #fff;
        }

        /* --- 替换原有的 .category-title 样式 --- */
        .category-title {
            color: #ffffff;      /* 提亮文字颜色使其更醒目 */
            font-size: 1.5rem;   /* 放大字体 (从 1.2rem 提升至 1.5rem) */
            font-weight: 700;    /* 加粗字体 */
            letter-spacing: 2px;
            margin: 0 0 20px 0;  /* 统一外边距，移除旧的顶部边距 */
            padding-bottom: 12px;/* 给底部的细线留出呼吸空间 */
            position: relative;  /* 必须添加，为绝对定位的细线提供位置参考 */
            border-bottom: none; /* 清除原本的单调实线边框 */
        }

        /* --- 新增：左右淡出的分隔细线 --- */
        .category-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            /* 核心逻辑：利用线性渐变实现淡出效果。
               因为文字是左对齐的，所以让最亮的高光点落在左侧 10% 处，向右慢慢消失，视觉上最自然 */
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 10%, rgba(255,255,255,0) 100%);
        }
        .category-title:first-child {
            margin-top: 0; /* 第一个标题不需要顶部间距 */
        }

        /* --- Audio Glow Effect (合成器呼吸光晕) --- */
        .track {
            display: flex;
            align-items: center;
            padding: 15px 20px; /* 增加内边距，让发光更有包围感 */
            border-bottom: 1px solid #333;
            border-radius: 16px; /* 圆角配合发光 */
            margin-bottom: 5px;
            border: 1px solid transparent; /* 预留边框位置防止跳动 */
            transition: all 0.5s var(--easing);
        }
        .track:last-child { border-bottom: 1px solid transparent; }

        /* 播放时的激活状态 */
        .track.playing {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.15);
            /* 调用呼吸动画 */
            animation: synthGlow 2.5s infinite alternate ease-in-out;
            transform: scale(1.01); /* 播放时微微浮起 */
        }

        /* 呼吸光晕动画关键帧 */
        @keyframes synthGlow {
            0% { box-shadow: 0 0 10px rgba(255,255,255,0.02), inset 0 0 5px rgba(255,255,255,0.01); }
            100% { box-shadow: 0 0 35px rgba(255,255,255,0.12), inset 0 0 15px rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.3); }
        }

        /* 播放按钮（唯一定义，原先重复声明两次且 transition 互相覆盖） */
        .play-btn {
            width: 40px; height: 40px;
            flex-shrink: 0;
            border: 1px solid #fff;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; margin-right: 20px;
            /* 显式列出属性：既保留按下时的缩放反馈，也让播放态的反色能过渡 */
            transition: transform 0.2s, background 0.3s, color 0.3s, box-shadow 0.3s;
        }
        .play-btn:active { transform: scale(0.9); }
        .track.playing .play-btn {
            background: #fff;
            color: #000; /* 播放时按钮反色，视觉更聚焦 */
            box-shadow: 0 0 15px rgba(255,255,255,0.5);
        }

        /* --- Bento Grid ---
           桌面一行三个（此前是整行大卡，一行只放得下一个）。
           卡片保持原本的样式：左上角年份、右上角项目名、配图垫在下半部。 */
        /* 影像板块与项目板块共用同一套网格轨道，列数与卡片宽度在任何宽度下都一致。
           以前视频是 auto-fit minmax(400px)（会随宽度自动降列），
           项目却写死 repeat(3, 1fr)，于是窗口一窄就出现「视频两个、项目三个」的脱节。

           用 auto-fill 而不是 auto-fit：auto-fit 会折叠空轨道，
           项目只有 3 个、视频有 6 个，超宽屏下项目会撑开去填满多余的列，
           两边卡片宽度就对不上了（实测 1920 下 353px vs 482px）。
           auto-fill 保留空轨道，代价是行尾可能留空位，但宽度严格一致。

           最小轨道取 320px：1440 宽下两边都是三列，1024 下都退到两列。 */
        .video-grid,
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 32px;
        }

        .bento-card {
            background: rgba(20, 20, 20, 0.4);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 22px;
            padding: 24px;
            /* 330px：1024px 平板档卡片只有 253px 宽，副标题会折到三行、
               文字底边落在 138px，配下面 52% 的配图（顶边 158px）才不会打架 */
            min-height: 330px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* 文案靠上，下半部留给配图 */
            position: relative;
            overflow: hidden;
            transition: transform 0.5s var(--easing), border-color 0.4s, box-shadow 0.5s, background 0.5s;
        }

        /* 苹果风光泽悬浮效果：使用径向渐变模拟光源 */
        .bento-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at top right, rgba(255,255,255,0.15), transparent 60%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 1;
            pointer-events: none;
        }

        .bento-card:hover {
            transform: translateY(-8px);
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 40px rgba(255,255,255,0.05);
            background: rgba(30, 30, 30, 0.6);
        }

        .bento-card:hover::before { opacity: 1; }

        .bento-content {
            position: relative;
            z-index: 2;
        }

        /* 年份靠左、项目名靠右，同处一行并按基线对齐 —— 这才是真的「平齐」。
           用 flex 而不是绝对定位：标题过长时会在自己的格子里换行，
           年份依然锚在首行不跑位，任何宽度下都不会撞在一起。 */
        .project-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }

        .bento-year {
            font-family: "SF Mono", "Menlo", monospace;
            color: rgba(255, 255, 255, 0.16);
            font-size: 2rem;
            font-weight: 800;
            flex-shrink: 0;   /* 年份不参与压缩，永远完整显示 */
            line-height: 1;
            pointer-events: none;
        }

        .bento-title {
            font-size: 1.45rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.5px;
            line-height: 1.25;
            text-align: right; /* 靠右，与左侧年份形成呼应 */
        }

        .bento-tags {
            font-size: 0.85rem;
            color: var(--text-muted);
            letter-spacing: 0.5px;
            line-height: 1.5;
            text-align: right;
        }

        /* 给文字区域一个固定宽度，强制对齐（移动端在文件末尾的媒体查询里改为满宽） */
        .track-info {
            width: 220px;   /* 设定固定宽度 */
            flex-shrink: 0; /* 防止屏幕变小时文字被挤压变形 */
        }

        /* 修改：真实波形图容器样式 */
        .waveform {
            flex-grow: 1; /* 占据剩余的全部空间 */
            width: 0;     /* 必须设为0，强制让 flex-grow 接管宽度分配 */
            height: 40px;
            margin-left: 30px;
            position: relative;
            cursor: pointer;
        }
        /* 波形就绪前的骨架占位：一排等高细条，节奏与真实波形一致（2px 条 + 2px 间隙），
           这样从占位切到波形时不会有"跳一下"的感觉。
           正常情况下峰值是本地同步绘制的，这层几乎看不到；
           它兜的是 peaks.json 慢/失败、或退回逐首解码那几种情况。 */
        .waveform::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 12px;
            transform: translateY(-50%);
            background: repeating-linear-gradient(to right,
                rgba(255, 255, 255, 0.13) 0 2px,
                transparent 2px 4px);
            animation: waveformSkeleton 1.6s ease-in-out infinite;
            pointer-events: none;
        }

        /* 波形画好后撤掉占位 */
        .waveform.is-ready::before { content: none; }

        @keyframes waveformSkeleton {
            0%, 100% { opacity: 0.4; }
            50%      { opacity: 0.85; }
        }

        /* 隐藏 WaveSurfer 内部生成的 audio 标签。
           注意排除 .native-audio-fallback —— 那是降级时唯一能播放的控件，
           被这条规则连带隐藏的话，降级路径上页面会一片空白、彻底没法听。 */
        .track audio:not(.native-audio-fallback) { display: none; }

        /* --- Video Showcase (影像配乐板块) ---
           网格轨道在上面与 .bento-grid 一起定义，这里只留本板块独有的间距。
           注意别在这里重复声明 grid-template-columns：同特异度下后写的会覆盖共用规则，
           两个板块就又脱节了。 */
        .video-grid {
            margin-top: 30px;
        }

        .video-card {
            background: rgba(20, 20, 20, 0.5);
            border: 1px solid #222;
            border-radius: 20px;
            overflow: hidden;
            backdrop-filter: blur(10px);
            transition: transform 0.4s var(--easing), border-color 0.4s;
        }

        .video-card:hover {
            transform: translateY(-8px);
            border-color: #555;
        }

        /* 16:9 视频容器，确保不同视频高度一致 */
        .video-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%;
            background: #000;
        }

        .video-info {
            padding: 25px;
        }

        .video-title {
            color: #fff;
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 8px;
            letter-spacing: 1px;
        }

        .video-desc {
            color: var(--text-muted);
            font-size: 0.9rem;
            letter-spacing: 0.5px;
        }

        /* 动画定义 */
        @keyframes textReveal {
            to { opacity: 1; transform: translateY(0); }
        }

        /* 修复：将渐显效果限制在背景图层，不影响文字 */
        .project-card {
            position: relative;
            overflow: hidden;
            background-color: rgba(20, 20, 20, 0.4); /* 基础底色 */
            transition: all 0.5s var(--easing);
        }

        /* 配图垫在卡片下半部，向上渐隐。
           一行三个之后卡片接近方形，原先「图占右侧 60%」会把图挤成一条竖带，
           所以统一改为铺满宽度、压在下半部——和文案的上下分区正好错开。 */
        .project-card::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 52%;

            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            background-image: var(--bg-img);

            /* 顶端完全透明、向下渐显，彻底消除硬切线 */
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 55%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 55%);

            z-index: 0;
            transition: transform 0.6s var(--easing), opacity 0.6s;
            opacity: 0.85;
        }

        .project-card .bento-content {
            position: relative;
            z-index: 2;
        }

        /* 悬停交互：文字变亮，图片放大 */
        .project-card:hover {
            background-color: rgba(35, 35, 35, 0.6);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .project-card:hover::after {
            transform: scale(1.08); /* 图片放大 */
            opacity: 1; /* 图片变亮 */
        }

        /* --- 1. 基础动画类：统一控制透明度和过渡节奏 ---
           这一条同时是「飞出」时的过渡：移除 .animate-active 后元素回到本状态，
           用的就是这里声明的时长。飞出比飞入快一些（0.55s vs 1.0s），
           因为退出动画拖太久会让人觉得页面黏手。 */
        .apple-animate {
            opacity: 0;
            transition: opacity 0.55s cubic-bezier(0.4, 0, 0.6, 1),
            transform 0.55s cubic-bezier(0.4, 0, 0.6, 1);
            transition-delay: 0s; /* 飞出不错峰，立刻开始 */
            will-change: opacity, transform; /* 开启硬件加速，防止滚动掉帧 */
        }

        /* --- 2. 方向控制类：定义元素在页面外的初始位置 --- */
        .from-bottom { transform: translate3d(0, 60px, 0) scale(0.99); }  /* 从下往上 */
        .from-top    { transform: translate3d(0, -60px, 0) scale(0.99); } /* 从上往下 */
        .from-left   { transform: translate3d(-80px, 0, 0) scale(0.99); } /* 从左往右 */
        .from-right  { transform: translate3d(80px, 0, 0) scale(0.99); }  /* 从右往左 */

        /* --- 3. 激活状态：当滚动到视口时，不管从哪来，都回到原位 ---
           这一条是「飞入」时的过渡，保留原本丝滑的苹果风曲线与 1.0s 时长 --- */
        .apple-animate.animate-active {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
            transition: opacity 1.0s cubic-bezier(0.2, 0.8, 0.2, 1),
            transform 1.0s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        /* --- 错峰延迟类（用于瀑布流） ---
           只在飞入时生效：写成 .animate-active.delay-N 而不是裸的 .delay-N。
           否则飞出也要等 0.15~0.75s 才开始，元素早滑出屏幕了动画还没走完。 */
        .animate-active.delay-1 { transition-delay: 0.15s; }
        .animate-active.delay-2 { transition-delay: 0.3s; }
        .animate-active.delay-3 { transition-delay: 0.45s; }
        .animate-active.delay-4 { transition-delay: 0.6s; }
        .animate-active.delay-5 { transition-delay: 0.75s; }

        /* --- Contact & Footer Section (联系方式与页脚) --- */
        .contact-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            margin-top: 50px;
            padding-bottom: 60px;
        }

        .contact-item h4 {
            font-size: 1.2rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 15px;
            letter-spacing: 1px;
        }

        .contact-item p, .contact-item a {
            color: var(--text-muted);
            font-size: 1rem;
            line-height: 1.8;
            text-decoration: none;
            transition: color 0.3s ease;
            display: block; /* 让链接占满整行方便点击 */
        }

        .contact-item a:hover {
            color: #fff;
        }

        /* 重新设计底部 Copyright 区域 */
        footer {
            padding: 40px 10%;
            border-top: 1px solid #222;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #555;
            font-size: 13px;
            letter-spacing: 1px;
        }

        .footer-left { width: 30%; text-align: left; }
        .footer-center { width: 40%; text-align: center; }
        .footer-right { width: 30%; text-align: right; }

        /* --- 视频弹窗 (Video Modal) 样式 --- */
        .video-modal {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            /* z-index 设为 9998，确保覆盖导航栏，但保留在你原本的噪点层(9999)和光标(10000)下方，维持电影质感 */
            z-index: 9998;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0.4s, opacity 0.4s var(--easing);
        }

        .video-modal.active {
            visibility: visible;
            opacity: 1;
        }

        .modal-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
        }

        .modal-content {
            position: relative;
            width: 90%;
            max-width: 1280px;
            aspect-ratio: 16 / 9;
            background: #000;
            border-radius: 16px;
            overflow: hidden;
            z-index: 1;
            /* 苹果风弹窗缩放入场动画 */
            transform: scale(0.95) translateY(30px);
            transition: transform 0.5s var(--easing);
            box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
        }

        .video-modal.active .modal-content {
            transform: scale(1) translateY(0);
        }

        .modal-close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.5);
            background: rgba(0, 0, 0, 0.35);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            transition: background 0.3s ease, transform 0.2s ease;
        }

        .modal-close-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.05);
        }

        .modal-content video {
            width: 100%;
            height: 100%;
            outline: none;
            display: block;
            background: #000;
        }

        /* --- 优化视频卡片交互 --- */
        .video-wrapper {
            cursor: pointer;
        }

        .video-cover {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 0.6s var(--easing), filter 0.6s;
        }

        .video-card:hover .video-cover {
            transform: scale(1.05);
            filter: brightness(0.6); /* 悬停时压暗背景，凸显播放按钮 */
        }

        .play-indicator {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            width: 64px; height: 64px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            display: flex; justify-content: center; align-items: center;
            color: #fff;
            /* 换成 SVG 后图标本身就是居中的，不再需要 padding-left 的偏移补丁；
               三角形视觉重心略偏左，用 2px 的位移做光学对齐即可 */
            opacity: 0;
            transition: all 0.4s var(--easing);
            z-index: 2;
            pointer-events: none;
        }

        .video-card:hover .play-indicator {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        /* 三角形的视觉重心偏左，向右推 2px 才是「看起来居中」（光学对齐） */
        .play-indicator svg { margin-left: 2px; }
        .play-btn .icon-play { margin-left: 1.5px; }
        .play-btn .icon-pause { margin-left: 0; }

        .video-card,
        .project-card {
            cursor: pointer;
        }

        /* --- 制谱作品栏 (NOTATION) --- */
        .score-card {
            background: rgba(20, 20, 20, 0.5);
            border: 1px solid #222;
            border-radius: 20px;
            overflow: hidden;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: transform 0.4s var(--easing), border-color 0.4s;
        }

        .score-card:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .score-thumb {
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 9;   /* 与视频卡片一致 */
            background: #0a0a0a;
            overflow: hidden;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
        }

        .score-page {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            background: #111;
        }

        .score-page img {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            object-position: top;   /* 展示谱面标题与起始段 */
            transition: transform 0.6s var(--easing), filter 0.6s;
        }

        .score-card:hover .score-page img {
            filter: brightness(0.82);
        }

        .score-page:hover img {
            transform: scale(1.06);
        }

        .score-info {
            padding: 16px 18px 18px;
        }

        .score-title {
            color: #fff;
            font-weight: 600;
            font-size: 1.05rem;
            letter-spacing: 1px;
            margin-bottom: 6px;
        }

        .score-meta {
            color: var(--text-muted);
            font-size: 0.82rem;
            letter-spacing: 0.5px;
            line-height: 1.6;
        }

        .score-role {
            margin-top: 8px;
            color: #888;
            font-size: 0.72rem;
            letter-spacing: 1px;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
            padding-top: 8px;
        }

        .score-page:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px;
        }

        /* --- 制谱作品页放大 lightbox（复用 .video-modal 骨架，覆盖内容容器为竖版乐谱适配） --- */
        .score-modal .modal-content {
            aspect-ratio: auto;
            width: auto;
            max-width: 92vw;
            height: auto;
            max-height: 88vh;
            background: transparent;
            border-radius: 12px;
            box-shadow: none;
            overflow: visible;
        }

        .score-modal .modal-content img {
            display: block;
            width: auto;
            height: auto;
            max-width: 92vw;
            max-height: 88vh;
            object-fit: contain;
            border-radius: 8px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
        }

        /* 制谱 lightbox 翻页按钮 + 页码 */
        .score-modal .modal-content {
            position: relative;
        }

        .score-nav-btn {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            cursor: pointer;
            transition: background 0.2s, transform 0.2s;
        }

        .score-nav-btn:hover {
            background: rgba(0, 0, 0, 0.7);
        }

        .score-nav-btn:active {
            transform: translateY(-50%) scale(0.92);
        }

        .score-nav-prev {
            left: 24px;
        }

        .score-nav-next {
            right: 24px;
        }

        .score-page-indicator {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.85);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
        }

        a:focus-visible,
        .play-btn:focus-visible,
        .video-card:focus-visible,
        .project-card:focus-visible,
        .modal-close-btn:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* 降级出来的原生播放器，尽量贴合暗色调 */
        .waveform.is-fallback { height: auto; cursor: default; }
        .native-audio-fallback { width: 100%; filter: invert(0.92) hue-rotate(180deg); }

        /* ==========================================================
           移动端适配（统一收口）
           原先分散成 4 个 @media (max-width:768px) 块，且有两块写在
           基础样式之前 —— 同特异度下后写的基础规则反而胜出，
           导致移动端音频播放器的换行布局从未真正生效。
           全部合并到样式表末尾，保证移动端规则一定覆盖桌面端。
           ========================================================== */
        /* 769~855px 是桌面 auto-fill 的降列空洞：
           容器 = 视口 − 两侧约 10.7% padding（实测 1280 视口 → 1012px 容器，
           820 视口 → 644px，比例约 0.785~0.79），两列需要容器 ≥ 2×320+32 = 672px，
           即视口 ≥ 672/0.786 ≈ 855px —— 855px 以下 auto-fill 都只排得下一列。
           而 ≤768px 的移动端断点又是固定 2 列，于是 769~855px 会 2列→1列→2列 来回跳。
           这里显式锁 2 列补上空洞（856px 起容器 ≥ 672，桌面规则自会排两列）。 */
        @media (max-width: 855px) and (min-width: 769px) {
            .video-grid,
            .bento-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* 超宽屏（≥1300px）锁 3 列：auto-fill 在容器能放下 4×320+3×32=1376px
           （约 1720px 视口）时会排 4 列，卡片被压窄；需求是桌面最多一行三个。
           3 列需容器 ≥ 3×320+2×32=1024px，即视口 ≥ ~1297px，所以阈值取 1300px
           与 auto-fill 的自然 3 列区间平滑衔接，不会出现跳变。 */
        @media (min-width: 1300px) {
            .video-grid,
            .bento-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {
            /* 导航：原先 4 项固定 gap:60px，实测需要 436px 宽，
               而主流手机只有 360–414px，配合 body 的 overflow-x:hidden
               两端会被直接裁掉（显示成 "FILE … PROJ"）。
               这里收紧间距并允许在极窄屏换行。 */
            nav { height: 96px; }
            nav ul {
                gap: 22px;
                padding-top: 24px;
                padding-left: 14px;
                padding-right: 14px;
                flex-wrap: wrap;
                row-gap: 6px;
            }
            nav a { font-size: 11.5px; letter-spacing: 1px; }
            .nav-base a { opacity: 1; }
            .nav-bold { display: none; } /* 移动端直接干掉顶层，节省性能 */

            .cursor { display: none; } /* 移动端禁用自定义光标 */

            section { padding: 120px 6% 80px; }

            .hero h1 { font-size: 15vw; }
            .about-container { grid-template-columns: 1fr; gap: 40px; }

            .section-header { font-size: 2rem; }

            /* 减小横向位移，避免出现横向滚动条 */
            .from-left  { transform: translate3d(-30px, 0, 0) scale(0.995); }
            .from-right { transform: translate3d(30px, 0, 0) scale(0.995); }

            /* --- 音频播放器：曲名占满第一行，波形自然挤到第二行 --- */
            .track {
                flex-wrap: wrap;
                padding: 20px 15px;
            }
            .track-info {
                /* 播放按钮宽 40px + 右边距 20px = 60px */
                width: calc(100% - 60px);
            }
            .waveform {
                flex: 1 1 100%;
                width: auto;
                margin-left: 0;
                margin-top: 20px;
            }
            .audio-wrapper { padding: 20px 15px; }

            .project-item { flex-direction: column; gap: 10px; }
            .project-title { font-size: 1.8rem; }

            /* 窄屏两个板块同样共用轨道，避免又出现列数不一致。
               此处必须显式写死两列：桌面的 minmax(320px) 在手机上只排得下一列。 */
            .video-grid,
            .bento-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            /* 项目卡片：布局与桌面端完全一致
               （左上角年份、右上角项目名、配图垫在下半部），只是等比缩小 */
            .bento-card {
                padding: 14px;
                min-height: 200px;
                border-radius: 16px;
            }
            .project-head {
                gap: 6px;
                margin-bottom: 6px;
            }
            .bento-year { font-size: 1.05rem; }
            .bento-title {
                font-size: 0.88rem;
                line-height: 1.3;
                letter-spacing: 0;
            }
            .bento-tags {
                font-size: 0.6rem;
                line-height: 1.45;
                letter-spacing: 0;
            }
            .project-card::after { height: 52%; }

            /* 视频卡片：宽度骤降到 130~160px，内边距、字号、播放键都要同步缩，
               否则 25px 的 padding 会把文字挤成一列竖排 */
            .video-grid { margin-top: 20px; }
            .video-card,
            .score-card { border-radius: 14px; }
            .video-info,
            .score-info {
                padding: 12px 11px 14px;
                height: 6rem;
            }
            .video-title,
            .score-title {
                font-size: 0.82rem;
                line-height: 1.35;
                letter-spacing: 0;
                margin-bottom: 4px;
            }
            .video-desc,
            .score-meta {
                font-size: 0.66rem;
                line-height: 1.4;
                letter-spacing: 0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            .video-title,
            .score-title {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            .score-role {
                margin-top: 4px;
                padding-top: 0;
                border-top: 0;
                font-size: 0.625rem;
                line-height: 1.4;
                letter-spacing: 0;
            }
            /* 悬停态在触屏上没有意义，播放键常驻显示，并缩到与卡片相称的尺寸。
               桌面端那档 blur(8px) 盖在小缩略图上会糊成一整块灰盘，这里减到 3px。 */
            .play-indicator {
                width: 34px;
                height: 34px;
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
                background: rgba(0, 0, 0, 0.28);
                border-color: rgba(255, 255, 255, 0.55);
                backdrop-filter: blur(3px);
                -webkit-backdrop-filter: blur(3px);
            }
            .play-indicator svg { width: 15px; height: 15px; margin-left: 1.5px; }

            .contact-grid {
                grid-template-columns: 1fr; /* 移动端变为单列垂直排列 */
                gap: 30px;
            }
            footer {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            .footer-left, .footer-center, .footer-right {
                width: 100%;
                text-align: center;
            }
        }

        @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;
            }
        }

        /* --- NOTATION 固定每行 3 列（桌面端 ≥769px；移动端继承 video-grid 的 2 列） --- */
        @media (min-width: 769px) {
            .score-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }


        .score-page-indicator { max-width: calc(100vw - 40px); width: max-content; text-align: center; line-height: 1.5; }
        @media (min-width: 769px) {
            nav ul { padding-left: 150px; padding-right: 150px; gap: clamp(20px, 4vw, 60px); }
        }
        @media (min-width: 769px) and (max-width: 1000px) {
            nav ul { gap: 16px; }
            nav a { font-size: 14px; letter-spacing: 1px; }
        }
        @media (max-width: 768px) {
            nav { height: 132px; }
            nav ul { padding-top: 72px; gap: clamp(10px, 3vw, 22px); align-content: flex-start; }
            nav a { font-size: 14px; letter-spacing: .6px; }
            .hero-subtitle { letter-spacing: .15em; font-size: .75rem; }
        }

/* Shared navigation and independent portfolio pages. */
.site-brand { position: fixed; top: 28px; left: 5%; z-index: 1001; color: white; font-size: 16px; font-weight: 650; letter-spacing: 2px; text-decoration: none; }
.nav-base a[aria-current="page"] { opacity: 1; border-bottom: 1px solid white; padding-bottom: 8px; }
.page-intro { margin-bottom: 45px; display: flex; justify-content: space-between; gap: 24px; color: var(--text-muted); font-size: 13px; letter-spacing: 2px; }
.page-intro a, .section-link { color: #ddd; text-decoration: none; }
.page-intro a:hover, .section-link:hover { color: white; }
.inner-page main > section:first-child { padding-top: 180px; }
.about-text h1 { line-height: 1.1; }
.section-link { display: inline-block; margin-top: 32px; padding: 12px 0; border-bottom: 1px solid #666; font-size: 14px; letter-spacing: 1px; }
.home-intro { max-width: 800px; color: #bbb; font-size: 1.1rem; line-height: 1.9; margin-top: 28px; }
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.home-card { display: flex; flex-direction: column; min-height: 210px; padding: 30px; border: 1px solid #292929; background: #0b0b0b; color: white; text-decoration: none; transition: border-color .25s, background .25s; }
.home-card:hover { border-color: #888; background: #111; }
.home-card .card-number { color: #666; font-size: 12px; letter-spacing: 2px; }
.home-card h3 { margin: 22px 0 12px; font-size: 1.5rem; }
.home-card p { color: #999; line-height: 1.7; font-size: 14px; }
.home-card .card-arrow { align-self: flex-end; margin-top: auto; padding-top: 20px; }
a:focus-visible { outline: 2px solid white; outline-offset: 6px; }
@media (max-width: 1000px) { .site-brand { left: 4%; font-size: 14px; } .home-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 768px) { .site-brand { top: 26px; left: 6%; } .inner-page main > section:first-child { padding-top: 160px; } .page-intro { font-size: 11px; letter-spacing: 1px; margin-bottom: 32px; } .home-grid { grid-template-columns: 1fr; } .home-card { min-height: 180px; padding: 24px; } }

/* Scroll straight from the cover into the standalone page sequence. */
.scroll-flow > #about { padding-top: 100px; }
@media (max-width: 768px) { .scroll-flow > #about { padding-top: 80px; } }

.hero-manifesto > span { display: inline-block; margin-top: 12px; max-width: 85vw; line-height: 1.6; }

@media (max-width: 768px) { nav ul { gap: 10px; } nav a { font-size: 12px; letter-spacing: .4px; } }