@font-face {
  font-family: "Zhi Mang Xing";
  src: url("assets/fonts/ZhiMangXing-hero.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+5B89, U+6960, U+6D69;
}

:root {
  --color-bg: #07110d;
  --color-bg-alt: #0a1712;
  --color-surface: #102019;
  --color-primary: #5dd6a2;
  --color-primary-hover: #7be5b7;
  --color-heading: #f1f6f3;
  --color-body: #b4c2bb;
  --color-muted: #788a81;
  --color-border: #1d382c;
  --color-award: #cbb77a;
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; color-scheme: dark; background: var(--color-bg); }
body { margin: 0; overflow-x: hidden; color: var(--color-body); background: var(--color-bg); font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif; }
button, a { color: inherit; font: inherit; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 10px 14px; border: 1px solid var(--color-primary); border-radius: 6px; color: var(--color-heading); background: var(--color-surface); text-decoration: none; transform: translateY(-160%); transition: transform 240ms var(--ease-smooth); }
.skip-link:focus { transform: translateY(0); }
.noscript-note { position: fixed; right: 16px; bottom: 16px; z-index: 1000; max-width: 420px; margin: 0; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-body); background: var(--color-surface); }

html:not(.js) .experience-section [data-reveal] {
  opacity: 1;
  transform: none;
  animation: none;
}


/* hero-final.html */
.hero {
        --color-bg: #07110d;
        --color-bg-alt: #0a1712;
        --color-surface: #102019;
        --color-primary: #5dd6a2;
        --color-primary-hover: #7be5b7;
        --color-heading: #f1f6f3;
        --color-body: #b4c2bb;
        --color-muted: #788a81;
        --color-border: #1d382c;
        --color-award: #cbb77a;
        --eye-x: 0px;
        --eye-y: 0px;
      }

      .hero,
.hero * {
        box-sizing: border-box;
      }

      .hero {
        min-width: 320px;
        scroll-behavior: smooth;
        background: var(--color-bg);
      }

      .hero {
        margin: 0;
        overflow-x: hidden;
        color: var(--color-body);
        background: var(--color-bg);
        font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif;
      }

      .hero button,
.hero a {
        color: inherit;
        font: inherit;
      }

      .hero button:focus-visible,
