:root{
  --bg:#f4ecdd; --panel:#fbf5e9; --ink:#2c2418; --muted:#8a7c63;
  --en:#6b5d8a; --accent:#a8321e; --hl:#ffe9a8; --hlline:#e7b93a;
  --edge:rgba(0,0,0,.08); --shadow:0 -2px 18px rgba(60,40,10,.10);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fs:1;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#171208; --panel:#211a0f; --ink:#ece3d1; --muted:#9a8b6f;
    --en:#b3a6d6; --accent:#ff8a6b; --hl:#4a3a12; --hlline:#c79a2c; --edge:rgba(255,255,255,.09); }
}
:root[data-theme="light"]{ --bg:#f4ecdd; --panel:#fbf5e9; --ink:#2c2418; --muted:#8a7c63;
  --en:#6b5d8a; --accent:#a8321e; --hl:#ffe9a8; --hlline:#e7b93a; --edge:rgba(0,0,0,.08); }
:root[data-theme="dark"]{ --bg:#171208; --panel:#211a0f; --ink:#ece3d1; --muted:#9a8b6f;
  --en:#b3a6d6; --accent:#ff8a6b; --hl:#4a3a12; --hlline:#c79a2c; --edge:rgba(255,255,255,.09); }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);
  display:flex;flex-direction:column;height:100dvh;overflow:hidden}

/* header */
header{flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  border-bottom:1px solid var(--edge);background:var(--bg);z-index:10}
.titles{flex:1;min-width:0;text-align:left;background:none;border:none;padding:0;
  color:var(--ink);font-family:var(--sans);cursor:pointer}
.book{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chap{font-weight:700;font-size:16px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caret{color:var(--muted);font-size:12px}
.hbtns{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.pill{border:1px solid var(--edge);background:var(--panel);color:var(--ink);
  font-family:var(--sans);font-size:14px;font-weight:600;padding:8px 12px;border-radius:999px;cursor:pointer}
.pill.sm{padding:8px 9px;min-width:36px;font-size:15px;line-height:1}
.pill.on,.pill[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:transparent}

/* reader — a fixed viewport that shows one page at a time */
main#reader{flex:1 1 auto;position:relative;overflow:hidden}
#flow{position:absolute;top:0;left:0;right:0;max-width:820px;margin-inline:auto;
  padding:10px clamp(16px,5vw,40px) 0;
  will-change:transform;transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.s{display:block;font-family:var(--serif);font-size:calc(21px * var(--fs));line-height:1.5;
  color:var(--ink);padding:3px 8px;margin:1px -8px;border-radius:8px;cursor:pointer;
  transition:background .15s,box-shadow .15s,color .3s}
.s.pstart{margin-top:calc(15px * var(--fs))}
.s .en{display:none;font-family:var(--sans);font-size:calc(15px * var(--fs));line-height:1.45;
  color:var(--en);margin-top:3px}
body.showtrans .s .en, .s.peek .en{display:block}
.s.playing{background:var(--hl);box-shadow:inset 3px 0 0 var(--hlline)}
.s.done{color:var(--muted)}
.s.done .en{color:color-mix(in srgb,var(--en) 60%,var(--muted))}
.loading{color:var(--muted);font-family:var(--serif);font-style:italic}

/* page-turn tap zones + page counter */
.edge{position:absolute;top:0;bottom:0;width:12%;min-width:44px;background:transparent;
  border:none;cursor:pointer;z-index:4;-webkit-appearance:none}
.edge.left{left:0}
.edge.right{right:0}
.pagenav{display:flex;align-items:center;gap:4px}
.pageno{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:48px;text-align:center}
.pgbtn{border:1px solid var(--edge);background:var(--bg);color:var(--ink);
  width:42px;height:42px;border-radius:12px;font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.pgbtn:active{background:var(--accent);color:#fff}

/* chapter sheet */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-inner{background:var(--bg);width:100%;max-width:560px;max-height:80dvh;
  border-radius:18px 18px 0 0;padding:14px 8px calc(14px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(0,0,0,.4)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;
  padding:2px 10px 10px;font-weight:700;font-size:17px}
#chapList{list-style:none;margin:0;padding:0;overflow:auto}
#chapList li{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:12px;cursor:pointer}
#chapList li:active{background:var(--panel)}
#chapList li.current{background:var(--hl)}
#chapList .num{font-weight:700;color:var(--muted);min-width:24px;text-align:right;font-variant-numeric:tabular-nums}
#chapList .ct{flex:1;font-family:var(--serif);font-size:17px}
#chapList .badge{font-size:11px;color:var(--muted)}
#chapList .rdy{color:#2e9e5b}

/* player */
footer{flex:0 0 auto;padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  background:var(--panel);border-top:1px solid var(--edge);box-shadow:var(--shadow)}
.seek{width:100%;margin:2px 0 6px;accent-color:var(--accent);height:22px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ctl{border:1px solid var(--edge);background:var(--bg);color:var(--ink);font-size:15px;font-weight:600;
  min-width:46px;height:42px;border-radius:12px;cursor:pointer}
.ctl.play{background:var(--accent);color:#fff;font-size:18px;min-width:56px;border:none}
.time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);margin-left:2px}
.speed{margin-left:auto;display:flex;gap:4px}
.spd{border:1px solid var(--edge);background:var(--bg);color:var(--muted);
  font-size:12px;font-weight:600;padding:6px 7px;border-radius:9px;cursor:pointer}
.spd.on{background:var(--ink);color:var(--bg);border-color:transparent}
@media (max-width:430px){ .book{display:none} }