:root{
  --bg:#fbf9f4; --fg:#1c1a17; --mut:#6b665e; --line:#e6e0d4; --card:#fff;
  --acc:#8c1d2e; --acc2:#e0a85a; --chip:#f1ede2;
  --rad:14px; --maxw:40rem; --hdr:56px; --hdrw:64rem;
  --st-s:58%; --st-l:36%;
}
:root[data-theme=dark]{
  --bg:#12100e; --fg:#eceae5; --mut:#a19b90; --line:#2b2723; --card:#1a1714;
  --acc:#e2657c; --acc2:#e2b455; --chip:#231f1b;
  --st-s:55%; --st-l:68%;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#12100e; --fg:#eceae5; --mut:#a19b90; --line:#2b2723; --card:#1a1714;
  --acc:#e2657c; --acc2:#e2b455; --chip:#231f1b;
  --st-s:55%; --st-l:68%;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:'Noto Serif Bengali',system-ui,'Nirmala UI','Kalpurush',sans-serif;
  font-size:17.5px;line-height:1.85;
  padding-top:calc(var(--hdr) + env(safe-area-inset-top))}
main{max-width:var(--maxw);margin:0 auto;padding:1.5rem max(1.1rem,env(safe-area-inset-left)) 3rem}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:var(--acc);color:#fff;padding:.5rem 1rem;border-radius:8px;z-index:99}
a{color:var(--acc)}
h1{font-size:1.7rem;margin:.2em 0 .3em;text-wrap:balance}
h2{font-size:1.05rem;margin:1.7rem 0 .6rem}
.muted{color:var(--mut);font-size:.9em}
.top{position:fixed;inset-inline:0;top:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  height:calc(var(--hdr) + env(safe-area-inset-top));
  padding-inline:max(.9rem,env(safe-area-inset-left),calc((100% - var(--hdrw)) / 2));
  padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.4rem;font-weight:700;text-decoration:none;color:var(--fg)}
.hdr-r{display:flex;gap:.4rem}
.theme{background:none;border:1px solid var(--line);border-radius:9px;
  cursor:pointer;font-size:1rem;min-width:44px;min-height:44px;color:var(--fg)}
.theme.is-in{border-color:var(--acc);color:var(--acc)}
.foot{max-width:var(--maxw);margin:0 auto;padding:2rem 1.1rem 3rem;border-top:1px solid var(--line);color:var(--mut);font-size:.87rem}
.foot .progress-note{font-variant-numeric:tabular-nums}

.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.05em;color:var(--acc2);text-transform:uppercase;margin:0 0 .4rem}
.hero .lead{color:var(--mut);font-size:1.05rem}
.progress-row{display:flex;align-items:center;gap:.7rem;margin-top:1.2rem}
.progress-track{flex:1;height:8px;border-radius:999px;background:var(--chip);overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.progress-label{font-size:.82rem;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}

.section-h{font-size:1.1rem;margin:2rem 0 .8rem;border-top:1px solid var(--line);padding-top:1.4rem}
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.lesson-card{position:relative;display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad);overflow:hidden;text-decoration:none;color:var(--fg)}
.lesson-card-bar{display:block;height:5px;background:hsl(var(--hue) var(--st-s) var(--st-l))}
.lesson-card-body{padding:1rem 1.1rem}
.lesson-card-meta{font-size:.78rem;font-weight:700;color:hsl(var(--hue) var(--st-s) var(--st-l))}
.lesson-card h3{margin:.3em 0 .4em;font-size:1.02rem}
.lesson-card-cta{font-size:.85rem;color:var(--acc);font-weight:600}

.roadmap{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.78rem}
.rm-item{padding:.22rem .6rem;border-radius:999px;border:1px solid var(--line);color:var(--mut)}
.rm-item.done{border-color:transparent;background:hsl(var(--hue) var(--st-s) var(--st-l) / .16)}
.rm-item.done a{color:hsl(var(--hue) var(--st-s) var(--st-l));font-weight:700;text-decoration:none}

.class-card{--hue:0;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:var(--card)}
.class-card-bar{height:5px;background:hsl(var(--hue) var(--st-s) var(--st-l))}
.class-head{padding:1.3rem 1.4rem 1rem;border-bottom:1px solid var(--line)}
.class-head .meta{font-size:.78rem;font-weight:700;letter-spacing:.03em;color:hsl(var(--hue) var(--st-s) var(--st-l));
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.class-body{padding:1.2rem 1.4rem 1.6rem}
.class-body h2{color:hsl(var(--hue) var(--st-s) var(--st-l))}
.class-body p{margin:.75em 0}

.gloss{font-size:.85rem;color:var(--mut)}
.vowel-groups{display:grid;gap:.4rem;font-size:.92rem;margin:.8em 0}
.vg-row strong{color:hsl(var(--hue) var(--st-s) var(--st-l))}

.callout{background:var(--chip);border-radius:10px;padding:.9rem 1.05rem;margin:1.1rem 0;font-size:.94rem}
.callout.source{font-size:.85rem;color:var(--mut);display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  background:transparent;border:1px dashed var(--line)}
.confidence{font-weight:600;font-size:.78rem;color:var(--mut)}
.pride-box{border-inline-start:4px solid var(--acc2);background:var(--chip);border-radius:10px;padding:1rem 1.1rem;margin:1rem 0}
.pride-box p{margin:.6em 0}

.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.92rem}
th,td{border-bottom:1px solid var(--line);padding:.55rem .5rem;text-align:left;vertical-align:middle}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--mut)}
.tr-letter{font-weight:700;color:hsl(var(--hue) var(--st-s) var(--st-l));white-space:nowrap}

