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