/* Our own e-books' reader (/read/<slug>) — the Mirava storefront's reader_shell.html, ported 05.11.2026. */
:root{--bg:#faf6ee;--fg:#2b2620;--muted:#8a8177;--accent:#0e7a4d;--chrome:#ffffffee;--border:#e7e0d4;
--fs:19px;--lh:1.65;--ff:Georgia,'Times New Roman',serif;--maxw:660px;--just:justify}
[data-theme=sepia]{--bg:#f4ecd8;--fg:#433422;--muted:#95866f;--chrome:#f9f3e3ee;--border:#e2d5b8}
[data-theme=dark]{--bg:#1f2023;--fg:#d7d3cc;--muted:#8b8880;--accent:#4cc38a;--chrome:#26272bee;--border:#3a3b40}
[data-theme=black]{--bg:#000;--fg:#c8c4bd;--muted:#77736c;--accent:#4cc38a;--chrome:#111111ee;--border:#26262a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--ff)}
#bar,#foot{position:fixed;left:0;right:0;z-index:30;background:var(--chrome);backdrop-filter:blur(8px);
border-bottom:1px solid var(--border);transition:transform .25s,opacity .25s;display:flex;align-items:center;gap:10px;padding:10px 16px}
#bar{top:0}#foot{bottom:0;top:auto;border-bottom:0;border-top:1px solid var(--border);justify-content:space-between}
body.zen #bar{transform:translateY(-110%)}body.zen #foot{transform:translateY(110%)}
#bar b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-weight:600}
.ic{background:none;border:0;color:var(--fg);font-size:19px;cursor:pointer;padding:6px;border-radius:8px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.ic svg{width:23px;height:23px;stroke:currentColor;fill:none}
.ic:hover{background:#00000012}
.backbook{display:inline-flex;align-items:center;gap:7px;color:var(--fg);text-decoration:none;font-family:-apple-system,'Segoe UI',sans-serif;
font-size:13.5px;font-weight:600;white-space:nowrap;padding:7px 10px;border-radius:9px;transition:background .18s,color .18s}
.backbook:hover{background:#00000012;color:var(--accent)}
.backbook svg{width:17px;height:17px;flex:none;stroke:currentColor}
.backbook .short{display:none}
#stage{position:fixed;inset:0;padding:64px 5vw 58px}
#clip{width:100%;height:100%;overflow:hidden;position:relative}
#content{height:100%;column-gap:56px;column-fill:auto;transition:transform .28s ease;font-size:var(--fs);line-height:var(--lh)}
#content p{margin:0 0 .9em;text-align:var(--just);text-indent:1.4em}
#content p:first-of-type{text-indent:0}
#content h2{font-size:1.5em;margin:0 0 1em;text-align:center;font-weight:600;column-span:none}
#content .chnum{display:block;text-align:center;color:var(--accent);font-size:.8em;letter-spacing:.25em;margin:1.2em 0 .4em;text-transform:uppercase}
figure{margin:1.2em 0;break-inside:avoid;text-align:center}
figure img{max-width:92%;max-height:62vh;border-radius:10px;box-shadow:0 6px 24px #00000022}
figcaption{font-size:.78em;color:var(--muted);margin-top:.5em;font-style:italic}
body.scrollmode #stage{overflow-y:auto;padding-bottom:90px}
body.scrollmode #clip{overflow:visible;height:auto}
body.scrollmode #content{column-width:auto!important;height:auto;max-width:var(--maxw);margin:0 auto;transform:none!important}
#prog{flex:1;height:4px;background:#00000015;border-radius:4px;margin:0 12px;cursor:pointer}
#progfill{height:100%;background:var(--accent);border-radius:4px;width:0%}
#foot span{font-size:12.5px;color:var(--muted);white-space:nowrap}
.tapzone{position:fixed;top:64px;bottom:58px;width:26%;z-index:20;cursor:pointer}
body.scrollmode .tapzone{pointer-events:none}
#tapL{left:0}#tapR{right:0}#tapC{left:26%;right:26%;width:auto;cursor:default}
.drawer{position:fixed;top:0;bottom:0;width:min(340px,86vw);background:var(--chrome);backdrop-filter:blur(14px);z-index:40;
transition:transform .28s;padding:20px;overflow-y:auto;border-right:1px solid var(--border)}
#toc{left:0;transform:translateX(-105%)}#toc.open{transform:none}
#settings{right:0;border-right:0;border-left:1px solid var(--border);transform:translateX(105%)}#settings.open{transform:none}
.drawer h3{margin:4px 0 14px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tocitem{display:flex;gap:10px;padding:11px 8px;border-radius:9px;cursor:pointer;font-size:14.5px;align-items:baseline}
.tocitem:hover{background:#00000010}.tocitem.cur{color:var(--accent);font-weight:700}
.tocitem .n{color:var(--muted);font-size:12px;min-width:22px}
.tocitem.locked{opacity:.5}
.setrow{margin:0 0 18px}.setrow label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:8px;letter-spacing:.04em}
.seg{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.seg button{flex:1;border:0;background:none;color:var(--fg);padding:9px 4px;cursor:pointer;font-size:13.5px}
.seg button.on{background:var(--accent);color:#fff}
.themes{display:flex;gap:10px}
.sw{width:40px;height:40px;border-radius:50%;cursor:pointer;border:2px solid var(--border)}
.sw.on{border-color:var(--accent);box-shadow:0 0 0 3px #0e7a4d33}
input[type=range]{width:100%;accent-color:var(--accent)}
#paywall{text-align:center;padding:8vh 6% 0;break-before:column}
#paywall img{width:150px;border-radius:8px;box-shadow:0 10px 34px #00000033;margin-bottom:22px}
#paywall h3{font-size:1.35em;margin:0 0 10px}
#paywall p{text-indent:0!important;text-align:center!important;color:var(--muted);font-size:.92em}
.buy{display:inline-block;background:var(--accent);color:#fff;padding:14px 30px;border-radius:12px;text-decoration:none;
font-weight:700;font-size:16px;margin:14px 6px 6px}
.buy.alt{background:none;color:var(--accent);border:2px solid var(--accent)}
#resume{position:fixed;left:50%;transform:translateX(-50%);bottom:74px;background:var(--accent);color:#fff;padding:10px 20px;
border-radius:24px;font-size:13.5px;z-index:35;cursor:pointer;box-shadow:0 6px 20px #0006;display:none}
#ovl{position:fixed;inset:0;z-index:39;display:none}
.arr{position:fixed;top:50%;transform:translateY(-50%);z-index:25;width:46px;height:46px;border-radius:50%;
background:var(--chrome);border:1px solid var(--border);box-shadow:0 2px 10px #00000022;display:flex;align-items:center;
justify-content:center;font-size:26px;color:var(--fg);cursor:pointer;user-select:none;opacity:.75;transition:opacity .2s}
.arr:hover{opacity:1}.arr.off{opacity:.18;pointer-events:none}
#arrL{left:10px}#arrR{right:10px}
.chnav{display:flex;gap:12px;justify-content:center;margin:2.5em 0 1em;break-inside:avoid}
.chnav a{flex:0 1 auto;padding:12px 18px;border:1.5px solid var(--border);border-radius:12px;color:var(--fg);
text-decoration:none;font-size:14px;cursor:pointer;text-indent:0}
.chnav a:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:700px){
  #btitle{display:none}
  .backbook .full{display:none}.backbook .short{display:inline}
  .backbook{margin-right:auto;padding:7px 6px}
}
@media(max-width:600px){.arr{width:38px;height:38px;font-size:22px;opacity:.55}}
#coach{position:fixed;inset:0;z-index:60;background:#000c;color:#fff;display:none;font-family:-apple-system,'Segoe UI',sans-serif}
#coach .zones{position:absolute;inset:0;display:flex}
#coach .z{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:15px;text-align:center;padding:20px}
#coach .z+.z{border-left:1px dashed #ffffff44}
#coach .z b{font-size:34px}
#coach .hint{position:absolute;bottom:86px;left:0;right:0;text-align:center;font-size:13.5px;color:#ffffffcc}
#coach .okbtn{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;
border:0;border-radius:24px;padding:12px 34px;font-size:15px;cursor:pointer}
#prog{position:relative}
#progfill::after{content:"";position:absolute;top:50%;transform:translate(50%,-50%);right:calc(100% - var(--pw,0%));
width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 1px 6px #0005}
#progfill{position:relative}