/* ============================================================
   中华上下五千年 · 共享样式
   气质：纸白编辑部长卷 · 宋体衬线 · 朱砂/黛青/赭金
   ============================================================ */
:root{
  --paper:#faf8f4; --paper2:#fdfcfa; --paper3:#f2ede4;
  --ink:#191817; --ink2:#4a4644; --ink3:#8b8480;
  --line:#e3ddd4; --line2:#d4cbbd;
  --he:#b03a2e;          /* 合 · 大一统 */
  --he-soft:#f6e8e5;
  --fen:#3f6b8f;         /* 分 · 分裂 */
  --fen-soft:#e7eef4;
  --gold:#9a7b3c;        /* 帝王 · 关键 */
  --gold-soft:#f5efe2;
  --seal:#c0392b;
  --shadow:0 2px 14px rgba(25,24,23,.07);
  --shadow2:0 8px 28px rgba(25,24,23,.10);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong",
          "SimSun",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

/* ---------- 顶栏进度 ---------- */
#progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--he),var(--gold));
  z-index:999; transition:width .12s linear;
}

/* ---------- 布局 ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:0 32px 100px}
.wrap-narrow{max-width:900px}
section{padding-top:62px}

/* ---------- 文字 ---------- */
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink3); margin:0 0 18px;
}
h1{font-size:clamp(30px,4.6vw,52px); line-height:1.16; margin:0 0 20px;
   font-weight:700; letter-spacing:-.01em}
h2{font-size:23px; margin:0 0 8px; font-weight:700; letter-spacing:-.01em}
h3{font-size:18px; margin:0 0 10px; font-weight:700}
.lede{font-size:17px; line-height:1.9; color:var(--ink2); max-width:68ch; margin:0}
.lede b{color:var(--ink)}
.sub{color:var(--ink3); font-size:12.5px; margin:0 0 26px; font-family:var(--mono); letter-spacing:.04em}
.note{font-size:14.5px; line-height:1.95; color:var(--ink2); max-width:74ch}
.note b{color:var(--ink)}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums; font-family:var(--mono)}

/* ---------- Hero ---------- */
header.hero{padding:76px 0 42px; border-bottom:2px solid var(--ink); position:relative; overflow:hidden}
.hero-deco{
  position:absolute; right:-40px; top:-30px; width:420px; height:420px;
  opacity:.07; pointer-events:none;
}
.statbar{display:flex; flex-wrap:wrap; margin-top:42px; border:1px solid var(--line); background:#fff}
.statbar .cell{flex:1 1 150px; padding:18px 22px; border-right:1px solid var(--line)}
.statbar .cell:last-child{border-right:0}
.statbar .v{font-size:28px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; font-family:var(--mono)}
.statbar .v small{font-size:13px; font-weight:400; color:var(--ink3); margin-left:4px}
.statbar .l{font-size:11.5px; color:var(--ink3); margin-top:8px; letter-spacing:.06em}

/* ---------- 卡片通用 ---------- */
.card{
  background:#fff; border:1px solid var(--line);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow2); border-color:var(--line2)}

/* ---------- 脉络图 ---------- */
.hefen-panel{
  background:#fff; border:1px solid var(--line); padding:26px 22px 18px;
  position:relative; overflow:hidden;
}
.hefen-toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:18px}
.hefen-toolbar .title{font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink3); margin-right:auto}
.chip{
  font-family:var(--mono); font-size:11.5px; padding:5px 13px;
  border:1px solid var(--line); background:var(--paper2); color:var(--ink2);
  cursor:pointer; transition:.15s; letter-spacing:.06em;
}
.chip:hover{border-color:var(--ink3); color:var(--ink)}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.chip.on.he{background:var(--he); border-color:var(--he)}
.chip.on.fen{background:var(--fen); border-color:var(--fen)}
.hefen-svg-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.hefen-svg-wrap svg{display:block; min-width:980px; width:100%; height:auto}
.hefen-legend{display:flex; gap:20px; flex-wrap:wrap; padding:14px 4px 4px;
  font-family:var(--mono); font-size:11px; color:var(--ink2)}
.hefen-legend em{font-style:normal; display:inline-block; width:12px; height:12px;
  margin-right:6px; vertical-align:-1px}
.hefen-verdict{
  margin-top:16px; padding:14px 18px; background:var(--paper2);
  border-left:3px solid var(--gold); font-size:13.5px; line-height:1.9; color:var(--ink2);
  min-height:52px;
}
.hefen-verdict b{color:var(--ink)}

