:root{font-family:monospace;--base-keyboard-columns: repeat(10, minmax(50px, 1fr));--keyboard-gap: 8px;--space-width: span 6;--action-key-width: span 2;--key-height: 38px;--key-padding: 8px 6px;--key-margin: 4px 3px;--action-key-height: 36px;--final-form-size: 20px;--final-form-top: -10px;--final-form-right: -4px;--qwerty-bottom: 2px;--qwerty-left: 3px;--key-fs: 1.8rem;--symbol-fs: 30px;--text: #0e0e0e;--niqqud: #e61616;--sofit: #c49d10;--border: #dedede;--bg: #e8e8e854;--key-bg: #fdfdfd;--key-bg-hover: #f4f4f4;--key-bg-active: #d6d6d6;--monospace: monospace;--serif: "Noto Serif Hebrew", serif;--arabic-font: "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", serif}@media(max-width:760px){:root{--base-keyboard-columns: repeat(10, minmax(10px, 1fr));--keyboard-gap: 5px;--key-margin: 2px 2px;--key-padding: 8px 5px;--action-key-height: 32px;--key-fs: 1.6rem;--symbol-fs: 22px;--label-fs: 12px;--final-form-size: 18px;--final-form-top: -6px;--final-form-right: -8px;--qwerty-bottom: 1px;--qwerty-left: 2px}.key[data-is-diacritic=true] .letter{font-size:calc(var(--key-fs) + .5rem)}.final-form{font-size:calc(var(--key-fs) - .8rem)}.qwerty{font-size:calc(var(--key-fs) - .9rem)}}@media(max-width:480px){:root{--keyboard-gap: 3px;--key-height: 36px;--key-padding: 7px 4px;--action-key-height: 30px;--key-fs: 1.4rem;--final-form-size: 16px;--final-form-top: -7px;--final-form-right: -7px}.key[data-is-diacritic=true] .letter{font-size:calc(var(--key-fs) + .4rem)}}p,h1{margin:0}h1{font-size:1.2rem;font-weight:400}body{box-sizing:border-box;display:flex;flex-direction:column;height:100dvh;padding:1rem 1.6rem;margin:0 auto;max-width:1800px}nav{display:flex;gap:10px}.intro-container{display:flex;flex-direction:column;gap:2rem;padding:0 0 5rem;max-width:2000px;margin:0 auto}.genealogy-diagram-container{display:flex;align-items:center;justify-content:space-between;max-width:1500px;margin:0 auto;gap:1rem;padding:2rem 0}.genealogy-diagram-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;gap:6px;max-height:600px}.genealogy-diagram{width:100%;font-size:var(--label-fs);line-height:1.4;color:var(--text);background-color:#fdfdfd81;overflow-x:auto;font-weight:700;text-align:center}@media(max-width:1000px){.genealogy-diagram-container{flex-direction:column}}.top-bar{display:flex;justify-content:space-between;width:100%;gap:1rem}.input-wrap{display:flex;flex-direction:column;flex:1 1 0;padding:.8rem 0;gap:.6rem}.main-input{flex:1;resize:none;outline:none;margin:0 0 4px;border:none;text-align:right;font-size:calc(var(--key-fs) + .6rem);font-family:var(--serif);letter-spacing:.1rem;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.alphabet-label{display:flex;flex-direction:column;gap:.25rem;max-width:40rem}.alphabet-label__name{font-weight:600}.alphabet-label__date{font-size:.85rem;opacity:.7;font-variant-numeric:tabular-nums}.alphabet-label__desc{font-size:.85rem;opacity:.85;line-height:1.4}.keyboard-container{position:absolute;bottom:0;left:0;right:0}.keyboard-wrap{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;gap:12px;padding:.6rem .6rem 1.2rem;background-color:var(--bg);min-width:264px;max-width:840px;margin:0 auto}.key-wrap{display:grid;grid-template-columns:var(--base-keyboard-columns);gap:var(--keyboard-gap)}.controls-container{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;justify-content:end;gap:4px 9px}@media(max-width:403px){.controls-container{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;justify-items:end;width:fit-content}.controls-container .layout-button{margin:0 3px;width:80%}}.key,.layout-button{all:unset;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text)}.layout-button{padding:0 6px;min-height:1.8rem;border:2px solid var(--text);font-weight:600;font-size:clamp(.8rem,calc(var(--key-fs) - .7rem),1.5rem);font-family:var(--monospace);max-height:fit-content}.layout-button:focus,.layout-button:hover,.layout-button--active{border-style:dashed}.key{position:relative;height:var(--key-height);min-height:var(--key-height);margin:var(--key-margin);padding:var(--key-padding);overflow:visible;background-color:var(--key-bg);border:1px solid var(--border);font-size:var(--key-fs);font-family:var(--serif)}.key--action{height:var(--action-key-height);padding:6px 0}.key:hover{background-color:var(--key-bg-hover)}.key:focus,.key:active,.key.pressed{background-color:var(--key-bg-active)}.bksp,.shift{grid-column:var(--action-key-width)}.space{grid-column:var(--space-width)}.action-symbol{width:var(--symbol-fs);height:var(--symbol-fs);pointer-events:none}.stroke{stroke:var(--text)}.letter{pointer-events:none;display:block;position:relative;z-index:5;max-width:100%;font-size:var(--key-fs);line-height:1.2;text-align:center;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern" 1,"liga" 1}.key[data-is-diacritic=true] .letter{font-weight:600;line-height:1.1;letter-spacing:normal;text-rendering:geometricPrecision;will-change:transform;color:var(--niqqud)}.qwerty,.final-form{pointer-events:none;position:absolute;font-family:var(--serif);font-weight:600;line-height:1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.qwerty{bottom:var(--qwerty-bottom);left:var(--qwerty-left);z-index:15;padding:1px 3px;background:var(--key-bg);border-radius:2px;color:var(--text);opacity:.7;font-family:var(--monospace);font-size:calc(var(--key-fs) - 1.1rem)}.final-form{top:var(--final-form-top);right:var(--final-form-right);width:var(--final-form-size);min-width:var(--final-form-size);height:var(--final-form-size);z-index:20;padding:2px 0;background:var(--key-bg);border:1px solid var(--border);box-shadow:0 1px 2px #0000001a;color:var(--sofit);font-size:calc(var(--key-fs) - .7rem);text-align:center;white-space:nowrap;overflow:visible;display:flex;align-items:center;justify-content:center}.final-form[data-diacritic]{color:var(--niqqud)}.final-form:empty,.qwerty:empty{display:none}.vowel{color:var(--niqqud);font-size:calc(var(--key-fs) + .5rem);font-weight:700;line-height:1}.sofit{color:var(--sofit)}.sofit-toggled{color:var(--text)}[data-script=arabic] .letter{font-family:var(--arabic-font)}[data-script=arabic] .key[data-is-diacritic=true] .letter{font-size:calc(var(--key-fs) + .6rem);font-weight:500;line-height:1;color:var(--niqqud)}[data-script=arabic] .final-form:not([data-diacritic]){font-family:var(--arabic-font);font-size:calc(var(--key-fs) - .8rem);color:var(--text)}[data-script=arabic] .key.sofit:not([data-is-diacritic=true]) .letter{color:var(--text)}[data-script=arabic] .key[data-char=ِ] .letter,[data-script=arabic] .key[data-char=ٍ] .letter{transform:translateY(-10px)}.label-diacritic{display:inline-block}.label-diacritic[data-diacritic-type=ٍ]{transform:translateY(-6px)}.label-diacritic[data-diacritic-type=ِ]{transform:translateY(-5px)}.label-diacritic[data-diacritic-type=ً]{transform:translateY(3px)}.label-diacritic[data-diacritic-type=ٌ],.label-diacritic[data-diacritic-type=ُ],.label-diacritic[data-diacritic-type=َ],.label-diacritic[data-diacritic-type=ْ]{transform:translateY(2px)}@media(max-width:400px){[data-script=arabic] .key[data-key=KeyQ] .letter,[data-script=arabic] .key[data-key=KeyW] .letter,[data-script=arabic] .key[data-key=KeyA] .letter,[data-script=arabic] .key[data-key=KeyS] .letter{font-size:calc(var(--key-fs) - 2px);transform:scale(.9) translate(-2px)}}