.flip-book{position:relative;perspective:2500px;-webkit-user-select:none;user-select:none}.book-page{position:absolute;top:0;width:50%;height:100%;overflow:hidden;background:#fdf6e3}.left-page{left:0;border-radius:3px 0 0 3px;box-shadow:-6px 4px 18px #00000038,0 20px 40px #00000024,inset -3px 0 8px #00000012}.right-page{right:0;border-radius:0 3px 3px 0;box-shadow:6px 4px 18px #00000038,0 20px 40px #00000024,inset 3px 0 8px #00000012}.page-empty{background:transparent!important;box-shadow:none!important}.book-page.clickable{cursor:pointer}.book-page.clickable:after{content:"";position:absolute;inset:0;background:transparent;transition:background .2s ease;pointer-events:none}.book-page.clickable:hover:after{background:#00000008}.book-spine{position:absolute;left:50%;top:0;bottom:0;width:8px;transform:translate(-50%);background:linear-gradient(to right,#0000002e,#c8a882e6 40%,#fff0c8cc,#c8a882e6 60%,#00000026);z-index:5;pointer-events:none}.page-turn-hint{position:absolute;bottom:14px;font-size:28px;line-height:1;color:#0000002e;transition:color .2s ease;pointer-events:none;font-family:serif}.book-page.clickable:hover .page-turn-hint{color:#00000073}.left-hint{left:14px}.right-hint{right:14px}.flip-page{position:absolute;top:0;left:50%;width:50%;height:100%;transform-style:preserve-3d;z-index:10;transform-origin:left center}.flip-forward{animation:flipForward .6s cubic-bezier(.4,0,.2,1) both}.flip-backward{animation:flipBackward .6s cubic-bezier(.4,0,.2,1) both}@keyframes flipForward{0%{transform:rotateY(0)}to{transform:rotateY(-180deg)}}@keyframes flipBackward{0%{transform:rotateY(-180deg)}to{transform:rotateY(0)}}.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fdf6e3;overflow:hidden}.flip-back{transform:rotateY(180deg)}