/* ==========================================================================
   শিক্ষাপথ — product layer v5
   Components read --s-* tokens. Surfaces: alpha hairlines, petrol shadows.
   ========================================================================== */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--s-canvas); color:var(--s-body);
  font-family:var(--font); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; font-synthesis-weight:none; font-synthesis-style:none;
  transition:background-color var(--m-ground) var(--ease), color var(--m-ground) var(--ease);
  overflow-wrap:break-word; position:relative; isolation:isolate;
}
:lang(en){font-family:var(--latin)}
[lang="bn"], .bn{line-height:var(--lh-body); letter-spacing:normal; word-break:normal}
[lang="bn"] h1, [lang="bn"] h2, [lang="bn"] h3, [lang="bn"] h4{line-height:var(--lh-h2)}
/* Bangla faces ship no italic; emphasis is carried by weight or colour instead. */
[lang="bn"] :is(em,i,cite){font-style:normal}

h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0}
button,input,textarea{font:inherit}

svg.lucide{
  width:1em; height:1em; stroke:currentColor; fill:none;
  flex:none; display:block;
}
h1,h2,h3,h4,h5{color:var(--s-tx); font-weight:var(--fw-semibold); text-wrap:balance}
strong,b{font-weight:var(--fw-semibold)}

:focus-visible{
  outline:3px solid var(--s-ring); outline-offset:2px; border-radius:var(--r-xs);
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-100px;z-index:200;background:var(--s-brand-a);
  color:var(--s-onbrand);padding:12px 16px;border-radius:var(--r-md);font-size:var(--fs-small)}
.skip:focus{top:calc(var(--header-h) + var(--s4))}

/* paper grain — the one texture in the system */
body.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:var(--s-grain); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Bangla typography
   ========================================================================== */
.t-display{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--fw-semibold);color:var(--s-tx)}
.t-h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-semibold);color:var(--s-tx)}
.t-h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-semibold);color:var(--s-tx)}
.t-h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-semibold);color:var(--s-tx)}
.t-lede{font-size:var(--fs-lede);line-height:var(--lh-lede);color:var(--s-soft)}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body)}
.t-dialogue{font-size:var(--fs-small);line-height:var(--lh-small)}
.t-ui{font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:var(--fw-semibold)}
.t-cap{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--s-mute)}
.t-label{font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--fw-medium);color:var(--s-mute)}
.t-micro{font-size:var(--fs-micro);line-height:var(--lh-micro)}
.num{font-family:var(--font);font-variant-numeric:tabular-nums}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:600; font-size:var(--fs-ui); line-height:1.3;
  padding:11px 20px; border-radius:var(--r-md); border:1px solid transparent;
  cursor:pointer; text-decoration:none; min-height:44px; position:relative;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
    background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible{
  outline:3px solid var(--s-ring); outline-offset:2px;
}
.btn:active:not(:disabled), .btn-primary:active:not(:disabled){transform:translateY(0) scale(.985)}
.btn .arr, .btn-primary .arr{display:inline-block; transition:transform var(--t-base) var(--ease-spring)}
.btn:hover .arr, .btn-primary:hover .arr{transform:translateX(3px)}

