#reader{overflow-x:clip}
.art{background-image:var(--cover-image,url('stories.png'));background-size:var(--cover-size,300% 100%);background-position:var(--cover-position,var(--art) center)}
.books{row-gap:42px}
#page{position:relative;overflow:visible;isolation:isolate;box-shadow:0 3px 0 #d4ddd6,0 6px 0 #e9eee9,0 9px 0 #d4ddd6,0 18px 42px #21443b24;cursor:grab}
#page:active{cursor:grabbing}
#page>.page-art{border-radius:6px 0 0 6px}
#page>.page-copy{border-radius:0 6px 6px 0}
#page:after{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 16px);width:32px;background:linear-gradient(90deg,transparent,#153c351c 46%,#153c3533 50%,#fff6 53%,transparent);pointer-events:none;z-index:1}
.turn-stage{position:absolute;inset:0;z-index:3;perspective:2200px;perspective-origin:50% 45%;transform-style:preserve-3d;pointer-events:none}
.paper-content{position:absolute!important;top:0;display:grid;grid-template-columns:1fr 1fr;margin:0;background:white;box-sizing:border-box;overflow:hidden;border:0;border-radius:0;box-shadow:none;min-height:0;max-width:none}
.paper-content .page-art{height:100%;min-height:0}
.paper-content .page-copy{height:100%;min-height:0}
.copy-page-number{margin-top:auto;align-self:center;font-size:13px;color:#789083;padding-top:22px}
.turn-base{left:0;transform:translateZ(-1px)}
.stationary-paper{position:absolute;top:0;overflow:hidden;transform:translateZ(0)}
.paper-strip{position:absolute;top:0;left:0;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform}
.paper-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;transform:translateZ(.08px)}
.paper-back{transform:rotateY(180deg) translateZ(.08px)}
.paper-face:after{content:'';position:absolute;inset:0;background:#17372c;opacity:var(--paper-shade,0);pointer-events:none}
.cast-shadow{position:absolute;top:0;height:100%;background:linear-gradient(90deg,transparent,#16291d 45%,transparent);filter:blur(18px);transform-origin:center;pointer-events:none}
#page.is-turning{cursor:grabbing}
#page.is-turning:after{z-index:0}
.page-art{background-size:300% 200%;background-position:var(--scene-x,0%) var(--scene-y,0%);background-repeat:no-repeat}
@media(max-width:750px){#page:after{left:0;width:12px;background:linear-gradient(90deg,#153c351a,transparent)}#page>.page-art{border-radius:6px 6px 0 0;height:auto;aspect-ratio:1}#page>.page-copy{border-radius:0 0 6px 6px}.paper-content{grid-template-columns:1fr;grid-template-rows:var(--story-art-height) 1fr}.paper-content .page-art{height:var(--story-art-height)}.turn-stage{perspective:1600px;perspective-origin:0 50%}}
@media(prefers-reduced-motion:reduce){#page{cursor:default}}