/* ══════════════════════════════════════════════════════════════════════
   PaperWay 官网 · 论文排版房
   ══════════════════════════════════════════════════════════════════════
   A · cold-steel foundry, one blue accent, warm paper for the excursion
   B · Inter 800/900 display · 400/15 body · mono tick labels · tight tracking
   C · pinned 3D corridor (six stations) → readout band → asymmetric capability
       → editorial app rows → paper-white inversion → period close
   D · scroll-driven camera translateZ + station focus-pull + ring/bars/diff
   E · type-case walls of mirrored sorts, vanishing-point light, ribbed floor
   ══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url(fonts/inter-latin-900-normal.woff2) format('woff2')}

:root{
  --bg:#0B0F16;
  --bg-2:#0E141D;
  --panel:#111826;
  --panel-2:#151E2C;

  --ink:#EDF1F7;
  --ink-2:#A8B7CB;
  --ink-3:#78899F;

  --line:rgba(var(--t),.105);
  --line-2:rgba(var(--t),.055);

  --acc:#5B9CFF;
  --acc-2:#2563EB;
  --acc-soft:rgba(var(--a),.14);

  --paper:#F4F2EC;
  --paper-2:#E9E5DA;
  --paper-line:rgba(18,24,34,.13);
  --ink-p:#121822;
  --ink-p2:#4C5566;

  --r:14px;
  --r-sm:9px;
  --r-lg:20px;

  --wrap:1260px;
  --nav-h:64px;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  /* 长廊几何常数：JS 读取，断点改写 */
  --st:820px;        /* 工位间距 */
  --bench-x:360px;   /* 工位铭牌横向偏移 */
  --bench-w:380px;   /* 工位铭牌宽 */

  /* ── 主题色基：整套透明层都由这几个基色派生 ────────────────────────
     浅色主题只翻转这几个值，全站 60+ 处描边/分隔/阴影/光晕一次性适配。
     ⚠️ 新增半透明色一律写成 rgba(var(--t),.xx) 这种形式，别再写死 rgba。 */
  --t:255,255,255;   /* 提亮层：描边、分隔线、轨道、纸上的白 */
  --a:91,156,255;    /* 强调色的透明变体 */
  --s:0,0,0;         /* 投影 */

  /* 长廊内的浮层底色（浅色主题要翻成纸白，故不能与 --bg 合并） */
  --ov:11,15,22;     /* 浮层/导航底 */
  --vi:6,9,14;       /* 暗角 */
  --inv:244,242,236; /* 反转段底色：暗主题下反转段是纸白 */
  /* 顶栏吸顶时的不透明度。浅色主题要更实：长廊里的活字笔画会从半透明栏底下透出来，
     浅底+深字透出来比暗底+浅字刺眼得多（实测浅色下 0.82 能明显看到字穿插在导航文字里）。 */
  --nav-a:.82;

  /* 长廊：几何图 + 四层覆盖 */
  --hall-bg:radial-gradient(120% 100% at 62% 47%,#131C2A 0%,#0D131C 38%,#0B0F16 72%);
  --far:radial-gradient(circle,rgba(206,226,255,.20) 0%,rgba(120,165,240,.07) 34%,transparent 62%);
  --vig-g:radial-gradient(115% 92% at 62% 47%,transparent 34%,rgba(6,9,14,.55) 74%,rgba(6,9,14,.9) 100%);
  --scrim:linear-gradient(100deg,rgba(11,15,22,.9) 0%,rgba(11,15,22,.58) 20%,rgba(11,15,22,.16) 38%,transparent 52%);
  --cue:linear-gradient(0deg,rgba(11,15,22,.9),transparent);

  /* 玻璃面板 */
  --glass:linear-gradient(160deg,rgba(24,33,48,.88),rgba(14,20,30,.9));
  --glass-2:linear-gradient(158deg,rgba(30,43,64,.9),rgba(13,19,28,.94));
  --glass-sh:0 22px 54px rgba(var(--s),.5);
  --glass-inset:inset 0 1px 0 rgba(var(--t),.05);

  /* 工位铭牌（暗主题是亮牌，浅主题翻成墨牌） */
  --bench-bg:linear-gradient(158deg,#EDF2FB,#C4D3E9);
  --bench-ink:#0E1520;
  --bench-sub:#5B6879;
  --bench-bd:rgba(255,255,255,.34);
  --bench-div:rgba(16,24,36,.14);
  --bench-acc:var(--acc-2);
  --bench-sh:0 26px 70px rgba(var(--s),.55),0 0 52px rgba(var(--a),.20);

  /* Word 纸样：两个主题下都是白纸，故与 --paper 分开 */
  --sheet:#FFFFFF;
  --sheet-ink:#121822;

  /* 反转段（.why / nav.is-paper）里的次要文字，与底同向反转。
     原 #8B8375 压在纸白上只有 3.35:1，加深到 5.2:1。 */
  --inv-sub:#6E6555;
  /* 深底上的强调色亮版（浅色主题的强调色本身已经够深） */
  --acc-hi:#93BCFF;
}

/* ── 浅色主题 ─────────────────────────────────────────────────────────
   ⚠️ 两条铁律（2026-09-17 修）：
   ① 浅色主题里「抬升面」必须比页面底**更亮**。`--bg-2` 原为 #E9EDF3，比页面底
      #F2F4F8 更暗 —— 于是所有卡片（.card）与能力段（.cap/.cap__row）在浅色下
      都渲染成「比页面更深的一块灰」，黄老师反馈的「卡片还是有深色」就是这个。
      暗色主题里 --bg-2 比 --bg 亮（#0E141D > #0B0F16），方向本来就是对的。
   ② `.why` 反转段不再翻成深墨。原设计让浅色主题的 `.why` 变成 #121822 的黑带
      （对称于暗色主题下的纸白带），但浅色用户只会看到「整页浅色里一块黑」。
      浅色主题改用比页面略深的浅灰蓝（#E7EBF2）—— 仍然是一段「不同色的带」，
      但全程是浅色，与页面统一。 */
:root[data-theme='light']{
  --bg:#F2F4F8;
  --bg-2:#FFFFFF;      /* 卡片/能力段：白色，比页面底更亮（原 #E9EDF3 偏暗） */
  --panel:#F5F8FE;     /* hover 态：浅蓝，保持可见的悬停反馈 */
  --panel-2:#F7F9FC;

  --ink:#131A24;
  --ink-2:#47536A;
  /* 第三级文字压在 #F2F4F8 上必须 ≥4.5:1，实测 #6E7B90 只有 3.89，故加深到 4.9:1 */
  --ink-3:#5F6B7E;

  /* 浅底上 #2563EB 压 #E9EDF3 只有 4.4:1，深一档到 5.3:1 才够 AA */
  --acc:#1F55DA;
  --acc-2:#1D4ED8;

  /* 反转段（.why）：浅色下走「浅灰蓝底 + 深墨字」，不再翻成黑带 */
  --paper:#E7EBF2;
  --paper-2:#DDE3EC;
  --paper-line:rgba(19,26,36,.10);
  --ink-p:#131A24;
  --ink-p2:#4A566B;

  --t:19,26,36;
  --a:37,99,235;
  --s:120,132,152;
  --ov:242,244,248;
  --nav-a:.94;
  --vi:150,162,182;
  --inv:231,235,242;   /* nav.is-paper：与 .why 的浅底同色（原 18,24,34 → 黑栏） */

  --hall-bg:radial-gradient(120% 100% at 62% 47%,#E7ECF4 0%,#EDF0F6 38%,#F2F4F8 72%);
  --far:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(186,212,255,.32) 34%,transparent 62%);
  --vig-g:radial-gradient(115% 92% at 62% 47%,transparent 42%,rgba(140,152,172,.26) 78%,rgba(118,130,150,.46) 100%);
  --scrim:linear-gradient(100deg,rgba(242,244,248,.94) 0%,rgba(242,244,248,.64) 20%,rgba(242,244,248,.18) 38%,transparent 52%);
  --cue:linear-gradient(0deg,rgba(242,244,248,.92),transparent);

  --glass:linear-gradient(160deg,rgba(255,255,255,.92),rgba(243,246,251,.94));
  --glass-2:linear-gradient(158deg,rgba(255,255,255,.94),rgba(236,242,250,.96));
  --glass-sh:0 16px 40px rgba(120,132,152,.16);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.9);

  /* 铭牌在浅色长廊上**仍然用亮牌**，不翻成墨牌。
     原因：铭牌到站时会淡到 0.4 让位给内容面板 —— 深墨牌一淡化就糊成一块半透明灰雾，
     牌上的浅字随之失去对比（实测到站态文字只剩约 1.2:1，等于读不出来），
     整块看着像「白色模式里的一块黑」。浅色主题改靠更重的投影把白牌从墙面上托起来。 */
  --bench-bg:linear-gradient(158deg,#F7FAFF,#D3DEED);
  --bench-ink:#141D2A;
  --bench-sub:#59667A;
  --bench-bd:rgba(255,255,255,.55);
  --bench-div:rgba(16,24,36,.13);
  --bench-acc:#1D4ED8;
  --bench-sh:0 20px 48px rgba(28,42,62,.22),0 0 46px rgba(37,99,235,.14);

  --inv-sub:#5A6473;   /* .rule--ink 标签 + is-paper 副文字：压 #E7EBF2 实测 5.0:1（#6E7B90 只有 3.6:1） */
  --acc-hi:#1D4ED8;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd,dt,figure{margin:0}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:700}
em{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4.4vw,56px)}

/* ── 纸纹 ─────────────────────────────────────────────────────────── */
.grain{
  position:fixed;inset:0;z-index:80;pointer-events:none;
  background-image:url(grain.svg);background-size:200px 200px;
  opacity:.05;
}

.skip{
  position:fixed;top:-60px;left:16px;z-index:200;
  padding:10px 16px;border-radius:var(--r-sm);
  background:var(--acc-2);color:#fff;font-weight:600;font-size:14px;
  transition:top .18s ease;
}
.skip:focus{top:12px}

/* ── 导航 ─────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(var(--ov),var(--nav-a));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-2);
}
.nav.is-paper{background:rgba(var(--inv),var(--nav-a));border-bottom-color:var(--paper-line)}
.nav__in{display:flex;align-items:center;gap:16px;height:var(--nav-h)}

.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__mark{flex:0 0 auto;border-radius:9px}
.brand__txt{font-weight:800;font-size:18px;letter-spacing:-.03em}
.brand__txt em{color:var(--acc)}
.brand__sub{
  font:500 11px/1 var(--mono);letter-spacing:.1em;
  color:var(--ink-3);padding-left:11px;margin-left:2px;border-left:1px solid var(--line);
}

.nav__links{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav__links a{
  font-size:14.5px;font-weight:500;color:var(--ink-2);
  position:relative;padding:6px 0;transition:color .2s;
}
.nav__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}

.nav__act{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.nav__login{font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .2s}

/* ── 主题切换：暗底上显示太阳（点了变亮），亮底上显示月亮 ───────────── */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:10px;
  border:1px solid var(--line);color:var(--ink-2);
  transition:color .2s,border-color .2s,background .2s,transform .15s;
}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle__moon{display:none}
:root[data-theme='light'] .theme-toggle__sun{display:none}
:root[data-theme='light'] .theme-toggle__moon{display:block}
.theme-toggle:hover{color:var(--ink);border-color:rgba(var(--t),.3);background:rgba(var(--t),.055)}
.theme-toggle:active{transform:scale(.94)}
.nav.is-paper .theme-toggle{color:var(--ink-p2);border-color:var(--paper-line)}
.nav.is-paper .theme-toggle:hover{color:var(--ink-p)}
.nav__login:hover{color:var(--ink)}
.nav.is-paper .nav__links a,.nav.is-paper .nav__login{color:var(--ink-p2)}
.nav.is-paper .nav__links a:hover,.nav.is-paper .nav__login:hover{color:var(--ink-p)}
.nav.is-paper .brand__txt{color:var(--ink-p)}
.nav.is-paper .brand__sub{color:var(--inv-sub);border-color:var(--paper-line)}

