*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,sans-serif;background:radial-gradient(circle at top,#fbf8f2,#ece2d4);color:#2d2623}body{overflow:hidden}.app{height:100dvh;display:grid;grid-template-rows:auto 1fr auto}header{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:rgba(255,251,246,.94);border-bottom:1px solid #d9cabb;backdrop-filter:blur(10px);z-index:10}.brand{font-family:Georgia,serif;font-size:24px;letter-spacing:.18em}.sub{font-family:Georgia,serif;font-size:9px;letter-spacing:.28em;color:#7b2027;margin-top:4px}.tools{display:flex;gap:8px;align-items:center}.tools button,.tools a{height:34px;padding:0 10px;border:1px solid #ccb8a5;background:#fff;border-radius:9px;color:#4f4038;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.tools span{font-size:12px;min-width:42px;text-align:center}main{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px 58px}.stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:auto;touch-action:pan-y pinch-zoom}.book{position:relative;height:100%;max-height:100%;aspect-ratio:10.5/13;perspective:2200px;transform-origin:center;transition:transform .2s}.page{position:absolute;inset:0;background:#f8f2e9;box-shadow:0 24px 60px rgba(45,30,20,.22);transform-origin:left center;transition:transform .58s cubic-bezier(.2,.75,.2,1),opacity .35s ease;backface-visibility:hidden}.page img{width:100%;height:100%;object-fit:contain;display:block}.current{z-index:3;transform:rotateY(0);opacity:1}.hidden-left{z-index:1;transform:rotateY(-180deg);opacity:0}.hidden-right{z-index:1;transform:rotateY(180deg);opacity:0}.turn-f{z-index:5;transform:rotateY(-178deg)}.turn-b{z-index:5;transform-origin:right center;transform:rotateY(178deg)}.nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:62px;border:0;border-radius:14px;background:rgba(69,53,46,.75);color:#fff;font-size:38px;cursor:pointer;z-index:8}.left{left:10px}.right{right:10px}.nav:disabled{opacity:.2;cursor:default}footer{display:flex;justify-content:center;gap:18px;padding:7px 12px 11px;font-size:12px;color:#6b5d55}footer b{color:#7b2027}@media(max-width:700px){header{padding:9px 10px}.brand{font-size:18px}.sub{font-size:7px}.tools a,#full{display:none}main{padding:8px 4px}.book{height:auto;width:min(93vw,calc(84dvh * .8077))}.nav{width:36px;height:50px;font-size:30px;background:rgba(69,53,46,.5)}.left{left:3px}.right{right:3px}footer span:last-child{display:none}}