/* 郑雨豪个人主页 · 样式
 * 默认（无 JS / 脚本失败）= 普通文档流，所有内容可见、可滚动；
 * 脚本初始化成功后 <html> 加 .fp 进入分屏模式，所有「初始不可见」的动画态都只挂在 .fp 之下。 */

:root {
  --bg: #05060b;
  --ink: #edf1fa;
  --muted: #9aa4bd;
  --dim: #626d88;
  --line: rgba(140, 170, 255, 0.14);
  --cyan: #3be6ff;
  --blue: #5b7cff;
  --violet: #9a5cff;
  --violet2: #b69aff;
  --magenta: #ff4fd8;
  --grad: linear-gradient(110deg, #3be6ff 0%, #5b7cff 38%, #9a5cff 68%, #ff4fd8 100%);
  --ease: cubic-bezier(0.22, 0.8, 0.18, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.2, 1);
  --sans: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --pad-x: clamp(1.375rem, 6vw, 7rem);
  /* 视口高度单位：默认 1vh；支持 svh 的浏览器（iOS 15.4+ / Chrome 108+）换成 1svh，
     iOS 地址栏伸缩时全屏区块不跳动、不被工具栏遮住。全站凡是按屏高算的长度都写成 calc(var(--vh) * N) */
  --vh: 1vh;
  /* 刘海 / 圆角 / 底部手势条的安全区（横屏时左右各有约 47px） */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@supports (height: 1svh) { :root { --vh: 1svh; } }

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: smooth;
}
/* 大显示器等比放大：1440 宽以内根字号固定 16px（与原来的 px 写法完全等价）；
   更宽的屏幕按「宽 / 1440」与「高 / 900」两者中较小的比例放大（带鱼屏不会因为特别宽而把字放到超出屏高），上限 40px。
   全站长度都用 rem，所以字号、间距、照片、卡片一起放大，不会在 2K/4K 屏上缩成一小块。 */
@media (min-width: 1441px) {
  html { font-size: clamp(16px, min(1.1111vw, calc(var(--vh) * 1.7778)), 40px); }
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: calc(var(--vh) * 100);
  color: var(--ink);
  font: 400 1rem/1.7 var(--sans);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, p, figure, ol, ul, pre { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
::selection { background: rgba(91, 124, 255, 0.45); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 0.1875rem; border-radius: 0.375rem; }
.section:focus, .section:focus-visible { outline: none; }

/* ---------- 背景层 ---------- */
#fluid {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform-origin: 50% 50%;
  transition: opacity 1.1s var(--ease), transform 1.6s var(--ease);
}
.fp #fluid { opacity: 1; }
.fp.inner #fluid { opacity: 0.42; transform: scale(1.08); }
.no-webgl #fluid { display: none; }

.bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.bg i { position: absolute; inset: 0; display: block; }
.bg .bg-glow {
  inset: -10%;
  background:
    radial-gradient(50vmax 38vmax at 80% 16%, rgba(91, 124, 255, 0.2), transparent 62%),
    radial-gradient(46vmax 34vmax at 10% 88%, rgba(255, 79, 216, 0.12), transparent 60%),
    radial-gradient(42vmax 34vmax at 20% 16%, rgba(59, 230, 255, 0.11), transparent 60%);
  transition: opacity 1.2s var(--ease);
}
.fp:not(.inner):not(.no-webgl) .bg-glow { opacity: 0; }
.no-webgl .bg .bg-glow {
  background:
    radial-gradient(50vmax 38vmax at 80% 16%, rgba(91, 124, 255, 0.3), transparent 62%),
    radial-gradient(46vmax 34vmax at 10% 88%, rgba(255, 79, 216, 0.2), transparent 60%),
    radial-gradient(42vmax 34vmax at 20% 16%, rgba(59, 230, 255, 0.17), transparent 60%),
    radial-gradient(36vmax 30vmax at 70% 86%, rgba(154, 92, 255, 0.16), transparent 60%);
}
.no-webgl:not(.reduce) .bg-glow { animation: aurora 22s ease-in-out infinite alternate; }
.bg-grid {
  background-image:
    linear-gradient(rgba(150, 175, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 175, 255, 0.06) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 46%, #000 18%, transparent 82%);
  mask-image: radial-gradient(ellipse 78% 68% at 50% 46%, #000 18%, transparent 82%);
  transition: opacity 1s var(--ease);
}
.fp:not(.inner) .bg-grid { opacity: 0.45; }
.bg-scan { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 0.1875rem); }
.bg-vig { background: radial-gradient(ellipse 120% 92% at 50% 45%, transparent 52%, rgba(0, 0, 0, 0.6) 100%); }

/* ---------- 加载遮罩：纯 CSS 计时，约 0.95s 后自动退场，脚本失败也不会卡住 ---------- */
.boot { display: none; }
.js .boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--bg);
  pointer-events: none;
  animation: bootOut 0.45s var(--ease-io) 0.5s forwards;
}
.js .boot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--grad);
  box-shadow: 0 0 1.5rem 2px rgba(91, 124, 255, 0.75);
}
.boot-in { font: 500 0.8125rem/2 var(--mono); color: var(--muted); letter-spacing: 0.04em; min-width: 15.625rem; }
.boot-in p { opacity: 0; animation: bootLine 0.01s linear forwards; }
.boot-in p:nth-child(1) { animation-delay: 0.04s; }
.boot-in p:nth-child(2) { animation-delay: 0.14s; }
.boot-in p:nth-child(3) { animation-delay: 0.26s; }
.boot-in b { color: var(--cyan); font-weight: 600; margin-left: 0.375rem; }
.b-p { color: var(--magenta); margin-right: 0.5rem; }
.boot-bar { height: 2px; margin-top: 0.875rem; background: rgba(255, 255, 255, 0.08); overflow: hidden; border-radius: 2px; }
.boot-bar i { display: block; height: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; animation: barFill 0.46s var(--ease) forwards; }
@keyframes bootOut { to { transform: translate3d(0, -100%, 0); visibility: hidden; } }
@keyframes bootLine { to { opacity: 1; } }
@keyframes barFill { to { transform: scaleX(1); } }

