@import url('../tokens.css');
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{font:14px/1.5 var(--font-body);color:var(--color-ink);background:var(--color-paper-2)}button,select{font:inherit;color:inherit;cursor:pointer}button,a,select{touch-action:manipulation}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}header{background:var(--color-dark);color:var(--color-white);padding:15px 28px;display:flex;gap:20px;align-items:center;justify-content:space-between}h1{font:22px/1.3 var(--font-display);margin:0;overflow-wrap:anywhere}header button{background:none;color:var(--color-white);border:1px solid var(--color-rule);border-radius:4px;padding:8px 13px;min-height:44px}header a{white-space:nowrap;min-height:44px;display:flex;align-items:center;font-size:12px}main{max-width:1260px;margin:auto;padding:20px 32px 35px}.reader-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.reader-heading p{font-size:12px;color:var(--color-muted)}.tools{display:flex;gap:8px;flex-wrap:wrap}.tools button,.tools a,.controls button,.jump select,.zoom-tools button,.zoom-tools select{border:1px solid var(--color-rule);background:var(--color-paper);padding:10px 14px;border-radius:4px;min-height:44px;white-space:nowrap}.tools a,.tools button{font-size:12px}.tools button:hover,.controls button:hover{background:var(--color-paper-3)}#book-stage{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center;perspective:1500px;touch-action:pan-y}#spread{display:flex;justify-content:center;max-width:100%;filter:drop-shadow(4px 8px 8px var(--color-shadow));gap:2px}.page{display:block;position:relative;border:0;padding:0;background:var(--color-white);cursor:zoom-in}.page img{display:block;width:auto;max-width:100%;height:min(66vh,720px);object-fit:contain}.page small{position:absolute;bottom:0;right:0;background:var(--color-paper);padding:2px 7px;font-size:9px}.flip-outer{position:relative;perspective:2200px}.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .68s cubic-bezier(.45,.05,.55,.95)}.flip-inner.turn-next{transform:rotateY(-180deg)}.flip-inner.turn-prev{transform:rotateY(180deg)}.flip-old,.flip-new{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:2px;backface-visibility:hidden}.flip-shade{position:absolute;inset:0;pointer-events:none;background:#000;opacity:0}.flip-shade.active{animation:flip-shade .68s ease}@keyframes flip-shade{45%,55%{opacity:.35}}.flip-static{position:absolute;top:0;bottom:0;width:50%;display:flex;align-items:center}.flip-static.left{left:0;justify-content:flex-end}.flip-static.right{right:0;justify-content:flex-start}.flip-leaf{position:absolute;top:0;bottom:0;width:50%;z-index:2;transform-style:preserve-3d;transition:transform .68s cubic-bezier(.45,.05,.55,.95)}.flip-leaf.next{left:50%;transform-origin:left center}.flip-leaf.next .flip-face{justify-content:flex-start}.flip-leaf.prev{left:0;transform-origin:right center}.flip-leaf.prev .flip-face{justify-content:flex-end}.flip-leaf.next.turning{transform:rotateY(-180deg)}.flip-leaf.prev.turning{transform:rotateY(180deg)}.flip-face{position:absolute;inset:0;display:flex;align-items:center;backface-visibility:hidden}.controls{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:24px}.controls button{font-size:20px;min-width:44px}.controls button:disabled{opacity:.35;cursor:default}.controls span{min-width:105px;text-align:center;font-size:13px}.jump{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:12px}.hint{color:var(--color-muted);font-size:11px}.jump select{min-width:65px}#loading{position:absolute;bottom:0;background:var(--color-paper);padding:0 10px;font-size:12px;pointer-events:none}#loading:empty{display:none}#reader-error{color:var(--color-accent);text-align:center}dialog{background:var(--color-paper);border:0;border-radius:8px;width:96vw;height:94vh;max-width:1500px;padding:0;overflow:hidden;color:var(--color-ink)}dialog::backdrop{background:var(--color-overlay)}.zoom-tools{display:flex;align-items:center;gap:8px;padding:10px 15px;height:66px;border-bottom:1px solid var(--color-rule)}#zoom-close{margin-left:auto;font-size:22px}#zoom-viewport{height:calc(100% - 66px);overflow:auto;touch-action:pan-x pan-y}#zoom-image{max-width:none;height:auto;display:block}#zoom-level{min-width:42px;text-align:center;font-size:12px}body:fullscreen{overflow:auto}body:fullscreen .page img{height:72vh}@media(max-width:760px){header{padding:10px 16px;gap:10px;flex-wrap:wrap}header h1{order:3;width:100%;font-size:22px}main{padding:14px 16px 30px}.reader-heading{align-items:flex-start;flex-direction:column;gap:0;margin-bottom:14px}.tools{gap:6px}.tools button,.tools a{padding:10px 12px}.page img{height:auto;max-height:65vh;max-width:100%;width:auto}#spread{max-width:100%;display:flex}.page{max-width:100%}#book-stage{min-height:240px}.controls{gap:8px}.controls button{padding:8px}.controls span{min-width:82px}.hint{width:100%;text-align:center}.zoom-tools{gap:5px;padding:8px}.zoom-tools button,.zoom-tools select{padding:8px;min-width:40px}.zoom-tools label{display:none}}