/* ── 按钮 ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:10px;font-weight:600;letter-spacing:-.01em;
  transition:transform .2s cubic-bezier(.4,0,.2,1),background .2s,box-shadow .25s,border-color .2s;
  white-space:nowrap;
}
.btn--sm{height:38px;padding:0 16px;font-size:14px}
.btn--lg{height:52px;padding:0 24px;font-size:16px}
.btn--primary{background:var(--acc-2);color:#fff;box-shadow:0 8px 24px rgba(37,99,235,.30)}
.btn--primary:hover{background:#1D4FD8;transform:translateY(-2px);box-shadow:0 14px 34px rgba(37,99,235,.42)}
.btn--ghost{border:1px solid var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:rgba(var(--t),.28);background:rgba(var(--t),.045);transform:translateY(-2px)}
.btn__arw{width:16px;height:16px;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.btn:hover .btn__arw{transform:translateX(3px)}

/* ── 小节刻度线 ───────────────────────────────────────────────────── */
.rule{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.rule::after{content:'';flex:1;height:1px;background:var(--line)}
.rule span{
  font:600 11px/1 var(--mono);letter-spacing:.18em;
  color:var(--ink-3);order:-1;
}
.rule--ink::after{background:var(--paper-line)}
.rule--ink span{color:var(--inv-sub)}

/* ── 滚动揭示 ─────────────────────────────────────────────────────── */
[data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
[data-reveal].is-in{opacity:1;transform:none}

.h2{
  font-size:clamp(30px,3.6vw,46px);font-weight:800;line-height:1.12;
  letter-spacing:-.035em;
}
.head{margin-bottom:clamp(34px,4vw,56px)}
.head__sub{margin-top:16px;font-size:17px;color:var(--ink-2);max-width:52ch}

/* ══════════════════════════════════════════════════════════════════
   排版房长廊 —— 钉住推进，六道工序即六个工位
   ══════════════════════════════════════════════════════════════════ */
.hall{position:relative;height:400vh;background:var(--bg)}
.hall__pin{
  position:sticky;top:0;height:100dvh;overflow:hidden;
  background:var(--hall-bg);
}
/* 不用 preserve-3d（实测每帧重建 3D 场景只有 10fps）。
   改为：每个平面自带 perspective() 函数，变换原点统一落在灭点 (62%,47%) 上，
   投影依旧正确，但浏览器按普通二维图层处理。实测 40fps → 优化后 55fps+ */
.hall__scene{position:absolute;inset:0}
.hall__world{position:absolute;inset:0}

/* 长廊本体 = 一次性光栅化的静态透视插画。
   实测：任何覆盖大半屏的实时 3D 平面要吃掉约 20fps（一个小铭牌只要 1.2fps），
   所以整条长廊在构建期就把投影算好，运行时只是一张背景图，零每帧成本。*/
.hall__art{
  position:absolute;inset:0;
  background:url(hall.svg) center/100% 100% no-repeat;
}
/* 浅色主题换成「纸白活字房」那版插画（同一几何、同一随机种子，只是光度不同） */
:root[data-theme='light'] .hall__art{background-image:url(hall-light.svg)}

/* ── 工位铭牌 ─────────────────────────────────────────────────────── */
.bench{
  position:absolute;left:50%;top:50%;
  width:var(--bench-w);height:150px;margin:-75px 0 0 calc(var(--bench-w) / -2);
  padding:17px 20px 18px;
  border:1px solid var(--bench-bd);
  border-left:3px solid var(--bench-acc);
  border-radius:var(--r);
  background:var(--bench-bg);
  box-shadow:var(--bench-sh);
  transform-origin:calc(12vw + var(--bench-w) / 2) calc(75px - 3vh);
  backface-visibility:hidden;
}
.bench i{
  display:block;font:700 12px/1 var(--mono);letter-spacing:.18em;
  color:var(--bench-acc);font-style:normal;
}
.bench b{
  display:block;margin-top:9px;
  font-size:clamp(19px,1.7vw,25px);font-weight:800;letter-spacing:-.03em;color:var(--bench-ink);
}
.bench s{
  display:block;margin-top:8px;padding-top:10px;
  border-top:1px solid var(--bench-div);
  font-size:12.5px;color:var(--bench-sub);text-decoration:none;line-height:1.5;
}

/* ── 长廊尽头的光 / 暗角 / 字幕底 ─────────────────────────────────── */
.hall__far{
  position:absolute;left:62%;top:47%;z-index:2;
  width:min(420px,32vw);aspect-ratio:1;transform:translate(-50%,-50%);
  pointer-events:none;
  background:var(--far);
}
.hall__vig{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--vig-g);
}
.hall__scrim{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--scrim);
}

