:root{--color-cream:#faf6ee;--color-paper:#fffdf8;--color-ink:#1c1b1a;--color-muted:#7a746b;--color-amber:#d97742;--color-rose:#c4483b;--color-sage:#6b8f71;--color-subject:#b5651d;--color-verb:#6b4c9a;--color-object:#2f6f76;--color-adverbial:#5b7b3f;--font-display:"Fraunces", serif;--font-mono:"IBM Plex Mono", monospace;--font-arabic:"Amiri", serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background-color:var(--color-cream);color:var(--color-ink);font-family:var(--font-mono);-webkit-font-smoothing:antialiased}#root{min-height:100vh}button{cursor:pointer;font-family:inherit}.app{max-width:820px;margin:0 auto;padding:24px 16px 48px}.header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.title{font-family:var(--font-display);margin:0;font-size:1.6rem}.header__right{align-items:center;gap:12px;display:flex}.score{font-size:1.1rem;font-weight:600}.restart-button{border:1px solid var(--color-muted);color:var(--color-muted);background:0 0;border-radius:8px;padding:6px 12px}.card{background:var(--color-paper);border-radius:20px;padding:28px 24px;box-shadow:0 2px #1c1b1a0f,0 12px 32px #1c1b1a0f}.card__top{color:var(--color-muted);justify-content:space-between;margin-bottom:16px;font-size:.85rem;display:flex}.arabic-row{justify-content:center;align-items:center;gap:16px;display:flex}.arabic-sentence{font-family:var(--font-arabic);text-align:center;margin:0;font-size:clamp(2rem,6vw,3rem)}.listen-button{background:var(--color-cream);border:none;border-radius:50%;width:48px;height:48px;font-size:1.3rem}.voice-warning{text-align:center;color:var(--color-rose);font-size:.8rem}.chunks{flex-wrap:wrap;justify-content:center;gap:12px;margin:28px 0;display:flex}.chunk{--chunk-color:var(--color-ink);border:2px solid var(--chunk-color);border-radius:14px;min-width:90px;padding:8px 12px 10px}.chunk--subject{--chunk-color:var(--color-subject)}.chunk--verb{--chunk-color:var(--color-verb)}.chunk--object{--chunk-color:var(--color-object)}.chunk--adverbial{--chunk-color:var(--color-adverbial)}.chunk__label{text-transform:uppercase;letter-spacing:.05em;color:var(--chunk-color);margin-bottom:6px;font-size:.7rem;display:block}.chunk__words{gap:14px;display:flex}.word{border-radius:8px;flex-direction:column;align-items:center;padding:4px 6px;display:flex}.word--active{background:var(--color-cream);outline:2px dashed var(--color-amber)}.word__english{letter-spacing:.05em;color:var(--color-muted);font-size:1.1rem;font-weight:600;display:inline-block}.word--done .word__english{color:var(--color-sage);letter-spacing:normal}.word__ipa{color:var(--color-muted);font-size:.75rem}.word__gloss{font-family:var(--font-arabic);font-size:1.1rem}.input-wrap{max-width:420px;margin:0 auto}.answer-input{width:100%;font-family:var(--font-mono);border:none;border-bottom:3px solid var(--color-ink);text-align:center;background:0 0;outline:none;padding:12px 4px;font-size:1.2rem}.answer-input:focus{border-bottom-color:var(--color-amber)}.answer-input--wrong,.answer-input--wrong:focus{border-bottom-color:var(--color-rose);color:var(--color-rose)}.hint{text-align:center;color:var(--color-muted);min-height:1.2em;font-size:.85rem}.complete,.finished{text-align:center}.complete__text{font-family:var(--font-display);color:var(--color-sage);font-size:1.4rem}.next-button{background:var(--color-amber);color:#fff;border:none;border-radius:10px;padding:12px 20px;font-size:1rem}.finished h2{font-family:var(--font-display)}.keyboard{-webkit-user-select:none;user-select:none;flex-direction:column;gap:6px;max-width:560px;margin:24px auto 0;display:flex}.keyboard__row{justify-content:center;gap:6px;display:flex}.key{background:var(--color-cream);max-width:48px;height:46px;color:var(--color-ink);border:none;border-radius:8px;flex:1;font-size:1rem;font-weight:500;box-shadow:0 3px #e2d9c8}.key--wide{flex:1.5;max-width:72px}.key--space{max-width:300px;color:var(--color-muted);flex:1;font-size:.8rem}.key--pressed{background:var(--color-amber);color:#fff;box-shadow:0 0 #e2d9c8}@media (width<=480px){.keyboard__row{gap:4px}.key{height:40px;font-size:.9rem}}.tabs{gap:8px;margin:-16px 0 20px;display:flex}.tab{background:var(--color-paper);color:var(--color-muted);border:2px solid #0000;border-radius:12px;flex:1;padding:10px 12px;font-size:.95rem;font-weight:500}.tab--active{border-color:var(--color-amber);color:var(--color-ink)}.level-title{text-align:center;font-family:var(--font-display);margin:0 0 16px;font-size:1.1rem}.step-badge{color:var(--color-object);font-weight:600}.step-badge--review{color:var(--color-verb)}.big-letter{font-family:var(--font-display);text-align:center;min-width:2ch;margin:0;font-size:clamp(3.5rem,12vw,5.5rem);font-weight:700}.big-letter--done{color:var(--color-sage)}.letter-word{justify-content:center;align-items:center;gap:12px;margin-top:8px;display:flex}.letter-word__emoji{font-size:2.6rem}.letter-word__text{letter-spacing:.04em;font-size:1.6rem}.letter-word__text strong{color:var(--color-amber)}.letter-sound{text-align:center;font-family:var(--font-arabic);margin:12px 0 24px;font-size:1.3rem}.levels{gap:8px;margin-bottom:16px;display:flex}.level-button{border:2px solid var(--color-muted);color:var(--color-muted);background:0 0;border-radius:10px;flex:1;padding:8px 10px;font-size:.85rem}.level-button--active{border-color:var(--color-object);background:var(--color-object);color:#fff}.word-emoji{font-size:clamp(3.5rem,12vw,5rem);line-height:1}.sound-box{flex-direction:column;align-items:center;min-width:64px;padding:4px 6px;display:flex}.sound-box__letter{font-family:var(--font-display);font-size:2.4rem;font-weight:700;line-height:1.1}.sound-box__say{color:var(--color-muted);font-size:.8rem}.sound-box__arabic{font-family:var(--font-arabic);font-size:1.3rem}.level-button:disabled{opacity:.55;cursor:not-allowed}.finish-buttons{flex-wrap:wrap;justify-content:center;gap:12px;margin:16px 0;display:flex}.next-button:disabled{background:var(--color-muted);opacity:.6;cursor:not-allowed}.finish-buttons .restart-button{padding:12px 20px;font-size:1rem}.chunk--sight{--chunk-color:var(--color-amber)}.chunk--magic{--chunk-color:#b8860b}.levels{flex-wrap:wrap}.level-button{min-width:150px}.word-example{text-align:center;color:var(--color-muted);margin:-8px 0 16px;font-size:1.1rem;font-style:italic}.word-arabic-big{font-family:var(--font-arabic);color:var(--color-amber);font-size:clamp(3rem,10vw,4.5rem);font-weight:700;line-height:1.1}.word-example-arabic{text-align:center;font-family:var(--font-arabic);margin:-12px 0 20px;font-size:1.2rem}.review-note{text-align:center;color:var(--color-verb);margin:-12px 0 12px;font-size:.95rem}.story-title{text-align:center;font-family:var(--font-display);margin:4px 0 8px;font-size:1.1rem}.story-lines{background:var(--color-cream);text-align:center;color:var(--color-muted);border-radius:12px;margin:0 0 12px;padding:8px 16px}.story-lines p{margin:4px 0}.sentence-words{flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0 24px;display:flex}.sentence-word{letter-spacing:.05em;color:var(--color-muted);border:2px solid #0000;border-radius:10px;padding:6px 10px;font-size:1.2rem;font-weight:600}.sentence-word--done{color:var(--color-sage);letter-spacing:normal}.sentence-word--active{background:var(--color-cream);border:2px dashed var(--color-amber);color:var(--color-ink)}.sentence-word--question{color:var(--color-ink);letter-spacing:normal;text-align:center;flex-basis:100%}.group-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;margin-bottom:16px;display:grid}.group-button{border:2px solid var(--color-muted);color:var(--color-muted);background:0 0;border-radius:10px;padding:6px 4px;font-size:.85rem}.group-button--active{border-color:var(--color-amber);background:var(--color-amber);color:#fff}.spell-answer{font-family:var(--font-display);color:var(--color-sage);margin:0 0 8px;font-size:clamp(2.6rem,9vw,3.6rem);font-weight:700}.listen-button--big{width:96px;height:96px;margin:8px 0;font-size:2.6rem}