/* ============================================================
   王泳芬 · 作品集  ——  结构 / 排版 / 交互样式表
   本文件不含颜色，颜色全部来自 theme.css。
   改配色请改 theme.css，不要改这里。
   结构：侧栏＝纯目录；内容区＝一次只显示一个板块
   ============================================================ */

:root{
  /* 颜色别名：全部指向 theme.css，改色只改 theme.css */
  --txt:var(--ink);
  --txt2:var(--ink-mid);
  --txt3:var(--gray);
  --line2:var(--hairline-5);
  --accent-soft:var(--tint-1);
  --on-dark:var(--scrim-text);
  --on-dark2:var(--mute-3);
  --card-solid:#FFFFFF;              /* 中性白，不随主题变 */

  /* 结构与排版 */
  --nav:250px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:"HarmonyOS Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",
         system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"JetBrains Mono","SF Mono",Consolas,"Roboto Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:auto; -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.035'/></svg>") repeat,
    radial-gradient(1100px 640px at 14% -4%, var(--hero-bg-1), transparent 62%),
    radial-gradient(980px 620px at 96% 104%, rgba(168,150,226,.16), transparent 60%),
    radial-gradient(760px 460px at 52% 118%, rgba(222,209,244,.34), transparent 64%),
    linear-gradient(180deg,var(--paper) 0%,var(--hero-bg-4) 45%,var(--paper) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.72;
  letter-spacing:.008em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
em{font-style:normal; color:var(--accent); font-weight:700}
strong{font-weight:800; color:var(--ink)}
::selection{background:var(--sel-bg); color:var(--on-accent)}

/* ============ 顶部滚动进度条 ============ */
.prog{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:400;
  background:transparent; pointer-events:none;
}
.prog i{
  display:block; height:100%; width:0;
  background:var(--grad-bar);
}

/* ============================================================
   侧栏：只有目录，没有任何头像 / 头衔 / 自我简介
   ============================================================ */
.sidebar{
  position:fixed; z-index:100;
  top:18px; bottom:18px; left:18px; width:var(--nav);
  background:rgba(252,251,255,.55);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  color:var(--ink);
  display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.7);
  border-radius:22px;
  box-shadow:
    0 18px 48px rgba(36,31,53,.16),
    0 4px 14px rgba(36,31,53,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.sidebar::after{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-top);
  border-radius:21px 21px 0 0;
}
.side-top{
  flex:none; display:flex; align-items:baseline; gap:9px;
  padding:20px 22px 13px; border-bottom:1px solid var(--hairline-2);
}
.st-cn{font-size:13px; font-weight:800; letter-spacing:.18em; color:var(--ink-strong)}
.st-en{
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.2em; color:var(--mute-4);
}

/* ---- 母子级目录 ---- */
.toc{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  list-style:none; margin:0; padding:10px 12px 26px;
  scrollbar-width:thin; scrollbar-color:var(--ring-1) transparent;
}
.toc::-webkit-scrollbar{width:5px}
.toc::-webkit-scrollbar-thumb{background:var(--scroll-thumb); border-radius:3px}
.toc::-webkit-scrollbar-track{background:transparent}

.toc-grp{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mute-2);
  margin-top:14px; padding:12px 12px 6px;
  border-top:1px solid var(--hairline-2);
}
.toc-grp:first-child{margin-top:0; padding-top:2px; border-top:none}
.toc-wrap{position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.toc-mark{
  position:absolute; left:0; width:2px; height:0;
  background:var(--accent); border-radius:2px; opacity:0;
  transition:transform .34s var(--ease), height .34s var(--ease), opacity .25s;
  pointer-events:none;
}
.toc-a{
  display:flex; align-items:baseline; gap:9px;
  padding:8px 12px; border-radius:8px;
  color:var(--ink-nav); font-size:13.5px;
  transition:transform .22s var(--ease), background .22s, color .22s;
  transform-origin:left center;
}
.toc-a:hover{
  transform:scale(1.055); background:var(--tint-2); color:var(--ink);
}
.toc-n{
  font-family:var(--mono); font-size:10.5px; font-weight:700;
  color:var(--mute-3); letter-spacing:.05em; flex:none;
  transition:color .22s;
}
.toc-a:hover .toc-n{color:var(--accent)}
.toc-t{flex:1}

.toc-li.on > .toc-a{
  background:var(--tint-1); color:var(--ink-strong); font-weight:700;
  box-shadow:inset 2px 0 0 var(--accent);
}
.toc-li.on > .toc-a .toc-n{color:var(--accent)}

/* 子级 */
.toc-subs{
  list-style:none; margin:0; padding:0 0 0 22px;
  max-height:0; overflow:hidden;
  transition:max-height .34s var(--ease), opacity .3s;
  opacity:0;
}
.toc-li.open .toc-subs{max-height:420px; opacity:1}
.toc-sub{
  display:block; padding:5px 10px; border-radius:6px;
  font-size:12.5px; color:var(--ink-faint);
  transition:transform .2s var(--ease), color .2s, background .2s;
  transform-origin:left center;
}
.toc-sub::before{
  content:''; display:inline-block; width:8px; height:1px;
  background:var(--rule-2); vertical-align:middle; margin-right:8px;
}
.toc-sub:hover{transform:scale(1.06); color:var(--ink); background:var(--tint-3)}
.toc-sub.on{color:var(--accent); font-weight:700}
.toc-sub.on::before{background:var(--accent); width:12px}

/* ============ 移动端顶栏 ============ */
.topbar{
  display:none; position:fixed; z-index:120; inset:0 0 auto 0; height:56px;
  background:rgba(252,251,255,.9);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  color:var(--ink);
  align-items:center; gap:12px; padding:0 14px;
  border-bottom:1px solid var(--hairline-2);
}
.tb-name{font-size:15px; font-weight:800; letter-spacing:.04em; color:var(--ink-strong)}
.tb-sub{font-size:11px; color:var(--gray); margin-left:auto}
.burger{
  width:36px; height:30px; border:1px solid var(--hairline-4); border-radius:7px;
  background:transparent; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; cursor:pointer; padding:0;
}
.burger span{display:block; width:16px; height:1.5px; background:var(--accent-deep); border-radius:2px}

/* ============ 主区 ============ */
.main{margin-left:calc(var(--nav) + 40px); padding:24px 26px 108px}
.main-inner{max-width:900px; margin:0 auto}

/* ============================================================
   板块＝独立视图：同一时刻只有一个板块在场
   ============================================================ */
.sec{display:none}
.sec.act{
  display:block;
  position:relative; z-index:1;
  background:var(--card);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 10px 34px var(--sh-d10);
  padding:0 38px 46px;
  margin-bottom:0;
  animation:secIn .3s var(--ease) both;
}
.sec.act.leaving{
  pointer-events:none;
  animation:secOut .18s var(--ease) both;
}
@keyframes secIn{
  from{opacity:0; transform:translateY(24px) scale(.994)}
  to{opacity:1; transform:none}
}
@keyframes secOut{
  from{opacity:1; transform:none}
  to{opacity:0; transform:translateY(-12px) scale(.994)}
}

/* 板块铭牌 */
.ch-bar{
  position:sticky; top:0; z-index:6;
  display:flex; align-items:center; gap:13px;
  margin:0 -38px 18px; padding:13px 38px;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
  border-radius:16px 16px 0 0;
}
.ch-n{
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--accent); flex:none;
}
.ch-name{font-size:15px; font-weight:800; color:var(--ink); letter-spacing:.02em; flex:none}
.ch-prog{flex:1; height:2px; background:var(--line); border-radius:2px; overflow:hidden}
.ch-prog i{
  display:block; height:100%; width:0; border-radius:2px;
  background:var(--grad-bar);
  transition:width .18s linear;
}

