@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/baloo-bhaijaan-2-arabic.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Baloo Bhaijaan 2';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/baloo-bhaijaan-2-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC}
:root{--navy:#1A3365;--orange:#FF9000;--cyan:#00C6FF;--yellow:#FFBB00;--bg:#fff;--muted:#F6F8FC;--mutedfg:#5A6B8A;--border:#DCE3EF;--card:#fff}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--navy);font-family:'Baloo Bhaijaan 2',system-ui,sans-serif;line-height:1.85;font-size:17px}
a{color:inherit}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
header.top{border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:5}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
header.top img{height:36px;width:auto;display:block}
header.top nav{display:flex;gap:18px;font-size:15px}header.top nav a{text-decoration:none;color:var(--mutedfg)}header.top nav a:hover{color:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;text-decoration:none;font-weight:800;padding:12px 22px;border-radius:14px;font-size:16px;border:0;cursor:pointer;font-family:inherit;box-shadow:0 5px 0 #C46A00;transform:translateY(0);transition:transform .1s,box-shadow .1s;-webkit-tap-highlight-color:transparent}
.btn:hover{filter:brightness(1.04)}.btn:active{transform:translateY(5px);box-shadow:0 0 0 #C46A00}
.btn.alt{background:var(--cyan);color:#fff;box-shadow:0 5px 0 #0093C2}.btn.alt:active{box-shadow:0 0 0 #0093C2}
.btn svg{width:20px;height:20px;flex:none}
.crumbs{font-size:14px;color:var(--mutedfg);margin:22px 0 6px}.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--orange)}
h1{font-family:'Baloo Bhaijaan 2',system-ui,sans-serif;font-weight:800;font-size:clamp(28px,5vw,42px);line-height:1.35;margin:8px 0 12px}
h2{font-size:22px;margin:36px 0 12px}
.lead{font-size:19px;color:var(--mutedfg);margin:0 0 20px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}.pill{background:var(--muted);border:1px solid var(--border);border-radius:999px;padding:3px 14px;font-size:14px}
.hero{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:var(--muted);border:1px solid var(--border);border-radius:24px;padding:24px;margin:8px 0 8px}
.key{width:120px;height:120px;border-radius:28px;background:var(--yellow);display:grid;place-items:center;color:#1A3365;text-decoration:none;box-shadow:0 8px 0 #D99800;transition:transform .1s,box-shadow .1s;-webkit-tap-highlight-color:transparent}
.key:active{transform:translateY(8px);box-shadow:0 0 0 #D99800}.key svg{width:62px;height:62px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.q{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px 18px;margin:0 0 12px}
.q b{display:block;margin-bottom:8px}.q ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.q li{background:var(--muted);border-radius:10px;padding:6px 12px;font-size:15px}.q li span{color:var(--orange);font-weight:700;margin-inline-end:6px}
.q details{margin-top:8px;font-size:15px;color:var(--mutedfg)}.q summary{cursor:pointer;color:var(--orange);font-weight:700}
ol.steps{padding-inline-start:22px}ol.steps li{margin-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;padding:0;list-style:none;margin:0}
.grid a{display:block;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 14px;text-decoration:none;font-size:15px}
.grid a:hover{border-color:var(--orange)}.grid small{display:block;color:var(--mutedfg);font-size:13px}
.unit{margin:0 0 26px}.unit h3{font-size:18px;margin:0 0 10px;color:var(--orange)}
.faq details{border-bottom:1px solid var(--border);padding:10px 0}.faq summary{cursor:pointer;font-weight:700}
.nav2{display:flex;justify-content:space-between;gap:10px;margin:30px 0 0;font-size:15px}.nav2 a{text-decoration:none;color:var(--mutedfg)}
footer{margin-top:56px;border-top:1px solid var(--border);background:var(--muted);font-size:14px;color:var(--mutedfg)}footer .wrap{padding-top:22px;padding-bottom:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
footer a{text-decoration:none}
.lesson-article h2{color:var(--navy)}.lesson-article h2::before{content:"";display:inline-block;width:10px;height:12px;background:var(--orange);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);margin-inline-end:10px}
.lab3d{margin:26px 0 8px;background:#EEF5FD;border-radius:24px;padding:18px;color:var(--navy)}
.lab3d-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}.lab3d-head h2{margin:0;font-size:21px;color:var(--navy)}.lab3d-head p{margin:2px 0 0;font-size:15px;color:#5B6B8C;line-height:1.7}
.lab3d-badge{flex:none;width:46px;height:52px;display:grid;place-items:center;background:var(--orange);color:#fff;font-weight:800;font-size:16px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.lab3d-stage{position:relative;width:100%;height:clamp(420px,56vw,580px);border-radius:16px;overflow:hidden;background:#E2EEFB}
.lab3d-stage img,.lab3d-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:block}
.lab3d-play{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#fff;border:0;border-radius:18px;padding:16px 28px;font:800 19px 'Baloo Bhaijaan 2',system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 0 #C46A00,0 12px 40px rgba(0,0,0,.45)}
.lab3d-play svg{width:26px;height:26px}a.lab3d-play{text-decoration:none}.lab3d-play:active{transform:translate(-50%,6px);box-shadow:0 0 0 #C46A00}
.lab3d-foot{margin:10px 0 0;font-size:14px;color:#5B6B8C}.lab3d-foot a{color:#0080B5;font-weight:700}
@media (max-width:640px){.lab3d{padding:12px;border-radius:18px;margin-inline:-6px}.lab3d-stage{height:min(130vw,600px)}.lab3d-head h2{font-size:18px}}
.quiz{margin-top:36px}.quiz-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.quiz-head h2{margin:0}
.quiz .q li{padding:0;background:none}.quiz .q button{all:unset;box-sizing:border-box;display:block;width:100%;cursor:pointer;background:var(--muted);border:2px solid transparent;border-radius:10px;padding:6px 12px;font-size:15px}
.quiz .q button:hover{border-color:var(--border)}.quiz .q button.ok{background:#E6F6EC;border-color:#2E9E5B}.quiz .q button.no{background:#FDECEE;border-color:#E23744}
.quiz .why{margin:8px 0 0;font-size:15px;color:var(--mutedfg)}.score{font-weight:700;color:var(--orange)}.print-only{display:none}
.video{margin:26px 0 8px}.video h2{margin:0 0 12px}.video-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0B1730}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video p{margin:8px 0 0;font-size:14px;color:var(--mutedfg)}
.notes h3{font-size:18px;margin:18px 0 6px;color:var(--orange)}.notes ul{padding-inline-start:22px;margin:0}.notes li{margin-bottom:4px}
.terms{width:100%;border-collapse:collapse;font-size:15px;margin:4px 0 0}.terms th,.terms td{border-bottom:1px solid var(--border);padding:8px 10px;text-align:start;vertical-align:top}
.terms th{color:var(--mutedfg);font-weight:700;font-size:14px}.terms td:first-child{font-weight:700;white-space:nowrap}.terms .en{direction:ltr;unicode-bidi:isolate;color:var(--mutedfg);font-size:13px;display:block;font-weight:400}
@media print{.lab3d,.video,.notes,header.top,footer,.hero .cta,.key,.nav2,.faq,.grid,.crumbs,.print-btn,.score,.lesson-article,main>h2,main>ol.steps,.unit,.sample-note{display:none!important}
 body{font-size:13pt}.hero{background:none;border:0;padding:0}.print-only{display:block}.quiz .q{break-inside:avoid;border:1px solid #999}.quiz .q button{background:none;border:0}.quiz .why{display:none}.answer-key{break-before:page}}
@media (max-width:640px){header.top nav{display:none}.hero{grid-template-columns:1fr}.key{display:none}.q ol{grid-template-columns:1fr}}