/* ── 入口大字 ─────────────────────────────────────────────────────── */
.hero{
  position:absolute;inset:0;z-index:6;
  display:flex;align-items:center;
  padding-top:var(--nav-h);
}
.hero__grid{display:block}
.hero__copy{max-width:min(680px,56vw)}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font:600 12px/1 var(--mono);letter-spacing:.16em;
  color:var(--ink-3);margin-bottom:26px;
}
.kicker__mark{
  width:7px;height:7px;border-radius:2px;background:var(--acc);
  box-shadow:0 0 0 4px var(--acc-soft);
}

.h1{
  font-size:clamp(30px,4.5vw,62px);
  font-weight:900;line-height:1.1;letter-spacing:-.042em;
}
.h1__l{display:block;overflow:hidden;white-space:nowrap}
.h1__l{
  opacity:0;transform:translateY(.6em);
  animation:h1in .95s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes h1in{to{opacity:1;transform:none}}
.h1 em{
  color:var(--acc);position:relative;
  text-shadow:0 0 44px rgba(var(--a),.45);
}

.lede{
  margin-top:28px;max-width:50ch;
  font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.72;color:var(--ink-2);
}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
/* 三项读数：宽屏一行，容器变窄时自动降到两列/一列，始终保持左对齐不参差 */
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px 26px;margin-top:32px;
}
.facts li{
  position:relative;padding-left:18px;
  font-size:13.5px;color:var(--ink-3);
}
.facts li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--acc);
}