/* ---------- HUD：四角框、顶栏、导航点、进度、页脚、光标、扫描线 ---------- */
.frame { display: none; }
.fp .frame { display: block; position: fixed; inset: clamp(0.75rem, 2vw, 1.5rem); z-index: 4; pointer-events: none; }
.frame i { position: absolute; width: 1.125rem; height: 1.125rem; border: 0 solid rgba(150, 195, 255, 0.4); }
.frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem; /* 品牌名与计数器之间至少留 12px，窄屏上不再贴成一串 */
  padding: clamp(1.5rem, 3.4vw, 2.625rem) clamp(1.625rem, 4.6vw, 3.75rem);
  padding-top: max(clamp(1.5rem, 3.4vw, 2.625rem), calc(var(--safe-t) + 0.5rem));
  padding-left: max(clamp(1.625rem, 4.6vw, 3.75rem), calc(var(--safe-l) + 0.75rem));
  padding-right: max(clamp(1.625rem, 4.6vw, 3.75rem), calc(var(--safe-r) + 0.75rem));
  pointer-events: none;
}
.fp .hud { position: fixed; }
.fp .hud::before { content: ""; position: absolute; inset: 0 0 -1.875rem; z-index: -1; background: linear-gradient(rgba(5, 6, 11, 0.96), rgba(5, 6, 11, 0.82) 62%, transparent); opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; }
.fp.inner .hud::before { opacity: 1; }
.hud > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 0.6875rem; font: 500 0.8125rem/1 var(--mono); letter-spacing: 0.04em; }
/* 首屏流体很亮时（品红/青色团飘到角落）HUD 小字仍要看得清：加一圈很淡的暗色描影，暗背景上看不出来 */
.brand, .cnt, .sys, .hint { text-shadow: 0 1px 0.625rem rgba(5, 6, 11, 0.95), 0 0 2px rgba(5, 6, 11, 0.85); }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cyan);
  background: linear-gradient(135deg, rgba(59, 230, 255, 0.16), rgba(154, 92, 255, 0.18)), rgba(7, 10, 19, 0.72);
  border: 1px solid rgba(120, 160, 255, 0.34);
  box-shadow: inset 0 0 1rem -0.25rem rgba(59, 230, 255, 0.55), 0 0 1.375rem -0.5rem rgba(59, 230, 255, 0.8);
  transition: transform 0.4s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.brand-path { color: var(--muted); } /* 比 --dim 亮一档：首屏青色流体飘到左上角时 ~/home 仍看得清 */
.cnt { visibility: hidden; display: flex; align-items: baseline; gap: 0.375rem; font: 500 0.75rem/1.25 var(--mono); letter-spacing: 0.12em; color: var(--dim); }
.fp .cnt { visibility: visible; }
.cnt-num { display: inline-flex; font-size: 0.8125rem; color: var(--ink); }
.cnt-win { display: inline-block; height: 1.25em; overflow: hidden; }
.cnt-roll { display: flex; flex-direction: column; transition: transform 0.85s var(--ease); }
.cnt-roll span { height: 1.25em; line-height: 1.25em; }
.cnt-lbl { margin-left: 0.75rem; color: var(--cyan); text-transform: uppercase; min-width: 10ch; }

/* 导航点只属于分屏模式：禁用 JS / 脚本失败时页面是普通文档流，固定在右侧的横线会压在卡片上，所以不显示 */
.dots { position: fixed; top: 50%; right: clamp(1rem, 2.6vw, 2.25rem); right: max(clamp(1rem, 2.6vw, 2.25rem), calc(var(--safe-r) + 0.5rem)); z-index: 6; display: none; flex-direction: column; align-items: flex-end; gap: 0.875rem; transform: translateY(-50%); }
.fp .dots { display: flex; }
.dots a { display: flex; align-items: center; justify-content: flex-end; gap: 0.625rem; height: 1.125rem; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.14em; color: var(--dim); }
.dots a::after { content: ""; width: 1rem; height: 2px; border-radius: 2px; background: rgba(160, 180, 230, 0.34); transition: width 0.55s var(--ease), background 0.4s, box-shadow 0.4s; }
.dots b, .dots em { font-weight: 500; font-style: normal; white-space: nowrap; opacity: 0; transform: translateX(0.375rem); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.dots em { color: var(--muted); letter-spacing: 0.06em; font-family: var(--sans); font-size: 0.75rem; }
.dots a:focus-visible b, .dots a:focus-visible em { opacity: 1; transform: none; }
/* 悬停显示标签只给能悬停的设备：触屏点一下导航点 :hover 会一直粘着，标签就画进卡片里 */
@media (hover: hover) {
  .dots a:hover b, .dots a:hover em { opacity: 1; transform: none; }
  .dots a:hover::after { background: rgba(200, 215, 255, 0.7); }
}
.fp .dots a[aria-current="true"] { color: var(--ink); }
.fp .dots a[aria-current="true"] b { color: var(--cyan); }
.fp .dots a[aria-current="true"]::after { width: 2.125rem; background: var(--grad); box-shadow: 0 0 0.75rem rgba(59, 230, 255, 0.6); }

.progress { display: none; }
.fp .progress { display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 6; height: 2px; background: rgba(255, 255, 255, 0.04); pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(calc(0.08 + var(--progress, 0) * 0.92)); transition: transform 1s var(--ease); box-shadow: 0 0 0.75rem rgba(91, 124, 255, 0.7); }

.site-footer { position: relative; z-index: 6; padding: 1.875rem 1.25rem 2.25rem; text-align: center; font: 400 0.75rem/1.6 var(--mono); letter-spacing: 0.04em; color: var(--dim); }
.site-footer p { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0.625rem; }
.site-footer a { color: var(--muted); border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.site-footer a:hover { color: var(--cyan); border-bottom-color: rgba(59, 230, 255, 0.5); }
.fp .site-footer { position: fixed; left: 0; right: 0; bottom: 0; padding: 1.625rem 1rem max(0.875rem, var(--safe-b)); font-size: 0.6875rem; pointer-events: none; background: linear-gradient(transparent, rgba(5, 6, 11, 0.78) 62%); }
.fp .site-footer a { pointer-events: auto; }
/* 内页区块可以在页脚下面滚动：与顶栏对称地加一条暗底，滚过去的文字隐入其中，不与备案号叠字（不挡触摸，pointer-events 继承 none） */
.fp .site-footer::before { content: ""; position: absolute; inset: -1rem 0 0; z-index: -1; background: linear-gradient(rgba(5, 6, 11, 0), rgba(5, 6, 11, 0.97) 42%, #05060b 72%); opacity: 0; transition: opacity 0.6s var(--ease); }
.fp.inner .site-footer::before { opacity: 1; }

.scanline { display: none; }
.fp .scanline {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 7;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(59, 230, 255, 0.95) 18%, rgba(154, 92, 255, 0.95) 58%, rgba(255, 79, 216, 0.95) 82%, transparent);
  box-shadow: 0 0 1.125rem 2px rgba(91, 124, 255, 0.6), 0 0 4.375rem 0.625rem rgba(59, 230, 255, 0.16);
}
.fp .scanline::after { content: ""; position: absolute; left: 0; right: 0; height: 5.625rem; background: linear-gradient(rgba(91, 124, 255, 0.14), transparent); }
.fp .scanline.up::after { top: 2px; }
.fp .scanline.down::after { bottom: 2px; transform: scaleY(-1); }
.fp .scanline.up { animation: scanUp 0.86s var(--ease-io) forwards; }
.fp .scanline.down { animation: scanDown 0.86s var(--ease-io) forwards; }
@keyframes scanUp { 0% { opacity: 0; transform: translate3d(0, calc(var(--vh) * 100), 0); } 10%, 82% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -0.25rem, 0); } }
@keyframes scanDown { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 10%, 82% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, calc(var(--vh) * 100), 0); } }

