:root{
  --bg:#ffffff; --card:#ffffff; --ink:#22302c; --ink2:#5c726c; --ink3:#8fa39d;
  --mint:#3f9d78; --mint-s:#e9f4f0; --sky:#5c93c9; --sky-s:#ecf3fa;
  --line:#e3eeea; --line2:#eef5f2; --warn:#d8a13c;
  --shadow:0 1px 2px rgba(34,48,44,.04), 0 8px 24px -16px rgba(34,48,44,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased;
}
a{color:var(--mint); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:14px;
  height:58px; padding:0 18px; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:600; letter-spacing:.04em; color:var(--ink); white-space:nowrap}
.brand small{display:block; font-weight:400; font-size:11px; color:var(--ink3); letter-spacing:.12em}
.tb-spacer{flex:1}
.searchbox{position:relative; width:min(320px,44vw)}
.searchbox input{
  width:100%; height:36px; padding:0 12px 0 32px; border:1px solid var(--line);
  border-radius:18px; background:#fff; color:var(--ink); font-size:13px; outline:none;
}
.searchbox input:focus{border-color:var(--mint); box-shadow:0 0 0 3px var(--mint-s)}
.searchbox svg{position:absolute; left:10px; top:10px; opacity:.45}
.sresults{
  position:absolute; top:42px; left:0; right:0; max-height:60vh; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  display:none; padding:6px;
}
.sresults.on{display:block}
.sr{padding:8px 10px; border-radius:8px; cursor:pointer; display:flex; gap:10px; align-items:baseline}
.sr:hover{background:var(--mint-s)}
.sr b{font-weight:600; font-size:14px}
.sr span{font-size:11px; color:var(--ink3); white-space:nowrap}
.sr i{font-style:normal; font-size:12px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu-btn{display:none; background:none; border:1px solid var(--line); border-radius:8px; height:34px; padding:0 10px; color:var(--ink2); cursor:pointer}

/* ---------- layout ---------- */
.wrap{display:flex; align-items:flex-start; max-width:1320px; margin:0 auto}
.side{
  position:sticky; top:58px; width:296px; flex:0 0 296px; height:calc(100vh - 58px);
  overflow-y:auto; padding:22px 8px 60px 18px; border-right:1px solid var(--line); background:linear-gradient(180deg,#f9f9f8,#f7f7f5);
}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:#dcdcd8; border-radius:3px}
.main{flex:1; min-width:0; padding:34px 44px 120px}

.vol{margin-bottom:6px}
.vol-h{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:.02em;
}
.vol-h:hover{background:#eef5f2}
.vol-h .num{
  font-size:10.5px; font-weight:700; color:#fff; background:var(--mint); border-radius:5px;
  padding:1px 5px; letter-spacing:.06em;
}
.vol-h .cnt{margin-left:auto; font-size:11px; color:var(--ink3); font-weight:400}
.chap{padding:1px 0 1px 12px; margin-left:10px; border-left:1px solid var(--line)}
.chap a{
  display:flex; gap:8px; align-items:baseline; padding:5px 9px; border-radius:7px;
  font-size:13px; color:var(--ink2); line-height:1.5;
}
.chap a:hover{background:#eef5f2; text-decoration:none}
.chap a.on{background:var(--mint-s); color:var(--mint); font-weight:600}
.chap .sec{font-size:11px; color:var(--ink3); margin-left:auto; white-space:nowrap}
.chap.collapsed{display:none}
.toc-title{font-size:11px; letter-spacing:.16em; color:var(--ink3); padding:0 10px 8px}
.quickref{display:flex; flex-direction:column; gap:2px; margin:0 0 14px; padding:0 10px}
.quickref a{font-size:12.5px; color:var(--ink2); padding:4px 8px; border-radius:7px; background:#fff; border:1px solid var(--line)}
.quickref a:hover{background:var(--mint-s); text-decoration:none; color:var(--mint)}
.year-block{margin-bottom:30px}
.year-h{
  display:flex; align-items:baseline; gap:10px; margin:0 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line);
}
.year-h .y{font-size:20px; font-weight:600; color:var(--mint); font-variant-numeric:tabular-nums}
.year-h .c{font-size:12px; color:var(--ink3)}
.clist{list-style:none; margin:0; padding:0}
.clist li{display:flex; gap:12px; padding:4px 8px; border-radius:7px; font-size:13.5px}
.clist li:hover{background:var(--mint-s)}
.clist .d{color:var(--ink3); font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:3px}
.clist .t{flex:1}
.clist .ch{font-size:11px; color:var(--ink3); background:#f4f9f7; border-radius:12px; padding:1px 8px; white-space:nowrap; align-self:center}

/* ---------- content ---------- */
.crumb{font-size:12.5px; color:var(--ink3); margin-bottom:10px}
.crumb a{color:var(--ink2)}
.page-h h1{font-size:27px; margin:0 0 6px; letter-spacing:.01em}
.page-h .lead{color:var(--ink2); font-size:14.5px; margin:0 0 4px}
.page-h .meta{font-size:12px; color:var(--ink3)}
.splash{
  margin:22px 0 30px; padding:20px 22px; background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--mint); border-radius:12px; box-shadow:var(--shadow);
}
.splash p{margin:0; color:var(--ink2); font-size:14.5px}
.artdir{margin:0 0 34px; padding:0; list-style:none; columns:2; column-gap:26px}
.artdir li{break-inside:avoid; margin-bottom:2px}
.artdir a{display:flex; gap:10px; padding:4px 8px; border-radius:7px; font-size:13.5px; color:var(--ink2)}
.artdir a:hover{background:var(--mint-s); text-decoration:none}
.artdir .d{color:var(--ink3); font-size:11.5px; font-variant-numeric:tabular-nums; padding-top:3px; white-space:nowrap}
.artdir .t{flex:1}

article{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:26px 30px 22px; margin:0 0 26px; box-shadow:var(--shadow); scroll-margin-top:74px;
}
article h2{font-size:21px; margin:0 0 4px; letter-spacing:.01em; line-height:1.5}
article[id]{scroll-margin-top:74px}
[id^=sec-]{scroll-margin-top:74px}
.a-meta{display:flex; gap:10px; align-items:center; font-size:12px; color:var(--ink3); margin-bottom:12px; flex-wrap:wrap}
.a-date{font-variant-numeric:tabular-nums; background:var(--mint-s); color:var(--mint); border-radius:5px; padding:1px 7px; font-weight:600}
.a-brief{
  font-size:14px; color:var(--ink2); background:#f7fbf9; border:1px solid var(--line2);
  border-radius:9px; padding:10px 14px; margin-bottom:14px;
}
.a-outline{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.a-outline a{
  font-size:11.5px; color:var(--sky); background:var(--sky-s); border-radius:20px; padding:2px 10px;
}
.a-outline a:hover{text-decoration:none; background:#ddeaf7}
.body p{margin:0 0 1em}
.body ol,.body ul{margin:0 0 1em; padding-left:1.5em}
.body li{margin:.25em 0}
.body strong{color:var(--ink); font-weight:600}
.body hr{border:0; border-top:1px dashed var(--line); margin:22px 0}
.body blockquote{
  margin:14px 0; padding:10px 16px; border-left:3px solid var(--sky); background:var(--sky-s);
  color:var(--ink2); border-radius:0 8px 8px 0;
}
.body pre{
  background:#f7faf9; border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  overflow-x:auto; font-size:13px; line-height:1.7;
}
.body code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace}
.body p code,.body li code{background:#f0f6f3; border-radius:4px; padding:1px 5px; font-size:13px}
.figure,.fig{margin:18px 0; text-align:center}
.fig img{
  max-width:100%; height:auto; border-radius:10px; border:1px solid var(--line);
  background:#fff; cursor:zoom-in; transition:opacity .3s;
}
.ilink{border-bottom:1px dashed var(--mint); }
.a-foot{
  margin-top:16px; padding-top:12px; border-top:1px solid var(--line2); font-size:12px; color:var(--ink3);
  display:flex; gap:14px; flex-wrap:wrap;
}
.pagenav{display:flex; gap:12px; margin:8px 0 40px}
.pagenav a{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px;
  color:var(--ink2); font-size:13.5px; box-shadow:var(--shadow);
}
.pagenav a:hover{text-decoration:none; border-color:var(--mint)}
.pagenav .dir{display:block; font-size:11px; color:var(--ink3); margin-bottom:3px}
.pagenav .r{text-align:right}

/* ---------- landing ---------- */
.hero{
  padding:52px 0 40px; border-bottom:1px solid var(--line); margin-bottom:34px;
}
.eyebrow{font-size:12px; letter-spacing:.24em; color:var(--mint); margin-bottom:16px}
.hero h1{font-size:40px; line-height:1.3; margin:0 0 10px; letter-spacing:.02em}
.hero .sub{font-size:16px; color:var(--ink2); margin:0 0 22px}
.hero-tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
.hero-tags span{font-size:12px; color:var(--ink2); background:var(--mint-s); border:1px solid var(--line); border-radius:20px; padding:3px 12px}
.stats{display:flex; gap:34px; flex-wrap:wrap}
.stat .n{font-size:26px; font-weight:600; color:var(--mint); font-variant-numeric:tabular-nums}
.stat .l{font-size:12px; color:var(--ink3); letter-spacing:.06em}
.sec-h{font-size:13px; letter-spacing:.18em; color:var(--ink3); margin:38px 0 14px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px}
.vcard{
  background:var(--card); border:1px solid var(--line); border-radius:13px; padding:18px 20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:6px;
}
.vcard .vn{font-size:11px; letter-spacing:.14em; color:var(--mint); font-weight:700}
.vcard h3{margin:0; font-size:17px}
.vcard .vs{font-size:12.5px; color:var(--ink3); margin-bottom:2px}
.vcard p{margin:0; font-size:13.5px; color:var(--ink2)}
.vcard ul{margin:8px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px}
.vcard li a{font-size:12px; background:#f6faf8; border:1px solid var(--line2); border-radius:16px; padding:2px 10px; color:var(--ink2)}
.vcard li a:hover{background:var(--mint-s); text-decoration:none; color:var(--mint)}
.route{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:20px 24px; box-shadow:var(--shadow)}
.route ol{margin:0; padding-left:1.3em; color:var(--ink2); font-size:14px}
.route li{margin:6px 0}
.route b{color:var(--ink)}
.note{font-size:12.5px; color:var(--ink3); margin-top:26px; line-height:1.9}
#totop{
  position:fixed; right:22px; bottom:24px; width:42px; height:42px; border-radius:50%;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer;
  color:var(--ink2); display:none; align-items:center; justify-content:center;
}
#totop.on{display:flex}
.termbox{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 26px; margin:0 0 20px; box-shadow:var(--shadow)}
.termbox h3{margin:0 0 12px; font-size:15px; color:var(--mint); letter-spacing:.04em}
.termbox .trow{padding:12px 0; border-top:1px dashed var(--line2)}
.termbox .trow:first-of-type{border-top:0}
.termbox .tn{font-weight:600; color:var(--ink)}
.termbox .tx{color:var(--ink2); font-size:14.5px; margin-top:3px}
.termbox .src{font-size:11.5px; color:var(--ink3); margin-top:5px}
.termbox .src a{color:var(--sky)}
.qgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px}
.qcard{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:18px 20px; box-shadow:var(--shadow)}
.qcard .qt{font-size:14.5px; color:var(--ink); line-height:1.8}
.qcard .qa{font-size:12px; color:var(--ink3); margin-top:10px}
.qcard .qa b{color:var(--mint); font-weight:600}
.qcard .qs{font-size:11.5px; color:var(--ink3); margin-top:6px}
.qcard .qs a{color:var(--sky)}

@media (max-width:1000px){
  .side{position:fixed; left:0; top:58px; bottom:0; z-index:50; transform:translateX(-100%); transition:transform .25s; background:#fff; box-shadow:var(--shadow)}
  .side.open{transform:none}
  .main{padding:22px 18px 100px}
  .menu-btn{display:block}
  .artdir{columns:1}
  .hero h1{font-size:30px}
  .searchbox{width:46vw}
}