@font-face { font-family: 'Reader GenWan'; src: url('/fonts/genwan-m-v1.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Reader Noto Serif'; src: url('/fonts/noto-serif-regular-v1.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root {
  color-scheme: light;
  --desk: #c8c0b1; --desk-deep: #aaa18f; --paper: #fbf8ef; --paper-back: #eee8da;
  --ink: #2e2b27; --muted: #706a60; --line: #c8bfaf; --accent: #765744;
  --page-width: min(calc(100vw - 28px), 470px); --page-height: min(calc(100dvh - 132px), 720px);
  --font-size: 20px; --page-pad-x: clamp(26px, 8vw, 42px); --page-pad-y: clamp(30px, 7vh, 52px);
}
:root[data-flip-theme="parchment"] { --desk:#bcae95; --desk-deep:#95866d; --paper:#f2e5c9; --paper-back:#e3d3b3; --ink:#45392d; --muted:#75644f; --line:#bfaa85; --accent:#81482d; }
:root[data-flip-theme="night"] { color-scheme:dark; --desk:#171613; --desk-deep:#090908; --paper:#25221d; --paper-back:#181713; --ink:#e9dec9; --muted:#b6aa96; --line:#514a3e; --accent:#deb17d; }
* { box-sizing: border-box; }
html, body { width:100%; height:100%; overflow:hidden; }
body { margin:0; background: radial-gradient(circle at 50% 35%, var(--desk), var(--desk-deep)); color:var(--ink); font-family:system-ui,"Noto Sans TC",sans-serif; touch-action:none; }
button, select, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
.flip-reader { min-height:100dvh; display:grid; grid-template-rows:56px 1fr 58px; padding:max(0px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.flip-header, .flip-footer { width:var(--page-width); margin:auto; display:flex; align-items:center; justify-content:space-between; color:#fff; text-shadow:0 1px 2px #0008; }
.flip-header a, .flip-header button, .flip-footer button { border:0; background:transparent; color:inherit; text-decoration:none; padding:10px 4px; cursor:pointer; }
.flip-header button { font-size:14px; }
.book-stage { display:grid; place-items:center; min-height:0; perspective:1800px; }
.page-stack { position:relative; width:var(--page-width); height:var(--page-height); max-height:calc(100dvh - 132px); transform-style:preserve-3d; filter:drop-shadow(0 16px 22px #392e2144); }
.paper { position:absolute; inset:0; overflow:hidden; padding:var(--page-pad-y) var(--page-pad-x); background:linear-gradient(105deg,var(--paper) 0%,var(--paper) 91%,color-mix(in srgb,var(--paper),#000 5%) 100%); color:var(--ink); border:1px solid color-mix(in srgb,var(--line),transparent 25%); border-radius:2px 7px 7px 2px; transform-style:preserve-3d; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.paper-under { z-index:1; }
.paper-current { z-index:2; transform-origin:left center; will-change:transform,filter; }
.paper-current::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--fold,0); background:linear-gradient(90deg,#0002 0%,transparent 24%,transparent 72%,#fff7 92%,#0003 100%); mix-blend-mode:multiply; }
.paper-current.is-flipping { transition:transform .42s cubic-bezier(.22,.68,.25,1),filter .42s ease; }
.paper-current.is-returning { transition:transform .3s cubic-bezier(.2,.8,.3,1); }
.paper-content { position:absolute; inset:var(--page-pad-y) var(--page-pad-x); width:auto; height:auto; writing-mode:vertical-rl; text-orientation:mixed; font-family:'Reader GenWan','Reader Noto Serif','Noto Serif TC',serif; font-size:var(--font-size); font-weight:500; line-height:1.9; letter-spacing:.035em; overflow:hidden; }
.paper-content p { margin:0 0 0 1em; text-indent:1em; }
.paper-content .chapter-heading { margin-left:1.4em; font-size:1.3em; font-weight:500; letter-spacing:.11em; text-indent:0; }
.paper-content figure { margin:0 0 0 1.2em; width:calc(var(--page-height) - 2 * var(--page-pad-y)); height:calc(var(--page-width) - 2 * var(--page-pad-x)); display:grid; place-items:center; writing-mode:horizontal-tb; }
.paper-content img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.paper-content.image-page { display:grid; place-items:center; writing-mode:horizontal-tb; overflow:hidden; }
.paper-content.image-page figure { position:relative; width:100%; height:100%; margin:0; }
.paper-content.image-page img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.page-number { position:absolute; left:18px; bottom:13px; color:var(--muted); font-size:11px; writing-mode:horizontal-tb; }
.loading { position:absolute; z-index:5; inset:0; display:grid; place-items:center; background:var(--paper); color:var(--muted); }
.gesture-hint { position:absolute; bottom:68px; left:50%; z-index:8; translate:-50% 0; margin:0; padding:7px 12px; border-radius:999px; background:#18130dbb; color:#fff; font-size:12px; transition:opacity .3s; pointer-events:none; }
.gesture-hint.dismissed { opacity:0; }
.flip-footer { justify-content:center; gap:24px; }
.flip-footer button { min-width:42px; min-height:42px; font-size:30px; }
#page-status { min-width:112px; font-size:13px; }
.reader-menu { position:fixed; z-index:30; left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); max-width:520px; max-height:min(88dvh,760px); overflow:auto; margin:auto; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--paper); color:var(--ink); box-shadow:0 16px 60px #0007; touch-action:pan-y; }
.menu-heading { display:flex; align-items:start; justify-content:space-between; gap:15px; margin-bottom:18px; }
.menu-heading strong { line-height:1.4; }
.menu-heading button { border:0; background:transparent; color:inherit; font-size:28px; }
.reader-menu label { display:grid; gap:8px; margin:14px 0; color:var(--muted); font-size:13px; }
.reader-menu select { width:100%; padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink); }
.reader-menu input { width:100%; accent-color:var(--accent); }
.flip-toc-search input { padding:10px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink); }
.flip-toc-list { max-height:38dvh; overflow:auto; border-block:1px solid var(--line); touch-action:pan-y; }
.flip-toc-volume { border-bottom:1px solid var(--line); }
.flip-toc-volume:last-child { border-bottom:0; }
.flip-toc-volume summary { display:flex; justify-content:space-between; gap:10px; padding:11px 3px; font-weight:700; cursor:pointer; }
.flip-toc-volume summary small { color:var(--muted); font-weight:400; }
.flip-toc-chapters { display:grid; gap:3px; padding:0 0 9px 8px; }
.flip-toc-chapter { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:38px; padding:7px 9px; border:0; border-radius:7px; background:transparent; color:var(--ink); text-align:left; }
.flip-toc-chapter.current { background:color-mix(in srgb,var(--accent),transparent 82%); color:var(--accent); font-weight:700; }
.flip-toc-chapter small { padding:2px 6px; border-radius:999px; background:color-mix(in srgb,var(--line),transparent 45%); color:var(--muted); }
.flip-toc-empty { padding:18px; color:var(--muted); text-align:center; }
.flip-settings { padding-top:4px; }
.reader-menu fieldset { display:flex; gap:8px; margin:16px 0 0; border:0; padding:0; }
.reader-menu legend { margin-bottom:8px; color:var(--muted); font-size:13px; }
.reader-menu fieldset button { flex:1; padding:9px 4px; border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--ink); }
.reader-menu fieldset button[aria-pressed="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.menu-backdrop { position:fixed; z-index:29; inset:0; background:#0006; }
.measure-page { position:fixed; left:-10000px; top:0; visibility:hidden; width:var(--page-width); height:var(--page-height); padding:var(--page-pad-y) var(--page-pad-x); }
.measure-page .paper-content { position:absolute; inset:var(--page-pad-y) var(--page-pad-x); width:auto; height:auto; }
[hidden] { display:none !important; }
@media (max-height:560px) { :root { --page-height:calc(100dvh - 116px); --page-pad-y:22px; } .flip-reader{grid-template-rows:48px 1fr 48px}.gesture-hint{bottom:55px} }
@media (prefers-reduced-motion:reduce) { .paper-current.is-flipping,.paper-current.is-returning { transition-duration:.01ms; } }