.btn-p,
.btn-primary{
  background:linear-gradient(180deg,#347FA3 0%,var(--s-brand) 100%);
  color:var(--s-onbrand);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px -8px rgba(0,59,83,.55);
}
.btn-p:hover:not(:disabled),
.btn-primary:hover:not(:disabled){
  background:linear-gradient(180deg,#2F789B 0%,var(--s-brand-h) 100%);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 22px -10px rgba(0,59,83,.6);
}
.btn:disabled, .btn-d, .btn-primary:disabled, .btn-p:disabled{
  background:var(--s-sunken); color:var(--s-mute); cursor:not-allowed;
  box-shadow:none; transform:none; opacity:1; filter:none;
}

.btn-s, .btn-secondary, .btn-ghost{
  background:var(--s-surface); color:var(--s-brand-h);
  border-color:var(--s-line-mid); box-shadow:var(--s-sh1);
}
.btn-s:hover, .btn-secondary:hover, .btn-ghost:hover{
  border-color:var(--s-brand); background:var(--s-brand-pale); transform:translateY(-1px);
}
.btn-t{background:transparent; color:var(--s-brand-h); padding:11px 12px; box-shadow:none}
.btn-t:hover{background:var(--s-brand-soft)}
.btn-a{
  background:linear-gradient(180deg,#D8A26A,var(--s-acc)); color:var(--s-onacc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px -8px rgba(127,67,16,.45);
}
.btn-a:hover{background:linear-gradient(180deg,#D0985F,var(--s-acc-h)); transform:translateY(-1px)}
.btn-sm{font-size:var(--fs-caption); padding:8px 15px; min-height:36px}
.btn-blk{width:100%}

/* ==========================================================================
   Platform header
   ========================================================================== */
.platform-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  background:var(--s-surface); border-bottom:1px solid var(--s-line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; gap:14px;
  transition:height var(--t-base) var(--ease);
}
.header-left{display:flex; align-items:center; gap:12px; min-width:0}
.header-right{display:flex; align-items:center; gap:16px; flex:1; min-width:0; justify-content:flex-end}

.sidebar-toggle{
  width:44px; height:44px; border:0; background:none; flex:none;
  color:var(--s-mute); cursor:pointer; border-radius:var(--r-md);
  font-size:18px; display:grid; place-items:center;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar-toggle:hover{background:var(--s-brand-soft); color:var(--s-brand-h)}
.sidebar-toggle svg.lucide{width:20px; height:20px}
.brand-icon svg.lucide{width:14px; height:14px}

.header-collapse{
  width:36px; height:36px; border:0; background:none; flex:none;
  color:var(--s-mute); cursor:pointer; border-radius:var(--r-md);
  display:grid; place-items:center;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.header-collapse:hover{background:var(--s-brand-soft); color:var(--s-brand-h)}
.header-collapse svg.lucide{width:18px; height:18px}

body.is-header-collapsed{--header-h:36px}
body.is-header-collapsed .brand-text{display:none}
body.is-header-collapsed .module-progress-label{display:none}
body.is-header-collapsed .sidebar-toggle,
body.is-header-collapsed .header-collapse{width:32px; height:32px}
body.is-header-collapsed .brand-icon{width:22px; height:22px}
body.is-header-collapsed .brand-logo{height:22px}

.brand{display:flex; align-items:center; gap:8px; min-width:0; text-decoration:none; color:inherit}
a.brand:hover .brand-name{color:var(--s-brand-h)}
.brand-icon{
  width:28px; height:28px; border-radius:var(--r-sm); flex:none;
  background:var(--s-brand-a); color:var(--s-onbrand);
  display:grid; place-items:center; font-size:var(--fs-caption);
}
.brand-logo{
  height:42px; width:auto; display:block; object-fit:contain;
  flex:none;
}
@media(min-width:1025px){
  .brand-logo{ height:54px; }
}
.brand-text{display:flex; flex-direction:column; gap:1px; line-height:1.2; min-width:0}
.brand-name{font-size:var(--fs-ui); font-weight:600; color:var(--s-tx)}
.brand-org{font-size:var(--fs-caption); color:var(--s-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.module-progress{
  display:flex; flex-direction:column; align-items:stretch; row-gap:1px;
  flex:none; width:max-content;
  padding-left:16px; border-left:1px solid var(--s-line);
}
.module-progress-row{
  display:flex; align-items:center; gap:8px;
  min-height:calc(var(--fs-micro) * 1.3);
}
.module-progress-label{
  display:flex; align-items:center; min-height:calc(var(--fs-ui) * 1.3);
  font-size:var(--fs-ui); font-weight:600; color:var(--s-mute);
  white-space:nowrap; line-height:1.3;
}
.module-progress-track{
  flex:1 1 auto; width:auto; min-width:72px; height:5px;
  background:var(--s-sunken); border-radius:var(--r-full); overflow:hidden;
}
.module-progress-track i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--s-acc-h),var(--s-acc));
  border-radius:var(--r-full); transition:width .7s var(--ease);
}
.module-progress-count{
  font-size:var(--fs-ui); font-weight:700; line-height:1.3; font-family:var(--font);
  font-variant-numeric:tabular-nums; color:var(--s-tx); flex:none;
}
@media(max-width:639px){
  .module-progress{max-width:110px; flex:none; padding-left:0; border-left:0}
  .module-progress-label{display:none}
  .module-progress-track{display:none}   /* phones: the percentage alone, so the level meter keeps its room */
  .header-right{gap:6px}
  .brand-logo{height:34px}
  .header-left{gap:4px}
  .sidebar-toggle{margin-inline:-6px 0}
}

/* --- জেন্ডার সচেতনতার স্তর · top-bar meter ------------------------------
   Filled bars  = অর্জিত স্তর (from the quiz answers)
   Gold pin     = আপনার বাছাই (the level the teacher chose)  ----------------- */
:root{--lm-pick:var(--mg-500); --lm-pick-ink:var(--mg-700)}
.level-meter{
  position:relative;
  display:flex; align-items:center; gap:12px; flex:none;
  min-height:0; padding:0 2px;
  border:0; border-radius:var(--r-lg);
  background:transparent;
  color:var(--s-tx);
  box-shadow:none;
  font-family:var(--font); cursor:pointer; text-align:start;
  transition:background var(--t-fast) var(--ease);
}
.level-meter[hidden]{display:none}
.level-meter:hover{background:transparent}
.level-meter:focus-visible{outline:3px solid var(--s-ring); outline-offset:2px}

/* growth path: seed → sprout → plant → tree, one node per level */
.level-meter-bars{display:inline-flex; align-items:center; gap:9px; padding:0 2px}
.level-bar{
  --nd:26px;
  position:relative; flex:none; display:grid; place-items:center;
  width:var(--nd); height:var(--nd); border-radius:50%;
  background:#EDF2F5; color:#A4A7A9;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease-spring), box-shadow .3s var(--ease);
}
.level-bar svg{width:68%; height:68%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.level-bar + .level-bar::before{                /* connector to the previous node */
  content:''; position:absolute; right:calc(100% + 1px); top:50%; width:9px; height:3px; margin-top:-1.5px;
  border-radius:2px; background:var(--paper-300); transition:background .35s var(--ease);
}
.level-bar.is-on:nth-child(1){background:#DEDDDB; color:#7A7E81}   /* gray 200 */
.level-bar.is-on:nth-child(2){background:var(--fern-200); color:#fff}
.level-bar.is-on:nth-child(3){background:var(--fern-400); color:#fff}
.level-bar.is-on:nth-child(4){background:var(--fern-500); color:#fff}
.level-bar.is-on + .level-bar::before{background:var(--fern-300)}
.level-bar.is-on:nth-child(1) + .level-bar::before{background:#CFCDCA}
/* gold ring = the level the teacher chose */
.level-bar.is-declared{
  box-shadow:0 0 0 2.5px var(--s-elev), 0 0 0 5px var(--lm-pick);
}
.level-bar.is-declared::after{
  content:''; position:absolute; top:-7px; right:-7px; width:11px; height:11px; border-radius:50%;
  background:var(--lm-pick); border:2px solid var(--s-elev);
  box-shadow:0 1px 3px rgba(127,67,16,.4);
}
.level-meter-bars.is-lg{gap:14px; padding:12px 8px 8px}
.level-meter-bars.is-lg .level-bar{--nd:46px}
.level-meter-bars.is-lg .level-bar + .level-bar::before{width:14px; right:calc(100% + 0px); height:4px; margin-top:-2px}
.level-meter-bars.is-lg .level-bar.is-declared::after{width:14px; height:14px; top:-8px; right:-8px}

/* names on both sides: chosen level (left, gold) · achieved level (right, green) */
.lm-side{display:flex; flex-direction:column; gap:1px; min-width:0; line-height:1.3}
.lm-left{align-items:flex-end; text-align:end}
.lm-right{align-items:flex-start; text-align:start}
.lm-cap{font-size:var(--fs-micro); color:var(--s-soft); white-space:nowrap}
.lm-name{font-size:var(--fs-ui); font-weight:700; white-space:nowrap}
.lm-left .lm-name{color:var(--lm-pick-ink)}
.lm-right .lm-name{color:var(--fern-700)}
.level-meter.is-none .lm-right .lm-name{color:var(--s-mute); font-weight:500}
.lm-name .lm-short{display:none}

.level-meter.is-up{animation:level-up .9s var(--ease) 1}
.level-meter.is-up .level-bar.is-on{animation:level-bar-pop .45s var(--ease-spring) 1}
.level-meter.is-down{animation:level-down .5s var(--ease) 1}
@keyframes level-up{
  0%{box-shadow:0 0 0 0 rgba(49,126,71,.45)}
  100%{box-shadow:0 0 0 10px rgba(49,126,71,0)}
}
@keyframes level-bar-pop{0%{transform:scale(.55)} 100%{transform:scale(1)}}
@keyframes level-down{
  0%,100%{transform:translateX(0); border-color:var(--s-line)}
  20%{transform:translateX(-3px); border-color:var(--amb-300)}
  40%{transform:translateX(3px)}
  60%{transform:translateX(-2px)}
  80%{transform:translateX(2px)}
}
@media(prefers-reduced-motion:reduce){
  .level-meter.is-up, .level-meter.is-down,
  .level-meter.is-up .level-bar.is-on{animation:none}
}
@media(max-width:1279px){
  .lm-name .lm-full{display:none}
  .lm-name .lm-short{display:inline}
}
@media(max-width:959px){
  .lm-side{display:none}
  .level-meter{gap:0; padding:5px 12px}
}
@media(max-width:639px){
  .level-meter{min-height:40px; padding:3px 7px}
  .level-bar{--nd:21px}
  .level-meter-bars{gap:5px; padding:3px 0}
  .level-bar + .level-bar::before{width:6px; height:2px; margin-top:-1px}
  .level-bar.is-declared{box-shadow:0 0 0 1.5px var(--s-elev), 0 0 0 3px var(--lm-pick)}
  .level-bar.is-declared::after{width:8px; height:8px; top:-4px; right:-4px; border-width:1.5px}
}
/* collapsed header: smaller chip, name on one line */
body.is-header-collapsed .level-meter{min-height:34px; padding:2px 14px 2px 8px; gap:10px}
body.is-header-collapsed .level-meter-bars{padding:2px 4px; gap:7px}
body.is-header-collapsed .level-bar{--nd:22px}
body.is-header-collapsed .level-bar + .level-bar::before{width:7px}
body.is-header-collapsed .level-bar.is-declared{box-shadow:0 0 0 2px var(--s-elev), 0 0 0 3.5px var(--lm-pick)}
body.is-header-collapsed .level-bar.is-declared::after{width:8px; height:8px; top:-5px; right:-5px; border-width:1.5px}
body.is-header-collapsed .lm-cap{display:none}

/* no chip: the bars sit on the header itself */
.level-meter{
  --chip-bg:var(--s-surface);
  background:transparent;
  border:0;
  color:var(--s-tx);
  box-shadow:none;
}
.level-meter:hover{background:transparent; --chip-bg:var(--s-surface); border-color:transparent; box-shadow:none}
.level-meter .level-bar{background:#F7F8F8; color:#A4A7A9}
.level-meter .level-bar:not(.is-on):not(.is-declared){box-shadow:inset 0 0 0 1px rgba(0,59,83,.07)}
.level-meter .level-bar + .level-bar::before{background:rgba(0,59,83,.14)}
.level-meter .level-bar.is-on:nth-child(1){background:#DEDDDB; color:#7A7E81}
.level-meter .level-bar.is-on:nth-child(2){background:var(--fern-200); color:#fff}
.level-meter .level-bar.is-on:nth-child(3){background:var(--fern-400); color:#fff}
.level-meter .level-bar.is-on:nth-child(4){background:var(--fern-500); color:#fff}
.level-meter .level-bar.is-on + .level-bar::before{background:var(--fern-300)}
.level-meter .level-bar.is-on:nth-child(1) + .level-bar::before{background:#CFCDCA}
.level-meter .level-bar.is-declared{box-shadow:0 0 0 2.5px var(--chip-bg), 0 0 0 5px var(--lm-pick)}
.level-meter .level-bar.is-declared::after{border-color:var(--chip-bg)}
@media(max-width:639px){
  .level-meter .level-bar.is-declared{box-shadow:0 0 0 1.5px var(--chip-bg), 0 0 0 3px var(--lm-pick)}
}
body.is-header-collapsed .level-meter .level-bar.is-declared{box-shadow:0 0 0 2px var(--chip-bg), 0 0 0 3.5px var(--lm-pick)}

/* Level picker modal + result */
.poll-pop.level-pop{padding:clamp(10px, 3vw, 28px)}
.poll-pop-card.level-pop-card{
  width:min(100%, 58rem);
  max-height:calc(100dvh - var(--header-h) - clamp(20px, 6vw, 56px));
  padding:clamp(16px, 3vw, 28px) clamp(14px, 3.2vw, 32px);
  gap:clamp(8px, 1.4vw, 12px);
}
.level-pop-card .poll-pop-q{text-align:center; font-size:var(--fs-h2); max-width:none}
.level-pop-note{margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-soft); text-align:center; max-width:40em}
.scale-ladder.level-pop-ladder{
  width:100%; margin-top:6px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap:clamp(8px, 1.2vw, 12px);
}
.level-pop-ladder .scale-rung{display:flex}
.level-pop-ladder .scale-rung-in{padding:clamp(10px, 1.6vw, 14px) clamp(11px, 1.8vw, 16px); height:100%}
.level-pop-ladder .scale-term{font-size:var(--fs-small)}
.level-pop-ladder .scale-def{font-size:var(--fs-small); line-height:1.75}
.level-pop-card .poll-pop-go{width:min(100%, 22rem); align-self:center; margin-top:4px}
@media(max-width:639px){
  .poll-pop.level-pop{align-items:end; padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .poll-pop-card.level-pop-card{border-radius:var(--r-xl); max-height:calc(100dvh - var(--header-h) - 16px)}
  .level-pop-card .poll-pop-badge{display:none}
  .level-pop-ladder .scale-step-n{width:26px; height:26px; font-size:var(--fs-caption)}
  .level-pop-card .poll-pop-go{width:100%; position:sticky; bottom:0}
}

.level-result{display:flex; flex-direction:column; gap:12px; text-align:start}
.level-result-top{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px; border-radius:var(--r-lg);
  background:linear-gradient(160deg, var(--fern-50), var(--s-elev));
  border:1px solid var(--fern-100);
}
.level-result-now{margin:4px 0 0; font-size:var(--fs-h3); font-weight:600; color:var(--fern-700)}
.level-result-en{margin:0; font-family:var(--latin); font-size:var(--fs-caption); color:var(--s-mute)}
.level-result-rows{margin:0; display:grid; gap:6px}
.level-result-row{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:9px 12px; border-radius:var(--r-md); background:var(--s-sunken);
}
.level-result-row dt{font-size:var(--fs-ui); color:var(--s-soft)}
.level-result-row dd{margin:0; font-size:var(--fs-ui); font-weight:500; color:var(--s-tx)}
.level-result-msg{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.level-result-def{
  margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body);
  padding:10px 12px; border-inline-start:3px solid var(--fern-500); background:var(--fern-50);
  border-radius:var(--r-sm);
}
.level-result-key{margin:2px 0 0; font-size:var(--fs-caption); color:var(--s-mute); text-align:center}
.level-result-next{
  padding:12px 14px; border-radius:var(--r-md);
  background:var(--fern-50); border:1px solid var(--fern-100);
}
.level-result-next .t-label{margin:0 0 4px}
.level-result-next p:last-child{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}

/* journey chart: declared vs proven, one point per sub-module */
.jr{margin:0; display:flex; flex-direction:column; gap:8px}
.jr-svg{width:100%; max-width:26rem; height:auto; display:block; overflow:visible; margin-inline:auto}
.jr-grid{stroke:var(--s-line); stroke-width:1}
.jr-ylab{fill:var(--s-soft); font-size:11.5px; font-family:inherit}
.jr-xlab{fill:var(--s-body); font-size:12px; font-family:inherit}
.jr-xlab.is-mute{fill:var(--s-mute)}
.jr-xcap{fill:var(--s-mute); font-size:11px; font-family:inherit}
.jr-decl{stroke:var(--mg-600); stroke-width:1.8; stroke-dasharray:4 3; stroke-linejoin:round}
.jr-prov{stroke:var(--fern-500); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round}
.jr-dot-decl{fill:var(--mg-500); stroke:var(--s-elev); stroke-width:2}
.jr-dot-prov{fill:var(--fern-500)}
.jr-leg{justify-content:center; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:var(--fs-caption); color:var(--s-soft)}
.jr-leg-i{display:inline-flex; align-items:center; gap:6px}
.jr-sw{display:inline-block; width:14px; height:14px; border-radius:50%; flex:none}
.jr-sw.is-decl{background:var(--mg-500); box-shadow:0 0 0 1.5px var(--mg-700)}
.jr-sw.is-prov{background:var(--fern-500)}
.jr-leg-n{color:var(--s-mute)}

/* strength by dimension */
.dim{display:grid; gap:10px}
.dim-row{display:grid; gap:4px}
.dim-head{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.dim-head strong{font-size:var(--fs-ui); color:var(--s-tx)}
.dim-head span{font-size:var(--fs-caption); color:var(--s-soft)}
.dim-track{height:8px; border-radius:var(--r-full); background:var(--s-sunken); overflow:hidden}
.dim-track i{display:block; height:100%; border-radius:inherit; background:var(--fern-500); transition:width .5s var(--ease)}
.level-result-hist{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.level-result-hist li{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 12px; border:1px solid var(--s-line); border-radius:var(--r-md);
}
.level-result-hist strong{font-size:var(--fs-ui); color:var(--s-tx)}
.level-result-hist span{font-size:var(--fs-caption); color:var(--s-soft)}
.level-result-card{
  width:min(100%, 34rem); margin:var(--s4) auto 0; padding:16px;
  border:1px solid var(--s-line); border-radius:var(--r-xl);
  background:var(--s-elev); box-shadow:var(--s-sh1); text-align:start;
}
.quiz-level{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  margin:10px auto 0; padding:8px 12px; border-radius:var(--r-full);
  background:var(--fern-50); color:var(--fern-700); font-size:var(--fs-ui); font-weight:500;
  width:fit-content;
}
.quiz-level.is-down{background:var(--amb-100); color:var(--amb-800)}

/* ==========================================================================
   Sidebar — rail
   ========================================================================== */
.sidebar{
  position:fixed; top:var(--header-h); left:0; bottom:0;
  width:var(--sidebar-w); background:var(--s-surface);
  border-right:1px solid var(--s-line);
  display:flex; flex-direction:column; z-index:90;
  transform:translateX(-100%);
  transition:transform var(--t-base) var(--ease), top var(--t-base) var(--ease);
  overflow:hidden;
}
.sidebar.open{transform:translateX(0)}

.sidebar-overlay{
  position:fixed; inset:0; z-index:85; background:rgba(0,59,83,.28);
  opacity:0; pointer-events:none; transition:opacity var(--t-base);
}
.sidebar-overlay.open{opacity:1; pointer-events:auto}
@media(min-width:1024px){.sidebar-overlay{display:none}}

.sidebar-header{
  padding:12px;
  border-bottom:1px solid var(--s-line);
  display:flex; flex-direction:column; align-items:flex-start;
  margin:8px 12px 4px; border-radius:var(--r-lg);
  flex:none;
  transition:background var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.sidebar-header.is-active{
  background:var(--s-brand-pale);
  box-shadow:var(--s-sh1);
  border-bottom-color:transparent;
}
.sidebar-header.is-active .sidebar-title{color:var(--s-brand-h)}
.module-badge{
  display:inline-flex; padding:3px 9px; margin-bottom:8px;
  background:var(--s-brand-tint); color:var(--s-brand-h);
  font-size:var(--sidebar-badge-fs); font-weight:500; border-radius:var(--r-full);
}
.sidebar-title{font-size:var(--sidebar-title-fs); font-weight:600; line-height:1.45; margin-bottom:4px; color:var(--s-tx)}
.sidebar-subtitle{font-size:var(--sidebar-subtitle-fs); color:var(--s-mute); line-height:1.5}

.sidebar-nav{
  flex:1 1 auto; min-height:0; padding:8px 4px 8px 0;
  overflow-x:hidden; overflow-y:auto;
  display:flex; flex-direction:column; gap:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,59,83,.22) transparent;
}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-track{background:transparent; margin:8px 0}
.sidebar-nav::-webkit-scrollbar-thumb{
  background:rgba(0,59,83,.18); border-radius:var(--r-full);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover{background:rgba(0,59,83,.32)}
.nav-connector{display:none}

.nav-item{
  display:flex; align-items:flex-start; gap:10px;
  flex:none; height:auto; min-height:0;
  padding:10px 14px; border-radius:var(--r-lg);
  cursor:pointer; border:0; background:none; width:auto;
  margin:0 10px 0 12px;
  text-align:start; font-family:var(--font); color:var(--s-soft); position:relative;
  overflow:visible; appearance:none; -webkit-appearance:none;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.nav-item:hover{background:var(--s-brand-soft); color:var(--s-tx)}
.nav-item.active{
  background:var(--s-brand-pale);
  box-shadow:var(--s-sh1);
  color:var(--s-brand-h);
}
.nav-item.active::after{
  content:""; position:absolute; top:0; left:16px;
  width:28px; height:3px; border-radius:0 0 3px 3px;
  background:var(--s-acc);
}
.nav-item.active::before{display:none}
.nav-item.locked{opacity:.55; cursor:not-allowed}
.nav-item.locked:hover{background:none}

.nav-dot{
  width:18px; height:18px; flex:none; border-radius:var(--r-full);
  display:grid; place-items:center; font-size:var(--fs-micro); font-weight:600;
  border:1.5px solid var(--s-line-mid); background:transparent; color:transparent;
  margin-top:2px; transition:all var(--t-base) var(--ease);
}
.nav-item.done .nav-dot{background:var(--s-ok); border-color:var(--s-ok); color:var(--s-on-dark)}
.nav-item.active .nav-dot{
  background:var(--s-brand); border-color:var(--s-brand); color:var(--s-onbrand);
  box-shadow:0 0 0 4px var(--s-brand-soft);
}
.nav-item.coming .nav-dot,
.nav-item.locked .nav-dot{background:var(--s-sunken); border-color:transparent; color:var(--s-mute); font-size:var(--fs-micro)}
.nav-dot svg.lucide{width:10px; height:10px}

.nav-info{
  flex:1; min-width:0; min-height:0;
  display:flex; flex-direction:column; gap:3px;
  height:auto; overflow:visible;
}
.nav-label{font-size:var(--sidebar-navlabel-fs); color:var(--s-mute); font-weight:500; margin:0}
.nav-title{
  font-size:var(--sidebar-navtitle-fs); font-weight:500; line-height:1.45;
  margin:0; height:auto; white-space:normal; overflow:visible;
}
.nav-meta{
  font-size:var(--sidebar-navmeta-fs); color:var(--s-mute); line-height:1.4;
  margin:0; height:auto;
}
.nav-item.active .nav-title{color:var(--s-brand-h); font-weight:600}

.sidebar-footer{
  padding:10px 0 12px; border-top:1px solid var(--s-line);
  display:flex; flex-direction:column; gap:8px;
  flex:none; box-sizing:border-box;
}
.sidebar-footer-row{
  display:flex; align-items:stretch; gap:8px;
  margin:0 10px 0 12px;
}
.notebook-btn{
  display:flex; align-items:center; gap:10px;
  width:auto; margin:0 10px 0 12px;
  padding:10px 14px; min-height:0; height:auto;
  background:var(--s-acc-soft); border:0; border-radius:var(--r-lg);
  cursor:pointer; position:relative; overflow:visible;
  font-family:var(--font); font-size:var(--sidebar-btn-fs); font-weight:600;
  color:var(--s-acc-tx); text-align:start;
  appearance:none; -webkit-appearance:none;
  box-shadow:none;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    box-shadow var(--t-base) var(--ease);
}
.notebook-btn svg.lucide{width:15px; height:15px}
.notebook-btn:hover,
.notebook-btn:active{
  background:var(--s-acc-soft); color:var(--s-acc-tx);
}
.notebook-btn.is-on{
  background:var(--s-acc-soft); color:var(--s-acc-tx);
  box-shadow:var(--s-sh1);
}
.notebook-btn.is-on::after{
  content:""; position:absolute; top:0; left:16px;
  width:28px; height:3px; border-radius:0 0 3px 3px;
  background:var(--s-acc);
}

/* Khata + ফোরাম — paired side by side as equal tiles, minimal height */
.sidebar-footer-row .notebook-btn{
  flex:1 1 0; min-width:0; margin:0;
  justify-content:center; align-items:center; gap:6px;
  padding:8px 6px; text-align:center;
}
.sidebar-footer-row .notebook-btn span{
  font-size:var(--sidebar-btn-sm-fs); line-height:1.2;
  white-space:normal; word-break:keep-all;
}
.sidebar-footer-row .notebook-btn svg.lucide{width:14px; height:14px; flex:none}
.sidebar-footer-row .notebook-btn.is-on::after{
  left:50%; transform:translateX(-50%);
}
#resourcesBtn{
  background:var(--s-brand-soft); color:var(--s-brand-h);
}
#resourcesBtn:hover,
#resourcesBtn:active{
  background:var(--s-brand-soft); color:var(--s-brand-a);
}
#resourcesBtn.is-on{
  background:var(--s-brand-soft); color:var(--s-brand-a);
  box-shadow:var(--s-sh1);
}
#resourcesBtn.is-on::after{
  background:var(--s-brand);
}

/* ==========================================================================
   Main content
   ========================================================================== */
.main-content{
  margin-top:var(--header-h);
  min-height:calc(100dvh - var(--header-h));
  background:var(--s-canvas);
  position:relative; z-index:1;
  transition:margin-top var(--t-base) var(--ease), margin-left var(--t-base) var(--ease);
}
@media(min-width:1024px){
  body:not(.is-sidebar-collapsed) .main-content{margin-left:var(--sidebar-w)}
}

#contentWrapper{min-height:calc(100dvh - var(--header-h))}

/* ==========================================================================
   Welcome / hub
   ========================================================================== */
.welcome-hero{
  max-width:var(--measure);
  margin:0 auto;
  padding:var(--s7) var(--gutter) var(--s8);
  min-height:calc(100dvh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:var(--s6);
}
.welcome-intro{display:flex; flex-direction:column; align-items:center; gap:var(--s3)}
.welcome-icon{
  width:72px; height:72px; border-radius:var(--r-full);
  background:var(--s-brand-tint); display:grid; place-items:center;
  font-size:28px; color:var(--s-brand-h); margin-bottom:var(--s2);
}
.welcome-title{font-size:var(--fs-display); font-weight:600; line-height:1.4; max-width:16ch; color:var(--s-tx)}
.welcome-subtitle{font-size:var(--fs-lede); color:var(--s-soft); line-height:1.75; max-width:34em}
.welcome-stats{
  display:flex; width:100%; max-width:22em;
  border-top:1px solid var(--s-line); border-bottom:1px solid var(--s-line);
  padding:var(--s5) 0;
}
.stat-item{flex:1; text-align:center; padding:0 var(--s3); display:flex; flex-direction:column; gap:var(--s1)}
.stat-item + .stat-item{border-left:1px solid var(--s-line)}
.stat-value{font-size:var(--fs-h1); font-weight:600; color:var(--s-brand-a); line-height:1.2; font-family:var(--font); font-variant-numeric:tabular-nums}
.stat-label{font-size:var(--fs-caption); color:var(--s-mute)}
.welcome-hero .btn-primary{min-width:12em}
@media(min-width:768px){
  .welcome-hero{padding:var(--s8) var(--gutter) var(--s9)}
  .welcome-title{font-size:var(--fs-display)}
}

/* ==========================================================================
   The stream — gated-reveal bands
   ========================================================================== */
#stream{
  display:flex; flex-direction:column;
  height:calc(100dvh - var(--header-h));
  overflow:hidden;
  padding-bottom:0;
  transition:height var(--t-base) var(--ease);
}
body:has(#stream){overflow:hidden}
html{scroll-padding-top:var(--header-h); scroll-padding-bottom:calc(var(--bar-h) + 32px)}

.step{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 72px);
  scroll-padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 72px);
  border-bottom:1px solid transparent;
  animation:rise var(--t-base) var(--ease) both;
  position:relative; z-index:0;
}
.step[data-g="scene"],
.step[data-g="page"],
.step[data-g="khata"]{background:var(--s-canvas); color:var(--s-tx)}
.step.done{opacity:.72}
.step.current{opacity:1}
.step-in{
  max-width:var(--measure);
  margin:0 auto;
  padding:var(--s6) var(--gutter);
}
@media(min-width:768px){
  .step-in{padding:22px 24px 26px}
}
.step-in.is-stage{
  max-width:var(--measure); padding-top:12px;
}
@media(min-width:768px){
  .step-in.is-stage{padding-top:12px}
}

.stage{display:flex; flex-direction:column; gap:0; margin:0}
.stage-vis{
  position:relative; width:100%; aspect-ratio:16/9; max-height:42vh; min-height:168px;
  overflow:hidden; background:var(--s-sunken);
  border:1px solid var(--s-line);
  border-radius:var(--r-xl);
}
@media(min-width:768px){
  .stage-vis{aspect-ratio:2/1; max-height:46vh}
}
.stage-plate{position:absolute; inset:0}
.stage-plate svg, .stage-photo{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.stage-photo{object-fit:cover; object-position:center 28%; z-index:1; border-radius:inherit}
.stage-vis::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, var(--s-day), transparent 42%, rgba(17,27,33,.18) 100%);
}
.stage[data-light="dawn"] .stage-vis::after{
  background:linear-gradient(180deg, var(--s-dawn), transparent 50%, rgba(127,67,16,.16) 100%);
}
.stage[data-light="dusk"] .stage-vis::after{
  background:linear-gradient(180deg, var(--s-dusk), transparent 48%, rgba(0,59,83,.28) 100%);
}
.stage-slug{
  position:absolute; top:10px; left:12px; right:12px; z-index:4;
  display:flex; flex-wrap:wrap; gap:8px 14px;
  padding:6px 10px; border-radius:var(--r-full);
  background:rgba(254,251,248,.86); color:var(--s-mute);
  width:max-content; max-width:calc(100% - 24px);
}
.stage-cast{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; justify-content:center; align-items:flex-end;
  gap:10px; padding:0 12px 4px; min-height:92px;
}
.cast-fig{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transform:translateY(10px) scale(.88); opacity:.7;
  transition:transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.cast-fig.is-speak{
  transform:translateY(0) scale(1.06); opacity:1; z-index:2;
}
.cast-body{display:flex; flex-direction:column; align-items:center}
.cast-torso{
  width:36px; height:28px; margin-top:-4px; border-radius:18px 18px 8px 8px;
  background:var(--s-acc-pale);
  box-shadow:inset 0 0 0 1px var(--s-acc-soft);
}
.cast-fig[data-tone="b"] .cast-torso{
  background:var(--s-brand-tint); box-shadow:inset 0 0 0 1px var(--s-brand-soft);
}
.cast-fig.is-speak .cast-torso{width:44px; height:34px}
.cast-name{
  font-size:var(--fs-caption); font-weight:500; color:var(--s-tx);
  background:rgba(254,251,248,.9); padding:2px 8px; border-radius:var(--r-full);
}
.stage-desk{
  position:relative; z-index:5;
  background:transparent; border:0; box-shadow:none;
  border-radius:0; margin:0;
  padding:18px 16px 8px;
  display:flex; flex-direction:column; gap:14px;
}
.stage.is-bare .stage-desk{padding-top:8px}
.stage[data-mode="story"] .stage-desk,
.stage[data-mode="concept"] .stage-desk,
.stage[data-mode="reflect"] .stage-desk{
  background:transparent; box-shadow:none;
}
.stage[data-mode="concept"] .stage-vis,
.stage[data-mode="reflect"] .stage-vis{opacity:.92}
@media(min-width:768px){
  .stage-desk{margin:0; padding:22px 0 12px}
}

.stage.is-chat .stage-desk.talk-desk{padding-top:16px}

.stage.is-laptop{
  display:flex; flex-direction:column; gap:8px;
  cursor:pointer;
}
.step-in.is-stage:has(.is-laptop){width:100%}
/* frame = page width at 16:9; the 3:2 canvas inside is cropped (cover) */
.stage.is-laptop.is-photo .stage-vis,
.stage.is-laptop .lap-vis{
  position:relative; aspect-ratio:16 / 9; width:100%; height:auto;
  max-height:none; min-height:0;
  overflow:hidden; border-radius:var(--r-xl);
}
.lap-canvas{
  position:absolute; left:0; width:100%; aspect-ratio:3 / 2;
  top:0;   /* crop from the bottom only — the thought bubble sits at the top of the photo */
}
.stage.is-laptop.is-photo .stage-plate{
  position:relative; inset:auto; display:block; width:100%;
}
.stage.is-laptop.is-photo .stage-photo{
  position:relative; inset:auto;
  width:100%; height:auto; display:block;
  aspect-ratio:1536 / 1024;
  object-fit:unset; object-position:center;
}
.stage.is-laptop.is-photo .stage-vis::after{display:none}
.stage.is-laptop .stage-slug{display:none}
.lap-screen{
  position:absolute; z-index:5;
  display:flex; overflow:hidden;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#E8F3FA;
  pointer-events:none;
}
.lap-screen .lap-os-body{
  flex:1; min-height:0; width:100%; height:100%;
  overflow-y:auto; overflow-x:hidden; pointer-events:auto;
  -ms-overflow-style:none; scrollbar-width:thin; scrollbar-color:rgba(232,243,250,.35) transparent;
  padding:4% 5.5%;
  background:transparent; color:#E8F3FA;
}
.lap-screen .lap-os-body::-webkit-scrollbar{ width:4px; }
.lap-screen .lap-os-body::-webkit-scrollbar-track{ background:transparent; }
.lap-screen .lap-os-body::-webkit-scrollbar-thumb{ background:rgba(232,243,250,.35); border-radius:var(--r-full); }
.lap-copy{display:flex; flex-direction:column; gap:5px; height:100%}
.lap-goal{
  padding:0; border-radius:0;
  background:transparent; border:0;
  gap:3px;
}
.lap-goal .lap-kicker{ font-size:clamp(8px, .95vw, 11px); }
.lap-goal .lap-text{
  font-size:clamp(8.5px, 1vw, 11px); line-height:1.4;
}
.lap-kicker{
  margin:0; font-size:clamp(9px, 1.05vw, 12px); font-weight:500;
  color:#F3D7B7;
  text-shadow:0 0 8px rgba(180,220,255,.28), 0 1px 2px rgba(0,0,0,.7);
}
.lap-text, .lap-os-body .talk-words{
  margin:0; font-size:clamp(11px, 1.2vw, 13.5px); line-height:1.5;
  color:#F4FBFF; text-wrap:pretty;
  text-shadow:0 0 6px rgba(160,210,255,.22), 0 1px 2px rgba(0,0,0,.75);
}
.lap-aims{
  display:flex; flex-direction:column; gap:5px;
  padding:0; border-radius:0;
  background:transparent; border:0;
  height:100%;
}
.lap-aims-head{
  display:flex; align-items:center; gap:6px; color:#C2E4C7;
  text-shadow:0 0 8px rgba(180,220,255,.28), 0 1px 2px rgba(0,0,0,.7);
}
.lap-aims-head .lap-kicker{color:#C2E4C7}
.lap-aims-head svg.lucide{width:12px; height:12px; flex:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.lap-aims-list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.lap-aims-list li{
  display:flex; gap:6px; align-items:flex-start;
  padding:0;
}
.lap-aims-list li.is-in{animation: lap-fade .35s var(--ease) both}
.lap-aims-n{
  flex:none; width:1.05em; height:1.05em; margin-top:2px;
  border-radius:var(--r-full);
  display:grid; place-items:center;
  background:transparent; color:#C2E4C7;
  box-shadow:none;
}
.lap-aims-n svg.lucide{width:10px; height:10px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.lap-aims-t{
  flex:1; margin:0; font-size:clamp(10px, 1.08vw, 12.5px); line-height:1.4; color:#F4FBFF;
  text-shadow:0 0 6px rgba(160,210,255,.22), 0 1px 2px rgba(0,0,0,.75);
}
.lap-caret{
  display:inline-block; width:6px; height:.9em; margin-left:2px;
  background:#F3D7B7; vertical-align:-2px;
  animation:lap-caret .85s step-end infinite;
}
.lap-nadia-text .lap-caret{ background:var(--s-acc); width:5px }
@keyframes lap-caret{ 50%{opacity:0} }
.lap-thought{
  position:absolute; z-index:6;
  background:rgba(254,251,248,.94);
  border:1px dashed var(--s-acc);
  border-radius:var(--r-lg);
  padding:8px 10px 9px;
  box-shadow:var(--s-sh2);
  display:flex; flex-direction:column; gap:3px;
  pointer-events:none;
}
.lap-thought-who{
  margin:0; font-size:var(--fs-caption); font-weight:500; color:var(--s-acc-tx);
}
.lap-nadia-text, .lap-thought .lap-nadia-text{
  margin:0; font-size:var(--fs-caption); line-height:1.45; color:var(--s-acc-tx);
  text-shadow:none;
}
.lap-thought.is-in{animation: lap-fade .35s var(--ease) both}
.lap-thought::after{
  content:""; position:absolute; left:22%; bottom:-6px;
  width:11px; height:11px;
  background:rgba(254,251,248,.94);
  border-right:1px dashed var(--s-acc);
  border-bottom:1px dashed var(--s-acc);
  transform:rotate(45deg);
}
.lap-thought.is-tail-right::after{
  left:auto; bottom:auto; right:-6px; top:calc(50% - 6px);
  border-bottom:0; border-right:1px dashed var(--s-acc); border-top:1px dashed var(--s-acc);
}
@media(max-width:639px){
  .lap-thought.is-tail-right{left:22% !important; width:57% !important; top:3% !important}
}
.lap-caption{
  margin:6px 0 0; text-align:center;
  font-size:var(--fs-caption); font-weight:500; color:var(--s-acc-tx);
}
.lap-status{
  margin:0; text-align:center; font-size:var(--fs-caption); font-weight:500; color:var(--s-acc-tx);
}
.lap-cta-row{display:flex; justify-content:center}
.lap-cta{min-width:min(100%, 22rem)}
@media(max-width:639px){
  .lap-thought{padding:6px 8px}
  .lap-thought-who{font-size:var(--fs-caption)}
  .lap-nadia-text, .lap-thought .lap-nadia-text{font-size:var(--fs-caption); line-height:1.4}
  .lap-screen .lap-os-body{padding:6% 9% 7% 10%}
}
@media(prefers-reduced-motion:reduce){
  .lap-thought.is-in, .lap-aims-list li.is-in{animation:none}
  .lap-caret{animation:none}
}
@keyframes lap-fade{
  from{opacity:0}
  to{opacity:1}
}
.chatbox{
  display:flex; flex-direction:column; gap:12px;
  background:none; border:0; box-shadow:none; border-radius:0;
  min-height:0; overflow:visible; padding:0;
}
.chatbox.is-playing{cursor:pointer}
.chat-thread.talk{
  display:flex; flex-direction:column; gap:12px;
  padding:0 0 12px; max-height:none; overflow:visible;
}
.chat-sys{
  align-self:center; max-width:36em; margin:0 8px 4px;
  text-align:center; font-size:var(--fs-caption); line-height:1.75; color:var(--s-mute); padding:0; background:none;
}

.chat-row{
  display:flex; align-items:flex-end; gap:8px;
  max-width:min(86%, 34em);
  animation:chat-in .42s var(--ease);
}
.chat-row.is-typing{animation:chat-pop .38s var(--ease-spring)}
.chat-row.is-left{align-self:flex-start}
.chat-row.is-right, .chat-row.is-think{
  align-self:flex-end; flex-direction:row-reverse;
}
.chat-row.is-cont{margin-top:-4px}
.chat-row.is-cont .chat-who{display:none}
.chat-row.is-cont .face{visibility:hidden}

.chat-col{display:flex; flex-direction:column; gap:3px; min-width:0}
.chat-row.is-right .chat-col, .chat-row.is-think .chat-col{align-items:flex-end}
.chat-who{
  font-size:var(--fs-caption); font-weight:500; color:var(--s-acc-tx);
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  padding:0 4px;
}
.chat-row.is-right .chat-who{color:var(--s-brand-h); justify-content:flex-end}
.chat-who em{font-style:normal; font-weight:400; color:var(--s-mute); font-size:var(--fs-caption)}

.chat-bubble{
  position:relative;
  padding:9px 13px 10px;
  border-radius:18px;
  box-shadow:var(--s-sh1);
  max-width:100%;
}
.chat-row.is-left .chat-bubble{
  background:var(--s-elev);
  color:var(--s-body);
  border:1px solid var(--s-line);
  border-bottom-left-radius:5px;
}
.chat-row.is-right .chat-bubble{
  background:linear-gradient(180deg, var(--petrol-600), var(--s-brand-h));
  color:var(--s-onbrand);
  border-bottom-right-radius:5px;
}
.chat-row.is-think .chat-bubble{
  background:var(--s-acc-pale);
  color:var(--s-acc-tx);
  border:1px dashed var(--mg-300);
  border-bottom-right-radius:5px;
  box-shadow:none;
}
.chat-bubble .talk-words{
  margin:0; min-height:1.45em;
  font-size:var(--fs-small); line-height:1.75; color:inherit;
}
.chat-row.is-think .talk-words{ white-space:pre-wrap}
.chat-sys.is-hook{
  background:var(--s-acc-pale); border-color:var(--mg-200);
  color:var(--s-acc-tx); font-weight:600;
}
.talk-word, .talk-space{display:inline}
.talk-word.is-wait, .talk-space.is-wait{display:none}
.talk-word.is-on{display:inline}
.talk-space{white-space:pre}
.talk-words.is-live::after{display:none}
.chat-bubble-dots{
  display:inline-flex; align-items:center; gap:5px;
  min-height:18px; padding:11px 14px;
}
.chat-dot{
  width:7px; height:7px; border-radius:var(--r-full);
  background:currentColor; opacity:.35;
  animation:chat-dot 1.15s ease-in-out infinite;
}
.chat-row.is-left .chat-dot{background:var(--s-brand)}
.chat-row.is-right .chat-dot{background:var(--s-onbrand)}
.chat-dot:nth-child(2){animation-delay:.15s}
.chat-dot:nth-child(3){animation-delay:.3s}

.talk-ctrls{display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:6}
.talk-ctrls .btn{min-height:44px}
.talk-hint{font-size:var(--fs-caption); color:var(--s-mute); margin:0}
.talk-tools{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding:2px 0 6px; position:relative; z-index:6;
}
.talk-dump{ min-height:40px; padding:8px 14px; font-size:var(--fs-ui) }
.talk-dump svg.lucide{ width:16px; height:16px }
.lap-tools{ justify-content:center }

.stage-vis.is-now::after{
  background:linear-gradient(180deg, rgba(17,27,33,.14), transparent 36%, rgba(17,27,33,.62) 100%);
}
.now-cap{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:5;
  display:flex; align-items:flex-end; gap:10px;
  padding:10px 12px;
  border-radius:var(--r-lg);
  background:rgba(17,27,33,.58);
  color:var(--s-on-dark);
  backdrop-filter:blur(8px);
  animation:craft-rise .45s var(--ease) both;
}
.now-cap .face{ flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.35) }
.now-cap-k{
  margin:0; font-size:var(--fs-caption); font-weight:500;
  color:var(--s-acc);
}
.now-cap-t{
  margin:3px 0 0; font-size:var(--fs-ui); line-height:1.5; color:var(--s-on-dark); font-weight:600;
}
.now-cut{
  display:flex; flex-direction:column; gap:14px;
  margin-top:2px;
  padding:18px 16px 16px;
  background:linear-gradient(180deg, var(--s-acc-pale) 0%, var(--s-elev) 46%);
  border:1px solid var(--mg-200);
  border-radius:var(--r-xl);
  box-shadow:var(--s-sh1);
  animation:craft-rise .5s var(--ease) both;
}
.now-cut-film{
  display:inline-flex; align-items:center; gap:7px;
  margin:0;
  font-size:var(--fs-caption); font-weight:500; color:var(--s-acc-tx);
}
.now-cut-film svg.lucide{ width:14px; height:14px }
.now-cut-head{ display:flex; align-items:center; gap:12px }
.now-cut-name{ margin:0; font-size:var(--fs-small); font-weight:500; color:var(--s-brand-h) }
.now-cut-mood{ margin:2px 0 0; font-size:var(--fs-caption); color:var(--s-mute) }
.now-cut-lead{
  margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body);
}
.now-cut-cite{
  margin:0; padding:12px 14px;
  background:var(--s-elev);
  border:1px solid var(--s-line);
  border-left:3px solid var(--s-acc);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.now-cut-cite-k{ margin:0 0 6px; font-size:var(--fs-caption); font-weight:500; color:var(--s-mute) }
.now-cut-cite-t{ margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-tx); font-weight:600 }
.now-cut-q{
  margin:0; font-size:var(--fs-small); line-height:1.8;
}

@keyframes chat-in{
  from{opacity:0; transform:translateY(12px)}
  to{opacity:1; transform:none}
}
@keyframes chat-pop{
  from{opacity:0; transform:translateY(14px) scale(.94)}
  to{opacity:1; transform:none}
}
@keyframes chat-caret{
  0%, 49%{opacity:1} 50%, 100%{opacity:0}
}
@keyframes chat-dot{
  0%, 80%, 100%{transform:translateY(0); opacity:.3}
  40%{transform:translateY(-4px); opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .talk-word.is-wait, .talk-space.is-wait{display:inline; opacity:1}
  .cast-fig, .cast-fig.is-speak{transform:none; opacity:1}
  .chat-row, .chat-row.is-typing{animation:none}
  .talk-words.is-live::after, .chat-dot{animation:none}
  .now-cap, .now-cut{animation:none}
}

/* Campus map */
.world-hub{
  max-width:46rem; margin:0 auto;
  padding:var(--s6) var(--gutter) var(--s9);
  display:flex; flex-direction:column; gap:var(--s6);
}
.world-hero{display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start}
.world-yard{
  position:relative; width:100%; aspect-ratio:16/7; min-height:140px;
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--s-line); background:var(--s-sunken); box-shadow:var(--s-sh1);
}
.world-yard svg, .world-yard-photo{width:100%; height:100%; display:block}
.world-yard-photo{object-fit:cover; object-position:center 40%}
.world-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
}
@media(min-width:640px){
  .world-grid{grid-template-columns:1fr 1fr}
}
.world-pin{
  display:flex; gap:12px; align-items:stretch; text-align:start;
  width:100%; padding:0; overflow:hidden;
  background:var(--s-surface); border:1px solid var(--s-line);
  border-radius:var(--r-lg); cursor:pointer; font-family:var(--font); color:inherit;
  box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
  min-height:88px;
}
.world-pin:hover:not(:disabled){border-color:var(--s-brand); transform:translateY(-1px); box-shadow:var(--s-sh2)}
.world-pin.is-now{border-color:var(--s-acc); box-shadow:0 0 0 3px var(--s-acc-soft)}
.world-pin.is-done{border-color:var(--s-ok)}
.world-pin.is-locked, .world-pin:disabled{opacity:.78; cursor:not-allowed; transform:none}
.world-pin-art{
  width:92px; flex:none; background:var(--s-acc-pale); position:relative;
  overflow:hidden;
}
.world-pin-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%; display:block;
}
.world-pin-art[data-light="dusk"], .world-pin-art[data-light="day"]{
  background:var(--s-brand-tint);
}
.world-pin-art[data-light="dawn"]{background:var(--s-acc-pale)}
.world-pin-body{padding:12px 12px 12px 0; display:flex; flex-direction:column; gap:4px; min-width:0; flex:1}
.world-pin-body h3{font-size:var(--fs-small); font-weight:600; line-height:1.4; margin:0}
.world-pin-body p{font-size:var(--fs-caption); line-height:1.6; color:var(--s-mute); margin:0}
.world-status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-caption); font-weight:500; color:var(--s-acc-tx);
}
.world-pin.is-locked .world-status{color:var(--s-mute)}
.world-pin.is-done .world-status{color:var(--s-ok-tx)}
.world-companions{display:flex; gap:var(--s3); flex-wrap:wrap}
.world-about{align-self:flex-start}
.sheet-about{display:flex; flex-direction:column; gap:var(--s4)}
.sheet-about .aim-list{margin:0}

/* ==========================================================================
   Module overture — editorial briefing, not a map, not a modal
   ========================================================================== */
/* Hero keeps petrol-50; bands after match other pages' paper canvas */
.bg-overview .brief-hero{
  background:
    radial-gradient(ellipse 85% 90% at 108% 0%, rgba(148,199,229,.42) 0%, transparent 58%),
    radial-gradient(ellipse 70% 80% at -8% 12%, rgba(236,244,249,.95) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 12% 100%, rgba(192,225,244,.4) 0%, transparent 52%),
    linear-gradient(165deg, #F5FBFE 0%, #ECF4F9 38%, #E4F1F8 68%, #F7FBFD 100%);
}

.brief{
  display:flex; flex-direction:column; gap:0; padding-bottom:0;
  min-height:calc(100dvh - var(--header-h));
  background:var(--s-canvas);
}
.brief-band{
  padding:var(--s7) var(--gutter) var(--s8);
  background:var(--s-canvas);
}
.brief-band-in{
  max-width:72rem; margin:0 auto; width:100%;
  display:flex; flex-direction:column; gap:var(--s5);
}
.brief-band.is-tight{
  padding:var(--s5) var(--gutter) var(--s6);
}
.brief-band.is-tight .brief-band-in{gap:var(--s4)}
.brief-head{display:flex; flex-direction:column; gap:6px}
.brief-kicker{
  font-size:var(--fs-caption); font-weight:500;
  color:var(--s-acc-tx); margin:0;
}
.brief-hero .brief-kicker{color:var(--s-acc-tx)}
.brief-close .brief-kicker{color:var(--mg-300)}
.brief-head h2{
  font-size:var(--fs-h1); font-weight:600; line-height:1.4; color:var(--s-tx); margin:0;
}
.brief-intro, .brief-note{
  font-size:var(--fs-lede); line-height:1.8; color:var(--s-body); margin:0; max-width:42em;
}
.brief-note{
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-lg); padding:16px 18px;
  box-shadow:var(--s-sh1); color:var(--s-soft);
}

.brief-hero{
  position:relative;
  color:var(--s-tx); padding:var(--s7) var(--gutter) var(--s8);
  display:flex; flex-direction:column; justify-content:center;
}
.brief-hero-in{
  position:relative; z-index:1;
  max-width:72rem; margin:0 auto; width:100%;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(220px,.9fr);
  gap:clamp(20px,4vw,48px); align-items:center;
}
.brief-hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:16px; min-width:0}
.brief-hero-art{
  justify-self:center; align-self:center; width:100%; max-width:28rem;
}
.brief-hero-art img{
  width:100%; height:auto; display:block; object-fit:contain;
}
.brief-title{
  font-size:var(--fs-display); font-weight:600; line-height:1.3;
  max-width:18ch; margin:0;
  color:var(--s-brand-a);
  background:linear-gradient(90deg, var(--petrol-700) 0%, var(--petrol-500) 32%, var(--mg-500) 68%, var(--mg-400) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.brief-en{font-family:var(--latin); font-size:var(--fs-ui); color:var(--s-mute); margin:0}
.brief-lede{font-size:var(--fs-lede); line-height:1.8; color:var(--s-body); margin:0; max-width:36em}

.brief-map{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:0;
  width:100%; max-width:36rem; margin:4px 0 2px;
}
.brief-map-node{
  position:relative; isolation:isolate;
  flex:1 1 0; min-width:7.5rem;
  display:grid; grid-template-columns:18px 1fr; grid-template-rows:auto auto;
  column-gap:8px; row-gap:1px; align-items:center; text-align:start;
  padding:4px 16px 4px 12px;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  transition:transform var(--t-fast) var(--ease);
}
.brief-map-node:hover{transform:translateY(-1px)}
.brief-map-node + .brief-map-node{
  box-shadow:inset 1px 0 0 var(--s-line);
}
.brief-map-node::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; border-radius:2px;
}
.brief-map-node.tone-mg::before{background:var(--s-acc)}
.brief-map-node.tone-sky::before{background:var(--s-brand)}
.brief-map-node.tone-fern::before{background:var(--s-ok)}
.brief-map-ico{
  grid-row:1 / span 2; grid-column:1; align-self:center;
  width:18px; height:18px; display:grid; place-items:center;
  background:none; border:0; box-shadow:none; color:var(--s-acc-tx);
}
.brief-map-node.tone-sky .brief-map-ico{color:var(--s-brand-h)}
.brief-map-node.tone-fern .brief-map-ico{color:var(--s-ok-tx)}
.brief-map-ico svg.lucide{width:15px; height:15px}
.brief-map-v{
  grid-column:2; grid-row:1; justify-self:start;
  font-size:var(--fs-small); font-weight:500; color:var(--s-brand-a);
  margin:0; line-height:1.3;
}
.brief-map-l{
  grid-column:2; grid-row:2; justify-self:start;
  font-size:var(--fs-caption); font-weight:500;
  color:var(--s-mute); margin:0;
}
.brief-map-node.tone-sky .brief-map-l,
.brief-map-node.tone-fern .brief-map-l{color:var(--s-mute)}

.brief-hero-aims{
  width:100%; max-width:42rem;
  display:flex; flex-direction:column; gap:10px;
  text-align:start;
}
.brief-hero-aims-title{
  margin:0; font-size:var(--fs-body); font-weight:400; line-height:1.75;
  color:var(--s-body);
}
.brief-hero-aims-title strong{
  font-weight:500; color:var(--s-tx);
}
.brief-hero-aims-list{
  margin:0; padding:0 0 0 1.15em;
  display:flex; flex-direction:column; gap:6px;
}
.brief-hero-aims-list li{
  font-size:var(--fs-small); line-height:1.75;
  color:var(--s-body);
}
.brief-hero-aims-list li::marker{color:var(--s-acc)}

.brief-chips{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 2px}
.brief-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--r-full);
  background:rgba(254,251,248,.08); border:1px solid rgba(241,245,247,.14);
  font-size:var(--fs-caption); font-weight:600; color:var(--s-on-dark-acc);
}
.brief-chip svg.lucide{width:14px; height:14px; color:var(--mg-300)}
.brief-cast{display:flex; flex-direction:column; gap:10px; justify-content:flex-end}
.brief-cast-card{
  display:flex; gap:12px; align-items:center;
  padding:12px 14px; border-radius:var(--r-lg);
  background:rgba(254,251,248,.07); border:1px solid rgba(241,245,247,.12);
}
.brief-cast-card h3{font-size:var(--fs-small); color:var(--s-on-dark); margin:0 0 2px}
.brief-cast-card p{font-size:var(--fs-caption); color:rgba(241,245,247,.68); margin:0; line-height:1.5}
.brief-cast-meta{font-size:var(--fs-caption)!important; opacity:.8}

.brief-split{display:grid; grid-template-columns:1fr; gap:14px}
.brief-panel{
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-xl); padding:20px 22px;
  display:flex; flex-direction:column; gap:10px; box-shadow:var(--s-sh1);
}
.brief-panel p{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.brief-panel.is-deep{
  background:linear-gradient(165deg,#003B53,#002E41); color:var(--s-on-dark-soft);
  border-color:transparent; box-shadow:var(--s-sh3);
}
.brief-panel.is-deep .brief-kicker{color:var(--mg-300)}
.brief-panel.is-deep p{color:rgba(241,245,247,.9)}

.why-story{display:grid; grid-template-columns:1fr; gap:16px}
.why-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:14px;
  padding:22px 22px 18px;
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-xl); box-shadow:var(--s-sh1);
}
.why-card::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:4px;
  background:linear-gradient(90deg, var(--s-brand), var(--petrol-300));
}
.why-card::after{
  content:""; position:absolute; width:11rem; height:11rem; right:-3.5rem; top:-4rem;
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, var(--s-brand-tint), transparent 70%);
}
.why-card.is-warm::before{background:linear-gradient(90deg, var(--s-acc), var(--mg-300))}
.why-card.is-warm::after{background:radial-gradient(circle, var(--s-acc-pale), transparent 70%)}
.why-card-top, .why-card-body, .why-beats{position:relative; z-index:1}
.why-card-top{display:flex; align-items:center; gap:12px}
.why-mark{
  flex:none; width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--s-brand-pale); color:var(--s-brand-h);
  box-shadow:inset 0 0 0 1px var(--s-brand-soft);
}
.why-mark.tone-mg{
  background:var(--s-acc-pale); color:var(--s-acc-tx);
  box-shadow:inset 0 0 0 1px var(--s-acc-soft);
}
.why-mark svg.lucide{width:22px; height:22px}
.why-card-body{
  margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body);
}
.why-beats{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.why-beats.is-three{grid-template-columns:1fr}
.why-beats li{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-lg);
  background:var(--s-brand-pale); border:1px solid var(--s-brand-soft);
}
.why-card.is-warm .why-beats li{
  background:rgba(255,255,255,.7); border-color:var(--s-acc-soft);
}
.why-beat-ico{
  flex:none; width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--s-elev); color:var(--s-brand-h);
  box-shadow:var(--s-sh1);
}
.why-card.is-warm .why-beat-ico{color:var(--s-acc-tx)}
.why-beat-ico svg.lucide{width:16px; height:16px}
.why-beat-copy{display:flex; flex-direction:column; gap:1px; min-width:0}
.why-beat-copy strong{font-size:var(--fs-ui); font-weight:500; color:var(--s-tx); line-height:1.3}
.why-beat-copy em{font-size:var(--fs-caption); font-style:normal; color:var(--s-mute); line-height:1.4}

.why-pledge{
  display:grid; grid-template-columns:1fr; gap:0;
  border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(165deg, #003B53 0%, #002E41 58%, #021D2A 100%);
  color:var(--s-on-dark-soft); box-shadow:var(--s-sh3);
}
.why-pledge-vis{
  position:relative; min-height:220px;
  display:grid; place-items:end center;
  padding:20px 16px 16px;
  background:
    radial-gradient(70% 80% at 50% 20%, rgba(104,171,207,.28), transparent 62%),
    linear-gradient(180deg, #0A3A4E 0%, #021D2A 100%);
}
.why-pledge-vis img{
  width:min(100%, 22rem); height:auto; display:block;
  object-fit:contain; filter:drop-shadow(0 12px 24px rgba(2,29,42,.35));
}
.why-pledge-cap{
  position:absolute; left:16px; bottom:14px;
  margin:0; padding:6px 10px; border-radius:var(--r-full);
  font-size:var(--fs-caption); font-weight:500;
  background:rgba(2,29,42,.55); color:var(--s-on-dark-acc);
  border:1px solid rgba(228,184,139,.28);
}
.why-pledge-copy{
  display:flex; flex-direction:column; gap:12px;
  padding:22px 22px 20px;
}
.why-pledge .brief-kicker{color:var(--mg-300)}
.why-pledge .why-mark{
  background:rgba(228,184,139,.16); color:var(--mg-300);
  box-shadow:inset 0 0 0 1px rgba(228,184,139,.28);
}
.why-pledge-copy h3{
  margin:0; font-size:var(--fs-h2); font-weight:600;
  line-height:1.45; color:var(--s-on-dark);
}
.why-pledge-copy > p{
  margin:0; font-size:var(--fs-small); line-height:1.8; color:rgba(241,245,247,.86);
}
.why-path{
  list-style:none; margin:8px 0 0; padding:16px 0 0;
  border-top:1px solid rgba(241,245,247,.12);
  display:grid; grid-template-columns:1fr; gap:10px;
  position:relative;
}
.why-path li{
  display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto;
  column-gap:10px; row-gap:2px; align-items:center;
}
.why-path-ico{
  grid-row:1 / span 2; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(228,184,139,.14); color:var(--mg-300);
  border:1px solid rgba(228,184,139,.24);
}
.why-path-ico svg.lucide{width:18px; height:18px}
.why-path strong{font-size:var(--fs-ui); color:var(--s-on-dark)}
.why-path em{font-size:var(--fs-caption); font-style:normal; color:rgba(241,245,247,.68)}

.why-note{
  display:flex; align-items:flex-start; gap:10px;
  margin:0; padding:12px 14px; border-radius:var(--r-lg);
  background:var(--s-brand-pale); border:1px solid var(--s-brand-soft);
  font-size:var(--fs-small); line-height:1.75; color:var(--s-soft);
}
.why-note svg.lucide{width:16px; height:16px; flex:none; margin-top:3px; color:var(--s-brand)}
.brief-purpose{
  position:relative; overflow:hidden;
  padding:24px 24px 20px 28px; border-radius:var(--r-xl);
  background:linear-gradient(165deg, #003B53 0%, #002E41 58%, #021D2A 100%);
  color:var(--s-on-dark-soft); box-shadow:var(--s-sh3);
}
.brief-purpose::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg, var(--mg-300), var(--s-acc));
}
.brief-purpose-top{display:flex; gap:16px; align-items:flex-start}
.brief-purpose-ico{
  flex:none; width:48px; height:48px; border-radius:var(--r-lg);
  display:grid; place-items:center;
  background:rgba(228,184,139,.16); color:var(--mg-300);
  border:1px solid rgba(228,184,139,.28);
}
.brief-purpose-ico svg.lucide{width:22px; height:22px}
.brief-purpose-copy{display:flex; flex-direction:column; gap:8px; min-width:0}
.brief-purpose .brief-kicker{color:var(--mg-300)}
.brief-purpose h3{
  margin:0; font-size:var(--fs-h2); font-weight:600;
  line-height:1.45; color:var(--s-on-dark);
}
.brief-purpose-copy > p:last-child{
  margin:0; font-size:var(--fs-small); line-height:1.8; color:rgba(241,245,247,.86);
}
.brief-purpose-pillars{
  list-style:none; margin:18px 0 0; padding:16px 0 0;
  border-top:1px solid rgba(241,245,247,.12);
  display:flex; flex-wrap:wrap; gap:10px;
}
.brief-purpose-pillars li{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:var(--r-full);
  background:rgba(254,251,248,.08); border:1px solid rgba(241,245,247,.14);
  font-size:var(--fs-ui); font-weight:600; color:var(--s-on-dark-acc);
}
.brief-purpose-pillars svg.lucide{width:15px; height:15px; color:var(--mg-300)}
.brief-policies{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.brief-policy{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-lg);
  background:var(--s-surface); border:1px solid var(--s-line);
}
.brief-policy-ico{
  flex:none; width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--s-brand-pale); color:var(--s-brand-h);
}
.brief-policy-ico svg.lucide{width:15px; height:15px}
.brief-policy-copy{display:flex; flex-direction:column; gap:1px; min-width:0}
.brief-policy strong{font-size:var(--fs-ui); color:var(--s-brand-h); line-height:1.3}
.brief-policy em{font-size:var(--fs-caption); font-style:normal; color:var(--s-mute)}

.brief-diptych{display:grid; grid-template-columns:1fr; gap:14px; position:relative}
@media(min-width:720px){
  .brief-diptych::after{
    content:"ভিন্ন প্রত্যাশা";
    position:absolute; left:50%; top:42%; z-index:2;
    transform:translate(-50%,-50%) rotate(-8deg);
    font-size:var(--fs-caption); font-weight:500;
    color:var(--s-acc-tx); background:var(--s-elev);
    border:1px solid var(--s-line); border-radius:var(--r-full);
    padding:6px 12px; box-shadow:var(--s-sh2); white-space:nowrap;
  }
}
.brief-memory{
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-xl); padding:20px 20px 18px;
  display:flex; flex-direction:column; gap:12px; box-shadow:var(--s-sh2);
  position:relative; overflow:hidden;
}
.brief-memory::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--s-acc), var(--mg-300));
}
.brief-memory:last-child::before{
  background:linear-gradient(90deg, var(--s-brand), var(--petrol-400));
}
.brief-memory-top{display:flex; gap:12px; align-items:center}
.brief-memory-top h3{font-size:var(--fs-body); margin:0 0 2px}
.brief-memory-top p{font-size:var(--fs-caption); color:var(--s-mute); margin:0}
.brief-memory > p{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.brief-stamp{
  align-self:flex-start; position:relative;
  font-size:var(--fs-ui); font-weight:500; color:var(--s-mute);
  padding:4px 2px;
}
.brief-stamp::after{
  content:""; position:absolute; left:-6%; right:-6%; top:52%;
  height:2.5px; border-radius:2px;
  background:var(--s-bad); transform:rotate(-8deg);
}

.brief-qs{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:12px;
}
.brief-qs li{
  display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start;
  padding:16px 18px; border-radius:var(--r-lg);
  background:var(--s-elev); border:1px solid var(--s-line); box-shadow:var(--s-sh1);
}
.brief-q-n{
  width:40px; height:40px; border-radius:var(--r-full);
  background:var(--s-acc-pale); color:var(--s-acc-tx);
  display:grid; place-items:center;
  font-weight:600; font-size:var(--fs-body); flex:none;
}
.brief-qs p{
  margin:0; font-size:var(--fs-body); font-weight:500; line-height:1.75; color:var(--s-brand-h);
}

.brief-spine{display:flex; flex-direction:column; gap:0}
.brief-act{
  display:grid; grid-template-columns:28px 1fr; gap:16px;
  padding-bottom:28px; position:relative;
}
.brief-act:last-child{padding-bottom:0}
.brief-act::before{
  content:""; position:absolute; left:13px; top:30px; bottom:0;
  width:2px; background:linear-gradient(180deg, var(--s-acc), var(--s-brand-soft));
}
.brief-act:last-child::before{display:none}
.brief-node{
  width:28px; height:28px; border-radius:var(--r-full);
  background:var(--s-brand); color:var(--s-onbrand);
  display:grid; place-items:center;
  font-size:var(--fs-caption); font-weight:600; position:relative; z-index:1;
  box-shadow:0 0 0 4px var(--s-brand-pale);
}
.brief-act-body{
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-lg); padding:14px 16px;
  display:flex; flex-direction:column; gap:4px; box-shadow:var(--s-sh1);
}
.brief-act-body h3{font-size:var(--fs-body); margin:0}
.brief-act-body p{margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-mute)}
.brief-act-body .brief-kicker{margin-bottom:2px}

.brief-path{display:flex; flex-direction:column; gap:10px}
.brief-stop{
  display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start;
  text-align:start; width:100%; padding:16px;
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-lg); cursor:pointer; font-family:var(--font); color:inherit;
  box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.brief-stop:hover:not(:disabled){
  border-color:var(--s-brand); transform:translateY(-1px); box-shadow:var(--s-sh2);
}
.brief-stop.is-done{border-color:var(--s-ok); background:var(--s-ok-pale)}
.brief-stop.is-coming, .brief-stop.is-locked{opacity:.78; cursor:not-allowed; transform:none}
.brief-stop-no{
  width:48px; height:48px; border-radius:var(--r-full);
  background:var(--s-brand); color:var(--s-onbrand);
  display:grid; place-items:center; font-weight:600; font-size:var(--fs-ui); font-family:var(--font); font-variant-numeric:tabular-nums;
}
.brief-stop.is-coming .brief-stop-no,
.brief-stop.is-locked .brief-stop-no{background:var(--s-sunken); color:var(--s-mute)}
.brief-stop.is-done .brief-stop-no{background:var(--s-ok)}
.brief-stop-body{display:flex; flex-direction:column; gap:4px; min-width:0; padding-top:2px}
.brief-stop-body h3{font-size:var(--fs-small); font-weight:600; line-height:1.4; margin:0}
.brief-stop-body p{font-size:var(--fs-small); line-height:1.75; color:var(--s-mute); margin:0}
.brief-stop-meta{font-size:var(--fs-caption)!important; font-weight:500; color:var(--s-acc-tx)!important}

/* --- Listen cards: মডিউল পরিচিতি / মূল গল্প ----------------------------- */
.listen-stack{
  display:flex; flex-direction:column; gap:0;
  background:var(--s-surface);
  border:1px solid var(--s-line);
  border-radius:var(--r-xl);
  overflow:hidden;
}
.listen-card{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  padding:24px 24px 20px;
  background:transparent; border:0; border-radius:0; box-shadow:none;
}
.listen-card + .listen-card{border-top:1px solid var(--s-line)}
.listen-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.listen-head-copy{display:flex; align-items:center; gap:10px; min-width:0; flex:1}
.listen-title-row{
  display:flex; align-items:center; gap:7px; min-width:0;
  cursor:pointer; border-radius:var(--r-sm);
  transition:color var(--t-fast) var(--ease);
}
.listen-title-row:hover .listen-title{color:var(--s-brand-a)}
.listen-title-row:hover .listen-title-chev{color:var(--s-brand-a)}
.listen-title-row:focus-visible{outline:2px solid var(--s-ring); outline-offset:3px}
.listen-title{
  font-size:var(--fs-h3); font-weight:600; line-height:1.4;
  color:var(--s-brand-h); margin:0;
  transition:color var(--t-fast) var(--ease);
}
.listen-title-chev{
  flex:none; display:grid; place-items:center; color:var(--s-brand);
  transition:color var(--t-fast) var(--ease);
}
.listen-title-chev svg.lucide{width:16px; height:16px}
.listen-faces{display:flex; align-items:center; flex:none}
.listen-faces img{
  width:26px; height:26px; border-radius:var(--r-full); object-fit:cover; object-position:top;
  border:1.5px solid var(--s-surface); background:var(--s-sunken);
  margin-inline-start:-6px;
}
.listen-faces img:first-child{margin-inline-start:0}
.listen-audio{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  min-height:32px; padding:4px 10px;
  border-radius:var(--r-md); cursor:pointer; font-family:var(--font);
  background:var(--s-brand-tint); color:var(--s-brand-h);
  border:0; box-shadow:none;
  font-size:var(--fs-caption); font-weight:500;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.listen-card.tone-mg .listen-audio{background:var(--s-brand-tint); color:var(--s-brand-h); box-shadow:none}
.listen-audio svg.lucide{width:15px; height:15px}
.listen-audio:hover{background:var(--petrol-200); color:var(--s-brand-a); transform:none; filter:none}
.listen-audio.is-on,
.listen-card.tone-mg .listen-audio.is-on{
  background:var(--s-brand-tint); color:var(--s-brand-h); box-shadow:none;
}
.listen-audio:focus-visible{outline:2px solid var(--s-ring); outline-offset:2px}
.listen-audio-lab[hidden]{display:none}
.listen-eq{display:none; align-items:center; gap:2px; height:14px}
.listen-eq i{display:block; width:2px; height:25%; border-radius:var(--r-full); background:currentColor}
.listen-audio.is-on .listen-eq{display:inline-flex}
.listen-audio.is-on .listen-eq i{animation:ovw-eq 1s ease-in-out infinite}
.listen-audio.is-on .listen-eq i:nth-child(2){animation-delay:-.25s}
.listen-audio.is-on .listen-eq i:nth-child(3){animation-delay:-.5s}
.listen-audio.is-on .listen-eq i:nth-child(4){animation-delay:-.75s}
.listen-audio.is-on .listen-eq i:nth-child(5){animation-delay:-.4s}
@media(prefers-reduced-motion:reduce){.listen-audio.is-on .listen-eq i{animation:none; height:60%}}
.listen-teaser{
  margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-soft);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; max-width:46em;
}
.listen-full{display:flex; flex-direction:column; gap:16px}
.listen-full[hidden], .listen-teaser[hidden]{display:none}
.listen-h{
  font-size:var(--fs-small); font-weight:600; line-height:1.45; color:var(--s-tx); margin:0 0 6px;
}
.listen-card.tone-mg .listen-h{color:var(--s-tx)}
.listen-full p, .story-beat-body p{
  margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body);
}
.listen-list, .listen-qs{
  margin:8px 0 0; padding:0 0 0 1.15em;
  display:flex; flex-direction:column; gap:6px;
}
.listen-list li, .listen-qs li{
  font-size:var(--fs-small); line-height:1.75; color:var(--s-body);
}
.listen-list li::marker{color:var(--s-brand)}
.listen-card.tone-mg .listen-list li::marker{color:var(--s-acc)}
.listen-qs{
  list-style:none; padding:8px 0 0;
  gap:8px;
}
.listen-qs li{
  position:relative;
  padding:10px 14px 10px 16px;
  background:var(--s-acc-pale); border-radius:var(--r-md);
  color:var(--s-acc-tx); font-weight:500;
  box-shadow:inset 3px 0 0 var(--s-acc);
}
.story-beat-body p + .listen-h{margin-top:14px}
.listen-more{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 0; background:none; border:0; cursor:pointer;
  font-family:var(--font); font-size:var(--fs-ui); font-weight:500;
  color:var(--s-mute);
}
.listen-card.tone-mg .listen-more{color:var(--s-mute)}
.listen-more:hover{color:var(--s-brand-h); text-decoration:none}
.listen-more:focus-visible{outline:2px solid var(--s-ring); outline-offset:2px; border-radius:4px}
.listen-more svg.lucide{width:14px; height:14px}

