:root{--text:#6b6375;--text-h:#08060d;--bg:#faf9fb;--panel-bg:#fff;--key-bg:#fff;--key-bg-hover:#f4f2f7;--border:#e5e4e7;--accent:#7c3aed;--accent-bg:#7c3aed1a;--accent-border:#7c3aed80;--social-bg:#7c3aed0f;--shadow:#00000014 0 10px 15px -3px, #0000000a 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", Consolas, monospace;--jawi:"Scheherazade New", "Noto Naskh Arabic", "Amiri", "Geeza Pro", "Segoe UI", serif;font:16px/1.5 var(--sans);color:var(--text);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#9ca3af;--text-h:#f3f4f6;--bg:#131218;--panel-bg:#1c1b22;--key-bg:#232128;--key-bg-hover:#2c2a33;--border:#34323d;--accent:#a78bfa;--accent-bg:#a78bfa29;--accent-border:#a78bfa80;--social-bg:#a78bfa1a;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}}*{box-sizing:border-box}body{min-height:100svh;margin:0}h1{color:var(--text-h);font-weight:600}.lang[data-v-c06775eb]{background:var(--social-bg);border-radius:999px;gap:4px;padding:4px;display:inline-flex}.lang__btn[data-v-c06775eb]{font:inherit;letter-spacing:.04em;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}.lang__btn--on[data-v-c06775eb]{background:var(--panel-bg);color:var(--text-h);box-shadow:var(--shadow)}.lang__btn[data-v-c06775eb]:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px}.app[data-v-f1a51671]{text-align:left;flex-direction:column;gap:20px;max-width:920px;margin:0 auto;padding:32px 20px 48px;display:flex}.app__header[data-v-f1a51671]{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.app__intro[data-v-f1a51671]{min-width:0}.app__lang[data-v-f1a51671]{flex:none}.app__brand[data-v-f1a51671]{color:inherit;text-decoration:none}.app__header h1[data-v-f1a51671]{letter-spacing:-1px;margin:0 0 6px;font-size:40px}.app__tagline[data-v-f1a51671]{color:var(--text);font-size:16px}.app__footer[data-v-f1a51671]{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:8px;font-size:13px;display:flex}.app__about[data-v-f1a51671]{color:var(--accent);font-weight:600;text-decoration:none}.app__about[data-v-f1a51671]:hover{text-decoration:underline}.app__copyright[data-v-f1a51671]{color:var(--text)}@media (width<=600px){.app[data-v-f1a51671]{gap:14px;padding:16px 12px 28px}.app__header h1[data-v-f1a51671]{font-size:28px}.app__tagline[data-v-f1a51671]{font-size:14px}}.key[data-v-5e9b9276]{border:1px solid var(--border);background:var(--key-bg);min-width:46px;height:58px;color:var(--text-h);cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:0 1px 0 var(--border);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:4px 6px;transition:transform 50ms,background .12s,box-shadow .12s;display:flex;position:relative}.key[data-v-5e9b9276]:hover{background:var(--key-bg-hover)}.key[data-v-5e9b9276]:active,.key--active[data-v-5e9b9276]{background:var(--accent-bg);border-color:var(--accent-border);box-shadow:none;transform:translateY(1px)}.key--faded[data-v-5e9b9276]{opacity:.45}.key__glyph[data-v-5e9b9276]{font-family:var(--jawi);font-size:26px;line-height:1}.key__roman[data-v-5e9b9276]{letter-spacing:.2px;color:var(--text);font-size:11px;font-family:var(--sans)}.key--space[data-v-5e9b9276]{flex:auto;min-width:200px}.key--ctrl[data-v-5e9b9276]{min-width:72px}.key--ctrl .key__glyph[data-v-5e9b9276]{font-family:var(--sans);font-size:15px;font-weight:600}@media (width<=1024px){.key[data-v-5e9b9276]{min-width:34px;height:50px}.key__glyph[data-v-5e9b9276]{font-size:22px}}@media (width<=600px){.key[data-v-5e9b9276]{flex:1 1 0;gap:1px;min-width:0;height:46px;padding:2px 1px}.key__glyph[data-v-5e9b9276]{font-size:20px}.key__roman[data-v-5e9b9276]{font-size:9px}.key--space[data-v-5e9b9276]{flex:2 1 0;min-width:0}.key--ctrl[data-v-5e9b9276]{flex:1 1 0;min-width:0}.key--ctrl .key__glyph[data-v-5e9b9276]{font-size:12px}}.overlay[data-v-8e3d1af0]{z-index:50;background:#08060d73;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.card[data-v-8e3d1af0]{border:1px solid var(--border);background:var(--panel-bg);width:100%;max-width:380px;box-shadow:var(--shadow);text-align:left;border-radius:16px;padding:22px;position:relative}.card__close[data-v-8e3d1af0]{width:30px;height:30px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:8px;font-size:22px;line-height:1;position:absolute;top:10px;right:12px}.card__close[data-v-8e3d1af0]:hover{background:var(--key-bg-hover)}.card__close[data-v-8e3d1af0]:focus-visible{outline:2px solid var(--accent-border);outline-offset:2px}.card__head[data-v-8e3d1af0]{align-items:center;gap:14px;padding-right:28px;display:flex}.card__glyph[data-v-8e3d1af0]{font-family:var(--jawi);color:var(--text-h);font-size:52px;line-height:1}.card__name[data-v-8e3d1af0]{color:var(--text-h);margin:0 0 6px;font-size:20px}.card__meta[data-v-8e3d1af0]{color:var(--text);flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:13px;display:flex}.badge[data-v-8e3d1af0]{border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600}.badge--arabic[data-v-8e3d1af0]{background:var(--accent-bg);color:var(--accent)}.badge--malay[data-v-8e3d1af0]{color:#059669;background:#10b9811f}.card__roman strong[data-v-8e3d1af0],.card__ipa strong[data-v-8e3d1af0]{color:var(--text-h)}.card__note[data-v-8e3d1af0]{color:var(--text-h);margin:16px 0 0;font-size:14px;line-height:1.5}.examples[data-v-8e3d1af0],.similar[data-v-8e3d1af0]{border-top:1px solid var(--border);margin-top:18px;padding-top:14px}.examples__title[data-v-8e3d1af0],.similar__title[data-v-8e3d1af0]{text-transform:uppercase;letter-spacing:.4px;color:var(--text);margin:0 0 10px;font-size:12px;font-weight:600}.examples__list[data-v-8e3d1af0]{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.examples__item[data-v-8e3d1af0]{align-items:baseline;gap:12px;display:flex}.examples__jawi[data-v-8e3d1af0]{font-family:var(--jawi);color:var(--text-h);font-size:26px;line-height:1.3}.examples__rumi[data-v-8e3d1af0]{font-family:var(--mono);color:var(--text);font-size:13px}.similar__list[data-v-8e3d1af0]{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.similar__item[data-v-8e3d1af0]{align-items:center;gap:12px;display:flex}.similar__glyph[data-v-8e3d1af0]{font-family:var(--jawi);text-align:center;min-width:32px;color:var(--text-h);font-size:28px;line-height:1}.similar__name[data-v-8e3d1af0]{color:var(--text-h);flex:auto;font-size:14px}.similar__roman[data-v-8e3d1af0]{font-family:var(--mono);color:var(--text);font-size:13px}.fade-enter-active[data-v-8e3d1af0],.fade-leave-active[data-v-8e3d1af0]{transition:opacity .15s}.fade-enter-from[data-v-8e3d1af0],.fade-leave-to[data-v-8e3d1af0]{opacity:0}.keyboard[data-v-da13caa7]{border:1px solid var(--border);background:var(--panel-bg);box-shadow:var(--shadow);border-radius:16px;flex-direction:column;gap:8px;padding:14px;display:flex}.keyboard__row[data-v-da13caa7]{justify-content:center;gap:6px;display:flex}.keyboard__tools[data-v-da13caa7]{justify-content:flex-end;align-items:center;gap:18px;margin-top:2px;display:flex}.keyboard__hint[data-v-da13caa7]{color:var(--accent);text-align:right;margin:4px 0 0;font-size:12px}.keyboard--explain .keyboard__row:nth-child(-n+4) .key[data-v-da13caa7]{cursor:help}.switch[data-v-da13caa7]{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:inline-flex}.switch__label[data-v-da13caa7]{color:var(--text);font-size:13px}.switch__input[data-v-da13caa7]{opacity:0;width:1px;height:1px;margin:0;position:absolute}.switch__track[data-v-da13caa7]{background:var(--border);border-radius:999px;width:38px;height:22px;transition:background .15s;position:relative}.switch__knob[data-v-da13caa7]{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #00000040}.switch__input:checked+.switch__track[data-v-da13caa7]{background:var(--accent)}.switch__input:checked+.switch__track .switch__knob[data-v-da13caa7]{transform:translate(16px)}.switch__input:focus-visible+.switch__track[data-v-da13caa7]{outline:2px solid var(--accent-border);outline-offset:2px}@media (width<=600px){.keyboard[data-v-da13caa7]{gap:6px;padding:8px}.keyboard__row[data-v-da13caa7]{gap:4px}}.editor[data-v-ea210e8d]{flex-direction:column;gap:8px;display:flex}.editor__head[data-v-ea210e8d]{justify-content:space-between;align-items:center;display:flex}.editor__label[data-v-ea210e8d]{text-transform:uppercase;letter-spacing:.6px;color:var(--text);font-size:13px}.editor__clear[data-v-ea210e8d]{font:inherit;color:var(--text);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;padding:3px 10px;font-size:13px}.editor__clear[data-v-ea210e8d]:hover{color:var(--text-h);border-color:var(--accent-border)}.editor__area[data-v-ea210e8d]{font-family:var(--jawi);color:var(--text-h);background:var(--panel-bg);border:1px solid var(--border);resize:vertical;box-sizing:border-box;border-radius:14px;outline:none;width:100%;padding:14px 18px;font-size:30px;line-height:1.7}.editor__area[data-v-ea210e8d]:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-bg)}.translit[data-v-8df7682f]{border:1px dashed var(--border);background:var(--social-bg);border-radius:12px;flex-direction:column;gap:6px;padding:12px 16px;display:flex}.translit__label[data-v-8df7682f]{text-transform:uppercase;letter-spacing:.6px;color:var(--text);font-size:12px}.translit__out[data-v-8df7682f]{font-family:var(--mono);color:var(--text-h);white-space:pre-wrap;word-break:break-word;min-height:1.5em;font-size:18px}.translit__out--empty[data-v-8df7682f]{color:var(--text)}.drill[data-v-a8868491]{flex-direction:column;gap:14px;display:flex}.drill__tracks[data-v-a8868491]{background:var(--social-bg);border-radius:12px;gap:6px;width:fit-content;padding:5px;display:flex}.drill__track[data-v-a8868491]{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:7px 16px;font-size:14px;font-weight:600}.drill__track--on[data-v-a8868491]{background:var(--panel-bg);color:var(--text-h);box-shadow:var(--shadow)}.drill__hint[data-v-a8868491]{color:var(--text);margin:-4px 0 0;font-size:13px}.drill__levels[data-v-a8868491]{background:var(--social-bg);border-radius:12px;flex-wrap:wrap;gap:6px;width:fit-content;padding:5px;display:flex}.drill__level[data-v-a8868491]{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:7px 16px;font-size:14px}.drill__level--on[data-v-a8868491]{background:var(--panel-bg);color:var(--text-h);box-shadow:var(--shadow)}.drill__bar[data-v-a8868491]{color:var(--text);justify-content:space-between;font-size:13px;display:flex}.drill__score[data-v-a8868491]{color:var(--accent);font-weight:600}.drill__prompt[data-v-a8868491]{color:var(--text-h);font-size:19px}.drill__prompt strong[data-v-a8868491]{color:var(--accent)}.drill__input[data-v-a8868491]{box-sizing:border-box;width:100%;font-family:var(--jawi);color:var(--text-h);border:1px solid var(--border);background:var(--panel-bg);min-height:64px;caret-color:var(--accent);border-radius:14px;outline:none;padding:12px 18px;font-size:40px;line-height:1;transition:border-color .12s,color .12s,background .12s}.drill__input[data-v-a8868491]:focus{border-color:var(--accent)}.drill__input.is-correct[data-v-a8868491]{color:#16a34a;border-color:#16a34a}.drill__input.is-wrong[data-v-a8868491]{color:#dc2626;background:#dc262614;border-color:#dc2626}.drill__foot[data-v-a8868491]{justify-content:space-between;align-items:center;gap:12px;display:flex}.drill__done[data-v-a8868491]{color:#16a34a;font-weight:600}.drill__wrong[data-v-a8868491]{color:#dc2626;font-size:14px;font-weight:600}.drill__answer[data-v-a8868491]{font-family:var(--jawi);margin-inline-start:4px;font-size:22px;line-height:1}.drill__next[data-v-a8868491]{font:inherit;color:#fff;background:var(--accent);cursor:pointer;white-space:nowrap;border:none;border-radius:8px;margin-left:auto;padding:8px 16px;font-size:15px}.drill__next[data-v-a8868491]:hover{filter:brightness(1.08)}.done[data-v-a8868491]{border:1px solid var(--border);background:var(--panel-bg);border-radius:14px;flex-direction:column;gap:14px;padding:22px;display:flex}.done__title[data-v-a8868491]{color:var(--text-h);font-size:22px;font-weight:700}.done__score[data-v-a8868491]{color:var(--text);font-size:16px}.done__score strong[data-v-a8868491]{color:var(--accent)}.done__record[data-v-a8868491]{color:#16a34a;margin-inline-start:8px;font-size:13px;font-weight:600;display:inline-block}.board[data-v-a8868491]{flex-direction:column;gap:4px;display:flex}.board__head[data-v-a8868491]{text-transform:uppercase;letter-spacing:.04em;color:var(--text);margin-bottom:2px;font-size:12px}.board__row[data-v-a8868491]{color:var(--text);border-radius:8px;justify-content:space-between;padding:6px 10px;font-size:14px;display:flex}.board__row--on[data-v-a8868491]{background:var(--social-bg);color:var(--text-h);font-weight:600}.board__val[data-v-a8868491]{color:var(--accent);font-weight:600}.done__actions[data-v-a8868491]{flex-wrap:wrap;gap:10px;display:flex}.done__actions .drill__next[data-v-a8868491]{margin-left:0}.done__repeat[data-v-a8868491]{color:var(--text-h);background:var(--social-bg)}@media (width<=600px){.drill__prompt[data-v-a8868491]{font-size:17px}.drill__input[data-v-a8868491]{min-height:56px;padding:10px 14px;font-size:30px}}.read[data-v-5fbb5ab9]{flex-direction:column;gap:14px;display:flex}.read__levels[data-v-5fbb5ab9]{background:var(--social-bg);border-radius:12px;gap:6px;width:fit-content;padding:5px;display:flex}.read__level[data-v-5fbb5ab9]{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:7px 16px;font-size:14px}.read__level--on[data-v-5fbb5ab9]{background:var(--panel-bg);color:var(--text-h);box-shadow:var(--shadow)}.read__bar[data-v-5fbb5ab9]{color:var(--text);justify-content:space-between;font-size:13px;display:flex}.read__score[data-v-5fbb5ab9]{color:var(--accent);font-weight:600}.read__instruction[data-v-5fbb5ab9]{color:var(--text);font-size:15px}.read__jawi[data-v-5fbb5ab9]{font-family:var(--jawi);color:var(--text-h);border:1px solid var(--border);background:var(--social-bg);border-radius:14px;padding:14px 18px;font-size:40px;line-height:1.5}.read__input[data-v-5fbb5ab9]{box-sizing:border-box;width:100%;font-family:var(--sans);color:var(--text-h);border:1px solid var(--border);background:var(--panel-bg);min-height:60px;caret-color:var(--accent);border-radius:14px;outline:none;padding:12px 18px;font-size:28px;line-height:1.2;transition:border-color .12s,color .12s,background .12s}.read__input[data-v-5fbb5ab9]:focus{border-color:var(--accent)}.read__input.is-correct[data-v-5fbb5ab9]{color:#16a34a;border-color:#16a34a}.read__input.is-wrong[data-v-5fbb5ab9]{color:#dc2626;background:#dc262614;border-color:#dc2626}.read__foot[data-v-5fbb5ab9]{justify-content:space-between;align-items:center;gap:12px;display:flex}.read__done[data-v-5fbb5ab9]{color:#16a34a;font-weight:600}.read__wrong[data-v-5fbb5ab9]{color:#dc2626;font-size:14px;font-weight:600}.read__answer[data-v-5fbb5ab9]{font-family:var(--sans);margin-inline-start:4px;font-size:18px}.read__next[data-v-5fbb5ab9]{font:inherit;color:#fff;background:var(--accent);cursor:pointer;white-space:nowrap;border:none;border-radius:8px;margin-left:auto;padding:8px 16px;font-size:15px}.read__next[data-v-5fbb5ab9]:hover{filter:brightness(1.08)}.done[data-v-5fbb5ab9]{border:1px solid var(--border);background:var(--panel-bg);border-radius:14px;flex-direction:column;gap:14px;padding:22px;display:flex}.done__title[data-v-5fbb5ab9]{color:var(--text-h);font-size:22px;font-weight:700}.done__score[data-v-5fbb5ab9]{color:var(--text);font-size:16px}.done__score strong[data-v-5fbb5ab9]{color:var(--accent)}.done__record[data-v-5fbb5ab9]{color:#16a34a;margin-inline-start:8px;font-size:13px;font-weight:600;display:inline-block}.board[data-v-5fbb5ab9]{flex-direction:column;gap:4px;display:flex}.board__head[data-v-5fbb5ab9]{text-transform:uppercase;letter-spacing:.04em;color:var(--text);margin-bottom:2px;font-size:12px}.board__row[data-v-5fbb5ab9]{color:var(--text);border-radius:8px;justify-content:space-between;padding:6px 10px;font-size:14px;display:flex}.board__row--on[data-v-5fbb5ab9]{background:var(--social-bg);color:var(--text-h);font-weight:600}.board__val[data-v-5fbb5ab9]{color:var(--accent);font-weight:600}.done__actions[data-v-5fbb5ab9]{flex-wrap:wrap;gap:10px;display:flex}.done__actions .read__next[data-v-5fbb5ab9]{margin-left:0}.done__repeat[data-v-5fbb5ab9]{color:var(--text-h);background:var(--social-bg)}@media (width<=600px){.read__jawi[data-v-5fbb5ab9]{padding:12px 14px;font-size:30px}.read__input[data-v-5fbb5ab9]{min-height:52px;padding:10px 14px;font-size:22px}}.home[data-v-5d10e922]{flex-direction:column;gap:20px;display:flex}.tabs[data-v-5d10e922]{background:var(--social-bg);border-radius:12px;gap:6px;width:fit-content;padding:5px;display:flex}.tabs__btn[data-v-5d10e922]{font:inherit;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 18px;font-size:15px}.tabs__btn--on[data-v-5d10e922]{background:var(--panel-bg);color:var(--text-h);box-shadow:var(--shadow)}.home__main[data-v-5d10e922]{flex-direction:column;gap:18px;display:flex}.panel[data-v-5d10e922]{flex-direction:column;gap:14px;min-height:200px;display:flex}.home__hint[data-v-5d10e922]{color:var(--text);text-align:center;margin:8px 0 0;font-size:13px}@media (width<=600px){.home[data-v-5d10e922],.home__main[data-v-5d10e922]{gap:14px}.panel[data-v-5d10e922]{min-height:0}}.about[data-v-e22f2aac]{background:var(--panel-bg);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:14px;flex-direction:column;gap:22px;padding:28px 28px 32px;line-height:1.65;display:flex}.about__title[data-v-e22f2aac]{color:var(--text-h);margin:0;font-size:26px;font-weight:600}.about__section[data-v-e22f2aac]{flex-direction:column;gap:10px;display:flex}.about__section h3[data-v-e22f2aac]{color:var(--text-h);margin:0;font-size:18px;font-weight:600}.about__section p[data-v-e22f2aac]{color:var(--text);margin:0}.about__back[data-v-e22f2aac]{color:var(--accent);align-self:flex-start;font-size:14px;font-weight:600;text-decoration:none}.about__back[data-v-e22f2aac]:hover{text-decoration:underline}@media (width<=600px){.about[data-v-e22f2aac]{gap:18px;padding:20px 18px 24px}.about__title[data-v-e22f2aac]{font-size:22px}}