*{box-sizing:border-box}
body{margin:0;background:#121415;color:#fafafa;font-family:Arial,Helvetica,sans-serif;overflow-x:clip}
header{max-width:1440px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:24px 5%;border-bottom:1px solid #303233}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:16px}.mark{background:#ff591a;padding:6px 9px;font-size:24px;color:#111}.tag{font-size:12px;letter-spacing:2px;color:#a5a7a8}
main{padding:26px 24px 32px;text-align:center}.intro h1{font-size:28px;letter-spacing:-1px;margin:0 0 8px}.intro p{font-size:16px;color:#a6a9ab;margin:0}
/* Real layout space above and below the complete moving page. */
.reader{padding:64px 10px 72px;display:flex;justify-content:center;overflow:visible}
.book{position:relative;width:min(880px,calc((100svh - 440px)*1.414));min-width:440px;aspect-ratio:1.414;isolation:isolate}
.book:before{content:'';position:absolute;inset:2px -2px -3px;background:#c7c9cb;border-radius:3px;box-shadow:0 22px 30px #0007;z-index:-1}
.book.cover:before{left:50%}.book.cover{transform:translateX(-25%)}.book.cover .left{visibility:hidden}
.page{position:absolute;top:0;width:50%;height:100%;background:#fff;overflow:hidden}
.left{left:0;border-radius:2px 0 0 2px}.right{right:0;border-radius:0 2px 2px 0}
.page img{width:100%;height:100%;object-fit:contain;display:block}
.page:after{content:'';position:absolute;inset:0;pointer-events:none}.left:after{background:linear-gradient(90deg,transparent 94%,#0001)}.right:after{background:linear-gradient(90deg,#0001,transparent 6%)}
.turn{display:none;position:absolute;z-index:4;pointer-events:none}
.turn.surface-turn{display:block;left:-25%;top:-35%;width:150%;height:170%;overflow:visible}
.surface-turn canvas{display:block;width:100%;height:100%}
.controls{display:flex;justify-content:center;align-items:center;gap:20px;margin:0 0 18px}
button{font:inherit;cursor:pointer;color:inherit;border:1px solid #484c4f;background:#25282b;border-radius:50%;min-width:44px;height:44px;font-size:22px;transition:background .2s}
button:hover:enabled{background:#ff591a;color:#111;border-color:#ff591a}button:disabled{opacity:.28;cursor:default}button:focus-visible{outline:3px solid #ff591a;outline-offset:4px}
.counter{font-size:14px;min-width:145px;color:#d6d8d9}.page-nav{display:flex;justify-content:center;gap:8px}.page-nav button{font-size:14px;width:32px;min-width:32px;height:32px;border-radius:5px}.page-nav button[aria-current=true]{background:#ff591a;color:#111;border-color:#ff591a}.locked-nav{display:flex;align-items:center;padding:0 12px;color:#8d9295;background:#292c2e;border-radius:5px;font-size:14px}
.hint{color:#989ea1;font-size:14px;margin:16px 0}.lock-note{font-size:14px;color:#b0b4b7;display:inline-flex;gap:9px}footer{border-top:1px solid #303233;margin:0 5%;padding:20px 0;display:flex;justify-content:space-between;font-size:12px;color:#82898d}
.locked{display:flex;align-items:center;justify-content:center;background:#eee;color:#111928;font-family:Inter,Arial,sans-serif;isolation:isolate;container-type:inline-size}
.locked .locked-preview{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;filter:blur(6px);opacity:.52;pointer-events:none;user-select:none}
.locked:before{content:'';position:absolute;inset:0;background:#f3f4f6a8;z-index:0}
.locked-content{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,3cqw,16px);padding:clamp(12px,4cqw,28px);font-family:Inter,Arial,sans-serif;color:#111928}
.locked svg{flex-shrink:0;width:clamp(28px,10cqw,44px);height:clamp(28px,10cqw,44px);stroke:#111928;fill:none;stroke-width:2;margin:0}
.locked strong{display:block;font-family:Inter,Arial,sans-serif;font-weight:700;font-size:clamp(16px,7cqw,24px);line-height:1.35;color:#111928;max-width:310px;margin:0}
.unlock{display:block;width:100%;max-width:265px;height:auto;min-height:48px;padding:14px 15px;border:0;border-radius:12px;background:#FF8A4C;color:#fff;font-family:Inter,Arial,sans-serif;font-size:16px;font-weight:600;line-height:1.4;margin:0;flex-shrink:0}
.unlock:hover:enabled{background:#FF8A4C;color:#fff;border:0}.unlock[aria-disabled=true]{cursor:default}
.locked small{display:block;font-family:Inter,Arial,sans-serif;font-size:14px;font-weight:400;letter-spacing:1px;color:#111928;margin:0}
@media(max-width:640px){header{padding:17px 20px}.tag{display:none}.brand{font-size:14px}main{padding:24px 14px}.intro h1{font-size:25px}.book{width:min(100%,390px);min-width:0;aspect-ratio:.707;transform:none!important}.book:before{left:0}.page{width:100%}.left{display:none}.right{border-radius:2px}}