.story-path{
  display:flex; flex-direction:column; gap:0;
  padding-left:6px;
}
.story-path.has-fig{display:block}
.story-path.has-fig::after{content:""; display:block; clear:both}
.story-fig{
  float:inline-end;
  width:min(48%, 540px);
  margin:2px 0 8px 22px;
}
.story-fig img{
  display:block; width:100%; height:auto;
  background:transparent;
}
/* The beat is a normal block so lines wrap the picture, then widen into the space under it. */
.story-path.has-fig .story-beat{
  display:block;
  padding-left:42px;
}
.story-path.has-fig .story-beat-n{
  position:absolute;
  left:0;
  top:0;
}
.story-path.has-fig .listen-list{
  display:block;
}
.story-path.has-fig .listen-list li + li{margin-top:6px}
.method-flow{display:block}
.method-flow::after{content:""; display:block; clear:both}
.method-flow .listen-h{margin-top:0}
.method-flow .listen-h + .listen-h,
.method-flow p + .listen-h,
.method-flow .outcome-list + .listen-h{margin-top:16px}
.method-flow .outcome-list,
.method-flow .outcome-item,
.method-flow .outcome-item-body{display:block}
.method-flow .outcome-item{
  position:relative;
  padding-left:38px;
  margin-top:14px;
}
.method-flow .outcome-item-n{
  position:absolute;
  left:0;
  top:1px;
}
@media (max-width:800px){
  .story-fig{float:none; width:100%; margin:0 0 16px}
}
.story-beat{
  display:grid; grid-template-columns:28px 1fr; gap:14px; align-items:start;
  position:relative; padding:0 0 22px;
}
.story-beat:last-child{padding-bottom:0}
.story-beat::before{
  content:""; position:absolute; left:13px; top:28px; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--s-acc), rgba(208,152,95,.12));
}
.story-beat:last-child::before{display:none}
.story-beat-n{
  width:28px; height:28px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:var(--s-acc); color:var(--s-on-dark);
  font-size:var(--fs-caption); font-weight:600; z-index:1;
}
.story-beat-body{min-width:0; padding-top:2px}
.listen-comps{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.listen-comp{
  font-size:var(--fs-caption); font-weight:500; padding:8px 12px; border-radius:var(--r-full);
  background:var(--s-surface); border:1px solid var(--s-line-mid); color:var(--s-body);
}

.outcome-list{
  list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.outcome-item{display:flex; gap:12px; align-items:flex-start}
.outcome-item-n{
  flex:none; width:26px; height:26px; margin-top:1px; border-radius:var(--r-full);
  background:var(--s-brand-tint); color:var(--s-brand-h);
  display:grid; place-items:center; font-size:var(--fs-caption); font-weight:600;
}
.outcome-item-body{min-width:0; display:flex; flex-direction:column; gap:3px}
.outcome-item-t{margin:0; font-size:var(--fs-small); font-weight:600; line-height:1.5; color:var(--s-tx)}
.outcome-item-d{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}

.brief-cta{
  display:flex; justify-content:center; padding-top:8px;
}

/* --- মূল বিষয়বস্তু concept hub ---------------------------------------- */
.lex-hub{
  --hub-gap:8px;
  --hub-card:136px;
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:repeat(3, var(--hub-card));
  grid-template-areas:
    "nw n ne"
    "w core e"
    "sw s se";
  gap:var(--hub-gap);
  width:100%;
  margin:0 auto;
}
.lex-core{
  grid-area:core;
  z-index:1;
  position:relative;
  width:100%; height:100%;
  min-height:0;
  justify-self:stretch; align-self:stretch;
  overflow:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  text-align:center;
  padding:14px 16px;
  border-radius:var(--r-xl);
  background:linear-gradient(155deg, var(--petrol-500) 0%, var(--petrol-600) 100%);
  color:var(--s-onbrand);
}
.lex-core::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(254,251,248,.2), transparent 48%);
  pointer-events:none;
}
.lex-core-mark{
  position:relative; z-index:1;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  background:rgba(254,251,248,.22);
  color:#FEFBF8;
  box-shadow:inset 0 0 0 1px rgba(254,251,248,.3);
}
.lex-core-mark svg.lucide{width:16px; height:16px}
.lex-core h2{
  position:relative; z-index:1;
  font-size:var(--fs-h3); font-weight:600; line-height:1.3;
  color:#FEFBF8; margin:0; text-wrap:balance;
  text-shadow:0 1px 2px rgba(0,46,65,.28);
}
.lex-petal{
  appearance:none; border:0; font:inherit; text-align:start;
  min-height:0; height:100%; width:100%;
  position:relative; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; gap:0;
  padding:14px 16px;
  border-radius:var(--r-xl);
  align-self:stretch;
  transition:box-shadow .35s ease;
}
.lex-petal.p-nw{grid-area:nw}
.lex-petal.p-n {grid-area:n}
.lex-petal.p-ne{grid-area:ne}
.lex-petal.p-e {grid-area:e}
.lex-petal.p-se{grid-area:se}
.lex-petal.p-s {grid-area:s}
.lex-petal.p-sw{grid-area:sw}
.lex-petal.p-w {grid-area:w}
.lex-petal.tone-sky{background:var(--s-brand-tint); color:var(--s-brand-a)}
.lex-petal.tone-mg{background:var(--s-acc-pale); color:var(--s-acc-tx)}
.lex-petal.tone-fern{background:var(--s-brand-pale); color:var(--s-brand-a)}
.lex-petal.tone-amb{background:var(--s-warn-pale); color:var(--s-warn-tx)}
.lex-petal-hd{
  display:flex; align-items:center; gap:8px; min-width:0;
  position:relative; z-index:1;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.lex-petal-ico{
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  background:rgba(254,251,248,.78);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.lex-petal-ico svg.lucide{width:13px; height:13px}
.lex-petal.tone-sky .lex-petal-ico{color:var(--s-brand-h)}
.lex-petal.tone-mg .lex-petal-ico{color:var(--s-acc-tx)}
.lex-petal.tone-fern .lex-petal-ico{color:var(--s-brand-h)}
.lex-petal.tone-amb .lex-petal-ico{color:var(--s-warn-tx)}
.lex-petal strong{
  font-size:var(--fs-ui); font-weight:500; line-height:1.3; color:inherit;
}
.lex-petal-body{
  display:grid;
  grid-template-rows:0fr;
  margin:0;
  padding:0;
  background:none;
  box-shadow:none;
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:grid-template-rows .35s cubic-bezier(.22,1,.36,1), opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1), margin-top .35s ease;
}
.lex-petal-body p{
  font-size:var(--fs-caption); line-height:1.45; margin:0;
  color:var(--s-body); font-weight:500;
  overflow:hidden; min-height:0;
}
.lex-petal:focus-visible{
  outline:2px solid var(--s-brand); outline-offset:2px;
}
.lex-petal.is-open{
  z-index:3;
  box-shadow:var(--s-sh1);
}
.lex-petal.is-open .lex-petal-hd{transform:translateY(-6px)}
.lex-petal.is-open .lex-petal-ico{transform:rotate(-8deg) scale(1.08)}
.lex-petal.is-open .lex-petal-body{
  grid-template-rows:1fr;
  opacity:1;
  pointer-events:auto;
  transform:none;
  margin-top:4px;
}
@media(hover:hover) and (pointer:fine){
  .lex-petal:hover{
    z-index:3;
    box-shadow:var(--s-sh1);
  }
  .lex-petal:hover .lex-petal-hd{transform:translateY(-6px)}
  .lex-petal:hover .lex-petal-ico{transform:rotate(-8deg) scale(1.08)}
  .lex-petal:hover .lex-petal-body{
    grid-template-rows:1fr;
    opacity:1;
    pointer-events:auto;
    transform:none;
    margin-top:4px;
  }
}

@media(max-width:639px){
  .lex-hub{
    --hub-card:112px; --hub-gap:6px;
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
  .lex-core{padding:10px 12px; gap:6px; border-radius:var(--r-lg)}
  .lex-core-mark{width:26px; height:26px; border-radius:8px}
  .lex-core-mark svg.lucide{width:13px; height:13px}
  .lex-core h2{font-size:var(--fs-ui)}
  .lex-petal{padding:10px 12px; border-radius:var(--r-lg)}
  .lex-petal strong{
    font-size:var(--fs-caption);
    overflow:hidden; display:-webkit-box;
    -webkit-box-orient:vertical; -webkit-line-clamp:2;
  }
  .lex-petal-body{padding:0}
  .lex-petal-body p{font-size:var(--fs-caption); line-height:1.4}
  .lex-petal-ico{width:22px; height:22px}
  .lex-petal-ico svg.lucide{width:11px; height:11px}
  .lex-petal.is-open .lex-petal-hd,
  .lex-petal:hover .lex-petal-hd{transform:translateY(-4px)}
  .lex-petal.is-open strong{display:none}
  .lex-petal.is-open .lex-petal-hd{transform:none; justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .lex-petal,
  .lex-petal-hd,
  .lex-petal-ico,
  .lex-petal-body{transition:none}
}

.brief-mosaic{display:grid; grid-template-columns:1fr; gap:12px}
.brief-tile{
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-lg); padding:16px 18px;
  display:flex; flex-direction:column; gap:6px; box-shadow:var(--s-sh1);
}
.brief-tile svg.lucide{width:18px; height:18px; color:var(--s-brand)}
.brief-tile h3{font-size:var(--fs-small); margin:0; line-height:1.4}
.brief-tile p{font-size:var(--fs-small); line-height:1.75; color:var(--s-mute); margin:0}

.brief-aims{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.brief-aims li{
  display:grid; grid-template-columns:32px 1fr; gap:12px; align-items:start;
  font-size:var(--fs-body); line-height:1.75; color:var(--s-body);
}
.brief-aim-n{
  width:32px; height:32px; border-radius:var(--r-full);
  background:var(--s-brand-tint); color:var(--s-brand-h);
  display:grid; place-items:center; font-weight:600; font-size:var(--fs-caption); margin-top:2px;
}
.brief-comps{display:flex; flex-wrap:wrap; gap:8px}
.brief-comp{
  font-size:var(--fs-caption); font-weight:500; padding:8px 12px; border-radius:var(--r-full);
  background:var(--s-surface); border:1px solid var(--s-line-mid); color:var(--s-body);
}

.brief-close{
  background:linear-gradient(160deg, #003B53, #021D2A);
  color:var(--s-on-dark-soft);
  padding:var(--s7) var(--gutter) var(--s8);
  text-align:center;
}
.brief-close .brief-band-in{align-items:center; gap:var(--s4)}
.brief-close-line{
  font-size:var(--fs-h1); font-weight:600; line-height:1.45;
  color:var(--s-on-dark); max-width:18em; margin:0;
}
.brief-close .btn{align-self:center}

@media(min-width:720px){
  .brief-split{grid-template-columns:1fr 1fr}
  .brief-diptych{grid-template-columns:1fr 1fr; gap:18px}
  .brief-mosaic{grid-template-columns:1fr 1fr}
  .why-story{grid-template-columns:1fr 1fr; gap:18px}
  .why-beats.is-three{grid-template-columns:repeat(3,1fr)}
  .why-path{grid-template-columns:repeat(3,1fr); gap:12px}
  .why-path::before{
    content:""; position:absolute; top:36px; left:18%; right:18%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(228,184,139,.45), transparent);
  }
  .why-path li{grid-template-columns:1fr; grid-template-rows:auto auto auto; justify-items:center; text-align:center}
  .why-path-ico{grid-row:auto; margin-bottom:4px}
  .brief-policies{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:960px){
  .brief-mosaic{grid-template-columns:repeat(4,1fr)}
  .brief-tile:nth-child(1),
  .brief-tile:nth-child(2){grid-column:span 2}
  .why-pledge{grid-template-columns:.9fr 1.2fr}
  .why-pledge-vis{min-height:100%; place-items:center}
  .why-pledge-vis img{width:min(100%, 26rem)}
}
@media(max-width:1499px){
  .brief-hero,
  .brief-band,
  .brief-close{padding:var(--s6) clamp(16px,2.2vw,28px) var(--s7)}
  .brief-hero-in,
  .brief-band-in{max-width:none}
  .brief-hero-in{
    grid-template-columns:minmax(0,1.45fr) minmax(160px,.62fr);
    gap:clamp(16px,2.2vw,28px);
    align-items:start;
  }
  .brief-hero-art{
    max-width:min(22rem, 34vw);
    justify-self:end;
    align-self:center;
    padding-inline:4px 2px;
  }
  .brief-hero-art img{
    width:100%;
    height:auto;
    max-height:min(380px, 52vh);
    object-fit:contain;
    object-position:center right;
  }
  .brief-hero-copy{gap:14px}
  .brief-title{font-size:var(--fs-h1); line-height:1.3}
  .brief-map{max-width:100%}
  .why-pledge-vis img{max-height:min(280px,42vh)}
}
@media(max-width:839px){
  .brief-hero-in{grid-template-columns:1fr; gap:20px}
  .brief-hero-art{max-width:18rem; order:-1; justify-self:center; align-self:center; margin-top:0; padding-inline:0}
  .brief-hero-art img{max-height:240px; object-position:center}
}
@media(max-width:639px){
  .brief-qs li{grid-template-columns:32px 1fr; padding:14px}
  .brief-q-n{width:32px; height:32px; font-size:var(--fs-ui)}
  .brief-hero,
  .brief-band,
  .brief-close{padding:var(--s6) var(--gutter) var(--s6)}
  .brief-hero{min-height:0}
  .brief-map{gap:6px; max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .brief-map-node{transition:none}
  .brief-map-node:hover{transform:none}
}

@media(max-width:639px){
  .cast-fig:not(.is-speak){display:none}
  .talk{max-height:none}
}

.step-in.is-stage .prose, .stage-desk .prose{max-width:none}
@media(min-width:768px){
  .step-in{padding:22px 24px 26px}
}
@keyframes rise{from{opacity:0}to{opacity:1}}
@keyframes scenein{to{opacity:1;transform:none}}

.run-pbar{display:none}

/* --- Action bar --------------------------------------------------------- */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--s-surface); border-top:1px solid var(--s-line);
  padding:6px 14px calc(6px + env(safe-area-inset-bottom));
  min-height:var(--bar-h);
  display:flex; align-items:center;
  transition:left var(--t-base) var(--ease);
}
@media(min-width:1024px){
  body:not(.is-sidebar-collapsed) .actionbar{left:var(--sidebar-w)}
}
.actionbar-in{
  width:100%; margin:0;
  display:grid; grid-template-columns:auto 1fr auto;
  gap:10px; align-items:center;
}
.slide-progress{
  min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.action-hint{
  margin:0; font-size:var(--fs-caption); line-height:1.3; color:var(--s-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; text-align:center;
}
.action-hint:empty{display:none}
.slide-track{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-width:0; max-width:100%;
}
.slide-dots{
  display:flex; align-items:center; justify-content:center; gap:3px;
  flex-wrap:wrap; min-width:0;
}
.slide-count{
  margin:0; flex:none;
  font-family:var(--font); font-size:var(--fs-caption); font-weight:600; line-height:1;
  color:var(--s-mute); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.slide-dot{
  width:18px; height:28px; padding:0; border:0; flex:none;
  background:transparent; cursor:pointer; position:relative;
  border-radius:var(--r-xs);
}
.slide-dot::after{
  content:""; position:absolute; left:2px; right:2px; top:50%;
  height:6px; margin-top:-3px; border-radius:99px;
  background:var(--s-line-ui); opacity:.38;
  transition:background var(--t-fast) var(--ease), opacity var(--t-fast), height var(--t-fast);
}
.slide-dot.is-done::after{background:var(--s-acc); opacity:.8}
.slide-dot.is-current::after{background:var(--s-acc-h); opacity:1; height:8px; margin-top:-4px}
.slide-dot.is-locked{cursor:help}
.slide-dot.is-locked::after{background:var(--s-line-ui); opacity:.38}
.slide-dot:hover:not(.is-locked):not(.is-current)::after{background:var(--s-acc); opacity:.7}
.slide-dot:focus-visible{outline:2px solid var(--s-ring); outline-offset:1px}
.action-prev, .action-next{flex:none}
.actionbar .btn{flex:none; min-height:36px; height:36px; padding:0 14px; font-size:var(--fs-ui)}
@media(min-width:640px){
  .action-prev, .action-next{min-width:8.5em}
}
@media(max-width:639px){
  .action-prev span:not(.arr), .action-next span:not(.arr){
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0
  }
  .action-prev, .action-next{width:36px; min-width:36px; padding:0}
  .action-next .arr{position:static; width:auto; height:auto; margin:0; clip:auto; overflow:visible}
}

.page-actions{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center}
.threshold .page-actions{justify-content:center}
.sheet-in .btn{width:100%; margin-top:var(--s5)}

/* ==========================================================================
   দৃশ্য · Scene
   ========================================================================== */
.stack{display:flex; flex-direction:column; gap:14px}
.figure + .figure-cap{margin-top:calc(var(--s2) - 14px)}
.figure{
  width:100%; aspect-ratio:16/9; max-height:280px; border-radius:var(--r-xl); overflow:hidden;
  background:var(--s-sunken); position:relative; border:1px solid var(--s-line);
  box-shadow:var(--s-sh1);
}
.figure svg, .figure img{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.figure img{object-fit:cover; object-position:center 28%}
.narration{color:var(--s-soft); font-size:var(--fs-small); line-height:1.8}
.speaker{color:var(--s-acc-tx)}
.advbox{
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--r-lg);
  padding:16px 18px; display:flex; flex-direction:column; gap:10px; min-height:auto;
  box-shadow:var(--s-sh1);
}
.choice-list{display:flex; flex-direction:column; gap:9px}
.choice{
  width:100%; text-align:start;
  min-height:44px; padding:12px 14px;
  background:var(--s-surface); color:var(--s-body);
  border:1px solid var(--s-line-mid); border-radius:var(--r-lg);
  font-family:var(--font); font-size:var(--fs-ui); line-height:1.75; cursor:pointer;
  box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.choice:hover:not(:disabled){border-color:var(--s-brand); transform:translateY(-1px); box-shadow:var(--s-sh2)}
.choice[aria-pressed="true"]{border-color:var(--s-brand); background:var(--s-brand-pale); box-shadow:0 0 0 3px var(--s-brand-soft)}
.choice:disabled{opacity:.55; cursor:not-allowed; transform:none}
.choice .why{display:block; margin-top:6px; font-size:var(--fs-caption); color:var(--s-mute)}
.consequence{padding:12px 15px; border-radius:var(--r-md); background:var(--s-acc-soft); color:var(--s-acc-tx);
  display:flex; flex-direction:column; gap:6px}
.principle{padding:12px 15px; border-radius:var(--r-md); background:var(--s-brand-soft); color:var(--s-brand-h);
  display:flex; flex-direction:column; gap:6px}

.media{
  position:relative; width:100%; aspect-ratio:16/9; background:var(--s-sunken);
  border:1px solid var(--s-line); border-radius:var(--r-xl);
  overflow:hidden; display:grid; place-items:center; box-shadow:var(--s-sh1);
}
.media-play{
  width:64px; height:64px; border-radius:var(--r-full); background:var(--s-brand); color:var(--s-onbrand);
  border:0; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(0,59,83,.55);
}
.media-play svg{width:24px; height:24px; fill:currentColor; stroke:none; margin-left:3px}
.bytes{font-family:var(--font); font-variant-numeric:tabular-nums; font-size:var(--fs-caption); color:var(--s-mute)}

/* ==========================================================================
   পাঠ · Page
   ========================================================================== */
.prose{
  max-width:var(--measure);
  display:flex; flex-direction:column; gap:16px;
}
.prose .t-label{margin-bottom:0}
.prose .t-h1, .prose .t-display{margin-bottom:0}
.prose h3{font-size:var(--fs-h2); line-height:1.5; font-weight:500; color:var(--s-tx)}
.prose p{font-size:var(--fs-body); line-height:1.8; color:var(--s-body)}
.prose strong{font-weight:600; color:var(--s-tx)}
.prose ul, .prose ol{padding-inline-start:1.3em; display:flex; flex-direction:column; gap:8px}
.prose li{font-size:var(--fs-body); line-height:1.8; color:var(--s-body)}
.prose li::marker{color:var(--s-brand)}
.scene-cite{
  display:flex; align-items:flex-start; gap:8px;
  width:100%; margin:0; padding:12px 14px;
  border:1px solid var(--s-line);
  border-left:3px solid var(--s-brand);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--s-elev);
  color:var(--s-brand-h);
  font-family:var(--font); font-size:var(--fs-small); font-weight:500; line-height:1.75;
  text-align:start; cursor:pointer;
}
.scene-cite:hover{ background:var(--s-brand-soft); }
.scene-cite:focus-visible{ outline:3px solid var(--s-ring); outline-offset:2px; }
.scene-cite svg.lucide{ width:16px; height:16px; flex:none; margin-top:4px; }
.keystate{
  position:relative; padding:22px 22px 20px; border-radius:var(--r-xl);
  background:linear-gradient(160deg,#003B53,#002E41); color:var(--s-on-dark-soft);
  font-size:var(--fs-body); line-height:1.8; font-weight:400; overflow:hidden;
  box-shadow:var(--s-sh3);
}
.prose p.keystate,
p.keystate,
figure.keystate,
figure.keystate p,
figure.keystate .t-cap,
.prose .keystate,
.prose .keystate p,
.prose .keystate .t-cap{
  color:var(--s-on-dark-soft);
}
.keystate::before{
  content:""; position:absolute; top:0; left:22px;
  width:36px; height:3px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--mg-300),var(--s-acc));
}
.keymsg{
  position:relative; padding:22px 24px 22px; border-radius:var(--r-xl);
  background:linear-gradient(160deg,#003B53,#002E41); color:var(--s-on-dark); overflow:hidden;
  box-shadow:var(--s-sh3);
}
.keymsg::before{
  content:""; position:absolute; top:0; left:24px;
  width:36px; height:3px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--mg-300),var(--s-acc));
}
.keymsg::after{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  border-radius:999px; background:radial-gradient(circle,rgba(228,184,139,.18),transparent 65%);
}
.keymsg .kh{font-size:var(--fs-caption); color:var(--s-on-dark-acc); font-weight:500; margin-bottom:8px; display:flex; align-items:center; gap:8px}
.keymsg .kh svg.lucide{width:14px; height:14px; color:var(--s-on-dark-acc)}
.keymsg p,
.prose .keymsg p,
.prose .keymsg{color:var(--s-on-dark-soft); margin:0; max-width:none; position:relative}
.prose .keymsg p{font-size:var(--fs-body); line-height:1.8}

.mentor{display:flex; gap:12px; align-items:flex-start}
.mentor-av{width:42px; height:42px; flex:none; border-radius:var(--r-full); overflow:hidden; background:var(--s-sunken)}
.mentor-av .face{--face:42px; width:100%; height:100%; box-shadow:none}
.refs{border-top:1px solid var(--s-line); padding-top:var(--s4);
  display:flex; flex-direction:column; gap:var(--s3)}
.refs li{font-size:var(--fs-small); line-height:1.75; color:var(--s-mute)}
.dl{
  display:flex; align-items:center; gap:var(--s3); width:100%; text-align:start;
  min-height:44px; padding:12px 14px; background:var(--s-surface);
  border:1px solid var(--s-line); border-radius:var(--r-lg);
  font-family:var(--font); font-size:var(--fs-ui); color:var(--s-brand-h); cursor:pointer;
  box-shadow:var(--s-sh1);
}
.dl svg{width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:2}
table.data{width:100%; border-collapse:collapse; font-size:var(--fs-ui)}
table.data th{
  font-size:var(--fs-caption); color:var(--s-soft); text-align:start;
  padding:10px 12px; border-bottom:1px solid var(--s-line);
  font-weight:500; background:var(--s-sunken);
}
table.data td{padding:10px 12px; border-bottom:1px solid var(--s-line);
  color:var(--s-body); line-height:1.75; vertical-align:top}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

.panel{border-bottom:1px solid var(--s-line)}
.panel:first-child{border-top:1px solid var(--s-line)}
.panel-h{
  width:100%; min-height:56px; display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) 0; background:none; border:0; cursor:pointer; text-align:start;
  font-family:var(--font); font-size:var(--fs-body); font-weight:600; color:var(--s-tx); line-height:1.6;
}
.panel-h .mk{width:22px; height:22px; flex:none; color:var(--s-brand); transition:transform var(--t-fast)}
.panel-h .mk svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2}
.panel-h[aria-expanded="true"] .mk{transform:rotate(45deg)}
.panel-b{padding:0 0 var(--s4) 34px; font-size:var(--fs-small); line-height:1.8; color:var(--s-body);
  display:flex; flex-direction:column; gap:var(--s3)}
.panel-b .eg{color:var(--s-acc-tx); font-size:var(--fs-ui)}

/* ==========================================================================
   খাতা · Notebook / journal
   ========================================================================== */
.khata-sheet{
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-xl); padding:18px 20px;
  display:flex; flex-direction:column; gap:18px;
  box-shadow:var(--s-sh2);
}
.commit-block{
  display:flex; flex-direction:column; gap:8px;
}
.commit-block .t-label{ margin:0; }
.commit-block .q{ margin:0; }
.khata-go, .commit-go{ align-self:flex-start; margin-top:2px; }
/* All question / prompt text: medium weight + primary brand colour */
.q, .prose .q, .prose p.q,
.poll-pop-q, .asg-bin-q, .val-q, .reflect-q, .check-q p,
.nb-item-q, .now-cut-q, .brief-qs p{
  font-weight:500;
  color:var(--s-brand-h);
}
.q, .prose .q, .prose p.q{font-size:var(--fs-small); line-height:1.8}
.opts{display:flex; flex-direction:column; gap:9px}
.quiz-check{
  align-self:stretch; justify-content:center; margin-top:2px;
}

.opt{
  width:100%; text-align:start; min-height:44px; padding:12px 14px;
  background:var(--s-surface); color:var(--s-body);
  border:1px solid var(--s-line-mid); border-radius:var(--r-lg);
  font-family:var(--font); font-size:var(--fs-ui); line-height:1.75; cursor:pointer;
  display:flex; gap:11px; align-items:flex-start;
  box-shadow:var(--s-sh1); position:relative; box-sizing:border-box;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.opt:hover:not(:disabled){border-color:var(--s-brand); transform:translateY(-1px); box-shadow:var(--s-sh2)}
.opt:focus-visible{outline:3px solid var(--s-ring); outline-offset:2px}
.opt[aria-pressed="true"], .opt.sel{border-color:var(--s-brand); background:var(--s-brand-pale); box-shadow:0 0 0 3px var(--s-brand-soft)}
.opt:disabled{cursor:default; transform:none}
.opt .ky{
  font-weight:600; font-size:var(--fs-caption); color:var(--s-mute); flex:none;
  width:24px; height:24px; border-radius:var(--r-full);
  display:grid; place-items:center; background:var(--s-sunken); margin-top:1px;
  transition:all var(--t-fast) var(--ease);
}
.opt .ky svg.lucide{width:13px; height:13px}
.opt.sel .ky, .opt[aria-pressed="true"] .ky{background:var(--s-brand); color:var(--s-onbrand)}
.opt.ok, .opt.is-key{
  border:1.5px solid var(--s-ok);
  background:color-mix(in srgb, var(--s-ok-pale) 22%, var(--s-surface));
  box-shadow:var(--s-sh1);
}
.opt.ok .ky, .opt.is-key .ky{background:var(--s-ok); color:var(--s-on-dark); animation:craft-pop .35s var(--ease-spring)}
.opt.bad, .opt.is-miss{
  border:1.5px solid var(--s-bad);
  background:color-mix(in srgb, var(--s-bad-pale) 22%, var(--s-surface));
  box-shadow:var(--s-sh1);
}
.opt.bad .ky, .opt.is-miss .ky{background:var(--s-bad); color:var(--s-on-dark); animation:craft-pop .35s var(--ease-spring)}
.opt.dim{opacity:.5}
.opt .tick{width:16px; height:16px; flex:none; margin-left:auto; margin-top:5px}
.opt .bx{
  width:20px; height:20px; flex:none; margin-top:3px;
  border:1.5px solid var(--s-line-ui); border-radius:var(--r-xs);
  display:grid; place-items:center;
}
.opt[aria-pressed="true"] .bx{border-color:var(--s-brand); background:var(--s-brand); color:var(--s-onbrand)}
.opt .bx svg{width:13px; height:13px; stroke-width:3; opacity:0; stroke:currentColor; fill:none}
.opt[aria-pressed="true"] .bx svg{opacity:1}

textarea.write, .jrnl{
  width:100%; min-height:96px; padding:13px 15px; resize:vertical;
  background:var(--s-sunken); color:var(--s-tx);
  border:1px solid var(--s-line); border-radius:var(--r-lg);
  font-family:var(--font); font-size:var(--fs-small); line-height:1.8;
  box-shadow:inset 0 2px 6px rgba(0,59,83,.05);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
textarea.write::placeholder, .jrnl::placeholder{color:var(--s-mute)}
textarea.write:focus, .jrnl:focus{
  outline:none; background:var(--s-elev); border-color:var(--s-brand);
  box-shadow:inset 0 2px 6px rgba(0,59,83,.03), 0 0 0 4px var(--s-brand-soft);
}
.privacy{display:flex; gap:7px; align-items:center; font-size:var(--fs-caption); color:var(--s-mute); margin-top:8px}
.privacy svg.lucide{width:13px; height:13px}
.privacy-banner{
  display:flex; gap:9px; align-items:center;
  background:var(--s-acc-soft); border:1px solid var(--s-acc-pale);
  border-radius:var(--r-lg); padding:10px 14px;
  font-size:var(--fs-caption); line-height:1.6; color:var(--s-acc-tx); font-weight:500;
}
.privacy-banner svg.lucide{width:15px; height:15px; flex:none; color:var(--s-acc)}
.saved{display:inline-flex; align-items:center; gap:var(--s2); color:var(--s-ok-tx); font-size:var(--fs-ui)}
.saved svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.4}

/* --- Feedback sheet ----------------------------------------------------- */
.sheet-scrim{position:fixed; inset:0; z-index:110; background:rgba(0,59,83,.28);
  opacity:0; pointer-events:none; transition:opacity var(--t-base)}
.sheet-scrim.open{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:var(--s-surface); color:var(--s-tx);
  border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--s-sh3);
  transform:translateY(100%); transition:transform var(--t-base) var(--ease);
  max-height:86dvh; overflow-y:auto;
  padding:var(--s5) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom));
}
@media(min-width:1024px){.sheet{left:var(--sidebar-w)}}
.sheet.open{transform:none}
.sheet-in{
  max-width:var(--measure); margin:0 auto;
  display:flex; flex-direction:column; gap:var(--s3);
}
.sheet-grip{width:36px; height:4px; border-radius:2px; background:var(--s-line-ui); margin:0 auto var(--s2)}
.sheet-title{font-size:var(--fs-h1); font-weight:600; line-height:1.45; color:var(--s-tx)}
.sheet-body{font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}

