:root{
  --k-bg:#F7FAF7; --k-bg2:#EEF5EF; --k-surface:#FFFFFF; --k-surface2:#F7FAF7;
  --k-text:#17251B; --k-muted:#5E6F63; --k-faint:#8A978D;
  --k-line:#DEE8DF; --k-line-soft:#EEF3EF;
  --k-accent:#149247; --k-accent-soft:#E4F2E8; --k-on-accent:#052E12;
  --k-green1:#4ADE80; --k-green2:#16A34A;
  --k-header:rgba(255,255,255,.94); --k-header-line:#E1EBE3;
  --k-shadow:rgba(23,37,27,.08); --k-shadow-lg:rgba(23,37,27,.16);
  --k-footer:#0F3D24; --k-footer-line:#1C5734; --k-footer-muted:#B7D6C3;
  --k-footer-text:#FFFFFF;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --k-bg:#0E1512; --k-bg2:#131C17; --k-surface:#161F1A; --k-surface2:#1B2620;
    --k-text:#E7EEE8; --k-muted:#9FAFA4; --k-faint:#77877C;
    --k-line:#2A3630; --k-line-soft:#222D27;
    --k-accent:#4ADE80; --k-accent-soft:#16301F; --k-on-accent:#052E12;
    --k-green1:#4ADE80; --k-green2:#16A34A;
    --k-header:rgba(14,21,18,.92); --k-header-line:#25322B;
    --k-shadow:rgba(0,0,0,.40); --k-shadow-lg:rgba(0,0,0,.55);
    --k-footer:#0A100D; --k-footer-line:#1E2A23; --k-footer-muted:#9FB4A6;
    --k-footer-text:#F1F6F2;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --k-bg:#0E1512; --k-bg2:#131C17; --k-surface:#161F1A; --k-surface2:#1B2620;
  --k-text:#E7EEE8; --k-muted:#9FAFA4; --k-faint:#77877C;
  --k-line:#2A3630; --k-line-soft:#222D27;
  --k-accent:#4ADE80; --k-accent-soft:#16301F; --k-on-accent:#052E12;
  --k-green1:#4ADE80; --k-green2:#16A34A;
  --k-header:rgba(14,21,18,.92); --k-header-line:#25322B;
  --k-shadow:rgba(0,0,0,.40); --k-shadow-lg:rgba(0,0,0,.55);
  --k-footer:#0A100D; --k-footer-line:#1E2A23; --k-footer-muted:#9FB4A6;
  --k-footer-text:#F1F6F2;
  color-scheme:dark;
}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 38px;border-radius:999px;cursor:pointer;
  background:transparent;border:1.5px solid var(--k-line);color:var(--k-muted);
  padding:0;-webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s,color .15s}
.theme-toggle:hover{background:var(--k-accent-soft);border-color:var(--k-accent);color:var(--k-accent)}
.theme-toggle:focus-visible{outline:3px solid var(--k-accent);outline-offset:2px}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}
@media(max-width:880px){.theme-toggle{width:40px;height:40px;flex:0 0 40px;
  background:var(--k-accent-soft);border-color:transparent;color:var(--k-accent)}}
/* the light-bar logo has a dark wordmark and would vanish on a dark bar */
.site-logo{display:block;line-height:0}
.site-logo .lg-dark{display:none}
:root[data-theme="dark"] .site-logo .lg-light{display:none}
:root[data-theme="dark"] .site-logo .lg-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .site-logo .lg-light{display:none}
  :root:not([data-theme="light"]) .site-logo .lg-dark{display:block}
}

/* the hero render carries a near-white ground of its own; on a dark page
   give it a light card so it reads as deliberate rather than a stray box */
:root[data-theme="dark"] .hero-image img{mix-blend-mode:screen;filter:none;border-radius:0}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-image img{mix-blend-mode:screen;filter:none;border-radius:0}
}

/* content screenshots are light captures - take the glare off */
:root[data-theme="dark"] .artwrap img{filter:brightness(.92) contrast(1.02)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .artwrap img{filter:brightness(.92) contrast(1.02)}
}

/* the green CTA blooms on a dark ground - trim the glow */
:root[data-theme="dark"] .nav-download{box-shadow:0 2px 8px rgba(0,0,0,.45)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav-download{box-shadow:0 2px 8px rgba(0,0,0,.45)}
}

/* cards need a lifted surface once inverted, not the page ground */
:root[data-theme="dark"] .section-grid a{background:var(--k-surface)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .section-grid a{background:var(--k-surface)}
}

::selection{background:var(--k-accent);color:var(--k-on-accent)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Manrope',system-ui,-apple-system,sans-serif;background:var(--k-bg);color:var(--k-text);line-height:1.65}
.site-header{position:sticky;top:0;z-index:9999;background:var(--k-header);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--k-line);box-shadow:0 1px 3px rgba(23,37,27,.05)}
.header-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:0 20px;height:64px}
.site-logo{order:2}
.site-nav{order:3}
.header-actions{order:4}
.nav-burger{order:1}
.site-logo img{height:46px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.site-nav>div{position:relative}
.site-nav a{color:var(--k-text);text-decoration:none;font-weight:700;font-size:14px;padding:9px 13px;border-radius:9px;display:block;white-space:nowrap;transition:color .15s,background .15s}
.site-nav a:hover{background:var(--k-accent-soft);color:var(--k-accent)}
.nav-download{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,var(--k-green1),var(--k-green2));
  color:var(--k-on-accent)!important;font-weight:800;font-size:14px;text-decoration:none;padding:9px 16px;
  border-radius:10px;white-space:nowrap;min-height:40px;
  box-shadow:0 3px 10px rgba(34,197,94,.30);transition:filter .15s}