.hero a:focus-visible {
        outline: 2px solid var(--color-primary-hover);
        outline-offset: 4px;
      }

      .hero {
        position: relative;
        min-height: 100svh;
        overflow: hidden;
        isolation: isolate;
        background:
          radial-gradient(circle at 68% 36%, rgb(29 56 44 / 18%), transparent 32%),
          linear-gradient(135deg, #07110d 0%, #06100c 54%, #081510 100%);
      }

      .hero .grid {
        position: absolute;
        inset: 0;
        z-index: -5;
        opacity: 0.18;
        background-image:
          linear-gradient(rgb(93 214 162 / 7%) 1px, transparent 1px),
          linear-gradient(90deg, rgb(93 214 162 / 7%) 1px, transparent 1px);
        background-size: 48px 48px;
        -webkit-mask-image: radial-gradient(circle at 37% 42%, #000, transparent 58%);
        mask-image: radial-gradient(circle at 37% 42%, #000, transparent 58%);
      }

      .hero .halo {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 8;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(
          circle,
          rgb(93 214 162 / 5%) 0%,
          rgb(93 214 162 / 2.5%) 34%,
          transparent 72%
        );
        transform: translate3d(-250px, -250px, 0);
        transition: opacity 720ms ease;
      }

      .hero .halo.is-active {
        opacity: 1;
        transition-duration: 120ms;
      }

      .hero .site-header {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        display: grid;
        grid-template-columns: minmax(130px, 1fr) auto minmax(350px, 1fr);
        align-items: center;
        width: 100%;
        padding: 30px clamp(30px, 4.2vw, 72px);
      }

      .hero .wordmark {
        color: var(--color-heading);
        font-family: "Times New Roman", Times, serif;
        font-size: clamp(28px, 2.2vw, 38px);
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
      }

      .hero .nav-list {
        display: flex;
        align-items: center;
        gap: clamp(34px, 4vw, 68px);
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .hero .nav-link {
        position: relative;
        color: var(--color-body);
        font-size: 16px;
        text-decoration: none;
        transition: color 180ms ease;
      }

      .hero .nav-link:hover,
.hero .nav-link[aria-current="page"] {
        color: var(--color-primary);
      }

      .hero .nav-link[aria-current="page"]::after {
        position: absolute;
        right: 0;
        bottom: -12px;
        left: 0;
        height: 1px;
        content: "";
        background: var(--color-primary);
      }

      .hero .motto {
        justify-self: end;
        margin: 0;
        color: var(--color-body);
        font-family: "Times New Roman", Times, serif;
        font-size: clamp(15px, 1.25vw, 20px);
        font-style: italic;
        white-space: nowrap;
      }

      .hero .motto span {
        color: var(--color-primary);
      }

      .hero .menu-toggle {
        display: none;
        justify-self: end;
        position: relative;
        z-index: 2;
        border: 1px solid var(--color-border);
        padding: 8px 12px;
        color: var(--color-heading);
        background: rgb(7 17 13 / 82%);
      }

      .hero .starfield-canvas,
.hero .meteor-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

      .hero .starfield-canvas {
        z-index: -2;
      }

      .hero .meteor-canvas {
        z-index: 2;
      }

      .hero .photo-stage {
        position: absolute;
        top: 0;
        right: -1%;
        z-index: -1;
        width: 49%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
      }

      .hero .portrait {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 48% center;
      }

      .hero .portrait-environment {
        filter: brightness(0.5) saturate(0.62) contrast(1.04);
      }

      .hero .portrait-face {
        opacity: 0.96;
        filter: brightness(0.78) saturate(0.76) contrast(1.03);
        -webkit-mask-image: radial-gradient(
          ellipse 24% 25% at 50% 37%,
          #000 20%,
          rgb(0 0 0 / 84%) 52%,
          transparent 100%
        );
        mask-image: radial-gradient(
          ellipse 24% 25% at 50% 37%,
          #000 20%,
          rgb(0 0 0 / 84%) 52%,
          transparent 100%
        );
      }

      .hero .photo-veil {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, var(--color-bg) 0%, rgb(7 17 13 / 78%) 18%, transparent 48%),
          linear-gradient(0deg, var(--color-bg) 0%, rgb(7 17 13 / 50%) 13%, transparent 34%),
          linear-gradient(270deg, rgb(7 17 13 / 38%) 0%, transparent 20%),
          linear-gradient(180deg, rgb(7 17 13 / 22%) 0%, transparent 24%);
      }

      .hero .wolf-stage {
        position: absolute;
        top: clamp(215px, 25vh, 255px);
        left: clamp(24px, 3.2vw, 58px);
        z-index: 0;
        width: min(43vw, 700px);
        aspect-ratio: 1536 / 640;
        pointer-events: none;
        -webkit-mask-image: radial-gradient(
          ellipse 57% 70% at 50% 50%,
          #000 22%,
          rgb(0 0 0 / 76%) 57%,
          transparent 100%
        );
        mask-image: radial-gradient(
          ellipse 57% 70% at 50% 50%,
          #000 22%,
          rgb(0 0 0 / 76%) 57%,
          transparent 100%
        );
      }

      .hero .wolf-shadow {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0.1;
        filter: grayscale(0.72) saturate(0.5) brightness(0.62) contrast(1.06);
      }

      .hero .wolf-iris {
        position: absolute;
        top: 50%;
        width: 8%;
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 50%;
        opacity: 0.34;
        -webkit-mask-image: radial-gradient(circle, #000 38%, rgb(0 0 0 / 72%) 58%, transparent 100%);
        mask-image: radial-gradient(circle, #000 38%, rgb(0 0 0 / 72%) 58%, transparent 100%);
        transform: translate(calc(-50% + var(--eye-x)), calc(-50% + var(--eye-y)));
        transition: transform 70ms linear;
      }

      .hero .wolf-iris-left {
        left: 35%;
      }

      .hero .wolf-iris-right {
        left: 65%;
      }

      .hero .wolf-iris-texture {
        position: absolute;
        top: -211%;
        width: 1250%;
        height: auto;
        max-width: none;
        filter: saturate(0.56) sepia(0.08) brightness(0.76);
      }

      .hero .wolf-iris-left .wolf-iris-texture {
        left: -388%;
      }

      .hero .wolf-iris-right .wolf-iris-texture {
        left: -763%;
      }

      .hero .hero-content {
        position: absolute;
        top: 51%;
        left: clamp(30px, 6vw, 102px);
        z-index: 3;
        width: min(48vw, 760px);
        transform: translateY(-42%);
      }

      .hero .hero-name {
        margin: 0 0 28px;
        color: var(--color-heading);
        font-family: "Zhi Mang Xing", "STXingkai", "KaiTi", cursive;
        font-size: clamp(80px, 8vw, 136px);
        font-weight: 400;
        line-height: 0.95;
        letter-spacing: 0.04em;
        text-shadow: 0 4px 24px rgb(0 0 0 / 38%);
      }

      .hero .hero-label {
        margin: 0 0 22px;
        color: var(--color-primary);
        font-size: clamp(24px, 2vw, 34px);
        font-weight: 400;
        line-height: 1.45;
        letter-spacing: 0.015em;
        overflow-wrap: anywhere;
      }

      .hero .hero-description {
        margin: 0 0 36px;
        color: var(--color-body);
        font-size: clamp(16px, 1.18vw, 20px);
        line-height: 1.75;
        overflow-wrap: anywhere;
      }

      .hero .wechat-button {
        min-width: 244px;
        border: 1px solid rgb(93 214 162 / 70%);
        border-radius: 12px;
        padding: 17px 28px;
        color: var(--color-primary);
        font-size: 18px;
        background: rgb(7 17 13 / 34%);
        cursor: pointer;
        transition:
          border-color 180ms ease,
          color 180ms ease,
          background 180ms ease,
          transform 180ms ease;
      }

      .hero .wechat-button:hover {
        border-color: var(--color-primary-hover);
        color: var(--color-primary-hover);
        background: rgb(93 214 162 / 6%);
        transform: translateY(-2px);
      }

      .hero .about-peek {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 18px;
        height: 98px;
        border-top: 1px solid rgb(29 56 44 / 78%);
        padding: 0 clamp(30px, 6vw, 102px);
        background: linear-gradient(90deg, rgb(10 23 18 / 88%), rgb(7 17 13 / 72%));
        backdrop-filter: blur(8px);
      }

      .hero .about-number {
        color: var(--color-primary);
        font-family: "Times New Roman", Times, serif;
        font-size: 30px;
      }

      .hero .about-divider {
        color: var(--color-primary);
        opacity: 0.45;
      }

      .hero .about-en {
        color: var(--color-muted);
        font-family: "Times New Roman", Times, serif;
        font-size: 15px;
      }

      .hero .about-title {
        color: var(--color-body);
        font-size: 20px;
      }

      .hero dialog {
        border: 1px solid var(--color-border);
        border-radius: 16px;
        width: min(90vw, 360px);
        padding: 28px;
        color: var(--color-body);
        background: var(--color-surface);
        box-shadow: 0 28px 80px rgb(0 0 0 / 55%);
      }

      .hero dialog::backdrop {
        background: rgb(2 8 5 / 76%);
        backdrop-filter: blur(6px);
      }

      .hero .dialog-title {
        margin: 0 0 10px;
        color: var(--color-heading);
        font-size: 22px;
      }

      .hero .dialog-copy {
        margin: 0 0 16px;
        line-height: 1.7;
      }

      .hero .official-account-qr {
        display: block;
        width: min(100%, 258px);
        height: auto;
        margin: 0 auto 20px;
        border: 8px solid #fff;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 18px 40px rgb(0 0 0 / 26%);
      }

      .hero .dialog-close {
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 10px 18px;
        color: var(--color-primary);
        background: transparent;
        cursor: pointer;
      }

      @media (max-width: 960px) {
        .hero .site-header {
          grid-template-columns: 1fr auto;
          padding: 22px 24px;
        }

        .hero .menu-toggle {
          display: block;
        }

        .hero .site-nav {
          position: absolute;
          top: 68px;
          right: 24px;
          display: none;
          width: min(240px, calc(100vw - 48px));
          border: 1px solid var(--color-border);
          border-radius: 12px;
          padding: 18px;
          background: rgb(7 17 13 / 96%);
          box-shadow: 0 18px 44px rgb(0 0 0 / 36%);
        }

        .hero .site-nav.is-open {
          display: block;
        }

        .hero .nav-list {
          align-items: stretch;
          flex-direction: column;
          gap: 18px;
        }

        .hero .nav-link {
          display: block;
        }

        .hero .nav-link[aria-current="page"]::after {
          display: none;
        }

        .hero .motto {
          position: absolute;
          top: 82px;
          right: 24px;
          display: block;
          width: max-content;
          max-width: none;
          font-size: 14px;
        }

        .hero .photo-stage {
          right: -18%;
          width: 82%;
          opacity: 0.58;
        }

        .hero .photo-veil {
          background:
            linear-gradient(90deg, var(--color-bg) 0%, rgb(7 17 13 / 88%) 27%, transparent 68%),
            linear-gradient(0deg, var(--color-bg) 0%, rgb(7 17 13 / 58%) 15%, transparent 38%),
            linear-gradient(180deg, rgb(7 17 13 / 28%) 0%, transparent 26%);
        }

        .hero .hero-content {
          top: 53%;
          left: 24px;
          width: calc(100% - 48px);
          transform: translateY(-43%);
        }

        .hero .hero-name {
          font-size: clamp(68px, 18vw, 92px);
        }

        .hero .hero-label {
          width: 100%;
          max-width: 100%;
          font-size: clamp(21px, 4vw, 28px);
          word-break: break-all;
        }

        .hero .hero-description {
          width: 100%;
          max-width: 100%;
          font-size: 16px;
          word-break: break-all;
        }

        .hero .wolf-stage {
          top: 30%;
          left: -7%;
          width: 82%;
          opacity: 0.72;
        }

      }

      @media (max-width: 560px) {
        .hero .motto {
          top: 78px;
          max-width: calc(100vw - 48px);
          font-size: 13px;
        }

        .hero .hero-content {
          top: 53%;
        }

        .hero .hero-name {
          margin-bottom: 24px;
          font-size: clamp(64px, 22vw, 82px);
        }

        .hero .hero-label {
          margin-bottom: 18px;
          font-size: 22px;
          line-height: 1.48;
        }

        .hero .hero-description {
          margin-bottom: 30px;
          font-size: 15px;
          line-height: 1.7;
        }

        .hero .wechat-button {
          width: min(100%, 260px);
          min-width: 0;
          font-size: 16px;
        }

        .hero .about-peek {
          gap: 12px;
          height: 82px;
          padding: 0 24px;
        }

        .hero .about-number {
          font-size: 25px;
        }

        .hero .about-title {
          font-size: 17px;
        }
      }

      @media (hover: none), (pointer: coarse) {
        .hero .halo {
          display: none;
        }

        .hero .wolf-iris {
          transform: translate(-50%, -50%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero {
          scroll-behavior: auto;
        }

        .hero .meteor-canvas {
          display: none;
        }

        .hero .halo {
          display: none;
        }

        .hero .wolf-iris,
.hero .wechat-button {
          transition: none;
        }

        .hero .wolf-iris {
          transform: translate(-50%, -50%);
        }
      }

/* about-final.html */
.about-section {
        --color-bg: #07110d;
        --color-bg-alt: #0a1712;
        --color-surface: #102019;
        --color-primary: #5dd6a2;
        --color-primary-hover: #7be5b7;
        --color-heading: #f1f6f3;
        --color-body: #b4c2bb;
        --color-muted: #788a81;
        --color-border: #1d382c;
        --color-award: #cbb77a;
        --page-gutter: clamp(28px, 5.25vw, 88px);
        --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
      }

      .about-section,
.about-section * {
        box-sizing: border-box;
      }

      .about-section {
        min-width: 320px;
        color-scheme: dark;
        background: var(--color-bg);
      }

      .about-section {
        margin: 0;
        overflow-x: hidden;
        color: var(--color-body);
        background: var(--color-bg);
        font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif;
      }

      .about-section button,
.about-section a {
        color: inherit;
        font: inherit;
      }

      .about-section button:focus-visible,
.about-section a:focus-visible {
        outline: 2px solid var(--color-primary-hover);
        outline-offset: 4px;
      }

      .about-section {
        position: relative;
        min-height: max(100svh, 1000px);
        overflow: hidden;
        isolation: isolate;
        background:
          radial-gradient(circle at 74% 18%, rgb(29 56 44 / 17%), transparent 28%),
          radial-gradient(circle at 21% 62%, rgb(29 56 44 / 9%), transparent 32%),
          linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 11%, var(--color-bg-alt) 88%, var(--color-bg) 100%);
      }

      .about-section .background-grid {
        position: absolute;
        inset: 0;
        z-index: -4;
        opacity: 0.15;
        background-image:
          linear-gradient(rgb(93 214 162 / 7%) 1px, transparent 1px),
          linear-gradient(90deg, rgb(93 214 162 / 7%) 1px, transparent 1px);
        background-size: 48px 48px;
        -webkit-mask-image: radial-gradient(ellipse 70% 62% at 57% 42%, #000, transparent 78%);
        mask-image: radial-gradient(ellipse 70% 62% at 57% 42%, #000, transparent 78%);
      }

      .about-section .starfield-canvas,
.about-section .meteor-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

      .about-section .starfield-canvas {
        z-index: -3;
      }

      .about-section .meteor-canvas {
        z-index: -2;
      }

      .about-section .about-shell {
        position: relative;
        z-index: 1;
        width: min(100%, 1560px);
        margin: 0 auto;
        padding: clamp(68px, 7vw, 112px) var(--page-gutter) clamp(58px, 6vw, 96px);
      }

      .about-section .section-kicker {
        display: flex;
        align-items: baseline;
        gap: 18px;
        margin: 0 0 clamp(26px, 3vw, 44px);
      }

      .about-section .section-number,
.about-section .section-slash,
.about-section .section-en {
        font-family: "Times New Roman", Times, serif;
      }

      .about-section .section-number {
        color: var(--color-primary);
        font-size: clamp(25px, 2.1vw, 34px);
        line-height: 1;
      }

      .about-section .section-slash {
        color: rgb(93 214 162 / 48%);
        font-size: 19px;
      }

      .about-section .section-en {
        color: var(--color-muted);
        font-size: 15px;
      }

      .about-section .section-cn {
        color: var(--color-heading);
        font-size: 20px;
      }

      .about-section .about-headline {
        max-width: 1200px;
        margin: 0;
        color: var(--color-heading);
        font-size: clamp(36px, 3.25vw, 54px);
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.025em;
        text-wrap: balance;
      }

      .about-section .about-headline span {
        color: var(--color-primary);
      }

      .about-section .profile-grid {
        display: grid;
        grid-template-columns: minmax(315px, 0.35fr) minmax(600px, 0.65fr);
        gap: clamp(44px, 5vw, 84px);
        margin-top: clamp(42px, 5vw, 72px);
      }

      .about-section .module-title {
        margin: 0 0 30px;
        color: var(--color-primary);
        font-size: clamp(20px, 1.55vw, 26px);
        font-weight: 400;
        letter-spacing: 0.02em;
      }

      .about-section .education {
        position: relative;
        padding-right: clamp(24px, 3vw, 52px);
        border-right: 1px solid var(--color-border);
      }

      .about-section .education-timeline {
        position: relative;
        padding: 5px 0 3px 64px;
      }

      .about-section .timeline-track,
.about-section .timeline-fill {
        position: absolute;
        top: 18px;
        bottom: 18px;
        left: 15px;
        width: 1px;
      }

      .about-section .timeline-track {
        background: rgb(93 214 162 / 22%);
      }

      .about-section .timeline-fill {
        background: linear-gradient(180deg, var(--color-primary), rgb(93 214 162 / 50%));
        box-shadow: 0 0 10px rgb(93 214 162 / 25%);
        transform: scaleY(0);
        transform-origin: top;
      }

      .about-section .education-item {
        position: relative;
      }

      .about-section .education-item + .education-item {
        margin-top: 54px;
      }

      .about-section .education-node {
        position: absolute;
        top: 3px;
        left: -65px;
        width: 22px;
        height: 22px;
        border: 1px solid rgb(123 229 183 / 92%);
        border-radius: 50%;
        background: rgb(10 23 18 / 94%);
        box-shadow:
          0 0 0 4px rgb(93 214 162 / 11%),
          0 0 15px rgb(93 214 162 / 36%);
      }

      .about-section .education-node::before {
        position: absolute;
        inset: 5px;
        border-radius: inherit;
        content: "";
        background: var(--color-heading);
        box-shadow:
          0 0 0 2px rgb(93 214 162 / 22%),
          0 0 11px rgb(123 229 183 / 92%);
      }

      .about-section .education-node::after {
        position: absolute;
        inset: -10px;
        border: 1px solid rgb(93 214 162 / 64%);
        border-radius: inherit;
        content: "";
        opacity: 0.34;
        box-shadow:
          0 0 12px rgb(93 214 162 / 18%),
          inset 0 0 9px rgb(93 214 162 / 10%);
        transform: scale(0.76);
      }

      .about-section .education-item:nth-of-type(2) .education-node::after {
        animation-delay: -2.1s;
      }

      .about-section .education-year {
        margin: 0 0 7px;
        color: var(--color-primary);
        font-family: "Times New Roman", Times, serif;
        font-size: 20px;
      }

      .about-section .education-school {
        margin: 0 0 8px;
        color: var(--color-heading);
        font-size: 22px;
        font-weight: 500;
      }

      .about-section .education-degree {
        margin: 0;
        color: var(--color-muted);
        font-size: 17px;
        line-height: 1.65;
      }

      .about-section .capabilities {
        min-width: 0;
      }

      .about-section .capability-list {
        display: grid;
      }

      .about-section .capability-row {
        display: grid;
        grid-template-columns: 58px minmax(146px, 0.7fr) minmax(150px, 1fr) minmax(270px, 1.28fr);
        align-items: center;
        min-height: 82px;
        border-bottom: 1px solid var(--color-border);
        transition:
          border-color 420ms var(--ease-smooth),
          background 420ms var(--ease-smooth);
      }

      .about-section .capability-row:last-child {
        border-bottom-color: transparent;
      }

      .about-section .capability-row:hover {
        border-bottom-color: rgb(93 214 162 / 42%);
        background: linear-gradient(90deg, transparent, rgb(93 214 162 / 2.5%), transparent);
      }

      .about-section .capability-index {
        color: var(--color-primary);
        font-family: "Times New Roman", Times, serif;
        font-size: 31px;
      }

      .about-section .capability-name {
        min-width: 0;
        padding-right: 20px;
      }

      .about-section .capability-name h3 {
        margin: 0;
        color: var(--color-primary);
        font-size: clamp(18px, 1.35vw, 23px);
        font-weight: 400;
        white-space: nowrap;
      }

      .about-section .credential {
        grid-column: 2 / -1;
        margin: -17px 0 18px;
        color: var(--color-muted);
        font-family: "Times New Roman", "Microsoft YaHei UI", "PingFang SC", sans-serif;
        font-size: 15px;
        letter-spacing: 0.01em;
      }

      .about-section .signal-track {
        position: relative;
        height: 18px;
        margin-right: 24px;
        overflow: hidden;
      }

      .about-section .signal-track::before {
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        height: 1px;
        content: "";
        background: linear-gradient(90deg, rgb(93 214 162 / 58%), rgb(93 214 162 / 20%));
        transform: translateY(-50%);
      }

      .about-section .signal-track::after {
        position: absolute;
        top: 50%;
        left: 0;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        content: "";
        background: var(--color-primary-hover);
        box-shadow:
          0 0 0 4px rgb(93 214 162 / 10%),
          0 0 12px rgb(93 214 162 / 46%);
        transform: translateY(-50%);
      }

      .about-section .signal-packet {
        position: absolute;
        top: 50%;
        left: -82px;
        width: 82px;
        height: 7px;
        opacity: 0;
        background: linear-gradient(90deg, transparent 0%, rgb(93 214 162 / 10%) 24%, rgb(123 229 183 / 58%) 78%, rgb(241 246 243 / 98%) 100%);
        filter: drop-shadow(0 0 5px rgb(93 214 162 / 70%));
        transform: translateY(-50%);
        animation: about-signal-travel 9s linear infinite;
        animation-delay: var(--signal-delay, 0s);
      }

      .about-section .signal-packet::after {
        position: absolute;
        top: 50%;
        right: -2px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        content: "";
        background: var(--color-heading);
        box-shadow: 0 0 11px var(--color-primary-hover);
        transform: translateY(-50%);
      }

      .about-section .signal-packet.is-hover-pulse {
        animation: about-signal-hover 1.65s linear 1;
      }

      .about-section .capability-detail {
        margin: 0;
        color: var(--color-muted);
        font-family: "Times New Roman", "Microsoft YaHei UI", "PingFang SC", sans-serif;
        font-size: clamp(14px, 1.08vw, 18px);
        line-height: 1.55;
        transition: color 360ms var(--ease-smooth);
      }

      .about-section .capability-row:hover .capability-detail,
.about-section .capability-row:focus-within .capability-detail {
        color: var(--color-body);
      }

      .about-section .working-style,
.about-section .honors {
        border-top: 1px solid var(--color-border);
      }

      .about-section .working-style {
        margin-top: clamp(32px, 4vw, 54px);
        padding-top: 20px;
      }

      .about-section .subsection-title {
        display: flex;
        align-items: baseline;
        gap: 15px;
        margin: 0;
        font-weight: 400;
      }

      .about-section .subsection-en,
.about-section .subsection-slash {
        font-family: "Times New Roman", Times, serif;
      }

      .about-section .subsection-en {
        color: var(--color-primary);
        font-size: 18px;
        letter-spacing: 0.02em;
      }

      .about-section .subsection-slash {
        color: rgb(93 214 162 / 60%);
      }

      .about-section .subsection-cn {
        color: var(--color-heading);
        font-size: 17px;
      }

      .about-section .work-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin: 17px 0 0;
        padding: 0;
        list-style: none;
      }

      .about-section .work-item {
        padding: 3px clamp(24px, 3.5vw, 58px);
        color: var(--color-body);
        font-size: clamp(15px, 1.15vw, 18px);
        line-height: 1.6;
        text-align: center;
      }

      .about-section .work-item + .work-item {
        border-left: 1px solid var(--color-border);
      }

      .about-section .work-item strong {
        color: var(--color-heading);
        font-weight: 400;
      }

      .about-section .work-item span {
        color: var(--color-muted);
      }

      .about-section .honors {
        margin-top: 25px;
        padding-top: 20px;
        border-top-color: rgb(203 183 122 / 34%);
      }

      .about-section .honors .subsection-en,
.about-section .honors .subsection-slash,
.about-section .honors .subsection-cn {
        color: var(--color-award);
      }

      .about-section .honor-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px 0;
        margin: 18px 0 0;
        padding: 0;
        list-style: none;
      }

      .about-section .honor-item {
        display: grid;
        grid-template-columns: 34px 1fr;
        align-items: center;
        min-height: 46px;
        padding: 0 clamp(16px, 2.25vw, 36px);
        color: var(--color-award);
        font-size: clamp(13px, 1vw, 16px);
        line-height: 1.45;
      }

      .about-section .honor-item:nth-child(4n + 1) {
        padding-left: 0;
      }

      .about-section .honor-item:not(:nth-child(4n + 1)) {
        border-left: 1px solid rgb(203 183 122 / 30%);
      }

      .about-section .honor-mark {
        display: block;
        width: 25px;
        height: 34px;
        overflow: visible;
        color: var(--color-award);
        opacity: 0.96;
        filter: drop-shadow(0 0 4px rgb(203 183 122 / 16%));
      }

      .about-section .honor-mark .laurel-branch {
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-width: 1.25;
      }

      .about-section .honor-mark .laurel-leaf {
        fill: currentColor;
        stroke: none;
      }

      .about-section .symbol-defs {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
      }

      .about-section.is-ready [data-reveal] {
        animation: about-reveal-up 880ms var(--ease-smooth) both;
        animation-delay: var(--reveal-delay, 0ms);
      }

      .about-section.is-ready .timeline-fill {
        animation: about-timeline-grow 1050ms var(--ease-smooth) 560ms both;
      }

      .about-section.is-ready .education-node::after {
        animation: about-education-breathe 4.2s ease-in-out infinite;
      }

      .about-section.is-ready .education-item:nth-of-type(2) .education-node::after {
        animation-delay: -2.1s;
      }

      .about-section.is-ready .honor-item {
        animation: about-honor-reveal 760ms var(--ease-smooth) both;
        animation-delay: calc(1260ms + var(--honor-index) * 85ms);
      }

      @keyframes about-reveal-up {
        from {
          opacity: 0;
          transform: translate3d(0, 20px, 0);
        }
        to {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }

      @keyframes about-timeline-grow {
        from {
          transform: scaleY(0);
        }
        to {
          transform: scaleY(1);
        }
      }

      @keyframes about-education-breathe {
        0%,
        100% {
          opacity: 0.22;
          transform: scale(0.72);
          box-shadow: 0 0 0 0 rgb(93 214 162 / 0%);
        }
        50% {
          opacity: 0.82;
          transform: scale(1.18);
          box-shadow: 0 0 22px 5px rgb(93 214 162 / 20%);
        }
      }

      @keyframes about-signal-travel {
        0%,
        3% {
          left: -82px;
          opacity: 0;
        }
        5% {
          opacity: 1;
        }
        22% {
          left: calc(100% - 2px);
          opacity: 1;
        }
        26%,
        100% {
          left: calc(100% + 12px);
          opacity: 0;
        }
      }

      @keyframes about-signal-hover {
        0% {
          left: -82px;
          opacity: 0;
        }
        8% {
          opacity: 1;
        }
        86% {
          left: calc(100% - 2px);
          opacity: 1;
        }
        100% {
          left: calc(100% + 12px);
          opacity: 0;
        }
      }

      @keyframes about-honor-reveal {
        from {
          opacity: 0;
          transform: translate3d(0, 14px, 0);
        }
        to {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }

      @media (max-width: 1120px) {
        .about-section .profile-grid {
          grid-template-columns: minmax(270px, 0.38fr) minmax(500px, 0.62fr);
          gap: 38px;
        }

        .about-section .capability-row {
          grid-template-columns: 48px minmax(132px, 0.72fr) minmax(104px, 0.82fr) minmax(230px, 1.25fr);
        }

        .about-section .credential {
          font-size: 14px;
        }

        .about-section .honor-list {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .about-section .honor-item:nth-child(4n + 1) {
          padding-left: clamp(16px, 2.25vw, 36px);
        }

        .about-section .honor-item:nth-child(2n + 1) {
          padding-left: 0;
          border-left: 0;
        }
      }

      @media (max-width: 840px) {
        .about-section {
          min-height: 100svh;
        }

        .about-section .about-shell {
          padding-top: 66px;
        }

        .about-section .about-headline {
          font-size: clamp(31px, 6.2vw, 44px);
          line-height: 1.55;
          text-wrap: pretty;
        }

        .about-section .profile-grid {
          grid-template-columns: 1fr;
          gap: 46px;
        }

        .about-section .education {
          padding-right: 0;
          padding-bottom: 44px;
          border-right: 0;
          border-bottom: 1px solid var(--color-border);
        }

        .about-section .education-timeline {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 64px;
          padding-left: 46px;
        }

        .about-section .education-item + .education-item {
          margin-top: 0;
        }

        .about-section .timeline-track,
.about-section .timeline-fill {
          top: 16px;
          bottom: 6px;
          left: 14px;
        }

        .about-section .education-node {
          left: -42px;
        }

        .about-section .capability-row {
          grid-template-columns: 48px minmax(140px, 0.8fr) minmax(90px, 1fr) minmax(210px, 1.15fr);
        }

        .about-section .work-item {
          padding-right: 20px;
          padding-left: 20px;
        }
      }

      @media (max-width: 640px) {
        .about-section .about-shell {
          padding-top: 48px;
          padding-bottom: 64px;
        }

        .about-section .section-kicker {
          gap: 12px;
          margin-bottom: 28px;
        }

        .about-section .section-cn {
          font-size: 18px;
        }

        .about-section .about-headline {
          font-size: clamp(28px, 8.2vw, 38px);
          line-height: 1.55;
          letter-spacing: 0.01em;
        }

        .about-section .profile-grid {
          margin-top: 44px;
        }

        .about-section .education-timeline {
          grid-template-columns: 1fr;
          gap: 48px;
          padding-left: 52px;
        }

        .about-section .timeline-track,
.about-section .timeline-fill {
          left: 14px;
        }

        .about-section .education-node {
          left: -47px;
        }

        .about-section .capability-row {
          grid-template-columns: 44px 1fr;
          gap: 9px 14px;
          min-height: 0;
          padding: 22px 0;
        }

        .about-section .capability-index {
          grid-row: 1 / 4;
          align-self: start;
          font-size: 27px;
        }

        .about-section .capability-name {
          grid-column: 2;
          padding-right: 0;
        }

        .about-section .signal-track {
          grid-column: 2;
          width: 100%;
          margin-right: 0;
        }

        .about-section .capability-detail {
          grid-column: 2;
        }

        .about-section .credential {
          grid-column: 2;
          margin: 0;
        }

        .about-section .work-list {
          grid-template-columns: 1fr;
          gap: 0;
          margin-top: 12px;
        }

        .about-section .work-item {
          padding: 13px 0;
          text-align: left;
        }

        .about-section .work-item + .work-item {
          border-top: 1px solid var(--color-border);
          border-left: 0;
        }

        .about-section .honor-list {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0;
          margin-top: 14px;
        }

        .about-section .honor-item,
.about-section .honor-item:nth-child(4n + 1) {
          min-height: 82px;
          padding: 10px 12px;
          border-top: 1px solid rgb(203 183 122 / 18%);
          border-left: 0;
          font-size: 13px;
        }

        .about-section .honor-item:nth-child(even) {
          border-left: 1px solid rgb(203 183 122 / 24%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .about-section,
.about-section *,
.about-section::before,
.about-section *::before,
.about-section::after,
.about-section *::after {
          scroll-behavior: auto !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }

        .about-section.is-ready [data-reveal],
.about-section.is-ready .honor-item {
          opacity: 1;
          transform: none;
          animation: none;
        }

        .about-section.is-ready .timeline-fill {
          transform: scaleY(1);
          animation: none;
        }

        .about-section.is-ready .education-node::after {
          opacity: 0.28;
          transform: scale(1);
          animation: none;
        }

        .about-section .signal-packet {
          display: none;
        }
      }

/* experience-final.html */
.experience-section {
        --color-bg: #07110d;
        --color-bg-alt: #0a1712;
        --color-primary: #5dd6a2;
        --color-primary-hover: #7be5b7;
        --color-heading: #f1f6f3;
        --color-body: #b4c2bb;
        --color-muted: #788a81;
        --color-border: #1d382c;
        --color-award: #cbb77a;
        --page-gutter: clamp(28px, 5vw, 82px);
        --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
      }

      .experience-section,
.experience-section * {
        box-sizing: border-box;
      }

      .experience-section {
        min-width: 320px;
        color-scheme: dark;
        background: var(--color-bg);
      }

      .experience-section {
        margin: 0;
        overflow-x: hidden;
        color: var(--color-body);
        background: var(--color-bg);
        font-family: "Microsoft YaHei UI", "PingFang SC", sans-serif;
      }

      .experience-section button {
        color: inherit;
        font: inherit;
      }

      .experience-section button:focus-visible {
        outline: 2px solid var(--color-primary-hover);
        outline-offset: 5px;
      }

      .experience-section {
        position: relative;
        min-height: max(100svh, 980px);
        overflow: hidden;
        overflow: clip;
        isolation: isolate;
        background:
          radial-gradient(circle at 76% 36%, rgb(29 56 44 / 20%), transparent 31%),
          radial-gradient(circle at 18% 82%, rgb(29 56 44 / 10%), transparent 28%),
          linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 10%, var(--color-bg-alt) 90%, var(--color-bg) 100%);
      }

      .experience-section .background-grid {
        position: absolute;
        inset: 0;
        z-index: -5;
        opacity: 0.12;
        background-image:
          linear-gradient(rgb(93 214 162 / 6%) 1px, transparent 1px),
          linear-gradient(90deg, rgb(93 214 162 / 6%) 1px, transparent 1px);
        background-size: 48px 48px;
        -webkit-mask-image: radial-gradient(ellipse 76% 60% at 58% 49%, #000, transparent 80%);
        mask-image: radial-gradient(ellipse 76% 60% at 58% 49%, #000, transparent 80%);
      }

      .experience-section .data-orbit {
        position: absolute;
        top: 24%;
        right: -18vw;
        z-index: -4;
        width: min(78vw, 1120px);
        aspect-ratio: 1.8;
        border: 1px solid rgb(93 214 162 / 8%);
        border-radius: 50%;
        opacity: 0.7;
        transform: rotate(-8deg);
      }

      .experience-section .data-orbit::before,
.experience-section .data-orbit::after {
        position: absolute;
        inset: 13%;
        border: 1px solid rgb(93 214 162 / 6%);
        border-radius: inherit;
        content: "";
      }

      .experience-section .data-orbit::after {
        inset: 28%;
        border-color: rgb(203 183 122 / 5%);
      }

      .experience-section .star-canvas,
.experience-section .meteor-canvas {
        position: absolute;
        inset: 0;
        z-index: -3;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

      .experience-section .meteor-canvas {
        z-index: -2;
      }

      .experience-section .experience-shell {
        position: relative;
        z-index: 1;
        width: min(100%, 1560px);
        margin: 0 auto;
        padding: clamp(66px, 6.6vw, 104px) var(--page-gutter) clamp(64px, 6vw, 96px);
      }

      .experience-section .section-kicker {
        display: flex;
        align-items: baseline;
        gap: 16px;
        margin: 0 0 clamp(28px, 3.2vw, 46px);
      }

      .experience-section .section-number,
.experience-section .section-slash,
.experience-section .section-en {
        font-family: "Times New Roman", Times, serif;
      }

      .experience-section .section-number {
        color: var(--color-primary);
        font-size: clamp(25px, 2vw, 34px);
        line-height: 1;
      }

      .experience-section .section-slash {
        color: rgb(93 214 162 / 50%);
        font-size: 19px;
      }

      .experience-section .section-en {
        color: var(--color-muted);
        font-size: 15px;
      }

      .experience-section .section-cn {
        color: var(--color-heading);
        font-size: 18px;
      }

      .experience-section .experience-headline {
        max-width: 1150px;
        margin: 0;
        color: var(--color-heading);
        font-size: clamp(36px, 3.7vw, 58px);
        font-weight: 400;
        letter-spacing: 0.015em;
        line-height: 1.42;
      }

      .experience-section .experience-headline span {
        color: var(--color-primary);
      }

      .experience-section .timeline-region {
        margin-top: clamp(48px, 5vw, 72px);
      }

      .experience-section .timeline-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 2px 12px;
        scrollbar-width: none;
      }

      .experience-section .timeline-scroll::-webkit-scrollbar {
        display: none;
      }

      .experience-section .timeline {
        position: relative;
        display: grid;
        grid-template-columns: repeat(5, minmax(145px, 1fr));
        min-width: 780px;
        min-height: 126px;
        --progress-width: 80%;
      }

      .experience-section .timeline-track,
.experience-section .timeline-progress {
        position: absolute;
        top: 50px;
        right: 10%;
        left: 10%;
        height: 1px;
        pointer-events: none;
      }

      .experience-section .timeline-track {
        background: rgb(93 214 162 / 19%);
      }

      .experience-section .timeline-progress {
        right: auto;
        width: var(--progress-width);
        max-width: 80%;
        background: linear-gradient(90deg, rgb(93 214 162 / 38%), var(--color-primary));
        box-shadow: 0 0 12px rgb(93 214 162 / 18%);
        transition: width 620ms var(--ease-smooth);
      }

      .experience-section .timeline-tab {
        position: relative;
        display: grid;
        grid-template-rows: 31px 38px 1fr;
        min-width: 0;
        padding: 0 14px;
        border: 0;
        background: transparent;
        text-align: left;
        cursor: pointer;
      }

      .experience-section .timeline-date {
        color: var(--color-muted);
        font-family: "Times New Roman", Times, serif;
        font-size: 15px;
        letter-spacing: 0.04em;
        transition: color 360ms var(--ease-smooth);
      }

      .experience-section .timeline-dot {
        position: relative;
        align-self: center;
        width: 12px;
        height: 12px;
        margin-left: 2px;
        border: 2px solid var(--color-bg-alt);
        border-radius: 50%;
        background: rgb(120 138 129 / 70%);
        box-shadow: 0 0 0 1px rgb(93 214 162 / 16%);
        transition:
          background 360ms var(--ease-smooth),
          box-shadow 360ms var(--ease-smooth),
          transform 360ms var(--ease-smooth);
      }

      .experience-section .timeline-tab[aria-selected="true"] .timeline-date {
        color: var(--color-primary);
      }

      .experience-section .timeline-tab[aria-selected="true"] .timeline-dot {
        background: var(--color-primary-hover);
        box-shadow:
          0 0 0 5px rgb(93 214 162 / 10%),
          0 0 16px rgb(93 214 162 / 42%);
        transform: scale(1.08);
      }

      .experience-section .timeline-tab.is-current .timeline-dot::after {
        position: absolute;
        inset: -11px;
        border: 1px solid rgb(93 214 162 / 44%);
        border-radius: inherit;
        content: "";
        animation: experience-current-breathe 4.2s ease-in-out infinite;
      }

      .experience-section .timeline-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        color: var(--color-body);
        font-size: 15px;
        transition:
          color 360ms var(--ease-smooth),
          opacity 360ms var(--ease-smooth);
      }

      .experience-section .timeline-tab:not([aria-selected="true"]) .timeline-brand {
        opacity: 0.62;
      }

      .experience-section .timeline-tab[aria-selected="true"] .timeline-brand {
        color: var(--color-heading);
      }

      .experience-section .timeline-logo-stage {
        display: grid;
        place-items: center;
        width: 42px;
        height: 28px;
        flex: 0 0 auto;
      }

      .experience-section .timeline-logo {
        display: block;
        max-width: 42px;
        max-height: 25px;
        object-fit: contain;
      }

      .experience-section .logo-jsleasing {
        filter: grayscale(1) invert(1) brightness(1.45);
      }

      .experience-section .logo-kuaishou {
        filter: grayscale(1) brightness(1.75);
      }

      .experience-section .logo-kpmg {
        filter: none;
      }

      .experience-section .logo-caitong {
        filter: grayscale(1) brightness(1.75);
      }

      .experience-section .logo-rsm {
        filter: grayscale(1) brightness(1.65);
      }

      .experience-section .timeline-tab:hover .timeline-brand,
.experience-section .timeline-tab:hover .timeline-date {
        opacity: 1;
        color: var(--color-primary-hover);
      }

      .experience-section .experience-panels {
        display: grid;
        margin-top: clamp(32px, 3.4vw, 52px);
      }

      .experience-section .experience-panel {
        grid-area: 1 / 1;
        min-width: 0;
        padding-top: clamp(30px, 3vw, 44px);
        border-top: 1px solid var(--color-border);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(12px, 0, 0);
        transition:
          opacity 420ms var(--ease-smooth),
          transform 420ms var(--ease-smooth),
          visibility 0s linear 420ms;
      }

      .experience-section .experience-panel.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
        transition-delay: 70ms;
      }

      .experience-section .panel-header {
        display: grid;
        grid-template-columns: minmax(120px, 176px) minmax(0, 1fr) auto;
        align-items: center;
        gap: clamp(22px, 3vw, 44px);
      }

      .experience-section .panel-logo-stage {
        display: grid;
        align-items: center;
        min-height: 58px;
      }

      .experience-section .panel-logo {
        display: block;
        max-width: 156px;
        max-height: 52px;
        object-fit: contain;
        object-position: left center;
      }

      .experience-section .panel-logo.logo-kuaishou {
        width: 52px;
        height: 52px;
      }

      .experience-section .panel-company h2 {
        margin: 0 0 8px;
        color: var(--color-heading);
        font-size: clamp(24px, 2.25vw, 36px);
        font-weight: 400;
        letter-spacing: 0.025em;
      }

      .experience-section .panel-meta {
        margin: 0;
        color: var(--color-muted);
        font-family: "Times New Roman", "Microsoft YaHei UI", sans-serif;
        font-size: 16px;
      }

      .experience-section .panel-status {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--color-primary);
        font-family: "Times New Roman", Times, serif;
        font-size: 13px;
        letter-spacing: 0.12em;
        white-space: nowrap;
      }

      .experience-section .panel-status::before {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        content: "";
        background: var(--color-primary);
        box-shadow: 0 0 10px rgb(93 214 162 / 55%);
      }

      .experience-section .panel-statement {
        max-width: 980px;
        margin: clamp(30px, 3vw, 44px) 0 0;
        color: var(--color-body);
        font-size: clamp(18px, 1.5vw, 23px);
        line-height: 1.75;
      }

      .experience-section .panel-statement strong {
        color: var(--color-heading);
        font-weight: 500;
      }

      .experience-section .outcome-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(26px, 4vw, 66px);
        margin-top: clamp(36px, 4vw, 58px);
      }

      .experience-section .outcome-card {
        position: relative;
        min-height: 205px;
        padding-top: 24px;
        border-top: 1px solid rgb(93 214 162 / 24%);
      }

      .experience-section .outcome-card::before {
        position: absolute;
        top: -1px;
        left: 0;
        width: 0;
        height: 1px;
        content: "";
        background: linear-gradient(90deg, var(--color-primary), transparent);
      }

      .experience-section .experience-panel.is-active .outcome-card::before {
        animation: experience-card-line 980ms var(--ease-smooth) both;
        animation-delay: calc(160ms + var(--card-index) * 110ms);
      }

      .experience-section .outcome-index {
        margin-right: 10px;
        color: var(--color-primary);
        font-family: "Times New Roman", Times, serif;
        font-size: 16px;
      }

      .experience-section .outcome-title {
        margin: 0;
        color: var(--color-primary);
        font-size: clamp(19px, 1.45vw, 23px);
        font-weight: 400;
      }

      .experience-section .outcome-copy {
        margin: 20px 0 0;
        color: var(--color-body);
        font-size: 16px;
        line-height: 1.8;
      }

      .experience-section .outcome-evidence {
        margin: 20px 0 0;
        color: var(--color-award);
        font-family: "Times New Roman", "Microsoft YaHei UI", sans-serif;
        font-size: 14px;
        line-height: 1.65;
      }

      .experience-section .capability-path {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 28px;
        color: var(--color-muted);
        font-size: 13px;
      }

      .experience-section .capability-path span {
        white-space: nowrap;
      }

      .experience-section .path-line {
        position: relative;
        width: 72px;
        height: 1px;
        overflow: hidden;
        background: rgb(93 214 162 / 18%);
      }

      .experience-section .path-line::after {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 1px;
        content: "";
        background: linear-gradient(90deg, transparent, var(--color-primary-hover));
      }

      .experience-section .experience-panel.is-active .path-line::after {
        animation: experience-path-travel 3.8s linear infinite;
        animation-delay: var(--path-delay, 0s);
      }

      .experience-section [data-reveal] {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
      }

      .experience-section.is-ready [data-reveal] {
        animation: experience-reveal-up 840ms var(--ease-smooth) both;
        animation-delay: var(--reveal-delay, 0ms);
      }

      .experience-section.is-ready .timeline-progress {
        animation: experience-timeline-enter 1100ms var(--ease-smooth) 440ms both;
      }

      @keyframes experience-reveal-up {
        to {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }

      @keyframes experience-timeline-enter {
        from {
          transform: scaleX(0);
          transform-origin: left;
        }
        to {
          transform: scaleX(1);
          transform-origin: left;
        }
      }

      @keyframes experience-current-breathe {
        0%,
        100% {
          opacity: 0.24;
          transform: scale(0.78);
        }
        50% {
          opacity: 0.72;
          transform: scale(1.18);
        }
      }

      @keyframes experience-card-line {
        to {
          width: 82%;
        }
      }

      @keyframes experience-path-travel {
        0%,
        12% {
          left: -100%;
          opacity: 0;
        }
        18% {
          opacity: 1;
        }
        46% {
          left: 100%;
          opacity: 1;
        }
        54%,
        100% {
          left: 100%;
          opacity: 0;
        }
      }

      @media (max-width: 980px) {
        .experience-section .experience-headline {
          max-width: 820px;
        }

        .experience-section .panel-header {
          grid-template-columns: minmax(105px, 145px) minmax(0, 1fr);
        }

        .experience-section .panel-status {
          grid-column: 2;
          justify-self: start;
        }

        .experience-section .outcome-grid {
          gap: 28px;
        }
      }

      @media (max-width: 720px) {
        .experience-section .experience-shell {
          padding-top: 48px;
          padding-bottom: 64px;
        }

        .experience-section .section-kicker {
          gap: 12px;
          margin-bottom: 28px;
        }

        .experience-section .experience-headline {
          font-size: clamp(29px, 8vw, 39px);
          line-height: 1.55;
        }

        .experience-section .timeline-region {
          margin-top: 42px;
          margin-right: calc(var(--page-gutter) * -1);
        }

        .experience-section .timeline-scroll {
          padding-right: var(--page-gutter);
        }

        .experience-section .timeline {
          grid-template-columns: repeat(5, 152px);
          min-width: 760px;
        }

        .experience-section .timeline-tab {
          padding: 0 10px;
        }

        .experience-section .experience-panels {
          margin-top: 30px;
        }

        .experience-section .experience-panel {
          padding-top: 28px;
        }

        .experience-section .panel-header {
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .experience-section .panel-logo-stage {
          min-height: 42px;
        }

        .experience-section .panel-logo {
          max-width: 138px;
          max-height: 42px;
        }

        .experience-section .panel-logo.logo-kuaishou {
          width: 42px;
          height: 42px;
        }

        .experience-section .panel-status {
          grid-column: 1;
        }

        .experience-section .panel-statement {
          margin-top: 24px;
          font-size: 17px;
        }

        .experience-section .outcome-grid {
          grid-template-columns: 1fr;
          gap: 0;
          margin-top: 30px;
        }

        .experience-section .outcome-card {
          min-height: 0;
          padding: 24px 0 28px;
        }

        .experience-section .outcome-copy {
          margin-top: 14px;
        }

        .experience-section .outcome-evidence {
          margin-top: 12px;
        }

        .experience-section .capability-path {
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 20px;
        }

        .experience-section .path-line {
          width: 38px;
        }

        .experience-section .data-orbit {
          top: 29%;
          right: -78%;
          width: 150vw;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .experience-section,
.experience-section *,
.experience-section::before,
.experience-section *::before,
.experience-section::after,
.experience-section *::after {
          scroll-behavior: auto !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }

        .experience-section [data-reveal],
.experience-section.is-ready [data-reveal] {
          opacity: 1;
          transform: none;
          animation: none;
        }

        .experience-section .timeline-progress {
          animation: none !important;
        }

        .experience-section .timeline-tab.is-current .timeline-dot::after,
.experience-section .experience-panel.is-active .outcome-card::before,
.experience-section .experience-panel.is-active .path-line::after {
          animation: none;
        }

        .experience-section .meteor-canvas {
          display: none;
        }
      }

/* research-final.html */
.research-section {
        --color-bg: #07110d;
        --color-bg-alt: #0a1712;
        --color-surface: #102019;
        --color-primary: #5dd6a2;
        --color-primary-hover: #7be5b7;
        --color-heading: #f1f6f3;
        --color-body: #b4c2bb;
        --color-muted: #788a81;
        --color-border: #1d382c;
        --color-award: #cbb77a;
        --page-gutter: clamp(28px, 3.9vw, 64px);
        --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
      }

      .research-section,
.research-section * {
        box-sizing: border-box;
      }

      .research-section {
        min-width: 320px;
        color-scheme: dark;
        background: var(--color-bg);
      }

      .research-section {
        margin: 0;
        overflow-x: hidden;
        color: var(--color-body);
        background: var(--color-bg);
        font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
      }

      .research-section a {
        color: inherit;
      }

      .research-section a:focus-visible {
        outline: 2px solid var(--color-primary-hover);
        outline-offset: 6px;
      }

      .research-section {
        position: relative;
        min-height: max(100svh, 940px);
        overflow: hidden;
        overflow: clip;
        isolation: isolate;
        background:
          radial-gradient(circle at 78% 37%, rgb(29 56 44 / 19%), transparent 30%),
          radial-gradient(circle at 19% 87%, rgb(29 56 44 / 10%), transparent 30%),
          linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 10%, var(--color-bg-alt) 92%, var(--color-bg) 100%);
      }

      .research-section .background-grid {
        position: absolute;
        inset: 0;
        z-index: -5;
        opacity: 0.11;
        background-image:
          linear-gradient(rgb(93 214 162 / 7%) 1px, transparent 1px),
          linear-gradient(90deg, rgb(93 214 162 / 7%) 1px, transparent 1px);
        background-size: 48px 48px;
        -webkit-mask-image: radial-gradient(ellipse 83% 70% at 60% 46%, #000, transparent 82%);
        mask-image: radial-gradient(ellipse 83% 70% at 60% 46%, #000, transparent 82%);
      }

      .research-section .research-orbit {
        position: absolute;
        top: 86px;
        right: -90px;
        z-index: -4;
        width: min(43vw, 650px);
        aspect-ratio: 1.45;
        opacity: 0.36;
        transform: rotate(-8deg);
      }

      .research-section .research-orbit::before,
.research-section .research-orbit::after {
        position: absolute;
        inset: 16% 4%;
        border: 1px dashed rgb(203 183 122 / 21%);
        border-radius: 50%;
        content: "";
      }

      .research-section .research-orbit::after {
        inset: 29% -2% 6% 23%;
        border-color: rgb(93 214 162 / 16%);
        transform: rotate(18deg);
      }

      .research-section .orbit-line {
        position: absolute;
        top: 48%;
        right: -2%;
        width: 92%;
        height: 1px;
        opacity: 0.7;
        background: linear-gradient(90deg, transparent, rgb(93 214 162 / 25%), rgb(203 183 122 / 55%));
        transform: rotate(-22deg);
      }

      .research-section .orbit-point {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--color-award);
        box-shadow: 0 0 10px rgb(203 183 122 / 42%);
      }

      .research-section .orbit-point:nth-child(2) { top: 51%; left: 29%; }
      .research-section .orbit-point:nth-child(3) { top: 58%; left: 60%; }
      .research-section .orbit-point:nth-child(4) { top: 42%; right: 2%; }

      .research-section .star-canvas,
.research-section .meteor-canvas {
        position: absolute;
        inset: 0;
        z-index: -3;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

      .research-section .meteor-canvas {
        z-index: -2;
      }

      .research-section .research-shell {
        position: relative;
        z-index: 1;
        width: min(100%, 1536px);
        margin: 0 auto;
        padding: clamp(32px, 3.2vw, 50px) var(--page-gutter) clamp(46px, 5vw, 76px);
      }

      .research-section .section-kicker,
.research-section .chapter-title {
        display: flex;
        align-items: baseline;
        gap: 15px;
      }

      .research-section .section-kicker {
        margin: 0 0 clamp(20px, 2.2vw, 34px);
      }

      .research-section .section-number,
.research-section .section-slash,
.research-section .section-en,
.research-section .chapter-number,
.research-section .chapter-en {
        font-family: "Times New Roman", Times, serif;
      }

      .research-section .section-number {
        color: var(--color-primary);
        font-size: clamp(24px, 2vw, 31px);
        line-height: 1;
      }

      .research-section .section-slash {
        color: rgb(93 214 162 / 52%);
        font-size: 18px;
      }

      .research-section .section-en {
        color: var(--color-body);
        font-size: clamp(15px, 1.35vw, 20px);
        font-variant: small-caps;
        letter-spacing: 0.08em;
      }

      .research-section .section-cn {
        color: var(--color-primary);
        font-size: 16px;
        letter-spacing: 0.08em;
      }

      .research-section .research-headline {
        max-width: 760px;
        margin: 0;
        color: var(--color-heading);
        font-family: "STSong", "Songti SC", SimSun, serif;
        font-size: clamp(39px, 4.2vw, 64px);
        font-weight: 400;
        letter-spacing: 0.025em;
        line-height: 1.16;
      }

      .research-section .research-intro {
        max-width: 940px;
        margin: 15px 0 0;
        color: rgb(180 194 187 / 82%);
        font-size: clamp(14px, 1.25vw, 18px);
        letter-spacing: 0.075em;
        line-height: 1.8;
      }

      .research-section .chapter {
        margin-top: clamp(24px, 2.6vw, 38px);
      }

      .research-section .chapter-title {
        margin: 0 0 18px;
      }

      .research-section .chapter-number {
        color: var(--color-primary);
        font-size: clamp(25px, 2.1vw, 32px);
        font-weight: 400;
      }

      .research-section .chapter-en {
        color: var(--color-heading);
        font-size: clamp(18px, 1.7vw, 25px);
        font-variant: small-caps;
        letter-spacing: 0.045em;
      }

      .research-section .chapter-divider {
        color: rgb(93 214 162 / 72%);
        font-size: 20px;
      }

      .research-section .chapter-cn {
        color: var(--color-primary);
        font-size: 16px;
        letter-spacing: 0.12em;
      }

      .research-section .project-path {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: clamp(32px, 7vw, 110px);
        padding: 25px 5% 6px;
      }

      .research-section .project-line,
.research-section .project-line-progress {
        position: absolute;
        top: 35px;
        right: 9%;
        left: 9%;
        height: 1px;
      }

      .research-section .project-line {
        background: linear-gradient(90deg, transparent, rgb(93 214 162 / 28%) 7%, rgb(93 214 162 / 28%) 93%, transparent);
      }

      .research-section .project-line-progress {
        right: auto;
        width: 0;
        background: linear-gradient(90deg, transparent, var(--color-primary) 10%, var(--color-primary-hover));
        box-shadow: 0 0 13px rgb(93 214 162 / 30%);
        transition: width 1250ms var(--ease-smooth) 120ms;
      }

      .research-section .is-visible .project-line-progress {
        width: 82%;
      }

      .research-section .project-item {
        position: relative;
        padding-top: 32px;
      }

      .js .research-section .project-item {
        opacity: 0;
        transform: translateY(9px);
        transition:
          opacity 720ms var(--ease-smooth),
          transform 720ms var(--ease-smooth);
      }

      .research-section .is-visible .project-item {
        opacity: 1;
        transform: translateY(0);
      }

      .research-section .is-visible .project-item:nth-of-type(1) { transition-delay: 250ms; }
      .research-section .is-visible .project-item:nth-of-type(2) { transition-delay: 470ms; }
      .research-section .is-visible .project-item:nth-of-type(3) { transition-delay: 690ms; }

      .research-section .project-node {
        position: absolute;
        top: -1px;
        left: 50%;
        width: 22px;
        height: 22px;
        border: 1px solid var(--color-primary);
        border-radius: 50%;
        background: var(--color-bg-alt);
        box-shadow: 0 0 0 0 rgb(93 214 162 / 0%);
        transform: translateX(-50%);
      }

      .research-section .project-node::after {
        position: absolute;
        inset: 6px;
        border-radius: 50%;
        background: var(--color-primary);
        box-shadow: 0 0 10px rgb(93 214 162 / 55%);
        content: "";
        opacity: 0.25;
        transform: scale(0.55);
        transition:
          opacity 500ms var(--ease-smooth),
          transform 500ms var(--ease-smooth);
      }

      .research-section .is-visible .project-item:nth-of-type(1) .project-node::after { transition-delay: 410ms; }
      .research-section .is-visible .project-item:nth-of-type(2) .project-node::after { transition-delay: 630ms; }
      .research-section .is-visible .project-item:nth-of-type(3) .project-node::after { transition-delay: 850ms; }

      .research-section .is-visible .project-node::after {
        opacity: 1;
        transform: scale(1);
      }

      .research-section .project-item:first-of-type .project-node {
        box-shadow: 0 0 0 8px rgb(93 214 162 / 8%), 0 0 22px rgb(93 214 162 / 34%);
      }

      .research-section .project-name {
        position: relative;
        margin: 0;
        padding-left: 26px;
        color: var(--color-heading);
        font-size: clamp(15px, 1.45vw, 19px);
        font-weight: 400;
        line-height: 1.55;
      }

      .research-section .project-name::before {
        position: absolute;
        top: 0.58em;
        left: 0;
        width: 11px;
        height: 11px;
        border: 1px solid var(--color-primary);
        border-radius: 50%;
        content: "";
      }

      .research-section .project-item:first-of-type .project-name {
        color: var(--color-primary-hover);
      }

      .research-section .project-meta {
        margin: 7px 0 0 26px;
        color: rgb(180 194 187 / 67%);
        font-family: "Songti SC", SimSun, serif;
        font-size: 14px;
        letter-spacing: 0.055em;
        line-height: 1.65;
      }

      .research-section .publications {
        margin-top: clamp(28px, 3.2vw, 46px);
      }

      .research-section .publication-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(28px, 4.8vw, 70px);
        margin: 0;
        padding: 0 2%;
        list-style: none;
      }

      .research-section .publication-item {
        min-width: 0;
      }

      .js .research-section .publication-item {
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 720ms var(--ease-smooth),
          transform 720ms var(--ease-smooth);
      }

      .research-section .publications.is-visible .publication-item {
        opacity: 1;
        transform: translateY(0);
      }

      .research-section .publications.is-visible .publication-item:nth-child(1) { transition-delay: 80ms; }
      .research-section .publications.is-visible .publication-item:nth-child(2) { transition-delay: 190ms; }
      .research-section .publications.is-visible .publication-item:nth-child(3) { transition-delay: 300ms; }
      .research-section .publications.is-visible .publication-item:nth-child(4) { transition-delay: 410ms; }

      .research-section .publication-card {
        display: flex;
        min-height: 100%;
        flex-direction: column;
        text-decoration: none;
      }

      .research-section .cover-frame {
        position: relative;
        aspect-ratio: 0.84;
        overflow: hidden;
        border: 1px solid rgb(180 194 187 / 20%);
        border-radius: 4px;
        background: #0a1510;
        box-shadow: 0 18px 34px rgb(0 0 0 / 24%);
        transition:
          border-color 460ms var(--ease-smooth),
          box-shadow 460ms var(--ease-smooth),
          transform 460ms var(--ease-smooth);
      }

      .research-section .cover-frame::after {
        position: absolute;
        inset: 0;
        background: linear-gradient(128deg, rgb(255 255 255 / 5%), transparent 29%, transparent 70%, rgb(93 214 162 / 5%));
        content: "";
        pointer-events: none;
      }

      .research-section .cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.72) brightness(0.8);
        transition: filter 460ms var(--ease-smooth), transform 700ms var(--ease-smooth);
      }

      .research-section .publication-card[href]:hover .cover-frame,
.research-section .publication-card[href]:focus-visible .cover-frame {
        border-color: rgb(93 214 162 / 65%);
        box-shadow: 0 20px 38px rgb(0 0 0 / 29%), 0 0 24px rgb(93 214 162 / 12%);
        transform: translateY(-6px);
      }

      .research-section .publication-card[href]:hover .cover-image,
.research-section .publication-card[href]:focus-visible .cover-image {
        filter: saturate(0.92) brightness(0.93);
        transform: scale(1.015);
      }

      .research-section .publication-title {
        margin: 14px 0 0;
        color: var(--color-heading);
        font-family: "Songti SC", SimSun, serif;
        font-size: clamp(16px, 1.45vw, 20px);
        font-weight: 400;
        line-height: 1.47;
      }

      .research-section .publication-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 8px;
        color: var(--color-award);
        font-family: "Times New Roman", "Songti SC", SimSun, serif;
        font-size: 15px;
        letter-spacing: 0.055em;
        line-height: 1.55;
      }

      .research-section .publication-meta span + span::before {
        margin-right: 7px;
        color: rgb(203 183 122 / 52%);
        content: "·";
      }

      .research-section .publication-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 9px;
        color: var(--color-primary);
        font-size: 14px;
        letter-spacing: 0.08em;
      }

      .research-section .publication-card[href] .publication-link::after {
        content: "↗";
        transition: transform 360ms var(--ease-smooth);
      }

      .research-section .publication-card[href]:hover .publication-link::after,
.research-section .publication-card[href]:focus-visible .publication-link::after {
        transform: translate(2px, -2px);
      }

      .research-section .publication-note {
        color: var(--color-muted);
      }

      .research-section .scroll-hint {
        display: none;
      }

      @media (max-width: 980px) {
        .research-section {
          min-height: 100svh;
        }

        .research-section .research-orbit {
          top: 130px;
          right: -180px;
          width: 620px;
          opacity: 0.22;
        }

        .research-section .project-path {
          column-gap: 28px;
          padding-inline: 1%;
        }

        .research-section .publication-list {
          grid-template-columns: repeat(4, minmax(218px, 1fr));
          gap: 24px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scrollbar-width: thin;
          scrollbar-color: rgb(93 214 162 / 35%) transparent;
          padding: 0 26px 20px 2px;
        }

        .research-section .publication-item {
          scroll-snap-align: start;
        }

        .research-section .scroll-hint {
          display: block;
          margin: -8px 0 14px;
          color: var(--color-muted);
          font-size: 12px;
          letter-spacing: 0.08em;
        }
      }

      @media (max-width: 720px) {
        .research-section .research-shell {
          padding-top: 38px;
        }

        .research-section .section-kicker {
          flex-wrap: wrap;
          row-gap: 8px;
        }

        .research-section .section-en {
          font-size: 15px;
        }

        .research-section .section-cn {
          width: 100%;
          padding-left: 46px;
          font-size: 14px;
        }

        .research-section .research-headline {
          max-width: 520px;
          font-size: clamp(34px, 9vw, 42px);
          line-height: 1.23;
        }

        .research-section .research-intro {
          max-width: 92%;
          margin-top: 13px;
          font-size: 14px;
          letter-spacing: 0.035em;
        }

        .research-section .chapter {
          margin-top: 34px;
        }

        .research-section .chapter-title {
          flex-wrap: wrap;
          gap: 9px 12px;
        }

        .research-section .chapter-number {
          font-size: 27px;
        }

        .research-section .chapter-en {
          font-size: 19px;
        }

        .research-section .chapter-cn {
          width: 100%;
          padding-left: 44px;
          font-size: 14px;
        }

        .research-section .project-path {
          display: block;
          padding: 4px 0 0 30px;
        }

        .research-section .project-line,
.research-section .project-line-progress {
          top: 9px;
          right: auto;
          bottom: 28px;
          left: 8px;
          width: 1px;
          height: auto;
        }

        .research-section .project-line {
          background: linear-gradient(180deg, transparent, rgb(93 214 162 / 28%) 8%, rgb(93 214 162 / 28%) 92%, transparent);
        }

        .research-section .project-line-progress {
          height: 0;
          background: linear-gradient(180deg, var(--color-primary-hover), var(--color-primary), transparent);
          transition: height 1100ms var(--ease-smooth) 120ms;
        }

        .research-section .is-visible .project-line-progress {
          width: 1px;
          height: calc(100% - 37px);
        }

        .research-section .project-item {
          min-height: 88px;
          padding: 0 0 22px 13px;
        }

        .research-section .project-node {
          top: 0;
          left: -22px;
          width: 18px;
          height: 18px;
        }

        .research-section .project-node::after {
          inset: 5px;
        }

        .research-section .project-name {
          padding-left: 22px;
          font-size: 16px;
        }

        .research-section .project-name::before {
          width: 9px;
          height: 9px;
        }

        .research-section .project-meta {
          margin: 5px 0 0 22px;
          font-size: 13px;
        }

        .research-section .publications {
          margin-top: 20px;
        }

        .research-section .publication-list {
          grid-template-columns: repeat(4, minmax(208px, 72vw));
        }

        .research-section .publication-title {
          font-size: 17px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .research-section,
.research-section *,
.research-section::before,
.research-section *::before,
.research-section::after,
.research-section *::after {
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
          transition-delay: 0ms !important;
        }

        .research-section .meteor-canvas {
          display: none;
        }

        .research-section .project-line-progress {
          width: 82%;
        }

        .research-section .project-item,
.research-section .publication-item {
          opacity: 1;
          transform: none;
        }

        .research-section .publication-card[href]:hover .cover-frame,
.research-section .publication-card[href]:focus-visible .cover-frame {
          transform: none;
        }
      }

/* contact-final.html */
.contact-section {
        --color-bg: #07110d;
        --color-bg-alt: #0a1712;
        --color-surface: #102019;
        --color-primary: #5dd6a2;
        --color-primary-hover: #7be5b7;
        --color-heading: #f1f6f3;
        --color-body: #b4c2bb;
        --color-muted: #788a81;
        --color-border: #1d382c;
        --color-award: #cbb77a;
        --page-gutter: clamp(28px, 5.4vw, 86px);
        --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
      }

      .contact-section,
.contact-section * {
        box-sizing: border-box;
      }

      .contact-section {
        min-width: 320px;
        color-scheme: dark;
        background: var(--color-bg);
      }

      .contact-section {
        margin: 0;
        overflow-x: hidden;
        color: var(--color-body);
        background: var(--color-bg);
        font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
      }

      .contact-section button,
.contact-section a {
        color: inherit;
        font: inherit;
      }

      .contact-section a {
        text-decoration: none;
      }

      .contact-section button:focus-visible,
.contact-section a:focus-visible {
        outline: 2px solid var(--color-primary-hover);
        outline-offset: 5px;
      }

      .contact-section {
        position: relative;
        min-height: max(100svh, 920px);
        overflow: hidden;
        overflow: clip;
        isolation: isolate;
        background:
          radial-gradient(circle at 75% 41%, rgb(29 56 44 / 18%), transparent 31%),
          radial-gradient(circle at 24% 48%, rgb(29 56 44 / 10%), transparent 28%),
          linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 12%, var(--color-bg-alt) 88%, var(--color-bg) 100%);
      }

      .contact-section .background-grid {
        position: absolute;
        inset: 0;
        z-index: -6;
        opacity: 0.1;
        background-image:
          linear-gradient(rgb(93 214 162 / 7%) 1px, transparent 1px),
          linear-gradient(90deg, rgb(93 214 162 / 7%) 1px, transparent 1px);
        background-size: 48px 48px;
        -webkit-mask-image: radial-gradient(ellipse 84% 70% at 53% 44%, #000, transparent 82%);
        mask-image: radial-gradient(ellipse 84% 70% at 53% 44%, #000, transparent 82%);
      }

      .contact-section .star-canvas,
.contact-section .meteor-canvas {
        position: absolute;
        inset: 0;
        z-index: -5;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

      .contact-section .meteor-canvas {
        z-index: -4;
      }

      .contact-section .contact-shell {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(350px, 0.9fr);
        grid-template-rows: auto auto;
        gap: clamp(34px, 4.8vw, 76px);
        width: min(100%, 1536px);
        min-height: max(100svh, 920px);
        margin: 0 auto;
        padding: clamp(66px, 7vw, 104px) var(--page-gutter) 36px;
      }

      .contact-section .left-panel {
        position: relative;
        min-width: 0;
        padding-bottom: 30px;
        isolation: isolate;
      }

      .contact-section .left-panel::after {
        position: absolute;
        top: 30%;
        right: -50px;
        z-index: -3;
        width: min(46vw, 680px);
        aspect-ratio: 1.55;
        border: 1px dashed rgb(203 183 122 / 10%);
        border-radius: 50%;
        content: "";
        transform: rotate(-14deg);
      }

      .contact-section .portrait-reveal,
.contact-section .cursor-glow {
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        opacity: 0;
        transition: opacity 400ms var(--ease-smooth);
      }

      .contact-section .portrait-reveal {
        --spot-x: 62%;
        --spot-y: 55%;
        -webkit-mask-image: radial-gradient(circle 235px at var(--spot-x) var(--spot-y), #000 0%, rgb(0 0 0 / 92%) 28%, rgb(0 0 0 / 62%) 52%, transparent 100%);
        mask-image: radial-gradient(circle 235px at var(--spot-x) var(--spot-y), #000 0%, rgb(0 0 0 / 92%) 28%, rgb(0 0 0 / 62%) 52%, transparent 100%);
      }

      .contact-section .portrait-reveal img {
        position: absolute;
        top: 30%;
        right: -2%;
        width: min(48vw, 560px);
        height: auto;
        opacity: 0.67;
        filter: brightness(0.72) saturate(0.78) contrast(1.06);
        mix-blend-mode: screen;
      }

      .contact-section .cursor-glow {
        --glow-x: 62%;
        --glow-y: 55%;
        z-index: -1;
        background: radial-gradient(circle 245px at var(--glow-x) var(--glow-y), rgb(93 214 162 / 10%), rgb(93 214 162 / 4%) 42%, transparent 74%);
      }

      .contact-section .left-panel.is-spotlit .portrait-reveal,
.contact-section .left-panel.is-spotlit .cursor-glow {
        opacity: 1;
      }

      .contact-section .section-kicker {
        display: flex;
        align-items: baseline;
        gap: 16px;
        margin: 0 0 clamp(30px, 4vw, 54px);
      }

      .contact-section .section-number,
.contact-section .section-slash,
.contact-section .section-en {
        font-family: "Times New Roman", Times, serif;
      }

      .contact-section .section-number {
        color: var(--color-primary);
        font-size: clamp(26px, 2.4vw, 36px);
        line-height: 1;
      }

      .contact-section .section-slash {
        color: rgb(93 214 162 / 52%);
        font-size: 19px;
      }

      .contact-section .section-en {
        color: var(--color-heading);
        font-size: clamp(16px, 1.45vw, 21px);
        font-variant: small-caps;
        letter-spacing: 0.08em;
      }

      .contact-section .section-cn {
        color: var(--color-primary);
        font-size: 16px;
        letter-spacing: 0.08em;
      }

      .contact-section .contact-headline {
        max-width: 700px;
        margin: 0;
        color: var(--color-heading);
        font-family: "STSong", "Songti SC", SimSun, serif;
        font-size: clamp(48px, 5.1vw, 76px);
        font-weight: 400;
        letter-spacing: 0.025em;
        line-height: 1.16;
      }

      .contact-section .contact-intro {
        max-width: 750px;
        margin: 20px 0 0;
        color: rgb(180 194 187 / 76%);
        font-family: "Songti SC", SimSun, serif;
        font-size: clamp(15px, 1.45vw, 20px);
        letter-spacing: 0.035em;
        line-height: 1.75;
      }

      .contact-section .contact-scenes {
        display: grid;
        gap: 22px;
        max-width: 500px;
        margin: clamp(44px, 5vw, 72px) 0 0;
        padding: 0;
        list-style: none;
      }

      .contact-section .contact-scene {
        position: relative;
        display: grid;
        grid-template-columns: 28px 76px 1fr;
        align-items: center;
        min-height: 52px;
        opacity: 1;
      }

      .js .contact-section .contact-scene {
        opacity: 0;
        transform: translateX(-12px);
        transition:
          opacity 700ms var(--ease-smooth),
          transform 700ms var(--ease-smooth);
      }

      .contact-section .is-visible .contact-scene {
        opacity: 1;
        transform: translateX(0);
      }

      .contact-section .is-visible .contact-scene:nth-child(1) { transition-delay: 160ms; }
      .contact-section .is-visible .contact-scene:nth-child(2) { transition-delay: 300ms; }
      .contact-section .is-visible .contact-scene:nth-child(3) { transition-delay: 440ms; }

      .contact-section .scene-node {
        position: relative;
        width: 24px;
        height: 24px;
        border: 1px solid var(--color-primary);
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgb(93 214 162 / 0%);
      }

      .contact-section .scene-node::after {
        position: absolute;
        inset: 8px;
        border-radius: 50%;
        background: var(--color-primary-hover);
        box-shadow: 0 0 13px rgb(93 214 162 / 48%);
        content: "";
      }

      .contact-section .contact-scene:first-child .scene-node {
        box-shadow: 0 0 0 8px rgb(93 214 162 / 7%);
      }

      .contact-section .scene-line {
        width: 66px;
        height: 1px;
        background: linear-gradient(90deg, rgb(93 214 162 / 62%), rgb(93 214 162 / 12%));
      }

      .contact-section .scene-text {
        color: var(--color-heading);
        font-family: "Songti SC", SimSun, serif;
        font-size: clamp(16px, 1.55vw, 21px);
        letter-spacing: 0.035em;
      }

      .contact-section .email-area {
        position: relative;
        z-index: 2;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin-top: clamp(40px, 4vw, 58px);
      }

      .contact-section .email-link {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        width: min(100%, 300px);
        min-height: 70px;
        padding: 0 24px;
        border: 1px solid var(--color-primary);
        border-radius: 6px;
        color: var(--color-primary-hover);
        background: rgb(16 32 25 / 35%);
        font-size: 18px;
        letter-spacing: 0.08em;
        transition:
          color 360ms var(--ease-smooth),
          border-color 360ms var(--ease-smooth),
          background 360ms var(--ease-smooth),
          box-shadow 360ms var(--ease-smooth);
      }

      .contact-section .email-link:hover,
.contact-section .email-link:focus-visible {
        color: var(--color-heading);
        border-color: var(--color-primary-hover);
        background: rgb(16 32 25 / 64%);
        box-shadow: 0 0 26px rgb(93 214 162 / 10%);
      }

      .contact-section .mail-icon {
        width: 24px;
        height: 18px;
        border: 1px solid currentColor;
        border-radius: 2px;
      }

      .contact-section .mail-icon::before {
        display: block;
        width: 13px;
        height: 13px;
        margin: -2px auto 0;
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        content: "";
        transform: rotate(45deg);
      }

      .contact-section .mail-arrow {
        font-family: "Times New Roman", Times, serif;
        font-size: 25px;
        transition: transform 360ms var(--ease-smooth);
      }

      .contact-section .email-link:hover .mail-arrow,
.contact-section .email-link:focus-visible .mail-arrow {
        transform: translateX(3px);
      }

      .contact-section .email-copy {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 42px;
        padding: 0 4px;
        border: 0;
        color: var(--color-muted);
        background: transparent;
        cursor: pointer;
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        letter-spacing: 0.035em;
        transition: color 300ms ease;
      }

      .contact-section .email-copy:hover,
.contact-section .email-copy:focus-visible {
        color: var(--color-primary-hover);
      }

      .contact-section .copy-icon {
        position: relative;
        width: 16px;
        height: 16px;
        border: 1px solid currentColor;
        border-radius: 2px;
      }

      .contact-section .copy-icon::before {
        position: absolute;
        top: -5px;
        left: -5px;
        width: 12px;
        height: 12px;
        border: 1px solid currentColor;
        border-radius: 2px;
        content: "";
      }

      .contact-section .contact-card-wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        opacity: 1;
      }

      .js .contact-section .contact-card-wrap {
        opacity: 0;
        transform: translateY(12px);
        transition:
          opacity 850ms var(--ease-smooth) 280ms,
          transform 850ms var(--ease-smooth) 280ms;
      }

      .contact-section.is-visible .contact-card-wrap {
        opacity: 1;
        transform: translateY(0);
      }

      .contact-section .contact-card {
        position: relative;
        width: min(100%, 480px);
        padding: clamp(28px, 3vw, 42px);
        border: 1px solid rgb(123 229 183 / 48%);
        border-radius: 14px;
        background:
          linear-gradient(145deg, rgb(241 246 243 / 3%), transparent 42%),
          rgb(10 23 18 / 76%);
        box-shadow:
          inset 0 0 28px rgb(93 214 162 / 4%),
          0 22px 52px rgb(0 0 0 / 20%);
        text-align: center;
      }

      .contact-section .contact-card::before {
        position: absolute;
        inset: 12px;
        border: 1px solid rgb(203 183 122 / 5%);
        border-radius: 9px;
        content: "";
        pointer-events: none;
      }

      .contact-section .contact-name {
        margin: 0;
        color: var(--color-heading);
        font-family: "Songti SC", SimSun, serif;
        font-size: clamp(25px, 2.2vw, 34px);
        font-weight: 400;
        letter-spacing: 0.07em;
      }

      .contact-section .contact-name span {
        margin-left: 10px;
        color: var(--color-primary-hover);
        font-family: "Times New Roman", Times, serif;
        font-size: 0.82em;
        letter-spacing: 0.025em;
      }

      .contact-section .contact-role {
        margin: 13px 0 0;
        color: rgb(180 194 187 / 82%);
        font-family: "Songti SC", SimSun, serif;
        font-size: 14px;
        letter-spacing: 0.055em;
        line-height: 1.7;
      }

      .contact-section .contact-role em {
        color: var(--color-award);
        font-style: normal;
      }

      .contact-section .card-divider {
        position: relative;
        height: 1px;
        margin: 24px 0 29px;
        background: linear-gradient(90deg, transparent, rgb(203 183 122 / 35%) 15%, rgb(203 183 122 / 35%) 85%, transparent);
      }

      .contact-section .card-divider::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7px;
        height: 7px;
        border: 1px solid var(--color-award);
        background: var(--color-bg-alt);
        content: "";
        transform: translate(-50%, -50%) rotate(45deg);
      }

      .contact-section .wechat-label {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin: 0 0 18px;
        color: var(--color-primary-hover);
        font-family: "Times New Roman", Times, serif;
        font-size: 18px;
        letter-spacing: 0.12em;
      }

      .contact-section .wechat-label::before,
.contact-section .wechat-label::after {
        width: 56px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgb(93 214 162 / 38%));
        content: "";
      }

      .contact-section .wechat-label::after {
        transform: rotate(180deg);
      }

      .contact-section .qr-frame {
        position: relative;
        width: min(100%, 282px);
        aspect-ratio: 1;
        margin: 0 auto;
        padding: 9px;
        border: 1px solid rgb(93 214 162 / 55%);
        background: #fff;
        box-shadow: 0 0 22px rgb(93 214 162 / 10%);
      }

      .contact-section .qr-frame::before,
.contact-section .qr-frame::after {
        position: absolute;
        z-index: 3;
        width: 32px;
        height: 32px;
        border-color: var(--color-primary-hover);
        content: "";
        filter: drop-shadow(0 0 6px rgb(93 214 162 / 42%));
        pointer-events: none;
      }

      .contact-section .qr-frame::before {
        top: -3px;
        left: -3px;
        border-top: 3px solid;
        border-left: 3px solid;
      }

      .contact-section .qr-frame::after {
        right: -3px;
        bottom: -3px;
        border-right: 3px solid;
        border-bottom: 3px solid;
      }

      .contact-section .qr-scan {
        position: absolute;
        z-index: 4;
        top: -2px;
        left: 9%;
        width: 27%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-primary-hover), transparent);
        box-shadow: 0 0 10px rgb(93 214 162 / 50%);
        animation: contact-border-scan 5.8s linear infinite;
        pointer-events: none;
      }

      @keyframes contact-border-scan {
        0% { left: 4%; opacity: 0; }
        8% { opacity: 1; }
        42% { left: 69%; opacity: 1; }
        50%, 100% { left: 69%; opacity: 0; }
      }

      .contact-section .qr-crop {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #fff;
      }

      .contact-section .qr-image {
        position: absolute;
        top: -69.5%;
        left: -23.8%;
        width: 147.7%;
        max-width: none;
        height: auto;
      }

      .contact-section .wechat-title {
        margin: 20px 0 0;
        color: var(--color-heading);
        font-family: "Songti SC", SimSun, serif;
        font-size: 17px;
        letter-spacing: 0.09em;
      }

      .contact-section .wechat-note {
        margin: 8px 0 0;
        color: var(--color-muted);
        font-size: 14px;
        letter-spacing: 0.08em;
      }

      .contact-section .contact-footer {
        position: relative;
        grid-column: 1 / -1;
        align-self: end;
        padding-top: 40px;
        text-align: center;
      }

      .contact-section .contact-footer::before {
        display: block;
        width: 100%;
        height: 1px;
        margin-bottom: 30px;
        background: linear-gradient(90deg, rgb(203 183 122 / 34%) 0 48%, transparent 48% 52%, rgb(203 183 122 / 34%) 52% 100%);
        content: "";
      }

      .contact-section .footer-mark {
        position: absolute;
        top: 36px;
        left: 50%;
        width: 10px;
        height: 10px;
        background: var(--color-primary-hover);
        box-shadow: 0 0 12px rgb(93 214 162 / 42%);
        transform: translateX(-50%) rotate(45deg) scale(0.55);
      }

      .contact-section .brand-phrase {
        margin: 0;
        color: var(--color-primary-hover);
        font-family: "Times New Roman", Times, serif;
        font-size: clamp(18px, 1.8vw, 25px);
        font-style: italic;
        letter-spacing: 0.035em;
      }

      .contact-section .copyright {
        margin: 13px 0 0;
        color: rgb(180 194 187 / 55%);
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        letter-spacing: 0.08em;
      }

      .contact-section .sr-live {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 10;
        padding: 10px 15px;
        border: 1px solid rgb(93 214 162 / 48%);
        border-radius: 4px;
        color: var(--color-heading);
        background: rgb(10 23 18 / 94%);
        box-shadow: 0 12px 34px rgb(0 0 0 / 34%);
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px);
        transition: opacity 300ms ease, transform 300ms ease;
      }

      .contact-section .sr-live.is-shown {
        opacity: 1;
        transform: translateY(0);
      }

      @media (max-width: 980px) {
        .contact-section .contact-shell {
          grid-template-columns: 1fr;
          min-height: auto;
          padding-top: 62px;
        }

        .contact-section .left-panel {
          padding-bottom: 0;
        }

        .contact-section .portrait-reveal,
.contact-section .cursor-glow,
.contact-section .left-panel::after {
          display: none;
        }

        .contact-section .contact-headline {
          max-width: 760px;
        }

        .contact-section .contact-intro {
          max-width: 720px;
        }

        .contact-section .contact-scenes {
          max-width: 560px;
        }

        .contact-section .contact-card-wrap {
          margin-top: 10px;
        }

        .contact-section .contact-card {
          width: min(100%, 520px);
        }
      }

      @media (max-width: 620px) {
        .contact-section,
.contact-section .contact-shell {
          min-height: 100svh;
        }

        .contact-section .contact-shell {
          gap: 34px;
          padding-top: 40px;
          padding-bottom: 28px;
        }

        .contact-section .section-kicker {
          flex-wrap: wrap;
          row-gap: 8px;
          margin-bottom: 31px;
        }

        .contact-section .section-cn {
          width: 100%;
          padding-left: 48px;
          font-size: 14px;
        }

        .contact-section .contact-headline {
          max-width: 100%;
          font-size: clamp(36px, 9.5vw, 44px);
        }

        .contact-section .contact-intro {
          margin-top: 15px;
          font-size: 14px;
        }

        .contact-section .contact-scenes {
          gap: 13px;
          margin-top: 34px;
        }

        .contact-section .contact-scene {
          grid-template-columns: 25px 49px 1fr;
        }

        .contact-section .scene-node {
          width: 20px;
          height: 20px;
        }

        .contact-section .scene-node::after {
          inset: 7px;
        }

        .contact-section .scene-line {
          width: 41px;
        }

        .contact-section .scene-text {
          font-size: 16px;
        }

        .contact-section .email-area {
          display: grid;
          grid-template-columns: 1fr;
          margin-top: 34px;
        }

        .contact-section .email-link {
          width: 100%;
        }

        .contact-section .email-copy {
          justify-self: start;
        }

        .contact-section .contact-card {
          padding: 29px 24px 31px;
        }

        .contact-section .contact-role {
          font-size: 13px;
        }

        .contact-section .qr-frame {
          width: min(100%, 248px);
        }

        .contact-section .contact-footer {
          padding-top: 24px;
        }

        .contact-section .footer-mark {
          top: 20px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .contact-section,
.contact-section *,
.contact-section::before,
.contact-section *::before,
.contact-section::after,
.contact-section *::after {
          scroll-behavior: auto !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          transition-delay: 0ms !important;
        }

        .contact-section .meteor-canvas,
.contact-section .portrait-reveal,
.contact-section .cursor-glow,
.contact-section .qr-scan {
          display: none;
        }

        .contact-section .contact-scene,
.contact-section .contact-card-wrap {
          opacity: 1 !important;
          transform: none !important;
        }
      }
/* Single-page integration */
.experience-section .timeline-track,
.experience-section .timeline-progress { left: 22px; }
.experience-section .timeline-track { right: calc(20% - 22px); }

@media (max-width: 720px) {
  .experience-section .timeline-track,
  .experience-section .timeline-progress {
    left: 18px;
  }

  .experience-section .timeline-track {
    right: calc(20% - 18px);
  }
}

@media (max-width: 620px) {
  .contact-section .contact-card {
    padding-right: 16px;
    padding-left: 16px;
  }

  .contact-section .qr-frame {
    width: min(100%, 280px);
  }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* V2 section-to-section scroll transition */
.section-transition {
  --transition-progress: 0;
  position: relative;
  z-index: 18;
  width: 100%;
  height: 0;
  pointer-events: none;
}

.section-transition .transition-line,
.section-transition .transition-glint,
.section-transition .transition-diamond {
  position: absolute;
  top: 0;
  left: 50%;
}

.section-transition .transition-line {
  width: min(88vw, 1380px);
  height: 1px;
  opacity: var(--transition-opacity, 0.18);
  background: linear-gradient(
    90deg,
    transparent,
    rgb(93 214 162 / 32%) 18%,
    rgb(203 183 122 / 36%) 50%,
    rgb(93 214 162 / 32%) 82%,
    transparent
  );
  transform: translate(-50%, -50%) scaleX(var(--transition-scale, 0.16));
  transform-origin: center;
}

.section-transition .transition-glint {
  left: var(--transition-glint-x, 14%);
  width: 88px;
  height: 2px;
  opacity: var(--transition-progress, 0);
  background: linear-gradient(90deg, transparent, rgb(241 246 243 / 78%), transparent);
  box-shadow: 0 0 14px rgb(93 214 162 / 26%);
  transform: translate(-50%, -50%);
}

.section-transition .transition-diamond {
  width: 11px;
  height: 11px;
  border: 1px solid rgb(123 229 183 / 72%);
  background: var(--color-bg-alt);
  box-shadow: 0 0 14px rgb(93 214 162 / 24%);
  opacity: var(--transition-diamond-opacity, 0.5);
  transform: translate(-50%, -50%) rotate(45deg) scale(var(--transition-diamond-scale, 0.62));
}

.js .hero .site-header,
.js .hero .hero-content,
.js .about-section .about-shell,
.js .experience-section .experience-shell,
.js .research-section .research-shell,
.js .contact-section .contact-shell {
  opacity: var(--section-opacity, 1);
  translate: 0 var(--section-shift, 0px);
  transition: none;
}

.js .about-section .section-kicker,
.js .about-section .about-headline,
.js .experience-section .section-kicker,
.js .experience-section .experience-headline,
.js .research-section .research-shell > header,
.js .contact-section .left-panel > header {
  filter: blur(var(--section-blur, 0px));
}

.hero .starfield-canvas,
.hero .meteor-canvas,
.hero .wolf-stage,
.hero .photo-stage,
.about-section .starfield-canvas,
.about-section .meteor-canvas,
.experience-section .star-canvas,
.experience-section .meteor-canvas,
.research-section .star-canvas,
.research-section .meteor-canvas,
.contact-section .star-canvas,
.contact-section .meteor-canvas {
  opacity: var(--section-decor-opacity, 1);
}

/* V2 contact closing statement */
.contact-section .contact-signature {
  --write-distance: 300px;
  --principles-letter-spacing: 0.2em;
  --principles-start-spacing: 0.34em;
  position: relative;
  width: min(100%, 500px);
  height: 118px;
  margin-top: clamp(52px, 6.4vw, 88px);
  overflow: hidden;
}

.contact-section .signature-welcome,
.contact-section .signature-principles {
  position: absolute;
  inset: 0 auto auto 0;
  margin: 0;
}

.contact-section .signature-welcome {
  top: 0;
  width: min(100%, 390px);
  height: 104px;
  color: var(--color-heading);
  opacity: 0;
  filter: blur(0);
}

.contact-section .welcome-word {
  display: block;
  width: max-content;
  padding: 0 12px 8px 2px;
  overflow: hidden;
  color: var(--color-heading);
  font-family: "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive;
  font-size: clamp(64px, 5.7vw, 82px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.055em;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  text-shadow: 0 0 18px rgb(241 246 243 / 8%);
}

.contact-section .signature-pen {
  position: absolute;
  top: 58px;
  left: 0;
  width: 17px;
  height: 25px;
  border: 1px solid rgb(241 246 243 / 82%);
  background: linear-gradient(135deg, rgb(241 246 243 / 88%), rgb(120 138 129 / 32%));
  clip-path: polygon(50% 0, 100% 64%, 50% 100%, 0 64%);
  opacity: 0;
  transform: translateX(0) rotate(42deg);
  transform-origin: 50% 86%;
  filter: drop-shadow(0 0 6px rgb(241 246 243 / 16%));
}

.contact-section .signature-pen::before {
  position: absolute;
  top: 9px;
  left: 7px;
  width: 3px;
  height: 3px;
  border: 1px solid var(--color-bg-alt);
  border-radius: 50%;
  content: "";
}

.contact-section .signature-pen::after {
  position: absolute;
  top: 13px;
  left: 8px;
  width: 1px;
  height: 9px;
  background: var(--color-bg-alt);
  content: "";
}

.contact-section .signature-principles {
  top: 40px;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  color: rgb(241 246 243 / 82%);
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(15px, 1.25vw, 18px);
  letter-spacing: var(--principles-letter-spacing);
  line-height: 1.5;
  white-space: nowrap;
}

.contact-section .signature-principles i {
  color: var(--color-award);
  font-style: normal;
}

.js .contact-section .signature-principles {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(5px);
}

.contact-section.is-visible .signature-welcome {
  animation: contact-welcome-layer 2.45s var(--ease-smooth) 180ms both;
}

.contact-section.is-visible .welcome-word {
  animation: contact-welcome-write 1.5s cubic-bezier(0.2, 0.72, 0.3, 1) 250ms both;
}

.contact-section.is-visible .signature-pen {
  animation: contact-pen-write 1.5s cubic-bezier(0.2, 0.72, 0.3, 1) 250ms both;
}

.contact-section.is-visible .signature-principles {
  animation: contact-principles-reveal 820ms var(--ease-smooth) 2.62s both;
}

@keyframes contact-welcome-write {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes contact-pen-write {
  0% { opacity: 0; transform: translateX(0) rotate(42deg); }
  5%, 90% { opacity: 0.92; }
  100% { opacity: 0; transform: translateX(var(--write-distance)) rotate(42deg); }
}

@keyframes contact-welcome-layer {
  0%, 6% { opacity: 0; filter: blur(0); }
  12%, 78% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(3px); }
}

@keyframes contact-principles-reveal {
  from {
    opacity: 0;
    filter: blur(5px);
    letter-spacing: var(--principles-start-spacing);
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    letter-spacing: var(--principles-letter-spacing);
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .contact-section .contact-signature { margin-top: 52px; }
}

@media (max-width: 620px) {
  .section-transition .transition-line { width: 86vw; }
  .section-transition .transition-glint { width: 56px; }

  .contact-section .contact-signature {
    --write-distance: 218px;
    --principles-letter-spacing: 0.12em;
    --principles-start-spacing: 0.2em;
    height: 96px;
    margin-top: 40px;
  }

  .contact-section .signature-welcome { height: 86px; }
  .contact-section .welcome-word { font-size: clamp(46px, 14vw, 54px); }

  .contact-section .signature-pen {
    top: 39px;
    width: 14px;
    height: 21px;
  }

  .contact-section .signature-principles {
    top: 31px;
    gap: 8px;
    font-size: clamp(11px, 3.4vw, 14px);
    letter-spacing: 0.12em;
  }

  .contact-section.is-visible .signature-principles { animation-delay: 2.35s; }
}

@media (prefers-reduced-motion: reduce) {
  .section-transition { --transition-progress: 1 !important; }
  .section-transition .transition-glint { display: none; }

  .js .hero .site-header,
  .js .hero .hero-content,
  .js .about-section .about-shell,
  .js .experience-section .experience-shell,
  .js .research-section .research-shell,
  .js .contact-section .contact-shell {
    opacity: 1 !important;
    translate: none !important;
  }

  .js .about-section .section-kicker,
  .js .about-section .about-headline,
  .js .experience-section .section-kicker,
  .js .experience-section .experience-headline,
  .js .research-section .research-shell > header,
  .js .contact-section .left-panel > header {
    filter: none !important;
  }

  .contact-section .signature-welcome { display: none !important; }

  .contact-section .signature-principles {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}