/* --- Threshold ---------------------------------------------------------- */
.threshold{
  min-height:calc(100dvh - var(--header-h));
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  max-width:var(--measure); margin:0 auto;
  padding:var(--s8) var(--gutter);
  text-align:center; gap:var(--s4);
}
.threshold-back{
  display:inline-flex; align-items:center; gap:4px; align-self:flex-start;
  padding:6px 10px 6px 6px; margin-bottom:-4px; border:none; border-radius:var(--r-md);
  background:transparent; color:var(--s-brand-h); font-family:var(--bn);
  font-size:var(--fs-ui); font-weight:500; cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.threshold-back:hover, .threshold-back:focus-visible{ background:var(--s-brand-soft); }
.threshold-back svg.lucide{ width:16px; height:16px; }
.threshold-stat{
  font-size:var(--fs-caption); font-weight:500; color:var(--s-brand-h);
}
.threshold-line{
  font-size:var(--fs-h1); font-weight:600; line-height:1.45; color:var(--s-tx);
  max-width:36em; width:100%;
}
.threshold-sub{font-size:var(--fs-lede); line-height:1.8; color:var(--s-soft); max-width:36em}
.threshold-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
  margin-top:var(--s2);
}
.threshold-link{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 0; border:0; background:none;
  font-family:var(--font); font-size:var(--fs-small); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; appearance:none; -webkit-appearance:none;
}
.threshold-link svg.lucide{ width:15px; height:15px; }
.threshold-link.is-khata{ color:var(--s-acc-tx); }
.threshold-link.is-khata:hover{ color:var(--s-acc-tx); }
.threshold-link.is-more{ color:var(--s-brand-h); }
.threshold-link.is-more:hover{ color:var(--s-brand-a); }
.threshold-link:focus-visible{ outline:3px solid var(--s-ring); outline-offset:3px; border-radius:4px; }
.threshold .page-actions{margin-top:var(--s4)}
@media(min-width:768px){
  .threshold-line{font-size:var(--fs-h1)}
}

/* --- Page / notebook cards --------------------------------------------- */
.page-card{
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--s-sh1);
  display:flex; flex-direction:column; gap:var(--s2);
}
[data-ground="page"] .page-card{background:var(--s-elev)}
.page-card .pt{font-size:var(--fs-caption); color:var(--s-acc-tx); font-weight:500}
.page-card .pb{font-size:var(--fs-small); line-height:1.8; color:var(--s-tx); white-space:pre-wrap}
.page-card .nb-title{margin:0; font-size:var(--fs-h3); font-weight:600; line-height:1.45; color:var(--s-tx)}
.nb-item{
  display:flex; flex-direction:column; gap:4px;
  padding-top:12px; margin-top:4px;
  border-top:1px solid var(--s-line);
}
.nb-item:first-of-type{border-top:0; padding-top:2px; margin-top:0}
.nb-item-q{margin:0; font-size:var(--fs-caption); line-height:1.5}
.nb-item-a{margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-tx); white-space:pre-wrap}

.content-kicker{font-size:var(--fs-caption); font-weight:500; color:var(--s-acc-tx)}
.content-h1{font-size:var(--fs-h1); font-weight:600; line-height:1.4; color:var(--s-tx)}
.content-lede{font-size:var(--fs-lede); line-height:1.75; color:var(--s-soft)}

.notebook-view{
  max-width:var(--measure); margin:0 auto;
  padding:var(--s7) var(--gutter) var(--s9);
  display:flex; flex-direction:column; gap:var(--s6);
}
.notebook-header{display:flex; flex-direction:column; gap:var(--s3)}
.notebook-grid{display:flex; flex-direction:column; gap:var(--s5)}

/* --- আরও জানতে · Resources ---------------------------------------------- */
.resources-view{gap:var(--s5)}
.res-summary{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px; background:var(--s-sunken);
  border:1px solid transparent; border-radius:var(--r-lg);
}
.res-summary-ico{
  width:44px; height:44px; flex:none; border-radius:var(--r-md);
  background:var(--s-elev); color:var(--s-ok-tx);
  display:grid; place-items:center; box-shadow:var(--s-sh1);
}
.res-summary-ico svg.lucide{width:22px; height:22px}
.res-summary-t{font-size:var(--fs-small); font-weight:600; line-height:1.5; color:var(--s-tx); margin:0}
.res-summary-s{font-size:var(--fs-caption); color:var(--s-mute); margin:4px 0 0}
.res-list{display:flex; flex-direction:column; gap:10px}
.res-card{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; background:var(--s-elev);
  border:1px solid var(--s-line); border-radius:var(--r-lg);
  box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.res-card:hover{border-color:var(--s-brand); box-shadow:var(--s-sh2)}
.res-mark{
  width:48px; height:48px; flex:none; border-radius:var(--r-md);
  background:var(--s-sunken); color:var(--s-brand-h);
  display:grid; place-items:center;
}
.res-mark svg.lucide{width:22px; height:22px}
.res-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.res-title{font-size:var(--fs-h3); font-weight:600; line-height:1.45; color:var(--s-tx); margin:0}
.res-desc{font-size:var(--fs-ui); line-height:1.6; color:var(--s-mute); margin:0}
.res-open{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; min-height:36px;
  background:var(--s-surface); color:var(--s-brand-h);
  border:1px solid var(--s-brand); border-radius:var(--r-md);
  font-family:var(--font); font-size:var(--fs-ui); font-weight:500;
  text-decoration:none; cursor:pointer;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.res-open:hover{background:var(--s-brand-pale); transform:translateY(-1px)}
.res-open:focus-visible{outline:3px solid var(--s-ring); outline-offset:2px}
.res-open svg.lucide{width:15px; height:15px}
@media(max-width:639px){
  .res-card{flex-wrap:wrap}
  .res-open{margin-left:auto}
}
.handout-sheet{display:flex; flex-direction:column; gap:var(--s4)}
.handout-term{
  padding:12px 14px; background:var(--s-sunken);
  border-radius:var(--r-md); display:flex; flex-direction:column; gap:6px;
}
.handout-en{font-size:var(--fs-caption); font-weight:500; color:var(--s-brand-h); margin:0}
.handout-term h4{font-size:var(--fs-body); font-weight:600; margin:0; color:var(--s-tx)}
.handout-term p{margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-body)}

/* --- Chart -------------------------------------------------------------- */
.chart-wrap{overflow-x:auto}
.chart svg{display:block; width:100%; height:auto}
.legend{display:flex; flex-wrap:wrap; gap:var(--s4) var(--s5)}
.legend span{display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--fs-ui); color:var(--s-body)}
.legend i{width:14px; height:14px; border-radius:var(--r-xs); display:block}

.pill-note{background:var(--s-brand-soft); border:1px solid transparent; border-radius:var(--r-md);
  padding:11px 14px; font-size:var(--fs-small); line-height:1.75; color:var(--s-brand-h);
  display:flex; flex-direction:column; gap:var(--s2)}

#toast{
  position:fixed; left:50%; top:calc(var(--header-h) + 12px); transform:translateX(-50%);
  z-index:200; width:max-content; max-width:min(440px, calc(100vw - 24px));
  display:flex; align-items:center; gap:12px;
  padding:10px 16px 10px 12px;
  background:var(--s-elev, #fff); color:var(--s-tx);
  border:1px solid var(--s-line); border-left:4px solid var(--petrol-500);
  border-radius:var(--r-md); box-shadow:var(--s-sh3);
  font-family:var(--font);
}
#toast[hidden]{display:none}
#toast.is-in{animation:toast-in .32s var(--ease) both}
@keyframes toast-in{from{opacity:0; transform:translate(-50%, -10px)} to{opacity:1; transform:translate(-50%, 0)}}
@media (prefers-reduced-motion:reduce){#toast.is-in{animation:none}}
.toast-ico{flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--petrol-50); color:var(--petrol-700)}
.toast-ico svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9}
.toast-body{display:flex; flex-direction:column; gap:1px; min-width:0}
.toast-t{font-size:var(--fs-caption); font-weight:500; line-height:1.45; color:var(--s-soft)}
.toast-d{font-size:var(--fs-small); font-weight:700; line-height:1.4; color:var(--s-tx)}
#toast:not(:has(.toast-d)) .toast-t{font-size:var(--fs-ui); font-weight:600; color:var(--s-tx)}
#toast.is-up{border-left-color:var(--fern-500)}
#toast.is-up .toast-ico{background:var(--fern-100, #E3F1E6); color:var(--fern-700, #2F6B3F)}
#toast.is-up .toast-d{color:var(--fern-700, #2F6B3F)}
#toast.is-down{border-left-color:var(--amb-500, #D9A441)}
#toast.is-down .toast-ico{background:var(--amb-100, #FBEFD5); color:var(--amb-800, #7A5410)}
.lock-tip{
  position:fixed; z-index:240; max-width:min(280px, 86vw);
  padding:8px 12px; border-radius:var(--r-md);
  background:var(--s-brand-a); color:var(--s-on-dark-soft);
  font-family:var(--font); font-size:var(--fs-caption); font-weight:500; line-height:1.45;
  box-shadow:var(--s-sh2); pointer-events:none; white-space:nowrap;
}
.lock-tip::after{
  content:""; position:absolute; left:var(--arrow-x, 50%); bottom:-5px;
  width:10px; height:10px; margin-left:-5px;
  background:var(--s-brand-a); transform:rotate(45deg);
}
.lock-tip.is-below::after{bottom:auto; top:-5px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important; animation-iteration-count:1!important}
  html{scroll-behavior:auto}
}
@media print{
  .platform-header,.sidebar,.sidebar-overlay,.actionbar,.sheet,.sheet-scrim,.run-pbar,.scene-rail,.scene-rail-wrap,.poll-pop{display:none!important}
  .main-content{margin:0!important}
  body, body:has(#stream){background:#fff; color:#000; overflow:visible}
  #stream{padding-bottom:0; height:auto; overflow:visible; display:block}
  .step{opacity:1!important; break-inside:avoid; overflow:visible; height:auto; padding-bottom:0; flex:none}
  body.grain::before{display:none}
}

/* ==========================================================================
   Module hub
   ========================================================================== */
.hub{
  max-width:42em; margin:0 auto;
  padding:var(--s7) var(--gutter) var(--s9);
  display:flex; flex-direction:column; gap:var(--s8);
}
.hub-hero{display:flex; flex-direction:column; gap:var(--s4); align-items:flex-start}
.hub-visual{
  width:100%; aspect-ratio:16/9; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--s-line); box-shadow:var(--s-sh1); background:var(--s-sunken);
}
.hub-visual img{width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block}
.hub-hero .btn-primary, .hub-hero .btn{align-self:flex-start}
.hub-title{font-size:var(--fs-h1); font-weight:600; line-height:1.4; color:var(--s-tx)}
.hub-en{font-family:var(--latin); font-size:var(--fs-caption); color:var(--s-mute)}
.hub-lede{font-size:var(--fs-lede); line-height:1.8; color:var(--s-soft); max-width:38em}
.hub-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--s-line); border-bottom:1px solid var(--s-line);
  padding:var(--s5) 0; margin:var(--s2) 0;
}
.hub-stat{display:flex; flex-direction:column; gap:4px; padding:0 var(--s3); text-align:center}
.hub-stat + .hub-stat{border-left:1px solid var(--s-line)}
.hub-stat-v{font-size:var(--fs-h2); font-weight:600; color:var(--s-brand-a); line-height:1.3; font-family:var(--font); font-variant-numeric:tabular-nums}
.hub-stat-l{font-size:var(--fs-caption); color:var(--s-mute)}
.hub-meta{font-size:var(--fs-caption); color:var(--s-mute); line-height:1.6}
.hub-section{display:flex; flex-direction:column; gap:var(--s4)}
.hub-section h2{font-size:var(--fs-h2); font-weight:600; line-height:1.4; color:var(--s-tx)}
.hub-section > p{font-size:var(--fs-body); line-height:1.8; color:var(--s-body)}
.unicef-callout{
  position:relative; overflow:hidden;
  background:var(--s-brand-pale); padding:16px 16px 14px;
  border-radius:var(--r-lg);
  font-size:var(--fs-small); line-height:1.8; color:var(--s-body);
}
.unicef-callout::before{
  content:""; position:absolute; top:0; left:16px;
  width:28px; height:3px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, var(--s-brand), var(--petrol-500));
}

.feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.feat-card{
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--r-lg);
  padding:18px; display:flex; flex-direction:column; gap:var(--s2);
  box-shadow:var(--s-sh1);
}
.feat-card svg.lucide{color:var(--s-brand); width:18px; height:18px; margin-bottom:4px}
.feat-card h4{font-size:var(--fs-small); font-weight:600; color:var(--s-tx)}
.feat-card p{font-size:var(--fs-small); line-height:1.75; color:var(--s-mute); margin:0}

.arc-row{display:grid; grid-template-columns:1fr; gap:var(--s3)}
@media(min-width:720px){
  .arc-row{grid-template-columns:repeat(4,1fr); gap:var(--s3)}
  .arc-join{display:none}
}
.arc-card{
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--r-lg);
  padding:var(--s4); display:flex; flex-direction:column; gap:6px; box-shadow:var(--s-sh1);
}
.arc-n{font-size:var(--fs-caption); font-weight:600; color:var(--s-acc-tx)}
.arc-card h4{font-size:var(--fs-small); font-weight:600}
.arc-card p{font-size:var(--fs-caption); line-height:1.6; color:var(--s-mute); margin:0}

.path-list{display:flex; flex-direction:column; gap:var(--s3)}
.path-item{
  display:flex; gap:var(--s4); align-items:flex-start; text-align:start;
  width:100%; padding:14px; background:var(--s-surface); border:1px solid var(--s-line);
  border-radius:var(--r-lg); cursor:pointer; font-family:var(--font); color:inherit;
  box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.path-item:hover{border-color:var(--s-brand); background:var(--s-brand-pale); transform:translateY(-1px)}
.path-item.is-done{border-color:var(--s-ok); background:var(--s-ok-pale)}
.path-item.is-coming{opacity:.85}
.path-no{
  width:40px; height:40px; flex:none; border-radius:var(--r-full);
  display:grid; place-items:center; background:var(--s-brand); color:var(--s-onbrand);
  font-weight:600; font-size:var(--fs-caption);
}
.path-item.is-coming .path-no{background:var(--s-sunken); color:var(--s-mute)}
.path-info{display:flex; flex-direction:column; gap:4px; min-width:0}
.path-info h4{font-size:var(--fs-small); font-weight:600; line-height:1.4}
.path-info p{font-size:var(--fs-small); line-height:1.75; color:var(--s-mute); margin:0}
.path-meta{font-size:var(--fs-caption)!important; color:var(--s-mute)!important}

.aim-list{list-style:none; padding:0; counter-reset:none; display:flex; flex-direction:column; gap:var(--s3); margin:0}
.aim-list li{
  font-size:var(--fs-body); line-height:1.75; color:var(--s-body);
  display:flex; gap:14px; align-items:flex-start;
  padding:14px 16px; background:var(--s-surface);
  border:1px solid var(--s-line); border-radius:var(--r-lg);
  box-shadow:var(--s-sh1);
}
.aim-n{
  width:28px; height:28px; flex:none; margin-top:2px;
  border-radius:var(--r-full); display:grid; place-items:center;
  background:var(--s-brand); color:var(--s-onbrand);
  font-size:var(--fs-caption); font-weight:600;
}
.aim-t{flex:1}

.guide-note{
  background:var(--s-acc-pale); border:1px solid var(--mg-200);
  border-radius:var(--r-xl); padding:16px 18px 14px;
  box-shadow:var(--s-sh1);
}
.guide-note-h{
  display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font-size:var(--fs-ui); font-weight:600; color:var(--s-acc-tx);
}
.guide-note-h svg.lucide{width:18px; height:18px; flex:none}
.guide-note ul{margin:0; padding-inline-start:1.2em; gap:8px}
.guide-note li{font-size:var(--fs-small); line-height:1.75; color:var(--s-acc-tx)}
.guide-note li::marker{color:var(--s-acc)}
.pause-card{
  background:var(--s-sunken); border:1px dashed var(--s-line);
  border-radius:var(--r-xl); padding:16px 18px 14px;
}
.pause-card-h{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font-size:var(--fs-ui); font-weight:600; color:var(--s-brand-a);
}
.pause-card-h svg.lucide{width:18px; height:18px; flex:none}
.pause-card p{margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-body)}

.ov-player{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:6px 14px;
  align-items:center;
  margin:4px 0 2px;
  padding:14px 16px 12px;
  border:1px solid rgba(47,120,155,.14);
  border-radius:var(--r-xl);
  background:
    radial-gradient(140px 90px at 8px 0, rgba(221,239,250,.95), transparent 72%),
    linear-gradient(180deg, #F7FBFD 0%, var(--s-surface) 62%);
  box-shadow:var(--s-sh1);
}
.ov-player-play{
  width:40px; height:40px; grid-row:1;
  border:0; border-radius:var(--r-full);
  background:var(--s-acc-h); color:var(--s-onacc);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 0 0 5px var(--s-acc-pale);
  transition:background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ov-player-play:hover{background:var(--s-acc-tx)}
.ov-player-play.is-on{
  background:var(--s-acc);
  box-shadow:0 0 0 5px var(--s-acc-pale);
}
.ov-player-play.is-on:hover{background:var(--s-acc-h)}
.ov-player-play:focus-visible{outline:2px solid var(--s-ring); outline-offset:4px; border-radius:var(--r-full)}
.ov-player-play svg{width:16px; height:16px}
.ov-player-play .lucide-play{margin-inline-start:1px}
.ov-player-copy{min-width:0}
.ov-player-title{
  margin:0; font-size:var(--fs-ui); font-weight:600; line-height:1.4; color:var(--s-tx);
}
.ov-player-time{
  margin:0;
  font-size:var(--fs-caption); line-height:1.4; color:var(--s-mute);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ov-player-time b{font-weight:500; color:var(--s-soft)}
.ov-player-track{
  grid-column:1 / -1;
  position:relative;
  height:40px;
  margin-top:2px;
  padding:0 2px;
}
.ov-player-wave{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:3px; pointer-events:none;
}
.ov-player-wave span{
  flex:1 1 0; height:100%; max-width:3px; min-width:2px;
  border-radius:99px; background:var(--s-acc-pale);
  transform:scaleY(var(--s, .2)); transform-origin:center;
}
.ov-player-wave span.is-past{background:var(--s-acc)}
.ov-player-wave span.is-now{background:var(--s-acc-tx)}
.ov-player.is-on .ov-player-wave span.is-now{
  animation:ov-now .9s ease-in-out infinite;
}
@keyframes ov-now{
  0%, 100%{transform:scaleY(var(--s, .2))}
  50%{transform:scaleY(calc(var(--s, .2) * 1.18))}
}
.ov-player-seek{
  position:absolute; inset:0;
  display:flex; align-items:center;
}
.ov-player-seek input{
  -webkit-appearance:none; appearance:none;
  width:100%; height:100%; margin:0; cursor:pointer;
  background:transparent;
}
.ov-player-seek input:focus-visible{outline:2px solid var(--s-ring); outline-offset:3px}
.ov-player-seek input::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--s-surface); border:2px solid var(--s-acc-h);
  box-shadow:0 0 0 3px rgba(255,255,255,.85);
}
.ov-player-seek input::-moz-range-track{height:100%; background:transparent; border:0}
.ov-player-seek input::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%;
  background:var(--s-surface); border:2px solid var(--s-acc-h);
  box-shadow:0 0 0 3px rgba(255,255,255,.85);
}
@media (max-width:420px){
  .ov-player-time{grid-column:2; justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .ov-player-play{transition:none}
  .ov-player.is-on .ov-player-wave span.is-now{animation:none}
}
.outcome-list{padding-inline-start:1.2em; display:flex; flex-direction:column; gap:var(--s2); margin:0}
.outcome-list li{font-size:var(--fs-small); line-height:1.75; color:var(--s-mute)}

.preview{
  max-width:var(--measure); margin:0 auto;
  padding:var(--s7) var(--gutter) var(--s9);
  display:flex; flex-direction:column; gap:var(--s5);
}
.preview .learned-list{margin-top:var(--s2)}

.school-chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  background:var(--s-brand-tint); color:var(--s-brand-h);
  font-size:var(--fs-caption); font-weight:600; border-radius:var(--r-full); max-width:16em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.school-chip svg.lucide{width:13px; height:13px}

/* ==========================================================================
   Faces, thought, leftover dialogue helpers
   Colour on a face is arbitrary (a = marigold, b = petrol). Never gender.
   ========================================================================== */
.face{
  --face:36px;
  width:var(--face); height:var(--face); flex:none; border-radius:var(--r-full);
  font-weight:600; font-size:calc(var(--face) * .34);
  display:grid; place-items:center; letter-spacing:normal; overflow:hidden;
  background:radial-gradient(circle at 30% 25%,#FCEFDF,var(--s-acc-pale));
  color:var(--s-acc-tx);
  box-shadow:inset 0 0 0 1px var(--s-acc-soft), 0 2px 6px -2px rgba(127,67,16,.3);
}
.face[data-tone="b"], .avatar.b{
  background:radial-gradient(circle at 30% 25%,#EEF6FB,var(--s-brand-tint));
  color:var(--s-brand-h);
  box-shadow:inset 0 0 0 1px var(--s-brand-soft), 0 2px 6px -2px rgba(0,59,83,.3);
}
.face.is-photo{
  background:var(--s-sunken); color:transparent; font-size:0;
  box-shadow:0 0 0 1px var(--s-line), var(--s-sh1);
}
.face.is-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 14%;
  display:block;
}

.thought{
  display:flex; gap:12px; align-items:flex-start;
  background:none; border:0; padding:0; box-shadow:none;
}
.thought-who{font-size:var(--fs-caption); font-weight:500; color:var(--s-brand-h); margin-bottom:3px;
  display:flex; align-items:center; gap:8px}
.thought-text{font-size:var(--fs-small); line-height:1.8; color:var(--s-body); margin:0;}
.now-card{
  display:flex; flex-direction:column; gap:10px;
  padding:14px 16px; background:var(--s-brand-soft); border-radius:var(--r-lg);
  border:1px solid transparent;
}
.stage-dir, .stagedir{
  font-size:var(--fs-caption); line-height:1.75; color:var(--s-mute);
  padding:0;
}
.scene-meta{display:flex; flex-direction:column; gap:8px}
.place-chips{display:flex; flex-wrap:wrap; gap:8px 14px;
  padding:8px 0; font-size:var(--fs-caption); color:var(--s-mute)}
.place-chip{
  font-size:var(--fs-caption); font-weight:500; color:var(--s-mute);
  background:transparent; border:0; padding:0;
  display:inline-flex; align-items:center; gap:5px;
}
.place-chip svg.lucide{width:13px; height:13px; color:var(--s-acc)}

.dialogue{display:flex; flex-direction:column; gap:16px}
.dlg{
  display:grid; grid-template-columns:40px minmax(0,1fr); gap:6px 12px;
  align-items:start; margin-bottom:0;
}
.dlg .face{grid-column:1; grid-row:1 / span 2; margin-top:2px}
.dlg-body{grid-column:2; min-width:0}
.dlg .who, .bubble-name{
  font-size:var(--fs-caption); font-weight:500; color:var(--s-acc-tx); margin-bottom:3px;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.dlg .who::before, .bubble-row:not(.is-right) .bubble-name::before{display:none}
.dlg .who em, .bubble-dir{font-style:normal; font-weight:400; color:var(--s-mute)}
.dlg p, .bubble{
  font-size:var(--fs-small); line-height:1.8; color:var(--s-body); margin:0;
  background:none; border:0; padding:0; border-radius:0;
}
.dlg.think, .thought{
  background:none; border:0; border-radius:0; padding:0;
  box-shadow:none;
}
.dlg.think p, .thought-text{color:var(--s-soft)}

.bubble-row{display:flex; flex-direction:column; gap:3px; max-width:none; align-items:stretch}
.bubble-row.is-right{align-self:stretch; flex-direction:column}
.bubble-row .face{display:none}
.bubble-col{display:flex; flex-direction:column; gap:3px; min-width:0}
.bubble-row.is-right .bubble{background:none; border:0; border-radius:0; padding:0}
.bubble-row.is-right .bubble-name{color:var(--s-acc-tx)}

.poll-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.poll-opt{
  min-height:72px; padding:var(--s4); border:1px solid var(--s-line-mid);
  background:var(--s-surface); border-radius:var(--r-lg); cursor:pointer;
  font-family:var(--font); font-size:var(--fs-ui); font-weight:500; color:var(--s-tx);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.poll-opt svg.lucide{color:var(--s-brand); width:18px; height:18px}
.poll-opt:hover{border-color:var(--s-brand); transform:translateY(-1px); box-shadow:var(--s-sh2)}
.poll-opt.is-on{border-color:var(--s-brand); background:var(--s-brand-pale); box-shadow:0 0 0 3px var(--s-brand-soft)}
.poll-fb{
  background:var(--s-brand-soft); border:1px solid transparent;
  padding:11px 14px; border-radius:var(--r-md);
  font-size:var(--fs-small); line-height:1.75; color:var(--s-brand-h);
}

.char-grid{display:grid; grid-template-columns:1fr; gap:var(--s4)}
@media(min-width:640px){.char-grid{grid-template-columns:1fr 1fr}}
.char-card{
  display:flex; gap:12px; align-items:center;
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--r-lg);
  padding:13px; box-shadow:var(--s-sh1);
}
.char-card h4{font-size:var(--fs-small); margin:0 0 2px}
.char-role{font-size:var(--fs-ui); color:var(--s-body); margin:0}
.char-meta{font-size:var(--fs-caption); color:var(--s-mute); margin:4px 0 0}

.char-cast{display:grid; grid-template-columns:1fr; gap:var(--s4)}
@media(min-width:640px){.char-cast{grid-template-columns:1fr 1fr}}
.char-portrait{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-xl); box-shadow:var(--s-sh2);
}
.char-portrait-media{
   background:var(--s-sunken); overflow:hidden;
  display:grid; place-items:center;
}
.char-portrait-media img{
  width:100%; height:250px; object-fit:cover; object-position:center 12%; display:block;
}
.char-portrait-body{
  padding:14px 16px 16px;
  display:flex; flex-direction:column; gap:4px;
}
.char-portrait-body h4{
  font-size:var(--fs-h3); font-weight:600; line-height:1.4;
  color:var(--s-brand-a); margin:0;
}
.char-portrait-body .char-role{
  font-size:var(--fs-ui); font-weight:500; color:var(--s-body); margin:0;
}
.char-portrait-body .char-meta{
  font-size:var(--fs-caption); font-weight:500; color:var(--s-brand); margin:6px 0 0;
}

.char-support-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s3);
}
@media(min-width:860px){.char-support-grid{grid-template-columns:repeat(5,1fr)}}
.char-support{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--s-surface); border:1px solid var(--s-line);
  border-radius:var(--r-lg); box-shadow:var(--s-sh1);
}
.char-support-media{
  aspect-ratio:1; background:var(--s-sunken); overflow:hidden;
  display:grid; place-items:center;
}
.char-support-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 16%; display:block;
}
.char-support-body{
  padding:12px 12px 14px;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
}
.char-support-body h4{
  font-size:var(--fs-small); font-weight:600; line-height:1.3;
  color:var(--s-brand-a); margin:0;
}
.char-support-body .char-role{
  font-size:var(--fs-caption); font-weight:500; line-height:1.45;
  color:var(--s-body); margin:0;
}
.char-support-body .char-meta{
  display:inline-block;
  margin:6px 0 0;
  padding:2px 8px;
  font-size:var(--fs-micro); font-weight:500; line-height:1.45;
  color:var(--s-acc-tx);
  background:var(--s-acc-pale);
  border-radius:var(--r-md);
}

.school-grid{display:grid; grid-template-columns:1fr; gap:10px}
@media(min-width:640px){.school-grid{grid-template-columns:repeat(3,1fr)}}
.school-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:start;
  padding:14px 14px 12px; min-height:96px; background:transparent;
  border:1px solid var(--s-line); border-radius:var(--r-lg);
  cursor:pointer; font-family:var(--font); color:inherit;
  box-shadow:none; position:relative;
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.school-card-top{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.school-card-check{
  width:18px; height:18px; border-radius:var(--r-full);
  background:var(--s-brand); color:var(--s-onbrand);
  display:grid; place-items:center;
}
.school-card-check svg.lucide{width:11px; height:11px; color:var(--s-onbrand)}
.school-card svg.lucide{color:var(--s-brand); width:16px; height:16px}
.school-card strong{font-size:var(--fs-ui); font-weight:500}
.school-card span{font-size:var(--fs-caption); color:var(--s-mute); line-height:1.5}
.school-card:hover{border-color:var(--s-brand); background:var(--s-brand-soft)}
.school-card.is-on{
  border-color:var(--s-brand); background:var(--s-brand-pale);
  box-shadow:none; transform:none;
}
.school-note{
  background:var(--s-acc-soft); border:1px solid transparent; border-radius:var(--r-md);
  padding:12px 15px; display:flex; flex-direction:column; gap:var(--s3);
}
.school-note p{margin:0; font-size:var(--fs-small); line-height:1.75}
.school-guide{color:var(--s-acc-tx); font-weight:500}
.school-note-panel{
  margin-top:4px;
  background:var(--s-surface);
  border:1px solid var(--s-line);
  border-radius:var(--r-xl);
  overflow:hidden;
}
.school-note-h{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  text-align:start; padding:16px 18px; background:none; border:0; cursor:pointer;
  font-family:var(--font); color:inherit;
}
.school-note-h:hover{background:var(--s-brand-soft)}
.school-note-h strong{
  font-size:var(--fs-body); font-weight:600; line-height:1.4; color:var(--s-tx);
}
.school-note-tog{
  display:inline-flex; align-items:center; gap:4px; flex:none; margin-top:2px;
  font-size:var(--fs-caption); font-weight:500; color:var(--s-mute);
}
.school-note-tog svg.lucide{width:14px; height:14px}
.school-note-b{
  display:flex; flex-direction:column; gap:12px;
  padding:0 18px 18px;
}
.school-note-b[hidden]{display:none}
.school-note-b p{
  margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body);
}
.school-note-goal{color:var(--s-soft)}
.school-cols{
  display:grid; grid-template-columns:1fr; gap:10px;
  margin-top:4px;
  border:0; background:none; overflow:visible;
}
@media(min-width:840px){
  .school-cols{grid-template-columns:minmax(160px,.72fr) 1.1fr 1.25fr; align-items:stretch}
}
.school-col{
  display:flex; flex-direction:column; gap:8px;
  padding:14px 16px 16px;
  border-radius:var(--r-xl);
  min-width:0;
}
.school-col.tone-sky{background:var(--s-brand-pale); color:var(--s-brand-a)}
.school-col.tone-mg{background:var(--s-acc-pale); color:var(--s-acc-tx)}
.school-col.tone-amb{background:var(--s-warn-pale); color:var(--s-warn-tx)}
.school-col-k{
  margin:0; font-size:var(--fs-caption); font-weight:500;
  color:inherit;
}
.school-col-v{
  margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-body);
}
.school-col:first-child .school-col-v{font-weight:500; color:inherit}
.prose .school-note-b p,
.prose .school-col-v{font-size:var(--fs-small); line-height:1.75}
.prose .school-col-k{font-size:var(--fs-caption); line-height:1.4}
.school-cue{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; margin:0 0 10px;
  background:var(--s-acc-pale); border-radius:var(--r-md);
}
.school-cue-h{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-acc-tx);
}
.school-cue-h svg.lucide{width:14px; height:14px; flex:none}
.school-cue p{margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-acc-tx)}

/* ==========================================================================
   Reflection, flip, compare, stats, quiz
   ========================================================================== */
