:root{
  --accent:#8B0000; --gold:#9A7B1F; --deep:#2E1A47;
  --ink:#1A1A2E; --paper:#FBF9F4; --gray:#5a5a63;
  --fs:19px; --maxw:660px;
  --bg:var(--paper); --fg:var(--ink); --muted:var(--gray);
  --frag:var(--deep); --rule:var(--gold);
  --bar-bg:#ece4d6; --chrome:#fffdf8; --chrome-fg:#1A1A2E; --chrome-border:#e6ddcb;
}
/* themes */
body.theme-night{
  --bg:#12121c; --fg:#e7e4da; --muted:#9a97a6; --accent:#c9433f; --gold:#c8a13a;
  --frag:#b9a7dd; --rule:#c8a13a; --bar-bg:#25242f; --chrome:#1a1a26; --chrome-fg:#e7e4da; --chrome-border:#2b2a38;
}
body.theme-sepia{
  --bg:#f3e9d6; --fg:#3b2f22; --muted:#7a6a52; --accent:#8a2b1f; --gold:#8a6d24;
  --frag:#5a4632; --rule:#8a6d24; --bar-bg:#e4d6bd; --chrome:#efe3cd; --chrome-fg:#3b2f22; --chrome-border:#ddcaa8;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--fg);
  font-family:Georgia,'Iowan Old Style','Palatino Linotype','Times New Roman',serif;
  font-size:var(--fs); line-height:1.72; -webkit-text-size-adjust:100%;
  transition:background .25s ease,color .25s ease;
}
button{font-family:inherit;cursor:pointer;}

/* progress bar */
#bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:60;transition:width .1s linear;}

/* top chrome */
#top{position:fixed;top:0;left:0;right:0;height:52px;display:flex;align-items:center;gap:8px;
  padding:0 10px;background:var(--chrome);color:var(--chrome-fg);border-bottom:1px solid var(--chrome-border);
  z-index:50;transform:translateY(0);transition:transform .25s ease;}
#top.hidden{transform:translateY(-100%);}
#top .ttl{flex:1;text-align:center;font-size:.86rem;letter-spacing:.04em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.iconbtn{background:none;border:none;color:var(--chrome-fg);width:40px;height:40px;border-radius:8px;
  display:grid;place-items:center;font-size:1.15rem;}
.iconbtn:hover{background:rgba(128,128,128,.12);}

/* views */
.view{display:none;}
.view.active{display:block;}

/* cover */
#cover{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 26px;gap:2px;}
#cover .mtn{width:96px;height:96px;margin-bottom:14px;}
#cover .title{font-size:2.6rem;font-weight:700;color:var(--accent);letter-spacing:.02em;margin:.1em 0 .05em;line-height:1.1;}
#cover .tag{font-style:italic;font-size:1.2rem;margin-bottom:1.1em;}
#cover .rule{width:120px;border-top:2px solid var(--rule);margin:.9em 0;}
#cover .author{font-size:1.12rem;}
#cover .pb{font-size:.8rem;color:var(--muted);letter-spacing:.06em;margin-top:.2em;}
#cover .stat{font-size:.74rem;color:var(--muted);margin-top:.5em;}
.cta{margin-top:2.2em;display:flex;flex-direction:column;gap:10px;align-items:center;width:100%;max-width:300px;}
.btn{width:100%;padding:13px 18px;border-radius:11px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;font-size:1rem;letter-spacing:.03em;}
.btn.secondary{background:transparent;color:var(--accent);}
.btn:hover{opacity:.92;}
.installhint{font-size:.72rem;color:var(--muted);margin-top:1.4em;max-width:320px;line-height:1.5;}

