:root{color-scheme:light;--ink:#5b505d;--muted:#8f8191;--paper:#f3f0ee;--h:600px;--w:400px}*{box-sizing:border-box}body{margin:0;height:100dvh;min-height:400px;display:flex;flex-direction:column;background:radial-gradient(ellipse at center,#fcfaf8 0%,#eee8e7 100%);color:var(--ink);font-family:Arial,sans-serif}header{padding:20px 32px 12px;display:flex;align-items:center;justify-content:space-between;flex:none}.brand{font:42px/.8 Georgia,serif;letter-spacing:-2px}.brand span{display:block;font:italic 12px/1.8 Georgia,serif;letter-spacing:0;margin-top:6px}.edition{font-size:11px;letter-spacing:4px}main{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px 26px}#frame{width:calc(var(--w)*2);height:var(--h);position:relative;transition:transform .35s}#book{position:relative;width:100%;height:100%;perspective:2400px;touch-action:pan-y;user-select:none;-webkit-user-select:none}.page{position:absolute;top:0;width:50%;height:100%;background:#fff;box-shadow:0 6px 20px #4f354326;overflow:hidden}.page.left{left:0}.page.right{right:0}.page.empty{visibility:hidden}.page img,.face img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none}.page.left:after,.page.right:after{content:"";position:absolute;inset:0;pointer-events:none}.page.left:after{background:linear-gradient(to left,#49364318,transparent 9%)}.page.right:after{background:linear-gradient(to right,#49364318,transparent 9%)}#leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;z-index:10;will-change:transform}#leaf[hidden]{display:none}.face{position:absolute;inset:0;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 5px 18px #4f354330}.face.back{transform:rotateY(180deg)}.face:after{content:"";position:absolute;inset:0;background:linear-gradient(to right,#4d35442a,transparent 30%);pointer-events:none}footer{flex:none;padding:14px 20px max(14px,env(safe-area-inset-bottom));text-align:center}.toolbar{display:inline-flex;align-items:center;gap:8px;border:1px solid #d5cad3;border-radius:30px;background:#ffffff9c;padding:5px 10px;box-shadow:0 3px 10px #4f354307}button{border:0;background:transparent;color:var(--ink);font-size:24px;width:38px;height:38px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}button:hover{background:#e7dfe6}button:disabled{opacity:.25;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid #8e7491;outline-offset:2px}#jump{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}input{width:42px;border:0;border-bottom:1px solid #c7bac9;text-align:center;color:var(--ink);background:transparent;font-size:14px;padding:5px 0;appearance:textfield}input::-webkit-inner-spin-button{display:none}.divider{height:20px;border-left:1px solid #d7ccd7;margin:0 3px}.hint{font-size:11px;color:var(--muted);margin:10px 0 0;letter-spacing:.2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{border:0;padding:60px 16px 20px;width:min(98vw,1800px);height:94dvh;max-width:none;max-height:none;background:#eae4e8;border-radius:8px}dialog::backdrop{background:#302735c9}#closeDetail{position:fixed;right:3vw;top:5dvh;background:white;z-index:20}#detailPages{display:flex;align-items:flex-start;justify-content:center;gap:6px;min-width:fit-content}#detailPages img{width: min(85vw,800px);height:auto;box-shadow:0 6px 25px #4c354322}
@media(max-width:700px){header{padding:16px 20px 8px}.brand{font-size:34px}main{padding:10px 16px}#frame{width:var(--w)}.page{width:100%}.page.left{display:none}#leaf{left:0;width:100%}.toolbar{gap:3px}#jump label{display:none}.hint{font-size:10px}footer{padding-top:8px}#detailPages{flex-direction:column;min-width:0}#detailPages img{width:100%}}
@media(orientation:landscape){#frame{width:calc(var(--w)*2)}.page{width:50%}.page.left{display:block}#leaf{left:50%;width:50%}#detailPages{flex-direction:row;min-width:fit-content}#detailPages img{width:min(85vw,800px)}}
@media(orientation:landscape) and (max-height:500px){body{min-height:0}header{padding:7px 20px 4px}.brand{font-size:26px}.brand span{display:none}main{padding:4px 16px}footer{padding:4px 16px max(4px,env(safe-area-inset-bottom))}.hint{display:none}.toolbar{padding:1px 8px}button{height:30px;width:34px;font-size:22px}}
@media(prefers-reduced-motion:reduce){#frame{transition:none}}