:root{
  --fs:18px;
  --lh:1.9;
  --paper:#f6f1e7;
  --paper-2:#efe7d8;
  --ink:#221f1a;
  --muted:#6d6355;
  --line:#d9cdb8;
  --accent:#8a4f1f;
  --accent-soft:#f0d9bd;
  --mark:#ffe08a;
  --maxw:38rem;
  --ui:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#191714; --paper-2:#211e19; --ink:#e8e1d4; --muted:#a99e8c;
    --line:#3a342b; --accent:#d9a06a; --accent-soft:#3a2b1d; --mark:#7a5a12;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:var(--fs);line-height:var(--lh);
  padding-bottom:env(safe-area-inset-bottom);
  overflow-wrap:anywhere;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:var(--ui);color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.5rem;
  padding:.55rem max(.9rem,env(safe-area-inset-left));
  padding-top:calc(.55rem + env(safe-area-inset-top));
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{font-family:var(--ui);font-weight:700;letter-spacing:.18em;color:var(--ink);margin-right:auto}
.tools{display:flex;gap:.25rem;align-items:center}
.iconbtn{
  font-family:var(--ui);font-size:.82rem;line-height:1;background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:.5rem .6rem;cursor:pointer;
  min-height:2.1rem;
}
.iconbtn:hover{background:var(--paper-2)}
.tiny{font-family:var(--ui);font-size:.72rem;color:var(--muted)}

/* ---------- drawer ---------- */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:40}
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(21rem,86vw);z-index:50;
  background:var(--paper);border-right:1px solid var(--line);
  transform:translateX(-102%);transition:transform .22s ease;
  overflow-y:auto;padding:1rem 1rem 3rem;
  font-family:var(--ui);font-size:.9rem;line-height:1.5;
}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.drawer-desc{color:var(--muted);font-size:.8rem;margin:.35rem 0 1rem}
.chapters{list-style:none;margin:0;padding:0}
.chapters li{margin:.15rem 0}
.chapters a{display:block;padding:.55rem .5rem;border-radius:.4rem;color:var(--ink)}
.chapters a[aria-current="page"]{background:var(--accent-soft);font-weight:700}
.drawer-foot{margin-top:1.5rem;border-top:1px solid var(--line);padding-top:.8rem;color:var(--muted);font-size:.8rem}
.drawer-foot ul{list-style:none;padding:0;margin:.4rem 0}

/* ---------- reader ---------- */
.reader{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.15rem 4rem}
.reader h1{font-size:1.45em;line-height:1.35;margin:.2em 0 .1em;letter-spacing:.02em}
.kicker{font-family:var(--ui);font-size:.78rem;color:var(--muted);margin:0 0 1.6rem;letter-spacing:.08em}
.reader h2{font-size:1.08em;line-height:1.5;margin:2rem 0 1rem;padding-bottom:.4rem;border-bottom:1px solid var(--line);font-weight:600}
.reader p{margin:0 0 1.05em;text-align:justify;text-justify:inter-ideograph;hyphens:auto}
.reader p>mark.qmark{background:var(--mark);color:inherit;padding:0 .1em;border-radius:2px}
.reader p.hit{background:var(--accent-soft);box-shadow:-.55rem 0 0 var(--accent-soft),.55rem 0 0 var(--accent-soft);border-radius:2px;transition:background .5s}
.pager{display:flex;justify-content:space-between;gap:1rem;margin:3rem 0 1rem;font-family:var(--ui);font-size:.86rem}
.pager .pn{padding:.6rem .2rem}
.searchback{text-align:center;font-family:var(--ui);font-size:.8rem;color:var(--muted)}

/* ---------- index / toc ---------- */
.hero{max-width:var(--maxw);margin:0 auto;padding:2.6rem 1.15rem 1rem}
.eyebrow{font-family:var(--ui);font-size:.72rem;letter-spacing:.16em;color:var(--accent);margin:0 0 .8rem}
.hero h1{font-size:2em;margin:0 0 .5rem;letter-spacing:.06em}
.lede{color:var(--muted);font-size:.95em;line-height:1.8;margin:0 0 1.4rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
.btn{
  display:inline-block;font-family:var(--ui);font-size:.85rem;padding:.6rem .95rem;
  border-radius:999px;background:var(--accent);color:var(--paper);border:1px solid var(--accent);cursor:pointer;
}
.btn.ghost{background:transparent;color:var(--accent)}
.tocpage{max-width:var(--maxw);margin:0 auto;padding:.5rem 1.15rem 2rem}
.book{border-top:1px solid var(--line);padding:.4rem 0}
.book summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;padding:1rem .2rem;cursor:pointer;list-style:none}
.book summary::-webkit-details-marker{display:none}
.book summary::before{content:"▸";font-family:var(--ui);color:var(--muted);transition:transform .2s}
.book[open] summary::before{transform:rotate(90deg)}
.btitle{font-weight:700;font-size:1.05em}
.bdesc{font-family:var(--ui);font-size:.75rem;color:var(--muted)}
.toc{list-style:none;margin:0 0 .8rem;padding:0}
.toc a{display:flex;gap:.7rem;align-items:baseline;padding:.55rem .3rem;color:var(--ink);border-radius:.35rem}
.toc a:hover{background:var(--paper-2);text-decoration:none}
.chno{font-family:var(--ui);font-size:.72rem;color:var(--muted);min-width:1.6em}
.cnt{font-family:var(--ui);font-size:.7rem;color:var(--muted);margin-left:auto}
.foot{max-width:var(--maxw);margin:1rem auto 3rem;padding:0 1.15rem;font-family:var(--ui);font-size:.72rem;color:var(--muted)}

/* ---------- search ---------- */
.searchpage{max-width:var(--maxw);margin:0 auto;padding:1.6rem 1.15rem 4rem}
.searchpage h1{font-size:1.35em;margin:.2rem 0 1rem}
#q{
  width:100%;font-family:var(--ui);font-size:1rem;padding:.85rem 1rem;border-radius:.7rem;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink);-webkit-appearance:none;
}
.status{font-family:var(--ui);font-size:.78rem;color:var(--muted);min-height:1.6em;margin:.7rem .1rem 1rem}
.results{list-style:none;margin:0;padding:0}
.result{padding:1rem 0;border-top:1px solid var(--line)}
.result h2{font-size:1.02em;margin:0 0 .25rem;border:0;padding:0;line-height:1.5}
.result h2 a{color:var(--ink)}
.breadcrumb{font-family:var(--ui);font-size:.72rem;color:var(--muted);margin:0 0 .5rem}
.excerpt{font-size:.92em;color:var(--ink);margin:.3rem 0 .5rem}
.excerpt mark,.sub mark{background:var(--mark);color:inherit;padding:0 .08em;border-radius:2px}
.subs{list-style:none;margin:.4rem 0 0;padding:0;font-family:var(--ui);font-size:.78rem}
.subs li{margin:.2rem 0}
.subs a{display:block;padding:.35rem .45rem;border-left:2px solid var(--line);color:var(--ink)}
.subs a:hover{border-color:var(--accent);background:var(--paper-2);text-decoration:none}
.subs .snippet{color:var(--muted)}
.empty{font-family:var(--ui);font-size:.85rem;color:var(--muted)}

@media (max-width:640px){
  :root{--fs:17px}
  .reader{padding:1.2rem .95rem 3.5rem}
  .hero{padding-top:1.8rem}
  .brand{letter-spacing:.12em}
  .iconbtn{padding:.48rem .52rem}
  .reader p{margin-bottom:1em}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}