/* reader */
#reader{padding:74px 0 120px;}
.page{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.part{text-align:center;margin:14vh 0 8vh;}
.part .roman{font-size:1.9rem;font-weight:700;color:var(--accent);letter-spacing:.08em;}
.part .name{font-style:italic;font-size:1.25rem;color:var(--frag);margin-top:.3em;}
h2.ch{text-align:center;color:var(--accent);font-weight:700;letter-spacing:.06em;font-size:1.5rem;margin:2.6em 0 .1em;}
.ch-sub{text-align:center;font-style:italic;color:var(--muted);margin:.2em 0 1.3em;font-size:1rem;}
h2.ch + p,.ch-sub + p{margin-top:1.1em;}
p{margin:0;text-indent:1.7em;text-align:justify;hyphens:auto;}
p.noind{text-indent:0;}
p.frag{color:var(--frag);font-style:italic;border-left:3px solid var(--rule);padding-left:15px;margin-left:-18px;}
.flabel{text-align:center;color:var(--frag);font-weight:700;letter-spacing:.04em;font-size:.92rem;margin:2.2em 0 1.1em;}
.scene{text-align:center;color:var(--muted);letter-spacing:.3em;margin:1.5em 0;}
.the-end{text-align:center;color:var(--accent);font-weight:700;letter-spacing:.1em;font-size:1.05rem;margin:3.4em 0 1em;}

/* chapter nav */
.chnav{max-width:var(--maxw);margin:2.4em auto 0;padding:0 24px;display:flex;justify-content:space-between;gap:12px;}
.chnav button{flex:1;padding:12px;border-radius:10px;border:1px solid var(--chrome-border);
  background:var(--chrome);color:var(--fg);font-size:.9rem;}
.chnav button:disabled{opacity:.35;cursor:default;}

/* drawer (TOC) + settings share overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;opacity:0;pointer-events:none;transition:opacity .2s;}
.overlay.show{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;bottom:0;left:0;width:82%;max-width:360px;background:var(--chrome);color:var(--chrome-fg);
  z-index:80;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;box-shadow:2px 0 24px rgba(0,0,0,.25);}
.drawer.show{transform:translateX(0);}
.drawer h3{margin:0;padding:18px 20px;font-size:1rem;letter-spacing:.05em;color:var(--accent);
  border-bottom:1px solid var(--chrome-border);position:sticky;top:0;background:var(--chrome);}
.toc-part{padding:14px 20px 4px;font-size:.72rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
.toc-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--chrome-fg);
  padding:9px 22px;font-size:.95rem;line-height:1.3;}
.toc-item:hover{background:rgba(128,128,128,.1);}
.toc-item.current{color:var(--accent);font-weight:700;}
.toc-item .subttl{display:block;font-size:.75rem;color:var(--muted);font-style:italic;}

/* settings panel (right) */
.panel{position:fixed;top:0;bottom:0;right:0;width:82%;max-width:340px;background:var(--chrome);color:var(--chrome-fg);
  z-index:80;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;box-shadow:-2px 0 24px rgba(0,0,0,.25);}
.panel.show{transform:translateX(0);}
.panel h3{margin:0;padding:18px 20px;font-size:1rem;letter-spacing:.05em;color:var(--accent);border-bottom:1px solid var(--chrome-border);}
.set-group{padding:16px 20px;border-bottom:1px solid var(--chrome-border);}
.set-group .lbl{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.seg{display:flex;gap:8px;}
.seg button{flex:1;padding:10px;border-radius:9px;border:1px solid var(--chrome-border);background:transparent;color:var(--chrome-fg);font-size:.85rem;}
.seg button.on{border-color:var(--accent);color:var(--accent);font-weight:700;}
.stepper{display:flex;align-items:center;gap:14px;}
.stepper button{width:44px;height:44px;border-radius:10px;border:1px solid var(--chrome-border);background:transparent;color:var(--chrome-fg);font-size:1.3rem;}
.stepper .val{flex:1;text-align:center;font-size:.95rem;}
.panel .note{padding:16px 20px;font-size:.74rem;color:var(--muted);line-height:1.6;}

@media (max-width:520px){
  #cover .title{font-size:2.15rem;}
  .page,.chnav{padding-left:18px;padding-right:18px;}
}