/* ============================================================================
   暖白版 · 「GLASS」——银白光场上的玻璃板（2026-08-23）
   ----------------------------------------------------------------------------
   四条自我约束（改之前读一遍）：
   1. 整站只有一种材质：玻璃。背景的光（#lumen）透过玻璃被 backdrop-filter 吸进来，
      所以"流动感"不是每块卡各自动画出来的，是同一片光在所有玻璃后面流。
      别给卡片加各自的渐变动画，那会把一块光变成几十块互不相干的光。
   2. 3D 只用 CSS transform（每块板自带 perspective，**不用 preserve-3d**——
      它和 backdrop-filter 在 Chrome 里不兼容，会把玻璃打回纯色）。
   3. 字：汉字 Noto Sans SC（巨字 800 / 标题 700 / 正文 400），拉丁与数字 Space Grotesk，
      编辑感副题 Instrument Serif 斜体，技术微标 JetBrains Mono。四族靠 unicode-range 分工。
   4. 颜色只有三种：墨、银、一抹钴蓝。"彩色"全部来自玻璃边缘的薄膜干涉（.plate-edge），
      而且只在边缘——面上一旦有颜色就是肥皂泡。
   ========================================================================== */

:root {
  --bg: #E9ECF1;
  --bg-hi: #F7F8FA;
  --bg-lo: #D6DBE4;
  --ink: #0B0E14;
  --ink-2: #454B57;
  --ink-3: #7B828E;
  --line: rgba(11, 14, 20, .08);
  --line-2: rgba(11, 14, 20, .16);
  --acc: #2347E5;
  --acc-10: rgba(35, 71, 229, .10);
  --acc-18: rgba(35, 71, 229, .18);

  --glass-a: rgba(255, 255, 255, .52);
  --glass-b: rgba(255, 255, 255, .20);
  --glass-c: rgba(255, 255, 255, .36);

  --sans: 'Space Grotesk', 'Noto Sans SC', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --serif: 'Instrument Serif', 'Noto Sans SC', Georgia, serif;
  --mono: 'JetBrains Mono', 'Noto Sans SC', ui-monospace, SFMono-Regular, Consolas, monospace;

  --fs-body: 17px;
  --fs-sm: 15px;
  --fs-micro: 12px;

  --gutter: clamp(20px, 4vw, 72px);
  --maxw: 1440px;
  --r: 22px;
  --r-sm: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.22, 1.2, .36, 1);

  --sh-1: 0 1px 2px rgba(11, 14, 20, .05), 0 10px 24px -14px rgba(11, 14, 20, .18);
  --sh-2: 0 1px 2px rgba(11, 14, 20, .06), 0 24px 60px -28px rgba(11, 14, 20, .32);
  --sh-3: 0 2px 4px rgba(11, 14, 20, .06), 0 50px 110px -40px rgba(11, 14, 20, .42);

  --fab-w: clamp(72px, 6.1vw, 88px);
  --fab-h: clamp(109px, 9.2vw, 132px);

  /* 光标 → 玻璃高光角度 / 位置，lumen.js 写，全站玻璃读 */
  --lx: 50%;
  --ly: 30%;
  --ang: 210deg;
}

/* ============================================================================
   基底
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.65;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* 静态兜底：#lumen 挂了（无 WebGL / reduced-motion）时靠它撑住银白 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 10% 0%, #FAFBFC 0%, rgba(250, 251, 252, 0) 60%),
    radial-gradient(80% 70% at 95% 20%, #DEE3EC 0%, rgba(222, 227, 236, 0) 55%),
    radial-gradient(70% 60% at 50% 100%, #D4DAE4 0%, rgba(212, 218, 228, 0) 60%),
    linear-gradient(180deg, #EEF0F4 0%, #E6E9EF 100%);
}
#lumen { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
#ribbon-front { position: fixed; inset: 0; z-index: 8; width: 100%; height: 100%; display: block; pointer-events: none; }
html[data-lumen="off"] #lumen, html[data-lumen="off"] #ribbon-front { display: none; }

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
b { font-weight: 700; }
s { text-decoration: none; }
::selection { background: var(--acc); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }

/* ============================================================================
   玻璃材质
   ========================================================================== */
