diff --git a/web/audit/cdp-audit.txt b/web/audit/cdp-audit.txt new file mode 100644 index 0000000..97e772d --- /dev/null +++ b/web/audit/cdp-audit.txt @@ -0,0 +1,8416 @@ +CDP visual audit +2026-08-30T00:17:44.119Z +viewport 1440x900, tolerance 1px, theme light + +=== /preview/demo (vs demo.html) — 216 differences === + +body + h: 1578.9 → 2338.9 (+760px) + height: 1578.89px → 2338.89px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main [preview-root] + h: 1578.9 → 2338.9 (+760px) + height: 1578.89px → 2338.89px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header [topbar] + position: static → sticky + top: auto → 0px + z-index: auto → 20 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a [brand] + w: 231.5 → 246.8 (+15.3px) + width: 231.469px → 246.812px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) + +body > main > header > a > span:nth-of-type(2) "easy-png-tools" + w: 107.8 → 117.6 (+9.8px) + width: 107.766px → 117.609px + height: 17px → 18px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE" + x: 215.4 → 225.2 (+9.8px) + w: 73.7 → 79.2 (+5.5px) + width: 73.7031px → 79.2031px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + +body > main > header > div [top-actions] + x: 1117.1 → 1104.6 (-12.5px) + w: 265.3 → 277.8 (+12.5px) + width: 265.328px → 277.812px + height: 29px → 28px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > div > span [status] "AUTO PIPELINE" + x: 1117.1 → 1104.6 (-12.5px) + w: 94.9 → 103.4 (+8.5px) + width: 94.875px → 103.406px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > header > div > span > i [status-dot] + x: 1117.1 → 1104.6 (-12.5px) + w: 6 → 8 (+2px) + h: 6 → 8 (+2px) + width: 6px → 8px + height: 6px → 8px + box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + x: 1228 → 1224 (-4px) + display: grid → flex + justify-content: normal → center + grid-template-columns: 17px → none + grid-template-rows: 17px → none + width: 29px → 28px + height: 29px → 28px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + x: 1234 → 1230 (-4px) + width: 17px → 16px + height: 17px → 16px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + x: 1273 → 1268 (-5px) + display: grid → flex + justify-content: normal → center + grid-template-columns: 17px → none + grid-template-rows: 17px → none + width: 29px → 28px + height: 29px → 28px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + x: 1279 → 1274 (-5px) + width: 17px → 16px + height: 17px → 16px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > header > div > div [lang] + x: 1318 → 1312 (-6px) + w: 64.5 → 70.4 (+5.9px) + align-items: center → normal + width: 64.4531px → 70.4062px + height: 26px → 27px + overflow: visible → hidden + border-radius: 0px → 4px + +body > main > header > div > div > span [lang-div] "/" + x: 1348 → 1344.2 (-3.8px) + y: 19.5 → 25 (+5.5px) + w: 4.5 → 6 (+1.5px) + h: 24 → 13 (-11px) + align-self: auto → center + width: 4.45312px → 6px + height: 24px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: rgb(23, 33, 43) → rgb(109, 120, 131) + font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace + font-size: 16px → 10px + line-height: 24px → normal + +body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" + x: 1352.4 → 1350.2 (-2.2px) + w: 29 → 31.2 (+2.2px) + width: 29px → 31.2031px + height: 24px → 25px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + +body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" + x: 1319 → 1313 (-6px) + w: 29 → 31.2 (+2.2px) + width: 29px → 31.2031px + height: 24px → 25px + letter-spacing: normal → 0.6px + +body > main > header > nav [nav] + x: 792.1 → 528.2 (-263.9px) + y: 25.5 → 24 (-1.5px) + w: 296.9 → 376.6 (+79.7px) + h: 12 → 15 (+3px) + row-gap: 22px → 18px + column-gap: 22px → 18px + margin-right: 28px → 0px + margin-left: 503.078px → 24px + width: 296.938px → 376.594px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > nav > a:nth-of-type(1) "Workspace" + x: 792.1 → 528.2 (-263.9px) + y: 25.5 → 24 (-1.5px) + w: 49.5 → 69.1 (+19.6px) + h: 12 → 15 (+3px) + width: 49.4844px → 69.125px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(2) "Catalog" + x: 863.6 → 615.3 (-248.3px) + y: 25.5 → 24 (-1.5px) + w: 38.5 → 53.8 (+15.3px) + h: 12 → 15 (+3px) + width: 38.5px → 53.7656px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(3) "Gradient" + x: 924.1 → 687.1 (-237px) + y: 25.5 → 24 (-1.5px) + w: 44 → 61.5 (+17.5px) + h: 12 → 15 (+3px) + width: 43.9844px → 61.4531px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(4) "Background remover" + x: 990.1 → 766.5 (-223.6px) + y: 25.5 → 24 (-1.5px) + w: 99 → 138.3 (+39.3px) + h: 12 → 15 (+3px) + width: 98.9688px → 138.25px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > div [ws] + h: 1468.9 → 2228.9 (+760px) + grid-template-rows: 1336.89px → 2096.89px + height: 1468.89px → 2228.89px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(2) [preview-panel] + h: 1336.9 → 2096.9 (+760px) + align-self: start → auto + height: 1336.89px → 2096.89px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) [preview-stack] + y: 320 → 301.3 (-18.7px) + h: 1093.4 → 1872.1 (+778.7px) + grid-template-columns: 276.328px 276.344px → 564.672px + grid-template-rows: 345.797px 345.797px 345.797px → 358.422px 358.422px 358.422px 358.422px 358.422px + height: 1093.39px → 1872.11px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [preview-tile] + y: 336 → 317.3 (-18.7px) + w: 276.3 → 564.7 (+288.4px) + h: 345.8 → 358.4 (+12.6px) + display: block → flex + flex-direction: row → column + row-gap: normal → 4.8px + column-gap: normal → 4.8px + padding-top: 0px → 6.4px + padding-right: 0px → 6.4px + padding-bottom: 0px → 6.4px + padding-left: 0px → 6.4px + width: 276.328px → 564.672px + height: 345.797px → 358.422px + min-width: 0px → auto + overflow: hidden → visible + border-radius: 0px → 4px + background-color: rgb(238, 241, 244) → rgb(248, 250, 251) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [tile-canvas] + x: 799.7 → 806.1 (+6.4px) + y: 337 → 324.7 (-12.3px) + w: 274.3 → 549.9 (+275.6px) + h: 316.8 → 325.8 (+9px) + display: grid → block + align-items: center → normal + grid-template-columns: 242.328px → none + grid-template-rows: 284.797px → none + padding-top: 16px → 0px + padding-right: 16px → 0px + padding-bottom: 16px → 0px + padding-left: 16px → 0px + width: 274.328px → 549.891px + height: 316.797px → 325.844px + min-width: 0px → auto + min-height: 316.8px → 120px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + border-radius: 0px → 4px + background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0) + background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none + background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto + background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0% + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div [ph] + x: 840 → 806.1 (-33.9px) + y: 430.8 → 324.7 (-106.1px) + w: 193.9 → 439.9 (+246px) + h: 129.2 → 325.8 (+196.6px) + width: 193.859px → 439.906px + height: 129.234px → 325.844px + min-height: auto → 0px + max-width: 100% → none + overflow: hidden → visible + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG" + x: 923.5 → 1012 (+88.5px) + y: 477.9 → 469.1 (-8.8px) + w: 26.9 → 28.2 (+1.3px) + width: 26.8594px → 28.2031px + height: 18px → 19px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools" + x: 898.4 → 984.1 (+85.7px) + y: 500.9 → 493.1 (-7.8px) + w: 77 → 84 (+7px) + width: 76.9844px → 84px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [tile-label] + x: 799.7 → 806.1 (+6.4px) + y: 653.8 → 655.3 (+1.5px) + w: 274.3 → 549.9 (+275.6px) + h: 27 → 13 (-14px) + align-items: normal → baseline + padding-top: 8px → 0px + padding-right: 8px → 0px + padding-bottom: 8px → 0px + padding-left: 8px → 0px + width: 274.328px → 549.891px + height: 27px → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 9px → 16px + line-height: normal → 24px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span "SOURCE" + x: 807.7 → 806.1 (-1.6px) + y: 662.8 → 655.3 (-7.5px) + w: 29.7 → 40.8 (+11.1px) + h: 10 → 13 (+3px) + width: 29.7031px → 40.8125px + height: 10px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-size: 9px → 10px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > b "original.png · 1200 × 800" + x: 942.3 → 1206 (+263.7px) + y: 662.8 → 655.3 (-7.5px) + w: 123.7 → 150 (+26.3px) + h: 10 → 13 (+3px) + width: 123.719px → 150px + height: 10px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 9px → 10px + text-align: right → start + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [preview-tile] + x: 1087 → 798.7 (-288.3px) + y: 336 → 687.7 (+351.7px) + w: 276.3 → 564.7 (+288.4px) + h: 345.8 → 358.4 (+12.6px) + display: block → flex + flex-direction: row → column + row-gap: normal → 4.8px + column-gap: normal → 4.8px + padding-top: 0px → 6.4px + padding-right: 0px → 6.4px + padding-bottom: 0px → 6.4px + padding-left: 0px → 6.4px + width: 276.344px → 564.672px + height: 345.797px → 358.422px + min-width: 0px → auto + overflow: hidden → visible + border-radius: 0px → 4px + background-color: rgb(238, 241, 244) → rgb(248, 250, 251) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [tile-canvas] + x: 1088 → 806.1 (-281.9px) + y: 337 → 695.1 (+358.1px) + w: 274.3 → 549.9 (+275.6px) + h: 316.8 → 325.8 (+9px) + display: grid → block + align-items: center → normal + grid-template-columns: 242.344px → none + grid-template-rows: 284.797px → none + padding-top: 16px → 0px + padding-right: 16px → 0px + padding-bottom: 16px → 0px + padding-left: 16px → 0px + width: 274.344px → 549.891px + height: 316.797px → 325.844px + min-width: 0px → auto + min-height: 316.8px → 120px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + border-radius: 0px → 4px + background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0) + background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none + background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto + background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0% + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [ph] + x: 1128.3 → 806.1 (-322.2px) + y: 430.8 → 695.1 (+264.3px) + w: 193.9 → 439.9 (+246px) + h: 129.3 → 325.8 (+196.5px) + width: 193.875px → 439.906px + height: 129.25px → 325.844px + min-height: auto → 0px + max-width: 100% → none + overflow: hidden → visible + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG" + x: 1211.8 → 1012 (-199.8px) + y: 477.9 → 839.5 (+361.6px) + w: 26.9 → 28.2 (+1.3px) + width: 26.8594px → 28.2031px + height: 18px → 19px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools" + x: 1186.7 → 984.1 (-202.6px) + y: 500.9 → 863.5 (+362.6px) + w: 77 → 84 (+7px) + width: 76.9844px → 84px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [tile-label] + x: 1088 → 806.1 (-281.9px) + y: 653.8 → 1025.7 (+371.9px) + w: 274.3 → 549.9 (+275.6px) + h: 27 → 13 (-14px) + align-items: normal → baseline + padding-top: 8px → 0px + padding-right: 8px → 0px + padding-bottom: 8px → 0px + padding-left: 8px → 0px + width: 274.344px → 549.891px + height: 27px → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 9px → 16px + line-height: normal → 24px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "STEP 01" + x: 1096 → 806.1 (-289.9px) + y: 662.8 → 1025.7 (+362.9px) + w: 34.6 → 47.6 (+13px) + h: 10 → 13 (+3px) + width: 34.6406px → 47.6094px + height: 10px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-size: 9px → 10px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > b "gradient applied" + x: 1275.2 → 1260 (-15.2px) + y: 662.8 → 1025.7 (+362.9px) + w: 79.2 → 96 (+16.8px) + h: 10 → 13 (+3px) + width: 79.1719px → 96px + height: 10px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 9px → 10px + text-align: right → start + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [preview-tile] + y: 693.8 → 1058.1 (+364.3px) + w: 276.3 → 564.7 (+288.4px) + h: 345.8 → 358.4 (+12.6px) + display: block → flex + flex-direction: row → column + row-gap: normal → 4.8px + column-gap: normal → 4.8px + padding-top: 0px → 6.4px + padding-right: 0px → 6.4px + padding-bottom: 0px → 6.4px + padding-left: 0px → 6.4px + width: 276.328px → 564.672px + height: 345.797px → 358.422px + min-width: 0px → auto + overflow: hidden → visible + border-radius: 0px → 4px + background-color: rgb(238, 241, 244) → rgb(248, 250, 251) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) [tile-canvas] + x: 799.7 → 806.1 (+6.4px) + y: 694.8 → 1065.5 (+370.7px) + w: 274.3 → 549.9 (+275.6px) + h: 316.8 → 325.8 (+9px) + display: grid → block + align-items: center → normal + grid-template-columns: 242.328px → none + grid-template-rows: 284.797px → none + padding-top: 16px → 0px + padding-right: 16px → 0px + padding-bottom: 16px → 0px + padding-left: 16px → 0px + width: 274.328px → 549.891px + height: 316.797px → 325.844px + min-width: 0px → auto + min-height: 316.8px → 120px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + border-radius: 0px → 4px + background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0) + background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none + background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto + background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0% + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div [ph] + x: 840 → 806.1 (-33.9px) + y: 788.6 → 1065.5 (+276.9px) + w: 193.9 → 439.9 (+246px) + h: 129.2 → 325.8 (+196.6px) + width: 193.859px → 439.906px + height: 129.234px → 325.844px + min-height: auto → 0px + max-width: 100% → none + overflow: hidden → visible + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG" + x: 923.5 → 1012 (+88.5px) + y: 835.7 → 1209.9 (+374.2px) + w: 26.9 → 28.2 (+1.3px) + width: 26.8594px → 28.2031px + height: 18px → 19px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools" + x: 898.4 → 984.1 (+85.7px) + y: 858.7 → 1233.9 (+375.2px) + w: 77 → 84 (+7px) + width: 76.9844px → 84px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) [tile-label] + x: 799.7 → 806.1 (+6.4px) + y: 1011.6 → 1396.2 (+384.6px) + w: 274.3 → 549.9 (+275.6px) + h: 27 → 13 (-14px) + align-items: normal → baseline + padding-top: 8px → 0px + padding-right: 8px → 0px + padding-bottom: 8px → 0px + padding-left: 8px → 0px + width: 274.328px → 549.891px + height: 27px → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 9px → 16px + line-height: normal → 24px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > span "STEP 02" + x: 807.7 → 806.1 (-1.6px) + y: 1020.6 → 1396.2 (+375.6px) + w: 34.6 → 47.6 (+13px) + h: 10 → 13 (+3px) + width: 34.6406px → 47.6094px + height: 10px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-size: 9px → 10px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > b "background removed" + x: 977 → 1248 (+271px) + y: 1020.6 → 1396.2 (+375.6px) + w: 89.1 → 108 (+18.9px) + h: 10 → 13 (+3px) + width: 89.0781px → 108px + height: 10px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 9px → 10px + text-align: right → start + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) [preview-tile] + x: 1087 → 798.7 (-288.3px) + y: 693.8 → 1428.5 (+734.7px) + w: 276.3 → 564.7 (+288.4px) + h: 345.8 → 358.4 (+12.6px) + display: block → flex + flex-direction: row → column + row-gap: normal → 4.8px + column-gap: normal → 4.8px + padding-top: 0px → 6.4px + padding-right: 0px → 6.4px + padding-bottom: 0px → 6.4px + padding-left: 0px → 6.4px + width: 276.344px → 564.672px + height: 345.797px → 358.422px + min-width: 0px → auto + overflow: hidden → visible + border-radius: 0px → 4px + background-color: rgb(238, 241, 244) → rgb(248, 250, 251) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) [tile-canvas] + x: 1088 → 806.1 (-281.9px) + y: 694.8 → 1435.9 (+741.1px) + w: 274.3 → 549.9 (+275.6px) + h: 316.8 → 325.8 (+9px) + display: grid → block + align-items: center → normal + grid-template-columns: 242.344px → none + grid-template-rows: 284.797px → none + padding-top: 16px → 0px + padding-right: 16px → 0px + padding-bottom: 16px → 0px + padding-left: 16px → 0px + width: 274.344px → 549.891px + height: 316.797px → 325.844px + min-width: 0px → auto + min-height: 316.8px → 120px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + border-radius: 0px → 4px + background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0) + background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none + background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto + background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0% + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div [ph] + x: 1128.3 → 806.1 (-322.2px) + y: 788.6 → 1435.9 (+647.3px) + w: 193.9 → 439.9 (+246px) + h: 129.3 → 325.8 (+196.5px) + width: 193.875px → 439.906px + height: 129.25px → 325.844px + min-height: auto → 0px + max-width: 100% → none + overflow: hidden → visible + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG" + x: 1211.8 → 1012 (-199.8px) + y: 835.7 → 1580.4 (+744.7px) + w: 26.9 → 28.2 (+1.3px) + width: 26.8594px → 28.2031px + height: 18px → 19px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools" + x: 1186.7 → 984.1 (-202.6px) + y: 858.7 → 1604.4 (+745.7px) + w: 77 → 84 (+7px) + width: 76.9844px → 84px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) [tile-label] + x: 1088 → 806.1 (-281.9px) + y: 1011.6 → 1766.6 (+755px) + w: 274.3 → 549.9 (+275.6px) + h: 27 → 13 (-14px) + align-items: normal → baseline + padding-top: 8px → 0px + padding-right: 8px → 0px + padding-bottom: 8px → 0px + padding-left: 8px → 0px + width: 274.344px → 549.891px + height: 27px → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 9px → 16px + line-height: normal → 24px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > span "STEP 03" + x: 1096 → 806.1 (-289.9px) + y: 1020.6 → 1766.6 (+746px) + w: 34.6 → 47.6 (+13px) + h: 10 → 13 (+3px) + width: 34.6406px → 47.6094px + height: 10px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-size: 9px → 10px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > b "outline added" + x: 1290.1 → 1278 (-12.1px) + y: 1020.6 → 1766.6 (+746px) + w: 64.3 → 78 (+13.7px) + h: 10 → 13 (+3px) + width: 64.3281px → 78px + height: 10px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 9px → 10px + text-align: right → start + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) [preview-tile] + y: 1051.6 → 1799 (+747.4px) + w: 276.3 → 564.7 (+288.4px) + h: 345.8 → 358.4 (+12.6px) + display: block → flex + flex-direction: row → column + row-gap: normal → 4.8px + column-gap: normal → 4.8px + padding-top: 0px → 6.4px + padding-right: 0px → 6.4px + padding-bottom: 0px → 6.4px + padding-left: 0px → 6.4px + width: 276.328px → 564.672px + height: 345.797px → 358.422px + min-width: 0px → auto + overflow: hidden → visible + border-top-color: rgb(23, 105, 210) → rgb(203, 211, 218) + border-radius: 0px → 4px + background-color: rgb(238, 241, 244) → rgb(248, 250, 251) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) [tile-canvas] + x: 799.7 → 806.1 (+6.4px) + y: 1052.6 → 1806.4 (+753.8px) + w: 274.3 → 549.9 (+275.6px) + h: 316.8 → 325.8 (+9px) + display: grid → block + align-items: center → normal + grid-template-columns: 242.328px → none + grid-template-rows: 284.797px → none + padding-top: 16px → 0px + padding-right: 16px → 0px + padding-bottom: 16px → 0px + padding-left: 16px → 0px + width: 274.328px → 549.891px + height: 316.797px → 325.844px + min-width: 0px → auto + min-height: 316.8px → 120px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + border-radius: 0px → 4px + background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0) + background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none + background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto + background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0% + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div [active ph] + x: 840 → 806.1 (-33.9px) + y: 1146.4 → 1806.4 (+660px) + w: 193.9 → 439.9 (+246px) + h: 129.2 → 325.8 (+196.6px) + width: 193.859px → 439.906px + height: 129.234px → 325.844px + min-height: auto → 0px + max-width: 100% → none + overflow: hidden → visible + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG" + x: 923.5 → 1012 (+88.5px) + y: 1193.5 → 1950.8 (+757.3px) + w: 26.9 → 28.2 (+1.3px) + width: 26.8594px → 28.2031px + height: 18px → 19px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools" + x: 898.4 → 984.1 (+85.7px) + y: 1216.5 → 1974.8 (+758.3px) + w: 77 → 84 (+7px) + width: 76.9844px → 84px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) [tile-label] + x: 799.7 → 806.1 (+6.4px) + y: 1369.4 → 2137 (+767.6px) + w: 274.3 → 549.9 (+275.6px) + h: 27 → 13 (-14px) + align-items: normal → baseline + padding-top: 8px → 0px + padding-right: 8px → 0px + padding-bottom: 8px → 0px + padding-left: 8px → 0px + width: 274.328px → 549.891px + height: 27px → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 9px → 16px + line-height: normal → 24px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > span "FINAL OUTPUT" + x: 807.7 → 806.1 (-1.6px) + y: 1378.4 → 2137 (+758.6px) + w: 59.4 → 81.6 (+22.2px) + h: 10 → 13 (+3px) + width: 59.3906px → 81.6094px + height: 10px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-size: 9px → 10px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > b "ready · PNG-24" + x: 996.8 → 1272 (+275.2px) + y: 1378.4 → 2137 (+758.6px) + w: 69.3 → 84 (+14.7px) + h: 10 → 13 (+3px) + width: 69.2812px → 84px + height: 10px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 9px → 10px + text-align: right → start + +body > main > div > section:nth-of-type(2) > p [preview-note] "Output is generated in-browser. Your fil" + y: 1425.4 → 2185.4 (+760px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) [section-label] + h: 177 → 158.3 (-18.7px) + row-gap: normal → 16px + column-gap: normal → 16px + padding-bottom: 15px → 12px + height: 177px → 158.281px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [section-text] + y: 180 → 182.1 (+2.1px) + w: 86.6 → 92.5 (+5.9px) + h: 87 → 67 (-20px) + display: block → flex + flex-direction: row → column + row-gap: normal → 2px + column-gap: normal → 2px + width: 86.6094px → 92.5156px + height: 87px → 67px + min-width: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "Visual history" + y: 233 → 213.1 (-19.9px) + w: 86.6 → 92.5 (+5.9px) + h: 34 → 36 (+2px) + width: 86.6094px → 92.5156px + height: 34px → 36px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [mono-label] "PIPELINE OUTPUTS" + y: 188 → 182.1 (-5.9px) + w: 53.6 → 92.5 (+38.9px) + h: 36 → 24 (-12px) + display: inline → block + width: auto → 92.5156px + height: auto → 24px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + line-height: normal → 12px + letter-spacing: 1.2px → 1px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [section-actions] + x: 885.3 → 907.2 (+21.9px) + w: 478.1 → 456.2 (-21.9px) + h: 161 → 145.3 (-15.7px) + width: 478.062px → 456.156px + height: 161px → 145.281px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download result" + x: 885.3 → 955.4 (+70.1px) + y: 204 → 231.1 (+27.1px) + w: 478.1 → 191.2 (-286.9px) + h: 42 → 36 (-6px) + justify-content: center → normal + row-gap: 9px → 8px + column-gap: 9px → 8px + margin-top: 18px → 0px + padding-top: 0px → 9px + padding-right: 0px → 14px + padding-bottom: 0px → 9px + padding-left: 0px → 14px + width: 478.062px → 191.203px + height: 42px → 36px + border-top-width: 0px → 1px + border-top-style: none → solid + border-top-color: rgb(255, 255, 255) → rgb(23, 105, 210) + border-radius: 0px → 4px + font-size: 11px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] + x: 1055 → 970.4 (-84.6px) + y: 217 → 241.1 (+24.1px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) + font-size: 11px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-arrow-down-to-line lucide-icon] + x: 1179.7 → 1117.6 (-62.1px) + y: 218 → 242.1 (+24.1px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) + font-size: 11px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [history-toggle] "Hide intermediate" + x: 1218.1 → 907.2 (-310.9px) + y: 143 → 161 (+18px) + w: 145.3 → 456.2 (+310.9px) + h: 33 → 39 (+6px) + margin-top: 0px → 18px + padding-top: 8px → 11px + padding-right: 10px → 14px + padding-bottom: 8px → 11px + padding-left: 10px → 14px + width: 145.281px → 456.156px + height: 33px → 39px + background-position: 0px 0px → 0% 0% + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-chevron-down lucide-icon] + x: 1337.4 → 1186.2 (-151.2px) + y: 152 → 173 (+21px) + transform: matrix(-1, 0, 0, -1, 0, 0) → none + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [meta-list] + x: 1072.5 → 1156.6 (+84.1px) + y: 256 → 210 (-46px) + w: 251.9 → 164.8 (-87.1px) + h: 48 → 78.3 (+30.3px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2.4px + column-gap: 8px → 2.4px + grid-template-columns: 78.625px 78.625px 78.625px → none + grid-template-rows: 33px → none + padding-top: 14px → 0px + width: 251.875px → 164.812px + height: 48px → 78.2812px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) [meta-row] + x: 1072.5 → 1156.6 (+84.1px) + y: 271 → 210 (-61px) + w: 78.6 → 164.8 (+86.2px) + h: 33 → 24.5 (-8.5px) + display: grid → flex + justify-content: normal → space-between + align-items: normal → baseline + row-gap: 5px → 16px + column-gap: 5px → 16px + grid-template-columns: 78.625px → none + grid-template-rows: 10px 18px → none + padding-top: 0px → 4px + padding-bottom: 0px → 4px + width: 78.625px → 164.812px + height: 33px → 24.5px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > span [meta-caption] "DIMENSIONS" + x: 1072.5 → 1156.6 (+84.1px) + y: 271 → 216 (-55px) + w: 78.6 → 63 (-15.6px) + h: 10 → 13.5 (+3.5px) + width: 78.625px → 63px + height: 10px → 13.5px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + line-height: normal → 13.5px + letter-spacing: normal → 0.9px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > b [meta-value] "1200 × 800 px" + x: 1072.5 → 1235.6 (+163.1px) + y: 291 → 214 (-77px) + w: 78.6 → 85.8 (+7.2px) + h: 13 → 16.5 (+3.5px) + margin-top: 5px → 0px + width: 78.625px → 85.8125px + height: 13px → 16.5px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-weight: 400 → 700 + line-height: normal → 16.5px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) [meta-row] + x: 1159.1 → 1156.6 (-2.5px) + y: 271 → 236.9 (-34.1px) + w: 78.6 → 164.8 (+86.2px) + h: 33 → 24.5 (-8.5px) + display: grid → flex + justify-content: normal → space-between + align-items: normal → baseline + row-gap: 5px → 16px + column-gap: 5px → 16px + grid-template-columns: 78.625px → none + grid-template-rows: 10px 18px → none + padding-top: 0px → 4px + padding-bottom: 0px → 4px + width: 78.625px → 164.812px + height: 33px → 24.5px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > span [meta-caption] "FORMAT" + x: 1159.1 → 1156.6 (-2.5px) + y: 271 → 242.9 (-28.1px) + w: 78.6 → 37.8 (-40.8px) + h: 10 → 13.5 (+3.5px) + width: 78.625px → 37.8125px + height: 10px → 13.5px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + line-height: normal → 13.5px + letter-spacing: normal → 0.9px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > b [meta-value] "PNG-24" + x: 1159.1 → 1281.8 (+122.7px) + y: 291 → 240.9 (-50.1px) + w: 78.6 → 39.6 (-39px) + h: 13 → 16.5 (+3.5px) + margin-top: 5px → 0px + width: 78.625px → 39.6094px + height: 13px → 16.5px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-weight: 400 → 700 + line-height: normal → 16.5px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) [meta-row] + x: 1245.8 → 1156.6 (-89.2px) + y: 271 → 263.8 (-7.2px) + w: 78.6 → 164.8 (+86.2px) + h: 33 → 24.5 (-8.5px) + display: grid → flex + justify-content: normal → space-between + align-items: normal → baseline + row-gap: 5px → 16px + column-gap: 5px → 16px + grid-template-columns: 78.625px → none + grid-template-rows: 10px 18px → none + padding-top: 0px → 4px + padding-bottom: 0px → 4px + width: 78.625px → 164.812px + height: 33px → 24.5px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > span [meta-caption] "SIZE" + x: 1245.8 → 1156.6 (-89.2px) + y: 271 → 269.8 (-1.2px) + w: 78.6 → 25.2 (-53.4px) + h: 10 → 13.5 (+3.5px) + width: 78.625px → 25.2031px + height: 10px → 13.5px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + line-height: normal → 13.5px + letter-spacing: normal → 0.9px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > b [meta-value] "1.2 MB" + x: 1245.8 → 1281.8 (+36px) + y: 291 → 267.8 (-23.2px) + w: 78.6 → 39.6 (-39px) + h: 13 → 16.5 (+3.5px) + margin-top: 5px → 0px + width: 78.625px → 39.6094px + height: 13px → 16.5px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-weight: 400 → 700 + line-height: normal → 16.5px + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) [icon-btn icon-btn--ghost] + x: 1334.4 → 1331.4 (-3px) + y: 265.5 → 233.1 (-32.4px) + w: 29 → 32 (+3px) + h: 29 → 32 (+3px) + display: grid → flex + justify-content: normal → center + grid-template-columns: 17px → none + grid-template-rows: 17px → none + padding-top: 6px → 1px + padding-bottom: 6px → 1px + width: 29px → 32px + height: 29px → 32px + border-top-width: 0px → 1px + border-top-style: none → solid + border-top-color: rgb(109, 120, 131) → rgb(203, 211, 218) + border-radius: 0px → 4px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) > svg [lucide lucide-icon lucide-settings-2] + y: 271.5 → 241.1 (-30.4px) + width: 17px → 16px + height: 17px → 16px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) [ws-settings] + h: 993.4 → 893 (-100.4px) + height: 993.375px → 893.031px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE" + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: rgb(23, 105, 210) → rgb(109, 120, 131) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/" + x: 165.1 → 172.6 (+7.5px) + w: 13.4 → 7.2 (-6.2px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + color: rgb(109, 120, 131) → rgb(23, 105, 210) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) [title-row] + h: 182.4 → 170.8 (-11.6px) + height: 182.375px → 170.844px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) + w: 482.3 → 473.5 (-8.8px) + h: 182.4 → 170.8 (-11.6px) + width: 482.344px → 473.516px + height: 182.375px → 170.844px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." + w: 482.3 → 473.5 (-8.8px) + h: 115.2 → 103.7 (-11.5px) + width: 482.344px → 473.516px + height: 115.188px → 103.656px + max-width: 700px → none + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + line-height: 57.6px → 51.84px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > p [lede] "Chain simple tools together. Every chang" + y: 285.2 → 274.7 (-10.5px) + w: 482.3 → 473.5 (-8.8px) + width: 482.344px → 473.516px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [file-chip] + x: 569.9 → 561.1 (-8.8px) + y: 299.4 → 288.8 (-10.6px) + w: 153.8 → 162.6 (+8.8px) + width: 153.781px → 162.609px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > svg [lucide lucide-icon lucide-upload] + x: 582.9 → 574.1 (-8.8px) + y: 310.4 → 299.8 (-10.6px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span "source.png" + x: 605.9 → 597.1 (-8.8px) + y: 311.4 → 300.3 (-11.1px) + w: 60.5 → 66 (+5.5px) + width: 60.4844px → 66px + height: 13px → 14px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > b "1.8 MB" + x: 674.4 → 671.1 (-3.3px) + y: 311.4 → 300.3 (-11.1px) + w: 36.3 → 39.6 (+3.3px) + width: 36.2969px → 39.6094px + height: 13px → 14px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) [steps-list] + y: 451.4 → 431.8 (-19.6px) + h: 630 → 550.2 (-79.8px) + grid-template-rows: 152px 138px 152px 144px → 149px 89px 141.188px 127px + height: 630px → 550.188px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) [step-card] + y: 465.4 → 445.8 (-19.6px) + h: 152 → 149 (-3px) + grid-template-columns: 46px 20px 598.125px → 46px 618.125px + grid-template-rows: 150px → 45px 102px + height: 152px → 149px + min-height: 138px → auto + overflow: visible → hidden + border-radius: 0px → 4px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1) [step-index] "01" + y: 466.4 → 446.8 (-19.6px) + h: 150 → 45 (-105px) + padding-bottom: 0px → 6px + height: 150px → 45px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-size: 11px → 22px + font-weight: 400 → 600 + line-height: normal → 22px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg [drag lucide lucide-grip-vertical lucide-icon] + x: 104.6 → 58.6 (-46px) + y: 483.4 → 491.8 (+8.4px) + margin-top: 17px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(203, 211, 218) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) [step-body] + x: 124.6 → 104.6 (-20px) + y: 466.4 → 446.8 (-19.6px) + w: 598.1 → 618.1 (+20px) + h: 150 → 147 (-3px) + display: block → flex + flex-direction: row → column + padding-top: 15px → 0px + padding-right: 18px → 0px + padding-bottom: 18px → 0px + padding-left: 18px → 0px + width: 598.125px → 618.125px + height: 150px → 147px + min-width: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] + x: 142.6 → 104.6 (-38px) + y: 481.4 → 446.8 (-34.6px) + w: 562.1 → 618.1 (+56px) + h: 65 → 72 (+7px) + align-items: center → flex-start + row-gap: 15px → 8px + column-gap: 15px → 8px + padding-top: 0px → 8px + padding-right: 0px → 12px + padding-bottom: 0px → 8px + padding-left: 0px → 12px + width: 562.125px → 618.125px + height: 65px → 72px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] + x: 142.6 → 116.6 (-26px) + y: 481.4 → 454.8 (-26.6px) + w: 156.7 → 171 (+14.3px) + h: 65 → 55 (-10px) + display: block → flex + flex-direction: row → column + width: 156.703px → 171px + height: 65px → 55px + min-width: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "BACKGROUND" + x: 142.6 → 116.6 (-26px) + y: 489.4 → 454.8 (-34.6px) + w: 67 → 171 (+104px) + display: inline → block + width: auto → 171px + height: auto → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Gradient background" + x: 142.6 → 116.6 (-26px) + y: 510.4 → 472.8 (-37.6px) + w: 156.7 → 171 (+14.3px) + width: 156.703px → 171px + height: 18px → 19px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] + x: 607.7 → 589.3 (-18.4px) + y: 505.4 → 454.8 (-50.6px) + w: 97 → 121.4 (+24.4px) + h: 17 → 21.8 (+4.8px) + row-gap: 13px → 8px + column-gap: 13px → 8px + width: 97px → 121.375px + height: 17px → 21.7812px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove] + y: 505.9 → 456.7 (-49.2px) + w: 16 → 28 (+12px) + h: 16 → 18 (+2px) + display: block → flex + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 16px → 28px + height: 16px → 18px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + x: 658.7 → 663.7 (+5px) + y: 505.9 → 457.7 (-48.2px) + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon] + x: 687.7 → 693.7 (+6px) + y: 505.4 → 457.2 (-48.2px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" + x: 607.7 → 589.3 (-18.4px) + y: 507.9 → 454.8 (-53.1px) + w: 38 → 60.4 (+22.4px) + h: 12 → 21.8 (+9.8px) + row-gap: 4px → 4.8px + column-gap: 4px → 4.8px + padding-top: 0px → 2.4px + padding-right: 0px → 7.2px + padding-bottom: 0px → 2.4px + padding-left: 0px → 7.2px + width: 38px → 60.375px + height: 12px → 21.7812px + border-top-width: 0px → 1px + border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216) + border-radius: 0px → 4px + color: rgb(35, 131, 84) → rgb(37, 169, 106) + line-height: normal → 15px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] + x: 607.7 → 597.5 (-10.2px) + y: 507.9 → 459.7 (-48.2px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106) + color: rgb(35, 131, 84) → rgb(37, 169, 106) + line-height: normal → 15px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [controls] + x: 142.6 → 104.6 (-38px) + y: 546.4 → 518.8 (-27.6px) + w: 562.1 → 618.1 (+56px) + h: 52 → 75 (+23px) + row-gap: 16px → 0px + column-gap: 16px → 24px + grid-template-columns: 189px 155.047px 186.078px → 190.031px 190.047px 190.047px + grid-template-rows: 52px → 75px + width: 562.125px → 618.125px + height: 52px → 75px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] + x: 142.6 → 104.6 (-38px) + y: 546.4 → 518.8 (-27.6px) + h: 52 → 75 (+23px) + display: block → flex + flex-direction: row → column + row-gap: normal → 8px + column-gap: normal → 8px + padding-top: 0px → 10px + width: 189px → 190.031px + height: 52px → 75px + min-width: auto → 0px + border-top-width: 0px → 1px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "COLOR" + x: 142.6 → 104.6 (-38px) + y: 546.4 → 529.8 (-16.6px) + align-items: normal → baseline + row-gap: normal → 8px + column-gap: normal → 8px + width: 189px → 190.031px + height: 12px → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: 0.8px → 0.5px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [color-field] + x: 142.6 → 104.6 (-38px) + y: 566.4 → 558.8 (-7.6px) + h: 32 → 27.2 (-4.8px) + row-gap: 8px → 6.4px + column-gap: 8px → 6.4px + padding-right: 8px → 0px + padding-left: 8px → 0px + width: 189px → 190.031px + height: 32px → 27.1875px + min-width: 0px → auto + min-height: 0px → auto + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span [swatch] + x: 151.6 → 104.6 (-47px) + y: 575.4 → 559.6 (-15.8px) + w: 14 → 25.6 (+11.6px) + h: 14 → 25.6 (+11.6px) + width: 14px → 25.5938px + height: 14px → 25.5938px + border-radius: 0px → 4px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > input + x: 173.6 → 136.6 (-37px) + y: 575.9 → 558.8 (-17.1px) + w: 127 → 137.7 (+10.7px) + h: 13 → 27.2 (+14.2px) + padding-top: 0px → 5.6px + padding-right: 0px → 8px + padding-bottom: 0px → 5.6px + padding-left: 0px → 8px + width: 127px → 137.656px + height: 13px → 27.1875px + border-top-width: 0px → 1px + border-top-style: none → solid + border-top-color: rgb(23, 33, 43) → rgb(203, 211, 218) + border-radius: 0px → 4px + background-color: rgba(0, 0, 0, 0) → rgb(238, 241, 244) + background-position: 0px 0px → 0% 0% + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > svg [lucide lucide-chevron-down lucide-icon] + x: 308.6 → 280.6 (-28px) + y: 575.4 → 565.4 (-10px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: rgb(23, 33, 43) → rgb(109, 120, 131) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] + x: 347.6 → 318.6 (-29px) + y: 546.4 → 518.8 (-27.6px) + w: 155 → 190 (+35px) + h: 52 → 75 (+23px) + display: block → flex + flex-direction: row → column + row-gap: normal → 0px + column-gap: normal → 0px + padding-top: 0px → 10px + width: 155.047px → 190.047px + height: 52px → 75px + min-width: auto → 0px + border-top-width: 0px → 1px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "DIRECTION" + x: 347.6 → 318.6 (-29px) + y: 546.4 → 529.8 (-16.6px) + w: 155 → 190 (+35px) + h: 12 → 14 (+2px) + align-items: normal → center + row-gap: normal → 8px + column-gap: normal → 8px + width: 155.047px → 190.047px + height: 12px → 14px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: 0.8px → 0.5px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label > output "135 °" + x: 471.1 → 473.2 (+2.1px) + y: 546.4 → 529.8 (-16.6px) + w: 31.5 → 35.5 (+4px) + h: 12 → 14 (+2px) + width: 31.5156px → 35.5px + height: 12px → 14px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 10px → 11px + letter-spacing: 0.8px → 0.5px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > input + x: 347.6 → 320.6 (-27px) + y: 567.4 → 553.8 (-13.6px) + w: 155 → 190 (+35px) + display: inline-block → block + margin-top: 0px → 2px + margin-right: 0px → 2px + margin-bottom: 0px → 2px + margin-left: 0px → 2px + width: 155.047px → 190.047px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) + background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) + color: rgb(23, 33, 43) → rgb(16, 16, 16) + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [control-block] + x: 518.6 → 532.7 (+14.1px) + y: 546.4 → 518.8 (-27.6px) + w: 186.1 → 190 (+3.9px) + h: 52 → 75 (+23px) + display: block → flex + flex-direction: row → column + row-gap: normal → 8px + column-gap: normal → 8px + padding-top: 0px → 10px + width: 186.078px → 190.047px + height: 52px → 75px + min-width: auto → 0px + border-top-width: 0px → 1px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label "OPACITY" + x: 518.6 → 532.7 (+14.1px) + y: 546.4 → 529.8 (-16.6px) + w: 186.1 → 190 (+3.9px) + h: 12 → 24 (+12px) + display: flex → block + justify-content: space-between → normal + margin-bottom: 8px → 0px + width: 186.078px → 190.047px + height: 12px → 24px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 0.8px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label > output "100%" + x: 679.5 → 601.7 (-77.8px) + y: 546.4 → 531.8 (-14.6px) + w: 25.2 → 43.6 (+18.4px) + h: 12 → 20 (+8px) + display: block → inline + width: 25.2031px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 0.8px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div [segmented] + x: 518.6 → 532.7 (+14.1px) + y: 566.4 → 561.8 (-4.6px) + w: 186.1 → 190 (+3.9px) + width: 186.078px → 190.047px + min-width: 0px → auto + min-height: 0px → auto + overflow: visible → hidden + border-radius: 0px → 4px + background-color: rgba(0, 0, 0, 0) → rgb(238, 241, 244) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(2) [segment selected] "100" + x: 565.7 → 533.7 (-32px) + y: 567.4 → 562.8 (-4.6px) + w: 46 → 42.2 (-3.8px) + display: block → flex + align-items: normal → center + padding-right: 0px → 11.2px + padding-left: 0px → 11.2px + width: 46.0312px → 42.1875px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(3) [segment] "75" + x: 611.7 → 575.9 (-35.8px) + y: 567.4 → 562.8 (-4.6px) + w: 46 → 36.6 (-9.4px) + display: block → flex + align-items: normal → center + padding-right: 0px → 11.2px + padding-left: 0px → 11.2px + width: 46.0156px → 36.5781px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(4) [segment] "50" + x: 657.7 → 612.4 (-45.3px) + y: 567.4 → 562.8 (-4.6px) + w: 46 → 36.6 (-9.4px) + display: block → flex + align-items: normal → center + padding-right: 0px → 11.2px + padding-left: 0px → 11.2px + width: 46.0156px → 36.5781px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(1) [segment] "25" + x: 519.6 → 649 (+129.4px) + y: 567.4 → 562.8 (-4.6px) + w: 46 → 36.6 (-9.4px) + display: block → flex + align-items: normal → center + padding-right: 0px → 11.2px + padding-left: 0px → 11.2px + width: 46.0156px → 36.5781px + border-top-color: rgb(255, 255, 255) → rgb(109, 120, 131) + background-color: rgb(23, 105, 210) → rgba(0, 0, 0, 0) + color: rgb(255, 255, 255) → rgb(109, 120, 131) + letter-spacing: normal → 0.6px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) [step-card] + y: 627.4 → 604.8 (-22.6px) + h: 138 → 89 (-49px) + grid-template-columns: 46px 20px 598.125px → 46px 618.125px + grid-template-rows: 136px → 45px 42px + height: 138px → 89px + min-height: 138px → auto + overflow: visible → hidden + border-radius: 0px → 4px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(1) [step-index] "02" + y: 628.4 → 605.8 (-22.6px) + h: 136 → 45 (-91px) + padding-bottom: 0px → 6px + height: 136px → 45px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-size: 11px → 22px + font-weight: 400 → 600 + line-height: normal → 22px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > svg [drag lucide lucide-grip-vertical lucide-icon] + x: 104.6 → 58.6 (-46px) + y: 645.4 → 650.8 (+5.4px) + margin-top: 17px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(203, 211, 218) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) [step-body] + x: 124.6 → 104.6 (-20px) + y: 628.4 → 605.8 (-22.6px) + w: 598.1 → 618.1 (+20px) + h: 136 → 87 (-49px) + display: block → flex + flex-direction: row → column + padding-top: 15px → 0px + padding-right: 18px → 0px + padding-bottom: 18px → 0px + padding-left: 18px → 0px + width: 598.125px → 618.125px + height: 136px → 87px + min-width: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] + x: 142.6 → 104.6 (-38px) + y: 643.4 → 605.8 (-37.6px) + w: 562.1 → 618.1 (+56px) + h: 65 → 72 (+7px) + align-items: center → flex-start + row-gap: 15px → 8px + column-gap: 15px → 8px + padding-top: 0px → 8px + padding-right: 0px → 12px + padding-bottom: 0px → 8px + padding-left: 0px → 12px + width: 562.125px → 618.125px + height: 65px → 72px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] + x: 142.6 → 116.6 (-26px) + y: 643.4 → 613.8 (-29.6px) + w: 140.2 → 153 (+12.8px) + h: 65 → 55 (-10px) + display: block → flex + flex-direction: row → column + width: 140.203px → 153px + height: 65px → 55px + min-width: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TRANSFORM" + x: 142.6 → 116.6 (-26px) + y: 651.4 → 613.8 (-37.6px) + w: 60.3 → 153 (+92.7px) + display: inline → block + width: auto → 153px + height: auto → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Remove background" + x: 142.6 → 116.6 (-26px) + y: 672.4 → 631.8 (-40.6px) + w: 140.2 → 153 (+12.8px) + width: 140.203px → 153px + height: 18px → 19px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] + x: 607.7 → 589.3 (-18.4px) + y: 667.4 → 613.8 (-53.6px) + w: 97 → 121.4 (+24.4px) + h: 17 → 21.8 (+4.8px) + row-gap: 13px → 8px + column-gap: 13px → 8px + width: 97px → 121.375px + height: 17px → 21.7812px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove] + y: 667.9 → 615.7 (-52.2px) + w: 16 → 28 (+12px) + h: 16 → 18 (+2px) + display: block → flex + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 16px → 28px + height: 16px → 18px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + x: 658.7 → 663.7 (+5px) + y: 667.9 → 616.7 (-51.2px) + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon] + x: 687.7 → 693.7 (+6px) + y: 667.4 → 616.2 (-51.2px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" + x: 607.7 → 589.3 (-18.4px) + y: 669.9 → 613.8 (-56.1px) + w: 38 → 60.4 (+22.4px) + h: 12 → 21.8 (+9.8px) + row-gap: 4px → 4.8px + column-gap: 4px → 4.8px + padding-top: 0px → 2.4px + padding-right: 0px → 7.2px + padding-bottom: 0px → 2.4px + padding-left: 0px → 7.2px + width: 38px → 60.375px + height: 12px → 21.7812px + border-top-width: 0px → 1px + border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216) + border-radius: 0px → 4px + color: rgb(35, 131, 84) → rgb(37, 169, 106) + line-height: normal → 15px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] + x: 607.7 → 597.5 (-10.2px) + y: 669.9 → 618.7 (-51.2px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106) + color: rgb(35, 131, 84) → rgb(37, 169, 106) + line-height: normal → 15px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [transform-note] "Automatic subject detection enabled" + x: 142.6 → 104.6 (-38px) + y: 708.4 → 677.8 (-30.6px) + w: 562.1 → 618.1 (+56px) + width: 562.125px → 618.125px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > svg [lucide lucide-icon lucide-sliders-horizontal] + x: 142.6 → 104.6 (-38px) + y: 708.4 → 677.8 (-30.6px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) [step-card] + y: 775.4 → 703.8 (-71.6px) + h: 152 → 141.2 (-10.8px) + grid-template-columns: 46px 20px 598.125px → 46px 618.125px + grid-template-rows: 150px → 45px 94.1875px + height: 152px → 141.188px + min-height: 138px → auto + overflow: visible → hidden + border-radius: 0px → 4px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(1) [step-index] "03" + y: 776.4 → 704.8 (-71.6px) + h: 150 → 45 (-105px) + padding-bottom: 0px → 6px + height: 150px → 45px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-size: 11px → 22px + font-weight: 400 → 600 + line-height: normal → 22px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > svg [drag lucide lucide-grip-vertical lucide-icon] + x: 104.6 → 58.6 (-46px) + y: 793.4 → 749.8 (-43.6px) + margin-top: 17px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(203, 211, 218) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) [step-body] + x: 124.6 → 104.6 (-20px) + y: 776.4 → 704.8 (-71.6px) + w: 598.1 → 618.1 (+20px) + h: 150 → 139.2 (-10.8px) + display: block → flex + flex-direction: row → column + padding-top: 15px → 0px + padding-right: 18px → 0px + padding-bottom: 18px → 0px + padding-left: 18px → 0px + width: 598.125px → 618.125px + height: 150px → 139.188px + min-width: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] + x: 142.6 → 104.6 (-38px) + y: 791.4 → 704.8 (-86.6px) + w: 562.1 → 618.1 (+56px) + h: 65 → 72 (+7px) + align-items: center → flex-start + row-gap: 15px → 8px + column-gap: 15px → 8px + padding-top: 0px → 8px + padding-right: 0px → 12px + padding-bottom: 0px → 8px + padding-left: 0px → 12px + width: 562.125px → 618.125px + height: 65px → 72px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] + x: 142.6 → 116.6 (-26px) + y: 791.4 → 712.8 (-78.6px) + w: 90.7 → 99 (+8.3px) + h: 65 → 55 (-10px) + display: block → flex + flex-direction: row → column + width: 90.7188px → 99px + height: 65px → 55px + min-width: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" + x: 142.6 → 116.6 (-26px) + y: 799.4 → 712.8 (-86.6px) + w: 33.5 → 99 (+65.5px) + display: inline → block + width: auto → 99px + height: auto → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Add outline" + x: 142.6 → 116.6 (-26px) + y: 820.4 → 730.8 (-89.6px) + w: 90.7 → 99 (+8.3px) + width: 90.7188px → 99px + height: 18px → 19px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] + x: 607.7 → 589.3 (-18.4px) + y: 815.4 → 712.8 (-102.6px) + w: 97 → 121.4 (+24.4px) + h: 17 → 21.8 (+4.8px) + row-gap: 13px → 8px + column-gap: 13px → 8px + width: 97px → 121.375px + height: 17px → 21.7812px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove] + y: 815.9 → 714.7 (-101.2px) + w: 16 → 28 (+12px) + h: 16 → 18 (+2px) + display: block → flex + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 16px → 28px + height: 16px → 18px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + x: 658.7 → 663.7 (+5px) + y: 815.9 → 715.7 (-100.2px) + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon] + x: 687.7 → 693.7 (+6px) + y: 815.4 → 715.2 (-100.2px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" + x: 607.7 → 589.3 (-18.4px) + y: 817.9 → 712.8 (-105.1px) + w: 38 → 60.4 (+22.4px) + h: 12 → 21.8 (+9.8px) + row-gap: 4px → 4.8px + column-gap: 4px → 4.8px + padding-top: 0px → 2.4px + padding-right: 0px → 7.2px + padding-bottom: 0px → 2.4px + padding-left: 0px → 7.2px + width: 38px → 60.375px + height: 12px → 21.7812px + border-top-width: 0px → 1px + border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216) + border-radius: 0px → 4px + color: rgb(35, 131, 84) → rgb(37, 169, 106) + line-height: normal → 15px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] + x: 607.7 → 597.5 (-10.2px) + y: 817.9 → 717.7 (-100.2px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106) + color: rgb(35, 131, 84) → rgb(37, 169, 106) + line-height: normal → 15px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] + x: 142.6 → 104.6 (-38px) + y: 856.4 → 776.8 (-79.6px) + w: 562.1 → 618.1 (+56px) + h: 52 → 67.2 (+15.2px) + row-gap: 16px → 0px + grid-template-columns: 273.062px 273.062px → 301.062px 301.062px + grid-template-rows: 52px → 67.1875px + width: 562.125px → 618.125px + height: 52px → 67.1875px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] + x: 142.6 → 104.6 (-38px) + y: 856.4 → 776.8 (-79.6px) + w: 273.1 → 301.1 (+28px) + h: 52 → 67.2 (+15.2px) + display: block → flex + flex-direction: row → column + row-gap: normal → 0px + column-gap: normal → 0px + padding-top: 0px → 10px + width: 273.062px → 301.062px + height: 52px → 67.1875px + min-width: auto → 0px + border-top-width: 0px → 1px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "WIDTH" + x: 142.6 → 104.6 (-38px) + y: 856.4 → 787.8 (-68.6px) + w: 273.1 → 301.1 (+28px) + h: 12 → 14 (+2px) + align-items: normal → center + row-gap: normal → 8px + column-gap: normal → 8px + width: 273.062px → 301.062px + height: 12px → 14px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: 0.8px → 0.5px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "2 px" + x: 390.4 → 377.3 (-13.1px) + y: 856.4 → 787.8 (-68.6px) + w: 25.2 → 28.4 (+3.2px) + h: 12 → 14 (+2px) + width: 25.2188px → 28.4062px + height: 12px → 14px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 10px → 11px + letter-spacing: 0.8px → 0.5px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input + x: 142.6 → 106.6 (-36px) + y: 877.4 → 811.8 (-65.6px) + w: 273.1 → 301.1 (+28px) + display: inline-block → block + margin-top: 0px → 2px + margin-right: 0px → 2px + margin-bottom: 0px → 2px + margin-left: 0px → 2px + width: 273.062px → 301.062px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) + background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) + color: rgb(23, 33, 43) → rgb(16, 16, 16) + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] + x: 431.7 → 421.7 (-10px) + y: 856.4 → 776.8 (-79.6px) + w: 273.1 → 301.1 (+28px) + h: 52 → 67.2 (+15.2px) + display: block → flex + flex-direction: row → column + row-gap: normal → 8px + column-gap: normal → 8px + padding-top: 0px → 10px + width: 273.062px → 301.062px + height: 52px → 67.1875px + min-width: auto → 0px + border-top-width: 0px → 1px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "COLOR" + x: 431.7 → 421.7 (-10px) + y: 856.4 → 787.8 (-68.6px) + w: 273.1 → 301.1 (+28px) + align-items: normal → baseline + row-gap: normal → 8px + column-gap: normal → 8px + width: 273.062px → 301.062px + height: 12px → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: 0.8px → 0.5px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [color-field] + x: 431.7 → 421.7 (-10px) + y: 876.4 → 816.8 (-59.6px) + w: 273.1 → 301.1 (+28px) + h: 32 → 27.2 (-4.8px) + row-gap: 8px → 6.4px + column-gap: 8px → 6.4px + padding-right: 8px → 0px + padding-left: 8px → 0px + width: 273.062px → 301.062px + height: 32px → 27.1875px + min-width: 0px → auto + min-height: 0px → auto + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span [dark swatch] + x: 440.7 → 421.7 (-19px) + y: 885.4 → 817.6 (-67.8px) + w: 14 → 25.6 (+11.6px) + h: 14 → 25.6 (+11.6px) + width: 14px → 25.5938px + height: 14px → 25.5938px + border-radius: 0px → 4px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > input + x: 462.7 → 453.6 (-9.1px) + y: 885.9 → 816.8 (-69.1px) + w: 233.1 → 269.1 (+36px) + h: 13 → 27.2 (+14.2px) + padding-top: 0px → 5.6px + padding-right: 0px → 8px + padding-bottom: 0px → 5.6px + padding-left: 0px → 8px + width: 233.062px → 269.078px + height: 13px → 27.1875px + border-top-width: 0px → 1px + border-top-style: none → solid + border-top-color: rgb(23, 33, 43) → rgb(203, 211, 218) + border-radius: 0px → 4px + background-color: rgba(0, 0, 0, 0) → rgb(238, 241, 244) + background-position: 0px 0px → 0% 0% + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) [step-card] + y: 937.4 → 855 (-82.4px) + h: 144 → 127 (-17px) + grid-template-columns: 46px 20px 598.125px → 46px 618.125px + grid-template-rows: 142px → 45px 80px + height: 144px → 127px + min-height: 138px → auto + overflow: visible → hidden + border-radius: 0px → 4px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(1) [step-index] "04" + y: 938.4 → 856 (-82.4px) + h: 142 → 45 (-97px) + padding-bottom: 0px → 6px + height: 142px → 45px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-size: 11px → 22px + font-weight: 400 → 600 + line-height: normal → 22px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > svg [drag lucide lucide-grip-vertical lucide-icon] + x: 104.6 → 58.6 (-46px) + y: 955.4 → 901 (-54.4px) + margin-top: 17px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(203, 211, 218) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) [step-body] + x: 124.6 → 104.6 (-20px) + y: 938.4 → 856 (-82.4px) + w: 598.1 → 618.1 (+20px) + h: 142 → 125 (-17px) + display: block → flex + flex-direction: row → column + padding-top: 15px → 0px + padding-right: 18px → 0px + padding-bottom: 18px → 0px + padding-left: 18px → 0px + width: 598.125px → 618.125px + height: 142px → 125px + min-width: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] + x: 142.6 → 104.6 (-38px) + y: 953.4 → 856 (-97.4px) + w: 562.1 → 618.1 (+56px) + h: 65 → 72 (+7px) + align-items: center → flex-start + row-gap: 15px → 8px + column-gap: 15px → 8px + padding-top: 0px → 8px + padding-right: 0px → 12px + padding-bottom: 0px → 8px + padding-left: 0px → 12px + width: 562.125px → 618.125px + height: 65px → 72px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] + x: 142.6 → 116.6 (-26px) + y: 953.4 → 864 (-89.4px) + w: 107.2 → 117 (+9.8px) + h: 65 → 55 (-10px) + display: block → flex + flex-direction: row → column + width: 107.219px → 117px + height: 65px → 55px + min-width: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" + x: 142.6 → 116.6 (-26px) + y: 961.4 → 864 (-97.4px) + w: 33.5 → 117 (+83.5px) + display: inline → block + width: auto → 117px + height: auto → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Round corners" + x: 142.6 → 116.6 (-26px) + y: 982.4 → 882 (-100.4px) + w: 107.2 → 117 (+9.8px) + width: 107.219px → 117px + height: 18px → 19px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] + x: 607.7 → 589.3 (-18.4px) + y: 977.4 → 864 (-113.4px) + w: 97 → 121.4 (+24.4px) + h: 17 → 21.8 (+4.8px) + row-gap: 13px → 8px + column-gap: 13px → 8px + width: 97px → 121.375px + height: 17px → 21.7812px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove] + y: 977.9 → 865.9 (-112px) + w: 16 → 28 (+12px) + h: 16 → 18 (+2px) + display: block → flex + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 16px → 28px + height: 16px → 18px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + x: 658.7 → 663.7 (+5px) + y: 977.9 → 866.9 (-111px) + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon] + x: 687.7 → 693.7 (+6px) + y: 977.4 → 866.4 (-111px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" + x: 607.7 → 589.3 (-18.4px) + y: 979.9 → 864 (-115.9px) + w: 38 → 60.4 (+22.4px) + h: 12 → 21.8 (+9.8px) + row-gap: 4px → 4.8px + column-gap: 4px → 4.8px + padding-top: 0px → 2.4px + padding-right: 0px → 7.2px + padding-bottom: 0px → 2.4px + padding-left: 0px → 7.2px + width: 38px → 60.375px + height: 12px → 21.7812px + border-top-width: 0px → 1px + border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216) + border-radius: 0px → 4px + color: rgb(35, 131, 84) → rgb(37, 169, 106) + line-height: normal → 15px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] + x: 607.7 → 597.5 (-10.2px) + y: 979.9 → 868.9 (-111px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106) + color: rgb(35, 131, 84) → rgb(37, 169, 106) + line-height: normal → 15px + letter-spacing: normal → 0.8px + text-transform: none → uppercase + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] + x: 142.6 → 104.6 (-38px) + y: 1018.4 → 928 (-90.4px) + w: 562.1 → 618.1 (+56px) + h: 44 → 53 (+9px) + row-gap: 16px → 0px + grid-template-columns: 273.062px 273.062px → 301.062px 301.062px + grid-template-rows: 44px → 53px + width: 562.125px → 618.125px + height: 44px → 53px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] + x: 142.6 → 104.6 (-38px) + y: 1018.4 → 928 (-90.4px) + w: 273.1 → 301.1 (+28px) + h: 44 → 53 (+9px) + display: block → flex + flex-direction: row → column + row-gap: normal → 0px + column-gap: normal → 0px + padding-top: 0px → 10px + width: 273.062px → 301.062px + height: 44px → 53px + min-width: auto → 0px + border-top-width: 0px → 1px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "RADIUS" + x: 142.6 → 104.6 (-38px) + y: 1018.4 → 939 (-79.4px) + w: 273.1 → 301.1 (+28px) + h: 12 → 14 (+2px) + align-items: normal → center + row-gap: normal → 8px + column-gap: normal → 8px + width: 273.062px → 301.062px + height: 12px → 14px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: 0.8px → 0.5px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "18 px" + x: 384.1 → 370.2 (-13.9px) + y: 1018.4 → 939 (-79.4px) + w: 31.5 → 35.5 (+4px) + h: 12 → 14 (+2px) + width: 31.5156px → 35.5px + height: 12px → 14px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 10px → 11px + letter-spacing: 0.8px → 0.5px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input + x: 142.6 → 106.6 (-36px) + y: 1039.4 → 963 (-76.4px) + w: 273.1 → 301.1 (+28px) + display: inline-block → block + margin-top: 0px → 2px + margin-right: 0px → 2px + margin-bottom: 0px → 2px + margin-left: 0px → 2px + width: 273.062px → 301.062px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) + background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) + color: rgb(23, 33, 43) → rgb(16, 16, 16) + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [toggle-row] + x: 431.7 → 421.7 (-10px) + y: 1018.4 → 928 (-90.4px) + w: 273.1 → 301.1 (+28px) + h: 44 → 53 (+9px) + display: block → flex + justify-content: normal → space-between + align-items: normal → center + row-gap: normal → 16px + column-gap: normal → 16px + padding-top: 0px → 10px + width: 273.062px → 301.062px + height: 44px → 53px + min-width: auto → 0px + border-top-width: 0px → 1px + font-size: 16px → 13.6px + line-height: 24px → 20.4px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "Preserve aspect ratio" + x: 431.7 → 421.7 (-10px) + y: 1021.4 → 949.8 (-71.6px) + w: 155.6 → 129 (-26.6px) + h: 17 → 20.4 (+3.4px) + display: inline → block + width: auto → 129.031px + height: auto → 20.3906px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 16px → 13.6px + line-height: 24px → 20.4px + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button [on toggle] + x: 587.3 → 684.3 (+97px) + y: 1018.4 → 949.6 (-68.8px) + w: 32 → 38.4 (+6.4px) + h: 18 → 20.8 (+2.8px) + display: inline-block → block + width: 32px → 38.3906px + height: 18px → 20.7969px + min-width: 0px → auto + min-height: 0px → auto + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 999px + background-color: rgba(0, 0, 0, 0) → rgb(23, 105, 210) + color: rgb(23, 33, 43) → rgb(0, 0, 0) + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i [toggle-knob] + x: 603.3 → 703.9 (+100.6px) + y: 1027.4 → 951.6 (-75.8px) + w: 0 → 16.8 (+16.8px) + h: 0 → 16.8 (+16.8px) + display: inline → block + position: static → absolute + top: auto → 1px + right: auto → 18.5938px + bottom: auto → 1px + left: auto → 1px + width: auto → 16.7969px + height: auto → 16.7969px + transform: none → matrix(1, 0, 0, 1, 17.6, 0) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + border-radius: 0px → 50% + background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) + color: rgb(23, 33, 43) → rgb(0, 0, 0) + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(5) [pipeline-footer] + y: 1081.4 → 982 (-99.4px) + height: 36px → 35px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset-btn] "Reset pipeline" + y: 1099.4 → 1000 (-99.4px) + w: 97.1 → 109.8 (+12.7px) + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 97.0625px → 109.75px + height: 18px → 17px + background-position: 0px 0px → 0% 0% + line-height: 18px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw] + x: 57.6 → 63.6 (+6px) + y: 1101.4 → 1001.5 (-99.9px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + line-height: 18px → normal + vertical-align: middle → baseline + +body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span [auto-note] "changes are applied automatically" + x: 510.1 → 489.9 (-20.2px) + y: 1101.9 → 1001.5 (-100.4px) + w: 213.6 → 233.8 (+20.2px) + width: 213.594px → 233.812px + height: 13px → 14px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i [status-dot] + x: 510.1 → 489.9 (-20.2px) + y: 1105.4 → 1004.5 (-100.9px) + w: 6 → 8 (+2px) + h: 6 → 8 (+2px) + width: 6px → 8px + height: 6px → 8px + box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] + y: 392.4 → 381.8 (-10.6px) + h: 59 → 50 (-9px) + row-gap: normal → 16px + column-gap: normal → 16px + height: 59px → 50px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div [section-text] + y: 392.4 → 381.8 (-10.6px) + w: 148.5 → 153.6 (+5.1px) + h: 46 → 37 (-9px) + display: block → flex + flex-direction: row → column + row-gap: normal → 2px + column-gap: normal → 2px + width: 148.484px → 153.609px + height: 46px → 37px + min-width: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > strong "4 active steps" + y: 421.4 → 400.8 (-20.6px) + w: 148.5 → 153.6 (+5.1px) + width: 148.484px → 153.609px + height: 17px → 18px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > strong > em "• LIVE" + x: 173.1 → 175.2 (+2.1px) + y: 425.4 → 404.8 (-20.6px) + w: 33 → 36 (+3px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106) + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span [mono-label] "PROCESSING PIPELINE" + y: 400.4 → 381.8 (-18.6px) + w: 127.3 → 153.6 (+26.3px) + display: inline → block + width: auto → 153.609px + height: auto → 12px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + line-height: normal → 12px + letter-spacing: 1.2px → 1px + text-transform: none → uppercase + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button [add-btn] "Add tool" + x: 657.7 → 644.4 (-13.3px) + y: 406.4 → 391.8 (-14.6px) + w: 66 → 79.3 (+13.3px) + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 66.0469px → 79.3125px + height: 18px → 17px + background-position: 0px 0px → 0% 0% + line-height: 18px → normal + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg [lucide lucide-icon lucide-plus] + x: 657.7 → 650.4 (-7.3px) + y: 407.9 → 392.8 (-15.1px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + line-height: 18px → normal + vertical-align: middle → baseline + +body > main > footer [preview-footer] + y: 1532.9 → 2292.9 (+760px) + row-gap: normal → 16px + column-gap: normal → 16px + letter-spacing: normal → 0.8px + +body > main > footer > span:nth-of-type(1) "easy-png-tools" + y: 1550.4 → 2309.9 (+759.5px) + w: 117 → 142.8 (+25.8px) + display: flex → block + align-items: center → normal + row-gap: 7px → normal + column-gap: 7px → normal + width: 116.984px → 142.812px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: normal → 0.8px + +body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" + x: 141.6 → 159.6 (+18px) + y: 1550.4 → 2309.9 (+759.5px) + w: 33 → 40.8 (+7.8px) + display: block → inline + width: 33px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-weight: 400 → 700 + letter-spacing: normal → 0.8px + +body > main > footer > span:nth-of-type(2) "© 2024" + x: 691.5 → 1341.6 (+650.1px) + y: 1549.9 → 2309.9 (+760px) + w: 141 → 40.8 (-100.2px) + display: flex → block + align-items: center → normal + row-gap: 7px → normal + column-gap: 7px → normal + width: 140.969px → 40.8125px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: normal → 0.8px + +body >main >footer >span:nth-of-type(2) >svg [lucide lucide-link-2 lucide-link2] + ✗ present in reference, absent in project + +body >main >footer >span:nth-of-type(3) "© 2024" + ✗ present in reference, absent in project + +body >div + ✗ present in reference, absent in project + + +=== /preview/list-tools (vs list-tools.html) — 305 differences === + +body + h: 2416.4 → 2361.6 (-54.8px) + height: 2416.38px → 2361.59px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main [preview-root] + h: 2416.4 → 2361.6 (-54.8px) + height: 2416.38px → 2361.59px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header [topbar] + position: static → sticky + top: auto → 0px + z-index: auto → 20 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a [brand] + w: 218.1 → 232.4 (+14.3px) + width: 218.062px → 232.422px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) + +body > main > header > a > span:nth-of-type(2) "easy-png-tools" + w: 107.8 → 117.6 (+9.8px) + width: 107.766px → 117.609px + height: 17px → 18px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG" + x: 215.4 → 225.2 (+9.8px) + w: 60.3 → 64.8 (+4.5px) + width: 60.2969px → 64.8125px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + +body > main > header > div [top-actions] + x: 1085.6 → 1070.6 (-15px) + w: 296.8 → 311.8 (+15px) + width: 296.828px → 311.812px + height: 29px → 28px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > div > span [status] "LOCAL MODE / READY" + x: 1085.6 → 1070.6 (-15px) + w: 126.4 → 137.4 (+11px) + width: 126.375px → 137.406px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > header > div > span > i [status-dot] + x: 1085.6 → 1070.6 (-15px) + w: 6 → 8 (+2px) + h: 6 → 8 (+2px) + width: 6px → 8px + height: 6px → 8px + box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + x: 1228 → 1224 (-4px) + display: grid → flex + justify-content: normal → center + grid-template-columns: 17px → none + grid-template-rows: 17px → none + width: 29px → 28px + height: 29px → 28px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + x: 1234 → 1230 (-4px) + width: 17px → 16px + height: 17px → 16px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + x: 1273 → 1268 (-5px) + display: grid → flex + justify-content: normal → center + grid-template-columns: 17px → none + grid-template-rows: 17px → none + width: 29px → 28px + height: 29px → 28px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + x: 1279 → 1274 (-5px) + width: 17px → 16px + height: 17px → 16px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > header > div > div [lang] + x: 1318 → 1312 (-6px) + w: 64.5 → 70.4 (+5.9px) + align-items: center → normal + width: 64.4531px → 70.4062px + height: 26px → 27px + overflow: visible → hidden + border-radius: 0px → 4px + +body > main > header > div > div > span [lang-div] "/" + x: 1348 → 1344.2 (-3.8px) + y: 19.5 → 25 (+5.5px) + w: 4.5 → 6 (+1.5px) + h: 24 → 13 (-11px) + align-self: auto → center + width: 4.45312px → 6px + height: 24px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: rgb(23, 33, 43) → rgb(109, 120, 131) + font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace + font-size: 16px → 10px + line-height: 24px → normal + +body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" + x: 1352.4 → 1350.2 (-2.2px) + w: 29 → 31.2 (+2.2px) + width: 29px → 31.2031px + height: 24px → 25px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + +body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" + x: 1319 → 1313 (-6px) + w: 29 → 31.2 (+2.2px) + width: 29px → 31.2031px + height: 24px → 25px + letter-spacing: normal → 0.6px + +body > main > header > nav [nav] + x: 760.6 → 504 (-256.6px) + y: 25.5 → 24 (-1.5px) + w: 296.9 → 376.6 (+79.7px) + h: 12 → 15 (+3px) + row-gap: 22px → 18px + column-gap: 22px → 18px + margin-right: 28px → 0px + margin-left: 484.984px → 24px + width: 296.938px → 376.594px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > nav > a:nth-of-type(1) "Workspace" + x: 760.6 → 504 (-256.6px) + y: 25.5 → 24 (-1.5px) + w: 49.5 → 69.1 (+19.6px) + h: 12 → 15 (+3px) + width: 49.4844px → 69.125px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(2) "Catalog" + x: 832.1 → 591.1 (-241px) + y: 25.5 → 24 (-1.5px) + w: 38.5 → 53.8 (+15.3px) + h: 12 → 15 (+3px) + width: 38.5px → 53.7656px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: rgb(23, 105, 210) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(3) "Gradient" + x: 892.6 → 662.9 (-229.7px) + y: 25.5 → 24 (-1.5px) + w: 44 → 61.5 (+17.5px) + h: 12 → 15 (+3px) + width: 43.9844px → 61.4531px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(4) "Background remover" + x: 958.6 → 742.4 (-216.2px) + y: 25.5 → 24 (-1.5px) + w: 99 → 138.3 (+39.3px) + h: 12 → 15 (+3px) + width: 98.9688px → 138.25px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > div [catalog-page] + h: 2352.4 → 2251.6 (-100.8px) + height: 2352.38px → 2251.59px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(1) [catalog-head] + h: 189.4 → 124.6 (-64.8px) + flex-wrap: nowrap → wrap + row-gap: 40px → 24px + column-gap: 40px → 24px + padding-bottom: 42px → 0px + height: 189.375px → 124.594px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(1) > div:nth-of-type(1) + w: 660 → 510.7 (-149.3px) + h: 146.4 → 124.6 (-21.8px) + width: 660px → 510.719px + height: 146.375px → 124.594px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG" + w: 660 → 510.7 (-149.3px) + h: 12 → 15 (+3px) + margin-bottom: 18px → 8px + width: 660px → 510.719px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: rgb(23, 105, 210) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: 1.2px → 2.16px + +body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" + y: 154 → 147 (-7px) + w: 660 → 510.7 (-149.3px) + h: 57.6 → 48 (-9.6px) + margin-top: 12px → 0px + margin-bottom: 14px → 0px + width: 660px → 510.719px + height: 57.5938px → 48px + max-width: 700px → none + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 57.6px → 32px + font-weight: 650 → 700 + line-height: 57.6px → 48px + letter-spacing: -3.456px → normal + +body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p "Focused utilities for working with PNG. " + y: 225.6 → 203 (-22.6px) + w: 660 → 510.7 (-149.3px) + margin-top: 0px → 8px + width: 660px → 510.719px + height: 44.7812px → 45.5938px + max-width: 660px → 510.72px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 14px → 15.2px + line-height: 22.4px → 22.8px + +body > main > div > div:nth-of-type(1) > div:nth-of-type(2) [catalog-total] + x: 1251.3 → 1321.2 (+69.9px) + y: 205.6 → 175 (-30.6px) + w: 131.1 → 61.2 (-69.9px) + h: 64.8 → 73.6 (+8.8px) + flex-direction: row → column + align-items: center → flex-end + row-gap: 14px → normal + column-gap: 14px → normal + width: 131.141px → 61.2031px + height: 64.7969px → 73.5938px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: 14px → 16px + text-align: right → start + +body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b "32" + x: 1251.3 → 1344 (+92.7px) + y: 205.6 → 175 (-30.6px) + w: 67.7 → 38.4 (-29.3px) + h: 64.8 → 42 (-22.8px) + width: 67.6562px → 38.4062px + height: 64.7969px → 42px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-size: 72px → 32px + font-weight: 400 → 700 + line-height: 64.8px → normal + letter-spacing: -5.76px → normal + text-align: right → start + +body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span "TOOLS AVAILABLE" + x: 1332.9 → 1321.2 (-11.7px) + y: 224 → 222.6 (-1.4px) + w: 49.5 → 61.2 (+11.7px) + h: 28 → 26 (-2px) + margin-top: 0px → 5.6px + width: 49.4844px → 61.2031px + height: 28px → 26px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + line-height: 14px → normal + letter-spacing: normal → 0.8px + +body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br + y: 225 → 222.6 (-2.4px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + line-height: 14px → normal + letter-spacing: normal → 0.8px + +body > main > div > div:nth-of-type(2) [catalog-toolbar] + y: 313.4 → 248.6 (-64.8px) + h: 108 → 75 (-33px) + flex-wrap: nowrap → wrap + row-gap: 24px → 16px + column-gap: 24px → 16px + padding-top: 24px → 20px + padding-bottom: 42px → 20px + height: 108px → 75px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(2) > label [catalog-search] + y: 337.4 → 268.6 (-68.8px) + w: 420 → 202 (-218px) + h: 42 → 35 (-7px) + row-gap: 12px → 8px + column-gap: 12px → 8px + padding-top: 12px → 8px + padding-right: 14px → 12px + padding-bottom: 12px → 8px + padding-left: 14px → 12px + width: 420px → 202px + height: 42px → 35px + border-radius: 0px → 4px + background-color: rgba(0, 0, 0, 0) → rgb(248, 250, 251) + +body > main > div > div:nth-of-type(2) > label > svg [lucide lucide-icon lucide-search] + x: 72.6 → 70.6 (-2px) + y: 350.4 → 278.1 (-72.3px) + w: 14.9 → 16 (+1.1px) + width: 14.8906px → 16px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(2) > label > input + x: 99.5 → 94.6 (-4.9px) + y: 351.4 → 277.6 (-73.8px) + w: 363.1 → 152 (-211.1px) + h: 14 → 17 (+3px) + padding-top: 0px → 1px + padding-right: 0px → 2px + padding-bottom: 0px → 1px + padding-left: 0px → 2px + width: 363.109px → 152px + height: 14px → 17px + background-position: 0px 0px → 0% 0% + +body > main > div > div:nth-of-type(2) > div [catalog-filters] + x: 901.9 → 850.9 (-51px) + y: 343.4 → 272.2 (-71.2px) + w: 480.5 → 531.5 (+51px) + h: 30 → 27.8 (-2.2px) + row-gap: 6px → 6.4px + column-gap: 6px → 6.4px + width: 480.469px → 531.484px + height: 30px → 27.7812px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(2) > div > svg [lucide lucide-funnel lucide-icon] + x: 901.9 → 850.9 (-51px) + y: 350.9 → 278.6 (-72.3px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1) [active] "ALL" + x: 922.9 → 872.3 (-50.6px) + y: 343.4 → 272.2 (-71.2px) + w: 38.5 → 41 (+2.5px) + h: 30 → 27.8 (-2.2px) + padding-top: 8px → 6.4px + padding-right: 10px → 9.6px + padding-bottom: 8px → 6.4px + padding-left: 10px → 9.6px + width: 38.5px → 41px + height: 30px → 27.7812px + border-radius: 0px → 4px + background-color: rgba(0, 0, 0, 0) → rgb(23, 105, 210) + background-position: 0px 0px → 0% 0% + color: rgb(23, 105, 210) → rgb(255, 255, 255) + letter-spacing: normal → 0.6px + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT" + x: 967.4 → 919.7 (-47.7px) + y: 343.4 → 272.2 (-71.2px) + w: 60.5 → 67.4 (+6.9px) + h: 30 → 27.8 (-2.2px) + padding-top: 8px → 6.4px + padding-right: 10px → 9.6px + padding-bottom: 8px → 6.4px + padding-left: 10px → 9.6px + width: 60.5px → 67.3906px + height: 30px → 27.7812px + border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) + border-radius: 0px → 4px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY" + x: 1033.9 → 993.5 (-40.4px) + y: 343.4 → 272.2 (-71.2px) + w: 88 → 100.4 (+12.4px) + h: 30 → 27.8 (-2.2px) + padding-top: 8px → 6.4px + padding-right: 10px → 9.6px + padding-bottom: 8px → 6.4px + padding-left: 10px → 9.6px + width: 87.9844px → 100.391px + height: 30px → 27.7812px + border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) + border-radius: 0px → 4px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR" + x: 1127.9 → 1100.3 (-27.6px) + y: 343.4 → 272.2 (-71.2px) + w: 49.5 → 54.2 (+4.7px) + h: 30 → 27.8 (-2.2px) + padding-top: 8px → 6.4px + padding-right: 10px → 9.6px + padding-bottom: 8px → 6.4px + padding-left: 10px → 9.6px + width: 49.5px → 54.1875px + height: 30px → 27.7812px + border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) + border-radius: 0px → 4px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY" + x: 1183.4 → 1160.8 (-22.6px) + y: 343.4 → 272.2 (-71.2px) + w: 66 → 74 (+8px) + h: 30 → 27.8 (-2.2px) + padding-top: 8px → 6.4px + padding-right: 10px → 9.6px + padding-bottom: 8px → 6.4px + padding-left: 10px → 9.6px + width: 65.9844px → 74px + height: 30px → 27.7812px + border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) + border-radius: 0px → 4px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS" + x: 1255.4 → 1241.2 (-14.2px) + y: 343.4 → 272.2 (-71.2px) + w: 60.5 → 67.4 (+6.9px) + h: 30 → 27.8 (-2.2px) + padding-top: 8px → 6.4px + padding-right: 10px → 9.6px + padding-bottom: 8px → 6.4px + padding-left: 10px → 9.6px + width: 60.5px → 67.3906px + height: 30px → 27.7812px + border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) + border-radius: 0px → 4px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE" + x: 1321.9 → 1315 (-6.9px) + y: 343.4 → 272.2 (-71.2px) + w: 60.5 → 67.4 (+6.9px) + h: 30 → 27.8 (-2.2px) + padding-top: 8px → 6.4px + padding-right: 10px → 9.6px + padding-bottom: 8px → 6.4px + padding-left: 10px → 9.6px + width: 60.5px → 67.3906px + height: 30px → 27.7812px + border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) + border-radius: 0px → 4px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + +body > main > div > div:nth-of-type(3) [catalog-groups] + y: 421.4 → 323.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group] + y: 421.4 → 323.6 (-97.8px) + display: block → flex + flex-direction: row → column + row-gap: normal → 16px + column-gap: normal → 16px + min-width: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [group-title] + y: 421.4 → 323.6 (-97.8px) + h: 26 → 24 (-2px) + align-items: center → baseline + row-gap: normal → 16px + column-gap: normal → 16px + padding-bottom: 12px → 8px + height: 26px → 24px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 16px + font-weight: 600 → 400 + line-height: normal → 24px + letter-spacing: 1.32px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span "CONVERT" + y: 421.4 → 323.6 (-97.8px) + w: 51.6 → 62.2 (+10.6px) + h: 13 → 15 (+2px) + width: 51.5781px → 62.1719px + height: 13px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 11px → 12px + font-weight: 600 → 400 + letter-spacing: 1.32px → 1.68px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > i "05 TOOLS" + y: 421.9 → 325.6 (-96.3px) + width: 54.5625px → 54.4062px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: 1.32px → 0.8px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [tool-cards] + y: 447.4 → 363.6 (-83.8px) + h: 584 → 570 (-14px) + padding-top: 14px → 0px + height: 584px → 570px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] + y: 461.4 → 363.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] + y: 493.4 → 395.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-file-image lucide-icon] + y: 504.9 → 407.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] + y: 493.9 → 398.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Convert JPG to PNG" + y: 493.9 → 398.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Re-encode JPEG files as lossless PNG whi" + y: 516.9 → 417.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" + y: 478.4 → 380.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 506.4 → 408.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] + y: 577.4 → 479.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] + y: 609.4 → 511.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-file-image lucide-icon] + y: 620.9 → 523.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + y: 609.9 → 514.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Convert WebP to PNG" + y: 609.9 → 514.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Turn WebP images into a universal PNG fo" + y: 632.9 → 533.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" + y: 594.4 → 496.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 622.4 → 524.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] + y: 693.4 → 595.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] + y: 725.4 → 627.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-binary lucide-icon] + y: 736.9 → 639.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + y: 725.9 → 630.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "PNG to Base64" + y: 725.9 → 630.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Encode an image as a base64 string for e" + y: 748.9 → 649.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" + y: 710.4 → 612.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 738.4 → 640.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] + y: 809.4 → 711.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] + y: 841.4 → 743.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-link-2] + y: 852.9 → 755.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + y: 841.9 → 746.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "PNG to Data URI" + y: 841.9 → 746.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Build a complete data URI ready for HTML" + y: 864.9 → 765.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" + y: 826.4 → 728.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 854.4 → 756.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card] + y: 925.4 → 827.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon] + y: 957.4 → 859.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-file-image lucide-icon] + y: 968.9 → 871.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + y: 957.9 → 862.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Convert PNG to JPG" + y: 957.9 → 862.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Composite transparency over a selected b" + y: 980.9 → 881.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05" + y: 942.4 → 844.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 970.4 → 872.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group] + y: 421.4 → 323.6 (-97.8px) + display: block → flex + flex-direction: row → column + row-gap: normal → 16px + column-gap: normal → 16px + min-width: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [group-title] + y: 421.4 → 323.6 (-97.8px) + h: 26 → 24 (-2px) + align-items: center → baseline + row-gap: normal → 16px + column-gap: normal → 16px + padding-bottom: 12px → 8px + height: 26px → 24px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 16px + font-weight: 600 → 400 + line-height: normal → 24px + letter-spacing: 1.32px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > span "TRANSPARENCY" + y: 421.4 → 323.6 (-97.8px) + w: 88.4 → 106.6 (+18.2px) + h: 13 → 15 (+2px) + width: 88.4219px → 106.562px + height: 13px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 11px → 12px + font-weight: 600 → 400 + letter-spacing: 1.32px → 1.68px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > i "05 TOOLS" + y: 421.9 → 325.6 (-96.3px) + width: 54.5625px → 54.4062px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: 1.32px → 0.8px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [tool-cards] + y: 447.4 → 363.6 (-83.8px) + h: 584 → 570 (-14px) + padding-top: 14px → 0px + height: 584px → 570px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] + y: 461.4 → 363.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] + y: 493.4 → 395.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-scissors] + y: 504.9 → 407.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] + y: 493.9 → 389.1 (-104.8px) + h: 41 → 55 (+14px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 55px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Remove background PNG" + y: 493.9 → 389.1 (-104.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Remove a solid background by color, tole" + y: 516.9 → 408.1 (-108.8px) + h: 18 → 36 (+18px) + height: 18px → 36px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" + y: 478.4 → 380.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 506.4 → 408.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] + y: 577.4 → 479.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] + y: 609.4 → 511.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-layers] + y: 620.9 → 523.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + y: 609.9 → 514.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Extract alpha mask" + y: 609.9 → 514.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Turn the alpha channel into a clean blac" + y: 632.9 → 533.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" + y: 594.4 → 496.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 622.4 → 524.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] + y: 693.4 → 595.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] + y: 725.4 → 627.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-frame lucide-icon] + y: 736.9 → 639.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + y: 725.9 → 630.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Round corners PNG" + y: 725.9 → 630.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Clip the image corners by a precise radi" + y: 748.9 → 649.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" + y: 710.4 → 612.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 738.4 → 640.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] + y: 809.4 → 711.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] + y: 841.4 → 743.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-square] + y: 852.9 → 755.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + y: 841.9 → 746.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "Outline PNG" + y: 841.9 → 746.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Add a colored ring around opaque content" + y: 864.9 → 765.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" + y: 826.4 → 728.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 854.4 → 756.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card] + y: 925.4 → 827.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon] + y: 957.4 → 859.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-droplet lucide-icon] + y: 968.9 → 871.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + y: 957.9 → 853.1 (-104.8px) + h: 41 → 55 (+14px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 55px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Change PNG opacity" + y: 957.9 → 853.1 (-104.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Multiply the alpha channel while keeping" + y: 980.9 → 872.1 (-108.8px) + h: 18 → 36 (+18px) + height: 18px → 36px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05" + y: 942.4 → 844.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 970.4 → 872.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group] + y: 1087.4 → 989.6 (-97.8px) + display: block → flex + flex-direction: row → column + row-gap: normal → 16px + column-gap: normal → 16px + min-width: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) [group-title] + y: 1087.4 → 989.6 (-97.8px) + h: 26 → 24 (-2px) + align-items: center → baseline + row-gap: normal → 16px + column-gap: normal → 16px + padding-bottom: 12px → 8px + height: 26px → 24px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 16px + font-weight: 600 → 400 + line-height: normal → 24px + letter-spacing: 1.32px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > span "COLOR" + y: 1087.4 → 989.6 (-97.8px) + w: 36.8 → 44.4 (+7.6px) + h: 13 → 15 (+2px) + width: 36.8438px → 44.4062px + height: 13px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 11px → 12px + font-weight: 600 → 400 + letter-spacing: 1.32px → 1.68px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > i "05 TOOLS" + y: 1087.9 → 991.6 (-96.3px) + width: 54.5625px → 54.4062px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: 1.32px → 0.8px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) [tool-cards] + y: 1113.4 → 1029.6 (-83.8px) + h: 584 → 570 (-14px) + padding-top: 14px → 0px + height: 584px → 570px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] + y: 1127.4 → 1029.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] + y: 1159.4 → 1061.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun] + y: 1170.9 → 1073.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] + y: 1159.9 → 1055.1 (-104.8px) + h: 41 → 55 (+14px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 55px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Create gradient PNG" + y: 1159.9 → 1055.1 (-104.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Generate a smooth transition between two" + y: 1182.9 → 1074.1 (-108.8px) + h: 18 → 36 (+18px) + height: 18px → 36px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" + y: 1144.4 → 1046.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1172.4 → 1074.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] + y: 1243.4 → 1145.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] + y: 1275.4 → 1177.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-contrast lucide-icon] + y: 1286.9 → 1189.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + y: 1275.9 → 1180.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Grayscale PNG" + y: 1275.9 → 1180.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Convert the image to luminance-based sha" + y: 1298.9 → 1199.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" + y: 1260.4 → 1162.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1288.4 → 1190.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] + y: 1359.4 → 1261.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] + y: 1391.4 → 1293.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-blend lucide-icon] + y: 1402.9 → 1305.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + y: 1391.9 → 1296.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Invert colors PNG" + y: 1391.9 → 1296.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Invert every color channel while leaving" + y: 1414.9 → 1315.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" + y: 1376.4 → 1278.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1404.4 → 1306.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] + y: 1475.4 → 1377.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] + y: 1507.4 → 1409.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun] + y: 1518.9 → 1421.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + y: 1507.9 → 1412.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "Brightness & contrast" + y: 1507.9 → 1412.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Adjust brightness and contrast across a " + y: 1530.9 → 1431.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" + y: 1492.4 → 1394.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1520.4 → 1422.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card] + y: 1591.4 → 1493.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon] + y: 1623.4 → 1525.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun] + y: 1634.9 → 1537.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + y: 1623.9 → 1528.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Temperature PNG" + y: 1623.9 → 1528.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Make an image warmer or cooler with a si" + y: 1646.9 → 1547.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05" + y: 1608.4 → 1510.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1636.4 → 1538.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group] + y: 1087.4 → 989.6 (-97.8px) + display: block → flex + flex-direction: row → column + row-gap: normal → 16px + column-gap: normal → 16px + min-width: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) [group-title] + y: 1087.4 → 989.6 (-97.8px) + h: 26 → 24 (-2px) + align-items: center → baseline + row-gap: normal → 16px + column-gap: normal → 16px + padding-bottom: 12px → 8px + height: 26px → 24px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 16px + font-weight: 600 → 400 + line-height: normal → 24px + letter-spacing: 1.32px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > span "GEOMETRY" + y: 1087.4 → 989.6 (-97.8px) + w: 59 → 71 (+12px) + h: 13 → 15 (+2px) + width: 58.9531px → 71.0469px + height: 13px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 11px → 12px + font-weight: 600 → 400 + letter-spacing: 1.32px → 1.68px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > i "05 TOOLS" + y: 1087.9 → 991.6 (-96.3px) + width: 54.5625px → 54.4062px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: 1.32px → 0.8px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) [tool-cards] + y: 1113.4 → 1029.6 (-83.8px) + h: 584 → 570 (-14px) + padding-top: 14px → 0px + height: 584px → 570px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] + y: 1127.4 → 1029.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] + y: 1159.4 → 1061.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-scaling] + y: 1170.9 → 1073.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] + y: 1159.9 → 1055.1 (-104.8px) + h: 41 → 55 (+14px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 55px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Resize PNG" + y: 1159.9 → 1055.1 (-104.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Scale an image with bilinear interpolati" + y: 1182.9 → 1074.1 (-108.8px) + h: 18 → 36 (+18px) + height: 18px → 36px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" + y: 1144.4 → 1046.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1172.4 → 1074.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] + y: 1243.4 → 1145.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] + y: 1275.4 → 1177.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-crop lucide-icon] + y: 1286.9 → 1189.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + y: 1275.9 → 1180.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Crop PNG" + y: 1275.9 → 1180.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Cut a rectangular area with exact coordi" + y: 1298.9 → 1199.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" + y: 1260.4 → 1162.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1288.4 → 1190.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] + y: 1359.4 → 1261.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] + y: 1391.4 → 1293.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-rotate-cw] + y: 1402.9 → 1305.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + y: 1391.9 → 1296.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Rotate PNG" + y: 1391.9 → 1296.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Rotate by 90, 180, or 270 degrees withou" + y: 1414.9 → 1315.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" + y: 1376.4 → 1278.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1404.4 → 1306.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] + y: 1475.4 → 1377.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] + y: 1507.4 → 1409.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-flip-horizontal-2 lucide-icon] + y: 1518.9 → 1421.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + y: 1507.9 → 1412.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "Flip PNG" + y: 1507.9 → 1412.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Mirror the image horizontally or vertica" + y: 1530.9 → 1431.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" + y: 1492.4 → 1394.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1520.4 → 1422.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card] + y: 1591.4 → 1493.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon] + y: 1623.4 → 1525.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-maximize-2] + y: 1634.9 → 1537.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + y: 1623.9 → 1528.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Add padding to PNG" + y: 1623.9 → 1528.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Expand the canvas on all sides by a chos" + y: 1646.9 → 1547.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05" + y: 1608.4 → 1510.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1636.4 → 1538.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group] + y: 1753.4 → 1655.6 (-97.8px) + display: block → flex + flex-direction: row → column + row-gap: normal → 16px + column-gap: normal → 16px + min-width: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) [group-title] + y: 1753.4 → 1655.6 (-97.8px) + h: 26 → 24 (-2px) + align-items: center → baseline + row-gap: normal → 16px + column-gap: normal → 16px + padding-bottom: 12px → 8px + height: 26px → 24px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 16px + font-weight: 600 → 400 + line-height: normal → 24px + letter-spacing: 1.32px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > span "FILTERS" + y: 1753.4 → 1655.6 (-97.8px) + w: 51.6 → 62.2 (+10.6px) + h: 13 → 15 (+2px) + width: 51.5781px → 62.1719px + height: 13px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 11px → 12px + font-weight: 600 → 400 + letter-spacing: 1.32px → 1.68px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > i "04 TOOLS" + y: 1753.9 → 1657.6 (-96.3px) + width: 54.5625px → 54.4062px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: 1.32px → 0.8px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) [tool-cards] + y: 1779.4 → 1695.6 (-83.8px) + h: 468 → 454 (-14px) + padding-top: 14px → 0px + height: 468px → 454px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] + y: 1793.4 → 1695.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] + y: 1825.4 → 1727.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-droplets lucide-icon] + y: 1836.9 → 1739.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] + y: 1825.9 → 1730.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Blur PNG" + y: 1825.9 → 1730.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Apply a fast Gaussian-style blur with tr" + y: 1848.9 → 1749.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" + y: 1810.4 → 1712.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1838.4 → 1740.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] + y: 1909.4 → 1811.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] + y: 1941.4 → 1843.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-focus lucide-icon] + y: 1952.9 → 1855.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + y: 1941.9 → 1846.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Sharpen PNG" + y: 1941.9 → 1846.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Emphasize edges with an adjustable sharp" + y: 1964.9 → 1865.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" + y: 1926.4 → 1828.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1954.4 → 1856.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] + y: 2025.4 → 1927.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] + y: 2057.4 → 1959.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun] + y: 2068.9 → 1971.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + y: 2057.9 → 1962.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Vignette PNG" + y: 2057.9 → 1962.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Smoothly darken the image edges while pr" + y: 2080.9 → 1981.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" + y: 2042.4 → 1944.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 2070.4 → 1972.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] + y: 2141.4 → 2043.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] + y: 2173.4 → 2075.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-layers] + y: 2184.9 → 2087.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + y: 2173.9 → 2078.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "JPEG artifacts" + y: 2173.9 → 2078.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Simulate low-quality JPEG recompression " + y: 2196.9 → 2097.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" + y: 2158.4 → 2060.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 2186.4 → 2088.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group] + y: 1753.4 → 1655.6 (-97.8px) + display: block → flex + flex-direction: row → column + row-gap: normal → 16px + column-gap: normal → 16px + min-width: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) [group-title] + y: 1753.4 → 1655.6 (-97.8px) + h: 26 → 24 (-2px) + align-items: center → baseline + row-gap: normal → 16px + column-gap: normal → 16px + padding-bottom: 12px → 8px + height: 26px → 24px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 16px + font-weight: 600 → 400 + line-height: normal → 24px + letter-spacing: 1.32px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > span "ANALYZE" + y: 1753.4 → 1655.6 (-97.8px) + w: 51.6 → 62.2 (+10.6px) + h: 13 → 15 (+2px) + width: 51.5781px → 62.1719px + height: 13px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 11px → 12px + font-weight: 600 → 400 + letter-spacing: 1.32px → 1.68px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > i "04 TOOLS" + y: 1753.9 → 1657.6 (-96.3px) + width: 54.5625px → 54.4062px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: 1.32px → 0.8px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) [tool-cards] + y: 1779.4 → 1695.6 (-83.8px) + h: 468 → 454 (-14px) + padding-top: 14px → 0px + height: 468px → 454px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] + y: 1793.4 → 1695.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] + y: 1825.4 → 1727.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-info] + y: 1836.9 → 1739.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] + y: 1825.9 → 1730.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "PNG info" + y: 1825.9 → 1730.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Inspect dimensions, alpha presence, and " + y: 1848.9 → 1749.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" + y: 1810.4 → 1712.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1838.4 → 1740.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] + y: 1909.4 → 1811.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] + y: 1941.4 → 1843.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-search-check] + y: 1952.9 → 1855.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + y: 1941.9 → 1846.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Check grayscale" + y: 1941.9 → 1846.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Report whether the image contains only s" + y: 1964.9 → 1865.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" + y: 1926.4 → 1828.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 1954.4 → 1856.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] + y: 2025.4 → 1927.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] + y: 2057.4 → 1959.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-eye lucide-icon] + y: 2068.9 → 1971.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + y: 2057.9 → 1962.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Check transparency" + y: 2057.9 → 1962.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Detect transparent and semi-transparent " + y: 2080.9 → 1981.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" + y: 2042.4 → 1944.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 2070.4 → 1972.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] + y: 2141.4 → 2043.6 (-97.8px) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] + y: 2173.4 → 2075.6 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + border-radius: 0px → 4px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-ruler] + y: 2184.9 → 2087.1 (-97.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + y: 2173.9 → 2078.1 (-95.8px) + h: 41 → 37 (-4px) + display: grid → flex + flex-direction: row → column + row-gap: 8px → 2px + column-gap: 8px → 2px + grid-template-columns: 488.406px → none + grid-template-rows: 15px 18px → none + height: 41px → 37px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "PNG orientation" + y: 2173.9 → 2078.1 (-95.8px) + h: 15 → 17 (+2px) + height: 15px → 17px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Classify the image as portrait, landscap" + y: 2196.9 → 2097.1 (-99.8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" + y: 2158.4 → 2060.6 (-97.8px) + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] + y: 2186.4 → 2088.6 (-97.8px) + opacity: 0 → 1 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + vertical-align: middle → baseline + +body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE" + y: 2311.4 → 2205.6 (-105.8px) + h: 33 → 38 (+5px) + display: block → flex + flex-wrap: nowrap → wrap + row-gap: normal → 24px + column-gap: normal → 24px + margin-top: 64px → 56px + padding-top: 20px → 24px + height: 33px → 38px + letter-spacing: normal → 0.8px + +body > main > div > footer > span "•" + x: 214 → 258.4 (+44.4px) + y: 2332.4 → 2230.6 (-101.8px) + w: 11 → 6.8 (-4.2px) + display: inline → block + margin-right: 8px → 0px + margin-left: 8px → 0px + width: auto → 6.8125px + height: auto → 13px + min-width: 0px → auto + min-height: 0px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: rgb(23, 105, 210) → rgb(109, 120, 131) + letter-spacing: normal → 0.8px + +body >main >footer [preview-footer] + + present in project, absent in reference + +body >div + ✗ present in reference, absent in project + + +=== /preview/tools/linear-gradient-png (vs gradient.html) — 104 differences === + +body + h: 1373 → 900 (-473px) + height: 1372.95px → 900px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main [preview-root] + h: 1373 → 900 (-473px) + height: 1372.95px → 900px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header [topbar] + position: static → sticky + top: auto → 0px + z-index: auto → 20 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a [brand] + w: 224.8 → 239.6 (+14.8px) + width: 224.766px → 239.609px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) + +body > main > header > a > span:nth-of-type(2) "easy-png-tools" + w: 107.8 → 117.6 (+9.8px) + width: 107.766px → 117.609px + height: 17px → 18px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT" + x: 215.4 → 225.2 (+9.8px) + w: 67 → 72 (+5px) + width: 67px → 72px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + +body > main > header > div [top-actions] + x: 1123.4 → 1111.4 (-12px) + w: 259 → 271 (+12px) + width: 259.031px → 271.016px + height: 29px → 28px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > div > span [status] "LIVE PREVIEW" + x: 1123.4 → 1111.4 (-12px) + w: 88.6 → 96.6 (+8px) + width: 88.5781px → 96.6094px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > header > div > span > i [status-dot] + x: 1123.4 → 1111.4 (-12px) + w: 6 → 8 (+2px) + h: 6 → 8 (+2px) + width: 6px → 8px + height: 6px → 8px + box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + x: 1228 → 1224 (-4px) + display: grid → flex + justify-content: normal → center + grid-template-columns: 17px → none + grid-template-rows: 17px → none + width: 29px → 28px + height: 29px → 28px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + x: 1234 → 1230 (-4px) + width: 17px → 16px + height: 17px → 16px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + x: 1273 → 1268 (-5px) + display: grid → flex + justify-content: normal → center + grid-template-columns: 17px → none + grid-template-rows: 17px → none + width: 29px → 28px + height: 29px → 28px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + x: 1279 → 1274 (-5px) + width: 17px → 16px + height: 17px → 16px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > header > div > div [lang] + x: 1318 → 1312 (-6px) + w: 64.5 → 70.4 (+5.9px) + align-items: center → normal + width: 64.4531px → 70.4062px + height: 26px → 27px + overflow: visible → hidden + border-radius: 0px → 4px + +body > main > header > div > div > span [lang-div] "/" + x: 1348 → 1344.2 (-3.8px) + y: 19.5 → 25 (+5.5px) + w: 4.5 → 6 (+1.5px) + h: 24 → 13 (-11px) + align-self: auto → center + width: 4.45312px → 6px + height: 24px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: rgb(23, 33, 43) → rgb(109, 120, 131) + font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace + font-size: 16px → 10px + line-height: 24px → normal + +body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" + x: 1352.4 → 1350.2 (-2.2px) + w: 29 → 31.2 (+2.2px) + width: 29px → 31.2031px + height: 24px → 25px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + +body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" + x: 1319 → 1313 (-6px) + w: 29 → 31.2 (+2.2px) + width: 29px → 31.2031px + height: 24px → 25px + letter-spacing: normal → 0.6px + +body > main > header > nav [nav] + x: 798.4 → 528 (-270.4px) + y: 25.5 → 24 (-1.5px) + w: 296.9 → 376.6 (+79.7px) + h: 12 → 15 (+3px) + row-gap: 22px → 18px + column-gap: 22px → 18px + margin-right: 28px → 0px + margin-left: 516.078px → 24px + width: 296.938px → 376.594px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > nav > a:nth-of-type(1) "Workspace" + x: 798.4 → 528 (-270.4px) + y: 25.5 → 24 (-1.5px) + w: 49.5 → 69.1 (+19.6px) + h: 12 → 15 (+3px) + width: 49.4844px → 69.125px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(2) "Catalog" + x: 869.9 → 615.1 (-254.8px) + y: 25.5 → 24 (-1.5px) + w: 38.5 → 53.8 (+15.3px) + h: 12 → 15 (+3px) + width: 38.5px → 53.7656px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(3) "Gradient" + x: 930.4 → 686.9 (-243.5px) + y: 25.5 → 24 (-1.5px) + w: 44 → 61.5 (+17.5px) + h: 12 → 15 (+3px) + width: 43.9844px → 61.4531px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: rgb(23, 105, 210) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(4) "Background remover" + x: 996.4 → 766.3 (-230.1px) + y: 25.5 → 24 (-1.5px) + w: 99 → 138.3 (+39.3px) + h: 12 → 15 (+3px) + width: 98.9688px → 138.25px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > div [tool-page] + h: 1264 → 657.9 (-606.1px) + padding-top: 60px → 0px + padding-right: 57.6px → 0px + padding-bottom: 72px → 0px + padding-left: 57.6px → 0px + height: 1263.95px → 657.875px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" + x: 57.6 → 0 (-57.6px) + y: 124 → 64 (-60px) + w: 1324.8 → 1440 (+115.2px) + h: 12 → 24 (+12px) + margin-bottom: 18px → 0px + width: 1324.81px → 1440px + height: 12px → 24px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1.2px → normal + +body > main > div > div:nth-of-type(1) > span "/" + x: 165.1 → 137.3 (-27.8px) + y: 124 → 66 (-58px) + w: 13.4 → 6.1 (-7.3px) + h: 12 → 20 (+8px) + margin-right: 7px → 0px + margin-left: 7px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1.2px → normal + +body > main > div > div:nth-of-type(2) [tool-title] + x: 57.6 → 0 (-57.6px) + y: 154 → 109.4 (-44.6px) + w: 1324.8 → 1440 (+115.2px) + h: 122.8 → 133.4 (+10.6px) + display: flex → block + justify-content: space-between → normal + align-items: end → normal + row-gap: 32px → normal + column-gap: 32px → normal + margin-bottom: 48px → 0px + width: 1324.81px → 1440px + height: 122.781px → 133.438px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(2) > div + x: 57.6 → 0 (-57.6px) + y: 154 → 109.4 (-44.6px) + w: 550 → 1440 (+890px) + h: 122.8 → 93.4 (-29.4px) + width: 550px → 1440px + height: 122.781px → 93.4375px + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(2) > div > h1 "Gradient background." + x: 57.6 → 0 (-57.6px) + y: 154 → 109.4 (-44.6px) + w: 550 → 1440 (+890px) + h: 57.6 → 48 (-9.6px) + margin-top: 0px → 21.44px + margin-bottom: 14px → 21.44px + width: 550px → 1440px + height: 57.5938px → 48px + max-width: 700px → none + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 57.6px → 32px + font-weight: 650 → 700 + line-height: 57.6px → 48px + letter-spacing: -3.456px → normal + +body > main > div > div:nth-of-type(2) > div > p [lede] "Create a clean, export-ready gradient wi" + x: 57.6 → 0 (-57.6px) + y: 225.6 → 178.9 (-46.7px) + w: 550 → 1440 (+890px) + h: 51.2 → 24 (-27.2px) + margin-top: 0px → 16px + margin-bottom: 0px → 16px + width: 550px → 1440px + height: 51.1875px → 24px + max-width: 550px → none + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + line-height: 25.6px → 24px + +body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" + x: 1302.4 → 0 (-1302.4px) + y: 264.8 → 220.9 (-43.9px) + w: 80 → 106.1 (+26.1px) + h: 12 → 20 (+8px) + display: flex → inline + align-items: center → normal + row-gap: 8px → normal + column-gap: 8px → normal + width: 79.9844px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(37, 169, 106) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + white-space: nowrap → normal + +body > main > div > div:nth-of-type(2) > span > i + x: 1302.4 → 0 (-1302.4px) + y: 267.8 → 220.9 (-46.9px) + w: 6 → 0 (-6px) + h: 6 → 20 (+14px) + display: block → inline + width: 6px → auto + height: 6px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + border-radius: 50% → 0px + background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0) + color: rgb(37, 169, 106) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + white-space: nowrap → normal + +body > main > div > div:nth-of-type(3) [gradient-layout] + x: 57.6 → 0 (-57.6px) + y: 324.8 → 242.9 (-81.9px) + w: 1324.8 → 1440 (+115.2px) + h: 931.2 → 479 (-452.2px) + display: grid → block + align-items: start → normal + row-gap: 56px → normal + column-gap: 56px → normal + grid-template-columns: 444.078px 824.734px → none + grid-template-rows: 931.172px → none + width: 1324.81px → 1440px + height: 931.172px → 479px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [settings-panel] + x: 57.6 → 0 (-57.6px) + y: 324.8 → 242.9 (-81.9px) + w: 444.1 → 1440 (+995.9px) + h: 635 → 293 (-342px) + width: 444.078px → 1440px + height: 635px → 293px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] + x: 58.6 → 0 (-58.6px) + y: 325.8 → 242.9 (-82.9px) + w: 442.1 → 1440 (+997.9px) + h: 83 → 48 (-35px) + display: flex → block + justify-content: space-between → normal + align-items: center → normal + padding-top: 18px → 0px + padding-right: 20px → 0px + padding-bottom: 18px → 0px + padding-left: 20px → 0px + width: 442.078px → 1440px + height: 83px → 48px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div + x: 78.6 → 0 (-78.6px) + y: 343.8 → 242.9 (-100.9px) + w: 123.2 → 1440 (+1316.8px) + h: 46 → 24 (-22px) + width: 123.156px → 1440px + height: 46px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "GRADIENT SETTINGS" + x: 78.6 → 0 (-78.6px) + y: 351.8 → 244.9 (-106.9px) + w: 113.9 → 157.6 (+43.7px) + h: 12 → 20 (+8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1.2px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure output" + x: 78.6 → 161.4 (+82.8px) + y: 372.8 → 244.9 (-127.9px) + w: 123.2 → 126.9 (+3.7px) + h: 17 → 20 (+3px) + display: block → inline + margin-top: 5px → 0px + width: 123.156px → auto + height: 17px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 14px → 16px + font-weight: 600 → 700 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 01" + x: 433.8 → 0 (-433.8px) + y: 360.8 → 268.9 (-91.9px) + w: 46.9 → 62.5 (+15.6px) + h: 12 → 20 (+8px) + display: block → inline + width: 46.8906px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1.2px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] + x: 58.6 → 0 (-58.6px) + y: 408.8 → 290.9 (-117.9px) + w: 442.1 → 1440 (+997.9px) + h: 101 → 49 (-52px) + padding-top: 22px → 0px + padding-right: 20px → 0px + padding-bottom: 22px → 0px + padding-left: 20px → 0px + width: 442.078px → 1440px + height: 101px → 49px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "GRADIENT TYPE" + x: 78.6 → 0 (-78.6px) + y: 430.8 → 292.9 (-137.9px) + w: 402.1 → 120.1 (-282px) + h: 12 → 20 (+8px) + display: flex → inline + justify-content: space-between → normal + margin-bottom: 12px → 0px + width: 402.078px → auto + height: 12px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div [segmented wide] + x: 78.6 → 0 (-78.6px) + y: 454.8 → 314.9 (-139.9px) + w: 402.1 → 1440 (+1037.9px) + h: 32 → 25 (-7px) + display: flex → block + width: 402.078px → 1440px + height: 32px → 25px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1) [selected] "Linear" + x: 79.6 → 0 (-79.6px) + y: 455.8 → 315.9 (-139.9px) + w: 200 → 52.9 (-147.1px) + h: 30 → 24 (-6px) + display: block → inline-block + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 200.031px → 52.9219px + height: 30px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 0px → 2px + border-top-style: none → outset + border-top-color: rgb(255, 255, 255) → rgb(0, 0, 0) + background-color: rgb(23, 105, 210) → rgb(240, 240, 240) + color: rgb(255, 255, 255) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2) "Radial" + x: 279.6 → 52.9 (-226.7px) + y: 455.8 → 315.9 (-139.9px) + w: 200 → 53.3 (-146.7px) + h: 30 → 24 (-6px) + display: block → inline-block + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 200.047px → 53.3281px + height: 30px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 0px → 2px + border-top-style: none → outset + border-top-color: rgb(109, 120, 131) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] + x: 58.6 → 0 (-58.6px) + y: 509.8 → 339.9 (-169.9px) + w: 442.1 → 1440 (+997.9px) + h: 129 → 98 (-31px) + padding-top: 22px → 0px + padding-right: 20px → 0px + padding-bottom: 22px → 0px + padding-left: 20px → 0px + width: 442.078px → 1440px + height: 129px → 98px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR STOPS" + x: 78.6 → 0 (-78.6px) + y: 531.8 → 341.9 (-189.9px) + w: 402.1 → 102.2 (-299.9px) + h: 12 → 20 (+8px) + display: flex → inline + justify-content: space-between → normal + margin-bottom: 12px → 0px + width: 402.078px → auto + height: 12px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) [color-row] + x: 78.6 → 0 (-78.6px) + y: 555.8 → 363.9 (-191.9px) + w: 402.1 → 1440 (+1037.9px) + h: 32 → 74 (+42px) + display: flex → block + align-items: center → normal + row-gap: 10px → normal + column-gap: 10px → normal + width: 402.078px → 1440px + height: 32px → 74px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) [color-field] + x: 78.6 → 0 (-78.6px) + y: 555.8 → 363.9 (-191.9px) + w: 183 → 1440 (+1257px) + h: 32 → 25 (-7px) + display: flex → block + align-items: center → normal + row-gap: 8px → normal + column-gap: 8px → normal + padding-right: 8px → 0px + padding-left: 8px → 0px + width: 183.031px → 1440px + height: 32px → 25px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span [swatch] + x: 87.6 → 0 (-87.6px) + y: 564.8 → 365.9 (-198.9px) + w: 14 → 0 (-14px) + h: 14 → 20 (+6px) + display: block → inline + width: 14px → auto + height: 14px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input + x: 109.6 → 0 (-109.6px) + y: 565.3 → 364.9 (-200.4px) + w: 143 → 157 (+14px) + h: 13 → 24 (+11px) + display: block → inline-block + padding-top: 0px → 1px + padding-right: 0px → 2px + padding-bottom: 0px → 1px + padding-left: 0px → 2px + width: 143.031px → 157px + height: 13px → 24px + min-height: auto → 0px + border-top-width: 0px → 2px + border-top-style: none → inset + border-top-color: rgb(23, 33, 43) → rgb(118, 118, 118) + background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) + background-position: 0px 0px → 0% 0% + color: rgb(23, 33, 43) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span [stop-arrow] "→" + x: 271.6 → 0 (-271.6px) + y: 559.8 → 390.9 (-168.9px) + h: 24 → 20 (-4px) + display: block → inline + width: 16px → auto + height: 24px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) [color-field] + x: 297.6 → 0 (-297.6px) + y: 555.8 → 412.9 (-142.9px) + w: 183 → 1440 (+1257px) + h: 32 → 25 (-7px) + display: flex → block + align-items: center → normal + row-gap: 8px → normal + column-gap: 8px → normal + padding-right: 8px → 0px + padding-left: 8px → 0px + width: 183.047px → 1440px + height: 32px → 25px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span [swatch] + x: 306.6 → 0 (-306.6px) + y: 564.8 → 414.9 (-149.9px) + w: 14 → 0 (-14px) + h: 14 → 20 (+6px) + display: block → inline + width: 14px → auto + height: 14px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input + x: 328.6 → 0 (-328.6px) + y: 565.3 → 413.9 (-151.4px) + w: 143 → 157 (+14px) + h: 13 → 24 (+11px) + display: block → inline-block + padding-top: 0px → 1px + padding-right: 0px → 2px + padding-bottom: 0px → 1px + padding-left: 0px → 2px + width: 143.047px → 157px + height: 13px → 24px + min-height: auto → 0px + border-top-width: 0px → 2px + border-top-style: none → inset + border-top-color: rgb(23, 33, 43) → rgb(118, 118, 118) + background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) + background-position: 0px 0px → 0% 0% + color: rgb(23, 33, 43) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) [gradient-bar] + x: 78.6 → 0 (-78.6px) + y: 601.8 → 437.9 (-163.9px) + w: 402.1 → 1440 (+1037.9px) + h: 14 → 0 (-14px) + margin-top: 14px → 0px + width: 402.078px → 1440px + height: 14px → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group] + x: 58.6 → 0 (-58.6px) + y: 638.8 → 437.9 (-200.9px) + w: 442.1 → 1440 (+997.9px) + h: 177 → 49 (-128px) + padding-top: 22px → 0px + padding-right: 20px → 0px + padding-bottom: 22px → 0px + padding-left: 20px → 0px + width: 442.078px → 1440px + height: 177px → 49px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label "DIRECTION" + x: 78.6 → 0 (-78.6px) + y: 660.8 → 439.9 (-220.9px) + w: 402.1 → 128.6 (-273.5px) + h: 12 → 20 (+8px) + display: flex → inline + justify-content: space-between → normal + margin-bottom: 12px → 0px + width: 402.078px → auto + height: 12px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output "135 °" + x: 448.2 → 88.5 (-359.7px) + y: 660.8 → 439.9 (-220.9px) + w: 32.5 → 40.1 (+7.6px) + h: 12 → 20 (+8px) + display: block → inline + width: 32.5px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input + x: 78.6 → 134.4 (+55.8px) + y: 685.8 → 439.9 (-245.9px) + margin-top: 0px → 2px + margin-right: 0px → 2px + margin-bottom: 0px → 2px + margin-left: 0px → 2px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) + background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) + color: rgb(23, 33, 43) → rgb(16, 16, 16) + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div [direction-grid] + x: 78.6 → 0 (-78.6px) + y: 722.8 → 461.9 (-260.9px) + w: 402.1 → 1440 (+1037.9px) + h: 70 → 25 (-45px) + display: grid → block + row-gap: 6px → normal + column-gap: 6px → normal + grid-template-columns: 96.0156px 96.0156px 96.0156px 96.0312px → none + grid-template-rows: 32px 32px → none + margin-top: 14px → 0px + width: 402.078px → 1440px + height: 70px → 25px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1) "0° →" + x: 78.6 → 0 (-78.6px) + y: 722.8 → 462.9 (-259.9px) + w: 96 → 46.7 (-49.3px) + h: 32 → 24 (-8px) + display: block → inline-block + padding-top: 8px → 1px + padding-bottom: 8px → 1px + width: 96.0156px → 46.7188px + height: 32px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 2px + border-top-style: solid → outset + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2) "45° ↗" + x: 180.6 → 46.7 (-133.9px) + y: 722.8 → 462.9 (-259.9px) + w: 96 → 51.1 (-44.9px) + h: 32 → 24 (-8px) + display: block → inline-block + padding-top: 8px → 1px + padding-bottom: 8px → 1px + width: 96.0156px → 51.1406px + height: 32px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 2px + border-top-style: solid → outset + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3) "90° ↑" + x: 282.6 → 97.9 (-184.7px) + y: 722.8 → 462.9 (-259.9px) + w: 96 → 52.3 (-43.7px) + h: 32 → 24 (-8px) + display: block → inline-block + padding-top: 8px → 1px + padding-bottom: 8px → 1px + width: 96.0156px → 52.3125px + height: 32px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 2px + border-top-style: solid → outset + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4) [selected] "135° ↖" + x: 384.6 → 150.2 (-234.4px) + y: 722.8 → 462.9 (-259.9px) + w: 96 → 59.2 (-36.8px) + h: 32 → 24 (-8px) + display: block → inline-block + padding-top: 8px → 1px + padding-bottom: 8px → 1px + width: 96.0312px → 59.1562px + height: 32px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 2px + border-top-style: solid → outset + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + background-color: rgb(23, 33, 43) → rgb(240, 240, 240) + color: rgb(238, 241, 244) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5) "180° ←" + x: 78.6 → 209.3 (+130.7px) + y: 760.8 → 462.9 (-297.9px) + w: 96 → 62.7 (-33.3px) + h: 32 → 24 (-8px) + display: block → inline-block + padding-top: 8px → 1px + padding-bottom: 8px → 1px + width: 96.0156px → 62.7188px + height: 32px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 2px + border-top-style: solid → outset + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6) "225° ↙" + x: 180.6 → 272 (+91.4px) + y: 760.8 → 462.9 (-297.9px) + w: 96 → 59.2 (-36.8px) + h: 32 → 24 (-8px) + display: block → inline-block + padding-top: 8px → 1px + padding-bottom: 8px → 1px + width: 96.0156px → 59.1562px + height: 32px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 2px + border-top-style: solid → outset + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7) "270° ↓" + x: 282.6 → 331.2 (+48.6px) + y: 760.8 → 462.9 (-297.9px) + w: 96 → 60.3 (-35.7px) + h: 32 → 24 (-8px) + display: block → inline-block + padding-top: 8px → 1px + padding-bottom: 8px → 1px + width: 96.0156px → 60.3125px + height: 32px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 2px + border-top-style: solid → outset + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8) "315° ↘" + x: 384.6 → 391.5 (+6.9px) + y: 760.8 → 462.9 (-297.9px) + w: 96 → 59.2 (-36.8px) + h: 32 → 24 (-8px) + display: block → inline-block + padding-top: 8px → 1px + padding-bottom: 8px → 1px + width: 96.0312px → 59.1562px + height: 32px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 2px + border-top-style: solid → outset + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group] + x: 58.6 → 0 (-58.6px) + y: 815.8 → 486.9 (-328.9px) + w: 442.1 → 1440 (+997.9px) + h: 93 → 24 (-69px) + padding-top: 22px → 0px + padding-right: 20px → 0px + padding-bottom: 22px → 0px + padding-left: 20px → 0px + width: 442.078px → 1440px + height: 93px → 24px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label "OPACITY" + x: 78.6 → 0 (-78.6px) + y: 837.8 → 488.9 (-348.9px) + w: 402.1 → 116.5 (-285.6px) + h: 12 → 20 (+8px) + display: flex → inline + justify-content: space-between → normal + margin-bottom: 12px → 0px + width: 402.078px → auto + height: 12px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output "100 %" + x: 448.2 → 69 (-379.2px) + y: 837.8 → 488.9 (-348.9px) + w: 32.5 → 47.4 (+14.9px) + h: 12 → 20 (+8px) + display: block → inline + width: 32.5px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input + x: 78.6 → 122.3 (+43.7px) + y: 862.8 → 488.9 (-373.9px) + margin-top: 0px → 2px + margin-right: 0px → 2px + margin-bottom: 0px → 2px + margin-left: 0px → 2px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) + background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) + color: rgb(23, 33, 43) → rgb(16, 16, 16) + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] + x: 58.6 → 0 (-58.6px) + y: 908.8 → 510.9 (-397.9px) + w: 442.1 → 1440 (+997.9px) + h: 50 → 25 (-25px) + display: flex → block + justify-content: space-between → normal + align-items: center → normal + padding-top: 16px → 0px + padding-right: 20px → 0px + padding-bottom: 16px → 0px + padding-left: 20px → 0px + width: 442.078px → 1440px + height: 50px → 25px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" + x: 78.6 → 0 (-78.6px) + y: 924.8 → 511.9 (-412.9px) + w: 52.4 → 67.3 (+14.9px) + h: 18 → 24 (+6px) + display: flex → inline-block + align-items: center → normal + row-gap: 7px → normal + column-gap: 7px → normal + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 52.3594px → 67.2969px + height: 18px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 0px → 2px + border-top-style: none → outset + border-top-color: rgb(23, 105, 210) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(23, 105, 210) → rgb(0, 0, 0) + font-size: 12px → 13.3333px + line-height: 18px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] + x: 78.6 → 8 (-70.6px) + y: 926.8 → 514.9 (-411.9px) + display: block → inline + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + color: rgb(23, 105, 210) → rgb(0, 0, 0) + font-size: 12px → 13.3333px + line-height: 18px → normal + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" + x: 339.7 → 71.1 (-268.6px) + y: 927.3 → 512.9 (-414.4px) + w: 141 → 159.4 (+18.4px) + h: 13 → 20 (+7px) + display: flex → inline + align-items: center → normal + row-gap: 8px → normal + column-gap: 8px → normal + width: 141.016px → auto + height: 13px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i + x: 339.7 → 71.1 (-268.6px) + y: 930.8 → 512.9 (-417.9px) + w: 6 → 0 (-6px) + h: 6 → 20 (+14px) + display: block → inline + width: 6px → auto + height: 6px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + border-radius: 50% → 0px + background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [gradient-preview] + x: 557.7 → 0 (-557.7px) + y: 324.8 → 535.9 (+211.1px) + w: 824.7 → 1440 (+615.3px) + h: 931.2 → 186 (-745.2px) + width: 824.734px → 1440px + height: 931.172px → 186px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] + x: 558.7 → 0 (-558.7px) + y: 325.8 → 535.9 (+210.1px) + w: 822.7 → 1440 (+617.3px) + h: 140 → 49 (-91px) + display: flex → block + justify-content: space-between → normal + align-items: center → normal + padding-top: 18px → 0px + padding-right: 20px → 0px + padding-bottom: 18px → 0px + padding-left: 20px → 0px + width: 822.734px → 1440px + height: 140px → 49px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) + x: 578.7 → 0 (-578.7px) + y: 372.3 → 535.9 (+163.6px) + w: 93.8 → 1440 (+1346.2px) + h: 46 → 24 (-22px) + width: 93.7812px → 1440px + height: 46px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "OUTPUT PREVIEW" + x: 578.7 → 0 (-578.7px) + y: 380.3 → 537.9 (+157.6px) + w: 93.8 → 133.6 (+39.8px) + h: 12 → 20 (+8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1.2px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "gradient.png" + x: 578.7 → 137.4 (-441.3px) + y: 401.3 → 537.9 (+136.6px) + w: 93.8 → 96.2 (+2.4px) + h: 17 → 20 (+3px) + display: block → inline + margin-top: 5px → 0px + width: 93.7812px → auto + height: 17px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 14px → 16px + font-weight: 600 → 700 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] + x: 1150.8 → 0 (-1150.8px) + y: 343.8 → 559.9 (+216.1px) + w: 210.6 → 1440 (+1229.4px) + h: 103 → 25 (-78px) + display: flex → block + flex-wrap: wrap → nowrap + justify-content: flex-end → normal + align-items: center → normal + row-gap: 10px → normal + column-gap: 10px → normal + width: 210.562px → 1440px + height: 103px → 25px + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [secondary-btn] "Copy CSS" + x: 1280.4 → 0 (-1280.4px) + y: 343.8 → 559.9 (+216.1px) + w: 81 → 91 (+10px) + h: 33 → 25 (-8px) + display: flex → inline-block + align-items: center → normal + row-gap: 8px → normal + column-gap: 8px → normal + padding-top: 8px → 1px + padding-bottom: 8px → 1px + width: 80.9844px → 91px + height: 33px → 25px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 2px + border-top-style: solid → outset + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] + x: 1287.4 → 8 (-1279.4px) + y: 352.8 → 562.9 (+210.1px) + display: block → inline + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 13.3333px + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download PNG" + x: 1150.8 → 94.8 (-1056px) + y: 404.8 → 559.9 (+155.1px) + w: 210.6 → 141.3 (-69.3px) + h: 42 → 25 (-17px) + display: flex → inline-block + justify-content: center → normal + align-items: center → normal + row-gap: 9px → normal + column-gap: 9px → normal + margin-top: 18px → 0px + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 210.562px → 141.297px + height: 42px → 25px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 0px → 2px + border-top-style: none → outset + border-top-color: rgb(255, 255, 255) → rgb(0, 0, 0) + background-color: rgb(23, 105, 210) → rgb(240, 240, 240) + color: rgb(255, 255, 255) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 13.3333px + white-space: nowrap → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] + x: 1196.3 → 102.8 (-1093.5px) + y: 418.3 → 562.9 (+144.6px) + display: block → inline + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + color: rgb(255, 255, 255) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 13.3333px + white-space: nowrap → normal + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-chevron-down lucide-icon] + x: 1301.9 → 214.1 (-1087.8px) + y: 418.8 → 563.9 (+145.1px) + display: block → inline + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + color: rgb(255, 255, 255) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 13.3333px + white-space: nowrap → normal + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [large-canvas] + x: 558.7 → 0 (-558.7px) + y: 465.8 → 584.9 (+119.1px) + w: 822.7 → 1440 (+617.3px) + h: 652.8 → 48 (-604.8px) + padding-top: 24px → 0px + padding-right: 24px → 0px + padding-bottom: 24px → 0px + padding-left: 24px → 0px + width: 822.734px → 1440px + height: 652.797px → 48px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + background-color: rgb(32, 42, 49) → rgba(0, 0, 0, 0) + background-image: linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%) → none + background-size: 28px 28px, 28px 28px, 28px 28px, 28px 28px → auto + background-position: 0px 0px, 0px 14px, 14px -14px, -14px 0px → 0% 0% + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div [gradient-art] + x: 582.7 → 0 (-582.7px) + y: 489.8 → 584.9 (+95.1px) + w: 774.7 → 1440 (+665.3px) + h: 604.8 → 48 (-556.8px) + display: grid → block + justify-content: center → normal + grid-template-columns: 92.375px → none + grid-template-rows: 82px 14px → none + width: 774.734px → 1440px + height: 604.797px → 48px + min-height: 604.8px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(255, 255, 255) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 12px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > div [art-mark] "PNG" + x: 935 → 0 (-935px) + y: 744.2 → 584.9 (-159.3px) + w: 70 → 1440 (+1370px) + h: 70 → 24 (-46px) + display: grid → block + align-items: center → normal + grid-template-columns: 68px → none + grid-template-rows: 68px → none + margin-bottom: 12px → 0px + width: 70px → 1440px + height: 70px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgba(255, 255, 255, 0.65) → rgb(23, 33, 43) + color: rgb(255, 255, 255) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > span "easy-png-tools" + x: 923.8 → 0 (-923.8px) + y: 826.2 → 610.9 (-215.3px) + w: 92.4 → 107.9 (+15.5px) + h: 14 → 20 (+6px) + display: block → inline + width: 92.375px → auto + height: 14px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(255, 255, 255) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 12px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [code-block] + x: 558.7 → 0 (-558.7px) + y: 1118.6 → 632.9 (-485.7px) + w: 822.7 → 1440 (+617.3px) + h: 136.4 → 89 (-47.4px) + padding-top: 16px → 0px + padding-right: 20px → 0px + padding-bottom: 16px → 0px + padding-left: 20px → 0px + width: 822.734px → 1440px + height: 136.375px → 89px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div + x: 578.7 → 0 (-578.7px) + y: 1134.6 → 632.9 (-501.7px) + w: 782.7 → 1440 (+657.3px) + display: flex → block + justify-content: space-between → normal + align-items: center → normal + width: 782.734px → 1440px + height: 26px → 25px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > span [label] "GENERATED CSS" + x: 578.7 → 0 (-578.7px) + y: 1141.6 → 634.9 (-506.7px) + w: 87.1 → 121.9 (+34.8px) + h: 12 → 20 (+8px) + display: block → inline + width: 87.0781px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1.2px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button [icon-btn] + x: 1335.4 → 125.7 (-1209.7px) + y: 1134.6 → 633.9 (-500.7px) + w: 26 → 30 (+4px) + h: 26 → 24 (-2px) + display: grid → inline-block + align-items: center → normal + grid-template-columns: 14px → none + grid-template-rows: 14px → none + padding-top: 6px → 1px + padding-bottom: 6px → 1px + width: 26px → 30px + height: 26px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 0px → 2px + border-top-style: none → outset + border-top-color: rgb(109, 120, 131) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button > svg [lucide lucide-copy lucide-icon] + x: 1341.4 → 133.7 (-1207.7px) + y: 1140.6 → 636.9 (-503.7px) + display: block → inline + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + color: rgb(109, 120, 131) → rgb(0, 0, 0) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > pre "background: linear-gradient(135deg, #176" + x: 578.7 → 0 (-578.7px) + y: 1172.6 → 673.9 (-498.7px) + w: 782.7 → 1440 (+657.3px) + h: 66.4 → 48 (-18.4px) + margin-top: 12px → 16px + margin-bottom: 0px → 16px + padding-top: 14px → 0px + padding-right: 14px → 0px + padding-bottom: 14px → 0px + padding-left: 14px → 0px + width: 782.734px → 1440px + height: 66.375px → 48px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + background-color: rgb(238, 241, 244) → rgba(0, 0, 0, 0) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → monospace + font-size: 12px → 16px + line-height: 19.2px → 24px + white-space: pre-wrap → pre + +body > main > footer [preview-footer] + y: 1328 → 737.9 (-590.1px) + row-gap: normal → 16px + column-gap: normal → 16px + height: 45px → 46px + letter-spacing: normal → 0.8px + +body > main > footer > span:nth-of-type(1) "easy-png-tools" + y: 1345 → 754.9 (-590.1px) + w: 117 → 142.8 (+25.8px) + display: flex → block + align-items: center → normal + row-gap: 7px → normal + column-gap: 7px → normal + width: 116.984px → 142.812px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: normal → 0.8px + +body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" + x: 141.6 → 159.6 (+18px) + y: 1345 → 754.9 (-590.1px) + w: 33 → 40.8 (+7.8px) + display: block → inline + width: 33px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-weight: 400 → 700 + letter-spacing: normal → 0.8px + +body > main > footer > span:nth-of-type(2) "© 2024" + x: 690.5 → 1341.6 (+651.1px) + y: 1345 → 754.9 (-590.1px) + w: 143 → 40.8 (-102.2px) + display: flex → block + align-items: center → normal + row-gap: 7px → normal + column-gap: 7px → normal + width: 142.953px → 40.8125px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: normal → 0.8px + +body >main >footer >span:nth-of-type(3) "© 2024" + ✗ present in reference, absent in project + +body >div + ✗ present in reference, absent in project + + +=== /preview/tools/remove-background-png (vs background-remover.html) — 111 differences === + +body + h: 1103.8 → 900 (-203.8px) + height: 1103.78px → 900px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main [preview-root] + h: 1103.8 → 900 (-203.8px) + height: 1103.78px → 900px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header [topbar] + position: static → sticky + top: auto → 0px + z-index: auto → 20 + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a [brand] + w: 291.8 → 311.6 (+19.8px) + width: 291.75px → 311.609px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) + +body > main > header > a > span:nth-of-type(2) "easy-png-tools" + w: 107.8 → 117.6 (+9.8px) + width: 107.766px → 117.609px + height: 17px → 18px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER" + x: 215.4 → 225.2 (+9.8px) + w: 134 → 144 (+10px) + width: 133.984px → 144px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + +body > main > header > div [top-actions] + x: 1104.5 → 1091 (-13.5px) + w: 277.9 → 291.4 (+13.5px) + width: 277.938px → 291.406px + height: 29px → 28px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > div > span [status] "AUTO PROCESSING" + x: 1104.5 → 1091 (-13.5px) + w: 107.5 → 117 (+9.5px) + width: 107.484px → 117px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > header > div > span > i [status-dot] + x: 1104.5 → 1091 (-13.5px) + w: 6 → 8 (+2px) + h: 6 → 8 (+2px) + width: 6px → 8px + height: 6px → 8px + box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + x: 1228 → 1224 (-4px) + display: grid → flex + justify-content: normal → center + grid-template-columns: 17px → none + grid-template-rows: 17px → none + width: 29px → 28px + height: 29px → 28px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + x: 1234 → 1230 (-4px) + width: 17px → 16px + height: 17px → 16px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + x: 1273 → 1268 (-5px) + display: grid → flex + justify-content: normal → center + grid-template-columns: 17px → none + grid-template-rows: 17px → none + width: 29px → 28px + height: 29px → 28px + background-position: 0px 0px → 0% 0% + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + x: 1279 → 1274 (-5px) + width: 17px → 16px + height: 17px → 16px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 16px → 13.3333px + line-height: 24px → normal + vertical-align: middle → baseline + +body > main > header > div > div [lang] + x: 1318 → 1312 (-6px) + w: 64.5 → 70.4 (+5.9px) + align-items: center → normal + width: 64.4531px → 70.4062px + height: 26px → 27px + overflow: visible → hidden + border-radius: 0px → 4px + +body > main > header > div > div > span [lang-div] "/" + x: 1348 → 1344.2 (-3.8px) + y: 19.5 → 25 (+5.5px) + w: 4.5 → 6 (+1.5px) + h: 24 → 13 (-11px) + align-self: auto → center + width: 4.45312px → 6px + height: 24px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: rgb(23, 33, 43) → rgb(109, 120, 131) + font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace + font-size: 16px → 10px + line-height: 24px → normal + +body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" + x: 1352.4 → 1350.2 (-2.2px) + w: 29 → 31.2 (+2.2px) + width: 29px → 31.2031px + height: 24px → 25px + background-position: 0px 0px → 0% 0% + letter-spacing: normal → 0.6px + +body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" + x: 1319 → 1313 (-6px) + w: 29 → 31.2 (+2.2px) + width: 29px → 31.2031px + height: 24px → 25px + letter-spacing: normal → 0.6px + +body > main > header > nav [nav] + x: 779.5 → 553.8 (-225.7px) + y: 25.5 → 24 (-1.5px) + w: 296.9 → 376.6 (+79.7px) + h: 12 → 15 (+3px) + row-gap: 22px → 18px + column-gap: 22px → 18px + margin-right: 28px → 0px + margin-left: 430.188px → 24px + width: 296.938px → 376.594px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > header > nav > a:nth-of-type(1) "Workspace" + x: 779.5 → 553.8 (-225.7px) + y: 25.5 → 24 (-1.5px) + w: 49.5 → 69.1 (+19.6px) + h: 12 → 15 (+3px) + width: 49.4844px → 69.125px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(2) "Catalog" + x: 851 → 640.9 (-210.1px) + y: 25.5 → 24 (-1.5px) + w: 38.5 → 53.8 (+15.3px) + h: 12 → 15 (+3px) + width: 38.5px → 53.7656px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(3) "Gradient" + x: 911.5 → 712.7 (-198.8px) + y: 25.5 → 24 (-1.5px) + w: 44 → 61.5 (+17.5px) + h: 12 → 15 (+3px) + width: 43.9844px → 61.4531px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > header > nav > a:nth-of-type(4) "Background remover" + x: 977.5 → 792.2 (-185.3px) + y: 25.5 → 24 (-1.5px) + w: 99 → 138.3 (+39.3px) + h: 12 → 15 (+3px) + width: 98.9688px → 138.25px + height: 12px → 15px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: rgb(23, 105, 210) → rgb(109, 120, 131) + font-size: 10px → 12px + letter-spacing: normal → 0.48px + white-space: nowrap → normal + +body > main > div [tool-page] + h: 994.8 → 752.9 (-241.9px) + padding-top: 60px → 0px + padding-right: 57.6px → 0px + padding-bottom: 72px → 0px + padding-left: 57.6px → 0px + height: 994.781px → 752.875px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" + x: 57.6 → 0 (-57.6px) + y: 124 → 64 (-60px) + w: 1324.8 → 1440 (+115.2px) + h: 12 → 24 (+12px) + margin-bottom: 18px → 0px + width: 1324.81px → 1440px + height: 12px → 24px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1.2px → normal + +body > main > div > div:nth-of-type(1) > span "/" + x: 165.1 → 137.3 (-27.8px) + y: 124 → 66 (-58px) + w: 13.4 → 6.1 (-7.3px) + h: 12 → 20 (+8px) + margin-right: 7px → 0px + margin-left: 7px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1.2px → normal + +body > main > div > div:nth-of-type(2) [tool-title] + x: 57.6 → 0 (-57.6px) + y: 154 → 109.4 (-44.6px) + w: 1324.8 → 1440 (+115.2px) + h: 122.8 → 133.4 (+10.6px) + display: flex → block + justify-content: space-between → normal + align-items: end → normal + row-gap: 32px → normal + column-gap: 32px → normal + margin-bottom: 48px → 0px + width: 1324.81px → 1440px + height: 122.781px → 133.438px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(2) > div + x: 57.6 → 0 (-57.6px) + y: 154 → 109.4 (-44.6px) + w: 550 → 1440 (+890px) + h: 122.8 → 93.4 (-29.4px) + width: 550px → 1440px + height: 122.781px → 93.4375px + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(2) > div > h1 "Remove background." + x: 57.6 → 0 (-57.6px) + y: 154 → 109.4 (-44.6px) + w: 550 → 1440 (+890px) + h: 57.6 → 48 (-9.6px) + margin-top: 0px → 21.44px + margin-bottom: 14px → 21.44px + width: 550px → 1440px + height: 57.5938px → 48px + max-width: 700px → none + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-size: 57.6px → 32px + font-weight: 650 → 700 + line-height: 57.6px → 48px + letter-spacing: -3.456px → normal + +body > main > div > div:nth-of-type(2) > div > p [lede] "Select a background color and tune the e" + x: 57.6 → 0 (-57.6px) + y: 225.6 → 178.9 (-46.7px) + w: 550 → 1440 (+890px) + h: 51.2 → 24 (-27.2px) + margin-top: 0px → 16px + margin-bottom: 0px → 16px + width: 550px → 1440px + height: 51.1875px → 24px + max-width: 550px → none + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + line-height: 25.6px → 24px + +body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" + x: 1302.4 → 0 (-1302.4px) + y: 264.8 → 220.9 (-43.9px) + w: 80 → 106.1 (+26.1px) + h: 12 → 20 (+8px) + display: flex → inline + align-items: center → normal + row-gap: 8px → normal + column-gap: 8px → normal + width: 79.9844px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(37, 169, 106) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + white-space: nowrap → normal + +body > main > div > div:nth-of-type(2) > span > i + x: 1302.4 → 0 (-1302.4px) + y: 267.8 → 220.9 (-46.9px) + w: 6 → 0 (-6px) + h: 6 → 20 (+14px) + display: block → inline + width: 6px → auto + height: 6px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + border-radius: 50% → 0px + background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0) + color: rgb(37, 169, 106) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + white-space: nowrap → normal + +body > main > div > div:nth-of-type(3) [remover-layout] + x: 57.6 → 0 (-57.6px) + y: 324.8 → 242.9 (-81.9px) + w: 1324.8 → 1440 (+115.2px) + h: 662 → 574 (-88px) + display: grid → block + align-items: start → normal + row-gap: 56px → normal + column-gap: 56px → normal + grid-template-columns: 393.328px 875.484px → none + grid-template-rows: 662px → none + width: 1324.81px → 1440px + height: 662px → 574px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [settings-panel] + x: 57.6 → 0 (-57.6px) + y: 324.8 → 242.9 (-81.9px) + w: 393.3 → 1440 (+1046.7px) + h: 559 → 357 (-202px) + width: 393.328px → 1440px + height: 559px → 357px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] + x: 58.6 → 0 (-58.6px) + y: 325.8 → 242.9 (-82.9px) + w: 391.3 → 1440 (+1048.7px) + h: 83 → 48 (-35px) + display: flex → block + justify-content: space-between → normal + align-items: center → normal + padding-top: 18px → 0px + padding-right: 20px → 0px + padding-bottom: 18px → 0px + padding-left: 20px → 0px + width: 391.328px → 1440px + height: 83px → 48px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div + x: 78.6 → 0 (-78.6px) + y: 343.8 → 242.9 (-100.9px) + w: 146.3 → 1440 (+1293.7px) + h: 46 → 24 (-22px) + width: 146.25px → 1440px + height: 46px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "REMOVER SETTINGS" + x: 78.6 → 0 (-78.6px) + y: 351.8 → 244.9 (-106.9px) + w: 107.2 → 152.1 (+44.9px) + h: 12 → 20 (+8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1.2px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure detection" + x: 78.6 → 155.9 (+77.3px) + y: 372.8 → 244.9 (-127.9px) + w: 146.3 → 148.1 (+1.8px) + h: 17 → 20 (+3px) + display: block → inline + margin-top: 5px → 0px + width: 146.25px → auto + height: 17px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 14px → 16px + font-weight: 600 → 700 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 02" + x: 383 → 0 (-383px) + y: 360.8 → 268.9 (-91.9px) + w: 46.9 → 62.5 (+15.6px) + h: 12 → 20 (+8px) + display: block → inline + width: 46.8906px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1.2px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] + x: 58.6 → 0 (-58.6px) + y: 408.8 → 290.9 (-117.9px) + w: 391.3 → 1440 (+1048.7px) + h: 123 → 76 (-47px) + padding-top: 22px → 0px + padding-right: 20px → 0px + padding-bottom: 22px → 0px + padding-left: 20px → 0px + width: 391.328px → 1440px + height: 123px → 76px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "BACKGROUND COLOR" + x: 78.6 → 0 (-78.6px) + y: 430.8 → 292.9 (-137.9px) + w: 351.3 → 159.4 (-191.9px) + h: 12 → 20 (+8px) + display: flex → inline + justify-content: space-between → normal + margin-bottom: 12px → 0px + width: 351.328px → auto + height: 12px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [color-field] + x: 78.6 → 0 (-78.6px) + y: 454.8 → 314.9 (-139.9px) + w: 351.3 → 1440 (+1088.7px) + h: 32 → 28 (-4px) + display: flex → block + align-items: center → normal + row-gap: 8px → normal + column-gap: 8px → normal + padding-right: 8px → 0px + padding-left: 8px → 0px + width: 351.328px → 1440px + height: 32px → 28px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span [swatch] + x: 87.6 → 0 (-87.6px) + y: 463.8 → 319.9 (-143.9px) + w: 14 → 0 (-14px) + h: 14 → 20 (+6px) + display: block → inline + width: 14px → auto + height: 14px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(1) + x: 109.6 → 0 (-109.6px) + y: 464.3 → 318.9 (-145.4px) + w: 151.7 → 157 (+5.3px) + h: 13 → 24 (+11px) + display: block → inline-block + padding-top: 0px → 1px + padding-right: 0px → 2px + padding-bottom: 0px → 1px + padding-left: 0px → 2px + width: 151.656px → 157px + height: 13px → 24px + min-height: auto → 0px + border-top-width: 0px → 2px + border-top-style: none → inset + border-top-color: rgb(23, 33, 43) → rgb(118, 118, 118) + background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) + background-position: 0px 0px → 0% 0% + color: rgb(23, 33, 43) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(2) [native-color] + x: 269.3 → 160.8 (-108.5px) + y: 457.3 → 314.9 (-142.4px) + w: 151.7 → 50 (-101.7px) + display: block → inline-block + padding-top: 0px → 1px + padding-right: 0px → 2px + padding-bottom: 0px → 1px + padding-left: 0px → 2px + width: 151.672px → 50px + min-height: auto → 0px + border-top-width: 0px → 1px + border-top-style: none → solid + border-top-color: rgb(23, 33, 43) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(23, 33, 43) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 13.3333px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background" + x: 78.6 → 0 (-78.6px) + y: 496.8 → 342.9 (-153.9px) + w: 351.3 → 1440 (+1088.7px) + h: 12 → 24 (+12px) + display: flex → block + justify-content: flex-start → normal + row-gap: 8px → normal + column-gap: 8px → normal + margin-top: 10px → 0px + width: 351.328px → 1440px + height: 12px → 24px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span + x: 78.6 → 0 (-78.6px) + y: 496.8 → 344.9 (-151.9px) + w: 9 → 0 (-9px) + h: 9 → 20 (+11px) + display: block → inline + width: 9px → auto + height: 9px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] + x: 58.6 → 0 (-58.6px) + y: 531.8 → 366.9 (-164.9px) + w: 391.3 → 1440 (+1048.7px) + h: 115 → 48 (-67px) + padding-top: 22px → 0px + padding-right: 20px → 0px + padding-bottom: 22px → 0px + padding-left: 20px → 0px + width: 391.328px → 1440px + height: 115px → 48px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR SIMILARITY" + x: 78.6 → 0 (-78.6px) + y: 553.8 → 368.9 (-184.9px) + w: 351.3 → 184.4 (-166.9px) + h: 12 → 20 (+8px) + display: flex → inline + justify-content: space-between → normal + margin-bottom: 12px → 0px + width: 351.328px → auto + height: 12px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label > output "72 %" + x: 403.9 → 146.6 (-257.3px) + y: 553.8 → 368.9 (-184.9px) + w: 26 → 37.8 (+11.8px) + h: 12 → 20 (+8px) + display: block → inline + width: 26px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > input + x: 78.6 → 190.2 (+111.6px) + y: 578.8 → 368.9 (-209.9px) + margin-top: 0px → 2px + margin-right: 0px → 2px + margin-bottom: 0px → 2px + margin-left: 0px → 2px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) + background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) + color: rgb(23, 33, 43) → rgb(16, 16, 16) + font-size: 16px → 13.3333px + line-height: 24px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div [range-hints] + x: 78.6 → 0 (-78.6px) + y: 611.8 → 390.9 (-220.9px) + w: 351.3 → 1440 (+1088.7px) + h: 12 → 24 (+12px) + display: flex → block + justify-content: space-between → normal + margin-top: 10px → 0px + width: 351.328px → 1440px + height: 12px → 24px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(1) "strict edges" + x: 78.6 → 0 (-78.6px) + y: 611.8 → 392.9 (-218.9px) + w: 66 → 83.6 (+17.6px) + h: 12 → 20 (+8px) + display: block → inline + width: 65.9844px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(2) "more removal" + x: 363.9 → 87.4 (-276.5px) + y: 611.8 → 392.9 (-218.9px) + w: 66 → 99.3 (+33.3px) + h: 12 → 20 (+8px) + display: block → inline + width: 65.9844px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group toggle-group] + x: 58.6 → 0 (-58.6px) + y: 646.8 → 414.9 (-231.9px) + w: 391.3 → 1440 (+1048.7px) + h: 93 → 64 (-29px) + padding-top: 22px → 0px + padding-right: 20px → 0px + padding-bottom: 22px → 0px + padding-left: 20px → 0px + width: 391.328px → 1440px + height: 93px → 64px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label + x: 78.6 → 0 (-78.6px) + y: 668.8 → 416.9 (-251.9px) + w: 351.3 → 147.6 (-203.7px) + h: 18 → 20 (+2px) + display: flex → inline + justify-content: space-between → normal + align-items: center → normal + margin-bottom: 12px → 0px + width: 351.328px → auto + height: 18px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > span "OUTER COLOR ONLY" + x: 78.6 → 0 (-78.6px) + y: 671.8 → 416.9 (-254.9px) + w: 104 → 147.6 (+43.6px) + h: 12 → 20 (+8px) + display: block → inline + width: 103.969px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > b [on toggle] + x: 397.9 → 147.6 (-250.3px) + y: 668.8 → 416.9 (-251.9px) + w: 32 → 0 (-32px) + h: 18 → 20 (+2px) + display: block → inline + position: relative → static + top: 0px → auto + right: 0px → auto + bottom: 0px → auto + left: 0px → auto + width: 32px → auto + height: 18px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(23, 105, 210) → rgb(23, 33, 43) + background-color: rgb(23, 105, 210) → rgba(0, 0, 0, 0) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(4) >label >input + ✗ present in reference, absent in project + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > p "Only remove connected background pixels " + x: 78.6 → 0 (-78.6px) + y: 698.8 → 454.9 (-243.9px) + w: 351.3 → 1440 (+1088.7px) + h: 18 → 24 (+6px) + margin-top: 8px → 16px + margin-bottom: 0px → 16px + width: 351.328px → 1440px + height: 18px → 24px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-size: 12px → 16px + line-height: 18px → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group toggle-group] + x: 58.6 → 0 (-58.6px) + y: 739.8 → 494.9 (-244.9px) + w: 391.3 → 1440 (+1048.7px) + h: 93 → 64 (-29px) + padding-top: 22px → 0px + padding-right: 20px → 0px + padding-bottom: 22px → 0px + padding-left: 20px → 0px + width: 391.328px → 1440px + height: 93px → 64px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label + x: 78.6 → 0 (-78.6px) + y: 761.8 → 496.9 (-264.9px) + w: 351.3 → 92.7 (-258.6px) + h: 18 → 20 (+2px) + display: flex → inline + justify-content: space-between → normal + align-items: center → normal + margin-bottom: 12px → 0px + width: 351.328px → auto + height: 18px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > span "SHOW MASK" + x: 78.6 → 0 (-78.6px) + y: 764.8 → 496.9 (-267.9px) + w: 58.5 → 92.7 (+34.2px) + h: 12 → 20 (+8px) + display: block → inline + width: 58.4844px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > b [toggle] + x: 397.9 → 92.7 (-305.2px) + y: 761.8 → 496.9 (-264.9px) + w: 32 → 0 (-32px) + h: 18 → 20 (+2px) + display: block → inline + position: relative → static + top: 0px → auto + right: 0px → auto + bottom: 0px → auto + left: 0px → auto + width: 32px → auto + height: 18px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1px → normal + +body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(5) >label >input + ✗ present in reference, absent in project + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > p "Preview the detected transparency mask." + x: 78.6 → 0 (-78.6px) + y: 791.8 → 534.9 (-256.9px) + w: 351.3 → 1440 (+1088.7px) + h: 18 → 24 (+6px) + margin-top: 8px → 16px + margin-bottom: 0px → 16px + width: 351.328px → 1440px + height: 18px → 24px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-size: 12px → 16px + line-height: 18px → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] + x: 58.6 → 0 (-58.6px) + y: 832.8 → 574.9 (-257.9px) + w: 391.3 → 1440 (+1048.7px) + h: 50 → 25 (-25px) + display: flex → block + justify-content: space-between → normal + align-items: center → normal + padding-top: 16px → 0px + padding-right: 20px → 0px + padding-bottom: 16px → 0px + padding-left: 20px → 0px + width: 391.328px → 1440px + height: 50px → 25px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" + x: 78.6 → 0 (-78.6px) + y: 848.8 → 575.9 (-272.9px) + w: 52.4 → 67.3 (+14.9px) + h: 18 → 24 (+6px) + display: flex → inline-block + align-items: center → normal + row-gap: 7px → normal + column-gap: 7px → normal + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 52.3594px → 67.2969px + height: 18px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 0px → 2px + border-top-style: none → outset + border-top-color: rgb(23, 105, 210) → rgb(0, 0, 0) + background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) + background-position: 0px 0px → 0% 0% + color: rgb(23, 105, 210) → rgb(0, 0, 0) + font-size: 12px → 13.3333px + line-height: 18px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] + x: 78.6 → 8 (-70.6px) + y: 850.8 → 578.9 (-271.9px) + display: block → inline + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + color: rgb(23, 105, 210) → rgb(0, 0, 0) + font-size: 12px → 13.3333px + line-height: 18px → normal + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" + x: 288.9 → 71.1 (-217.8px) + y: 851.3 → 576.9 (-274.4px) + w: 141 → 159.4 (+18.4px) + h: 13 → 20 (+7px) + display: flex → inline + align-items: center → normal + row-gap: 8px → normal + column-gap: 8px → normal + width: 141.016px → auto + height: 13px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i + x: 288.9 → 71.1 (-217.8px) + y: 854.8 → 576.9 (-277.9px) + w: 6 → 0 (-6px) + h: 6 → 20 (+14px) + display: block → inline + width: 6px → auto + height: 6px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + border-radius: 50% → 0px + background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [remover-preview] + x: 506.9 → 0 (-506.9px) + y: 324.8 → 599.9 (+275.1px) + w: 875.5 → 1440 (+564.5px) + h: 662 → 217 (-445px) + width: 875.484px → 1440px + height: 662px → 217px + min-height: auto → 0px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] + x: 507.9 → 0 (-507.9px) + y: 325.8 → 599.9 (+274.1px) + w: 873.5 → 1440 (+566.5px) + h: 121 → 49 (-72px) + display: flex → block + justify-content: space-between → normal + align-items: center → normal + padding-top: 18px → 0px + padding-right: 20px → 0px + padding-bottom: 18px → 0px + padding-left: 20px → 0px + width: 873.484px → 1440px + height: 121px → 49px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) + x: 527.9 → 0 (-527.9px) + y: 362.8 → 599.9 (+237.1px) + w: 107.8 → 1440 (+1332.2px) + h: 46 → 24 (-22px) + width: 107.766px → 1440px + height: 46px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "SOURCE / RESULT" + x: 527.9 → 0 (-527.9px) + y: 370.8 → 601.9 (+231.1px) + w: 100.5 → 130.3 (+29.8px) + h: 12 → 20 (+8px) + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + letter-spacing: 1.2px → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "comparison.png" + x: 527.9 → 134 (-393.9px) + y: 391.8 → 601.9 (+210.1px) + w: 107.8 → 121.1 (+13.3px) + h: 17 → 20 (+3px) + display: block → inline + margin-top: 5px → 0px + width: 107.766px → auto + height: 17px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 14px → 16px + font-weight: 600 → 700 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] + x: 1168.2 → 0 (-1168.2px) + y: 343.8 → 623.9 (+280.1px) + w: 193.2 → 1440 (+1246.8px) + h: 84 → 25 (-59px) + display: flex → block + flex-wrap: wrap → nowrap + justify-content: flex-end → normal + align-items: center → normal + row-gap: 10px → normal + column-gap: 10px → normal + width: 193.203px → 1440px + height: 84px → 25px + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [processed] "processed" + x: 1292.9 → 0 (-1292.9px) + y: 343.8 → 625.9 (+282.1px) + w: 68.5 → 92.1 (+23.6px) + h: 14 → 20 (+6px) + display: flex → inline + align-items: center → normal + row-gap: 5px → normal + column-gap: 5px → normal + width: 68.4844px → auto + height: 14px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(37, 169, 106) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] + x: 1292.9 → 0 (-1292.9px) + y: 343.8 → 627.9 (+284.1px) + display: block → inline + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(37, 169, 106) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [download-btn] "Download result" + x: 1168.2 → 95.9 (-1072.3px) + y: 385.8 → 623.9 (+238.1px) + w: 193.2 → 131.8 (-61.4px) + h: 42 → 25 (-17px) + display: flex → inline-block + justify-content: center → normal + align-items: center → normal + row-gap: 9px → normal + column-gap: 9px → normal + margin-top: 18px → 0px + padding-top: 0px → 1px + padding-right: 0px → 6px + padding-bottom: 0px → 1px + padding-left: 0px → 6px + width: 193.203px → 131.828px + height: 42px → 25px + min-width: auto → 0px + min-height: auto → 0px + border-top-width: 0px → 2px + border-top-style: none → outset + border-top-color: rgb(255, 255, 255) → rgb(0, 0, 0) + background-color: rgb(23, 105, 210) → rgb(240, 240, 240) + color: rgb(255, 255, 255) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 13.3333px + white-space: nowrap → normal + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-download lucide-icon] + x: 1207.4 → 103.9 (-1103.5px) + y: 399.3 → 626.9 (+227.6px) + display: block → inline + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) + color: rgb(255, 255, 255) → rgb(0, 0, 0) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 11px → 13.3333px + white-space: nowrap → normal + vertical-align: middle → baseline + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [comparison-grid] + x: 507.9 → 0 (-507.9px) + y: 446.8 → 648.9 (+202.1px) + w: 873.5 → 1440 (+566.5px) + h: 494 → 144 (-350px) + display: grid → block + row-gap: 18px → normal + column-gap: 18px → normal + grid-template-columns: 407.734px 407.75px → none + grid-template-rows: 454px → none + padding-top: 20px → 0px + padding-right: 20px → 0px + padding-bottom: 20px → 0px + padding-left: 20px → 0px + width: 873.484px → 1440px + height: 494px → 144px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-card] + x: 527.9 → 0 (-527.9px) + y: 466.8 → 648.9 (+182.1px) + w: 407.7 → 1440 (+1032.3px) + h: 454 → 72 (-382px) + width: 407.734px → 1440px + height: 454px → 72px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [image-label] + x: 527.9 → 0 (-527.9px) + y: 466.8 → 648.9 (+182.1px) + w: 407.7 → 1440 (+1032.3px) + h: 12 → 24 (+12px) + display: flex → block + justify-content: space-between → normal + margin-bottom: 10px → 0px + width: 407.734px → 1440px + height: 12px → 24px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span "SOURCE" + x: 527.9 → 0 (-527.9px) + y: 466.8 → 650.9 (+184.1px) + w: 33 → 60.8 (+27.8px) + h: 12 → 20 (+8px) + display: block → inline + width: 33px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > b "original.png" + x: 869.7 → 60.8 (-808.9px) + y: 466.8 → 650.9 (+184.1px) + w: 66 → 90.2 (+24.2px) + h: 12 → 20 (+8px) + display: block → inline + width: 65.9844px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + font-weight: 400 → 700 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [remover-canvas source-canvas] + x: 527.9 → 0 (-527.9px) + y: 488.8 → 672.9 (+184.1px) + w: 407.7 → 1440 (+1032.3px) + h: 432 → 48 (-384px) + display: grid → block + position: relative → static + top: 0px → auto + right: 0px → auto + bottom: 0px → auto + left: 0px → auto + align-items: center → normal + grid-template-columns: 405.734px → none + grid-template-rows: 430px → none + width: 407.734px → 1440px + height: 432px → 48px + min-height: 432px → 0px + overflow: hidden → visible + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + background-color: rgb(232, 238, 242) → rgba(0, 0, 0, 0) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [subject subject-source] + x: 574.2 → 0 (-574.2px) + y: 550.9 → 672.9 (+122px) + w: 315.1 → 1440 (+1124.9px) + h: 307.7 → 24 (-283.7px) + display: grid → block + align-items: center → normal + grid-template-columns: 300.234px → none + grid-template-rows: 292.391px → none + width: 300.234px → 1440px + height: 292.391px → 24px + min-width: auto → 0px + min-height: auto → 0px + transform: matrix(0.99863, -0.052336, 0.052336, 0.99863, 0, 0) → none + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 14px → 16px + font-weight: 600 → 400 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > span "OBJECT" + x: 708.3 → 0 (-708.3px) + y: 695.1 → 674.9 (-20.2px) + w: 47 → 58.2 (+11.2px) + display: block → inline + width: 46.1875px → auto + height: 17px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 14px → 16px + font-weight: 600 → 400 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" + x: 875.2 → 0 (-875.2px) + y: 900.8 → 698.9 (-201.9px) + w: 49.5 → 84.4 (+34.9px) + h: 10 → 20 (+10px) + display: block → inline + position: absolute → static + top: 411px → auto + right: 10px → auto + bottom: 9px → auto + left: 346.25px → auto + width: 49.4844px → auto + height: 10px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 9px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [image-card] + x: 953.7 → 0 (-953.7px) + y: 466.8 → 720.9 (+254.1px) + w: 407.8 → 1440 (+1032.2px) + h: 454 → 72 (-382px) + width: 407.75px → 1440px + height: 454px → 72px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-label] + x: 953.7 → 0 (-953.7px) + y: 466.8 → 720.9 (+254.1px) + w: 407.8 → 1440 (+1032.2px) + h: 12 → 24 (+12px) + display: flex → block + justify-content: space-between → normal + margin-bottom: 10px → 0px + width: 407.75px → 1440px + height: 12px → 24px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > span "RESULT" + x: 953.7 → 0 (-953.7px) + y: 466.8 → 722.9 (+256.1px) + w: 33 → 55.8 (+22.8px) + h: 12 → 20 (+8px) + display: block → inline + width: 33px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(23, 105, 210) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > b "removed-bg.png" + x: 1284.4 → 55.8 (-1228.6px) + y: 466.8 → 722.9 (+256.1px) + w: 77 → 123.9 (+46.9px) + h: 12 → 20 (+8px) + display: block → inline + width: 76.9844px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + font-weight: 400 → 700 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [remover-canvas] + x: 953.7 → 0 (-953.7px) + y: 488.8 → 744.9 (+256.1px) + w: 407.8 → 1440 (+1032.2px) + h: 432 → 48 (-384px) + display: grid → block + position: relative → static + top: 0px → auto + right: 0px → auto + bottom: 0px → auto + left: 0px → auto + align-items: center → normal + grid-template-columns: 405.75px → none + grid-template-rows: 430px → none + width: 407.75px → 1440px + height: 432px → 48px + min-height: 432px → 0px + overflow: hidden → visible + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [subject] + x: 1007.4 → 0 (-1007.4px) + y: 558.6 → 744.9 (+186.3px) + w: 300.3 → 1440 (+1139.7px) + h: 292.4 → 24 (-268.4px) + display: grid → block + align-items: center → normal + grid-template-columns: 300.25px → none + grid-template-rows: 292.391px → none + width: 300.25px → 1440px + height: 292.391px → 24px + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 14px → 16px + font-weight: 600 → 400 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span "PNG" + x: 1146 → 0 (-1146px) + y: 696.3 → 746.9 (+50.6px) + w: 23.1 → 32.1 (+9px) + h: 17 → 20 (+3px) + display: block → inline + width: 23.0938px → auto + height: 17px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 14px → 16px + font-weight: 600 → 400 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" + x: 1300.9 → 0 (-1300.9px) + y: 900.8 → 770.9 (-129.9px) + w: 49.5 → 84.4 (+34.9px) + h: 10 → 20 (+10px) + display: block → inline + position: absolute → static + top: 411px → auto + right: 10px → auto + bottom: 9px → auto + left: 346.266px → auto + width: 49.4844px → auto + height: 10px → auto + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 9px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [result-meta] + x: 507.9 → 0 (-507.9px) + y: 940.8 → 792.9 (-147.9px) + w: 873.5 → 1440 (+566.5px) + h: 45 → 24 (-21px) + display: flex → block + row-gap: 24px → normal + column-gap: 24px → normal + padding-top: 16px → 0px + padding-right: 20px → 0px + padding-bottom: 16px → 0px + padding-left: 20px → 0px + width: 873.484px → 1440px + height: 45px → 24px + border-top-width: 1px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) "FORMAT" + x: 527.9 → 0 (-527.9px) + y: 957.8 → 794.9 (-162.9px) + w: 77.5 → 124.8 (+47.3px) + h: 12 → 20 (+8px) + display: block → inline + width: 77.5px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) > b "PNG-24" + x: 572.4 → 65.4 (-507px) + y: 957.8 → 794.9 (-162.9px) + w: 33 → 59.4 (+26.4px) + h: 12 → 20 (+8px) + margin-left: 6px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + font-weight: 600 → 700 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) "ALPHA" + x: 629.4 → 128.6 (-500.8px) + y: 957.8 → 794.9 (-162.9px) + w: 77.5 → 125.6 (+48.1px) + h: 12 → 20 (+8px) + display: block → inline + width: 77.5px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) > b "ENABLED" + x: 668.4 → 181.9 (-486.5px) + y: 957.8 → 794.9 (-162.9px) + w: 38.5 → 72.3 (+33.8px) + h: 12 → 20 (+8px) + margin-left: 6px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + font-weight: 600 → 700 + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) "SIMILARITY" + x: 730.9 → 258 (-472.9px) + y: 957.8 → 794.9 (-162.9px) + w: 88.5 → 131.3 (+42.8px) + h: 12 → 20 (+8px) + display: block → inline + width: 88.4844px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + color: rgb(109, 120, 131) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + line-height: normal → 24px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) > b "72 %" + x: 797.4 → 350.7 (-446.7px) + y: 957.8 → 794.9 (-162.9px) + w: 22 → 38.6 (+16.6px) + h: 12 → 20 (+8px) + margin-left: 6px → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif + font-size: 10px → 16px + font-weight: 600 → 700 + line-height: normal → 24px + +body > main > footer [preview-footer] + y: 1058.8 → 816.9 (-241.9px) + row-gap: normal → 16px + column-gap: normal → 16px + height: 45px → 46px + letter-spacing: normal → 0.8px + +body > main > footer > span:nth-of-type(1) "easy-png-tools" + y: 1075.8 → 833.9 (-241.9px) + w: 117 → 142.8 (+25.8px) + display: flex → block + align-items: center → normal + row-gap: 7px → normal + column-gap: 7px → normal + width: 116.984px → 142.812px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: normal → 0.8px + +body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" + x: 141.6 → 159.6 (+18px) + y: 1075.8 → 833.9 (-241.9px) + w: 33 → 40.8 (+7.8px) + display: block → inline + width: 33px → auto + height: 12px → auto + min-width: auto → 0px + min-height: auto → 0px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) + font-weight: 400 → 700 + letter-spacing: normal → 0.8px + +body > main > footer > span:nth-of-type(2) "© 2024" + x: 676.8 → 1341.6 (+664.8px) + y: 1075.8 → 833.9 (-241.9px) + w: 170.5 → 40.8 (-129.7px) + display: flex → block + align-items: center → normal + row-gap: 7px → normal + column-gap: 7px → normal + width: 170.453px → 40.8125px + height: 12px → 13px + border-top-style: solid → none + border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + letter-spacing: normal → 0.8px + +body >main >footer >span:nth-of-type(3) "© 2024" + ✗ present in reference, absent in project + +body >div + ✗ present in reference, absent in project diff --git a/web/package.json b/web/package.json index d75b91b..837ffe5 100644 --- a/web/package.json +++ b/web/package.json @@ -13,6 +13,7 @@ "test": "vitest run", "format": "prettier --write .", "lint": "eslint .", + "refs-cdp-audit": "node scripts/audit-cdp.mjs http://localhost:3000/demo.html http://localhost:5173/preview/demo", "refs-css-audit": "node scripts/audit-css.mjs", "refs-dom-audit": "node scripts/audit-dom.mjs" }, @@ -21,6 +22,7 @@ "@sveltejs/adapter-static": "^3.0.10", "@sveltejs/kit": "^2.63.0", "@sveltejs/vite-plugin-svelte": "^7.1.2", + "diff": "^9.0.0", "eslint": "^10.9.0", "eslint-config-prettier": "^10.1.8", "eslint-plugin-svelte": "^3.23.0", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 1d15fbc..ee9240b 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -30,6 +30,9 @@ importers: '@sveltejs/vite-plugin-svelte': specifier: ^7.1.2 version: 7.3.0(svelte@5.56.9(@typescript-eslint/types@8.67.0))(vite@8.2.1) + diff: + specifier: ^9.0.0 + version: 9.0.0 eslint: specifier: ^10.9.0 version: 10.9.0 @@ -493,6 +496,10 @@ packages: devalue@5.9.0: resolution: {integrity: sha512-RWrqdArjvPbsATEhOPUo6Wndc/iWnkWKlhIrdlF3zMMYo/c3CVtoaVAyLtWxz5h8nSlkHzxnzV2uLydPXmtF+A==} + diff@9.0.0: + resolution: {integrity: sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw==} + engines: {node: '>=0.3.1'} + es-module-lexer@2.3.2: resolution: {integrity: sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==} @@ -1507,6 +1514,8 @@ snapshots: devalue@5.9.0: {} + diff@9.0.0: {} + es-module-lexer@2.3.2: {} escape-string-regexp@4.0.0: {} diff --git a/web/scripts/audit-cdp.mjs b/web/scripts/audit-cdp.mjs new file mode 100644 index 0000000..e5da17f --- /dev/null +++ b/web/scripts/audit-cdp.mjs @@ -0,0 +1,609 @@ +// audit-cdp.mjs +// CDP/DOMSnapshot-based visual audit over multiple routes. +// Replicates the route→ref mapping from audit-css.mjs (the 4 targets that have +// a corresponding ref HTML file), starts a dev server (unless --no-serve), +// captures each pair, diffs computed styles + geometry, and writes a report to +// web/audit/cdp-audit.txt. +// +// Usage: +// node scripts/audit-cdp.mjs # serve + audit all 4 targets +// node scripts/audit-cdp.mjs --no-serve # assume a server is already running +// node scripts/audit-cdp.mjs --ours http://127.0.0.1:5173 +// node scripts/audit-cdp.mjs --route /preview/demo --ref demo.html +import { chromium } from "playwright"; +import { diffArrays } from "diff"; +import { spawn } from "node:child_process"; +import { writeFileSync, mkdirSync, readdirSync } from "node:fs"; +import { resolve, join } from "node:path"; + +const argv = (() => { + const a = {}; + for (let i = 0; i < process.argv.length; i++) { + const v = process.argv[i]; + if (v === "--no-serve") a.noServe = true; + else if (v === "--ours") a.ours = process.argv[++i]; + else if (v === "--ref") a.ref = process.argv[++i]; + else if (v === "--route") a.route = process.argv[++i]; + else if (v === "--port") a.port = Number(process.argv[++i]); + } + return a; +})(); + +const WEB = process.cwd(); +const PORT = argv.port || 5179; +const REFS_DIR = resolve(WEB, "../refs-html"); +const PX_TOL = 1; + +const PROPS = [ + "display", + "position", + "top", + "right", + "bottom", + "left", + "z-index", + "float", + "flex-direction", + "flex-wrap", + "justify-content", + "align-items", + "align-self", + "row-gap", + "column-gap", + "grid-template-columns", + "grid-template-rows", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + "width", + "height", + "min-width", + "min-height", + "max-width", + "max-height", + "box-sizing", + "overflow", + "opacity", + "visibility", + "transform", + "box-shadow", + "border-top-width", + "border-top-style", + "border-top-color", + "border-radius", + "background-color", + "background-image", + "background-size", + "background-position", + "color", + "font-family", + "font-size", + "font-weight", + "font-style", + "line-height", + "letter-spacing", + "text-align", + "text-transform", + "white-space", + "vertical-align", +]; + +// --- capture: open a page and snapshot its tree via getComputedStyle --- + +async function capture(browser, target) { + const url = target.startsWith("http") + ? target + : "file:///" + target.replace(/\\/g, "/"); + const page = await browser.newPage({ + viewport: { width: 1440, height: 900 }, + }); + await page.goto(url, { waitUntil: "networkidle" }); + await page.evaluate(async () => { + await document.fonts.ready; + }); + // Normalize both sides to light theme so we measure real design diffs, + // not a theme inversion. + await page.evaluate(() => { + document.documentElement.dataset.theme = "light"; + }); + await page.waitForTimeout(400); + + const tree = await page.evaluate((PROPS) => { + const NOISE_TAGS = new Set([ + "script", + "template", + "style", + "link", + "noscript", + ]); + const snap = (el) => { + const tag = el.tagName.toLowerCase(); + if ( + NOISE_TAGS.has(tag) || + tag === "vite-error-overlay" || + el.id === "svelte-announcer" + ) + return null; + const cs = getComputedStyle(el); + const r = el.getBoundingClientRect(); + return { + tag, + classes: (el.getAttribute("class") ?? "") + .split(/\s+/) + .filter((c) => c && !c.startsWith("svelte-")), + text: [...el.childNodes] + .filter((n) => n.nodeType === 3) + .map((n) => n.textContent.trim()) + .filter(Boolean) + .join(" "), + box: { + x: +r.x.toFixed(1), + y: +r.y.toFixed(1), + w: +r.width.toFixed(1), + h: +r.height.toFixed(1), + }, + styles: Object.fromEntries( + PROPS.map((p) => [p, cs.getPropertyValue(p)]), + ), + children: + tag === "svg" + ? [] + : [...el.children].map(snap).filter(Boolean), + }; + }; + return snap(document.body); + }, PROPS); + + await page.close(); + return tree; +} + +// --- capture via CDP DOMSnapshot (alternative path, kept for reference) --- + +async function captureCdp(browser, target) { + const url = target.startsWith("http") + ? target + : "file:///" + target.replace(/\\/g, "/"); + const page = await browser.newPage({ + viewport: { width: 1440, height: 900 }, + }); + await page.goto(url, { waitUntil: "networkidle" }); + await page.evaluate(async () => { + await document.fonts.ready; + }); + const cdp = await page.context().newCDPSession(page); + const snap = await cdp.send("DOMSnapshot.captureSnapshot", { + computedStyles: PROPS, + }); + await page.close(); + if (!snap?.documents?.length) + throw new Error( + "captureSnapshot: no documents, keys: " + Object.keys(snap ?? {}), + ); + return toTree(snap); +} + +function toTree(snap) { + const S = snap.strings; + const doc = snap.documents[0]; + const nodes = doc.nodes; + const layout = doc.layout; + const deref = (v) => (typeof v === "number" ? S[v] : v); + + if (layout.nodeIndex.length !== layout.bounds.length) + throw new Error("toTree: nodeIndex and bounds are not parallel"); + + // styles: flat array of VALUE indices, positional to PROPS. + // Property names are not stored in strings — mapping only via whitelist order. + const stylesByNode = new Map(); + for (let k = 0; k < layout.nodeIndex.length; k++) { + const raw = layout.styles[k] ?? []; + if (raw.length && raw.length !== PROPS.length) + console.warn( + `toTree: node ${layout.nodeIndex[k]}: ${raw.length} values ` + + `for ${PROPS.length} requested — possible shift, node styles unreliable`, + ); + const styles = {}; + PROPS.forEach((prop, j) => { + if (raw[j] != null) styles[prop] = S[raw[j]] ?? ""; + }); + stylesByNode.set(layout.nodeIndex[k], styles); + } + + const boxByNode = new Map( + layout.nodeIndex.map((domIdx, k) => { + const b = layout.bounds[k]; + return [ + domIdx, + { + x: +b[0].toFixed(1), + y: +b[1].toFixed(1), + w: +b[2].toFixed(1), + h: +b[3].toFixed(1), + }, + ]; + }), + ); + + const pseudoByNode = new Set(nodes.pseudoType?.index ?? []); + + const kids = new Map(); + for (let i = 0; i < nodes.nodeType.length; i++) { + const p = nodes.parentIndex?.[i]; + if (p == null || p < 0) continue; + if (!kids.has(p)) kids.set(p, []); + kids.get(p).push(i); + } + + const NOISE_TAGS = new Set([ + "script", + "template", + "style", + "link", + "noscript", + ]); + + const build = (i) => { + if (nodes.nodeType[i] !== 1 || pseudoByNode.has(i)) return null; + const a = nodes.attributes?.[i] ?? []; + const attrs = {}; + for (let k = 0; k + 1 < a.length; k += 2) + attrs[deref(a[k])] = deref(a[k + 1]); + const tag = deref(nodes.nodeName[i]).toLowerCase(); + if ( + NOISE_TAGS.has(tag) || + tag === "vite-error-overlay" || + attrs.id === "svelte-announcer" + ) + return null; + const text = (kids.get(i) ?? []) + .filter((c) => nodes.nodeType[c] === 3) + .map((c) => (deref(nodes.nodeValue[c]) ?? "").trim()) + .filter(Boolean) + .join(" "); + return { + tag: deref(nodes.nodeName[i]).toLowerCase(), + classes: (attrs.class ?? "") + .split(/\s+/) + .filter((c) => c && !c.startsWith("svelte-")), + text, + box: boxByNode.get(i), // undefined = node not rendered + styles: stylesByNode.get(i) ?? {}, + children: + tag === "svg" + ? [] + : (kids.get(i) ?? []).map(build).filter(Boolean), + }; + }; + + const rootIdx = nodes.nodeType.indexOf(9); + const htmlIdx = (kids.get(rootIdx) ?? []).find( + (i) => nodes.nodeType[i] === 1, + ); + const bodyIdx = (kids.get(htmlIdx) ?? []).find( + (i) => nodes.nodeType[i] === 1 && deref(nodes.nodeName[i]) === "BODY", + ); + const tree = build(bodyIdx); + if (!tree) throw new Error("toTree: body not found"); + // At least one rendered node must have the full set of values. + if ( + ![...stylesByNode.values()].some( + (s) => Object.keys(s).length === PROPS.length, + ) + ) + throw new Error( + "toTree: no node has a full set of styles — whitelist/indexing broken", + ); + return tree; +} + +// node signature for matching: tag + classes (no svelte suffixes), or text +const sig = (n) => + n.tag + + (n.classes.length + ? "." + [...n.classes].sort().join(".") + : n.text + ? ":" + n.text.slice(0, 30) + : ""); + +const sameNode = (x, y) => { + if (x.tag !== y.tag) return false; + if (x.tag === "svg") return true; // icons: design vs library classes differ + const cx = [...x.classes].sort().join(" "); + const cy = [...y.classes].sort().join(" "); + return cx === cy || !x.classes.length || !y.classes.length; +}; + +// CSS selector segment: nth-of-type only when several such tags under parent +const seg = (node, i, siblings) => { + if (siblings.filter((c) => c.tag === node.tag).length < 2) return node.tag; + const nth = siblings.slice(0, i + 1).filter((c) => c.tag === node.tag).length; + return `${node.tag}:nth-of-type(${nth})`; +}; + +// human-readable annotation: classes + text, to make the node easy to find +const annotate = (node) => { + if (!node) return ""; + const cls = node.classes.length + ? " [" + [...node.classes].sort().join(" ") + "]" + : ""; + const txt = node.text ? ` "${node.text.slice(0, 40)}"` : ""; + return cls + txt; +}; + +function diffStyles(a, b) { + const out = []; + if (!a?.styles || !b?.styles) + return [ + `⚠ node without styles (a.tag=${a?.tag}, b.tag=${b?.tag}) — matching bug, inspect manually`, + ]; + + if (!!a.box !== !!b.box) + out.push( + `render: node is rendered only on one side ` + + `(no layout box — usually display:none on one side)`, + ); + if (a.box && b.box) + for (const k of ["x", "y", "w", "h"]) { + const d = +(b.box[k] - a.box[k]).toFixed(1); + if (Math.abs(d) > PX_TOL) + out.push( + `${k}: ${a.box[k]} → ${b.box[k]} (${d > 0 ? "+" : ""}${d}px)`, + ); + } + for (const k of new Set([ + ...Object.keys(a.styles), + ...Object.keys(b.styles), + ])) { + const va = a.styles[k] ?? "", + vb = b.styles[k] ?? ""; + if (va !== vb) out.push(`${k}: ${va || "—"} → ${vb || "—"}`); + } + return out; +} + +function compare(a, b, path, report) { + const sel = path.join(" > "); + const changes = diffStyles(a, b); + if (changes.length) + report.push( + sel + + annotate(b ?? a) + + "\n" + + changes.map((c) => " " + c).join("\n"), + ); + + const removed = [], + added = []; + let ai = 0, + bi = 0; + for (const g of diffArrays(a.children, b.children, { + comparator: sameNode, + })) { + if (g.removed) + for (let k = 0; k < g.count; k++, ai++) + removed.push([a.children[ai], ai]); + else if (g.added) + for (let k = 0; k < g.count; k++, bi++) added.push([b.children[bi], bi]); + else + for (let k = 0; k < g.count; k++, ai++, bi++) + compare(a.children[ai], b.children[bi], [ + ...path, + seg(a.children[ai], ai, a.children), + ], report); + } + + // rescue: pair leftovers by tag instead of reporting ✗/+ + const rest = []; + for (const [node, i] of removed) { + const j = added.findIndex(([n]) => n.tag === node.tag); + if (j < 0) { + rest.push([node, i]); + continue; + } + const [[bNode]] = added.splice(j, 1); + compare(node, bNode, [...path, seg(node, i, a.children)], report); + } + for (const [node, i] of rest) + report.push( + `${[...path, seg(node, i, a.children)].join(" >")}${annotate(node)}\n ✗ present in reference, absent in project`, + ); + for (const [node, i] of added) + report.push( + `${[...path, seg(node, i, b.children)].join(" >")}${annotate(node)}\n + present in project, absent in reference`, + ); +} + +// --- target discovery (mirrors audit-css.mjs) --- + +// Dynamic segments: explicit id values + id→ref-file mapping. +const DYNAMIC = { + "tools/[id]": { + ids: ["linear-gradient-png", "remove-background-png"], + refFor: (id) => + id === "linear-gradient-png" + ? "gradient.html" + : id === "remove-background-png" + ? "background-remover.html" + : null, + }, +}; + +const EXCLUDE = new Set(["/preview"]); +const refNameFor = (route) => { + if (route === "/preview") return "index.html"; + const last = route.split("/").filter(Boolean).pop(); + return `${last}.html`; +}; + +function discoverRoutes() { + const base = resolve(WEB, "src/routes/preview"); + const out = []; + const walk = (dir) => { + let ents; + try { + ents = readdirSync(dir, { withFileTypes: true }); + } catch { + return; + } + for (const e of ents) { + const p = join(dir, e.name); + if (e.isDirectory()) walk(p); + else if (e.name === "+page.svelte") { + const rel = p.slice(base.length).replace(/\\/g, "/"); + const parts = rel.split("/").filter(Boolean); + parts.pop(); + out.push(parts.length ? `/preview/${parts.join("/")}` : "/preview"); + } + } + }; + walk(base); + return out; +} + +function refsList() { + try { + return readdirSync(REFS_DIR).filter((f) => f.endsWith(".html")); + } catch { + return []; + } +} +const refExists = (name) => refsList().includes(name); + +function buildTargets() { + if (argv.route) { + const ref = argv.ref || refNameFor(argv.route); + return [{ route: argv.route, ref }]; + } + const targets = []; + const seen = new Set(); + const add = (route, ref) => { + if (!ref || seen.has(route)) return; + if (!refExists(ref)) { + console.warn(`[cdp-audit] ref not found, skipped: ${route} -> ${ref}`); + return; + } + seen.add(route); + targets.push({ route, ref }); + }; + for (const route of discoverRoutes()) { + if (route.includes("[")) continue; + if (EXCLUDE.has(route)) { + console.log(`[cdp-audit] excluded (no relevant ref): ${route}`); + continue; + } + add(route, refNameFor(route)); + } + for (const [seg, cfg] of Object.entries(DYNAMIC)) { + for (const id of cfg.ids) { + add(`/preview/${seg.replace("[id]", id)}`, cfg.refFor(id)); + } + } + return targets; +} + +const waitFor = async (url, ms = 60000) => { + const t = Date.now(); + while (Date.now() - t < ms) { + try { + const r = await fetch(url); + if (r.ok) return; + if (r.status >= 400) { + throw new Error( + `route ${url} returned HTTP ${r.status} (server is up, page failed to render)`, + ); + } + } catch (e) { + if (e instanceof Error && e.message.includes("returned HTTP")) throw e; + } + await new Promise((r) => setTimeout(r, 500)); + } + throw new Error("dev server not up: " + url); +}; + +async function auditOne(browser, target) { + const oursUrl = argv.ours || `http://127.0.0.1:${PORT}${target.route}`; + const refUrl = resolve(REFS_DIR, target.ref); + + const ours = await capture(browser, oursUrl); + const ref = await capture(browser, refUrl); + + const report = []; + compare(ref, ours, ["body"], report); + return { route: target.route, ref: target.ref, lines: report }; +} + +async function main() { + const targets = buildTargets(); + if (!targets.length) { + console.error("no audit targets (refs-html/*.html missing?)"); + process.exit(1); + } + console.log(`[cdp-audit] targets: ${targets.map((t) => t.route).join(", ")}`); + + let server; + if (!argv.noServe) { + const bin = process.platform === "win32" ? "pnpm.cmd" : "pnpm"; + server = spawn(bin, ["dev", "--port", String(PORT), "--strictPort"], { + cwd: WEB, + stdio: "ignore", + shell: true, + detached: process.platform !== "win32", + }); + await waitFor(argv.ours || `http://127.0.0.1:${PORT}${targets[0].route}`); + } + + const browser = await chromium.launch(); + const reports = []; + try { + for (const target of targets) { + try { + const rep = await auditOne(browser, target); + reports.push(rep); + console.log( + `[cdp-audit] ${rep.route} (vs ${rep.ref}): ${rep.lines.length} differences`, + ); + } catch (e) { + console.error(`[cdp-audit] ${target.route} failed: ${e.message}`); + } + } + } finally { + await browser.close(); + if (server) { + try { + if (process.platform === "win32") + spawn("taskkill", ["/pid", String(server.pid), "/f", "/t"], { + stdio: "ignore", + }); + else server.kill("SIGTERM"); + } catch {} + } + } + + const header = + `CDP visual audit\n${new Date().toISOString()}\n` + + `viewport 1440x900, tolerance ${PX_TOL}px, theme light\n\n`; + const body = reports + .map((r) => { + const title = `=== ${r.route} (vs ${r.ref}) — ${r.lines.length} differences ===`; + if (!r.lines.length) return title + "\n ✅ no differences found"; + return title + "\n\n" + r.lines.join("\n\n"); + }) + .join("\n\n\n"); + + const outDir = resolve(WEB, "audit"); + mkdirSync(outDir, { recursive: true }); + const outPath = resolve(outDir, "cdp-audit.txt"); + writeFileSync(outPath, header + body + "\n", "utf8"); + console.log(`report: web/audit/cdp-audit.txt`); +} + +main().catch((e) => { + console.error(e); + process.exit(1); +});