/* 脉络图动画 —— 渐进增强：默认可见，仅在 .anim-ready 时才做入场 */
.band-fade{opacity:1}
.wave-draw{stroke-dasharray:none; stroke-dashoffset:0}
.anim-ready .wave-draw{
  stroke-dasharray:2600; stroke-dashoffset:2600;
  transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1);
}
.anim-ready .hefen-panel.in .wave-draw{stroke-dashoffset:0}
.anim-ready .band-fade{opacity:0; transition:opacity .7s ease}
.anim-ready .hefen-panel.in .band-fade{opacity:1}
.hefen-panel.in .band-fade:nth-child(2){transition-delay:.15s}
.hefen-panel.in .band-fade:nth-child(3){transition-delay:.3s}
.hefen-panel.in .band-fade:nth-child(4){transition-delay:.45s}
.hefen-panel.in .band-fade:nth-child(5){transition-delay:.6s}
.hefen-panel.in .band-fade:nth-child(6){transition-delay:.75s}
.hefen-panel.in .band-fade:nth-child(7){transition-delay:.9s}
.hefen-panel.in .band-fade:nth-child(8){transition-delay:1.05s}
.hefen-panel.in .band-fade:nth-child(9){transition-delay:1.2s}
.hefen-panel.in .band-fade:nth-child(10){transition-delay:1.35s}
.hefen-panel.in .band-fade:nth-child(11){transition-delay:1.5s}
.hefen-panel.in .band-fade:nth-child(12){transition-delay:1.65s}
.hefen-panel.in .band-fade:nth-child(13){transition-delay:1.8s}
.hefen-panel.in .band-fade:nth-child(14){transition-delay:1.95s}
.hefen-panel.in .band-fade:nth-child(15){transition-delay:2.1s}
.hefen-panel.in .band-fade:nth-child(n+16){transition-delay:2.2s}
.hefen-svg-wrap svg .era-g{cursor:pointer}
.hefen-svg-wrap svg .era-g:hover .era-hit{fill:rgba(154,123,60,.10)}
.hefen-svg-wrap svg .era-g.dim{opacity:.22}
.hefen-svg-wrap svg .era-g.focus .era-hit{fill:rgba(154,123,60,.14)}

/* ---------- 总览表 ---------- */
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.slim{width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--line); font-size:13.5px}
table.slim th{
  text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink3); font-weight:400;
  padding:11px 13px; border-bottom:1px solid var(--line); background:var(--paper2); white-space:nowrap;
}
table.slim td{padding:11px 13px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.7}
table.slim tr:last-child td{border-bottom:0}
table.slim tr{cursor:pointer; transition:background .15s}
table.slim tbody tr:hover{background:var(--gold-soft)}
table.slim td.n{color:var(--ink); font-weight:700; white-space:nowrap}
table.slim td.c{font-family:var(--mono); font-size:11px; color:var(--ink3); white-space:nowrap}
table.slim td.tag-cell{white-space:nowrap}

/* ---------- 状态标签（合/分） ---------- */
.tag{
  display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  padding:2px 8px; vertical-align:1px; font-style:normal; font-weight:400;
}
.tag.he{color:#fff; background:var(--he)}
.tag.fen{color:#fff; background:var(--fen)}
.tag.both{color:var(--gold); border:1px solid var(--gold); background:var(--gold-soft)}

/* ---------- 朝代入口卡 ---------- */
.dyn-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:14px}
.dyn-card{
  background:#fff; border:1px solid var(--line); padding:20px 20px 18px;
  position:relative; overflow:hidden; display:block;
}
.dyn-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--he); transform:scaleY(0); transform-origin:top;
  transition:transform .28s ease;
}
.dyn-card.fen::before{background:var(--fen)}
.dyn-card.both::before{background:linear-gradient(180deg,var(--he) 50%,var(--fen) 50%)}
.dyn-card:hover::before{transform:scaleY(1)}
.dyn-card:hover{transform:translateY(-3px); box-shadow:var(--shadow2)}
.dyn-card .idx{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink3)}
.dyn-card .nm{font-size:21px; font-weight:700; margin:8px 0 4px; letter-spacing:.02em}
.dyn-card .yr{font-family:var(--mono); font-size:11px; color:var(--ink3); letter-spacing:.03em}
.dyn-card .desc{font-size:12.5px; color:var(--ink2); line-height:1.75; margin-top:10px}
.dyn-card .foot{display:flex; align-items:center; margin-top:14px; gap:8px}
.dyn-card .cnt{font-family:var(--mono); font-size:10.5px; color:var(--ink3); margin-left:auto}

/* ---------- 朝代页横幅 ---------- */
.dyn-banner{
  padding:64px 0 34px; border-bottom:2px solid var(--ink);
  position:relative; overflow:hidden;
}
.dyn-banner .num{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--ink3);
  margin-bottom:16px;
}
.dyn-banner h1{margin-bottom:12px}
.dyn-banner .meta{
  display:flex; flex-wrap:wrap; gap:0; margin-top:28px;
  border:1px solid var(--line); background:#fff;
}
.dyn-banner .meta div{flex:1 1 130px; padding:15px 18px; border-right:1px solid var(--line)}
.dyn-banner .meta div:last-child{border-right:0}
.dyn-banner .meta .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3); margin-bottom:6px}
.dyn-banner .meta .v{font-size:15px; font-weight:700; line-height:1.35}
.dyn-banner .deco{
  position:absolute; right:10px; top:20px; width:200px; height:200px;
  opacity:.08; pointer-events:none;
}

/* 面包屑 */
.crumb{
  padding:18px 0 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; color:var(--ink3);
}
.crumb a:hover{color:var(--ink); text-decoration:underline}
.crumb span{margin:0 8px; opacity:.5}

