:root{--ink:#14281d;--soft:#44584b;--clover:#2e9e5b;--deep:#1d6b3d;--paper:#fbf6ec;--font:'Anuphan',system-ui,sans-serif;--display:'Noto Sans Thai Looped','Anuphan',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(80% 60% at 50% 0,#fff8e6,transparent 70%),linear-gradient(180deg,#efe2cb,#d9c7a8);color:var(--ink);font-family:var(--font);display:flex;flex-direction:column}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top)) 16px 8px}
.back{text-decoration:none;font-weight:700;color:var(--deep);background:rgba(255,255,255,.7);padding:8px 14px;border-radius:999px}
.count{margin:0;font-size:14px;font-weight:600;color:var(--soft)}
.reader{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 16px 20px;gap:14px}
.stage{display:flex;align-items:center;gap:12px;width:100%;justify-content:center}
.book{position:relative;height:min(calc(100dvh - 190px),900px);max-width:calc(100vw - 32px);aspect-ratio:1200/1699;perspective:2000px;outline:none;touch-action:pan-y;user-select:none}
.book:focus-visible{outline:3px solid #e9b949;outline-offset:6px;border-radius:6px}
.page{position:absolute;inset:0;background:#fff;border-radius:4px 10px 10px 4px;box-shadow:0 18px 40px rgba(40,25,5,.28),inset 6px 0 12px rgba(0,0,0,.06);transform-origin:left center;transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .7s;overflow:hidden;backface-visibility:hidden}
.page img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.page:not(.current){box-shadow:none}
.page.turned{transform:rotateY(-105deg);opacity:0;pointer-events:none}
.instant .page{transition:none}
.lock{background:linear-gradient(160deg,#fffdf6,#f3e6c6);display:flex;align-items:center;justify-content:center;text-align:center}
.lock-inner{padding:28px 24px;max-width:420px}
.lock-icon{width:56px;height:56px;fill:var(--deep);stroke:var(--deep);margin-bottom:8px}
.lock h2{font:800 clamp(24px,4vw,30px)/1.3 var(--display);margin:4px 0 10px}
.lock p{color:var(--soft);margin:0 0 14px;line-height:1.6}
.eyebrow{font-size:14px;font-weight:700;color:var(--deep)!important;margin:0!important}
.actions{display:flex;flex-direction:column;gap:10px;margin:16px 0 10px}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:999px;font:700 16px var(--font);text-decoration:none}
.btn.primary{background:var(--clover);color:#fff;box-shadow:0 8px 22px rgba(46,158,91,.35)}
.btn.ghost{background:rgba(20,40,29,.08);color:var(--ink)}
.btn:focus-visible,.nav:focus-visible,.thumbs button:focus-visible,.back:focus-visible{outline:3px solid #e9b949;outline-offset:3px}
.fine{font-size:14px}.fine a{color:var(--deep);font-weight:700}
.nav{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.8);font-size:30px;line-height:1;color:var(--ink);cursor:pointer;box-shadow:0 6px 18px rgba(40,25,5,.15)}
.nav:disabled{opacity:.3;cursor:default}
.thumbs{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;max-width:600px}
.thumbs button{min-width:36px;height:36px;border-radius:10px;border:1px solid rgba(20,40,29,.15);background:rgba(255,255,255,.7);font:700 14px var(--font);color:var(--ink);cursor:pointer}
.thumbs button[aria-current="true"]{background:var(--ink);color:#fff}
.empty{margin:0;font-weight:600;color:var(--soft)}
@media (max-width:700px){.nav{position:fixed;bottom:18px;z-index:5}.nav.prev{left:16px}.nav.next{right:16px}.book{height:min(calc(100dvh - 250px),calc((100vw - 32px) * 16 / 9))}.reader{padding-bottom:84px;justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){.page{transition:none}}