:root{
    color-scheme: dark;
    --stage:#0B1F1A;
    --text:#FFF6D8;
    --muted:#9DBBAF;
    --line:#24483D;
    --board:#11291F;
    --mint:#3DDC97;
    --mint-deep:#1F6B4F;
    --sky:#56B8F0;
    --coral:#FF6B4A;
    --gold:#FFC857;
    --choice:#15362D;
    --choice-line:#2B5A4B;
    --paper:#FFFDF6;
    --paper-ink:#1C2328;
    --paper-muted:#6B7278;
    --paper-line:#E7DFD1;
    --bone:#F3E8CF;
    --bone-line:#D6C39C;
    --skin:#F2C9A8;
    --skin-line:#D9A583;
    --muscle-neutral:#CFC7C0;
    --ok:#22A06B;
    --no:#E0533F;
  }
  html,body{height:100%;}
  [hidden]{display:none!important;}
  body{background:var(--stage);}
  *{box-sizing:border-box;}
  button{font:inherit;}
  #app{
    direction:rtl;
    font-family:'Cairo','Readex Pro','Segoe UI',Tahoma,sans-serif;
    color:var(--text);
    min-height:100%;
    display:grid;
    grid-template-columns:minmax(300px,34%) 1fr;
    gap:28px;
    padding-inline:24px;
    padding-block:22px;
  }
  .en{font-family:'Readex Pro','Segoe UI',sans-serif;unicode-bidi:isolate;}
  :focus-visible{outline:3px solid var(--mint);outline-offset:2px;}

  /* ---------- Tutor side ---------- */
  .tutor{display:flex;flex-direction:column;gap:18px;min-height:0;}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--muted);}
  .brand svg{width:26px;height:26px;}
  .pills{display:flex;gap:6px;align-items:center;}
  .pill{background:#15362D;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:13.5px;font-weight:600;display:flex;gap:5px;align-items:center;font-variant-numeric:tabular-nums;color:var(--text);}
  .pill.bump{animation:bump .5s ease;}
  @keyframes bump{40%{transform:scale(1.25);border-color:var(--gold);}}
  button.pill{cursor:pointer;}
  button.pill[aria-pressed="true"]{border-color:var(--mint);color:var(--mint);}

  #caption{flex:1;min-height:150px;cursor:pointer;padding-top:18px;}
  #caption .line{
    font-size:clamp(20px,2.05vw,27px);
    line-height:1.65;
    font-weight:500;
    margin:0 0 16px;
    text-wrap:pretty;
    animation:lineIn .35s ease both;
  }
  #caption .line b{color:var(--gold);font-weight:600;}
  #caption .line .en{color:var(--mint);font-weight:600;}
  @keyframes lineIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

  #choices{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
  .choice{
    background:var(--choice);
    border:1.5px solid var(--choice-line);
    color:var(--text);
    border-radius:18px;
    padding:15px 22px;
    font-size:clamp(16px,1.55vw,19px);
    font-weight:500;
    text-align:start;
    cursor:pointer;
    max-width:100%;
    line-height:1.5;
    animation:lineIn .3s ease both;
    transition:border-color .15s, background .15s;
  }
  .choice:hover{border-color:var(--mint);background:#1A4236;}

  .bottom{display:flex;flex-direction:column;gap:10px;}
  .cam{
    position:relative;
    aspect-ratio:4/3;
    max-height:260px;
    border-radius:20px;
    overflow:hidden;
    background:#15362D;
    border:1px solid var(--line);
  }
  .cam video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);}
  .cam-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px;}
  .avatar{width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,var(--mint),var(--sky));display:grid;place-items:center;font-size:34px;font-weight:700;color:#06231A;}
  .cam-name{font-weight:600;font-size:16px;}
  .cam-note{font-size:11.5px;color:var(--muted);}
  .cam-actions{position:absolute;bottom:10px;inset-inline-start:10px;display:flex;gap:6px;}
  .mini{
    background:rgba(11,31,26,.8);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:12px;
    padding:7px 11px;
    font-size:13px;
    cursor:pointer;
    backdrop-filter:blur(6px);
  }
  .mini:hover{border-color:var(--mint);}

  #qa{background:#15362D;border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;}
  #qa form{display:flex;gap:8px;}
  #qa input{flex:1;background:#0B1F1A;border:1px solid var(--line);border-radius:12px;color:var(--text);padding:10px 12px;font-family:inherit;font-size:14px;min-width:0;}
  #qa .send{background:var(--mint-deep);color:#fff;border:0;border-radius:12px;padding:0 14px;cursor:pointer;font-weight:600;}
  #qa .ans{font-size:14.5px;line-height:1.75;color:#F3EBD0;}
  #qa .ans:empty{display:none;}

  /* ---------- Board ---------- */
  #board{
    position:relative;
    background:var(--board);
    border:1px solid #24483D;
    border-radius:26px;
    overflow:hidden;
    min-height:560px;
  }
  .scene{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    padding:28px;
    animation:sceneIn .4s ease both;
    overflow:auto;
  }
  @keyframes sceneIn{from{opacity:0;transform:scale(.985);}to{opacity:1;transform:none;}}
  .sc-paper{background:var(--paper);color:var(--paper-ink);}
  .sc-splash{background:radial-gradient(120% 90% at 50% 0%,#DDF8EC 0%,#FFFDF6 55%,#FFF6D8 100%);flex-direction:column;gap:22px;color:#06231C;}
  .sc-splash .logo{width:min(190px,40%);height:auto;}
  .sc-splash .sub{font-weight:600;font-size:15px;opacity:.8;letter-spacing:.02em;}
  .start-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  .btn-start{background:#1F6B4F;color:#fff;border:0;border-radius:16px;padding:15px 26px;font-size:18px;font-weight:600;cursor:pointer;}
  .btn-start.alt{background:#fff;color:#1F6B4F;box-shadow:inset 0 0 0 2px #3DDC9799;}
  .btn-start:hover{filter:brightness(1.1);}

  .sc-unlock{background:#0B1F1A;}
  .unlock{
    width:min(420px,86%);
    border:2px solid var(--sky);
    border-radius:22px;
    overflow:hidden;
    background:#0B1F1A;
    animation:pop .55s cubic-bezier(.2,1.4,.4,1) both;
  }
  @keyframes pop{from{transform:scale(.7);opacity:0;}to{transform:none;opacity:1;}}
  .unlock-top{background:var(--sky);color:#fff;text-align:center;font-weight:600;padding:11px;font-size:18px;direction:ltr;}
  .unlock-art{aspect-ratio:1/1;margin:14px;border-radius:14px;display:grid;place-items:center;font-size:clamp(70px,12vw,120px);}
  .unlock-title{padding:0 18px 16px;font-size:24px;font-weight:600;direction:ltr;text-align:left;}

  /* arm */
  .arm-wrap{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:stretch;gap:14px;}
  .arm-host{width:100%;}
  .arm{width:100%;height:auto;display:block;}
  .arm .bone{fill:var(--bone);stroke:var(--bone-line);stroke-width:2;}
  .arm .skin-blob{fill:var(--skin);opacity:.45;}
  .arm .skin{fill:var(--skin);stroke:var(--skin-line);stroke-width:2;}
  .arm .tendon{stroke:#E6D7BC;stroke-width:5;stroke-linecap:round;}
  .arm .muscle{stroke:#A93423;stroke-width:2;}
  .arm.tapping .muscle{cursor:pointer;stroke:var(--mint-deep);stroke-width:3.5;stroke-dasharray:7 6;animation:dash 1s linear infinite;}
  @keyframes dash{to{stroke-dashoffset:-26;}}
  .arm .muscle.ok{stroke:var(--ok);stroke-width:6;stroke-dasharray:none;animation:none;}
  .arm .muscle.no{stroke:var(--no);stroke-width:6;stroke-dasharray:none;animation:none;}
  .arm .joint.pulse{fill:#FFD66B;stroke:#E0A21B;stroke-width:4;animation:jp 1.1s ease-in-out infinite;}
  @keyframes jp{50%{stroke-width:14;stroke-opacity:.35;}}
  .arm .box{fill:#C98B4B;stroke:#8C5A2B;stroke-width:3;}
  .arm .box-line{stroke:#8C5A2B;stroke-width:2;}
  .arm .box-t{fill:#FFF6E8;font:700 16px 'Readex Pro',sans-serif;}
  .legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;direction:ltr;}
  .chip{background:#fff;border:1px solid var(--paper-line);border-radius:999px;padding:7px 13px;font-size:14px;}
  .chip em{font-style:normal;font-weight:600;}
  .chip.c-in em{color:#C23A27;}
  .chip.c-out em{color:#2E7BC4;}
  .slider-row{display:flex;align-items:center;gap:14px;direction:ltr;font-weight:600;font-size:15px;color:var(--paper-muted);background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:12px 16px;}
  .slider-row input{flex:1;accent-color:var(--coral);height:30px;cursor:pointer;min-width:0;}
  .slider-row input:disabled{opacity:.45;cursor:default;}

  /* sort game */
  .sc-space{
    background:
      radial-gradient(1.6px 1.6px at 12% 18%,#ffffffb0 50%,transparent 51%),
      radial-gradient(1.4px 1.4px at 78% 12%,#ffffff90 50%,transparent 51%),
      radial-gradient(1.8px 1.8px at 34% 72%,#ffffff80 50%,transparent 51%),
      radial-gradient(1.2px 1.2px at 88% 64%,#ffffffa0 50%,transparent 51%),
      radial-gradient(1.5px 1.5px at 56% 36%,#ffffff70 50%,transparent 51%),
      radial-gradient(1.3px 1.3px at 20% 88%,#ffffff90 50%,transparent 51%),
      radial-gradient(1.6px 1.6px at 66% 90%,#ffffff80 50%,transparent 51%),
      radial-gradient(ellipse at 50% 0%,#1B2A55 0%,#0C1226 60%,#080B17 100%);
    flex-direction:column;justify-content:space-between;
  }
  .sort-top{width:100%;display:flex;justify-content:space-between;align-items:center;}
  .dots{display:flex;gap:7px;}
  .dots i{width:13px;height:13px;border-radius:50%;background:#2A3350;display:block;}
  .dots i.ok{background:var(--ok);}
  .dots i.no{background:var(--no);}
  .score{background:#141C33;border:1px solid #2B3963;border-radius:14px;padding:8px 14px;font-weight:600;font-size:18px;font-variant-numeric:tabular-nums;}
  .fact-card{
    background:#fff;color:var(--paper-ink);
    border-radius:22px;
    padding:26px 30px;
    width:min(480px,92%);
    text-align:center;
    box-shadow:0 20px 50px #0008;
    transition:transform .55s cubic-bezier(.5,0,.7,.4), opacity .55s;
  }
  .fact-card.in{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both;}
  .fact-card.fly-m{transform:translate(28%,150%) scale(.3);opacity:0;}
  .fact-card.fly-b{transform:translate(-28%,150%) scale(.3);opacity:0;}
  .fact-card.shake{animation:shake .45s;}
  @keyframes shake{20%,60%{transform:translateX(-10px);}40%,80%{transform:translateX(10px);}}
  .fact-en{font-size:clamp(22px,2.6vw,32px);font-weight:600;direction:ltr;}
  .fact-ar{font-size:16px;color:var(--paper-muted);margin-top:6px;}
  .sort-note{min-height:28px;font-size:17px;text-align:center;}
  .bins{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(560px,100%);}
  .bin{
    border-radius:22px;border:2px dashed;padding:18px 10px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:2px;
    color:#fff;transition:transform .12s, background .15s;
  }
  .bin:hover{transform:translateY(-3px);}
  .bin:active{transform:scale(.97);}
  .bin-m{background:#3A1712;border-color:#FF7A5E;}
  .bin-b{background:#2E2819;border-color:#EAD7AE;}
  .bin-ico{font-size:34px;}
  .bin b{font-size:20px;direction:ltr;}
  .bin small{font-size:13px;opacity:.75;}

  /* box */
  .box-wrap{width:100%;max-width:820px;display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:center;}
  .box-ctrl{display:flex;flex-direction:column;gap:14px;}
  .q-en{font-size:19px;font-weight:600;direction:ltr;text-align:left;line-height:1.5;}
  .seg-row{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:9px;}
  .seg-row > span{display:flex;flex-direction:column;}
  .seg-row b{direction:ltr;text-align:left;font-size:16px;}
  .seg-row small{color:var(--paper-muted);font-size:13px;}
  .seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;direction:ltr;}
  .seg button{border:1.5px solid var(--paper-line);background:var(--paper);color:var(--paper-ink);border-radius:12px;padding:10px;cursor:pointer;font-weight:600;}
  .seg button.on{border-color:var(--mint-deep);background:#DDF3EA;color:#0D5C43;}
  .btn-go{background:var(--mint-deep);color:#fff;border:0;border-radius:14px;padding:14px 22px;font-size:17px;font-weight:600;cursor:pointer;}
  .btn-go:disabled{opacity:.4;cursor:default;}

  /* explain */
  .ex-wrap{width:min(600px,100%);display:flex;flex-direction:column;gap:14px;}
  .ex-q{font-size:clamp(26px,3vw,38px);font-weight:700;direction:ltr;text-align:left;}
  .ex-sub{color:var(--paper-muted);font-size:15px;}
  .ex-wrap textarea{
    width:100%;border:2px solid var(--paper-line);border-radius:18px;padding:16px;
    font-family:inherit;font-size:19px;background:#fff;color:var(--paper-ink);resize:vertical;line-height:1.6;
  }
  .ex-wrap textarea:focus{outline:none;border-color:var(--mint-deep);}
  .ex-wrap[data-v="correct"] textarea{border-color:var(--ok);}
  .ex-wrap[data-v="misconception"] textarea{border-color:var(--no);}
  .ex-wrap[data-v="partial"] textarea{border-color:var(--gold);}
  .ex-status{min-height:24px;color:var(--paper-muted);font-size:15px;}
  .think i{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-inline-start:4px;animation:th 1s infinite;}
  .think i:nth-child(2){animation-delay:.15s;}
  .think i:nth-child(3){animation-delay:.3s;}
  @keyframes th{50%{transform:translateY(-5px);opacity:.4;}}
  .model{background:#fff;border:1px solid var(--paper-line);border-inline-start:5px solid var(--mint-deep);border-radius:12px;padding:12px 14px;color:var(--paper-ink);font-size:16px;}
  .model bdi{direction:ltr;}

  /* name */
  .name-wrap{width:min(460px,100%);display:flex;flex-direction:column;gap:14px;align-items:stretch;text-align:center;}
  .name-wrap .big{font-size:30px;font-weight:700;}
  .name-wrap input{font-family:inherit;font-size:30px;text-align:center;border:2px solid var(--paper-line);border-radius:18px;padding:14px;background:#fff;color:var(--paper-ink);}
  .name-wrap input:focus{outline:none;border-color:var(--mint-deep);}

  /* summary */
  .sc-summary{background:linear-gradient(160deg,#0F2A21 0%,#0B1424 100%);}
  .sum{width:min(560px,100%);display:flex;flex-direction:column;gap:16px;}
  .sum h2{margin:0;font-size:26px;}
  .sum h2 .en{color:var(--mint);}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .stat{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;padding:14px;text-align:center;}
  .stat .n{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;}
  .stat .l{font-size:12.5px;color:var(--muted);}
  .skills{display:flex;flex-wrap:wrap;gap:7px;}
  .sk{border-radius:999px;padding:6px 12px;font-size:13px;border:1px solid;}
  .sk.m{border-color:#2E8F66;background:#12382A;}
  .sk.h{border-color:#8F7A2E;background:#332C12;}
  .sk.r{border-color:#8F3A2E;background:#3A1712;}
  .next{display:flex;align-items:center;gap:14px;border:1.5px dashed #ffffff33;border-radius:18px;padding:14px 16px;}
  .next .ic{font-size:30px;}
  .next b{display:block;direction:ltr;text-align:right;}
  .next small{color:var(--muted);}

  /* parent modal */
  #parent{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px;z-index:20;}
  #parent[hidden]{display:none!important;}
  .pbox{background:#fff;color:var(--paper-ink);border-radius:22px;width:min(640px,100%);max-height:90%;overflow:auto;padding:22px;direction:rtl;font-family:'Readex Pro',sans-serif;}
  .pbox h3{margin:0 0 4px;font-size:20px;}
  .pbox .meta{color:var(--paper-muted);font-size:13.5px;margin-bottom:14px;}
  .ptable{overflow-x:auto;}
  .pbox table{width:100%;border-collapse:collapse;font-size:14px;}
  .pbox th,.pbox td{text-align:start;padding:9px 6px;border-bottom:1px solid var(--paper-line);vertical-align:top;}
  .pbox th{font-size:12px;color:var(--paper-muted);font-weight:600;}
  .decision{margin-top:14px;background:#EEF8F3;border:1px solid #BFE5D3;border-radius:14px;padding:12px 14px;font-size:14.5px;line-height:1.7;}
  .decision.warn{background:#FFF4E5;border-color:#F3D3A2;}
  .prow{display:flex;justify-content:space-between;gap:8px;margin-top:16px;flex-wrap:wrap;}
  .pbtn{border:1.5px solid var(--paper-line);background:#fff;border-radius:12px;padding:9px 14px;cursor:pointer;color:var(--paper-ink);}
  .pbtn.dark{background:var(--paper-ink);color:#fff;border-color:var(--paper-ink);}

  #toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:#1A222B;border:1px solid var(--line);color:var(--text);padding:10px 16px;border-radius:12px;font-size:14px;z-index:30;direction:rtl;font-family:'Readex Pro',sans-serif;max-width:calc(100% - 32px);}

  @media (max-width:880px){
    #app{grid-template-columns:1fr;gap:16px;padding-inline:16px;}
    #caption{min-height:auto;padding-top:4px;}
    .cam{display:none;}
    #board{min-height:520px;}
    .box-wrap{grid-template-columns:1fr;}
    .scene{padding:18px;}
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  }

/* ===== v3: lesson engine components ===== */
.fact-card.fly{transform:translateY(150%) scale(.3);opacity:0;}
.bin-0{background:#3A1712;border-color:#FF7A5E;}
.bin-1{background:#2E2819;border-color:#EAD7AE;}
.bin-2{background:#152A3A;border-color:#5AAEFF;}
.bins{width:min(640px,100%);}
.dots.dark i{background:#E3DACB;}
.dots.dark i.done{background:var(--mint-deep);}

/* concept card */
.cc{width:min(760px,100%);display:flex;flex-direction:column;gap:14px;}
.cc-head{display:flex;align-items:center;gap:14px;}
.cc-ic{font-size:44px;width:70px;height:70px;border-radius:20px;background:#fff;border:1px solid var(--paper-line);display:grid;place-items:center;flex:0 0 auto;}
.cc-head h2{margin:0;font-size:clamp(24px,2.6vw,32px);direction:ltr;text-align:right;}
.cc-ar{color:var(--paper-muted);font-size:16px;}
.cc-def{background:#fff;border:1px solid var(--paper-line);border-inline-start:6px solid var(--mint-deep);border-radius:16px;padding:14px 16px;font-size:clamp(17px,1.7vw,21px);line-height:1.55;direction:ltr;text-align:left;}
.cc-lbl{display:block;font-size:12.5px;font-weight:700;color:#B0452F;margin-bottom:4px;}
.cc-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.cc-points li{background:#fff;border:1px solid var(--paper-line);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:2px;}
.cc-points li bdi{direction:ltr;text-align:left;font-size:17px;font-weight:500;}
.cc-points li small{color:var(--paper-muted);font-size:14px;}
.cc-care{background:#FFF4E2;border:1px solid #F1D29E;border-radius:14px;padding:11px 14px;font-size:15.5px;}
.cc-care bdi{direction:ltr;}
.cc-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.cc-col{background:#fff;border:1px solid var(--paper-line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;}
.cc-col b{direction:ltr;text-align:left;font-size:18px;color:#0D5C43;}
.cc-col small{color:var(--paper-muted);}
.cc-col ul{margin:6px 0 0;padding-inline-start:18px;direction:ltr;text-align:left;display:flex;flex-direction:column;gap:4px;font-size:15.5px;}
.cc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;}
.cc-card{background:#fff;border:1px solid var(--paper-line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:5px;}
.cc-card b{direction:ltr;text-align:left;font-size:19px;}
.cc-card small{color:var(--paper-muted);}
.cc-card .k{font-size:14.5px;direction:ltr;text-align:left;}
.cc-card .k.fn{color:#0D5C43;font-weight:600;}

/* quiz */
.qz{width:min(680px,100%);display:flex;flex-direction:column;gap:16px;}
.qz-top{display:flex;justify-content:space-between;align-items:center;}
.qz-n{color:var(--paper-muted);font-weight:600;font-variant-numeric:tabular-nums;}
.qz-q{font-size:clamp(21px,2.3vw,28px);font-weight:600;line-height:1.45;direction:ltr;text-align:left;}
.qz-opts{display:flex;flex-direction:column;gap:10px;}
.qz-o{display:flex;gap:12px;align-items:center;background:#fff;border:2px solid var(--paper-line);border-radius:16px;padding:13px 16px;font-size:17.5px;cursor:pointer;color:var(--paper-ink);direction:ltr;text-align:left;transition:border-color .15s,transform .1s;}
.qz-o:hover{border-color:var(--mint-deep);}
.qz-o:active{transform:scale(.99);}
.qz-o.ok{border-color:var(--ok);background:#E3F5EC;}
.qz-o.no{border-color:var(--no);background:#FBE9E6;opacity:.75;animation:shake .4s;}
.qz-l{width:30px;height:30px;border-radius:50%;background:var(--paper);border:1px solid var(--paper-line);display:grid;place-items:center;font-weight:700;flex:0 0 auto;}
.qz-why{background:#EEF8F3;border:1px solid #BFE5D3;border-radius:12px;padding:10px 14px;font-size:15.5px;}

/* tap map */
.tm{width:100%;max-width:820px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;align-items:center;}
.tm-svg{width:100%;max-height:72vh;height:auto;}
.skb-line{stroke:var(--bone-line);}
.skb-fill{fill:var(--bone);stroke:var(--bone-line);stroke-width:3;}
.skb-hole{fill:#5C4A33;}
.skb-joint circle{fill:#F7EFD9;stroke:#B89A62;stroke-width:2;}
.sk-bones .skb-line{stroke:#E9DBB9;}
.tm-spot{cursor:pointer;}
.tm-spot circle{fill:transparent;stroke:var(--mint-deep);stroke-width:2.5;stroke-dasharray:6 5;}
.tm-spot:hover circle,.tm-spot:focus circle{fill:#1F8F7422;}
.tm-spot .tm-lbl{font:600 15px 'Readex Pro',sans-serif;fill:#0D5C43;opacity:0;}
.tm-spot.ok circle{fill:#22A06B33;stroke:var(--ok);stroke-dasharray:none;stroke-width:4;}
.tm-spot.ok .tm-lbl{opacity:1;}
.tm-spot.no circle{stroke:var(--no);fill:#E0533F33;stroke-dasharray:none;}
.tm-spot.hint circle{stroke:var(--gold);stroke-width:5;animation:jp 1s infinite;}
.tm-side{display:flex;flex-direction:column;gap:12px;}
.tm-title{font-size:22px;font-weight:700;direction:ltr;text-align:left;}
.tm-ask{background:#fff;border:2px solid var(--mint-deep);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:2px;direction:ltr;text-align:left;}
.tm-ask span{color:var(--paper-muted);font-size:13px;font-weight:600;}
.tm-ask b{font-size:24px;}
.tm-ask small{color:var(--paper-muted);font-size:15px;direction:rtl;text-align:left;}
.tm-found{display:flex;flex-wrap:wrap;gap:6px;direction:ltr;}

/* match */
.mt{width:min(760px,100%);display:flex;flex-direction:column;gap:14px;}
.mt-title{font-size:24px;font-weight:700;direction:ltr;text-align:left;}
.mt-cols{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;direction:ltr;}
.mt-col{display:flex;flex-direction:column;gap:10px;}
.mt-b{background:#fff;border:2px solid var(--paper-line);border-radius:16px;padding:14px;font-size:17px;cursor:pointer;color:var(--paper-ink);text-align:left;min-height:62px;}
.mt-b.r{font-size:15.5px;}
.mt-b:hover{border-color:var(--sky);}
.mt-b.sel{border-color:var(--sky);background:#E6F2FF;}
.mt-b.ok{border-color:var(--ok);background:#E3F5EC;cursor:default;}
.mt-b.no{animation:shake .4s;border-color:var(--no);}
.mt-hint{color:var(--paper-muted);font-size:14px;}

/* lesson map */
.sc-map{background:radial-gradient(ellipse at 50% 0%,#15253A 0%,#0B111A 70%);align-items:flex-start;}
.mp{width:min(760px,100%);display:flex;flex-direction:column;gap:14px;padding-block:6px;}
.mp-title{color:var(--muted);font-weight:600;font-size:14px;letter-spacing:.03em;direction:ltr;text-align:left;}
.mp-ch{background:#ffffff0a;border:1px solid #ffffff1a;border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:12px;}
.mp-ch.soon{opacity:.45;padding:10px 14px;}
.mp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mp-h span{font-size:24px;}
.mp-h b{direction:ltr;}
.mp-h small{color:var(--muted);}
.mp-path{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;}
.mp-node{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:#121A24;border:1.5px solid #2A3645;border-radius:16px;padding:12px;color:var(--text);cursor:pointer;text-align:start;transition:transform .12s,border-color .15s;}
.mp-node:hover:not(:disabled){transform:translateY(-2px);border-color:var(--mint);}
.mp-node:disabled{opacity:.45;cursor:default;}
.mp-node.rec{border-color:var(--gold);box-shadow:0 0 0 3px #FFC85733;}
.mp-e{font-size:28px;}
.mp-t{display:flex;flex-direction:column;direction:ltr;text-align:left;width:100%;}
.mp-t b{font-size:12px;color:var(--muted);}
.mp-t bdi{font-size:15.5px;font-weight:600;}
.mp-s{font-size:12.5px;color:var(--muted);}
.st-mastered{border-color:#2E8F66;}
.st-review{border-color:#C9832A;}
.pbox h4{margin:16px 0 6px;font-size:16px;}
.pbox h4 small{color:var(--paper-muted);font-weight:400;}
@media (max-width:880px){ .tm{grid-template-columns:1fr;} .cc-cols{grid-template-columns:1fr;} .mt-cols{grid-template-columns:1fr;} }

/* ===== v4: slider, order, seed lab, germination lab ===== */
.sl{width:min(700px,100%);display:flex;flex-direction:column;gap:12px;}
.sl-head{display:flex;flex-direction:column;}
.sl-head b{font-size:24px;direction:ltr;text-align:left;}
.sl-head small{color:var(--paper-muted);}
.sl-art{position:relative;height:clamp(170px,28vh,260px);border-radius:22px;display:grid;place-items:center;transition:background .5s;overflow:hidden;border:1px solid var(--paper-line);}
.sl-emoji{font-size:clamp(64px,10vw,110px);letter-spacing:8px;}
.sl-emoji.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1);}
.sl-lbl{position:absolute;top:12px;left:14px;background:#ffffffd9;border-radius:12px;padding:6px 12px;display:flex;flex-direction:column;direction:ltr;text-align:left;}
.sl-lbl b{font-size:17px;}
.sl-lbl small{color:var(--paper-muted);direction:rtl;}
.sl-cap{background:#fff;border:1px solid var(--paper-line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-height:84px;}
.sl-en{direction:ltr;text-align:left;font-size:17px;font-weight:500;}
.sl-tr{color:var(--paper-muted);font-size:15px;}
.sl-dots{display:flex;gap:8px;justify-content:center;}
.sl-dots i{width:12px;height:12px;border-radius:50%;background:#E3DACB;display:block;}
.sl-dots i.on{background:var(--mint-deep);}

.od{width:min(700px,100%);display:flex;flex-direction:column;gap:12px;}
.od-title{font-size:22px;font-weight:700;direction:ltr;text-align:left;}
.od-hint{color:var(--paper-muted);font-size:14px;}
.od-done{margin:0;padding-inline-start:26px;direction:ltr;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:10px;}
.od-done li{background:#E3F5EC;border:1px solid #B9E3CB;border-radius:12px;padding:8px 12px;font-size:16px;animation:lineIn .3s ease;}
.od-pool{display:flex;flex-wrap:wrap;gap:8px;direction:ltr;}
.od-b{background:#fff;border:2px solid var(--paper-line);border-radius:14px;padding:11px 14px;font-size:16px;cursor:pointer;color:var(--paper-ink);}
.od-b:hover{border-color:var(--sky);}
.od-b.no{animation:shake .4s;border-color:var(--no);}

.sd{width:100%;max-width:860px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px;align-items:center;}
.sd-svg{width:100%;height:auto;}
.sd-inner{fill:#F3E6C8;stroke:#D8C29A;stroke-width:3;}
.sd-coat{fill:#8E3B2F;stroke:#5E2219;stroke-width:3;cursor:pointer;transition:transform 1s ease,opacity 1s;transform-box:fill-box;transform-origin:center;}
.sd-coat:hover{filter:brightness(1.12);}
.sd-coat{animation:coatPulse 1.4s ease-in-out infinite;}
.sd-coat.peel{animation:none;transform:translate(150px,80px) rotate(35deg) scale(.4);opacity:0;cursor:default;pointer-events:none;transition:transform .9s ease,opacity .9s ease .3s;}
@keyframes coatPulse{0%,100%{stroke:#5E2219;stroke-width:3;}50%{stroke:#FFC857;stroke-width:7;}}
.sd-whole{cursor:pointer;}
.sd-tap{cursor:pointer;animation:tapBob 1s ease-in-out infinite;transform-box:fill-box;}
@keyframes tapBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.sd-inner.shine{fill:#FFF3D6;stroke:#FFC857;stroke-width:5;transition:fill .6s,stroke .6s;}
.sd-peel,.sd-split{font-size:19px;padding:15px 22px;box-shadow:0 0 0 0 #179A7388;animation:goPulse 1.6s infinite;}
@keyframes goPulse{0%{box-shadow:0 0 0 0 #179A7388;}70%{box-shadow:0 0 0 14px #179A7300;}100%{box-shadow:0 0 0 0 #179A7300;}}
.sd-tag{font:600 16px 'Readex Pro',sans-serif;fill:#5E2219;}
.sd-halves{transition:opacity .6s;}
.sd-cot ellipse{fill:#F4E8CC;stroke:#D2BB8C;stroke-width:3;cursor:pointer;}
.sd-cot:hover ellipse{fill:#F8EFD9;}
.sd-cot.ok ellipse{stroke:var(--ok);stroke-width:6;}
.sd-cot.no ellipse,.sd-emb.no .sd-hit{stroke:var(--no);stroke-width:5;}
.sd-emb{cursor:pointer;}
.sd-emb path{fill:none;stroke:#3F9B4A;stroke-width:5;stroke-linecap:round;}
.sd-leaf{fill:#6CC36F!important;stroke:#3F9B4A!important;stroke-width:2!important;}
.sd-hit{fill:transparent;stroke:transparent;stroke-width:3;}
.sd-emb.ok .sd-hit{stroke:var(--ok);stroke-width:5;}
.io{width:min(760px,100%);display:flex;flex-direction:column;gap:10px;}
.io-sub{color:var(--paper-muted);}
.io-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.io-card{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.io-card b{direction:ltr;}
.io-card small{color:var(--paper-muted);}
.io-svg{width:min(180px,100%);height:auto;}
.io-cot{fill:#F4E8CC;stroke:#D2BB8C;stroke-width:3;transition:fill 1.6s ease;}
.io-cot.blue{fill:#1F2A6E;}
.io-cot.faint{fill:#DCDDEA;}
.io-sprout{fill:none;stroke:#3F9B4A;stroke-width:5;stroke-linecap:round;}

.lab{width:min(820px,100%);display:flex;flex-direction:column;gap:12px;}
.lab-h{display:flex;flex-direction:column;}
.lab-h b{font-size:clamp(20px,2.2vw,26px);direction:ltr;text-align:left;}
.lab-h small{color:var(--paper-muted);font-size:15px;}
.lab-cups{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.lab-cup{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:8px;align-items:center;}
.cup-host{width:100%;display:flex;justify-content:center;}
.cup-svg{width:min(160px,100%);height:auto;}
.cup-body{fill:#EAF4FB;fill-opacity:.55;stroke:#8FAAC0;stroke-width:3;}
.cup-cotton{fill:#fff;stroke:#D8D8D8;stroke-width:2;}
.cup-water{fill:#5AAEFF;fill-opacity:.35;}
.cup-seed{fill:#8E3B2F;stroke:#5E2219;stroke-width:1.5;}
.cup-fridge{fill:#DDF0FF;stroke:#9CC9EE;stroke-width:3;}
.cup-env{font-size:22px;}
.cup-lbl{font:700 18px 'Readex Pro',sans-serif;fill:#44525C;}
.sprout path:first-child{fill:none;stroke:#3F9B4A;stroke-width:4;stroke-linecap:round;}
.sprout-leaf{fill:#6CC36F;stroke:#3F9B4A;stroke-width:1.5;}
.sprout{transform-box:fill-box;transform-origin:bottom;animation:grow 1.2s ease both;}
@keyframes grow{from{transform:scaleY(0);opacity:0;}to{transform:none;opacity:1;}}
.lab-ctrl{width:100%;display:flex;flex-direction:column;gap:6px;}
.lab-ctrl.locked{opacity:.55;}
.lab-row{display:flex;flex-direction:column;gap:4px;direction:ltr;}
.lab-row > span{font-size:13px;font-weight:600;color:var(--paper-muted);}
.lab-row .seg button{padding:7px;font-size:13.5px;}
.lab-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.lab-days{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;}
.pr-cups{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.pr-cup{background:#fff;border:1px solid var(--paper-line);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:6px;align-items:center;}
.pr-chips{display:flex;flex-direction:column;gap:2px;font-size:12.5px;direction:ltr;text-align:left;width:100%;}
.pr-cup .seg{width:100%;grid-template-columns:1fr;direction:rtl;}
.pr-cup .seg button{font-size:13px;padding:7px;}
.pr-res{min-height:20px;font-size:13.5px;}
.okc{color:var(--ok);} .noc{color:var(--no);}
@media (max-width:880px){ .sd{grid-template-columns:1fr;} .pr-cups{grid-template-columns:1fr 1fr;} .io-row{grid-template-columns:1fr;} }

/* ===== v5: Package 3 (chapters 4 + 5) ===== */
.tm-spot .tm-lbl{paint-order:stroke;stroke:#FBF8F2;stroke-width:5px;stroke-linejoin:round;}
/* flowers */
.fl-petal{fill:#FFD23F;stroke:#E0A800;stroke-width:2;}
.fl-vein{stroke:#F0B400;stroke-width:1.5;opacity:.6;}
.fl-sepal{fill:#4E9F3D;stroke:#2F6E24;stroke-width:1.5;}
.fl-stem{fill:none;stroke:#4E9F3D;stroke-width:8;stroke-linecap:round;}
.fl-swell{fill:#5DA33B;stroke:#2F6E24;stroke-width:2;}
.fl-stripe{fill:none;stroke:#8CCB5E;stroke-width:3;stroke-linecap:round;}
.fl-stamen{fill:#E39B2B;stroke:#B06F12;stroke-width:1.2;}
.fl-pollen{fill:#FFF3A6;}
.fl-pistil{fill:#7BBF4A;stroke:#3E7A22;stroke-width:2;}
.fl-tip{fill:#9ED36A;stroke:#3E7A22;stroke-width:2;}
.dg-cap{font:600 18px 'Readex Pro',sans-serif;fill:#44525C;}
/* microscope */
.mc-body{fill:#F1E7D6;stroke:#B9A88C;stroke-width:3;}
.mc-arm{fill:none;stroke:#B9A88C;stroke-width:44;stroke-linecap:round;}
.mc-arm-in{fill:none;stroke:#F1E7D6;stroke-width:38;stroke-linecap:round;}
.mc-dark{fill:#2C3136;stroke:#15191C;stroke-width:2;}
.mc-glass{fill:#9FD3F5;}
.mc-obj rect{fill:#C9CED3;stroke:#7D858C;stroke-width:1.5;}
.mc-slide{fill:#CFEAFB;stroke:#7FB3D6;stroke-width:1.5;}
.mc-clip{stroke:#9AA3AB;stroke-width:5;stroke-linecap:round;}
.mc-hole{fill:#FFF6C9;}
.mc-knob{fill:#555D64;stroke:#1C2023;stroke-width:2;stroke-dasharray:4 3;}
.mc-fork{stroke:#8C949B;stroke-width:6;}
.mc-mirror{fill:#DDE6EE;stroke:#7D858C;stroke-width:3;}
.mc-shine{fill:#fff;opacity:.8;}
/* growth lab pots */
.pot-svg{width:min(170px,100%);height:auto;}
.pot-body{fill:#D8744A;stroke:#A4502D;stroke-width:3;}
.pot-rim{fill:#E58A5E;stroke:#A4502D;stroke-width:3;}
.pot-soil{fill:#5C3B26;}
.pot-stem{fill:none;stroke-linecap:round;}
.pot-box{fill:#C9A06A;stroke:#8E6A3C;stroke-width:3;}
.pot-box-in{fill:#8E6A3C;opacity:.35;}
.pot-ruler{fill:#FFF6DA;stroke:#C8B27A;stroke-width:1.5;}
.pot-tick{stroke:#8E7B45;stroke-width:1.2;}
.pot-cm{font:700 14px 'Readex Pro',sans-serif;fill:#6B5A28;}
.pot-plant{transform-box:fill-box;transform-origin:bottom center;}
.pot-plant.grow{animation:grow 1.2s ease both;}
.lab-res{font-size:13.5px;direction:ltr;text-align:left;width:100%;display:flex;flex-direction:column;gap:3px;}
.lab-res span{background:var(--paper);border-radius:8px;padding:4px 8px;}
.lab-res .good{color:#11663F;background:#E3F5EC;}
.lab-res .bad{color:#9C2F20;background:#FBE9E6;}
/* microscope lab */
.ms{width:min(840px,100%);display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:center;}
.ms-view{position:relative;aspect-ratio:1;width:min(360px,100%);margin:auto;border-radius:50%;overflow:hidden;border:14px solid #2C3136;box-shadow:0 0 0 4px #15191C, inset 0 0 40px #0008;background:#0B0D0F;}
.ms-field{position:absolute;inset:0;transition:filter .25s ease, background .4s ease;}
.ms-grains{position:absolute;left:50%;top:50%;transition:transform .45s ease;}
.ms-grain{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE680,#E6B422 60%,#B8860B);box-shadow:inset -3px -3px 0 #0002;}
.ms-grain::after{content:'';position:absolute;inset:22%;border-radius:50%;border:2px dotted #B8860B88;}
.ms-mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;}
.ms-mark i{width:26px;height:26px;border:2px dashed #ffffff66;border-radius:50%;}
.ms-side{display:flex;flex-direction:column;gap:10px;}
.ms-side .seg{grid-template-columns:1fr 1fr;}
.ms-row{background:#fff;border:1px solid var(--paper-line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;direction:ltr;}
.ms-row > span{font-size:13px;font-weight:600;color:var(--paper-muted);}
.ms-row input[type=range]{width:100%;accent-color:var(--mint-deep);}
.ms-row.lock{opacity:.45;pointer-events:none;}
.ms-mag{font-size:22px;font-weight:700;text-align:center;direction:ltr;}
.ms-arrows{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
/* pollination lab */
.pl{width:min(860px,100%);display:flex;flex-direction:column;gap:10px;}
.pl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.pl-card{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:border-color .15s, transform .1s;}
.pl-card:hover{border-color:var(--mint-deep);}
.pl-card.sel{border-color:var(--gold);box-shadow:0 0 0 3px #FFC85766;}
.pl-card.no{animation:shake .4s;border-color:var(--no);}
.pl-card b{direction:ltr;}
.pl-card small{color:var(--paper-muted);text-align:center;}
.pl-svg{width:min(190px,100%);height:auto;}
.pl-bag{fill:#EAF4FB;fill-opacity:.55;stroke:#9DB4C6;stroke-width:2.5;stroke-dasharray:6 4;transition:opacity .4s;}
.pl-bag.off{opacity:0;}
.pl-dust{fill:#FFD23F;opacity:0;transition:opacity .4s;}
.pl-dust.on{opacity:1;}
.pl-fruit{transform-box:fill-box;transform-origin:top center;transition:transform 1.4s ease;}
.pl-wilt{transition:opacity 1s, transform 1s;transform-box:fill-box;transform-origin:bottom center;}
.pl-wilt.gone{opacity:.25;transform:rotate(25deg) translateY(10px);}
.pl-tool{display:flex;gap:10px;align-items:center;justify-content:space-between;}
.pl-brush{font-size:15px;background:#fff;border:1.5px solid var(--paper-line);border-radius:12px;padding:8px 12px;direction:rtl;}
.pl-brush.loaded{border-color:#E0A800;background:#FFF6D0;}
@media (max-width:760px){ .ms{grid-template-columns:1fr;} .pl-row{grid-template-columns:1fr 1fr 1fr;gap:6px;} }
.tm-spot .tm-lbl{pointer-events:none;}
.pot-svg,.pl-svg,.tm-svg{direction:ltr;}
.pot-sun circle{fill:#FFC53D;stroke:#E59A00;stroke-width:2;}
.pot-sun path{stroke:#F2A900;stroke-width:3;stroke-linecap:round;}
.pl-dust{stroke:#E08A00;stroke-width:2;}

.choice.go{background:var(--mint);border-color:var(--mint);color:#06231A;font-weight:700;font-size:20px;animation:nextPulse 1.8s ease-in-out infinite;}
@keyframes nextPulse{0%,100%{box-shadow:0 0 0 0 #3DDC9799;}60%{box-shadow:0 0 0 12px #3DDC9700;}}

/* =========================================================
   Depth layer (v6): light from the top-left, soft shadows, raised cards,
   press-able buttons, shaded shapes. Visual only — no layout changes.
   ========================================================= */
.sc-paper{background:radial-gradient(130% 95% at 18% 0%,#FFFEFA 0%,var(--paper) 52%,#EFE7D8 100%);}
.scene{box-shadow:inset 0 1px 0 #ffffff14, inset 0 -30px 60px -40px #0000002e;}
.sc-paper.scene{box-shadow:inset 0 2px 0 #fff, inset 0 -40px 80px -50px #7a5a2a33;}

/* raised cards */
.cc-card,.io-card,.lab-cup,.pr-cup,.pl-card,.fact-card,.tm-side .tm-ask,.ms-side>*,.qz-why,.lab-res{
  background-image:linear-gradient(180deg,#ffffffcc 0%,#ffffff00 55%,#f3ecdf55 100%);
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px #5a3c1014, 0 10px 24px -10px #5a3c1040, 0 2px 6px -2px #5a3c101f;
}
/* press-able buttons (keep each state's own colors) */
.qz-o,.mt-b,.od-b,.seg button,.bin,.pl-tool{
  background-image:linear-gradient(180deg,#ffffffb3 0%,#ffffff00 60%);
  box-shadow:inset 0 1px 0 #ffffffd0, 0 3px 0 #0000001a, 0 8px 16px -8px #5a3c1040;
  transition:transform .08s ease, box-shadow .08s ease, border-color .15s;
}
.qz-o:active,.mt-b:active,.od-b:active,.seg button:active,.bin:active,.pl-tool:active{
  transform:translateY(2px); box-shadow:inset 0 1px 0 #ffffffd0, 0 1px 0 #0000001a, 0 3px 8px -6px #5a3c1040;
}
.qz-o:hover,.mt-b:hover,.od-b:hover,.bin:hover{transform:translateY(-1px);}
.seg button.on{box-shadow:inset 0 2px 4px #0d5c4326, 0 1px 0 #ffffff;}
/* big action buttons on the dark side + the green "go" buttons */
.choice,.mp-node{
  background-image:linear-gradient(180deg,#ffffff10 0%,#ffffff00 50%,#00000022 100%);
  box-shadow:inset 0 1px 0 #ffffff1c, 0 4px 0 #00000059, 0 12px 22px -12px #000c;
  transition:transform .08s ease, box-shadow .08s ease;
}
.choice:active,.mp-node:active{transform:translateY(3px); box-shadow:inset 0 1px 0 #ffffff1c, 0 1px 0 #00000059;}
.btn-go,.lab-go,#nextBtn,.choice.go{
  background-image:linear-gradient(180deg,#ffffff38 0%,#ffffff00 55%,#00000014 100%);
  box-shadow:inset 0 1px 0 #ffffff66, 0 4px 0 #0f7a5a, 0 12px 22px -10px #179a7399;
}
.btn-go:active,.lab-go:active,#nextBtn:active,.choice.go:active{transform:translateY(3px); box-shadow:inset 0 1px 0 #ffffff66, 0 1px 0 #0f7a5a;}
.pill{box-shadow:inset 0 1px 0 #ffffff14, 0 3px 8px -4px #000a;}
.chip{box-shadow:inset 0 1px 0 #ffffffb0, 0 2px 5px -2px #5a3c1040;}

/* drawings: a soft shadow under each picture + shaded 3D-looking shapes */
.tm-svg,.sd-svg,.cup-svg,.io-svg,.pot-svg,.pl-svg,.sl-art,.unlock-art{filter:drop-shadow(0 10px 12px #5a3c1030) drop-shadow(0 2px 2px #5a3c1026);}
.cup-seed,.sd-coat,.sd-inner,.sd-cot,.io-cot,.fl-petal,.fl-swell,.fl-pistil,.fl-sepal,.mc-body,.mc-knob,.mc-mirror,.pot-body,.pot-rim,.skb-fill,.pl-fruit,.ms-grain,.mc-dark{filter:url(#fx-shade);}
.ms-view{box-shadow:0 0 0 4px #15191C, 0 18px 34px -14px #000c, inset 0 0 50px #000a, inset 0 12px 30px #ffffff10;}
.ms-view::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(60% 45% at 30% 22%,#ffffff26,#ffffff00 70%);}
@media (prefers-reduced-motion:reduce){.qz-o,.mt-b,.od-b,.seg button,.bin,.choice,.mp-node{transition:none;}}

/* ---------- 3D microscope ---------- */
.tm3{display:grid;grid-template-columns:1fr minmax(220px,300px);gap:22px;align-items:stretch;height:100%;}
.m3-host{position:relative;min-height:420px;height:100%;border-radius:22px;overflow:hidden;touch-action:none;
  background:radial-gradient(90% 70% at 40% 25%,#FFFFFF 0%,#F6F0E4 55%,#E6DCC8 100%);box-shadow:inset 0 2px 0 #fff, inset 0 -30px 60px -40px #7a5a2a55, 0 10px 26px -14px #5a3c1055;}
.m3-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;cursor:grab;}
.m3-canvas:active{cursor:grabbing;}
.m3-dot{position:absolute;top:0;left:0;margin:-22px 0 0 -22px;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;transition:opacity .2s;display:flex;align-items:center;justify-content:center;}
.m3-dot i{width:22px;height:22px;border-radius:50%;background:#ffffffd9;border:3px solid var(--mint-deep);box-shadow:0 3px 8px #0004;display:block;}
.m3-dot span{position:absolute;inset-inline-start:40px;white-space:nowrap;font:700 13px/1 'Readex Pro',sans-serif;color:#0D5C43;background:#ffffffe6;padding:4px 8px;border-radius:8px;box-shadow:0 2px 6px #0002;direction:ltr;}
.m3-dot span:empty{display:none;}
.m3-dot.ok i{background:var(--ok);border-color:#fff;}
.m3-dot.no i{background:var(--no);border-color:#fff;animation:shake .35s;}
.m3-dot.hint i{background:var(--gold);border-color:#fff;animation:nextPulse 1s infinite;}
.m3-dot.behind{opacity:.18;pointer-events:none;}
.m3-hint{position:absolute;bottom:12px;inset-inline:0;margin:auto;width:max-content;background:#1C2328cc;color:#fff;font-size:14px;padding:7px 14px;border-radius:999px;transition:opacity .4s;pointer-events:none;}
.m3-hint.gone{opacity:0;}
@media (max-width:820px){.tm3{grid-template-columns:1fr;}.m3-host{min-height:340px;}}
.tm3{width:100%;user-select:none;-webkit-user-select:none;}
.tm3 .tm-side{align-self:center;}

/* =========================================================
   Term-2 activities (chapters 6–9)
   ========================================================= */
.t2{display:flex;flex-direction:column;gap:14px;width:100%;max-width:1000px;margin:auto;}
.t2 .sh,.t2-fig .sh,.t2-face .sh,.t2-cup .sh{filter:url(#fx-shade);}
.t2-fig{width:100%;height:auto;overflow:visible;}
.pop{animation:t2pop .45s cubic-bezier(.2,1.4,.4,1);}
@keyframes t2pop{0%{transform:scale(.85);opacity:.3}100%{transform:scale(1);opacity:1}}
.no{animation:shake .35s;}
/* life stages */
.gl-row{display:flex;align-items:flex-end;justify-content:center;gap:6px;flex-wrap:nowrap;direction:ltr;}
.gl-arrow{color:var(--paper-muted);font-size:22px;padding-bottom:70px;transform:scaleX(-1);}
.gl-slot{position:relative;flex:1 1 0;max-width:150px;min-width:0;aspect-ratio:120/230;border:2px dashed var(--paper-line);border-radius:18px;background:#fff8;cursor:pointer;padding:6px;display:flex;align-items:flex-end;justify-content:center;
  box-shadow:inset 0 1px 0 #fff, 0 8px 18px -10px #5a3c1040;transition:transform .12s;}
.gl-slot.glow{border:2.5px solid var(--mint-deep);animation:nextPulse 1.6s infinite;}
.gl-slot.open{border-style:solid;border-color:var(--paper-line);background:linear-gradient(180deg,#fff,#F6EFE2);cursor:default;}
.gl-q{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;color:#C9BBA2;}
.gl-fig{width:100%;animation:t2pop .5s cubic-bezier(.2,1.4,.4,1);}
.gl-n{position:absolute;top:6px;left:8px;width:24px;height:24px;border-radius:50%;background:var(--mint-deep);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;}
.gl-card{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:12px 16px;direction:ltr;text-align:left;
  box-shadow:inset 0 1px 0 #fff, 0 10px 24px -10px #5a3c1040;}
.gl-title{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
.gl-title b{font-size:20px;} .gl-title small{color:var(--paper-muted);direction:rtl;}
.gl-card ul{margin:6px 0 0;padding-left:20px;line-height:1.7;font-size:16px;}
/* picture question */
.sp-ask{display:flex;flex-direction:column;gap:3px;background:#fff;border:2px solid var(--mint-deep);border-radius:16px;padding:10px 14px;direction:ltr;text-align:left;box-shadow:0 8px 18px -10px #179a7355;}
.sp-ask span{font-size:12px;color:var(--paper-muted);font-weight:700;} .sp-q{font-size:19px;font-weight:700;} .sp-ar{direction:rtl;text-align:right;color:var(--paper-muted);}
.sp-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;direction:ltr;}
.sp-card{position:relative;background:linear-gradient(180deg,#fff,#F6EFE2);border:2px solid var(--paper-line);border-radius:16px;padding:8px;cursor:pointer;
  box-shadow:inset 0 1px 0 #fff, 0 3px 0 #0000001a, 0 8px 16px -8px #5a3c1040;transition:transform .08s;}
.sp-card:active{transform:translateY(2px);} .sp-card.ok{border-color:var(--ok);background:#E3F6EC;}
.sp-card b{position:absolute;top:6px;left:8px;width:24px;height:24px;border-radius:50%;background:#1C2328;color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;}
/* family traits */
.ft-row{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:end;direction:ltr;}
.ft-p{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:10px;
  box-shadow:inset 0 1px 0 #fff, 0 10px 24px -12px #5a3c1040;}
.ft-p.kid{border:2.5px solid var(--gold);} .ft-p small{color:var(--paper-muted);}
.t2-face{width:100%;max-width:170px;height:auto;}
.ft-ask{display:flex;align-items:center;gap:10px;justify-content:center;font-size:20px;} .ft-ask small{color:var(--paper-muted);font-size:15px;}
.ft-pick{display:flex;gap:12px;justify-content:center;}
.ft-b{font:inherit;font-size:18px;font-weight:700;border:2px solid var(--paper-line);border-radius:14px;padding:12px 22px;cursor:pointer;background:#fff;color:var(--paper-ink);
  background-image:linear-gradient(180deg,#ffffffb3,#ffffff00 60%);box-shadow:inset 0 1px 0 #fff, 0 3px 0 #0000001a, 0 8px 16px -8px #5a3c1040;}
.ft-b:active{transform:translateY(2px);}
.ft-got{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;direction:ltr;}
/* healthy day */
.hd-grid{display:grid;grid-template-columns:minmax(180px,34%) 1fr;gap:16px;flex:1;}
.hd-kid{align-self:start;background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 10px 24px -12px #5a3c1040;}
.hd-fig{max-width:130px;transition:transform .6s cubic-bezier(.2,1.4,.4,1);} .hd-fig.strong{transform:scale(1.12);}
.hd-bars{width:100%;display:flex;flex-direction:column;gap:8px;direction:ltr;}
.hd-bar span{font-size:12.5px;font-weight:700;color:var(--paper-muted);}
.hd-bar i{display:block;height:12px;border-radius:99px;background:#EDE6D8;box-shadow:inset 0 2px 3px #0002;overflow:hidden;}
.hd-bar em{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(180deg,#6FE3BC,var(--mint-deep));transition:width .6s ease;}
.hd-panel{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 1px 0 #fff, 0 10px 24px -12px #5a3c1040;}
.hd-panel>b{font-size:19px;direction:ltr;text-align:left;} .hd-panel>small{color:var(--paper-muted);}
.hd-foods{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.hd-food{font:inherit;border:2px solid var(--paper-line);border-radius:14px;background:#fff;cursor:pointer;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;
  background-image:linear-gradient(180deg,#ffffffb3,#ffffff00 60%);box-shadow:inset 0 1px 0 #fff, 0 3px 0 #0000001a, 0 8px 16px -8px #5a3c1040;}
.hd-food span{font-size:30px;} .hd-food small{font-size:12px;color:var(--paper-muted);} .hd-food:disabled{opacity:.3;}
.hd-food:active{transform:translateY(2px);}
.hd-plate{min-height:74px;border-radius:50%/40%;background:radial-gradient(closest-side,#fff 60%,#EDE6D8 61%,#fff 72%,#E2D8C6 100%);display:flex;align-items:center;justify-content:center;gap:4px;
  box-shadow:0 10px 18px -8px #5a3c1055;font-size:30px;}
.hd-on{animation:t2pop .4s;}
.hd-opts{display:grid;gap:10px;}
.hd-opt{font:inherit;font-size:17px;font-weight:600;text-align:start;border:2px solid var(--paper-line);border-radius:14px;background:#fff;color:var(--paper-ink);cursor:pointer;padding:14px;
  background-image:linear-gradient(180deg,#ffffffb3,#ffffff00 60%);box-shadow:inset 0 1px 0 #fff, 0 3px 0 #0000001a, 0 8px 16px -8px #5a3c1040;}
.hd-opt.sel{border-color:var(--ok);background-color:#E3F6EC;} .hd-opt:active{transform:translateY(2px);}
/* fish */
.fh-sea{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 14px 30px -14px #0b3a5a88;}
.fh-svg{display:block;width:100%;height:auto;}
.fh-mom{cursor:pointer;} .fh-mom>g{animation:fhSwim 3s ease-in-out infinite;}
@keyframes fhSwim{50%{transform:translate(290px,112px)}}
.fh-hint{position:absolute;top:12px;right:12px;background:#1C2328cc;color:#fff;padding:6px 12px;border-radius:99px;font-size:14px;}
.fh-egg{fill:#FFE7A8;stroke:#E8B24A;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;}
.fh-svg.laid .fh-egg{animation:fhLay .9s ease-out forwards;animation-delay:var(--d);}
@keyframes fhLay{0%{opacity:0;transform:translate(0,-140px) scale(.4)}100%{opacity:1;transform:none}}
.fh-svg.hatched .fh-egg{animation:none;opacity:.35;}
.fh-baby{opacity:0;transform:translate(var(--x),var(--y));}
.fh-svg.hatched .fh-baby{animation:fhBaby 3.2s ease-in-out infinite;animation-delay:var(--d);}
@keyframes fhBaby{0%{opacity:1;transform:translate(var(--x),var(--y))}50%{opacity:1;transform:translate(calc(var(--x) + 30px),calc(var(--y) - 40px))}100%{opacity:1;transform:translate(calc(var(--x) + 60px),calc(var(--y) - 10px))}}
/* reserves map */
.rm-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start;}
.rm-svg{width:100%;height:auto;border-radius:18px;box-shadow:0 14px 30px -14px #5a3c1066;}
.rm-sea{font:italic 600 13px 'Readex Pro',sans-serif;fill:#2E6A95;} .rm-lbl{font:800 22px 'Readex Pro',sans-serif;fill:#A88A4E;letter-spacing:4px;} .rm-nile{font:600 12px 'Readex Pro',sans-serif;fill:#2E6A95;}
.rm-pin{cursor:pointer;} .rm-pin path{transition:transform .15s;} .rm-pin:not(.on) path{animation:rmBob 1.4s ease-in-out infinite;} .rm-pin.on path{fill:var(--ok);}
.rm-hit{fill:transparent;}
@keyframes rmBob{50%{transform:translateY(-5px)}}
.rm-cards{display:flex;flex-direction:column;gap:12px;}
.rm-card{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;box-shadow:inset 0 1px 0 #fff, 0 10px 24px -12px #5a3c1040;}
.rm-art{font-size:40px;} .rm-card small{color:var(--paper-muted);} .rm-card bdi{direction:ltr;font-size:14px;}
/* cloud cover */
.cv-grid{display:grid;grid-template-columns:1fr 200px;gap:16px;align-items:center;}
.cv-sky{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:18px;overflow:hidden;aspect-ratio:2/1;
  background:linear-gradient(180deg,#6FB9F2,#C6E6FF);box-shadow:0 14px 30px -14px #1d5a8a88, inset 0 0 0 3px #fff8;}
.cv-sky::after{content:"";position:absolute;inset:0;background:#3B4654;opacity:var(--dim,0);pointer-events:none;transition:opacity .4s;}
.cv-b{border:1px dashed #ffffff90;background:transparent;cursor:pointer;padding:6px;color:#fff;position:relative;z-index:1;}
.cv-b svg{width:100%;height:100%;opacity:0;transform:scale(.6);transition:opacity .25s,transform .3s cubic-bezier(.2,1.4,.4,1);filter:drop-shadow(0 6px 6px #0003);}
.cv-b.on svg{opacity:1;transform:none;}
.cv-sun{position:absolute;top:8%;left:6%;font-size:44px;transition:opacity .4s;pointer-events:none;} .cv-sun.hid{opacity:.15;}
.cv-side{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:14px;box-shadow:0 10px 24px -12px #5a3c1040;}
.cv-count{font-size:40px;font-weight:800;direction:ltr;} .cv-side small{color:var(--paper-muted);} .cv-task{text-align:center;font-size:16px;}
/* cloud watch */
.cw-grid{display:grid;grid-template-columns:1fr 200px;gap:16px;align-items:start;}
.cw-svg{width:100%;height:auto;border-radius:18px;box-shadow:0 14px 30px -14px #1d5a8a88;}
.cw-cloud{transform:translate(120px,70px);transition:transform 1.3s ease-in-out;filter:drop-shadow(0 8px 8px #0002);}
.cw-svg[data-t="1"] .cw-cloud{transform:translate(260px,66px) scale(1.05);} .cw-svg[data-t="2"] .cw-cloud{transform:translate(420px,62px) scale(.95,1.1);}
.cw-obj{cursor:pointer;} .cw-obj.sel{filter:drop-shadow(0 0 8px #3DDC97);}
.cw-car>g{animation:cwCar 6s linear infinite;} @keyframes cwCar{0%{transform:translate(-80px,270px)}100%{transform:translate(660px,270px)}}
.cw-plane>g{animation:cwPlane 9s linear infinite;} @keyframes cwPlane{0%{transform:translate(640px,40px)}100%{transform:translate(-100px,20px)}}
.cw-dir{font:800 20px 'Readex Pro',sans-serif;fill:#1C4E7A;}
.cw-side{display:flex;flex-direction:column;gap:12px;align-items:stretch;}
.cw-compass{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;box-shadow:0 10px 24px -12px #5a3c1040;}
.cw-rose{position:relative;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#E9E2D4);border:6px solid #7A5A3A;box-shadow:inset 0 3px 8px #0003, 0 6px 12px -4px #0005;}
.cw-rose b{position:absolute;font-size:14px;font-weight:800;} .cw-rose .n{top:4px;left:50%;transform:translateX(-50%);color:#E0533F;} .cw-rose .s{bottom:4px;left:50%;transform:translateX(-50%);}
.cw-rose .e{right:6px;top:50%;transform:translateY(-50%);} .cw-rose .w{left:6px;top:50%;transform:translateY(-50%);}
.cw-needle{position:absolute;left:50%;top:50%;width:8px;height:86px;margin:-43px 0 0 -4px;background:linear-gradient(180deg,#E0533F 50%,#56606B 50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:rotate(70deg);transition:transform 1.2s cubic-bezier(.2,1.6,.4,1);}
.cw-compass.wobble .cw-needle{animation:cwWob 1.2s ease-in-out infinite;} @keyframes cwWob{0%,100%{transform:rotate(60deg)}50%{transform:rotate(-40deg)}}
.cw-compass.set .cw-needle{transform:rotate(0);}
.cw-cs{color:var(--paper-muted);} .cw-step{font-size:16px;line-height:1.6;}
/* forecast */
.fc-grid{display:grid;grid-template-columns:1fr 220px;gap:16px;align-items:start;}
.fc-svg{width:100%;height:auto;border-radius:16px;box-shadow:0 14px 30px -14px #000a;}
.fc-eg{font:800 18px 'Readex Pro',sans-serif;fill:#F3E2B8;letter-spacing:3px;} .fc-city{font:600 12px 'Readex Pro',sans-serif;fill:#FFC857;} .fc-w{font:800 18px 'Readex Pro',sans-serif;fill:#9FD0F5;}
.fc-clouds{transition:transform 1.4s ease-in-out,opacity .6s;filter:drop-shadow(0 0 10px #fff8);}
.fc-svg[data-pos="west"] .fc-clouds{transform:translate(90px,120px);} .fc-svg[data-pos="west"][data-move="1"] .fc-clouds{transform:translate(400px,140px);}
.fc-svg[data-pos="none"] .fc-clouds{opacity:0;transform:translate(90px,120px);}
.fc-svg[data-pos="east"] .fc-clouds{transform:translate(470px,120px);} .fc-svg[data-pos="east"][data-move="1"] .fc-clouds{transform:translate(640px,110px);opacity:.3;}
.fc-side{display:flex;flex-direction:column;gap:10px;} .fc-case{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 24px -12px #5a3c1040;}
.fc-note{font-size:17px;line-height:1.6;} .fc-case small{color:var(--paper-muted);}
/* cups & water */
.tc-row,.ic-row{display:flex;gap:24px;justify-content:center;}
.tc-cup,.ic-cup{display:flex;flex-direction:column;align-items:center;gap:3px;background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:12px 18px;min-width:180px;
  box-shadow:inset 0 1px 0 #fff, 0 10px 24px -12px #5a3c1040;}
.tc-cup[role=button],.ic-cup[role=button]{cursor:pointer;} .tc-cup.sel{border-color:var(--mint-deep);} .tc-cup small,.ic-cup small{color:var(--paper-muted);text-align:center;}
.t2-cup{width:150px;height:auto;} .t2-cup path,.t2-cup rect{transition:all .5s;}
.t2-drop{animation:t2pop .5s both;} .ic-cup.wet{border-color:#4AA3DD;}
.dr-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.dr-line{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 10px 24px -12px #5a3c1040;}
.dr-sky{font-size:30px;} .dr-svg{width:100%;height:auto;} .dr-line small{color:var(--paper-muted);}
.dr-drops ellipse{animation:drDrip 1s ease-in infinite;} @keyframes drDrip{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(10px);opacity:0}}
.dr-line.dry .dr-drops{display:none;} .dr-line.dry .dr-cloth{filter:saturate(1.2) brightness(1.08);} .dr-line.dry::after{content:"✓ نشف";color:var(--ok);font-weight:800;}
.dr-line.half::after{content:"لسه مبلول 💧";color:#4AA3DD;font-weight:800;}
/* water cycle */
.wc-grid{display:grid;grid-template-columns:1fr 200px;gap:16px;align-items:start;}
.wc-svg{width:100%;height:auto;border-radius:18px;box-shadow:0 14px 30px -14px #1d5a8a88;}
.wc-hot{cursor:pointer;} .wc-vapor,.wc-rain,.wc-l{opacity:0;transition:opacity .5s;}
.wc-svg[data-step] .wc-vapor{opacity:1;} .wc-vapor path{animation:wcUp 1.6s linear infinite;animation-delay:var(--d);}
@keyframes wcUp{0%{transform:translateY(20px);opacity:0}40%{opacity:1}100%{transform:translateY(-40px);opacity:0}}
.wc-cloud{color:#fff;transition:color .6s;} .wc-svg:not([data-step]) .wc-cloud g,.wc-svg[data-step="1"] .wc-cloud g{opacity:.35;}
.wc-svg[data-step="3"] .wc-cloud,.wc-svg[data-step="4"] .wc-cloud,.wc-svg[data-step="5"] .wc-cloud{color:#7D8A97;}
.wc-cloud g{filter:drop-shadow(0 6px 6px #0002);transition:opacity .6s;}
.wc-svg[data-step="3"] .wc-rain,.wc-svg[data-step="4"] .wc-rain,.wc-svg[data-step="5"] .wc-rain{opacity:1;}
.wc-rain path{animation:wcRain .8s linear infinite;animation-delay:var(--d);} @keyframes wcRain{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(90px);opacity:0}}
.wc-river{stroke-dasharray:14 10;} .wc-svg[data-step="4"] .wc-river,.wc-svg[data-step="5"] .wc-river{animation:wcFlow 1s linear infinite;} @keyframes wcFlow{to{stroke-dashoffset:-24}}
.wc-l{font:800 15px 'Readex Pro',sans-serif;fill:#1C4E7A;paint-order:stroke;stroke:#fff;stroke-width:4px;}
.wc-svg[data-step="1"] .wc-l[data-n="1"],.wc-svg[data-step="2"] .wc-l[data-n="1"],.wc-svg[data-step="2"] .wc-l[data-n="2"],.wc-svg[data-step="3"] .wc-l:not([data-n="4"]),.wc-svg[data-step="4"] .wc-l,.wc-svg[data-step="5"] .wc-l{opacity:1;}
.wc-side{display:flex;flex-direction:column;gap:10px;} .wc-now{background:#fff;border:2px solid var(--mint-deep);border-radius:16px;padding:12px;font-size:16px;box-shadow:0 8px 18px -10px #179a7355;}
.wc-done{margin:0;padding-inline-start:22px;line-height:1.8;direction:ltr;text-align:left;}
@media (max-width:820px){
  .hd-grid,.rm-grid,.cv-grid,.cw-grid,.fc-grid,.wc-grid{grid-template-columns:1fr;}
  .sp-row{grid-template-columns:repeat(3,1fr);} .gl-arrow{display:none;} .gl-slot{width:19%;}
}

/* sentence pinned by the tutor while the child writes */
#pin{position:relative;background:linear-gradient(180deg,#FFFDF6,#F6EFDD);color:var(--paper-ink);border-radius:18px;padding:14px 18px 16px;margin-top:10px;
  box-shadow:inset 0 1px 0 #fff, 0 12px 26px -12px #000c;border:2px solid var(--gold);animation:t2pop .4s;}
#pin small{color:var(--paper-muted);font-weight:700;}
.pin-t{font-size:26px;line-height:1.6;font-weight:700;margin-top:4px;unicode-bidi:plaintext;letter-spacing:.3px;}
.pin-x{position:absolute;top:8px;inset-inline-end:8px;border:0;background:#0000000f;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:14px;}

/* subject switch (Science / Math) */
.subj{display:inline-flex;gap:6px;background:#0003;border-radius:999px;padding:4px;vertical-align:middle;margin-inline-start:10px;}
.subj-b{font:inherit;font-size:15px;font-weight:700;border:0;border-radius:999px;padding:8px 16px;cursor:pointer;background:transparent;color:inherit;opacity:.75;}
.subj-b.on{background:var(--mint);color:#06231A;opacity:1;box-shadow:inset 0 1px 0 #ffffff66, 0 3px 0 #0f7a5a;}
.sc-splash .subj{background:#ffffff14;font-size:17px;}

/* =========================================================
   Math activities
   ========================================================= */
.mt-wrap{display:flex;flex-direction:column;gap:14px;width:100%;max-width:980px;margin:auto;}
.m-big{font-size:40px;font-weight:800;text-align:center;letter-spacing:.5px;font-variant-numeric:tabular-nums;}
.m-res{color:var(--mint-deep);} .m-res.ok{animation:t2pop .5s;}
.m-target{font-size:22px;} .m-target b{color:var(--mint-deep);}
.m-ask{display:flex;gap:10px;align-items:baseline;justify-content:center;background:#fff;border:2px solid var(--mint-deep);border-radius:14px;padding:10px 14px;direction:ltr;box-shadow:0 8px 18px -10px #179a7355;}
.m-ask span{font-size:12px;color:var(--paper-muted);font-weight:700;} .m-q{font-size:20px;} .m-qa{color:var(--paper-muted);direction:rtl;}
/* place-value chart */
.pv{border-collapse:separate;border-spacing:4px;margin:0 auto;font-variant-numeric:tabular-nums;}
.pv th{font-size:13px;padding:8px 6px;border-radius:10px;color:#fff;min-width:58px;box-shadow:inset 0 1px 0 #ffffff55, 0 3px 0 #0002;}
.pv th.pv-th{background:linear-gradient(180deg,#5BB86A,#3E9A55);} .pv th.pv-on{background:linear-gradient(180deg,#5AA0E6,#3F7FC8);} .pv th.pv-de{background:linear-gradient(180deg,#F08FB3,#D9658F);}
.pv th.pv-dot,.pv td.pv-dot{background:none;color:var(--no);font-size:30px;font-weight:900;min-width:18px;box-shadow:none;padding:0;}
.pv td{background:#fff;border:2px solid var(--paper-line);border-radius:12px;height:58px;min-width:58px;text-align:center;font-size:30px;font-weight:800;
  box-shadow:inset 0 1px 0 #fff, 0 3px 0 #0000001a, 0 8px 14px -8px #5a3c1040;transition:transform .25s, background .25s;}
.pv td.pv-tap{cursor:pointer;} .pv td.pv-tap:active{transform:translateY(2px);}
.pv td.ok{background:#DFF5EA;border-color:var(--ok);} .pv td.ghost{color:#C9BBA2;}
.pv td.moved{animation:pvMove .45s cubic-bezier(.2,1.4,.4,1);} @keyframes pvMove{0%{transform:translateX(16px);opacity:.3}100%{transform:none;opacity:1}}
.m-ctrl{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;} .m-moves{font-size:22px;color:var(--ok);font-weight:800;}
/* 1,000-part grid */
.dg-row{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:20px;align-items:center;}
.g1000{width:100%;height:auto;border-radius:6px;filter:drop-shadow(0 10px 14px #5a3c1033);}
.g-bg{fill:#fff;} .g-t{fill:#F49AC1;} .g-h{fill:#7FD3EE;} .g-th{fill:#FFD54F;}
.gl{stroke:#D8D2C8;stroke-width:.5;} .gL{stroke:#9C948A;stroke-width:1.1;}
.dg-side{display:flex;flex-direction:column;gap:14px;}
.dg-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dg-b{font:inherit;font-size:16px;font-weight:700;border:2px solid var(--paper-line);border-radius:14px;padding:14px 10px;cursor:pointer;background:#fff;color:var(--paper-ink);
  background-image:linear-gradient(180deg,#ffffffb3,#ffffff00 60%);box-shadow:inset 0 1px 0 #fff, 0 3px 0 #0000001a, 0 8px 16px -8px #5a3c1040;}
.dg-b:active{transform:translateY(2px);} .dg-b:disabled{opacity:.45;}
.dg-b.t{border-color:#F49AC1;} .dg-b.h{border-color:#7FD3EE;} .dg-b.th{border-color:#FFD54F;} .dg-b.r{color:var(--paper-muted);}
.dg-read{font-size:18px;text-align:center;min-height:28px;} .dg-read b{font-size:24px;color:var(--mint-deep);}
/* compare */
.m-big.cmp{display:flex;gap:18px;justify-content:center;align-items:center;} .cmp-o{width:56px;height:56px;border-radius:50%;border:3px dashed var(--paper-line);display:inline-flex;align-items:center;justify-content:center;color:var(--mint-deep);}
.cmp-btns{display:flex;gap:16px;justify-content:center;}
.cmp-b{font:900 34px/1 'Readex Pro',sans-serif;width:86px;height:70px;border-radius:16px;border:2px solid var(--paper-line);background:#fff;cursor:pointer;color:var(--paper-ink);
  background-image:linear-gradient(180deg,#ffffffb3,#ffffff00 60%);box-shadow:inset 0 1px 0 #fff, 0 4px 0 #0000001f, 0 10px 18px -8px #5a3c1040;}
.cmp-b.ok{background-color:#DFF5EA;border-color:var(--ok);} .cmp-b:active{transform:translateY(3px);}
.cmp-steps{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;min-height:10px;} .cmp-steps span{background:#FFF6DC;border:1px solid #F2D27A;border-radius:10px;padding:6px 10px;font-weight:700;animation:t2pop .4s both;animation-delay:var(--d);}
/* number line */
.nl-row{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:20px;align-items:center;}
.nl{width:100%;height:auto;direction:ltr;} .nl-empty{height:300px;display:flex;align-items:center;justify-content:center;font-size:60px;color:#D8CDB8;}
.nl-a{stroke:#1C2328;stroke-width:4;stroke-linecap:round;} .nl-t{stroke:#1C2328;stroke-width:3;stroke-linecap:round;}
.nl-end circle{fill:#fff;stroke:var(--mint-deep);stroke-width:3;} .nl-end text,.nl-mid text,.nl-n text{font:800 20px 'Readex Pro',sans-serif;fill:#1C2328;}
.nl-mid rect{fill:#FFF6DC;stroke:#E8B24A;stroke-width:2;} .nl-ml{font:600 13px 'Readex Pro',sans-serif;fill:#9A7A3A;}
.nl-n circle{fill:var(--coral);stroke:#fff;stroke-width:3;} .nl-n text{fill:var(--coral);} .nl-p{stroke:var(--coral);stroke-width:2;stroke-dasharray:4 4;}
.nl-side{display:flex;flex-direction:column;gap:10px;} .nl-note{font-size:17px;color:var(--paper-muted);}
/* column add / subtract + keypad */
.cc-est{text-align:center;font-size:20px;min-height:10px;} .cc-est b{color:var(--mint-deep);font-size:24px;}
.cct{width:auto;display:table;border-collapse:collapse;margin:0 auto;font:800 38px/1.25 'Readex Pro',sans-serif;font-variant-numeric:tabular-nums;}
.cct td{width:44px;text-align:center;padding:2px 0;position:relative;} .cct td.ghost{color:#C9BBA2;}
.cc-dot{color:var(--no);width:18px!important;} .cc-op{color:var(--paper-muted);}
.cc-m td{font-size:18px;height:22px;color:var(--no);opacity:0;transition:opacity .3s;} .cc-m td.show{opacity:1;} .cc-m td.carry{color:var(--mint-deep);}
.cc-a.crossed{text-decoration:line-through;text-decoration-color:var(--no);color:#9C948A;}
.cc-b td{border-bottom:4px solid #1C2328;}
.cc-rd{height:56px;border-radius:12px;} .cc-rd.cur{background:#FFF6DC;box-shadow:inset 0 0 0 3px #F2C14E;animation:nextPulse 1.6s infinite;} .cc-rd.ok{color:var(--mint-deep);}
.kp{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:420px;margin:14px auto 0;}
.kp-b{font:800 26px/1 'Readex Pro',sans-serif;height:58px;border-radius:14px;border:2px solid var(--paper-line);background:#fff;cursor:pointer;color:var(--paper-ink);
  background-image:linear-gradient(180deg,#ffffffb3,#ffffff00 60%);box-shadow:inset 0 1px 0 #fff, 0 4px 0 #0000001f, 0 8px 14px -8px #5a3c1040;}
.kp-b:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff, 0 1px 0 #0000001f;} .kp-b:disabled{opacity:.4;}
.na-kp{grid-template-columns:repeat(3,1fr);max-width:300px;} .kp-b.ok-b{grid-column:1 / -1;background:var(--mint);border-color:var(--mint-deep);color:#06231A;}
.na-q{font-size:30px;font-weight:800;text-align:center;} .na-ar{text-align:center;color:var(--paper-muted);}
.na-in{margin:auto;min-width:240px;min-height:64px;border:3px solid var(--paper-line);border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font:800 34px/1 'Readex Pro',sans-serif;box-shadow:inset 0 2px 6px #0001;}
.na-in.ok{border-color:var(--ok);background:#DFF5EA;} .na-u{font-size:18px;color:var(--paper-muted);}
/* 10×10 grid model */
.gm-host{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .g100s{width:min(220px,40vw);height:auto;filter:drop-shadow(0 8px 12px #5a3c1030);}
.g100{fill:#fff;stroke:#BDB5A8;stroke-width:1;} .g100.ga{fill:#FFD54F;} .g100.gb{fill:#F49AC1;} .gx{stroke:#D0342C;stroke-width:3;stroke-linecap:round;}
.gm-btns{max-width:460px;margin:0 auto;}
/* story problems */
.st-card{background:#fff;border:1px solid var(--paper-line);border-left:6px solid var(--gold);border-radius:16px;padding:16px 18px;font-size:20px;line-height:1.6;box-shadow:0 10px 24px -12px #5a3c1040;}
.st-steps{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;direction:ltr;} .st-s{padding:6px 12px;border-radius:999px;background:#EEE6D6;color:var(--paper-muted);font-weight:700;font-size:14px;}
.st-s.on{background:var(--mint);color:#06231A;}
.st-plan{display:flex;flex-direction:column;gap:4px;font-size:18px;text-align:center;} .st-ans{text-align:center;font-size:28px;color:var(--mint-deep);}
/* unit 2: bar model, factor tree, prime columns, multiples line */
.bm{max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:4px;font:800 26px/1 'Readex Pro',sans-serif;}
.bm-w,.bm-p{border:3px solid #E07A3F;background:#fff;border-radius:6px;min-height:58px;display:flex;align-items:center;justify-content:center;}
.bm-ps{display:flex;gap:4px;} .bm-p{min-width:90px;} .bm-v{color:var(--coral);} .bm-v.ok{color:var(--mint-deep);animation:t2pop .5s;}
.ftr-host{display:flex;justify-content:center;overflow-x:auto;padding:4px;}
.ftr-sub{display:flex;flex-direction:column;align-items:center;}
.ftr-n{min-width:52px;height:52px;padding:0 8px;display:flex;align-items:center;justify-content:center;font:800 24px/1 'Readex Pro',sans-serif;background:#fff;border:3px solid var(--paper-line);border-radius:10px;animation:t2pop .35s;}
.ftr-n.ftr-c{border-color:#E07A3F;background:#FFF1E6;} .ftr-n.ftr-p{border-color:var(--mint-deep);background:#DFF5EA;border-radius:50%;width:52px;padding:0;}
.ftr-n.ftr-q{border-style:dashed;color:var(--paper-muted);} .ftr-n.cur{box-shadow:0 0 0 4px #F2C14E;animation:nextPulse 1.6s infinite;}
.ftr-br{width:52%;height:22px;border:3px solid #C9BBA2;border-bottom:0;border-radius:12px 12px 0 0;margin-top:6px;}
.ftr-kids{display:flex;gap:14px;align-items:flex-start;}
.ftr-ctrl{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:20px;} .ftr-ask{font-size:20px;}
.ftr-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;} .ftr-btns .dg-b{min-width:120px;}
.pc{border-collapse:separate;border-spacing:6px;margin:0 auto;font:800 26px/1 'Readex Pro',sans-serif;}
.pc th{font-size:22px;text-align:right;padding-right:6px;white-space:nowrap;}
.pc td{min-width:48px;height:48px;text-align:center;border-radius:10px;}
.pc-c{cursor:pointer;background:#fff;border:2px solid var(--paper-line);} .pc-c:empty{background:#F4EFE6;border-style:dashed;}
.pc-c.pick{background:#DFF5EA;border-color:var(--mint-deep);} .pc-c.pick2{background:#FFF1E6;border-color:#E07A3F;}
.pc-r td{border-top:3px solid #1C2328;border-radius:0;color:var(--mint-deep);} .pc-r td.pc-eq{border:0;white-space:nowrap;color:var(--paper-ink);}
.ml{width:100%;height:auto;direction:ltr;}
.ml-t{cursor:pointer;} .ml-hit{fill:transparent;} .ml-dot{fill:#fff;stroke:#BDB5A8;stroke-width:2;} .ml-n{font:700 16px 'Readex Pro',sans-serif;fill:#1C2328;}
.ml-t.ma .ml-dot{fill:#7FD3EE;stroke:#2D8FB8;} .ml-t.mb .ml-dot{stroke:#E07A3F;stroke-width:4;} .ml-t.mc .ml-dot{fill:#FFD54F;stroke:#C7920F;stroke-width:4;}
.ml-arc{fill:none;stroke-width:3;} .ml-arc.ma{stroke:#2D8FB8;} .ml-arc.mb{stroke:#E07A3F;}
.ml-list{display:flex;flex-direction:column;gap:6px;font-size:18px;align-items:center;} .ml-la b{color:#2D8FB8;} .ml-lb b{color:#E07A3F;} .ml-lc b{color:#B07F00;}
@media (max-width:820px){ .dg-row,.nl-row{grid-template-columns:1fr;} .pv td,.pv th{min-width:40px;} .pv td{font-size:24px;height:48px;} .cct{font-size:30px;} .cct td{width:34px;} }

/* ---------- writing time ---------- */
.wt{width:min(820px,100%);display:flex;flex-direction:column;gap:16px;align-items:stretch;}
.wt-lines{margin:0;padding:22px 26px 22px 54px;background:#fff repeating-linear-gradient(#fff 0 44px,#BFD7EA 44px 46px,#fff 46px 48px) 0 22px;border:1px solid var(--paper-line);border-radius:18px;
  border-left:4px solid #F2A0A0;font:600 clamp(22px,2.6vw,30px)/48px 'Readex Pro',sans-serif;color:#1C2328;text-align:left;box-shadow:0 10px 24px rgba(60,40,10,.10);}
.wt-lines li{padding-left:6px;}
.wt-cam{text-align:center;font-size:22px;font-weight:700;color:#0D5C43;} .wt-n{font-size:30px;}
.wt-done{align-self:center;font-size:20px;padding:14px 28px;}
.lang-r{display:flex;align-items:center;gap:10px;font-size:14px;} .lang-r input{flex:1;accent-color:var(--mint-deep);}
.mp-warn{display:block;font-size:11.5px;color:#B0452F;font-weight:600;margin-top:2px;}
.pq{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:620px;}
.pq-ic{font-size:64px;} .pq-t{font-size:clamp(22px,2.4vw,28px);font-weight:600;} .pq small{color:var(--paper-muted);font-size:16px;}

/* ---------- session-review fixes ---------- */
.lab-row.hint{border-radius:12px;background:#FFF8E1;animation:hintPulse 1.4s infinite;}
@keyframes hintPulse{0%,100%{box-shadow:0 0 0 3px #F2C14E;}50%{box-shadow:0 0 0 7px #F2C14E55;}}
.mt-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;font:700 13px/1 'Readex Pro',sans-serif;font-style:normal;margin-inline-end:8px;vertical-align:middle;}
.mt-ex{font-size:11px;color:var(--paper-muted);font-weight:600;}
#pMap{font-weight:700;white-space:nowrap;}

/* ---- student picker (several children per account) ---- */
.stu-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;width:min(560px,100%)}
.stu-b{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 12px;border-radius:18px;border:2px solid var(--paper-line,#e6e1d6);background:#fff;font:inherit;cursor:pointer;color:inherit}
.stu-b:hover,.stu-b:focus-visible{border-color:var(--mint-deep)}
.stu-b .stu-ic{font-size:40px}.stu-b b{font-size:20px}.stu-b small{color:var(--paper-muted)}
.stu-b.add{border-style:dashed}
/* ---- parent PIN ---- */
.pin-f{display:flex;flex-direction:column;gap:10px}
.pin-f input{font:inherit;font-size:22px;letter-spacing:6px;text-align:center;padding:10px;border-radius:12px;border:1px solid var(--paper-line,#ddd);max-width:260px}
.pin-err{color:var(--no);min-height:20px}
#pvBox{margin-bottom:10px}

/* ---- silent practice ---- */
.mp-prac{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:100%;margin:0 0 14px;padding:14px;border-radius:16px;border:2px dashed var(--mint-deep);background:rgba(255,255,255,.08);color:inherit;font:inherit;font-size:18px;font-weight:700;cursor:pointer}
.mp-prac small{font-weight:400;opacity:.75;font-size:14px}
.px{display:flex;flex-direction:column;gap:14px;width:min(720px,100%);margin:0 auto}
.px-top{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--paper-muted);font-size:14px}
.px-tag{background:rgba(0,0,0,.05);border-radius:99px;padding:4px 12px}
.px-bar{height:8px;border-radius:99px;background:rgba(0,0,0,.08);overflow:hidden}.px-bar i{display:block;height:100%;background:var(--mint-deep);transition:width .3s}
.px-lead{color:var(--paper-muted);font-weight:600;direction:ltr;text-align:left}
.px-q{font-size:24px;font-weight:700;line-height:1.5;direction:ltr;text-align:left}
.px-opts{display:grid;gap:10px}
.px-o{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:2px solid rgba(0,0,0,.12);background:#fff;font:inherit;font-size:19px;text-align:left;direction:ltr;cursor:pointer;color:#1f2a30}
.px-o:hover:not(:disabled){border-color:var(--mint-deep)}
.px-l{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.06);font-size:14px;font-weight:700;flex:none}
.px-o.ok{border-color:#1f9d6b;background:#e5f6ee}.px-o.no{border-color:#d0543f;background:#fbe9e6}
.px-form{display:flex;gap:10px}.px-in{flex:1;font:inherit;font-size:20px;padding:12px;border-radius:12px;border:2px solid rgba(0,0,0,.15)}
.px-in.ok{border-color:#1f9d6b}.px-in.no{border-color:#d0543f}
.px-fb{padding:12px 14px;border-radius:12px;font-size:17px;line-height:1.7}.px-fb small{display:block;opacity:.85;font-size:15px}
.px-fb.ok{background:#e5f6ee;color:#14684a}.px-fb.no{background:#fbe9e6;color:#9b3324}
.px-next{display:flex;justify-content:center}
.px-end h2{font-size:44px}.px-stars{font-size:34px;text-align:center}
.px-miss{display:flex;flex-direction:column;gap:6px;text-align:left;direction:ltr;background:rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;line-height:1.6}
.px-miss b:first-child{direction:rtl;text-align:right}.px-miss.ok{text-align:center;direction:rtl}
.px-q.ar,.px-lead.ar{direction:rtl;text-align:right}

/* ---------- Brand: أبلة ذكيّة ---------- */
.brand-name{font-family:'Baloo Bhaijaan 2','Cairo',sans-serif;font-weight:800;line-height:1;display:inline-flex;align-items:center;gap:6px;}
.ai-tag{font-family:'Cairo',sans-serif;font-weight:900;font-size:.5em;background:#3DDC97;color:#06231C;border-radius:.45em;padding:.18em .45em;line-height:1.1;letter-spacing:.02em;}
.brand{color:var(--text);font-size:19px;}
.brand .ai-tag{font-size:11px;}
.tface{display:flex;align-items:center;gap:14px;padding:12px 12px 4px;}
.topbar .brand{display:none;}
.topbar{justify-content:flex-start;flex-direction:row-reverse;}
.tface .ring{position:relative;width:86px;height:86px;border-radius:50%;flex:none;background:#E9FBF3;box-shadow:0 0 0 4px #3DDC97,0 0 0 10px #3DDC9726;overflow:hidden;transition:box-shadow .3s;}
.tface .ring img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%;transition:opacity .25s;}
.tface[data-s="speaking"] .ring{animation:talkRing 1.2s ease-in-out infinite;}
.tface[data-s="off"] .ring{filter:saturate(.75);}
@keyframes talkRing{0%,100%{box-shadow:0 0 0 4px #3DDC97,0 0 0 10px #3DDC9726;}50%{box-shadow:0 0 0 4px #3DDC97,0 0 0 16px #3DDC9700;}}
.tface .tname{display:flex;flex-direction:column;gap:3px;}
.tface .tname b{font-family:'Baloo Bhaijaan 2','Cairo',sans-serif;font-weight:800;font-size:20px;color:var(--text);}
.tface .tname small{color:var(--muted);font-size:13px;}
.sc-splash .bl{display:flex;flex-direction:column;align-items:center;gap:30px;}
.sc-splash .bl-face{width:min(200px,38vw);aspect-ratio:1;border-radius:50%;background:#fff;overflow:hidden;box-shadow:0 0 0 7px #3DDC97,0 0 0 20px #3DDC9733;}
.sc-splash .bl-face img{width:100%;height:100%;object-fit:cover;object-position:50% 6%;}
.sc-splash .bl-name{font-size:clamp(40px,4.6vw,60px);color:#06231C;}
.sc-splash .sub{color:#1F6B4F;opacity:1;}
.sc-splash .subj{background:#1F6B4F14;}