/* Gild Reader — a quiet library shelf that hands off to a full-bleed reading stage; controls appear only on tap. */
:root{
  --bg:#F3F4F1; --surface:#FFFFFF; --ink:#1B1F1D; --muted:#5E6762; --line:#DADFDA; --accent:#35557A; --danger:#A3392F;
  --ui:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display:'Newsreader', Georgia, 'Times New Roman', serif;
  --shadow:0 1px 2px rgba(20,30,25,.06), 0 8px 24px rgba(20,30,25,.08);
  /* reader theme (set by script) */
  --r-bg:#FFFFFF; --r-fg:#1E1E1C; --r-muted:#7A7A75; --r-chrome:rgba(255,255,255,.94); --r-line:rgba(0,0,0,.09); --r-hit:rgba(255,196,0,.42); --r-hit-cur:rgba(255,140,0,.6);
  --r-font:'Literata', Georgia, serif; --r-size:19px; --r-lh:1.6; --r-pad:28px; --r-align:justify; --r-hyph:auto; --r-para:0em;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111413; --surface:#1A1E1C; --ink:#E5E8E5; --muted:#9AA39E; --line:#2A302D; --accent:#94B6DD; --danger:#E08A80;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#111413; --surface:#1A1E1C; --ink:#E5E8E5; --muted:#9AA39E; --line:#2A302D; --accent:#94B6DD; --danger:#E08A80;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); color-scheme:dark }

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--ui); font-size:14px; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent}
button,input,select{font:inherit; color:inherit}
button{background:none; border:0; cursor:pointer; padding:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:8px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
img{max-width:100%}

/* ================= Library ================= */
#library{min-height:100%; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-top:calc(14px + env(safe-area-inset-top,0px)); padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
/* keeps scrolled shelf content from running under the phone's status bar */
#library::before{content:""; position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top,0px); background:var(--bg); z-index:3; pointer-events:none}
.lib-wrap{max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:20px}
.lib-head{display:flex; align-items:center; gap:10px; min-height:48px}
.brand{font-family:var(--display); font-size:1.85rem; font-weight:400; letter-spacing:-.01em; line-height:1; flex:1; min-width:0}
.brand em{font-style:italic; color:var(--accent)}
.round{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; color:var(--ink); flex:none}
.round svg{width:20px; height:20px}
.open-btn{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:999px; font-weight:600; font-size:.92rem; cursor:pointer; flex:none; white-space:nowrap}
.open-btn svg{width:18px; height:18px}
.open-btn.quiet{background:var(--surface); color:var(--ink); border:1px solid var(--line); padding:9px 14px}
.eyebrow{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
section.blk{display:flex; flex-direction:column; gap:10px}

.continue{display:grid; grid-template-columns:minmax(0,96px) minmax(0,1fr); gap:18px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow); text-align:left; width:100%}
.continue h2{font-family:var(--display); font-weight:400; font-size:1.45rem; line-height:1.15; text-wrap:balance; margin:0}
.continue .meta{color:var(--muted); font-size:.86rem; margin-top:4px}
.continue .chap{font-size:.86rem; margin-top:8px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar{height:4px; background:var(--line); border-radius:4px; margin-top:10px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); border-radius:4px}
.resume{margin-top:10px; font-weight:600; color:var(--accent); font-size:.9rem; display:flex; justify-content:space-between; gap:8px}
.resume span:last-child{color:var(--muted); font-weight:500; font-variant-numeric:tabular-nums}

.cover{aspect-ratio:2/3; width:100%; max-width:100%; min-width:0; min-height:0; border-radius:4px 8px 8px 4px; overflow:hidden; position:relative; box-shadow:inset 3px 0 0 rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.16); background:#2C3E50; color:#F4EFE6; display:flex; flex-direction:column; justify-content:space-between; padding:10px 9px}
.cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cover .ct{overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; font-family:var(--display); font-size:calc(.98rem * var(--ts, 1)); line-height:1.1; text-wrap:balance; position:relative; min-height:0; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--tl, 5)}
.continue .cover .ct{font-size:calc(.86rem * var(--ts, 1))}
.sample-open .cover .ca{display:none}
.sample-open .cover .ct{font-size:calc(.56rem * var(--ts, 1)); line-height:1.15}
.sample-open .cover{padding:6px 5px}
.cover .ca{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; opacity:.8; position:relative; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cover.pdf{background:#5B3A3A} .cover.epub{background:#2F4A3E} .cover.sample{background:#33465C}

.toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.search{flex:1 1 220px; min-width:0; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:0 12px; height:40px}
.search svg{width:17px; height:17px; color:var(--muted); flex:none}
.search input{flex:1; min-width:0; border:0; background:none; outline:none; height:100%; font-size:.92rem}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 12px; font-size:.82rem; color:var(--muted); white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.selectwrap{position:relative; display:flex; align-items:center}
.selectwrap select{appearance:none; -webkit-appearance:none; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 28px 6px 12px; font-size:.82rem; color:var(--muted); height:32px}
.selectwrap::after{content:""; position:absolute; right:12px; width:6px; height:6px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg) translateY(-2px); pointer-events:none}
.viewtog{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface)}
.viewtog button{width:36px; height:30px; display:grid; place-items:center; color:var(--muted)}
.viewtog button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.viewtog svg{width:16px; height:16px}
.toolrow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:space-between; width:100%}

.shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:20px 14px}
.book{display:flex; flex-direction:column; gap:7px; text-align:left; position:relative; cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; min-width:0}
.book .bt{font-size:.84rem; font-weight:500; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word}
.book .bf{font-size:.72rem; color:var(--muted); letter-spacing:.02em; font-variant-numeric:tabular-nums}
.book .bf b{color:var(--accent); font-weight:600}
.shelf.list{grid-template-columns:1fr; gap:0}
.shelf.list .book{display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--line)}
.shelf.list .book .cover{padding:0; border-radius:2px 4px 4px 2px; box-shadow:0 2px 6px rgba(0,0,0,.15)}
.shelf.list .book .cover .ct,.shelf.list .book .cover .ca{display:none}
.shelf.list .book .bt{-webkit-line-clamp:1; font-size:.92rem}
.book .lmeta{display:none}
.shelf.list .book .lmeta{display:block; font-size:.78rem; color:var(--muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shelf.list .book .txt{min-width:0}
.book .more{display:none}
.shelf.list .book .more{display:grid; width:36px; height:36px; place-items:center; color:var(--muted); border-radius:50%}
.more svg{width:18px; height:18px}
.minibar{height:3px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:6px; max-width:180px}
.minibar i{display:block; height:100%; background:var(--accent)}
.shelf:not(.list) .minibar{display:none}
.empty{border:1.5px dashed var(--line); border-radius:14px; padding:20px; color:var(--muted); font-size:.92rem; line-height:1.5}
.empty b{color:var(--ink); font-weight:600}
.hintline{font-size:.78rem; color:var(--muted)}
.onboard{border:1px solid var(--line); background:var(--surface); border-radius:18px; padding:26px 20px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; box-shadow:var(--shadow)}
.onboard .ob-ico{width:44px; height:44px; color:var(--accent)}
.onboard h2{font-family:var(--display); font-weight:400; font-size:1.55rem; margin:2px 0 0; letter-spacing:-.01em}
.onboard p{margin:0; color:var(--muted); font-size:.92rem; line-height:1.55; max-width:34em}
.onboard p b{color:var(--ink); font-weight:600}
.onboard .ob-btn{margin:6px 0 2px; padding:12px 22px; font-size:.98rem}
.onboard .ob-small{font-size:.82rem}
.sample-row{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.sample-card{display:flex; align-items:center; gap:10px; border:1.5px dashed var(--line); border-radius:14px; padding:12px}
.sample-open{display:grid; grid-template-columns:52px minmax(0,1fr); gap:14px; align-items:center; text-align:left; flex:1; min-width:0}
.sample-open .cover{box-shadow:0 2px 8px rgba(0,0,0,.15)}
.sample-txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.sample-txt b{font-family:var(--display); font-weight:500; font-size:1.08rem}
.sample-txt span:last-child{color:var(--muted); font-size:.82rem; line-height:1.4}
.badge{align-self:flex-start; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--accent); border:1px solid currentColor; border-radius:999px; padding:1px 7px}
.sample-card{flex-direction:column; align-items:stretch}
.sample-card .linkbtn{align-self:flex-end; color:var(--muted); font-weight:500; padding:2px 0 0}

/* ================= Reader ================= */
#reader{position:fixed; inset:0; z-index:5; background:var(--r-bg); color:var(--r-fg); display:grid; grid-template-rows:auto 1fr auto; transition:background .25s,color .25s; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); overscroll-behavior:none}
.run{display:flex; justify-content:center; align-items:center; min-height:38px; font-family:var(--ui); font-size:.74rem; color:var(--r-muted); letter-spacing:.04em; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); white-space:nowrap; overflow:hidden; font-variant-numeric:tabular-nums}
.run span{overflow:hidden; text-overflow:ellipsis}
#reader.no-top #topLine,#reader.no-bot #botLine{min-height:12px}
#reader.no-top #topLine span,#reader.no-bot #botLine span{display:none}
#stage{position:relative; overflow:hidden; min-height:0; touch-action:pan-y pinch-zoom}
#reader.pdfmode #stage{touch-action:auto; grid-row:1/-1}
/* PDFs use the whole screen; page info floats over the page instead of reserving bands */
#reader.pdfmode{padding-top:0; padding-bottom:0}
#reader.pdfmode .run{position:absolute; left:0; right:0; z-index:3; min-height:0; pointer-events:none}
#reader.pdfmode #topLine{top:calc(6px + env(safe-area-inset-top,0px))}
#reader.pdfmode #botLine{bottom:calc(8px + env(safe-area-inset-bottom,0px))}
#reader.pdfmode .run span{background:color-mix(in srgb,var(--r-bg) 94%,transparent); padding:4px 12px; border-radius:999px; box-shadow:0 1px 8px rgba(0,0,0,.18); color:var(--r-fg)}

#flowView{position:absolute; inset:0; overflow:hidden; display:flex; justify-content:center}
.clip{position:relative; height:100%; overflow:hidden}
.flow{height:100%; column-fill:auto; font-family:var(--r-font); font-size:var(--r-size); line-height:var(--r-lh); hyphens:var(--r-hyph); -webkit-hyphens:var(--r-hyph); hyphenate-limit-chars:6 3 3; text-align:var(--r-align); text-justify:inter-word; text-rendering:optimizeLegibility; overflow-wrap:break-word; orphans:2; widows:2; --colH:400px; font-kerning:normal; font-variant-ligatures:common-ligatures}
#flow{transition:transform .32s cubic-bezier(.3,.7,.2,1)}
#flow.instant{transition:none}
.flow p{margin:0 0 var(--r-para); text-indent:1.4em; text-wrap:pretty}
.flow :is(h1,h2,h3,h4,h5,h6,hr,blockquote,figure,img,table,ul,ol,pre,.gap,div:empty)+p, .flow > p:first-child, .flow :is(section,div,article,header) > p:first-child{text-indent:0}
.flow :is(li,blockquote,td,th,figcaption,dd,dt) p{text-indent:0}
.flow :is(h1,h2,h3,h4,h5,h6){font-weight:600; text-align:center; text-wrap:balance; line-height:1.25; margin:1.4em 0 .9em; break-after:avoid; text-indent:0; hyphens:manual; -webkit-hyphens:manual}
.flow h1{font-size:1.45em} .flow h2{font-size:1.28em} .flow h3{font-size:1.12em} .flow :is(h4,h5,h6){font-size:1em}
.flow > :first-child{margin-top:0}
.flow :is(img,svg){display:block; max-width:100%; max-height:var(--colH); width:auto; height:auto; margin:.8em auto; break-inside:avoid; object-fit:contain}
.flow img.inl{display:inline; max-height:1.3em; margin:0; vertical-align:-.2em}
.flow svg{width:100%}
.flow figure{margin:1em 0; break-inside:avoid}
.flow figcaption{font-size:.85em; color:var(--r-muted); text-align:center; text-indent:0}
.flow blockquote{margin:.9em 0 .9em 1.2em}
.flow :is(ul,ol){padding-left:1.4em; margin:.6em 0}
.flow li{margin:.15em 0}
.flow dl{margin:.6em 0} .flow dd{margin-left:1.4em}
.flow hr{border:0; margin:1.2em 0; text-align:center; height:auto; overflow:visible}
.flow hr::after{content:"⁂"; color:var(--r-muted)}
.flow table{display:block; overflow-x:auto; max-width:100%; border-collapse:collapse; font-size:.86em; text-align:left; margin:1em 0; hyphens:manual}
.flow :is(td,th){padding:.3em .5em; border-bottom:1px solid var(--r-line); vertical-align:top; text-align:left}
.flow th{font-weight:600}
.flow pre{white-space:pre-wrap; font-size:.85em; text-align:left; hyphens:manual}
.flow code{font-size:.9em}
.flow :is(sup,sub){line-height:0; font-size:.72em}
.flow small{font-size:.86em}
.flow .gap{height:.9em; margin:0}
.flow .vl{text-align:left; text-indent:-1.5em; padding-left:1.5em; hyphens:manual; -webkit-hyphens:manual; margin-top:0; margin-bottom:0}
.flow .lnum{float:right; font-size:.76em; color:var(--r-muted); margin-left:.8em; text-indent:0; line-height:inherit}
.flow :is(p,div)[style*="text-align:center"], .flow :is(p,div)[style*="text-align:right"]{text-indent:0}
.flow .fn{display:none}
.flow a{color:inherit; text-decoration:underline; text-decoration-color:var(--r-muted); text-decoration-thickness:1px; text-underline-offset:2px}
.flow .xref{cursor:pointer}
.flow .xref[data-note]{text-decoration:none; color:var(--accent-r, inherit); padding:0 .12em; font-feature-settings:"lnum"}
.flow math{font-size:1.05em}
::highlight(q-hit){background-color:var(--r-hit)}
::highlight(q-hit-cur){background-color:var(--r-hit-cur)}
/* reader highlights: quiet tints that read on every theme */
:root{--hl-y:rgba(250,205,70,.38); --hl-b:rgba(110,165,235,.30); --hl-p:rgba(235,120,160,.28)}
#reader[data-rt="night"],#reader[data-rt="black"]{--hl-y:rgba(250,205,70,.26); --hl-b:rgba(110,165,235,.28); --hl-p:rgba(235,120,160,.26)}
::highlight(hl-y){background-color:var(--hl-y)}
::highlight(hl-b){background-color:var(--hl-b)}
::highlight(hl-p){background-color:var(--hl-p)}
::highlight(hl-n){text-decoration:underline dotted; text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-color:var(--r-muted)}
.dot{display:inline-block; width:18px; height:18px; border-radius:50%; flex:none}
.dot.c-y{background:#F2C94C} .dot.c-b{background:#7FA9E0} .dot.c-p{background:#E58FAE}
.selbar{position:absolute; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:13; display:flex; align-items:center; gap:2px; padding:4px 6px; border-radius:999px; background:var(--r-chrome); color:var(--r-fg); border:1px solid var(--r-line); box-shadow:0 6px 24px rgba(0,0,0,.18); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-family:var(--ui); font-size:.88rem; max-width:calc(100% - 20px)}
.selbar button{padding:9px 10px; border-radius:999px; white-space:nowrap}
.selbar .dotb{padding:8px 7px; display:grid; place-items:center}
.selbar .x{opacity:.65}
.selbar .sep{width:1px; align-self:stretch; margin:6px 2px; background:var(--r-line)}
.mexport{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; padding:16px 2px 4px; font-size:.78rem; color:var(--r-muted)}
.mexport span{flex-basis:100%; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600}
.sheet:not(.app) .linkbtn{color:var(--r-fg); text-decoration:underline; text-decoration-color:var(--r-line); text-underline-offset:3px; text-decoration-thickness:1.5px}
.mhead{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--r-muted); font-weight:600; padding:14px 2px 4px}
.hlres .where{display:flex; align-items:center; gap:6px}
.hlres .where .dot{width:9px; height:9px}
.hlres .snip{font-family:var(--r-font); line-height:1.45}
.hlres .hn{margin-top:5px; font-size:.84rem; color:var(--r-fg); padding-left:9px; border-left:2px solid var(--r-line); white-space:pre-wrap}
.hlq{margin:0 0 12px; font-family:var(--r-font); font-size:1rem; line-height:1.5; color:var(--r-fg); max-height:9.5em; overflow:auto}
.hlrow{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.hlcolors{display:flex; gap:6px}
.hlcolors button{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:2px solid transparent}
.hlcolors button[aria-pressed="true"]{border-color:var(--r-fg)}
#hlNote{width:100%; box-sizing:border-box; resize:vertical; min-height:84px; padding:10px 12px; border-radius:12px; border:1px solid var(--r-line); background:transparent; color:var(--r-fg); font:inherit; font-size:.95rem; line-height:1.45}
#hlNote:focus{outline:2px solid var(--accent); outline-offset:0}
.flow.sample p.first{text-indent:0}
.flow.sample p.first::first-letter{font-size:3.1em; float:left; line-height:.82; padding:.06em .08em 0 0; font-weight:600}
.flow.sample h2{font-size:.78em; letter-spacing:.2em; text-transform:uppercase; font-weight:400; margin:2.2em 0 .4em; color:var(--r-muted)}
.flow.sample h3{font-size:1.5em; font-weight:400; font-style:italic; margin:0 0 1.6em}
.flow .tp{text-align:center; padding-top:20vh}
.flow .tp .t{font-size:2.2em; line-height:1.1; text-wrap:balance}
.flow .tp .a{margin-top:1em; letter-spacing:.2em; text-transform:uppercase; font-size:.7em; color:var(--r-muted)}
.flow .tp .orn{margin:2em 0; color:var(--r-muted)}
.flow .tp .n{font-size:.75em; color:var(--r-muted); font-style:italic; margin-top:3em; line-height:1.5}
#measureBox{position:absolute; left:-20000px; top:0; visibility:hidden; pointer-events:none; contain:strict}
.ribbon{position:absolute; top:0; right:18px; width:14px; height:22px; background:var(--accent); clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%); z-index:2; opacity:.85; pointer-events:none}

/* PDF */
#pdfView{position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
#pdfInner{transform-origin:0 0; padding-top:env(safe-area-inset-top,0px); padding-bottom:calc(44px + env(safe-area-inset-bottom,0px)); min-height:100%}
#pdfView.paged #pdfInner{padding-block:0; display:flex; flex-direction:column}
#pdfView.paged .pg:not(.cur){display:none}
#pdfView.paged .pg{margin:auto}
.pg{margin:0 auto 6px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); position:relative; overflow:hidden; flex:none}
.pg canvas{display:block; width:100%; height:100%}
.pg .pn{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#999; font-size:.8rem; font-family:var(--ui)}
.pg .hl{position:absolute; background:rgba(255,196,0,.4); mix-blend-mode:multiply; border-radius:2px; pointer-events:none}
.pg .hl.cur{background:rgba(255,140,0,.55)}
#reader[data-rt="sepia"] .pg canvas{filter:sepia(.35) contrast(.95)}
#reader[data-rt="night"] .pg canvas,#reader[data-rt="black"] .pg canvas{filter:invert(.88) hue-rotate(180deg)}
#reader[data-rt="night"] .pg,#reader[data-rt="black"] .pg{background:#222}
#reader[data-rt="night"] .pg .hl,#reader[data-rt="black"] .pg .hl{mix-blend-mode:normal; background:rgba(255,196,0,.32)}

.loading{position:absolute; inset:0; display:grid; place-items:center; color:var(--r-muted); font-family:var(--ui); font-size:.9rem; z-index:4; background:var(--r-bg)}

/* reader chrome */
.chrome-top,.chrome-bot{position:absolute; left:0; right:0; z-index:10; background:var(--r-chrome); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:transform .22s ease, opacity .22s; font-family:var(--ui); color:var(--r-fg); padding-left:max(6px,env(safe-area-inset-left,0px)); padding-right:max(6px,env(safe-area-inset-right,0px))}
.chrome-top{top:0; padding-top:env(safe-area-inset-top,0px); border-bottom:1px solid var(--r-line); display:flex; align-items:center; gap:2px; min-height:52px}
.chrome-bot{bottom:0; padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)); padding-top:10px; border-top:1px solid var(--r-line); display:flex; flex-direction:column; gap:6px}
#reader:not(.show) .chrome-top{transform:translateY(-100%); opacity:0; pointer-events:none}
#reader:not(.show) .chrome-bot{transform:translateY(100%); opacity:0; pointer-events:none}
.ib{width:44px; height:44px; display:grid; place-items:center; border-radius:12px; flex:none; color:var(--r-fg)}
.ib svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ib[aria-pressed="true"] svg{fill:currentColor}
.ib:active{background:var(--r-line)}
.ttl{flex:1; min-width:0; font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px}
.brpanel{position:absolute; left:50%; transform:translateX(-50%); top:calc(60px + env(safe-area-inset-top,0px)); z-index:11; width:min(420px, calc(100% - 20px)); display:flex; align-items:center; gap:8px; padding:8px 10px 8px 12px; border-radius:16px; background:var(--r-chrome); border:1px solid var(--r-line); box-shadow:0 8px 28px rgba(0,0,0,.18); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--r-fg); font-family:var(--ui)}
.brpanel svg{width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round}
.brpanel .s1{width:14px; height:14px; opacity:.7}
.brpanel input{flex:1; min-width:0}
.chipb{font-size:.8rem; padding:7px 11px; border-radius:999px; border:1px solid var(--r-line); white-space:nowrap}
.chipb[aria-pressed="true"]{background:var(--r-fg); color:var(--r-bg); border-color:var(--r-fg)}
.dim{position:absolute; inset:0; background:#000; pointer-events:none; z-index:9}
.tapmap{display:flex; height:46px; margin-top:8px; border-radius:10px; overflow:hidden; border:1px solid var(--r-line); font-size:.74rem; color:var(--r-muted)}
.tapmap .z{display:grid; place-items:center; transition:flex-basis .2s}
.tapmap .l,.tapmap .r{background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--r-fg)}
.tapmap .c{flex:1}
.slider-row{display:flex; align-items:center; gap:10px; padding:0 10px; font-size:.78rem; color:var(--r-muted); font-variant-numeric:tabular-nums}
.slider-row .lab{min-width:56px}
.slider-row .lab:last-child{text-align:right}
.track{position:relative; flex:1; min-width:0; height:32px; display:flex; align-items:center}
.ticks{position:absolute; left:8px; right:8px; top:50%; height:10px; transform:translateY(-50%); pointer-events:none}
.ticks i{position:absolute; top:0; width:1px; height:10px; background:var(--r-muted); opacity:.45}
input[type=range]{flex:1; min-width:0; accent-color:var(--r-fg); height:30px; margin:0; position:relative; background:transparent}
.bubble{position:absolute; bottom:calc(100% + 8px); transform:translateX(-50%); background:var(--r-fg); color:var(--r-bg); font-size:.78rem; padding:6px 10px; border-radius:8px; white-space:nowrap; max-width:70vw; overflow:hidden; text-overflow:ellipsis; pointer-events:none}
.pill{position:absolute; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:12; display:flex; align-items:center; gap:2px; background:var(--r-fg); color:var(--r-bg); border-radius:999px; font-family:var(--ui); font-size:.84rem; box-shadow:0 6px 20px rgba(0,0,0,.25); max-width:calc(100% - 32px)}
.pill button{padding:10px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:inherit; min-width:0}
.pill .x{padding:10px 12px 10px 6px; opacity:.7; flex:none}
#reader.show .pill{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.findbar .count{padding:0 6px; font-variant-numeric:tabular-nums; flex:none}

