.shell-header{position:sticky;top:0;z-index:40;height:var(--header-h);background:#071321d1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--surface-line)}.shell-header__inner{height:100%;max-width:1180px;margin:0 auto;padding-inline:var(--space-5);display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}.shell-brand{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:900;font-size:var(--fs-lg);color:var(--text);flex-shrink:0}.shell-brand__mark{width:22px;height:22px;border-radius:50%;border:2px solid var(--blue);border-top-color:var(--cyan);display:inline-block}.shell-nav{display:flex;align-items:center;gap:var(--space-2);overflow-x:auto}.shell-nav__link{padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);color:var(--muted);font-size:var(--fs-sm);font-weight:600;white-space:nowrap;transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}.shell-nav__link:hover{color:var(--text);background:var(--surface)}.shell-nav__link.is-active{color:var(--bg-deep);background:var(--blue)}.shell-main{max-width:1180px;margin:0 auto;padding:var(--space-6) var(--space-5) var(--space-8);min-height:calc(100vh - var(--header-h))}.shell-main--lesson{max-width:none;padding:0;min-height:100vh}@media (max-width: 640px){.shell-header__inner{padding-inline:var(--space-4)}.shell-nav__link{padding:var(--space-2) var(--space-3);font-size:var(--fs-xs)}.shell-main{padding:var(--space-5) var(--space-4) var(--space-7)}}.home{display:flex;flex-direction:column;gap:var(--space-8)}.home-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-7);align-items:center;padding-block:var(--space-6)}.home-eyebrow{color:var(--cyan);font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em;margin-bottom:var(--space-3)}.home-title{font-size:var(--fs-3xl);line-height:1.2;margin-bottom:var(--space-4)}.home-subtitle{color:var(--muted);font-size:var(--fs-md);max-width:46ch;margin-bottom:var(--space-5)}.home-cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}.home-stat-row{display:flex;gap:var(--space-6);margin-top:var(--space-6)}.home-stat{display:flex;flex-direction:column}.home-stat__value{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:900;color:var(--gold)}.home-stat__label{color:var(--muted);font-size:var(--fs-xs)}.orbit-graphic{display:flex;align-items:center;justify-content:center}.home-section-title{font-size:var(--fs-xl);margin-bottom:var(--space-4)}.stage-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.stage-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--surface);border:1px solid var(--surface-line);border-radius:var(--radius-md)}.stage-card__index{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:900;color:var(--blue);flex-shrink:0}.stage-card__body h3{font-size:var(--fs-md);margin-bottom:var(--space-1)}.stage-card__body p{color:var(--muted);font-size:var(--fs-sm)}.stage-card__progress{margin-inline-start:auto;color:var(--muted);font-size:var(--fs-sm);font-weight:700;flex-shrink:0}@media (max-width: 900px){.home-hero{grid-template-columns:1fr}.orbit-graphic{order:-1}.stage-list{grid-template-columns:1fr}}.curriculum{display:flex;flex-direction:column;gap:var(--space-7)}.curriculum-header h1{font-size:var(--fs-2xl);margin-bottom:var(--space-2)}.curriculum-header p{color:var(--muted)}.curriculum-stage h2{font-size:var(--fs-lg);margin-bottom:var(--space-1)}.curriculum-stage__goal{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--space-4)}.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3)}.lesson-node{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--surface);border:1px solid var(--surface-line);border-radius:var(--radius-md);position:relative}.lesson-node.is-complete{border-color:var(--green)}.lesson-node.is-locked{opacity:.45;cursor:not-allowed}.lesson-node__status{width:32px;height:32px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--fs-sm);background:var(--bg-soft);border:1px solid var(--border)}.lesson-node__status.is-complete{background:var(--green);color:var(--bg-deep);border-color:var(--green)}.lesson-node__status.is-open{border-color:var(--blue);color:var(--blue)}.lesson-node__title{font-size:var(--fs-sm);font-weight:600}.lesson-node__badge{position:absolute;top:var(--space-2);left:var(--space-2);font-size:10px;color:var(--gold);border:1px solid var(--gold-glow);border-radius:var(--radius-pill);padding:2px 8px}.lesson-intro{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-5)}.lesson-intro__card{max-width:480px;width:100%;padding:var(--space-7) var(--space-6);text-align:center}.lesson-intro__eyebrow{color:var(--cyan);font-size:var(--fs-xs);font-weight:700;margin-bottom:var(--space-3)}.lesson-intro__title{font-size:var(--fs-2xl);margin-bottom:var(--space-3)}.lesson-intro__goal{color:var(--muted);margin-bottom:var(--space-5)}.lesson-intro__chars{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-5)}.lesson-intro__char{width:44px;height:44px;border-radius:var(--radius-md);background:var(--bg-soft);border:1px solid var(--gold-glow);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);color:var(--gold)}.lesson-intro__sentence{font-size:var(--fs-sm);color:var(--text);margin-bottom:var(--space-6);line-height:1.7}.lesson-intro__start{width:100%;padding-block:var(--space-4);font-size:var(--fs-md);margin-bottom:var(--space-4)}.lesson-intro__meta{font-size:var(--fs-xs);color:var(--muted)}.lesson-toolbar{height:var(--lesson-bar-h);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--space-5);border-bottom:1px solid var(--surface-line)}.lesson-toolbar__exit{color:var(--muted);font-size:var(--fs-sm);font-weight:600}.lesson-toolbar__exit:hover{color:var(--text)}.lesson-toolbar__center{display:flex;flex-direction:column;align-items:center;gap:6px}.lesson-toolbar__title{font-size:var(--fs-sm);font-weight:700;color:var(--text)}.lesson-toolbar__dots{display:flex;gap:5px}.lesson-toolbar__dot{width:6px;height:6px;border-radius:50%;background:var(--border)}.lesson-toolbar__dot.is-active{background:var(--blue)}.lesson-toolbar__actions{display:flex;gap:var(--space-2)}.lesson-toolbar__btn{font-size:var(--fs-xs);color:var(--muted);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--border)}.lesson-toolbar__btn:hover{color:var(--text);border-color:var(--blue)}.lesson-complete{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-5)}.lesson-complete__card{position:relative;overflow:hidden;max-width:480px;width:100%;padding:var(--space-7) var(--space-6);text-align:center}.lesson-complete__eyebrow{color:var(--green);font-weight:700;font-size:var(--fs-sm);margin-bottom:var(--space-2)}.lesson-complete__title{font-size:var(--fs-xl);margin-bottom:var(--space-5)}.lesson-complete__stats{display:flex;justify-content:center;gap:var(--space-7);margin-bottom:var(--space-5)}.lesson-complete__stats>div{display:flex;flex-direction:column}.lesson-complete__value{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:900;color:var(--gold)}.lesson-complete__label{font-size:var(--fs-xs);color:var(--muted)}.lesson-complete__hint{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--space-5)}.lesson-complete__actions{display:flex;flex-direction:column;gap:var(--space-3)}.practice-text{font-family:var(--font-mono);font-size:clamp(1.5rem,3vw,2.25rem);line-height:2.1;letter-spacing:.01em;text-align:center;max-width:46ch;margin:0 auto;word-break:break-word}.practice-text__char{position:relative;border-radius:4px;padding-inline:1px}.practice-text__char.is-done{color:var(--muted)}.practice-text__char.is-current{color:var(--text);font-weight:700}.practice-text__char.is-upcoming{color:#f0f8ff59}.cursor-bar:before{content:"";position:absolute;inset-inline-start:-1px;top:4px;bottom:4px;width:2px;background:var(--blue);border-radius:2px}.cursor-underline:after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--blue);border-radius:2px}.cursor-block{background:var(--blue-glow);outline:1px solid var(--blue)}.cursor-halo{box-shadow:0 0 0 4px var(--blue-glow)}.keyboard-guide{display:flex;flex-direction:column;gap:6px;padding:var(--space-4);background:var(--surface);border:1px solid var(--surface-line);border-radius:var(--radius-md);width:fit-content;margin-inline:auto}.keyboard-guide__row{display:flex;gap:6px;justify-content:center}.keyboard-guide__key{width:34px;height:34px;border-radius:8px;background:var(--bg-soft);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);color:var(--muted);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.keyboard-guide__row--space .keyboard-guide__key{width:220px}.keyboard-guide__key.is-active{background:var(--blue);border-color:var(--cyan);color:var(--bg-deep);transform:translateY(-2px);box-shadow:0 6px 16px var(--blue-glow)}@media (max-width: 640px){.keyboard-guide{display:none}}.hand-guide{display:flex;align-items:flex-end;justify-content:center;gap:var(--space-5);padding:var(--space-3) var(--space-4)}.hand-guide__hand{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.hand-guide__label{font-size:10px;color:var(--muted);letter-spacing:.04em}.hand-guide__fingers{display:flex;gap:6px;align-items:flex-end}.hand-guide__finger{width:12px;height:34px;border-radius:6px;background:var(--surface);border:1px solid var(--border);transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.hand-guide__finger--thumb{width:22px;height:14px;margin-bottom:4px}.hand-guide__finger.is-active{background:var(--gold);border-color:var(--gold);transform:translateY(-4px);box-shadow:0 4px 12px var(--gold-glow)}.hand-guide__thumb-row{padding-bottom:6px}@media (max-width: 480px){.hand-guide{display:none}}.live-stats{position:fixed;bottom:var(--space-5);inset-inline:0;margin-inline:auto;width:fit-content;display:flex;gap:var(--space-5);background:var(--surface);border:1px solid var(--surface-line);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-6);box-shadow:var(--shadow-card);z-index:20}.live-stats__item{display:flex;flex-direction:column;align-items:center}.live-stats__value{font-family:var(--font-display);font-weight:800;font-size:var(--fs-md);color:var(--cyan)}.live-stats__label{font-size:10px;color:var(--muted)}.lesson-page{min-height:100vh;display:flex;flex-direction:column}.lesson-page__body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-7);padding:var(--space-6) var(--space-5) var(--space-8)}.lesson-page__guides{display:flex;justify-content:center}.lesson-page__mismatch{position:fixed;top:calc(var(--lesson-bar-h) + var(--space-3));inset-inline:0;margin-inline:auto;width:fit-content;max-width:90vw;background:var(--surface);border:1px solid var(--red);color:var(--red);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);font-size:var(--fs-sm);z-index:30}.lesson-missing{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-8);text-align:center}.profile{display:flex;flex-direction:column;gap:var(--space-7);max-width:720px}.profile-header h1{font-size:var(--fs-2xl);margin-bottom:var(--space-4)}.profile-name-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:320px}.profile-name-field span{font-size:var(--fs-xs);color:var(--muted)}.profile-name-field input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}.profile-name-field input:focus-visible{border-color:var(--blue)}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}.profile-stat{padding:var(--space-5);display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.profile-stat__value{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:900;color:var(--gold)}.profile-stat__label{font-size:var(--fs-xs);color:var(--muted);text-align:center}.profile-stages h2{font-size:var(--fs-md);margin-bottom:var(--space-4)}.profile-stage-row{display:flex;align-items:center;gap:var(--space-3);padding-block:var(--space-2)}.profile-stage-row__label{width:130px;flex-shrink:0;font-size:var(--fs-sm)}.profile-stage-row__bar{flex:1;height:8px;background:var(--surface);border-radius:var(--radius-pill);overflow:hidden}.profile-stage-row__fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:var(--radius-pill);transition:width var(--dur-slow) var(--ease-out)}.profile-stage-row__count{width:44px;text-align:end;font-size:var(--fs-xs);color:var(--muted);flex-shrink:0}.profile-data{padding:var(--space-6)}.profile-data h2{font-size:var(--fs-md);margin-bottom:var(--space-2)}.profile-data p{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--space-4)}.profile-data__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}.profile-data__message{margin-top:var(--space-3);color:var(--green);font-size:var(--fs-sm)}.profile-data__danger{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--surface-line)}.profile-data__reset-link{color:var(--red);font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:3px}.profile-data__confirm p{color:var(--text);margin-bottom:var(--space-3)}@media (max-width: 640px){.profile-stats{grid-template-columns:repeat(2,1fr)}}.assessment{min-height:60vh;display:flex;align-items:center;justify-content:center}.assessment__card{max-width:520px;width:100%;padding:var(--space-7) var(--space-6);text-align:center}.assessment__card h1{font-size:var(--fs-xl);margin-bottom:var(--space-4)}.assessment__card p{color:var(--muted);margin-bottom:var(--space-5)}.assessment__skip{display:block;margin-top:var(--space-4);font-size:var(--fs-sm);color:var(--muted);text-decoration:underline;text-underline-offset:3px}.assessment__practice{width:100%;max-width:640px}.assessment__stats{display:flex;justify-content:center;gap:var(--space-7);margin-bottom:var(--space-5)}.assessment__stats span{display:block;font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:900;color:var(--gold)}.assessment__stats small{color:var(--muted);font-size:var(--fs-xs)}.settings{display:flex;flex-direction:column;gap:var(--space-5);max-width:600px}.settings>h1{font-size:var(--fs-2xl)}.settings-group{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}.settings-group h2{font-size:var(--fs-md);margin-bottom:var(--space-2)}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);font-size:var(--fs-sm)}.settings-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue)}.settings-number{width:80px;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);text-align:center}.settings-segmented{display:flex;gap:var(--space-1);background:var(--bg-soft);border-radius:var(--radius-pill);padding:3px}.settings-segmented__btn{padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);font-size:var(--fs-xs);color:var(--muted)}.settings-segmented__btn.is-active{background:var(--blue);color:var(--bg-deep);font-weight:700}.not-found{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-3)}.not-found__eyebrow{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:900;color:var(--blue)}.not-found h1{font-size:var(--fs-xl)}.not-found__body{color:var(--muted);margin-bottom:var(--space-4)}:root{--bg-deep: #071321;--bg-soft: #0a1a2d;--surface: #0e263e;--surface-hover: #143452;--border: #214a6d;--text: #f0f8ff;--muted: #a8c3d6;--blue: #4ea3ff;--cyan: #73d6ff;--green: #5dcca3;--gold: #f2c76e;--red: #e47272;--blue-glow: rgba(78, 163, 255, .35);--cyan-glow: rgba(115, 214, 255, .35);--green-glow: rgba(93, 204, 163, .3);--gold-glow: rgba(242, 199, 110, .35);--red-glow: rgba(228, 114, 114, .3);--surface-line: rgba(33, 74, 109, .55);--font-display: "Tajawal", "IBM Plex Sans Arabic", sans-serif;--font-body: "IBM Plex Sans Arabic", "Tajawal", sans-serif;--font-mono: "IBM Plex Sans Arabic", monospace;--fs-xs: .8125rem;--fs-sm: .9375rem;--fs-base: 1rem;--fs-md: 1.125rem;--fs-lg: 1.375rem;--fs-xl: 1.75rem;--fs-2xl: 2.25rem;--fs-3xl: 3rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 22px;--radius-pill: 999px;--shadow-card: 0 12px 32px rgba(3, 10, 20, .45);--shadow-focus: 0 0 0 3px var(--blue-glow);--ease-out: cubic-bezier(.16, 1, .3, 1);--dur-fast: .16s;--dur-med: .42s;--dur-slow: .64s;--header-h: 64px;--lesson-bar-h: 68px}@media (prefers-reduced-motion: reduce){:root{--dur-fast: 0ms;--dur-med: 0ms;--dur-slow: 0ms}}:root[data-reduce-motion=true]{--dur-fast: 0ms;--dur-med: 0ms;--dur-slow: 0ms}@keyframes riseIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.enter-rise{animation:riseIn var(--dur-med) var(--ease-out) both}@keyframes softPulse{0%,to{box-shadow:0 0 0 0 var(--blue-glow)}50%{box-shadow:0 0 0 8px transparent}}.pulse-primary{animation:softPulse 7s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.pulse-primary{animation:none}}:root[data-reduce-motion=true] .pulse-primary{animation:none}.interactive-lift{transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}.interactive-lift:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 10px 28px #4ea3ff2e}.interactive-lift:active{transform:scale(.98)}@keyframes charGlow{0%,to{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 6px var(--gold-glow))}}.char-current{animation:charGlow 1.8s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.char-current{animation:none}}:root[data-reduce-motion=true] .char-current{animation:none}@keyframes correctFlash{0%{background-color:var(--green-glow)}to{background-color:transparent}}.flash-correct{animation:correctFlash .18s var(--ease-out)}@keyframes errorShake{0%,to{background-color:transparent}40%{background-color:var(--red-glow)}}.flash-error{animation:errorShake .16s linear}@keyframes fillProgress{0%{stroke-dashoffset:var(--dash-from, 100)}to{stroke-dashoffset:var(--dash-to, 0)}}.progress-fill{animation:fillProgress var(--dur-slow) var(--ease-out) forwards}@keyframes sheen{0%{transform:translate(-120%)}to{transform:translate(120%)}}.completion-sheen:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(100deg,transparent,rgba(240,248,255,.18),transparent);animation:sheen .9s var(--ease-out) 1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);font-weight:700;font-size:var(--fs-sm);border:1px solid transparent}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--cyan));color:var(--bg-deep);box-shadow:0 10px 24px var(--blue-glow)}.btn-ghost{background:transparent;border-color:var(--border);color:var(--text)}.btn-secondary{background:var(--surface);border-color:var(--border);color:var(--text)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.card{background:var(--surface);border:1px solid var(--surface-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(120% 100% at 50% -10%,var(--bg-soft) 0%,var(--bg-deep) 60%);color:var(--text);font-family:var(--font-body);font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:700}p{margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:none;border:none}a{color:inherit;text-decoration:none}ul{margin:0;padding:0;list-style:none}:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--radius-sm)}::selection{background:var(--blue-glow);color:var(--text)}.ambient-field{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 22%,rgba(240,248,255,.35),transparent),radial-gradient(1px 1px at 78% 12%,rgba(240,248,255,.25),transparent),radial-gradient(1.5px 1.5px at 45% 68%,rgba(115,214,255,.25),transparent),radial-gradient(1px 1px at 88% 78%,rgba(240,248,255,.2),transparent),radial-gradient(1px 1px at 25% 85%,rgba(240,248,255,.18),transparent);opacity:.6}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;right:var(--space-4);top:-60px;background:var(--surface);color:var(--text);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--border);z-index:100;transition:top var(--dur-fast) var(--ease-out)}.skip-link:focus{top:var(--space-3)}