.glass {
  position: relative; border-radius: var(--r); isolation: isolate;
  background:
    radial-gradient(140% 90% at var(--lx) var(--ly), rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, var(--glass-a) 0%, var(--glass-b) 55%, var(--glass-c) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(1.5) brightness(1.04);
  backdrop-filter: blur(28px) saturate(1.5) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(11, 14, 20, .04),
    var(--sh-2);
}
/* 1px 渐变描边：左上亮、右下暗——光源约定在左上，整站统一 */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(145deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 35%, rgba(11, 14, 20, .06) 70%, rgba(11, 14, 20, .12) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* 薄膜干涉：只在边缘 1px，角度跟光标走（--ang）。面上不许有颜色。 */
.plate-edge {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 4;
  background: conic-gradient(from var(--ang),
    rgba(255, 150, 170, 0) 0deg, rgba(255, 196, 130, .75) 40deg, rgba(170, 235, 205, .8) 90deg,
    rgba(150, 190, 255, .85) 140deg, rgba(225, 170, 255, .7) 190deg, rgba(255, 150, 170, 0) 240deg,
    rgba(255, 150, 170, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .95;
}
/* 高光带：一条斜着的白，位置由 --gx 决定（光标 / 进场扫光都用它） */
.plate-gloss {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; overflow: hidden;
}
.plate-gloss::before {
  content: ""; position: absolute; inset: -40%;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .62) 48%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(var(--gx, -60%));
  opacity: .9;
}

/* ============================================================================
   导航药丸
   ========================================================================== */
#nav {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center;
  pointer-events: none; opacity: 0; transform: translateY(-14px);
  transition: opacity .4s, transform .5s var(--ease);
}
#nav.show { opacity: 1; transform: none; pointer-events: auto; }
.nav-pill {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 16px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .46));
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(11, 14, 20, .06), 0 16px 40px -20px rgba(11, 14, 20, .35);
  border: 1px solid rgba(255, 255, 255, .6);
}
.nav-name { font-weight: 700; font-size: 16px; letter-spacing: .02em; margin-right: 10px; }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  font-size: 14px; padding: 7px 12px; border-radius: 999px; color: var(--ink-2);
  transition: background .25s, color .25s;
}
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.nav-links a.on { color: #fff; background: var(--ink); }
.nav-no { font-family: var(--mono); font-size: 11px; margin-right: 6px; opacity: .6; }
.nav-pdf {
  font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 999px; margin-left: 4px;
  background: var(--acc); color: #fff; transition: transform .3s var(--spring), box-shadow .3s;
  box-shadow: 0 8px 18px -10px rgba(35, 71, 229, .7);
}
.nav-pdf:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(35, 71, 229, .8); }
.nav-pdf em { font-style: normal; margin-left: 5px; opacity: .8; }

/* ============================================================================
   首屏：三块玻璃板
   ========================================================================== */
.hero { position: relative; height: 160vh; z-index: 1; }
.hero-stick {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto;
  padding-top: 26px; padding-bottom: clamp(18px, 2.4vh, 28px);
}

.hero-top { display: flex; justify-content: space-between; align-items: flex-start; }
.hero-id { display: flex; flex-direction: column; gap: 6px; }
.hero-name { font-weight: 800; font-size: clamp(20px, 1.7vw, 24px); letter-spacing: .06em; line-height: 1; }
.hero-meta { display: flex; gap: 18px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .1em; color: var(--ink-3); padding-top: 4px; }
.hero-meta a { color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .25s; }
.hero-meta a:hover { border-color: var(--ink); }

