/* Foundation identity: sky blue, violet and orange on soft white. The exercise screens keep the Hessa Slides blue. */
@font-face{font-family:"Tajawal";font-weight:400;font-display:swap;src:url(../fonts/tajawal-arabic-400-normal.woff2) format("woff2")}
@font-face{font-family:"Tajawal";font-weight:500;font-display:swap;src:url(../fonts/tajawal-arabic-500-normal.woff2) format("woff2")}
@font-face{font-family:"Tajawal";font-weight:700;font-display:swap;src:url(../fonts/tajawal-arabic-700-normal.woff2) format("woff2")}
@font-face{font-family:"Tajawal";font-weight:800;font-display:swap;src:url(../fonts/tajawal-arabic-800-normal.woff2) format("woff2")}
:root{
  --pri:#1a6cf5;--pri2:#0f52c9;--vi:#7c5cf0;--or:#ff8a1f;--or2:#ffb02e;--ok:#21a35b;--okbg:#def5e6;--bad:#e5484d;--badbg:#fde7e8;
  --ink:#14305c;--muted:#607089;--line:#e3e9f3;--paper:#fff;--bg:#f2f6fd;--sky1:#7cc4fb;--sky2:#d9efff;--read:"Noto Naskh Arabic",Tajawal,serif;--fz:1.15rem;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:Tajawal,"Segoe UI",Tahoma,sans-serif;font-size:16px;line-height:1.55;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--or);outline-offset:2px;border-radius:8px}

/* layout: the menu sits on the left, as in the picture */
.shell{direction:ltr;display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{direction:rtl;background:#fff;border-inline-start:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.logo{display:block;text-align:center;line-height:1.1;font-weight:800}
.logo b{display:block;font-size:2.2rem;background:linear-gradient(180deg,#ffb02e,#ff7a18);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo span{display:block;font-size:1.45rem;color:var(--pri2)}
.menu{display:flex;flex-direction:column;gap:6px}
.menu a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;color:#42536f;font-weight:700}
.menu a:hover{background:#f1f5fd}
.menu a[aria-current=page]{background:#e7eefe;color:var(--pri2)}
.menu svg{width:24px;height:24px;flex:none}
.side .botcorner{margin-top:auto;width:120px;align-self:center}
.page{direction:rtl;min-width:0;padding:14px 20px 28px}
.bar{display:flex;align-items:center;gap:12px;margin-bottom:12px;position:relative}
.search{flex:0 1 320px;position:relative}
.search input{width:100%;font:inherit;padding:10px 40px 10px 14px;border:1px solid var(--line);border-radius:999px;background:#fff}
.search svg{position:absolute;inset-inline-end:12px;top:11px;width:20px;height:20px;color:var(--pri)}
.hits{position:absolute;z-index:20;top:48px;inset-inline:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 30px rgba(20,48,92,.14);padding:6px;max-height:320px;overflow:auto}
.hits a{display:block;padding:8px 12px;border-radius:9px;font-weight:700}.hits a:hover{background:#f1f5fd}
.bar .sp{margin-inline-start:auto}
.chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-weight:800}
.ava{width:34px;height:34px;border-radius:50%;background:#e7eefe;overflow:hidden;display:grid;place-items:center}
.ava img{width:30px}
.bellb{position:relative;width:42px;height:42px;background:#fff;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--or)}
.bellb i{position:absolute;top:6px;inset-inline-end:8px;width:9px;height:9px;border-radius:50%;background:var(--bad);border:2px solid #fff}
.pop{position:absolute;z-index:20;top:50px;inset-inline-end:0;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(20,48,92,.16);padding:8px}
.pop a{display:block;padding:9px 12px;border-radius:9px;font-weight:700}.pop a:hover{background:#f1f5fd}
.pop p{margin:0;padding:6px 12px;color:var(--muted);font-size:.92rem}

/* scene */
.scene{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,var(--sky1),var(--sky2) 62%,#fdeecb)}
.scene>svg.bg{position:absolute;inset:auto 0 0 0;width:100%;height:auto;min-height:62%;pointer-events:none}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:16px;padding:22px;min-height:380px;align-items:center}
.hero>*{position:relative;z-index:1}
.greet{display:flex;align-items:flex-end;gap:6px;min-width:0}
.bubble{background:#fff;border-radius:22px;padding:12px 18px;box-shadow:0 10px 26px rgba(20,48,92,.13);position:relative;animation:pop .35s ease-out}
.bubble h2{margin:0;font-size:1.5rem;font-weight:800}
.bubble p{margin:2px 0 0;color:var(--muted)}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 6px 18px rgba(20,48,92,.06)}
.lvl{padding:14px 16px}
.lvl .t{display:flex;gap:10px;align-items:center}
.lvl .t i{font-style:normal;font-size:1.8rem;width:52px;height:52px;background:#e3f6e9;border-radius:14px;display:grid;place-items:center;flex:none}
.lvl small{color:var(--muted);display:block}
.lvl b{font-size:1.05rem;font-weight:800;display:block}
.prg{height:10px;border-radius:9px;background:#e8edf5;overflow:hidden;margin:10px 0 6px}
.prg i{display:block;height:100%;background:linear-gradient(90deg,#3bc26f,#21a35b);border-radius:9px;transition:width .4s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:14px;font-weight:800;background:#fff;border:1px solid var(--line);transition:transform .12s}
.btn:active{transform:translateY(2px)}
.btn.or{background:linear-gradient(180deg,var(--or2),var(--or));border:0;color:#fff;box-shadow:0 5px 0 #d96f0c}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 4px 0 var(--pri2)}
.btn.vi{background:var(--vi);border-color:var(--vi);color:#fff}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;box-shadow:none;cursor:default}
.ach{padding:12px 14px}
.ach h3{margin:0 0 6px;font-size:1.05rem;font-weight:800;display:flex;justify-content:space-between;align-items:center}
.ach h3 a{font-size:.82rem;color:var(--pri);font-weight:700}
.ach li{list-style:none;display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid #eef2f8}
.ach li:first-child{border:0}
.ach ul{margin:0;padding:0}
.ach li i{font-style:normal;font-size:1.4rem}
.ach li b{font-weight:800;display:block;line-height:1.2}
.ach li small{color:var(--muted)}
.sec{margin-top:16px}
.sech{margin:0 0 10px;font-size:1.3rem;font-weight:800;text-align:center}
.stages{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}
.stg{position:relative;background:var(--b);border:1px solid var(--d);border-radius:18px;padding:18px 6px 10px;min-height:170px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;transition:transform .15s}
.stg:hover{transform:translateY(-3px)}
.stg .n{position:absolute;top:-8px;inset-inline-start:-6px;width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.85rem;border:2px solid #fff}
.stg i{font-style:normal;font-size:2.5rem;line-height:1.3;font-weight:800;color:var(--c)}
.stg b{font-size:.95rem;font-weight:800;line-height:1.25}
.stg small{background:#fff;border-radius:99px;padding:0 10px;font-size:.76rem;color:var(--muted);margin-top:auto}
.stg.off{filter:grayscale(.75);opacity:.72}
.s0{--b:#e6f8ea;--d:#c8ecd3;--c:#21a35b}.s1{--b:#e4f2fe;--d:#c6e2fb;--c:#1a6cf5}.s2{--b:#feeceb;--d:#fad3d0;--c:#e5484d}.s3{--b:#fff4d9;--d:#fbe3a9;--c:#ee8c0b}.s4{--b:#f1ebfe;--d:#ddd0fb;--c:#7c5cf0}.s5{--b:#ebe9fe;--d:#d4d0fb;--c:#5146d8}.s6{--b:#fdeaf0;--d:#f9cfdc;--c:#d6336c}.s7{--b:#fff0dc;--d:#fcd9ab;--c:#e8590c}.s8{--b:#e2f7f5;--d:#bfeae5;--c:#0c8f83}

/* map */
.head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.head h1{margin:0;font-size:1.7rem;font-weight:800;line-height:1.3;flex:1}
.back{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:1.2rem;font-weight:800;flex:none}
.head img{width:92px}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px}
.tabs a{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-weight:700;font-size:.92rem}
.tabs a[aria-current=true]{background:var(--pri);border-color:var(--pri);color:#fff}
.tabs a.off{opacity:.55}
.map{padding:22px 16px 60px;min-height:420px}
.path{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;align-items:center}
.node{display:flex;align-items:center;gap:10px;width:min(320px,92%);background:rgba(255,255,255,.95);border:2px solid #fff;border-radius:999px;padding:7px 14px 7px 8px;box-shadow:0 8px 18px rgba(20,48,92,.12);transition:transform .15s;text-align:right}
.node:hover{transform:scale(1.03)}
.node:nth-child(4n+1){transform:translateX(-70px)}.node:nth-child(4n+3){transform:translateX(70px)}
.node i{flex:none;width:40px;height:40px;border-radius:50%;background:#dbe5f3;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800}
.node.done i{background:var(--ok)}.node.now i{background:var(--pri);animation:pulse 1.6s infinite}
.node b{font-weight:800;line-height:1.25;display:block;font-size:.95rem}
.node small{color:var(--muted)}
.node.off{opacity:.78}

/* lesson hub */
.steps{display:flex;flex-direction:column;gap:10px;max-width:760px;margin-inline:auto}
.step{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 14px;width:100%;text-align:right}
.step .ic{font-size:1.5rem;width:46px;height:46px;background:#eef3fd;border-radius:12px;display:grid;place-items:center;flex:none}
.step b{font-weight:800;display:block;line-height:1.3}
.step small{color:var(--muted)}
.step .st{margin-inline-start:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--pri);flex:none}
.step.ok .st{background:var(--ok)}
.step.off{opacity:.62}.step.off .st{background:#c6cdd8}
.step.now{border:2px solid var(--pri)}
.stars3{color:#f4b400;font-size:.95rem;letter-spacing:1px}
.mk{margin-top:14px;padding:14px 16px;max-width:760px;margin-inline:auto}
.mk h2{margin:0;font-size:1.15rem;font-weight:800}
.mk p{margin:2px 0 10px;color:var(--muted);font-size:.92rem}
.mkrow{display:flex;flex-wrap:wrap;gap:8px}

/* learn */
.learn{max-width:820px;margin-inline:auto}
.teach{display:flex;gap:10px;align-items:flex-end;margin-bottom:12px}
.teach img{width:96px;flex:none}
.teach .bubble{flex:1;background:#fff7dd;font-weight:700;font-size:1.05rem}
.lbody{padding:18px 20px;font-size:var(--fz);line-height:1.95;min-height:220px;animation:rise .28s ease-out}
.lbody p{margin:0 0 10px}
.lbody h3{margin:0 0 8px;font-size:1.2em;font-weight:800;color:var(--pri2)}
.lbody ul,.lbody ol{margin:0 0 12px;padding-inline-start:26px;font-family:var(--read);font-size:1.12em}
.lbody .note{background:#fff5dc;border:1px solid #f1dca4;border-radius:12px;padding:9px 14px;font-weight:700}
.lbody .bigl{text-align:center;font-family:var(--read);font-size:2.3em;font-weight:700;margin:6px 0 10px;line-height:1.5;color:var(--pri2)}
.tw{overflow-x:auto;margin:0 0 14px}
.lbody table{border-collapse:collapse;width:100%;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.lbody th{background:var(--pri);color:#fff;padding:8px 12px;font-weight:700;text-align:right;white-space:nowrap}
.lbody td{padding:7px 12px;border-top:1px solid var(--line);font-family:var(--read);font-size:1.1em}
.lbody tbody tr:nth-child(even){background:#f6f9fe}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 14px}
.tiles div{background:#f3f7ff;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;display:flex;flex-direction:column;gap:2px}
.tiles b{font-size:1.25em;font-weight:800;color:var(--pri2)}
.tiles span{font-family:var(--read)}
.lnav{display:flex;justify-content:space-between;gap:10px;margin-top:12px;align-items:center}
.lnav small{color:var(--muted);font-weight:700}
.lets{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:12px}
.lets button{aspect-ratio:1;background:var(--b);border:1px solid var(--d);border-radius:14px;font-family:var(--read);font-weight:700;font-size:clamp(1.3rem,3.4vw,2rem);color:var(--c);transition:transform .12s}
.lets button:hover{transform:scale(1.07)}
.lets button[aria-pressed=true]{outline:3px solid var(--pri)}
.wordsbox{margin-top:12px;padding:12px 14px}
.wordsbox h3{margin:0 0 8px;font-weight:800}
.words{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.word{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;text-align:center;display:flex;flex-direction:column;gap:0;align-items:center;min-height:86px;justify-content:center}
.word:hover{border-color:var(--pri)}
.word i{font-style:normal;font-size:1.8rem;line-height:1.3}
.word span{font-family:var(--read);font-size:1.15rem;font-weight:700}
.say{display:flex;flex-wrap:wrap;gap:8px}
.say button{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-family:var(--read);font-size:1.15rem;font-weight:600}
.say button:hover,.say button.on{border-color:var(--pri);background:#eef4ff}

/* the player: Hessa Slides blue on white, nothing else on screen */
body.playing .shell{display:block}
body.playing .side,body.playing .bar{display:none}
body.playing .page{padding:0}
.pl{min-height:100vh;display:flex;flex-direction:column;background:#fff}
.plt{display:flex;align-items:center;gap:12px;padding:14px 18px;max-width:900px;width:100%;margin-inline:auto}
.plt button{width:34px;height:34px;font-size:1.3rem;color:#8b97ab;flex:none}
.plb{flex:1;height:14px;background:#e8edf5;border-radius:9px;overflow:hidden}
.plb i{display:block;height:100%;background:linear-gradient(90deg,#6ea5ff,var(--pri));border-radius:9px;transition:width .35s}
.plb.hot i{background:linear-gradient(90deg,#ffd066,var(--or))}
.hearts{font-weight:800;display:flex;gap:4px;align-items:center;color:var(--bad);flex:none}
.combo{text-align:center;font-weight:800;color:var(--or);min-height:1.5em;font-size:.95rem}
.plm{flex:1;width:100%;max-width:720px;margin-inline:auto;padding:6px 18px 150px;animation:rise .25s ease-out}
.plq{display:flex;align-items:flex-end;gap:8px;margin-bottom:14px}
.plq img{width:84px;flex:none}
.plq h2{margin:0;font-size:1.3rem;font-weight:800;flex:1}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt{background:#fff;border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;padding:14px 12px;font-weight:700;font-size:1.12rem;font-family:var(--read);min-height:60px;transition:transform .1s,border-color .12s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.opt:hover{border-color:#9dc0fb}
.opt:active{transform:translateY(2px)}
.opt.sel{border-color:var(--pri);background:#eef4ff;color:var(--pri2)}
.opt.right{border-color:var(--ok);background:var(--okbg);color:#12713c}
.opt.wrong{border-color:var(--bad);background:var(--badbg);color:#b3262b;animation:shake .35s}
.opt.gone{opacity:.3;pointer-events:none}
.opt i{font-style:normal;font-size:3rem;line-height:1.2}
.spk{display:flex;align-items:center;gap:10px;margin:0 auto 14px;background:#eef4ff;color:var(--pri);border-radius:999px;padding:12px 26px;font-size:1.4rem;font-weight:800;width:max-content;font-family:var(--read)}
.spk:hover{background:#e0ebff}
.mat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mat>div{display:flex;flex-direction:column;gap:10px}
.gap{font-family:var(--read);font-size:1.6rem;font-weight:700;text-align:center;background:#f6f9fe;border-radius:16px;padding:18px 12px;margin-bottom:14px;line-height:1.7}
.gap u{text-decoration:none;display:inline-block;min-width:64px;border-bottom:3px solid var(--pri);color:var(--pri2);padding:0 6px}
.ans{min-height:64px;border-bottom:2px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;padding:8px 0;margin-bottom:16px;align-content:flex-start}
.tok{background:#fff;border:2px solid var(--line);border-bottom-width:4px;border-radius:12px;padding:7px 14px;font-family:var(--read);font-weight:700;font-size:1.15rem;animation:pop .18s}
.toks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.plf{position:fixed;inset:auto 0 0 0;border-top:2px solid var(--line);background:#fff;z-index:5}
.plf>div{max-width:720px;margin-inline:auto;padding:14px 18px calc(14px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center;justify-content:space-between}
.plf.good{background:var(--okbg);border-color:#bfe9cd}
.plf.bad{background:var(--badbg);border-color:#f8cbcd}
.fb{flex:1;font-weight:800;min-width:0}
.fb small{display:block;font-weight:500}
.plf.good .fb{color:#12713c}.plf.bad .fb{color:#b3262b}
.plf.good .btn.pri{background:var(--ok);border-color:var(--ok);box-shadow:0 4px 0 #177a43}
.plf.bad .btn.pri{background:var(--bad);border-color:var(--bad);box-shadow:0 4px 0 #bb2e33}

/* reward */
.win{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px 18px;background:linear-gradient(180deg,#eaf3ff,#fff7e8);position:relative;overflow:hidden}
.win img.big{width:190px}
.win h1{margin:0;font-size:2.4rem;font-weight:800;color:#e9860a}
.win p{margin:0;color:var(--muted);font-weight:700}
.star3{display:flex;gap:8px;font-size:2.6rem}
.star3 i{font-style:normal;color:#d9dfe9;animation:pop .4s both}
.star3 i.on{color:#f4b400}
.star3 i:nth-child(2){animation-delay:.18s}.star3 i:nth-child(3){animation-delay:.36s}
.wstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(420px,100%)}
.wstats div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}
.wstats b{display:block;font-size:1.3rem;font-weight:800;color:var(--pri2)}
.wstats small{color:var(--muted)}
.wbtns{display:flex;flex-direction:column;gap:8px;width:min(340px,100%);margin-top:6px}
.conf{position:absolute;top:-16px;width:10px;height:14px;border-radius:3px;animation:fall 2.6s linear forwards;pointer-events:none}

/* welcome */
.wel{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.wel>*{position:relative;z-index:1}
.wel .scene{position:absolute;inset:0;border-radius:0;z-index:0}
.wel .logo b{font-size:clamp(3rem,10vw,4.4rem)}.wel .logo span{font-size:clamp(1.9rem,6vw,2.8rem)}
.wel .wb{width:min(280px,62vw);margin:6px 0}
.wel .bubble{margin-bottom:8px;max-width:340px}
.wel .wbtns{gap:12px}

/* lists */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.badge{padding:14px;text-align:center}
.badge i{font-style:normal;font-size:2.4rem;display:block}
.badge b{font-weight:800;display:block}
.badge small{color:var(--muted)}
.badge.off{filter:grayscale(1);opacity:.55}
.prof{display:flex;gap:14px;align-items:center;padding:14px 16px;margin-bottom:14px}
.prof img{width:76px}
.prof h2{margin:0;font-weight:800}
.prof p{margin:0;color:var(--muted)}
.box{padding:14px 16px;margin-bottom:12px}
.box h2{margin:0 0 8px;font-size:1.2rem;font-weight:800}
.field{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}
.field label,.field>span{min-width:120px;font-weight:700}
.field input{font:inherit;padding:8px 12px;border:1px solid var(--line);border-radius:10px;min-width:0;flex:0 1 240px}
.seg{display:inline-flex;gap:4px}
.seg button{padding:7px 14px;border-radius:9px;border:1px solid var(--line);background:#fff;font-weight:700}
.seg button[aria-pressed=true]{background:var(--pri);border-color:var(--pri);color:#fff}
.toast{position:fixed;z-index:60;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 20px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.25);max-width:calc(100vw - 32px)}

/* the robot: gentle life on every pose */
.bot{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 6px 8px rgba(20,48,92,.14));transform-origin:50% 90%;animation:float 3.4s ease-in-out infinite;will-change:transform}
.bot.hop{animation:hop .6s ease-out}
.bot.sad{animation:shake .4s}
.bot.wave{animation:rock 1.1s ease-in-out 2,float 3.4s ease-in-out 2.2s infinite}
.bot.in{animation:enter .55s cubic-bezier(.2,1.4,.4,1),float 3.4s ease-in-out .6s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hop{0%{transform:scale(1,1)}20%{transform:scale(1.12,.86)}50%{transform:translateY(-22px) scale(.95,1.08)}80%{transform:scale(1.08,.92)}100%{transform:none}}
@keyframes rock{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
@keyframes enter{from{transform:translateY(40px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(26,108,245,.45)}50%{box-shadow:0 0 0 9px rgba(26,108,245,0)}}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

@media (max-width:1180px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ach{grid-column:1/-1}.stages{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:820px){
  .shell{display:block}
  .side{position:fixed;z-index:30;inset:auto 0 0 0;height:auto;padding:4px 4px calc(4px + env(safe-area-inset-bottom));flex-direction:row;border:0;border-top:1px solid var(--line)}
  .side .logo,.side .botcorner{display:none}
  .menu{flex-direction:row;width:100%;gap:0}
  .menu a{flex:1 1 0;flex-direction:column;gap:1px;padding:6px 2px;font-size:.68rem;text-align:center;min-width:0;border-radius:10px}
  .menu svg{width:21px;height:21px}
  .page{padding:10px 16px 84px}
  .hero{grid-template-columns:minmax(0,1fr);padding:14px;min-height:0}
  .stages{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
  .search{flex:1}
  .chip span{display:none}
  .node:nth-child(4n+1){transform:translateX(-20px)}.node:nth-child(4n+3){transform:translateX(20px)}
  .head h1{font-size:1.35rem}.head img{width:68px}
  .teach img{width:72px}.plq img{width:64px}
  .lets{grid-template-columns:repeat(5,minmax(0,1fr))}
  .opt i{font-size:2.5rem}
}
@media (prefers-reduced-motion:reduce){*,.bot{animation:none!important;transition:none!important}}

/* home on desktop: the owner's finished design is the picture; real text and links sit on it, placed in cqw (1cqw = 1% of the picture's width) */
body.fullhome{background:#fdf3e2}
body.fullhome .shell{display:block}
body.fullhome .side,body.fullhome .bar{display:none}
body.fullhome .page{padding:0}
.hm{position:relative;width:min(100vw,177.68vh);margin-inline:auto;aspect-ratio:1672/941;container-type:inline-size;background:url(../img/tasis-ar/home.webp) center/100% 100% no-repeat;overflow:hidden;direction:ltr}
.hm *{position:absolute}
.hm span,.hm b,.hm small{position:static}
.hm a,.hm button{display:flex;align-items:center}
.hmlogo{left:1.6cqw;top:3cqw;width:14.4cqw;text-align:center;direction:rtl;line-height:1.05;font-weight:800;display:block!important}
.hmlogo b{display:block;font-size:3.2cqw;background:linear-gradient(180deg,#ffb02e,#ff7a18);-webkit-background-clip:text;background-clip:text;color:transparent}
.hmlogo span{display:block;font-size:2.1cqw;color:#2a2fa8}
.hmnav{left:1.1cqw;width:15.9cqw;height:4.3cqw;padding-left:5.6cqw;direction:rtl;justify-content:flex-end;font-size:1.32cqw;font-weight:800;color:#3a3f8f;border-radius:1cqw}
.hmnav:hover{background:rgba(120,110,240,.08)}
.hmsearch{left:21cqw;top:2.2cqw;width:28.6cqw;height:3.4cqw;border:0;background:none;font:700 1.1cqw Tajawal,sans-serif;color:var(--ink);direction:rtl;padding:0 1.2cqw 0 3cqw;outline-offset:-3px;border-radius:2cqw}
.hmsearch::placeholder{color:#7a86a0}
.hmhits{left:21cqw;top:5.9cqw;width:28.6cqw;z-index:5;direction:rtl;background:#fff;border-radius:1cqw;box-shadow:0 1cqw 2cqw rgba(20,48,92,.15);padding:.4cqw;max-height:22cqw;overflow:auto}
.hmhits a{position:static;display:block;padding:.5cqw .8cqw;font-size:1cqw;font-weight:700;border-radius:.6cqw}
.hmhits a:hover{background:#f1f5fd}
.hmbell{left:79.7cqw;top:1.6cqw;width:3.9cqw;height:3.9cqw;border-radius:50%}
.hmme{left:85cqw;top:1.7cqw;width:13.2cqw;height:3.9cqw;border-radius:2cqw}
.hmme span{position:absolute;left:1cqw;width:7.2cqw;direction:rtl;text-align:center;font-size:1.2cqw;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmsay{left:36.9cqw;top:9.2cqw;width:16cqw;height:6.4cqw;direction:rtl;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:.1cqw}
.hmsay b{font-size:1.75cqw;font-weight:800;color:#14305c;line-height:1.2}
.hmsay small{font-size:1.02cqw;font-weight:700;color:#5b6a86;line-height:1.3}
.hmlv{left:51cqw;top:20.8cqw;width:18cqw;direction:rtl;text-align:right}
.hmlv small{display:block;font-size:1.05cqw;font-weight:700;color:#5b6a86}
.hmlv b{display:block;font-size:1.6cqw;font-weight:800;color:#14305c;line-height:1.3}
.hmbar{height:1cqw;border-radius:1cqw;background:#e7eaef;overflow:hidden;direction:ltr}
.hmbar i{position:absolute;left:0;top:0;bottom:0;border-radius:1cqw;background:var(--c,#23b04f)}
.hmnum{left:51cqw;top:28.8cqw;width:5.4cqw;font-size:.95cqw;font-weight:700;color:#5b6a86;direction:rtl;text-align:left}
.hmgo{left:43.1cqw;top:30cqw;width:25.7cqw;height:4.5cqw;border-radius:1cqw;justify-content:center;direction:rtl;padding-right:4.4cqw;color:#fff;font-size:1.65cqw;font-weight:800}
.hmgo:hover{filter:brightness(1.05)}
.hmachT{left:75.6cqw;top:19.6cqw;width:21cqw;direction:rtl;text-align:left;font-size:1.35cqw;font-weight:800;color:#14305c}
.hmall{left:91.6cqw;top:19.8cqw;font-size:.95cqw;font-weight:700;color:#4b45d6}
.hmrow{left:79.4cqw;width:12cqw;direction:rtl;text-align:left}
.hmrow b{display:block;font-size:1.15cqw;font-weight:800;color:#14305c;line-height:1.2}
.hmrow small{display:block;font-size:.85cqw;color:#5b6a86}
.hmval{left:91.85cqw;width:4.5cqw;height:2.6cqw;display:flex;align-items:center;justify-content:center;font-size:1.25cqw;font-weight:800;color:#14305c}
.hmst{top:41.6cqw;height:12.8cqw;display:block!important;border-radius:1.2cqw;transition:transform .15s}
.hmst:hover{transform:translateY(-.3cqw)}
.hmst b{position:absolute;left:.3cqw;right:.3cqw;top:6.5cqw;direction:rtl;text-align:center;font-size:1cqw;font-weight:800;color:#14305c;line-height:1.2}
.hmst .nm{position:absolute;top:-.95cqw;right:-.35cqw;width:2.4cqw;height:2.4cqw;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.05cqw;font-weight:800}
.hmst .hmbar{left:.8cqw;right:.8cqw;top:10.1cqw;height:.7cqw}
.hmst.off{filter:saturate(.75)}

/* a display font for the cartoon screens: round, friendly and clear for children */
@font-face{font-family:"Baloo Bhaijaan";font-weight:700;font-display:swap;src:url(../fonts/th-baloo-bhaijaan-2-arabic-700-normal.woff2) format("woff2")}
:root{--disp:"Baloo Bhaijaan",Tajawal,sans-serif}
h1,h2,h3,.sech,.hm b,.hm a,.hm .hmachT,.mp b,.mptitle,.logo,.btn{font-family:var(--disp);font-weight:700;letter-spacing:0}

/* the lesson map: the owner's background, with stages that really open */
body.fullmap{background:#fdf3e2}
body.fullmap .bar{display:none}
.mpw{width:100%}
.mp{position:relative;width:100%;aspect-ratio:1672/941;container-type:inline-size;background:url(../img/tasis-ar/map/bg.webp) center/100% 100% no-repeat;overflow:hidden;direction:ltr}
.mpst{position:absolute;display:block;transition:transform .18s}
.mpst:hover{transform:translateY(-.4cqw) scale(1.04)}
.mpst img{width:100%;display:block}
.mpst.now img{animation:glow 2s ease-in-out infinite}
.mplab{position:absolute;transform:translateX(-50%);background:rgba(255,255,255,.94);border-radius:2cqw;padding:.2cqw 1cqw;direction:rtl;white-space:nowrap;color:#14305c;font-size:1.3cqw;line-height:1.5;box-shadow:0 .3cqw .8cqw rgba(20,48,92,.16);font-family:var(--disp);font-weight:700;pointer-events:none}
.mplab.now{background:var(--pri);color:#fff}
.mplab.off{color:#6b7688}
.mpdone{position:absolute;width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3cqw;font-weight:800;border:.2cqw solid #fff}
.mprobot{position:absolute;left:71.6cqw;top:2.3cqw;width:22cqw;animation:float 3.4s ease-in-out infinite;filter:drop-shadow(0 .5cqw .6cqw rgba(20,48,92,.2));pointer-events:none}
.mptitle{position:absolute;left:33cqw;top:1.6cqw;width:34cqw;text-align:center;direction:rtl;background:rgba(255,255,255,.92);border-radius:3cqw;padding:.5cqw 1cqw;color:#14305c;box-shadow:0 .4cqw 1cqw rgba(20,48,92,.14)}
.mptitle b{display:block;font-size:2.6cqw;line-height:1.3}
.mptitle small{display:block;font-size:1.15cqw;font-family:Tajawal,sans-serif;font-weight:700;color:var(--muted)}
.mpback{position:absolute;left:1.6cqw;top:1.6cqw;height:3.6cqw;padding:0 1.6cqw;background:rgba(255,255,255,.94);border-radius:2cqw;display:flex;align-items:center;font-size:1.25cqw;color:#14305c;direction:rtl;box-shadow:0 .3cqw .8cqw rgba(20,48,92,.14);font-family:var(--disp);font-weight:700}
.mppanel{position:absolute;top:0;bottom:0;right:0;width:33cqw;background:rgba(255,255,255,.97);direction:rtl;padding:1.4cqw 1.6cqw;overflow:auto;box-shadow:-.6cqw 0 2cqw rgba(20,48,92,.18);animation:slidein .25s ease-out}
.mppanel h2{margin:0;font-size:1.9cqw;line-height:1.3;color:#14305c}
.mppanel p{margin:.2cqw 0 .8cqw;font-size:1.05cqw;color:var(--muted)}
.mpx{position:absolute;top:1cqw;left:1cqw;width:2.8cqw;height:2.8cqw;border-radius:50%;background:#eef2f8;display:flex;align-items:center;justify-content:center;font-size:1.3cqw;font-weight:800}
.mpl{display:flex;align-items:center;gap:.8cqw;padding:.7cqw .8cqw;border:.1cqw solid var(--line);border-radius:1.2cqw;margin-top:.6cqw;background:#fff;transition:transform .12s}
.mpl:hover{transform:translateX(-.3cqw);border-color:var(--pri)}
.mpl i{flex:none;width:3cqw;height:3cqw;border-radius:50%;background:#dbe5f3;color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:1.2cqw;font-weight:800}
.mpl.done i{background:var(--ok)}.mpl.now i{background:var(--pri)}
.mpl.off{opacity:.65}
.mpl span{min-width:0}
.mpl small{display:block;font-size:.95cqw;color:var(--muted)}
.mpl b{display:block;font-size:1.25cqw;line-height:1.3;color:#14305c}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 .3cqw rgba(255,255,255,.7))}50%{filter:drop-shadow(0 0 1.3cqw rgba(255,240,140,1))}}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
@media (min-width:821px){body.fullmap .shell{display:block}body.fullmap .side{display:none}body.fullmap .page{padding:0}.mpw{width:min(100vw,177.68vh);margin-inline:auto}}
@media (max-width:820px){
  body.fullmap .page{padding:0 0 64px}
  .mpw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mp{width:1150px}
  .mppanel{position:fixed;inset:auto 0 64px 0;width:auto;max-height:70vh;padding:16px;z-index:25;border-radius:20px 20px 0 0;animation:none}
  .mppanel h2{font-size:1.3rem}.mppanel p{font-size:.9rem;margin:2px 0 8px}
  .mpx{width:34px;height:34px;font-size:1rem;top:12px;left:12px}
  .mpl{gap:10px;padding:8px 10px;border-radius:12px;margin-top:8px}.mpl i{width:34px;height:34px;font-size:.9rem}.mpl small{font-size:.8rem}.mpl b{font-size:1rem}
}

/* the lesson page on desktop: the owner's design, with live parts placed on it */
.ls{position:relative;width:min(100vw,177.68vh);margin-inline:auto;aspect-ratio:1672/941;container-type:inline-size;background:url(../img/tasis-ar/lesson.webp) center/100% 100% no-repeat;overflow:hidden;direction:ltr}
.ls>*{position:absolute}
.lsz{display:block;border-radius:1.4cqw;transition:background .12s}
.lsz:hover{background:rgba(26,108,245,.07)}
.lstile{border-radius:1.2cqw;cursor:pointer;transition:transform .12s,box-shadow .12s}
.lstile:hover{transform:translateY(-.25cqw) scale(1.03);box-shadow:0 .5cqw 1.1cqw rgba(20,48,92,.16)}
.lstile:active{transform:scale(.97)}
.lstile[aria-pressed=true]{box-shadow:0 0 0 .3cqw var(--pri)}
.lsbar{left:13.4cqw;top:2.05cqw;width:32.4cqw;height:1.9cqw;border-radius:1cqw;background:#e6eaef;overflow:hidden}
.lsbar i{display:block;height:100%;border-radius:1cqw;background:linear-gradient(90deg,#46c75f,#23a544);transition:width .35s}
.lstitle{left:25.8cqw;top:7.2cqw;width:36.4cqw;height:10.6cqw;direction:rtl;background:#fcfcfa;border-radius:0 5cqw 5cqw 0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1cqw;gap:.1cqw}
.lstitle small{font-size:1.1cqw;font-weight:700;color:#6a6fd0}
.lstitle b{font-family:var(--disp);font-size:2.3cqw;line-height:1.25;color:#14305c}
.lstitle b em{font-style:normal;color:#f0781c}
.lstitle span{font-size:1.02cqw;color:#556278;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.lspanel{left:11.2cqw;top:21cqw;width:80.8cqw;height:28.2cqw;direction:rtl;background:#fdf8ee;border-radius:2cqw;padding:1.4cqw 2cqw;overflow:auto;font-size:max(14px,1.35cqw);line-height:1.85;animation:rise .25s ease-out}
.lspanel .card,.lspanel.lbody{box-shadow:none;border:0;min-height:0}
.lspanel table,.lspanel th,.lspanel td{font-size:1em}
.lsword{left:11.2cqw;top:21cqw;width:80.8cqw;height:28.2cqw;direction:rtl;background:#fdf8ee;border-radius:2cqw;padding:1cqw 1.6cqw;display:flex;gap:1.6cqw;animation:pop .22s ease-out;z-index:3}
.lsbig{flex:none;width:13cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border-radius:1.6cqw;box-shadow:0 .3cqw .9cqw rgba(20,48,92,.08)}
.lsbig b{font-family:var(--read);font-size:7.4cqw;line-height:1.3;color:var(--pri)}
.lsbig span{font-family:var(--disp);font-size:1.6cqw;color:#14305c}
.lswl{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:.7cqw;min-width:0}
.lswl .word{min-height:0;border-radius:1.1cqw;padding:.3cqw;gap:0}
.lswl .word i{font-size:2.5cqw}
.lswl .word span{font-size:1.25cqw;line-height:1.3}
.lsx{position:absolute;top:.8cqw;left:.8cqw;width:2.8cqw;height:2.8cqw;border-radius:50%;background:#eef2f8;font-size:1.2cqw;font-weight:800;z-index:1}
.lstitle{top:7.7cqw;height:9.7cqw;background:linear-gradient(90deg,rgba(252,252,250,0),#fcfcfa 5%)}
.lspanel{font-size:max(16px,1.75cqw);line-height:1.9;padding:1.6cqw 2.6cqw}
.lspanel h3{font-size:1.25em;margin-bottom:.4em}
.lspanel ul,.lspanel ol{font-size:1.1em;margin-bottom:.7em}
.lspanel p{margin-bottom:.5em}
.lspanel .bigl{font-size:2.2em}
.lswl .word i{font-size:3.5cqw;line-height:1.2}
.lswl .word span{font-size:1.6cqw}
.lstitle{left:25.5cqw;width:36.7cqw;background:linear-gradient(90deg,rgba(252,252,250,0),#fcfcfa 2.4%)}

/* the question screen, phone and desktop: the owner's scene, a cream board with a gold rim, a page for each kind of question */
body.playing{background:#eccdac}
.pl{position:relative;min-height:100vh;min-height:100dvh;background:#eccdac url(../img/tasis-ar/quiz-wide.webp) top center/cover no-repeat;display:flex;flex-direction:column;align-items:center;padding:clamp(14px,3vh,28px) 12px 18px}
.plt{direction:ltr;display:flex;align-items:center;gap:12px;width:min(760px,100%);max-width:none;padding:0;margin:0}
.plt .plback{width:58px;height:58px;border-radius:50%;background:#fff;box-shadow:0 5px 12px rgba(20,48,92,.18);display:grid;place-items:center;color:var(--pri);flex:none}
.plback svg{width:28px;height:28px}
.hearts{position:relative;font-size:0;width:44px;height:44px;flex:none;color:#ef2f3c}
.hearts svg{width:44px;height:44px;filter:drop-shadow(0 2px 3px rgba(150,20,30,.3))}
.hearts span{position:absolute;inset:0;display:grid;place-items:center;font-size:.95rem;font-weight:800;color:#fff;font-family:var(--disp)}
.plb{position:relative;flex:1;height:34px;background:rgba(255,255,255,.95);border-radius:99px;box-shadow:0 4px 10px rgba(20,48,92,.14);overflow:visible;padding:0}
.plb::before{content:"";position:absolute;left:10px;right:10px;top:12px;height:10px;border-radius:9px;background:#e3e6ea}
.plb>i{position:absolute;left:10px;top:12px;height:10px;width:0;max-width:calc(100% - 20px);border-radius:9px;background:linear-gradient(90deg,#3fd04a,#25b52f);transition:width .35s}
.plb.hot>i{background:linear-gradient(90deg,#ffd066,var(--or))}
.plb u{position:absolute;top:7px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#c4cad2;border:2px solid #fff;text-decoration:none;transition:background .25s}
.plb u.on{background:#2fbf3a}
.plcard{position:relative;flex:1;width:min(760px,100%);margin-top:clamp(34px,7vh,64px);background:#fdf6ea;border:6px solid #f7e0a8;border-radius:44px;box-shadow:0 0 0 2px #fff6dd inset,0 10px 24px rgba(120,80,20,.14);display:flex;flex-direction:column;padding:24px clamp(14px,3vw,30px) 20px;direction:rtl}
.plcard::before{content:"";position:absolute;top:-30px;left:50%;width:42%;height:60px;transform:translateX(-50%);background:#fdf6ea;border:6px solid #f7e0a8;border-bottom:0;border-radius:44px 44px 0 0}
.plcard>*{position:relative}
.combo{min-height:0;font-size:.95rem}
.combo:empty{display:none}
#plm{flex:1;display:flex;flex-direction:column;min-height:0}
.plm{flex:1;width:100%;max-width:none;padding:0;animation:rise .25s ease-out;display:flex;flex-direction:column}
.plhd{display:flex;align-items:center;gap:8px;margin-bottom:14px;min-height:64px}
.plhd h2{margin:0;flex:1;font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.35;color:#14305c;text-align:center}
.plhd .plbot{width:72px;flex:none;margin-top:-34px}
.qsp{flex:none;width:42px;height:42px;display:grid;place-items:center;color:#6a35e8;background:#f1e9fb;border-radius:50%}
.qsp svg{width:26px;height:26px}
.plpill{display:flex;align-items:center;justify-content:center;gap:14px;background:#f1e9fb;border:3px solid #fff;box-shadow:0 2px 8px rgba(120,90,200,.14);border-radius:30px;padding:8px 24px;width:min(100%,380px);margin:0 auto 16px;min-height:78px;color:#6a35e8}
.plpill svg{width:44px;height:44px;flex:none}
.plpill i{width:2px;height:44px;background:#dccdf3;flex:none}
.plpill b{font-family:var(--read);font-size:2.6rem;font-weight:700;color:#2f2a8f;line-height:1.2;text-align:center;flex:1}
.plpill b.tx{font-family:var(--disp);font-size:1.4rem}
.opts{flex:1;grid-auto-rows:minmax(84px,1fr);gap:16px}
.opt{background:#fbfaf7;border:2px solid #f3ecdd;border-radius:28px;box-shadow:0 3px 8px rgba(120,80,20,.08);font-size:clamp(1.15rem,2.8vw,1.5rem);min-height:84px}
.opt i{font-size:clamp(4rem,12vw,6rem);line-height:1.15}
.opt.pic span{font-size:1.1rem}
.opt:hover{border-color:#b9a3ee}
.opt.sel{border-color:#7c4ff0;background:#f4eefe;color:#4a23b8}
.gapr{display:flex;align-items:center;justify-content:center;gap:24px;background:#fbfaf7;border:2px solid #f3ecdd;border-radius:28px;padding:12px 18px;margin-bottom:14px}
.gapr>i{font-style:normal;font-size:clamp(4rem,14vw,6rem);line-height:1.1;flex:none}
.gap{background:none;margin:0;padding:6px;flex:1}
.plm>.gap{background:#fbfaf7;border:2px solid #f3ecdd;border-radius:28px;padding:18px 12px;margin-bottom:14px;flex:none}
.gap{font-size:clamp(1.6rem,5vw,2.4rem)}
.tiles3{flex:none;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:70px;margin-bottom:12px}
.tiles3 .opt{min-height:0;font-size:1.7rem}
.trace{position:relative;background:#fbfaf7;border:2px dashed #dfd2b8;border-radius:20px;height:96px;overflow:hidden;touch-action:none}
.trace div{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;font-family:var(--read);font-size:3rem;font-weight:700;color:#e2e4e8;pointer-events:none}
.trace canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.trace small{position:absolute;top:3px;right:12px;color:#a3a9b3;font-size:.75rem;pointer-events:none}
.ans{background:#fbfaf7;border:2px dashed #e9dcc3;border-radius:22px;padding:10px;min-height:76px}
.tok{background:#fff;border:2px solid #efe6d4}
.mat{flex:1;gap:18% ;grid-template-columns:1fr 1fr}
.mat>div{justify-content:space-around;gap:12px}
.mat .opt{position:relative;flex:1;max-height:110px;font-family:var(--read);font-size:1.5rem;min-height:60px;overflow:visible}
.mat .opt::after{content:"";position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#c9ced6}
.mat>div:first-child .opt::after{left:-30px}
.mat>div:nth-child(2) .opt::after{right:-30px}
.mat .opt.right::after{background:var(--ok)}
.mat .opt.long{font-family:Tajawal,sans-serif;font-size:1rem;font-weight:700}
.plf{position:relative;inset:auto;border:0;background:none;z-index:auto;margin-top:18px;border-radius:24px}
.plf>div{max-width:none;padding:0;gap:14px}
.plf .btn{flex:1;min-height:66px;border-radius:24px;font-size:1.3rem;box-shadow:none}
.plf #skip{background:#fbfbfa;border:2px solid #e6e8ec;color:#5e6878}
.plf #go{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 5px 0 var(--pri2)}
.plf #go:disabled{background:#cfd3db;border-color:#cfd3db;color:#fff;box-shadow:none;opacity:1}
.plf.good,.plf.bad{padding:12px 14px}
.plf.good{background:var(--okbg)}.plf.bad{background:var(--badbg)}
.plf.good .btn,.plf.bad .btn{flex:0 0 auto;min-width:130px;min-height:54px;font-size:1.1rem}
.plf.good #go{background:var(--ok);border-color:var(--ok);box-shadow:0 4px 0 #177a43}
.plf.bad #go{background:var(--bad);border-color:var(--bad);box-shadow:0 4px 0 #bb2e33}
.fbbot{width:58px;flex:none;animation:hop .6s ease-out}
.fbbot.no{animation:shake .4s}
.fb{font-size:1.1rem;font-family:var(--disp);font-weight:700}
.fb small{font-family:Tajawal,sans-serif;font-weight:700;font-size:.92rem}
@media (max-width:820px){
  .pl{background:#eccdac url(../img/tasis-ar/quiz-tall.webp) top center/100% auto no-repeat;padding:calc(env(safe-area-inset-top) + 11vw) 11px 12px}
  .plt{gap:8px}
  .plt .plback{width:50px;height:50px}.hearts,.hearts svg{width:40px;height:40px}.plb{height:30px}.plb::before,.plb>i{top:10px}.plb u{top:5px}
  .plcard{margin-top:11vw;border-radius:34px;padding:18px 14px 14px}
  .plcard::before{top:-24px;height:50px;border-radius:34px 34px 0 0}
  .opts{gap:12px}.plpill{min-height:68px;margin-bottom:12px}.plhd{min-height:52px;margin-bottom:10px}.plhd .plbot{width:58px}
  .tiles3{grid-auto-rows:60px}.trace{height:84px}
}
@media (max-width:820px){.pl{background-size:cover}}
.plb>i{display:block;bottom:auto;right:auto}
.hearts{z-index:2}
.plm .gapr{flex:1.2}.plm .trace{flex:1;min-height:96px}.plm>.gap{flex:1;display:flex;align-items:center;justify-content:center}
/* desktop questions: the owner's letter-board scene, the live board sits exactly on the drawn one */
@media (min-width:821px){
  body.playing .page{display:flex;justify-content:center}
  .pl{width:min(100vw,177.68vh);min-height:0;aspect-ratio:1672/941;margin-inline:auto;padding:0;display:block;background-size:100% 100%;container-type:inline-size}
  .plt{position:absolute;left:11cqw;top:2.6cqw;width:64cqw}
  .plt .plback{width:4.2cqw;height:4.2cqw}.plback svg{width:2cqw;height:2cqw}
  .hearts,.hearts svg{width:3.4cqw;height:3.4cqw}.hearts span{font-size:1.1cqw}
  .plcard{position:absolute;left:9.2cqw;top:10.6cqw;width:81.6cqw;height:42.6cqw;margin:0;flex:none;border-width:.4cqw;border-radius:3cqw;padding:1.6cqw 2.4cqw 1.4cqw}
  .plcard::before{display:none}
  .plhd{min-height:0;margin-bottom:1cqw}.plhd h2{font-size:1.9cqw}.plhd .plbot{width:5cqw;margin-top:-1cqw}
  .plpill{min-height:0;width:30cqw;padding:.4cqw 2cqw;margin-bottom:1cqw;border-radius:2cqw}.plpill b{font-size:2.6cqw}.plpill svg{width:2.6cqw;height:2.6cqw}.plpill i{height:2.6cqw}
  .opts{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:1.2cqw}
  .opt{min-height:0;font-size:1.7cqw;border-radius:1.8cqw}.opt i{font-size:6cqw}.opt.pic span{font-size:1.5cqw}
  .tiles3{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:5cqw}
  .mat{gap:10cqw}.mat .opt{max-height:none;font-size:1.7cqw}.mat .opt.long{font-size:1.2cqw}
  .plf{margin-top:1cqw}.plf .btn{min-height:4.2cqw;font-size:1.5cqw;border-radius:1.6cqw}
  .plm .gapr{flex:1}.plm .trace{flex:1;min-height:0}
}

/* celebration: sky, a cream board with soft rays, the robot on one side and the result on the other */
.wn{position:fixed;inset:0;z-index:30;overflow:auto;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.75),transparent 22%),radial-gradient(circle at 72% 6%,rgba(255,226,170,.9),transparent 12%),radial-gradient(circle at 92% 88%,rgba(255,214,190,.8),transparent 26%),radial-gradient(circle at 8% 88%,rgba(255,255,255,.7),transparent 24%),linear-gradient(180deg,#7fc8fb,#cfe8fd 58%,#fbe3cf)}
.wnc{position:relative;overflow:hidden;direction:ltr;width:min(1100px,100%);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:12px;background:#fdf6e6;border:3px solid rgba(255,255,255,.8);border-radius:44px;box-shadow:0 18px 44px rgba(40,90,150,.2);padding:clamp(16px,3vw,36px)}
.wnc::before{content:"";position:absolute;left:-30%;top:-40%;width:110%;height:180%;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,226,150,.34) 0 11deg,transparent 11deg 24deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 68%);mask:radial-gradient(circle,#000 18%,transparent 68%);pointer-events:none}
.wnc>*{position:relative}
.wnart{display:flex;justify-content:center;align-items:center;min-height:clamp(220px,34vw,430px)}
.wnart img{width:min(100%,380px);filter:drop-shadow(0 0 22px rgba(255,235,170,.95)) drop-shadow(0 12px 14px rgba(20,48,92,.14));animation:enter .55s cubic-bezier(.2,1.4,.4,1),float 3.4s ease-in-out .6s infinite}
.wnbody{direction:rtl;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.wnbody h1{margin:0;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.15;color:#4c28e8}
.wnbody p{margin:0;font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,2.6vw,1.8rem);color:#14305c}
.wnstars{direction:ltr;display:flex;gap:clamp(8px,2vw,22px);justify-content:center;background:#f6ead2;border-radius:99px;padding:4px 26px;width:100%;max-width:440px}
.wnstars svg{width:clamp(58px,8.5vw,96px);height:clamp(58px,8.5vw,96px);animation:pop .45s cubic-bezier(.2,1.5,.4,1) both;filter:drop-shadow(0 3px 2px rgba(190,110,0,.3))}
.wnstars svg:nth-child(2){animation-delay:.18s}.wnstars svg:nth-child(3){animation-delay:.36s}
.wnstats{display:flex;gap:18px;color:var(--muted);font-weight:700;font-size:.98rem}
.wnstats b{color:#14305c;font-family:var(--disp)}
.wnbtn{display:flex;align-items:center;justify-content:center;width:100%;max-width:470px;min-height:clamp(58px,8vw,84px);border-radius:99px;font-family:var(--disp);font-weight:700;font-size:clamp(1.25rem,2.6vw,1.8rem);transition:transform .12s}
.wnbtn:active{transform:translateY(2px)}
.wnbtn.a{background:linear-gradient(180deg,#a47bfb,#6a35f0 55%,#5a26e6);color:#fff;box-shadow:0 8px 18px rgba(90,40,230,.28)}
.wnbtn.b{background:#fbfcfe;border:3px solid #cfd8ea;color:#5a6786}
.wnx{position:absolute;top:18px;right:22px;font-size:2rem;font-weight:800;color:#7f8fb2;line-height:1;width:44px;height:44px;display:grid;place-items:center;z-index:2}
.wncf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wncf i{position:absolute;display:block;border-radius:3px}
.wnrev{position:absolute;inset:0;z-index:3;background:#fdf6e6;direction:rtl;padding:clamp(16px,3vw,32px);overflow:auto}
.wnrev h2{margin:0 0 12px;color:#4c28e8;font-size:1.7rem}
.wnrev li{list-style:none;display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #efe6d4;border-radius:16px;padding:10px 14px;margin-bottom:8px}
.wnrev ul{margin:0 0 12px;padding:0}
.wnrev li>i{font-style:normal;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:var(--ok)}
.wnrev li.no>i{background:var(--bad)}
.wnrev li b{display:block;font-family:Tajawal,sans-serif;font-weight:700;color:#14305c}
.wnrev li small{color:#3f5266;font-size:.95rem}
@media (max-width:820px){
  .wnc{grid-template-columns:minmax(0,1fr);border-radius:32px;padding:16px;gap:6px}
  .wnart{min-height:0}.wnart img{width:min(62vw,230px)}
  .wnx{top:12px;right:14px}
}

/* question screens on the owner's empty designs: back button and heart are the drawn ones, the live parts sit on their slots */
.plt{display:contents}
.plt .plback{position:absolute;background:none;box-shadow:none}
.plback svg{display:none}
.hearts{position:absolute}
.hearts svg{display:none}
.hearts span{color:#fff}
.plb{position:absolute;flex:none}
@media (min-width:821px){
  .pl{background-image:url(../img/tasis-ar/quiz-wide.webp)}
  .plt .plback{left:16.2cqw;top:3.5cqw;width:6.8cqw;height:6.8cqw}
  .hearts{left:24.3cqw;top:5cqw;width:4cqw;height:3.6cqw}.hearts span{font-size:1.3cqw}
  .plb{left:29.6cqw;top:4.9cqw;width:48.5cqw;height:3.9cqw}
  .plb::before{left:1.2cqw;right:1.2cqw;top:1.45cqw;height:1cqw}
  .plb>i{left:1.2cqw;top:1.45cqw;height:1cqw}
  .plb u{top:.9cqw;width:2.1cqw;height:2.1cqw;margin-left:-1.05cqw}
  .plcard{left:15.75cqw;top:13.8cqw;width:68.6cqw;height:37.6cqw;background:#fbf4e5;border:0;box-shadow:none;border-radius:2.6cqw;padding:.4cqw 2.4cqw 1.1cqw}
  .opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1cqw}
  .tiles3{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:4.2cqw}
  .opt{background:#fdfaf6}.opt i{font-size:4.4cqw;line-height:1.1}.opt.pic{flex-direction:row;gap:1.4cqw}
  .plhd{margin-bottom:.7cqw}.plhd h2{font-size:1.7cqw}
  .plpill{margin-bottom:.8cqw}
}
@media (max-width:820px){
  .pl{background:#ecd0ae url(../img/tasis-ar/quiz-tall.webp) top center/100% auto no-repeat;padding:34.5vw 2.9vw 12px}
  .plt .plback{left:5.8vw;top:14.6vw;width:9.4vw;height:9.4vw}
  .hearts{left:17vw;top:15.8vw;width:6.4vw;height:5.8vw}.hearts span{font-size:2.6vw}
  .plb{left:24.4vw;top:15.6vw;width:63vw;height:6.6vw}
  .plb::before{top:2.3vw;height:2vw;left:2vw;right:2vw}
  .plb>i{top:2.3vw;height:2vw;left:2vw}
  .plb u{top:1.5vw;width:3.6vw;height:3.6vw;margin-left:-1.8vw}
  .plcard{margin-top:0}
}
/* lesson finished */
.ld{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,177.68vh);aspect-ratio:1672/941;container-type:inline-size;background:url(../img/tasis-ar/done.webp) center/100% 100% no-repeat;z-index:30}
body:has(.ld),body:has(.ldm){background:#fdf3e2}
.ld>*{position:absolute}
.ldt{left:22cqw;top:24.4cqw;width:56cqw;height:5.2cqw;display:flex;align-items:center;justify-content:center;direction:rtl;font-family:var(--disp);font-weight:700;font-size:3.9cqw;color:#4a2be2;background:radial-gradient(closest-side,#fff6e6 78%,rgba(255,246,230,0));white-space:nowrap}
.ldv{top:37.5cqw;width:25.2cqw;height:3.9cqw;display:flex;align-items:center;justify-content:center;background:#fff;direction:ltr}
.ldv b{font-family:var(--disp);font-size:3cqw;font-weight:700;color:#14305c}
.ldz{top:47.2cqw;width:39.2cqw;height:6.6cqw;border-radius:2cqw}
.ldm{position:fixed;inset:0;z-index:30;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 16px 20px;background:linear-gradient(180deg,#bfe3fb,#fdf0dc 45%,#fdf6ea);direction:rtl;text-align:center}
.ldm img{width:100%;max-width:440px;border-radius:20px;-webkit-mask:linear-gradient(#000 82%,transparent);mask:linear-gradient(#000 82%,transparent)}
.ldm h1{margin:0;color:#4a2be2;font-size:1.65rem;line-height:1.3}
.ldc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.ldc div{background:#fff;border-radius:16px;padding:10px 4px;box-shadow:0 3px 10px rgba(20,48,92,.06)}
.ldc i{font-style:normal;font-size:1.7rem;display:block}
.ldc b{display:block;font-family:var(--disp);font-size:1.3rem;color:#14305c}
.ldc small{color:var(--muted);font-size:.74rem}
.ldm .wnbtn{min-height:58px;font-size:1.2rem}
.ldt{left:23cqw;top:25.1cqw;width:54cqw;height:4.7cqw;background:#fef5e4;-webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);font-size:3.5cqw}
.ldv{top:37.7cqw;height:4.6cqw}
.ldt{background:#fdf4e3;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(transparent,#000 18%,#000 82%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-composite:intersect}
@media (max-width:820px){.pl{background:url(../img/tasis-ar/quiz-tall.webp) top center/100% auto no-repeat,url(../img/tasis-ar/quiz-tall.webp) bottom center/100% auto no-repeat,#ecd0ae}}

/* settings on the owner's designs */
body.fullset{background:#fdf3e2}
body.fullset .shell{display:block}
body.fullset .side,body.fullset .bar{display:none}
body.fullset .page{padding:0}
.st{position:relative;width:min(100vw,177.3vh);margin-inline:auto;aspect-ratio:1670/942;container-type:inline-size;background-size:100% 100%;background-repeat:no-repeat;overflow:hidden;font-size:1.02cqw;direction:rtl;color:#14305c}
.si{position:absolute;display:flex;align-items:center;min-width:0}
.sittl{font-family:var(--disp);font-weight:700;font-size:2.3em}
.sime,.sipic{justify-content:center;color:#fff;font-family:var(--disp);font-weight:700;cursor:pointer;font-size:1.1em}
.siin,.sisel{border:0;background:none;font:700 1em Tajawal,sans-serif;color:#14305c;outline-offset:1px;padding:0 .6em;appearance:none;-webkit-appearance:none;cursor:pointer;direction:rtl}
.siin{cursor:text}
.sival{padding:0 .6em;font-weight:700}
.siava{object-fit:cover;border-radius:50%}
.siring{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.siring b{font-family:var(--disp);font-size:2.4em;color:#1a2f8f}
.siring small{font-size:.72em;color:var(--muted)}
.sistat{flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.15;padding:0 .3em}
.sistat b{font-family:var(--disp);font-size:1.5em;color:#1a2f8f}
.sistat small{font-size:.86em;color:var(--muted)}
.sibad{justify-content:center;font-family:var(--disp);font-weight:700;font-size:.95em}
.sidim{background:rgba(255,255,255,.62);border-radius:1.2cqw;pointer-events:none}
.sisec{font-family:var(--disp);font-weight:700;font-size:1.25em;color:#1a2f8f}
.silab{font-weight:700;color:#3a4a63;white-space:nowrap}
.sitog{border-radius:99px;background:#d7dce4;box-shadow:inset 0 0 0 .1cqw #c8ced8;cursor:pointer;transition:background .15s}
.sitog i{position:absolute;top:10%;right:6%;width:42%;height:80%;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:all .15s}
.sitog.on{background:linear-gradient(90deg,#8b6bf0,#6a45e6)}
.sitog.on i{right:auto;left:6%;background:#e5ddfb}
.sitog[disabled]{opacity:.7;cursor:default}
.siskl{justify-content:space-between;font-size:.9em;font-weight:700}
.siskl b{font-family:var(--disp)}
.sibar{background:#ebeef2;border-radius:99px;overflow:hidden;display:block}
.sibar i{display:block;height:100%;border-radius:99px}
.silogo a{display:block;width:100%;text-align:center;line-height:1.05}
.silogo b{display:block;font-family:var(--disp);font-size:2.6em;background:linear-gradient(180deg,#ffb02e,#ff7a18);-webkit-background-clip:text;background-clip:text;color:transparent}
.silogo span{display:block;font-family:var(--disp);font-weight:700;font-size:1.7em;color:#1a2f8f}
.silogo{background:#fefaf2}
.sinavl{font-family:var(--disp);font-weight:700;font-size:1.3em;color:#3a4a7a}
.stx{display:none}
@media (max-width:820px){
  .st{width:100vw;aspect-ratio:853/1844;font-size:3.5cqw}
  .sittl{font-size:1.9em}.sime,.sipic{font-size:1em}
  .sidim{border-radius:4cqw}
  .sinv{flex-direction:column;justify-content:center;gap:.5cqw;color:#5d6a85;font-size:.68em;font-weight:700;border-radius:3.5cqw}
  .sinv svg{width:6.2cqw;height:6.2cqw}
  .sinv.on{background:linear-gradient(180deg,#8b6bf0,#6a45e6);color:#fff}
  .siring b{font-size:2.1em}
  .stx{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px 24px;direction:rtl}
  .stx .btn{font-size:.95rem;padding:11px 8px}
}
.sittl,.sisec,.silab,.sinavl{justify-content:flex-end}
.sistat{align-items:flex-end}
.sinavl{white-space:nowrap;font-size:1.15em}
.silogo{background:none}
.sibad{text-shadow:0 0 .3em #fff,0 0 .3em #fff,0 0 .15em #fff;align-items:flex-end}
@media (max-width:820px){
  .silab{font-size:.84em}
  .sisel{font-size:.72em;padding:0 .3em}
  .sisec{font-size:1.02em}
  .sibad{font-size:.84em}
  .siskl{font-size:.74em}
  .sistat b{font-size:1.25em}.sistat small{font-size:.74em}
}

/* placement test on the owner's designs */
.pt{position:relative;width:min(100vw,177.68vh);margin-inline:auto;aspect-ratio:1672/941;container-type:inline-size;background-size:100% 100%;background-repeat:no-repeat;overflow:hidden;font-size:1.1cqw;color:#14305c;direction:rtl}
.pi{position:absolute;display:flex;align-items:center;justify-content:center;min-width:0}
.pthead{flex-direction:column;text-align:center;line-height:1.15}
.pthead b{font-family:var(--disp);font-size:3.2em;color:#4a22c9}
.pthead small{font-size:1.3em;color:var(--muted);font-weight:700}
.ptslot{padding:1em 1.6em;text-align:center;font-family:var(--read);font-weight:700;font-size:2em;line-height:1.5;color:#14305c}
.ptopt{background:#fff;border:.12cqw solid #e8e6ee;border-radius:1.6cqw;font-family:var(--read);font-weight:700;font-size:1.75em;color:#14305c;cursor:pointer;transition:transform .1s}
.ptopt:hover{border-color:#a68bf0}
.ptopt:active{transform:scale(.985)}
.ptopt.on{background:#ece4fb;border:.2cqw solid #6a35e8;color:#3f1fb0}
.ptopt i{position:absolute;right:1.1cqw;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#6a35e8;color:#fff;display:grid;place-items:center;font-style:normal;font-size:.7em;font-family:Tajawal,sans-serif}
.ptdot{border-radius:50%;background:#ebe9f3;color:#6d6a86;font-family:var(--disp);font-weight:700;font-size:1.1em}
.ptdot.on{background:#6a35e8;color:#fff}
.ptdot.ok{background:#cfc0f6;color:#3f1fb0}
.pttime{font-family:var(--disp);font-weight:700;font-size:1.3em;justify-content:flex-end}
.ptbar{background:#e6e4ec;border-radius:99px;overflow:hidden;display:block}
.ptbar i{display:block;height:100%;border-radius:99px}
.ptnavt{font-family:var(--disp);font-weight:700;font-size:1.4em;justify-content:flex-start}
.pttile{display:grid;place-items:center;background:#ececf0;border-radius:.7cqw;font-family:var(--disp);font-weight:700;font-size:1.15em;color:#55586e;cursor:pointer}
.pttile.ok{background:#d9cdf7;color:#3f1fb0}
.pttile.on{background:linear-gradient(180deg,#8450ee,#6a35e8);color:#fff}
.ptflag{justify-content:flex-start;font-weight:700;font-size:1.02em}
.ptnav{font-family:var(--disp);font-weight:700;font-size:1.35em;color:#55486f;cursor:pointer}
.ptnav.go{color:#fff}
.ptnav[disabled]{opacity:.55;cursor:default}
.ptx{border-radius:50%;background:#f3ecdc;color:#7a6a4a;font-weight:800;font-size:1em}
@media (max-width:820px){
  .pt{width:min(100vw,46.26vh);aspect-ratio:853/1844;font-size:3.5cqw}
  .pthead b{font-size:2em}
  .ptslot{font-size:1.5em;padding:.6em 1em}
  .ptopt{font-size:1.25em;border-radius:4cqw;border-width:.4cqw}
  .ptopt.on{border-width:.6cqw}
  .ptopt i{right:2cqw;width:6cqw;height:6cqw}
  .ptdot{font-size:.8em;background:#fbf6ea;box-shadow:inset 0 0 0 .4cqw #d8d8de}
  .ptdot.on{box-shadow:none}
  .ptgrid{background:#fcf6ea;display:grid;grid-template-columns:repeat(5,1fr);align-content:center;gap:2cqw}
  .pttile{aspect-ratio:1;border-radius:2cqw;font-size:.9em}
  .ptflag{font-size:.95em}
}

/* lesson text on the owner's three designs */
.lp{position:relative;width:min(100vw,177.68vh);margin-inline:auto;aspect-ratio:1672/941;container-type:inline-size;background-size:100% 100%;background-repeat:no-repeat;overflow:hidden;font-size:1.1cqw;color:#14305c;direction:rtl}
.lq{position:absolute;display:flex;align-items:center;justify-content:center;min-width:0;border-radius:1cqw}
.lq:hover{background-color:rgba(106,53,232,.05)}
.lqd{border-radius:50%;background:#e9e7f2}
.lqd.on{background:linear-gradient(180deg,#8450ee,#6a35e8)}
.lql{font-family:var(--disp);font-weight:700;font-size:1.05em;color:#3f3a6b;border-radius:.8cqw;white-space:nowrap}
.lql.sm{font-size:.95em}
.lqtt{font-family:var(--disp);font-weight:700;font-size:1.9em;color:#4a22c9;text-align:center}
.lqs{color:#7a6a4a;font-weight:700}
.lqn{color:#fff;font-family:var(--disp);font-weight:700;font-size:1.3em;pointer-events:none}
.lqg{border-radius:99px}
.lqt.lbody{display:block;overflow:auto;background:none;border:0;box-shadow:none;min-height:0;padding:.4em .8em;font-size:max(15px,1.35cqw);line-height:1.8;animation:none;text-align:right}
.lqt h2{font-family:var(--disp);color:#4a22c9;margin:0 0 .3em;font-size:1.2em}
.lqbar{background:#e8e6f2;border-radius:99px;display:block;overflow:hidden}
.lqbar i{display:block;height:100%;background:linear-gradient(90deg,#8450ee,#6a35e8);border-radius:99px;transition:width .3s}
.lqc{flex-direction:column;align-items:flex-start;gap:.2em;padding:0 .4em;text-align:right;color:#14305c;overflow:hidden;background:none}
.lqc b{font-family:var(--disp);font-size:1.3em;color:#4a22c9}
.lqc span{font-size:1em;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lqok{background:var(--ok);color:#fff;border-radius:50%;font-weight:800;font-size:.8em}
@media (max-width:820px){
  .lp{width:min(100vw,56.28vh);aspect-ratio:941/1672;font-size:3.6cqw}
  body.fullset:has(.lp){background:#f3dcc2}
  .lql{font-size:1.05em}
  .lqt.lbody{font-size:15px;background:#fbf4e7;padding:.6em .8em;border-radius:3cqw;line-height:1.75}
  .lqt .lets{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .lqt .lets button{font-size:1.25rem;border-radius:9px}
}

/* five phone question pages: the owner's scene and robot for each kind */
.pl.k-m,.pl.k-f,.pl.k-o,.pl.k-l,.pl.k-g{--art:none}
.plback svg.hic{display:none}
.mat{position:relative}
.matl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.matl path{fill:none;stroke-width:3;stroke-linecap:round}
@media (max-width:820px){
  .pl{--top:min(74vw,34vh);padding:var(--top) 8px 8px;background:var(--art) top center/100% auto no-repeat,#f5e3cc}
  .pl.k-m{--art:url(../img/tasis-ar/q-m.webp)}.pl.k-f{--art:url(../img/tasis-ar/q-f.webp)}.pl.k-o{--art:url(../img/tasis-ar/q-o.webp)}.pl.k-l{--art:url(../img/tasis-ar/q-l.webp)}.pl.k-g{--art:url(../img/tasis-ar/q-g.webp)}
  .pl.k-c{--art:url(../img/tasis-ar/q-g.webp)}
  .plcard{margin:0;border:0;background:#fbf4e7;border-radius:30px;padding:68px 12px 12px;box-shadow:0 -4px 14px rgba(120,80,20,.1)}
  .plcard::before{display:none}
  .plt{display:block;position:absolute;left:8px;right:8px;top:var(--top);height:64px;width:auto;z-index:3}
  .plt .plback{position:absolute;left:12px;top:12px;width:42px;height:42px;background:linear-gradient(180deg,#8450ee,#6a35e8);color:#fff}
  .plback svg.hic{display:block;width:22px;height:22px}
  .hearts{left:auto;right:12px;top:15px;width:36px;height:36px}.hearts svg{display:block;width:36px;height:36px}.hearts span{font-size:.8rem}
  .plb{left:64px;right:58px;width:auto;top:22px;height:20px;background:none;box-shadow:none}
  .plb::before{top:8px;height:4px;left:0;right:0;background:#ddd9e6}
  .plb>i{top:8px;height:4px;left:0;background:#6a35e8}
  .plb u{top:2px;width:16px;height:16px;margin-left:-8px;background:#fbf4e7;border:2px solid #cfcbdb}
  .plb u.on{background:#6a35e8;border-color:#6a35e8}
  .plhd{min-height:0;margin-bottom:8px}.plhd h2{font-size:1.05rem}.plhd .plbot{display:none}
  .qsp{width:34px;height:34px}.qsp svg{width:20px;height:20px}
  .opt{border-radius:16px;min-height:52px;font-size:1.1rem}
  .plf{margin-top:10px}
  .plf .btn{min-height:52px;font-size:1.1rem;border-radius:99px}
  .plf #skip{flex:0 0 auto;min-width:92px;background:#e9e4f6;border:0;color:#5a4f86}
  .plf #go{background:linear-gradient(180deg,#8450ee,#6a35e8);border:0;box-shadow:none}
  .plf #go:disabled{background:#d7d0ea}
  .k-l .plpill{flex-direction:column;background:none;border:0;box-shadow:none;min-height:0;width:auto;padding:0;margin:0 auto 10px}
  .k-l .plpill svg{width:74px;height:74px;padding:16px;border-radius:50%;background:linear-gradient(180deg,#8450ee,#6a35e8);color:#fff;box-shadow:0 0 0 10px rgba(124,80,240,.12)}
  .k-l .plpill i,.k-l .plpill b{display:none}
  .k-l .opts{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(46px,auto);gap:8px}
  .k-l .opt{flex-direction:row;justify-content:flex-start;padding:0 14px;gap:12px;border-radius:14px;font-size:1.05rem}
  .k-l .opt::before{content:"";width:20px;height:20px;border-radius:50%;border:2px solid #b9b4c7;flex:none}
  .k-l .opt.sel{background:#e4daf8}.k-l .opt.sel::before{border:6px solid #6a35e8}
  .k-o .tok,.k-f .tiles3 .opt{background:#e4daf8;border:0;color:#3f1fb0}
  .tok{border-radius:12px;padding:9px 16px}
  .k-o .ans{background:#f6edda;border:0;justify-content:center}
  .plm>.gap{background:#f8ecd8;border:0}
  .mat{gap:34px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mat>div:first-child .opt::after{left:-23px}.mat>div:nth-child(2) .opt::after{right:-23px}
}

/* desktop questions: the owner's layout with the robot on the left, the board in the middle and the live bar above it */
@media (min-width:821px){
  .pl{background-image:url(../img/tasis-ar/place-wide.webp)}
  .plt .plback{left:27.6cqw;top:2.7cqw;width:3.6cqw;height:3.6cqw;background:linear-gradient(180deg,#8450ee,#6a35e8);color:#fff;border-radius:50%}
  .plback svg.hic{display:block;width:1.9cqw;height:1.9cqw}
  .plb{left:31.8cqw;top:2.9cqw;width:47cqw;height:3.2cqw;background:#fbf6ea;box-shadow:none}
  .plb::before{left:1cqw;right:1cqw;top:1.4cqw;height:.4cqw;background:#ddd9e6}
  .plb>i{left:1cqw;top:1.4cqw;height:.4cqw;background:#6a35e8}
  .plb u{top:.7cqw;width:1.8cqw;height:1.8cqw;margin-left:-.9cqw;background:#fbf6ea;border:.15cqw solid #cfcbdb}
  .plb u.on{background:#6a35e8;border-color:#6a35e8}
  .pl::after{content:"";position:absolute;left:79.9cqw;top:12.9cqw;width:14.4cqw;height:26.6cqw;background:#fcf6ea;border-radius:2cqw}
  .hearts{left:84.6cqw;top:20cqw;width:5cqw;height:5cqw;z-index:2}.hearts svg{display:block;width:5cqw;height:5cqw}.hearts span{font-size:1.5cqw}
  .plcard{left:28.2cqw;top:8.8cqw;width:50.6cqw;height:42cqw;background:#fdf8ee;border-radius:2.2cqw;padding:1.2cqw 1.8cqw}
  .plf .btn{min-height:3.6cqw;border-radius:99px;font-size:1.3cqw}
  .plf #skip{flex:0 0 auto;min-width:9cqw;background:#e9e4f6;border:0;color:#5a4f86}
  .plf #go{background:linear-gradient(180deg,#8450ee,#6a35e8);border:0;box-shadow:none}
  .plf #go:disabled{background:#d7d0ea}
  .opt.sel{border-color:#6a35e8}
  .k-l .plpill{flex-direction:column;background:none;border:0;box-shadow:none;width:auto;padding:0;margin:0 auto .6cqw}
  .k-l .plpill svg{width:6.4cqw;height:6.4cqw;padding:1.3cqw;border-radius:50%;background:linear-gradient(180deg,#8450ee,#6a35e8);color:#fff;box-shadow:0 0 0 .8cqw rgba(124,80,240,.12)}
  .k-l .plpill i,.k-l .plpill b{display:none}
  .k-l .opts{grid-auto-rows:minmax(3.6cqw,auto);flex:none}
  .k-l .opt{flex-direction:row;justify-content:flex-start;padding:0 1.2cqw;gap:1cqw;min-height:3.6cqw;border-radius:1.2cqw}
  .k-l .opt::before{content:"";width:1.5cqw;height:1.5cqw;border-radius:50%;border:.15cqw solid #b9b4c7;flex:none}
  .k-l .opt.sel{background:#e4daf8}.k-l .opt.sel::before{border:.45cqw solid #6a35e8}
  .k-o .tok,.k-f .tiles3 .opt{background:#e4daf8;border:0;color:#3f1fb0}
  .k-o .ans{background:#f6edda;border:0;justify-content:center}
  .mat{gap:6cqw}.mat>div:first-child .opt::after{left:-2.2cqw}.mat>div:nth-child(2) .opt::after{right:-2.2cqw}
  .mat .opt::after{width:1cqw;height:1cqw;margin-top:-.5cqw}
}

/* library pictures of the words */
.wpic{display:block;object-fit:contain}
.word .wpic{width:72%;max-height:62%;min-height:0;flex:1 1 auto}
.lswl .word{overflow:hidden}
.opt .wpic{width:auto;height:clamp(70px,14vh,150px);max-width:90%}
.opt.pic{overflow:hidden}
.gapr .wpic{height:clamp(90px,16vh,170px);max-width:42%}
@media (min-width:821px){.opt .wpic{height:8cqw}.gapr .wpic{height:9cqw}}
.wpic{mix-blend-mode:multiply}
@media (max-width:820px){.opt .wpic{height:clamp(52px,9.5vh,84px)}.opts{grid-auto-rows:minmax(84px,auto)}.gapr .wpic{height:clamp(70px,12vh,110px)}}

/* the robot next to the question reacts to every answer */
.plr{display:none}
.wel .wb{height:min(34vh,300px);width:auto}
@media (min-width:821px){
  .plr{display:block;position:absolute;left:81.4cqw;top:14cqw;width:11.4cqw;height:17cqw;object-fit:contain;z-index:2;animation:float 3.4s ease-in-out infinite;filter:drop-shadow(0 .4cqw .5cqw rgba(20,48,92,.16))}
  .plr.hop{animation:hop .6s ease-out}
  .plr.sad{animation:shake .4s}
  .hearts{top:32.4cqw;left:85.1cqw;width:4cqw;height:4cqw}.hearts svg{width:4cqw;height:4cqw}.hearts span{font-size:1.25cqw}
}

/* welcome on the owner's picture, with a display font for the name */
@font-face{font-family:"Lalezar";font-display:swap;src:url(../fonts/th-lalezar-arabic-400-normal.woff2) format("woff2")}
.wel{background:#7fc4f5 url(../img/tasis-ar/welcome.webp) center/cover no-repeat;align-items:flex-end;justify-content:center;padding:0 7vw 0 0}
.welb{width:min(46vw,620px);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.welt{margin:0;line-height:1;font-weight:400}
.welt b{display:block;font-family:Lalezar,var(--disp);font-weight:400;font-size:clamp(4.6rem,11vw,9.5rem);line-height:1.05;background:linear-gradient(180deg,#ffd052,#ff7a18);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #fff) drop-shadow(0 8px 14px rgba(120,60,0,.28))}
.welt span{display:block;font-family:Lalezar,var(--disp);font-size:clamp(2.2rem,4.6vw,4.2rem);line-height:1.2;color:#2a2fa8;text-shadow:0 2px 0 #fff,0 0 14px rgba(255,255,255,.9)}
.welm{margin:0;background:rgba(255,255,255,.93);border-radius:20px;padding:10px 20px;font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.35rem);color:#14305c;box-shadow:0 8px 20px rgba(20,48,92,.14);animation:pop .35s ease-out}
.wel .wbtns{width:min(380px,100%);gap:12px}
.wel .btn{min-height:60px;font-size:1.35rem;border-radius:18px}
@media (max-width:820px){
  .wel{align-items:center;justify-content:flex-end;padding:0 18px calc(26px + env(safe-area-inset-bottom));background-position:24% top;background-size:auto 62%;background-color:#f6dcb6}
  .welb{width:100%;gap:10px}
  .welt b{font-size:4.8rem}.welt span{font-size:2.3rem}
}
@media (max-width:820px){.wel{background-size:auto 48%;background-position:22% top;background-color:#f8e3c2}.welt b{font-size:4.2rem}}
@media (min-width:821px){.wel{align-items:flex-start}}
/* the welcome robot is a separate picture, so it walks in, greets and floats */
.welr{position:absolute;left:7vw;bottom:5vh;height:min(76vh,700px);width:auto;z-index:1;filter:drop-shadow(0 14px 12px rgba(120,70,20,.28));transform-origin:50% 90%;animation:enter .7s cubic-bezier(.2,1.4,.4,1),rock 1.2s ease-in-out .7s 2,float 3.4s ease-in-out 3.1s infinite}
@media (max-width:820px){
  .wel{background-size:cover;background-position:58% top;background-color:#f3d9b8}
  .welr{left:50%;margin-left:-23vh;bottom:auto;top:3vh;height:42vh}
}
@media (max-width:820px){.welr{margin-left:-19.2vh}}
/* clear welcome text: a calm cream board behind solid colours */
.welb{background:rgba(255,250,240,.95);border:4px solid #f7e0a8;border-radius:32px;padding:24px 30px;box-shadow:0 16px 36px rgba(90,50,10,.24)}
.welt b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#e8630a;filter:none;font-size:clamp(4.4rem,8vw,7rem)}
.welt span{color:#16237f;text-shadow:none;font-size:clamp(2.2rem,3.6vw,3.3rem)}
.welm{background:none;box-shadow:none;padding:0;font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.5;color:#14305c;animation:none}
.wel .btn.wide:not(.or){border:2px solid #c9d3e6;color:#14305c}
@media (min-width:821px){.welb{width:min(40vw,560px)}}
@media (max-width:820px){.wel{padding:0 14px calc(14px + env(safe-area-inset-bottom))}.welb{padding:14px 16px;gap:8px;border-radius:26px}.welt b{font-size:3.7rem}.welt span{font-size:2rem}.welm{font-size:1.15rem}.wel .btn{min-height:52px;font-size:1.2rem}}

/* the moving robot: parts share one square canvas, each turns around its own joint */
.rig{aspect-ratio:1;width:auto;filter:drop-shadow(0 14px 12px rgba(120,70,20,.28));animation:enter .7s cubic-bezier(.2,1.4,.4,1),float 3.6s ease-in-out .7s infinite}
.rig img,.righ{position:absolute;inset:0;width:100%;height:100%}
.rigb{transform-origin:50% 92%;animation:breathe 3.2s ease-in-out infinite}
.righ{transform-origin:51% 49%;animation:nod 5.2s ease-in-out infinite}
.riga{transform-origin:40% 49.5%;animation:wave 4.2s ease-in-out .7s infinite}
.rige{position:absolute;display:block;background:#080b22;border-radius:50%;transform:rotate(11deg) scaleY(0);animation:blink 4.6s linear infinite}
.rige.l{left:37.6%;top:25%;width:11.6%;height:8.4%}
.rige.r{left:56.2%;top:30.4%;width:11.8%;height:8.4%}
@keyframes breathe{0%,100%{transform:none}50%{transform:scale(1.012,.985)}}
@keyframes nod{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(2.6deg) translateY(.4%)}}
@keyframes wave{0%,62%,100%{transform:rotate(0)}8%{transform:rotate(13deg)}18%{transform:rotate(-9deg)}28%{transform:rotate(13deg)}38%{transform:rotate(-9deg)}48%{transform:rotate(9deg)}}
@keyframes blink{0%,91%,100%{transform:rotate(11deg) scaleY(0)}94%,96%{transform:rotate(11deg) scaleY(1)}}
.welr.rig{height:min(82vh,760px);left:4vw;bottom:2vh}
@media (max-width:820px){.welr.rig{height:44vh;margin-left:-22vh;left:50%;top:3vh;bottom:auto}}
.mprobot.rig{position:absolute;left:73.5cqw;top:.6cqw;width:21cqw;height:21cqw;filter:drop-shadow(0 .6cqw .7cqw rgba(90,60,20,.3));pointer-events:none}

/* every robot moves: parts share one canvas, each turns around its own joint; the motion depends on the pose */
.rig{position:relative;display:block;flex:none;filter:drop-shadow(0 .5em .5em rgba(90,60,20,.2));animation:enter .6s cubic-bezier(.2,1.4,.4,1),float 3.6s ease-in-out .6s infinite}
.rig img,.righ{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.rige{position:absolute;display:block;background:#080b22;border-radius:50%;transform:rotate(var(--t,0deg)) scaleY(0);animation:blink2 4.6s linear infinite}
.m-write .rige,.m-cheer .rige{animation-delay:1.2s}
@keyframes blink2{0%,91%,100%{transform:rotate(var(--t,0deg)) scaleY(0)}94%,96%{transform:rotate(var(--t,0deg)) scaleY(1)}}
.m-wave .riga{animation:wave 4.2s ease-in-out .7s infinite}
.m-point .riga{animation:pointup 3.4s ease-in-out infinite}
.m-write .riga{animation:writing 1.3s ease-in-out infinite}
.m-cheer .riga{animation:pump 1.5s ease-in-out infinite}
.m-show .riga{animation:showmap 3.8s ease-in-out infinite}
.m-sob .righ{animation:droop 3.4s ease-in-out infinite}
.m-sob .rigb{animation:sob 2.6s ease-in-out infinite}
@keyframes pointup{0%,100%{transform:rotate(0)}30%{transform:rotate(7deg)}60%{transform:rotate(-3deg)}}
@keyframes writing{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg) translateX(.6%)}50%{transform:rotate(2deg)}75%{transform:rotate(-2deg) translateX(-.6%)}}
@keyframes pump{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(11deg)}}
@keyframes showmap{0%,100%{transform:rotate(0)}35%{transform:rotate(-4deg)}70%{transform:rotate(3deg)}}
@keyframes droop{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.6deg) translateY(1.2%)}}
@keyframes sob{0%,100%{transform:none}50%{transform:scale(1.01,.985)}}
.welr.rig{position:absolute;width:auto}
.mprobot.rig{left:71cqw;top:.4cqw;width:25cqw;height:auto;animation:enter .6s cubic-bezier(.2,1.4,.4,1),float 3.6s ease-in-out .6s infinite}
.plr{height:auto;aspect-ratio:auto}
.plr .rig{width:100%;margin:auto}
.fbbot.rig{width:62px}
.plbot.rig{width:72px;margin-top:-34px}
.wnart .rig{width:min(100%,380px);filter:drop-shadow(0 0 22px rgba(255,235,170,.95))}
.botcorner.rig{margin-top:auto;align-self:center}
.rgal{min-height:100vh;padding:24px 16px;background:linear-gradient(180deg,#bfe3fb,#fdf0dc);display:flex;flex-direction:column;align-items:center;gap:14px;direction:rtl}
.rgal h1{margin:0;color:#4a22c9;font-size:2.2rem}
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;width:min(1200px,100%)}
.rgrid figure{margin:0;background:#fffaf0;border:3px solid #f7e0a8;border-radius:24px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;min-height:300px}
.rgrid .rig{width:min(100%,220px)}
.rgrid figcaption{font-family:var(--disp);font-weight:700;color:#14305c;text-align:center}
/* moving robots placed on the designs */
.rgw{position:absolute;display:flex;align-items:flex-start;justify-content:center;pointer-events:none;z-index:1}
.rgw .rig{width:100%}
.rgw.peek{overflow:hidden;align-items:flex-start}
.hm .rgw *,.rgw *{position:absolute}
.rgw .rig{position:relative}
/* the question robot: big on the left on desktop, above the board on phones */
@media (min-width:821px){.plr{left:2.4cqw;top:23.6cqw;width:24.4cqw;height:27.6cqw}.plr.hop{animation:hop .6s ease-out}.hearts{top:23.6cqw;left:83.4cqw;width:7.4cqw;height:7.4cqw}.hearts svg{width:7.4cqw;height:7.4cqw}.hearts span{font-size:2cqw}}
@media (max-width:820px){.plr{display:block;position:absolute;left:50%;margin-left:-30vw;width:60vw;height:min(62vw,30vh);top:calc(-1*min(62vw,30vh));overflow:hidden;animation:none}}
@media (max-width:820px){.pl,.pl.k-m,.pl.k-f,.pl.k-o,.pl.k-l,.pl.k-g,.pl.k-c{--art:url(../img/tasis-ar/welcome.webp);background:var(--art) 58% top/auto calc(var(--top) + 60px) no-repeat,#f5e3cc}}

/* home text placed on the owner's clean design */
.hmsearch{left:23.8cqw;top:2.3cqw;width:27.3cqw;height:3.5cqw}
.hmhits{left:22cqw;top:6.1cqw;width:29.7cqw}
.hmbell{left:79.2cqw;top:1.75cqw;width:4.2cqw;height:4.2cqw}
.hmme{left:84.8cqw;top:1.7cqw;width:13.6cqw;height:4.2cqw}
.hmme span{left:1.2cqw;width:6cqw}
.hmsay{left:37.4cqw;top:9.4cqw;width:17.6cqw;height:6.6cqw;background:#fff;border-radius:1.8cqw;box-shadow:0 .5cqw 1.2cqw rgba(20,48,92,.14);padding:0 .6cqw;z-index:2;animation:pop .35s ease-out}
.hmsay::after{content:"";position:absolute;left:-.9cqw;top:3.4cqw;width:1.8cqw;height:1.8cqw;background:#fff;transform:rotate(45deg);border-radius:.2cqw}
.hmlv{left:51cqw;top:22.2cqw;width:18.1cqw}
.hmnum{left:51cqw;top:29cqw;width:6.4cqw}
.hmgo{left:43.8cqw;top:30.35cqw;width:25.6cqw;height:4.55cqw}
.hmachT{left:76.1cqw;top:20.3cqw;width:14cqw}
.hmall{left:91.8cqw;top:20.5cqw}
.hmrow{left:79.8cqw}
.hmval{left:91.9cqw;width:4.3cqw}
.hmst{top:41.5cqw;height:11.5cqw}
.hmst b{top:6.05cqw}
.hmst .nm{top:-.6cqw;right:-.05cqw}
.hmst .hmbar{top:9.05cqw;height:.75cqw}
.hmachT{left:77.3cqw}

/* settings and profile as two pages */
.sinvon{background:#e2dcfb;mix-blend-mode:multiply;border-radius:2.3cqw;pointer-events:none}
.sicard{background:#fff;border-radius:1.6cqw;box-shadow:0 .2cqw .9cqw rgba(20,48,92,.06)}
.siselw{background:#f5f7fb;border-radius:.8cqw;box-shadow:inset 0 0 0 .1cqw #dfe4ec}
.sitry{justify-content:center;border:0;border-radius:1cqw;background:linear-gradient(90deg,#8b6bf0,#6a45e6);color:#fff;font:700 1.2em var(--disp);cursor:pointer}
.sibub{background:#fff;border-radius:1.4cqw;box-shadow:0 .4cqw 1.1cqw rgba(20,48,92,.15);padding:0 1em;font-weight:700;line-height:1.35;z-index:2;justify-content:center;text-align:center}
.sijr{display:grid;grid-template-columns:repeat(3,1fr);gap:.6cqw 2.2cqw;align-content:center}
.sijr div{display:grid;grid-template-columns:1fr auto;gap:.25cqw .6cqw;align-items:center;min-width:0}
.sijr span{font-weight:700;color:#3a4a63;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sijr b{font-family:var(--disp);color:#1a2f8f}
.sijr u{grid-column:1/-1;display:block;height:.7cqw;background:#ebeef2;border-radius:99px;overflow:hidden}
.sijr i{display:block;height:100%;border-radius:99px}
.silist{flex-direction:column;align-items:stretch;background:#fff;border-radius:3.4cqw;padding:2cqw 3.4cqw;box-shadow:0 .4cqw 1.6cqw rgba(20,48,92,.06)}
.silist h3{margin:0 0 1cqw;font-family:var(--disp);font-size:1.02em;color:#1a2f8f}
.silist a,.silist button{flex:1;display:flex;align-items:center;justify-content:space-between;border:0;border-top:.2cqw solid #eef1f5;background:none;color:#3a4a63;font:700 .9em Tajawal,sans-serif;cursor:pointer}
body.still .rgw,body.still .rgw *{animation:none!important}
@media (max-width:820px){
  .sijr{grid-template-columns:1fr 1fr;gap:1.1cqw 3.4cqw;font-size:.8em}
  .sijr u{height:1.2cqw}
  .sinvon{display:none}
  .sitry{border-radius:3cqw;font-size:1em}.sibub{border-radius:4cqw;font-size:.9em}.sicard{border-radius:3.4cqw}.siselw{border-radius:2cqw}
}
.si.sirt{justify-content:flex-start}
.sittl{white-space:nowrap}
.siselw::after{content:"⌄";position:absolute;left:.8em;top:50%;transform:translateY(-62%);color:#6a7890;font-weight:700}
@media (max-width:820px){
  .sittl{font-size:1.6em;justify-content:flex-start}
  .sijr{font-size:.76em;line-height:1;gap:.8cqw 3.4cqw;align-content:start}
  .sijr div{gap:.5cqw .6cqw}
}

/* question clock and study break */
.pltm{position:fixed;top:0;left:0;right:0;height:7px;background:rgba(255,255,255,.55);z-index:40}
.pltm i{display:block;height:100%;background:linear-gradient(90deg,#ef5a5a,#f5a81c);transform-origin:right;animation:pltm linear forwards}
@keyframes pltm{to{transform:scaleX(0)}}
.sesb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(20,48,92,.45);direction:rtl}
.sesc{width:min(420px,100%);background:#fff;border-radius:24px;padding:18px 22px 22px;text-align:center;box-shadow:0 18px 50px rgba(20,48,92,.3)}
.sesc .rig{width:150px;margin:0 auto}
.sesc h2{margin:8px 0 4px;font-family:var(--disp);color:#1a2f8f}
.sesc p{margin:0 0 16px;font-weight:700;color:#3a4a63}
.sesc>div:last-child{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* daily goal and the fuller badge page */
.hmsay u{display:block;width:80%;height:.45cqw;margin-top:.25cqw;background:#e6ebf3;border-radius:99px;overflow:hidden}
.hmsay u i{display:block;height:100%;background:linear-gradient(90deg,#23b84f,#2fd46b);border-radius:99px}
.achtop{padding:14px 16px;margin-bottom:6px}
.achtop b{font-weight:800}.achtop small{color:var(--muted)}
.achg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:6px}
.sesbg{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 0 16px;padding:0}
.sesbg li{width:84px;display:flex;flex-direction:column;align-items:center;gap:2px}
.sesbg i{font-style:normal;font-size:2.1rem;line-height:1.2}
.sesbg b{font-size:.78rem;line-height:1.2;color:#3a4a63}