:root{color-scheme:light;--cream:#efe2bd;--paper:#fff8e5;--ink:#3e2918;--muted:#765f43;
--accent:#3f6b45;--line:#b38a47}*{box-sizing:border-box}html,body{margin:0;min-height:100%;
background:var(--cream);color:var(--ink);font-family:"Microsoft YaHei UI","PingFang SC",sans-serif}
body{padding:env(safe-area-inset-top) 0 calc(88px + env(safe-area-inset-bottom))}
header{position:sticky;top:0;z-index:2;padding:13px 18px 11px;background:rgba(255,253,245,.96);
border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.book{font-size:12px;color:var(--muted)}
#page-title{font-weight:700;font-size:16px;margin-top:3px;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}#update-notice{display:none;margin-top:9px;padding:9px 12px;border-radius:9px;
background:#fff3c6;color:var(--ink)}#update-notice.visible{display:flex;align-items:center;gap:8px}
#update-notice button{padding:6px 10px}main{max-width:560px;margin:auto}.page{display:none;
padding:28px 20px 38px;min-height:calc(100vh - 160px)}.page.active{display:block}
.date{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.06em}
.page h1{font-size:25px;line-height:1.35;margin:8px 0 24px}.page h2{font-size:20px;
line-height:1.45;margin:24px 0 12px}.page p,.page blockquote{font-size:17px;line-height:1.9;
margin:0 0 18px}.page blockquote{padding:12px 16px;background:var(--paper);
border-left:3px solid var(--accent)}figure{margin:18px -4px 24px}
.page.image-page figure{display:block;width:calc(100vw - 32px);max-width:none;
margin:18px 0 24px 50%;transform:translateX(-50%);padding:0;overflow:hidden;
border-radius:16px;background:#ffe89a;box-shadow:0 8px 24px #8a746b20}
.page.image-page img{display:block;width:100%;max-width:none;height:auto;margin:0;padding:0;
border:0;background:transparent}
.separator{text-align:center;color:var(--muted);margin:24px}
footer{position:fixed;z-index:3;left:0;right:0;bottom:0;display:grid;
grid-template-columns:auto minmax(150px,1fr) auto;gap:12px;align-items:center;padding:10px 14px
calc(10px + env(safe-area-inset-bottom));background:rgba(255,253,245,.97);
border-top:1px solid var(--line)}button{border:0;border-radius:999px;padding:11px 16px;
background:#ffe89a;color:var(--ink);font-weight:700}button:disabled{opacity:.35}
.progress{text-align:center;font-size:12px;color:var(--muted)}.progress input{display:block;width:100%;
min-width:140px;margin-top:7px;accent-color:var(--accent)}#slider-preview{min-height:16px}
@media(max-width:899px){
body{display:flex;min-height:100dvh;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
main{width:100%;flex:1;touch-action:pan-y}footer{position:sticky;grid-template-columns:1fr;gap:4px;padding:5px 14px
calc(6px + env(safe-area-inset-bottom));transition:opacity .18s ease}
footer>button,#check-update{display:none}.progress{display:grid;grid-template-columns:1fr;gap:2px}
.progress input{order:2;height:12px;margin:0}.progress #counter{order:1;font-size:11px}
#slider-preview{display:none;min-height:0}
footer.controls-visible{grid-template-columns:auto minmax(140px,1fr) auto;gap:8px;padding-top:9px}
footer.controls-visible>button{display:block}
footer.controls-visible .progress{grid-template-columns:1fr auto;column-gap:8px;align-items:center}
footer.controls-visible .progress #counter{grid-column:1}
footer.controls-visible #check-update{display:block;grid-column:2;grid-row:1/3;padding:9px 12px}
footer.controls-visible .progress input{grid-column:1}
}
@media(min-width:900px){main{max-width:820px}.page{padding:38px 64px 48px}
.page.image-page figure{width:max-content;max-width:min(900px,85vw);margin:18px 0 24px 50%;
transform:translateX(-50%)}
.page.image-page img{width:auto;max-width:100%;max-height:72vh}}