/* ── 工位抬头 ─────────────────────────────────────────────────────── */
.hud{
  position:absolute;left:0;right:0;bottom:0;z-index:7;
  padding-bottom:clamp(20px,3vw,34px);
  pointer-events:none;
  background:var(--cue);
}
.hud__in{display:flex;align-items:flex-end;gap:32px;flex-wrap:wrap}
.hud__cur{flex:0 0 auto}
.hud__no{
  display:block;font:600 11px/1 var(--mono);letter-spacing:.2em;
  color:var(--acc);font-style:normal;
}
.hud__name{
  display:block;margin-top:8px;
  font-size:clamp(20px,2vw,28px);font-weight:800;letter-spacing:-.035em;
}
.hud__meta{display:block;margin-top:6px;font-size:13px;color:var(--ink-3);text-decoration:none}

.hud__rail{
  display:flex;gap:clamp(12px,2vw,30px);margin-left:auto;padding-bottom:4px;
}
.hud__rail li{display:flex;align-items:center;gap:9px}
.hud__rail i{
  display:block;width:26px;height:2px;border-radius:2px;
  background:rgba(var(--t),.16);transition:background .35s ease,width .35s ease;
}
.hud__rail span{
  font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3);
  transition:color .35s ease;
}
.hud__rail li.is-past i{background:rgba(var(--a),.45)}
.hud__rail li.is-on i{background:var(--acc);width:44px;box-shadow:0 0 14px rgba(var(--a),.6)}
.hud__rail li.is-on span{color:var(--ink)}

.hall__cue{
  position:absolute;left:50%;bottom:clamp(20px,3vw,34px);z-index:8;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font:500 11px/1 var(--mono);letter-spacing:.16em;color:var(--ink-3);
}
.hall__cue span{
  width:1px;height:34px;
  background:linear-gradient(180deg,transparent,var(--acc));
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ══════════════════════════════════════════════════════════════════
   工位内容面板 —— 到站后从二维层“对上焦”
   ══════════════════════════════════════════════════════════════════ */
.deck{position:absolute;inset:0;z-index:5;pointer-events:none}
.panel{
  position:absolute;top:50%;
  left:max(20px,calc((100vw - var(--wrap)) / 2 + 56px));
  width:min(600px,46vw);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-50%) scale(.965);
  transition:opacity .5s ease,transform .65s cubic-bezier(.16,1,.3,1),visibility .5s;
}
.panel.is-on{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(-50%) scale(1);
}

.panel__h{margin-bottom:20px}
.panel__no{font:600 12px/1 var(--mono);letter-spacing:.22em;color:var(--acc)}
.panel__t{
  margin-top:13px;font-size:clamp(24px,2.5vw,34px);font-weight:800;
  letter-spacing:-.038em;line-height:1.12;
}
.panel__d{margin-top:13px;font-size:15.5px;line-height:1.68;color:var(--ink-2);max-width:46ch}
.panel__d b{color:var(--ink);font-weight:600}

.panel__demo{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--glass);
  box-shadow:var(--glass-sh),var(--glass-inset);
  padding:20px 22px;
}
.panel__demo--row{display:flex;align-items:center;gap:24px}
.panel__note{
  margin-top:14px;font:500 12px/1.5 var(--mono);letter-spacing:.03em;color:var(--ink-3);
}
.panel__note b{color:var(--acc);font-weight:600}