.reflect-list{display:flex; flex-direction:column; gap:12px}
.reflect-card{background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--s-sh1)}
.reflect-h{
  width:100%; display:flex; gap:var(--s3); align-items:flex-start; text-align:start;
  padding:14px 16px; background:none; border:0; cursor:pointer;
  font-family:var(--font); color:inherit;
  transition:background var(--t-fast);
}
.reflect-h:hover{background:var(--s-sunken)}
.reflect-n{
  width:28px; height:28px; flex:none; border-radius:var(--r-full);
  background:var(--s-acc-pale); color:var(--s-acc-tx);
  display:grid; place-items:center; font-size:var(--fs-caption); font-weight:600; margin-top:2px;
}
.reflect-q{font-size:var(--fs-small); line-height:1.5}
.reflect-b{padding:0 16px 16px; display:flex; flex-direction:column; gap:var(--s3)}
.reflect-b[hidden]{display:none}
.reflect-eg{
  font-size:var(--fs-small); line-height:1.75; color:var(--s-acc-tx);
  background:var(--s-acc-pale); padding:10px 12px; border-radius:var(--r-md);
}
.reflect-eg[hidden]{display:none}
.reflect-page .jrnl{
  min-height:72px; padding:10px 14px;
  background:var(--s-elev);
  box-shadow:none;
}
.reflect-page .jrnl:focus{
  background:var(--s-elev);
}
.reflect-page > .khata-go,
.reflect-page > .saved{ margin-top:4px; }
.reflect-eg-btn{ align-self:flex-start; margin-top:4px; gap:8px }
.reflect-eg-btn svg{ width:18px; height:18px }

.term-field{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  gap:28px 16px;
  justify-items:center;
  align-items:center;
  padding:12px 0 8px;
  overflow:visible;
}
.term-blob{
  position:relative;
  display:flex; justify-content:center; align-items:center;
  width:100%; min-height:150px;
  z-index:1;
}
.term-blob.is-on{z-index:4}
.term-blob-hit{
  --blob-w:158px;
  position:relative; overflow:visible;
  width:var(--blob-w); min-height:138px; padding:22px 16px 18px;
  border:0; cursor:pointer; font-family:var(--font); color:var(--s-brand-a);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; text-align:center;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0 18%, transparent 46%),
    radial-gradient(circle at 70% 78%, var(--s-brand-pale), transparent 55%),
    linear-gradient(165deg, #FFFFFF, var(--s-brand-pale));
  box-shadow:
    0 10px 22px -12px rgba(0,59,83,.28),
    0 2px 6px -2px rgba(0,59,83,.12);
  border-radius:68% 32% 58% 42% / 42% 54% 46% 58%;
  transition:transform var(--t-base) var(--ease-spring), box-shadow var(--t-base), background var(--t-base), color var(--t-base);
  animation: blob-float 4.2s ease-in-out infinite;
}
.term-blob:nth-child(1) .term-blob-hit{--blob-w:162px}
.term-blob:nth-child(2) .term-blob-hit{
  --blob-w:150px; animation-delay:.35s;
  border-radius:38% 62% 42% 58% / 52% 38% 62% 48%;
}
.term-blob:nth-child(3) .term-blob-hit{
  --blob-w:154px; animation-delay:.8s;
  border-radius:48% 52% 32% 68% / 62% 42% 58% 38%;
}
.term-blob:nth-child(4) .term-blob-hit{
  --blob-w:166px; animation-delay:1.1s;
  border-radius:58% 42% 62% 38% / 38% 62% 38% 62%;
}
.term-blob-hit svg.lucide{width:18px; height:18px; color:var(--s-brand); flex:none}
.term-blob-hit strong{font-size:var(--fs-ui); line-height:1.4; font-weight:500; color:inherit; max-width:9.5em}
.term-blob-en{font-size:var(--fs-caption); line-height:1.3; color:var(--s-mute); font-weight:500}
.term-blob-hit:hover,
.term-blob-hit:focus-visible{
  animation:none;
  transform:translateY(-3px) scale(1.04);
}
.term-blob-hit:focus-visible{outline:2px solid var(--s-ring); outline-offset:4px}
.term-blob.is-on .term-blob-hit{
  animation:none;
  transform:scale(1.06);
  color:var(--s-onbrand);
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.32) 0 18%, transparent 46%),
    linear-gradient(165deg, var(--s-brand), var(--s-brand-h));
  box-shadow:
    0 16px 32px -14px rgba(0,59,83,.42),
    0 4px 10px -4px rgba(0,59,83,.22);
}
.term-blob.is-on .term-blob-hit svg.lucide,
.term-blob.is-on .term-blob-en{color:var(--s-onbrand)}
.term-blob.is-seen:not(.is-on) .term-blob-hit{
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0 18%, transparent 46%),
    radial-gradient(circle at 70% 78%, var(--s-ok-pale), transparent 58%),
    linear-gradient(165deg, #FFFFFF, var(--s-ok-pale));
}
.term-blob-check{
  position:absolute; right:18%; bottom:14%; width:20px; height:20px;
  border-radius:50%; background:var(--s-ok); color:var(--s-onbrand);
  display:none; place-items:center;
  box-shadow:0 0 0 2px var(--s-surface);
}
.term-blob.is-seen .term-blob-check{display:grid}
.term-blob-check svg.lucide{width:11px; height:11px; color:var(--s-onbrand)}

.term-blob-pop{
  position:absolute; z-index:5;
  width:min(460px, 92vw);
  max-height:min(72vh, 560px); overflow-x:hidden; overflow-y:auto;
  padding:16px 18px 14px;
  border:0;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.9), transparent 42%),
    linear-gradient(180deg, #FFFFFF 0%, var(--s-surface) 100%);
  filter:drop-shadow(0 18px 28px rgba(0,59,83,.18)) drop-shadow(0 2px 6px rgba(0,59,83,.08));
  border-radius:22px 28px 24px 18px;
  display:flex; flex-direction:column; gap:12px;
  top:50%; transform:translateY(-50%);
  animation: term-pop-in .35s var(--ease) both;
}
.term-blob.is-right .term-blob-pop{animation-name:term-pop-in-rtl}
.term-blob.is-left .term-blob-pop{left:calc(50% + 78px)}
.term-blob.is-right .term-blob-pop{right:calc(50% + 78px); left:auto}
.term-blob-pop::before{
  content:""; position:absolute; top:50%; width:16px; height:16px;
  background:#FFFFFF; border:0;
  transform:translateY(-50%) rotate(45deg);
}
.term-blob.is-left .term-blob-pop::before{left:-7px}
.term-blob.is-right .term-blob-pop::before{right:-7px}
.term-blob-pop-k{
  margin:0; font-size:var(--fs-caption); font-weight:500;
  color:var(--s-brand); font-family:var(--latin);
}
.term-blob-pop-bar{
  display:flex; align-items:flex-start; gap:8px;
}
.term-blob-pop-t{
  margin:0; font-size:var(--fs-small); font-weight:600; line-height:1.45; color:var(--s-tx);
  flex:1; min-width:0;
}
.term-blob-x{
  flex:none; width:32px; height:32px; margin:-4px -6px 0 0; padding:0;
  border:0; background:transparent; border-radius:var(--r-full);
  cursor:pointer; display:grid; place-items:center;
  color:var(--s-mute);
  transition:background var(--t-fast), color var(--t-fast);
}
.term-blob-x:hover,
.term-blob-x:focus-visible{
  background:var(--s-brand-soft); color:var(--s-brand-h);
}
.term-blob-x:focus-visible{outline:2px solid var(--s-ring); outline-offset:2px}
.term-blob-x svg.lucide{width:18px; height:18px; stroke:currentColor}
.term-blob-pop-en{
  font-family:var(--latin); font-weight:500; font-size:var(--fs-caption); color:var(--s-brand);
}
.prose .term-blob-pop-d{
  font-size:var(--fs-small); line-height:1.8; margin:0; color:var(--s-body);
}
.prose .term-blob-pop p{margin:0}
.term-blob-eg{
  display:flex; flex-direction:column; gap:4px;
  background:linear-gradient(180deg, var(--s-acc-pale), #F8F2E9);
  padding:10px 12px 11px; border-radius:14px;
  color:var(--s-acc-tx) !important;
  font-size:var(--fs-caption)!important; line-height:1.75 !important;
  box-shadow:none; border:0;
  min-width:0;
}
.term-blob-eg em{
  display:block; font-style:normal; font-weight:500;
  font-size:var(--fs-caption); color:var(--s-acc-tx);
}
.term-eg-clip{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.term-eg-body.is-clip{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.prose .term-eg-p{
  margin:0;
  font-size:var(--fs-caption)!important; line-height:1.75 !important; color:inherit;
}
.term-blob-egs{
  margin:0; padding-left:1.15em; display:flex; flex-direction:column; gap:6px;
}
.prose .term-blob-egs li{
  margin:0;
  font-size:var(--fs-caption)!important; line-height:1.75 !important; color:inherit;
}
.term-eg-more{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:4px;
  margin:0; padding:0; border:0; background:none;
  font-family:var(--font); font-size:var(--fs-caption); font-weight:500;
  color:var(--s-acc-tx); cursor:pointer; line-height:1.4;
}
.term-eg-more svg.lucide{ width:14px; height:14px; }
.term-eg-more:hover{ color:var(--s-acc); }

@media(max-width:639px){
  .term-blob.is-on{
    grid-column:1 / -1;
    flex-direction:column;
    gap:10px;
  }
  .term-blob.is-on.is-right{flex-direction:column}
  .term-blob-pop{
    position:relative; top:auto; transform:none;
    left:auto !important; right:auto !important;
    width:100%; max-width:none;
    margin:0; flex:none;
    animation: term-pop-in-flow .35s var(--ease) both;
  }
  .term-blob-pop::before{display:none}
}

@keyframes blob-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes term-pop-in{
  from{opacity:0; transform:translateY(-50%) translateX(-10px) scale(.96)}
  to{opacity:1; transform:translateY(-50%)}
}
@keyframes term-pop-in-rtl{
  from{opacity:0; transform:translateY(-50%) translateX(10px) scale(.96)}
  to{opacity:1; transform:translateY(-50%)}
}
@keyframes term-pop-in-flow{
  from{opacity:0; transform:scale(.96)}
  to{opacity:1; transform:none}
}
@keyframes blob-morph{
  0%,100%{border-radius:68% 32% 58% 42% / 42% 54% 46% 58%}
  50%{border-radius:42% 58% 36% 64% / 56% 42% 58% 44%}
}

.compare-wrap{overflow-x:auto; border:1px solid var(--s-line); border-radius:var(--r-lg); background:var(--s-surface); box-shadow:var(--s-sh1)}
table.compare{width:100%; border-collapse:collapse; font-size:var(--fs-ui)}
table.compare th, table.compare td{padding:10px 12px; border-bottom:1px solid var(--s-line); vertical-align:top; line-height:1.75}
table.compare thead th{background:var(--s-sunken); text-align:start; color:var(--s-soft); font-weight:500}
table.compare thead th span{display:block; font-size:var(--fs-ui)}
table.compare thead th small{display:block; font-size:var(--fs-caption); color:var(--s-mute); font-weight:500; margin-top:2px}
table.compare tbody th{font-size:var(--fs-caption); color:var(--s-tx); font-weight:500; width:7em; text-align:start}
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td{border-bottom:0}

.prose.is-vs{max-width:44rem; gap:18px}
.vs-board{
  display:flex; flex-direction:column; gap:14px;
}
.vs-poles{
  display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:stretch;
}
.vs-pole{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  text-align:start; font-family:var(--font); margin:0;
  padding:14px 16px 16px; border-radius:var(--r-xl);
  border:1px solid var(--s-line); box-shadow:var(--s-sh1);
  color:var(--s-tx); min-height:92px;
}
.vs-pole.is-a{
  background:var(--s-acc-pale); border-color:var(--s-acc);
}
.vs-pole.is-b{
  background:var(--s-brand-pale); border-color:var(--s-brand);
}
.vs-pole-ico{
  width:32px; height:32px; border-radius:var(--r-full);
  display:grid; place-items:center; margin-bottom:6px;
}
.vs-pole-ico svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2}
.vs-pole.is-a .vs-pole-ico{background:#F3D7B7; color:var(--s-acc-tx)}
.vs-pole.is-b .vs-pole-ico{background:var(--s-brand-tint); color:var(--s-brand-h)}
.vs-pole-h{font-size:var(--fs-small); font-weight:600; line-height:1.4; font-family:var(--latin)}
.vs-pole small{font-size:var(--fs-caption); color:var(--s-mute); font-weight:600}
.vs-pole.is-a small{color:var(--s-acc-tx)}
.vs-pole.is-b small{color:var(--s-brand-h)}
.vs-pole-def{
  margin:6px 0 0; font-size:var(--fs-ui); line-height:1.7;
  color:var(--s-tx); font-weight:400;
}
.vs-flow{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-width:44px; color:var(--s-mute);
}
.vs-flow-line{
  width:28px; height:28px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:var(--s-sunken); color:var(--s-brand-h);
}
.vs-flow-line svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2}
.vs-flow em{
  font-style:normal; font-size:var(--fs-caption); font-weight:500;
  color:var(--s-soft);
}
.vs-table{
  display:grid; grid-template-columns:9.25em minmax(0,1fr) minmax(0,1fr);
  border:1px solid var(--s-line); border-radius:var(--r-xl);
  background:var(--s-surface); box-shadow:var(--s-sh1); overflow:hidden;
}
.vs-thead, .vs-rungs, .vs-rung{display:contents}
.vs-thead{
  color:var(--s-soft);
  font-size:var(--fs-caption); font-weight:500;
}
.vs-thead span,
.vs-feat, .vs-cell{
  min-width:0; box-sizing:border-box;
  padding:12px; border-right:1px solid var(--s-line);
}
.vs-thead span{
  padding:8px 12px; background:var(--s-sunken);
}
.vs-thead span:last-child,
.vs-rung .vs-cell:last-child{border-right:0}
.vs-thead .is-a{background:var(--s-acc-pale); color:var(--s-acc-tx)}
.vs-thead .is-b{background:var(--s-brand-pale); color:var(--s-brand-h)}
.vs-feat, .vs-cell{
  display:flex; align-items:flex-start; gap:8px;
  min-height:72px; border-top:1px solid var(--s-line);
}
.vs-feat{
  flex-direction:column; justify-content:center; gap:6px;
  color:var(--s-tx);
}
.vs-feat svg{width:16px; height:16px; stroke:var(--s-brand); fill:none; stroke-width:2}
.vs-feat strong{font-size:var(--fs-caption); font-weight:500; line-height:1.4}
.vs-cell{
  font-size:var(--fs-ui); line-height:1.75; color:var(--s-tx); align-items:center;
}
.vs-cell.is-a{
  background:var(--s-acc-pale);
}
.vs-cell.is-b{
  background:var(--s-brand-pale);
}

@media(max-width:639px){
  .vs-poles{grid-template-columns:1fr 1fr; gap:8px}
  .vs-flow{grid-column:1 / -1; flex-direction:row; min-width:0; padding:0 4px 2px}
  .vs-flow-line{width:24px; height:24px}
  .vs-table{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vs-thead span:first-child, .vs-feat{
    grid-column:1 / -1; min-height:0; flex-direction:row; align-items:center;
    border-right:0; border-bottom:1px solid var(--s-line); padding:10px 12px;
  }
  .vs-feat{border-top:1px solid var(--s-line)}
  .vs-feat strong{font-size:var(--fs-ui)}
  .vs-cell{min-height:64px}
}

.stat-tiles{
  display:grid; grid-template-columns:1fr; gap:12px;
  position:relative; z-index:1; padding:4px 2px 8px;
}
@media(min-width:640px){
  .stat-tiles{grid-template-columns:repeat(3,1fr); gap:14px}
  .stat-tile:nth-child(1){transform:rotate(-1.2deg)}
  .stat-tile:nth-child(2){transform:rotate(1.1deg)}
  .stat-tile:nth-child(3){transform:rotate(-.8deg)}
  .stat-tile:hover{transform:rotate(0deg) translateY(-6px); z-index:5}
}
.stat-tile{
  padding:28px 18px 24px; text-align:center; color:var(--s-on-dark);
  min-height:132px; display:flex; flex-direction:column; justify-content:center; gap:6px;
  box-shadow:0 16px 32px -18px rgba(0,59,83,.45);
  border:0; background:var(--petrol-700);
  transition:transform var(--t-base) var(--ease);
}
.stat-tile.tone-fern{background:var(--fern-600)}
.stat-tile.tone-petrol{background:var(--petrol-700)}
.stat-tile.tone-marigold{background:var(--mg-600)}
.prose .stat-v{
  margin:0; font-family:var(--font); font-variant-numeric:tabular-nums; font-size:var(--fs-display); font-weight:600;
  line-height:1; color:var(--s-on-dark);
}
.prose .stat-l{
  margin:0 auto; font-size:var(--fs-ui); line-height:1.45; color:var(--s-on-dark); font-weight:500; max-width:16em;
}
.prose .stat-s{
  margin:0 auto; font-size:var(--fs-caption); line-height:1.45; color:rgba(255,255,255,.82); max-width:16em;
}
.prose .case-context{
  margin:0; font-size:var(--fs-body); font-weight:500; line-height:1.5;
  color:var(--s-brand-h);
}
.prose .cause-panel-h{
  font-size:var(--fs-ui); font-weight:600; color:var(--s-brand-a); line-height:1.4;
}
.cause-panel{
  background:var(--s-overview);
  border:0;
  border-radius:var(--r-xl);
  padding:16px 16px 14px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--s-sh1);
}
.cause-panel-h{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:var(--fs-ui); font-weight:600; color:var(--s-brand-a);
}
.cause-panel-h svg.lucide{width:16px; height:16px; color:var(--s-brand)}
.cause-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:2px;
}
.cause-item{
  display:flex; align-items:flex-start; gap:11px;
  padding:9px 4px;
  border-bottom:1px solid var(--s-line);
}
.cause-item:last-child{border-bottom:0; padding-bottom:2px}
.cause-item-ico{
  flex:none; width:30px; height:30px; margin-top:1px; border-radius:var(--r-full);
  background:rgba(254,251,248,.82); border:1px solid var(--s-line-mid);
  display:grid; place-items:center;
}
.cause-item-ico svg.lucide{width:15px; height:15px; color:var(--s-brand)}
.cause-item-body{display:flex; flex-direction:column; gap:1px; padding-top:3px}
.cause-item-t{font-size:var(--fs-ui); font-weight:600; line-height:1.5; color:var(--s-body)}
.cause-item-s{font-size:var(--fs-caption); line-height:1.5; color:var(--s-mute)}

.insight-grid{display:flex; flex-direction:column; gap:var(--s3)}
.insight-card{
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--r-lg);
  padding:14px; display:grid; grid-template-columns:28px 1fr; gap:8px 12px; box-shadow:var(--s-sh1);
}
.insight-n{
  grid-row:1 / span 2; width:28px; height:28px; border-radius:var(--r-full);
  background:var(--s-brand); color:var(--s-onbrand); display:grid; place-items:center;
  font-size:var(--fs-caption); font-weight:600;
}
.insight-card h4{font-size:var(--fs-small); margin:0}
.insight-card p{font-size:var(--fs-small); line-height:1.75; color:var(--s-mute); margin:0; grid-column:2}

.quiz-dots{display:flex; gap:5px}
.quiz-dot{flex:1; height:4px; border-radius:var(--r-full); background:var(--s-sunken)}
.quiz-dot.is-current{background:linear-gradient(90deg,var(--s-acc-h),var(--s-acc))}
.quiz-dot.is-done{background:var(--s-ok)}
.quiz-score{text-align:center; padding:var(--s5) 0}
.quiz-score-n{font-size:var(--fs-display); font-weight:600; color:var(--s-brand-a); line-height:1; font-family:var(--font); font-variant-numeric:tabular-nums}
.quiz-score-l{font-size:var(--fs-caption); color:var(--s-mute); margin-top:8px}
.quiz-recap{display:flex; flex-direction:column; gap:var(--s3)}
.quiz-recap-row{
  background:var(--s-surface); border:1px solid var(--s-line); border-radius:var(--r-lg);
  padding:var(--s4); display:flex; flex-direction:column; gap:8px; box-shadow:var(--s-sh1);
  position:relative;
}
.quiz-recap-row.is-ok{
  background:color-mix(in srgb, var(--s-ok-pale) 22%, var(--s-surface));
  border:1.5px solid var(--s-ok);
}
.quiz-recap-row.is-miss{
  background:color-mix(in srgb, var(--s-bad-pale) 22%, var(--s-surface));
  border:1.5px solid var(--s-bad);
}
.quiz-recap-head{display:flex; align-items:center; gap:9px}
.quiz-recap-badge{
  flex:none; width:22px; height:22px; border-radius:var(--r-full);
  display:grid; place-items:center; color:var(--s-on-dark);
  animation:craft-pop .4s var(--ease-spring);
}
.quiz-recap-badge svg.lucide{width:13px; height:13px}
.quiz-recap-row.is-ok .quiz-recap-badge{background:var(--s-ok)}
.quiz-recap-row.is-miss .quiz-recap-badge{background:var(--s-bad)}
.quiz-recap-row.is-ok .quiz-recap-head strong{color:var(--s-ok-tx)}
.quiz-recap-row.is-miss .quiz-recap-head strong{color:var(--s-bad-tx)}

.learned{display:flex; flex-direction:column; gap:8px}
.learned-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.learned-list li{display:flex; gap:11px; align-items:flex-start; font-size:var(--fs-ui); line-height:1.75; color:var(--s-body)}
.learned-list svg.lucide{
  color:var(--s-ok); margin-top:4px; flex:none;
  width:12px; height:12px;
}

.scene-rail-wrap{
  display:flex; align-items:stretch; flex:none;
  position:relative; top:auto; z-index:2;
  background:var(--s-surface); border-bottom:1px solid var(--s-line);
}
.scene-rail{
  flex:1; min-width:0;
  display:flex; flex-wrap:nowrap; gap:4px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity;
  padding:6px 10px;
  background:var(--s-surface);
}
.scene-rail::-webkit-scrollbar{display:none}
.scene-rail-btn{
  width:32px; flex:none; border:0; background:var(--s-surface);
  color:var(--s-brand-h); cursor:pointer;
  display:none; place-items:center;
  border-right:1px solid var(--s-line);
}
.scene-rail-btn.scene-rail-next{border-right:0; border-left:1px solid var(--s-line)}
.scene-rail-btn svg.lucide{width:16px; height:16px}
.scene-rail-btn:hover:not(:disabled){background:var(--s-brand-pale)}
.scene-rail-btn:disabled{opacity:.28; cursor:default}
.scene-rail-wrap.is-overflow .scene-rail-btn{display:grid}
.scene-pip{
  flex:none; display:flex; flex-direction:row; align-items:center; gap:6px;
  padding:6px 12px; background:transparent; border:0;
  border-radius:var(--r-md); cursor:pointer; font-family:var(--font); color:var(--s-mute);
  position:relative; overflow:hidden; scroll-snap-align:start;
  white-space:nowrap; height:36px;
}
.scene-pip svg.lucide{width:14px; height:14px; color:var(--s-acc); opacity:.8}
.scene-pip.current svg.lucide{opacity:1; color:var(--s-acc-tx)}
.scene-pip.done svg.lucide{color:var(--s-ok)}
.scene-pip span{font-size:var(--fs-caption); font-weight:500; font-family:var(--font); font-variant-numeric:tabular-nums}
.scene-pip em{font-size:var(--fs-caption); font-style:normal; font-weight:500}
.scene-pip.done{color:var(--s-ok)}
.scene-pip.current{
  color:var(--s-brand-h); background:var(--s-brand-pale); font-weight:600;
}
.scene-pip.current::after{
  content:""; position:absolute; top:0; left:12px;
  width:22px; height:3px; border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, var(--s-acc-h), var(--s-acc));
}
.scene-pip.is-locked{opacity:.72; cursor:help}
.scene-pip:disabled{cursor:help}

@media(max-width:639px){
  .feat-grid, .poll-grid{grid-template-columns:1fr}
  .hub-stats{grid-template-columns:1fr; gap:var(--s3)}
  .hub-stat + .hub-stat{border-left:0; border-top:1px solid var(--s-line); padding-top:var(--s3)}
}

/* ==========================================================================
   সাব-মডিউল ১ · presentation craft
   Motion & interaction only. Honours prefers-reduced-motion.
   ========================================================================== */
.craft-rise{
  animation: craft-rise .55s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.is-pop{animation: craft-pop .45s var(--ease-spring) both}
@keyframes craft-rise{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:none}
}
@keyframes craft-pop{
  from{opacity:0; transform:scale(.94)}
  to{opacity:1; transform:none}
}
@keyframes craft-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

.is-sm1 .insight-card{
  width:100%; text-align:start; cursor:pointer;
  font-family:var(--font); color:inherit;
  position:relative; padding-inline-end:36px;
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}
.is-sm1 .insight-card:hover{
  border-color:var(--s-brand); transform:translateY(-1px); box-shadow:var(--s-sh2);
}
.is-sm1 .insight-card::after{
  content:"›"; position:absolute; right:14px; top:16px;
  color:var(--s-brand); font-size:22px; line-height:1; font-weight:600;
  transition:transform var(--t-base) var(--ease);
}
.is-sm1 .insight-card.is-open::after{transform:rotate(90deg)}
.is-sm1 .insight-body{display:flex; flex-direction:column; gap:6px; min-width:0}
.is-sm1 .insight-body h4{font-size:var(--fs-small); margin:0; padding-right:8px}
.is-sm1 .insight-card p[hidden]{display:none}

.is-sm1 .char-portrait, .is-sm1 .char-support{
  transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.is-sm1 .char-portrait:hover, .is-sm1 .char-support:hover{
  transform:translateY(-4px); box-shadow:var(--s-sh3);
}
.is-sm1 .char-portrait-media img{
  transition:transform 1.2s var(--ease);
}
.is-sm1 .char-portrait:hover .char-portrait-media img{transform:scale(1.05)}

.poll-ico{
  width:36px; height:36px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:var(--s-brand-pale); color:var(--s-brand);
  transition:background var(--t-fast), transform var(--t-fast) var(--ease-spring);
}
.poll-opt.is-on .poll-ico{
  background:var(--s-brand); color:var(--s-onbrand);
  animation: craft-pop .35s var(--ease-spring);
}
.poll-fb.is-in{animation: craft-rise .4s var(--ease) both}
.poll-fb.is-ok{
  color:var(--s-ok-tx);
  background:var(--s-ok-pale);
  border-inline-start:3px solid var(--s-ok);
  padding:10px 12px; border-radius:var(--r-md);
}
.poll-fb.is-bad{
  color:var(--s-bad-tx);
  background:var(--s-bad-pale);
  border-inline-start:3px solid var(--s-bad);
  padding:10px 12px; border-radius:var(--r-md);
}
.quiz-dot.is-miss{background:var(--s-bad)}

.reflect-meter{
  display:flex; align-items:center; gap:12px;
  font-size:var(--fs-caption); font-weight:500; color:var(--s-brand-h); margin:0 0 4px;
}
.reflect-track{
  flex:1; height:6px; border-radius:var(--r-full); background:var(--s-sunken);
  overflow:hidden; display:block;
}
.reflect-track i{
  display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg, var(--s-acc-h), var(--s-acc));
  transition:width .45s var(--ease);
}
.reflect-card.is-filled .reflect-n{
  background:var(--s-ok); color:var(--s-on-dark);
}
.reflect-card{
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.reflect-card.is-open{border-color:var(--s-brand); box-shadow:var(--s-sh2)}

table.compare tbody tr{cursor:pointer; transition:background var(--t-fast)}
table.compare tbody tr:hover{background:var(--s-brand-pale)}
table.compare tbody tr.is-on{
  background:var(--s-acc-pale);
  box-shadow:inset 3px 0 0 var(--s-acc);
}

.school-result.is-pop,
.reflect-close.is-pop,
.reflect-teach.is-pop{animation: craft-rise .4s var(--ease) both}
.reflect-instruct{
  background:transparent; border:0;
  border-radius:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.reflect-instruct-h{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-mute);
}
.reflect-instruct-h svg.lucide{width:15px; height:15px; flex:none}
.reflect-instruct p{margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-body)}
.reflect-lens{
  display:flex; flex-direction:column; gap:10px;
  padding:0; background:transparent; border:0;
  border-radius:0; box-shadow:none;
}
.reflect-lens .t-label{margin:0; color:var(--s-brand-h)}
.reflect-lens .t-cap{margin:0}
.reflect-lens .school-card{min-height:96px}
.reflect-qwrap{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.reflect-hint{
  font-size:var(--fs-caption); font-weight:500; color:var(--s-mute); line-height:1.45;
}
.reflect-chev{
  width:16px; height:16px; flex:none; margin-top:4px; color:var(--s-mute);
  display:grid; place-items:center;
  transition:transform var(--t-base) var(--ease);
}
.reflect-chev svg.lucide{width:16px; height:16px}
.reflect-card.is-open .reflect-chev{transform:rotate(180deg); color:var(--s-brand)}
.reflect-eg span{
  display:flex; align-items:center; gap:6px;
  font-size:var(--fs-caption); font-weight:500; margin-bottom:4px; color:var(--s-acc-tx);
}
.reflect-eg span svg.lucide{width:13px; height:13px}
.reflect-b .t-label{margin:4px 0 0}
.reflect-close{
  padding-top:8px; border-top:1px solid var(--s-line);
}
.reflect-teach{
  display:flex; flex-direction:column; gap:12px;
  padding:18px 16px 16px; background:var(--s-elev);
  border:1px solid var(--s-line); border-radius:var(--r-xl); box-shadow:var(--s-sh1);
}
.reflect-teach-h{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:var(--fs-small); font-weight:600; color:var(--s-brand-h);
}
.reflect-teach-h svg.lucide{width:18px; height:18px; flex:none; color:var(--s-brand)}
.reflect-teach > p{margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-body)}
.reflect-teach .keystate{margin-top:4px}
.reflect-n svg.lucide{width:14px; height:14px}
.quiz-ring{
  --p:0;
  width:132px; height:132px; margin:0 auto 8px;
  border-radius:var(--r-full);
  background:conic-gradient(var(--s-ok) calc(var(--p) * 1turn), var(--s-sunken) 0);
  display:grid; place-items:center;
}
.quiz-ring::before{
  content:""; width:104px; height:104px; border-radius:var(--r-full);
  background:var(--s-canvas); grid-area:1/1;
}
.quiz-ring .quiz-score-n{
  grid-area:1/1; z-index:1; font-size:var(--fs-h2); margin:0;
}
.is-sm1 .opt.ok{animation: craft-pop .35s var(--ease-spring)}
.is-sm1 .saved.is-pop, .is-sm1 .keymsg.is-pop{animation: craft-pop .5s var(--ease-spring) both}

.poll-pop{
  position:fixed;
  top:var(--header-h); right:0; bottom:0;
  left:0; z-index:70;
  display:grid; place-items:center;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y:auto; align-items:safe center;
}
@media(min-width:1024px){
  body:not(.is-sidebar-collapsed) .poll-pop{left:var(--sidebar-w)}
}
.poll-pop-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(2,29,42,.42), rgba(0,59,83,.4));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.poll-pop-card{
  position:relative; z-index:1;
  width:min(100%, 26rem);
  max-height:calc(100dvh - var(--header-h) - 40px);
  overflow-y:auto;
  background:var(--s-elev);
  border:1px solid rgba(254,251,248,.55);
  border-radius:var(--r-2xl);
  box-shadow:0 24px 64px -16px rgba(2,29,42,.45), var(--s-sh3);
  padding:20px 18px 18px;
  display:flex; flex-direction:column; align-items:center;
  gap:10px; text-align:center;
}
.poll-pop-badge{
  width:40px; height:40px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:linear-gradient(160deg, var(--s-acc-pale), var(--s-brand-pale));
  color:var(--s-acc-tx);
  box-shadow:0 0 0 5px var(--s-acc-soft);
}
.poll-pop-badge svg.lucide{width:19px; height:19px}
.poll-pop-kicker{
  margin:0; font-size:var(--fs-caption); font-weight:500;
  color:var(--s-acc-tx);
}
.poll-pop-q{
  margin:0; font-size:var(--fs-small); line-height:1.4;
  text-wrap:balance; max-width:22em;
}
.poll-pop-mcq{width:100%; margin:4px 0 8px}
.poll-pop-card .quiz-check{width:100%; margin-top:8px}
.poll-pop-grid{
  width:100%; display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:2px;
}
.poll-pop-opt{
  min-height:84px; padding:12px 10px;
  border:1px solid var(--s-line-mid);
  background:var(--s-surface);
  border-radius:var(--r-lg);
  cursor:pointer; font-family:var(--font);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast);
}
.poll-pop-opt .poll-pop-lab{
  font-size:var(--fs-ui); font-weight:500; line-height:1.4; color:var(--s-tx);
}
.poll-pop-ico{
  width:34px; height:34px; border-radius:var(--r-full);
  flex:none;
  display:grid; place-items:center;
  background:var(--s-brand-pale); color:var(--s-brand);
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-spring);
}
.poll-pop-ico svg.lucide{width:17px; height:17px}
.poll-pop-opt:hover:not(:disabled){
  border-color:var(--s-brand); transform:translateY(-3px);
  box-shadow:var(--s-sh2);
}
.poll-pop-opt:hover:not(:disabled) .poll-pop-ico{transform:scale(1.08)}
.poll-pop-opt[data-id="yes"]:hover:not(:disabled){
  border-color:var(--s-acc); background:var(--s-acc-pale);
}
.poll-pop-opt[data-id="yes"]:hover:not(:disabled) .poll-pop-ico{
  background:var(--s-acc); color:var(--s-onacc);
}
.poll-pop-opt.is-on{
  border-color:var(--s-brand); background:var(--s-brand-pale);
  box-shadow:0 0 0 3px var(--s-brand-soft), var(--s-sh2);
  transform:translateY(-2px);
}
.poll-pop-opt.is-on .poll-pop-ico{
  background:var(--s-brand); color:var(--s-onbrand);
  animation: craft-pop .35s var(--ease-spring);
}
.poll-pop-opt[data-id="yes"].is-on{
  border-color:var(--s-acc-h); background:var(--s-acc-pale);
  box-shadow:0 0 0 3px var(--s-acc-soft), var(--s-sh2);
}
.poll-pop-opt[data-id="yes"].is-on .poll-pop-ico{
  background:var(--s-acc-h); color:var(--s-on-dark);
}
.poll-pop-card.is-stack{
  width:min(100%, 30rem);
  align-items:stretch; text-align:start;
}
.poll-pop-card.is-stack .poll-pop-badge,
.poll-pop-card.is-stack .poll-pop-kicker,
.poll-pop-card.is-stack .poll-pop-q{align-self:center; text-align:center}
.poll-pop-card.is-stack .poll-pop-grid{grid-template-columns:1fr; gap:7px}
.poll-pop-card.is-stack .poll-pop-opt{
  min-height:0; flex-direction:row; justify-content:flex-start;
  gap:10px; padding:10px 12px; text-align:start;
}
.poll-pop-card.is-stack .poll-pop-ico{width:30px; height:30px}
.poll-pop-card.is-stack .poll-pop-ico svg.lucide{width:15px; height:15px}
.poll-pop-card.is-stack .poll-pop-lab{font-size:var(--fs-caption); font-weight:500; line-height:1.45}
.poll-pop-opt.is-key{
  border:1.5px solid var(--s-ok);
  background:color-mix(in srgb, var(--s-ok-pale) 22%, var(--s-surface));
  box-shadow:var(--s-sh1);
}
.poll-pop-opt.is-key .poll-pop-ico{background:var(--s-ok); color:var(--s-on-dark); animation:craft-pop .35s var(--ease-spring)}
.poll-pop-opt.is-miss{
  border:1.5px solid var(--s-bad);
  background:color-mix(in srgb, var(--s-bad-pale) 22%, var(--s-surface));
  box-shadow:var(--s-sh1);
}
.poll-pop-opt.is-miss .poll-pop-ico{background:var(--s-bad); color:var(--s-on-dark); animation:craft-pop .35s var(--ease-spring)}
.poll-pop-fb{
  width:100%; margin:2px 0 0;
  background:color-mix(in srgb, var(--s-ok-pale) 45%, var(--s-surface)); border:1px solid var(--s-ok-soft);
  padding:12px 14px; border-radius:var(--r-lg);
  font-size:var(--fs-small); line-height:1.75; color:var(--s-ok-tx); text-align:start;
}
.poll-pop-go{width:100%; margin-top:2px}
.poll-pop-back{
  border:0; background:none; cursor:pointer; font-family:var(--font);
  font-size:var(--fs-ui); font-weight:500; color:var(--s-mute);
  padding:6px 10px; border-radius:var(--r-md);
}
.poll-pop-back:hover{color:var(--s-brand-h); background:var(--s-brand-soft)}
body.is-poll-open .step{overflow:hidden}
@media(max-width:479px){
  .poll-pop-grid{grid-template-columns:1fr}
  .poll-pop-opt{min-height:0; flex-direction:row; justify-content:flex-start; padding:11px 13px}
}

