diff --git a/web/audit/audit-report.json b/web/audit/audit-report.json index 36a9e02..54a4f5f 100644 --- a/web/audit/audit-report.json +++ b/web/audit/audit-report.json @@ -1,151 +1,214 @@ { - "generatedAt": "2026-08-28T15:27:27.891Z", + "generatedAt": "2026-08-29T05:32:08.824Z", "reports": [ { "route": "/preview/demo", "ref": "demo.html", - "tokenDiffs": { - "light": [ - { - "key": "--danger", - "ours": "#e5484d", - "ref": "—" - }, - { - "key": "--success", - "ours": "#25a96a", - "ref": "—" - }, - { - "key": "--text-sm--line-height", - "ours": "—", - "ref": "calc(1.25 / .875)" - }, - { - "key": "--text-xs--line-height", - "ours": "—", - "ref": "calc(1 / .75)" - }, - { - "key": "--font-weight-medium", - "ours": "—", - "ref": "500" - }, - { - "key": "--spacing", - "ours": "—", - "ref": ".25rem" - }, - { - "key": "--text-xs", - "ours": "—", - "ref": ".75rem" - }, - { - "key": "--radius-md", - "ours": "—", - "ref": ".375rem" - }, - { - "key": "--radius-lg", - "ours": "—", - "ref": ".5rem" - }, - { - "key": "--text-sm", - "ours": "—", - "ref": ".875rem" - } - ], - "dark": [ - { - "key": "--panel", - "ours": "#182129", - "ref": "#f8fafb" - }, - { - "key": "--blue", - "ours": "#54a2ff", - "ref": "#1769d2" - }, - { - "key": "--muted", - "ours": "#91a0ac", - "ref": "#6d7883" - }, - { - "key": "--background", - "ours": "#11171d", - "ref": "#eef1f4" - }, - { - "key": "--danger", - "ours": "#ff7479", - "ref": "—" - }, - { - "key": "--foreground", - "ours": "#e8eef2", - "ref": "#17212b" - }, - { - "key": "--success", - "ours": "#25a96a", - "ref": "—" - }, - { - "key": "--line", - "ours": "#33414c", - "ref": "#cbd3da" - }, - { - "key": "--text-sm--line-height", - "ours": "—", - "ref": "calc(1.25 / .875)" - }, - { - "key": "--text-xs--line-height", - "ours": "—", - "ref": "calc(1 / .75)" - }, - { - "key": "--font-weight-medium", - "ours": "—", - "ref": "500" - }, - { - "key": "--spacing", - "ours": "—", - "ref": ".25rem" - }, - { - "key": "--text-xs", - "ours": "—", - "ref": ".75rem" - }, - { - "key": "--radius-md", - "ours": "—", - "ref": ".375rem" - }, - { - "key": "--radius-lg", - "ours": "—", - "ref": ".5rem" - }, - { - "key": "--text-sm", - "ours": "—", - "ref": ".875rem" - } - ] - }, - "elementDiffs": [ + "deltas": [ { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)", + "path": "body", + "type": "style", + "tag": "body", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "2341.89px", + "ref": "1528.5px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 2342 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 1529 + } + } + } + }, + { + "path": "body > main:1", + "type": "style", + "tag": "main", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(238, 241, 244)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "2341.89px", + "ref": "1528.5px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 2342 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 1529 + } + } + } + }, + { + "path": "body > main:1 > header:1", + "type": "style", + "tag": "header", + "text": "", + "deltas": { + "padding": { + "ours": "0px 57.6px", + "ref": "0px 51.2px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 64 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 64 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "246.812px", + "ref": "231.469px" + }, + "rect": { + "ours": { + "x": 58, + "y": 17, + "w": 247, + "h": 30 + }, + "ref": { + "x": 51, + "y": 17, + "w": 231, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1 > span:1", + "type": "style", + "tag": "span", + "text": "EP", + "deltas": { + "borderTopColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 58, + "y": 17, + "w": 30, + "h": 30 + }, + "ref": { + "x": 51, + "y": 17, + "w": 30, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1 > span:2", + "type": "style", "tag": "span", "text": "easy-png-tools", "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "117.609px", + "ref": "107.766px" + }, + "height": { + "ours": "18px", + "ref": "17px" + }, "rect": { "ours": { "x": 98, @@ -154,7 +217,7 @@ "h": 18 }, "ref": { - "x": 98, + "x": 91, "y": 23, "w": 108, "h": 17 @@ -163,7 +226,92 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)", + "path": "body > main:1 > header:1 > a:1 > span:3", + "type": "style", + "tag": "span", + "text": "/ WORKSPACE", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "79.2031px", + "ref": "73.7031px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 225, + "y": 25, + "w": 79, + "h": 13 + }, + "ref": { + "x": 209, + "y": 26, + "w": 74, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2", + "type": "style", + "tag": "nav", + "text": "", + "deltas": { + "gap": { + "ours": "18px", + "ref": "22px" + }, + "margin": { + "ours": "0px 0px 0px 24px", + "ref": "0px 28px 0px 355.891px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "376.594px", + "ref": "296.938px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 528, + "y": 24, + "w": 377, + "h": 15 + }, + "ref": { + "x": 639, + "y": 26, + "w": 297, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:1", + "type": "style", "tag": "a", "text": "Workspace", "deltas": { @@ -175,15 +323,31 @@ "ours": "0.48px", "ref": "normal" }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "69.125px", + "ref": "49.4844px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, "rect": { "ours": { - "x": 513, + "x": 528, "y": 24, "w": 69, "h": 15 }, "ref": { - "x": 792, + "x": 639, "y": 26, "w": 49, "h": 12 @@ -192,7 +356,8 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)", + "path": "body > main:1 > header:1 > nav:2 > a:2", + "type": "style", "tag": "a", "text": "Catalog", "deltas": { @@ -204,15 +369,31 @@ "ours": "0.48px", "ref": "normal" }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "53.7656px", + "ref": "38.5px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, "rect": { "ours": { - "x": 600, + "x": 615, "y": 24, "w": 54, "h": 15 }, "ref": { - "x": 864, + "x": 710, "y": 26, "w": 39, "h": 12 @@ -221,7 +402,8 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)", + "path": "body > main:1 > header:1 > nav:2 > a:3", + "type": "style", "tag": "a", "text": "Gradient", "deltas": { @@ -233,15 +415,31 @@ "ours": "0.48px", "ref": "normal" }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "61.4531px", + "ref": "43.9844px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, "rect": { "ours": { - "x": 672, + "x": 687, "y": 24, "w": 61, "h": 15 }, "ref": { - "x": 924, + "x": 771, "y": 26, "w": 44, "h": 12 @@ -250,7 +448,8 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)", + "path": "body > main:1 > header:1 > nav:2 > a:4", + "type": "style", "tag": "a", "text": "Background remover", "deltas": { @@ -262,15 +461,31 @@ "ours": "0.48px", "ref": "normal" }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "138.25px", + "ref": "98.9688px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, "rect": { "ours": { - "x": 751, + "x": 767, "y": 24, "w": 138, "h": 15 }, "ref": { - "x": 990, + "x": 837, "y": 26, "w": 99, "h": 12 @@ -279,34 +494,380 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)", + "path": "body > main:1 > header:1 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "277.812px", + "ref": "265.328px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1105, + "y": 18, + "w": 278, + "h": 28 + }, + "ref": { + "x": 963, + "y": 17, + "w": 265, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > span:1", + "type": "style", + "tag": "span", + "text": "AUTO PIPELINE", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "103.406px", + "ref": "94.875px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1105, + "y": 25, + "w": 103, + "h": 13 + }, + "ref": { + "x": 963, + "y": 26, + "w": 95, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > span:1 > i:1", + "type": "style", + "tag": "i", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "8px", + "ref": "6px" + }, + "height": { + "ours": "8px", + "ref": "6px" + }, + "boxShadow": { + "ours": "color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px", + "ref": "none" + }, + "rect": { + "ours": { + "x": 1105, + "y": 28, + "w": 8, + "h": 8 + }, + "ref": { + "x": 963, + "y": 29, + "w": 6, + "h": 6 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:2", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "grid" + }, + "justifyContent": { + "ours": "center", + "ref": "normal" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "17px" + }, + "width": { + "ours": "28px", + "ref": "29px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1224, + "y": 18, + "w": 28, + "h": 28 + }, + "ref": { + "x": 1074, + "y": 17, + "w": 29, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "16px", + "ref": "17px" + }, + "height": { + "ours": "16px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 1230, + "y": 24, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1080, + "y": 23, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:3", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "grid" + }, + "justifyContent": { + "ours": "center", + "ref": "normal" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "17px" + }, + "width": { + "ours": "28px", + "ref": "29px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1268, + "y": 18, + "w": 28, + "h": 28 + }, + "ref": { + "x": 1119, + "y": 17, + "w": 29, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:3 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "16px", + "ref": "17px" + }, + "height": { + "ours": "16px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 1274, + "y": 24, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1125, + "y": 23, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "70.4062px", + "ref": "64.4531px" + }, + "height": { + "ours": "27px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 1312, + "y": 18, + "w": 70, + "h": 27 + }, + "ref": { + "x": 1164, + "y": 19, + "w": 64, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4 > button:1", + "type": "style", "tag": "button", "text": "RU", "deltas": { "letterSpacing": { "ours": "0.6px", "ref": "normal" - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)", - "tag": "button", - "text": "EN", - "deltas": { - "letterSpacing": { - "ours": "0.6px", - "ref": "normal" + }, + "width": { + "ours": "31.2031px", + "ref": "29px" + }, + "height": { + "ours": "25px", + "ref": "24px" }, "rect": { "ours": { - "x": 1349, + "x": 1313, "y": 19, - "w": 32, + "w": 31, "h": 25 }, "ref": { - "x": 1352, + "x": 1165, "y": 20, "w": 29, "h": 24 @@ -315,7 +876,8 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)", + "path": "body > main:1 > header:1 > div:3 > div:4 > span:2", + "type": "style", "tag": "span", "text": "/", "deltas": { @@ -327,35 +889,39 @@ "ours": "10px", "ref": "16px" }, - "color": { - "ours": "rgb(23, 105, 210)", - "ref": "rgb(23, 33, 43)" - }, - "margin": { - "ours": "0px 7px", - "ref": "0px" - }, - "letterSpacing": { - "ours": "1.2px", - "ref": "normal" - }, "lineHeight": { "ours": "normal", "ref": "24px" }, - "display": { - "ours": "inline", - "ref": "block" + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 33, 43)" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "6px", + "ref": "4.45312px" + }, + "height": { + "ours": "13px", + "ref": "24px" }, "rect": { "ours": { - "x": 165, - "y": 124, - "w": 7, + "x": 1344, + "y": 25, + "w": 6, "h": 13 }, "ref": { - "x": 1348, + "x": 1194, "y": 20, "w": 4, "h": 24 @@ -364,13 +930,308 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>h1:nth-child(2)", + "path": "body > main:1 > header:1 > div:3 > div:4 > button:3", + "type": "style", + "tag": "button", + "text": "EN", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "width": { + "ours": "31.2031px", + "ref": "29px" + }, + "height": { + "ours": "25px", + "ref": "24px" + }, + "rect": { + "ours": { + "x": 1350, + "y": 19, + "w": 31, + "h": 25 + }, + "ref": { + "x": 1199, + "y": 20, + "w": 29, + "h": 24 + } + } + } + }, + { + "path": "body > main:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "666.125px 602.672px", + "ref": "588.844px 532.766px" + }, + "padding": { + "ours": "60px 57.6px 72px", + "ref": "60px 51.2px 72px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "2228.89px", + "ref": "1418.5px" + }, + "rect": { + "ours": { + "x": 0, + "y": 64, + "w": 1440, + "h": 2229 + }, + "ref": { + "x": 0, + "y": 64, + "w": 1280, + "h": 1419 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "666.125px", + "ref": "588.844px" + }, + "height": { + "ours": "893.031px", + "ref": "980.594px" + }, + "rect": { + "ours": { + "x": 58, + "y": 124, + "w": 666, + "h": 893 + }, + "ref": { + "x": 51, + "y": 124, + "w": 589, + "h": 981 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:1", + "type": "style", + "tag": "div", + "text": "PNG PROCESSING WORKSPACE", + "deltas": { + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "666.125px", + "ref": "588.844px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 58, + "y": 124, + "w": 666, + "h": 13 + }, + "ref": { + "x": 51, + "y": 124, + "w": 589, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "/", + "deltas": { + "color": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(109, 120, 131)" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 173, + "y": 124, + "w": 7, + "h": 13 + }, + "ref": { + "x": 159, + "y": 124, + "w": 13, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "666.125px", + "ref": "588.844px" + }, + "height": { + "ours": "170.844px", + "ref": "169.594px" + }, + "rect": { + "ours": { + "x": 58, + "y": 155, + "w": 666, + "h": 171 + }, + "ref": { + "x": 51, + "y": 154, + "w": 589, + "h": 170 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "473.516px", + "ref": "405.062px" + }, + "height": { + "ours": "170.844px", + "ref": "169.594px" + }, + "rect": { + "ours": { + "x": 58, + "y": 155, + "w": 474, + "h": 171 + }, + "ref": { + "x": 51, + "y": 154, + "w": 405, + "h": 170 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:2 > div:1 > h1:1", + "type": "style", "tag": "h1", "text": "Build your image pipeline.", "deltas": { + "fontSize": { + "ours": "57.6px", + "ref": "51.2px" + }, "lineHeight": { "ours": "51.84px", - "ref": "57.6px" + "ref": "51.2px" + }, + "letterSpacing": { + "ours": "-3.456px", + "ref": "-3.072px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "473.516px", + "ref": "405.062px" + }, + "height": { + "ours": "103.656px", + "ref": "102.406px" }, "rect": { "ours": { @@ -380,19 +1241,32 @@ "h": 104 }, "ref": { - "x": 58, + "x": 51, "y": 154, - "w": 482, - "h": 115 + "w": 405, + "h": 102 } } } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>p:nth-child(3)", + "path": "body > main:1 > div:2 > section:1 > div:2 > div:1 > p:2", + "type": "style", "tag": "p", - "text": "Chain simple tools together. Every chang", + "text": "Chain simple tools together. Every change is processed automatically and previewed at each stage.", "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "473.516px", + "ref": "405.062px" + }, "rect": { "ours": { "x": 58, @@ -401,19 +1275,92 @@ "h": 51 }, "ref": { - "x": 58, - "y": 285, - "w": 482, + "x": 51, + "y": 272, + "w": 405, "h": 51 } } } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>span:nth-child(2)", + "path": "body > main:1 > div:2 > section:1 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "width": { + "ours": "162.609px", + "ref": "153.781px" + }, + "rect": { + "ours": { + "x": 561, + "y": 289, + "w": 163, + "h": 37 + }, + "ref": { + "x": 486, + "y": 287, + "w": 154, + "h": 37 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:2 > div:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 574, + "y": 300, + "w": 15, + "h": 15 + }, + "ref": { + "x": 499, + "y": 298, + "w": 15, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:2 > div:2 > span:2", + "type": "style", "tag": "span", "text": "source.png", "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "66px", + "ref": "60.4844px" + }, + "height": { + "ours": "14px", + "ref": "13px" + }, "rect": { "ours": { "x": 597, @@ -422,8 +1369,8 @@ "h": 14 }, "ref": { - "x": 606, - "y": 311, + "x": 522, + "y": 299, "w": 60, "h": 13 } @@ -431,10 +1378,27 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>b:nth-child(3)", + "path": "body > main:1 > div:2 > section:1 > div:2 > div:2 > b:3", + "type": "style", "tag": "b", "text": "1.8 MB", "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "39.6094px", + "ref": "36.2969px" + }, + "height": { + "ours": "14px", + "ref": "13px" + }, "rect": { "ours": { "x": 671, @@ -443,8 +1407,8 @@ "h": 14 }, "ref": { - "x": 674, - "y": 311, + "x": 591, + "y": 299, "w": 36, "h": 13 } @@ -452,22 +1416,135 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)", + "path": "body > main:1 > div:2 > section:1 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "16px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "666.125px", + "ref": "588.844px" + }, + "height": { + "ours": "50px", + "ref": "59px" + }, + "rect": { + "ours": { + "x": 58, + "y": 382, + "w": 666, + "h": 50 + }, + "ref": { + "x": 51, + "y": 380, + "w": 589, + "h": 59 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:3 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "153.609px", + "ref": "148.484px" + }, + "height": { + "ours": "37px", + "ref": "46px" + }, + "rect": { + "ours": { + "x": 58, + "y": 382, + "w": 154, + "h": 37 + }, + "ref": { + "x": 51, + "y": 380, + "w": 148, + "h": 46 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:3 > div:1 > span:1", + "type": "style", "tag": "span", "text": "PROCESSING PIPELINE", "deltas": { - "letterSpacing": { - "ours": "1px", - "ref": "1.2px" - }, "lineHeight": { "ours": "12px", "ref": "normal" }, + "letterSpacing": { + "ours": "1px", + "ref": "1.2px" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, "display": { "ours": "block", "ref": "inline" }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "153.609px", + "ref": "auto" + }, + "height": { + "ours": "12px", + "ref": "auto" + }, "rect": { "ours": { "x": 58, @@ -476,8 +1553,8 @@ "h": 12 }, "ref": { - "x": 58, - "y": 400, + "x": 51, + "y": 388, "w": 127, "h": 12 } @@ -485,10 +1562,57 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)", + "path": "body > main:1 > div:2 > section:1 > div:3 > div:1 > strong:2", + "type": "style", + "tag": "strong", + "text": "4 active steps", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "153.609px", + "ref": "148.484px" + }, + "height": { + "ours": "18px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 58, + "y": 401, + "w": 154, + "h": 18 + }, + "ref": { + "x": 51, + "y": 409, + "w": 148, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:3 > div:1 > strong:2 > em:1", + "type": "style", "tag": "em", "text": "• LIVE", "deltas": { + "borderTopColor": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, "rect": { "ours": { "x": 175, @@ -497,8 +1621,8 @@ "h": 13 }, "ref": { - "x": 173, - "y": 425, + "x": 167, + "y": 413, "w": 33, "h": 12 } @@ -506,8 +1630,161 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(1)>span:nth-child(1)", - "tag": "span", + "path": "body > main:1 > div:2 > section:1 > div:3 > button:2", + "type": "style", + "tag": "button", + "text": "Add tool", + "deltas": { + "lineHeight": { + "ours": "normal", + "ref": "18px" + }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "width": { + "ours": "79.3125px", + "ref": "66.0469px" + }, + "height": { + "ours": "17px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 644, + "y": 392, + "w": 79, + "h": 17 + }, + "ref": { + "x": 574, + "y": 394, + "w": 66, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:3 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "lineHeight": { + "ours": "normal", + "ref": "18px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 650, + "y": 393, + "w": 15, + "h": 15 + }, + "ref": { + "x": 574, + "y": 395, + "w": 15, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "666.125px", + "ref": "588.844px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "666.125px", + "ref": "588.844px" + }, + "height": { + "ours": "550.188px", + "ref": "630px" + }, + "rect": { + "ours": { + "x": 58, + "y": 432, + "w": 666, + "h": 550 + }, + "ref": { + "x": 51, + "y": 439, + "w": 589, + "h": 630 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1", + "type": "style", + "tag": "article", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "46px 618.125px", + "ref": "46px 20px 520.844px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "666.125px", + "ref": "588.844px" + }, + "height": { + "ours": "149px", + "ref": "152px" + }, + "rect": { + "ours": { + "x": 58, + "y": 446, + "w": 666, + "h": 149 + }, + "ref": { + "x": 51, + "y": 453, + "w": 589, + "h": 152 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:1", + "type": "style", + "tag": "div", "text": "01", "deltas": { "fontSize": { @@ -518,24 +1795,36 @@ "ours": "600", "ref": "400" }, - "padding": { - "ours": "0px", - "ref": "17px 0px 0px 15px" - }, "lineHeight": { "ours": "22px", "ref": "normal" }, + "padding": { + "ours": "17px 0px 6px 15px", + "ref": "17px 0px 0px 15px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "45px", + "ref": "150px" + }, "rect": { "ours": { - "x": 74, - "y": 464, - "w": 26, - "h": 22 + "x": 59, + "y": 447, + "w": 46, + "h": 45 }, "ref": { - "x": 59, - "y": 466, + "x": 52, + "y": 454, "w": 46, "h": 150 } @@ -543,14 +1832,219 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > svg:2", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "margin": { + "ours": "0px", + "ref": "17px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 59, + "y": 492, + "w": 16, + "h": 16 + }, + "ref": { + "x": 98, + "y": 471, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "padding": { + "ours": "0px", + "ref": "15px 18px 18px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "520.844px" + }, + "height": { + "ours": "147px", + "ref": "150px" + }, + "rect": { + "ours": { + "x": 105, + "y": 447, + "w": 618, + "h": 147 + }, + "ref": { + "x": 118, + "y": 454, + "w": 521, + "h": 150 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "alignItems": { + "ours": "flex-start", + "ref": "center" + }, + "gap": { + "ours": "8px", + "ref": "15px" + }, + "padding": { + "ours": "8px 12px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "484.844px" + }, + "height": { + "ours": "72px", + "ref": "65px" + }, + "rect": { + "ours": { + "x": 105, + "y": 447, + "w": 618, + "h": 72 + }, + "ref": { + "x": 136, + "y": 469, + "w": 485, + "h": 65 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "171px", + "ref": "156.703px" + }, + "height": { + "ours": "55px", + "ref": "65px" + }, + "rect": { + "ours": { + "x": 117, + "y": 455, + "w": 171, + "h": 55 + }, + "ref": { + "x": 136, + "y": 469, + "w": 157, + "h": 65 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:1 > span:1", + "type": "style", "tag": "span", "text": "BACKGROUND", "deltas": { + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, "display": { "ours": "block", "ref": "inline" }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "171px", + "ref": "auto" + }, + "height": { + "ours": "13px", + "ref": "auto" + }, "rect": { "ours": { "x": 117, @@ -559,8 +2053,8 @@ "h": 13 }, "ref": { - "x": 143, - "y": 489, + "x": 136, + "y": 477, "w": 67, "h": 12 } @@ -568,10 +2062,27 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:1 > h2:2", + "type": "style", "tag": "h2", "text": "Gradient background", "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "171px", + "ref": "156.703px" + }, + "height": { + "ours": "19px", + "ref": "18px" + }, "rect": { "ours": { "x": 117, @@ -580,8 +2091,8 @@ "h": 19 }, "ref": { - "x": 143, - "y": 510, + "x": 136, + "y": 498, "w": 157, "h": 18 } @@ -589,40 +2100,983 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)", - "tag": "button", - "text": "100%", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:2", + "type": "style", + "tag": "div", + "text": "", "deltas": { - "color": { - "ours": "rgb(255, 255, 255)", - "ref": "rgb(23, 33, 43)" + "gap": { + "ours": "8px", + "ref": "13px" }, - "backgroundColor": { - "ours": "rgb(23, 105, 210)", - "ref": "rgba(0, 0, 0, 0)" + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" }, - "padding": { - "ours": "0px 11.2px", - "ref": "0px" + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "121.375px", + "ref": "97px" + }, + "height": { + "ours": "21.7812px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 589, + "y": 455, + "w": 121, + "h": 22 + }, + "ref": { + "x": 524, + "y": 493, + "w": 97, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:2 > span:1", + "type": "style", + "tag": "span", + "text": "AUTO", + "deltas": { + "lineHeight": { + "ours": "15px", + "ref": "normal" }, "letterSpacing": { - "ours": "0.6px", - "ref": "0.8px" + "ours": "0.8px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "color": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(35, 131, 84)" + }, + "gap": { + "ours": "4.8px", + "ref": "4px" + }, + "padding": { + "ours": "2.4px 7.2px", + "ref": "0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "color(srgb 0.535686 0.761569 0.679216)", + "ref": "rgb(203, 211, 218)" + }, + "width": { + "ours": "60.375px", + "ref": "38px" + }, + "height": { + "ours": "21.7812px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 589, + "y": 455, + "w": 60, + "h": 22 + }, + "ref": { + "x": 524, + "y": 495, + "w": 38, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:2 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "lineHeight": { + "ours": "15px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "color": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(35, 131, 84)" + }, + "borderTopColor": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 598, + "y": 460, + "w": 12, + "h": 12 + }, + "ref": { + "x": 524, + "y": 495, + "w": 12, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:2 > button:2", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" }, "display": { "ours": "flex", "ref": "block" }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "width": { + "ours": "28px", + "ref": "16px" + }, + "height": { + "ours": "18px", + "ref": "16px" + }, "rect": { "ours": { - "x": 518, - "y": 552, - "w": 49, - "h": 30 + "x": 658, + "y": 457, + "w": 28, + "h": 18 }, "ref": { - "x": 680, - "y": 546, + "x": 575, + "y": 493, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:2 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 664, + "y": 458, + "w": 16, + "h": 16 + }, + "ref": { + "x": 575, + "y": 493, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:2 > svg:3", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 694, + "y": 457, + "w": 17, + "h": 17 + }, + "ref": { + "x": 604, + "y": 493, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "0px 24px", + "ref": "16px" + }, + "gridTemplateColumns": { + "ours": "190.031px 190.047px 190.047px", + "ref": "189px 119.922px 143.922px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "484.844px" + }, + "height": { + "ours": "75px", + "ref": "52px" + }, + "rect": { + "ours": { + "x": 105, + "y": 519, + "w": 618, + "h": 75 + }, + "ref": { + "x": 136, + "y": 534, + "w": 485, + "h": 52 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "8px", + "ref": "normal" + }, + "padding": { + "ours": "10px 0px 0px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "width": { + "ours": "190.031px", + "ref": "189px" + }, + "height": { + "ours": "75px", + "ref": "52px" + }, + "rect": { + "ours": { + "x": 105, + "y": 519, + "w": 190, + "h": 75 + }, + "ref": { + "x": 136, + "y": 534, + "w": 189, + "h": 52 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:1 > label:1", + "type": "style", + "tag": "label", + "text": "COLOR", + "deltas": { + "letterSpacing": { + "ours": "0.5px", + "ref": "0.8px" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "alignItems": { + "ours": "baseline", + "ref": "normal" + }, + "gap": { + "ours": "8px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "190.031px", + "ref": "189px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 105, + "y": 530, + "w": 190, + "h": 13 + }, + "ref": { + "x": 136, + "y": 534, + "w": 189, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "6.4px", + "ref": "8px" + }, + "padding": { + "ours": "0px", + "ref": "0px 8px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "190.031px", + "ref": "189px" + }, + "height": { + "ours": "27.1875px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 105, + "y": 559, + "w": 190, + "h": 27 + }, + "ref": { + "x": 136, + "y": 554, + "w": 189, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:1 > div:2 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "25.5938px", + "ref": "14px" + }, + "height": { + "ours": "25.5938px", + "ref": "14px" + }, + "rect": { + "ours": { + "x": 105, + "y": 560, + "w": 26, + "h": 26 + }, + "ref": { + "x": 145, + "y": 563, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:1 > div:2 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "backgroundColor": { + "ours": "rgb(238, 241, 244)", + "ref": "rgba(0, 0, 0, 0)" + }, + "padding": { + "ours": "5.6px 8px", + "ref": "0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(203, 211, 218)", + "ref": "rgb(23, 33, 43)" + }, + "borderTopStyle": { + "ours": "solid", + "ref": "none" + }, + "width": { + "ours": "137.656px", + "ref": "127px" + }, + "height": { + "ours": "27.1875px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 137, + "y": 559, + "w": 138, + "h": 27 + }, + "ref": { + "x": 167, + "y": 563, + "w": 127, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:1 > div:2 > svg:3", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 33, 43)" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 281, + "y": 565, + "w": 14, + "h": 14 + }, + "ref": { + "x": 302, + "y": 563, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "0px", + "ref": "normal" + }, + "padding": { + "ours": "10px 0px 0px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "width": { + "ours": "190.047px", + "ref": "119.922px" + }, + "height": { + "ours": "75px", + "ref": "52px" + }, + "rect": { + "ours": { + "x": 319, + "y": 519, + "w": 190, + "h": 75 + }, + "ref": { + "x": 341, + "y": 534, + "w": 120, + "h": 52 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:2 > label:1", + "type": "style", + "tag": "label", + "text": "DIRECTION", + "deltas": { + "letterSpacing": { + "ours": "0.5px", + "ref": "0.8px" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "alignItems": { + "ours": "center", + "ref": "normal" + }, + "gap": { + "ours": "8px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "190.047px", + "ref": "119.922px" + }, + "height": { + "ours": "14px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 319, + "y": 530, + "w": 190, + "h": 14 + }, + "ref": { + "x": 341, + "y": 534, + "w": 120, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:2 > label:1 > output:1", + "type": "style", + "tag": "output", + "text": "135 °", + "deltas": { + "fontSize": { + "ours": "11px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.5px", + "ref": "0.8px" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "35.5px", + "ref": "31.5156px" + }, + "height": { + "ours": "14px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 473, + "y": 530, + "w": 36, + "h": 14 + }, + "ref": { + "x": 430, + "y": 534, + "w": 32, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:2 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "block", + "ref": "inline-block" + }, + "margin": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "190.047px", + "ref": "119.922px" + }, + "rect": { + "ours": { + "x": 321, + "y": 554, + "w": 190, + "h": 16 + }, + "ref": { + "x": 341, + "y": 555, + "w": 120, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "8px", + "ref": "normal" + }, + "padding": { + "ours": "10px 0px 0px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "width": { + "ours": "190.047px", + "ref": "143.922px" + }, + "height": { + "ours": "75px", + "ref": "52px" + }, + "rect": { + "ours": { + "x": 533, + "y": 519, + "w": 190, + "h": 75 + }, + "ref": { + "x": 477, + "y": 534, + "w": 144, + "h": 52 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > label:1", + "type": "style", + "tag": "label", + "text": "OPACITY", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "0.8px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 8px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "190.047px", + "ref": "143.922px" + }, + "height": { + "ours": "24px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 533, + "y": 530, + "w": 190, + "h": 24 + }, + "ref": { + "x": 477, + "y": 534, + "w": 144, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > label:1 > output:1", + "type": "style", + "tag": "output", + "text": "100%", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "0.8px" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "25.2031px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 602, + "y": 532, + "w": 44, + "h": 20 + }, + "ref": { + "x": 596, + "y": 534, "w": 25, "h": 12 } @@ -630,8 +3084,277 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(1)>span:nth-child(1)", - "tag": "span", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgb(238, 241, 244)", + "ref": "rgba(0, 0, 0, 0)" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "190.047px", + "ref": "143.922px" + }, + "rect": { + "ours": { + "x": 533, + "y": 562, + "w": 190, + "h": 32 + }, + "ref": { + "x": 477, + "y": 554, + "w": 144, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > div:2 > button:1", + "type": "style", + "tag": "button", + "text": "100", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(255, 255, 255)" + }, + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "alignItems": { + "ours": "center", + "ref": "normal" + }, + "padding": { + "ours": "0px 11.2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(255, 255, 255)" + }, + "width": { + "ours": "42.1875px", + "ref": "35.4688px" + }, + "rect": { + "ours": { + "x": 534, + "y": 563, + "w": 42, + "h": 30 + }, + "ref": { + "x": 478, + "y": 555, + "w": 35, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > div:2 > button:2", + "type": "style", + "tag": "button", + "text": "75", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "alignItems": { + "ours": "center", + "ref": "normal" + }, + "padding": { + "ours": "0px 11.2px", + "ref": "0px" + }, + "width": { + "ours": "36.5781px", + "ref": "35.4844px" + }, + "rect": { + "ours": { + "x": 576, + "y": 563, + "w": 37, + "h": 30 + }, + "ref": { + "x": 514, + "y": 555, + "w": 35, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > div:2 > button:3", + "type": "style", + "tag": "button", + "text": "50", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "alignItems": { + "ours": "center", + "ref": "normal" + }, + "padding": { + "ours": "0px 11.2px", + "ref": "0px" + }, + "width": { + "ours": "36.5781px", + "ref": "35.4844px" + }, + "rect": { + "ours": { + "x": 612, + "y": 563, + "w": 37, + "h": 30 + }, + "ref": { + "x": 549, + "y": 555, + "w": 35, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > div:2 > button:4", + "type": "style", + "tag": "button", + "text": "25", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "alignItems": { + "ours": "center", + "ref": "normal" + }, + "padding": { + "ours": "0px 11.2px", + "ref": "0px" + }, + "width": { + "ours": "36.5781px", + "ref": "35.4844px" + }, + "rect": { + "ours": { + "x": 649, + "y": 563, + "w": 37, + "h": 30 + }, + "ref": { + "x": 585, + "y": 555, + "w": 35, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2", + "type": "style", + "tag": "article", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "46px 618.125px", + "ref": "46px 20px 520.844px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "666.125px", + "ref": "588.844px" + }, + "height": { + "ours": "89px", + "ref": "138px" + }, + "rect": { + "ours": { + "x": 58, + "y": 605, + "w": 666, + "h": 89 + }, + "ref": { + "x": 51, + "y": 615, + "w": 589, + "h": 138 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:1", + "type": "style", + "tag": "div", "text": "02", "deltas": { "fontSize": { @@ -642,24 +3365,36 @@ "ours": "600", "ref": "400" }, - "padding": { - "ours": "0px", - "ref": "17px 0px 0px 15px" - }, "lineHeight": { "ours": "22px", "ref": "normal" }, + "padding": { + "ours": "17px 0px 6px 15px", + "ref": "17px 0px 0px 15px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "45px", + "ref": "136px" + }, "rect": { "ours": { - "x": 74, - "y": 624, - "w": 26, - "h": 22 + "x": 59, + "y": 606, + "w": 46, + "h": 45 }, "ref": { - "x": 59, - "y": 628, + "x": 52, + "y": 616, "w": 46, "h": 136 } @@ -667,24 +3402,229 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)", - "tag": "span", - "text": "TRANSFORM", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > svg:2", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "margin": { + "ours": "0px", + "ref": "17px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 59, + "y": 651, + "w": 16, + "h": 16 + }, + "ref": { + "x": 98, + "y": 633, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3", + "type": "style", + "tag": "div", + "text": "", "deltas": { "display": { - "ours": "block", - "ref": "inline" + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "padding": { + "ours": "0px", + "ref": "15px 18px 18px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "520.844px" + }, + "height": { + "ours": "87px", + "ref": "136px" + }, + "rect": { + "ours": { + "x": 105, + "y": 606, + "w": 618, + "h": 87 + }, + "ref": { + "x": 118, + "y": 616, + "w": 521, + "h": 136 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "alignItems": { + "ours": "flex-start", + "ref": "center" + }, + "gap": { + "ours": "8px", + "ref": "15px" + }, + "padding": { + "ours": "8px 12px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "484.844px" + }, + "height": { + "ours": "72px", + "ref": "65px" + }, + "rect": { + "ours": { + "x": 105, + "y": 606, + "w": 618, + "h": 72 + }, + "ref": { + "x": 136, + "y": 631, + "w": 485, + "h": 65 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "153px", + "ref": "140.203px" + }, + "height": { + "ours": "55px", + "ref": "65px" }, "rect": { "ours": { "x": 117, - "y": 615, + "y": 614, + "w": 153, + "h": 55 + }, + "ref": { + "x": 136, + "y": 631, + "w": 140, + "h": 65 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "TRANSFORM", + "deltas": { + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "display": { + "ours": "block", + "ref": "inline" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "153px", + "ref": "auto" + }, + "height": { + "ours": "13px", + "ref": "auto" + }, + "rect": { + "ours": { + "x": 117, + "y": 614, "w": 153, "h": 13 }, "ref": { - "x": 143, - "y": 651, + "x": 136, + "y": 639, "w": 60, "h": 12 } @@ -692,20 +3632,37 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:1 > h2:2", + "type": "style", "tag": "h2", "text": "Remove background", "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "153px", + "ref": "140.203px" + }, + "height": { + "ours": "19px", + "ref": "18px" + }, "rect": { "ours": { "x": 117, - "y": 633, + "y": 632, "w": 153, "h": 19 }, "ref": { - "x": 143, - "y": 672, + "x": 136, + "y": 660, "w": 140, "h": 18 } @@ -713,8 +3670,379 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(1)>span:nth-child(1)", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "8px", + "ref": "13px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "121.375px", + "ref": "97px" + }, + "height": { + "ours": "21.7812px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 589, + "y": 614, + "w": 121, + "h": 22 + }, + "ref": { + "x": 524, + "y": 655, + "w": 97, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:2 > span:1", + "type": "style", "tag": "span", + "text": "AUTO", + "deltas": { + "lineHeight": { + "ours": "15px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "color": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(35, 131, 84)" + }, + "gap": { + "ours": "4.8px", + "ref": "4px" + }, + "padding": { + "ours": "2.4px 7.2px", + "ref": "0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "color(srgb 0.535686 0.761569 0.679216)", + "ref": "rgb(203, 211, 218)" + }, + "width": { + "ours": "60.375px", + "ref": "38px" + }, + "height": { + "ours": "21.7812px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 589, + "y": 614, + "w": 60, + "h": 22 + }, + "ref": { + "x": 524, + "y": 657, + "w": 38, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:2 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "lineHeight": { + "ours": "15px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "color": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(35, 131, 84)" + }, + "borderTopColor": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 598, + "y": 619, + "w": 12, + "h": 12 + }, + "ref": { + "x": 524, + "y": 657, + "w": 12, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:2 > button:2", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "width": { + "ours": "28px", + "ref": "16px" + }, + "height": { + "ours": "18px", + "ref": "16px" + }, + "rect": { + "ours": { + "x": 658, + "y": 616, + "w": 28, + "h": 18 + }, + "ref": { + "x": 575, + "y": 655, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:2 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 664, + "y": 617, + "w": 16, + "h": 16 + }, + "ref": { + "x": 575, + "y": 655, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:2 > svg:3", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 694, + "y": 616, + "w": 17, + "h": 17 + }, + "ref": { + "x": 604, + "y": 655, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:2", + "type": "style", + "tag": "div", + "text": "Automatic subject detection enabled", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "484.844px" + }, + "rect": { + "ours": { + "x": 105, + "y": 678, + "w": 618, + "h": 15 + }, + "ref": { + "x": 136, + "y": 696, + "w": 485, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 105, + "y": 678, + "w": 15, + "h": 15 + }, + "ref": { + "x": 136, + "y": 696, + "w": 15, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3", + "type": "style", + "tag": "article", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "46px 618.125px", + "ref": "46px 20px 520.844px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "666.125px", + "ref": "588.844px" + }, + "height": { + "ours": "141.188px", + "ref": "152px" + }, + "rect": { + "ours": { + "x": 58, + "y": 704, + "w": 666, + "h": 141 + }, + "ref": { + "x": 51, + "y": 763, + "w": 589, + "h": 152 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:1", + "type": "style", + "tag": "div", "text": "03", "deltas": { "fontSize": { @@ -725,24 +4053,36 @@ "ours": "600", "ref": "400" }, - "padding": { - "ours": "0px", - "ref": "17px 0px 0px 15px" - }, "lineHeight": { "ours": "22px", "ref": "normal" }, + "padding": { + "ours": "17px 0px 6px 15px", + "ref": "17px 0px 0px 15px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "45px", + "ref": "150px" + }, "rect": { "ours": { - "x": 74, - "y": 746, - "w": 26, - "h": 22 + "x": 59, + "y": 705, + "w": 46, + "h": 45 }, "ref": { - "x": 59, - "y": 776, + "x": 52, + "y": 764, "w": 46, "h": 150 } @@ -750,24 +4090,229 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)", - "tag": "span", - "text": "STYLE", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > svg:2", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "margin": { + "ours": "0px", + "ref": "17px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 59, + "y": 750, + "w": 16, + "h": 16 + }, + "ref": { + "x": 98, + "y": 781, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3", + "type": "style", + "tag": "div", + "text": "", "deltas": { "display": { - "ours": "block", - "ref": "inline" + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "padding": { + "ours": "0px", + "ref": "15px 18px 18px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "520.844px" + }, + "height": { + "ours": "139.188px", + "ref": "150px" + }, + "rect": { + "ours": { + "x": 105, + "y": 705, + "w": 618, + "h": 139 + }, + "ref": { + "x": 118, + "y": 764, + "w": 521, + "h": 150 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "alignItems": { + "ours": "flex-start", + "ref": "center" + }, + "gap": { + "ours": "8px", + "ref": "15px" + }, + "padding": { + "ours": "8px 12px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "484.844px" + }, + "height": { + "ours": "72px", + "ref": "65px" + }, + "rect": { + "ours": { + "x": 105, + "y": 705, + "w": 618, + "h": 72 + }, + "ref": { + "x": 136, + "y": 779, + "w": 485, + "h": 65 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "99px", + "ref": "90.7188px" + }, + "height": { + "ours": "55px", + "ref": "65px" }, "rect": { "ours": { "x": 117, - "y": 737, + "y": 713, + "w": 99, + "h": 55 + }, + "ref": { + "x": 136, + "y": 779, + "w": 91, + "h": 65 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "STYLE", + "deltas": { + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "display": { + "ours": "block", + "ref": "inline" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "99px", + "ref": "auto" + }, + "height": { + "ours": "13px", + "ref": "auto" + }, + "rect": { + "ours": { + "x": 117, + "y": 713, "w": 99, "h": 13 }, "ref": { - "x": 143, - "y": 799, + "x": 136, + "y": 787, "w": 34, "h": 12 } @@ -775,20 +4320,37 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:1 > h2:2", + "type": "style", "tag": "h2", "text": "Add outline", "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "99px", + "ref": "90.7188px" + }, + "height": { + "ours": "19px", + "ref": "18px" + }, "rect": { "ours": { "x": 117, - "y": 755, + "y": 731, "w": 99, "h": 19 }, "ref": { - "x": 143, - "y": 820, + "x": 136, + "y": 808, "w": 91, "h": 18 } @@ -796,8 +4358,819 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(1)>span:nth-child(1)", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "8px", + "ref": "13px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "121.375px", + "ref": "97px" + }, + "height": { + "ours": "21.7812px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 589, + "y": 713, + "w": 121, + "h": 22 + }, + "ref": { + "x": 524, + "y": 803, + "w": 97, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:2 > span:1", + "type": "style", "tag": "span", + "text": "AUTO", + "deltas": { + "lineHeight": { + "ours": "15px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "color": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(35, 131, 84)" + }, + "gap": { + "ours": "4.8px", + "ref": "4px" + }, + "padding": { + "ours": "2.4px 7.2px", + "ref": "0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "color(srgb 0.535686 0.761569 0.679216)", + "ref": "rgb(203, 211, 218)" + }, + "width": { + "ours": "60.375px", + "ref": "38px" + }, + "height": { + "ours": "21.7812px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 589, + "y": 713, + "w": 60, + "h": 22 + }, + "ref": { + "x": 524, + "y": 805, + "w": 38, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:2 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "lineHeight": { + "ours": "15px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "color": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(35, 131, 84)" + }, + "borderTopColor": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 598, + "y": 718, + "w": 12, + "h": 12 + }, + "ref": { + "x": 524, + "y": 805, + "w": 12, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:2 > button:2", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "width": { + "ours": "28px", + "ref": "16px" + }, + "height": { + "ours": "18px", + "ref": "16px" + }, + "rect": { + "ours": { + "x": 658, + "y": 715, + "w": 28, + "h": 18 + }, + "ref": { + "x": 575, + "y": 803, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:2 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 664, + "y": 716, + "w": 16, + "h": 16 + }, + "ref": { + "x": 575, + "y": 803, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:2 > svg:3", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 694, + "y": 715, + "w": 17, + "h": 17 + }, + "ref": { + "x": 604, + "y": 803, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "0px 16px", + "ref": "16px" + }, + "gridTemplateColumns": { + "ours": "301.062px 301.062px", + "ref": "234.422px 234.422px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "484.844px" + }, + "height": { + "ours": "67.1875px", + "ref": "52px" + }, + "rect": { + "ours": { + "x": 105, + "y": 777, + "w": 618, + "h": 67 + }, + "ref": { + "x": 136, + "y": 844, + "w": 485, + "h": 52 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "0px", + "ref": "normal" + }, + "padding": { + "ours": "10px 0px 0px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "width": { + "ours": "301.062px", + "ref": "234.422px" + }, + "height": { + "ours": "67.1875px", + "ref": "52px" + }, + "rect": { + "ours": { + "x": 105, + "y": 777, + "w": 301, + "h": 67 + }, + "ref": { + "x": 136, + "y": 844, + "w": 234, + "h": 52 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:1 > label:1", + "type": "style", + "tag": "label", + "text": "WIDTH", + "deltas": { + "letterSpacing": { + "ours": "0.5px", + "ref": "0.8px" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "alignItems": { + "ours": "center", + "ref": "normal" + }, + "gap": { + "ours": "8px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "301.062px", + "ref": "234.422px" + }, + "height": { + "ours": "14px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 105, + "y": 788, + "w": 301, + "h": 14 + }, + "ref": { + "x": 136, + "y": 844, + "w": 234, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:1 > label:1 > output:1", + "type": "style", + "tag": "output", + "text": "2 px", + "deltas": { + "fontSize": { + "ours": "11px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.5px", + "ref": "0.8px" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "28.4062px", + "ref": "25.2188px" + }, + "height": { + "ours": "14px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 377, + "y": 788, + "w": 28, + "h": 14 + }, + "ref": { + "x": 345, + "y": 844, + "w": 25, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:1 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "block", + "ref": "inline-block" + }, + "margin": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "301.062px", + "ref": "234.422px" + }, + "rect": { + "ours": { + "x": 107, + "y": 812, + "w": 301, + "h": 16 + }, + "ref": { + "x": 136, + "y": 865, + "w": 234, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "8px", + "ref": "normal" + }, + "padding": { + "ours": "10px 0px 0px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "width": { + "ours": "301.062px", + "ref": "234.422px" + }, + "height": { + "ours": "67.1875px", + "ref": "52px" + }, + "rect": { + "ours": { + "x": 422, + "y": 777, + "w": 301, + "h": 67 + }, + "ref": { + "x": 387, + "y": 844, + "w": 234, + "h": 52 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:2 > label:1", + "type": "style", + "tag": "label", + "text": "COLOR", + "deltas": { + "letterSpacing": { + "ours": "0.5px", + "ref": "0.8px" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "alignItems": { + "ours": "baseline", + "ref": "normal" + }, + "gap": { + "ours": "8px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "301.062px", + "ref": "234.422px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 422, + "y": 788, + "w": 301, + "h": 13 + }, + "ref": { + "x": 387, + "y": 844, + "w": 234, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "6.4px", + "ref": "8px" + }, + "padding": { + "ours": "0px", + "ref": "0px 8px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "301.062px", + "ref": "234.422px" + }, + "height": { + "ours": "27.1875px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 422, + "y": 817, + "w": 301, + "h": 27 + }, + "ref": { + "x": 387, + "y": 864, + "w": 234, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:2 > div:2 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "25.5938px", + "ref": "14px" + }, + "height": { + "ours": "25.5938px", + "ref": "14px" + }, + "rect": { + "ours": { + "x": 422, + "y": 818, + "w": 26, + "h": 26 + }, + "ref": { + "x": 396, + "y": 873, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:2 > div:2 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "backgroundColor": { + "ours": "rgb(238, 241, 244)", + "ref": "rgba(0, 0, 0, 0)" + }, + "padding": { + "ours": "5.6px 8px", + "ref": "0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(203, 211, 218)", + "ref": "rgb(23, 33, 43)" + }, + "borderTopStyle": { + "ours": "solid", + "ref": "none" + }, + "width": { + "ours": "269.078px", + "ref": "194.422px" + }, + "height": { + "ours": "27.1875px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 454, + "y": 817, + "w": 269, + "h": 27 + }, + "ref": { + "x": 418, + "y": 873, + "w": 194, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4", + "type": "style", + "tag": "article", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "46px 618.125px", + "ref": "46px 20px 520.844px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "666.125px", + "ref": "588.844px" + }, + "height": { + "ours": "127px", + "ref": "144px" + }, + "rect": { + "ours": { + "x": 58, + "y": 855, + "w": 666, + "h": 127 + }, + "ref": { + "x": 51, + "y": 925, + "w": 589, + "h": 144 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:1", + "type": "style", + "tag": "div", "text": "04", "deltas": { "fontSize": { @@ -808,24 +5181,36 @@ "ours": "600", "ref": "400" }, - "padding": { - "ours": "0px", - "ref": "17px 0px 0px 15px" - }, "lineHeight": { "ours": "22px", "ref": "normal" }, + "padding": { + "ours": "17px 0px 6px 15px", + "ref": "17px 0px 0px 15px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "45px", + "ref": "142px" + }, "rect": { "ours": { - "x": 74, - "y": 896, - "w": 26, - "h": 22 + "x": 59, + "y": 856, + "w": 46, + "h": 45 }, "ref": { - "x": 59, - "y": 938, + "x": 52, + "y": 926, "w": 46, "h": 142 } @@ -833,20 +5218,267 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)", - "tag": "h2", - "text": "Round corners", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > svg:2", + "type": "style", + "tag": "svg", + "text": "", "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "margin": { + "ours": "0px", + "ref": "17px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 59, + "y": 901, + "w": 16, + "h": 16 + }, + "ref": { + "x": 98, + "y": 943, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "padding": { + "ours": "0px", + "ref": "15px 18px 18px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "520.844px" + }, + "height": { + "ours": "125px", + "ref": "142px" + }, + "rect": { + "ours": { + "x": 105, + "y": 856, + "w": 618, + "h": 125 + }, + "ref": { + "x": 118, + "y": 926, + "w": 521, + "h": 142 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "alignItems": { + "ours": "flex-start", + "ref": "center" + }, + "gap": { + "ours": "8px", + "ref": "15px" + }, + "padding": { + "ours": "8px 12px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "484.844px" + }, + "height": { + "ours": "72px", + "ref": "65px" + }, + "rect": { + "ours": { + "x": 105, + "y": 856, + "w": 618, + "h": 72 + }, + "ref": { + "x": 136, + "y": 941, + "w": 485, + "h": 65 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "117px", + "ref": "107.219px" + }, + "height": { + "ours": "55px", + "ref": "65px" + }, "rect": { "ours": { "x": 117, - "y": 905, + "y": 864, + "w": 117, + "h": 55 + }, + "ref": { + "x": 136, + "y": 941, + "w": 107, + "h": 65 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "STYLE", + "deltas": { + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "display": { + "ours": "block", + "ref": "inline" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "117px", + "ref": "auto" + }, + "height": { + "ours": "13px", + "ref": "auto" + }, + "rect": { + "ours": { + "x": 117, + "y": 864, + "w": 117, + "h": 13 + }, + "ref": { + "x": 136, + "y": 949, + "w": 34, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:1 > h2:2", + "type": "style", + "tag": "h2", + "text": "Round corners", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "117px", + "ref": "107.219px" + }, + "height": { + "ours": "19px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 117, + "y": 882, "w": 117, "h": 19 }, "ref": { - "x": 143, - "y": 982, + "x": 136, + "y": 970, "w": 107, "h": 18 } @@ -854,7 +5486,596 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>label:nth-child(2)>span:nth-child(1)", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "8px", + "ref": "13px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "121.375px", + "ref": "97px" + }, + "height": { + "ours": "21.7812px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 589, + "y": 864, + "w": 121, + "h": 22 + }, + "ref": { + "x": 524, + "y": 965, + "w": 97, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:2 > span:1", + "type": "style", + "tag": "span", + "text": "AUTO", + "deltas": { + "lineHeight": { + "ours": "15px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "color": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(35, 131, 84)" + }, + "gap": { + "ours": "4.8px", + "ref": "4px" + }, + "padding": { + "ours": "2.4px 7.2px", + "ref": "0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "color(srgb 0.535686 0.761569 0.679216)", + "ref": "rgb(203, 211, 218)" + }, + "width": { + "ours": "60.375px", + "ref": "38px" + }, + "height": { + "ours": "21.7812px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 589, + "y": 864, + "w": 60, + "h": 22 + }, + "ref": { + "x": 524, + "y": 967, + "w": 38, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:2 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "lineHeight": { + "ours": "15px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "color": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(35, 131, 84)" + }, + "borderTopColor": { + "ours": "rgb(37, 169, 106)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 598, + "y": 869, + "w": 12, + "h": 12 + }, + "ref": { + "x": 524, + "y": 967, + "w": 12, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:2 > button:2", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "width": { + "ours": "28px", + "ref": "16px" + }, + "height": { + "ours": "18px", + "ref": "16px" + }, + "rect": { + "ours": { + "x": 658, + "y": 866, + "w": 28, + "h": 18 + }, + "ref": { + "x": 575, + "y": 965, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:2 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 664, + "y": 867, + "w": 16, + "h": 16 + }, + "ref": { + "x": 575, + "y": 965, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:2 > svg:3", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 694, + "y": 866, + "w": 17, + "h": 17 + }, + "ref": { + "x": 604, + "y": 965, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "0px 16px", + "ref": "16px" + }, + "gridTemplateColumns": { + "ours": "301.062px 301.062px", + "ref": "234.422px 234.422px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "618.125px", + "ref": "484.844px" + }, + "height": { + "ours": "53px", + "ref": "44px" + }, + "rect": { + "ours": { + "x": 105, + "y": 928, + "w": 618, + "h": 53 + }, + "ref": { + "x": 136, + "y": 1006, + "w": 485, + "h": 44 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "0px", + "ref": "normal" + }, + "padding": { + "ours": "10px 0px 0px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "width": { + "ours": "301.062px", + "ref": "234.422px" + }, + "height": { + "ours": "53px", + "ref": "44px" + }, + "rect": { + "ours": { + "x": 105, + "y": 928, + "w": 301, + "h": 53 + }, + "ref": { + "x": 136, + "y": 1006, + "w": 234, + "h": 44 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:1 > label:1", + "type": "style", + "tag": "label", + "text": "RADIUS", + "deltas": { + "letterSpacing": { + "ours": "0.5px", + "ref": "0.8px" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "alignItems": { + "ours": "center", + "ref": "normal" + }, + "gap": { + "ours": "8px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "301.062px", + "ref": "234.422px" + }, + "height": { + "ours": "14px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 105, + "y": 939, + "w": 301, + "h": 14 + }, + "ref": { + "x": 136, + "y": 1006, + "w": 234, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:1 > label:1 > output:1", + "type": "style", + "tag": "output", + "text": "18 px", + "deltas": { + "fontSize": { + "ours": "11px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.5px", + "ref": "0.8px" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "35.5px", + "ref": "31.5156px" + }, + "height": { + "ours": "14px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 370, + "y": 939, + "w": 36, + "h": 14 + }, + "ref": { + "x": 339, + "y": 1006, + "w": 32, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:1 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "block", + "ref": "inline-block" + }, + "margin": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "301.062px", + "ref": "234.422px" + }, + "rect": { + "ours": { + "x": 107, + "y": 963, + "w": 301, + "h": 16 + }, + "ref": { + "x": 136, + "y": 1027, + "w": 234, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.6px", + "ref": "16px" + }, + "lineHeight": { + "ours": "20.4px", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "alignItems": { + "ours": "center", + "ref": "normal" + }, + "justifyContent": { + "ours": "space-between", + "ref": "normal" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "padding": { + "ours": "10px 0px 0px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "width": { + "ours": "301.062px", + "ref": "234.422px" + }, + "height": { + "ours": "53px", + "ref": "44px" + }, + "rect": { + "ours": { + "x": 422, + "y": 928, + "w": 301, + "h": 53 + }, + "ref": { + "x": 387, + "y": 1006, + "w": 234, + "h": 44 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:2 > span:1", + "type": "style", "tag": "span", "text": "Preserve aspect ratio", "deltas": { @@ -863,23 +6084,39 @@ "ref": "16px" }, "lineHeight": { - "ours": "normal", + "ours": "20.4px", "ref": "24px" }, "display": { "ours": "block", "ref": "inline" }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "129.031px", + "ref": "auto" + }, + "height": { + "ours": "20.3906px", + "ref": "auto" + }, "rect": { "ours": { "x": 422, - "y": 973, + "y": 950, "w": 129, - "h": 18 + "h": 20 }, "ref": { - "x": 432, - "y": 1021, + "x": 387, + "y": 1009, "w": 156, "h": 17 } @@ -887,31 +6124,488 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)", - "tag": "span", - "text": "PIPELINE OUTPUTS", + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:2 > button:2", + "type": "style", + "tag": "button", + "text": "", "deltas": { - "letterSpacing": { - "ours": "1px", - "ref": "1.2px" + "fontSize": { + "ours": "13.3333px", + "ref": "16px" }, "lineHeight": { - "ours": "12px", - "ref": "normal" + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "block", + "ref": "inline-block" + }, + "borderRadius": { + "ours": "999px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "width": { + "ours": "38.3906px", + "ref": "32px" + }, + "height": { + "ours": "20.7969px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 684, + "y": 950, + "w": 38, + "h": 21 + }, + "ref": { + "x": 542, + "y": 1006, + "w": 32, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:2 > button:2 > i:1", + "type": "style", + "tag": "i", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgba(0, 0, 0, 0)" }, "display": { "ours": "block", "ref": "inline" }, + "borderRadius": { + "ours": "50%", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "16.7969px", + "ref": "auto" + }, + "height": { + "ours": "16.7969px", + "ref": "auto" + }, + "rect": { + "ours": { + "x": 704, + "y": 952, + "w": 17, + "h": 17 + }, + "ref": { + "x": 558, + "y": 1015, + "w": 0, + "h": 0 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:5", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "666.125px", + "ref": "588.844px" + }, + "height": { + "ours": "35px", + "ref": "36px" + }, + "rect": { + "ours": { + "x": 58, + "y": 982, + "w": 666, + "h": 35 + }, + "ref": { + "x": 51, + "y": 1069, + "w": 589, + "h": 36 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:5 > button:1", + "type": "style", + "tag": "button", + "text": "Reset pipeline", + "deltas": { + "lineHeight": { + "ours": "normal", + "ref": "18px" + }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "width": { + "ours": "109.75px", + "ref": "97.0625px" + }, + "height": { + "ours": "17px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1000, + "w": 110, + "h": 17 + }, + "ref": { + "x": 51, + "y": 1087, + "w": 97, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:5 > button:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "lineHeight": { + "ours": "normal", + "ref": "18px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 64, + "y": 1002, + "w": 14, + "h": 14 + }, + "ref": { + "x": 51, + "y": 1089, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:5 > span:2", + "type": "style", + "tag": "span", + "text": "changes are applied automatically", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "233.812px", + "ref": "213.594px" + }, + "height": { + "ours": "14px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 490, + "y": 1002, + "w": 234, + "h": 14 + }, + "ref": { + "x": 426, + "y": 1089, + "w": 214, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:1 > div:5 > span:2 > i:1", + "type": "style", + "tag": "i", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "8px", + "ref": "6px" + }, + "height": { + "ours": "8px", + "ref": "6px" + }, + "boxShadow": { + "ours": "color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px", + "ref": "none" + }, + "rect": { + "ours": { + "x": 490, + "y": 1005, + "w": 8, + "h": 8 + }, + "ref": { + "x": 426, + "y": 1093, + "w": 6, + "h": 6 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "width": { + "ours": "602.672px", + "ref": "532.766px" + }, + "height": { + "ours": "2096.89px", + "ref": "1286.5px" + }, + "rect": { + "ours": { + "x": 780, + "y": 124, + "w": 603, + "h": 2097 + }, + "ref": { + "x": 696, + "y": 124, + "w": 533, + "h": 1287 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "16px", + "ref": "normal" + }, + "padding": { + "ours": "0px 0px 12px", + "ref": "0px 0px 15px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "564.672px", + "ref": "494.766px" + }, + "height": { + "ours": "158.281px", + "ref": "177px" + }, "rect": { "ours": { "x": 799, - "y": 178, - "w": 94, + "y": 143, + "w": 565, + "h": 158 + }, + "ref": { + "x": 715, + "y": 143, + "w": 495, + "h": 177 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "92.5156px", + "ref": "75.8906px" + }, + "height": { + "ours": "67px", + "ref": "87px" + }, + "rect": { + "ours": { + "x": 799, + "y": 182, + "w": 93, + "h": 67 + }, + "ref": { + "x": 715, + "y": 180, + "w": 76, + "h": 87 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "PIPELINE OUTPUTS", + "deltas": { + "lineHeight": { + "ours": "12px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "1px", + "ref": "1.2px" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "display": { + "ours": "block", + "ref": "inline" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "92.5156px", + "ref": "auto" + }, + "height": { + "ours": "24px", + "ref": "auto" + }, + "rect": { + "ours": { + "x": 799, + "y": 182, + "w": 93, "h": 24 }, "ref": { - "x": 799, + "x": 715, "y": 188, "w": 54, "h": 36 @@ -920,81 +6614,462 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>strong:nth-child(2)", + "path": "body > main:1 > div:2 > section:2 > div:1 > div:1 > strong:2", + "type": "style", "tag": "strong", "text": "Visual history", "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "92.5156px", + "ref": "75.8906px" + }, + "height": { + "ours": "36px", + "ref": "34px" + }, "rect": { "ours": { "x": 799, - "y": 209, - "w": 94, + "y": 213, + "w": 93, "h": 36 }, "ref": { - "x": 799, + "x": 715, "y": 233, - "w": 87, + "w": 76, "h": 34 } } } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "1.2 MB", + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2", + "type": "style", + "tag": "div", + "text": "", "deltas": { - "fontSize": { - "ours": "10px", - "ref": "11px" + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" }, - "color": { - "ours": "rgb(255, 255, 255)", - "ref": "rgb(23, 33, 43)" + "borderTopStyle": { + "ours": "none", + "ref": "solid" }, - "margin": { - "ours": "0px", - "ref": "5px 0px 0px" + "width": { + "ours": "456.156px", + "ref": "418.875px" }, - "display": { - "ours": "inline", - "ref": "block" + "height": { + "ours": "145.281px", + "ref": "161px" }, "rect": { "ours": { - "x": 1097, - "y": 240, - "w": 36, - "h": 13 + "x": 907, + "y": 143, + "w": 456, + "h": 145 }, "ref": { - "x": 1246, - "y": 291, - "w": 79, - "h": 13 + "x": 791, + "y": 143, + "w": 419, + "h": 161 } } } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)", + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > button:1", + "type": "style", + "tag": "button", + "text": "Hide intermediate", + "deltas": { + "padding": { + "ours": "11px 14px", + "ref": "8px 10px" + }, + "margin": { + "ours": "18px 0px 0px", + "ref": "0px" + }, + "width": { + "ours": "456.156px", + "ref": "145.281px" + }, + "height": { + "ours": "39px", + "ref": "33px" + }, + "rect": { + "ours": { + "x": 907, + "y": 161, + "w": 456, + "h": 39 + }, + "ref": { + "x": 1065, + "y": 143, + "w": 145, + "h": 33 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > button:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 1186, + "y": 173, + "w": 15, + "h": 15 + }, + "ref": { + "x": 1184, + "y": 152, + "w": 15, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > button:2", + "type": "style", + "tag": "button", + "text": "Download result", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "11px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "justifyContent": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "8px", + "ref": "9px" + }, + "padding": { + "ours": "9px 14px", + "ref": "0px" + }, + "margin": { + "ours": "0px", + "ref": "18px 0px 0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(255, 255, 255)" + }, + "borderTopStyle": { + "ours": "solid", + "ref": "none" + }, + "width": { + "ours": "191.203px", + "ref": "418.875px" + }, + "height": { + "ours": "36px", + "ref": "42px" + }, + "rect": { + "ours": { + "x": 955, + "y": 231, + "w": 191, + "h": 36 + }, + "ref": { + "x": 791, + "y": 204, + "w": 419, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "11px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 970, + "y": 241, + "w": 16, + "h": 16 + }, + "ref": { + "x": 931, + "y": 217, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > button:2 > svg:2", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "11px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 1118, + "y": 242, + "w": 14, + "h": 14 + }, + "ref": { + "x": 1056, + "y": 218, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2.4px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "78.625px 78.625px 78.625px" + }, + "padding": { + "ours": "0px", + "ref": "14px 0px 0px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "164.812px", + "ref": "251.875px" + }, + "height": { + "ours": "78.2812px", + "ref": "48px" + }, + "rect": { + "ours": { + "x": 1157, + "y": 210, + "w": 165, + "h": 78 + }, + "ref": { + "x": 919, + "y": 256, + "w": 252, + "h": 48 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "alignItems": { + "ours": "baseline", + "ref": "normal" + }, + "justifyContent": { + "ours": "space-between", + "ref": "normal" + }, + "gap": { + "ours": "16px", + "ref": "5px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "78.625px" + }, + "padding": { + "ours": "4px 0px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "164.812px", + "ref": "78.625px" + }, + "height": { + "ours": "24.5px", + "ref": "33px" + }, + "rect": { + "ours": { + "x": 1157, + "y": 210, + "w": 165, + "h": 25 + }, + "ref": { + "x": 919, + "y": 271, + "w": 79, + "h": 33 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:1 > span:1", + "type": "style", "tag": "span", "text": "DIMENSIONS", "deltas": { + "lineHeight": { + "ours": "13.5px", + "ref": "normal" + }, "letterSpacing": { "ours": "0.9px", "ref": "normal" }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "63px", + "ref": "78.625px" + }, + "height": { + "ours": "13.5px", + "ref": "10px" + }, "rect": { "ours": { "x": 1157, "y": 216, "w": 63, - "h": 11 + "h": 14 }, "ref": { - "x": 1073, + "x": 919, "y": 271, "w": 79, "h": 10 @@ -1003,23 +7078,48 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)", - "tag": "span", + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:1 > b:2", + "type": "style", + "tag": "b", "text": "1200 × 800 px", "deltas": { + "fontWeight": { + "ours": "700", + "ref": "400" + }, + "lineHeight": { + "ours": "16.5px", + "ref": "normal" + }, "margin": { "ours": "0px", "ref": "5px 0px 0px" }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "85.8125px", + "ref": "78.625px" + }, + "height": { + "ours": "16.5px", + "ref": "13px" + }, "rect": { "ours": { "x": 1236, "y": 214, "w": 86, - "h": 14 + "h": 17 }, "ref": { - "x": 1073, + "x": 919, "y": 291, "w": 79, "h": 13 @@ -1028,23 +7128,110 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "FORMAT", + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:2", + "type": "style", + "tag": "div", + "text": "", "deltas": { - "letterSpacing": { - "ours": "0.9px", + "display": { + "ours": "flex", + "ref": "grid" + }, + "alignItems": { + "ours": "baseline", "ref": "normal" }, + "justifyContent": { + "ours": "space-between", + "ref": "normal" + }, + "gap": { + "ours": "16px", + "ref": "5px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "78.625px" + }, + "padding": { + "ours": "4px 0px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "164.812px", + "ref": "78.625px" + }, + "height": { + "ours": "24.5px", + "ref": "33px" + }, "rect": { "ours": { "x": 1157, - "y": 240, - "w": 38, - "h": 11 + "y": 237, + "w": 165, + "h": 25 }, "ref": { - "x": 1159, + "x": 1006, + "y": 271, + "w": 79, + "h": 33 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:2 > span:1", + "type": "style", + "tag": "span", + "text": "FORMAT", + "deltas": { + "lineHeight": { + "ours": "13.5px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "0.9px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "37.8125px", + "ref": "78.625px" + }, + "height": { + "ours": "13.5px", + "ref": "10px" + }, + "rect": { + "ours": { + "x": 1157, + "y": 243, + "w": 38, + "h": 14 + }, + "ref": { + "x": 1006, "y": 271, "w": 79, "h": 10 @@ -1053,23 +7240,48 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(2)", - "tag": "span", + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:2 > b:2", + "type": "style", + "tag": "b", "text": "PNG-24", "deltas": { + "fontWeight": { + "ours": "700", + "ref": "400" + }, + "lineHeight": { + "ours": "16.5px", + "ref": "normal" + }, "margin": { "ours": "0px", "ref": "5px 0px 0px" }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "39.6094px", + "ref": "78.625px" + }, + "height": { + "ours": "16.5px", + "ref": "13px" + }, "rect": { "ours": { "x": 1282, - "y": 238, + "y": 241, "w": 40, - "h": 14 + "h": 17 }, "ref": { - "x": 1159, + "x": 1006, "y": 291, "w": 79, "h": 13 @@ -1078,23 +7290,110 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>span:nth-child(1)", - "tag": "span", - "text": "SIZE", + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:3", + "type": "style", + "tag": "div", + "text": "", "deltas": { - "letterSpacing": { - "ours": "0.9px", + "display": { + "ours": "flex", + "ref": "grid" + }, + "alignItems": { + "ours": "baseline", "ref": "normal" }, + "justifyContent": { + "ours": "space-between", + "ref": "normal" + }, + "gap": { + "ours": "16px", + "ref": "5px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "78.625px" + }, + "padding": { + "ours": "4px 0px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "164.812px", + "ref": "78.625px" + }, + "height": { + "ours": "24.5px", + "ref": "33px" + }, "rect": { "ours": { "x": 1157, - "y": 265, - "w": 25, - "h": 11 + "y": 264, + "w": 165, + "h": 25 }, "ref": { - "x": 1246, + "x": 1092, + "y": 271, + "w": 79, + "h": 33 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:3 > span:1", + "type": "style", + "tag": "span", + "text": "SIZE", + "deltas": { + "lineHeight": { + "ours": "13.5px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "0.9px", + "ref": "normal" + }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "25.2031px", + "ref": "78.625px" + }, + "height": { + "ours": "13.5px", + "ref": "10px" + }, + "rect": { + "ours": { + "x": 1157, + "y": 270, + "w": 25, + "h": 14 + }, + "ref": { + "x": 1092, "y": 271, "w": 79, "h": 10 @@ -1103,7 +7402,504 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)", + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:3 > b:2", + "type": "style", + "tag": "b", + "text": "1.2 MB", + "deltas": { + "fontWeight": { + "ours": "700", + "ref": "400" + }, + "lineHeight": { + "ours": "16.5px", + "ref": "normal" + }, + "margin": { + "ours": "0px", + "ref": "5px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "39.6094px", + "ref": "78.625px" + }, + "height": { + "ours": "16.5px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 1282, + "y": 268, + "w": 40, + "h": 17 + }, + "ref": { + "x": 1092, + "y": 291, + "w": 79, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > button:4", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "grid" + }, + "justifyContent": { + "ours": "center", + "ref": "normal" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "17px" + }, + "padding": { + "ours": "1px 6px", + "ref": "6px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(203, 211, 218)", + "ref": "rgb(109, 120, 131)" + }, + "borderTopStyle": { + "ours": "solid", + "ref": "none" + }, + "width": { + "ours": "32px", + "ref": "29px" + }, + "height": { + "ours": "32px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1331, + "y": 233, + "w": 32, + "h": 32 + }, + "ref": { + "x": 1181, + "y": 266, + "w": 29, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:1 > div:2 > button:4 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "16px", + "ref": "17px" + }, + "height": { + "ours": "16px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 1339, + "y": 241, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1187, + "y": 272, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "564.672px", + "ref": "241.375px 241.391px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "564.672px", + "ref": "494.766px" + }, + "height": { + "ours": "1872.11px", + "ref": "1043px" + }, + "rect": { + "ours": { + "x": 799, + "y": 301, + "w": 565, + "h": 1872 + }, + "ref": { + "x": 715, + "y": 320, + "w": 495, + "h": 1043 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgb(248, 250, 251)", + "ref": "rgb(238, 241, 244)" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "4.8px", + "ref": "normal" + }, + "padding": { + "ours": "6.4px", + "ref": "0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "564.672px", + "ref": "241.375px" + }, + "height": { + "ours": "358.422px", + "ref": "329px" + }, + "rect": { + "ours": { + "x": 799, + "y": 317, + "w": 565, + "h": 358 + }, + "ref": { + "x": 715, + "y": 336, + "w": 241, + "h": 329 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(228, 232, 235)" + }, + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "207.375px" + }, + "padding": { + "ours": "0px", + "ref": "16px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "549.891px", + "ref": "239.375px" + }, + "height": { + "ours": "325.844px", + "ref": "300px" + }, + "rect": { + "ours": { + "x": 806, + "y": 325, + "w": 550, + "h": 326 + }, + "ref": { + "x": 716, + "y": 337, + "w": 239, + "h": 300 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:1 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(22, 32, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "439.906px", + "ref": "165.891px" + }, + "height": { + "ours": "325.844px", + "ref": "110.594px" + }, + "rect": { + "ours": { + "x": 806, + "y": 325, + "w": 440, + "h": 326 + }, + "ref": { + "x": 753, + "y": 432, + "w": 166, + "h": 111 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:1 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "PNG", + "deltas": { + "width": { + "ours": "28.2031px", + "ref": "26.8594px" + }, + "height": { + "ours": "19px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 1012, + "y": 469, + "w": 28, + "h": 19 + }, + "ref": { + "x": 822, + "y": 470, + "w": 27, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:1 > div:1 > div:1 > span:2", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "borderTopColor": { + "ours": "rgb(22, 32, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "84px", + "ref": "76.9844px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 984, + "y": 493, + "w": 84, + "h": 13 + }, + "ref": { + "x": 797, + "y": 493, + "w": 77, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "9px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "alignItems": { + "ours": "baseline", + "ref": "normal" + }, + "padding": { + "ours": "0px", + "ref": "8px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "549.891px", + "ref": "239.375px" + }, + "height": { + "ours": "13px", + "ref": "27px" + }, + "rect": { + "ours": { + "x": 806, + "y": 655, + "w": 550, + "h": 13 + }, + "ref": { + "x": 716, + "y": 637, + "w": 239, + "h": 27 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:1 > div:2 > span:1", + "type": "style", "tag": "span", "text": "SOURCE", "deltas": { @@ -1115,16 +7911,36 @@ "ours": "0.8px", "ref": "normal" }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "40.8125px", + "ref": "29.7031px" + }, + "height": { + "ours": "13px", + "ref": "10px" + }, "rect": { "ours": { "x": 806, - "y": 317, - "w": 550, + "y": 655, + "w": 41, "h": 13 }, "ref": { - "x": 808, - "y": 663, + "x": 724, + "y": 646, "w": 30, "h": 10 } @@ -1132,41 +7948,45 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)", - "tag": "span", - "text": "PNG", - "deltas": { - "rect": { - "ours": { - "x": 1067, - "y": 496, - "w": 28, - "h": 19 - }, - "ref": { - "x": 923, - "y": 478, - "w": 27, - "h": 18 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)", - "tag": "span", + "path": "body > main:1 > div:2 > section:2 > div:2 > div:1 > div:2 > b:2", + "type": "style", + "tag": "b", "text": "original.png · 1200 × 800", "deltas": { + "fontSize": { + "ours": "10px", + "ref": "9px" + }, + "textAlign": { + "ours": "start", + "ref": "right" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "150px", + "ref": "123.719px" + }, + "height": { + "ours": "13px", + "ref": "10px" + }, "rect": { "ours": { - "x": 814, - "y": 704, - "w": 135, - "h": 11 + "x": 1206, + "y": 655, + "w": 150, + "h": 13 }, "ref": { - "x": 942, - "y": 663, + "x": 824, + "y": 646, "w": 124, "h": 10 } @@ -1174,7 +7994,296 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)", + "path": "body > main:1 > div:2 > section:2 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgb(248, 250, 251)", + "ref": "rgb(238, 241, 244)" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "4.8px", + "ref": "normal" + }, + "padding": { + "ours": "6.4px", + "ref": "0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "564.672px", + "ref": "241.391px" + }, + "height": { + "ours": "358.422px", + "ref": "329px" + }, + "rect": { + "ours": { + "x": 799, + "y": 688, + "w": 565, + "h": 358 + }, + "ref": { + "x": 968, + "y": 336, + "w": 241, + "h": 329 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(228, 232, 235)" + }, + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "207.391px" + }, + "padding": { + "ours": "0px", + "ref": "16px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "549.891px", + "ref": "239.391px" + }, + "height": { + "ours": "325.844px", + "ref": "300px" + }, + "rect": { + "ours": { + "x": 806, + "y": 695, + "w": 550, + "h": 326 + }, + "ref": { + "x": 969, + "y": 337, + "w": 239, + "h": 300 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:2 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(22, 32, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "439.906px", + "ref": "165.906px" + }, + "height": { + "ours": "325.844px", + "ref": "110.594px" + }, + "rect": { + "ours": { + "x": 806, + "y": 695, + "w": 440, + "h": 326 + }, + "ref": { + "x": 1006, + "y": 432, + "w": 166, + "h": 111 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:2 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "PNG", + "deltas": { + "width": { + "ours": "28.2031px", + "ref": "26.8594px" + }, + "height": { + "ours": "19px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 1012, + "y": 840, + "w": 28, + "h": 19 + }, + "ref": { + "x": 1076, + "y": 470, + "w": 27, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:2 > div:1 > div:1 > span:2", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "borderTopColor": { + "ours": "rgb(22, 32, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "84px", + "ref": "76.9844px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 984, + "y": 864, + "w": 84, + "h": 13 + }, + "ref": { + "x": 1051, + "y": 493, + "w": 77, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "9px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "alignItems": { + "ours": "baseline", + "ref": "normal" + }, + "padding": { + "ours": "0px", + "ref": "8px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "549.891px", + "ref": "239.391px" + }, + "height": { + "ours": "13px", + "ref": "27px" + }, + "rect": { + "ours": { + "x": 806, + "y": 1026, + "w": 550, + "h": 13 + }, + "ref": { + "x": 969, + "y": 637, + "w": 239, + "h": 27 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:2 > div:2 > span:1", + "type": "style", "tag": "span", "text": "STEP 01", "deltas": { @@ -1186,16 +8295,36 @@ "ours": "0.8px", "ref": "normal" }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "47.6094px", + "ref": "34.6406px" + }, + "height": { + "ours": "13px", + "ref": "10px" + }, "rect": { "ours": { "x": 806, - "y": 750, - "w": 550, + "y": 1026, + "w": 48, "h": 13 }, "ref": { - "x": 1096, - "y": 663, + "x": 977, + "y": 646, "w": 35, "h": 10 } @@ -1203,20 +8332,45 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)", - "tag": "span", + "path": "body > main:1 > div:2 > section:2 > div:2 > div:2 > div:2 > b:2", + "type": "style", + "tag": "b", "text": "gradient applied", "deltas": { + "fontSize": { + "ours": "10px", + "ref": "9px" + }, + "textAlign": { + "ours": "start", + "ref": "right" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "96px", + "ref": "79.1719px" + }, + "height": { + "ours": "13px", + "ref": "10px" + }, "rect": { "ours": { - "x": 814, - "y": 1137, - "w": 86, - "h": 11 + "x": 1260, + "y": 1026, + "w": 96, + "h": 13 }, "ref": { - "x": 1275, - "y": 663, + "x": 1122, + "y": 646, "w": 79, "h": 10 } @@ -1224,7 +8378,296 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>span:nth-child(1)", + "path": "body > main:1 > div:2 > section:2 > div:2 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgb(248, 250, 251)", + "ref": "rgb(238, 241, 244)" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "4.8px", + "ref": "normal" + }, + "padding": { + "ours": "6.4px", + "ref": "0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "564.672px", + "ref": "241.375px" + }, + "height": { + "ours": "358.422px", + "ref": "329px" + }, + "rect": { + "ours": { + "x": 799, + "y": 1058, + "w": 565, + "h": 358 + }, + "ref": { + "x": 715, + "y": 677, + "w": 241, + "h": 329 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:3 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(228, 232, 235)" + }, + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "207.375px" + }, + "padding": { + "ours": "0px", + "ref": "16px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "549.891px", + "ref": "239.375px" + }, + "height": { + "ours": "325.844px", + "ref": "300px" + }, + "rect": { + "ours": { + "x": 806, + "y": 1066, + "w": 550, + "h": 326 + }, + "ref": { + "x": 716, + "y": 678, + "w": 239, + "h": 300 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:3 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(22, 32, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "439.906px", + "ref": "165.891px" + }, + "height": { + "ours": "325.844px", + "ref": "110.594px" + }, + "rect": { + "ours": { + "x": 806, + "y": 1066, + "w": 440, + "h": 326 + }, + "ref": { + "x": 753, + "y": 773, + "w": 166, + "h": 111 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:3 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "PNG", + "deltas": { + "width": { + "ours": "28.2031px", + "ref": "26.8594px" + }, + "height": { + "ours": "19px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 1012, + "y": 1210, + "w": 28, + "h": 19 + }, + "ref": { + "x": 822, + "y": 811, + "w": 27, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:3 > div:1 > div:1 > span:2", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "borderTopColor": { + "ours": "rgb(22, 32, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "84px", + "ref": "76.9844px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 984, + "y": 1234, + "w": 84, + "h": 13 + }, + "ref": { + "x": 797, + "y": 834, + "w": 77, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:3 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "9px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "alignItems": { + "ours": "baseline", + "ref": "normal" + }, + "padding": { + "ours": "0px", + "ref": "8px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "549.891px", + "ref": "239.375px" + }, + "height": { + "ours": "13px", + "ref": "27px" + }, + "rect": { + "ours": { + "x": 806, + "y": 1396, + "w": 550, + "h": 13 + }, + "ref": { + "x": 716, + "y": 978, + "w": 239, + "h": 27 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:3 > div:2 > span:1", + "type": "style", "tag": "span", "text": "STEP 02", "deltas": { @@ -1236,16 +8679,36 @@ "ours": "0.8px", "ref": "normal" }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "47.6094px", + "ref": "34.6406px" + }, + "height": { + "ours": "13px", + "ref": "10px" + }, "rect": { "ours": { "x": 806, - "y": 1182, - "w": 550, + "y": 1396, + "w": 48, "h": 13 }, "ref": { - "x": 808, - "y": 1021, + "x": 724, + "y": 987, "w": 35, "h": 10 } @@ -1253,20 +8716,45 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)", - "tag": "span", + "path": "body > main:1 > div:2 > section:2 > div:2 > div:3 > div:2 > b:2", + "type": "style", + "tag": "b", "text": "background removed", "deltas": { + "fontSize": { + "ours": "10px", + "ref": "9px" + }, + "textAlign": { + "ours": "start", + "ref": "right" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "108px", + "ref": "89.0781px" + }, + "height": { + "ours": "13px", + "ref": "10px" + }, "rect": { "ours": { - "x": 814, - "y": 1569, - "w": 97, - "h": 11 + "x": 1248, + "y": 1396, + "w": 108, + "h": 13 }, "ref": { - "x": 977, - "y": 1021, + "x": 858, + "y": 987, "w": 89, "h": 10 } @@ -1274,7 +8762,296 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>span:nth-child(1)", + "path": "body > main:1 > div:2 > section:2 > div:2 > div:4", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgb(248, 250, 251)", + "ref": "rgb(238, 241, 244)" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "4.8px", + "ref": "normal" + }, + "padding": { + "ours": "6.4px", + "ref": "0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "564.672px", + "ref": "241.391px" + }, + "height": { + "ours": "358.422px", + "ref": "329px" + }, + "rect": { + "ours": { + "x": 799, + "y": 1429, + "w": 565, + "h": 358 + }, + "ref": { + "x": 968, + "y": 677, + "w": 241, + "h": 329 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:4 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(228, 232, 235)" + }, + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "207.391px" + }, + "padding": { + "ours": "0px", + "ref": "16px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "549.891px", + "ref": "239.391px" + }, + "height": { + "ours": "325.844px", + "ref": "300px" + }, + "rect": { + "ours": { + "x": 806, + "y": 1436, + "w": 550, + "h": 326 + }, + "ref": { + "x": 969, + "y": 678, + "w": 239, + "h": 300 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:4 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(22, 32, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "439.906px", + "ref": "165.906px" + }, + "height": { + "ours": "325.844px", + "ref": "110.594px" + }, + "rect": { + "ours": { + "x": 806, + "y": 1436, + "w": 440, + "h": 326 + }, + "ref": { + "x": 1006, + "y": 773, + "w": 166, + "h": 111 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:4 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "PNG", + "deltas": { + "width": { + "ours": "28.2031px", + "ref": "26.8594px" + }, + "height": { + "ours": "19px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 1012, + "y": 1580, + "w": 28, + "h": 19 + }, + "ref": { + "x": 1076, + "y": 811, + "w": 27, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:4 > div:1 > div:1 > span:2", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "borderTopColor": { + "ours": "rgb(22, 32, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "84px", + "ref": "76.9844px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 984, + "y": 1604, + "w": 84, + "h": 13 + }, + "ref": { + "x": 1051, + "y": 834, + "w": 77, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:4 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "9px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "alignItems": { + "ours": "baseline", + "ref": "normal" + }, + "padding": { + "ours": "0px", + "ref": "8px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "549.891px", + "ref": "239.391px" + }, + "height": { + "ours": "13px", + "ref": "27px" + }, + "rect": { + "ours": { + "x": 806, + "y": 1767, + "w": 550, + "h": 13 + }, + "ref": { + "x": 969, + "y": 978, + "w": 239, + "h": 27 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:4 > div:2 > span:1", + "type": "style", "tag": "span", "text": "STEP 03", "deltas": { @@ -1286,16 +9063,36 @@ "ours": "0.8px", "ref": "normal" }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "47.6094px", + "ref": "34.6406px" + }, + "height": { + "ours": "13px", + "ref": "10px" + }, "rect": { "ours": { "x": 806, - "y": 1615, - "w": 550, + "y": 1767, + "w": 48, "h": 13 }, "ref": { - "x": 1096, - "y": 1021, + "x": 977, + "y": 987, "w": 35, "h": 10 } @@ -1303,20 +9100,45 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)", - "tag": "span", + "path": "body > main:1 > div:2 > section:2 > div:2 > div:4 > div:2 > b:2", + "type": "style", + "tag": "b", "text": "outline added", "deltas": { + "fontSize": { + "ours": "10px", + "ref": "9px" + }, + "textAlign": { + "ours": "start", + "ref": "right" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "78px", + "ref": "64.3281px" + }, + "height": { + "ours": "13px", + "ref": "10px" + }, "rect": { "ours": { - "x": 814, - "y": 2002, - "w": 70, - "h": 11 + "x": 1278, + "y": 1767, + "w": 78, + "h": 13 }, "ref": { - "x": 1290, - "y": 1021, + "x": 1136, + "y": 987, "w": 64, "h": 10 } @@ -1324,7 +9146,300 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>span:nth-child(1)", + "path": "body > main:1 > div:2 > section:2 > div:2 > div:5", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgb(248, 250, 251)", + "ref": "rgb(238, 241, 244)" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "4.8px", + "ref": "normal" + }, + "padding": { + "ours": "6.4px", + "ref": "0px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(203, 211, 218)", + "ref": "rgb(23, 105, 210)" + }, + "width": { + "ours": "564.672px", + "ref": "241.375px" + }, + "height": { + "ours": "358.422px", + "ref": "329px" + }, + "rect": { + "ours": { + "x": 799, + "y": 1799, + "w": 565, + "h": 358 + }, + "ref": { + "x": 715, + "y": 1018, + "w": 241, + "h": 329 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:5 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(228, 232, 235)" + }, + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "207.375px" + }, + "padding": { + "ours": "0px", + "ref": "16px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "549.891px", + "ref": "239.375px" + }, + "height": { + "ours": "325.844px", + "ref": "300px" + }, + "rect": { + "ours": { + "x": 806, + "y": 1806, + "w": 550, + "h": 326 + }, + "ref": { + "x": 716, + "y": 1019, + "w": 239, + "h": 300 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:5 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "439.906px", + "ref": "165.891px" + }, + "height": { + "ours": "325.844px", + "ref": "110.594px" + }, + "rect": { + "ours": { + "x": 806, + "y": 1806, + "w": 440, + "h": 326 + }, + "ref": { + "x": 753, + "y": 1114, + "w": 166, + "h": 111 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:5 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "PNG", + "deltas": { + "width": { + "ours": "28.2031px", + "ref": "26.8594px" + }, + "height": { + "ours": "19px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 1012, + "y": 1951, + "w": 28, + "h": 19 + }, + "ref": { + "x": 822, + "y": 1152, + "w": 27, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:5 > div:1 > div:1 > span:2", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "borderTopColor": { + "ours": "rgb(22, 32, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "84px", + "ref": "76.9844px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 984, + "y": 1975, + "w": 84, + "h": 13 + }, + "ref": { + "x": 797, + "y": 1175, + "w": 77, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:5 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "9px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "alignItems": { + "ours": "baseline", + "ref": "normal" + }, + "padding": { + "ours": "0px", + "ref": "8px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "549.891px", + "ref": "239.375px" + }, + "height": { + "ours": "13px", + "ref": "27px" + }, + "rect": { + "ours": { + "x": 806, + "y": 2137, + "w": 550, + "h": 13 + }, + "ref": { + "x": 716, + "y": 1319, + "w": 239, + "h": 27 + } + } + } + }, + { + "path": "body > main:1 > div:2 > section:2 > div:2 > div:5 > div:2 > span:1", + "type": "style", "tag": "span", "text": "FINAL OUTPUT", "deltas": { @@ -1336,16 +9451,36 @@ "ours": "0.8px", "ref": "normal" }, + "textTransform": { + "ours": "uppercase", + "ref": "none" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "81.6094px", + "ref": "59.3906px" + }, + "height": { + "ours": "13px", + "ref": "10px" + }, "rect": { "ours": { "x": 806, - "y": 2047, - "w": 550, + "y": 2137, + "w": 82, "h": 13 }, "ref": { - "x": 808, - "y": 1378, + "x": 724, + "y": 1328, "w": 59, "h": 10 } @@ -1353,20 +9488,45 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)", - "tag": "span", + "path": "body > main:1 > div:2 > section:2 > div:2 > div:5 > div:2 > b:2", + "type": "style", + "tag": "b", "text": "ready · PNG-24", "deltas": { + "fontSize": { + "ours": "10px", + "ref": "9px" + }, + "textAlign": { + "ours": "start", + "ref": "right" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "84px", + "ref": "69.2812px" + }, + "height": { + "ours": "13px", + "ref": "10px" + }, "rect": { "ours": { - "x": 814, - "y": 2434, - "w": 76, - "h": 11 + "x": 1272, + "y": 2137, + "w": 84, + "h": 13 }, "ref": { - "x": 997, - "y": 1378, + "x": 878, + "y": 1328, "w": 69, "h": 10 } @@ -1374,1939 +9534,329 @@ } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p:nth-child(3)", + "path": "body > main:1 > div:2 > section:2 > p:3", + "type": "style", "tag": "p", - "text": "Output is generated in-browser. Your fil", + "text": "Output is generated in-browser. Your files never leave this device.", "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "564.672px", + "ref": "494.766px" + }, "rect": { "ours": { "x": 799, - "y": 2489, + "y": 2185, "w": 565, "h": 17 }, "ref": { - "x": 799, - "y": 1425, - "w": 565, - "h": 17 - } - } - } - } - ], - "onlyOurs": [ - "/ DEMO", - "+ Add tool", - "AUTO", - "Gradient color", - "DIRECTION", - "135 °", - "OPACITY", - "75%", - "50%", - "25%", - "Automatic subject detection enabled", - "Outline width", - "2 px", - "Outline color", - "Corner radius", - "18 px", - "v0.1.0", - "© 2026" - ], - "onlyRef": [ - "/ \n WORKSPACE", - "COLOR", - "135\n °", - "100", - "75", - "50", - "25", - "2\n px", - "18\n px", - "v2.4.0", - "© 2024" - ], - "counts": { - "tokenLight": 10, - "tokenDark": 16, - "elements": 47, - "onlyOurs": 18, - "onlyRef": 11 - } - }, - { - "route": "/preview/list-tools", - "ref": "list-tools.html", - "tokenDiffs": { - "light": [ - { - "key": "--danger", - "ours": "#e5484d", - "ref": "—" - }, - { - "key": "--success", - "ours": "#25a96a", - "ref": "—" - }, - { - "key": "--text-sm--line-height", - "ours": "—", - "ref": "calc(1.25 / .875)" - }, - { - "key": "--text-xs--line-height", - "ours": "—", - "ref": "calc(1 / .75)" - }, - { - "key": "--font-weight-medium", - "ours": "—", - "ref": "500" - }, - { - "key": "--spacing", - "ours": "—", - "ref": ".25rem" - }, - { - "key": "--text-xs", - "ours": "—", - "ref": ".75rem" - }, - { - "key": "--radius-md", - "ours": "—", - "ref": ".375rem" - }, - { - "key": "--radius-lg", - "ours": "—", - "ref": ".5rem" - }, - { - "key": "--text-sm", - "ours": "—", - "ref": ".875rem" - } - ], - "dark": [ - { - "key": "--panel", - "ours": "#182129", - "ref": "#f8fafb" - }, - { - "key": "--blue", - "ours": "#54a2ff", - "ref": "#1769d2" - }, - { - "key": "--muted", - "ours": "#91a0ac", - "ref": "#6d7883" - }, - { - "key": "--background", - "ours": "#11171d", - "ref": "#eef1f4" - }, - { - "key": "--danger", - "ours": "#ff7479", - "ref": "—" - }, - { - "key": "--foreground", - "ours": "#e8eef2", - "ref": "#17212b" - }, - { - "key": "--success", - "ours": "#25a96a", - "ref": "—" - }, - { - "key": "--line", - "ours": "#33414c", - "ref": "#cbd3da" - }, - { - "key": "--text-sm--line-height", - "ours": "—", - "ref": "calc(1.25 / .875)" - }, - { - "key": "--text-xs--line-height", - "ours": "—", - "ref": "calc(1 / .75)" - }, - { - "key": "--font-weight-medium", - "ours": "—", - "ref": "500" - }, - { - "key": "--spacing", - "ours": "—", - "ref": ".25rem" - }, - { - "key": "--text-xs", - "ours": "—", - "ref": ".75rem" - }, - { - "key": "--radius-md", - "ours": "—", - "ref": ".375rem" - }, - { - "key": "--radius-lg", - "ours": "—", - "ref": ".5rem" - }, - { - "key": "--text-sm", - "ours": "—", - "ref": ".875rem" - } - ] - }, - "elementDiffs": [ - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)", - "tag": "span", - "text": "easy-png-tools", - "deltas": { - "rect": { - "ours": { - "x": 98, - "y": 23, - "w": 118, - "h": 18 - }, - "ref": { - "x": 98, - "y": 23, - "w": 108, + "x": 715, + "y": 1375, + "w": 495, "h": 17 } } } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)", - "tag": "a", - "text": "Workspace", + "path": "body > main:1 > footer:3", + "type": "style", + "tag": "footer", + "text": "", "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" - }, "letterSpacing": { - "ours": "0.48px", + "ours": "0.8px", "ref": "normal" }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "padding": { + "ours": "16px 57.6px", + "ref": "16px 51.2px" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "49px", + "ref": "46px" + }, "rect": { "ours": { - "x": 534, - "y": 24, - "w": 69, - "h": 15 + "x": 0, + "y": 2293, + "w": 1440, + "h": 49 }, "ref": { - "x": 761, - "y": 26, - "w": 49, + "x": 0, + "y": 1483, + "w": 1280, + "h": 46 + } + } + } + }, + { + "path": "body > main:1 > footer:3 > span:1", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "7px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "142.812px", + "ref": "116.984px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 58, + "y": 2311, + "w": 143, + "h": 13 + }, + "ref": { + "x": 51, + "y": 1500, + "w": 117, "h": 12 } } } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)", - "tag": "a", - "text": "Catalog", + "path": "body > main:1 > footer:3 > span:1 > b:1", + "type": "style", + "tag": "b", + "text": "v2.4.0", "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" + "fontWeight": { + "ours": "700", + "ref": "400" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" }, "color": { "ours": "rgb(109, 120, 131)", "ref": "rgb(23, 105, 210)" }, - "letterSpacing": { - "ours": "0.48px", - "ref": "normal" + "display": { + "ours": "inline", + "ref": "block" }, - "rect": { - "ours": { - "x": 621, - "y": 24, - "w": 54, - "h": 15 - }, - "ref": { - "x": 832, - "y": 26, - "w": 39, - "h": 12 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)", - "tag": "a", - "text": "Gradient", - "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" - }, - "letterSpacing": { - "ours": "0.48px", - "ref": "normal" - }, - "rect": { - "ours": { - "x": 693, - "y": 24, - "w": 61, - "h": 15 - }, - "ref": { - "x": 893, - "y": 26, - "w": 44, - "h": 12 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)", - "tag": "a", - "text": "Background remover", - "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" - }, - "letterSpacing": { - "ours": "0.48px", - "ref": "normal" - }, - "rect": { - "ours": { - "x": 773, - "y": 24, - "w": 138, - "h": 15 - }, - "ref": { - "x": 959, - "y": 26, - "w": 99, - "h": 12 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)", - "tag": "button", - "text": "RU", - "deltas": { - "letterSpacing": { - "ours": "0.6px", - "ref": "normal" - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)", - "tag": "button", - "text": "EN", - "deltas": { - "letterSpacing": { - "ours": "0.6px", - "ref": "normal" - }, - "rect": { - "ours": { - "x": 1349, - "y": 19, - "w": 32, - "h": 25 - }, - "ref": { - "x": 1352, - "y": 20, - "w": 29, - "h": 24 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(1)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Convert JPG to PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 104, - "y": 302, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 494, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(2)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Convert WebP to PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 364, - "y": 311, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 610, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(7)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "PNG to Base64", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 364, - "y": 429, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 726, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(9)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "PNG to Data URI", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 885, - "y": 429, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 842, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(17)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Convert PNG to JPG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 364, - "y": 717, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 958, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(3)>div:nth-child(2)>a:nth-child(8)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Round corners PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 625, - "y": 1239, - "w": 175, - "h": 19 - }, - "ref": { - "x": 807, - "y": 726, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(3)>div:nth-child(2)>a:nth-child(11)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Outline PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 104, - "y": 1384, - "w": 175, - "h": 19 - }, - "ref": { - "x": 807, - "y": 842, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(7)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Grayscale PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 364, - "y": 2096, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 1276, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(8)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Invert colors PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 625, - "y": 2104, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 1392, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(10)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Change PNG opacity", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 1146, - "y": 2096, - "w": 175, - "h": 19 - }, - "ref": { - "x": 807, - "y": 958, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(20)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Temperature PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 1146, - "y": 2361, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 1624, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(1)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Resize PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 104, - "y": 2731, - "w": 175, - "h": 19 - }, - "ref": { - "x": 807, - "y": 1160, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(2)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Crop PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 364, - "y": 2740, - "w": 175, - "h": 19 - }, - "ref": { - "x": 807, - "y": 1276, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(3)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Rotate PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 625, - "y": 2748, - "w": 175, - "h": 19 - }, - "ref": { - "x": 807, - "y": 1392, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(4)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Flip PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 885, - "y": 2757, - "w": 175, - "h": 19 - }, - "ref": { - "x": 807, - "y": 1508, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(5)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Add padding to PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 1146, - "y": 2748, - "w": 175, - "h": 19 - }, - "ref": { - "x": 807, - "y": 1624, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(1)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Blur PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 104, - "y": 3396, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 1826, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(2)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Sharpen PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 364, - "y": 3387, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 1942, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(3)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Vignette PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 625, - "y": 3404, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 2058, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(8)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "JPEG artifacts", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 625, - "y": 3540, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 2174, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(8)>div:nth-child(2)>a:nth-child(9)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "PNG info", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 885, - "y": 4142, - "w": 175, - "h": 19 - }, - "ref": { - "x": 807, - "y": 1826, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(8)>div:nth-child(2)>a:nth-child(13)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "PNG orientation", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 625, - "y": 4287, - "w": 175, - "h": 19 - }, - "ref": { - "x": 807, - "y": 2174, - "w": 488, - "h": 15 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(9)>div:nth-child(2)>a:nth-child(7)>span:nth-child(2)>span:nth-child(1)", - "tag": "span", - "text": "Create gradient PNG", - "deltas": { - "fontFamily": { - "ours": "\"IBM Plex Sans\", sans-serif", - "ref": "\"IBM Plex Mono\", monospace" - }, - "fontSize": { - "ours": "14.4px", - "ref": "13px" - }, - "rect": { - "ours": { - "x": 364, - "y": 4632, - "w": 175, - "h": 19 - }, - "ref": { - "x": 131, - "y": 1160, - "w": 488, - "h": 15 - } - } - } - } - ], - "onlyOurs": [ - "/ LIST-TOOLS", - "CATALOG", - "All tools", - "Каталог всех PNG-инструментов, сгруппиро", - "convert", - "Convert", - "Opens a JPEG and saves it as lossless PN", - "Re-encodes a WebP image into universal P", - "Convert GIF to PNG", - "Extracts the first frame of a GIF animat", - "Convert BMP to PNG", - "Re-encodes BMP into compact lossless PNG", - "Convert ICO to PNG", - "Turns an .ico icon into a regular PNG of", - "Convert PNG to BMP", - "Saves the image as 24-bit BMP without an", - "Encodes the image into a base64 string f", - "Base64 to PNG", - "Decodes a base64 string or data-uri back", - "Builds a full data-uri (data:image/png;b", - "Data URI to PNG", - "Decodes data:image/…;base64,… back into ", - "PNG to HEX pixels", - "Shows all pixels as rrggbbaa hex values ", - "HEX pixels to PNG", - "Assembles an image from rrggbbaa hex val", - "PNG to Bytes", - "Lists every pixel as four decimal bytes ", - "Bytes to PNG", - "Assembles an image from decimal RGBA byt", - "PNG to RGB Values", - "Lists every pixel as rgba(r, g, b, a), o", - "RGB Values to PNG", - "Assembles an image from rgba(r, g, b, a)", - "Transparency is composited over the chos", - "Convert PNG to WebP", - "Re-encodes the image into WebP with adju", - "Compress PNG", - "Shrinks the PNG by reducing its palette ", - "Reduce PNG to Size", - "Binary-searches the palette size until t", - "SVG to PNG", - "Decodes SVG markup into a raster image. ", - "alpha", - "Alpha & transparency", - "Circle Mask PNG", - "Cuts the image into a circle. Diameter i", - "Square Mask PNG", - "Cuts the image into a rectangle with sid", - "Star Mask PNG", - "Cuts the image into an n-pointed star wi", - "Wavy Mask PNG", - "Cuts the image into a wavy-edged circle:", - "Remove alpha channel PNG", - "Composites the image over a white backgr", - "Set alpha channel PNG", - "Assigns the same opacity to all pixels; ", - "Extract alpha mask PNG", - "Turns transparency into a black-and-whit", - "Clips corners by a radius set as a perce" - ], - "onlyRef": [ - "/ \n CATALOG", - "/", - "EASY-PNG-TOOLS / CATALOG", - "Tool catalog", - "Focused utilities for working with PNG. ", - "32", - "ALL", - "CONVERT", - "TRANSPARENCY", - "COLOR", - "GEOMETRY", - "FILTERS", - "ANALYZE", - "05\n TOOLS", - "Re-encode JPEG files as lossless PNG whi", - "01", - "Turn WebP images into a universal PNG fo", - "02", - "Encode an image as a base64 string for e", - "03", - "Build a complete data URI ready for HTML", - "04", - "Composite transparency over a selected b", - "05", - "Remove background PNG", - "Remove a solid background by color, tole", - "Extract alpha mask", - "Turn the alpha channel into a clean blac", - "Clip the image corners by a precise radi", - "Add a colored ring around opaque content", - "Multiply the alpha channel while keeping", - "Generate a smooth transition between two", - "Convert the image to luminance-based sha", - "Invert every color channel while leaving", - "Brightness & contrast", - "Adjust brightness and contrast across a ", - "Make an image warmer or cooler with a si", - "Scale an image with bilinear interpolati", - "Cut a rectangular area with exact coordi", - "Rotate by 90, 180, or 270 degrees withou", - "Mirror the image horizontally or vertica", - "Expand the canvas on all sides by a chos", - "04\n TOOLS", - "Apply a fast Gaussian-style blur with tr", - "Emphasize edges with an adjustable sharp", - "Smoothly darken the image edges while pr", - "Simulate low-quality JPEG recompression ", - "Inspect dimensions, alpha presence, and ", - "Check grayscale", - "Report whether the image contains only s", - "Check transparency", - "Detect transparent and semi-transparent ", - "Classify the image as portrait, landscap", - "•" - ], - "counts": { - "tokenLight": 10, - "tokenDark": 16, - "elements": 30, - "onlyOurs": 257, - "onlyRef": 54 - } - }, - { - "route": "/preview/tools/linear-gradient-png", - "ref": "gradient.html", - "tokenDiffs": { - "light": [ - { - "key": "--danger", - "ours": "#e5484d", - "ref": "—" - }, - { - "key": "--success", - "ours": "#25a96a", - "ref": "—" - }, - { - "key": "--text-sm--line-height", - "ours": "—", - "ref": "calc(1.25 / .875)" - }, - { - "key": "--text-xs--line-height", - "ours": "—", - "ref": "calc(1 / .75)" - }, - { - "key": "--font-weight-medium", - "ours": "—", - "ref": "500" - }, - { - "key": "--spacing", - "ours": "—", - "ref": ".25rem" - }, - { - "key": "--text-xs", - "ours": "—", - "ref": ".75rem" - }, - { - "key": "--radius-md", - "ours": "—", - "ref": ".375rem" - }, - { - "key": "--radius-lg", - "ours": "—", - "ref": ".5rem" - }, - { - "key": "--text-sm", - "ours": "—", - "ref": ".875rem" - } - ], - "dark": [ - { - "key": "--panel", - "ours": "#182129", - "ref": "#f8fafb" - }, - { - "key": "--blue", - "ours": "#54a2ff", - "ref": "#1769d2" - }, - { - "key": "--muted", - "ours": "#91a0ac", - "ref": "#6d7883" - }, - { - "key": "--background", - "ours": "#11171d", - "ref": "#eef1f4" - }, - { - "key": "--danger", - "ours": "#ff7479", - "ref": "—" - }, - { - "key": "--foreground", - "ours": "#e8eef2", - "ref": "#17212b" - }, - { - "key": "--success", - "ours": "#25a96a", - "ref": "—" - }, - { - "key": "--line", - "ours": "#33414c", - "ref": "#cbd3da" - }, - { - "key": "--text-sm--line-height", - "ours": "—", - "ref": "calc(1.25 / .875)" - }, - { - "key": "--text-xs--line-height", - "ours": "—", - "ref": "calc(1 / .75)" - }, - { - "key": "--font-weight-medium", - "ours": "—", - "ref": "500" - }, - { - "key": "--spacing", - "ours": "—", - "ref": ".25rem" - }, - { - "key": "--text-xs", - "ours": "—", - "ref": ".75rem" - }, - { - "key": "--radius-md", - "ours": "—", - "ref": ".375rem" - }, - { - "key": "--radius-lg", - "ours": "—", - "ref": ".5rem" - }, - { - "key": "--text-sm", - "ours": "—", - "ref": ".875rem" - } - ] - }, - "elementDiffs": [ - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)", - "tag": "span", - "text": "easy-png-tools", - "deltas": { - "rect": { - "ours": { - "x": 98, - "y": 23, - "w": 118, - "h": 18 - }, - "ref": { - "x": 98, - "y": 23, - "w": 108, - "h": 17 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)", - "tag": "a", - "text": "Workspace", - "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" - }, - "letterSpacing": { - "ours": "0.48px", - "ref": "normal" - }, - "rect": { - "ours": { - "x": 596, - "y": 24, - "w": 69, - "h": 15 - }, - "ref": { - "x": 798, - "y": 26, - "w": 49, - "h": 12 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)", - "tag": "a", - "text": "Catalog", - "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" - }, - "letterSpacing": { - "ours": "0.48px", - "ref": "normal" - }, - "rect": { - "ours": { - "x": 683, - "y": 24, - "w": 54, - "h": 15 - }, - "ref": { - "x": 870, - "y": 26, - "w": 39, - "h": 12 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)", - "tag": "a", - "text": "Gradient", - "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" - }, - "color": { + "borderTopColor": { "ours": "rgb(109, 120, 131)", - "ref": "rgb(23, 105, 210)" + "ref": "rgb(203, 211, 218)" }, - "letterSpacing": { - "ours": "0.48px", - "ref": "normal" + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "33px" + }, + "height": { + "ours": "auto", + "ref": "12px" }, "rect": { "ours": { - "x": 754, - "y": 24, - "w": 61, - "h": 15 + "x": 160, + "y": 2311, + "w": 41, + "h": 13 }, "ref": { - "x": 930, - "y": 26, - "w": 44, + "x": 135, + "y": 1500, + "w": 33, "h": 12 } } } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)", - "tag": "a", - "text": "Background remover", - "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" - }, - "letterSpacing": { - "ours": "0.48px", - "ref": "normal" - }, - "rect": { - "ours": { - "x": 834, - "y": 24, - "w": 138, - "h": 15 - }, - "ref": { - "x": 996, - "y": 26, - "w": 99, - "h": 12 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)", - "tag": "button", - "text": "RU", - "deltas": { - "letterSpacing": { - "ours": "0.6px", - "ref": "normal" - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)", - "tag": "button", - "text": "EN", - "deltas": { - "letterSpacing": { - "ours": "0.6px", - "ref": "normal" - }, - "rect": { - "ours": { - "x": 1349, - "y": 19, - "w": 32, - "h": 25 - }, - "ref": { - "x": 1352, - "y": 20, - "w": 29, - "h": 24 - } - } - } - } - ], - "onlyOurs": [ - "/ TOOLS / LINEAR-GRADIENT-PNG", - "STEPS", - "Pipeline", - "AUTO", - "01", - "generate", - "Create gradient PNG", - "Width", - "Height", - "Start color", - "End color", - "Direction", - "Horizontal", - "Vertical", - "Add step", - "Split PNG into HSL", - "Split PNG into HSV", - "Split PNG into HSI", - "Convert PNG to CMYK Colors", - "Convert PNG to YCbCr Colors", - "Convert PNG to LAB Colors", - "Show Transparent Areas PNG", - "Show Grayscale Pixels PNG", - "Show Color Pixels PNG", - "Light Pixel Mask PNG", - "Dark Pixel Mask PNG", - "Unique Color Mask PNG", - "Convert JPG to PNG", - "Convert WebP to PNG", - "Convert GIF to PNG", - "Convert BMP to PNG", - "Convert ICO to PNG", - "Convert PNG to BMP", - "Resize PNG", - "Crop PNG", - "Rotate PNG", - "Flip PNG", - "Add padding to PNG", - "Add border to PNG", - "Fit PNG onto background", - "Tile PNG", - "Circle Mask PNG", - "Square Mask PNG", - "Star Mask PNG", - "Wavy Mask PNG", - "Center PNG by content", - "Blur PNG", - "Sharpen PNG", - "Grayscale PNG", - "Invert colors PNG", - "Brightness & contrast PNG", - "Change PNG opacity", - "Sepia effect", - "Change hue PNG", - "Extract channel PNG", - "Swap channels PNG", - "Black & white threshold PNG", - "Posterize PNG", - "Two colors PNG", - "Convert PNG to JPG" - ], - "onlyRef": [ - "/ \n GRADIENT", - "/", - "Gradient background.", - "Create a clean, export-ready gradient wi", - "GRADIENT SETTINGS", - "Configure output", - "TOOL 01", - "GRADIENT TYPE", - "Linear", - "Radial", - "COLOR STOPS", - "→", - "135\n °", - "0° →", - "45° ↗", - "90° ↑", - "135° ↖", - "180° ←", - "225° ↙", - "270° ↓", - "315° ↘", - "100\n %", - "OUTPUT PREVIEW", - "gradient.png", - "PNG", - "GENERATED CSS", - "background: linear-gradient(135deg, #176", - "v2.4.0", - "gradient tool · local-only", - "© 2024" - ], - "counts": { - "tokenLight": 10, - "tokenDark": 16, - "elements": 7, - "onlyOurs": 111, - "onlyRef": 30 - } - }, - { - "route": "/preview/tools/remove-background-png", - "ref": "background-remover.html", - "tokenDiffs": { - "light": [ - { - "key": "--danger", - "ours": "#e5484d", - "ref": "—" - }, - { - "key": "--success", - "ours": "#25a96a", - "ref": "—" - }, - { - "key": "--text-sm--line-height", - "ours": "—", - "ref": "calc(1.25 / .875)" - }, - { - "key": "--text-xs--line-height", - "ours": "—", - "ref": "calc(1 / .75)" - }, - { - "key": "--font-weight-medium", - "ours": "—", - "ref": "500" - }, - { - "key": "--spacing", - "ours": "—", - "ref": ".25rem" - }, - { - "key": "--text-xs", - "ours": "—", - "ref": ".75rem" - }, - { - "key": "--radius-md", - "ours": "—", - "ref": ".375rem" - }, - { - "key": "--radius-lg", - "ours": "—", - "ref": ".5rem" - }, - { - "key": "--text-sm", - "ours": "—", - "ref": ".875rem" - } - ], - "dark": [ - { - "key": "--panel", - "ours": "#182129", - "ref": "#f8fafb" - }, - { - "key": "--blue", - "ours": "#54a2ff", - "ref": "#1769d2" - }, - { - "key": "--muted", - "ours": "#91a0ac", - "ref": "#6d7883" - }, - { - "key": "--background", - "ours": "#11171d", - "ref": "#eef1f4" - }, - { - "key": "--danger", - "ours": "#ff7479", - "ref": "—" - }, - { - "key": "--foreground", - "ours": "#e8eef2", - "ref": "#17212b" - }, - { - "key": "--success", - "ours": "#25a96a", - "ref": "—" - }, - { - "key": "--line", - "ours": "#33414c", - "ref": "#cbd3da" - }, - { - "key": "--text-sm--line-height", - "ours": "—", - "ref": "calc(1.25 / .875)" - }, - { - "key": "--text-xs--line-height", - "ours": "—", - "ref": "calc(1 / .75)" - }, - { - "key": "--font-weight-medium", - "ours": "—", - "ref": "500" - }, - { - "key": "--spacing", - "ours": "—", - "ref": ".25rem" - }, - { - "key": "--text-xs", - "ours": "—", - "ref": ".75rem" - }, - { - "key": "--radius-md", - "ours": "—", - "ref": ".375rem" - }, - { - "key": "--radius-lg", - "ours": "—", - "ref": ".5rem" - }, - { - "key": "--text-sm", - "ours": "—", - "ref": ".875rem" - } - ] - }, - "elementDiffs": [ - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)", + "path": "body > main:1 > footer:3 > span:2", + "type": "style", "tag": "span", - "text": "easy-png-tools", + "text": "pipeline is local-only", "deltas": { - "rect": { - "ours": { - "x": 98, - "y": 23, - "w": 118, - "h": 18 - }, - "ref": { - "x": 98, - "y": 23, - "w": 108, - "h": 17 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)", - "tag": "a", - "text": "Workspace", - "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" - }, "letterSpacing": { - "ours": "0.48px", + "ours": "0.8px", "ref": "normal" }, - "rect": { - "ours": { - "x": 603, - "y": 24, - "w": 69, - "h": 15 - }, - "ref": { - "x": 780, - "y": 26, - "w": 49, - "h": 12 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)", - "tag": "a", - "text": "Catalog", - "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" + "display": { + "ours": "block", + "ref": "flex" }, - "letterSpacing": { - "ours": "0.48px", - "ref": "normal" + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "7px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "162.609px", + "ref": "140.969px" + }, + "height": { + "ours": "16px", + "ref": "13px" }, "rect": { "ours": { "x": 690, - "y": 24, - "w": 54, - "h": 15 + "y": 2310, + "w": 163, + "h": 16 }, "ref": { - "x": 851, - "y": 26, - "w": 39, - "h": 12 + "x": 612, + "y": 1500, + "w": 141, + "h": 13 } } } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)", - "tag": "a", - "text": "Gradient", + "path": "body > main:1 > footer:3 > span:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" - }, "letterSpacing": { - "ours": "0.48px", + "ours": "0.8px", "ref": "normal" }, - "rect": { - "ours": { - "x": 762, - "y": 24, - "w": 61, - "h": 15 - }, - "ref": { - "x": 912, - "y": 26, - "w": 44, - "h": 12 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)", - "tag": "a", - "text": "Background remover", - "deltas": { - "fontSize": { - "ours": "12px", - "ref": "10px" + "display": { + "ours": "inline", + "ref": "block" }, - "color": { + "borderTopColor": { "ours": "rgb(109, 120, 131)", - "ref": "rgb(23, 105, 210)" + "ref": "rgb(203, 211, 218)" }, - "letterSpacing": { - "ours": "0.48px", - "ref": "normal" + "borderTopStyle": { + "ours": "none", + "ref": "solid" }, "rect": { "ours": { - "x": 841, - "y": 24, - "w": 138, - "h": 15 + "x": 690, + "y": 2310, + "w": 13, + "h": 13 }, "ref": { - "x": 978, - "y": 26, - "w": 99, - "h": 12 + "x": 612, + "y": 1500, + "w": 13, + "h": 13 } } } }, { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)", - "tag": "button", - "text": "RU", - "deltas": { - "letterSpacing": { - "ours": "0.6px", - "ref": "normal" - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)", - "tag": "button", - "text": "EN", - "deltas": { - "letterSpacing": { - "ours": "0.6px", - "ref": "normal" - }, - "rect": { - "ours": { - "x": 1349, - "y": 19, - "w": 32, - "h": 25 - }, - "ref": { - "x": 1352, - "y": 20, - "w": 29, - "h": 24 - } - } - } - }, - { - "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>section:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(1)", + "path": "body > main:1 > footer:3 > span:3", + "type": "style", "tag": "span", - "text": "RESULT", + "text": "© 2024", "deltas": { "letterSpacing": { - "ours": "1px", + "ours": "0.8px", "ref": "normal" }, - "lineHeight": { - "ours": "12px", - "ref": "normal" + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "7px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "40.8125px", + "ref": "33px" + }, + "height": { + "ours": "13px", + "ref": "12px" }, "rect": { "ours": { - "x": 726, - "y": 125, - "w": 108, - "h": 12 + "x": 1342, + "y": 2311, + "w": 41, + "h": 13 }, "ref": { - "x": 954, - "y": 467, + "x": 1196, + "y": 1500, "w": 33, "h": 12 } @@ -3314,104 +9864,23899 @@ } } ], - "onlyOurs": [ - "/ TOOLS / REMOVE-BACKGROUND-PNG", - "STEPS", - "Pipeline", - "AUTO", - "01", - "alpha", - "Remove background PNG (smart)", - "Background color", - "Similarity tolerance, %", - "10", - "Outer regions only", - "Edge smoothing, passes", - "1", - "Add step", - "Split PNG into HSL", - "Split PNG into HSV", - "Split PNG into HSI", - "Convert PNG to CMYK Colors", - "Convert PNG to YCbCr Colors", - "Convert PNG to LAB Colors", - "Show Transparent Areas PNG", - "Show Grayscale Pixels PNG", - "Show Color Pixels PNG", - "Light Pixel Mask PNG", - "Dark Pixel Mask PNG", - "Unique Color Mask PNG", - "Convert JPG to PNG", - "Convert WebP to PNG", - "Convert GIF to PNG", - "Convert BMP to PNG", - "Convert ICO to PNG", - "Convert PNG to BMP", - "Resize PNG", - "Crop PNG", - "Rotate PNG", - "Flip PNG", - "Add padding to PNG", - "Add border to PNG", - "Fit PNG onto background", - "Tile PNG", - "Circle Mask PNG", - "Square Mask PNG", - "Star Mask PNG", - "Wavy Mask PNG", - "Center PNG by content", - "Blur PNG", - "Sharpen PNG", - "Grayscale PNG", - "Invert colors PNG", - "Brightness & contrast PNG", - "Change PNG opacity", - "Sepia effect", - "Change hue PNG", - "Extract channel PNG", - "Swap channels PNG", - "Black & white threshold PNG", - "Posterize PNG", - "Two colors PNG", - "Convert PNG to JPG", - "Convert PNG to WebP" - ], - "onlyRef": [ - "/ \n BACKGROUND REMOVER", - "/", - "Remove background.", - "Select a background color and tune the e", - "REMOVER SETTINGS", - "Configure detection", - "TOOL 02", - "BACKGROUND COLOR", - "72\n %", - "strict edges", - "more removal", - "OUTER COLOR ONLY", - "Only remove connected background pixels ", - "SHOW MASK", - "Preview the detected transparency mask.", - "SOURCE / RESULT", - "comparison.png", - "SOURCE", - "original.png", - "OBJECT", - "1200 × 800", - "removed-bg.png", - "PNG", - "PNG-24", - "ENABLED", - "v2.4.0", - "background remover · local-only", - "© 2024" - ], + "tokenDiffs": { + "light": [ + { + "key": "--danger", + "ours": "#e5484d", + "ref": "—" + }, + { + "key": "--success", + "ours": "#25a96a", + "ref": "—" + }, + { + "key": "--text-sm--line-height", + "ours": "—", + "ref": "calc(1.25 / .875)" + }, + { + "key": "--text-xs--line-height", + "ours": "—", + "ref": "calc(1 / .75)" + }, + { + "key": "--font-weight-medium", + "ours": "—", + "ref": "500" + }, + { + "key": "--spacing", + "ours": "—", + "ref": ".25rem" + }, + { + "key": "--text-xs", + "ours": "—", + "ref": ".75rem" + }, + { + "key": "--radius-md", + "ours": "—", + "ref": ".375rem" + }, + { + "key": "--radius-lg", + "ours": "—", + "ref": ".5rem" + }, + { + "key": "--text-sm", + "ours": "—", + "ref": ".875rem" + } + ], + "dark": [ + { + "key": "--panel", + "ours": "#182129", + "ref": "#f8fafb" + }, + { + "key": "--blue", + "ours": "#54a2ff", + "ref": "#1769d2" + }, + { + "key": "--muted", + "ours": "#91a0ac", + "ref": "#6d7883" + }, + { + "key": "--background", + "ours": "#11171d", + "ref": "#eef1f4" + }, + { + "key": "--danger", + "ours": "#ff7479", + "ref": "—" + }, + { + "key": "--foreground", + "ours": "#e8eef2", + "ref": "#17212b" + }, + { + "key": "--success", + "ours": "#25a96a", + "ref": "—" + }, + { + "key": "--line", + "ours": "#33414c", + "ref": "#cbd3da" + }, + { + "key": "--text-sm--line-height", + "ours": "—", + "ref": "calc(1.25 / .875)" + }, + { + "key": "--text-xs--line-height", + "ours": "—", + "ref": "calc(1 / .75)" + }, + { + "key": "--font-weight-medium", + "ours": "—", + "ref": "500" + }, + { + "key": "--spacing", + "ours": "—", + "ref": ".25rem" + }, + { + "key": "--text-xs", + "ours": "—", + "ref": ".75rem" + }, + { + "key": "--radius-md", + "ours": "—", + "ref": ".375rem" + }, + { + "key": "--radius-lg", + "ours": "—", + "ref": ".5rem" + }, + { + "key": "--text-sm", + "ours": "—", + "ref": ".875rem" + } + ] + }, "counts": { + "tagMismatch": 0, + "textMismatch": 0, + "added": 0, + "removed": 0, + "styleDiffs": 215, + "rectDiffs": 215, + "fieldDiffs": 1497, "tokenLight": 10, - "tokenDark": 16, - "elements": 8, - "onlyOurs": 110, - "onlyRef": 28 + "tokenDark": 16 + } + }, + { + "route": "/preview/list-tools", + "ref": "list-tools.html", + "deltas": [ + { + "path": "body", + "type": "style", + "tag": "body", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "2315.59px", + "ref": "2409.98px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 2316 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 2410 + } + } + } + }, + { + "path": "body > main:1", + "type": "style", + "tag": "main", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(238, 241, 244)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "2315.59px", + "ref": "2409.98px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 2316 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 2410 + } + } + } + }, + { + "path": "body > main:1 > header:1", + "type": "style", + "tag": "header", + "text": "", + "deltas": { + "padding": { + "ours": "0px 57.6px", + "ref": "0px 51.2px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 64 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 64 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "232.422px", + "ref": "218.062px" + }, + "rect": { + "ours": { + "x": 58, + "y": 17, + "w": 232, + "h": 30 + }, + "ref": { + "x": 51, + "y": 17, + "w": 218, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1 > span:1", + "type": "style", + "tag": "span", + "text": "EP", + "deltas": { + "borderTopColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 58, + "y": 17, + "w": 30, + "h": 30 + }, + "ref": { + "x": 51, + "y": 17, + "w": 30, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1 > span:2", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "117.609px", + "ref": "107.766px" + }, + "height": { + "ours": "18px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 98, + "y": 23, + "w": 118, + "h": 18 + }, + "ref": { + "x": 91, + "y": 23, + "w": 108, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1 > span:3", + "type": "style", + "tag": "span", + "text": "/ CATALOG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "64.8125px", + "ref": "60.2969px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 225, + "y": 25, + "w": 65, + "h": 13 + }, + "ref": { + "x": 209, + "y": 26, + "w": 60, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2", + "type": "style", + "tag": "nav", + "text": "", + "deltas": { + "gap": { + "ours": "18px", + "ref": "22px" + }, + "margin": { + "ours": "0px 0px 0px 24px", + "ref": "0px 28px 0px 337.797px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "376.594px", + "ref": "296.938px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 504, + "y": 24, + "w": 377, + "h": 15 + }, + "ref": { + "x": 607, + "y": 26, + "w": 297, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:1", + "type": "style", + "tag": "a", + "text": "Workspace", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "69.125px", + "ref": "49.4844px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 504, + "y": 24, + "w": 69, + "h": 15 + }, + "ref": { + "x": 607, + "y": 26, + "w": 49, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:2", + "type": "style", + "tag": "a", + "text": "Catalog", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "53.7656px", + "ref": "38.5px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 591, + "y": 24, + "w": 54, + "h": 15 + }, + "ref": { + "x": 679, + "y": 26, + "w": 39, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:3", + "type": "style", + "tag": "a", + "text": "Gradient", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "61.4531px", + "ref": "43.9844px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 663, + "y": 24, + "w": 61, + "h": 15 + }, + "ref": { + "x": 739, + "y": 26, + "w": 44, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:4", + "type": "style", + "tag": "a", + "text": "Background remover", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "138.25px", + "ref": "98.9688px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 742, + "y": 24, + "w": 138, + "h": 15 + }, + "ref": { + "x": 805, + "y": 26, + "w": 99, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "311.812px", + "ref": "296.828px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1071, + "y": 18, + "w": 312, + "h": 28 + }, + "ref": { + "x": 932, + "y": 17, + "w": 297, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > span:1", + "type": "style", + "tag": "span", + "text": "LOCAL MODE / READY", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "137.406px", + "ref": "126.375px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1071, + "y": 25, + "w": 137, + "h": 13 + }, + "ref": { + "x": 932, + "y": 26, + "w": 126, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > span:1 > i:1", + "type": "style", + "tag": "i", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "8px", + "ref": "6px" + }, + "height": { + "ours": "8px", + "ref": "6px" + }, + "boxShadow": { + "ours": "color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px", + "ref": "none" + }, + "rect": { + "ours": { + "x": 1071, + "y": 28, + "w": 8, + "h": 8 + }, + "ref": { + "x": 932, + "y": 29, + "w": 6, + "h": 6 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:2", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "grid" + }, + "justifyContent": { + "ours": "center", + "ref": "normal" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "17px" + }, + "width": { + "ours": "28px", + "ref": "29px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1224, + "y": 18, + "w": 28, + "h": 28 + }, + "ref": { + "x": 1074, + "y": 17, + "w": 29, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "16px", + "ref": "17px" + }, + "height": { + "ours": "16px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 1230, + "y": 24, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1080, + "y": 23, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:3", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "grid" + }, + "justifyContent": { + "ours": "center", + "ref": "normal" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "17px" + }, + "width": { + "ours": "28px", + "ref": "29px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1268, + "y": 18, + "w": 28, + "h": 28 + }, + "ref": { + "x": 1119, + "y": 17, + "w": 29, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:3 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "16px", + "ref": "17px" + }, + "height": { + "ours": "16px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 1274, + "y": 24, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1125, + "y": 23, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "70.4062px", + "ref": "64.4531px" + }, + "height": { + "ours": "27px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 1312, + "y": 18, + "w": 70, + "h": 27 + }, + "ref": { + "x": 1164, + "y": 19, + "w": 64, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4 > button:1", + "type": "style", + "tag": "button", + "text": "RU", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "width": { + "ours": "31.2031px", + "ref": "29px" + }, + "height": { + "ours": "25px", + "ref": "24px" + }, + "rect": { + "ours": { + "x": 1313, + "y": 19, + "w": 31, + "h": 25 + }, + "ref": { + "x": 1165, + "y": 20, + "w": 29, + "h": 24 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4 > span:2", + "type": "style", + "tag": "span", + "text": "/", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Mono\", monospace", + "ref": "\"IBM Plex Sans\", sans-serif" + }, + "fontSize": { + "ours": "10px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 33, 43)" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "6px", + "ref": "4.45312px" + }, + "height": { + "ours": "13px", + "ref": "24px" + }, + "rect": { + "ours": { + "x": 1344, + "y": 25, + "w": 6, + "h": 13 + }, + "ref": { + "x": 1194, + "y": 20, + "w": 4, + "h": 24 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4 > button:3", + "type": "style", + "tag": "button", + "text": "EN", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "width": { + "ours": "31.2031px", + "ref": "29px" + }, + "height": { + "ours": "25px", + "ref": "24px" + }, + "rect": { + "ours": { + "x": 1350, + "y": 19, + "w": 31, + "h": 25 + }, + "ref": { + "x": 1199, + "y": 20, + "w": 29, + "h": 24 + } + } + } + }, + { + "path": "body > main:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "60px 57.6px 72px", + "ref": "60px 51.2px 72px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "2251.59px", + "ref": "2345.98px" + }, + "rect": { + "ours": { + "x": 0, + "y": 64, + "w": 1440, + "h": 2252 + }, + "ref": { + "x": 0, + "y": 64, + "w": 1280, + "h": 2346 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "24px", + "ref": "40px" + }, + "padding": { + "ours": "0px", + "ref": "0px 0px 42px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1324.81px", + "ref": "1177.62px" + }, + "height": { + "ours": "124.594px", + "ref": "182.984px" + }, + "rect": { + "ours": { + "x": 58, + "y": 124, + "w": 1325, + "h": 125 + }, + "ref": { + "x": 51, + "y": 124, + "w": 1178, + "h": 183 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "510.719px", + "ref": "660px" + }, + "height": { + "ours": "124.594px", + "ref": "139.984px" + }, + "rect": { + "ours": { + "x": 58, + "y": 124, + "w": 511, + "h": 125 + }, + "ref": { + "x": 51, + "y": 124, + "w": 660, + "h": 140 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "EASY-PNG-TOOLS / CATALOG", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "2.16px", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 105, 210)" + }, + "margin": { + "ours": "0px 0px 8px", + "ref": "0px 0px 18px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "510.719px", + "ref": "660px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 58, + "y": 124, + "w": 511, + "h": 15 + }, + "ref": { + "x": 51, + "y": 124, + "w": 660, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1 > div:1 > h1:2", + "type": "style", + "tag": "h1", + "text": "Tool catalog", + "deltas": { + "fontSize": { + "ours": "32px", + "ref": "51.2px" + }, + "fontWeight": { + "ours": "700", + "ref": "650" + }, + "lineHeight": { + "ours": "48px", + "ref": "51.2px" + }, + "letterSpacing": { + "ours": "normal", + "ref": "-3.072px" + }, + "margin": { + "ours": "0px", + "ref": "12px 0px 14px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "510.719px", + "ref": "660px" + }, + "height": { + "ours": "48px", + "ref": "51.2031px" + }, + "rect": { + "ours": { + "x": 58, + "y": 147, + "w": 511, + "h": 48 + }, + "ref": { + "x": 51, + "y": 154, + "w": 660, + "h": 51 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1 > div:1 > p:3", + "type": "style", + "tag": "p", + "text": "Focused utilities for working with PNG. Inspect, transform, and export — locally in your browser.", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "15.2px", + "ref": "14px" + }, + "lineHeight": { + "ours": "22.8px", + "ref": "22.4px" + }, + "margin": { + "ours": "8px 0px 0px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "510.719px", + "ref": "660px" + }, + "height": { + "ours": "45.5938px", + "ref": "44.7812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 203, + "w": 511, + "h": 46 + }, + "ref": { + "x": 51, + "y": 219, + "w": 660, + "h": 45 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "16px", + "ref": "14px" + }, + "textAlign": { + "ours": "start", + "ref": "right" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "alignItems": { + "ours": "flex-end", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "14px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "61.2031px", + "ref": "123.625px" + }, + "height": { + "ours": "73.5938px", + "ref": "57.5938px" + }, + "rect": { + "ours": { + "x": 1321, + "y": 175, + "w": 61, + "h": 74 + }, + "ref": { + "x": 1105, + "y": 206, + "w": 124, + "h": 58 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1 > div:2 > b:1", + "type": "style", + "tag": "b", + "text": "32", + "deltas": { + "fontSize": { + "ours": "32px", + "ref": "64px" + }, + "fontWeight": { + "ours": "700", + "ref": "400" + }, + "lineHeight": { + "ours": "normal", + "ref": "57.6px" + }, + "letterSpacing": { + "ours": "normal", + "ref": "-5.12px" + }, + "textAlign": { + "ours": "start", + "ref": "right" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "38.4062px", + "ref": "60.1406px" + }, + "height": { + "ours": "42px", + "ref": "57.5938px" + }, + "rect": { + "ours": { + "x": 1344, + "y": 175, + "w": 38, + "h": 42 + }, + "ref": { + "x": 1105, + "y": 206, + "w": 60, + "h": 58 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1 > div:2 > span:2", + "type": "style", + "tag": "span", + "text": "TOOLS AVAILABLE", + "deltas": { + "lineHeight": { + "ours": "normal", + "ref": "14px" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "margin": { + "ours": "5.6px 0px 0px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "61.2031px", + "ref": "49.4844px" + }, + "height": { + "ours": "26px", + "ref": "28px" + }, + "rect": { + "ours": { + "x": 1321, + "y": 223, + "w": 61, + "h": 26 + }, + "ref": { + "x": 1179, + "y": 221, + "w": 49, + "h": 28 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1 > div:2 > span:2 > br:1", + "type": "style", + "tag": "br", + "text": "", + "deltas": { + "lineHeight": { + "ours": "normal", + "ref": "14px" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 1382, + "y": 223, + "w": 0, + "h": 13 + }, + "ref": { + "x": 1229, + "y": 222, + "w": 0, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "16px", + "ref": "24px" + }, + "padding": { + "ours": "20px 0px", + "ref": "24px 0px 42px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1324.81px", + "ref": "1177.62px" + }, + "height": { + "ours": "75px", + "ref": "108px" + }, + "rect": { + "ours": { + "x": 58, + "y": 249, + "w": 1325, + "h": 75 + }, + "ref": { + "x": 51, + "y": 307, + "w": 1178, + "h": 108 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > label:1", + "type": "style", + "tag": "label", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgb(248, 250, 251)", + "ref": "rgba(0, 0, 0, 0)" + }, + "gap": { + "ours": "8px", + "ref": "12px" + }, + "padding": { + "ours": "8px 12px", + "ref": "12px 14px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "202px", + "ref": "420px" + }, + "height": { + "ours": "35px", + "ref": "42px" + }, + "rect": { + "ours": { + "x": 58, + "y": 269, + "w": 202, + "h": 35 + }, + "ref": { + "x": 51, + "y": 331, + "w": 420, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > label:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "16px", + "ref": "14.8906px" + }, + "rect": { + "ours": { + "x": 71, + "y": 278, + "w": 16, + "h": 16 + }, + "ref": { + "x": 66, + "y": 344, + "w": 15, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > label:1 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "padding": { + "ours": "1px 2px", + "ref": "0px" + }, + "width": { + "ours": "152px", + "ref": "363.109px" + }, + "height": { + "ours": "17px", + "ref": "14px" + }, + "rect": { + "ours": { + "x": 95, + "y": 278, + "w": 152, + "h": 17 + }, + "ref": { + "x": 93, + "y": 345, + "w": 363, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gap": { + "ours": "6.4px", + "ref": "6px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "531.484px", + "ref": "480.469px" + }, + "height": { + "ours": "27.7812px", + "ref": "30px" + }, + "rect": { + "ours": { + "x": 851, + "y": 272, + "w": 531, + "h": 28 + }, + "ref": { + "x": 748, + "y": 337, + "w": 480, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 851, + "y": 279, + "w": 15, + "h": 15 + }, + "ref": { + "x": 748, + "y": 344, + "w": 15, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:2 > button:2", + "type": "style", + "tag": "button", + "text": "ALL", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "color": { + "ours": "rgb(255, 255, 255)", + "ref": "rgb(23, 105, 210)" + }, + "backgroundColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgba(0, 0, 0, 0)" + }, + "padding": { + "ours": "6.4px 9.6px", + "ref": "8px 10px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "41px", + "ref": "38.5px" + }, + "height": { + "ours": "27.7812px", + "ref": "30px" + }, + "rect": { + "ours": { + "x": 872, + "y": 272, + "w": 41, + "h": 28 + }, + "ref": { + "x": 769, + "y": 337, + "w": 39, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:2 > button:3", + "type": "style", + "tag": "button", + "text": "CONVERT", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "padding": { + "ours": "6.4px 9.6px", + "ref": "8px 10px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(203, 211, 218)", + "ref": "rgba(0, 0, 0, 0)" + }, + "width": { + "ours": "67.3906px", + "ref": "60.5px" + }, + "height": { + "ours": "27.7812px", + "ref": "30px" + }, + "rect": { + "ours": { + "x": 920, + "y": 272, + "w": 67, + "h": 28 + }, + "ref": { + "x": 814, + "y": 337, + "w": 61, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:2 > button:4", + "type": "style", + "tag": "button", + "text": "TRANSPARENCY", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "padding": { + "ours": "6.4px 9.6px", + "ref": "8px 10px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(203, 211, 218)", + "ref": "rgba(0, 0, 0, 0)" + }, + "width": { + "ours": "100.391px", + "ref": "87.9844px" + }, + "height": { + "ours": "27.7812px", + "ref": "30px" + }, + "rect": { + "ours": { + "x": 993, + "y": 272, + "w": 100, + "h": 28 + }, + "ref": { + "x": 880, + "y": 337, + "w": 88, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:2 > button:5", + "type": "style", + "tag": "button", + "text": "COLOR", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "padding": { + "ours": "6.4px 9.6px", + "ref": "8px 10px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(203, 211, 218)", + "ref": "rgba(0, 0, 0, 0)" + }, + "width": { + "ours": "54.1875px", + "ref": "49.5px" + }, + "height": { + "ours": "27.7812px", + "ref": "30px" + }, + "rect": { + "ours": { + "x": 1100, + "y": 272, + "w": 54, + "h": 28 + }, + "ref": { + "x": 974, + "y": 337, + "w": 50, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:2 > button:6", + "type": "style", + "tag": "button", + "text": "GEOMETRY", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "padding": { + "ours": "6.4px 9.6px", + "ref": "8px 10px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(203, 211, 218)", + "ref": "rgba(0, 0, 0, 0)" + }, + "width": { + "ours": "74px", + "ref": "65.9844px" + }, + "height": { + "ours": "27.7812px", + "ref": "30px" + }, + "rect": { + "ours": { + "x": 1161, + "y": 272, + "w": 74, + "h": 28 + }, + "ref": { + "x": 1030, + "y": 337, + "w": 66, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:2 > button:7", + "type": "style", + "tag": "button", + "text": "FILTERS", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "padding": { + "ours": "6.4px 9.6px", + "ref": "8px 10px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(203, 211, 218)", + "ref": "rgba(0, 0, 0, 0)" + }, + "width": { + "ours": "67.3906px", + "ref": "60.5px" + }, + "height": { + "ours": "27.7812px", + "ref": "30px" + }, + "rect": { + "ours": { + "x": 1241, + "y": 272, + "w": 67, + "h": 28 + }, + "ref": { + "x": 1102, + "y": 337, + "w": 61, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:2 > button:8", + "type": "style", + "tag": "button", + "text": "ANALYZE", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "padding": { + "ours": "6.4px 9.6px", + "ref": "8px 10px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(203, 211, 218)", + "ref": "rgba(0, 0, 0, 0)" + }, + "width": { + "ours": "67.3906px", + "ref": "60.5px" + }, + "height": { + "ours": "27.7812px", + "ref": "30px" + }, + "rect": { + "ours": { + "x": 1315, + "y": 272, + "w": 67, + "h": 28 + }, + "ref": { + "x": 1168, + "y": 337, + "w": 61, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "648.406px 648.406px", + "ref": "574.812px 574.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1324.81px", + "ref": "1177.62px" + }, + "rect": { + "ours": { + "x": 58, + "y": 324, + "w": 1325, + "h": 1826 + }, + "ref": { + "x": 51, + "y": 415, + "w": 1178, + "h": 1826 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 324, + "w": 648, + "h": 610 + }, + "ref": { + "x": 51, + "y": 415, + "w": 575, + "h": 610 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.32px" + }, + "alignItems": { + "ours": "baseline", + "ref": "center" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "padding": { + "ours": "0px 0px 8px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "24px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 58, + "y": 324, + "w": 648, + "h": 24 + }, + "ref": { + "x": 51, + "y": 415, + "w": 575, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "CONVERT", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "letterSpacing": { + "ours": "1.68px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "62.1719px", + "ref": "51.5781px" + }, + "height": { + "ours": "15px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 58, + "y": 324, + "w": 62, + "h": 15 + }, + "ref": { + "x": 51, + "y": 415, + "w": 52, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > i:2", + "type": "style", + "tag": "i", + "text": "05 TOOLS", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "54.4062px", + "ref": "54.5625px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 652, + "y": 326, + "w": 54, + "h": 13 + }, + "ref": { + "x": 571, + "y": 415, + "w": 55, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "648.406px", + "ref": "574.812px" + }, + "padding": { + "ours": "0px", + "ref": "14px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "570px", + "ref": "584px" + }, + "rect": { + "ours": { + "x": 58, + "y": 364, + "w": 648, + "h": 570 + }, + "ref": { + "x": 51, + "y": 441, + "w": 575, + "h": 584 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 364, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 455, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 396, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 487, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 407, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 498, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "59px" + }, + "rect": { + "ours": { + "x": 131, + "y": 398, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 478, + "w": 415, + "h": 59 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Convert JPG to PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 398, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 478, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Re-encode JPEG files as lossless PNG while preserving transparency.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "18px", + "ref": "36px" + }, + "rect": { + "ours": { + "x": 131, + "y": 417, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 501, + "w": 415, + "h": 36 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:3", + "type": "style", + "tag": "span", + "text": "01", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 381, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 472, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 409, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 500, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 480, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 571, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 512, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 603, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 523, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 614, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 131, + "y": 514, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 603, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Convert WebP to PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 514, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 603, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Turn WebP images into a universal PNG format for any workflow.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 131, + "y": 533, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 626, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:3", + "type": "style", + "tag": "span", + "text": "02", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 497, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 588, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 525, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 616, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 596, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 687, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 628, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 719, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 639, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 730, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "59px" + }, + "rect": { + "ours": { + "x": 131, + "y": 630, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 710, + "w": 415, + "h": 59 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "PNG to Base64", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 630, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 710, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Encode an image as a base64 string for embedding in code or styles.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "18px", + "ref": "36px" + }, + "rect": { + "ours": { + "x": 131, + "y": 649, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 733, + "w": 415, + "h": 36 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:3", + "type": "style", + "tag": "span", + "text": "03", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 613, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 704, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 641, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 732, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 712, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 803, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 744, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 835, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 755, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 846, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 131, + "y": 746, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 835, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "PNG to Data URI", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 746, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 835, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Build a complete data URI ready for HTML and CSS.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 131, + "y": 765, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 858, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:3", + "type": "style", + "tag": "span", + "text": "04", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 729, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 820, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 757, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 848, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 828, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 919, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 860, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 951, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 871, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 962, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "59px" + }, + "rect": { + "ours": { + "x": 131, + "y": 862, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 942, + "w": 415, + "h": 59 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Convert PNG to JPG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 862, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 942, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Composite transparency over a selected backdrop and export JPEG.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "18px", + "ref": "36px" + }, + "rect": { + "ours": { + "x": 131, + "y": 881, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 965, + "w": 415, + "h": 36 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:3", + "type": "style", + "tag": "span", + "text": "05", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 845, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 936, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 873, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 964, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 324, + "w": 648, + "h": 610 + }, + "ref": { + "x": 654, + "y": 415, + "w": 575, + "h": 610 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.32px" + }, + "alignItems": { + "ours": "baseline", + "ref": "center" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "padding": { + "ours": "0px 0px 8px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "24px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 734, + "y": 324, + "w": 648, + "h": 24 + }, + "ref": { + "x": 654, + "y": 415, + "w": 575, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "TRANSPARENCY", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "letterSpacing": { + "ours": "1.68px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "106.562px", + "ref": "88.4219px" + }, + "height": { + "ours": "15px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 734, + "y": 324, + "w": 107, + "h": 15 + }, + "ref": { + "x": 654, + "y": 415, + "w": 88, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > i:2", + "type": "style", + "tag": "i", + "text": "05 TOOLS", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "54.4062px", + "ref": "54.5625px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1328, + "y": 326, + "w": 54, + "h": 13 + }, + "ref": { + "x": 1174, + "y": 415, + "w": 55, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "648.406px", + "ref": "574.812px" + }, + "padding": { + "ours": "0px", + "ref": "14px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "570px", + "ref": "584px" + }, + "rect": { + "ours": { + "x": 734, + "y": 364, + "w": 648, + "h": 570 + }, + "ref": { + "x": 654, + "y": 441, + "w": 575, + "h": 584 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 364, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 455, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 396, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 487, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 407, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 498, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "55px", + "ref": "59px" + }, + "rect": { + "ours": { + "x": 807, + "y": 389, + "w": 488, + "h": 55 + }, + "ref": { + "x": 727, + "y": 478, + "w": 415, + "h": 59 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Remove background PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 389, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 478, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Remove a solid background by color, tolerance, or edge-connected regions.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 408, + "w": 488, + "h": 36 + }, + "ref": { + "x": 727, + "y": 501, + "w": 415, + "h": 36 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:3", + "type": "style", + "tag": "span", + "text": "01", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 381, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 472, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 409, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 500, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 480, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 571, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 512, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 603, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 523, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 614, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 807, + "y": 514, + "w": 488, + "h": 37 + }, + "ref": { + "x": 727, + "y": 603, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Extract alpha mask", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 514, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 603, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Turn the alpha channel into a clean black-and-white mask.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 533, + "w": 488, + "h": 18 + }, + "ref": { + "x": 727, + "y": 626, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:3", + "type": "style", + "tag": "span", + "text": "02", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 497, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 588, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 525, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 616, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 596, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 687, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 628, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 719, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 639, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 730, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 807, + "y": 630, + "w": 488, + "h": 37 + }, + "ref": { + "x": 727, + "y": 719, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Round corners PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 630, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 719, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Clip the image corners by a precise radius percentage.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 649, + "w": 488, + "h": 18 + }, + "ref": { + "x": 727, + "y": 742, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:3", + "type": "style", + "tag": "span", + "text": "03", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 613, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 704, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 641, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 732, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 712, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 803, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 744, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 835, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 755, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 846, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "59px" + }, + "rect": { + "ours": { + "x": 807, + "y": 746, + "w": 488, + "h": 37 + }, + "ref": { + "x": 727, + "y": 826, + "w": 415, + "h": 59 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Outline PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 746, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 826, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Add a colored ring around opaque content with adjustable thickness.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "18px", + "ref": "36px" + }, + "rect": { + "ours": { + "x": 807, + "y": 765, + "w": 488, + "h": 18 + }, + "ref": { + "x": 727, + "y": 849, + "w": 415, + "h": 36 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:3", + "type": "style", + "tag": "span", + "text": "04", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 729, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 820, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 757, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 848, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 828, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 919, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 860, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 951, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 871, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 962, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "55px", + "ref": "59px" + }, + "rect": { + "ours": { + "x": 807, + "y": 853, + "w": 488, + "h": 55 + }, + "ref": { + "x": 727, + "y": 942, + "w": 415, + "h": 59 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Change PNG opacity", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 853, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 942, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Multiply the alpha channel while keeping the original colors unchanged.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 872, + "w": 488, + "h": 36 + }, + "ref": { + "x": 727, + "y": 965, + "w": 415, + "h": 36 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:3", + "type": "style", + "tag": "span", + "text": "05", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 845, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 936, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 873, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 964, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 990, + "w": 648, + "h": 610 + }, + "ref": { + "x": 51, + "y": 1081, + "w": 575, + "h": 610 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.32px" + }, + "alignItems": { + "ours": "baseline", + "ref": "center" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "padding": { + "ours": "0px 0px 8px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "24px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 58, + "y": 990, + "w": 648, + "h": 24 + }, + "ref": { + "x": 51, + "y": 1081, + "w": 575, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "COLOR", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "letterSpacing": { + "ours": "1.68px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "44.4062px", + "ref": "36.8438px" + }, + "height": { + "ours": "15px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 58, + "y": 990, + "w": 44, + "h": 15 + }, + "ref": { + "x": 51, + "y": 1081, + "w": 37, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:1 > i:2", + "type": "style", + "tag": "i", + "text": "05 TOOLS", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "54.4062px", + "ref": "54.5625px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 652, + "y": 992, + "w": 54, + "h": 13 + }, + "ref": { + "x": 571, + "y": 1081, + "w": 55, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "648.406px", + "ref": "574.812px" + }, + "padding": { + "ours": "0px", + "ref": "14px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "570px", + "ref": "584px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1030, + "w": 648, + "h": 570 + }, + "ref": { + "x": 51, + "y": 1107, + "w": 575, + "h": 584 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1030, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 1121, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 1062, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 1153, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 1073, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 1164, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "55px", + "ref": "59px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1055, + "w": 488, + "h": 55 + }, + "ref": { + "x": 124, + "y": 1144, + "w": 415, + "h": 59 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Create gradient PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1055, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 1144, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Generate a smooth transition between two colors with direction controls.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1074, + "w": 488, + "h": 36 + }, + "ref": { + "x": 124, + "y": 1167, + "w": 415, + "h": 36 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:3", + "type": "style", + "tag": "span", + "text": "01", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 1047, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 1138, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 1075, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 1166, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1146, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 1237, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 1178, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 1269, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 1189, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 1280, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1180, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 1269, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Grayscale PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1180, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 1269, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Convert the image to luminance-based shades of gray.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1199, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 1292, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:3", + "type": "style", + "tag": "span", + "text": "02", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 1163, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 1254, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 1191, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 1282, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1262, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 1353, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 1294, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 1385, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 1305, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 1396, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1296, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 1385, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Invert colors PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1296, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 1385, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Invert every color channel while leaving alpha untouched.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1315, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 1408, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:3", + "type": "style", + "tag": "span", + "text": "03", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 1279, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 1370, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 1307, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 1398, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1378, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 1469, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 1410, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 1501, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 1421, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 1512, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1412, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 1501, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Brightness & contrast", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1412, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 1501, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Adjust brightness and contrast across a controlled range.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1431, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 1524, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:3", + "type": "style", + "tag": "span", + "text": "04", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 1395, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 1486, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 1423, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 1514, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1494, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 1585, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 1526, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 1617, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 1537, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 1628, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1528, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 1617, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Temperature PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1528, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 1617, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Make an image warmer or cooler with a single precise control.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1547, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 1640, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:3", + "type": "style", + "tag": "span", + "text": "05", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 1511, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 1602, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 1539, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 1630, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 990, + "w": 648, + "h": 610 + }, + "ref": { + "x": 654, + "y": 1081, + "w": 575, + "h": 610 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.32px" + }, + "alignItems": { + "ours": "baseline", + "ref": "center" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "padding": { + "ours": "0px 0px 8px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "24px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 734, + "y": 990, + "w": 648, + "h": 24 + }, + "ref": { + "x": 654, + "y": 1081, + "w": 575, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "GEOMETRY", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "letterSpacing": { + "ours": "1.68px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "71.0469px", + "ref": "58.9531px" + }, + "height": { + "ours": "15px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 734, + "y": 990, + "w": 71, + "h": 15 + }, + "ref": { + "x": 654, + "y": 1081, + "w": 59, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:1 > i:2", + "type": "style", + "tag": "i", + "text": "05 TOOLS", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "54.4062px", + "ref": "54.5625px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1328, + "y": 992, + "w": 54, + "h": 13 + }, + "ref": { + "x": 1174, + "y": 1081, + "w": 55, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "648.406px", + "ref": "574.812px" + }, + "padding": { + "ours": "0px", + "ref": "14px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "570px", + "ref": "584px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1030, + "w": 648, + "h": 570 + }, + "ref": { + "x": 654, + "y": 1107, + "w": 575, + "h": 584 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1030, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 1121, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 1062, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 1153, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 1073, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 1164, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "55px", + "ref": "59px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1055, + "w": 488, + "h": 55 + }, + "ref": { + "x": 727, + "y": 1144, + "w": 415, + "h": 59 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Resize PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1055, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 1144, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Scale an image with bilinear interpolation and optional aspect lock.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1074, + "w": 488, + "h": 36 + }, + "ref": { + "x": 727, + "y": 1167, + "w": 415, + "h": 36 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:3", + "type": "style", + "tag": "span", + "text": "01", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 1047, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 1138, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 1075, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 1166, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1146, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 1237, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 1178, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 1269, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 1189, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 1280, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1180, + "w": 488, + "h": 37 + }, + "ref": { + "x": 727, + "y": 1269, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Crop PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1180, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 1269, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Cut a rectangular area with exact coordinates and dimensions.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1199, + "w": 488, + "h": 18 + }, + "ref": { + "x": 727, + "y": 1292, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > span:3", + "type": "style", + "tag": "span", + "text": "02", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 1163, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 1254, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 1191, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 1282, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1262, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 1353, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 1294, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 1385, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 1305, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 1396, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1296, + "w": 488, + "h": 37 + }, + "ref": { + "x": 727, + "y": 1385, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Rotate PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1296, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 1385, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Rotate by 90, 180, or 270 degrees without quality loss.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1315, + "w": 488, + "h": 18 + }, + "ref": { + "x": 727, + "y": 1408, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > span:3", + "type": "style", + "tag": "span", + "text": "03", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 1279, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 1370, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 1307, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 1398, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1378, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 1469, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 1410, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 1501, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 1421, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 1512, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1412, + "w": 488, + "h": 37 + }, + "ref": { + "x": 727, + "y": 1501, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Flip PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1412, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 1501, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Mirror the image horizontally or vertically.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1431, + "w": 488, + "h": 18 + }, + "ref": { + "x": 727, + "y": 1524, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > span:3", + "type": "style", + "tag": "span", + "text": "04", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 1395, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 1486, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 1423, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 1514, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1494, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 1585, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 1526, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 1617, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 1537, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 1628, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1528, + "w": 488, + "h": 37 + }, + "ref": { + "x": 727, + "y": 1617, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Add padding to PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1528, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 1617, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Expand the canvas on all sides by a chosen number of pixels.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1547, + "w": 488, + "h": 18 + }, + "ref": { + "x": 727, + "y": 1640, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > span:3", + "type": "style", + "tag": "span", + "text": "05", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 1511, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 1602, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 1539, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 1630, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1656, + "w": 648, + "h": 494 + }, + "ref": { + "x": 51, + "y": 1747, + "w": 575, + "h": 494 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.32px" + }, + "alignItems": { + "ours": "baseline", + "ref": "center" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "padding": { + "ours": "0px 0px 8px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "24px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1656, + "w": 648, + "h": 24 + }, + "ref": { + "x": 51, + "y": 1747, + "w": 575, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "FILTERS", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "letterSpacing": { + "ours": "1.68px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "62.1719px", + "ref": "51.5781px" + }, + "height": { + "ours": "15px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1656, + "w": 62, + "h": 15 + }, + "ref": { + "x": 51, + "y": 1747, + "w": 52, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:1 > i:2", + "type": "style", + "tag": "i", + "text": "04 TOOLS", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "54.4062px", + "ref": "54.5625px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 652, + "y": 1658, + "w": 54, + "h": 13 + }, + "ref": { + "x": 571, + "y": 1747, + "w": 55, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "648.406px", + "ref": "574.812px" + }, + "padding": { + "ours": "0px", + "ref": "14px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "454px", + "ref": "468px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1696, + "w": 648, + "h": 454 + }, + "ref": { + "x": 51, + "y": 1773, + "w": 575, + "h": 468 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1696, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 1787, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 1728, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 1819, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 1739, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 1830, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "59px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1730, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 1810, + "w": 415, + "h": 59 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Blur PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1730, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 1810, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Apply a fast Gaussian-style blur with transparent edge handling.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "18px", + "ref": "36px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1749, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 1833, + "w": 415, + "h": 36 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:3", + "type": "style", + "tag": "span", + "text": "01", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 1713, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 1804, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 1741, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 1832, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1812, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 1903, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 1844, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 1935, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 1855, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 1946, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1846, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 1935, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Sharpen PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1846, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 1935, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Emphasize edges with an adjustable sharpening kernel.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1865, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 1958, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > span:3", + "type": "style", + "tag": "span", + "text": "02", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 1829, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 1920, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 1857, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 1948, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 1928, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 2019, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 1960, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 2051, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 1971, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 2062, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1962, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 2051, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Vignette PNG", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1962, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 2051, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Smoothly darken the image edges while preserving the center.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 131, + "y": 1981, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 2074, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > span:3", + "type": "style", + "tag": "span", + "text": "03", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 1945, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 2036, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 1973, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 2064, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 58, + "y": 2044, + "w": 648, + "h": 106 + }, + "ref": { + "x": 51, + "y": 2135, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 75, + "y": 2076, + "w": 42, + "h": 42 + }, + "ref": { + "x": 68, + "y": 2167, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 86, + "y": 2087, + "w": 19, + "h": 19 + }, + "ref": { + "x": 80, + "y": 2178, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 131, + "y": 2078, + "w": 488, + "h": 37 + }, + "ref": { + "x": 124, + "y": 2167, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "JPEG artifacts", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 131, + "y": 2078, + "w": 488, + "h": 17 + }, + "ref": { + "x": 124, + "y": 2167, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Simulate low-quality JPEG recompression for testing.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 131, + "y": 2097, + "w": 488, + "h": 18 + }, + "ref": { + "x": 124, + "y": 2190, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:3", + "type": "style", + "tag": "span", + "text": "04", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 633, + "y": 2061, + "w": 24, + "h": 13 + }, + "ref": { + "x": 553, + "y": 2152, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 671, + "y": 2089, + "w": 16, + "h": 16 + }, + "ref": { + "x": 591, + "y": 2180, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "block" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1656, + "w": 648, + "h": 494 + }, + "ref": { + "x": 654, + "y": 1747, + "w": 575, + "h": 494 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.32px" + }, + "alignItems": { + "ours": "baseline", + "ref": "center" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "padding": { + "ours": "0px 0px 8px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "24px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1656, + "w": 648, + "h": 24 + }, + "ref": { + "x": 654, + "y": 1747, + "w": 575, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "ANALYZE", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "11px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "letterSpacing": { + "ours": "1.68px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "62.1719px", + "ref": "51.5781px" + }, + "height": { + "ours": "15px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1656, + "w": 62, + "h": 15 + }, + "ref": { + "x": 654, + "y": 1747, + "w": 52, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:1 > i:2", + "type": "style", + "tag": "i", + "text": "04 TOOLS", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "1.32px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "54.4062px", + "ref": "54.5625px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1328, + "y": 1658, + "w": 54, + "h": 13 + }, + "ref": { + "x": 1174, + "y": 1747, + "w": 55, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "648.406px", + "ref": "574.812px" + }, + "padding": { + "ours": "0px", + "ref": "14px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "height": { + "ours": "454px", + "ref": "468px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1696, + "w": 648, + "h": 454 + }, + "ref": { + "x": 654, + "y": 1773, + "w": 575, + "h": 468 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1696, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 1787, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 1728, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 1819, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 1739, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 1830, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1730, + "w": 488, + "h": 37 + }, + "ref": { + "x": 727, + "y": 1819, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "PNG info", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1730, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 1819, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Inspect dimensions, alpha presence, and unique color count.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1749, + "w": 488, + "h": 18 + }, + "ref": { + "x": 727, + "y": 1842, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:3", + "type": "style", + "tag": "span", + "text": "01", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 1713, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 1804, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 1741, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 1832, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1812, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 1903, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 1844, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 1935, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 1855, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 1946, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1846, + "w": 488, + "h": 37 + }, + "ref": { + "x": 727, + "y": 1935, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Check grayscale", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1846, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 1935, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Report whether the image contains only shades of gray.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1865, + "w": 488, + "h": 18 + }, + "ref": { + "x": 727, + "y": 1958, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:3", + "type": "style", + "tag": "span", + "text": "02", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 1829, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 1920, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 1857, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 1948, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 1928, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 2019, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 1960, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 2051, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 1971, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 2062, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1962, + "w": 488, + "h": 37 + }, + "ref": { + "x": 727, + "y": 2051, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "Check transparency", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1962, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 2051, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Detect transparent and semi-transparent pixels.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 1981, + "w": 488, + "h": 18 + }, + "ref": { + "x": 727, + "y": 2074, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:3", + "type": "style", + "tag": "span", + "text": "03", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 1945, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 2036, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 1973, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 2064, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:4", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "gridTemplateColumns": { + "ours": "42px 488.406px 24px 18px", + "ref": "42px 414.812px 24px 18px" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "648.406px", + "ref": "574.812px" + }, + "rect": { + "ours": { + "x": 734, + "y": 2044, + "w": 648, + "h": 106 + }, + "ref": { + "x": 654, + "y": 2135, + "w": 575, + "h": 106 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:4 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 751, + "y": 2076, + "w": 42, + "h": 42 + }, + "ref": { + "x": 671, + "y": 2167, + "w": 42, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:4 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 763, + "y": 2087, + "w": 19, + "h": 19 + }, + "ref": { + "x": 683, + "y": 2178, + "w": 19, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:4 > span:2", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "flex", + "ref": "grid" + }, + "flexDirection": { + "ours": "column", + "ref": "row" + }, + "gap": { + "ours": "2px", + "ref": "8px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "414.812px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "37px", + "ref": "41px" + }, + "rect": { + "ours": { + "x": 807, + "y": 2078, + "w": 488, + "h": 37 + }, + "ref": { + "x": 727, + "y": 2167, + "w": 415, + "h": 41 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:4 > span:2 > strong:1", + "type": "style", + "tag": "strong", + "text": "PNG orientation", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "height": { + "ours": "17px", + "ref": "15px" + }, + "rect": { + "ours": { + "x": 807, + "y": 2078, + "w": 488, + "h": 17 + }, + "ref": { + "x": 727, + "y": 2167, + "w": 415, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:4 > span:2 > span:2", + "type": "style", + "tag": "span", + "text": "Classify the image as portrait, landscape, or square.", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "488.406px", + "ref": "414.812px" + }, + "rect": { + "ours": { + "x": 807, + "y": 2097, + "w": 488, + "h": 18 + }, + "ref": { + "x": 727, + "y": 2190, + "w": 415, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:4 > span:3", + "type": "style", + "tag": "span", + "text": "04", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1309, + "y": 2061, + "w": 24, + "h": 13 + }, + "ref": { + "x": 1156, + "y": 2152, + "w": 24, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:6 > div:2 > a:4 > svg:4", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "opacity": { + "ours": "1", + "ref": "0" + }, + "rect": { + "ours": { + "x": 1347, + "y": 2089, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1194, + "y": 2180, + "w": 16, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > footer:4", + "type": "style", + "tag": "footer", + "text": "ALL OPERATIONS RUN LOCALLY YOUR FILES NEVER LEAVE THIS DEVICE", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "display": { + "ours": "flex", + "ref": "block" + }, + "gap": { + "ours": "24px", + "ref": "normal" + }, + "padding": { + "ours": "24px 0px 0px", + "ref": "20px 0px 0px" + }, + "margin": { + "ours": "56px 0px 0px", + "ref": "64px 0px 0px" + }, + "width": { + "ours": "1324.81px", + "ref": "1177.62px" + }, + "height": { + "ours": "38px", + "ref": "33px" + }, + "rect": { + "ours": { + "x": 58, + "y": 2206, + "w": 1325, + "h": 38 + }, + "ref": { + "x": 51, + "y": 2305, + "w": 1178, + "h": 33 + } + } + } + }, + { + "path": "body > main:1 > div:2 > footer:4 > span:1", + "type": "style", + "tag": "span", + "text": "•", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "block", + "ref": "inline" + }, + "margin": { + "ours": "0px", + "ref": "0px 8px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "6.8125px", + "ref": "auto" + }, + "height": { + "ours": "13px", + "ref": "auto" + }, + "rect": { + "ours": { + "x": 258, + "y": 2231, + "w": 7, + "h": 13 + }, + "ref": { + "x": 208, + "y": 2326, + "w": 11, + "h": 12 + } + } + } + } + ], + "tokenDiffs": { + "light": [ + { + "key": "--danger", + "ours": "#e5484d", + "ref": "—" + }, + { + "key": "--success", + "ours": "#25a96a", + "ref": "—" + }, + { + "key": "--text-sm--line-height", + "ours": "—", + "ref": "calc(1.25 / .875)" + }, + { + "key": "--text-xs--line-height", + "ours": "—", + "ref": "calc(1 / .75)" + }, + { + "key": "--font-weight-medium", + "ours": "—", + "ref": "500" + }, + { + "key": "--spacing", + "ours": "—", + "ref": ".25rem" + }, + { + "key": "--text-xs", + "ours": "—", + "ref": ".75rem" + }, + { + "key": "--radius-md", + "ours": "—", + "ref": ".375rem" + }, + { + "key": "--radius-lg", + "ours": "—", + "ref": ".5rem" + }, + { + "key": "--text-sm", + "ours": "—", + "ref": ".875rem" + } + ], + "dark": [ + { + "key": "--panel", + "ours": "#182129", + "ref": "#f8fafb" + }, + { + "key": "--blue", + "ours": "#54a2ff", + "ref": "#1769d2" + }, + { + "key": "--muted", + "ours": "#91a0ac", + "ref": "#6d7883" + }, + { + "key": "--background", + "ours": "#11171d", + "ref": "#eef1f4" + }, + { + "key": "--danger", + "ours": "#ff7479", + "ref": "—" + }, + { + "key": "--foreground", + "ours": "#e8eef2", + "ref": "#17212b" + }, + { + "key": "--success", + "ours": "#25a96a", + "ref": "—" + }, + { + "key": "--line", + "ours": "#33414c", + "ref": "#cbd3da" + }, + { + "key": "--text-sm--line-height", + "ours": "—", + "ref": "calc(1.25 / .875)" + }, + { + "key": "--text-xs--line-height", + "ours": "—", + "ref": "calc(1 / .75)" + }, + { + "key": "--font-weight-medium", + "ours": "—", + "ref": "500" + }, + { + "key": "--spacing", + "ours": "—", + "ref": ".25rem" + }, + { + "key": "--text-xs", + "ours": "—", + "ref": ".75rem" + }, + { + "key": "--radius-md", + "ours": "—", + "ref": ".375rem" + }, + { + "key": "--radius-lg", + "ours": "—", + "ref": ".5rem" + }, + { + "key": "--text-sm", + "ours": "—", + "ref": ".875rem" + } + ] + }, + "counts": { + "tagMismatch": 0, + "textMismatch": 0, + "added": 0, + "removed": 0, + "styleDiffs": 303, + "rectDiffs": 303, + "fieldDiffs": 1638, + "tokenLight": 10, + "tokenDark": 16 + } + }, + { + "route": "/preview/tools/linear-gradient-png", + "ref": "gradient.html", + "deltas": [ + { + "path": "body", + "type": "style", + "tag": "body", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "783.875px", + "ref": "1299.36px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 784 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 1299 + } + } + } + }, + { + "path": "body > main:1", + "type": "style", + "tag": "main", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(238, 241, 244)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "783.875px", + "ref": "1299.36px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 784 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 1299 + } + } + } + }, + { + "path": "body > main:1 > header:1", + "type": "style", + "tag": "header", + "text": "", + "deltas": { + "padding": { + "ours": "0px 57.6px", + "ref": "0px 51.2px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 64 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 64 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "239.609px", + "ref": "224.766px" + }, + "rect": { + "ours": { + "x": 58, + "y": 17, + "w": 240, + "h": 30 + }, + "ref": { + "x": 51, + "y": 17, + "w": 225, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1 > span:1", + "type": "style", + "tag": "span", + "text": "EP", + "deltas": { + "borderTopColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 58, + "y": 17, + "w": 30, + "h": 30 + }, + "ref": { + "x": 51, + "y": 17, + "w": 30, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1 > span:2", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "117.609px", + "ref": "107.766px" + }, + "height": { + "ours": "18px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 98, + "y": 23, + "w": 118, + "h": 18 + }, + "ref": { + "x": 91, + "y": 23, + "w": 108, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1 > span:3", + "type": "style", + "tag": "span", + "text": "/ GRADIENT", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "72px", + "ref": "67px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 225, + "y": 25, + "w": 72, + "h": 13 + }, + "ref": { + "x": 209, + "y": 26, + "w": 67, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2", + "type": "style", + "tag": "nav", + "text": "", + "deltas": { + "gap": { + "ours": "18px", + "ref": "22px" + }, + "margin": { + "ours": "0px 0px 0px 24px", + "ref": "0px 28px 0px 368.891px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "376.594px", + "ref": "296.938px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 528, + "y": 24, + "w": 377, + "h": 15 + }, + "ref": { + "x": 645, + "y": 26, + "w": 297, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:1", + "type": "style", + "tag": "a", + "text": "Workspace", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "69.125px", + "ref": "49.4844px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 528, + "y": 24, + "w": 69, + "h": 15 + }, + "ref": { + "x": 645, + "y": 26, + "w": 49, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:2", + "type": "style", + "tag": "a", + "text": "Catalog", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "53.7656px", + "ref": "38.5px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 615, + "y": 24, + "w": 54, + "h": 15 + }, + "ref": { + "x": 716, + "y": 26, + "w": 39, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:3", + "type": "style", + "tag": "a", + "text": "Gradient", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "61.4531px", + "ref": "43.9844px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 687, + "y": 24, + "w": 61, + "h": 15 + }, + "ref": { + "x": 777, + "y": 26, + "w": 44, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:4", + "type": "style", + "tag": "a", + "text": "Background remover", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "138.25px", + "ref": "98.9688px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 766, + "y": 24, + "w": 138, + "h": 15 + }, + "ref": { + "x": 843, + "y": 26, + "w": 99, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "271.016px", + "ref": "259.031px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1111, + "y": 18, + "w": 271, + "h": 28 + }, + "ref": { + "x": 970, + "y": 17, + "w": 259, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > span:1", + "type": "style", + "tag": "span", + "text": "LIVE PREVIEW", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "96.6094px", + "ref": "88.5781px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1111, + "y": 25, + "w": 97, + "h": 13 + }, + "ref": { + "x": 970, + "y": 26, + "w": 89, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > span:1 > i:1", + "type": "style", + "tag": "i", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "8px", + "ref": "6px" + }, + "height": { + "ours": "8px", + "ref": "6px" + }, + "boxShadow": { + "ours": "color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px", + "ref": "none" + }, + "rect": { + "ours": { + "x": 1111, + "y": 28, + "w": 8, + "h": 8 + }, + "ref": { + "x": 970, + "y": 29, + "w": 6, + "h": 6 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:2", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "grid" + }, + "justifyContent": { + "ours": "center", + "ref": "normal" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "17px" + }, + "width": { + "ours": "28px", + "ref": "29px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1224, + "y": 18, + "w": 28, + "h": 28 + }, + "ref": { + "x": 1074, + "y": 17, + "w": 29, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "16px", + "ref": "17px" + }, + "height": { + "ours": "16px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 1230, + "y": 24, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1080, + "y": 23, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:3", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "grid" + }, + "justifyContent": { + "ours": "center", + "ref": "normal" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "17px" + }, + "width": { + "ours": "28px", + "ref": "29px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1268, + "y": 18, + "w": 28, + "h": 28 + }, + "ref": { + "x": 1119, + "y": 17, + "w": 29, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:3 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "16px", + "ref": "17px" + }, + "height": { + "ours": "16px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 1274, + "y": 24, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1125, + "y": 23, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "70.4062px", + "ref": "64.4531px" + }, + "height": { + "ours": "27px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 1312, + "y": 18, + "w": 70, + "h": 27 + }, + "ref": { + "x": 1164, + "y": 19, + "w": 64, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4 > button:1", + "type": "style", + "tag": "button", + "text": "RU", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "width": { + "ours": "31.2031px", + "ref": "29px" + }, + "height": { + "ours": "25px", + "ref": "24px" + }, + "rect": { + "ours": { + "x": 1313, + "y": 19, + "w": 31, + "h": 25 + }, + "ref": { + "x": 1165, + "y": 20, + "w": 29, + "h": 24 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4 > span:2", + "type": "style", + "tag": "span", + "text": "/", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Mono\", monospace", + "ref": "\"IBM Plex Sans\", sans-serif" + }, + "fontSize": { + "ours": "10px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 33, 43)" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "6px", + "ref": "4.45312px" + }, + "height": { + "ours": "13px", + "ref": "24px" + }, + "rect": { + "ours": { + "x": 1344, + "y": 25, + "w": 6, + "h": 13 + }, + "ref": { + "x": 1194, + "y": 20, + "w": 4, + "h": 24 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4 > button:3", + "type": "style", + "tag": "button", + "text": "EN", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "width": { + "ours": "31.2031px", + "ref": "29px" + }, + "height": { + "ours": "25px", + "ref": "24px" + }, + "rect": { + "ours": { + "x": 1350, + "y": 19, + "w": 31, + "h": 25 + }, + "ref": { + "x": 1199, + "y": 20, + "w": 29, + "h": 24 + } + } + } + }, + { + "path": "body > main:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "0px", + "ref": "60px 51.2px 72px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "657.875px", + "ref": "1190.36px" + }, + "rect": { + "ours": { + "x": 0, + "y": 64, + "w": 1440, + "h": 658 + }, + "ref": { + "x": 0, + "y": 64, + "w": 1280, + "h": 1190 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "PNG PROCESSING SINGLE TOOL", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 18px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1177.62px" + }, + "height": { + "ours": "24px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 64, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 51, + "y": 124, + "w": 1178, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "/", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "margin": { + "ours": "0px", + "ref": "0px 7px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 137, + "y": 66, + "w": 6, + "h": 20 + }, + "ref": { + "x": 159, + "y": 124, + "w": 13, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "end" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "gap": { + "ours": "normal", + "ref": "32px" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 48px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1177.62px" + }, + "height": { + "ours": "133.438px", + "ref": "116.391px" + }, + "rect": { + "ours": { + "x": 0, + "y": 109, + "w": 1440, + "h": 133 + }, + "ref": { + "x": 51, + "y": 154, + "w": 1178, + "h": 116 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "550px" + }, + "height": { + "ours": "93.4375px", + "ref": "116.391px" + }, + "rect": { + "ours": { + "x": 0, + "y": 109, + "w": 1440, + "h": 93 + }, + "ref": { + "x": 51, + "y": 154, + "w": 550, + "h": 116 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:1 > h1:1", + "type": "style", + "tag": "h1", + "text": "Gradient background.", + "deltas": { + "fontSize": { + "ours": "32px", + "ref": "51.2px" + }, + "fontWeight": { + "ours": "700", + "ref": "650" + }, + "lineHeight": { + "ours": "48px", + "ref": "51.2px" + }, + "letterSpacing": { + "ours": "normal", + "ref": "-3.072px" + }, + "margin": { + "ours": "21.44px 0px", + "ref": "0px 0px 14px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "550px" + }, + "height": { + "ours": "48px", + "ref": "51.2031px" + }, + "rect": { + "ours": { + "x": 0, + "y": 109, + "w": 1440, + "h": 48 + }, + "ref": { + "x": 51, + "y": 154, + "w": 550, + "h": 51 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:1 > p:2", + "type": "style", + "tag": "p", + "text": "Create a clean, export-ready gradient with precise control over color, direction and transparency.", + "deltas": { + "lineHeight": { + "ours": "24px", + "ref": "25.6px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "margin": { + "ours": "16px 0px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "550px" + }, + "height": { + "ours": "24px", + "ref": "51.1875px" + }, + "rect": { + "ours": { + "x": 0, + "y": 179, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 51, + "y": 219, + "w": 550, + "h": 51 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > span:2", + "type": "style", + "tag": "span", + "text": "LIVE PREVIEW", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(37, 169, 106)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "8px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "79.9844px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 221, + "w": 106, + "h": 20 + }, + "ref": { + "x": 1149, + "y": 258, + "w": 80, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > span:2 > i:1", + "type": "style", + "tag": "i", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(37, 169, 106)" + }, + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(37, 169, 106)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderRadius": { + "ours": "0px", + "ref": "50%" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "6px" + }, + "height": { + "ours": "auto", + "ref": "6px" + }, + "rect": { + "ours": { + "x": 0, + "y": 221, + "w": 0, + "h": 20 + }, + "ref": { + "x": 1149, + "y": 261, + "w": 6, + "h": 6 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "start" + }, + "gap": { + "ours": "normal", + "ref": "56px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "392.562px 729.062px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1177.62px" + }, + "height": { + "ours": "479px", + "ref": "863.969px" + }, + "rect": { + "ours": { + "x": 0, + "y": 243, + "w": 1440, + "h": 479 + }, + "ref": { + "x": 51, + "y": 318, + "w": 1178, + "h": 864 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(248, 250, 251)" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "392.562px" + }, + "height": { + "ours": "293px", + "ref": "635px" + }, + "rect": { + "ours": { + "x": 0, + "y": 243, + "w": 1440, + "h": 293 + }, + "ref": { + "x": 51, + "y": 318, + "w": 393, + "h": 635 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "padding": { + "ours": "0px", + "ref": "18px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "390.562px" + }, + "height": { + "ours": "48px", + "ref": "83px" + }, + "rect": { + "ours": { + "x": 0, + "y": 243, + "w": 1440, + "h": 48 + }, + "ref": { + "x": 52, + "y": 319, + "w": 391, + "h": 83 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "123.156px" + }, + "height": { + "ours": "24px", + "ref": "46px" + }, + "rect": { + "ours": { + "x": 0, + "y": 243, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 72, + "y": 337, + "w": 123, + "h": 46 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "GRADIENT SETTINGS", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 0, + "y": 245, + "w": 158, + "h": 20 + }, + "ref": { + "x": 72, + "y": 345, + "w": 114, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1 > strong:2", + "type": "style", + "tag": "strong", + "text": "Configure output", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "14px" + }, + "fontWeight": { + "ours": "700", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "margin": { + "ours": "0px", + "ref": "5px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "123.156px" + }, + "height": { + "ours": "auto", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 161, + "y": 245, + "w": 127, + "h": 20 + }, + "ref": { + "x": 72, + "y": 366, + "w": 123, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > span:2", + "type": "style", + "tag": "span", + "text": "TOOL 01", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "46.8906px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 269, + "w": 62, + "h": 20 + }, + "ref": { + "x": 376, + "y": 354, + "w": 47, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "0px", + "ref": "22px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "390.562px" + }, + "height": { + "ours": "49px", + "ref": "101px" + }, + "rect": { + "ours": { + "x": 0, + "y": 291, + "w": 1440, + "h": 49 + }, + "ref": { + "x": 52, + "y": 402, + "w": 391, + "h": 101 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > label:1", + "type": "style", + "tag": "label", + "text": "GRADIENT TYPE", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "350.562px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 293, + "w": 120, + "h": 20 + }, + "ref": { + "x": 72, + "y": 424, + "w": 351, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "350.562px" + }, + "height": { + "ours": "25px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 0, + "y": 315, + "w": 1440, + "h": 25 + }, + "ref": { + "x": 72, + "y": 448, + "w": 351, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2 > button:1", + "type": "style", + "tag": "button", + "text": "Linear", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(255, 255, 255)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(255, 255, 255)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "none" + }, + "width": { + "ours": "52.9219px", + "ref": "174.281px" + }, + "height": { + "ours": "24px", + "ref": "30px" + }, + "rect": { + "ours": { + "x": 0, + "y": 316, + "w": 53, + "h": 24 + }, + "ref": { + "x": 73, + "y": 449, + "w": 174, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2 > button:2", + "type": "style", + "tag": "button", + "text": "Radial", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "none" + }, + "width": { + "ours": "53.3281px", + "ref": "174.281px" + }, + "height": { + "ours": "24px", + "ref": "30px" + }, + "rect": { + "ours": { + "x": 53, + "y": 316, + "w": 53, + "h": 24 + }, + "ref": { + "x": 247, + "y": 449, + "w": 174, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "0px", + "ref": "22px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "390.562px" + }, + "height": { + "ours": "98px", + "ref": "129px" + }, + "rect": { + "ours": { + "x": 0, + "y": 340, + "w": 1440, + "h": 98 + }, + "ref": { + "x": 52, + "y": 503, + "w": 391, + "h": 129 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > label:1", + "type": "style", + "tag": "label", + "text": "COLOR STOPS", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "350.562px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 342, + "w": 102, + "h": 20 + }, + "ref": { + "x": 72, + "y": 525, + "w": 351, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "10px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "350.562px" + }, + "height": { + "ours": "74px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 0, + "y": 364, + "w": 1440, + "h": 74 + }, + "ref": { + "x": 72, + "y": 549, + "w": 351, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "8px" + }, + "padding": { + "ours": "0px", + "ref": "0px 8px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "167px" + }, + "height": { + "ours": "25px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 0, + "y": 364, + "w": 1440, + "h": 25 + }, + "ref": { + "x": 72, + "y": 549, + "w": 167, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "14px" + }, + "height": { + "ours": "auto", + "ref": "14px" + }, + "rect": { + "ours": { + "x": 0, + "y": 366, + "w": 0, + "h": 20 + }, + "ref": { + "x": 81, + "y": 558, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:1 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "11px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 2px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(118, 118, 118)", + "ref": "rgb(23, 33, 43)" + }, + "borderTopStyle": { + "ours": "inset", + "ref": "none" + }, + "width": { + "ours": "157px", + "ref": "127px" + }, + "height": { + "ours": "24px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 0, + "y": 365, + "w": 157, + "h": 24 + }, + "ref": { + "x": 103, + "y": 559, + "w": 127, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > span:2", + "type": "style", + "tag": "span", + "text": "→", + "deltas": { + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "16px" + }, + "height": { + "ours": "auto", + "ref": "24px" + }, + "rect": { + "ours": { + "x": 0, + "y": 391, + "w": 16, + "h": 20 + }, + "ref": { + "x": 249, + "y": 553, + "w": 16, + "h": 24 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "8px" + }, + "padding": { + "ours": "0px", + "ref": "0px 8px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "167px" + }, + "height": { + "ours": "25px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 0, + "y": 413, + "w": 1440, + "h": 25 + }, + "ref": { + "x": 275, + "y": 549, + "w": 167, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:3 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "14px" + }, + "height": { + "ours": "auto", + "ref": "14px" + }, + "rect": { + "ours": { + "x": 0, + "y": 415, + "w": 0, + "h": 20 + }, + "ref": { + "x": 284, + "y": 558, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:3 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "11px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 2px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(118, 118, 118)", + "ref": "rgb(23, 33, 43)" + }, + "borderTopStyle": { + "ours": "inset", + "ref": "none" + }, + "width": { + "ours": "157px", + "ref": "127px" + }, + "height": { + "ours": "24px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 0, + "y": 414, + "w": 157, + "h": 24 + }, + "ref": { + "x": 306, + "y": 559, + "w": 127, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "margin": { + "ours": "0px", + "ref": "14px 0px 0px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "350.562px" + }, + "height": { + "ours": "0px", + "ref": "14px" + }, + "rect": { + "ours": { + "x": 0, + "y": 438, + "w": 1440, + "h": 0 + }, + "ref": { + "x": 72, + "y": 595, + "w": 351, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "0px", + "ref": "22px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "390.562px" + }, + "height": { + "ours": "49px", + "ref": "177px" + }, + "rect": { + "ours": { + "x": 0, + "y": 438, + "w": 1440, + "h": 49 + }, + "ref": { + "x": 52, + "y": 632, + "w": 391, + "h": 177 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > label:1", + "type": "style", + "tag": "label", + "text": "DIRECTION", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "350.562px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 440, + "w": 129, + "h": 20 + }, + "ref": { + "x": 72, + "y": 654, + "w": 351, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > label:1 > output:1", + "type": "style", + "tag": "output", + "text": "135 °", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "32.5px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 89, + "y": 440, + "w": 40, + "h": 20 + }, + "ref": { + "x": 390, + "y": 654, + "w": 33, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgba(0, 0, 0, 0)" + }, + "margin": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 134, + "y": 440, + "w": 129, + "h": 16 + }, + "ref": { + "x": 72, + "y": 679, + "w": 129, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "grid" + }, + "gap": { + "ours": "normal", + "ref": "6px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "83.1406px 83.1406px 83.1406px 83.1406px" + }, + "margin": { + "ours": "0px", + "ref": "14px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "350.562px" + }, + "height": { + "ours": "25px", + "ref": "70px" + }, + "rect": { + "ours": { + "x": 0, + "y": 462, + "w": 1440, + "h": 25 + }, + "ref": { + "x": 72, + "y": 716, + "w": 351, + "h": 70 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:1", + "type": "style", + "tag": "button", + "text": "0° →", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "8px 6px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "solid" + }, + "width": { + "ours": "46.7188px", + "ref": "83.1406px" + }, + "height": { + "ours": "24px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 0, + "y": 463, + "w": 47, + "h": 24 + }, + "ref": { + "x": 72, + "y": 716, + "w": 83, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:2", + "type": "style", + "tag": "button", + "text": "45° ↗", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "8px 6px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "solid" + }, + "width": { + "ours": "51.1406px", + "ref": "83.1406px" + }, + "height": { + "ours": "24px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 47, + "y": 463, + "w": 51, + "h": 24 + }, + "ref": { + "x": 161, + "y": 716, + "w": 83, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:3", + "type": "style", + "tag": "button", + "text": "90° ↑", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "8px 6px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "solid" + }, + "width": { + "ours": "52.3125px", + "ref": "83.1406px" + }, + "height": { + "ours": "24px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 98, + "y": 463, + "w": 52, + "h": 24 + }, + "ref": { + "x": 250, + "y": 716, + "w": 83, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:4", + "type": "style", + "tag": "button", + "text": "135° ↖", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(238, 241, 244)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgb(23, 33, 43)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "8px 6px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "solid" + }, + "width": { + "ours": "59.1562px", + "ref": "83.1406px" + }, + "height": { + "ours": "24px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 150, + "y": 463, + "w": 59, + "h": 24 + }, + "ref": { + "x": 340, + "y": 716, + "w": 83, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:5", + "type": "style", + "tag": "button", + "text": "180° ←", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "8px 6px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "solid" + }, + "width": { + "ours": "62.7188px", + "ref": "83.1406px" + }, + "height": { + "ours": "24px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 209, + "y": 463, + "w": 63, + "h": 24 + }, + "ref": { + "x": 72, + "y": 754, + "w": 83, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:6", + "type": "style", + "tag": "button", + "text": "225° ↙", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "8px 6px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "solid" + }, + "width": { + "ours": "59.1562px", + "ref": "83.1406px" + }, + "height": { + "ours": "24px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 272, + "y": 463, + "w": 59, + "h": 24 + }, + "ref": { + "x": 161, + "y": 754, + "w": 83, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:7", + "type": "style", + "tag": "button", + "text": "270° ↓", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "8px 6px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "solid" + }, + "width": { + "ours": "60.3125px", + "ref": "83.1406px" + }, + "height": { + "ours": "24px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 331, + "y": 463, + "w": 60, + "h": 24 + }, + "ref": { + "x": 250, + "y": 754, + "w": 83, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:8", + "type": "style", + "tag": "button", + "text": "315° ↘", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 6px", + "ref": "8px 6px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "solid" + }, + "width": { + "ours": "59.1562px", + "ref": "83.1406px" + }, + "height": { + "ours": "24px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 392, + "y": 463, + "w": 59, + "h": 24 + }, + "ref": { + "x": 340, + "y": 754, + "w": 83, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:5", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "0px", + "ref": "22px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "390.562px" + }, + "height": { + "ours": "24px", + "ref": "93px" + }, + "rect": { + "ours": { + "x": 0, + "y": 487, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 52, + "y": 809, + "w": 391, + "h": 93 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:5 > label:1", + "type": "style", + "tag": "label", + "text": "OPACITY", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "350.562px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 489, + "w": 116, + "h": 20 + }, + "ref": { + "x": 72, + "y": 831, + "w": 351, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:5 > label:1 > output:1", + "type": "style", + "tag": "output", + "text": "100 %", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "32.5px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 69, + "y": 489, + "w": 47, + "h": 20 + }, + "ref": { + "x": 390, + "y": 831, + "w": 33, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:5 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgba(0, 0, 0, 0)" + }, + "margin": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 122, + "y": 489, + "w": 129, + "h": 16 + }, + "ref": { + "x": 72, + "y": 856, + "w": 129, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:6", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "padding": { + "ours": "0px", + "ref": "16px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "390.562px" + }, + "height": { + "ours": "25px", + "ref": "50px" + }, + "rect": { + "ours": { + "x": 0, + "y": 511, + "w": 1440, + "h": 25 + }, + "ref": { + "x": 52, + "y": 902, + "w": 391, + "h": 50 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:6 > button:1", + "type": "style", + "tag": "button", + "text": "Reset", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "12px" + }, + "lineHeight": { + "ours": "normal", + "ref": "18px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 105, 210)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "7px" + }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "none" + }, + "width": { + "ours": "67.2969px", + "ref": "52.3594px" + }, + "height": { + "ours": "24px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 0, + "y": 512, + "w": 67, + "h": 24 + }, + "ref": { + "x": 72, + "y": 918, + "w": 52, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:6 > button:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "12px" + }, + "lineHeight": { + "ours": "normal", + "ref": "18px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 8, + "y": 515, + "w": 14, + "h": 14 + }, + "ref": { + "x": 72, + "y": 920, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:6 > span:2", + "type": "style", + "tag": "span", + "text": "updates automatically", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "11px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "8px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "141.016px" + }, + "height": { + "ours": "auto", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 71, + "y": 513, + "w": 159, + "h": 20 + }, + "ref": { + "x": 282, + "y": 921, + "w": 141, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:6 > span:2 > i:1", + "type": "style", + "tag": "i", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "11px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(37, 169, 106)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderRadius": { + "ours": "0px", + "ref": "50%" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "6px" + }, + "height": { + "ours": "auto", + "ref": "6px" + }, + "rect": { + "ours": { + "x": 71, + "y": 513, + "w": 0, + "h": 20 + }, + "ref": { + "x": 282, + "y": 924, + "w": 6, + "h": 6 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(248, 250, 251)" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "729.062px" + }, + "height": { + "ours": "186px", + "ref": "863.969px" + }, + "rect": { + "ours": { + "x": 0, + "y": 536, + "w": 1440, + "h": 186 + }, + "ref": { + "x": 500, + "y": 318, + "w": 729, + "h": 864 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "padding": { + "ours": "0px", + "ref": "18px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "727.062px" + }, + "height": { + "ours": "49px", + "ref": "140px" + }, + "rect": { + "ours": { + "x": 0, + "y": 536, + "w": 1440, + "h": 49 + }, + "ref": { + "x": 501, + "y": 319, + "w": 727, + "h": 140 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "93.7812px" + }, + "height": { + "ours": "24px", + "ref": "46px" + }, + "rect": { + "ours": { + "x": 0, + "y": 536, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 521, + "y": 366, + "w": 94, + "h": 46 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "OUTPUT PREVIEW", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 0, + "y": 538, + "w": 134, + "h": 20 + }, + "ref": { + "x": 521, + "y": 374, + "w": 94, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1 > strong:2", + "type": "style", + "tag": "strong", + "text": "gradient.png", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "14px" + }, + "fontWeight": { + "ours": "700", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "margin": { + "ours": "0px", + "ref": "5px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "93.7812px" + }, + "height": { + "ours": "auto", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 137, + "y": 538, + "w": 96, + "h": 20 + }, + "ref": { + "x": 521, + "y": 395, + "w": 94, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "flex-end" + }, + "gap": { + "ours": "normal", + "ref": "10px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "210.562px" + }, + "height": { + "ours": "25px", + "ref": "103px" + }, + "rect": { + "ours": { + "x": 0, + "y": 560, + "w": 1440, + "h": 25 + }, + "ref": { + "x": 997, + "y": 337, + "w": 211, + "h": 103 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:1", + "type": "style", + "tag": "button", + "text": "Copy CSS", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "8px" + }, + "padding": { + "ours": "1px 6px", + "ref": "8px 6px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "solid" + }, + "width": { + "ours": "91px", + "ref": "80.9844px" + }, + "height": { + "ours": "25px", + "ref": "33px" + }, + "rect": { + "ours": { + "x": 0, + "y": 560, + "w": 91, + "h": 25 + }, + "ref": { + "x": 1127, + "y": 337, + "w": 81, + "h": 33 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "10px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 8, + "y": 563, + "w": 15, + "h": 15 + }, + "ref": { + "x": 1134, + "y": 346, + "w": 15, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:2", + "type": "style", + "tag": "button", + "text": "Download PNG", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "11px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(255, 255, 255)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline-block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "9px" + }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "margin": { + "ours": "0px", + "ref": "18px 0px 0px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(255, 255, 255)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "none" + }, + "width": { + "ours": "141.297px", + "ref": "210.562px" + }, + "height": { + "ours": "25px", + "ref": "42px" + }, + "rect": { + "ours": { + "x": 95, + "y": 560, + "w": 141, + "h": 25 + }, + "ref": { + "x": 997, + "y": 398, + "w": 211, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "11px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(255, 255, 255)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 103, + "y": 563, + "w": 15, + "h": 15 + }, + "ref": { + "x": 1043, + "y": 412, + "w": 15, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:2 > svg:2", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "11px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(255, 255, 255)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 214, + "y": 564, + "w": 14, + "h": 14 + }, + "ref": { + "x": 1148, + "y": 412, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(32, 42, 49)" + }, + "padding": { + "ours": "0px", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "727.062px" + }, + "height": { + "ours": "48px", + "ref": "585.594px" + }, + "rect": { + "ours": { + "x": 0, + "y": 585, + "w": 1440, + "h": 48 + }, + "ref": { + "x": 501, + "y": 459, + "w": 727, + "h": 586 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "12px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(255, 255, 255)" + }, + "display": { + "ours": "block", + "ref": "grid" + }, + "justifyContent": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "92.375px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "679.062px" + }, + "height": { + "ours": "48px", + "ref": "537.594px" + }, + "rect": { + "ours": { + "x": 0, + "y": 585, + "w": 1440, + "h": 48 + }, + "ref": { + "x": 525, + "y": 483, + "w": 679, + "h": 538 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "PNG", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(255, 255, 255)" + }, + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "68px" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 12px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgba(255, 255, 255, 0.65)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "70px" + }, + "height": { + "ours": "24px", + "ref": "70px" + }, + "rect": { + "ours": { + "x": 0, + "y": 585, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 829, + "y": 704, + "w": 70, + "h": 70 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > span:2", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "12px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(255, 255, 255)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "92.375px" + }, + "height": { + "ours": "auto", + "ref": "14px" + }, + "rect": { + "ours": { + "x": 0, + "y": 611, + "w": 108, + "h": 20 + }, + "ref": { + "x": 818, + "y": 786, + "w": 92, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "0px", + "ref": "16px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "727.062px" + }, + "height": { + "ours": "89px", + "ref": "136.375px" + }, + "rect": { + "ours": { + "x": 0, + "y": 633, + "w": 1440, + "h": 89 + }, + "ref": { + "x": 501, + "y": 1045, + "w": 727, + "h": 136 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "687.062px" + }, + "height": { + "ours": "25px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 0, + "y": 633, + "w": 1440, + "h": 25 + }, + "ref": { + "x": 521, + "y": 1061, + "w": 687, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "GENERATED CSS", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "87.0781px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 635, + "w": 122, + "h": 20 + }, + "ref": { + "x": 521, + "y": 1068, + "w": 87, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3 > div:1 > button:2", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "14px" + }, + "padding": { + "ours": "1px 6px", + "ref": "6px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "none" + }, + "width": { + "ours": "30px", + "ref": "26px" + }, + "height": { + "ours": "24px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 126, + "y": 634, + "w": 30, + "h": 24 + }, + "ref": { + "x": 1182, + "y": 1061, + "w": 26, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3 > div:1 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 134, + "y": 637, + "w": 14, + "h": 14 + }, + "ref": { + "x": 1188, + "y": 1067, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3 > pre:2", + "type": "style", + "tag": "pre", + "text": "background: linear-gradient(135deg, #1769D2 0%, #00A8C7 100%); opacity: 1;", + "deltas": { + "fontFamily": { + "ours": "monospace", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "12px" + }, + "lineHeight": { + "ours": "24px", + "ref": "19.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(238, 241, 244)" + }, + "padding": { + "ours": "0px", + "ref": "14px" + }, + "margin": { + "ours": "16px 0px", + "ref": "12px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "687.062px" + }, + "height": { + "ours": "48px", + "ref": "66.375px" + }, + "rect": { + "ours": { + "x": 0, + "y": 674, + "w": 1440, + "h": 48 + }, + "ref": { + "x": 521, + "y": 1099, + "w": 687, + "h": 66 + } + } + } + }, + { + "path": "body > main:1 > footer:3", + "type": "style", + "tag": "footer", + "text": "", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "padding": { + "ours": "16px 57.6px", + "ref": "16px 51.2px" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "46px", + "ref": "45px" + }, + "rect": { + "ours": { + "x": 0, + "y": 738, + "w": 1440, + "h": 46 + }, + "ref": { + "x": 0, + "y": 1254, + "w": 1280, + "h": 45 + } + } + } + }, + { + "path": "body > main:1 > footer:3 > span:1", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "7px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "142.812px", + "ref": "116.984px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 58, + "y": 755, + "w": 143, + "h": 13 + }, + "ref": { + "x": 51, + "y": 1271, + "w": 117, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > footer:3 > span:1 > b:1", + "type": "style", + "tag": "b", + "text": "v2.4.0", + "deltas": { + "fontWeight": { + "ours": "700", + "ref": "400" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "33px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 160, + "y": 755, + "w": 41, + "h": 13 + }, + "ref": { + "x": 135, + "y": 1271, + "w": 33, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > footer:3 > span:2", + "type": "style", + "tag": "span", + "text": "gradient tool · local-only", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "7px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "176.812px", + "ref": "142.953px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 683, + "y": 755, + "w": 177, + "h": 13 + }, + "ref": { + "x": 611, + "y": 1271, + "w": 143, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > footer:3 > span:3", + "type": "style", + "tag": "span", + "text": "© 2024", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "7px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "40.8125px", + "ref": "33px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1342, + "y": 755, + "w": 41, + "h": 13 + }, + "ref": { + "x": 1196, + "y": 1271, + "w": 33, + "h": 12 + } + } + } + } + ], + "tokenDiffs": { + "light": [ + { + "key": "--danger", + "ours": "#e5484d", + "ref": "—" + }, + { + "key": "--success", + "ours": "#25a96a", + "ref": "—" + }, + { + "key": "--text-sm--line-height", + "ours": "—", + "ref": "calc(1.25 / .875)" + }, + { + "key": "--text-xs--line-height", + "ours": "—", + "ref": "calc(1 / .75)" + }, + { + "key": "--font-weight-medium", + "ours": "—", + "ref": "500" + }, + { + "key": "--spacing", + "ours": "—", + "ref": ".25rem" + }, + { + "key": "--text-xs", + "ours": "—", + "ref": ".75rem" + }, + { + "key": "--radius-md", + "ours": "—", + "ref": ".375rem" + }, + { + "key": "--radius-lg", + "ours": "—", + "ref": ".5rem" + }, + { + "key": "--text-sm", + "ours": "—", + "ref": ".875rem" + } + ], + "dark": [ + { + "key": "--panel", + "ours": "#182129", + "ref": "#f8fafb" + }, + { + "key": "--blue", + "ours": "#54a2ff", + "ref": "#1769d2" + }, + { + "key": "--muted", + "ours": "#91a0ac", + "ref": "#6d7883" + }, + { + "key": "--background", + "ours": "#11171d", + "ref": "#eef1f4" + }, + { + "key": "--danger", + "ours": "#ff7479", + "ref": "—" + }, + { + "key": "--foreground", + "ours": "#e8eef2", + "ref": "#17212b" + }, + { + "key": "--success", + "ours": "#25a96a", + "ref": "—" + }, + { + "key": "--line", + "ours": "#33414c", + "ref": "#cbd3da" + }, + { + "key": "--text-sm--line-height", + "ours": "—", + "ref": "calc(1.25 / .875)" + }, + { + "key": "--text-xs--line-height", + "ours": "—", + "ref": "calc(1 / .75)" + }, + { + "key": "--font-weight-medium", + "ours": "—", + "ref": "500" + }, + { + "key": "--spacing", + "ours": "—", + "ref": ".25rem" + }, + { + "key": "--text-xs", + "ours": "—", + "ref": ".75rem" + }, + { + "key": "--radius-md", + "ours": "—", + "ref": ".375rem" + }, + { + "key": "--radius-lg", + "ours": "—", + "ref": ".5rem" + }, + { + "key": "--text-sm", + "ours": "—", + "ref": ".875rem" + } + ] + }, + "counts": { + "tagMismatch": 0, + "textMismatch": 0, + "added": 0, + "removed": 0, + "styleDiffs": 103, + "rectDiffs": 103, + "fieldDiffs": 906, + "tokenLight": 10, + "tokenDark": 16 + } + }, + { + "route": "/preview/tools/remove-background-png", + "ref": "background-remover.html", + "deltas": [ + { + "path": "body", + "type": "style", + "tag": "body", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "862.875px", + "ref": "1049.39px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 863 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 1049 + } + } + } + }, + { + "path": "body > main:1", + "type": "style", + "tag": "main", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(238, 241, 244)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "862.875px", + "ref": "1049.39px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 863 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 1049 + } + } + } + }, + { + "path": "body > main:1 > header:1", + "type": "style", + "tag": "header", + "text": "", + "deltas": { + "padding": { + "ours": "0px 57.6px", + "ref": "0px 51.2px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "rect": { + "ours": { + "x": 0, + "y": 0, + "w": 1440, + "h": 64 + }, + "ref": { + "x": 0, + "y": 0, + "w": 1280, + "h": 64 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1", + "type": "style", + "tag": "a", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "311.609px", + "ref": "291.75px" + }, + "rect": { + "ours": { + "x": 58, + "y": 17, + "w": 312, + "h": 30 + }, + "ref": { + "x": 51, + "y": 17, + "w": 292, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1 > span:1", + "type": "style", + "tag": "span", + "text": "EP", + "deltas": { + "borderTopColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 58, + "y": 17, + "w": 30, + "h": 30 + }, + "ref": { + "x": 51, + "y": 17, + "w": 30, + "h": 30 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1 > span:2", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "117.609px", + "ref": "107.766px" + }, + "height": { + "ours": "18px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 98, + "y": 23, + "w": 118, + "h": 18 + }, + "ref": { + "x": 91, + "y": 23, + "w": 108, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > header:1 > a:1 > span:3", + "type": "style", + "tag": "span", + "text": "/ BACKGROUND REMOVER", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 105, 210)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "144px", + "ref": "133.984px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 225, + "y": 25, + "w": 144, + "h": 13 + }, + "ref": { + "x": 209, + "y": 26, + "w": 134, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2", + "type": "style", + "tag": "nav", + "text": "", + "deltas": { + "gap": { + "ours": "18px", + "ref": "22px" + }, + "margin": { + "ours": "0px 0px 0px 24px", + "ref": "0px 28px 0px 283px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "376.594px", + "ref": "296.938px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 554, + "y": 24, + "w": 377, + "h": 15 + }, + "ref": { + "x": 626, + "y": 26, + "w": 297, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:1", + "type": "style", + "tag": "a", + "text": "Workspace", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "69.125px", + "ref": "49.4844px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 554, + "y": 24, + "w": 69, + "h": 15 + }, + "ref": { + "x": 626, + "y": 26, + "w": 49, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:2", + "type": "style", + "tag": "a", + "text": "Catalog", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "53.7656px", + "ref": "38.5px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 641, + "y": 24, + "w": 54, + "h": 15 + }, + "ref": { + "x": 697, + "y": 26, + "w": 39, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:3", + "type": "style", + "tag": "a", + "text": "Gradient", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "61.4531px", + "ref": "43.9844px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 713, + "y": 24, + "w": 61, + "h": 15 + }, + "ref": { + "x": 758, + "y": 26, + "w": 44, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > nav:2 > a:4", + "type": "style", + "tag": "a", + "text": "Background remover", + "deltas": { + "fontSize": { + "ours": "12px", + "ref": "10px" + }, + "letterSpacing": { + "ours": "0.48px", + "ref": "normal" + }, + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "138.25px", + "ref": "98.9688px" + }, + "height": { + "ours": "15px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 792, + "y": 24, + "w": 138, + "h": 15 + }, + "ref": { + "x": 824, + "y": 26, + "w": 99, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "291.406px", + "ref": "277.938px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1091, + "y": 18, + "w": 291, + "h": 28 + }, + "ref": { + "x": 951, + "y": 17, + "w": 278, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > span:1", + "type": "style", + "tag": "span", + "text": "AUTO PROCESSING", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "117px", + "ref": "107.484px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1091, + "y": 25, + "w": 117, + "h": 13 + }, + "ref": { + "x": 951, + "y": 26, + "w": 107, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > span:1 > i:1", + "type": "style", + "tag": "i", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "8px", + "ref": "6px" + }, + "height": { + "ours": "8px", + "ref": "6px" + }, + "boxShadow": { + "ours": "color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px", + "ref": "none" + }, + "rect": { + "ours": { + "x": 1091, + "y": 28, + "w": 8, + "h": 8 + }, + "ref": { + "x": 951, + "y": 29, + "w": 6, + "h": 6 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:2", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "grid" + }, + "justifyContent": { + "ours": "center", + "ref": "normal" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "17px" + }, + "width": { + "ours": "28px", + "ref": "29px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1224, + "y": 18, + "w": 28, + "h": 28 + }, + "ref": { + "x": 1074, + "y": 17, + "w": 29, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "16px", + "ref": "17px" + }, + "height": { + "ours": "16px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 1230, + "y": 24, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1080, + "y": 23, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:3", + "type": "style", + "tag": "button", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "display": { + "ours": "flex", + "ref": "grid" + }, + "justifyContent": { + "ours": "center", + "ref": "normal" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "17px" + }, + "width": { + "ours": "28px", + "ref": "29px" + }, + "height": { + "ours": "28px", + "ref": "29px" + }, + "rect": { + "ours": { + "x": 1268, + "y": 18, + "w": 28, + "h": 28 + }, + "ref": { + "x": 1119, + "y": 17, + "w": 29, + "h": 29 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > button:3 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "16px", + "ref": "17px" + }, + "height": { + "ours": "16px", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 1274, + "y": 24, + "w": 16, + "h": 16 + }, + "ref": { + "x": 1125, + "y": 23, + "w": 17, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "borderRadius": { + "ours": "4px", + "ref": "0px" + }, + "width": { + "ours": "70.4062px", + "ref": "64.4531px" + }, + "height": { + "ours": "27px", + "ref": "26px" + }, + "rect": { + "ours": { + "x": 1312, + "y": 18, + "w": 70, + "h": 27 + }, + "ref": { + "x": 1164, + "y": 19, + "w": 64, + "h": 26 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4 > button:1", + "type": "style", + "tag": "button", + "text": "RU", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "width": { + "ours": "31.2031px", + "ref": "29px" + }, + "height": { + "ours": "25px", + "ref": "24px" + }, + "rect": { + "ours": { + "x": 1313, + "y": 19, + "w": 31, + "h": 25 + }, + "ref": { + "x": 1165, + "y": 20, + "w": 29, + "h": 24 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4 > span:2", + "type": "style", + "tag": "span", + "text": "/", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Mono\", monospace", + "ref": "\"IBM Plex Sans\", sans-serif" + }, + "fontSize": { + "ours": "10px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 33, 43)" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "6px", + "ref": "4.45312px" + }, + "height": { + "ours": "13px", + "ref": "24px" + }, + "rect": { + "ours": { + "x": 1344, + "y": 25, + "w": 6, + "h": 13 + }, + "ref": { + "x": 1194, + "y": 20, + "w": 4, + "h": 24 + } + } + } + }, + { + "path": "body > main:1 > header:1 > div:3 > div:4 > button:3", + "type": "style", + "tag": "button", + "text": "EN", + "deltas": { + "letterSpacing": { + "ours": "0.6px", + "ref": "normal" + }, + "width": { + "ours": "31.2031px", + "ref": "29px" + }, + "height": { + "ours": "25px", + "ref": "24px" + }, + "rect": { + "ours": { + "x": 1350, + "y": 19, + "w": 31, + "h": 25 + }, + "ref": { + "x": 1199, + "y": 20, + "w": 29, + "h": 24 + } + } + } + }, + { + "path": "body > main:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "0px", + "ref": "60px 51.2px 72px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "752.875px", + "ref": "940.391px" + }, + "rect": { + "ours": { + "x": 0, + "y": 64, + "w": 1440, + "h": 753 + }, + "ref": { + "x": 0, + "y": 64, + "w": 1280, + "h": 940 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "PNG PROCESSING SINGLE TOOL", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 18px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1177.62px" + }, + "height": { + "ours": "24px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 64, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 51, + "y": 124, + "w": 1178, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "/", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "margin": { + "ours": "0px", + "ref": "0px 7px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 137, + "y": 66, + "w": 6, + "h": 20 + }, + "ref": { + "x": 159, + "y": 124, + "w": 13, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "end" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "gap": { + "ours": "normal", + "ref": "32px" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 48px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1177.62px" + }, + "height": { + "ours": "133.438px", + "ref": "116.391px" + }, + "rect": { + "ours": { + "x": 0, + "y": 109, + "w": 1440, + "h": 133 + }, + "ref": { + "x": 51, + "y": 154, + "w": 1178, + "h": 116 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "550px" + }, + "height": { + "ours": "93.4375px", + "ref": "116.391px" + }, + "rect": { + "ours": { + "x": 0, + "y": 109, + "w": 1440, + "h": 93 + }, + "ref": { + "x": 51, + "y": 154, + "w": 550, + "h": 116 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:1 > h1:1", + "type": "style", + "tag": "h1", + "text": "Remove background.", + "deltas": { + "fontSize": { + "ours": "32px", + "ref": "51.2px" + }, + "fontWeight": { + "ours": "700", + "ref": "650" + }, + "lineHeight": { + "ours": "48px", + "ref": "51.2px" + }, + "letterSpacing": { + "ours": "normal", + "ref": "-3.072px" + }, + "margin": { + "ours": "21.44px 0px", + "ref": "0px 0px 14px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "550px" + }, + "height": { + "ours": "48px", + "ref": "51.2031px" + }, + "rect": { + "ours": { + "x": 0, + "y": 109, + "w": 1440, + "h": 48 + }, + "ref": { + "x": 51, + "y": 154, + "w": 550, + "h": 51 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > div:1 > p:2", + "type": "style", + "tag": "p", + "text": "Select a background color and tune the edge detection. Changes are processed automatically in your browser.", + "deltas": { + "lineHeight": { + "ours": "24px", + "ref": "25.6px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "margin": { + "ours": "16px 0px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "550px" + }, + "height": { + "ours": "24px", + "ref": "51.1875px" + }, + "rect": { + "ours": { + "x": 0, + "y": 179, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 51, + "y": 219, + "w": 550, + "h": 51 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > span:2", + "type": "style", + "tag": "span", + "text": "LIVE PREVIEW", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(37, 169, 106)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "8px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "79.9844px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 221, + "w": 106, + "h": 20 + }, + "ref": { + "x": 1149, + "y": 258, + "w": 80, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:2 > span:2 > i:1", + "type": "style", + "tag": "i", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(37, 169, 106)" + }, + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(37, 169, 106)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderRadius": { + "ours": "0px", + "ref": "50%" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "6px" + }, + "height": { + "ours": "auto", + "ref": "6px" + }, + "rect": { + "ours": { + "x": 0, + "y": 221, + "w": 0, + "h": 20 + }, + "ref": { + "x": 1149, + "y": 261, + "w": 6, + "h": 6 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "start" + }, + "gap": { + "ours": "normal", + "ref": "56px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "360px 761.625px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "1177.62px" + }, + "height": { + "ours": "574px", + "ref": "614px" + }, + "rect": { + "ours": { + "x": 0, + "y": 243, + "w": 1440, + "h": 574 + }, + "ref": { + "x": 51, + "y": 318, + "w": 1178, + "h": 614 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(248, 250, 251)" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "360px" + }, + "height": { + "ours": "357px", + "ref": "559px" + }, + "rect": { + "ours": { + "x": 0, + "y": 243, + "w": 1440, + "h": 357 + }, + "ref": { + "x": 51, + "y": 318, + "w": 360, + "h": 559 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "padding": { + "ours": "0px", + "ref": "18px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "358px" + }, + "height": { + "ours": "48px", + "ref": "83px" + }, + "rect": { + "ours": { + "x": 0, + "y": 243, + "w": 1440, + "h": 48 + }, + "ref": { + "x": 52, + "y": 319, + "w": 358, + "h": 83 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "146.25px" + }, + "height": { + "ours": "24px", + "ref": "46px" + }, + "rect": { + "ours": { + "x": 0, + "y": 243, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 72, + "y": 337, + "w": 146, + "h": 46 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "REMOVER SETTINGS", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 0, + "y": 245, + "w": 152, + "h": 20 + }, + "ref": { + "x": 72, + "y": 345, + "w": 107, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1 > strong:2", + "type": "style", + "tag": "strong", + "text": "Configure detection", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "14px" + }, + "fontWeight": { + "ours": "700", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "margin": { + "ours": "0px", + "ref": "5px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "146.25px" + }, + "height": { + "ours": "auto", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 156, + "y": 245, + "w": 148, + "h": 20 + }, + "ref": { + "x": 72, + "y": 366, + "w": 146, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:1 > span:2", + "type": "style", + "tag": "span", + "text": "TOOL 02", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "46.8906px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 269, + "w": 62, + "h": 20 + }, + "ref": { + "x": 343, + "y": 354, + "w": 47, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "0px", + "ref": "22px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "358px" + }, + "height": { + "ours": "76px", + "ref": "123px" + }, + "rect": { + "ours": { + "x": 0, + "y": 291, + "w": 1440, + "h": 76 + }, + "ref": { + "x": 52, + "y": 402, + "w": 358, + "h": 123 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > label:1", + "type": "style", + "tag": "label", + "text": "BACKGROUND COLOR", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "318px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 293, + "w": 159, + "h": 20 + }, + "ref": { + "x": 72, + "y": 424, + "w": 318, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "8px" + }, + "padding": { + "ours": "0px", + "ref": "0px 8px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "318px" + }, + "height": { + "ours": "28px", + "ref": "32px" + }, + "rect": { + "ours": { + "x": 0, + "y": 315, + "w": 1440, + "h": 28 + }, + "ref": { + "x": 72, + "y": 448, + "w": 318, + "h": 32 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "14px" + }, + "height": { + "ours": "auto", + "ref": "14px" + }, + "rect": { + "ours": { + "x": 0, + "y": 320, + "w": 0, + "h": 20 + }, + "ref": { + "x": 81, + "y": 457, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "11px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 2px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(118, 118, 118)", + "ref": "rgb(23, 33, 43)" + }, + "borderTopStyle": { + "ours": "inset", + "ref": "none" + }, + "width": { + "ours": "157px", + "ref": "135px" + }, + "height": { + "ours": "24px", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 0, + "y": 319, + "w": 157, + "h": 24 + }, + "ref": { + "x": 103, + "y": 458, + "w": 135, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2 > input:3", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "11px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "block" + }, + "padding": { + "ours": "1px 2px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "1px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 33, 43)" + }, + "borderTopStyle": { + "ours": "solid", + "ref": "none" + }, + "width": { + "ours": "50px", + "ref": "135px" + }, + "rect": { + "ours": { + "x": 161, + "y": 315, + "w": 50, + "h": 27 + }, + "ref": { + "x": 246, + "y": 451, + "w": 135, + "h": 27 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > div:3", + "type": "style", + "tag": "div", + "text": "sampled from image background", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "justifyContent": { + "ours": "normal", + "ref": "flex-start" + }, + "gap": { + "ours": "normal", + "ref": "8px" + }, + "margin": { + "ours": "0px", + "ref": "10px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "318px" + }, + "height": { + "ours": "24px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 343, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 72, + "y": 490, + "w": 318, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:2 > div:3 > span:1", + "type": "style", + "tag": "span", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "9px" + }, + "height": { + "ours": "auto", + "ref": "9px" + }, + "rect": { + "ours": { + "x": 0, + "y": 345, + "w": 0, + "h": 20 + }, + "ref": { + "x": 72, + "y": 490, + "w": 9, + "h": 9 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "0px", + "ref": "22px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "358px" + }, + "height": { + "ours": "48px", + "ref": "115px" + }, + "rect": { + "ours": { + "x": 0, + "y": 367, + "w": 1440, + "h": 48 + }, + "ref": { + "x": 52, + "y": 525, + "w": 358, + "h": 115 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > label:1", + "type": "style", + "tag": "label", + "text": "COLOR SIMILARITY", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "318px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 369, + "w": 184, + "h": 20 + }, + "ref": { + "x": 72, + "y": 547, + "w": 318, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > label:1 > output:1", + "type": "style", + "tag": "output", + "text": "72 %", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "26px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 147, + "y": 369, + "w": 38, + "h": 20 + }, + "ref": { + "x": 364, + "y": 547, + "w": 26, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > input:2", + "type": "style", + "tag": "input", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "16px" + }, + "lineHeight": { + "ours": "normal", + "ref": "24px" + }, + "color": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(23, 33, 43)" + }, + "backgroundColor": { + "ours": "rgb(255, 255, 255)", + "ref": "rgba(0, 0, 0, 0)" + }, + "margin": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(16, 16, 16)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 190, + "y": 369, + "w": 129, + "h": 16 + }, + "ref": { + "x": 72, + "y": 572, + "w": 129, + "h": 16 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "10px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "318px" + }, + "height": { + "ours": "24px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 391, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 72, + "y": 605, + "w": 318, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:3 > span:1", + "type": "style", + "tag": "span", + "text": "strict edges", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "65.9844px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 393, + "w": 84, + "h": 20 + }, + "ref": { + "x": 72, + "y": 605, + "w": 66, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:3 > div:3 > span:2", + "type": "style", + "tag": "span", + "text": "more removal", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "65.9844px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 87, + "y": 393, + "w": 99, + "h": 20 + }, + "ref": { + "x": 324, + "y": 605, + "w": 66, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "0px", + "ref": "22px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "358px" + }, + "height": { + "ours": "64px", + "ref": "93px" + }, + "rect": { + "ours": { + "x": 0, + "y": 415, + "w": 1440, + "h": 64 + }, + "ref": { + "x": 52, + "y": 640, + "w": 358, + "h": 93 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > label:1", + "type": "style", + "tag": "label", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "318px" + }, + "height": { + "ours": "auto", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 0, + "y": 417, + "w": 148, + "h": 20 + }, + "ref": { + "x": 72, + "y": 662, + "w": 318, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > label:1 > span:1", + "type": "style", + "tag": "span", + "text": "OUTER COLOR ONLY", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "103.969px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 417, + "w": 148, + "h": 20 + }, + "ref": { + "x": 72, + "y": 665, + "w": 104, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > label:1 > b:2", + "type": "style", + "tag": "b", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "32px" + }, + "height": { + "ours": "auto", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 148, + "y": 417, + "w": 0, + "h": 20 + }, + "ref": { + "x": 358, + "y": 662, + "w": 32, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:4 > p:2", + "type": "style", + "tag": "p", + "text": "Only remove connected background pixels from the edges.", + "deltas": { + "fontSize": { + "ours": "16px", + "ref": "12px" + }, + "lineHeight": { + "ours": "24px", + "ref": "18px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "margin": { + "ours": "16px 0px", + "ref": "8px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "318px" + }, + "height": { + "ours": "24px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 0, + "y": 455, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 72, + "y": 692, + "w": 318, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:5", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "padding": { + "ours": "0px", + "ref": "22px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "358px" + }, + "height": { + "ours": "64px", + "ref": "93px" + }, + "rect": { + "ours": { + "x": 0, + "y": 495, + "w": 1440, + "h": 64 + }, + "ref": { + "x": 52, + "y": 733, + "w": 358, + "h": 93 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:5 > label:1", + "type": "style", + "tag": "label", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 12px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "318px" + }, + "height": { + "ours": "auto", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 0, + "y": 497, + "w": 93, + "h": 20 + }, + "ref": { + "x": 72, + "y": 755, + "w": 318, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:5 > label:1 > span:1", + "type": "style", + "tag": "span", + "text": "SHOW MASK", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "58.4844px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 497, + "w": 93, + "h": 20 + }, + "ref": { + "x": 72, + "y": 758, + "w": 58, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:5 > label:1 > b:2", + "type": "style", + "tag": "b", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "32px" + }, + "height": { + "ours": "auto", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 93, + "y": 497, + "w": 0, + "h": 20 + }, + "ref": { + "x": 358, + "y": 755, + "w": 32, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:5 > p:2", + "type": "style", + "tag": "p", + "text": "Preview the detected transparency mask.", + "deltas": { + "fontSize": { + "ours": "16px", + "ref": "12px" + }, + "lineHeight": { + "ours": "24px", + "ref": "18px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "margin": { + "ours": "16px 0px", + "ref": "8px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "318px" + }, + "height": { + "ours": "24px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 0, + "y": 535, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 72, + "y": 785, + "w": 318, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:6", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "padding": { + "ours": "0px", + "ref": "16px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "358px" + }, + "height": { + "ours": "25px", + "ref": "50px" + }, + "rect": { + "ours": { + "x": 0, + "y": 575, + "w": 1440, + "h": 25 + }, + "ref": { + "x": 52, + "y": 826, + "w": 358, + "h": 50 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:6 > button:1", + "type": "style", + "tag": "button", + "text": "Reset", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "12px" + }, + "lineHeight": { + "ours": "normal", + "ref": "18px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 105, 210)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgba(0, 0, 0, 0)" + }, + "display": { + "ours": "inline-block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "7px" + }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 105, 210)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "none" + }, + "width": { + "ours": "67.2969px", + "ref": "52.3594px" + }, + "height": { + "ours": "24px", + "ref": "18px" + }, + "rect": { + "ours": { + "x": 0, + "y": 576, + "w": 67, + "h": 24 + }, + "ref": { + "x": 72, + "y": 842, + "w": 52, + "h": 18 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:6 > button:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontSize": { + "ours": "13.3333px", + "ref": "12px" + }, + "lineHeight": { + "ours": "normal", + "ref": "18px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 8, + "y": 579, + "w": 14, + "h": 14 + }, + "ref": { + "x": 72, + "y": 844, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:6 > span:2", + "type": "style", + "tag": "span", + "text": "updates automatically", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "11px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "8px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "141.016px" + }, + "height": { + "ours": "auto", + "ref": "13px" + }, + "rect": { + "ours": { + "x": 71, + "y": 577, + "w": 159, + "h": 20 + }, + "ref": { + "x": 249, + "y": 845, + "w": 141, + "h": 13 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:1 > div:6 > span:2 > i:1", + "type": "style", + "tag": "i", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "11px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(37, 169, 106)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderRadius": { + "ours": "0px", + "ref": "50%" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "6px" + }, + "height": { + "ours": "auto", + "ref": "6px" + }, + "rect": { + "ours": { + "x": 71, + "y": 577, + "w": 0, + "h": 20 + }, + "ref": { + "x": 249, + "y": 848, + "w": 6, + "h": 6 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2", + "type": "style", + "tag": "section", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(248, 250, 251)" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "761.625px" + }, + "height": { + "ours": "217px", + "ref": "614px" + }, + "rect": { + "ours": { + "x": 0, + "y": 600, + "w": 1440, + "h": 217 + }, + "ref": { + "x": 467, + "y": 318, + "w": 762, + "h": 614 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "padding": { + "ours": "0px", + "ref": "18px 20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "759.625px" + }, + "height": { + "ours": "49px", + "ref": "121px" + }, + "rect": { + "ours": { + "x": 0, + "y": 600, + "w": 1440, + "h": 49 + }, + "ref": { + "x": 468, + "y": 319, + "w": 760, + "h": 121 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "107.766px" + }, + "height": { + "ours": "24px", + "ref": "46px" + }, + "rect": { + "ours": { + "x": 0, + "y": 600, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 488, + "y": 356, + "w": 108, + "h": 46 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "SOURCE / RESULT", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "letterSpacing": { + "ours": "normal", + "ref": "1.2px" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 0, + "y": 602, + "w": 130, + "h": 20 + }, + "ref": { + "x": 488, + "y": 364, + "w": 100, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1 > strong:2", + "type": "style", + "tag": "strong", + "text": "comparison.png", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "14px" + }, + "fontWeight": { + "ours": "700", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "margin": { + "ours": "0px", + "ref": "5px 0px 0px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "107.766px" + }, + "height": { + "ours": "auto", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 134, + "y": 602, + "w": 121, + "h": 20 + }, + "ref": { + "x": 488, + "y": 385, + "w": 108, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "flex-end" + }, + "gap": { + "ours": "normal", + "ref": "10px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "193.203px" + }, + "height": { + "ours": "25px", + "ref": "84px" + }, + "rect": { + "ours": { + "x": 0, + "y": 624, + "w": 1440, + "h": 25 + }, + "ref": { + "x": 1015, + "y": 337, + "w": 193, + "h": 84 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > span:1", + "type": "style", + "tag": "span", + "text": "processed", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(37, 169, 106)" + }, + "display": { + "ours": "inline", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "5px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "68.4844px" + }, + "height": { + "ours": "auto", + "ref": "14px" + }, + "rect": { + "ours": { + "x": 0, + "y": 626, + "w": 92, + "h": 20 + }, + "ref": { + "x": 1139, + "y": 337, + "w": 68, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > span:1 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(37, 169, 106)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 0, + "y": 628, + "w": 14, + "h": 14 + }, + "ref": { + "x": 1139, + "y": 337, + "w": 14, + "h": 14 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:2", + "type": "style", + "tag": "button", + "text": "Download result", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "11px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(255, 255, 255)" + }, + "backgroundColor": { + "ours": "rgb(240, 240, 240)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline-block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "justifyContent": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "9px" + }, + "padding": { + "ours": "1px 6px", + "ref": "0px" + }, + "margin": { + "ours": "0px", + "ref": "18px 0px 0px" + }, + "borderTopWidth": { + "ours": "2px", + "ref": "0px" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(255, 255, 255)" + }, + "borderTopStyle": { + "ours": "outset", + "ref": "none" + }, + "width": { + "ours": "131.828px", + "ref": "193.203px" + }, + "height": { + "ours": "25px", + "ref": "42px" + }, + "rect": { + "ours": { + "x": 96, + "y": 624, + "w": 132, + "h": 25 + }, + "ref": { + "x": 1015, + "y": 379, + "w": 193, + "h": 42 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:2 > svg:1", + "type": "style", + "tag": "svg", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "13.3333px", + "ref": "11px" + }, + "color": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(255, 255, 255)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(0, 0, 0)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 104, + "y": 627, + "w": 15, + "h": 15 + }, + "ref": { + "x": 1054, + "y": 393, + "w": 15, + "h": 15 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "grid" + }, + "gap": { + "ours": "normal", + "ref": "18px" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "350.812px 350.812px" + }, + "padding": { + "ours": "0px", + "ref": "20px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "759.625px" + }, + "height": { + "ours": "144px", + "ref": "446px" + }, + "rect": { + "ours": { + "x": 0, + "y": 649, + "w": 1440, + "h": 144 + }, + "ref": { + "x": 468, + "y": 440, + "w": 760, + "h": 446 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "350.812px" + }, + "height": { + "ours": "72px", + "ref": "406px" + }, + "rect": { + "ours": { + "x": 0, + "y": 649, + "w": 1440, + "h": 72 + }, + "ref": { + "x": 488, + "y": 460, + "w": 351, + "h": 406 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 10px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "350.812px" + }, + "height": { + "ours": "24px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 649, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 488, + "y": 460, + "w": 351, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "SOURCE", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "33px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 651, + "w": 61, + "h": 20 + }, + "ref": { + "x": 488, + "y": 460, + "w": 33, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:1 > b:2", + "type": "style", + "tag": "b", + "text": "original.png", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "fontWeight": { + "ours": "700", + "ref": "400" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "65.9844px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 61, + "y": 651, + "w": 90, + "h": 20 + }, + "ref": { + "x": 773, + "y": 460, + "w": 66, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "backgroundColor": { + "ours": "rgba(0, 0, 0, 0)", + "ref": "rgb(232, 238, 242)" + }, + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "348.812px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "350.812px" + }, + "height": { + "ours": "48px", + "ref": "384px" + }, + "rect": { + "ours": { + "x": 0, + "y": 673, + "w": 1440, + "h": 48 + }, + "ref": { + "x": 488, + "y": 482, + "w": 351, + "h": 384 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "14px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgba(255, 255, 255, 0.85)" + }, + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "258.109px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "258.109px" + }, + "height": { + "ours": "24px", + "ref": "259.75px" + }, + "rect": { + "ours": { + "x": 0, + "y": 673, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 528, + "y": 538, + "w": 271, + "h": 273 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:2 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "OBJECT", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "14px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgba(255, 255, 255, 0.85)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "46.1875px" + }, + "height": { + "ours": "auto", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 0, + "y": 675, + "w": 58, + "h": 20 + }, + "ref": { + "x": 640, + "y": 665, + "w": 47, + "h": 19 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:2 > span:2", + "type": "style", + "tag": "span", + "text": "1200 × 800", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "9px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "49.4844px" + }, + "height": { + "ours": "auto", + "ref": "10px" + }, + "rect": { + "ours": { + "x": 0, + "y": 699, + "w": 84, + "h": 20 + }, + "ref": { + "x": 779, + "y": 846, + "w": 49, + "h": 10 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "350.812px" + }, + "height": { + "ours": "72px", + "ref": "406px" + }, + "rect": { + "ours": { + "x": 0, + "y": 721, + "w": 1440, + "h": 72 + }, + "ref": { + "x": 857, + "y": 460, + "w": 351, + "h": 406 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "justifyContent": { + "ours": "normal", + "ref": "space-between" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 10px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "350.812px" + }, + "height": { + "ours": "24px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 721, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 857, + "y": 460, + "w": 351, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "RESULT", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "33px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 723, + "w": 56, + "h": 20 + }, + "ref": { + "x": 857, + "y": 460, + "w": 33, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:1 > b:2", + "type": "style", + "tag": "b", + "text": "removed-bg.png", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "fontWeight": { + "ours": "700", + "ref": "400" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "76.9844px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 56, + "y": 723, + "w": 124, + "h": 20 + }, + "ref": { + "x": 1131, + "y": 460, + "w": 77, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:2", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "348.812px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "350.812px" + }, + "height": { + "ours": "48px", + "ref": "384px" + }, + "rect": { + "ours": { + "x": 0, + "y": 745, + "w": 1440, + "h": 48 + }, + "ref": { + "x": 857, + "y": 482, + "w": 351, + "h": 384 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:2 > div:1", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "14px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgba(255, 255, 255, 0.85)" + }, + "display": { + "ours": "block", + "ref": "grid" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gridTemplateColumns": { + "ours": "none", + "ref": "258.109px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "258.109px" + }, + "height": { + "ours": "24px", + "ref": "259.75px" + }, + "rect": { + "ours": { + "x": 0, + "y": 745, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 903, + "y": 545, + "w": 258, + "h": 260 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:2 > div:1 > span:1", + "type": "style", + "tag": "span", + "text": "PNG", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "14px" + }, + "fontWeight": { + "ours": "400", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgba(255, 255, 255, 0.85)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "23.0938px" + }, + "height": { + "ours": "auto", + "ref": "17px" + }, + "rect": { + "ours": { + "x": 0, + "y": 747, + "w": 32, + "h": 20 + }, + "ref": { + "x": 1021, + "y": 666, + "w": 23, + "h": 17 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:2 > span:2", + "type": "style", + "tag": "span", + "text": "1200 × 800", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "9px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "49.4844px" + }, + "height": { + "ours": "auto", + "ref": "10px" + }, + "rect": { + "ours": { + "x": 0, + "y": 771, + "w": 84, + "h": 20 + }, + "ref": { + "x": 1147, + "y": 846, + "w": 49, + "h": 10 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3", + "type": "style", + "tag": "div", + "text": "", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "gap": { + "ours": "normal", + "ref": "24px" + }, + "padding": { + "ours": "0px", + "ref": "16px 20px" + }, + "borderTopWidth": { + "ours": "0px", + "ref": "1px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "1440px", + "ref": "759.625px" + }, + "height": { + "ours": "24px", + "ref": "45px" + }, + "rect": { + "ours": { + "x": 0, + "y": 793, + "w": 1440, + "h": 24 + }, + "ref": { + "x": 468, + "y": 886, + "w": 760, + "h": 45 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3 > span:1", + "type": "style", + "tag": "span", + "text": "FORMAT", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "77.5px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 0, + "y": 795, + "w": 125, + "h": 20 + }, + "ref": { + "x": 488, + "y": 903, + "w": 78, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3 > span:1 > b:1", + "type": "style", + "tag": "b", + "text": "PNG-24", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "fontWeight": { + "ours": "700", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 0px 6px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 65, + "y": 795, + "w": 59, + "h": 20 + }, + "ref": { + "x": 533, + "y": 903, + "w": 33, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3 > span:2", + "type": "style", + "tag": "span", + "text": "ALPHA", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "77.5px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 129, + "y": 795, + "w": 126, + "h": 20 + }, + "ref": { + "x": 590, + "y": 903, + "w": 78, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3 > span:2 > b:1", + "type": "style", + "tag": "b", + "text": "ENABLED", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "fontWeight": { + "ours": "700", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 0px 6px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 182, + "y": 795, + "w": 72, + "h": 20 + }, + "ref": { + "x": 629, + "y": 903, + "w": 39, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3 > span:3", + "type": "style", + "tag": "span", + "text": "SIMILARITY", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "color": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(109, 120, 131)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "88.4844px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 258, + "y": 795, + "w": 131, + "h": 20 + }, + "ref": { + "x": 691, + "y": 903, + "w": 88, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > div:2 > div:3 > section:2 > div:3 > span:3 > b:1", + "type": "style", + "tag": "b", + "text": "72 %", + "deltas": { + "fontFamily": { + "ours": "\"IBM Plex Sans\", sans-serif", + "ref": "\"IBM Plex Mono\", monospace" + }, + "fontSize": { + "ours": "16px", + "ref": "10px" + }, + "fontWeight": { + "ours": "700", + "ref": "600" + }, + "lineHeight": { + "ours": "24px", + "ref": "normal" + }, + "margin": { + "ours": "0px", + "ref": "0px 0px 0px 6px" + }, + "borderTopColor": { + "ours": "rgb(23, 33, 43)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "rect": { + "ours": { + "x": 351, + "y": 795, + "w": 39, + "h": 20 + }, + "ref": { + "x": 758, + "y": 903, + "w": 22, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > footer:3", + "type": "style", + "tag": "footer", + "text": "", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "gap": { + "ours": "16px", + "ref": "normal" + }, + "padding": { + "ours": "16px 57.6px", + "ref": "16px 51.2px" + }, + "width": { + "ours": "1440px", + "ref": "1280px" + }, + "height": { + "ours": "46px", + "ref": "45px" + }, + "rect": { + "ours": { + "x": 0, + "y": 817, + "w": 1440, + "h": 46 + }, + "ref": { + "x": 0, + "y": 1004, + "w": 1280, + "h": 45 + } + } + } + }, + { + "path": "body > main:1 > footer:3 > span:1", + "type": "style", + "tag": "span", + "text": "easy-png-tools", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "7px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "142.812px", + "ref": "116.984px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 58, + "y": 834, + "w": 143, + "h": 13 + }, + "ref": { + "x": 51, + "y": 1021, + "w": 117, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > footer:3 > span:1 > b:1", + "type": "style", + "tag": "b", + "text": "v2.4.0", + "deltas": { + "fontWeight": { + "ours": "700", + "ref": "400" + }, + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "color": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(23, 105, 210)" + }, + "display": { + "ours": "inline", + "ref": "block" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "auto", + "ref": "33px" + }, + "height": { + "ours": "auto", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 160, + "y": 834, + "w": 41, + "h": 13 + }, + "ref": { + "x": 135, + "y": 1021, + "w": 33, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > footer:3 > span:2", + "type": "style", + "tag": "span", + "text": "background remover · local-only", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "7px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "210.812px", + "ref": "170.453px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 666, + "y": 834, + "w": 211, + "h": 13 + }, + "ref": { + "x": 597, + "y": 1021, + "w": 170, + "h": 12 + } + } + } + }, + { + "path": "body > main:1 > footer:3 > span:3", + "type": "style", + "tag": "span", + "text": "© 2024", + "deltas": { + "letterSpacing": { + "ours": "0.8px", + "ref": "normal" + }, + "display": { + "ours": "block", + "ref": "flex" + }, + "alignItems": { + "ours": "normal", + "ref": "center" + }, + "gap": { + "ours": "normal", + "ref": "7px" + }, + "borderTopColor": { + "ours": "rgb(109, 120, 131)", + "ref": "rgb(203, 211, 218)" + }, + "borderTopStyle": { + "ours": "none", + "ref": "solid" + }, + "width": { + "ours": "40.8125px", + "ref": "33px" + }, + "height": { + "ours": "13px", + "ref": "12px" + }, + "rect": { + "ours": { + "x": 1342, + "y": 834, + "w": 41, + "h": 13 + }, + "ref": { + "x": 1196, + "y": 1021, + "w": 33, + "h": 12 + } + } + } + } + ], + "tokenDiffs": { + "light": [ + { + "key": "--danger", + "ours": "#e5484d", + "ref": "—" + }, + { + "key": "--success", + "ours": "#25a96a", + "ref": "—" + }, + { + "key": "--text-sm--line-height", + "ours": "—", + "ref": "calc(1.25 / .875)" + }, + { + "key": "--text-xs--line-height", + "ours": "—", + "ref": "calc(1 / .75)" + }, + { + "key": "--font-weight-medium", + "ours": "—", + "ref": "500" + }, + { + "key": "--spacing", + "ours": "—", + "ref": ".25rem" + }, + { + "key": "--text-xs", + "ours": "—", + "ref": ".75rem" + }, + { + "key": "--radius-md", + "ours": "—", + "ref": ".375rem" + }, + { + "key": "--radius-lg", + "ours": "—", + "ref": ".5rem" + }, + { + "key": "--text-sm", + "ours": "—", + "ref": ".875rem" + } + ], + "dark": [ + { + "key": "--panel", + "ours": "#182129", + "ref": "#f8fafb" + }, + { + "key": "--blue", + "ours": "#54a2ff", + "ref": "#1769d2" + }, + { + "key": "--muted", + "ours": "#91a0ac", + "ref": "#6d7883" + }, + { + "key": "--background", + "ours": "#11171d", + "ref": "#eef1f4" + }, + { + "key": "--danger", + "ours": "#ff7479", + "ref": "—" + }, + { + "key": "--foreground", + "ours": "#e8eef2", + "ref": "#17212b" + }, + { + "key": "--success", + "ours": "#25a96a", + "ref": "—" + }, + { + "key": "--line", + "ours": "#33414c", + "ref": "#cbd3da" + }, + { + "key": "--text-sm--line-height", + "ours": "—", + "ref": "calc(1.25 / .875)" + }, + { + "key": "--text-xs--line-height", + "ours": "—", + "ref": "calc(1 / .75)" + }, + { + "key": "--font-weight-medium", + "ours": "—", + "ref": "500" + }, + { + "key": "--spacing", + "ours": "—", + "ref": ".25rem" + }, + { + "key": "--text-xs", + "ours": "—", + "ref": ".75rem" + }, + { + "key": "--radius-md", + "ours": "—", + "ref": ".375rem" + }, + { + "key": "--radius-lg", + "ours": "—", + "ref": ".5rem" + }, + { + "key": "--text-sm", + "ours": "—", + "ref": ".875rem" + } + ] + }, + "counts": { + "tagMismatch": 0, + "textMismatch": 0, + "added": 0, + "removed": 0, + "styleDiffs": 108, + "rectDiffs": 108, + "fieldDiffs": 965, + "tokenLight": 10, + "tokenDark": 16 } } ] diff --git a/web/audit/audit-report.md b/web/audit/audit-report.md index c1c09a6..154c0fa 100644 --- a/web/audit/audit-report.md +++ b/web/audit/audit-report.md @@ -1,20 +1,21 @@ -# Style audit (multi-route) +# CSS audit (phase B) -_2026-08-28T15:27:27.893Z_ +_2026-08-29T05:32:08.835Z_ ## Сводка -| route | ref | tokL | tokD | els | onlyOurs | onlyRef | -|---|---|---|---|---|---|---| -| `/preview/demo` | demo.html | 10 | 16 | 47 | 18 | 11 | -| `/preview/list-tools` | list-tools.html | 10 | 16 | 30 | 257 | 54 | -| `/preview/tools/linear-gradient-png` | gradient.html | 10 | 16 | 7 | 111 | 30 | -| `/preview/tools/remove-background-png` | background-remover.html | 10 | 16 | 8 | 110 | 28 | +| route | ref | tokL | tokD | style (el) | fields | rect | +struct | -struct | tag | text | +|---|---|---|---|---|---|---|---|---|---|---| +| `/preview/demo` | demo.html | 10 | 16 | 215 | 1497 | 215 | 0 | 0 | 0 | 0 | +| `/preview/list-tools` | list-tools.html | 10 | 16 | 303 | 1638 | 303 | 0 | 0 | 0 | 0 | +| `/preview/tools/linear-gradient-png` | gradient.html | 10 | 16 | 103 | 906 | 103 | 0 | 0 | 0 | 0 | +| `/preview/tools/remove-background-png` | background-remover.html | 10 | 16 | 108 | 965 | 108 | 0 | 0 | 0 | 0 | ## /preview/demo (vs demo.html) - Токены light: **10**, dark: **16** -- Элементы: **47**, только у нас: 18, только в рефе: 11 +- Стиль-расхождений: **215** элементов / **1497** полей (из них геометрия: 215) +- Структурные: +0 / -0 / tag 0 / text 0 ### Токены — Light @@ -52,262 +53,1536 @@ _2026-08-28T15:27:27.893Z_ | `--radius-lg` | — | .5rem | | `--text-sm` | — | .875rem | -### Расхождения элементов (топ 47) +### Расхождения стилей (топ 150) -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "/" +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > label:1` — "OPACITY" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `0.8px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `block` → `flex` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `0px 0px 8px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `190.047px` → `143.922px` + - **height**: `24px` → `12px` + - **rect**: `533,530 190x24` → `477,534 144x12` + +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > button:2` — "Download result" + - **fontSize**: `12px` → `11px` + - **letterSpacing**: `0.48px` → `normal` + - **justifyContent**: `normal` → `center` + - **gap**: `8px` → `9px` + - **padding**: `9px 14px` → `0px` + - **margin**: `0px` → `18px 0px 0px` + - **borderRadius**: `4px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(255, 255, 255)` + - **borderTopStyle**: `solid` → `none` + - **width**: `191.203px` → `418.875px` + - **height**: `36px` → `42px` + - **rect**: `955,231 191x36` → `791,204 419x42` + +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > button:4` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `grid` + - **justifyContent**: `center` → `normal` + - **gridTemplateColumns**: `none` → `17px` + - **padding**: `1px 6px` → `6px` + - **borderRadius**: `4px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **borderTopColor**: `rgb(203, 211, 218)` → `rgb(109, 120, 131)` + - **borderTopStyle**: `solid` → `none` + - **width**: `32px` → `29px` + - **height**: `32px` → `29px` + - **rect**: `1331,233 32x32` → `1181,266 29x29` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:2 > span:1` — "AUTO" + - **lineHeight**: `15px` → `normal` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **color**: `rgb(37, 169, 106)` → `rgb(35, 131, 84)` + - **gap**: `4.8px` → `4px` + - **padding**: `2.4px 7.2px` → `0px` + - **borderRadius**: `4px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **borderTopColor**: `color(srgb 0.535686 0.761569 0.679216)` → `rgb(203, 211, 218)` + - **width**: `60.375px` → `38px` + - **height**: `21.7812px` → `12px` + - **rect**: `589,455 60x22` → `524,495 38x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:2 > span:1` — "AUTO" + - **lineHeight**: `15px` → `normal` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **color**: `rgb(37, 169, 106)` → `rgb(35, 131, 84)` + - **gap**: `4.8px` → `4px` + - **padding**: `2.4px 7.2px` → `0px` + - **borderRadius**: `4px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **borderTopColor**: `color(srgb 0.535686 0.761569 0.679216)` → `rgb(203, 211, 218)` + - **width**: `60.375px` → `38px` + - **height**: `21.7812px` → `12px` + - **rect**: `589,614 60x22` → `524,657 38x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:2 > span:1` — "AUTO" + - **lineHeight**: `15px` → `normal` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **color**: `rgb(37, 169, 106)` → `rgb(35, 131, 84)` + - **gap**: `4.8px` → `4px` + - **padding**: `2.4px 7.2px` → `0px` + - **borderRadius**: `4px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **borderTopColor**: `color(srgb 0.535686 0.761569 0.679216)` → `rgb(203, 211, 218)` + - **width**: `60.375px` → `38px` + - **height**: `21.7812px` → `12px` + - **rect**: `589,713 60x22` → `524,805 38x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:2 > span:1` — "AUTO" + - **lineHeight**: `15px` → `normal` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **color**: `rgb(37, 169, 106)` → `rgb(35, 131, 84)` + - **gap**: `4.8px` → `4px` + - **padding**: `2.4px 7.2px` → `0px` + - **borderRadius**: `4px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **borderTopColor**: `color(srgb 0.535686 0.761569 0.679216)` → `rgb(203, 211, 218)` + - **width**: `60.375px` → `38px` + - **height**: `21.7812px` → `12px` + - **rect**: `589,864 60x22` → `524,967 38x12` + +### `body > main:1 > div:2 > section:2 > div:2 > div:1 > div:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `9px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **alignItems**: `baseline` → `normal` + - **padding**: `0px` → `8px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `549.891px` → `239.375px` + - **height**: `13px` → `27px` + - **rect**: `806,655 550x13` → `716,637 239x27` + +### `body > main:1 > div:2 > section:2 > div:2 > div:2 > div:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `9px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **alignItems**: `baseline` → `normal` + - **padding**: `0px` → `8px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `549.891px` → `239.391px` + - **height**: `13px` → `27px` + - **rect**: `806,1026 550x13` → `969,637 239x27` + +### `body > main:1 > div:2 > section:2 > div:2 > div:3 > div:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `9px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **alignItems**: `baseline` → `normal` + - **padding**: `0px` → `8px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `549.891px` → `239.375px` + - **height**: `13px` → `27px` + - **rect**: `806,1396 550x13` → `716,978 239x27` + +### `body > main:1 > div:2 > section:2 > div:2 > div:4 > div:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `9px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **alignItems**: `baseline` → `normal` + - **padding**: `0px` → `8px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `549.891px` → `239.391px` + - **height**: `13px` → `27px` + - **rect**: `806,1767 550x13` → `969,978 239x27` + +### `body > main:1 > div:2 > section:2 > div:2 > div:5 > div:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `9px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **alignItems**: `baseline` → `normal` + - **padding**: `0px` → `8px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `549.891px` → `239.375px` + - **height**: `13px` → `27px` + - **rect**: `806,2137 550x13` → `716,1319 239x27` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:2` + - **fontSize**: `13.6px` → `16px` + - **lineHeight**: `20.4px` → `24px` + - **display**: `flex` → `block` + - **alignItems**: `center` → `normal` + - **justifyContent**: `space-between` → `normal` + - **gap**: `16px` → `normal` + - **padding**: `10px 0px 0px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **width**: `301.062px` → `234.422px` + - **height**: `53px` → `44px` + - **rect**: `422,928 301x53` → `387,1006 234x44` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:2 > button:2 > i:1` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(0, 0, 0)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(255, 255, 255)` → `rgba(0, 0, 0, 0)` + - **display**: `block` → `inline` + - **borderRadius**: `50%` → `0px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `16.7969px` → `auto` + - **height**: `16.7969px` → `auto` + - **rect**: `704,952 17x17` → `558,1015 0x0` + +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2.4px` → `8px` + - **gridTemplateColumns**: `none` → `78.625px 78.625px 78.625px` + - **padding**: `0px` → `14px 0px 0px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `164.812px` → `251.875px` + - **height**: `78.2812px` → `48px` + - **rect**: `1157,210 165x78` → `919,256 252x48` + +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:1` + - **display**: `flex` → `grid` + - **alignItems**: `baseline` → `normal` + - **justifyContent**: `space-between` → `normal` + - **gap**: `16px` → `5px` + - **gridTemplateColumns**: `none` → `78.625px` + - **padding**: `4px 0px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `164.812px` → `78.625px` + - **height**: `24.5px` → `33px` + - **rect**: `1157,210 165x25` → `919,271 79x33` + +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:2` + - **display**: `flex` → `grid` + - **alignItems**: `baseline` → `normal` + - **justifyContent**: `space-between` → `normal` + - **gap**: `16px` → `5px` + - **gridTemplateColumns**: `none` → `78.625px` + - **padding**: `4px 0px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `164.812px` → `78.625px` + - **height**: `24.5px` → `33px` + - **rect**: `1157,237 165x25` → `1006,271 79x33` + +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:3` + - **display**: `flex` → `grid` + - **alignItems**: `baseline` → `normal` + - **justifyContent**: `space-between` → `normal` + - **gap**: `16px` → `5px` + - **gridTemplateColumns**: `none` → `78.625px` + - **padding**: `4px 0px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `164.812px` → `78.625px` + - **height**: `24.5px` → `33px` + - **rect**: `1157,264 165x25` → `1092,271 79x33` + +### `body > main:1 > div:2 > section:2 > div:2 > div:1 > div:1` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(228, 232, 235)` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `center` + - **gridTemplateColumns**: `none` → `207.375px` + - **padding**: `0px` → `16px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `549.891px` → `239.375px` + - **height**: `325.844px` → `300px` + - **rect**: `806,325 550x326` → `716,337 239x300` + +### `body > main:1 > div:2 > section:2 > div:2 > div:2 > div:1` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(228, 232, 235)` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `center` + - **gridTemplateColumns**: `none` → `207.391px` + - **padding**: `0px` → `16px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `549.891px` → `239.391px` + - **height**: `325.844px` → `300px` + - **rect**: `806,695 550x326` → `969,337 239x300` + +### `body > main:1 > div:2 > section:2 > div:2 > div:3 > div:1` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(228, 232, 235)` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `center` + - **gridTemplateColumns**: `none` → `207.375px` + - **padding**: `0px` → `16px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `549.891px` → `239.375px` + - **height**: `325.844px` → `300px` + - **rect**: `806,1066 550x326` → `716,678 239x300` + +### `body > main:1 > div:2 > section:2 > div:2 > div:4 > div:1` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(228, 232, 235)` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `center` + - **gridTemplateColumns**: `none` → `207.391px` + - **padding**: `0px` → `16px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `549.891px` → `239.391px` + - **height**: `325.844px` → `300px` + - **rect**: `806,1436 550x326` → `969,678 239x300` + +### `body > main:1 > div:2 > section:2 > div:2 > div:5 > div:1` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(228, 232, 235)` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `center` + - **gridTemplateColumns**: `none` → `207.375px` + - **padding**: `0px` → `16px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `549.891px` → `239.375px` + - **height**: `325.844px` → `300px` + - **rect**: `806,1806 550x326` → `716,1019 239x300` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:1 > div:2 > input:2` + - **textTransform**: `uppercase` → `none` + - **backgroundColor**: `rgb(238, 241, 244)` → `rgba(0, 0, 0, 0)` + - **padding**: `5.6px 8px` → `0px` + - **borderRadius**: `4px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **borderTopColor**: `rgb(203, 211, 218)` → `rgb(23, 33, 43)` + - **borderTopStyle**: `solid` → `none` + - **width**: `137.656px` → `127px` + - **height**: `27.1875px` → `13px` + - **rect**: `137,559 138x27` → `167,563 127x13` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:2 > input:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(16, 16, 16)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(255, 255, 255)` → `rgba(0, 0, 0, 0)` + - **display**: `block` → `inline-block` + - **margin**: `2px` → `0px` + - **borderTopColor**: `rgb(16, 16, 16)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `190.047px` → `119.922px` + - **rect**: `321,554 190x16` → `341,555 120x16` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > label:1 > output:1` — "100%" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `0.8px` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `25.2031px` + - **height**: `auto` → `12px` + - **rect**: `602,532 44x20` → `596,534 25x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > div:2 > button:1` — "100" + - **letterSpacing**: `0.6px` → `normal` + - **textTransform**: `uppercase` → `none` + - **color**: `rgb(109, 120, 131)` → `rgb(255, 255, 255)` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(23, 105, 210)` + - **display**: `flex` → `block` + - **alignItems**: `center` → `normal` + - **padding**: `0px 11.2px` → `0px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(255, 255, 255)` + - **width**: `42.1875px` → `35.4688px` + - **rect**: `534,563 42x30` → `478,555 35x30` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:1 > input:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(16, 16, 16)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(255, 255, 255)` → `rgba(0, 0, 0, 0)` + - **display**: `block` → `inline-block` + - **margin**: `2px` → `0px` + - **borderTopColor**: `rgb(16, 16, 16)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `301.062px` → `234.422px` + - **rect**: `107,812 301x16` → `136,865 234x16` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:2 > div:2 > input:2` + - **textTransform**: `uppercase` → `none` + - **backgroundColor**: `rgb(238, 241, 244)` → `rgba(0, 0, 0, 0)` + - **padding**: `5.6px 8px` → `0px` + - **borderRadius**: `4px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **borderTopColor**: `rgb(203, 211, 218)` → `rgb(23, 33, 43)` + - **borderTopStyle**: `solid` → `none` + - **width**: `269.078px` → `194.422px` + - **height**: `27.1875px` → `13px` + - **rect**: `454,817 269x27` → `418,873 194x13` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:1 > input:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(16, 16, 16)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(255, 255, 255)` → `rgba(0, 0, 0, 0)` + - **display**: `block` → `inline-block` + - **margin**: `2px` → `0px` + - **borderTopColor**: `rgb(16, 16, 16)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `301.062px` → `234.422px` + - **rect**: `107,963 301x16` → `136,1027 234x16` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:2 > button:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(0, 0, 0)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(23, 105, 210)` → `rgba(0, 0, 0, 0)` + - **display**: `block` → `inline-block` + - **borderRadius**: `999px` → `0px` + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **width**: `38.3906px` → `32px` + - **height**: `20.7969px` → `18px` + - **rect**: `684,950 38x21` → `542,1006 32x18` + +### `body > main:1 > div:2 > section:2 > div:2 > div:5` + - **backgroundColor**: `rgb(248, 250, 251)` → `rgb(238, 241, 244)` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `4.8px` → `normal` + - **padding**: `6.4px` → `0px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(203, 211, 218)` → `rgb(23, 105, 210)` + - **width**: `564.672px` → `241.375px` + - **height**: `358.422px` → `329px` + - **rect**: `799,1799 565x358` → `715,1018 241x329` + +### `body > main:1 > header:1 > div:3 > div:4 > span:2` — "/" - **fontFamily**: `"IBM Plex Mono", monospace` → `"IBM Plex Sans", sans-serif` - **fontSize**: `10px` → `16px` - - **color**: `rgb(23, 105, 210)` → `rgb(23, 33, 43)` - - **margin**: `0px 7px` → `0px` - - **letterSpacing**: `1.2px` → `normal` - **lineHeight**: `normal` → `24px` - - **display**: `inline` → `block` - - **rect**: `165,124 7x13` → `1348,20 4x24` + - **color**: `rgb(109, 120, 131)` → `rgb(23, 33, 43)` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `6px` → `4.45312px` + - **height**: `13px` → `24px` + - **rect**: `1344,25 6x13` → `1194,20 4x24` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)` — "100%" - - **color**: `rgb(255, 255, 255)` → `rgb(23, 33, 43)` - - **backgroundColor**: `rgb(23, 105, 210)` → `rgba(0, 0, 0, 0)` - - **padding**: `0px 11.2px` → `0px` - - **letterSpacing**: `0.6px` → `0.8px` +### `body > main:1 > div:2 > section:1 > div:3 > div:1 > span:1` — "PROCESSING PIPELINE" + - **lineHeight**: `12px` → `normal` + - **letterSpacing**: `1px` → `1.2px` + - **textTransform**: `uppercase` → `none` + - **display**: `block` → `inline` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `153.609px` → `auto` + - **height**: `12px` → `auto` + - **rect**: `58,382 154x12` → `51,388 127x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:1 > label:1` — "COLOR" + - **letterSpacing**: `0.5px` → `0.8px` + - **textTransform**: `uppercase` → `none` + - **alignItems**: `baseline` → `normal` + - **gap**: `8px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `190.031px` → `189px` + - **height**: `13px` → `12px` + - **rect**: `105,530 190x13` → `136,534 189x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:2 > label:1` — "DIRECTION" + - **letterSpacing**: `0.5px` → `0.8px` + - **textTransform**: `uppercase` → `none` + - **alignItems**: `center` → `normal` + - **gap**: `8px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `190.047px` → `119.922px` + - **height**: `14px` → `12px` + - **rect**: `319,530 190x14` → `341,534 120x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:1 > label:1` — "WIDTH" + - **letterSpacing**: `0.5px` → `0.8px` + - **textTransform**: `uppercase` → `none` + - **alignItems**: `center` → `normal` + - **gap**: `8px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `301.062px` → `234.422px` + - **height**: `14px` → `12px` + - **rect**: `105,788 301x14` → `136,844 234x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:2 > label:1` — "COLOR" + - **letterSpacing**: `0.5px` → `0.8px` + - **textTransform**: `uppercase` → `none` + - **alignItems**: `baseline` → `normal` + - **gap**: `8px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `301.062px` → `234.422px` + - **height**: `13px` → `12px` + - **rect**: `422,788 301x13` → `387,844 234x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:1 > label:1` — "RADIUS" + - **letterSpacing**: `0.5px` → `0.8px` + - **textTransform**: `uppercase` → `none` + - **alignItems**: `center` → `normal` + - **gap**: `8px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `301.062px` → `234.422px` + - **height**: `14px` → `12px` + - **rect**: `105,939 301x14` → `136,1006 234x12` + +### `body > main:1 > div:2 > section:2 > div:1 > div:1 > span:1` — "PIPELINE OUTPUTS" + - **lineHeight**: `12px` → `normal` + - **letterSpacing**: `1px` → `1.2px` + - **textTransform**: `uppercase` → `none` + - **display**: `block` → `inline` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `92.5156px` → `auto` + - **height**: `24px` → `auto` + - **rect**: `799,182 93x24` → `715,188 54x36` + +### `body > main:1 > div:2 > section:2 > div:2 > div:1` + - **backgroundColor**: `rgb(248, 250, 251)` → `rgb(238, 241, 244)` - **display**: `flex` → `block` - - **rect**: `518,552 49x30` → `680,546 25x12` + - **flexDirection**: `column` → `row` + - **gap**: `4.8px` → `normal` + - **padding**: `6.4px` → `0px` + - **borderRadius**: `4px` → `0px` + - **width**: `564.672px` → `241.375px` + - **height**: `358.422px` → `329px` + - **rect**: `799,317 565x358` → `715,336 241x329` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "01" - - **fontSize**: `22px` → `11px` - - **fontWeight**: `600` → `400` - - **padding**: `0px` → `17px 0px 0px 15px` - - **lineHeight**: `22px` → `normal` - - **rect**: `74,464 26x22` → `59,466 46x150` +### `body > main:1 > div:2 > section:2 > div:2 > div:2` + - **backgroundColor**: `rgb(248, 250, 251)` → `rgb(238, 241, 244)` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `4.8px` → `normal` + - **padding**: `6.4px` → `0px` + - **borderRadius**: `4px` → `0px` + - **width**: `564.672px` → `241.391px` + - **height**: `358.422px` → `329px` + - **rect**: `799,688 565x358` → `968,336 241x329` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "02" - - **fontSize**: `22px` → `11px` - - **fontWeight**: `600` → `400` - - **padding**: `0px` → `17px 0px 0px 15px` - - **lineHeight**: `22px` → `normal` - - **rect**: `74,624 26x22` → `59,628 46x136` +### `body > main:1 > div:2 > section:2 > div:2 > div:3` + - **backgroundColor**: `rgb(248, 250, 251)` → `rgb(238, 241, 244)` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `4.8px` → `normal` + - **padding**: `6.4px` → `0px` + - **borderRadius**: `4px` → `0px` + - **width**: `564.672px` → `241.375px` + - **height**: `358.422px` → `329px` + - **rect**: `799,1058 565x358` → `715,677 241x329` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "03" - - **fontSize**: `22px` → `11px` - - **fontWeight**: `600` → `400` - - **padding**: `0px` → `17px 0px 0px 15px` - - **lineHeight**: `22px` → `normal` - - **rect**: `74,746 26x22` → `59,776 46x150` +### `body > main:1 > div:2 > section:2 > div:2 > div:4` + - **backgroundColor**: `rgb(248, 250, 251)` → `rgb(238, 241, 244)` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `4.8px` → `normal` + - **padding**: `6.4px` → `0px` + - **borderRadius**: `4px` → `0px` + - **width**: `564.672px` → `241.391px` + - **height**: `358.422px` → `329px` + - **rect**: `799,1429 565x358` → `968,677 241x329` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(1)>span:nth-child(1)` — "04" - - **fontSize**: `22px` → `11px` - - **fontWeight**: `600` → `400` - - **padding**: `0px` → `17px 0px 0px 15px` - - **lineHeight**: `22px` → `normal` - - **rect**: `74,896 26x22` → `59,938 46x142` +### `body > main:1 > footer:3 > span:1` — "easy-png-tools" + - **letterSpacing**: `0.8px` → `normal` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `7px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `142.812px` → `116.984px` + - **height**: `13px` → `12px` + - **rect**: `58,2311 143x13` → `51,1500 117x12` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "1.2 MB" - - **fontSize**: `10px` → `11px` - - **color**: `rgb(255, 255, 255)` → `rgb(23, 33, 43)` - - **margin**: `0px` → `5px 0px 0px` +### `body > main:1 > footer:3 > span:1 > b:1` — "v2.4.0" + - **fontWeight**: `700` → `400` + - **letterSpacing**: `0.8px` → `normal` + - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)` - **display**: `inline` → `block` - - **rect**: `1097,240 36x13` → `1246,291 79x13` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `33px` + - **height**: `auto` → `12px` + - **rect**: `160,2311 41x13` → `135,1500 33x12` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "PROCESSING PIPELINE" - - **letterSpacing**: `1px` → `1.2px` - - **lineHeight**: `12px` → `normal` - - **display**: `block` → `inline` - - **rect**: `58,382 154x12` → `58,400 127x12` +### `body > main:1 > footer:3 > span:2` — "pipeline is local-only" + - **letterSpacing**: `0.8px` → `normal` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `7px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `162.609px` → `140.969px` + - **height**: `16px` → `13px` + - **rect**: `690,2310 163x16` → `612,1500 141x13` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>label:nth-child(2)>span:nth-child(1)` — "Preserve aspect ratio" - - **fontSize**: `13.6px` → `16px` +### `body > main:1 > footer:3 > span:3` — "© 2024" + - **letterSpacing**: `0.8px` → `normal` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `7px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `40.8125px` → `33px` + - **height**: `13px` → `12px` + - **rect**: `1342,2311 41x13` → `1196,1500 33x12` + +### `body > main:1 > header:1 > div:3 > button:2` + - **fontSize**: `13.3333px` → `16px` - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `grid` + - **justifyContent**: `center` → `normal` + - **gridTemplateColumns**: `none` → `17px` + - **width**: `28px` → `29px` + - **height**: `28px` → `29px` + - **rect**: `1224,18 28x28` → `1074,17 29x29` + +### `body > main:1 > header:1 > div:3 > button:3` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `grid` + - **justifyContent**: `center` → `normal` + - **gridTemplateColumns**: `none` → `17px` + - **width**: `28px` → `29px` + - **height**: `28px` → `29px` + - **rect**: `1268,18 28x28` → `1119,17 29x29` + +### `body > main:1 > div:2 > section:1 > div:2 > div:1 > h1:1` — "Build your image pipeline." + - **fontSize**: `57.6px` → `51.2px` + - **lineHeight**: `51.84px` → `51.2px` + - **letterSpacing**: `-3.456px` → `-3.072px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `473.516px` → `405.062px` + - **height**: `103.656px` → `102.406px` + - **rect**: `58,155 474x104` → `51,154 405x102` + +### `body > main:1 > div:2 > section:1 > div:3 > div:1` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `normal` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `153.609px` → `148.484px` + - **height**: `37px` → `46px` + - **rect**: `58,382 154x37` → `51,380 148x46` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:1` — "01" + - **fontSize**: `22px` → `11px` + - **fontWeight**: `600` → `400` + - **lineHeight**: `22px` → `normal` + - **padding**: `17px 0px 6px 15px` → `17px 0px 0px 15px` + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **height**: `45px` → `150px` + - **rect**: `59,447 46x45` → `52,454 46x150` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **padding**: `0px` → `15px 18px 18px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `618.125px` → `520.844px` + - **height**: `147px` → `150px` + - **rect**: `105,447 618x147` → `118,454 521x150` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1` + - **alignItems**: `flex-start` → `center` + - **gap**: `8px` → `15px` + - **padding**: `8px 12px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `618.125px` → `484.844px` + - **height**: `72px` → `65px` + - **rect**: `105,447 618x72` → `136,469 485x65` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:1` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `8px` → `normal` + - **padding**: `10px 0px 0px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **width**: `190.031px` → `189px` + - **height**: `75px` → `52px` + - **rect**: `105,519 190x75` → `136,534 189x52` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:1 > div:2` + - **gap**: `6.4px` → `8px` + - **padding**: `0px` → `0px 8px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `190.031px` → `189px` + - **height**: `27.1875px` → `32px` + - **rect**: `105,559 190x27` → `136,554 189x32` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:2` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `0px` → `normal` + - **padding**: `10px 0px 0px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **width**: `190.047px` → `119.922px` + - **height**: `75px` → `52px` + - **rect**: `319,519 190x75` → `341,534 120x52` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:2 > label:1 > output:1` — "135 °" + - **fontSize**: `11px` → `10px` + - **letterSpacing**: `0.5px` → `0.8px` + - **textTransform**: `uppercase` → `none` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `35.5px` → `31.5156px` + - **height**: `14px` → `12px` + - **rect**: `473,530 36x14` → `430,534 32x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `8px` → `normal` + - **padding**: `10px 0px 0px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **width**: `190.047px` → `143.922px` + - **height**: `75px` → `52px` + - **rect**: `533,519 190x75` → `477,534 144x52` + +### `body > main:1 > div:2 > section:1 > div:4 > article:2 > div:1` — "02" + - **fontSize**: `22px` → `11px` + - **fontWeight**: `600` → `400` + - **lineHeight**: `22px` → `normal` + - **padding**: `17px 0px 6px 15px` → `17px 0px 0px 15px` + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **height**: `45px` → `136px` + - **rect**: `59,606 46x45` → `52,616 46x136` + +### `body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **padding**: `0px` → `15px 18px 18px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `618.125px` → `520.844px` + - **height**: `87px` → `136px` + - **rect**: `105,606 618x87` → `118,616 521x136` + +### `body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1` + - **alignItems**: `flex-start` → `center` + - **gap**: `8px` → `15px` + - **padding**: `8px 12px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `618.125px` → `484.844px` + - **height**: `72px` → `65px` + - **rect**: `105,606 618x72` → `136,631 485x65` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:1` — "03" + - **fontSize**: `22px` → `11px` + - **fontWeight**: `600` → `400` + - **lineHeight**: `22px` → `normal` + - **padding**: `17px 0px 6px 15px` → `17px 0px 0px 15px` + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **height**: `45px` → `150px` + - **rect**: `59,705 46x45` → `52,764 46x150` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **padding**: `0px` → `15px 18px 18px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `618.125px` → `520.844px` + - **height**: `139.188px` → `150px` + - **rect**: `105,705 618x139` → `118,764 521x150` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1` + - **alignItems**: `flex-start` → `center` + - **gap**: `8px` → `15px` + - **padding**: `8px 12px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `618.125px` → `484.844px` + - **height**: `72px` → `65px` + - **rect**: `105,705 618x72` → `136,779 485x65` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:1` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `0px` → `normal` + - **padding**: `10px 0px 0px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **width**: `301.062px` → `234.422px` + - **height**: `67.1875px` → `52px` + - **rect**: `105,777 301x67` → `136,844 234x52` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:1 > label:1 > output:1` — "2 px" + - **fontSize**: `11px` → `10px` + - **letterSpacing**: `0.5px` → `0.8px` + - **textTransform**: `uppercase` → `none` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `28.4062px` → `25.2188px` + - **height**: `14px` → `12px` + - **rect**: `377,788 28x14` → `345,844 25x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:2` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `8px` → `normal` + - **padding**: `10px 0px 0px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **width**: `301.062px` → `234.422px` + - **height**: `67.1875px` → `52px` + - **rect**: `422,777 301x67` → `387,844 234x52` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2 > div:2 > div:2` + - **gap**: `6.4px` → `8px` + - **padding**: `0px` → `0px 8px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `301.062px` → `234.422px` + - **height**: `27.1875px` → `32px` + - **rect**: `422,817 301x27` → `387,864 234x32` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:1` — "04" + - **fontSize**: `22px` → `11px` + - **fontWeight**: `600` → `400` + - **lineHeight**: `22px` → `normal` + - **padding**: `17px 0px 6px 15px` → `17px 0px 0px 15px` + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **height**: `45px` → `142px` + - **rect**: `59,856 46x45` → `52,926 46x142` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **padding**: `0px` → `15px 18px 18px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `618.125px` → `520.844px` + - **height**: `125px` → `142px` + - **rect**: `105,856 618x125` → `118,926 521x142` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1` + - **alignItems**: `flex-start` → `center` + - **gap**: `8px` → `15px` + - **padding**: `8px 12px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `618.125px` → `484.844px` + - **height**: `72px` → `65px` + - **rect**: `105,856 618x72` → `136,941 485x65` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:1` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `0px` → `normal` + - **padding**: `10px 0px 0px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **width**: `301.062px` → `234.422px` + - **height**: `53px` → `44px` + - **rect**: `105,928 301x53` → `136,1006 234x44` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:1 > label:1 > output:1` — "18 px" + - **fontSize**: `11px` → `10px` + - **letterSpacing**: `0.5px` → `0.8px` + - **textTransform**: `uppercase` → `none` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `35.5px` → `31.5156px` + - **height**: `14px` → `12px` + - **rect**: `370,939 36x14` → `339,1006 32x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2 > div:2 > span:1` — "Preserve aspect ratio" + - **fontSize**: `13.6px` → `16px` + - **lineHeight**: `20.4px` → `24px` - **display**: `block` → `inline` - - **rect**: `422,973 129x18` → `432,1021 156x17` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `129.031px` → `auto` + - **height**: `20.3906px` → `auto` + - **rect**: `422,950 129x20` → `387,1009 156x17` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PIPELINE OUTPUTS" - - **letterSpacing**: `1px` → `1.2px` - - **lineHeight**: `12px` → `normal` - - **display**: `block` → `inline` - - **rect**: `799,178 94x24` → `799,188 54x36` +### `body > main:1 > div:2 > section:2 > div:1 > div:1` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `normal` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `92.5156px` → `75.8906px` + - **height**: `67px` → `87px` + - **rect**: `799,182 93x67` → `715,180 76x87` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)` — "Workspace" - - **fontSize**: `12px` → `10px` - - **letterSpacing**: `0.48px` → `normal` - - **rect**: `513,24 69x15` → `792,26 49x12` - -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)` — "Catalog" - - **fontSize**: `12px` → `10px` - - **letterSpacing**: `0.48px` → `normal` - - **rect**: `600,24 54x15` → `864,26 39x12` - -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)` — "Gradient" - - **fontSize**: `12px` → `10px` - - **letterSpacing**: `0.48px` → `normal` - - **rect**: `672,24 61x15` → `924,26 44x12` - -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)` — "Background remover" - - **fontSize**: `12px` → `10px` - - **letterSpacing**: `0.48px` → `normal` - - **rect**: `751,24 138x15` → `990,26 99x12` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "SOURCE" - - **fontSize**: `10px` → `9px` - - **letterSpacing**: `0.8px` → `normal` - - **rect**: `806,317 550x13` → `808,663 30x10` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "STEP 01" - - **fontSize**: `10px` → `9px` - - **letterSpacing**: `0.8px` → `normal` - - **rect**: `806,750 550x13` → `1096,663 35x10` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>span:nth-child(1)` — "STEP 02" - - **fontSize**: `10px` → `9px` - - **letterSpacing**: `0.8px` → `normal` - - **rect**: `806,1182 550x13` → `808,1021 35x10` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>span:nth-child(1)` — "STEP 03" - - **fontSize**: `10px` → `9px` - - **letterSpacing**: `0.8px` → `normal` - - **rect**: `806,1615 550x13` → `1096,1021 35x10` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>span:nth-child(1)` — "FINAL OUTPUT" - - **fontSize**: `10px` → `9px` - - **letterSpacing**: `0.8px` → `normal` - - **rect**: `806,2047 550x13` → `808,1378 59x10` - -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)` — "EN" - - **letterSpacing**: `0.6px` → `normal` - - **rect**: `1349,19 32x25` → `1352,20 29x24` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>h1:nth-child(2)` — "Build your image pipeline." - - **lineHeight**: `51.84px` → `57.6px` - - **rect**: `58,155 474x104` → `58,154 482x115` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "BACKGROUND" - - **display**: `block` → `inline` - - **rect**: `117,455 171x13` → `143,489 67x12` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "TRANSFORM" - - **display**: `block` → `inline` - - **rect**: `117,615 153x13` → `143,651 60x12` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "STYLE" - - **display**: `block` → `inline` - - **rect**: `117,737 99x13` → `143,799 34x12` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "DIMENSIONS" +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:1 > span:1` — "DIMENSIONS" + - **lineHeight**: `13.5px` → `normal` - **letterSpacing**: `0.9px` → `normal` - - **rect**: `1157,216 63x11` → `1073,271 79x10` + - **textTransform**: `uppercase` → `none` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `63px` → `78.625px` + - **height**: `13.5px` → `10px` + - **rect**: `1157,216 63x14` → `919,271 79x10` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "1200 × 800 px" +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:1 > b:2` — "1200 × 800 px" + - **fontWeight**: `700` → `400` + - **lineHeight**: `16.5px` → `normal` - **margin**: `0px` → `5px 0px 0px` - - **rect**: `1236,214 86x14` → `1073,291 79x13` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `85.8125px` → `78.625px` + - **height**: `16.5px` → `13px` + - **rect**: `1236,214 86x17` → `919,291 79x13` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(1)` — "FORMAT" +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:2 > span:1` — "FORMAT" + - **lineHeight**: `13.5px` → `normal` - **letterSpacing**: `0.9px` → `normal` - - **rect**: `1157,240 38x11` → `1159,271 79x10` + - **textTransform**: `uppercase` → `none` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `37.8125px` → `78.625px` + - **height**: `13.5px` → `10px` + - **rect**: `1157,243 38x14` → `1006,271 79x10` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(2)` — "PNG-24" +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:2 > b:2` — "PNG-24" + - **fontWeight**: `700` → `400` + - **lineHeight**: `16.5px` → `normal` - **margin**: `0px` → `5px 0px 0px` - - **rect**: `1282,238 40x14` → `1159,291 79x13` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `39.6094px` → `78.625px` + - **height**: `16.5px` → `13px` + - **rect**: `1282,241 40x17` → `1006,291 79x13` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>span:nth-child(1)` — "SIZE" +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:3 > span:1` — "SIZE" + - **lineHeight**: `13.5px` → `normal` - **letterSpacing**: `0.9px` → `normal` - - **rect**: `1157,265 25x11` → `1246,271 79x10` + - **textTransform**: `uppercase` → `none` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `25.2031px` → `78.625px` + - **height**: `13.5px` → `10px` + - **rect**: `1157,270 25x14` → `1092,271 79x10` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools" - - **rect**: `98,23 118x18` → `98,23 108x17` +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > div:3 > div:3 > b:2` — "1.2 MB" + - **fontWeight**: `700` → `400` + - **lineHeight**: `16.5px` → `normal` + - **margin**: `0px` → `5px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `39.6094px` → `78.625px` + - **height**: `16.5px` → `13px` + - **rect**: `1282,268 40x17` → `1092,291 79x13` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)` — "RU" +### `body > main:1 > div:2 > section:2 > div:2 > div:1 > div:2 > span:1` — "SOURCE" + - **fontSize**: `10px` → `9px` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `40.8125px` → `29.7031px` + - **height**: `13px` → `10px` + - **rect**: `806,655 41x13` → `724,646 30x10` + +### `body > main:1 > div:2 > section:2 > div:2 > div:2 > div:2 > span:1` — "STEP 01" + - **fontSize**: `10px` → `9px` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `47.6094px` → `34.6406px` + - **height**: `13px` → `10px` + - **rect**: `806,1026 48x13` → `977,646 35x10` + +### `body > main:1 > div:2 > section:2 > div:2 > div:3 > div:2 > span:1` — "STEP 02" + - **fontSize**: `10px` → `9px` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `47.6094px` → `34.6406px` + - **height**: `13px` → `10px` + - **rect**: `806,1396 48x13` → `724,987 35x10` + +### `body > main:1 > div:2 > section:2 > div:2 > div:4 > div:2 > span:1` — "STEP 03" + - **fontSize**: `10px` → `9px` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `47.6094px` → `34.6406px` + - **height**: `13px` → `10px` + - **rect**: `806,1767 48x13` → `977,987 35x10` + +### `body > main:1 > div:2 > section:2 > div:2 > div:5 > div:2 > span:1` — "FINAL OUTPUT" + - **fontSize**: `10px` → `9px` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `81.6094px` → `59.3906px` + - **height**: `13px` → `10px` + - **rect**: `806,2137 82x13` → `724,1328 59x10` + +### `body > main:1 > header:1 > nav:2` + - **gap**: `18px` → `22px` + - **margin**: `0px 0px 0px 24px` → `0px 28px 0px 355.891px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `376.594px` → `296.938px` + - **height**: `15px` → `12px` + - **rect**: `528,24 377x15` → `639,26 297x12` + +### `body > main:1 > header:1 > nav:2 > a:1` — "Workspace" + - **fontSize**: `12px` → `10px` + - **letterSpacing**: `0.48px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `69.125px` → `49.4844px` + - **height**: `15px` → `12px` + - **rect**: `528,24 69x15` → `639,26 49x12` + +### `body > main:1 > header:1 > nav:2 > a:2` — "Catalog" + - **fontSize**: `12px` → `10px` + - **letterSpacing**: `0.48px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `53.7656px` → `38.5px` + - **height**: `15px` → `12px` + - **rect**: `615,24 54x15` → `710,26 39x12` + +### `body > main:1 > header:1 > nav:2 > a:3` — "Gradient" + - **fontSize**: `12px` → `10px` + - **letterSpacing**: `0.48px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `61.4531px` → `43.9844px` + - **height**: `15px` → `12px` + - **rect**: `687,24 61x15` → `771,26 44x12` + +### `body > main:1 > header:1 > nav:2 > a:4` — "Background remover" + - **fontSize**: `12px` → `10px` + - **letterSpacing**: `0.48px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `138.25px` → `98.9688px` + - **height**: `15px` → `12px` + - **rect**: `767,24 138x15` → `837,26 99x12` + +### `body > main:1 > header:1 > div:3 > button:2 > svg:1` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `16px` → `17px` + - **height**: `16px` → `17px` + - **rect**: `1230,24 16x16` → `1080,23 17x17` + +### `body > main:1 > header:1 > div:3 > button:3 > svg:1` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `16px` → `17px` + - **height**: `16px` → `17px` + - **rect**: `1274,24 16x16` → `1125,23 17x17` + +### `body > main:1 > div:2` + - **gridTemplateColumns**: `666.125px 602.672px` → `588.844px 532.766px` + - **padding**: `60px 57.6px 72px` → `60px 51.2px 72px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `2228.89px` → `1418.5px` + - **rect**: `0,64 1440x2229` → `0,64 1280x1419` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:1` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `171px` → `156.703px` + - **height**: `55px` → `65px` + - **rect**: `117,455 171x55` → `136,469 157x65` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:1 > span:1` — "BACKGROUND" + - **textTransform**: `uppercase` → `none` + - **display**: `block` → `inline` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `171px` → `auto` + - **height**: `13px` → `auto` + - **rect**: `117,455 171x13` → `136,477 67x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:2 > span:1 > svg:1` + - **lineHeight**: `15px` → `normal` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **color**: `rgb(37, 169, 106)` → `rgb(35, 131, 84)` + - **borderTopColor**: `rgb(37, 169, 106)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `598,460 12x12` → `524,495 12x12` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:2 > button:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `block` + - **padding**: `1px 6px` → `0px` + - **width**: `28px` → `16px` + - **height**: `18px` → `16px` + - **rect**: `658,457 28x18` → `575,493 16x16` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2` + - **gap**: `0px 24px` → `16px` + - **gridTemplateColumns**: `190.031px 190.047px 190.047px` → `189px 119.922px 143.922px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `618.125px` → `484.844px` + - **height**: `75px` → `52px` + - **rect**: `105,519 618x75` → `136,534 485x52` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > div:2 > button:2` — "75" - **letterSpacing**: `0.6px` → `normal` + - **textTransform**: `uppercase` → `none` + - **display**: `flex` → `block` + - **alignItems**: `center` → `normal` + - **padding**: `0px 11.2px` → `0px` + - **width**: `36.5781px` → `35.4844px` + - **rect**: `576,563 37x30` → `514,555 35x30` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>p:nth-child(3)` — "Chain simple tools together. Every chang" - - **rect**: `58,275 474x51` → `58,285 482x51` +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > div:2 > button:3` — "50" + - **letterSpacing**: `0.6px` → `normal` + - **textTransform**: `uppercase` → `none` + - **display**: `flex` → `block` + - **alignItems**: `center` → `normal` + - **padding**: `0px 11.2px` → `0px` + - **width**: `36.5781px` → `35.4844px` + - **rect**: `612,563 37x30` → `549,555 35x30` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>span:nth-child(2)` — "source.png" - - **rect**: `597,300 66x14` → `606,311 60x13` +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:2 > div:3 > div:2 > button:4` — "25" + - **letterSpacing**: `0.6px` → `normal` + - **textTransform**: `uppercase` → `none` + - **display**: `flex` → `block` + - **alignItems**: `center` → `normal` + - **padding**: `0px 11.2px` → `0px` + - **width**: `36.5781px` → `35.4844px` + - **rect**: `649,563 37x30` → `585,555 35x30` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>b:nth-child(3)` — "1.8 MB" - - **rect**: `671,300 40x14` → `674,311 36x13` +### `body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:1` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `153px` → `140.203px` + - **height**: `55px` → `65px` + - **rect**: `117,614 153x55` → `136,631 140x65` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)` — "• LIVE" - - **rect**: `175,405 36x13` → `173,425 33x12` +### `body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:1 > span:1` — "TRANSFORM" + - **textTransform**: `uppercase` → `none` + - **display**: `block` → `inline` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `153px` → `auto` + - **height**: `13px` → `auto` + - **rect**: `117,614 153x13` → `136,639 60x12` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Gradient background" - - **rect**: `117,473 171x19` → `143,510 157x18` +### `body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:2 > span:1 > svg:1` + - **lineHeight**: `15px` → `normal` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **color**: `rgb(37, 169, 106)` → `rgb(35, 131, 84)` + - **borderTopColor**: `rgb(37, 169, 106)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `598,619 12x12` → `524,657 12x12` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Remove background" - - **rect**: `117,633 153x19` → `143,672 140x18` +### `body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:2 > button:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `block` + - **padding**: `1px 6px` → `0px` + - **width**: `28px` → `16px` + - **height**: `18px` → `16px` + - **rect**: `658,616 28x18` → `575,655 16x16` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Add outline" - - **rect**: `117,755 99x19` → `143,820 91x18` +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:1` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `99px` → `90.7188px` + - **height**: `55px` → `65px` + - **rect**: `117,713 99x55` → `136,779 91x65` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Round corners" - - **rect**: `117,905 117x19` → `143,982 107x18` +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:1 > span:1` — "STYLE" + - **textTransform**: `uppercase` → `none` + - **display**: `block` → `inline` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `99px` → `auto` + - **height**: `13px` → `auto` + - **rect**: `117,713 99x13` → `136,787 34x12` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>strong:nth-child(2)` — "Visual history" - - **rect**: `799,209 94x36` → `799,233 87x34` +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:2 > span:1 > svg:1` + - **lineHeight**: `15px` → `normal` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **color**: `rgb(37, 169, 106)` → `rgb(35, 131, 84)` + - **borderTopColor**: `rgb(37, 169, 106)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `598,718 12x12` → `524,805 12x12` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PNG" - - **rect**: `1067,496 28x19` → `923,478 27x18` +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:2 > button:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `block` + - **padding**: `1px 6px` → `0px` + - **width**: `28px` → `16px` + - **height**: `18px` → `16px` + - **rect**: `658,715 28x18` → `575,803 16x16` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "original.png · 1200 × 800" - - **rect**: `814,704 135x11` → `942,663 124x10` +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:2` + - **gap**: `0px 16px` → `16px` + - **gridTemplateColumns**: `301.062px 301.062px` → `234.422px 234.422px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `618.125px` → `484.844px` + - **height**: `67.1875px` → `52px` + - **rect**: `105,777 618x67` → `136,844 485x52` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "gradient applied" - - **rect**: `814,1137 86x11` → `1275,663 79x10` +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:1` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `117px` → `107.219px` + - **height**: `55px` → `65px` + - **rect**: `117,864 117x55` → `136,941 107x65` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "background removed" - - **rect**: `814,1569 97x11` → `977,1021 89x10` +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:1 > span:1` — "STYLE" + - **textTransform**: `uppercase` → `none` + - **display**: `block` → `inline` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `117px` → `auto` + - **height**: `13px` → `auto` + - **rect**: `117,864 117x13` → `136,949 34x12` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "outline added" - - **rect**: `814,2002 70x11` → `1290,1021 64x10` +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:2 > span:1 > svg:1` + - **lineHeight**: `15px` → `normal` + - **letterSpacing**: `0.8px` → `normal` + - **textTransform**: `uppercase` → `none` + - **color**: `rgb(37, 169, 106)` → `rgb(35, 131, 84)` + - **borderTopColor**: `rgb(37, 169, 106)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `598,869 12x12` → `524,967 12x12` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "ready · PNG-24" - - **rect**: `814,2434 76x11` → `997,1378 69x10` +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:2 > button:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `block` + - **padding**: `1px 6px` → `0px` + - **width**: `28px` → `16px` + - **height**: `18px` → `16px` + - **rect**: `658,866 28x18` → `575,965 16x16` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p:nth-child(3)` — "Output is generated in-browser. Your fil" - - **rect**: `799,2489 565x17` → `799,1425 565x17` +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:2` + - **gap**: `0px 16px` → `16px` + - **gridTemplateColumns**: `301.062px 301.062px` → `234.422px 234.422px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `618.125px` → `484.844px` + - **height**: `53px` → `44px` + - **rect**: `105,928 618x53` → `136,1006 485x44` -### Только у нас +### `body > main:1 > div:2 > section:2 > div:1` + - **gap**: `16px` → `normal` + - **padding**: `0px 0px 12px` → `0px 0px 15px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `564.672px` → `494.766px` + - **height**: `158.281px` → `177px` + - **rect**: `799,143 565x158` → `715,143 495x177` -- `/ DEMO` -- `+ Add tool` -- `AUTO` -- `Gradient color` -- `DIRECTION` -- `135 °` -- `OPACITY` -- `75%` -- `50%` -- `25%` -- `Automatic subject detection enabled` -- `Outline width` -- `2 px` -- `Outline color` -- `Corner radius` -- `18 px` -- `v0.1.0` -- `© 2026` +### `body > main:1 > div:2 > section:2 > div:1 > div:2 > button:4 > svg:1` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `16px` → `17px` + - **height**: `16px` → `17px` + - **rect**: `1339,241 16x16` → `1187,272 17x17` -### Только в рефе +### `body > main:1 > div:2 > section:2 > div:2 > div:1 > div:2 > b:2` — "original.png · 1200 × 800" + - **fontSize**: `10px` → `9px` + - **textAlign**: `start` → `right` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `150px` → `123.719px` + - **height**: `13px` → `10px` + - **rect**: `1206,655 150x13` → `824,646 124x10` -- `/ - WORKSPACE` -- `COLOR` -- `135 - °` -- `100` -- `75` -- `50` -- `25` -- `2 - px` -- `18 - px` -- `v2.4.0` -- `© 2024` +### `body > main:1 > div:2 > section:2 > div:2 > div:2 > div:2 > b:2` — "gradient applied" + - **fontSize**: `10px` → `9px` + - **textAlign**: `start` → `right` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `96px` → `79.1719px` + - **height**: `13px` → `10px` + - **rect**: `1260,1026 96x13` → `1122,646 79x10` + +### `body > main:1 > div:2 > section:2 > div:2 > div:3 > div:2 > b:2` — "background removed" + - **fontSize**: `10px` → `9px` + - **textAlign**: `start` → `right` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `108px` → `89.0781px` + - **height**: `13px` → `10px` + - **rect**: `1248,1396 108x13` → `858,987 89x10` + +### `body > main:1 > div:2 > section:2 > div:2 > div:4 > div:2 > b:2` — "outline added" + - **fontSize**: `10px` → `9px` + - **textAlign**: `start` → `right` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `78px` → `64.3281px` + - **height**: `13px` → `10px` + - **rect**: `1278,1767 78x13` → `1136,987 64x10` + +### `body > main:1 > div:2 > section:2 > div:2 > div:5 > div:2 > b:2` — "ready · PNG-24" + - **fontSize**: `10px` → `9px` + - **textAlign**: `start` → `right` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `84px` → `69.2812px` + - **height**: `13px` → `10px` + - **rect**: `1272,2137 84x13` → `878,1328 69x10` + +### `body > main:1` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(238, 241, 244)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `2341.89px` → `1528.5px` + - **rect**: `0,0 1440x2342` → `0,0 1280x1529` + +### `body > main:1 > header:1 > div:3 > span:1 > i:1` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `8px` → `6px` + - **height**: `8px` → `6px` + - **boxShadow**: `color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px` → `none` + - **rect**: `1105,28 8x8` → `963,29 6x6` + +### `body > main:1 > div:2 > section:1 > div:1` — "PNG PROCESSING WORKSPACE" + - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `666.125px` → `588.844px` + - **height**: `13px` → `12px` + - **rect**: `58,124 666x13` → `51,124 589x12` + +### `body > main:1 > div:2 > section:1 > div:3` + - **gap**: `16px` → `normal` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `666.125px` → `588.844px` + - **height**: `50px` → `59px` + - **rect**: `58,382 666x50` → `51,380 589x59` + +### `body > main:1 > div:2 > section:1 > div:4` + - **gridTemplateColumns**: `666.125px` → `588.844px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `666.125px` → `588.844px` + - **height**: `550.188px` → `630px` + - **rect**: `58,432 666x550` → `51,439 589x630` + +### `body > main:1 > div:2 > section:1 > div:4 > article:1 > div:3 > div:1 > div:2` + - **gap**: `8px` → `13px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `121.375px` → `97px` + - **height**: `21.7812px` → `17px` + - **rect**: `589,455 121x22` → `524,493 97x17` + +### `body > main:1 > div:2 > section:1 > div:4 > article:2 > div:3 > div:1 > div:2` + - **gap**: `8px` → `13px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `121.375px` → `97px` + - **height**: `21.7812px` → `17px` + - **rect**: `589,614 121x22` → `524,655 97x17` + +### `body > main:1 > div:2 > section:1 > div:4 > article:3 > div:3 > div:1 > div:2` + - **gap**: `8px` → `13px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `121.375px` → `97px` + - **height**: `21.7812px` → `17px` + - **rect**: `589,713 121x22` → `524,803 97x17` + +### `body > main:1 > div:2 > section:1 > div:4 > article:4 > div:3 > div:1 > div:2` + - **gap**: `8px` → `13px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `121.375px` → `97px` + - **height**: `21.7812px` → `17px` + - **rect**: `589,864 121x22` → `524,965 97x17` + +### `body > main:1 > div:2 > section:1 > div:5 > span:2 > i:1` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `8px` → `6px` + - **height**: `8px` → `6px` + - **boxShadow**: `color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px` → `none` + - **rect**: `490,1005 8x8` → `426,1093 6x6` + +### `body > main:1 > div:2 > section:2 > div:2` + - **gridTemplateColumns**: `564.672px` → `241.375px 241.391px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `564.672px` → `494.766px` + - **height**: `1872.11px` → `1043px` + - **rect**: `799,301 565x1872` → `715,320 495x1043` + +### `body > main:1 > footer:3` + - **letterSpacing**: `0.8px` → `normal` + - **gap**: `16px` → `normal` + - **padding**: `16px 57.6px` → `16px 51.2px` + - **width**: `1440px` → `1280px` + - **height**: `49px` → `46px` + - **rect**: `0,2293 1440x49` → `0,1483 1280x46` + +### `body` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `2341.89px` → `1528.5px` + - **rect**: `0,0 1440x2342` → `0,0 1280x1529` + +### `body > main:1 > header:1` + - **padding**: `0px 57.6px` → `0px 51.2px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **rect**: `0,0 1440x64` → `0,0 1280x64` + +### `body > main:1 > header:1 > a:1 > span:2` — "easy-png-tools" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `117.609px` → `107.766px` + - **height**: `18px` → `17px` + - **rect**: `98,23 118x18` → `91,23 108x17` + +### `body > main:1 > header:1 > a:1 > span:3` — "/ WORKSPACE" + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `79.2031px` → `73.7031px` + - **height**: `13px` → `12px` + - **rect**: `225,25 79x13` → `209,26 74x12` + +### `body > main:1 > header:1 > div:3` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `277.812px` → `265.328px` + - **height**: `28px` → `29px` + - **rect**: `1105,18 278x28` → `963,17 265x29` + +### `body > main:1 > header:1 > div:3 > span:1` — "AUTO PIPELINE" + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `103.406px` → `94.875px` + - **height**: `13px` → `12px` + - **rect**: `1105,25 103x13` → `963,26 95x12` + +### `body > main:1 > header:1 > div:3 > div:4` + - **alignItems**: `normal` → `center` + - **borderRadius**: `4px` → `0px` + - **width**: `70.4062px` → `64.4531px` + - **height**: `27px` → `26px` + - **rect**: `1312,18 70x27` → `1164,19 64x26` + +### `body > main:1 > div:2 > section:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `666.125px` → `588.844px` + - **height**: `893.031px` → `980.594px` + - **rect**: `58,124 666x893` → `51,124 589x981` + +### `body > main:1 > div:2 > section:1 > div:2` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `666.125px` → `588.844px` + - **height**: `170.844px` → `169.594px` + - **rect**: `58,155 666x171` → `51,154 589x170` + +### `body > main:1 > div:2 > section:1 > div:2 > div:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `473.516px` → `405.062px` + - **height**: `170.844px` → `169.594px` + - **rect**: `58,155 474x171` → `51,154 405x170` + +### `body > main:1 > div:2 > section:1 > div:2 > div:2 > span:2` — "source.png" + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `66px` → `60.4844px` + - **height**: `14px` → `13px` + - **rect**: `597,300 66x14` → `522,299 60x13` + +### `body > main:1 > div:2 > section:1 > div:2 > div:2 > b:3` — "1.8 MB" + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `39.6094px` → `36.2969px` + - **height**: `14px` → `13px` + - **rect**: `671,300 40x14` → `591,299 36x13` + +### `body > main:1 > div:2 > section:1 > div:3 > div:1 > strong:2` — "4 active steps" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `153.609px` → `148.484px` + - **height**: `18px` → `17px` + - **rect**: `58,401 154x18` → `51,409 148x17` + +### Структурные расхождения + +_—_ ## /preview/list-tools (vs list-tools.html) - Токены light: **10**, dark: **16** -- Элементы: **30**, только у нас: 257, только в рефе: 54 +- Стиль-расхождений: **303** элементов / **1638** полей (из них геометрия: 303) +- Структурные: +0 / -0 / tag 0 / text 0 ### Токены — Light @@ -345,282 +1620,1363 @@ _2026-08-28T15:27:27.893Z_ | `--radius-lg` | — | .5rem | | `--text-sm` | — | .875rem | -### Расхождения элементов (топ 30) +### Расхождения стилей (топ 150) -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)` — "Catalog" +### `body > main:1 > div:2 > div:1 > div:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `16px` → `14px` + - **textAlign**: `start` → `right` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **flexDirection**: `column` → `row` + - **alignItems**: `flex-end` → `center` + - **gap**: `normal` → `14px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `61.2031px` → `123.625px` + - **height**: `73.5938px` → `57.5938px` + - **rect**: `1321,175 61x74` → `1105,206 124x58` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `11px` + - **fontWeight**: `400` → `600` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.32px` + - **alignItems**: `baseline` → `center` + - **gap**: `16px` → `normal` + - **padding**: `0px 0px 8px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `24px` → `26px` + - **rect**: `58,324 648x24` → `51,415 575x26` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `11px` + - **fontWeight**: `400` → `600` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.32px` + - **alignItems**: `baseline` → `center` + - **gap**: `16px` → `normal` + - **padding**: `0px 0px 8px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `24px` → `26px` + - **rect**: `734,324 648x24` → `654,415 575x26` + +### `body > main:1 > div:2 > div:3 > section:3 > div:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `11px` + - **fontWeight**: `400` → `600` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.32px` + - **alignItems**: `baseline` → `center` + - **gap**: `16px` → `normal` + - **padding**: `0px 0px 8px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `24px` → `26px` + - **rect**: `58,990 648x24` → `51,1081 575x26` + +### `body > main:1 > div:2 > div:3 > section:4 > div:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `11px` + - **fontWeight**: `400` → `600` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.32px` + - **alignItems**: `baseline` → `center` + - **gap**: `16px` → `normal` + - **padding**: `0px 0px 8px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `24px` → `26px` + - **rect**: `734,990 648x24` → `654,1081 575x26` + +### `body > main:1 > div:2 > div:3 > section:5 > div:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `11px` + - **fontWeight**: `400` → `600` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.32px` + - **alignItems**: `baseline` → `center` + - **gap**: `16px` → `normal` + - **padding**: `0px 0px 8px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `24px` → `26px` + - **rect**: `58,1656 648x24` → `51,1747 575x26` + +### `body > main:1 > div:2 > div:3 > section:6 > div:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `11px` + - **fontWeight**: `400` → `600` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.32px` + - **alignItems**: `baseline` → `center` + - **gap**: `16px` → `normal` + - **padding**: `0px 0px 8px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `24px` → `26px` + - **rect**: `734,1656 648x24` → `654,1747 575x26` + +### `body > main:1 > div:2 > div:1 > div:2 > b:1` — "32" + - **fontSize**: `32px` → `64px` + - **fontWeight**: `700` → `400` + - **lineHeight**: `normal` → `57.6px` + - **letterSpacing**: `normal` → `-5.12px` + - **textAlign**: `start` → `right` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `38.4062px` → `60.1406px` + - **height**: `42px` → `57.5938px` + - **rect**: `1344,175 38x42` → `1105,206 60x58` + +### `body > main:1 > div:2 > div:1 > div:1 > h1:2` — "Tool catalog" + - **fontSize**: `32px` → `51.2px` + - **fontWeight**: `700` → `650` + - **lineHeight**: `48px` → `51.2px` + - **letterSpacing**: `normal` → `-3.072px` + - **margin**: `0px` → `12px 0px 14px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `510.719px` → `660px` + - **height**: `48px` → `51.2031px` + - **rect**: `58,147 511x48` → `51,154 660x51` + +### `body > main:1 > header:1 > div:3 > div:4 > span:2` — "/" + - **fontFamily**: `"IBM Plex Mono", monospace` → `"IBM Plex Sans", sans-serif` + - **fontSize**: `10px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(109, 120, 131)` → `rgb(23, 33, 43)` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `6px` → `4.45312px` + - **height**: `13px` → `24px` + - **rect**: `1344,25 6x13` → `1194,20 4x24` + +### `body > main:1 > div:2 > div:1 > div:1 > div:1` — "EASY-PNG-TOOLS / CATALOG" - **fontSize**: `12px` → `10px` + - **letterSpacing**: `2.16px` → `1.2px` - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)` - - **letterSpacing**: `0.48px` → `normal` - - **rect**: `621,24 54x15` → `832,26 39x12` + - **margin**: `0px 0px 8px` → `0px 0px 18px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `510.719px` → `660px` + - **height**: `15px` → `12px` + - **rect**: `58,124 511x15` → `51,124 660x12` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)` — "Workspace" +### `body > main:1 > div:2 > div:1 > div:1 > p:3` — "Focused utilities for working with PNG. Inspect, transform, and export — locally in your browser." + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `15.2px` → `14px` + - **lineHeight**: `22.8px` → `22.4px` + - **margin**: `8px 0px 0px` → `0px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `510.719px` → `660px` + - **height**: `45.5938px` → `44.7812px` + - **rect**: `58,203 511x46` → `51,219 660x45` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `59px` + - **rect**: `131,398 488x37` → `124,478 415x59` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `131,514 488x37` → `124,603 415x41` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `59px` + - **rect**: `131,630 488x37` → `124,710 415x59` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `131,746 488x37` → `124,835 415x41` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `59px` + - **rect**: `131,862 488x37` → `124,942 415x59` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `55px` → `59px` + - **rect**: `807,389 488x55` → `727,478 415x59` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `807,514 488x37` → `727,603 415x41` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `807,630 488x37` → `727,719 415x41` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `59px` + - **rect**: `807,746 488x37` → `727,826 415x59` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `55px` → `59px` + - **rect**: `807,853 488x55` → `727,942 415x59` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `55px` → `59px` + - **rect**: `131,1055 488x55` → `124,1144 415x59` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `131,1180 488x37` → `124,1269 415x41` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `131,1296 488x37` → `124,1385 415x41` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `131,1412 488x37` → `124,1501 415x41` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `131,1528 488x37` → `124,1617 415x41` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `55px` → `59px` + - **rect**: `807,1055 488x55` → `727,1144 415x59` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `807,1180 488x37` → `727,1269 415x41` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `807,1296 488x37` → `727,1385 415x41` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `807,1412 488x37` → `727,1501 415x41` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `807,1528 488x37` → `727,1617 415x41` + +### `body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `59px` + - **rect**: `131,1730 488x37` → `124,1810 415x59` + +### `body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `131,1846 488x37` → `124,1935 415x41` + +### `body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `131,1962 488x37` → `124,2051 415x41` + +### `body > main:1 > div:2 > div:3 > section:5 > div:2 > a:4 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `131,2078 488x37` → `124,2167 415x41` + +### `body > main:1 > div:2 > div:3 > section:6 > div:2 > a:1 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `807,1730 488x37` → `727,1819 415x41` + +### `body > main:1 > div:2 > div:3 > section:6 > div:2 > a:2 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `807,1846 488x37` → `727,1935 415x41` + +### `body > main:1 > div:2 > div:3 > section:6 > div:2 > a:3 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `807,1962 488x37` → `727,2051 415x41` + +### `body > main:1 > div:2 > div:3 > section:6 > div:2 > a:4 > span:2` + - **display**: `flex` → `grid` + - **flexDirection**: `column` → `row` + - **gap**: `2px` → `8px` + - **gridTemplateColumns**: `none` → `414.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `37px` → `41px` + - **rect**: `807,2078 488x37` → `727,2167 415x41` + +### `body > main:1 > div:2 > footer:4 > span:1` — "•" + - **letterSpacing**: `0.8px` → `normal` + - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)` + - **display**: `block` → `inline` + - **margin**: `0px` → `0px 8px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `6.8125px` → `auto` + - **height**: `13px` → `auto` + - **rect**: `258,2231 7x13` → `208,2326 11x12` + +### `body > main:1 > header:1 > nav:2 > a:2` — "Catalog" - **fontSize**: `12px` → `10px` - **letterSpacing**: `0.48px` → `normal` - - **rect**: `534,24 69x15` → `761,26 49x12` + - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `53.7656px` → `38.5px` + - **height**: `15px` → `12px` + - **rect**: `591,24 54x15` → `679,26 39x12` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)` — "Gradient" - - **fontSize**: `12px` → `10px` - - **letterSpacing**: `0.48px` → `normal` - - **rect**: `693,24 61x15` → `893,26 44x12` +### `body > main:1 > header:1 > div:3 > button:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `grid` + - **justifyContent**: `center` → `normal` + - **gridTemplateColumns**: `none` → `17px` + - **width**: `28px` → `29px` + - **height**: `28px` → `29px` + - **rect**: `1224,18 28x28` → `1074,17 29x29` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)` — "Background remover" - - **fontSize**: `12px` → `10px` - - **letterSpacing**: `0.48px` → `normal` - - **rect**: `773,24 138x15` → `959,26 99x12` +### `body > main:1 > header:1 > div:3 > button:3` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `grid` + - **justifyContent**: `center` → `normal` + - **gridTemplateColumns**: `none` → `17px` + - **width**: `28px` → `29px` + - **height**: `28px` → `29px` + - **rect**: `1268,18 28x28` → `1119,17 29x29` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(1)>span:nth-child(2)>span:nth-child(1)` — "Convert JPG to PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `104,302 175x19` → `131,494 488x15` +### `body > main:1 > div:2 > div:1 > div:2 > span:2` — "TOOLS AVAILABLE" + - **lineHeight**: `normal` → `14px` + - **letterSpacing**: `0.8px` → `normal` + - **margin**: `5.6px 0px 0px` → `0px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `61.2031px` → `49.4844px` + - **height**: `26px` → `28px` + - **rect**: `1321,223 61x26` → `1179,221 49x28` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "Convert WebP to PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `364,311 175x19` → `131,610 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(7)>span:nth-child(2)>span:nth-child(1)` — "PNG to Base64" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `364,429 175x19` → `131,726 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(9)>span:nth-child(2)>span:nth-child(1)` — "PNG to Data URI" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `885,429 175x19` → `131,842 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(17)>span:nth-child(2)>span:nth-child(1)` — "Convert PNG to JPG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `364,717 175x19` → `131,958 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(3)>div:nth-child(2)>a:nth-child(8)>span:nth-child(2)>span:nth-child(1)` — "Round corners PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `625,1239 175x19` → `807,726 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(3)>div:nth-child(2)>a:nth-child(11)>span:nth-child(2)>span:nth-child(1)` — "Outline PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `104,1384 175x19` → `807,842 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(7)>span:nth-child(2)>span:nth-child(1)` — "Grayscale PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `364,2096 175x19` → `131,1276 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(8)>span:nth-child(2)>span:nth-child(1)` — "Invert colors PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `625,2104 175x19` → `131,1392 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(10)>span:nth-child(2)>span:nth-child(1)` — "Change PNG opacity" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `1146,2096 175x19` → `807,958 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(20)>span:nth-child(2)>span:nth-child(1)` — "Temperature PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `1146,2361 175x19` → `131,1624 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(1)>span:nth-child(2)>span:nth-child(1)` — "Resize PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `104,2731 175x19` → `807,1160 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "Crop PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `364,2740 175x19` → `807,1276 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(3)>span:nth-child(2)>span:nth-child(1)` — "Rotate PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `625,2748 175x19` → `807,1392 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(4)>span:nth-child(2)>span:nth-child(1)` — "Flip PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `885,2757 175x19` → `807,1508 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(5)>span:nth-child(2)>span:nth-child(1)` — "Add padding to PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `1146,2748 175x19` → `807,1624 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(1)>span:nth-child(2)>span:nth-child(1)` — "Blur PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `104,3396 175x19` → `131,1826 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "Sharpen PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `364,3387 175x19` → `131,1942 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(3)>span:nth-child(2)>span:nth-child(1)` — "Vignette PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `625,3404 175x19` → `131,2058 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(8)>span:nth-child(2)>span:nth-child(1)` — "JPEG artifacts" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `625,3540 175x19` → `131,2174 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(8)>div:nth-child(2)>a:nth-child(9)>span:nth-child(2)>span:nth-child(1)` — "PNG info" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `885,4142 175x19` → `807,1826 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(8)>div:nth-child(2)>a:nth-child(13)>span:nth-child(2)>span:nth-child(1)` — "PNG orientation" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `625,4287 175x19` → `807,2174 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(9)>div:nth-child(2)>a:nth-child(7)>span:nth-child(2)>span:nth-child(1)` — "Create gradient PNG" - - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` - - **fontSize**: `14.4px` → `13px` - - **rect**: `364,4632 175x19` → `131,1160 488x15` - -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)` — "EN" +### `body > main:1 > div:2 > div:2 > div:2 > button:2` — "ALL" - **letterSpacing**: `0.6px` → `normal` - - **rect**: `1349,19 32x25` → `1352,20 29x24` + - **color**: `rgb(255, 255, 255)` → `rgb(23, 105, 210)` + - **backgroundColor**: `rgb(23, 105, 210)` → `rgba(0, 0, 0, 0)` + - **padding**: `6.4px 9.6px` → `8px 10px` + - **borderRadius**: `4px` → `0px` + - **width**: `41px` → `38.5px` + - **height**: `27.7812px` → `30px` + - **rect**: `872,272 41x28` → `769,337 39x30` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools" - - **rect**: `98,23 118x18` → `98,23 108x17` +### `body > main:1 > div:2 > div:3 > section:1 > div:1 > span:1` — "CONVERT" + - **fontSize**: `12px` → `11px` + - **fontWeight**: `400` → `600` + - **letterSpacing**: `1.68px` → `1.32px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `62.1719px` → `51.5781px` + - **height**: `15px` → `13px` + - **rect**: `58,324 62x15` → `51,415 52x13` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)` — "RU" +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > span:1` — "TRANSPARENCY" + - **fontSize**: `12px` → `11px` + - **fontWeight**: `400` → `600` + - **letterSpacing**: `1.68px` → `1.32px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `106.562px` → `88.4219px` + - **height**: `15px` → `13px` + - **rect**: `734,324 107x15` → `654,415 88x13` + +### `body > main:1 > div:2 > div:3 > section:3 > div:1 > span:1` — "COLOR" + - **fontSize**: `12px` → `11px` + - **fontWeight**: `400` → `600` + - **letterSpacing**: `1.68px` → `1.32px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `44.4062px` → `36.8438px` + - **height**: `15px` → `13px` + - **rect**: `58,990 44x15` → `51,1081 37x13` + +### `body > main:1 > div:2 > div:3 > section:4 > div:1 > span:1` — "GEOMETRY" + - **fontSize**: `12px` → `11px` + - **fontWeight**: `400` → `600` + - **letterSpacing**: `1.68px` → `1.32px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `71.0469px` → `58.9531px` + - **height**: `15px` → `13px` + - **rect**: `734,990 71x15` → `654,1081 59x13` + +### `body > main:1 > div:2 > div:3 > section:5 > div:1 > span:1` — "FILTERS" + - **fontSize**: `12px` → `11px` + - **fontWeight**: `400` → `600` + - **letterSpacing**: `1.68px` → `1.32px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `62.1719px` → `51.5781px` + - **height**: `15px` → `13px` + - **rect**: `58,1656 62x15` → `51,1747 52x13` + +### `body > main:1 > div:2 > div:3 > section:6 > div:1 > span:1` — "ANALYZE" + - **fontSize**: `12px` → `11px` + - **fontWeight**: `400` → `600` + - **letterSpacing**: `1.68px` → `1.32px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `62.1719px` → `51.5781px` + - **height**: `15px` → `13px` + - **rect**: `734,1656 62x15` → `654,1747 52x13` + +### `body > main:1 > div:2 > footer:4` — "ALL OPERATIONS RUN LOCALLY YOUR FILES NEVER LEAVE THIS DEVICE" + - **letterSpacing**: `0.8px` → `normal` + - **display**: `flex` → `block` + - **gap**: `24px` → `normal` + - **padding**: `24px 0px 0px` → `20px 0px 0px` + - **margin**: `56px 0px 0px` → `64px 0px 0px` + - **width**: `1324.81px` → `1177.62px` + - **height**: `38px` → `33px` + - **rect**: `58,2206 1325x38` → `51,2305 1178x33` + +### `body > main:1 > header:1 > nav:2` + - **gap**: `18px` → `22px` + - **margin**: `0px 0px 0px 24px` → `0px 28px 0px 337.797px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `376.594px` → `296.938px` + - **height**: `15px` → `12px` + - **rect**: `504,24 377x15` → `607,26 297x12` + +### `body > main:1 > header:1 > nav:2 > a:1` — "Workspace" + - **fontSize**: `12px` → `10px` + - **letterSpacing**: `0.48px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `69.125px` → `49.4844px` + - **height**: `15px` → `12px` + - **rect**: `504,24 69x15` → `607,26 49x12` + +### `body > main:1 > header:1 > nav:2 > a:3` — "Gradient" + - **fontSize**: `12px` → `10px` + - **letterSpacing**: `0.48px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `61.4531px` → `43.9844px` + - **height**: `15px` → `12px` + - **rect**: `663,24 61x15` → `739,26 44x12` + +### `body > main:1 > header:1 > nav:2 > a:4` — "Background remover" + - **fontSize**: `12px` → `10px` + - **letterSpacing**: `0.48px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `138.25px` → `98.9688px` + - **height**: `15px` → `12px` + - **rect**: `742,24 138x15` → `805,26 99x12` + +### `body > main:1 > header:1 > div:3 > button:2 > svg:1` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `16px` → `17px` + - **height**: `16px` → `17px` + - **rect**: `1230,24 16x16` → `1080,23 17x17` + +### `body > main:1 > header:1 > div:3 > button:3 > svg:1` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `16px` → `17px` + - **height**: `16px` → `17px` + - **rect**: `1274,24 16x16` → `1125,23 17x17` + +### `body > main:1 > div:2 > div:1` + - **gap**: `24px` → `40px` + - **padding**: `0px` → `0px 0px 42px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1324.81px` → `1177.62px` + - **height**: `124.594px` → `182.984px` + - **rect**: `58,124 1325x125` → `51,124 1178x183` + +### `body > main:1 > div:2 > div:2` + - **gap**: `16px` → `24px` + - **padding**: `20px 0px` → `24px 0px 42px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1324.81px` → `1177.62px` + - **height**: `75px` → `108px` + - **rect**: `58,249 1325x75` → `51,307 1178x108` + +### `body > main:1 > div:2 > div:2 > label:1` + - **backgroundColor**: `rgb(248, 250, 251)` → `rgba(0, 0, 0, 0)` + - **gap**: `8px` → `12px` + - **padding**: `8px 12px` → `12px 14px` + - **borderRadius**: `4px` → `0px` + - **width**: `202px` → `420px` + - **height**: `35px` → `42px` + - **rect**: `58,269 202x35` → `51,331 420x42` + +### `body > main:1 > div:2 > div:2 > div:2 > button:3` — "CONVERT" - **letterSpacing**: `0.6px` → `normal` + - **padding**: `6.4px 9.6px` → `8px 10px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(203, 211, 218)` → `rgba(0, 0, 0, 0)` + - **width**: `67.3906px` → `60.5px` + - **height**: `27.7812px` → `30px` + - **rect**: `920,272 67x28` → `814,337 61x30` -### Только у нас +### `body > main:1 > div:2 > div:2 > div:2 > button:4` — "TRANSPARENCY" + - **letterSpacing**: `0.6px` → `normal` + - **padding**: `6.4px 9.6px` → `8px 10px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(203, 211, 218)` → `rgba(0, 0, 0, 0)` + - **width**: `100.391px` → `87.9844px` + - **height**: `27.7812px` → `30px` + - **rect**: `993,272 100x28` → `880,337 88x30` -- `/ LIST-TOOLS` -- `CATALOG` -- `All tools` -- `Каталог всех PNG-инструментов, сгруппиро` -- `convert` -- `Convert` -- `Opens a JPEG and saves it as lossless PN` -- `Re-encodes a WebP image into universal P` -- `Convert GIF to PNG` -- `Extracts the first frame of a GIF animat` -- `Convert BMP to PNG` -- `Re-encodes BMP into compact lossless PNG` -- `Convert ICO to PNG` -- `Turns an .ico icon into a regular PNG of` -- `Convert PNG to BMP` -- `Saves the image as 24-bit BMP without an` -- `Encodes the image into a base64 string f` -- `Base64 to PNG` -- `Decodes a base64 string or data-uri back` -- `Builds a full data-uri (data:image/png;b` -- `Data URI to PNG` -- `Decodes data:image/…;base64,… back into ` -- `PNG to HEX pixels` -- `Shows all pixels as rrggbbaa hex values ` -- `HEX pixels to PNG` -- `Assembles an image from rrggbbaa hex val` -- `PNG to Bytes` -- `Lists every pixel as four decimal bytes ` -- `Bytes to PNG` -- `Assembles an image from decimal RGBA byt` -- `PNG to RGB Values` -- `Lists every pixel as rgba(r, g, b, a), o` -- `RGB Values to PNG` -- `Assembles an image from rgba(r, g, b, a)` -- `Transparency is composited over the chos` -- `Convert PNG to WebP` -- `Re-encodes the image into WebP with adju` -- `Compress PNG` -- `Shrinks the PNG by reducing its palette ` -- `Reduce PNG to Size` -- `Binary-searches the palette size until t` -- `SVG to PNG` -- `Decodes SVG markup into a raster image. ` -- `alpha` -- `Alpha & transparency` -- `Circle Mask PNG` -- `Cuts the image into a circle. Diameter i` -- `Square Mask PNG` -- `Cuts the image into a rectangle with sid` -- `Star Mask PNG` -- `Cuts the image into an n-pointed star wi` -- `Wavy Mask PNG` -- `Cuts the image into a wavy-edged circle:` -- `Remove alpha channel PNG` -- `Composites the image over a white backgr` -- `Set alpha channel PNG` -- `Assigns the same opacity to all pixels; ` -- `Extract alpha mask PNG` -- `Turns transparency into a black-and-whit` -- `Clips corners by a radius set as a perce` +### `body > main:1 > div:2 > div:2 > div:2 > button:5` — "COLOR" + - **letterSpacing**: `0.6px` → `normal` + - **padding**: `6.4px 9.6px` → `8px 10px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(203, 211, 218)` → `rgba(0, 0, 0, 0)` + - **width**: `54.1875px` → `49.5px` + - **height**: `27.7812px` → `30px` + - **rect**: `1100,272 54x28` → `974,337 50x30` -### Только в рефе +### `body > main:1 > div:2 > div:2 > div:2 > button:6` — "GEOMETRY" + - **letterSpacing**: `0.6px` → `normal` + - **padding**: `6.4px 9.6px` → `8px 10px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(203, 211, 218)` → `rgba(0, 0, 0, 0)` + - **width**: `74px` → `65.9844px` + - **height**: `27.7812px` → `30px` + - **rect**: `1161,272 74x28` → `1030,337 66x30` -- `/ - CATALOG` -- `/` -- `EASY-PNG-TOOLS / CATALOG` -- `Tool catalog` -- `Focused utilities for working with PNG. ` -- `32` -- `ALL` -- `CONVERT` -- `TRANSPARENCY` -- `COLOR` -- `GEOMETRY` -- `FILTERS` -- `ANALYZE` -- `05 - TOOLS` -- `Re-encode JPEG files as lossless PNG whi` -- `01` -- `Turn WebP images into a universal PNG fo` -- `02` -- `Encode an image as a base64 string for e` -- `03` -- `Build a complete data URI ready for HTML` -- `04` -- `Composite transparency over a selected b` -- `05` -- `Remove background PNG` -- `Remove a solid background by color, tole` -- `Extract alpha mask` -- `Turn the alpha channel into a clean blac` -- `Clip the image corners by a precise radi` -- `Add a colored ring around opaque content` -- `Multiply the alpha channel while keeping` -- `Generate a smooth transition between two` -- `Convert the image to luminance-based sha` -- `Invert every color channel while leaving` -- `Brightness & contrast` -- `Adjust brightness and contrast across a ` -- `Make an image warmer or cooler with a si` -- `Scale an image with bilinear interpolati` -- `Cut a rectangular area with exact coordi` -- `Rotate by 90, 180, or 270 degrees withou` -- `Mirror the image horizontally or vertica` -- `Expand the canvas on all sides by a chos` -- `04 - TOOLS` -- `Apply a fast Gaussian-style blur with tr` -- `Emphasize edges with an adjustable sharp` -- `Smoothly darken the image edges while pr` -- `Simulate low-quality JPEG recompression ` -- `Inspect dimensions, alpha presence, and ` -- `Check grayscale` -- `Report whether the image contains only s` -- `Check transparency` -- `Detect transparent and semi-transparent ` -- `Classify the image as portrait, landscap` -- `•` +### `body > main:1 > div:2 > div:2 > div:2 > button:7` — "FILTERS" + - **letterSpacing**: `0.6px` → `normal` + - **padding**: `6.4px 9.6px` → `8px 10px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(203, 211, 218)` → `rgba(0, 0, 0, 0)` + - **width**: `67.3906px` → `60.5px` + - **height**: `27.7812px` → `30px` + - **rect**: `1241,272 67x28` → `1102,337 61x30` + +### `body > main:1 > div:2 > div:2 > div:2 > button:8` — "ANALYZE" + - **letterSpacing**: `0.6px` → `normal` + - **padding**: `6.4px 9.6px` → `8px 10px` + - **borderRadius**: `4px` → `0px` + - **borderTopColor**: `rgb(203, 211, 218)` → `rgba(0, 0, 0, 0)` + - **width**: `67.3906px` → `60.5px` + - **height**: `27.7812px` → `30px` + - **rect**: `1315,272 67x28` → `1168,337 61x30` + +### `body > main:1 > div:2 > div:3 > section:1` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `16px` → `normal` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **rect**: `58,324 648x610` → `51,415 575x610` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2` + - **gridTemplateColumns**: `648.406px` → `574.812px` + - **padding**: `0px` → `14px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `570px` → `584px` + - **rect**: `58,364 648x570` → `51,441 575x584` + +### `body > main:1 > div:2 > div:3 > section:2` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `16px` → `normal` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **rect**: `734,324 648x610` → `654,415 575x610` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2` + - **gridTemplateColumns**: `648.406px` → `574.812px` + - **padding**: `0px` → `14px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `570px` → `584px` + - **rect**: `734,364 648x570` → `654,441 575x584` + +### `body > main:1 > div:2 > div:3 > section:3` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `16px` → `normal` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **rect**: `58,990 648x610` → `51,1081 575x610` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2` + - **gridTemplateColumns**: `648.406px` → `574.812px` + - **padding**: `0px` → `14px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `570px` → `584px` + - **rect**: `58,1030 648x570` → `51,1107 575x584` + +### `body > main:1 > div:2 > div:3 > section:4` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `16px` → `normal` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **rect**: `734,990 648x610` → `654,1081 575x610` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2` + - **gridTemplateColumns**: `648.406px` → `574.812px` + - **padding**: `0px` → `14px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `570px` → `584px` + - **rect**: `734,1030 648x570` → `654,1107 575x584` + +### `body > main:1 > div:2 > div:3 > section:5` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `16px` → `normal` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **rect**: `58,1656 648x494` → `51,1747 575x494` + +### `body > main:1 > div:2 > div:3 > section:5 > div:2` + - **gridTemplateColumns**: `648.406px` → `574.812px` + - **padding**: `0px` → `14px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `454px` → `468px` + - **rect**: `58,1696 648x454` → `51,1773 575x468` + +### `body > main:1 > div:2 > div:3 > section:6` + - **display**: `flex` → `block` + - **flexDirection**: `column` → `row` + - **gap**: `16px` → `normal` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **rect**: `734,1656 648x494` → `654,1747 575x494` + +### `body > main:1 > div:2 > div:3 > section:6 > div:2` + - **gridTemplateColumns**: `648.406px` → `574.812px` + - **padding**: `0px` → `14px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `648.406px` → `574.812px` + - **height**: `454px` → `468px` + - **rect**: `734,1696 648x454` → `654,1773 575x468` + +### `body > main:1` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(238, 241, 244)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `2315.59px` → `2409.98px` + - **rect**: `0,0 1440x2316` → `0,0 1280x2410` + +### `body > main:1 > header:1 > div:3 > span:1 > i:1` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `8px` → `6px` + - **height**: `8px` → `6px` + - **boxShadow**: `color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px` → `none` + - **rect**: `1071,28 8x8` → `932,29 6x6` + +### `body > main:1 > div:2` + - **padding**: `60px 57.6px 72px` → `60px 51.2px 72px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `2251.59px` → `2345.98px` + - **rect**: `0,64 1440x2252` → `0,64 1280x2346` + +### `body > main:1 > div:2 > div:2 > div:2` + - **gap**: `6.4px` → `6px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `531.484px` → `480.469px` + - **height**: `27.7812px` → `30px` + - **rect**: `851,272 531x28` → `748,337 480x30` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1 > i:2` — "05 TOOLS" + - **letterSpacing**: `0.8px` → `1.32px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `54.4062px` → `54.5625px` + - **height**: `13px` → `12px` + - **rect**: `652,326 54x13` → `571,415 55x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > i:2` — "05 TOOLS" + - **letterSpacing**: `0.8px` → `1.32px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `54.4062px` → `54.5625px` + - **height**: `13px` → `12px` + - **rect**: `1328,326 54x13` → `1174,415 55x12` + +### `body > main:1 > div:2 > div:3 > section:3 > div:1 > i:2` — "05 TOOLS" + - **letterSpacing**: `0.8px` → `1.32px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `54.4062px` → `54.5625px` + - **height**: `13px` → `12px` + - **rect**: `652,992 54x13` → `571,1081 55x12` + +### `body > main:1 > div:2 > div:3 > section:4 > div:1 > i:2` — "05 TOOLS" + - **letterSpacing**: `0.8px` → `1.32px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `54.4062px` → `54.5625px` + - **height**: `13px` → `12px` + - **rect**: `1328,992 54x13` → `1174,1081 55x12` + +### `body > main:1 > div:2 > div:3 > section:5 > div:1 > i:2` — "04 TOOLS" + - **letterSpacing**: `0.8px` → `1.32px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `54.4062px` → `54.5625px` + - **height**: `13px` → `12px` + - **rect**: `652,1658 54x13` → `571,1747 55x12` + +### `body > main:1 > div:2 > div:3 > section:6 > div:1 > i:2` — "04 TOOLS" + - **letterSpacing**: `0.8px` → `1.32px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `54.4062px` → `54.5625px` + - **height**: `13px` → `12px` + - **rect**: `1328,1658 54x13` → `1174,1747 55x12` + +### `body` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `2315.59px` → `2409.98px` + - **rect**: `0,0 1440x2316` → `0,0 1280x2410` + +### `body > main:1 > header:1` + - **padding**: `0px 57.6px` → `0px 51.2px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **rect**: `0,0 1440x64` → `0,0 1280x64` + +### `body > main:1 > header:1 > a:1 > span:2` — "easy-png-tools" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `117.609px` → `107.766px` + - **height**: `18px` → `17px` + - **rect**: `98,23 118x18` → `91,23 108x17` + +### `body > main:1 > header:1 > a:1 > span:3` — "/ CATALOG" + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `64.8125px` → `60.2969px` + - **height**: `13px` → `12px` + - **rect**: `225,25 65x13` → `209,26 60x12` + +### `body > main:1 > header:1 > div:3` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `311.812px` → `296.828px` + - **height**: `28px` → `29px` + - **rect**: `1071,18 312x28` → `932,17 297x29` + +### `body > main:1 > header:1 > div:3 > span:1` — "LOCAL MODE / READY" + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `137.406px` → `126.375px` + - **height**: `13px` → `12px` + - **rect**: `1071,25 137x13` → `932,26 126x12` + +### `body > main:1 > header:1 > div:3 > div:4` + - **alignItems**: `normal` → `center` + - **borderRadius**: `4px` → `0px` + - **width**: `70.4062px` → `64.4531px` + - **height**: `27px` → `26px` + - **rect**: `1312,18 70x27` → `1164,19 64x26` + +### `body > main:1 > div:2 > div:1 > div:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `510.719px` → `660px` + - **height**: `124.594px` → `139.984px` + - **rect**: `58,124 511x125` → `51,124 660x140` + +### `body > main:1 > div:2 > div:1 > div:2 > span:2 > br:1` + - **lineHeight**: `normal` → `14px` + - **letterSpacing**: `0.8px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `1382,223 0x13` → `1229,222 0x12` + +### `body > main:1 > div:2 > div:3` + - **gridTemplateColumns**: `648.406px 648.406px` → `574.812px 574.812px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1324.81px` → `1177.62px` + - **rect**: `58,324 1325x1826` → `51,415 1178x1826` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:2 > strong:1` — "Convert JPG to PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,398 488x17` → `124,478 415x15` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > span:2 > span:2` — "Re-encode JPEG files as lossless PNG while preserving transparency." + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `18px` → `36px` + - **rect**: `131,417 488x18` → `124,501 415x36` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:1 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,409 16x16` → `591,500 16x16` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > span:2 > strong:1` — "Convert WebP to PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,514 488x17` → `124,603 415x15` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:2 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,525 16x16` → `591,616 16x16` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > strong:1` — "PNG to Base64" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,630 488x17` → `124,710 415x15` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > span:2 > span:2` — "Encode an image as a base64 string for embedding in code or styles." + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `18px` → `36px` + - **rect**: `131,649 488x18` → `124,733 415x36` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:3 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,641 16x16` → `591,732 16x16` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > span:2 > strong:1` — "PNG to Data URI" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,746 488x17` → `124,835 415x15` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:4 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,757 16x16` → `591,848 16x16` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > strong:1` — "Convert PNG to JPG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,862 488x17` → `124,942 415x15` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > span:2 > span:2` — "Composite transparency over a selected backdrop and export JPEG." + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `18px` → `36px` + - **rect**: `131,881 488x18` → `124,965 415x36` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > a:5 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,873 16x16` → `591,964 16x16` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > span:2 > strong:1` — "Remove background PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `807,389 488x17` → `727,478 415x15` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:1 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `1347,409 16x16` → `1194,500 16x16` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > span:2 > strong:1` — "Extract alpha mask" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `807,514 488x17` → `727,603 415x15` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:2 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `1347,525 16x16` → `1194,616 16x16` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > span:2 > strong:1` — "Round corners PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `807,630 488x17` → `727,719 415x15` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:3 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `1347,641 16x16` → `1194,732 16x16` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > strong:1` — "Outline PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `807,746 488x17` → `727,826 415x15` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > span:2 > span:2` — "Add a colored ring around opaque content with adjustable thickness." + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `18px` → `36px` + - **rect**: `807,765 488x18` → `727,849 415x36` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:4 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `1347,757 16x16` → `1194,848 16x16` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > span:2 > strong:1` — "Change PNG opacity" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `807,853 488x17` → `727,942 415x15` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > a:5 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `1347,873 16x16` → `1194,964 16x16` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > span:2 > strong:1` — "Create gradient PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,1055 488x17` → `124,1144 415x15` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:1 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,1075 16x16` → `591,1166 16x16` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > span:2 > strong:1` — "Grayscale PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,1180 488x17` → `124,1269 415x15` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:2 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,1191 16x16` → `591,1282 16x16` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > span:2 > strong:1` — "Invert colors PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,1296 488x17` → `124,1385 415x15` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:3 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,1307 16x16` → `591,1398 16x16` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > span:2 > strong:1` — "Brightness & contrast" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,1412 488x17` → `124,1501 415x15` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:4 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,1423 16x16` → `591,1514 16x16` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > span:2 > strong:1` — "Temperature PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,1528 488x17` → `124,1617 415x15` + +### `body > main:1 > div:2 > div:3 > section:3 > div:2 > a:5 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,1539 16x16` → `591,1630 16x16` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > span:2 > strong:1` — "Resize PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `807,1055 488x17` → `727,1144 415x15` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:1 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `1347,1075 16x16` → `1194,1166 16x16` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > span:2 > strong:1` — "Crop PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `807,1180 488x17` → `727,1269 415x15` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:2 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `1347,1191 16x16` → `1194,1282 16x16` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > span:2 > strong:1` — "Rotate PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `807,1296 488x17` → `727,1385 415x15` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:3 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `1347,1307 16x16` → `1194,1398 16x16` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > span:2 > strong:1` — "Flip PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `807,1412 488x17` → `727,1501 415x15` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:4 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `1347,1423 16x16` → `1194,1514 16x16` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > span:2 > strong:1` — "Add padding to PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `807,1528 488x17` → `727,1617 415x15` + +### `body > main:1 > div:2 > div:3 > section:4 > div:2 > a:5 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `1347,1539 16x16` → `1194,1630 16x16` + +### `body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:2 > strong:1` — "Blur PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,1730 488x17` → `124,1810 415x15` + +### `body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > span:2 > span:2` — "Apply a fast Gaussian-style blur with transparent edge handling." + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `18px` → `36px` + - **rect**: `131,1749 488x18` → `124,1833 415x36` + +### `body > main:1 > div:2 > div:3 > section:5 > div:2 > a:1 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,1741 16x16` → `591,1832 16x16` + +### `body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > span:2 > strong:1` — "Sharpen PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,1846 488x17` → `124,1935 415x15` + +### `body > main:1 > div:2 > div:3 > section:5 > div:2 > a:2 > svg:4` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **opacity**: `1` → `0` + - **rect**: `671,1857 16x16` → `591,1948 16x16` + +### `body > main:1 > div:2 > div:3 > section:5 > div:2 > a:3 > span:2 > strong:1` — "Vignette PNG" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `488.406px` → `414.812px` + - **height**: `17px` → `15px` + - **rect**: `131,1962 488x17` → `124,2051 415x15` + +### Структурные расхождения + +_—_ ## /preview/tools/linear-gradient-png (vs gradient.html) - Токены light: **10**, dark: **16** -- Элементы: **7**, только у нас: 111, только в рефе: 30 +- Стиль-расхождений: **103** элементов / **906** полей (из них геометрия: 103) +- Структурные: +0 / -0 / tag 0 / text 0 ### Токены — Light @@ -658,143 +3014,1130 @@ _2026-08-28T15:27:27.893Z_ | `--radius-lg` | — | .5rem | | `--text-sm` | — | .875rem | -### Расхождения элементов (топ 7) +### Расхождения стилей (топ 103) -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)` — "Gradient" - - **fontSize**: `12px` → `10px` +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:2` — "Download PNG" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `11px` + - **color**: `rgb(0, 0, 0)` → `rgb(255, 255, 255)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgb(23, 105, 210)` + - **display**: `inline-block` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `center` + - **gap**: `normal` → `9px` + - **padding**: `1px 6px` → `0px` + - **margin**: `0px` → `18px 0px 0px` + - **borderTopWidth**: `2px` → `0px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(255, 255, 255)` + - **borderTopStyle**: `outset` → `none` + - **width**: `141.297px` → `210.562px` + - **height**: `25px` → `42px` + - **rect**: `95,560 141x25` → `997,398 211x42` + +### `body > main:1 > div:2 > div:3 > section:1 > div:6 > button:1` — "Reset" + - **fontSize**: `13.3333px` → `12px` + - **lineHeight**: `normal` → `18px` + - **color**: `rgb(0, 0, 0)` → `rgb(23, 105, 210)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `7px` + - **padding**: `1px 6px` → `0px` + - **borderTopWidth**: `2px` → `0px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(23, 105, 210)` + - **borderTopStyle**: `outset` → `none` + - **width**: `67.2969px` → `52.3594px` + - **height**: `24px` → `18px` + - **rect**: `0,512 67x24` → `72,918 52x18` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:1` — "Copy CSS" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `8px` + - **padding**: `1px 6px` → `8px 6px` + - **borderTopWidth**: `2px` → `1px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `outset` → `solid` + - **width**: `91px` → `80.9844px` + - **height**: `25px` → `33px` + - **rect**: `0,560 91x25` → `1127,337 81x33` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3 > div:1 > button:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `grid` + - **alignItems**: `normal` → `center` + - **gridTemplateColumns**: `none` → `14px` + - **padding**: `1px 6px` → `6px` + - **borderTopWidth**: `2px` → `0px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **borderTopStyle**: `outset` → `none` + - **width**: `30px` → `26px` + - **height**: `24px` → `26px` + - **rect**: `126,634 30x24` → `1182,1061 26x26` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > label:1` — "GRADIENT TYPE" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `flex` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `350.562px` + - **height**: `auto` → `12px` + - **rect**: `0,293 120x20` → `72,424 351x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > label:1` — "COLOR STOPS" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `flex` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `350.562px` + - **height**: `auto` → `12px` + - **rect**: `0,342 102x20` → `72,525 351x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > label:1` — "DIRECTION" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `flex` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `350.562px` + - **height**: `auto` → `12px` + - **rect**: `0,440 129x20` → `72,654 351x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:5 > label:1` — "OPACITY" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `flex` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `350.562px` + - **height**: `auto` → `12px` + - **rect**: `0,489 116x20` → `72,831 351x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:1` — "PNG" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(255, 255, 255)` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `center` + - **gridTemplateColumns**: `none` → `68px` + - **margin**: `0px` → `0px 0px 12px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgba(255, 255, 255, 0.65)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `70px` + - **height**: `24px` → `70px` + - **rect**: `0,585 1440x24` → `829,704 70x70` + +### `body > main:1 > div:2 > div:2 > span:2` — "LIVE PREVIEW" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(37, 169, 106)` + - **display**: `inline` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `8px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `79.9844px` + - **height**: `auto` → `12px` + - **rect**: `0,221 106x20` → `1149,258 80x12` + +### `body > main:1 > div:2 > div:2 > span:2 > i:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(37, 169, 106)` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(37, 169, 106)` + - **display**: `inline` → `block` + - **borderRadius**: `0px` → `50%` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `6px` + - **height**: `auto` → `6px` + - **rect**: `0,221 0x20` → `1149,261 6x6` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2 > button:1` — "Linear" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(255, 255, 255)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgb(23, 105, 210)` + - **display**: `inline-block` → `block` + - **padding**: `1px 6px` → `0px` + - **borderTopWidth**: `2px` → `0px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(255, 255, 255)` + - **borderTopStyle**: `outset` → `none` + - **width**: `52.9219px` → `174.281px` + - **height**: `24px` → `30px` + - **rect**: `0,316 53x24` → `73,449 174x30` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2 > button:2` — "Radial" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 6px` → `0px` + - **borderTopWidth**: `2px` → `0px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **borderTopStyle**: `outset` → `none` + - **width**: `53.3281px` → `174.281px` + - **height**: `24px` → `30px` + - **rect**: `53,316 53x24` → `247,449 174x30` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:1 > input:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `11px` + - **color**: `rgb(0, 0, 0)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(255, 255, 255)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 2px` → `0px` + - **borderTopWidth**: `2px` → `0px` + - **borderTopColor**: `rgb(118, 118, 118)` → `rgb(23, 33, 43)` + - **borderTopStyle**: `inset` → `none` + - **width**: `157px` → `127px` + - **height**: `24px` → `13px` + - **rect**: `0,365 157x24` → `103,559 127x13` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:3 > input:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `11px` + - **color**: `rgb(0, 0, 0)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(255, 255, 255)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 2px` → `0px` + - **borderTopWidth**: `2px` → `0px` + - **borderTopColor**: `rgb(118, 118, 118)` → `rgb(23, 33, 43)` + - **borderTopStyle**: `inset` → `none` + - **width**: `157px` → `127px` + - **height**: `24px` → `13px` + - **rect**: `0,414 157x24` → `306,559 127x13` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:1` — "0° →" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 6px` → `8px 6px` + - **borderTopWidth**: `2px` → `1px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `outset` → `solid` + - **width**: `46.7188px` → `83.1406px` + - **height**: `24px` → `32px` + - **rect**: `0,463 47x24` → `72,716 83x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:2` — "45° ↗" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 6px` → `8px 6px` + - **borderTopWidth**: `2px` → `1px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `outset` → `solid` + - **width**: `51.1406px` → `83.1406px` + - **height**: `24px` → `32px` + - **rect**: `47,463 51x24` → `161,716 83x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:3` — "90° ↑" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 6px` → `8px 6px` + - **borderTopWidth**: `2px` → `1px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `outset` → `solid` + - **width**: `52.3125px` → `83.1406px` + - **height**: `24px` → `32px` + - **rect**: `98,463 52x24` → `250,716 83x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:4` — "135° ↖" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(238, 241, 244)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgb(23, 33, 43)` + - **display**: `inline-block` → `block` + - **padding**: `1px 6px` → `8px 6px` + - **borderTopWidth**: `2px` → `1px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `outset` → `solid` + - **width**: `59.1562px` → `83.1406px` + - **height**: `24px` → `32px` + - **rect**: `150,463 59x24` → `340,716 83x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:5` — "180° ←" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 6px` → `8px 6px` + - **borderTopWidth**: `2px` → `1px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `outset` → `solid` + - **width**: `62.7188px` → `83.1406px` + - **height**: `24px` → `32px` + - **rect**: `209,463 63x24` → `72,754 83x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:6` — "225° ↙" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 6px` → `8px 6px` + - **borderTopWidth**: `2px` → `1px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `outset` → `solid` + - **width**: `59.1562px` → `83.1406px` + - **height**: `24px` → `32px` + - **rect**: `272,463 59x24` → `161,754 83x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:7` — "270° ↓" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 6px` → `8px 6px` + - **borderTopWidth**: `2px` → `1px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `outset` → `solid` + - **width**: `60.3125px` → `83.1406px` + - **height**: `24px` → `32px` + - **rect**: `331,463 60x24` → `250,754 83x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3 > button:8` — "315° ↘" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 6px` → `8px 6px` + - **borderTopWidth**: `2px` → `1px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `outset` → `solid` + - **width**: `59.1562px` → `83.1406px` + - **height**: `24px` → `32px` + - **rect**: `392,463 59x24` → `340,754 83x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:6 > span:2` — "updates automatically" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `11px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `8px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `141.016px` + - **height**: `auto` → `13px` + - **rect**: `71,513 159x20` → `282,921 141x13` + +### `body > main:1 > div:2 > div:3 > section:1 > div:6 > span:2 > i:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `11px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(37, 169, 106)` + - **display**: `inline` → `block` + - **borderRadius**: `0px` → `50%` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `6px` + - **height**: `auto` → `6px` + - **rect**: `71,513 0x20` → `282,924 6x6` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `12px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(255, 255, 255)` + - **display**: `block` → `grid` + - **justifyContent**: `normal` → `center` + - **gridTemplateColumns**: `none` → `92.375px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `679.062px` + - **height**: `48px` → `537.594px` + - **rect**: `0,585 1440x48` → `525,483 679x538` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3 > pre:2` — "background: linear-gradient(135deg, #1769D2 0%, #00A8C7 100%); opacity: 1;" + - **fontFamily**: `monospace` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `12px` + - **lineHeight**: `24px` → `19.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(238, 241, 244)` + - **padding**: `0px` → `14px` + - **margin**: `16px 0px` → `12px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `687.062px` + - **height**: `48px` → `66.375px` + - **rect**: `0,674 1440x48` → `521,1099 687x66` + +### `body > main:1 > div:2 > div:1` — "PNG PROCESSING SINGLE TOOL" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **margin**: `0px` → `0px 0px 18px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1177.62px` + - **height**: `24px` → `12px` + - **rect**: `0,64 1440x24` → `51,124 1178x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1 > strong:2` — "Configure output" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `14px` + - **fontWeight**: `700` → `600` + - **lineHeight**: `24px` → `normal` + - **display**: `inline` → `block` + - **margin**: `0px` → `5px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `123.156px` + - **height**: `auto` → `17px` + - **rect**: `161,245 127x20` → `72,366 123x17` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1 > span:2` — "TOOL 01" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `46.8906px` + - **height**: `auto` → `12px` + - **rect**: `0,269 62x20` → `376,354 47x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > label:1 > output:1` — "135 °" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `32.5px` + - **height**: `auto` → `12px` + - **rect**: `89,440 40x20` → `390,654 33x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:5 > label:1 > output:1` — "100 %" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `32.5px` + - **height**: `auto` → `12px` + - **rect**: `69,489 47x20` → `390,831 33x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1 > strong:2` — "gradient.png" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `14px` + - **fontWeight**: `700` → `600` + - **lineHeight**: `24px` → `normal` + - **display**: `inline` → `block` + - **margin**: `0px` → `5px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `93.7812px` + - **height**: `auto` → `17px` + - **rect**: `137,538 96x20` → `521,395 94x17` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3 > div:1 > span:1` — "GENERATED CSS" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `87.0781px` + - **height**: `auto` → `12px` + - **rect**: `0,635 122x20` → `521,1068 87x12` + +### `body > main:1 > div:2 > div:2` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `end` + - **justifyContent**: `normal` → `space-between` + - **gap**: `normal` → `32px` + - **margin**: `0px` → `0px 0px 48px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1177.62px` + - **height**: `133.438px` → `116.391px` + - **rect**: `0,109 1440x133` → `51,154 1178x116` + +### `body > main:1 > div:2 > div:2 > div:1 > h1:1` — "Gradient background." + - **fontSize**: `32px` → `51.2px` + - **fontWeight**: `700` → `650` + - **lineHeight**: `48px` → `51.2px` + - **letterSpacing**: `normal` → `-3.072px` + - **margin**: `21.44px 0px` → `0px 0px 14px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `550px` + - **height**: `48px` → `51.2031px` + - **rect**: `0,109 1440x48` → `51,154 550x51` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:1` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `8px` + - **padding**: `0px` → `0px 8px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `167px` + - **height**: `25px` → `32px` + - **rect**: `0,364 1440x25` → `72,549 167x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:3` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `8px` + - **padding**: `0px` → `0px 8px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `167px` + - **height**: `25px` → `32px` + - **rect**: `0,413 1440x25` → `275,549 167x32` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > span:2` — "easy-png-tools" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `12px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(255, 255, 255)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `92.375px` + - **height**: `auto` → `14px` + - **rect**: `0,611 108x20` → `818,786 92x14` + +### `body > main:1 > header:1 > div:3 > div:4 > span:2` — "/" + - **fontFamily**: `"IBM Plex Mono", monospace` → `"IBM Plex Sans", sans-serif` + - **fontSize**: `10px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(109, 120, 131)` → `rgb(23, 33, 43)` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `6px` → `4.45312px` + - **height**: `13px` → `24px` + - **rect**: `1344,25 6x13` → `1194,20 4x24` + +### `body > main:1 > div:2 > div:1 > span:1` — "/" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **margin**: `0px` → `0px 7px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `137,66 6x20` → `159,124 13x12` + +### `body > main:1 > div:2 > div:3` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `start` + - **gap**: `normal` → `56px` + - **gridTemplateColumns**: `none` → `392.562px 729.062px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1177.62px` + - **height**: `479px` → `863.969px` + - **rect**: `0,243 1440x479` → `51,318 1178x864` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `space-between` + - **padding**: `0px` → `18px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `390.562px` + - **height**: `48px` → `83px` + - **rect**: `0,243 1440x48` → `52,319 391x83` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > div:3` + - **display**: `block` → `grid` + - **gap**: `normal` → `6px` + - **gridTemplateColumns**: `none` → `83.1406px 83.1406px 83.1406px 83.1406px` + - **margin**: `0px` → `14px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `350.562px` + - **height**: `25px` → `70px` + - **rect**: `0,462 1440x25` → `72,716 351x70` + +### `body > main:1 > div:2 > div:3 > section:1 > div:6` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `space-between` + - **padding**: `0px` → `16px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `390.562px` + - **height**: `25px` → `50px` + - **rect**: `0,511 1440x25` → `52,902 391x50` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `space-between` + - **padding**: `0px` → `18px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `727.062px` + - **height**: `49px` → `140px` + - **rect**: `0,536 1440x49` → `501,319 727x140` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `flex-end` + - **gap**: `normal` → `10px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `210.562px` + - **height**: `25px` → `103px` + - **rect**: `0,560 1440x25` → `997,337 211x103` + +### `body > main:1 > footer:3 > span:1` — "easy-png-tools" + - **letterSpacing**: `0.8px` → `normal` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `7px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `142.812px` → `116.984px` + - **height**: `13px` → `12px` + - **rect**: `58,755 143x13` → `51,1271 117x12` + +### `body > main:1 > footer:3 > span:1 > b:1` — "v2.4.0" + - **fontWeight**: `700` → `400` + - **letterSpacing**: `0.8px` → `normal` - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)` - - **letterSpacing**: `0.48px` → `normal` - - **rect**: `754,24 61x15` → `930,26 44x12` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `33px` + - **height**: `auto` → `12px` + - **rect**: `160,755 41x13` → `135,1271 33x12` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)` — "Workspace" +### `body > main:1 > footer:3 > span:2` — "gradient tool · local-only" + - **letterSpacing**: `0.8px` → `normal` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `7px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `176.812px` → `142.953px` + - **height**: `13px` → `12px` + - **rect**: `683,755 177x13` → `611,1271 143x12` + +### `body > main:1 > footer:3 > span:3` — "© 2024" + - **letterSpacing**: `0.8px` → `normal` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `7px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `40.8125px` → `33px` + - **height**: `13px` → `12px` + - **rect**: `1342,755 41x13` → `1196,1271 33x12` + +### `body > main:1 > header:1 > nav:2 > a:3` — "Gradient" - **fontSize**: `12px` → `10px` - **letterSpacing**: `0.48px` → `normal` - - **rect**: `596,24 69x15` → `798,26 49x12` + - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `61.4531px` → `43.9844px` + - **height**: `15px` → `12px` + - **rect**: `687,24 61x15` → `777,26 44x12` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)` — "Catalog" +### `body > main:1 > header:1 > div:3 > button:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `grid` + - **justifyContent**: `center` → `normal` + - **gridTemplateColumns**: `none` → `17px` + - **width**: `28px` → `29px` + - **height**: `28px` → `29px` + - **rect**: `1224,18 28x28` → `1074,17 29x29` + +### `body > main:1 > header:1 > div:3 > button:3` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `grid` + - **justifyContent**: `center` → `normal` + - **gridTemplateColumns**: `none` → `17px` + - **width**: `28px` → `29px` + - **height**: `28px` → `29px` + - **rect**: `1268,18 28x28` → `1119,17 29x29` + +### `body > main:1 > div:2 > div:2 > div:1 > p:2` — "Create a clean, export-ready gradient with precise control over color, direction and transparency." + - **lineHeight**: `24px` → `25.6px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **margin**: `16px 0px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `550px` + - **height**: `24px` → `51.1875px` + - **rect**: `0,179 1440x24` → `51,219 550x51` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1 > span:1` — "GRADIENT SETTINGS" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `0,245 158x20` → `72,345 114x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `10px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `350.562px` + - **height**: `74px` → `32px` + - **rect**: `0,364 1440x74` → `72,549 351x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > input:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(16, 16, 16)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(255, 255, 255)` → `rgba(0, 0, 0, 0)` + - **margin**: `2px` → `0px` + - **borderTopColor**: `rgb(16, 16, 16)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `134,440 129x16` → `72,679 129x16` + +### `body > main:1 > div:2 > div:3 > section:1 > div:5 > input:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(16, 16, 16)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(255, 255, 255)` → `rgba(0, 0, 0, 0)` + - **margin**: `2px` → `0px` + - **borderTopColor**: `rgb(16, 16, 16)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `122,489 129x16` → `72,856 129x16` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1 > span:1` — "OUTPUT PREVIEW" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `0,538 134x20` → `521,374 94x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3 > div:1` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `space-between` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `687.062px` + - **height**: `25px` → `26px` + - **rect**: `0,633 1440x25` → `521,1061 687x26` + +### `body > main:1 > header:1 > nav:2` + - **gap**: `18px` → `22px` + - **margin**: `0px 0px 0px 24px` → `0px 28px 0px 368.891px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `376.594px` → `296.938px` + - **height**: `15px` → `12px` + - **rect**: `528,24 377x15` → `645,26 297x12` + +### `body > main:1 > header:1 > nav:2 > a:1` — "Workspace" - **fontSize**: `12px` → `10px` - **letterSpacing**: `0.48px` → `normal` - - **rect**: `683,24 54x15` → `870,26 39x12` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `69.125px` → `49.4844px` + - **height**: `15px` → `12px` + - **rect**: `528,24 69x15` → `645,26 49x12` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)` — "Background remover" +### `body > main:1 > header:1 > nav:2 > a:2` — "Catalog" - **fontSize**: `12px` → `10px` - **letterSpacing**: `0.48px` → `normal` - - **rect**: `834,24 138x15` → `996,26 99x12` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `53.7656px` → `38.5px` + - **height**: `15px` → `12px` + - **rect**: `615,24 54x15` → `716,26 39x12` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)` — "EN" +### `body > main:1 > header:1 > nav:2 > a:4` — "Background remover" + - **fontSize**: `12px` → `10px` + - **letterSpacing**: `0.48px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `138.25px` → `98.9688px` + - **height**: `15px` → `12px` + - **rect**: `766,24 138x15` → `843,26 99x12` + +### `body > main:1 > header:1 > div:3 > button:2 > svg:1` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `16px` → `17px` + - **height**: `16px` → `17px` + - **rect**: `1230,24 16x16` → `1080,23 17x17` + +### `body > main:1 > header:1 > div:3 > button:3 > svg:1` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `16px` → `17px` + - **height**: `16px` → `17px` + - **rect**: `1274,24 16x16` → `1125,23 17x17` + +### `body > main:1 > div:2 > div:3 > section:1` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(248, 250, 251)` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `392.562px` + - **height**: `293px` → `635px` + - **rect**: `0,243 1440x293` → `51,318 393x635` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2` + - **display**: `block` → `flex` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `350.562px` + - **height**: `25px` → `32px` + - **rect**: `0,315 1440x25` → `72,448 351x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:1 > span:1` + - **display**: `inline` → `block` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `14px` + - **height**: `auto` → `14px` + - **rect**: `0,366 0x20` → `81,558 14x14` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > span:2` — "→" + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `16px` + - **height**: `auto` → `24px` + - **rect**: `0,391 16x20` → `249,553 16x24` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:2 > div:3 > span:1` + - **display**: `inline` → `block` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `14px` + - **height**: `auto` → `14px` + - **rect**: `0,415 0x20` → `284,558 14x14` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:3` + - **margin**: `0px` → `14px 0px 0px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `350.562px` + - **height**: `0px` → `14px` + - **rect**: `0,438 1440x0` → `72,595 351x14` + +### `body > main:1 > div:2 > div:3 > section:1 > div:6 > button:1 > svg:1` + - **fontSize**: `13.3333px` → `12px` + - **lineHeight**: `normal` → `18px` + - **color**: `rgb(0, 0, 0)` → `rgb(23, 105, 210)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `8,515 14x14` → `72,920 14x14` + +### `body > main:1 > div:2 > div:3 > section:2` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(248, 250, 251)` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `729.062px` + - **height**: `186px` → `863.969px` + - **rect**: `0,536 1440x186` → `500,318 729x864` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:1 > svg:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `10px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `8,563 15x15` → `1134,346 15x15` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:2 > svg:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `11px` + - **color**: `rgb(0, 0, 0)` → `rgb(255, 255, 255)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `103,563 15x15` → `1043,412 15x15` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:2 > svg:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `11px` + - **color**: `rgb(0, 0, 0)` → `rgb(255, 255, 255)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `214,564 14x14` → `1148,412 14x14` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(32, 42, 49)` + - **padding**: `0px` → `24px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `727.062px` + - **height**: `48px` → `585.594px` + - **rect**: `0,585 1440x48` → `501,459 727x586` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3 > div:1 > button:2 > svg:1` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(0, 0, 0)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `134,637 14x14` → `1188,1067 14x14` + +### `body > main:1` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(238, 241, 244)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `783.875px` → `1299.36px` + - **rect**: `0,0 1440x784` → `0,0 1280x1299` + +### `body > main:1 > header:1 > div:3 > span:1 > i:1` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `8px` → `6px` + - **height**: `8px` → `6px` + - **boxShadow**: `color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px` → `none` + - **rect**: `1111,28 8x8` → `970,29 6x6` + +### `body > main:1 > div:2` + - **padding**: `0px` → `60px 51.2px 72px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `657.875px` → `1190.36px` + - **rect**: `0,64 1440x658` → `0,64 1280x1190` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2` + - **padding**: `0px` → `22px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `390.562px` + - **height**: `49px` → `101px` + - **rect**: `0,291 1440x49` → `52,402 391x101` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3` + - **padding**: `0px` → `22px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `390.562px` + - **height**: `98px` → `129px` + - **rect**: `0,340 1440x98` → `52,503 391x129` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4` + - **padding**: `0px` → `22px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `390.562px` + - **height**: `49px` → `177px` + - **rect**: `0,438 1440x49` → `52,632 391x177` + +### `body > main:1 > div:2 > div:3 > section:1 > div:5` + - **padding**: `0px` → `22px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `390.562px` + - **height**: `24px` → `93px` + - **rect**: `0,487 1440x24` → `52,809 391x93` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3` + - **padding**: `0px` → `16px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `727.062px` + - **height**: `89px` → `136.375px` + - **rect**: `0,633 1440x89` → `501,1045 727x136` + +### `body > main:1 > footer:3` + - **letterSpacing**: `0.8px` → `normal` + - **gap**: `16px` → `normal` + - **padding**: `16px 57.6px` → `16px 51.2px` + - **width**: `1440px` → `1280px` + - **height**: `46px` → `45px` + - **rect**: `0,738 1440x46` → `0,1254 1280x45` + +### `body` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `783.875px` → `1299.36px` + - **rect**: `0,0 1440x784` → `0,0 1280x1299` + +### `body > main:1 > header:1` + - **padding**: `0px 57.6px` → `0px 51.2px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **rect**: `0,0 1440x64` → `0,0 1280x64` + +### `body > main:1 > header:1 > a:1 > span:2` — "easy-png-tools" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `117.609px` → `107.766px` + - **height**: `18px` → `17px` + - **rect**: `98,23 118x18` → `91,23 108x17` + +### `body > main:1 > header:1 > a:1 > span:3` — "/ GRADIENT" + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `72px` → `67px` + - **height**: `13px` → `12px` + - **rect**: `225,25 72x13` → `209,26 67x12` + +### `body > main:1 > header:1 > div:3` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `271.016px` → `259.031px` + - **height**: `28px` → `29px` + - **rect**: `1111,18 271x28` → `970,17 259x29` + +### `body > main:1 > header:1 > div:3 > span:1` — "LIVE PREVIEW" + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `96.6094px` → `88.5781px` + - **height**: `13px` → `12px` + - **rect**: `1111,25 97x13` → `970,26 89x12` + +### `body > main:1 > header:1 > div:3 > div:4` + - **alignItems**: `normal` → `center` + - **borderRadius**: `4px` → `0px` + - **width**: `70.4062px` → `64.4531px` + - **height**: `27px` → `26px` + - **rect**: `1312,18 70x27` → `1164,19 64x26` + +### `body > main:1 > div:2 > div:2 > div:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `550px` + - **height**: `93.4375px` → `116.391px` + - **rect**: `0,109 1440x93` → `51,154 550x116` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `123.156px` + - **height**: `24px` → `46px` + - **rect**: `0,243 1440x24` → `72,337 123x46` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `93.7812px` + - **height**: `24px` → `46px` + - **rect**: `0,536 1440x24` → `521,366 94x46` + +### `body > main:1 > header:1 > a:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `239.609px` → `224.766px` + - **rect**: `58,17 240x30` → `51,17 225x30` + +### `body > main:1 > header:1 > div:3 > div:4 > button:1` — "RU" - **letterSpacing**: `0.6px` → `normal` - - **rect**: `1349,19 32x25` → `1352,20 29x24` + - **width**: `31.2031px` → `29px` + - **height**: `25px` → `24px` + - **rect**: `1313,19 31x25` → `1165,20 29x24` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools" - - **rect**: `98,23 118x18` → `98,23 108x17` - -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)` — "RU" +### `body > main:1 > header:1 > div:3 > div:4 > button:3` — "EN" - **letterSpacing**: `0.6px` → `normal` + - **width**: `31.2031px` → `29px` + - **height**: `25px` → `24px` + - **rect**: `1350,19 31x25` → `1199,20 29x24` -### Только у нас +### `body > main:1 > header:1 > a:1 > span:1` — "EP" + - **borderTopColor**: `rgb(255, 255, 255)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `58,17 30x30` → `51,17 30x30` -- `/ TOOLS / LINEAR-GRADIENT-PNG` -- `STEPS` -- `Pipeline` -- `AUTO` -- `01` -- `generate` -- `Create gradient PNG` -- `Width` -- `Height` -- `Start color` -- `End color` -- `Direction` -- `Horizontal` -- `Vertical` -- `Add step` -- `Split PNG into HSL` -- `Split PNG into HSV` -- `Split PNG into HSI` -- `Convert PNG to CMYK Colors` -- `Convert PNG to YCbCr Colors` -- `Convert PNG to LAB Colors` -- `Show Transparent Areas PNG` -- `Show Grayscale Pixels PNG` -- `Show Color Pixels PNG` -- `Light Pixel Mask PNG` -- `Dark Pixel Mask PNG` -- `Unique Color Mask PNG` -- `Convert JPG to PNG` -- `Convert WebP to PNG` -- `Convert GIF to PNG` -- `Convert BMP to PNG` -- `Convert ICO to PNG` -- `Convert PNG to BMP` -- `Resize PNG` -- `Crop PNG` -- `Rotate PNG` -- `Flip PNG` -- `Add padding to PNG` -- `Add border to PNG` -- `Fit PNG onto background` -- `Tile PNG` -- `Circle Mask PNG` -- `Square Mask PNG` -- `Star Mask PNG` -- `Wavy Mask PNG` -- `Center PNG by content` -- `Blur PNG` -- `Sharpen PNG` -- `Grayscale PNG` -- `Invert colors PNG` -- `Brightness & contrast PNG` -- `Change PNG opacity` -- `Sepia effect` -- `Change hue PNG` -- `Extract channel PNG` -- `Swap channels PNG` -- `Black & white threshold PNG` -- `Posterize PNG` -- `Two colors PNG` -- `Convert PNG to JPG` +### Структурные расхождения -### Только в рефе - -- `/ - GRADIENT` -- `/` -- `Gradient background.` -- `Create a clean, export-ready gradient wi` -- `GRADIENT SETTINGS` -- `Configure output` -- `TOOL 01` -- `GRADIENT TYPE` -- `Linear` -- `Radial` -- `COLOR STOPS` -- `→` -- `135 - °` -- `0° →` -- `45° ↗` -- `90° ↑` -- `135° ↖` -- `180° ←` -- `225° ↙` -- `270° ↓` -- `315° ↘` -- `100 - %` -- `OUTPUT PREVIEW` -- `gradient.png` -- `PNG` -- `GENERATED CSS` -- `background: linear-gradient(135deg, #176` -- `v2.4.0` -- `gradient tool · local-only` -- `© 2024` +_—_ ## /preview/tools/remove-background-png (vs background-remover.html) - Токены light: **10**, dark: **16** -- Элементы: **8**, только у нас: 110, только в рефе: 28 +- Стиль-расхождений: **108** элементов / **965** полей (из них геометрия: 108) +- Структурные: +0 / -0 / tag 0 / text 0 ### Токены — Light @@ -832,136 +4175,1189 @@ _2026-08-28T15:27:27.893Z_ | `--radius-lg` | — | .5rem | | `--text-sm` | — | .875rem | -### Расхождения элементов (топ 8) +### Расхождения стилей (топ 108) -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)` — "Background remover" - - **fontSize**: `12px` → `10px` +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:2` — "Download result" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `11px` + - **color**: `rgb(0, 0, 0)` → `rgb(255, 255, 255)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgb(23, 105, 210)` + - **display**: `inline-block` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `center` + - **gap**: `normal` → `9px` + - **padding**: `1px 6px` → `0px` + - **margin**: `0px` → `18px 0px 0px` + - **borderTopWidth**: `2px` → `0px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(255, 255, 255)` + - **borderTopStyle**: `outset` → `none` + - **width**: `131.828px` → `193.203px` + - **height**: `25px` → `42px` + - **rect**: `96,624 132x25` → `1015,379 193x42` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > label:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `318px` + - **height**: `auto` → `18px` + - **rect**: `0,417 148x20` → `72,662 318x18` + +### `body > main:1 > div:2 > div:3 > section:1 > div:5 > label:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `318px` + - **height**: `auto` → `18px` + - **rect**: `0,497 93x20` → `72,755 318x18` + +### `body > main:1 > div:2 > div:3 > section:1 > div:6 > button:1` — "Reset" + - **fontSize**: `13.3333px` → `12px` + - **lineHeight**: `normal` → `18px` + - **color**: `rgb(0, 0, 0)` → `rgb(23, 105, 210)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `7px` + - **padding**: `1px 6px` → `0px` + - **borderTopWidth**: `2px` → `0px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(23, 105, 210)` + - **borderTopStyle**: `outset` → `none` + - **width**: `67.2969px` → `52.3594px` + - **height**: `24px` → `18px` + - **rect**: `0,576 67x24` → `72,842 52x18` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > label:1` — "BACKGROUND COLOR" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `flex` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `318px` + - **height**: `auto` → `12px` + - **rect**: `0,293 159x20` → `72,424 318x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > div:3` — "sampled from image background" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `block` → `flex` + - **justifyContent**: `normal` → `flex-start` + - **gap**: `normal` → `8px` + - **margin**: `0px` → `10px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `318px` + - **height**: `24px` → `12px` + - **rect**: `0,343 1440x24` → `72,490 318x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > label:1` — "COLOR SIMILARITY" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `flex` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `0px 0px 12px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `318px` + - **height**: `auto` → `12px` + - **rect**: `0,369 184x20` → `72,547 318x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > label:1 > b:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(23, 105, 210)` + - **display**: `inline` → `block` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `32px` + - **height**: `auto` → `18px` + - **rect**: `148,417 0x20` → `358,662 32x18` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:2 > div:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `14px` + - **fontWeight**: `400` → `600` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgba(255, 255, 255, 0.85)` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `center` + - **gridTemplateColumns**: `none` → `258.109px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `258.109px` + - **height**: `24px` → `259.75px` + - **rect**: `0,673 1440x24` → `528,538 271x273` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:2 > div:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `14px` + - **fontWeight**: `400` → `600` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgba(255, 255, 255, 0.85)` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `center` + - **gridTemplateColumns**: `none` → `258.109px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `258.109px` + - **height**: `24px` → `259.75px` + - **rect**: `0,745 1440x24` → `903,545 258x260` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `block` → `flex` + - **gap**: `normal` → `24px` + - **padding**: `0px` → `16px 20px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `759.625px` + - **height**: `24px` → `45px` + - **rect**: `0,793 1440x24` → `468,886 760x45` + +### `body > main:1 > div:2 > div:2 > span:2` — "LIVE PREVIEW" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(37, 169, 106)` + - **display**: `inline` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `8px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `79.9844px` + - **height**: `auto` → `12px` + - **rect**: `0,221 106x20` → `1149,258 80x12` + +### `body > main:1 > div:2 > div:2 > span:2 > i:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(37, 169, 106)` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(37, 169, 106)` + - **display**: `inline` → `block` + - **borderRadius**: `0px` → `50%` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `6px` + - **height**: `auto` → `6px` + - **rect**: `0,221 0x20` → `1149,261 6x6` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2 > input:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `11px` + - **color**: `rgb(0, 0, 0)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(255, 255, 255)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 2px` → `0px` + - **borderTopWidth**: `2px` → `0px` + - **borderTopColor**: `rgb(118, 118, 118)` → `rgb(23, 33, 43)` + - **borderTopStyle**: `inset` → `none` + - **width**: `157px` → `135px` + - **height**: `24px` → `13px` + - **rect**: `0,319 157x24` → `103,458 135x13` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:3` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `block` → `flex` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `10px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `318px` + - **height**: `24px` → `12px` + - **rect**: `0,391 1440x24` → `72,605 318x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:5 > label:1 > b:2` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `32px` + - **height**: `auto` → `18px` + - **rect**: `93,497 0x20` → `358,755 32x18` + +### `body > main:1 > div:2 > div:3 > section:1 > div:6 > span:2` — "updates automatically" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `11px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `8px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `141.016px` + - **height**: `auto` → `13px` + - **rect**: `71,577 159x20` → `249,845 141x13` + +### `body > main:1 > div:2 > div:3 > section:1 > div:6 > span:2 > i:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `11px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(37, 169, 106)` + - **display**: `inline` → `block` + - **borderRadius**: `0px` → `50%` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `6px` + - **height**: `auto` → `6px` + - **rect**: `71,577 0x20` → `249,848 6x6` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > span:1` — "processed" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(37, 169, 106)` + - **display**: `inline` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `5px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `68.4844px` + - **height**: `auto` → `14px` + - **rect**: `0,626 92x20` → `1139,337 68x14` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `block` → `flex` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `0px 0px 10px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `350.812px` + - **height**: `24px` → `12px` + - **rect**: `0,649 1440x24` → `488,460 351x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `block` → `flex` + - **justifyContent**: `normal` → `space-between` + - **margin**: `0px` → `0px 0px 10px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `350.812px` + - **height**: `24px` → `12px` + - **rect**: `0,721 1440x24` → `857,460 351x12` + +### `body > main:1 > div:2 > div:1` — "PNG PROCESSING SINGLE TOOL" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **margin**: `0px` → `0px 0px 18px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1177.62px` + - **height**: `24px` → `12px` + - **rect**: `0,64 1440x24` → `51,124 1178x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1 > strong:2` — "Configure detection" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `14px` + - **fontWeight**: `700` → `600` + - **lineHeight**: `24px` → `normal` + - **display**: `inline` → `block` + - **margin**: `0px` → `5px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `146.25px` + - **height**: `auto` → `17px` + - **rect**: `156,245 148x20` → `72,366 146x17` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1 > span:2` — "TOOL 02" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `46.8906px` + - **height**: `auto` → `12px` + - **rect**: `0,269 62x20` → `343,354 47x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2 > input:3` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `11px` + - **color**: `rgb(0, 0, 0)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(240, 240, 240)` → `rgba(0, 0, 0, 0)` + - **display**: `inline-block` → `block` + - **padding**: `1px 2px` → `0px` + - **borderTopWidth**: `1px` → `0px` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(23, 33, 43)` + - **borderTopStyle**: `solid` → `none` + - **width**: `50px` → `135px` + - **rect**: `161,315 50x27` → `246,451 135x27` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > div:3 > span:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `9px` + - **height**: `auto` → `9px` + - **rect**: `0,345 0x20` → `72,490 9x9` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > label:1 > output:1` — "72 %" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `26px` + - **height**: `auto` → `12px` + - **rect**: `147,369 38x20` → `364,547 26x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > label:1 > span:1` — "OUTER COLOR ONLY" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `103.969px` + - **height**: `auto` → `12px` + - **rect**: `0,417 148x20` → `72,665 104x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:5 > label:1 > span:1` — "SHOW MASK" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `58.4844px` + - **height**: `auto` → `12px` + - **rect**: `0,497 93x20` → `72,758 58x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1 > strong:2` — "comparison.png" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `14px` + - **fontWeight**: `700` → `600` + - **lineHeight**: `24px` → `normal` + - **display**: `inline` → `block` + - **margin**: `0px` → `5px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `107.766px` + - **height**: `auto` → `17px` + - **rect**: `134,602 121x20` → `488,385 108x17` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:1 > b:2` — "original.png" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **fontWeight**: `700` → `400` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `65.9844px` + - **height**: `auto` → `12px` + - **rect**: `61,651 90x20` → `773,460 66x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:2 > div:1 > span:1` — "OBJECT" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `14px` + - **fontWeight**: `400` → `600` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgba(255, 255, 255, 0.85)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `46.1875px` + - **height**: `auto` → `17px` + - **rect**: `0,675 58x20` → `640,665 47x19` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:1 > b:2` — "removed-bg.png" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **fontWeight**: `700` → `400` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `76.9844px` + - **height**: `auto` → `12px` + - **rect**: `56,723 124x20` → `1131,460 77x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:2 > div:1 > span:1` — "PNG" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `14px` + - **fontWeight**: `400` → `600` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgba(255, 255, 255, 0.85)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `23.0938px` + - **height**: `auto` → `17px` + - **rect**: `0,747 32x20` → `1021,666 23x17` + +### `body > main:1 > div:2 > div:2` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `end` + - **justifyContent**: `normal` → `space-between` + - **gap**: `normal` → `32px` + - **margin**: `0px` → `0px 0px 48px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1177.62px` + - **height**: `133.438px` → `116.391px` + - **rect**: `0,109 1440x133` → `51,154 1178x116` + +### `body > main:1 > div:2 > div:2 > div:1 > h1:1` — "Remove background." + - **fontSize**: `32px` → `51.2px` + - **fontWeight**: `700` → `650` + - **lineHeight**: `48px` → `51.2px` + - **letterSpacing**: `normal` → `-3.072px` + - **margin**: `21.44px 0px` → `0px 0px 14px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `550px` + - **height**: `48px` → `51.2031px` + - **rect**: `0,109 1440x48` → `51,154 550x51` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `8px` + - **padding**: `0px` → `0px 8px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `318px` + - **height**: `28px` → `32px` + - **rect**: `0,315 1440x28` → `72,448 318x32` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:3 > span:1` — "strict edges" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `65.9844px` + - **height**: `auto` → `12px` + - **rect**: `0,393 84x20` → `72,605 66x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > div:3 > span:2` — "more removal" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `65.9844px` + - **height**: `auto` → `12px` + - **rect**: `87,393 99x20` → `324,605 66x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:1 > span:1` — "SOURCE" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `33px` + - **height**: `auto` → `12px` + - **rect**: `0,651 61x20` → `488,460 33x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:2` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(232, 238, 242)` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `center` + - **gridTemplateColumns**: `none` → `348.812px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `350.812px` + - **height**: `48px` → `384px` + - **rect**: `0,673 1440x48` → `488,482 351x384` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1 > div:2 > span:2` — "1200 × 800" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `9px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `49.4844px` + - **height**: `auto` → `10px` + - **rect**: `0,699 84x20` → `779,846 49x10` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:1 > span:1` — "RESULT" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(23, 105, 210)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `33px` + - **height**: `auto` → `12px` + - **rect**: `0,723 56x20` → `857,460 33x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:2 > span:2` — "1200 × 800" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `9px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `49.4844px` + - **height**: `auto` → `10px` + - **rect**: `0,771 84x20` → `1147,846 49x10` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3 > span:1` — "FORMAT" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `77.5px` + - **height**: `auto` → `12px` + - **rect**: `0,795 125x20` → `488,903 78x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3 > span:2` — "ALPHA" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `77.5px` + - **height**: `auto` → `12px` + - **rect**: `129,795 126x20` → `590,903 78x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3 > span:3` — "SIMILARITY" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `88.4844px` + - **height**: `auto` → `12px` + - **rect**: `258,795 131x20` → `691,903 88x12` + +### `body > main:1 > header:1 > div:3 > div:4 > span:2` — "/" + - **fontFamily**: `"IBM Plex Mono", monospace` → `"IBM Plex Sans", sans-serif` + - **fontSize**: `10px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(109, 120, 131)` → `rgb(23, 33, 43)` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `6px` → `4.45312px` + - **height**: `13px` → `24px` + - **rect**: `1344,25 6x13` → `1194,20 4x24` + +### `body > main:1 > div:2 > div:1 > span:1` — "/" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **margin**: `0px` → `0px 7px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `137,66 6x20` → `159,124 13x12` + +### `body > main:1 > div:2 > div:3` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `start` + - **gap**: `normal` → `56px` + - **gridTemplateColumns**: `none` → `360px 761.625px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1177.62px` + - **height**: `574px` → `614px` + - **rect**: `0,243 1440x574` → `51,318 1178x614` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `space-between` + - **padding**: `0px` → `18px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `358px` + - **height**: `48px` → `83px` + - **rect**: `0,243 1440x48` → `52,319 358x83` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4 > p:2` — "Only remove connected background pixels from the edges." + - **fontSize**: `16px` → `12px` + - **lineHeight**: `24px` → `18px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **margin**: `16px 0px` → `8px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `318px` + - **height**: `24px` → `18px` + - **rect**: `0,455 1440x24` → `72,692 318x18` + +### `body > main:1 > div:2 > div:3 > section:1 > div:5 > p:2` — "Preview the detected transparency mask." + - **fontSize**: `16px` → `12px` + - **lineHeight**: `24px` → `18px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **margin**: `16px 0px` → `8px 0px 0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `318px` + - **height**: `24px` → `18px` + - **rect**: `0,535 1440x24` → `72,785 318x18` + +### `body > main:1 > div:2 > div:3 > section:1 > div:6` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `space-between` + - **padding**: `0px` → `16px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `358px` + - **height**: `25px` → `50px` + - **rect**: `0,575 1440x25` → `52,826 358x50` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `space-between` + - **padding**: `0px` → `18px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `759.625px` + - **height**: `49px` → `121px` + - **rect**: `0,600 1440x49` → `468,319 760x121` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **justifyContent**: `normal` → `flex-end` + - **gap**: `normal` → `10px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `193.203px` + - **height**: `25px` → `84px` + - **rect**: `0,624 1440x25` → `1015,337 193x84` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2` + - **display**: `block` → `grid` + - **gap**: `normal` → `18px` + - **gridTemplateColumns**: `none` → `350.812px 350.812px` + - **padding**: `0px` → `20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `759.625px` + - **height**: `144px` → `446px` + - **rect**: `0,649 1440x144` → `468,440 760x446` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2 > div:2` + - **display**: `block` → `grid` + - **alignItems**: `normal` → `center` + - **gridTemplateColumns**: `none` → `348.812px` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `350.812px` + - **height**: `48px` → `384px` + - **rect**: `0,745 1440x48` → `857,482 351x384` + +### `body > main:1 > footer:3 > span:1` — "easy-png-tools" + - **letterSpacing**: `0.8px` → `normal` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `7px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `142.812px` → `116.984px` + - **height**: `13px` → `12px` + - **rect**: `58,834 143x13` → `51,1021 117x12` + +### `body > main:1 > footer:3 > span:1 > b:1` — "v2.4.0" + - **fontWeight**: `700` → `400` + - **letterSpacing**: `0.8px` → `normal` - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)` - - **letterSpacing**: `0.48px` → `normal` - - **rect**: `841,24 138x15` → `978,26 99x12` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `33px` + - **height**: `auto` → `12px` + - **rect**: `160,834 41x13` → `135,1021 33x12` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)` — "Workspace" +### `body > main:1 > footer:3 > span:2` — "background remover · local-only" + - **letterSpacing**: `0.8px` → `normal` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `7px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `210.812px` → `170.453px` + - **height**: `13px` → `12px` + - **rect**: `666,834 211x13` → `597,1021 170x12` + +### `body > main:1 > footer:3 > span:3` — "© 2024" + - **letterSpacing**: `0.8px` → `normal` + - **display**: `block` → `flex` + - **alignItems**: `normal` → `center` + - **gap**: `normal` → `7px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `40.8125px` → `33px` + - **height**: `13px` → `12px` + - **rect**: `1342,834 41x13` → `1196,1021 33x12` + +### `body > main:1 > header:1 > nav:2 > a:4` — "Background remover" - **fontSize**: `12px` → `10px` - **letterSpacing**: `0.48px` → `normal` - - **rect**: `603,24 69x15` → `780,26 49x12` + - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `138.25px` → `98.9688px` + - **height**: `15px` → `12px` + - **rect**: `792,24 138x15` → `824,26 99x12` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)` — "Catalog" +### `body > main:1 > header:1 > div:3 > button:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `grid` + - **justifyContent**: `center` → `normal` + - **gridTemplateColumns**: `none` → `17px` + - **width**: `28px` → `29px` + - **height**: `28px` → `29px` + - **rect**: `1224,18 28x28` → `1074,17 29x29` + +### `body > main:1 > header:1 > div:3 > button:3` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **display**: `flex` → `grid` + - **justifyContent**: `center` → `normal` + - **gridTemplateColumns**: `none` → `17px` + - **width**: `28px` → `29px` + - **height**: `28px` → `29px` + - **rect**: `1268,18 28x28` → `1119,17 29x29` + +### `body > main:1 > div:2 > div:2 > div:1 > p:2` — "Select a background color and tune the edge detection. Changes are processed automatically in your browser." + - **lineHeight**: `24px` → `25.6px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **margin**: `16px 0px` → `0px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `550px` + - **height**: `24px` → `51.1875px` + - **rect**: `0,179 1440x24` → `51,219 550x51` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1 > span:1` — "REMOVER SETTINGS" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `0,245 152x20` → `72,345 107x12` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3 > input:2` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **color**: `rgb(16, 16, 16)` → `rgb(23, 33, 43)` + - **backgroundColor**: `rgb(255, 255, 255)` → `rgba(0, 0, 0, 0)` + - **margin**: `2px` → `0px` + - **borderTopColor**: `rgb(16, 16, 16)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `190,369 129x16` → `72,572 129x16` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1 > span:1` — "SOURCE / RESULT" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **letterSpacing**: `normal` → `1.2px` + - **color**: `rgb(23, 33, 43)` → `rgb(109, 120, 131)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `0,602 130x20` → `488,364 100x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > span:1 > svg:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **lineHeight**: `24px` → `normal` + - **color**: `rgb(23, 33, 43)` → `rgb(37, 169, 106)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `0,628 14x14` → `1139,337 14x14` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3 > span:1 > b:1` — "PNG-24" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **fontWeight**: `700` → `600` + - **lineHeight**: `24px` → `normal` + - **margin**: `0px` → `0px 0px 0px 6px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `65,795 59x20` → `533,903 33x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3 > span:2 > b:1` — "ENABLED" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **fontWeight**: `700` → `600` + - **lineHeight**: `24px` → `normal` + - **margin**: `0px` → `0px 0px 0px 6px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `182,795 72x20` → `629,903 39x12` + +### `body > main:1 > div:2 > div:3 > section:2 > div:3 > span:3 > b:1` — "72 %" + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `16px` → `10px` + - **fontWeight**: `700` → `600` + - **lineHeight**: `24px` → `normal` + - **margin**: `0px` → `0px 0px 0px 6px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `351,795 39x20` → `758,903 22x12` + +### `body > main:1 > header:1 > nav:2` + - **gap**: `18px` → `22px` + - **margin**: `0px 0px 0px 24px` → `0px 28px 0px 283px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `376.594px` → `296.938px` + - **height**: `15px` → `12px` + - **rect**: `554,24 377x15` → `626,26 297x12` + +### `body > main:1 > header:1 > nav:2 > a:1` — "Workspace" - **fontSize**: `12px` → `10px` - **letterSpacing**: `0.48px` → `normal` - - **rect**: `690,24 54x15` → `851,26 39x12` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `69.125px` → `49.4844px` + - **height**: `15px` → `12px` + - **rect**: `554,24 69x15` → `626,26 49x12` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)` — "Gradient" +### `body > main:1 > header:1 > nav:2 > a:2` — "Catalog" - **fontSize**: `12px` → `10px` - **letterSpacing**: `0.48px` → `normal` - - **rect**: `762,24 61x15` → `912,26 44x12` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `53.7656px` → `38.5px` + - **height**: `15px` → `12px` + - **rect**: `641,24 54x15` → `697,26 39x12` -### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>section:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "RESULT" - - **letterSpacing**: `1px` → `normal` - - **lineHeight**: `12px` → `normal` - - **rect**: `726,125 108x12` → `954,467 33x12` +### `body > main:1 > header:1 > nav:2 > a:3` — "Gradient" + - **fontSize**: `12px` → `10px` + - **letterSpacing**: `0.48px` → `normal` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `61.4531px` → `43.9844px` + - **height**: `15px` → `12px` + - **rect**: `713,24 61x15` → `758,26 44x12` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)` — "EN" +### `body > main:1 > header:1 > div:3 > button:2 > svg:1` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `16px` → `17px` + - **height**: `16px` → `17px` + - **rect**: `1230,24 16x16` → `1080,23 17x17` + +### `body > main:1 > header:1 > div:3 > button:3 > svg:1` + - **fontSize**: `13.3333px` → `16px` + - **lineHeight**: `normal` → `24px` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `16px` → `17px` + - **height**: `16px` → `17px` + - **rect**: `1274,24 16x16` → `1125,23 17x17` + +### `body > main:1 > div:2 > div:3 > section:1` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(248, 250, 251)` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `360px` + - **height**: `357px` → `559px` + - **rect**: `0,243 1440x357` → `51,318 360x559` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2 > div:2 > span:1` + - **display**: `inline` → `block` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `auto` → `14px` + - **height**: `auto` → `14px` + - **rect**: `0,320 0x20` → `81,457 14x14` + +### `body > main:1 > div:2 > div:3 > section:1 > div:6 > button:1 > svg:1` + - **fontSize**: `13.3333px` → `12px` + - **lineHeight**: `normal` → `18px` + - **color**: `rgb(0, 0, 0)` → `rgb(23, 105, 210)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `8,579 14x14` → `72,844 14x14` + +### `body > main:1 > div:2 > div:3 > section:2` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(248, 250, 251)` + - **borderTopWidth**: `0px` → `1px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `761.625px` + - **height**: `217px` → `614px` + - **rect**: `0,600 1440x217` → `467,318 762x614` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:2 > button:2 > svg:1` + - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace` + - **fontSize**: `13.3333px` → `11px` + - **color**: `rgb(0, 0, 0)` → `rgb(255, 255, 255)` + - **display**: `inline` → `block` + - **borderTopColor**: `rgb(0, 0, 0)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `104,627 15x15` → `1054,393 15x15` + +### `body > main:1` + - **backgroundColor**: `rgba(0, 0, 0, 0)` → `rgb(238, 241, 244)` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `862.875px` → `1049.39px` + - **rect**: `0,0 1440x863` → `0,0 1280x1049` + +### `body > main:1 > header:1 > div:3 > span:1 > i:1` + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `8px` → `6px` + - **height**: `8px` → `6px` + - **boxShadow**: `color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px` → `none` + - **rect**: `1091,28 8x8` → `951,29 6x6` + +### `body > main:1 > div:2` + - **padding**: `0px` → `60px 51.2px 72px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `752.875px` → `940.391px` + - **rect**: `0,64 1440x753` → `0,64 1280x940` + +### `body > main:1 > div:2 > div:3 > section:1 > div:2` + - **padding**: `0px` → `22px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `358px` + - **height**: `76px` → `123px` + - **rect**: `0,291 1440x76` → `52,402 358x123` + +### `body > main:1 > div:2 > div:3 > section:1 > div:3` + - **padding**: `0px` → `22px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `358px` + - **height**: `48px` → `115px` + - **rect**: `0,367 1440x48` → `52,525 358x115` + +### `body > main:1 > div:2 > div:3 > section:1 > div:4` + - **padding**: `0px` → `22px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `358px` + - **height**: `64px` → `93px` + - **rect**: `0,415 1440x64` → `52,640 358x93` + +### `body > main:1 > div:2 > div:3 > section:1 > div:5` + - **padding**: `0px` → `22px 20px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `358px` + - **height**: `64px` → `93px` + - **rect**: `0,495 1440x64` → `52,733 358x93` + +### `body > main:1 > footer:3` + - **letterSpacing**: `0.8px` → `normal` + - **gap**: `16px` → `normal` + - **padding**: `16px 57.6px` → `16px 51.2px` + - **width**: `1440px` → `1280px` + - **height**: `46px` → `45px` + - **rect**: `0,817 1440x46` → `0,1004 1280x45` + +### `body` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **height**: `862.875px` → `1049.39px` + - **rect**: `0,0 1440x863` → `0,0 1280x1049` + +### `body > main:1 > header:1` + - **padding**: `0px 57.6px` → `0px 51.2px` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `1280px` + - **rect**: `0,0 1440x64` → `0,0 1280x64` + +### `body > main:1 > header:1 > a:1 > span:2` — "easy-png-tools" + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `117.609px` → `107.766px` + - **height**: `18px` → `17px` + - **rect**: `98,23 118x18` → `91,23 108x17` + +### `body > main:1 > header:1 > a:1 > span:3` — "/ BACKGROUND REMOVER" + - **borderTopColor**: `rgb(23, 105, 210)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `144px` → `133.984px` + - **height**: `13px` → `12px` + - **rect**: `225,25 144x13` → `209,26 134x12` + +### `body > main:1 > header:1 > div:3` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `291.406px` → `277.938px` + - **height**: `28px` → `29px` + - **rect**: `1091,18 291x28` → `951,17 278x29` + +### `body > main:1 > header:1 > div:3 > span:1` — "AUTO PROCESSING" + - **borderTopColor**: `rgb(109, 120, 131)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `117px` → `107.484px` + - **height**: `13px` → `12px` + - **rect**: `1091,25 117x13` → `951,26 107x12` + +### `body > main:1 > header:1 > div:3 > div:4` + - **alignItems**: `normal` → `center` + - **borderRadius**: `4px` → `0px` + - **width**: `70.4062px` → `64.4531px` + - **height**: `27px` → `26px` + - **rect**: `1312,18 70x27` → `1164,19 64x26` + +### `body > main:1 > div:2 > div:2 > div:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `550px` + - **height**: `93.4375px` → `116.391px` + - **rect**: `0,109 1440x93` → `51,154 550x116` + +### `body > main:1 > div:2 > div:3 > section:1 > div:1 > div:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `146.25px` + - **height**: `24px` → `46px` + - **rect**: `0,243 1440x24` → `72,337 146x46` + +### `body > main:1 > div:2 > div:3 > section:2 > div:1 > div:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `107.766px` + - **height**: `24px` → `46px` + - **rect**: `0,600 1440x24` → `488,356 108x46` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `350.812px` + - **height**: `72px` → `406px` + - **rect**: `0,649 1440x72` → `488,460 351x406` + +### `body > main:1 > div:2 > div:3 > section:2 > div:2 > div:2` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `1440px` → `350.812px` + - **height**: `72px` → `406px` + - **rect**: `0,721 1440x72` → `857,460 351x406` + +### `body > main:1 > header:1 > a:1` + - **borderTopColor**: `rgb(23, 33, 43)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **width**: `311.609px` → `291.75px` + - **rect**: `58,17 312x30` → `51,17 292x30` + +### `body > main:1 > header:1 > div:3 > div:4 > button:1` — "RU" - **letterSpacing**: `0.6px` → `normal` - - **rect**: `1349,19 32x25` → `1352,20 29x24` + - **width**: `31.2031px` → `29px` + - **height**: `25px` → `24px` + - **rect**: `1313,19 31x25` → `1165,20 29x24` -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools" - - **rect**: `98,23 118x18` → `98,23 108x17` - -### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)` — "RU" +### `body > main:1 > header:1 > div:3 > div:4 > button:3` — "EN" - **letterSpacing**: `0.6px` → `normal` + - **width**: `31.2031px` → `29px` + - **height**: `25px` → `24px` + - **rect**: `1350,19 31x25` → `1199,20 29x24` -### Только у нас +### `body > main:1 > header:1 > a:1 > span:1` — "EP" + - **borderTopColor**: `rgb(255, 255, 255)` → `rgb(203, 211, 218)` + - **borderTopStyle**: `none` → `solid` + - **rect**: `58,17 30x30` → `51,17 30x30` -- `/ TOOLS / REMOVE-BACKGROUND-PNG` -- `STEPS` -- `Pipeline` -- `AUTO` -- `01` -- `alpha` -- `Remove background PNG (smart)` -- `Background color` -- `Similarity tolerance, %` -- `10` -- `Outer regions only` -- `Edge smoothing, passes` -- `1` -- `Add step` -- `Split PNG into HSL` -- `Split PNG into HSV` -- `Split PNG into HSI` -- `Convert PNG to CMYK Colors` -- `Convert PNG to YCbCr Colors` -- `Convert PNG to LAB Colors` -- `Show Transparent Areas PNG` -- `Show Grayscale Pixels PNG` -- `Show Color Pixels PNG` -- `Light Pixel Mask PNG` -- `Dark Pixel Mask PNG` -- `Unique Color Mask PNG` -- `Convert JPG to PNG` -- `Convert WebP to PNG` -- `Convert GIF to PNG` -- `Convert BMP to PNG` -- `Convert ICO to PNG` -- `Convert PNG to BMP` -- `Resize PNG` -- `Crop PNG` -- `Rotate PNG` -- `Flip PNG` -- `Add padding to PNG` -- `Add border to PNG` -- `Fit PNG onto background` -- `Tile PNG` -- `Circle Mask PNG` -- `Square Mask PNG` -- `Star Mask PNG` -- `Wavy Mask PNG` -- `Center PNG by content` -- `Blur PNG` -- `Sharpen PNG` -- `Grayscale PNG` -- `Invert colors PNG` -- `Brightness & contrast PNG` -- `Change PNG opacity` -- `Sepia effect` -- `Change hue PNG` -- `Extract channel PNG` -- `Swap channels PNG` -- `Black & white threshold PNG` -- `Posterize PNG` -- `Two colors PNG` -- `Convert PNG to JPG` -- `Convert PNG to WebP` +### Структурные расхождения -### Только в рефе - -- `/ - BACKGROUND REMOVER` -- `/` -- `Remove background.` -- `Select a background color and tune the e` -- `REMOVER SETTINGS` -- `Configure detection` -- `TOOL 02` -- `BACKGROUND COLOR` -- `72 - %` -- `strict edges` -- `more removal` -- `OUTER COLOR ONLY` -- `Only remove connected background pixels ` -- `SHOW MASK` -- `Preview the detected transparency mask.` -- `SOURCE / RESULT` -- `comparison.png` -- `SOURCE` -- `original.png` -- `OBJECT` -- `1200 × 800` -- `removed-bg.png` -- `PNG` -- `PNG-24` -- `ENABLED` -- `v2.4.0` -- `background remover · local-only` -- `© 2024` +_—_ diff --git a/web/package.json b/web/package.json index aba6f5b..d75b91b 100644 --- a/web/package.json +++ b/web/package.json @@ -13,7 +13,7 @@ "test": "vitest run", "format": "prettier --write .", "lint": "eslint .", - "refs-audit": "node scripts/audit.mjs", + "refs-css-audit": "node scripts/audit-css.mjs", "refs-dom-audit": "node scripts/audit-dom.mjs" }, "devDependencies": { diff --git a/web/scripts/audit-css.mjs b/web/scripts/audit-css.mjs new file mode 100644 index 0000000..3d85ee3 --- /dev/null +++ b/web/scripts/audit-css.mjs @@ -0,0 +1,502 @@ +// Фаза B: CSS/визуальный аудит. Для каждого preview-маршрута снимает +// нормализованное дерево элементов с ВЫЧИСЛЕННЫМИ стилями (и геометрией) +// нашей страницы и соответствующего refs-html файла, выравнивает деревья +// по структуре (как в audit-dom — теги нормализованы, классы игнорируются, +// матчинг по ключу), и для совпавших узлов сравнивает стили + rect. +// Дополнительно сравнивает design-токены (CSS-переменные) light/dark. +// Запуск: pnpm refs-audit (опции: --route --ref --no-serve --ours ) +import { chromium } from "playwright"; +import { spawn } from "node:child_process"; +import { writeFileSync, mkdirSync, readdirSync } from "node:fs"; +import { resolve, join } from "node:path"; + +const args = (() => { + const a = {}; + for (let i = 0; i < process.argv.length; i++) { + const v = process.argv[i]; + if (v === "--no-serve") a.noServe = true; + else if (v === "--ours") a.ours = process.argv[++i]; + else if (v === "--ref") a.ref = process.argv[++i]; + else if (v === "--route") a.route = process.argv[++i]; + } + return a; +})(); + +const WEB = process.cwd(); +const PORT = 5179; +const REFS_DIR = resolve(WEB, "../refs-html"); + +// Поля вычисленного стиля, которые сравниваем (визуально значимые). +const STYLE_FIELDS = [ + "fontFamily", + "fontSize", + "fontWeight", + "fontStyle", + "lineHeight", + "letterSpacing", + "textAlign", + "textTransform", + "color", + "backgroundColor", + "display", + "flexDirection", + "alignItems", + "justifyContent", + "gap", + "gridTemplateColumns", + "padding", + "margin", + "borderRadius", + "borderTopWidth", + "borderTopColor", + "borderTopStyle", + "width", + "height", + "boxShadow", + "opacity", +]; + +// Динамические сегменты: явный список значений + сопоставление id → файл рефа. +const DYNAMIC = { + "tools/[id]": { + ids: ["linear-gradient-png", "remove-background-png"], + refFor: (id) => + id === "linear-gradient-png" + ? "gradient.html" + : id === "remove-background-png" + ? "background-remover.html" + : null, + }, +}; + +const EXCLUDE = new Set(["/preview"]); +const refNameFor = (route) => { + if (route === "/preview") return "index.html"; + const last = route.split("/").filter(Boolean).pop(); + return `${last}.html`; +}; + +function discoverRoutes() { + const base = resolve(WEB, "src/routes/preview"); + const out = []; + const walk = (dir) => { + let ents; + try { + ents = readdirSync(dir, { withFileTypes: true }); + } catch { + return; + } + for (const e of ents) { + const p = join(dir, e.name); + if (e.isDirectory()) walk(p); + else if (e.name === "+page.svelte") { + const rel = p.slice(base.length).replace(/\\/g, "/"); + const parts = rel.split("/").filter(Boolean); + parts.pop(); + out.push(parts.length ? `/preview/${parts.join("/")}` : "/preview"); + } + } + }; + walk(base); + return out; +} + +function refsList() { + try { + return readdirSync(REFS_DIR).filter((f) => f.endsWith(".html")); + } catch { + return []; + } +} +const refExists = (name) => refsList().includes(name); + +function buildTargets() { + if (args.route) { + const ref = args.ref || refNameFor(args.route); + return [{ route: args.route, ref }]; + } + const targets = []; + const seen = new Set(); + const add = (route, ref) => { + if (!ref || seen.has(route)) return; + if (!refExists(ref)) { + console.warn(`[css-audit] ref not found, skipped: ${route} -> ${ref}`); + return; + } + seen.add(route); + targets.push({ route, ref }); + }; + for (const route of discoverRoutes()) { + if (route.includes("[")) continue; + if (EXCLUDE.has(route)) { + console.log(`[css-audit] excluded (no relevant ref): ${route}`); + continue; + } + add(route, refNameFor(route)); + } + for (const [seg, cfg] of Object.entries(DYNAMIC)) { + for (const id of cfg.ids) { + add(`/preview/${seg.replace("[id]", id)}`, cfg.refFor(id)); + } + } + const routed = new Set(targets.map((t) => t.ref)); + for (const f of refsList()) { + if (!routed.has(f)) console.warn(`[css-audit] ref без маршрута: ${f}`); + } + return targets; +} + +const waitFor = async (url, ms = 60000) => { + const t = Date.now(); + while (Date.now() - t < ms) { + try { + const r = await fetch(url); + if (r.ok) return; + if (r.status >= 400) { + throw new Error( + `route ${url} returned HTTP ${r.status} (server is up, page failed to render)`, + ); + } + } catch (e) { + if (e instanceof Error && e.message.includes("returned HTTP")) throw e; + } + await new Promise((r) => setTimeout(r, 500)); + } + throw new Error("dev server not up: " + url); +}; + +// Теги-обёртки нормализуем к "box", чтобы выравнивать по сути, а не по +// конкретному тегу (наш div/main vs рефовый div/main). Семантические — как есть. +const STRUCT_TAGS = new Set([ + "div", + "main", + "section", + "article", + "aside", + "ul", + "li", + "form", + "fieldset", +]); +const normTag = (tag) => (STRUCT_TAGS.has(tag) ? "box" : tag); +const keyOf = (n) => + n.children.length === 0 ? `${normTag(n.tag)}|${n.text}` : normTag(n.tag); + +const snapshot = (page) => + page.evaluate( + (styleFields) => { + const sig = (el) => { + const s = getComputedStyle(el); + const o = {}; + for (const f of styleFields) o[f] = s[f]; + return o; + }; + const rectOf = (el) => { + const r = el.getBoundingClientRect(); + return { + x: Math.round(r.x), + y: Math.round(r.y), + w: Math.round(r.width), + h: Math.round(r.height), + }; + }; + const readTokens = () => { + const s = getComputedStyle(document.documentElement); + const out = {}; + for (const k of s) if (k.startsWith("--")) out[k] = s.getPropertyValue(k).trim(); + return out; + }; + const tokensLight = readTokens(); + const prev = document.documentElement.getAttribute("data-theme"); + document.documentElement.setAttribute("data-theme", "dark"); + const tokensDark = readTokens(); + if (prev) document.documentElement.setAttribute("data-theme", prev); + else document.documentElement.removeAttribute("data-theme"); + + const walk = (el) => { + const tag = el.tagName.toLowerCase(); + if (["script", "style", "noscript", "template"].includes(tag)) return null; + if (el.id === "svelte-announcer") return null; + if (el.hasAttribute("hidden")) return null; + const cs = getComputedStyle(el); + if (cs.display === "none" || cs.visibility === "hidden") return null; + let ownText = ""; + for (const c of el.childNodes) + if (c.nodeType === 3) ownText += c.textContent; + ownText = ownText.replace(/\s+/g, " ").trim(); + const node = { + tag, + text: ownText, + style: sig(el), + rect: rectOf(el), + children: [], + }; + if (tag === "svg") return node; + for (const child of el.children) { + const cn = walk(child); + if (cn) node.children.push(cn); + } + return node; + }; + return { tokensLight, tokensDark, tree: walk(document.body) }; + }, + STYLE_FIELDS, + ); + +const TOK_NOISE = /^(--tw-|--lightningcss-|--default-)/; + +function compareStyle(ours, ref, path, out) { + if (!ours || !ref) return; + if (ours.tag !== ref.tag) { + out.push({ path, type: "tagMismatch", ours: ours.tag, ref: ref.tag }); + return; + } + if (ours.text && ref.text && ours.text !== ref.text) { + out.push({ path, type: "textMismatch", ours: ours.text, ref: ref.text }); + } + const deltas = {}; + for (const f of STYLE_FIELDS) { + const ov = (ours.style[f] ?? "").toString(); + const rv = (ref.style[f] ?? "").toString(); + if (ov !== rv) deltas[f] = { ours: ov, ref: rv }; + } + const dr = ours.rect; + const rr = ref.rect; + if ( + Math.abs(dr.x - rr.x) > 2 || + Math.abs(dr.y - rr.y) > 2 || + Math.abs(dr.w - rr.w) > 2 || + Math.abs(dr.h - rr.h) > 2 + ) + deltas.rect = { ours: dr, ref: rr }; + if (Object.keys(deltas).length) + out.push({ path, type: "style", tag: ours.tag, text: ours.text, deltas }); + + // Выравниваем детей по ключу (жадно), рекурсивно сравнивая стили. + const bByKey = new Map(); + ref.children.forEach((c, idx) => { + const k = keyOf(c); + if (!bByKey.has(k)) bByKey.set(k, []); + bByKey.get(k).push(idx); + }); + const used = new Set(); + for (let i = 0; i < ours.children.length; i++) { + const aNode = ours.children[i]; + const cands = bByKey.get(keyOf(aNode)); + let bIdx = -1; + if (cands) for (const ci of cands) if (!used.has(ci)) { bIdx = ci; break; } + if (bIdx >= 0) { + used.add(bIdx); + compareStyle(aNode, ref.children[bIdx], `${path} > ${aNode.tag}:${i + 1}`, out); + } else { + out.push({ path: `${path} > ${aNode.tag}:${i + 1}`, type: "added", tag: aNode.tag }); + } + } + for (let j = 0; j < ref.children.length; j++) { + if (used.has(j)) continue; + out.push({ + path: `${path} > ${ref.children[j].tag}:${j + 1}`, + type: "removed", + tag: ref.children[j].tag, + }); + } +} + +function tokDiff(a, b) { + const keys = new Set([...Object.keys(a), ...Object.keys(b)]); + const rows = []; + for (const k of keys) { + if (TOK_NOISE.test(k)) continue; + const av = a[k] ?? "—"; + const bv = b[k] ?? "—"; + if (av !== bv) rows.push({ key: k, ours: av, ref: bv }); + } + return rows; +} + +async function auditOne(browser, target) { + const oursUrl = args.ours || `http://127.0.0.1:${PORT}${target.route}`; + + const page = await browser.newPage({ + viewport: { width: 1440, height: 900 }, + deviceScaleFactor: 1, + }); + await page.goto(oursUrl, { waitUntil: "load" }); + await page.evaluate(() => document.fonts.ready); + // Рефы — только светлые; наше приложение по умолчанию может рендерить + // тёмную тему (app.html смотрит prefers-color-scheme). Нормализуем ОБЕ + // стороны к light, чтобы аудит мерил реальные расхождения дизайна, а не + // инверсию темы. + await page.evaluate(() => { + document.documentElement.dataset.theme = "light"; + }); + await page.waitForTimeout(500); + const ours = await snapshot(page); + await page.close(); + + // Реф грузим в ИЗОЛИРОВАННОМ контексте через goto(file://): переход + // http → file в одной странице уничтожает execution context и роняет прогон. + const refUrl = "file:///" + resolve(REFS_DIR, target.ref).replace(/\\/g, "/"); + const ctx = await browser.newContext(); + const refPage = await ctx.newPage(); + await refPage.goto(refUrl, { waitUntil: "load" }); + await refPage.evaluate(() => document.fonts.ready); + await refPage.evaluate(() => { + document.documentElement.dataset.theme = "light"; + }); + await refPage.waitForTimeout(400); + const ref = await snapshot(refPage); + await ctx.close(); + + const deltas = []; + compareStyle(ours.tree, ref.tree, "body", deltas); + const tokenDiffs = { + light: tokDiff(ours.tokensLight, ref.tokensLight), + dark: tokDiff(ours.tokensDark, ref.tokensDark), + }; + return { + route: target.route, + ref: target.ref, + deltas, + tokenDiffs, + counts: tally(deltas, tokenDiffs), + }; +} + +function tally(deltas, tokenDiffs) { + const c = { + tagMismatch: 0, + textMismatch: 0, + added: 0, + removed: 0, + styleDiffs: 0, + rectDiffs: 0, + fieldDiffs: 0, + }; + for (const d of deltas) { + if (d.type === "style") { + c.styleDiffs++; + c.fieldDiffs += Object.keys(d.deltas).length; + if (d.deltas.rect) c.rectDiffs++; + } else if (d.type in c) c[d.type]++; + } + return { + ...c, + tokenLight: tokenDiffs.light.length, + tokenDark: tokenDiffs.dark.length, + }; +} + +function toMarkdown(reports) { + const tokTable = (rows) => + rows.length + ? `| token | ours | ref |\n|---|---|---|\n` + + rows.map((r) => `| \`${r.key}\` | ${r.ours} | ${r.ref} |`).join("\n") + : "_все совпадают_"; + const elBlock = (el) => { + const d = Object.entries(el.deltas) + .map(([k, v]) => { + if (k === "rect") { + const f = (r) => `${r.x},${r.y} ${r.w}x${r.h}`; + return ` - **rect**: \`${f(v.ours)}\` → \`${f(v.ref)}\``; + } + return ` - **${k}**: \`${v.ours}\` → \`${v.ref}\``; + }) + .join("\n"); + return `### \`${el.path}\`${el.text ? ` — "${el.text}"` : ""}\n${d}`; + }; + const summary = + `# CSS audit (phase B)\n\n_${new Date().toISOString()}_\n\n` + + `## Сводка\n\n| route | ref | tokL | tokD | style (el) | fields | rect | +struct | -struct | tag | text |\n|---|---|---|---|---|---|---|---|---|---|---|\n` + + reports + .map( + (r) => + `| \`${r.route}\` | ${r.ref} | ${r.counts.tokenLight} | ${r.counts.tokenDark} | ${r.counts.styleDiffs} | ${r.counts.fieldDiffs} | ${r.counts.rectDiffs} | ${r.counts.added} | ${r.counts.removed} | ${r.counts.tagMismatch} | ${r.counts.textMismatch} |`, + ) + .join("\n"); + const sections = reports + .map((r) => { + const styleDiffs = r.deltas.filter((d) => d.type === "style"); + const sorted = [...styleDiffs].sort( + (x, y) => Object.keys(y.deltas).length - Object.keys(x.deltas).length, + ); + const els = sorted.length + ? sorted.slice(0, 150).map(elBlock).join("\n\n") + : "_расхождений стилей нет_"; + const struct = r.deltas + .filter((d) => d.type !== "style") + .map((d) => `- \`${d.path}\` — **${d.type}**${d.tag ? ` (${d.tag})` : ""}`) + .join("\n"); + return ( + `\n\n## ${r.route} (vs ${r.ref})\n\n` + + `- Токены light: **${r.counts.tokenLight}**, dark: **${r.counts.tokenDark}**\n` + + `- Стиль-расхождений: **${r.counts.styleDiffs}** элементов / **${r.counts.fieldDiffs}** полей (из них геометрия: ${r.counts.rectDiffs})\n` + + `- Структурные: +${r.counts.added} / -${r.counts.removed} / tag ${r.counts.tagMismatch} / text ${r.counts.textMismatch}\n\n` + + `### Токены — Light\n\n${tokTable(r.tokenDiffs.light)}\n\n` + + `### Токены — Dark\n\n${tokTable(r.tokenDiffs.dark)}\n\n` + + `### Расхождения стилей (топ ${Math.min(150, sorted.length)})\n\n${els}\n\n` + + `### Структурные расхождения\n\n` + + (struct || "_—_") + ); + }) + .join("\n"); + return summary + sections + "\n"; +} + +async function main() { + const targets = buildTargets(); + if (!targets.length) { + console.error("no audit targets (refs-html/*.html missing?)"); + process.exit(1); + } + console.log(`[css-audit] targets: ${targets.map((t) => t.route).join(", ")}`); + + let server; + if (!args.noServe) { + const bin = process.platform === "win32" ? "pnpm.cmd" : "pnpm"; + server = spawn(bin, ["dev", "--port", String(PORT), "--strictPort"], { + cwd: WEB, + stdio: "ignore", + shell: true, + detached: process.platform !== "win32", + }); + await waitFor(args.ours || `http://127.0.0.1:${PORT}${targets[0].route}`); + } + + const browser = await chromium.launch(); + const reports = []; + try { + for (const target of targets) { + try { + const rep = await auditOne(browser, target); + reports.push(rep); + console.log( + `[css-audit] ${rep.route}: tokL=${rep.counts.tokenLight} tokD=${rep.counts.tokenDark} style=${rep.counts.styleDiffs} fields=${rep.counts.fieldDiffs} rect=${rep.counts.rectDiffs} +struct=${rep.counts.added} -struct=${rep.counts.removed}`, + ); + } catch (e) { + console.error(`[css-audit] ${target.route} failed: ${e.message}`); + } + } + mkdirSync(resolve(WEB, "audit"), { recursive: true }); + writeFileSync( + resolve(WEB, "audit/audit-report.json"), + JSON.stringify({ generatedAt: new Date().toISOString(), reports }, null, 2), + ); + writeFileSync(resolve(WEB, "audit/audit-report.md"), toMarkdown(reports)); + console.log(`report: web/audit/audit-report.md`); + } finally { + await browser.close(); + if (server) { + try { + if (process.platform === "win32") + spawn("taskkill", ["/pid", String(server.pid), "/f", "/t"], { stdio: "ignore" }); + else server.kill("SIGTERM"); + } catch {} + } + } +} + +main().catch((e) => { + console.error(e); + process.exit(1); +}); diff --git a/web/scripts/audit.mjs b/web/scripts/audit.mjs deleted file mode 100644 index 15b6b04..0000000 --- a/web/scripts/audit.mjs +++ /dev/null @@ -1,433 +0,0 @@ -// Стиль-аудит: для каждого preview-маршрута снимает design-токены (light/dark) -// и дерево вычисленных стилей нашей страницы и соответствующей refs-html -// страницы, сравнивает и пишет сводный отчёт. -// Запуск: pnpm audit (опции: --route --ref --no-serve --ours ) -import { chromium } from "playwright"; -import { spawn } from "node:child_process"; -import { readFileSync, writeFileSync, mkdirSync, readdirSync } from "node:fs"; -import { pathToFileURL } from "node:url"; -import { resolve, join } from "node:path"; - -const args = (() => { - const a = {}; - for (let i = 0; i < process.argv.length; i++) { - const v = process.argv[i]; - if (v === "--no-serve") a.noServe = true; - else if (v === "--ours") a.ours = process.argv[++i]; - else if (v === "--ref") a.ref = process.argv[++i]; - else if (v === "--route") a.route = process.argv[++i]; - } - return a; -})(); - -const WEB = process.cwd(); -const PORT = 5179; -const REFS_DIR = resolve(WEB, "../refs-html"); - -const FIELDS = [ - "fontFamily", - "fontSize", - "fontWeight", - "color", - "backgroundColor", - "border", - "padding", - "margin", - "letterSpacing", - "lineHeight", - "borderRadius", - "display", - "gap", -]; - -// Динамические сегменты: явный список значений + сопоставление id → файл рефа -// (id инструмента в registry.ts не совпадает с именем refs-html-файла). -const DYNAMIC = { - "tools/[id]": { - ids: ["linear-gradient-png", "remove-background-png"], - refFor: (id) => - id === "linear-gradient-png" - ? "gradient.html" - : id === "remove-background-png" - ? "background-remover.html" - : null, - }, -}; - -// Маршруты, которые не с чем сравнивать (нет релевантного рефа). Например, -// `/preview` (индекс/воркспейс) в нашем приложении — своя страница, а -// `refs-html/index.html` — это зеркало demo из Next-рефа, не его реф. -const EXCLUDE = new Set(["/preview"]); - -const refNameFor = (route) => { - if (route === "/preview") return "index.html"; - const last = route.split("/").filter(Boolean).pop(); - return `${last}.html`; -}; - -function discoverRoutes() { - const base = resolve(WEB, "src/routes/preview"); - const out = []; - const walk = (dir) => { - let ents; - try { - ents = readdirSync(dir, { withFileTypes: true }); - } catch { - return; - } - for (const e of ents) { - const p = join(dir, e.name); - if (e.isDirectory()) walk(p); - else if (e.name === "+page.svelte") { - const rel = p.slice(base.length).replace(/\\/g, "/"); - const parts = rel.split("/").filter(Boolean); - parts.pop(); // +page.svelte - out.push(parts.length ? `/preview/${parts.join("/")}` : "/preview"); - } - } - }; - walk(base); - return out; -} - -function buildTargets() { - if (args.route) { - const ref = args.ref || refNameFor(args.route); - return [{ route: args.route, ref }]; - } - const targets = []; - const seen = new Set(); - const add = (route, ref) => { - if (!ref || seen.has(route)) return; - if (!refExists(ref)) { - console.warn(`[audit] ref not found, skipped: ${route} -> ${ref}`); - return; - } - seen.add(route); - targets.push({ route, ref }); - }; - for (const route of discoverRoutes()) { - if (route.includes("[")) continue; // динамика — ниже - if (EXCLUDE.has(route)) { - console.log(`[audit] excluded (no relevant ref): ${route}`); - continue; - } - add(route, refNameFor(route)); - } - for (const [seg, cfg] of Object.entries(DYNAMIC)) { - for (const id of cfg.ids) { - add(`/preview/${seg.replace("[id]", id)}`, cfg.refFor(id)); - } - } - // Рефы без маршрута — просто сообщаем, не падаем. - const routed = new Set(targets.map((t) => t.ref)); - for (const f of refsList()) { - if (!routed.has(f)) console.warn(`[audit] ref без маршрута: ${f}`); - } - return targets; -} - -function refsList() { - try { - return readdirSync(REFS_DIR).filter((f) => f.endsWith(".html")); - } catch { - return []; - } -} -function refExists(name) { - return refsList().includes(name); -} - -const waitFor = async (url, ms = 60000) => { - const t = Date.now(); - while (Date.now() - t < ms) { - try { - const r = await fetch(url); - if (r.ok) return; - // Сервер уже отвечает, но страница упала (4xx/5xx) — ждать 200 - // бессмысленно: сообщаем явно вместо таймаута "dev server not up". - if (r.status >= 400) { - throw new Error( - `route ${url} returned HTTP ${r.status} (server is up, page failed to render)`, - ); - } - } catch (e) { - if (e instanceof Error && e.message.includes("returned HTTP")) throw e; - } - await new Promise((r) => setTimeout(r, 500)); - } - throw new Error("dev server not up: " + url); -}; - -const snapshot = (page, url) => - page.evaluate((url) => { - const readTokens = () => { - const s = getComputedStyle(document.documentElement); - const out = {}; - for (const k of s) - if (k.startsWith("--")) out[k] = s.getPropertyValue(k).trim(); - return out; - }; - const tokensLight = readTokens(); - const prev = document.documentElement.getAttribute("data-theme"); - document.documentElement.setAttribute("data-theme", "dark"); - const tokensDark = readTokens(); - if (prev) document.documentElement.setAttribute("data-theme", prev); - else document.documentElement.removeAttribute("data-theme"); - - const sig = (el) => { - const s = getComputedStyle(el); - const o = {}; - for (const f of [ - "fontFamily", - "fontSize", - "fontWeight", - "color", - "backgroundColor", - "borderTopWidth", - "borderTopColor", - "padding", - "margin", - "letterSpacing", - "lineHeight", - "borderRadius", - "display", - "gap", - ]) - o[f] = s[f]; - return o; - }; - const rect = (el) => { - const r = el.getBoundingClientRect(); - return { - x: Math.round(r.x), - y: Math.round(r.y), - w: Math.round(r.width), - h: Math.round(r.height), - }; - }; - const walk = (el, path) => { - if (["SCRIPT", "STYLE", "NOSCRIPT"].includes(el.tagName)) return []; - const out = []; - const kids = [...el.children]; - out.push({ - path, - tag: el.tagName.toLowerCase(), - text: - el.children.length === 0 ? el.textContent.trim().slice(0, 40) : "", - rect: rect(el), - style: sig(el), - }); - for (let i = 0; i < kids.length; i++) - out.push( - ...walk( - kids[i], - `${path}>${kids[i].tagName.toLowerCase()}:nth-child(${i + 1})`, - ), - ); - return out; - }; - return { tokensLight, tokensDark, tree: walk(document.body, "body") }; - }, url); - -const TOK_NOISE = /^(--tw-|--lightningcss-|--default-)/; - -function diffPair(ours, ref) { - const tokDiff = (a, b) => { - const keys = new Set([...Object.keys(a), ...Object.keys(b)]); - const rows = []; - for (const k of keys) { - if (TOK_NOISE.test(k)) continue; - const av = a[k] ?? "—"; - const bv = b[k] ?? "—"; - if (av !== bv) rows.push({ key: k, ours: av, ref: bv }); - } - return rows; - }; - const tokenDiffs = { - light: tokDiff(ours.tokensLight, ref.tokensLight), - dark: tokDiff(ours.tokensDark, ref.tokensDark), - }; - - const byText = (tree) => { - const m = new Map(); - for (const e of tree) if (e.text) if (!m.has(e.text)) m.set(e.text, e); - return m; - }; - const txtO = byText(ours.tree); - const txtR = byText(ref.tree); - const onlyOurs = []; - const onlyRef = []; - const elementDiffs = []; - for (const [k, o] of txtO) { - const r = txtR.get(k); - if (!r) { - onlyOurs.push(k); - continue; - } - const deltas = {}; - for (const f of FIELDS) { - const ov = (o.style[f] ?? "").toString(); - const rv = (r.style[f] ?? "").toString(); - if (ov !== rv) deltas[f] = { ours: ov, ref: rv }; - } - const dr = o.rect; - const rr = r.rect; - if ( - Math.abs(dr.x - rr.x) > 2 || - Math.abs(dr.y - rr.y) > 2 || - Math.abs(dr.w - rr.w) > 2 || - Math.abs(dr.h - rr.h) > 2 - ) - deltas.rect = { ours: dr, ref: rr }; - if (Object.keys(deltas).length) - elementDiffs.push({ path: o.path, tag: o.tag, text: k, deltas }); - } - for (const [k] of txtR) if (!txtO.has(k)) onlyRef.push(k); - - return { - tokenDiffs, - elementDiffs, - onlyOurs: onlyOurs.slice(0, 60), - onlyRef: onlyRef.slice(0, 60), - counts: { - tokenLight: tokenDiffs.light.length, - tokenDark: tokenDiffs.dark.length, - elements: elementDiffs.length, - onlyOurs: onlyOurs.length, - onlyRef: onlyRef.length, - }, - }; -} - -async function auditOne(page, target) { - const oursUrl = args.ours || `http://127.0.0.1:${PORT}${target.route}`; - const refUrl = pathToFileURL(resolve(REFS_DIR, target.ref)).href; - - await page.goto(oursUrl, { waitUntil: "load" }); - await page.evaluate(() => document.fonts.ready); - await page.waitForTimeout(300); - const ours = await snapshot(page, oursUrl); - - await page.goto(refUrl, { waitUntil: "load" }); - await page.evaluate(() => document.fonts.ready); - await page.waitForTimeout(300); - const ref = await snapshot(page, refUrl); - - const diff = diffPair(ours, ref); - return { route: target.route, ref: target.ref, ...diff }; -} - -function toMarkdown(reports) { - const tokTable = (rows) => - rows.length - ? `| token | ours | ref |\n|---|---|---|\n` + - rows.map((r) => `| \`${r.key}\` | ${r.ours} | ${r.ref} |`).join("\n") - : "_все совпадают_"; - const elBlock = (el) => { - const d = Object.entries(el.deltas) - .map(([k, v]) => { - if (k === "rect") { - const f = (r) => `${r.x},${r.y} ${r.w}x${r.h}`; - return ` - **rect**: \`${f(v.ours)}\` → \`${f(v.ref)}\``; - } - return ` - **${k}**: \`${v.ours}\` → \`${v.ref}\``; - }) - .join("\n"); - return `### \`${el.path}\`${el.text ? ` — "${el.text}"` : ""}\n${d}`; - }; - const summary = - `# Style audit (multi-route)\n\n_${new Date().toISOString()}_\n\n` + - `## Сводка\n\n| route | ref | tokL | tokD | els | onlyOurs | onlyRef |\n|---|---|---|---|---|---|---|\n` + - reports - .map( - (r) => - `| \`${r.route}\` | ${r.ref} | ${r.counts.tokenLight} | ${r.counts.tokenDark} | ${r.counts.elements} | ${r.counts.onlyOurs} | ${r.counts.onlyRef} |`, - ) - .join("\n"); - const sections = reports - .map((r) => { - const sorted = [...r.elementDiffs].sort( - (x, y) => Object.keys(y.deltas).length - Object.keys(x.deltas).length, - ); - const els = sorted.length - ? sorted.slice(0, 100).map(elBlock).join("\n\n") - : "_расхождений нет_"; - return ( - `\n\n## ${r.route} (vs ${r.ref})\n\n` + - `- Токены light: **${r.counts.tokenLight}**, dark: **${r.counts.tokenDark}**\n` + - `- Элементы: **${r.counts.elements}**, только у нас: ${r.counts.onlyOurs}, только в рефе: ${r.counts.onlyRef}\n\n` + - `### Токены — Light\n\n${tokTable(r.tokenDiffs.light)}\n\n` + - `### Токены — Dark\n\n${tokTable(r.tokenDiffs.dark)}\n\n` + - `### Расхождения элементов (топ ${Math.min(100, sorted.length)})\n\n${els}\n\n` + - `### Только у нас\n\n` + - (r.onlyOurs.length ? r.onlyOurs.map((p) => `- \`${p}\``).join("\n") : "_—_") + - `\n\n### Только в рефе\n\n` + - (r.onlyRef.length ? r.onlyRef.map((p) => `- \`${p}\``).join("\n") : "_—_") - ); - }) - .join("\n"); - return summary + sections + "\n"; -} - -async function main() { - const targets = buildTargets(); - if (!targets.length) { - console.error("no audit targets (refs-html/*.html missing?)"); - process.exit(1); - } - console.log( - `[audit] targets: ${targets.map((t) => t.route).join(", ")}`, - ); - - let server; - if (!args.noServe) { - const bin = process.platform === "win32" ? "pnpm.cmd" : "pnpm"; - server = spawn(bin, ["dev", "--port", String(PORT), "--strictPort"], { - cwd: WEB, - stdio: "ignore", - shell: true, - detached: process.platform !== "win32", - }); - await waitFor(args.ours || `http://127.0.0.1:${PORT}${targets[0].route}`); - } - - const browser = await chromium.launch(); - const page = await browser.newPage({ - viewport: { width: 1440, height: 900 }, - deviceScaleFactor: 1, - }); - const reports = []; - try { - for (const target of targets) { - const rep = await auditOne(page, target); - reports.push(rep); - console.log( - `[audit] ${rep.route}: tokL=${rep.counts.tokenLight} tokD=${rep.counts.tokenDark} els=${rep.counts.elements} onlyOurs=${rep.counts.onlyOurs} onlyRef=${rep.counts.onlyRef}`, - ); - } - mkdirSync(resolve(WEB, "audit"), { recursive: true }); - writeFileSync( - resolve(WEB, "audit/audit-report.json"), - JSON.stringify({ generatedAt: new Date().toISOString(), reports }, null, 2), - ); - writeFileSync(resolve(WEB, "audit/audit-report.md"), toMarkdown(reports)); - console.log(`report: web/audit/audit-report.md`); - } finally { - await browser.close(); - if (server) { - try { - if (process.platform === "win32") - spawn("taskkill", ["/pid", String(server.pid), "/f", "/t"], { - stdio: "ignore", - }); - else server.kill("SIGTERM"); - } catch {} - } - } -} - -main().catch((e) => { - console.error(e); - process.exit(1); -});