:root{
  --paper:#f6f1e5; --paper-deep:#efe8d8; --ink:#3a3226; --ink-soft:#7a6f5d;
  --accent:#9a3b2e; --rule:#d8cdb8; --shadow:rgba(90,70,40,.08);
  --fs:1.0;
}
html[data-theme="dark"]{
  --paper:#191713; --paper-deep:#14120f; --ink:#d6cdba; --ink-soft:#8d8371;
  --accent:#c8795f; --rule:#3a352c; --shadow:rgba(0,0,0,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:calc(17px * var(--fs));scroll-behavior:smooth}
body{
  background:var(--paper);
  background-image:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.35), transparent 60%);
  color:var(--ink);
  font-family:"Noto Serif TC","Songti TC","STSong","PMingLiU",serif;
  line-height:2.05; letter-spacing:.02em;
  transition:background .4s,color .4s;
  -webkit-font-smoothing:antialiased;
  hanging-punctuation:first allow-end;
}
html[data-theme="dark"] body{background-image:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

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

.bar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:.4rem 1.1rem;font-size:.82rem;color:var(--ink-soft);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
  transition:transform .3s;
}
.bar.hide{transform:translateY(-100%)}
.bar .title{position:absolute;left:50%;transform:translateX(-50%);letter-spacing:.15em;white-space:nowrap;overflow:hidden;max-width:36%}
.bar a:hover{color:var(--accent)}
.bleft{display:flex;align-items:center;gap:.9rem}
.bleft a{display:inline-flex;align-items:center;min-height:2.2rem}
#remain{font-size:.72rem;letter-spacing:.05em;color:var(--ink-soft)}
.ctrl{display:flex;gap:.1rem;align-items:center}
.ctrl button{
  all:unset;cursor:pointer;border-radius:8px;
  min-width:2.2rem;min-height:2.2rem;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:.85rem;color:var(--ink-soft);line-height:1;
}
.ctrl button:hover{color:var(--accent);background:var(--shadow)}
.ctrl button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.page{max-width:33.5em;margin:0 auto;padding:6.5rem 1.4rem 4rem}
.book-head{text-align:center;margin:3.5rem 0 4.5rem}
.book-head .label{font-size:.8rem;letter-spacing:.55em;text-indent:.55em;color:var(--ink-soft);margin-bottom:1.6rem}
.book-head h1{font-size:2.3rem;font-weight:600;letter-spacing:.22em;text-indent:.22em;line-height:1.5}
.book-head .orn{color:var(--accent);margin:1.7rem 0;font-size:.95rem;letter-spacing:.6em;text-indent:.6em}
.book-head .meta{font-size:.8rem;color:var(--ink-soft);letter-spacing:.12em}

.text p{text-indent:2em;text-align:justify;text-justify:inter-ideograph;line-break:strict}
.text p.first{text-indent:0}
.text p.first::first-letter{font-size:1.6em;color:var(--accent);font-weight:600}
.text .sec{margin-top:1.9em}
.text .poem{margin:1.3em 0 1.3em 2em;color:color-mix(in srgb, var(--ink) 88%, var(--accent))}
.text .poem span{display:block}
.text .poem .stanza{margin:0}
.text .poem .stanza + .stanza{margin-top:1.05em}
.text .poem .stanza span:nth-child(even){padding-left:1.5em}
.text .poem + p{margin-top:1.3em}

/* long books: gentler section rhythm + faint divider */
.text.longbook .sec{margin-top:3.2em;position:relative}
.text.longbook .sec::before{
  content:"❖";position:absolute;top:-2.1em;left:50%;transform:translateX(-50%);
  color:var(--rule);font-size:.72em;letter-spacing:0;text-indent:0;
}

.book-end{text-align:center;color:var(--accent);letter-spacing:.6em;text-indent:.6em;margin:4rem 0 2.5rem;font-size:.9rem}
.booknav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--rule);padding-top:2rem;font-size:.92rem}
.booknav a{display:flex;flex-direction:column;gap:.3rem;max-width:45%;padding:.3rem}
.booknav a:hover .bn-name{color:var(--accent)}
.booknav .next{text-align:right;margin-left:auto}
.booknav .dir{font-size:.75rem;color:var(--ink-soft);letter-spacing:.2em}
.booknav .bn-name{font-size:1.05rem;transition:color .2s}
.toindex{display:block;text-align:center;margin-top:2.2rem;font-size:.8rem;color:var(--ink-soft);letter-spacing:.3em;padding:.5rem}
.toindex:hover{color:var(--accent)}

