:root{--bg:#0e0e12;--bg-2:#16161d;--panel:#14141b;--panel-2:#1c1c26;--elevated:#22222d;--line:#2a2a37;--line-2:#383848;--text:#ecedf2;--muted:#9a9ab0;--muted-2:#6d6d82;--accent:#7c8cff;--accent-2:#5f6dff;--accent-soft:#7c8cff29;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-pill:999px;--ctl:40px;--ctl-sm:32px;--ctl-lg:48px;--fz-2xs:11px;--fz-xs:12px;--fz-sm:13px;--fz-md:14px;--fz-lg:16px;--fz-xl:20px;--shadow-1:0 2px 8px -2px #00000073;--shadow-2:0 14px 34px -14px #000000b3;--shadow-pop:0 24px 60px -20px #000000d9;--ease:cubic-bezier(.4, 0, .2, 1);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}@supports (height:100dvh){html,body,#root{height:100dvh}}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Vazirmatn,Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button,input{font-family:inherit}.app{flex-direction:column;height:100%;display:flex}.field{height:var(--ctl);width:100%;min-width:0;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--text);font-size:var(--fz-md)}.field::placeholder{color:var(--muted-2)}.field:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.btn{height:var(--ctl);padding:0 var(--s4);justify-content:center;align-items:center;gap:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--text);font-size:var(--fz-md);cursor:pointer;white-space:nowrap;transition:border-color .12s var(--ease), background .12s var(--ease), filter .12s var(--ease), opacity .12s var(--ease);font-weight:600;display:inline-flex}.btn:hover{border-color:var(--line-2)}.btn:disabled{opacity:.5;cursor:default}.btn:focus-visible{box-shadow:0 0 0 3px var(--accent-soft);outline:none}.btn--primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;border-color:#0000}.btn--primary:hover{filter:brightness(1.06);border-color:#0000}.btn--ghost{color:var(--muted);background:0 0}.btn--ghost:hover{color:var(--text);border-color:var(--line-2)}.btn--lg{height:var(--ctl-lg);font-size:var(--fz-lg);border-radius:var(--r-md)}.btn--block{width:100%}.icon-btn{width:var(--ctl);height:var(--ctl);border:1px solid var(--line);color:var(--muted);border-radius:var(--r-pill);cursor:pointer;transition:color .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease);background:0 0;flex:none;place-items:center;display:inline-grid}.icon-btn:hover{color:var(--text);border-color:var(--line-2)}.icon-btn:focus-visible{box-shadow:0 0 0 3px var(--accent-soft);outline:none}.icon-btn svg,.btn svg,.seg-btn svg,.tbtn svg,.dock-btn svg{display:block}.seg{height:var(--ctl);border:1px solid var(--line);border-radius:var(--r-sm);flex:none;display:inline-flex;overflow:hidden}.seg-btn{color:var(--muted);padding:0 var(--s3);justify-content:center;align-items:center;gap:var(--s1);min-width:40px;font-size:var(--fz-sm);cursor:pointer;transition:background .12s var(--ease), color .12s var(--ease);background:0 0;border:none;display:inline-flex}.seg-btn+.seg-btn{border-inline-start:1px solid var(--line)}.seg-btn:hover{color:var(--text)}.seg-btn.active{background:var(--accent-2);color:#fff}.tbtn{width:40px;height:var(--ctl);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--text);cursor:pointer;font-size:var(--fz-lg);transition:background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);flex:none;place-items:center;display:grid}.tbtn:hover{border-color:var(--line-2)}.tbtn.active{background:var(--accent-2);border-color:var(--accent-2);color:#fff}.btn-group{align-items:center;gap:var(--s2);flex-wrap:wrap;display:flex}.switch{border-radius:var(--r-pill);border:1px solid var(--line);background:var(--panel);cursor:pointer;width:44px;height:26px;transition:background .15s var(--ease);flex:none;position:relative}.switch .knob{top:2px;background:var(--muted);width:20px;height:20px;transition:transform .15s var(--ease), background .15s var(--ease);border-radius:50%;position:absolute;inset-inline-start:2px}.switch.on{background:var(--accent-2);border-color:var(--accent-2)}.switch.on .knob{background:#fff;transform:translate(18px)}[dir=rtl] .switch.on .knob{transform:translate(-18px)}.topbar{justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);padding-top:max(var(--s2), env(safe-area-inset-top));border-bottom:1px solid var(--line);background:linear-gradient(180deg, var(--bg-2), var(--bg));flex:none;display:flex}.brand{align-items:center;gap:var(--s3);min-width:0;display:flex}.logo{border-radius:var(--r-md);flex:none;width:32px;height:32px;display:block}.brand-text h1{font-size:var(--fz-lg);letter-spacing:.2px;white-space:nowrap;margin:0;font-weight:700}.topbar-actions{align-items:center;gap:var(--s2);flex:none;display:flex}.workspace{flex:1;grid-template-columns:1fr 400px;min-height:0;display:grid}.stage{position:relative}.stage-scroll{padding:var(--s6);place-items:center;display:grid;position:absolute;inset:0;overflow:auto}.stage-bg{pointer-events:none;position:absolute;inset:0}.stage-bg.checker{background-color:#0b0b0f;background-image:linear-gradient(45deg,#20202a 25%,#0000 25%),linear-gradient(-45deg,#20202a 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#20202a 75%),linear-gradient(-45deg,#0000 75%,#20202a 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}.capture{background:0 0;padding:72px;display:inline-block;position:relative}@media (width<=900px){.capture{padding:44px}}.text-box{display:inline-block;position:relative}.editable{white-space:pre-wrap;word-break:break-word;min-width:3ch;caret-color:var(--accent);outline:none}.editable.dir-rtl,.editable.dir-rtl>p{direction:rtl!important}.editable.dir-ltr,.editable.dir-ltr>p{direction:ltr!important}.editable ::selection{-webkit-text-fill-color:#fff;color:#fff;background:#5f6dff8c}.editable-placeholder{text-align:center;color:#9696aa99;pointer-events:none;-webkit-user-select:none;user-select:none;place-items:center;font-size:22px;display:grid;position:absolute;inset:0}.st-paragraph{margin:0}.panel{border-inline-start:1px solid var(--line);background:var(--panel);flex-direction:column;min-height:0;display:flex}.panel-toolbar{align-items:center;gap:var(--s2);padding:var(--s3) var(--s3);border-bottom:1px solid var(--line);flex:none;display:flex}.panel-toolbar .spacer{flex:1}.panel-scroll{min-height:0;padding:var(--s2);gap:var(--s2);flex-direction:column;flex:1;display:flex;overflow-y:auto}.controls{gap:var(--s2);flex-direction:column;display:flex}.section{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel-2)}.section-h{padding:var(--s3) var(--s4);font-size:var(--fz-xs);letter-spacing:.4px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;font-weight:700;display:flex}.section-body{padding:var(--s4);gap:var(--s3);flex-direction:column;display:flex}.app-footer{align-items:center;gap:var(--s1);padding:var(--s5) var(--s2) var(--s3);font-size:var(--fz-2xs);color:var(--muted);text-align:center;flex-direction:column;display:flex}.app-footer a{color:var(--muted);text-decoration:none}.app-footer a:hover{color:var(--accent)}.app-footer span{font-variant-numeric:tabular-nums;opacity:.8}.row{align-items:center;gap:var(--s3);min-height:var(--ctl);display:flex}.row-label{font-size:var(--fz-sm);color:var(--muted);flex:0 0 92px}.row-control{align-items:center;gap:var(--s2);flex:1;min-width:0;display:flex}.hint{font-size:var(--fz-xs);color:var(--muted);line-height:1.55}.slider{align-items:center;gap:var(--s3);width:100%;display:flex}.slider-track{min-width:0;height:var(--ctl);cursor:pointer;touch-action:none;direction:ltr;outline:none;flex:1;align-items:center;display:flex;position:relative}.slider-track:focus-visible .slider-thumb{box-shadow:0 0 0 4px var(--accent-soft)}.slider-rail{border-radius:var(--r-pill);background:var(--line);height:6px;position:absolute;inset-inline:0}.slider-fill{border-radius:var(--r-pill);background:var(--accent);height:6px;position:absolute;inset-inline-start:0}.slider-thumb{width:18px;height:18px;box-shadow:var(--shadow-1);transition:box-shadow .12s var(--ease);background:#fff;border:1px solid #00000040;border-radius:50%;position:absolute;transform:translate(-50%)}.slider-val{text-align:end;font-variant-numeric:tabular-nums;min-width:46px;font-size:var(--fz-xs);color:var(--muted);flex:none}.colorfield{display:inline-flex;position:relative}.color-swatch{width:44px;height:var(--ctl);border-radius:var(--r-sm);border:1px solid var(--line);cursor:pointer;box-shadow:inset 0 0 0 2px #ffffff1f}.color-pop{z-index:200;width:236px;padding:var(--s3);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-2);box-shadow:var(--shadow-pop);position:fixed}.cp{direction:ltr}.cp-sv{border-radius:var(--r-sm);cursor:crosshair;touch-action:none;width:100%;height:132px;position:relative;overflow:hidden}.cp-sv-cursor{pointer-events:none;border:2px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000080}.cp-hue{border-radius:var(--r-pill);height:14px;margin-top:var(--s3);cursor:pointer;touch-action:none;background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);position:relative}.cp-hue-thumb{pointer-events:none;background:#fff;border:1px solid #0006;border-radius:50%;width:16px;height:16px;position:absolute;top:50%;transform:translate(-50%,-50%)}.cp-row{align-items:center;gap:var(--s2);margin-top:var(--s3);display:flex}.cp-preview{border-radius:var(--r-sm);border:1px solid var(--line);flex:none;width:34px;height:34px}.cp-hex{min-width:0;height:var(--ctl);padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--text);font-size:var(--fz-sm);font-variant-numeric:tabular-nums;flex:1}.cp-swatches{margin-top:var(--s3);grid-template-columns:repeat(9,1fr);gap:6px;display:grid}.cp-swatch{aspect-ratio:1;cursor:pointer;border:1px solid #ffffff24;border-radius:6px;padding:0}.popover{z-index:200;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg-2);width:min(340px,100vw - 16px);box-shadow:var(--shadow-pop);position:fixed}.popover-body{padding:var(--s4);gap:var(--s3);flex-direction:column;max-height:min(72vh,560px);display:flex;overflow-y:auto}.popover-title{font-size:var(--fz-xs);letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s1);font-weight:700}.popover-tail{background:var(--bg-2);border:1px solid var(--line);width:14px;height:14px;position:absolute;transform:translate(-50%)rotate(45deg)}.popover-down .popover-tail{border-bottom:none;border-right:none;top:-8px}.popover-up .popover-tail{border-top:none;border-left:none;bottom:-8px}.popover-backdrop{z-index:40;position:fixed;inset:0}.quality-content{gap:var(--s2);flex-direction:column;display:flex}.quality-content .seg{width:100%}.quality-content .seg-btn{flex:1}.about-pop{gap:var(--s3);flex-direction:column;display:flex}.about-head{align-items:center;gap:var(--s3);display:flex}.about-head .logo{width:40px;height:40px}.about-head h2{font-size:var(--fz-lg);margin:0;font-weight:700}.about-desc{font-size:var(--fz-sm);color:var(--muted);margin:0;line-height:1.6}.about-links{align-items:center;gap:var(--s3);padding-top:var(--s1);flex-wrap:wrap;display:flex}.about-link{align-items:center;gap:var(--s1);font-size:var(--fz-sm);color:var(--text);text-decoration:none;display:inline-flex}.about-link:hover{color:var(--accent)}.about-link svg{color:var(--muted)}.about-link:hover svg{color:var(--accent)}.about-foot{margin-top:var(--s1);padding-top:var(--s3);border-top:1px solid var(--line);align-items:center;gap:var(--s2);font-size:var(--fz-xs);color:var(--muted-2);font-variant-numeric:tabular-nums;display:flex}.about-foot .dot{opacity:.5}.fontpicker{width:100%;position:relative}.font-trigger{width:100%;height:var(--ctl);justify-content:space-between;align-items:center;gap:var(--s2);padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);color:var(--text);cursor:pointer;font-size:var(--fz-lg);display:flex}.font-trigger:hover{border-color:var(--line-2)}.font-trigger-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.font-trigger-caret{color:var(--muted);flex:none;place-items:center;display:grid}.font-empty{padding:var(--s3);color:var(--muted);font-size:var(--fz-sm)}.fontmodal-overlay{z-index:300;padding:var(--s4);padding-bottom:max(var(--s4), env(safe-area-inset-bottom));background:#0000008c;place-items:center;display:grid;position:fixed;inset:0}.fontmodal{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-xl);flex-direction:column;width:min(720px,100%);max-height:min(82vh,760px);display:flex;overflow:hidden;box-shadow:0 40px 100px -30px #000}.fontmodal-h{padding:var(--s4);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;font-weight:700;display:flex}.fontmodal-close{border:1px solid var(--line);background:var(--panel);width:32px;height:32px;color:var(--text);cursor:pointer;border-radius:50%;place-items:center;display:grid}.fontmodal-top{gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--line);flex-direction:column;display:flex}.fontmodal-filters{justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;display:flex}.gf-toggle{align-items:center;gap:var(--s2);font-size:var(--fz-sm);color:var(--muted);display:flex}.font-grid{padding:var(--s4) var(--s4) var(--s5);gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));align-content:start;display:grid;overflow-y:auto}.font-grid-label{font-size:var(--fz-xs);color:var(--muted);padding:var(--s2) 2px 2px;grid-column:1/-1;font-weight:700}.font-grid-sentinel{grid-column:1/-1;height:1px}.fc{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:var(--s4) var(--s2) var(--s2);cursor:pointer;align-items:center;gap:var(--s2);min-height:96px;transition:border-color .12s var(--ease), background .12s var(--ease);flex-direction:column;display:flex;position:relative}.fc:hover{border-color:var(--accent)}.fc.active{border-color:var(--accent-2);background:color-mix(in srgb, var(--accent-2) 18%, var(--panel))}.fc.loading .fc-preview{opacity:.55}.fc-preview{color:var(--text);place-items:center;min-height:42px;font-size:34px;line-height:1.1;display:grid}.fc-name{font-size:var(--fz-xs);color:var(--muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.fc-star{top:4px;width:26px;height:26px;color:var(--muted);cursor:pointer;border-radius:var(--r-sm);background:0 0;border:none;font-size:15px;line-height:1;position:absolute;inset-inline-end:4px}.fc-star:hover{background:var(--panel-2)}.fc-star.on{color:#fc0}.preset-form{gap:var(--s2);display:flex}.preset-chips{gap:var(--s2);flex-wrap:wrap;display:flex}.preset-chip{height:var(--ctl-sm);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--panel);align-items:center;display:inline-flex;overflow:hidden}.preset-chip-name{color:var(--text);padding:0 var(--s2) 0 var(--s3);font-size:var(--fz-sm);cursor:pointer;background:0 0;border:none;height:100%}.preset-chip-x{color:var(--muted);padding:0 var(--s2);cursor:pointer;background:0 0;border:none;place-items:center;height:100%;display:grid}.preset-chip-x:hover{color:var(--text)}.exportbar{border-top:1px solid var(--line);background:var(--bg-2);padding:var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));gap:var(--s2);flex:none;display:flex}.fab{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;cursor:pointer;width:52px;height:52px;transition:filter .12s var(--ease), transform .12s var(--ease);border:none;border-radius:50%;flex:none;place-items:center;display:grid;box-shadow:0 10px 24px -8px #5f6dff99}.fab:hover{filter:brightness(1.06)}.fab:active{transform:scale(.94)}.fab:disabled{opacity:.55;cursor:default}.fab--soft{background:var(--elevated);color:var(--text);box-shadow:var(--shadow-2);border:1px solid var(--line)}.export-overlay{z-index:400;pointer-events:none;position:fixed;inset:0}.toast{left:50%;bottom:calc(24px + env(safe-area-inset-bottom));max-width:min(360px,100vw - 32px);padding:var(--s3) var(--s4);border-radius:var(--r-pill);background:var(--elevated);border:1px solid var(--line);box-shadow:var(--shadow-2);font-size:var(--fz-sm);text-align:center;pointer-events:auto;position:absolute;transform:translate(-50%)}.vslider{inset-inline-end:var(--s3);z-index:5;width:40px;height:min(46vh,360px);position:absolute;top:50%;transform:translateY(-50%)}.vslider-hit{cursor:pointer;touch-action:none;outline:none;position:absolute;inset:0}.vslider-svg{width:100%;height:100%;position:absolute;inset:0}.vslider-rail-rect{fill:var(--line)}.vslider-fill-rect{fill:var(--accent)}.vslider-hit:focus-visible .vslider-thumb{box-shadow:0 0 0 4px var(--accent-soft)}.vslider-thumb{border-radius:var(--r-pill);pointer-events:none;background:#fff;height:4px;position:absolute;inset-inline:3px;box-shadow:0 1px 4px #0009}.vslider-val{bottom:-24px;text-align:center;font-size:var(--fz-2xs);color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none;position:absolute;inset-inline:-6px}.workspace-mobile{display:block;position:relative}.workspace-mobile .stage{position:absolute;inset:0}.mfab-stack{right:16px;bottom:max(6px, env(safe-area-inset-bottom));z-index:20;align-items:center;gap:var(--s3);flex-direction:column;display:flex;position:absolute}.mfab-btn{cursor:pointer;transition:transform .12s var(--ease), filter .12s var(--ease);border:none;border-radius:50%;place-items:center;display:grid}.mfab-btn:active{transform:scale(.93)}.mfab-btn:disabled{opacity:.55;cursor:default}.mfab-btn--primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;width:60px;height:60px;box-shadow:0 14px 30px -8px #5f6dff99}.mfab-btn--menu{background:var(--elevated);border:1px solid var(--line);width:52px;height:52px;color:var(--text);box-shadow:var(--shadow-2)}.mfab-btn--menu.active{background:var(--accent-2);border-color:var(--accent-2);color:#fff}.mmenu-backdrop{z-index:24;position:fixed;inset:0}.mmenu{right:16px;bottom:calc(env(safe-area-inset-bottom) + 16px + 52px + 12px);z-index:25;background:color-mix(in srgb, var(--bg-2) 82%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r-lg);width:56px;max-height:64vh;box-shadow:var(--shadow-2);animation:mmenu-in .16s var(--ease);flex-direction:column;display:flex;position:fixed;overflow:hidden}@keyframes mmenu-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.mmenu-head{padding:var(--s1);border-bottom:1px solid var(--line);flex:none;place-items:center;display:grid}.mmenu-close{width:30px;height:30px;color:var(--muted);border-radius:var(--r-sm);cursor:pointer;background:0 0;border:none;place-items:center;display:grid}.mmenu-close:hover{color:var(--text)}.mmenu-list{scrollbar-width:none;gap:var(--s1);padding:var(--s2);flex-direction:column;display:flex;overflow-y:auto}.mmenu-list::-webkit-scrollbar{display:none}.mmenu-item{border-radius:var(--r-md);width:40px;height:40px;color:var(--text);cursor:pointer;transition:background .12s var(--ease), border-color .12s var(--ease);background:0 0;border:1px solid #0000;flex:none;place-items:center;display:grid}.mmenu-item:hover{background:var(--panel-2)}.mmenu-item.active{background:var(--accent-2);border-color:var(--accent-2);color:#fff}.mpop-backdrop{z-index:26;position:fixed;inset:0}.mpop{z-index:27;border:1px solid var(--line);border-radius:var(--r-lg);background:color-mix(in srgb, var(--bg-2) 84%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);width:min(250px,100vw - 96px);box-shadow:var(--shadow-pop);position:fixed}.mpop-tail{border-top:9px solid #0000;border-bottom:9px solid #0000;border-left:9px solid color-mix(in srgb, var(--bg-2) 84%, transparent);width:0;height:0;position:absolute;right:-9px}.mpop-body{padding:var(--s3);gap:var(--s3);flex-direction:column;max-height:62vh;display:flex;overflow:hidden auto}.mpop .row{align-items:stretch;gap:var(--s1);flex-direction:column;min-height:0}.mpop .row-label{flex:none}.mpop .row-control,.mpop .seg,.mpop .btn-group{width:100%}.mpop .seg-btn{flex:1;min-width:0}@media (width<=900px){.vslider{height:min(52vh,420px)}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}
