*{box-sizing:border-box;margin:0;padding:0}body{background:#ececec;font-family:Arial,sans-serif}.app{flex-direction:column;justify-content:center;align-items:center;height:100vh;padding:40px;display:flex}.page{background:0 0;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex;overflow:hidden}.page img{object-fit:cover;width:100%;height:100%;display:block}.controls{gap:20px;margin-bottom:30px;display:flex}.controls button{cursor:pointer;padding:12px 20px;font-size:16px}.book-wrapper{justify-content:center;align-items:center;width:1000px;display:flex;position:relative}.nav-btn{cursor:pointer;z-index:999;background:#fff;border:none;border-radius:50%;width:56px;height:56px;font-size:28px;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 3px 10px #0000002e}.prev-btn{left:-90px}.next-btn{right:-90px}.book-area{flex-direction:column;align-items:center;display:flex;position:relative}.page-indicator{color:#444;font-size:20px;font-weight:600;position:absolute;bottom:-40px;right:0}@media (width<=768px){.app{flex-direction:column;align-items:center;padding:10px 0;display:flex}.book-wrapper{width:100%}.prev-btn{left:5px}.next-btn{right:5px}.nav-btn{cursor:pointer;z-index:999;background:0 0;border:none;border-radius:50%;width:30px;height:30px;font-size:20px;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 3px 10px #0000002e}}