/* 面板底部的功能入口：点一下直接进论文系统对应页面 */
.panel__go{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;
  margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
}
.panel__go a{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--acc);
  transition:color .22s;
}
.panel__go a svg{width:13px;height:13px;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.panel__go a:hover{color:var(--acc-hi)}
.panel__go a:hover svg{transform:translateX(3px)}
@media (max-width:900px){
  .panel__go{margin-top:15px;padding-top:13px;gap:10px 20px}
}

/* ── 01 大纲树 ────────────────────────────────────────────────────── */
.tree{display:grid;gap:1px}
.tree__r{
  display:flex;align-items:center;gap:11px;padding:7px 0;
  font-size:13.5px;color:var(--ink-2);
}
.tree__r--2{padding-left:26px}
.tree__r i{
  position:relative;flex:0 0 auto;width:14px;height:14px;border-radius:4px;
  border:1.5px solid rgba(var(--a),.55);background:var(--acc-soft);
}
.tree__r i::after{
  content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:1.6px solid var(--acc);border-top:0;border-left:0;
  transform:rotate(42deg);opacity:1;
}
.tree__r em{
  margin-left:auto;font:500 10.5px/1 var(--mono);letter-spacing:.1em;
  color:var(--ink-3);flex:0 0 auto;
}
.tree__r.is-off{opacity:.44}
.tree__r.is-off i{border-color:rgba(var(--t),.22);background:transparent}
.tree__r.is-off i::after{opacity:0}
.tree__r.is-off span{text-decoration:line-through;text-decoration-color:rgba(var(--t),.3)}
.tree__cut{color:var(--ink-3)}

/* ── 02 章节 + 打字 ───────────────────────────────────────────────── */
.ms{display:flex;flex-wrap:wrap;gap:8px}
.ms__r{
  display:flex;align-items:center;gap:8px;padding:7px 11px;
  border:1px solid var(--line-2);border-radius:8px;
  font:500 11.5px/1 var(--mono);color:var(--ink-3);
}
.ms__r i{width:5px;height:5px;border-radius:50%;background:rgba(var(--t),.22)}
.ms__r.is-done i{background:rgba(var(--a),.55)}
.ms__r.is-done{color:var(--ink-2)}
.ms__r.is-live{border-color:rgba(var(--a),.42);color:var(--ink)}
.ms__r.is-live i{background:var(--acc);box-shadow:0 0 9px var(--acc);animation:blip 1.5s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.32}}

.type__p{
  min-height:5.25em;margin-top:16px;padding:14px 16px;
  border-left:2px solid rgba(var(--a),.5);
  background:rgba(var(--a),.055);
  font-size:14px;line-height:1.78;color:var(--ink-2);
}
.type__p::after{
  content:'';display:inline-block;width:7px;height:1.05em;
  margin-left:2px;vertical-align:-3px;background:var(--acc);
  animation:caret .95s steps(1) infinite;
}
@keyframes caret{50%{opacity:0}}
.type__n{
  margin-top:13px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3);
}
.type__num{color:var(--acc);font-weight:600}

/* ── 03 评分环 + 批注 ─────────────────────────────────────────────── */
.ring{position:relative;flex:0 0 auto;width:104px;height:104px}
.ring svg{width:100%;height:100%}
/* 环的 SVG 属性是写死的：底轨是 white .10、进度弧是亮蓝 #5B9CFF。
   浅色主题下白底轨会整个消失、弧也偏浅，这里用 CSS 接回变量（CSS 覆盖 SVG 表现属性）。 */
.ring svg circle{stroke:rgba(var(--t),.10)}
.ring svg .ring__v{stroke:var(--acc)}
.ring__n{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:30px;font-weight:800;letter-spacing:-.05em;
}
.ring__v{
  stroke-dasharray:188.5;stroke-dashoffset:188.5;
  transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .15s;
}
.panel.is-on .ring__v{stroke-dashoffset:26.4}

.notes{flex:1;min-width:0;display:grid;gap:11px}
.notes__r{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink-2)}
.notes__tag{
  flex:0 0 auto;margin-top:1px;padding:3px 7px;border-radius:5px;
  border:1px solid var(--line);font:600 10.5px/1 var(--mono);
  letter-spacing:.06em;color:var(--ink-3);font-style:normal;
}
.notes__tag--ok{color:var(--acc);border-color:rgba(var(--a),.42);background:var(--acc-soft)}

/* ── 04 diff ──────────────────────────────────────────────────────── */
.diff{display:grid;gap:14px}
.diff__r{display:grid;gap:8px}
.diff__r s{
  display:block;font-size:13.5px;color:var(--ink-3);
  text-decoration:line-through;text-decoration-color:rgba(var(--t),.28);
}
.diff__r b{
  display:block;font-size:13.5px;font-weight:500;color:var(--ink);
  padding:3px 0 3px 12px;border-left:2px solid var(--acc);
  background:linear-gradient(90deg,var(--acc-soft),transparent 72%);
}

/* ── 05 概率下降 ──────────────────────────────────────────────────── */
.rate{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rate__from{
  font:600 25px/1 var(--mono);color:var(--ink-3);
  text-decoration:line-through;text-decoration-thickness:2px;
}
.rate__arw{
  position:relative;width:38px;height:1px;
  background:linear-gradient(90deg,rgba(var(--a),.25),var(--acc));
}
.rate__arw::after{
  content:'';position:absolute;right:0;top:-3.5px;
  border:4px solid transparent;border-left-color:var(--acc);
}
.rate__to{
  font-size:clamp(38px,3.6vw,54px);font-weight:900;line-height:1;
  letter-spacing:-.055em;color:var(--acc);
  text-shadow:0 0 40px rgba(var(--a),.35);
}
.rate__to i{font-size:.4em;font-weight:700;font-style:normal;margin-left:2px}
.rate__cap{
  width:100%;margin-top:6px;
  font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3);
}
.bars{margin-top:18px;display:grid;gap:10px}
.bars__r{display:flex;align-items:center;gap:12px}
.bars__r i{
  height:5px;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--acc),rgba(var(--a),.22));
  transition:width 1s cubic-bezier(.16,1,.3,1) .1s;
}
.panel.is-on .bars__r i{width:var(--w)}
.bars__r b{flex:0 0 auto;font:500 11px/1 var(--mono);color:var(--ink-3)}

