#nq-lesson1-wrapper{font-family:'Traditional Arabic','Scheherazade',serif;background-color:#f9fafb;padding:20px;border-radius:15px;direction:rtl;text-align:center;max-width:1000px;margin:0 auto;box-sizing:border-box}#nq-lesson1-wrapper *{box-sizing:border-box}#nq-lesson1-wrapper .header-images{display:flex;flex-direction:column;align-items:center;gap:15px;margin-bottom:20px}#nq-lesson1-wrapper .basmalah-img{max-width:80%;height:auto;cursor:pointer;transition:transform 0.2s}@media (min-width:768px){#nq-lesson1-wrapper .basmalah-img{max-width:50%}}#nq-lesson1-wrapper .title-row{display:flex;justify-content:center;align-items:center;gap:15px;width:100%}#nq-lesson1-wrapper .lesson-title-img{max-width:55%;height:auto;cursor:pointer;transition:transform 0.2s}#nq-lesson1-wrapper .lesson-number-img{max-width:25%;height:auto;cursor:pointer;transition:transform 0.2s}#nq-lesson1-wrapper .basmalah-img:hover,#nq-lesson1-wrapper .lesson-title-img:hover,#nq-lesson1-wrapper .lesson-number-img:hover{transform:scale(1.05);opacity:.9}#nq-lesson1-wrapper .controls-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;margin-bottom:25px;background:#fff;padding:15px;border-radius:12px;border:1px solid #e5e7eb;box-shadow:0 2px 5px rgb(0 0 0 / .03);direction:ltr}#nq-lesson1-wrapper .control-group{display:flex;align-items:center;gap:8px}#nq-lesson1-wrapper .control-label{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:14px;font-weight:600;color:#4b5563}#nq-lesson1-wrapper .voice-btn{padding:8px 16px;border:1px solid #e5e7eb;background:#f9fafb;border-radius:8px;cursor:pointer;font-family:sans-serif;font-size:14px;font-weight:600;color:#4b5563;transition:all 0.2s;display:flex;align-items:center;gap:5px}#nq-lesson1-wrapper .voice-btn:hover{background:#f3f4f6}#nq-lesson1-wrapper .voice-btn.active{background:#e0f2fe;border-color:#3b82f6;color:#1d4ed8}#nq-lesson1-wrapper .toggle-switch{position:relative;display:inline-block;width:44px;height:24px}#nq-lesson1-wrapper .toggle-switch input{opacity:0;width:0;height:0}#nq-lesson1-wrapper .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:34px}#nq-lesson1-wrapper .slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}#nq-lesson1-wrapper input:checked+.slider{background-color:#2563eb}#nq-lesson1-wrapper input:checked+.slider:before{transform:translateX(20px)}#nq-lesson1-wrapper .divider-v{width:1px;height:24px;background:#e5e7eb;margin:0 5px}#nq-lesson1-wrapper .autoplay-btn{background-color:#2563eb;color:#fff;padding:10px 30px;border-radius:50px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:600;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 10px rgb(37 99 235 / .3);margin-bottom:30px;border:none;white-space:nowrap}#nq-lesson1-wrapper .autoplay-btn:hover{background-color:#1d4ed8;transform:translateY(-2px)}#nq-lesson1-wrapper .autoplay-btn.playing{background-color:#dc2626;box-shadow:0 4px 10px rgb(220 38 38 / .3)}#nq-lesson1-wrapper .letters-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}@media (min-width:640px){#nq-lesson1-wrapper .letters-grid{grid-template-columns:repeat(5,1fr);gap:15px}}@media (min-width:1024px){#nq-lesson1-wrapper .letters-grid{grid-template-columns:repeat(6,1fr);gap:20px}}#nq-lesson1-wrapper .letter-card{background-color:#fff;border:2px solid #e5e7eb;border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.2s ease;aspect-ratio:1 / 1;display:flex;justify-content:center;align-items:center;position:relative;box-shadow:0 2px 4px rgb(0 0 0 / .05)}#nq-lesson1-wrapper .letter-card:hover{border-color:#3b82f6;transform:translateY(-3px);box-shadow:0 10px 15px -3px rgb(0 0 0 / .1);z-index:10}#nq-lesson1-wrapper .letter-card.active{border-color:#22c55e;border-width:3px;box-shadow:0 0 0 4px rgb(34 197 94 / .2);background-color:#f0fdf4;transform:scale(1.05);z-index:10}#nq-lesson1-wrapper .letter-card.repeating{border-color:#f97316;border-width:3px;box-shadow:0 0 0 4px rgb(249 115 22 / .2);background-color:#fff7ed;transform:scale(1.05);z-index:10}#nq-lesson1-wrapper .letter-image{width:85%;height:85%;object-fit:contain;pointer-events:none}