.cursor { display: none; }
.fp.has-hover .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 9; width: 0; height: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.fp.cursor-on .cursor { opacity: 1; }
.cursor::before { content: ""; position: absolute; left: -1.0625rem; top: -1.0625rem; width: 2.125rem; height: 2.125rem; border-radius: 50%; border: 1px solid rgba(120, 220, 255, 0.55); transition: transform 0.35s var(--ease), border-color 0.3s, background-color 0.3s; }
.cursor::after { content: ""; position: absolute; left: -2px; top: -2px; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0.625rem var(--cyan); }
.cursor.hot::before { transform: scale(1.65); border-color: rgba(255, 120, 230, 0.75); background-color: rgba(154, 92, 255, 0.1); }
.cursor.down::before { transform: scale(0.7); }

/* ---------- 分屏 ---------- */
main { position: relative; z-index: 3; }
.section {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: calc(var(--vh) * 100);
  padding: clamp(6.25rem, calc(var(--vh) * 13), 9.375rem) var(--pad-x) clamp(5rem, calc(var(--vh) * 11), 7.5rem);
  padding-left: max(var(--pad-x), calc(var(--safe-l) + 1rem));
  padding-right: max(var(--pad-x), calc(var(--safe-r) + 1rem));
}
.wrap { position: relative; width: min(72.5rem, 100%); margin: auto; }

.fp, .fp body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.fp main { position: fixed; inset: 0; }
.fp .section {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 0;
  padding: clamp(6rem, calc(var(--vh) * 12), 8.5rem) calc(var(--pad-x) + 2.5rem) clamp(4.875rem, calc(var(--vh) * 10), 7rem) var(--pad-x);
  padding-left: max(var(--pad-x), calc(var(--safe-l) + 1rem));
  padding-right: max(calc(var(--pad-x) + 2.5rem), calc(var(--safe-r) + 3rem));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  visibility: hidden;
  opacity: 0;
  touch-action: pan-y pinch-zoom;
}
.fp .section::-webkit-scrollbar { display: none; }
.fp .section.is-active { z-index: 3; visibility: visible; opacity: 1; }
.fp .section.is-leaving { z-index: 2; visibility: visible; pointer-events: none; animation: leaveUp 0.7s var(--ease-io) forwards; }
.fp[data-dir="-1"] .section.is-leaving { animation-name: leaveDown; }
.fp .s-home { touch-action: pinch-zoom; }
/* 首屏内容在极矮的屏幕上仍可能超出一屏：脚本量到溢出时加 .is-tall，放开纵向拖动，访客不会被卡在首屏 */
.fp .s-home.is-tall { touch-action: pan-y pinch-zoom; }
.fp .is-entering .reveal { animation: rise 1s var(--ease) both; animation-delay: var(--d, 0ms); }
.fp[data-dir="-1"] .is-entering .reveal { animation-name: drop; }
.fp.lite .is-entering .reveal { animation-name: riseLite; }
.fp.lite[data-dir="-1"] .is-entering .reveal { animation-name: dropLite; }
.fp.lite .section.is-leaving { animation-name: leaveLite; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 2.875rem, 0); filter: blur(0.75rem); } }
@keyframes drop { from { opacity: 0; transform: translate3d(0, -2.875rem, 0); filter: blur(0.75rem); } }
@keyframes riseLite { from { opacity: 0; transform: translate3d(0, 2.125rem, 0); } }
@keyframes dropLite { from { opacity: 0; transform: translate3d(0, -2.125rem, 0); } }
@keyframes leaveUp { to { opacity: 0; transform: translate3d(0, calc(var(--vh) * -6), 0) scale(0.965); filter: blur(0.625rem); } }
@keyframes leaveDown { to { opacity: 0; transform: translate3d(0, calc(var(--vh) * 6), 0) scale(0.965); filter: blur(0.625rem); } }
@keyframes leaveLite { to { opacity: 0; transform: translate3d(0, calc(var(--vh) * -4), 0); } }

/* 解码与打字：真实文字一直在 DOM 里，动画只是覆盖层 */
[data-decode] { position: relative; }
.dc-real { opacity: 0; }
.dc-ov { position: absolute; inset: 0; white-space: nowrap; pointer-events: none; }
.type-ghost { opacity: 0; }
.type-caret { display: inline-block; width: 0.55em; height: 1.05em; margin: 0 1px; vertical-align: -0.16em; background: var(--cyan); box-shadow: 0 0 0.625rem rgba(59, 230, 255, 0.7); }
.is-typing + .caret { opacity: 0; }

/* ---------- 首屏 ---------- */
.home-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 文字区背后一层很淡的暗场，保证流体再亮时姓名与标语依然清楚 */
/* 盒子不超过视口宽（原先 120vw：文档流里会把手机页面撑宽到 429px 再缩小显示，分屏里则被区块裁掉）；
   渐变椭圆的横半径仍是 min(550px, 60vw)，与原来完全一样，手机上超出的部分正好落在屏幕外 */
