/* English Zero To Hero — v6 */
:root{
  --ink:#171A44;--muted:#5F6489;--bg:#F4F5FC;--card:#fff;--line:#E2E5F3;--paper:#FFFEFB;
  --brand:#2A2F9E;--brand2:#1D2174;--deep:#12154F;--sun:#FFB81F;--sun2:#FF8A1F;
  --read:#3D6BFF;--listen:#00A79B;--watch:#FF5470;--practice:#8B4DFF;--exam:#FF9A1F;
  --ok:#0E9F6E;--okbg:#E6F7F0;--bad:#E02D4B;--badbg:#FDEBEE;--warn:#B54708;
  --sh:0 1px 2px rgba(23,26,68,.06),0 10px 28px -14px rgba(23,26,68,.25);--r:18px;
  --fs:18px;
}
@media(prefers-color-scheme:dark){:root{
  --ink:#ECEEFF;--muted:#9EA3CC;--bg:#0C0E2E;--card:#151845;--line:#262A63;--paper:#181B4C;
  --brand:#8E94FF;--brand2:#B7BBFF;--deep:#0A0C2B;--okbg:#0F2F27;--badbg:#3A1620;
  --sh:0 10px 28px -14px rgba(0,0,0,.7);
}}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Hind Siliguri","Noto Sans Bengali","Kalpurush","Nirmala UI",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.9rem}.hidden{display:none!important}
svg{flex:none}

/* ---------- buttons, forms ---------- */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:0;border-radius:12px;padding:.62rem 1.15rem;font:inherit;font-weight:600;background:var(--brand);color:#fff;cursor:pointer;text-decoration:none;transition:transform .15s,background .2s,box-shadow .2s}
@media(prefers-color-scheme:dark){button,.btn{color:#0C0E2E}}
button:hover,.btn:hover{background:var(--brand2)}
button:active,.btn:active{transform:scale(.97)}
button.ghost,.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
button.ghost:hover,.btn.ghost:hover{background:var(--bg);border-color:var(--brand)}
button.sm{padding:.3rem .75rem;font-size:.9rem;border-radius:10px}
button:disabled{opacity:.45;cursor:default;transform:none}
label{display:block;font-weight:600;margin:.8rem 0 .25rem}
input,select,textarea{width:100%;padding:.7rem .85rem;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 20%,transparent)}
textarea{min-height:90px;resize:vertical}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.grow{flex:1}
.pill{display:inline-block;padding:.05rem .65rem;border-radius:99px;font-size:.82rem;font-weight:600;background:var(--bg);border:1px solid var(--line)}
.pill.ok{color:var(--ok)}.pill.bad{color:var(--bad)}
.note{padding:.75rem 1rem;border-radius:12px;border:1px solid var(--line);background:var(--bg);margin:.8rem 0}
.note.warn{border-color:#f5c27a;background:rgba(245,194,122,.16)}.note.bad{border-color:#f0a5a0;background:var(--badbg)}.note.ok{border-color:#8fd3ae;background:var(--okbg)}
#flash{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);background:var(--deep);color:#fff;padding:.75rem 1.2rem;border-radius:12px;z-index:120;max-width:92vw;box-shadow:var(--sh);animation:rise .25s ease-out}
#flash.bad{background:var(--bad)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.4rem;margin:1.1rem 0;box-shadow:var(--sh)}
h1{font-size:1.7rem;line-height:1.3;margin:.2rem 0 .5rem}h2{font-size:1.3rem;margin:.2rem 0 .7rem}h3{font-size:1.08rem}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}.tabs button{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}.tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.item{border-top:1px solid var(--line);padding:.9rem 0}.item:first-child{border-top:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.15rem .9rem;font-size:.95rem}.kv>b{color:var(--muted);font-weight:600}.kv span b{color:var(--ink)}
.pay-box{border:2px dashed var(--brand);border-radius:14px;padding:.8rem 1.1rem;margin:.7rem 0;background:color-mix(in srgb,var(--brand) 7%,transparent)}
.bar{height:9px;background:var(--line);border-radius:99px;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--read),var(--sun));border-radius:99px;transition:width .6s ease}
main.wrap{max-width:780px;margin:0 auto;padding:1.2rem 1rem 3rem}
.disp,.wm,.sec>h2,.sk h3,.tochead b,.tochead .badge,.tc .no,.tc .tt b,.lv b,.qz-hd .ti,.qi .n,.vc .w,.res .rt b,.ring b,.tring b,.page h1,.page h2,.page h3,.page h4,.coverpage .cv-sub,.coverpage .cv-author{font-family:"Baloo Da 2","Hind Siliguri","Noto Sans Bengali",system-ui,sans-serif}

