:root{--brand:#0b8a6f;--brand-ink:#075e4c;--brand-soft:#e2f4ee;--accent:#f2a541;--bg:#f3f6f5;--surface:#fff;--surface-2:#f6f8f8;--ink:#12201c;--muted:#5d6d68;--line:#e1e8e5;--danger:#d4483f;--warn:#b7791f;--ok:#138a52;--stage-a:#eaf5f1;--stage-b:#cfe5dd;--glass:#ffffffb8;--glass-line:#ffffffe6;--shadow-sm:0 1px 2px #10201c0f, 0 1px 3px #10201c0d;--shadow:0 10px 30px -12px #10282238, 0 2px 6px #10201c0d;--radius:22px;--radius-sm:14px;--tabbar-h:68px;--font:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--brand:#2bc49c;--brand-ink:#7fe3c6;--brand-soft:#123a31;--bg:#0b1210;--surface:#121c19;--surface-2:#17231f;--ink:#e7f0ed;--muted:#93a6a0;--line:#22312c;--stage-a:#17302a;--stage-b:#0f1d19;--glass:#121c19b8;--glass-line:#ffffff14;--shadow:0 12px 30px -14px #0009;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}body{font-family:var(--font);color:var(--ink);background:radial-gradient(1200px 600px at 100% -10%, #0b8a6f1a, transparent 60%), radial-gradient(900px 500px at -10% 0%, #f2a54114, transparent 55%), var(--bg);min-height:100dvh;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;background-attachment:fixed;margin:0;font-size:15px;line-height:1.5}h1,h2,p{margin:0}a{color:var(--brand)}.top{z-index:30;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:color-mix(in srgb, var(--bg) 78%, transparent);-webkit-backdrop-filter:saturate(1.6)blur(16px);border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);position:sticky;top:0}.brand{align-items:center;gap:12px;max-width:1240px;margin:0 auto;display:flex}.logo{color:#fff;background:linear-gradient(140deg,#14b08b,#0a6d58);border-radius:13px;flex:none;place-items:center;width:40px;height:40px;display:grid;box-shadow:0 6px 16px -6px #0b8a6fb3,inset 0 1px #ffffff40}.brand-text{min-width:0}.top h1{letter-spacing:-.02em;align-items:center;gap:10px;font-size:19px;font-weight:800;line-height:1.25;display:flex}.top h1 .ur{color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:2px 9px 6px;font-family:Noto Nastaliq Urdu,serif;font-size:13px;font-weight:600;line-height:1}.top .sub{margin-top:3px}.sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}main.layout,section.camera-wrap{max-width:1240px;margin:0 auto;padding:14px 14px 0}main.layout{gap:14px;display:grid}.panel,.cam-out{align-content:start;gap:14px;min-width:0;display:grid}@media (width>=960px){main.layout{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:22px;padding-top:22px}.stage-col{align-self:start;position:sticky;top:86px}section.camera-wrap{padding-top:22px}}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px}.card-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.card-head .h2{margin:0}.h2{letter-spacing:-.01em;margin-bottom:10px;font-size:16px;font-weight:750}.label{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-size:12px;font-weight:700;display:block}.small{color:var(--muted);font-size:13px}.badge{color:var(--brand-ink);background:var(--brand-soft);white-space:nowrap;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}.stage-card{background:radial-gradient(120% 80% at 50% 0%, var(--stage-a), var(--stage-b) 70%);height:clamp(360px,58dvh,640px);box-shadow:var(--shadow);isolation:isolate;border-radius:28px;position:relative;overflow:hidden}.stage-card:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(closest-side,#00000029,#0000);border-radius:50%;height:26px;position:absolute;bottom:9%;left:18%;right:18%}@media (width>=960px){.stage-card{height:calc(100dvh - 86px - 22px - var(--tabbar-h) - 28px);min-height:520px;max-height:820px}}.stage{z-index:1;position:absolute;inset:0}.stage canvas{touch-action:none;display:block;width:100%!important;height:100%!important}.stage-msg{z-index:3;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(12px);text-align:center;max-width:calc(100% - 40px);color:var(--ink);box-shadow:var(--shadow-sm);border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stage-msg:empty{display:none}.caption{z-index:3;pointer-events:none;justify-content:center;align-items:center;gap:8px;display:flex;position:absolute;top:16px;left:0;right:0}.now-word,.now-letter{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(12px);letter-spacing:.02em;box-shadow:var(--shadow-sm);border-radius:999px;padding:8px 18px;font-size:20px;font-weight:800;animation:.22s ease-out pop}.now-letter{background:var(--brand);color:#fff;text-align:center;border-color:#0000;min-width:44px}.now-word:empty,.now-letter:empty{display:none}@keyframes pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.stage-controls{z-index:3;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);scrollbar-width:none;border-radius:999px;gap:6px;max-width:calc(100% - 24px);padding:6px;display:flex;position:absolute;bottom:18px;left:50%;overflow-x:auto;transform:translate(-50%)}.stage-controls::-webkit-scrollbar{display:none}.pill{white-space:nowrap;min-height:36px;color:var(--ink);box-shadow:none;background:0 0;border:0;border-radius:999px;padding:0 14px;font-size:13px;font-weight:700}.pill:hover:not(:disabled){background:color-mix(in srgb, var(--ink) 7%, transparent)}.pill:disabled{opacity:.4}.progress{z-index:4;background:#0000000f;height:4px;position:absolute;bottom:0;left:0;right:0}#progress-bar{background:linear-gradient(90deg, var(--brand), #3fd3a7);border-radius:0 4px 4px 0;width:0;height:100%;transition:width .12s linear}button,.file-btn{font:inherit;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--ink);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:14px;font-weight:700;transition:background .15s,border-color .15s,transform 80ms,box-shadow .15s,color .15s;display:inline-flex}button:hover:not(:disabled),.file-btn:hover{border-color:color-mix(in srgb, var(--brand) 45%, var(--line))}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:linear-gradient(180deg, #12a383, var(--brand));color:#fff;border-color:#0000;box-shadow:0 8px 18px -8px #0b8a6fcc,inset 0 1px #fff3}button.primary:hover:not(:disabled){background:linear-gradient(#13ad8b,#0a7d65)}.buttons{flex-wrap:wrap;gap:8px;display:flex}:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 55%, transparent);outline-offset:2px}textarea,select,input[type=search],input:not([type]),input[type=text]{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);width:100%;min-height:44px;padding:10px 12px;font-size:16px}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235d6d68' stroke-width='1.8' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:34px}textarea:focus,select:focus,input:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);outline:none}.check{color:var(--muted);cursor:pointer;align-items:flex-start;gap:10px;margin-top:12px;font-size:14px;display:flex}.check input{appearance:none;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;border-radius:7px;flex:none;place-items:center;width:22px;height:22px;margin:0;transition:background .15s,border-color .15s;display:grid}.check input:checked{background:var(--brand);border-color:var(--brand)}.check input:checked:after{content:"";border:2.5px solid #fff;border-width:0 2.5px 2.5px 0;width:6px;height:11px;transform:translateY(-1px)rotate(45deg)}.composer-box{border:1px solid var(--line);background:var(--surface-2);border-radius:18px;transition:border-color .15s,box-shadow .15s}.composer-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);background:var(--surface)}.composer-box textarea{resize:none;min-height:84px;box-shadow:none;background:0 0;border:0;padding:14px 14px 6px;font-size:17px;line-height:1.45}.composer-box textarea:focus{box-shadow:none}.composer-actions{align-items:center;gap:10px;padding:8px;display:flex}.mic{background:var(--surface);border-radius:999px;padding:0 14px 0 12px}.mic[aria-pressed=true]{background:var(--danger);border-color:var(--danger);color:#fff;animation:1.6s ease-out infinite pulse}.mic.starting{opacity:.75}@keyframes pulse{0%{box-shadow:0 0 #d4483f73}to{box-shadow:0 0 0 14px #d4483f00}}.meter{background:color-mix(in srgb, var(--ink) 8%, transparent);border-radius:99px;flex:1;min-width:30px;height:6px;overflow:hidden}#mic-level{background:linear-gradient(90deg, var(--brand), var(--accent));width:0;height:100%;transition:width 80ms linear}.sign-btn{border-radius:999px;min-height:46px;padding:0 18px 0 20px;font-size:15px}.voice-status{color:var(--muted);margin-top:10px;font-size:13px}.voice-status.warn{color:var(--warn)}.voice-status.error{color:var(--danger)}.voice-status.ok{color:var(--ok)}.voice-live{color:var(--ink);margin-top:4px;font-size:15px;font-style:italic}.voice-live:empty{display:none}.message{background:color-mix(in srgb, var(--danger) 10%, transparent);color:var(--danger);border-radius:12px;margin-top:10px;padding:10px 12px;font-size:14px;font-weight:600}.message.info{background:var(--brand-soft);color:var(--brand-ink)}.message:empty{display:none}.settings{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.field{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);gap:6px;min-width:0;font-size:12px;font-weight:700;display:grid}.field select{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600}@media (width<=520px){.settings{grid-template-columns:1fr 1fr}.settings .field:last-child{grid-column:1/-1}}.result{gap:8px;margin:0;padding:0;list-style:none;display:grid}.result li{background:var(--surface-2);border:1px solid #0000;border-radius:14px;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;padding:10px 12px;transition:background .2s,border-color .2s,transform .2s;display:grid}.result li.active{background:var(--brand-soft);border-color:color-mix(in srgb, var(--brand) 40%, transparent);transform:translate(3px)}.result .w{font-size:16px;font-weight:800}.result .chip{justify-self:start}.result .d{color:var(--muted);grid-column:1/-1;font-size:13px}.result .d:empty{display:none}.empty-hint{color:var(--muted);border:1.5px dashed var(--line);text-align:center;border-radius:14px;padding:14px;font-size:14px}.result:not(:empty)+.empty-hint{display:none}.chip{letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800;display:inline-block}.chip.signed{color:#0d6b4c;background:#dcf3e9}.chip.spelled{color:#94600f;background:#fdf0d8}.chip.omitted{color:#5b6770;background:#eceff1}.chip.unsupported,.chip.cut{color:#a8322a;background:#fbe1df}@media (prefers-color-scheme:dark){.chip.signed{color:#6fe0b5;background:#12372b}.chip.spelled{color:#f3c46d;background:#3a2c12}.chip.omitted{color:#a6b4ba;background:#222c30}.chip.unsupported,.chip.cut{color:#f29a92;background:#3d1c1a}}.legend{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}details.card{padding:0}details>summary{cursor:pointer;align-items:center;gap:8px;padding:16px;font-size:15px;font-weight:750;list-style:none;display:flex}details>summary::-webkit-details-marker{display:none}details>summary:after{content:"";border:solid var(--muted);border-width:0 2px 2px 0;width:9px;height:9px;margin-left:auto;transition:transform .2s;transform:rotate(45deg)translateY(-3px)}details[open]>summary:after{transform:rotate(-135deg)translateY(-2px)}details>:not(summary){margin-left:16px;margin-right:16px}details>:last-child{margin-bottom:16px}details ul.small{gap:6px;padding-left:18px;display:grid}.count{color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700}.vocab-tools{margin:12px 16px 10px}.vocab-list{overscroll-behavior:contain;flex-wrap:wrap;gap:6px;max-height:300px;padding:2px 2px 4px;display:flex;overflow-y:auto}.vocab-list button{background:var(--surface-2);border-radius:999px;min-height:34px;padding:0 12px;font-size:13px;font-weight:600}.vocab-list button.added{border-style:dashed;border-color:color-mix(in srgb, var(--brand) 45%, var(--line))}.camera-grid{gap:14px;display:grid}@media (width>=960px){.camera-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:22px}.cam-col{position:sticky;top:86px}}.cam-col{gap:12px;display:grid}.cam-view{aspect-ratio:4/3;box-shadow:var(--shadow);background:radial-gradient(70% 60% at 50% 40%,#1d2b27,#0b1210);border-radius:28px;position:relative;overflow:hidden}.cam-view video,.cam-view canvas{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.cam-view .stage-msg{color:#e7f0ed;background:#0c141299;border-color:#ffffff1f}.cam-now{-webkit-backdrop-filter:blur(12px);color:#fff;background:#0c14129e;border:1px solid #ffffff24;border-radius:999px;align-items:center;gap:10px;padding:6px 8px 6px 14px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.cam-now .label{color:#ffffffb3;margin:0}.cam-current{background:var(--brand);text-align:center;border-radius:999px;min-width:36px;padding:4px 12px;font-size:18px;font-weight:800}.cam-current:empty:before{content:"–";opacity:.6}.cam-buttons{grid-template-columns:1.3fr 1.1fr .8fr;gap:8px;display:grid}.cam-buttons button{white-space:nowrap;border-radius:16px;min-height:50px;padding:0 10px}.transcript .h2{margin-bottom:8px}.cam-text{letter-spacing:-.01em;background:var(--surface-2);word-wrap:break-word;border-radius:16px;min-height:92px;padding:14px 16px;font-size:24px;font-weight:700;line-height:1.35}.cam-text:empty:before{content:"Your signing appears here…";color:var(--muted);font-size:17px;font-weight:500}.cam-text .pending{color:var(--brand)}.cam-suggest{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:13px;display:flex}.cam-suggest button{border-radius:999px;min-height:36px;padding:0 12px;font-size:14px}.core-list{flex-wrap:wrap;gap:6px;display:flex}.core-list span{background:var(--brand-soft);color:var(--brand-ink);border-radius:999px;padding:5px 12px;font-size:14px;font-weight:700}.teach-row{grid-template-columns:1fr auto;gap:8px;margin-top:12px;display:grid}#btn-record.recording,button.recording{background:var(--danger);border-color:var(--danger);color:#fff;animation:1.6s ease-out infinite pulse}.teach-list{flex-wrap:wrap;gap:6px;margin:10px 0 12px;padding:0;list-style:none;display:flex}.teach-list:empty{display:none}.teach-list li{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;align-items:center;gap:4px;padding:4px 4px 4px 12px;font-size:13px;font-weight:700;display:flex}.teach-list li.few{border-style:dashed;border-color:var(--accent)}.teach-list button{border-radius:999px;min-height:28px;padding:0 10px;font-size:12px;font-weight:600}.file-btn{position:relative}.debug-grid{grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px;display:grid}.debug-grid dt{color:var(--muted);font-weight:600}.debug-grid dd{margin:0;font-weight:600}.debug-grid .yes,dd.yes{color:var(--ok)}.debug-grid .no,dd.no{color:var(--danger)}.tabbar{z-index:40;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));width:min(440px,100% - 24px);height:var(--tabbar-h);background:color-mix(in srgb, var(--surface) 82%, transparent);border:1px solid var(--line);-webkit-backdrop-filter:saturate(1.6)blur(18px);border-radius:24px;grid-template-columns:1fr 1fr;gap:6px;padding:6px;display:grid;position:fixed;transform:translate(-50%);box-shadow:0 16px 40px -16px #0a1e1973}.tabbar button{height:100%;min-height:0;color:var(--muted);box-shadow:none;background:0 0;border:0;border-radius:18px;flex-direction:column;gap:2px;padding:0 6px;font-size:12px;font-weight:700;display:flex}.tabbar button svg{width:22px;height:22px}.tabbar button[aria-selected=true]{background:var(--brand-soft);color:var(--brand-ink)}.tabbar button:hover:not([aria-selected=true]){background:color-mix(in srgb, var(--ink) 5%, transparent)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.panel>*,.cam-out>*{min-width:0}@media (width<=360px){.composer-actions{flex-wrap:wrap}.meter{flex-basis:100%;order:3}.sign-btn{flex:1}.settings{grid-template-columns:1fr}.settings .field:last-child{grid-column:auto}.cam-buttons{grid-template-columns:1fr 1fr}.cam-buttons #btn-cam{grid-column:1/-1}.top h1 .ur{display:none}}