@font-face{font-family:Tajawal;src:url(Tajawal-Regular.ttf)}@font-face{font-family:Tajawal;src:url(Tajawal-Bold.ttf);font-weight:700}*{box-sizing:border-box}body{margin:0;background:#0d2939;color:#f1f8fa;font:19px/1.95 Tajawal,sans-serif}main{max-width:980px;margin:auto;padding:26px 22px 64px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;font-size:15px}header img{width:190px;max-width:48%;height:auto}h1{font-size:clamp(29px,5vw,44px);line-height:1.45;margin:14px 0 20px}h2{font-size:27px;line-height:1.55;margin:0 0 20px}h3{font-size:21px;line-height:1.6;margin:0 0 12px}p{margin:14px 0}section,.hero{background:#173b4d;border:1px solid #4a8796;border-radius:18px;padding:30px;margin-block:20px}.hero{border-top:5px solid #69cfc9}.eyebrow{color:#69cfc9;font-weight:700;font-size:16px}.hero ul{margin-bottom:0}ul,ol{padding-inline-start:28px}li{margin:12px 0}aside,blockquote{padding:20px;background:#0d2939;border-inline-start:4px solid #69cfc9;border-radius:10px;margin:24px 0}.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}.compare article{border:1px solid #4a8796;border-radius:12px;padding:20px}dt{font-weight:700;margin-top:18px}dd{margin-inline-start:0}fieldset{border:0;padding:0;margin-block:24px 32px;min-width:0}legend{font-weight:700;width:100%;margin-bottom:16px;line-height:1.8}label.choice{display:flex;align-items:flex-start;gap:12px;padding:17px;border:1px solid #4a8796;border-radius:12px;margin-block:12px;cursor:pointer}input[type=radio]{margin:8px 0 0;flex-shrink:0;accent-color:#ffa41f;width:18px;height:18px}button{font:700 18px/1.6 Tajawal,sans-serif;min-height:48px;padding:12px 24px;border-radius:12px;cursor:pointer;background:#ffa41f;color:#10293b;border:0}button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ffad29;outline-offset:4px}.feedback{padding:18px;border-radius:12px;background:#0d2939;margin-block:20px;line-height:1.85}.feedback:empty{display:none}.feedback p{margin:8px 0}.error{color:#ffb4b4}.success{color:#91ebe3}details summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;border:1px solid #4a8796;border-radius:12px}summary:after{content:'+';font-size:25px;line-height:1;width:30px;min-height:30px;display:grid;place-items:center;flex-shrink:0}details[open]>summary:after{content:'−'}textarea{width:100%;min-height:160px;font:18px/1.8 Tajawal,sans-serif;color:#f1f8fa;border:1px solid #829fbe;border-radius:10px;padding:16px;resize:vertical;margin-block:14px}.exercise-label{display:block;font-weight:700;margin-top:18px}.sample-answer{margin-top:18px}footer{font-size:15px;padding:12px 0}a{color:#ffc36c;text-underline-offset:4px}bdi{display:inline-block}section{scroll-margin-top:20px}@media(max-width:600px){body{font-size:18px}main{padding:18px 14px 40px}section,.hero{padding:22px 18px}.compare{grid-template-columns:1fr}h2{font-size:24px}header{align-items:center}header img{width:145px}}
h2,summary,.eyebrow{color:#91ebe3}textarea{background:#0d2939;color:#f1f8fa}label.choice:has(input:checked){background:#20505f;border-color:#69cfc9}

audio{display:block;width:100%;margin-block:18px}select{display:block;width:100%;min-height:50px;margin-block:10px 22px;padding:10px;border:1px solid #4a8796;border-radius:10px;background:#0d2939;color:#f1f8fa;font:18px/1.8 Tajawal,sans-serif}label{display:block}textarea[readonly]{background:#0d2939;min-height:230px}header strong{color:#91ebe3}#answer-details article{padding:16px 0;border-bottom:1px solid #4a8796}#copy-status:empty{display:none}.answer-correct{color:#91ebe3}.answer-wrong{color:#ffb4b4}audio:focus-visible,select:focus-visible{outline:3px solid #ffad29;outline-offset:4px}body.embedded header{display:none}body.embedded main{padding-top:10px}p,li,dd{overflow-wrap:break-word}button{max-width:100%}button:disabled{opacity:.65}
/* Visual review v2: short steps in the established academy palette. */
[hidden]{display:none!important}.hero{padding:24px}.hero h1{font-size:clamp(26px,3.4vw,36px);margin-block:8px 12px}.hero p{margin-block:8px}.visual-story{display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr;align-items:center;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid #4a8796}.story-item{text-align:center}.story-item svg{display:block;width:100%;max-width:160px;height:105px;margin:auto}.story-item strong,.story-item span{display:block}.story-item strong{font-size:18px;color:#91ebe3}.story-item span{font-size:15px;line-height:1.6}.story-arrow{color:#ffa41f;font-size:26px;text-align:center}.lesson-nav{display:flex;flex-wrap:wrap;gap:8px;scroll-margin-top:15px}.lesson-nav button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 140px;padding:9px 12px;min-height:48px;font-size:16px;background:#173b4d;color:#f1f8fa;border:1px solid #4a8796}.lesson-nav button span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#0d2939;color:#91ebe3;flex-shrink:0}.lesson-nav button[aria-current]{border-color:#ffa41f;color:#ffc36c;background:#0d2939}.stage-status{font-size:15px;color:#91ebe3;margin-block:12px 4px}.lesson-stage{animation:ga-stage-in .24s ease-out}.lesson-stage section:first-child{margin-top:10px}.stage-controls,.quiz-navigation{display:flex;justify-content:space-between;gap:12px;margin-top:20px}.secondary{background:transparent;color:#91ebe3;border:1px solid #4a8796}button:disabled{cursor:default;opacity:.45}.concept-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.concept-card{background:#0d2939;border:1px solid #4a8796;border-radius:12px}.concept-card summary{border:0;padding:16px;justify-content:start;align-items:center;gap:14px}.concept-card summary:after{margin-inline-start:auto}.concept-card strong{display:block;font-size:20px}.concept-card small{display:block;font-size:16px;font-weight:400;color:#f1f8fa}.concept-card .card-number{font-size:21px;color:#ffc36c}.concept-card p{padding:0 18px 15px;margin:0;font-size:17px;line-height:1.8}.extra-note{margin-top:16px}.builder-counter{font-size:16px;color:#91ebe3}.builder-meter{height:7px;border-radius:10px;background:#0d2939;margin-block:10px 24px;overflow:hidden}.builder-meter span{display:block;width:0;height:100%;background:#69cfc9;transition:width .25s ease}label.choice{transition:background-color .18s,border-color .18s,transform .18s}label.choice:has(input:checked){transform:translateY(-2px)}.feedback:not(:empty){animation:ga-stage-in .22s ease-out}body:not([data-stage="0"]) .visual-story{display:none}#question-note{font-size:16px;color:#ffc36c}#question-note:empty{display:none}@keyframes ga-stage-in{from{opacity:.4;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.visual-story{gap:3px;grid-template-columns:1fr 14px 1fr 14px 1fr}.story-item svg{height:73px}.story-item strong{font-size:15px}.story-item span{font-size:12px}.story-arrow{font-size:20px}.hero{padding:20px 16px}.concept-cards{grid-template-columns:1fr}.lesson-nav button{flex-basis:95px;font-size:15px;padding:8px;gap:6px}.stage-controls button,.quiz-navigation button{font-size:16px;padding:10px 14px}.compare article{padding:16px}fieldset{margin-block:18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the reading accordion visually separate from the worked-example cards in every course. */
details + .compare{margin-block-start:24px}

/* Separate the introduction diagram or cards from the part-navigation borders. */
.lesson-nav{margin-block-start:24px}