:root{
    --bg:#FFF7E8; --ink:#2B2350; --purple:#6C4CF1; --purple-l:#EEE8FF;
    --green:#22C07A; --orange:#FF9F1C; --red:#FF5C6C; --sky:#4CC9F0; --yellow:#FFD23F;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
  html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:'Baloo 2',system-ui,sans-serif;overflow:hidden}
  #app{height:100%;display:flex;flex-direction:column;max-width:900px;margin:0 auto;padding:12px 14px 8px}
  header{display:flex;align-items:center;gap:12px;flex:0 0 auto}
  .dots{display:flex;gap:8px;flex:1;justify-content:center}
  .dot{width:16px;height:16px;border-radius:50%;background:#E6DCC6;transition:.3s}
  .dot.done{background:var(--green)}
  .dot.now{background:var(--purple);transform:scale(1.35)}
  .iconbtn{width:56px;height:56px;border-radius:18px;border:none;background:#fff;box-shadow:0 4px 0 #E6DCC6;font-size:26px;cursor:pointer}
  .iconbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #E6DCC6}
  main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:relative;min-height:0}
  .title{font-size:clamp(22px,4.2vw,34px);font-weight:800;text-align:center;line-height:1.1;margin:0}
  .big{font-size:clamp(110px,26vw,220px);font-weight:800;line-height:.9;color:var(--purple);text-shadow:0 8px 0 #D9CEFF;cursor:pointer;animation:bob 2.4s ease-in-out infinite}
  .big span{color:var(--orange);text-shadow:0 8px 0 #FFD9A6}
  @keyframes bob{50%{transform:translateY(-10px)}}
  .btn{font-family:inherit;font-size:clamp(22px,4vw,30px);font-weight:800;border:none;border-radius:26px;padding:14px 38px;min-height:80px;min-width:200px;color:#fff;background:var(--green);box-shadow:0 7px 0 #149A5E;cursor:pointer}
  .btn:active{transform:translateY(5px);box-shadow:0 2px 0 #149A5E}
  .btn.ghost{background:#fff;color:var(--ink);box-shadow:0 7px 0 #E6DCC6}
  .row{display:flex;gap:clamp(10px,2.5vw,22px);flex-wrap:wrap;justify-content:center}
  .card{width:clamp(130px,26vw,200px);aspect-ratio:1/1.1;background:#fff;border-radius:28px;box-shadow:0 7px 0 #E6DCC6;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:transform .15s;border:5px solid transparent}
  .card:active{transform:scale(.95)}
  .card .em{font-size:clamp(60px,13vw,104px);line-height:1}
  .card .word{font-size:clamp(20px,3.6vw,30px);font-weight:700;margin-top:4px}
  .card .word b{color:var(--orange);font-size:1.25em}
  .card.seen{border-color:var(--green)}
  .card.seen::after{content:'✓';position:absolute;top:-12px;right:-12px;background:var(--green);color:#fff;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800}
  .card.right{border-color:var(--green);animation:pop .4s}
  .card.hint{animation:glow 1s ease-in-out infinite}
  .card.wrong{animation:shake .45s}
  @keyframes pop{50%{transform:scale(1.12)}}
  @keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
  @keyframes glow{50%{box-shadow:0 0 0 10px #FFD23F88,0 7px 0 #E6DCC6}}
  .owlwrap{display:flex;align-items:center;gap:10px}
  .bubble{background:#fff;border-radius:22px;padding:10px 18px;font-size:clamp(18px,3.2vw,24px);font-weight:700;box-shadow:0 4px 0 #E6DCC6;max-width:420px}
  .owl{width:clamp(70px,13vw,100px);flex:0 0 auto}
  .owl.talk{animation:talk .35s ease-in-out 4}
  @keyframes talk{50%{transform:rotate(-6deg) scale(1.05)}}
  .grid3{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(8px,2vw,16px)}
  .card.sm{width:clamp(96px,19vw,150px)}
  .card.sm .em{font-size:clamp(46px,9vw,76px)}
  .card.sm .word{font-size:clamp(18px,3vw,26px)}
  .card.xs{width:clamp(90px,17vw,130px);aspect-ratio:1}
  .card.xs .em{font-size:clamp(50px,9vw,78px)}
  .card.done{opacity:.55}
  .match{display:flex;gap:clamp(30px,10vw,120px);align-items:center}
  .mcol{display:flex;flex-direction:column;gap:14px;align-items:center}
  .wordbtn{font-family:inherit;font-size:clamp(26px,4.6vw,38px);font-weight:800;color:var(--ink);background:#fff;border:5px solid transparent;border-radius:22px;padding:6px 26px;min-height:80px;min-width:150px;box-shadow:0 6px 0 #E6DCC6;cursor:pointer}
  .wordbtn b{color:var(--orange)}
  .wordbtn.sel{border-color:var(--purple);transform:scale(1.06)}
  .wordbtn.done{opacity:.4;border-color:var(--green)}
  .wordbtn.ring{border-color:var(--green);border-radius:50px;animation:pop .4s}
  .wordbtn.wrong,.tile.wrong{animation:shake .45s}
  .wordbtn.hint{animation:glow 1s ease-in-out infinite}
  .big2{min-width:180px;font-size:clamp(30px,5.4vw,44px)}
  .slots{display:flex;gap:12px}
  .slots span{width:clamp(56px,10vw,78px);height:clamp(66px,12vw,90px);border-bottom:6px solid #B9A8FF;display:grid;place-items:center;font-size:clamp(40px,8vw,62px);font-weight:800;color:var(--purple)}
  .slots span.on{animation:pop .35s}
  .tile{font-family:inherit;width:clamp(64px,12vw,86px);height:clamp(64px,12vw,86px);border:none;border-radius:20px;background:var(--yellow);box-shadow:0 6px 0 #D9A800;font-size:clamp(34px,6.5vw,50px);font-weight:800;color:var(--ink);cursor:pointer}
  .tile.used{visibility:hidden}
  .action{display:flex;align-items:center;gap:12px;background:#fff;border-radius:24px;padding:10px 20px;box-shadow:0 5px 0 #E6DCC6;cursor:pointer;max-width:520px}
  .actpic{font-size:52px;position:relative}
  .actpic .hand{position:absolute;left:4px;bottom:-14px;font-size:40px}
  .action.do .actpic{animation:pop .5s 2}
  .acttxt{font-size:clamp(18px,3vw,24px);font-weight:700}
  .acttxt b,.snd{color:var(--orange)}
  .mission{background:#FFF1C9;border:3px dashed var(--orange);border-radius:22px;padding:10px 18px;text-align:center;font-size:20px;font-weight:700;max-width:560px}
  .mission .mt{font-size:22px;font-weight:800}
  .ar{font-family:'Cairo',sans-serif;direction:rtl;font-size:15px;font-weight:400;color:#6B5E45;margin-top:4px;text-align:center}
  .star.sm2{font-size:clamp(70px,14vw,110px)}
  #parentBtn.holding{background:var(--yellow);transition:background 1.2s}
  #pg{position:fixed;inset:0;background:#2B235099;display:none;align-items:center;justify-content:center;z-index:50;padding:14px}
  #pg.open{display:flex}
  .pgbox{background:#fff;border-radius:24px;max-width:620px;width:100%;max-height:92vh;overflow:auto;padding:18px 22px;font-family:'Cairo',sans-serif;font-size:16px;line-height:1.7;user-select:text;-webkit-user-select:text}
  .pgbox h2{margin:4px 0 2px;color:var(--purple)} .pgbox h3{margin:14px 0 4px;color:var(--ink)}
  .pgbox ul{margin:0;padding-right:20px} .pgnote{color:#777;margin:0}
  .pgsay{display:flex;flex-wrap:wrap;gap:8px;direction:ltr;justify-content:flex-end}
  .pgsay button{font-family:'Baloo 2';font-size:18px;font-weight:700;border:none;background:var(--purple-l);color:var(--purple);border-radius:14px;padding:6px 14px;cursor:pointer}
  /* trace */
  #traceBox{position:relative;width:min(70vw,44vh,360px);aspect-ratio:1;background:#fff;border-radius:30px;box-shadow:0 7px 0 #E6DCC6}
  canvas{width:100%;height:100%;touch-action:none;border-radius:30px;display:block}
  .meter{width:min(70vw,380px);height:18px;background:#E6DCC6;border-radius:12px;overflow:hidden}
  .meter div{height:100%;width:0;background:var(--green);transition:width .2s}
  /* reward */
  .star{font-size:clamp(120px,28vw,200px);animation:spin 1.2s ease-out}
  @keyframes spin{from{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0)}}
  .confetti{position:fixed;top:-20px;width:12px;height:18px;border-radius:3px;animation:fall linear forwards;pointer-events:none}
  @keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
  .album{display:flex;gap:10px;background:#fff;padding:10px 16px;border-radius:20px;box-shadow:0 4px 0 #E6DCC6;font-size:40px}
  .album span{filter:grayscale(1) opacity(.25)}
  .album span.got{filter:none;animation:pop .5s}
  footer{flex:0 0 auto;text-align:center;font-family:'Cairo',sans-serif;font-size:12px;color:#9A8F7A;direction:rtl;padding-top:6px}
  .fade{animation:fadein .35s}
  @keyframes fadein{from{opacity:0;transform:translateY(14px)}}
  #title{font-weight:800;font-size:clamp(16px,3vw,22px);color:var(--purple);white-space:nowrap}
  .map{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(8px,1.6vw,14px);width:100%;max-width:820px}
  @media (max-width:640px){.map{grid-template-columns:repeat(4,1fr)}}
  .isle{position:relative;aspect-ratio:1;border:none;border-radius:26px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 0 #0002;padding:4px}
  .isle:active{transform:translateY(4px);box-shadow:0 2px 0 #0002}
  .isle .L{font-size:clamp(26px,4.4vw,40px);font-weight:800;line-height:1}
  .isle .pp{font-size:clamp(22px,3.6vw,32px);line-height:1;height:1.1em}
  .isle .pp .pic{width:1.1em;height:1.1em}
  .isle .st{position:absolute;top:-8px;right:-6px;font-size:24px}
  .c0{background:#6C4CF1}.c1{background:#FF9F1C}.c2{background:#22C07A}.c3{background:#4CC9F0}.c4{background:#FF5C9A}.c5{background:#F4B400}
  .pic{width:1em;height:1em;display:inline-block;vertical-align:middle}
  .card .em .pic{width:1em;height:1em}
  .flag{color:#C77700;font-weight:700}
  .pgreset{font-family:'Cairo';border:1px solid #ddd;background:#fafafa;border-radius:10px;padding:4px 12px;cursor:pointer}
  .acttxt .ar{text-align:right}
  .actpic .pic{width:56px;height:56px}
  main{overflow-y:auto;overflow-x:hidden;padding:6px 2px 10px}
  main.home{justify-content:flex-start}
  .sec{margin:10px 0 0;font-size:clamp(20px,3.4vw,28px);font-weight:800;align-self:flex-start;color:var(--ink)}
  .sec .ar{display:inline;font-size:15px}
  .isle .L.sm{font-size:clamp(17px,2.8vw,24px);white-space:nowrap}
  .isle.wide{grid-column:span 2;aspect-ratio:auto;min-height:84px}
  .rime{font-size:clamp(48px,10vw,80px);font-weight:800;color:var(--orange);line-height:1}
  .factory{display:flex;align-items:flex-end;font-size:clamp(56px,12vw,96px);font-weight:800;line-height:1;background:#fff;border-radius:24px;padding:6px 24px;box-shadow:0 6px 0 #E6DCC6}
  .factory .on{color:var(--purple);min-width:.6em;text-align:center;border-bottom:6px solid #B9A8FF}
  .factory .rm{color:var(--orange)}
  .tile.usedc{background:#C9F2DD;box-shadow:0 6px 0 #8ED6B0}
  .story{background:#fff;border-radius:24px;padding:14px 22px;box-shadow:0 6px 0 #E6DCC6;max-width:760px;width:100%}
  .story.mini{font-size:20px;font-weight:700;text-align:center;margin-bottom:6px}
  .sent{margin:6px 0;font-size:clamp(26px,4.8vw,40px);font-weight:800;line-height:1.35;color:#7A1F2B}
  .tw{cursor:pointer;border-radius:10px;padding:0 3px;transition:background .15s}
  .tw.key{color:var(--purple)}
  .tw.lit{background:var(--yellow)}
  .tw.found{background:#C9F2DD;outline:3px solid var(--green)}
  .tw.wrong{animation:shake .45s}
  .tw.hint{animation:glow 1s ease-in-out infinite}
  .storypics .card.xs{width:clamp(70px,12vw,96px)}
  .storypics .card.xs .em{font-size:clamp(40px,7vw,58px)}
  .teach{background:#fff;border-radius:24px;padding:14px 24px;box-shadow:0 6px 0 #E6DCC6;font-size:clamp(22px,4vw,32px);font-weight:700;max-width:720px}
  .tline{margin:8px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .tline .pic{width:2.4em;height:1.8em}
  .pill{background:var(--purple);color:#fff;border-radius:14px;padding:0 12px}
  .vow{display:flex;gap:10px;justify-content:center;margin-bottom:6px}
  .vow b{background:var(--orange);color:#fff;border-radius:14px;width:1.6em;text-align:center;font-size:1.3em}
  .qcard{background:#fff;border-radius:28px;padding:12px 28px;box-shadow:0 7px 0 #E6DCC6;text-align:center;min-width:260px}
  .qcard .em{font-size:clamp(70px,14vw,110px);line-height:1.1}
  .qcard .em .pic{width:1.4em;height:1em}
  .qs{font-size:clamp(28px,5vw,42px);font-weight:800}
  .qs.big{font-size:clamp(32px,6vw,52px);padding:18px 0}
  .blank{color:#B9A8FF;letter-spacing:2px}
  .vfirst::first-letter{color:var(--orange)}
  .train{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
  .wag{background:#6C4CF1;color:#fff;border-radius:18px 18px 8px 8px;padding:10px 18px;text-align:center;position:relative;min-width:150px}
  .wag.w2{background:#FF9F1C}.wag.w3{background:#22C07A}
  .wag b{display:block;font-size:1.5em}.wag span{font-size:.8em}
  .wag::after{content:'● ●';position:absolute;bottom:-18px;left:0;right:0;color:#333;font-size:20px}
  .sgrid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:720px}
  .sgrid .wordbtn{min-width:120px}
  .bigsay{font-size:44px;min-width:120px}
  .grade{display:flex;align-items:center;gap:18px;justify-content:center}
  .circ{width:110px;height:110px;border:5px solid var(--red);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:var(--red);line-height:1}
  .circ hr{width:60%;border:0;border-top:4px solid var(--red);margin:4px 0;transform:rotate(-25deg)}
  .sup{font-size:40px;font-weight:800;color:var(--red);font-style:italic}
  .rowp{flex-direction:row;flex-wrap:wrap;max-width:300px;justify-content:center}
  .qcard.say .em{font-size:clamp(60px,12vw,96px)}
  .sent2{font-size:clamp(24px,4.4vw,38px);line-height:1.35;color:#7A1F2B}
  .sw{border-radius:10px;padding:0 3px;transition:background .2s}
  .sw.ok{background:#C9F2DD;color:#0F7A47}
  .sw.miss{background:#FFE2B8;color:#B35A00;text-decoration:underline wavy}
  .sstatus{min-height:28px;text-align:center;font-size:18px}
  .sstatus .row{margin-top:6px}
  .btn.mic{background:var(--red);box-shadow:0 7px 0 #C23B49}
  .btn.mic.on{animation:pulse 1s infinite}
  @keyframes pulse{50%{transform:scale(1.07);box-shadow:0 0 0 12px #FF5C6C44,0 7px 0 #C23B49}}
  .skipbtn{font-family:'Cairo',sans-serif;border:none;background:none;color:#9A8F7A;font-size:15px;cursor:pointer;text-decoration:underline}
  /* ---------- responsive ---------- */
  #app{height:100vh;height:100dvh;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  img,svg{max-width:100%}
  .match{flex-wrap:wrap;justify-content:center;gap:clamp(16px,6vw,90px)}
  @media (max-width:420px){
    header{gap:6px}.iconbtn{width:44px;height:44px;font-size:21px;border-radius:14px}#title{font-size:15px}
    .dots{gap:4px}.dot{width:10px;height:10px}
    .btn{min-height:64px;min-width:150px;font-size:21px;padding:10px 22px}
    .map{grid-template-columns:repeat(3,1fr)}
    .bubble{font-size:17px;padding:8px 12px}.owl{width:58px}
    .wordbtn{min-width:110px;font-size:24px;min-height:64px;padding:4px 14px}
    .grid3{gap:8px}
  }
  @media (max-height:520px) and (orientation:landscape){
    header .iconbtn{width:42px;height:42px;font-size:20px}
    main{gap:8px;justify-content:flex-start}
    footer{display:none}
    .owl{width:52px}.bubble{font-size:16px;padding:6px 12px}
    .big{font-size:min(26vh,150px)}
    .card{width:min(22vh,150px)}.card .em{font-size:min(13vh,80px)}
    .card.sm{width:min(26vh,120px)}.card.sm .em{font-size:min(11vh,58px)}
    .card.xs{width:min(20vh,100px)}.card.xs .em{font-size:min(11vh,56px)}
    .grid3{grid-template-columns:repeat(6,auto)}
    .btn{min-height:56px;font-size:20px;padding:8px 22px}
    #traceBox{width:min(56vh,300px)}
    .map{grid-template-columns:repeat(7,1fr)}
    .qcard .em{font-size:min(16vh,80px)}
    .slots span{height:min(14vh,70px);font-size:min(11vh,50px)}
    .tile{width:min(14vh,70px);height:min(14vh,70px);font-size:min(9vh,40px)}
    .sent{font-size:min(7vh,30px)}
    .star{font-size:min(30vh,120px)}.star.sm2{font-size:min(18vh,80px)}
  }
  @media (min-width:1200px){#app{max-width:1000px}}
  html{touch-action:manipulation}
  /* ---------- landing ---------- */
  main.landing{justify-content:flex-start;gap:16px}
  .hero{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#EEE8FF,#FFF1C9);border-radius:30px;padding:16px 24px;width:100%;box-shadow:0 6px 0 #E6DCC6}
  .hero h1{margin:0;font-size:clamp(28px,5vw,46px);color:var(--purple);line-height:1.1}
  .hero .ar.arbig{font-size:clamp(16px,2.6vw,22px);text-align:right;margin:4px 0}
  .hero .tag{display:inline-block;margin:6px 0 0;background:var(--purple);color:#fff;border-radius:14px;padding:2px 14px;font-weight:700;font-family:'Cairo',sans-serif}
  .heroowl{width:clamp(84px,16vw,140px);cursor:pointer}
  .continue{font-family:inherit;border:none;background:var(--orange);color:#fff;font-size:clamp(20px,3.4vw,26px);border-radius:22px;padding:12px 24px;box-shadow:0 6px 0 #C97700;cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
  .continue .ar{color:#fff;margin:0;font-size:15px}
  .subjects{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,18px);width:100%}
  @media (max-width:640px){.subjects{grid-template-columns:repeat(2,1fr)}}
  .subj{position:relative;border:none;border-radius:28px;color:#fff;font-family:inherit;cursor:pointer;padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 7px 0 #0002;min-height:150px;justify-content:center}
  .subj:active{transform:translateY(4px);box-shadow:0 3px 0 #0002}
  .subj .si{font-size:clamp(40px,7vw,58px);line-height:1.1;font-weight:800}
  .subj .sn{font-size:clamp(22px,3.6vw,30px);font-weight:800}
  .subj .sa{font-family:'Cairo',sans-serif;font-size:16px}
  .subj .prog{margin-top:4px;background:#fff3;border-radius:12px;padding:0 10px;font-weight:700}
  .subj .soon{margin-top:4px;font-family:'Cairo',sans-serif;background:#0003;border-radius:12px;padding:0 10px;font-size:14px}
  .subj.off{filter:grayscale(.55) opacity(.8)}
  .subj.wrong{animation:shake .45s}
  .parents{width:100%;background:#fff;border-radius:28px;padding:18px clamp(16px,3vw,30px);box-shadow:0 6px 0 #E6DCC6;font-family:'Cairo',sans-serif;line-height:1.7;margin-top:6px;user-select:text;-webkit-user-select:text}
  .parents h2{margin:0;color:var(--purple);font-size:clamp(22px,3.4vw,28px)}
  .parents h3{margin:16px 0 6px;font-size:19px}
  .parents .lead{font-size:17px;margin:6px 0}
  .feat{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  @media (max-width:640px){.feat{grid-template-columns:1fr}}
  .feat div{background:#FFF7E8;border-radius:18px;padding:10px 14px}
  .feat b{display:block;font-size:17px}.feat span{font-size:15px;color:#5a5168}
  .pstats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:center}
  @media (max-width:520px){.pstats{grid-template-columns:repeat(3,1fr)}}
  .pstats div{background:#EEE8FF;border-radius:16px;padding:6px}
  .pstats b{display:block;font-size:20px;color:var(--purple);direction:ltr}.pstats span{font-size:14px}
  .bar{height:14px;background:#E6DCC6;border-radius:10px;overflow:hidden;margin-top:10px}.bar div{height:100%;background:var(--green)}
  .parents ol{margin:0;padding-right:22px}
  .wordbtn.inst{font-family:'Cairo',sans-serif;font-size:18px;min-height:56px}
  .priv,.ver,.ios{font-size:14px;color:#7a7088;margin:8px 0 0}
  .ver{text-align:center}
  @media (max-height:520px) and (orientation:landscape){.hero{padding:10px 16px}.subj{min-height:110px}}
  /* responsive fixes v1.0 */
  .album{flex-wrap:wrap;justify-content:center;max-width:100%;font-size:clamp(26px,5vw,40px)}
  .map{grid-template-columns:repeat(7,minmax(0,1fr))}
  @media (max-width:640px){.map{grid-template-columns:repeat(4,minmax(0,1fr))}}
  @media (max-width:420px){.map{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .isle .L.sm{white-space:normal;text-align:center;line-height:1.05;font-size:clamp(14px,2.4vw,22px);word-break:break-word}
  .isle{min-width:0}
  .qs{line-height:1.25}.blank{white-space:nowrap}
  @media (max-height:520px) and (orientation:landscape){
    main>.owlwrap{display:none}
    main.landing>.hero .owl,main.home>.owlwrap{display:block}
    .match{flex-direction:column;gap:10px}.mcol{flex-direction:row;flex-wrap:wrap;justify-content:center}
    .rowp{max-width:none}
    .storypics{display:none}
    .bigsay{min-height:48px;font-size:28px;padding:4px 18px}
    .qcard{padding:6px 18px}
    .grid3{grid-template-columns:repeat(6,minmax(0,1fr))}
    .story{padding:8px 16px}
    .counter{font-size:24px}
    .mission{font-size:16px;padding:6px 12px}.mission .ar{display:none}
    .teach{font-size:20px;padding:8px 16px}
  }
  .brandline{margin:6px 0 0;font-weight:800;color:var(--ink);font-size:16px}.brandline .ar{display:inline;font-size:14px}
  .hero>div{min-width:0}.hero .ar.arbig{direction:rtl;text-align:start;line-height:1.5;color:#4a3f5e;margin:6px 0}.hero h1{word-break:break-word}