/* ── 06 Word 页 ───────────────────────────────────────────────────── */
.mini{
  flex:0 0 auto;width:130px;padding:16px 14px;border-radius:6px;
  background:var(--sheet);
  border:1px solid rgba(var(--t),.07);
  box-shadow:0 16px 36px rgba(var(--s),.55);
}
.mini__h{display:block;height:9px;width:52%;margin:0 auto 13px;background:var(--sheet-ink);border-radius:1px}
.mini__l{display:block;height:4px;width:var(--w);margin-bottom:7px;background:rgba(18,24,34,.26);border-radius:1px}
.spec-mini{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 20px}
.spec-mini div{border-top:1px solid var(--line-2);padding-top:9px}
.spec-mini dt{font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--ink-3)}
.spec-mini dd{margin-top:7px;font-size:14px;font-weight:600;color:var(--ink)}
.spec-mini__ok{color:var(--acc)}

/* ══════════════════════════════════════════════════════════════════
   产线读数
   ══════════════════════════════════════════════════════════════════ */
.spec{padding:clamp(72px,9vw,132px) 0;background:var(--bg)}
.spec__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);
  border-radius:var(--r);overflow:hidden;
}
.spec__cell{background:var(--bg);padding:30px 26px 34px}
.spec__num{display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums}
.spec__num b{font-size:clamp(38px,4.4vw,62px);font-weight:900;letter-spacing:-.055em;line-height:1}
.spec__num i{font:500 13px/1 var(--mono);font-style:normal;color:var(--acc)}
.spec__t{margin-top:20px;font-size:15px;font-weight:600}
.spec__d{margin-top:9px;font-size:13.5px;line-height:1.62;color:var(--ink-3)}

/* ══════════════════════════════════════════════════════════════════
   能力
   ══════════════════════════════════════════════════════════════════ */
/* 段底用页面底（不用 --bg-2）：--bg-2 现在是「抬升面=白」，
   段底若也走白色，左上的玻璃大卡（.cap__hero 近乎纯白）会和白底糊在一起。
   暗色主题下 --bg 与 --bg-2 只差 3 级亮度，这处改动只在浅色主题有观感差异。 */
