/* 中华龙图腾 · 页面结构样式
   顺序：舞台 → 侧栏 → 序 → 壹 → 贰 → 页脚 → 响应式 */

/* ============ 章头壁画底图（最底层，龙形之下） ============ */
#mural{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s var(--ease);
}
#mural.on{ opacity:.58; }
body[data-ch="xu"] #mural.on{ opacity:.34; }   /* 序：壁画压得更低，让标题站住 */
#mural img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity 1.2s var(--ease);
}
#mural::after{ /* 压暗并把边缘揉进底色 */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 72% 62% at 50% 46%, rgba(15,23,32,0) 40%, rgba(15,23,32,.72) 100%),
    linear-gradient(180deg, rgba(15,23,32,.55) 0%, rgba(15,23,32,.18) 42%, rgba(15,23,32,.92) 100%);
}

/* X2 换章时的碎片转场 */
#bgtiles{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; transition:opacity .18s linear;
  pointer-events:none;
  filter:brightness(.82) saturate(.62) contrast(1.02);   /* 与 #bgstage img 完全一致 */
}

/* ============ 背景图层（有图则启用，无图不影响） ============ */
#bgstage{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; opacity:0;
  transition:opacity .9s var(--ease);
}
#bgstage img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  filter:brightness(.82) saturate(.62) contrast(1.02);
  transition:opacity 1s var(--ease);
}
#bgstage::after{ /* 压暗，保证正文可读；右侧放亮让龙透出来 */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(15,23,32,.95) 0%, rgba(15,23,32,.84) 40%, rgba(15,23,32,.44) 100%),
    linear-gradient(180deg, rgba(15,23,32,.42) 0%, rgba(15,23,32,0) 32%, rgba(15,23,32,.58) 100%);
}
body.bg-on #bgstage{ opacity:1; }
/* 像素龙本身很暗，单独提亮一档 */
#bgstage[data-key="09_pixel.jpg"] img{ filter:brightness(1.5) saturate(1.15); }
#bgstage[data-key="09_pixel.jpg"] #bgtiles{ filter:none; }
body.bg-muted #bgstage{ opacity:0; }   /* 章头让位给壁画 */

/* 内容层 */
.flow{ position:relative; z-index:2; }
.wrap{ width:min(var(--w-max), calc(100% - 96px)); margin-inline:auto; }

/* 左侧可读栏：给文字一块安静的底 */
.read{
  position:relative;
  max-width:520px;
  padding:2px 0;
}
.read::before{
  content:""; position:absolute; inset:-56px -90px -56px -74px; z-index:-1;
  background:linear-gradient(100deg, rgba(15,23,32,.97) 0%, rgba(15,23,32,.92) 52%, rgba(15,23,32,.45) 78%, rgba(15,23,32,0) 100%);
  filter:blur(22px);
}

/* ============ 右侧时代字 / 章节栏 ============ */
#rail{
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  z-index:20;
  height:min(34vh, 320px);
  display:flex; flex-direction:column; justify-content:space-between;
  align-items:flex-end;
  padding-right:8px;
}
#rail::before{ /* 竖线：贴着右边缘，给标签做轴线 */
  content:""; position:absolute; right:3px; top:2px; bottom:2px; width:1px;
  background:linear-gradient(to bottom, transparent, var(--line) 10%, var(--line) 90%, transparent);
}
.rail-tick{ display:none; }

.rail-item{
  position:relative;
  display:flex; align-items:center; justify-content:flex-end;
  background:none; border:0; cursor:pointer; padding:0; margin:0;
  height:30px; min-width:26px;
  color:var(--ink-faint);
  font-family:var(--font-song); font-size:14px; letter-spacing:.14em;
  transition:color .3s var(--ease);
}
.rail-item::after{ /* 小刻度，替代原来的 tick */
  content:""; position:absolute; right:-7px; top:50%;
  width:7px; height:1px; background:var(--line);
  transform:translateY(-50%);
  transition:background .3s var(--ease), width .3s var(--ease);
}
.rail-item.on::after{ background:var(--cinnabar); width:14px; }

.rail-item .n{
  position:relative; z-index:1;
  opacity:.62; transition:font-size .3s var(--ease), opacity .3s var(--ease);
}
/* 悬停只高亮数字，不预览字形：相邻章节字形本来就重复，预览会误导 */
.rail-item:hover{ color:var(--ink); }
.rail-item:hover .n{ opacity:1; }
.rail-item:hover::after{ background:rgba(200,207,196,.55); width:11px; }
.rail-item.on{ color:var(--ink); }
.rail-item.on .n{ font-size:20px; opacity:1; }

/* 字形：绝对定位在标签左侧，只在激活时出现，不撑动排版 */
.rail-item .rg{
  position:absolute; right:calc(100% + 8px); top:50%;
  width:60px; height:60px; display:block;
  transform:translateY(-50%) scale(.82);
  opacity:0; color:var(--jade);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}

.rail-item.on .rg{ opacity:1; transform:translateY(-50%) scale(1); filter:drop-shadow(0 2px 14px rgba(10,16,22,.95)); }

.rail-item.on::before{ /* 字形底衬：压在照片上也读得清 */
  content:""; position:absolute; right:calc(100% - 2px); top:50%;
  width:96px; height:96px; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(13,20,27,.94) 34%, rgba(13,20,27,0) 74%);
  pointer-events:none;
}

.rail-item .rg.t{
  font-family:var(--font-song); font-size:42px; line-height:60px;
  text-align:center; letter-spacing:0;
}
.rail-item .rg.t.li{ font-family:var(--font-li); }
.rail-item .rg.t.kai{ font-family:var(--font-kai); }
.rail-item.on .rg.t{ font-size:44px; }
#rail .rail-note{ display:none; }

/* ============ 序 · 首屏 ============ */
/* 首屏墨雨：落在背景之上、文字之下 */
#heroRain{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
}
#hero{
  min-height:100vh;
  display:grid; place-items:center;
  position:relative; z-index:2;
  padding:9vh 24px 13vh;
  overflow:hidden;
}

/* 背景：三层缓慢漂移的光斑，再随光标整体位移 */
.hero-bg{
  position:absolute; inset:-12%; z-index:0; pointer-events:none;
  will-change:transform;
}
.hero-bg .hb{
  position:absolute; display:block; border-radius:50%;
  /* 不再用 blur(64px)：径向渐变本身已经是柔的，大半径滤镜在滚动时很贵 */
  will-change:transform;
}
.hb-a{
  width:54vw; height:54vw; left:0; top:-8%;
  background:radial-gradient(circle, rgba(78,124,138,.20), rgba(78,124,138,.07) 46%, rgba(78,124,138,0) 78%);
  animation:drift 26s ease-in-out infinite;
}
.hb-b{
  width:46vw; height:46vw; right:-6%; bottom:-12%;
  background:radial-gradient(circle, rgba(180,70,47,.12), rgba(180,70,47,.04) 46%, rgba(180,70,47,0) 78%);
  animation:drift 34s ease-in-out infinite reverse;
}
.hb-c{
  width:34vw; height:34vw; left:42%; top:32%;
  background:radial-gradient(circle, rgba(200,207,196,.09), rgba(200,207,196,0) 70%);
  animation:drift 44s ease-in-out infinite;
}
body.hero-out .hero-bg .hb{ animation-play-state:paused; }`r`n@keyframes drift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(3.5%,-4.5%,0) scale(1.09); }
}

.hero-in{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero-meta{
  font-size:11px; letter-spacing:.42em; color:var(--ink-faint);
  margin-bottom:4.6vh;
}

/* 字形：后面是甲骨形，前面是今天的字 */
/* 艺术字幕：一句一句显隐 */
.hero-sub{
  position:relative;
  width:min(820px, 92vw);
  height:2.6em;
  margin-top:3.2vh;
  font-weight:400;
}
.hs-line{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--font-song);
  font-size:clamp(21px, 2.6vw, 34px);
  letter-spacing:.2em; line-height:1.6;
  color:var(--ink);
  opacity:0; filter:blur(7px);
  transform:translateY(10px);
  transition:opacity 1.15s var(--ease), filter 1.15s var(--ease), transform 1.15s var(--ease);
  text-shadow:0 0 46px rgba(15,23,32,.95);
  pointer-events:none;
  white-space:nowrap;
}
.hs-line.on{ opacity:1; filter:blur(0); transform:none; }
.hs-t{ display:block; white-space:nowrap; }
.hs-line i{ font-style:normal; color:var(--jade); }

@media (max-width:900px){
  .hero-sub{ height:3.4em; margin-top:2.6vh; }
  .hs-line{ font-size:clamp(18px, 5.2vw, 24px); letter-spacing:.12em; white-space:normal; line-height:1.7; }
}

.hero-glyph{
  position:relative;
  width:clamp(220px,27vw,340px); height:clamp(220px,27vw,340px);
  margin-bottom:3.6vh;
  display:grid; place-items:center;
}
.hg-ring{
  position:absolute; inset:-7%; border-radius:50%;
  border:1px solid rgba(200,207,196,.10);
  animation:ringSpin 70s linear infinite;
  pointer-events:none;
}
.hg-ring::before{
  content:""; position:absolute; top:-2.5px; left:50%;
  width:4px; height:4px; margin-left:-2px; border-radius:50%;
  background:var(--cinnabar); opacity:.75;
  box-shadow:0 0 8px rgba(180,70,47,.6);
}
@keyframes ringSpin{ to{ transform:rotate(360deg); } }

.hg-back, .hg-front{
  position:absolute; inset:0; width:100%; height:100%;
  will-change:transform, opacity;
}

/* ---- 层叠字形：六体 + 仿宋 + 瘦金，越远越透明 ---- */
.hg{ position:absolute; left:50%; top:50%; will-change:transform, opacity; }

.glyph-layer{
  width:clamp(210px,25vw,320px); height:clamp(210px,25vw,320px);
  display:grid; place-items:center;
  font-family:var(--font-song);
  font-size:clamp(180px,21.5vw,275px);
  line-height:1; color:var(--jade);
  transform:translate(-50%,-50%) translate(var(--x,0), var(--y,0)) scale(var(--s,1));
  opacity:var(--o,.2);
  pointer-events:none;
  user-select:none;
}
.glyph-layer svg{ width:100%; height:100%; display:block; }

