:root {
      /* ========= ★ 区域间距总控 ★ ========= */
      /* 修改这一个值即可拉大/缩小所有区域之间的间隔 */
      /* 0px = 原始间距，80px = 适度透气，120px = 更加宽松 */
      --spacing-boost: 190px;
      /* 同页相近区域的较小间距（用于联系紧密的模块） */
      --spacing-boost-small: 60px;
      /* ========= 全局圆角参数（你可以直接微调） ========= */
      --radius-xs: 0px;
      --radius-sm: 0px;
      --radius-md: 0px;
      --radius-lg: 0px;
      --radius-xl: 0px;
      --radius-2xl: 0px;

      /* ===== 动效参数总控 ===== */
      --title-wave-duration: 1.2s;
      /* ← 标题波浪时长（原0.9s） */
      --title-wave-easing: cubic-bezier(0.5, 1.25, 0.55, 1);
      --title-wave-rotate: -90deg;
      --title-wave-translate: 40px;
      --title-wave-tier1-delay: 20ms;
      /* ← 标题tier1间隔（原18ms） */
      --title-wave-tier2-delay: 30ms;
      /* ← 标题tier2间隔（原28ms） */
      --title-wave-tier3-delay: 42ms;
      /* ← 标题tier3间隔（原40ms） */
      --card-fade-duration: 1.2s;
      /* ← 卡片淡入时长（增加到 1.2s，使浮出过渡更加舒缓） */
      --card-fade-easing: cubic-bezier(0.25, 1, 0.2, 1);
      --card-fade-delay: 80ms;
      /* ← 卡片之间默认备用间隔 */
      --card-fade-distance: 40px;
      /* ← 卡片淡入距离 */
      --card-spring-duration: 1.3s;
      /* ← 弹性卡片时长（拉长至 1.3s，使得近期作品等组件入场更加温和舒展） */
      --card-spring-easing: cubic-bezier(0.25, 1, 0.2, 1);
      /* ← 升级为高档的 easeOutQuart 减速曲线，去除生硬的回弹，提升高级感 */
      --card-spring-delay: 80ms;
      /* ← 卡片之间默认备用间隔 */
      --card-spring-distance: 45px;
      /* ← 优化浮起位移，使其在大屏幕上更加得体 */
      --card-spring-scale: 0.95;
      /* ← 卡片初始微缩放比例，打造3D透视入场感 */
      --modal-morph-duration: 1s;
      --modal-morph-easing: cubic-bezier(0.16, 1, 0.3, 1);

      /* ========= 配色 ========= */
      --bg: #080808;
      --bg-2: #07030d;
      --bg-3: #0a0612;

      --panel: rgba(255, 255, 255, .030);
      --panel-2: rgba(255, 255, 255, .020);
      --panel-3: rgba(255, 255, 255, .040);

      --border: rgba(255, 255, 255, .08);
      --border-soft: rgba(255, 255, 255, .06);
      --border-strong: rgba(255, 255, 255, .12);

      --text: #fffffff2;
      --text-2: rgba(255, 255, 255, .68);
      --text-3: rgba(255, 255, 255, .48);
      --text-4: rgba(255, 255, 255, .25);

      --purple: #7600FF;
      --purple-2: #7600FF;
      --purple-3: #5b15d2;
      --green: #d7ff4c;

      --shadow: 0 12px 34px rgba(0, 0, 0, .22);
      --shadow-lg: 0 22px 70px rgba(0, 0, 0, .30);

      --header-h: 70px;
      --page-x: clamp(18px, 5.8vw, 96px);
      --max: 1720px;
      --section-gap: calc(clamp(78px, 9vw, 128px) + var(--spacing-boost));
      --trans: .34s cubic-bezier(.22, 1, .36, 1);
    }

    /* ===== 全站卡片底色覆盖 ===== */
    .cap-card,
    .profile-mini,
    .profile-main,
    .recent-card,
    .work-card,
    .method-card,
    .card-mini,
    .value-card,
    .meta-card {
      background: linear-gradient(180deg, rgba(255, 255, 255, .050), rgba(255, 255, 255, .030)) !important;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-user-select: none;
      -webkit-user-drag: none;
      user-select: none;
    }

    input,
    textarea {
      user-select: text;
      -webkit-user-select: text
    }

    html {
      scroll-behavior: auto !important;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-tap-highlight-color: transparent;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
      display: none;
    }

    body {
      min-height: 100vh;
      font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      color: var(--text);
      background: var(--bg);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* 统一规范所有卡片的标题 */
    .process-card h4,
    .method-card h3,
    .value-card h3,
    .work-card h3,
    .profile-main h4,
    .profile-mini h4,
    .show-text h3,
    .img-copy h3 {
      font-weight: 500 !important;
      font-family: "Inter", "Microsoft YaHei", sans-serif !important;
    }

    /* 统一规范标准卡片的标题尺寸 */
    .process-card h4,
    .method-card h3,
    .value-card h3,
    .work-card h3,
    .profile-mini h4 {
      font-size: 22px !important;
      margin-bottom: 8px !important;
    }

    /* 统一规范所有卡片的小文字 */
    .process-card p,
    .method-card p,
    .value-card p,
    .work-card p,
    .profile-mini p,
    .show-text p,
    .img-copy p,
    .profile-main p {
      font-size: 15px !important;
      font-weight: 300 !important;
      line-height: 1.8 !important;
      color: var(--text-3) !important;
    }

    .personal-intro p,
    .process-head p,
    .section-desc {
      font-size: 16px !important;
      line-height: 1.8 !important;
      color: var(--text-3) !important;
      font-weight: 300 !important;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      background:
        linear-gradient(rgba(255, 255, 255, .014) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: radial-gradient(circle at center, black 34%, transparent 88%);
      opacity: .18;
    }

    img {
      display: block;
      max-width: 100%;
      -webkit-user-drag: none
    }

    a {
      text-decoration: none;
      color: inherit
    }

    button,
    input,
    textarea {
      font: inherit
    }

    .wrap {
      width: min(var(--max), calc(100vw - var(--page-x) * 2));
      margin: 0 auto;
    }

    .page {
      display: none;
      min-height: 100vh;
      padding-top: var(--header-h);
      background: var(--bg);
      position: relative;
    }

    /* 确保页面所有非页尾部分拥有更高层级和实体背景，以在滚动时完美遮盖住底部的粘性页尾，实现原生揭幕 */
    .page>section:not(.site-footer) {
      position: relative;
      z-index: 2;
      background: var(--bg);
    }

    .page.active {
      display: block;
      animation: pageIn .32s ease;
    }

    @keyframes pageIn {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .section {
      padding: var(--section-gap) 0;
      position: relative;
      z-index: 2;
      background: var(--bg);
    }

    .section-top-tight {
      padding-top: calc(22px + var(--spacing-boost) * 0.4)
    }

    .section-title {
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -.05em;
    }

    .section-desc {
      font-size: 14px;
      line-height: 1.88;
      color: var(--text-3);
      max-width: 760px;
    }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #d3b2ff;
      border: 1px solid rgba(168, 75, 255, .18);
      background: rgba(122, 40, 255, .10);
    }

    .btn {
      border: none;
      cursor: pointer;
      transition: transform var(--trans), box-shadow var(--trans), background var(--trans), border-color var(--trans);
    }

    .btn:hover {
      transform: translateY(-2px)
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 22px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--purple), var(--purple-3));
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 10px 20px rgba(122, 40, 255, .18);
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 22px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .028);
      border: 1px solid rgba(255, 255, 255, .12);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .btn-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 16px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-2);
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, .026);
      cursor: pointer;
      transition: all var(--trans);
    }

    .btn-chip.active,
    .btn-chip:hover {
      background: linear-gradient(135deg, var(--purple), var(--purple-3));
      color: #fff;
      border-color: transparent;
      box-shadow: 0 10px 18px rgba(122, 40, 255, .16);
    }

    .glass-card {
      background: linear-gradient(180deg, var(--panel), var(--panel-2));
      border: 1px solid var(--border-soft);
      box-shadow: var(--shadow);
    }

    .hover-up {
      transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans), background var(--trans);
    }

    .hover-up:hover {
      transform: translateY(-5px);
      border-color: var(--border-strong);
      box-shadow: var(--shadow-lg);
    }

    /* header */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 300;
      height: var(--header-h);
      background: rgb(4 2 10 / 0%);
      /* 导航栏透明度 */
      border-bottom: 1px solid rgba(255, 255, 255, 0);
      transition: all 1.2s cubic-bezier(.22, 1, .36, 1);
      backdrop-filter: blur(0px);
      /* ← 加这行：模糊值，数字越大越模糊 */
      -webkit-backdrop-filter: blur(12px);
      /* ← 加这行：兼容 Safari */
    }

    .header.scrolled {
      background: rgb(4 2 10 / 40%);
      border-bottom-color: rgba(255, 255, 255, .05);
      box-shadow: 0 12px 36px rgba(0, 0, 0, .22);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
    }

    .header-glow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
      opacity: var(--glow-opacity, 0);
      /* 完全由 JS/GSAP 驱动，实现位移、收缩与淡出的完美物理级同步，防止半途凭空消失 */
      --bg-transparent: rgba(5, 4, 6, 0);
    }

    .header-glow::before {
      content: "";
      position: absolute;
      /* 挂在导航栏顶部边缘 */
      top: -85px;
      left: var(--glow-x, 50%);
      transform: translate(-50%, 0) scale(var(--glow-scale-x, 1), var(--glow-scale-y, 1));
      width: 200px;
      height: 160px;
      border-radius: 50%;

      /* 多层色彩叠加：
         1. 顶层：明亮紫粉色核心 (Core)，高不透明度 (0.85) 打造强能量核心
         2. 中层：深紫包络 (Envelope)，高不透明度 (0.60) 扩展发光范围
         3. 底层：实色消隐背板 (Blocker)，与光效位置完全同步移动，完美遮盖滑过的网页文字内容，防止其透出
      */
      background:
        radial-gradient(ellipse at 50% 0%, var(--glow-core, rgba(168, 75, 255, 0.68)) 0%, rgba(122, 40, 255, 0.28) 35%, rgba(122, 40, 255, 0) 75%),
        radial-gradient(ellipse at 50% 0%, var(--glow-envelope, rgba(118, 0, 255, 0.48)) 0%, rgba(118, 0, 255, 0.14) 55%, rgba(118, 0, 255, 0) 85%),
        radial-gradient(ellipse at 50% 0%, var(--bg) 0%, var(--bg) 65%, var(--bg-transparent) 100%);
      filter: blur(22px);
      /* 降低模糊度以汇聚核心发光，适应缩小的尺寸 */
      will-change: left, transform;
      transform-origin: center top;
    }

    /* 浅色模式适配 */
    body[data-theme="light"] {
      --bg-transparent: rgba(248, 246, 242, 0);
      --glow-core: rgba(147, 51, 234, 0.44);
      --glow-envelope: rgba(147, 51, 234, 0.24);
    }

    .header-inner {
      width: min(var(--max), calc(100vw - var(--page-x) * 2));
      margin: 0 auto;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      position: relative;
    }

    .logo {
      font-family: "Syne", sans-serif;
      font-size: 28px;
      /* LOGO大小 */
      font-weight: 800;
      letter-spacing: -.04em;
      color: #ffffff;
      flex-shrink: 0;
      margin-left: 0px;
      /* ← 加这行，正数往右推，负数往左推，不加则紧贴左边缘 */
      margin-top: 0;
      /* ← 加这行，正数往下推，负数往上推 */
    }

    .nav {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 82px;
      /* 导航间距加大 */
    }

    .nav a {
      font-size: 15px;
      /* 字体变大 */
      font-weight: 400;
      /* 300=细, 400=正常, 500=中等, 600=当前, 700=粗, 800=很粗 */
      color: var(--text-4);
      padding: 8px 6px;
      position: relative;
      transition: color var(--trans);
    }

    .nav a.active,
    .nav a:hover {
      color: #fff;
    }

    .nav a.active::after {
      content: "";
      position: absolute;
      left: 6px;
      right: 6px;
      bottom: 0;
      height: 2px;
      border-radius: 2px;
      background: none;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }

    .contact-mini {
      padding: 9px 16px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--purple), var(--purple-3));
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 10px 18px rgba(122, 40, 255, .16);
    }

    .menu-btn {
      display: none;
      width: 40px;
      height: 40px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-soft);
      background: rgba(255, 255, 255, .03);
      color: #fff;
      cursor: pointer;
    }

    .mobile-menu {
      display: none;
      padding: 10px var(--page-x) 18px;
      border-top: 1px solid var(--border-soft);
      background: rgba(4, 2, 10, .98);
      flex-direction: column;
      gap: 8px;
    }

    .mobile-menu.open {
      display: flex
    }

    .mobile-menu a,
    .mobile-menu button {
      padding: 12px 14px;
      border-radius: var(--radius-md);
      background: rgba(255, 255, 255, .03);
      color: var(--text-2);
      border: none;
      text-align: left;
      cursor: pointer;
    }

    .mobile-menu a.active {
      background: linear-gradient(135deg, var(--purple), var(--purple-3));
      color: #fff;
    }

    /* hero */
    .hero {
      margin-top: calc(var(--header-h) * -1);
      /* ← 加这行：把 hero 往上拉，盖住导航栏区域 */
      padding-top: var(--header-h);
      /* ← 加这行：内容仍然从导航栏下方开始显示 */
      min-height: calc(100vh - 14px);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding-bottom: 28px;
      z-index: 1;
      /* 保持在后续滚动内容之下 */
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(200% 50% at 50% -20%, rgb(173 127 242 / 70%) 0%, rgb(137 61 252 / 23%) 50%, rgb(107 39 209 / 10%) 70%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(180deg, rgb(23 8 48 / 68%) 0%, rgba(10, 4, 20, .16) 36%, transparent 72%);
      /* hero渐变 */
      opacity: 0;
      /* ← hero背景紫色渐变透明度（0=完全隐藏，1=完全显示，可改成0.5等小数微调） */
      pointer-events: none;
    }

    .hero-stage {
      width: min(1600px, calc(100vw - var(--page-x) * 2));
      min-height: clamp(760px, 96vh, 980px);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* hero 文案严格居中，固定两行 */
    .hero-copy-back {
      position: absolute;
      left: 50%;
      top: 40%;
      /*  标题位置  */
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 1;
      pointer-events: none;
      will-change: transform;
      /* ← 加这行，性能优化 */
    }

    .hero-title-wrap {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .hero-copy-back .line {
      display: block;
      font-family: "Inter", "Arial", sans-serif;
      /*  标题字体  */
      font-size: clamp(20px, 8.4vw, 250px);
      /* ← 三个值分别是：最小值 / 首选值(视口宽度比例) / 最大值 */
      line-height: .84;
      /*  标题行距  */
      letter-spacing: -.085em;
      /* ← 字母间距：负数越小字母贴得越紧，改成 0 会变宽 */
      font-weight: 800;
      /* ← 标题粗细：300(细) / 400(正常) / 500(中) / 600(半粗) / 700(粗) / 800(原版特粗) */
      transform: scaleX(1.14);
      transform-origin: center;
      /* ← ★ 字体横向拉伸：1=不拉伸，1.08=拉宽8%，1.2=拉宽20%。高度完全不变 */
      text-transform: uppercase;
      color: #7d2dff;
      /*  标题颜色  */
      white-space: nowrap;
      /* 永远两行 */
      /* ★ 圆形渐变文字 */
      background: radial-gradient(circle at 50% 50%,
          /* ← 圆心位置：50% 50%=居中 */
          hsl(262 100% 59% / 1) 0%,
          /* ← 中心颜色和位置：亮紫 */
          hsl(262deg 100% 59% / 85%) 40%,
          /* ← 中间颜色和位置：深紫 */
          hsl(262deg 100% 59% / 70%) 100%
          /* ← 边缘颜色和位置：暗紫 */
        );
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* ★ Hero 三圆标记 */
    .hero-mark {
      display: flex;
      align-items: center;
      margin-top: 50px;
      /* ← 与大标题的间距 */
      gap: 0;
    }

    .mk-circle {
      width: 95px;
      /* ← ★ 圆圈大小 */
      height: 95px;
      border-radius: 50%;
      border: 5.5px solid rgb(101 37 206);
      /* ← ★ 圆圈粗细和颜色 */
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: -5px;
      /* ← ★ 重叠间距：负数=叠得更多，0=刚好相切 */
      position: relative;
    }

    .mk-circle:first-child {
      margin-left: 0;
    }

    .mk-circle span {
      font-family: "Noto Serif SC", serif;
      font-size: 60px;
      /* ← ★ 字号 */
      font-weight: 400;
      /* ← ★ 字重 */
      color: rgb(101 37 206);
      /* ← ★ 字色 */
      line-height: 1;
      transform: translateY(-4px) translateX(0px);
    }

    .hero-copy-back .sub {
      margin-top: 20px;
      /* ← 改这里调副标题与大标题之间的间距 */
      font-size: 22px;
      /* ← 副标题字号 */
      font-weight: 200;
      line-height: 1.1;
      color: rgb(125 45 255 / 80%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ★ 括号：一个地方改全部 */
    .bracket {
      font-family: monospace;
      font-size: clamp(10px, 4vw, 50px);
      /* ← 大小 */
      font-weight: 300;
      /* ← 粗细：100极细, 200当前, 400正常 */
      color: rgb(125 45 255 / 50%);
      /* ← 颜色，第4个数=透明度 */
      margin: 0 20px;
      /* ← 左右间距：第一个=上下, 第二个=左右 */
      line-height: 1;
      user-select: none;
      flex-shrink: 0;
      /* ← 加这行：不许被压缩 */
    }

    .bracket:first-child {
      margin-left: -350px;
    }

    /* ← 左括号外推距离 */
    .bracket:last-child {
      margin-right: -350px;
    }

    /* ← 右括号外推距离 */
    /* ★ 两侧文案：一个参数控制间距 */
    .sub-side {
      font-size: 12px;
      /* ← 字号 */
      font-weight: 700;
      /* ← 粗细 */
      letter-spacing: -0.05em;
      /* ← 字间距 */
      color: rgba(125, 45, 255, 0.5);
      /* ← 颜色 */
      margin: 0 -10px;
      /* ← ★ 与括号的间距：改第二个数字 */
      white-space: nowrap;
      flex-shrink: 0;
      /* ← 加这行：不许被压缩 */
    }

    .hero-meta {
      position: absolute;
      left: 0.7%;
      right: -0.2%;
      /* ← [8] 距离边缘的距离，数值越大越往中间收缩。调节这两个数值让它跟大标题对齐 */
      top: 44%;
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      font-weight: 400;
      letter-spacing: .18em;
      color: rgb(125 45 255);
      text-transform: uppercase;
      pointer-events: none;
      z-index: 1;
      will-change: transform;
    }

    /* gif 放大 40%，再上移 */
    .hero-gif {
      position: relative;
      z-index: 3;
      margin-top: -350px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      will-change: transform;
      /* ← 加这行，性能优化 */
    }

    .hero-gif img {
      width: min(20vw, 425px);
      /* GIF 正常宽度 */
      min-width: 100px;
      /* ← ★ 限制了最小宽度 */
      filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .48));
      transform-origin: 50% 4%;
      will-change: transform;
      cursor: default;
    }

    .hero-gif img.on-plate {
      cursor: grab
    }

    .hero-gif img.dragging {
      cursor: grabbing
    }

    .hero-actions {
      display: flex;
      justify-content: center;
      top: 140px;
      /*  按钮上下位置  */
      gap: 56px;
      flex-wrap: wrap;
      z-index: 4;
      position: relative;
    }

    .hero-copy-bottom {
      position: absolute;
      bottom: 100px;
      /* ← ★ 距离底部的位置：越大离底越远 */
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: rgb(125 45 255 / 40%);
      white-space: nowrap;
      text-align: center;
      word-spacing: 50px;
      /* ← ★ 单词间距：数字越大间距越大 */
    }

    .drag-hint {
      position: fixed;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%) translateY(8px);
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 12px;
      color: var(--text-3);
      background: rgba(18, 13, 28, .94);
      border: 1px solid rgba(255, 255, 255, .08);
      opacity: 0;
      pointer-events: none;
      transition: all .35s ease;
      z-index: 999;
    }

    .drag-hint.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* flowers */
    .flower-strip {
      margin-top: 50px;
      padding: 10px 0 calc(90px + var(--spacing-boost));
      /* ← 第一个数值跟上面的距离  第三个数值离下面的间隔 ，正数上移，负数下移 */
      text-align: center;
      transform: translateY(0px);
      /* ← 花的位置 往上移多少就填多少，负数上移，正数下移 */
      position: relative;
      z-index: 2;
      background: var(--bg);
    }

    .flower-row {
      display: inline-flex;
      align-items: center;
      gap: 18px;
      padding: 10px 18px;
    }

    .flower-row .quote {
      font-size: 30px;
      margin-top: -28px;
      color: rgba(255, 255, 255, .18);
    }

    .flower-icons {
      display: flex;
      gap: 36px;
      align-items: center;
    }

    /* 放大 50% */
    .flower-icons img {
      width: 110px;
      height: 110px;
      object-fit: contain;
      cursor: pointer;
      transition: filter 0.3s ease;
    }

    /* 波浪浮动挂在外层 span 上 */
    .flower-float {
      display: inline-block;
      animation: flowerWave 5.6s ease-in-out infinite;
      /* ← 3.6s 是速度，越大越慢 */
    }

    .flower-float:nth-child(2) {
      animation-delay: 1.2s
    }

    /*  花朵之间间隔更长 */
    .flower-float:nth-child(3) {
      animation-delay: 2.4s
    }

    @keyframes flowerWave {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-20px)
      }

      /* ← -10px 是幅度，数值越大浮动越高 */
    }

    /* 点击弹跳挂在 img 上，和波浪互不干扰 */
    @keyframes flowerBounce {
      0% {
        transform: scale(1)
      }

      30% {
        transform: scale(0.92)
      }

      60% {
        transform: scale(1.05)
      }

      100% {
        transform: scale(1)
      }
    }

    .flower-icons img.bouncing {
      animation: flowerBounce 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    }

    .flower-note {
      margin-top: 8px;
      font-size: 17px;
      color: rgba(255, 255, 255, .25);
      font-style: italic;
      letter-spacing: 0.12em;
    }

    /* home recent */
    .home-recent-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .home-recent-head h2 {
      font-size: 36px;
      font-weight: 700;
      letter-spacing: -.04em;
    }

    .view-all-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, .022);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    /* recent-grid moved below (near card rules for :has() access) */

    .recent-card {
      border-radius: 0;
      overflow: visible;
      background: transparent !important;
      border: none !important;
      cursor: pointer;
      transition: transform var(--recent-dur, 0.8s) var(--recent-ease, cubic-bezier(0.16, 1, 0.3, 1));
      min-width: 0;

      /* =======================================================
         ★ 近期作品悬停参数配置区
         ======================================================= */
      --recent-dur: 0.55s;
      /* 动画变化所花费的时间（值越大，交互越缓慢平滑） */
      --recent-delay: 0.0s;
      /* 悬停延迟启动时间（防止快速滑过误触。设为 0s 则完全无延迟） */
      --recent-ease: cubic-bezier(0.16, 1, 0.3, 1);
      --recent-media-stretch: 30px;
      /* 悬停时，图片容器向下往下拉伸拉长的距离 */
      --recent-body-move: 35px;
      /* 悬停时，下方文字单独向下移动的距离 */
      --recent-tag-move: -2px;
      /* 悬停时，第二行文字（Tag）额外向下移以增大行距的距离 */
      --recent-scale: 1.0;
      /* 悬停时图片的放大比例（原本是 1.1，即 110%；改成 1.05 放大较小，1.0 无放大） */
    }

    .recent-card:hover {
      transform: translateY(-4px);
      transition-delay: var(--recent-delay);
    }

    .recent-media-wrap {
      width: 100%;
      aspect-ratio: .86 / 1;
      position: relative;
      overflow: visible;
    }

    .recent-media {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #0d0916;
      border-radius: 0;
      overflow: hidden;
      transition: height var(--recent-dur) var(--recent-ease);
      z-index: 2;
    }

    .recent-card:hover .recent-media {
      height: calc(100% + var(--recent-media-stretch));
      transition-delay: var(--recent-delay);
    }

    .recent-media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--recent-dur) var(--recent-ease);
    }

    .recent-card:hover .recent-media img {
      transform: scale(var(--recent-scale));
      transition-delay: var(--recent-delay);
    }

    .recent-body {
      padding: 4px 0 0 0;
      transition: transform var(--recent-dur) var(--recent-ease);
      position: relative;
      z-index: 3;
    }

    .recent-card:hover .recent-body {
      transform: translateY(var(--recent-body-move));
      transition-delay: var(--recent-delay);
    }

    .recent-meta-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 4px;
    }

    .recent-title {
      font-size: 13px;
      font-weight: 400;
      line-height: 1.35;
    }

    .recent-year {
      font-size: 10px;
      color: var(--text-3);
    }

    .recent-tag {
      font-size: 10px;
      color: var(--text-3);
      transition: transform var(--recent-dur) var(--recent-ease);
    }

    .recent-card:hover .recent-tag {
      transform: translateY(var(--recent-tag-move));
      transition-delay: var(--recent-delay);
    }

    /* home sections aligned with same edges (近期作品和我能提供服务之间的间隔) */
    .home-block-gap {
      margin-top: calc(200px + var(--spacing-boost-small));
      position: relative;
      z-index: 2;
      background: var(--bg);
    }

    /* 近期作品和下面的间隔 */
    .showcase-rows+.home-block-gap {
      margin-top: calc(300px + var(--spacing-boost))
    }

    /* 大卡片和下面的间隔 */

    .cap-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 18px;
      align-items: start;
    }

    .cap-copy {
      padding: 4px 0;
      min-height: 160px;
    }

    /* 全局大标题样式统一 */
    [data-scroll-anim="title-3d-wave"] {
      font-family: "Inter", "Microsoft YaHei", sans-serif !important;
      font-weight: 500 !important;
      letter-spacing: -0.01em !important;
      /* 放宽字间距 */
    }

    .cap-copy h3 {
      font-size: clamp(2rem, 3.3vw, 3.2rem);
      line-height: 1.35;
      /* letter-spacing removed to use global */
      max-width: 560px;
      margin: 18px 0 28px;
    }

    .cap-copy::after {
      content: "";
      display: block;
      width: 80px;
      height: 4px;
      background: linear-gradient(90deg, var(--purple), var(--purple-3));
      margin-top: 45px;
      border-radius: 4px;
    }

    .cap-copy p {
      font-size: 16px;
      line-height: 1.8;
      color: var(--text-3);
      font-weight: 300;
      max-width: 600px;
    }

    .cap-list {
      display: flex;
      flex-direction: column;
      width: calc(100% - var(--cap-list-ml));
      margin-left: var(--cap-list-ml);
      height: var(--cap-list-h, 499px);
      /* 固定容器高度，从物理空间上彻底锁定，防止下方任何内容被推移或晃动 */
      border-top: 1px solid var(--border-soft);
      border-bottom: 1px solid var(--border-soft);

      /* =======================================================
         ★ 我能提供的服务：参数配置区
         ======================================================= */
      --cap-list-h: 499px;
      /* 列表总高度（如果下方还有微弱晃动，微调此值即可） */
      --cap-pad-normal: 32px;
      /* 默认状态下每一行的上下内边距 */
      --cap-pad-hover: 56px;
      /* 悬停行上下内边距（决定膨胀高度） */
      --cap-pad-other: 24px;
      /* 非悬停行上下内边距（当 normal=32px, hover=56px 时，24px 可完美配平：56 + 24*3 = 128 = 32*4） */

      --cap-list-ml: -120px;
      /* 线条及列表整体向左拉伸拉过来的距离 */
      --cap-item-pl: 50px;
      /* 线条内的文字（数字等）距离线条左端的缩进距离 */
      --cap-item-gap: 80px;
      /* 列元素之间的横向间距 */
    }

    .cap-item {
      display: flex;
      align-items: center;
      gap: var(--cap-item-gap);
      padding: var(--cap-pad-normal) 0 var(--cap-pad-normal) var(--cap-item-pl);
      border-bottom: 1px solid var(--border-soft);
      position: relative;
      transition: padding 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        gap 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* 联动呼吸：列表被悬停时，所有行压缩 */
    .cap-list:has(.cap-item:hover) .cap-item:not(:hover) {
      padding-top: var(--cap-pad-other);
      padding-bottom: var(--cap-pad-other);
    }

    /* 联动呼吸：悬停行膨胀 */
    .cap-item:hover {
      padding-top: var(--cap-pad-hover);
      padding-bottom: var(--cap-pad-hover);
    }

    .cap-item:last-child {
      border-bottom: none;
    }

    .cap-item-num {
      font-size: 14px;
      font-family: "Inter", monospace;
      color: var(--text-3);
      font-weight: 500;
      flex: 0 0 28px;
      text-align: center;
    }

    .cap-item-left {
      flex: 0 0 auto;
      min-width: 120px;
    }

    .cap-item-left h4 {
      font-size: 28px;
      font-family: "Inter", "Microsoft YaHei", sans-serif;
      font-weight: 500;
      line-height: 1.15;
      letter-spacing: -0.01em;
      margin-bottom: 0;
    }

    .cap-item-left .cap-pron {
      display: none;
    }

    .cap-item-right {
      flex: 1;
    }

    .cap-item-right p {
      font-size: 15px;
      color: var(--text-3);
      line-height: 1.8;
      margin: 0;
      font-weight: 300;
      max-width: 600px;
    }

    /* ===== 服务交互徽章 ===== */
    .cap-cursor-badge {
      position: fixed;
      left: 0;
      top: 0;
      margin-left: 20px;
      margin-top: 20px;
      color: var(--purple);
      font-size: 75px;
      pointer-events: none;
      z-index: 9999;
      opacity: 0;
      transition: opacity 0.15s ease;
      will-change: transform;
    }

    .cap-cursor-badge i {
      display: block;
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease;
      transform: scale(0.4);
    }

    .cap-cursor-badge.show {
      opacity: 1;
    }

    .cap-cursor-badge.show i {
      transform: scale(1);
    }

    /* 两行大图 + 背景文案 */
    .showcase-rows {
      margin-top: calc(240px + var(--spacing-boost));
      /* 大卡片上面的间隔 */
      display: grid;
      gap: calc(30px + var(--spacing-boost) * 0.5);
      /* 大卡片间距 */
    }

    /* ===== 大卡片文案动画（复用源文件同款） ===== */

    /* home profile */
    .profile-row {
      display: grid;
      gap: 24px;
      align-items: stretch;
    }

    .profile-row-1 {
      grid-template-columns: 1.15fr 1fr;
    }

    .profile-row-2 {
      grid-template-columns: 0.85fr 1.3fr;
      margin-top: 24px;
    }

    .profile-card,
    .profile-main {
      background: linear-gradient(180deg, rgba(255, 255, 255, .034), rgba(255, 255, 255, .020)) !important;
      border: none !important;
      /* No border as requested */
      box-shadow: var(--shadow);
      border-radius: 16px !important;
      /* Force premium rounded corner as in reference image */
    }

    .profile-main {
      position: relative;
      padding: 48px 40px;
      /* Generous padding for plenty of whitespace */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 270px;
      /* Lowered height as requested */
    }

    /* Remove the green corner badge in the new design */
    .profile-main::before {
      display: none;
    }

    .profile-main h3 {
      font-size: clamp(1.6rem, 2.7vw, 3.2rem);
      line-height: 1.15;
      letter-spacing: -.05em;
      margin-bottom: 20px;
      color: #fff;
    }

    .profile-main p {
      font-size: 14px;
      line-height: 1.6;
      /* Optimized line-height */
      color: var(--text-2);
      max-width: 530px;
      margin: 0;
    }

    .profile-features-card {
      padding: 48px 40px 48px 60px;
      /* Increased left padding (60px) to shift text rightwards */
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 40px 50px;
      /* Slightly decreased horizontal gap between columns */
      align-content: space-between;
    }

    .feature-item {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .feature-item h4 {
      font-size: 18px;
      /* Enlarged title size */
      font-weight: 800;
      color: #fff;
      margin-bottom: 10px;
      letter-spacing: -0.02em;
    }

    .feature-item p {
      font-size: 13px;
      line-height: 1.6;
      /* Optimized line-height */
      color: var(--text-3);
      margin: 0;
      max-width: 290px;
    }

    .profile-brand-block {
      position: relative;
      padding: 30px 10px 30px 40px;
      /* padding-left is 40px to align text exactly with text inside the card above */
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-height: 180px;
    }

    .profile-brand-block .brand-title {
      font-family: "Georgia", "Noto Serif SC", serif;
      /* Elegant serif stack to match Mahogany logo */
      font-size: clamp(2.4rem, 4vw, 3.6rem);
      font-weight: 700;
      line-height: 1.1;
      color: #fff;
      letter-spacing: -.02em;
      margin-bottom: 12px;
    }

    .profile-brand-block .brand-desc {
      font-size: 13px;
      line-height: 1.6;
      /* Optimized line-height */
      color: var(--text-3);
      margin: 0;
    }

    .profile-brand-block .brand-sub {
      position: absolute;
      right: 20px;
      /* Slightly shifted left so it aligns with the left boundary of the metrics card / right boundary of the card above */
      bottom: 30px;
      font-family: "Georgia", serif;
      /* Elegant italic serif font */
      font-style: italic;
      font-size: 14px;
      color: var(--text-4);
      opacity: 0.65;
      letter-spacing: 0.05em;
      text-transform: lowercase;
    }

    .profile-metrics-card {
      padding: 40px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      align-items: center;
      min-height: 160px;
      /* Slightly increased height as requested */
    }

    .metric-item {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .metric-item .metric-num {
      font-size: clamp(2.2rem, 3.5vw, 4rem);
      /* Premium large number font size */
      font-weight: 500;
      /* Clean medium weight, not chunky 900 */
      color: var(--green);
      line-height: 1;
      margin-bottom: 8px;
      font-family: "Inter", "Arial", sans-serif;
      /* Clean system sans-serif font */
    }

    .metric-item .metric-label {
      font-size: 11px;
      color: var(--text-3);
      margin-top: 0;
      line-height: 1.4;
    }

    @media (max-width: 1180px) {

      .profile-row-1,
      .profile-row-2 {
        grid-template-columns: 1fr;
      }

      .profile-row-2 {
        margin-top: 24px;
      }
    }

    @media (max-width: 768px) {
      .profile-features-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-left: 40px;
        /* Restore normal padding on mobile */
      }

      .profile-metrics-card {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .profile-brand-block {
        min-height: auto;
        padding-left: 10px;
        /* Reset on mobile for alignment */
      }

      .profile-brand-block .brand-sub {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 15px;
        text-align: right;
        display: block;
      }
    }

    /* ★ 标题：初始隐藏，无动画 */
    .show-text[data-mask-text] h3 {
      opacity: 0;
      will-change: opacity;
    }

    /* ★ 标题字符：初始状态 */
    .show-text[data-mask-text] h3 .anim-char {
      display: inline-block;
      opacity: 0;
      transform: translateY(var(--title-wave-translate, 40px)) rotateX(var(--title-wave-rotate, -90deg));
      transform-origin: 50% 100%;
      will-change: transform, opacity;
    }

    /* ★ 标题字符：触发后弹入 */
    .show-text.mask-text-ready h3 {
      opacity: 1;
    }

    .show-text.mask-text-ready h3 .anim-char {
      animation-name: titleCharWave;
      animation-duration: var(--title-wave-duration);
      animation-timing-function: var(--title-wave-easing);
      animation-fill-mode: forwards;
      animation-delay: calc(var(--char-i, 0) * var(--title-wave-tier1-delay));
    }

    /* ★ 小文字：初始隐藏，transition写在初始状态上（关键！） */
    .show-text[data-mask-text] p {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s,
        transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
    }

    /* ★ 小文字：触发后显示 */
    .show-text.mask-text-ready p {
      opacity: 1;
      transform: translateY(0);
    }

    /* JS动态覆盖clip-path，这里只是初始隐藏 */

    .show-row {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 24px;
      align-items: stretch;
      min-height: 48vh;
    }

    .show-row.reverse {
      grid-template-columns: .9fr 1.1fr;
    }

    .show-image {
      position: relative;
      min-height: 48vh;
      border-radius: var(--radius-2xl);
      overflow: hidden;
      border: 1px solid var(--border-soft);
      background: #0d0916;
      box-shadow: var(--shadow);
    }

    .show-image img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s ease;
    }

    .show-image:hover img {
      transform: scale(1.04)
    }

    .show-image::after {
      display: none;
    }

    .img-copy {
      position: relative;
      padding-top: 16px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
    }

    .img-copy h3 {
      font-size: clamp(1.35rem, 2vw, 2rem);
      line-height: 1.06;
      letter-spacing: -.04em;
      margin-bottom: 8px;
    }

    .img-copy p {
      font-size: 12px;
      color: rgba(255, 255, 255, .74);
      line-height: 1.8;
      text-align: right;
    }

    .show-text {
      min-height: 48vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 6px;
    }

    .show-row:not(.reverse) .show-text {
      padding-left: 60px;
      /*大卡片上面文案的*/
    }

    .show-row.reverse .show-text {
      padding-left: 20px;
      /*大卡片下面文案的*/
    }

    .show-text h3 {
      font-size: clamp(2rem, 3vw, 3rem);
      line-height: 1.25;
      letter-spacing: -.01em;
      max-width: 430px;
      margin-bottom: 24px;
    }

    .show-text p {
      font-size: 14px;
      line-height: 1.9;
      color: var(--text-2);
      max-width: 430px;
    }



    /* process section */
    .process-wrap {
      margin-top: calc(160px + var(--spacing-boost));
      /* 流程图跟上面的间隔 */
    }

    .process-head {
      text-align: left;
      margin-bottom: -10px;
      /* 标题和箭头的间隔 */
    }

    .process-head h2 {
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 800;
      letter-spacing: -.05em;
      line-height: 1.08;
      margin-bottom: 8px;
    }

    .process-head p {
      font-size: 14px;
      color: var(--text-3);
    }

    .process-arrow-track {
      margin-bottom: 24px;
      /* 箭头和卡片的间隔 */
      margin-left: 20px;
      /* 箭头的左右位置 */
    }

    .process-arrow-track svg {
      display: block;
      width: 60%;
      height: 28px;
    }

    .process-row {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 32px;
      position: relative;
    }

    .process-card {
      position: relative;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      text-align: left;
      padding: 0;
      min-height: auto;
      z-index: 1;
    }

    .process-card-inner {
      position: relative;
      width: 100%;
      min-height: 280px;
      padding: 24px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .022));
      border: 1px solid var(--border-soft);
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color var(--trans);
    }

    .process-card:hover .process-card-inner {
      border-color: var(--border-strong);
    }

    .process-card:not(:last-child) .process-card-inner::after {
      content: '';
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 9px solid rgba(122, 40, 255, .30);
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      z-index: 1;
      pointer-events: none;
    }

    .process-num {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 28px;
      font-weight: 900;
      color: rgba(255, 255, 255, .10);
      letter-spacing: -.04em;
      line-height: 1;
      font-family: "Arial", sans-serif;
      pointer-events: none;
    }

    .process-img {
      width: 82%;
      /* 流程图的大小 */
      aspect-ratio: 4/3;
      margin: 0;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateY(14px);
      transition: transform var(--trans);
    }

    .process-img img {
      width: 88%;
      height: 88%;
      object-fit: contain;
      opacity: 0.25;
    }

    .process-card:hover .process-img {
      transform: scale(1.1) translateY(10px);
    }

    .process-body {
      margin-top: 12px;
      padding: 0 0px;
    }

    .process-card h4 {
      font-size: 20px !important;
      font-weight: 500 !important;
      font-family: "Inter", "Microsoft YaHei", sans-serif !important;
      margin-bottom: 8px !important;
      color: var(--text);
    }

    .process-card p {
      font-size: 12px !important;
      font-weight: 300 !important;
      line-height: 0.8 !important;
      color: var(--text-3) !important;
    }

    /* ecommerce top */
    .ecom-top {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      gap: 16px;
      align-items: stretch;
    }

    /* 高度继续压低 */
    .ecom-carousel {
      min-height: 380px;
      border-radius: var(--radius-2xl);
      overflow: hidden;
      position: relative;
      border: 1px solid var(--border-soft);
      background: #0c0915;
      box-shadow: var(--shadow);
    }

    .ecom-track {
      display: flex;
      height: 100%;
      transition: transform .7s cubic-bezier(.22, 1, .36, 1);
    }

    .ecom-slide {
      min-width: 100%;
      position: relative;
      overflow: hidden;
    }

    .ecom-slide img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .ecom-slide::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .82));
    }

    .ecom-slide-copy {
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 18px;
      z-index: 2;
    }

    .ecom-slide-copy h3 {
      font-size: clamp(1.5rem, 2.4vw, 2.2rem);
      line-height: 1.06;
      letter-spacing: -.05em;
      margin: 10px 0 8px;
      max-width: 360px;
    }

    .ecom-slide-copy p {
      font-size: 12.5px;
      line-height: 1.78;
      color: rgba(255, 255, 255, .76);
      max-width: 380px;
    }

    .carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(0, 0, 0, .28);
      color: #fff;
      cursor: pointer;
      display: grid;
      place-items: center;
      z-index: 5;
    }

    .carousel-btn.prev {
      left: 14px
    }

    .carousel-btn.next {
      right: 14px
    }

    .carousel-dots {
      position: absolute;
      right: 16px;
      bottom: 14px;
      z-index: 5;
      display: flex;
      gap: 8px;
    }

    .carousel-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .34);
      cursor: pointer;
      transition: all var(--trans);
    }

    .carousel-dot.active {
      background: #d6b6ff;
      transform: scale(1.4);
    }

    .ecom-side {
      min-height: 380px;
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: 16px;
    }

    .ecom-module {
      padding: 10px;
      border-radius: var(--radius-2xl);
      background: linear-gradient(180deg, rgba(255, 255, 255, .030), rgba(255, 255, 255, .018));
      border: 1px solid var(--border-soft);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: minmax(180px, .82fr) minmax(0, 1fr);
      gap: 10px;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .ecom-feature {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: #0c0915;
      min-width: 0;
      min-height: 0;
    }

    .ecom-feature img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .detail-btn {
      position: absolute;
      left: 12px;
      bottom: 12px;
      z-index: 2;
      padding: 9px 14px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      background: linear-gradient(135deg, var(--purple), var(--purple-3));
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 10px 18px rgba(122, 40, 255, .18);
    }

    .thumb-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      min-width: 0;
      min-height: 0;
      align-content: stretch;
    }

    .thumb-card {
      aspect-ratio: 1 / 1;
      min-width: 0;
      min-height: 0;
      border-radius: var(--radius-md);
      overflow: hidden;
      background: #0c0915;
      border: 1px solid rgba(255, 255, 255, .06);
      cursor: pointer;
      transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
    }

    .thumb-card:hover {
      transform: translateY(-4px);
      border-color: var(--border-strong);
      box-shadow: 0 12px 24px rgba(0, 0, 0, .20);
    }

    .thumb-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    /* ===== 电商作品轮播 ===== */
    /* ★ 宽度说明：轮播图放在 .wrap 容器内，宽度由 .wrap 控制 */
    /* .wrap 宽度 = min(1720px, 视口宽 - 页边距*2) */
    /* 如需调整轮播图宽度，在 .wrap 的 --max 或 --page-x 变量里改 */
    .ecom-hero-carousel {
      width: 100%;
      aspect-ratio: 16 / 9;
      /* ← 改这里可以调整宽高比，比如改成 2/1 */
      overflow: hidden;
      position: relative;
      background: #0c0915;
      border-radius: var(--radius-2xl);
      border: 1px solid var(--border-soft);
      box-shadow: var(--shadow);
    }

    .ecom-hero-track {
      display: flex;
      height: 100%;
      transition: transform .7s cubic-bezier(.22, 1, .36, 1);
    }

    /* ★ 轮播图内图片位置：改 object-position 的两个值 */
    /* 第一个值=左右（50%居中），第二个值=上下（0%=顶部，100%=底部，50%=居中） */
    .ecom-hero-carousel .ecom-slide img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 30%;
      /* ← 改这里微调图片上下位置，数值越大越靠下 */
    }

    .ecom-hero-track {
      display: flex;
      height: 100%;
      transition: transform .7s cubic-bezier(.22, 1, .36, 1);
    }

    /* ===== 紫色衔接区域 ===== */
    /* ===== 紫色衔接区域 (新版) ===== */
    .ecom-purple-section.new-purple-bar {
      position: relative;
      background: linear-gradient(180deg, hsl(0deg 0% 3.14%) 0%, hsl(0deg 0% 3.14%) 100%);
      /* 温和的上下渐变紫 */
      border-radius: 0;
      /* 锐角 */
      margin: 0;
      /* 延伸到屏幕两边 */
      padding: 60px var(--page-x) 40px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .npb-content {
      position: relative;
      z-index: 1;
      text-align: left;
      color: #ffffff;
      /* 确保紫色背景上文字纯白 */
    }

    .has-js [data-scroll-anim="npb-slide"] {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .has-js [data-scroll-anim="npb-slide"].anim-in {
      opacity: 1;
      transform: translateY(0);
    }

    .npb-title {
      font-size: clamp(36px, 4.5vw, 64px);
      font-weight: 600;
      letter-spacing: -0.02em;
      margin-bottom: 24px;
      font-family: "Inter", "Microsoft YaHei", sans-serif;
    }

    /* 移除之前的 0.3s 延迟，加快标题入场速度 */
    .npb-title.anim-in .anim-char {
      animation-delay: calc(var(--char-i, 0) * var(--title-wave-tier2-delay)) !important;
    }

    .npb-desc {
      font-size: clamp(14px, 1.2vw, 16px);
      line-height: 1.6;
      opacity: 0.8;
      max-width: 600px;
      margin-bottom: 80px;
      font-weight: 500;
    }

    .npb-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.2);
      /* 浅色半透明线条 */
      margin-bottom: 24px;
      width: 100%;
    }

    /* 浅色模式专属覆盖：横条变浅紫，文案变深色 */
    body[data-theme="light"] .ecom-purple-section.new-purple-bar {
      background: linear-gradient(180deg, rgba(107, 33, 214, 0.12) 0%, rgba(107, 33, 214, 0.03) 100%);
    }

    body[data-theme="light"] .ecom-purple-section.new-purple-bar .npb-content,
    body[data-theme="light"] .ecom-purple-section.new-purple-bar .npb-title {
      color: var(--text) !important;
    }

    body[data-theme="light"] .ecom-purple-section.new-purple-bar .npb-divider {
      background: rgba(0, 0, 0, 0.15) !important;
    }

    .npb-bottom {
      display: flex;
      justify-content: space-between;
      font-size: clamp(13px, 1.1vw, 15px);
      font-weight: 600;
      font-family: "Inter", monospace;
      letter-spacing: 0.05em;
    }

    /* ===== 模块横排 (新版双卡相切布局) ===== */
    .ecom-modules-viewport {
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 12px 4px;
      /* 留出 hover-up 阴影和浮起高度 */
      margin: -12px -4px;
      /* 用负 margin 抵消，保持对齐 */
    }

    .ecom-modules-track.new-ecom-layout {
      display: flex !important;
      gap: 32px !important;
      transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
      width: max-content;
    }

    .new-ecom-layout .ecom-module {
      flex: 0 0 calc((100vw - var(--page-x) * 2 - 32px) / 2) !important;
      width: calc((100vw - var(--page-x) * 2 - 32px) / 2) !important;
      max-width: calc((var(--max) - 32px) / 2) !important;
    }

    @media screen and (max-width: 900px) {
      .ecom-modules-track.new-ecom-layout {
        gap: 24px !important;
      }

      .new-ecom-layout .ecom-module {
        flex: 0 0 calc(100vw - var(--page-x) * 2) !important;
        width: calc(100vw - var(--page-x) * 2) !important;
        max-width: 100% !important;
      }
    }

    /* 覆盖原本 ecom-module 的样式，使其成为一个透明的容器，去除边框和底色 */
    .new-ecom-layout .ecom-module {
      padding: 0;
      background: #1f1f1f;
      border: none;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      gap: 2px;
      /* 图像与底部紫卡的垂直间距改为 10px */
    }

    /* 上半部分：图像区域 */
    .project-images {
      display: grid;
      grid-template-columns: 4fr 5fr;
      gap: 6px;
      /* 左右两边图像的间距改为 10px */
      aspect-ratio: 27 / 20;
      /* 强制整个图像网格维持 27:20 的比例，使右侧 4-grid 的比例为完美的 3:4 */
      width: 100%;
    }

    .pi-main-wrap {
      border-radius: none;
      /*大图片圆角*/
      overflow: hidden;
      height: 100%;
    }

    .pi-main-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .pi-grid-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 6px;
      /* 四宫格内部改为 10px 间距 */
      height: 100%;
    }

    .pi-grid-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: none;
      /*小图片圆角*/
      /* 四个小图均有独立圆角 */
      cursor: default;
      display: block;
    }

    /* 下半部分：紫色缺角底栏 */
    .project-footer-notch {
      display: grid;
      grid-template-columns: 4fr 5fr;
      /* 宽度比例与上方图像严格一致 */
      gap: 0;
      /* 左右紫卡相贴合，形成中心缺角 */
    }

    .purple-left,
    .purple-right {
      height: 68px;
      /* 底栏高度微调为更精致的 48px */
      background: hsl(0 0% 12% / 1);
      border-radius: 20px;
      /* 所有角都有 20px 圆角，这是缺角形成的关键 */
    }

    .purple-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 24px;
    }

    .purple-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      /* 按钮在右侧卡片的右侧 */
      padding: 0 12px;
      /* 调整内边距适应按钮 */
    }

    .pfn-title {
      font-size: 18px;
      font-weight: 400;
      color: #ffffff;
      font-family: "Inter", "Microsoft YaHei", sans-serif;
      white-space: nowrap;
    }

    .pfn-btn {
      background: var(--bg);
      /* 深色按钮 */
      color: var(--text);
      /* 白字/浅色模式深字 */
      border: none;
      border-radius: 99px;
      padding: 10px 24px;
      font-size: 14px;
      font-weight: 600;
      cursor: none;
      transition: transform 0.2s ease, opacity 0.2s ease;
      flex-shrink: 0;
      /* 防止按钮被挤压变形 */
      white-space: nowrap;
    }

    .pfn-btn:hover {
      transform: scale(1.05);
    }

    /* ===== 环形画廊全屏区域 ===== */
    /* ★ 高度说明：填满去掉导航栏的可视区域，内容垂直居中 */
    .gallery-section-full {
      min-height: calc(100vh - var(--header-h));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: visible;
      padding-bottom: 60px;
    }

    /* ★ 标题字体：Arial 细体，如需更粗改 font-weight（100~900） */
    .gallery-section-full .gallery-title {
      font-family: "Arial", sans-serif;
      font-size: clamp(3.8rem, 7.2vw, 5.6rem);
      font-weight: 400;
      /* ← 改这里调粗细，300=细，400=正常，700=粗 */
      letter-spacing: -.04em;
      line-height: 1.08;
      text-align: center;
      margin-top: 0;
      margin-bottom: 3vh;
    }

    .gallery-title .line1,
    .gallery-title .line2 {
      display: block;
      white-space: nowrap;
    }

    /* gallery */
    .gallery-wrap {
      text-align: center;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: 16vh;
      padding-bottom: 5vh;
    }

    .gallery-title {
      font-size: clamp(1.95rem, 3vw, 2.8rem);
      font-weight: 800;
      letter-spacing: -.05em;
      margin-bottom: 14px;
    }

    .circular-gallery {
      position: relative;
      width: 100%;
      height: 550px;
      /* ★ 容器高度，根据卡片大小+曲线幅度调整，太小会裁剪 */
      overflow: visible;
      /* ★ 关闭裁剪，卡片不会被容器边界截断 */
      cursor: grab;
      user-select: none;
      touch-action: none;
    }

    .circular-gallery.dragging {
      cursor: grabbing
    }

    .cg-item {
      position: absolute;
      top: 0;
      left: 0;
      will-change: transform, opacity;
    }

    /* ★ width/height 由JS控制（CARD_W/CARD_H参数），不在CSS固定 */
    .cg-card {
      border-radius: 8px !important;
      overflow: hidden;
      box-shadow: 0 18px 34px rgba(0, 0, 0, .24);
      background: var(--bg);
      /* ★ 与页面背景一致，避免透明时穿插 */
    }

    .cg-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 透明度由JS逐帧控制，不使用CSS过渡，避免延迟 */
    }

    .cg-label {
      margin-top: 2vh;
      font-size: 17px;
      color: #c2e000;
      font-weight: 200;
      letter-spacing: 0.05em;
      padding-bottom: 2vh;
    }

    /* 画廊专属拖拽提示复用现有 .drag-hint 样式 */
    #galleryDragHint {
      z-index: 999;
    }

    /* grids */
    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-bottom: 30px;
    }

    .works-grid-5 {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 18px;
    }

    .work-card {
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255, 255, 255, .030), rgba(255, 255, 255, .018));
      border: 1px solid var(--border-soft);
      transition: all var(--trans);
      cursor: pointer;
      min-width: 0;
      box-shadow: var(--shadow);
    }

    .work-card:hover {
      transform: translateY(-5px);
      border-color: var(--border-strong);
      box-shadow: var(--shadow-lg);
    }

    .work-media {
      aspect-ratio: .86 / 1;
      background: #0c0915;
      overflow: hidden;
      position: relative;
    }

    .work-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s ease;
    }

    .work-card:hover .work-media img {
      transform: scale(1.05)
    }

    .work-media .tip {
      position: absolute;
      right: 10px;
      bottom: 10px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .55);
      font-size: 11px;
      font-weight: 700;
      border: 1px solid rgba(255, 255, 255, .12);
      opacity: 0;
      transition: opacity var(--trans);
    }

    .work-card:hover .tip {
      opacity: 1
    }

    .work-body {
      padding: 14px;
      position: relative;
      min-height: 126px;
    }

    .work-title {
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
      margin-bottom: 6px;
      padding-right: 46px;
    }

    .work-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 8px;
    }

    .work-tags span {
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      color: #d4b1ff;
      background: rgba(122, 40, 255, .08);
      border: 1px solid rgba(122, 40, 255, .12);
    }

    .work-desc {
      font-size: 12px;
      line-height: 1.72;
      color: var(--text-3);
      padding-right: 46px;
    }

    .work-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 10px;
      font-size: 11px;
      color: var(--text-3);
      padding-right: 46px;
    }

    /* 右下角编号替换 logo */
    .work-index {
      position: absolute;
      right: 14px;
      bottom: 14px;
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -.04em;
      color: rgba(255, 255, 255, .16);
      line-height: 1;
      pointer-events: none;
    }

    /* methodology cards larger */
    .method-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .method-card {
      min-height: 210px;
      padding: 32px 22px 26px;
      border-radius: var(--radius-xl);
      background: linear-gradient(180deg, rgba(255, 255, 255, .030), rgba(255, 255, 255, .018));
      border: 1px solid var(--border-soft);
      box-shadow: var(--shadow);
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .method-card i {
      font-size: 30px;
      color: #c58dff;
      margin-bottom: 14px;
    }

    .method-card h4 {
      font-size: 15px;
      margin-bottom: 8px;
      font-weight: 800;
    }

    .method-card p {
      font-size: 12px;
      line-height: 1.82;
      color: var(--text-3);
      max-width: 320px;
      margin: 0 auto;
    }

    /* ========================================
       加载页面样式
       ======================================== */
    :root {
      --lp-grad-start: #30114f;
      --lp-grad-end: #210b37;
      --lp-accent-blue: #4A6EFF;
      --lp-accent-pink: #FF2A7A;
      --lp-text: #F0F0F5;
      --lp-text-muted: rgba(255, 255, 255, 0.22);
      --lp-font-display: 'Syne', sans-serif;
      --lp-font-body: 'Outfit', sans-serif;
      --lp-font-mono: 'DM Mono', monospace;
    }

    #loading-page {
      position: fixed;
      inset: 0;
      z-index: 9990;
      overflow: hidden;
    }

    .lp-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(180deg, var(--lp-grad-start) 0%, var(--lp-grad-end) 100%);
    }

    .lp-content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.6rem;
    }

    .lp-name-row {
      display: flex;
      align-items: center;
      gap: clamp(0.5rem, 1.8vw, 1.2rem);
    }

    .lp-ip-wrap {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
    }

    #lp-ip {
      height: 100%;
      width: 100%;
      object-fit: contain;
      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.04));
      will-change: transform;
    }

    #lp-name {
      font-family: var(--lp-font-display);
      font-weight: 800;
      letter-spacing: 0.06em;
      line-height: 1;
      display: flex;
      white-space: nowrap;
    }

    .lp-letter-wrap {
      overflow: hidden;
      line-height: 1;
    }

    .lp-letter {
      display: inline-block;
      will-change: transform;
    }

    .lp-auth-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
    }

    #lp-feedback {
      font-family: var(--lp-font-mono);
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.15em;
      min-height: 1.3em;
      text-align: center;
    }

    #lp-feedback.correct {
      color: var(--lp-accent-blue);
    }

    #lp-feedback.wrong {
      color: var(--lp-accent-pink);
    }

    .lp-input-row {
      display: flex;
      gap: 0.4rem;
    }

    .lp-input {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 4px;
      padding: 0.5rem 0.8rem;
      font-family: var(--lp-font-mono);
      font-size: 0.7rem;
      font-weight: 300;
      letter-spacing: 0.12em;
      color: var(--lp-text);
      outline: none;
      width: 170px;
      transition: border-color 0.3s;
    }

    .lp-input:focus {
      border-color: rgba(74, 110, 255, 0.35);
    }

    .lp-input::placeholder {
      color: var(--lp-text-muted);
    }

    .lp-confirm {
      background: rgba(74, 110, 255, 0.08);
      border: 1px solid rgba(74, 110, 255, 0.18);
      border-radius: 4px;
      padding: 0.5rem 1rem;
      font-family: var(--lp-font-mono);
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      color: var(--lp-accent-blue);
      cursor: pointer;
      transition: all 0.25s;
      white-space: nowrap;
    }

    .lp-confirm:hover {
      background: rgba(74, 110, 255, 0.16);
      border-color: rgba(74, 110, 255, 0.35);
    }

    .lp-hint {
      font-family: var(--lp-font-body);
      font-size: 0.75rem;
      font-weight: 200;
      color: var(--lp-text-muted);
      letter-spacing: 0.05em;
      text-align: center;
      max-width: 280px;
      line-height: 1.7;
    }

    .split-half {
      position: absolute;
      inset: 0;
      z-index: 10;
      will-change: transform;
      pointer-events: none;
    }

    .split-ip {
      position: absolute;
      object-fit: contain;
      pointer-events: none;
    }

    @media (max-width: 640px) {
      .lp-name-row {
        flex-direction: column;
        gap: 0.4rem;
      }
    }

    /* personal */
    .personal-intro {
      min-height: 280px;
      padding: 34px 30px;
      border-radius: var(--radius-2xl);
      background: linear-gradient(180deg, rgba(255, 255, 255, .030), rgba(255, 255, 255, .018));
      border: 1px solid var(--border-soft);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 18px;
      align-items: start;
    }

    .personal-intro p {
      font-size: 14px;
      line-height: 1.85;
      color: var(--text-2);
      max-width: 720px;
    }

    .meta-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .meta-card {
      min-height: 96px;
      padding: 18px;
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .024);
      border: 1px solid rgba(255, 255, 255, .06);
    }

    .meta-card h4 {
      font-size: 14px;
      margin-bottom: 6px;
      font-weight: 800;
    }

    .meta-card p {
      font-size: 12px;
      line-height: 1.75;
      color: var(--text-3);
    }

    /* 轮播和信息区继续减高 */
    .feature-layout {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 18px;
      align-items: stretch;
      margin-top: 34px;
    }

    .feature-visual {
      height: 850px;
      border-radius: var(--radius-2xl);
      overflow: hidden;
      position: relative;
      border: 1px solid var(--border-soft);
      background: #0c0915;
      box-shadow: var(--shadow);
    }

    .pf-track {
      display: flex;
      position: absolute;
      inset: 0;
      transition: transform .7s cubic-bezier(.22, 1, .36, 1);
    }

    .pf-slide {
      min-width: 100%;
      height: 100%
    }

    .pf-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .feature-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(122, 40, 255, .06), transparent 42%, rgba(0, 0, 0, .82));
      pointer-events: none;
    }

    .feature-copy {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 20px;
      z-index: 2;
    }

    .feature-copy h3 {
      font-size: clamp(1.4rem, 2.2vw, 1.9rem);
      letter-spacing: -.04em;
      margin-bottom: 6px;
    }

    .feature-copy p {
      font-size: 13px;
      color: rgba(255, 255, 255, .76);
      line-height: 1.7;
    }

    .pf-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(0, 0, 0, .3);
      color: #fff;
      cursor: pointer;
      z-index: 4;
    }

    .pf-prev {
      left: 14px
    }

    .pf-next {
      right: 14px
    }

    .pf-dots {
      position: absolute;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 4;
    }

    .pf-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .34);
      cursor: pointer;
      transition: all var(--trans);
    }

    .pf-dot.active {
      background: #d6b4ff;
      transform: scale(1.25);
    }

    .feature-info {
      min-height: auto;
      padding: 24px;
      border-radius: var(--radius-2xl);
      background: linear-gradient(180deg, rgba(255, 255, 255, .030), rgba(255, 255, 255, .018));
      border: 1px solid var(--border-soft);
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .mini-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 14px;
    }

    .mini-tags span {
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      color: #d4b1ff;
      background: rgba(122, 40, 255, .08);
      border: 1px solid rgba(122, 40, 255, .12);
    }

    .feature-info h4 {
      font-size: 1.34rem;
      letter-spacing: -.03em;
      margin-bottom: 10px;
    }

    .feature-info p {
      font-size: 13px;
      line-height: 1.85;
      color: var(--text-2);
    }

    .point-list {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .point {
      display: flex;
      gap: 10px;
      font-size: 13px;
      line-height: 1.76;
      color: var(--text-2);
    }

    .point i {
      color: #c58dff;
      margin-top: 3px;
    }

    /* 这四个卡片再加大 */
    .mini-four {
      margin-top: 28px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .card-mini {
      min-height: 190px;
      padding: 22px 18px;
      border-radius: var(--radius-xl);
      background: linear-gradient(180deg, rgba(255, 255, 255, .030), rgba(255, 255, 255, .018));
      border: 1px solid var(--border-soft);
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .card-mini h4 {
      font-size: 14px;
      margin-bottom: 6px;
      font-weight: 800;
    }

    .card-mini p {
      font-size: 12px;
      line-height: 1.76;
      color: var(--text-3);
    }

    /* about */
    .about-top {
      display: grid;
      grid-template-columns: 400px 1fr;
      /*肖像画在左(400px)，内容在右(1fr)*/
      gap: 100px;
      /* 增加中间间距让排版更舒展 */
      align-items: start;
      padding-left: 60px;
      /* 肖像画往右缩 */
      padding-right: 60px;
      /* 文案整体往左收缩 */
    }

    .about-left-col {
      padding-left: 0;
      /* 移除左内边距，实现视觉上的完美左对齐 */
    }

    .about-copy .role {
      font-size: 18px;
      color: #c68dff;
      font-weight: 800;
      margin: 14px 0 20px;
    }

    .about-copy p {
      font-size: 15px;
      line-height: 1.95;
      color: var(--text-2);
      margin-bottom: 14px;
      max-width: 1050px;
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 22px 0 26px;
    }

    .pill-row span {
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      color: var(--text-2);
      background: rgba(255, 255, 255, .024);
      border: 1px solid rgba(255, 255, 255, .08);
    }

    body[data-theme="light"] .pill-row span {
      background: rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .about-stats {
      display: flex;
      gap: 34px;
      flex-wrap: wrap;
    }

    .about-stats .num {
      font-size: clamp(2rem, 3vw, 3rem);
      font-weight: 900;
      color: #c58dff;
      line-height: 1;
    }

    .about-stats .label {
      font-size: 11px;
      color: var(--text-3);
      margin-top: 6px;
    }

    .about-right-col {
      height: 100%;
      /* 占据完整高度，保证sticky有滚动空间 */
    }

    .sticky-portrait {
      position: sticky;
      top: 120px;
      /* 悬浮距离顶部 */
      width: 100%;
      max-width: 400px;
      /* 移除 transform偏移，让它自然贴合网格对齐 */
    }

    .portrait-wrap {
      position: relative;
      width: 100%;
    }

    .portrait-wrap img {
      width: 100%;
      display: block;
      cursor: pointer;
      background: transparent;
    }

    @keyframes photoBounce {
      0% {
        transform: scale(1)
      }

      30% {
        transform: scale(0.94)
      }

      60% {
        transform: scale(1.02)
      }

      100% {
        transform: scale(1)
      }
    }

    #aboutPhoto.bounce {
      animation: photoBounce .5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
    }

    .radar-section {
      text-align: left;
    }

    .radar-title {
      font-size: clamp(1.7rem, 2.5vw, 2.3rem);
      font-weight: 800;
      letter-spacing: -.04em;
      margin-bottom: 24px;
    }

    .radar-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    .radar-card {
      position: relative;
      padding: 18px 12px 16px;
    }

    .radar-card:not(:last-child)::after {
      content: "";
      position: absolute;
      right: -9px;
      top: 18%;
      width: 1px;
      height: 64%;
      background: rgba(255, 255, 255, .12);
    }

    .radar-card h4 {
      font-size: 18px;
      color: #c58dff;
      margin-bottom: 6px;
    }

    .radar-canvas {
      display: block;
      margin: 0 auto;
      max-width: 220px;
      width: 100%;
      height: auto;
    }

    .value-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .value-card {
      min-height: 156px;
      padding: 24px 20px;
      border-radius: var(--radius-xl);
      background: linear-gradient(180deg, rgba(255, 255, 255, .030), rgba(255, 255, 255, .018));
      border: 1px solid var(--border-soft);
      box-shadow: var(--shadow);
    }

    .value-card h4 {
      font-size: 15px;
      margin-bottom: 8px;
      font-weight: 800;
    }

    .value-card p {
      font-size: 13px;
      line-height: 1.82;
      color: var(--text-2);
    }

    .skill-wrap {
      width: 100%;
      text-align: left;
    }

    .skill-title {
      font-size: clamp(1.7rem, 2.3vw, 2.2rem);
      font-weight: 800;
      letter-spacing: -.04em;
      margin-bottom: 24px;
    }

    .skill-list {
      display: grid;
      gap: 16px;
    }

    .skill-item {
      display: grid;
      grid-template-columns: 120px 1fr;
      align-items: center;
      gap: 14px;
    }

    .skill-item label {
      text-align: right;
      font-size: 13px;
      color: var(--text-2);
    }

    .skill-track {
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      overflow: hidden;
    }

    .skill-fill {
      width: 0;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--purple-2), #b76dff);
      transition: width 1.8s cubic-bezier(.22, 1, .36, 1);
    }

    /* =======================================================
       ★ 常规版页尾设计 (Standard Footer Layout)
       ★ 【修改提示：页尾紫色背景色】
       在这里修改 background-color 即可改变页尾底色（也可修改 :root 里的 --purple 变量）。
       ======================================================= */
    .site-footer {
      position: relative;
      width: 100%;
      height: calc(100vh - var(--header-h));
      background-color: #620ee2;
      margin-top: 0;
      border-top: none;
      z-index: 3;
      overflow: visible;
    }

    /* 内部文案排版层 */
    .new-footer-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* 上下分布 */
      box-sizing: border-box;
      /* 将有项目想合作和按钮等一起往下移动减小的高度的距离 */
      padding-top: var(--header-h);
      padding-bottom: 50px;
      z-index: 2;
      overflow: hidden;
      /* 截断溢出内容，彻底防止内部元素撑长页面 */
    }

    /* 背景大图承载层 */
    .new-footer-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: transparent;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
      /* 保证内部 logo 不会撑长页面 */
    }

    /* 背景大图标定位与微调参数 */
    .new-footer-bg-logo {
      position: absolute;
      top: 50%;
      /* 相对于底部中心定位，使其在视觉上一屏内始终居中 */
      left: 50%;
      width: 1170px;
      /* 图标的宽度，修改此数值可改变图标大小 */
      height: 1170px;
      /* 图标的高度，修改此数值可改变图标大小 */
      background-image: url('images/footer/1.png');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;

      /* ========================================================
         ★ 图标透明度微调：0.03 代表 3% 的透明度。
         若要调亮，可改为 0.05 (5%) 或 0.08 (8%) 等。
         ======================================================== */
      opacity: 0.09;

      pointer-events: none;
      z-index: 1;

      /* ========================================================
         ★ 图标大小与位置微调：
         - translate(-50%, 50%): 维持水平/垂直绝对居中 (不要修改这个)
         - scale(1.8): 放大1.8倍
         - translateY(27%): 沿Y轴向下移动约半个图标大小的距离 (可修改百分比或px进行上下移动)
         ======================================================== */
      transform: translate(-50%, 50%) scale(1.8) translateY(27%);
      transform-origin: center center;
    }

    /* 顶部主视觉区 */
    .new-footer-main {
      position: relative;
      z-index: 2;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 6vh;
    }

    /* 粘稠文字容器 */
    .new-footer-gooey-container {
      /* 应用 SVG 阈值滤镜和细微高斯模糊，与 JS 驱动的 blur 结合形成水滴粘合动画 */
      filter: url(#footer-goo-threshold) blur(0.6px);
      position: relative;
      width: 100%;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 80px;
      /* 调整为 80px，将“立即联系我”按钮下推至指定位置 */
    }

    /* 粘稠文本元素 (不含 CSS transition, 完全由 JS raf 逐帧更新 filter/opacity, 防止动效冲突卡顿) */
    .new-footer-gooey-text-1,
    .new-footer-gooey-text-2 {
      position: absolute;
      font-size: clamp(2.4rem, 6vw, 6.2rem);
      font-weight: 900;
      color: #050406;
      /* 极深黑色文字，与紫色底色形成 premium 对比 */
      letter-spacing: -0.05em;
      white-space: nowrap;
      text-align: center;
      display: inline-block;
      user-select: none;
      transform: translate3d(0, 0, 0);
      /* 开启硬件加速 */
    }

    /* 立即联系我按钮 */
    .new-footer-btn-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      z-index: 5;
    }

    .new-footer-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 16px 36px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      background: var(--green);
      /* 亮黄绿色 */
      color: #050406;
      font-size: 16px;
      font-weight: 800;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, background 0.3s ease;
    }

    .new-footer-btn:hover {
      transform: scale(1.06) translateY(-2px);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
    }

    .new-footer-btn .arrow-icon {
      width: 18px;
      height: 18px;
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .new-footer-btn:hover .arrow-icon {
      transform: translate(3px, -3px);
    }

    /* 分割线 */
    .new-footer-divider {
      position: relative;
      z-index: 2;
      width: min(var(--max), calc(100vw - var(--page-x) * 2));
      margin: 0 auto;

      /* ========================================================
         ★ 【修改提示：横向分割线条参数微调】
         - height: 控制分割线的粗细。
         - background-color: rgba(5, 4, 6, 0.4) 控制颜色和透明度（数字越大颜色越深越明显）。
         ======================================================== */
      height: 1px;
      background-color: rgba(5, 4, 6, 1);

      margin-bottom: 5vh;
      transform-origin: left center;
    }

    /* 分割线展开动画 */
    .footer-anim-divider {
      transform: scaleX(0);
      transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
    }

    .has-js .footer-anim-divider.anim-in {
      opacity: 1;
      transform: scaleX(1);
    }

    /* 底部排版网格 */
    .new-footer-grid {
      position: relative;
      z-index: 2;
      width: min(var(--max), calc(100vw - var(--page-x) * 2));
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.2fr 1.2fr auto 3.2fr 1.2fr;
      align-items: flex-start;
      gap: 40px;
      padding-bottom: 5vh;
      box-sizing: border-box;
    }

    /* ========================================================
       ★ 页尾统一入场动画 (Entrance Animations)
       ======================================================== */
    .footer-anim-el {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
      /* 黏糊文字自带内联 transition-delay 0s, 按钮 0.05s, 分割线 0.1s */
    }

    .has-js .footer-anim-el.anim-in {
      opacity: 1;
      transform: translateY(0);
    }

    /* 网格列从左往右的平移淡入动画 */
    .footer-grid-item {
      opacity: 0;
      transform: translateX(-30px);
      transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .has-js .footer-grid-item.anim-in {
      opacity: 1;
      transform: translateX(0);
    }

    /* 单独给网格内的元素设置极短间隔的依次入场 (0.15s 起步) */
    .footer-grid-item.anim-in:nth-child(1) {
      transition-delay: 0.15s;
    }

    .footer-grid-item.anim-in:nth-child(2) {
      transition-delay: 0.2s;
    }

    .footer-grid-item.anim-in:nth-child(3) {
      transition-delay: 0.25s;
    }

    .footer-grid-item.anim-in:nth-child(4) {
      transition-delay: 0.3s;
    }

    .footer-grid-item.anim-in:nth-child(5) {
      transition-delay: 0.35s;
    }

    .new-footer-col {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .new-footer-col .col-title {
      font-size: 18px;
      font-weight: 500;
      color: rgba(5, 4, 6, 0.8);
      text-transform: uppercase;
      letter-spacing: 0.15em;
    }

    .new-footer-col .col-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* 服务和类目下可悬停互动项 */
    .new-footer-col .col-list li,
    .new-footer-col .col-list li a {
      font-size: 16px;
      font-weight: 500;
      color: rgba(5, 4, 6, 0.7);
      text-decoration: none;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
      cursor: pointer;
      display: inline-block;
      transform-origin: left center;
    }

    .new-footer-col .col-list li:hover,
    .new-footer-col .col-list li:hover a {
      color: #000000;
      transform: scale(1.08) translateX(10px);
    }

    /* 竖向分隔线 */
    .new-footer-vertical-line {
      /* ========================================================
         ★ 【修改提示：竖向分割线条参数及位置微调】
         - background-color: 控制颜色和透明度（当前0.24可调高让线条更深）。
         - 若想改位置，可在这里加 margin-left: 20px 等属性。
         ======================================================== */
      width: 1px;
      height: 160px;
      background-color: rgba(5, 4, 6, 1);
      margin-left: -80px;
      align-self: center;
    }

    /* text-col (Remarkable 区域) */
    .new-footer-col.text-col {
      padding-left: 20px;
      max-width: 600px;
    }

    .new-footer-col .remarkable-title {
      font-size: clamp(1.8rem, 3.2vw, 3.4rem);
      font-weight: 800;
      color: #050406;
      line-height: 1.08;
      letter-spacing: -0.04em;
    }

    .new-footer-col .remarkable-desc {
      font-size: 15px;
      line-height: 1.8;
      color: rgba(5, 4, 6, 0.76);
      font-weight: 400;
    }

    /* 页面链接 */
    .new-footer-col.pages-col .col-list li a {
      color: rgba(5, 4, 6, 0.85);
    }

    .new-footer-col.pages-col .col-list li:hover a {
      color: #000000;
    }

    /* 版权声明黑栏 */
    .new-footer-copyright {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: #050406;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.35);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.05em;
      z-index: 3;
    }

    /* 导航栏抵达页尾透明 */
    .header.scrolled.footer-in-view {
      background: rgba(4, 2, 10, 0) !important;
      border-bottom-color: rgba(255, 255, 255, 0) !important;
      box-shadow: none !important;
      backdrop-filter: blur(0px) !important;
      -webkit-backdrop-filter: blur(0px) !important;
    }

    /* 响应式调整 */
    @media (max-width: 1024px) {
      .new-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding-bottom: 4vh;
      }

      .new-footer-vertical-line {
        display: none;
      }

      .new-footer-col.text-col {
        grid-column: span 2;
        padding-left: 0;
      }

      .site-footer {
        height: auto;
        min-height: 100vh;
      }

      .new-footer-wrapper {
        position: relative;
        height: auto;
        padding-top: 80px;
        padding-bottom: 50px;
      }

      .new-footer-main {
        padding: 40px 0;
      }
    }

    @media (max-width: 640px) {
      .new-footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .new-footer-col.text-col {
        grid-column: span 1;
      }

      .new-footer-gooey-container {
        height: 100px;
      }

      .new-footer-gooey-text-1,
      .new-footer-gooey-text-2 {
        font-size: 2.0rem;
      }
    }

    /* overlays */
    .overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0, 0, 0, 0.66);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .overlay.open {
      opacity: 1;
      pointer-events: auto;
    }


    .close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 38px;
      height: 38px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #fff;
      cursor: pointer;
      display: grid;
      place-items: center;
      z-index: 2;
      transition: background 0.25s ease;
    }

    .close-btn:hover {
      background: rgba(255, 255, 255, 0.14);
    }

    .contact-modal {
      max-width: 420px;
      width: 100%;
      padding: 36px 28px 28px;
      border-radius: 28px;
      background: rgba(20, 20, 26, 0.92);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
      position: relative;
      text-align: center;
    }

    .contact-avatar {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      margin: 0 auto 16px;
      background: linear-gradient(135deg, var(--purple), var(--purple-2));
      display: grid;
      place-items: center;
      font-family: "Syne", sans-serif;
      font-size: 24px;
      font-weight: 800;
      box-shadow: 0 12px 22px rgba(122, 40, 255, .20);
    }

    .contact-modal h3 {
      text-align: center;
      font-size: 1.45rem;
      margin-bottom: 6px;
    }

    .contact-sub {
      text-align: center;
      color: var(--text-3);
      font-size: 13px;
      margin-bottom: 24px;
    }

    .contact-list {
      display: grid;
      gap: 10px
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .contact-item:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(123, 47, 247, 0.4);
      transform: translateX(4px);
    }

    .contact-item:active {
      transform: scale(0.97);
      transition-duration: 0.08s;
    }

    .contact-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: rgba(123, 47, 247, 0.15);
      display: grid;
      place-items: center;
      color: #c084fc;
      flex-shrink: 0;
    }

    .contact-item .label {
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text-3);
    }

    .contact-item .value {
      font-size: 14px;
      font-weight: 600;
      margin-top: 3px;
    }

    .copy-hint {
      margin-left: auto;
      font-size: 12px;
      color: var(--text-3);
    }

    .preview-wrap {
      position: relative;
      max-width: 92vw;
      max-height: 88vh;
    }

    /* ============ TITLE ANIMATION PARAMS ============ */
    :root {
      --hero-wave-duration: 1.0s;
    }

    @keyframes heroLineAnim {
      0% {
        opacity: 0;
        transform: translateY(80px) rotateX(-20deg);
      }

      100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
      }
    }

    .has-js [data-scroll-anim="hero-wave"] {
      opacity: 0;
      will-change: transform, opacity;
    }

    .has-js [data-scroll-anim="hero-wave"].anim-in {
      animation: heroLineAnim var(--hero-wave-duration) cubic-bezier(.16, 1, .3, 1) both;
      animation-delay: var(--line-delay, 0s);
    }

    .has-js [data-scroll-anim="hero-wave"].anim-done {
      opacity: 1;
      transform: translateY(0) rotateX(0);
    }

    .preview-image {
      max-width: 92vw;
      max-height: 88vh;
      object-fit: contain;
      border-radius: var(--radius-sm);
    }

    .preview-watermark {
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: var(--radius-sm);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Ctext x='90' y='95' text-anchor='middle' fill='rgba(255,255,255,0.22)' font-size='14' transform='rotate(-28 90 90)' font-family='Arial'%3EMahogany Design%3C/text%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 140px 140px;
    }

    .project-modal {
      width: min(900px, 100%);
      max-height: 88vh;
      overflow: auto;
      border-radius: var(--radius-2xl);
      background: rgba(18, 18, 28, .98);
      border: 1px solid rgba(255, 255, 255, .08);
      box-shadow: 0 30px 70px rgba(0, 0, 0, .40);
      padding: 28px;
      position: relative;
    }

    .project-top {
      padding-right: 46px;
      margin-bottom: 18px;
    }

    .project-top h3 {
      font-size: clamp(1.6rem, 2.5vw, 2.2rem);
      letter-spacing: -.04em;
      margin-top: 10px;
    }

    .project-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .project-tags span {
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      background: rgba(122, 40, 255, .08);
      color: #d4b1ff;
      border: 1px solid rgba(122, 40, 255, .12);
    }

    .project-cover {
      height: 240px;
      border-radius: var(--radius-xl);
      overflow: hidden;
      margin-bottom: 18px;
      background: linear-gradient(135deg, #1e1830, #1c2752, #152633);
      border: 1px solid rgba(255, 255, 255, .08);
      position: relative;
    }

    .project-cover::before {
      content: "Project Preview";
      position: absolute;
      left: 22px;
      bottom: 18px;
      color: rgba(255, 255, 255, .85);
      font-size: 18px;
      font-weight: 700;
    }

    .project-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .project-block {
      padding: 18px;
      border-radius: var(--radius-xl);
      background: rgba(255, 255, 255, .026);
      border: 1px solid rgba(255, 255, 255, .08);
    }

    .project-block h4 {
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .58);
      margin-bottom: 10px;
    }

    .project-block p,
    .project-block li {
      font-size: 14px;
      color: rgba(255, 255, 255, .76);
      line-height: 1.8;
    }

    .project-block ul {
      padding-left: 18px;
      display: grid;
      gap: 6px;
    }

    .full-span {
      grid-column: 1 / -1
    }

    /* ===== 滚动触发动效系统 ===== */
    .has-js [data-scroll-anim] {
      opacity: 0;
    }

    .anim-char {
      display: inline-block;
      opacity: 0;
      transform: translateY(var(--title-wave-translate, 40px)) rotateX(var(--title-wave-rotate, -90deg));
      transform-origin: 50% 100%;
      will-change: transform, opacity;
    }

    .has-js [data-scroll-anim="title-3d-wave"].anim-in,
    .has-js [data-scroll-anim="title-3d-wave"].anim-done {
      opacity: 1;
    }

    [data-scroll-anim="title-3d-wave"].anim-in .anim-char {
      animation-name: titleCharWave;
      animation-duration: var(--title-wave-duration);
      animation-timing-function: var(--title-wave-easing);
      animation-fill-mode: forwards;
      animation-delay: calc(var(--char-i, 0) * var(--title-wave-tier2-delay));
    }

    [data-scroll-anim="title-3d-wave"][data-tier="1"].anim-in .anim-char {
      animation-delay: calc(var(--char-i, 0) * var(--title-wave-tier1-delay));
    }

    [data-scroll-anim="title-3d-wave"][data-tier="3"].anim-in .anim-char {
      animation-delay: calc(var(--char-i, 0) * var(--title-wave-tier3-delay));
    }

    @keyframes titleCharWave {
      to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
      }
    }

    /* ============ ★ 首页大标题单独入场参数 ★ ============ */
    :root {
      --hero-wave-duration: 1.2s;
      /* 字母入场动画的时长 */
      --hero-char-stagger: 10.02s;
      /* 字母之间的波浪间隔 */
    }



    /* ===== 首页全局小文字浮出入场 ===== */
    /* 初始隐藏 */
    .cap-copy p,
    .profile-main p,
    .profile-text p,
    .cap-card p,
    .profile-mini p,
    .process-card p,
    .profile-brand-block .brand-desc {
      opacity: 0;
      transform: translateY(25px);
      will-change: transform, opacity;
      transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s,
        transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
    }

    /* 触发：自身获得 anim-in 或 anim-done 后，子文字浮出 */
    .cap-copy.anim-in p,
    .cap-copy.anim-done p,
    .profile-main.anim-in p,
    .profile-main.anim-done p,
    .profile-text.anim-in p,
    .profile-text.anim-done p,
    .cap-card.anim-in p,
    .cap-card.anim-done p,
    .profile-mini.anim-in p,
    .profile-mini.anim-done p,
    .process-card.anim-in p,
    .process-card.anim-done p,
    .profile-brand-block.anim-in .brand-desc,
    .profile-brand-block.anim-done .brand-desc {
      opacity: 1;
      transform: translateY(0);
    }

    .has-js [data-scroll-anim="cap-left-fade"] {
      opacity: 0;
      transform: translateX(-30px);
      transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: var(--batch-delay, calc(var(--card-i, 0) * 0.15s));
    }

    .has-js [data-scroll-anim="cap-left-fade"].anim-in,
    .has-js [data-scroll-anim="cap-left-fade"].anim-done {
      opacity: 1;
      transform: translateX(0);
    }

    .has-js [data-scroll-anim="cap-right-fade"] {
      opacity: 0;
      transform: translateX(30px);
      transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: var(--batch-delay, calc(var(--card-i, 0) * 0.15s));
    }

    .has-js [data-scroll-anim="cap-right-fade"].anim-in,
    .has-js [data-scroll-anim="cap-right-fade"].anim-done {
      opacity: 1;
      transform: translateX(0);
    }

    .has-js [data-scroll-anim="card-fade-up"] {
      opacity: 0;
      transform: translateY(var(--card-fade-distance));
      transition: opacity var(--card-fade-duration) var(--card-fade-easing),
        transform var(--card-fade-duration) var(--card-fade-easing);
      transition-delay: var(--batch-delay, calc(min(var(--card-i, 0), 7) * var(--card-fade-delay)));
    }

    .has-js [data-scroll-anim="card-fade-up"].anim-in,
    .has-js [data-scroll-anim="card-fade-up"].anim-done {
      opacity: 1;
      transform: translateY(0);
    }

    .has-js [data-scroll-anim="card-spring-pop"] {
      opacity: 0;
      transform: translateY(var(--card-spring-distance)) scale(var(--card-spring-scale, 0.95));
      transition: opacity var(--card-spring-duration) var(--card-fade-easing),
        transform var(--card-spring-duration) var(--card-spring-easing);
      transition-delay: var(--batch-delay, calc(min(var(--card-i, 0), 7) * var(--card-spring-delay)));
    }

    .has-js [data-scroll-anim="card-spring-pop"].anim-in,
    .has-js [data-scroll-anim="card-spring-pop"].anim-done {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* ===== 弹窗形变展开动画 ===== */
    .overlay[data-modal-anim="morph-square"] .contact-modal {
      clip-path: inset(48% 48% 48% 48% round 50%);
      opacity: 1;
    }

    .overlay[data-modal-anim="morph-square"].open .contact-modal {
      animation: modalMorphExpand var(--modal-morph-duration, 1s) var(--modal-morph-easing, cubic-bezier(0.16, 1, 0.3, 1)) forwards;
    }

    .overlay[data-modal-anim="morph-square"].closing .contact-modal {
      animation: modalMorphCollapse 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
    }

    @keyframes modalMorphExpand {
      from {
        clip-path: inset(48% 48% 48% 48% round 50%);
      }

      to {
        clip-path: inset(0 0 0 0 round 28px);
      }
    }

    @keyframes modalMorphCollapse {
      from {
        clip-path: inset(0 0 0 0 round 28px);
        opacity: 1;
      }

      to {
        clip-path: inset(48% 48% 48% 48% round 50%);
        opacity: 0;
      }
    }

    .project-overlay[data-modal-anim="morph-square"] .project-modal {
      transform: none;
      transition: none;
      clip-path: inset(48% 48% 48% 48% round 50%);
      opacity: 1;
    }

    .project-overlay[data-modal-anim="morph-square"].open .project-modal {
      animation-name: modalMorphExpand;
      animation-duration: var(--modal-morph-duration, 1s);
      animation-timing-function: var(--modal-morph-easing);
      animation-fill-mode: forwards;
    }

    @media (max-width: 768px) {
      .project-overlay[data-modal-anim="morph-square"] .project-modal {
        clip-path: none;
        transform: scale(0.92);
        opacity: 0;
      }

      .project-overlay[data-modal-anim="morph-square"].open .project-modal {
        animation-name: modalMorphMobileFallback;
        animation-duration: 0.55s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        animation-fill-mode: forwards;
      }

      @keyframes modalMorphMobileFallback {
        to {
          transform: scale(1);
          opacity: 1;
        }
      }
    }

    .recent-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 16px;
    }

    /* responsive */
    @media (max-width:1480px) {
      .recent-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .works-grid-5 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }

      .radar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .radar-card:nth-child(2)::after,
      .radar-card:nth-child(4)::after {
        display: none
      }
    }

    @media (max-width:1180px) {

      .cap-grid,
      .show-row,
      .show-row.reverse,
      .profile-row-1,
      .profile-row-2,
      .ecom-top,
      .personal-intro,
      .feature-layout,
      .about-top {
        .process-wrap {
          margin-top: 100px
        }

        .process-arrow-track {
          display: none !important;
        }

        .process-card:not(:last-child) .process-card-inner::after {
          display: none !important;
        }

        grid-template-columns:1fr;

        .ecom-modules-row {
          grid-template-columns: 1fr
        }
      }

      .cap-list {
        height: auto !important;
        margin-left: 0 !important;
        width: 100% !important;
      }

      .cap-item,
      .cap-item:hover,
      .cap-list:has(.cap-item:hover) .cap-item:not(:hover) {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
      }

      .meta-grid,
      .mini-four,
      .value-grid,
      .method-grid,
      .process-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .works-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
      }

      .ecom-side {
        min-height: auto
      }

      .ecom-carousel {
        min-height: 460px
      }

      .ecom-module {
        grid-template-columns: 1fr
      }

      .ecom-feature {
        min-height: 220px
      }

      .thumb-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
      }

      .footer-center-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center
      }

      .footer-side {
        align-items: center
      }
    }

    @media (max-width:920px) {
      .nav {
        display: none
      }

      .contact-mini {
        display: none
      }

      .menu-btn {
        display: grid;
        place-items: center
      }

      .hero-copy-back .line {
        font-size: clamp(40px, 13vw, 88px)
      }

      .hero-gif {
        margin-top: -110px
      }

      .hero-gif img {
        width: min(50vw, 330px)
      }

      .hero-meta {
        top: 56%
      }

      .recent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .works-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .thumb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .flower-icons img {
        width: 82px;
        height: 82px
      }
    }

    @media (max-width:640px) {
      :root {
        --header-h: 66px;
        --page-x: 16px;
        --section-gap: calc(56px + var(--spacing-boost) * 0.5);
      }

      .logo {
        font-size: 24px
      }

      .hero-stage {
        min-height: 760px
      }

      .hero-copy-back .line {
        font-size: clamp(34px, 12.8vw, 60px);
        line-height: .9;
      }

      .hero-copy-back .sub {
        width: min(280px, 92vw);
        font-size: 11px;
      }

      .hero-gif {
        margin-top: -88px;
      }

      .hero-gif img {
        width: min(60vw, 260px);
      }

      .hero-meta {
        top: 57%;
        font-size: 9px
      }

      .flower-icons img {
        width: 72px;
        height: 72px
      }

      .recent-grid,
      .meta-grid,
      .mini-four,
      .value-grid,
      .method-grid,
      .process-row,
      .radar-grid,
      .project-grid {
        .process-wrap {
          margin-top: 100px
        }

        .process-arrow-track {
          display: none !important;
        }

        .process-card:not(:last-child) .process-card-inner::after {
          display: none !important;
        }

        grid-template-columns:1fr;
      }

      .works-grid-5 {
        grid-template-columns: 1fr
      }

      .thumb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .skill-item {
        grid-template-columns: 86px 1fr
      }

      .skill-item label {
        text-align: left
      }

      .footer-center {
        min-width: 0
      }

      .footer-center h3 {
        font-size: 40px
      }

      .circular-gallery {
        height: 420px
      }

      .ecom-purple-section {
        padding: 50px 0
      }

      .gallery-section-full .gallery-title {
        font-size: clamp(1.4rem, 6vw, 2.2rem)
      }

      .cap-item {
        flex-direction: column;
        gap: 8px;
        padding: 24px 0;
      }

      .cap-item-left {
        flex: none;
      }
    }

    /* ================= 自定义指针系统 ================= */
    @media (pointer:fine) {

      body,
      body * {
        cursor: none !important
      }
    }

    @media (pointer:coarse) {
      .cursor-root {
        display: none !important
      }
    }

    .cursor-root {
      position: fixed;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      pointer-events: none;
      z-index: 99999;
      color: rgba(255, 255, 255, 0.96);
      mix-blend-mode: difference;
    }

    .part {
      position: absolute;
      left: 0;
      top: 0;
    }

    .centered {
      transform: translate(-50%, -50%)
    }

    .c-core {
      width: 11px;
      height: 11px;
      /*指针圆点大小*/
      border-radius: 999px;
      background: currentColor;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
      opacity: 1;
      transition: width .28s cubic-bezier(.22, 1, .36, 1),
        height .28s cubic-bezier(.22, 1, .36, 1),
        opacity .22s ease,
        background .22s ease,
        box-shadow .22s ease;
    }

    .c-shadow {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: currentColor;
      opacity: 0;
      filter: blur(18px);
      transform: translate(-50%, -50%);
      transition: opacity .32s ease, width .32s ease, height .32s ease, background .22s ease;
    }

    .c-ring {
      left: 50%;
      top: 50%;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 1px solid currentColor;
      background: transparent;
      opacity: 0;
      transition: opacity .28s ease, width .30s cubic-bezier(.22, 1, .36, 1),
        height .30s cubic-bezier(.22, 1, .36, 1),
        border-color .22s ease;
    }

    .c-ring2 {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 1px solid currentColor;
      background: transparent;
      opacity: 0;
      transition: opacity .32s ease, width .32s ease, height .32s ease;
    }

    /* chip：全局无框无背景，只靠 opacity 控制显隐 */
    .c-chip {
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      color: rgba(255, 255, 255, 0.92);
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
      opacity: 0;
      transform: translate(-50%, -50%) scale(.92);
      transition: opacity .22s ease, transform .26s cubic-bezier(.22, 1, .36, 1);
    }

    .c-drag {
      position: fixed;
      top: 0;
      left: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      z-index: 100000;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(8, 8, 12, 0.84);
      color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
      white-space: nowrap;
      opacity: 0;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: opacity .24s ease,
        border-color .22s ease, box-shadow .22s ease;
    }

    .c-drag svg {
      width: 18px;
      height: 18px;
      display: block
    }

    .c-drag span {
      font-size: 12px;
      line-height: 1
    }

    /* ================= 状态 ================= */

    /* 默认 */
    body[data-cursor-state="default"] .c-shadow {
      opacity: 0
    }

    body[data-cursor-state="default"] .c-ring {
      opacity: .22;
      width: 28px;
      height: 28px
    }

    /* work 状态：隐藏圆点，文字+圆环 */
    body[data-cursor-state="work"] .c-core {
      opacity: 0
    }

    body[data-cursor-state="work"] .c-ring {
      opacity: .7;
      width: 98px;
      height: 98px;
    }

    body[data-cursor-state="work"] .c-shadow {
      opacity: .16;
      width: 72px;
      height: 72px;
      background: rgba(0, 0, 0, 0.65);
    }

    body[data-cursor-state="work"] .c-chip {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    /* button */
    body[data-cursor-state="button"] .c-core {
      width: 28px !important;
      height: 28px !important;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 24px rgba(118, 0, 255, 0.20);
    }

    body[data-cursor-state="button"] .c-chip {
      opacity: 0 !important
    }

    body.is-down .c-core {
      width: 12px;
      height: 12px
    }

    /* card：绿色，圆环也变绿 */
    body[data-cursor-state="card"] .cursor-root {
      color: #d7ff4c
    }

    body[data-cursor-state="card"] .c-ring {
      opacity: .35;
      width: 36px;
      height: 36px;
    }

    body[data-cursor-state="card"] .c-chip {
      opacity: 0 !important
    }

    /* drag hover：放大不变色，显示拖拽徽章 */
    body[data-cursor-state="drag"] .c-core {
      width: 10px;
      height: 10px;
    }

    body[data-cursor-state="drag"] .c-ring {
      opacity: .30;
      width: 42px;
      height: 42px;
    }

    body[data-cursor-state="drag"] .c-drag {
      opacity: 1;
    }

    body[data-cursor-state="drag"] .c-chip {
      opacity: 0 !important
    }

    /* dragging：紫色反馈，无徽章 */
    body.dragging .c-core {
      width: 10px;
      height: 10px;
      background: #d7ff4c;
      box-shadow: 0 0 0 1px rgba(215, 255, 76, 0.4), 0 0 28px rgba(215, 255, 76, 0.45);
    }

    body.dragging .c-ring {
      opacity: .50;
      width: 52px;
      height: 52px;
      border-color: rgba(215, 255, 76, 0.7);
    }

    body.dragging .c-shadow {
      opacity: .18;
      width: 72px;
      height: 72px;
      background: rgba(215, 255, 76, 0.55);
    }

    body.dragging .c-drag {
      opacity: 0 !important
    }

    /* video：和 work 样式相同 */
    body[data-cursor-state="video"] .c-core {
      opacity: 0
    }

    body[data-cursor-state="video"] .c-ring {
      opacity: .7;
      width: 98px;
      height: 98px;
    }

    body[data-cursor-state="video"] .c-shadow {
      opacity: .16;
      width: 72px;
      height: 72px;
      background: rgba(0, 0, 0, 0.65);
    }

    body[data-cursor-state="video"] .c-chip {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    /* ===== 指针状态颜色控制 ===== */

    /* work/视频：关闭反色，白色不变 */
    body[data-cursor-state="work"] .cursor-root,
    body[data-cursor-state="video"] .cursor-root {
      mix-blend-mode: normal;
      color: rgba(255, 255, 255, 0.96);
    }

    /* 拖拽标签：关闭反色，黑底白字 */
    body[data-cursor-state="drag"] .cursor-root {
      mix-blend-mode: normal;
      color: rgba(255, 255, 255, 0.96);
    }

    /* dragging：关闭反色，绿色 */
    body.dragging .cursor-root {
      mix-blend-mode: normal;
    }

    /* card：关闭反色，深色=绿色，浅色=紫色 */
    body[data-cursor-state="card"] .cursor-root {
      mix-blend-mode: normal;
      color: #d7ff4c;
    }

    body[data-theme="light"][data-cursor-state="card"] .cursor-root {
      color: #7b2fff;
    }

    /* 浅色模式拖拽标签：黑底白字（和深色一致） */
    body[data-theme="light"] .c-drag {
      background: rgba(8, 8, 12, 0.84);
      border-color: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    }

    /* =============================================
       浅色模式 + 切换按钮 + 转场圆圈
       ============================================= */

    /* ----- 浅色变量 ----- */
    body[data-theme="light"] {
      --bg: #f8f6f2;
      /*浅色背景*/
      --bg-2: #f0ece6;
      /*浅色背景辅助2*/
      --bg-3: #e8e4dd;
      --panel: rgba(0, 0, 0, .030);
      --panel-2: rgba(0, 0, 0, .020);
      --panel-3: rgba(0, 0, 0, .040);
      --border: rgba(0, 0, 0, .08);
      --border-soft: rgba(0, 0, 0, .06);
      --border-strong: rgba(0, 0, 0, .14);
      --text: #1a1714;
      --text-2: rgba(26, 23, 20, .78);
      --text-3: rgba(26, 23, 20, .52);
      --text-4: rgba(26, 23, 20, .30);
      --purple: #6b21d6;
      --purple-2: #6b21d6;
      --purple-3: #5518a8;
      --green: #4a7510;
      --shadow: 0 12px 34px rgba(0, 0, 0, .06);
      --shadow-lg: 0 22px 70px rgba(0, 0, 0, .10);
    }

    body[data-theme="light"] {
      background:
        radial-gradient(74% 34% at 50% 0%, rgba(122, 40, 255, .04) 0%, transparent 58%),
        radial-gradient(40% 22% at 82% 16%, rgba(168, 75, 255, .02) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
    }

    body[data-theme="light"]::before {
      background:
        linear-gradient(rgba(0, 0, 0, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .025) 1px, transparent 1px);
    }

    /* 卡片 */
    body[data-theme="light"] .cap-card,
    body[data-theme="light"] .profile-mini,
    body[data-theme="light"] .profile-main,
    body[data-theme="light"] .profile-features-card,
    body[data-theme="light"] .profile-metrics-card,
    body[data-theme="light"] .work-card,
    body[data-theme="light"] .method-card,
    body[data-theme="light"] .card-mini,
    body[data-theme="light"] .value-card,
    body[data-theme="light"] .meta-card {
      background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .85)) !important;
      border-color: rgba(0, 0, 0, .08) !important;
    }

    body[data-theme="light"] .profile-main,
    body[data-theme="light"] .profile-features-card,
    body[data-theme="light"] .profile-metrics-card {
      border: none !important;
    }

    /* 导航：不滚动时透明，滚动后白色模糊 */
    body[data-theme="light"] .header {
      background: transparent;
      border-bottom-color: rgba(0, 0, 0, 0);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    body[data-theme="light"] .header.scrolled {
      background: rgba(248, 246, 242, .5);
      /* 浅色导航栏 */
      border-bottom-color: rgba(0, 0, 0, .05);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 12px 36px rgba(0, 0, 0, .05);
    }

    body[data-theme="light"] .logo {
      color: var(--text);
    }

    body[data-theme="light"] .nav a {
      color: var(--text-4)
    }

    body[data-theme="light"] .nav a.active {
      color: var(--text)
    }

    body[data-theme="light"] .nav a.active::after {
      background: linear-gradient(90deg, var(--purple), var(--purple-2));
    }

    body[data-theme="light"] .contact-mini {
      background: linear-gradient(135deg, var(--purple), var(--purple-3));
      box-shadow: 0 10px 18px rgba(107, 33, 214, .12);
    }

    body[data-theme="light"] .mobile-menu {
      background: rgba(248, 246, 242, .98)
    }

    body[data-theme="light"] .mobile-menu a,
    body[data-theme="light"] .mobile-menu button {
      background: rgba(0, 0, 0, .02);
      color: var(--text-2)
    }

    /* Hero */
    body[data-theme="light"] .hero::before {
      background:
        radial-gradient(78% 36% at 50% 0%, rgba(255, 240, 255, .12) 0%, rgba(202, 142, 255, .06) 10%, transparent 56%),
        linear-gradient(180deg, rgba(248, 246, 242, .4) 0%, transparent 40%);
    }

    /* ★ 大标题（不透明深紫渐变） */
    body[data-theme="light"] .hero-copy-back .line {
      background: radial-gradient(circle at 50% 50%, #9b3fff 0%, #5518a8 40%, #3a0d75 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* ★ 紫色半透明修复（全部用完整选择器确保优先级足够） */
    body[data-theme="light"] .hero-copy-back .sub {
      color: rgba(60, 20, 130, .92)
    }

    body[data-theme="light"] .hero-copy-back .bracket {
      color: rgba(107, 33, 214, .28)
    }

    body[data-theme="light"] .hero-copy-back .sub-side {
      color: rgba(107, 33, 214, .5)
    }

    body[data-theme="light"] .hero-meta {
      color: rgba(107, 33, 214, .55)
    }

    body[data-theme="light"] .hero-copy-bottom {
      color: rgba(107, 33, 214, .30)
    }

    body[data-theme="light"] .mk-circle {
      border-color: rgba(107, 33, 214, .35)
    }

    body[data-theme="light"] .mk-circle span {
      color: rgba(107, 33, 214, .6)
    }

    /* 全局紫色标签修复 */
    body[data-theme="light"] .tag {
      color: var(--purple);
      border-color: rgba(107, 33, 214, .20);
      background: rgba(107, 33, 214, .06);
    }

    body[data-theme="light"] .work-tags span,
    body[data-theme="light"] .mini-tags span,
    body[data-theme="light"] .project-tags span {
      color: var(--purple);
      background: rgba(107, 33, 214, .06);
      border-color: rgba(107, 33, 214, .12);
    }

    body[data-theme="light"] .recent-tag {
      color: var(--purple)
    }

    body[data-theme="light"] .cap-card i,
    body[data-theme="light"] .method-card i {
      color: var(--purple)
    }

    body[data-theme="light"] .profile-main h3,
    body[data-theme="light"] .feature-item h4,
    body[data-theme="light"] .profile-brand-block .brand-title {
      color: var(--text) !important;
    }

    body[data-theme="light"] .metric-num {
      color: var(--green)
    }

    body[data-theme="light"] .about-stats .num {
      color: var(--purple)
    }

    body[data-theme="light"] .radar-card h4 {
      color: var(--purple)
    }

    body[data-theme="light"] .profile-main::before {
      background: linear-gradient(135deg, #c8ff60, #8fd30d00)
    }

    body[data-theme="light"] .profile-tags span {
      border-color: rgba(0, 0, 0, .08);
      color: var(--text-2)
    }

    body[data-theme="light"] .process-arrow-track path {
      stroke: rgba(107, 33, 214, 0.22);
    }

    body[data-theme="light"] .process-card-inner {
      background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .85)) !important;
      border-color: rgba(0, 0, 0, .08) !important;
    }

    body[data-theme="light"] .process-card:not(:last-child) .process-card-inner::after {
      border-left-color: rgba(107, 33, 214, .20) !important;
    }

    body[data-theme="light"] .process-num {
      color: rgba(0, 0, 0, 0.08);
    }

    body[data-theme="light"] .hero-gif img {
      filter:
        brightness(1.1)
        /* ← 提亮：1=原样, 1.3=亮30%, 1.5=亮50% */
        contrast(0.85)
        /* ← 降低对比度：1=原样, 0.9=更柔和 */
        drop-shadow(0 34px 40px rgba(0, 0, 0, .08));
    }

    body[data-theme="light"] .btn-secondary {
      border-color: rgba(0, 0, 0, .12);
      color: var(--text)
    }

    body[data-theme="light"] .btn-primary {
      box-shadow: 0 10px 20px rgba(107, 33, 214, .10)
    }

    body[data-theme="light"] .btn-chip {
      border-color: rgba(0, 0, 0, .10);
      color: var(--text-2)
    }

    body[data-theme="light"] .btn-chip.active {
      background: linear-gradient(135deg, var(--purple), var(--purple-3));
      color: #fff;
      border-color: transparent;
    }

    body[data-theme="light"] .detail-btn {
      background: linear-gradient(135deg, var(--purple), var(--purple-3))
    }

    body[data-theme="light"] .thumb-card {
      border-color: rgba(0, 0, 0, .06)
    }

    body[data-theme="light"] .carousel-dot.active {
      background: var(--purple)
    }

    body[data-theme="light"] .pf-dot.active {
      background: var(--purple)
    }

    body[data-theme="light"] .skill-fill {
      background: linear-gradient(90deg, var(--purple-2), #9b5dff)
    }

    body[data-theme="light"] .quote {
      color: rgba(0, 0, 0, .10)
    }

    body[data-theme="light"] .flower-note {
      color: rgba(0, 0, 0, .22)
    }

    body[data-theme="light"] .drag-hint {
      background: rgba(255, 255, 255, .94);
      border-color: rgba(0, 0, 0, .08);
      color: var(--text-3)
    }

    body[data-theme="light"] .portrait-wrap img {
      filter: brightness(1.02)contrast(1.01)drop-shadow(0 8px 30px rgba(0, 0, 0, .15));
    }

    /* ★ 流程图白色PNG变暗 */
    body[data-theme="light"] .process-img img {
      filter: brightness(0.15) contrast(1.1);
      opacity: 0.2;
    }

    body[data-theme="light"] .process-card:hover .process-img img {
      opacity: 0.2;
    }

    /* ★ 大卡片和轮播图渐变：浅色模式保持深色 */
    body[data-theme="light"] .show-image::after {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .45));
    }

    body[data-theme="light"] .ecom-slide::after {
      background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .75));
    }

    /* 轮播按钮 */
    body[data-theme="light"] .carousel-btn,
    body[data-theme="light"] .pf-arrow {
      border-color: rgba(0, 0, 0, .16);
      background: rgba(255, 255, 255, .6);
      color: var(--text);
    }

    /* 紫色衔接区 */
    body[data-theme="light"] .ecom-purple-section {
      background: linear-gradient(180deg, rgba(107, 33, 214, .06) 0%, rgba(107, 33, 214, .03) 100%);
      border-color: rgba(107, 33, 214, .10);
    }

    /* 弹窗 */
    body[data-theme="light"] .contact-modal {
      background: rgba(255, 255, 255, .96);
      border-color: rgba(0, 0, 0, .08);
    }

    body[data-theme="light"] .contact-modal h3 {
      color: var(--text)
    }

    body[data-theme="light"] .contact-item {
      background: rgba(0, 0, 0, .02);
      border-color: rgba(0, 0, 0, .06);
    }

    body[data-theme="light"] .contact-item:hover {
      background: rgba(0, 0, 0, .04)
    }

    body[data-theme="light"] .contact-icon {
      background: rgba(107, 33, 214, .08);
      color: var(--purple)
    }

    body[data-theme="light"] .project-modal {
      background: rgba(255, 255, 255, .98);
      border-color: rgba(0, 0, 0, .08)
    }

    body[data-theme="light"] .project-block {
      background: rgba(0, 0, 0, .025);
      border-color: rgba(0, 0, 0, .08)
    }

    body[data-theme="light"] .preview-watermark {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Ctext x='90' y='95' text-anchor='middle' fill='rgba(0,0,0,0.06)' font-size='14' transform='rotate(-28 90 90)' font-family='Arial'%3EMahogany Design%3C/text%3E%3C/svg%3E");
    }

    /* Footer 样式在浅色模式下与深色模式保持一致，因此删除了旧版的浅色覆盖规则 */


    body[data-theme="light"] .hero-copy-back .sub {
      color: rgba(60, 20, 130, .95)
    }

    body[data-theme="light"] .hero-copy-back .bracket {
      color: rgb(104 0 255)
    }

    body[data-theme="light"] .hero-copy-back .sub-side {
      color: rgb(107 33 214 / 65%)
    }

    body[data-theme="light"] .hero-meta {
      color: rgba(107, 33, 214, .60)
    }

    body[data-theme="light"] .mk-circle {
      border-color: rgb(117 51 211)
    }

    body[data-theme="light"] .mk-circle span {
      color: rgb(117 51 211)
    }

    body[data-theme="light"] .hero-copy-bottom {
      color: rgba(107, 33, 214, .35)
    }

    body[data-theme="light"] .metric-num {
      color: #73c912
    }

    body[data-theme="light"] .quote {
      color: rgba(0, 0, 0, .12)
    }

    body[data-theme="light"] .flower-note {
      color: rgba(0, 0, 0, .28)
    }

    body[data-theme="light"] .flower-icons img {
      filter: brightness(0.85)
    }

    body[data-theme="light"] .ecom-purple-section {
      background: linear-gradient(180deg, rgba(107, 33, 214, .10), rgba(107, 33, 214, .06));
      border-color: rgba(107, 33, 214, .15)
    }

    body[data-theme="light"] .radar-card h4 {
      color: #5518a8
    }

    /* 页尾在浅色模式下继承深色模式，因此无需特别覆盖 */

    /* ----- 切换按钮 ----- */
    .mode-toggle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .04);
      color: #fff;
      cursor: pointer;
      display: grid;
      place-items: center;
      font-size: 14px;
      transition: all var(--trans);
      position: relative;
      overflow: hidden;
    }

    .mode-toggle:hover {
      border-color: rgba(255, 255, 255, .25);
      transform: scale(1.08)
    }

    body[data-theme="light"] .mode-toggle {
      border-color: rgba(0, 0, 0, .10);
      background: rgba(0, 0, 0, .03);
      color: var(--text);
    }

    body[data-theme="light"] .mode-toggle:hover {
      border-color: rgba(0, 0, 0, .20)
    }

    .mode-toggle .icon-sun,
    .mode-toggle .icon-moon {
      position: absolute;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    }

    .mode-toggle .icon-sun {
      opacity: 1;
      transform: rotate(0) scale(1)
    }

    .mode-toggle .icon-moon {
      opacity: 0;
      transform: rotate(90deg) scale(0)
    }

    body[data-theme="light"] .mode-toggle .icon-sun {
      opacity: 0;
      transform: rotate(-90deg) scale(0)
    }

    body[data-theme="light"] .mode-toggle .icon-moon {
      opacity: 1;
      transform: rotate(0) scale(1)
    }

    /* ----- 转场覆盖层（mask实现，不是纯色盖） ----- */
    .mode-overlay {
      position: fixed;
      inset: 0;
      z-index: 9990;
      pointer-events: none;
      opacity: 0;
    }

    .mode-overlay.active {
      opacity: 1
    }

    /* ===== 个人作品大海报 ===== */
    .poster-section {
      height: 600vh;
      /* 还原为600vh，保证大三屏视差文案的位置和计算公式完全正确 */
      background-color: #d1dbe4;
      /* 填补渐变结束后的剩余空间 */
    }

    .poster-gradient-bg {
      position: fixed;
      top: -100px;
      /* 往上移动 100px，确保完全溢出并遮挡住浏览器顶部的任何边缘/白线 */
      left: 0;
      width: 100%;
      height: calc(200vh + 100px);
      /* 相应增加高度以防止底部断层 */
      /* 既然噪点已经解决了断层问题，我们可以把过渡拉长，让它极其柔和舒服 */
      background: linear-gradient(to bottom,
          #000000 0%,
          #000000 20%,
          #111922 40%,
          #4a5d70 60%,
          #90a4b7 80%,
          #d1dbe4 95%,
          #d1dbe4 100%);
      z-index: 1;
      will-change: transform;
      pointer-events: none;
    }

    /* 添加噪点层来消除 8-bit 色彩断层(摩尔纹) */
    .poster-gradient-bg::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-image: var(--noise-bg);
      opacity: var(--noise-opacity, 0);
    }

    /* 序列帧加载进度器 */
    .sequence-loader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 10;
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .circular-loader {
      width: 60px;
      height: 60px;
      animation: rotate 2s linear infinite;
    }

    .circular-loader .loader-path {
      stroke: rgba(255, 255, 255, 0.8);
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
      animation: dash 1.5s ease-in-out infinite;
      stroke-linecap: round;
    }

    .loader-text {
      margin-top: 10px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      letter-spacing: 1px;
      font-variant-numeric: tabular-nums;
    }

    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes dash {
      0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
      }

      50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
      }

      100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
      }
    }

    .poster-video-container {
      position: fixed;
      /* 百分百完美固定 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .poster-video-container canvas {
      height: clamp(200px, 45vh, 600px);
      width: auto;
      object-fit: contain;
    }

    .poster-bumper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--bg);
      z-index: 8;
      /* 提升层级，覆盖 canvas(z-index: 5) 和 text-scroller(z-index: 6) */
      pointer-events: none;
      transform: translateY(100%);
    }

    .poster-text-layer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.8s ease;
    }

    .poster-center-row {
      display: flex;
      align-items: center;
      gap: clamp(200px, 22vw, 600px);
      /* 两小文案的间距 */
    }

    .poster-main-title {
      font-family: "Arial", sans-serif;
      font-size: clamp(2rem, 4.2vw, 10rem);
      /* 个人作品标题大小 */
      font-weight: 800;
      letter-spacing: -.065em;
      color: var(--text);
      line-height: 1;
      white-space: nowrap;
    }

    .poster-top-sub {
      font-size: clamp(10px, 1.5vw, 16px);
      /* 上小标题大小 */
      font-weight: 400;
      letter-spacing: -0.02em;
      color: var(--text-3);
      margin-bottom: -2px;
      text-transform: uppercase;
    }

    .poster-bottom-sub {
      display: flex;
      align-items: center;
      gap: 0;
      margin-top: 20px;
    }

    .poster-bottom-sub .mk-circle {
      width: 75px;
      /* ← 圈的大小 */
      height: 75px;
      border-width: 4.3px;
      /* ← 圈的边框粗细（已等比复刻 5.5px） */
      gap: 12px;
      /* ← 三个圈之间的间距（写在父级） */
      margin-top: 0px;
      border-color: hsl(260 5% 95% / 1);
    }

    .poster-bottom-sub .mk-circle span {
      font-size: 47px;
      /* ← 圈内字母大小（已等比复刻 60px） */
      font-weight: 400;
      color: hsl(255 6% 95% / 1);
      transform: translateY(-3px) translateX(0px);
      /* ← 同步偏移量 */
    }

    body[data-theme="light"] .poster-bottom-sub .mk-circle {
      border-color: rgba(0, 0, 0, .30);
    }

    body[data-theme="light"] .poster-bottom-sub .mk-circle span {
      color: rgba(0, 0, 0, .55);
    }

    .poster-side-text {
      font-size: clamp(10px, 0.5vw, 14px);
      /* 两小文案的字号 */
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-3);
      white-space: nowrap;
      text-transform: uppercase;
    }

    .poster-content-wrap {
      position: relative;
      z-index: 10;
      background: var(--bg);
      margin-top: -190vh;
      /* 往上拉 190vh，融入黑色遮罩层级，消除中间空白黑屏区域 */
    }

    /* ===== 个人作品页：无限滚动轮播图 ===== */
    .personal-marquee {
      overflow: hidden;
      width: 100%;
      position: relative;
      background: var(--bg);
      padding: 160px 0 60px;
      /* 减小顶部 padding，让轮播图往上移动 */
      margin-bottom: -60px;
      /* 抵消增加的 padding，保持布局间距不变 */
    }

    .marquee-track {
      display: flex;
      width: max-content;
      gap: 16px;
      user-select: none;
    }

    .marquee-item {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      flex-shrink: 0;
    }

    .marquee-item img,
    .marquee-item video {
      width: 320px;
      height: auto;
      object-fit: cover;
      border-radius: var(--radius-md, 8px);
      display: block;
      filter: brightness(0.92);
      transition: filter 0.3s ease;
    }

    .marquee-item:hover img,
    .marquee-item:hover video {
      filter: brightness(1.05);
    }

    .marquee-item .item-meta {
      margin-bottom: 14px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      font-family: "Inter", sans-serif;
      font-size: 12px;
      line-height: 1.4;
      padding: 0 4px;
    }

    .marquee-item .item-meta .year {
      font-weight: 700;
      color: var(--text-2);
    }

    .marquee-item .item-meta .marquee-caption {
      color: var(--text-3);
      opacity: 0.85;
    }

    /* ===== 个人作品页：衔接桥梁区域 ===== */
    .ascii-bridge-section {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: min(var(--max), calc(100vw - var(--page-x) * 2));
      /* 与 .wrap 保持完全一致的两端对齐 */
      margin: 0 auto;
      padding: 0;
      box-sizing: border-box;
      /* 间距控制 */
      margin-top: calc(var(--spacing-boost-small) + 100px);
      /* 增加与上方轮播图的间距 */
      margin-bottom: var(--spacing-boost-small);
      /* 减小与下方内容的间距 */
      height: 140px;
      /* 适当减小高度 */
    }

    .ascii-bridge-section .bridge-text {
      font-size: 28px;
      font-weight: 500;
      letter-spacing: -0.01em;
      /* 缩小字间距 */
      color: rgba(255, 255, 255, 0.12);
      /* 淡淡的装饰文字 */
      text-transform: uppercase;
      font-family: "Inter", sans-serif;
      user-select: none;
      margin-top: 20px;
      transform: translateY(20px);
      /* 视觉上单独下移一些，不影响原本的布局和整体间距 */
    }

    body[data-theme="light"] .ascii-bridge-section .bridge-text {
      color: rgba(0, 0, 0, 0.06);
      /* 浅色模式下改为黑色半透明 */
    }

    /* ===== 首页入场动画 (First Load Only) ===== */

    /* ===== 全局去描边 ===== */
    [class*="-card"],
    .show-image,
    .ecom-hero-carousel,
    .cg-card,
    .project-modal,
    .project-hero,
    .project-block {
      border-color: transparent !important;
    }

    /* ===== 电商作品视差 ===== */
    /* ============ ★ 电商轮播图特效可调参数 ★ ============ */
    :root {
      --ecom-bw-blur: 5px;
      /* 黑白背景的模糊程度 (px越大越模糊) */
      --ecom-bw-opacity: 0.7;
      /* 黑白背景遮罩的不透明度 (0为全亮, 1为全黑) */
      --ecom-carousel-speed: 2.6s;
      /* 轮播图切换动画速度 (秒) */
    }

    .ecom-parallax-section {
      height: 300vh;
      /* 此处高度会被 JS 动态接管 */
      margin-top: calc(var(--header-h) * -1);
    }

    .ecom-gallery-sticky {
      width: 100vw;
      height: 100vh;
      z-index: 1;
    }

    /* ===== 电商价值要点过渡区 ===== */
    .ecom-value-section {
      position: relative;
      top: auto;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      /* 使用CSS变量实现自适应背景，彻底消除断层，同时自动适配深浅模式 */
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    }

    .ecom-value-section .wrap {
      max-width: 1400px;
      width: 100%;
      padding: 0 var(--page-x);
    }

    .ecom-value-head {
      text-align: left;
      margin-bottom: 40px;
    }

    .ecom-value-head h2 {
      font-family: "Inter", "Microsoft YaHei", sans-serif;
      font-weight: 500;
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      line-height: 1.3;
      margin: 12px 0 8px;
      color: var(--text);
    }

    .ecom-value-sub {
      font-size: 15px;
      color: var(--text-3);
      font-weight: 300;
      letter-spacing: 0.08em;
    }

    .ecom-value-list {
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--border-soft);
      /* 整体左移，确保顶部线条和底部线条的左侧完全对齐 */
      margin-left: -30px;
    }

    .value-scroll-hint {
      position: absolute;
      bottom: clamp(30px, 5vh, 60px);
      left: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: var(--text-4);
      font-size: 13px;
      letter-spacing: 0.1em;
      z-index: 10;
    }

    .value-scroll-hint .vsh-arrow {
      font-size: 18px;
      animation: bounce-down 2s infinite ease-in-out;
    }

    .ecom-value-item {
      display: flex;
      align-items: center;
      gap: 60px;
      padding: 28px 0 28px 120px;
      /* 增加上下内边距让其看起来不那么紧凑，同时左内边距让文案整体向右移动 */
      border-bottom: 1px solid var(--border-soft);
      position: relative;
      cursor: default;
      min-height: 140px;
      /* 固定最小高度，确保内容短的行也能保持一致的行高 */
    }

    /* 丝滑悬停：只用 transform 平移，不改变排版和背景，完全不卡顿 */
    .ecom-value-num,
    .ecom-value-left,
    .ecom-value-right {
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
    }

    .ecom-value-item:hover .ecom-value-num,
    .ecom-value-item:hover .ecom-value-left,
    .ecom-value-item:hover .ecom-value-right {
      transform: translateX(16px);
    }

    .ecom-value-num {
      font-size: 14px;
      font-family: "Inter", monospace;
      color: var(--text-3);
      font-weight: 500;
      flex: 0 0 28px;
      text-align: left;
    }

    .ecom-value-left {
      flex: 0 0 auto;
      min-width: 100px;
    }

    .ecom-value-left h4 {
      font-size: 26px;
      font-family: "Inter", "Microsoft YaHei", sans-serif;
      font-weight: 500;
      line-height: 1.15;
      letter-spacing: -0.01em;
    }

    .ecom-value-right {
      flex: 1;
    }

    .ecom-value-right p {
      font-size: 15px;
      color: var(--text-3);
      line-height: 1.8;
      margin: 0;
      font-weight: 300;
      max-width: 700px;
    }

    @media (max-width: 768px) {
      .ecom-value-head {
        margin-bottom: 28px;
      }

      .ecom-value-item {
        gap: 24px;
        margin-left: 0;
        padding: 24px 0;
        min-height: auto;
      }

      .ecom-value-left {
        min-width: 70px;
      }

      .ecom-value-left h4 {
        font-size: 20px;
      }

      .ecom-value-right p {
        font-size: 14px;
      }
    }

    .ecom-bumper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 3;
      transform: translateY(100%);
      background: var(--bg);
      overflow: hidden;
    }

    .ecom-hero-full {
      position: absolute !important;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto !important;
      width: 100vw;
      height: 100vh;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      border-radius: 0;
      max-width: none !important;
    }

    /* 轮播图指示点：反色与紫色激活效果 */


    .ecom-hero-full .ecom-hero-track {
      height: 100%;
      transition: transform var(--ecom-carousel-speed) cubic-bezier(.22, 1, .36, 1);
    }

    .ecom-hero-full .ecom-slide {
      height: 100%;
    }

    .ecom-hero-full .ecom-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 移除全屏主轮播和黑白轮播的黑色渐变遮罩 */
    .ecom-hero-full .ecom-slide::after {
      display: none !important;
    }

    .ecom-hero-bw {
      z-index: 1;
      filter: grayscale(100%) blur(var(--ecom-bw-blur));
      transform: scale(1.05);
      /* 稍微放大一点防止模糊漏底 */
    }

    .ecom-bw-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, var(--ecom-bw-opacity));
      z-index: 2;
      pointer-events: none;
    }

    .ecom-hero-main {
      z-index: 3;
      transform-origin: center center;
      transition: border-radius 0.1s ease;
      overflow: hidden;
    }

    .ecom-content-wrap {
      position: relative;
      z-index: 10;
      background: var(--bg);
      border-radius: 0;
      /* 配合上方圆角覆盖轮播图底色 */
    }

    /* ===== 向下滚动提示 UI ===== */
    :root {
      --ecom-hint-opacity: 0.4;
      /* 提示文案和箭头的不透明度 (0表示全透, 1表示完全不透) */
      --ecom-hint-bottom: 6%;
      /* 提示UI距离屏幕底部的距离 (例如 6% 或 40px) */
      --ecom-hint-bounce: 8px;
      /* 提示箭头上下弹跳的幅度 (px) */
    }

    .ecom-scroll-hint {
      position: absolute;
      bottom: var(--ecom-hint-bottom);
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255, 255, 255, var(--ecom-hint-opacity));
      font-size: 13px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      z-index: 5;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
      letter-spacing: 0.1em;
    }

    .ecom-scroll-hint i {
      animation: bounce-down 2s infinite ease-in-out;
    }

    .ecom-scroll-hint.show {
      opacity: 1;
    }

    @keyframes bounce-down {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(var(--ecom-hint-bounce));
      }
    }

    /* ==================================
       ★ 个人作品 HERO 新版三屏视差文案 ★
       ================================== */
    .poster-text-scroller {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 6;
      color: #fff;
    }

    .p-screen {
      position: absolute;
      width: 100%;
      height: 100vh;
    }

    .p-screen-1 {
      top: 0vh;
    }

    .p-screen-2 {
      top: 133.33vh;
    }

    .p-screen-3 {
      top: 266.67vh;
    }

    /* 让内部内容以帧图中心为基准的通用类 */
    .p-s3-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, calc(-50% + var(--seq-offset-y, -120px)));
      width: 100%;
    }

    /* === 第一屏 === */
    .p-s1-circles {
      position: absolute;
      top: calc(50% + var(--seq-offset-y, -120px) + 65px);
      left: calc(50% + 0px);
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18vw;
    }

    .p-circle {
      width: 20vw;
      height: 20vw;
      max-width: 200px;
      max-height: 200px;
      border: 4px solid rgba(255, 255, 255, 0.637);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Times New Roman', Times, serif;
      font-size: 6rem;
    }

    .p-s1-line-wrap {
      position: absolute;
      bottom: 12vh;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 20px;
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      letter-spacing: 3px;
    }

    .p-line {
      width: 12vw;
      height: 1px;
      background: rgba(255, 255, 255, 0.4);
    }

    .p-s1-scroll {
      position: absolute;
      bottom: 4vh;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.75rem;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.7);
    }

    /* === 第二屏 === */
    .p-s2-anthropic {
      position: absolute;
      top: calc(50% + var(--seq-offset-y, -120px) - 250px);
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Inter', sans-serif;
      font-size: 3.5rem;
      font-weight: 300;
      letter-spacing: 4px;
    }

    .p-s2-sub {
      position: absolute;
      top: calc(50% + var(--seq-offset-y, -120px) - 180px);
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.9rem;
      letter-spacing: 4px;
      color: rgba(255, 255, 255, 0.8);
    }

    .p-s2-refine {
      position: absolute;
      top: calc(50% + var(--seq-offset-y, -120px));
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1vw;
      /* brackets close to frame */
      font-family: 'Inter', sans-serif;
      font-size: 5.5rem;
      font-weight: 300;
      letter-spacing: 6px;
    }

    .refine-placeholder {
      width: 18vw;
      max-width: 250px;
    }

    .p-s2-desc {
      position: absolute;
      top: calc(50% + var(--seq-offset-y, -120px) + 160px);
      left: 50%;
      transform: translateX(-50%);
      width: 65vw;
      max-width: 800px;
      text-align: center;
      font-family: 'Inter', sans-serif;
      font-size: 0.7rem;
      line-height: 1.8;
      letter-spacing: 1.5px;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
    }

    /* === 第三屏 === */
    .p-s3-content {
      height: 400px;
    }

    .p-s3-copyright {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 32px;
      border: 2px solid rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.8);
    }

    .p-s3-bottom {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: 70vw;
      display: flex;
      justify-content: space-between;
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      letter-spacing: 1.5px;
      line-height: 1.8;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
    }

    .p-s3-col {
      flex: 1;
    }

    .p-s3-col.center-col {
      text-align: center;
    }

    .p-s3-col.right-col {
      text-align: right;
      text-transform: none;
    }

    .p-s3-frame-space {
      height: 40px;
    }

    /* ===== 新版项目详情弹窗样式 ===== */
    .project-overlay {
      display: none;
      /* 默认隐藏，防止切换页面时突然闪现的闪烁Bug */
      flex-direction: column;
      justify-content: flex-start;
      /* 顶部流式排列，防止溢出裁剪 */
      align-items: center;
      padding: 80px 0 120px 0;
      /* 增加上下留白，使元素往下移动 */
      overflow-y: auto !important;
      background: rgba(0, 0, 0, 0.75) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      /* 隐藏滚动条 */
      scrollbar-width: none;
      /* Firefox */
      -ms-overflow-style: none;
      /* IE/Edge */
    }

    .project-overlay.open {
      display: flex !important;
      /* 唤起时才切换为 flex 显示 */
    }

    .project-overlay::-webkit-scrollbar {
      display: none;
      /* Chrome/Safari */
    }

    .project-modal-new {
      width: 100%;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      /* 大间距让介绍卡片往下移动 */
      padding: 0;
      box-sizing: border-box;
    }

    /* 轮播容器 */
    .modal-carousel-container {
      width: 100%;
      overflow: hidden;
      cursor: grab;
      position: relative;
      padding: 10px 0;
      user-select: none;
      -webkit-user-select: none;
    }

    .modal-carousel-container:active {
      cursor: grabbing;
    }

    .modal-carousel-track {
      display: flex;
      gap: 6px;
      /* 图片的间隙减小 */
      will-change: transform;
    }

    /* 轮播项 */
    .modal-carousel-item {
      width: 400px;
      /* 图片再小一点点，让五张图片都能恰好的展示在屏幕中 */
      height: 533px;
      /* 维持 3:4 比例 */
      flex-shrink: 0;
      border-radius: 0;
      /* 取消圆角 */
      overflow: hidden;
      position: relative;
      transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
      opacity: 1;
      /* 完全100%不透明度，五个图片一样大 */
      transform: none;
      /* 无微缩放 */
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow: none !important;
      /* 取消图片阴影 */
    }

    .modal-carousel-item.active {
      opacity: 1;
      /* 统一不透明度 */
      transform: none;
      /* 统一大小 */
      box-shadow: none !important;
      /* 取消图片阴影 */
      border-color: rgba(255, 255, 255, 0.15);
    }

    .modal-carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      display: block;
    }

    .modal-carousel-item .preview-watermark {
      border-radius: 0 !important;
      /* 水印也取消圆角 */
    }

    /* 取消弹窗开启时指针阴影 */
    body.project-overlay-open .c-core,
    body.project-overlay-open .c-ring,
    body.project-overlay-open .c-shadow {
      box-shadow: none !important;
      text-shadow: none !important;
    }

    /* 图片与卡片入场动画 */
    .project-overlay.open .modal-carousel-item {
      animation: carouselItemEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      /* 
        【在这里修改大图的入场延迟】：
        - 0.05s：是基础延迟时间，已调至极短（与联系我弹窗同步瞬发）。
        - 0.05s：是每张图从左到右依次弹跳入场的时间间隔（值越小，弹出速度越快）。
      */
      animation-delay: calc(0.05s + var(--item-index) * 0.05s);
    }

    .project-overlay.open .modal-info-card {
      animation: infoCardMorphExpand 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      /* 
        【在这里修改介绍卡片的入场延迟】：
        - 0.05s：是介绍卡片开始展开的延迟时间（与联系我弹窗同步瞬发）。
      */
      animation-delay: 0.05s;
    }

    @keyframes carouselItemEnter {
      0% {
        opacity: 0;
        transform: translateY(60px) scale(0.92);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes infoCardMorphExpand {
      0% {
        clip-path: inset(48% 48% 48% 48% round 50%);
      }

      100% {
        clip-path: inset(0 0 0 0 round 24px);
      }
    }

    /* 信息介绍卡片 */
    .modal-info-card {
      background: rgba(18, 18, 28, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 24px;
      padding: 24px;
      /* 更加精致紧凑 */
      width: min(1100px, 94vw);
      /* 加大介绍卡片宽度 */
      box-shadow: none !important;
      /* 取消介绍卡片阴影 */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-sizing: border-box;
      clip-path: inset(48% 48% 48% 48% round 50%);
      /* 初始状态为折叠状态，用于融合入场动画 */
      display: flex;
      flex-direction: column;
      gap: 16px;
      /* 更加精致紧凑 */
    }

    .mic-header {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .mic-title {
      font-size: 28px;
      font-weight: 700;
      color: #ffffff;
      font-family: "Inter", "Microsoft YaHei", sans-serif;
      margin: 0;
      letter-spacing: -0.01em;
    }

    .mic-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .mic-tags span {
      background: rgba(122, 40, 255, 0.15);
      border: 1px solid rgba(122, 40, 255, 0.3);
      color: #b380ff;
      padding: 6px 14px;
      border-radius: 99px;
      font-size: 13px;
      font-weight: 600;
      font-family: "Inter", sans-serif;
    }

    .mic-cols {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 40px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding-top: 24px;
    }

    .mic-section-title {
      font-size: 13px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.35);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
      font-family: "Inter", "Microsoft YaHei", sans-serif;
    }

    .mic-points {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .mic-points li {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.8);
      position: relative;
      padding-left: 20px;
      line-height: 1.6;
      font-family: "Inter", "Microsoft YaHei", sans-serif;
    }

    .mic-points li::before {
      content: "•";
      position: absolute;
      left: 0;
      color: var(--purple);
      font-size: 18px;
      line-height: 1;
    }

    .mic-value {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
      font-family: "Inter", "Microsoft YaHei", sans-serif;
      line-height: 1.5;
    }

    @media screen and (max-width: 768px) {
      .mic-cols {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .modal-carousel-item {
        width: 180px;
        height: 240px;
      }
    }

    /* ===== 浅色模式下的详情卡片配色 ===== */
    body[data-theme="light"] .modal-info-card {
      background: rgba(255, 255, 255, 0.96) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }

    body[data-theme="light"] .mic-title {
      color: var(--text) !important;
    }

    body[data-theme="light"] .mic-section-title {
      color: rgba(0, 0, 0, 0.45) !important;
    }

    body[data-theme="light"] .mic-points li {
      color: rgba(0, 0, 0, 0.75) !important;
    }

    body[data-theme="light"] .mic-value {
      color: rgba(0, 0, 0, 0.85) !important;
    }

    body[data-theme="light"] .mic-tags span {
      background: rgba(107, 33, 214, 0.08) !important;
      border-color: rgba(107, 33, 214, 0.15) !important;
      color: var(--purple) !important;
    }

    /* ===== 浅色模式下强力保持与深色模式一致的紫色衔接横条与页尾样式 ===== */

    /* 电商作品轮播图下面的紫色横条 */
    body[data-theme="light"] .ecom-purple-section.new-purple-bar {
      background: var(--bg) !important;
      border-radius: 0 !important;
    }

    body[data-theme="light"] .ecom-purple-section.new-purple-bar .npb-title {
      color: var(--text) !important;
    }

    body[data-theme="light"] .ecom-purple-section.new-purple-bar .npb-desc {
      color: var(--text-2) !important;
    }

    body[data-theme="light"] .ecom-purple-section.new-purple-bar .npb-divider {
      background: var(--border) !important;
    }

    body[data-theme="light"] .ecom-purple-section.new-purple-bar .npb-bottom {
      display: none;
    }

    /* 网页整体页尾 (Gooey Site Footer) */
    body[data-theme="light"] .site-footer {
      background-color: #620ee2 !important;
    }

    body[data-theme="light"] .site-footer .remarkable-title,
    body[data-theme="light"] .site-footer .remarkable-desc,
    body[data-theme="light"] .site-footer .col-title,
    body[data-theme="light"] .site-footer .col-list li,
    body[data-theme="light"] .site-footer .col-list li a,
    body[data-theme="light"] .site-footer .new-footer-gooey-text-1,
    body[data-theme="light"] .site-footer .new-footer-gooey-text-2,
    body[data-theme="light"] .site-footer .new-footer-copyright {
      color: rgba(255, 255, 255, 0.9) !important;
    }

    body[data-theme="light"] .site-footer .remarkable-title {
      color: #ffffff !important;
    }

    body[data-theme="light"] .site-footer .new-footer-gooey-text-2 {
      color: #ffffff !important;
    }

    body[data-theme="light"] .site-footer .col-title {
      color: rgba(255, 255, 255, 0.4) !important;
    }

    body[data-theme="light"] .site-footer .col-list li a {
      color: rgba(255, 255, 255, 0.65) !important;
    }

    body[data-theme="light"] .site-footer .col-list li:hover a {
      color: #ffffff !important;
    }

    body[data-theme="light"] .site-footer .new-footer-divider {
      background: rgba(255, 255, 255, 0.15) !important;
    }

    body[data-theme="light"] .site-footer .new-footer-vertical-line {
      background: rgba(255, 255, 255, 0.15) !important;
    }

    body[data-theme="light"] .site-footer .new-footer-btn {
      background: #d7ff4c !important;
      /* 保持与深色模式相同的明亮绿 */
      color: #050406 !important;
    }

    /* ===== 当在浅色模式下浏览“个人作品”页面时，强制其导航栏使用黑色背景、白色文字，彻底根除“顶部白条”与“文字隐形”问题 ===== */

    /* 1. 将导航栏自身内部的 blocker 变量设为纯黑，彻底让 blocker 渐变蒙版和黑色背景完美融为一体，不露白边 */
    body[data-active-page="personal"] .header {
      --bg: #000000 !important;
    }

    /* 2. 滚动时的磨砂背景锁定为深色模式样式，禁止其变成白色磨砂 */
    body[data-active-page="personal"] .header.scrolled {
      background: rgb(4 2 10 / 40%) !important;
      border-bottom-color: rgba(255, 255, 255, .05) !important;
      box-shadow: 0 12px 36px rgba(0, 0, 0, .22) !important;
      backdrop-filter: blur(15px) !important;
      -webkit-backdrop-filter: blur(15px) !important;
    }

    /* 3. Logo、导航文字与切换按钮颜色强制锁死为白色/浅色，防止黑字在黑底上隐形 */
    body[data-active-page="personal"] .logo {
      color: #ffffff !important;
    }

    body[data-active-page="personal"] .nav a {
      color: rgba(255, 255, 255, 0.7) !important;
    }

    body[data-active-page="personal"] .nav a.active {
      color: #ffffff !important;
    }

    body[data-theme="light"][data-active-page="personal"] .nav a.active::after {
      background-color: #ffffff !important;
    }

    body[data-active-page="personal"] .mode-toggle {
      color: #ffffff !important;
    }

    /* 4. 右侧“联系我”迷你胶囊按钮适配深色背景 */
    body[data-active-page="personal"] .contact-mini {
      background: rgba(255, 255, 255, 0.08) !important;
      border-color: rgba(255, 255, 255, 0.25) !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }

    /* ===== 个人作品页入场动画 ===== */
    #page-personal.active #posterVideoContainer {
      animation: personalHeroScaleIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
    }

    #page-personal.active .p-s1-circles .p-circle:nth-child(1) {
      animation: personalSlideInLeft 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      animation-delay: 0.3s;
      opacity: 0;
    }

    #page-personal.active .p-s1-circles .p-circle:nth-child(2) {
      animation: personalSlideInRight 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      animation-delay: 0.3s;
      opacity: 0;
    }

    #page-personal.active .p-s1-line-wrap {
      animation: personalFadeInUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      animation-delay: 0.5s;
      opacity: 0;
    }

    #page-personal.active .p-s1-scroll {
      animation: personalFadeInUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      animation-delay: 0.8s;
      opacity: 0;
    }

    @keyframes personalHeroScaleIn {
      0% {
        opacity: 0;
        transform: scale(0.85);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes personalSlideInLeft {
      0% {
        opacity: 0;
        transform: translateX(-40px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes personalSlideInRight {
      0% {
        opacity: 0;
        transform: translateX(40px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes personalFadeInUp {
      0% {
        opacity: 0;
        transform: translate(-50%, 30px);
      }

      100% {
        opacity: 1;
        transform: translate(-50%, 0);
      }
    }

    /* ===== 个人作品页轮播图入场动画 ===== */
    .personal-marquee .marquee-item {
      opacity: 0;
      transform: translateY(var(--card-spring-distance, 45px)) scale(var(--card-spring-scale, 0.95));
      transition: opacity var(--card-spring-duration, 1.3s) cubic-bezier(0.25, 1, 0.2, 1),
        transform var(--card-spring-duration, 1.3s) var(--card-spring-easing, cubic-bezier(0.25, 1, 0.2, 1));
    }

    .personal-marquee.revealed .marquee-item {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* ===== 模块轮播控制区 ===== */
    .ecom-modules-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 32px;
    }

    .modules-ctrl-btn {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--text-2);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      outline: none;
    }

    .modules-ctrl-btn:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: #ffffff;
      transform: scale(1.05);
    }

    .modules-dots {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .modules-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .modules-dot.active {
      background: var(--primary);
      transform: scale(1.2);
    }

    body[data-theme="light"] .modules-ctrl-btn {
      background: rgba(0, 0, 0, 0.02);
      border-color: rgba(0, 0, 0, 0.08);
      color: var(--text-2);
    }

    body[data-theme="light"] .modules-ctrl-btn:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: #ffffff;
    }

    body[data-theme="light"] .modules-dot {
      background: rgba(0, 0, 0, 0.15);
    }

    body[data-theme="light"] .modules-dot.active {
      background: var(--primary);
    }

    /* ===== 安全防盗：防止图片拖动与复制 ===== */
    img {
      -webkit-user-drag: none !important;
      user-select: none !important;
      -webkit-user-select: none !important;
    }