body { background: #05010a; color: #e0d0ff; font-family: 'Quicksand', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.container { text-align: center; width: 90%; max-width: 850px; }
.glow-text { font-family: 'Cinzel', serif; font-size: 2.8rem; text-shadow: 0 0 15px #bc8cf2; margin-bottom: 5px; }
.subtitle { color: #bc8cf2; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 30px; text-transform: uppercase; }
.book-frame { background: rgba(25, 10, 45, 0.96); border: 2px solid #7a3fb8; border-radius: 25px; padding: 35px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.9); }
.image-wrapper { width: 100%; height: 420px; background: #000; border-radius: 15px; margin-bottom: 25px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid #442168; }
#page-image { max-width: 100%; max-height: 100%; object-fit: cover; transition: opacity 0.8s ease; }
.text-content { font-size: 1.25rem; line-height: 1.8; min-height: 140px; margin-bottom: 25px; text-align: left; font-weight: 400; color: #f0eaff; }
.nav-btn { background: #7a3fb8; color: white; border: none; padding: 12px 30px; border-radius: 30px; cursor: pointer; font-weight: bold; transition: 0.3s; font-size: 1rem; }
.nav-btn:hover { background: #bc8cf2; transform: scale(1.05); }
.page-counter { color: #bc8cf2; font-weight: 500; font-size: 1.1rem; }
.util-btn { background: rgba(255, 255, 255, 0.08); color: #d1b3ff; border: 1px solid rgba(188, 140, 242, 0.2); padding: 10px 20px; border-radius: 15px; cursor: pointer; margin: 5px; font-size: 0.9rem; transition: 0.2s; }
.util-btn:hover { background: rgba(188, 140, 242, 0.2); }
.exit { color: #ff8080; border-color: rgba(255, 128, 128, 0.2); }
input { background: rgba(255,255,255,0.05); border: 1px solid #7a3fb8; padding: 15px; border-radius: 15px; color: white; width: 300px; outline: none; margin-right: 10px; }