:root{--bg:#121513;--bg2:#171b18;--panel:#1b211d;--panel2:#202720;--stroke:#303a33;--txt:#f3f1e8;--soft:#a9b0a4;--muted:#7b887d;--gold:#e2bc75;--green:#c3dab0;--black:#10140f;--radius:13px;--mobileNav:0px}
*{box-sizing:border-box}html{height:100%;scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;font-size:14px}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,.transcript-item:focus-visible{outline:2px solid var(--gold);outline-offset:3px}svg{width:21px;height:21px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#4b554c;border-radius:100px}::-webkit-scrollbar-track{background:transparent}a{color:var(--gold)}
.app{display:grid;grid-template-columns:275px minmax(0,1fr) 334px;min-height:100dvh;width:100%;height:100dvh;overflow:hidden}.sidebar{background:#171c18;border-right:1px solid var(--stroke);display:flex;flex-direction:column;min-width:0}.brand{display:flex;align-items:center;gap:12px;padding:24px 19px 24px;border-bottom:1px solid #2a322b}.logo{width:48px;height:48px;display:grid;place-items:center;flex-shrink:0;font-family:Georgia,serif;font-size:20px;font-weight:bold;letter-spacing:-2px;color:#161b16;background:#dcc79b;border-radius:13px;transform:rotate(-2deg)}.logo span{font-size:13px;padding:0 1px;color:#596047}.brand-text{display:flex;flex-direction:column;gap:6px}.brand-text strong{font-family:Georgia,serif;font-weight:700;letter-spacing:1.25px;font-size:16px;white-space:nowrap}.brand-text small{font-size:9px;letter-spacing:2.1px;color:#a5b0a5;font-weight:700}.sidebar-close{display:none!important}.sidebar-scroll{flex:1;overflow:auto;padding:23px 14px 12px}.eyebrow{color:#a5b29f;font-size:10px;font-weight:800;letter-spacing:2.05px}.sidebar-scroll>.eyebrow{margin-left:11px;margin-bottom:15px}.collection-picker{display:grid;gap:8px}.collection-option{width:100%;color:#b2bfb0;border:1px solid transparent;display:flex;align-items:center;gap:12px;text-align:left;padding:12px;border-radius:12px;background:transparent;transition:background .2s,border .2s}.collection-option:hover{background:#222922}.collection-option.active{background:#28342b;border-color:#4b604d;color:#f2f3e9}.collection-option>span:last-child{display:flex;flex-direction:column;gap:4px}.collection-option b{font-size:13px}.collection-option small{color:#a0aa9e;font-size:11px}.collection-icon{font-size:25px;line-height:1;width:35px;text-align:center;color:#d3bb8b}.sidebar-heading{display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:1.8px;color:#9bab9d;padding:28px 11px 14px}.sidebar-heading span:last-child{font-weight:500;color:#7b887d;letter-spacing:0}.chapters{display:flex;flex-direction:column;gap:4px}.chapter-link{border:1px solid transparent;background:transparent;display:flex;align-items:center;gap:12px;text-align:left;padding:9px 10px;width:100%;color:#a8b1a6;border-radius:9px}.chapter-link.active{background:rgba(197,215,178,.1);border-color:rgba(197,215,178,.23);color:#f6f8ef}.chapter-link:hover{background:rgba(255,255,255,.05)}.chapter-link .chapter-number{color:#839387;font-family:Georgia,serif;font-size:14px;min-width:30px}.chapter-link.active .chapter-number{color:var(--gold)}.chapter-link .chapter-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12.7px;font-weight:500}.sidebar-foot{border-top:1px solid var(--stroke);display:flex;align-items:center;gap:10px;color:#8f9d8e;padding:18px 24px;font-size:11px}.status-pulse{width:7px;height:7px;border-radius:50%;background:#a1d293;box-shadow:0 0 15px #8fc580}.sidebar-scrim{display:none}
.workarea{min-width:0;background:radial-gradient(ellipse at 50% 43%,#252c26 0%,#1b211d 45%,#151916 100%);display:flex;flex-direction:column;overflow:hidden}.topbar{height:74px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;padding:0 29px;flex-shrink:0}.topbar-start{display:flex;align-items:center;gap:16px;min-width:0}.breadcrumbs{display:flex;align-items:center;gap:12px;overflow:hidden;white-space:nowrap}.breadcrumbs span:first-child{letter-spacing:2px;font-size:10px;color:#9fae9d;font-weight:800}.breadcrumbs .slash{color:#586659}.breadcrumbs strong{font-size:13px;font-weight:600;color:#eee;overflow:hidden;text-overflow:ellipsis}.topbar-actions{display:flex;gap:17px;align-items:center}.live-label{font-size:10px;color:#b2baab;letter-spacing:2px;font-weight:700;white-space:nowrap}.live-label i{display:inline-block;width:6px;height:6px;border-radius:100%;background:#c9d09d;margin-right:8px;box-shadow:0 0 10px #b6c99e}.icon-button{display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);color:#d2ddd0;background:#232a24;width:38px;height:38px;border-radius:11px;padding:9px;flex-shrink:0}.icon-button:hover{background:#303a31}.mobile-menu{display:none}.reader{flex:1;display:flex;flex-direction:column;min-height:0;padding:14px clamp(12px,3vw,35px) 0;max-width:100%}.reader-head{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.reading-label{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:1.6px;color:#c2cfbe}.reading-label small{color:#859185;letter-spacing:0;font-size:11px;font-weight:400}.line-dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}.reading-actions{display:flex;gap:13px}.text-button{border:0;background:transparent;color:#aebbae;display:flex;align-items:center;gap:7px;font-size:11px}.text-button:hover{color:white}.reader-stage{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;justify-content:center;align-items:flex-start;padding:15px 60px 18px;scrollbar-width:thin}.book-page{position:relative;width:min(100%,660px);flex:none;background:#e6e5df;box-shadow:0 15px 50px #0009,0 0 0 1px #545d4d;border:7px solid #f7f6ef;transition:width .2s;overflow:visible}.book-page img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}.book-page.zoomed{width:min(122%,1020px)}.glow-layer{position:absolute;inset:0;pointer-events:none}.spot{position:absolute;border:1.5px solid transparent;border-radius:5px;background:transparent;pointer-events:auto;cursor:pointer;transition:background .25s,box-shadow .25s,border-color .25s;user-select:none}.spot:hover{border-color:rgba(223,185,97,.6);background:rgba(249,216,110,.12)}.spot.active{border:2.2px solid rgba(250,189,58,.94);background:rgba(255,207,69,.24);box-shadow:0 0 0 2px rgba(255,239,193,.1),0 0 31px 4px rgba(255,173,45,.74),inset 0 0 22px rgba(255,238,120,.4);animation:goldGlow 2.4s ease-in-out infinite alternate;z-index:3}.spot.active:after{content:'';position:absolute;top:-7px;right:-7px;width:11px;height:11px;border-radius:50%;background:#ffdb83;box-shadow:0 0 13px #f0b45f}@keyframes goldGlow{from{box-shadow:0 0 3px 2px rgba(255,193,60,.4),0 0 16px rgba(255,180,55,.5),inset 0 0 5px rgba(255,220,100,.3)}to{box-shadow:0 0 5px 3px rgba(255,214,110,.65),0 0 33px 5px rgba(255,185,52,.8),inset 0 0 20px rgba(255,220,100,.38)}}.glow-layer.hidden .spot{display:none}.page-loading{position:absolute;top:35%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:14px;align-items:center;color:#eff5e8;z-index:1}.page-loading span{font-family:Georgia,serif;font-weight:bold;letter-spacing:2px;font-size:28px}.page-loading small{font-size:12px;color:#999}.reader-stage.loaded .page-loading{display:none}.stage-arrow{position:fixed;top:49%;width:38px;height:53px;background:#252c28e8;border:1px solid #556055;color:#e0e7dc;font-size:30px;display:grid;place-items:center;border-radius:11px;z-index:9}.stage-arrow.left{left:calc(275px + 2.7vw)}.stage-arrow.right{right:calc(334px + 2.7vw)}.stage-arrow:hover{background:#37453a}.stage-stamp{position:sticky;top:12px;align-self:flex-start;margin-left:auto;margin-right:-25px;padding:8px 10px;border-radius:8px;border:1px solid #39473d;color:#c5cbbf;background:#1b231ed9;font-family:Georgia,serif;font-size:13px;white-space:nowrap}.reader-footer{height:74px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #303930;padding:0 18px}.chapter-name{display:flex;gap:6px;flex-direction:column;min-width:0}.chapter-name span{font-size:9px;letter-spacing:2px;color:#8c9e8d;font-weight:800}.chapter-name strong{font-family:Georgia,serif;font-size:19px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-controls{display:flex;align-items:center;gap:14px;color:#adb9ae}.page-controls>span{font-size:11px;white-space:nowrap}.mini-arrow{width:34px;height:34px;border:1px solid #465246;border-radius:9px;background:#202820;color:#e6e5de}.mini-arrow:hover{background:#304134}
.audio-panel{background:#191f1a;border-left:1px solid #313b34;display:flex;flex-direction:column;min-height:0}.audio-panel-header{padding:28px 24px 20px;display:flex;justify-content:space-between;gap:8px}.audio-panel-header h2{font-family:Georgia,serif;font-size:24px;font-weight:500;margin:7px 0 0}.mobile-panel-close{display:none}.narrator-card{background:linear-gradient(125deg,#2a3a2f,#233127);border:1px solid #465a47;border-radius:13px;display:flex;align-items:center;gap:14px;margin:0 20px 19px;padding:13px}.voice-avatar{width:45px;height:45px;background:#b7ccae;color:#1b2920;border-radius:50%;display:grid;place-items:center}.voice-avatar svg{width:25px;height:25px}.narrator-text{display:flex;flex-direction:column;gap:4px;flex:1}.narrator-text strong{font-size:15px}.narrator-text small{font-size:10px;color:#bbc8b7}.voice-meter{display:flex;gap:3px;align-items:center;height:20px}.voice-meter i{display:block;width:3px;background:#d6b875;border-radius:4px;height:7px;opacity:.7}.voice-meter i:nth-child(2){height:15px}.voice-meter i:nth-child(3){height:19px}.voice-meter i:nth-child(4){height:11px}.playing .voice-meter i{animation:wave .6s ease-in-out infinite alternate}.playing .voice-meter i:nth-child(2){animation-delay:.1s}.playing .voice-meter i:nth-child(3){animation-delay:.2s}.playing .voice-meter i:nth-child(4){animation-delay:.3s}@keyframes wave{to{height:5px}}.sound-options{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;align-items:center;padding:0 23px}.sound-options label{font-size:11px;color:#a5b1a5}.sound-options select,.setting-row select{padding:10px 30px 10px 10px;border-radius:9px;background:#222c24;color:#eff2e6;border:1px solid #455045;min-width:0}.mode-info{margin:14px 22px;color:#c5c9b7;font-size:11px;line-height:1.5;border-left:2px solid var(--gold);padding:3px 9px;background:rgba(222,182,117,.05)}.separator{height:1px;background:#354037;margin:17px 22px}.transcript-header{display:flex;align-items:center;justify-content:space-between;padding:0 22px 15px}.transcript-header strong{display:block;font-family:Georgia,serif;font-size:18px;font-weight:500;margin-top:8px}.script-count{color:#c7b684;background:#2b3024;font-family:Georgia,serif;border-radius:15px;padding:6px 10px;font-size:12px}.transcript-scroll{flex:1;min-height:60px;overflow-y:auto;padding:0 18px 12px;scrollbar-width:thin}.transcript{display:grid;gap:8px}.transcript-item{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;background:#212821;border:1px solid transparent;border-radius:12px;color:#b6bfb4;padding:13px 12px;line-height:1.65;cursor:pointer}.transcript-item .t-index{font-family:Georgia,serif;color:#718775;flex:none;font-size:13px}.transcript-item .t-text{font-size:12px}.transcript-item.active{background:#323a2c;border-color:#9f8955;color:#fff8e9;box-shadow:inset 4px 0 0 #e3c07b}.transcript-item.active .t-index{color:#eac27d}.transcript-item:hover:not(.active){background:#2b332a}.transcript-empty{padding:27px;color:#aeb9a9;border:1px dashed #3b453c;border-radius:12px;font-size:12px;line-height:1.8}.audio-panel-bottom{padding:12px 23px 34px;border-top:1px solid #323a33}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#b6bdb1;font-size:11px;margin-bottom:14px}.toggle-row input{position:absolute;opacity:0}.toggle-ui{display:block;width:35px;height:19px;border-radius:20px;background:#555f53;position:relative;transition:background .2s}.toggle-ui:before{content:'';position:absolute;left:3px;top:3px;background:white;border-radius:50%;width:13px;height:13px;transition:transform .2s}.toggle-row input:checked+.toggle-ui{background:#8fa381}.toggle-row input:checked+.toggle-ui:before{transform:translateX(16px)}.upload-label{display:block;text-align:center;padding:10px 8px;color:#e6d5b2;background:#2c3128;border:1px dashed #6c634a;border-radius:9px;cursor:pointer;font-size:11px}.upload-label:hover{background:#393b2e}.audio-upload-note{font-size:10px;color:#829085;line-height:1.5;text-align:center;margin:8px}.player-dock{position:fixed;z-index:30;bottom:14px;left:calc(275px + (100vw - 275px - 334px)/2);transform:translateX(-50%);display:flex;align-items:center;gap:20px;background:#252c26e9;border:1px solid #566252;border-radius:999px;box-shadow:0 16px 55px #0009,0 0 14px #1b231c;min-width:290px;padding:10px 16px;backdrop-filter:blur(16px)}.dock-progress{position:absolute;height:3px;left:23px;right:23px;top:0;background:#52604e;border-radius:9px;overflow:hidden;cursor:pointer}.dock-progress>div{height:100%;width:0;background:var(--gold);transition:width .28s}.player-dock button{border:0;color:#e1e9dc;background:transparent}.dock-skip{font-size:23px}.play-button{background:var(--green)!important;color:#1b231c!important;width:49px;height:49px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 22px #98be8c55}.play-button svg{width:22px;height:22px}.dock-secondary{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;font-size:15px;min-width:37px;color:#c4d0be!important}.dock-secondary small{font-size:9px;color:#a1af9d}.mobile-now{display:none}.settings-modal{position:fixed;z-index:60;top:50%;left:50%;transform:translate(-50%,-45%) scale(.97);width:min(450px,calc(100vw - 30px));background:#1f2821;border:1px solid #5a6658;border-radius:21px;padding:28px;color:#f3f6eb;box-shadow:0 25px 90px #000d;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.settings-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.settings-head{display:flex;justify-content:space-between;align-items:start}.settings-head h2{font-family:Georgia,serif;font-size:27px;margin:10px 0 0}.settings-modal>p{line-height:1.65;font-size:12px;color:#b8c8b5;margin:20px 0}.setting-row{border-top:1px solid #3b493b;padding:15px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}.setting-row input{accent-color:#bad1ae;width:18px;height:18px}.settings-tip{background:#2e3b2f;color:#b6c8b3;border-radius:12px;line-height:1.55;padding:13px;font-size:11px;margin-top:8px}.modal-scrim{position:fixed;inset:0;background:#000b;z-index:55;display:none}.modal-scrim.open{display:block}#toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%) translateY(15px);opacity:0;pointer-events:none;z-index:90;max-width:min(440px,90vw);font-size:12px;color:#fefbea;background:#3b4b3f;border:1px solid #70836f;border-radius:12px;padding:12px 17px;transition:.25s}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:1250px){.app{grid-template-columns:232px minmax(0,1fr) 300px}.stage-arrow.left{left:247px}.stage-arrow.right{right:315px}.player-dock{left:calc(232px + (100vw - 532px)/2)}.topbar{padding:0 20px}.reader-stage{padding-left:37px;padding-right:37px}.reading-label small{display:none}.sidebar-scroll{padding-left:8px;padding-right:8px}}
@media(max-width:1020px){.app{grid-template-columns:225px minmax(0,1fr)}.audio-panel{position:fixed;top:0;bottom:0;right:0;width:340px;transform:translateX(105%);transition:transform .25s;z-index:51;box-shadow:-20px 0 80px #0009}.audio-panel.open{transform:translateX(0)}.mobile-panel-close{display:grid!important}.player-dock{left:calc(225px + (100vw - 225px)/2)}.stage-arrow.left{left:238px}.stage-arrow.right{right:15px}.topbar .live-label{display:none}.transcript-scroll{flex:1}}
@media(max-width:700px){:root{--mobileNav:132px}.app{display:block;min-height:100dvh;height:100dvh;overflow:hidden}.sidebar{position:fixed;inset:0 auto 0 0;width:min(315px,85vw);z-index:52;transform:translateX(-103%);transition:transform .25s;box-shadow:20px 0 80px #0008}.sidebar.open{transform:translateX(0)}.sidebar-scrim{display:none;position:fixed;inset:0;background:#0009;z-index:51}.sidebar-scrim.open{display:block}.sidebar-close,.mobile-menu{display:grid!important}.sidebar-close{margin-left:auto}.brand{padding:22px 17px}.workarea{height:100dvh;width:100%;background:radial-gradient(ellipse at 50% 42%,#2a302b 0%,#161c17 70%)}.topbar{height:65px;padding:0 14px;gap:8px}.breadcrumbs{gap:8px}.breadcrumbs span:first-child{font-size:9px;letter-spacing:1px}.breadcrumbs strong{max-width:44vw;font-size:12px}.topbar-actions{gap:8px}.reader{padding:5px 0 0}.reader-head{height:38px;padding:0 12px}.reading-label{font-size:9px}.reading-actions{gap:5px}.text-button{font-size:20px;width:30px;height:28px;display:grid;place-items:center}.text-button span{display:none}.reader-stage{display:block;text-align:center;padding:8px 10px 18px;height:auto;overflow-y:auto;overflow-x:hidden;margin-bottom:1px;scrollbar-width:none}.book-page{width:min(100%,520px);margin:0 auto 15px;border:4px solid #fffef8;box-shadow:0 15px 38px #0009}.book-page.zoomed{width:160%;max-width:none;margin-left:-30%;margin-right:-30%}.stage-arrow{display:none}.stage-stamp{display:none}.reader-footer{height:53px;border-top:0;padding:0 17px;flex-shrink:0;margin-bottom:var(--mobileNav);background:#151c18eb}.chapter-name strong{font-size:15px}.chapter-name span{font-size:8px}.page-controls{gap:8px}.page-controls span{font-size:11px}.mini-arrow{width:32px;height:32px}.audio-panel{top:auto;bottom:0;left:0;right:0;width:100%;height:79dvh;max-height:750px;border-radius:22px 22px 0 0;border:1px solid #5d675b;transform:translateY(110%);z-index:53;padding-bottom:env(safe-area-inset-bottom)}.audio-panel.open{transform:translateY(0)}.audio-panel-header{padding:21px 23px 13px}.audio-panel-header h2{font-size:23px}.narrator-card{margin-bottom:12px}.transcript-scroll{min-height:120px}.audio-panel-bottom{padding-bottom:16px}.player-dock{bottom:calc(11px + env(safe-area-inset-bottom));left:12px;right:12px;transform:none;width:auto;min-width:0;justify-content:space-evenly;gap:8px;border-radius:18px;padding:12px 7px 9px;background:#293129f5;box-shadow:0 8px 33px #000b}.play-button{width:50px;height:50px}.dock-skip{padding:6px;font-size:19px}.dock-secondary{padding:7px;font-size:16px;min-width:42px}.mobile-now{display:block;position:fixed;z-index:29;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));border:1px solid #5f6d5a;border-radius:13px 13px 0 0;background:#232b24ed;backdrop-filter:blur(10px)}.mobile-current{width:100%;background:none;border:0;color:#eee;display:flex;align-items:flex-start;flex-direction:column;text-align:left;padding:9px 14px;gap:4px}.mobile-tiny-label{color:#c0b586;letter-spacing:1.6px;font-size:8px;font-weight:800}.mobile-tiny-label b{font-size:9px;margin-left:8px}.mobile-current-text{width:100%;font-size:11px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eee}.mobile-now+ .player-dock{border-top-left-radius:0;border-top-right-radius:0}.reader-stage .book-page{transition:width .2s}.mode-info{font-size:11px}.settings-modal{padding:24px}.topbar .icon-button{width:34px;height:34px}.transcript-item .t-text{font-size:13px}}
@media(max-width:380px){.breadcrumbs strong{max-width:37vw}.book-page{width:100%}.reader-footer .page-controls{gap:6px}.reader-stage{padding:5px}.brand-text strong{font-size:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.logo{display:flex;align-items:center;justify-content:center;white-space:nowrap;letter-spacing:-1px}
