*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;color:#f5f5f5;font:15px/1.3 Helvetica,Arial,sans-serif}body{display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}header,footer{display:flex;align-items:center;padding:12px clamp(12px,3vw,48px)}header{justify-content:space-between;border-bottom:1px solid #333}header div,footer{display:flex;gap:16px;align-items:center}a,button,input{color:inherit;font:inherit}button,a{background:none;border:0;padding:10px;cursor:pointer;text-decoration:none}button:disabled{opacity:.25;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #137aa4}main{display:grid;place-items:center;min-height:0;container-type:size;padding:12px}#book{position:relative;display:flex;width:max-content;perspective:1800px;touch-action:pan-y;box-shadow:0 5px 19px #0002}#book img{width:min(47cqw,96cqh);aspect-ratio:1;display:block;background:white;object-fit:contain;user-select:none}.leaf{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;z-index:1}.leaf img{position:absolute;inset:0;backface-visibility:hidden}.leaf img+img{transform:rotateY(180deg)}footer{justify-content:center;gap:20px}footer button{font-size:24px;line-height:1}label{font-variant-numeric:tabular-nums}input{width:3.2em;text-align:center;border:0;border-bottom:1px solid #aaa;background:transparent;appearance:textfield}input::-webkit-inner-spin-button{appearance:none}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media (orientation:portrait) and (max-width:900px){
  html{overflow:hidden}
  body{position:absolute;left:100%;top:0;width:100vh;width:100dvh;height:100vw;transform-origin:0 0;transform:rotate(90deg)}
}
@media (max-height:550px), (orientation:portrait) and (max-width:900px){
  header,footer{padding:0 12px}
  header{font-size:13px}
  header div,footer{gap:8px}
  main{padding:2px}
  #book{touch-action:pinch-zoom}
  #book img{width:min(50cqw,100cqh)}
}

#drawer-toggle{display:none}
#reader-tools{display:contents}
header{grid-row:1}
main{grid-row:2}
footer{grid-row:3}
@media (max-height:550px), (orientation:portrait) and (max-width:900px){
  body{grid-template-rows:1fr}
  main{grid-row:1;padding:0}
  #drawer-toggle{position:absolute;z-index:3;top:0;right:max(4px,env(safe-area-inset-right));display:grid;place-items:center;width:44px;height:44px;padding:0;font:22px/1 Arial}
  #drawer-toggle::before{content:"";position:absolute;z-index:-1;inset:4px 6px 12px;border-radius:12px;background:#1c1c1ced;box-shadow:0 1px 4px #0002}
  #reader-tools{display:none;position:absolute;z-index:2;top:0;right:0;width:min(370px,100%);padding:6px 44px 6px 8px;background:#181818fa;box-shadow:0 4px 14px #0002;border-radius:0 0 0 12px}
  #drawer-toggle[aria-expanded="true"] + #reader-tools{display:block}
  #reader-tools header{padding:0;gap:4px}
  #reader-tools footer{padding:0}
  #reader-tools button,#reader-tools a{min-height:44px;display:inline-flex;align-items:center}
}