.cap{padding:clamp(72px,9vw,132px) 0;background:var(--bg)}
.cap__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px}
.cap__hero{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,40px);
  background:var(--glass-2);
}
.cap__hero::after{
  content:'';position:absolute;right:-46px;top:-46px;width:280px;height:280px;
  background:url(type-a.svg);background-size:96px 104px;
  opacity:.55;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 66% 34%,#000,transparent 66%);
  mask-image:radial-gradient(circle at 66% 34%,#000,transparent 66%);
}
.cap__hero>*{position:relative;z-index:1}
.cap__tag{font:600 11px/1 var(--mono);letter-spacing:.2em;color:var(--acc)}
.cap__h{margin-top:16px;font-size:clamp(26px,2.6vw,36px);font-weight:800;letter-spacing:-.04em}
.cap__d{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips li{
  padding:6px 13px;border:1px solid var(--line);border-radius:99px;
  font-size:12.5px;color:var(--ink-2);
}
.go{
  margin-top:auto;padding-top:28px;
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;color:var(--acc);
}
.go svg{width:15px;height:15px;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.go:hover svg{transform:translateX(4px)}

.cap__rows{
  display:grid;gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);
  border-radius:var(--r-lg);overflow:hidden;
}
.cap__row{display:grid;gap:11px;padding:24px 26px;background:var(--bg-2);transition:background .25s}
.cap__row:hover{background:var(--panel)}
.cap__rowhead{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cap__rowhead h3{font-size:17px;font-weight:700;letter-spacing:-.028em}
.cap__rowhead svg{
  flex:0 0 auto;width:15px;height:15px;color:var(--ink-3);
  transition:transform .25s cubic-bezier(.4,0,.2,1),color .25s;
}
.cap__row:hover .cap__rowhead svg{transform:translateX(4px);color:var(--acc)}
.cap__rowd{font-size:13.5px;line-height:1.62;color:var(--ink-3)}

/* ══════════════════════════════════════════════════════════════════
   毕业之后（就业线）
   ══════════════════════════════════════════════════════════════════ */
.career{padding:clamp(72px,9vw,132px) 0;background:var(--bg)}
.career__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.card{
  display:flex;flex-direction:column;color:inherit;
  padding:24px 26px 26px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--bg-2);
  transition:border-color .25s,background .25s,transform .25s cubic-bezier(.4,0,.2,1);
}
.card:hover{border-color:rgba(var(--a),.34);background:var(--panel);transform:translateY(-3px)}
.card__use{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--acc)}
.card__t{margin-top:13px;font-size:21px;font-weight:800;letter-spacing:-.032em}
.card__d{margin-top:12px;font-size:14px;line-height:1.68;color:var(--ink-2)}
.card__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22px;
  font-size:13.5px;font-weight:600;color:var(--ink-3);transition:color .25s;
}
.card__go svg{width:14px;height:14px;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.card:hover .card__go{color:var(--acc)}
.card:hover .card__go svg{transform:translateX(4px)}

/* 卡片里的迷你演示（纯 CSS 绘制，不引图） */
.demo{
  display:block;height:118px;margin-bottom:22px;
  border:1px solid var(--line-2);border-radius:10px;
  background:
    radial-gradient(120% 90% at 24% 0%,rgba(var(--a),.11),transparent 62%),
    rgba(var(--t),.018);
  overflow:hidden;
}
/* 答辩 PPT：三张错位的横版幻灯缩略图 */
.demo--ppt{position:relative}
.demo--ppt i{
  position:absolute;left:14%;width:56%;height:56%;border-radius:5px;
  background:linear-gradient(150deg,#E8EEF8,#B9C9E2);
  box-shadow:0 8px 22px rgba(var(--s),.45);
}
.demo--ppt i:nth-child(1){top:12%;opacity:.5}
.demo--ppt i:nth-child(2){top:24%;left:19%;opacity:.75}
.demo--ppt i:nth-child(3){top:36%;left:24%}
.demo--ppt i::after{
  content:'';position:absolute;left:12%;right:34%;top:22%;height:2px;border-radius:2px;
  background:rgba(37,99,235,.55);box-shadow:0 7px 0 -1px rgba(37,99,235,.28),0 14px 0 -1px rgba(37,99,235,.18);
}
/* 简历：一页纸 + 一条被改写的高亮行 */
.demo--cv{display:grid;place-items:center}
.demo__sheet{
  display:flex;flex-direction:column;gap:6px;
  width:74px;padding:11px 9px;border-radius:4px;
  background:linear-gradient(160deg,#FFFFFF,#E4EAF3);
  box-shadow:0 10px 26px rgba(var(--s),.42);
}
.demo__sheet b{height:5px;border-radius:2px;background:rgba(18,24,34,.62)}
.demo__sheet s{height:3px;border-radius:2px;background:rgba(18,24,34,.22)}
.demo__sheet s.is-hi{background:var(--acc-2);box-shadow:0 0 0 2px rgba(37,99,235,.18)}
/* 面试：小评分环 + 一句点评 */
.demo--itv{display:flex;align-items:center;gap:18px;padding:0 22px}
.demo__ring{
  flex:0 0 auto;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--acc) 0 82%,rgba(var(--t),.10) 82% 100%);
  -webkit-mask:radial-gradient(circle,transparent 0 22px,#000 22px);
  mask:radial-gradient(circle,transparent 0 22px,#000 22px);
  transform:rotate(-90deg);
}
.demo__ring b{
  font-size:17px;font-weight:800;letter-spacing:-.04em;color:var(--ink);
  transform:rotate(90deg);
}
.demo__note{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
/* 证件照：照片位 + 规格标签 */
.demo--id{display:flex;align-items:center;gap:18px;padding:0 22px}
.demo__photo{
  flex:0 0 auto;width:66px;height:88px;border-radius:5px;
  background:
    linear-gradient(180deg,rgba(var(--a),.30),rgba(var(--a),.06)),
    linear-gradient(150deg,#7FA8E6,#3E6BB8);
  box-shadow:0 10px 24px rgba(var(--s),.42);
  position:relative;
}
.demo__photo::after{
  content:'';position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;
  background:rgba(var(--t),.34);
}
.demo__spec{font:500 11.5px/1.6 var(--mono);letter-spacing:.06em;color:var(--ink-3)}

/* ══════════════════════════════════════════════════════════════════
   纸白反转
   ══════════════════════════════════════════════════════════════════ */
.why{background:var(--paper);color:var(--ink-p);padding:clamp(76px,9vw,142px) 0}
.why__h{
  font-size:clamp(29px,4.1vw,56px);font-weight:800;
  line-height:1.15;letter-spacing:-.042em;
}
.why__h em{color:var(--acc-2)}
.why__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--paper-line);
  border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line);
  margin-top:clamp(40px,5vw,68px);
}
.why__row{background:var(--paper);padding:30px 28px 34px}
.why__row h3{font-size:19px;font-weight:800;letter-spacing:-.032em}
.why__row p{margin-top:13px;font-size:14.5px;line-height:1.72;color:var(--ink-p2)}
.why__foot{margin-top:clamp(34px,4vw,54px);max-width:62ch;font-size:17px;line-height:1.72;color:var(--ink-p2)}
.why__foot::before{content:'';display:block;width:52px;height:2px;background:var(--acc-2);margin-bottom:22px}

/* ══════════════════════════════════════════════════════════════════
   收尾
   ══════════════════════════════════════════════════════════════════ */
.close{position:relative;overflow:hidden;text-align:center;background:var(--bg);padding:clamp(84px,10vw,152px) 0}
.close__glow{
  position:absolute;left:50%;top:42%;width:min(720px,92vw);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(var(--a),.15),transparent 66%);
}
.close__in{position:relative}
.close__h{font-size:clamp(29px,4.3vw,56px);font-weight:800;letter-spacing:-.044em;line-height:1.18}
.stop{position:relative;display:inline-block;color:var(--acc)}
.stop::after{
  content:'';position:absolute;left:50%;top:54%;width:1.9em;height:1.9em;
  margin:-.95em 0 0 -.95em;border-radius:50%;
  border:1.5px solid rgba(var(--a),.6);opacity:0;transform:scale(.35);
}
.stop.is-hit::after{animation:stopwave .95s cubic-bezier(.16,1,.3,1)}
@keyframes stopwave{0%{opacity:.85;transform:scale(.35)}100%{opacity:0;transform:scale(1.55)}}
.close__sub{margin-top:20px;max-width:54ch;margin-inline:auto;font-size:16.5px;line-height:1.72;color:var(--ink-2)}
.cta--center{justify-content:center}

/* ══════════════════════════════════════════════════════════════════
   页脚
   ══════════════════════════════════════════════════════════════════ */
.foot{border-top:1px solid var(--line);background:var(--bg);padding:clamp(56px,6vw,84px) 0 34px}
.foot__in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:34px}
.foot__slogan{margin-top:16px;font-size:14px;color:var(--ink-3)}
.foot__col h3{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--ink-3);margin-bottom:18px}
.foot__col a{display:block;padding:5px 0;font-size:14px;color:var(--ink-2);transition:color .2s}
.foot__col a:hover{color:var(--acc)}
.foot__base{
  display:flex;flex-direction:column;gap:16px;
  margin-top:clamp(40px,5vw,66px);padding-top:24px;
  border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3);
}
.foot__disc{max-width:78ch;line-height:1.65}
.foot__legal{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.foot__legal a{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);transition:color .2s}
.foot__legal a:hover{color:var(--acc);text-decoration:underline}
.foot__legal img{width:17px;height:17px;flex:none}