.puzzle-list{padding-inline-start:1.3em}
.puzzle-list li{margin:.5em 0}
.answer{color:var(--mut);font-size:.9em}

.cognate-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.cognate-list li{background:var(--chip);border-radius:10px;padding:.7rem .9rem;font-size:.92rem}

.mini-exam{background:var(--chip);border-radius:var(--rad);padding:1rem 1.1rem;
  border-inline-start:4px solid hsl(var(--hue) var(--st-s) var(--st-l))}
.mx-list{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.8rem}
.mx-list li{display:flex;flex-direction:column;gap:.25rem;font-size:.94rem;
  border-bottom:1px dashed var(--line);padding-bottom:.7rem}
.mx-list li:last-child{border-bottom:none;padding-bottom:0}
.mx-q{font-weight:600}

.mission{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.mission li{display:flex;align-items:flex-start;gap:.6rem;font-size:.94rem}
.mission li::before{content:'';flex:0 0 auto;width:1.1em;height:1.1em;margin-top:.2em;border-radius:5px;
  border:2px solid hsl(var(--hue) var(--st-s) var(--st-l))}
.badge-strip{margin-top:1.2rem;padding:.9rem 1.1rem;border-radius:10px;
  background:hsl(var(--hue) var(--st-s) var(--st-l) / .1);
  display:flex;align-items:center;gap:.7rem;font-size:.9rem}
.badge-strip .swatch{width:1.3em;height:1.3em;border-radius:50%;background:hsl(var(--hue) var(--st-s) var(--st-l));flex:0 0 auto}

.class-pager{display:flex;justify-content:space-between;gap:1rem;margin-top:1.2rem;font-size:.92rem}
.class-pager a{text-decoration:none;font-weight:600}
.class-pager .next-locked{color:var(--mut);font-style:italic;font-size:.85rem}

.badge{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600}

/* ---- account modal (optional cloud sync — never required to play) ---- */
/* the [hidden] rule must win over the plain-class display:flex below, or the
   browser's built-in "hidden means display:none" rule loses the cascade to
   this author rule and the modal stays visible even when JS sets .hidden --
   it would cover the entire page on every load, before anyone clicks the
   account button */
.acct-modal[hidden]{display:none}
/* align-items:flex-start (not center) + overflow-y on the modal itself is
   the load-bearing part: the profile view can get tall (demographic fields +
   password form + logout), and a centered flex item taller than the
   viewport clips off both top and bottom with no way to scroll to it --
   this keeps the top always reachable and lets the whole thing scroll. */
.acct-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;
  background:color-mix(in srgb,#000 55%,transparent);padding:1.5rem 1rem;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.acct-card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:1.5rem;max-width:22rem;width:100%;position:relative;margin:0 auto}
.acct-x{position:absolute;top:.3rem;right:.3rem;background:none;border:0;font-size:1.2rem;
  cursor:pointer;color:var(--mut);width:44px;height:44px;line-height:44px;text-align:center;
  padding:0;border-radius:9px}
.acct-x:active{background:var(--chip)}
.acct-card h2{margin-top:0;border:0;padding:0;font-size:1.25rem}
.acct-card input{display:block;width:100%;font:inherit;font-size:max(1rem,16px);padding:.65rem .9rem;
  border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);margin-bottom:.6rem}
.acct-card input:focus{outline:2px solid var(--acc);outline-offset:1px}
.acct-card form .btn{width:100%;border:0;font:inherit;font-size:1rem;cursor:pointer;margin-top:.2rem}
.acct-hint{color:var(--mut);font-size:.78rem;margin:-.4rem 0 .6rem;line-height:1.5}
.acct-err{color:#c0392b;font-size:.85rem;margin:.3rem 0}
.acct-ok{color:var(--acc);font-size:.85rem;margin:.3rem 0}
.acct-card select{display:block;width:100%;font:inherit;font-size:max(1rem,16px);padding:.65rem .9rem;
  border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);margin-bottom:.6rem}
.acct-label{display:block;font-size:.82rem;color:var(--mut);margin:.7rem 0 0}
.acct-label input,.acct-label select{margin-top:.3rem}
.acct-req{color:#c0392b}
#pfForm{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
#pfForm .btn{margin-top:1rem}
#pwForm{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
#pwForm h3{margin:0 0 .6rem;font-size:1rem;border:0;padding:0}
#pwForm .btn{margin-top:.3rem}
#acctLogout{display:block;margin:1.5rem auto 0}
.linklike{background:none;border:0;padding:0;color:var(--acc);text-decoration:underline;cursor:pointer;font:inherit}
.acct-nudge{background:var(--chip);border:1px solid var(--line);border-radius:var(--rad);
  padding:.8rem 1rem;margin:.8rem 0;font-size:.88rem;display:flex;gap:.6rem;align-items:center;
  justify-content:space-between;flex-wrap:wrap}