@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700;800&family=Noto+Sans+SC:wght@500;700;900&display=swap');
:root{--ink:#172d26;--paper:#f5f0e6;--cream:#fffdf8;--orange:#ff7043;--yellow:#f6c94d;--green:#31a67a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Almarai",Arial,sans-serif;direction:rtl}button,input{font:inherit}button,a{color:inherit}a{text-decoration:none}.topbar{height:78px;padding:0 clamp(20px,6vw,90px);display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);background:rgba(245,240,230,.96);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px;font-weight:800}.brand-mark,.footer-mark{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#fff;font:900 22px "Noto Sans SC";transform:rotate(-7deg)}nav{display:flex;gap:32px;font-size:12px;font-weight:800}nav a:hover{color:var(--orange)}.counter{border:2px solid var(--ink);border-radius:99px;padding:8px 13px;font-size:10px;font-weight:800}.hero{min-height:610px;padding:65px clamp(24px,8vw,125px);display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:65px;overflow:hidden}.eyebrow,.kicker{color:#e6533e;font-size:12px;font-weight:800;letter-spacing:.05em}.eyebrow span{color:var(--green);font:700 14px "Noto Sans SC"}.hero h1,.section-title h2,.words-head h2{margin:18px 0;font-size:clamp(58px,7vw,100px);line-height:.98;letter-spacing:-.055em}.hero h1 em,.section-title h2 em{color:var(--orange);font-style:normal}.hero-copy p{max-width:510px;color:#53615c;line-height:2;font-size:16px;margin-bottom:34px}.primary{display:inline-block;background:var(--ink);color:#fff;padding:15px 24px;border-radius:5px;font-weight:800;box-shadow:6px 6px 0 var(--orange);transition:.2s}.primary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--orange)}.hero-visual{height:450px;position:relative;display:grid;place-items:center;direction:ltr}.sunburst{position:absolute;width:400px;height:400px;background:repeating-conic-gradient(var(--yellow) 0 9deg,transparent 9deg 18deg);border-radius:50%;opacity:.55}.hero-card{position:relative;width:min(390px,78vw);background:var(--cream);padding:42px;text-align:center;transform:rotate(3deg);border:2px solid var(--ink);box-shadow:14px 14px 0 var(--ink)}.hero-card small{font-weight:800}.hero-card strong{display:block;font:900 84px "Noto Sans SC";margin:12px}.hero-card b{display:block;color:var(--orange);font-size:20px;direction:ltr}.hero-card p{font-weight:800}.hero-card button{width:54px;height:54px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font-size:22px}.tape{position:absolute;top:-17px;left:38%;width:90px;height:32px;background:#ffd563cc;transform:rotate(-5deg)}.floating{position:absolute;padding:9px 16px;border:2px solid var(--ink);font:700 24px "Noto Sans SC";box-shadow:4px 4px 0 var(--ink)}.f1{top:22px;right:4%;background:#8572d6;color:#fff;transform:rotate(9deg)}.f2{bottom:35px;left:3%;background:var(--green);color:#fff;transform:rotate(-8deg)}.f3{top:45%;left:-1%;background:#fff;transform:rotate(5deg)}.ticker{overflow:hidden;background:var(--ink);color:#fff;padding:15px;white-space:nowrap;direction:ltr}.ticker div{text-align:center;font-weight:800;word-spacing:17px}.ticker b{color:var(--yellow)}.section{padding:90px clamp(24px,8vw,125px)}.section-title{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:45px}.section-title h2{font-size:clamp(42px,5vw,70px);margin-bottom:0}.section-title>p{max-width:400px;color:#63706b;line-height:1.9;font-size:13px}.group-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.group-grid button{--accent:#ff7043;min-height:150px;border:2px solid var(--ink);background:var(--cream);padding:22px;text-align:right;cursor:pointer;box-shadow:6px 6px 0 var(--accent);transition:.18s}.group-grid button:hover,.group-grid button.active{transform:translate(-3px,-3px);background:var(--accent);color:#fff;box-shadow:9px 9px 0 var(--ink)}.group-grid span,.group-grid b,.group-grid small{display:block}.group-grid span{font-size:34px}.group-grid b{font-size:18px;margin:14px 0 6px}.group-grid small{font-size:10px;direction:ltr;text-align:right}.words-section{background:var(--cream);border-top:2px solid var(--ink)}.words-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:25px}.words-head h2{font-size:clamp(45px,6vw,75px);margin-bottom:0}.search{width:min(390px,100%);display:flex;align-items:center;background:#fff;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--accent)}.search span{font-size:25px;padding:0 13px}.search input{min-width:0;width:100%;border:0;outline:0;padding:15px;background:transparent}.hint{background:var(--yellow);border:2px solid var(--ink);padding:14px 18px;font-size:12px;font-weight:800;margin-bottom:26px}.word-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.word-card{position:relative;background:var(--paper);border:2px solid var(--ink);padding:28px;text-align:center;box-shadow:7px 7px 0 var(--accent);overflow:hidden}.number{position:absolute;right:0;top:0;background:var(--ink);color:#fff;padding:6px 9px;font-size:9px;font-weight:800}.save{position:absolute;left:12px;top:9px;border:0;background:none;font-size:26px;cursor:pointer}.save.saved{color:#d59420}.chinese{font:900 clamp(50px,5vw,75px) "Noto Sans SC";margin-top:10px}.pinyin{font-size:19px;font-weight:800;color:var(--accent);direction:ltr;margin:4px 0 20px}.meanings{border-block:1px solid #c4c2ba;padding:17px 0;display:grid;gap:7px}.meanings strong{font-size:20px}.meanings span{direction:ltr;font-weight:700;color:#65716c}.audio-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.audio-actions button{border:2px solid var(--ink);background:#fff;padding:11px 7px;font-size:11px;font-weight:800;cursor:pointer}.audio-actions button:first-child{background:var(--ink);color:#fff}.audio-actions button:hover{background:var(--yellow);color:var(--ink)}.empty{border:2px dashed var(--accent);padding:45px;text-align:center;font-weight:800}footer{background:var(--yellow);border-top:2px solid var(--ink);padding:30px clamp(24px,8vw,125px);display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:12px}footer .footer-mark{background:var(--ink)}footer a{font-weight:800}
@media(max-width:900px){nav{display:none}.hero{grid-template-columns:1fr;text-align:center}.hero-copy p{margin-inline:auto}.group-grid,.word-grid{grid-template-columns:repeat(2,1fr)}.section-title,.words-head{align-items:stretch;flex-direction:column}.search{width:100%}}
@media(max-width:560px){.topbar{height:68px;padding-inline:13px}.brand>span:last-child{font-size:12px}.counter{font-size:9px}.hero{padding:48px 20px}.hero h1{font-size:58px}.hero-visual{height:350px}.sunburst{width:300px;height:300px}.hero-card{padding:35px 22px}.hero-card strong{font-size:67px}.floating{font-size:17px}.section{padding:65px 20px}.group-grid,.word-grid{grid-template-columns:1fr}.word-card{padding:26px}.audio-actions button{padding:13px 8px}footer{flex-direction:column;text-align:center}}
.trainer{--trainer:#ff7043;margin:30px 0 65px}.trainer-intro{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;background:var(--ink);color:#fff;border:2px solid var(--ink);box-shadow:9px 9px 0 var(--trainer);padding:28px}.trainer-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);border:2px solid var(--ink);font-size:34px}.trainer-intro span{font-size:10px;color:#9bd9c2;font-weight:800}.trainer-intro h3{font-size:25px;margin:7px 0}.trainer-intro p{color:#cbd5d1;font-size:12px;line-height:1.8;margin:0}.trainer-intro>button,.result-card>button{border:2px solid var(--ink);background:var(--yellow);padding:15px 20px;font-weight:800;box-shadow:5px 5px 0 #fff;cursor:pointer}.lesson-shell{max-width:850px;margin:auto;background:var(--paper);border:2px solid var(--ink);box-shadow:11px 11px 0 var(--trainer);padding:34px}.lesson-top{display:flex;justify-content:space-between;font-size:11px;font-weight:800}.lesson-top b{color:var(--trainer)}.lesson-progress{height:8px;background:#dedbd2;margin:14px 0 28px}.lesson-progress i{display:block;height:100%;background:var(--trainer);transition:.3s}.memory-card,.quiz-card{text-align:center}.memory-card>small,.quiz-card>small{color:#64716c;font-weight:800}.memory-card>strong{display:block;font:900 clamp(70px,10vw,115px) "Noto Sans SC";margin:15px 0 0}.memory-card>b{display:block;color:var(--trainer);font-size:23px;direction:ltr}.study-audio{display:flex;justify-content:center;gap:10px;margin:22px 0}.study-audio button,.repeat-slow{border:2px solid var(--ink);background:#fff;padding:11px 17px;font-size:11px;font-weight:800;cursor:pointer}.study-audio button:first-child{background:var(--ink);color:#fff}.reveal{border:2px solid var(--ink);background:var(--yellow);padding:15px 35px;font-weight:800;box-shadow:5px 5px 0 var(--ink);cursor:pointer}.revealed{border-top:2px dashed #aaa;margin-top:25px;padding-top:24px}.revealed>div:first-child{display:grid;gap:7px}.revealed strong{font-size:28px}.revealed span{direction:ltr;font-size:18px;color:#60706a;font-weight:700}.revealed p{font-size:11px;margin-top:23px}.revealed>div:last-child{display:flex;justify-content:center;gap:12px}.revealed button{border:2px solid var(--ink);padding:13px 22px;font-weight:800;cursor:pointer}.again{background:#fff}.knew{background:var(--green);color:#fff}.quiz-speaker{display:block;width:105px;height:105px;border:2px solid var(--ink);border-radius:50%;margin:22px auto 12px;background:var(--yellow);font-size:42px;box-shadow:7px 7px 0 var(--ink);cursor:pointer}.repeat-slow{margin-bottom:25px}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quiz-options button{border:2px solid var(--ink);background:#fff;padding:17px;font-weight:800;cursor:pointer}.quiz-options button:hover:not(:disabled){background:var(--ink);color:#fff}.quiz-options button.correct{background:var(--green);color:#fff}.quiz-options button.wrong{background:#e65365;color:#fff}.quiz-feedback{margin-top:20px;padding:18px;border:2px solid}.quiz-feedback.good{background:#e7f7ef;border-color:var(--green)}.quiz-feedback.bad{background:#fdebed;border-color:#e65365}.quiz-feedback>div{display:flex;justify-content:center;align-items:center;gap:13px;margin:13px}.quiz-feedback strong{font:700 29px "Noto Sans SC"}.quiz-feedback span{direction:ltr;font-size:12px}.quiz-feedback>button{background:var(--ink);color:#fff;border:0;padding:11px 18px;font-weight:800;cursor:pointer}.result-card{text-align:center;background:var(--ink);color:#fff;border:2px solid var(--ink);box-shadow:11px 11px 0 var(--trainer);padding:42px}.result-badge{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;margin:auto;background:var(--yellow);color:var(--ink);font:900 19px "Noto Sans SC"}.result-card>small{display:block;color:#a9bbb4;margin-top:17px}.result-card h3{font-size:65px;margin:7px}.result-card>p{color:#d2ddd9}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:570px;margin:28px auto;gap:10px}.result-stats div{border:1px solid #60736b;padding:14px}.result-stats b,.result-stats span{display:block}.result-stats b{font-size:24px;color:var(--yellow)}.result-stats span{font-size:9px;margin-top:4px}.catalog-label{display:flex;align-items:center;gap:12px;margin-bottom:22px;border-bottom:2px solid var(--ink);padding-bottom:12px}.catalog-label span{background:var(--trainer,var(--accent));color:#fff;padding:6px 9px;font-size:9px;font-weight:800}.catalog-label b{font-size:20px}
@media(max-width:650px){.trainer-intro{grid-template-columns:1fr;text-align:center}.trainer-icon{margin:auto}.trainer-intro>button{width:100%}.lesson-shell{padding:24px 15px}.quiz-options{grid-template-columns:1fr}.revealed>div:last-child{flex-direction:column}.result-stats{grid-template-columns:1fr}.quiz-feedback>div{flex-direction:column}.memory-card>strong{font-size:75px}}
.arabic-pronunciation{display:table;margin:-10px auto 18px;padding:6px 12px;background:#fff5c7;border-inline-start:4px solid var(--accent);font-size:13px;font-weight:800;direction:rtl}.hero-pronunciation{display:table;margin:9px auto 0;padding:5px 12px;background:#ffe5dc;border-radius:4px;font-size:14px;font-weight:800;direction:rtl}.study-pronunciation{display:table;margin:13px auto 0;padding:8px 15px;background:#fff5c7;border:1.5px solid var(--ink);font-size:12px}.study-pronunciation strong{color:var(--trainer);font-size:17px;margin-inline-start:5px}