*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,sans-serif;color:#ececec;background:#233349}body{display:flex;flex-direction:column;overflow:hidden}header{height:62px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#17263b;border-bottom:1px solid #444;gap:12px}.mark{color:#b9edb5;font-size:22px}header strong{font-size:14px;letter-spacing:.8px}.hint{color:#aaa;font-size:12px}button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:21px;border-radius:6px;min-width:40px;min-height:40px}button:hover{background:#344b61}button:focus-visible,input:focus-visible{outline:2px solid #b9edb5;outline-offset:2px}button:disabled{opacity:.25;cursor:default}#stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:safe center;overflow:auto;padding:16px 58px;background:radial-gradient(ellipse at center,#344b61,#1b293d)}#zoomWrap{flex-shrink:0;transform-origin:center;transition:transform .15s}#book{transform-origin:top left;filter:drop-shadow(0 16px 22px #0005)}.page{background:#f5f2e9;overflow:hidden}.page img{width:100%;height:100%;object-fit:contain;display:block;user-select:none}.page-error{color:#222;padding:30px;display:block}.arrow{position:fixed;top:46%;z-index:5;font-size:46px;background:#2228;width:44px;height:64px}.left{left:10px}.right{right:10px}nav{height:60px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 20px;background:#17263b;border-top:1px solid #444;z-index:10}nav button span{font-size:12px;vertical-align:middle}.pager,.zoom{display:flex;align-items:center;gap:4px}.pager label{font-size:13px;color:#aaa}input{width:52px;padding:6px;border:1px solid #555;background:#333;color:white;text-align:center;border-radius:4px;font-size:14px}#reset{font-size:12px}#tray{position:absolute;bottom:60px;left:0;right:0;z-index:9;background:#202020f5;overflow:auto;white-space:nowrap;padding:16px;text-align:center;border-top:1px solid #555}#tray button{width:88px;padding:6px;margin:0 5px}#tray img{width:68px;height:90px;object-fit:contain;display:block;margin:auto}#tray small{font-size:11px}#tray button[aria-current="page"]{outline:2px solid #b9edb5}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:650px){header{height:48px;padding:0 12px}.hint{display:none}#stage{padding:12px 36px}nav{padding:0 6px;height:56px}nav button span{display:none}.arrow{width:28px;min-width:28px;font-size:32px;height:50px}.left{left:3px}.right{right:3px}#tray{bottom:56px}nav button{min-width:32px}.pager{gap:0}.zoom{gap:0}}@media(prefers-reduced-motion:reduce){#zoomWrap{transition:none}}
.links{display:flex;align-items:center;gap:15px;font-size:13px}.links a{color:#f1f4e8;text-decoration:none}.links a:hover{text-decoration:underline}.links select{background:#233349;color:white;border:1px solid #617080;border-radius:5px;padding:7px;max-width:170px}a[hidden]{display:none}@media(max-width:700px){header strong{font-size:10px}.links{gap:7px;font-size:10px}.links select{max-width:83px;font-size:10px;padding:5px}.mark{display:none}header{padding:0 6px;gap:5px}.links a[href="read.html"]{display:none}}