/* ═══════════════════════════════════════════════════════════════
   JEREMY.design — 「关卡编辑器 / 白盒蓝图」主题
   设计语言：蓝图网格 × 编辑器 HUD × 白盒线框
   所有组件按类名驱动 —— 新增作品只需复用现有类名即可自动获得
   完整的悬停 / 入场 / 选框效果（模板见各 section 末尾注释）。
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg-primary: #03100c;
  --bg-secondary: #061712;
  --bg-card: #092019;
  --bg-card-hover: #0d2a21;
  --text-primary: #efffe9;
  --text-secondary: #9bb8ab;
  --text-muted: #527568;
  --accent: #c5ff3d;
  --accent-soft: #e4ff8a;
  --accent-glow: rgba(197, 255, 61, 0.16);
  --accent2: #22dfbd;
  --accent2-glow: rgba(34, 223, 189, 0.12);
  --blueprint: #4cbd9f;
  --border: rgba(76, 189, 159, 0.12);
  --border-hover: rgba(197, 255, 61, 0.30);
  --radius: 14px;
  --font-cn: 'Noto Sans SC', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-display: 'Chakra Petch', 'Noto Sans SC', sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .5, 1);
  --grid-alpha: 0.05;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  scrollbar-width: thin;
  scrollbar-color: rgba(197, 255, 61, .55) var(--bg-primary);
}

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--accent), #638f16);
  border-radius: 8px;
  border: 2px solid var(--bg-primary);
}

::selection { background: rgba(197, 255, 61, .85); color: #0a0a0f; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-cn);
  overflow-x: hidden;
  line-height: 1.7;
}

/* ===== 蓝图网格底（全站固定层） ===== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(93, 150, 255, calc(var(--grid-alpha) * .9)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 150, 255, calc(var(--grid-alpha) * .9)) 1px, transparent 1px),
    linear-gradient(rgba(93, 150, 255, calc(var(--grid-alpha) * .45)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 150, 255, calc(var(--grid-alpha) * .45)) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, rgba(0,0,0,.35));
  transition: opacity .6s;
}

body > * { position: relative; z-index: 1; }

/* ===== 颗粒噪点 ===== */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9990;
}

/* ═══════════════════════════════════════════
   编辑器 HUD：视口边框 / 刻度尺 / 坐标读数
   （元素由 fx.js 注入，纯装饰，aria-hidden）
   ═══════════════════════════════════════════ */
.hud-frame { position: fixed; inset: 0; pointer-events: none; z-index: 9991; opacity: .8; }

.hud-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid rgba(76, 189, 159, .4);
}
.hud-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.hud-corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.hud-corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.hud-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.hud-ruler-x, .hud-ruler-y { position: absolute; opacity: .5; }
.hud-ruler-x {
  top: 0; left: 50%; transform: translateX(-50%);
  width: min(560px, 44vw); height: 7px;
  background: repeating-linear-gradient(90deg,
    rgba(76, 189, 159, .5) 0 1px, transparent 1px 20px);
}
.hud-ruler-y {
  left: 0; top: 50%; transform: translateY(-50%);
  height: min(400px, 40vh); width: 7px;
  background: repeating-linear-gradient(180deg,
    rgba(76, 189, 159, .5) 0 1px, transparent 1px 20px);
}

.hud-readout {
  position: fixed;
  left: 18px; bottom: 14px;
  z-index: 9992;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}
.hud-readout .rd-dot {
  width: 6px; height: 6px;
  background: var(--accent2);
  box-shadow: 0 0 8px var(--accent2);
  animation: blink 2.4s infinite;
}
.hud-readout .rd-mode { color: var(--accent2); }

/* ===== 顶部滚动进度条 ===== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: 10001;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft), var(--accent2));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* nav-boost 点击进度条配色对齐主题 */
#__nav_progress {
  background: linear-gradient(90deg, var(--accent), var(--accent-soft), var(--accent)) !important;
  box-shadow: 0 0 10px rgba(197, 255, 61, .7) !important;
}

/* ═══════════════════════════════════════════
   自定义准星光标（仅精确指针设备启用）
   ═══════════════════════════════════════════ */
html.fx.cursor-on, html.fx.cursor-on * { cursor: none !important; }

.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10002;
  will-change: transform;
}
.cursor-dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(197, 255, 61, .8);
}
.cursor-ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  opacity: .9;
  transition: opacity .25s;
}
.cursor-ring::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(236, 234, 228, .55);
  border-radius: 50%;
  transition: inset .22s var(--ease-out), border-color .22s, border-radius .22s;
}
/* 悬停可交互元素 → 圆环展开为编辑器选框 */
.cursor-ring.is-link::before {
  inset: 0;
  border-radius: 6px;
  border-color: var(--accent);
}
.cursor-ring .c-tick {
  position: absolute;
  width: 7px; height: 7px;
  opacity: 0;
  border-color: var(--accent);
  border-style: solid;
  border-width: 0;
  transition: opacity .2s, transform .25s var(--ease-spring);
}
.cursor-ring .c-tick.t1 { top: -3px; left: -3px; border-top-width: 2px; border-left-width: 2px; }
.cursor-ring .c-tick.t2 { top: -3px; right: -3px; border-top-width: 2px; border-right-width: 2px; }
.cursor-ring .c-tick.t3 { bottom: -3px; left: -3px; border-bottom-width: 2px; border-left-width: 2px; }
.cursor-ring .c-tick.t4 { bottom: -3px; right: -3px; border-bottom-width: 2px; border-right-width: 2px; }
.cursor-ring.is-link .c-tick { opacity: 1; }
.cursor-hidden .cursor-dot, .cursor-hidden .cursor-ring { opacity: 0; }

