:root{
  --red:#640000; --gold:#CBA97B; --orange:#E99753;
  --ink:#1c1a17; --sub:#6b6560; --line:#e7e1d8; --paper:#fbf9f5; --card:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Songti SC","SimSun","Noto Serif SC",Georgia,serif;
  line-height:1.9; -webkit-font-smoothing:antialiased;
}
.sans{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
.prose{max-width:880px; margin:0 auto; padding:0 24px}

header.masthead{border-bottom:2px solid var(--red); padding:46px 0 22px; margin-bottom:8px}
.kicker{font-family:-apple-system,"PingFang SC",sans-serif; font-size:12px; letter-spacing:.28em; color:var(--red); font-weight:700; text-transform:uppercase}
h1{font-size:32px; line-height:1.32; margin:16px 0 14px; letter-spacing:.01em; font-weight:800}
.meta{font-family:-apple-system,"PingFang SC",sans-serif; font-size:13.5px; color:var(--sub); display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.lede{font-size:17px; color:#3a352f; margin:24px 0 8px; padding-left:18px; border-left:3px solid var(--gold); line-height:1.85}

.reader{margin:30px 0 10px}
.toolbar{
  font-family:-apple-system,"PingFang SC",sans-serif;
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 1px 3px rgba(100,0,0,.04); margin-bottom:18px;
  position:sticky; top:8px; z-index:10;
}
.toolbar button{
  font-family:inherit; font-size:13.5px; font-weight:600;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:7px 13px; border-radius:7px; cursor:pointer; transition:.15s; line-height:1;
}
.toolbar button:hover{border-color:var(--gold); color:var(--red)}
.toolbar .pageno{font-size:13px; color:var(--sub); min-width:64px; letter-spacing:.02em}
.toolbar .spacer{flex:1}
.toolbar .zlbl{font-size:12px; color:#a09a92; margin:0 2px 0 6px}

.stage{
  position:relative;
  min-height:420px;
}
.page-wrap{
  margin:0 auto 16px; max-width:100%;
  background:#fff; border:1px solid var(--line); border-radius:6px;
  box-shadow:0 2px 12px rgba(100,0,0,.06); overflow:hidden;
}
.page-wrap canvas{display:block; width:100%; height:auto}
#rloader{
  text-align:center; padding:120px 0;
  font-family:-apple-system,"PingFang SC",sans-serif; font-size:13px; color:var(--sub);
}

footer{border-top:1px solid var(--line); padding:22px 0 50px; margin-top:30px; font-family:-apple-system,"PingFang SC",sans-serif; font-size:12.5px; color:#a09a92}

@media (max-width:640px){
  h1{font-size:25px}
  .lede{font-size:15.5px}
  .toolbar{flex-wrap:wrap; padding:8px 10px}
}