/* ---- task stepper --------------------------------------------------- */
.asg-stepper{
  display:flex; align-items:flex-start; gap:0; margin:0 0 22px;
}
.asg-step{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  flex:0 0 auto; width:84px; border:0; background:none; padding:0;
  font-family:var(--font); cursor:default;
}
.asg-step-node{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--r-full); flex:0 0 auto;
  background:var(--s-surface); border:2px solid var(--s-line);
  color:var(--s-mute); font-size:var(--fs-caption); font-weight:600;
  box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease);
}
.asg-step-node i{ width:16px; height:16px }
.asg-step-label{
  font-size:var(--fs-caption); font-weight:500; color:var(--s-mute); text-align:center; line-height:1.3;
  transition:color var(--t-fast) var(--ease);
}
.asg-step.is-done .asg-step-node{ background:var(--s-ok); border-color:var(--s-ok); color:var(--s-on-dark) }
.asg-step.is-done .asg-step-label{ color:var(--s-body) }
.asg-step.is-current .asg-step-node{
  background:var(--s-brand); border-color:var(--s-brand); color:var(--s-on-dark);
  transform:scale(1.14); box-shadow:0 0 0 5px var(--s-brand-tint), var(--s-sh2);
}
.asg-step.is-current .asg-step-label{ color:var(--s-brand-a); font-weight:600 }
.asg-step.is-locked .asg-step-node{ background:var(--s-sunken); color:var(--s-line); box-shadow:none }
.asg-step.is-locked .asg-step-label{ opacity:.6 }
.asg-step.is-current.is-ready .asg-step-node{
  animation:asg-ready-pop .5s var(--ease-spring) both;
  box-shadow:0 0 0 5px var(--s-ok-pale), var(--s-sh2);
  background:var(--s-ok); border-color:var(--s-ok);
}
@keyframes asg-ready-pop{
  0%{ transform:scale(1.14) }
  40%{ transform:scale(1.32) }
  100%{ transform:scale(1.14) }
}
button.asg-step{ cursor:pointer }
button.asg-step:hover .asg-step-node{ border-color:var(--s-brand); transform:translateY(-1px) }
.asg-step-line{
  flex:1 1 auto; height:2px; min-width:16px; margin:16px -6px 0;
  background:var(--s-line); border-radius:var(--r-full); overflow:hidden;
  position:relative; top:0;
}
.asg-step-line i{ display:block; height:100%; width:0; background:var(--s-ok); transition:width .4s var(--ease) }
.asg-instruct{margin:0 0 14px; font-size:var(--fs-small); line-height:1.75; color:var(--s-body)}

/* ---- collectible progress dots ------------------------------------------ */
.asg-collect-wrap{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:8px 14px; margin:0 0 14px; padding:9px 14px;
  background:var(--s-sunken); border-radius:var(--r-full);
}
.asg-collect{ display:flex; flex-wrap:wrap; gap:6px }
.asg-dot{
  width:9px; height:9px; border-radius:var(--r-full); background:var(--s-line);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring);
}
.asg-dot.is-on{
  background:linear-gradient(135deg, var(--s-brand), var(--s-acc));
  transform:scale(1.2);
}
.asg-collect.is-full .asg-dot{
  background:var(--s-ok); transform:scale(1.15);
}
.asg-collect-l{
  display:flex; align-items:center; gap:6px; margin:0;
  font-size:var(--fs-caption); font-weight:500; color:var(--s-mute);
}
.asg-collect-l i{ width:14px; height:14px; color:var(--s-brand-h) }
.asg-collect.is-full ~ .asg-collect-l{ color:var(--s-ok-tx) }
.asg-collect.is-full ~ .asg-collect-l i{ color:var(--s-ok) }

.asg-board{
  display:flex; flex-direction:column; gap:14px;
  padding:16px; border-radius:var(--r-xl);
  background:radial-gradient(120% 140% at 0% 0%, var(--s-brand-pale) 0%, transparent 55%),
             radial-gradient(120% 140% at 100% 100%, var(--s-acc-pale) 0%, transparent 55%);
  transition:box-shadow var(--t-base) var(--ease);
}
.asg-board.is-complete{ box-shadow:0 0 0 3px var(--s-ok-pale) inset }
.asg-bins{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:720px){.asg-bins:not(.is-one){grid-template-columns:1fr 1fr}}

/* ---- bin cards --------------------------------------------------------- */
.asg-bin{
  position:relative; overflow:hidden;
  background:var(--s-surface); border:1.5px solid var(--s-line);
  border-radius:var(--r-xl); cursor:pointer; box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.asg-bin.is-hot, .asg-bin:focus-within{
  border-color:var(--s-brand); transform:translateY(-3px); box-shadow:var(--s-sh3);
}
.asg-bin-head{
  display:flex; align-items:center; gap:10px; padding:13px 14px;
}
.asg-bin.tone-sky .asg-bin-head{ background:linear-gradient(135deg, var(--s-brand-pale), var(--s-brand-soft)) }
.asg-bin.tone-mg .asg-bin-head{ background:linear-gradient(135deg, var(--s-acc-pale), var(--s-acc-soft)) }
.asg-bin.tone-amb .asg-bin-head{ background:linear-gradient(135deg, var(--s-warn-pale), color-mix(in srgb, var(--s-warn-pale) 55%, var(--s-surface))) }
.asg-bin-ico{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:32px; height:32px; border-radius:var(--r-md);
  background:var(--s-surface); box-shadow:var(--s-sh1);
}
.asg-bin-ico i{ width:16px; height:16px }
.asg-bin.tone-sky .asg-bin-ico i{ color:var(--s-brand-h) }
.asg-bin.tone-mg .asg-bin-ico i{ color:var(--s-acc-tx) }
.asg-bin.tone-amb .asg-bin-ico i{ color:var(--s-warn-tx) }
.asg-bin-q{
  flex:1 1 auto; margin:0; font-size:var(--fs-ui); line-height:1.5;
}
.asg-bin-count{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px; border-radius:var(--r-full);
  background:var(--s-surface); color:var(--s-body); font-size:var(--fs-caption); font-weight:600; box-shadow:var(--s-sh1);
}
.asg-bin-chips, .asg-tray{display:flex; flex-wrap:wrap; gap:8px; min-height:36px}
.asg-bin-chips{ padding:12px 14px 14px; min-height:96px; align-content:flex-start }
.asg-bin-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  margin:0; width:100%; padding:16px 8px;
  border:1.5px dashed var(--s-line-mid); border-radius:var(--r-lg);
  font-size:var(--fs-caption); font-weight:500; color:var(--s-mute); text-align:center;
}
.asg-bin-empty i{ width:18px; height:18px; color:var(--s-line) }

/* ---- chips --------------------------------------------------------------- */
.asg-chip{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:9px 14px; max-width:100%;
  background:linear-gradient(180deg, var(--s-surface), var(--s-sunken));
  border:1px solid var(--s-line);
  border-radius:var(--r-full); cursor:grab; touch-action:none;
  font-family:var(--font); font-size:var(--fs-ui); font-weight:600; line-height:1.4;
  color:var(--s-body); text-align:start;
  box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.asg-chip i{ width:14px; height:14px; flex:0 0 auto; color:var(--s-line) }
.asg-chip:hover{ border-color:var(--s-brand); transform:translateY(-2px) scale(1.02); box-shadow:var(--s-sh2) }
.asg-chip:active{ transform:scale(.97) }
.asg-chip.is-held{
  border-color:var(--s-brand); background:var(--s-brand-soft);
  color:var(--s-brand-a); cursor:grabbing;
  outline:2px solid var(--s-ring); outline-offset:2px;
  animation:craft-pulse 1.1s ease-in-out infinite;
}
.asg-chip.is-held i{ color:var(--s-brand-h) }
.asg-bin-chips .asg-chip{
  background:var(--s-surface); box-shadow:var(--s-sh1);
  animation:craft-pop .35s var(--ease-spring) both;
}
.asg-bin.tone-sky .asg-bin-chips .asg-chip{ background:linear-gradient(180deg, var(--s-surface), var(--s-brand-pale)); border-color:var(--s-brand-tint) }
.asg-bin.tone-mg .asg-bin-chips .asg-chip{ background:linear-gradient(180deg, var(--s-surface), var(--s-acc-pale)); border-color:var(--s-acc-soft) }
.asg-bin.tone-amb .asg-bin-chips .asg-chip{ background:linear-gradient(180deg, var(--s-surface), var(--s-warn-pale)); border-color:var(--s-warn) }
.asg-bin.tone-sky .asg-bin-chips .asg-chip i{ color:var(--s-brand-h) }
.asg-bin.tone-mg .asg-bin-chips .asg-chip i{ color:var(--s-acc-tx) }
.asg-bin.tone-amb .asg-bin-chips .asg-chip i{ color:var(--s-warn-tx) }
.asg-bank{
  padding:14px; background:var(--s-sunken); border:1.5px dashed var(--s-line-mid);
  border-radius:var(--r-xl);
}
.asg-bank-h{margin:0 0 10px; font-size:var(--fs-caption); font-weight:600; color:var(--s-mute)}
.asg-empty{margin:0; font-size:var(--fs-ui); color:var(--s-mute)}
.asg-ghost{
  position:fixed; z-index:80; pointer-events:none;
  transform:translate(-50%,-120%);
  min-height:44px; padding:8px 12px;
  background:var(--s-surface); border:1px solid var(--s-brand);
  border-radius:var(--r-full); box-shadow:var(--s-sh2);
  font-family:var(--font); font-size:var(--fs-ui); font-weight:500; color:var(--s-brand-a);
  white-space:nowrap; max-width:80vw;
}
.vs-checks{display:flex; flex-direction:column; gap:16px; margin-top:4px}
.vs-check{
  background:var(--s-surface); border:1px solid var(--s-line);
  border-radius:var(--r-lg); padding:16px 16px 14px;
  box-shadow:var(--s-sh1);
}
.vs-check .q{margin:6px 0 12px}
.vs-check .quiz-check{margin-top:10px}

@media(prefers-reduced-motion:reduce){
  .craft-rise, .is-pop, .poll-opt.is-on .poll-ico, .poll-fb.is-in,
  .poll-pop-card, .poll-pop-opt.is-on .poll-pop-ico,
  .term-blob-hit, .term-blob-pop,
  .is-sm1 .opt.ok, .school-result.is-pop,
  .is-sm1 .saved.is-pop, .is-sm1 .keymsg.is-pop{
    animation:none;
  }
  .is-sm1 .char-portrait:hover, .is-sm1 .char-support:hover,
  .is-sm1 .char-portrait-media img, .stat-tile:hover,
  .term-blob-hit:hover, .term-blob-hit:focus-visible,
  .term-blob.is-on .term-blob-hit{
    transform:none;
  }
}

/* ==========================================================================
   Sub-modules 02–05 · components
   Every surface below resolves through --s-* / ground tokens, so each of
   these works unchanged on paper, khata and slate. No fixed-height text
   container anywhere — reph and below-base ra need room to descend.
   ========================================================================== */

/* --- shared: static chat thread inside a page step ---------------------- */
.chat-thread.is-static{padding-top:4px}
.chat-thread.is-static .chat-row{animation:none}

/* --- video brief card --------------------------------------------------- */
.vid-card{
  margin:var(--s4) 0; padding:0; overflow:hidden;
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-media); box-shadow:var(--s-sh1);
}
.vid-shot{position:relative; aspect-ratio:16/9; background:var(--s-sunken); overflow:hidden}
.vid-shot img{width:100%; height:100%; object-fit:cover; display:block}
.vid-badge{
  position:absolute; inset-inline-start:12px; inset-block-end:12px;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--r-full);
  background:rgba(2,29,42,.82); color:var(--s-on-dark);
  font-size:var(--fs-caption); font-weight:500; line-height:1.4;
  backdrop-filter:blur(6px);
}
.vid-badge svg{width:15px; height:15px}
.vid-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px}
.vid-kicker{
  display:flex; align-items:center; gap:7px; margin:0;
  font-size:var(--fs-caption); font-weight:500; color:var(--s-brand-h);
}
.vid-kicker svg{width:15px; height:15px}
.vid-title{margin:0; font-size:var(--fs-h3); font-weight:600; line-height:1.5; color:var(--s-tx)}
.vid-note{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.vid-pending{
  display:flex; align-items:flex-start; gap:8px; margin:4px 0 0;
  padding:9px 12px; border-radius:var(--r-md);
  background:var(--s-warn-pale); color:var(--s-warn-tx);
  font-size:var(--fs-caption); line-height:1.75;
}
.vid-pending svg{width:15px; height:15px; flex:none; margin-top:3px}

/* --- page.values · statement poll ---------------------------------------
   The script itself calls this "একটি পোল" (a poll) — Nadia opens it right
   after the staff-room debate. Kept deliberately more tactile/colorful than
   a plain form: every class below is unique to this one screen (grep
   confirms `.val-*`/`.values-*` render nowhere else), so none of this
   reaches any other sub-module. */
.values-meter{display:flex; align-items:center; gap:10px; margin-top:var(--s3)}
.values-meter-ico{
  flex:none; width:34px; height:34px; border-radius:var(--r-full);
  background:var(--s-brand-pale); color:var(--s-brand-h);
  display:grid; place-items:center;
}
.values-meter-ico svg{width:16px; height:16px}
.values-meter .reflect-meter{flex:1; margin:0}
.values-meter .reflect-track{height:9px}
.values-meter .reflect-track i{ background:var(--s-brand) }

.val-list{display:flex; flex-direction:column; gap:var(--s4); margin-top:var(--s4)}
.val-card{
  position:relative; overflow:hidden;
  background:var(--s-surface); border:1px solid var(--s-line);
  border-radius:var(--r-xl); padding:18px 18px 18px 21px; box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
    transform var(--t-fast) var(--ease);
}
.val-card::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px;
  background:var(--s-line-mid); transition:background var(--t-base) var(--ease);
}
.val-card:not(.is-done):hover{
  transform:translateY(-2px); box-shadow:var(--s-sh2); border-color:var(--s-brand-tint);
}
.val-card.is-set{box-shadow:var(--s-sh2)}
.val-card.is-pulse{animation:craft-pop .4s var(--ease-spring)}
.val-card.is-set::before{background:var(--s-brand)}
.val-card.is-done.is-ok::before{background:var(--s-ok)}
.val-card.is-done.is-miss::before{background:var(--s-bad)}
.val-head{display:flex; gap:var(--s3); align-items:flex-start}
.val-n{
  width:30px; height:30px; flex:none; border-radius:var(--r-full);
  background:var(--s-acc-pale); color:var(--s-acc-tx);
  display:grid; place-items:center; font-size:var(--fs-caption); font-weight:600; margin-top:2px;
  transition:background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.val-n svg{width:15px; height:15px}
.val-card.is-pulse .val-n{animation:craft-pop .4s var(--ease-spring)}
.val-card.is-done.is-ok .val-n{background:var(--s-ok); color:var(--s-on-dark)}
.val-card.is-done.is-miss .val-n{background:var(--s-bad); color:var(--s-on-dark)}
.val-q{margin:0; font-size:var(--fs-small); line-height:1.6}
.val-opts{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.val-opt{
  flex:1 1 9em; min-height:50px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:10px 14px; border:1.5px solid var(--s-line-mid);
  border-radius:var(--r-lg); background:var(--s-elev);
  font-family:var(--font); font-size:var(--fs-ui); font-weight:500; line-height:1.5;
  color:var(--s-body); cursor:pointer;
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.val-opt:hover:not(:disabled){background:var(--s-sunken); border-color:var(--s-brand); transform:translateY(-1px)}
.val-opt:active:not(:disabled){transform:scale(.96)}
.val-opt:focus-visible{outline:3px solid var(--s-ring); outline-offset:2px}
.val-ico{
  display:grid; place-items:center; flex:none; width:26px; height:26px;
  border-radius:var(--r-full); background:var(--s-sunken); color:var(--s-mute);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.val-ico svg{width:15px; height:15px}
.val-opt.is-on{background:var(--s-brand-tint); border-color:var(--s-brand); color:var(--s-brand-a); box-shadow:var(--s-sh1)}
.val-opt.is-on .val-ico{background:var(--s-brand); color:var(--s-onbrand)}
.val-card.is-pulse .val-opt.is-on .val-ico{animation:craft-pop .35s var(--ease-spring)}
.val-opt.is-key{
  background:color-mix(in srgb, var(--s-ok-pale) 55%, var(--s-surface));
  border-color:var(--s-ok); color:var(--s-ok-tx); box-shadow:none;
}
.val-opt.is-key .val-ico{background:var(--s-ok); color:var(--s-on-dark)}
.val-opt.is-off{
  background:color-mix(in srgb, var(--s-bad-pale) 55%, var(--s-surface));
  border-color:var(--s-bad); color:var(--s-bad-tx); box-shadow:none;
}
.val-opt.is-off .val-ico{background:var(--s-bad); color:var(--s-on-dark)}
.val-opt.is-neutral{
  background:var(--s-sunken); border-color:var(--s-line-mid); color:var(--s-mute); box-shadow:none;
}
.val-opt.is-neutral .val-ico{background:var(--s-line-mid); color:var(--s-mute)}
.val-opt.is-dim{opacity:.45}
.val-opt:disabled{cursor:default}
.val-why{
  margin-top:14px; padding:13px 15px; border-radius:var(--r-md);
  background:var(--s-brand-pale);
  border-inline-start:3px solid var(--s-brand);
}
.val-why.is-ok{
  background:var(--s-ok-pale);
  border-inline-start-color:var(--s-ok);
}
.val-why.is-miss{
  background:var(--s-bad-pale);
  border-inline-start-color:var(--s-bad);
}
.val-why-h{
  display:flex; align-items:center; gap:7px; margin:0 0 5px;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-brand-h);
}
.val-why.is-ok .val-why-h{color:var(--s-ok-tx)}
.val-why.is-miss .val-why-h{color:var(--s-bad-tx)}
.val-why-h svg{width:15px; height:15px}
.val-why p{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.val-why.is-in{animation:craft-rise .5s var(--ease) both; animation-delay:calc(var(--i,0)*70ms)}
.values-go{margin-top:var(--s5); width:100%}
.values-go.is-ready{animation:values-ready-pulse 2.6s ease-in-out infinite}
@keyframes values-ready-pulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px -8px rgba(0,59,83,.55), 0 0 0 0 var(--s-brand-soft)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 6px 16px -8px rgba(0,59,83,.55), 0 0 0 9px transparent}
}

/* --- page.forum · peer thread ------------------------------------------- */
.forum-board{
  margin-top:var(--s3); padding:16px;
  background:var(--s-sunken); border:1px solid var(--s-line);
  border-radius:var(--r-lg);
}
.forum-board-h{
  display:flex; align-items:center; gap:8px; margin:0 0 4px;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-brand-h);
}
.forum-board-h svg{width:16px; height:16px}
.forum-board-note{margin:0 0 14px; font-size:var(--fs-small); line-height:1.8; color:var(--s-mute)}
.forum-post{
  background:var(--s-elev); border:1px solid var(--s-line);
  border-radius:var(--r-md); padding:14px 16px; margin-top:10px;
  box-shadow:var(--s-sh1);
}
.forum-post-h{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.forum-av{
  width:34px; height:34px; flex:none; border-radius:var(--r-full);
  background:var(--s-brand-tint); color:var(--s-brand-a);
  display:grid; place-items:center;
}
.forum-av svg{width:18px; height:18px}
.forum-who{display:flex; flex-direction:column; gap:1px; min-width:0}
.forum-who strong{font-size:var(--fs-ui); font-weight:500; line-height:1.5; color:var(--s-tx)}
.forum-meta{font-size:var(--fs-caption); line-height:1.5; color:var(--s-mute)}
.forum-body{
  margin:0 0 8px; font-size:var(--fs-small); line-height:1.8; color:var(--s-body);
  padding-inline-start:44px;
}
.forum-body:last-child{margin-bottom:0}
.forum-talk{margin-top:var(--s4)}
.forum-task{margin-top:var(--s4)}
.forum-task-h{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-acc-tx);
}
.forum-task-h svg{width:16px; height:16px}
.forum-task-list{margin:8px 0 12px; padding-inline-start:20px}
.forum-task-list li{font-size:var(--fs-small); line-height:1.8; color:var(--s-body); margin-bottom:4px}

/* --- page.scale · awareness ladder -------------------------------------- */
.scale-ladder{
  list-style:none; margin:var(--s4) 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px;
  counter-reset:none;
}
.scale-rung{position:relative}
.scale-rung-in{
  width:100%; text-align:start; display:flex; gap:var(--s3); align-items:flex-start;
  padding:14px 16px; border-radius:var(--r-lg);
  border:1.5px solid var(--s-line);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--s-brand-pale) calc(24% + var(--rung, 0) * 19%), var(--s-elev)),
      var(--s-elev) 72%);
  font-family:var(--font); color:inherit;
  box-shadow:var(--s-sh1);
}
button.scale-rung-in{cursor:pointer; transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast)}
button.scale-rung-in:hover{border-color:var(--s-brand); transform:translateX(2px)}
button.scale-rung-in:focus-visible{outline:3px solid var(--s-ring); outline-offset:2px}
.scale-rung.is-on .scale-rung-in{border-color:var(--s-brand); box-shadow:var(--s-sh2)}
.scale-step{flex:none; display:grid; place-items:center; padding-top:2px}
.scale-step-n{
  width:30px; height:30px; border-radius:var(--r-full);
  background:var(--s-brand); color:var(--s-onbrand);
  display:grid; place-items:center; font-size:var(--fs-caption); font-weight:600;
}
.scale-body{min-width:0; flex:1}
.scale-term{
  margin:0 0 4px; font-size:var(--fs-small); font-weight:600; line-height:1.6; color:var(--s-tx);
  display:flex; flex-wrap:wrap; gap:6px; align-items:baseline;
}
.scale-en{font-family:var(--latin); font-size:var(--fs-caption); font-weight:500; color:var(--s-mute)}
.scale-def{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.scale-mark{flex:none; display:grid; place-items:center; align-self:center; color:var(--s-brand)}
.scale-mark svg{width:20px; height:20px}
.scale-rung:not(.is-on) .scale-mark{color:var(--s-mute)}
.scale-after{
  display:flex; gap:10px; align-items:flex-start; margin-top:var(--s4);
  padding:12px 14px; border-radius:var(--r-md);
  background:var(--s-brand-pale); border-inline-start:3px solid var(--s-brand);
}
.scale-after svg{width:18px; height:18px; flex:none; margin-top:3px; color:var(--s-brand-h)}
.scale-after p{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}

.scale-cases{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s5)}
.scale-case{
  background:var(--s-surface); border:1px solid var(--s-line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--s-sh1);
}
.scale-case-h{
  width:100%; display:flex; gap:var(--s3); align-items:center; text-align:start;
  padding:14px 16px; background:none; border:0; cursor:pointer;
  font-family:var(--font); color:inherit;
}
.scale-case-h:hover{background:var(--s-sunken)}
.scale-case-h:focus-visible{outline:3px solid var(--s-ring); outline-offset:-3px}
.scale-case-h strong{flex:1; font-size:var(--fs-small); font-weight:600; line-height:1.6}
.scale-case-n{
  width:28px; height:28px; flex:none; border-radius:var(--r-full);
  background:var(--s-acc-pale); color:var(--s-acc-tx);
  display:grid; place-items:center; font-size:var(--fs-caption); font-weight:600;
}
.scale-case-chev{flex:none; display:grid; place-items:center; color:var(--s-mute)}
.scale-case-b{padding:0 16px 16px; display:flex; flex-direction:column; gap:var(--s3)}
.scale-case-b[hidden]{display:none}
.scale-case-story{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.scale-case-quote{
  margin:0; padding:10px 14px; border-inline-start:3px solid var(--s-acc);
  background:var(--s-acc-pale); border-radius:var(--r-md);
}
.scale-case-quote p{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-acc-tx);}
.scale-quote-row .scale-case-quote p{color:var(--mg-800)}
.scale-resp{display:flex; flex-direction:column; gap:8px}
.scale-resp-row{
  padding:12px 14px; border-radius:var(--r-md);
  background:color-mix(in srgb, var(--s-brand-pale) calc(20% + var(--rung, 0) * 20%), var(--s-elev));
  border:1px solid var(--s-line);
}
.scale-resp-t{
  display:flex; align-items:center; gap:7px; margin:0 0 4px;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-brand-a);
}
.scale-resp-n{
  width:20px; height:20px; flex:none; border-radius:var(--r-full);
  background:var(--s-brand); color:var(--s-onbrand);
  display:grid; place-items:center; font-size:var(--fs-caption); font-weight:600;
}
.scale-resp-b{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}

/* --- page.scale · SM5 journey + case studio ----------------------------- */
.scale-page .t-lede{max-width:42em}
.scale-page .reflect-instruct{margin:var(--s3) 0 var(--s4)}
.scale-journey,
.scale-studio{
  display:flex; flex-direction:column; gap:var(--s3);
  margin-top:var(--s4);
}
.scale-studio{margin-top:var(--s6); padding-top:var(--s5); border-top:0}
.scale-sec-h{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-brand-h);
}
.scale-sec-h svg.lucide{width:16px; height:16px; flex:none; color:var(--s-brand)}

.scale-page [data-rung="0"]{
  --lv:#FDE68A; --lv-ink:#6A4A07; --lv-on:#4A3503;
  --lv-pale:#FFFBEB; --lv-soft:#FFFBEB; --lv-line:#FBEFB8;
}
.scale-page [data-rung="1"]{
  --lv:var(--fern-200); --lv-ink:var(--fern-800); --lv-on:var(--fern-900);
  --lv-pale:var(--fern-50); --lv-soft:var(--fern-50); --lv-line:var(--fern-200);
}
.scale-page [data-rung="2"]{
  --lv:var(--fern-400); --lv-ink:var(--fern-800); --lv-on:#041A0B;
  --lv-pale:var(--fern-50); --lv-soft:var(--fern-50); --lv-line:var(--fern-200);
}
.scale-page [data-rung="3"]{
  --lv:var(--fern-500); --lv-ink:var(--fern-800); --lv-on:#041A0B;
  --lv-pale:var(--fern-50); --lv-soft:var(--fern-50); --lv-line:var(--fern-200);
}