@media (max-width:720px){
  .glyph-layer{
    width:clamp(96px,30vw,140px); height:clamp(96px,30vw,140px);
    font-size:clamp(84px,26vw,124px);
  }
}

/* 主体简体龙 */
.hg-front{
  left:0; top:0; width:100%; height:100%;
  color:var(--ink);
  will-change:transform, opacity;
}
.hg-front text{ font-size:74px; }


/* 引言（旧，已移除） */


/* 接续引导：细线 + 箭头，悬停给反馈，点击滚到序章 */
.hero-idx{
  position:absolute; left:6vw; bottom:5vh;
  font-size:11px; letter-spacing:.26em; color:var(--ink-faint);
}
.scroll-cue{
  position:absolute; bottom:4.6vh; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:11px;
  padding:12px 20px 14px;
  background:none; border:0; cursor:pointer; font:inherit;
  color:var(--ink-faint);
  transition:color .38s var(--ease), transform .38s var(--ease);
}
.cue-txt{
  font-size:11px; letter-spacing:.28em;
  transition:letter-spacing .38s var(--ease), color .38s var(--ease);
}
.cue-line{
  position:relative; display:block;
  width:1px; height:46px; overflow:hidden;
  background:linear-gradient(to bottom, rgba(200,207,196,.38), rgba(200,207,196,.05));
  transition:height .38s var(--ease), background .38s var(--ease);
}
.cue-line i{
  position:absolute; left:0; top:-40%; width:1px; height:40%;
  background:var(--azure-hi);
  animation:cueTrail 2.8s var(--ease) infinite;
}
@keyframes cueTrail{
  0%{ transform:translateY(0); opacity:0; }
  25%{ opacity:1; }
  100%{ transform:translateY(360%); opacity:0; }
}
.scroll-cue::after{
  content:""; width:8px; height:8px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  opacity:.5;
  transition:transform .38s var(--ease), opacity .38s var(--ease);
}
.scroll-cue:hover{ color:var(--jade); transform:translateX(-50%) translateY(-3px); }
.scroll-cue:hover .cue-txt{ letter-spacing:.46em; }
.scroll-cue:hover .cue-line{ height:58px; background:linear-gradient(to bottom, rgba(200,207,196,.65), rgba(200,207,196,.05)); }
.scroll-cue:hover::after{ transform:rotate(45deg) translate(2px,2px); opacity:1; }
.scroll-cue:focus-visible{ outline:1px solid var(--cinnabar); outline-offset:6px; }

@media (max-width:900px){
  .hero-lines{ min-height:11em; }
  .hero-glyph{ width:clamp(180px,42vw,260px); height:clamp(180px,42vw,260px); }
}

/* ============ 序 · 三种回答 ============ */
.ans-sec{
  position:relative; z-index:2;
  padding:11vh 0 15vh;
  overflow:hidden;
}
.ans-sky{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ans-dragon{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.82) saturate(.62) contrast(1.02);
}
/* 与 #bgstage::after 同一组压暗层，保证右侧透光、左侧可读 */
.ans-sky::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(15,23,32,.95) 0%, rgba(15,23,32,.84) 40%, rgba(15,23,32,.44) 100%),
    linear-gradient(180deg, rgba(15,23,32,.42) 0%, rgba(15,23,32,0) 32%, rgba(15,23,32,.58) 100%);
}
.sec-head{ margin-bottom:6vh; }
.sec-kicker{
  font-size:11px; letter-spacing:.34em; color:var(--ink-faint); margin-bottom:18px;
}
.sec-title{
  font-size:clamp(20px,2.2vw,27px); letter-spacing:.14em; color:var(--ink);
}

/* 三个图例散在页面里，不在同一条竖直轴线上 */
.ans-map{ position:relative; min-height:92vh; }

.ans-node{
  position:absolute; width:clamp(118px,12vw,158px); z-index:1;
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; text-align:left; color:var(--ink-faint);
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.n-1{ left:10%;  top:9%; }
.n-2{ left:54%;  top:30%; }
.n-3{ left:23%;  top:66%; }

.ans-node:hover, .ans-node.on{ color:var(--jade); z-index:6; }
.ans-node:hover{ transform:translateY(-4px); }

.an-ico{
  display:block; width:100%; height:auto; max-height:150px;
  object-fit:contain; object-position:left center;
  opacity:.62;
  filter:drop-shadow(0 0 10px rgba(200,207,196,.10));
  transition:opacity .4s var(--ease);
}
.ans-node.on .an-ico, .ans-node:hover .an-ico{ opacity:.95; }

.an-name{
  display:block; margin-top:14px;
  font-family:var(--font-song); font-size:15px; letter-spacing:.26em;
  color:inherit;
  transition:letter-spacing .4s var(--ease);
}
.ans-node.on .an-name{ letter-spacing:.36em; }

/* 诠释卡片 */
.an-pop{
  display:block; z-index:7;
  position:absolute; left:calc(100% + 24px); top:-2px;
  width:min(31ch, 300px);
  padding:16px 18px;
  background:rgba(10,17,24,.94);
  border:1px solid var(--line);
  border-left:2px solid var(--cinnabar);
  opacity:0; transform:translateX(-10px);
  pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.n-2 .an-pop{ left:auto; right:calc(100% + 24px); border-left:0; border-right:2px solid var(--cinnabar); transform:translateX(10px); }
.ans-node.on .an-pop{ opacity:1; transform:none; pointer-events:auto; }

.an-pop b{
  display:block; margin-bottom:9px;
  font-family:var(--font-song); font-size:14px; font-weight:400;
  letter-spacing:.12em; color:var(--ink);
}
.an-pop p{ font-size:12.5px; line-height:1.95; color:var(--ink-dim); }
.an-pop em{
  display:block; margin-top:9px; font-style:normal;
  font-size:12px; line-height:1.8; color:var(--jade);
}

.ans-src{
  margin-top:6vh; font-size:11px; letter-spacing:.08em; color:var(--ink-faint);
}

@media (max-width:900px){
  .ans-map{ min-height:auto; display:flex; flex-direction:column; gap:44px; }
  .ans-node{ position:static; width:auto; max-width:260px; }
  .n-2{ align-self:flex-end; margin-right:4%; }
  .n-3{ margin-left:8%; }
  .an-ico{ width:96px; }
  .an-name{ margin-top:10px; font-size:14px; }
  .an-pop{
    position:static; width:100%; margin-top:12px; padding:12px 14px;
    opacity:1; transform:none; pointer-events:auto;
    border-left:1px solid var(--line);
    background:rgba(10,17,24,.75);
  }
  .an-pop b{ font-size:13px; margin-bottom:6px; }
  .an-pop p{ font-size:12px; line-height:1.85; }
  .an-pop em{ font-size:11.5px; }
  .ans-sec{ padding:9vh 0 11vh; }
}

/* ============ 序 · 星图 ============ */
#stars{ padding:8vh 0 12vh; position:relative; z-index:2; }
.star-box{
  display:grid; grid-template-columns:1fr 340px; gap:56px; align-items:center;
}
#starcanvas{ width:100%; height:420px; display:block; }
.star-side .q{
  font-family:var(--font-song); font-size:23px; letter-spacing:.18em;
  color:var(--ink); margin-bottom:18px;
}
.star-side p{ font-size:14.5px; color:var(--ink-dim); margin-bottom:14px; }
.star-ctl{ margin-top:26px; }
.star-ctl label{
  display:block; font-size:11px; letter-spacing:.24em; color:var(--ink-faint);
  margin-bottom:12px;
}
.star-ctl label i{ font-style:normal; color:var(--ink-faint); opacity:.7; margin-left:8px; }
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:1px; background:var(--line); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; border-radius:50%;
  background:var(--cinnabar); border:0; cursor:grab;
}
input[type=range]::-moz-range-thumb{
  width:11px; height:11px; border:0; border-radius:50%; background:var(--cinnabar);
}
.star-state{
  margin-top:16px; font-size:13px; color:var(--jade);
  font-family:var(--font-song); letter-spacing:.12em;
}

/* ============ 章节头（标题页） ============ */
.ch-head{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:2;
  padding:15vh 0 13vh;
  overflow:hidden;
}
/* 背后一个放大的同款数字，做"封面"层 */
.ch-head::before{
  content:attr(data-num);
  position:absolute; right:-.05em; top:50%;
  transform:translateY(-50%);
  font-family:var(--font-song);
  font-size:clamp(300px, 40vw, 680px);
  line-height:.78; letter-spacing:0;
  color:rgba(200,207,196,.05);
  pointer-events:none; user-select:none;
}
/* 底部一条收边的细线，把标题页和正文分开 */
.ch-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--line) 20%, var(--line) 80%, transparent 100%);
}
.ch-head .wrap{ position:relative; z-index:1; }