/* ---------- 君王卡 ---------- */
.monarch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px}
.m-card{
  background:#fff; border:1px solid var(--line); position:relative; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.m-card:hover{transform:translateY(-3px); box-shadow:var(--shadow2); border-color:var(--gold)}
.m-card.star{border-color:var(--line2); box-shadow:inset 4px 0 0 var(--gold)}
.m-card .top{display:flex; gap:16px; padding:20px 22px 14px}
.m-card .portrait{
  flex:0 0 84px; width:84px; height:104px; position:relative;
  background:var(--paper3); border:1px solid var(--line2); overflow:hidden;
}
.m-card .portrait img{width:100%; height:100%; object-fit:cover}
.m-card .portrait .fallback{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  background:linear-gradient(160deg,var(--paper3),#e8e0d2);
}
.m-card .portrait .fallback .ch{
  font-size:30px; font-weight:700; color:var(--ink2); line-height:1;
}
.m-card .portrait .fallback .seal{
  font-family:var(--mono); font-size:8px; letter-spacing:.18em;
  color:var(--seal); border:1px solid var(--seal); padding:1px 5px;
}
.m-card .who{flex:1; min-width:0}
.m-card .role{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--gold);
  margin-bottom:6px; text-transform:uppercase;
}
.m-card .nm{font-size:19px; font-weight:700; line-height:1.3; margin:0 0 4px}
.m-card .temple{font-size:12px; color:var(--ink3); margin:0 0 8px}
.m-card .reign{
  font-family:var(--mono); font-size:11px; color:var(--ink2);
  background:var(--paper2); border:1px solid var(--line); display:inline-block;
  padding:2px 8px;
}
.m-card .one{
  padding:0 22px 12px; font-size:13px; line-height:1.85; color:var(--ink2);
}
.m-card .one b{color:var(--ink)}
.m-card ul.ev{margin:0; padding:0 22px 18px; list-style:none}
.m-card ul.ev li{
  position:relative; padding:7px 0 7px 16px; font-size:12.5px;
  line-height:1.8; color:var(--ink2); border-top:1px dashed var(--line);
}
.m-card ul.ev li::before{
  content:""; position:absolute; left:0; top:14px; width:6px; height:6px;
  background:var(--he); border-radius:50%;
}
.m-card.fen ul.ev li::before{background:var(--fen)}
.m-card .foot{
  display:flex; align-items:center; gap:8px; padding:11px 22px;
  background:var(--paper2); border-top:1px solid var(--line);
}
.m-card .foot .hint{font-family:var(--mono); font-size:10px; color:var(--ink3); margin-left:auto}

/* 紧凑世系行（在位级） */
.lineage{background:#fff; border:1px solid var(--line)}
.lineage-head{
  display:flex; align-items:center; gap:12px; padding:15px 20px;
  cursor:pointer; user-select:none; transition:background .15s;
}
.lineage-head:hover{background:var(--paper2)}
.lineage-head .t{font-size:15px; font-weight:700}
.lineage-head .n{font-family:var(--mono); font-size:11px; color:var(--ink3)}
.lineage-head .chev{
  margin-left:auto; width:18px; height:18px; position:relative; transition:transform .25s ease;
}
.lineage-head .chev::before,.lineage-head .chev::after{
  content:""; position:absolute; background:var(--ink3); transition:.25s;
}
.lineage-head .chev::before{left:2px; top:8px; width:14px; height:2px}
.lineage-head .chev::after{left:8px; top:2px; width:2px; height:14px}
.lineage.open .chev{transform:rotate(90deg)}
.lineage.open .chev::after{opacity:0}
.lineage-body{
  max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1);
}
.lineage.open .lineage-body{max-height:4000px}
.lineage-body table{width:100%; border-collapse:collapse; font-size:13px}
.lineage-body th{
  text-align:left; font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink3); font-weight:400;
  padding:10px 16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--paper2);
}
.lineage-body td{padding:10px 16px; border-bottom:1px solid var(--line); line-height:1.75; color:var(--ink2)}
.lineage-body tr:last-child td{border-bottom:0}
.lineage-body tr:hover{background:var(--gold-soft)}

