*{box-sizing:border-box}body{margin:0;background:#eeece5;color:#10151f;font-family:Arial,sans-serif}.reader{max-width:900px;margin:auto;padding:16px}.reader-heading{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:1.2px;margin-bottom:18px}.reader-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.reader-controls button{background:#214ce8;color:white;border:0;border-radius:3px;min-height:44px;padding:10px 18px;font-size:14px;font-weight:bold;cursor:pointer}.reader-controls button:disabled{background:#d5d7db;color:#777;cursor:default}#page-caption{font-size:12px;text-align:center;line-height:1.5}.book-stage{height:360px;display:flex;align-items:center;justify-content:center;padding:24px 14px;background:radial-gradient(ellipse at center,#384253,#10151f);border-radius:3px;touch-action:pan-y;overflow:hidden;perspective:1600px}.book{position:relative;width:min(100%,482px);aspect-ratio:2300/1490;transform-style:preserve-3d;filter:drop-shadow(0 12px 14px #0006)}.sheet,.flipper{position:absolute;top:0;width:50%;height:100%}.sheet{background:#f5f1e8;overflow:hidden}.left{left:0;border-radius:2px 0 0 2px}.right{right:0;border-radius:0 2px 2px 0}.sheet.blank{background:transparent}.sheet img,.face img{display:block;width:100%;height:100%;object-fit:fill;cursor:zoom-in}.left:after,.right:after{content:"";position:absolute;inset:0;pointer-events:none}.left:not(.blank):after{background:linear-gradient(90deg,transparent 85%,#0003)}.right:not(.blank):after{background:linear-gradient(90deg,#0003,transparent 15%)}.flipper{left:50%;transform-origin:left center;transform-style:preserve-3d;z-index:4;display:none;transition:transform 700ms cubic-bezier(.35,.1,.25,1)}.face{position:absolute;inset:0;backface-visibility:hidden;background:#f5f1e8;overflow:hidden}.face:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0003,transparent 30%,#fff2)}.back{transform:rotateY(180deg)}.face.blank{background:transparent}.spine{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#0003;z-index:5;pointer-events:none}.reader-hint{text-align:center;font-size:11px;color:#626875;line-height:1.6;margin:14px 0}.reader-bottom{display:flex;justify-content:center;gap:24px;align-items:center}.reader-bottom a,.reader-bottom button{font:12px Arial,sans-serif;color:#214ce8;text-decoration:underline;text-underline-offset:4px}.reader-bottom button{border:0;padding:6px;background:transparent;cursor:pointer}button:focus-visible,a:focus-visible,.book-stage:focus-visible{outline:3px solid #214ce8;outline-offset:3px}dialog{width:min(900px,96vw);max-height:94svh;border:0;padding:52px 12px 12px;background:#eeece5}dialog::backdrop{background:#000b}dialog img{display:block;width:100%;height:auto}#zoom-close{position:sticky;top:0;float:right;margin-top:-42px;z-index:2;border:1px solid #ddd;padding:10px 18px;background:white;color:#111;cursor:pointer}@media(max-width:500px){.reader{padding:12px 8px}.reader-heading{font-size:9px;letter-spacing:.7px}.reader-controls button{padding:10px 12px}.book-stage{height:255px;padding:20px 8px}#page-caption{font-size:11px}.reader-hint{font-size:10px}}@media(prefers-reduced-motion:reduce){.flipper{transition:none}}

/* Compact magazine frame: fit the spread instead of a full-width stage. */
.reader{max-width:560px;padding:12px}.reader-heading{margin-bottom:12px}.book-stage{height:auto;padding:12px 8px;background:transparent}.book{width:100%;max-width:482px}.book.cover{transform:translateX(-25%)}.book.ending{transform:translateX(25%)}.reader-hint{margin:8px 0}.reader-bottom{gap:20px}@media(max-width:500px){.reader{padding:10px 8px}.book-stage{height:auto;padding:10px 4px}.reader-heading{margin-bottom:10px}.reader-controls{margin-bottom:8px}}