@import "https://fonts.googleapis.com/css2?family=Bangers&family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--bg-primary:#080b11;--bg-secondary:#0f1422;--bg-card:#141b2db3;--border-color:#ffffff14;--border-neon:#ff47574d;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#6b7280;--accent-coral:#ff4757;--accent-coral-glow:#ff475766;--accent-cyan:#00d2d3;--accent-cyan-glow:#00d2d366;--accent-lime:#10b981;--accent-amber:#f59e0b;--font-comic:"Bangers", cursive;--font-sans:"Outfit", system-ui, -apple-system, sans-serif;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--shadow-neon:0 0 20px #ff475726;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--accent-coral) var(--bg-secondary);margin:0;padding:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background-color:var(--accent-coral);border-radius:3px}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;margin:0;overflow-x:hidden}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);box-shadow:0 8px 32px #0000005e}.glass-panel-neon{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-neon);box-shadow:var(--shadow-neon)}.comic-title{font-family:var(--font-comic);letter-spacing:2px;text-shadow:2px 2px 0px #000, 4px 4px 0px var(--accent-coral-glow);text-transform:uppercase}.comic-btn{font-family:var(--font-sans);text-transform:uppercase;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-smooth);border:2px solid #000;align-items:center;gap:.5rem;padding:.6rem 1.2rem;font-weight:600;display:inline-flex;transform:translate(-3px,-3px);box-shadow:3px 3px #000}.comic-btn:hover{transform:translate(-1px,-1px);box-shadow:1px 1px #000}.comic-btn:active{transform:translate(1px,1px);box-shadow:0 0 #000}.comic-btn-primary{background-color:var(--accent-coral);color:#fff}.comic-btn-primary:hover{background-color:#ff6b81}.comic-btn-secondary{background-color:var(--bg-secondary);color:var(--text-primary);border-color:#fff3}.comic-btn-secondary:hover{background-color:var(--bg-primary);border-color:var(--text-primary)}.comic-badge{font-family:var(--font-comic);text-transform:uppercase;letter-spacing:1px;border:1px solid #000;border-radius:4px;padding:.25rem .6rem;font-size:.9rem;box-shadow:1px 1px #000}.book-viewport-container{flex:1;justify-content:center;align-items:center;width:100%;height:calc(100vh - 150px);padding:20px;display:flex;position:relative;overflow:hidden}.book-wrapper{justify-content:center;align-items:center;width:100%;max-width:1200px;height:100%;display:flex;position:relative}.st-page-flip-container{background-color:#111;border-radius:8px;transition:opacity .5s;overflow:hidden;box-shadow:0 25px 50px -12px #000000b3}.page-container{-webkit-user-select:none;user-select:none;background-color:#fff;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #0000001a}.page-container canvas{object-fit:contain;width:100%;height:100%;display:block}.filter-normal{filter:none}.filter-vintage{filter:sepia(.35)contrast(1.08)brightness(.96)saturate(.9);background-color:#faf0d9!important}.filter-vintage:after{content:"";pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:radial-gradient(#000 25%,#0000 26%),radial-gradient(#000 25%,#0000 26%);background-position:0 0,1.5px 1.5px;background-size:3px 3px;position:absolute;inset:0}.filter-ink{filter:grayscale()contrast(1.6)brightness(1.04)}.filter-sepia{filter:sepia(.7)contrast(1.02)brightness(.95);background-color:#f4ecd8!important}.filter-halftone{position:relative}.filter-halftone canvas{filter:contrast(1.2)brightness(1.02)}.filter-halftone:after{content:"";pointer-events:none;opacity:.12;mix-blend-mode:multiply;background-color:#0000;background-image:radial-gradient(circle,#000 15%,#0000 16%),radial-gradient(circle,#000 15%,#0000 16%);background-position:0 0,4px 4px;background-repeat:repeat,repeat;background-size:8px 8px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0}.page-corner-num{font-family:var(--font-sans);color:#00000073;z-index:10;background:#fff9;border-radius:4px;padding:2px 6px;font-size:.85rem;font-weight:700;position:absolute;bottom:12px}.page-container:nth-child(2n) .page-corner-num{left:12px}.page-container:nth-child(odd) .page-corner-num{right:12px}.controls-container{z-index:100;border-top:1px solid var(--border-color);height:86px;transition:var(--transition-smooth);flex-direction:column;justify-content:center;padding:0 2rem;display:flex;position:fixed;bottom:0;left:0;right:0}.controls-main-bar{justify-content:space-between;align-items:center;gap:1.5rem;width:100%;display:flex}.controls-group{align-items:center;gap:.75rem;display:flex}.seek-slider{appearance:none;cursor:pointer;width:100%;height:6px;transition:var(--transition-smooth);background:#ffffff1a;border-radius:3px;outline:none}.seek-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-coral);width:16px;height:16px;box-shadow:0 0 10px var(--accent-coral-glow);cursor:pointer;transition:var(--transition-smooth);border-radius:50%}.seek-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.seek-slider-container{align-items:center;gap:1rem;width:100%;max-width:450px;display:flex}.custom-select{border:1px solid var(--border-color);color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);transition:var(--transition-smooth);background:#ffffff0d;outline:none;padding:.4rem .8rem;font-size:.9rem}.custom-select:hover{border-color:var(--accent-cyan);background:#ffffff1a}@media (width<=768px){.controls-container{height:auto;padding:1rem}.controls-main-bar{flex-direction:column;gap:1rem}.seek-slider-container{max-width:100%}.book-viewport-container{height:calc(100vh - 220px);padding:10px}}@keyframes pulse-glow{0%,to{box-shadow:0 0 15px #ff475733}50%{box-shadow:0 0 25px #ff475766}}.pulse-glow-border{animation:2s ease-in-out infinite pulse-glow}.library-hero{background:radial-gradient(circle at 50% 30%, #1e152a 0%, var(--bg-primary) 70%);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.library-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;width:100%;max-width:1000px;margin:3rem 0;display:grid}.comic-card{border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-smooth);border:1px solid var(--border-color);background:#ffffff05;position:relative;overflow:hidden}.comic-card:hover{border-color:var(--accent-coral);transform:translateY(-8px);box-shadow:0 12px 24px -10px #ff475766}.comic-card-cover{object-fit:cover;border-bottom:1px solid var(--border-color);background:#111;justify-content:center;align-items:center;width:100%;height:280px;display:flex}.comic-card-info{text-align:left;padding:1.2rem}.comic-card-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;margin-bottom:.25rem;font-size:1.1rem;font-weight:700;overflow:hidden}.comic-card-author{color:var(--text-secondary);font-size:.85rem}.input-glow-focus:focus{border-color:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan-glow);outline:none}.speech-drawer{z-index:150;border-left:1px solid var(--border-color);background:var(--bg-card);-webkit-backdrop-filter:blur(24px);flex-direction:column;width:380px;transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:64px;bottom:86px;right:0;transform:translate(100%);box-shadow:-10px 0 30px #00000080}.speech-drawer.open{transform:translate(0)}.speech-drawer-content{flex-direction:column;gap:1.5rem;height:100%;padding:1.5rem;display:flex;overflow-y:auto}.narration-box{color:#1c1917;font-family:var(--font-sans);transition:var(--transition-smooth);background:#fef08a;border:3px solid #000;border-radius:4px;margin-top:.75rem;margin-bottom:.5rem;padding:1.25rem;font-size:.95rem;font-weight:700;line-height:1.5;position:relative;box-shadow:4px 4px #000}.narration-box:before{content:"NARRATION";background:var(--accent-coral);color:#fff;font-family:var(--font-comic);letter-spacing:1px;border:2px solid #000;border-radius:2px;padding:1px 6px;font-size:.75rem;position:absolute;top:-12px;left:12px;box-shadow:1px 1px #000}.narration-box-empty{color:var(--text-secondary);border:2px dashed var(--border-color);box-shadow:none;background:#ffffff08;font-weight:500}.narration-box-empty:before{content:"VOICE SCRIPT";background:var(--text-muted)}.speech-field-group{flex-direction:column;gap:.4rem;display:flex}.speech-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:700}.speech-textarea{color:#fff;border-radius:var(--radius-sm);font-family:var(--font-sans);resize:vertical;min-height:100px;transition:var(--transition-smooth);background:#0000004d;border:2px solid #000;outline:none;padding:.8rem;font-size:.9rem;box-shadow:2px 2px #ffffff1a}.speech-textarea:focus{border-color:var(--accent-cyan);box-shadow:2px 2px 0px var(--accent-cyan-glow)}.audio-wave-container{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:#ffffff08;align-items:center;gap:.75rem;padding:.6rem 1rem;display:flex}.audio-wave{justify-content:center;align-items:flex-end;gap:3px;width:45px;height:24px;display:flex}.audio-wave-bar{background-color:var(--accent-cyan);border-radius:1.5px;width:3px;height:4px;animation:.1s infinite alternate bounce}.audio-wave-bar:first-child{animation-duration:.28s;animation-delay:.1s}.audio-wave-bar:nth-child(2){animation-duration:.36s;animation-delay:.25s}.audio-wave-bar:nth-child(3){animation-duration:.22s;animation-delay:50ms}.audio-wave-bar:nth-child(4){animation-duration:.32s;animation-delay:.18s}.audio-wave-bar:nth-child(5){animation-duration:.26s;animation-delay:.12s}.audio-wave.paused .audio-wave-bar{background-color:var(--text-muted);height:4px!important;animation:none!important}@keyframes bounce{0%{height:4px}to{height:22px}}.pulse-speaking{position:relative}.pulse-speaking:after{content:"";border:2px solid var(--accent-cyan);border-radius:inherit;animation:1.5s cubic-bezier(.4,0,.6,1) infinite pulse-ring;position:absolute;inset:-2px}@keyframes pulse-ring{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.2)}}@media (width<=768px){.speech-drawer{width:100%;top:64px;bottom:220px}}