/* ---- 世系行展开事件 ---- */
.lin-hint{font-size:12px; color:var(--ink3); padding:10px 16px 4px; margin:0; background:var(--paper2); border-radius:6px; margin-bottom:8px}
.lin-row{cursor:pointer; transition:background .15s}
.lin-row.no-ev{cursor:default}
.lin-row.no-ev:hover{background:var(--gold-soft)}
.lin-row:not(.no-ev):hover{background:#f0e6cc}
.lin-row:not(.no-ev) .nm::after{content:" ▾"; color:var(--gold); font-size:11px; opacity:.7}
.lin-row.open .nm::after{content:" ▴"}
.lin-ev{display:none; background:#faf6ee}
.lin-ev.open{display:table-row}
.lin-ev-wrap{padding:8px 20px 12px}
.lin-ev-list{margin:0; padding:0 0 0 20px; list-style:none}
.lin-ev-list li{position:relative; padding:5px 0 5px 18px; font-size:13px; line-height:1.8; color:var(--ink2); border-left:2px solid var(--gold); margin:4px 0}
.lin-ev-list li::before{content:"·"; position:absolute; left:-7px; top:5px; color:var(--gold); font-size:18px; line-height:1}
.lin-ev-list li:nth-child(odd){border-left-color:var(--he)}
.lin-ev-list li:nth-child(even){border-left-color:var(--fen)}
.lineage-body td.nm{color:var(--ink); font-weight:700; white-space:nowrap}
.lineage-body td.c{font-family:var(--mono); font-size:11px; color:var(--ink3); white-space:nowrap}

/* ---------- 大事记 ---------- */
.timeline{position:relative; padding-left:28px}
.timeline::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--he),var(--gold),var(--fen));
}
.t-item{position:relative; padding:0 0 26px}
.t-item::before{
  content:""; position:absolute; left:-25px; top:6px; width:11px; height:11px;
  background:#fff; border:2.5px solid var(--he); border-radius:50%; z-index:1;
}
.t-item.fen::before{border-color:var(--fen)}
.t-item.gold::before{border-color:var(--gold); background:var(--gold)}
.t-item .yr{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--he);
  margin-bottom:5px;
}
.t-item.fen .yr{color:var(--fen)}
.t-item.gold .yr{color:var(--gold)}
.t-item h4{margin:0 0 6px; font-size:15.5px; font-weight:700}
.t-item p{margin:0; font-size:13px; line-height:1.9; color:var(--ink2); max-width:70ch}
.t-item .img-strip{
  margin-top:12px; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px;
}
.t-item .img-strip figure{margin:0; border:1px solid var(--line); background:#fff; overflow:hidden}
.t-item .img-strip img{width:100%; height:118px; object-fit:cover}
.t-item .img-strip figcaption{
  padding:7px 10px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.08em; color:var(--ink3); line-height:1.6;
}
/* 大事记单图 */
.ev-fig{margin:12px 0 0; max-width:420px; border:1px solid var(--line); background:#fff; overflow:hidden}
.ev-fig img{width:100%; height:200px; object-fit:cover; display:block}
.ev-fig figcaption{padding:7px 10px; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--ink3)}

/* ---------- 图片块 ---------- */
.fig-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin:22px 0}
.fig{border:1px solid var(--line); background:#fff; overflow:hidden}
.fig img{width:100%; height:170px; object-fit:cover}
.fig .cap{padding:11px 14px; font-family:var(--mono); font-size:10px;
  letter-spacing:.08em; color:var(--ink3); line-height:1.7}
.fig .cap b{color:var(--ink2); font-weight:400}
.img-fallback{
  width:100%; height:170px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--paper3),#e5dcc9); color:var(--ink3);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
}

/* ---------- 引文 / 判词 ---------- */
.quote{
  border-left:3px solid var(--he); background:#fff; padding:18px 22px; margin:22px 0;
  font-size:14px; line-height:2; color:var(--ink2);
}
.quote b{color:var(--ink)}
.quote.fen{border-left-color:var(--fen)}
.quote.gold{border-left-color:var(--gold)}
.quote .src{
  display:block; margin-top:10px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; color:var(--ink3);
}

/* ---------- 三循环总结 ---------- */
.cycle-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.cycle{
  background:#fff; border:1px solid var(--line); padding:24px; position:relative; overflow:hidden;
}
.cycle .no{
  font-family:var(--mono); font-size:34px; font-weight:700; color:var(--line2);
  line-height:1; margin-bottom:12px;
}
.cycle h4{margin:0 0 10px; font-size:16px; font-weight:700}
.cycle p{margin:0; font-size:13px; line-height:1.95; color:var(--ink2)}
.cycle .flow{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
}
.cycle .flow span{padding:3px 8px; border:1px solid var(--line); color:var(--ink2)}
.cycle .flow span.he{background:var(--he-soft); border-color:var(--he); color:var(--he)}
.cycle .flow span.fen{background:var(--fen-soft); border-color:var(--fen); color:var(--fen)}
.cycle .flow i{font-style:normal; color:var(--ink3)}

/* ---------- 页脚 / 邻卷导航 ---------- */
.pager{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:70px;
}
.pager a{
  background:#fff; border:1px solid var(--line); padding:20px 22px;
  transition:.2s; display:block;
}
.pager a:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow)}
.pager .k{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink3); margin-bottom:8px}
.pager .t{font-size:17px; font-weight:700}
.pager .r{text-align:right}

footer.site{
  margin-top:80px; padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; line-height:2.1; color:var(--ink3);
}
footer.site a:hover{color:var(--ink)}

/* ---------- 浮动朝代导航 ---------- */
#float-nav{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:80; display:flex; flex-direction:column; gap:3px;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
#float-nav.show{opacity:1; pointer-events:auto}
#float-nav a{
  display:flex; align-items:center; gap:8px; justify-content:flex-end;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--ink3);
  padding:3px 0; transition:.18s;
}
#float-nav a .dot{width:7px; height:7px; border-radius:50%; background:var(--line2); transition:.18s}
#float-nav a .lbl{opacity:0; transform:translateX(6px); transition:.18s; white-space:nowrap;
  background:#fff; border:1px solid var(--line); padding:2px 8px}
#float-nav:hover a .lbl{opacity:1; transform:translateX(0)}
#float-nav a.active{color:var(--ink)}
#float-nav a.active .dot{background:var(--he); transform:scale(1.35)}
#float-nav a.active .lbl{opacity:1; transform:translateX(0); border-color:var(--gold); color:var(--ink)}

