:root{
  --ink:#12263A; --ink2:#4B5E70; --paper:#F4F7F9; --card:#fff; --line:#DCE3EA;
  --learn:#0B7A6B; --learn-d:#095F53; --learn-soft:#E3F4F0;
  --lab:#3B3FA8; --lab-d:#2D3086; --lab-soft:#E8E9FA;
  --amber:#F2B134; --amber-soft:#FEF3DB; --bad:#B4372F; --bad-soft:#FCEAE8; --ok-soft:#E3F4F0;
  --r:14px; --r-s:9px;
  --f-body:"Hind Siliguri","Segoe UI",system-ui,sans-serif; --f-head:"Bricolage Grotesque","Hind Siliguri",system-ui,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--f-body)}
h1,h2,h3{font-family:var(--f-head);line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.2vw,2.9rem)} h2{font-size:1.3rem} p{margin:0 0 1em}
a{color:var(--lab)} img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px} .narrow{max-width:780px}
.sr{position:absolute;left:-9999px} .small,small{font-size:.86rem;color:var(--ink2)} .muted{color:var(--ink2)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
/* header */
.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 1.15rem var(--f-head)}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav a{padding:7px 12px;border-radius:999px;text-decoration:none;color:var(--ink2);font-weight:500;font-size:.95rem}
.nav a:hover{background:var(--paper)} .nav a.on{background:var(--ink);color:#fff}
.langsw{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.langsw a{padding:5px 13px;text-decoration:none;color:var(--ink2);font-size:.9rem}
.langsw a.on{background:var(--amber);color:var(--ink);font-weight:600}
/* buttons */
.btn{display:inline-block;border:0;border-radius:var(--r-s);padding:11px 20px;font:600 1rem var(--f-body);cursor:pointer;text-decoration:none;color:#fff;background:var(--ink)}
.btn.learn{background:var(--learn)} .btn.learn:hover{background:var(--learn-d)}
.btn.lab{background:var(--lab)} .btn.lab:hover{background:var(--lab-d)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--ink2)}
.btn.danger{background:var(--bad)} .btn.sm{padding:6px 12px;font-size:.88rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
/* hero */
.hero{padding:44px 0 26px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
.lead{font-size:1.15rem;color:var(--ink2);max-width:56ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.live{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 10px 30px -18px rgba(18,38,58,.35)}
.live textarea,.widget textarea,.widget input,.reflect-l+textarea,.form input,.form select,.form textarea,.toolbar input{width:100%;padding:10px 12px;border:1px solid #C5D0DA;border-radius:var(--r-s);font:inherit;background:#fff;color:var(--ink)}
.hint{font-size:.82rem;color:var(--ink2);margin:4px 0 6px}
.dots{width:100%;height:70px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:6px 11px;font-size:.9rem}
.chip b{display:block;font-size:1.05rem;font-family:var(--f-head)} .chip.warn{background:var(--amber-soft);border-color:#EBC672}
/* two big cards */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:10px auto 8px}
.bigcard{display:flex;flex-direction:column;gap:6px;padding:28px;border-radius:var(--r);text-decoration:none;color:#fff;min-height:230px}
.bigcard.learn{background:var(--learn)} .bigcard.lab{background:var(--lab)}
.bigcard h2{font-size:1.6rem;color:#fff} .bigcard p{opacity:.95;max-width:46ch}
.bigcard .flow{font-weight:600;background:rgba(255,255,255,.16);padding:4px 12px;border-radius:999px;align-self:flex-start;font-size:.92rem}
.bigcard .go{margin-top:auto;font-weight:700;border-bottom:2px solid var(--amber);align-self:flex-start}
.bigcard:hover{filter:brightness(1.07)}
/* blocks */
.block{padding:34px 20px}.block-head{margin-bottom:14px}.block-head p{color:var(--ink2);margin:0}
.hscroll{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity}
.chip-card{flex:0 0 230px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:4px}
.chip-card:hover{border-color:var(--learn)} .chip-card .ico{font-size:1.6rem} .chip-card small{line-height:1.4}
.chip-card.more{justify-content:center;background:var(--learn-soft);border-color:#B6E0D8;color:var(--learn-d)}
.steps5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;list-style:none;margin:0;padding:0;counter-reset:s}
.steps5 li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--lab);border-radius:var(--r-s);padding:12px 14px;display:flex;flex-direction:column}
.steps5 span{font-size:.88rem;color:var(--ink2)}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.mod,.chap{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:5px}
.mod:hover{border-color:var(--lab)} .chap:hover{border-color:var(--learn)}
.chap .ico{font-size:1.7rem;line-height:1} .chap .desc{color:var(--ink2);font-size:.92rem}
.chap.soon{opacity:.72}
.badge{display:inline-block;font-size:.78rem;font-weight:600;padding:2px 10px;border-radius:999px;align-self:flex-start}
.badge.free{background:var(--ok-soft);color:var(--learn-d)} .badge.paid{background:var(--amber-soft);color:#8A5A00} .badge.soon{background:#EEF1F4;color:var(--ink2)}
.meter{height:8px;background:#E4EAF0;border-radius:99px;overflow:hidden;margin:8px 0 4px} .meter.sm{height:6px}
.meter span{display:block;height:100%;background:var(--amber);border-radius:99px}
/* page heads */
.pagehead{padding:34px 0 22px;border-bottom:1px solid var(--line);background:#fff}
.pagehead.learn{border-top:5px solid var(--learn)} .pagehead.lab{border-top:5px solid var(--lab)}
.crumb{display:inline-block;margin-bottom:8px;text-decoration:none;color:var(--ink2);font-size:.92rem}
.privacy-pill{display:inline-block;background:var(--lab-soft);color:var(--lab-d);padding:6px 14px;border-radius:999px;font-size:.9rem;margin:0}
.strip{display:flex;flex-direction:column;background:var(--amber-soft);border:1px solid #EBC672;border-radius:var(--r);padding:14px 18px;margin-bottom:18px;text-decoration:none;color:var(--ink)}
/* lesson list */
.lesson-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lesson-list li>a,.lesson-list li>div{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:13px 16px;text-decoration:none;color:var(--ink)}
.lesson-list li>a:hover{border-color:var(--learn)} .lesson-list .state{width:26px;height:26px;border-radius:50%;background:var(--learn-soft);color:var(--learn-d);display:grid;place-items:center;font-weight:700;flex:none}
.lesson-list .ltitle{flex:1;font-weight:500}.lesson-list li.soon{opacity:.65}
/* lesson */
.lesson{padding-top:26px;padding-bottom:50px}
.intro{font-size:1.2rem;line-height:1.6}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin:0 0 14px}
.box h2{font-size:1.02rem;margin-bottom:6px;color:var(--ink2);font-family:var(--f-body);font-weight:700}
.box p:last-child{margin-bottom:0}
.box.why{background:var(--lab-soft);border-color:#CCCEF2}.box.example{background:var(--amber-soft);border-color:#EBC672}
.box.take{background:var(--learn);color:#fff;border:0}.box.take h2{color:#CFF1EA}
.box.yes{border-left:5px solid var(--learn)}.box.no{border-left:5px solid var(--bad)}
.box.mini pre{margin:0;white-space:pre-wrap;font:.95rem/1.7 ui-monospace,Menlo,Consolas,"Hind Siliguri",monospace;background:var(--paper);padding:12px;border-radius:var(--r-s)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.two .box{margin:0 0 14px}
ul.ticks,ul.crosses{list-style:none;margin:0;padding:0}
ul.ticks li,ul.crosses li{padding-left:26px;position:relative;margin:6px 0}
ul.ticks li::before{content:"✓";position:absolute;left:0;color:var(--learn);font-weight:700}
ul.crosses li::before{content:"✕";position:absolute;left:0;color:var(--bad);font-weight:700}
.box.practice{border:2px solid var(--learn)}
.reflect-l{display:block;font-weight:600;margin:14px 0 4px}
.answer{background:var(--learn-soft);border-radius:var(--r-s);padding:12px 16px;margin-top:12px}
.lesson-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.pn{display:flex;gap:16px}.pn a{text-decoration:none;font-weight:600;color:var(--learn-d)}
.callout{background:var(--amber-soft);border:1px solid #EBC672;padding:18px;border-radius:var(--r)}
/* widgets */
.widget{margin:10px 0}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wbox{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);padding:12px}
.wbox label{font-weight:600;display:block;margin-bottom:4px}
.wrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
.wout{margin-top:12px}.wout .explain{background:var(--lab-soft);border-radius:var(--r-s);padding:10px 14px;margin-top:10px}
.wout .err{background:var(--bad-soft);color:var(--bad);border-radius:var(--r-s);padding:10px 14px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.qopts{display:grid;gap:8px;margin-top:10px}
.qopts button{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;font:inherit;cursor:pointer;color:var(--ink)}
.qopts button:hover{border-color:var(--learn);background:var(--learn-soft)}
.trail{font-size:.88rem;color:var(--ink2);margin-bottom:8px}
.leaf{border:2px solid var(--learn);border-radius:var(--r);padding:20px;background:#fff}
.leaf h3{font-size:1.5rem;color:var(--learn-d)}
.whybox{background:var(--learn-soft);border-radius:var(--r-s);padding:10px 14px;margin:10px 0}
/* lab */
.stepper{display:flex;list-style:none;margin:0 0 22px;padding:0;gap:6px;flex-wrap:wrap}
.stepper li{flex:1;min-width:92px;text-align:center;padding:9px 6px;border-radius:var(--r-s);background:#E4EAF0;color:var(--ink2);font-weight:600;font-size:.92rem}
.stepper li.done{background:var(--lab-soft);color:var(--lab-d);cursor:pointer}.stepper li.on{background:var(--lab);color:#fff}
.drop{display:flex;flex-direction:column;align-items:center;gap:10px;padding:42px 20px;border:2px dashed #AEB6E8;background:#fff;border-radius:var(--r);text-align:center;cursor:pointer}
.drop.over{background:var(--lab-soft)}
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-s)}
.tbl{border-collapse:collapse;width:100%;font-size:.93rem}
.tbl th,.tbl td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl th{background:var(--paper);font-weight:600}.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}.toolbar input{max-width:280px}
.catbar{display:flex;gap:6px;flex-wrap:wrap}
.catbar button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 13px;font:inherit;font-size:.9rem;cursor:pointer}
.catbar button.on{background:var(--lab);color:#fff;border-color:var(--lab)}
.modc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.modc:hover:not(.locked){border-color:var(--lab)}.modc.locked{background:#FAFAFB}
.modc small{color:var(--ink2)}.modc .lockmsg{color:#8A5A00;font-size:.85rem}
.varform{display:grid;gap:12px;max-width:560px;margin:12px 0}
.varform label{font-weight:600;display:block}.varform select,.varform input{width:100%;margin-top:4px;padding:10px;border:1px solid #C5D0DA;border-radius:var(--r-s);font:inherit;font-weight:400}
.varform select[multiple]{min-height:120px}
.vbox{border-radius:var(--r);padding:14px 18px;margin:10px 0}
.vbox.err{background:var(--bad-soft);border:1px solid #EDB3AE}.vbox.warn{background:var(--amber-soft);border:1px solid #EBC672}.vbox.okb{background:var(--ok-soft);border:1px solid #9AD5CB}
.vbox ul{margin:6px 0 0;padding-left:20px}
.res h2{margin-top:22px}.res .interp{background:#fff;border-left:5px solid var(--lab);padding:14px 18px;border-radius:var(--r-s)}
.res .concl{background:var(--lab);color:#fff;padding:12px 18px;border-radius:var(--r-s);margin-top:12px}
.res svg.chart{background:#fff;border:1px solid var(--line);border-radius:var(--r-s);width:100%;max-width:620px;height:auto}
.exportbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
/* footer */
.foot{margin-top:40px;background:var(--ink);color:#C9D5E0;padding:22px 0}
.foot .privacy{background:rgba(255,255,255,.08);display:inline-block;padding:7px 14px;border-radius:999px;margin:0 0 10px;font-size:.92rem}.foot .small{color:#98A9B9;margin:0}
/* admin & forms */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 0 12px}
.card summary{cursor:pointer}.stat{display:flex;flex-direction:column}.stat strong{font:700 2rem var(--f-head);color:var(--lab)}
.admnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.admnav a{background:#fff;border:1px solid var(--line);padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--ink)}
.form label{display:block;font-weight:600;margin:10px 0}.form input,.form select,.form textarea{margin-top:4px;font-weight:400}
.form .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.checks{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0}.checks label{display:flex;align-items:center;gap:6px;margin:0;font-weight:500}.checks input{width:auto;margin:0}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88rem}
.flash{background:var(--ok-soft);border:1px solid #9AD5CB;padding:10px 14px;border-radius:var(--r-s);margin:10px 0}.flash.bad{background:var(--bad-soft);border-color:#EDB3AE}
.langtabs{display:flex;gap:6px;margin:14px 0}.langtabs button{border:1px solid var(--line);background:#fff;padding:7px 18px;border-radius:999px;cursor:pointer;font:inherit}.langtabs button.on{background:var(--amber);font-weight:600}
.inline{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.inline select{padding:8px;border-radius:var(--r-s);border:1px solid #C5D0DA}
.rows{display:grid;gap:6px}.rowgrid{display:grid;grid-template-columns:var(--cols);gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:10px 14px;margin:0}
.rowgrid.head{background:transparent;border:0;font-weight:700;color:var(--ink2);padding-bottom:0}
.rowgrid input[type=number],.rowgrid select{padding:6px 8px;border:1px solid #C5D0DA;border-radius:6px;font:inherit;width:100%}
.rowgrid input[type=checkbox]{width:18px;height:18px}
/* responsive + print */
@media(max-width:860px){.hero-grid,.pair,.two,.wgrid{grid-template-columns:1fr}.steps5{grid-template-columns:1fr 1fr}.rowgrid{grid-template-columns:1fr 1fr}.rowgrid.head{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.top,.foot,.noprint,.stepper,.pagehead p,.privacy-pill{display:none!important}body{background:#fff}.panel[hidden]{display:none}.res .concl{background:#fff;color:#000;border:1px solid #000}}