/* Novel UI — "lamplit paper". Literata for reading, Inter for chrome. */
@font-face{font-family:Literata;src:url(fonts/literata-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Literata;src:url(fonts/literata-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Literata;src:url(fonts/literata-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Literata;src:url(fonts/literata-latin-600-italic.woff2) format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:Literata;src:url(fonts/literata-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(fonts/eb-garamond-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(fonts/eb-garamond-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'EB Garamond';src:url(fonts/eb-garamond-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IM Fell English';src:url(fonts/im-fell-english-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IM Fell English';src:url(fonts/im-fell-english-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-latin-700-normal.woff2) format('woff2');font-weight:700 800;font-display:swap}

/* palettes: "library at night" board (Espresso / Burnt Sienna / Caramel / Golden Honey / Oat Milk)
   and the "cottage book" board (Deep Olive / Sage / Warm Ivory / Dusty Rose / Clay Brown) */
:root{
  --bg:#f6f0e4; --bg2:#ede4d3; --card:#fbf7ee; --ink:#2b2622; --ink2:#5e554c; --ink3:#8c8276; --line:rgba(60,40,20,.12);
  --accent:#a65e3f; --ribbon:#a65e3f; --accent-ink:#fff; --scrim:rgba(20,14,10,.55); --shadow:0 1px 2px rgba(40,25,10,.08),0 8px 24px rgba(40,25,10,.08);
  --book-shadow:0 12px 20px -8px rgba(60,30,10,.45),0 2px 4px rgba(60,30,10,.18); --ledge:#d9ccb4; --ledge2:#c7b69a;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --read-size:19px; --read-lh:1.72; --read-font:Literata,Georgia,serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --r1:10px; --r2:18px; --r3:28px; --tabh:84px;
  color-scheme:only light; /* "only" stops phone browsers' auto-darkening from recoloring the pages and scenes */
}
:root[data-theme=sepia]{--bg:#ebddc3;--bg2:#e1d0b3;--card:#f3e8d3;--ink:#3a2f24;--ink2:#6a5842;--ink3:#907c62;--line:rgba(70,45,15,.16);--ribbon:#414c39;--ledge:#d2bf9c;--ledge2:#bca783}
:root[data-theme=cottage]{--bg:#eee8da;--bg2:#e3dccb;--card:#f6f2e8;--ink:#2f2a24;--ink2:#5d574c;--ink3:#8a8375;--line:rgba(50,55,35,.14);--ribbon:#c7a19b;--ledge:#d6cdb8;--ledge2:#bfb49b}
:root[data-theme=night]{--bg:#15130f;--bg2:#1d1a15;--card:#231f1a;--ink:#cfc6b8;--ink2:#a39a8c;--ink3:#756d62;--line:rgba(255,240,220,.08);--scrim:rgba(0,0,0,.6);--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);--ribbon:#ddb56c;--book-shadow:0 14px 22px -8px rgba(0,0,0,.7),0 2px 4px rgba(0,0,0,.4);--ledge:#2c2720;--ledge2:#3a332a;--grain:none;color-scheme:dark}
:root[data-theme=slate]{--bg:#1c2126;--bg2:#232931;--card:#29303a;--ink:#c9d1d6;--ink2:#9aa5ad;--ink3:#6f7b84;--line:rgba(220,235,245,.08);--scrim:rgba(0,0,0,.6);--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);--ribbon:#8dbfc2;--book-shadow:0 14px 22px -8px rgba(0,0,0,.7),0 2px 4px rgba(0,0,0,.4);--ledge:#2e353e;--ledge2:#3b434d;--grain:none;color-scheme:dark}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--grain),var(--bg);color:var(--ink);font:15px/1.45 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:contain}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
a{color:inherit}
.serif{font-family:Literata,Georgia,serif}
.muted{color:var(--ink3)}
.hidden{display:none!important}
svg.scene-svg{display:block;width:100%;height:100%}
/* manga plates (web/manga.js) are images; they fill the same 8:5 frames the SVG scenes do */
img.manga{display:block;width:100%;height:100%;object-fit:cover;background:#f9f8f4;-webkit-user-drag:none;user-select:none}
.bk .art img.manga,.cover .art img.manga{position:absolute;inset:0}
img.manga-pf{display:block;width:100%;height:100%;border-radius:50%;background:#f9f8f4}
/* painted illustrations (story.art === 'image'): finished pictures, shown as they are */
img.manga.gen{background:#1e1b22;object-position:50% 40%}
img.manga-pf.gen{object-fit:cover;background:#1e1b22}
.gen-none{width:100%;height:100%;background:linear-gradient(135deg,#2a2530,#1c1a22)}
.pf-init{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--c);color:#fff;font:600 22px/1 var(--sans,system-ui);text-transform:uppercase}
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- shell ---------- */
#app{min-height:100%}
.view{min-height:100vh;padding-bottom:calc(var(--tabh) + var(--sab) + 24px)}
.view.reader{padding-bottom:0}
/* floating pill tab bar; the selected tab sits on a raised pill */
.tabbar{position:fixed;left:50%;bottom:calc(var(--sab) + 12px);transform:translateX(-50%);z-index:40;display:flex;gap:4px;
  width:min(340px,calc(100% - 32px));height:62px;padding:6px;border-radius:99px;
  background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 10px 30px -6px rgba(40,20,5,.28),0 0 0 1px var(--line);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.tabbar.hidden{display:flex!important;transform:translate(-50%,140%)}
.tabbar button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:99px;color:var(--ink3);font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s}
.tabbar button .icon{width:21px;height:21px}
.tabbar button.on{color:var(--ink);background:var(--bg)}
.tabbar button.on .icon{stroke:var(--ribbon)}
.tabbar button:not(.on) span{display:none}
.tabbar button:active{transform:scale(.965)}
/* solid strip behind the status bar so scrolled content never shows under it */
.status-scrim{position:fixed;top:0;left:0;right:0;height:var(--sat);background:var(--bg);z-index:35}

.page-head{padding:calc(var(--sat) + 26px) 20px 6px}
.eyebrow{font:600 11px/1 Inter,sans-serif;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink3)}
.page-title{font:800 34px/1.08 Inter,sans-serif;margin:8px 0 0;letter-spacing:-1.2px}
.page-sub{color:var(--ink2);margin-top:6px;font-size:14px}
.section{padding:18px 20px 4px}
.section h2{font:700 19px/1.2 Inter,sans-serif;letter-spacing:-.4px;color:var(--ink);margin:0 0 14px;display:flex;justify-content:space-between;align-items:baseline}
.section h2 small{font:500 13px Inter;letter-spacing:0;color:var(--ink3)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink2)}
.pill i{width:7px;height:7px;border-radius:50%;background:#6aa56a;display:inline-block}
.pill i.warn{background:#d49a3a}.pill i.off{background:#b9b0a4}

/* ---------- covers ---------- */
.cover{position:relative;overflow:hidden;background:#2a2630;border-radius:var(--r2);aspect-ratio:8/5;isolation:isolate}
.cover .art{position:absolute;inset:0}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(10,6,4,.78) 100%);z-index:1}
.cover .meta{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;z-index:2;color:#fff}
.cover .ttl{font:600 21px/1.15 Literata,serif;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.cover .sub{font-size:12.5px;opacity:.85;margin-top:5px;display:flex;gap:10px;align-items:center}
.badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--accent);color:#fff;font:700 11px/1 Inter;letter-spacing:1px;text-transform:uppercase;padding:6px 9px;border-radius:99px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.progress-line{position:absolute;left:0;bottom:0;height:3px;background:var(--accent);z-index:3}

.hero-strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 8px;margin:0 -20px;scrollbar-width:none}
.hero-strip::-webkit-scrollbar{display:none}
.hero-card{flex:0 0 86%;max-width:520px;scroll-snap-align:center;text-align:left}
.hero-card .cover{aspect-ratio:4/5;border-radius:var(--r3);box-shadow:var(--shadow)}
.hero-card .cover .art svg{height:100%;width:auto;min-width:100%}
.hero-card .blurb{font:italic 400 14.5px/1.45 Literata,serif;opacity:.92;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-card .ttl{font-size:27px}

.continue{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:10px;box-shadow:var(--shadow);width:100%;text-align:left}
.continue .cover{width:120px;flex:none;border-radius:12px}
.continue .cover::after{display:none}
.continue .t{font:600 17px/1.2 Literata,serif}
.continue .c{font-size:13px;color:var(--ink2);margin-top:3px}
.bar{height:4px;border-radius:4px;background:var(--line);margin-top:10px;overflow:hidden}
.bar b{display:block;height:100%;background:var(--accent);border-radius:4px}

.list{display:flex;flex-direction:column;gap:2px}
.row{display:flex;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.row .cover{width:104px;flex:none;border-radius:10px}
.row .cover::after{display:none}
.row .t{font:600 16.5px/1.25 Literata,serif}
.row .d{font-size:12.5px;color:var(--ink3);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap}
.row .b{font:italic 13.5px/1.4 Literata,serif;color:var(--ink2);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ring{width:30px;height:30px;flex:none}

.date-group{font:600 12px Inter;color:var(--ink3);letter-spacing:1px;text-transform:uppercase;margin:18px 0 2px}

/* ---------- books: 2:3 covers standing on a shelf ---------- */
.bk{position:relative;display:block;width:var(--bw,118px);aspect-ratio:2/3;flex:none;text-align:left;border-radius:3px 7px 7px 3px;overflow:hidden;
  background:color-mix(in srgb,var(--accent) 14%,#f4ecdd);box-shadow:var(--book-shadow);isolation:isolate;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.bk:active{transform:scale(.965)}
:root[data-theme=night] .bk,:root[data-theme=slate] .bk{filter:brightness(.86)}
@media (hover:hover){.bk:hover{transform:translateY(-4px)}}
.bk .art{position:absolute;left:0;right:0;top:0;height:60%;overflow:hidden;background:#231f28}
.bk .art svg{position:absolute;top:0;left:50%;height:100%;width:auto;transform:translateX(-50%)}
.bk .band{position:absolute;left:0;right:0;bottom:0;height:40%;padding:9% 10% 0 13%;display:flex;flex-direction:column;align-items:center;text-align:center;color:#2b2622;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,#f6efe2),color-mix(in srgb,var(--accent) 24%,#efe5d3))}
.bk .band::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);opacity:.85}
.bk .ser{font:700 calc(var(--bw,118px) * .062)/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:5%}
.bk .ttl{font:600 calc(var(--bw,118px) * .112)/1.14 Literata,serif;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.bk .ttl.long{font-size:calc(var(--bw,118px) * .096)}
.bk .fl{margin-top:auto;margin-bottom:9%;width:28%;height:6px;opacity:.55;color:var(--accent)}
/* spine crease + page edge light */
.bk::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.26) 0,rgba(255,255,255,.14) 2.5%,rgba(0,0,0,.06) 5%,transparent 9%),linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%)}
.bk .rib{position:absolute;top:0;right:12%;width:13%;height:20%;z-index:4;background:var(--ribbon);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:0 2px 4px rgba(0,0,0,.3)}
.bk .prog{position:absolute;left:0;bottom:0;height:3px;z-index:4;background:var(--ribbon)}
.bk .done{position:absolute;right:7%;bottom:6%;z-index:4;width:20px;height:20px;border-radius:50%;background:var(--ribbon);display:grid;place-items:center}
.bk .done svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3}

.shelf{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;padding:6px 20px 0;margin:0 -20px;scroll-snap-type:x proximity}
.shelf::-webkit-scrollbar{display:none}
.shelf{--bw:118px}
.shelf .slot{flex:none;position:relative;padding-bottom:6px;scroll-snap-align:start}
.shelf .slot:first-child{scroll-margin-left:20px}
/* the plank the books stand on: each slot draws its own piece; with the gap they read as one board */
.shelf .slot::after{content:"";position:absolute;left:-11px;right:-11px;top:calc(var(--bw) * 1.5 - 2px);height:10px;z-index:-1;
  background:linear-gradient(180deg,var(--ledge) 0 50%,var(--ledge2) 50%);box-shadow:0 7px 10px -5px rgba(40,20,5,.35)}
.shelf .meta{font:500 12px/1.3 Inter;color:var(--ink3);margin-top:18px;width:var(--bw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.hero-book .bl{display:none}

/* hero: the book you're in (or the newest one) */
.hero-book{position:relative;display:flex;gap:18px;align-items:flex-end;padding:20px;border-radius:var(--r3);background:var(--card);box-shadow:var(--shadow);overflow:hidden;text-align:left;width:100%;isolation:isolate}
.hero-book .glow{position:absolute;inset:-30%;z-index:-1;background:radial-gradient(closest-side,var(--accent),transparent);opacity:.11;left:-40%;right:auto;width:110%}
.hero-book .bk{--bw:118px;transform:rotate(-2deg)}
.hero-book .info{flex:1;min-width:0;padding-bottom:4px}
.hero-book .kick{font:600 11px Inter;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink3)}
.hero-book .t{font:600 23px/1.15 Literata,serif;margin:7px 0 4px;letter-spacing:-.2px;text-wrap:balance}
.hero-book .s{font:italic 14px/1.35 Literata,serif;color:var(--ink2)}
.hero-book .c{font:500 13px Inter;color:var(--ink2);margin-top:10px;font-variant-numeric:tabular-nums}
.hero-book .line{height:3px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden}
.hero-book .line b{display:block;height:100%;background:var(--ribbon);border-radius:3px}
.hero-book .go{margin-top:14px;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 20px;border-radius:99px;background:var(--ink);color:var(--bg);font:600 14px Inter;white-space:nowrap}
.stats{display:flex;gap:10px}
.stats div{flex:1;background:var(--card);border-radius:var(--r2);padding:12px 14px;box-shadow:var(--shadow)}
.stats b{display:block;font:800 22px/1 Inter;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.stats span{display:block;font:500 12px Inter;color:var(--ink3);margin-top:6px}
/* categories — chip row, category hero, browse panel (tone tiles: light swatch + dark ink) */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px 4px;scroll-behavior:smooth}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font:600 13.5px Inter,sans-serif;color:var(--ink2);white-space:nowrap;transition:transform .15s}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--tone);flex:none}
.chip small{font:600 11.5px Inter,sans-serif;color:var(--ink3);font-variant-numeric:tabular-nums}
.chip.on{background:var(--ink);color:var(--bg);box-shadow:none}
.chip.on small{color:var(--bg);opacity:.65}
.chip:active{transform:scale(.965)}
.chip.sm{min-height:30px;padding:0 11px;font-size:12.5px;gap:6px}
.chip.plain{background:transparent;color:var(--ink3);font-weight:500}
.tp-genres{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0 2px}
.cat-hero{display:flex;align-items:center;gap:14px;padding:20px 16px 20px 22px;border-radius:var(--r3);background:var(--tone);color:#17171a;overflow:hidden;min-height:148px}
.cat-hero .txt{flex:1;min-width:0}
.cat-hero .k{font:600 11px Inter,sans-serif;letter-spacing:1.1px;text-transform:uppercase;opacity:.6}
.cat-hero .h{font:800 32px/1.02 Inter,sans-serif;letter-spacing:-1.2px;margin:6px 0 6px}
.cat-hero p{margin:0;font:500 14px/1.4 Inter,sans-serif;opacity:.78;max-width:30ch}
.cat-hero .n{font:600 12.5px Inter,sans-serif;margin-top:12px;opacity:.7;font-variant-numeric:tabular-nums}
.fan{position:relative;display:block;flex:none;width:112px;height:104px}
.fan .mc{position:absolute;bottom:0;left:0;width:58px;aspect-ratio:2/3;border-radius:3px 6px 6px 3px;overflow:hidden;background:#231f28;box-shadow:0 6px 16px rgba(20,14,8,.3)}
.fan .mc:nth-child(1){transform:rotate(-9deg);z-index:1}
.fan .mc:nth-child(2){left:27px;bottom:8px;z-index:3}
.fan .mc:nth-child(3){left:54px;transform:rotate(9deg);z-index:2}
.fan .mc .art{position:absolute;inset:0}
.fan .mc .art svg{position:absolute;top:0;left:50%;height:100%;width:auto;transform:translateX(-50%)}
.fan .mc .art img.manga{position:absolute;inset:0}
.panel{background:var(--card);border-radius:var(--r3);padding:16px;box-shadow:var(--shadow)}
.panel .ph{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 12px}
.panel .ph b{font:700 17px Inter,sans-serif;letter-spacing:-.3px}
.panel .ph small{font:500 12.5px Inter,sans-serif;color:var(--ink3)}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cat-tile{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:4px;min-height:108px;padding:12px 8px 10px 14px;border-radius:18px;background:var(--tone);color:#17171a;text-align:left;overflow:hidden;transition:transform .15s}
.cat-tile:active{transform:scale(.965)}
.cat-tile .t{align-self:flex-start;display:flex;flex-direction:column;gap:3px;min-width:0}
.cat-tile b{font:700 16px Inter,sans-serif;letter-spacing:-.3px;white-space:nowrap}
.cat-tile small{font:500 12px Inter,sans-serif;opacity:.65;white-space:nowrap}
.cat-tile .fan{width:76px;height:66px;margin:0 -2px -2px 0}
.cat-tile .fan .mc{width:36px;box-shadow:0 4px 10px rgba(20,14,8,.28)}
.cat-tile .fan .mc:nth-child(2){left:18px;bottom:5px}
.cat-tile .fan .mc:nth-child(3){left:36px}
.grid-books{display:grid;grid-template-columns:repeat(auto-fill,var(--bw));justify-content:space-between;gap:22px 14px;--bw:100px}
.grid-books .meta{font:500 12px/1.3 Inter;color:var(--ink3);margin-top:10px;width:var(--bw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.bk .tag.color{background:linear-gradient(90deg,#ffd6c8,#ffe9b0,#cfe8ff);box-shadow:0 0 0 1.5px #3a2230;color:#3a2230}
.bk .tag{position:absolute;left:8%;top:6%;z-index:4;padding:.32em .5em .26em;border-radius:3px;background:#f9f8f4;color:#141416;font:800 calc(var(--bw,118px) * .064)/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 0 1.5px #141416}
@media (min-width:980px){.grid-books{--bw:128px;justify-content:start;gap:28px 26px}.cat-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- empty / states ---------- */
.empty{margin:30px 20px;padding:28px 22px;border-radius:var(--r3);background:var(--card);border:1px dashed color-mix(in srgb,var(--ink3) 50%,transparent);text-align:center}
.empty h3{font:600 22px/1.2 Literata,serif;margin:12px 0 6px}
.empty p{color:var(--ink2);margin:0 0 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.wide{width:100%}
.btn:disabled{opacity:.5}
.skeleton{background:linear-gradient(90deg,var(--bg2),var(--card),var(--bg2));background-size:200% 100%;animation:sk 1.3s infinite linear;border-radius:var(--r2)}
@keyframes sk{to{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + var(--sab) + 16px);transform:translateX(-50%) translateY(20px);opacity:0;background:#221d1a;color:#f4ece0;padding:12px 18px;border-radius:14px;font-size:14px;z-index:90;transition:.25s;max-width:90vw;box-shadow:0 8px 30px rgba(0,0,0,.3)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- reader ---------- */
.rbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:4px;padding:calc(var(--sat) + 6px) 8px 6px;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transition:transform .28s ease}
.rbar.away{transform:translateY(-110%)}
.rbar .ib{width:44px;height:44px;display:grid;place-items:center;border-radius:12px}
.rbar .ib:active{background:var(--line)}
.rbar .mid{flex:1;min-width:0;text-align:center}
.rbar .mid .a{font:600 14px/1.2 Literata,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbar .mid .b{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rprog{position:fixed;left:0;top:0;height:3px;background:var(--accent);z-index:31;transition:width .2s}

.book{padding-top:calc(var(--sat) + 70px)}
.text-col{max-width:680px;margin:0 auto;padding:0 22px}
.title-page{text-align:center;padding:10px 22px 26px;max-width:680px;margin:0 auto}
.title-page .cover{border-radius:var(--r3);box-shadow:var(--shadow);margin-bottom:22px}
.title-page .cover::after{display:none}
.title-page h1{font:600 34px/1.1 Literata,serif;margin:0 0 10px;letter-spacing:-.4px}
.title-page .by{color:var(--ink3);font-size:13px;letter-spacing:.6px}
.title-page .blurb{font:italic 17px/1.55 Literata,serif;color:var(--ink2);margin:16px auto 0;max-width:34em}
.cast-row{display:flex;gap:12px;overflow-x:auto;padding:18px 2px 4px;justify-content:safe center;scrollbar-width:none}
.cast-row::-webkit-scrollbar{display:none}
.castp{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px;flex:none;font-size:11.5px;line-height:1.2;color:var(--ink2);text-align:center}
.castp .pf{width:56px;height:56px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)}
.castp .pf svg{width:100%;height:100%;display:block}

/* chapter opener: headpiece, "Chapter", the number as a word, drop cap + small-caps first line */
.chap-head{text-align:center;margin:64px 0 30px}
.orn-svg{display:block;margin:0 auto;color:var(--ink);opacity:.6}
.chap-head .orn-svg{width:150px;height:22px;margin-bottom:18px}
.chap-head .n{font:600 11px Inter;letter-spacing:.32em;text-transform:uppercase;color:var(--ink3);padding-left:.32em}
.chap-head h2{font:italic 400 34px/1.15 Literata,serif;margin:8px 0 0;letter-spacing:-.3px}
.chap-head .sub{font:italic 17px/1.4 Literata,serif;color:var(--ink2);margin-top:6px}
.prose p{font-family:var(--read-font);font-size:var(--read-size);line-height:var(--read-lh);margin:0 0 1.05em;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
.prose p.inner{font-style:italic;color:var(--ink2);border-left:3px solid var(--ribbon);padding-left:16px;margin-left:2px}
.prose p.drop::first-letter{float:left;font:600 3.35em/.8 Literata,serif;padding:.1em .1em 0 0;color:var(--accent)}
.prose p.drop::first-line{font-variant:small-caps;letter-spacing:.04em}
/* book-style paragraphs (Settings → Paragraphs → Book) */
.prose.indent p{margin:0;text-indent:1.3em}
.prose.indent p.drop,.prose.indent figure+p,.prose.indent p.inner{text-indent:0}
.prose.indent p.inner{margin:.8em 0}
.prose p.now{}

figure.scene{margin:26px -22px 30px;position:relative}
figure.scene .frame{aspect-ratio:8/5;background:#231f28;overflow:hidden;cursor:zoom-in;position:relative}
figure.scene .frame.ph{background:linear-gradient(135deg,#2a2530,#1c1a22)}
figure.scene figcaption{padding:10px 22px 0;font:italic 14px/1.45 Literata,serif;color:var(--ink2);display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
figure.scene .who{display:flex;margin-top:-2px;flex:none}
figure.scene .who span{width:26px;height:26px;border-radius:50%;overflow:hidden;margin-left:-6px;box-shadow:0 0 0 2px var(--bg);display:block}
figure.scene .who span svg{width:100%;height:100%;display:block}

.end-card{margin:60px auto 40px;max-width:680px;padding:0 22px;text-align:center}
.end-card .fin{font:italic 26px Literata,serif}
.end-card .orn-svg{width:120px;height:26px;margin:22px auto}

/* side scene panel (desktop split) */
.scene-panel{display:none}

/* sheets */
.sheet-back{position:fixed;inset:0;background:var(--scrim);z-index:60;opacity:0;pointer-events:none;transition:.25s}
.sheet-back.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--card);border-radius:22px 22px 0 0;padding:10px 20px calc(var(--sab) + 22px);transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);max-height:82vh;overflow:auto;box-shadow:0 -10px 40px rgba(0,0,0,.2)}
.sheet.on{transform:none}
.sheet:not(.on){visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.sheet .grab{width:40px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 14px}
.sheet h3{font:600 20px Literata,serif;margin:4px 0 14px}
/* contents page, printed style: title . . . . . 42% */
.sheet h3.contents{font:italic 400 26px Literata,serif;text-align:center;margin:6px 0 4px}
.toc{padding:4px 2px}
.toc a{position:relative;display:flex;gap:10px;align-items:baseline;padding:11px 4px 11px 14px;text-decoration:none;min-height:46px}
.toc a .n{font:600 12px Literata,serif;color:var(--ink3);min-width:22px;font-variant-numeric:oldstyle-nums}
.toc a .t{font:17px/1.3 Literata,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.toc a .dots{flex:1;border-bottom:2px dotted color-mix(in srgb,var(--ink3) 55%,transparent);transform:translateY(-4px);min-width:16px}
.toc a .p{font:13px Literata,serif;color:var(--ink2);font-variant-numeric:tabular-nums}
.toc a.on .t{color:var(--accent);font-weight:600}
.toc a.on::before{content:"";position:absolute;left:0;top:10px;width:6px;height:24px;background:var(--ribbon);clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}
.preview{border-radius:var(--r2);padding:16px 18px;margin:2px 0 8px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);max-height:150px;overflow:hidden;
  font-family:var(--read-font);font-size:var(--read-size);line-height:var(--read-lh);color:var(--ink);-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent)}
.fonts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fonts button{border-radius:14px;padding:12px 6px 10px;background:var(--bg2);text-align:center;border:2px solid transparent}
.fonts button b{display:block;font-size:24px;font-weight:400;line-height:1.1}
.fonts button span{display:block;font:500 11.5px Inter;color:var(--ink2);margin-top:4px}
.fonts button.on{border-color:var(--ribbon);background:var(--card)}
.seg{display:flex;background:var(--bg2);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;min-height:42px;border-radius:9px;font-weight:600;font-size:13.5px;color:var(--ink2)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.set-row label{font-weight:600;font-size:14px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:44px;height:44px;border-radius:12px;background:var(--bg2);font:600 18px Literata}
.stepper span{min-width:44px;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink2)}
.swatches{display:flex;gap:10px}
.swatches button{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);font:600 14px Literata}
.swatches button.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:80;background:#0b0a0d;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .22s}
.lightbox.on{opacity:1;pointer-events:auto}
.lightbox .lb-top{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--sat) + 8px) 10px 8px;color:#ddd}
.lightbox .lb-art{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y}
.lightbox .lb-art>div{width:100%;max-width:1400px;aspect-ratio:8/5}
.lightbox .lb-cap{color:#e8e0d4;font:italic 16px/1.5 Literata,serif;padding:14px 22px calc(var(--sab) + 18px);text-align:center;min-height:90px}
.lightbox .lb-cap .who{display:flex;gap:8px;justify-content:center;margin-top:10px;font:500 12px Inter;color:#aaa;flex-wrap:wrap}
.lightbox .ib{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;color:#eee}
.lightbox .count{font:600 13px Inter;color:#999}

/* sync + settings */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:16px;box-shadow:var(--shadow)}
.device{display:flex;gap:14px;align-items:center}
.device .ic{width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,transparent);display:grid;place-items:center;color:var(--accent);flex:none}
.device .n{font-weight:600;font-size:16px}
.device .s{font-size:13px;color:var(--ink2);margin-top:2px}
.steps{counter-reset:s;list-style:none;padding:0;margin:14px 0 0}
.steps li{counter-increment:s;display:flex;gap:12px;padding:8px 0;color:var(--ink2);font-size:14px}
.steps li::before{content:counter(s);width:24px;height:24px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font:600 12px Inter;color:var(--ink);flex:none}
.log{margin-top:12px;font-size:13.5px;color:var(--ink2);display:flex;flex-direction:column;gap:6px}
.log .ok{color:#4f8a4f}.log .err{color:#b8443a}
.scanner{position:fixed;inset:0;z-index:85;background:#000;display:none;flex-direction:column}
.scanner.on{display:flex}
.scanner video{flex:1;width:100%;object-fit:cover}
.scanner .reticle{position:absolute;left:50%;top:45%;width:62vw;max-width:320px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:28px;box-shadow:0 0 0 9999px rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.85)}
.scanner .sc-top{position:absolute;top:0;left:0;right:0;padding:calc(var(--sat) + 10px) 12px;display:flex;justify-content:space-between;align-items:center;color:#fff;z-index:2}
.scanner .sc-hint{position:absolute;bottom:calc(var(--sab) + 40px);left:0;right:0;text-align:center;color:#fff;font-size:15px;padding:0 30px}
.field{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 14px;font:15px Inter}
.kv{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;gap:12px}
.kv span:last-child{color:var(--ink2);text-align:right}
.store-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.store-row .t{flex:1;font:15px Literata,serif;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-row button{min-height:40px;padding:0 12px;border-radius:10px;color:#b8443a;font-weight:600;font-size:13px}

/* ---------- desktop ---------- */
.desk-top{display:none}
@media (min-width:980px){
  body{font-size:14.5px}
  .tabbar,.tabbar.hidden,.status-scrim{display:none!important}
  .view{padding-bottom:40px}
  .page-title{font-size:40px;letter-spacing:-1.5px}
  .shelf{flex-wrap:wrap;overflow:visible;margin:0;padding:6px 0 0;gap:34px 26px}
  .shelf .slot::after{left:-13px;right:-13px}
  .shelf{--bw:150px}
  .hero-book .bl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:italic 17px/1.5 Literata,serif;color:var(--ink2);max-width:40em;margin-top:10px}
  .hero-book{padding:28px 32px;gap:32px}
  .hero-book .bk{--bw:170px}
  .hero-book .t{font-size:34px}
  .hero-book .s{font-size:17px}
  .home-top{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:stretch}
  .home-top .stats{flex-direction:column}
  .home-top .stats div{display:flex;flex-direction:column;justify-content:center;padding:14px 22px}
  .home-top .stats b{font-size:30px}
  .desk-top{display:flex;align-items:center;gap:14px;padding:18px 36px;position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .desk-top .brand{font:600 20px Literata,serif;display:flex;align-items:center;gap:10px}
  .desk-top .brand i{width:28px;height:28px;border-radius:8px;background:var(--accent);display:inline-block;box-shadow:inset 0 -6px 0 rgba(0,0,0,.15)}
  .desk-top nav{display:flex;gap:4px;margin-left:24px}
  .desk-top nav button{padding:9px 14px;border-radius:10px;font-weight:600;color:var(--ink2)}
  .desk-top nav button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
  .desk-top .sp{flex:1}
  .page-head{padding:34px 36px 6px;max-width:1320px;margin:0 auto}
  .section{padding:18px 36px 4px;max-width:1320px;margin:0 auto}
  .hero-strip{margin:0;padding:4px 0 8px;display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}
  .hero-card{flex:auto;max-width:none}
  .hero-card .cover{aspect-ratio:8/5}
  .list{display:grid;grid-template-columns:repeat(2,1fr);column-gap:36px}
  .row .cover{width:150px}
  .empty{max-width:560px;margin:40px auto}
  .sheet{left:auto;right:24px;bottom:24px;width:420px;border-radius:22px;transform:translateY(120%)}
  .sheet.on{transform:none}
  .toast{bottom:28px}

  /* split reader */
  .view.reader .book{display:grid;grid-template-columns:minmax(460px,1fr) minmax(520px,1.25fr);gap:0;padding-top:64px}
  .view.reader .rbar{padding:10px 18px}
  .view.reader .rbar.away{transform:none}
  .book .left{padding:10px 48px 120px 56px;max-width:760px;justify-self:end;width:100%}
  .text-col,.title-page,.end-card{padding-left:0;padding-right:0}
  figure.scene{display:none}
  .scene-panel{display:flex;flex-direction:column;position:sticky;top:64px;height:calc(100vh - 64px);padding:26px 36px 26px 20px}
  .scene-panel .stage{position:relative;flex:1;min-height:0;display:flex;align-items:center}
  .scene-panel .stack{position:relative;width:100%;aspect-ratio:8/5;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(20,10,5,.28),0 2px 6px rgba(0,0,0,.15);background:#1e1b22;cursor:zoom-in}
  .scene-panel .layer{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
  .scene-panel .layer.on{opacity:1}
  .scene-panel .cap{font:italic 17px/1.5 Literata,serif;color:var(--ink2);margin:18px 4px 0;min-height:52px}
  .scene-panel .who2{display:flex;gap:14px;margin:10px 4px 0;flex-wrap:wrap}
  .scene-panel .who2 .castp{flex-direction:row;width:auto;gap:8px;font-size:13px}
  .scene-panel .who2 .pf{width:34px;height:34px}
  .scene-panel .strip{display:flex;gap:6px;margin-top:16px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  .scene-panel .strip button{flex:none;width:78px;aspect-ratio:8/5;border-radius:6px;overflow:hidden;opacity:.5;outline:2px solid transparent;transition:.2s}
  .scene-panel .strip button.on{opacity:1;outline-color:var(--accent)}
  .scene-panel .strip button:hover{opacity:.85}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* translated stories: book fonts for Chinese / Japanese / Korean text (the Latin serifs have no CJK glyphs) */
html:lang(zh) .prose,html:lang(zh) .title-page h1,html:lang(zh) .blurb{font-family:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif}
html:lang(ja) .prose,html:lang(ja) .title-page h1,html:lang(ja) .blurb{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif}
html:lang(ko) .prose,html:lang(ko) .title-page h1,html:lang(ko) .blurb{font-family:"Noto Serif KR","Nanum Myeongjo",serif}
html:lang(zh) .blurb,html:lang(ja) .blurb,html:lang(ko) .blurb{font-style:normal}
/* comments at the end of a story */
.comments{max-width:560px;margin:34px auto 0;text-align:left}
.comments h3{font:600 18px/1.2 var(--sans,system-ui);margin:0 0 12px;display:flex;align-items:baseline;gap:8px}
.comments h3 small{font-weight:500;font-size:13px;color:var(--muted,#8a8073)}
.c-form{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.c-name,.c-form textarea{width:100%;box-sizing:border-box;font:15px/1.5 var(--sans,system-ui);color:inherit;background:var(--card,rgba(255,255,255,.6));border:1px solid var(--line,#ddd3c2);border-radius:12px;padding:10px 12px;resize:vertical}
.c-name:focus,.c-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.c-row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.c-msg{font-size:13px;color:var(--muted,#8a8073)}
.c-as{font-size:13px;color:var(--muted,#8a8073)}
.linkish{background:none;border:0;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline}
.c-item{padding:12px 0;border-top:1px solid var(--line,#ddd3c2)}
.c-head{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.c-head span{color:var(--muted,#8a8073)}
.c-item p{margin:4px 0 0;font:15px/1.55 var(--sans,system-ui);white-space:pre-wrap;overflow-wrap:anywhere}

/* ===================== HOME: My Library + Discover ===================== */
/* entrance: sections rise as they enter the screen, their covers follow one by one */
.home .rv{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.home .rv.in{opacity:1;transform:none}
.home .rv .slot,.home .rv .cat-tile,.home .rv .row-book{opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.34,1.3,.64,1);transition-delay:calc(var(--i,0) * 55ms + 80ms)}
.home .rv.in .slot,.home .rv.in .cat-tile,.home .rv.in .row-book{opacity:1;transform:none}
/* the compact bar that takes over from the big title */
.mini-head{position:fixed;left:0;right:0;top:0;z-index:30;padding:calc(var(--sat) + 12px) 20px 11px;text-align:center;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line);opacity:0;transform:translateY(-100%);transition:opacity .25s,transform .3s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.mini-head.on{opacity:1;transform:none}
.mini-head b{font:700 15px/1 Inter,sans-serif;letter-spacing:-.2px}
/* search */
.search{display:flex;align-items:center;gap:10px;margin-top:16px;height:48px;padding:0 14px;border-radius:99px;background:var(--card);box-shadow:var(--shadow);color:var(--ink3)}
.search .icon{width:20px;height:20px;flex:none}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink);font:500 15.5px Inter,sans-serif}
.search input::-webkit-search-cancel-button{display:none}
.search:focus-within{box-shadow:var(--shadow),0 0 0 2px var(--ribbon)}
.search button{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--ink3)}
.search button .icon{width:16px;height:16px}
/* spotlight carousel */
.spots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:6px 20px 18px;scroll-padding:0 20px}
.spots::-webkit-scrollbar{display:none}
.spot{position:relative;flex:none;width:min(88%,560px);min-height:232px;scroll-snap-align:center;border-radius:26px;overflow:hidden;cursor:pointer;color:#fff;background:#1c1920;isolation:isolate;display:flex;align-items:flex-end;gap:10px;padding:20px 18px 18px 20px;
  box-shadow:0 18px 40px -18px color-mix(in srgb,var(--accent) 70%,#000);transform:scale(.94);opacity:.72;transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s}
.spot.on{transform:none;opacity:1}
.spot-bg{position:absolute;inset:-12%;z-index:-2;filter:blur(22px) saturate(1.25) brightness(.62);transform:scale(1.15)}
.spot-bg>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spot-bg svg{width:100%;height:100%}
.spot-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 0% 100%,color-mix(in srgb,var(--accent) 75%,transparent),transparent 62%),linear-gradient(180deg,transparent 30%,rgba(10,8,12,.72));animation:spotDrift 16s ease-in-out infinite}
@keyframes spotDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-3%,0) scale(1.08)}}
.spot-txt{flex:1;min-width:0}
.spot .kick{font:600 10.5px Inter,sans-serif;letter-spacing:1.2px;text-transform:uppercase;opacity:.8}
.spot h3{font:600 25px/1.1 Literata,serif;margin:7px 0 6px;letter-spacing:-.3px;text-wrap:balance;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.spot p{margin:0;font:400 13.5px/1.45 Inter,sans-serif;opacity:.88;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.spot-acts{display:flex;align-items:center;gap:8px;margin-top:14px}
.spot .go{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:99px;background:#fff;color:#17141a;font:700 14px Inter,sans-serif}
.spot-book{flex:none;align-self:center;--bw:96px;transform:rotate(4deg) translateY(4px);transition:transform .6s cubic-bezier(.34,1.4,.64,1);filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.spot.on .spot-book{transform:rotate(2deg)}
.spot-book .bk{--bw:96px;pointer-events:none}
.dots{display:flex;justify-content:center;gap:6px;margin-top:-4px}
.dots i{width:6px;height:6px;border-radius:99px;background:var(--line);transition:width .3s,background .3s}
.dots i.on{width:20px;background:var(--ink)}
/* save toggle */
.save{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:99px;font:600 13.5px Inter,sans-serif;color:inherit;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.save .icon{width:18px;height:18px}
.save:active{transform:scale(.95)}
.tp-save{margin:12px auto 0;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink2)}
.tp-save.on{color:var(--ribbon)}
/* rows: reading history + search results */
.rows{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r3);box-shadow:var(--shadow);overflow:hidden}
.row-book{display:flex;align-items:center;gap:14px;padding:11px 14px;text-align:left;width:100%}
.row-book+.row-book{box-shadow:inset 0 1px 0 var(--line)}
.row-book:active{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.row-book .mini{position:relative;flex:none;width:38px;aspect-ratio:2/3;border-radius:2px 5px 5px 2px;overflow:hidden;background:#231f28;box-shadow:0 3px 8px rgba(20,14,8,.25)}
.row-book .mini .art{position:absolute;inset:0}
.row-book .mini .art svg{position:absolute;top:0;left:50%;height:100%;width:auto;transform:translateX(-50%)}
.row-book .mini .art img.manga{position:absolute;inset:0}
.rb-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rb-t b{font:600 15.5px/1.2 Literata,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-t small{font:500 12.5px Inter,sans-serif;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-book .ring{width:30px;height:30px;flex:none}
.rb-min{font:600 12.5px Inter,sans-serif;color:var(--ink3);font-variant-numeric:tabular-nums}
/* the door from My Library into Discover */
.door{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:104px;padding:16px 12px 14px 20px;border-radius:var(--r3);text-align:left;color:var(--bg);background:var(--ink);overflow:hidden;box-shadow:var(--shadow)}
.door b{display:block;font:600 24px/1.1 Literata,serif}
.door small{display:block;margin-top:6px;font:500 13px Inter,sans-serif;opacity:.7}
.door .fan{width:100px;height:84px}
.door .fan .mc{width:48px}
.door .fan .mc:nth-child(2){left:24px}.door .fan .mc:nth-child(3){left:48px}
.door:active{transform:scale(.985)}
/* first visit */
.first-run{display:flex;align-items:center;gap:16px;padding:22px 18px 22px 22px;border-radius:var(--r3);background:var(--card);box-shadow:var(--shadow)}
.fr-txt{flex:1;min-width:0}
.first-run .kick{font:600 11px Inter,sans-serif;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink3)}
.first-run h2{font:600 27px/1.1 Literata,serif;margin:8px 0 8px;letter-spacing:-.3px;display:block}
.first-run p{margin:0 0 16px;font:400 14px/1.5 Inter,sans-serif;color:var(--ink2)}
.fr-pick{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;--bw:104px}
.fr-pick .bk{transform:rotate(3deg)}
.fr-cap{font:500 12px/1.3 Inter,sans-serif;color:var(--ink3);max-width:118px;text-align:center}
.fr-cap b{color:var(--ink2)}
.btn .icon{width:18px;height:18px}
/* living covers: a slow light sweep on painted books, a lift under the mouse */
.home .bk .art::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.34) 50%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.home .rv.in .bk .art::after{animation:sheen 1.1s cubic-bezier(.22,.61,.36,1) calc(var(--i,0) * 55ms + .45s) 1}
@keyframes sheen{to{transform:translateX(120%)}}
@media (hover:hover){.home .slot .bk{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}.home .slot .bk:hover{transform:translateY(-6px) rotate(-1.5deg)}.home .slot .bk:hover .art::after{animation:sheen .9s 1}
  .spot:hover .spot-book{transform:rotate(0) translateY(-4px) scale(1.04)}.row-book:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}}
@media (min-width:980px){
  .home .page-head{max-width:1180px;margin:0 auto}
  .search{max-width:560px}
  .spots{margin:0;padding:6px 0 18px;scroll-padding:0}
  .spot{width:min(62%,720px);min-height:300px;padding:30px 30px 28px 34px}
  .spot h3{font-size:36px}.spot p{font-size:15.5px;max-width:44ch}
  .spot-book,.spot-book .bk{--bw:150px}
  .rows{max-width:720px}
  .door{max-width:720px}
  .first-run{max-width:720px;padding:32px}
  .mini-head{display:none}
}
@media (prefers-reduced-motion:reduce){.home .rv,.home .rv .slot,.home .rv .cat-tile,.home .rv .row-book{opacity:1;transform:none;transition:none}.spot{transform:none;opacity:1;transition:none}.spot-glow,.home .bk .art::after{animation:none}}
.search button[hidden],#found[hidden],#rooms[hidden]{display:none!important}

/* bolder spotlight: the story's wide painting, full-bleed, with a slow push-in while it is the centred card */
.spot.wide{min-height:clamp(300px,58vh,440px);align-items:flex-end;padding:22px 20px 20px}
.spot.wide .spot-bg{inset:0;filter:none;transform:scale(1.02);transition:transform 7s cubic-bezier(.22,.61,.36,1)}
.spot.wide.on .spot-bg{transform:scale(1.12) translate3d(-1.5%,-1%,0)}
.spot.wide .spot-bg img{object-position:50% 30%}
.spot.wide .spot-glow{animation:none;background:linear-gradient(180deg,rgba(10,8,12,.08) 0%,rgba(10,8,12,0) 28%,rgba(10,8,12,.55) 62%,rgba(10,8,12,.92) 100%),radial-gradient(90% 60% at 0% 100%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%)}
.spot.wide .spot-book{display:none}
.spot.wide h3{font-size:30px}
.spot.wide .spot-txt{transform:translateY(10px);opacity:.0;transition:transform .7s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s}
.spot.wide.on .spot-txt{transform:none;opacity:1}
@media (min-width:980px){.spot.wide{width:min(72%,900px);min-height:420px;padding:36px}.spot.wide h3{font-size:44px}}
@media (prefers-reduced-motion:reduce){.spot.wide .spot-bg,.spot.wide.on .spot-bg{transform:none;transition:none}.spot.wide .spot-txt{transform:none;opacity:1;transition:none}}

/* ===================== THE GRAND LIBRARY (spine view of My Library) ===================== */
.hall{--wood:#2a1b12;--wood2:#3a2618;--gold:#d8b46a;position:relative;background:radial-gradient(120% 60% at 50% -10%,#3b2a1c 0%,#1b120c 55%,#120c08 100%);color:#f0e6d2;overflow:hidden;min-height:100vh}
body.in-hall{background:#120c08}
.hall .page-head{position:relative;z-index:2}
.hall .eyebrow{color:rgba(240,230,210,.55)}
.hall .page-title{font:400 38px/1.05 "IM Fell English",Literata,serif;letter-spacing:0;color:var(--gold);text-shadow:0 2px 18px rgba(216,180,106,.35)}
.hall .mini-head{background:rgba(24,16,10,.82);box-shadow:0 1px 0 rgba(216,180,106,.2)}
.hall .mini-head b{color:var(--gold);font:400 17px "IM Fell English",Literata,serif}
/* candle light breathing over the hall, and dust in the air */
.hall-glow{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(40% 30% at 18% 12%,rgba(255,190,110,.22),transparent 70%),radial-gradient(36% 28% at 86% 40%,rgba(255,170,90,.14),transparent 70%),radial-gradient(50% 30% at 40% 90%,rgba(255,200,130,.10),transparent 70%);animation:candle 7s ease-in-out infinite}
@keyframes candle{0%,100%{opacity:.85;transform:scale(1)}40%{opacity:1;transform:scale(1.04)}55%{opacity:.78}70%{opacity:.95;transform:scale(1.02)}}
.motes{position:fixed;inset:0;pointer-events:none;z-index:1}
.motes i{position:absolute;left:var(--x);bottom:-10px;width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,220,160,.55);filter:blur(.4px);animation:mote var(--d) linear var(--t) infinite}
@keyframes mote{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.8}100%{transform:translate3d(30px,-105vh,0);opacity:0}}
#hallBody{position:relative;z-index:2;padding:6px 20px 30px;max-width:1140px;margin:0 auto}
.hall-cont{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;width:100%;padding:14px 18px;margin:8px 0 6px;border-radius:16px;text-align:left;color:#f0e6d2;background:linear-gradient(160deg,rgba(216,180,106,.2),rgba(216,180,106,.07));box-shadow:inset 0 0 0 1px rgba(216,180,106,.35)}
.hall-cont span{font:600 11px Inter,sans-serif;letter-spacing:1.1px;text-transform:uppercase;color:var(--gold)}
.hall-cont b{font:600 18px Literata,serif}
.hall-cont small{font:500 12.5px Inter,sans-serif;opacity:.65;margin-left:auto}
.bay{margin-top:26px}
.plaque{display:inline-flex;align-items:baseline;gap:10px;padding:7px 14px 6px;border-radius:4px;background:linear-gradient(180deg,#e2c079,#b8924a);color:#2a1b0c;box-shadow:0 2px 0 #7c5f2a,0 8px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.plaque b{font:400 17px/1 "IM Fell English",Literata,serif}
.plaque small{font:600 11px Inter,sans-serif;opacity:.7}
/* one plank: books stand on it in real depth */
.plank{position:relative;margin-top:18px;perspective:900px;perspective-origin:50% 40%;opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.plank.in{opacity:1;transform:none}
.books{display:flex;align-items:flex-end;gap:2px;height:calc(var(--h) + 8px);padding:0 6px;transform-style:preserve-3d}
.wood{height:14px;border-radius:2px;background:linear-gradient(180deg,#5a3b24,#3a2415 55%,#22140b);box-shadow:0 14px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,220,170,.25)}
.sp{position:relative;flex:none;width:var(--w);height:calc(var(--h) * var(--hk));transform-style:preserve-3d;transform-origin:100% 50%;transition:transform .95s cubic-bezier(.2,.9,.25,1),margin .95s cubic-bezier(.2,.9,.25,1)}
.plank.in .sp{animation:spDrop .75s cubic-bezier(.2,.9,.25,1) calc(var(--i) * 45ms) backwards}
@keyframes spDrop{from{opacity:0;transform:translateY(-70px) rotateZ(-3deg)}to{opacity:1;transform:none}}
.sp .side{position:absolute;inset:0;border-radius:3px 2px 2px 3px;overflow:hidden;color:#f6ecd6;text-align:center;
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(255,255,255,.14) 22%,rgba(255,255,255,0) 45%,rgba(0,0,0,.34)),linear-gradient(180deg,color-mix(in srgb,var(--accent) 78%,#1a0f08),color-mix(in srgb,var(--accent) 52%,#120a06));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 6px 10px -4px rgba(0,0,0,.6)}
.sp .st{position:absolute;inset:11% 0 11% 0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font:600 var(--fs,12.5px)/1.05 Literata,serif;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-shadow:0 1px 1px rgba(0,0,0,.5);padding:0 2px}
.sp .side .band{position:absolute;left:12%;right:12%;top:5%;height:3px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);opacity:.8}
.sp .side .band.b2{top:auto;bottom:5%}
.sp .gilt{position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#8c6a2c,#f1d58e,#8c6a2c)}
.sp .mark{position:absolute;right:22%;top:0;width:5px;background:#c0392b;clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);box-shadow:0 1px 2px rgba(0,0,0,.4)}
/* the cover is hinged on the spine's right edge and lies back into the shelf until the book is pulled */
.sp .front{position:absolute;left:100%;top:0;height:100%;width:calc(var(--h) * var(--hk) * .667);transform-origin:0 50%;transform:rotateY(90deg);backface-visibility:hidden;border-radius:2px 6px 6px 2px;overflow:hidden;pointer-events:none}
.sp .front .bk{--bw:calc(var(--h) * var(--hk) * .667);display:block;width:var(--bw);height:calc(var(--h) * var(--hk));aspect-ratio:auto;border-radius:0;box-shadow:none}
.sp.out{transform:translateZ(46px) translateY(-6px) rotateY(-88deg);margin-right:calc(var(--h) * var(--hk) * .667 + 6px);z-index:5}
.sp.out .front{pointer-events:auto;box-shadow:0 22px 34px -10px rgba(0,0,0,.75),0 0 34px -4px color-mix(in srgb,var(--accent) 60%,transparent)}
.sp.out .front::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%);transform:translateX(-130%);animation:sheen 1.2s cubic-bezier(.22,.61,.36,1) .55s 1;pointer-events:none}
/* taken down to be read: it comes off the shelf toward you before the page changes */
.sp.take{transform:translateZ(260px) translateY(-18px) rotateY(-90deg) scale(1.12);transition-duration:.52s;z-index:9}
.hall-door{margin-top:34px;background:linear-gradient(160deg,rgba(216,180,106,.22),rgba(216,180,106,.08));color:#f0e6d2;box-shadow:inset 0 0 0 1px rgba(216,180,106,.35);min-height:84px}
.hall-door b{color:var(--gold);font-family:"IM Fell English",Literata,serif;font-weight:400}
@media (hover:hover){.sp:not(.out) .side:hover{filter:brightness(1.18)}.sp:not(.out):hover{transform:translateZ(14px) translateY(-4px)}}
@media (min-width:980px){.hall .page-title{font-size:52px}.sp .st{font-size:14px}#hallBody{padding:6px 36px 40px}.hall .page-head{max-width:1140px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.hall-glow,.motes i{animation:none}.motes{display:none}.plank{opacity:1;transform:none;transition:none}.plank.in .sp{animation:none}.sp.out{transition:none}}

/* phone: app update notice, first-run setup */
.update-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:var(--r3);background:var(--ink);color:var(--bg);text-decoration:none;box-shadow:var(--shadow)}
.update-card b{display:block;font:700 15px Inter,sans-serif}
.update-card small{display:block;margin-top:4px;font:500 12.5px/1.4 Inter,sans-serif;opacity:.75}
.update-card .icon{width:20px;height:20px;flex:none}
.empty.setup .log{text-align:left;margin:4px 0 14px;max-height:180px;overflow:auto}
#setupAlt[hidden]{display:none!important}