@font-face{font-family:Kitabi;src:url('assets/arabic.woff') format('woff');font-weight:400;font-display:swap}@font-face{font-family:Kitabi;src:url('assets/arabic-bold.woff') format('woff');font-weight:700;font-display:swap}
:root{--ink:#3f3851;--muted:#837b8b;--purple:#7660aa;--purple-dark:#65508f;--lavender:#eee9f7;--pink:#e9a5b5;--paper:#fffdf9;--line:#ece6e1;--yellow:#f7dc83;--mint:#dcece1}
*{box-sizing:border-box}body{margin:0;background:#fcf8f0;color:var(--ink);font-family:Kitabi,'DejaVu Sans',sans-serif;font-size:14px;line-height:1.7;background-image:radial-gradient(#dbd0c12b .8px,transparent .8px);background-size:15px 15px}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button{color:inherit}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ad74c7;outline-offset:4px}button{touch-action:manipulation}svg{display:block}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.wrap{max-width:1240px;margin:auto;padding-inline:35px}.topbar{height:101px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9e0d4}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.brand-mark{width:52px;height:55px;background:#f4cbd3;border-radius:18px 18px 14px 18px;display:grid;place-items:center;font-size:42px;line-height:1;color:#695089;transform:rotate(6deg);position:relative;font-weight:bold}.brand-mark>span{position:absolute;font-size:20px;left:-5px;top:-7px;color:#d3ab41;transform:rotate(-6deg)}.brand strong{display:block;font-size:20px;line-height:1.6}.brand small{display:block;font-size:12px;color:#7c7484}.header-actions{display:flex;gap:22px;align-items:center}.age-tag{font-size:12px;color:#837b82;display:flex;gap:9px;align-items:center}.age-tag b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#8b7131;background:#f9edc6;font-size:14px;direction:rtl}.help-button{display:flex;gap:7px;align-items:center;background:#fffdf8;border:1px solid #e5ddd3;border-radius:11px;padding:8px 13px;font-size:12px}.help-button>span{border:1.4px solid #8c829a;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;font-size:12px;line-height:1}.welcome{padding:29px 3px 25px;display:flex;align-items:center;justify-content:space-between;min-height:180px}.eyebrow{font-size:11px;letter-spacing:.1px;color:#8a7b86;display:flex;align-items:center;gap:7px}.eyebrow>span:first-child:not(.title-doodle){width:6px;height:6px;border-radius:50%;background:#d89bad}.welcome h1{font-size:32px;line-height:1.8;margin:5px 0 2px;font-weight:700;letter-spacing:-1.1px}.welcome h1>span{color:#80629e;position:relative;display:inline-block}.title-doodle{position:absolute;bottom:4px;right:0;left:0;height:8px;z-index:-1;border-radius:40% 20% 30% 20%;background:#eed7d5;transform:rotate(-1deg)}.welcome p{font-size:13px;color:#827a87;margin:3px 0 0}.pencil-art{width:190px;flex-shrink:0;margin-left:42px}.pencil-art svg{width:100%}.learning-layout{display:grid;grid-template-columns:237px minmax(0,1fr);gap:24px;align-items:start}.letter-sidebar{background:#fffdf9;border:1px solid #ebe4db;border-radius:22px;padding:23px 20px;box-shadow:0 4px 0 #e7dec526}.sidebar-heading{display:flex;align-items:center;gap:8px}.section-dot{height:8px;width:8px;border-radius:3px;background:#e8adbc}.sidebar-heading h2{font-size:16px;margin:0}.little-label{font-size:10px;margin-right:auto;color:#a59ba5;background:#f7f2ec;border-radius:6px;padding:2px 6px}.sidebar-description{font-size:11px;color:#9b8d96;margin:4px 0 20px}.letter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.letter-tile{position:relative;min-width:0;min-height:77px;border:1.4px solid #ebe5df;border-radius:12px;background:#fcfaf7;transition:transform .15s,background .15s,border-color .15s;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px 3px}.letter-tile:hover{transform:translateY(-2px);background:#f3edf8}.letter-tile.selected{background:#eee7f6;border:2px solid #9d85c1;color:#705399;box-shadow:0 3px 0 #e6dcef}.letter-tile .tile-letter{font-size:32px;font-weight:700;line-height:1.4}.tile-name{font-size:9px;color:#968a9e}.tile-check{position:absolute;top:-5px;left:-4px;background:#70a887;border:2px solid white;border-radius:50%;width:18px;height:18px;color:white;display:grid;place-items:center}.tile-check .icon{width:11px;height:11px;stroke-width:3}.progress-card{margin-top:26px;background:#f4f6ec;border:1px solid #e7ead9;border-radius:14px;padding:14px 12px 13px}.progress-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#747d58;font-weight:700}.progress-heading>.icon{width:17px;height:17px;fill:#e1c56a;stroke:#c7ab4b}.progress-flowers{display:flex;gap:5px;justify-content:space-between;margin:12px 0 8px;direction:rtl}.progress-flower{font-size:25px;color:#d7dcc9;line-height:1}.progress-flower.earned{color:#ddaa51}.progress-card p{font-size:10px;color:#78805f;margin:9px 0}.progress-track{height:5px;border-radius:5px;background:#e2e7d6;overflow:hidden}.progress-track>div{width:0;height:100%;background:#97af80;border-radius:5px;transition:width .3s}.progress-card small{display:block;margin-top:9px;color:#9b9d87;font-size:9px}.sidebar-note{font-size:10px;color:#a99a9f;line-height:2;margin:19px 0 0;padding-right:24px;position:relative}.sidebar-note>span{position:absolute;right:0;font-size:25px;top:-8px;color:#dcb5c3}.workbook{background:var(--paper);border:1px solid #e7e0d8;border-radius:22px;overflow:hidden;box-shadow:0 5px 0 #e5dcc82e}.steps{display:grid;grid-template-columns:repeat(3,1fr);background:#f7f3ec;padding:9px;gap:5px;border-bottom:1px solid #eae3da}.step{display:flex;align-items:center;gap:9px;background:none;border:1px solid transparent;border-radius:13px;padding:10px 12px;text-align:right}.step.active{background:white;border-color:#e8e0ee;box-shadow:0 2px 5px #45304105}.step strong{display:block;font-size:13px;font-weight:700}.step small{display:block;font-size:9px;color:#a59aa8}.step>.icon{margin-right:auto;width:19px;height:19px;color:#b4a8bd}.step.active>.icon{color:#9276b4}.step-number{border-radius:50%;width:28px;height:28px;background:#eae5df;color:#a899a4;font-size:12px;display:grid;place-items:center;flex-shrink:0}.step.active .step-number{background:#e6daf3;color:#7d5ca4}.step.is-past .step-number{background:#deebdd;color:#6b8e68}.lesson-content{padding:25px 29px 21px}.lesson-heading{display:flex;align-items:center;justify-content:space-between}.lesson-heading h2{font-size:21px;margin:2px 0 0;letter-spacing:-.4px}.lesson-heading .eyebrow{font-size:10px;color:#a68ca0}.lesson-counter{border:1px solid #e9e1d9;color:#a89cac;font-size:10px;border-radius:7px;padding:3px 9px;direction:rtl;white-space:nowrap}.recognize-panel{display:grid;grid-template-columns:1fr 1fr;gap:23px;margin-top:21px;min-height:272px}.letter-display{border:1px solid #e6ddef;border-radius:17px;background:#f2edf8;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:16px 10px 14px}.letter-display:before,.letter-display:after{content:'';position:absolute;background:#e8dff0;border-radius:50%;width:76px;height:76px;opacity:.6}.letter-display:before{right:-30px;top:-25px}.letter-display:after{left:-45px;bottom:-28px;width:120px;height:120px}.large-letter{font-size:137px;line-height:1.3;font-weight:700;color:#80609f;z-index:1;min-height:176px}.letter-name{font-size:15px;font-weight:700;color:#8d72a4}.display-caption{font-size:10px;color:#af99b9;margin-top:5px}.letter-spark{position:absolute;color:#c4aad8;font-size:21px;line-height:1}.spark-one{right:36px;top:58px}.spark-two{left:34px;top:114px;font-size:28px}.word-display{background:#fdf8eb;border:1px solid #f0e7cf;border-radius:17px;padding:17px 13px 13px;display:flex;flex-direction:column;align-items:center}.word-tag{font-size:10px;color:#b39d6c}.word-art{height:109px;width:120px;display:grid;place-items:center;margin:4px auto 0}.word-art svg{width:110px;height:110px;filter:drop-shadow(0 5px 1px #e1be6422)}.example-word{font-size:28px;line-height:1.5;margin:4px 0 8px;font-weight:700;color:#7c6947}.example-word .highlight{color:#b38742}.letter-fact{border-top:1px dashed #e7dabd;padding-top:10px;font-size:10px;color:#a69374;text-align:center;width:100%}.lesson-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed #e9e1d9;margin-top:25px;padding-top:20px;gap:15px}.lesson-bottom>p{font-size:10px;color:#a28e98;display:flex;gap:6px;align-items:center;margin:0}.lesson-bottom>p>span{font-size:18px;color:#d2ad66}.primary-button{border:0;background:var(--purple);color:white;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:15px;min-height:47px;padding:10px 20px;font-size:12px;box-shadow:0 3px 0 #5e45834a;transition:background .15s,transform .15s}.primary-button:hover:not(:disabled){background:var(--purple-dark);transform:translateY(-1px)}.primary-button .icon{width:19px;height:19px}.page-footer{display:flex;justify-content:space-between;align-items:center;padding:27px 2px 22px;font-size:10px;color:#b2a19f}.footer-flower{font-size:17px;color:#cdafb2;margin-right:4px;display:inline-block;vertical-align:middle}.writing-panel{margin-top:17px;border:1px solid #e5ddec;border-radius:15px;overflow:hidden;background:white}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:6px 14px;background:#faf7fc;border-bottom:1px solid #ece5f0;gap:10px}.pen-colors{display:flex;align-items:center;gap:9px}.pen-colors>span{font-size:10px;color:#a18da9;margin-left:3px}.color-swatch{height:22px;width:22px;border-radius:50%;border:3px solid white;background:var(--swatch);box-shadow:0 0 0 1px transparent;padding:0}.color-swatch.selected{box-shadow:0 0 0 2px var(--swatch)}.canvas-actions{display:flex;gap:5px}.canvas-actions>button{border:none;background:transparent;display:flex;align-items:center;gap:5px;color:#9a8ba5;padding:5px 7px;font-size:10px}.canvas-actions .icon{width:18px;height:18px}.writing-surface{position:relative;width:100%;aspect-ratio:800/330;min-height:225px;background:#fffdfb;overflow:hidden;touch-action:none;direction:ltr}#guide-svg,#writing-canvas{position:absolute;inset:0;width:100%;height:100%}#writing-canvas{touch-action:none;cursor:crosshair}#guide-svg .rule-line{stroke:#eee6ef;stroke-width:1.3;stroke-dasharray:6 7}#guide-svg .baseline{stroke:#e6abb9;stroke-width:1.5}.guide-stroke{stroke:#ddd2e6;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;fill:none}.guide-dash{stroke:#aa91bc;stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;fill:none}.guide-stroke.faint{stroke:#e9e1ed}.demo-stroke{stroke:#8567b0;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;fill:none}.start-circle{fill:#e3b657;stroke:white;stroke-width:3}.start-number{font-size:11px;fill:white;text-anchor:middle;dominant-baseline:central;font-family:Kitabi,sans-serif}.canvas-hint{position:absolute;bottom:10px;right:13px;font-size:9px;color:#b6a8b7;pointer-events:none;direction:rtl}.canvas-footer{display:flex;justify-content:space-between;gap:8px;align-items:center;min-height:47px;padding:7px 13px;border-top:1px solid #eee5ef;flex-wrap:wrap;background:#fffcff}.text-button{background:none;border:0;color:#8b6ba3;display:flex;gap:7px;align-items:center;font-size:10px;padding:5px 0}.text-button:hover{color:#594077}.text-button .icon{width:16px;height:16px}.canvas-footer>p{font-size:9px;color:#a69aaa;margin:0}.guide-toggle{display:flex;align-items:center;gap:6px;font-size:9px;color:#9b8aa4;cursor:pointer}.guide-toggle input{position:absolute;opacity:0;width:1px;height:1px}.toggle-switch{width:25px;height:15px;border-radius:12px;background:#e0d8e7;position:relative;transition:background .2s}.toggle-switch:after{content:'';width:11px;height:11px;border-radius:50%;background:white;position:absolute;right:2px;top:2px;transition:transform .2s}.guide-toggle input:checked+.toggle-switch{background:#9a7eb9}.guide-toggle input:checked+.toggle-switch:after{transform:translateX(-10px)}.guide-toggle input:focus-visible+.toggle-switch{outline:3px solid #ad74c7;outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{background:#fffdf9;color:var(--ink);border:1px solid #eee2d9;border-radius:24px;box-shadow:0 20px 100px #49344b2b;padding:37px 32px;max-width:440px;width:calc(100% - 30px);direction:rtl}dialog::backdrop{background:#4a3c565e;backdrop-filter:blur(4px)}dialog h2{font-size:23px;margin:7px 0 14px}dialog p,dialog li{font-size:12px;line-height:2;color:#8e7e91}dialog ol{padding-right:20px}dialog li{margin:10px 0}.close-dialog{position:absolute;left:14px;top:10px;border:none;background:#f6f0f2;width:30px;height:30px;border-radius:50%;font-size:23px;line-height:1;display:grid;place-items:center;color:#a28b9e}.dialog-kicker{font-size:11px;color:#b591a1}.helper-note{background:#f5f0f9;border-radius:10px;padding:11px 14px}.privacy-note{font-size:10px!important;color:#a99da7!important}.help-dialog>.primary-button{margin-top:18px;min-width:100px}.celebration-dialog{text-align:center;padding-top:29px;overflow:hidden}.celebration-stars{color:#deb957;font-size:26px;letter-spacing:8px;margin-bottom:10px}.celebration-stars>span{font-size:50px;display:inline-block;vertical-align:middle;color:#efc75c}.completed-letter{display:grid;place-items:center;width:95px;height:95px;border-radius:30px;background:#eee6f7;color:#8a66ab;font-size:65px;font-weight:700;margin:17px auto 24px;transform:rotate(-5deg)}.celebration-dialog .primary-button{width:100%;font-size:11px}.celebration-dialog .text-button{margin:12px auto 0;font-size:11px}.celebration-dialog[open] .completed-letter{animation:pop .45s ease-out}@keyframes pop{from{transform:scale(.65) rotate(-15deg)}to{transform:scale(1) rotate(-5deg)}}
@media(min-width:1400px){.wrap{max-width:1330px}.welcome{padding-top:35px;padding-bottom:30px}.learning-layout{grid-template-columns:249px minmax(0,1fr);gap:27px}.letter-sidebar{padding:27px 22px}.lesson-content{padding:28px 34px 25px}.recognize-panel{min-height:300px}.large-letter{font-size:150px;min-height:190px}.word-art{height:124px}.word-art svg{height:122px;width:122px}.letter-fact{margin-top:auto}.progress-card{margin-top:32px}.letter-tile{min-height:83px}.sidebar-note{margin-top:24px}}
@media(max-width:1000px){.wrap{padding-inline:24px}.learning-layout{grid-template-columns:207px minmax(0,1fr);gap:16px}.letter-sidebar{padding:19px 15px}.sidebar-heading h2{font-size:14px}.little-label{font-size:8px}.letter-grid{gap:7px}.letter-tile{min-height:72px}.step{padding:9px 7px;gap:6px}.step>.icon{display:none}.lesson-content{padding:21px}.recognize-panel{gap:14px;min-height:260px}.lesson-heading h2{font-size:18px}.lesson-bottom{gap:10px}.lesson-bottom .primary-button{font-size:10px;padding:10px 14px}.lesson-bottom>p{font-size:9px}.welcome h1{font-size:29px}.pencil-art{margin-left:10px;width:160px}.writing-surface{min-height:250px}.canvas-footer>p{display:none}}
@media(max-width:730px){.wrap{padding-inline:18px}.topbar{height:84px}.brand-mark{width:42px;height:46px;border-radius:14px;font-size:35px}.brand{gap:9px}.brand strong{font-size:17px}.brand small{font-size:10px}.header-actions{gap:8px}.age-tag{display:none}.help-button{font-size:10px;padding:7px 10px;border-radius:9px}.welcome{min-height:148px;padding:24px 0 21px;gap:5px}.welcome .eyebrow{font-size:9px}.welcome h1{font-size:25px;letter-spacing:-.9px;line-height:1.9;max-width:260px}.welcome p{font-size:10px;line-height:1.9}.pencil-art{width:100px;margin-left:0;margin-right:-4px;align-self:center}.learning-layout{display:flex;flex-direction:column;gap:17px}.letter-sidebar{width:100%;padding:15px 15px 13px;border-radius:17px}.sidebar-heading h2{font-size:14px}.little-label{font-size:9px}.sidebar-description{display:none}.letter-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:12px}.letter-tile{min-height:66px;border-radius:10px}.letter-tile .tile-letter{font-size:27px}.tile-name{font-size:8px}.progress-card{background:none;border:0;border-top:1px dashed #e9e1d7;border-radius:0;padding:10px 0 0;margin:13px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.progress-heading{font-size:9px}.progress-heading>.icon{display:none}.progress-flowers{gap:3px;margin:0;margin-right:auto}.progress-flower{font-size:19px}.progress-card>p{margin:0;font-size:9px;order:1}.progress-card small{display:none}.progress-track{flex:1;order:2;height:4px;min-width:70px}.sidebar-note{display:none}.workbook{width:100%;border-radius:18px}.steps{padding:7px;gap:2px}.step{padding:9px 5px;gap:6px;border-radius:10px;justify-content:center}.step-number{width:25px;height:25px;font-size:11px}.step strong{font-size:12px}.step small{font-size:8px}.lesson-content{padding:20px 16px 18px}.lesson-heading h2{font-size:18px}.lesson-heading .eyebrow{font-size:9px}.lesson-counter{font-size:9px;padding:3px 7px}.recognize-panel{gap:11px;margin-top:17px;min-height:235px}.letter-display{border-radius:14px;padding:12px 6px}.large-letter{font-size:113px;min-height:145px;line-height:1.3}.letter-name{font-size:13px}.display-caption{font-size:8px}.spark-one{right:15px;top:43px;font-size:16px}.spark-two{left:13px;top:92px;font-size:21px}.word-display{border-radius:14px;padding:13px 7px 10px}.word-tag{font-size:9px}.word-art{width:95px;height:94px}.word-art svg{width:96px;height:96px}.example-word{font-size:24px;margin-bottom:7px}.letter-fact{font-size:8px;line-height:2;padding-top:7px}.lesson-bottom{flex-direction:column;align-items:stretch;gap:13px;margin-top:19px;padding-top:13px}.lesson-bottom>p{font-size:9px;justify-content:center}.lesson-bottom .primary-button{font-size:12px;width:100%;min-height:47px}.page-footer{font-size:8px;padding:19px 0;gap:10px}.footer-flower{font-size:12px}.writing-panel{margin-top:15px}.writing-surface{min-height:250px;aspect-ratio:auto;height:270px}.canvas-toolbar{padding:7px 10px}.canvas-footer{padding:8px 9px;gap:5px;min-height:48px}.canvas-footer .text-button{font-size:9px}.canvas-footer .guide-toggle{font-size:8px}.canvas-hint{right:9px;bottom:9px;font-size:8px}.pen-colors{gap:8px}.pen-colors>span{font-size:9px}.canvas-actions>button{padding:5px}.canvas-actions>button span{font-size:9px}dialog{padding:33px 23px}.welcome .title-doodle{bottom:7px}}
@media(max-width:370px){.wrap{padding-inline:13px}.welcome h1{font-size:22px}.pencil-art{width:80px}.welcome .eyebrow{font-size:8px}.welcome p{font-size:9px}.letter-grid{gap:5px}.letter-tile{min-height:59px}.tile-name{font-size:7px}.letter-tile .tile-letter{font-size:25px}.step small{font-size:7px}.step strong{font-size:11px}.step-number{width:22px;height:22px}.lesson-content{padding:17px 12px}.lesson-heading h2{font-size:16px}.recognize-panel{gap:9px}.large-letter{font-size:100px}.canvas-footer .guide-toggle{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}
.primary-button{min-height:50px;font-size:14px}.step strong{font-size:15px}.letter-name{font-size:18px}.lesson-heading h2{font-size:23px}.example-word{font-size:31px}.letter-fact{font-size:12px;color:#8d7758}.tile-name{font-size:11px;color:#82738d}.display-caption{font-size:11px;color:#947ba2}.lesson-bottom>p{font-size:11px;color:#8f7b87}.help-button{min-height:42px}.color-swatch{height:36px;width:36px;border-width:6px}.pen-colors{gap:7px}.canvas-actions>button{min-height:40px;min-width:40px;justify-content:center}.canvas-toolbar{min-height:55px}.canvas-footer .text-button{min-height:40px;font-size:11px}.guide-toggle{min-height:40px;font-size:10px}.canvas-footer>p{font-size:10px}.canvas-hint{font-size:10px;color:#9d899f}.step small{color:#8a7b90}.sidebar-description{color:#867880}
@media(max-width:1000px){.lesson-heading h2{font-size:21px}.letter-fact{font-size:11px}.lesson-bottom .primary-button{font-size:13px}.step strong{font-size:14px}.tile-name{font-size:10px}}
@media(max-width:730px){.lesson-heading h2{font-size:19px}.step strong{font-size:13px}.letter-name{font-size:16px}.tile-name{font-size:9px}.example-word{font-size:28px}.letter-fact{font-size:10px}.display-caption{font-size:9px}.lesson-bottom>p{font-size:11px}.lesson-bottom .primary-button{font-size:14px;min-height:50px}.canvas-footer .text-button{font-size:10px}.canvas-footer .guide-toggle{font-size:9px}.canvas-hint{font-size:9px}.canvas-actions>button{padding:4px;min-width:34px}.pen-colors>span{font-size:9px}.color-swatch{height:34px;width:34px}.canvas-footer{min-height:54px}.writing-surface{height:270px}}
@media(max-width:370px){.lesson-heading h2{font-size:17px}.step strong{font-size:11px}.step-number{width:22px;height:22px}.letter-fact{font-size:9px}.tile-name{font-size:8px}.canvas-footer .guide-toggle{font-size:8px}.canvas-footer .text-button{font-size:9px}.color-swatch{width:30px;height:30px}.pen-colors{gap:5px}}

.help-dialog ol{list-style-type:arabic-indic}

.hub-return{display:block;background:#eee7f6;text-align:center;padding:9px 15px;color:#6c558c;text-decoration:none;font-size:12px;min-height:42px}.hub-return:hover{text-decoration:underline}