@font-face{font-family:Reem Kufi;font-style:normal;font-display:swap;font-weight:600;src:url(./reem-kufi-arabic-600-normal-DfPr_Olo.woff2)format("woff2"),url(./reem-kufi-arabic-600-normal-BlglqIsH.woff)format("woff")}@font-face{font-family:Tajawal;font-style:normal;font-display:swap;font-weight:400;src:url(./tajawal-arabic-400-normal-CyCXRvzh.woff2)format("woff2"),url(./tajawal-arabic-400-normal-DCQxawbB.woff)format("woff")}@font-face{font-family:Tajawal;font-style:normal;font-display:swap;font-weight:500;src:url(./tajawal-arabic-500-normal-BZ8ojJNu.woff2)format("woff2"),url(./tajawal-arabic-500-normal-CbVEaYEW.woff)format("woff")}@font-face{font-family:Tajawal;font-style:normal;font-display:swap;font-weight:700;src:url(./tajawal-arabic-700-normal-D2-eand5.woff2)format("woff2"),url(./tajawal-arabic-700-normal-9L7Zusdl.woff)format("woff")}:root{--white:#fff;--paper:#f7f7f5;--ink:#1f1a17;--ink-soft:#5f5752;--red:#c8102e;--red-dark:#a30d25;--red-tint:#fbe7ea;--green:#007a3d;--green-dark:#00602f;--green-tint:#e3f2ea;--silver:#c9c9c4;--line:#e4e3df;--font-display:"Reem Kufi", "Tajawal", sans-serif;--font-text:"Tajawal", system-ui, sans-serif;--band:linear-gradient(to left, var(--red) 0 33.3%, var(--white) 33.3% 66.6%, var(--green) 66.6% 100%);--pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23c9c9c4' stroke-width='1'%3E%3Crect x='7' y='7' width='14' height='14'/%3E%3Crect x='7' y='7' width='14' height='14' transform='rotate(45 14 14)'/%3E%3C/g%3E%3C/svg%3E")}*{box-sizing:border-box}body{background:var(--paper);min-height:100dvh;color:var(--ink);font-family:var(--font-text);border-top:6px solid #0000;border-image:var(--band) 1;margin:0;font-size:1.125rem;line-height:1.6}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--green);outline-offset:3px}.logo{width:2.75rem;height:2.75rem;color:var(--red)}.button{min-height:3.5rem;font:700 1.25rem var(--font-text);cursor:pointer;border:2px solid #0000;border-radius:.75rem;padding:.5rem 1.5rem}.button:disabled{opacity:.4;cursor:not-allowed}.button--wide{width:100%}.button--primary{background:var(--green);color:var(--white)}.button--primary:hover:not(:disabled){background:var(--green-dark)}.button--speak{background:var(--red);min-height:4.5rem;color:var(--white);flex:1;font-size:1.75rem}.button--speak:hover:not(:disabled){background:var(--red-dark)}.button--quiet{background:var(--white);border-color:var(--ink);color:var(--ink)}.button--text{min-height:2.75rem;color:var(--red);background:0 0;padding:0 .5rem;font-size:1rem;text-decoration:underline}.app{gap:1rem;max-width:34rem;margin:0 auto;padding:0 1rem 2rem;display:grid}.topbar{background:var(--pattern) bottom / 1rem 1rem repeat-x;flex-wrap:wrap;align-items:center;gap:.75rem;max-width:72rem;margin:0 auto;padding:.75rem 1rem 1.5rem;display:flex}.tabs{gap:.5rem;margin-inline-start:auto;display:flex}.tab{border:2px solid var(--green);min-height:2.75rem;color:var(--green-dark);border-radius:2rem;place-items:center;padding:0 1rem;font-weight:700;text-decoration:none;display:grid}.tab[aria-current=page]{background:var(--green);color:var(--white)}.view{padding-top:0}.topbar__text{line-height:1.2;display:grid}.topbar__name{font:600 2rem / 1 var(--font-display);color:var(--red)}.topbar__tagline{color:var(--ink-soft);font-size:.95rem}.camera-help{gap:.75rem;display:grid}.stage{gap:.5rem;display:grid}.camera{aspect-ratio:3/4;border:4px solid var(--red);background:var(--ink);border-radius:38% 38% .5rem .5rem/22% 22% .5rem .5rem;width:100%;max-height:52dvh;margin:0 auto;position:relative;overflow:hidden}.camera video,.camera canvas{width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.status{background:var(--white);border:2px solid var(--line);text-align:center;border-radius:.5rem;margin:0;padding:.625rem 1rem;font-size:1.25rem;font-weight:700}.status[data-state=ready]{border-color:var(--green);background:var(--green);color:var(--white)}.status[data-state=signing]{border-color:var(--red);background:var(--red);color:var(--white)}.status[data-state=choose]{border-color:var(--ink)}.status[data-state=warning]{border-color:var(--red);background:var(--red-tint);color:var(--red-dark)}.tips{border:2px solid var(--line);background:var(--white);border-radius:.5rem;padding:.5rem 1rem}.tips summary{cursor:pointer;font-weight:700}.tips ul{gap:.4rem;margin:.5rem 0 .25rem;padding:0;list-style:none;display:grid}.tips li{border-inline-start:4px solid var(--green);padding-inline-start:.75rem}.panel{gap:1rem;display:grid}.candidates{border:2px solid var(--ink);background:var(--white);border-radius:1rem;gap:.75rem;padding:1rem;display:grid}.candidates__title{margin:0;font-weight:700}.candidates__list{gap:.75rem;display:grid}.candidates__list:empty{display:none}.candidates__actions{gap:.75rem;display:flex}.candidates__actions .button{flex:1}.candidate{border:2px solid var(--green);background:var(--white);min-height:4.5rem;color:var(--ink);font:700 1.75rem var(--font-text);text-align:start;cursor:pointer;border-radius:.75rem;grid-template-columns:1fr auto;align-items:center;gap:.25rem 1rem;padding:.75rem 1.25rem;display:grid}.candidate__confidence{font-size:1.125rem;font-weight:500}.candidate__bar{background:var(--green);opacity:.7;border-radius:1rem;grid-column:1/-1;height:.375rem}.strip{align-items:flex-start;gap:.5rem;display:flex}.chips{flex-wrap:wrap;flex:1;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.chip{border:2px solid var(--green);background:var(--white);border-radius:2rem;align-items:center;gap:.25rem;padding-inline-start:.875rem;font-weight:700;display:flex}.chip button{width:2.75rem;height:2.75rem;color:var(--red);cursor:pointer;background:0 0;border:0;border-radius:50%;font-size:1.5rem;line-height:1}.sentence{border-inline-start:8px solid var(--red);background:var(--white);min-height:6rem;font:600 2.5rem / 1.5 var(--font-display);overflow-wrap:anywhere;margin:0;padding:1rem 1.25rem}.sentence--empty{border-inline-start-color:var(--silver);color:var(--ink-soft);font:400 1.125rem / 1.6 var(--font-text)}.notice{background:var(--green-tint);border-radius:.5rem;margin:0;padding:.75rem 1rem;font-weight:500}.notice--error{background:var(--red-tint);color:var(--red-dark)}.speech{flex-wrap:wrap;align-items:stretch;gap:.75rem;display:flex}.speed{border:0;align-items:center;gap:.25rem;width:100%;margin:0;padding:0;display:flex}.speed legend{float:inline-start;margin-inline-end:.75rem;padding:0;font-weight:700}.speed label{cursor:pointer;flex:1}.speed input{opacity:0;position:absolute}.speed span{border:2px solid var(--silver);background:var(--white);border-radius:.5rem;place-items:center;min-height:3rem;font-weight:500;display:grid}.speed input:checked+span{border-color:var(--green);background:var(--green);color:var(--white)}.speed input:focus-visible+span{outline:3px solid var(--green);outline-offset:3px}.settings{border:2px solid var(--line);background:var(--white);border-radius:.75rem;gap:.5rem;margin:0;padding:.75rem 1rem 1rem;display:grid}.settings legend{padding:0 .5rem;font-weight:700}.toggle{cursor:pointer;align-items:center;gap:.75rem;min-height:2.75rem;display:flex}.toggle input{width:1.5rem;height:1.5rem;accent-color:var(--green)}.privacy{color:var(--ink-soft);text-align:center;margin:0;font-size:.9rem}@media (width>=60rem){.app{grid-template-columns:1fr 1fr;align-items:start;column-gap:2rem;max-width:72rem}.camera-help{grid-column:1/-1}.camera{max-height:70dvh}.sentence{font-size:3.25rem}}@media (prefers-reduced-motion:no-preference){.candidates{animation:.16s ease-out rise}@keyframes rise{0%{opacity:0;transform:translateY(.5rem)}}}.composing{gap:.75rem;display:grid}.chips:empty{display:none}.sentence{min-height:4.5rem;font-size:2rem}.chat{align-content:start;gap:.75rem;display:grid}.chat__head{align-items:center;gap:.5rem;display:flex}.chat__title{font:700 1.25rem / 1 var(--font-text);color:var(--green-dark);margin:0;margin-inline-end:auto}.messages{border:2px solid var(--line);background:var(--white);border-radius:1rem;gap:.75rem;min-height:8rem;max-height:60dvh;margin:0;padding:1rem;list-style:none;display:grid;overflow-y:auto}.messages__empty{color:var(--ink-soft);text-align:center}.message{border-radius:1rem;gap:.25rem;max-width:85%;padding:.75rem 1rem;display:grid}.message--signer{border:2px solid var(--red);background:var(--red-tint);border-start-start-radius:.25rem;justify-self:start}.message--other{border:2px solid var(--green);background:var(--green-tint);border-start-end-radius:.25rem;justify-self:end}.message__text{font:700 1.6rem / 1.5 var(--font-text);overflow-wrap:anywhere;margin:0}.message__meta{color:var(--ink-soft);font-size:.85rem}.reply{grid-template-columns:1fr auto;gap:.5rem;display:grid}.reply__label{grid-column:1/-1;font-weight:700}.reply__input{border:2px solid var(--silver);min-height:3.5rem;font:500 1.25rem var(--font-text);border-radius:.75rem;padding:0 1rem}.reply__input:focus{border-color:var(--green);outline:none}.speed-row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem;display:flex}.speed-row__label{margin-inline-end:.5rem;font-weight:700}.speed-row label{cursor:pointer}.speed-row input{opacity:0;position:absolute}.speed-row span:not(.speed-row__label){border:2px solid var(--silver);background:var(--white);border-radius:.5rem;place-items:center;min-width:4.5rem;min-height:2.75rem;font-weight:500;display:grid}.speed-row input:checked+span{border-color:var(--green);background:var(--green);color:var(--white)}.tips .settings{border:0;margin:.5rem 0;padding:0}.learn{gap:1rem;max-width:72rem;margin:0 auto;padding:0 1rem 2rem;display:grid}.learn__title{font:600 2rem / 1.2 var(--font-display);color:var(--red);margin:0}.learn__intro,.learn__credit{max-width:60ch;color:var(--ink-soft);margin:0}.learn__credit{font-size:.85rem}.sign-grid{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem;display:grid}.sign-card{border:2px solid var(--line);background:var(--white);border-radius:1rem;gap:.5rem;padding:1rem;display:grid}.sign-card__title{font:700 1.5rem / 1.3 var(--font-text);margin:0}.sign-card__english{color:var(--ink-soft);font-size:1rem;font-weight:400}.sign-card__videos{gap:.5rem;display:flex}.sign-card__videos figure{flex:1;margin:0}.sign-card__videos video{aspect-ratio:1;background:var(--ink);border-radius:.5rem;width:100%;display:block}.sign-card__videos figcaption{color:var(--ink-soft);text-align:center;margin-top:.25rem;font-size:.85rem}.voice-test{flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.5rem;display:flex}.voice-test__list{color:var(--ink-soft);font-size:.9rem}.enable-sound .button{font-size:1.1rem}