.nav-download:hover{filter:brightness(1.06)}
@media(max-width:880px){
  .nav-download span{display:none}
  .nav-download{padding:0;width:40px;height:40px;min-height:40px;justify-content:center;border-radius:11px}
  .nav-download svg{margin:0!important}
}
.nav-submenu{display:none;position:absolute;top:100%;left:0;background:var(--k-surface);border:1px solid var(--k-line);border-radius:12px;padding:7px;min-width:235px;box-shadow:0 14px 34px rgba(23,37,27,.13)}
.nav-dropdown:hover .nav-submenu,.nav-dropdown:focus-within .nav-submenu{display:block}
.nav-submenu a{padding:9px 12px;font-size:13.5px}
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;border-radius:9px;
  -webkit-tap-highlight-color:transparent}
.nav-burger:hover{background:var(--k-accent-soft)}
.nav-burger span{display:block;width:19px;height:2px;background:var(--k-text);margin:4px 0;border-radius:2px;
  transition:background .15s}
#nav-toggle{display:none}
@media(max-width:880px){
.header-inner{gap:10px;padding:0 12px}
/* the logo leads; every control beside it is deliberately smaller */
.nav-burger{display:block;margin-left:-8px;padding:6px}
.nav-burger span{width:15px;height:2px;margin:3px 0}
.site-logo{margin-left:-5px}
.site-logo img{height:44px}
.header-actions{gap:6px;margin-left:auto}
/* download lives in the hero and the page body on mobile; in the bar it only
   crowded the row */
.nav-download{display:none}
.theme-toggle{width:34px;height:34px;flex:0 0 34px}
.site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--k-header);
  flex-direction:column;align-items:stretch;padding:10px 14px 18px;gap:2px;
  border-top:1px solid var(--k-header-line);box-shadow:0 12px 26px var(--k-shadow-lg);
  max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
#nav-toggle:checked~.site-nav{display:flex}
.site-nav a{padding:12px 12px;min-height:46px;display:flex;align-items:center}
}
/* At 360px the four controls plus the logo overflow. The language pill keeps
   its label - that word IS the signal that the site speaks Bengali - so the
   theme button is the one that steps aside; the OS preference still applies. */
@media(max-width:399px){
  .header-inner{gap:6px;padding:0 8px}
  .site-logo{margin-left:-4px}
  .site-logo img{height:40px}
  .theme-toggle{display:none}
  .lang-switch{padding:0 8px;height:32px;min-height:32px}
  .nav-burger span{width:14px}
}
.site-footer{background:var(--k-footer);margin-top:0}
.footer-inner{max-width:1120px;margin:0 auto;padding:40px 20px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.site-footer h4{color:var(--k-footer-text);font-size:14px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:12px}
.site-footer a{display:block;color:var(--k-footer-muted);text-decoration:none;font-size:13.5px;padding:4px 0}
.site-footer a:hover{color:var(--k-footer-text)}
.footer-brand p{color:var(--k-footer-muted);font-size:13.5px;margin:10px 0 14px;max-width:260px}
.footer-legal{border-top:1px solid var(--k-footer-line);margin-top:30px;padding:16px 20px;text-align:center;color:var(--k-footer-muted);font-size:12.5px}
.rel{background:var(--k-bg2);padding:44px 20px;border-top:1px solid var(--k-line)}
.rel-in{max-width:980px;margin:0 auto}
.rel h2{font-size:21px;font-weight:800;text-align:center;margin-bottom:22px}
.rel-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.rel a{background:var(--k-surface);border:1px solid var(--k-line);border-radius:14px;padding:18px;text-decoration:none;color:inherit;display:block;transition:.15s;box-shadow:0 2px 8px rgba(23,37,27,.04)}
.rel a:hover{border-color:var(--k-accent);box-shadow:0 8px 22px rgba(20,146,71,.12);transform:translateY(-2px)}
.rel b{display:block;font-size:15px;margin-bottom:5px;color:var(--k-accent)}
.rel span{font-size:13px;color:var(--k-muted);line-height:1.5}
.ez-toc-container{display:none!important}
.header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lang-switch{display:inline-flex;align-items:center;gap:7px;text-decoration:none!important;
  background:var(--k-surface);border:1.5px solid var(--k-accent);border-radius:999px;
  padding:6px 13px;color:var(--k-accent)!important;font-weight:800;font-size:12px;letter-spacing:.3px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.lang-switch svg{width:14px;height:14px;flex:0 0 auto}
.lang-switch .lang-label{line-height:1.5;white-space:nowrap}