/* গল্পে গল্পে Vocabulary — "neel-holud kantha" identity.
   Layout: one phone-width column (max 600px) with a fixed bottom tab bar; the
   home header and the paywall are deep indigo with running-stitch rows, every
   other surface stays quiet so the turmeric word-highlights carry the colour. */
:root{
  --bg:#ECEEF5;          /* desk */
  --surface:#FFFFFF;
  --paper:#FCFBF8;       /* reading page */
  --ink:#17204A;         /* neel */
  --ink-2:#465078;
  --muted:#767D9C;
  --line:#DCE0EC;
  --chip:#E4E8F3;
  --neel:#1A2457;        /* header ground in both themes */
  --neel-2:#2A3677;
  --turmeric:#F2B705;
  --hl:#FFDF6B;          /* word highlight */
  --hl-seen:#A9E3C0;
  --sindoor:#D2334B;
  --leaf:#1C8656;
  --leaf-bg:#E2F4EA;
  --rose-bg:#FBE6E9;
  --violet:#6A4FC2;
  --shadow:0 1px 0 rgba(23,32,74,.05),0 14px 34px -22px rgba(23,32,74,.55);
  --display:'Galada','Tiro Bangla',serif;
  --story:'Tiro Bangla','Noto Serif Bengali',Georgia,serif;
  --ui:'Anek Bangla','Hind Siliguri','Noto Sans Bengali',system-ui,sans-serif;
  --en:'Literata','Tiro Bangla',Georgia,serif;
  --r:18px;
  --nav-h:68px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.4,.5,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C1029;--surface:#151B3D;--paper:#171E44;--ink:#EDEFFA;--ink-2:#C2C8E6;--muted:#8F97BE;--line:#283063;--chip:#222A57;
  --neel:#111845;--neel-2:#1F2A66;--hl:#9A7310;--hl-seen:#2F8F62;--sindoor:#FF5C72;--leaf:#4CD08F;--leaf-bg:#16392B;--rose-bg:#3E1A27;--violet:#9C84F2;
  --shadow:0 1px 0 rgba(0,0,0,.2),0 18px 40px -24px rgba(0,0,0,.8);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0C1029;--surface:#151B3D;--paper:#171E44;--ink:#EDEFFA;--ink-2:#C2C8E6;--muted:#8F97BE;--line:#283063;--chip:#222A57;
  --neel:#111845;--neel-2:#1F2A66;--hl:#9A7310;--hl-seen:#2F8F62;--sindoor:#FF5C72;--leaf:#4CD08F;--leaf-bg:#16392B;--rose-bg:#3E1A27;--violet:#9C84F2;
  --shadow:0 1px 0 rgba(0,0,0,.2),0 18px 40px -24px rgba(0,0,0,.8);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);overscroll-behavior-y:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--turmeric);outline-offset:2px;border-radius:8px}
h1,h2,h3{text-wrap:balance;margin:0}
.en{font-family:var(--en)}
[hidden]{display:none!important}

/* ---------- shell ---------- */
#view{max-width:600px;margin:0 auto;padding:0 16px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom,0px));min-height:100vh}
#view.full{padding-bottom:40px}
.screen{display:grid;gap:18px;padding-top:14px}
.screen > *{min-width:0}
.enter > *{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes rise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.04)}100%{transform:none}}
@keyframes shimmer{to{background-position:-200% 0}}
::view-transition-old(root){animation:.18s ease both vt-out}
::view-transition-new(root){animation:.32s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:8;display:flex;align-items:center;gap:10px;
  margin:0 -16px;padding:10px 16px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.topbar h1{font-size:20px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow);flex:none;transition:transform .15s}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:20px;height:20px}
.title-xl{font-size:clamp(26px,7vw,32px);font-weight:700;line-height:1.15;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:15px;margin:0}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- buttons, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:13px 20px;font-weight:700;font-size:16px;
  background:var(--ink);color:var(--bg);transition:transform .15s var(--ease),filter .2s,opacity .2s;position:relative;overflow:hidden;min-height:48px}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:default}
