:root{--bg:#E7E4DC;--surf:#F1EEE7;--ink:#15191C;--mut:#5B656B;--line:rgba(21,25,28,.13);--btn:#15191C;--btnt:#E7E4DC;
--top:calc(var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px) + env(safe-area-inset-top,0px));
--bot:calc(var(--tg-safe-area-inset-bottom,0px) + env(safe-area-inset-bottom,0px));
--serif:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif}
[data-theme=dark]{--bg:#0F1315;--surf:#171C1F;--ink:#E7E4DC;--mut:#8D989E;--line:rgba(231,228,220,.14);--btn:#E7E4DC;--btnt:#15191C}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);overscroll-behavior:none}
body{font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
img{-webkit-user-drag:none;-webkit-touch-callout:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* ── app shell ── */
#app{min-height:100dvh;padding:calc(var(--top) + 14px) 20px calc(var(--bot) + 96px);max-width:640px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.brand img{width:34px;height:34px;border-radius:9px}
.brand span{display:flex;align-items:baseline;gap:8px;font:400 27px/1 var(--serif)}
.brand em{font:italic 400 17px/1 var(--serif);color:var(--mut)}
.view{display:none}.view.on{display:block;animation:vin .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes vin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hello{font:400 clamp(40px,12.5vw,58px)/.98 var(--serif);letter-spacing:-.025em;margin:0 0 22px}
.sec{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:30px 0 14px}
.lede{font-size:18px;line-height:1.5;margin:0 0 22px;max-width:34ch}
.fine{font-size:13.5px;color:var(--mut);margin:18px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;background:var(--btn);color:var(--btnt);font-weight:600;font-size:16px;transition:transform .15s}
.btn:active{transform:scale(.96)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.sm{height:38px;padding:0 16px;font-size:14px}.btn.wide{width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* ── library ── */
.cont{display:flex;gap:14px;align-items:center;background:var(--surf);border-radius:22px;padding:12px;width:100%;text-align:left;box-shadow:0 0 0 1px var(--line);margin-bottom:6px}
.cont img{width:58px;height:87px;border-radius:5px;object-fit:cover;box-shadow:0 10px 18px -8px rgba(0,0,0,.5)}
.cont .t{flex:1;min-width:0}.cont small{display:block;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.cont b{display:block;font:400 22px/1.05 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cont .pr{height:4px;border-radius:9px;background:var(--line);margin-top:10px;overflow:hidden}.cont .pr i{display:block;height:100%;background:var(--ink);border-radius:9px}
.cont .go{width:40px;height:40px;border-radius:50%;background:var(--btn);color:var(--btnt);display:grid;place-items:center;font-size:18px;flex:none}
.card{display:flex;gap:16px;padding:14px;margin-bottom:14px;background:var(--surf);border-radius:24px;box-shadow:0 0 0 1px var(--line);animation:vin .5s both}
.card .cvr{flex:none;width:112px;aspect-ratio:2/3;border-radius:6px 10px 10px 6px;overflow:hidden;box-shadow:0 18px 26px -14px rgba(0,0,0,.65);background:#000;position:relative}
.card .cvr::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(0,0,0,.25) 4%,transparent 9%)}
.card .cvr img{width:100%;height:100%;object-fit:cover;display:block}
.card .tx{display:flex;flex-direction:column;min-width:0;flex:1}
.card h4{font:400 26px/1.02 var(--serif);letter-spacing:-.01em;margin:2px 0 6px}
.card .m{font-size:12.5px;color:var(--mut);margin-bottom:8px}
.card p{margin:0 0 12px;font-size:14.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .act{display:flex;gap:8px;margin-top:auto}
.card .ic2{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);display:grid;place-items:center}
.card .ic2 svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── support / about ── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{height:42px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:600;font-size:15px;transition:.2s}
.chip.on{background:var(--btn);color:var(--btnt);box-shadow:none}
.upi{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surf);border-radius:18px;padding:14px 14px 14px 18px;box-shadow:0 0 0 1px var(--line);margin-bottom:12px}
.upi small{display:block;font-size:12px;color:var(--mut)}.upi code{font:600 16px var(--sans);word-break:keep-all;display:block}
.qrbox{margin-top:16px;background:var(--surf);border-radius:18px;padding:14px 18px;box-shadow:0 0 0 1px var(--line)}
.qrbox summary{font-weight:600;cursor:pointer;list-style:none}.qrbox summary::-webkit-details-marker{display:none}
.qrbox img{display:block;margin:14px auto 8px;width:min(220px,70%);height:auto;border-radius:10px;background:#fff}
.qrbox p{font-size:13px;color:var(--mut);margin:0;text-align:center}
.how{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:10px}
.how li{padding:14px 16px;background:var(--surf);border-radius:16px;box-shadow:0 0 0 1px var(--line);font-size:15.5px}

/* ── bottom tabs ── */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;gap:4px;padding:8px 14px calc(var(--bot) + 8px);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--line)}
.tabs button{flex:1;max-width:160px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:11.5px;font-weight:600;color:var(--mut);border-radius:14px;transition:color .2s}
.tabs svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs button.on{color:var(--ink)}.tabs button.on svg{stroke-width:2.2}

.toast{position:fixed;left:50%;bottom:calc(var(--bot) + 96px);transform:translate(-50%,20px);background:var(--btn);color:var(--btnt);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.3s;z-index:90;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ═════════ reader ═════════ */
#reader{position:fixed;inset:0;z-index:60;background:#0B0E10;color:#E7E4DC;display:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
#reader.open{display:block;animation:rin .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes rin{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.rtop,.rbot{position:absolute;left:0;right:0;z-index:4;display:flex;align-items:center;gap:10px;transition:opacity .35s,transform .35s}
.rtop{top:0;padding:calc(var(--top) + 10px) 12px 22px;background:linear-gradient(#0B0E10 55%,transparent)}
.rbot{bottom:0;padding:22px 12px calc(var(--bot) + 12px);background:linear-gradient(transparent,#0B0E10 45%)}
#reader.hide .rtop{opacity:0;transform:translateY(-10px);pointer-events:none}
#reader.hide .rbot{opacity:0;transform:translateY(10px);pointer-events:none}
#reader .ic{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:17px;font-weight:600;flex:none;color:#E7E4DC}
.rt{flex:1;min-width:0}.rt b{display:block;font:400 21px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rt small{font-size:12px;color:#8D989E}
.rbot output{font:600 13px var(--sans);min-width:66px;text-align:center;color:#C9D0D4;font-variant-numeric:tabular-nums}
#seek{flex:1;min-width:0;height:28px;accent-color:#E7E4DC}
.stage{position:absolute;inset:0;padding:calc(var(--top) + 64px) 8px calc(var(--bot) + 74px);display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.pgw{position:relative;flex:none;transform-origin:50% 50%;will-change:transform;box-shadow:0 30px 60px -24px #000;border-radius:2px;overflow:hidden;background:#F3F0E4}
.pgw canvas{display:block;width:100%;height:100%;pointer-events:none}
.wm{position:absolute;inset:0;pointer-events:none;opacity:.08;background-size:300px 190px}
.rerr{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;background:#0B0E10;color:#C9D0D4}
.rerr.on{display:flex}.rerr .btn{background:#E7E4DC;color:#15191C}

/* ═════════ loading screen ═════════ */
#splash{position:fixed;inset:0;z-index:200;background:#0B0E10;color:#E7E4DC;display:grid;place-items:center;transition:transform .85s cubic-bezier(.77,0,.18,1),border-radius .85s;border-radius:0;overflow:hidden}
#splash::before{content:"";position:absolute;width:140vmax;height:140vmax;left:50%;top:42%;translate:-50% -50%;background:radial-gradient(closest-side,rgba(231,228,220,.10),transparent 70%);animation:glow 3.6s ease-in-out infinite}
@keyframes glow{50%{opacity:.45;scale:1.12}}
#splash.out{transform:translateY(-104%);border-radius:0 0 50% 50%/0 0 9% 9%}
.sp-in{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 32px}
.sp-art{position:relative;width:180px;height:128px;margin-bottom:34px;display:grid;place-items:center}
.bk{position:absolute;inset:0;perspective:760px;transform-style:preserve-3d;transition:opacity .45s,transform .6s cubic-bezier(.5,0,.8,.4)}
.bk i{position:absolute;display:block}
.bk .bl,.bk .br{top:6px;bottom:6px;width:calc(50% - 1px);background:#E7E4DC;box-shadow:0 22px 34px -18px #000}
.bk .bl{left:0;border-radius:6px 0 0 6px}.bk .br{right:0;border-radius:0 6px 6px 0}
.bk .bl::before,.bk .br::before,.bk .pf::before{content:"";position:absolute;inset:14px 12px;background:repeating-linear-gradient(transparent 0 7px,rgba(21,25,28,.3) 7px 8px);border-radius:1px}
.bk .bl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 70%,rgba(0,0,0,.2))}
.bk .br::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,transparent 70%,rgba(0,0,0,.14))}
.bk .pf{top:6px;bottom:6px;left:50%;width:calc(50% - 1px);background:#F3F0E4;border-radius:0 6px 6px 0;transform-origin:0 50%;animation:flip 2.7s cubic-bezier(.55,.1,.3,1) infinite}
.bk .f1{animation-delay:0s;--z:5px}.bk .f2{animation-delay:.22s;--z:4px}.bk .f3{animation-delay:.44s;--z:3px}.bk .f4{animation-delay:.66s;--z:2px}.bk .f5{animation-delay:.88s;--z:1px}
@keyframes flip{0%{transform:rotateY(0) translateZ(var(--z));opacity:1;filter:brightness(1)}20%{filter:brightness(.82)}38%{transform:rotateY(-178deg) translateZ(var(--z));opacity:1;filter:brightness(1)}82%{transform:rotateY(-178deg) translateZ(var(--z));opacity:1}100%{transform:rotateY(-178deg) translateZ(var(--z));opacity:0}}
.bk .spine{left:calc(50% - 2px);top:4px;bottom:4px;width:4px;background:#15191C;border-radius:2px;z-index:9}
.sp-logo{position:absolute;width:96px;height:96px;border-radius:24px;opacity:0;transform:scale(.55) rotate(-8deg);box-shadow:0 0 0 1px rgba(231,228,220,.2),0 24px 50px -16px #000;transition:opacity .4s .25s,transform .75s .2s cubic-bezier(.2,1.5,.4,1)}
#splash.ready .bk{opacity:0;transform:scale(.7)}
#splash.ready .sp-logo{opacity:1;transform:none}
.sp-word{display:flex;margin:0;font:400 64px/1 var(--serif);letter-spacing:-.02em}
.sp-word span{display:inline-block;opacity:0;transform:translateY(26px);filter:blur(6px);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}
.sp-word span:nth-child(1){animation-delay:.15s}.sp-word span:nth-child(2){animation-delay:.23s}.sp-word span:nth-child(3){animation-delay:.31s}.sp-word span:nth-child(4){animation-delay:.39s}.sp-word span:nth-child(5){animation-delay:.47s}
@keyframes rise{to{opacity:1;transform:none;filter:none}}
.sp-by{margin:6px 0 0;font:italic 400 24px/1 var(--serif);color:#8D989E;opacity:0;animation:fadeup .8s .8s forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sp-bar{width:150px;height:2px;margin-top:38px;background:rgba(231,228,220,.14);border-radius:2px;overflow:hidden;opacity:0;animation:fadeup .6s 1s forwards}
.sp-bar i{display:block;height:100%;width:6%;background:#E7E4DC;border-radius:2px;transition:width .5s cubic-bezier(.3,.7,.2,1)}
.sp-hint{margin:14px 0 0;font-size:12.5px;letter-spacing:.06em;color:#8D989E;opacity:0;animation:fadeup .6s 1.15s forwards}
@media(prefers-reduced-motion:reduce){.bk .pf,#splash::before{animation:none}.sp-word span,.sp-by,.sp-bar,.sp-hint{animation-duration:.01s;animation-delay:0s}#splash{transition-duration:.2s}}