:root{font-family:Arial,Helvetica,sans-serif;color:#24333b;background:#edf1f3;color-scheme:light}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:22px;padding:18px 5%;background:white;border-bottom:1px solid #dce3e7}.brand img{width:130px;height:66px;object-fit:contain}h1{font-size:23px;margin:0 0 6px}header p{font-size:14px;color:#64747c;margin:0}.home{margin-left:auto;color:#334e5c;font-size:14px}#reader{background:radial-gradient(ellipse at top,#fafafa,#e1e8ec);min-height:calc(100dvh - 103px);padding:16px 20px 20px}button,.toolbar a{font:inherit;font-size:14px;padding:11px 16px;min-height:44px;border:1px solid #cbd6dc;background:white;border-radius:9px;color:#24333b;text-decoration:none;cursor:pointer}button:hover,.toolbar a:hover{background:#fff1ca}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #008a98;outline-offset:3px}.toolbar{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}#viewport{height:calc(100dvh - 305px);min-height:280px;display:flex;align-items:center;justify-content:center;overflow:auto;padding:12px;perspective:1800px}#book{display:flex;position:relative;flex-shrink:0;filter:drop-shadow(0 14px 18px #21364530)}.sheet{position:relative;flex:1;min-width:0;background:#fff}.sheet img,.turn img{display:block;width:100%;height:100%;object-fit:contain}.sheet.left:after{content:"";position:absolute;inset:0 0 0 auto;width:20px;background:linear-gradient(90deg,transparent,#00000015);pointer-events:none}.sheet.right:after{content:"";position:absolute;inset:0 auto 0 0;width:20px;background:linear-gradient(90deg,#0000001a,transparent);pointer-events:none}.turn{position:absolute;top:0;height:100%;backface-visibility:hidden;z-index:3;transform-origin:left;animation:flip-next .42s ease-in-out forwards}.turn.reverse{transform-origin:right;animation-name:flip-prev}@keyframes flip-next{to{transform:rotateY(-90deg);opacity:.2}}@keyframes flip-prev{to{transform:rotateY(90deg);opacity:.2}}nav{display:flex;align-items:center;justify-content:center;gap:20px;margin:20px 0 12px}#next{background:#f2a900;border-color:#f2a900}form{display:flex;align-items:center;gap:8px;font-size:14px}input{width:62px;padding:9px 5px;border:1px solid #bccad1;border-radius:7px;text-align:center;font:inherit;min-height:44px}.hint{text-align:center;color:#546772;font-size:14px;margin:7px}#error{text-align:center}#reader:fullscreen{overflow:auto}#viewport.zoomed{display:block}#viewport.zoomed #book{margin:0 auto} @media(max-width:650px){header{padding:12px 16px;gap:12px}.brand img{width:86px;height:48px}h1{font-size:19px}header p{display:none}.home{font-size:13px}#reader{padding:12px 8px}.toolbar{gap:5px}.toolbar a,.toolbar button{padding:10px;font-size:13px}#viewport{height:calc(100dvh - 292px);padding:8px;min-height:250px}nav{gap:8px}nav>button{padding:10px}nav>button span{display:none}form{gap:5px}}@media(prefers-reduced-motion:reduce){.turn{animation:none}}