*{box-sizing:border-box}html,body{margin:0;height:100%;background:#11151d;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden}.app{height:100svh;width:100vw;display:grid;grid-template-rows:1fr auto;background:radial-gradient(circle at 50% 15%,#293040 0%,#11151d 52%,#07090e 100%)}.stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 56px}.book-wrap{height:calc(100svh - 58px);max-height:calc(100svh - 58px);aspect-ratio:1130/2367;max-width:calc(100vw - 130px);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 18px 34px rgba(0,0,0,.55))}.book{position:relative;width:100%;height:100%;background:#000;overflow:hidden;border-radius:5px;transform-origin:center center;transition:transform .25s ease}.page{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#fff;user-select:none;-webkit-user-drag:none}.page.next{opacity:0}.flip-layer{position:absolute;inset:0;pointer-events:none;opacity:0;background-size:100% 100%;background-position:center;background-repeat:no-repeat;transform-origin:left center;box-shadow:0 0 35px rgba(0,0,0,.42)}.book.flipping-next .flip-layer{opacity:1;animation:flipNext .62s ease-in-out forwards}.book.flipping-prev .flip-layer{opacity:1;transform-origin:right center;animation:flipPrev .62s ease-in-out forwards}.book.zoomed{transform:scale(1.55);cursor:zoom-out}.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:70px;border:0;border-radius:12px;background:rgba(255,255,255,.15);color:#fff;font-size:52px;line-height:1;cursor:pointer;backdrop-filter:blur(6px)}.nav:hover{background:rgba(255,255,255,.28)}.nav-left{left:10px}.nav-right{right:10px}.toolbar{height:50px;display:flex;gap:10px;align-items:center;justify-content:center;padding:8px;background:rgba(0,0,0,.32);backdrop-filter:blur(8px)}.toolbar button{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;border-radius:8px;padding:8px 12px;cursor:pointer}.toolbar button:hover{background:rgba(255,255,255,.22)}#counter{min-width:90px;text-align:center;font-weight:700}@keyframes flipNext{0%{transform:perspective(1200px) rotateY(0deg);filter:brightness(1)}45%{filter:brightness(.74)}100%{transform:perspective(1200px) rotateY(-93deg);filter:brightness(.92)}}@keyframes flipPrev{0%{transform:perspective(1200px) rotateY(0deg);filter:brightness(1)}45%{filter:brightness(.74)}100%{transform:perspective(1200px) rotateY(93deg);filter:brightness(.92)}}@media (max-width:700px){.stage{padding:4px 38px}.book-wrap{height:calc(100svh - 48px);max-height:calc(100svh - 48px);max-width:calc(100vw - 82px)}.nav{width:32px;height:54px;font-size:38px;border-radius:9px}.nav-left{left:3px}.nav-right{right:3px}.toolbar{height:44px;gap:6px}.toolbar button{padding:7px 8px;font-size:12px}#counter{font-size:12px;min-width:74px}.book.zoomed{transform:scale(1.28)}}@media (orientation:landscape) and (max-height:520px){.book-wrap{height:calc(100svh - 42px);max-height:calc(100svh - 42px)}.toolbar{height:40px}.toolbar button{padding:5px 8px}}