*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,Helvetica,sans-serif}body{background:var(--background,#26384b);color:white;display:flex;flex-direction:column;overflow:hidden}body.texture{background-image:radial-gradient(ellipse at top,#ffffff1c,transparent 65%)}header{display:flex;align-items:center;gap:20px;min-height:64px;padding:12px 26px;border-bottom:1px solid #ffffff18}.brand{font-size:14px;white-space:nowrap;color:#c2d2e2}.brand b{font-weight:400}h1{font-size:16px;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:500;text-align:center;margin:0}button,select,input{font:inherit}button{border:1px solid #ffffff30;border-radius:5px;color:inherit;background:#ffffff09;padding:10px 14px;cursor:pointer;font-size:14px}button:hover{background:#ffffff20}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #80b9ff;outline-offset:2px}#stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:20px 18px 5px;overflow:hidden}#book{margin:0 auto}.page{background:white;overflow:hidden;color:#27384b;box-shadow:inset -1px 0 0 #0002}.page img{width:100%;height:100%;object-fit:contain;display:block;background:white;user-select:none}.page.--left{box-shadow:inset -8px 0 14px -10px #0006}.page.--right{box-shadow:inset 8px 0 14px -10px #0006}.hint{font-size:12px;color:#c0cedb;text-align:center;margin:12px 10px}nav{display:flex;justify-content:center;align-items:center;gap:10px;padding:8px 12px 19px;flex-wrap:wrap}#page{width:55px;padding:9px 3px;color:white;background:transparent;border:0;border-bottom:1px solid #ffffff40;text-align:center;font-size:14px}.page-field{font-size:14px;white-space:nowrap}#total{color:#bdcfdf;margin-left:4px}#thumbs{flex-shrink:0;max-height:150px;overflow:auto;white-space:nowrap;background:#14233488;padding:12px;text-align:center}#thumbs button{display:inline-flex;flex-direction:column;gap:5px;align-items:center;padding:5px 9px;margin-right:5px;vertical-align:top}#thumbs img{height:85px;width:65px;object-fit:contain}#thumbs button[aria-current=true]{outline:2px solid #91c0ff}dialog{width:95vw;max-width:1400px;height:92vh;padding:0;border:1px solid #718294;border-radius:8px;color:white;background:#1f3041}dialog::backdrop{background:#07111dde}.zoom-tools{padding:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;height:auto;min-height:62px}.zoom-tools label{display:flex;align-items:center;gap:8px;font-size:14px}.zoom-tools select{padding:7px}#zoomScroll{overflow:auto;height:calc(100% - 90px);background:#152232}#zoomImage{display:block;width:100%;max-width:none;height:auto;margin:auto}#error{background:#7c2932;padding:14px;position:fixed;bottom:0;left:10px;right:10px;z-index:10}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}[hidden]{display:none!important}@media(max-width:650px){header{padding:9px 14px;gap:12px;min-height:55px}.brand{font-size:12px}h1{font-size:14px}#stage{padding:12px 10px 0}nav{gap:6px;padding:6px 8px 12px}button{padding:9px 11px;font-size:13px}.hint{font-size:11px;margin:9px 5px}#thumbs{max-height:125px}#thumbs img{height:60px}.zoom-tools input{width:90px}}

/* Soft-paper presentation inspired by the corrected Flip PDF reference. */
#book{transition:translate .18s ease-out}
.page.--left::after,.page.--right::after{content:'';position:absolute;top:0;bottom:0;width:20%;pointer-events:none;opacity:.25}
.page.--left::after{right:0;background:linear-gradient(to left,#18233366,transparent)}
.page.--right::after{left:0;background:linear-gradient(to right,#18233366,transparent)}
@media(prefers-reduced-motion:reduce){#book{transition:none}}

body{height:100vh;height:100dvh}.icon-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff30;border-radius:5px;color:inherit;background:#ffffff09;padding:9px 12px;min-height:38px;text-decoration:none}.icon-button:hover{background:#ffffff20}.icon-button:focus-visible{outline:3px solid #80b9ff;outline-offset:2px}