/* ---------- 进场动画 —— 渐进增强：默认可见，.anim-ready 才做入场 ---------- */
.reveal{opacity:1; transform:none}
.reveal-bar::before{transform:scaleY(1)}
.anim-ready .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.anim-ready .reveal.in{opacity:1; transform:translateY(0)}
.reveal-bar{position:relative; padding-left:20px}
.reveal-bar::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px;
  background:var(--he); transform-origin:top;
  transition:transform .6s cubic-bezier(.4,0,.2,1) .15s;
}
.reveal-bar.fen::before{background:var(--fen)}
.reveal-bar.gold::before{background:var(--gold)}
.anim-ready .reveal-bar::before{transform:scaleY(0)}
.anim-ready .reveal-bar.in::before{transform:scaleY(1)}
.anim-ready .reveal-d1{transition-delay:.1s}
.anim-ready .reveal-d2{transition-delay:.2s}
.anim-ready .reveal-d3{transition-delay:.3s}
.anim-ready .reveal-d4{transition-delay:.4s}

/* ---------- 印章装饰 ---------- */
.seal-block{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border:2px solid var(--seal); color:var(--seal);
  font-size:13px; font-weight:700; letter-spacing:.14em; line-height:1.15;
  writing-mode:vertical-rl; padding:6px; opacity:.85;
}

/* ---------- 滚动提示 ---------- */
.scroll-hint{
  display:flex; align-items:center; gap:10px; margin-top:34px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--ink3);
}
.scroll-hint .arrow{
  width:1px; height:28px; background:var(--ink3); position:relative; animation:drop 1.8s ease infinite;
}
.scroll-hint .arrow::after{
  content:""; position:absolute; bottom:0; left:-3px;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent;
  border-top:5px solid var(--ink3);
}
@keyframes drop{0%,100%{opacity:.35; transform:translateY(0)}50%{opacity:1; transform:translateY(5px)}}