/* ---------- header + wordmark ---------- */
header.top{display:flex;align-items:center;gap:.25rem;padding:.55rem 1rem;background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
header.top.rd{position:static}
header.top .spacer{flex:1}
header.top a.nav{text-decoration:none;color:var(--ink);padding:.3rem .7rem;border-radius:99px;font-weight:600;font-size:.95rem;white-space:nowrap}
header.top a.nav:hover{background:var(--bg)}
header.top a.nav.cta{background:var(--brand);color:#fff}
@media(prefers-color-scheme:dark){header.top a.nav.cta{color:#0C0E2E}}
.wm{display:inline-flex;align-items:baseline;gap:.38rem;text-decoration:none;line-height:1;color:var(--ink)}
.wm .en{font-weight:700;font-size:.78rem;letter-spacing:.14em;padding:.18rem .5rem;border-radius:6px;background:var(--deep);color:#fff;align-self:center}
.wm .z{font-weight:500;font-size:1.02rem;color:var(--muted)}
.wm .t{font-weight:600;font-size:.72rem;color:var(--muted)}
.wm .h{font-weight:800;font-size:1.5rem;background:linear-gradient(100deg,var(--sun2),var(--watch));-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:420px){.wm .en{font-size:.68rem;padding:.14rem .4rem}.wm .z{font-size:.9rem}.wm .h{font-size:1.3rem}}
.wm.xl{flex-direction:column;align-items:flex-start;gap:.15rem}
.wm.xl .en{font-size:clamp(.85rem,3.2vw,1.1rem);background:rgba(255,255,255,.14);padding:.25rem .8rem;border-radius:99px;letter-spacing:.2em;margin-bottom:.35rem}
.wm.xl .big{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.wm.xl .z{font-size:clamp(1.8rem,8vw,3.1rem);font-weight:500;color:rgba(255,255,255,.72)}
.wm.xl .t{font-size:clamp(1rem,4vw,1.5rem);color:rgba(255,255,255,.6)}
.wm.xl .h{font-size:clamp(3.4rem,17vw,6.6rem);font-weight:800;line-height:.95;background:linear-gradient(100deg,#FFD25A,var(--sun2) 55%,#FF6F7F);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .04em .06em}

/* ---------- home ---------- */
.hero{background:radial-gradient(120% 90% at 85% 0%,#3A3FC0 0%,var(--deep) 62%);color:#fff;position:relative;overflow:hidden}
.hero-in{max-width:1080px;margin:0 auto;padding:1.6rem 1.1rem 0;display:grid;gap:1rem;grid-template-columns:1fr}
.hero .by{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;color:rgba(255,255,255,.82);margin:.9rem 0 .2rem}
.hero .by b{color:#fff;letter-spacing:.02em}
.hero .by:before{content:"";width:26px;height:2px;background:var(--sun);border-radius:2px}
.hero .tag{font-size:clamp(1.05rem,4.2vw,1.3rem);line-height:1.6;color:rgba(255,255,255,.92);max-width:30rem;margin:.6rem 0 1.2rem}
.hero .tag b{color:#fff}
.hero .ctas{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.cta-main{position:relative;display:inline-flex;align-items:center;gap:.85rem;padding:.55rem 1.5rem .55rem .6rem;min-height:62px;border-radius:99px;background:linear-gradient(180deg,#FFD04A,#FF9B1A);color:#2A1500;font-weight:800;font-size:1.18rem;text-decoration:none;box-shadow:0 0 0 6px rgba(255,184,31,.22),0 16px 30px -12px rgba(255,138,31,.85),inset 0 1px 0 rgba(255,255,255,.6);overflow:hidden;transition:transform .18s,box-shadow .2s}
.cta-main:hover{background:linear-gradient(180deg,#FFD961,#FFA42E);transform:translateY(-2px);box-shadow:0 0 0 8px rgba(255,184,31,.28),0 20px 34px -12px rgba(255,138,31,.9),inset 0 1px 0 rgba(255,255,255,.6)}
.cta-main .ico{width:46px;height:46px;border-radius:50%;background:#2A1500;color:#FFD04A;display:grid;place-items:center}
.cta-main .tx{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.cta-main .tx small{font-weight:600;font-size:.82rem;opacity:.78}
.cta-main:after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-90px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:shine 2.4s .9s 1 ease-out forwards}
@keyframes shine{to{left:130%}}
.btn-line{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.3rem;border-radius:99px;border:1.5px solid rgba(255,255,255,.45);color:#fff;font-weight:700;text-decoration:none;background:transparent}
.btn-line:hover{background:rgba(255,255,255,.12);border-color:#fff}
.hero .micro{font-size:.88rem;color:rgba(255,255,255,.7);margin:.1rem 0 0 .4rem}
.hero .stairs{width:100%;max-width:520px;margin:.6rem auto 0;display:block}
.hero .note{color:var(--ink)}
@media(min-width:900px){.hero-in{grid-template-columns:1.05fr .95fr;align-items:end;padding-top:2.6rem}.hero .stairs{margin:0}.hero .ctas{flex-direction:row;align-items:center;flex-wrap:wrap}.hero .micro{flex-basis:100%}}
.sec{max-width:1080px;margin:0 auto;padding:2.4rem 1.1rem 0}
.sec>h2{font-size:clamp(1.5rem,5.4vw,2.1rem);line-height:1.25;margin:0 0 .3rem}
.sec>.lead{color:var(--muted);margin:0 0 1.2rem;max-width:36rem}
.skills{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}
.sk{border-radius:20px;padding:1rem 1rem 1.1rem;color:#fff;position:relative;overflow:hidden;min-height:200px;display:flex;flex-direction:column}
.sk .art{width:76px;height:76px;margin-bottom:.5rem}
.sk h3{font-size:1.28rem;margin:0;line-height:1.2}
.sk p{margin:.25rem 0 0;font-size:.93rem;line-height:1.5;opacity:.95}
.sk:after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.14)}
.sk.read{background:linear-gradient(150deg,#5B84FF,#2D52E0)}
.sk.listen{background:linear-gradient(150deg,#12C4B6,#007E75)}
.sk.watch{background:linear-gradient(150deg,#FF7088,#E02D55)}
.sk.practice{background:linear-gradient(150deg,#A06BFF,#6A2FDB)}
.sk.exam{background:linear-gradient(150deg,#FFB13D,#F07A00);color:#2A1500}
.sk.exam:after{background:rgba(255,255,255,.28)}
.sk.wide{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:1rem}
.sk.wide .art{margin:0}
@media(min-width:760px){.skills{grid-template-columns:repeat(5,1fr)}.sk.wide{grid-column:auto;min-height:230px;flex-direction:column;align-items:flex-start}.sk.wide .art{margin-bottom:.5rem}}
.try{margin-top:1.2rem;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1rem 1.2rem;box-shadow:var(--sh)}
.try .qhd{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--practice);margin-bottom:.3rem}
.levels{display:grid;gap:.5rem}
.lv{display:flex;align-items:center;gap:.8rem;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.6rem .9rem;border-left:8px solid var(--c)}
.lv b{font-size:1.05rem}
.lv span{color:var(--muted);font-size:.9rem}
.lv .ln{margin-left:auto;font-weight:700;color:var(--c);white-space:nowrap}
.tochead{display:flex;align-items:center;gap:.7rem;margin:1.6rem 0 .7rem}
.tochead .badge{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.05rem;background:var(--c)}
.tochead b{font-size:1.15rem;line-height:1.2;display:block}
.tochead span{font-size:.88rem;color:var(--muted)}
.tgrid{display:grid;gap:.6rem;grid-template-columns:1fr}
@media(min-width:700px){.tgrid{grid-template-columns:1fr 1fr}}
.tc{display:flex;gap:.8rem;align-items:center;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.75rem .9rem;box-shadow:var(--sh);transition:transform .15s,border-color .2s;position:relative;overflow:hidden;--c:var(--brand)}
.tc:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.tc:hover{transform:translateY(-2px);border-color:var(--c)}
.tc .no{flex:none;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--c) 14%,var(--card));color:var(--c);display:grid;place-items:center;font-weight:800;font-size:1.25rem;margin-left:.2rem}
.tc .tt{min-width:0;flex:1}
.tc .tt b{display:block;font-size:1.08rem;line-height:1.25}
.tc .tt span{display:block;font-size:.88rem;color:var(--muted);line-height:1.35}
.tc .st{flex:none;font-size:.78rem;font-weight:700;padding:.15rem .6rem;border-radius:99px;background:var(--bg);color:var(--muted);display:inline-flex;align-items:center;gap:.25rem}
.tc .st.free{background:var(--okbg);color:var(--ok)}
.tc.exam{background:linear-gradient(120deg,color-mix(in srgb,var(--exam) 14%,var(--card)),var(--card));border-color:color-mix(in srgb,var(--exam) 55%,var(--line));--c:var(--exam)}
.tc.exam .no{background:var(--exam);color:#2A1500}
.tc.key{--c:var(--ok)}
.foot{max-width:1080px;margin:2.6rem auto 0;padding:1.4rem 1.1rem 2.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tocpage .tochead:first-child{margin-top:.4rem}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(10,12,43,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:90;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.mbox{width:min(460px,100%);max-height:94vh;overflow:auto;background:var(--card);border-radius:24px 24px 0 0;padding:1.2rem 1.3rem 1.6rem;animation:sheet .3s cubic-bezier(.2,.8,.2,1)}
@media(min-width:600px){.modal{align-items:center}.mbox{border-radius:24px}}
.mbox .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:14px;padding:3px;margin:.4rem 0 .6rem}
.seg button{background:transparent;color:var(--muted);border-radius:11px;padding:.5rem}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh)}

/* ---------- reader ---------- */
.rbar{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap;padding:.4rem .8rem;min-height:3.2rem;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.ic{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--ink);border-radius:12px;font-size:1.2rem;line-height:1}
.ic:hover{background:var(--bg);color:var(--brand)}
.ic.txt{width:auto;padding:0 .55rem;font-size:.9rem;font-weight:700}
.pager{display:flex;align-items:center;background:var(--bg);border-radius:14px;padding:2px}
.pgin{display:flex;align-items:center;gap:.2rem;padding:0 .25rem;font-weight:600}
.pgin input{width:3.2rem;border:0;background:transparent;text-align:center;padding:.2rem;font-weight:700;color:var(--ink);border-radius:8px}
.pgin input:focus{box-shadow:0 0 0 2px var(--sun)}
.pgin i{font-style:normal;color:var(--muted)}
.xpchip{display:inline-flex;align-items:center;gap:.25rem;font-weight:700;font-size:.88rem;padding:.2rem .65rem;border-radius:99px;background:color-mix(in srgb,var(--sun) 24%,var(--card));color:var(--ink)}
.rprog{height:4px;background:var(--line);position:sticky;top:3.2rem;z-index:29}.rprog>i{display:block;height:100%;background:linear-gradient(90deg,var(--read),var(--sun));transition:width .5s ease}
.rlayout{display:flex;align-items:flex-start;max-width:1320px;margin:0 auto;padding:0 .5rem}
.toc{width:300px;flex:none;position:sticky;top:4.6rem;max-height:calc(100vh - 5.6rem);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:1rem 0 1rem .4rem;padding:.5rem;box-shadow:var(--sh);animation:slide .25s ease-out}
.toc button{display:block;width:100%;text-align:left;background:transparent;color:var(--ink);border-radius:10px;padding:.4rem .6rem;font-weight:500;font-size:.92rem;border-left:3px solid transparent}
.toc button:hover{background:var(--bg)}.toc button.on{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);border-left-color:var(--sun);font-weight:700}
.page{flex:1 1 auto;min-width:0;max-width:680px;margin:1.2rem auto;min-height:70vh;background:var(--paper);border:1px solid var(--line);border-radius:3px 14px 14px 3px;box-shadow:inset 16px 0 18px -14px rgba(0,0,0,.18),1px 1px 0 var(--line),3px 3px 0 var(--paper),4px 4px 0 var(--line),6px 6px 0 var(--paper),7px 7px 0 var(--line),0 22px 34px -16px rgba(0,0,0,.35);padding:2.1rem 2.3rem 1.5rem 2.6rem;font-size:var(--fs);line-height:1.95;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.page input,.page textarea{user-select:text;-webkit-user-select:text}
.page::after{content:attr(data-n);display:block;text-align:center;margin-top:1.8rem;color:var(--muted);font-size:.88rem;letter-spacing:.05em}
.page.fn{transform-origin:left center;animation:flipn .55s cubic-bezier(.3,.7,.2,1)}
.page.fp{transform-origin:right center;animation:flipp .55s cubic-bezier(.3,.7,.2,1)}
.page.fd{animation:fade .45s}
.page h1,.page h2,.page h3,.page h4{line-height:1.45;color:var(--brand)}
.page h2{font-size:1.5em}.page h3{font-size:1.2em}.page h4{font-size:1.05em}
.page p{margin:.7rem 0}
.page img{max-width:100%;height:auto;display:block;margin:1rem auto;border-radius:10px}
.page .tbl-wrap{overflow-x:auto}
.page table{border-collapse:collapse;width:100%;margin:.8rem 0;font-size:.95em}.page th,.page td{border:1px solid var(--line);padding:.4rem .65rem;vertical-align:top}.page th{background:var(--bg)}
.spread{display:flex;flex:1 1 auto;min-width:0;justify-content:center;margin:1.2rem auto;padding:0 .5rem}
.spread .page{flex:1 1 0;max-width:640px;margin:0;min-height:76vh}
.page.pl{border-radius:14px 3px 3px 14px;box-shadow:inset -16px 0 18px -14px rgba(0,0,0,.18),-1px 1px 0 var(--line),-3px 3px 0 var(--paper),-4px 4px 0 var(--line),0 22px 34px -16px rgba(0,0,0,.35)}
.page.pl::after{text-align:left}.page.pr::after{text-align:right}
.page.blank{background:transparent;border:0;box-shadow:none;min-height:0;padding:0}.page.blank::after{display:none}
.box{border-left:5px solid var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--paper));border-radius:12px;padding:.5rem 1.05rem;margin:1.1rem 0}
.box p{margin:.4rem 0}
.box-write{border-color:var(--practice)}.box-mission{border-color:#d97706}.box-why{border-color:#7c3aed}.box-real{border-color:#0891b2}.box-xp{border-color:#ca8a04}.box-test{border-color:var(--bad)}.box-speak{border-color:var(--watch)}.box-answer{border-color:var(--ok)}.box-map{border-color:#4f46e5}
.coverpage{text-align:center;padding:1rem 0 .4rem}
.coverpage .wm{margin:0 auto}
.coverpage .cv-sub{font-weight:700;font-size:1.05em;margin:1.1rem 0 .3rem;color:var(--ink)}
.coverpage .cv-skills{color:var(--muted);font-size:.85em;margin:0 0 .6rem}
.coverpage .cv-by{font-size:.8em;color:var(--muted);margin:1.2rem 0 0}
.coverpage .cv-author{font-weight:800;font-size:1.15em;letter-spacing:.05em;margin:0}
.coverpage svg{width:100%;max-width:340px;margin:.4rem auto;display:block}
.coverpage .wm .en{background:var(--deep);color:#fff}
.flipbtn{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:68px;padding:0;font-size:2.2rem;line-height:1;border-radius:14px;background:color-mix(in srgb,var(--card) 90%,transparent);color:var(--brand);border:1px solid var(--line);z-index:35;box-shadow:var(--sh)}
.flipbtn.l{left:.8rem}.flipbtn.r{right:.8rem}.flipbtn:hover,.flipbtn:active{transform:translateY(-50%);background:var(--card)}
.sidepanel{max-width:780px;margin:.6rem auto;padding:0 .8rem}
.wm-layer{position:fixed;inset:0;pointer-events:none;z-index:50}
.lockbox{text-align:center;padding:2rem 0}
.lockbox .lk{width:84px;height:84px;margin:0 auto .6rem;border-radius:50%;background:color-mix(in srgb,var(--sun) 22%,var(--card));display:grid;place-items:center;color:var(--sun2)}
.lecb,.lec-cta{display:inline-flex;align-items:center;gap:.4rem;background:var(--sun);color:#2A1500;border-radius:999px;padding:.4rem 1rem;white-space:nowrap}
.lecb:hover,.lec-cta:hover{background:#FFC94D}
.lec{position:fixed;inset:0;background:rgba(10,12,43,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:90;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{width:min(720px,100%);max-height:92vh;overflow:auto;background:var(--card);border-radius:20px 20px 0 0;padding:1rem 1.2rem 1.6rem;animation:sheet .3s cubic-bezier(.2,.8,.2,1)}
.sh-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.vid{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#000}
.sheet audio,.lec-item audio{display:block;width:100%}
.lec-item+.lec-item{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.lec-text{margin-top:.8rem;line-height:1.9;padding:.8rem 1rem;background:var(--bg);border-radius:12px}
@media(min-width:821px){.lec{align-items:center}.sheet{border-radius:20px;max-height:88vh}}

/* ---------- exercises ---------- */
.qz{margin:1.3rem 0;border:1.5px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden;line-height:1.6;font-size:.95em;box-shadow:var(--sh);color:var(--ink)}
.qz-hd{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;color:#fff;background:var(--c,var(--practice))}
.qz-hd .ti{font-weight:700;font-size:1.05em;line-height:1.25;flex:1}
.qz-hd .sc{font-weight:700;font-size:.88em;background:rgba(255,255,255,.22);padding:.1rem .65rem;border-radius:99px;white-space:nowrap}
.qz-pg{height:5px;background:color-mix(in srgb,var(--c,var(--practice)) 18%,var(--line))}.qz-pg>i{display:block;height:100%;width:0;background:var(--c,var(--practice));transition:width .4s}
.qz-bd{padding:.8rem 1rem 1rem}
.qz-ins{margin:.1rem 0 .7rem;color:var(--muted);font-size:.92em}
.qi{padding:.75rem .85rem;border:1.5px solid var(--line);border-radius:14px;margin:.6rem 0;background:var(--paper);transition:border-color .2s,background .2s}
.qi.ok{border-color:var(--ok);background:var(--okbg)}.qi.bad{border-color:var(--bad);background:var(--badbg)}
.qi .q{display:flex;gap:.6rem;align-items:flex-start}
.qi .n{flex:none;width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--c,var(--practice)) 15%,var(--card));color:var(--c,var(--practice));font-weight:800;font-size:.85em;display:grid;place-items:center;margin-top:.1rem}
.qi .qt{flex:1;min-width:0;line-height:1.55}
.opts{display:grid;gap:.45rem;margin-top:.6rem}
@media(min-width:560px){.opts{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:center;gap:.6rem;text-align:left;justify-content:flex-start;background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:.5rem .7rem;font-weight:500;line-height:1.4;min-height:46px}
.opt:hover:not(:disabled){border-color:var(--c,var(--practice));background:color-mix(in srgb,var(--c,var(--practice)) 8%,var(--card))}
.opt .l{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:.8em;font-weight:800;color:var(--muted)}
.opt:disabled{opacity:1;cursor:default}
.opt.right{border-color:var(--ok);background:var(--okbg)}.opt.right .l{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--badbg);animation:shake .35s}.opt.wrong .l{background:var(--bad);border-color:var(--bad);color:#fff}
.fb{margin:.5rem 0 0;font-weight:700;font-size:.92em}.fb.ok{color:var(--ok)}.fb.bad{color:var(--bad)}
.fb small{display:block;font-weight:500;color:var(--ink)}
.res{display:flex;align-items:center;gap:1rem;margin-top:.9rem;padding:.9rem 1rem;border-radius:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--sun) 22%,var(--card)),var(--card));border:1.5px solid color-mix(in srgb,var(--sun) 60%,var(--line));animation:rise .4s}
.ring{--p:0;flex:none;width:72px;height:72px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center}
.ring b{width:56px;height:56px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:1.05rem}
.res .rt{flex:1;min-width:0}.res .rt b{font-size:1.15rem;display:block;line-height:1.3}
.qz-ft{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.ti-in{min-height:46px;background:var(--card)}
textarea.ti-in{min-height:84px}
.qi .tools{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem;align-items:center}
.chk{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.88em;cursor:pointer;padding:.25rem .6rem;border-radius:99px;background:var(--bg);border:1.5px solid var(--line);color:var(--muted)}
.chk.on{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.wc{font-size:.8em;color:var(--muted);margin-left:auto}
.mt{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(34px,12vw,90px);margin:.4rem 0}
.mt .col{display:flex;flex-direction:column;gap:.55rem;position:relative;z-index:2}
.mt svg.ln{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.mi{display:flex;align-items:center;gap:.5rem;text-align:left;justify-content:flex-start;background:var(--paper);color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:.5rem .65rem;min-height:48px;font-weight:600;line-height:1.35;word-break:break-word}
.mi:hover:not(:disabled){border-color:var(--c,var(--practice))}
.mi .dot{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:var(--card)}
.col.r .mi{flex-direction:row-reverse;text-align:right}
.mi.sel{border-color:var(--c,var(--practice));background:color-mix(in srgb,var(--c,var(--practice)) 12%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--practice)) 25%,transparent)}
.mi.sel .dot{background:var(--c,var(--practice));border-color:var(--c,var(--practice))}
.mi.done{border-color:var(--lc);background:color-mix(in srgb,var(--lc) 11%,var(--card))}.mi.done .dot{background:var(--lc);border-color:var(--lc)}
.mi.no{border-color:var(--bad);animation:shake .35s}
.mi:disabled{opacity:1;cursor:default}
.vg{display:grid;gap:.5rem;grid-template-columns:1fr 1fr}
@media(min-width:620px){.vg{grid-template-columns:repeat(3,1fr)}}
.vc{position:relative;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);padding:.55rem 2.3rem .5rem .7rem;min-height:74px;display:flex;flex-direction:column;justify-content:center;text-align:left;cursor:pointer;color:var(--ink);font-weight:inherit;align-items:flex-start;gap:0}
.vc:hover{border-color:var(--read);background:var(--paper)}
.vc .w{font-weight:700;font-size:1.05em;line-height:1.2}
.vc .m{font-size:.9em;color:var(--muted);line-height:1.3;margin-top:.15rem}
.vc .m.hide{filter:blur(6px);user-select:none}
.vc.known{border-color:var(--ok);background:var(--okbg)}
.vc .kn{position:absolute;right:8px;bottom:5px;font-size:.72em;font-weight:700;color:var(--muted)}
.vc.known .kn{color:var(--ok)}
.vc .spk{position:absolute;right:5px;top:5px}
.spk{width:32px;height:32px;padding:0;border-radius:50%;background:color-mix(in srgb,var(--listen) 15%,var(--card));color:var(--listen);display:inline-grid;place-items:center}
.spk:hover{background:var(--listen);color:#fff}.spk.on{background:var(--listen);color:#fff}
.xr{display:flex;align-items:center;gap:.5rem}.xr .spk{flex:none}
.ap{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border-radius:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--listen) 16%,var(--card)),var(--card));border:1.5px solid color-mix(in srgb,var(--listen) 40%,var(--line));margin:.8rem 0;color:var(--ink);line-height:1.4}
.ap .pp{width:48px;height:48px;border-radius:50%;padding:0;background:var(--listen);color:#fff;box-shadow:0 8px 16px -8px var(--listen)}
.ap .pp:hover{background:#008C82}
.ap .mid{flex:1;min-width:0}
.ap .lbl{font-weight:700;font-size:.9em;line-height:1.2;display:flex;gap:.4rem;align-items:center}
.ap .seek{width:100%;margin:.25rem 0 0;padding:0;height:20px;accent-color:var(--listen);background:transparent;border:0}
.ap .tm{font-size:.78em;color:var(--muted);display:flex;justify-content:space-between}
.ap .sp{padding:.25rem .6rem;border-radius:99px;font-size:.8em;background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.eq{display:none;gap:2px;align-items:flex-end;height:14px}.ap.play .eq{display:inline-flex}
.eq i{width:3px;background:var(--listen);border-radius:2px;animation:eq .8s infinite ease-in-out}.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.script{margin-top:.6rem;padding:.7rem .9rem;border-radius:12px;background:var(--bg);border:1.5px dashed var(--line);font-size:.95em;line-height:1.8}
.spk-card{margin:1.3rem 0;border-radius:18px;overflow:hidden;border:1.5px solid color-mix(in srgb,var(--watch) 45%,var(--line));background:var(--card);box-shadow:var(--sh);color:var(--ink);line-height:1.6;font-size:.95em}
.timer{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.tring{--p:0;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--watch) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center}
.tring b{width:74px;height:74px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:1.6rem}
.recbtn{background:var(--watch);color:#fff}.recbtn:hover{background:#E03A58}
.recbtn.live{animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,84,112,.6)}100%{box-shadow:0 0 0 16px rgba(255,84,112,0)}}
.rec-audio{width:100%;margin-top:.5rem}
.vidslot{margin:1rem 0}
.vidslot .ph{padding:.8rem 1rem;border:1.5px dashed var(--line);border-radius:14px;color:var(--muted);text-align:center;font-size:.92em}
.demo-q{font-weight:600;margin:.2rem 0 .1rem}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes flipn{from{transform:perspective(1800px) rotateY(-62deg);opacity:.1}to{transform:perspective(1800px) rotateY(0);opacity:1}}
@keyframes flipp{from{transform:perspective(1800px) rotateY(62deg);opacity:.1}to{transform:perspective(1800px) rotateY(0);opacity:1}}
@media(max-width:820px){.rlayout{display:block;padding:0}.toc{position:static;width:auto;max-height:50vh;margin:.8rem}.flipbtn{display:none}.page{margin:.7rem;padding:1.3rem 1.1rem 1.1rem 1.3rem;min-height:60vh}.page.pl,.page.pr{border-radius:3px 14px 14px 3px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.cta-main:after{display:none}}
@media print{body *{display:none!important}body::after{content:"প্রিন্ট করা যাবে না";display:block;font-size:2rem;padding:2rem}}

/* =====================================================================
   v7 — clean, calm reading design + test widgets (overrides above)
   ===================================================================== */
:root{--bg:#F6F7FB;--paper:#FFFFFF;--line:#E6E8F0;--ink:#1B1F3B;--muted:#667085;--brand:#26308F;--brand2:#1A2272;--deep:#141A5C;--sh:0 1px 2px rgba(20,26,92,.05),0 8px 24px -16px rgba(20,26,92,.25)}
@media(prefers-color-scheme:dark){:root{--bg:#0E1020;--paper:#171A30;--card:#171A30;--line:#2A2E4D;--ink:#ECEEFA;--muted:#A3A8C6;--brand:#9AA2FF}}
body{font-family:"Hind Siliguri","Noto Sans Bengali","Kohinoor Bangla","Nirmala UI","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;line-height:1.75}
.top{background:var(--card);border-bottom:1px solid var(--line)}
/* reading surface */
.rlayout{max-width:1240px;gap:1rem}
.page{background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);padding:2rem 2.2rem 1.6rem;max-width:720px;font-size:var(--fs,18px);line-height:1.8}
.spread .page{max-width:620px;min-height:78vh}
.page.pl{border-radius:12px 0 0 12px;box-shadow:var(--sh);border-right:0;background:linear-gradient(90deg,var(--paper) 94%,color-mix(in srgb,var(--line) 60%,var(--paper)))}
.page.pr{border-radius:0 12px 12px 0;background:linear-gradient(270deg,var(--paper) 94%,color-mix(in srgb,var(--line) 60%,var(--paper)))}
.page h2{font-size:1.45em;margin:.2em 0 .5em;color:var(--deep)}
.page h3{font-size:1.2em;margin:1.4em 0 .5em;padding-bottom:.35rem;border-bottom:2px solid var(--line);color:var(--deep)}
.page h4{font-size:1.05em;margin:1.2em 0 .4em;color:var(--brand)}
.page p{margin:.6rem 0}
.page::after{margin-top:1.4rem;opacity:.7}
.box{border-left:4px solid var(--brand);background:color-mix(in srgb,var(--brand) 5%,var(--paper));border-radius:10px;padding:.4rem 1rem;margin:1rem 0;font-size:.97em}
.toc{border-radius:12px;box-shadow:none;font-size:.95rem}
.toc button.on{background:color-mix(in srgb,var(--brand) 12%,var(--card));color:var(--brand);font-weight:700}
.rbar{box-shadow:0 1px 0 var(--line)}
/* test widgets */
.qz{border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:none;margin:1.4rem 0;font-size:.96em;overflow:visible}
.qz-hd{background:transparent!important;color:var(--ink)!important;border-bottom:1px solid var(--line);padding:.8rem 1rem;position:relative}
.qz-hd::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c,var(--brand));flex:none}
.qz-hd .ti{font-size:1rem;font-weight:700}
.qz-hd .sc{background:color-mix(in srgb,var(--c,var(--brand)) 12%,var(--card));color:var(--c,var(--brand));font-size:.82rem}
.qz-pg{height:3px;background:var(--line)}.qz-pg>i{background:var(--c,var(--brand))!important}
.qz-bd{padding:.6rem 1.1rem 1.1rem}
.qz-ins{background:color-mix(in srgb,var(--c,var(--brand)) 7%,var(--card));border-radius:10px;padding:.55rem .8rem;margin:.5rem 0 .4rem;color:var(--ink);font-size:.92em}
.qs{margin-top:.2rem}
.qi{padding:.85rem 0;border-bottom:1px solid var(--line);border-radius:0;background:transparent!important;border-left:0!important;border-right:0;border-top:0}
.qi:last-child{border-bottom:0}
.qi .q{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:.5rem}
.qi .n{flex:none;width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:color-mix(in srgb,var(--c,var(--brand)) 12%,var(--card));color:var(--c,var(--brand))}
.qi .qt{font-weight:600;line-height:1.55}
.qi .ti-in{width:100%;border:1.5px solid var(--line);background:var(--bg);border-radius:10px;padding:.55rem .75rem;font:inherit;font-size:.97em}
.qi .ti-in:focus{border-color:var(--c,var(--brand));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--brand)) 18%,transparent);background:var(--card)}
.qi.ok .ti-in{border-color:var(--ok);background:var(--okbg)}.qi.bad .ti-in{border-color:var(--bad);background:var(--badbg)}
.opts{display:grid;gap:.45rem}
.opt{display:flex;align-items:center;gap:.65rem;justify-content:flex-start;text-align:left;width:100%;background:var(--bg);color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:.5rem .75rem;font-weight:500}
.opt:hover:not(:disabled){border-color:var(--c,var(--brand));background:var(--card)}
.opt .l{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1.5px solid var(--line);font-weight:700;font-size:.8rem}
.opt.pick{border-color:var(--c,var(--brand));background:color-mix(in srgb,var(--c,var(--brand)) 9%,var(--card))}
.opt.pick .l{background:var(--c,var(--brand));border-color:var(--c,var(--brand));color:#fff}
.opt.right{border-color:var(--ok);background:var(--okbg);opacity:1}.opt.right .l{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.wrong{border-color:var(--bad);background:var(--badbg);opacity:1}.opt.wrong .l{background:var(--bad);border-color:var(--bad);color:#fff}
.opt:disabled{opacity:1;cursor:default}
.fb{margin-top:.55rem;padding:.55rem .8rem;border-radius:10px;font-size:.93em;line-height:1.55}
.fb.ok{background:var(--okbg);color:#0A6B4A}.fb.bad{background:var(--badbg);color:#B4233D}.fb.self{background:color-mix(in srgb,var(--brand) 8%,var(--card));color:var(--ink)}
@media(prefers-color-scheme:dark){.fb.ok{color:#7BE0B5}.fb.bad{color:#FF9AAE}}
.fb .xp{font-weight:700;opacity:.8}
.fb .mk{margin-top:.45rem;background:transparent;color:var(--ink);border:1.5px solid var(--line);padding:.25rem .7rem;font-size:.85rem;border-radius:99px}
.fb .mk:hover{border-color:var(--brand);background:var(--card)}.fb .mk.on{background:var(--ok);color:#fff;border-color:var(--ok)}
.chk{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);padding:.25rem .8rem;border-radius:99px;font-size:.88rem;font-weight:600}
.chk.on{background:var(--ok);border-color:var(--ok);color:#fff}
.qz-ft{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding-top:.9rem;margin-top:.3rem;border-top:1px solid var(--line)}
.qz-ft>button:not(.ghost){background:var(--c,var(--brand));color:#fff;padding:.65rem 1.6rem;font-size:1rem;border-radius:12px}
.qz-ft>button:not(.ghost):disabled{background:var(--line);color:var(--muted)}
.rs{margin:.6rem 0}
.res{display:flex;gap:1rem;align-items:center;padding:.9rem 1rem;border-radius:12px;background:color-mix(in srgb,var(--c,var(--brand)) 7%,var(--card));border:1px solid var(--line)}
.script{margin:.5rem 0 .8rem;padding:.7rem .9rem;border-radius:10px;background:var(--bg);border:1px dashed var(--line);font-style:italic}
.scr-row{margin:.4rem 0}
/* audio player */
.ap{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;margin:.7rem 0;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.ap .pp{flex:none;width:44px;height:44px;border-radius:50%;padding:0;background:var(--c,#0A8F86);color:#fff}
/* skeleton loader */
.skel{display:grid;gap:.8rem;padding:1.2rem .2rem}
.skel i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--line) 25%,color-mix(in srgb,var(--line) 50%,var(--paper)) 50%,var(--line) 75%);background-size:200% 100%;animation:shim 1.1s infinite linear}
@keyframes shim{to{background-position:-200% 0}}
/* progress page */
.pr-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;margin:1rem 0}
.pr-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;display:grid;gap:.1rem}
.pr-stat b{font-size:2rem;line-height:1.1;color:var(--brand)}.pr-stat span{color:var(--muted);font-size:.9rem}
.pr-stat.good b{color:var(--ok)}.pr-stat.mid b{color:#B7791F}.pr-stat.low b{color:var(--bad)}
.pr-list{padding:.3rem 1.1rem}
.pr-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(120px,1fr) auto;gap:.9rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line)}
.pr-row:last-child{border-bottom:0}
.pr-t{display:grid}.pr-bar{height:9px;border-radius:99px;background:var(--line);overflow:hidden}
.pr-bar>i{display:block;height:100%;background:var(--brand);border-radius:99px}.pr-bar.good>i{background:var(--ok)}.pr-bar.mid>i{background:#E0A100}.pr-bar.low>i{background:var(--bad)}
.pr-act{display:flex;gap:.6rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:760px){
  .page{padding:1.2rem 1rem 1rem;border-radius:10px;font-size:var(--fs,17px)}
  .pr-row{grid-template-columns:1fr}.pr-act{justify-content:flex-start}
  .qz-bd{padding:.4rem .8rem .9rem}
}