* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #2b2b2b; color: #fff; font-family: Arial, sans-serif; }
body { display: grid; place-items: center; }
main { width: min(100%, 980px); height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 12px; }
.top, .controls { display: flex; align-items: center; gap: 12px; padding: 8px; flex: 0 0 auto; }
.brand { width: 58px; height: 42px; object-fit: contain; }
.top span { margin-left: auto; color: #bbb; font-size: 13px; }
button { border: 0; border-radius: 10px; background: #444; color: white; font-size: 22px; padding: 8px 14px; cursor: pointer; }
.book { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; perspective: 1800px; overflow: hidden; }
.book img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 3px; filter: drop-shadow(0 16px 28px #0009); transform-origin: left center; transition: transform .42s ease, opacity .25s ease; }
.book.turn-next img { transform: rotateY(-88deg); opacity: .3; }
.book.turn-prev img { transform-origin: right center; transform: rotateY(88deg); opacity: .3; }
.controls { justify-content: center; }
.controls input { width: min(70vw, 520px); accent-color: #e60005; }
@media (max-width: 600px) { main { padding: 4px; } .top { padding: 5px; } .brand { width: 48px; height: 36px; } }