.tool-page,.tool-directory{padding-bottom:24px}.tool-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:27px;font-size:12px;color:var(--muted)}.tool-breadcrumb a{min-height:32px;display:inline-flex;align-items:center;text-decoration:none}.tool-breadcrumb a:hover{text-decoration:underline}.tool-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:70px;align-items:end;padding:34px 0 38px}.tool-eyebrow{font-size:14px;margin-bottom:15px;color:var(--purple)}.tool-hero h1{font-size:clamp(38px,4.7vw,62px);letter-spacing:-2.4px;max-width:750px}.tool-hero>p{font-size:16px;max-width:420px}.tool-workspace{background:var(--white);border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 18px 40px #3d2f5810}.tool-filebar{min-height:68px;display:flex;justify-content:space-between;align-items:center;padding:14px 24px;border-bottom:1px solid #ddd6e8;gap:20px}.tool-filebar>div{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;min-width:0}.tool-filebar strong{font-size:13px;overflow-wrap:anywhere}.tool-language{display:flex;align-items:center;gap:10px;font-size:11px;flex-shrink:0}.tool-language select{border:1px solid var(--line);background:transparent;padding:8px;border-radius:5px;min-height:36px;color:var(--ink)}.tool-drop{margin:22px 24px 0;padding:22px;border:1px dashed #bfb1d3;border-radius:9px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#f1edf8}.tool-drop.dragging{background:#e3d8f6;outline:3px solid var(--purple);outline-offset:2px}.tool-drop p{font-size:14px;color:var(--ink);font-weight:600;margin-bottom:5px}.tool-drop>div>span{font-size:12px;color:var(--muted)}.tool-drop-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.tool-drop .button{font-size:13px;min-height:44px;padding:10px 19px}.tool-workspace-body{display:grid;grid-template-columns:minmax(0,1fr) 310px;padding:24px;gap:28px}.tool-preview-column{min-width:0}.tool-preview-heading{display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:34px;margin-bottom:13px}.tool-preview-heading h2,.tool-controls h2{font-size:15px;font-weight:650;letter-spacing:-.3px}.tool-preview-heading>span{font-size:11px;color:var(--muted)}.tool-preview{height:410px;display:flex;align-items:center;justify-content:center;border:1px solid #ded7e8;border-radius:8px;overflow:hidden;background-color:#eeeaf2;background-image:linear-gradient(45deg,#e0dae7 25%,transparent 25%),linear-gradient(-45deg,#e0dae7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0dae7 75%),linear-gradient(-45deg,transparent 75%,#e0dae7 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.tool-preview canvas{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto;display:block}.tool-preview canvas[hidden]{display:none}.tool-empty{text-align:center;padding:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:#eeebf4}.tool-empty svg{stroke:#a99abc;stroke-width:1.5;margin-bottom:20px}.tool-empty p{font-size:17px;color:#5b4e6b;margin-bottom:5px}.tool-empty span{font-size:12px;color:var(--muted)}.tool-empty[hidden]{display:none}.tool-note{font-size:11px!important;line-height:1.65!important;color:var(--muted);margin-top:8px;overflow-wrap:anywhere}.tool-controls{border-left:1px solid #e4deec;padding-left:27px;display:flex;flex-direction:column;align-items:stretch;gap:15px;min-width:0}.tool-controls h2{margin:8px 0 1px}.tool-field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--ink);position:relative}.tool-field input:not([type=range]),.tool-field select{width:100%;height:42px;border:1px solid #cdc4d9;border-radius:6px;background:white;padding:9px 11px;color:var(--ink);font:inherit;font-size:14px}.tool-field input[type=color]{padding:5px;cursor:pointer}.tool-field input[type=range]{accent-color:var(--purple);width:calc(100% - 45px);min-height:30px;margin:0}.tool-field output{position:absolute;right:0;bottom:7px;font-size:12px}.tool-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tool-check{display:flex;align-items:center;gap:8px;min-height:28px;font-size:12px;cursor:pointer}.tool-check input{accent-color:var(--purple);width:17px;height:17px}.tool-presets{display:flex;flex-wrap:wrap;gap:7px;border:0;padding:0;margin:0}.tool-presets legend{font-size:11px;color:var(--muted);margin-bottom:7px}.tool-presets button{font:inherit;font-size:11px;border:1px solid var(--line);border-radius:5px;padding:7px 9px;min-height:34px;background:#f2eef8;color:var(--ink);cursor:pointer}.tool-presets button:hover{border-color:var(--purple);background:#e6dcf5}.tool-controls>.button{width:100%;font:inherit;font-size:13px;min-height:45px;border:0;cursor:pointer}.tool-controls button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.tool-text-button{font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:4px;border:0;background:none;padding:8px 0;min-height:36px;color:var(--purple);cursor:pointer}.tool-status{font-size:12px;line-height:1.6;color:#524260;border-left:3px solid #b9a7d5;padding:5px 0 5px 12px;overflow-wrap:anywhere;min-height:32px}.tool-status[data-error=true]{color:#9b252d;border-color:#bf5158}.tool-status[data-busy=true]{border-color:var(--purple);background:#f0eaf8}.tool-workspace[aria-busy=true] .tool-preview{opacity:.6}.tool-page :is(button,input,select):focus-visible{outline:3px solid var(--purple);outline-offset:3px}.tool-page [hidden]{display:none!important}.tool-guide{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;padding:65px 0;border-bottom:1px solid var(--line)}.tool-guide h2{font-size:34px;letter-spacing:-1px}.tool-guide>div>p{font-size:14px;margin-top:18px}.tool-guide ol{list-style:none;counter-reset:steps;margin:0;padding:0}.tool-guide li{counter-increment:steps;position:relative;padding:4px 0 22px 48px;font-size:14px;line-height:1.7;color:var(--muted)}.tool-guide li::before{content:counter(steps);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ded3ee;color:var(--purple);font-size:12px;font-weight:600}.tool-guide li:last-child{padding-bottom:0}.tool-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding:55px 0;border-bottom:1px solid var(--line)}.tool-details h2{font-size:22px;letter-spacing:-.6px;line-height:1.25;margin-bottom:17px}.tool-details p{font-size:14px}.tool-faq{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;padding:60px 0}.tool-faq>h2{font-size:34px;letter-spacing:-1px}.tool-faq details{border-bottom:1px solid var(--line)}.tool-faq summary{cursor:pointer;min-height:60px;padding:17px 24px 17px 0;font-size:15px;font-weight:600;line-height:1.5}.tool-faq details p{padding:0 0 20px;font-size:14px}.tool-related{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;border-radius:12px;background:#ded3ee;padding:38px 42px;margin-bottom:20px}.tool-related h2{font-size:29px;letter-spacing:-1px;margin-bottom:16px}.tool-related p{font-size:14px}.tool-related nav{display:flex;flex-direction:column}.tool-related nav>a{display:flex;justify-content:space-between;align-items:center;min-height:44px;font-size:14px;text-decoration:none;border-bottom:1px solid #c6b5dd;gap:15px}.tool-related nav>a:hover{color:var(--purple)}.tool-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:9px;max-height:240px;overflow:auto;margin-top:16px;padding:2px}.tool-tile{display:flex;flex-direction:column;align-items:center;border:1px solid #d3c9df;border-radius:6px;padding:10px;min-height:70px;text-decoration:none;background:#f0ebf7;font-size:11px;gap:5px;cursor:pointer;color:var(--ink)}.tool-tile:hover{border-color:var(--purple)}.tool-tile strong{font-size:12px}.tool-noscript{padding:20px;background:#faf3d9;border-radius:8px;margin-bottom:20px}.directory-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:90px;align-items:center;padding:42px 0 66px}.directory-intro h1{font-size:clamp(42px,5.1vw,68px);letter-spacing:-2.8px}.directory-intro>div>p:not(.tool-eyebrow){margin:25px 0;max-width:510px;font-size:16px}.directory-art{position:relative;transform:rotate(2deg);background:#faf9fc;border:1px solid var(--line);padding:13px 13px 0;border-radius:11px;box-shadow:0 16px 0 #d8cce9}.directory-art img{width:100%;border-radius:5px}.directory-art figcaption{font-size:10px;color:var(--muted);padding:9px 0 12px;line-height:1.5}.directory-art-label{display:flex;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line);font-size:11px}.directory-art-label span{color:var(--muted)}.directory-tools{padding:36px 0 65px;border-top:1px solid var(--line);scroll-margin-top:22px}.directory-section-title{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}.directory-section-title h2{font-size:30px;letter-spacing:-1px}.directory-section-title p{font-size:12px}.directory-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 45px}.directory-tool{display:grid;grid-template-columns:52px 1fr 24px;gap:20px;border-top:1px solid var(--line);padding:26px 0;text-decoration:none;align-items:start}.directory-tool h3{font-size:21px;margin-bottom:10px}.directory-tool p{font-size:13px;line-height:1.65}.directory-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:9px;background:#dfd3ef;color:var(--purple);font-size:14px;font-weight:650;border:1px solid #cdbde3}.directory-tool:hover h3{color:var(--purple);text-decoration:underline;text-underline-offset:5px}.directory-tool:hover .directory-arrow{transform:translate(2px,-2px)}.directory-arrow{font-size:23px;transition:transform .15s}.directory-format{display:block;margin-top:13px;font-size:10px;color:var(--muted)}.directory-editor{align-items:center}.directory-editor .button{justify-self:end}#applyButton:disabled,#downloadButton:disabled{pointer-events:auto}
@media(max-width:1000px){.tool-hero{gap:30px}.tool-workspace-body{grid-template-columns:minmax(0,1fr) 270px;gap:20px}.tool-controls{padding-left:20px}.tool-guide,.tool-faq,.tool-related{gap:40px}.tool-details{gap:25px}.directory-intro{gap:40px}.directory-grid{gap:0 28px}.directory-tool{grid-template-columns:44px 1fr 20px;gap:13px}.directory-icon{width:42px;height:42px}}
@media(max-width:700px){.tool-breadcrumb{padding-top:18px}.tool-hero{display:block;padding:25px 0}.tool-hero h1{font-size:39px;letter-spacing:-1.8px}.tool-hero>p{margin-top:20px;font-size:15px}.tool-eyebrow{font-size:12px}.tool-filebar{padding:13px 16px;gap:12px;align-items:start}.tool-filebar>div{display:block}.tool-filebar strong,.tool-filebar .tool-note{display:block}.tool-language{display:block}.tool-language>span{display:block;font-size:10px;margin-bottom:5px}.tool-language select{max-width:110px}.tool-drop{margin:16px 16px 0;padding:17px;display:block}.tool-drop-actions{margin-top:15px}.tool-workspace-body{display:flex;flex-direction:column;padding:16px;gap:22px}.tool-preview{height:280px}.tool-preview-heading>span{font-size:10px}.tool-controls{padding:20px 0 0;border-left:0;border-top:1px solid var(--line);gap:16px}.tool-field input:not([type=range]),.tool-field select{min-height:46px;font-size:16px}.tool-controls h2{margin-top:0}.tool-controls>.button{min-height:48px;font-size:14px}.tool-presets button{min-height:42px}.tool-guide,.tool-faq{display:block;padding:38px 0}.tool-guide h2,.tool-faq>h2{font-size:30px}.tool-guide ol{margin-top:25px}.tool-details{grid-template-columns:1fr;padding:35px 0;gap:29px}.tool-details h2{font-size:22px;margin-bottom:12px}.tool-faq>div{margin-top:20px}.tool-related{display:block;padding:27px 24px}.tool-related h2{font-size:27px}.tool-related nav{margin-top:24px}.directory-intro{display:flex;flex-direction:column;align-items:stretch;gap:35px;padding:30px 0 45px}.directory-intro h1{font-size:44px;letter-spacing:-2px}.directory-art{transform:none;margin:0 3px 9px}.directory-section-title{display:block}.directory-section-title h2{font-size:28px}.directory-section-title p{margin-top:12px}.directory-grid{grid-template-columns:1fr}.directory-tool{grid-template-columns:48px 1fr 24px;gap:15px;padding-block:24px}.directory-editor .button{margin-top:24px}.tool-tiles{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}
@media(prefers-reduced-motion:reduce){.directory-arrow{transition:none}.directory-art{transform:none}}
.tool-controls>.button[aria-disabled=true]{opacity:.45;cursor:not-allowed;box-shadow:none}.tool-status:focus-visible{outline:2px solid var(--purple);outline-offset:4px}.tool-tiles{content-visibility:auto}.tool-page{padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
#previewResult{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.tool-tile img{width:100%;height:65px;object-fit:contain;background:#e4deed;border-radius:3px}.tool-controls>.button:focus-visible{outline:3px solid var(--purple);outline-offset:3px}

.tool-crop-settings{border-bottom:1px solid var(--line);padding-bottom:16px}.tool-crop-settings h3{font-size:13px;letter-spacing:0;margin:0 0 10px}.tool-crop-settings .tool-check{min-height:44px}.tool-crop-settings #cropFields{display:grid;gap:12px;margin-top:10px}.tool-crop-settings .tool-field-pair{gap:12px}.tool-crop-settings .tool-note{margin:0}.tool-preview canvas[data-cropping=true]{touch-action:none;cursor:move}.tool-preview canvas:focus-visible{outline:3px solid var(--purple);outline-offset:-3px}#gridFields{display:grid;gap:12px}#gridFields .tool-note{margin:0}

.tool-crop-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:12px}.tool-crop-toolbar>div{display:flex;gap:8px}.tool-crop-toolbar button{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--white);font:inherit;font-size:12px;color:var(--ink);cursor:pointer}.tool-crop-toolbar button[aria-pressed=true]{color:var(--purple);border-color:var(--purple);background:#eee6fa}.tool-crop-toolbar button:disabled{opacity:.45;cursor:default}.tool-crop-toolbar .tool-field{display:flex;flex-direction:row;align-items:center;gap:10px}.tool-crop-toolbar .tool-field select{width:auto;min-height:44px}.tool-preview[data-background=light]{background:#fff}.tool-preview[data-background=dark]{background:#262331}

.tool-mask-upload{border:1px dashed #bfb1d3;border-radius:8px;padding:12px;background:#f3eef9}.tool-mask-upload>#chooseMask{min-height:44px;padding:8px 12px;border:1px solid var(--purple);border-radius:6px;text-decoration:none;font-weight:600;background:var(--white)}.tool-mask-upload #maskOptions{display:grid;gap:12px;margin-top:14px}.tool-mask-file{display:flex;align-items:center;gap:10px;min-width:0}.tool-mask-file canvas{display:block;max-width:100px;max-height:80px;width:auto;height:auto;border:1px solid var(--line);border-radius:5px;background-color:#eeeaf2;background-image:conic-gradient(#d9d1e2 25%,transparent 0 50%,#d9d1e2 0 75%,transparent 0);background-size:16px 16px}.tool-mask-file span{font-size:11px;overflow-wrap:anywhere;min-width:0}.tool-mask-upload p{margin-top:8px}

/* Real workflow captures and downloadable worked examples. */
.tool-operation{margin:0 0 48px;padding:16px;background:var(--white);border:1px solid var(--line);border-radius:12px}.tool-operation img{display:block;width:100%;height:auto;border-radius:6px}.tool-operation figcaption{font-size:13px;color:var(--muted);line-height:1.65;margin-top:12px;max-width:900px}.tool-example{padding:38px 0 48px;border-bottom:1px solid var(--line);margin-bottom:40px}.tool-example h2{font-size:clamp(27px,3vw,36px);max-width:780px;line-height:1.2;letter-spacing:-1px;margin-bottom:20px}.tool-example>p:not(.tool-eyebrow){font-size:16px;max-width:860px;line-height:1.75}.example-table{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--white);margin:24px 0}.example-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6;text-align:left}.example-table caption{text-align:left;padding:16px;color:var(--muted);font-size:13px}.example-table th,.example-table td{padding:16px;border-top:1px solid var(--line);vertical-align:top}.example-table thead{background:#e4dbef}.example-table tbody th{font-weight:600;width:29%}.example-table td{color:var(--muted)}.example-downloads{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:22px}.example-downloads a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--purple);text-underline-offset:4px}.tool-example .example-verification{padding-left:18px;border-left:3px solid var(--purple)}.tool-example .example-updated{font-size:13px;margin-top:18px}.tool-guide>div p{max-width:320px}.tool-guide h2,.tool-faq>h2{font-size:clamp(27px,3vw,37px);line-height:1.15;letter-spacing:-1.2px}.tool-faq{gap:35px}@media(max-width:700px){.tool-operation{padding:8px;margin-bottom:30px}.tool-operation figcaption{padding:4px;font-size:13px}.tool-example{padding:20px 0 32px;margin-bottom:26px}.example-table th,.example-table td{padding:12px;font-size:14px}.example-table tbody th{width:33%}.tool-faq>div{margin-top:24px}}