:root{--primary-color: #1f3a5a;--secondary-color: #f0eadd;--accent-color: #c8a97e;--cover-color: #4a3c31;--paper-bg: #fdfaf5;--text-color: #3a3530;--light-text-color: var(--paper-bg);--title-plate-bg: #e4dacf;--title-plate-border: #b4a086;--border-color: #d1c8bc;--shadow-color: rgba(60, 50, 40, .15);--shadow-color-darker: rgba(60, 50, 40, .35);--font-heading: "Lato", sans-serif;--font-body: "Playfair Display", serif;--mobile-breakpoint: 768px}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-body);background-color:var(--secondary-color);background-image:linear-gradient(45deg,rgba(0,0,0,.01) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.01) 75%,rgba(0,0,0,.01)),linear-gradient(45deg,rgba(0,0,0,.01) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.01) 75%,rgba(0,0,0,.01));background-size:4px 4px;background-position:0 0,2px 2px;color:var(--text-color);line-height:1.7;overflow:hidden;min-height:100vh;position:relative}.view{position:absolute;top:0;left:0;width:100%;height:100vh;opacity:0;visibility:hidden;display:none;overflow:hidden}body.show-prompt .prompt-view,body.show-book .book-view{opacity:1;visibility:visible;display:flex;z-index:10}body.show-book .book-view{z-index:5}.prompt-view{align-items:center;justify-content:center;background:var(--secondary-color);background-image:inherit;background-size:inherit;background-position:inherit;z-index:20}.book-cover{width:90%;max-width:450px;aspect-ratio:3 / 4;background:linear-gradient(145deg,var(--cover-color),#5a4b40);border-radius:8px 4px 4px 8px;box-shadow:10px 10px 30px var(--shadow-color-darker),inset 3px 3px 5px #ffffff0d,inset -3px -3px 5px #0003;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 30px;border:1px solid rgba(0,0,0,.2);text-align:center}.book-cover h1{font-family:var(--font-body);font-weight:600;font-style:italic;color:var(--accent-color);font-size:1.8rem;margin-bottom:15px;text-shadow:1px 1px 3px rgba(0,0,0,.4);letter-spacing:1px;line-height:1.3}.book-cover textarea{width:85%;height:90px;padding:12px 15px;margin-top:10px;margin-bottom:30px;background-color:var(--title-plate-bg);border:1px solid var(--title-plate-border);border-radius:3px;font-family:var(--font-body);font-size:1.1rem;font-style:italic;text-align:center;color:var(--primary-color);box-shadow:inset 0 0 10px #00000026;resize:none;line-height:1.5}.book-cover textarea::placeholder{color:#3c322880;font-style:italic}.book-cover textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #c8a97e4d,inset 0 0 10px #00000026}.book-cover button#generateButton{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 30px;background-color:var(--accent-color);color:var(--cover-color);border:1px solid rgba(0,0,0,.2);border-radius:25px;font-size:1.1rem;font-family:var(--font-heading);font-weight:700;cursor:pointer;box-shadow:0 4px 10px #0003;letter-spacing:.5px}.book-cover button#generateButton:hover:not(:disabled){background-color:#d4b994;box-shadow:0 6px 15px #0000004d}.book-cover button#generateButton:disabled{background-color:#a8947a;cursor:not-allowed;box-shadow:none;transform:none;color:#776b5d}.book-view{flex-direction:row;background-color:transparent;position:relative;z-index:5;display:flex}.book-page{flex:0 0 50%;width:50%;height:100%;overflow-y:auto;padding:50px 55px;position:relative;top:auto;left:auto;overscroll-behavior:contain;box-shadow:0 0 30px #00000012;background-color:transparent;opacity:1;display:flex;flex-direction:column;align-items:center}#leftPage{align-items:center;justify-content:center;background-color:var(--secondary-color);box-shadow:inset -8px 0 15px -10px #0000001a,0 0 30px #00000012;padding:40px;border-right:1px solid rgba(0,0,0,.03);z-index:1}#rightPage{align-items:flex-start;background-color:var(--paper-bg);box-shadow:inset 8px 0 15px -10px #00000014,0 0 30px #00000012;padding:60px 70px;z-index:2}.book-page .page-content-wrapper{opacity:0;visibility:hidden;position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.book-page .page-content-wrapper.visible{opacity:1;visibility:visible}.book-page .page-content-wrapper.hiding{opacity:0;visibility:hidden}#pageImage{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 8px 25px #00000026;opacity:1;visibility:visible}#pageNarration{font-size:1.2rem;line-height:1.9;color:var(--text-color);white-space:pre-wrap;font-style:italic;min-height:1.5em;width:100%;opacity:1;visibility:visible}.book-page::-webkit-scrollbar{width:8px}.book-page::-webkit-scrollbar-track{background:transparent}.book-page::-webkit-scrollbar-thumb{background-color:#3c322833;border-radius:4px}.book-page::-webkit-scrollbar-thumb:hover{background-color:#3c322866}.book-page{scrollbar-width:thin;scrollbar-color:rgba(60,50,40,.2) transparent}.bottom-nav{position:fixed;bottom:25px;left:50%;transform:translate(-50%);width:auto;height:auto;background-color:#fdfaf5e6;border-radius:35px;box-shadow:0 8px 25px var(--shadow-color-darker);display:flex;align-items:center;padding:12px 22px;gap:18px;opacity:0;visibility:hidden;z-index:100;border:1px solid rgba(200,169,126,.3)}body.show-book .bottom-nav{opacity:1;visibility:visible;transform:translate(-50%)}.nav-button{background:none;border:none;color:var(--primary-color);font-family:var(--font-heading);font-size:1rem;font-weight:700;cursor:pointer;padding:8px 14px;border-radius:25px;display:inline-flex;align-items:center;gap:8px;line-height:1}.nav-button:hover:not(:disabled){background-color:#c7a97e33;color:#000}.nav-button:disabled{color:var(--border-color)!important;cursor:not-allowed;background-color:transparent!important;opacity:.5;transform:none}.nav-button svg{font-size:1.1rem;vertical-align:middle}#pageIndicator{font-family:var(--font-heading);font-size:.9rem;font-weight:600;color:var(--text-color);opacity:.7;padding:0 8px;white-space:nowrap}@media (max-width: 768px){html{font-size:15px}.book-cover{max-width:320px;padding:30px 20px}.book-cover h1{font-size:1.5rem}.book-cover textarea{width:90%;height:70px;font-size:1rem}.book-cover button#generateButton{font-size:1rem;padding:10px 25px}.book-view{flex-direction:column}.book-page{flex:none;width:100%;height:50%;position:relative;left:auto;padding:30px 35px;box-shadow:none;opacity:1;overflow-y:auto;overscroll-behavior:contain}#leftPage{border-right:none;border-bottom:1px solid var(--border-color);padding:25px;height:50vh;box-shadow:inset 0 -8px 15px -10px #0000001a;z-index:1}#rightPage{border-left:none;padding:35px 40px;height:50vh;box-shadow:inset 0 8px 15px -10px #00000014;z-index:1}#pageImage{max-height:calc(50vh - 50px)}#pageNarration{font-size:1.1rem;line-height:1.8}.bottom-nav{padding:10px 18px;gap:12px;bottom:20px;border-radius:30px}.nav-button{font-size:.9rem;padding:7px 12px;gap:6px}.nav-button svg{font-size:1rem}#pageIndicator{font-size:.85rem;padding:0 5px}}@media (max-width: 480px){html{font-size:14px}.book-cover{max-width:280px;padding:25px 15px}.book-cover h1{font-size:1.3rem}.book-cover textarea{height:60px;font-size:.9rem}.book-cover button#generateButton{font-size:.9rem;padding:9px 20px;gap:8px}.bottom-nav{gap:8px;padding:8px 12px;border-radius:25px}.nav-button{padding:6px 10px;font-size:.85rem}.nav-button svg{font-size:1rem}#leftPage{height:45vh;padding:20px}#rightPage{height:55vh;padding:30px 25px}#pageImage{max-height:calc(45vh - 40px)}#pageNarration{font-size:1rem}}.view{transition:opacity var(--view-transition-speed) ease-in-out,visibility 0s linear var(--view-transition-speed);display:flex}body.show-prompt .prompt-view,body.show-book .book-view{transition:opacity var(--view-transition-speed) ease-in-out,visibility 0s linear 0s;display:flex}body:not(.show-prompt) .prompt-view,body:not(.show-book) .book-view{opacity:0;visibility:hidden;display:none}.book-page .page-content-wrapper{transition:opacity var(--content-fade-duration) ease-in-out,visibility 0s linear var(--content-fade-duration);opacity:0;visibility:hidden}.book-page .page-content-wrapper.visible{transition:opacity var(--content-fade-duration) ease-in-out,visibility 0s linear 0s;opacity:1;visibility:visible}.book-view.flipping .book-page .page-content-wrapper.visible{opacity:.5!important;transition:opacity .2s ease-out}.word-span{display:inline-block;opacity:0;transform:translateY(10px) scale(.95);transition:opacity .4s ease-out,transform .4s ease-out;will-change:opacity,transform;visibility:visible;color:inherit}.word-span.visible{opacity:1;transform:translateY(0) scale(1)}.book-cover button#generateButton{transition:all .3s ease}.book-cover button#generateButton:hover:not(:disabled){background-color:#d4b994;transform:translateY(-2px);box-shadow:0 6px 15px #0000004d}.nav-button{transition:background-color .3s ease,color .3s ease,transform .2s ease}.nav-button:hover:not(:disabled){background-color:#c7a97e33;color:#000;transform:translateY(-2px)}.bottom-nav{transform:translate(-50%,20px);opacity:0;visibility:hidden}body.show-book .bottom-nav{opacity:1;visibility:visible;transform:translate(-50%);transition:opacity .5s ease-out calc(var(--unfold-duration) * .8),transform .5s ease-out calc(var(--unfold-duration) * .8),visibility 0s linear calc(var(--unfold-duration) * .8)}@media (max-width: 768px){body.show-book .bottom-nav{transition-delay:.3s}}.page-flip-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;perspective:2000px;z-index:20;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.book-view.flipping .page-flip-container{opacity:1;visibility:visible}.page-flip{position:absolute;width:50%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.645,.045,.355,1)}.page-flip-front,.page-flip-back{position:absolute;width:100%;height:100%;top:0;left:0;backface-visibility:hidden;overflow:hidden}.page-flip-front{z-index:1;transform:rotateY(0);box-shadow:inset 8px 0 15px -10px #00000014}.page-flip-back{z-index:0;transform:rotateY(180deg);box-shadow:inset -8px 0 15px -10px #00000014}.page-flip-next{right:0;transform-origin:left center;transform:rotateY(0)}.book-view.flipping-forward .page-flip-next{transform:rotateY(-180deg)}.page-flip-prev{left:0;transform-origin:right center;transform:rotateY(180deg)}.book-view.flipping-backward .page-flip-prev{transform:rotateY(0)}.page-flip:after{content:"";position:absolute;top:0;width:4px;height:100%;background:linear-gradient(to right,#0000001a,#00000003);z-index:10;opacity:0;transition:opacity .7s}.page-flip-next:after{left:0}.page-flip-prev:after{right:0}.book-view.flipping-forward .page-flip-next:after,.book-view.flipping-backward .page-flip-prev:after{opacity:1}@media (max-width: 768px){.page-flip-container{display:none}}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-spin{animation:fa-spin 1.5s linear infinite}.page-content-clone{padding:60px 70px;font-size:1.2rem;line-height:1.9;font-style:italic;color:var(--text-color);white-space:pre-wrap;max-width:100%;max-height:100%;object-fit:contain;box-sizing:border-box}@media (max-width: 768px){.page-content-clone{padding:35px 40px;font-size:1.1rem}}@media (max-width: 480px){.page-content-clone{padding:30px 25px;font-size:1rem}}.audio-control-button{position:absolute;bottom:20px;right:20px;width:40px;height:40px;border-radius:50%;background-color:var(--accent-color);color:var(--text-color);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0003;transition:transform .2s ease,background-color .2s ease;z-index:5}.audio-control-button:hover{transform:translateY(-2px);background-color:#d4b994}.audio-control-button:active{transform:translateY(0)}.audio-control-button svg{font-size:1.2rem}@media (max-width: 768px){.audio-control-button{bottom:70px;right:15px;width:35px;height:35px}}