:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#f8f6f0;--surface:#fff;--surface-2:#efebe1;--ink:#17231f;--ink-muted:#4c5a55;--line:#d9d3c4;--primary:#174b3a;--primary-hover:#10372a;--on-primary:#fff;--secondary:#42866e;--accent:#c7a86d;--accent-ink:#7a5e22;--danger:#a3261b;--ok:#1f6b4a;--focus:#2f7dd1;--radius:14px;font-family:system-ui,-apple-system,Segoe UI,Noto Sans Arabic,Geeza Pro,Tahoma,sans-serif;line-height:1.6}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#101c19;--surface:#16261f;--surface-2:#1d3029;--ink:#eef1ec;--ink-muted:#a9b6b0;--line:#2e443c;--primary:#4fae8c;--primary-hover:#63c29f;--on-primary:#0b1512;--secondary:#7cc3a8;--accent-ink:#e0c58f;--danger:#ff8c80;--ok:#7fd6ab;--focus:#8cc4ff}}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0}a{color:var(--primary)}.wrap{max-inline-size:1100px;margin-inline:auto;padding:16px}.en{color:var(--ink-muted);font-size:.82em;font-weight:400;display:block}h1 .en,legend .en,.field>span .en,.check .en,button .en,.button .en,h2 .en,summary .en{margin-inline-start:.35em;display:inline}.sr-only{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.head h1{color:var(--primary);margin:.2em 0;font-size:clamp(1.4rem,4vw,2rem)}.lead{color:var(--ink);margin:0}.badge{background:var(--surface-2);color:var(--accent-ink);border-radius:999px;margin:0;padding:2px 10px;font-size:.85rem;display:inline-block}.support{margin-block:12px;font-size:.92rem}.support .bad{color:var(--danger);font-weight:600}.support .good{color:var(--ok)}.grid{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}@media (min-width:860px){.grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}fieldset{border:0;margin:0 0 18px;padding:0}legend{color:var(--primary);margin-block-end:8px;font-weight:700}.field{gap:4px;margin-block-end:10px;display:grid}.note{color:var(--ink-muted);margin:-4px 0 10px;font-size:.82rem}.link-note{color:var(--accent-ink);font-weight:600}.link-note span,.note .en{display:block}.row{grid-template-columns:1fr 1fr;gap:12px;display:grid}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 d='M1 1l5 5 5-5' fill='none' stroke='%2342866E' stroke-width='2'/%3E%3C/svg%3E");background-position:14px;background-repeat:no-repeat}select:disabled{opacity:.75}select,textarea{font:inherit;color:var(--ink);background-color:var(--bg);border:1px solid var(--line);border-radius:10px;min-block-size:44px;inline-size:100%;padding:10px 12px}select{padding-inline:12px 38px}textarea{resize:vertical;line-height:1.7}.check{align-items:center;gap:10px;min-block-size:44px;display:flex}.check input{block-size:22px;inline-size:22px;accent-color:var(--primary)}.choices{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;display:grid}.choice{border:1px solid var(--line);cursor:pointer;background:var(--bg);border-radius:10px;align-items:center;gap:8px;min-block-size:44px;padding:10px 12px;display:flex;position:relative}.choice:has(input:checked){border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}.choice input{accent-color:var(--primary)}.choices:has(.thumb){grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}.choice.thumb{text-align:center;flex-direction:column;align-items:stretch;gap:6px;padding:6px;font-size:.82rem;line-height:1.3}.choice.thumb input{opacity:0;pointer-events:none;position:absolute}.choice.thumb img,.choice.thumb canvas{aspect-ratio:9/16;object-fit:cover;background:#000;border-radius:8px;block-size:auto;inline-size:100%}.choice.thumb:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}.thumb-label .en{margin:0;font-size:.72rem;display:block}button,.button{font:inherit;cursor:pointer;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:6px;min-block-size:48px;padding:10px 18px;text-decoration:none;display:inline-flex}.primary{background:var(--primary);color:var(--on-primary);inline-size:100%;font-weight:700}.primary .en{color:inherit;opacity:.9}.support .en,.status .en{margin:0;display:block}.lead .en,.support .en,.status .en{text-align:end}.primary:hover{background:var(--primary-hover)}.secondary{background:var(--surface-2);color:var(--ink);border-color:var(--line)}button:disabled{opacity:.55;cursor:not-allowed}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.preview{justify-items:center;gap:10px;display:grid}.preview canvas{background:#000;border-radius:12px;block-size:auto;inline-size:100%;max-inline-size:340px}.status,.result{margin-block-start:16px}.status progress{block-size:14px;inline-size:100%;accent-color:var(--primary)}.status .warn{color:var(--accent-ink);margin-block-start:6px;font-weight:600;display:block}.status[data-state=error] #statusText{color:var(--danger);font-weight:600}.status[data-state=done] #cancel,.status[data-state=error] #cancel,.status[data-state=idle] #cancel{display:none}.result video{background:#000;border-radius:12px;inline-size:100%;max-inline-size:340px;margin-inline:auto;display:block}.actions{grid-template-columns:1fr 1fr;gap:10px;margin-block:14px;display:grid}.actions .primary{inline-size:auto}.diag{margin-block-start:16px;font-size:.85rem}.diag summary{cursor:pointer;align-items:center;min-block-size:44px;display:flex}.diag table{border-collapse:collapse;font-variant-numeric:tabular-nums;inline-size:100%;margin-block:8px}.diag th,.diag td{border:1px solid var(--line);text-align:start;padding:4px 6px}.diag .warn{color:var(--danger)}.diag pre{white-space:pre-wrap;word-break:break-word}.foot{color:var(--ink-muted);margin-block:24px;font-size:.82rem}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}html[dir=ltr] select{background-position:right 14px center}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.langs{gap:6px;display:flex}.langs .lang{border:1px solid var(--line);background:var(--surface);min-block-size:40px;color:var(--ink);border-radius:999px;padding:6px 12px;font-size:.9rem}.langs .lang[aria-current=true]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
