html.reader-page{min-height:100%;background:#0d0c0c;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth}
html.reader-page body{min-height:100%;background:#0d0c0c}
body.reader-page{margin:0;position:relative;min-height:100svh;color:#e9e5de;overflow-x:hidden;overflow-y:auto;background:#0d0c0c;padding-bottom:74px}
.reader-page::before{content:"";position:fixed;inset:-15%;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 18% 55%,rgba(255,255,255,.035),transparent 30%),radial-gradient(ellipse at 82% 45%,rgba(180,150,120,.028),transparent 32%);filter:blur(35px)}
.reader-logo{position:fixed;left:50%;top:calc(4.15% + 43px);transform:translateX(-50%);z-index:80;display:block;width:34px;height:auto;line-height:0}
.reader-logo img{display:block;width:100%;height:auto;filter:invert(1);opacity:.9;transition:opacity .25s ease}.reader-logo:hover img,.reader-logo:focus-visible img{opacity:.58}
.reader-header{position:fixed!important;z-index:90!important;top:calc(4.15% + 5px)!important;left:0;width:100%}
.reader-header a,.reader-header span{color:#f0eeea}
.reader-page .language-globe{color:#f0eeea;opacity:.82}
.reader-page .language-panel{background:rgba(17,16,15,.96);border-color:rgba(240,238,234,.12)}
.reader-page .language-option{color:#f0eeea}
.reader-shell{position:relative;z-index:8;min-height:100svh;padding:112px 5vw 100px;box-sizing:border-box}
.reader-topbar{position:fixed;z-index:70;left:5vw;right:5vw;top:calc(4.15% + 67px);height:44px;display:grid;grid-template-columns:1fr auto;align-items:center;max-width:1380px;margin:0 auto;padding-bottom:14px;border-bottom:1px solid rgba(240,238,234,.13);box-sizing:content-box;background:linear-gradient(#0d0c0c 0%,rgba(13,12,12,.98) 78%,rgba(13,12,12,0) 100%)}
.reader-back{color:#c7c3bc;text-decoration:none;font:10px/1 Arial,sans-serif;letter-spacing:.16em;transition:color .25s ease}.reader-back:hover{color:#fff}
.reader-book-label{display:none}
.reader-tools{justify-self:end;display:none;gap:4px}.reader-tools button{border:0;background:transparent;color:#aaa7a0;font:12px/1 Arial,sans-serif;min-width:30px;height:28px;cursor:pointer}.reader-tools button:hover{color:#fff}
.reader-content{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:220px minmax(0,900px);gap:48px;justify-content:center;align-items:start;padding-top:62px}
.reader-side{position:sticky;top:calc(4.15% + 136px);align-self:start;padding-top:18px;z-index:20}
.reader-cover-wrap{width:190px;margin:0 auto;box-shadow:0 24px 55px rgba(0,0,0,.55)}.reader-cover-wrap img{display:block;width:100%;height:auto}.reader-side-meta{padding-top:20px;text-align:center}.reader-number{font:10px/1 Arial,sans-serif;letter-spacing:.3em;color:#777674}.reader-side-meta h1{margin:12px 0 5px;font:400 23px/1.1 Georgia,serif;letter-spacing:.04em}.reader-side-meta p{margin:0;color:#88857e;font:10px/1 Arial,sans-serif;letter-spacing:.18em}.reader-type{margin-top:15px;color:#66635e;font:8px/1 Arial,sans-serif;letter-spacing:.2em}
.reader-book{min-width:0;background:#ebe4d7;color:#24211e;box-shadow:0 30px 90px rgba(0,0,0,.5);position:relative}
.paper-header{display:none}
.reader-pages{position:relative;min-height:0;overflow:visible}
.reader-page-sheet{display:block;min-height:680px;box-sizing:border-box;padding:55px 82px 78px;position:relative;border-bottom:1px solid rgba(55,48,41,.16);scroll-margin-top:calc(4.15% + 142px)}
.reader-page-sheet:last-child{border-bottom:0}
.page-running{display:none}
.reader-page-sheet h2{text-align:center;margin:0;font:400 28px/1 Georgia,serif;letter-spacing:.12em}.page-author{text-align:center;margin-top:9px;color:#7b746b;font:9px/1 Arial,sans-serif;letter-spacing:.18em}.story-column{max-width:690px;margin:42px auto 0;font:18px/1.82 Georgia,'Times New Roman',serif;color:#2a2723}.story-column p{margin:0 0 17px}.story-column .dropcap span{float:left;font:400 72px/.72 Georgia,serif;padding:8px 8px 0 0}.story-column-continuation{margin-top:20px}.story-end{text-align:right;margin-top:44px;font:10px/1 Arial,sans-serif;letter-spacing:.18em;color:#70695f}
.reader-page-sheet.search-hit{outline:2px solid rgba(120,105,85,.28);outline-offset:-2px}
/* V138 Reading Guide: fixed visual reading ruler; document scrolls underneath it. */
.reading-guide{position:fixed;left:0;right:0;top:52%;height:54px;transform:translateY(-50%);z-index:75;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;}
.reading-guide::before,.reading-guide::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(184,91,52,.55);box-shadow:0 0 8px rgba(184,91,52,.08)}
.reading-guide::before{top:0}.reading-guide::after{bottom:0}
.reading-guide span{position:absolute;left:0;right:0;top:1px;bottom:1px;background:rgba(184,91,52,.075);border-left:1px solid rgba(184,91,52,.18);border-right:1px solid rgba(184,91,52,.18);}
body.reading-guide-on #readingGuide{display:block!important;opacity:1!important;visibility:visible!important;z-index:10000!important;position:fixed!important;left:0!important;right:0!important;top:52%!important;height:54px!important;transform:translateY(-50%)!important;pointer-events:none!important;background:transparent!important}
body.reading-guide-on #readingGuide span{display:block!important;position:absolute!important;left:0!important;right:0!important;top:1px!important;bottom:1px!important;background:rgba(184,91,52,.075)!important;border-left:1px solid rgba(184,91,52,.18)!important;border-right:1px solid rgba(184,91,52,.18)!important}
body.reading-guide-on #readingGuide::before,body.reading-guide-on #readingGuide::after{display:block!important;content:"";position:absolute;left:0;right:0;height:1px;background:rgba(184,91,52,.7);z-index:1}
body.reading-guide-on #readingGuide::before{top:0!important}body.reading-guide-on #readingGuide::after{bottom:0!important}
body.reading-guide-on .reader-bottom #readingGuideToggle{background:rgba(184,91,52,.16);color:#fff;border-color:rgba(184,91,52,.5)}
@media (max-width:760px){.reading-guide{top:51%;height:46px}.reading-guide::before,.reading-guide::after{background:rgba(184,91,52,.48)}}
.reader-bottom{position:fixed;left:0;right:0;bottom:0;height:66px;z-index:100;background:rgba(20,19,18,.96);border-top:1px solid rgba(240,238,234,.12);display:flex;align-items:center;gap:10px;padding:0 18px;box-sizing:border-box;backdrop-filter:blur(14px);color:#c5c0b7}
.reader-bottom button{border:1px solid rgba(240,238,234,.13);background:rgba(255,255,255,.025);color:#cfc9c0;font:12px/1 Arial,sans-serif;height:34px;min-width:34px;padding:0 9px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}.reader-bottom button:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(240,238,234,.25)}.reader-bottom button:disabled{opacity:.3;cursor:default}
.reader-bottom .nav-page{font-size:22px;min-width:44px}.reader-progress{height:2px;flex:1;min-width:70px;background:rgba(240,238,234,.12);position:relative}.reader-progress span{position:absolute;left:0;top:0;bottom:0;width:33.333%;background:#bcb5aa;transition:width .25s ease}.page-count{font:9px/1 Arial,sans-serif;letter-spacing:.16em;white-space:nowrap;min-width:42px;text-align:center}
.reader-search{display:flex;align-items:center;gap:6px;margin-left:auto}.reader-search input{width:150px;height:34px;box-sizing:border-box;border:1px solid rgba(240,238,234,.13);background:rgba(255,255,255,.035);color:#eee9e1;padding:0 10px;font:11px/1 Arial,sans-serif;outline:none}.reader-search input:focus{border-color:rgba(240,238,234,.35)}.reader-search-count{font:8px/1 Arial,sans-serif;color:#8e8981;letter-spacing:.08em;min-width:28px;text-align:center}
.reader-book.night{background:#191817;color:#ddd7cd}.reader-book.night .reader-page-sheet{border-color:rgba(240,238,234,.12)}.reader-book.night .story-column{color:#ddd7cd}.reader-book.night .page-author,.reader-book.night .story-end{color:#8e8981}.reader-book.night .reader-progress{background:rgba(240,238,234,.12)}.reader-book.night .reader-progress span{background:#bcb5aa}.reader-book.night .reader-bottom button{color:#b8b2aa}.reader-book.night .reader-bottom button:hover{color:#fff}
@keyframes readerPageIn{from{opacity:.2;transform:translateY(7px)}to{opacity:1;transform:none}}
html.grav-incoming-reader body.reader-page > *:not(.page-transition){opacity:0;animation:readerReveal 1000ms cubic-bezier(.22,.72,.22,1) forwards}html.grav-incoming-reader body.reader-page .page-transition{opacity:1;visibility:visible;background:#0d0c0c}@keyframes readerReveal{from{opacity:0}to{opacity:1}}
@media (max-width:1050px){.reader-header{top:33px!important}.reader-header nav{gap:24px;font-size:12px;letter-spacing:.19em}.reader-logo{top:63px;width:30px}.reader-topbar{top:95px;left:28px;right:28px}.reader-shell{padding-left:28px;padding-right:28px}.reader-content{grid-template-columns:160px minmax(0,1fr);gap:28px;padding-top:62px}.reader-side{top:157px}.reader-cover-wrap{width:145px}.story-column{font-size:17px}.reader-page-sheet{padding-left:55px;padding-right:55px}}
@media (max-width:760px){body.reader-page{padding-bottom:128px}.reader-header{top:27px!important}.reader-header nav{gap:13px;font-size:9px;letter-spacing:.13em}.reader-logo{top:52px;width:26px}.reader-topbar{top:79px;left:15px;right:15px;height:40px;padding-bottom:10px}.reader-shell{padding:92px 15px 150px}.reader-content{display:block;padding-top:55px}.reader-side{position:sticky;top:135px;display:flex;gap:18px;align-items:center;padding:10px 5px 18px;background:linear-gradient(#0d0c0c 80%,rgba(13,12,12,0) 100%);margin-bottom:6px}.reader-cover-wrap{width:82px;flex:0 0 82px}.reader-side-meta{text-align:left;padding-top:0}.reader-side-meta h1{font-size:19px}.reader-type{margin-top:10px}.reader-book{min-height:0}.reader-page-sheet{min-height:620px;padding:46px 25px 65px;scroll-margin-top:130px}.reader-page-sheet h2{font-size:23px}.story-column{margin-top:32px;font-size:16px;line-height:1.72}.story-column p{margin-bottom:15px}.story-column .dropcap span{font-size:60px}.reader-bottom{height:118px;align-items:flex-start;padding:10px 12px 12px;flex-wrap:wrap;gap:6px}.reader-bottom .reader-progress{order:2;flex-basis:100%;height:2px}.reader-bottom .nav-page{min-width:42px}.reader-search{order:1;margin-left:auto}.reader-search input{width:100px}.reader-bottom .page-count{order:1}.reader-bottom #themeToggle,.reader-bottom #fontDown,.reader-bottom #fontUp{order:1}.reader-page-sheet.search-hit{outline-width:1px}}
@media (max-width:420px){.reader-side{padding-bottom:14px}.reader-cover-wrap{width:70px;flex-basis:70px}.reader-side-meta h1{font-size:17px}.reader-page-sheet{padding-left:19px;padding-right:19px}.story-column{font-size:15px;line-height:1.68}.reader-page-sheet h2{font-size:21px}.reader-search input{width:82px}.reader-bottom{padding-left:8px;padding-right:8px}.reader-bottom button{padding:0 6px;min-width:30px}}
/* V110 Reader refinements: fixed site header, compact book identity, responsive continuous reader */
html.reader-page, body.reader-page{overflow-x:hidden;overflow-y:auto}
.reader-fixed-head{position:fixed;z-index:65;left:0;right:0;top:0;height:calc(4.15% + 125px);background:#0d0c0c;overflow:hidden;pointer-events:none}
.reader-fixed-head::after{content:"";position:absolute;left:5vw;right:5vw;bottom:0;height:1px;background:rgba(240,238,234,.13)}
.reader-book-info{position:absolute;left:5vw;bottom:9px;display:flex;align-items:center;gap:13px;height:78px;max-width:310px}
.reader-fixed-head .reader-cover-wrap{width:52px;flex:0 0 52px;box-shadow:0 10px 25px rgba(0,0,0,.45)}
.reader-fixed-head .reader-side-meta{padding:0;text-align:left}
.reader-fixed-head .reader-side-meta h1{margin:5px 0 4px;font-size:18px}
.reader-fixed-head .reader-side-meta p{font-size:8px}
.reader-fixed-head .reader-type{margin-top:8px;font-size:7px}
.reader-topbar{top:calc(4.15% + 67px);height:44px;background:transparent;pointer-events:none}
.reader-header .reader-header-back-arrow{color:#f0eeea;opacity:1;font-size:21px;line-height:1;letter-spacing:0;margin-right:-25px;flex:0 0 auto;transition:transform 1200ms cubic-bezier(.2,.75,.25,1),opacity .25s ease}
.reader-header .reader-header-back-arrow:hover,.reader-header .reader-header-back-arrow:focus-visible{opacity:1;transform:translateX(-3px)}
.reader-content{grid-template-columns:minmax(0,1050px);justify-content:center;padding-top:62px}
.reader-book{width:100%;max-width:1050px}
.reader-page-sheet{scroll-margin-top:calc(4.15% + 132px)}
.reader-bottom{gap:8px}
.reader-search-count{min-width:52px}
.search-nav{min-width:30px!important;padding:0 6px!important}
.reader-search{gap:4px}
.reader-book mark.search-match{background:rgba(205,171,95,.38);color:inherit;padding:0 1px;border-radius:1px}
.reader-search input{width:145px}
@media (min-width:761px){
.reader-page-sheet{min-height:760px;padding-top:68px;padding-bottom:90px}
}
@media (max-width:1050px) and (min-width:761px){
.reader-fixed-head{height:calc(4.15% + 125px)}
.reader-book-info{left:28px}
.reader-fixed-head::after{left:28px;right:28px}
.reader-content{padding-top:48px}
.reader-header .reader-header-back-arrow{font-size:19px;margin-right:-18px}
}
@media (max-width:760px){
.reader-fixed-head{height:129px}
.reader-fixed-head::after{left:15px;right:15px}
.reader-book-info{left:15px;bottom:7px;height:58px;gap:10px}
.reader-fixed-head .reader-cover-wrap{width:40px;flex-basis:40px}
.reader-fixed-head .reader-side-meta h1{font-size:16px;margin:3px 0}
.reader-fixed-head .reader-side-meta p{font-size:7px}
.reader-fixed-head .reader-type{font-size:6px;margin-top:6px}
.reader-header .reader-header-back-arrow{font-size:16px;margin-right:-10px}
.reader-content{padding-top:48px}
.reader-page-sheet{scroll-margin-top:138px}
.reader-bottom{height:132px}
.reader-search{width:100%;margin-left:0;order:3}
.reader-search input{flex:1;width:auto}
.reader-search-count{min-width:48px}
}
@media (max-width:1050px) and (min-width:761px){
.reader-bottom{gap:6px;padding:0 10px}
.reader-search input{width:105px}
.reader-bottom button{min-width:30px;padding:0 6px;font-size:11px}
}
@media (max-width:760px){
body.reader-page{padding-bottom:156px}
.reader-bottom{height:156px;padding:8px 8px 9px;display:flex;align-content:flex-start;justify-content:flex-start;gap:5px;flex-wrap:wrap}
.reader-bottom button{height:31px;min-width:27px;padding:0 5px;font-size:10px}
.reader-bottom .nav-page{min-width:38px;font-size:18px}
.reader-bottom .page-count{min-width:30px;font-size:8px}
.reader-search{order:3;flex:1 1 100%;width:100%;margin:2px 0 0;display:flex}
.reader-search input{height:31px;min-width:0;flex:1;width:auto}
.reader-search-count{min-width:42px;font-size:8px}
.search-nav{min-width:28px!important}
.reader-bottom #fullscreenToggle{order:2;margin-left:auto}
}
/* V111 Reader polish: Google Fonts, printed page numbers, fixed header separation, clickable page jumps */
.reader-fixed-head{box-shadow:0 10px 24px rgba(0,0,0,.42);}
.reader-fixed-head::after{box-shadow:0 8px 18px rgba(0,0,0,.38);}
/* V112: one compact page indicator; page navigation remains on the up/down controls. */
.page-display{min-width:58px;height:34px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px solid rgba(240,238,234,.13);background:rgba(255,255,255,.025);color:#cfc9c0;font:9px/1 Arial,sans-serif;letter-spacing:.12em;white-space:nowrap;}
@media (max-width:760px){.page-display{min-width:52px;height:31px;font-size:8px}}
.reader-book mark.search-match.current{background:rgba(205,171,95,.62);box-shadow:0 0 0 2px rgba(205,171,95,.16);}
/* V113: single-page reader controls, precise page landing, compact right-side page navigation */
.reader-page-nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex:0 0 auto}
.reader-page-nav .nav-page{width:34px!important;min-width:34px!important;height:34px!important;padding:0!important;font-size:18px!important;display:flex;align-items:center;justify-content:center}
.reader-page-nav .page-display{width:58px;min-width:58px;height:34px}
@media (max-width:760px){
.reader-page-nav{margin-left:auto;gap:4px}
.reader-page-nav .nav-page{width:31px!important;min-width:31px!important;height:31px!important;font-size:16px!important}
.reader-page-nav .page-display{width:52px;min-width:52px;height:31px}
}
/* V114: centered page navigation, editable page number, no progress bar */
.reader-bottom{position:fixed;left:0;right:0;bottom:0;height:66px;z-index:100;display:flex;align-items:center;gap:8px;padding:0 18px;box-sizing:border-box;background:rgba(20,19,18,.96);border-top:1px solid rgba(240,238,234,.12);backdrop-filter:blur(14px);}
.reader-tools-left{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.reader-page-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;margin:0;flex:0 0 auto;z-index:2;}
.reader-page-nav .nav-page{width:34px!important;min-width:34px!important;height:34px!important;padding:0!important;font-size:18px!important;display:flex;align-items:center;justify-content:center;}
.page-input-wrap{height:34px;min-width:58px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid rgba(240,238,234,.13);background:rgba(255,255,255,.025);color:#cfc9c0;font:9px/1 Arial,sans-serif;letter-spacing:.08em;cursor:text;}
.page-input{width:30px;height:32px;border:0!important;outline:0!important;background:transparent!important;color:#eee9e1!important;text-align:right;font:9px/1 Arial,sans-serif;letter-spacing:.08em;padding:0!important;box-sizing:border-box;}
.page-input::-webkit-inner-spin-button,.page-input::-webkit-outer-spin-button{appearance:none;margin:0;}
.page-input[type=number]{-moz-appearance:textfield;}
.page-total{padding:0 7px 0 2px;color:#777169;white-space:nowrap;}
.reader-search{margin-left:auto;}
.reader-bottom #fullscreenToggle{flex:0 0 auto;}
.reader-progress{display:none!important;}
/* Give the document enough trailing space for the final page to land at the header line. */
.reader-pages::after{content:"";display:block;height:calc(100svh - 160px);pointer-events:none;background:inherit;}
@media (max-width:1050px) and (min-width:761px){
.reader-bottom{padding:0 10px;}
.reader-tools-left{gap:6px;}
.reader-page-nav .nav-page{width:32px!important;min-width:32px!important;height:32px!important;}
.page-input-wrap{height:32px;min-width:54px;}
.page-input{height:30px;}
}
@media (max-width:760px){
.reader-bottom{height:156px;padding:8px;align-content:flex-start;}
.reader-tools-left{width:auto;gap:5px;}
.reader-page-nav{position:absolute;top:8px;left:50%;transform:translateX(-50%);gap:4px;}
.reader-page-nav .nav-page{width:31px!important;min-width:31px!important;height:31px!important;font-size:16px!important;}
.page-input-wrap{height:31px;min-width:52px;}
.page-input{height:29px;}
.reader-search{width:100%;margin:2px 0 0;}
.reader-pages::after{height:calc(100svh - 138px);}
}
@media (max-width:420px){
.reader-page-nav .nav-page{width:30px!important;min-width:30px!important;height:30px!important;}
.page-input-wrap{height:30px;min-width:50px;}
.reader-pages::after{height:calc(100svh - 138px);}
}
/* V115: separate page sheets in one continuous scroll; confined scrollbar; centered controls */
html.reader-page, body.reader-page{overflow:hidden!important;height:100%;min-height:100%;}
body.reader-page{padding-bottom:0;}
.reader-shell{
position:fixed;
z-index:8;
left:0;
right:0;
top:calc(4.15% + 125px);
bottom:66px;
width:auto;
height:auto;
min-height:0;
padding:8px 5vw 40px;
box-sizing:border-box;
overflow-y:auto;
overflow-x:hidden;
overscroll-behavior-y:contain;
scrollbar-width:thin;
scrollbar-color:rgba(240,238,234,.58) transparent;
}
.reader-shell::-webkit-scrollbar{width:10px}
.reader-shell::-webkit-scrollbar-track{background:transparent}
.reader-shell::-webkit-scrollbar-thumb{background:rgba(240,238,234,.58);border-radius:0;border:2px solid transparent;background-clip:padding-box}
.reader-content{padding-top:0!important;padding-bottom:20px;}
.reader-page-sheet{
margin:0 0 8px;
background:#ebe4d7;
border-bottom:0!important;
box-shadow:0 14px 35px rgba(0,0,0,.24);
scroll-margin-top:0;
}
.reader-page-sheet:last-child{margin-bottom:0}
.reader-book{background:transparent!important;box-shadow:none!important}
.reader-pages{background:transparent}
.printed-page-number{
position:absolute;
left:0;
right:0;
bottom:24px;
text-align:center;
font:9px/1 Arial,sans-serif;
letter-spacing:.16em;
color:#777067;
pointer-events:none;
}
.reader-book.night .reader-page-sheet{background:#191817}
.reader-book.night .printed-page-number{color:#8e8981}
.reader-bottom{justify-content:center!important;}
.reader-tools-left{margin:0!important;}
.reader-page-nav{position:static!important;left:auto!important;transform:none!important;margin:0!important;}
.reader-search{margin:0!important;}
.reader-bottom #fullscreenToggle{margin:0!important;}
@media (max-width:1050px) and (min-width:761px){
.reader-shell{top:calc(4.15% + 125px);bottom:66px;padding:8px 28px 40px;}
}
@media (max-width:760px){
html.reader-page,body.reader-page{overflow:hidden!important;height:100%;}
.reader-shell{top:129px;bottom:156px;padding:8px 15px 36px;}
.reader-page-sheet{margin-bottom:6px;}
.printed-page-number{bottom:20px;}
.reader-bottom{height:156px;justify-content:center!important;align-content:center;}
.reader-tools-left{justify-content:center;}
.reader-page-nav{position:static!important;}
.reader-search{width:auto!important;flex:0 1 auto!important;}
}
@media (max-width:420px){
.reader-shell{top:129px;bottom:156px;padding-left:10px;padding-right:10px;}
}
/* V116 — desktop reader layout refinement */
@media (min-width:761px){
/* Move the header separator and its compact book identity upward by 30px. */
.reader-fixed-head{height:calc(4.15% + 95px);}
.reader-shell{top:calc(4.15% + 95px);bottom:51px;}
.reader-page-sheet{scroll-margin-top:0;}
/* Keep the language selector above the fixed reader header. */
.reader-page .language-switcher{z-index:95;}
/* Footer is 15px shorter; existing controls still fit at 34px. */
.reader-bottom{height:51px;}
/* Stronger, deeper header separation: ~30% darker and ~30% larger. */
.reader-fixed-head{box-shadow:0 13px 31px rgba(0,0,0,.55);}
.reader-fixed-head::after{box-shadow:0 10px 23px rgba(0,0,0,.49);}
/* Author signature + date: right-aligned to the story column. */
.story-end{display:flex;flex-direction:column;align-items:flex-end;gap:7px;}
.story-signature{font-size:15px;line-height:1;letter-spacing:.18em;}
.story-date{font:9px/1 Arial,sans-serif;letter-spacing:.14em;color:#777067;}
.reader-book.night .story-date{color:#8e8981;}
}
/* V117 — desktop polish: remove duplicate header line and compact footer */
@media (min-width:761px){
/* The fixed reader header owns the separator now; remove the older topbar separator. */
.reader-topbar{display:none!important;}
/* Compact desktop footer: approximately 30% smaller than V116. */
.reader-bottom{
height:36px!important;
min-height:36px!important;
gap:5px!important;
padding:0 12px!important;
}
.reader-tools-left{gap:5px!important;}
.reader-bottom button{
width:24px!important;
min-width:24px!important;
height:24px!important;
padding:0!important;
font-size:10px!important;
}
.reader-page-nav{gap:3px!important;}
.reader-page-nav .nav-page{
width:24px!important;
min-width:24px!important;
height:24px!important;
font-size:14px!important;
}
.page-input-wrap{
width:46px!important;
min-width:46px!important;
height:24px!important;
font-size:8px!important;
}
.page-input{width:24px!important;height:22px!important;font-size:8px!important;}
.reader-search{gap:3px!important;}
.reader-search input{width:112px!important;height:24px!important;font-size:8px!important;}
.reader-search-count{min-width:40px!important;font-size:7px!important;}
.reader-bottom #fullscreenToggle{width:24px!important;min-width:24px!important;height:24px!important;}
}
/* V118 — mobile reader cleanup */
.reader-topbar{display:none!important;}
@media (max-width:760px){
.reader-page .language-switcher{z-index:95!important;top:20px!important;right:12px!important;}
.reader-page .language-globe{width:26px!important;height:26px!important;}
body.reader-page{padding-bottom:0!important;}
.reader-bottom{height:78px!important;min-height:78px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;grid-template-rows:30px 30px!important;column-gap:6px!important;row-gap:4px!important;align-items:center!important;justify-items:center!important;padding:6px 8px!important;box-sizing:border-box!important;}
.reader-tools-left{grid-column:1!important;grid-row:1!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:4px!important;width:auto!important;min-width:0!important;}
.reader-page-nav{grid-column:2!important;grid-row:1!important;position:static!important;transform:none!important;display:flex!important;align-items:center!important;gap:3px!important;margin:0!important;}
.reader-bottom button,.reader-page-nav .nav-page{width:26px!important;min-width:26px!important;height:26px!important;padding:0!important;font-size:11px!important;}
.reader-page-nav .nav-page{font-size:15px!important;}
.page-input-wrap{width:48px!important;min-width:48px!important;height:26px!important;}
.page-input{width:24px!important;height:24px!important;font-size:8px!important;}
.reader-search{grid-column:1 / 3!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;width:auto!important;margin:0!important;}
.reader-search input{width:112px!important;height:26px!important;font-size:8px!important;}
.reader-search-count{min-width:30px!important;font-size:7px!important;}
.reader-search .search-nav{width:26px!important;min-width:26px!important;height:26px!important;}
.reader-bottom #fullscreenToggle{grid-column:3!important;grid-row:2!important;width:26px!important;min-width:26px!important;height:26px!important;margin:0!important;}
.reader-shell{bottom:78px!important;}
.reader-pages::after{height:calc(100svh - 78px)!important;}
}
@media (max-width:420px){
.reader-page .language-switcher{top:18px!important;right:10px!important;}
.reader-bottom{height:74px!important;min-height:74px!important;grid-template-rows:28px 28px!important;padding:5px 6px!important;}
.reader-bottom button,.reader-page-nav .nav-page,.reader-search .search-nav,.reader-bottom #fullscreenToggle{width:25px!important;min-width:25px!important;height:25px!important;}
.page-input-wrap{width:46px!important;min-width:46px!important;height:25px!important;}
.reader-search input{width:104px!important;height:25px!important;}
.reader-shell{bottom:74px!important;}
.reader-pages::after{height:calc(100svh - 74px)!important;}
}
/* V120 — Reader back arrow follows the same geometry as the approved WORKS header. */
.reader-header .reader-header-back-arrow{
position:static!important;
left:auto!important;
transform:none!important;
width:auto!important;
text-align:left;
color:#f0eeea;
opacity:1;
font-size:21px;
line-height:1;
letter-spacing:0;
margin-right:-25px!important;
flex:0 0 auto;
}
.reader-header .reader-header-back-arrow:hover,
.reader-header .reader-header-back-arrow:focus-visible{
opacity:1;
transform:translateX(-3px)!important;
}
/* One centered control group on desktop/tablet: no controls pinned to the edges. */
@media (min-width:761px){
.reader-bottom{
justify-content:center!important;
align-items:center!important;
}
.reader-tools-left{flex:0 0 auto!important;}
.reader-page-nav{
position:static!important;
left:auto!important;
transform:none!important;
margin:0!important;
flex:0 0 auto!important;
}
.reader-search{margin:0!important;flex:0 0 auto!important;}
.reader-bottom #fullscreenToggle{flex:0 0 auto!important;}
.reader-header .reader-header-back-arrow{
left:50%;
}
}
/* Mobile: two compact centered rows. Row 1 contains all reading/page controls;
row 2 contains search and fullscreen. Nothing is pushed to the screen edges. */
@media (max-width:760px){
.reader-bottom{
height:64px!important;
min-height:64px!important;
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:27px 27px!important;
row-gap:3px!important;
align-items:center!important;
justify-items:center!important;
padding:4px 6px 5px!important;
box-sizing:border-box!important;
}
.reader-tools-left{
grid-column:1!important;
grid-row:1!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:4px!important;
width:auto!important;
}
.reader-page-nav{
position:static!important;
transform:none!important;
display:flex!important;
align-items:center!important;
gap:3px!important;
margin:0!important;
}
.reader-tools-left,
.reader-page-nav{
/* Put both groups on the same centered first row. */
}
.reader-tools-left::after{content:"";}
.reader-search{
grid-column:1!important;
grid-row:2!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:4px!important;
width:auto!important;
margin:0!important;
}
.reader-bottom #fullscreenToggle{
grid-column:1!important;
grid-row:2!important;
position:relative!important;
margin-left:4px!important;
}
.reader-shell{bottom:64px!important;}
.reader-pages::after{height:calc(100svh - 64px)!important;}
}
@media (max-width:420px){
.reader-bottom{height:62px!important;min-height:62px!important;grid-template-rows:26px 26px!important;padding:4px 5px!important;}
.reader-bottom button,.reader-page-nav .nav-page,.reader-search .search-nav,.reader-bottom #fullscreenToggle{width:24px!important;min-width:24px!important;height:24px!important;}
.page-input-wrap{width:45px!important;min-width:45px!important;height:24px!important;}
.page-input{width:23px!important;height:23px!important;}
.reader-search input{width:102px!important;height:24px!important;}
.reader-shell{bottom:62px!important;}
.reader-pages::after{height:calc(100svh - 62px)!important;}
}
@media (max-width:760px){
.reader-tools-left{transform:translateX(-53px);}
.reader-page-nav{transform:translateX(53px)!important;}
.reader-search{transform:translateX(-15px);}
.reader-bottom #fullscreenToggle{transform:translateX(105px);}
}
@media (max-width:420px){
.reader-tools-left{transform:translateX(-51px);}
.reader-page-nav{transform:translateX(51px)!important;}
.reader-search{transform:translateX(-14px);}
.reader-bottom #fullscreenToggle{transform:translateX(101px);}
}
@media (max-width:1050px){
.reader-header .reader-header-back-arrow{font-size:19px;margin-right:-18px!important;}
}
@media (max-width:760px){
.reader-header .reader-header-back-arrow{font-size:16px;margin-right:-10px!important;}
}
/* V119b — simplify mobile footer wrapping: let the browser form two centered rows. */
@media (max-width:760px){
.reader-bottom{
display:flex!important;
flex-wrap:wrap!important;
align-content:center!important;
justify-content:center!important;
align-items:center!important;
column-gap:4px!important;
row-gap:4px!important;
padding:4px 6px!important;
}
.reader-tools-left,
.reader-page-nav,
.reader-search,
.reader-bottom #fullscreenToggle{
position:static!important;
grid-column:auto!important;
grid-row:auto!important;
margin:0!important;
transform:none!important;
}
.reader-tools-left{flex:0 0 auto!important;}
.reader-page-nav{flex:0 0 auto!important;}
.reader-search{flex:0 0 auto!important;}
.reader-bottom #fullscreenToggle{flex:0 0 auto!important;}
}
/* V121 — lock Reader header geometry to the global site header.
The back arrow is an independent overlay so it never changes nav spacing. */
.reader-header .reader-header-back-arrow{
position:fixed!important;
left:calc(50% - 49px)!important;
top:calc(4.15% + 5px)!important;
width:auto!important;
margin:0!important;
padding:0!important;
transform:none!important;
font-size:16px!important;
line-height:1!important;
letter-spacing:0!important;
color:#f0eeea!important;
z-index:92!important;
pointer-events:auto!important;
}
.reader-header .reader-header-back-arrow:hover,
.reader-header .reader-header-back-arrow:focus-visible{
transform:translateX(-3px)!important;
}
@media (max-width:1000px){
.reader-header .reader-header-back-arrow{
left:calc(50% - 42px)!important;
top:33px!important;
font-size:14px!important;
}
}
@media (max-width:600px){
.reader-header .reader-header-back-arrow{
left:calc(50% - 31px)!important;
top:27px!important;
font-size:12px!important;
}
}
/* V121 — one language-switcher position for every page, shifted down 4px. */
.language-switcher,
.who-page .language-switcher{
top:calc(4.15% - 3px)!important;
}
@media (max-width:1000px){
.language-switcher,
.who-page .language-switcher{top:29px!important;}
}
@media (max-width:600px){
.language-switcher,
.who-page .language-switcher{top:24px!important;}
}
/* V128 — page zoom / fit controls and compact hover help. */
.reader-tip{position:relative;overflow:visible!important;}
.reader-tip::after{
content:attr(data-tip);
position:absolute;
left:50%;
bottom:calc(100% + 9px);
transform:translateX(-50%) translateY(3px);
min-width:max-content;
max-width:190px;
padding:7px 9px;
border:1px solid rgba(240,238,234,.16);
background:rgba(12,11,11,.96);
color:rgba(240,238,234,.92);
font:9px/1.25 Arial,sans-serif;
letter-spacing:.03em;
text-align:center;
white-space:nowrap;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
z-index:500;
box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.reader-tip:hover::after,
.reader-tip:focus-visible::after{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
transition-delay:.15s;
}
@media (max-width:760px){
.reader-tip::after{display:none;}
}
/* V141 Auto Guide: fixed ruler + line-aware automatic advance. */
.auto-guide-speed{height:34px;display:flex;align-items:center;gap:6px;padding:0 6px;border:1px solid rgba(240,238,234,.13);background:rgba(255,255,255,.025);box-sizing:border-box;white-space:nowrap;}
.auto-guide-speed span{font:7px/1 Arial,sans-serif;letter-spacing:.12em;color:#817c74;}
.auto-guide-speed input{width:74px;height:18px;margin:0;accent-color:#bcb5aa;cursor:pointer;}
body.auto-guide-on #autoGuideToggle{background:rgba(184,91,52,.16);color:#fff;border-color:rgba(184,91,52,.5)}
body.auto-guide-on .auto-guide-speed{border-color:rgba(184,91,52,.35);}
@media (max-width:1050px) and (min-width:761px){.auto-guide-speed{padding:0 4px;gap:4px}.auto-guide-speed span{font-size:6px}.auto-guide-speed input{width:58px}}
@media (max-width:760px){.auto-guide-speed{height:31px;padding:0 4px;gap:3px}.auto-guide-speed span{font-size:6px}.auto-guide-speed input{width:52px;height:16px}.reader-bottom #autoGuideToggle{order:1}}
/* V143 — Smart Guide + custom palette + Auto Hide. */
:root{
--reader-guide-rgb:184,91,52;
--reader-guide-line:rgba(184,91,52,.70);
--reader-guide-line-soft:rgba(184,91,52,.55);
--reader-guide-fill:rgba(184,91,52,.075);
--reader-guide-border:rgba(184,91,52,.18);
}
.reading-guide{height:var(--guide-height,28px);top:var(--guide-top,52%);transition:opacity .18s ease,visibility .18s ease,top .42s cubic-bezier(.22,.72,.22,1);}
body.reading-guide-on #readingGuide{height:var(--guide-height,28px)!important;top:var(--guide-top,52%)!important;}
.reading-guide::before,.reading-guide::after{background:var(--reader-guide-line-soft);}
.reading-guide span{background:var(--reader-guide-fill);border-left-color:var(--reader-guide-border);border-right-color:var(--reader-guide-border);}
body.reading-guide-on #readingGuide span{background:var(--reader-guide-fill)!important;border-left-color:var(--reader-guide-border)!important;border-right-color:var(--reader-guide-border)!important;}
body.reading-guide-on #readingGuide::before,body.reading-guide-on #readingGuide::after{background:var(--reader-guide-line)!important;}
body.reading-guide-on .reader-bottom #readingGuideToggle{background:rgba(184,91,52,.16);color:#fff;border-color:rgba(184,91,52,.5);}
body.auto-guide-on .reader-bottom #autoGuideToggle{background:rgba(184,91,52,.16);color:#fff;border-color:rgba(184,91,52,.5);}
body.reader-auto-hide #autoHideToggle.is-active{background:rgba(184,91,52,.16);color:#fff;border-color:rgba(184,91,52,.5);}
.reader-guide-color-wrap{position:relative;display:flex;align-items:center;}
.guide-color-panel{position:absolute;right:0;bottom:calc(100% + 10px);width:164px;padding:10px;background:rgba(12,11,11,.98);border:1px solid rgba(240,238,234,.16);box-shadow:0 10px 30px rgba(0,0,0,.42);z-index:600;}
.guide-color-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.guide-color-swatch{width:28px!important;min-width:28px!important;height:28px!important;padding:0!important;border-radius:50%;background:var(--swatch)!important;border:2px solid rgba(240,238,234,.22)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);}
.guide-color-swatch:hover,.guide-color-swatch.is-selected{border-color:#fff!important;box-shadow:0 0 0 2px rgba(240,238,234,.2);}
.guide-custom-color{margin-top:9px;height:28px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(240,238,234,.1);padding-top:8px;color:#8d8880;font:7px/1 Arial,sans-serif;letter-spacing:.12em;}
.guide-custom-color input{width:34px;height:22px;padding:0;border:1px solid rgba(240,238,234,.18);background:transparent;cursor:pointer;}
#autoHideToggle{min-width:40px;}
body.reader-auto-hide .reader-header,
body.reader-auto-hide .reader-logo,
body.reader-auto-hide .language-switcher,
body.reader-auto-hide .reader-fixed-head,
body.reader-auto-hide .reader-topbar,
body.reader-auto-hide .reader-bottom{transition:transform .45s cubic-bezier(.2,.75,.25,1),opacity .35s ease,visibility .35s ease;}
body.reader-auto-hide .reader-header{transition-delay:0s;}
body.reader-auto-hide .reader-logo{transition-delay:.02s;}
body.reader-auto-hide .reader-fixed-head{transition-delay:.04s;}
body.reader-auto-hide .reader-topbar{transition-delay:.06s;}
body.reader-auto-hide .reader-bottom{transition-delay:0s;}
body.reader-ui-hidden .reader-header{transform:translateY(-120%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
body.reader-ui-hidden .reader-logo{transform:translate(-50%,-180%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
body.reader-ui-hidden .language-switcher{transform:translateY(-180%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
body.reader-ui-hidden .reader-fixed-head{transform:translateY(-105%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
body.reader-ui-hidden .reader-topbar{transform:translateY(-120%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
body.reader-ui-hidden .reader-bottom{transform:translateY(110%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
/* When the chrome is hidden the shell owns the whole viewport. */
body.reader-ui-hidden .reader-shell{top:0!important;bottom:0!important;padding-top:20px!important;padding-bottom:20px!important;transition:top .45s cubic-bezier(.2,.75,.25,1),bottom .45s cubic-bezier(.2,.75,.25,1),padding .45s cubic-bezier(.2,.75,.25,1);}
body.reader-auto-hide .reader-shell{transition:top .45s cubic-bezier(.2,.75,.25,1),bottom .45s cubic-bezier(.2,.75,.25,1),padding .45s cubic-bezier(.2,.75,.25,1);}
body.reader-ui-hidden .reader-content{min-height:100%;}
body.reader-ui-hidden #autoHideToggle{background:rgba(184,91,52,.16);color:#fff;border-color:rgba(184,91,52,.5);}
@media (max-width:760px){
.guide-color-panel{right:-4px;width:156px;}
.guide-color-swatch{width:26px!important;min-width:26px!important;height:26px!important;}
}
@media (prefers-reduced-motion:reduce){
body.reader-auto-hide .reader-header,body.reader-auto-hide .reader-logo,body.reader-auto-hide .language-switcher,body.reader-auto-hide .reader-fixed-head,body.reader-auto-hide .reader-topbar,body.reader-auto-hide .reader-bottom,body.reader-auto-hide .reader-shell{transition:none!important;}
}
/* V145 — Reader navigation/position preservation is handled in reader.js. */
/* V146 — Auto-hide chrome leaves the Reader/page visually stable while the
header and footer slide out like real chrome, with no fade-driven jump. */
body.reader-auto-hide .reader-header,
body.reader-auto-hide .reader-logo,
body.reader-auto-hide .language-switcher,
body.reader-auto-hide .reader-fixed-head,
body.reader-auto-hide .reader-topbar,
body.reader-auto-hide .reader-bottom{
transition:transform .52s cubic-bezier(.22,.72,.22,1), opacity .18s linear, visibility 0s linear .52s;
}
body.reader-ui-hidden .reader-header{transform:translate3d(0,-115%,0)!important;opacity:0!important;visibility:hidden!important;}
body.reader-ui-hidden .reader-logo{transform:translate3d(-50%,-190%,0)!important;opacity:0!important;visibility:hidden!important;}
body.reader-ui-hidden .language-switcher{transform:translate3d(0,-190%,0)!important;opacity:0!important;visibility:hidden!important;}
body.reader-ui-hidden .reader-fixed-head{transform:translate3d(0,-110%,0)!important;opacity:0!important;visibility:hidden!important;}
body.reader-ui-hidden .reader-topbar{transform:translate3d(0,-125%,0)!important;opacity:0!important;visibility:hidden!important;}
body.reader-ui-hidden .reader-bottom{transform:translate3d(0,115%,0)!important;opacity:0!important;visibility:hidden!important;}
/* V146 — Guide is clipped to the visible page width by JS; never let the
guide itself create horizontal overflow while a zoomed page is wider than
the viewport. */
#readingGuide{max-width:100vw;box-sizing:border-box;}
/* V147 — Auto-hide is purely visual chrome. The Reader viewport never changes
size, padding, or position when the header/footer leave or return. */
body.reader-auto-hide .reader-header,
body.reader-auto-hide .reader-logo,
body.reader-auto-hide .language-switcher,
body.reader-auto-hide .reader-fixed-head,
body.reader-auto-hide .reader-topbar,
body.reader-auto-hide .reader-bottom{
transition:transform 500ms cubic-bezier(.22,.72,.22,1), visibility 0s linear 500ms !important;
opacity:1 !important;
}
body.reader-ui-hidden .reader-header{transform:translate3d(0,-115%,0)!important;opacity:1!important;visibility:hidden!important;}
body.reader-ui-hidden .reader-logo{transform:translate3d(-50%,-190%,0)!important;opacity:1!important;visibility:hidden!important;}
body.reader-ui-hidden .language-switcher{transform:translate3d(0,-190%,0)!important;opacity:1!important;visibility:hidden!important;}
body.reader-ui-hidden .reader-fixed-head{transform:translate3d(0,-110%,0)!important;opacity:1!important;visibility:hidden!important;}
body.reader-ui-hidden .reader-topbar{transform:translate3d(0,-125%,0)!important;opacity:1!important;visibility:hidden!important;}
body.reader-ui-hidden .reader-bottom{transform:translate3d(0,115%,0)!important;opacity:1!important;visibility:hidden!important;}
/* Critical: never alter the shell's top/bottom/padding during Auto Hide. */
body.reader-ui-hidden .reader-shell,
body.reader-auto-hide .reader-shell{
transition:none !important;
top:calc(4.15% + 95px) !important;
bottom:51px !important;
padding-top:8px !important;
padding-bottom:40px !important;
}
@media (max-width:760px){
body.reader-ui-hidden .reader-shell,
body.reader-auto-hide .reader-shell{
top:129px !important;
bottom:156px !important;
padding-top:8px !important;
padding-bottom:36px !important;
}
}
@media (max-width:420px){
body.reader-ui-hidden .reader-shell,
body.reader-auto-hide .reader-shell{
top:129px !important;
bottom:156px !important;
padding-top:8px !important;
padding-bottom:36px !important;
}
}
/* V148 — Full-viewport Reader canvas. Header/footer are chrome overlays, not
boundaries of the reading page. The page therefore never gets "cut" when
Auto Hide is used. Extra breathing room is added only to the first page so
its opening content starts comfortably beneath the overlaying header. */
body.reader-page .reader-shell{
top:0 !important;
bottom:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
transition:none !important;
}
body.reader-page .reader-page-sheet:first-child{
padding-top:145px !important;
}
@media (max-width:760px){
body.reader-page .reader-page-sheet:first-child{
padding-top:120px !important;
}
}
@media (max-width:420px){
body.reader-page .reader-page-sheet:first-child{
padding-top:110px !important;
}
}
/* V148 — Auto-guide state is visually explicit. */
body.auto-guide-on .reader-bottom #autoGuideToggle{
background:rgba(184,91,52,.16);
color:#fff;
border-color:rgba(184,91,52,.5);
}
/* Book language menu in the reader toolbar (mirrors the guide-colour panel). */
.reader-lang-wrap{position:relative;display:inline-flex;}
.reader-bottom #readerLangToggle{font-size:10px;letter-spacing:.1em;}
.reader-lang-panel{position:absolute;right:-40px;bottom:calc(100% + 10px);width:168px;padding:6px;background:rgba(12,11,11,.98);border:1px solid rgba(240,238,234,.16);box-shadow:0 10px 30px rgba(0,0,0,.42);z-index:600;display:flex;flex-direction:column;gap:2px;}
.reader-lang-panel[hidden]{display:none;}
.reader-bottom .reader-lang-option{display:flex!important;justify-content:space-between;align-items:center;gap:12px;width:100%!important;min-width:0!important;height:30px!important;padding:0 10px!important;background:none!important;border:0!important;color:#f0eeea;opacity:.78;font:12px/1 Arial,sans-serif!important;letter-spacing:.05em;text-align:left;cursor:pointer;}
.reader-bottom .reader-lang-option:hover,.reader-bottom .reader-lang-option:focus-visible{opacity:1;background:rgba(240,238,234,.07)!important;}
.reader-bottom .reader-lang-option.is-active{opacity:1;box-shadow:inset 2px 0 0 #b85b34;}
.reader-bottom .reader-lang-option.is-missing span{opacity:.55;}
.reader-lang-option small{font-size:9px;letter-spacing:.12em;opacity:.55;}
.reader-lang-wrap #readerLangToggle[aria-expanded="true"]::after{display:none!important;}
/* V150 — The guide's vertical motion is animated by the engine together with
the page scroll; a CSS transition on top made it lag behind the scroll. */
#readingGuide.reading-guide{transition:opacity .18s ease,visibility .18s ease!important;}
/* ===== V151 — marks, bookmark, page badge, resume prompt, reader guide ===== */
:root{--mark-tint:rgba(214,166,52,.30);--mark-dot:#c08a1e;--mark-ui:#b85b34;}
.story-column p::highlight(grav-mark),.story-column p *::highlight(grav-mark){background-color:var(--mark-tint);color:inherit;}
.reader-book.night .story-column p::highlight(grav-mark),.reader-book.night .story-column p *::highlight(grav-mark){background-color:rgba(214,166,52,.24);}
.story-column p::highlight(grav-mark-flash),.story-column p *::highlight(grav-mark-flash){background-color:rgba(184,91,52,.38);}
/* Toolbar icons */
.reader-bottom .reader-icon-btn svg{width:13px;height:13px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;}
.reader-bottom .reader-icon-btn svg .f{fill:currentColor;stroke:none;}
.reader-bottom #bookmarkToggle.is-active svg path{fill:currentColor;}
.reader-bottom #bookmarkToggle.is-active,.reader-bottom #marksToggle.is-active{background:rgba(184,91,52,.16);color:#fff;border-color:rgba(184,91,52,.5);}
.reader-bottom #readerHelpToggle{font:600 12px/1 Arial,sans-serif;}
/* Margin dot for marked lines; ribbon for the bookmark (inside the page). */
.mark-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--mark-dot);pointer-events:none;z-index:2;}
.bookmark-ribbon{position:absolute;right:22px;width:11px;height:20px;margin-top:-10px;background:var(--mark-ui);clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%);pointer-events:none;z-index:2;opacity:.9;}
@media (max-width:760px){.bookmark-ribbon{right:7px;width:9px;height:16px;margin-top:-8px}.mark-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px}}
/* The circle beside the line under the guide. */
#guideMarkBtn{position:fixed;z-index:10002;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
#guideMarkBtn[hidden]{display:none;}
#guideMarkBtn span{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--reader-guide-line,#b85b34);background:rgba(235,228,215,.9);box-sizing:border-box;transition:transform .15s ease,background .15s ease;}
#guideMarkBtn:hover span{transform:scale(1.25);}
#guideMarkBtn.is-marked span{background:var(--mark-dot);border-color:var(--mark-dot);}
body:not(.reading-guide-on) #guideMarkBtn{display:none;}
@media (max-width:760px){#guideMarkBtn{width:36px;height:36px;margin:-18px 0 0 -18px}}
/* Selection popup (desktop) */
#markPopup{position:fixed;z-index:10003;background:rgba(18,17,16,.97);border:1px solid rgba(240,238,234,.18);box-shadow:0 8px 24px rgba(0,0,0,.4);}
#markPopup[hidden]{display:none;}
#markPopup button{background:none;border:0;color:#f0eeea;font:11px/1 Arial,sans-serif;letter-spacing:.08em;padding:10px 14px;cursor:pointer;white-space:nowrap;}
#markPopup button:hover{background:rgba(240,238,234,.08);}
/* Toast + page badge */
#readerToast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,10px);z-index:10004;background:rgba(18,17,16,.96);color:#f0eeea;border:1px solid rgba(240,238,234,.16);font:11px/1.3 Arial,sans-serif;letter-spacing:.06em;padding:10px 16px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;white-space:nowrap;}
#readerToast.is-on{opacity:1;transform:translate(-50%,0);}
@media (max-width:760px){#readerToast{bottom:170px;}}
#pageBadge{position:fixed;z-index:10001;background:rgba(18,17,16,.9);color:#f0eeea;border:1px solid rgba(240,238,234,.18);font:11px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;opacity:0;pointer-events:none;transition:opacity .18s ease;}
#pageBadge small{font-size:9px;opacity:.55;letter-spacing:.08em;}
#pageBadge.is-on{opacity:1;}
#pageBadge.is-fading{transition:opacity .6s ease;}
#readerHelpTip{position:fixed;z-index:10005;transform:translate(-50%,-100%);background:#b85b34;color:#fff;font:11px/1.2 Arial,sans-serif;letter-spacing:.05em;padding:9px 12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease;cursor:pointer;}
#readerHelpTip::after{content:"";position:absolute;left:calc(50% + var(--arrow-x,0px));bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:#b85b34;}
#readerHelpTip.is-on{opacity:1;pointer-events:auto;}
/* Marks drawer */
.reader-drawer header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid rgba(240,238,234,.1);position:sticky;top:0;background:inherit;z-index:1;}
.reader-drawer header h2{margin:0;font:400 19px/1.2 Lora,Georgia,serif;color:#f0eeea;}
.reader-drawer{position:fixed;z-index:10006;top:0;right:0;bottom:0;width:min(380px,100vw);background:#141312;color:#ddd7cd;border-left:1px solid rgba(240,238,234,.14);box-shadow:-18px 0 50px rgba(0,0,0,.45);display:flex;flex-direction:column;font:13px/1.55 Arial,sans-serif;}
.reader-drawer[hidden]{display:none;}
.drawer-bookmark{display:flex;align-items:stretch;border-bottom:1px solid rgba(240,238,234,.1);padding:6px 10px;}
.drawer-list{flex:1;overflow:auto;padding:6px 10px;}
.drawer-row{display:flex;align-items:stretch;border-bottom:1px solid rgba(240,238,234,.06);}
.drawer-item{flex:1;display:flex;flex-direction:column;gap:5px;text-align:left;background:none;border:0;color:inherit;padding:11px 10px;cursor:pointer;font:inherit;}
.drawer-item:hover{background:rgba(240,238,234,.05);}
.drawer-page{font:10px/1 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8e877d;display:flex;align-items:center;gap:7px;}
.drawer-text{font:italic 14px/1.5 Lora,Georgia,serif;color:#e6e0d6;border-left:2px solid var(--mark-dot);padding-left:10px;}
.drawer-bookmark .drawer-text{border-left-color:var(--mark-ui);}
.ribbon-icon{display:inline-block;width:8px;height:13px;background:var(--mark-ui);clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%);}
.drawer-row.is-lost .drawer-text{opacity:.5;}
.drawer-del{width:34px;background:none;border:0;color:#7f786f;font-size:16px;cursor:pointer;}
.drawer-del:hover{color:#fff;}
.drawer-empty{margin:12px 10px;color:#8e877d;font-size:12px;}
.reader-drawer footer{display:flex;gap:6px;padding:12px;border-top:1px solid rgba(240,238,234,.1);}
.reader-drawer footer button{flex:1;height:34px;border:1px solid rgba(240,238,234,.16);background:rgba(255,255,255,.03);color:#e6e0d6;font:10px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
.reader-drawer footer button:hover{background:rgba(240,238,234,.08);}
.reader-drawer footer button:disabled{opacity:.35;cursor:default;}
@media (max-width:760px){
.reader-drawer{top:auto;left:0;width:auto;height:72svh;border-left:0;border-top:1px solid rgba(240,238,234,.16);box-shadow:0 -18px 50px rgba(0,0,0,.5);}
.reader-tools-left{flex-wrap:wrap;justify-content:center;max-width:100%;}
}
/* V151 — Phone toolbar rebuilt: reading controls wrap onto centred rows,
page navigation + search sit on their own last row. Replaces the older
translateX positioning, which pushed buttons off narrow screens. */
@media (max-width:760px){
.reader-bottom{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;align-content:center!important;gap:6px 4px!important;height:auto!important;min-height:0!important;padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px))!important;grid-template-rows:none!important;}
.reader-tools-left{display:contents!important;transform:none!important;}
.reader-bottom::after{content:"";flex-basis:100%;height:0;order:1;}
.reader-page-nav,.reader-search{order:2;transform:none!important;margin:0!important;}
.reader-bottom #fullscreenToggle,.reader-bottom #pageFitToggle{order:0;transform:none!important;margin:0!important;}
.reader-bottom #themeToggle,.reader-bottom #autoGuideToggle,.reader-tools-left>*{order:0!important;}
.reader-bottom button,.reader-page-nav .nav-page,.reader-search .search-nav,.reader-bottom #fullscreenToggle{width:31px!important;min-width:31px!important;height:31px!important;padding:0!important;}
.auto-guide-speed{height:31px!important;}
.page-input-wrap{height:31px!important;min-width:52px!important;width:auto!important;}
.page-input{height:29px!important;}
.reader-search input{width:118px!important;height:31px!important;}
#readerToast{bottom:132px;}
}
@media (max-width:370px){
.reader-bottom button,.reader-page-nav .nav-page,.reader-search .search-nav,.reader-bottom #fullscreenToggle{width:29px!important;min-width:29px!important;height:29px!important;}
.reader-search input{width:96px!important;}
}
@media (max-width:760px){
.auto-guide-speed{padding:0 6px!important;gap:0!important;}
.auto-guide-speed span{display:none!important;}
.auto-guide-speed input{width:56px!important;}
}
@media (max-width:760px){.reader-tools-left::after,.reader-tools-left::before{display:none!important;}}
/* ===== V152 — touch devices: the page itself scrolls =====
Mobile Safari and Chrome only collapse their address bar when the document
scrolls. The reading frame therefore becomes ordinary page flow here; the
header and toolbar stay fixed overlays exactly as before. */
html.reader-doc-scroll{overflow-x:hidden!important;overflow-y:visible!important;height:auto!important;min-height:100%!important;}
html.reader-doc-scroll body.reader-page{overflow:visible!important;height:auto!important;min-height:100%!important;}
html.reader-doc-scroll body.reader-page .reader-shell,
html.reader-doc-scroll body.reader-page.reader-ui-hidden .reader-shell,
html.reader-doc-scroll body.reader-page.reader-auto-hide .reader-shell{position:relative!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;overscroll-behavior:auto!important;}
html.reader-doc-scroll body.reader-page{overscroll-behavior-y:auto;}
#fullscreenToggle[hidden],.reader-bottom #fullscreenToggle[hidden]{display:none!important;}
/* Phones: the book title on the first page starts below the header. */
@media (max-width:760px){body.reader-page .reader-page-sheet:first-child{padding-top:150px!important;}}
/* Phones held sideways (touch, short screen): compact toolbar like portrait,
and the header keeps only the menu (the book title is on the first page). */
@media (pointer:coarse) and (max-height:500px){
.reader-bottom{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;align-content:center!important;gap:5px 4px!important;height:auto!important;min-height:0!important;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px))!important;}
.reader-tools-left{display:contents!important;transform:none!important;}
.reader-tools-left::after,.reader-tools-left::before{display:none!important;}
.reader-page-nav,.reader-search,.reader-bottom #fullscreenToggle,.reader-bottom #pageFitToggle{transform:none!important;margin:0!important;}
.reader-bottom button,.reader-page-nav .nav-page,.reader-search .search-nav,.reader-bottom #fullscreenToggle{width:30px!important;min-width:30px!important;height:30px!important;padding:0!important;}
.auto-guide-speed{height:30px!important;padding:0 6px!important;}
.auto-guide-speed span{display:none!important;}
.auto-guide-speed input{width:56px!important;}
.page-input-wrap{height:30px!important;}
.reader-search input{width:110px!important;height:30px!important;}
.reader-book-info{display:none!important;}
}
/* Touch screens have no hover: never show the desktop tooltips. */
@media (hover:none){.reader-tip::after{display:none!important;}}
/* ===== V153 — slimmer reader header =====
No cover thumbnail. The home logo sits in the menu row, left of WHO AM I;
the back arrow is an ordinary menu item before WORKS; under the menu only
the book title. */
.reader-book-info{display:none!important;}
.reader-page .reader-fixed-head{height:calc(4.15% + 84px)!important;}
.reader-head-title{position:absolute;left:50%;top:calc(4.15vh + 50px);transform:translateX(-50%);max-width:calc(100vw - 48px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:400 19px/1.25 Lora,Georgia,serif;letter-spacing:.04em;color:#e9e4dc;text-align:center;pointer-events:none;}
.reader-header nav{align-items:center!important;}
.reader-header nav a.reader-logo{position:static!important;left:auto!important;top:auto!important;transform:none!important;width:24px!important;height:auto!important;margin:0 14px 0 0!important;opacity:1!important;visibility:inherit!important;display:inline-flex!important;align-self:center;line-height:0;}
.reader-header nav a.reader-logo img{width:100%!important;height:auto!important;}
.reader-header nav a.reader-header-back-arrow{position:static!important;left:auto!important;top:auto!important;transform:none!important;font-size:16px!important;line-height:1!important;letter-spacing:0!important;margin:0 calc(10px - var(--nav-gap,24px)) 0 0!important;padding:0!important;color:#f0eeea!important;transition:transform .35s ease!important;}
.reader-header nav a.reader-header-back-arrow:hover,.reader-header nav a.reader-header-back-arrow:focus-visible{transform:translateX(-3px)!important;}
/* Language code to the left of the globe; the whole switcher lines up with the menu. */
.reader-page .language-globe{width:auto!important;flex-direction:row-reverse!important;justify-content:flex-end!important;}
@media (max-width:760px){
.reader-page .reader-fixed-head{height:100px!important;}
.reader-head-title{top:56px;font-size:16px;}
.reader-header nav{gap:15px!important;--nav-gap:15px;}
.reader-header nav a.reader-logo{width:18px!important;margin-right:0!important;}
.reader-header nav a.reader-header-back-arrow{font-size:12px!important;margin-right:calc(6px - 15px)!important;}
}
@media (min-width:1051px){.reader-header nav{--nav-gap:34px;}}
@media (max-width:1050px) and (min-width:761px){.reader-header nav{--nav-gap:24px;}}
@media (max-width:420px){
.reader-header nav{gap:11px!important;--nav-gap:11px;letter-spacing:.1em!important;}
.reader-header nav a.reader-logo{width:16px!important;}
.reader-header nav a.reader-header-back-arrow{margin-right:calc(6px - 11px)!important;}
}
@media (max-width:360px){
.reader-header nav{gap:9px!important;--nav-gap:9px;letter-spacing:.06em!important;}
.reader-header nav a.reader-header-back-arrow{margin-right:calc(5px - 9px)!important;}
}
/* The first page starts under the slimmer header. */
body.reader-page .reader-page-sheet:first-child{padding-top:120px!important;}
@media (max-width:760px){body.reader-page .reader-page-sheet:first-child{padding-top:118px!important;}}
/* Mark circle: 10% smaller on touch screens, the same size marked or not,
and no sticky hover enlargement after a tap. */
@media (hover:none){
#guideMarkBtn:hover span{transform:none;}
#guideMarkBtn span{width:11px;height:11px;}
}
/* Numbered pieces (book 05): the number replaces the · separator. */
.story-column .poem-number{font:500 0.72em/1 Arial,sans-serif;letter-spacing:.22em;opacity:.5;margin:2.1em 0 .75em;}
.story-column .poem-number:first-child{margin-top:0;}
/* While Auto Hide has put the header away, the logo goes with it. */
body.reader-ui-hidden .reader-header nav a.reader-logo{opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
/* ===== V154 — mark circle inside the guide band, 16px from the page edge ===== */
#readingGuide #guideMarkBtn{position:absolute!important;left:16px;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto!important;z-index:2;-webkit-tap-highlight-color:transparent;}
#readingGuide #guideMarkBtn[hidden]{display:none!important;}
#readingGuide #guideMarkBtn i{display:block;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--reader-guide-line,#b85b34);background:rgba(235,228,215,.9);box-sizing:border-box;transition:background .15s ease,border-color .15s ease;}
#readingGuide #guideMarkBtn.is-marked i{background:var(--mark-dot);border-color:var(--mark-dot);}
@media (hover:hover){#readingGuide #guideMarkBtn:hover i{transform:scale(1.2);}}
@media (max-width:760px){#readingGuide #guideMarkBtn{width:36px;height:36px;margin:-18px 0 0 -18px;}}
@media (hover:none){#readingGuide #guideMarkBtn i{width:11px;height:11px;}}
@media (max-width:760px){
#readingGuide #guideMarkBtn{left:11px;}
.reader-page-sheet{padding-left:27px!important;}
}
@media (max-width:420px){.reader-page-sheet{padding-left:24px!important;}}
/* Book titles sit a little lower under the header (same in Show and Hide). */
body.reader-page .reader-page-sheet:first-child{padding-top:133px!important;}
@media (max-width:760px){body.reader-page .reader-page-sheet:first-child{padding-top:131px!important;}}
/* End of the book: back to the first page. */
.story-end .reader-first-page{margin-top:34px;align-self:center;background:none;border:1px solid currentColor;color:inherit;opacity:.62;font:10px/1 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:11px 18px;cursor:pointer;transition:opacity .2s ease;}
.story-end .reader-first-page:hover,.story-end .reader-first-page:focus-visible{opacity:1;outline:none;}
/* V155 — start of a range: a thin ring around the last marked line's dot. */
.mark-anchor{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1px solid var(--mark-dot);box-sizing:border-box;pointer-events:none;z-index:2;}
@media (max-width:760px){.mark-anchor{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;}}
#readingGuide #guideMarkBtn{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;}
body.reading-guide-on .story-column p[data-pg]{cursor:pointer;}
/* ===== V156 — notes, read aloud ===== */
.reader-bottom #readAloudToggle.is-active{background:rgba(184,91,52,.16);color:#fff;border-color:rgba(184,91,52,.5);}
.note-icon{display:inline-block;width:12px;height:11px;flex:0 0 12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M1 1h10v6.5H5.2L2.6 10V7.5H1z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M3.2 3.4h5.6M3.2 5.3h3.8' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M1 1h10v6.5H5.2L2.6 10V7.5H1z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M3.2 3.4h5.6M3.2 5.3h3.8' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat;}
.note-flag{position:absolute;right:44px;width:26px;height:26px;margin-top:-13px;padding:0;border:0;background:none;color:var(--mark-dot);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;opacity:.9;}
.note-flag:hover{opacity:1;}
.note-flag .note-icon{width:14px;height:13px;flex-basis:14px;}
@media (max-width:760px){.note-flag{right:2px;}}
.drawer-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.drawer-note,.drawer-note-add{display:flex;gap:8px;align-items:flex-start;text-align:left;background:none;border:0;color:#bdb6ab;font:12px/1.5 Arial,sans-serif;padding:0 10px 11px 22px;cursor:pointer;}
.drawer-note .note-icon{color:var(--mark-dot);margin-top:3px;}
.drawer-note-add{color:#7f786f;font-size:10px;letter-spacing:.08em;}
.drawer-note:hover,.drawer-note-add:hover{color:#f0eeea;}
.drawer-note-edit{display:flex;flex-direction:column;gap:6px;padding:0 10px 12px 22px;}
.drawer-note-edit textarea,#notePopover textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:64px;background:rgba(255,255,255,.04);border:1px solid rgba(240,238,234,.18);color:#f0eeea;font:13px/1.5 Arial,sans-serif;padding:8px 10px;outline:none;}
.drawer-note-edit textarea:focus,#notePopover textarea:focus{border-color:var(--mark-dot);}
.drawer-note-edit button{align-self:flex-end;height:28px;padding:0 14px;border:1px solid rgba(240,238,234,.18);background:none;color:#e6e0d6;font:10px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
#notePopover{position:fixed;z-index:10007;background:#141312;border:1px solid rgba(240,238,234,.16);box-shadow:0 14px 40px rgba(0,0,0,.5);padding:12px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;color:#ddd7cd;}
#notePopover[hidden]{display:none;}
.note-pop-head{display:flex;align-items:center;justify-content:space-between;font:10px/1 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8e877d;}
.note-pop-head .drawer-close{width:26px;height:26px;font-size:15px;}
.note-pop-foot{display:flex;justify-content:space-between;gap:8px;}
.note-pop-foot button{height:30px;padding:0 12px;border:1px solid rgba(240,238,234,.18);background:none;color:#bdb6ab;font:10px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
.note-pop-foot button.is-primary{color:#fff;border-color:var(--mark-dot);}
/* ===== V157 — voice menu + speaker sign in the guide band ===== */
.tts-wrap{position:relative;display:inline-flex;gap:2px;}
.reader-bottom #ttsVoiceToggle{min-width:0!important;width:16px!important;padding:0!important;font-size:9px!important;opacity:.75;}
.tts-voice-panel{position:absolute;left:0;bottom:calc(100% + 10px);width:250px;max-height:min(360px,60vh);overflow:auto;padding:6px;background:rgba(12,11,11,.98);border:1px solid rgba(240,238,234,.16);box-shadow:0 10px 30px rgba(0,0,0,.42);z-index:600;display:flex;flex-direction:column;gap:2px;}
.tts-voice-panel[hidden]{display:none;}
.tts-voice-title{font:9px/1 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8e877d;padding:6px 8px 8px;}
.reader-bottom .tts-voice-option{display:flex!important;flex-direction:column;align-items:flex-start;gap:3px;width:100%!important;height:auto!important;min-height:34px;padding:6px 10px!important;background:none!important;border:0!important;color:#f0eeea;opacity:.8;font:12px/1.25 Arial,sans-serif!important;letter-spacing:.02em;text-align:left;cursor:pointer;}
.reader-bottom .tts-voice-option small{font-size:9px;opacity:.55;letter-spacing:.06em;}
.reader-bottom .tts-voice-option:hover{opacity:1;background:rgba(240,238,234,.07)!important;}
.reader-bottom .tts-voice-option.is-active{opacity:1;box-shadow:inset 2px 0 0 var(--reader-guide-line,#b85b34);}
.tts-voice-empty{margin:4px 8px 8px;font:11px/1.45 Arial,sans-serif;color:#bdb6ab;}
@media (max-width:760px){.tts-voice-panel{left:auto;right:-60px;width:min(250px,90vw);}}
#readingGuide .tts-sign{display:none;position:absolute;left:36px;top:50%;width:15px;height:15px;margin-top:-7.5px;color:var(--mark-dot,#b85b34);pointer-events:none;z-index:2;}
#readingGuide .tts-sign svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;}
#readingGuide .tts-sign .f{fill:currentColor;stroke:none;}
body.read-aloud-on #readingGuide .tts-sign{display:block;}
body.read-aloud-on #readingGuide .tts-sign .w1{animation:ttsWave 1.1s ease-in-out infinite;}
body.read-aloud-on #readingGuide .tts-sign .w2{animation:ttsWave 1.1s ease-in-out .25s infinite;}
@keyframes ttsWave{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){body.read-aloud-on #readingGuide .tts-sign .w1,body.read-aloud-on #readingGuide .tts-sign .w2{animation:none;}}
@media (max-width:760px){#readingGuide .tts-sign{left:auto;right:9px;}}
/* ===== V158 ===== */
/* The guide band fades away over the empty space after the last page. */
body.reading-guide-on #readingGuide.is-void{opacity:0!important;transition:opacity .25s ease!important;}
/* The book slides aside smoothly for the marks panel. */
.reader-book.book-sliding{transition:transform .42s cubic-bezier(.22,.72,.22,1)!important;}
/* Tablets (761–1050 px): the page fills the width, so the marks panel opens
from the bottom like on phones (it closes when a passage is chosen). */
@media (min-width:761px) and (max-width:1050px){
.reader-drawer{top:auto;left:0;width:auto!important;height:60vh;border-left:0;border-top:1px solid rgba(240,238,234,.16);box-shadow:0 -18px 50px rgba(0,0,0,.5);}
}
/* V159 — voice list: items keep their height (no overlap) and an opaque panel */
.tts-voice-panel{background:#0c0b0b;}
.tts-voice-panel > *{flex-shrink:0;}
.reader-bottom .tts-voice-option{min-height:0;padding:7px 10px!important;gap:2px;}
.reader-bottom .tts-voice-option span{display:block;white-space:normal;}
.reader-bottom .tts-voice-option small{display:block;line-height:1.3;}
/* V162 — third paper: parchment with dark-brown ink */
.reader-book.parchment{color:#4b3019;}
.reader-book.parchment .reader-page-sheet{background:#ecdcb8 url("assets/reader/parchment.webp") center/100% 100% no-repeat;}
.reader-book.parchment .story-column,.reader-book.parchment .reader-page-sheet h2{color:#4b3019;}
.reader-book.parchment .page-author,.reader-book.parchment .story-end,.reader-book.parchment .story-date,.reader-book.parchment .printed-page-number{color:#7a6248;}
/* V165 — scrollable panels keep their scroll to themselves */
.tts-voice-panel,.reader-lang-panel,.guide-color-panel,.reader-drawer,.reader-drawer *,#notePopover,.reader-modal-card{overscroll-behavior:contain;}
/* V169 — brightness veil and warm light (screen brightness itself untouched) */
#readerDim,#readerWarm{position:fixed;inset:0;pointer-events:none;z-index:99;}
#readerDim{background:#000;opacity:0;transition:opacity .25s ease;}
#readerWarm{display:none;}
/* Warm light tints the pages only; the dark surround stays black. */
.reader-page-sheet::after{content:"";position:absolute;inset:0;background:rgb(255,150,60);mix-blend-mode:multiply;opacity:0;pointer-events:none;z-index:3;transition:opacity .35s ease;}
body.reader-warm .reader-page-sheet::after{opacity:.26;}
.reader-bright-wrap{position:relative;display:inline-flex;}
.bright-panel{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 10px);width:176px;padding:10px 12px 12px;background:#0c0b0b;border:1px solid rgba(240,238,234,.16);box-shadow:0 10px 30px rgba(0,0,0,.42);z-index:600;display:flex;flex-direction:column;gap:10px;color:#ddd7cd;}
.bright-panel[hidden]{display:none;}
.bright-title{font:9px/1 Arial,sans-serif;letter-spacing:.14em;color:#8e877d;}
.bright-row{display:flex;align-items:center;gap:10px;}
.bright-val{font:11px/1 Arial,sans-serif;min-width:34px;color:#cfc9c0;}
.bright-row input{flex:1 1 auto;width:auto!important;min-width:0!important;margin:0 4px 0 0;accent-color:var(--reader-guide-line,#b85b34);}
.bright-warm{display:flex;align-items:center;gap:8px;font:11px/1.2 Arial,sans-serif;color:#cfc9c0;cursor:pointer;}
.bright-warm input{accent-color:#d8913f;margin:0;}
.reader-bottom #brightToggle.is-active{color:#e8b56a;}
@media (max-width:760px){.bright-panel{left:auto;right:-40px;transform:none;}}
/* V173 — offline reading: offer bar, badge */
#offlineBar{position:fixed;left:50%;bottom:84px;transform:translate(-50%,12px);z-index:10005;max-width:min(680px,calc(100vw - 24px));box-sizing:border-box;background:rgba(18,17,16,.97);color:#e6e0d6;border:1px solid rgba(240,238,234,.16);box-shadow:0 12px 34px rgba(0,0,0,.45);padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:12px/1.35 Arial,sans-serif;opacity:0;transition:opacity .3s ease,transform .3s ease;}
#offlineBar.is-on{opacity:1;transform:translate(-50%,0);}
#offlineBar[hidden]{display:none;}
#offlineBar .off-q{flex:1 1 220px;letter-spacing:.02em;}
#offlineBar .off-btns{display:flex;flex-wrap:wrap;gap:6px;}
#offlineBar button{height:30px;padding:0 12px;border:1px solid rgba(240,238,234,.2);background:rgba(255,255,255,.04);color:#f0eeea;font:11px/1 Arial,sans-serif;letter-spacing:.04em;cursor:pointer;white-space:nowrap;}
#offlineBar button:hover{background:rgba(240,238,234,.1);}
#offlineBar button[data-off="one"],#offlineBar button[data-off="all"]{border-color:rgba(184,91,52,.55);}
#offlineBar .off-no{border-color:transparent;background:none;color:#a9a297;}
#offlineBar .off-note{flex-basis:100%;font-size:10.5px;color:#8e877d;}
.offline-badge{display:block;margin:10px auto 0;padding:3px 9px;border:1px solid currentColor;border-radius:999px;background:none;color:inherit;opacity:.5;font:9px/1.2 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;}
.offline-badge:hover{opacity:.85;}
@media (max-width:760px){#offlineBar{bottom:150px;padding:10px;width:calc(100vw - 24px);}#offlineBar .off-btns{width:100%;}#offlineBar button{flex:1 1 auto;}}
/* V177 — marks panel: Delete all */
.drawer-head-actions{display:flex;align-items:center;gap:10px;}
.reader-drawer .drawer-clear{height:30px;padding:0 10px;border:1px solid rgba(214,104,84,.45);background:none;color:#e2a294;font:10px/1 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
.reader-drawer .drawer-clear:hover{background:rgba(214,104,84,.14);color:#f3c2b6;}
/* Home link: the GRAVITISM logotype at the left of the Reader header
(replaces the feather mark). Lives inside the header, so it hides with it. */
.reader-header .reader-wordmark{position:absolute;left:5.2vw;top:50%;transform:translateY(-50%);width:130px;line-height:0;z-index:2;}
.reader-header .reader-wordmark img{display:block;width:100%;height:auto;opacity:.92;transition:opacity .25s ease;}
.reader-header .reader-wordmark:hover img,.reader-header .reader-wordmark:focus-visible img{opacity:.58;}
body.reader-ui-hidden .reader-header .reader-wordmark{pointer-events:none!important;}
@media (max-width:900px){.reader-header .reader-wordmark{left:5vw;width:104px;}}
@media (max-width:760px){.reader-header .reader-wordmark{left:12px;width:58px;}}
@media (max-width:374px){.reader-header .reader-wordmark{left:9px;width:50px;}}
@media (max-width:340px){.reader-header .reader-wordmark{left:8px;width:42px;}}
/* V201 — very narrow phones: the wordmark moves above the menu (centred)
instead of sitting on top of WHO AM I. */
@media (max-width:360px){
.reader-header .reader-wordmark{left:50%;top:auto;bottom:calc(100% + 7px);transform:translateX(-50%);width:68px;}
}
/* V205 — phone toolbar (reader-mobile.js): one bottom row + a tools drawer
that slides in from the left with labelled, grouped tools. */
body.rm #readerHelpTip { display:none !important; }
body.rm .reader-bottom {
display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important;
grid-template-columns:none !important; grid-template-rows:none !important;
height:calc(54px + env(safe-area-inset-bottom, 0px)) !important; min-height:0 !important;
padding:0 10px env(safe-area-inset-bottom, 0px) !important; gap:6px !important; overflow:visible !important;
}
body.rm .rm-left, body.rm .rm-right { display:flex; align-items:center; gap:6px; flex:1 1 0; min-width:0; }
body.rm .rm-right { justify-content:flex-end; }
body.rm .reader-bottom .reader-page-nav { display:flex !important; align-items:center !important; gap:4px !important; flex:0 0 auto !important; order:0 !important; grid-column:auto !important; grid-row:auto !important; margin:0 !important; }
body.rm .reader-bottom .reader-page-nav .nav-page { width:38px !important; min-width:38px !important; height:38px !important; font-size:18px !important; }
body.rm .reader-bottom .page-input-wrap { height:38px !important; }
body.rm .reader-bottom .rm-btn {
position:relative; width:40px !important; min-width:40px !important; height:38px !important; padding:0 !important;
display:inline-flex; align-items:center; justify-content:center; font-size:14px !important;
-webkit-tap-highlight-color:transparent;
}
body.rm .rm-burger { display:flex; flex-direction:column; gap:4px; width:16px; }
body.rm .rm-burger i { display:block; height:1.5px; background:currentColor; border-radius:1px; transition:transform .25s ease, opacity .2s ease; }
body.rm.rm-open .rm-burger i:nth-child(1) { transform:translateY(5.5px) rotate(45deg); }
body.rm.rm-open .rm-burger i:nth-child(2) { opacity:0; }
body.rm.rm-open .rm-burger i:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg); }
body.rm.rm-open .reader-bottom .rm-menu { border-color:rgba(184,91,52,.6) !important; color:#fff !important; }
body.rm .rm-listen svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; }
body.rm .rm-listen svg .f { fill:currentColor; stroke:none; }
body.rm .rm-listen.is-on { background:rgba(184,91,52,.22) !important; border-color:rgba(184,91,52,.6) !important; color:#fff !important; }
body.rm .rm-menu.has-dot::after, body.rm .rm-label.has-dot::after {
content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#b85b34;
}
body.rm .rm-menu.has-dot::after { position:absolute; top:5px; right:5px; }
body.rm .rm-label.has-dot::after { margin-left:6px; vertical-align:1px; }
/* the drawer */
body.rm #rmDrawer {
position:absolute !important; left:0 !important; right:auto !important; top:auto !important; bottom:100% !important;
width:min(340px, 90vw) !important; height:calc(100svh - 54px - env(safe-area-inset-bottom, 0px)) !important; max-height:none !important;
display:grid !important; grid-template-columns:40px minmax(0,1fr) 40px minmax(0,1fr) !important; grid-auto-rows:min-content !important;
align-content:start !important; align-items:center !important; justify-content:stretch !important; gap:8px 8px !important;
flex:none !important; order:0 !important; margin:0 !important;
padding:0 12px calc(18px + env(safe-area-inset-bottom, 0px)) !important; box-sizing:border-box !important;
overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain;
background:rgba(17,16,15,.975) !important; border-right:1px solid rgba(240,238,234,.12);
box-shadow:18px 0 50px rgba(0,0,0,.5);
transform:translateX(-104%); visibility:hidden; opacity:1;
transition:transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s, opacity .25s ease;
z-index:5;
}
body.rm.rm-open #rmDrawer { transform:none; visibility:visible; transition:transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s, opacity .25s ease; }
/* (peek handled per item, see V206) */
body.rm #rmDrawer .reader-bright-wrap, body.rm #rmDrawer .tts-wrap,
body.rm #rmDrawer .reader-guide-color-wrap, body.rm #rmDrawer .reader-lang-wrap { display:contents !important; }
body.rm #rmDrawer button[id] {
width:40px !important; min-width:40px !important; height:40px !important; padding:0 !important; margin:0 !important;
font-size:14px !important; justify-self:start; order:0 !important;
}
body.rm #rmDrawer button[id] svg { width:16px; height:16px; }
body.rm #rmDrawer button[hidden], body.rm #rmDrawer button[hidden] + .rm-label { display:none !important; }
body.rm #rmDrawer .rm-label {
font:11px/1.3 Arial, sans-serif; letter-spacing:.03em; color:#cfc9c0; cursor:pointer;
overflow-wrap:anywhere; user-select:none; -webkit-tap-highlight-color:transparent;
}
body.rm #rmDrawer .rm-head {
grid-column:1 / -1; position:sticky; top:0; z-index:3;
display:flex; align-items:center; justify-content:space-between;
padding:calc(14px + env(safe-area-inset-top, 0px)) 0 8px; margin:0 -12px; padding-left:12px; padding-right:8px;
background:rgba(17,16,15,.99); border-bottom:1px solid rgba(240,238,234,.08);
}
body.rm #rmDrawer .rm-title { font:400 17px/1.2 Lora, Georgia, serif; color:#f0eeea; letter-spacing:.02em; }
body.rm #rmDrawer .rm-close { width:36px !important; min-width:36px !important; height:36px !important; font-size:20px !important; padding:0 !important; }
body.rm #rmDrawer .rm-section {
grid-column:1 / -1; margin:10px 0 0; padding-top:10px; border-top:1px solid rgba(240,238,234,.08);
font:9px/1 Arial, sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#8e877d;
}
body.rm #rmDrawer .rm-head + .rm-section { border-top:0; margin-top:2px; }
body.rm #rmDrawer .bright-panel, body.rm #rmDrawer .tts-voice-panel,
body.rm #rmDrawer .guide-color-panel, body.rm #rmDrawer .reader-lang-panel {
position:static !important; grid-column:1 / -1 !important; width:auto !important; max-width:none !important; max-height:240px !important;
left:auto !important; right:auto !important; bottom:auto !important; top:auto !important; transform:none !important;
margin:0 !important; box-shadow:none !important; box-sizing:border-box !important;
}
body.rm #rmDrawer .bright-panel[hidden], body.rm #rmDrawer .tts-voice-panel[hidden],
body.rm #rmDrawer .guide-color-panel[hidden], body.rm #rmDrawer .reader-lang-panel[hidden] { display:none !important; }
body.rm #rmDrawer .auto-guide-speed {
grid-column:1 / -1 !important; display:flex !important; align-items:center; gap:12px; margin:0 !important; order:0 !important;
font:9px/1 Arial, sans-serif; letter-spacing:.18em; color:#8e877d; width:auto !important;
}
body.rm #rmDrawer .auto-guide-speed input { flex:1 1 auto; width:auto !important; min-width:0; }
body.rm #rmDrawer .reader-search {
grid-column:1 / -1 !important; display:flex !important; align-items:center; gap:6px; margin:4px 0 2px !important; order:0 !important; width:auto !important;
}
body.rm #rmDrawer .reader-search input { flex:1 1 auto; width:auto !important; min-width:0; height:36px !important; box-sizing:border-box; }
body.rm #rmDrawer .reader-search .search-nav { width:36px !important; min-width:36px !important; height:36px !important; }
@media (max-height:520px) and (orientation:landscape) {
body.rm #rmDrawer { width:min(620px, 84vw) !important; grid-template-columns:40px minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr) !important; }
}
body.rm.reader-ui-hidden #rmDrawer { visibility:hidden !important; }
body.rm .rm-left, body.rm .rm-right { flex:1 0 auto; }
@media (max-width:300px) {
body.rm .reader-bottom { padding-left:6px !important; padding-right:6px !important; gap:4px !important; }
body.rm .reader-bottom .rm-aa { display:none !important; }
body.rm .reader-bottom .rm-btn { width:36px !important; min-width:36px !important; }
body.rm .reader-bottom .reader-page-nav .nav-page { width:32px !important; min-width:32px !important; }
}
body.rm.rm-open .reader-bottom { z-index:10005 !important; }
body.rm #rmDrawer .rm-label { overflow-wrap:normal; word-break:normal; hyphens:auto; -webkit-hyphens:auto; }
body.rm #rmDrawer .auto-guide-speed span { display:inline !important; }
@media (max-width:340px) {
body.rm #rmDrawer { width:min(250px, 86vw) !important; grid-template-columns:40px minmax(0,1fr) !important; gap:6px 10px !important; }
}
body.rm.rm-open .reader-shell { z-index:10004 !important; }
/* V206 — selective peek + 12% smaller phone tools.
While a page setting changes, the drawer becomes see-through; only the
tool in use (and its pair) stays clearly visible. */
body.rm.rm-open.rm-peek #rmDrawer {
background:rgba(17,16,15,.10) !important; box-shadow:none !important; border-right-color:transparent !important;
transition:background .25s ease, box-shadow .25s ease;
}
body.rm #rmDrawer .rm-peek-item { transition:opacity .25s ease; }
body.rm.rm-peek #rmDrawer .rm-peek-item { opacity:.11; }
body.rm.rm-peek #rmDrawer .rm-peek-item.rm-lit { opacity:.7; }
body.rm.rm-peek #rmDrawer .rm-head { opacity:.11; transition:opacity .25s ease; }
body.rm.rm-peek #rmDrawer button.rm-lit { background:rgba(17,16,15,.85) !important; }
body.rm.rm-peek #rmDrawer .rm-label.rm-lit { text-shadow:0 0 6px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9); color:#f0eeea; }
/* sizes (−12%) */
body.rm .reader-bottom { height:calc(48px + env(safe-area-inset-bottom, 0px)) !important; }
body.rm .reader-bottom .rm-btn { width:35px !important; min-width:35px !important; height:34px !important; font-size:12.5px !important; }
body.rm .reader-bottom .reader-page-nav .nav-page { width:34px !important; min-width:34px !important; height:34px !important; font-size:16px !important; }
body.rm .reader-bottom .page-input-wrap { height:34px !important; }
body.rm .rm-burger { width:14px; gap:3.5px; }
body.rm.rm-open .rm-burger i:nth-child(1) { transform:translateY(5px) rotate(45deg); }
body.rm.rm-open .rm-burger i:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }
body.rm .rm-listen svg { width:14px; height:14px; }
body.rm #rmDrawer {
height:calc(100svh - 48px - env(safe-area-inset-bottom, 0px)) !important;
grid-template-columns:35px minmax(0,1fr) 35px minmax(0,1fr) !important; gap:7px 7px !important;
width:min(310px, 90vw) !important; padding-left:11px !important; padding-right:11px !important;
}
body.rm #rmDrawer button[id] { width:35px !important; min-width:35px !important; height:35px !important; font-size:12.5px !important; }
body.rm #rmDrawer button[id] svg { width:14px; height:14px; }
body.rm #rmDrawer .rm-label { font-size:10px; }
body.rm #rmDrawer .rm-title { font-size:15px; }
body.rm #rmDrawer .rm-close { width:32px !important; min-width:32px !important; height:32px !important; font-size:18px !important; }
body.rm #rmDrawer .rm-head { padding-top:calc(12px + env(safe-area-inset-top, 0px)); padding-bottom:7px; margin-left:-11px; margin-right:-11px; padding-left:11px; }
body.rm #rmDrawer .rm-section { margin-top:8px; padding-top:9px; font-size:8.5px; }
body.rm #rmDrawer .reader-search input { height:32px !important; }
body.rm #rmDrawer .reader-search .search-nav { width:32px !important; min-width:32px !important; height:32px !important; }
@media (max-height:520px) and (orientation:landscape) {
body.rm #rmDrawer { width:min(560px, 84vw) !important; grid-template-columns:35px minmax(0,1fr) 35px minmax(0,1fr) 35px minmax(0,1fr) !important; }
}
@media (max-width:340px) {
body.rm #rmDrawer { width:min(230px, 86vw) !important; grid-template-columns:35px minmax(0,1fr) !important; gap:6px 9px !important; }
}
/* the Aa button comes back on narrow phones; only the very narrowest hide it */
@media (max-width:300px) {
body.rm .reader-bottom .rm-aa { display:inline-flex !important; }
body.rm .reader-bottom .rm-btn { width:33px !important; min-width:33px !important; }
body.rm .reader-bottom .reader-page-nav .nav-page { width:30px !important; min-width:30px !important; }
}
@media (max-width:279px) {
body.rm .reader-bottom .rm-aa { display:none !important; }
}
/* bottom row as a 3-column grid: tools on the left, pages centred, listen on the right */
body.rm .reader-bottom { display:grid !important; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important; grid-template-rows:1fr !important; align-items:center !important; justify-content:stretch !important; column-gap:6px !important; }
body.rm .reader-bottom .rm-left { grid-column:1 !important; grid-row:1 !important; justify-self:start; }
body.rm .reader-bottom .reader-page-nav { grid-column:2 !important; grid-row:1 !important; justify-self:center; }
body.rm .reader-bottom .rm-right { grid-column:3 !important; grid-row:1 !important; justify-self:end; }
body.rm.rm-peek #rmDrawer .rm-label.rm-lit { background:rgba(17,16,15,.82); color:#f0eeea; padding:5px 8px; border-radius:4px; justify-self:start; text-shadow:none; }
/* V209 — guide key (4 steps), quick text panel (Aa), header title fit. */
body.rm .rm-guide .rm-guide-icon { font-size:14px; line-height:1; }
body.rm .rm-guide .rm-badge {
position:absolute; right:-4px; top:-5px; min-width:15px; height:15px; padding:0 3px; box-sizing:border-box;
display:none; align-items:center; justify-content:center;
border-radius:8px; background:#b85b34; color:#fff; font:700 7.5px/1 Arial, sans-serif; letter-spacing:0;
box-shadow:0 0 0 2px rgba(20,19,18,.96);
}
body.rm .rm-guide.is-on .rm-badge { display:inline-flex; }
body.rm .rm-guide[data-next="off"] .rm-badge { background:#5d5852; }
body.rm .reader-bottom .rm-guide.is-on { background:rgba(184,91,52,.16) !important; border-color:rgba(184,91,52,.5) !important; color:#fff !important; }
body.rm .reader-bottom .rm-guide.is-auto { background:rgba(184,91,52,.28) !important; }
body.rm .rm-guide.is-auto .rm-guide-icon { animation:rmGuideDrift 1.6s ease-in-out infinite; }
@keyframes rmGuideDrift { 0%,100% { transform:translateY(-1.5px); } 50% { transform:translateY(1.5px); } }
body.rm .rm-text-pop {
position:fixed; left:8px; bottom:calc(48px + env(safe-area-inset-bottom, 0px) + 8px); z-index:10003;
display:none; flex-direction:column; gap:8px;
width:min(250px, calc(100vw - 16px)); box-sizing:border-box; padding:12px;
background:rgba(17,16,15,.96); border:1px solid rgba(240,238,234,.14); border-radius:10px;
box-shadow:0 14px 40px rgba(0,0,0,.5);
}
body.rm.rm-text-open .rm-text-pop { display:flex; }
body.rm .rm-tp-row { display:grid; grid-template-columns:minmax(0,1fr) 44px 44px; gap:6px; align-items:center; }
body.rm .rm-tp-pair { grid-template-columns:1fr 1fr; }
body.rm .rm-tp-label { font:10px/1.2 Arial, sans-serif; letter-spacing:.04em; color:#a9a297; }
body.rm .rm-text-pop button {
height:34px !important; width:auto !important; min-width:0 !important; padding:0 8px !important;
display:inline-flex; align-items:center; justify-content:center; gap:7px;
font:13px/1 Arial, sans-serif !important; border-radius:6px;
}
body.rm .rm-text-pop .rm-tp-wide span { font-size:10.5px; letter-spacing:.03em; }
body.rm .rm-text-pop .rm-tp-wide b { font-weight:400; font-size:13px; }
body.rm.rm-text-open .reader-bottom .rm-aa { border-color:rgba(184,91,52,.6) !important; color:#fff !important; }
/* header title: room for the EN box on the right (and symmetric on the left) */
body.rm .reader-head-title { max-width:calc(100vw - 2 * 64px) !important; }
/* bottom row with the guide key: tighter on narrow phones */
@media (max-width:340px) {
body.rm .reader-bottom { column-gap:4px !important; padding-left:6px !important; padding-right:6px !important; }
body.rm .rm-left, body.rm .rm-right { gap:4px !important; }
body.rm .reader-bottom .rm-btn { width:32px !important; min-width:32px !important; }
body.rm .reader-bottom .reader-page-nav .nav-page { width:29px !important; min-width:29px !important; }
}
@media (max-width:279px) {
body.rm .reader-bottom { column-gap:3px !important; padding-left:5px !important; padding-right:5px !important; }
body.rm .rm-left, body.rm .rm-right { gap:3px !important; }
body.rm .reader-bottom .rm-btn { width:30px !important; min-width:30px !important; }
body.rm .reader-bottom .reader-page-nav { gap:2px !important; }
body.rm .reader-bottom .reader-page-nav .nav-page { width:26px !important; min-width:26px !important; font-size:15px !important; }
body.rm .reader-bottom .page-input-wrap { padding:0 4px !important; min-width:0 !important; }
body.rm .reader-bottom .page-input-wrap input { width:20px !important; }
}
body.rm .reader-bottom { grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr) !important; }
body.rm .rm-text-pop button {
appearance:none; border:1px solid rgba(240,238,234,.13) !important; background:rgba(255,255,255,.025) !important;
color:#cfc9c0 !important; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
body.rm .rm-text-pop button:active { background:rgba(184,91,52,.22) !important; border-color:rgba(184,91,52,.6) !important; color:#fff !important; }
/* V210 — auto-hide key, handle and first-time hint. */
body.rm .rm-hide span { font-size:11px; letter-spacing:-1px; }
body.rm .reader-bottom .rm-hide.is-on { background:rgba(184,91,52,.16) !important; border-color:rgba(184,91,52,.5) !important; color:#fff !important; }
@media (max-width:319px) { body.rm .reader-bottom .rm-hide { display:none !important; } }
body.rm .rm-hide-handle {
position:fixed; left:50%; bottom:calc(7px + env(safe-area-inset-bottom, 0px)); z-index:120;
width:38px; height:4px; margin-left:-19px; border-radius:2px;
background:rgba(240,238,234,.32); box-shadow:0 0 0 1px rgba(0,0,0,.25);
opacity:0; transition:opacity .35s ease .25s; pointer-events:none;
}
body.rm.reader-ui-hidden .rm-hide-handle { opacity:1; }
body.rm .rm-toast {
position:fixed; left:50%; bottom:calc(64px + env(safe-area-inset-bottom, 0px)); z-index:10010;
transform:translate(-50%, 8px); max-width:calc(100vw - 40px); box-sizing:border-box;
padding:10px 16px; border-radius:20px; background:rgba(17,16,15,.94); border:1px solid rgba(240,238,234,.16);
color:#e6e0d6; font:12px/1.35 Arial, sans-serif; letter-spacing:.02em; text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.45); opacity:0; pointer-events:none;
transition:opacity .3s ease, transform .3s ease;
}
body.rm .rm-toast.is-on { opacity:1; transform:translate(-50%, 0); }
/* V211 — hold-for-speed slider above the guide key. */
body.rm .rm-guide { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation; }
body.rm .rm-speed-pop {
position:fixed; z-index:10012; box-sizing:border-box;
display:none; align-items:center; gap:10px; padding:11px 12px;
background:rgba(17,16,15,.96); border:1px solid rgba(240,238,234,.16); border-radius:10px;
box-shadow:0 12px 34px rgba(0,0,0,.5); color:#cfc9c0; font:10px/1 Arial, sans-serif; letter-spacing:.06em;
}
body.rm .rm-speed-pop.is-on { display:flex; }
body.rm .rm-speed-pop::after {
content:""; position:absolute; top:100%; left:var(--arrow-x, 50%); margin-left:-6px;
border:6px solid transparent; border-top-color:rgba(17,16,15,.96);
}
body.rm .rm-sp-label { text-transform:uppercase; color:#a9a297; }
body.rm .rm-sp-range { flex:1 1 auto; min-width:0; accent-color:#b85b34; height:28px; }
body.rm .rm-sp-val { min-width:16px; text-align:right; color:#f0eeea; font-size:12px; }
/* V212 — page arrows and number in one frame; full-screen key; no Fit page on phones. */
body.rm .reader-bottom .reader-page-nav {
gap:0 !important; height:34px; box-sizing:border-box;
border:1px solid rgba(240,238,234,.13); border-radius:3px; background:rgba(255,255,255,.025);
}
body.rm .reader-bottom .reader-page-nav .nav-page {
border:0 !important; background:transparent !important; height:32px !important;
width:30px !important; min-width:30px !important; font-size:15px !important;
}
body.rm .reader-bottom .page-input-wrap {
border:0 !important; background:transparent !important; height:32px !important;
min-width:0 !important; padding:0 2px !important; font-size:9px !important;
}
body.rm .reader-bottom .page-input-wrap .page-input { width:20px !important; height:30px !important; font-size:10px !important; }
body.rm .reader-bottom .page-total { padding:0 2px 0 1px !important; font-size:9.5px; }
body.rm .rm-fs svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:square; }
body.rm .reader-bottom .rm-fs.is-on { background:rgba(184,91,52,.16) !important; border-color:rgba(184,91,52,.5) !important; color:#fff !important; }
body.rm .reader-bottom .rm-btn[hidden] { display:none !important; }
body.rm #rmDrawer #pageFitToggle, body.rm #rmDrawer #pageFitToggle + .rm-label { display:none !important; }
@media (max-width:374px) {
body.rm .reader-bottom { padding-left:6px !important; padding-right:6px !important; column-gap:4px !important; }
body.rm .rm-left, body.rm .rm-right { gap:4px !important; }
}
@media (max-width:359px) {
body.rm .reader-bottom .rm-btn { width:32px !important; min-width:32px !important; }
body.rm .reader-bottom .reader-page-nav .nav-page { width:26px !important; min-width:26px !important; }
}
@media (max-width:299px) {
body.rm .reader-bottom { padding-left:4px !important; padding-right:4px !important; column-gap:3px !important; }
body.rm .rm-left, body.rm .rm-right { gap:3px !important; }
body.rm .reader-bottom .rm-btn { width:29px !important; min-width:29px !important; }
body.rm .reader-bottom .reader-page-nav .nav-page { width:23px !important; min-width:23px !important; }
body.rm .reader-bottom .page-input-wrap .page-input { width:17px !important; }
}
@media (max-width:334px) { body.rm .reader-bottom .rm-hide { display:none !important; } }