/* ---------- 速记卡 ---------- */
.mn-toggle{
  display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:10px 22px;
  background:var(--card); border:1.5px solid var(--gold); border-radius:24px;
  cursor:pointer; font-family:var(--serif); font-size:14px; color:var(--gold);
  transition:all .25s ease;
}
.mn-toggle:hover{background:#fdf6e8; transform:translateY(-1px); box-shadow:0 4px 16px rgba(154,123,60,.18)}
.mn-toggle[aria-expanded="true"]{background:var(--gold); color:#fff}
.mn-toggle[aria-expanded="true"] .mn-hint{opacity:.75; color:#fff}
.mn-icon{font-size:16px}
.mn-text{font-weight:700}
.mn-hint{font-size:11px; color:var(--ink3); margin-left:2px}
.mn-toggle.global{margin:0 0 18px}

.mnemonic-panel{
  margin:18px 0 26px; border:1.5px solid var(--gold); border-radius:14px;
  background:linear-gradient(135deg,#fdf9f0 0%,#faf5ea 100%);
  overflow:hidden;
  animation:mnReveal .35s ease;
}
@keyframes mnReveal{from{opacity:0; transform:translateY(-8px)}to{opacity:1; transform:translateY(0)}}
.mnemonic-inner{padding:28px 30px}
.mn-badge{
  display:inline-block; padding:3px 12px; background:var(--gold); color:#fff;
  font-family:var(--mono); font-size:9px; letter-spacing:.18em; border-radius:10px; margin-bottom:14px;
}
.mn-title{margin:0 0 20px; font-family:var(--serif); font-size:18px; font-weight:700; color:var(--ink)}
.mn-block{margin-bottom:18px}
.mn-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); margin-bottom:8px; font-weight:600;
}
.mn-rhyme{
  font-family:var(--serif); font-size:16px; line-height:2.1; color:var(--ink);
  background:#fff; padding:16px 20px; border-radius:10px; border-left:3px solid var(--gold);
}
.mn-rhyme.big{font-size:18px; line-height:2.2}
.mn-chain{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.chain-item{
  display:inline-block; padding:5px 14px; background:#fff; border:1px solid var(--gold);
  border-radius:16px; font-family:var(--serif); font-size:13px; color:var(--ink); font-weight:600;
}
.chain-arrow{color:var(--gold); font-size:14px; font-weight:700}
.mn-hook{margin:0; font-size:13px; line-height:1.9; color:var(--ink2); background:#fff; padding:12px 16px; border-radius:8px}
.mn-num{font-family:var(--mono); font-size:13px; color:var(--ink2); background:#fff; padding:10px 16px; border-radius:8px}

/* 全局速记 */
.mn-turns{display:grid; gap:8px}
.turn-item{display:flex; align-items:baseline; gap:14px; padding:8px 14px; background:#fff; border-radius:8px}
.turn-y{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--gold); min-width:52px}
.turn-t{font-family:var(--serif); font-size:14px; font-weight:600; color:var(--ink); min-width:90px}
.turn-d{font-size:12px; color:var(--ink3)}
.mn-nums{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px}
.num-item{display:flex; flex-direction:column; align-items:center; padding:14px 10px; background:#fff; border-radius:10px; text-align:center}
.num-v{font-family:var(--mono); font-size:22px; font-weight:700; color:var(--gold)}
.num-l{font-size:11px; color:var(--ink3); margin-top:4px}

/* ---------- 搜索 ---------- */
.search-wrap{max-width:560px; margin:0 auto 30px; position:relative}
.search-box{
  display:flex; align-items:center; gap:10px; padding:12px 18px;
  background:var(--card); border:1.5px solid var(--line); border-radius:28px;
  transition:border-color .2s, box-shadow .2s;
}
.search-box:focus-within{border-color:var(--gold); box-shadow:0 4px 20px rgba(154,123,60,.15)}
.s-icon{color:var(--ink3); flex-shrink:0}
#search-input{
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--serif); font-size:15px; color:var(--ink);
}
#search-input::placeholder{color:var(--ink3)}
.search-clear{
  border:none; background:var(--line); color:var(--ink2); width:22px; height:22px;
  border-radius:50%; cursor:pointer; font-size:12px; line-height:1;
}
.search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:100;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.12); max-height:380px; overflow-y:auto;
}
.sr-item{
  display:flex; align-items:baseline; gap:12px; padding:12px 18px;
  cursor:pointer; border-bottom:1px solid var(--line); transition:background .15s;
}
.sr-item:hover{background:#faf5ea}
.sr-item:last-child{border-bottom:none}
.sr-type{
  flex-shrink:0; padding:2px 8px; border-radius:8px; font-family:var(--mono);
  font-size:9px; letter-spacing:.08em;
}
.sr-type.朝代{background:#fde8e2; color:#b03a2e}
.sr-type.君王{background:#e8f0f8; color:#3f6b8f}
.sr-type.事件{background:#f5ecd8; color:#9a7b3c}
.sr-name{font-family:var(--serif); font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap}
.sr-sub{font-size:12px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
.sr-empty{padding:18px; text-align:center; color:var(--ink3); font-size:13px}

/* ---------- 文化成就 ---------- */
.culture-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.culture-card{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px;
  transition:transform .25s, box-shadow .25s;
}
.culture-card:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.07)}
.culture-card .cat{
  display:inline-block; padding:3px 12px; background:var(--gold); color:#fff;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; border-radius:8px; margin-bottom:12px;
}
.culture-card ul{margin:0; padding:0; list-style:none}
.culture-card li{
  position:relative; padding:6px 0 6px 18px; font-size:13px; line-height:1.7; color:var(--ink2);
  border-bottom:1px dashed var(--line);
}
.culture-card li:last-child{border-bottom:none}
.culture-card li::before{
  content:""; position:absolute; left:0; top:13px; width:6px; height:6px;
  background:var(--gold); border-radius:50%; opacity:.6;
}

/* ---------- 神话传说 ---------- */
.myth-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.myth-card{
  background:linear-gradient(135deg,#fdf6ec 0%,#faf0e0 100%);
  border:1px solid #e8d5b8; border-radius:12px; padding:18px 20px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.myth-card:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(154,123,60,.12)}
.myth-card .myth-icon{font-size:18px; color:var(--gold); margin-bottom:6px}
.myth-card h4{margin:0 0 8px; font-family:var(--serif); font-size:16px; color:var(--ink)}
.myth-card p{margin:0; font-size:13px; line-height:1.85; color:var(--ink2)}

/* ---------- 文艺巅峰 ---------- */
.art-peak-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.art-card{
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:10px; padding:18px 20px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.art-card:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.07)}
.art-card .art-num{font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--gold); letter-spacing:2px; margin-bottom:6px}
.art-card h4{margin:0 0 8px; font-family:var(--serif); font-size:16px; color:var(--ink)}
.art-card p{margin:0; font-size:13px; line-height:1.85; color:var(--ink2)}

/* ---------- 同期世界 ---------- */
.world-timeline{position:relative; padding-left:28px; margin:10px 0 18px}
.world-timeline::before{
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(to bottom,var(--fen),var(--he),var(--gold));
}
.world-row{
  display:flex; gap:14px; align-items:baseline; padding:10px 0;
  border-bottom:1px dashed var(--line);
}
.world-row:last-child{border-bottom:none}
.world-region{
  flex:0 0 110px; font-family:var(--serif); font-size:14px; font-weight:600;
  color:var(--fen); text-align:right;
}
.world-event{flex:1; font-size:13px; line-height:1.8; color:var(--ink2)}
.world-exchange{
  background:#eef3f8; border-left:3px solid var(--fen); border-radius:8px;
  padding:14px 18px; margin-top:12px;
}
.world-exchange .ex-label{
  font-family:ui-monospace,Menlo,monospace; font-size:10px; letter-spacing:2px;
  color:var(--fen); text-transform:uppercase; margin-bottom:6px;
}
.world-exchange p{margin:0; font-size:13px; line-height:1.9; color:var(--ink2)}

/* ---------- 阅读引导 ---------- */
.guide{background:#f5ecd8; padding:12px 18px; border-radius:10px; margin:10px 0; font-size:13px; line-height:1.8; color:var(--ink2)}

/* ================= 历史小舞台（皮影戏） ================= */
.stage-section .stage-panel{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:18px; margin-top:18px;
}
.stage-section .stage-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.stage-section .stage-head h3{margin:0; font-family:var(--serif); font-size:19px; color:var(--ink)}
.stage-close{
  border:1px solid var(--line); background:transparent; color:var(--ink2);
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:15px; line-height:1;
}
.stage-close:hover{background:#f0e6d2; color:var(--ink)}

.stage-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:14px; margin-top:8px;
}
.stage-card{
  position:relative; display:block; text-align:left; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:15px 15px 13px; overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.stage-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--he); transform:scaleY(0); transform-origin:top;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.stage-card:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(42,34,28,.12); border-color:#d8c9a8}
.stage-card:hover::before{transform:scaleY(1)}
.stage-card .sc-year{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:var(--gold); text-transform:uppercase;
}
.stage-card .sc-title{
  font-family:var(--serif); font-size:17px; font-weight:700; color:var(--ink);
  margin:7px 0 6px; line-height:1.35;
}
.stage-card .sc-hook{font-size:12px; color:var(--ink3); line-height:1.65; margin:0 0 10px}
.stage-card .sc-foot{display:flex; align-items:center; gap:8px}
.stage-card .sc-dyn{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  background:#f0e6d2; color:var(--ink2); padding:3px 9px; border-radius:20px;
}
.stage-card .sc-play{
  margin-left:auto; width:26px; height:26px; border-radius:50%;
  background:var(--he); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:10px; flex:none;
}

/* 舞台画布 */
.stage-canvas-wrap{margin:0 auto; max-width:960px}
.stage-canvas{
  display:block; width:100%; height:auto; border-radius:10px;
  background:#1a120c; box-shadow:0 12px 32px rgba(26,18,12,.3);
}
.stage-controls{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:11px;
}
.st-btn{
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  padding:7px 15px; border-radius:20px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink2); cursor:pointer;
  transition:all .18s ease;
}
.st-btn:hover{background:#f0e6d2; color:var(--ink); border-color:#d8c9a8}
.st-play{background:var(--he); color:#fff; border-color:var(--he)}
.st-play:hover{background:#8f2c22; color:#fff}
.st-meta{
  font-family:var(--serif); font-size:12.5px; color:var(--ink3);
  flex:1 1 200px; text-align:right;
}

/* 朝代卷内嵌舞台 */
.stage-inline{
  background:#2a221c; border-radius:14px; padding:18px 18px 16px; margin:20px 0;
  border:1px solid #3a2e24;
}
.stage-inline .si-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.stage-inline .si-icon{
  width:38px; height:38px; border-radius:9px; flex:none;
  background:linear-gradient(145deg,#7a2820,#b03a2e);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.stage-inline .si-t{font-family:var(--serif); font-size:16px; font-weight:700; color:#f7f1e3; margin:0}
.stage-inline .si-y{font-family:var(--mono); font-size:10px; color:#c9a227; letter-spacing:.12em}
.stage-launch{
  margin-left:auto; font-family:var(--sans); font-size:12.5px; font-weight:500;
  padding:8px 16px; border-radius:20px; cursor:pointer;
  background:#c9a227; color:#2a221c; border:none;
  transition:all .18s ease;
}
.stage-launch:hover{background:#e0b92e; transform:translateY(-1px)}
.stage-launch[aria-expanded="true"]{background:transparent; color:#f7f1e3; border:1px solid rgba(247,241,227,.35)}
.stage-inline .si-desc{
  font-family:var(--serif); font-size:13px; color:#c4b49a;
  line-height:1.75; margin:6px 0 0;
}
.stage-mount{margin-top:14px}
.stage-mount:empty{display:none}

/* ============ 世界历史长廊 + 主页世界史入口 ============ */
.world-entry{
  display:flex; gap:28px; align-items:stretch;
  background:var(--paper2); border:1px solid var(--line);
  border-radius:14px; padding:28px 30px; margin-top:10px;
  background-image:linear-gradient(135deg, rgba(63,107,143,.06), rgba(154,123,60,.05));
}
.world-entry .we-left{flex:1.4; min-width:0}
.world-entry .we-kicker{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  color:var(--fen); margin-bottom:8px;
}
.world-entry h3{
  font-family:var(--serif); font-size:24px; margin:0 0 12px;
  color:var(--ink); letter-spacing:.04em;
}
.world-entry p{
  font-family:var(--serif); font-size:14px; line-height:2;
  color:var(--ink2); margin:0 0 18px;
}
.world-entry p b{color:var(--he)}
.we-btn{
  display:inline-block; padding:10px 22px; border-radius:999px;
  background:var(--fen); color:#fff; text-decoration:none;
  font-size:13.5px; letter-spacing:.06em; transition:transform .25s, box-shadow .25s;
}
.we-btn:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(63,107,143,.32)}
.world-entry .we-right{
  flex:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:center;
}
.we-mini{
  display:flex; flex-direction:column; gap:4px;
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper);
}
.we-mini .t{font-family:var(--serif); font-size:14px; font-weight:700; color:var(--ink)}
.we-mini .y{font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.04em}

.world-sec-nav{
  display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 8px;
  position:sticky; top:0; z-index:30;
  padding:12px 0; background:linear-gradient(180deg, var(--paper) 72%, transparent);
}
.world-sec-nav .chip{
  padding:7px 16px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper2); color:var(--ink2); text-decoration:none;
  font-size:13px; letter-spacing:.05em; transition:all .25s;
}
.world-sec-nav .chip:hover{
  border-color:var(--fen); color:var(--fen);
  background:rgba(63,107,143,.08); transform:translateY(-2px);
}

.world-sec{margin:34px 0 46px; scroll-margin-top:64px}
.world-sec-head{
  position:relative; padding:26px 28px; border-radius:14px;
  background:linear-gradient(135deg, rgba(63,107,143,.10), rgba(154,123,60,.07));
  border:1px solid var(--line); overflow:hidden;
}
.world-sec-head .num{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  color:var(--fen); margin-bottom:8px;
}
.world-sec-head h2{
  font-family:var(--serif); font-size:27px; margin:0 0 10px;
  letter-spacing:.05em; color:var(--ink);
}
.world-sec-head .lede{
  font-family:var(--serif); font-size:15px; color:var(--ink2);
  margin:0; line-height:1.9; max-width:640px;
}
.world-sec-head .years{
  position:absolute; right:26px; top:26px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--muted); border:1px solid var(--line);
  padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.5);
}
.world-sec h3{margin:30px 0 14px}
.world-tag{
  display:inline-block; margin-left:8px; padding:1px 8px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; font-style:normal;
  color:var(--he); border:1px solid rgba(176,58,46,.35); border-radius:999px;
  background:rgba(176,58,46,.07); vertical-align:2px;
}

/* ===== 经济 · 科技 ===== */
.et-block{margin-top:22px}
.et-head{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px; font-family:var(--serif); font-size:17px; font-weight:700; color:var(--ink);
}
.et-head .et-tag{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:6px; flex:none;
  font-family:var(--serif); font-size:15px; color:#fff;
}
.et-head.econ .et-tag{background:var(--gold, #9a7b3c)}
.et-head.tech .et-tag{background:var(--fen, #3f6b8f)}
.et-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px;
}
.et-card{
  position:relative; padding:18px 18px 16px; border:1px solid var(--line);
  border-radius:12px; background:#fffdf9;
}
.et-card.econ{border-left:3px solid #9a7b3c}
.et-card.tech{border-left:3px solid #3f6b8f}
.et-card .et-icon{
  position:absolute; right:14px; top:14px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:8px;
  font-family:var(--serif); font-size:14px; color:var(--muted); background:rgba(255,255,255,.6);
}
.et-card.econ .et-icon{color:#9a7b3c; border-color:rgba(154,123,60,.35)}
.et-card.tech .et-icon{color:#3f6b8f; border-color:rgba(63,107,143,.35)}
.et-card .et-era{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  color:var(--muted); margin:0 0 6px;
}
.et-card h4{margin:0 0 8px; font-family:var(--serif); font-size:15.5px; color:var(--ink); padding-right:36px}
.et-card p{margin:0; font-size:12.8px; line-height:1.85; color:var(--ink2)}
.et-list{margin:0; padding-left:18px}
.et-list li{font-size:13px; line-height:2; color:var(--ink2)}
.money-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.peak-grid{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}

@media (max-width:860px){
  .wrap{padding:0 18px 70px}
  .monarch-grid{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager .r{text-align:left}
  #float-nav{display:none}
  .statbar .cell{flex:1 1 46%}
  .dyn-banner .meta div{flex:1 1 46%}
  header.hero{padding:52px 0 32px}
  .culture-grid{grid-template-columns:1fr}
  .mnemonic-inner{padding:20px 18px}
  .mn-rhyme{font-size:14px}
  .mn-nums{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .turn-item{flex-wrap:wrap; gap:8px}
  .stage-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .st-meta{text-align:left; flex-basis:100%}
  .stage-inline .stage-launch{margin-left:0; width:100%}
  .myth-grid{grid-template-columns:1fr}
  .art-peak-grid{grid-template-columns:1fr}
  .world-region{flex-basis:80px; font-size:13px}
  .world-event{font-size:12px}
}
@media (max-width:520px){
  .m-card .top{flex-direction:column}
  .m-card .portrait{width:100%; height:130px}
  .et-grid{grid-template-columns:1fr}
  .money-grid{grid-template-columns:1fr 1fr}
  .hefen-toolbar .title{width:100%; margin-bottom:6px}
  .search-wrap{margin:0 0 20px}
  .mn-chain{gap:4px}
  .chain-item{font-size:12px; padding:4px 10px}
  .mn-toggle{width:100%; justify-content:center}
  .stage-grid{grid-template-columns:1fr}
  .stage-canvas-wrap{margin:0 -8px}
  .world-row{flex-direction:column; gap:4px}
  .world-region{flex-basis:auto; text-align:left}
  .world-entry{flex-direction:column; gap:18px; padding:22px}
  .world-sec-head{padding:20px}
  .world-sec-head .years{position:static; display:inline-block; margin-top:12px}
  .world-sec-nav{position:static}
}
@media print{
  #progress,#float-nav,.scroll-hint{display:none}
  .reveal{opacity:1; transform:none}
  .lineage-body{max-height:none !important}
  body{background:#fff}
}