html,body{margin:0;width:100%;height:100%;background:#303030;color:#fff;font-family:Arial,sans-serif;overflow:hidden}#reader{height:100%;display:flex;flex-direction:column}#stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0}#read{border:0;background:none;position:relative;padding:0;cursor:pointer;width:min(70vh,70vw);height:min(70vh,70vw)}#read img{width:100%;height:100%;object-fit:contain}#read span{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);background:#000;padding:10px 9px;color:#fff;font-size:16px}#stage.open{display:block;overflow:auto;overscroll-behavior:contain}#canvas{position:relative;margin:0 auto;overflow:hidden}#spread{border:0;position:absolute;left:0;top:0;transform-origin:0 0}#pan{position:absolute;inset:0;cursor:grab;touch-action:none}#pan:active{cursor:grabbing}#controls{display:flex;justify-content:center;align-items:center;gap:4px;min-height:44px;padding:4px;background:#252525;font-size:12px;flex:none}#controls button,#controls a{color:white;background:#333;border:1px solid #666;border-radius:3px;padding:7px;cursor:pointer;text-decoration:none;font-size:14px;min-width:36px;min-height:36px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}#controls button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}@media(max-width:500px){#controls{gap:2px;font-size:11px}#controls button,#controls a{padding:4px;font-size:13px;min-width:32px;min-height:40px}}