@font-face{font-family:Arabic;src:url(fonts/arabic.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Arabic;src:url(fonts/arabic-bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:Tifinagh;src:url(fonts/tifinagh.ttf);font-display:swap}
:root{color-scheme:light;--bg:#f5f6f0;--ink:#19342d;--muted:#50635a;--line:#e1e8df;--green:#1e584b;--dark:#153e37;--gold:#f5d596;--soft:#e9f3eb}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.75 Arabic,Tifinagh,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button:disabled{cursor:default}
h1,h2,p{margin:0}
[lang=zgh-Tfng]{font-family:Tifinagh,sans-serif;font-weight:400}
svg{display:inline-block;vertical-align:middle;width:19px;height:19px;flex:none}
.number{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid #996126;outline-offset:4px}
main:focus,#question:focus,#feedback:focus{outline:none}
.skip{position:fixed;z-index:5;top:-120px;right:12px;padding:8px 14px;border-radius:8px;background:white}
.skip:focus{top:12px}
.layout{display:grid;min-height:100vh;grid-template-columns:239px minmax(0,1fr)}
aside{display:flex;flex-direction:column;gap:32px;position:sticky;top:0;height:100dvh;background:#fff;border-inline-end:1px solid var(--line);padding:29px 18px 20px}
.brand{display:flex;align-items:center;gap:10px;line-height:1.5}
.brand>span,.tile,.metric-icon{display:grid;place-items:center;flex:none}
.brand>span{width:43px;height:43px;background:var(--dark);color:var(--gold);border-radius:13px;font-size:28px}
.brand strong{display:block;font-size:22px}
.brand small{display:block;color:var(--muted);font-size:11px}
#nav{display:grid;gap:7px}
#nav a{display:flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:9px;font-size:13px;color:#435a50;font-weight:700}
#nav a:hover,#nav a[aria-current]{border-color:#deebe1;background:var(--soft);color:var(--green)}
#rail{margin-top:auto;background:#f6f9f5;border:1px solid var(--line);padding:10px 12px;border-radius:12px;font-size:12px}
#rail div{display:flex;justify-content:space-between}
#rail small,small{color:var(--muted)}
progress{display:block;appearance:none;accent-color:var(--green);width:100%;height:7px;background:#dce8df;border:0;border-radius:20px;overflow:hidden}
progress::-webkit-progress-bar{background:#dce8df}
progress::-webkit-progress-value{background:var(--green);border-radius:20px}
progress::-moz-progress-bar{background:var(--green);border-radius:20px}
#rail progress{margin:8px 0 4px}
.workspace{min-width:0}
header{background:#fff;border-bottom:1px solid var(--line)}
header>div,main,footer{max-width:1240px;margin-inline:auto;padding-inline:36px}
header>div{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:13px;font-weight:700}
#crumb a:hover{text-decoration:underline}
.tag{font-size:11px;color:#694722;background:#f8ecd2;border-radius:30px;padding:3px 10px;white-space:nowrap}
main{padding-block:27px 12px;min-height:76vh}
footer{padding-block:14px 19px;color:var(--muted);font-size:12px}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:321px;display:grid;grid-template-columns:minmax(0,1fr) 36%;align-items:center;padding:25px 35px;border-radius:24px;color:white;background:radial-gradient(ellipse at 13% 78%,#2c6554,transparent 58%),linear-gradient(110deg,#1b4c41,#133b35 72%)}
.hero-text{position:relative;z-index:2}
.eyebrow{display:flex;align-items:center;gap:8px;color:var(--gold);font-size:13px;font-weight:700}
.eyebrow span{width:8px;height:8px;background:var(--gold);transform:rotate(45deg);border-radius:1px}
.hero h1{font-size:clamp(32px,4.3vw,59px);line-height:1.35;letter-spacing:-.02em;margin-top:7px}
.hero h1 span{color:var(--gold)}
.hero-text>p:nth-of-type(2){color:#e1eee7;margin:10px 0 15px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:43px;padding:6px 14px;border:1px solid transparent;border-radius:9px;background:var(--green);color:white;font-size:13px;font-weight:700;white-space:nowrap}
.button:hover{background:#143f35}
.button svg,.text-link svg{width:16px;height:16px}
.button.warm{background:var(--gold);color:#263a31}
.button.warm:hover{background:#ffe2ac}
.button.secondary{background:white;color:var(--green);border-color:#cadecf}
.button.secondary:hover{background:var(--soft)}
.art{justify-self:center;width:220px;height:220px;position:relative;direction:ltr}
.frame,.emblem,.minor{position:absolute;border:1px solid #eed29a77}
.frame{inset:24px;border-radius:29px;transform:rotate(18deg)}
.frame.two{inset:11px;transform:rotate(34deg);border-color:#ead09738}
.emblem{display:grid;place-items:center;inset:43px;border-radius:30px;background:linear-gradient(140deg,#fce0a8,#e6af63);box-shadow:0 15px 29px #0a2d257a;transform:rotate(-12deg);color:#18483d}
.emblem span{font-size:78px;line-height:1;transform:rotate(12deg)}
.minor{z-index:1;display:grid;place-items:center;width:37px;height:37px;background:#29594d;border-radius:10px;font-size:21px;color:var(--gold)}
.minor.a{top:20px;left:0;transform:rotate(-14deg)}
.minor.b{bottom:20px;right:0;transform:rotate(11deg)}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 24px}
.metrics article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;min-width:0}
.metric-icon{width:38px;height:38px;border-radius:10px;color:var(--green);background:var(--soft)}
.metrics article:nth-child(2) .metric-icon{color:#88512c;background:#fbefdb}
.metrics article:nth-child(3) .metric-icon{color:#416364;background:#e8efef}
.metrics article div>span,.metrics small{display:block;color:var(--muted);font-size:11px}
.metrics strong{display:block;font:bold 24px/1.45 Arial,sans-serif}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-head h2{font-size:24px}
.section-head h1{font-size:clamp(26px,4vw,39px)}
.section-head p,.intro,.take p,.finish p{color:var(--muted)}
.text-link,.neighbors a{display:inline-flex;align-items:center;gap:4px;color:var(--green);font-size:13px;font-weight:700}
.text-link:hover,.neighbors a:hover{text-decoration:underline}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.filters button{padding:5px 12px;background:white;color:#455951;border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:700}
.filters button:hover,.filters button[aria-pressed=true]{background:#e6f1e9;border-color:#bfd9c8;color:var(--green)}
.lessons{display:grid;gap:7px}
.lesson-row{display:grid;grid-template-columns:auto minmax(0,1fr) 59px 88px auto;align-items:center;gap:11px;padding:8px 12px;min-height:65px;border:1px solid var(--line);border-radius:12px;background:#fff}
.lesson-row.current{background:#f0f8f0;border-color:#b9d5c1}
.lesson-row:hover{border-color:#87b097}
.tile{width:40px;height:40px;border-radius:10px;font-size:23px;color:#1e5746;background:#e7f3e9}
.tile.letters{background:#e7f0f1;color:#315e61}
.tile.grammar{background:#fbefe1;color:#924f2b}
.lesson-row small,.lesson-heading small{display:block;font-size:11px}
.lesson-row strong{display:block;font-size:14px;line-height:1.5}
.duration svg{width:14px;height:14px}
.badge{width:max-content;white-space:nowrap;padding:1px 6px;border-radius:6px;background:#f1f4ef;font-size:11px;color:#4c6155}
.badge.done,.current .badge{background:#e1f0e4;color:#225a43}
.row-arrow{color:#4a725f}
.reading{max-width:805px;margin-inline:auto}
.back{margin-bottom:11px}
.card,.table-wrap{background:white;border:1px solid var(--line);border-radius:19px;padding:20px 25px}
.lesson-heading{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.lesson-heading .tile{width:49px;height:49px}
.lesson-heading h1{font-size:clamp(23px,3.3vw,35px);line-height:1.45}
.intro{margin:0 0 13px}
.block{border-top:1px solid var(--line);padding:11px 0}
.block h2,.take h2{font-size:17px;margin-bottom:2px}
.block p,.feedback p{line-height:1.95}
.words{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:8px 0 12px;text-align:center}
.words>div{display:grid;gap:3px;background:#f2f7f3;border-radius:10px;padding:8px 4px}
.words [lang]{font-size:20px}
.words bdi:not([lang]),.words small,details,.take p{font-size:12px}
details{margin-top:9px;color:var(--muted)}
summary{cursor:pointer;font-weight:700;width:max-content}
details a,.credit a{color:var(--green);text-decoration:underline}
.take{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-block:11px;padding-block:12px}
.neighbors{display:flex;justify-content:space-between;gap:10px}
.quiz-meta{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:12px;color:var(--muted);font-size:12px}
.quiz progress{margin:7px 0 17px}
.quiz h2{font-size:clamp(19px,2.7vw,25px);line-height:1.65}
.credit{font-size:11px;color:var(--muted);margin:3px 0 11px}
.options{display:grid;gap:7px}
.options button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;text-align:start;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:white;color:var(--ink)}
.options button:hover:enabled{background:#eff7f1;border-color:#afd0bb}
.options button>bdi{display:grid;place-items:center;min-width:24px;min-height:24px;background:#eff3ef;color:#496158;border-radius:6px;font:700 11px Arial,sans-serif}
.option-mark{font-weight:700}
.options button.correct,.feedback.correct{background:#e8f5eb;border-color:#acd0b6;color:#205437}
.options button.wrong,.feedback.wrong{background:#faeee4;border-color:#edd0b6;color:#774127}
.feedback{border:1px solid;border-radius:9px;margin-top:12px;padding:8px 10px}
.next{display:flex;justify-content:end;margin-top:12px}
.finish{text-align:center;padding-block:34px}
.finish .metric-icon{margin:0 auto 8px}
.finish .score{display:block;font:bold 54px/1.35 Arial,sans-serif;color:var(--green);margin:6px 0}
.finish>div{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.table-wrap{padding:0;overflow:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
caption,th,td{text-align:start;padding:9px 13px}
caption{font-weight:700;font-size:17px}
th,td{border-top:1px solid var(--line)}
thead th{background:#f1f6f1;color:var(--muted);font-size:12px}
tbody a:hover{text-decoration:underline}
.warning{color:#774127;background:#faeee4;padding:8px 10px;border-radius:8px;margin-bottom:8px}
@media(max-width:1050px){.layout{grid-template-columns:205px minmax(0,1fr)}aside{padding-inline:13px}header>div,main,footer{padding-inline:24px}.art{scale:.88}}
@media(max-width:760px){.layout{display:block}aside{position:static;height:auto;padding:10px 16px;gap:10px;border-inline-end:0;border-bottom:1px solid var(--line)}#nav{display:flex;gap:4px;flex-wrap:wrap}#nav a{padding:4px 6px;font-size:11px}#nav svg{width:15px;height:15px}#rail{display:none}header>div{min-height:43px}header>div,main,footer{padding-inline:16px}main{padding-top:16px}.hero{min-height:282px;padding:17px 21px}.art{scale:.76}}
@media(max-width:510px){.hero{display:block;min-height:271px;padding:18px 15px}.hero h1{font-size:clamp(28px,8vw,41px)}.hero-text>p:nth-of-type(2){font-size:13px}.art{position:absolute;top:16px;left:-75px;opacity:.29;scale:.85}.metrics{gap:5px;margin:9px 0 16px}.metrics article{padding:7px 5px;display:block;border-radius:10px}.metric-icon{width:29px;height:29px;margin-bottom:4px}.metrics strong{font-size:21px}.metrics small{display:none}.metrics article div>span{font-size:10px}.section-head{align-items:start}.section-head h2{font-size:20px}.section-head p{font-size:12px}.section-head>a{margin-top:5px;white-space:nowrap}.lesson-row{grid-template-columns:auto minmax(0,1fr) auto;gap:6px;padding:7px 6px;min-height:59px}.tile{width:33px;height:33px}.lesson-row strong{font-size:12px}.lesson-row small,.badge{font-size:9.5px}.lesson-row .duration,.row-arrow{display:none}.card{padding:12px}.lesson-heading .tile{width:38px;height:38px}.take{flex-wrap:wrap}.quiz button{font-size:13px}.table-wrap th,.table-wrap td{font-size:10.5px;padding:6px 5px}}
.exam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:12px;margin-bottom:16px}
.exam-card h2,.plan-grid h2{font-size:18px}
.exam-card div,.exam-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:11px}
.exam-index{display:flex;flex-wrap:wrap;gap:4px;margin-top:14px}
.exam-index button{background:#f5f7f3;border:1px solid #d9e3d8;color:var(--ink);border-radius:5px;min-width:29px;padding:2px 5px}
.exam-index button.answered,.exam-options [aria-pressed=true]{background:#e2f1e6;border-color:#8bbe9f}
.exam-index [aria-current]{border-color:var(--green);font-weight:700;outline:1px solid var(--green)}
.exam-review{display:grid;gap:7px;margin-top:12px}
.exam-review summary{width:auto}
.exam-controls button:disabled{opacity:.45}
#exam-confirm{max-width:min(440px,90vw);color:var(--ink);border:1px solid var(--line);border-radius:14px}
#exam-confirm::backdrop{background:#11372d66}
.passage{margin:12px 0;padding:8px 12px;border-inline-start:3px solid var(--green);background:#eef5ee}
.search{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px;color:var(--muted)}
.search input{font:inherit;min-height:36px;color:var(--ink);padding:4px 8px;background:white;border:1px solid var(--line);border-radius:8px}
.plan-grid{margin-top:12px}
.plan-grid a,.plan-sources a{color:var(--green);text-decoration:underline}
.language-choice{margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.language-choice select{font:inherit;color:var(--ink);padding:5px 9px;border:1px solid #a9c3b3;border-radius:8px;background:white}

[hidden]{display:none!important}
#install-help{margin-bottom:8px}
#install-help .button{margin-top:6px}

.exam-source{display:block;margin:8px 0;text-decoration:underline}