/* 板子的舞台：一个相对定位的盒子，板子按百分比落位，JS 只改 transform */
.plates { position: relative; margin-top: clamp(14px, 2.6vh, 30px); }
.plate {
  position: absolute; display: block; border-radius: var(--r); isolation: isolate;
  background:
    radial-gradient(120% 80% at var(--lx) var(--ly), rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, rgba(255, 255, 255, .50) 0%, rgba(255, 255, 255, .16) 55%, rgba(255, 255, 255, .34) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(1.5) brightness(1.04); backdrop-filter: blur(30px) saturate(1.5) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(11, 14, 20, .05),
    0 2px 4px rgba(11, 14, 20, .05), 0 40px 90px -36px rgba(11, 14, 20, .45);
  transform-origin: 50% 50%;
  /* 每块板自带透视。--rx/--ry/--tx/--ty/--tz/--sc 由 hero.js 写 */
  transform: perspective(1400px) translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, 0px))
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  will-change: transform;
  color: var(--ink);
}
.plate::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .4) 35%, rgba(11, 14, 20, .06) 70%, rgba(11, 14, 20, .14) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* 厚度：一层背面，斜着看时露出一条边 */
.plate::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  transform: translateZ(-14px) translate(var(--ex, 3px), var(--ey, 6px));
  background: linear-gradient(135deg, rgba(11, 14, 20, .10), rgba(11, 14, 20, .03));
  filter: blur(.5px);
}
.plate-body { position: relative; z-index: 1; padding: clamp(20px, 2.2vw, 32px) clamp(22px, 2.4vw, 36px) clamp(22px, 2.2vw, 32px); }
.plate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: clamp(10px, 1.6vh, 22px); }
.plate-no { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .14em; color: var(--ink-2); }
.plate-no::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--ink-2); vertical-align: middle; margin-right: 8px; }
.plate-en { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.35vw, 20px); color: var(--ink-2); letter-spacing: .01em; }
.plate-title {
  font-family: var(--sans); font-weight: 800; line-height: 1.02; letter-spacing: -.045em;
  font-size: var(--plate-fs, clamp(52px, 6.9vw, 104px)); white-space: nowrap;
  margin-left: -.03em;
}
.plate-note { margin-top: clamp(10px, 1.6vh, 20px); font-size: clamp(13px, 1.02vw, 15px); line-height: 1.7; color: var(--ink-2); }
.plate-1 { left: 0; top: 0; width: 40.5%; z-index: 1; }
.plate-2 { left: 36.5%; top: 21%; width: 49%; z-index: 3; }
.plate-3 { left: 58.5%; top: 58%; width: 37%; z-index: 2; }
.plate-3 .plate-title, .plate-1 .plate-title { --plate-fs: clamp(46px, 5.9vw, 90px); }
.plate-2 .plate-title { --plate-fs: clamp(60px, 8.1vw, 124px); }
.plate-2 .plate-note { max-width: 28em; }

/* 玻璃后面的序号：只有描边，对比压到刚好看得见。跟着光标做最慢一层的视差（hero.js 写 --gx/--gy） */
.ghost-no {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--sans); font-weight: 700; line-height: .8; letter-spacing: -.07em;
  font-size: clamp(200px, 24vw, 360px); color: transparent;
  -webkit-text-stroke: 1.5px rgba(11, 14, 20, .12);
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
  will-change: transform;
}
.ghost-1 { left: -1.5%; top: 24%; }
.ghost-2 { left: 63%; top: -9%; }
.ghost-3 { left: 40%; top: 56%; }
html[data-motion="on"] .ghost-no { opacity: 0; transition: opacity 1.4s .6s; }
html[data-motion="on"] .hero.in .ghost-no { opacity: 1; }

.plate:hover { color: var(--ink); }
.plate .plate-gloss::before { transition: transform .9s var(--ease); }

/* 进场：板子从景深里飞出来落位 */
html[data-motion="on"] .plate { opacity: 0; }
html[data-motion="on"] .hero.in .plate { animation: plate-in 1.25s var(--ease) both; animation-delay: var(--d, 0s); }
html[data-motion="on"] .hero.in .plate.set { animation: none; opacity: 1; }
.plate-1 { --d: .05s; } .plate-2 { --d: .18s; } .plate-3 { --d: .31s; }
@keyframes plate-in {
  0%   { opacity: 0; transform: perspective(1400px) translate3d(var(--tx, 0px), calc(var(--ty, 0px) + 70px), -520px) rotateX(14deg) rotateY(var(--ry, 0deg)) scale(.96); }
  100% { opacity: 1; transform: perspective(1400px) translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); }
}
html[data-motion="on"] .hero-top, html[data-motion="on"] .hero-foot { opacity: 0; transform: translateY(10px); transition: opacity .8s .5s, transform .9s .5s var(--ease); }
html[data-motion="on"] .hero.in .hero-top, html[data-motion="on"] .hero.in .hero-foot { opacity: 1; transform: none; }

.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.hero-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; font-size: clamp(14px, 1.1vw, 16px); color: var(--ink-2); }
.hero-line b { font-weight: 500; color: var(--ink); }
.hero-line s { color: var(--ink-3); }
.scroll-cue { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .14em; color: var(--ink-3); }
.scroll-cue i { width: 44px; height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateX(-100%); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
html[data-motion="off"] .scroll-cue i::after { animation: none; }

/* ============================================================================
   章节骨架
   ========================================================================== */
.sec { position: relative; z-index: 2; padding: clamp(80px, 11vh, 140px) 0; }
.sec-edu { margin-top: -58vh; padding-top: 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vh, 48px); }
.sec-no { display: flex; align-items: baseline; gap: 14px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .16em; color: var(--ink-3); margin-bottom: 10px; }
.sec-no span::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--ink-3); vertical-align: middle; margin-right: 10px; }
.sec-no em { font-family: var(--serif); font-style: italic; font-size: 19px; letter-spacing: 0; color: var(--ink-2); }
.sec-h { font-weight: 800; font-size: clamp(44px, 5.6vw, 82px); letter-spacing: -.045em; line-height: 1; margin-left: -.03em; }
.sec-meta { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em; color: var(--ink-3); padding-bottom: 10px; white-space: nowrap; }
.sec-sub { margin-top: clamp(64px, 9vh, 120px); margin-bottom: clamp(20px, 3vh, 34px); }
.sec-h3 { font-weight: 800; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.035em; line-height: 1.05; }
.lead { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.6; color: var(--ink-2); max-width: 58ch; letter-spacing: -.005em; margin-bottom: clamp(40px, 6vh, 80px); }

