/* Foundation's approved soft-sage theme. The original lesson library is isolated. */
:root{--ink:#28352f;--muted:#52645a;--paper:#fafaf5;--card:#fff;--line:#d8e0d5;--green:#355449;--lime:#edf3e7;--amber:#75582f;--soft:#eff3ec;--sage:#8fa58b}
body{line-height:1.5}
h1{font-size:clamp(1.8rem,3.6vw,2.6rem);letter-spacing:-.035em}
h2{font-size:1.35rem;font-weight:600}
button,.button{border-radius:8px;min-height:44px;padding:10px 16px;transition:background-color .15s,border-color .15s;font-weight:550}
button:hover:not(:disabled),.button:hover{background:var(--soft);border-color:var(--sage)}
.primary:hover:not(:disabled){background:#29463b;color:#fff}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--green)}
.text-button{background:transparent;border-color:transparent;font-size:.875rem;padding:8px}
.shell{grid-template-columns:216px minmax(0,1fr)}
.shell>aside{background:var(--soft);border-right:0;padding:28px 20px;gap:24px}
.brand{font-size:30px}.brand>span{color:var(--sage)}.brand small{font-size:.8125rem}
.course-label,.eyebrow{font-size:.75rem;letter-spacing:.075em}
nav{gap:9px}nav a{padding:10px 12px;font-size:.875rem;font-weight:500}
nav a.active{background:#dfe8d9}nav a:hover{background:#e5ecdf}
nav small{font-size:.8125rem}.library-link{font-size:.875rem}.aside-note{font-size:.875rem}
.topbar{padding:16px 5%;font-size:.75rem}.topbar a{font-size:.875rem}
main{padding:32px 5%;max-width:1250px}
footer{font-size:.75rem;padding:16px 5%}
.card,.word-card{background:transparent;border:0;border-radius:0;padding:22px 0}
.card+.card{border-top:1px solid var(--line)}
.grid{gap:36px}.grid>.card+.card{border-top:0}
.hero{background:var(--soft);color:var(--ink);border-radius:10px;padding:26px 28px;margin:22px 0;grid-template-columns:1fr 110px}
.hero p,.hero .eyebrow{color:var(--muted)}.hero h2{font-size:1.8rem}
.hero .primary{background:var(--green);color:white}
.progress-orb{height:98px;width:98px;border-width:5px;border-color:#afc0a7}
.progress-orb strong{font-size:1.5rem}.progress-orb span{font-size:.75rem}
.pilot{border:0;border-left:2px solid #b8c6b0;background:transparent;border-radius:0;color:var(--muted);padding:7px 12px;font-size:.8125rem;line-height:1.45}
.pill{background:var(--soft);font-size:.75rem;padding:3px 9px}
.episode-picker{margin:12px 0 24px}.episode-button-grid{gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
.episode-shortcut{border-color:var(--line);background:transparent;min-height:74px}
.episode-shortcut span{font-size:.875rem;white-space:normal;line-height:1.35}
.episode-shortcut small{font-size:.8125rem;white-space:normal}
.episode-shortcut strong{font-size:.875rem}.episode-shortcut.done{background:#e8efdf}
.episode p{font-size:.875rem}.episode-number{background:var(--soft);border-radius:8px}
.muted{font-size:.875rem}.lead{font-size:1rem}.chapter-title{gap:12px}
.help{background:transparent;padding:0;border-radius:0}
.word-card{border-bottom:1px solid var(--line);padding:16px 8px}
.word-grid{gap:22px}.word-card .sprite{max-width:100px}.word-card .colour-swatch{height:60px}
.word-card .arabic{margin:6px 0}.word-card .row{gap:0}
.characters{max-height:180px}
.lesson-card,.learning .lesson-card{max-width:950px;background:transparent;border:0;border-radius:0;padding:12px 0;margin:10px auto}
main.learning,main.exercise-view{padding-top:16px;padding-bottom:16px}
.lesson-heading{max-width:950px;margin:0 auto}
.lesson-heading .row{gap:8px}.lesson-heading h1,.learning h1{font-size:1.55rem;line-height:1.2;margin:8px 0}
.steps,.learning .steps{gap:12px;margin:10px 0 14px;font-size:.8125rem}
.steps li{border-radius:0;background:transparent;padding:4px 0;color:var(--muted);border-bottom:2px solid transparent}
.steps .current{background:transparent;color:var(--green);border-color:var(--green);font-weight:700}
progress{height:5px;display:block;border:0;border-radius:4px;overflow:hidden;background:var(--line);accent-color:var(--sage)}
progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--sage)}progress::-moz-progress-bar{background:var(--sage)}
.exercise-card>.row{margin-bottom:8px;gap:8px}.exercise-card>.row p{margin:0}
.exercise-workspace{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(280px,1.2fr);gap:28px;align-items:start;margin-top:18px}
.exercise-body{min-width:0}.exercise-body .question{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;line-height:1.35;margin:0 0 8px}
.exercise-body>.arabic{font-size:1rem;line-height:1.6;margin:4px 0 10px}
.exercise-body>details{margin:4px 0 10px;font-size:.875rem}
.exercise-body>.context{font-size:1rem;line-height:1.45;padding:9px 12px;margin:0 0 10px;border-left:2px solid var(--sage);border-radius:0;background:var(--soft)}
.exercise-body>.pilot{margin:6px 0;padding:4px 8px;font-size:.75rem}
.exercise-body>.row{gap:4px;margin:4px 0}
.options{gap:8px;margin:12px 0}
.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.option{min-width:0;min-height:52px;padding:10px 12px;font-size:1rem;font-weight:500;line-height:1.4;justify-content:center;text-align:center;background:transparent;overflow-wrap:anywhere}
.option:hover:not(:disabled){background:var(--soft);border-color:var(--sage)}
.exercise-help{gap:4px;justify-content:space-between;margin:0}
.exercise-help .text-button{font-size:.8125rem;min-height:40px;padding:6px 2px;text-align:left}
.answer-feedback{min-height:68px;display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:8px}
.answer-feedback:empty{margin-top:0}
.answer-feedback .feedback{background:transparent;border-left:2px solid var(--sage);border-radius:0;padding:4px 10px;margin:0;flex:1;min-width:0;font-size:.875rem}
.answer-feedback .feedback.error{border-color:#b4774e;background:transparent}
.answer-feedback .context{font-size:1rem;line-height:1.4;border:0;background:transparent;padding:0;margin:4px 0 0;border-radius:0}
.answer-feedback>.primary{flex-shrink:0}.answer-feedback .help{margin:4px 0}
.match-row{display:grid;grid-template-columns:minmax(70px,.65fr) minmax(0,1.35fr);align-items:center;gap:10px}
.match-row label{margin:0;font-size:1rem}.match-row select{min-width:0;min-height:44px;padding:8px;font-size:1rem}
.tokens{gap:6px;margin:0;min-height:44px}.tokens button{padding:6px 10px;min-width:40px;font-size:1rem}.sentence-box{border:1px dashed #9bae93;background:transparent;padding:7px}
.question-illustration{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;min-height:0;max-width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible}
.speaker-sketch{display:grid;justify-items:center;position:relative;min-width:0;width:150px;flex:0 1 150px}
.speaker-sketch .character-pose{width:100px;height:auto;aspect-ratio:3/4;mix-blend-mode:multiply}
.speech-bubble{position:relative;min-height:40px;width:100%;padding:8px 12px;border:1px solid #a8b99e;border-radius:16px;background:white;line-height:1.4;font-size:1rem;text-align:center;margin-bottom:12px;color:var(--ink)}
.speech-bubble:after{content:'';position:absolute;bottom:-7px;left:32%;width:12px;height:12px;background:white;border-right:1px solid #a8b99e;border-bottom:1px solid #a8b99e;transform:skewY(-25deg) rotate(45deg)}
.speaker-name{font-size:.8125rem;color:var(--muted);margin-top:2px}
.scene-prop{display:flex;align-items:center;justify-content:center;padding:0;flex:1 1 140px;max-width:230px;min-width:0}
.sprite{mix-blend-mode:multiply}.picture-scene{background:transparent;border-radius:0;margin:0}
.scene-prop .picture-scene .sprite,.learning .scene-prop .picture-scene .sprite{width:160px;max-width:100%}
.scene-prop .count-scene{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;background:transparent;padding:0}
.scene-prop .count-scene .sprite{width:100%;max-width:52px;border:0;border-radius:0}
.scene-prop .distance-scene{height:180px;max-width:210px;background:var(--soft);border:0;border-radius:8px}
.scene-prop .near .sprite{width:62px}.scene-prop .far .sprite{width:35px}
.scene-prop .distance-objects{background:transparent}.scene-prop .viewer{font-size:.8125rem;bottom:6px}
.scene-prop .near .distance-objects{bottom:32px}.scene-prop .far .distance-objects{top:8px}
.scene-prop .owner-scene{border:0;margin:0;width:145px}.scene-prop .owner-scene .sprite{max-width:110px}
.scene-prop .owner-scene figcaption{font-size:.875rem;background:transparent;padding:2px}
.scene-prop .colour-swatch{height:85px;max-width:130px;border-radius:8px}
.cartoon-story{display:flex;justify-content:center;align-items:center;gap:25px;margin:18px auto;max-width:650px}
.cartoon-story .speaker-sketch{width:260px;flex-basis:260px}.cartoon-story .character-pose{width:135px}
.cartoon-story .speech-bubble{font-size:1.25rem}.story-prop{max-width:180px;flex:1;min-width:0}
.story-prop .sprite,.learning .story-prop .sprite{width:160px;max-width:100%}.story-prop .count-scene{padding:0;background:transparent;gap:6px;grid-template-columns:repeat(5,minmax(0,1fr))}
.narrated-story .sprite,.learning .narrated-story .sprite{width:160px;max-width:100%}
.story-slide>.arabic{margin:8px 0}.story-slide>.row{justify-content:center;gap:6px}
.live .question-illustration{min-height:0;max-width:600px;margin:20px auto}.live .speaker-sketch{width:220px;flex-basis:220px}.live .character-pose{width:150px}
.live .question{font-size:clamp(1.5rem,3vw,2.5rem)}
body:has(main.exercise-view) footer{display:none}
@media(min-width:1000px){.exercise-workspace{grid-template-columns:minmax(260px,1fr) minmax(340px,1.2fr);gap:36px}.question-illustration{padding-top:12px}}
@media(max-width:950px){.shell{grid-template-columns:185px minmax(0,1fr)}.shell>aside{padding:24px 14px}.episode-button-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.exercise-workspace{grid-template-columns:minmax(130px,.6fr) minmax(210px,1fr);gap:18px}.speaker-sketch{width:130px;flex-basis:130px}.scene-prop{flex-basis:120px}.grid{gap:12px}}
@media(max-width:650px){
 .shell{display:block}.shell>aside{padding:12px 16px;gap:10px;background:var(--paper);border-bottom:1px solid var(--line)}
 .brand{font-size:25px}.brand div{font-size:.875rem}.brand small{font-size:.75rem}.menu-toggle{min-height:44px;border:0;background:transparent}
 .topbar{padding:8px 5%;font-size:.75rem}.topbar a{font-size:.8125rem}
 main,main.learning,main.exercise-view{padding:14px 5%}.hero{padding:20px;grid-template-columns:1fr}.hero h2{font-size:1.5rem}
 .episode-button-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.episode-shortcut{padding:8px;min-height:78px}
 .lesson-heading h1,.learning h1{font-size:1.3rem;margin:4px 0 6px}.lesson-heading .text-button{padding:4px 0;min-height:32px}
 .steps,.learning .steps{gap:10px;margin:5px 0 8px;font-size:.75rem}
 .lesson-card,.learning .lesson-card{padding:5px 0;margin:0 auto}
 .exercise-card>.row{margin:4px 0 6px}.exercise-card>.row .eyebrow{font-size:.75rem}
 .exercise-workspace{grid-template-columns:1fr;gap:10px;margin-top:8px}
 .question-illustration{flex-wrap:nowrap;gap:16px;justify-content:center;max-width:360px;width:100%;margin:auto}
 .speaker-sketch{width:112px;flex:0 0 112px}.speaker-sketch .character-pose{width:68px}
 .speech-bubble{min-height:30px;margin-bottom:8px;padding:5px 8px;border-radius:12px}
 .speaker-name{font-size:.75rem;margin:0}
 .scene-prop{flex:0 1 160px;max-width:170px}.scene-prop .picture-scene .sprite,.learning .scene-prop .picture-scene .sprite{width:125px}
 .scene-prop .count-scene{gap:4px}.scene-prop .count-scene .sprite{max-width:40px}
 .scene-prop .distance-scene{height:142px}.scene-prop .near .sprite{width:48px}.scene-prop .far .sprite{width:28px}
 .scene-prop .owner-scene .sprite{width:88px}.scene-prop .colour-swatch{height:70px;width:110px}
 .exercise-body .question,.learning .exercise-body .question{font-size:1.125rem;margin:0 0 4px;line-height:1.4}
 .exercise-body>.arabic{font-size:.9375rem;line-height:1.45;margin:4px 0 6px}
 .exercise-body>.context{font-size:1rem;padding:6px 10px;margin-bottom:8px}
 .options{margin:8px 0;gap:7px}.option{min-height:46px;padding:8px 10px;font-size:1rem}
 .exercise-help{gap:4px;flex-wrap:nowrap}.exercise-help .text-button{flex:1;font-size:.75rem;min-height:36px;line-height:1.4;padding:4px 0}
 .answer-feedback{min-height:56px;margin-top:4px;gap:8px}.answer-feedback>.primary{padding:8px 12px;font-size:.875rem;min-height:44px}
 .exercise-body>.row{margin:0}.exercise-body>.row .text-button{font-size:.8125rem;min-height:36px;padding:5px}
 .cartoon-story{gap:16px;margin:12px 0}.cartoon-story .speaker-sketch{flex:1 1 170px}.cartoon-story .character-pose{width:100px}.cartoon-story .speech-bubble{font-size:1.125rem}
 .story-prop{max-width:125px}.story-prop .sprite,.learning .story-prop .sprite{width:125px}
 .word-grid{gap:12px}.word-card{padding:12px 4px}.word-card .word{font-size:1.25rem}
 .live .question-illustration{margin:12px auto}.live .speaker-sketch{flex-basis:125px}.live .character-pose{width:95px}
}
@media(max-height:760px) and (max-width:650px){
 body:has(main.exercise-view) .brand small{display:none}
 body:has(main.exercise-view) .shell>aside{padding-top:5px;padding-bottom:5px}
 main.exercise-view{padding-top:7px;padding-bottom:7px}
 .exercise-view .lesson-heading h1{font-size:1.15rem}.exercise-view .steps{margin:3px 0 5px;gap:8px}
 .exercise-view .speaker-sketch .character-pose{width:52px}.exercise-view .speech-bubble{min-height:24px;margin-bottom:6px}
 .exercise-view .scene-prop .picture-scene .sprite{width:95px}.exercise-view .scene-prop .distance-scene{height:120px}
 .exercise-view .exercise-workspace{gap:6px;margin-top:6px}
}
.character-window{width:150px;height:133px;overflow:hidden;max-width:100%}
.speaker-sketch .character-window .character-pose{width:100%;height:auto;max-height:none;aspect-ratio:3/4}
.cartoon-story .character-window{width:175px;height:180px}
.live .character-window{width:185px;height:170px}
@media(max-width:650px){.character-window{width:112px;height:91px}.cartoon-story .character-window{width:140px;height:135px}.live .character-window{width:130px;height:125px}}
@media(max-height:760px) and (max-width:650px){.exercise-view .character-window{width:104px;height:70px}}
@media(prefers-reduced-motion:reduce){button,.button{transition:none}}