:root{color-scheme:light;--blue:#2d83df;--blue-deep:#1e6fbd;--ink:#1c3450;--muted:#768aa1;--line:#e3ebf4;--bg:#f5f8fd;--surface:#fff;--shadow:0 18px 55px rgba(31,81,132,.055);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(circle at 80% 12%,#e8f4ff 0,transparent 31%),#f8fbff;font-size:14px}a{color:var(--blue-deep)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #087ac7;outline-offset:3px}[hidden]{display:none!important}.wrap{width:min(1440px,100%);padding:0 28px;margin:auto}.skip-link{position:absolute;z-index:30;top:-70px;left:10px;background:#fff;padding:10px;border-radius:8px}.skip-link:focus{top:10px}.site-header{height:72px;background:#ffffffd9;backdrop-filter:blur(15px);border-bottom:1px solid #e4eef8}.head-content{height:100%;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:7px;text-decoration:none;font-size:23px;letter-spacing:-1px;font-weight:810;color:#18314e;white-space:nowrap}.brand-symbol{display:grid;place-items:center;width:34px;height:34px;background:#318be7;color:#fff;font-size:24px;font-weight:860;border-radius:10px;letter-spacing:0;box-shadow:0 5px 12px #318be738}.brand-accent{color:#459aef}.breadcrumb{display:flex;align-items:center;gap:11px;color:#7990a8;font-size:12px}.breadcrumb a{text-decoration:none;color:#687e96}.top-privacy{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650;color:#6083a4}.live-dot,.privacy-dot{width:7px;height:7px;display:inline-block;background:#36b58a;border-radius:50%}.hero{padding-top:56px;padding-bottom:44px}.eyebrow,.section-kicker{color:#3189d8;font-weight:790;font-size:10px;letter-spacing:2.5px}.eyebrow-icon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#e1f1ff;font-size:17px;letter-spacing:0;margin-right:5px}.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:25px}.hero h1{font-size:clamp(37px,5vw,59px);line-height:1.15;letter-spacing:-2.8px;margin:13px 0}.hero h1 span{color:#4c9ce8}.hero p{color:#778ca2;line-height:1.85;font-size:15px;max-width:630px;margin:0}.hero-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.hero-tags span{font-size:11px;white-space:nowrap;color:#5a82aa;background:#e9f4ff;border:1px solid #d9ebfc;border-radius:30px;padding:8px 12px;font-weight:690}.editor{margin-bottom:90px}.editor-top{border-radius:18px 18px 0 0;background:#fff;border:1px solid var(--line);border-bottom:0;display:flex;align-items:center;justify-content:space-between;padding:20px 23px;gap:12px}.editor-heading{display:flex;align-items:center;gap:13px}.tool-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#3188d8;background:#eaf5ff;font-size:29px}.editor-heading h2{font-size:17px;margin:0 0 3px;font-weight:785;letter-spacing:-.4px}.editor-heading p{font-size:11px;color:#92a3b5;margin:0}.editor-actions{display:flex;gap:8px;flex-wrap:wrap}.button,.mini-button{border-radius:10px;font-weight:750;border:1px solid #d9e6f5;padding:11px 16px;min-height:40px;background:#fff;color:#2d659e;transition:background .16s,transform .16s}.button:hover:not(:disabled),.mini-button:hover:not(:disabled){background:#eaf5ff}.button:active:not(:disabled),.mini-button:active:not(:disabled){transform:translateY(1px)}.button.primary{background:#328de6;border-color:#328de6;color:#fff;box-shadow:0 5px 16px #328de627}.button.primary:hover:not(:disabled){background:#1e77d0}.button.secondary{background:#eaf5ff;border-color:#d8edff;color:#287fce}.button.subtle{border-color:transparent;color:#5e819f;background:#f5f9fd}.button.outline{border-color:#cedfed;background:#fff}.mini-button{font-size:11px;padding:7px 10px;min-height:30px;border-radius:8px}.editor-grid{display:grid;grid-template-columns:355px minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:0 0 18px 18px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}.settings{background:#fbfdff;border-right:1px solid #e6eef7;min-width:0;max-height:1100px;overflow:auto;scrollbar-color:#c1dbf4 transparent}.setting-card{border-bottom:1px solid #e7eef7;padding:22px 22px 24px}.setting-card:last-child{border:0}.section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:17px}.section-title h3{font-size:12px;margin:0;color:#7b9fc2;letter-spacing:.8px}.section-title h3 span{color:#284d71;letter-spacing:0;margin-left:7px;font-size:14px}.small-tag{font-size:10px;color:#448bc8;background:#edf6ff;padding:5px 7px;border-radius:7px;white-space:nowrap}.field-label{display:block;color:#506a84;font-weight:750;font-size:12px;margin:13px 0 8px}.field{border:1px solid #d7e5f2;border-radius:10px;background:#fff;width:100%;color:#36516d;font-size:12px;padding:11px 12px;min-height:41px}.field-help{font-size:11px;line-height:1.6;margin:8px 0 0;color:#8a9daf}.drop-zone{border:1.5px dashed #c5daed;background:#f3f9ff;padding:25px 15px;border-radius:13px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;transition:background .2s,border-color .2s}.drop-zone.dragover{background:#e2f2ff;border-color:#2184df}.drop-icon{width:43px;height:43px;border-radius:12px;background:#dceeff;color:#2785dc;font-size:26px;line-height:43px;margin-bottom:7px}.drop-zone strong{font-size:12px;color:#325779}.drop-zone p{margin:2px 0 7px;font-size:11px;color:#8da2b7}.drop-zone small{font-size:10px;color:#94a7b9;margin-top:8px}.source-info{display:flex;flex-direction:column;gap:6px;padding:11px 12px;margin-top:12px;border-radius:10px;border:1px solid #d8e9f8;background:#f4faff;overflow-wrap:anywhere}.source-info strong{font-size:11px;color:#31506f}.source-info small{color:#8396a9}.source-status{color:#278a67;font-size:10px;font-weight:750}.range-field{margin-top:18px}.range-field>div{display:flex;justify-content:space-between;align-items:center;gap:10px}.range-field label{color:#506a83;font-size:12px;font-weight:725}.range-field output{color:#3388d4;font-size:11px;font-weight:785}.range-field input[type=range]{display:block;width:100%;margin:12px 0 2px;accent-color:#328de6;cursor:pointer}.check-line{display:flex;align-items:flex-start;gap:10px;margin:17px 0 0;cursor:pointer;color:#526d85;font-size:12px;font-weight:690}.check-line input{accent-color:#328de6;margin-top:1px;width:16px;height:16px}.check-line small{display:block;font-size:10px;color:#9aabbb;margin-top:3px;line-height:1.5;font-weight:400}.palette-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:14px 0}.palette-chip{position:relative;min-width:0;border:1px solid #e2eaf3;border-radius:9px;padding:5px 5px 20px;background:#fff}.palette-chip input[type=color]{display:block;width:100%;height:35px;border:0;cursor:pointer;padding:0;background:0 0}.palette-chip .hex{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:9px;color:#69829a;margin-top:3px}.palette-chip button{position:absolute;right:2px;top:2px;border:1px solid #d7e6f5;background:#fffdfb;color:#728da4;border-radius:5px;width:18px;height:18px;line-height:15px;padding:0;font-size:13px}.palette-chip button:hover{color:#aa364d}.palette-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.palette-actions.tertiary{align-items:center;margin-top:14px}.palette-actions.tertiary label{font-size:11px;color:#8498ae}.palette-actions.tertiary select{padding:6px;border-radius:7px;border:1px solid #d4e5f5;background:#fff;color:#42617f;font-size:11px}.matte{display:flex;align-items:center;gap:10px;color:#748ba0;font-size:11px}.matte input{height:32px;width:45px;padding:0;border:1px solid #ccdfef;border-radius:7px;cursor:pointer}.history-actions{display:flex;gap:8px;margin-bottom:9px}.history-actions>.button{flex:1}.history-actions:last-child{margin-bottom:0}.work-main{min-width:0;padding:24px;background:#fff}.preview-panel{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff}.preview-toolbar{padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px}.preview-toolbar h3{font-size:16px;letter-spacing:-.4px;margin:0 0 4px}.preview-toolbar p{margin:0;font-size:11px;line-height:1.5;color:#8da0b3}.live-dot{margin-left:4px}.preview-tools{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.tool-select-label{font-size:11px;color:#8397ab}.export-controls select,.tool-select-label select{margin-left:6px;border-radius:8px;background:#f8fbff;border:1px solid #d9e5f0;padding:7px 9px;color:#41617e;font-size:11px}.preview-viewport{background:#f3f6fb;min-height:360px;max-height:740px;overflow:auto;display:flex;align-items:center;justify-content:safe center;position:relative;padding:30px}.preview-viewport.checker{background-color:#f4f7fb;background-image:linear-gradient(45deg,#e2eaf4 25%,transparent 25%),linear-gradient(-45deg,#e2eaf4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2eaf4 75%),linear-gradient(-45deg,transparent 75%,#e2eaf4 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}.empty-stage{max-width:380px;text-align:center;padding:15px;align-self:center}.empty-art{display:flex;justify-content:center;gap:13px;align-items:center;height:110px;color:#62b5ee}.empty-art span{font-size:45px;width:58px;height:58px;border-radius:15px;display:grid;place-items:center;background:#dbeeff}.empty-art span:nth-child(2){font-size:28px;background:#c9ddfa;transform:rotate(-9deg)}.empty-art span:nth-child(3){background:#e3dafa;font-size:35px;transform:rotate(10deg)}.empty-stage h3{color:#385b79;font-size:20px;letter-spacing:-.5px;margin:14px 0 9px}.empty-stage p{font-size:12px;line-height:1.8;color:#8296ab;margin:0 auto 18px}.stage-empty-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.comparison{position:relative;flex:none;box-shadow:0 13px 35px #24456a25;line-height:0;isolation:isolate;max-width:100%}.comparison canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.comparison #processed-canvas{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split,50%))}.split-line{position:absolute;inset-block:0;width:2px;background:#fff;box-shadow:0 0 6px #152a457c;left:var(--split,50%);pointer-events:none;z-index:2}.split-line span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid #fff;color:#126eae;background:#edf6ff;font-size:18px;line-height:1;box-shadow:0 3px 12px #123a5859}.compare-controls{padding:16px 25px;display:flex;gap:14px;align-items:center;background:#f9fbfe;border-top:1px solid #e8f0f8}.compare-controls span{font-size:10px;letter-spacing:1px;font-weight:780;color:#8ba0b5}.compare-controls input{width:100%;accent-color:#338ce4;cursor:pointer}.result-foot{padding:14px 20px;border-top:1px solid #e8eff8;display:flex;justify-content:space-between;align-items:center;gap:8px}.result-meta{display:flex;flex-direction:column;gap:5px;color:#8ba0b4;font-size:11px;line-height:1.5}.result-meta #status{color:#3b8cca}.result-meta #status.is-error{color:#bc4255}.processing-actions{display:flex;gap:8px}.export-panel{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:23px 20px;margin-top:16px;border:1px solid #d8e9fa;background:linear-gradient(120deg,#edf6ff,#f9fcff 68%);border-radius:14px}.export-panel>div:first-child{display:flex;gap:12px;align-items:center}.export-icon{height:41px;width:41px;flex:none;display:grid;place-items:center;color:#2581da;background:#dceeff;border-radius:12px;font-size:22px}.export-panel h3{font-size:14px;margin:0 0 4px}.export-panel p{max-width:400px;color:#7994ab;line-height:1.5;font-size:11px;margin:0}.export-controls{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}.export-controls label{display:flex;flex-direction:column;gap:2px;font-size:10px;color:#7897b2;font-weight:750}.export-controls select{margin:0;min-height:38px}.help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:17px}.help-grid article{border:1px solid #e9eff7;border-radius:12px;padding:17px;min-width:0}.help-grid article span{font-size:22px;color:#4c9ade}.help-grid h4{margin:10px 0 6px;font-size:12px;color:#3c6081}.help-grid p{margin:0;font-size:11px;line-height:1.75;color:#8fa1b4}.message{padding:14px;margin-top:12px;border:1px solid #f2b8c1;background:#fff2f3;color:#9b3444;border-radius:9px;overflow-wrap:anywhere}.toast{position:fixed;bottom:20px;right:20px;padding:12px 16px;z-index:100;border-radius:11px;background:#1d3c5c;color:#fff;box-shadow:0 15px 34px #1837534f;max-width:min(420px,calc(100vw - 40px));font-size:12px}.faq{text-align:center;padding-bottom:90px}.faq h2{font-size:32px;letter-spacing:-1.1px;margin:14px 0 26px}.faq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;text-align:left}.faq-grid article{background:#fff;border:1px solid var(--line);border-radius:13px;padding:24px}.faq-grid h3{font-size:14px;margin:0 0 10px}.faq-grid p{font-size:12px;line-height:1.75;color:#8b9fb1;margin:0}.site-footer{background:#fff;border-top:1px solid var(--line)}.footer-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:98px;color:#9babbc;font-size:12px}.footer-row a:last-child{text-decoration:none}.footer-row .brand{font-size:19px}.footer-row .brand-symbol{width:28px;height:28px;font-size:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:1140px){.editor-grid{grid-template-columns:300px minmax(0,1fr)}.setting-card{padding:18px 15px}.work-main{padding:16px}.help-grid{grid-template-columns:1fr}.faq-grid{grid-template-columns:repeat(2,1fr)}.export-panel{align-items:flex-start;flex-direction:column}.preview-viewport{min-height:310px}}@media(max-width:760px){.breadcrumb{display:none}.wrap{padding:0 16px}.hero{padding-top:36px;padding-bottom:30px}.hero-row{flex-direction:column;align-items:flex-start}.hero-tags{justify-content:flex-start}.editor-top{flex-direction:column;align-items:flex-start}.editor-grid{grid-template-columns:1fr}.settings{border-right:0;border-bottom:1px solid var(--line);max-height:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.setting-card{border-right:1px solid #e7eef7}.setting-card:nth-child(2n){border-right:0}.setting-card.compact{grid-column:span 2}.work-main{padding:16px}.preview-viewport{min-height:360px}}@media(max-width:520px){.wrap{padding:0 13px}.site-header{height:64px}.brand{font-size:20px}.brand-symbol{height:30px;width:30px;font-size:20px}.top-privacy{font-size:10px}.hero h1{font-size:41px;letter-spacing:-2px}.hero p{font-size:13px}.hero-tags span{font-size:10px}.editor-top{padding:14px}.editor-actions{width:100%}.editor-actions .button{padding:10px;flex:1;font-size:11px}.editor-heading h2{font-size:15px}.settings{grid-template-columns:1fr}.setting-card,.setting-card:nth-child(2n){border-right:0}.setting-card.compact{grid-column:auto}.setting-card{padding:20px}.work-main{padding:10px}.preview-toolbar{padding:15px;align-items:flex-start;flex-direction:column}.preview-viewport{min-height:290px;padding:12px}.empty-stage{padding:14px 3px}.empty-stage h3{font-size:17px}.empty-art{height:90px}.empty-art span{width:48px;height:48px;font-size:35px}.compare-controls{padding:14px}.result-foot{flex-direction:column;align-items:flex-start}.export-panel{padding:15px}.export-controls{width:100%}.export-controls .button{flex:1}.faq-grid{grid-template-columns:1fr}.faq h2{font-size:25px}.faq-grid article{padding:18px}.footer-row{flex-wrap:wrap;justify-content:center;padding-top:20px;padding-bottom:20px}.footer-row .brand{width:100%;justify-content:center}}@media(prefers-reduced-motion:reduce){*,::after,::before{transition:none!important;scroll-behavior:auto!important;animation:none!important}}#status.is-processing:before{content:'';display:inline-block;width:9px;height:9px;margin-right:6px;border:2px solid #b3d5f5;border-top-color:#197dd5;border-radius:50%;vertical-align:-2px;animation:pk-spin .8s linear infinite}@keyframes pk-spin{to{transform:rotate(360deg)}}.export-panel{flex-wrap:wrap}.export-panel>.field-help{flex-basis:100%;max-width:none;margin:0;color:#5c7792}.export-controls{margin-left:auto}@media(max-width:760px){.export-controls{margin-left:0}}