html,body{overflow-x:hidden;max-width:100%}
/* book.css — движок книги: листы, перелистывание, тени. Менять осторожно. */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
:root{--bookH:calc(min(1200px,96vw,117vh)/1.5)}
body{min-height:100vh;background:#f2f4f7;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;font-family:Georgia,serif}
.book{position:relative;width:min(1200px,96vw,117vh);height:var(--bookH);perspective:3200px;box-shadow:0 24px 70px rgba(30,40,60,.25),0 4px 16px rgba(30,40,60,.12);touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.base{position:absolute;top:0;width:50%;height:100%;background:#fbfbfa}
.base.left{left:0;border-radius:6px 0 0 6px;box-shadow:inset -14px 0 26px rgba(0,0,0,.10)}
.base.right{right:0;border-radius:0 6px 6px 0;box-shadow:inset 14px 0 26px rgba(0,0,0,.10)}
.sheet{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.4,.05,.3,1)}
.sheet.flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:0 6px 6px 0;transform-style:preserve-3d}
.face.back{transform:rotateY(180deg);border-radius:6px 0 0 6px}
.shadow-overlay{position:absolute;top:0;width:50%;height:100%;z-index:60;pointer-events:none;opacity:0}
.shadow-overlay.right-side{right:0;background:linear-gradient(to right,rgba(0,0,0,.28),transparent 65%)}
.shadow-overlay.left-side{left:0;background:linear-gradient(to left,rgba(0,0,0,.28),transparent 65%)}
.frame{cursor:pointer}