:root{--paper:#f7f2e8;--ink:#27231f;--muted:#7c746a;--accent:#183d36;--line:#d9d0c2;--fs:19px}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#d8d2c8;color:var(--ink);font-family:Georgia,"Times New Roman",serif}
body{overscroll-behavior:none}.topbar,.bottombar{position:fixed;left:0;right:0;z-index:10;display:flex;align-items:center;background:rgba(247,242,232,.94);backdrop-filter:blur(12px)}
.topbar{top:0;height:52px;padding:max(4px,env(safe-area-inset-top)) 12px 4px;border-bottom:1px solid rgba(80,65,50,.12)}
.bottombar{bottom:0;height:38px;padding:5px 18px max(5px,env(safe-area-inset-bottom));gap:10px;border-top:1px solid rgba(80,65,50,.10);font:12px system-ui;color:var(--muted)}
.bookmeta{flex:1;text-align:center;line-height:1.1}.bookmeta b{display:block;font:600 13px system-ui;letter-spacing:.08em}.bookmeta span{font:11px system-ui;color:var(--muted)}
.iconbtn{width:34px;height:34px;border:0;background:transparent;font:28px system-ui;color:var(--ink)}.aa{font-size:15px;font-weight:700}
#reader{height:100dvh;overflow:hidden}.page{position:absolute;inset:52px 0 38px;background:var(--paper);padding:22px 25px 44px;overflow:hidden;touch-action:pan-y;transition:opacity .14s ease,transform .14s ease}
.page-inner{height:100%;max-width:680px;margin:auto;display:flex;flex-direction:column;justify-content:flex-start}
.kicker{font:600 11px system-ui;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
h1{font-size:clamp(29px,8vw,44px);line-height:1.02;margin:0 0 24px;color:var(--accent)}p{font-size:var(--fs);line-height:1.56;margin:0 0 1em}
.short{font-size:calc(var(--fs) * 1.04);line-height:1.48}.dialogue{margin-left:1.2em}.english{font-weight:600}.sound{font-style:italic}
.illustration{width:100%;height:min(44vh,390px);object-fit:cover;border-radius:18px;margin:0 0 18px;box-shadow:0 8px 28px rgba(45,35,25,.14)}
.illustration.full{height:100%;margin:0}.caption{font:12px system-ui;color:var(--muted);text-align:center;margin-top:-8px}
.note{background:#fffaf0;border:1px solid #d8cdbb;padding:24px 20px;transform:rotate(-.7deg);box-shadow:0 8px 24px rgba(50,40,30,.10);font-family:"Comic Sans MS","Bradley Hand",cursive;font-size:21px;line-height:1.45;margin:auto 0}
.progress{height:3px;background:#ddd4c6;border-radius:9px;flex:1;overflow:hidden}.progress i{display:block;height:100%;background:var(--accent);transition:width .2s}
.tapzone{position:fixed;z-index:4;top:52px;bottom:38px;width:17%;border:0;background:transparent}.prev{left:0}.next{right:0}
@media(min-width:800px){body{background:#cfc8bd}.page{left:50%;width:min(760px,100%);transform:translateX(-50%);box-shadow:0 0 50px rgba(0,0,0,.08);padding:42px 64px}.topbar,.bottombar{left:50%;width:min(760px,100%);transform:translateX(-50%)}}

.illustration-panel{width:100%;height:min(42vh,360px);border-radius:18px;margin:0 0 18px;background-repeat:no-repeat;background-color:#1b1815;box-shadow:0 8px 28px rgba(45,35,25,.14)}