.ch-num{
  position:relative;
  font-family:var(--font-song);
  font-size:clamp(96px, 13.5vw, 205px);
  line-height:1;
  letter-spacing:0;
  padding-left:.3em;
  margin-bottom:5vh;
  /* 艺术字：深金渐变填充 + 细描边 + 下沉的墨影（比象牙字重得多） */
  background:linear-gradient(178deg, #F0D79A 0%, #D9AE68 38%, #A87B3E 72%, #6E4B23 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:1.1px rgba(240,215,154,.45);
  filter:drop-shadow(5px 4px 0 rgba(6,10,15,.85)) drop-shadow(0 0 36px rgba(196,150,80,.26));
}
.ch-num::before{      /* 朱砂书耳 */
  content:""; position:absolute; left:0; top:.12em; bottom:.1em;
  width:4px; background:var(--cinnabar);
  box-shadow:0 0 22px rgba(180,70,47,.6), 0 0 60px rgba(180,70,47,.28);
}
.ch-yao{
  position:relative;
  font-family:var(--font-song);
  font-size:clamp(50px, 7vw, 98px);
  letter-spacing:.3em;
  line-height:1.2;
  color:var(--ink);
  margin-left:-.3em;
  padding-top:3.2vh;
  border-top:1px solid var(--line-soft);
}
.ch-sub{
  margin-top:4.2vh; max-width:26em;
  font-size:16px; color:var(--ink-dim); line-height:2.05;
}
.ch-range{
  margin-top:3vh; font-size:12px; letter-spacing:.2em; color:var(--ink-faint);
}

/* ============ 文物条目 ============ */
.obj{
  position:relative; z-index:2;
  padding:16vh 0;
  min-height:74vh;
  display:flex; align-items:center;
}
.obj-idx{
  font-family:var(--font-song); font-size:12px; letter-spacing:.3em;
  color:var(--ink-faint); margin-bottom:26px;
}
.obj-idx b{ color:var(--azure-hi); font-weight:400; }
.obj-name{
  font-size:clamp(24px,2.6vw,32px); letter-spacing:.12em; color:var(--ink);
  margin-bottom:8px;
}
.obj-era{
  font-size:12.5px; letter-spacing:.16em; color:var(--ink-faint);
  margin-bottom:26px;
}
.obj-meta{
  display:flex; flex-wrap:wrap; gap:0 30px;
  font-size:12.5px; color:var(--ink-dim);
  padding:16px 0; margin-bottom:24px;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.obj-meta span{ display:inline-block; }
.obj-meta i{
  font-style:normal; color:var(--ink-faint); margin-right:8px;
  letter-spacing:.12em;
}
.obj-body{ font-size:15.5px; color:var(--ink); line-height:2.05; margin-bottom:18px; }
.obj-note{ font-size:14px; color:var(--ink-dim); line-height:2; }
.obj-note b{ color:var(--jade); font-weight:400; }

.obj-flag{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:22px; font-size:12px; color:var(--cinnabar-text);
  letter-spacing:.14em;
}
.obj-flag::before{
  content:""; width:14px; height:1px; background:var(--cinnabar);
}
.obj-src{
  margin-top:20px; font-size:11.5px; color:var(--ink-faint); letter-spacing:.08em;
}

/* ============ 文物配图（可选，放图即生效） ============ */
.shot{ display:none; margin:0; position:relative; }
.shot.has{ display:block; }
.shot::after{ /* 暗角：把浅色背景的照片压进页面 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 78% 78% at 50% 46%, rgba(15,23,32,0) 52%, rgba(15,23,32,.62) 100%);
}
.shot img{
  display:block; margin-inline:auto;
  max-width:100%; max-height:64vh; width:auto; height:auto;
  border:1px solid var(--line);
  background:#0A1017;
  filter:saturate(.94) contrast(1.03) brightness(.94);
}
.shot figcaption{
  margin-top:12px; font-size:11.5px; color:var(--ink-faint);
  letter-spacing:.08em; text-align:center;
}
.obj.has-img{ min-height:0; padding:12vh 0; }
.obj.has-img .wrap{
  display:grid;
  grid-template-columns:minmax(0,480px) minmax(0,1fr);
  gap:64px;
  align-items:center;
  width:min(var(--w-max), calc(100% - 96px));
}
.obj.has-img .read{ max-width:none; }
.obj.has-img .read::before{ inset:-40px -40px -40px -40px; }

/* ============ 三停小游戏 ============ */
.tp{ margin:6px 0 34px; }
.tp-start{
  font:inherit; font-size:13px; letter-spacing:.18em;
  color:var(--jade); background:transparent;
  border:1px solid rgba(200,207,196,.28);
  padding:11px 22px; cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.tp-start:hover{ border-color:var(--jade); background:rgba(200,207,196,.06); }

.tp-stage{ position:relative; }
.tp-board{
  position:relative; width:100%; max-width:920px;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}
.tp-dragon{
  display:block; width:100%; height:auto;
  opacity:.46;
  transition:opacity .6s var(--ease);
}
.tp.ok .tp-dragon{ opacity:.72; }
.tp-board.snap .tp-dragon{ opacity:.85; }

/* 理想位置：前三次不显示 */
.tp-mark{
  position:absolute; top:-4px; bottom:-4px; width:0;
  border-left:1px dashed rgba(200,207,196,.34);
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
}
.tp.show-marks .tp-mark{ opacity:1; }

/* 分界线 */
.tp-line{
  position:absolute; top:-10px; bottom:-10px; width:3.5px;
  background:var(--cinnabar); cursor:ew-resize;
  touch-action:none;
  transition:background .22s var(--ease), box-shadow .22s var(--ease);
  box-shadow:0 0 0 rgba(196,96,74,0);
}
/* 落在判定区里就是"完成后的颜色" */
.tp-line.in{
  background:var(--jade);
  box-shadow:0 0 16px rgba(200,207,196,.55);
}
.tp-line.dragging.in{
  background:var(--jade);
  box-shadow:0 0 24px 3px rgba(200,207,196,.8);
}
.tp-line::before{        /* 加宽热区，但视觉上还是一根细线 */
  content:""; position:absolute; top:0; bottom:0; left:-16px; right:-16px;
}
.tp-line.dragging{ background:var(--cinnabar-text); }
.tp-line.locked{ cursor:default; background:var(--jade); }
.tp-grip{
  position:absolute; top:50%; left:50%;
  width:17px; height:17px; margin:-8.5px 0 0 -8.5px;
  border-radius:50%; background:var(--bg);
  border:1px solid var(--cinnabar);
  transition:transform .2s var(--ease), border-color .25s var(--ease);
}
.tp-line:hover .tp-grip, .tp-line.dragging .tp-grip{ transform:scale(1.28); }
.tp-line.locked .tp-grip{ border-color:var(--jade); }

/* 三段标签：按实际宽度伸缩 */
.tp-legend{
  display:flex; max-width:920px; margin-top:12px;
  font-size:12px; letter-spacing:.14em; color:var(--ink-faint);
}
.tp-seg{
  flex:1 1 0; min-width:0; padding-left:8px;
  border-left:1px solid var(--line);
  transition:color .4s var(--ease), border-color .4s var(--ease);
  white-space:nowrap; overflow:hidden;
}
.tp.ok .tp-seg{ color:var(--jade); border-left-color:rgba(200,207,196,.5); }

.tp-foot{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  max-width:920px; margin-top:14px;
}
.tp-hint{
  flex:1 1 260px; margin:0;
  font-size:14.5px; line-height:1.95; color:var(--ink-dim);
  transition:color .4s var(--ease);
}
/* 通过时「三段停匀」单独放大 */
.tp-hint b{
  display:block; margin-bottom:6px;
  font-family:var(--font-song); font-weight:400;
  font-size:26px; letter-spacing:.22em; line-height:1.3;
  color:var(--jade);
}
.tp-hint span{ display:block; font-size:13.5px; letter-spacing:.02em; }
.tp.ok .tp-hint{ color:var(--jade); }
.tp-reset{
  font:inherit; font-size:11.5px; letter-spacing:.16em;
  color:var(--ink-faint); background:transparent;
  border:1px solid var(--line); padding:8px 14px; cursor:pointer;
  transition:color .25s, border-color .25s;
}
.tp-reset:hover{ color:var(--jade); border-color:rgba(200,207,196,.4); }

/* ============ 九似拼装小游戏 ============ */
.ng{ margin:34px 0 10px; }
.ng-stage{ position:relative; max-width:920px; }

.ng-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:14px; font-size:12px; letter-spacing:.16em; color:var(--ink-faint);
}
.ng-step{ color:var(--azure-hi); }
.ng-auto{
  font:inherit; font-size:11.5px; letter-spacing:.16em;
  color:var(--ink-dim); background:transparent;
  border:1px solid var(--line); padding:8px 14px; cursor:pointer;
  transition:color .25s, border-color .25s, background .25s;
}
.ng-auto:hover{ color:var(--jade); border-color:rgba(200,207,196,.45); background:rgba(200,207,196,.05); }
.ng-score{ font-family:var(--font-song); color:var(--ink-dim); margin-left:auto; }

.ng-board{
  position:relative; width:100%;
  touch-action:none;
  transition:opacity .4s var(--ease), filter .5s var(--ease);
}
.ng-board.fade{ opacity:0; }
.ng-art{ display:block; width:100%; height:auto; opacity:.5; transition:opacity .6s var(--ease); user-select:none; -webkit-user-drag:none; }
.ng.done .ng-art{ opacity:.82; }

/* 归位后的钉子 */
.ng-pin{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:6px; pointer-events:none;
  animation:pinIn .38s cubic-bezier(.2,.9,.3,1) both;
}
.ng-pin i{
  width:9px; height:9px; border-radius:50%;
  background:var(--jade); box-shadow:0 0 12px rgba(200,207,196,.8);
}
.ng-pin b{
  font-family:var(--font-song); font-weight:400; font-size:14px;
  color:var(--jade); letter-spacing:.1em;
  text-shadow:0 1px 10px rgba(10,16,22,.9);
}
@keyframes pinIn{ from{ opacity:0; transform:translate(-50%,-50%) scale(.6); } }

/* 格子 */
.ng-tray{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:18px; min-height:52px;
}
.ng-chip{
  font:inherit; display:inline-flex; align-items:baseline; gap:7px;
  padding:10px 16px; cursor:grab;
  background:rgba(15,23,32,.82);
  border:1px solid rgba(200,207,196,.22);
  color:var(--ink);
  touch-action:none;
  transition:border-color .25s, background .25s, opacity .25s, transform .18s;
}
.ng-chip:hover{ border-color:rgba(200,207,196,.5); background:rgba(28,40,51,.9); }
.ng-chip .p{ font-family:var(--font-song); font-size:19px; letter-spacing:.12em; }
.ng-chip .s{ font-size:11.5px; color:var(--azure-hi); letter-spacing:.08em; }
.ng-chip.dragging{ opacity:.25; }
.ng-chip.placed{ opacity:.28; border-style:dashed; cursor:default; }
.ng-chip.shake{ animation:chipShake .34s ease; }
@keyframes chipShake{
  0%,100%{ transform:translateX(0); }
  22%{ transform:translateX(-5px); }
  55%{ transform:translateX(4px); }
  78%{ transform:translateX(-2px); }
}

/* 拖动中的幽灵 */
.ng-chip.ghost{
  position:fixed; z-index:90; margin:0; pointer-events:none;
  background:rgba(28,40,51,.96);
  border-color:rgba(200,207,196,.5);
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  opacity:1;
}

.ng-foot{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-top:16px; }
.ng-foot .ng-hint{ margin-right:auto; }
.ng-hint{
  flex:1 1 260px; margin:0;
  font-size:14px; line-height:1.95; color:var(--ink-dim);
  transition:color .35s var(--ease);
}
.ng-hint b{
  display:block; margin-bottom:6px;
  font-family:var(--font-song); font-weight:400;
  font-size:26px; letter-spacing:.22em; line-height:1.3; color:var(--jade);
}
.ng-hint span{ display:block; font-size:13.5px; }

/* 全部完成 */
.ng.done .ng-board{ filter:drop-shadow(0 0 26px rgba(200,207,196,.28)); }
.ng.done .ng-pin i{ background:var(--cinnabar-text); box-shadow:0 0 16px rgba(180,70,47,.9); }

/* ============ 九似（静态：文字全部摊在格子里） ============ */
.nine{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  max-width:980px;
  position:relative;
}
.nine-cell{
  background:rgba(15,23,32,.55);
  padding:18px 18px 20px; text-align:left;
  display:grid; grid-template-columns:1fr auto; align-items:start;
  column-gap:14px; row-gap:10px;
}
.nine-cell .nine-txt{ display:block; min-width:0; }
.nine-cell .ni{
  grid-column:2; grid-row:1; flex:0 0 auto; width:40px; height:40px;
  color:var(--ink-faint); opacity:.62;
}
.nine-cell .ni path, .nine-cell .ni circle{
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.nine-cell .p{
  display:block;
  font-family:var(--font-song); font-size:19px; letter-spacing:.14em; color:var(--ink);
}
.nine-cell .s{
  display:block;
  font-size:12.5px; color:var(--azure-hi); margin-top:5px; letter-spacing:.1em;
}
.nine-cell .d{
  grid-column:1 / -1; grid-row:2;
  font-size:12px; line-height:1.85; color:var(--ink-dim);
}
.nine-note{
  margin-top:22px; max-width:760px;
  font-size:14px; line-height:2; color:var(--ink-dim);
}
.nine-note b{ color:var(--jade); font-weight:400; }

/* ============ 爪数 ============ */
.claw{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  max-width:860px;
}
.claw-cell{ background:var(--bg); padding:24px 18px 22px; }
.claw-cell svg{ width:38px; height:34px; color:var(--azure-hi); opacity:.9; margin-bottom:14px; display:block; }
.claw-cell .e{ font-family:var(--font-song); font-size:15px; letter-spacing:.1em; color:var(--ink); }
.claw-cell .d{ font-size:12px; color:var(--ink-faint); margin-top:7px; line-height:1.8; }

/* ============ 表格 ============ */
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; margin:24px 0 8px; }
.tbl th{
  text-align:left; font-weight:400; font-family:var(--font-song);
  letter-spacing:.12em; color:var(--ink);
  padding:10px 16px 10px 0; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl td{
  padding:12px 16px 12px 0; color:var(--ink-dim);
  border-bottom:1px solid var(--line-soft); vertical-align:top;
}
.tbl td.n{ color:var(--ink); font-family:var(--font-song); letter-spacing:.06em; }
.tbl tr:last-child td{ border-bottom:0; }

/* ============ 时间线（柒章） ============ */
.tl{ list-style:none; margin:26px 0 0; padding:0; max-width:720px; }
.tl li{
  display:grid; grid-template-columns:88px 1fr; gap:26px;
  padding:16px 0; border-top:1px solid var(--line-soft);
}
.tl li:last-child{ border-bottom:1px solid var(--line-soft); }
.tl .y{ font-family:var(--font-song); font-size:14px; color:var(--azure-hi); letter-spacing:.08em; }
.tl .x{ font-size:14px; color:var(--ink-dim); line-height:1.95; }
.tl .x b{ color:var(--ink); font-weight:400; }

/* ============ 尾声 · 拼 ============ */
#coda{
  position:relative; z-index:2;
  min-height:100vh;
  padding:0 0 10vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}

.coda-stage{
  position:relative;
  width:100%; height:54vh; min-height:340px;
  overflow:hidden;
}
.coda-stage canvas{
  display:block; width:100%; height:100%;
}
/* 中心的极淡光晕，让碎片浮在夜里 */
.coda-stage::before{
  content:""; position:absolute; left:50%; top:50%;
  width:min(70vh, 620px); height:min(70vh, 620px);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(78,124,138,.10) 0%, rgba(78,124,138,0) 62%);
  pointer-events:none;
}

.coda-inner{
  position:relative; z-index:1;
  width:min(880px, calc(100% - 96px));
  text-align:center;
  margin-top:0;
}

.coda-inner > *{
  opacity:0; transform:translateY(18px);
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease);
}
#coda.in .coda-inner > *{ opacity:1; transform:none; }
#coda.in .coda-inner > *:nth-child(1){ transition-delay:.10s; }
#coda.in .coda-inner > *:nth-child(2){ transition-delay:.34s; }
#coda.in .coda-inner > *:nth-child(3){ transition-delay:.54s; }
#coda.in .coda-inner > *:nth-child(4){ transition-delay:.78s; }
#coda.in .coda-inner > *:nth-child(5){ transition-delay:.94s; }
#coda.in .coda-inner > *:nth-child(6){ transition-delay:1.08s; }
#coda.in .coda-inner > *:nth-child(7){ transition-delay:1.24s; }
#coda.in .coda-inner > *:nth-child(8){ transition-delay:1.52s; }
#coda.in .coda-inner > *:nth-child(9){ transition-delay:1.72s; }

.coda-kicker{
  font-size:11px; letter-spacing:.52em; color:var(--cinnabar-text);
  margin-bottom:24px;
}

.coda-title{
  font-size:clamp(20px,2.4vw,29px);
  letter-spacing:.2em; color:var(--ink-dim);
  font-weight:400;
}
.coda-big{
  margin-top:16px;
  font-family:var(--font-song);
  font-size:clamp(26px,3.6vw,46px);
  letter-spacing:.1em; line-height:1.6;
  color:var(--ink);
}
.coda-big em{
  font-style:normal; color:var(--jade);
  border-bottom:1px solid rgba(200,207,196,.32);
  padding-bottom:2px;
}

.coda-rule{
  width:56px; height:1px; margin:clamp(34px,5vh,58px) auto;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}

.coda-line{
  font-family:var(--font-song);
  font-size:clamp(14px,1.6vw,18px);
  line-height:2.25; letter-spacing:.09em;
  color:var(--ink-dim);
}
.coda-line em{
  font-style:normal; color:var(--jade);
}
.coda-last{
  margin-top:18px;
  font-size:clamp(17px,2.1vw,24px);
  letter-spacing:.16em; color:var(--ink);
}
.coda-last em{
  font-style:normal; color:var(--cinnabar-text);
  border-bottom:1px solid rgba(180,70,47,.42);
  padding-bottom:2px;
}
@media (prefers-reduced-motion: reduce){
  .coda-inner > *{ opacity:1; transform:none; }
}

.coda-meta{
  margin-top:clamp(38px,6vh,68px);
  display:flex; align-items:center; justify-content:center; gap:20px;
  font-size:11px; letter-spacing:.16em; color:var(--ink-faint);
}
.coda-arrow{ color:var(--cinnabar-text); }

.coda-back{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:clamp(36px,5vh,56px);
  font-size:11px; letter-spacing:.26em; color:var(--ink-faint);
  border:0; border-bottom:0;
  transition:color .35s var(--ease);
}
.coda-back i{
  display:block; width:26px; height:1px;
  background:linear-gradient(90deg, var(--azure), transparent);
  transition:width .35s var(--ease);
}
.coda-back:hover{ color:var(--jade); }
.coda-back:hover i{ width:44px; }

@media (max-width:900px){
  .coda-stage{ height:44vh; min-height:260px; }
  .coda-inner{ width:calc(100% - 56px); }
  .coda-meta{ flex-wrap:wrap; gap:10px 14px; }
}

/* ============ 信息陈列：排版节奏（全部左右分栏） ============ */
/* A（默认）文左图右 · 常规图幅，由 .obj.has-img .wrap 定义 */

/* B：图左文右 · 常规图幅 */
.obj.lay-b.has-img .wrap{
  grid-template-columns:minmax(0,1fr) minmax(0,470px);
}
.obj.lay-b.has-img .shot{ order:-1; }
.obj.lay-b.has-img .read{ order:1; }

/* C：文左图右 · 大图幅（文栏收窄，图放大） */
.obj.lay-c.has-img .wrap{
  grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:48px;
}
.obj.lay-c.has-img .shot img{ max-height:72vh; }

/* D：图左文右 · 大图幅 */
.obj.lay-d.has-img .wrap{
  grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:48px;
}
.obj.lay-d.has-img .shot{ order:-1; }
.obj.lay-d.has-img .read{ order:1; }
.obj.lay-d.has-img .shot img{ max-height:72vh; }

/* 垂直间距节奏 */
.obj.tall{ padding:21vh 0; }
.obj.tight{ padding:10vh 0; }

/* 无图段落的两种文字栏 */
.obj.lay-tc .read{ max-width:600px; margin-inline:auto; }
.obj.lay-tw .read{ max-width:820px; margin-left:13%; }
.obj.lay-tc, .obj.lay-tw{ min-height:auto; padding:12vh 0; }

/* ============ 壹 · 六件物证（地图 + 六边形 + 图文 联动） ============ */
#ch1sites{ position:relative; z-index:2; padding:10vh 0 12vh; }

.sec-lead{
  margin-top:18px; max-width:46em;
  font-size:13.5px; line-height:2; color:var(--ink-dim);
}

.sites{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:center;
  margin-top:5vh;
}
.sites-map{ position:relative; }
.sites-map #chinamap{ max-height:none; }
.sites-hex .hexwrap{ width:100%; max-width:560px; }

#chinamap{ width:100%; height:auto; display:block; overflow:visible; }
.map-outline{
  fill:rgba(78,124,138,.09);
  stroke:rgba(118,166,180,.72);
  stroke-width:1.1;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.site{
  cursor:pointer;
  transform-box:fill-box; transform-origin:center;
  transition:transform .35s var(--ease);
}
.site .halo{ fill:rgba(200,207,196,.10); transition:fill .3s var(--ease); }
.site .dot{ fill:var(--jade); stroke:rgba(15,23,32,.95); stroke-width:1.6; transition:fill .3s var(--ease); }
.site:hover .halo, .site.on .halo{ fill:rgba(180,70,47,.22); }
.site.on{ transform:scale(1.55); }
.site.on .dot{ fill:var(--cinnabar-text); }
.site:focus{ outline:none; }
.site:focus-visible .dot{ stroke:var(--cinnabar-text); stroke-width:2.6; }

.map-note{ margin-top:22px; font-size:11.5px; color:var(--ink-faint); letter-spacing:.06em; line-height:1.9; }

.map-panel{ margin-top:7vh; position:relative; }
.map-card{ display:none; }
.map-card.on{
  display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px); align-items:start;
  animation:cardIn .45s var(--ease);
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.mc-img{ position:relative; }
.mc-img img{
  width:100%; max-height:40vh; object-fit:cover; display:block;
  border:1px solid var(--line);
}
.mc-cap{
  display:block; margin-top:8px; text-align:right;
  font-size:10.5px; letter-spacing:.12em; color:var(--ink-faint);
}
.mc-era{ font-size:11.5px; letter-spacing:.16em; color:var(--ink-faint); }
.mc-name{ font-size:clamp(20px,2.2vw,26px); letter-spacing:.1em; color:var(--ink); margin:6px 0 4px; }
.mc-place{ font-size:12px; letter-spacing:.1em; color:var(--azure-hi); margin-bottom:14px; }
.mc-note{ font-size:13.5px; line-height:1.95; color:var(--ink-dim); max-width:40em; }
.mc-note b{ color:var(--jade); font-weight:400; }

.map-table{ margin-top:44px; }
.map-table summary{
  cursor:pointer; font-size:13px; color:var(--azure-hi); letter-spacing:.08em;
  padding:14px 0; border-top:1px solid var(--line-soft); list-style:none;
}
.map-table summary::-webkit-details-marker{ display:none; }
.map-table summary::before{ content:"＋ "; color:var(--ink-faint); }
.map-table[open] summary::before{ content:"－ "; }

@media (max-width:1024px){
  .sites{ grid-template-columns:1fr; gap:40px; }
  .sites-hex .hexwrap{ max-width:min(100%,440px); }
  .map-card.on{ grid-template-columns:1fr; }
}

/* ============ 字形墙（柒·一 称谓：用不同写法/字体/比例的「龙」做底纹） ============ */
.obj .wrap{ position:relative; }
.wrap > .read{ z-index:1; }

.glyphwall{
  position:absolute; inset:-120px -50px; z-index:0;
  pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.gw{
  position:absolute; display:block; line-height:1;
  color:var(--jade); user-select:none;
  font-family:var(--font-song);
  opacity:0;
  animation:gwFloat var(--dur, 18s) cubic-bezier(.4,0,.3,1) infinite;
  animation-delay:var(--dly, 0s);
  will-change:translate, opacity;
}
/* 向上浮动 + 淡入淡出 */
@keyframes gwFloat{
  0%   { opacity:0;             translate:0 36px; }
  16%  { opacity:var(--op,.05); translate:0 8px; }
  62%  { opacity:var(--op,.05); translate:0 -14px; }
  88%  { opacity:0;             translate:0 -52px; }
  100% { opacity:0;             translate:0 36px; }
}
@media (prefers-reduced-motion: reduce){
  .gw{ animation:none; opacity:var(--op,.05); }
}
/* 靠字号、字体与拉伸制造比例变化 */
.gw1{ --dur:10.5s; --dly:-1.5s; right:2%;  top:-3%;   font-size:320px; --op:.035; font-family:var(--font-kai); transform:scaleY(1.12); }
.gw2{ --dur:13s; --dly:-5.5s; left:-4%;  bottom:-7%;font-size:300px; --op:.048; transform:scaleX(1.55); }
.gw3{ --dur:8.5s; --dly:-3s; left:1%;   top:30%;   font-size:150px; --op:.062; font-family:var(--font-li); transform:rotate(6deg); }
.gw4{ --dur:11.5s; --dly:-7.5s; right:6%;  top:46%;   font-size:110px; --op:.058; font-family:var(--font-hei); transform:scaleX(.85); }
.gw5{ --dur:9.5s; --dly:-1s; right:18%; bottom:1%; font-size:170px; --op:.042; writing-mode:vertical-rl; }
.gw6{ --dur:12.5s; --dly:-4.5s; left:16%;  top:-5%;   font-size:130px; --op:.05;  font-family:var(--font-kai); transform:rotate(-12deg); }
.gw10{ --dur:14.5s; --dly:-10s; left:32%; top:33%;   font-size:360px; --op:.022; font-family:var(--font-li); }
.gw11{ --dur:8s; --dly:-2s; left:-1%;  top:5%;    font-size:120px; --op:.045; writing-mode:vertical-rl; }
.gw12{ --dur:11s; --dly:-6.5s; right:8%; bottom:14%;font-size:90px;  --op:.058; font-family:var(--font-kai); transform:rotate(10deg); }
/* 甲骨、金文、小篆复用页面已定义的字形 */
.gw7{ --dur:12s; --dly:-3.5s; left:3%;  bottom:9%;  width:150px; height:150px; --op:.11; transform:rotate(-8deg); }
.gw8{ --dur:10s; --dly:-8.5s; right:3%; top:7%;     width:120px; height:120px; --op:.10; transform:rotate(7deg); }
.gw9{ --dur:13.5s; --dly:-5s; right:30%; bottom:5%; width:170px; height:170px; --op:.07; }

/* 后加的四枚：日式简写、竖排隶书、超大黑体、斜置楷书 */
.gw13{ --dur:9s; --dly:-4s; right:22%; top:12%;  font-size:96px;  --op:.052; font-family:var(--font-hei); transform:rotate(-6deg); }
.gw14{ --dur:11.5s; --dly:-9s; left:44%; bottom:2%; font-size:120px; --op:.040; font-family:var(--font-li); writing-mode:vertical-rl; }
.gw15{ --dur:15.5s; --dly:-2.5s; left:58%; top:58%;   font-size:280px; --op:.020; font-family:var(--font-hei); transform:scaleX(.86); }
.gw16{ --dur:9.5s; --dly:-6s; right:40%; top:22%;  font-size:88px;  --op:.056; font-family:var(--font-kai); transform:rotate(14deg); }
@media (max-width:720px){
  .glyphwall{ inset:-36px -16px; }
  .gw1,.gw2,.gw10{ font-size:190px; }
  .gw3{ font-size:110px; }
  .gw6{ font-size:100px; }
  .gw7,.gw9{ width:104px; height:104px; }
  .gw8{ width:84px; height:84px; }
}

/* ============ 墨迹光标 ============ */
*{ cursor:none !important; }
body{ user-select:none; -webkit-user-select:none; }
#ink{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:80;
}

/* ============ 柒·三 摆件：抠像的「龙辰辰」+ 投影 ============ */
.obj.has-fig .wrap{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:64px; align-items:center;
}
.obj.has-fig .read{ max-width:640px; margin-left:0; }

.figurine{ position:relative; margin:0; }
.figurine img{
  width:100%; height:auto; display:block;
  transform:rotate(-3.5deg);
  filter:
    drop-shadow(36px 42px 36px rgba(4,7,11,.92))
    drop-shadow(8px 12px 16px rgba(4,7,11,.68));
}
.figurine figcaption{
  margin-top:26px; font-size:11.5px; letter-spacing:.08em;
  color:var(--ink-faint); text-align:center;
  transform:rotate(-3.5deg);
}
@media (max-width:1024px){
  .obj.has-fig .wrap{ grid-template-columns:1fr; gap:36px; }
  .obj.has-fig .read{ max-width:560px; margin-inline:auto; }
  .figurine{ width:min(240px, 62%); margin-inline:auto; }
}

/* ============ 进一步阅读 ============ */
.obj-links{
  margin-top:28px; padding-top:16px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px;
  font-size:12.5px; letter-spacing:.04em;
}
.obj-links .lk-label{
  font-size:11px; letter-spacing:.2em; color:var(--ink-faint);
}
.obj-links a{
  color:var(--azure-hi); text-decoration:none;
  border-bottom:1px solid rgba(110,158,172,.32);
  padding-bottom:1px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.obj-links a::after{ content:" ↗"; font-size:.85em; opacity:.65; }
.obj-links a:hover{ color:var(--jade); border-color:var(--cinnabar); }
.obj-links a:focus-visible{ outline:1px solid var(--cinnabar); outline-offset:3px; }

/* ============ 柒·四 影像：抠像视频直接落在背景上 ============ */
.obj.has-film .wrap{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:64px; align-items:center;
}
.obj.has-film .read{ max-width:600px; }
.film{ margin:0; }
.film video{
  display:block; width:100%; height:auto; max-height:72vh;
  background:transparent; border:0;
  cursor:pointer;
  -webkit-user-select:none; user-select:none;
}
.film video:focus-visible{ outline:1px solid var(--cinnabar); outline-offset:8px; }
.film figcaption{
  margin-top:18px; font-size:11px; letter-spacing:.12em;
  color:var(--ink-faint); text-align:center; line-height:1.8;
}
@media (max-width:1024px){
  .obj.has-film .wrap{ grid-template-columns:1fr; gap:34px; }
  .film{ width:min(420px, 84%); margin-inline:auto; }
}

/* ============ 二—四章：器物图形阵列 ============ */
.gallery{ position:relative; z-index:2; padding:10vh 0; }
.gal-head{ margin-bottom:5vh; }
.gal-box{
  display:grid; grid-template-columns:minmax(0,1fr) 430px;
  gap:64px; align-items:center;
}

/* 舞台三种排布 */
.gal-stage{ position:relative; }
.gal-ring .gal-stage{ width:min(430px,100%); aspect-ratio:1/1; margin-inline:auto; }
.gal-orbit .gal-stage{ width:min(560px,100%); aspect-ratio:1/.8; margin-inline:auto; }
.gal-row .gal-box{ grid-template-columns:1fr; gap:44px; }
.gal-row .gal-stage{
  display:flex; justify-content:center; gap:clamp(40px,9vw,130px);
  padding:26px 0 14px;
}

/* 单个图形 */
.gi{
  position:absolute; left:50%; top:50%;
  width:116px; height:116px; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  background:none; border:0; padding:0; margin:0;
  cursor:pointer; color:rgba(200,207,196,.52);
  transition:color .35s var(--ease);
  will-change:left, top, transform;
}
.gal-row .gi{ position:static; transform:none; }
.gi svg{ width:100%; height:100%; display:block; overflow:visible; }
.gi svg *{
  fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.gi::before{
  content:""; position:absolute; inset:-16px; border-radius:50%;
  border:1px solid transparent;
  transition:border-color .35s var(--ease);
}
.gi:hover, .gi.on{ color:var(--jade); }
.gi:hover::before, .gi.on::before{ border-color:rgba(180,70,47,.5); }
.gi:focus{ outline:none; }
.gi:focus-visible::before{ border-color:var(--cinnabar); }

.gi-label{
  position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  font-size:10.5px; letter-spacing:.18em; white-space:nowrap;
  color:var(--ink-faint);
  transition:color .3s var(--ease);
}
.gi:hover .gi-label, .gi.on .gi-label{ color:var(--cinnabar-text); }

/* 环形底纹 / 轨道线 */
.gal-ring .gal-stage::before{
  content:""; position:absolute; inset:14%;
  border:1px dashed rgba(110,158,172,.16); border-radius:50%;
}
.gal-orbit .gal-stage::before{
  content:""; position:absolute; left:8%; right:8%; top:50%;
  border-top:1px dashed rgba(110,158,172,.12);
}

/* 详情面板 */
.gal-panel{ min-height:430px; display:flex; flex-direction:column; justify-content:center; }
.gp-empty{
  font-size:12px; letter-spacing:.12em; color:var(--ink-faint);
  border-left:1px solid var(--line); padding:6px 0 6px 16px; line-height:1.9;
  max-width:260px;
}
/* 并列模式：图左文右，横向读 */
.gal-row .gal-panel{ min-height:0; display:block; }
.gal-row .gp-card{
  display:grid; grid-template-columns:300px minmax(0,1fr);
  gap:44px; align-items:start;
}
.gal-row .gp-era{ margin-top:0; }
@media (max-width:900px){
  .gal-row .gp-card{ grid-template-columns:1fr; gap:20px; }
  .gal-row .gp-era{ margin-top:16px; }
}
.gp-card{ animation:gpIn .42s var(--ease); }
@keyframes gpIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.gp-img{ margin:0; }
.gp-img img{
  width:100%; max-height:25vh; object-fit:contain; display:block;
  background:rgba(200,207,196,.03);
  border:1px solid var(--line-soft);
  filter:brightness(.94) contrast(1.02);
}
.gal-row .gp-img img{ max-height:30vh; }
.gp-era{ margin-top:18px; font-size:11px; letter-spacing:.16em; color:var(--ink-faint); }
.gp-name{
  font-family:var(--font-song); font-size:21px; letter-spacing:.1em;
  color:var(--ink); margin:8px 0 0;
}
.gp-meta{
  display:flex; flex-wrap:wrap; gap:6px 22px;
  margin:12px 0 16px; padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
  font-size:11.5px; color:var(--ink-dim);
}
.gp-meta i{ font-style:normal; color:var(--ink-faint); margin-right:7px; letter-spacing:.1em; }
.gp-text{ font-size:13.5px; line-height:1.95; color:var(--ink-dim); }
.gp-note{ margin-top:10px; font-size:12.5px; line-height:1.9; color:var(--ink-faint); }
.gp-src{ margin-top:14px; font-size:11px; color:var(--ink-faint); letter-spacing:.04em; }

@media (max-width:1024px){
  .gal-box{ grid-template-columns:1fr; gap:34px; }
  .gal-panel{ min-height:0; }
  .gal-ring .gal-stage{ width:min(360px,100%); }
  .gal-orbit .gal-stage{ width:100%; aspect-ratio:1/.9; }
  .gi{ width:92px; height:92px; }
  .gal-row .gal-stage{ gap:clamp(20px,8vw,60px); }
}

/* ============ 伍章：原理 + 实例 ============ */
.obj.is-wide .read{ max-width:900px; margin-inline:auto; }
.obj.is-wide .nine{ max-width:900px; }
.case{
  margin-top:46px; padding-top:34px;
  border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:44px; align-items:start;
}
.case-fig{ margin:0; }
.case-fig img{
  width:100%; display:block;
  border:1px solid var(--line-soft);
}
.case-fig figcaption{
  margin-top:10px; font-size:11px; letter-spacing:.08em; color:var(--ink-faint);
}
.case-tag{ font-size:10.5px; letter-spacing:.26em; color:var(--cinnabar-text); }
.case-name{
  font-family:var(--font-song); font-size:19px; font-weight:400;
  letter-spacing:.08em; color:var(--ink); margin:9px 0 5px;
}
.case-era{ font-size:11.5px; color:var(--ink-faint); margin-bottom:15px; letter-spacing:.04em; }
.case-txt p{ font-size:13.5px; line-height:1.95; color:var(--ink-dim); }
.case-txt .case-note{ margin-top:10px; font-size:12.5px; color:var(--ink-faint); }
.case-txt .case-note b{ color:var(--jade); font-weight:400; }
.case-txt .obj-src{ margin-top:14px; }

@media (max-width:900px){
  .case{ grid-template-columns:1fr; gap:22px; margin-top:34px; padding-top:26px; }
}

/* ============ 陆·二 非遗名录轮播 ============ */
.ihs{
  position:relative; height:276px;
  margin:22px 0 4px; overflow:hidden;
}
.ihs::before, .ihs::after{
  content:""; position:absolute; left:0; right:0; height:64px; z-index:2;
  pointer-events:none;
}
.ihs::before{ top:0; background:linear-gradient(to bottom, var(--bg) 12%, transparent); }
.ihs::after{ bottom:0; background:linear-gradient(to top, var(--bg) 12%, transparent); }
.ihs-view{ position:absolute; inset:0; }

.ihs-item{
  position:absolute; left:0; right:0; top:50%;
  padding:13px 18px;
  border-left:1px solid transparent;
  transition:transform .85s var(--ease), opacity .62s var(--ease),
             border-color .5s var(--ease), background .5s var(--ease);
  will-change:transform, opacity;
  cursor:pointer;
}
.ihs-item.on{
  border-left-color:var(--cinnabar);
  background:rgba(180,70,47,.055);
}
.ihs-name{
  font-family:var(--font-song); font-size:15px; letter-spacing:.06em; color:var(--ink-dim);
  transition:font-size .5s var(--ease), color .5s var(--ease);
}
.ihs-item.on .ihs-name{ font-size:19px; color:var(--ink); }
.ihs-meta{
  margin-top:7px; display:flex; flex-wrap:wrap; gap:5px 18px;
  font-size:11px; letter-spacing:.06em; color:var(--ink-faint);
}
@media (max-width:900px){
  .ihs{ height:246px; }
  .ihs-name{ font-size:15px; }
}

/* ============ 柒·五 百年时间线 ============ */
.tlsec{ position:relative; z-index:2; padding:10vh 0; }
.tlbox{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:64px; align-items:start; }

.tl{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.tl-i{
  position:relative; padding:15px 0 15px 26px; cursor:pointer;
  transition:background .35s var(--ease);
}
.tl-i::before{
  content:""; position:absolute; left:-4px; top:23px;
  width:7px; height:7px; border-radius:50%; background:var(--line);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.tl-i.on::before{ background:var(--cinnabar); box-shadow:0 0 0 4px rgba(180,70,47,.16); }
.tl-i.on{ background:linear-gradient(90deg, rgba(180,70,47,.06), transparent 72%); }
.tl-y{ display:block; font-size:11px; letter-spacing:.18em; color:var(--ink-faint); transition:color .3s var(--ease); }
.tl-i.on .tl-y{ color:var(--cinnabar-text); }
.tl-x{ display:block; margin-top:7px; font-family:var(--font-song); font-size:16px; letter-spacing:.06em; color:var(--ink-dim); transition:color .3s var(--ease); }
.tl-i.on .tl-x{ color:var(--ink); }
.tl-i:focus{ outline:none; }
.tl-i:focus-visible .tl-x{ outline:1px solid var(--cinnabar); outline-offset:4px; }

.tl-panel{ min-height:470px; }
.tl-card{ display:none; }
.tl-card.on{ display:block; animation:tlIn .42s var(--ease); }
@keyframes tlIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.tl-fig{ margin:0 0 22px; }
.tl-fig img{
  width:100%; max-height:30vh; object-fit:contain; display:block;
  background:rgba(200,207,196,.03); border:1px solid var(--line-soft);
  filter:brightness(.96) contrast(1.02);
}
.tl-fig figcaption{ margin-top:9px; font-size:11px; letter-spacing:.08em; color:var(--ink-faint); }

.tl-year{ font-size:11px; letter-spacing:.2em; color:var(--cinnabar-text); }
.tl-title{ font-family:var(--font-song); font-size:21px; letter-spacing:.08em; color:var(--ink); margin:8px 0 0; font-weight:400; }
.tl-text{ font-size:14px; line-height:2; color:var(--ink-dim); margin-top:10px; }
.tl-text b{ color:var(--jade); font-weight:400; }
.tl-annot{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft); }
.tl-annot p{ font-size:13px; line-height:1.95; color:var(--ink-faint); margin-bottom:10px; }
.tl-annot p.tl-note{ color:var(--ink-dim); }
.tl-annot b{ color:var(--jade); font-weight:400; }
.tl-src{ margin-top:12px; font-size:11px; color:var(--ink-faint); letter-spacing:.04em; }
.tl-foot{ margin-top:36px; font-size:11px; color:var(--ink-faint); letter-spacing:.06em; }

@media (max-width:1024px){
  .tlsec{ padding:7vh 0; }
  .tlbox{ grid-template-columns:1fr; gap:30px; }
  .tl-panel{ min-height:0; }
  .tl-fig img{ max-height:26vh; }
}

/* 轮播的齿轮声开关 */
.ihs-snd{
  display:block; margin:12px 0 0 auto;
  background:none; border:1px solid var(--line); border-radius:2px;
  padding:5px 11px; cursor:pointer;
  font-family:var(--font-hei); font-size:10.5px; letter-spacing:.14em;
  color:var(--ink-faint);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.ihs-snd:hover{ color:var(--ink); border-color:var(--azure); }
.ihs-snd[aria-pressed="true"]{ color:var(--jade); border-color:rgba(200,207,196,.32); }

/* ============ 六种口径 ============ */
#firsts{
  position:relative; z-index:2; padding:12vh 0;
}
/* ---- 「中华第一龙」六边形阵列 ---- */
.hexwrap{
  position:relative; width:min(820px, 100%); aspect-ratio:1/1;
  margin:0 auto;
}
.hexwrap::before{                 /* 虚线环，暗示"围绕中心" */
  content:""; position:absolute; inset:15%;
  border:1px dashed rgba(110,158,172,.16); border-radius:50%;
  pointer-events:none;
}

.hex-center,
.hex{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:block; padding:0; margin:0; border:0; background:none;
  font:inherit; color:inherit;
}
.hex-center{ width:33%; aspect-ratio:1/.94; }
.hex-center .hex-body{ flex-direction:column; padding:0 15%; }
.hex{ width:25.5%; aspect-ratio:1/.94; left:var(--x); top:var(--y); cursor:pointer; }

.hex-shape{
  position:absolute; inset:0;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:rgba(110,158,172,.30);
  transition:background .3s var(--ease);
}
.hex-shape::after{
  content:""; position:absolute; inset:1.5px;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:linear-gradient(180deg, rgba(17,25,34,.96), rgba(13,20,27,.92));
}
.hex-center .hex-shape{ background:rgba(180,70,47,.50); }
.hex-center .hex-shape::after{ background:linear-gradient(180deg, rgba(23,27,33,.97), rgba(15,23,32,.95)); }

.hex-body{
  position:relative; z-index:1; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0 12%; text-align:center;
}

.hex-face,
.hex-info{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; text-align:center;
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.hex-tag{ font-size:9.5px; letter-spacing:.3em; color:var(--ink-faint); }
.hex-label{ font-family:var(--font-song); font-size:16px; letter-spacing:.08em; color:var(--ink); line-height:1.4; }
.hex-info{ opacity:0; transform:translateY(8px); }
.hex-info b{
  font-family:var(--font-song); font-weight:400; font-size:14.5px;
  letter-spacing:.05em; line-height:1.5; color:var(--ink);
}
.hex-info span{ font-size:10.5px; line-height:1.7; letter-spacing:.02em; color:var(--ink-dim); }

.hex:hover, .hex:focus-visible, .hex.on{ z-index:3; }
.hex:hover .hex-shape, .hex:focus-visible .hex-shape, .hex.on .hex-shape{ background:var(--cinnabar); }
.hex:hover .hex-face, .hex:focus-visible .hex-face, .hex.on .hex-face{ opacity:0; transform:translateY(-8px); }
.hex:hover .hex-info, .hex:focus-visible .hex-info, .hex.on .hex-info{ opacity:1; transform:none; }
.hex:focus{ outline:none; }

.hex-kicker{ font-size:9.5px; letter-spacing:.3em; color:var(--cinnabar-text); margin-bottom:12px; }
.hex-title{
  font-family:var(--font-song); font-size:clamp(17px,1.65vw,22px);
  letter-spacing:.08em; line-height:1.55; color:var(--ink);
  margin:0 0 12px; font-weight:400;
}
.hex-sub{ font-size:10.5px; line-height:2; color:var(--ink-faint); margin:0; }

.hex-note{ margin:4vh auto 0; max-width:620px; text-align:center; }

@media (max-width:900px){
  /* 小屏放弃六边形：改成卡片，信息全部常显 */
  .hexwrap{ aspect-ratio:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .hexwrap::before{ display:none; }
  .hex-center, .hex{
    position:relative; left:auto; top:auto; transform:none;
    width:auto; height:auto; aspect-ratio:auto;
  }
  .hex-center{ grid-column:span 2; }
  .hex-shape{ clip-path:none; border-radius:2px; background:rgba(110,158,172,.22); }
  .hex-shape::after{ clip-path:none; border-radius:2px; inset:1px; }
  .hex-center .hex-shape{ background:rgba(180,70,47,.35); }
  .hex-body{ display:block; height:auto; padding:20px 16px; }
  .hex-center .hex-body{ padding:26px 18px; }
  .hex-face, .hex-info{ position:static; opacity:1; transform:none; align-items:flex-start; text-align:left; }
  .hex-face{ flex-direction:row; gap:10px; margin-bottom:10px; align-items:baseline; }
  .hex:hover .hex-face, .hex.on .hex-face{ opacity:1; transform:none; }
  .hex-tag{ font-size:9px; letter-spacing:.24em; }
  .hex-label{ font-size:14px; color:var(--ink); }
  .hex-info b{ font-size:14px; }
  .hex-info span{ font-size:10.5px; }
  .hex-center .hex-body{ text-align:center; }
  .hex-kicker{ margin-bottom:10px; }
}

/* ============ 字形序列 ============ */
#glyphs{ position:relative; z-index:2; padding:10vh 0 8vh; }

/* 上方书写演示台 */
.glyph-stage{
  display:flex; align-items:center; gap:30px;
  margin:0 0 30px; padding:0 2px 24px;
  min-height:150px;
  border-bottom:1px solid var(--line-soft);
}
.gs-frame{
  flex:0 0 auto; width:150px; height:150px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 46%, rgba(200,207,196,.06), transparent 72%);
}
#gsSvg{ width:118px; height:118px; overflow:visible; color:var(--jade); }
.gs-text{ display:flex; flex-direction:column; gap:10px; }
.gs-name{
  font-family:var(--font-song); font-size:21px; letter-spacing:.16em; color:var(--ink);
}
.gs-year{ font-size:11.5px; letter-spacing:.1em; color:var(--ink-faint); }
.gs-sound{
  margin-left:auto; align-self:flex-start;
  background:none; border:1px solid var(--line); border-radius:2px;
  padding:6px 12px; cursor:pointer;
  font-family:var(--font-hei); font-size:11px; letter-spacing:.14em;
  color:var(--ink-faint);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.gs-sound:hover{ color:var(--ink); border-color:var(--azure); }
.gs-sound[aria-pressed="true"]{ color:var(--jade); border-color:rgba(200,207,196,.35); }

.glyph-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line-soft);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.gcell{
  background:var(--bg); padding:34px 14px 26px;
  display:flex; flex-direction:column; align-items:center;
  transition:background .35s var(--ease);
}
.gcell:hover{ background:var(--bg-2); }
.gbox{
  height:104px; display:grid; place-items:center; margin-bottom:18px;
}
.gbox svg{ width:74px; height:74px; display:block; }
.gbox .f{
  font-family:var(--font-song); font-size:66px; line-height:1; color:var(--jade);
}
.gbox .f.li{ font-family:var(--font-li); }
.gbox .f.kai{ font-family:var(--font-kai); }
.gname{
  font-family:var(--font-song); font-size:14px; letter-spacing:.16em;
  color:var(--ink); margin-bottom:6px; text-align:center;
}
.gyear{ font-size:11px; color:var(--ink-faint); letter-spacing:.1em; margin-bottom:12px; text-align:center; }
.gsay{
  font-size:11.5px; line-height:1.85; color:var(--ink-dim); text-align:center;
}

.zi-note{
  margin-top:26px; font-size:11.5px; color:var(--ink-faint); letter-spacing:.06em;
}

/* 说文拆字 */
#split{ position:relative; z-index:2; padding:6vh 0 12vh; }
.split-box{
  border:1px solid var(--line); padding:40px 48px;
  display:grid; grid-template-columns:296px minmax(0,1fr); gap:56px; align-items:center;
  background:rgba(18,28,38,.5);
}

.split-stage{
  position:relative; width:296px; height:296px;
  display:grid; place-items:center;
  cursor:pointer; user-select:none;
  outline:none;
}
.split-stage::before{
  content:""; position:absolute; inset:9%;
  border:1px dashed rgba(110,158,172,.14);
  pointer-events:none;
}
.split-stage:focus-visible::before{ border-color:var(--cinnabar); }

.split-stage .ghost,
.split-stage .piece{
  position:absolute; left:50%; top:50%;
  font-family:var(--font-song); font-size:208px; line-height:1;
  color:var(--jade);
  transform:translate(-50%,-50%);
}
.split-stage .ghost{ opacity:.055; }

.piece{
  opacity:0;
  transition:transform .74s cubic-bezier(.2,.85,.25,1), opacity .3s ease;
  will-change:transform, opacity;
}
.split-stage .p1{
  clip-path:inset(0 50% 45% 0);
  transform:translate(-50%,-50%) translate(0,-100px) rotate(-9deg) scale(1.16);
  transition-delay:.02s;
}
.split-stage .p2{
  clip-path:inset(52% 50% -6% 0);
  transform:translate(-50%,-50%) translate(-30px,108px) rotate(7deg) scale(1.16);
  transition-delay:.18s;
}
.split-stage .p3{
  clip-path:inset(-6% -6% 0 47%);
  transform:translate(-50%,-50%) translate(132px,10px) rotate(9deg) scale(1.16);
  transition-delay:.34s;
}
.split-stage.assembled .piece{ opacity:1; }
.split-stage.assembled .p1,
.split-stage.assembled .p2,
.split-stage.assembled .p3{ transform:translate(-50%,-50%); }

/* 三块的标签，拼合过程中浮现 */
.plabel{
  position:absolute; display:flex; align-items:baseline; gap:7px;
  font-size:11px; letter-spacing:.16em; color:var(--ink-faint);
  opacity:0; transform:translateY(4px);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none; white-space:nowrap;
}
.plabel i{
  font-style:normal; font-size:9px; letter-spacing:.2em; color:var(--cinnabar-text);
}
.l1{ left:-6%; top:5%; }
.l2{ left:-6%; bottom:11%; }
.l3{ right:-9%; top:46%; }
.split-stage.labels .plabel{ opacity:1; transform:none; }

.split-hint{
  margin-top:16px; font-size:11px; letter-spacing:.12em;
  color:var(--ink-faint); opacity:.75;
}

.split-txt h3{
  font-size:16px; letter-spacing:.16em; color:var(--ink); margin-bottom:14px;
}
.split-txt p{ font-size:14.5px; color:var(--ink-dim); line-height:2.05; }
.split-txt .k{ color:var(--jade); }
.split-parts{
  margin-top:18px; display:flex; gap:26px; flex-wrap:wrap;
  font-size:12px; color:var(--ink-faint); letter-spacing:.1em;
}
.split-parts b{ color:var(--azure-hi); font-weight:400; }

@media (max-width:900px){
  #split{ padding:4vh 0 9vh; }
  .split-box{
    grid-template-columns:1fr; gap:26px; padding:26px 22px;
    justify-items:center; text-align:left;
  }
  .split-stage{ width:230px; height:230px; }
  .split-stage .ghost, .split-stage .piece{ font-size:162px; }
  .l1{ left:-12%; } .l2{ left:-12%; } .l3{ right:-14%; }
  .split-txt{ width:100%; }
  .split-parts{ gap:14px 20px; }
}

/* ============ 文献引文 ============ */
.quote{
  position:relative; z-index:2;
  padding:10vh 0; max-width:700px;
}
.quote blockquote{
  font-family:var(--font-song); font-size:clamp(19px,2vw,24px);
  line-height:2.1; color:var(--ink); letter-spacing:.06em;
  padding-left:28px; border-left:1px solid var(--azure);
}
.quote cite{
  display:block; margin-top:18px; padding-left:28px;
  font-style:normal; font-size:12px; color:var(--ink-faint); letter-spacing:.12em;
}
.quote p{ margin-top:22px; font-size:14.5px; color:var(--ink-dim); }

/* ============ 页脚 ============ */
#foot{
  position:relative; z-index:2;
  padding:12vh 0 8vh; border-top:1px solid var(--line-soft);
  background:linear-gradient(to bottom, rgba(15,23,32,0), rgba(15,23,32,.92) 30%);
}
.foot-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.foot-h{
  font-family:var(--font-song); font-size:15px; letter-spacing:.2em;
  color:var(--ink); margin-bottom:18px;
}
.foot-p{ font-size:12.5px; color:var(--ink-dim); line-height:2; }
.foot-li{ list-style:none; display:flex; flex-direction:column; gap:8px; font-size:12.5px; }
.foot-li a{
  color:var(--ink-dim); border-bottom:1px solid transparent;
  text-decoration:none; transition:color .25s;
}
.foot-li a:hover{ color:var(--azure-hi); border-bottom-color:rgba(111,160,173,.4); }
.foot-note{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line-soft);
  font-size:11px; color:var(--ink-faint); letter-spacing:.1em;
}
.foot-note code{ font-family:var(--font-hei); color:var(--ink-dim); }

/* ============ 响应式 ============ */
@media (max-width:1024px){
  .wrap{ width:calc(100% - 56px); }
  .star-box{ grid-template-columns:1fr; gap:34px; }
  #starcanvas{ height:330px; }
  .ff{ grid-template-columns:120px 1fr; }
  .ff-basis{ grid-column:1 / -1; text-align:left; margin-top:6px; }
  .glyph-grid{ grid-template-columns:repeat(3,1fr); }
  .split-box{ grid-template-columns:1fr; gap:26px; padding:34px 28px; }
  .split-glyph{ text-align:left; }
  .foot-grid{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:720px){
  body{ font-size:15px; }
  .wrap{ width:calc(100% - 40px); }

  /* 窄屏不保留右侧栏：单页纵向阅读，导航让位于内容 */
  #rail{ display:none; }

  .hero-glyph{ width:176px; height:176px; margin-bottom:3vh; }
  .hero-glyph .txt{ font-size:136px; }
  .hero-title{ font-size:22px; letter-spacing:.14em; line-height:1.7; }
  .hero-line{ font-size:14px; max-width:20em; }
  .hero-meta{ font-size:10px; letter-spacing:.3em; }

  .read::before{ inset:-30px -20px -30px -20px; }
  .ans{ grid-template-columns:1fr; gap:8px; padding:26px 0; }
  .ans-mark{ font-size:19px; }
  .ch-head{ min-height:86vh; padding:12vh 0 10vh; }
  .ch-yao{ font-size:clamp(38px,10vw,56px); letter-spacing:.18em; margin-left:-.18em; }
  .ch-num{ font-size:clamp(64px,16vw,96px); margin-bottom:4vh; }
  .ch-head::before{ font-size:clamp(220px,60vw,360px); }
  .obj{ min-height:0; padding:11vh 0; }
  .glyph-grid{ grid-template-columns:repeat(2,1fr); }
  .quote blockquote{ padding-left:18px; }
}

@media (max-width:1280px){
  /* 窄一些的屏幕上字形会压到内容，收回成纯数字导航 */
  .rail-item .rg{ display:none; }
  #rail{ right:14px; padding-right:4px; }
}

@media (max-width:1024px){
  .map-box{ grid-template-columns:1fr; gap:34px; }
  .map-panel{ min-height:0; }
  .mc-img img{ max-height:30vh; }
  .obj.has-img .wrap{ display:block; width:calc(100% - 56px); }
  .obj.has-img .read{ max-width:520px; }
  .shot{ margin-top:34px; }
  /* 排版变体在窄屏统一回落为单列 */
  .obj.lay-b.has-img .shot,
  .obj.lay-d.has-img .shot{ order:0; }
  .obj.lay-tw .read{ margin-left:0; }
  .obj.lay-tc .read{ margin-inline:0; }
  .obj.lay-tc .read{ margin-inline:0; }
}

/* 减少动态 */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ============ 新组件的响应式 ============ */
@media (max-width:1024px){
  .claw{ grid-template-columns:repeat(2,1fr); }
  .coda-box{ grid-template-columns:1fr; gap:22px; text-align:center; }
  .coda-mid{ display:none; }
  .nine{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:720px){
  .nine{ grid-template-columns:repeat(2,1fr); }
  .nine{ grid-template-columns:1fr; }
  .nine-cell{ padding:14px 12px; }
  .nine-cell .p{ font-size:17px; }
  .claw{ grid-template-columns:1fr; }
  .claw-cell{ display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:center; padding:16px 14px; }
  .claw-cell svg{ margin-bottom:0; }
  .tbl{ font-size:12.5px; }
  .tbl th, .tbl td{ padding-right:10px; }
  .tl li{ grid-template-columns:1fr; gap:4px; }
  .coda-box{ gap:16px; }
}

/* ============ 柒·三 龙辰辰：漂浮动图 + 同步地面阴影 ============ */
.chen-stage{ position:relative; display:block; }
.chen-stage img{
  position:relative; z-index:2; display:block; width:100%; height:auto;
  transform:rotate(-3deg);
  filter:drop-shadow(0 10px 16px rgba(5,9,14,.45));
}
/* 地面微光：背景太黑，影子需要一层浅底才看得见 */
.chen-ground{
  position:absolute; left:50%; bottom:-3%; transform:translateX(-50%);
  width:104%; height:70px; z-index:0; border-radius:50%; bottom:-6%;
  background:radial-gradient(ellipse at center, rgba(110,158,172,.30) 0%, rgba(110,158,172,.10) 56%, rgba(110,158,172,0) 80%);
  filter:blur(18px);
  pointer-events:none;
}
.chen-shadow{
  position:absolute; left:0; right:0; margin-inline:auto;
  bottom:-2.5%; width:64%; height:20px; z-index:1;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center, rgba(2,4,7,.98) 0%, rgba(2,4,7,.62) 46%, rgba(2,4,7,0) 74%),
    radial-gradient(ellipse at center, rgba(110,158,172,.14) 0%, rgba(110,158,172,0) 74%);
  filter:blur(9px);
  transform-origin:50% 50%;
  will-change:transform, opacity;
  pointer-events:none;
  animation:chenFloatShadow 4000ms linear infinite;
}
/* 关键帧由动图逐帧重心算出：4000ms 一轮，影子随起伏缩放并改浓淡 */
@keyframes chenFloatShadow {
  0.0% { transform: scale(1.000, 0.920); opacity: 0.380; }
  3.12% { transform: scale(0.985, 0.906); opacity: 0.398; }
  6.25% { transform: scale(0.970, 0.892); opacity: 0.416; }
  9.38% { transform: scale(0.955, 0.879); opacity: 0.434; }
  12.5% { transform: scale(0.940, 0.865); opacity: 0.452; }
  15.62% { transform: scale(0.930, 0.856); opacity: 0.464; }
  18.75% { transform: scale(0.920, 0.846); opacity: 0.476; }
  21.88% { transform: scale(0.910, 0.837); opacity: 0.488; }
  25.0% { transform: scale(0.900, 0.828); opacity: 0.500; }
  28.12% { transform: scale(0.910, 0.837); opacity: 0.488; }
  31.25% { transform: scale(0.920, 0.846); opacity: 0.476; }
  34.38% { transform: scale(0.930, 0.856); opacity: 0.464; }
  37.5% { transform: scale(0.940, 0.865); opacity: 0.452; }
  40.62% { transform: scale(0.955, 0.879); opacity: 0.434; }
  43.75% { transform: scale(0.970, 0.892); opacity: 0.416; }
  46.88% { transform: scale(0.985, 0.906); opacity: 0.398; }
  50.0% { transform: scale(1.000, 0.920); opacity: 0.380; }
  53.12% { transform: scale(1.015, 0.934); opacity: 0.362; }
  56.25% { transform: scale(1.030, 0.948); opacity: 0.344; }
  59.38% { transform: scale(1.045, 0.961); opacity: 0.326; }
  62.5% { transform: scale(1.060, 0.975); opacity: 0.308; }
  65.62% { transform: scale(1.070, 0.984); opacity: 0.296; }
  68.75% { transform: scale(1.080, 0.994); opacity: 0.284; }
  71.88% { transform: scale(1.090, 1.003); opacity: 0.272; }
  75.0% { transform: scale(1.100, 1.012); opacity: 0.260; }
  78.12% { transform: scale(1.090, 1.003); opacity: 0.272; }
  81.25% { transform: scale(1.080, 0.994); opacity: 0.284; }
  84.38% { transform: scale(1.070, 0.984); opacity: 0.296; }
  87.5% { transform: scale(1.060, 0.975); opacity: 0.308; }
  90.62% { transform: scale(1.045, 0.961); opacity: 0.326; }
  93.75% { transform: scale(1.030, 0.948); opacity: 0.344; }
  96.88% { transform: scale(1.015, 0.934); opacity: 0.362; }
  100.0% { transform: scale(1.000, 0.920); opacity: 0.380; }
}

@media (prefers-reduced-motion: reduce){
  .chen-shadow{ animation:none; opacity:.36; transform:translate(-50%,0) scale(1,1); }
}