:root{--g:#58cc02;--gd:#46a302;--b:#1cb0f6;--bd:#1899d6;--r:#ff4b4b;--y:#ffc800;--bg:#f4f7fb;--t:#2b3a4a;--m:#6b7c8f;--card:#fff;--bd0:#e3e9f0;--sh:0 4px 16px rgba(30,60,100,.08)}
*{box-sizing:border-box}html{-webkit-tap-highlight-color:transparent}
body{margin:0;font:16px/1.5 "Twemoji Country Flags",Inter,"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--t)}
header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:12px max(20px,calc(50% - 300px));background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--bd0)}
h1{margin:0;font-size:22px;letter-spacing:-.3px;color:var(--gd)}
#stats{font-weight:700;background:#fff7d6;color:#9a6b00;padding:6px 14px;border-radius:999px;font-size:14px}
main{max-width:600px;margin:0 auto;padding:24px 16px 60px}
.hero{display:flex;gap:18px;align-items:center;background:linear-gradient(135deg,#e6f9d4,#d8efff);border-radius:24px;padding:20px;margin-bottom:24px;box-shadow:var(--sh)}
.hero img{width:92px;height:92px;border-radius:50%;background:#fff;flex:none;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.hero h2{margin:0 0 4px;font-size:24px}.hero p{margin:0;color:var(--m)}
.unit{background:var(--card);border-radius:22px;margin-bottom:22px;overflow:hidden;box-shadow:var(--sh);border:1px solid var(--bd0)}
.banner{aspect-ratio:16/9;height:auto;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:var(--card);display:flex;align-items:flex-end}
.banner h2{margin:0;width:100%;color:#fff;font-size:22px;padding:34px 18px 12px;background:linear-gradient(transparent,rgba(10,20,40,.7))}
.lesson{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--bd0)}.lesson:first-of-type{border-top:0}
.lesson span{font-weight:600}
button{font:inherit;font-weight:700;cursor:pointer;border:2px solid var(--bd0);border-bottom-width:4px;border-radius:14px;background:#fff;padding:12px 18px;color:var(--t);transition:transform .08s,background .15s}
button:hover:not(:disabled){background:#f3f8ff}button:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}
button.go{background:var(--g);border-color:var(--gd);color:#fff;text-transform:uppercase;letter-spacing:.6px;font-size:14px}
button.go:hover:not(:disabled){background:#61d908}button.done{background:var(--y);border-color:#d9a900;color:#5a4300}
button:disabled{opacity:.55;cursor:default}
.bar{height:16px;background:#dfe7ef;border-radius:10px;overflow:hidden;margin:6px 0 18px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--g),#8ee000);border-radius:10px;transition:width .35s}
.prompt{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.spk{flex:none;width:52px;height:52px;padding:0;border-radius:50%;font-size:22px;background:#ddf4ff;border-color:#a8dcf5;color:var(--bd)}
.q{font-size:22px;font-weight:800;line-height:1.3}.sub{color:var(--m);font-weight:600;margin:0 0 16px}
.opts{display:grid;gap:12px}.opts button{text-align:left;font-size:18px;padding:16px 18px;border-radius:16px}
.opts button.sel{border-color:var(--b);background:#ddf4ff;color:var(--bd)}
.fb{margin-top:20px;padding:16px;border-radius:16px;font-weight:800}.ok{background:#d7ffb8;color:var(--gd)}.no{background:#ffdfe0;color:#c62828}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ans{min-height:56px;border-bottom:2px solid #c9d3de;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:8px;padding:6px 0}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:22px}.big{font-size:44px;text-align:center}
.pic{display:block;width:190px;height:190px;object-fit:contain;margin:6px auto 16px;border-radius:22px;background:#fff;border:1px solid var(--bd0);box-shadow:var(--sh)}
@media(max-width:420px){.hero{flex-direction:column;text-align:center}.cols{gap:8px}}
.right{display:flex;align-items:center;gap:10px}.vl select{font:inherit;font-size:13px;font-weight:600;padding:6px 8px;border:1px solid var(--bd0);border-radius:10px;background:#fff;color:var(--t)}@media(max-width:480px){h1{font-size:18px}.vl select{max-width:120px}}
.opts button.hl{border-color:var(--b);background:#ddf4ff;box-shadow:0 0 0 3px rgba(28,176,246,.25)}
.shake{animation:sh .35s}@keyframes sh{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.resume{display:flex;gap:14px;align-items:center;background:#fff;border:2px solid var(--g);border-radius:20px;padding:12px;margin-bottom:20px;box-shadow:var(--sh)}.resume img{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none}.resume div{flex:1;min-width:0}.resume span{color:var(--m);font-size:14px}
h1{cursor:pointer}

.opts.cards{grid-template-columns:1fr 1fr}.opts.cards button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px 8px;font-size:17px}
.oi{width:104px;height:104px;object-fit:contain;border-radius:14px;background:#fff}
.om{width:44px;height:44px;object-fit:contain;border-radius:10px;margin-right:10px;vertical-align:middle;flex:none}
.cols .opts button{display:flex;align-items:center;justify-content:center;min-height:56px}
.opts.cards button.hl,.opts.cards button.sel{box-shadow:0 0 0 3px rgba(28,176,246,.25)}
.pulse{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--g),#8ee000);border-radius:10px;animation:pulse 1.2s ease-in-out infinite alternate}@keyframes pulse{from{margin-left:0}to{margin-left:60%}}
.soft{color:var(--m);font-weight:600;font-size:12px;margin-left:6px}.rimg{width:64px;height:64px;border-radius:14px;background-size:cover;background-position:center;flex:none}

.prow{display:flex;gap:12px;margin:6px 0 18px}
.dt{width:100%;font:inherit;font-size:20px;padding:14px 16px;border:2px solid var(--bd0);border-radius:14px;outline:none;margin:6px 0 10px;background:#fff;color:var(--t)}.dt:focus{border-color:var(--b)}
.acc{display:flex;flex-wrap:wrap;gap:6px}
.mini{padding:6px 10px;border-radius:10px;font-size:16px;border-bottom-width:3px;min-width:38px}
.vh{margin:26px 0 2px;font-size:19px}
.vocab{display:grid;gap:10px;margin-top:6px}
.vc{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--bd0);border-radius:16px;padding:10px 12px;box-shadow:var(--sh)}
.vi{width:56px;height:56px;object-fit:contain;border-radius:12px;flex:none}.vt{flex:1;min-width:0}
.vf{font-weight:800;font-size:17px}.ve{color:var(--m);font-size:14px}
.tw{cursor:pointer;border-bottom:2px dotted #9fb3c8;padding-bottom:1px}.tw:hover{color:var(--bd);border-bottom-color:var(--b)}
.rv{border-color:var(--y)}.rv .rimg{display:flex;align-items:center;justify-content:center;font-size:30px;background:#fff7d6}

.say{background:#fff;border:1px solid var(--bd0);border-radius:18px;padding:16px;margin:8px 0 18px;text-align:center;box-shadow:var(--sh)}.sf{font-size:24px;font-weight:800}.se{color:var(--m);margin-top:4px}
.microw{display:flex;justify-content:center;margin:6px 0 14px}
.mic{width:84px;height:84px;border-radius:50%;font-size:34px;padding:0;background:#ff4b4b;border-color:#d63a3a;color:#fff}.mic.on{animation:rec 1s infinite}.mic:disabled{opacity:.6}
@keyframes rec{50%{box-shadow:0 0 0 14px rgba(255,75,75,.2)}}
.score{display:flex;align-items:baseline;justify-content:center;gap:4px;margin:6px 0}.score b{font-size:48px}.score span{color:var(--m)}.score.good b{color:var(--gd)}.score.low b{color:#d63a3a}
.wds{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 10px}.wd{cursor:pointer;padding:8px 12px;border-radius:12px;font-weight:800}.wd small{display:block;font-size:11px;font-weight:700;opacity:.8;text-align:center}
.wd.g{background:#d7ffb8;color:#2f7d00}.wd.y{background:#fff3c4;color:#8a6300}.wd.r{background:#ffdfe0;color:#c62828}
.sres,#sres{text-align:center}

.skills{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 24px}
.skill{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:14px;border-radius:18px;background:#fff;box-shadow:var(--sh)}
.skill .si{font-size:28px;line-height:1}.skill b{font-size:17px;margin-top:4px}.skill small{color:var(--m);font-weight:600;font-size:12px}
.row3{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.row3 button{flex:1;min-width:96px;padding:12px 10px}
.lvl{height:8px;background:#e3e9f0;border-radius:6px;overflow:hidden;max-width:220px;margin:0 auto 12px}.lvl i{display:block;height:100%;width:0;background:linear-gradient(90deg,#58cc02,#1cb0f6);transition:width .08s}
.cols button.matched{background:#d7ffb8;border-color:#58cc02;color:#2f7d00;opacity:1}

.acct{padding:6px 10px;border-radius:50%;font-size:18px;line-height:1;border-bottom-width:3px;position:relative}.acct.on::after{content:'';position:absolute;right:2px;top:2px;width:9px;height:9px;border-radius:50%;background:#58cc02;border:2px solid #fff}
.sheet{position:fixed;inset:0;background:rgba(20,35,55,.5);display:flex;align-items:flex-end;justify-content:center;z-index:50;padding:0}
.scard{position:relative;background:#fff;width:100%;max-width:520px;border-radius:24px 24px 0 0;padding:22px 18px 28px;max-height:92vh;overflow:auto;box-shadow:0 -10px 40px rgba(0,0,0,.25)}
@media(min-width:560px){.sheet{align-items:center}.scard{border-radius:24px}}
.scard h3{margin:0 0 6px;font-size:20px}.scard .x{position:absolute;right:12px;top:12px;padding:4px 10px;border-radius:50%;border-bottom-width:2px}
.wide{display:block;width:100%;margin:10px 0}.gbtn{display:flex;justify-content:center;margin:10px 0;width:100%;color-scheme:light;min-height:44px}.gbtn iframe{color-scheme:light}
.code{font:800 26px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;text-align:center;background:#f4f7fb;border:2px dashed #9fb3c8;border-radius:16px;padding:18px 8px;margin:12px 0;user-select:all}

/* ---- game layer ---- */
.dash{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.dc{background:#fff;border:1px solid var(--bd0);border-radius:16px;padding:10px 6px;text-align:center;box-shadow:var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:inherit}
button.dc{border-bottom-width:3px;cursor:pointer}.dc small{color:var(--m);font-weight:700;font-size:11px}.big2{font-weight:800;font-size:18px}
.xpb{height:6px;width:80%;background:#e3e9f0;border-radius:4px;overflow:hidden;margin-top:3px}.xpb i{display:block;height:100%;background:linear-gradient(90deg,var(--g),#8ee000)}
.qcard{background:#fff;border:1px solid var(--bd0);border-radius:18px;padding:12px 14px;margin-bottom:14px;box-shadow:var(--sh)}.qrow{display:grid;grid-template-columns:1fr 70px auto;gap:8px;align-items:center;margin-top:8px;font-size:14px;font-weight:600}
.qrow small{color:var(--m);font-weight:700;font-size:11px;white-space:nowrap}.qb{height:8px;background:#e3e9f0;border-radius:5px;overflow:hidden}.qb i{display:block;height:100%;background:var(--b)}.qd .qb i{background:var(--g)}.qd span:first-child{color:var(--gd)}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.tool{display:flex;flex-direction:column;align-items:center;gap:1px;padding:12px 4px;border-radius:16px;background:#fff;box-shadow:var(--sh)}
.tool span{font-size:26px;line-height:1}.tool b{font-size:14px}.tool small{color:var(--m);font-weight:600;font-size:11px}.tool.tutor{background:linear-gradient(135deg,#e6f9d4,#d8efff);border-color:#9be15d;grid-column:span 3;flex-direction:row;justify-content:center;gap:10px;padding:14px}.tool.tutor span{font-size:34px}.tool.tutor b{font-size:18px}
.mw{position:relative;display:inline-block;flex:none}.mw img{width:92px;height:92px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1)}.hero .mw img{width:92px;height:92px}
.acc{position:absolute;font-style:normal;pointer-events:none;line-height:1}.acc-hat,.acc-cap,.acc-crown{top:-14%;left:50%;transform:translateX(-50%);font-size:40px}.acc-glasses{top:26%;left:50%;transform:translateX(-50%);font-size:42px}.acc-flower{top:2%;right:6%;font-size:30px}
/* path map */
.path{display:flex;flex-direction:column;gap:6px;padding:16px 18px 20px;background:linear-gradient(#fff,#f7fbff)}.pn{display:flex;align-items:center;gap:14px}.nt{display:flex;flex-direction:column;line-height:1.25}.nt b{font-size:15px}.nt small{color:var(--m);font-weight:700;font-size:12px}
.node{width:62px;height:62px;border-radius:50%;padding:0;font-size:24px;font-weight:800;background:#e3e9f0;border-color:#c5d0dc;color:#6b7c8f;flex:none;border-bottom-width:6px}
.node.dn{background:var(--y);border-color:#d9a900;color:#5a4300}.node.cur{background:var(--g);border-color:var(--gd);color:#fff;animation:pulseN 1.6s infinite}.node.boss{background:#fff3c4;border-color:#e0b800}.node.boss.dn{background:var(--y)}.node:disabled{opacity:.55}.nn{display:block}
@keyframes pulseN{50%{box-shadow:0 0 0 12px rgba(88,204,2,.2)}}
/* effects */
.combo{color:#ff7a00;font-weight:800;margin-left:6px}.stars{letter-spacing:6px;font-size:46px}.note{background:#fff7d6;color:#8a6300;border-radius:14px;padding:10px 14px;margin:8px 0;font-weight:700;text-align:center}
#toasts{position:fixed;left:0;right:0;top:64px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.toast{background:#2b3a4a;color:#fff;border-radius:14px;padding:10px 16px;font-weight:700;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:90vw;animation:tin .25s}.toast.out{opacity:0;transition:opacity .4s}@keyframes tin{from{transform:translateY(-10px);opacity:0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}.confetti span{position:absolute;top:-30px;animation:fall 2.4s linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.8}}
/* sheets */
.wl{display:grid;gap:8px;margin-top:8px}.wr{display:flex;align-items:center;gap:10px;background:#f7fbff;border-radius:14px;padding:8px 10px}.wr div{flex:1;min-width:0}.wr small{display:block;color:var(--m)}.dots{color:var(--g);letter-spacing:2px;font-size:13px}
.bg2{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.bd{background:#f4f7fb;border-radius:16px;padding:12px 6px;text-align:center;opacity:.55}.bd.on{background:#fff7d6;opacity:1}.bd span{font-size:32px;display:block}.bd small{font-weight:700;font-size:11px}
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.si2{background:#f7fbff;border-radius:16px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.sic{font-size:32px}.si2 b{font-size:13px}.si2 small{color:var(--m);font-size:11px}.mini.on{background:var(--y);border-color:#d9a900}.gm{font-size:16px}
.lb{list-style:none;padding:0;margin:8px 0}.lb li{display:flex;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#f7fbff;margin-bottom:6px;font-weight:700;counter-increment:r}.lb{counter-reset:r}.lb li::before{content:counter(r);color:var(--m);width:26px}.lb li span{flex:1}.lb li.me{background:#e8ffd0}.mine{background:#ddf4ff;border-radius:12px;padding:10px;font-weight:800;text-align:center;margin:6px 0}
/* themes */
:root:not([data-theme])[data-wear=ocean]{--g:#1cb0f6;--gd:#1899d6;--b:#2b70e4;--bd:#1f55b5;--bg:#eef5ff}:root:not([data-theme])[data-wear=sunset]{--g:#ff8a3d;--gd:#d96a1e;--b:#ec4899;--bd:#be2f79;--bg:#fff5ee}:root:not([data-theme])[data-wear=forest]{--g:#2e9e5b;--gd:#217a44;--b:#7a5a2e;--bd:#5b4220;--bg:#f2f8f3}
/* tutor */
.tt .chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}.chips button{white-space:nowrap;padding:8px 12px;border-radius:999px;font-size:14px}.chips button.on{background:var(--g);color:#fff;border-color:var(--gd)}
.stage{display:flex;justify-content:center;margin:6px 0}.owlw{position:relative;width:170px;height:170px;transition:transform .08s}.owlw img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;border-radius:24px}.owlw img.on{opacity:1}.owlw img.f-closed{transform:scale(.9)}.owlw .acc{font-size:46px}
.chat{height:34vh;min-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:8px 2px}.b{max-width:86%;padding:10px 14px;border-radius:18px;font-size:17px;line-height:1.35;box-shadow:var(--sh)}.tb{background:#fff;align-self:flex-start;border-bottom-left-radius:6px}.mb{background:var(--b);color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.tb .fr{font-weight:700}.tb .en{color:var(--m);margin-top:4px;font-size:15px}.bt{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.fix{display:flex;gap:10px;align-items:center;background:#fff7d6;border-radius:16px;padding:10px 12px;align-self:flex-end;max-width:92%}.fix .stk{width:54px;height:54px;border-radius:12px;flex:none}.fix s{color:#c62828}.fix em{display:block;color:#8a6300;font-size:13px;margin-top:2px}.sysmsg{text-align:center;color:var(--m);font-size:13px;font-weight:600}
.tin{display:flex;gap:8px;align-items:center;margin-top:8px}.mic.small{width:54px;height:54px;font-size:24px;flex:none}.auto{font-size:13px;font-weight:700;color:var(--m)}

/* ================= responsive: phone, tablet, desktop ================= */
:root{--w:600px}
header{padding:calc(12px + env(safe-area-inset-top)) max(16px,calc((100% - var(--w)) / 2)) 12px}
main{max-width:var(--w);padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.scard{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
#app>*:not(.homegrid):not(.tt){max-width:640px;margin-left:auto;margin-right:auto}
.homegrid{display:block}.units{display:block}
@media (min-width:700px){
  :root{--w:760px}.tools{grid-template-columns:repeat(5,1fr)}.tool.tutor{grid-column:span 5}
  .skills{grid-template-columns:repeat(4,1fr)}
  .pic{width:210px;height:210px}.oi{width:118px;height:118px}.q{font-size:24px}
}
@media (min-width:960px){
  :root{--w:1180px}body{font-size:17px}
  .homegrid{display:grid;grid-template-columns:370px minmax(0,1fr);gap:28px;align-items:start}
  .hside{position:sticky;top:78px}.tools{grid-template-columns:repeat(3,1fr)}.tool.tutor{grid-column:span 3}
  .hmain .skills{grid-template-columns:repeat(4,1fr)}
  .pic{width:240px;height:240px}.oi{width:132px;height:132px}.q{font-size:26px}.opts button{font-size:19px}
  .tt{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-areas:"top top" "chips chips" "stage chat" "stage st" "stage lvl" "stage tin" "stage hints" "foot foot";column-gap:28px}
  .ttop{grid-area:top}.ttchips{grid-area:chips}.stage{grid-area:stage;align-self:start;position:sticky;top:90px}.chat{grid-area:chat;height:52vh}.tt #tt-status{grid-area:st}.ttlvl{grid-area:lvl}.ttin{grid-area:tin}.tthints{grid-area:hints}.ttfoot{grid-area:foot}
  .owlw{width:250px;height:250px}.b{font-size:18px}
}
@media (min-width:1280px){.units{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.units .unit{margin-bottom:0}}
@media (hover:hover) and (pointer:fine){button:not(:disabled):hover{filter:brightness(1.03)}.node:not(:disabled):hover{transform:scale(1.06)}.tool:hover,.skill:hover{transform:translateY(-2px)}.tool,.skill,.node{transition:transform .12s}}
@media (pointer:coarse){button{min-height:46px}.mini{min-height:40px;min-width:44px}.tw{padding:4px 2px}}
@media (max-width:359px){h1{font-size:17px}.dash{grid-template-columns:repeat(2,1fr)}.skills{grid-template-columns:1fr}.shop,.bg2{grid-template-columns:repeat(2,1fr)}.tools{grid-template-columns:repeat(2,1fr)}.tool.tutor{grid-column:span 2}.q{font-size:20px}}
@media (max-height:520px) and (orientation:landscape){.owlw{width:110px;height:110px}.chat{height:30vh;min-height:110px}.pic{width:120px;height:120px}header{position:static}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#app>.row,#app>.bar,#app>#ex,#app>#fb{width:100%}#app>.row{margin-left:auto!important;margin-right:auto!important}
@media (min-width:960px){.chat{height:42vh;min-height:220px}.stage{top:80px}}

/* ---- fit phones with a browser address bar / bottom bar ---- */
html,body{min-height:100vh;min-height:100dvh}
main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
#fb:not(:empty){position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:8;background:var(--bg);padding:10px 0 4px;margin-top:6px;box-shadow:0 -14px 14px -8px var(--bg)}
#fb .fb{margin-top:0}#fb .row{margin-top:8px}
.sheet{height:auto;bottom:0}.scard{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
@media (max-width:959px){
  .chat{height:calc(100vh - 470px);height:calc(100dvh - 470px);min-height:130px}
  .ttin{position:sticky;bottom:calc(6px + env(safe-area-inset-bottom));z-index:7;background:var(--bg);padding:8px 0}
  .stage .owlw{width:min(150px,22dvh);height:min(150px,22dvh)}
}
@media (max-height:640px){.pic{width:140px;height:140px}.oi{width:84px;height:84px}.opts button{padding:10px 8px}.q{font-size:20px}.hero{padding:12px}.bar{margin:2px 0 10px}}

/* ================= games ================= */
.gm{max-width:640px;margin:0 auto}.gtop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.gtop b{font-size:18px}#gscore{font-weight:800;color:var(--m);min-width:64px;text-align:right;font-size:14px}
.gcards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media (min-width:700px){.gcards{grid-template-columns:repeat(3,1fr)}}@media (min-width:960px){.gm{max-width:900px}.gcards{grid-template-columns:repeat(5,1fr)}}
.gcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px 8px 12px;border-radius:22px;background:#fff;box-shadow:var(--sh)}.gcard .gi{width:96px;height:96px;object-fit:contain;border-radius:18px}.gcard b{font-size:16px}.gcard small{color:var(--m);font-weight:600;font-size:12px;line-height:1.25;min-height:30px}.gs{font-size:13px;letter-spacing:1px}.gcard.locked{opacity:.55}.gcard.locked .gi{filter:grayscale(.8)}
.gres{text-align:center}.gres .pic{margin-bottom:6px}.gowl{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto 8px}
.bpic{width:150px;height:150px;margin:6px auto;background:#fff;border:1px solid var(--bd0);border-radius:22px;box-shadow:var(--sh);padding:8px;display:flex;align-items:center;justify-content:center}.bpic.big{width:200px;height:200px;animation:bobble 3s ease-in-out infinite}.bpic img,.pcell img,.mcard img.cb2{width:100%;height:100%;object-fit:contain}
/* memory */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}@media (min-width:700px){.mgrid{grid-template-columns:repeat(4,1fr)}}
.mcard{position:relative;aspect-ratio:1;padding:0;border-radius:18px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:transform .2s}.mcard .cb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mcard .mc{display:none;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:6px;font-size:16px;background:#fff;text-align:center}.mcard .mc img{width:100%;height:100%;object-fit:contain}.mcard .mc small{color:var(--m);font-weight:600;font-size:12px}
.mcard.up .mc{display:flex}.mcard.up .cb{display:none}.mcard.up{transform:rotateY(0)}.mcard.ok{border-color:var(--g);background:#d7ffb8;animation:okpulse .5s}.mcard.ok .mc{background:#e9ffd8}
@keyframes okpulse{50%{transform:scale(1.08)}}
/* bubbles */
.bmode{display:flex;gap:8px;justify-content:center;margin-bottom:8px}.bmode .mini.on{background:var(--b);color:#fff;border-color:var(--bd)}
.bstage{position:relative;height:min(50dvh,420px);min-height:300px;border-radius:22px;overflow:hidden;background:#bfe9f7 url(img/game-sea-bg.jpg) center/cover;background-image:url(img/game-sea-bg.jpg);box-shadow:inset 0 0 40px rgba(255,255,255,.4)}
.bub{position:absolute;width:104px;height:104px;border-radius:50%;padding:16px;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.95),rgba(255,255,255,.35) 45%,rgba(28,176,246,.28));border:3px solid rgba(255,255,255,.9);box-shadow:inset 0 0 18px rgba(255,255,255,.8),0 8px 18px rgba(20,120,180,.3);animation:bobble 3.2s ease-in-out infinite}.bub img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.bub.pop{animation:popb .5s forwards}.bub.hint{box-shadow:0 0 0 6px rgba(255,200,0,.7)}@keyframes bobble{50%{transform:translateY(-14px)}}@keyframes popb{40%{transform:scale(1.25)}100%{transform:scale(1.6);opacity:0}}
.bbar{display:flex;align-items:center;gap:12px;margin-top:10px}.tbar{flex:1;height:10px;background:#e3e9f0;border-radius:6px;overflow:hidden}.tbar i{display:block;height:100%;width:0;background:var(--g)}
.shake{animation:sh .35s}
/* builder */
.bslots{display:flex;gap:6px;justify-content:center;align-items:center;margin:10px 0;flex-wrap:wrap}.slot{width:40px;height:48px;border-bottom:4px solid #9fb3c8;text-align:center;font-size:28px;font-weight:800;line-height:48px;text-transform:lowercase}.slot.on{color:var(--gd);border-color:var(--g);animation:okpulse .3s}.pre{font-size:22px;font-weight:700;color:var(--m);margin-right:6px}
.tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}.tile{width:54px;height:54px;border-radius:14px;font-size:26px;font-weight:800;padding:0;text-transform:lowercase}.tile:disabled{opacity:.25}#bld.done .bpic{animation:okpulse .6s}
/* train */
.track{background:#cfeeff url(img/game-track-bg.jpg) center/cover;border-radius:22px;padding:30px 10px 14px;overflow:hidden;margin-bottom:8px}.train{display:flex;align-items:flex-end;gap:4px;transition:transform 1.8s ease-in;flex-wrap:nowrap}.train .eng{width:84px;height:84px;object-fit:contain;flex:none}.cars{display:flex;gap:6px;flex-wrap:wrap}
.car{min-width:62px;min-height:48px;padding:6px 8px;border-radius:12px;border:3px dashed #fff;background:rgba(255,255,255,.45);font-size:17px;font-weight:800;color:var(--t)}.car.full{border:3px solid #e0b800;background:#ffe27a}
.train.go{transform:translateX(130%)}.blocks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}.blk{padding:12px 16px;font-size:19px;font-weight:800;border-radius:14px}
/* picture grids: echo, bingo, odd, word of the day */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pcell{position:relative;aspect-ratio:1;padding:8px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column}.pcell.lit{background:#fff3c4;border-color:#ffc800;transform:scale(1.05)}.pcell.on{background:#d7ffb8;border-color:var(--g)}.pcell.bad{background:#ffdfe0;border-color:#ff7b7b}.pcell.line{box-shadow:0 0 0 4px var(--y)}.pcell .mk{display:none;position:absolute;right:6px;top:4px;font-size:26px}.pcell.on .mk{display:block}.cap{font-weight:800;color:var(--m);margin-top:2px}
.starsrow{font-size:28px;margin-top:4px}.wod{text-align:center}.kline{line-height:1.6}.kw{padding:2px 6px;border-radius:8px;transition:background .15s}.kw.on{background:#ddf4ff;color:var(--bd)}

/* ================= exam practice ================= */
.tool.exam{grid-column:span 3;flex-direction:row;justify-content:center;gap:10px;padding:14px;background:linear-gradient(135deg,#fff3c4,#ffe0a8);border-color:#ffc800;flex-wrap:wrap;text-align:left}.tool.exam span{font-size:32px}.tool.exam b{font-size:17px}.tool.exam small{flex-basis:100%;text-align:center}
@media (min-width:700px){.tool.exam{grid-column:span 5}}@media (min-width:960px){.tool.exam{grid-column:span 3}}
.ex .lvls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}.lvlb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 8px;border-radius:20px;background:#fff;box-shadow:var(--sh)}.lvlb b{font-size:30px}.lvlb small{color:var(--m);font-weight:700}.lvlb.on{background:var(--g);border-color:var(--gd);color:#fff}.lvlb.on small{color:#fff}
.etopics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media (min-width:700px){.etopics{grid-template-columns:repeat(3,1fr)}}
.etopic{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px 8px;border-radius:20px;background:#fff;box-shadow:var(--sh)}.eem{font-size:34px;line-height:1}.etopic b{font-size:15px}.eparts{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.eparts i{font-style:normal;font-size:11px;font-weight:800;color:var(--m);background:#f1f5f9;border-radius:8px;padding:2px 6px}.eparts i.on{background:#e8ffd0;color:var(--gd)}
.epart{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px;border-radius:18px;background:#fff;box-shadow:var(--sh);margin:10px 0}.epart>span{font-size:30px}.epart div{flex:1}.epart small{display:block;color:var(--m);font-weight:600;margin-top:2px}.epart em{font-style:normal;font-weight:800;color:var(--gd)}.epart.study{background:#f0f9ff}.epart.mock{background:linear-gradient(135deg,#e6f9d4,#d8efff);border-color:#9be15d}
.eitem{background:#fff;border:1px solid var(--bd0);border-radius:18px;padding:14px;margin:12px 0;box-shadow:var(--sh)}.eh{color:var(--m);margin-bottom:4px}.efr{font-size:18px;line-height:1.5;font-weight:600}.eenw{color:var(--m);margin-top:6px}
.eq{margin:14px 0 4px}.eqt{margin-bottom:6px}.eqen{display:block;color:var(--m);font-weight:600}.eopts{display:grid;gap:8px}.eo{text-align:left;padding:12px 14px;border-radius:14px;font-size:17px}.eo small{display:block;color:var(--m);font-weight:600;font-size:13px}.eo.sel{border-color:var(--b);background:#ddf4ff}.eo.right{border-color:var(--g);background:#d7ffb8;color:var(--gd);opacity:1}.eo.wrong{border-color:#ff7b7b;background:#ffdfe0;opacity:1}.eo:disabled{opacity:1}
.etrans{background:#f4f7fb;border-radius:12px;padding:10px;margin-top:10px}.tl{margin:4px 0}.tl b{display:inline-block;width:22px;color:var(--bd)}
.eresult{background:#fff7d6;border-radius:18px;padding:14px;text-align:center;margin:14px 0}.eresult.big{background:linear-gradient(135deg,#e6f9d4,#d8efff)}.big2{font-size:40px;font-weight:800}
.crit{display:grid;gap:10px;margin:10px 0}.cr{display:grid;grid-template-columns:1fr 90px auto;gap:6px 10px;align-items:center;font-weight:700}.cr small{grid-column:1/-1;color:var(--m);font-weight:600}.better{background:#f0f9ff;border-radius:16px;padding:12px;margin:12px 0}.better small{color:var(--m);font-weight:700}.better div{font-size:17px;margin-top:4px}

.en[hidden],.eenw[hidden],.etrans[hidden]{display:none!important}

/* ================= explore: history, art, culture ================= */
.tool.xr{background:linear-gradient(160deg,#fff,#f4f9ff)}
.xsec{background:#fff;border:1px solid var(--bd0);border-radius:20px;overflow:hidden;margin:14px 0;box-shadow:var(--sh);padding-bottom:12px}.xsec h3{margin:10px 14px 4px}.xsec .row3,.xsec .xfr,.xsec .xen{margin-left:14px;margin-right:14px}
.ximg{display:block;width:100%;max-height:260px;object-fit:contain;background:#fbfdff;border-bottom:1px solid var(--bd0)}.xfr{font-size:18px;line-height:1.6;font-weight:600;margin-top:6px}.xen{color:var(--m);line-height:1.5}

.gtop button{white-space:nowrap}.gtop b{text-align:center;flex:1}

/* ================= AI art studio + new tracks ================= */
.tool.studio{grid-column:span 3;flex-direction:row;justify-content:center;gap:10px;padding:14px;background:linear-gradient(135deg,#ffe3f1,#e6e0ff);border-color:#f3a6d0;flex-wrap:wrap}.tool.studio span{font-size:32px}.tool.studio b{font-size:17px}.tool.studio small{flex-basis:100%;text-align:center}
@media (min-width:700px){.tool.studio{grid-column:span 5}}@media (min-width:960px){.tool.studio{grid-column:span 3}}
.ideas{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}.idea{font-size:13px;padding:6px 10px}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media (min-width:700px){.gal{grid-template-columns:repeat(3,1fr)}}.gpic{padding:0;overflow:hidden;border-radius:16px;background:#fff;text-align:left}.gpic img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.gpic small{display:block;padding:6px 8px;color:var(--m);font-weight:700;font-size:12px}

.tool.explorecard{grid-column:span 3;flex-direction:row;justify-content:center;gap:10px;padding:14px;background:linear-gradient(135deg,#e0f3ff,#e6ffe9);border-color:#8fd3ff;flex-wrap:wrap}.tool.explorecard span{font-size:32px}.tool.explorecard b{font-size:17px}.tool.explorecard small{flex-basis:100%;text-align:center;line-height:1.35}
@media (min-width:700px){.tool.explorecard{grid-column:span 5}}@media (min-width:960px){.tool.explorecard{grid-column:span 3}}
.tracktile{padding:18px 8px}.tracktile .eem{font-size:38px}

/* ================= start screen + your path ================= */
.start{max-width:720px}.startmascot{display:flex;justify-content:center}.startmascot img{width:110px;height:110px;object-fit:contain;border-radius:50%;background:#fff;box-shadow:var(--sh)}
.goals{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0}@media (min-width:700px){.goals{grid-template-columns:1fr 1fr}}
.goal,.pathc{position:relative;display:flex;align-items:center;gap:14px;text-align:left;padding:14px;border-radius:18px;background:#fff;box-shadow:var(--sh);width:100%}.ge{font-size:32px;line-height:1;flex:none}.goal div,.pathc div{flex:1;min-width:0}.goal small,.pathc small{display:block;color:var(--m);font-weight:600;margin-top:2px;line-height:1.3}
.goal .gc{font-style:normal;width:26px;height:26px;border-radius:50%;border:2px solid var(--bd0);display:flex;align-items:center;justify-content:center;color:transparent;font-weight:800;flex:none}.goal.on{border-color:var(--g);background:#f1ffe3}.goal.on .gc{background:var(--g);border-color:var(--gd);color:#fff}
.lvlrow{display:grid;gap:8px}.lvlq{text-align:left;padding:12px 14px;border-radius:16px}.lvlq small{display:block;color:var(--m);font-weight:600}.lvlq.on{border-color:var(--b);background:#ddf4ff}
.paths{display:grid;gap:10px}@media (min-width:700px){.paths{grid-template-columns:1fr 1fr}}@media (min-width:960px){.paths{grid-template-columns:1fr}}.pathc{border-color:#cfe9ff;background:linear-gradient(135deg,#fff,#f1f9ff)}.pathc em{font-style:normal;font-weight:800;color:var(--b);font-size:22px}
/* picture learning */
.vp{max-width:720px;margin:0 auto}.vimg{aspect-ratio:16/9;background:#111;border-radius:18px;overflow:hidden}.vimg img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.vcap{text-align:center;padding:8px}.vfr{font-size:22px;font-weight:700;margin:6px 0}.vw{padding:0 2px;border-radius:6px}.vw.on{background:#ffe38a}.vsub{color:#666;margin:2px 0}
.vctrl,.vctrl2{display:flex;gap:8px;justify-content:center;margin:8px 0;flex-wrap:wrap}.vctrl button{font-size:20px;padding:10px 16px}.vdots{display:flex;gap:6px;justify-content:center}.vdots i{width:10px;height:10px;border-radius:50%;background:#ccc}.vdots i.on{background:#58cc02}.vdots i.past{background:#9ad66b}
.scn{position:relative;max-width:720px;margin:0 auto}.scn img{width:100%;display:block;border-radius:16px}.hot{position:absolute;background:transparent;border:2px solid transparent;border-radius:10px;padding:0;cursor:pointer}.hot:hover{border-color:#fff8}.hot.got{border-color:#58cc02;background:#58cc0233}.hot.hint{border-color:#ffc800;background:#ffc80044}.hot.shake{animation:shk .3s}@keyframes shk{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.sinfo{text-align:center;min-height:70px;margin-top:8px}.chipfr{display:flex;gap:10px;justify-content:center;align-items:center;font-size:22px}.chipfr span{color:#666;font-size:15px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.gpic{border:0;background:none;padding:0;text-align:center}.gpic img,.nopic{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#eee;display:flex;align-items:center;justify-content:center;font-size:30px}.gpic small{display:block;font-size:12px}
.pr{display:flex;align-items:center;gap:8px;justify-content:center}.pw{padding:10px 14px}.vs{color:#999;font-size:12px}.vh{margin:14px 0 6px}.filebtn{display:inline-block;cursor:pointer}
.mini.on{background:#58cc02;color:#fff}
/* level groups */
.lvgroup{margin:10px 0;border-radius:16px;background:var(--card,#fff);box-shadow:0 1px 4px #0002}.lvgroup>summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.lvgroup>summary::-webkit-details-marker{display:none}
.lvbadge{background:#58cc02;color:#fff;border-radius:10px;padding:4px 10px;font-weight:800}.lvgroup small{color:#777}.lvbar{flex-basis:100%;height:6px;border-radius:4px;background:#e5e5e5;overflow:hidden}.lvbar i{display:block;height:100%;background:#58cc02}
/* daily plan */
.plancard{background:var(--card,#fff);border-radius:16px;padding:12px 14px;margin:0 0 12px;box-shadow:0 1px 4px #0002}.planhead{display:flex;justify-content:space-between;align-items:center}.planbar{height:8px;border-radius:5px;background:#e5e5e5;margin:8px 0;overflow:hidden}.planbar i{display:block;height:100%;background:#58cc02}
.plantask{display:flex;width:100%;align-items:center;gap:10px;text-align:left;border:0;background:#f4f8ef;border-radius:12px;padding:10px 12px;margin:5px 0;font:inherit;cursor:pointer}.plantask b{flex:1}.plantask em{font-style:normal;color:#58a700;font-weight:700}.plantask.pdone{opacity:.65}.plantask.pdone b{text-decoration:line-through}
.wkrow{display:flex;align-items:center;gap:10px;margin:8px 0}.wkrow>span:first-child{min-width:110px}.wkrow .qb{flex:1;height:8px;border-radius:5px;background:#e5e5e5;overflow:hidden}.wkrow .qb i{display:block;height:100%;background:#58cc02}.pulse{animation:pls 1s 3}@keyframes pls{50%{transform:scale(1.15)}}.bar>.pulse{animation:pulse 1.2s ease-in-out infinite alternate}
/* news */
.newslist{display:flex;flex-direction:column;gap:8px;margin:10px 0}.newsitem{display:flex;gap:12px;align-items:center;text-align:left;border:0;border-radius:14px;background:var(--card,#fff);box-shadow:0 1px 4px #0002;padding:10px 12px;font:inherit;cursor:pointer}.newsitem .nem{font-size:26px;min-width:34px;text-align:center}.newsitem small{display:block;color:#777;font-size:12px}
/* village */
.villagecard{display:flex;align-items:center;gap:12px;width:100%;border:0;border-radius:18px;background:linear-gradient(135deg,#d9f2c4,#fff6c9);box-shadow:0 2px 8px #0003;padding:0;margin:0 0 12px;overflow:hidden;font:inherit;text-align:left;cursor:pointer}.villagecard .vcimg{width:34%;min-height:96px;align-self:stretch;background:url(img/village-map.jpg) center/cover}.vctext{flex:1;padding:10px 0;display:flex;flex-direction:column;gap:2px}.vctext span{font-size:13px;color:#456}.vctext small{color:#3a7d0a;font-weight:700}.villagecard em{font-style:normal;font-weight:800;color:#3a7d0a;padding-right:14px}
.vmap{position:relative;max-width:760px;margin:0 auto;border-radius:18px;overflow:hidden;background:#fff}.vmap img{width:100%;display:block}.vpin{position:absolute;transform:translate(-50%,-50%);border:0;border-radius:16px;background:#fffd;box-shadow:0 2px 6px #0004;padding:4px 8px;display:flex;flex-direction:column;align-items:center;font:inherit;cursor:pointer;min-width:62px}.vpin span{font-size:26px}.vpin small{font-size:11px;font-weight:700}.vpin i{font-style:normal;font-size:11px;color:#3a7d0a}.vpin:active{transform:translate(-50%,-50%) scale(.94)}
#vowl{position:absolute;transform:translate(-50%,-50%);font-size:30px;transition:left .75s ease-in-out,top .75s ease-in-out;pointer-events:none;filter:drop-shadow(0 2px 2px #0006)}#vowl.walk{animation:hop .25s infinite alternate}@keyframes hop{to{margin-top:-6px}}
.vbag{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px auto;max-width:760px}.vbag span{font-size:26px}
.vplace{height:170px;border-radius:18px;background-size:cover;background-position:center;position:relative;margin-bottom:6px}.vwho{position:absolute;left:10px;bottom:10px;display:flex;gap:8px;align-items:center;background:#fffd;border-radius:14px;padding:6px 10px}.vwho img{width:48px;height:48px;border-radius:50%;object-fit:cover}.vwho small{display:block;color:#666}
.vscene{position:relative;min-height:230px;border-radius:18px;background-size:cover;background-position:center;padding:10px;display:flex;align-items:flex-end;gap:8px}.vnpc{width:34%;max-width:150px;border-radius:16px;box-shadow:0 2px 6px #0004;align-self:flex-end}.vbub{flex:1;background:#fffef;background:#fffffff2;border-radius:16px;padding:10px 12px;box-shadow:0 2px 6px #0003}.vbub p{margin:4px 0}.vdots2{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px}.vdots2 i{width:10px;height:10px;border-radius:50%;background:#fff9}.vdots2 i.on{background:#58cc02}.vdots2 i.past{background:#9ad66b}
.vopts .eo small{display:block;color:#666;font-size:12px}.eo.hint{outline:3px solid #ffc800}.vsay{text-align:center;margin-top:8px}.vitem{font-size:64px;animation:hop .4s 4 alternate}
.vnpc{animation:npcin .5s both}@keyframes npcin{from{transform:translateX(-30px);opacity:0}}.vnpc.talking{animation:talkb .28s infinite alternate}@keyframes talkb{to{transform:translateY(-6px) scale(1.03)}}.vbub{animation:bubin .35s .2s both}@keyframes bubin{from{transform:scale(.85);opacity:0}}
.vh2{display:inline-flex;gap:6px;margin-left:8px;float:right}.vhear{font-style:normal;background:#eef6e6;border-radius:10px;padding:3px 8px;font-size:14px}.vopts .eo{text-align:left}
/* right-to-left screens (Persian, Arabic): the app text flows right to left, the words being learned stay left to right */
[dir=rtl] body{text-align:start}
[dir=rtl] .q,[dir=rtl] .sub,[dir=rtl] .fb,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] p,[dir=rtl] small,[dir=rtl] .nt b,[dir=rtl] .nt small,[dir=rtl] summary b{unicode-bidi:plaintext}
[dir=rtl] .opts button,[dir=rtl] #bank button,[dir=rtl] .ans,[dir=rtl] .sf,[dir=rtl] .tw,[dir=rtl] .wd,[dir=rtl] .vfr,[dir=rtl] .xfr,[dir=rtl] .eo span,[dir=rtl] .wr b{unicode-bidi:plaintext}
[dir=rtl] #dt,[dir=rtl] textarea,[dir=rtl] input[type=text]{direction:ltr;text-align:left}
[dir=rtl] .pn{direction:ltr}
[dir=rtl] .gtop,[dir=rtl] .row,[dir=rtl] .row3{direction:rtl}
[dir=rtl] .resume,[dir=rtl] .plancard,[dir=rtl] .villagecard,[dir=rtl] .qrow{direction:rtl}
[dir=rtl] .vh2{float:left;margin-left:0;margin-right:8px}
/* matching pairs: green when right, red when wrong, no spoken verdict */
.cols button.matched{background:#d7f5c3!important;border-color:#58cc02!important;color:#2b6a00}
.cols button.bad{background:#ffdfe0!important;border-color:#ff4b4b!important;color:#a30000}
/* the language being learned always reads left to right, even on a Persian or Arabic screen: word order, answers, options */
[dir=rtl] #bank,[dir=rtl] .ans,[dir=rtl] .sf,[dir=rtl] #r,[dir=rtl] .say,[dir=rtl] .opts.fr,[dir=rtl] .wds{direction:ltr}
[dir=rtl] #bank button,[dir=rtl] .ans button,[dir=rtl] #r button,[dir=rtl] .tw{direction:ltr;unicode-bidi:isolate}
.ltrline{unicode-bidi:isolate;font-weight:700}
[dir=rtl] .ltrline{display:block;text-align:center;margin:3px 0}
[dir=rtl] .b.tb .fr,[dir=rtl] .b.mb,[dir=rtl] .fix s,[dir=rtl] .fix b,[dir=rtl] #tt-in{direction:ltr;text-align:left}
[dir=rtl] .b.tb .en{direction:rtl}
[dir=rtl] .fix s,[dir=rtl] .fix b{display:block;direction:ltr;text-align:left;unicode-bidi:isolate}
/* explore pages: the text in the language being learned reads left to right on right-to-left screens */
[dir=rtl] .xsec .xfr,[dir=rtl] .xsec h3,[dir=rtl] .wr b,[dir=rtl] .eq .eqq,[dir=rtl] .eo span,[dir=rtl] .gm.ex .xfr{direction:ltr;text-align:left;unicode-bidi:isolate}
[dir=rtl] .xsec .xen,[dir=rtl] .xsec .en{direction:rtl;text-align:right}
[dir=rtl] .vbub .vfr,[dir=rtl] .vopts .eo span:first-child,[dir=rtl] .vsay .vfr,[dir=rtl] .vlist b{direction:ltr;text-align:left;unicode-bidi:isolate}
[dir=rtl] .vcap .vfr,[dir=rtl] .vp .vw,[dir=rtl] .hot,[dir=rtl] .pr .pw,[dir=rtl] .gpic small{direction:ltr}
/* Persian and Arabic: professional typefaces hosted on the site (Vazirmatn, Noto Sans Arabic; both open source, SIL OFL) */
@font-face{font-family:Vazirmatn;src:url(fonts/vazirmatn.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Noto Sans Arabic';src:url(fonts/noto-ar-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Sans Arabic';src:url(fonts/noto-ar-700.woff2) format('woff2');font-weight:600 900;font-display:swap;unicode-range:U+0600-06FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF}
html:lang(fa) body,html:lang(fa) body *{font-family:"Twemoji Country Flags",Vazirmatn,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html:lang(ar) body,html:lang(ar) body *{font-family:"Twemoji Country Flags",Vazirmatn,'Noto Sans Arabic',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html:lang(fa) body,html:lang(ar) body{line-height:1.55}
/* pop-up cards: the close button has its own row at the top, so it can never sit on top of text (left corner on right-to-left screens) */
.scard{padding-top:50px}.scard .x{top:8px}
[dir=rtl] .scard .x{right:auto;left:12px}
/* the word being read aloud lights up */
.kw,.tw{border-radius:6px;transition:background .12s,color .12s}.kw.on,.tw.on{background:#ffe38a;color:#a33b00;box-shadow:0 0 0 2px #ffe38a}
/* calmer, smaller type */
body,body.x{font-size:15px}
.q,.q[class]{font-size:18px!important}.sub{font-size:14px}.opts button,.eo{font-size:15px!important}.oi{width:96px!important;height:96px!important}
@media (min-width:700px){body{font-size:15px}.q{font-size:19px!important}.pic{width:190px;height:190px}.oi{width:104px!important;height:104px!important}.opts button{font-size:16px!important}}
.sklv{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}.chip{border:2px solid #e5e5e5;background:#fff;border-radius:999px;padding:6px 12px;font:600 13px inherit;font-family:inherit;cursor:pointer;color:var(--t)}.chip.on{background:#58cc02;border-color:#58cc02;color:#fff}
.kw{cursor:pointer}.vfr,.vsub,.xfr,.xen,.efr,.eenw{text-align:start!important;text-justify:auto;word-spacing:normal}
.kw:hover,.tw:hover{outline:2px solid #1cb0f6;outline-offset:1px;background:#e8f6ff;cursor:pointer;border-radius:6px}
.kw:active,.tw:active{background:#bfe6ff}
@font-face{font-family:"Twemoji Country Flags";unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E007F;src:url(fonts/TwemojiCountryFlags.woff2) format('woff2');font-display:swap}
button,input,textarea,select{font-family:inherit}
#abar{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;display:flex;gap:8px;background:rgba(31,42,68,.94);border-radius:999px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.28);backdrop-filter:blur(6px)}
#abar button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;min-width:44px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;box-shadow:none;transition:background .15s}
#abar button:hover{background:rgba(255,255,255,.26)}#abar #apause{background:#58cc02}#abar #apause:hover{background:#6ddc14}
.wtip{position:fixed;z-index:60;background:#1f2a44;color:#fff;font-weight:700;font-size:14px;padding:6px 10px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.25);pointer-events:none;max-width:70vw}
.kw,.tw{display:inline-block;margin-inline-end:.3em}
.xen{word-spacing:0}
.vscene{flex-wrap:wrap;align-items:flex-end;justify-content:center}
.vbub{flex:1 1 100%;order:-1}.vbub .row3{display:flex;flex-wrap:wrap;gap:6px}.vbub .row3 .mini{flex:1 1 auto;padding:6px 10px;font-size:13px;min-height:38px}
@media (min-width:640px){.vbub{flex:1 1 0;order:0}}
.armap{height:280px;border-radius:16px;margin:8px 0 10px;overflow:hidden;box-shadow:var(--sh);z-index:0}
.armk span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:20px;background:#fff;border-radius:50%;box-shadow:0 2px 8px #0004}.armk.me span{background:#58cc02;font-size:18px}
.tool.aroundcard{grid-column:span 3;flex-direction:row;justify-content:center;gap:10px;padding:14px;background:linear-gradient(135deg,#e6f6ff,#e9ffe1);border-color:#9bd8ff;flex-wrap:wrap}.tool.aroundcard small{width:100%;text-align:center}
.arsec{padding-bottom:10px}
@media (min-width:700px){.tool.aroundcard{grid-column:span 5}}@media (min-width:960px){.tool.aroundcard{grid-column:span 3}}
.arsk{height:64px;border-radius:16px;margin:10px 0;background:linear-gradient(90deg,#eef3f9 25%,#f8fbff 50%,#eef3f9 75%);background-size:200% 100%;animation:arsh 1.2s infinite linear}.arsk.short{height:40px;width:60%}@keyframes arsh{to{background-position:-200% 0}}
.arinfo{background:#fff;border:1px solid var(--bd0);border-radius:18px;padding:12px;margin:0 0 12px;box-shadow:var(--sh)}.arcard{display:flex;gap:12px;align-items:center;margin-bottom:6px}.arimg{width:84px;height:84px;object-fit:cover;border-radius:14px;flex:none}
.ptags{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.ptag{font-size:22px;font-weight:800;padding:18px 8px;border-radius:16px;background:#fff7d6;border:2px dashed #e0b84a;color:#7a5a00}.ptag.good{background:#d7ffb8;border-color:#58cc02;color:#2b7a00}.ptag.bad{background:#ffdfe0;border-color:#ea2b2b;color:#a31111}
.dirbtns{display:flex;gap:8px;justify-content:center}.dirbtns .go{font-size:26px;padding:10px 16px}.dirbtns .good,.eo.good{outline:3px solid #58cc02}.dirbtns .bad,.eo.bad{outline:3px solid #ea2b2b}.fde{font-size:24px}.arsec.found{border-color:#58cc02;background:#f2ffe9}
.tool.funcard{grid-column:span 3;flex-direction:row;justify-content:center;gap:10px;padding:14px;background:linear-gradient(135deg,#fff0d6,#ffe3f1);border-color:#f3b27a;flex-wrap:wrap}.tool.funcard small{width:100%;text-align:center}
@media (min-width:700px){.tool.funcard{grid-column:span 5}}@media (min-width:960px){.tool.funcard{grid-column:span 3}}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}.num{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 6px;border-radius:14px;background:#ffe9e9;border:2px solid #ffb4b4;color:#8a1111;text-decoration:none}.num b{font-size:24px}.num small{font-size:12px}
.note.emg{background:#ffe9e9;border-color:#ffb4b4;color:#8a1111}.cardph{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:10px 12px;margin:6px 0;border-radius:14px;background:#fff;border:1px solid var(--bd0)}.cardph small{display:block;color:var(--m)}.cbtn{display:flex;gap:6px}
.showbig{position:fixed;inset:0;z-index:70;background:rgba(10,20,40,.88);display:flex;align-items:center;justify-content:center;padding:16px}.sbx{background:#fff;border-radius:22px;padding:22px;max-width:520px;width:100%;text-align:center}.sbfr{font-size:34px;font-weight:800;line-height:1.25;margin-bottom:10px}.sben{font-size:18px;color:var(--m);margin-bottom:16px}
.srcs{padding-inline-start:20px;font-size:14px}.tool.lifecard{grid-column:span 3;flex-direction:row;justify-content:center;gap:10px;padding:14px;background:linear-gradient(135deg,#e1ecff,#e6e0ff);border-color:#9bb5ff;flex-wrap:wrap}.tool.lifecard small{width:100%;text-align:center}
@media (min-width:700px){.tool.lifecard{grid-column:span 5}}@media (min-width:960px){.tool.lifecard{grid-column:span 3}}
.kcats,.kwords{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.kcat,.kw2{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;border-radius:20px;background:#fff;box-shadow:var(--sh);text-align:center}.kcat span,.kw2 span{font-size:46px;line-height:1}.kw2 small,.kcat small{color:var(--m)}
.kopts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}.kopt{font-size:64px;padding:14px;border-radius:24px;background:#fff;box-shadow:var(--sh)}.kopt.good{outline:4px solid #58cc02}.kopt.bad{outline:4px solid #ea2b2b}
.kmem{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}.kcard{position:relative;aspect-ratio:1;border-radius:18px;background:#e8f1ff;font-size:40px;display:flex;align-items:center;justify-content:center;padding:4px}.kcard .kfront{display:none;font-size:30px;font-weight:800}.kcard.up{background:#fff}.kcard.up .kback{display:none}.kcard.up .kfront{display:block}.kcard.done{background:#d7ffb8}
.kcard .kfront{font-size:17px}.interp{align-items:center}.interp select{flex:1;margin:0}.imic{flex:1;font-size:18px;padding:18px}.imic.on{outline:4px solid #ffc800}.ilogrow{margin:10px 0;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid var(--bd0)}.ilogrow.b{background:#eef8ff}.ilogrow small{display:block;color:var(--m)}.ito{font-size:22px;font-weight:800;margin:4px 0}
.cvtext{white-space:pre-wrap;font-family:inherit;font-size:15px;line-height:1.5;margin:8px 12px}
.tool.workcard,.tool.kidscard,.tool.interpcard{grid-column:span 3;flex-direction:row;justify-content:center;gap:10px;padding:14px;flex-wrap:wrap}.tool.workcard{background:linear-gradient(135deg,#e3f7ea,#e1f0ff);border-color:#8fd3a8}.tool.kidscard{background:linear-gradient(135deg,#fff3c4,#ffe0f0);border-color:#ffc86b}.tool.interpcard{background:linear-gradient(135deg,#e6e0ff,#dff4ff);border-color:#b0a3ff}.tool.workcard small,.tool.kidscard small,.tool.interpcard small{width:100%;text-align:center}
@media (min-width:700px){.tool.workcard,.tool.kidscard,.tool.interpcard{grid-column:span 5}}@media (min-width:960px){.tool.workcard,.tool.kidscard,.tool.interpcard{grid-column:span 3}}
/* text in the language being learned and text in the learner's language never share a direction: each block is its own isolated line */
.xfr,.vfr,.efr,.xh,.cfr,.tb .fr,.cvtext.fr,.sbfr,.arinfo .xfr,.arcard h3[data-notr]{direction:ltr!important;text-align:left!important;unicode-bidi:isolate!important}
html[data-tdir=rtl] .xfr,html[data-tdir=rtl] .vfr,html[data-tdir=rtl] .efr,html[data-tdir=rtl] .xh,html[data-tdir=rtl] .cfr,html[data-tdir=rtl] .tb .fr{direction:rtl!important;text-align:right!important}
html[dir=rtl] .xen,html[dir=rtl] .eenw,html[dir=rtl] .vsub,html[dir=rtl] .intr,html[dir=rtl] .sben,html[dir=rtl] .note,html[dir=rtl] .tb .en,html[dir=rtl] .cardph small,html[dir=rtl] .kcat small,html[dir=rtl] .kw2 small{direction:rtl!important;text-align:right!important;unicode-bidi:isolate!important}
html[dir=ltr] .xen,html[dir=ltr] .eenw,html[dir=ltr] .vsub,html[dir=ltr] .intr,html[dir=ltr] .sben,html[dir=ltr] .note,html[dir=ltr] .tb .en{direction:ltr!important;text-align:left!important;unicode-bidi:isolate!important}
.ilogrow .ito,.ilogrow small{unicode-bidi:plaintext;text-align:start}
html[dir=rtl] .row3,html[dir=rtl] .cardph,html[dir=rtl] .wr,html[dir=rtl] .arcard{direction:rtl}
.kw,.tw{unicode-bidi:isolate}
.himg{width:42px;height:42px;object-fit:cover;border-radius:12px;vertical-align:middle;display:inline-block}.etopic .eem .himg{width:72px;height:72px;border-radius:18px}.tool>span .himg{width:44px;height:44px}
.note.hero{display:flex;gap:12px;align-items:center}.herow .himg{width:64px;height:64px;border-radius:16px;flex:none}.heroimg{border-radius:18px;margin-bottom:8px}.secico,.xh .himg{width:34px;height:34px;border-radius:10px;margin-inline-end:6px}
.kimg{width:84px;height:84px;object-fit:cover;border-radius:20px}.kimg.big{width:100%;max-width:150px;height:auto;aspect-ratio:1;border-radius:22px}.kcard .kimg{width:100%;height:100%;border-radius:14px}.wr .himg{width:38px;height:38px}
html[dir=rtl] .note.hero{direction:rtl}
.achips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}.achip{display:flex;flex-direction:column;align-items:center;min-width:84px;padding:8px 10px;border-radius:16px;background:#fff;border:2px solid #e5e5e5;font-weight:700}.achip .aem{font-size:24px}.achip b{font-size:14px}.achip small{font-size:11px;color:var(--m);font-weight:600}.achip.on{border-color:#58cc02;background:#f1ffe4;box-shadow:0 0 0 2px #58cc0233}
.tool.artcard{grid-column:span 3;flex-direction:row;justify-content:center;gap:10px;padding:14px;background:linear-gradient(135deg,#ffe3f1,#fff1d6);border-color:#f3a6d0;flex-wrap:wrap}.tool.artcard small{width:100%;text-align:center}
@media (min-width:700px){.tool.artcard{grid-column:span 5}}@media (min-width:960px){.tool.artcard{grid-column:span 3}}

/* Sound & Picture World */
.tool.worldcard{grid-column:span 3;flex-direction:row;justify-content:center;gap:10px;padding:14px;background:linear-gradient(135deg,#dff6ff,#e8ffe0);border-color:#7fd4a6;flex-wrap:wrap;text-align:left}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:10px 0}
.wcat,.wcard,.wopt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:16px;border:2px solid #e5e5e5;border-bottom-width:4px;background:#fff;font:inherit;cursor:pointer;text-align:center}
.wcat span{font-size:30px;line-height:1}.wcat b{font-size:13px}.wcat small{color:var(--m);font-size:11px}.wcat.on{border-color:#58cc02;background:#f1ffe5}
.wcard img,.wopt img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}.wcard b,.wopt b{font-size:14px}.wcard small{color:var(--m);font-size:11px}
.wem{font-size:44px;line-height:1.2}.wem.big{font-size:90px}.wdet{margin-top:14px;padding:14px;border-radius:18px;background:#fff;border:2px solid #e5e5e5;text-align:center}
.wpic img{width:min(100%,320px);aspect-ratio:1;object-fit:cover;border-radius:18px}.wdet h3{margin:8px 0 0;font-size:24px}.wex{font-size:17px;font-weight:700;margin:8px 0 0}
.wsound{font-size:18px;margin:6px 0}.wvid{width:min(100%,360px);border-radius:14px;margin-top:10px;background:#000}.wopts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.wopt.right{border-color:#58cc02;background:#e8ffd2}.wopt.wrong{border-color:#ff4b4b;background:#ffe3e3}.wmk{font-weight:700}

/* platform entry: language, guest or account, app choice, shared top bar */
.plat{max-width:var(--w);margin:0 auto;padding:6px 4px 30px}.phead{text-align:center;margin:8px 0 4px}
.pcards,.pchoices{display:grid;gap:12px;margin-top:14px}@media(min-width:760px){.pcards{grid-template-columns:repeat(3,1fr)}}
.pcard,.pchoice{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:16px;border-radius:18px;background:var(--card);border:2px solid var(--bd0);box-shadow:var(--sh);cursor:pointer;font:inherit;color:var(--t)}
.pcard .pe,.pchoice .pe{font-size:34px;line-height:1}.pcard small,.pchoice small{display:block;color:var(--m);font-weight:600;margin-top:4px}
.pcard em{display:inline-block;margin-top:8px;font-style:normal;font-weight:700;color:var(--m);background:var(--bg);padding:2px 10px;border-radius:99px}
.pcard:hover:not(.soon),.pchoice:hover{border-color:var(--b)}.pcard.soon{opacity:.65;cursor:default}.pcard.cont{width:100%;margin-top:14px;border-color:var(--g)}
#uilang{font:inherit;font-size:13px;font-weight:700;padding:6px 8px;border:1px solid var(--bd0);border-radius:10px;background:#fff;color:var(--t);max-width:118px}#brand{cursor:pointer}
#brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto;font-size:19px}@media(max-width:480px){#brand{font-size:16px}#uilang{max-width:96px}header .right{gap:6px;flex:0 0 auto}}
#stats:empty{display:none}
.pmore{margin-top:14px}.pchips{display:flex;flex-wrap:wrap;gap:8px}.pchips .chip{font-size:15px;padding:10px 14px;border-radius:99px}

/* ===== Okenva brand: professional technology / AI / art / academy ===== */
:root{--g:#4f46e5;--gd:#3730a3;--b:#14b8a6;--bd:#0d9488;--y:#f5b942;--bg:#f6f8fc;--t:#1b2438;--m:#64748b;--bd0:#e2e8f0;--sh:0 8px 24px -12px rgba(15,23,42,.25);--ink:#0b1226;--vi:#8b5cf6}
body{background:var(--bg);color:var(--t);font-family:"Twemoji Country Flags",Inter,"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button.go:hover:not(:disabled){background:#4338ca}button.done{background:var(--y);border-color:#d99a1e;color:#4a3200}
header{background:rgba(255,255,255,.88);border-bottom:1px solid var(--bd0)}
header h1{display:flex;align-items:center;gap:9px;margin:0;color:var(--ink);font-weight:800;letter-spacing:-.4px}
header h1 .logo{width:32px;height:32px;flex:0 0 auto}#brandtxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct{color:var(--ink)}#appsbtn svg{display:block;margin:auto}
.biglogo{display:block;width:84px;height:84px;margin:6px auto 2px}
.phead{font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.pcard,.pchoice{border-radius:18px;border:1px solid var(--bd0);box-shadow:var(--sh);transition:transform .15s,box-shadow .15s,border-color .15s;padding:18px}
.pcard:hover:not(.soon),.pchoice:hover{transform:translateY(-2px);border-color:#c7d2fe;box-shadow:0 14px 28px -14px rgba(79,70,229,.45)}
.pcard.cont{border:1px solid #c7d2fe;background:linear-gradient(135deg,#eef2ff,#ecfeff)}
.pi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:0 0 auto;box-shadow:0 8px 16px -8px rgba(79,70,229,.6);background:linear-gradient(135deg,#14b8a6,#4f46e5)}
.pi svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pi-studio{background:linear-gradient(135deg,#8b5cf6,#ec4899)}.pi-coach{background:linear-gradient(135deg,#4f46e5,#0ea5e9)}.pi-reading{background:linear-gradient(135deg,#14b8a6,#22c55e)}
.pi-exams{background:linear-gradient(135deg,#f5b942,#f97316)}.pi-career{background:linear-gradient(135deg,#334155,#4f46e5)}.pi-kids{background:linear-gradient(135deg,#ec4899,#f5b942)}.pi-devops{background:linear-gradient(135deg,#475569,#94a3b8)}
.pcard b,.pchoice b{color:var(--ink);font-size:17px;letter-spacing:-.2px}
#uilang{border-radius:12px;border-color:var(--bd0);color:var(--ink)}
.lvlq.on{border-color:var(--g);background:#eef2ff}.chip.on{background:#eef2ff;border-color:var(--g);color:var(--gd)}
@media(max-width:480px){header h1 .logo{width:28px;height:28px}header h1{gap:7px;min-width:0;flex:1 1 auto}}
#flagbtn{font-size:22px;line-height:1;padding:6px 8px}
/* app cards: never wider than the page (2 columns on tablets, 3 on wide screens) */
.pcards{grid-template-columns:minmax(0,1fr)}.pcard>div,.pchoice>div{min-width:0}.pcard b,.pcard small{overflow-wrap:anywhere}
@media(min-width:600px){.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.pcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* contrast fixes (checked by verify_assets.py) */
:root{--m:#586579}
.pi{background:linear-gradient(135deg,#0d9488,#4f46e5)}.pi-reading{background:linear-gradient(135deg,#0d9488,#15803d)}.pi-exams{background:linear-gradient(135deg,#d97706,#ea580c)}.pi-kids{background:linear-gradient(135deg,#db2777,#d97706)}
.pi-download{background:linear-gradient(135deg,#4f46e5,#8b5cf6)}.pcard.static{cursor:default}.pcard.static:hover{transform:none;border-color:var(--bd0);box-shadow:var(--sh)}a.go.dl,button.go.dl{display:inline-block;margin-top:10px;padding:11px 18px;border-radius:14px;text-decoration:none;color:#fff;background:var(--g);font-weight:700;border:0;font-size:15px;text-transform:none;letter-spacing:0}.steps{margin:10px 0 0;padding-left:20px;color:var(--m);font-weight:600}.steps li{margin:3px 0}
[hidden]{display:none !important}
/* AI Academy mini-app */
.pi-academy{background:linear-gradient(135deg,#4f46e5,#0d9488)}
.accard{align-items:center}.acthumb{width:96px;height:60px;object-fit:cover;border-radius:10px;border:1px solid var(--bd0);flex:none}
.acplay{max-width:640px;margin:0 auto}.acimg{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--bd0);box-shadow:var(--sh);background:#fff}
.actext{font-size:17px;line-height:1.55;color:var(--t);text-align:center;margin:8px 4px 14px}
.acprog{display:flex;gap:6px;margin:4px 0 8px}.acprog span{flex:1;height:6px;border-radius:99px;background:var(--bd0)}.acprog .done{background:#0d9488}.acprog .now{background:#4f46e5}
.acctl{justify-content:center;gap:10px;flex-wrap:wrap}.acctl .mini:disabled{opacity:.45}
.acopt{width:100%}.acopt.right{border-color:#0d9488;background:#ecfdf5}.acopt.wrong{border-color:#dc2626;background:#fef2f2}.acopt:disabled{cursor:default}
.achead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:2px 0 8px}.aclang{display:flex;gap:6px;justify-content:center;margin:6px 0}.aclang .mini{min-width:72px}.aclang .mini.on{background:#4f46e5;color:#fff;border-color:#3730a3}
.actext .w{border-radius:6px;padding:0 2px;transition:background .12s,color .12s}.actext .w.said{color:#0f766e}.actext .w.on{background:#fde68a;color:#0b1226;box-shadow:0 0 0 2px #fde68a}
[lang=fa].acplay .actext,[lang=fa].acplay .phead,[lang=fa].acplay .pchoice,[lang=fa].acplay .pcard,[lang=fa].acplay .sub,[lang=fa].acplay button{font-family:Vazirmatn,"Noto Sans Arabic",system-ui,sans-serif}[lang=fa].acplay .actext{line-height:1.9}
[dir=rtl].acplay .pcard,[dir=rtl].acplay .pchoice{text-align:right}[dir=rtl].acplay .pchoice{text-align:center}
/* motion while the voice speaks: slow drift of the picture, a glowing frame and a small sound wave; all stop when it pauses */
.acstage{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--bd0);box-shadow:var(--sh);background:#fff}
.acstage .acimg{border:0;border-radius:0;box-shadow:none;display:block;width:100%;height:auto;transform-origin:50% 50%}
.acstage.speaking{animation:acglow 1.6s ease-in-out infinite}.acstage.speaking .acimg{animation:acdrift 14s ease-in-out infinite alternate}
.acwave{position:absolute;right:10px;bottom:10px;display:none;gap:3px;align-items:flex-end;height:22px;padding:5px 8px;border-radius:99px;background:rgba(255,255,255,.88);box-shadow:0 2px 8px rgba(11,18,38,.18)}.acstage.speaking .acwave{display:flex}
.acwave i{display:block;width:4px;height:6px;border-radius:2px;background:#4f46e5;animation:acbar .9s ease-in-out infinite}.acwave i:nth-child(2){animation-delay:.15s;background:#0d9488}.acwave i:nth-child(3){animation-delay:.3s}.acwave i:nth-child(4){animation-delay:.45s;background:#0d9488}.acwave i:nth-child(5){animation-delay:.6s}
@keyframes acbar{0%,100%{height:5px}50%{height:20px}}@keyframes acdrift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.045) translate(-1%,-.8%)}}
@keyframes acglow{0%,100%{box-shadow:0 0 0 2px rgba(79,70,229,.30),var(--sh)}50%{box-shadow:0 0 0 7px rgba(13,148,136,.22),var(--sh)}}
@media (prefers-reduced-motion:reduce){.acstage.speaking,.acstage.speaking .acimg,.acwave i{animation:none}.acwave i{height:12px}}
.acscene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff;opacity:0;transition:opacity .6s ease;pointer-events:none}.acscene.on{opacity:1}
.acstage .acwave{z-index:2}
.acplay[dir=ltr],.acplay[dir=ltr] .row3,.acplay[dir=ltr] .acctl{direction:ltr}.acplay[dir=rtl],.acplay[dir=rtl] .row3,.acplay[dir=rtl] .acctl{direction:rtl}
.acscene{z-index:1;opacity:0;transition:opacity .6s ease}.acscene.on{opacity:1}.acscene.top{z-index:2}
.acstage .acwave{z-index:3}
/* reading mode: tappable sentences and a row of sentence pictures */
.acthumbs{display:flex;gap:6px;overflow-x:auto;padding:8px 2px 4px;scrollbar-width:thin}.acth{flex:none;width:72px;height:41px;padding:0;border-radius:8px;border:2px solid var(--bd0);background:#fff;overflow:hidden;cursor:pointer;opacity:.75}.acth img{display:block;width:100%;height:100%;object-fit:cover}.acth.on{border-color:#4f46e5;opacity:1;box-shadow:0 0 0 2px rgba(79,70,229,.25)}.acth:focus-visible{outline:3px solid #f5b942}
.actext .sen{cursor:pointer;border-radius:8px}.actext .sen.sel{background:rgba(79,70,229,.08)}
/* book mode and the mode switch */
.acmodes{display:flex;gap:6px}.acmodes .mini{min-width:92px}.acmodes .mini.on{background:#4f46e5;color:#fff;border-color:#3730a3}
.acbar{height:6px;border-radius:99px;background:var(--bd0);margin:4px 0 8px;overflow:hidden}.acbar i{display:block;height:100%;background:linear-gradient(90deg,#4f46e5,#0d9488);transition:width .3s}
.acbig{font-size:21px;line-height:1.65;margin:14px 6px;min-height:3.3em}[lang=fa].acbook .acbig{line-height:2}.acbook{touch-action:pan-y}
/* AI Academy home: one card per row on every screen (two narrow columns broke the title into one word per line) */
.acplay .pcards{grid-template-columns:minmax(0,1fr) !important}.acplay .accard{align-items:center}.acplay .acthumb{width:128px;height:72px}.acplay .accard>div{flex:1;min-width:0}
/* speed, certificate */
.acrates{display:inline-flex;gap:6px}.acrates .mini.on{background:#4f46e5;color:#fff;border-color:#3730a3}.acname{padding:8px 12px;border-radius:12px;border:1px solid var(--bd0);font:inherit;min-width:200px}
.accert{margin:14px auto;padding:28px 22px;text-align:center;max-width:520px;border:3px double #4f46e5;border-radius:18px;background:linear-gradient(180deg,#fff,#eef2ff)}.accert .biglogo{width:64px;height:64px;margin:0 auto 6px}
.accert .cert-k{font-weight:700;color:#0d9488;letter-spacing:.5px}.accert h2{margin:6px 0 14px;color:#0b1226}.accert .cert-name{font-size:28px;font-weight:800;color:#4f46e5;margin:8px 0;word-break:break-word}.accert .cert-c{font-size:20px;font-weight:700;margin:6px 0}.accert small{color:#586579}
@media print{body *{visibility:hidden !important}.accert,.accert *{visibility:visible !important}.accert{position:absolute;left:0;top:0;width:100%;max-width:none;box-shadow:none}.acnoprint{display:none !important}}
/* AI Lab: prompt chip, legend, picture caption */
.acprompt{margin:10px 2px 4px;padding:10px 12px;border-radius:14px;background:#f8fafc;border:1px solid var(--bd0);text-align:left;line-height:2}.acprompt .aclabel{display:block;font-size:12px;font-weight:700;color:#586579;letter-spacing:.3px}
.acprompt .seg{display:inline-block;padding:1px 9px;border-radius:99px;margin:0 2px;background:color-mix(in srgb,var(--c) 14%,#fff);border:1.5px solid var(--c);color:#0b1226;font-weight:600}
.aclegend{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:2px 0 6px}.aclegend .lg{font-size:13px;font-weight:700;padding:0 10px;border-radius:99px;color:#fff;background:var(--c)}
.accap{position:absolute;left:10px;top:10px;z-index:3;padding:4px 12px;border-radius:99px;background:rgba(11,18,38,.82);color:#fff;font-size:13px;font-weight:700}[dir=rtl] .accap{left:auto;right:10px}
/* scene layers: the new picture is always on top (cur), the old one (prev) stays under it until the fade is done */
.acscene{z-index:0}.acscene.prev{z-index:1}.acscene.cur{z-index:2}.acscene.top{z-index:2}
/* live labs: wait screen */
.acprep{text-align:center;padding:26px 8px}.acspin{width:44px;height:44px;border-radius:50%;border:5px solid var(--bd0);border-top-color:#4f46e5;margin:0 auto 14px;animation:acspin 1s linear infinite}@keyframes acspin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.acspin{animation:none}}
.acprep .acbar{max-width:360px;margin:12px auto}
/* course page */
.acout{max-width:680px;margin:0 auto}.achead2{margin:18px 4px 8px;font-size:17px;color:var(--ink,#0b1226)}.acto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.acrow{width:100%;display:flex;gap:12px;align-items:center;text-align:start;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--bd0);box-shadow:var(--sh);cursor:pointer;font:inherit;color:var(--t)}
.acrow:hover{border-color:#c7d2fe}.acrow.done{background:#f0fdf4;border-color:#bbf7d0}.acnum{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:#eef2ff;color:#4f46e5}.acrow.done .acnum{background:#0d9488;color:#fff}
.acrt{flex:1;min-width:0}.acrt b{display:block;color:var(--ink,#0b1226)}.acrt small{display:block;color:var(--m);font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acdur{flex:none;color:var(--m);font-weight:700;font-variant-numeric:tabular-nums}
/* pictures are always shown whole (any shape), never cut */
.acscene{object-fit:contain}.acstage .acimg{object-fit:contain}
/* Udemy-style catalog and course page */
.acplay.achome,.acplay.acout{max-width:1080px}.acleft{text-align:start;margin:0 0 10px}
.achero,.acouthero{border-radius:18px;padding:26px 24px;margin:6px 0 18px;color:#fff;background:linear-gradient(135deg,#0b1226 0%,#312e81 55%,#0f766e 100%);box-shadow:var(--sh)}
.achero h1,.acouthero h1{margin:0 0 6px;font-size:28px;line-height:1.25;letter-spacing:-.3px;color:#fff}.achero p,.acouthero p{margin:0 0 12px;color:#dbe4ff;font-weight:600;max-width:62ch;text-align:start}
.achips{display:flex;flex-wrap:wrap;gap:8px}.achips span{padding:3px 12px;border-radius:99px;background:rgba(255,255,255,.14);font-size:13px;font-weight:700;color:#fff}.acouthero .crumb{display:inline-block;color:#a5b4fc;font-weight:700;cursor:pointer}
.acgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}@media(min-width:620px){.acgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:960px){.acgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.accourse{display:flex;flex-direction:column;text-align:start;padding:0;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--bd0);box-shadow:var(--sh);cursor:pointer;font:inherit;color:var(--t);transition:transform .15s,box-shadow .15s}
.accourse:hover:not(.soon){transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(79,70,229,.45);border-color:#c7d2fe}.accourse.cont{border-color:#c7d2fe}.accourse.soon{opacity:.72;cursor:default}.accourse.soon .acthumbbox{background:linear-gradient(135deg,#94a3b8,#cbd5e1)}
.acthumbbox,.acpreview{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(135deg,#4f46e5,#0d9488);overflow:hidden}.acthumbbox img,.acpreview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.acico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px}.acbadge{position:absolute;top:8px;left:8px;z-index:2;font-style:normal;font-size:12px;font-weight:800;padding:2px 10px;border-radius:99px;background:#fff;color:#4f46e5}[dir=rtl] .acbadge{left:auto;right:8px}
.acinfo{display:flex;flex-direction:column;gap:5px;padding:12px 14px 14px}.acinfo b{color:var(--ink,#0b1226);font-size:16px;line-height:1.3}.acinfo small{color:var(--m);font-weight:600}.acstart{font-style:normal;font-weight:800;color:#4f46e5}
.acoutbody{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}@media(min-width:900px){.acoutbody{grid-template-columns:minmax(0,1fr) 330px}.acside{position:sticky;top:12px}}
.acbox{border:1px solid var(--bd0);border-radius:14px;padding:16px 18px;margin:0 0 16px;background:var(--card)}.acbox h3,.acmain h3{margin:0 0 10px;font-size:18px;color:var(--ink,#0b1226)}
.aclearn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}@media(min-width:620px){.aclearn{grid-template-columns:repeat(2,minmax(0,1fr))}}.aclearn li{display:flex;gap:8px;font-weight:600;text-align:start}.aclearn li::before{content:"✓";color:#0d9488;font-weight:800;flex:none}
.acsidebox{border:1px solid var(--bd0);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:var(--sh)}.acsidebody{padding:16px}.acsidebody .go{width:100%;margin-top:6px}.acsidebody h4{margin:14px 0 6px;font-size:15px}.acsidebody .acmodes{margin-top:10px;justify-content:center}
.acincl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--t);font-weight:600;font-size:14px;text-align:start}.acincl li::before{content:"✓ ";color:#0d9488;font-weight:800}
#app>.achome,#app>.acout{max-width:1080px !important}
/* any picture shape is shown whole inside the frame, on a soft background (never cropped) */
.acstage,.acscene{background:#f1f5f9}.acstage .acimg{max-height:72vh;object-fit:contain}
/* practice terminal */
.acterm{margin:18px 0 8px;padding:16px;border:1px solid var(--bd0);border-radius:14px;background:var(--card);text-align:left}.acterm h3{margin:0 0 4px}
.actasks{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px}.actasks li{display:flex;gap:10px;align-items:flex-start;font-weight:600;color:var(--m)}.actasks .tk{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:#e2e8f0;color:#475569}
.actasks li.cur{color:var(--ink,#0b1226)}.actasks li.cur .tk{background:#4f46e5;color:#fff}.actasks li.done .tk{background:#0d9488;color:#fff}.actasks li.done{color:#0f766e}.actasks li.alldone{color:#0f766e;font-weight:800}
.acscreen{background:#0f172a;color:#e2e8f0;border-radius:12px;padding:12px 14px;font-family:"DejaVu Sans Mono",Consolas,Menlo,monospace;font-size:14px;line-height:1.6;min-height:150px;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.acscreen .p{color:#5eead4}.acscreen .e{color:#fca5a5}.acscreen .t{color:#86efac}.acscreen .m{color:#94a3b8}
.acform{display:flex;gap:8px;align-items:center;margin:8px 0 2px;flex-wrap:wrap}.acps1{font-family:"DejaVu Sans Mono",Consolas,Menlo,monospace;font-size:13px;color:#0f766e;font-weight:700}.acform input{flex:1;min-width:160px;font-family:"DejaVu Sans Mono",Consolas,Menlo,monospace;font-size:15px;padding:9px 12px;border-radius:10px;border:1px solid var(--bd0)}
.acterr{min-height:18px;color:#dc2626;font-size:13px;font-weight:600}.acdet{margin:10px 0 0;border-top:1px solid var(--bd0);padding-top:8px}.acdet summary{cursor:pointer;font-weight:800}.acdet ul{margin:8px 0 0;padding-left:18px}.acdet li{margin:6px 0}.acdet code{background:#f1f5f9;padding:1px 6px;border-radius:6px}
.accheat{width:100%;border-collapse:collapse;margin-top:6px}.accheat td{padding:6px 8px;border-bottom:1px solid var(--bd0);font-size:14px}.accheat td:first-child{white-space:nowrap}
.acrow.soon{opacity:.65;cursor:default}
/* help for a student who is stuck */
.acbanner{padding:10px 14px;border-radius:12px;background:#f1f5f9;color:var(--m);font-weight:600;margin:0 0 8px}.acbanner.on{background:#eef2ff;border:2px solid #4f46e5;color:var(--ink,#0b1226)}.acbanner.done{background:#ecfdf5;border:2px solid #0d9488;color:#0f766e}
.acbanner b{color:#4f46e5;margin-right:6px}.acbanner.done b{color:#0f766e}.acbanner.wait{animation:acpulse 1.4s ease-in-out infinite;box-shadow:0 0 0 4px rgba(79,70,229,.25)}@keyframes acpulse{50%{box-shadow:0 0 0 8px rgba(79,70,229,.08)}}
.achelp{min-height:0;margin:6px 0;padding:0;font-weight:600;color:#92400e}.achelp:not(:empty){padding:10px 12px;border-radius:12px;background:#fef3c7;border:1px solid #fde68a}.achelp code{background:#fff;padding:1px 7px;border-radius:6px}
.achelpbtns .mini.pulse{animation:acpulse 1.4s ease-in-out infinite;border-color:#d97706}.acscreen .x{color:#a7f3d0;font-style:italic}.actasks li.skip .tk{background:#94a3b8;color:#fff}.actasks li.skip{color:#94a3b8}
@media (prefers-reduced-motion:reduce){.acbanner.wait,.achelpbtns .mini.pulse{animation:none}}
.acctl .mini.pulse,.acctl .go.pulse{animation:acpulse 1.4s ease-in-out infinite;box-shadow:0 0 0 4px rgba(13,148,136,.3)}
/* a command inside a sentence keeps its own direction and looks like code (also in right-to-left languages) */
.accmd{unicode-bidi:isolate;direction:ltr;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95em;background:rgba(79,70,229,.1);padding:0 .3em;border-radius:5px;white-space:nowrap}
/* academy pages: the paragraph direction is the course language's, even when a sentence starts with a Latin word like Linux */
.acplay[dir=rtl] .sub,.acplay[dir=rtl] p,.acplay[dir=rtl] h2,.acplay[dir=rtl] h3,.acplay[dir=rtl] small,.acplay[dir=rtl] b,.acplay[dir=rtl] li,.acplay[dir=rtl] span{unicode-bidi:normal}

/* auto-talk */
#talkbtn.off{opacity:.55}#pausebtn:disabled{opacity:.35}
.actapbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;padding:12px 20px;border-radius:999px;border:0;background:#4f46e5;color:#fff;font-weight:700;font-size:16px;box-shadow:0 6px 20px rgba(0,0,0,.25);cursor:pointer}
/* notes and covered topics */
.acnotes{max-height:78vh;overflow:auto;text-align:start}.acnotes h3{margin:0 0 4px}.acnotes h4{margin:14px 0 6px}
.acnl{list-style:none;margin:6px 0;padding:0 0 0 0}.acnl.top>li{margin:10px 0;padding:8px 10px;border-radius:12px;background:rgba(79,70,229,.06)}.acnl.top>li.ok{background:rgba(13,148,136,.10)}
.acnl li{margin:3px 0;line-height:1.5}.acnl li.ok>b,.acnl li.ok>span:first-child{color:#0d9488}.acnl code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:rgba(15,23,42,.07);padding:0 .35em;border-radius:5px}
#ac-own{width:100%;box-sizing:border-box;border:2px solid #e2e8f0;border-radius:12px;padding:10px;font:inherit;resize:vertical;min-height:100px}
@media print{body>*:not(#sheet){display:none!important}#sheet{position:static!important;background:#fff!important}#sheet .scard{box-shadow:none!important;max-height:none!important}#sx,#ac-nprint{display:none}}

/* AI Video Lab */
.vlchips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}.vlchip{white-space:normal;text-align:start}
.vlp{width:100%;box-sizing:border-box;border:2px solid #e2e8f0;border-radius:14px;padding:12px;font:inherit;font-size:16px;min-height:84px;resize:vertical}
.vlrow{display:flex;align-items:center;gap:8px;margin:8px 0}
.vlgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:8px 0}
.vlitem{border-radius:14px;overflow:hidden;background:#0f172a;color:#e2e8f0;cursor:pointer;position:relative;aspect-ratio:16/11;display:flex;flex-direction:column}
.vlitem video{width:100%;flex:1;min-height:0;object-fit:cover;display:block}.vlwait{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:8px;font-size:22px}.vlwait small{font-size:12px;opacity:.85}
.vlcap{display:block;padding:5px 8px;font-size:11px;line-height:1.3;background:rgba(0,0,0,.55);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlspin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#5eead4;animation:vlsp 1s linear infinite}@keyframes vlsp{to{transform:rotate(360deg)}}

/* icon tiles for apps, labs and courses */
.pi-videolab{background:linear-gradient(135deg,#ec4899,#8b5cf6)}.pi-ai-basics{background:linear-gradient(135deg,#4f46e5,#0ea5e9)}.pi-lab1-prompt{background:linear-gradient(135deg,#d97706,#ec4899)}.pi-ai-art{background:linear-gradient(135deg,#8b5cf6,#ec4899)}.pi-linux-beginners{background:linear-gradient(135deg,#334155,#0d9488)}.pi-flask{background:linear-gradient(135deg,#0d9488,#22c55e)}
.acico .pi{width:68px;height:68px;border-radius:20px}.acico .pi svg{width:36px;height:36px}

.vlh{margin:12px 0 4px;font-size:14px}.vlhint{margin:4px 0}.vlchip2.on{background:#4f46e5;color:#fff;border-color:#4f46e5}.achead2 #vl-more{margin-inline-start:8px;vertical-align:middle}

.updbanner{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:70;padding:10px 18px;border-radius:999px;border:0;background:#0d9488;color:#fff;font-weight:700;font-size:15px;box-shadow:0 6px 20px rgba(0,0,0,.25);cursor:pointer;max-width:92vw}

.vlmake2{margin-inline-start:8px;vertical-align:middle;padding:6px 14px;font-size:14px;border-radius:12px}

/* gallery: one big video per row */
.vlgal{grid-template-columns:1fr!important;gap:14px}.vlitem{aspect-ratio:16/9;max-width:640px;margin-inline:auto;width:100%}.vlitem video{object-fit:contain;background:#000}

.vlloadmore{display:block;margin:6px auto;padding:10px 22px}

/* gallery cards: clean, light, like a post (no dark boxes) */
.vlgal{gap:18px!important}
.vlitem{background:#fff!important;color:var(--ink,#0b1226)!important;border:1px solid #e8eaf3;border-radius:20px!important;box-shadow:0 10px 26px -16px rgba(79,70,229,.35);overflow:hidden;aspect-ratio:auto!important;display:block!important;max-width:560px;width:100%;margin-inline:auto;cursor:default}
.vlmedia{aspect-ratio:16/9;background:linear-gradient(135deg,#f5f3ff,#ecfeff);position:relative;cursor:pointer;overflow:hidden}
.vlmedia video{width:100%;height:100%;object-fit:cover;display:block;background:transparent!important}
.vlmedia .vlwait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#475569;text-align:center;padding:10px}
.vlmedia.pend{background:linear-gradient(110deg,#f5f3ff 8%,#fdf2f8 18%,#ecfeff 33%);background-size:200% 100%;animation:vlshim 1.6s linear infinite}@keyframes vlshim{to{background-position-x:-200%}}
.vlmedia.bad{background:#fef2f2}.vlbig{font-size:30px}
.vlspin{border:3px solid rgba(79,70,229,.2)!important;border-top-color:#4f46e5!important}
.vlbar{display:flex;align-items:center;gap:6px;padding:8px 12px 0}
.vlic{border:0;background:transparent;font-size:20px;line-height:1;padding:6px 8px;border-radius:10px;cursor:pointer;text-decoration:none;color:inherit}.vlic:hover{background:rgba(79,70,229,.08)}
.vlmeta{margin-inline-start:auto;font-size:12px;color:#64748b;font-weight:600}
.vlcap2{margin:2px 14px 14px;font-size:14px;line-height:1.45;color:#334155;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vlsheet video{background:transparent!important}

/* gallery grid: phone = 1 column; tablet = 2; desktop = 3 */
@media (min-width:700px){.vlgal{grid-template-columns:repeat(2,minmax(0,1fr))!important}.vlitem{max-width:none!important;margin:0!important}}
@media (min-width:1100px){.vlgal{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
.vlgal .vlloadmore{grid-column:1/-1}

/* video lab: categories, favorites, hover play, drag reorder, poster frames */
.vlcats,.vlfilter{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}.vlcats .mini.on,.vlfilter .mini.on{background:#4f46e5;color:#fff;border-color:#4f46e5}
.vlic.fav{color:#e11d48}
.vlmedia video{object-fit:cover}
.vlmedia.hov:not(.playing)::after{content:'\25B6';position:absolute;inset:auto 12px 12px auto;width:36px;height:36px;border-radius:50%;background:rgba(15,23,42,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;pointer-events:none}
.vlitem.dragging{opacity:.45}.vlitem.dragover{outline:3px dashed #4f46e5;outline-offset:-3px}

/* thumbnails first; no save-as menu on the art videos */
.vlmedia img,.vlmedia video{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
.vlmedia video.vlplay{position:absolute;inset:0}
.vlmedia.vp:not(.playing)::after{content:'\25B6';position:absolute;inset:auto 12px 12px auto;width:36px;height:36px;border-radius:50%;background:rgba(15,23,42,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;pointer-events:none}
.vlitem,.vlsheet video{-webkit-touch-callout:none}

/* the play badge sits at the top-right so it never covers the watermark */
.vlmedia.vp:not(.playing)::after{inset:10px 10px auto auto!important;width:30px!important;height:30px!important;font-size:12px!important}

/* softer card corners so the logo in a video corner is never clipped */
.vlitem{border-radius:14px!important}

/* folders: chips on a phone, a left sidebar on a big screen */
.vlwrap{display:block}
.vlside{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin}
.vlf{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid #e2e8f0;background:#fff;color:#0b1226;border-radius:999px;padding:7px 14px;font:600 14px/1.2 inherit;font-family:inherit;cursor:pointer;flex:0 0 auto}
.vlf i{font-style:normal;font-size:12px;color:#64748b;font-weight:700}
.vlf.on{background:#4f46e5;border-color:#4f46e5;color:#fff}.vlf.on i{color:#e0e7ff}
.vlf.over{outline:3px dashed #4f46e5;outline-offset:2px}
div.vlf{padding:0;gap:0;overflow:hidden}.vlfn{border:0;background:transparent;color:inherit;font:inherit;padding:7px 8px 7px 14px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.vlfi{border:0;background:transparent;color:inherit;font-size:13px;padding:7px 5px;cursor:pointer;opacity:.6}.vlfi:hover{opacity:1}.vlfi:last-child{padding-inline-end:11px}
.vlnew{border-style:dashed;color:#4f46e5}
.vlmv{display:flex;flex-direction:column;gap:8px;margin-top:10px}.vlmvi{border:1px solid #e2e8f0;background:#fff;border-radius:12px;padding:12px 14px;font:600 15px/1.2 inherit;font-family:inherit;text-align:start;cursor:pointer}.vlmvi.on{border-color:#4f46e5;background:#eef2ff}
@media (min-width:900px){
  .vlwrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;width:min(1120px,96vw);margin-inline:calc(50% - min(560px,48vw));align-items:start}
  .vlside{flex-direction:column;align-items:stretch;overflow:visible;position:sticky;top:92px;padding:0}
  .vlf{border-radius:14px;width:100%;justify-content:flex-start}.vlf i{margin-inline-start:auto}
  div.vlf{display:flex}.vlfn{flex:1;min-width:0;text-align:start}.vlfn i{margin-inline-start:auto}
}

/* video lab on a big screen: a balanced studio - the maker on the left, folders and the gallery on the right */
@media (min-width:900px) and (max-width:1099px){.vidlab .vlwrap{display:block;width:auto;margin-inline:0}.vidlab .vlside{flex-direction:row;overflow-x:auto;position:static;padding:4px 2px 10px}.vidlab .vlf{width:auto;border-radius:999px}}
@media (min-width:1100px){
  #app>.acplay.vidlab{max-width:1320px;display:grid;grid-template-columns:minmax(380px,440px) minmax(0,1fr);gap:8px 32px;align-items:start;padding-inline:24px}
  .vidlab>.achead,.vidlab>.achero{grid-column:1/-1}
  .vidlab .vlstudio{position:sticky;top:76px;max-height:calc(100vh - 92px);overflow:auto;padding:18px 18px 22px;background:#fff;border:1px solid #e8eaf3;border-radius:20px;box-shadow:0 14px 34px -22px rgba(79,70,229,.45);scrollbar-width:thin}
  .vidlab .vlgalsec{min-width:0}
  .vidlab .vlwrap{width:auto;margin-inline:0;grid-template-columns:200px minmax(0,1fr);gap:20px}
  .vidlab .vlgal{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important}
  .vidlab .vlitem{max-width:none!important;margin:0!important}
  .vidlab .vlside{top:76px}
}

/* balance: use the screen (wider page on big monitors); on a medium desktop the folders become a row above the gallery */
@media (min-width:1100px){#app:has(.vidlab){max-width:1560px}}
@media (min-width:1100px) and (max-width:1329px){.vidlab .vlwrap{display:block}.vidlab .vlside{flex-direction:row;overflow-x:auto;position:static;padding:4px 2px 12px}.vidlab .vlf{width:auto;border-radius:999px}.vidlab .vlf i{margin-inline-start:4px}}

/* multi-select */
.vlselbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px;padding:6px 0;position:sticky;top:60px;z-index:6;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px)}
.vlselbar b{font-size:14px;margin-inline-end:4px}.vlselbar .mini[disabled]{opacity:.45;cursor:default}
.vlitem.selmode{cursor:pointer}.vlitem.selmode .vlmedia::after{display:none!important}
.vlck{position:absolute;top:8px;inset-inline-start:8px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:rgba(15,23,42,.35);color:transparent;font-style:normal;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.vlitem.picked .vlck{background:#4f46e5;color:#fff}.vlitem.picked{outline:3px solid #4f46e5;outline-offset:-3px}
/* the select tick sits at the bottom-right corner, so it never covers the logo at the top-left */
.vlck{top:auto!important;bottom:8px!important;inset-inline-start:auto!important;left:auto!important;right:8px!important}

.vlerr{color:#b91c1c;font-size:13px;min-height:18px;margin:6px 0 0;text-align:center}

/* Image AI Art */
.pi-imageart{background:linear-gradient(135deg,#f59e0b,#ec4899)}
.ia-hero{background:linear-gradient(135deg,#7c3aed,#db2777 60%,#f59e0b)!important}
.iarow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 2px}.iarefine{background:linear-gradient(135deg,#ede9fe,#fce7f3)!important;border-color:#c4b5fd!important;font-weight:700}
.iamodels{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.iam{border:2px solid #e2e8f0;background:#fff;border-radius:14px;padding:10px 12px;text-align:start;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:2px}.iam b{font-size:15px;color:#0b1226}.iam small{font-size:12px;color:#64748b}.iam.on{border-color:#4f46e5;background:#eef2ff}
.iaref{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.iarefimg{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid #e2e8f0}
.vlmedia.iaok{cursor:zoom-in}

/* quality and date are separate: numbers always in Latin digits, the month name in the app language */
.vlbar{flex-wrap:wrap}
.vlmeta{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-inline-start:auto!important}
.vlq{font-style:normal;background:#eef2ff;color:#4f46e5;border-radius:8px;padding:2px 8px;font-weight:700;font-size:11px;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.vld{font-style:normal;font-size:12px;color:#64748b;font-weight:600;unicode-bidi:isolate;white-space:nowrap}

/* Refine and Make my picture: side by side, same size */
.imgart .iarow{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.imgart .iarow>button{width:100%;margin:0!important;padding:10px 8px;font-size:14px;justify-content:center;text-align:center}
.imgart .iarow .iaundo{grid-column:1/-1}.imgart .iarow .iaundo[hidden]{display:none}

.iafit{display:flex;flex-wrap:wrap;gap:6px;width:100%;margin-top:6px}

.achead:has(.ctstudio){display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ctstudio{flex:1;min-width:260px;display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:12px;background:rgba(127,127,127,.12)}
.ctstudio p{margin:0;font-size:12.5px;line-height:1.35;flex:1}
.ctstudio .mini{white-space:nowrap;padding:4px 10px;font-size:12.5px}
@media(max-width:600px){.ctstudio{flex-basis:100%;flex-direction:column;align-items:stretch}}

/* 2026-11-03: pictures keep their own shape in the gallery (masonry columns), the opened picture/video never exceeds the screen, smaller folder list and top banner */
.imgart .vlgal{display:block!important;column-count:1;column-gap:14px}
.imgart .vlitem{display:inline-block;width:100%;break-inside:avoid;margin:0 0 14px!important;max-width:none!important}
@media(min-width:700px){.imgart .vlgal{column-count:2}}
@media(min-width:1100px){.imgart .vlgal{column-count:3}}
.imgart .vlmedia{aspect-ratio:auto}.imgart .vlmedia[style*=aspect-ratio]{height:auto}
.imgart .vlmedia img{height:100%;object-fit:cover}
.vlsheet img,.vlsheet video{display:block;margin:0 auto;width:auto!important;max-width:100%!important;height:auto;max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px);object-fit:contain}
.scard:has(.vlsheet){max-width:min(94vw,900px)}
.vlf{font-size:12.5px!important;padding:5px 11px!important}.vlf i{font-size:11px}.vlfn{padding:5px 6px 5px 11px!important;font-size:12.5px}.vlfi{padding:5px 4px!important;font-size:12px}
.vlside{gap:4px}
.vidlab .achero,.imgart .achero{padding:12px 18px!important;margin:2px 0 8px!important;border-radius:14px}.vidlab .achero h1,.imgart .achero h1{font-size:20px!important;margin:0 0 2px!important}.vidlab .achero p,.imgart .achero p{font-size:13px;margin:0!important}
.vidlab .achead,.imgart .achead{margin-bottom:4px}
/* 2026-11-03: opened picture/video: compact professional card, no scrollbar, equal buttons */
.scard:has(.vlsheet){max-width:min(92vw,600px);padding:46px 16px 14px;overflow:visible}
.vlsheet img,.vlsheet video{max-height:min(58vh,calc(100dvh - 290px));border-radius:12px}
.vlsheet>.sub{font-size:12.5px;margin:8px 0 6px!important}
.vlsheet .row3{display:flex;gap:8px;flex-wrap:wrap}
.vlsheet .row3 .mini{flex:1 1 0;min-width:120px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:6px 10px;font-size:13px;text-align:center;white-space:normal}
.vlsheet .ctlic{font-size:11.5px;line-height:1.35;margin:8px 0 0!important}

/* finished pictures are shown whole, in their own shape: never cropped or stretched */
.imgart .vlmedia.iaok{aspect-ratio:auto}.imgart .vlmedia.iaok[style*=aspect-ratio]{aspect-ratio:auto!important}
.imgart .vlmedia.iaok img{width:100%;height:auto;object-fit:contain;display:block}

/* 2026-11-03: picture columns are filled newest-first across the row (JS places them), not column by column */
.imgart .vlgal{display:block!important;column-count:auto!important}
.iacols{display:flex;gap:14px;align-items:flex-start}.iacol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
.imgart .iacol .vlitem{margin:0!important;display:block;width:100%}
.imgart .vlgal>.vlloadmore{display:block;margin:14px auto}

/* worker add */
.wkrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid rgba(127,127,127,.2)}.wkrow:last-child{border:0}
.wkdot{width:10px;height:10px;border-radius:50%;background:#94a3b8;flex:0 0 auto}.wkdot.on{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.2)}
.wkrow .sub{flex:1 1 220px;margin:0}
.wkconf{margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(79,70,229,.08)}

/* Music AI + Sound Effects AI cards (2026-11-04): a cover, a round play button, a seek bar; own classes, theme colours */
.aulist{display:grid;gap:12px;grid-template-columns:1fr}
.aucard{display:flex;gap:12px;align-items:stretch;padding:10px;background:var(--card);color:var(--t);border:1px solid var(--bd0);border-radius:16px;box-shadow:var(--sh);margin:0}
.aucover{position:relative;flex:0 0 84px;width:84px;height:84px;border-radius:14px;background:linear-gradient(135deg,hsl(var(--h),72%,58%),hsl(calc(var(--h) + 50),70%,42%));display:flex;align-items:center;justify-content:center;overflow:hidden}
.aucover.pend{background:var(--bd0)}.aucover.bad{background:#fde8e8}
.auemo{font-size:38px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.aueq{position:absolute;inset-inline:12px;bottom:8px;height:18px;display:none;align-items:flex-end;gap:3px}
.aucard.playing .aueq{display:flex}.aueq b{flex:1;height:30%;background:rgba(255,255,255,.9);border-radius:2px;animation:aueq .9s ease-in-out infinite}
.aueq b:nth-child(2){animation-delay:.15s}.aueq b:nth-child(3){animation-delay:.3s}.aueq b:nth-child(4){animation-delay:.45s}.aueq b:nth-child(5){animation-delay:.6s}
@keyframes aueq{0%,100%{height:20%}50%{height:100%}}
.aubody{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;justify-content:center}
.autitle{margin:0;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auplayer{display:flex;align-items:center;gap:10px}
.auplay{flex:0 0 42px;width:42px;height:42px;border-radius:50%;border:0;background:var(--g);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.auplay:hover{filter:brightness(1.08)}.aubar{flex:1;min-width:60px;accent-color:var(--g)}
.autime{font-size:12px;color:var(--m);white-space:nowrap;font-variant-numeric:tabular-nums}
.austate{margin:2px 0}
.auacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.auacts .vlic,.auacts a.mini{background:var(--bg);color:var(--t);border:1px solid var(--bd0);border-radius:10px;min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;font-size:15px;text-decoration:none;cursor:pointer}
.aumeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-inline-start:auto;font-size:11px}
.aumeta .vlq{background:rgba(79,70,229,.12);color:var(--g);border-radius:8px;padding:2px 8px;font-style:normal;font-weight:700}.aumeta .vld{color:var(--m);font-style:normal}
.aulic{margin:0;font-size:11px;color:var(--m);line-height:1.4}
@media (max-width:520px){.aucover{flex-basis:64px;width:64px;height:64px}.auemo{font-size:30px}.aumeta{margin-inline-start:0;width:100%}}
.rlvid{width:100%;max-width:300px;aspect-ratio:9/16;background:#000;border-radius:14px;display:block;margin:6px 0}
.rlcard{display:block}.rlcap{margin:8px 0}.rlcap p{margin:4px 0;font-size:.95em;line-height:1.4}
.rlflow{max-width:560px;margin:0 auto}.rlb{padding:10px 14px;border-radius:16px;margin:8px 0;line-height:1.45;max-width:92%}.rlq{background:var(--card,#f1f3f7);border:1px solid rgba(128,128,128,.25)}
.rla{background:#2f6df6;color:#fff;margin-inline-start:auto}.rlhooks{display:grid;gap:8px}.rlhook{text-align:start;padding:12px 14px;border-radius:14px;border:1px solid rgba(128,128,128,.35);background:transparent;color:inherit;font:inherit;cursor:pointer}
.rlhook:hover{border-color:#2f6df6}.rlscene{display:flex;gap:10px;align-items:flex-start;margin:8px 0}.rlscene>b{width:24px;height:24px;border-radius:50%;background:#2f6df6;color:#fff;display:grid;place-items:center;flex:none;margin-top:6px}
.rlscene>div{flex:1}.rlscene small{display:block;opacity:.7;margin-top:2px}
.rltip{background:transparent;border-style:dashed}.rlsp{padding:0 6px;margin-inline-start:6px}
.rledit{margin-top:8px}.rledit .go{margin-top:6px}.rlem{min-height:18px}
.vlgal .rlcard{margin:0;min-width:0}.vlgal .rlvid{max-width:100%}

.scard:has(.vlsheet){max-width:min(94vw,640px);max-height:94dvh;display:flex;flex-direction:column;overflow:hidden}
.scard .vlsheet{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.vlsheet img,.vlsheet video{max-height:54dvh;width:auto;max-width:100%;object-fit:contain;margin:0 auto;display:block}
.vlsheet>p.sub{max-height:13dvh;overflow:auto}
.vlgal .rlcard{align-self:start}
.vlgal .rlcard.queued,.vlgal .rlcard.running,.vlgal .rlcard.failed,.vlgal .rlcard.gone{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 14px}
.vlgal .rlcard.queued .autitle,.vlgal .rlcard.running .autitle,.vlgal .rlcard.failed .autitle{flex:1 1 100%;margin:0}
.vlgal .rlcard.queued .aubody,.vlgal .rlcard.running .aubody,.vlgal .rlcard.failed .aubody{display:contents}
.vlgal .rlcard .austate{margin:0;flex:1 1 auto}
.vlgal .rlcard .vlspin{margin:0}

.rlph{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}.rlphi{position:relative;width:84px;height:112px;border-radius:12px;overflow:hidden;border:1px solid rgba(128,128,128,.3)}.rlphi img{width:100%;height:100%;object-fit:cover;display:block}.rlphi button{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:16px;line-height:1;cursor:pointer}.rlphadd{width:84px;height:112px;border-radius:12px;border:2px dashed rgba(128,128,128,.5);background:transparent;color:inherit;font-size:13px;cursor:pointer;padding:6px}

.rlmic.rec{background:#e11d48;color:#fff;border-color:#e11d48;animation:rlpulse 1s infinite}@keyframes rlpulse{50%{opacity:.6}}

/* "new rule" lesson pictures: a grey sketch tinted by the theme (light themes multiply, dark themes invert and screen) */
.picw{display:block;width:max-content;max-width:100%;margin:6px auto 16px;padding:8px;border-radius:22px;border:1px solid var(--bd0);box-shadow:var(--sh);
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc-x,#4338ca) 26%,#fff),color-mix(in srgb,var(--acc2-x,#0369a1) 26%,#fff))}
.picw .pic{margin:0;border:0;box-shadow:none;border-radius:12px;background:transparent;object-fit:contain;mix-blend-mode:multiply}
html:is([data-theme=ocean],[data-theme=violet],[data-theme=forest],[data-theme=sunset],[data-theme=carbon],[data-theme=aurora],[data-theme=rose],[data-theme=midnight],[data-theme=ember],[data-theme=neon],[data-theme=cosmos],[data-theme=slate]) .picw{background:linear-gradient(135deg,color-mix(in srgb,var(--acc-x) 32%,#0b1226),color-mix(in srgb,var(--acc2-x) 32%,#0b1226))}
html:is([data-theme=ocean],[data-theme=violet],[data-theme=forest],[data-theme=sunset],[data-theme=carbon],[data-theme=aurora],[data-theme=rose],[data-theme=midnight],[data-theme=ember],[data-theme=neon],[data-theme=cosmos],[data-theme=slate]) .picw .pic{filter:invert(1);mix-blend-mode:screen}

/* the picture rule: a colour cut-out with no background sits on the theme surface with a soft shadow, in a frame in the theme colours. The picture itself is never recoloured and never cropped. */
.stk{display:block;width:max-content;max-width:100%;margin:6px auto 16px;padding:3px;border-radius:24px;background:linear-gradient(135deg,var(--acc-x,#4338ca),var(--acc2-x,#0369a1));box-shadow:var(--sh)}
.stks{display:block;border-radius:21px;background:var(--card,#fff)}
.stk .pic{margin:0;border:0;box-shadow:none;border-radius:0;background:transparent;object-fit:contain;padding:6%;box-sizing:border-box;filter:drop-shadow(0 5px 8px rgba(0,0,0,.28))}
.oi[src^="img/k-"]{background:transparent;filter:drop-shadow(0 3px 5px rgba(0,0,0,.28))}

/* cut-outs are shown larger in the answer cards by real size (never by scaling: a scaled picture leaves its card and covers the word) */
.oi[src^="img/k-"]{width:128px!important;height:128px!important;display:block;margin:0 auto 6px}

/* unit banner (Nima 2026-11-11): the picture is a clean 16:9 frame with NO text on it; the unit title sits below the picture. The picture is shown whole (never cropped). */
.banner{display:block!important;aspect-ratio:auto!important;height:auto!important;background:none!important}
.banner .bimg{display:block;width:100%;aspect-ratio:16/9;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:var(--card,#fff)}
.banner h2{width:auto!important;margin:0!important;padding:12px 18px 6px!important;background:none!important;color:var(--ink,#1c2340)!important;font-size:20px;text-shadow:none!important}

/* pictures let the theme colour show through (Nima 2026-11-11): every lesson picture and unit banner is drawn at 70 % opacity over the theme surface. One number to tune: --pic-op. */
:root{--pic-op:1}
.oi,.om,.pic,.banner .bimg{opacity:var(--pic-op)}
/* recommended look (2026-11-11, replaces the 70 % opacity): pictures keep their FULL colour. On light themes the white background of a lesson picture takes the colour of the surface under it
   (the card, the selected card, the theme tint), so the picture belongs to the theme without getting pale. On dark themes the picture stays on its own white tile at full strength. Text and buttons are never dimmed. */
.oi,.om,.pic{mix-blend-mode:multiply;background:transparent!important}
html:is([data-theme=ocean],[data-theme=violet],[data-theme=forest],[data-theme=sunset],[data-theme=carbon],[data-theme=aurora],[data-theme=rose],[data-theme=midnight],[data-theme=ember],[data-theme=neon],[data-theme=cosmos],[data-theme=slate]) :is(.oi,.om,.pic){mix-blend-mode:normal;background:#fff!important}

/* match-the-pairs exercise (Nima 2026-11-11): roomier on a computer, tidy on a phone. Picture above the word, both columns the same card height so the rows line up. */
.cols{gap:16px;align-items:start}
.cols .opts{display:grid;gap:14px}
.cols .opts button{flex-direction:column;gap:8px;min-height:132px;padding:14px 12px;font-size:17px;line-height:1.25;border-radius:18px;overflow-wrap:anywhere;text-align:center}
.cols .opts button .om{width:72px;height:72px;margin:0;border-radius:14px}
@media(min-width:900px){
  main:has(.cols){max-width:1000px}
  .cols{gap:28px}
  .cols .opts{gap:18px}
  .cols .opts button{flex-direction:row;justify-content:flex-start;gap:18px;min-height:124px;padding:16px 22px;font-size:20px;text-align:left}
  .cols #r button{justify-content:center;text-align:center}
  .cols .opts button .om{width:92px;height:92px;border-radius:16px}
}
@media(max-width:520px){
  .cols{gap:10px}
  .cols .opts{gap:10px}
  .cols .opts button{min-height:116px;padding:10px 8px;font-size:15px;border-radius:16px}
  .cols .opts button .om{width:56px;height:56px}
}

/* "Continue where you left off": the unit picture is shown whole in a small 16:9 frame (it was cut to a square) */
.resume:not(.rv) .rimg{width:128px;height:72px;background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:12px}
@media(max-width:520px){.resume:not(.rv) .rimg{width:96px;height:54px}}
.resume .rimg.rimgb{width:160px!important;height:90px!important;aspect-ratio:16/9;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;flex:none}
@media(max-width:520px){.resume .rimg.rimgb{width:112px!important;height:63px!important}}

/* one font for every language (Nima 2026-11-11): Vazirmatn carries Arabic, Persian and all Latin letters with accents (French, German, Spanish, Portuguese, Italian, Dutch, English). */
html:not(:lang(fa)):not(:lang(ar)) body,html:not(:lang(fa)):not(:lang(ar)) body :not(code):not(pre):not(kbd):not(samp):not(.xterm *){font-family:"Twemoji Country Flags",Vazirmatn,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* phones (Nima 2026-11-11): the header controls wrap onto a second line instead of running off the left edge of the screen; the header scrolls away so it does not take the screen; touch targets are at least 36 px */
@media(max-width:560px){
  header{position:relative}
  header .right{flex-wrap:wrap;justify-content:flex-end;row-gap:6px;width:100%}
  header .right>*{flex:none}
  .zm button{min-width:36px;min-height:40px}
  .avc-pill{height:40px}
  .avc-pill .avb{min-width:36px!important;width:36px!important;height:36px!important}
}

/* the two listening buttons carry a word, so a learner knows what to press */
.spkw{display:inline-flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.spkw small{font-size:12px;font-weight:600;color:var(--m,#667);line-height:1.1;text-align:center;max-width:84px}

/* language chooser (Nima 2026-11-11): a grid of tiles, a flag with a small name under it, so it stays tidy when more languages are added */
.langrow{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.langrow .lvlq.lt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 6px;min-height:78px;text-align:center}
.langrow .lvlq.lt .lf{font-size:30px;line-height:1}
.langrow .lvlq.lt small{display:block;font-size:12px;font-weight:700;color:inherit;line-height:1.2;overflow-wrap:anywhere}
@media(max-width:420px){.langrow{grid-template-columns:repeat(3,1fr)}}

/* QC sweep 2026-11-11: the brand name fits next to the controls on mid-size screens (the wider single font needs a little less size), checkboxes are big enough to tap */
@media(min-width:761px) and (max-width:1180px){#brand{font-size:16.5px}}
#tt-auto,#autoth,.auto input[type=checkbox]{width:22px;height:22px;flex:none;margin:0 6px}
.auto,.autorow{min-height:36px;align-items:center}

/* pictures and banners at 90 % so the theme colour shows through a little (Nima 2026-11-11); text stays at full strength: readability and contrast come first */
:root{--pic-op:.9}
/* QC 2026-11-11: tap size of header buttons, tutor bottom room above the sticky input bar */
.acct{min-height:44px;min-width:44px}
@media (max-width:560px){.tt{padding-bottom:84px}}

/* section pictures of guides and place pages (Nima 2026-11-12) */
.guidepic{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:14px;margin:0 0 8px}      /* a 16:9 picture is shown whole, never cropped */

/* ===== finish screen, answer feedback and progress bar: a rewarding, professional look (Nima 2026-11-12) ===== */
.cele{text-align:center;padding:6px 0 2px}.cele-owl{animation:celebob 2.6s ease-in-out infinite}@keyframes celebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.cele-stars{display:flex;justify-content:center;gap:12px;font-size:56px;line-height:1;margin:2px 0 4px}.cele-stars .st{display:inline-block;opacity:.22;filter:grayscale(1);transform:scale(.7)}
.cele-stars .st.on{opacity:1;filter:none;transform:scale(0);animation:starpop .65s cubic-bezier(.2,1.6,.4,1) forwards;animation-delay:var(--d,0s)}@keyframes starpop{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.cele-title{font-size:30px;margin:6px 0 2px;letter-spacing:-.2px}.cele-sub{opacity:.82;margin:0 auto 16px;max-width:440px;line-height:1.45}
.cele-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:480px;margin:0 auto 14px}.cs{background:var(--card,#fff);border-radius:18px;padding:12px 6px;box-shadow:var(--sh,0 4px 14px rgba(20,30,70,.08));animation:fbin .4s ease-out both}
.cs:nth-child(2){animation-delay:.08s}.cs:nth-child(3){animation-delay:.16s}.cs b{display:block;font-size:24px;line-height:1.2}.cs small{opacity:.75;font-size:12px}
.cele-goal{max-width:480px;margin:0 auto 16px}.gbar{height:12px;border-radius:8px;background:#dfe7ef;overflow:hidden;margin-bottom:4px}.gbar i{display:block;height:100%;background:linear-gradient(90deg,#ffb100,#ff7a00);border-radius:8px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.cele-goal small{opacity:.75}
html[data-motion="off"] .cele *,html[data-motion="off"] .fb{animation:none!important}html[data-motion="off"] .cele-stars .st.on{transform:none}
/* answer feedback: a warm card that slides in, with a clear icon */
.fb{animation:fbin .28s ease-out both;border-radius:18px;padding:14px 16px;line-height:1.4;box-shadow:0 2px 10px rgba(20,30,70,.06)}@keyframes fbin{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.fb.ok{border:2px solid rgba(88,204,2,.45)}.fb.no{border:2px solid rgba(229,57,53,.35)}
/* progress bar: thicker, rounded, smooth, with a soft shine */
.bar{height:14px;border-radius:999px}.bar i{border-radius:999px;transition:width .45s cubic-bezier(.2,.8,.2,1);position:relative}.bar i::after{content:"";position:absolute;left:8px;right:8px;top:3px;height:3px;border-radius:3px;background:rgba(255,255,255,.45)}
/* answer buttons feel tactile */
.opts button,.go{transition:transform .08s ease,box-shadow .12s ease}.opts button:active,.go:active{transform:translateY(2px)}
@media (max-width:560px){.cele-title{font-size:25px}.cele-stars{font-size:48px}.cs b{font-size:20px}}

/* health card: a picture beside every phrase (1:1, never cropped) */
.cardph{display:flex;align-items:center;gap:10px}.cardph>div:not(.cbtn){flex:1;min-width:0}.cphimg{flex:none;width:64px;height:64px;object-fit:contain;border-radius:14px;background:var(--card,#fff)}.cphimg.ph{background:linear-gradient(110deg,rgba(150,160,190,.12) 30%,rgba(150,160,190,.22) 50%,rgba(150,160,190,.12) 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}@keyframes shimmer{to{background-position:-200% 0}}
/* every picture keeps its own shape: 16:9, 1:1 or 9:16 is shown whole */
.ximg,.heroimg,.guidepic,.bpic img,.pic{object-fit:contain}
@media (max-width:560px){.cphimg{width:52px;height:52px}}

/* Art pictures in the app show only the part without the Okenva marks (Nima 2026-11-12). The watermark area is the outer 5% of the picture on ALL four sides: the two marks are small enough to stay inside it
   (measured: at most 4.6%, src/parlons_ctx/watermark.py). The file that loads is always the watermarked one; the screen hides 5% on every side and enlarges the middle to fill the same box. Downloads are not changed.
   Round profile pictures are left alone (their circle already cuts the corners). */
/* test 2026-11-12: the band is 2.5% (marks measured inside it for 720p and larger) */
img[src*="labimg/"]:not([style*="border-radius:50%"]):not(.okava){clip-path:inset(2.5% round 12px)!important;transform:scale(1.0527)!important;transform-origin:50% 50%!important}
/* the same for the videos of the Video Lab and their preview pictures (final rule 2026-11-12): the watermark band is hidden on screen, the file keeps it */
img[src*="labvid/"],video[src*="labvid/"]:not([controls]){clip-path:inset(2.5% round 12px)!important;transform:scale(1.0527)!important;transform-origin:50% 50%!important}

/* the profile screen (and the review and big-picture sheets of Explore) fill the whole screen on phones and tablets, with nothing of the app showing behind (Nima 2026-11-12) */
@media(max-width:1024px){
  .sheet:has(#ia-pf),.sheet:has(#ia-rvs),.sheet:has(#bg-rv){align-items:stretch;background:var(--bg,#0b1020)}
  .sheet:has(#ia-pf) .scard,.sheet:has(#ia-rvs) .scard,.sheet:has(#bg-rv) .scard{width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;border-radius:0;margin:0;overflow:auto}
  .sheet:has(#ia-pf) .vlsheet,.sheet:has(#ia-rvs) .vlsheet,.sheet:has(#bg-rv) .vlsheet{max-width:none!important;overflow:auto}
}

/* every sheet (account, plans, profile, review ...) fills the screen on phones and tablets, from under the top bar to the bottom: the top bar stays, and nothing of the page shows behind or below (Nima 2026-11-12).
   No viewport units here: with the app's own zoom (80%, 120% ...) "100vh" is not the screen any more, which left the page showing under the sheet. */
@media(max-width:1024px){
  .sheet{top:var(--hdrh,0px)!important;bottom:0!important;left:0!important;right:0!important;height:auto!important;align-items:stretch!important;justify-content:stretch!important;padding:0!important;background:var(--bg,#fff)}
  .sheet .scard{width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;max-height:none!important;border-radius:0!important;margin:0!important;overflow-y:auto;box-shadow:none!important;box-sizing:border-box}
}

/* the big picture view and the review sheet (Nima 2026-11-12, phone screenshot): the picture is shown whole in its own shape inside a rounded box (no cut face, no sideways scrolling), then who made it and its stars,
   then the ready-made comments, then four equal answer buttons (two by two on a phone), and Report as a quiet link at the end */
.sheet .vlsheet{overflow-x:hidden}
.okview{display:flex!important;flex-direction:column;gap:14px;max-width:680px;margin:0 auto;width:100%;overflow:visible!important}
.okpicbox{align-self:center;width:100%;border-radius:18px;overflow:hidden;line-height:0;background:var(--img-bg,#eef1f8);box-shadow:0 14px 34px -20px rgba(0,0,0,.55)}
.okpicbox img{display:block;width:100%;height:auto}
.okmeta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.okwho{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:17px}
.okstars{font-weight:700;opacity:.85;white-space:nowrap}
.okask{margin:0;text-align:center;font-weight:600;opacity:.85}
.okchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.okchips .mini{margin:0}
.okans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.okans .go{width:100%;min-width:0;margin:0;padding:14px 6px;white-space:normal;line-height:1.25}
@media(max-width:600px){.okans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.okrep{background:none;border:0;padding:6px 10px;color:inherit;opacity:.65;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}

/* the profile page (Nima 2026-11-12, phone screenshot "more professional"): a soft cover band in the theme colour, the round picture overlapping it, the name, three counters with thin dividers,
   action buttons of equal width, an icon tab bar with an underline for the open tab, and a friendly empty state */
.okprof{background:var(--seg,var(--card,#fff));border:1px solid var(--seg-bd,var(--bd0,#e6e8f2));border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -30px rgba(0,0,0,.5)}
.okcover{height:104px;background:linear-gradient(120deg,color-mix(in srgb,var(--b,#4f46e5) 85%,#fff),color-mix(in srgb,var(--acc-x,#d946ef) 80%,#fff) 60%,color-mix(in srgb,#f59e0b 75%,#fff))}
.okhead{display:flex;flex-direction:column;align-items:center;padding:0 18px 14px;margin-top:-58px;text-align:center}
.okava{width:116px;height:116px;border-radius:50%;object-fit:cover;border:5px solid var(--card,#fff);background:var(--card,#fff);box-shadow:0 8px 22px -8px rgba(0,0,0,.45);display:block}
.okava-s{font-size:72px;line-height:116px;text-align:center}
.okname{margin:10px 0 0;font-size:26px;line-height:1.2;word-break:break-word}
.okstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:420px;margin:14px 0 4px}
.okstats span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 6px;border-inline-start:1px solid var(--seg-bd,var(--bd0,#e6e8f2))}
.okstats span:first-child{border-inline-start:0}
.okstats b{font-size:21px;line-height:1.1}.okstats small{font-size:13px;opacity:.75}
.okacts{display:flex;gap:8px;width:100%;max-width:460px;margin-top:12px;flex-wrap:wrap}
.okacts>button{flex:1 1 120px;margin:0!important;min-width:0;justify-content:center;text-align:center;padding:11px 10px;white-space:nowrap}
.oktabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--seg-bd,var(--bd0,#e6e8f2))}
.oktabs button{background:none;border:0;border-bottom:3px solid transparent;padding:12px 4px 10px;color:inherit;font:inherit;font-weight:700;font-size:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;opacity:.6;min-width:0}
.oktabs button i{font-style:normal;font-size:20px;line-height:1}
.oktabs button span{overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.oktabs button.on{opacity:1;border-bottom-color:var(--b,#4f46e5)}
.okempty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 16px;text-align:center;opacity:.9}
.okempty i{font-style:normal;font-size:46px;line-height:1;opacity:.6}.okempty p{margin:0;font-weight:600;opacity:.8}
@media(min-width:760px){.okcover{height:140px}.okava{width:136px;height:136px}.okava-s{line-height:136px;font-size:86px}.okhead{margin-top:-70px}}

/* Explore (Nima 2026-11-12, phone screenshot "more professional"): a compact title row with Back and Make, a three-part switch (Top, New, Profiles) whose open part is solid and readable,
   one row of kind chips that scrolls sideways instead of wrapping, and picture cards in a tidy two-column masonry on a phone */
.okexhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.okexhead>button{margin:0!important;flex:none}
.okextitle{flex:1 1 200px;min-width:0}.okextitle h1{margin:0;font-size:26px;line-height:1.2}.okextitle p{margin:2px 0 0;opacity:.75;font-size:14px}
.okseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;background:color-mix(in srgb,var(--card,#fff) 80%,var(--bd0,#dfe3f0));border:1px solid var(--seg-bd,var(--bd0,#e6e8f2))}
.okseg button{border:0;background:none;color:inherit;font:inherit;font-weight:700;padding:11px 6px;border-radius:12px;cursor:pointer;opacity:.7;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okseg button.on{background:var(--b,#4f46e5);color:#fff;opacity:1;box-shadow:0 6px 16px -8px var(--b,#4f46e5)}
.okkinds{display:flex;gap:8px;overflow-x:auto;padding:12px 0 6px;margin:0 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.okkinds::-webkit-scrollbar{display:none}
.okkinds button{flex:none;border:1px solid var(--seg-bd,var(--bd0,#e6e8f2));background:var(--seg,var(--card,#fff));color:inherit;font:inherit;font-weight:600;font-size:14px;padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.okkinds button.on{background:color-mix(in srgb,var(--b,#4f46e5) 14%,var(--card,#fff));border-color:var(--b,#4f46e5);color:var(--b,#4f46e5)}
.okmason{column-count:2;column-gap:12px}
@media(min-width:700px){.okmason{column-count:3;column-gap:16px}}@media(min-width:1100px){.okmason{column-count:4}}
.okcard{margin:0 0 12px;break-inside:avoid;background:var(--seg,var(--card,#fff));border:1px solid var(--seg-bd,var(--bd0,#e6e8f2));border-radius:16px;overflow:hidden;box-shadow:0 12px 26px -22px rgba(0,0,0,.6)}
.okcardpic{overflow:hidden;line-height:0;cursor:pointer;background:var(--img-bg,#eef1f8)}.okcardpic img{display:block;width:100%;height:auto}
.okcard figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;font-size:13px}
.okwho2{display:inline-flex;align-items:center;gap:6px;min-width:0;cursor:pointer}.okwho2 b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.okexhead #ex-make{order:3;flex:1 1 100%}}
/* Explore on a phone: a card is never split between two columns, and the title sits on its own line under Back */
.okcard{display:inline-block;width:100%;vertical-align:top}
@media(max-width:600px){.okextitle{flex:1 1 100%;order:2}.okexhead #ex-make{order:3}.okextitle h1{font-size:24px}}

/* the Select bar of the shared folder feature rests in the page; it sticks under the top bar only while a selection is being made (it used to float over the pictures while scrolling) */
.imgart .vlselbar:not(.okf-live){position:static!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important}
/* Explore: cards are laid out in real columns filled left to right, so the newest or best pictures sit side by side at the top (not all in the first column) */
.okcols{display:flex;gap:12px;align-items:flex-start}.okcols>div{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}.okcols .okcard{margin:0}
@media(min-width:700px){.okcols{gap:16px}.okcols>div{gap:16px}}

/* the Okenva home page (Nima 2026-11-13: "make the home page professional"): a calm hero with the logo, the name and one line; the four apps as large cards in two columns (one on a phone) with a colour band, a big icon,
   a clear name and one sentence, and an arrow; one quiet account line at the bottom */
.phome{max-width:1040px;margin-inline:auto;padding:8px 16px 40px}
.phero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:34px 8px 26px}
.plogo{width:64px;height:64px;filter:drop-shadow(0 8px 16px rgba(79,70,229,.35))}
.phero h1{margin:6px 0 0;font-size:clamp(34px,6vw,52px);line-height:1.05;letter-spacing:-.02em;background:linear-gradient(120deg,var(--b,#4f46e5),var(--acc-x,#d946ef) 60%,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
.phome .phtag{margin:4px 0 0;font-size:clamp(16px,2.4vw,20px);opacity:.78;max-width:560px}
.pstate{display:inline-block;margin-top:12px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--b,#4f46e5) 12%,var(--card,#fff));border:1px solid var(--seg-bd,var(--bd0,#e6e8f2))}
.phome .pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:6px}
@media(max-width:700px){.phome .pcards{grid-template-columns:1fr;gap:12px}}
.phome .pcard{position:relative;display:flex;align-items:center;gap:16px;text-align:start;width:100%;padding:22px 20px 22px 22px;border-radius:22px;background:var(--seg,var(--card,#fff));border:1px solid var(--seg-bd,var(--bd0,#e6e8f2));box-shadow:0 18px 38px -30px rgba(0,0,0,.55);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;margin:0}
.phome .pcard::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--b,#4f46e5),var(--acc-x,#d946ef))}
.phome .pcard:hover{transform:translateY(-3px);box-shadow:0 24px 44px -28px rgba(0,0,0,.6)}
.phome .pcard:focus-visible{outline:3px solid var(--b,#4f46e5);outline-offset:2px}
.phome .pcard b{display:block;font-size:19px;line-height:1.25;margin-bottom:4px}
.phome .pcard small{display:block;font-size:14px;line-height:1.45;opacity:.78}
.phome .pcard>div{flex:1;min-width:0}
.phome .pcard .pgo{font-style:normal;font-size:30px;line-height:1;opacity:.45;flex:none}
.phome .pcard:hover .pgo{opacity:.9}
.phome .pcard.cont{grid-column:1/-1}
.phome #pl-getapp{grid-column:1/-1;padding:14px 18px;box-shadow:none}.phome #pl-getapp b{font-size:16px}
.phome #pl-save{margin-top:6px}

.phome.plat,.plat.phome{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important}
.phome .phtag{background:none!important;border:0!important;color:inherit!important;padding:0!important;font-weight:500}

/* graphic motion, ON only while the Motion switch at the top is on (html[data-motion="on"]; off or "reduce motion" = still page): the home page and the app cards come alive, every app's header gets a slow colour drift,
   and pictures and cards rise in softly. Nothing here moves text that the student is reading, and nothing loops faster than 6 seconds. */
@keyframes okfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes okrise{from{opacity:.4;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}      /* starts visible: a page that cannot run animations never shows a hidden card */
@keyframes okshine{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes okglow{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,0)}50%{box-shadow:0 0 0 10px rgba(99,102,241,.14)}}
@keyframes okdrift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes okpulse{0%,100%{opacity:.55}50%{opacity:1}}
html[data-motion="on"] .phome .plogo{animation:okfloat 5s ease-in-out infinite}
html[data-motion="on"] .phome .phero h1{background-size:200% 100%;animation:okshine 6s linear infinite}
html[data-motion="on"] .phome .pstate{animation:okglow 4s ease-in-out infinite}
html[data-motion="on"] .phome .pcard{animation:okrise .6s cubic-bezier(.2,.7,.2,1) backwards}
html[data-motion="on"] .phome .pcard:nth-child(2){animation-delay:.08s}html[data-motion="on"] .phome .pcard:nth-child(3){animation-delay:.16s}html[data-motion="on"] .phome .pcard:nth-child(4){animation-delay:.24s}
html[data-motion="on"] .phome .pcard .pgo{animation:okpulse 3s ease-in-out infinite}
html[data-motion="on"] .phome .pcard:hover .tile,html[data-motion="on"] .phome .pcard:hover svg{transform:scale(1.08) rotate(-3deg);transition:transform .25s ease}
html[data-motion="on"] .achero,html[data-motion="on"] .ia-hero{background-size:220% 220%;animation:okdrift 14s ease-in-out infinite}
html[data-motion="on"] .okcard,html[data-motion="on"] .vlitem,html[data-motion="on"] .okprof,html[data-motion="on"] .accourse{animation:okrise .5s cubic-bezier(.2,.7,.2,1) backwards}
html[data-motion="on"] .okava{animation:okglow 5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){html[data-motion="on"] .phome *,html[data-motion="on"] .achero,html[data-motion="on"] .ia-hero,html[data-motion="on"] .okcard,html[data-motion="on"] .vlitem,html[data-motion="on"] .okprof,html[data-motion="on"] .accourse,html[data-motion="on"] .okava{animation:none!important}}

/* ===== motion in EVERY app and page (Nima 2026-11-13: "all apps, any part of the page, if Motion is on") =====
   One shared layer, on only while html[data-motion="on"]. Rules: nothing moves text that is being read, nothing loops faster than 5 s, every entrance ends in the natural state (fill-mode backwards, so hover and layout still work),
   the page body only fades (a transform there would break fixed and sticky parts), and "reduce motion" in the device turns all of it off. */
@keyframes okfade{from{opacity:.35}to{opacity:1}}
@keyframes okpop{from{opacity:.4;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes okslide{from{opacity:.4;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes okbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes okzoom{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes okspin{to{transform:rotate(360deg)}}
html[data-motion="on"] #app>*{animation:okfade .45s ease backwards}
html[data-motion="on"] .sheet{animation:okfade .25s ease backwards}
html[data-motion="on"] .sheet .scard{animation:okpop .38s cubic-bezier(.2,.8,.2,1) backwards}
html[data-motion="on"] :is(.tool,.unit,.accourse,.vc,.cs,.si2,.etopic,.dc,.kcard,.xsec,.arsec,.hero,.resume,.cardph,.eresult,.vlitem,.okcard,.pcard,.vlf,.oktabs button):nth-child(-n+24){animation:okpop .45s cubic-bezier(.2,.8,.2,1) backwards}
html[data-motion="on"] :is(.tool,.unit,.accourse,.vc,.cs,.si2,.etopic,.dc,.kcard,.xsec,.arsec,.vlitem,.okcard,.pcard):nth-child(2){animation-delay:.05s}
html[data-motion="on"] :is(.tool,.unit,.accourse,.vc,.cs,.si2,.etopic,.dc,.kcard,.xsec,.arsec,.vlitem,.okcard,.pcard):nth-child(3){animation-delay:.1s}
html[data-motion="on"] :is(.tool,.unit,.accourse,.vc,.cs,.si2,.etopic,.dc,.kcard,.xsec,.arsec,.vlitem,.okcard,.pcard):nth-child(4){animation-delay:.15s}
html[data-motion="on"] :is(.tool,.unit,.accourse,.vc,.cs,.si2,.etopic,.dc,.kcard,.xsec,.arsec,.vlitem,.okcard,.pcard):nth-child(n+5):nth-child(-n+24){animation-delay:.2s}
html[data-motion="on"] :is(.achead2,.phead,.vlh,.oktabs,.okseg){animation:okslide .45s ease backwards}
html[data-motion="on"] :is(.go,.mini,.tool,.accourse,.pcard,.unit,.vlitem,.okcard,.opts button,.vlchip2,.oktabs button,.okseg button,.vlic,.okans button){transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
html[data-motion="on"] :is(.go,.mini,.vlchip2,.opts button,.vlic,.okans button):not(:disabled):hover{transform:translateY(-2px)}
html[data-motion="on"] :is(.go,.mini,.vlchip2,.opts button,.vlic,.okans button,.tool,.accourse,.unit):not(:disabled):active{transform:scale(.97)}
html[data-motion="on"] :is(.tool,.accourse,.unit):hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(0,0,0,.55)}
html[data-motion="on"] :is(.owlw,.mascot,#owl) img,html[data-motion="on"] img.owl,html[data-motion="on"] .owlw{animation:okbob 4.5s ease-in-out infinite}
html[data-motion="on"] :is(.himg,.heroimg,.guidepic,.kimg){animation:okzoom 14s ease-in-out infinite alternate;transform-origin:50% 50%}
html[data-motion="on"] :is(.vlspin,.spin,.loader){animation:okspin 1s linear infinite}
html[data-motion="on"] :is(.achero,.ia-hero,.hero,.vlhero){background-size:220% 220%;animation:okdrift 14s ease-in-out infinite}
html[data-motion="on"] :is(.acbar,.acprog,.bar,.prog) > *{transition:width .6s cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){html[data-motion="on"] *,html[data-motion="on"] *::before,html[data-motion="on"] *::after{animation:none!important;transition:none!important}}

/* folders: one compact bar + a list that opens on demand (Nima 2026-11-13: the folder column wasted space; the pictures get the full width on desktop, tablet and phone) */
.vlwrap{display:block!important;width:auto!important;margin-inline:0!important}
.vlside{display:block!important;position:relative!important;top:auto!important;overflow:visible!important;padding:0 0 12px!important;z-index:30}
.vlbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vlcur{display:inline-flex;align-items:center;gap:8px;border:1px solid #c7d2fe;background:#fff;color:#0b1226;border-radius:14px;padding:9px 14px;font:700 14px/1.2 inherit;font-family:inherit;cursor:pointer;max-width:100%;min-width:0}
.vlcur span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.vlcur i{font-style:normal;font-size:12px;color:#4f46e5;background:#eef2ff;border-radius:99px;padding:2px 8px}.vlcur b{font-size:12px;color:#64748b}
.vlcur[aria-expanded="true"]{border-color:#4f46e5;box-shadow:0 0 0 3px #e0e7ff}
.vlpanel{position:absolute;top:calc(100% - 6px);inset-inline-start:0;width:min(340px,92vw);max-height:60vh;overflow:auto;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 18px 40px rgba(15,23,42,.18);padding:8px;display:flex;flex-direction:column;gap:6px}
.vlpanel[hidden],.vlback[hidden]{display:none!important}
.vlpanel .vlf{width:100%;border-radius:12px;justify-content:flex-start}.vlpanel .vlf i{margin-inline-start:auto}.vlpanel div.vlf{display:flex}.vlpanel .vlfn{flex:1;min-width:0;text-align:start}
.vlgrab{display:none}.vlback{display:none}
@media (max-width:899px){
  .vlback:not([hidden]){display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:60}
  .vlpanel{position:fixed;inset-inline:0;bottom:0;top:auto;width:auto;max-height:72vh;border-radius:20px 20px 0 0;padding:6px 12px 18px;z-index:61;animation:okrise .22s ease}
  .vlgrab{display:flex;justify-content:space-between;align-items:center;font-weight:800;padding:8px 4px}
}
/* scrollbars: slim, rounded, indigo-to-pink thumb on a soft track, on every app and every scrolling panel (Nima 2026-11-13) */
*{scrollbar-width:thin;scrollbar-color:#818cf8 #eef2ff}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#eef2ff;border-radius:99px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6366f1,#ec4899);border-radius:99px;border:2px solid #eef2ff}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#4f46e5,#db2777)}
@media (prefers-color-scheme:dark){*{scrollbar-color:#6366f1 #1e293b}*::-webkit-scrollbar-track{background:#1e293b}*::-webkit-scrollbar-thumb{border-color:#1e293b}}

/* like heart on Explore cards and in the big view */
.okheart{border:1px solid #e2e8f0;background:#fff;color:#64748b;border-radius:99px;padding:3px 10px;font:700 12.5px/1.2 inherit;font-family:inherit;cursor:pointer;margin-inline-start:6px}
.okheart:hover{border-color:#f472b6;color:#db2777}.okheart.on{background:#fdf2f8;border-color:#f472b6;color:#db2777}
html[data-motion="on"] .okheart.on{animation:okpop .35s cubic-bezier(.2,.8,.2,1)}