/* Reader: a paginated "paper book" view. Colours are tokens per theme. */
:root,
html[data-theme="paper"] {
  --desk: #E7E0D2; --page: #FBF8F1; --panel: #FBF8F1; --well: #EAE3D5;
  --ink: #221E19; --muted: #6B6255; --accent: #9E2B25; --on-accent: #FFFFFF;
  --line: #D3C8B5; --gutter: rgba(60, 40, 20, .13); --hl: rgba(158, 43, 37, .14);
  --quote: #3D362E; --active: rgba(128, 110, 90, .16); --shadow: rgba(30, 20, 10, .55);
  color-scheme: light;
}
html[data-theme="sepia"] {
  --desk: #D9CBAE; --page: #F4E9D2; --panel: #F4E9D2; --well: #E6D8BC;
  --ink: #2B2117; --muted: #665641; --accent: #8F2A1F; --on-accent: #FFFFFF;
  --line: #CDBB98; --gutter: rgba(80, 50, 20, .16); --hl: rgba(143, 42, 31, .15);
  --quote: #43362A; --active: rgba(110, 85, 50, .16); --shadow: rgba(40, 25, 10, .5);
  color-scheme: light;
}
html[data-theme="night"] {
  --desk: #15130F; --page: #24211C; --panel: #2B2822; --well: #1B1915;
  --ink: #E6DFD2; --muted: #A79F92; --accent: #E0796F; --on-accent: #1A1512;
  --line: #3E3A33; --gutter: rgba(0, 0, 0, .42); --hl: rgba(224, 121, 111, .24);
  --quote: #CFC7B9; --active: rgba(255, 240, 220, .1); --shadow: rgba(0, 0, 0, .7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body.reader-page {
  min-height: 100vh; background: var(--desk); color: var(--ink);
  font-family: 'IBM Plex Sans', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; transition: background .3s, color .3s;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--panel); padding: 8px 12px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; height: 56px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--desk);
}
.tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 14px;
  cursor: pointer; text-decoration: none; justify-content: center;
}
.tool:hover { background: var(--active); }
.tool[aria-pressed="true"] { background: var(--active); }
.tool.back { padding-left: 6px; }
.aa { font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; font-weight: 600; }
.tb-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 12px; overflow: hidden; white-space: nowrap; }
.tb-book { font-family: 'Noto Serif SC', 'Source Serif 4', serif; font-weight: 600; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tb-ch { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.tools { display: flex; gap: 2px; }

/* ---------- no-JS / source article ---------- */
.book-src {
  max-width: 680px; margin: 24px auto 80px; padding: 48px 40px; background: var(--page);
  font-family: 'Noto Serif SC', 'Source Serif 4', serif; font-size: 18px; line-height: 1.9;
  box-shadow: 0 20px 40px -30px var(--shadow);
}
.book-src img { max-width: 100%; height: auto; }
html.reader-on .book-src { display: none; }

/* ---------- stage ---------- */
.stage {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 10px; padding: var(--stage-pad, 24px) 12px 0; height: calc(100dvh - 56px); overflow: hidden;
}
.book { position: relative; width: var(--book-w); height: var(--page-h); flex-shrink: 0; }
.spread {
  position: relative; display: flex; width: 100%; height: 100%; perspective: 2800px;
  box-shadow: 0 30px 40px -28px var(--shadow), 0 2px 4px rgba(30, 20, 10, .12); border-radius: 3px;
}
.view { display: flex; width: 100%; height: 100%; }

.page {
  position: relative; flex: 0 0 var(--page-w); width: var(--page-w); height: var(--page-h);
  background: var(--page); color: var(--ink); overflow: hidden;
}
.page.left { background: linear-gradient(to left, var(--gutter), rgba(0, 0, 0, 0) 44px), var(--page); border-radius: 3px 0 0 3px; }
.page.right { background: linear-gradient(to right, var(--gutter), rgba(0, 0, 0, 0) 44px), var(--page); border-radius: 0 3px 3px 0; }
.single .page.right { background: var(--page); border-radius: 3px; }
.pg-head, .pg-foot {
  position: absolute; left: var(--pad-l); width: var(--col-w); display: flex; color: var(--muted);
  font-family: 'IBM Plex Sans', 'Noto Sans SC', sans-serif; font-size: 12px; letter-spacing: .1em;
  white-space: nowrap; overflow: hidden;
}
.pg-head { top: calc(var(--pad-t) - 34px); display: block; text-overflow: ellipsis; }
.page.right .pg-head { text-align: right; padding-left: 40px; }
.pg-foot { bottom: calc(var(--pad-b) - 36px); justify-content: center; font-family: 'Source Serif 4', serif; font-size: 13px; letter-spacing: 0; }
.pg-body { position: absolute; top: var(--pad-t); left: var(--pad-l); width: var(--col-w); height: var(--col-h); overflow: hidden; }
.page.endpaper { background: var(--cloth, #2F4A3A); }
.page.endpaper::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, rgba(0, 0, 0, 0) 2px 7px);
}

/* ---------- typeset text (shared by pages and the measuring box) ---------- */
.cols {
  width: var(--col-w); height: var(--col-h); column-width: var(--col-w); column-gap: var(--gap);
  column-fill: auto; font-size: var(--fs); line-height: 1.9; text-align: justify;
  font-family: 'Noto Serif SC', 'Source Serif 4', serif; hyphens: auto; overflow-wrap: break-word;
}
[data-lang="en"] .cols { font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, serif; line-height: 1.62; }
.cols p { margin: 0 0 .45em; text-indent: 2em; orphans: 2; widows: 2; }
[data-lang="en"] .cols p { margin: 0; text-indent: 1.4em; }
[data-lang="en"] .cols h3 + p, [data-lang="en"] .cols .ch-open + p, [data-lang="en"] .cols figure + p,
[data-lang="en"] .cols blockquote + p, [data-lang="en"] .cols .scene + p, [data-lang="en"] .cols ul + p { text-indent: 0; }
.cols h3 { margin: 1.1em 0 .55em; font-size: 1.1em; font-weight: 600; line-height: 1.5; break-after: avoid; letter-spacing: .02em; }
.cols .ch-open { text-align: center; padding-top: calc(var(--col-h) * .16); margin-bottom: 2.4em; break-inside: avoid; }
.cols .ch-label { margin: 0; text-indent: 0; font-family: 'IBM Plex Sans', 'Noto Sans SC', sans-serif; font-size: .7em; letter-spacing: .4em; color: var(--accent); text-transform: uppercase; }
.cols .ch-title { margin: .5em 0 .7em; font-size: 1.75em; line-height: 1.35; font-weight: 700; letter-spacing: .03em; text-align: center; }
.cols .ch-sum { margin: 0 auto; max-width: 24em; text-indent: 0; text-align: center; font-size: .84em; line-height: 1.85; color: var(--muted); }
.cols blockquote { margin: .7em 1.2em .9em; font-size: .92em; line-height: 1.8; color: var(--quote); }
[data-lang="en"] .cols blockquote { line-height: 1.55; }
.cols blockquote p { text-indent: 0; margin: 0 0 .35em; }
.cols .q-date { text-align: right; color: var(--muted); font-size: .9em; }
.cols figure { margin: .9em 0 1em; break-inside: avoid; text-align: center; }
.cols figure img { display: block; margin: 0 auto; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); background: var(--well); }
.cols figcaption { margin-top: .55em; font-family: 'IBM Plex Sans', 'Noto Sans SC', sans-serif; font-size: .7em; line-height: 1.6; color: var(--muted); text-align: center; text-indent: 0; }
.cols ul { margin: .4em 0 .8em; padding-left: 1.3em; }
.cols li { margin-bottom: .35em; }
.cols .scene { text-align: center; text-indent: 0; color: var(--muted); letter-spacing: .5em; margin: .8em 0; }
.cols .fns { margin-top: 1.6em; padding-top: .7em; border-top: 1px solid var(--line); font-size: .76em; line-height: 1.7; color: var(--muted); }
.cols .fns ol { margin: 0; padding-left: 1.4em; }
.cols .fns li { margin-bottom: .4em; }
.cols .fnref a, .book-src .fnref a { color: var(--accent); text-decoration: none; font-family: 'IBM Plex Sans', sans-serif; font-size: .72em; padding: 0 2px; }
.cols .tts-on { background: var(--hl); box-shadow: 0 0 0 3px var(--hl); border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.titlepage { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 0 6%; }
.titlepage .tp-author { margin: 0; font-size: 13px; letter-spacing: .24em; color: var(--muted); }
.titlepage .tp-title { margin: 0; font-family: 'Noto Serif SC', 'Source Serif 4', serif; font-size: 34px; line-height: 1.3; font-weight: 700; letter-spacing: .03em; }
.titlepage .tp-sub { margin: 0; font-family: 'Noto Serif SC', 'Source Serif 4', serif; font-size: 16px; color: var(--quote); line-height: 1.6; }
.titlepage .tp-desc { margin: 26px 0 0; font-family: 'Noto Serif SC', 'Source Serif 4', serif; font-size: 14px; line-height: 1.9; color: var(--muted); max-width: 26em; text-align: justify; }
.titlepage .tp-models { margin: 10px 0 0; font-size: 12px; color: var(--muted); letter-spacing: .05em; }
.titlepage .tp-models::before { content: ""; display: block; width: 32px; height: 1px; background: var(--line); margin: 0 auto 14px; }

/* ---------- turning ---------- */
.leaf { position: absolute; top: 0; width: var(--page-w); height: 100%; transform-style: preserve-3d; z-index: 5; }
.leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf .face .page { position: absolute; inset: 0; }
.leaf .back { transform: rotateY(180deg); }
.leaf-next { right: 0; transform-origin: left center; animation: turnNext var(--turn-ms) cubic-bezier(.45, .05, .25, 1) forwards; }
.leaf-prev { left: 0; transform-origin: right center; animation: turnPrev var(--turn-ms) cubic-bezier(.45, .05, .25, 1) forwards; }
.single .leaf-next { left: 0; right: auto; transform-origin: left center; }
.single .leaf-in { left: 0; transform-origin: left center; animation: turnIn var(--turn-ms) cubic-bezier(.45, .05, .25, 1) forwards; }
.shade { position: absolute; inset: 0; pointer-events: none; animation: shade var(--turn-ms) ease forwards; }
.shade-r { background: linear-gradient(to left, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 70%); }
.shade-l { background: linear-gradient(to right, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 70%); }
@keyframes turnNext { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes turnPrev { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
@keyframes turnIn { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } }
@keyframes shade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.slide-next { animation: slideNext .36s ease-out both; }
.slide-prev { animation: slidePrev .36s ease-out both; }
@keyframes slideNext { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slidePrev { from { transform: translateX(-48px); opacity: 0; } to { transform: none; opacity: 1; } }

.edge {
  position: absolute; top: 0; bottom: 0; width: 52px; z-index: 6; border: 0; background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.edge svg { opacity: 0; transition: opacity .2s; width: 28px; height: 28px; }
.edge:hover svg, .edge:focus-visible svg { opacity: .75; }
.edge-l { left: 0; } .edge-r { right: 0; }
.edge-l:hover { background: linear-gradient(to right, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0)); }
.edge-r:hover { background: linear-gradient(to left, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0)); }

.ribbon {
  position: absolute; top: -5px; right: 6px; z-index: 7; width: 44px; height: 78px; padding: 0;
  border: 0; background: transparent; cursor: pointer; display: flex; justify-content: center;
}
.ribbon span {
  display: block; width: 24px; height: 40px; background: var(--line);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); transition: height .2s, background .2s;
}
.ribbon:hover span { height: 48px; }
.ribbon[aria-pressed="true"] span { height: 72px; background: var(--accent); }

/* ---------- footer & tts ---------- */
.foot, .ttsbar { width: var(--book-w); max-width: 100%; min-height: 56px; }
.foot { display: flex; align-items: center; gap: 12px; }
.prog { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prog-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.prog-row span:first-child { overflow: hidden; text-overflow: ellipsis; }
#prog-range { width: 100%; accent-color: var(--accent); margin: 4px 0 0; height: 20px; }
.ttsbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 24px -16px var(--shadow);
}
.tts-btns { display: flex; align-items: center; gap: 2px; }
.round {
  width: 44px; height: 44px; border: 0; border-radius: 22px; background: transparent; color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.round:hover { background: var(--active); }
.round.play { width: 48px; height: 48px; border-radius: 24px; background: var(--accent); color: var(--on-accent); }
.round.play .i-pause, .round.play.on .i-play { display: none; }
.round.play.on .i-pause { display: block; }
.tts-now { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#tts-status { font-size: 12px; color: var(--muted); }
#tts-line { font-family: 'Noto Serif SC', 'Source Serif 4', serif; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rates { display: flex; gap: 2px; }
.rates button { min-width: 44px; height: 32px; padding: 0 6px; border: 1px solid var(--line); border-radius: 16px; background: transparent; font-size: 12px; cursor: pointer; }
.rates button[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }
.voice { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.voice select { max-width: 170px; height: 34px; border: 1px solid var(--line); border-radius: 6px; background: var(--page); color: var(--ink); font-size: 12px; }

/* ---------- panels ---------- */
.scrim { position: fixed; inset: 56px 0 0 0; z-index: 40; background: rgba(20, 15, 10, .3); }
.scrim.clear { background: transparent; }
.drawer {
  position: fixed; top: 56px; left: 0; bottom: 0; z-index: 41; width: 360px; max-width: 92vw;
  background: var(--panel); border-right: 1px solid var(--line); box-shadow: 12px 0 30px -18px var(--shadow);
  display: flex; flex-direction: column; animation: drawerIn .22s ease-out;
}
@keyframes drawerIn { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.tabs { display: flex; align-items: center; gap: 4px; padding: 8px 8px 0 16px; border-bottom: 1px solid var(--line); }
.tabs [role="tab"] { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--muted); }
.tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); }
.tabs .round { margin-left: auto; }
.toc-list, .marks-list { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 8px 8px 24px; list-style: none; }
.toc-list button, .mark-go {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0;
  border-radius: 6px; background: transparent; text-align: left; cursor: pointer;
}
.toc-list button:hover, .mark-go:hover { background: var(--active); }
.toc-list button[aria-current="true"] { background: var(--active); font-weight: 600; }
.toc-t { flex: 1 1 auto; font-family: 'Noto Serif SC', 'Source Serif 4', serif; font-size: 15px; line-height: 1.5; }
.toc-p { font-size: 12px; color: var(--muted); }
.mark-row { display: flex; align-items: flex-start; gap: 2px; }
.mark-go { flex-direction: column; align-items: stretch; gap: 4px; }
.mark-where { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mark-where::before { content: ""; width: 8px; height: 12px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
.mark-snip { font-family: 'Noto Serif SC', 'Source Serif 4', serif; font-size: 14px; line-height: 1.7; }
.empty { margin: 24px 12px; font-size: 14px; line-height: 1.8; color: var(--muted); }

.settings {
  position: fixed; top: 62px; right: 16px; z-index: 41; width: 320px; max-width: calc(100vw - 32px);
  padding: 20px; display: flex; flex-direction: column; gap: 18px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 36px -18px var(--shadow);
}
.set-group { display: flex; flex-direction: column; gap: 8px; }
.set-label { font-size: 13px; font-weight: 600; }
.set-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; background: var(--well); border-radius: 8px; }
.seg button { min-height: 40px; border: 0; border-radius: 6px; background: transparent; font-size: 13px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--page); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.sizes { display: flex; align-items: center; gap: 8px; }
.sizes button { width: 48px; height: 40px; border: 1px solid var(--line); border-radius: 6px; background: transparent; font-family: 'Noto Serif SC', serif; font-size: 14px; cursor: pointer; }
.sizes button.big { font-size: 19px; }
#fs-val { flex: 1 1 auto; text-align: center; font-size: 14px; }
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.themes button { min-height: 52px; border: 2px solid var(--line); border-radius: 8px; font-family: 'Noto Serif SC', serif; font-size: 13px; cursor: pointer; }
.themes button[aria-pressed="true"] { border-color: var(--accent); }
.sw-paper { background: #FBF8F1; color: #221E19; }
.sw-sepia { background: #F4E9D2; color: #2B2117; }
.sw-night { background: #24211C; color: #E6DFD2; }

.fn-pop {
  position: fixed; z-index: 45; max-width: min(360px, calc(100vw - 24px)); padding: 14px 16px; background: var(--panel);
  color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 16px 32px -16px var(--shadow);
  font-family: 'Noto Serif SC', 'Source Serif 4', serif; font-size: 14px; line-height: 1.75;
}
.toast {
  position: fixed; left: 50%; top: 72px; z-index: 50; transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  padding: 10px 18px; background: var(--ink); color: var(--desk); border-radius: 20px; font-size: 13px; white-space: nowrap;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.measure { position: absolute; left: -20000px; top: 0; visibility: hidden; pointer-events: none; }

/* ---------- small screens ---------- */
@media (max-width: 899px) {
  .tool-label { display: none; }
  .tool { padding: 0 10px; }
  .tb-ch { display: none; }
  .edge { display: none; }
  .ribbon { right: 4px; }
  .single .pg-head { text-align: left; padding: 0 40px 0 0; }
  .foot .tool-label { display: none; }
  .rates button { min-width: 40px; }
  .voice span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .leaf, .slide-next, .slide-prev, .shade, .drawer { animation-duration: 1ms !important; }
}