:root{color-scheme:light;--bg:#f5f5f7;--card:#fff;--text:#1d1d1f;--muted:#626267;--border:#d9d9de;--soft:#eeeeF0;--accent:#0066cc;--tint:#eaf2fc;--key:#fff}
:root[data-theme=dark]{color-scheme:dark;--bg:#111113;--card:#1c1c1e;--text:#f5f5f7;--muted:#a1a1a6;--border:#3a3a3e;--soft:#161618;--accent:#64adff;--tint:#233449;--key:#2c2c2e}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.5 "Segoe UI",Arial,sans-serif}button,textarea{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer;border:0;border-radius:7px;background:transparent;color:var(--text);padding:7px 10px}button:hover,a:hover{background:var(--tint)}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.35;cursor:default}a{color:inherit;text-decoration:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}
header{max-width:1040px;margin:auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px}.brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:650;letter-spacing:-.6px}.brand-icon{display:block;width:34px;height:34px}.brand-light{font-weight:400}.brand-dot{color:var(--accent)}.themes{display:flex;border:1px solid var(--border);padding:3px;border-radius:9px}.themes button{font-size:12px;padding:4px 8px}.themes button[aria-pressed=true]{background:var(--card);color:var(--accent)}main{max-width:1040px;padding:0 20px;margin:auto}.workspace{border:1px solid var(--border);border-radius:12px;background:var(--card);overflow:hidden}.workspace-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 15px;border-bottom:1px solid var(--border)}.mode{display:flex;background:var(--soft);border-radius:8px;padding:3px;gap:3px}.mode button{font-size:12px;padding:5px 12px}.mode button[aria-pressed=true]{background:var(--card);font-weight:600}.suggest-toggle{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--muted);cursor:pointer}.suggest-toggle input{accent-color:var(--accent);margin:0;width:15px;height:15px}.editor-wrap{position:relative;padding:10px 20px 7px}textarea{display:block;width:100%;height:clamp(210px,32vh,360px);min-height:180px;resize:vertical;font:32px/1.8 Tahoma,Arial,sans-serif;background:transparent;color:var(--text);border:0;padding:8px 0;outline:none}textarea:focus-visible{box-shadow:inset 0 -1px var(--accent)}textarea::placeholder{color:var(--muted);opacity:.55}.editor-bottom{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding-top:3px}.caret-suggestions{position:absolute;z-index:5;display:flex;gap:4px;flex-wrap:wrap;width:max-content;max-width:calc(100% - 24px);padding:5px;background:var(--card);border:1px solid var(--border);border-radius:9px;box-shadow:0 5px 22px #0002}.suggestion{font:17px/1.4 Tahoma,Arial,sans-serif;padding:6px 10px;min-height:36px;color:var(--accent);max-width:100%;overflow-wrap:anywhere}.suggestion:first-child{background:var(--tint)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:7px 12px;border-bottom:1px solid var(--border)}.tools,.actions{display:flex;align-items:center;gap:3px}.toolbar button{font-size:12px}.primary{background:var(--accent);color:var(--bg);font-weight:600;padding:8px 18px}.primary:hover{background:var(--accent);filter:brightness(1.1)}.keyboard-wrap{padding:12px 18px;background:var(--soft)}.key-row{display:flex;gap:6px;margin-bottom:6px}.key-row button,.keyboard-last button{flex:1;min-width:0;position:relative;height:43px;background:var(--key);border:1px solid var(--border);box-shadow:0 1px 0 var(--border);padding:4px;font:23px Tahoma,Arial,sans-serif}.key-row button:hover,.keyboard-last button:hover{background:var(--tint);border-color:var(--accent)}.key-row small{position:absolute;left:5px;top:2px;font:8px "Segoe UI";color:var(--muted)}.key-row:nth-child(2){padding:0 18px}.key-row:nth-child(3){padding:0 36px}.keyboard-last{display:flex;gap:6px;padding:0 36px}.keyboard-last button{height:33px;font-size:17px}.keyboard-last .space{flex:6;font-size:13px;color:var(--muted)}.diacritics{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:11px}#vowels{display:flex;gap:5px;flex-wrap:wrap}#vowels button{height:30px;width:31px;padding:0;background:var(--key);border:1px solid var(--border);font-size:21px}#unvowel{font-size:10px;color:var(--muted)}.phrase-buttons{display:flex;justify-content:center;gap:7px;margin-top:10px}.phrase-buttons button{background:var(--key);border:1px solid var(--border);min-height:38px;padding:5px 15px;font:17px Tahoma,Arial,sans-serif}.searchbar{padding:9px 12px;border-top:1px solid var(--border)}.search-buttons{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.search-buttons a{font-size:11px;padding:6px 12px;border:1px solid var(--border);border-radius:7px}.search-buttons a[aria-disabled=true]{opacity:.5}.mapping{font-size:11px;color:var(--muted);padding:12px 3px}.mapping summary{cursor:pointer}.mapping p{line-height:1.9;max-width:760px}#status{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 18px;border-radius:9px;background:var(--text);color:var(--bg);z-index:10}#status:empty{display:none}
@media(max-width:700px){header{padding:9px 12px}.brand{font-size:16px}.brand-icon{width:30px;height:30px}main{padding:0 8px}.workspace-head{padding:7px 9px}.editor-wrap{padding:8px 12px 6px}textarea{height:clamp(210px,33vh,310px)}.toolbar{padding:6px;gap:2px}.tools,.actions{gap:1px}.toolbar button{padding:7px;font-size:11px;min-height:36px}.keyboard-wrap{padding:10px 6px}.key-row{gap:3px;margin-bottom:5px}.key-row button{font-size:20px;height:43px;border-radius:5px}.key-row small{font-size:7px;left:3px;top:1px}.key-row:nth-child(2){padding:0 6px}.key-row:nth-child(3),.keyboard-last{padding:0 12px}.diacritics{gap:4px;flex-wrap:wrap}#vowels button{width:30px;height:34px}.phrase-buttons button{min-height:44px}.suggestion{min-height:44px}.search-buttons{gap:4px}.search-buttons a{min-height:38px;padding:9px}.mapping{padding:10px 4px}}
/* Compact actions follow the available workspace width, not the device type. */
.workspace{container-type:inline-size}.workspace-head{gap:8px}.head-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}.head-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:38px;min-height:36px;padding:7px 11px;font-size:12px;white-space:nowrap}.head-actions svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.actions{gap:10px}.searchbar{border:0;padding:7px 0 0}.search-buttons{gap:4px}.search-buttons a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:36px;min-height:36px;padding:9px;border:0;border-radius:7px;color:var(--muted)}.search-buttons svg{width:18px;height:18px}.search-buttons a:hover,.search-buttons a:focus-visible{color:var(--accent);background:var(--tint)}
@container(max-width:500px){.head-actions .action-label{display:none}.head-actions button{padding:8px;min-width:38px}.workspace-head{gap:5px}.mode button{padding:5px 9px}}
@media(prefers-reduced-motion:no-preference){.head-actions button{transition:padding .15s ease}.search-buttons a{transition:background .15s ease,color .15s ease}}
.keyboard-shortcuts{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;flex-wrap:wrap}.keyboard-shortcuts .phrase-buttons{margin:0;gap:5px}.keyboard-shortcuts .searchbar{padding:0}.keyboard-shortcuts .search-buttons{display:grid;grid-template-columns:repeat(4,36px);gap:5px}.keyboard-shortcuts .search-buttons a{width:36px;height:38px;min-height:38px;padding:8px;background:var(--key);border:1px solid var(--border);box-shadow:0 1px 0 var(--border);color:var(--muted)}.keyboard-shortcuts .search-buttons a:hover{border-color:var(--accent);color:var(--accent);background:var(--tint)}
@container(max-width:500px){.keyboard-shortcuts{gap:8px}.keyboard-shortcuts .phrase-buttons button{padding:5px 9px;font-size:15px;min-height:38px}.keyboard-shortcuts .search-buttons{grid-template-columns:repeat(4,32px);gap:4px}.keyboard-shortcuts .search-buttons a{width:32px;padding:7px}}
@container(max-width:340px){.keyboard-shortcuts{gap:6px}.keyboard-shortcuts .phrase-buttons{gap:3px}.keyboard-shortcuts .phrase-buttons button{padding:5px 6px;font-size:14px}.keyboard-shortcuts .search-buttons{grid-template-columns:repeat(4,29px);gap:3px}.keyboard-shortcuts .search-buttons a{width:29px;padding:6px}}
.keyboard-shortcuts{align-items:flex-end}.keyboard-shortcuts .searchbar{order:-1}.search-caption{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:10px;line-height:1.3;margin-bottom:5px}.search-caption svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.keyboard-shortcuts .search-buttons a{color:var(--text)}
/* One quiet prediction, accepted without leaving the editor. */
.caret-suggestions{display:flex;flex-direction:column;align-items:flex-end;gap:0;padding:3px 6px;background:var(--card);box-shadow:0 3px 14px #0000000a;border-color:var(--border);max-width:min(320px,calc(100% - 24px))}.caret-suggestions .ghost-word{font:24px/1.6 Tahoma,Arial,sans-serif;color:var(--muted);background:transparent!important;min-height:38px;padding:0 3px;text-align:right;font-weight:400}.caret-suggestions .ghost-word:hover{color:var(--accent);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:5px}.caret-suggestions.inline-prediction{background:transparent;border-color:transparent;box-shadow:none;padding:0 5px}.inline-prediction .ghost-word{font-size:inherit}.prediction-controls{display:flex;align-items:center;gap:6px;white-space:nowrap;font:10px/1.3 "Segoe UI",sans-serif;color:var(--muted);padding-top:2px}.prediction-controls button{padding:4px 5px;min-height:26px;font:inherit;color:var(--muted)}.prediction-controls .accept-prediction{color:var(--accent)}.prediction-controls kbd{font:10px "Segoe UI",sans-serif;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;padding:1px 4px;background:var(--card)}.prediction-count{font-size:9px;color:var(--muted)}
@media(pointer:coarse){.prediction-controls button{min-height:38px;min-width:32px}.prediction-controls .accept-prediction kbd{display:none}.prediction-controls .accept-prediction span{font-size:12px}.caret-suggestions .ghost-word{min-height:44px}}
.caret-suggestions.inline-prediction .ghost-word{font-size:var(--prediction-size,32px)}
/* Native Arabic typography: no remote font, identical metrics for the preview. */
:root{--arabic-font:"Segoe UI",Tahoma,Arial,sans-serif}
textarea,.caret-suggestions .ghost-word,.key-row button,.keyboard-last button,.phrase-buttons button{font-family:var(--arabic-font)}
.caret-suggestions.inline-prediction{align-items:flex-start;padding:0;border:0}
.caret-suggestions.inline-prediction .ghost-word{padding:0;line-height:1.8}
:root .language-links{display:flex;gap:2px;align-items:center;font-size:11px;font-weight:600}
.language-links a{padding:7px 5px;color:var(--muted);text-decoration:none;border-radius:6px}
.language-links a[aria-current]{color:var(--accent);background:var(--tint)}
header nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.usage-guide{max-width:760px;margin:48px auto 24px;line-height:1.75;color:var(--muted);font-size:15px}
.usage-guide h2{font-size:21px;color:var(--text);font-weight:600}
.usage-guide h3{font-size:16px;color:var(--text);font-weight:600;margin:24px 0 5px}
.usage-guide p{margin:5px 0 16px}
.version-note{font-size:12px;text-align:center;color:var(--muted);padding:16px 0 30px}
.version-note a{color:inherit}
@media(max-width:420px){header nav{gap:5px}.language-links a{padding:6px 4px}.usage-guide{margin-top:32px}}
/* Reserve the three key rows before JavaScript inserts the letters. */
#keyboard{display:flow-root;min-height:147px}


.workspace-head{display:grid;grid-template-columns:repeat(10,minmax(24px,36px));justify-content:start;gap:5px;padding:5px 10px}
.workspace-head .mode,.workspace-head .head-actions{display:contents}
.workspace-head button,.workspace-head .icon-toggle{display:flex;align-items:center;justify-content:center;position:relative;min-width:0;width:100%;height:44px;min-height:44px;padding:3px;font-size:14px;border-radius:7px}
.workspace-head #native{font-size:21px}.workspace-head #phonetic{font-size:11px;direction:ltr}
.workspace-head button[aria-pressed=true]{background:var(--tint);color:var(--accent)}
.workspace-head svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-toggle{cursor:pointer;color:var(--muted)}.icon-toggle input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.icon-toggle:has(input:checked){background:var(--tint);color:var(--accent)}.icon-toggle:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}
.workspace-head .phone-option{display:none}
.editor-bottom{font-size:9px;padding-top:0;color:color-mix(in srgb,var(--muted) 85%,var(--card))}
.head-actions>.primary{background:transparent;color:var(--accent)}.head-actions .action-label{display:none}
.keyboard-shortcuts .searchbar{display:block}.keyboard-shortcuts .search-caption{display:none}
.keyboard-shortcuts .search-buttons{display:flex;gap:4px}.keyboard-shortcuts .search-buttons a{width:34px;min-height:40px}
@media(max-width:700px){
 #keyboard{min-height:144px}
 .workspace-head{grid-template-columns:repeat(11,minmax(24px,36px));justify-content:space-between;gap:1px;padding:4px}
 .workspace-head .phone-option{display:flex}
}

