:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#414141;background:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;background:#fff}
button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.22;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid #777;outline-offset:3px}[hidden]{display:none!important}
.reader{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left));max-width:1920px;margin:auto;background:white}
.stage{flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:#fff;touch-action:none}
#page-canvas{display:block;max-width:100%;max-height:100%;-webkit-user-drag:none;pointer-events:none;visibility:hidden;box-shadow:0 3px 16px rgba(0,0,0,.14),0 1px 4px rgba(0,0,0,.07)}
#page-canvas[data-ready="true"]{visibility:visible}
.load-state,.retry{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;white-space:nowrap;color:#888}
.retry{background:white;border:1px solid #ddd;border-radius:5px;padding:12px 18px;min-height:44px;color:#444}
.controls{display:flex;align-items:center;gap:28px;flex-shrink:0;width:100%;max-width:1100px;margin:auto;padding:10px 16px 12px;background:#fff}
.navigation{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-shrink:0}.arrow{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center;border-radius:50%}.arrow:hover:enabled{background:#f4f4f4}svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.page-counter{display:flex;align-items:baseline;gap:9px;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px;color:#999}.page-counter strong{font-size:20px;font-weight:500;color:#444}
#page-range{flex:1;min-width:50px;height:28px;margin:0;accent-color:#777;cursor:pointer;touch-action:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
html[data-device="mobile"] .controls{padding:1px 6px 2px;gap:18px;max-width:none}
html[data-device="mobile"] .navigation{gap:12px}
html[data-device="mobile"] .page-counter strong{font-size:18px}
@media(max-width:500px){.controls{padding:8px 0;gap:12px}.navigation{gap:8px}}
@media print{body{display:none!important}}
html[data-device="mobile"] .reader{position:fixed;left:50%;top:50%;width:100vh;width:100dvh;height:100vw;height:100dvw;max-width:none;margin:0;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center;padding:max(2px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(2px,env(safe-area-inset-left)) max(2px,env(safe-area-inset-top))}
html[data-device="mobile"] .controls{padding:0 4px;gap:14px}
html[data-device="mobile"] .navigation{gap:10px}
html[data-device="mobile"] .arrow{height:32px;width:36px}
html[data-device="mobile"] .page-counter strong{font-size:16px}
html[data-device="mobile"] #page-range{height:26px}
@media(orientation:landscape){html[data-device="mobile"] .reader{width:100vw;width:100dvw;height:100vh;height:100dvh;transform:translate(-50%,-50%);padding:max(2px,env(safe-area-inset-top)) max(2px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(2px,env(safe-area-inset-left))}}