*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#303236;color:#fff;font-family:Segoe UI,system-ui,sans-serif}.app{height:100%;display:grid;grid-template-rows:50px 1fr 62px;background:radial-gradient(ellipse at center,#60646a 0,#37393d 55%,#242529 100%)}header{display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 20px;background:#202124ef;box-shadow:0 2px 12px #0008;z-index:20}h1{font-size:15px;font-weight:500;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;gap:4px}button{border:0;color:#eee;background:#383a40;border-radius:5px;cursor:pointer;font-size:22px;transition:.15s}button:hover{background:#51545c;color:#fff}button:disabled{opacity:.3;cursor:default}.header-actions button{width:38px;height:36px;font-size:19px}.book{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:25px 55px;perspective:2600px;overflow:auto;touch-action:pan-y;user-select:none}.spread{position:relative;display:flex;align-items:stretch;justify-content:center;height:min(82vh,calc(100vh - 150px));max-width:100%;transform-origin:center;transition:transform .2s;transform-style:preserve-3d}.page{display:block;height:100%;width:auto;max-width:48vw;object-fit:contain;background:#fff;box-shadow:0 14px 35px #0009}.page.left{box-shadow:-10px 14px 35px #0009}.page.right{box-shadow:10px 14px 35px #0009}.page.cover{box-shadow:0 14px 40px #000b}.turn-sheet{position:absolute;top:0;height:100%;z-index:12;transform-style:preserve-3d;will-change:transform}.turn-sheet.forward{right:0;transform-origin:left center;animation:turnForward .72s cubic-bezier(.22,.61,.36,1) forwards}.turn-sheet.backward{left:0;transform-origin:right center;animation:turnBackward .72s cubic-bezier(.22,.61,.36,1) forwards}.turn-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden}.turn-face.back{transform:rotateY(180deg)}@keyframes turnForward{0%{transform:rotateY(0deg)}100%{transform:rotateY(-180deg)}}@keyframes turnBackward{0%{transform:rotateY(0deg)}100%{transform:rotateY(180deg)}}.end-card{position:absolute;top:0;bottom:0;z-index:7;width:50%;padding:8%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;color:#242424;font-size:clamp(18px,2vw,34px);line-height:1.35}.end-card.left{left:0}.end-card.right{right:0}.end-card.full{inset:0;width:100%}.end-card a{margin-top:1.2em;color:#1769c2;font-size:.72em;line-height:1.25;overflow-wrap:anywhere;text-decoration:underline}nav{display:flex;align-items:center;justify-content:center;gap:7px;background:#202124ee;box-shadow:0 -2px 12px #0008;z-index:20}nav button{width:42px;height:40px}#prev,#next{font-size:31px}.page-input{display:flex;align-items:center;background:#1115;border-radius:5px;padding:0 9px;height:38px;margin:0 8px}.page-input input{width:45px;background:transparent;border:0;color:white;text-align:right;font-size:14px;outline:0}.page-input span,#zoom-label{font-size:13px;color:#c7c9ce}#zoom-label{width:42px;text-align:center}#thumb-panel{position:fixed;left:-330px;top:50px;bottom:62px;width:320px;padding:16px;background:#202124f5;z-index:30;box-shadow:8px 0 25px #0007;transition:left .25s;overflow:auto}#thumb-panel.open{left:0}#thumb-panel strong{font-size:16px}#close-thumbs{position:absolute;right:10px;top:8px;width:34px;height:34px}#thumb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}.thumb{border:2px solid transparent;padding:4px;background:#1118;border-radius:4px;text-align:center;color:#ccc;font-size:12px;cursor:pointer}.thumb:hover,.thumb.active{border-color:#4da3ff}.thumb img{display:block;width:100%;height:auto;margin-bottom:4px}@media(max-width:700px),(orientation:portrait){.book{padding:12px 8px}.spread{height:min(78vh,calc(100vh - 130px))}.page{max-width:94vw}.page.right,.page.left{box-shadow:0 12px 30px #000a}.end-card{inset:0;width:100%;padding:10%;font-size:clamp(17px,5vw,28px)}nav{height:56px}.header-actions button{width:34px}#zoom-out,#zoom-in,#zoom-label{display:none}#thumb-panel{bottom:56px;width:280px}.app{grid-template-rows:46px 1fr 56px}header{height:46px}}
@media (max-width:700px),(orientation:portrait){
  html,body,.app{width:100%;max-width:100%;overflow:hidden}
  header{min-width:0} header h1{min-width:0;max-width:calc(100vw - 130px)}
  .book{width:100%;min-width:0;padding:6px;overflow:hidden;justify-content:center;align-items:center}
  .spread{width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;align-items:center;justify-content:center}
  .spread>.page{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;margin:auto;object-fit:contain}
  .turn-sheet{top:0;bottom:0;max-width:100%;height:100%}
  #zoom-out,#zoom-in,#zoom-label{display:block}
  nav{gap:3px}nav button{width:38px}.page-input{margin:0 2px;padding:0 5px}
  .book.zoomed{overflow:auto;justify-content:flex-start;align-items:flex-start}
  .book.zoomed .spread{flex:0 0 100%;transform-origin:top left}
}

/* The book may remain pannable when zoomed, but its browser scrollbar is hidden. */
.book{-ms-overflow-style:none;scrollbar-width:none}
.book::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}
.book::-webkit-scrollbar-thumb,.book::-webkit-scrollbar-track{display:none!important;background:transparent!important}