/* 进场显影 */
[data-rise] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--d, 0s), transform 1.1s var(--d, 0s) var(--ease); }
[data-rise].in { opacity: 1; transform: none; }
[data-rise][data-tilt] { transform: perspective(1400px) rotateX(7deg) translateY(40px); transform-origin: 50% 100%; }
[data-rise][data-tilt].in { transform: perspective(1400px) rotateX(0) translateY(0); }
html[data-motion="off"] [data-rise] { opacity: 1; transform: none; transition: none; }

/* ============================================================================
   01 教育背景：一张大玻璃板，两行学校 + 三格技能
   ========================================================================== */
.edu-sheet { padding: clamp(8px, 1vw, 14px) clamp(22px, 2.8vw, 44px) clamp(26px, 3vw, 44px); }
.edu-row {
  position: relative; z-index: 1; display: grid; grid-template-columns: 150px 1.4fr 1fr 1.2fr; align-items: center; gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(26px, 3.2vh, 40px) 0; border-bottom: 1px solid var(--line);
}
.edu-when { display: flex; gap: 8px; align-items: baseline; font-size: 20px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.edu-when s { color: var(--ink-3); }
.edu-main h3 { font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.03em; line-height: 1.15; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.edu-major { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-sm); }
.badges { display: inline-flex; gap: 6px; }
.badges b { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; background: var(--ink); color: #fff; }
.badges b + b { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.edu-gpa { display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: baseline; justify-content: start; }
.edu-gpa b { grid-row: 1; grid-column: 1; font-size: clamp(34px, 3vw, 44px); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.edu-gpa s { grid-row: 1; grid-column: 2; color: var(--ink-3); font-size: var(--fs-sm); }
.edu-gpa em { grid-row: 2; grid-column: 1 / span 2; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); margin-top: 8px; }
.edu-honor { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; }

.skills { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr 1.6fr 1fr; gap: clamp(18px, 2.4vw, 40px); padding-top: clamp(26px, 3.2vh, 40px); }
.cell-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 12px; text-transform: uppercase; }
.cell-label em { font-family: var(--serif); font-style: italic; text-transform: none; font-size: 15px; letter-spacing: 0; color: var(--ink-2); margin-left: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips span {
  font-size: 13.5px; line-height: 1; padding: 8px 12px; border-radius: 999px; color: var(--ink);
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 1px 2px rgba(11, 14, 20, .04);
  transition: background .25s, transform .3s var(--spring);
}
.chips span:hover { background: #fff; transform: translateY(-1px); }

/* ============================================================================
   02 AI 作品：左文右台
   ========================================================================== */
.works { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.works-text { display: flex; flex-direction: column; }
.work { padding: clamp(34px, 6vh, 72px) 0; border-top: 1px solid var(--line); }
.work:first-child { border-top: 0; padding-top: 0; }
.work-kick { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em; }
.work-kick b { font-weight: 500; color: var(--ink); }
.work-kick span { color: var(--ink-3); }
.work h3 { font-weight: 700; font-size: clamp(26px, 2.5vw, 38px); letter-spacing: -.035em; line-height: 1.15; }
.claim { margin-top: 12px; font-size: clamp(17px, 1.3vw, 20px); font-weight: 500; letter-spacing: -.01em; line-height: 1.5; }
.desc { margin-top: 14px; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.75; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.stat {
  padding: 14px 16px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 1px 0 #fff, 0 1px 2px rgba(11, 14, 20, .04);
}
.stat b { display: block; font-size: clamp(20px, 1.7vw, 26px); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat i { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); margin-top: 6px; letter-spacing: .02em; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.tags span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; padding: 6px 10px; border-radius: 7px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.work-media-inline { display: none; margin-top: 24px; }

.works-pin { position: sticky; top: clamp(72px, 9vh, 96px); }
.works-stage { padding: 0; overflow: hidden; transform: perspective(1600px) rotateX(var(--srx, 0deg)) rotateY(var(--sry, 0deg)); transition: transform .6s var(--ease); }
.stage-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(11, 14, 20, .07); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }
.stage-dots { display: inline-flex; gap: 5px; }
.stage-dots s { width: 8px; height: 8px; border-radius: 50%; background: rgba(11, 14, 20, .14); }
.stage-name { flex: 1; }
.stage-idx b { color: var(--ink); font-weight: 500; }
.stage-body { position: relative; z-index: 1; min-height: 340px; }
.stage-item { position: absolute; inset: 0; padding: 14px; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .55s, transform .7s var(--ease); pointer-events: none; }
.stage-item.on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.vid-box { position: relative; aspect-ratio: var(--vr, 16/9); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(11, 14, 20, .08), 0 0 0 1px rgba(11, 14, 20, .06); }
.vid-box video { width: 100%; height: 100%; object-fit: contain; background: #fff; }
/* 量化交互图（quant-chart.js 画 SVG + 表；配色是数据图自己的体系，别当站内 token 用） */
#quant-chart { min-height: 300px; width: 100%; position: relative; }
.q-plot { position: relative; }
.q-fallback { display: block; width: 100%; height: auto; }
.q-tip { position: absolute; z-index: 2; pointer-events: none; background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .9); border-radius: 10px;
  box-shadow: var(--sh-2); padding: 7px 10px 8px; font: 400 12px/1.7 var(--mono); color: var(--ink); white-space: nowrap; }
.q-tip b { display: block; font-weight: 500; margin-bottom: 3px; }
.q-tip span { display: flex; align-items: baseline; gap: 6px; }
.q-tip span i { flex: none; width: 8px; height: 3px; align-self: center; }
.q-tip span em { font-style: normal; margin-left: auto; padding-left: 12px; }
.q-tablewrap { margin-top: 10px; overflow-x: auto; }
.q-table { width: 100%; border-collapse: collapse; }
.q-table th { font: 400 var(--fs-micro)/1.3 var(--mono); color: var(--ink-3); text-align: right; padding: 6px 8px;
  border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.q-table td { font: 400 13px/1.3 var(--mono); color: var(--ink); text-align: right; padding: 9px 8px;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.q-table .q-name { text-align: left; }
.q-name i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 2px; }
.q-name i.q-off { background: none; border: 1px solid var(--line-2); }
.q-name b { font: 500 var(--fs-sm)/1.3 var(--sans); }
.q-hl td { background: var(--acc-10); }
.q-table td.q-shl { color: #B4321C; font-weight: 700; }
/* 紧凑档跟卡片实际宽度走（quant-chart.js 在卡宽 <480 时打 .q-narrow） */
.q-narrow .q-table th, .q-narrow .q-table td { padding: 6px 3px; font-size: 11px; }
.q-narrow .q-name b { font-size: 12px; }
.q-narrow .q-name i { margin-right: 4px; }
.q-narrow .q-table th:nth-child(4), .q-narrow .q-table td:nth-child(4) { display: none; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duo figure { margin: 0; }
.duo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px rgba(11, 14, 20, .06); }
.duo figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); margin-top: 8px; }

/* 其他三件 */
.minors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.minor { overflow: hidden; display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s; }
.minor:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), var(--sh-3); }
.minor-media { position: relative; z-index: 1; aspect-ratio: 16/9; overflow: hidden; background: #fff; margin: 10px 10px 0; border-radius: 12px; box-shadow: 0 0 0 1px rgba(11, 14, 20, .06); }
.minor-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .9s var(--ease); }
.minor:hover .minor-media img { transform: scale(1.03); }
.minor-in { position: relative; z-index: 1; padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.minor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.minor h4 { font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.minor-link { font-family: var(--mono); font-size: 11px; color: var(--acc); letter-spacing: .06em; white-space: nowrap; }
.minor p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.7; flex: 1; }
.minor .tags { margin-top: 14px; }

/* 彩蛋：整页唯一的深色块 */
.egg { display: block; margin-top: clamp(24px, 3vh, 34px); border-radius: var(--r); overflow: hidden; position: relative; color: #F2F4F8;
  background: linear-gradient(120deg, #0F1219 0%, #161B25 60%, #0F1219 100%); box-shadow: var(--sh-3);
  transition: transform .5s var(--ease); }
.egg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 120% at var(--lx) 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%); pointer-events: none; }
.egg:hover { transform: translateY(-3px); }
.egg-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px); position: relative; }
.egg-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: rgba(242, 244, 248, .55); margin-bottom: 10px; }
.egg-label em { font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: 0; margin-left: 8px; color: rgba(242, 244, 248, .75); }
.egg-title { font-weight: 800; font-size: clamp(22px, 2.4vw, 34px); letter-spacing: -.035em; line-height: 1.15; }
.egg p { margin-top: 10px; color: rgba(242, 244, 248, .62); font-size: var(--fs-sm); }
.egg-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex-shrink: 0; }
.egg-mark { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; color: rgba(242, 244, 248, .5); }
.egg-btn { font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 999px; background: #F2F4F8; color: #0F1219; transition: transform .3s var(--spring); }
.egg:hover .egg-btn { transform: translateX(3px); }

/* ============================================================================
   03 工作经历：左钉右滚 + 横向项目
   ========================================================================== */
.jobs { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); align-items: start; }
/* 引言让到右栏：左栏上方空出来给光带走（它从标题后面下来、钻过钉住卡片、落成时间轴） */
.sec-jobs .lead { margin-left: calc(320px + clamp(32px, 5vw, 90px)); }
.jobs-pin { position: sticky; top: clamp(84px, 11vh, 110px); }
.pin-card { padding: 26px 28px 22px; }
.pin-swap { position: relative; z-index: 1; transition: opacity .2s, transform .25s var(--ease); }
.pin-swap.out { opacity: 0; transform: translateY(-8px); }
.pin-year { font-size: clamp(44px, 3.6vw, 56px); font-weight: 700; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.pin-org { margin-top: 14px; font-weight: 500; font-size: 17px; letter-spacing: -.01em; line-height: 1.4; }
.pin-role { margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }
.pin-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }
.pin-steps { display: flex; gap: 6px; }
.pin-steps i { width: 22px; height: 2px; background: rgba(11, 14, 20, .12); border-radius: 2px; transition: background .3s; }
.pin-steps i.on { background: var(--ink); }
.pin-count { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); }
.pin-count span { color: var(--ink); }

