:root{
  --bg:#fbf9f4; --fg:#1c1a17; --mut:#6b665e; --line:#e6e0d4; --card:#fff;
  --acc:#0f6b52; --acc2:#c2831a; --chip:#f1ede2;
  --rad:14px; --maxw:40rem; --hdr:56px; --hdrw:64rem;
  --root-s:58%; --root-l:36%;
}
:root[data-theme=dark]{
  --bg:#12100e; --fg:#eceae5; --mut:#a19b90; --line:#2b2723; --card:#1a1714;
  --acc:#4fd1a5; --acc2:#e2b455; --chip:#231f1b;
  --root-s:55%; --root-l:68%;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#12100e; --fg:#eceae5; --mut:#a19b90; --line:#2b2723; --card:#1a1714;
  --acc:#4fd1a5; --acc2:#e2b455; --chip:#231f1b;
  --root-s:55%; --root-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}
.ar{direction:rtl;font-family:'Noto Serif Bengali',ui-serif,serif}
.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(--root-s) var(--root-l))}
.lesson-card-body{padding:1rem 1.1rem}
.lesson-card-meta{font-size:.78rem;font-weight:700;color:hsl(var(--hue) var(--root-s) var(--root-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(--root-s) var(--root-l) / .16)}
.rm-item.done a{color:hsl(var(--hue) var(--root-s) var(--root-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(--root-s) var(--root-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(--root-s) var(--root-l));
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.class-head .root-mark{border:1px solid currentColor;border-radius:6px;padding:.05rem .4rem;font-size:1.05rem}
.class-body{padding:1.2rem 1.4rem 1.6rem}
.class-body h2{color:hsl(var(--hue) var(--root-s) var(--root-l))}
.class-body h3{font-size:.95rem;margin:1.5rem 0 .7rem;color:var(--fg)}
.class-body p{margin:.75em 0}
.section-lead{color:var(--mut);font-size:.9rem;margin-top:-.2em}

.root-letters{text-align:center;font-size:2rem;font-weight:700;margin:.7em 0;
  color:hsl(var(--hue) var(--root-s) var(--root-l));letter-spacing:.08em}
.gloss{font-size:.85rem;color:var(--mut)}
.gloss.center{text-align:center;margin-top:-.4em}
.arabic-big{direction:rtl;text-align:center;font-size:1.45rem;line-height:2;margin:.8em 0;
  color:hsl(var(--hue) var(--root-s) var(--root-l));font-weight:700}

.callout{background:var(--chip);border-radius:10px;padding:.9rem 1.05rem;margin:1.1rem 0;font-size:.94rem}
.callout.tip{border-inline-start:4px solid var(--acc2)}
.callout.source{font-size:.85rem;color:var(--mut);display:flex;align-items:baseline;gap:.5rem;
  background:transparent;border:1px dashed var(--line)}
.confidence{font-weight:700;font-size:.72rem;padding:.1rem .5rem;border-radius:999px;
  background:hsl(var(--hue) var(--root-s) var(--root-l) / .16);color:hsl(var(--hue) var(--root-s) var(--root-l))}
.stat-strip{border-inline-start:4px solid hsl(var(--hue) var(--root-s) var(--root-l))}
.stat-strip p{margin:.5em 0}
.stat-strip strong{color:hsl(var(--hue) var(--root-s) var(--root-l))}

.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)}
.fruit-ar{font-size:1.2rem;color:hsl(var(--hue) var(--root-s) var(--root-l));font-weight:700}
.fruit-en{font-size:.82rem;color:var(--mut);font-style:italic}
.gloss-en{font-style:italic}

/* -------- mindmap: root-centred network of a class's practice words -------- */
.mindmap-wrap{margin:.8rem 0 1.2rem}
.mindmap{display:block;width:100%;max-width:26rem;margin:0 auto;overflow:visible}
.mm-hint{margin-top:.6rem}
.mm-line{stroke:hsl(var(--hue) var(--root-s) var(--root-l) / .3);stroke-width:1.5;transition:stroke .15s}
.mm-root{fill:hsl(var(--hue) var(--root-s) var(--root-l));stroke:var(--card);stroke-width:3}
.mm-root-label{font-size:1.1rem;font-weight:700;fill:var(--card);text-anchor:middle;dominant-baseline:middle;direction:rtl}
.mm-node{cursor:pointer}
.mm-node circle{fill:var(--card);stroke:hsl(var(--hue) var(--root-s) var(--root-l) / .55);stroke-width:1.5;transition:fill .15s,stroke .15s}
.mm-node .mm-ar{font-size:.98rem;font-weight:700;fill:hsl(var(--hue) var(--root-s) var(--root-l));text-anchor:middle;direction:rtl}
.mm-node .mm-tr{font-size:.5rem;fill:var(--mut);text-anchor:middle;font-family:system-ui,sans-serif}
.mm-node:hover circle,.mm-node:focus-visible circle,.mm-node.active circle{
  fill:hsl(var(--hue) var(--root-s) var(--root-l));stroke:hsl(var(--hue) var(--root-s) var(--root-l))}
.mm-node:hover .mm-ar,.mm-node:focus-visible .mm-ar,.mm-node.active .mm-ar{fill:var(--card)}
.mm-node:hover .mm-tr,.mm-node:focus-visible .mm-tr,.mm-node.active .mm-tr{fill:var(--card)}
.mm-node:focus-visible{outline:none}

/* -------- practice word cards -------- */
.pw-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pw-row{border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;transition:background .2s,border-color .2s}
.pw-row.hl{background:hsl(var(--hue) var(--root-s) var(--root-l) / .1);border-color:hsl(var(--hue) var(--root-s) var(--root-l) / .5)}
.pw-head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.35rem}
.pw-ar{font-size:1.3rem;color:hsl(var(--hue) var(--root-s) var(--root-l));font-weight:700}
.pw-translit{font-weight:700}
.pw-en{font-size:.82rem;color:var(--mut);font-style:italic}
.pw-use,.pw-tip{font-size:.88rem;margin:.3em 0}
.pw-ref{font-size:.72rem;color:var(--mut);margin:.3em 0 0}

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

.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(--root-s) var(--root-l))}
.badge-strip{margin-top:1.2rem;padding:.9rem 1.1rem;border-radius:10px;
  background:hsl(var(--hue) var(--root-s) var(--root-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(--root-s) var(--root-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}

.next-up{margin:1.6rem 0 0;padding:1rem 1.2rem;border:1px dashed var(--line);border-radius:var(--rad);
  color:var(--mut);font-size:.9rem;font-style:italic}

.sum-roots{flex-direction:column;align-items:stretch;gap:.5rem}
.sum-roots li{display:flex;align-items:baseline;gap:.6rem;padding:.6rem .8rem;border-radius:8px;
  background:hsl(var(--hue) var(--root-s) var(--root-l) / .08);border-inline-start:3px solid hsl(var(--hue) var(--root-s) var(--root-l))}
.sum-root{font-size:1.15rem;font-weight:700;color:hsl(var(--hue) var(--root-s) var(--root-l));min-width:4.5em}
.sum-title{color:var(--fg);font-size:.92rem}

/* ---- 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}