@import "https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Cairo:wght@400;600;700;800&family=Manrope:wght@300;400;500;600;700;800&display=swap";
.lesson{--red:#e63946;--red-deep:#c62836;--red-soft:#ffe5e8;--blue:#4fc3f7;--blue-deep:#1e88e5;--blue-soft:#e3f4fd;--white:#fff;--ink:#0a1828;--ink-soft:#2c3e50;--paper-warm:#f5f7fa;--line:#e5eaf0;--amber:#f39c12;color:var(--ink);font-family:Manrope,system-ui,sans-serif;line-height:1.65}.lesson .arabic{direction:rtl;unicode-bidi:embed;font-family:Noto Naskh Arabic,Cairo,serif;font-weight:500;line-height:1.9}.lesson .translit{color:var(--blue-deep);font-style:italic;font-weight:500}.lesson .cairo{font-family:Cairo,sans-serif}.lesson .hero{background:linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);color:var(--white);box-shadow:10px 10px 0 var(--ink);border-radius:24px;flex-wrap:wrap;align-items:center;gap:2rem;padding:2.5rem;display:flex;position:relative;overflow:hidden}.lesson .hero:before{content:"ا ب ت ث ج ح خ";opacity:.08;pointer-events:none;white-space:nowrap;font-family:Noto Naskh Arabic,sans-serif;font-size:9rem;font-weight:700;line-height:1;position:absolute;top:-10px;right:-20px}.lesson .hero img{width:150px;height:auto;box-shadow:4px 4px 0 var(--ink);z-index:2;border-radius:12px;position:relative}.lesson .hero-body{z-index:2;flex:1;min-width:260px;position:relative}.lesson .hero-tag{background:var(--white);color:var(--red);text-transform:uppercase;letter-spacing:.12em;border-radius:999px;margin-bottom:.9rem;padding:.35rem .9rem;font-size:.75rem;font-weight:800;display:inline-block}.lesson .hero h2{letter-spacing:-.02em;font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;line-height:1.1}.lesson .hero .subtitle{opacity:.95;max-width:640px;margin-top:.7rem}.lesson .hero .author{opacity:.85;margin-top:.6rem;font-size:.9rem}.lesson .toc-card{background:var(--white);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--blue);border-radius:20px;margin-top:2rem;padding:1.8rem}.lesson .toc-card h3{text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);align-items:center;gap:.7rem;margin-bottom:1.2rem;font-size:.9rem;display:flex}.lesson .toc-card h3:before{content:"";background:var(--red);width:28px;height:3px}.lesson .toc-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem;display:grid}.lesson .toc-item{color:var(--ink);border:2px solid var(--line);border-radius:12px;align-items:center;gap:.9rem;padding:.9rem 1.1rem;text-decoration:none;transition:all .15s;display:flex}.lesson .toc-item:hover{border-color:var(--red);background:var(--red-soft)}.lesson .toc-item.locked{opacity:.65}.lesson .toc-num{background:var(--blue-deep);width:34px;height:34px;color:var(--white);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;font-family:Cairo,sans-serif;font-weight:800;display:flex}.lesson .toc-item.locked .toc-num{background:var(--ink-soft)}.lesson .toc-title{font-size:.95rem;font-weight:600;line-height:1.25}.lesson .sec{margin-top:3.5rem;scroll-margin-top:90px}.lesson .sec-head{border-bottom:3px solid var(--ink);margin-bottom:1.8rem;padding-bottom:1.1rem}.lesson .sec-tag{background:var(--ink);color:var(--white);text-transform:uppercase;letter-spacing:.14em;border-radius:999px;align-items:center;gap:.5rem;margin-bottom:.9rem;padding:.35rem .9rem;font-size:.72rem;font-weight:700;display:inline-flex}.lesson .sec-tag .dot{background:var(--red);border-radius:50%;width:8px;height:8px}.lesson .sec-head h2{letter-spacing:-.02em;font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;line-height:1.1}.lesson .sec-head .lead{color:var(--ink-soft);margin-top:.5rem;font-size:1.1rem}.lesson .sec p{margin:.9rem 0}.lesson .sec p:first-child{margin-top:0}.lesson .rule-box{background:var(--white);border:2px solid var(--line);border-radius:16px;margin:1.3rem 0;padding:1.6rem}.lesson .rule-box.red{border-color:var(--red);background:var(--red-soft)}.lesson .rule-box.blue{border-color:var(--blue-deep);background:var(--blue-soft)}.lesson .rule-box.dark{background:var(--ink);color:var(--white);border-color:var(--ink)}.lesson .rule-label{text-transform:uppercase;letter-spacing:.14em;background:var(--ink);color:var(--white);border-radius:6px;margin-bottom:.9rem;padding:.3rem .8rem;font-size:.72rem;font-weight:800;display:inline-block}.lesson .rule-box.red .rule-label{background:var(--red)}.lesson .rule-box.blue .rule-label{background:var(--blue-deep)}.lesson .rule-box.dark .rule-label{background:var(--red)}.lesson .rule-box h3{margin-bottom:.7rem;font-size:1.3rem;font-weight:700;line-height:1.3}.lesson .rule-box ul,.lesson .rule-box ol{margin:.7rem 0 .7rem 1.4rem}.lesson .rule-box li{margin-bottom:.45rem}.lesson .tip{background:var(--blue-soft);border-left:5px solid var(--blue-deep);border-radius:0 12px 12px 0;margin:1.3rem 0;padding:1.1rem 1.4rem}.lesson .tip strong{color:var(--blue-deep);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}.lesson .warn{border-left:5px solid var(--amber);background:#fff4e0;border-radius:0 12px 12px 0;margin:1.3rem 0;padding:1.1rem 1.4rem}.lesson .warn strong{color:#8a5a00;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}.lesson .fact-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.4rem 0;display:grid}.lesson .fact{background:var(--white);border:2px solid var(--line);border-top:4px solid var(--red);border-radius:14px;padding:1.1rem 1.2rem}.lesson .fact .k{text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:.4rem;font-size:.72rem;font-weight:700}.lesson .fact .v{font-family:Cairo,sans-serif;font-size:1.4rem;font-weight:800}.lesson .fact .v small{color:var(--ink-soft);font-family:Manrope,sans-serif;font-size:.85rem;font-weight:600;display:block}.lesson .letter-grid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:.7rem;margin:1.4rem 0;display:grid}.lesson .letter-card{background:var(--white);border:2px solid var(--ink);text-align:center;cursor:pointer;box-shadow:3px 3px 0 var(--blue);border-radius:12px;flex-direction:column;align-items:center;gap:.15rem;padding:.7rem .3rem;transition:transform .1s;display:flex}.lesson .letter-card .g,.lesson .letter-card .nm,.lesson .letter-card .tr{display:block}.lesson .letter-card:hover{box-shadow:4px 4px 0 var(--blue);transform:translate(-1px,-1px)}.lesson .letter-card.active{background:var(--ink);box-shadow:3px 3px 0 var(--red)}.lesson .letter-card .g{color:var(--ink);font-family:Noto Naskh Arabic,sans-serif;font-size:2.4rem;line-height:1}.lesson .letter-card.emph .g{color:var(--red)}.lesson .letter-card.active .g{color:var(--white)}.lesson .letter-card .nm{margin-top:.35rem;font-size:.72rem;font-weight:700}.lesson .letter-card .tr{color:var(--ink-soft);font-size:.68rem}.lesson .letter-card.active .nm,.lesson .letter-card.active .tr{color:var(--white)}.lesson .letter-detail{background:var(--white);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--blue);border-radius:16px;padding:1.6rem}.lesson .ld-head{flex-wrap:wrap;align-items:center;gap:1.2rem;display:flex}.lesson .ld-glyph{color:var(--ink);font-family:Noto Naskh Arabic,sans-serif;font-size:4.5rem;line-height:1}.lesson .ld-glyph.emph{color:var(--red)}.lesson .ld-forms{grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:1.2rem;display:grid}.lesson .ld-form{background:var(--paper-warm);border:1px solid var(--line);text-align:center;border-radius:10px;flex-direction:column;align-items:center;gap:.3rem;padding:.7rem .3rem;display:flex}.lesson .ld-form .g,.lesson .ld-form .lbl{display:block}.lesson .ld-form .g{color:var(--ink);font-family:Noto Naskh Arabic,sans-serif;font-size:2rem;line-height:1}.lesson .ld-form.emph .g{color:var(--red)}.lesson .ld-form .lbl{color:var(--ink-soft);margin-top:.4rem;font-size:.68rem}.lesson .letter-entry{background:var(--white);border:2px solid var(--line);border-radius:16px;margin-top:1rem;padding:1.3rem 1.5rem;scroll-margin-top:80px}.lesson .letter-entry.emph{border-color:var(--red)}.lesson .le-head{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.lesson .le-glyph{color:var(--ink);text-align:center;min-width:50px;font-family:Noto Naskh Arabic,sans-serif;font-size:3.2rem;line-height:1}.lesson .letter-entry.emph .le-glyph{color:var(--red)}.lesson .le-name{font-size:1.2rem;font-weight:800}.lesson .le-sound{color:var(--blue-deep);font-size:.92rem;font-weight:600}.lesson .le-group{text-transform:uppercase;color:var(--ink-soft);margin-left:auto;font-size:.7rem;font-weight:700}.lesson .le-desc{margin-top:.7rem}.lesson .le-forms{flex-wrap:wrap;gap:.5rem;margin-top:.8rem;display:flex}.lesson .le-form{background:var(--paper-warm);border:1px solid var(--line);text-align:center;border-radius:8px;min-width:64px;padding:.4rem .6rem}.lesson .le-form .g{font-family:Noto Naskh Arabic,sans-serif;font-size:1.6rem;line-height:1;display:block}.lesson .letter-entry.emph .le-form .g{color:var(--red)}.lesson .le-form .lbl{color:var(--ink-soft);margin-top:.25rem;font-size:.62rem;display:block}.lesson .le-ex{background:var(--blue-soft);border-radius:10px;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:.8rem;padding:.6rem .9rem;display:flex}.lesson .le-ex .arabic{font-size:1.5rem}.lesson .le-ex .m{margin-left:auto;font-weight:700}.lesson .le-mnem{margin-top:.7rem;font-size:.92rem}.lesson .le-mnem b{color:var(--blue-deep)}.lesson .le-egypt{color:var(--ink-soft);margin-top:.5rem;font-size:.88rem}.lesson .le-egypt b{color:var(--red-deep)}.lesson .locked-card{background:var(--white);border:2px dashed var(--ink-soft);border-radius:16px;margin-top:1.3rem;padding:1.8rem;position:relative}.lesson .locked-badge{background:var(--ink);color:var(--white);text-transform:uppercase;letter-spacing:.1em;border-radius:999px;padding:.3rem .8rem;font-size:.72rem;font-weight:800;display:inline-block}.lesson .lock-cta{background:var(--red);color:var(--white);box-shadow:4px 4px 0 var(--ink);border-radius:999px;margin-top:1rem;padding:.8rem 1.8rem;font-weight:700;text-decoration:none;transition:transform .1s;display:inline-block}.lesson .lock-cta:hover{transform:translate(-1px,-1px)}.lesson .school-cta{background:linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);color:var(--white);text-align:center;box-shadow:10px 10px 0 var(--ink);border-radius:24px;margin-top:3.5rem;padding:2.5rem}.lesson .school-cta h3{margin-bottom:.7rem;font-size:1.6rem;font-weight:800}.lesson .school-cta a{background:var(--white);color:var(--red);border-radius:999px;margin-top:1.2rem;padding:.8rem 1.8rem;font-weight:700;text-decoration:none;display:inline-block}.lesson .ex-table{border-collapse:separate;border-spacing:0;background:var(--white);border:2px solid var(--ink);border-radius:14px;width:100%;margin:1.3rem 0;overflow:hidden}.lesson .ex-table th{background:var(--ink);color:var(--white);text-align:left;text-transform:uppercase;letter-spacing:.08em;padding:.8rem 1rem;font-size:.8rem;font-weight:700}.lesson .ex-table td{border-top:1px solid var(--line);vertical-align:middle;padding:.85rem 1rem}.lesson .ex-table tr:nth-child(2n) td{background:var(--paper-warm)}.lesson .ex-table .ar-cell{text-align:right;direction:rtl;font-family:Noto Naskh Arabic,sans-serif;font-size:1.5rem;line-height:1.9}.lesson .exercise{background:var(--white);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--blue);border-radius:18px;margin:1.5rem 0;padding:1.6rem}.lesson .ex-head{border-bottom:2px dashed var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem;padding-bottom:.9rem;display:flex}.lesson .ex-head h3{align-items:center;gap:.7rem;font-size:1.2rem;font-weight:700;display:flex}.lesson .ex-badge{background:var(--red);color:var(--white);border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-family:Cairo,sans-serif;font-weight:800;display:inline-flex}.lesson .ex-instruction{background:var(--blue-soft);border-left:4px solid var(--blue-deep);border-radius:0 8px 8px 0;margin-bottom:1rem;padding:.9rem;font-size:1rem}.lesson .ex-list{flex-direction:column;gap:.6rem;display:flex}.lesson .ex-row{background:var(--paper-warm);border-radius:10px;grid-template-columns:36px 1fr 1.4fr;align-items:center;gap:1rem;padding:.8rem 1rem;display:grid}.lesson .ex-num{background:var(--ink);width:30px;height:30px;color:var(--white);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;display:flex}.lesson .ex-a{color:var(--red);border-left:3px solid var(--red);align-items:center;gap:.6rem;padding-left:.8rem;font-weight:700;display:flex}.lesson .ex-a .arabic{color:var(--ink);font-size:1.5rem}.lesson .timer-bar{background:var(--paper-warm);border:2px solid var(--line);border-radius:12px;align-items:center;gap:1rem;margin:1.6rem 0;padding:1rem 1.4rem;display:flex}.lesson .timer-icon{background:var(--red);width:40px;height:40px;color:var(--white);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:800;display:flex}.lesson .cta-card{background:linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);color:var(--white);text-align:center;box-shadow:10px 10px 0 var(--ink);border-radius:24px;margin-top:3.5rem;padding:2.5rem}.lesson .cta-card h3{margin-bottom:.7rem;font-size:clamp(1.4rem,3vw,2rem);font-weight:800}.lesson .cta-card p{opacity:.95;max-width:560px;margin:0 auto 1.4rem}.lesson .cta-buttons{flex-wrap:wrap;justify-content:center;gap:.8rem;display:flex}.lesson .cta-btn{background:var(--white);color:var(--red);border:2px solid var(--white);border-radius:999px;padding:.8rem 1.6rem;font-weight:700;text-decoration:none;transition:all .15s}.lesson .cta-btn.outline{color:var(--white);background:0 0}.lesson .cta-btn:hover{background:var(--ink);color:var(--white)}.lesson .cta-phone{margin-top:1.2rem;font-family:Cairo,sans-serif;font-size:1.3rem;font-weight:800}.lesson .l-footer{background:var(--ink);color:var(--white);text-align:center;border-radius:20px;margin-top:2rem;padding:2.5rem}.lesson .l-footer .flourish{color:var(--red);direction:rtl;margin-bottom:.8rem;font-family:Noto Naskh Arabic,sans-serif;font-size:2rem}.lesson .l-footer p{opacity:.85;font-size:.92rem}.lesson .l-footer a{color:var(--blue);font-weight:600;text-decoration:none}@media (max-width:640px){.lesson .hero{padding:1.6rem}.lesson .ld-forms{grid-template-columns:repeat(2,1fr)}.lesson .ex-row{grid-template-columns:1fr}}