.jobs-list { display: flex; flex-direction: column; }
.job { position: relative; padding: clamp(30px, 5vh, 56px) 0; border-top: 1px solid var(--line); }
/* 时间轴节点：落在光带上（光带走的是钉住栏与正文之间的缝，lumen.js 的 gapX） */
.job::before {
  content: ""; position: absolute; left: calc(-1 * clamp(32px, 5vw, 90px) / 2 - 6px); top: calc(clamp(30px, 5vh, 56px) + .55em);
  width: 12px; height: 12px; border-radius: 50%; background: var(--ink); z-index: 9;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 2px 6px rgba(11, 14, 20, .2);
}
.job:first-child::before { top: .55em; }
.job:first-child { border-top: 0; padding-top: 0; }
.job-when { display: none; }
.job-title { font-weight: 700; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.03em; line-height: 1.2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.job-role { font-family: var(--mono); font-weight: 400; font-size: var(--fs-micro); letter-spacing: .08em; color: var(--acc); }
.job p { margin-top: 14px; color: var(--ink-2); line-height: 1.75; }
.job p b { color: var(--ink); }
.intern-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 12px; font-size: var(--fs-body); }
.intern-item .job-role { color: var(--ink-3); }

/* 横向推进 */
.hscroll { position: relative; margin-top: clamp(60px, 9vh, 120px); }
.hscroll-pin { position: sticky; top: 0; display: flex; flex-direction: column; gap: clamp(18px, 3vh, 30px); overflow: hidden; padding: 12px 0; }
.hscroll-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.hscroll-count { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .12em; color: var(--ink-3); padding-bottom: 6px; }
.hscroll-count b { color: var(--ink); font-weight: 500; }
.hscroll-count em { font-style: normal; margin-left: 14px; }
.hscroll-track { display: flex; gap: clamp(14px, 1.6vw, 22px); padding-inline: max(var(--gutter), (100vw - var(--maxw)) / 2); will-change: transform; }
.proj { flex: 0 0 clamp(300px, 24vw, 360px); padding: 22px 24px 26px; display: flex; flex-direction: column; min-height: clamp(300px, 40vh, 380px); }
.proj-kind { position: relative; z-index: 1; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); }
.proj h4 { position: relative; z-index: 1; margin-top: 14px; font-weight: 700; font-size: 21px; letter-spacing: -.025em; line-height: 1.3; }
.proj p { position: relative; z-index: 1; margin-top: 12px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.7; flex: 1; }
.proj-no { position: relative; z-index: 1; align-self: flex-end; font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--ink-3); line-height: 1; margin-top: 16px; }
.hscroll-bar > div { height: 2px; background: rgba(11, 14, 20, .08); border-radius: 2px; overflow: hidden; }
.hscroll-bar i { display: block; height: 100%; width: 0; background: var(--ink); }

