/* vazirmatn-arabic-wght-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/vazirmatn-subset-1.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* vazirmatn-latin-ext-wght-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/vazirmatn-subset-2.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* vazirmatn-latin-wght-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/vazirmatn-subset-3.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{--ink:#183e3a;--teal:#185b54;--muted:#536b66;--sand:#f7f0e3;--coral:#f2b3a4;--line:#deded1}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top left,#d6e9df,transparent 60%),#f0ede5;color:var(--ink);font:15px/1.8 'Vazirmatn','Noto Sans Arabic',Tahoma,Arial,sans-serif}button{font:inherit;cursor:pointer;min-height:48px}button:disabled{cursor:default}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #be592e;outline-offset:4px}.shell{max-width:1050px;margin:32px auto;border-radius:30px;background:#fffcf6;overflow:hidden;box-shadow:0 24px 80px #183e3a19}header{padding:30px 38px;background:var(--teal);color:#fff}.brand{display:flex;align-items:center;gap:12px}.brand b{font:700 24px 'Vazirmatn','Inter','Segoe UI',Arial,sans-serif}.brand small{display:block;color:#dcebe3;font-size:12px}.mark{display:grid;place-items:center;width:46px;height:46px;border:1px solid #b8d6c6;border-radius:15px;font-size:30px;color:#f3d6a2}.tag{margin-right:auto;border:1px solid #87afa6;border-radius:30px;padding:3px 12px;font-size:11px}h1{font-size:29px;margin:22px 0 4px}header p{margin:0;color:#e1eae5}.stats{display:flex;gap:12px;margin-top:24px}.stats>div{flex:1;background:#ffffff0d;border:1px solid #ffffff30;border-radius:15px;padding:10px 16px;font-size:12px}.stats b{display:block;font-size:21px;color:#ffe2ad}main{padding:26px 34px}.intro{display:flex;gap:13px;padding:15px 18px;background:var(--sand);border:1px solid #e8ddc6;border-radius:17px}.intro>span{font-size:28px}.intro p{font-size:12px;color:var(--muted);margin:0}.step{display:flex;justify-content:space-between;margin:23px 0 8px}#counter{font-size:13px;color:var(--muted)}progress{width:100%;height:8px;border:0;border-radius:10px;overflow:hidden;display:block;background:#e5e8df}progress::-webkit-progress-bar{background:#e5e8df}progress::-webkit-progress-value{background:#469987}progress::-moz-progress-bar{background:#469987}.play{display:grid;grid-template-columns:1fr 1fr;gap:23px;margin-top:24px}.picture{padding:12px;background:#fff;border:1px solid var(--line);border-radius:24px;align-self:start;box-shadow:0 12px 25px #183e3a08}.art{aspect-ratio:1;background-image:url('assets/pictures.jpg');background-size:300% 200%;background-repeat:no-repeat;border-radius:17px;background-color:#fcf3df}.picture-label{display:block;text-align:center;font-size:12px;margin:9px 0 0;color:var(--muted)}.question-card{padding:14px 4px}.eyebrow{font-size:12px;color:#8b563e}h2{font-size:21px;margin:7px 0}.sub{font-size:12px;color:var(--muted);margin:0 0 16px}.options{display:grid;gap:10px}.option{display:flex;align-items:center;gap:14px;text-align:left;direction:ltr;border:1px solid var(--line);border-radius:15px;padding:11px 15px;background:white;color:var(--ink);font:600 19px/1.5 'Vazirmatn','Inter','Segoe UI',Arial,sans-serif}.option span{background:#eef1e8;border-radius:9px;width:29px;height:29px;text-align:center;font-size:13px;line-height:29px}.option:hover:enabled{border-color:#439b84;background:#f3f8f1}.option.correct{background:#e4f3e7;border:2px solid #287749}.option.wrong{background:#fff0ea;border:2px solid #b14d35}.option:disabled{opacity:1;color:var(--ink)}.helpers{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}.secondary,.primary{border-radius:12px;padding:10px 16px}.secondary{border:1px solid #c9d5cb;background:#f6f7ef;color:var(--teal);font-size:12px}.secondary:disabled{color:#66706a}.primary{border:0;background:var(--teal);color:white;font-weight:700}.feedback{min-height:28px;font-size:13px;margin:13px 0;color:var(--ink)}#lesson{padding:10px 15px;margin-bottom:13px;border-radius:14px;background:var(--sand)}#lesson p{margin:4px 0}#sentence{font:17px/1.7 'Vazirmatn','Inter','Segoe UI',Arial,sans-serif}.result{text-align:center;padding:25px 0}.big{font-size:50px}.result>p{color:var(--muted)}.collection{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.mini{padding:12px;border-radius:16px;background:var(--sand);border:1px solid #e6decd}.mini .art{width:100%;max-width:135px;margin:auto}.mini b{display:block;font:600 18px/1.8 'Vazirmatn','Inter','Segoe UI',Arial,sans-serif}.mini small{font-size:11px;display:block}.mini button{margin-top:7px}.result-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}footer,.note{font-size:11px;color:var(--muted);margin-top:22px}footer{border-top:1px solid var(--line);padding-top:16px}.skip{position:absolute;top:-90px;background:white;padding:10px;z-index:10}.skip:focus{top:10px}[hidden]{display:none!important}@media(max-width:700px){.shell{margin:0;border-radius:0}header{padding:23px 20px}h1{font-size:23px}main{padding:20px 16px}.play{grid-template-columns:1fr;gap:13px}.picture{width:min(100%,370px);justify-self:center}.question-card{padding:0}.stats{gap:7px}.stats>div{padding:8px;font-size:10px}.stats b{font-size:18px}.tag{padding:3px 8px}.collection{grid-template-columns:repeat(2,1fr)}.brand b{font-size:21px}}@media(prefers-reduced-motion:no-preference){.option{transition:background .16s,border-color .16s}.picture{animation:appear .3s ease}@keyframes appear{from{opacity:.5;transform:translateY(7px)}to{opacity:1;transform:none}}}

.collection-area{position:relative;padding-top:58px}.collection{margin:0}.result-actions{position:absolute;top:0;right:0;left:0;display:flex;justify-content:space-between;gap:12px}.result-actions #review{margin-right:0}.result-actions #restart{margin-left:0}

.helpers{justify-content:space-between;align-items:center;flex-wrap:nowrap}.helpers #next{margin-inline-start:auto}

.brand-description{margin-inline-start:auto!important;text-align:left;font-size:12px;max-width:360px}.helpers{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px}.helpers #next{margin:0;font-size:12px}.helpers .feedback{margin:0;min-height:0;text-align:center;font-size:12px;line-height:1.6;overflow-wrap:anywhere}.helpers #next[hidden]{display:block!important;visibility:hidden;pointer-events:none}#stage:empty{display:none}.step{justify-content:space-between}#counter{margin-inline-start:auto}#sentence-audio{padding-block:7px;min-height:42px}#lesson #sentence{margin-bottom:0}@media(max-width:700px){.brand{flex-wrap:wrap}.brand-description{flex:1;min-width:130px;font-size:11px}.helpers{gap:6px}.helpers .feedback{font-size:11px}.helpers .secondary,.helpers .primary{padding-inline:9px}}

#progress{margin-top:23px}.step{margin:7px 0 0}#counter{font-size:14px}#lesson{margin-top:6px}.intro p,.brand small,.stats>div,.brand-description{font-size:14px}.helpers #hint,.helpers #next{font-size:13px}@media(max-width:700px){.stats>div{font-size:12px}.brand-description{font-size:13px}}

/* Compact spacing keeps the question and controls closer together */
.shell{margin:12px auto}header{padding:16px 26px}.stats{margin-top:12px;gap:10px}.stats>div{padding:6px 12px}.stats b{font-size:20px}main{padding:14px 24px}.intro{padding:8px 14px}#progress{margin-top:12px}.step{margin-top:4px}.play{margin-top:12px;gap:18px}.picture{padding:8px;width:min(100%,310px);justify-self:center}.question-card{padding:0 4px}h2{margin:0 0 8px}.options{gap:8px}.option{padding:8px 13px}.helpers{margin-top:10px}#lesson{padding:8px 12px}.note:empty{display:none}.result{padding:12px 0}.collection-area{padding-top:52px}@media(max-width:700px){.shell{margin:0}header{padding:14px 16px}main{padding:12px 14px}.stats{gap:7px;margin-top:10px}.stats>div{padding:5px 8px}.stats b{font-size:18px}.intro{padding:7px 10px}.play{gap:10px}.picture{width:min(100%,260px)}.question-card{padding:0}}

/* Compact results and image collection */
.result{padding:6px 0}.result>p{margin:4px 0 10px}.collection-area{padding-top:50px}.collection{gap:8px}.mini{padding:8px}.mini .art{max-width:110px}.mini b{font-size:17px;line-height:1.5}.mini small{line-height:1.5}.result-actions .primary,.result-actions .secondary{padding:8px 12px;min-height:44px}@media(max-width:700px){.collection{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mini{padding:6px}.mini b{font-size:15px}.mini small{font-size:10px}.result-actions{gap:8px}.result-actions .primary,.result-actions .secondary{font-size:12px;padding-inline:10px}}

.result-back{display:block;margin:0 0 8px auto;min-height:44px;padding:8px 14px;font-size:13px}