*{box-sizing:border-box}html,body{height:100%;margin:0}body{font:14px system-ui,sans-serif;color:#242424;background:#f6f6f4}.viewer{height:100%;display:flex;flex-direction:column;background:#f6f6f4}header,footer{display:flex;align-items:center;gap:16px;padding:14px 22px;flex-shrink:0}header{justify-content:space-between}header strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px}.tools{display:flex;align-items:center;gap:6px}a{color:inherit;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;text-decoration:none;margin-right:8px}button,input{font:inherit}button{border:0;border-radius:8px;background:#ffffffb8;color:#242424;min-width:34px;min-height:34px;cursor:pointer;padding:6px 9px}button:hover:enabled{background:#fff}button:disabled{opacity:.25;cursor:default}button:focus-visible,input:focus-visible,.stage:focus-visible{outline:3px solid #ff6400;outline-offset:2px}.slider{position:relative;flex:1;min-height:0;overflow:hidden}.stage{width:100%;height:100%;overflow:auto;padding:12px 72px;touch-action:pan-x pan-y;position:relative}.stage canvas{display:block;margin:0 auto;background:white;box-shadow:0 8px 30px #00000014}.stage canvas:not([width]){display:none}.arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 3px 16px #00000012;font-size:34px;font-weight:300;line-height:1;z-index:2}.arrow-prev{left:16px}.arrow-next{right:16px}.progress{height:3px;background:#e6e6e1;margin:10px 22px 0;flex-shrink:0}.progress span{display:block;width:0;height:100%;background:#ff6400;transition:width .35s ease}footer{padding-top:12px;padding-bottom:16px}.page-info{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:12px}input{width:42px;padding:4px 0;text-align:center;border:0;border-bottom:1px solid #c9c9c3;background:transparent;appearance:textfield}input::-webkit-inner-spin-button{appearance:none}#dots{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin;padding:4px 2px}#dots button{min-width:24px;width:24px;height:28px;min-height:28px;background:transparent;padding:9px 6px;flex-shrink:0}#dots button:before{content:'';display:block;height:6px;width:6px;border-radius:5px;background:#c5c5bf;margin:auto;transition:width .2s,background .2s}#dots button[aria-current=true]:before{width:16px;background:#ff6400}.hint{font-size:11px;color:#85857e;white-space:nowrap}#status{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);background:#fffffff2;padding:12px 18px;border-radius:10px;max-width:90%;text-align:center;box-shadow:0 2px 12px #0000000c}#status:empty{display:none}@media(max-width:560px){header{padding:10px 12px;gap:8px}header strong{font-size:12px}.tools{gap:2px}.tools button{min-width:28px;padding:4px 6px;font-size:12px}#fit{display:none}a{margin-right:2px}.stage{padding:8px 12px}.arrow{width:36px;height:44px;font-size:28px;border-radius:8px;background:#ffffffdb}.arrow-prev{left:4px}.arrow-next{right:4px}footer{padding:10px 12px;gap:10px}.hint{display:none}.progress{margin:8px 12px 0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

[hidden]{display:none!important}@media(max-width:560px){.tools a{max-width:90px}.tools{min-width:0}header strong{min-width:0}}