/* ============================================================================
   页脚
   ========================================================================== */
#contact { position: relative; z-index: 2; padding: clamp(70px, 10vh, 120px) 0 36px; }
.foot-in { padding-top: clamp(40px, 6vh, 70px); border-top: 1px solid var(--line-2); }
.foot-kick { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .16em; color: var(--ink-3); }
.foot-kick span::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--ink-3); vertical-align: middle; margin-right: 10px; }
.foot-title { font-weight: 800; font-size: clamp(56px, 9vw, 140px); letter-spacing: -.05em; line-height: 1; margin: 14px 0 clamp(28px, 4vh, 44px) -.03em; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.foot-pdf { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; font-size: 15px; transition: transform .3s var(--spring), box-shadow .3s; box-shadow: 0 12px 28px -14px rgba(11, 14, 20, .6); }
.foot-pdf:hover { transform: translateY(-2px); }
.foot-pdf em { font-style: normal; }
.foot-line { font-size: 17px; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .25s; }
.foot-line:hover { border-color: var(--ink); }
.foot-base { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(50px, 8vh, 90px); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-3); padding-right: calc(var(--fab-w) + 20px); }

/* ============================================================================
   AI 分身 + 聊天（与 LENS 版同源；右下角）
   ========================================================================== */
.fab-wrap { position: fixed; right: max(10px, calc((100vw - var(--maxw)) / 2 - 96px));
  bottom: clamp(10px, 1.1vw, 16px); z-index: 55;
  width: var(--fab-w); height: var(--fab-h); }
