*{box-sizing:border-box}body{margin:0;background:#eaeaf3;color:#172445;font:15px system-ui,sans-serif;height:100dvh;display:flex;flex-direction:column}header{background:#101b48;color:white;padding:14px 24px;display:flex;justify-content:space-between;align-items:center}header strong{letter-spacing:2px;font-size:14px}header span{display:block;margin-top:4px;color:#d6dcff;font-size:13px}button{border:1px solid #cbd1e0;background:white;color:#16234c;border-radius:7px;padding:9px 13px;cursor:pointer;font:inherit}button:hover{background:#e3e7ff}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #7260ef;outline-offset:2px}main{flex:1;min-height:0;position:relative}#viewport{height:100%;overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding:18px}#book{margin:auto;display:flex;justify-content:center;filter:drop-shadow(0 12px 18px #17244544);perspective:1800px;flex-shrink:0}#book img{width:auto;max-height:100%;object-fit:contain;background:white;display:block}#book img+img{border-left:1px solid #ccc}#book.turn-forward{animation:forward .38s ease}#book.turn-back{animation:back .38s ease}@keyframes forward{0%{transform:rotateY(0)}45%{transform:rotateY(-16deg);opacity:.65}100%{transform:rotateY(0)}}@keyframes back{0%{transform:rotateY(0)}45%{transform:rotateY(16deg);opacity:.65}100%{transform:rotateY(0)}}nav{display:flex;justify-content:center;align-items:center;gap:8px;padding:10px;flex-wrap:wrap;background:#fff;border-top:1px solid #d5d9e6}input{width:62px;padding:7px;border:1px solid #cbd1e0;border-radius:5px;font:inherit}footer{text-align:center;font-size:11px;padding:7px;color:#556079}#status{position:absolute;top:8px;left:0;right:0;text-align:center;pointer-events:none;color:#782d2d;background:#ffffffcc;margin:0}#status:empty{display:none}#grid{position:fixed;inset:80px 15px 120px;overflow:auto;background:#fff;border:1px solid #ddd;border-radius:12px;padding:15px;box-shadow:0 10px 50px #0005;z-index:5;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}#grid:not([hidden]){display:grid}#grid button{padding:5px}#grid img{width:100%;display:block}#grid span{display:block;padding:5px} @media(max-width:600px){header{padding:10px 14px}nav{gap:5px;padding:7px}button{font-size:13px;padding:8px}footer{font-size:10px}#viewport{padding:10px}}@media(prefers-reduced-motion:reduce){#book.turn-forward,#book.turn-back{animation:none}}