/* ═══════════════════════════════════════════
   导航栏
   ═══════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(7, 9, 14, 0.72);
  border-bottom: 1px solid var(--border);
  transition: padding .4s var(--ease-out), background .4s, box-shadow .4s;
}

nav.nav-scrolled {
  padding: 12px 48px;
  background: rgba(7, 9, 14, 0.92);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}

.nav-logo {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: text-shadow .3s;
}
.nav-logo::before {
  content: '';
  width: 9px; height: 9px;
  border: 1.5px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .5s var(--ease-spring), background .3s;
}
.nav-logo:hover::before { transform: rotate(225deg); background: var(--accent); }
.nav-logo::after {
  content: '▌';
  color: var(--accent2);
  font-size: 11px;
  animation: blink 1.2s steps(2) infinite;
}
.nav-logo:hover { text-shadow: 0 0 18px rgba(197, 255, 61, .8); }

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  position: relative;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 4px 2px;
  transition: color .3s;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .35s var(--ease-out);
}

.nav-links a:hover { color: var(--text-primary); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after { transform: scaleX(1); }

/* 移动端汉堡按钮（fx.js 注入） */
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--border-hover);
  border-radius: 9px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: border-color .3s;
}
.nav-burger span {
  display: block;
  width: 17px; height: 2px;
  background: var(--text-primary);
  transition: transform .35s var(--ease-out), opacity .25s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 移动端全屏菜单（fx.js 注入，链接文本克隆自 .nav-links） */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 32px 40px;
  gap: 6px;
  background: rgba(7, 9, 14, .96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 28px;
  font-weight: 700;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 14px;
  transform: translateY(18px);
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s, color .3s;
  transition-delay: calc(var(--i, 0) * 55ms);
}
.mobile-menu.open a { transform: translateY(0); opacity: 1; }
.mobile-menu a::before {
  content: counter(mm, decimal-leading-zero);
  counter-increment: mm;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}
.mobile-menu { counter-reset: mm; }
.mobile-menu a:active { color: var(--accent); }
body.menu-locked { overflow: hidden; }

/* ═══════════════════════════════════════════
   右侧关卡小地图（fx.js 依据导航自动生成）
   —— 新增 section + 导航链接后自动出现新节点
   ═══════════════════════════════════════════ */
.level-rail {
  position: fixed;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 10px 0;
}
.level-rail::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: 14px;
  width: 1px;
  background: linear-gradient(transparent, var(--border-hover) 15%, var(--border-hover) 85%, transparent);
}
.rail-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 6px 8px;
  text-decoration: none;
}
.rail-node .rail-label {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity .25s, transform .3s var(--ease-out), color .25s, visibility 0s .25s;
  white-space: nowrap;
  background: rgba(7, 9, 14, .85);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.rail-node .rail-dot {
  width: 13px; height: 13px;
  position: relative;
  flex-shrink: 0;
}
.rail-node .rail-dot::before {
  content: '';
  position: absolute; inset: 3.5px;
  background: var(--text-muted);
  transform: rotate(45deg);
  transition: background .3s, transform .4s var(--ease-spring), inset .3s;
}
.rail-node:hover .rail-label { opacity: 1; visibility: visible; transition-delay: 0s; transform: translateX(0); color: var(--text-secondary); }
.rail-node:hover .rail-dot::before { background: var(--text-secondary); }
.rail-node.active .rail-dot::before {
  inset: 1.5px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(197, 255, 61, .8);
  transform: rotate(225deg);
}
.rail-node.active .rail-label { opacity: 1; visibility: visible; transition-delay: 0s; transform: translateX(0); color: var(--accent); border-color: rgba(197, 255, 61, .35); }
.rail-node.visited .rail-dot::before { background: var(--accent2); }
.rail-node.visited.active .rail-dot::before { background: var(--accent); }

/* ═══════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 48px 80px;
  position: relative;
  overflow: hidden;
}

.hero-bg-grid {
  position: absolute;
  inset: -60px;
  background-image:
    linear-gradient(rgba(76, 189, 159, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 189, 159, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent);
  will-change: transform;
}

.hero-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.13;
  pointer-events: none;
  will-change: transform;
}
.hero-glow-1 { background: var(--accent); top: -200px; right: -100px; }
.hero-glow-2 { background: var(--accent2); bottom: -200px; left: -100px; opacity: 0.09; }

/* 漂浮白盒线框（fx.js 注入的装饰 SVG） */
.hero-cubes { position: absolute; inset: 0; pointer-events: none; }
.wf-cube {
  position: absolute;
  opacity: .16;
  animation: cubeFloat var(--dur, 14s) ease-in-out infinite alternate;
  will-change: transform;
}
.wf-cube svg { display: block; overflow: visible; }
.wf-cube path, .wf-cube polygon {
  fill: none;
  stroke: var(--blueprint);
  stroke-width: 1;
}
.wf-cube.c-accent path, .wf-cube.c-accent polygon { stroke: var(--accent); }
.wf-cube.c-teal path, .wf-cube.c-teal polygon { stroke: var(--accent2); }

@keyframes cubeFloat {
  from { transform: translate3d(0, -14px, 0) rotate(-2deg); }
  to   { transform: translate3d(0, 16px, 0) rotate(3deg); }
}

.hero-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 0.8s 0.3s forwards;
}
.hero-tag::before {
  content: '';
  width: 34px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  flex-shrink: 0;
}

.hero-name {
  font-family: var(--font-cn);
  font-weight: 900;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.1;
  margin-bottom: 8px;
  opacity: 0;
  animation: fadeUp 0.8s 0.5s forwards;
}
/* JS 逐字拆分后：容器立即可见，字符各自入场并支持悬停跳动 */
.hero-name.split { opacity: 1; animation: none; }
.hero-name .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.6em) rotate(4deg);
  animation: charUp .8s var(--ease-spring) forwards;
  animation-delay: calc(.45s + var(--ci) * .09s);
  transition: color .3s, text-shadow .3s, transform .3s var(--ease-spring);
}
.hero-name .char:hover {
  color: var(--accent);
  text-shadow: 0 0 30px rgba(197, 255, 61, .55);
  transform: translateY(-.08em);
}
@keyframes charUp {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

/* 英文名 → 白盒线框描边字 */
.hero-name-en {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(146, 154, 171, .75);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.8s 0.65s forwards;
  transition: -webkit-text-stroke-color .4s, text-shadow .4s;
}
.hero-name-en:hover {
  -webkit-text-stroke-color: var(--accent2);
  text-shadow: 0 0 32px rgba(47, 214, 189, .28);
}

.hero-title {
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 300;
  color: var(--text-secondary);
  max-width: 700px;
  opacity: 0;
  animation: fadeUp 0.8s 0.75s forwards;
}
.hero-title span.hl { color: var(--accent); font-weight: 500; }
.hero-title span.hl2 { color: var(--accent2); font-weight: 500; }

.hero-badges {
  display: flex;
  gap: 12px;
  margin-top: 40px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s 0.95s forwards;
}

.badge {
  padding: 8px 20px;
  border: 1px solid var(--border-hover);
  border-radius: 100px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  background: rgba(76, 189, 159, 0.03);
  transition: border-color .3s, color .3s, background .3s, transform .3s var(--ease-spring), box-shadow .3s;
  will-change: transform;
}
.badge:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
  box-shadow: 0 6px 22px rgba(197, 255, 61, .16);
}

.hero-scroll {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 3px;
  animation: pulse 2s infinite;
}
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  top: -8px; left: 0;
  width: 100%; height: 8px;
  background: #fff;
  animation: scrollDrip 1.8s ease-in infinite;
}
@keyframes scrollDrip {
  to { top: 44px; }
}

/* ═══════════════════════════════════════════
   Section 通用
   ═══════════════════════════════════════════ */
section {
  padding: 120px 48px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-label::after {
  content: '';
  flex: 1;
  max-width: 220px;
  height: 1px;
  background: linear-gradient(90deg, rgba(197, 255, 61, .5), transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1s var(--ease-out) .2s;
}
.section-label.rv-in::after { transform: scaleX(1); }

.section-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  margin-bottom: 16px;
  line-height: 1.3;
  font-family: var(--font-display);
}

.section-desc {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 60px;
  line-height: 1.8;
}

/* ===== 入场动画引擎（fx.js 赋予 .rv → 进入视口时 .rv-in） ===== */
html.fx .rv {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s ease calc(var(--rvd, 0) * 1ms),
    transform .8s var(--ease-out) calc(var(--rvd, 0) * 1ms);
  will-change: opacity, transform;
}
html.fx .rv.rv-in { opacity: 1; transform: translateY(0); }

/* ===== 编辑器选框四角（fx.js 为卡片注入 .bk 角标） ===== */
.bk {
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--accent);
  opacity: 0;
  transition: opacity .3s, transform .35s var(--ease-spring);
  pointer-events: none;
  z-index: 5;
}
.bk.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; transform: translate(6px, 6px); }
.bk.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; transform: translate(-6px, 6px); }
.bk.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; transform: translate(6px, -6px); }
.bk.br { bottom: -2px; right: -2px; border-left: none; border-top: none; transform: translate(-6px, -6px); }
.bk-host { position: relative; }
.bk-host:hover .bk { opacity: 1; transform: translate(0, 0); }