#avatar-btn { width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  display: block; position: relative; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 14px 18px rgba(11, 14, 20, .22)); }
#avatar-btn.grabbing { cursor: grabbing; }
#avatar-btn.bob { animation: bob 4.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
html[data-motion="off"] #avatar-btn.bob { animation: none; }
.fab-ph { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: bottom center; }
html[data-av="rendered"] .fab-ph { opacity: 0; transition: opacity .4s; }
#avatar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

#avatar-bubble { position: absolute; z-index: 2; width: max-content; max-width: min(270px, 64vw);
  background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  color: var(--ink); border: 1px solid rgba(255, 255, 255, .8); border-radius: 14px;
  box-shadow: var(--sh-2); padding: 11px 14px; font-size: var(--fs-sm); line-height: 1.6;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
#avatar-bubble.show { opacity: 1; transform: none; }
#avatar-bubble .bub-t { display: block; }
#avatar-bubble .bub-h { display: block; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
#avatar-bubble::after { content: ""; position: absolute; left: var(--tail-x, 24px); width: 9px; height: 9px;
  background: rgba(255, 255, 255, .95); border-right: 1px solid rgba(255, 255, 255, .8); border-bottom: 1px solid rgba(255, 255, 255, .8);
  transform: translateX(-50%) rotate(45deg); }
#avatar-bubble[data-tail="down"]::after { bottom: -5px; }
#avatar-bubble[data-tail="up"]::after { top: -5px; transform: translateX(-50%) rotate(225deg); }
#avatar-bubble[data-tail="none"]::after { display: none; }

#chat-panel { position: absolute; z-index: 3; width: min(376px, calc(100vw - 24px));
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: var(--r);
  box-shadow: var(--sh-3); display: flex; flex-direction: column; max-height: min(560px, 78vh);
  overflow: hidden; opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity .26s, transform .26s var(--spring); }
#chat-panel[hidden] { display: none; }   /* id 选择器会压过 UA 的 [hidden]，不写这条，透明的面板会挡住分身按钮 */
#chat-panel.open { opacity: 1; transform: none; }
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.chat-title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.chat-status { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 3px; }
#chat-close { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 15px; padding: 4px; }
#chat-close:hover { color: var(--ink); }
.chat-body { padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px;
  font-size: var(--fs-sm); line-height: 1.75; }
