[hidden]{display:none!important}
@font-face{font-family:"FC Serif";src:url(/fonts/cinzel.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"FC Sans";src:url(/fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"FC Ar";src:url(/fonts/plex-ar-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC,U+200C-200F}
@font-face{font-family:"FC Ar";src:url(/fonts/plex-ar-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC,U+200C-200F}
@font-face{font-family:"FC Ar";src:url(/fonts/plex-ar-600.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC,U+200C-200F}
:root{--ink:#105157;--green:#33BC86;--text:#20816C;--line:#D5EEE4;--soft:#F1FAF6;--sans:"FC Ar","FC Sans",system-ui,sans-serif}
html[lang=en]{--sans:"FC Sans","FC Ar",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);-webkit-tap-highlight-color:transparent}
html[lang=ar] body{font-size:18px;line-height:1.8}
html[lang=en] .ar,html[lang=ar] .en{display:none}
body{min-height:100svh;display:flex;flex-direction:column}
.i{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button,a{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;max-width:980px;width:100%;margin:0 auto}
.ib{display:grid;place-items:center;min-width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;text-decoration:none}
.lng{font:600 15px "FC Sans",sans-serif;padding:0 10px;border-radius:24px}
.ttl{margin:0;font:600 20px/1.3 var(--sans);color:var(--ink)}
html[lang=en] .ttl{font-family:"FC Serif",serif;letter-spacing:.04em}
.prog{height:8px;max-width:520px;width:calc(100% - 32px);margin:4px auto 0;background:var(--soft);border-radius:8px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--green);border-radius:8px;transition:width .35s ease}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 16px 8px;gap:18px;width:100%}
.stage{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.card{position:relative;width:min(100%,358px);aspect-ratio:1/1.08;perspective:1400px;cursor:pointer;touch-action:pan-y}
.face{position:absolute;inset:0;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 36px rgba(16,81,87,.10);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px;backface-visibility:hidden;transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.back{transform:rotateY(180deg)}
.card.on .front{transform:rotateY(-180deg)}.card.on .back{transform:rotateY(0)}
#img{width:188px;height:188px;border-radius:22px;object-fit:cover;display:block}
#img2{width:96px;height:96px;border-radius:16px;object-fit:cover}
.word{margin:6px 0 0;font:600 40px/1.15 "FC Sans",sans-serif;color:var(--ink);letter-spacing:.01em}
.ar-gloss{margin:0;font:500 18px/1.8 "FC Ar",sans-serif;color:var(--text)}
.sent{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 16px;border-radius:24px;border:1px solid var(--line);background:var(--soft);font:500 16px/1.4 "FC Sans",sans-serif;color:var(--ink);cursor:pointer;direction:ltr;text-align:left}
.sent .i{width:22px;height:22px;flex:none;color:var(--text)}
.acts{display:flex;gap:18px;justify-content:center}
.big{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:0;cursor:pointer;text-decoration:none}
.big .i{width:34px;height:34px}
.spk{background:var(--ink);color:#fff}
.flp{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.spk.playing{box-shadow:0 0 0 8px rgba(51,188,134,.25)}
.nav{display:flex;align-items:center;justify-content:center;gap:28px}
.nb{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.nb.next{background:var(--green);border-color:var(--green);color:#063c35}
.nb:disabled{opacity:.35;cursor:default}
html[dir=rtl] .nb.next .i{transform:scaleX(-1)}html[dir=ltr] .nb.prev .i{transform:scaleX(-1)}
.cnt{min-width:76px;text-align:center;font:600 18px "FC Sans","FC Ar",sans-serif;color:var(--text)}
.done{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.okc{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--soft);color:var(--green)}
.okc .i{width:54px;height:54px;stroke-width:2.6}
.done h2{margin:0;font:600 30px/1.4 var(--sans)}
html[lang=en] .done h2{font-family:"FC Serif",serif}
.thumbs{display:grid;grid-template-columns:repeat(6,46px);gap:8px}
.thumbs img{width:46px;height:46px;border-radius:10px;object-fit:cover}
.fine{text-align:center;padding:8px 16px 18px;font-size:13px;line-height:1.6;color:#4b6f72}
html[lang=ar] .fine{font-size:14px}
.fine summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;color:var(--text)}
.fine ul{list-style:none;padding:0;margin:6px auto;max-width:640px;text-align:start;direction:ltr}
.fine a{color:var(--text)}
@media (min-width:900px){
  .card{width:520px;aspect-ratio:1/0.95}
  #img{width:350px;height:350px;border-radius:28px}
  #img2{width:120px;height:120px}
  .word{font-size:48px}
}
@media (prefers-reduced-motion:reduce){
  .face{transition:opacity .01s}.back{transform:none;opacity:0}.card.on .front{transform:none;opacity:0}.card.on .back{opacity:1}
  .prog i{transition:none}
}
.pbtn{all:unset;display:block;cursor:pointer;border-radius:22px}.pbtn:focus-visible{outline:3px solid #1f5fbf;outline-offset:3px}
#img{width:250px;height:250px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:10px}.dot{all:unset;box-sizing:border-box;width:24px;height:24px;display:grid;place-items:center;cursor:pointer}.dot::before{content:'';width:9px;height:9px;border-radius:50%;background:#c9ced6}.dot.on::before{background:#1f3b63;width:11px;height:11px}.dot:focus-visible{outline:2px solid #1f5fbf;border-radius:50%}
@media (min-width:900px){#img{width:380px;height:380px}}