/* ═══════════════════════════════════════════
   About
   ═══════════════════════════════════════════ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.about-philosophy {
  padding: 40px;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: border-color .4s, box-shadow .4s;
}
.about-philosophy:hover {
  border-color: var(--border-hover);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.about-philosophy::before {
  content: '"';
  position: absolute;
  top: -20px; right: 20px;
  font-family: var(--font-display);
  font-size: 160px;
  color: rgba(197, 255, 61, 0.07);
  line-height: 1;
}

.philosophy-text {
  font-size: 18px;
  font-weight: 300;
  line-height: 2;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
}

.philosophy-inline-link {
  color: var(--accent2);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(47, 214, 189, 0.75);
  background: rgba(47, 214, 189, 0.08);
  border-radius: 4px;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.25s, text-decoration-color 0.25s, background 0.25s, box-shadow .25s;
}
.philosophy-inline-link::after {
  content: "↗";
  margin-left: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  opacity: 0.9;
  display: inline-block;
  transition: transform .25s var(--ease-out);
}
.philosophy-inline-link:hover {
  color: #fff;
  text-decoration-color: rgba(47, 214, 189, 1);
  background: rgba(47, 214, 189, 0.2);
  box-shadow: 0 0 0 1px rgba(47, 214, 189, .25);
}
.philosophy-inline-link:hover::after { transform: translate(2px, -2px); }
.philosophy-inline-link:focus-visible {
  outline: 2px solid rgba(47, 214, 189, 0.75);
  outline-offset: 2px;
}

.philosophy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  color: var(--accent2);
  text-decoration: none;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 1px;
  transition: all 0.25s;
}
.philosophy-link:hover {
  border-color: var(--accent2);
  background: var(--accent2-glow);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(47, 214, 189, .14);
}

.philosophy-ai-box {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-hover);
  border-left: 3px solid var(--accent2);
  border-radius: 10px;
  background: rgba(47, 214, 189, 0.06);
  transition: background .3s, border-color .3s;
}
.philosophy-ai-box:hover { background: rgba(47, 214, 189, 0.1); }
.philosophy-ai-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--accent2);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.philosophy-ai-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
}

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

.stat-card {
  padding: 28px 24px;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: border-color .35s, transform .35s var(--ease-out), box-shadow .35s;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.stat-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.stat-card:hover::after { transform: scaleX(1); }

.stat-number {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.about-info {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  transition: color .3s, transform .3s var(--ease-out);
}
.info-row:hover { color: var(--text-primary); transform: translateX(4px); }
.info-dot {
  width: 7px; height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform .4s var(--ease-spring), box-shadow .3s;
}
.info-row:hover .info-dot {
  transform: rotate(225deg);
  box-shadow: 0 0 10px rgba(197, 255, 61, .7);
}

/* ═══════════════════════════════════════════
   项目卡片
   ═══════════════════════════════════════════ */
.project-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 32px;
  position: relative;
  transition: border-color .45s, transform .45s var(--ease-out), box-shadow .45s;
  --mx: 50%;
  --my: 50%;
}
/* 鼠标追踪辉光（--mx/--my 由 fx.js 更新） */
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--mx) var(--my), rgba(255, 138, 88, .07), transparent 45%);
  opacity: 0;
  transition: opacity .4s;
  z-index: 2;
}
.project-card:hover::after { opacity: 1; }
.project-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-5px);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(197, 255, 61, .08);
}

.project-visual {
  min-height: 380px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 10, 20, 0.45), rgba(20, 15, 30, 0.35));
  pointer-events: none;
  z-index: 1;
  transition: opacity .5s;
}
.project-card:hover .project-visual::after { opacity: .55; }
.project-visual img { position: relative; z-index: 0; }

.project-cover-video, .project-cover-image {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
  transition: transform .8s var(--ease-out), filter .6s;
}
.project-card:hover .project-cover-video,
.project-card:hover .project-cover-image {
  transform: scale(1.06) translate(var(--pvx), var(--pvy));
  filter: saturate(1.12);
}

.project-visual-inner {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  opacity: 0.3;
  z-index: 0;
  transition: transform .6s var(--ease-spring), opacity .5s;
}
.project-card:hover .project-visual-inner {
  transform: scale(1.15) rotate(-6deg);
  opacity: .5;
}

