@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/b2ea385cb5ae8625-s.p.3gpqod6e6kd7d.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/1b99372b3eaef0c8-s.p.1ay-qk1u8nydy.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Outfit Fallback;src:local(Arial);ascent-override:100.18%;descent-override:26.05%;line-gap-override:0.0%;size-adjust:99.82%}.HwFO5a_className{font-family:Outfit,Outfit Fallback;font-style:normal}.HwFO5a_variable{--font-outfit:"Outfit", "Outfit Fallback"}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/5ce348bf30bf5439-s.27spqqad3wyeo.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/4fa387ec64143e14-s.3f4zuumv8svu0.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/6306c77e7c8268e4-s.34r5yzckw0h2s.woff2)format("woff2");unicode-range:U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7d817b4c03b0c5f1-s.2jyz_zw3a8jit.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/bbc41e54d2fcbd21-s.30bdpjkrtcces.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/797e433ab948586e-s.p.1v5bejj26fx9h.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Mono Fallback;src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.0%;size-adjust:134.59%}._8Li5zG_className{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}._8Li5zG_variable{--font-geist-mono:"Geist Mono", "Geist Mono Fallback"}
:root{--bg:#0c0c13;--bg-2:#13121c;--panel:#1b192e8c;--panel-border:#b8adeb17;--text:#ededf3;--muted:#9a9aac;--faint:#636374;--accent:#9a64f7;--accent-2:#2ed8fa;--ok:#2fda8a;--err:#f1556a;--radius:18px;--grad:linear-gradient(120deg, var(--accent) 0%, #567ffb 50%, var(--accent-2) 100%)}*{box-sizing:border-box;margin:0;padding:0}html,body{max-width:100vw;overflow-x:hidden}body{min-height:100vh;color:var(--text);background:radial-gradient(900px 600px at 10% -10%, #813df52e, transparent 60%), radial-gradient(800px 500px at 100% 0%, #1fd5f91f, transparent 60%), var(--bg);font-family:var(--font-outfit), system-ui, sans-serif;-webkit-font-smoothing:antialiased;background-attachment:fixed}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}button:disabled{cursor:not-allowed;opacity:.45}input{font:inherit;color:inherit}.page{max-width:1440px;margin:0 auto;padding:36px 28px 80px}.hero{margin-bottom:28px;animation:.6s both rise}.brand{letter-spacing:.02em;color:var(--muted);align-items:center;gap:10px;margin-bottom:18px;font-weight:600;display:inline-flex}.logo{background:var(--grad);color:#fff;border-radius:10px;place-items:center;width:34px;height:34px;font-size:18px;display:grid;box-shadow:0 6px 24px #813df573}.hero h1{letter-spacing:-.02em;max-width:900px;font-size:clamp(28px,4vw,46px);font-weight:700;line-height:1.1}.grad{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text}.lead{color:var(--muted);max-width:760px;margin-top:14px;font-size:17px;line-height:1.55}.resizer{grid-template-columns:340px 1fr;align-items:start;gap:24px;display:grid}@media (max-width:920px){.resizer{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(18px)saturate(140%);box-shadow:0 20px 60px -30px #000000b3}.settings{padding:6px 20px;animation:.6s 80ms both rise;position:sticky;top:20px}@media (max-width:920px){.settings{position:static}}.panel-section{flex-direction:column;gap:14px;padding:18px 0;display:flex}.panel-section+.panel-section{border-top:1px solid var(--panel-border)}.section-title{letter-spacing:.01em;align-items:center;gap:10px;font-size:15px;font-weight:600;display:flex}.step{color:#c5a3ff;background:#9a64f72e;border-radius:7px;place-items:center;width:22px;height:22px;font-size:12px;display:grid}.field{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}.field label,.field>label{color:var(--muted);font-size:13px}.field-head{justify-content:space-between;align-items:center;display:flex}.value-pill{font-family:var(--font-geist-mono), monospace;color:var(--text);background:#ffffff0f;border-radius:999px;padding:3px 8px;font-size:12px}.size-row{align-items:flex-end;gap:8px;display:flex}.input-wrap{position:relative}.input-wrap input{width:100%;font-size:20px;font-weight:600;font-family:var(--font-geist-mono), monospace;border:1px solid var(--panel-border);appearance:textfield;background:#07070d8c;border-radius:12px;outline:none;padding:12px 36px 12px 14px;transition:border-color .2s,box-shadow .2s}.input-wrap input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-wrap input:focus{border-color:#9a64f7b3;box-shadow:0 0 0 4px #9a64f72e}.unit{color:var(--faint);font-size:12px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.lock{border:1px solid var(--panel-border);background:#ffffff08;border-radius:12px;flex:none;width:38px;height:50px;font-size:15px;transition:all .2s}.lock.on{background:#9a64f729;border-color:#9a64f773}.lock:hover{transform:translateY(-1px)}.presets{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.chip{border:1px solid var(--panel-border);text-align:left;background:#ffffff06;border-radius:11px;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 10px;transition:all .2s;display:flex}.chip strong{font-family:var(--font-geist-mono), monospace;font-size:12px;font-weight:600}.chip span{color:var(--faint);font-size:11px}.chip:hover{background:#9a64f714;border-color:#9a64f766}.chip.active{background:linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad) border-box;border:1px solid #0000;box-shadow:0 6px 22px -10px #813df5cc}.chip.active span{color:#cfb3ff}input[type=range]{appearance:none;background:#ffffff14;border-radius:999px;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:4px solid var(--accent);cursor:pointer;background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .15s;box-shadow:0 2px 12px #813df599}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{border:4px solid var(--accent);cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px}.canvas-preview-wrap{border:1px dashed var(--panel-border);background:#07070d73;border-radius:14px;place-items:center;height:170px;padding:8px;display:grid}.canvas-preview{border-radius:6px;outline:1px solid #b086f980;max-width:100%;height:100%;max-height:100%;transition:aspect-ratio .3s;position:relative}.canvas-safe{outline:1px dashed #38dafa99;place-items:center;transition:inset .2s;display:grid;position:absolute}.canvas-object{background:var(--grad);opacity:.85;border-radius:6px;width:100%;height:46%;box-shadow:0 8px 20px -6px #813df5b3}.canvas-label{font-family:var(--font-geist-mono), monospace;color:var(--faint);padding-top:3px;font-size:10px;position:absolute;bottom:-1px;right:-1px;transform:translateY(100%)}.toggle{cursor:pointer;justify-content:space-between;align-items:center;gap:14px;display:flex;position:relative}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle-text{flex-direction:column;gap:3px;display:flex}.toggle-label{font-size:14px}.hint{color:var(--faint);font-size:12px;line-height:1.4}.switch{background:#ffffff1a;border-radius:999px;flex:none;width:40px;height:23px;transition:background .25s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:17px;height:17px;transition:transform .25s cubic-bezier(.3,1.5,.6,1);position:absolute;top:3px;left:3px;box-shadow:0 2px 6px #00000059}.toggle input:checked+.switch{background:var(--grad)}.toggle input:checked+.switch:after{transform:translate(17px)}.toggle input:focus-visible+.switch{box-shadow:0 0 0 3px #9a64f759}.segmented{border:1px solid var(--panel-border);background:#07070d8c;border-radius:12px;flex:1;gap:4px;padding:4px;display:flex}.segmented button{color:var(--muted);border-radius:9px;flex:1;padding:8px 10px;font-size:13px;font-weight:500;transition:all .2s}.segmented button:hover{color:var(--text)}.segmented button.active{color:#fff;background:#9a64f740;box-shadow:inset 0 0 0 1px #9a64f780}.bg-row{align-items:center;gap:10px;display:flex}.color{border:1px solid var(--panel-border);cursor:pointer;background:0 0;border-radius:12px;width:44px;height:42px;padding:4px}.color::-webkit-color-swatch-wrapper{padding:0}.color::-webkit-color-swatch{border:none;border-radius:8px}.note{color:#f6c155;font-size:12px}.seg-tag{letter-spacing:.04em;text-transform:uppercase;color:var(--ok);margin-top:1px;font-size:9.5px;font-weight:600;display:block}.q-presets{grid-template-columns:repeat(3,1fr)}.q-presets .chip strong{font-family:inherit;font-size:12.5px}.input-wrap.small input{padding:10px 40px 10px 12px;font-size:15px}.input-wrap.small input::placeholder{color:var(--faint);font-weight:400}.saving-pill{font-size:12.5px;font-family:var(--font-geist-mono), monospace;color:var(--muted);background:#2fda8a1a;border:1px solid #2fda8a40;border-radius:999px;align-items:center;gap:6px;margin-left:6px;padding:5px 10px;animation:.3s both pop;display:inline-flex}.saving-pill b{color:var(--ok)}.saving-pill em{color:#052e1b;background:var(--ok);border-radius:999px;padding:1px 6px;font-style:normal;font-weight:700}.size b{color:var(--text);font-weight:600}.size em{font-style:normal;font-weight:700}.size em.down{color:var(--ok)}.size em.up{color:#f6c155}.size .encoder{letter-spacing:.03em;color:#bb9af4;margin-top:3px;font-size:10px;display:block}.main{flex-direction:column;gap:18px;min-width:0;animation:.6s .16s both rise;display:flex}.dropzone{border-radius:var(--radius);text-align:center;background:radial-gradient(500px 240px at 50% 0,#813df51f,#0000 70%),#17152859;border:1.5px dashed #b086f94d;flex-direction:column;justify-content:center;align-items:center;gap:18px;min-height:420px;padding:40px;transition:all .25s;display:flex;position:relative;overflow:hidden}.dropzone:hover{background:radial-gradient(500px 240px at 50% 0,#813df533,#0000 70%),#1b192e73;border-color:#b086f9a6}.dropzone:hover .drop-icon{transform:translateY(4px)}.dropzone.compact{text-align:left;flex-direction:row;justify-content:flex-start;min-height:0;padding:18px 22px}.drop-icon{color:#fff;background:var(--grad);border-radius:22px;place-items:center;width:72px;height:72px;font-size:34px;transition:transform .3s;animation:3.2s ease-in-out infinite float;display:grid;box-shadow:0 14px 40px -10px #813df5cc}.dropzone.compact .drop-icon{border-radius:14px;width:44px;height:44px;font-size:22px;animation:none}.drop-icon.big{border-radius:32px;width:110px;height:110px;font-size:54px}.drop-text{flex-direction:column;gap:6px;display:flex}.drop-text strong{font-size:22px;font-weight:600}.dropzone.compact .drop-text strong{font-size:16px}.drop-text span{color:var(--muted);font-size:14px}.drop-overlay{z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;background:#090812bf;place-items:center;animation:.18s both fade;display:grid;position:fixed;inset:0}.drop-overlay-inner{border:2px dashed #b086f9b3;border-radius:28px;flex-direction:column;align-items:center;gap:22px;padding:60px 80px;font-size:22px;font-weight:600;display:flex}.toolbar{z-index:5;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px 12px 20px;display:flex;position:sticky;top:20px;overflow:hidden}.stats{color:var(--muted);align-items:center;gap:10px;font-size:14px;display:flex}.stats b{color:var(--text);font-weight:600}.stats b.ok{color:var(--ok)}.dot{background:var(--faint);border-radius:50%;width:4px;height:4px}.muted{color:var(--faint)}.actions{flex-wrap:wrap;gap:8px;display:flex}.btn{white-space:nowrap;border-radius:12px;padding:10px 18px;font-size:14px;font-weight:600;transition:transform .15s,box-shadow .2s,background .2s}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn:not(:disabled):active{transform:translateY(0)}.btn.ghost{color:var(--muted);border:1px solid var(--panel-border)}.btn.ghost:not(:disabled):hover{color:var(--text);background:#ffffff0d}.btn.primary{color:#fff;background:var(--grad);font-variant-numeric:tabular-nums;background-size:160% 100%;box-shadow:0 10px 28px -12px #813df5e6}.btn.primary:not(:disabled):hover{background-position:100% 0}.btn.success{color:#042515;background:linear-gradient(120deg,#3be394,#23e7cc);box-shadow:0 10px 28px -12px #20df86cc}.progress{background:#ffffff0f;height:3px;position:absolute;bottom:0;left:0;right:0}.progress-bar{background:var(--grad);height:100%;transition:width .25s;box-shadow:0 0 12px #813df5e6}.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;list-style:none;display:grid}.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;transition:transform .2s,border-color .2s,box-shadow .2s;animation:.35s both pop;overflow:hidden}.card:hover{border-color:#b086f947;transform:translateY(-3px);box-shadow:0 18px 40px -22px #610df2b3}.card.is-done{border-color:#2fda8a47}.checker{background-color:#24242e;background-image:linear-gradient(45deg,#30303b 25%,#0000 25%),linear-gradient(-45deg,#30303b 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#30303b 75%),linear-gradient(-45deg,#0000 75%,#30303b 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.thumb{aspect-ratio:1;place-items:center;padding:14px;display:grid;position:relative}.thumb-src{object-fit:contain;max-width:100%;max-height:100%}.thumb-frame{outline-offset:0;outline:1px solid #52e09e8c;place-items:center;max-width:100%;height:100%;max-height:100%;animation:.3s both fade;display:grid}.thumb-frame img{object-fit:contain;width:100%;height:100%;display:block}.badge{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--muted);background:#0b0b14bf;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:600;position:absolute;top:10px;left:10px}.badge.ok{color:#052e1b;background:var(--ok)}.badge.err{color:#fff;background:var(--err)}.remove{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;background:#0b0b14bf;border-radius:50%;width:28px;height:28px;font-size:18px;line-height:1;transition:opacity .2s,background .2s;position:absolute;top:8px;right:8px}.card:hover .remove,.remove:focus-visible{opacity:1}.remove:hover{background:var(--err)}.spinner{border:3px solid #ffffff26;border-top-color:var(--accent-2);border-radius:50%;width:38px;height:38px;animation:.8s linear infinite spin;position:absolute}.card-body{flex-direction:column;gap:6px;padding:12px 14px 14px;display:flex}.name{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;overflow:hidden}.meta{font-family:var(--font-geist-mono), monospace;color:var(--muted);align-items:center;gap:6px;font-size:12px;display:flex}.meta .ok{color:var(--ok)}.arrow{color:var(--faint)}.card-foot{justify-content:space-between;align-items:center;gap:8px;min-height:26px;display:flex}.size{color:var(--faint);font-size:11px}.mini{color:var(--ok);background:#2fda8a1f;border-radius:8px;padding:5px 11px;font-size:12px;font-weight:600;transition:background .2s}.mini:hover{background:#2fda8a3d}.err-text{color:var(--err);font-size:11px}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}