/* ══════════════════════════════════════════════════════════════════
   断点
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1200px){
  :root{--st:700px;--bench-x:300px;--bench-w:330px}
  .panel{width:min(560px,45vw)}
  .foot__in{grid-template-columns:minmax(0,1fr) repeat(4,minmax(0,1fr));gap:26px}
}
@media (max-width:1080px){
  :root{--st:610px;--bench-x:250px;--bench-w:292px}
  .panel{width:min(520px,44vw)}
  .cap__grid{grid-template-columns:1fr}
  .spec__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why__grid{grid-template-columns:1fr}
  .foot__in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:900px){
  :root{--nav-h:58px}
  .nav__links{display:none}
  .nav__act{margin-left:auto}
  .hall{height:auto}
  .hall__pin{
    position:static;height:auto;overflow:visible;
    padding:calc(var(--nav-h) + 46px) 0 0;
    background:
      radial-gradient(90% 46% at 78% 6%,rgba(var(--a),.16),transparent 62%),
      radial-gradient(70% 40% at 12% 0%,rgba(var(--a),.07),transparent 60%),
      var(--bg);
  }
  .hall__scene,.hall__far,.hall__vig,.hall__scrim{display:none}
  .hero{position:static;display:block;padding:0}
  .hero__copy{max-width:none}
  .hud,.hall__cue{display:none}
  .deck{
    position:static;display:grid;gap:54px;
    margin-top:60px;padding:0 clamp(20px,4.4vw,56px) 44px;
  }
  .panel{
    position:static;width:auto;opacity:1;visibility:visible;
    transform:none;pointer-events:auto;
  }
  .panel.is-on{transform:none}
  .panel .ring__v{stroke-dashoffset:26.4}
  .panel .bars__r i{width:var(--w)}
  .panel__d{max-width:none}
  .close{text-align:left}
  .cta--center{justify-content:flex-start}
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}
}
@media (max-width:620px){
  .brand__sub,.nav__login{display:none}
  .nav__in{gap:10px}
  .btn--sm{height:34px;padding:0 13px;font-size:13.5px}
  .h1{font-size:clamp(30px,8.6vw,44px)}
  .spec__grid{grid-template-columns:1fr}
  .spec__cell{padding:24px 22px 28px}
  .panel__demo{padding:18px 16px}
  .panel__demo--row{flex-direction:column;align-items:stretch;gap:18px}
  .mini{width:100%;max-width:190px}
  .spec-mini{grid-template-columns:1fr 1fr}
  .career__grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .card{padding:22px 20px 22px}
  .foot__in{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════
   减动效：长廊转为静态堆叠，所有演示直达终态
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .h1__l{opacity:1;transform:none}
  [data-reveal]{opacity:1;transform:none}
  .hall{height:auto}
  .hall__pin{position:static;height:auto;overflow:visible;padding:calc(var(--nav-h) + 46px) 0 0}
  .hall__scene,.hall__far,.hall__vig,.hall__scrim,.hud,.hall__cue{display:none}
  .hero{position:static;display:block;padding:0}
  .hero__copy{max-width:min(660px,60vw)}
  .deck{position:static;display:grid;gap:54px;margin-top:60px;padding-bottom:44px}
  .panel{
    position:static;width:auto;opacity:1;visibility:visible;
    transform:none;pointer-events:auto;
  }
  .panel .ring__v{stroke-dashoffset:26.4}
  .panel .bars__r i{width:var(--w)}
}


/* ══════════════════════════════════════════════════════════════════
   主题切换 · 结构性适配（色基变量表达不了的部分）
   ══════════════════════════════════════════════════════════════════ */
:root{color-scheme:dark}
:root[data-theme='light']{color-scheme:light}

/* 灰噪声在纸面上要以「正片叠底」压下去，正常混合会显脏 */
:root[data-theme='light'] .grain{opacity:.05;mix-blend-mode:multiply}

/* 能力段大卡右上角的「活字盘」纹理 type-a.svg 是给暗底画的：网格线是白色 7.5%，
   压到近白卡片上直接消失（纹理骨架没了），活字 #9FB0C6 则成了「白色模式下一片发暗的水印」。
   浅色主题换一张 type-a-light.svg：网格线转深保住骨架，活字压到若有若无。 */
:root[data-theme='light'] .cap__hero::after{background-image:url(type-a-light.svg);opacity:.4}

/* 卡片图区 .demo：暗色主题下它是「微亮于卡片」的凹槽；浅色主题里同样的
   rgba(var(--t),.018) 叠在白卡上只剩一层灰雾，再加重投影（--s 在浅色主题是
   120,132,152，.42~.45 的不透明度），四个图区一眼看去都发暗。
   浅色主题改成「纯白底 + 很轻的蓝晕」，投影减半，只留一层浮起的层次。 */
:root[data-theme='light'] .demo{
  background:
    radial-gradient(120% 90% at 24% 0%,rgba(var(--a),.075),transparent 62%),
    #FFFFFF;
}
:root[data-theme='light'] .demo--ppt i{box-shadow:0 8px 20px rgba(120,132,152,.20)}
:root[data-theme='light'] .demo__sheet{box-shadow:0 10px 24px rgba(120,132,152,.18)}
:root[data-theme='light'] .demo__photo{box-shadow:0 10px 22px rgba(120,132,152,.20)}

/* 切换瞬间才挂的过渡：常驻会拖慢滚动，只在换主题的那 300ms 生效 */
.theme-fade,.theme-fade *{
  transition:background-color .26s ease,color .26s ease,border-color .26s ease,
             box-shadow .26s ease,opacity .26s ease!important;
}
@media (prefers-reduced-motion:reduce){
  .theme-fade,.theme-fade *{transition:none!important}
}