/* ---- 首页 Hero（清透浅紫，参考「个人作品集」版式） ---- */
.sec.hero{
  padding:38px 44px 50px;
  background:
    radial-gradient(960px 520px at 82% -8%, var(--hero-bg-1), transparent 60%),
    radial-gradient(720px 460px at 2% 104%, var(--hero-bg-2), transparent 58%),
    radial-gradient(520px 300px at 42% 118%, rgba(168,150,226,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.6), var(--hero-bg-4));
  border-color:var(--hairline-3);
  color:var(--ink);
  box-shadow:0 10px 30px var(--sh-a08);
}
.sec.hero::before{
  content:''; position:absolute; top:0; left:26px; right:26px; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent2), transparent);
  border-radius:2px;
}
.sec.hero::after{
  content:'WF'; position:absolute; right:34px; bottom:14px;
  font-family:var(--mono); font-size:92px; font-weight:800; letter-spacing:-.03em;
  color:var(--accent); opacity:.07; line-height:1; pointer-events:none;
}
.hero-in{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.hero-avatar{
  width:140px; height:140px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid transparent;
  background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) padding-box,
             linear-gradient(135deg, var(--accent2), var(--accent-deep)) border-box;
  box-shadow:0 10px 26px var(--sh-a16);
}
.hero-name{
  margin:0; font-size:40px; font-weight:800; letter-spacing:.04em;
  background:linear-gradient(115deg, var(--accent-deep) 0%, var(--accent) 55%, var(--amber) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero-tag{
  margin-top:8px; font-family:var(--mono); font-size:11.5px; font-weight:700;
  letter-spacing:.24em; color:var(--gray);
  display:flex; align-items:center; gap:12px;
}
.hero-tag::before{
  content:''; width:34px; height:1px; background:var(--rule-1);
}
.hero-pos{
  margin:24px 0 0; font-size:19.5px; line-height:1.6; font-weight:800; color:var(--ink-strong);
}
.hero-pos em{color:var(--accent)}
.hero-desc{
  margin:11px 0 0; font-size:14.5px; line-height:1.72; color:var(--ink-soft); max-width:660px;
}

.hero-contact{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:24px;
  padding-top:20px; border-top:1px solid var(--hairline-2);
  font-size:13px; color:var(--ink-faint);
}
.hero-contact b{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.12em;
  color:var(--accent); margin-right:8px;
}

/* ---- 板块头 ---- */
.sec-head{padding-top:6px; margin-bottom:18px}
.kicker{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); margin-bottom:7px;
  display:flex; align-items:center; gap:11px;
}
.kicker::before{content:''; width:26px; height:1px; background:var(--rule-1); flex:none}
.sec-title{
  margin:0; font-size:25px; font-weight:800; letter-spacing:-.005em;
  line-height:1.35; padding-bottom:14px; position:relative;
  background:var(--grad-hero);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.sec-title::after{
  content:''; position:absolute; left:0; bottom:0; width:46px; height:3px;
  background:var(--grad-rule);
  border-radius:2px;
  -webkit-text-fill-color:initial;
}
.sec-sub{margin:9px 0 0; font-size:14.5px; color:var(--txt2); line-height:1.72}

/* ---- 子导航（板块内） ---- */
.subnav{
  position:sticky; top:52px; z-index:5;
  display:flex; flex-wrap:wrap; gap:6px;
  margin:0 0 22px; padding:9px 0;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.subnav a{
  padding:5px 13px; border-radius:20px; font-size:12.5px; font-weight:600;
  color:var(--txt2); background:var(--tint-3);
  border:1px solid transparent;
  transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s;
  transform-origin:center;
}
.subnav a:hover{transform:scale(1.06); background:var(--grad-btn); color:var(--on-btn)}
.subnav a.on{
  background:var(--grad-btn); color:var(--on-btn); font-weight:700;
  box-shadow:0 4px 12px var(--sh-a28);
}

/* ---- 项目卡 ---- */
.proj{padding-top:12px; margin-top:26px; border-top:1px solid var(--line); scroll-margin-top:104px}
.proj:first-of-type{margin-top:0; border-top:0; padding-top:0}
.proj-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.proj-title{margin:0; font-size:19px; font-weight:800; letter-spacing:.01em; color:var(--ink)}
.proj-badge{
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.12em;
  padding:3px 10px; border-radius:20px;
  background:var(--tint-2); color:var(--txt2); border:1px solid var(--line2);
  white-space:nowrap;
}
.proj-badge.live{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.proj-badge.wip{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line)}
.proj-lead{margin:0 0 14px; font-size:14px; color:var(--txt2); line-height:1.7}

/* ---- 扫读层 ---- */
.scan{
  background:linear-gradient(180deg,var(--tint-3),rgba(255,255,255,.42));
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:11px; padding:14px 18px; margin:0 0 16px;
}
.scan-lead{margin:0; font-size:14px; line-height:1.72; color:var(--txt)}
.scan-hl{
  display:flex; gap:11px; align-items:baseline; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--line2);
}
.hl-tag{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.16em;
  padding:3px 9px; border-radius:5px; background:var(--grad-btn); color:var(--on-btn); flex:none;
  text-transform:uppercase;
}
.hl-body{font-size:13.5px; color:var(--txt2); line-height:1.68; flex:1; min-width:220px}

/* ---- 内容块 ---- */
.blk{margin-bottom:15px}
.blk-h{
  font-size:13.5px; font-weight:800; letter-spacing:.06em; color:var(--ink);
  margin-bottom:6px; display:flex; align-items:center; gap:9px;
}
.blk-h::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none}
.blk-b{margin:0; font-size:14.5px; line-height:1.75; color:var(--txt2)}
.blk-b strong{color:var(--ink)}

.steps{list-style:none; margin:10px 0 0; padding:0; counter-reset:st}
.steps li{
  position:relative; padding-left:26px; margin-bottom:6px;
  font-size:14px; line-height:1.72; color:var(--txt2);
  counter-increment:st;
}
.steps li::before{
  content:counter(st); position:absolute; left:0; top:5px;
  width:17px; height:17px; border-radius:50%;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.steps b{color:var(--ink); font-weight:800}
.steps .sp{color:var(--txt3); font-size:13px}

/* ---- 架构图 ---- */
.arch{display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; margin:6px 0 12px}
.a-node{
  flex:1 1 176px; min-width:0;
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  border-top:3px solid var(--accent);
  border-radius:10px; padding:12px 14px;
  transition:transform .26s var(--ease), box-shadow .26s, border-color .26s;
}
.a-node:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px var(--sh-d12);
  border-top-color:var(--accent2);
}
.a-t{font-size:14px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.a-tag{
  font-family:var(--mono); font-size:9.5px; font-weight:700; padding:2px 7px;
  border-radius:4px; background:var(--tint-2); color:var(--txt2);
  letter-spacing:.1em; white-space:nowrap;
}
.a-d{font-size:12.5px; color:var(--gray); line-height:1.7; margin-top:6px}
.a-arrow{display:flex; align-items:center; color:var(--accent2); font-weight:800; flex:none; padding:0 1px; font-size:15px}
.arch-cap{font-size:12.5px; color:var(--gray); margin:0; line-height:1.7}

.anchor-slot{
  display:flex; align-items:center; justify-content:center;
  min-height:170px; border:2px dashed var(--line2); border-radius:9px;
  background:rgba(255,255,255,.4); color:var(--gray); font-size:13px; padding:14px; text-align:center;
}

/* ---- 图 ---- */
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:15px; margin:18px 0 6px}
.shot{margin:0}
.shot.wide{grid-column:1/-1}
.shot img{
  width:100%; border:1px solid var(--line); border-radius:9px; background:var(--card-solid);
  cursor:zoom-in;
  transition:transform .32s var(--ease), box-shadow .32s, border-color .32s;
}
.shot img:hover{transform:scale(1.015); border-color:var(--accent2); box-shadow:0 14px 28px var(--sh-d16)}
.shot.framed img{padding:11px; background:var(--card-solid); box-shadow:0 3px 14px var(--sh-d10)}
.shot figcaption{
  font-size:12.5px; color:var(--gray); line-height:1.7; margin-top:8px;
  padding-left:11px; border-left:2px solid var(--line2);
}

/* ---- 视频 ---- */
.vwrap{
  position:relative; border-radius:12px; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); background:var(--video-bg); margin:6px 0 0;
  box-shadow:0 10px 26px var(--sh-d18);
}
.vwrap .poster{width:100%; display:block; opacity:.92; transition:opacity .3s}
.vwrap:hover .poster{opacity:1}
.vwrap video{width:100%; display:block}
.play{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:11px;
  background:linear-gradient(180deg,var(--video-scrim-1),var(--video-scrim-2));
}
.play i{
  width:58px; height:58px; border-radius:50%;
  border:2px solid rgba(255,255,255,.95); background:var(--video-ring);
  position:relative;
  transition:transform .3s var(--ease), background .3s;
}
.play i::after{
  content:''; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-left:15px solid var(--on-accent); border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.vwrap:hover .play i{transform:scale(1.12); background:var(--accent)}
.play span{
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.14em;
  color:var(--on-accent); text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.vcap{font-size:12.5px; color:var(--gray); margin-top:9px; line-height:1.75}
.vcap a{color:var(--accent); font-weight:700}

/* ---- 事实清单 ---- */
.vfacts{margin:16px 0 0; display:grid; gap:10px}
.vfacts > div{
  display:grid; grid-template-columns:78px 1fr; gap:14px; align-items:start;
  padding:11px 14px; background:rgba(255,255,255,.5); border-radius:9px;
  border-left:2px solid var(--accent);
}
.vfacts dt{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.12em;
  color:var(--txt2); padding-top:2px;
}
.vfacts dd{margin:0; font-size:13.5px; line-height:1.7; color:var(--txt2)}

.caps{display:flex; flex-wrap:wrap; gap:7px}
.cap{
  font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px;
  background:var(--tint-1); color:var(--accent-deep); letter-spacing:.04em;
}

/* ---- CTA ---- */
.cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  padding:11px 22px; border-radius:10px;
  background:var(--grad-btn); color:var(--on-btn);
  font-size:13.5px; font-weight:700;
  border:1px solid transparent;
  box-shadow:0 4px 14px var(--sh-a24);
  transition:transform .26s var(--ease), filter .26s, box-shadow .26s;
}
.cta:hover{
  transform:translateY(-3px); filter:brightness(1.12);
  box-shadow:0 12px 26px var(--sh-a32); color:var(--on-btn);
}
.cta .arw{transition:transform .26s var(--ease)}
.cta:hover .arw{transform:translateX(5px)}

.note{
  font-size:12.5px; color:var(--gray); line-height:1.8;
  background:rgba(255,255,255,.5); border-radius:9px; padding:11px 15px;
  border-left:2px solid var(--line2); margin-top:18px;
}

/* ---- 关于 ---- */
.about-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:14px}
.ab-card{
  background:rgba(255,255,255,.66); border:1px solid var(--line); border-radius:12px; padding:20px;
  border-top:3px solid var(--accent);
  transition:transform .28s var(--ease), box-shadow .28s;
}
.ab-card:hover{transform:translateY(-5px); box-shadow:0 14px 30px var(--sh-d12)}
.ab-card:nth-child(2){border-top-color:var(--accent2)}
.ab-card:nth-child(3){border-top-color:var(--ok)}
.ab-card h4{margin:0 0 8px; font-size:16px; font-weight:800; color:var(--ink)}
.ab-card p{margin:0; font-size:13.5px; line-height:1.72; color:var(--txt2)}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:12px; margin-top:22px}
.stat{
  background:linear-gradient(165deg,var(--tint-3),rgba(255,255,255,.6));
  border:1px solid var(--line); border-radius:12px; padding:17px 14px; text-align:center;
}
.sv{
  font-family:var(--mono); font-size:31px; font-weight:800; line-height:1.1; letter-spacing:-.01em;
  background:linear-gradient(120deg, var(--accent-deep), var(--accent) 60%, var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sl{font-size:12px; color:var(--gray); margin-top:5px; letter-spacing:.04em}

/* ---- 表格 ---- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.66); margin-top:6px}
.arts{border-collapse:collapse; width:100%; font-size:13.5px; min-width:660px}
.arts thead th{
  background:var(--tint-1); color:var(--ink-strong); text-align:left; font-weight:700;
  padding:11px 14px; font-size:12.5px; letter-spacing:.06em; white-space:nowrap;
}
.arts td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--txt2); line-height:1.7}
.arts tbody tr{transition:background .18s}
.arts tbody tr:hover{background:var(--tint-4)}
.arts tbody tr:last-child td{border-bottom:0}
.arts .c-cat{font-size:12px; font-weight:700; color:var(--accent); white-space:nowrap; letter-spacing:.03em}
.arts .c-t{font-weight:700; color:var(--ink); min-width:150px}
.arts .c-g{font-size:12.5px; color:var(--gray); white-space:nowrap}
.arts .c-d{font-family:var(--mono); font-size:12px; color:var(--gray); white-space:nowrap}
.arts td a{position:relative; font-weight:700; white-space:nowrap}
.arts td a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--accent); transition:width .26s var(--ease);
}
.arts td a:hover::after{width:100%}

/* ---- 致谢（清透浅紫） ---- */
.sec.thanks{
  background:
    radial-gradient(680px 360px at 50% -10%, var(--hero-bg-1), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.6), var(--hero-bg-4));
  border-color:var(--hairline-3); color:var(--ink); text-align:center;
  padding:60px 38px 54px;
  box-shadow:0 10px 30px var(--sh-a08);
}
.tk-h{
  margin:0; font-size:25px; font-weight:800; letter-spacing:.03em;
  background:var(--grad-hero);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tk-p{max-width:600px; margin:14px auto 0; font-size:14.5px; line-height:1.78; color:var(--ink-soft)}
.tk-cta{
  display:inline-block; margin-top:26px; padding:12px 32px; border-radius:10px;
  background:var(--grad-btn); color:var(--on-btn); font-weight:800; font-size:14px;
  box-shadow:0 4px 14px var(--sh-a30);
  transition:transform .26s var(--ease), filter .26s, box-shadow .26s;
}
.tk-cta:hover{transform:translateY(-3px); filter:brightness(1.12); box-shadow:0 14px 30px var(--sh-a36); color:var(--on-btn)}
.tk-contact{margin-top:26px; font-size:13px; color:var(--ink-faint); font-family:var(--mono); letter-spacing:.04em}
.tk-sign{margin-top:10px; font-size:12px; color:var(--accent); letter-spacing:.06em}

/* ============================================================
   板块翻页条：明确的"上一块 / 下一块"
   ============================================================ */
.pager{
  position:fixed; z-index:250; left:calc(var(--nav) + 110px); right:110px; bottom:20px;
  height:58px; display:flex; align-items:center; gap:14px;
  padding:0 12px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--rule-2); border-radius:16px;
  box-shadow:0 14px 40px var(--sh-d14);
}
.pg{
  display:flex; align-items:center; gap:11px;
  height:42px; padding:0 18px; border-radius:11px;
  border:1px solid transparent; background:var(--tint-3); color:var(--txt2);
  font-family:inherit; font-size:13px; cursor:pointer;
  transition:transform .24s var(--ease), background .24s, color .24s, border-color .24s, box-shadow .24s;
  transform-origin:center;
}
.pg:hover{transform:scale(1.04); background:var(--grad-btn); color:var(--on-btn); box-shadow:0 8px 20px var(--sh-a30)}
.pg:disabled{opacity:.32; cursor:default; transform:none; background:transparent; box-shadow:none; color:var(--txt3)}
.pg-txt{display:flex; flex-direction:column; align-items:flex-start; line-height:1.25}
.pg-lbl{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.16em; color:var(--gray); font-style:normal}
.pg-name{font-size:14px; font-weight:800; white-space:nowrap}
.pg-next .pg-txt{align-items:flex-end}
.pg-arw{font-size:17px; font-weight:800; color:var(--accent)}
.pg:hover .pg-arw{color:var(--on-btn)}
.pg-now{
  flex:1; display:flex; align-items:baseline; justify-content:center; gap:8px;
  font-size:12.5px; color:var(--gray); min-width:0;
}
.pg-now .pg-i{font-family:var(--mono); font-size:16px; font-weight:800; color:var(--accent)}
.pg-cur{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ============ 大图弹层 ============ */
.lb{
  position:fixed; inset:0; z-index:500; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:14px;
  background:var(--scrim); padding:40px 24px; cursor:zoom-out;
  backdrop-filter:blur(3px);
}
.lb.on{display:flex; animation:lbIn .24s var(--ease)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb img{
  max-width:min(1180px,94vw); max-height:82vh; object-fit:contain; cursor:default;
  border-radius:10px; box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:lbUp .34s var(--ease);
}
@keyframes lbUp{from{opacity:0; transform:translateY(16px) scale(.985)}to{opacity:1; transform:none}}
.lb-cap{color:var(--scrim-text); font-size:13px; max-width:720px; text-align:center; line-height:1.8}
.lb-x{
  position:absolute; top:18px; right:22px; width:38px; height:38px;
  border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:transparent; color:var(--on-accent); font-size:16px; cursor:pointer;
  transition:transform .2s var(--ease), background .2s;
}
.lb-x:hover{background:rgba(255,255,255,.14); transform:scale(1.08)}

/* ============ 返回顶部 ============ */
.totop{
  position:fixed; right:26px; bottom:94px; z-index:300;
  display:flex; align-items:center; gap:7px;
  height:46px; padding:0 18px; border-radius:23px;
  border:1px solid var(--rule-4); background:var(--grad-btn); color:var(--on-btn);
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.02em; cursor:pointer;
  opacity:0; transform:translateY(12px) scale(.92); pointer-events:none;
  box-shadow:0 10px 26px var(--sh-a28);
  backdrop-filter:blur(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), box-shadow .2s;
}
.totop-arw{font-size:18px; line-height:1}
.totop.on{opacity:1; transform:none; pointer-events:auto}
.totop:hover{box-shadow:0 12px 32px var(--sh-a32); transform:translateY(-3px)}

/* ============================================================
   入场动画：文字 / 卡片（不是画面动画）
   ============================================================ */
.fx{opacity:0; transform:translateY(16px)}
.fx.in{opacity:1; transform:none; transition:opacity .45s var(--ease), transform .45s var(--ease)}
/* 标题遮罩上滑 */
.fx-mask{overflow:hidden; display:block}
.fx-rise{display:block; transform:translateY(105%)}
.fx-rise.in{transform:none; transition:transform .5s var(--ease)}
/* 数字 */
.fx-num{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fx,.fx-rise{opacity:1!important; transform:none!important}
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

/* ============ 移动端 ============ */
@media (max-width:1080px){
  :root{--nav:230px}
  .main{padding:20px 18px 104px}
  .sec.act{padding:0 26px 38px}
  .ch-bar{margin:0 -26px 22px; padding:12px 26px}
  .pager{left:calc(var(--nav) + 14px); right:14px}
}
@media (max-width:820px){
  html,body{overflow-x:hidden}
  .topbar{display:flex}
  .sidebar{
    top:12px; bottom:12px; left:12px;
    width:min(280px, calc(100vw - 24px));
    border-radius:20px;
    transform:translateX(calc(-100% - 12px));
    transition:transform .36s var(--ease);
    box-shadow:0 14px 44px rgba(36,31,53,.22);
    padding-top:calc(56px + env(safe-area-inset-top, 0px));
  }
  body.nav-open .sidebar{transform:none}
  .main{margin-left:0; padding-top:74px}
  .sec.act{padding:0 16px 32px; border-radius:13px}
  .ch-bar{margin:0 -16px 20px; padding:11px 16px; border-radius:13px 13px 0 0}
  .sec.hero{padding:36px 20px 34px}
  .hero-avatar{width:112px; height:112px}
  .hero-name{font-size:32px}
  .hero-pos{font-size:16.5px}
  .sec-title{font-size:24px}
  .proj-title{font-size:19px}
  .sv{font-size:26px}
  .vfacts > div{grid-template-columns:1fr; gap:4px}
  .pager{left:12px; right:12px; bottom:12px; height:52px; gap:8px; padding:0 8px}
  .pg{padding:0 11px; gap:8px}
  .pg-lbl{display:none}
  .pg-name{font-size:12.5px}
  .pg-now .pg-cur{display:none}
  .totop{bottom:76px; right:16px}
  body.nav-open::before{
    content:''; position:fixed; inset:0; z-index:90;
    background:var(--nav-scrim); backdrop-filter:blur(2px);
  }
  .sec[data-block="video"].act{grid-template-columns:1fr; gap:18px}
  .sec[data-block="video"].act .vwrap,.sec[data-block="video"].act .vcap,.sec[data-block="video"].act .blk{grid-column:auto}
}

/* ============ 编辑模式：全部板块展开，照常改字 ============ */
body.editing .sec{display:block!important; animation:none!important}
body.editing .sec.act{margin-bottom:34px}
body.editing .pager{display:none}

/* ============ 排版 v4：统一图片体系 · 图文成组（2026-10-14） ============
   问题复盘：v3 的 auto-fit 网格＋wide 混排造成图大小不一、图文错位。
   改为：
   ① 同组图片显式列数（g2/g3/g4）＋统一比例：艺术图 16:9、方图 1:1、截图同宽同框；
   ② 关键项目用 .split 左文右图成组，图片与文字一一对应；
   ③ 单个截图居中同宽（玻璃卡框），多个截图等列等框。 */
.proj{display:block}
.proj .vwrap{max-width:560px}

/* ---- 图片组：显式列数，杜绝大小混杂 ---- */
.shots{
  display:grid;
  grid-template-columns:repeat(var(--cols,4),1fr);
  gap:14px;
  margin:14px 0 6px;
  max-width:820px;
}
.shots.g2{--cols:2}
.shots.g3{--cols:3}
.shots.g4{--cols:4}
.shots .shot{
  margin:0; padding:8px 8px 7px;
  background:rgba(255,255,255,.62);
  border:1px solid var(--hairline-2);
  border-radius:13px;
  box-shadow:0 10px 26px rgba(36,31,53,.10);
}
.shots .shot img{
  width:100%; display:block; border-radius:7px;
  aspect-ratio:16/9; object-fit:cover;      /* 艺术图统一 16:9 */
}
.shots .shot.sq img{aspect-ratio:1/1; object-fit:cover}   /* 方图（穿戴甲打版） */
.shots .shot.ui img{aspect-ratio:auto; object-fit:contain; background:var(--card-solid)} /* 截图保留原比例 */
.shots .shot .shot-ph{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:16/10; border-radius:7px;
  border:1.5px dashed var(--line-strong); background:var(--tint-2);
  color:var(--gray); font-size:13px; letter-spacing:.06em;
}
.shots .shot figcaption{
  font-size:11.5px; color:var(--gray); line-height:1.65;
  margin-top:7px; padding:0 2px; border-left:0;
}

/* 单图截图：居中同宽，玻璃卡框 */
.shots.single{display:block; max-width:720px}
.shots.single .shot{padding:14px 14px 12px}

/* ---- 左文右图成组（IP 三视图 / 视频上下文） ---- */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:26px;
  align-items:center;
  margin:16px 0 4px;
}
.split .s-txt{min-width:0}
.split .s-media{min-width:0}

/* ---- Hero 数据条：6 秒扫读 ---- */
.hero-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
  margin-top:24px;
}
.hstat{
  background:rgba(255,255,255,.62); border:1px solid var(--line);
  border-radius:12px; padding:13px 16px 11px;
  border-top:2px solid var(--accent);
  transition:transform .26s var(--ease), box-shadow .26s;
}
.hstat:hover{transform:translateY(-3px); box-shadow:0 12px 26px var(--sh-d10)}
.hstat b{
  display:block; font-family:var(--mono); font-size:22px; font-weight:800;
  line-height:1.1; color:var(--accent-deep); letter-spacing:-.01em;
}
.hstat span{display:block; font-size:12px; color:var(--gray); margin-top:5px; letter-spacing:.04em}

/* ---- 待补素材占位卡（简洁、不刺眼） ---- */
.anchor-slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  aspect-ratio:16/9; border:1.5px dashed var(--line2); border-radius:9px;
  background:rgba(255,255,255,.45); color:var(--gray); font-size:12.5px;
  text-align:center; padding:12px; line-height:1.6;
}
.anchor-slot i{
  font-style:normal; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; color:var(--mute-3);
}

/* ---- 架构图：五节点行更紧凑 ---- */
.arch{gap:7px}
.a-node{flex:1 1 150px; padding:11px 13px}

/* ---- 科普视频板块：视频右、文字左（图文均衡，仅激活时生效） ---- */
.sec[data-block="video"].act{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:20px 30px;
  align-items:start;
}
.sec[data-block="video"].act .ch-bar{grid-column:1/-1}
.sec[data-block="video"].act .sec-head{grid-column:1/-1; grid-row:2}
.sec[data-block="video"].act .vwrap{grid-column:2; grid-row:3}
.sec[data-block="video"].act .vcap{grid-column:2; grid-row:4}
.sec[data-block="video"].act .blk{grid-column:1}

/* ---- 移动端适配 ---- */
@media (max-width:820px){
  .split{grid-template-columns:1fr; gap:18px}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{max-width:none}
}
@media (max-width:560px){
  .shots.g4{--cols:2}
  .shots.g2,.shots.g3{--cols:2}
}