/* staircase — four steps rising left → right; steps up to the chosen one are lit */
.scale-stairs{
  --sb:92px; --ss:44px; --gap:10px;
  container-type:inline-size;
  position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap);
  align-items:end; padding:56px 12px 0; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(180deg, var(--fern-50), var(--s-surface));
  box-shadow:var(--s-sh1);
}
.scale-stairs::after{ /* ground line */
  content:''; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--fern-200);
}
.scale-stair{
  --step:calc(25cqw + 2.5px);
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch;
  min-width:0; padding:0; border:0; background:none; cursor:pointer; font-family:var(--font); color:inherit; text-align:start;
  height:calc(var(--sb) + var(--rung) * var(--ss) + 6px); z-index:1;
}
.scale-stair:focus-visible{outline:3px solid var(--s-ring); outline-offset:3px; border-radius:var(--r-md)}
.scale-stair-block{
  position:relative; flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:10px 11px 14px; border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:#EDF2F5;
  border:0;
  color:#6E7275; transition:background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
  margin-bottom:6px;
}
.scale-stair:hover .scale-stair-block{transform:translateY(-3px)}
.scale-stair:not(.is-seen):hover .scale-stair-block{background:#E3EBF0}
.scale-stair.is-seen .scale-stair-block{
  background:var(--lv);
  color:var(--lv-on);
}
.scale-stair.is-on .scale-stair-block{box-shadow:0 12px 24px -14px color-mix(in srgb, var(--fern-800) 60%, transparent)}
.scale-stair .scale-tile-top{width:100%; display:flex; align-items:center; justify-content:space-between; gap:6px}
.scale-stair .scale-tile-n{width:22px; height:22px; background:#fff; color:#6E7275}
.scale-stair.is-seen .scale-tile-n{background:rgba(255,255,255,.75); color:var(--lv-on)}
.scale-stair .scale-tile-ico{width:34px; height:34px; background:#fff; color:#8C9093}
.scale-stair.is-seen .scale-tile-ico{background:rgba(255,255,255,.75); color:var(--lv-on)}
.scale-stair .scale-tile-term{color:inherit; font-weight:700}
.scale-stair .scale-tile-en{color:inherit; opacity:1; font-weight:600}
.scale-seen{width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:var(--fern-700); color:#fff}
.scale-seen svg{width:11px; height:11px; stroke-width:3.4}

/* the little climber stands on the chosen step and hops to the new one */
.scale-climber{
  position:absolute; z-index:3; inset-inline-start:50%; bottom:calc(100% - 4px); margin-inline-start:-21px; pointer-events:none;
}
.scale-climber-in{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--s-elev); color:var(--fern-700); border:0;
  box-shadow:0 6px 14px -6px color-mix(in srgb, var(--fern-800) 55%, transparent), 0 0 0 1px var(--fern-200);
  animation:scale-bob 2.6s ease-in-out .6s infinite;
}
.scale-climber-in svg{width:20px; height:20px}
.scale-climber.is-move{
  animation:scale-glide .62s cubic-bezier(.3,.7,.3,1) both;
}
.scale-climber.is-move .scale-climber-in{animation:scale-hop .62s cubic-bezier(.3,.7,.3,1) both, scale-bob 2.6s ease-in-out .7s infinite}
@keyframes scale-glide{
  from{transform:translate(calc(var(--dx) * var(--step)), calc(var(--dy) * var(--ss)))}
  to{transform:translate(0,0)}
}
@keyframes scale-hop{ 0%,100%{translate:0 0} 45%{translate:0 -26px} }
@keyframes scale-bob{ 0%,100%{translate:0 0} 50%{translate:0 -4px} }


.scale-tile-n{width:22px; height:22px; border-radius:var(--r-full); display:grid; place-items:center; font-size:var(--fs-caption); font-weight:600}
.scale-tile-ico{border-radius:var(--r-full); display:grid; place-items:center}
.scale-tile-ico svg.lucide{width:18px; height:18px}
.scale-tile-term{font-size:var(--fs-small); font-weight:600; line-height:1.45}
.scale-tile-en{font-family:var(--latin); font-size:var(--fs-caption); font-weight:500; line-height:1.35}

/* four-segment depth gauge */
.scale-depth{display:flex; gap:4px; margin:0 0 10px}
.scale-depth i{flex:1; max-width:46px; height:5px; border-radius:var(--r-full); background:var(--fern-100)}
.scale-depth i.is-on{background:var(--fern-600)}
.scale-defpane .scale-depth i{background:color-mix(in srgb, var(--lv) 35%, #fff)}
.scale-defpane .scale-depth i.is-on{background:color-mix(in srgb, var(--lv-ink) 70%, var(--lv))}

.scale-defpane{
  position:relative; padding:16px 18px 18px; border-radius:var(--r-lg); overflow:hidden;
  background:var(--s-elev);
  border:0; box-shadow:var(--s-sh1); min-height:7.2rem;
}
.scale-defpane::before{display:none}
.scale-defpane-h{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:0 0 10px}
.scale-defpane-ico{
  width:44px; height:44px; flex:none; border-radius:var(--r-full); display:grid; place-items:center;
  background:var(--lv); color:var(--lv-on); box-shadow:none;
}
.scale-defpane-ico svg.lucide{width:22px; height:22px}
.scale-defpane-t{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.scale-defpane-t strong{font-size:var(--fs-h3); font-weight:600; color:var(--lv-ink); line-height:1.4}
.scale-defpane .scale-en{font-family:var(--latin); font-size:var(--fs-caption); color:var(--s-mute)}
.scale-defpane-hook{
  margin-inline-start:auto; padding:5px 12px; border-radius:var(--r-full);
  background:color-mix(in srgb, var(--lv) 55%, var(--s-elev)); color:var(--lv-ink); font-size:var(--fs-caption); font-weight:600; line-height:1.3; white-space:nowrap;
}
.scale-defpane-d{margin:0; font-size:var(--fs-body); line-height:1.85; color:var(--s-body)}

/* the two situations — big selectable cards */
.scale-seg{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; padding:0; background:none}
.scale-seg-btn{
  position:relative; display:flex; align-items:center; gap:12px; text-align:start;
  padding:14px 14px 20px; border:1px solid var(--s-line); border-radius:var(--r-lg); cursor:pointer;
  background:var(--s-elev); box-shadow:none; font-family:var(--font); color:var(--s-soft);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.scale-seg-btn:hover{box-shadow:var(--s-sh1); color:var(--s-tx)}
.scale-seg-btn:focus-visible{outline:3px solid var(--s-ring); outline-offset:2px}
.scale-seg-btn.is-on{border-color:var(--s-brand); background:var(--petrol-50); color:var(--s-brand-a); box-shadow:0 0 0 1px var(--s-brand)}
.scale-seg-ic{
  flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--petrol-100); color:var(--petrol-700);
}
.scale-seg-btn.is-on .scale-seg-ic{background:var(--s-brand); color:#fff}
.scale-seg-ic svg{width:20px; height:20px}
.scale-seg-tx{display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0}
.scale-seg-n{
  min-width:22px; height:20px; padding:0 6px; border-radius:var(--r-full); display:grid; place-items:center;
  font-size:var(--fs-caption); font-weight:600; background:var(--s-sunken); color:var(--s-mute);
}
.scale-seg-btn.is-on .scale-seg-n{background:var(--s-brand); color:#fff}
.scale-seg-l{font-size:var(--fs-small); font-weight:600; line-height:1.4}
.scale-seg-dots{position:absolute; inset-inline:14px; bottom:8px; display:flex; gap:4px}
.scale-seg-dots i{flex:1; height:4px; border-radius:var(--r-full); background:var(--s-sunken)}
.scale-seg-dots i{background:var(--petrol-100)}
.scale-seg-dots i.is-on{background:var(--s-brand)}
.scale-seg-btn.is-done::after{
  content:''; position:absolute; inset-block-start:10px; inset-inline-end:10px; width:10px; height:10px; border-radius:50%;
  background:var(--s-brand); box-shadow:0 0 0 3px var(--petrol-100);
}

.scale-box{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--s-line); box-shadow:var(--s-sh1); background:var(--s-elev);
}
/* two colour environments in one container: warm = the situation, green = the response */
.scale-zone{display:flex; flex-direction:column; gap:12px; border:0; box-shadow:none; border-radius:0; margin:0}
.scale-scene{
  position:relative; padding:20px 20px 34px;
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--mg-100) 70%, transparent), transparent 60%),
    linear-gradient(180deg, var(--mg-50), #FFFAF3);
}
.scale-scene::before{display:none}
.scale-scene-tag{display:flex; align-items:center; gap:8px; margin:0; font-size:var(--fs-small); font-weight:600; color:var(--mg-800)}
.scale-scene-tag svg.lucide{width:17px; height:17px; flex:none; color:var(--mg-600)}
.scale-scene-slug{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0}
.scale-scene-en{margin:-4px 0 0; font-family:var(--latin); font-size:var(--fs-caption); color:var(--s-mute)}
.scale-quote-row{display:flex; align-items:flex-start; gap:10px; margin-top:2px}
.scale-quote-av{
  flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--mg-100); color:var(--mg-700); border:0; box-shadow:none;
}
.scale-quote-av svg{width:18px; height:18px}
.scale-quote-row .scale-case-quote{
  position:relative; margin:0; padding:10px 14px; border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg);
  background:#fff; border:1px solid var(--mg-200, #EBD3B6);
}
.scale-quote-row .scale-case-quote::before{
  content:''; position:absolute; inset-block-start:0; inset-inline-start:-7px; width:0; height:0;
  display:none;
}

.scale-bridge{position:relative; height:0; z-index:3; display:flex; justify-content:center}
.scale-bridge-ic{
  width:42px; height:42px; margin-top:-21px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--s-body); box-shadow:0 0 0 5px var(--fern-50), 0 6px 14px -8px color-mix(in srgb, var(--fern-800) 55%, transparent);
}
.scale-bridge-ic svg{width:20px; height:20px; stroke-width:2.4}
.scale-lens{display:flex; flex-direction:column; gap:12px}
.scale-lens.is-reply{
  padding:34px 20px 20px;
  background:linear-gradient(180deg, var(--fern-50), color-mix(in srgb, var(--lv) 20%, var(--fern-50)));
  transition:background .45s var(--ease);
}
/* response track — four stops joined by a line that fills up to the chosen one */
.scale-track{
  position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px; padding:4px 0 0;
}
.scale-track-line{position:absolute; inset-block-start:26px; inset-inline:12.5%; height:3px; border-radius:3px; background:var(--fern-100)}
.scale-track-line i{display:block; height:100%; width:calc(var(--ri) / var(--rn) * 100%); border-radius:inherit; background:linear-gradient(90deg, var(--fern-300), var(--fern-600)); transition:width .5s var(--ease)}
.scale-lens-chip{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px; padding:0 2px 4px;
  border:0; background:none; box-shadow:none; cursor:pointer; text-align:center; font-family:var(--font);
  font-size:var(--fs-caption); font-weight:600; color:var(--s-soft); line-height:1.3;
}
.scale-lens-chip:hover{color:var(--lv-ink); box-shadow:none}
.scale-lens-chip:focus-visible{outline:3px solid var(--s-ring); outline-offset:2px; border-radius:var(--r-md)}
.scale-lens-chip.is-on{background:none; color:var(--fern-900)}
.scale-lens-node{
  position:relative; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:#EDF2F5; color:#8C9093; border:0; box-shadow:none;
  transition:transform .3s var(--ease-spring), background .3s var(--ease), border-color .3s var(--ease);
}
.scale-lens-chip:hover .scale-lens-node{transform:translateY(-2px)}
.scale-lens-chip.is-seen .scale-lens-node{background:var(--fern-600); color:#fff}
.scale-lens-chip.is-seen .scale-lens-ico svg{stroke-width:3}
.scale-lens-chip.is-on .scale-lens-node{background:var(--lv); color:var(--lv-on); border-color:transparent; transform:scale(1.1); box-shadow:0 0 0 5px color-mix(in srgb, var(--lv) 28%, transparent)}
.scale-lens-ico{display:grid; place-items:center; color:inherit}
.scale-lens-ico svg.lucide{width:20px; height:20px}
.scale-lens-n{
  position:absolute; inset-block-start:-6px; inset-inline-start:-6px; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:700; background:var(--fern-800); color:#fff; border:2px solid var(--fern-50);
}
.scale-lens-node .scale-seen{position:absolute; inset-block-end:-5px; inset-inline-end:-5px; width:17px; height:17px; border:2px solid var(--fern-50)}
.scale-lens-l{display:block}
.scale-lens-body{
  position:relative; overflow:hidden; padding:16px 18px 18px; border-radius:var(--r-xl);
  background:rgba(255,255,255,.82); border:1px solid color-mix(in srgb, var(--fern-300) 55%, transparent); min-height:6.5rem; box-shadow:none; border-radius:var(--r-lg);
}
.scale-lens-body::before{display:none}
.scale-lens-wm{position:absolute; inset-block-end:-18px; inset-inline-end:-10px; color:var(--fern-600); opacity:.07; pointer-events:none}
.scale-lens-wm svg{width:120px; height:120px; stroke-width:1.5}
.scale-lens-tag{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 8px; font-size:var(--fs-small); font-weight:600; color:var(--lv-ink)}
.scale-lens-tag-ico{width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--lv); color:var(--lv-on)}
.scale-lens-tag-ico svg{width:16px; height:16px}
.scale-lens-tag .scale-en{font-weight:500; font-family:var(--latin); color:var(--s-mute)}
.scale-resp-b{position:relative}

/* response zone — each level has its own hue: rose → amber → blue → green */
.scale-page .scale-lens[data-rung="0"], .scale-page .scale-lens [data-rung="0"]{
  --lv:#D4605C; --lv-ink:#8F2427; --lv-on:#fff; --lv-pale:#FFF3F1; --lv-line:#F6CFCB;
}
.scale-page .scale-lens[data-rung="1"], .scale-page .scale-lens [data-rung="1"]{
  --lv:#D9A441; --lv-ink:#6A4A07; --lv-on:#3A2A04; --lv-pale:#FFF8E6; --lv-line:#F3DFA8;
}
.scale-page .scale-lens[data-rung="2"], .scale-page .scale-lens [data-rung="2"]{
  --lv:var(--petrol-500); --lv-ink:var(--petrol-800); --lv-on:#fff; --lv-pale:var(--petrol-50); --lv-line:var(--petrol-200);
}
.scale-page .scale-lens[data-rung="3"], .scale-page .scale-lens [data-rung="3"]{
  --lv:var(--fern-600); --lv-ink:var(--fern-800); --lv-on:#fff; --lv-pale:var(--fern-50); --lv-line:var(--fern-200);
}
.scale-lens.is-reply{background:linear-gradient(180deg, var(--lv-pale), color-mix(in srgb, var(--lv) 20%, var(--lv-pale)))}
.scale-track-line{background:color-mix(in srgb, var(--lv) 22%, #fff)}
.scale-track-line i{background:var(--lv)}
.scale-lens-n{border-color:#fff}
.scale-lens-body{border-color:color-mix(in srgb, var(--lv) 38%, transparent)}
.scale-lens-body .scale-depth i{background:color-mix(in srgb, var(--lv) 22%, #fff)}
.scale-lens-body .scale-depth i.is-on{background:var(--lv)}
.scale-lens-wm{color:var(--lv); opacity:.1}
.scale-lens-tag{color:var(--lv-ink)}
.scale-lens-chip.is-on{color:var(--lv-ink)}
.scale-lens-chip.is-on .scale-lens-node{box-shadow:0 0 0 5px color-mix(in srgb, var(--lv) 30%, transparent)}
.scale-lens-node .scale-seen{border-color:#fff}
.scale-bridge-ic{box-shadow:0 0 0 5px rgba(255,255,255,.7), 0 6px 14px -8px rgba(0,0,0,.35)}

.scale-page .reflect-meter{margin-top:var(--s5)}

@media(min-width:720px){
  .scale-stairs{--sb:112px; --ss:50px; --gap:14px; padding-inline:18px}
  .scale-stair{--step:calc(25cqw + 3.5px)}
}
@media(max-width:639px){
  .scale-defpane-hook{margin-inline-start:0; white-space:normal}
  .scale-stairs{--sb:92px; --ss:34px; --gap:6px; padding-inline:8px; padding-top:54px}
  .scale-stair{--step:calc(25cqw + 1.5px)}
  .scale-stair-block{padding:8px 6px 12px; gap:5px}
  .scale-stair .scale-tile-en{display:none}
  .scale-stair .scale-tile-ico{width:30px; height:30px}
  .scale-stair .scale-tile-term{font-size:var(--fs-caption); line-height:1.3}
  .scale-seg{grid-template-columns:1fr}
  .scale-scene{padding:16px 14px 32px}
  .scale-lens.is-reply{padding:32px 14px 16px}
  .scale-lens-l{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .scale-stair:hover .scale-stair-block, .scale-seg-btn:hover, .scale-lens-chip:hover .scale-lens-node{transform:none}
  .scale-climber, .scale-climber-in, .scale-climber.is-move .scale-climber-in{animation:none}
}

/* --- page.concepts · drama + activity field ----------------------------- */
.concept-page .concept-intro{margin:0}
.concept-page .concept-drama{margin-bottom:var(--s2)}
.concept-page .concept-panel:empty{display:none}

.cmap{
  display:grid; grid-template-columns:256px minmax(0,1fr);
  align-items:stretch;
  overflow:hidden; border-radius:var(--r-xl);
  border:0;
  background:var(--s-surface);
}
.cmap-topics{
  display:flex; flex-direction:column; gap:8px;
  padding:16px 12px;
  background:#F3F6F8;
  border:0;
}
.cmap-topic{
  display:grid; grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center; gap:10px; width:100%;
  padding:11px 12px 11px 10px; border-radius:12px;
  text-align:left; cursor:pointer; font-family:var(--font);
  border:0;
  color:#fff;
  background:var(--cm-card1);
  box-shadow:none;
}
.cmap-topic:hover:not(.is-active):not(.is-locked){
  background:var(--cm-hov1);
}
.cmap-topic:focus-visible{outline:3px solid var(--s-ring); outline-offset:2px}
.cmap-topic-ico{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--cm-ico);
  box-shadow:none;
}
.cmap-topic-ico svg.lucide{width:18px; height:18px}
.cmap-topic-txt{min-width:0}
.cmap-topic-t{font-size:var(--fs-ui); font-weight:600; line-height:1.4; color:inherit}
.cmap-topic-flag{
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#fff; color:var(--cm-ico);
}
.cmap-topic-flag svg.lucide{width:13px; height:13px}
.cmap-topic.is-active{
  background:var(--cm-act1);
  color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4), 0 6px 14px -8px var(--cm-sh);
}
.cmap-topic.is-active .cmap-topic-ico{color:var(--cm-act2)}
.cmap-topic.is-active .cmap-topic-t{color:#fff}
.cmap-topic.is-active .cmap-topic-flag{background:rgba(255,255,255,.2); color:#fff}
.cmap-topic.is-done .cmap-topic-flag{background:#fff; color:#317E47}
.cmap-topic.is-active.is-done .cmap-topic-flag{background:#fff; color:#317E47}
.cmap-topic.is-locked{cursor:not-allowed; background:#8593A0; color:#fff}
.cmap-topic.is-locked .cmap-topic-ico{color:#8593A0}

.cmap-field{position:relative; min-height:340px; overflow:hidden}
.cmap-field-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 48%, transparent 16%, rgba(0,59,83,.045) 16.6%, transparent 17.4%),
    radial-gradient(circle at 50% 48%, transparent 30%, rgba(0,59,83,.04) 30.6%, transparent 31.4%),
    radial-gradient(circle at 50% 48%, transparent 44%, rgba(0,59,83,.035) 44.6%, transparent 45.4%),
    var(--cm-fa);
}
.cmap-field-bg::after{display:none}
.cmap-balls{position:absolute; inset:0}
.cmap-ball{
  position:absolute; left:var(--bx); top:var(--by);
  width:164px; height:164px; padding:0;
  translate:-50% -50%;
  background:none; border:0; cursor:pointer; font-family:var(--font);
}
.cmap-ball:focus-visible{outline:none}
.cmap-ball:focus-visible .cmap-ball-face{outline:3px solid var(--s-ring); outline-offset:3px}
.cmap-ball-float{display:block; width:100%; height:100%; will-change:transform}
.cmap-m0 .cmap-ball-float{animation:cmap-float-a 4.6s ease-in-out infinite}
.cmap-m1 .cmap-ball-float{animation:cmap-float-b 5.2s ease-in-out infinite}
.cmap-m2 .cmap-ball-float{animation:cmap-float-c 4.1s ease-in-out infinite}
.cmap-m3 .cmap-ball-float{animation:cmap-float-d 5.8s ease-in-out infinite}
.cmap-m0.cmap-in .cmap-ball-float{
  animation:cmap-rise-a .7s var(--ease-spring) both, cmap-float-a 4.6s ease-in-out .7s infinite;
}
.cmap-m1.cmap-in .cmap-ball-float{
  animation:cmap-rise-b .78s var(--ease-spring) both, cmap-float-b 5.2s ease-in-out .78s infinite;
}
.cmap-m2.cmap-in .cmap-ball-float{
  animation:cmap-rise-c .64s var(--ease-spring) both, cmap-float-c 4.1s ease-in-out .64s infinite;
}
.cmap-m3.cmap-in .cmap-ball-float{
  animation:cmap-rise-d .86s var(--ease-spring) both, cmap-float-d 5.8s ease-in-out .86s infinite;
}
.cmap-ball-face{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; width:100%; height:100%;
  padding:20px 16px 18px;
  border-radius:50%;
  border:0;
  background:
    radial-gradient(circle at 34% 28%, #FFFFFF 0%, var(--cm-ball1) 46%, var(--cm-ball2) 100%);
  box-shadow:
    0 12px 28px -14px var(--cm-sh),
    inset 0 -12px 18px -12px var(--cm-sh-soft);
  text-align:center;
}
.cmap-ball:hover .cmap-ball-face{
  transform:scale(1.04);
  box-shadow:0 16px 32px -14px var(--cm-sh);
}
.cmap-ball-t{
  font-size:13px; font-weight:600; line-height:1.35;
  color:var(--cm-ink); max-width:9.2em;
}
.cmap-ball-cue{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; color:var(--cm-act2);
}
.cmap-ball-cue svg.lucide{width:12px; height:12px}
.cmap-ball.is-seen .cmap-ball-face{
  background:
    radial-gradient(circle at 34% 28%, #FFFFFF 0%, var(--cm-ball2) 40%, var(--cm-seen) 100%);
  box-shadow:
    0 0 0 2px var(--cm-ring),
    0 12px 28px -14px var(--cm-sh),
    inset 0 -12px 18px -12px var(--cm-sh-soft);
}
.cmap-next{align-self:flex-start; margin-top:4px}
@keyframes cmap-rise-a{
  from{opacity:0; transform:translateY(46px) scale(.62)}
  to{opacity:1; transform:none}
}
@keyframes cmap-rise-b{
  from{opacity:0; transform:translate(-44px,16px) scale(.66) rotate(-10deg)}
  to{opacity:1; transform:none}
}
@keyframes cmap-rise-c{
  from{opacity:0; transform:translate(44px,20px) scale(.66) rotate(10deg)}
  to{opacity:1; transform:none}
}
@keyframes cmap-rise-d{
  from{opacity:0; transform:translateY(-32px) scale(.52)}
  to{opacity:1; transform:none}
}
@keyframes cmap-float-a{
  0%, 100%{transform:translate(0,0) rotate(-.5deg)}
  25%{transform:translate(7px,-13px) rotate(1.5deg)}
  50%{transform:translate(1px,-3px) rotate(.2deg)}
  75%{transform:translate(-6px,-11px) rotate(-1.4deg)}
}
@keyframes cmap-float-b{
  0%, 100%{transform:translate(0,0) rotate(.4deg)}
  28%{transform:translate(-12px,6px) rotate(-2.2deg)}
  52%{transform:translate(5px,-10px) rotate(1.6deg)}
  78%{transform:translate(11px,4px) rotate(.9deg)}
}
@keyframes cmap-float-c{
  0%, 100%{transform:translate(0,0) rotate(0deg)}
  12%{transform:translate(9px,-7px) rotate(1.3deg)}
  25%{transform:translate(0,-13px) rotate(0deg)}
  38%{transform:translate(-9px,-7px) rotate(-1.3deg)}
  50%{transform:translate(0,0) rotate(0deg)}
  62%{transform:translate(8px,7px) rotate(1.1deg)}
  75%{transform:translate(0,10px) rotate(0deg)}
  88%{transform:translate(-8px,6px) rotate(-1.1deg)}
}
@keyframes cmap-float-d{
  0%{transform:translate(0,-10px) rotate(0deg)}
  25%{transform:translate(11px,1px) rotate(1.8deg)}
  50%{transform:translate(0,9px) rotate(0deg)}
  75%{transform:translate(-11px,1px) rotate(-1.8deg)}
  100%{transform:translate(0,-10px) rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){
  .cmap-ball-float,
  .cmap-m0.cmap-in .cmap-ball-float,
  .cmap-m1.cmap-in .cmap-ball-float,
  .cmap-m2.cmap-in .cmap-ball-float,
  .cmap-m3.cmap-in .cmap-ball-float{animation:none}
  .cmap-ball:hover .cmap-ball-face{transform:none}
  .cmap-topic:hover:not(.is-active):not(.is-locked){transform:none}
}
@media(max-width:760px){
  .cmap{grid-template-columns:1fr}
  .cmap-topics{
    flex-direction:row; gap:8px; overflow-x:auto;
    border:0;
    padding:12px;
  }
  .cmap-topic{min-width:220px; flex:none}
  .cmap-field{min-height:0}
  .cmap-field-bg::after{inset:10% 8%}
  .cmap-balls{
    position:relative;
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:14px; padding:22px 12px 20px;
  }
  .cmap-ball{position:relative; left:auto; top:auto; translate:none}
}

.concept-hint{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:var(--fs-caption); color:var(--s-mute);
}
.concept-hint svg{width:15px; height:15px; flex:none; color:var(--s-brand-a)}
.concept-quiz-lock{
  display:flex; align-items:center; gap:8px; margin:0;
  padding:12px 14px; border-radius:var(--r-md);
  background:var(--s-sunken); border:1px dashed var(--s-line-mid);
  font-size:var(--fs-caption); color:var(--s-mute);
}
.concept-quiz-lock svg.lucide{width:15px; height:15px; flex:none}
.concept-panel{display:flex; flex-direction:column; gap:var(--s3)}
.concept-head{margin:0; font-size:var(--fs-h3); font-weight:600; line-height:1.5; color:var(--s-tx)}
.concept-intro{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.concept-drama{
  border-radius:var(--r-lg);
  background:var(--s-sunken); border:1px solid var(--s-line);
  overflow:hidden;
}
.concept-drama-h{
  display:flex; align-items:center; gap:8px; width:100%;
  margin:0; padding:14px; background:none; border:0; cursor:pointer;
  font-family:inherit; text-align:left;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-acc-tx);
  transition:background-color var(--t-fast) var(--ease);
}
.concept-drama-h:hover{background:var(--s-elev)}
.concept-drama-h svg{width:15px; height:15px; flex:none}
.concept-drama-t{flex:1}
.concept-drama-tog{flex:none; display:flex}
.concept-drama-tog svg{width:16px; height:16px; transition:transform var(--t-base) var(--ease)}
.concept-drama.is-open .concept-drama-tog svg{transform:rotate(180deg)}
.concept-drama-b{padding:0 14px 14px}
.concept-drama-b[hidden]{display:none}
.concept-term{
  background:var(--s-surface); border:1px solid var(--s-line);
  border-inline-start:3px solid var(--s-brand);
  border-radius:var(--r-md); padding:14px 16px; box-shadow:var(--s-sh1);
}
.concept-term-h{display:flex; align-items:center; gap:8px; margin:0 0 6px; color:var(--s-brand-a)}
.concept-term-h svg{width:17px; height:17px; flex:none}
.concept-term-h strong{font-size:var(--fs-small); font-weight:600; line-height:1.6}
.concept-def{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.concept-points{margin:8px 0 0; padding-inline-start:20px}
.concept-points li{font-size:var(--fs-small); line-height:1.8; color:var(--s-body); margin-bottom:4px}
.concept-eg{
  margin-top:10px; padding:10px 12px; border-radius:var(--r-md);
  background:var(--s-acc-pale);
}
.concept-eg em{
  display:block; font-style:normal; margin-bottom:4px;
  font-size:var(--fs-caption); font-weight:500; color:var(--s-acc-tx);
}
.concept-eg p{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.concept-eg ul{margin:0; padding-inline-start:18px}
.concept-eg li{font-size:var(--fs-small); line-height:1.8; color:var(--s-body); margin-bottom:3px}
.concept-quiz{
  background:var(--s-elev); border:1px solid var(--s-line-mid);
  border-radius:var(--r-lg); padding:16px; box-shadow:var(--s-sh1);
}
.concept-quiz-h{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-brand-h);
}
.concept-quiz-h svg{width:15px; height:15px}
.concept-quiz .q{margin:0 0 12px}
.concept-quiz .quiz-check{margin-top:10px}

/* --- page.concepts · definition-ball modal (shares .poll-pop shell) ----- */
.poll-pop-card.is-term{
  align-items:stretch; text-align:left; width:min(100%, 30rem); gap:8px;
}
.term-modal-bar{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; margin-bottom:2px;
}
.term-modal-kicker{
  margin:0; font-size:var(--fs-caption); font-weight:500;
  color:var(--s-acc-tx);
}
.poll-pop-card.is-term .poll-pop-badge{align-self:flex-start}
.term-modal-t{margin:0; font-size:var(--fs-h3); font-weight:600; line-height:1.5; color:var(--s-tx)}
.poll-pop-card.is-term .concept-def{text-align:left}
.poll-pop-card.is-term .concept-points{text-align:left; align-self:stretch}
.poll-pop-card.is-term .concept-eg{width:100%; text-align:left}
.term-modal-eg[hidden]{display:none}
.term-eg-toggle{align-self:flex-start; margin-top:2px}

/* --- page.vignette · role-play ------------------------------------------ */
.vig-card{
  margin-top:var(--s3); padding:16px;
  background:var(--s-surface); border:1px solid var(--s-line);
  border-radius:var(--r-lg); box-shadow:var(--s-sh1);
}
.vig-card.is-better{border-color:var(--s-ok); background:var(--s-ok-pale)}
.vig-card.is-better .chat-bubble{background:var(--s-elev); color:var(--s-body); border:1px solid var(--s-line)}
.vig-tag{
  display:flex; align-items:center; gap:8px; margin:0 0 6px;
  font-size:var(--fs-caption); font-weight:500; line-height:1.5; color:var(--s-acc-tx);
}
.vig-card.is-better .vig-tag{color:var(--s-ok-tx)}
.vig-tag svg{width:17px; height:17px; flex:none}
.vig-slug{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px}
.vig-ask{
  margin-top:12px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--s-brand-pale); border-inline-start:3px solid var(--s-brand);
}
.vig-ask-h{
  display:flex; align-items:center; gap:7px; margin:0 0 5px;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-brand-h);
}
.vig-ask-h svg{width:15px; height:15px}
.vig-ask p{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.vig-why{
  display:flex; align-items:flex-start; gap:8px; margin:12px 0 0;
  font-size:var(--fs-small); line-height:1.8; color:var(--s-ok-tx);
}
.vig-why svg{width:17px; height:17px; flex:none; margin-top:4px}
.vig-go{margin-top:var(--s4); width:100%}

/* --- page.dos · Do's and Don'ts — two-sided diagram ---------------------- */
.dos-board{margin-top:var(--s4); display:flex; flex-direction:column; gap:var(--s4)}
.dos-head{display:grid; grid-template-columns:1fr; gap:10px; position:relative}
.dos-h{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r-xl);
  position:relative; overflow:hidden; color:#fff; box-shadow:var(--e2);
}
.dos-h::after{ /* soft watermark glyph */
  content:''; position:absolute; inset-inline-end:-26px; inset-block-start:-34px; width:120px; height:120px;
  border-radius:50%; background:rgba(255,255,255,.10);
}
.dos-h.is-do{background:linear-gradient(135deg, var(--fern-600), var(--fern-800))}
.dos-h.is-dont{background:linear-gradient(135deg, #D04848, #8E2224)}
.dos-h-ic{
  flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.55);
}
.dos-h-ic svg{width:24px; height:24px; stroke-width:3}
.dos-h-tx{display:flex; flex-direction:column; gap:2px; min-width:0}
.dos-h .dos-h-tx strong{font-size:var(--fs-body); font-weight:600; line-height:1.45; color:#fff}
.dos-h .dos-h-tx em{font-style:normal; font-size:var(--fs-caption); color:#fff; opacity:.85}
.dos-hub{display:none}

.dos-rows{display:flex; flex-direction:column; gap:var(--s4)}
.dos-row{display:flex; flex-direction:column; gap:8px; position:relative}
.dos-node{display:flex; align-items:center; justify-content:center; gap:8px; position:relative; order:-1}
.dos-node-ic{
  position:relative; z-index:1; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--s-elev); color:var(--s-brand-h); border:2px solid var(--s-brand); box-shadow:var(--e1);
}
.dos-node-ic svg{width:20px; height:20px}
.dos-n{
  position:absolute; z-index:2; inset-block-start:-6px; margin-inline-start:34px;
  min-width:22px; height:22px; padding:0 5px; border-radius:var(--r-full);
  background:var(--s-brand-a); color:#fff; display:grid; place-items:center;
  font-size:var(--fs-caption); font-weight:600; line-height:1; border:2px solid var(--s-canvas);
}
.dos-cell{
  position:relative; padding:14px 16px; border-radius:var(--r-lg); background:var(--s-elev);
  border:1px solid var(--s-line); box-shadow:var(--e1);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.dos-cell::before{ /* colored edge */
  content:''; position:absolute; inset-block:10px; inset-inline-start:0; width:4px; border-radius:0 4px 4px 0;
}
.dos-cell.is-do{background:linear-gradient(180deg, color-mix(in srgb, var(--s-ok-pale) 55%, var(--s-elev)), var(--s-elev)); border-color:color-mix(in srgb, var(--s-ok) 28%, var(--s-line))}
.dos-cell.is-do::before{background:var(--s-ok)}
.dos-cell.is-dont{background:linear-gradient(180deg, color-mix(in srgb, var(--s-bad-pale) 55%, var(--s-elev)), var(--s-elev)); border-color:color-mix(in srgb, var(--s-bad) 26%, var(--s-line))}
.dos-cell.is-dont::before{background:var(--s-bad)}
.dos-cell-k{display:flex; align-items:center; gap:6px; margin-bottom:8px; font-size:var(--fs-caption); font-weight:600}
.dos-cell-k svg{width:14px; height:14px; stroke-width:3}
.dos-cell.is-do .dos-cell-k{color:var(--s-ok-tx)}
.dos-cell.is-dont .dos-cell-k{color:var(--s-bad-tx)}
.dos-cell-b{display:flex; align-items:flex-start; gap:12px}
.dos-cell-ic{
  flex:none; width:30px; height:30px; border-radius:50%; display:none; place-items:center; color:#fff; margin-top:2px;
}
.dos-cell-ic svg{width:16px; height:16px; stroke-width:3}
.dos-cell.is-do .dos-cell-ic{background:var(--s-ok)}
.dos-cell.is-dont .dos-cell-ic{background:var(--s-bad)}
.dos-cell-t{min-width:0}
.dos-cell p{margin:0 0 6px; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.dos-cell p:last-child{margin-bottom:0}
.dos-cell-t p + p{position:relative; padding-top:6px; border-top:1px dashed var(--s-line-mid)}

@media(min-width:720px){
  .dos-head{grid-template-columns:1fr 1fr; gap:calc(var(--s4) * 2 + 24px)}
  .dos-hub{
    display:grid; place-items:center; position:absolute; inset-inline-start:50%; inset-block-start:50%;
    width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%;
    background:var(--s-elev); color:var(--s-brand-h); border:2px solid var(--s-brand); box-shadow:var(--e2); z-index:2;
  }
  .dos-hub svg{width:22px; height:22px}
  .dos-rows{position:relative; gap:14px}
  .dos-rows::before{ /* spine */
    content:''; position:absolute; inset-block:22px; inset-inline-start:50%; width:0;
    border-inline-start:2px dashed color-mix(in srgb, var(--s-brand) 35%, transparent); transform:translateX(-1px);
  }
  .dos-row{display:grid; grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); gap:0; align-items:stretch}
  .dos-node{order:0; align-items:center; flex-direction:column; z-index:1}
  .dos-n{margin-inline-start:30px}
  .dos-cell-k{display:none}
  .dos-cell-ic{display:grid}
  .dos-cell{display:flex; align-items:center; padding:16px 18px}
  .dos-cell-b{align-items:center}
  .dos-cell:hover{transform:translateY(-2px); box-shadow:var(--e2)}
  /* connectors from the cards to the node */
  .dos-cell.is-do::after, .dos-cell.is-dont::after{
    content:''; position:absolute; inset-block-start:50%; width:14px; height:2px; margin-top:-1px;
  }
  .dos-cell.is-do::after{inset-inline-end:-14px; background:var(--s-ok)}
  .dos-cell.is-dont::after{inset-inline-start:-14px; background:var(--s-bad)}
  .dos-cell.is-do::before{inset-inline-start:auto; inset-inline-end:0; border-radius:4px 0 0 4px}
  .dos-cell.is-dont::before{inset-inline-start:0}
}
@media(prefers-reduced-motion:reduce){ .dos-cell{transition:none} .dos-cell:hover{transform:none} }

/* --- page.checklist · self-assessment ----------------------------------- */
.check-list{display:flex; flex-direction:column; gap:10px; margin-top:var(--s3)}
.check-row{
  background:var(--s-surface); border:1px solid var(--s-line);
  border-radius:var(--r-lg); padding:14px 16px; box-shadow:var(--s-sh1);
  transition:border-color var(--t-fast);
}
.check-row.is-set{border-color:var(--s-acc)}
.check-q{display:flex; gap:var(--s3); align-items:flex-start}
.check-n{
  width:26px; height:26px; flex:none; border-radius:var(--r-full);
  background:var(--s-acc-pale); color:var(--s-acc-tx);
  display:grid; place-items:center; font-size:var(--fs-caption); font-weight:600; margin-top:2px;
}
.check-q p{margin:0; font-size:var(--fs-small); line-height:1.75}
.check-opts{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.check-opt{
  flex:1 1 9em; min-height:46px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 10px; border:1.5px solid var(--s-line-mid);
  border-radius:var(--r-control); background:var(--s-elev);
  font-family:var(--font); font-size:var(--fs-ui); font-weight:500; line-height:1.5;
  color:var(--s-body); cursor:pointer; text-align:center;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.check-opt:hover:not(:disabled){background:var(--s-sunken)}
.check-opt:focus-visible{outline:3px solid var(--s-ring); outline-offset:2px}
.check-box{display:grid; place-items:center; flex:none}
.check-box svg{width:17px; height:17px}
.check-opt.is-yes.is-on{background:var(--s-ok-pale); border-color:var(--s-ok); color:var(--s-ok-tx)}
.check-opt.is-part.is-on{background:var(--s-warn-pale); border-color:var(--s-warn); color:var(--s-warn-tx)}
.check-opt.is-no.is-on{background:var(--s-bad-pale); border-color:var(--s-bad); color:var(--s-bad-tx)}
.check-opt.is-dim{opacity:.45}
.check-opt:disabled{cursor:default}
.check-note-tog{
  display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  padding:8px 10px; min-height:40px;
  background:none; border:0; border-radius:var(--r-sm);
  font-family:var(--font); font-size:var(--fs-caption); font-weight:500; line-height:1.5;
  color:var(--s-brand-h); cursor:pointer;
}
.check-note-tog:hover{background:var(--s-brand-soft)}
.check-note-tog:focus-visible{outline:3px solid var(--s-ring); outline-offset:1px}
.check-note-tog svg{width:15px; height:15px}
.check-note{margin-top:8px; min-height:64px}
.check-note-tog.is-must:disabled{opacity:1; cursor:default; color:var(--s-tx); font-weight:600}
.check-note-tog.is-must:hover{background:none}
.check-note.is-need{border-color:var(--amb-500, #D9A441); box-shadow:0 0 0 3px rgba(217,164,65,.18)}
.check-guide{
  margin-top:var(--s5); padding:16px;
  background:var(--s-surface); border:1px solid var(--s-line);
  border-radius:var(--r-lg); box-shadow:var(--s-sh1);
}
.check-guide h4{margin:0 0 12px; font-size:var(--fs-body); font-weight:600; line-height:1.5; color:var(--s-tx)}
.check-verdict{
  display:flex; gap:10px; align-items:flex-start;
  padding:13px 15px; border-radius:var(--r-md);
}
.check-verdict svg{width:19px; height:19px; flex:none; margin-top:3px}
.check-verdict p{margin:0; font-size:var(--fs-small); line-height:1.8}
.check-verdict.is-ok{background:var(--s-ok-pale); color:var(--s-ok-tx)}
.check-verdict.is-grow{background:var(--s-warn-pale); color:var(--s-warn-tx)}
.check-guide-list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.check-guide-i{
  display:flex; gap:8px; align-items:flex-start;
  font-size:var(--fs-small); line-height:1.8; color:var(--s-mute);
}
.check-guide-i svg{width:15px; height:15px; flex:none; margin-top:4px}
.check-guide-i.is-you{color:var(--s-body); font-weight:600}

/* --- page.plan · action plan -------------------------------------------- */
.plan-think{
  margin-top:var(--s4); padding:14px 16px; border-radius:var(--r-lg);
  background:var(--s-brand-pale); border-inline-start:3px solid var(--s-brand);
}
.plan-think-h{
  display:flex; align-items:center; gap:8px; margin:0 0 6px;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-brand-h);
}
.plan-think-h svg{width:15px; height:15px}
.plan-think ul{margin:0; padding-inline-start:20px}
.plan-think li{font-size:var(--fs-small); line-height:1.8; color:var(--s-body); margin-bottom:6px}
.plan-think li:last-child{margin-bottom:0}
.plan-grid{display:flex; flex-direction:column; gap:10px; margin-top:var(--s3)}
.plan-week{
  padding:14px 16px; border-radius:var(--r-lg);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--s-acc-pale) calc(30% + var(--i, 0) * 16%), var(--s-elev)),
      var(--s-elev) 76%);
  border:1px solid var(--s-line); box-shadow:var(--s-sh1);
}
.plan-week-h{display:flex; align-items:center; gap:9px; margin:0 0 7px}
.plan-week-n{
  width:26px; height:26px; flex:none; border-radius:var(--r-full);
  background:var(--s-acc-h); color:var(--s-on-dark);
  display:grid; place-items:center; font-size:var(--fs-caption); font-weight:600;
}
.plan-week-h span:last-child{font-size:var(--fs-ui); font-weight:500; line-height:1.5; color:var(--s-acc-tx)}
.plan-task{margin:0 0 10px; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.plan-meta{
  display:grid; grid-template-columns:1fr; gap:10px 20px;
  margin-top:2px; padding-top:12px; border-top:1px solid var(--s-line);
}
/* plain information rows (not buttons): tinted icon tile + text */
.plan-chip{
  display:flex; align-items:flex-start; gap:10px; min-width:0;
  padding:0; border:0; border-radius:0; background:none;
  font-size:var(--fs-small); line-height:1.65; color:var(--s-body);
}
.plan-chip svg{
  width:26px; height:26px; flex:none; margin-top:0; padding:6px; box-sizing:border-box;
  border-radius:var(--r-sm); background:var(--s-acc-pale); color:var(--s-acc-tx);
}
.plan-chip span{padding-top:2px; min-width:0}
@media(min-width:720px){
  .plan-meta{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .plan-meta .plan-chip + .plan-chip{padding-inline-start:20px; border-inline-start:1px solid var(--s-line)}
}
.plan-own{margin-top:var(--s5)}
.plan-own-h{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font-size:var(--fs-caption); font-weight:600; color:var(--s-acc-tx);
}
.plan-own-h svg{width:16px; height:16px}
.plan-keys{margin:8px 0 0; padding-inline-start:20px}
.plan-keys li{font-size:var(--fs-small); line-height:1.8; color:var(--s-body); margin-bottom:7px}
.plan-keys li:last-child{margin-bottom:0}
.keymsg .plan-keys li,
.prose .keymsg .plan-keys li{color:var(--s-on-dark-soft)}
.keymsg .plan-keys li::marker{color:var(--s-on-dark-acc)}

@media(prefers-reduced-motion:reduce){
  .val-why.is-in, .vig-card.is-better.is-pop, .check-guide.is-pop,
  .scale-after.is-pop{animation:none}
  button.scale-rung-in:hover{transform:none}
  .scale-tile:hover{transform:none}
  .val-card.is-pulse, .val-card.is-pulse .val-n,
  .val-card.is-pulse .val-opt.is-on .val-ico,
  .values-go.is-ready{animation:none}
  .val-card:not(.is-done):hover, .val-opt:hover:not(:disabled){transform:none}
}

/* The script's own scene-transition sentence, shown as narration. */
.scene-outro{
  display:flex; gap:9px; align-items:flex-start;
  margin:var(--s5) 0 0; padding:12px 14px;
  border-radius:var(--r-md); background:var(--s-sunken);
  border-inline-start:3px solid var(--s-line-mid);
  font-size:var(--fs-small); line-height:1.8; color:var(--s-mute);
}
.scene-outro svg{width:16px; height:16px; flex:none; margin-top:4px; color:var(--s-brand)}

/* --- handout sheets · পরিশিষ্ট-ক / পরিশিষ্ট-খ --------------------------- */
.handout-eg, .handout-impact{
  margin-top:10px; padding:10px 12px; border-radius:var(--r-md);
  background:var(--s-acc-pale);
}
.handout-impact{background:var(--s-brand-pale)}
.handout-eg em, .handout-impact em{
  display:block; margin-bottom:5px; font-style:normal;
  font-size:var(--fs-caption); font-weight:500;
  color:var(--s-acc-tx);
}
.handout-impact em{color:var(--s-brand-h)}
.handout-eg p, .handout-impact p{margin:0; font-size:var(--fs-small); line-height:1.8; color:var(--s-body)}
.handout-eg ul, .handout-impact ul{margin:0; padding-inline-start:18px}
.handout-eg li, .handout-impact li{font-size:var(--fs-small); line-height:1.8; color:var(--s-body); margin-bottom:4px}
.handout-norm{
  padding:14px 16px; margin-bottom:12px; border-radius:var(--r-lg);
  background:var(--s-surface); border:1px solid var(--s-line); box-shadow:var(--s-sh1);
}
.handout-norm-h{display:flex; gap:10px; align-items:flex-start; margin:0}
.handout-norm-n{
  width:26px; height:26px; flex:none; border-radius:var(--r-full);
  background:var(--s-bad-pale); color:var(--s-bad-tx);
  display:grid; place-items:center; font-size:var(--fs-caption); font-weight:600;
}
.handout-norm-h strong{font-size:var(--fs-small); font-weight:600; line-height:1.6; color:var(--s-tx)}

/* the module-intro ladder is read-only */
.scale-ladder.is-static{margin-top:var(--s4)}
.scale-ladder.is-static .scale-rung-in{cursor:default}
.scale-after > div{min-width:0}
.scale-after .t-label{margin:0 0 4px}

/* ==========================================================================
   সাব-মডিউল ওভারভিউ · পাঠ্যপৃষ্ঠার মতো শান্ত বিন্যাস
   শিরোনাম → ওভারভিউ → কণ্ঠরেখা (ওয়েভফর্ম) ও অডিওর সঙ্গে ফুটে ওঠা লেখা → উদ্দেশ্য
   ========================================================================== */
.ovw{
  --serif:"Noto Serif Bengali","Noto Serif","Nirmala UI",Georgia,serif;
  display:flex; flex-direction:column; max-width:none;
  animation:ovw-in .6s var(--ease) both;
}
@keyframes ovw-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* title block */
.ovw-run{
  display:flex; align-items:center; gap:10px; margin:0 0 8px;
  font-size:var(--fs-caption); line-height:1.5; font-weight:500; color:var(--mg-700);
}
.ovw-run::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--mg-400); flex:none}
.ovw-run-min{color:var(--s-mute); font-weight:400}
.ovw-run-min::before{content:"·"; margin-inline-end:10px; color:var(--s-off)}
.ovw-subtitle{
  margin:0; max-width:30em; text-wrap:balance;
  font-size:clamp(18px, .5vw + 15px, 21px); line-height:1.6; font-weight:500; color:var(--petrol-700);
}
.ovw-title{
  margin:0;
  font-family:var(--serif); font-size:clamp(26px, 1vw + 20px, 32px); line-height:1.35;
  font-weight:400; color:var(--s-tx);
}

/* sound control — one speaker + a tiny wave, sits on the title row */
.ovw-titlebar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:22px 0 22px; padding-top:22px; border-top:1px solid var(--s-line);
}
.ovw-sound{display:flex; align-items:center; gap:8px; flex:none}
.ovw-hint{font-size:var(--fs-micro); line-height:1.4; color:var(--mg-700); white-space:nowrap}
.ovw-hint:empty{display:none}
.ovw-spk{
  width:38px; height:38px; padding:0; border:0; border-radius:var(--r-full);
  background:var(--s-acc-pale); color:#d67300; cursor:pointer;
  display:grid; place-items:center;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ovw-spk:hover{background:var(--s-acc-pale); color:#d67300}
.ovw-spk:focus-visible{outline:2px solid var(--s-ring); outline-offset:2px}
.ovw-spk:disabled{color:var(--paper-400); cursor:not-allowed; background:transparent}
.ovw-spk svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ovw.is-paused .ovw-spk, .ovw.is-blocked .ovw-spk, .ovw.is-muted .ovw-spk{color:#d67300}
.ovw.is-blocked .ovw-spk{animation:ovw-ping 1.8s ease-out infinite}
@keyframes ovw-ping{0%{box-shadow:0 0 0 0 rgba(188,124,62,.45)} 80%,100%{box-shadow:0 0 0 11px rgba(188,124,62,0)}}
.ovw-eq{display:inline-flex; align-items:center; gap:2px; height:16px}
.ovw-eq i{display:block; width:2px; height:25%; border-radius:var(--r-full); background:var(--paper-400); transition:height .3s var(--ease), background-color .3s var(--ease)}
.ovw.is-playing .ovw-eq i{background:#d67300; animation:ovw-eq 1s ease-in-out infinite}
.ovw.is-playing .ovw-eq i:nth-child(2){animation-delay:-.25s}
.ovw.is-playing .ovw-eq i:nth-child(3){animation-delay:-.5s}
.ovw.is-playing .ovw-eq i:nth-child(4){animation-delay:-.75s}
.ovw.is-playing .ovw-eq i:nth-child(5){animation-delay:-.4s}
@keyframes ovw-eq{0%,100%{height:25%} 50%{height:100%}}

/* text that appears with the voice */
.ovw-text{
  display:flex; flex-direction:column; gap:1.15em; max-width:36em;
  font-family:var(--serif); font-size:clamp(17px, .3vw + 15.5px, 19px); line-height:2.05; color:var(--s-tx);
}
.ovw-p{margin:0; font-size:inherit; line-height:inherit; color:inherit}
.ovw-p:first-child{font-size:1.06em}
.ovw-w{
  cursor:default; opacity:.2;
  border-bottom:1.5px solid transparent;
  transition:opacity .45s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.ovw:not(.is-playing):not(.is-waiting) .ovw-w:not(.is-on){opacity:.55}
.ovw-w.is-on{opacity:1}
.ovw-w.is-now{color:#d67300; border-bottom-color:#d67300}
.ovw.is-done .ovw-w, .ovw.is-nofile .ovw-w{opacity:1}

/* objectives */
.ovw-aims{margin-top:46px; padding-top:22px; border-top:1px solid var(--s-line)}
.ovw-aims-hd h3{margin:0; font-size:var(--fs-caption); line-height:1.5; font-weight:600; color:var(--mg-700)}
.ovw-aims-lead{margin:6px 0 6px; font-size:var(--fs-small); line-height:1.6; color:var(--s-mute)}
.ovw-aim-list{list-style:none; margin:0; padding:0}
.ovw-aim{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:4px 8px; align-items:baseline;
  padding:18px 0; border-top:1px solid var(--s-line);
}
.ovw-aim:first-child{border-top:0}
.ovw-aim-n{font-family:var(--serif); font-size:30px; line-height:1.2; color:var(--mg-500)}
.ovw-aim-t{margin:0; max-width:36em; font-family:var(--serif); font-size:clamp(16px, .25vw + 14.5px, 17.5px); line-height:1.95; color:var(--s-body)}
.ovw-extra{margin-top:30px}

/* মূল বার্তা sits inside the wrap card, so the overview page chrome stays off */
.ovw.is-key{animation:none}
.ovw.is-key .ovw-titlebar{margin:0 0 12px; padding-top:0; border-top:0}
.ovw.is-key .wrap-key-l{margin:0}
.ovw.is-key .ovw-text{max-width:none}
.prose .ovw.is-key .ovw-p{margin:0; font-size:inherit; line-height:inherit; color:inherit}

@media(max-width:639px){
  .ovw-aims{margin-top:36px}
  .ovw-aim{grid-template-columns:2.2rem minmax(0,1fr)}
  .ovw-aim-n{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  .ovw{animation:none}
  .ovw-w{transition:none}
  .ovw.is-blocked .ovw-spk{animation:none}
  .ovw.is-playing .ovw-eq i{animation:none; height:60%}
}

/* ---- level result: "অ্যালগরিদম" disclosure ------------------------------ */
.lv-algo{margin-top:14px}
.lv-algo-btn{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 14px; font-size:var(--fs-small)}
.lv-algo-btn svg{width:17px; height:17px}
.lv-algo-chev{display:inline-flex; transition:transform var(--t-fast) var(--ease)}
.lv-algo.is-open .lv-algo-chev{transform:rotate(180deg)}
.lv-algo-panel{margin-top:10px; padding:14px 16px; background:var(--paper-100, #F7F4EF); border:1px solid var(--s-line, #E6E1D8); border-radius:var(--r-md)}
.lv-algo-h{margin:0 0 8px; font-weight:700; color:var(--s-tx)}
.lv-algo-list{margin:0; padding-left:1.3em; display:grid; gap:8px; font-size:var(--fs-small); line-height:1.75; color:var(--s-tx)}
.lv-algo-list li::marker{color:var(--s-brand-h); font-weight:700}

/* ---- rings: thin + light. green = achieved level, gold = the teacher's own pick ---- */
.level-bar{ --ring-g:var(--fern-400); --ring-o:color-mix(in srgb, var(--lm-pick) 62%, #fff); --gap:var(--s-elev); --rg:2px; --rt:3.5px }
.level-meter .level-bar{ --gap:var(--chip-bg) }
.level-bar.is-declared, .level-bar.is-now, .level-bar.is-now.is-declared,
.level-meter .level-bar.is-declared, .level-meter .level-bar.is-now, .level-meter .level-bar.is-now.is-declared{
  box-shadow:0 0 0 var(--rg) var(--gap), 0 0 0 var(--rt) var(--ring-o);
}
.level-bar.is-now, .level-bar.is-now.is-declared,
.level-meter .level-bar.is-now, .level-meter .level-bar.is-now.is-declared{
  box-shadow:0 0 0 var(--rg) var(--gap), 0 0 0 var(--rt) var(--ring-g);
}
.level-bar.is-declared::after{ background:color-mix(in srgb, var(--lm-pick) 80%, #fff); box-shadow:none }
@media(max-width:639px){ .level-bar{ --rg:1.5px; --rt:2.5px } }
body.is-header-collapsed .level-bar, body.is-header-collapsed .level-meter .level-bar{ --rg:1.5px; --rt:2.8px }
body.is-header-collapsed .level-bar.is-declared, body.is-header-collapsed .level-bar.is-now, body.is-header-collapsed .level-bar.is-now.is-declared,
body.is-header-collapsed .level-meter .level-bar.is-declared, body.is-header-collapsed .level-meter .level-bar.is-now, body.is-header-collapsed .level-meter .level-bar.is-now.is-declared{
  box-shadow:0 0 0 var(--rg) var(--gap), 0 0 0 var(--rt) var(--ring-o);
}
body.is-header-collapsed .level-bar.is-now, body.is-header-collapsed .level-bar.is-now.is-declared,
body.is-header-collapsed .level-meter .level-bar.is-now, body.is-header-collapsed .level-meter .level-bar.is-now.is-declared{
  box-shadow:0 0 0 var(--rg) var(--gap), 0 0 0 var(--rt) var(--ring-g);
}

/* concept map: the topic list sits on top as one row (was a left column) */
@media(min-width:761px){
  .cmap{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr)}
  .cmap-topics{flex-direction:row; flex-wrap:nowrap; gap:8px; padding:12px; overflow-x:auto}
  .cmap-topic{
    flex:1 1 0; min-width:128px; position:relative;
    grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center;
    gap:6px; padding:12px 8px 10px;
  }
  .cmap-topic-ico{width:36px; height:36px}
  .cmap-topic-t{font-size:var(--fs-caption); line-height:1.4}
  .cmap-topic-flag{position:absolute; top:6px; right:6px; width:20px; height:20px}
}

/* single flat background for the whole case box — the levels are told by accents (chips, left bar, icon), not by tinted surfaces */
.scale-box{background:var(--s-elev)}
.scale-scene, .scale-lens.is-reply{background:none; transition:none}
.scale-scene{padding:20px 20px 34px}
.scale-lens.is-reply{padding:34px 20px 20px}
.scale-lens-wm{display:none}
.scale-lens-body{background:none; border:0; border-inline-start:4px solid var(--lv); border-radius:var(--r-md); padding:6px 4px 6px 16px; min-height:0}
.scale-quote-row .scale-case-quote{background:var(--s-elev)}
.scale-bridge-ic{background:var(--s-elev); border:1px solid var(--s-line); box-shadow:0 0 0 5px var(--s-elev)}
.scale-box .scale-lens{border-top:1px solid var(--s-line)}
.scale-lens-n{border-color:var(--s-elev)}
.scale-lens-node .scale-seen{border-color:var(--s-elev)}

/* ==== page.assign · slides, check & summary ============================= */
.asg-slide{display:block}
.asg-slide.is-in-next{animation:asg-slide-next .42s var(--ease) both}
.asg-slide.is-in-prev{animation:asg-slide-prev .42s var(--ease) both}
@keyframes asg-slide-next{from{opacity:0; transform:translateX(36px)} to{opacity:1; transform:none}}
@keyframes asg-slide-prev{from{opacity:0; transform:translateX(-36px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.asg-slide.is-in-next, .asg-slide.is-in-prev{animation:none}}

/* chips after the summary is shown: blue = expected, light red = unexpected */
.asg-chip:disabled, .asg-chip.is-locked{cursor:default; transform:none; opacity:1}
.asg-chip.is-locked:hover{transform:none; box-shadow:var(--s-sh1)}
.asg-bin .asg-bin-chips .asg-chip.is-expected{background:var(--petrol-50); border-color:var(--petrol-300); color:var(--petrol-800); box-shadow:none; animation:none}
.asg-bin .asg-bin-chips .asg-chip.is-unexpected{background:var(--ver-50); border-color:var(--ver-300); color:var(--ver-700); box-shadow:none; animation:none}
.asg-board.is-reviewed{box-shadow:none}
.asg-board.is-reviewed .asg-bin{cursor:default}
.asg-board.is-reviewed .asg-bin:hover{transform:none; box-shadow:var(--s-sh1); border-color:var(--s-line)}

/* check button */
.asg-check{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:18px 0 0}
.asg-check-btn{gap:8px}
.asg-check-btn i{width:18px; height:18px}
.asg-check-hint{margin:0; font-size:var(--fs-caption); color:var(--s-mute)}
.asg-again{margin:10px 0 0}
.asg-again i{width:16px; height:16px}

/* summary card — short and flat */
.asg-sum{
  margin:18px 0 0; padding:16px 20px 18px; border-radius:var(--r-xl);
  background:var(--s-elev); border:1px solid var(--s-line); box-shadow:var(--s-sh1);
}
.asg-sum-h{display:flex; align-items:center; gap:9px; margin:0 0 10px; font-size:var(--fs-h3); line-height:1.4; font-weight:700; color:var(--s-brand-a)}
.asg-sum-h i{width:20px; height:20px; color:var(--s-brand)}
.asg-sum-count{margin:0 0 14px; font-size:var(--fs-small); line-height:1.75; font-weight:600; color:var(--s-tx)}
.asg-sum-notes{display:grid; grid-template-columns:1fr; gap:10px}
@media(min-width:720px){.asg-sum-notes{grid-template-columns:1fr 1fr}}
.asg-note{padding:12px 14px; border-radius:var(--r-lg); background:var(--s-canvas); border:1px solid var(--s-line)}
.asg-note p{margin:0; font-size:var(--fs-small); line-height:1.75; color:var(--s-body)}
.asg-note .asg-note-h{margin:0 0 4px; font-size:var(--fs-caption); font-weight:700; color:var(--s-brand-h)}
.asg-note.is-key{background:var(--petrol-50); border-color:var(--petrol-200)}

/* slide navigation (separate from the footer button) */
.asg-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 4px; padding-top:16px; border-top:1px solid var(--s-line)}
.asg-nav-btn{gap:8px}
.asg-nav-btn i{width:18px; height:18px}
.asg-nav-next{margin-inline-start:auto}
.asg-nav-dots{display:flex; gap:7px; align-items:center; position:absolute; left:50%; transform:translateX(-50%)}
.asg-nav{position:relative}
.asg-nav-dots i{width:8px; height:8px; border-radius:50%; background:var(--s-line-mid); transition:background .25s var(--ease), width .25s var(--ease)}
.asg-nav-dots i.is-past{background:var(--s-ok)}
.asg-nav-dots i.is-on{background:var(--s-brand); width:22px; border-radius:var(--r-full)}
@media(max-width:520px){.asg-nav-dots{display:none}}

/* level re-check (start of a later sub-module): names only, no descriptions */
.scale-rung.is-compact .scale-rung-in{align-items:center; padding:12px 16px}
.scale-rung.is-compact .scale-step{padding-top:0}
.scale-rung.is-compact .scale-term{margin:0}

/* --- page.wrap · sub-module wrap-up ------------------------------------- */
.wrap{display:flex; flex-direction:column; gap:28px}
.wrap > .t-label,
.wrap > h2{margin:0}
.wrap > .t-label{margin-bottom:-18px}

.wrap-key{
  position:relative; padding:24px 28px 26px 32px;
  background:var(--s-elev); border:1px solid var(--s-line); border-radius:var(--r-xl);
  box-shadow:var(--s-sh1);
}
.wrap-key::before{
  content:""; position:absolute; left:0; top:22px; bottom:22px; width:4px;
  border-radius:0 4px 4px 0; background:var(--petrol-600);
}
.wrap-key-h{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 10px;
}
.wrap-key-h .wrap-key-l{margin:0}
.wrap-key-l{margin:0 0 10px; font-size:var(--fs-caption); font-weight:600; color:var(--s-brand-h)}
.prose .wrap-key-t{margin:0; max-width:none; font-size:var(--fs-lede); line-height:1.95; color:var(--s-tx)}
.wrap-key-list{list-style:none; counter-reset:wk; margin:0; padding:0}
.wrap-key-list li{
  counter-increment:wk; position:relative; padding:14px 0 14px 38px;
  border-top:1px solid var(--s-line);
  font-size:var(--fs-body); line-height:1.9; color:var(--s-tx);
}
.wrap-key-list li:first-child{border-top:0; padding-top:4px}
.wrap-key-list li:last-child{padding-bottom:0}
.wrap-key-list li::before{
  content:counter(wk, bengali); position:absolute; left:0; top:14px;
  font-size:var(--fs-lede); font-weight:600; line-height:1.9; color:var(--petrol-600);
}
.wrap-key-list li:first-child::before{top:4px}

.wrap-learn-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.wrap-learn-h h3{margin:0}
.wrap-count{font-size:var(--fs-caption); color:var(--s-mute); white-space:nowrap; transition:color .2s var(--ease)}
.wrap-count.is-all{color:var(--s-ok-tx); font-weight:600}
.prose .wrap-hint{margin:4px 0 14px}
.wrap-bar{height:4px; border-radius:4px; background:var(--petrol-100); overflow:hidden; margin-bottom:14px}
.wrap-bar span{display:block; height:100%; width:0; border-radius:4px; background:var(--petrol-600); transition:width .35s var(--ease)}
.wrap-items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.wrap-item{
  width:100%; text-align:start; display:flex; gap:14px; align-items:flex-start;
  padding:14px 18px; box-sizing:border-box;
  background:var(--s-surface); border:1px solid var(--s-line-mid); border-radius:var(--r-lg);
  font-family:var(--font); font-size:var(--fs-small); line-height:1.8; color:var(--s-body);
  cursor:pointer;
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.wrap-item:hover{border-color:var(--petrol-400); background:var(--s-elev)}
.wrap-item:active{transform:scale(.995)}
.wrap-item:focus-visible{outline:2px solid var(--s-ring); outline-offset:2px}
.wrap-box{
  flex:none; width:22px; height:22px; margin-top:3px; border-radius:6px;
  border:1.5px solid var(--s-line-ui); background:var(--s-elev);
  display:grid; place-items:center;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.wrap-box svg.lucide{
  width:14px; height:14px; color:#fff; opacity:0; transform:scale(.6);
  transition:opacity .15s var(--ease), transform .2s var(--ease);
}
.wrap-item.is-on{background:var(--petrol-50); border-color:var(--petrol-300); color:var(--s-tx)}
.wrap-item.is-on .wrap-box{background:var(--petrol-600); border-color:var(--petrol-600)}
.wrap-item.is-on .wrap-box svg.lucide{opacity:1; transform:none}

.wrap-note{
  padding:18px 22px; border-radius:var(--r-xl);
  border:1px dashed var(--s-line-ui);
}
.wrap-note-lock{display:flex; gap:14px; align-items:center; font-size:var(--fs-ui); color:var(--s-mute)}
.wrap-note-lock p{margin:0}
.wrap-note-lock .face{filter:grayscale(1); opacity:.55}
.wrap-note-open{display:none}
.wrap-note.is-open{
  border:1px solid rgba(188,124,62,.30);
  background:var(--s-acc-pale);
  background:color-mix(in srgb, var(--s-acc-pale) 55%, var(--s-elev));
}
.wrap-note.is-open .wrap-note-lock{display:none}
.wrap-note.is-open .wrap-note-open{display:block}
.wrap-note.is-pop .wrap-note-open{animation:wrap-in .45s var(--ease) both}
@keyframes wrap-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

@media (max-width:560px){
  .wrap{gap:24px}
  .wrap-key{padding:20px 20px 22px 24px}
  .wrap-item{padding:12px 14px}
  .wrap-note{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .wrap-item,.wrap-box,.wrap-box svg.lucide,.wrap-bar span{transition:none}
  .wrap-note.is-pop .wrap-note-open{animation:none}
}
.prose .wrap-items, .prose .wrap-key-list{margin:0; padding-inline-start:0}
.prose .wrap-items li, .prose .wrap-key-list li{margin:0}


/* concept map: one meaningful hue per topic — solid cards (white text), light solid balls */
.cmap-a0{ /* সেক্স ও জেন্ডার · petrol */
  --cm-ink:#174B66; --cm-ico:#2B6F8F; --cm-card1:#2B6F8F; --cm-card2:#2B6F8F; --cm-hov1:#256280; --cm-hov2:#256280;
  --cm-act1:#174B66; --cm-act2:#174B66; --cm-sh:rgba(43,111,143,.38); --cm-sh-soft:rgba(43,111,143,.12);
  --cm-ball1:#EEF7FB; --cm-ball2:#CFE6F2; --cm-seen:#B2D5E8; --cm-ring:#7FAFC6;
  --cm-fa:#F1F6F9; --cm-fb:#F1F6F9; --cm-glow:transparent;
}
.cmap-a1{ /* রোল ও স্টেরিওটাইপ · plum */
  --cm-ink:#4A3B7C; --cm-ico:#6A58A0; --cm-card1:#6A58A0; --cm-card2:#6A58A0; --cm-hov1:#5D4C8E; --cm-hov2:#5D4C8E;
  --cm-act1:#4A3B7C; --cm-act2:#4A3B7C; --cm-sh:rgba(106,88,160,.38); --cm-sh-soft:rgba(106,88,160,.12);
  --cm-ball1:#F6F0FB; --cm-ball2:#E3D5F2; --cm-seen:#D0BAEA; --cm-ring:#A99FC6;
  --cm-fa:#F4F2F8; --cm-fb:#F4F2F8; --cm-glow:transparent;
}
.cmap-a2{ /* পক্ষপাত ও বৈষম্য · crimson */
  --cm-ink:#7F1F28; --cm-ico:#BF4141; --cm-card1:#BF4141; --cm-card2:#BF4141; --cm-hov1:#AA3636; --cm-hov2:#AA3636;
  --cm-act1:#A02D2D; --cm-act2:#A02D2D; --cm-sh:rgba(191,65,65,.38); --cm-sh-soft:rgba(191,65,65,.12);
  --cm-ball1:#FFF1EF; --cm-ball2:#F7D2CE; --cm-seen:#EDB0AA; --cm-ring:#E08E8A;
  --cm-fa:#FDF4F3; --cm-fb:#FDF4F3; --cm-glow:transparent;
}
.cmap-a3{ /* সমতা ও ন্যায্যতা · green */
  --cm-ink:#1E634A; --cm-ico:#2E8060; --cm-card1:#2E8060; --cm-card2:#2E8060; --cm-hov1:#286D52; --cm-hov2:#286D52;
  --cm-act1:#1E634A; --cm-act2:#1E634A; --cm-sh:rgba(46,128,96,.38); --cm-sh-soft:rgba(46,128,96,.12);
  --cm-ball1:#EAF7F5; --cm-ball2:#C5E8E4; --cm-seen:#A8DCD6; --cm-ring:#85BDB0;
  --cm-fa:#F1F7F5; --cm-fb:#F1F7F5; --cm-glow:transparent;
}
.cmap-a4{ /* অন্তর্ভুক্তিমূলক শিক্ষা · magenta */
  --cm-ink:#5E1A40; --cm-ico:#B0407C; --cm-card1:#B0407C; --cm-card2:#B0407C; --cm-hov1:#983669; --cm-hov2:#983669;
  --cm-act1:#8A2B5E; --cm-act2:#8A2B5E; --cm-sh:rgba(176,64,124,.38); --cm-sh-soft:rgba(176,64,124,.12);
  --cm-ball1:#FDF0F7; --cm-ball2:#F3D0E4; --cm-seen:#E6B0CF; --cm-ring:#D68BB5;
  --cm-fa:#FBF2F7; --cm-fb:#FBF2F7; --cm-glow:transparent;
}
/* each topic card carries its own hue (the strip itself is neutral) */
.cmap-t0{--cm-ink:#174B66; --cm-ico:#2B6F8F; --cm-card1:#2B6F8F; --cm-card2:#2B6F8F; --cm-hov1:#256280; --cm-hov2:#256280; --cm-act1:#174B66; --cm-act2:#174B66; --cm-sh:rgba(43,111,143,.38); --cm-sh-soft:rgba(43,111,143,.12)}
.cmap-t1{--cm-ink:#4A3B7C; --cm-ico:#6A58A0; --cm-card1:#6A58A0; --cm-card2:#6A58A0; --cm-hov1:#5D4C8E; --cm-hov2:#5D4C8E; --cm-act1:#4A3B7C; --cm-act2:#4A3B7C; --cm-sh:rgba(106,88,160,.38); --cm-sh-soft:rgba(106,88,160,.12)}
.cmap-t2{--cm-ink:#7F1F28; --cm-ico:#BF4141; --cm-card1:#BF4141; --cm-card2:#BF4141; --cm-hov1:#AA3636; --cm-hov2:#AA3636; --cm-act1:#A02D2D; --cm-act2:#A02D2D; --cm-sh:rgba(191,65,65,.38); --cm-sh-soft:rgba(191,65,65,.12)}
.cmap-t3{--cm-ink:#1E634A; --cm-ico:#2E8060; --cm-card1:#2E8060; --cm-card2:#2E8060; --cm-hov1:#286D52; --cm-hov2:#286D52; --cm-act1:#1E634A; --cm-act2:#1E634A; --cm-sh:rgba(46,128,96,.38); --cm-sh-soft:rgba(46,128,96,.12)}
.cmap-t4{--cm-ink:#5E1A40; --cm-ico:#B0407C; --cm-card1:#B0407C; --cm-card2:#B0407C; --cm-hov1:#983669; --cm-hov2:#983669; --cm-act1:#8A2B5E; --cm-act2:#8A2B5E; --cm-sh:rgba(176,64,124,.38); --cm-sh-soft:rgba(176,64,124,.12)}
.poll-pop-card.is-term.cmap-a0,.poll-pop-card.is-term.cmap-a1,.poll-pop-card.is-term.cmap-a2,.poll-pop-card.is-term.cmap-a3,.poll-pop-card.is-term.cmap-a4{border-top:4px solid var(--cm-act1)}
.poll-pop-card.is-term .term-modal-kicker{color:var(--cm-ico)}

/* --- page.vignette · cases as tabs ---------------------------------------- */
.vig-tabs{
  display:flex; gap:8px; padding:10px; margin-top:var(--s3);
  border-radius:var(--r-xl); overflow-x:auto;
  background:#F3F6F8;
}
.vig-tab{
  position:relative; flex:1 1 0; min-width:150px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 10px 11px; border:0; border-radius:12px;
  font-family:var(--font); text-align:center; cursor:pointer;
  color:#fff;
  background:var(--cm-card1);
  box-shadow:none;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.vig-tab:hover:not(.is-active):not(.is-locked){background:var(--cm-hov1); transform:translateY(-1px)}
.vig-tab:focus-visible{outline:3px solid var(--s-ring); outline-offset:2px}
.vig-tab-ico{
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  background:#fff; color:var(--cm-ico); box-shadow:none;
}
.vig-tab-ico svg.lucide{width:18px; height:18px}
.vig-tab-txt{display:flex; flex-direction:column; gap:1px; min-width:0}
.vig-tab-n{font-size:var(--fs-micro); font-weight:500; opacity:.8}
.vig-tab-t{font-size:var(--fs-caption); font-weight:600; line-height:1.4}
.vig-tab-flag{
  position:absolute; top:6px; right:6px; width:20px; height:20px;
  display:grid; place-items:center; border-radius:50%;
  background:#fff; color:#317E47;
}
.vig-tab-flag svg.lucide{width:12px; height:12px}
.vig-tab.is-active{
  background:var(--cm-act1); color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4), 0 6px 14px -8px var(--cm-sh);
}
.vig-tab.is-active .vig-tab-ico{color:var(--cm-act2)}
.vig-tab.is-active .vig-tab-n{opacity:.85}
.vig-tab.is-locked{cursor:not-allowed; background:#8593A0; color:#fff}
.vig-tab.is-locked .vig-tab-ico{color:#8593A0}
.vig-next{margin-top:var(--s4)}
@media (max-width:560px){
  .vig-tabs{padding:8px; gap:6px}
  .vig-tab{min-width:128px; padding:10px 8px}
}
@media (prefers-reduced-motion:reduce){ .vig-tab{transition:none} .vig-tab:hover:not(.is-active):not(.is-locked){transform:none} }

/* --- module overview · চরিত্র পরিচিতি inside the story card ---------------- */
.cast{margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--s-line)}
.cast-h{margin:0 0 8px}
.cast-main{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.cast-person{display:flex; align-items:center; gap:16px; min-width:0}
.cast-txt{display:flex; flex-direction:column; min-width:0}
.cast-txt strong{font-size:var(--fs-ui); font-weight:600; color:var(--s-tx); line-height:1.5}
.cast-txt span{font-size:var(--fs-caption); color:var(--s-mute); line-height:1.5}
.cast-bio{margin:16px 0 0; font-size:var(--fs-small); color:var(--s-soft)}
.cast-tog{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:6px 0;
  background:none; border:0; cursor:pointer; font-family:var(--font);
  font-size:var(--fs-ui); font-weight:600; color:var(--s-brand-h);
}
.cast-tog:hover{color:var(--s-brand-a)}
.cast-tog:focus-visible{outline:2px solid var(--s-ring); outline-offset:3px; border-radius:6px}
.cast-tog svg.lucide{width:16px; height:16px; transition:transform .2s var(--ease)}
.cast-tog.is-open svg.lucide{transform:rotate(180deg)}
.cast-support{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px 18px}
.cast-support[hidden]{display:none}
.cast-chip{display:flex; align-items:center; gap:12px; min-width:0}
.cast-chip-t{display:flex; flex-direction:column; min-width:0; line-height:1.4}
.cast-chip-t strong{font-size:var(--fs-ui); font-weight:600; color:var(--s-tx)}
.cast-chip-t em{font-style:normal; font-size:var(--fs-micro); color:var(--s-mute)}
@media (max-width:560px){ .cast-main{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .cast-tog svg.lucide{transition:none} }