.chat-intro { color: var(--ink-2); margin: 0; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chat-chips button { font-size: 12px; color: var(--ink-2); cursor: pointer; border: 1px solid var(--line-2);
  background: transparent; border-radius: 999px; padding: 5px 12px; transition: background .22s, color .22s, border-color .22s; font-family: inherit; }
.chat-chips button:hover { background: var(--acc); color: #fff; border-color: var(--acc); }
/* 消息气泡：类名跟 chat.js 走（.msg.user / .msg.bot / .typing / .err） */
.msg { max-width: 88%; padding: 9px 13px; border-radius: 13px; white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self: flex-end; background: var(--acc); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: rgba(11, 14, 20, .05); border-bottom-left-radius: 4px; }
.msg.bot.typing { animation: typing 1.1s steps(1) infinite; }
.msg.err { color: var(--ink-3); font-size: 12px; background: none; padding: 0; }
@keyframes typing { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
.chat-input-row { display: flex; border-top: 1px solid var(--line); }
#chat-text { flex: 1; border: 0; background: transparent; padding: 12px 14px; font-size: var(--fs-sm);
  color: var(--ink); outline: none; font-family: inherit; }
#chat-text::placeholder { color: var(--ink-3); }
#chat-send { border: 0; background: transparent; padding: 0 18px; cursor: pointer; font-size: var(--fs-sm);
  color: var(--acc); font-weight: 500; transition: background .22s, color .22s; font-family: inherit; }
#chat-send:hover { background: var(--acc); color: #fff; }

/* ============================================================================
   响应式
   ========================================================================== */
@media (max-width: 1280px) {
  .plate-title { --plate-fs: clamp(44px, 6.2vw, 92px); }
  .plate-2 .plate-title { --plate-fs: clamp(52px, 7.4vw, 108px); }
  .plate-1 .plate-title, .plate-3 .plate-title { --plate-fs: clamp(40px, 5.4vw, 80px); }
}

@media (max-width: 1080px) {
  /* 首屏：板子改成纵向叠放，不再用百分比落位 */
  .hero { height: auto; }
  .hero-stick { position: relative; height: auto; min-height: 100svh; }
  .plates { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
  .plate { position: relative; left: auto !important; top: auto !important; width: 100% !important; }
  .plate-title, .plate-2 .plate-title, .plate-1 .plate-title, .plate-3 .plate-title { --plate-fs: clamp(44px, 9.6vw, 84px); }
  .plate-2 .plate-note { max-width: none; }
  .ghost-no { display: none; }
  .hero-foot { margin-top: 26px; }

  .works { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .works-pin { display: none; }
  .work-media-inline { display: block; }
  .work-media-inline .stage-item { position: relative; opacity: 1; transform: none; padding: 0; pointer-events: auto; }
  .work-media-inline .vid-box, .work-media-inline #quant-chart, .work-media-inline .duo {
    border-radius: var(--r-sm); background: rgba(255, 255, 255, .6); padding: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), var(--sh-1); }
  .work-media-inline .vid-box { padding: 0; }

  .jobs { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .jobs-pin { display: none; }
  .job::before { display: none; }
  .sec-jobs .lead { margin-left: 0; }
  .job-when { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
  .job-when b { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
  .job-when s { font-family: var(--mono); font-size: 12px; color: var(--acc); }

  .minors { grid-template-columns: 1fr; }
  .edu-row { grid-template-columns: 1fr 1fr; }
  .edu-when { grid-column: 1 / -1; }
  .edu-main { grid-column: 1 / -1; }
  .skills { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --r: 18px; --fs-body: 16px; }
  .nav-links { display: none; }
  .hero-stick { padding-top: 18px; }
  .hero-meta { display: none; }
  .plate-body { padding: 20px 20px 22px; }
  .plate-title, .plate-2 .plate-title, .plate-1 .plate-title, .plate-3 .plate-title { --plate-fs: clamp(40px, 11.5vw, 64px); }
  .plate-note br { display: none; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sec { padding: 64px 0; }
  .sec-edu { margin-top: 0; padding-top: 0; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sec-meta { padding-bottom: 0; }
  .edu-sheet { padding: 4px 20px 24px; }
  .edu-row { grid-template-columns: 1fr; gap: 12px; }
  .edu-gpa { justify-content: start; }
  .stats { grid-template-columns: 1fr 1fr; }
  .egg-in { flex-direction: column; align-items: flex-start; }
  .egg-right { flex-direction: row; align-items: center; }
  .hscroll { margin-top: 56px; }
  .hscroll-pin { position: static; overflow: visible; }
  .hscroll-head { width: auto; margin-inline: var(--gutter); }
  .hscroll-count em { display: none; }
  /* 触屏：退化成原生横滑 */
  .hscroll-track { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-inline: var(--gutter); padding-bottom: 8px; scrollbar-width: none; }
  .hscroll-track::-webkit-scrollbar { display: none; }
  .proj { flex-basis: 82vw; scroll-snap-align: start; min-height: 0; }
  .hscroll-bar { display: none; }
  .foot-base { flex-direction: column; gap: 6px; padding-right: 0; }
  .glass, .plate { -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
}

@media (hover: none) {
  .plate .plate-gloss::before { transition: none; }
}