:root{font-family:Arial,Helvetica,sans-serif;color:#242424;background:#eeeeec;color-scheme:light}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column}header{display:flex;align-items:center;gap:16px;padding:14px 24px;background:white;border-bottom:1px solid #d6d6d4;flex-shrink:0}.brand{display:flex;flex-shrink:0}.brand img{display:block}.heading{min-width:0;flex:1}.heading>span{font-size:10px;letter-spacing:2px;color:#777}h1{font-size:17px;font-weight:600;margin:4px 0 0;line-height:1.3}button,.button{font:inherit;font-size:13px;color:#222;background:white;border:1px solid #c7c7c5;border-radius:5px;padding:9px 12px;cursor:pointer;text-decoration:none;white-space:nowrap}button:hover,.button:hover{background:#f2f2f2;border-color:#777}button:disabled{opacity:.4;cursor:default}:focus-visible{outline:3px solid #b21f28;outline-offset:3px}[hidden]{display:none!important}main{flex:1;min-height:0;display:flex;flex-direction:column}.toolbar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px 14px;background:#fafafa;border-bottom:1px solid #ddd;flex-shrink:0}.toolbar form{display:flex;align-items:center;gap:8px;font-size:13px}.toolbar input{width:56px;padding:8px 4px;text-align:center;border:1px solid #bbb;border-radius:4px;font:inherit}.separator{width:1px;height:25px;background:#ccc;margin:0 4px}#zoom-label{font-size:12px;min-width:45px;text-align:center}#notice{font-size:12px;text-align:center;min-height:16px;margin:8px 12px;flex-shrink:0}#stage{flex:1;min-height:0;overflow:auto;padding:12px 20px 18px;overscroll-behavior:contain}#book-wrap{margin:0 auto;position:relative;box-shadow:0 8px 22px #0002}.page{background:#fff;overflow:hidden}.page canvas{display:block;width:100%;height:100%;object-fit:contain;background:white}.page .loading{position:absolute;inset:0;display:grid;place-items:center;color:#777;font-size:12px;pointer-events:none}.hint{font-size:12px;text-align:center;color:#666;margin:10px 16px 14px;flex-shrink:0}#stage:focus{outline-offset:-4px}@media(max-width:650px){header{padding:10px 12px;gap:10px}h1{font-size:14px}.heading>span{font-size:9px}.brand img{width:32px;height:32px}.button{font-size:11px;padding:8px}.toolbar{gap:6px;padding:8px}.toolbar button{padding:8px 10px}.toolbar form{gap:5px}.toolbar label{display:none}#fullscreen{font-size:11px}#stage{padding:8px 10px 12px}.separator{display:none}.hint{font-size:11px;margin:8px 12px}#notice{margin:5px 10px;font-size:11px}}