:root{
  --bg:#e9e1d4; --ink:#201e1b; --paper:#f8f2e8; --line:#201e1b;
  --accent:#b75a3a; --shadow:0 22px 50px rgba(25,20,15,.18);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Georgia,"Times New Roman",serif}
body{overflow-x:hidden}
button{font:inherit;color:inherit}
.topbar{height:88px;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #b9ae9d;background:rgba(248,242,232,.65);backdrop-filter:blur(10px);position:sticky;top:0;z-index:30}
.eyebrow{font:11px/1.2 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
h1{font-size:19px;letter-spacing:.08em;margin:4px 0 0}
h2{margin:3px 0 0;font-size:24px}
.ghost-btn,.control-btn{border:1px solid var(--line);background:transparent;border-radius:999px;padding:9px 15px;cursor:pointer}
.ghost-btn:hover,.control-btn:hover{background:var(--ink);color:var(--paper)}
main{min-height:calc(100vh - 88px)}
.shelf-view{padding:46px clamp(18px,5vw,80px) 80px}
.intro{max-width:620px;margin-bottom:36px}
.intro p{font-size:clamp(25px,4vw,48px);line-height:1.02;margin:0 0 12px}
.intro small{font:13px/1.5 Arial,sans-serif;opacity:.65}
.book-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;align-items:end}
.book-card{min-height:280px;position:relative;cursor:grab;touch-action:none;user-select:none}
.book-card:active{cursor:grabbing}
.book-cover{height:245px;padding:24px 20px;display:flex;flex-direction:column;justify-content:space-between;background:var(--cover,#6f7761);box-shadow:var(--shadow);transform:perspective(800px) rotateY(-8deg);transition:.25s;position:relative;overflow:hidden}
.book-card:hover .book-cover{transform:perspective(800px) rotateY(-2deg) translateY(-5px)}
.book-cover:after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.35);pointer-events:none}
.book-cover .num{font:10px Arial,sans-serif;letter-spacing:.18em;color:#fff;opacity:.75}
.book-cover strong{font-size:27px;line-height:1.02;color:#fff;max-width:130px}
.book-meta{font:11px/1.3 Arial,sans-serif;letter-spacing:.05em;margin-top:9px;opacity:.65}
.reader{position:relative;min-height:calc(100vh - 88px);padding:20px 20px 35px;display:flex;flex-direction:column}
.hidden{display:none!important}
.reader-head{display:grid;grid-template-columns:50px 1fr 50px;align-items:center;max-width:900px;width:100%;margin:auto}
.round-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer}
.reader-head .round-btn:last-child{justify-self:end}
.book-stage{height:min(67vh,620px);min-height:390px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.book3d{width:min(820px,88vw);aspect-ratio:1.48/1;position:relative;transform-style:preserve-3d;cursor:grab;filter:drop-shadow(0 30px 25px rgba(20,15,10,.22))}
.book3d:active{cursor:grabbing}
.page{position:absolute;top:0;width:50%;height:100%;background:var(--paper);border:1px solid #c9bcaa;overflow:hidden;box-shadow:inset 0 0 22px rgba(0,0,0,.06)}
.page-left{left:0;transform-origin:right center;border-radius:7px 0 0 7px}
.page-right{right:0;transform-origin:left center;border-radius:0 7px 7px 0}
.page-art{position:absolute;inset:0}
.page-left .page-art{background:linear-gradient(145deg,#f7eddb,#d8c5a8)}
.page-right .page-art{background:linear-gradient(35deg,#eee1ca,#faf5ea)}
.pop-layer{position:absolute;left:50%;top:0;width:50%;height:100%;transform:translateZ(42px);pointer-events:none}
.pop-layer:before,.pop-layer:after{content:"";position:absolute;pointer-events:none}
.pop-layer:before{left:18%;bottom:14%;width:55%;height:58%;background:var(--pop,#b75a3a);clip-path:polygon(50% 0,100% 85%,75% 100%,0 90%,20% 30%);filter:drop-shadow(8px 12px 5px rgba(0,0,0,.18))}
.pop-layer:after{left:37%;bottom:18%;width:22%;height:42%;background:#f1d6a9;clip-path:polygon(50% 0,100% 80%,50% 100%,0 80%)}
.page-number{position:absolute;bottom:12px;right:16px;font:10px Arial,sans-serif;opacity:.45}
.reader-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin:5px auto 0}
#pageHint{font:11px Arial,sans-serif;opacity:.55;min-width:170px;text-align:center}
.mobile-tip{font:10px Arial,sans-serif;opacity:.45;text-align:center;margin:14px 0 0}
.opening .page-left{animation:turnLeft .7s ease forwards}
.opening .page-right{animation:turnRight .7s ease forwards}
@keyframes turnLeft{to{transform:rotateY(-25deg)}}
@keyframes turnRight{to{transform:rotateY(25deg)}}
@media(max-width:650px){
  .topbar{height:72px;padding:13px 15px}.topbar h1{font-size:15px}.ghost-btn{padding:7px 11px}
  main{min-height:calc(100vh - 72px)}.shelf-view{padding:30px 15px 55px}
  .book-grid{grid-template-columns:repeat(2,1fr);gap:15px}.book-card{min-height:225px}.book-cover{height:195px;padding:18px 15px}.book-cover strong{font-size:21px}
  .reader{min-height:calc(100vh - 72px);padding:14px 10px 25px}.reader-head{grid-template-columns:42px 1fr 42px}
  h2{font-size:19px}.book-stage{height:57vh;min-height:330px}.book3d{width:94vw}
  .reader-controls{gap:7px}.control-btn{padding:8px 10px;font-size:12px}#pageHint{min-width:80px;font-size:9px}
}