/* resume chip */
.resume{
  position:fixed;bottom:1.3rem;left:50%;transform:translateX(-50%);z-index:45;
  background:var(--paper-deep);border:1px solid var(--rule);border-radius:999px;
  padding:.6rem 1.3rem;font-family:inherit;font-size:.85rem;color:var(--ink);
  box-shadow:0 8px 28px var(--shadow);cursor:pointer;white-space:nowrap;
  transition:opacity .4s,border-color .2s;
}
.resume:hover{border-color:var(--accent);color:var(--accent)}
.resume.fade{opacity:0;pointer-events:none}

.cover{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5rem 1.4rem 3rem}
.cover .vtitle{display:flex;flex-direction:column;align-items:center;gap:.5em;font-size:3.2rem;font-weight:600;line-height:1;padding:1.3rem 1rem;border:1px solid var(--rule);color:var(--ink)}
.cover .frame{display:inline-block;border:1px solid var(--accent);padding:.45rem;background:color-mix(in srgb, var(--paper) 60%, transparent);box-shadow:0 10px 40px var(--shadow)}
.cover .sub{margin-top:2.2rem;color:var(--ink-soft);font-size:.88rem;letter-spacing:.35em;text-indent:.35em}
.cover .hint{margin-top:3.5rem;font-size:.78rem;color:var(--ink-soft);letter-spacing:.15em}
.cover .hint .down{display:block;margin-top:.6rem;color:var(--accent)}
.nowrap{white-space:nowrap}
.continue{
  margin-top:2.4rem;display:inline-block;border:1px solid var(--accent);border-radius:999px;
  padding:.6rem 1.5rem;font-size:.88rem;color:var(--accent);letter-spacing:.08em;
  transition:background .2s,color .2s;
}
.continue:hover{background:var(--accent);color:var(--paper)}
.continue[hidden]{display:none}

.toc{max-width:46em;margin:0 auto;padding:1rem 1.4rem 5rem}
.intro{max-width:33.5em;margin:0 auto 4.5rem;color:var(--ink-soft);font-size:.95rem;text-align:justify;text-justify:inter-ideograph;text-indent:2em;line-height:2.1}
.part-title{text-align:center;font-size:1.5rem;font-weight:600;letter-spacing:.8em;text-indent:.8em;margin:1rem 0 .6rem}
.part-meta{text-align:center;font-size:.78rem;color:var(--ink-soft);letter-spacing:.2em;margin-bottom:2.6rem}
.part + .part{margin-top:5rem}
.group{margin-bottom:3.2rem}
.group h2{font-size:1.05rem;font-weight:600;letter-spacing:.35em;color:var(--accent);display:flex;align-items:center;gap:1rem}
.group h2::after{content:"";flex:1;height:1px;background:var(--rule)}
.group .gdesc{font-size:.8rem;color:var(--ink-soft);margin:.4rem 0 1.3rem;letter-spacing:.08em}
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5em,1fr));gap:.7rem}
.bk{
  position:relative;overflow:hidden;
  border:1px solid var(--rule);padding:.95rem 1.1rem;border-radius:3px;
  display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  background:color-mix(in srgb, var(--paper-deep) 55%, transparent);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.bk:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 18px var(--shadow)}
.bk .n{font-size:1.02rem;letter-spacing:.05em}
.bk .t{font-size:.72rem;color:var(--ink-soft);white-space:nowrap}
.bk .prog{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);opacity:.75}
.bk.done{border-color:color-mix(in srgb, var(--accent) 45%, var(--rule))}
.bk.done .n::after{content:"　✓";color:var(--accent);font-size:.78em}
.bk.done .t{color:var(--accent)}
.foot{text-align:center;color:var(--ink-soft);font-size:.75rem;letter-spacing:.15em;padding:2rem 1rem 3rem;border-top:1px solid var(--rule)}

@media (max-width:600px){
  .page{padding-top:5.2rem}
  .book-head h1{font-size:1.9rem}
  .cover .vtitle{font-size:2.5rem}
  .bar .title{display:none}
  .ctrl button{min-width:2.7rem;min-height:2.7rem;font-size:.95rem}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}