.btn svg{width:19px;height:19px}
.btn.block{width:100%}
.btn.gold{background:var(--turmeric);color:#1A1A2E}
.btn.sindoor{background:var(--sindoor);color:#fff}
.btn.leaf{background:var(--leaf);color:#fff}
.btn.soft{background:var(--chip);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.sm{padding:8px 14px;min-height:38px;font-size:14.5px;border-radius:12px}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:ripple .55s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border-radius:999px;padding:8px 14px;font-size:14.5px;font-weight:600;background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.chip-n{opacity:.6;font-weight:500;margin-left:2px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--chip);border-radius:14px;padding:4px;gap:4px}
.seg button{border-radius:11px;padding:9px 8px;font-weight:600;font-size:14.5px;color:var(--ink-2);transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;font-size:13.5px;font-weight:600}
.pill svg{width:15px;height:15px}

.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.card h3{font-size:18px;font-weight:700}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.section-head h2{font-size:19px;font-weight:700}
.link{color:var(--sindoor);font-weight:600;font-size:14.5px}

/* ---------- bottom nav ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;justify-content:center;padding:0 10px env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);
  transition:transform .35s var(--ease)}
.nav.hide{transform:translateY(110%)}
.nav-inner{display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:600px;height:var(--nav-h)}
.nav button{display:grid;justify-items:center;align-content:center;gap:3px;font-size:12px;font-weight:600;color:var(--muted);position:relative}
.nav button svg{width:23px;height:23px;transition:transform .3s var(--spring)}
.nav button[aria-current="page"]{color:var(--ink)}
.nav button[aria-current="page"] svg{transform:translateY(-2px) scale(1.08)}
.nav button[aria-current="page"]::before{content:"";position:absolute;top:8px;width:46px;height:30px;border-radius:12px;background:var(--chip);z-index:-1;animation:pop .35s var(--spring)}

/* ---------- kantha header (home, paywall, welcome) ---------- */
.kantha{position:relative;overflow:hidden;color:#fff;background-color:var(--neel);border-radius:0 0 28px 28px;margin:0 -16px;padding:18px 20px 24px;
  isolation:isolate}
.kantha::before{content:"";position:absolute;inset:-40px;z-index:-1;opacity:.55;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 9px,transparent 9px 18px),
    repeating-linear-gradient(90deg,rgba(242,183,5,.5) 0 9px,transparent 9px 18px);
  background-size:100% 2px,100% 2px;background-repeat:repeat-y;
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 22px);mask:repeating-linear-gradient(180deg,#000 0 2px,transparent 2px 22px);
  animation:stitch 26s linear infinite}
.kantha::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 85% 0%,var(--neel-2) 0%,transparent 60%),linear-gradient(180deg,transparent 40%,rgba(0,0,0,.25))}
@keyframes stitch{to{transform:translateX(36px)}}
.kantha .top,.ghat .top,.shelf-hero .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{font-family:var(--display);font-size:26px;line-height:1;color:#fff;position:relative}
.brand small{display:block;font-family:var(--en);font-style:italic;font-size:13px;color:var(--turmeric);letter-spacing:.04em;margin-top:2px}
.hdr-pills{display:flex;gap:8px}
.hdr-pills .pill{background:rgba(255,255,255,.12);color:#fff}
.hdr-pills .pill.flame svg{color:#FFB547}
.greet{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.greet h1{font-size:clamp(24px,6.5vw,30px);font-weight:700;line-height:1.2}
.greet p{margin:6px 0 0;color:#C9CFEE;font-size:15px}
.ring{--p:0;width:86px;height:86px;flex:none;position:relative;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}
.ring .track{stroke:rgba(255,255,255,.14)}
.ring .val{stroke:var(--turmeric);stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:calc(226 - 226 * var(--p));transition:stroke-dashoffset 1.1s var(--ease)}
.ring b{font-size:20px;line-height:1}
.ring span{font-size:11px;color:#C9CFEE;display:block;text-align:center}

.banner{text-align:left;width:100%;display:flex;align-items:center;gap:12px;border-radius:16px;padding:12px 14px;background:var(--surface);box-shadow:var(--shadow);position:relative;overflow:hidden}
.banner .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--chip)}
.banner .ic svg{width:21px;height:21px}
.banner .tx{flex:1;min-width:0;font-size:14.5px;line-height:1.45}
.banner .tx b{display:block;font-size:15.5px}
.banner.trial .ic{background:color-mix(in srgb,var(--turmeric) 22%,transparent);color:#B88600}
.banner.over .ic{background:var(--rose-bg);color:var(--sindoor)}
.banner.prem .ic{background:var(--leaf-bg);color:var(--leaf)}
.banner.inst .ic{background:color-mix(in srgb,var(--indigo,#1A2457) 14%,transparent);color:var(--ink)}
.countdown{font-variant-numeric:tabular-nums}

/* continue reading */
.cont{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;text-align:left;width:100%}
.cover{--c:#C98A00;aspect-ratio:3/4;width:100%;max-width:100%;border-radius:12px 16px 16px 12px;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 92%,#fff) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 55%,#000) 100%);
  box-shadow:inset 6px 0 0 rgba(0,0,0,.18),0 12px 22px -14px color-mix(in srgb,var(--c) 80%,#000)}
.cover::before{content:"";position:absolute;inset:10px 10px 10px 16px;border:2px dashed rgba(255,255,255,.55);border-radius:6px}
.cover .num{position:absolute;right:12px;bottom:4px;font-family:var(--display);font-size:52px;line-height:1;opacity:.9}
.cover .g{position:absolute;left:22px;top:18px;right:14px;font-size:11.5px;font-weight:600;letter-spacing:.02em;line-height:1.3;opacity:.92}
.cover .lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,14,40,.42);backdrop-filter:grayscale(.6)}
.cover .lock svg{width:28px;height:28px}
/* Small covers (next-story card) shrink the label and number so they never collide. */
.cover{container-type:inline-size}
@container (max-width:100px){.cover .num{font-size:44px}}
@container (max-width:84px){.cover .num{font-size:34px;right:8px;bottom:4px}.cover .g{font-size:8.5px;left:19px;top:15px;right:12px}}
.cont h3{font-family:var(--story);font-weight:400;font-size:21px;line-height:1.3;margin:4px 0 8px}
.bar{height:7px;border-radius:7px;background:var(--chip);overflow:hidden}
.bar i{display:block;height:100%;border-radius:7px;background:var(--c,var(--leaf));width:0;transition:width 1s var(--ease)}

/* word of the day */
.wotd{perspective:1000px}
.wotd-in{position:relative;min-height:150px;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.wotd.flip .wotd-in{transform:rotateY(180deg)}
.wotd-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r);padding:18px;display:grid;align-content:center;gap:4px;
  background:var(--surface);box-shadow:var(--shadow)}
.wotd-back{transform:rotateY(180deg);background:var(--paper)}
.wotd .w-big{font-family:var(--en);font-weight:700;font-size:34px;line-height:1.1}
.wotd .hint{font-size:13.5px;color:var(--muted)}
.wotd .bn-big{font-family:var(--story);font-size:22px;line-height:1.4}
.hl-stroke{background:linear-gradient(transparent 58%,var(--hl) 58%,var(--hl) 92%,transparent 92%);padding:0 2px}

/* quick actions */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qa button{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;text-align:left;display:grid;gap:10px;transition:transform .2s var(--ease)}
.qa button:active{transform:scale(.97)}
.qa .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center}
.qa .ic svg{width:22px;height:22px}
.qa b{font-size:16px}
.qa small{display:block;color:var(--muted);font-size:13px;margin-top:-6px}

/* shelf */
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:132px;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 10px;scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.shelf button{scroll-snap-align:start;text-align:left;display:grid;gap:8px;transition:transform .25s var(--ease)}
.shelf button:active{transform:scale(.96)}
.shelf .t{font-family:var(--story);font-size:15.5px;line-height:1.3}

/* library */
.lib{display:grid;gap:14px}
.lib-item{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:12px;text-align:left;width:100%;transition:transform .2s var(--ease)}
.lib-item:active{transform:scale(.98)}
.lib-item h3{font-family:var(--story);font-weight:400;font-size:20px;line-height:1.3;margin:2px 0 6px}
.lib-item .meta{font-size:13.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}

/* ---------- reader ---------- */
.read-progress{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:3px;background:var(--turmeric);z-index:12;width:0;transition:width .1s linear}
.story-head{display:grid;gap:10px;padding-top:6px}
.genre{justify-self:start;font-size:13.5px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border-radius:999px;padding:4px 12px}
.story-head h2{font-family:var(--story);font-weight:400;font-size:clamp(28px,7.5vw,38px);line-height:1.22}
.story-meta{display:flex;flex-wrap:wrap;gap:8px 14px;color:var(--muted);font-size:14px}
.page{background:var(--paper);border-radius:22px;box-shadow:var(--shadow);padding:22px 20px 26px 34px;position:relative}
.page::before{content:"";position:absolute;top:18px;bottom:18px;left:18px;width:0;border-left:2px dashed color-mix(in srgb,var(--sindoor) 55%,transparent)}
.story-body{font-family:var(--story);font-size:var(--fs,19px);line-height:1.95;max-width:66ch}
.story-body p{margin:0 0 1.1em}
.story-body p:last-child{margin:0}
/* inline, not inline-block: the highlight then hugs the glyphs instead of the
   button's tall line box, which pushed the yellow band below the word. */
.w{display:inline;font-family:var(--en);font-weight:600;font-size:.93em;line-height:inherit;padding:.08em .3em;margin:0 1px;border-radius:5px;color:var(--ink);position:relative;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(transparent 14%,var(--hl) 14%,var(--hl) 86%,transparent 86%) no-repeat 0 0/100% 100%;transition:background .25s,color .25s,transform .2s var(--spring)}
.w:active{transform:scale(.94)}
.w.seen{background-image:linear-gradient(transparent 14%,var(--hl-seen) 14%,var(--hl-seen) 86%,transparent 86%)}
.w.active{background:var(--ink);color:var(--bg)}
.w.rep::after{content:"";position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--sindoor)}
.gl{display:none;font-family:var(--ui);font-size:.72em;color:var(--muted);margin-left:2px}
.story-body.gloss .gl{display:inline}
.reader-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bank{display:flex;flex-wrap:wrap;gap:8px}
.wchip{border-radius:10px;padding:7px 12px;font-family:var(--en);font-weight:600;font-size:15px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);display:inline-flex;gap:6px;align-items:center;transition:transform .2s var(--spring)}
.wchip:active{transform:scale(.94)}
.wchip.seen{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--leaf) 60%,transparent);background:var(--leaf-bg)}
.wchip .star{color:#C98A00;font-size:12px}
.teaser{position:relative;max-height:220px;overflow:hidden}
.teaser::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(transparent,var(--paper))}

/* ---------- quiz / test options ---------- */
.q-card{display:grid;gap:12px}
.q-word{font-family:var(--en);font-weight:700;font-size:32px;line-height:1.1}
.opts{display:grid;gap:10px}
.opt{text-align:left;border-radius:14px;padding:14px 16px;font-size:16.5px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);display:flex;gap:12px;align-items:center;transition:background .2s,box-shadow .2s,transform .15s}
.opt:active:not(:disabled){transform:scale(.98)}
.opt .k{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--chip);font-weight:700;font-size:14px;flex:none}
.opt.right{background:var(--leaf-bg);box-shadow:inset 0 0 0 2px var(--leaf);animation:pop .4s var(--spring)}
.opt.right .k{background:var(--leaf);color:#fff}
.opt.wrong{background:var(--rose-bg);box-shadow:inset 0 0 0 2px var(--sindoor);animation:shake .35s}
.opt.wrong .k{background:var(--sindoor);color:#fff}
.opt.sel{box-shadow:inset 0 0 0 2px var(--ink);background:var(--chip)}
.opt.sel .k{background:var(--ink);color:var(--bg)}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.dots{display:flex;gap:6px}
.dots i{height:6px;flex:1;border-radius:6px;background:var(--chip);transition:background .3s}
.dots i.ok{background:var(--leaf)}.dots i.no{background:var(--sindoor)}.dots i.cur{background:var(--ink)}

/* ---------- flashcards ---------- */
.deck{position:relative;height:380px;margin-top:6px;perspective:1200px;touch-action:pan-y}
.fc{position:absolute;inset:0;transition:transform .45s var(--ease),opacity .3s}
/* Cards under the top one stay opaque: a see-through second card let the third
   card's word show through it while the top card flew away. The third card is
   only the stack's edge, so its word is hidden. */
.fc.under1{transform:translateY(14px) scale(.95)}
.fc.under2{transform:translateY(28px) scale(.9);opacity:.55}
.fc.under2 .fc-face > *{visibility:hidden}
/* next card slides up from the stack after an answer */
.fc.top.deal{animation:deal .32s var(--ease) backwards}
@keyframes deal{from{transform:translateY(14px) scale(.95)}}
.fc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s var(--ease)}
.fc.flip .fc-in{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:24px;padding:26px;display:grid;align-content:center;justify-items:center;text-align:center;gap:8px;
  background:var(--surface);box-shadow:var(--shadow),inset 0 0 0 1.5px var(--line)}
.fc-face::before{content:"";position:absolute;inset:12px;border:2px dashed var(--line);border-radius:16px;pointer-events:none}
.fc-back{transform:rotateY(180deg);background:var(--paper)}
.fc-word{font-family:var(--en);font-weight:700;font-size:clamp(36px,10vw,48px);line-height:1.1}
.fc-pos{color:var(--muted);font-size:14px}
.fc-hint{color:var(--muted);font-size:13.5px;margin-top:22px;display:flex;gap:6px;align-items:center}
.fc-hint svg{width:16px;height:16px}
.fc-bn{font-family:var(--story);font-size:24px;line-height:1.4}
.fc-en{color:var(--ink-2);font-size:14.5px}
.fc-ex{color:var(--ink-2);font-size:14.5px;font-style:italic;margin-top:6px}
.stamp{position:absolute;top:24px;padding:4px 12px;border-radius:10px;font-weight:800;font-size:18px;border:3px solid;opacity:0;z-index:3;transition:opacity .1s}
.stamp.yes{left:22px;color:var(--leaf);transform:rotate(-12deg)}
.stamp.no{right:22px;color:var(--sindoor);transform:rotate(12deg)}
.fc-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fc-count{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}

/* ---------- word sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(8,12,34,.5);opacity:0;pointer-events:none;transition:opacity .3s;z-index:30}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:640px;max-height:90vh;z-index:31;display:flex;flex-direction:column;background:var(--paper);
  border-radius:26px 26px 0 0;transform:translateY(105%);transition:transform .45s var(--spring);box-shadow:0 -20px 50px -20px rgba(0,0,0,.5)}
.sheet:not(.open){visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
.sheet.open{transform:none}
.sheet.drag{transition:none}
.grip{width:46px;height:5px;border-radius:5px;background:var(--line);margin:10px auto 2px;flex:none}
.sheet-scroll{overflow-y:auto;padding:10px 22px 18px;overscroll-behavior:contain}
.sheet-foot{flex:none;display:flex;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.sheet-foot .btn{flex:1}
.sheet-foot .nav-b{flex:0 0 50px;padding:0}
.wh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.wh h3{font-family:var(--en);font-weight:700;font-size:clamp(34px,9vw,44px);line-height:1.05}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tags span{background:var(--chip);border-radius:8px;padding:3px 10px;font-size:13.5px;color:var(--ink-2)}
.tags .rep{background:var(--rose-bg);color:var(--sindoor)}
.bn-mean{font-family:var(--story);font-size:25px;line-height:1.45;margin:18px 0 4px;padding:4px 0 4px 14px;border-left:4px solid var(--turmeric)}
.en-mean{color:var(--ink-2);font-size:15.5px;margin:0}
.blk{margin-top:22px;display:grid;gap:8px}
.blk h4{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ctx{font-family:var(--story);font-size:17px;line-height:1.8;background:var(--surface);border-radius:14px;padding:12px 16px;margin:0;box-shadow:inset 0 0 0 1px var(--line)}
.ctx mark{background:var(--hl);color:var(--ink);padding:0 3px;border-radius:4px;font-family:var(--en);font-weight:600}
.ctx small{display:block;font-family:var(--ui);font-size:12.5px;color:var(--muted)}
.ex{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ex li{border-left:3px dashed var(--line);padding:0 0 0 12px}
.ex .e{font-family:var(--en);font-size:16px;line-height:1.55}
.ex .e b{background:linear-gradient(transparent 60%,var(--hl) 60%);font-weight:700}
.ex .b{font-family:var(--story);font-size:15px;color:var(--muted)}
.sa{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tagl{display:flex;flex-wrap:wrap;gap:6px}
.tg{font-family:var(--en);font-size:14.5px;border-radius:8px;padding:3px 10px}
.tg.s{background:var(--leaf-bg);color:var(--leaf)}
.tg.a{background:var(--rose-bg);color:var(--sindoor)}
.tip{background:color-mix(in srgb,var(--turmeric) 20%,var(--paper));border-radius:6px 16px 16px 16px;padding:14px 16px;font-size:15.5px;line-height:1.65;position:relative}
.tip::before{content:"";position:absolute;top:-6px;left:16px;width:50px;height:12px;background:color-mix(in srgb,var(--sindoor) 35%,transparent);transform:rotate(-3deg)}

/* ---------- mock test ---------- */
.rules{display:grid;gap:10px}
.rules li{display:flex;gap:10px;align-items:flex-start}
.rules ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rules svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--leaf)}
.mt-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--neel);color:#fff;border-radius:0 0 18px 18px;margin:0 -16px;padding:12px 18px}
.mt-timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:19px;display:flex;gap:6px;align-items:center}
.mt-timer svg{width:18px;height:18px}
.mt-timer.low{color:#FFB3BE;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.mt-type{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sindoor)}
.mt-text{font-size:16.5px;line-height:1.6}
.mt-word{font-family:var(--en);font-weight:700;font-size:32px}
.mt-sent{font-family:var(--en);font-size:18px;line-height:1.7;background:var(--surface);border-radius:14px;padding:12px 16px;box-shadow:inset 0 0 0 1px var(--line)}
.blank{display:inline-block;border-bottom:2.5px solid var(--ink);min-width:80px;color:transparent}
.mt-ctrl{display:flex;flex-wrap:wrap;gap:8px}
.mt-ctrl .btn{flex:1 1 auto}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:7px}
.pal{height:42px;border-radius:11px;font-weight:700;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);font-variant-numeric:tabular-nums}
.pal.ans{background:var(--leaf);color:#fff;box-shadow:none}
.pal.rev{background:var(--violet);color:#fff;box-shadow:none}
.pal.cur{outline:3px solid var(--turmeric);outline-offset:1px}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.score-ring{--p:0;position:relative;width:170px;height:170px;margin:0 auto;display:grid;place-items:center;text-align:center}
.score-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.score-ring circle{fill:none;stroke-width:12}
.score-ring .track{stroke:var(--chip)}
.score-ring .val{stroke:var(--c,var(--leaf));stroke-linecap:round;stroke-dasharray:471;stroke-dashoffset:calc(471 - 471 * var(--p));transition:stroke-dashoffset 1.4s var(--ease)}
.score-ring b{font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.score-ring span{color:var(--muted);font-size:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stat{background:var(--surface);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:13.5px}
.rv{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--line);font-size:15.5px}
.rv .q{font-size:17px}
.rv .q b{font-family:var(--en)}
.rv .you{color:var(--sindoor);font-weight:700}
.rv .ok{color:var(--leaf);font-weight:700}
.rv .ex2{color:var(--muted);font-size:14.5px}

/* ---------- index ---------- */
.search{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:16px;padding:0 14px;box-shadow:var(--shadow)}
.search svg{width:20px;height:20px;color:var(--muted);flex:none}
.search input{flex:1;min-width:0;border:0;background:transparent;padding:14px 0;font-size:16.5px;outline:none}
.rows{display:grid;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);width:100%;transition:background .2s}
.row:last-child{border-bottom:0}
.row:active{background:var(--chip)}
.row .rw{font-family:var(--en);font-weight:700;font-size:18px}
.row .rb{grid-column:1;font-size:14.5px;color:var(--ink-2);font-family:var(--story)}
.row .rs{grid-row:1/3;grid-column:2;display:flex;gap:4px;align-items:center}
.row .rs i{width:9px;height:9px;border-radius:50%}
.empty{color:var(--muted);text-align:center;padding:26px 10px;line-height:1.7}

/* ---------- profile ---------- */
.prof{display:flex;align-items:center;gap:14px}
.avatar{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:26px;font-weight:700;color:#fff;flex:none;
  background:conic-gradient(from 200deg,var(--sindoor),var(--turmeric),var(--leaf),var(--neel-2),var(--sindoor))}
.avatar span{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--neel)}
.prof h2{font-size:22px}
.sp{display:grid;grid-template-columns:minmax(0,1fr) 90px 44px;gap:10px;align-items:center;padding:8px 0;font-size:14.5px}
.sp .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--story)}
.sp .n{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.trend{display:block;width:100%;height:90px}
.hist{display:grid;gap:8px}
.hist-row{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;background:var(--surface);border-radius:14px;padding:10px 14px;box-shadow:inset 0 0 0 1px var(--line)}
.hist-row b{font-size:22px;min-width:52px;grid-row:1/3;font-variant-numeric:tabular-nums}
.hist-row span{font-size:13.5px;color:var(--muted)}
.lb{display:grid;gap:8px}
.lb-row{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.lb-row.me{box-shadow:inset 0 0 0 2px var(--turmeric)}
.lb-row .rk{font-weight:800;font-size:18px;text-align:center;color:var(--muted)}
.lb-row:nth-child(1) .rk{color:#D29A00}.lb-row:nth-child(2) .rk{color:#8C96B0}.lb-row:nth-child(3) .rk{color:#B5713F}
.lb-row .sc{font-weight:800;text-align:right}
.lb-row .sc small{display:block;font-weight:500;color:var(--muted);font-size:12.5px}
.setting{display:grid;gap:8px}
.setting label{font-size:14px;font-weight:600;color:var(--muted)}

/* ---------- paywall ---------- */
.pw-hero{text-align:left;padding-bottom:30px}
.pw-hero h1{font-size:clamp(28px,7.5vw,36px);line-height:1.15;font-weight:800;margin-top:20px}
.pw-hero h1 em{font-style:normal;color:var(--turmeric)}
.pw-hero p{color:#C9CFEE;margin:10px 0 0;font-size:15.5px;max-width:42ch}
/* paywall hero: a night-blue room with the library's shelf under a lamp */
.shelf-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;margin:0 -16px;padding:18px 20px 0;border-radius:0 0 28px 28px;
  background:radial-gradient(90% 70% at 88% -12%,rgba(122,96,255,.55) 0%,transparent 62%),radial-gradient(70% 45% at 50% 108%,rgba(242,183,5,.28) 0%,transparent 70%),linear-gradient(180deg,#0B1033 0%,#1A2457 100%)}
.shelf-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;pointer-events:none;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 34% 8%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 62% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 78% 40%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 92% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 48% 36%,#fff 50%,transparent 51%)}
.pw-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pw-stats span{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);font-size:13.5px;color:#DDE2FF}
.pw-stats b{font:800 17px/1 var(--ui);color:var(--turmeric)}
.bookshelf{display:grid;gap:16px;margin:24px -6px 0;padding-bottom:44px}
.bookshelf .row{position:relative;display:flex;align-items:flex-end;gap:3px;height:56px;padding:0 8px}
.bookshelf .row::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:7px;border-radius:3px;background:linear-gradient(180deg,#C98A4B,#7A4A22);box-shadow:0 5px 12px rgba(0,0,0,.45)}
.bk{position:relative;flex:1;min-width:3px;height:var(--h);border-radius:2px 2px 1px 1px;
  background:linear-gradient(180deg,transparent 12%,rgba(255,226,140,.55) 12% 16%,transparent 16% 82%,rgba(255,226,140,.4) 82% 85%,transparent 85%),linear-gradient(90deg,rgba(0,0,0,.28) 0 16%,transparent 16% 84%,rgba(0,0,0,.28) 84%),var(--c);
  filter:saturate(.5) brightness(.6);animation:unlock 5.5s calc(1.2s + var(--i) * 45ms) ease-in-out infinite}
@keyframes unlock{0%,12%,100%{filter:saturate(.5) brightness(.6)}5%{filter:saturate(1.15) brightness(1.2)}}
.bk.free{filter:none;animation:none;box-shadow:0 0 0 1.5px var(--turmeric),0 0 16px rgba(242,183,5,.8)}
.bk.free::after{content:attr(data-l);position:absolute;bottom:calc(100% + 5px);left:-4px;font:700 10px/1.4 var(--ui);color:#1A1A2E;background:var(--turmeric);padding:1px 7px;border-radius:999px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.bk{animation:none}}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.perks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.perks .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--leaf-bg);color:var(--leaf);flex:none}
.perks .ic svg{width:18px;height:18px}
.plans{display:grid;gap:12px;margin-top:-26px;position:relative;z-index:2}
.plan{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;width:100%;background:var(--surface);border-radius:20px;padding:18px;
  box-shadow:var(--shadow),inset 0 0 0 2px var(--line);transition:box-shadow .25s,transform .2s var(--ease)}
.plan:active{transform:scale(.98)}
.plan[aria-pressed="true"]{box-shadow:var(--shadow),inset 0 0 0 2.5px var(--turmeric)}
.plan .radio{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);display:grid;place-items:center}
.plan[aria-pressed="true"] .radio{box-shadow:inset 0 0 0 7px var(--turmeric)}
.plan b{font-size:17px}
.plan small{display:block;color:var(--muted);font-size:13.5px}
.plan .price{text-align:right;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.plan .price s{display:block;font-size:13px;color:var(--muted);font-weight:500}
.plan .badge{position:absolute;top:-11px;right:18px;font-size:12px;font-weight:800;background:var(--sindoor);color:#fff;border-radius:999px;padding:3px 10px;letter-spacing:.02em}
.plan{position:relative}
.secure{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.secure svg{width:15px;height:15px}
.success{display:grid;justify-items:center;text-align:center;gap:12px;padding:30px 10px}
.success .tick{width:96px;height:96px;border-radius:50%;background:var(--leaf);display:grid;place-items:center;color:#fff;animation:pop .6s var(--spring)}
.success .tick svg{width:52px;height:52px;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .6s .25s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- welcome: 3D book intro ---------- */
.intro3d{--pw:134px;--ph:180px;--t:12px;position:fixed;inset:0;z-index:4;overflow-y:auto;overflow-x:hidden;color:#fff;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);
  background:radial-gradient(120% 70% at 50% 30%,#30429E 0%,#1A2457 46%,#0B1030 100%)}
.intro3d>*{width:100%;max-width:520px;margin-inline:auto;position:relative}
.i3-sky{position:fixed;inset:0;max-width:none;pointer-events:none}
.i3-sky i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:.55;animation:i3tw 2.6s ease-in-out var(--d) infinite alternate}
@keyframes i3tw{to{opacity:.08}}
.i3-top{display:flex;justify-content:space-between;align-items:center;z-index:2;animation:i3up .6s var(--ease) .1s both}
.i3-mini{display:flex;align-items:center;gap:8px;font:400 19px/1 Galada,var(--display);color:#F7E7B0}
.i3-mini svg{height:22px;width:auto}
.i3-top .seg{background:rgba(255,255,255,.1)}
.i3-top .seg button[aria-pressed="false"]{color:#DDE2FF}

.i3-stage{height:clamp(230px,41vh,370px);perspective:1100px;flex:none;--px:0;--py:0}
.i3-scene{position:absolute;inset:0;transform:scale(var(--k,1));transform-style:preserve-3d}
.i3-glow{position:absolute;left:50%;top:52%;width:400px;height:400px;margin:-200px;border-radius:50%;pointer-events:none;translate:0 0 -180px;scale:1.3;
  background:radial-gradient(closest-side,rgba(255,206,60,.62),rgba(242,183,5,.18) 52%,transparent);opacity:1;
  animation:i3glow 1.3s ease-out 1.15s both,i3pulse 4.5s ease-in-out 2.6s infinite}
@keyframes i3glow{from{opacity:0;transform:scale(.3)}}
@keyframes i3pulse{50%{opacity:.6;transform:scale(.94)}}
.i3-tilt,.i3-bob,.i3-drop,.i3-book,.i3-block,.i3-leaf,.i3-cover,.i3-words{transform-style:preserve-3d}
.i3-tilt{position:absolute;left:50%;top:55%;transform:rotateY(calc(var(--px) * 12deg)) rotateX(calc(var(--py) * -8deg));transition:transform .5s ease-out}
.i3-bob{animation:i3bob 6s ease-in-out 2.4s infinite}
@keyframes i3bob{50%{transform:translateY(-9px) rotateZ(1.2deg)}}
.i3-drop{animation:i3drop 1.05s cubic-bezier(.2,.9,.25,1.12) .15s both}
@keyframes i3drop{from{transform:translateY(-150px) translateZ(-300px) rotateZ(-28deg);opacity:0}55%{opacity:1}}
.i3-book{position:absolute;left:calc(var(--pw) * -1);top:calc(var(--ph) / -2);width:calc(var(--pw) * 2);height:var(--ph);transform:rotateX(56deg) rotateZ(-9deg)}
.i3-shadow{position:absolute;left:-160px;top:-10px;width:320px;height:120px;border-radius:50%;background:radial-gradient(closest-side,rgba(3,6,25,.65),transparent);transform:translateZ(-40px) translateY(40px)}
.i3-pg{position:absolute;inset:0;border-radius:3px 8px 8px 3px;padding:20px 14px 0 16px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(90deg,#D8D3EA,#FCFBF8 16%,#FCFBF8 92%,#ECE9F5)}
.i3-pg i{display:block;height:5px;border-radius:3px;background:#D5D8EA;width:88%}
.i3-pg i:nth-child(3n){width:70%}
.i3-pg i.hl{height:9px;width:54%;background:linear-gradient(#FFE27A,#F2B705);box-shadow:0 0 12px rgba(242,183,5,.6)}
.i3-block{position:absolute;left:var(--pw);top:0;width:var(--pw);height:var(--ph)}
.i3-block>.i3-pg{transform:translateZ(var(--t))}
.i3-edge{position:absolute;left:0;bottom:0;width:100%;height:var(--t);transform-origin:bottom;transform:rotateX(-90deg);border-radius:0 0 4px 4px;
  background:repeating-linear-gradient(#F4F1FA 0 2px,#CFCBE0 2px 3px)}
.i3-leaf,.i3-cover{position:absolute;left:var(--pw);top:0;width:var(--pw);height:var(--ph);transform-origin:0 50%}
.i3-leaf>.i3-pg,.i3-cover>*{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.i3-leaf>.b,.i3-cover>.b{transform:rotateY(180deg);background:linear-gradient(270deg,#D8D3EA,#FCFBF8 16%,#FCFBF8 92%,#ECE9F5);border-radius:8px 3px 3px 8px}
.l1{transform:translateZ(calc(var(--t) + 1px)) rotateY(-171deg);animation:i3l1 .9s cubic-bezier(.5,.05,.3,1) 1.4s both}
.l2{transform:translateZ(calc(var(--t) + .5px)) rotateY(-163deg);animation:i3l2 .9s cubic-bezier(.5,.05,.3,1) 1.65s both}
@keyframes i3l1{from{transform:translateZ(calc(var(--t) + 1px)) rotateY(0)}}
@keyframes i3l2{from{transform:translateZ(calc(var(--t) + .5px)) rotateY(0)}}
.i3-cover{transform:translateZ(calc(var(--t) + 2px)) rotateY(-180deg);animation:i3open 1s cubic-bezier(.55,.05,.25,1) 1s both}
@keyframes i3open{from{transform:translateZ(calc(var(--t) + 2px)) rotateY(0)}}
.i3-cover>.f{position:absolute;inset:-3px -4px -3px 0;border-radius:3px 10px 10px 3px;display:grid;place-items:center;
  background:linear-gradient(150deg,#33449C,#1A2457 55%,#121A48);box-shadow:inset 7px 0 0 rgba(0,0,0,.25)}
.i3-cover>.f::before{content:"";position:absolute;inset:10px 10px 10px 16px;border:2px dashed rgba(242,183,5,.6);border-radius:6px}
.i3-cover .emb svg{width:58px;height:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}

.i3-burst{position:absolute;left:50%;top:50%}
.i3-burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#FFE27A;box-shadow:0 0 10px 2px rgba(255,216,77,.8);opacity:0;
  animation:i3spark 1.2s ease-out calc(1.3s + var(--k) * .09s) both}
@keyframes i3spark{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-165px) scale(1)}}
.i3-words{position:absolute;left:50%;top:50%;transform:translate(calc(var(--px) * -16px),calc(var(--py) * -10px));transition:transform .5s ease-out}
.i3-chip{position:absolute;left:0;top:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transform:translate(-50%,-50%) translate3d(var(--x),var(--y),var(--z));animation:i3chip .85s cubic-bezier(.2,.9,.3,1.3) calc(1.75s + var(--i) * .09s) both}
@keyframes i3chip{from{transform:translate(-50%,-50%) translate3d(0,20px,0) scale(.15);opacity:0}}
.i3-chip .fl{display:block;perspective:500px;animation:i3float calc(3.6s + var(--i) * .41s) ease-in-out calc(2.7s + var(--i) * .23s) infinite alternate}
@keyframes i3float{to{transform:translateY(-10px)}}
.i3-chip .in{display:grid;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.i3-chip.flip .in{transform:rotateY(180deg)}
.i3-chip b{grid-area:1/1;justify-self:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:7px 13px 8px;border-radius:12px;white-space:nowrap;color:#1A2457;font-weight:600}
.i3-chip .f{font:600 15px/1.2 Literata,Georgia,serif;background:linear-gradient(#FFE58A,#F2B705);box-shadow:0 10px 22px -10px rgba(242,183,5,.85),inset 0 -2px 0 rgba(0,0,0,.12)}
.i3-chip .b{transform:rotateY(180deg);font:500 15px/1.2 var(--story);background:#FCFBF8;box-shadow:0 10px 22px -10px rgba(0,0,0,.6)}
.i3-hint{margin:2px auto 0;text-align:center;font-size:12.5px;color:#AEB6E8;animation:i3up .6s var(--ease) 2.8s both}

.i3-copy{display:grid;gap:12px;justify-items:center;text-align:center;margin-top:10px}
.i3-copy>*{animation:i3up .7s var(--ease) both}
.i3-brand{margin:0;font:400 clamp(40px,11vw,52px)/1.05 Galada,var(--display);color:#F7D774;animation-delay:.35s!important;
  background:linear-gradient(180deg,#FFF6D6 10%,#F2B705 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.i3-brand small{display:block;margin-top:8px;font:600 12.5px/1 var(--ui);letter-spacing:.42em;text-transform:uppercase;-webkit-text-fill-color:#AEB6E8;color:#AEB6E8}
.i3-tag{margin:0;color:#C9CFEE;font-size:15px;line-height:1.55;max-width:34ch;animation-delay:.5s!important}
.i3-stats{justify-content:center;margin-top:0;animation-delay:.65s!important}
.i3-steps{list-style:none;margin:4px 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;animation-delay:.8s!important}
.i3-steps li{display:grid;justify-items:center;gap:6px;font-size:12.5px;line-height:1.3;color:#DDE2FF}
.i3-steps span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#F2B705;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.i3-steps svg{width:19px;height:19px}
.i3-cta{display:grid;gap:10px;margin-top:auto;padding-top:18px;animation:i3up .7s var(--ease) .95s both}
.i3-go{position:relative;overflow:hidden;box-shadow:0 14px 30px -12px rgba(242,183,5,.75)}
.i3-go::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:i3shine 3.4s ease-in-out 3s infinite}
@keyframes i3shine{40%,100%{transform:translateX(120%)}}
.i3-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
@keyframes i3up{from{opacity:0;transform:translateY(16px)}}
html.pre-splash body{background:radial-gradient(120% 70% at 50% 30%,#30429E 0%,#1A2457 46%,#0B1030 100%) fixed}
html.pre-splash #view,html.pre-splash .nav{visibility:hidden}
.i3-splash{z-index:60;justify-content:center;transition:opacity .45s ease,transform .45s ease}
.i3-splash.out{opacity:0;transform:scale(1.06);pointer-events:none}
.i3-splash .i3-stage{height:clamp(280px,50vh,420px)}
.i3-splash .i3-copy{margin-top:0}
@media (prefers-reduced-motion:reduce){.intro3d *,.intro3d *::after{animation:none!important;transition:none!important}}

/* ---------- auth ---------- */
.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field span{font-size:14px;font-weight:600;color:var(--ink-2)}
.field input{border:0;border-radius:14px;padding:14px 16px;font-size:17px;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);outline:none;transition:box-shadow .2s}
.field input:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.err{color:var(--sindoor);font-size:14.5px;min-height:1.2em;margin:0}

/* ---------- misc ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);opacity:0;z-index:40;
  background:var(--ink);color:var(--bg);font-weight:600;font-size:15px;padding:11px 18px;border-radius:14px;max-width:calc(100vw - 32px);text-align:center;pointer-events:none;
  transition:transform .35s var(--spring),opacity .25s}
.toast.show{transform:translate(-50%,0);opacity:1}
.xp-fly{position:fixed;z-index:41;font-weight:800;color:var(--leaf);pointer-events:none;animation:xpfly 1s var(--ease) forwards}
@keyframes xpfly{to{transform:translateY(-46px);opacity:0}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
.skel{border-radius:14px;background:linear-gradient(90deg,var(--chip) 25%,var(--surface) 50%,var(--chip) 75%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.lockcard{display:grid;justify-items:center;text-align:center;gap:12px;padding:30px 20px}
.lockcard .ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--turmeric) 22%,transparent);color:#B88600}
.lockcard .ic svg{width:30px;height:30px}
.divider{height:0;border-top:2px dashed var(--line)}
.foot-note{color:var(--muted);font-size:13px;text-align:center;line-height:1.6}

@media (min-width:900px){
  .sheet{left:auto;right:0;top:0;bottom:0;margin:0;width:470px;max-height:none;border-radius:26px 0 0 26px;transform:translateX(105%)}
  .grip{display:none}
}
@media (max-width:380px){.qa{grid-template-columns:1fr}.sa{grid-template-columns:1fr}.page{padding-left:28px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* install how-to */
.inst-modal{position:fixed;inset:0;z-index:45;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.inst-back{position:absolute;inset:0;background:rgba(8,12,34,.5);opacity:0;transition:opacity .25s}
.inst-card{position:relative;width:100%;max-width:520px;background:var(--paper);color:var(--ink);border-radius:24px 24px 0 0;padding:22px 22px calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);transition:transform .3s var(--ease,ease);display:grid;gap:14px}
.inst-modal.open{pointer-events:auto}
.inst-modal.open .inst-back{opacity:1}
.inst-modal.open .inst-card{transform:none}
.inst-card h3{font-size:19px;font-weight:700;padding-right:40px}
.inst-x{position:absolute;top:12px;right:12px}
.steps{display:grid;gap:12px;padding-left:22px;font-size:15.5px;line-height:1.55}
.steps li::marker{font-weight:700;color:var(--muted)}
.step-ic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--chip);vertical-align:middle;margin:0 2px}
.step-ic svg{width:17px;height:17px}
.inst-warn{font-weight:700;color:var(--sindoor)}
.inst-done{justify-self:center;font-size:14.5px;color:var(--muted)}
@media (min-width:700px){.inst-modal{align-items:center}.inst-card{border-radius:24px}}

/* ---------- home hero: the river ghat at this hour ---------- */
.ghat{position:relative;overflow:hidden;isolation:isolate;color:#fff;margin:0 -16px;padding:18px 20px 0;height:340px;border-radius:0 0 28px 28px;background:var(--s1);
  --s1:#1565C0;--s2:#4FA8E8;--s3:#CDEBFA;--sun:#FFF3BF;--far:#1D4A38;--far2:#6E9C86;--r1:#3D92CC;--r2:#174B80;--shine:#fff;--hull:#3A281C;--chhoi:#9A5F2C;
  --step:#6E5E52;--step2:#5A4C42;--edge:rgba(255,255,255,.22);--win:#3A2A20;--stars:0;--sub:rgba(255,255,255,.92)}
.ghat.ph-dawn{--s1:#1E2462;--s2:#86508E;--s3:#F5A66C;--sun:#FFD08A;--far:#2A2246;--far2:#5E4673;--r1:#7A5E92;--r2:#272650;--shine:#FFD9A8;--hull:#1A1530;--chhoi:#4A2E52;--step:#2C2542;--step2:#221D36;--win:#FFB960;--stars:.55}
.ghat.ph-dusk{--s1:#2A1A5C;--s2:#B8456D;--s3:#F7A24C;--sun:#FFB45E;--far:#2A1430;--far2:#6E2F50;--r1:#C46079;--r2:#381C49;--shine:#FFCB8C;--hull:#1C0F20;--chhoi:#4E2338;--step:#2E1A2F;--step2:#241426;--win:#FFC15A;--stars:.35}
.ghat.ph-night{--s1:#060A22;--s2:#141C4C;--s3:#2C3B7E;--sun:#F3EED6;--far:#050816;--far2:#131B40;--r1:#1B2558;--r2:#050920;--shine:#A9BAFF;--hull:#03050F;--chhoi:#151A33;--step:#0E1229;--step2:#090C1E;--edge:rgba(170,186,255,.18);--win:#FFC857;--stars:1}
.ghat::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,8,30,.34) 0%,rgba(4,8,30,0) 46%)}
.ghat > .top,.ghat > .greet,.ghat > .diyas{position:relative;z-index:2}
.ghat .greet{display:block;margin-top:18px}
.ghat .greet h1{text-shadow:0 2px 14px rgba(0,0,0,.35)}
.ghat .greet p{color:var(--sub);text-shadow:0 1px 8px rgba(0,0,0,.45);font-size:14.5px;line-height:1.45}
.ghat .hdr-pills .pill{background:rgba(10,14,40,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18)}
.scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.scene .stars circle{fill:#fff;opacity:var(--stars);animation:twinkle 3.2s var(--d) ease-in-out infinite}
@keyframes twinkle{50%{opacity:calc(var(--stars) * .25)}}
.scene .disc{fill:var(--sun)}
.ph-day .scene .orb{opacity:.9}
.scene .birds{fill:none;stroke:rgba(20,30,60,.55);stroke-width:1.4;stroke-linecap:round;opacity:0;animation:fly 38s linear infinite}
.ph-day .scene .birds,.ph-dawn .scene .birds{opacity:1}
@keyframes fly{from{transform:translate(-60px,78px)}to{transform:translate(470px,40px)}}
.scene .far{fill:var(--far)}.scene .far2{fill:var(--far2)}
.scene .palm{fill:none;stroke:var(--far);stroke-width:2.8;stroke-linecap:round}
.scene .win{fill:var(--win)}
.ph-night .scene .win,.ph-dusk .scene .win{filter:drop-shadow(0 0 4px var(--win))}
.scene .ff{fill:#E9FF8A;opacity:0}
.ph-night .scene .ff,.ph-dusk .scene .ff{opacity:1}
.ph-night .scene .ff circle,.ph-dusk .scene .ff circle{animation:firefly 4s ease-in-out infinite;filter:drop-shadow(0 0 3px #E9FF8A)}
.scene .ff circle:nth-child(2n){animation-duration:5.4s;animation-delay:-2s}.scene .ff circle:nth-child(3n){animation-duration:6.2s;animation-delay:-3.6s}
@keyframes firefly{0%,100%{transform:translate(0,0);opacity:.15}40%{transform:translate(6px,-8px);opacity:1}70%{transform:translate(-4px,-3px);opacity:.4}}
.scene .refl rect{fill:var(--sun);opacity:.45;animation:ripple2 2.6s var(--d) ease-in-out infinite}
@keyframes ripple2{50%{opacity:.18;transform:translateX(3px)}}
.scene .shim path{stroke:var(--shine);stroke-width:1.4;stroke-linecap:round;opacity:.3;animation:shim 5s ease-in-out infinite}
.scene .shim path:nth-child(2n){animation-delay:-2.2s}.scene .shim path:nth-child(3n){animation-delay:-3.7s}
@keyframes shim{50%{transform:translateX(10px);opacity:.08}}
.scene .boat-x{animation:sail 52s -19s linear infinite}
@keyframes sail{from{transform:translateX(-96px)}to{transform:translateX(476px)}}
.scene .boat{cursor:pointer;transform-box:fill-box;transform-origin:50% 80%;animation:bob 3.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(2px) rotate(-1.6deg)}}
.scene .hull{fill:var(--hull)}.scene .chhoi{fill:var(--chhoi)}
.scene .man{fill:var(--hull);stroke:var(--hull);stroke-width:2;stroke-linecap:round}
.scene .pole{stroke:var(--hull);stroke-width:1.6;stroke-linecap:round}
.scene .lamp{fill:#FFC45A;opacity:0}
.ph-night .scene .lamp,.ph-dusk .scene .lamp,.ghat.met .scene .lamp{opacity:1;filter:drop-shadow(0 0 5px #FFB547)}
.scene .bw{font:italic 600 12px var(--en);fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.4);stroke-width:3px;stroke-linejoin:round;letter-spacing:.02em}
.scene .fanus{fill:#FFB547;opacity:0}
.ghat.met .scene .fanus path{opacity:0;filter:drop-shadow(0 0 6px #FF9A2E);animation:fanus 11s ease-in infinite}
.ghat.met .scene .fanus{opacity:1}
.ghat.met .scene .fanus path:nth-child(2){animation-delay:-4s}.ghat.met .scene .fanus path:nth-child(3){animation-delay:-7.5s}
@keyframes fanus{0%{opacity:0;transform:translate(0,0)}10%{opacity:.95}80%{opacity:.8}100%{opacity:0;transform:translate(18px,-230px)}}
.scene .step{fill:var(--step)}.scene .step2{fill:var(--step2)}
.scene .edge{stroke:var(--edge);stroke-width:1}
.ghat > .diyas{position:absolute;left:14px;right:14px;bottom:15px;display:flex;justify-content:space-between;align-items:flex-end;gap:2px}
.diya{position:relative;width:28px;height:28px;flex:0 0 auto}
.diya svg{width:100%;height:100%;overflow:visible;display:block}
.diya .bowl{fill:#3B2B25;opacity:.9}.diya .rim{stroke:rgba(255,255,255,.3);stroke-width:1.2}
.diya .fl,.diya .fl2{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.diya .fl{fill:#FF8A1F}.diya .fl2{fill:#FFE27A}
.diya.on .bowl{fill:#B8622F;opacity:1}.diya.on .rim{stroke:#F2A464}
.diya.on .fl,.diya.on .fl2{opacity:1;animation:dflick 1.5s calc(var(--i) * -.37s) ease-in-out infinite}
.diya.on::before{content:"";position:absolute;left:50%;top:22%;width:58px;height:58px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,176,64,.55) 0%,rgba(255,140,40,.18) 38%,transparent 66%)}
@keyframes dflick{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.08,1.16) rotate(-5deg)}65%{transform:scale(.95,1.04) rotate(4deg)}}
.diya.new .fl,.diya.new .fl2,.hero.intro .diya.on .fl,.hero.intro .diya.on .fl2{animation:ignite .55s var(--dl,.3s) cubic-bezier(.3,1.6,.5,1) both,dflick 1.5s calc(var(--dl,.3s) + .55s) ease-in-out infinite}
.diya.new::before,.hero.intro .diya.on::before{animation:fadein .7s var(--dl,.3s) both}
.hero.intro .diya{--dl:calc(1.1s + var(--i) * .12s)}
@keyframes ignite{from{opacity:0;transform:scale(.1)}}
.ghat.met .diya.on::before{background:radial-gradient(circle,rgba(255,196,80,.7) 0%,rgba(255,150,40,.24) 40%,transparent 68%)}
.brand small{background:linear-gradient(100deg,var(--turmeric) 20%,#FFF3C4 40%,var(--turmeric) 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldsheen 5s ease-in-out infinite}
@keyframes goldsheen{0%,55%{background-position:100% 0}100%{background-position:-150% 0}}
.hdr-pills .pill.flame.lit svg{transform-origin:50% 90%;animation:flicker 1.6s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.12,1.18) rotate(-4deg)}60%{transform:scale(.96,1.05) rotate(3deg)}}
/* first visit of the session: sun/moon rises, name is written in, diyas light one by one */
.hero.intro .orb{animation:orbrise 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes orbrise{from{transform:translateY(46px);opacity:0}}
.hero.intro .ink{display:inline-block;clip-path:inset(0 100% 0 0);animation:write 1.1s .15s cubic-bezier(.6,0,.2,1) forwards}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
.hero.intro .brand small{animation:rise .6s 1s both,goldsheen 5s 1.6s ease-in-out infinite}
.hero.intro .greet h1{animation:rise .7s .7s both}
.hero.intro .greet p{animation:rise .7s .85s both}
.hero.intro .hdr-pills .pill{animation:rise .5s both}
.hero.intro .hdr-pills .pill:nth-child(2){animation-delay:.12s}
@keyframes fadein{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .scene *,.diya .fl,.diya .fl2,.diya::before,.brand small,.hdr-pills .pill.flame.lit svg{animation:none!important}
  .scene .boat-x{transform:translateX(220px)}
  .ghat.met .scene .fanus path{opacity:.9;transform:translateY(-120px)}
}


/* ---------- Google sign-in button ---------- */
.gwrap{display:flex;justify-content:center;min-height:44px}
.gbtn{width:100%;max-width:400px;display:flex;justify-content:center}
a.btn{text-decoration:none}
@media (max-height:700px){.i3-steps{display:none}}