.home-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(68.75rem, 100vw); height: 120%; transform: translate(-50%, -50%); background: radial-gradient(min(34.375rem, 60vw) 50% at 50% 50%, rgba(5, 6, 11, 0.62), rgba(5, 6, 11, 0.32) 55%, transparent); pointer-events: none; }
.kicker { margin-bottom: clamp(1.125rem, calc(var(--vh) * 3), 1.875rem); font: 500 0.75rem/1 var(--mono); letter-spacing: 0.44em; padding-left: 0.44em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 1px #05060b, 0 0 1px #05060b, 0 0 2px #05060b, 0 0 3px rgba(5, 6, 11, 0.9), 0 0 0.5rem rgba(5, 6, 11, 0.9), 0 1px 0.75rem rgba(5, 6, 11, 0.95), 0 0 1.125rem rgba(59, 230, 255, 0.5); }
/* kicker 是青色字：亮青色流体飘到它后面时几乎看不见。几层贴身暗色描影叠成一圈实心暗边（暗底上看不出来），青色光晕放到最下层 */
.name { font-size: clamp(4.875rem, 13.2vw, 12.25rem); font-size: clamp(4.875rem, min(13.2vw, calc(var(--vh) * 24)), 12.25rem); font-weight: 600; line-height: 1.02; letter-spacing: 0.08em; padding-left: 0.08em; }
.name-txt, .name-txt .dc-ov {
  background: linear-gradient(180deg, #ffffff 10%, #dce5ff 48%, #93a8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.name-txt { display: inline-block; filter: drop-shadow(0 0 1.875rem rgba(80, 140, 255, 0.38)) drop-shadow(0 0.25rem 1.125rem rgba(0, 0, 0, 0.45)); }
.name-txt.is-decoding { background: none; }
.pinyin { margin-top: clamp(1rem, calc(var(--vh) * 2.6), 1.625rem); font: 500 clamp(0.8125rem, 1.4vw, 1.125rem)/1 var(--mono); letter-spacing: 0.62em; padding-left: 0.62em; text-transform: uppercase; color: #e1e7f8; text-shadow: 0 1px 0.75rem rgba(5, 6, 11, 0.95), 0 0 2px rgba(5, 6, 11, 0.8); }
.tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: clamp(1.625rem, calc(var(--vh) * 4.4), 2.625rem);
  padding: 0.625rem 1.25rem;
  font: 400 clamp(0.8125rem, 1.25vw, 1rem)/1.6 var(--mono);
  color: #c3cce3;
  background: rgba(7, 10, 19, 0.66);
  border: 1px solid rgba(140, 170, 255, 0.2);
  border-radius: 62.4375rem;
  box-shadow: 0 0.625rem 2.5rem -1.25rem rgba(0, 0, 0, 0.9);
}
.tg-p { color: var(--magenta); font-weight: 700; }
.caret { display: inline-block; width: 0.55em; height: 1.05em; vertical-align: -0.16em; background: var(--cyan); box-shadow: 0 0 0.625rem rgba(59, 230, 255, 0.7); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cta { margin-top: clamp(1.875rem, calc(var(--vh) * 5), 3rem); }
.hint { position: absolute; left: 50%; bottom: clamp(3.25rem, calc(var(--vh) * 8), 5rem); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.32em; text-transform: uppercase; color: var(--dim); transform: translateX(-50%); }
.hint-m { display: none; }
.hint i { position: relative; width: 1px; height: 2.5rem; overflow: hidden; background: linear-gradient(rgba(150, 175, 255, 0), rgba(150, 175, 255, 0.5)); }
.hint i::after { content: ""; position: absolute; left: -1px; top: -30%; width: 0.1875rem; height: 30%; background: var(--cyan); box-shadow: 0 0 0.5rem var(--cyan); animation: drip 1.9s var(--ease-io) infinite; }
@keyframes drip { to { top: 100%; } }
@media (hover: none) { .hint-d { display: none; } .hint-m { display: inline; } }
.sys { display: none; }
.fp .sys { position: absolute; left: clamp(1.625rem, 4.6vw, 3.75rem); left: max(clamp(1.625rem, 4.6vw, 3.75rem), calc(var(--safe-l) + 0.75rem)); bottom: clamp(1.5rem, 3.4vw, 2.625rem); display: flex; align-items: center; gap: 0.5625rem; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.06em; color: var(--dim); }
.led { display: inline-block; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #2ef2c8; box-shadow: 0 0 0.5625rem #2ef2c8; animation: pulse 2.4s ease-in-out infinite; }
.no-webgl .sys .led { background: #f2b450; box-shadow: 0 0 0.5625rem #f2b450; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- 按钮 ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  height: 3.125rem;
  padding: 0 0.875rem 0 1.625rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 62.4375rem;
  font: 600 0.875rem/1 var(--sans);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.75s var(--ease); pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }
.btn-primary {
  color: #fff;
  background: linear-gradient(#0a0e1b, #0a0e1b) padding-box, var(--grad) border-box;
  box-shadow: 0 0.75rem 2.75rem -0.875rem rgba(91, 124, 255, 0.75), inset 0 0 1.5rem -0.5rem rgba(59, 230, 255, 0.45);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1.25rem 3.5rem -0.875rem rgba(154, 92, 255, 0.85), inset 0 0 1.75rem -0.375rem rgba(59, 230, 255, 0.6); }
.btn-k { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font: 600 0.8125rem/1 var(--mono); color: var(--cyan); background: rgba(255, 255, 255, 0.07); transition: transform 0.4s var(--ease); }
.btn-primary:hover .btn-k { transform: translateY(2px); }
.btn-ghost { padding: 0 1.5rem 0 1.25rem; color: var(--muted); background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(150, 175, 255, 0.32); }
.btn-ghost:disabled { cursor: not-allowed; }
.btn-ghost:disabled::after { display: none; }
.btn svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ---------- 玻璃面板（悬停时跟随指针的描边光） ---------- */
.glass {
  position: relative;
  isolation: isolate;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(17, 22, 39, 0.84), rgba(9, 12, 23, 0.8));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1.625rem 4.375rem -2.375rem rgba(0, 0, 0, 0.95);
}
.glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(23.75rem circle at var(--mx, 50%) var(--my, 0%), rgba(59, 230, 255, 0.75), rgba(154, 92, 255, 0.35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.glass::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(32.5rem circle at var(--mx, 50%) var(--my, 0%), rgba(91, 124, 255, 0.1), transparent 45%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.has-hover .glass:hover::before, .has-hover .glass:hover::after { opacity: 1; }

.win { display: flex; align-items: center; gap: 0.75rem; height: 2.5rem; padding: 0 1rem; border-bottom: 1px solid rgba(140, 170, 255, 0.1); font: 500 0.75rem/1 var(--mono); color: var(--dim); }
.win-dots { display: inline-flex; gap: 0.4375rem; }
.win-dots i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #ff5fa8; opacity: 0.9; }
.win-dots i:nth-child(2) { background: #b28cff; }
.win-dots i:nth-child(3) { background: #3be6ff; }
.win-title { flex: 1; margin-right: 2.75rem; text-align: center; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab { position: relative; height: 100%; display: inline-flex; align-items: center; padding: 0 2px; color: var(--dim); }
.tab.is-on { color: var(--ink); }
.tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); }
.tab + .tab { margin-left: 0.75rem; }

.term-body { padding: 1rem 1.25rem 1.125rem; font: 400 0.8438rem/1.8 var(--mono); color: #cdd6ee; }
.ln { white-space: pre-wrap; word-break: break-word; }
.ps { color: var(--magenta); font-weight: 700; }
.cmd .c { color: #f4f7ff; }
.out { padding-left: 1.2em; color: var(--muted); }
.fp .term.typing .ln:not(.on) { visibility: hidden; }

.code-body { padding: 0.875rem 0 1rem; overflow-x: auto; font: 400 0.8125rem/1.85 var(--mono); color: #c7d0ea; white-space: normal; counter-reset: ln; scrollbar-width: thin; }
.code-body code { display: block; min-width: max-content; font: inherit; }
.code-body .l { display: block; padding-right: 1.375rem; white-space: pre; counter-increment: ln; transition: background-color 0.25s, box-shadow 0.25s; }
.code-body .l::before { content: counter(ln); display: inline-block; width: 3.4em; padding-right: 1.3em; text-align: right; color: rgba(140, 160, 210, 0.34); user-select: none; -webkit-user-select: none; }
.code-body .l:hover { background: rgba(91, 124, 255, 0.09); box-shadow: inset 2px 0 0 var(--cyan); }
.code-body .k, .skills .k { color: #e58bff; }
.code-body .v, .skills .v { color: #82aaff; }
.code-body .o, .skills .o { color: #89ddff; }
.code-body .p { color: #b9c6ff; }
.code-body .s { color: #7ee7ff; }
.code-body .cm, .skills .cm { color: #5d6886; font-style: italic; }

/* ---------- 关于我 ---------- */
.about-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2.5rem, 6.5vw, 6.5rem); align-items: center; }
.portrait { position: relative; justify-self: center; width: clamp(15rem, calc((calc(var(--vh) * 100) - 16.875rem) * 0.6667), 26.25rem); }
.portrait::before { content: ""; position: absolute; inset: 6% -14% -4%; z-index: -1; background: radial-gradient(closest-side, rgba(91, 124, 255, 0.38), rgba(154, 92, 255, 0.14) 58%, transparent); filter: blur(2.125rem); pointer-events: none; }
.p-card {
  position: relative;
  padding: 1px;
  border-radius: 1.5rem;
  background: linear-gradient(160deg, rgba(59, 230, 255, 0.7), rgba(91, 124, 255, 0.22) 34%, rgba(154, 92, 255, 0.16) 64%, rgba(255, 79, 216, 0.6));
  box-shadow: 0 2.5rem 7.5rem -2.625rem rgba(30, 50, 150, 0.85), 0 0 4rem -1.25rem rgba(59, 230, 255, 0.4);
  transform: perspective(68.75rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.7s var(--ease);
}
.portrait.is-tilting .p-card { transition-duration: 0.18s; }
.p-card picture, .p-card img { border-radius: 1.4375rem; }
.p-card img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: #18191d; }
.p-tint, .p-scan, .p-glare { position: absolute; inset: 1px; border-radius: 1.4375rem; pointer-events: none; }
.p-tint { background: linear-gradient(180deg, transparent 58%, rgba(5, 6, 11, 0.55)), radial-gradient(110% 55% at 0% 0%, rgba(59, 230, 255, 0.13), transparent 60%), radial-gradient(110% 55% at 100% 100%, rgba(255, 79, 216, 0.14), transparent 60%); }
.p-scan { overflow: hidden; }
.p-scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%; background: linear-gradient(180deg, transparent, rgba(59, 230, 255, 0.08) 72%, rgba(170, 240, 255, 0.42) 98%, transparent); mix-blend-mode: screen; transform: translate3d(0, -110%, 0); animation: pscan 5.6s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite; }
.p-scan::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 0.25rem); }
@keyframes pscan { 0% { transform: translate3d(0, -110%, 0); } 52%, 100% { transform: translate3d(0, 300%, 0); } }
.p-glare { background: radial-gradient(60% 45% at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.16), transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity 0.4s; }
.portrait.is-tilting .p-glare { opacity: 1; }
.p-corner i { position: absolute; width: 1.375rem; height: 1.375rem; border: 0 solid var(--cyan); filter: drop-shadow(0 0 0.375rem rgba(59, 230, 255, 0.7)); }
.p-corner i:nth-child(1) { top: -0.6875rem; left: -0.6875rem; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 0.4375rem; }
.p-corner i:nth-child(2) { top: -0.6875rem; right: -0.6875rem; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 0.4375rem; }
.p-corner i:nth-child(3) { bottom: -0.6875rem; left: -0.6875rem; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 0.4375rem; border-color: var(--magenta); filter: drop-shadow(0 0 0.375rem rgba(255, 79, 216, 0.7)); }
.p-corner i:nth-child(4) { bottom: -0.6875rem; right: -0.6875rem; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 0.4375rem; border-color: var(--magenta); filter: drop-shadow(0 0 0.375rem rgba(255, 79, 216, 0.7)); }
.p-tag { position: absolute; display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.375rem 0.625rem; font: 500 0.6562rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #dbe6ff; background: rgba(6, 9, 18, 0.62); border: 1px solid rgba(150, 180, 255, 0.24); border-radius: 0.5rem; }
.p-tl { top: 1rem; left: 1rem; }
.p-br { right: 1rem; bottom: 1rem; color: var(--cyan); }
.portrait figcaption { margin-top: 1.25rem; text-align: center; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.2em; color: var(--dim); }

.about-main { display: flex; flex-direction: column; gap: 1.125rem; min-width: 0; max-width: 40rem; }
.eyebrow { display: flex; align-items: center; gap: 0.75rem; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.16em; color: var(--muted); }
.eyebrow .ix { padding: 0.3125rem 0.5rem; border: 1px solid rgba(59, 230, 255, 0.36); border-radius: 0.375rem; letter-spacing: 0.06em; color: var(--cyan); box-shadow: inset 0 0 0.875rem -0.25rem rgba(59, 230, 255, 0.6); }
.eyebrow .tag { line-height: 1.3; } /* 窄栏里页眉折成两行时行框不再相贴；单行时高度仍由左侧编号框决定，排版不变 */
.eyebrow .tag i { font-style: normal; color: var(--violet2); white-space: nowrap; } /* --experience 这类参数整体换行，不在连字符后断开 */
.title { margin: 2px 0 0.25rem; font-size: clamp(2.25rem, 4.4vw, 3.875rem); font-weight: 600; line-height: 1.12; letter-spacing: 0.04em; color: #f3f6fd; }
.title-xl { font-size: clamp(3rem, 7.4vw, 6.5rem); }
.lead { color: var(--muted); font-size: 0.9375rem; }

/* ---------- 经历 ---------- */
.s-exp .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.25rem, 6vw, 6rem); align-items: center; }
.sec-head { position: relative; display: flex; flex-direction: column; gap: 0.875rem; }
/* 区块背后的巨大描边编号（纯装饰，不进 DOM 文本） */
.sec-head::before, .contact-wrap::before {
  position: absolute;
  z-index: -1;
  font: 700 clamp(7.5rem, 15vw, 13.75rem)/0.8 var(--mono);
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(140, 170, 255, 0.14);
  pointer-events: none;
  user-select: none;
}
.s-exp .sec-head::before { content: "02"; left: -0.06em; top: -0.62em; }
.s-proj .sec-head::before { content: "03"; right: 0; top: -0.36em; }
.contact-wrap::before { content: "04"; left: 50%; top: -0.5em; transform: translateX(-50%); -webkit-text-stroke-color: rgba(140, 170, 255, 0.1); }
.timeline { position: relative; display: grid; gap: 1rem; padding-left: 2.125rem; }
.timeline::before { content: ""; position: absolute; left: 0.5625rem; top: 0.625rem; bottom: 0.625rem; width: 2px; border-radius: 2px; background: linear-gradient(var(--cyan), var(--violet) 55%, rgba(255, 79, 216, 0.15)); box-shadow: 0 0 0.875rem rgba(59, 230, 255, 0.35); }
.tl { padding: 1.25rem 1.5rem; }
.tl-meta { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; font: 500 0.75rem/1 var(--mono); color: var(--dim); }
.tl-meta::before { content: ""; position: absolute; left: -1.9375rem; top: 1.5rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--cyan); box-shadow: 0 0 0 0.25rem rgba(59, 230, 255, 0.12), 0 0 0.875rem rgba(59, 230, 255, 0.6); }
.tl:nth-child(2) .tl-meta::before { border-color: var(--violet); box-shadow: 0 0 0 0.25rem rgba(154, 92, 255, 0.12), 0 0 0.875rem rgba(154, 92, 255, 0.6); }
.tl:nth-child(3) .tl-meta::before { border-color: var(--magenta); box-shadow: 0 0 0 0.25rem rgba(255, 79, 216, 0.12), 0 0 0.875rem rgba(255, 79, 216, 0.6); }
.hash { color: #e2a8ff; letter-spacing: 0.06em; }
.ref { padding: 0.25rem 0.5625rem; border: 1px solid rgba(150, 175, 255, 0.26); border-radius: 62.4375rem; color: var(--muted); }
.ref.is-head { color: var(--cyan); border-color: rgba(59, 230, 255, 0.45); background: rgba(59, 230, 255, 0.08); }
.tl h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: 0.02em; }
.tl p:not(.tl-meta) { margin-top: 0.375rem; font-size: 0.9062rem; color: var(--muted); }

/* ---------- 项目与能力 ---------- */
.s-proj .sec-head { margin-bottom: clamp(1.625rem, calc(var(--vh) * 4.4), 2.875rem); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem; counter-reset: card; }
.card { display: flex; flex-direction: column; gap: 0.625rem; min-height: 13.125rem; padding: 1.375rem 1.375rem 1.25rem; counter-increment: card; transition: transform 0.5s var(--ease), border-color 0.3s; }
.card .tags::after { content: counter(card, decimal-leading-zero); position: absolute; right: 1.125rem; bottom: 0.875rem; font: 700 5rem/0.8 var(--mono); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(140, 170, 255, 0.14); pointer-events: none; transition: -webkit-text-stroke-color 0.4s; }
.has-hover .card:hover .tags::after { -webkit-text-stroke-color: rgba(59, 230, 255, 0.4); }
.has-hover .card:hover { transform: translateY(-0.3125rem); border-color: rgba(140, 170, 255, 0.28); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 0.75rem; font: 500 0.75rem/1 var(--mono); color: var(--dim); } /* 卡片窄到放不下一行时，状态换到下一行，不再与路径挤在一起 */
.card-top .st { display: inline-flex; align-items: center; gap: 0.4375rem; color: var(--cyan); letter-spacing: 0.12em; text-transform: uppercase; }
.card-top .st::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0.5rem currentColor; }
.card h3 { margin-top: 1.375rem; font-size: 1.125rem; font-weight: 600; letter-spacing: 0.02em; }
.card p:not(.card-top):not(.tags) { font-size: 0.875rem; color: var(--muted); }
.tags { display: flex; gap: 0.5rem; margin-top: auto; font: 500 0.75rem/1 var(--mono); }
.tags span { padding: 0.375rem 0.5625rem; border: 1px solid rgba(91, 124, 255, 0.24); border-radius: 0.4375rem; color: #aab8ff; background: rgba(91, 124, 255, 0.1); }
.skills { margin-top: 1.125rem; padding: 1rem 1.375rem; overflow-x: auto; white-space: nowrap; font: 400 0.8438rem/1.6 var(--mono); color: #c7d0ea; }
.skills code { font: inherit; }
/* 技能行自己就是横向滚动容器：.glass 的描边光层向外伸 1px，会被算成 1px 可横向滚动，
   Windows 的经典滚动条下会在这一行下面画出一条滚动条。光层收进边框内侧（只有悬停时可见，位置差 1px） */
.skills::before { inset: 0; }

/* ---------- 联系 ---------- */
.contact-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.125rem; max-width: 47.5rem; text-align: center; }
.contact-wrap .eyebrow { justify-content: center; }
.term-sm { width: min(35rem, 100%); margin-top: 0.5rem; text-align: left; }
.kv { display: flex; gap: 1.125rem; }
.kv-k { min-width: 6ch; color: #a9b6ff; }
.kv-v { color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.875rem; margin-top: 0.625rem; }

/* ---------- 多端排版 ----------
 * 每类设备一套排版（默认样式即笔记本 1081–1440：左右分栏，照片与文字并排）：
 *   手机竖屏 ≤760 ............ 单列，照片在上、文字在下；导航点触控区 44×44；手指上下滑切屏
 *   最窄手机 ≤360 ............ 姓名与标语再收一档，320 宽也排得下
 *   平板 761–1080 ............ 经历改上下排、项目两列；竖屏的「关于我」改为标题通栏 + 照片与终端并排 + 资料卡通栏
 *   矮屏 高≤520 .............. 手机横屏、浏览器放大 200%：压缩顶栏/页脚/留白，照片按屏高封顶并与文字并排
 *   矮笔记本 高≤720 ........... 1280×720 一类：收紧行距，让「关于我」不必滚动
 *   台式 / 2K / 4K / 带鱼屏 ... 根字号随屏放大（见文件开头 html 规则），内容区 72.5rem 封顶居中，流体背景铺满
 */

/* 平板与窄窗口 */
@media (max-width: 1080px) {
  .s-exp .wrap { grid-template-columns: 1fr; gap: 1.875rem; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards .card:last-child { grid-column: 1 / -1; min-height: 0; }
}
/* 平板竖屏：屏幕高而窄，「关于我」分三段，照片与终端并排，整屏不用滚动 */
@media (min-width: 761px) and (max-width: 1080px) and (orientation: portrait) {
  .about-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "eyebrow eyebrow" "title title" "photo term" "code code";
    column-gap: clamp(1.75rem, 4vw, 2.75rem);
    row-gap: 1.125rem;
    align-items: center;
  }
  .about-main { display: contents; }
  .about-main > .eyebrow { grid-area: eyebrow; }
  .about-main > .title { grid-area: title; }
  .about-main > .term { grid-area: term; }
  .about-main > .code { grid-area: code; }
  .portrait { grid-area: photo; justify-self: stretch; width: auto; }
  .p-card img { aspect-ratio: 3 / 4; object-position: 50% 18%; }
}

/* 手机竖屏 */
@media (max-width: 760px) {
  :root { --pad-x: 1.25rem; }
  .section { padding: 6rem 1.25rem 5.25rem; }
  .fp .section { padding: 5.375rem 2.75rem 4.875rem 1.25rem; padding-top: max(5.375rem, calc(var(--safe-t) + 4.75rem)); } /* 右侧 44px 整条留给导航点的触控区，不与内容重叠；顶部随顶栏一起让出刘海（安全区为 0 时仍是 86px） */
  .fp .s-home { padding-left: 2.75rem; } /* 首屏左右对称，姓名正居中 */
  .hud { padding: 1.125rem 1.25rem; padding-top: max(1.125rem, calc(var(--safe-t) + 0.5rem)); padding-left: max(1.25rem, calc(var(--safe-l) + 0.75rem)); padding-right: max(1.25rem, calc(var(--safe-r) + 0.75rem)); } /* 简写会冲掉基础样式里的安全区，这里补回：竖屏全屏网页容器里顶栏不进刘海 */
  .brand-path { display: none; }
  .brand-mark { width: 1.875rem; height: 1.875rem; }
  .cnt-lbl { min-width: 0; }
  .dots { right: 0; gap: 0; }
  .dots a { padding-right: 0.5625rem; } /* 横线仍离屏幕右缘 9px，触控区向内延伸 */
  .dots a::after { width: 0.5625rem; }
  .fp .dots a[aria-current="true"]::after { width: 1.125rem; }
  .dots b, .dots em { display: none; }
  .fp .frame { inset: 0.5625rem; }
  .fp .sys { display: none; }
  .kicker { letter-spacing: 0.32em; padding-left: 0.32em; }
  .pinyin { letter-spacing: 0.5em; padding-left: 0.5em; }
  .tagline { padding: 0.5625rem 1rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2.125rem; }
  .about-main { max-width: none; }
  .portrait { width: min(20.625rem, 76vw); }
  .p-card img { aspect-ratio: 4 / 5; object-position: 50% 16%; }
  .cards { grid-template-columns: 1fr; }
  .cards .card:last-child { grid-column: auto; }
  .card { min-height: 0; }
  .card h3 { margin-top: 0.625rem; }
  .term-body { padding: 0.875rem 1rem; font-size: 0.7812rem; }
  .code-body { font-size: 0.75rem; }
  .code-body .l::before { width: 2.6em; padding-right: 1em; text-indent: 0; }
  /* 代码卡与技能行在手机上折行显示，不再被卡片右缘截断：续行悬挂缩进到行号之后；
     site 那一行在 HTML 里于「zhengyuhao.」后放了 <wbr>，域名只在点号处断开 */
  .code-body code { min-width: 0; }
  .code-body .l { padding-left: 2.6em; padding-right: 0.75rem; text-indent: -2.6em; white-space: pre-wrap; overflow-wrap: anywhere; }
  .skills { padding: 0.875rem 1rem; font-size: 0.75rem; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
  .skills code { display: block; padding-left: 2ch; text-indent: -2ch; }
  .skills .cm { white-space: nowrap; } /* 注释整体换行，不把「/*」和内容拆开 */
  .win-title { margin-right: 0; }
  .tl { padding: 1.125rem 1.125rem; }
  .title { font-size: clamp(2rem, 9vw, 2.5rem); }
  .title-xl { font-size: clamp(2.75rem, 13vw, 3.75rem); }
}
/* 最窄的手机（iPhone SE 一代 320 宽 / 小屏安卓 360 宽） */
@media (max-width: 360px) {
  .name { font-size: clamp(4rem, 20vw, 4.875rem); }
  .tagline { gap: 0.4em; padding: 0.5rem 0.75rem; font-size: 0.75rem; }
}
/* 320 宽一类（≤359）：顶栏放不下「品牌名 + 计数器 + 区块名」（经历屏的 EXPERIENCE 最长），
   区块名与各屏标题重复，收起它，计数器只留「02 / 04」；360 宽放得下，保持原样 */
@media (max-width: 359px) {
  .cnt-lbl { display: none; }
}

/* 触屏（手机 + 平板）：没有悬停，所有可点的东西不小于 44×44 */
@media (pointer: coarse) {
  .dots { gap: 0; }
  .dots a { height: 2.75rem; min-width: 2.75rem; }
  /* 触屏没有悬停，标签本来就看不到：移出排版，触控区只剩 44×44 的横线区，不再向左伸进正文（平板、手机横屏）；文字仍留给读屏软件 */
  .dots b, .dots em { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .brand { min-height: 2.75rem; }
  .site-footer a { display: inline-block; padding: 0.875rem 0.375rem; margin: -0.875rem -0.375rem; }
}

/* 矮屏：手机横屏（844×390、932×430、800×360）、浏览器放大 200%（约 720×450）。
   顶栏、页脚、留白都压缩；照片按屏高封顶并与文字并排；内容超出一屏时区块内可滚动（首屏另有脚本兜底） */
@media (max-height: 520px) {
  .hud { padding-top: max(0.75rem, var(--safe-t)); padding-bottom: 0.75rem; }
  .brand-mark { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; }
  .fp .frame { inset: 0.5rem; }
  .fp .section { padding-top: 4.25rem; padding-bottom: 3.25rem; } /* 上：照片角标与顶栏留出间隙；下：滚到底时最后一行落在页脚暗底之上 */
  .fp .s-home { padding-top: 3.75rem; padding-bottom: 2.75rem; } /* 首屏没有照片与长内容，留白照旧，568×320 也能一屏放下、一划就翻页 */
  .fp .site-footer { padding-top: 0.875rem; padding-bottom: max(0.5rem, var(--safe-b)); font-size: 0.625rem; }
  .hint, .fp .sys { display: none; }
  .kicker { margin-bottom: 0.625rem; font-size: 0.6875rem; }
  .name { font-size: clamp(2.75rem, calc(var(--vh) * 17), 6rem); }
  .pinyin { margin-top: 0.625rem; font-size: 0.75rem; }
  .tagline { margin-top: 0.875rem; padding: 0.4375rem 1rem; font-size: 0.75rem; }
  .cta { margin-top: 1rem; }
  .cta .btn { height: 2.75rem; }
  .about-grid { grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 2.5rem); align-items: start; }
  .about-main { max-width: none; gap: 0.75rem; }
  .portrait { width: clamp(7.5rem, calc((calc(var(--vh) * 100) - 8.75rem) * 0.6667), 16rem); }
  .p-card img { aspect-ratio: 2 / 3; object-position: 50% 20%; }
  .portrait figcaption { margin-top: 0.625rem; font-size: 0.625rem; letter-spacing: 0.08em; white-space: nowrap; } /* 照片列只有约 170px 宽，原来的字距会把英文名折到第二行 */
  .p-tag { gap: 0.3125rem; padding: 0.25rem 0.4375rem; font-size: 0.625rem; letter-spacing: 0.04em; white-space: nowrap; } /* 屏高 320 时照片只有 120px 宽：原尺寸角标会折行，并伸出照片压到右侧标题 */
  .p-tl { top: 0.5rem; left: 0.5rem; }
  .p-br { right: 0.5rem; bottom: 0.5rem; }
  .title { font-size: clamp(1.75rem, calc(var(--vh) * 9), 2.5rem); }
  .title-xl { font-size: clamp(2.25rem, calc(var(--vh) * 12), 3.5rem); }
  .lead { font-size: 0.875rem; }
  .sec-head { gap: 0.5rem; }
  .sec-head::before, .contact-wrap::before { font-size: clamp(4.5rem, calc(var(--vh) * 26), 8rem); }
  .s-proj .sec-head::before { top: 0; } /* 装饰大编号不再上探到右上角计数器底下 */
  .win { height: 2rem; }
  .term-body { padding: 0.625rem 0.875rem; font-size: 0.75rem; line-height: 1.7; }
  .code-body { padding: 0.5rem 0 0.625rem; font-size: 0.75rem; line-height: 1.7; }
  .s-exp .wrap { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(1.25rem, 4vw, 2.5rem); }
  .timeline { gap: 0.625rem; }
  .tl { padding: 0.75rem 1rem; }
  .tl-meta { margin-bottom: 0.375rem; }
  .tl-meta::before { top: 1.0625rem; }
  .tl h3 { font-size: 1rem; line-height: 1.4; }
  .tl p:not(.tl-meta) { margin-top: 0.25rem; font-size: 0.8125rem; }
  .s-proj .sec-head { margin-bottom: 1rem; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .cards .card:last-child { grid-column: auto; }
  .card { min-height: 0; padding: 0.875rem; gap: 0.375rem; }
  .card h3 { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.4; }
  .card .tags::after { font-size: 2.75rem; }
  .skills { margin-top: 0.75rem; padding: 0.625rem 1rem; }
  .contact-wrap { gap: 0.75rem; }
  .actions { margin-top: 0.25rem; }
}

/* 矮笔记本（1280×720 一类）：收紧行距与间隔，「关于我」一屏放得下 */
@media (max-height: 720px) and (min-height: 521px) and (min-width: 761px) {
  .fp .section { padding-top: 5.75rem; padding-bottom: 4.5rem; }
  .card { min-height: 0; }
  .about-main { gap: 0.875rem; }
  .term-body, .code-body { line-height: 1.7; }
  .term-body { padding-top: 0.75rem; padding-bottom: 0.875rem; }
  .code-body { padding-top: 0.625rem; padding-bottom: 0.75rem; }
}

/* ---------- 减少动态效果：保留排版与配色，去掉位移、模糊、扫描与打字 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .boot, .fp .scanline, .fp.has-hover .cursor, .p-scan, .p-glare, .hint i::after { display: none; }
  .caret, .led, .no-webgl .bg-glow { animation: none; }
  .fp .is-entering .reveal, .fp[data-dir="-1"] .is-entering .reveal { animation: rmIn 0.3s ease both; animation-delay: 0ms; }
  .fp .section.is-leaving, .fp[data-dir="-1"] .section.is-leaving { animation: rmOut 0.22s ease forwards; }
  .p-card { transform: none; transition: none; }
  #fluid, .cnt-roll, .progress i, .btn, .btn::after, .card, .dots a::after { transition: none; }
  .fp.inner #fluid { transform: none; }
}
@keyframes rmIn { from { opacity: 0; } }
@keyframes rmOut { to { opacity: 0; } }
@keyframes aurora { to { transform: translate3d(-3%, 2%, 0) scale(1.08); } }