:root { color-scheme:light; font-family:"PingFang SC","Microsoft YaHei",sans-serif; color:#563522; background:#fbf3e9; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:radial-gradient(ellipse at 90% 0,#f8dcc9,transparent 46%),radial-gradient(ellipse at 0 80%,#f8e2d4,transparent 40%),#fbf3e9; }
main { max-width:920px; margin:auto; padding:clamp(24px,5vw,58px) clamp(14px,4vw,40px) 24px; text-align:center; }
.eyebrow { color:#8a4f35; font:600 .74rem Georgia,serif; letter-spacing:.24em; margin:0 0 14px; }
h1 { font-family:"Songti SC","Noto Serif CJK SC",serif; font-size:clamp(2rem,6vw,3.55rem); letter-spacing:.09em; margin:0; }
.intro { margin:12px 0 27px; font-size:.9rem; letter-spacing:.14em; color:#765341; }
.book { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:clamp(12px,3vw,23px); background:#f8e5d7; box-shadow:0 12px 34px #77492f23; }
.book::-webkit-scrollbar { display:none; }
button { font:inherit; color:inherit; cursor:pointer; }
button:focus-visible,.book:focus-visible { outline:3px solid #a75b38; outline-offset:3px; }
.page { flex:0 0 100%; scroll-snap-align:start; background:none; border:0; padding:0; display:block; cursor:zoom-in; }
.page img { display:block; width:100%; height:auto; }
.navigation { display:flex; align-items:center; justify-content:center; gap:clamp(24px,9vw,90px); margin-top:17px; }
.navigation button,#close { display:grid; place-items:center; width:45px; height:45px; border:1px solid #dcbaa6; border-radius:50%; background:#fff8f1; font-size:1.3rem; }
.navigation button:disabled { opacity:.37; cursor:default; }
.position { display:grid; gap:4px; min-width:120px; }
.position strong { font-family:"Songti SC",serif; font-size:1.15rem; }
.position span { color:#765341; font-size:.72rem; letter-spacing:.12em; font-variant-numeric:tabular-nums; }
.dots { display:flex; justify-content:center; margin:6px auto 0; }
.dot { display:grid; place-items:center; width:38px; height:36px; border:0; background:transparent; padding:0; }
.dot::before { content:""; width:7px; height:7px; border-radius:8px; background:#caa38f; }
.dot[aria-current="true"]::before { width:17px; background:#9c5436; }
.hint,footer { color:#765341; font-size:.75rem; letter-spacing:.1em; }
.hint { margin:2px 0 0; }
footer { margin-top:25px; }
dialog { padding:0; border:0; background:transparent; max-width:96vw; max-height:94dvh; overflow:visible; }
dialog::backdrop { background:#25180fee; }
dialog img { display:block; max-width:96vw; max-height:88dvh; width:auto; height:auto; object-fit:contain; border-radius:8px; }
#close { position:absolute; top:7px; right:7px; z-index:1; font-size:1.55rem; }
body:has(dialog[open]) { overflow:hidden; }