.keyboard-shortcuts .search-buttons a{width:auto;height:auto;min-height:40px;gap:6px;padding:7px 10px;white-space:nowrap;font:14px/1.5 var(--arabic-font);color:var(--text)}
.keyboard-shortcuts .search-buttons svg{width:14px;height:14px;flex:none}

.key-row:nth-child(4){padding:0 36px}.key-row small{direction:ltr;font-size:9px}
.number-keys{display:flex;gap:4px;margin-top:7px}.number-keys button{position:relative;flex:1;min-width:0;height:42px;padding:9px 2px 0;background:var(--key);border:1px solid var(--border);font:21px var(--arabic-font)}
.number-keys small,#vowels small{position:absolute;top:1px;left:3px;font:9px/1.2 'Segoe UI',sans-serif;color:var(--muted)}
.diacritics{gap:6px;margin-top:7px;flex-wrap:wrap}#vowels{flex-wrap:nowrap;gap:4px}#vowels button{position:relative;width:32px;height:42px;padding-top:10px;border-radius:6px}#unvowel{min-height:36px;border:1px solid var(--border);background:var(--key);padding:5px 9px}
@media(max-width:700px){.key-row:nth-child(4){padding:0 12px}.key-row small{font-size:8px}.number-keys{gap:3px}#vowels{gap:3px}#vowels button{width:30px}}

#vowels button{font-size:23px;line-height:1.1;padding-top:8px}

/* Keep the main keyboard at three rows; secondary characters live below it. */
.keyboard-extras{margin:24px 0;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.keyboard-extras h2{margin:0 0 8px;font-size:12px;font-weight:500;color:var(--muted)}
.extra-letters{display:flex;gap:5px;margin-top:8px}.extra-letters button{position:relative;flex:1;min-width:0;height:42px;padding:7px 2px 0;font:23px var(--arabic-font);background:var(--key);border:1px solid var(--border)}
.extra-letters small{position:absolute;left:3px;top:1px;font:9px 'Segoe UI',sans-serif;color:var(--muted)}
.keyboard-shortcuts{flex-wrap:nowrap;gap:6px;align-items:center}.keyboard-shortcuts .searchbar{flex:0 1 auto;min-width:0}.keyboard-shortcuts .search-buttons{flex-wrap:nowrap;gap:4px}.keyboard-shortcuts .phrase-buttons{flex-wrap:nowrap;gap:4px}
.keyboard-shortcuts .search-buttons a{padding:6px 8px;gap:4px;min-height:38px}.keyboard-shortcuts .phrase-buttons button{padding:5px 8px;white-space:nowrap;min-height:38px}
.search-short{display:none}
.diacritics{flex-wrap:nowrap;gap:6px}.diacritics #vowels{min-width:0;gap:3px;flex:0 1 277px}.diacritics #vowels button{flex:1;min-width:0;width:30px;height:34px;font-size:21px;padding-top:7px}.diacritics #vowels small{font-size:7px}.diacritics #unvowel{flex:0 1 88px;max-width:88px;min-height:34px;padding:3px;font-size:10px;line-height:1.2}
@container(max-width:420px){.search-full{display:none}.search-short{display:inline}.keyboard-shortcuts{gap:4px}.keyboard-shortcuts .search-buttons a{font-size:13px;padding:5px;gap:3px}.keyboard-shortcuts .phrase-buttons{gap:3px}.keyboard-shortcuts .phrase-buttons button{font-size:14px;padding:5px 6px}.keyboard-shortcuts .search-buttons svg{width:12px;height:12px}}

.historical-content{margin:28px 0;padding:24px;border:1px solid var(--border);border-radius:12px;background:var(--card);font-size:15px;line-height:1.8;overflow-wrap:anywhere}
.historical-content h2{font-size:21px;margin:24px 0 12px}.historical-content h3{font-size:18px;margin:20px 0 8px}.historical-content a,.production-privacy a{color:var(--accent);text-decoration:underline}.historical-content table{max-width:100%}.historical-content td{padding:4px}.historical-content img{max-width:100%;height:auto}
.production-ad{display:none;margin:24px auto;max-width:100%;min-height:120px;text-align:center;overflow:hidden}.ads-enabled .production-ad{display:block}.production-ad-label{font-size:10px;color:var(--muted);display:block;margin:4px}.production-privacy{font-size:12px;color:var(--muted);margin:18px 0}