/* ol_typing.css — خطوات الطباعة باللمس (hands · finger · typing) */
.olt-wrap{margin-top:.7rem}
.olt-info{text-align:center;font-weight:700;min-height:2.4rem;line-height:1.9;margin:.2rem 0 .3rem}
.olt-cnt{text-align:center;color:#7a6d74;font-weight:700;font-size:.85rem}
.olt-keys kbd,.olt-info kbd{display:inline-block;min-width:1.7rem;padding:0 .4rem;border:1px solid #cdbfb6;border-bottom-width:3px;border-radius:6px;background:#fff;font:700 .9rem Consolas,monospace;text-align:center;margin:0 .1rem}
.olt-hbox{max-width:560px;margin:0 auto}.olt-hbox.sm{max-width:330px}
.olt-hands{display:block;width:100%;height:auto}
.olt-fg{cursor:pointer;outline:none}.olt-fg .olt-sk{transition:fill .15s,stroke .15s}
.olt-fg:hover .olt-sk,.olt-fg:focus-visible .olt-sk{stroke-width:2.4}
.olt-hands.sel .olt-fg{opacity:.38}.olt-hands.sel .olt-fg.on{opacity:1}
.olt-fg.olt-good{animation:oltpop .5s}.olt-fg.olt-bad{animation:oltsh .4s}
.olt-lb{font:800 15px Cairo,system-ui,sans-serif;pointer-events:none}
@keyframes oltpop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes oltsh{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.olt-kbox{max-width:600px;margin:.6rem auto 0;overflow-x:auto}
.olt-kb{--g:4px;direction:ltr;display:flex;flex-direction:column;gap:var(--g);width:100%;min-width:470px;padding:7px;box-sizing:border-box;background:#f3ece7;border:1px solid #e4d8d0;border-radius:12px}
.olt-kr{display:flex;width:100%}
.olt-k{font-style:normal;width:36px;height:34px;border-radius:7px;display:flex;align-items:center;justify-content:center;font:700 .8rem Consolas,monospace;border:1px solid #ddd2ca;background:#fff;color:#7a6d74;position:relative;transition:transform .08s,box-shadow .15s,opacity .15s}
.olt-kr>.olt-k{flex:0 0 calc(var(--w,1)*100%/15 - var(--g));margin:0 calc(var(--g)/2);min-width:0;box-sizing:border-box}
.olt-k.mod{background:#fbf8f6;border-color:#e3d8d1;color:#a3969c;font:600 .62rem system-ui,sans-serif;overflow:hidden;white-space:nowrap}.olt-k.mod span{overflow:hidden;text-overflow:clip}
.olt-k.shf{font:700 .66rem system-ui,sans-serif}.olt-k.sp{font:600 .72rem system-ui,sans-serif}
.olt-k.g1{background:#FBEAF0;border-color:#ED93B1;color:#72243E}.olt-k.g2{background:#FAEEDA;border-color:#EF9F27;color:#633806}.olt-k.g3{background:#EAF3DE;border-color:#97C459;color:#27500A}.olt-k.g4{background:#E6F1FB;border-color:#85B7EB;color:#0C447C}.olt-k.g5{background:#EEEDFE;border-color:#AFA9EC;color:#3C3489}
.olt-k.bump::after{content:"";position:absolute;bottom:4px;width:12px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.olt-kbox:has(.lit) .olt-k:not(.lit){opacity:.3}
.olt-k.lit{outline:2.5px solid #8E1140;outline-offset:1px;opacity:1;transform:translateY(-1px)}
.olt-k.olt-good{background:#bfe6cc!important}.olt-k.olt-bad{background:#f7b9c6!important}
.olt-k.dim{opacity:.35}
.olt-big{font:800 4rem/1.1 Consolas,monospace;direction:ltr;text-align:center;color:#8E1140;background:#fff6f0;border:2px dashed #E5C9BC;border-radius:18px;max-width:200px;margin:.5rem auto;padding:.3rem 0}
.olt-big.pop{animation:oltpop .35s}
.olt-q{text-align:center;font-weight:800;margin-top:.3rem}
.olt-warn{background:#fff6dd;color:#6b4d0e;border-radius:12px;padding:.8rem 1rem;font-weight:700;line-height:1.9;margin-top:.7rem}
.olt-rule{text-align:center;font-weight:700;font-size:.88rem;color:#7a6d74;margin-bottom:.4rem}
.olt-area{position:relative;background:#fff;border:2px solid #E5D7CE;border-radius:16px;padding:1rem .6rem;outline:none;cursor:text;transition:border-color .15s,box-shadow .15s;-webkit-user-select:none;user-select:none}
.olt-area.foc{border-color:#8E1140;box-shadow:0 0 0 4px rgba(142,17,64,.1)}
.olt-area.done{border-color:#1c7a43}
.olt-txt{font:700 1.7rem/2.3 Consolas,'IBM Plex Mono',monospace;letter-spacing:.06em;text-align:center;direction:ltr;overflow-wrap:normal;word-break:normal}
.olt-line{display:block}
.olt-ch{display:inline-block;min-width:.6em;border-radius:5px;color:#9a8f95;transition:color .1s,background .1s}
.olt-ch.ok{color:#1c7a43}
.olt-ch.cur{background:#8E1140;color:#fff;box-shadow:0 2px 0 #5a0b29}
.olt-ch.cur.sp{background:#8E1140}
.olt-ch.err{animation:oltsh .3s;background:#f7b9c6!important;color:#8E1140!important}
.olt-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(255,255,255,.88);border-radius:14px;font-weight:800;color:#8E1140;cursor:pointer;padding:1rem}
.olt-ov[hidden]{display:none}
.olt-stat{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:.7rem 0;font-weight:700;font-size:.88rem;color:#7a6d74}
.olt-stat span{background:#f6efe9;border-radius:20px;padding:.15rem .8rem}.olt-stat b{color:#2A2228;font-variant-numeric:tabular-nums}
.olt-guide{margin-top:.4rem}
.olt-res{border-radius:14px;padding:.8rem 1rem;margin-top:.7rem;text-align:center;font-weight:700;line-height:1.9}
.olt-res[hidden]{display:none}
.olt-res.bad{background:#fdeef1;color:#8E1140}.olt-res.ok{background:#e9f6ee;color:#1c7a43}
.olt-res .olx-btn{margin-top:.5rem}
.olt-chips{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}.olt-chips span{background:rgba(255,255,255,.7);border-radius:20px;padding:.1rem .7rem;font-size:.85rem;color:#2A2228}
@media(max-width:520px){.olt-txt{font-size:1.25rem}.olt-k{width:30px;height:30px}.olt-kb{min-width:300px;--g:3px;padding:4px}.olt-k.mod,.olt-k.shf{font-size:.5rem}.olt-kb.ar .olt-k{font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.olt-fg,.olt-fg *,.olt-ch,.olt-big{animation:none!important;transition:none!important}}
/* المسار العربي: حروف متصلة — بلا inline-block ولا letter-spacing كي لا ينقطع الوصل */
.olt-area.ar .olt-txt{font:700 2rem/2.4 Cairo,system-ui,sans-serif;letter-spacing:0}
.olt-area.ar .olt-ch{display:inline;min-width:0;border-radius:0;padding:.05em 0;animation:none}
.olt-area.ar .olt-ch.sp{padding:.05em .08em}
.olt-area.ar .olt-ch.err{animation:none}
@media(max-width:520px){.olt-area.ar .olt-txt{font-size:1.5rem}}
.olt-kb.ar .olt-k{font:700 .95rem Cairo,system-ui,sans-serif}
.olt-big.ar{font-family:Cairo,system-ui,sans-serif}
.olt-keys{direction:ltr;unicode-bidi:isolate-override}
.olt-tip{font-size:17px;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.olt-guide .olt-hands.sel .olt-fg.on .olt-sk{stroke-width:3.2}
/* شاشات الكمبيوتر الواسعة: يدان وكيبورد ونص أكبر */
@media (min-width:1100px){
 .olt-hbox{max-width:720px}.olt-hbox.sm{max-width:440px}.olt-kbox{max-width:760px}
 .olt-kb{--g:5px}.olt-k{width:46px;height:44px;font-size:.95rem;border-radius:9px}.olt-k.sp{width:300px}.olt-k.shf{width:66px}
 .olt-kb.ar .olt-k{font-size:1.1rem}
 .olt-txt{font-size:2.1rem;line-height:1.9}.olt-area.ar .olt-txt{font-size:2.3rem;line-height:1.95}.olt-area{padding:.6rem}
 .olt-guide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);align-items:center;gap:1rem}.olt-guide .olt-hbox.sm{max-width:none;margin:0}.olt-guide .olt-kbox{margin:0;max-width:none}
 .olt-guide .olt-kb{min-width:0}.olt-guide .olt-k{width:40px;height:40px}.olt-guide .olt-k.sp{width:250px}.olt-guide .olt-k.shf{width:56px}
 .olt-big{font-size:5rem;max-width:240px}
}
@media (min-width:1440px){ .olt-hbox{max-width:800px}.olt-kbox{max-width:860px}.olt-k{width:52px;height:48px}.olt-k.sp{width:340px}.olt-k.shf{width:74px}.olt-guide .olt-k{width:46px;height:44px}.olt-guide .olt-k.sp{width:290px} }
.olt-nm{font:800 17px Cairo,system-ui,sans-serif;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;pointer-events:none}
.olt-nmp{pointer-events:auto;cursor:pointer}   /* أسماء الأصابع قابلة للضغط */
.olt-hn{font:800 16px Cairo,system-ui,sans-serif;fill:#7a6d74;pointer-events:none}
/* رسمة شاشة الشرح + الحروف كمفاتيح ملوّنة */
.olt-illus{margin-top:1rem;padding-top:.8rem;border-top:1px dashed #E5D7CE}
.olt-caps{display:inline-flex;gap:.25rem;vertical-align:middle;direction:ltr;margin:0 .15rem}
.olt-cap{display:inline-grid;place-items:center;min-width:1.9em;height:1.9em;padding:0 .3em;border-radius:7px;border:1.5px solid;border-bottom-width:3px;font:800 .95em Cairo,Consolas,sans-serif;line-height:1}
.olt-cap.g1{background:#FBEAF0;border-color:#D4537E;color:#72243E}.olt-cap.g2{background:#FAEEDA;border-color:#BA7517;color:#633806}.olt-cap.g3{background:#EAF3DE;border-color:#639922;color:#27500A}.olt-cap.g4{background:#E6F1FB;border-color:#378ADD;color:#0C447C}.olt-cap.g5{background:#EEEDFE;border-color:#7F77DD;color:#3C3489}
@media (min-width:1100px){ .olt-illus{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);align-items:center;gap:1rem}.olt-illus .olt-hbox.sm{max-width:none;margin:0}.olt-illus .olt-kbox{margin:0;max-width:none}.olt-illus .olt-kb{min-width:0}.olt-illus .olt-k{width:40px;height:40px}.olt-illus .olt-k.sp{width:250px} }
.olt-big.ar{line-height:1.55;padding:.1rem 0 .2rem}
/* مفاتيح التحكم (Tab · Caps · Enter · Shift · Ctrl …) — خط صغير ثابت مهما كانت لغة الكيبورد */
.olt-kb .olt-k.mod,.olt-kb .olt-k.sp{font:600 .64rem system-ui,sans-serif}
.olt-kb .olt-k.shf{font:700 .66rem system-ui,sans-serif}
@media(max-width:520px){ .olt-kb .olt-k.mod,.olt-kb .olt-k.shf,.olt-kb .olt-k.sp{font-size:.5rem} }
@media(min-width:1100px){ .olt-kb .olt-k.mod,.olt-kb .olt-k.shf,.olt-kb .olt-k.sp{font-size:.72rem} }

/* رسمة وضع اليدين على الكيبورد */
.olt-pose{position:relative;max-width:640px;margin:.8rem auto 0}
.olt-pose .olt-kbox{max-width:none;margin:0;overflow:visible}
.olt-pose-svg{position:absolute;inset:0 0 auto 0;width:100%;pointer-events:none;overflow:visible}
.olt-pose .olt-kbox:has(.lit) .olt-k:not(.lit){opacity:.45}
.olt-pose-lb{font:700 13px Cairo,system-ui,sans-serif;fill:#8a5f3d}
.olt-pose-cap{position:absolute;inset-inline:0;text-align:center;font-size:.92rem;color:#5c4f56;line-height:1.7}
.olt-pose-cap b{color:#8E1140}
@media(max-width:520px){ .olt-pose-lb{font-size:10px} .olt-pose-cap{font-size:.8rem} }
.olt-pose-ct{font-family:Cairo,system-ui,sans-serif;font-weight:800}
/* hands · وضع أسماء الأصابع */
.olt-nwrap{max-width:560px;margin:.5rem auto 0;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.olt-nwrap.two{max-width:760px}
.olt-how{display:inline-flex;align-items:center;gap:.55rem;background:#FFF4E0;color:#6b4d0e;border:1px solid #F1D9A8;border-radius:18px;padding:.4rem 1rem .4rem 1.1rem;font-weight:700;font-size:.98rem;line-height:1.6}
.olt-how svg{flex:none;color:#8E1140}
.olt-nstage{width:100%;display:flex;justify-content:center}
.olt-nhands{display:block;width:100%;max-width:440px;height:auto;overflow:visible}
.olt-nwrap.two .olt-nhands{max-width:800px}
.olt-nf{cursor:pointer;outline:none}
.olt-nf .olt-tint{transition:fill .2s,fill-opacity .2s}
.olt-nf:hover .olt-sk{stroke:#8E1140;stroke-width:2.4}
.olt-nf:focus-visible .olt-sk{stroke:#8E1140;stroke-width:3}
.olt-nf.olt-good{animation:oltpop .45s;transform-box:fill-box;transform-origin:50% 100%}
.olt-ntags text{font:800 15px Cairo,system-ui,sans-serif;pointer-events:none}
.olt-tag{animation:oltin .3s ease both}
@keyframes oltin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.olt-hn2{font:800 15px Cairo,system-ui,sans-serif;fill:#7a6d74}
.olt-hint{pointer-events:none}
.olt-ring{fill:none;stroke:#8E1140;stroke-width:3;opacity:0;animation:oltring 1.6s ease-out infinite}
.olt-ring.r2{animation-delay:.8s}
@keyframes oltring{0%{transform:scale(.45);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.olt-cur{animation:oltcur 1.6s ease-in-out infinite}
@keyframes oltcur{0%,100%{transform:translate(10px,12px)}50%{transform:translate(2px,2px)}}
.olt-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.olt-st{display:inline-flex;align-items:center;gap:.35rem;border:1.5px dashed #DDCFC6;color:#a3969c;background:#fff;border-radius:999px;padding:.15rem .75rem;font-weight:800;font-size:.88rem;transition:all .2s}
.olt-st i{width:9px;height:9px;border-radius:50%;opacity:.35}
.olt-st.done{border-style:solid;border-color:var(--c1);background:var(--c0);color:var(--c2)}
.olt-st.done i{opacity:1}.olt-st.done::after{content:"✓";font-size:.8rem}
.olt-ninfo{min-height:2.2rem;text-align:center;font-weight:700;font-size:1rem;line-height:1.8}
.olt-ninfo small{display:block;font-size:.82rem;color:#7a6d74;font-weight:700}
.olt-ndot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:.35rem;vertical-align:middle}
@media (prefers-reduced-motion:reduce){.olt-ring,.olt-cur,.olt-tag,.olt-nf{animation:none!important}.olt-ring{opacity:.6}}
/* ═══ الكيبورد الواقعي + اليدان تحت الكيبورد (27 أكتوبر 2026) ═══ */
.olt-kb{background:linear-gradient(#3a3f47,#2a2e35);border:0;border-radius:16px;padding:10px;box-shadow:0 8px 20px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08)}
.olt-k{background:linear-gradient(#ffffff,#e8ebf0);border:0;border-radius:8px;box-shadow:0 3px 0 #aeb4bd,0 4px 6px rgba(0,0,0,.25);color:#2b2f36}
.olt-k.mod,.olt-k.sp{background:linear-gradient(#f4f5f7,#dfe2e7);color:#5a616b}
.olt-k.g1,.olt-k.g2,.olt-k.g3,.olt-k.g4,.olt-k.g5{background:linear-gradient(#ffffff,#e8ebf0);border:0}
.olt-k.g1{color:#72243E;box-shadow:inset 0 -4px 0 #D4537E,0 3px 0 #aeb4bd,0 4px 6px rgba(0,0,0,.25)}
.olt-k.g2{color:#633806;box-shadow:inset 0 -4px 0 #BA7517,0 3px 0 #aeb4bd,0 4px 6px rgba(0,0,0,.25)}
.olt-k.g3{color:#27500A;box-shadow:inset 0 -4px 0 #639922,0 3px 0 #aeb4bd,0 4px 6px rgba(0,0,0,.25)}
.olt-k.g4{color:#0C447C;box-shadow:inset 0 -4px 0 #378ADD,0 3px 0 #aeb4bd,0 4px 6px rgba(0,0,0,.25)}
.olt-k.g5{color:#3C3489;box-shadow:inset 0 -4px 0 #7F77DD,0 3px 0 #aeb4bd,0 4px 6px rgba(0,0,0,.25)}
.olt-k.home.g1{background:linear-gradient(#FDF2F6,#F6DCE6)}.olt-k.home.g2{background:linear-gradient(#FDF6EA,#F5E3C6)}.olt-k.home.g3{background:linear-gradient(#F3F9EC,#E0EECD)}.olt-k.home.g4{background:linear-gradient(#F0F7FD,#D7E8F8)}
.olt-k .ka{font:800 1.05em Cairo,system-ui,sans-serif;line-height:1}.olt-k .ke{position:absolute;top:2px;left:4px;font:700 .55em system-ui,sans-serif;color:#8a9099;line-height:1}
.olt-k.bump::after{bottom:7px}
.olt-kbox:has(.lit) .olt-k:not(.lit){opacity:.5}
.olt-k.lit{outline:0;transform:translateY(-2px);color:#fff}
.olt-k.lit .ke{color:rgba(255,255,255,.85)}
.olt-k.lit.g1{background:linear-gradient(#e0739a,#D4537E);box-shadow:0 3px 0 #9c3459,0 0 0 3px rgba(212,83,126,.35),0 0 18px rgba(212,83,126,.7)}
.olt-k.lit.g2{background:linear-gradient(#d4923a,#BA7517);box-shadow:0 3px 0 #7d4e0f,0 0 0 3px rgba(186,117,23,.35),0 0 18px rgba(186,117,23,.7)}
.olt-k.lit.g3{background:linear-gradient(#7cb43c,#639922);box-shadow:0 3px 0 #40661a,0 0 0 3px rgba(99,153,34,.35),0 0 18px rgba(99,153,34,.7)}
.olt-k.lit.g4{background:linear-gradient(#5aa2ea,#378ADD);box-shadow:0 3px 0 #1d5fa3,0 0 0 3px rgba(55,138,221,.35),0 0 18px rgba(55,138,221,.7)}
.olt-k.lit.g5,.olt-k.lit.sp{background:linear-gradient(#9a94e8,#7F77DD);color:#fff;box-shadow:0 3px 0 #4f489e,0 0 0 3px rgba(127,119,221,.35),0 0 18px rgba(127,119,221,.7)}
.olt-k.lit.shf,.olt-k.lit.mod{background:linear-gradient(#e0739a,#D4537E);color:#fff}
/* اليدان الجديدتان */
.olt-rbox{max-width:430px;margin:.5rem auto 0}
.olt-rh .olt-nf{transition:opacity .15s}
.olt-rh.sel .olt-nf{opacity:.45}.olt-rh.sel .olt-nf.on{opacity:1}
.olt-rh .olt-lb{font:800 30px Cairo,system-ui,sans-serif;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.olt-rh .olt-nf.olt-good{animation:oltpop .45s;transform-box:fill-box;transform-origin:50% 100%}.olt-rh .olt-nf.olt-bad{animation:oltsh .4s;transform-box:fill-box}
/* شاشة واحدة (الكمبيوتر): الكيبورد بعرض كامل واليدان تحته في الوسط */
body.olfit .fit-vis.fit-combo>.olt-kbox{grid-column:1/3!important;grid-row:10!important}
body.olfit .fit-vis.fit-combo>.olt-hbox.olt-rbox{grid-column:1/3!important;grid-row:11!important;width:58%!important;max-width:none!important;margin:.4rem auto 0!important}
body.olfit .fit-vis.fit-combo>.olx-act{grid-row:12!important}
body.olfit .olx-card.fitty .olt-guide:has(.olt-rbox){display:flex!important;flex-direction:column;align-items:center;gap:8px}
body.olfit .olx-card.fitty .olt-guide:has(.olt-rbox) .olt-kbox{width:100%}
body.olfit .olx-card.fitty .olt-guide .olt-hbox.olt-rbox{width:48%!important;max-width:none;margin:0 auto}
.olt-guide:has(.olt-rbox){display:flex;flex-direction:column;align-items:center}

.olt-pose .olt-pose-svg{display:none}
.olt-pose .olt-pose-cap{position:static!important;margin-top:.4rem}
.olt-pose .olt-pose-hands{max-width:58%;margin:.5rem auto 0}

/* سطر التركيز: السطر الحالي كبير، والتالي باهت تحته، والمنتهي يختفي */
.olt-txt.olt-focus .olt-line.past,.olt-txt.olt-focus .olt-line.later{display:none}
.olt-txt.olt-focus .olt-line.now{font-size:1.18em}
.olt-txt.olt-focus .olt-line.next{font-size:.62em;opacity:.5;line-height:1.7}
/* النجوم بعد التمرين */
.olt-stars{display:flex;justify-content:center;gap:.35rem;margin:-.1rem 0 .2rem;direction:ltr}
.olt-stars i{font-style:normal;font-size:2.6rem;line-height:1;color:#e6dcd4;text-shadow:0 2px 0 rgba(0,0,0,.06)}
.olt-stars i.on{color:#f2b01e;text-shadow:0 2px 0 #c98a07,0 0 18px rgba(242,176,30,.45);animation:oltStar .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d)}
@keyframes oltStar{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.olt-st-tip{font-size:.85rem;color:#5d5258;margin-top:.35rem}
.olt-res.ok .olx-btn.s{margin-top:.5rem}
@media (prefers-reduced-motion:reduce){.olt-stars i.on{animation:none}}

/* بعد انتهاء التمرين: النتيجة والنجوم مكان الكيبورد واليدين (تعود مع «أعد») */
.olt-wrap.fin>.olt-guide,body.olfit .olx-card.fitty .olt-wrap.fin>.olt-guide{display:none!important}
.olt-wrap.fin>.olt-res{font-size:1.05rem}
.olt-wrap.fin .olt-stars i{font-size:3.4rem}