.pv-meme { background: linear-gradient(135deg, #1a1028, #2a1530, #1a2030); }
.pv-meme > img { display: none; }
.pv-q { background: linear-gradient(135deg, #0a1a2a, #102030, #0a2028); }
.pv-sky { background: linear-gradient(135deg, #1a1520, #201828, #282030); }
.pv-revive { background: linear-gradient(135deg, #07111f, #102d4a, #102337); }
.pv-dislocation { background: #ecebe7; }

.project-award {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 100px;
  letter-spacing: 1px;
  box-shadow: 0 6px 20px rgba(197, 255, 61, .35);
  transition: transform .35s var(--ease-spring);
}
.project-card:hover .project-award { transform: translateY(-2px) rotate(-1.5deg); }

.project-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.project-type {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent2);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.project-type-note {
  font-family: var(--font-cn);
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.project-name {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 8px;
  font-family: var(--font-display);
}
.project-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.project-experience {
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
  padding: 10px 16px;
  background: var(--accent-glow);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
  line-height: 1.6;
  transition: background .3s, transform .3s var(--ease-out);
}
.project-card:hover .project-experience { background: rgba(197, 255, 61, .2); }

.project-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 24px;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.tag {
  padding: 4px 12px;
  background: rgba(47, 214, 189, 0.12);
  border: 1px solid rgba(47, 214, 189, 0.38);
  border-radius: 6px;
  font-size: 12px;
  color: #d6fff5;
  font-family: var(--font-mono);
  font-weight: 600;
  transition: transform .25s var(--ease-spring), background .25s, border-color .25s, box-shadow .25s;
}
.tag:hover {
  transform: translateY(-2px);
  background: rgba(47, 214, 189, 0.22);
  border-color: rgba(47, 214, 189, 0.7);
  box-shadow: 0 6px 16px rgba(47, 214, 189, .15);
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: gap 0.3s, color .3s;
}
.project-link::before {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .35s var(--ease-out);
}
.project-link:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.project-link:hover { gap: 14px; color: var(--accent-soft); }
.project-link::after { content: '→'; transition: transform 0.3s; }

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.project-card-whitebox { display: block; }
.project-content-whitebox { padding: 40px; }

.project-whitebox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(76, 189, 159, 0.015);
}
.project-whitebox-col {
  padding: 28px 24px;
  transition: background .35s;
  position: relative;
}
.project-whitebox-col::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent2), transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.project-whitebox-col:hover { background: rgba(76, 189, 159, 0.035); }
.project-whitebox-col:hover::before { transform: scaleX(1); }
.project-whitebox-col:nth-child(even) { border-left: 1px solid var(--border); }
.project-whitebox-col:nth-child(n+3) { border-top: 1px solid var(--border); }
.project-whitebox-col h4 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 14px;
}
.project-whitebox-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 8px;
}
.project-whitebox-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 1.62;
  object-fit: cover;
  filter: saturate(.82) contrast(1.03);
  transition: filter .35s, transform .45s var(--ease-out);
}
.project-whitebox-col:hover .project-whitebox-preview img {
  filter: saturate(1) contrast(1.05);
  transform: scale(1.025);
}
.project-whitebox-focus {
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
  padding: 10px 14px;
  background: var(--accent-glow);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  margin-bottom: 14px;
  line-height: 1.6;
}
.project-whitebox-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 16px;
}
.project-content-whitebox .project-tags { margin-bottom: 16px; }

/* 感受 → 手段：白盒卡内的情绪设计说明 */
.feel-block {
  margin-bottom: 16px;
  padding: 13px 15px 14px;
  border: 1px solid rgba(47, 214, 189, .22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(47, 214, 189, .055), transparent 72%);
}
.feel-want {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.feel-tag {
  font: 10px/1 var(--font-mono);
  font-weight: 400;
  letter-spacing: 1.2px;
  color: var(--accent2);
  border: 1px solid rgba(47, 214, 189, .35);
  border-radius: 4px;
  padding: 4px 6px;
}
.feel-how {
  list-style: none;
  counter-reset: fh;
  display: grid;
  gap: 7px;
}
.feel-how li {
  counter-increment: fh;
  position: relative;
  padding-left: 23px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-secondary);
}
.feel-how li::before {
  content: counter(fh);
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: rgba(47, 214, 189, .13);
  color: var(--accent2);
  font: 9px/15px var(--font-mono);
  text-align: center;
}
.feel-how b { color: var(--text-primary); font-weight: 700; }
.feel-note {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(47, 214, 189, .16);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-muted);
}
.feel-note em { font-style: normal; color: var(--accent2); font-weight: 700; }

/* ═══════════════════════════════════════════
   关卡工作流流程图（三线协同产出法）
   ═══════════════════════════════════════════ */
/* ── 流程图区块 ── */
.flow-block {
  margin-bottom: 34px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(7, 9, 14, .5);
  padding: 44px 46px 42px;
  position: relative;
  overflow: hidden;
  transition: border-color .35s, transform .35s var(--ease-out), box-shadow .35s;
}
.flow-block:hover {
  border-color: rgba(47, 214, 189, .4);
  transform: translateY(-4px);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .3);
}
.flow-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(93, 150, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 150, 255, .03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.flow-block > * { position: relative; z-index: 1; }
.flow-block > * { min-width: 0; }

.flow-kicker {
  color: var(--accent);
  font: 11px/1 var(--font-mono);
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.flow-head h3 {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.4;
  margin-bottom: 13px;
}
.flow-head p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.9;
  max-width: 760px;
}
.flow-head b { color: var(--accent); font-weight: 700; }

/* ── 流程图（SVG） ── */
.flow-diagram {
  margin: 30px -46px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
}
.flow-diagram svg {
  display: block;
  width: 100%;
  min-width: 880px;
  height: auto;
}
.flow-legend {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  font: 10px/1 var(--font-mono);
  letter-spacing: 1.2px;
}
.flow-legend .lg { display: inline-flex; align-items: center; gap: 7px; }
.flow-legend .lg::before {
  content: '';
  width: 16px;
  height: 2px;
  border-radius: 2px;
}
.flow-legend .ai { color: #7f9fd6; }
.flow-legend .ai::before { background: #7f9fd6; }
.flow-legend .me { color: var(--accent2); }
.flow-legend .me::before { background: var(--accent2); }
.fd-band { fill: rgba(76, 189, 159, .035); }
.fd-band.story { fill: rgba(197, 255, 61, .05); }
.fd-band.space { fill: rgba(111, 157, 224, .05); }
.fd-band.play  { fill: rgba(47, 214, 189, .05); }

.fd-box { fill: rgba(9, 12, 18, .92); stroke-width: 1; }
.fd-box.story { stroke: rgba(197, 255, 61, .45); }
.fd-box.space { stroke: rgba(111, 157, 224, .45); }
.fd-box.play  { stroke: rgba(47, 214, 189, .45); }

.fd-lane {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
}
.fd-lane.story { fill: var(--accent); }
.fd-lane.space { fill: #6f9de0; }
.fd-lane.play  { fill: var(--accent2); }

.fd-t { font-size: 14px; font-weight: 700; fill: var(--text-primary); }
.fd-s { font-size: 11.5px; fill: var(--text-secondary); }
.fd-s.dim { fill: #6c748a; }
.fd-div { stroke: rgba(76, 189, 159, .16); stroke-width: 1; }
.fd-role { font-size: 10.5px; }
.fd-role.ai { fill: #7f9fd6; }
.fd-role.me { fill: var(--accent2); }

.fd-arrow { fill: none; stroke-width: 1.2; }
.fd-arrow.story { stroke: rgba(197, 255, 61, .55); }
.fd-arrow.space { stroke: rgba(111, 157, 224, .55); }
.fd-arrow.play  { stroke: rgba(47, 214, 189, .55); }

.fd-cross {
  fill: none;
  stroke: rgba(160, 178, 208, .6);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}
.fd-cross.warm { stroke: rgba(197, 255, 61, .65); }

.fd-head { fill: #a0b2d0; }
.fd-head.warm { fill: var(--accent); }

.fd-al { font-size: 11px; fill: #a8b4c9; }
.fd-al.warm { fill: #ffb494; }

.fd-bar {
  fill: rgba(111, 157, 224, .07);
  stroke: rgba(111, 157, 224, .35);
  stroke-width: 1;
}

.flow-note {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.95;
}
.flow-note b { color: var(--text-primary); font-weight: 700; }
.flow-note em { font-style: normal; color: var(--accent2); font-weight: 700; }
/* ═══════════════════════════════════════════
   更多案例
   ═══════════════════════════════════════════ */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.case-card {
  padding: 28px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .35s, transform .35s var(--ease-out), background .35s, box-shadow .35s;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}
.case-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  background: var(--bg-card-hover);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.case-emoji {
  font-size: 24px;
  margin-bottom: 12px;
  display: inline-block;
  transition: transform .4s var(--ease-spring);
}
.case-card:hover .case-emoji { transform: scale(1.2) rotate(6deg); }
.case-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.case-card p {
  font-size: 13px;
  color: var(--text-muted);
}
.case-type {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 12px;
}

/* ═══════════════════════════════════════════
   设计思考（三栏分类）
   ═══════════════════════════════════════════ */
.analysis-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  gap: 28px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.analysis-category {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(76, 189, 159, 0.015);
  overflow: hidden;
  scroll-snap-align: start;
  position: relative;
  transition: border-color .4s;
}
.analysis-category:hover { border-color: var(--border-hover); }

.analysis-category-head { padding: 24px 22px 8px; }
.analysis-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent2);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.analysis-category-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}
.analysis-category-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.analysis-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* 分类内「展开更多」折叠：每栏默认只露 3 条 */
.analysis-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 2px;
  font: 11px/1 var(--font-mono);
  letter-spacing: 1.2px;
  color: var(--text-muted);
  transition: color .25s;
  -webkit-user-select: none;
  user-select: none;
}
.analysis-more > summary::-webkit-details-marker { display: none; }
.analysis-more > summary::before {
  content: '+';
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: border-color .25s, color .25s, background .25s;
}
.analysis-more[open] > summary::before { content: '−'; }
.analysis-more > summary:hover,
.analysis-more > summary:focus-visible { color: var(--accent2); }
.analysis-more > summary:hover::before,
.analysis-more > summary:focus-visible::before {
  border-color: rgba(47, 214, 189, .5);
  background: rgba(47, 214, 189, .08);
  color: var(--accent2);
}
.analysis-more-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.analysis-groups > .analysis-item { grid-column: 1 / -1; }

.analysis-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .3s, transform .3s var(--ease-out), box-shadow .3s;
  overflow: hidden;
}
.analysis-item:hover {
  border-color: var(--border-hover);
  transform: translateX(4px);
  box-shadow: -4px 12px 30px rgba(0, 0, 0, .25);
}

.analysis-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.analysis-header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform .35s var(--ease-out);
}
.analysis-header:hover { background: rgba(76, 189, 159, 0.03); }
.analysis-header:hover::before { transform: scaleY(1); }

.analysis-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 42px;
  flex-shrink: 0;
  transition: color 0.3s, text-shadow .3s;
}
.analysis-header:hover .analysis-num {
  color: var(--accent);
  text-shadow: 0 0 16px rgba(197, 255, 61, .45);
}

.analysis-info { flex: 1; }
.analysis-info h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  transition: color .3s;
}
.analysis-info p {
  font-size: 13px;
  color: var(--text-secondary);
}

.analysis-external {
  font-size: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  text-decoration: none;
  transition: color .3s, transform .3s var(--ease-out);
}
.analysis-header:hover .analysis-external {
  color: var(--accent);
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════
   联系
   ═══════════════════════════════════════════ */
.contact-section {
  text-align: center;
  padding: 160px 48px;
  border-top: 1px solid rgba(34, 223, 189, .28);
  background:
    radial-gradient(circle at 25% 35%, rgba(34, 223, 189, .16), transparent 34%),
    radial-gradient(circle at 75% 70%, rgba(197, 255, 61, .11), transparent 32%),
    linear-gradient(180deg, rgba(7, 29, 23, .82), rgba(3, 16, 12, .96));
}
.contact-section .section-label { justify-content: center; }
.contact-section .section-label::after { display: none; }
.contact-section .section-title { margin-bottom: 40px; }
.contact-section .section-title { color: #f4fff1; text-shadow: 0 0 28px rgba(34,223,189,.18); }
.contact-intro { max-width: 680px; margin: -18px auto 34px; color: #b9d9ca; font-size: 15px; }

.contact-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.contact-btn {
  padding: 14px 32px;
  border: 1px solid var(--border-hover);
  border-radius: 100px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-cn);
  font-size: 14px;
  cursor: pointer;
  transition: background .35s, border-color .35s, color .35s, transform .35s var(--ease-spring), box-shadow .35s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  will-change: transform;
}
.contact-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 12px 34px rgba(197, 255, 61, .3);
}
.contact-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  animation: beacon 3s infinite;
}
.contact-btn.primary:hover {
  background: #e85a28;
  transform: scale(1.05);
}
.contact-section .contact-btn { min-width: 220px; justify-content: center; border-width: 1px; font-weight: 700; }
.contact-section .contact-email { background: #20d8b6; border-color: #6fffe4; color: #021510; box-shadow: 0 10px 32px rgba(34,223,189,.18); }
.contact-section .contact-phone { background: #c5ff3d; border-color: #e4ff8a; color: #07110c; box-shadow: 0 10px 32px rgba(197,255,61,.16); }
.contact-section .contact-resume { background: linear-gradient(110deg,#25e4c1,#c5ff3d); border-color: #e8ffa8; color: #04120e; box-shadow: 0 10px 36px rgba(72,236,177,.22); }
.contact-section .contact-github { background: #102f27; border-color: rgba(146,255,221,.45); color: #effff8; }
.contact-section .contact-btn:hover { background: #f1ffe5; border-color: #fff; color: #04120e; transform: translateY(-4px) scale(1.02); box-shadow: 0 16px 38px rgba(117,255,200,.24); }
@keyframes beacon {
  0% { box-shadow: 0 0 0 0 rgba(197, 255, 61, .45); }
  70% { box-shadow: 0 0 0 16px rgba(197, 255, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(197, 255, 61, 0); }
}

/* ═══════════════════════════════════════════
   页脚
   ═══════════════════════════════════════════ */
footer {
  text-align: center;
  padding: 40px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════
   成就吐司（fx.js 注入）
   ═══════════════════════════════════════════ */
.toast-wrap {
  position: fixed;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  background: rgba(13, 17, 25, .92);
  border: 1px solid rgba(197, 255, 61, .4);
  border-radius: 12px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .5), 0 0 24px rgba(197, 255, 61, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: toastIn .5s var(--ease-spring) forwards, toastOut .4s ease-in 3.4s forwards;
}
.toast .t-icon { font-size: 20px; }
.toast .t-kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
}
.toast .t-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(24px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(14px) scale(.95); }
}

/* ═══════════════════════════════════════════
   白盒模式（彩蛋：Konami 或连点 logo ×5）
   ═══════════════════════════════════════════ */
body.whitebox {
  --accent: #98a0b3;
  --accent-soft: #c3c9d8;
  --accent-glow: rgba(152, 160, 179, .12);
  --accent2: #98a0b3;
  --accent2-glow: rgba(152, 160, 179, .08);
  --blueprint: #8fa3c8;
  --bg-card: #0d1016;
  --bg-secondary: #0a0d13;
  --grid-alpha: 0.16;
}
body.whitebox img,
body.whitebox video,
body.whitebox .case-emoji,
body.whitebox .project-visual-inner,
body.whitebox .project-award,
body.whitebox .t-icon {
  filter: saturate(0) contrast(1.05);
}
body.whitebox .pv-meme, body.whitebox .pv-q, body.whitebox .pv-sky, body.whitebox .pv-revive {
  background: repeating-linear-gradient(45deg, rgba(143, 163, 200, .05) 0 2px, transparent 2px 14px);
}
body.whitebox .pv-dislocation { background: #b9b8b4; }
body.whitebox .project-card,
body.whitebox .flow-block,
body.whitebox .flow-diagram svg,
body.whitebox .case-card,
body.whitebox .stat-card,
body.whitebox .analysis-item,
body.whitebox .analysis-category,
body.whitebox .about-philosophy {
  border-style: dashed;
  border-color: rgba(160, 172, 196, .35);
}
body.whitebox .tag {
  background: rgba(152, 160, 179, .1);
  border-color: rgba(152, 160, 179, .4);
  color: #cfd4de;
}

/* ═══════════════════════════════════════════
   封面鼠标方向视差(--pvx/--pvy 由 fx.js 更新)
   ═══════════════════════════════════════════ */
.project-visual { --pvx: 0px; --pvy: 0px; }

/* ═══════════════════════════════════════════
   蓝图显影:媒体进入视口时由蓝图线稿显影为成图
   (fx.js 赋 .bp → 进入视口 .bp-in → 动画结束移除)
   ═══════════════════════════════════════════ */
html.fx .bp { opacity: 0; }
html.fx .bp.bp-in { animation: bpDevelop 1.15s var(--ease-out) forwards; }
@keyframes bpDevelop {
  0% { opacity: 0; filter: grayscale(1) brightness(.65) sepia(1) hue-rotate(175deg) saturate(2.4) contrast(1.15); }
  40% { opacity: 1; filter: grayscale(1) brightness(.75) sepia(1) hue-rotate(175deg) saturate(2.2) contrast(1.1); }
  100% { opacity: 1; filter: none; }
}
.bp-scan {
  position: absolute;
  left: 0; right: 0; top: -3px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent2) 30%, #d9fff8 50%, var(--accent2) 70%, transparent);
  box-shadow: 0 0 16px rgba(47, 214, 189, .8);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.bp-scanning .bp-scan { animation: bpScan 1.15s ease-in-out forwards; }
@keyframes bpScan {
  0% { opacity: 1; top: -3px; }
  85% { opacity: 1; }
  100% { opacity: 0; top: 100%; }
}

/* ═══════════════════════════════════════════
   白盒模式:封面线稿化增强
   ═══════════════════════════════════════════ */
body.whitebox .project-cover-image,
body.whitebox .project-cover-video {
  filter: saturate(0) contrast(1.35) brightness(.85);
}
body.whitebox .project-visual {
  outline: 1px dashed rgba(160, 172, 196, .45);
  outline-offset: -6px;
}

/* ═══════════════════════════════════════════
   动画关键帧
   ═══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
}

/* ═══════════════════════════════════════════
   响应式
   ═══════════════════════════════════════════ */
@media (max-width: 1280px) {
  .level-rail { display: none; }
}

@media (max-width: 900px) {
  nav { padding: 16px 24px; }
  nav.nav-scrolled { padding: 12px 24px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .hud-frame, .hud-readout { display: none; }
  .hero { padding: 120px 24px 80px; }
  .wf-cube { opacity: .1; }
  section { padding: 80px 24px; }
  .about-grid { grid-template-columns: 1fr; }
  .project-card { grid-template-columns: 1fr; }
  .project-visual { min-height: 220px; }
  .project-whitebox-grid { grid-template-columns: 1fr; }
  .project-whitebox-col:nth-child(even) { border-left: none; }
  .project-whitebox-col:nth-child(n+2) {
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .flow-block { padding: 38px 32px 36px; }
  .cases-grid { grid-template-columns: 1fr 1fr; }
  .contact-section { padding: 100px 24px; }
  .analysis-groups {
    grid-template-columns: repeat(3, min(84vw, 340px));
    gap: 16px;
    scroll-snap-type: x mandatory;
    margin: 0 -24px;
    padding: 0 24px 12px;
  }
  .analysis-groups > .analysis-item { grid-column: auto; align-self: end; }
  .analysis-header { padding: 20px 18px; }
}

@media (max-width: 600px) {
  .flow-block { padding: 30px 16px 28px; border-radius: 14px; }
  .flow-head h3 { font-size: 22px; }
  .flow-diagram { margin: 24px -16px 0; padding-bottom: 6px; }
  .flow-note { font-size: 13px; }
  /* 白盒卡在窄屏只有 245px，感受→手段块必须收紧，否则单卡高度翻倍 */
  .feel-block { padding: 11px 12px 12px; }
  .feel-want { font-size: 12.5px; gap: 7px; margin-bottom: 8px; }
  .feel-how { gap: 6px; }
  .feel-how li { font-size: 12px; line-height: 1.7; padding-left: 20px; }
  .feel-how li::before { width: 14px; height: 14px; line-height: 14px; font-size: 8.5px; }
  .feel-note { font-size: 11.5px; margin-top: 9px; padding-top: 8px; }
  .cases-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr; }
  .hero-name-en { letter-spacing: 3px; }
  .contact-links { flex-direction: column; align-items: center; }
}

/* ═══════════════════════════════════════════
   无障碍：减弱动效偏好
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  html.fx .rv { opacity: 1; transform: none; }
  html.fx .bp { opacity: 1; animation: none; }
  .bp-scan { display: none; }
  .hero-tag, .hero-name, .hero-name-en, .hero-title, .hero-badges,
  .hero-name .char { opacity: 1; transform: none; animation: none; }
}

/* Jeremy Chen project palette */
.pv-time{background:radial-gradient(circle at 65% 35%,rgba(47,214,189,.32),transparent 38%),linear-gradient(145deg,#07151d,#14284a 55%,#123d3a)}
.pv-ruins{background:radial-gradient(circle at 35% 60%,rgba(93,150,255,.35),transparent 38%),linear-gradient(145deg,#101329,#222f63 55%,#5f321e)}
.pv-emotion{background:linear-gradient(135deg,#4e162e,#111a31 48%,#0d5262)}
.pv-luminance{background:radial-gradient(circle at 50% 50%,rgba(255,200,70,.38),transparent 25%),linear-gradient(145deg,#071c1d,#0f493b 60%,#12170d)}
.project-visual-inner{font-family:var(--font-display);font-size:clamp(80px,11vw,170px);font-weight:700;color:var(--accent2);text-shadow:0 0 24px currentColor;animation:floatCube 5s ease-in-out infinite}
.pv-ruins .project-visual-inner{color:var(--blueprint)}.pv-emotion .project-visual-inner{color:#a8f04d}.pv-luminance .project-visual-inner{color:#ffd34d}
#experience .case-card{cursor:default}

/* ============================================================
   TIME TEMPLE UI — stone slabs, crystal seams, rune geometry
   ============================================================ */
:root{--stone:#0a1914;--stone-hi:#10271f;--crystal:#2bf0c5;--rune:#caff45;--cut:18px}
body::before{background-image:linear-gradient(rgba(43,240,197,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(43,240,197,.045) 1px,transparent 1px),linear-gradient(30deg,transparent 48%,rgba(202,255,69,.025) 49% 51%,transparent 52%);background-size:84px 84px,84px 84px,168px 168px;mask-image:radial-gradient(ellipse 95% 85% at 50% 35%,#000 28%,transparent 88%)}

/* temple navigation slab */
nav{top:14px;left:50%;right:auto;width:min(1120px,calc(100% - 46px));transform:translateX(-50%);border:1px solid rgba(43,240,197,.25);border-radius:0;background:linear-gradient(180deg,rgba(16,39,31,.94),rgba(3,16,12,.9));clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);box-shadow:0 14px 45px rgba(0,0,0,.35),inset 0 1px rgba(202,255,69,.12)}
nav::before,nav::after{content:'◇';position:absolute;top:50%;transform:translateY(-52%);color:var(--rune);font-family:var(--font-mono);font-size:12px;text-shadow:0 0 12px var(--rune)}nav::before{left:12px}nav::after{right:12px}.nav-logo{margin-left:16px;letter-spacing:2px}.nav-logo::before{content:'⌁';color:var(--rune);margin-right:10px}.nav-links a{padding:8px 12px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.nav-links a.active,.nav-links a:hover{background:rgba(43,240,197,.08);color:var(--rune)}

/* ritual hero */
.hero{padding-top:170px}.hero::before{content:'';position:absolute;width:min(640px,62vw);aspect-ratio:1;right:-80px;top:115px;border:1px solid rgba(43,240,197,.14);border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(202,255,69,.16) 0 1deg,transparent 1deg 15deg);mask-image:radial-gradient(circle,transparent 0 47%,#000 47.5% 48%,transparent 48.5% 61%,#000 61.5% 62%,transparent 62.5%);animation:templeOrbit 42s linear infinite}.hero::after{content:'◇ ᚫ ◈ ᛟ ◇ ᚱ ◈ ᛞ';position:absolute;right:5%;top:48%;width:min(470px,44vw);text-align:center;color:rgba(202,255,69,.22);font-family:var(--font-mono);font-size:clamp(14px,1.6vw,24px);letter-spacing:1.1em;transform:rotate(-90deg);animation:runeBreath 5s ease-in-out infinite}@keyframes templeOrbit{to{transform:rotate(360deg)}}@keyframes runeBreath{50%{opacity:.35;filter:drop-shadow(0 0 10px var(--rune))}}.hero-tag{border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);border-color:rgba(202,255,69,.35);color:var(--rune);background:rgba(202,255,69,.045)}.hero-name{font-family:var(--font-cn);filter:drop-shadow(0 12px 0 rgba(0,0,0,.28))}.hero-name-en{color:var(--crystal);text-shadow:0 0 28px rgba(43,240,197,.25)}.badge{border-radius:0;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);background:linear-gradient(135deg,rgba(16,39,31,.9),rgba(3,16,12,.7));border-color:rgba(43,240,197,.24)}.badge::before{content:'◆';font-size:6px;color:var(--rune);margin-right:7px}

/* rune section headers */
section[id]{position:relative}.section-label{display:inline-flex;align-items:center;gap:12px;color:var(--rune);letter-spacing:2px}.section-label::before{content:'◇';font-size:15px;text-shadow:0 0 10px var(--rune)}.section-title{position:relative;padding-bottom:22px}.section-title::after{content:'';position:absolute;left:0;bottom:0;width:min(520px,75vw);height:8px;background:linear-gradient(90deg,var(--rune) 0 10%,transparent 10% 12%,var(--crystal) 12% 65%,transparent 65%);clip-path:polygon(0 40%,90% 40%,93% 0,100% 50%,93% 100%,90% 60%,0 60%)}

/* carved stone panels */
.about-philosophy,.stat-card,.about-info,.case-card,.project-card,.flow-block,.analysis-category{border-radius:0;border:1px solid rgba(43,240,197,.18);background:linear-gradient(145deg,rgba(16,39,31,.92),rgba(5,20,15,.94));clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));box-shadow:inset 0 1px rgba(202,255,69,.08),inset 0 -18px 50px rgba(0,0,0,.14)}.about-philosophy::after,.stat-card::after,.case-card::after{content:'⌁';position:absolute;right:14px;bottom:8px;color:rgba(202,255,69,.22);font-family:var(--font-mono)}.stat-card:hover,.case-card:hover{border-color:rgba(202,255,69,.55);transform:translateY(-5px);box-shadow:0 15px 36px rgba(0,0,0,.32),inset 0 0 30px rgba(43,240,197,.035)}.stat-number{color:var(--rune);text-shadow:0 0 18px rgba(202,255,69,.18)}.info-dot{border-radius:0;transform:rotate(45deg);background:var(--crystal);box-shadow:0 0 9px var(--crystal)}

/* project altar cards */
.project-card{--cut:24px;overflow:visible;position:relative}.project-card::before{content:'◆';position:absolute;z-index:5;left:calc(42% - 7px);top:50%;transform:translateY(-50%) rotate(45deg);width:14px;height:14px;font-size:0;background:var(--rune);box-shadow:0 0 18px rgba(202,255,69,.65)}.project-card:hover{border-color:rgba(202,255,69,.55);transform:translateY(-7px);box-shadow:0 28px 70px rgba(0,0,0,.42),0 0 35px rgba(43,240,197,.07)}.project-visual{clip-path:polygon(22px 0,100% 0,100% 100%,0 100%,0 22px);border-right:1px solid rgba(202,255,69,.28)}.project-award{border-radius:0;background:rgba(3,16,12,.82);border:1px solid rgba(202,255,69,.34);color:var(--rune);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}.project-type{color:var(--rune);letter-spacing:2px}.project-name{font-family:var(--font-cn)}.project-experience{border-left:0;border-top:1px solid rgba(43,240,197,.24);border-bottom:1px solid rgba(43,240,197,.12);background:rgba(43,240,197,.035);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}.tag{border-radius:0;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}

/* altar buttons */
.project-link,.contact-btn{border-radius:0;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);padding-left:26px;padding-right:26px;letter-spacing:1px}.project-link::before,.contact-btn::before{content:'◇';margin-right:8px}.project-link:hover,.contact-btn:hover{background:var(--rune);color:#07110c;box-shadow:0 0 26px rgba(202,255,69,.3)}

/* crystal map rail + cursor */
.rail-dot{border-radius:0;transform:rotate(45deg);border-color:rgba(43,240,197,.5)}.rail-node.active .rail-dot{background:var(--rune);box-shadow:0 0 16px var(--rune);transform:rotate(45deg) scale(1.25)}.rail-label{border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:rgba(6,23,18,.94)}.cursor-dot{border-radius:0!important;transform:rotate(45deg)}.cursor-ring{border-radius:0!important;transform:rotate(45deg);border-color:rgba(43,240,197,.55)}.hud-corner{border-color:rgba(202,255,69,.38);width:28px;height:28px}.scroll-progress{height:3px;background:linear-gradient(90deg,transparent,var(--crystal),var(--rune),var(--crystal),transparent);box-shadow:0 0 12px rgba(43,240,197,.35)}

@media(max-width:760px){nav{top:8px;width:calc(100% - 18px)}.hero::before{right:-45vw;top:180px;width:100vw}.hero::after{display:none}.project-card::before{left:50%;top:38%;display:none}.project-visual{border-right:0;border-bottom:1px solid rgba(202,255,69,.25)}}

/* design philosophy */
.philosophy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px}.philosophy-card{position:relative;min-height:270px;padding:30px 24px;border:1px solid rgba(43,240,197,.18);background:linear-gradient(155deg,rgba(16,39,31,.95),rgba(4,17,13,.95));clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);transition:transform .35s var(--ease-out),border-color .35s,background .35s}.philosophy-card::after{content:'◇';position:absolute;right:16px;top:14px;color:rgba(202,255,69,.28)}.philosophy-card:hover{transform:translateY(-8px);border-color:rgba(202,255,69,.55);background:linear-gradient(155deg,rgba(21,55,43,.97),rgba(5,22,17,.97))}.philosophy-card>span{font-family:var(--font-mono);font-size:12px;color:var(--rune);letter-spacing:2px}.philosophy-card h3{font-size:21px;margin:40px 0 16px}.philosophy-card p{font-size:13px;line-height:1.9;color:var(--text-secondary)}

/* full-time role */
.work-feature{margin-top:42px;border:1px solid rgba(202,255,69,.3);background:linear-gradient(135deg,rgba(12,35,27,.97),rgba(3,16,12,.98));clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);overflow:hidden}.work-meta{display:flex;justify-content:space-between;padding:16px 24px;border-bottom:1px solid rgba(43,240,197,.14);font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px}.work-status{color:var(--rune)}.work-status::before{content:'';display:inline-block;width:7px;height:7px;margin-right:8px;background:var(--rune);transform:rotate(45deg);box-shadow:0 0 10px var(--rune)}.work-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:38px 34px}.work-heading p{font-size:14px;color:var(--crystal);margin-bottom:8px}.work-heading h3{font-size:clamp(38px,5vw,70px);line-height:1}.work-heading>strong{text-align:right;font-family:var(--font-display);font-size:13px;line-height:1.5;letter-spacing:2px;color:var(--text-muted)}.work-responsibilities{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(43,240,197,.14)}.work-responsibilities>div{position:relative;min-height:210px;padding:26px 22px;border-right:1px solid rgba(43,240,197,.12)}.work-responsibilities>div:last-child{border-right:0}.work-responsibilities span{font-family:var(--font-mono);font-size:10px;color:var(--rune)}.work-responsibilities h4{font-size:17px;margin:25px 0 10px}.work-responsibilities p{font-size:12px;line-height:1.85;color:var(--text-secondary)}

/* project image upload slots */
.project-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:saturate(.9) contrast(1.04);transition:transform .8s var(--ease-out),filter .5s}.project-cover-image:not([hidden])+.project-visual-inner{display:none}.project-card:hover .project-cover-image{transform:scale(1.045);filter:saturate(1.05) contrast(1.06)}.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.project-gallery figure{position:relative;min-height:92px;margin:0;overflow:hidden;border:1px solid rgba(43,240,197,.18);background:rgba(3,16,12,.65);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.project-gallery img{display:block;width:100%;height:92px;object-fit:cover;transition:transform .4s}.project-gallery figure:hover img{transform:scale(1.06)}.project-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;background:linear-gradient(transparent,rgba(3,16,12,.9));font-size:9px;letter-spacing:1px;color:#fff}.project-gallery figure.missing{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,rgba(43,240,197,.025) 0 8px,transparent 8px 16px)}.project-gallery figure.missing img{display:none}.project-gallery figure.missing::after{content:'◇  ' attr(data-label) ' · 待上传';font-family:var(--font-mono);font-size:9px;letter-spacing:1px;color:var(--text-muted)}.project-gallery figure.missing figcaption{display:none}

@media(max-width:980px){.philosophy-grid,.work-responsibilities{grid-template-columns:1fr 1fr}.work-responsibilities>div:nth-child(2){border-right:0}.work-responsibilities>div:nth-child(-n+2){border-bottom:1px solid rgba(43,240,197,.12)}}
@media(max-width:620px){.philosophy-grid,.work-responsibilities{grid-template-columns:1fr}.work-heading{display:block;padding:28px 22px}.work-heading>strong{display:block;text-align:left;margin-top:22px}.work-responsibilities>div{border-right:0!important;border-bottom:1px solid rgba(43,240,197,.12);min-height:0}.project-gallery{grid-template-columns:1fr}.project-gallery figure,.project-gallery img{height:120px}}
/* About / resume page ----------------------------------------------------- */
.about-page{background:#07130f;color:#e6f4ed}
.profile-shell{width:min(1220px,calc(100% - 48px));margin:0 auto;padding:150px 0 80px}
.profile-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:72px;align-items:end;padding:34px 0 54px;border-bottom:1px solid rgba(81,255,190,.28)}
.profile-hero h1{margin:10px 0 4px;font-size:clamp(54px,7vw,104px);line-height:.94;letter-spacing:-.06em;color:#ecfff6}
.profile-hero h1 em{font-family:'Chakra Petch',sans-serif;font-size:.46em;font-style:normal;color:#b7ff42;letter-spacing:-.02em}
.profile-role{font-family:'Space Mono',monospace;color:#58f5bc;letter-spacing:.12em}
.profile-summary{margin:0;color:#a9c5b8;font-size:16px;line-height:1.9}
.profile-layout{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(290px,.8fr);gap:42px;margin-top:58px;align-items:start}
.profile-section{scroll-margin-top:110px;margin-bottom:54px}
.profile-section-head{display:flex;align-items:center;gap:14px;margin:0 0 20px}
.profile-section-head:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(81,255,190,.34),transparent)}
.profile-section-head span{font-family:'Space Mono',monospace;font-size:11px;color:#b7ff42;border:1px solid rgba(183,255,66,.42);padding:5px 7px;transform:rotate(-2deg)}
.profile-section-head h2{font-size:25px;margin:0;white-space:nowrap}
.resume-card{position:relative;margin-bottom:22px;padding:30px 32px;background:linear-gradient(145deg,rgba(15,42,32,.96),rgba(8,25,19,.98));border:1px solid rgba(81,255,190,.27);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));box-shadow:8px 8px 0 rgba(13,67,48,.42)}
.resume-card:before{content:"";position:absolute;left:0;top:30px;width:3px;height:44px;background:#58f5bc;box-shadow:0 0 18px #58f5bc}
.resume-card.current-card{border-color:rgba(183,255,66,.48)}
.resume-card-head{display:flex;justify-content:space-between;gap:24px;margin-bottom:22px}
.resume-company{margin:0 0 5px;color:#eafff5;font-size:18px;font-weight:700}
.resume-card h3{margin:0 0 7px;font-size:23px}
.resume-card strong{color:#58f5bc;font-size:14px;font-weight:600}
.resume-card time{font-family:'Space Mono',monospace;font-size:12px;color:#b7c9c0;white-space:nowrap;padding-top:5px}
.resume-details{margin:0;display:grid;gap:11px}
.resume-details div{display:grid;grid-template-columns:52px 1fr;gap:10px}
.resume-details dt{font-weight:700;color:#b7ff42}
.resume-details dd{margin:0;color:#b6c9c0;line-height:1.75}
.profile-side{position:sticky;top:105px}
.side-group{margin-bottom:38px}
.side-card{padding:24px 24px 25px;margin-bottom:18px;background:rgba(12,34,26,.86);border:1px solid rgba(81,255,190,.23);border-bottom:4px solid rgba(81,255,190,.28);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.side-card>span{display:block;color:#58f5bc;font-size:22px;margin-bottom:14px}
.side-card h3{margin:0 0 8px;font-size:18px}
.side-card p{margin:0 0 6px;color:#b2c7bc;line-height:1.65}
.side-card small{color:#758f82}
.side-card a{display:inline-block;margin-top:12px;color:#b7ff42;text-decoration:none;font-size:13px}
.games-section{margin:14px 0 52px}
.games-intro{color:#a9c5b8;margin:-5px 0 20px}
.games-card{padding:32px 34px;background:linear-gradient(145deg,rgba(15,42,32,.96),rgba(8,25,19,.98));border:1px solid rgba(81,255,190,.27);box-shadow:8px 8px 0 rgba(13,67,48,.42);display:grid;gap:22px}
.games-card>div{display:grid;grid-template-columns:190px 1fr;gap:28px;padding-bottom:20px;border-bottom:1px solid rgba(81,255,190,.13)}
.games-card>div:last-child{border-bottom:0;padding-bottom:0}
.games-card h3{margin:0;color:#b7ff42;font-size:15px}
.games-card p{margin:0;color:#bdcec6;line-height:1.8}
.games-card p strong{color:#e8fff4;font-weight:600}
.games-note{font-size:12px;color:#708a7d;margin-top:14px}
.profile-actions{display:flex;gap:12px;justify-content:center;margin:10px 0 30px}
.career-section .career-layout{margin-top:42px}
.career-section .profile-section{padding:0;margin-bottom:48px}
.career-section .games-section{padding:0;margin-top:10px}
.career-section .profile-side{top:120px}
@media(max-width:900px){.profile-shell{width:min(100% - 30px,720px);padding-top:115px}.profile-hero,.profile-layout{grid-template-columns:1fr}.profile-hero{gap:26px}.profile-side{position:static}.resume-card-head{flex-direction:column;gap:8px}.games-card>div{grid-template-columns:1fr;gap:7px}.profile-hero h1{font-size:60px}}
@media(max-width:560px){.profile-shell{width:min(100% - 22px,520px)}.resume-card,.games-card{padding:24px 20px}.resume-details div{grid-template-columns:1fr;gap:3px}.profile-hero h1{font-size:48px}.profile-section-head h2{font-size:21px}}