:root{font-family:Arial,Helvetica,sans-serif;color-scheme:light;background:#e9e9e9;color:#393b3d}*{box-sizing:border-box}body{margin:0;min-height:100svh}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;background:transparent;border:0;border-radius:4px;min-width:44px;min-height:44px;padding:10px}button:hover,a:hover{background:#00000007}button:disabled{opacity:.25;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #555;outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));gap:12px;height:64px}h1{font-size:14px;font-weight:400;margin:0}nav{display:flex;align-items:center;font-size:12px;gap:10px}nav a{padding:14px 8px;min-height:44px}main{padding:12px 22px max(12px,env(safe-area-inset-bottom));max-width:1600px;margin:auto}.viewer{display:flex;align-items:center;justify-content:center;gap:18px;height:calc(100svh - 190px);min-height:150px}#stage{width:min(calc((100svh - 218px)*1.4142),calc(100% - 124px));aspect-ratio:1.4142;position:relative;perspective:2200px;isolation:isolate}#stage.spread{width:min(calc((100svh - 218px)*2.8284),calc(100% - 124px));aspect-ratio:2.8284}#paper{display:flex;position:relative;width:100%;height:100%;perspective:2200px;background:white;box-shadow:0 2px 3px #0002,0 15px 20px -9px #0005}#paper img{display:block;width:100%;height:100%;object-fit:contain;background:#fff;min-width:0;backface-visibility:hidden;user-select:none}.spread #paper img{width:50%}.spread #paper:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:4%;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#00000009 36%,#0000002a 48%,#00000038 50%,#ffffff55 53%,#00000008 64%,transparent);pointer-events:none}.spread #paper:before{content:'';position:absolute;inset:2px -5px -2px;z-index:-1;background:repeating-linear-gradient(90deg,#bbb 0px,#eee 1px,#ccc 3px);box-shadow:0 2px 2px #0002}#page-right[hidden],#zoom-right[hidden]{display:none}#error{position:absolute;inset:0;background:#eee;padding:20px;align-content:center;text-align:center}#error a{text-decoration:underline}.side{font-size:32px;flex-shrink:0;width:44px;padding:0}.toolbar{display:flex;align-items:center;justify-content:space-between;max-width:510px;margin:10px auto 0;font-size:12px;gap:8px}.pagination{display:flex;align-items:center;gap:5px}.small{font-size:24px;padding:5px}input{width:40px;min-height:44px;padding:5px 0;text-align:center;background:transparent;border:1px solid #c6c6c6;border-radius:4px;color:#333;font-size:16px;appearance:textfield}input::-webkit-inner-spin-button{appearance:none}#spread-end:empty{display:none}.total,#spread-end{white-space:nowrap;font-size:12px;color:#696b6d}.hint{text-align:center;font-size:10px;color:#7a7c7e;margin:6px 0}.readable{max-width:1000px;margin:12px auto 0;font-size:11px;color:#777}.readable summary{cursor:pointer;width:max-content;margin:auto}.readable div{white-space:pre-wrap;line-height:1.6;padding:18px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{background:#f3f3f3;color:#333;border:1px solid #bbb;border-radius:6px;padding:16px;width:min(960px,96vw);max-height:94svh}dialog::backdrop{background:#0007}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.dialog-heading h2{font-size:14px;font-weight:400;margin:0}.dialog-heading>div{display:flex;gap:5px}#thumbnails{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}#thumbnails button{padding:5px;text-align:left;font-size:11px;border:1px solid #ccc}#thumbnails img{display:block;width:100%;aspect-ratio:1.4142;object-fit:contain;margin-bottom:6px;background:white}#thumbnails button[aria-current=true]{border-color:#444;box-shadow:0 0 0 1px #444}#zoom-dialog{width:min(1500px,98vw)}.zoom-scroll{overflow:auto;max-height:calc(90svh - 110px);background:#ddd;overscroll-behavior:contain}#zoom-spread{display:flex;width:100%}#zoom-spread img{display:block;width:100%;height:auto;max-width:none;min-width:0;object-fit:contain;align-self:flex-start}#zoom-spread.spread img{width:50%}#zoom-spread.enlarged{width:200%}#zoom-dialog p{font-size:11px;color:#777;margin-bottom:0}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#333;color:white;border-radius:5px;font-size:12px;opacity:0;pointer-events:none}#toast.show{opacity:1}.noscript{text-align:center}
@media(max-width:700px){header{height:56px;padding-top:6px;padding-bottom:6px}h1{font-size:13px}nav{gap:4px}main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.side{display:none}.viewer{height:calc(100svh - 190px);min-height:0}#stage,#stage.spread{width:min(100%,calc((100svh - 210px)*1.4142))}.toolbar{gap:2px;max-width:410px}.pagination{gap:2px}#thumbnails{grid-template-columns:repeat(2,1fr)}.readable{margin-top:12px}}
@media(orientation:landscape) and (max-height:600px){header{height:44px;padding-top:0;padding-bottom:0}main{padding-top:2px;padding-bottom:max(4px,env(safe-area-inset-bottom))}.viewer{height:calc(100svh - 104px);min-height:0;gap:10px}#stage{width:min(calc((100svh - 120px)*1.4142),calc(100% - 108px))}#stage.spread{width:min(calc((100svh - 120px)*2.8284),calc(100% - 108px))}.toolbar{margin-top:4px;max-width:460px}.hint,.readable{display:none}.side{display:block}.dialog-heading{margin-bottom:4px}dialog{padding:8px}.zoom-scroll{max-height:calc(94svh - 78px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Center the book and controls in the available portrait screen. */
@media(max-width:700px) and (orientation:portrait){
 header{height:auto;min-height:56px;gap:8px}
 main{min-height:calc(100svh - 56px);display:flex;flex-direction:column;justify-content:center;padding-top:16px;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
 .viewer{height:auto;min-height:0;display:block}
 #stage,#stage.spread{width:100%;aspect-ratio:1.4142;margin:0 auto}
 #paper{height:auto;aspect-ratio:1.4142;box-shadow:0 2px 3px #0002,0 8px 16px -8px #0005}
 #paper img{height:auto;aspect-ratio:1.4142}
 .toolbar{margin-top:18px;max-width:420px;width:100%;flex-shrink:0}
 .hint{margin-top:8px;font-size:11px}
 .readable{margin-top:20px}
 #zoom-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:12px max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
 #zoom-dialog .dialog-heading{min-height:44px;margin-bottom:10px}
 .zoom-scroll{max-height:calc(100dvh - 116px);touch-action:pan-x pan-y pinch-zoom}
 #zoom-spread.enlarged{width:200%}
 #page{cursor:zoom-in}
}
@media(max-width:700px) and (orientation:portrait){
 #stage.spread{aspect-ratio:2.8284}
 .spread #paper{aspect-ratio:2.8284}
 .spread #paper img{height:100%;width:50%;aspect-ratio:1.4142}
 #zoom-spread.spread.enlarged{width:300%}
 #page-right{cursor:zoom-in}
}