/* ==================== Design Tokens ==================== */
  :root {
    /* Background */
    --bg: #000000;
    --bg-card: #141414;          /* 模块背景 #0a0a0a → #141414, 亮度 ×2 */
    --grid: rgba(255, 255, 255, 0.03);

    /* Text — strict hierarchy from user spec */
    --text-white: #ffffff;
    --text-200: #e5e7eb;     /* gray-200, 副标题 */
    --text-d4: #d4d4d4;       /* 正文 */
    --text-a3: #a3a3a3;       /* 次要信息 */
    --text-737: #737373;      /* 辅助、时间 */
    --text-525: #525252;      /* 列表符号 */
    --text-400: #99a1af;      /* gray-400 说明 */
    --text-500: #6b7280;      /* gray-500 描述 */
    --text-300: #d1d5db;      /* gray-300 默认 */

    /* Accent — section colors from user spec */
    --gold:   #c9a063;
    --cyan:   #7dd3fc;
    --violet: #a5b4fc;
    --rose:   #fb7185;
    --amber:  #fcd34d;

    --border: #1f1f1f;

    /* Tailwind-equivalent font sizes */
    --text-xs:   0.75rem;     /* 12px */
    --text-sm:   0.875rem;    /* 14px */
    --text-base: 1rem;        /* 16px */
    --text-lg:   1.125rem;    /* 18px */
    --text-xl:   1.25rem;     /* 20px */
    --text-2xl:  1.5rem;      /* 24px */
    --text-5xl:  3rem;        /* 48px */
    --text-6xl:  3.75rem;     /* 60px */

    /* Tracking (letter-spacing) */
    --tracking-tight:   -0.025em;
    --tracking-name:    -0.03em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.1em;
    --tracking-case:    0.24em;

    /* Line height */
    --leading-tight:    1.25;
    --leading-relaxed:  1.625;
  }


  /* ==================== Light Mode ==================== */
  html.light {
    --bg: #f0f0f0;
    --bg-card: #fafafa;
    --grid: rgba(0,0,0,0.045);
    --text-white: #0d0d0d;
    --text-200: #1a1a1a;
    --text-d4: #2d2d2d;
    --text-a3: #555555;
    --text-737: #888888;
    --text-525: #b0b0b0;
    --text-400: #6b7280;
    --text-500: #9ca3af;
    --text-300: #374151;
    --border: #e2e2e2;
  }
  html.light body { background: var(--bg); }
  html.light body::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><line x1='0' y1='0' x2='80' y2='0' stroke='%23000000' stroke-opacity='0.18' stroke-width='1' stroke-dasharray='3 4'/><line x1='0' y1='0' x2='0' y2='80' stroke='%23000000' stroke-opacity='0.18' stroke-width='1' stroke-dasharray='3 4'/></svg>");
  }
  html.light body::after {
    background-image: repeating-linear-gradient(
      0deg, transparent, transparent 2px,
      rgba(0,0,0,0.012) 2px, rgba(0,0,0,0.012) 3px
    );
  }
  html.light .nav {
    border-left-color: #d0d0d0;
  }
  html.light .nav-link {
    background: rgba(250,250,250,0.95);
    color: #888;
  }
  html.light .nav-link:hover {
    background: rgba(240,240,240,0.98);
    color: #111;
  }
  html.light .nav-actions {
    background: rgba(250,250,250,0.95);
    border-top-color: #e0e0e0;
  }
  html.light .nav-btn { color: #999; }
  html.light .nav-btn:hover { color: #111; }
  html.light .job-body { border-left-color: #d0d0d0; }
  html.light .project-thumb { background: #eeeeee; }
  /* light mode 下 sub-heading 仍保持琥珀色 (与 .past-tab 一致), 不覆写 */
  html.light .chip { background: #e8e8e8; color: #555; border-color: #d0d0d0; }
  html.light .project-title { color: #1a1a1a; }
  html.light .project-desc { color: #666; }
  html.light .stat-num { color: #111; }
  html.light .stat-label { color: #888; }
  html.light .section.cyan::before   { border-color: rgba(251,146,60,0.5); }
  html.light .section.violet::before { border-color: rgba(165,180,252,0.5); }
  html.light .section.rose::before   { border-color: rgba(251,146,60,0.5); }
  html.light .section.amber::before  { border-color: rgba(252,211,77,0.5); }

  /* toggle button style */
  .theme-toggle { display: none !important; }
  .theme-toggle-OLD {
    display: flex; align-items: center; gap: 8px;
    background: transparent; border: none;
    cursor: pointer; padding: 6px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.1em;
    color: #444;
    transition: color .2s;
    width: 100%;
  }
  .theme-toggle:hover { color: var(--text-white); }
  .toggle-track {
    width: 32px; height: 16px;
    background: #222;
    border-radius: 8px;
    position: relative;
    transition: background .3s;
    flex-shrink: 0;
    border: 1px solid #444;
  }
  .toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fcd34d;
    transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s;
    display: flex; align-items: center; justify-content: center;
    font-size: 7px; line-height:1;
  }
  html.light .toggle-track { background: #cce4ff; border-color: #aaccee; }
  html.light .toggle-thumb { transform: translateX(16px); background: #3b82f6; }
  html.light .theme-toggle { color: #999; }

  /* ---- Modal light mode ---- */
  html.light .modal {
    background: #fafafa;
    background-image:
      linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    border-color: rgba(252,211,77,0.4);
  }
  html.light .modal-bar {
    background: rgba(245,245,245,0.96);
    border-bottom-color: #e0e0e0;
  }
  html.light .modal-bar-left .mbl-title { color: #111; }
  html.light .modal-bar-left .mbl-sub   { color: #aaa; }
  html.light .modal-close {
    border-color: #888;
    color: #444;
  }
  html.light .modal-close:hover { border-color: var(--amber); color: var(--amber); }
  html.light .modal-body::-webkit-scrollbar-track { background: #f0f0f0; }
  html.light .modal-body::-webkit-scrollbar-thumb { background: #ccc; }
  html.light .modal-hero-right {
    border-left-color: #e0e0e0;
  }
  html.light .modal-eyebrow { color: var(--amber); }
  html.light .modal-tag { background: #e8e8e8; color: #555; border-color: #d0d0d0; }
  @media (max-width: 640px) {
    html.light .modal-hero-right { border-top-color: #e0e0e0; }
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  /* ==================== Base ==================== */
  html, body {
    background: var(--bg);
    color: var(--text-d4);
    font-family: 'Manrope', 'Noto Sans SC', -apple-system, system-ui, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    font-feature-settings: 'ss01', 'ss02', 'cv11', 'tnum';
    font-variant-numeric: tabular-nums;
  }

  body {
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
    padding: 28px 16px 80px;
  }

  /* ==================== Background atmosphere ==================== */
  /* 网格层 — 方案 10 虚线网格 Dashed: 80px 间距, dasharray 3-4 草图感 */
  body::before {
    content: "";
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><line x1='0' y1='0' x2='80' y2='0' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='1' stroke-dasharray='3 4'/><line x1='0' y1='0' x2='0' y2='80' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='1' stroke-dasharray='3 4'/></svg>");
    background-size: 80px 80px;
    background-position: 0 0;
    pointer-events: none;
    z-index: 1;
    mask-image: linear-gradient(to bottom, transparent, black 200px, black calc(100% - 200px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 200px, black calc(100% - 200px), transparent);
  }

  /* 横向扫描线纹理层 */
  body::after {
    content: "";
    position: fixed; inset: 0;
    background-image: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.015) 2px,
      rgba(255,255,255,0.015) 3px
    );
    pointer-events: none;
    z-index: 2;
  }

  /* ==================== 鼠标光斑 ==================== */
  /* 跟随鼠标的径向光晕 — 平滑 lerp 跟随 + 按 section 颜色染色, 用 screen 混合叠加
     --mx / --my : 鼠标位置 (JS 用 RAF lerp 平滑过渡)
     --spotlight-color : RGB 三元组, JS 按当前 section 切换 (默认白色) */
  body {
    --mx: 50%;
    --my: -300px;
    --spotlight-color: 255, 255, 255;
  }
  @property --bx1 { syntax: '<length>'; inherits: false; initial-value: -120px; }
  @property --by1 { syntax: '<length>'; inherits: false; initial-value:   60px; }
  @property --bx2 { syntax: '<length>'; inherits: false; initial-value:  140px; }
  @property --by2 { syntax: '<length>'; inherits: false; initial-value:  -80px; }
  @property --bx3 { syntax: '<length>'; inherits: false; initial-value:  -40px; }
  @property --by3 { syntax: '<length>'; inherits: false; initial-value: -140px; }

  @keyframes blob-shift {
    0%   { --bx1: -120px; --by1:  60px; --bx2:  140px; --by2: -80px; --bx3: -40px; --by3: -140px; }
    25%  { --bx1:  100px; --by1: 120px; --bx2: -160px; --by2:  40px; --bx3:  80px; --by3:  100px; }
    50%  { --bx1:  -60px; --by1:-100px; --bx2:   80px; --by2: 140px; --bx3:-120px; --by3:   40px; }
    75%  { --bx1:  140px; --by1: -40px; --bx2: -100px; --by2:-120px; --bx3:  60px; --by3:  -80px; }
    100% { --bx1: -120px; --by1:  60px; --bx2:  140px; --by2: -80px; --bx3: -40px; --by3: -140px; }
  }
  .mouse-spotlight {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    --bx1: -120px; --by1: 60px;
    --bx2:  140px; --by2: -80px;
    --bx3:  -40px; --by3: -140px;
    background:
      radial-gradient(ellipse 1040px 840px at calc(var(--mx) + var(--bx1)) calc(var(--my) + var(--by1)),
        rgba(var(--spotlight-color), 0.033), transparent 70%),
      radial-gradient(ellipse 880px 1160px at calc(var(--mx) + var(--bx2)) calc(var(--my) + var(--by2)),
        rgba(var(--spotlight-color), 0.033), transparent 68%),
      radial-gradient(ellipse 720px 640px at calc(var(--mx) + var(--bx3)) calc(var(--my) + var(--by3)),
        rgba(var(--spotlight-color), 0.027), transparent 65%),
      radial-gradient(ellipse 560px 600px at var(--mx) var(--my),
        rgba(var(--spotlight-color), 0.04), transparent 55%);
    filter: blur(12px);
    mix-blend-mode: screen;
    opacity: 1;
    transition: opacity .55s ease;
    animation: blob-shift 8s ease-in-out infinite;
  }
  .mouse-spotlight.idle { opacity: 0; }
  /* light mode 下 spotlight 改成柔和的暗化, 用 multiply 让网格点更突出 */
  html.light .mouse-spotlight {
    background:
      radial-gradient(ellipse 520px 420px at calc(var(--mx) + var(--bx1)) calc(var(--my) + var(--by1)),
        rgba(var(--spotlight-color), 0.05), transparent 70%),
      radial-gradient(ellipse 440px 580px at calc(var(--mx) + var(--bx2)) calc(var(--my) + var(--by2)),
        rgba(var(--spotlight-color), 0.04), transparent 68%),
      radial-gradient(ellipse 280px 300px at var(--mx) var(--my),
        rgba(var(--spotlight-color), 0.06), transparent 55%);
    mix-blend-mode: multiply;
  }

  /* ==================== 全局噪点层 ==================== */
  /* 相机感光元件颗粒: 384px webp 平铺, Gaussian 亮度噪 σ≈35 + 轻量色噪 σ≈12
     - YUV 4:2:0 带轻微色斑(粉/绿/蓝), 类似中高 ISO 数码噪点
     - 闪动(非位移): 每帧 background-position 跳到大跨度无规律 offset, 每个屏幕像素采到的是 tile 内
       完全无关联的像素 → 视觉读成"逐帧噪点变化", 不是"图层在漂"
     - 6fps · 6 帧, Safari 合成开销可控 */
  .noise-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: url("noise.webp") repeat;
    background-size: 384px 384px;
    opacity: 0.10;
    animation: noise-flicker 1s steps(6, end) infinite;
  }
  html.light .noise-layer { opacity: 0.10; }
  @keyframes noise-flicker {
    0%   { background-position:    0     0;    }
    17%  { background-position:  137px -211px; }
    33%  { background-position:  -89px  167px; }
    50%  { background-position:  251px  -73px; }
    67%  { background-position: -163px -241px; }
    83%  { background-position:   91px   89px; }
  }
  /* 用户开启了"减少动效"系统设置时, 关掉闪动避免不适 */
  @media (prefers-reduced-motion: reduce) {
    .noise-layer { animation: none; }
  }

  .page {
    position: relative;
    z-index: 5;
    max-width: 1180px;
    margin: 0 auto;
    /* 用 flex column 启用 order, 窄屏视觉顺序仍然 profile → experience → ai → past → contact */
    display: flex;
    flex-direction: column;
  }
  .col-left { display: contents; }
  .page > .col-left > #profile    { order: 1; }
  .page > .col-left > #experience { order: 2; }
  .page > .col-left > #contact    { order: 5; }
  .page > #ai   { order: 3; }
  .page > #past { order: 4; }

  /* ==================== 宽屏布局 ====================
     >= 1700px: 左列 profile/experience/contact 保持 1180px 宽; AI + 往期项目 浮在 profile+experience 右侧,
     高度从 profile 顶到 experience 底, 不挡 contact; 往期项目内部 3 个子分类横向铺开
     < 1700px:  保持原来单列堆叠 (上面 .page flex 列) */
  @media (min-width: 1700px) {
    /* 宽屏下 body 弹性居中 .page;
       .page 用 82% 视口宽度 (相比 90% 缩约 9%, col1/col2 不变 → col3 净缩约 1/5) */
    body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px 0; overflow: hidden; }
    .page {
      max-width: 82%;
      width: 82%;
      margin: 0 auto;
      display: grid;
      /* 列宽硬锁: col1=600 (丁旭杭 + 工作经历, +1/4) / col2=300 (AI 研究, -1/4) / col3=剩余 (往期项目) */
      grid-template-columns: 600px 300px minmax(0, 1fr);
      /* page 锁死 88vh, 整页一屏可见, 不触发 window 滚动 */
      height: 88vh;
      margin: 0 auto;
      padding: 6px;        /* 让 section 角点 (-3.5px) 落进 padding 内, 不被 overflow:hidden 裁掉 */
      overflow: hidden;
      /* profile / contact 按内容贴底, experience 占剩余, 让 3 段工作经历完整撑开 */
      grid-template-rows: auto minmax(0, 1fr) auto;
      column-gap: 24px;
      row-gap: 12px;
      align-items: stretch;
    }
    /* profile / experience / contact 不内部滚动, 完整显示内容;
       不要在 section 上加 overflow:hidden, 否则 -3.5px 偏移的角点小方块会被裁掉 */
    .col-left > #experience { min-height: 0; }
    /* AI 跨 row 1-2; section 本身不裁(保留角点), 改在内部 .grid-3 上裁内容 */
    .page > #ai { min-height: 0; padding: 88px 28px 22px; }
    #ai .grid-3 { overflow: visible; padding-right: 3px; padding-bottom: 3px; }

    /* —— 横屏专属紧凑度调整 ——
       profile 没有 .tag, 自由压缩;
       experience / contact 有 .tag (绝对定位, ~50px 高), 必须保留 padding-top 留位置, 否则 tag 会盖住正文 */
    /* col1 现在 600, profile 整段高度 +1/3, padding 上下进一步加大 */
    .col-left > #profile { padding: 44px 24px 48px; }
    /* experience: flex column flex-start, 三段按自然间距排; padding-top +40 让内容整体往下挪 */
    .col-left > #experience {
      padding: 116px 24px 14px;
      display: flex;
      flex-direction: column;
    }
    /* 联系方式: 高度比上一版 +1/4, padding/字号/gap 同步上调 */
    .col-left > #contact { padding: 80px 24px 22px; }

    /* col1 = 600, profile 各行字号 / margin 全面上调, 整段高度 +1/3 */
    .col-left > #profile .meta-label { margin-bottom: 18px; }
    /* name 字号沿用竖排默认 clamp(2.4rem, 7.5vw, 3.75rem), 仅设置 margin-bottom */
    .col-left > #profile .name { margin-bottom: 16px; }
    .col-left > #profile .role { margin-bottom: 20px; font-size: var(--text-base); }
    .col-left > #profile .bio { font-size: var(--text-sm); line-height: 1.7; max-width: none; }

    /* —— 工作经历: 内部间距完全沿用竖排默认值, 横向只收紧 job-name 字号 —— */
    /* 不覆写 job / job-head / job-role 的 margin / padding-bottom, 完全用 .job 默认 (padding-bottom: 22; .job-head margin-bottom: 4; .job-role margin-bottom: 14) */
    .col-left > #experience .job-name { font-size: var(--text-xl); }
    /* 列表保持竖排默认: font-size sm, line-height 1.625 (.job-list li 默认值) — 不覆写 */

    /* 联系方式: 单行 4 列, 字号 / 行距上调一档让整段更舒展 (高度 +1/4) */
    .col-left > #contact .contact-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0 22px;
      margin-top: 8px;
    }
    .col-left > #contact .contact-item .ci-label { margin-bottom: 8px; font-size: var(--text-sm); }
    .col-left > #contact .contact-item .ci-value { font-size: var(--text-base); }
    .col-left { display: contents; }
    .col-left > #profile    { grid-column: 1; grid-row: 1; margin: 0; order: 0; }
    .col-left > #experience { grid-column: 1; grid-row: 2; margin: 0; order: 0; }
    /* 联系方式横跨 col 1 + col 2, 右边对齐 AI 的右边 */
    .col-left > #contact    { grid-column: 1 / 3; grid-row: 3; margin: 0; order: 0; }
    /* AI 跨 row 1-2, 底部对齐工作经历底部 */
    .page > #ai   { grid-column: 2; grid-row: 1 / 3; margin: 0; order: 0; align-self: stretch; }
    /* 往期项目跨全部 3 行, 一直延到联系方式底部 */
    .page > #past { grid-column: 3; grid-row: 1 / 4; margin: 0; order: 0; align-self: stretch; }

    /* AI 内部: section 转 flex 列, grid-3 占满剩余高度, 3 张卡均分 row 1-2 高度 */
    #ai { display: flex; flex-direction: column; }
    #ai .grid-3 {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      flex: 1;
    }
    #ai .grid-3 > .project { border: 0; }
    #ai .grid-3 > .project:not(:first-child) { border-top: 0; }

    /* AI 卡片缩略图改为弹性高度 — 自动适配 (col2 / 3 行) 剩余空间, 不再用 75% 固定比例
       这样 col2 加宽后, 三张卡片仍刚好填满 AI 外框, 不会溢出也不会留白 */
    #ai .grid-3 .thumb-frame {
      flex: 1;
      min-height: 0;
      margin-bottom: 10px;
    }
    #ai .grid-3 .project-thumb {
      padding-bottom: 0;
      height: 100%;
    }

    /* 往期项目: section 转 flex 列, .past-subs 占剩余高度;
       关键: 三个 panel 改成 position:absolute 全部叠在 past-subs 同一位置,
       切换时只是 opacity / visibility 变, 完全不触发 layout reflow → 外框宽度永远不变 */
    #past { display: flex; flex-direction: column; width: 100%; min-width: 0; contain: layout; }
    #past .past-subs {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      width: 100%;
      position: relative;       /* 给绝对定位子项做锚点 */
    }
    /* 横屏下三个 panel 全部绝对定位, 互相叠加;
       切换时叠加 blur + 微缩放 + 长时缓动 = 柔和的"渐变"过渡, 不是硬切 */
    #past .past-sub {
      display: block;
      position: absolute;
      inset: 0;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      filter: blur(8px);
      transform: scale(0.985);
      transition:
        opacity .9s cubic-bezier(.4, 0, .2, 1),
        filter .9s cubic-bezier(.4, 0, .2, 1),
        transform .9s cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear .9s;
      animation: none;
    }
    #past .past-sub.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      filter: blur(0);
      transform: scale(1);
      transition:
        opacity .9s cubic-bezier(.4, 0, .2, 1),
        filter .9s cubic-bezier(.4, 0, .2, 1),
        transform .9s cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear 0s;
      animation: none;
    }

    /* 卡片入场: 下方滑入 (方案 B), stagger 60ms / 卡, 每次 .active 切换都重跑 */
    #past .past-sub.active .project {
      animation: past-card-slide-up .55s cubic-bezier(.4, 0, .2, 1) both;
    }
    #past .past-sub.active .project:nth-child(2)  { animation-delay:  60ms; }
    #past .past-sub.active .project:nth-child(3)  { animation-delay: 120ms; }
    #past .past-sub.active .project:nth-child(4)  { animation-delay: 180ms; }
    #past .past-sub.active .project:nth-child(5)  { animation-delay: 240ms; }
    #past .past-sub.active .project:nth-child(6)  { animation-delay: 300ms; }
    #past .past-sub.active .project:nth-child(7)  { animation-delay: 360ms; }
    #past .past-sub.active .project:nth-child(8)  { animation-delay: 420ms; }
    #past .past-sub.active .project:nth-child(9)  { animation-delay: 480ms; }
    #past .past-sub.active .project:nth-child(10) { animation-delay: 540ms; }
    #past .past-sub.active .project:nth-child(11) { animation-delay: 600ms; }
    #past .past-sub.active .project:nth-child(12) { animation-delay: 660ms; }
    @keyframes past-card-slide-up {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    /* 减少动效: 跳过卡片入场动画 */
    @media (prefers-reduced-motion: reduce) {
      #past .past-sub.active .project { animation: none; }
    }
  }

  /* ==================== 往期项目 — 标签页(自动 4s 切换 + 悬停暂停) ==================== */
  .past-tabs {
    display: flex;
    align-items: center;
    gap: 36px;
    margin: 0 0 20px 4px;
    padding: 0;
    flex-wrap: wrap;
  }
  .past-tab {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 0 6px 16px;        /* 左 16px 给竖线让位 */
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-737);
    font-family: 'ZPix', 'JetBrains Mono', monospace;
    line-height: 1.05;
    -webkit-font-smoothing: none;
    font-smooth: never;
    transition: color .35s ease;
  }
  .past-tab .tab-en {
    font-size: 11px;
    letter-spacing: 0.18em;
    opacity: 0.55;
    text-align: left;
    align-self: flex-start;     /* 不被 stretch 撑到 CN 宽, 保持自然左对齐 */
    transition: opacity .3s ease, color .3s ease;
  }
  .past-tab .tab-cn {
    font-size: 20px;
    letter-spacing: 0.06em;
    align-self: flex-start;     /* CN 也按内容宽度左对齐 */
    /* 假粗一致 — 与 section .tag 视觉同源 */
    text-shadow: 1px 0 0 currentColor, 0 1px 0 currentColor, 1px 1px 0 currentColor;
  }
  /* 左侧竖线小提示 — 默认隐藏, active 时琥珀色淡入 + 上下展开 */
  .past-tab .tab-line {
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 18px;
    background: var(--text-white);
    box-shadow: none;
    transform: translateY(-50%) scaleY(0);
    transform-origin: 50% 50%;
    opacity: 0;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1),
                opacity .35s ease, background .3s ease, box-shadow .3s ease;
  }
  .past-tab.active .tab-line {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
  }
  .section.amber:hover .past-tab .tab-line {
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber);
  }
  .past-tab.active { color: var(--text-white); transition: color .3s ease; }
  .past-tab.active .tab-en { opacity: 0.75; }
  .past-tab:hover { color: var(--text-d4); }
  .past-tab.active:hover { color: var(--text-white); }
  .section.amber:hover .past-tab.active { color: var(--amber); }
  .section.amber:hover .past-tab.active:hover { color: var(--amber); }

  /* 标签页面板: 只展示 active 那个, 其余隐藏; 切换时只做 opacity 淡入 (不再用 translateY, 避免 subpixel 抖动) */
  #past .past-sub { display: none; opacity: 0; transition: opacity .4s ease; }
  #past .past-sub.active {
    display: block;
    opacity: 1;
    animation: past-sub-fade 0.4s ease both;
  }
  @keyframes past-sub-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* 标签页接管后, sub-heading (品牌形象 / 广告营销 / 产品包装) 已由 tab 显示, 不再重复 */
  #past .past-sub .sub-heading { display: none; }

  /* —— 所有 past 卡片严格同尺寸 (参照 TOKYO 2020 ON CLOUD 那张) ——
     单行 title + 单行 desc + 单行 chips, 卡片高度只由列宽决定, 三个 tab 切换时卡尺寸完全一致 */
  #past .grid-4 .project-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #past .grid-4 .chips {
    flex-wrap: nowrap;
    overflow: hidden;
    height: 24px;
    align-items: center;
  }
  /* 卡片宽度由 grid-4 列宽 (1fr) 统一, 高度 = 75%pb 缩略图 + 单行内容(确定值);
     三个 tab 切换时所有卡严格同尺寸, 即 TOKYO 那种 */

  /* 窄屏退化: 标签页隐藏, 所有分类正常展开(回到上下滚动浏览) */
  @media (max-width: 1699px) {
    .past-tabs { display: none; }
    #past .past-sub { display: block; opacity: 1; animation: none; }
    #past .past-sub .sub-heading { display: block; }
  }


  /* ==================== Side Nav (auto-hide, left) ==================== */
  /* 左侧触发热区 — 鼠标进入才显示导航 */
  .nav-trigger {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 40px;
    z-index: 99;
    pointer-events: auto;
  }

  .nav {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateX(calc(-100% - 4px)) translateY(-50%);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s ease;
    opacity: 0;
    border-left: 1px solid #2a2a2a;
  }
  .nav.visible {
    transform: translateX(0) translateY(-50%);
    opacity: 1;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
  }
  .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
    cursor: pointer;
    background: rgba(5,5,5,0.9);
    backdrop-filter: blur(8px);
    border: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 10px 16px 10px 14px;
    white-space: nowrap;
    transition: color .2s, border-left-color .2s, padding-left .2s, background .2s;
  }
  .nav-link:hover {
    color: var(--text-white);
    padding-left: 20px;
    background: rgba(15,15,15,0.95);
  }
  .nav-link .num {
    font-size: 9px;
    color: #333;
    font-family: monospace;
    transition: color .2s;
    min-width: 16px;
  }
  .nav-link:hover .num { color: var(--link-c); }
  .nav-link.active {
    color: var(--link-c);
    border-left-color: var(--link-c);
  }
  .nav-link.active .num { color: var(--link-c); }

  .nav-actions {
    display: flex;
    flex-direction: column;
    padding: 8px 14px;
    background: rgba(5,5,5,0.9);
    backdrop-filter: blur(8px);
    border-top: 1px dashed #1a1a1a;
  }
  .nav-btn {
    background: transparent;
    border: none;
    color: #444;
    padding: 4px 0;
    font-size: 10px;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    font-family: monospace;
    letter-spacing: 0.1em;
  }
  .nav-btn:hover { color: var(--text-white); }

  .dot {
    width: 8px; height: 8px;
    border-radius: 0;
    display: inline-block;
  }
  .dot.cyan   { background: var(--cyan);   box-shadow: 0 0 8px var(--cyan); }
  .dot.violet { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
  .dot.rose   { background: #fb923c;   box-shadow: 0 0 8px #fb923c; }
  .dot.amber  { background: var(--amber);  box-shadow: 0 0 8px var(--amber); }
  .dot.gold   { background: var(--gold);   box-shadow: 0 0 8px var(--gold); }

  /* ==================== Section Card ==================== */
  /* 半透明底 + backdrop blur, 让背后的网格 / 噪点 / 光斑 透出柔和模糊感 (毛玻璃效果) */
  .section {
    position: relative;
    background: rgba(20, 20, 20, 0.62);              /* 与 --bg-card #141414 同色, 但 62% 不透明 */
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    padding: 40px 44px;
    margin-bottom: 36px;
  }
  html.light .section {
    background: rgba(250, 250, 250, 0.72);
  }
  .section::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid;
    pointer-events: none;
  }
  .section.cyan::before   { border-color: rgba(125, 211, 252, 0.35); }
  .section.violet::before { border-color: rgba(165, 180, 252, 0.35); }
  .section.rose::before   { border-color: rgba(251, 146, 60, 0.35); }
  .section.amber::before  { border-color: rgba(252, 211, 77, 0.35); }

  /* corner blocks (方块版) */
  .section .corner {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 0;
    z-index: 2;
  }
  .corner.tl { top: -3.5px; left: -3.5px; }
  .corner.tr { top: -3.5px; right: -3.5px; }
  .corner.bl { bottom: -3.5px; left: -3.5px; }
  .corner.br { bottom: -3.5px; right: -3.5px; }

  .section.cyan   .corner { background: var(--cyan);   box-shadow: 0 0 6px var(--cyan); }
  .section.violet .corner { background: var(--violet); box-shadow: 0 0 6px var(--violet); }
  .section.rose   .corner { background: #fb923c;   box-shadow: 0 0 6px #fb923c; }
  .section.amber  .corner { background: var(--amber);  box-shadow: 0 0 6px var(--amber); }

  /* ---- 默认灰色 + hover 点亮 ---- */
  .dot.cyan, .dot.violet, .dot.rose, .dot.amber {
    background: #383838;
    box-shadow: none;
    transition: background .3s ease, box-shadow .3s ease;
  }
  .nav-link:hover .dot.cyan   { background: var(--cyan);   box-shadow: 0 0 8px var(--cyan); }
  .nav-link:hover .dot.violet { background: var(--violet); box-shadow: 0 0 8px var(--violet); }
  .nav-link:hover .dot.rose   { background: #fb923c;       box-shadow: 0 0 8px #fb923c; }
  .nav-link:hover .dot.amber  { background: var(--amber);  box-shadow: 0 0 8px var(--amber); }

  .section.cyan::before, .section.violet::before,
  .section.rose::before, .section.amber::before {
    border-color: rgba(80, 80, 80, 0.35);
    transition: border-color .4s ease;
  }
  .section.cyan:hover::before   { border-color: rgba(125, 211, 252, 0.35); }
  .section.violet:hover::before { border-color: rgba(165, 180, 252, 0.35); }
  .section.rose:hover::before   { border-color: rgba(251, 146, 60, 0.35); }
  .section.amber:hover::before  { border-color: rgba(252, 211, 77, 0.35); }

  .section.cyan .corner, .section.violet .corner,
  .section.rose .corner, .section.amber .corner {
    background: #383838;
    box-shadow: none;
    transition: background .3s ease, box-shadow .3s ease;
  }
  .section.cyan:hover   .corner { background: var(--cyan);   box-shadow: 0 0 6px var(--cyan); }
  .section.violet:hover .corner { background: var(--violet); box-shadow: 0 0 6px var(--violet); }
  .section.rose:hover   .corner { background: #fb923c;       box-shadow: 0 0 6px #fb923c; }
  .section.amber:hover  .corner { background: var(--amber);  box-shadow: 0 0 6px var(--amber); }

  .tag.cyan, .tag.violet, .tag.rose, .tag.amber {
    color: var(--text-white);
    transition: color .3s ease;
  }
  .section.cyan:hover   .tag.cyan   { color: var(--cyan); }
  .section.violet:hover .tag.violet { color: var(--violet); }
  .section.rose:hover   .tag.rose   { color: #fb923c; }
  .section.amber:hover  .tag.amber  { color: var(--amber); }

  /* 标题灰色默认 + hover 点亮 */
  .section.cyan   .name,
  .section.violet .job-name,
  .section.rose   .project-title,
  .section.amber  .project-title {
    color: var(--text-white);
    transition: color .3s ease;
  }
  .section.cyan:hover   .name        { color: var(--text-white); }
  .section.violet:hover .job-name    { color: var(--text-white); }
  .section.rose:hover   .project-title { color: var(--text-white); }
  .section.amber:hover  .project-title { color: var(--text-white); }

  /* ZPix 最像素 — 全字符覆盖的中文点阵字体, 用于 section tag
   * @font-face 已迁移到 fonts/local-fonts.css 离线加载 (走 Cloudflare CDN, 不再依赖 jsDelivr) */

  /* section tag — 双行点阵 (英小 + 中大), 放在 section 内框左上, 不再跨边框 */
  .tag {
    position: absolute;
    top: 24px;
    left: 28px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;     /* EN/CN 按内容宽度左对齐, 不再 stretch */
    gap: 4px;
    padding: 0;
    background: transparent;
    font-family: 'ZPix', 'JetBrains Mono', monospace;
    line-height: 1.05;
    z-index: 4;
    /* 大标题保留点阵硬边 + 三方向假粗 (E 方案) */
    -webkit-font-smoothing: none;
    font-smooth: never;
    text-shadow: 1px 0 0 currentColor, 0 1px 0 currentColor, 1px 1px 0 currentColor;
  }
  .tag .tag-en {
    font-size: 14px;
    letter-spacing: 0;
    opacity: 0.55;
    white-space: nowrap;
    display: block;
    /* EN 行宽对齐 CN 行: 字号 14px 让 EN 自然窄于 CN, JS 用脚本测 CN 宽度后给 EN 计算 letter-spacing,
       只调字母间隔, 不拉空格, 视觉更均匀 */
  }
  .tag .tag-cn {
    font-size: 32px;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  /* tag 颜色由 hover 块统一控制，此处不再设色 */
  /* 给带 tag 的 section 头部留位置, 让正文从 tag 下方开始 */
  .section:has(> .tag) { padding-top: 110px; }

  /* ==================== Personal Info ==================== */
  /* hero 三件 (meta-label / name / role) 共用 ZPix 点阵 + 关闭抗锯齿; .role 不加假粗 */
  .meta-label, .name, .role {
    font-family: 'ZPix', 'JetBrains Mono', monospace;
    -webkit-font-smoothing: none;
    font-smooth: never;
  }
  .meta-label, .name {
    text-shadow: 1px 0 0 currentColor, 0 1px 0 currentColor, 1px 1px 0 currentColor;
  }
  .meta-label {
    font-size: var(--text-xs);              /* xs - 副标题 */
    letter-spacing: var(--tracking-case);   /* 超宽 */
    color: var(--text-737);
    margin-bottom: 18px;
    font-weight: 400;
  }
  .name {
    font-size: clamp(2.4rem, 7.5vw, var(--text-6xl)); /* 自适应:窄屏 38px → 宽屏 60px */
    font-weight: 300;                       /* light - 姓名 */
    letter-spacing: var(--tracking-name);   /* -0.03em 略紧 */
    color: var(--text-white);
    margin-bottom: 10px;
    line-height: var(--leading-tight);
  }
  .role {
    font-size: var(--text-xl);              /* xl */
    color: var(--text-a3);                  /* 次要信息 */
    margin-bottom: 28px;
    letter-spacing: var(--tracking-wider);
  }
  .bio {
    font-size: var(--text-base);            /* base */
    color: var(--text-d4);                  /* 正文 */
    line-height: var(--leading-relaxed);
    max-width: 740px;
  }

  /* ==================== Work Experience ==================== */
  .job {
    position: relative;
    padding: 0 0 22px 20px;                    /* 左侧 20px 给装饰线让位 */
    border-left: 1px solid #3a3a3a;            /* 装饰线现在覆盖整块 (含标题) */
  }
  .job:last-of-type { padding-bottom: 4px; }

  .job-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
  }
  /* 职位行 + 列表区域 — 不再单独挂线 */
  .job-body {
    position: relative;
  }
  .job-name {
    font-size: var(--text-2xl);             /* 2xl - 公司名称 */
    font-weight: 500;
    color: var(--text-white);
    letter-spacing: var(--tracking-wider);
  }
  .job-date {
    font-size: var(--text-sm);              /* sm - 时间段 */
    color: var(--text-737);
    letter-spacing: var(--tracking-wider);
  }
  .job-role {
    font-size: var(--text-sm);
    color: var(--text-a3);
    margin-bottom: 14px;
  }
  .job-list { list-style: none; padding-left: 0; }
  .job-list li {
    position: relative;
    padding-left: 18px;
    font-size: var(--text-sm);              /* sm - 工作内容 */
    line-height: var(--leading-relaxed);
    color: var(--text-d4);
  }
  .job-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 8px; height: 1px;
    background: var(--text-525);            /* 列表符号 */
  }

  /* ==================== Project Grid ==================== */
  /* minmax(0,1fr) 防止 nowrap 文本撑开列宽,使三列严格等宽 */
  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 6px; align-items: stretch; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 6px; align-items: stretch; }
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 6px; align-items: stretch; }

  /* 项目网格细线分格 — 每张卡画 right + bottom 边线, 第一列加 left, 第一行加 top.
     共享边只画一次, 粗细均匀; 没有卡片的格子完全不渲染, 不会有"空格漏色"问题. */
  /* 卡片之间留 12px 间距, 每张卡独立成块, 不再连在一起 */
  .section.amber .grid-3,
  .section.amber .grid-4,
  .section.rose .grid-3,
  .section.rose .grid-4 {
    gap: 12px;
  }
  .section.amber .grid-3 > .project,
  .section.amber .grid-4 > .project,
  .section.rose .grid-3 > .project,
  .section.rose .grid-4 > .project {
    background: #1a1a1a;
    padding: 14px 14px 16px;
    box-shadow: 3px 3px 2px #000;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .section.amber .grid-3 > .project:hover,
  .section.amber .grid-4 > .project:hover,
  .section.rose .grid-3 > .project:hover,
  .section.rose .grid-4 > .project:hover {
    box-shadow: 3px 6px 2px #000;
  }

  .project {
    cursor: pointer;
    transition: transform .25s ease;
    /* flex column + min-width:0 让卡片严格遵守网格列宽,且让 chips 可以被推到底部 */
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
  }
  .project:hover { transform: translateY(-3px); }

  /* 角标包裹层 — 贴合图像外框 */
  .thumb-frame {
    position: relative;
    margin-bottom: 14px;
  }
  /* 直角 L 形角标装饰已废弃 */
  .thumb-frame .br-corner { display: none; }

  .project-thumb {
    position: relative;
    width: 100%;
    padding-bottom: 75%;            /* 4:3 比例 hack, 老牌 + 100% 兼容 */
    height: 0;
    background: #0f0f0f;
    overflow: hidden;
  }
  .project-thumb > * {              /* 所有子元素绝对填满 */
    position: absolute;
    inset: 0;
  }
  .section.amber .project-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity .3s ease;
  }
  .section.amber .project:hover .project-thumb::after {
    opacity: 0;
  }
  .project-thumb > img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .project-thumb > svg.placeholder {
    /* 居中显示固定 64×64
       注意:inset:auto 必须先写,否则会重置后面的 top/left */
    inset: auto;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    opacity: 0.55;
  }

  .project-title {
    font-size: var(--text-base);            /* base */
    font-weight: 500;
    color: var(--text-white);
    margin-bottom: 5px;
    letter-spacing: var(--tracking-wider);
  }
  .project-desc {
    font-size: var(--text-sm);
    color: var(--text-400);                 /* 说明文字 */
    margin-bottom: 12px;
    line-height: 1.5;
    white-space: nowrap;                    /* 强制单行 */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* margin-top:auto 把 chips 推到卡片底部,实现三列 chips 横向对齐 */
  .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
  .chip {
    background: #111111;
    color: var(--text-a3);
    font-size: var(--text-xs);              /* xs - 标签 */
    padding: 3px 9px;
    border: 1px solid var(--border);
  }

  /* sub-headings inside section — 视觉与横排 .past-tab 完全一致:
     琥珀色 / 左侧竖线 / CN 上 EN 下 双行点阵 */
  .sub-heading {
    position: relative;
    display: block;
    padding: 6px 0 6px 16px;          /* 左 16 给竖线让位, 与 .past-tab 一致 */
    margin: 32px 0 18px;
    font-size: 20px;                  /* 与 .past-tab .tab-cn 一致 */
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0.06em;
    color: var(--amber);
    font-family: 'ZPix', 'JetBrains Mono', monospace;
    -webkit-font-smoothing: none;
    font-smooth: never;
    text-shadow: 1px 0 0 currentColor, 0 1px 0 currentColor, 1px 1px 0 currentColor;
  }
  .sub-heading::before {
    /* 左侧琥珀竖线小提示 — 跟横排 .past-tab.active .tab-line 同款 */
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 28px;
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber);
    transform: translateY(-50%);
  }
  .sub-heading::after {
    /* 中文下方的英文小字 — 跟横排 .past-tab .tab-en 同款 */
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    opacity: 0.55;
    text-shadow: none;
  }
  /* 三个分类对应的英文 (用 :nth-of-type 注入, 不需要改 HTML) */
  .past-sub:nth-of-type(1) .sub-heading::after { content: 'BRAND'; }
  .past-sub:nth-of-type(2) .sub-heading::after { content: 'CAMPAIGN'; }
  .past-sub:nth-of-type(3) .sub-heading::after { content: 'PACKAGING'; }

  .sub-heading:first-of-type { margin-top: 8px; }

  /* ==================== Contact ==================== */
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 8px;
  }
  .contact-item .ci-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--text-a3);
    margin-bottom: 8px;
  }
  .ci-emoji {
    font-size: 14px;
    display: inline-block;
    line-height: 1;
  }
  .contact-item .ci-value {
    font-size: var(--text-base);            /* base - 联系方式值 */
    color: var(--text-white);
    letter-spacing: var(--tracking-wider);
  }

  /* fade-in on scroll */
  .section { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
  .section.visible { opacity: 1; transform: translateY(0); }

  /* ==================== Detail Page Transition ==================== */
  /* 当 .page 进入 detail 状态:所有 section 直接淡出消失,无横向位移
     注: 用后代选择器 (空格) 而非直接子选择器 (>),
     因为 #profile/#experience/#contact 嵌套在 .col-left 内,
     #ai/#past 才直接在 .page 下。改成后代选择器后所有 section 一起淡出 */
  .page.detail-out .section {
    transition: opacity .2s ease-out;
    opacity: 0 !important;
    pointer-events: none;
    transition-delay: 0s;
  }
  /* .col-left 自身也淡出, 保持视觉整洁 (避免左列容器残留) */
  .page.detail-out > .col-left {
    transition: opacity .2s ease-out;
    opacity: 0 !important;
    pointer-events: none;
  }

  /* hover indicator removed per user request — keep only cursor change */
  .project.has-detail { position: relative; cursor: pointer; }

  /* ==================== Detail Page (AIGC 设计师简历) ==================== */
  .detail-page {
    position: fixed;
    inset: 0;
    background: #111111;             /* 详情页里面纯色底, 不再画背景网格 */
    z-index: 200;
    overflow-y: auto;
    opacity: 0;
    transform: translateX(80px);
    pointer-events: none;
    transition: opacity .55s cubic-bezier(.4, 0, .2, 1) .15s,
                transform .55s cubic-bezier(.4, 0, .2, 1) .15s;
  }
  .detail-page.open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }

  .detail-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 36px 28px 80px;
  }

  .detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--rose);
    color: var(--rose);
    padding: 8px 14px;
    font-family: 'JetBrains Mono', 'Pixelify Sans', monospace;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-case);
    cursor: pointer;
    margin-bottom: 32px;
    transition: background .2s, color .2s;
  }
  .detail-back:hover { background: var(--rose); color: #000; }

  .detail-hero {
    position: relative;
    background: var(--bg-card);
    border: 1px solid rgba(251, 113, 133, 0.4);
    padding: 56px 48px 48px;
    margin-bottom: 28px;
  }
  .detail-hero .corner { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 6px var(--rose); }

  .detail-meta {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-case);
    color: var(--rose);
    margin-bottom: 22px;
  }
  .detail-title {
    font-size: clamp(2.2rem, 6.8vw, var(--text-6xl));
    font-weight: 300;
    letter-spacing: var(--tracking-name);
    color: var(--text-white);
    margin-bottom: 14px;
    line-height: var(--leading-tight);
  }
  .detail-subtitle {
    font-size: var(--text-xl);
    color: var(--text-a3);
    letter-spacing: var(--tracking-wider);
    margin-bottom: 26px;
  }
  .detail-lede {
    font-size: var(--text-base);
    color: var(--text-d4);
    line-height: var(--leading-relaxed);
    max-width: 760px;
  }

  .detail-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 28px; }
  .detail-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 28px; }

  .detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 28px 26px;
    position: relative;
  }
  .detail-card .ix {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--rose);
    letter-spacing: var(--tracking-case);
    margin-bottom: 14px;
  }
  .detail-card h4 {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--text-white);
    margin-bottom: 10px;
    letter-spacing: var(--tracking-wider);
  }
  .detail-card p {
    font-size: var(--text-sm);
    color: var(--text-a3);
    line-height: var(--leading-relaxed);
  }

  .detail-section-title {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-white);
    letter-spacing: var(--tracking-widest);
    margin: 36px 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .detail-section-title::before {
    content: '';
    width: 18px; height: 1px;
    background: var(--rose);
  }

  .pipeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    margin-bottom: 28px;
  }
  .pipeline-step {
    padding: 22px 18px;
    border-right: 1px dashed #1f1f1f;
    position: relative;
  }
  .pipeline-step:last-child { border-right: 0; }
  .pipeline-step .pn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--rose);
    letter-spacing: 0.15em;
    margin-bottom: 10px;
  }
  .pipeline-step .pt {
    font-size: var(--text-base);
    color: var(--text-white);
    font-weight: 500;
    margin-bottom: 6px;
  }
  .pipeline-step .pd {
    font-size: var(--text-xs);
    color: var(--text-737);
    line-height: 1.6;
  }

  .toolset {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
  }
  .toolset .chip { background: #141414; border-color: rgba(251,113,133,0.25); color: var(--text-d4); padding: 6px 12px; }

  .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 28px;
  }
  .stat {
    border-left: 1px solid var(--rose);
    padding: 6px 0 6px 16px;
  }
  .stat .stat-num {
    font-size: var(--text-5xl);
    font-weight: 300;
    color: var(--text-white);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    margin-bottom: 8px;
  }
  .stat .stat-label {
    font-size: var(--text-xs);
    color: var(--text-737);
    letter-spacing: var(--tracking-case);
  }

  @media (max-width: 720px) {
    .detail-inner { padding: 20px 14px 60px; }
    .detail-hero { padding: 32px 22px; }
    /* .detail-title 字号已由 clamp() 接管 */
    .detail-grid-2, .detail-grid-3, .pipeline, .stats { grid-template-columns: 1fr; }
    .pipeline-step { border-right: 0; border-bottom: 1px dashed #1f1f1f; }
    .pipeline-step:last-child { border-bottom: 0; }
  }

  /* ==================== Mobile ==================== */
  @media (max-width: 720px) {
    body { padding: 16px 10px 60px; background-size: 40px 40px; }
    .nav { padding: 14px 12px; }
    .nav-links { gap: 12px; }
    .nav-link { font-size: var(--text-xs); }
    .section { padding: 28px 22px; }
    /* .name 字号已由 clamp() 接管 */
    .role { font-size: var(--text-base); }
    .job-name { font-size: var(--text-lg); }
    .contact-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    .job-head { flex-direction: column; gap: 2px; }
  }

  /* ==================== Project Modal ==================== */
  /* hover indicator removed per user request — keep only cursor change */
  .project.has-detail-amber { position: relative; cursor: pointer; }

  /* backdrop */
  .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
  }
  .modal-backdrop.open { opacity: 1; pointer-events: auto; }

  /* modal panel — centered lightbox; 详情页里面不再画网格, 干净纯色底 */
  .modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -48%) scale(0.96);
    width: min(900px, 92vw);
    max-height: 88vh;
    background: #111111;
    z-index: 301;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(252,211,77,0.3);
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
    overflow: hidden;
  }
  .modal.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  /* modal topbar */
  .modal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;    /* X 在左 (order:-1), 标题推到最右 */
    gap: 16px;
    padding: 14px 28px;
    border-bottom: 1px solid #1f1f1f;
    background: rgba(17,17,17,0.92);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }
  .modal-close { order: -1; }          /* X 排到 bar 最左 */
  .modal-bar-left {
    display: flex; align-items: center; gap: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .modal-bar-left .mbl-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--amber); box-shadow: 0 0 8px var(--amber);
    animation: blink-amber 2s infinite;
  }
  @keyframes blink-amber { 0%,80%{opacity:1} 40%{opacity:0.3} }
  @keyframes video-fade-loop {
    0%   { opacity: 0; }
    16%  { opacity: 1; }
    84%  { opacity: 1; }
    100% { opacity: 0; }
  }
  .freshmart-fade { animation: video-fade-loop 2.998s linear infinite; }
  /* freshmart 02 — 两态交叉淡入淡出, 取代会闪黑的 video loop */
  .freshmart-cf .cf-top {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    animation: freshmart-cf 6s ease-in-out infinite;
  }
  @keyframes freshmart-cf {
    0%, 40%   { opacity: 0; }
    50%, 90%  { opacity: 1; }
    100%      { opacity: 0; }
  }
  /* freshmart 03 — 招牌 日/夜 两态: 各停留 1s, 过渡 0.5s, 周期 3s.
     底图常驻 opacity 1, 上层只在切换时变化, 透明叠加期间永远不会露出 #000 modal 背景. */
  .freshmart-cf-03 .cf-top {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    animation: freshmart-cf-03 3s ease-in-out infinite;
  }
  @keyframes freshmart-cf-03 {
    0%, 33%   { opacity: 0; }
    50%, 83%  { opacity: 1; }
    100%      { opacity: 0; }
  }
  .modal-bar-left .mbl-title { color: #fff; }
  .modal-bar-left .mbl-sub   { color: #555; }

  .modal-close {
    background: transparent;
    border: 1px solid #555;
    color: #bbb;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    transition: border-color .2s, color .2s, background .2s;
    flex-shrink: 0;
  }
  .modal-close:hover { border-color: var(--amber); color: var(--amber); background: rgba(252,211,77,0.08); }

  /* scrollable body */
  .modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 0 0 32px;
  }
  .modal-body::-webkit-scrollbar { width: 3px; }
  .modal-body::-webkit-scrollbar-track { background: #0a0a0a; }
  .modal-body::-webkit-scrollbar-thumb { background: #2a2a2a; }

  /* hero block */
  .modal-hero {
    padding: 40px 36px 36px;
    border-bottom: 1px solid #141414;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
    align-items: start;
  }
  /* Left column: eyebrow + title */
  .modal-hero-left {}
  .modal-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.22em;
    color: var(--amber); text-transform: uppercase;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
  }
  .modal-eyebrow::before {
    content: ''; width: 20px; height: 1px; background: var(--amber);
  }
  .modal-title {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 300;
    letter-spacing: -0.025em;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 28px;
  }
  .modal-meta {
    display: flex; flex-wrap: wrap; gap: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .modal-meta-item { display: flex; flex-direction: column; gap: 5px; }
  .modal-meta-item .mk { color: #3a3a3a; }
  .modal-meta-item .mv { color: #aaa; }
  .modal-tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
  .modal-tag {
    background: transparent; border: 1px solid #2a2a2a;
    color: #555; font-size: 10px;
    padding: 3px 8px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.12em;
  }
  /* Right column: description */
  .modal-hero-right {
    padding-top: 32px;
    border-left: 1px solid #1e1e1e;
    padding-left: 36px;
  }
  .modal-desc {
    font-size: var(--text-sm);
    line-height: 1.9;
    color: var(--text-a3);
    font-weight: 400;
    letter-spacing: 0.02em;
  }

  /* image sequence */
  .modal-images { padding: 0 36px; }
  .modal-img-block { margin-top: 28px; position: relative; }
  .modal-img-block img,
  .modal-img-block video {
    width: 100%; display: block;
  }

  /* 网格布局 */
  .modal-grid-4,
  .modal-grid-3,
  .modal-grid-2 {
    display: grid;
    gap: 12px;
    padding: 0 36px;
    margin-top: 28px;
  }
  .modal-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .modal-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .modal-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .modal-grid-4 .modal-img-block,
  .modal-grid-3 .modal-img-block,
  .modal-grid-2 .modal-img-block {
    margin-top: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  .modal-grid-4 .modal-img-block img,
  .modal-grid-4 .modal-img-block video,
  .modal-grid-3 .modal-img-block img,
  .modal-grid-3 .modal-img-block video,
  .modal-grid-2 .modal-img-block img,
  .modal-grid-2 .modal-img-block video {
    height: 100%;
    object-fit: cover;
  }

  /* divider inside modal */
  .modal-divider {
    margin: 36px 36px 0;
    height: 1px; background: #141414;
    position: relative;
  }
  .modal-divider::before {
    content:''; position:absolute; left:0; top:0;
    height:100%; width:40px; background: var(--amber);
  }

  /* NONO 弹窗专用:顶栏 title 右对齐(关闭按钮已 order:-1 在最左,此处 space-between 把 title 推到最右) */
  #nonoModal .modal-bar { justify-content: space-between; }

  /* 不对称双列:左大右小,等高,允许裁切 (用于 NONO 玻璃钢雕塑) */
  .modal-grid-asym {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    padding: 0 36px;
    margin-top: 28px;
    align-items: stretch;       /* 让两个 cell 同高 */
  }
  .modal-grid-asym .modal-img-block {
    margin-top: 0;
    aspect-ratio: 4 / 3;        /* 左侧定义行高,右侧 stretch 跟随 */
    overflow: hidden;
    background: #111111;
    border-radius: 6px;
  }
  .modal-grid-asym .modal-img-block:nth-child(2) {
    aspect-ratio: auto;         /* 右侧不再限制比例,自动撑满左侧高度 */
  }
  .modal-grid-asym .modal-img-block img,
  .modal-grid-asym .modal-img-block video {
    width: 100%; height: 100%;
    object-fit: cover;          /* 允许裁切以填满 */
    display: block;
  }
  html.light .modal-grid-asym .modal-img-block { background: #f5f5f5; }
  @media (max-width: 720px) {
    .modal-grid-asym {
      grid-template-columns: 1fr;
      padding: 0 18px;
    }
    .modal-grid-asym .modal-img-block,
    .modal-grid-asym .modal-img-block:nth-child(2) {
      aspect-ratio: 4 / 3;
    }
  }

  /* in-modal section heading (章节分隔: 编号 + 标题 + 长线) */
  .modal-section-head {
    margin: 56px 36px 0;
    display: flex; align-items: center; gap: 14px;
    font-family: 'JetBrains Mono', monospace;
  }
  .modal-section-head .num {
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--amber);
    font-weight: 500;
  }
  .modal-section-head .title {
    font-family: 'Manrope', 'Noto Sans SC', sans-serif;
    font-size: 15px;
    letter-spacing: 0.05em;
    color: #e5e5e5;
    font-weight: 500;
  }
  .modal-section-head .line {
    flex: 1;
    height: 1px;
    background: #1e1e1e;
  }
  html.light .modal-section-head .title { color: #1a1a1a; }
  html.light .modal-section-head .line  { background: #e2e2e2; }
  @media (max-width: 720px) {
    .modal-section-head { margin-left: 18px; margin-right: 18px; }
  }

  @media (max-width: 720px) {
    .modal { width: 96vw; max-height: 92vh; }
    .modal-hero { grid-template-columns: 1fr; padding: 24px 18px 24px; }
    .modal-hero-right { border-left: none; padding-left: 0; padding-top: 20px; border-top: 1px solid #1e1e1e; }
    .modal-images, .modal-divider { padding-left: 18px; padding-right: 18px; }
    .modal-title { font-size: 1.6rem; }
    .modal-meta { gap: 14px; }
    .modal-grid-4 { grid-template-columns: repeat(2, 1fr); padding: 0 18px; }
    .modal-grid-3 { grid-template-columns: 1fr; padding: 0 18px; }
    .modal-grid-2 { grid-template-columns: 1fr; padding: 0 18px; }
  }

  /* ==================== 12 星座 横向无缝滚动 ==================== */
  .zodiac-marquee {
    margin-top: 28px;
    padding: 32px 0 36px;
    overflow: hidden;
    background: linear-gradient(180deg, #050505 0%, #0c0c0c 100%);
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .zodiac-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: zodiac-scroll 80s linear infinite;
    padding: 0 12px;
  }
  /* 第二行反向滚动 */
  .zodiac-track.reverse {
    animation: zodiac-scroll-rev 80s linear infinite;
    margin-top: 24px;
  }
  .zodiac-marquee:hover .zodiac-track { animation-play-state: paused; }
  .zodiac-item {
    width: 300px;
    flex-shrink: 0;
    text-align: center;
    cursor: pointer;
  }
  .zodiac-item .pic {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #111111;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #1f1f1f;
    transition: border-color 0.3s ease, transform 0.3s ease;
  }
  .zodiac-item:hover .pic {
    border-color: var(--amber);
    transform: translateY(-4px);
  }
  .zodiac-item .pic img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .zodiac-item .name {
    margin-top: 16px;
    font-size: 16px;
    color: #e5e7eb;
    letter-spacing: 1.5px;
    font-weight: 600;
  }
  .zodiac-item .name .en {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: #737373;
    letter-spacing: 2px;
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase;
    font-weight: 400;
  }
  @keyframes zodiac-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 12px)); }
  }
  @keyframes zodiac-scroll-rev {
    from { transform: translateX(calc(-50% - 12px)); }
    to   { transform: translateX(0); }
  }
  @media (max-width: 720px) {
    .zodiac-item { width: 200px; }
    .zodiac-track { gap: 14px; }
    .zodiac-track.reverse { margin-top: 14px; }
    .zodiac-item .name { font-size: 14px; }
    @keyframes zodiac-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(calc(-50% - 7px)); }
    }
    @keyframes zodiac-scroll-rev {
      from { transform: translateX(calc(-50% - 7px)); }
      to   { transform: translateX(0); }
    }
  }
  html.light .zodiac-marquee {
    background: linear-gradient(180deg, #f5f5f5 0%, #ececec 100%);
  }
  html.light .zodiac-item .pic { background: #fff; border-color: #e2e2e2; }
  html.light .zodiac-item .name { color: #1a1a1a; }
  html.light .zodiac-item .name .en { color: #888; }

  /* ==================== 海报竖图栅格（不裁剪 1:1） ==================== */
  .modal-grid-3.posters .modal-img-block,
  .modal-grid-2.posters .modal-img-block,
  .modal-grid-4.posters .modal-img-block {
    aspect-ratio: auto;
    background: #111111;
    border-radius: 6px;
    overflow: hidden;
  }
  .modal-grid-3.posters .modal-img-block img,
  .modal-grid-2.posters .modal-img-block img,
  .modal-grid-4.posters .modal-img-block img,
  .modal-grid-3.posters .modal-img-block video,
  .modal-grid-2.posters .modal-img-block video,
  .modal-grid-4.posters .modal-img-block video {
    height: auto;
    object-fit: contain;
  }
  html.light .modal-grid-3.posters .modal-img-block,
  html.light .modal-grid-2.posters .modal-img-block,
  html.light .modal-grid-4.posters .modal-img-block { background: #f5f5f5; }

  /* 加 .aligned 用于强制两个视频高度一致 — 按 disney (720:1372) 锁比例, 另一个 cover 微裁两侧 */
  .modal-grid-2.posters.aligned .modal-img-block {
    aspect-ratio: 720 / 1372;
    height: auto;
  }
  .modal-grid-2.posters.aligned .modal-img-block video,
  .modal-grid-2.posters.aligned .modal-img-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* ==================== 壁纸图 + 视频 紧贴叠放 4 列 ==================== */
  .wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 0 36px;
    margin-top: 28px;
  }
  .wp-cell {
    background: #111111;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #1f1f1f;
    position: relative;
    line-height: 0;          /* 消除 inline 元素之间的缝隙 */
  }
  .wp-cell img,
  .wp-cell video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    background: #000;
  }
  .wp-cell .wp-label {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    padding: 5px 12px;
    border-radius: 16px;
    line-height: 1.4;
    border: 1px solid rgba(255,255,255,0.1);
  }
  @media (max-width: 720px) {
    .wallpaper-grid { grid-template-columns: repeat(2, 1fr); padding: 0 18px; gap: 10px; }
  }
  html.light .wp-cell { background: #f5f5f5; border-color: #e2e2e2; }
  html.light .wp-cell img, html.light .wp-cell video { background: #fff; }
  html.light .wp-cell .wp-label { background: rgba(0,0,0,0.7); border-color: rgba(255,255,255,0.15); }

  /* ==================== LEGO · 元素 双排交错滚动 ==================== */
  .lego-marquee-section {
    margin-top: 28px;
    padding: 26px 0 30px;
    background: linear-gradient(180deg, #050505 0%, #0c0c0c 100%);
    overflow: hidden;
  }
  .lego-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .lego-marquee + .lego-marquee { margin-top: 16px; }
  .lego-track {
    display: flex;
    gap: 18px;
    width: max-content;
    padding: 4px 9px;
    animation: lego-scroll 40s linear infinite;
  }
  .lego-track.reverse {
    animation: lego-scroll-rev 45s linear infinite;
  }
  .lego-marquee:hover .lego-track { animation-play-state: paused; }
  .lego-item {
    width: 170px;
    height: 170px;
    flex-shrink: 0;
    background: #101010;
    border: 1px solid #1f1f1f;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    transition: border-color .25s, transform .25s;
  }
  .lego-item:hover {
    border-color: var(--amber);
    transform: translateY(-4px);
  }
  .lego-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
  @keyframes lego-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 9px)); }
  }
  @keyframes lego-scroll-rev {
    from { transform: translateX(calc(-50% - 9px)); }
    to   { transform: translateX(0); }
  }
  @media (max-width: 720px) {
    .lego-item { width: 130px; height: 130px; padding: 14px; }
  }
  html.light .lego-marquee-section {
    background: linear-gradient(180deg, #f5f5f5 0%, #ececec 100%);
  }
  html.light .lego-item { background: #fff; border-color: #e2e2e2; }

  /* ==================== LEGO · 7:3 等高双图 (左大图上下裁切, 右小视频自然比例) ==================== */
  .lego-hero-row {
    display: flex;
    gap: 16px;
    padding: 0 36px;
    margin-top: 28px;
    align-items: stretch;               /* 关键: 两边等高 */
  }
  .lego-hero-row .lh-cell {
    background: #111111;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
  }
  /* 右: 视频驱动整行高度 (自然比例完整展示) */
  .lego-hero-row .lh-right {
    flex: 0 0 calc(30% - 8px);
  }
  .lego-hero-row .lh-right video {
    width: 100%;
    height: auto;
    display: block;
  }
  /* 左: 占剩余 70%, 用 absolute 让 img 填满, 上下裁切对齐 */
  .lego-hero-row .lh-left {
    flex: 1;
    position: relative;
  }
  .lego-hero-row .lh-left img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;                  /* 等高时上下裁切 */
    display: block;
  }
  @media (max-width: 720px) {
    .lego-hero-row {
      flex-direction: column;
      padding: 0 18px;
    }
    .lego-hero-row .lh-right {
      flex: 0 0 auto;
      max-width: 60%;
      align-self: center;
    }
    .lego-hero-row .lh-left {
      aspect-ratio: 7 / 5;
    }
  }
  html.light .lego-hero-row .lh-cell { background: #f5f5f5; }

  /* ==================== TOKYO · 19+28 等高并排 (按宽高比分配宽度) ==================== */
  .tokyo-pair {
    display: flex;
    gap: 14px;
    padding: 0 36px;
    margin-top: 28px;
  }
  .tokyo-pair .t-cell {
    background: #111111;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
    min-width: 0;                 /* 允许 flex 项缩到合适宽度 */
  }
  .tokyo-pair .t-cell video {
    width: 100%;
    height: auto;
    display: block;
  }
  /* tokyo_19 是 1200x390 (aspect 3.08), tokyo_28 是 400x400 (aspect 1.0)
     → 想等高: 19 占 3.08/4.08 ≈ 75.5%, 28 占 24.5% */
  .tokyo-pair .t-19 { flex: 3.08; }
  .tokyo-pair .t-28 { flex: 1; }
  @media (max-width: 720px) {
    .tokyo-pair { flex-direction: column; padding: 0 18px; }
    .tokyo-pair .t-cell { flex: none; }
  }
  html.light .tokyo-pair .t-cell { background: #f5f5f5; }

  /* ==================== 错落布局 (Stagger) — 不同对齐+不同宽度，画刊感 ==================== */
  .stagger-row {
    display: flex;
    gap: 14px;
    padding: 0 36px;
    margin-top: 28px;
  }
  .sr-left   { justify-content: flex-start; }
  .sr-right  { justify-content: flex-end; }
  .sr-center { justify-content: center; }
  .stagger-row > .si {
    line-height: 0;
    background: #111111;
    border-radius: 6px;
    overflow: hidden;
  }
  .stagger-row > .si img,
  .stagger-row > .si video {
    width: 100%; height: auto; display: block;
  }
  .si-35 { width: 35%; } .si-40 { width: 40%; }
  .si-45 { width: 45%; } .si-50 { width: 50%; }
  .si-55 { width: 55%; } .si-58 { width: 58%; }
  .si-60 { width: 60%; } .si-65 { width: 65%; }
  .si-70 { width: 70%; } .si-75 { width: 75%; }
  @media (max-width: 720px) {
    .stagger-row { padding: 0 18px; flex-direction: column; gap: 10px; }
    .stagger-row > .si { width: 100% !important; }
  }
  html.light .stagger-row > .si { background: #f5f5f5; }

  /* ==================== LEGO · 细节卡片 ==================== */
  .lego-section-head {
    padding: 36px 36px 0;
    margin-top: 14px;
  }
  .lego-section-head .eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--amber);
    font-weight: 700;
    margin-bottom: 10px;
    font-family: "JetBrains Mono", monospace;
  }
  .lego-section-head h3 {
    font-size: 18px;
    color: #e5e7eb;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
  }
  .lego-section-head p {
    font-size: 13px;
    color: #888;
    line-height: 1.7;
    max-width: 560px;
  }
  .lego-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 36px;
    margin-top: 22px;
  }
  .detail-card {
    background: #0d0d0d;
    border: 1px solid #1a1a1a;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .25s, transform .25s;
    position: relative;
  }
  .detail-card:hover {
    border-color: var(--amber);
    transform: translateY(-3px);
  }
  .detail-card .pic {
    aspect-ratio: 5 / 4;        /* 略矮 + 略宽，整体卡更紧凑 */
    overflow: hidden;
    background: #111111;
    position: relative;
  }
  .detail-card .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* 撑满 */
    display: block;
  }
  /* 数字徽章: 浮在图片下边缘正中 */
  .detail-card .badge {
    position: absolute;
    left: 50%;
    bottom: -16px;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--amber);
    color: #1a1228;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    font-family: "JetBrains Mono", monospace;
    box-shadow: 0 4px 10px rgba(0,0,0,0.45), 0 0 0 3px #0d0d0d;
    z-index: 2;
  }
  .detail-card .meta {
    padding: 22px 10px 14px;    /* 收紧 padding */
    text-align: center;
  }
  .detail-card .meta .title {
    font-size: 14px;
    color: #e5e7eb;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 1px;
    white-space: nowrap;        /* 标题不换行 */
  }
  .detail-card .meta .desc {
    font-size: 11px;
    color: #888;
    line-height: 1.55;
    white-space: nowrap;        /* 文案不换行 */
  }
  @media (max-width: 720px) {
    .lego-details-grid { grid-template-columns: repeat(2, 1fr); padding: 0 18px; }
    .lego-section-head { padding: 28px 18px 0; }
  }
  html.light .lego-section-head h3 { color: #1a1a1a; }
  html.light .lego-section-head p { color: #555; }
  html.light .detail-card { background: #fafafa; border-color: #e2e2e2; }
  html.light .detail-card .pic { background: #f0f0f0; }
  html.light .detail-card .badge { box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 4px #fafafa; }
  html.light .detail-card .meta .title { color: #1a1a1a; }
  html.light .detail-card .meta .desc { color: #888; }