:root{
  --bg:#f6f0e6;
  --paper:#fffdf9;
  --paper-soft:#fbf7f1;
  --card:#fff8f0;
  --line:#dbcbb8;
  --text:#2d261f;
  --muted:#6d6258;
  --accent:#b46838;
  --accent-2:#496b5f;
  --shadow:0 20px 50px rgba(72,49,31,.10);
}
body.dark{
  --bg:#1f1b18;
  --paper:#2a241f;
  --paper-soft:#332b24;
  --card:#2f2822;
  --line:#5d4d3f;
  --text:#f3ebdf;
  --muted:#cbbba6;
  --accent:#e0a064;
  --accent-2:#89b29c;
  --shadow:0 20px 50px rgba(0,0,0,.30);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(circle at top right,rgba(180,104,56,.13),transparent 24%),linear-gradient(180deg,#fbf6ee 0%,var(--bg) 100%);
  color:var(--text);
  line-height:1.7;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
main{width:min(1180px,calc(100vw - 32px));margin:0 auto;padding:28px 0 64px}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 20px;border-bottom:1px solid rgba(219,203,184,.55);backdrop-filter:blur(14px);
  background:rgba(251,246,238,.82)
}
body.dark .topbar{background:rgba(31,27,24,.82)}
.brand{font-weight:800;font-size:18px;max-width:55vw}
.topbar nav{display:flex;gap:10px;flex-wrap:wrap}
.topbar nav a{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.56);font-size:14px
}
.topbar nav a.active{background:var(--accent);color:white;border-color:var(--accent)}
.icon-button{
  width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--paper);cursor:pointer;color:var(--text)
}
.hero,.hero-book,.layout,.concept-hero,.plate-detail{display:grid;gap:20px}
.hero{grid-template-columns:1.6fr .9fr}
.hero-book,.concept-hero{grid-template-columns:1fr 1fr}
.layout{grid-template-columns:minmax(0,1.6fr) 340px}
.plate-detail{grid-template-columns:1.1fr .9fr;align-items:start}
.panel,.card,.metric,.plate-original,.book-cover{
  background:var(--paper);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow)
}
.panel,.card,.metric{padding:22px}
.hero h1,.hero-book h1,.section-title,.panel h2,.card h2{
  font-family:"Songti SC","Noto Serif SC",serif;line-height:1.18;margin:0 0 12px
}
.hero h1,.hero-book h1{font-size:clamp(28px,4vw,52px)}
.section-title{font-size:30px;margin:0 0 16px}
.small{font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.metric strong{display:block;font-size:28px;margin-bottom:8px}
.button,.ghost-button,.tag,.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px
}
.button{background:var(--accent);color:white}
.ghost-button,.tag,.chip{border:1px solid var(--line);background:var(--paper-soft)}
.tag-row,.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.book-map{display:grid;gap:12px;margin-top:16px}
.book-map-item{padding:14px 16px;border-radius:18px;background:var(--paper-soft);border:1px solid var(--line)}
.cover-band,.grid,.reading-grid,.thumb-strip{display:grid;gap:16px}
.cover-band{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.reading-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.thumb-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.chapter-card-figure,.book-cover,.viewer-main,.plate-original,.plate-thumb img,.thumb-card img,.mini-plate img{
  border-radius:20px;overflow:hidden;background:#f3ede2;border:1px solid var(--line)
}
.chapter-card-figure img,.book-cover img,.viewer-main img,.plate-original img,.plate-thumb img,.thumb-card img,.mini-plate img{
  width:100%;height:100%;object-fit:contain;background:#f7f2ea
}
.chapter-card-figure{aspect-ratio:4/3;margin-bottom:14px}
.book-cover{aspect-ratio:4/5;padding:16px}
.book-cover img{padding:12px}
.plate-thumb img,.thumb-card img,.mini-plate img{aspect-ratio:4/3;padding:10px}
.viewer-main{aspect-ratio:4/3;padding:16px}
.viewer-main img{padding:8px}
.plate-original{padding:18px}
.plate-original img{padding:6px}
.card p,.panel p{margin:0 0 12px}
.plain-list,.route-list{margin:0;padding-left:18px}
.plain-list li,.route-list li{margin:0 0 10px}
.searchbar{
  width:100%;min-height:48px;border-radius:18px;border:1px solid var(--line);padding:0 16px;margin-bottom:18px;
  font:inherit;background:var(--paper)
}
.reading-card,.glossary-row{
  padding:18px;border-radius:22px;background:var(--paper-soft);border:1px solid var(--line)
}
.qa details{border:1px dashed var(--line);border-radius:18px;padding:14px 16px;background:var(--paper-soft)}
.qa summary{cursor:pointer;font-weight:700}
.sticky-rail{position:sticky;top:86px;align-self:start;display:grid;gap:16px}
.pager{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.footer-note{font-size:14px;color:var(--muted)}
.glossary-table{display:grid;gap:12px}
.glossary-row{display:grid;grid-template-columns:1.1fr .9fr 2fr;gap:16px;align-items:start}
.fade-up{opacity:0;transform:translateY(12px);animation:fadeUp .55s ease forwards}
.fade-up:nth-child(2){animation-delay:.04s}
.fade-up:nth-child(3){animation-delay:.08s}
.fade-up:nth-child(4){animation-delay:.12s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@media (max-width:1040px){
  .hero,.hero-book,.layout,.concept-hero,.plate-detail,.grid,.cover-band,.reading-grid,.thumb-strip{grid-template-columns:1fr 1fr}
  .layout{grid-template-columns:1fr}
  .sticky-rail{position:static}
}
@media (max-width:720px){
  main{width:min(100vw - 20px,1180px)}
  .topbar{padding:12px 14px;align-items:flex-start;flex-wrap:wrap}
  .brand{max-width:none}
  .hero,.hero-book,.concept-hero,.plate-detail,.grid,.cover-band,.reading-grid,.thumb-strip,.glossary-row{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:1fr 1fr}
}