/* ================= Sheets ================= */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:20; opacity:0; pointer-events:none; transition:opacity .2s}
.scrim.on{opacity:1; pointer-events:auto}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:21; margin:0 auto; max-width:560px; background:var(--r-bg); color:var(--r-fg); border-radius:18px 18px 0 0; box-shadow:0 -8px 40px rgba(0,0,0,.2); transform:translateY(105%); transition:transform .26s cubic-bezier(.3,.7,.2,1); font-family:var(--ui); padding-left:max(18px,env(safe-area-inset-left,0px)); padding-right:max(18px,env(safe-area-inset-right,0px)); padding-top:8px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); max-height:min(82vh, 760px); display:flex; flex-direction:column; visibility:hidden}
.sheet.on{transform:none; visibility:visible}
.sheet.app{background:var(--surface); color:var(--ink); --r-fg:var(--ink); --r-bg:var(--surface); --r-muted:var(--muted); --r-line:var(--line)}
.sheet .body{overflow:auto; min-height:0; flex:1; overscroll-behavior:contain; margin:0 -4px; padding:0 4px}
.grab{width:38px; height:4px; border-radius:4px; background:var(--r-line); flex:none; position:relative; transition:width .2s, background .2s}
.grab::before{content:""; position:absolute; inset:-11px -44px}
.grab:hover,.sheet.dragging .grab{width:46px; background:var(--r-muted)}
/* the handle row: drag it (or the title and tabs below it) up for full screen, down to shrink or close */
.sheet-top{position:relative; display:flex; align-items:center; justify-content:center; height:26px; margin:-8px 0 4px; flex:none; touch-action:none; cursor:grab}
.sheet-top,.sheet-head,.sheet .tabs{touch-action:none; -webkit-user-select:none; user-select:none}
.sheet-x{position:absolute; right:-8px; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; display:none; place-items:center; color:var(--r-muted)}
.sheet.full{height:100vh; height:100dvh; max-height:none; border-radius:0; padding-top:calc(8px + env(safe-area-inset-top,0px)); box-shadow:none}
.sheet.full .sheet-top{height:40px; margin:-4px 0 6px}
.sheet.full .sheet-x{display:grid}
.sheet.dragging{transition:none}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; flex:none}
.sheet-title{font-family:var(--display); font-size:1.3rem}
.sheet-sub{font-size:.76rem; color:var(--r-muted)}
.sheet h4{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--r-muted); font-weight:600; margin:14px 0 7px}
.tabs{display:flex; gap:4px; background:var(--r-line); border-radius:11px; padding:3px; flex:none; margin-bottom:6px}
.tabs button{flex:1; padding:8px 4px; border-radius:8px; font-size:.84rem; color:var(--r-fg); opacity:.75; min-width:0; white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--r-bg); opacity:1; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12)}
.preview{border-radius:12px; padding:12px 14px; border:1px solid var(--r-line); font-family:var(--r-font); font-size:var(--r-size); line-height:var(--r-lh); text-align:var(--r-align); hyphens:var(--r-hyph); -webkit-hyphens:var(--r-hyph); max-height:7.2em; overflow:hidden; position:relative; margin-top:4px}
.preview p{margin:0 0 var(--r-para); text-indent:1.4em} .preview p:first-child{text-indent:0}
.swatches{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; justify-items:center}
.sw{width:100%; max-width:40px; aspect-ratio:1; border-radius:50%; border:1px solid rgba(0,0,0,.14); display:grid; place-items:center; font-family:'Literata',serif; font-size:.9rem; position:relative}
.sw[aria-pressed="true"]::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--r-fg)}
.swl{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; font-size:.72rem; color:var(--r-fg); opacity:.8; text-align:center; margin-top:5px}
.seg{display:flex; background:var(--r-line); border-radius:11px; padding:3px; gap:3px}
.seg button{flex:1; padding:8px 4px; border-radius:8px; font-size:.84rem; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--r-fg)}
.seg button[aria-pressed="true"]{background:var(--r-fg); color:var(--r-bg); font-weight:600}
.opts{display:flex; flex-wrap:wrap; gap:6px}
.opts button{border:1px solid var(--r-line); border-radius:999px; padding:7px 12px; font-size:.82rem; color:var(--r-fg)}
.opts button[aria-pressed="true"]{background:var(--r-fg); color:var(--r-bg); border-color:var(--r-fg); font-weight:600}
.sizerow{display:flex; align-items:center; gap:10px}
.sizerow button{width:40px; height:38px; border-radius:10px; background:var(--r-line); flex:none; color:var(--r-fg)}
.sizerow input{flex:1}
.sizerow .val{min-width:44px; text-align:right; font-variant-numeric:tabular-nums; font-size:.86rem}
.fontrow{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.fontrow button{border:1px solid var(--r-line); border-radius:11px; padding:9px 4px; font-size:1.05rem; line-height:1.1; color:var(--r-fg); min-width:0}
.fontrow button small{display:block; font-family:var(--ui); font-size:.66rem; color:var(--r-muted); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fontrow button[aria-pressed="true"]{border-color:var(--r-fg); box-shadow:inset 0 0 0 1.5px var(--r-fg)}
.hint{font-size:.76rem; color:var(--r-muted); margin-top:6px; line-height:1.4}
.btn.wide{width:100%; margin-top:10px; justify-content:center; padding:12px 16px}
.linkbtn{color:var(--accent); font-weight:600; font-size:.86rem; padding:8px 0}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px}
.row2 > div{min-width:0}
.row2 .seg{gap:2px}
.row2 .seg button{font-size:.78rem; padding:8px 1px; letter-spacing:-.005em}
.scope{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 4px}
.scope .seg{flex:0 1 230px}

/* contents / bookmarks / search lists */
.list{display:flex; flex-direction:column}
.item{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:11px 2px; border-bottom:1px solid var(--r-line); font-size:.93rem; color:inherit; min-width:0}
.item .lab{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.item .num{color:var(--r-muted); font-size:.78rem; font-variant-numeric:tabular-nums; flex:none}
.item.cur{font-weight:700}
.item.cur::before{content:""; width:3px; align-self:stretch; background:var(--accent); border-radius:2px; margin-right:2px}
.toc-node > .kids{display:none}
.toc-node.open > .kids{display:block}
.toc-row{display:flex; align-items:stretch}
.toc-row .item{flex:1}
.toggle{width:36px; flex:none; display:grid; place-items:center; border-bottom:1px solid var(--r-line); color:var(--r-muted)}
.toggle svg{width:16px; height:16px; transition:transform .15s}
.toc-node.open > .toc-row .toggle svg{transform:rotate(90deg)}
.snip{font-size:.84rem; line-height:1.4; color:var(--r-fg); opacity:.85; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.snip mark{background:var(--r-hit); color:inherit; border-radius:2px}
.res{display:block; width:100%; text-align:left; padding:10px 2px; border-bottom:1px solid var(--r-line)}
.res .where{font-size:.72rem; color:var(--r-muted); margin-bottom:3px; letter-spacing:.02em}
.bm{display:flex; align-items:flex-start; gap:8px; border-bottom:1px solid var(--r-line)}
.bm .res{border:0; flex:1; min-width:0}
.bm .del{width:40px; height:40px; flex:none; color:var(--r-muted); display:grid; place-items:center; margin-top:4px}
.field{display:flex; gap:8px; align-items:center}
.field input{flex:1; min-width:0; height:42px; border:1px solid var(--r-line); border-radius:11px; padding:0 12px; background:transparent; font-size:.95rem; color:var(--r-fg); outline:none}
.field input:focus{border-color:var(--r-fg)}
.btn{height:42px; padding:0 16px; border-radius:11px; background:var(--r-fg); color:var(--r-bg); font-weight:600; font-size:.9rem; flex:none}
.btn.ghost{background:transparent; color:var(--r-fg); border:1px solid var(--r-line)}
.btn.danger{background:var(--danger); color:#fff}
.backrow{display:flex; align-items:center; gap:8px; padding:10px 12px; margin:4px 0 6px; border-radius:11px; background:var(--r-line); font-size:.86rem; width:100%; text-align:left}
.backrow svg{width:16px; height:16px; flex:none}
.muted{color:var(--r-muted); font-size:.86rem; padding:14px 2px; line-height:1.5}
.progress-line{height:3px; background:var(--r-line); border-radius:3px; overflow:hidden; margin:8px 0}
.progress-line i{display:block; height:100%; background:var(--r-fg); transition:width .2s}

/* note popup */
.note-body{font-family:var(--r-font); font-size:calc(var(--r-size) * .9); line-height:1.5; padding:4px 0 10px; overflow-wrap:break-word}
.note-body p{margin:0 0 .6em}
.note-actions{display:flex; gap:8px; justify-content:flex-end; flex:none; padding-top:6px}

/* book details */
.details{display:grid; grid-template-columns:84px minmax(0,1fr); gap:16px; align-items:start}
.details h3{font-family:var(--display); font-weight:400; font-size:1.3rem; margin:0; line-height:1.2; overflow-wrap:anywhere}
.details .by{color:var(--muted); margin-top:4px}
.facts{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; font-size:.84rem; margin-top:14px}
.facts dt{color:var(--muted)} .facts dd{margin:0; overflow-wrap:anywhere}
.actions{display:flex; flex-direction:column; gap:2px; margin-top:12px}
.actions button{display:flex; align-items:center; gap:12px; padding:12px 4px; font-size:.95rem; text-align:left; border-bottom:1px solid var(--line)}
.actions button svg{width:20px; height:20px; color:var(--muted); flex:none}
.actions .warn{color:var(--danger)} .actions .warn svg{color:var(--danger)}
.confirm{background:var(--bg); border-radius:12px; padding:14px; margin-top:10px; font-size:.9rem; line-height:1.45}
.confirm .btns{display:flex; gap:8px; margin-top:12px; justify-content:flex-end}
.form{display:flex; flex-direction:column; gap:10px}
.form label{font-size:.78rem; color:var(--muted); display:flex; flex-direction:column; gap:5px}
.form input[type=text]{height:42px; border:1px solid var(--line); border-radius:10px; padding:0 12px; background:var(--bg); font-size:.95rem; outline:none}

.toast{position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); padding:11px 16px; border-radius:12px; font-size:.88rem; z-index:40; opacity:0; transition:all .25s; max-width:calc(100% - 32px); pointer-events:none; line-height:1.4}
.toast.on{opacity:1; transform:translateX(-50%)}

@media (max-width:420px){ .continue{grid-template-columns:minmax(0,80px) minmax(0,1fr); gap:14px; padding:12px} .continue h2{font-size:1.25rem} .brand{font-size:1.65rem} }
@media (min-width:700px){ .sheet{bottom:16px; border-radius:18px; max-height:min(78vh,760px)} .sheet.full{height:calc(100dvh - 32px); border-radius:18px; padding-top:8px; box-shadow:0 -8px 40px rgba(0,0,0,.2)} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* reading time */
.tbig{display:flex; flex-direction:column; gap:2px; margin:4px 0 12px}
.tbig span{font-size:.78rem; color:var(--muted)}
.tbig b{font-family:var(--display); font-weight:400; font-size:2rem; letter-spacing:-.01em}
.tbars{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; height:120px; align-items:end; margin-bottom:10px}
.tb{display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.tb i{display:block; width:100%; max-width:28px; border-radius:6px 6px 3px 3px; background:color-mix(in srgb, var(--accent) 45%, transparent); min-height:0}
.tb.today i{background:var(--accent)}
.tb span{font-size:.72rem; color:var(--muted)}
.tb.today span{color:var(--ink); font-weight:600}
.trow{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.trow span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.trow span:last-child{color:var(--muted); flex:none; font-variant-numeric:tabular-nums}
/* first-run tutorial */
.tut{position:absolute; inset:0; z-index:14; display:flex; background:rgba(0,0,0,.52); color:#fff; font-family:var(--ui); animation:tutin .3s ease}
@keyframes tutin{from{opacity:0}}
.tut .tz{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:12px}
.tut .l,.tut .r{background:rgba(255,255,255,.08)}
.tut .l{border-right:1px dashed rgba(255,255,255,.35)} .tut .r{border-left:1px dashed rgba(255,255,255,.35)}
.tut .c{flex:1}
.tut b{font-size:1.05rem; font-weight:600}
.tut small{font-size:.75rem; opacity:.75}
.tut p{font-size:.84rem; line-height:1.45; margin:18px 0 0; opacity:.92; max-width:16em}
.tutok{margin-top:18px; background:#fff; color:#111; padding:9px 18px; border-radius:999px; font-weight:600; font-size:.88rem}