From 2d72848e8eec9f56e4bc9897f7df19cc07902541 Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Sun, 30 Aug 2026 11:22:42 +0500 Subject: [PATCH] chore: update audit format - show really different styles --- web/audit/cdp-audit.txt | 9214 ++++++++----------------------------- web/scripts/audit-cdp.mjs | 359 +- 2 files changed, 2383 insertions(+), 7190 deletions(-) diff --git a/web/audit/cdp-audit.txt b/web/audit/cdp-audit.txt index 97e772d..06dcf34 100644 --- a/web/audit/cdp-audit.txt +++ b/web/audit/cdp-audit.txt @@ -1,2740 +1,1144 @@ CDP visual audit -2026-08-30T00:17:44.119Z +2026-08-30T06:21:12.002Z viewport 1440x900, tolerance 1px, theme light -=== /preview/demo (vs demo.html) — 216 differences === - -body - h: 1578.9 → 2338.9 (+760px) - height: 1578.89px → 2338.89px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main [preview-root] - h: 1578.9 → 2338.9 (+760px) - height: 1578.89px → 2338.89px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) +=== /preview/demo (vs demo.html) — 173 differences === body > main > header [topbar] - position: static → sticky - top: auto → 0px - z-index: auto → 20 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > a [brand] - w: 231.5 → 246.8 (+15.3px) - width: 231.469px → 246.812px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) - -body > main > header > a > span:nth-of-type(2) "easy-png-tools" - w: 107.8 → 117.6 (+9.8px) - width: 107.766px → 117.609px - height: 17px → 18px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + position: — → sticky + top: — → 0px + z-index: — → 20 body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE" - x: 215.4 → 225.2 (+9.8px) - w: 73.7 → 79.2 (+5.5px) - width: 73.7031px → 79.2031px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - -body > main > header > div [top-actions] - x: 1117.1 → 1104.6 (-12.5px) - w: 265.3 → 277.8 (+12.5px) - width: 265.328px → 277.812px - height: 29px → 28px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > div > span [status] "AUTO PIPELINE" - x: 1117.1 → 1104.6 (-12.5px) - w: 94.9 → 103.4 (+8.5px) - width: 94.875px → 103.406px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] body > main > header > div > span > i [status-dot] - x: 1117.1 → 1104.6 (-12.5px) w: 6 → 8 (+2px) h: 6 → 8 (+2px) width: 6px → 8px height: 6px → 8px - box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - x: 1228 → 1224 (-4px) - display: grid → flex - justify-content: normal → center - grid-template-columns: 17px → none - grid-template-rows: 17px → none - width: 29px → 28px - height: 29px → 28px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] - x: 1234 → 1230 (-4px) - width: 17px → 16px - height: 17px → 16px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - x: 1273 → 1268 (-5px) - display: grid → flex - justify-content: normal → center - grid-template-columns: 17px → none - grid-template-rows: 17px → none - width: 29px → 28px - height: 29px → 28px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - x: 1279 → 1274 (-5px) - width: 17px → 16px - height: 17px → 16px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > div [lang] - x: 1318 → 1312 (-6px) - w: 64.5 → 70.4 (+5.9px) - align-items: center → normal - width: 64.4531px → 70.4062px - height: 26px → 27px - overflow: visible → hidden - border-radius: 0px → 4px + display: flex → inline-flex + align-items: center → — body > main > header > div > div > span [lang-div] "/" - x: 1348 → 1344.2 (-3.8px) - y: 19.5 → 25 (+5.5px) - w: 4.5 → 6 (+1.5px) - h: 24 → 13 (-11px) - align-self: auto → center - width: 4.45312px → 6px - height: 24px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - color: rgb(23, 33, 43) → rgb(109, 120, 131) - font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace - font-size: 16px → 10px - line-height: 24px → normal + align-self: — → center + color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] + font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - x: 1352.4 → 1350.2 (-2.2px) - w: 29 → 31.2 (+2.2px) - width: 29px → 31.2031px - height: 24px → 25px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px + letter-spacing: — → 0.06em body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - x: 1319 → 1313 (-6px) - w: 29 → 31.2 (+2.2px) - width: 29px → 31.2031px - height: 24px → 25px - letter-spacing: normal → 0.6px + letter-spacing: — → 0.06em body > main > header > nav [nav] - x: 792.1 → 528.2 (-263.9px) - y: 25.5 → 24 (-1.5px) - w: 296.9 → 376.6 (+79.7px) - h: 12 → 15 (+3px) row-gap: 22px → 18px column-gap: 22px → 18px - margin-right: 28px → 0px - margin-left: 503.078px → 24px - width: 296.938px → 376.594px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + margin-right: 28px → — + margin-left: auto → 24px body > main > header > nav > a:nth-of-type(1) "Workspace" - x: 792.1 → 528.2 (-263.9px) - y: 25.5 → 24 (-1.5px) - w: 49.5 → 69.1 (+19.6px) - h: 12 → 15 (+3px) - width: 49.4844px → 69.125px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(2) "Catalog" - x: 863.6 → 615.3 (-248.3px) - y: 25.5 → 24 (-1.5px) - w: 38.5 → 53.8 (+15.3px) - h: 12 → 15 (+3px) - width: 38.5px → 53.7656px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(3) "Gradient" - x: 924.1 → 687.1 (-237px) - y: 25.5 → 24 (-1.5px) - w: 44 → 61.5 (+17.5px) - h: 12 → 15 (+3px) - width: 43.9844px → 61.4531px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(4) "Background remover" - x: 990.1 → 766.5 (-223.6px) - y: 25.5 → 24 (-1.5px) - w: 99 → 138.3 (+39.3px) - h: 12 → 15 (+3px) - width: 98.9688px → 138.25px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > div [ws] - h: 1468.9 → 2228.9 (+760px) - grid-template-rows: 1336.89px → 2096.89px - height: 1468.89px → 2228.89px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + width: 100% → — body > main > div > section:nth-of-type(2) [preview-panel] - h: 1336.9 → 2096.9 (+760px) - align-self: start → auto - height: 1336.89px → 2096.89px + align-self: start → — + margin-top: 0px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) [preview-stack] - y: 320 → 301.3 (-18.7px) - h: 1093.4 → 1872.1 (+778.7px) - grid-template-columns: 276.328px 276.344px → 564.672px - grid-template-rows: 345.797px 345.797px 345.797px → 358.422px 358.422px 358.422px 358.422px 358.422px - height: 1093.39px → 1872.11px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + grid-template-columns: 1fr 1fr → 1fr + width: 100% → — + min-width: 0px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [preview-tile] - y: 336 → 317.3 (-18.7px) w: 276.3 → 564.7 (+288.4px) - h: 345.8 → 358.4 (+12.6px) - display: block → flex - flex-direction: row → column - row-gap: normal → 4.8px - column-gap: normal → 4.8px - padding-top: 0px → 6.4px - padding-right: 0px → 6.4px - padding-bottom: 0px → 6.4px - padding-left: 0px → 6.4px - width: 276.328px → 564.672px - height: 345.797px → 358.422px - min-width: 0px → auto - overflow: hidden → visible - border-radius: 0px → 4px - background-color: rgb(238, 241, 244) → rgb(248, 250, 251) + display: — → flex + flex-direction: — → column + row-gap: — → 0.3rem + column-gap: — → 0.3rem + padding-top: — → 0.4rem + padding-right: — → 0.4rem + padding-bottom: — → 0.4rem + padding-left: — → 0.4rem + width: 100% → — + min-width: 0px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [tile-canvas] - x: 799.7 → 806.1 (+6.4px) - y: 337 → 324.7 (-12.3px) w: 274.3 → 549.9 (+275.6px) - h: 316.8 → 325.8 (+9px) - display: grid → block - align-items: center → normal - grid-template-columns: 242.328px → none - grid-template-rows: 284.797px → none - padding-top: 16px → 0px - padding-right: 16px → 0px - padding-bottom: 16px → 0px - padding-left: 16px → 0px - width: 274.328px → 549.891px - height: 316.797px → 325.844px - min-width: 0px → auto - min-height: 316.8px → 120px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - border-radius: 0px → 4px - background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0) - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none - background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto - background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0% + display: grid → — + align-items: center → — + padding-top: 16px → — + padding-right: 16px → — + padding-bottom: 16px → — + padding-left: 16px → — + width: 100% → — + min-width: 0px → — + min-height: clamp(300px, 22vw, 430px) → 120px + background-color: rgb(228, 232, 235) → — + background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — + background-size: 14px 14px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div [ph] - x: 840 → 806.1 (-33.9px) - y: 430.8 → 324.7 (-106.1px) w: 193.9 → 439.9 (+246px) - h: 129.2 → 325.8 (+196.6px) - width: 193.859px → 439.906px - height: 129.234px → 325.844px - min-height: auto → 0px - max-width: 100% → none - overflow: hidden → visible - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG" - x: 923.5 → 1012 (+88.5px) - y: 477.9 → 469.1 (-8.8px) - w: 26.9 → 28.2 (+1.3px) - width: 26.8594px → 28.2031px - height: 18px → 19px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools" - x: 898.4 → 984.1 (+85.7px) - y: 500.9 → 493.1 (-7.8px) - w: 77 → 84 (+7px) - width: 76.9844px → 84px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + min-width: 0px → — + max-width: 100% → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [tile-label] - x: 799.7 → 806.1 (+6.4px) - y: 653.8 → 655.3 (+1.5px) - w: 274.3 → 549.9 (+275.6px) - h: 27 → 13 (-14px) - align-items: normal → baseline - padding-top: 8px → 0px - padding-right: 8px → 0px - padding-bottom: 8px → 0px - padding-left: 8px → 0px - width: 274.328px → 549.891px - height: 27px → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 9px → 16px - line-height: normal → 24px + align-items: — → baseline + row-gap: 8px → 0.5rem + column-gap: 8px → 0.5rem + padding-top: 8px → — + padding-right: 8px → — + padding-bottom: 8px → — + padding-left: 8px → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span "SOURCE" - x: 807.7 → 806.1 (-1.6px) - y: 662.8 → 655.3 (-7.5px) - w: 29.7 → 40.8 (+11.1px) - h: 10 → 13 (+3px) - width: 29.7031px → 40.8125px - height: 10px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-size: 9px → 10px - letter-spacing: normal → 0.8px - text-transform: none → uppercase + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > b "original.png · 1200 × 800" - x: 942.3 → 1206 (+263.7px) - y: 662.8 → 655.3 (-7.5px) - w: 123.7 → 150 (+26.3px) - h: 10 → 13 (+3px) - width: 123.719px → 150px - height: 10px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 9px → 10px - text-align: right → start + text-align: right → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [preview-tile] - x: 1087 → 798.7 (-288.3px) - y: 336 → 687.7 (+351.7px) w: 276.3 → 564.7 (+288.4px) - h: 345.8 → 358.4 (+12.6px) - display: block → flex - flex-direction: row → column - row-gap: normal → 4.8px - column-gap: normal → 4.8px - padding-top: 0px → 6.4px - padding-right: 0px → 6.4px - padding-bottom: 0px → 6.4px - padding-left: 0px → 6.4px - width: 276.344px → 564.672px - height: 345.797px → 358.422px - min-width: 0px → auto - overflow: hidden → visible - border-radius: 0px → 4px - background-color: rgb(238, 241, 244) → rgb(248, 250, 251) + display: — → flex + flex-direction: — → column + row-gap: — → 0.3rem + column-gap: — → 0.3rem + padding-top: — → 0.4rem + padding-right: — → 0.4rem + padding-bottom: — → 0.4rem + padding-left: — → 0.4rem + width: 100% → — + min-width: 0px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [tile-canvas] - x: 1088 → 806.1 (-281.9px) - y: 337 → 695.1 (+358.1px) w: 274.3 → 549.9 (+275.6px) - h: 316.8 → 325.8 (+9px) - display: grid → block - align-items: center → normal - grid-template-columns: 242.344px → none - grid-template-rows: 284.797px → none - padding-top: 16px → 0px - padding-right: 16px → 0px - padding-bottom: 16px → 0px - padding-left: 16px → 0px - width: 274.344px → 549.891px - height: 316.797px → 325.844px - min-width: 0px → auto - min-height: 316.8px → 120px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - border-radius: 0px → 4px - background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0) - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none - background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto - background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0% + display: grid → — + align-items: center → — + padding-top: 16px → — + padding-right: 16px → — + padding-bottom: 16px → — + padding-left: 16px → — + width: 100% → — + min-width: 0px → — + min-height: clamp(300px, 22vw, 430px) → 120px + background-color: rgb(228, 232, 235) → — + background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — + background-size: 14px 14px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [ph] - x: 1128.3 → 806.1 (-322.2px) - y: 430.8 → 695.1 (+264.3px) w: 193.9 → 439.9 (+246px) - h: 129.3 → 325.8 (+196.5px) - width: 193.875px → 439.906px - height: 129.25px → 325.844px - min-height: auto → 0px - max-width: 100% → none - overflow: hidden → visible - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG" - x: 1211.8 → 1012 (-199.8px) - y: 477.9 → 839.5 (+361.6px) - w: 26.9 → 28.2 (+1.3px) - width: 26.8594px → 28.2031px - height: 18px → 19px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools" - x: 1186.7 → 984.1 (-202.6px) - y: 500.9 → 863.5 (+362.6px) - w: 77 → 84 (+7px) - width: 76.9844px → 84px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + min-width: 0px → — + max-width: 100% → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [tile-label] - x: 1088 → 806.1 (-281.9px) - y: 653.8 → 1025.7 (+371.9px) - w: 274.3 → 549.9 (+275.6px) - h: 27 → 13 (-14px) - align-items: normal → baseline - padding-top: 8px → 0px - padding-right: 8px → 0px - padding-bottom: 8px → 0px - padding-left: 8px → 0px - width: 274.344px → 549.891px - height: 27px → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 9px → 16px - line-height: normal → 24px + align-items: — → baseline + row-gap: 8px → 0.5rem + column-gap: 8px → 0.5rem + padding-top: 8px → — + padding-right: 8px → — + padding-bottom: 8px → — + padding-left: 8px → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "STEP 01" - x: 1096 → 806.1 (-289.9px) - y: 662.8 → 1025.7 (+362.9px) - w: 34.6 → 47.6 (+13px) - h: 10 → 13 (+3px) - width: 34.6406px → 47.6094px - height: 10px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-size: 9px → 10px - letter-spacing: normal → 0.8px - text-transform: none → uppercase + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > b "gradient applied" - x: 1275.2 → 1260 (-15.2px) - y: 662.8 → 1025.7 (+362.9px) - w: 79.2 → 96 (+16.8px) - h: 10 → 13 (+3px) - width: 79.1719px → 96px - height: 10px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 9px → 10px - text-align: right → start + text-align: right → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [preview-tile] - y: 693.8 → 1058.1 (+364.3px) w: 276.3 → 564.7 (+288.4px) - h: 345.8 → 358.4 (+12.6px) - display: block → flex - flex-direction: row → column - row-gap: normal → 4.8px - column-gap: normal → 4.8px - padding-top: 0px → 6.4px - padding-right: 0px → 6.4px - padding-bottom: 0px → 6.4px - padding-left: 0px → 6.4px - width: 276.328px → 564.672px - height: 345.797px → 358.422px - min-width: 0px → auto - overflow: hidden → visible - border-radius: 0px → 4px - background-color: rgb(238, 241, 244) → rgb(248, 250, 251) + display: — → flex + flex-direction: — → column + row-gap: — → 0.3rem + column-gap: — → 0.3rem + padding-top: — → 0.4rem + padding-right: — → 0.4rem + padding-bottom: — → 0.4rem + padding-left: — → 0.4rem + width: 100% → — + min-width: 0px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) [tile-canvas] - x: 799.7 → 806.1 (+6.4px) - y: 694.8 → 1065.5 (+370.7px) w: 274.3 → 549.9 (+275.6px) - h: 316.8 → 325.8 (+9px) - display: grid → block - align-items: center → normal - grid-template-columns: 242.328px → none - grid-template-rows: 284.797px → none - padding-top: 16px → 0px - padding-right: 16px → 0px - padding-bottom: 16px → 0px - padding-left: 16px → 0px - width: 274.328px → 549.891px - height: 316.797px → 325.844px - min-width: 0px → auto - min-height: 316.8px → 120px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - border-radius: 0px → 4px - background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0) - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none - background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto - background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0% + display: grid → — + align-items: center → — + padding-top: 16px → — + padding-right: 16px → — + padding-bottom: 16px → — + padding-left: 16px → — + width: 100% → — + min-width: 0px → — + min-height: clamp(300px, 22vw, 430px) → 120px + background-color: rgb(228, 232, 235) → — + background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — + background-size: 14px 14px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div [ph] - x: 840 → 806.1 (-33.9px) - y: 788.6 → 1065.5 (+276.9px) w: 193.9 → 439.9 (+246px) - h: 129.2 → 325.8 (+196.6px) - width: 193.859px → 439.906px - height: 129.234px → 325.844px - min-height: auto → 0px - max-width: 100% → none - overflow: hidden → visible - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG" - x: 923.5 → 1012 (+88.5px) - y: 835.7 → 1209.9 (+374.2px) - w: 26.9 → 28.2 (+1.3px) - width: 26.8594px → 28.2031px - height: 18px → 19px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools" - x: 898.4 → 984.1 (+85.7px) - y: 858.7 → 1233.9 (+375.2px) - w: 77 → 84 (+7px) - width: 76.9844px → 84px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + min-width: 0px → — + max-width: 100% → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) [tile-label] - x: 799.7 → 806.1 (+6.4px) - y: 1011.6 → 1396.2 (+384.6px) - w: 274.3 → 549.9 (+275.6px) - h: 27 → 13 (-14px) - align-items: normal → baseline - padding-top: 8px → 0px - padding-right: 8px → 0px - padding-bottom: 8px → 0px - padding-left: 8px → 0px - width: 274.328px → 549.891px - height: 27px → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 9px → 16px - line-height: normal → 24px + align-items: — → baseline + row-gap: 8px → 0.5rem + column-gap: 8px → 0.5rem + padding-top: 8px → — + padding-right: 8px → — + padding-bottom: 8px → — + padding-left: 8px → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > span "STEP 02" - x: 807.7 → 806.1 (-1.6px) - y: 1020.6 → 1396.2 (+375.6px) - w: 34.6 → 47.6 (+13px) - h: 10 → 13 (+3px) - width: 34.6406px → 47.6094px - height: 10px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-size: 9px → 10px - letter-spacing: normal → 0.8px - text-transform: none → uppercase + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > b "background removed" - x: 977 → 1248 (+271px) - y: 1020.6 → 1396.2 (+375.6px) - w: 89.1 → 108 (+18.9px) - h: 10 → 13 (+3px) - width: 89.0781px → 108px - height: 10px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 9px → 10px - text-align: right → start + text-align: right → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) [preview-tile] - x: 1087 → 798.7 (-288.3px) - y: 693.8 → 1428.5 (+734.7px) w: 276.3 → 564.7 (+288.4px) - h: 345.8 → 358.4 (+12.6px) - display: block → flex - flex-direction: row → column - row-gap: normal → 4.8px - column-gap: normal → 4.8px - padding-top: 0px → 6.4px - padding-right: 0px → 6.4px - padding-bottom: 0px → 6.4px - padding-left: 0px → 6.4px - width: 276.344px → 564.672px - height: 345.797px → 358.422px - min-width: 0px → auto - overflow: hidden → visible - border-radius: 0px → 4px - background-color: rgb(238, 241, 244) → rgb(248, 250, 251) + display: — → flex + flex-direction: — → column + row-gap: — → 0.3rem + column-gap: — → 0.3rem + padding-top: — → 0.4rem + padding-right: — → 0.4rem + padding-bottom: — → 0.4rem + padding-left: — → 0.4rem + width: 100% → — + min-width: 0px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) [tile-canvas] - x: 1088 → 806.1 (-281.9px) - y: 694.8 → 1435.9 (+741.1px) w: 274.3 → 549.9 (+275.6px) - h: 316.8 → 325.8 (+9px) - display: grid → block - align-items: center → normal - grid-template-columns: 242.344px → none - grid-template-rows: 284.797px → none - padding-top: 16px → 0px - padding-right: 16px → 0px - padding-bottom: 16px → 0px - padding-left: 16px → 0px - width: 274.344px → 549.891px - height: 316.797px → 325.844px - min-width: 0px → auto - min-height: 316.8px → 120px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - border-radius: 0px → 4px - background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0) - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none - background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto - background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0% + display: grid → — + align-items: center → — + padding-top: 16px → — + padding-right: 16px → — + padding-bottom: 16px → — + padding-left: 16px → — + width: 100% → — + min-width: 0px → — + min-height: clamp(300px, 22vw, 430px) → 120px + background-color: rgb(228, 232, 235) → — + background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — + background-size: 14px 14px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div [ph] - x: 1128.3 → 806.1 (-322.2px) - y: 788.6 → 1435.9 (+647.3px) w: 193.9 → 439.9 (+246px) - h: 129.3 → 325.8 (+196.5px) - width: 193.875px → 439.906px - height: 129.25px → 325.844px - min-height: auto → 0px - max-width: 100% → none - overflow: hidden → visible - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG" - x: 1211.8 → 1012 (-199.8px) - y: 835.7 → 1580.4 (+744.7px) - w: 26.9 → 28.2 (+1.3px) - width: 26.8594px → 28.2031px - height: 18px → 19px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools" - x: 1186.7 → 984.1 (-202.6px) - y: 858.7 → 1604.4 (+745.7px) - w: 77 → 84 (+7px) - width: 76.9844px → 84px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + min-width: 0px → — + max-width: 100% → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) [tile-label] - x: 1088 → 806.1 (-281.9px) - y: 1011.6 → 1766.6 (+755px) - w: 274.3 → 549.9 (+275.6px) - h: 27 → 13 (-14px) - align-items: normal → baseline - padding-top: 8px → 0px - padding-right: 8px → 0px - padding-bottom: 8px → 0px - padding-left: 8px → 0px - width: 274.344px → 549.891px - height: 27px → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 9px → 16px - line-height: normal → 24px + align-items: — → baseline + row-gap: 8px → 0.5rem + column-gap: 8px → 0.5rem + padding-top: 8px → — + padding-right: 8px → — + padding-bottom: 8px → — + padding-left: 8px → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > span "STEP 03" - x: 1096 → 806.1 (-289.9px) - y: 1020.6 → 1766.6 (+746px) - w: 34.6 → 47.6 (+13px) - h: 10 → 13 (+3px) - width: 34.6406px → 47.6094px - height: 10px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-size: 9px → 10px - letter-spacing: normal → 0.8px - text-transform: none → uppercase + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > b "outline added" - x: 1290.1 → 1278 (-12.1px) - y: 1020.6 → 1766.6 (+746px) - w: 64.3 → 78 (+13.7px) - h: 10 → 13 (+3px) - width: 64.3281px → 78px - height: 10px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 9px → 10px - text-align: right → start + text-align: right → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) [preview-tile] - y: 1051.6 → 1799 (+747.4px) w: 276.3 → 564.7 (+288.4px) - h: 345.8 → 358.4 (+12.6px) - display: block → flex - flex-direction: row → column - row-gap: normal → 4.8px - column-gap: normal → 4.8px - padding-top: 0px → 6.4px - padding-right: 0px → 6.4px - padding-bottom: 0px → 6.4px - padding-left: 0px → 6.4px - width: 276.328px → 564.672px - height: 345.797px → 358.422px - min-width: 0px → auto - overflow: hidden → visible - border-top-color: rgb(23, 105, 210) → rgb(203, 211, 218) - border-radius: 0px → 4px - background-color: rgb(238, 241, 244) → rgb(248, 250, 251) + display: — → flex + flex-direction: — → column + row-gap: — → 0.3rem + column-gap: — → 0.3rem + padding-top: — → 0.4rem + padding-right: — → 0.4rem + padding-bottom: — → 0.4rem + padding-left: — → 0.4rem + width: 100% → — + min-width: 0px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) [tile-canvas] - x: 799.7 → 806.1 (+6.4px) - y: 1052.6 → 1806.4 (+753.8px) w: 274.3 → 549.9 (+275.6px) - h: 316.8 → 325.8 (+9px) - display: grid → block - align-items: center → normal - grid-template-columns: 242.328px → none - grid-template-rows: 284.797px → none - padding-top: 16px → 0px - padding-right: 16px → 0px - padding-bottom: 16px → 0px - padding-left: 16px → 0px - width: 274.328px → 549.891px - height: 316.797px → 325.844px - min-width: 0px → auto - min-height: 316.8px → 120px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - border-radius: 0px → 4px - background-color: rgb(228, 232, 235) → rgba(0, 0, 0, 0) - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → none - background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px → auto - background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px → 0% 0% + display: grid → — + align-items: center → — + padding-top: 16px → — + padding-right: 16px → — + padding-bottom: 16px → — + padding-left: 16px → — + width: 100% → — + min-width: 0px → — + min-height: clamp(300px, 22vw, 430px) → 120px + background-color: rgb(228, 232, 235) → — + background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — + background-size: 14px 14px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div [active ph] - x: 840 → 806.1 (-33.9px) - y: 1146.4 → 1806.4 (+660px) w: 193.9 → 439.9 (+246px) - h: 129.2 → 325.8 (+196.6px) - width: 193.859px → 439.906px - height: 129.234px → 325.844px - min-height: auto → 0px - max-width: 100% → none - overflow: hidden → visible - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div > span:nth-of-type(1) [sample-icon] "PNG" - x: 923.5 → 1012 (+88.5px) - y: 1193.5 → 1950.8 (+757.3px) - w: 26.9 → 28.2 (+1.3px) - width: 26.8594px → 28.2031px - height: 18px → 19px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div > span:nth-of-type(2) "easy-png-tools" - x: 898.4 → 984.1 (+85.7px) - y: 1216.5 → 1974.8 (+758.3px) - w: 77 → 84 (+7px) - width: 76.9844px → 84px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(22, 32, 43) + min-width: 0px → — + max-width: 100% → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) [tile-label] - x: 799.7 → 806.1 (+6.4px) - y: 1369.4 → 2137 (+767.6px) - w: 274.3 → 549.9 (+275.6px) - h: 27 → 13 (-14px) - align-items: normal → baseline - padding-top: 8px → 0px - padding-right: 8px → 0px - padding-bottom: 8px → 0px - padding-left: 8px → 0px - width: 274.328px → 549.891px - height: 27px → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 9px → 16px - line-height: normal → 24px + align-items: — → baseline + row-gap: 8px → 0.5rem + column-gap: 8px → 0.5rem + padding-top: 8px → — + padding-right: 8px → — + padding-bottom: 8px → — + padding-left: 8px → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > span "FINAL OUTPUT" - x: 807.7 → 806.1 (-1.6px) - y: 1378.4 → 2137 (+758.6px) - w: 59.4 → 81.6 (+22.2px) - h: 10 → 13 (+3px) - width: 59.3906px → 81.6094px - height: 10px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-size: 9px → 10px - letter-spacing: normal → 0.8px - text-transform: none → uppercase + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > b "ready · PNG-24" - x: 996.8 → 1272 (+275.2px) - y: 1378.4 → 2137 (+758.6px) - w: 69.3 → 84 (+14.7px) - h: 10 → 13 (+3px) - width: 69.2812px → 84px - height: 10px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 9px → 10px - text-align: right → start - -body > main > div > section:nth-of-type(2) > p [preview-note] "Output is generated in-browser. Your fil" - y: 1425.4 → 2185.4 (+760px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + text-align: right → — body > main > div > section:nth-of-type(2) > div:nth-of-type(1) [section-label] - h: 177 → 158.3 (-18.7px) - row-gap: normal → 16px - column-gap: normal → 16px + row-gap: — → 16px + column-gap: — → 16px padding-bottom: 15px → 12px - height: 177px → 158.281px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [section-text] - y: 180 → 182.1 (+2.1px) - w: 86.6 → 92.5 (+5.9px) - h: 87 → 67 (-20px) - display: block → flex - flex-direction: row → column - row-gap: normal → 2px - column-gap: normal → 2px - width: 86.6094px → 92.5156px - height: 87px → 67px - min-width: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "Visual history" - y: 233 → 213.1 (-19.9px) - w: 86.6 → 92.5 (+5.9px) - h: 34 → 36 (+2px) - width: 86.6094px → 92.5156px - height: 34px → 36px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + row-gap: — → 2px + column-gap: — → 2px + min-width: — → 0px body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [mono-label] "PIPELINE OUTPUTS" - y: 188 → 182.1 (-5.9px) - w: 53.6 → 92.5 (+38.9px) - h: 36 → 24 (-12px) - display: inline → block - width: auto → 92.5156px - height: auto → 24px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - line-height: normal → 12px - letter-spacing: 1.2px → 1px - text-transform: none → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [section-actions] - x: 885.3 → 907.2 (+21.9px) - w: 478.1 → 456.2 (-21.9px) - h: 161 → 145.3 (-15.7px) - width: 478.062px → 456.156px - height: 161px → 145.281px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + line-height: — → 1.2 + letter-spacing: 0.12em → 0.1em + text-transform: — → uppercase body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download result" - x: 885.3 → 955.4 (+70.1px) - y: 204 → 231.1 (+27.1px) w: 478.1 → 191.2 (-286.9px) h: 42 → 36 (-6px) - justify-content: center → normal + display: flex → inline-flex + justify-content: center → — row-gap: 9px → 8px column-gap: 9px → 8px - margin-top: 18px → 0px - padding-top: 0px → 9px - padding-right: 0px → 14px - padding-bottom: 0px → 9px - padding-left: 0px → 14px - width: 478.062px → 191.203px - height: 42px → 36px - border-top-width: 0px → 1px - border-top-style: none → solid - border-top-color: rgb(255, 255, 255) → rgb(23, 105, 210) - border-radius: 0px → 4px - font-size: 11px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + margin-top: 18px → — + padding-top: — → 9px + padding-right: — → 14px + padding-bottom: — → 9px + padding-left: — → 14px + width: 100% → — + height: 42px → — + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + letter-spacing: — → 0.04em body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - x: 1055 → 970.4 (-84.6px) - y: 217 → 241.1 (+24.1px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) - font-size: 11px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal - vertical-align: middle → baseline + letter-spacing: — → 0.04em body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-arrow-down-to-line lucide-icon] - x: 1179.7 → 1117.6 (-62.1px) - y: 218 → 242.1 (+24.1px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) - font-size: 11px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal - vertical-align: middle → baseline + letter-spacing: — → 0.04em body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [history-toggle] "Hide intermediate" - x: 1218.1 → 907.2 (-310.9px) - y: 143 → 161 (+18px) w: 145.3 → 456.2 (+310.9px) - h: 33 → 39 (+6px) margin-top: 0px → 18px + margin-right: 0px → — + margin-bottom: 0px → — + margin-left: 0px → — padding-top: 8px → 11px padding-right: 10px → 14px padding-bottom: 8px → 11px padding-left: 10px → 14px - width: 145.281px → 456.156px - height: 33px → 39px - background-position: 0px 0px → 0% 0% + width: auto → 100% body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-chevron-down lucide-icon] - x: 1337.4 → 1186.2 (-151.2px) - y: 152 → 173 (+21px) - transform: matrix(-1, 0, 0, -1, 0, 0) → none - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - vertical-align: middle → baseline + transform: rotate(180deg) → — body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [meta-list] - x: 1072.5 → 1156.6 (+84.1px) - y: 256 → 210 (-46px) - w: 251.9 → 164.8 (-87.1px) - h: 48 → 78.3 (+30.3px) display: grid → flex - flex-direction: row → column - row-gap: 8px → 2.4px - column-gap: 8px → 2.4px - grid-template-columns: 78.625px 78.625px 78.625px → none - grid-template-rows: 33px → none - padding-top: 14px → 0px - width: 251.875px → 164.812px - height: 48px → 78.2812px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + flex-direction: — → column + row-gap: 8px → 0.15rem + column-gap: 8px → 0.15rem + grid-template-columns: repeat(3, 1fr) → — + padding-top: 14px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) [meta-row] - x: 1072.5 → 1156.6 (+84.1px) - y: 271 → 210 (-61px) - w: 78.6 → 164.8 (+86.2px) - h: 33 → 24.5 (-8.5px) display: grid → flex - justify-content: normal → space-between - align-items: normal → baseline - row-gap: 5px → 16px - column-gap: 5px → 16px - grid-template-columns: 78.625px → none - grid-template-rows: 10px 18px → none - padding-top: 0px → 4px - padding-bottom: 0px → 4px - width: 78.625px → 164.812px - height: 33px → 24.5px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + justify-content: — → space-between + align-items: — → baseline + row-gap: 5px → 1rem + column-gap: 5px → 1rem + padding-top: — → 0.25rem + padding-bottom: — → 0.25rem body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > span [meta-caption] "DIMENSIONS" - x: 1072.5 → 1156.6 (+84.1px) - y: 271 → 216 (-55px) - w: 78.6 → 63 (-15.6px) - h: 10 → 13.5 (+3.5px) - width: 78.625px → 63px - height: 10px → 13.5px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - line-height: normal → 13.5px - letter-spacing: normal → 0.9px - text-transform: none → uppercase + line-height: — → 1.5 + letter-spacing: — → 0.1em + text-transform: — → uppercase body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > b [meta-value] "1200 × 800 px" - x: 1072.5 → 1235.6 (+163.1px) - y: 291 → 214 (-77px) - w: 78.6 → 85.8 (+7.2px) - h: 13 → 16.5 (+3.5px) - margin-top: 5px → 0px - width: 78.625px → 85.8125px - height: 13px → 16.5px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-weight: 400 → 700 - line-height: normal → 16.5px + margin-top: 5px → — + line-height: — → 1.5 body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) [meta-row] - x: 1159.1 → 1156.6 (-2.5px) - y: 271 → 236.9 (-34.1px) - w: 78.6 → 164.8 (+86.2px) - h: 33 → 24.5 (-8.5px) display: grid → flex - justify-content: normal → space-between - align-items: normal → baseline - row-gap: 5px → 16px - column-gap: 5px → 16px - grid-template-columns: 78.625px → none - grid-template-rows: 10px 18px → none - padding-top: 0px → 4px - padding-bottom: 0px → 4px - width: 78.625px → 164.812px - height: 33px → 24.5px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + justify-content: — → space-between + align-items: — → baseline + row-gap: 5px → 1rem + column-gap: 5px → 1rem + padding-top: — → 0.25rem + padding-bottom: — → 0.25rem body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > span [meta-caption] "FORMAT" - x: 1159.1 → 1156.6 (-2.5px) - y: 271 → 242.9 (-28.1px) - w: 78.6 → 37.8 (-40.8px) - h: 10 → 13.5 (+3.5px) - width: 78.625px → 37.8125px - height: 10px → 13.5px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - line-height: normal → 13.5px - letter-spacing: normal → 0.9px - text-transform: none → uppercase + line-height: — → 1.5 + letter-spacing: — → 0.1em + text-transform: — → uppercase body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > b [meta-value] "PNG-24" - x: 1159.1 → 1281.8 (+122.7px) - y: 291 → 240.9 (-50.1px) - w: 78.6 → 39.6 (-39px) - h: 13 → 16.5 (+3.5px) - margin-top: 5px → 0px - width: 78.625px → 39.6094px - height: 13px → 16.5px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-weight: 400 → 700 - line-height: normal → 16.5px + margin-top: 5px → — + line-height: — → 1.5 body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) [meta-row] - x: 1245.8 → 1156.6 (-89.2px) - y: 271 → 263.8 (-7.2px) - w: 78.6 → 164.8 (+86.2px) - h: 33 → 24.5 (-8.5px) display: grid → flex - justify-content: normal → space-between - align-items: normal → baseline - row-gap: 5px → 16px - column-gap: 5px → 16px - grid-template-columns: 78.625px → none - grid-template-rows: 10px 18px → none - padding-top: 0px → 4px - padding-bottom: 0px → 4px - width: 78.625px → 164.812px - height: 33px → 24.5px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + justify-content: — → space-between + align-items: — → baseline + row-gap: 5px → 1rem + column-gap: 5px → 1rem + padding-top: — → 0.25rem + padding-bottom: — → 0.25rem body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > span [meta-caption] "SIZE" - x: 1245.8 → 1156.6 (-89.2px) - y: 271 → 269.8 (-1.2px) - w: 78.6 → 25.2 (-53.4px) - h: 10 → 13.5 (+3.5px) - width: 78.625px → 25.2031px - height: 10px → 13.5px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - line-height: normal → 13.5px - letter-spacing: normal → 0.9px - text-transform: none → uppercase + line-height: — → 1.5 + letter-spacing: — → 0.1em + text-transform: — → uppercase body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > b [meta-value] "1.2 MB" - x: 1245.8 → 1281.8 (+36px) - y: 291 → 267.8 (-23.2px) - w: 78.6 → 39.6 (-39px) - h: 13 → 16.5 (+3.5px) - margin-top: 5px → 0px - width: 78.625px → 39.6094px - height: 13px → 16.5px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-weight: 400 → 700 - line-height: normal → 16.5px + margin-top: 5px → — + line-height: — → 1.5 body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) [icon-btn icon-btn--ghost] - x: 1334.4 → 1331.4 (-3px) - y: 265.5 → 233.1 (-32.4px) w: 29 → 32 (+3px) h: 29 → 32 (+3px) - display: grid → flex - justify-content: normal → center - grid-template-columns: 17px → none - grid-template-rows: 17px → none - padding-top: 6px → 1px - padding-bottom: 6px → 1px - width: 29px → 32px - height: 29px → 32px - border-top-width: 0px → 1px - border-top-style: none → solid - border-top-color: rgb(109, 120, 131) → rgb(203, 211, 218) - border-radius: 0px → 4px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: grid → inline-flex + justify-content: — → center + padding-top: 6px → — + padding-bottom: 6px → — + width: — → 2rem + height: — → 2rem + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) > svg [lucide lucide-icon lucide-settings-2] - y: 271.5 → 241.1 (-30.4px) - width: 17px → 16px - height: 17px → 16px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline - -body > main > div > section:nth-of-type(1) [ws-settings] - h: 993.4 → 893 (-100.4px) - height: 993.375px → 893.031px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE" - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - color: rgb(23, 105, 210) → rgb(109, 120, 131) + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/" - x: 165.1 → 172.6 (+7.5px) - w: 13.4 → 7.2 (-6.2px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - color: rgb(109, 120, 131) → rgb(23, 105, 210) + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] body > main > div > section:nth-of-type(1) > div:nth-of-type(2) [title-row] - h: 182.4 → 170.8 (-11.6px) - height: 182.375px → 170.844px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) - w: 482.3 → 473.5 (-8.8px) - h: 182.4 → 170.8 (-11.6px) - width: 482.344px → 473.516px - height: 182.375px → 170.844px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + align-items: center → flex-end body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." - w: 482.3 → 473.5 (-8.8px) - h: 115.2 → 103.7 (-11.5px) - width: 482.344px → 473.516px - height: 115.188px → 103.656px - max-width: 700px → none - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - line-height: 57.6px → 51.84px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > p [lede] "Chain simple tools together. Every chang" - y: 285.2 → 274.7 (-10.5px) - w: 482.3 → 473.5 (-8.8px) - width: 482.344px → 473.516px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [file-chip] - x: 569.9 → 561.1 (-8.8px) - y: 299.4 → 288.8 (-10.6px) - w: 153.8 → 162.6 (+8.8px) - width: 153.781px → 162.609px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > svg [lucide lucide-icon lucide-upload] - x: 582.9 → 574.1 (-8.8px) - y: 310.4 → 299.8 (-10.6px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - vertical-align: middle → baseline - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span "source.png" - x: 605.9 → 597.1 (-8.8px) - y: 311.4 → 300.3 (-11.1px) - w: 60.5 → 66 (+5.5px) - width: 60.4844px → 66px - height: 13px → 14px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > b "1.8 MB" - x: 674.4 → 671.1 (-3.3px) - y: 311.4 → 300.3 (-11.1px) - w: 36.3 → 39.6 (+3.3px) - width: 36.2969px → 39.6094px - height: 13px → 14px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) [steps-list] - y: 451.4 → 431.8 (-19.6px) - h: 630 → 550.2 (-79.8px) - grid-template-rows: 152px 138px 152px 144px → 149px 89px 141.188px 127px - height: 630px → 550.188px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + max-width: 700px → — + line-height: 1 → 0.9 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) [step-card] - y: 465.4 → 445.8 (-19.6px) - h: 152 → 149 (-3px) - grid-template-columns: 46px 20px 598.125px → 46px 618.125px - grid-template-rows: 150px → 45px 102px - height: 152px → 149px - min-height: 138px → auto - overflow: visible → hidden - border-radius: 0px → 4px + grid-template-columns: 46px 20px 1fr → 46px 1fr + grid-template-rows: — → auto 1fr + min-height: 138px → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1) [step-index] "01" - y: 466.4 → 446.8 (-19.6px) - h: 150 → 45 (-105px) padding-bottom: 0px → 6px - height: 150px → 45px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-size: 11px → 22px - font-weight: 400 → 600 - line-height: normal → 22px + line-height: — → 1 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg [drag lucide lucide-grip-vertical lucide-icon] - x: 104.6 → 58.6 (-46px) - y: 483.4 → 491.8 (+8.4px) - margin-top: 17px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(203, 211, 218) → rgb(23, 33, 43) - vertical-align: middle → baseline + margin-top: 17px → — + color: #cbd3da [var(--line)] → #17212b [var(--foreground)] body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) [step-body] - x: 124.6 → 104.6 (-20px) - y: 466.4 → 446.8 (-19.6px) - w: 598.1 → 618.1 (+20px) - h: 150 → 147 (-3px) - display: block → flex - flex-direction: row → column - padding-top: 15px → 0px - padding-right: 18px → 0px - padding-bottom: 18px → 0px - padding-left: 18px → 0px - width: 598.125px → 618.125px - height: 150px → 147px - min-width: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + padding-top: 15px → — + padding-right: 18px → — + padding-bottom: 18px → — + padding-left: 18px → — + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - x: 142.6 → 104.6 (-38px) - y: 481.4 → 446.8 (-34.6px) - w: 562.1 → 618.1 (+56px) - h: 65 → 72 (+7px) align-items: center → flex-start - row-gap: 15px → 8px - column-gap: 15px → 8px - padding-top: 0px → 8px - padding-right: 0px → 12px - padding-bottom: 0px → 8px - padding-left: 0px → 12px - width: 562.125px → 618.125px - height: 65px → 72px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + row-gap: 15px → 0.5rem + column-gap: 15px → 0.5rem + padding-top: — → 0.5rem + padding-right: — → 0.75rem + padding-bottom: — → 0.5rem + padding-left: — → 0.75rem body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - x: 142.6 → 116.6 (-26px) - y: 481.4 → 454.8 (-26.6px) - w: 156.7 → 171 (+14.3px) - h: 65 → 55 (-10px) - display: block → flex - flex-direction: row → column - width: 156.703px → 171px - height: 65px → 55px - min-width: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "BACKGROUND" - x: 142.6 → 116.6 (-26px) - y: 489.4 → 454.8 (-34.6px) - w: 67 → 171 (+104px) - display: inline → block - width: auto → 171px - height: auto → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - text-transform: none → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Gradient background" - x: 142.6 → 116.6 (-26px) - y: 510.4 → 472.8 (-37.6px) - w: 156.7 → 171 (+14.3px) - width: 156.703px → 171px - height: 18px → 19px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - x: 607.7 → 589.3 (-18.4px) - y: 505.4 → 454.8 (-50.6px) - w: 97 → 121.4 (+24.4px) - h: 17 → 21.8 (+4.8px) row-gap: 13px → 8px column-gap: 13px → 8px - width: 97px → 121.375px - height: 17px → 21.7812px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove] - y: 505.9 → 456.7 (-49.2px) - w: 16 → 28 (+12px) - h: 16 → 18 (+2px) - display: block → flex - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 16px → 28px - height: 16px → 18px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: — → inline-flex + border-top-width: 0px → medium + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] - x: 658.7 → 663.7 (+5px) - y: 505.9 → 457.7 (-48.2px) - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon] - x: 687.7 → 693.7 (+6px) - y: 505.4 → 457.2 (-48.2px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - x: 607.7 → 589.3 (-18.4px) - y: 507.9 → 454.8 (-53.1px) - w: 38 → 60.4 (+22.4px) - h: 12 → 21.8 (+9.8px) - row-gap: 4px → 4.8px - column-gap: 4px → 4.8px - padding-top: 0px → 2.4px - padding-right: 0px → 7.2px - padding-bottom: 0px → 2.4px - padding-left: 0px → 7.2px - width: 38px → 60.375px - height: 12px → 21.7812px - border-top-width: 0px → 1px - border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216) - border-radius: 0px → 4px - color: rgb(35, 131, 84) → rgb(37, 169, 106) - line-height: normal → 15px - letter-spacing: normal → 0.8px - text-transform: none → uppercase + display: flex → inline-flex + row-gap: 4px → 0.3rem + column-gap: 4px → 0.3rem + padding-top: — → 0.15rem + padding-right: — → 0.45rem + padding-bottom: — → 0.15rem + padding-left: — → 0.45rem + color: rgb(35, 131, 84) → #25a96a [var(--success)] + line-height: — → 1.5 + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - x: 607.7 → 597.5 (-10.2px) - y: 507.9 → 459.7 (-48.2px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106) - color: rgb(35, 131, 84) → rgb(37, 169, 106) - line-height: normal → 15px - letter-spacing: normal → 0.8px - text-transform: none → uppercase - vertical-align: middle → baseline + color: rgb(35, 131, 84) → #25a96a [var(--success)] + line-height: — → 1.5 + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [controls] - x: 142.6 → 104.6 (-38px) - y: 546.4 → 518.8 (-27.6px) - w: 562.1 → 618.1 (+56px) - h: 52 → 75 (+23px) row-gap: 16px → 0px column-gap: 16px → 24px - grid-template-columns: 189px 155.047px 186.078px → 190.031px 190.047px 190.047px - grid-template-rows: 52px → 75px - width: 562.125px → 618.125px - height: 52px → 75px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + grid-template-columns: 1.1fr 1fr 1.2fr → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - x: 142.6 → 104.6 (-38px) - y: 546.4 → 518.8 (-27.6px) - h: 52 → 75 (+23px) - display: block → flex - flex-direction: row → column - row-gap: normal → 8px - column-gap: normal → 8px - padding-top: 0px → 10px - width: 189px → 190.031px - height: 52px → 75px - min-width: auto → 0px - border-top-width: 0px → 1px + display: — → flex + flex-direction: — → column + row-gap: — → 8px + column-gap: — → 8px + padding-top: — → 10px + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "COLOR" - x: 142.6 → 104.6 (-38px) - y: 546.4 → 529.8 (-16.6px) - align-items: normal → baseline - row-gap: normal → 8px - column-gap: normal → 8px - width: 189px → 190.031px - height: 12px → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: 0.8px → 0.5px - text-transform: none → uppercase + align-items: — → baseline + row-gap: — → 8px + column-gap: — → 8px + letter-spacing: 0.08em → 0.05em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [color-field] - x: 142.6 → 104.6 (-38px) - y: 566.4 → 558.8 (-7.6px) h: 32 → 27.2 (-4.8px) - row-gap: 8px → 6.4px - column-gap: 8px → 6.4px - padding-right: 8px → 0px - padding-left: 8px → 0px - width: 189px → 190.031px - height: 32px → 27.1875px - min-width: 0px → auto - min-height: 0px → auto - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + row-gap: 8px → 0.4rem + column-gap: 8px → 0.4rem + padding-right: 8px → — + padding-left: 8px → — + height: 32px → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span [swatch] - x: 151.6 → 104.6 (-47px) - y: 575.4 → 559.6 (-15.8px) w: 14 → 25.6 (+11.6px) h: 14 → 25.6 (+11.6px) - width: 14px → 25.5938px - height: 14px → 25.5938px - border-radius: 0px → 4px + width: 14px → 1.6rem + height: 14px → 1.6rem body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > input - x: 173.6 → 136.6 (-37px) - y: 575.9 → 558.8 (-17.1px) - w: 127 → 137.7 (+10.7px) - h: 13 → 27.2 (+14.2px) - padding-top: 0px → 5.6px - padding-right: 0px → 8px - padding-bottom: 0px → 5.6px - padding-left: 0px → 8px - width: 127px → 137.656px - height: 13px → 27.1875px - border-top-width: 0px → 1px - border-top-style: none → solid - border-top-color: rgb(23, 33, 43) → rgb(203, 211, 218) - border-radius: 0px → 4px - background-color: rgba(0, 0, 0, 0) → rgb(238, 241, 244) - background-position: 0px 0px → 0% 0% - text-transform: none → uppercase + padding-top: — → 0.35rem + padding-right: — → 0.5rem + padding-bottom: — → 0.35rem + padding-left: — → 0.5rem + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + background-color: initial → — + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > svg [lucide lucide-chevron-down lucide-icon] - x: 308.6 → 280.6 (-28px) - y: 575.4 → 565.4 (-10px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - color: rgb(23, 33, 43) → rgb(109, 120, 131) - vertical-align: middle → baseline + color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - x: 347.6 → 318.6 (-29px) - y: 546.4 → 518.8 (-27.6px) - w: 155 → 190 (+35px) - h: 52 → 75 (+23px) - display: block → flex - flex-direction: row → column - row-gap: normal → 0px - column-gap: normal → 0px - padding-top: 0px → 10px - width: 155.047px → 190.047px - height: 52px → 75px - min-width: auto → 0px - border-top-width: 0px → 1px + display: — → flex + flex-direction: — → column + row-gap: — → 0px + column-gap: — → 0px + padding-top: — → 10px + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "DIRECTION" - x: 347.6 → 318.6 (-29px) - y: 546.4 → 529.8 (-16.6px) - w: 155 → 190 (+35px) - h: 12 → 14 (+2px) - align-items: normal → center - row-gap: normal → 8px - column-gap: normal → 8px - width: 155.047px → 190.047px - height: 12px → 14px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: 0.8px → 0.5px - text-transform: none → uppercase + align-items: — → center + row-gap: — → 0.5rem + column-gap: — → 0.5rem + letter-spacing: 0.08em → 0.05em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label > output "135 °" - x: 471.1 → 473.2 (+2.1px) - y: 546.4 → 529.8 (-16.6px) - w: 31.5 → 35.5 (+4px) - h: 12 → 14 (+2px) - width: 31.5156px → 35.5px - height: 12px → 14px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 10px → 11px - letter-spacing: 0.8px → 0.5px - text-transform: none → uppercase + letter-spacing: 0.08em → 0.05em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > input - x: 347.6 → 320.6 (-27px) - y: 567.4 → 553.8 (-13.6px) w: 155 → 190 (+35px) - display: inline-block → block - margin-top: 0px → 2px - margin-right: 0px → 2px - margin-bottom: 0px → 2px - margin-left: 0px → 2px - width: 155.047px → 190.047px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) - background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) - color: rgb(23, 33, 43) → rgb(16, 16, 16) - font-size: 16px → 13.3333px - line-height: 24px → normal + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [control-block] - x: 518.6 → 532.7 (+14.1px) - y: 546.4 → 518.8 (-27.6px) - w: 186.1 → 190 (+3.9px) - h: 52 → 75 (+23px) - display: block → flex - flex-direction: row → column - row-gap: normal → 8px - column-gap: normal → 8px - padding-top: 0px → 10px - width: 186.078px → 190.047px - height: 52px → 75px - min-width: auto → 0px - border-top-width: 0px → 1px + display: — → flex + flex-direction: — → column + row-gap: — → 8px + column-gap: — → 8px + padding-top: — → 10px + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label "OPACITY" - x: 518.6 → 532.7 (+14.1px) - y: 546.4 → 529.8 (-16.6px) - w: 186.1 → 190 (+3.9px) - h: 12 → 24 (+12px) - display: flex → block - justify-content: space-between → normal - margin-bottom: 8px → 0px - width: 186.078px → 190.047px - height: 12px → 24px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 0.8px → normal + display: flex → — + justify-content: space-between → — + margin-bottom: 8px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.08em → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label > output "100%" - x: 679.5 → 601.7 (-77.8px) - y: 546.4 → 531.8 (-14.6px) - w: 25.2 → 43.6 (+18.4px) - h: 12 → 20 (+8px) - display: block → inline - width: 25.2031px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 0.8px → normal + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.08em → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div [segmented] - x: 518.6 → 532.7 (+14.1px) - y: 566.4 → 561.8 (-4.6px) - w: 186.1 → 190 (+3.9px) - width: 186.078px → 190.047px - min-width: 0px → auto - min-height: 0px → auto - overflow: visible → hidden - border-radius: 0px → 4px - background-color: rgba(0, 0, 0, 0) → rgb(238, 241, 244) + display: flex → inline-flex body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(2) [segment selected] "100" - x: 565.7 → 533.7 (-32px) - y: 567.4 → 562.8 (-4.6px) - w: 46 → 42.2 (-3.8px) - display: block → flex - align-items: normal → center - padding-right: 0px → 11.2px - padding-left: 0px → 11.2px - width: 46.0312px → 42.1875px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px - text-transform: none → uppercase + display: — → inline-flex + align-items: — → center + padding-right: — → 0.7rem + padding-left: — → 0.7rem + border-top-width: 0px → medium + letter-spacing: — → 0.06em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(3) [segment] "75" - x: 611.7 → 575.9 (-35.8px) - y: 567.4 → 562.8 (-4.6px) - w: 46 → 36.6 (-9.4px) - display: block → flex - align-items: normal → center - padding-right: 0px → 11.2px - padding-left: 0px → 11.2px - width: 46.0156px → 36.5781px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px - text-transform: none → uppercase + display: — → inline-flex + align-items: — → center + padding-right: — → 0.7rem + padding-left: — → 0.7rem + border-top-width: 0px → medium + letter-spacing: — → 0.06em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(4) [segment] "50" - x: 657.7 → 612.4 (-45.3px) - y: 567.4 → 562.8 (-4.6px) - w: 46 → 36.6 (-9.4px) - display: block → flex - align-items: normal → center - padding-right: 0px → 11.2px - padding-left: 0px → 11.2px - width: 46.0156px → 36.5781px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px - text-transform: none → uppercase + display: — → inline-flex + align-items: — → center + padding-right: — → 0.7rem + padding-left: — → 0.7rem + border-top-width: 0px → medium + letter-spacing: — → 0.06em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(1) [segment] "25" - x: 519.6 → 649 (+129.4px) - y: 567.4 → 562.8 (-4.6px) - w: 46 → 36.6 (-9.4px) - display: block → flex - align-items: normal → center - padding-right: 0px → 11.2px - padding-left: 0px → 11.2px - width: 46.0156px → 36.5781px - border-top-color: rgb(255, 255, 255) → rgb(109, 120, 131) - background-color: rgb(23, 105, 210) → rgba(0, 0, 0, 0) - color: rgb(255, 255, 255) → rgb(109, 120, 131) - letter-spacing: normal → 0.6px - text-transform: none → uppercase + display: — → inline-flex + align-items: — → center + padding-right: — → 0.7rem + padding-left: — → 0.7rem + border-top-width: 0px → medium + background-color: — → transparent + color: rgb(255, 255, 255) → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) [step-card] - y: 627.4 → 604.8 (-22.6px) - h: 138 → 89 (-49px) - grid-template-columns: 46px 20px 598.125px → 46px 618.125px - grid-template-rows: 136px → 45px 42px - height: 138px → 89px - min-height: 138px → auto - overflow: visible → hidden - border-radius: 0px → 4px + grid-template-columns: 46px 20px 1fr → 46px 1fr + grid-template-rows: — → auto 1fr + min-height: 138px → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(1) [step-index] "02" - y: 628.4 → 605.8 (-22.6px) - h: 136 → 45 (-91px) padding-bottom: 0px → 6px - height: 136px → 45px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-size: 11px → 22px - font-weight: 400 → 600 - line-height: normal → 22px + line-height: — → 1 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > svg [drag lucide lucide-grip-vertical lucide-icon] - x: 104.6 → 58.6 (-46px) - y: 645.4 → 650.8 (+5.4px) - margin-top: 17px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(203, 211, 218) → rgb(23, 33, 43) - vertical-align: middle → baseline + margin-top: 17px → — + color: #cbd3da [var(--line)] → #17212b [var(--foreground)] body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) [step-body] - x: 124.6 → 104.6 (-20px) - y: 628.4 → 605.8 (-22.6px) - w: 598.1 → 618.1 (+20px) - h: 136 → 87 (-49px) - display: block → flex - flex-direction: row → column - padding-top: 15px → 0px - padding-right: 18px → 0px - padding-bottom: 18px → 0px - padding-left: 18px → 0px - width: 598.125px → 618.125px - height: 136px → 87px - min-width: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + padding-top: 15px → — + padding-right: 18px → — + padding-bottom: 18px → — + padding-left: 18px → — + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - x: 142.6 → 104.6 (-38px) - y: 643.4 → 605.8 (-37.6px) - w: 562.1 → 618.1 (+56px) - h: 65 → 72 (+7px) align-items: center → flex-start - row-gap: 15px → 8px - column-gap: 15px → 8px - padding-top: 0px → 8px - padding-right: 0px → 12px - padding-bottom: 0px → 8px - padding-left: 0px → 12px - width: 562.125px → 618.125px - height: 65px → 72px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + row-gap: 15px → 0.5rem + column-gap: 15px → 0.5rem + padding-top: — → 0.5rem + padding-right: — → 0.75rem + padding-bottom: — → 0.5rem + padding-left: — → 0.75rem body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - x: 142.6 → 116.6 (-26px) - y: 643.4 → 613.8 (-29.6px) - w: 140.2 → 153 (+12.8px) - h: 65 → 55 (-10px) - display: block → flex - flex-direction: row → column - width: 140.203px → 153px - height: 65px → 55px - min-width: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TRANSFORM" - x: 142.6 → 116.6 (-26px) - y: 651.4 → 613.8 (-37.6px) - w: 60.3 → 153 (+92.7px) - display: inline → block - width: auto → 153px - height: auto → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - text-transform: none → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Remove background" - x: 142.6 → 116.6 (-26px) - y: 672.4 → 631.8 (-40.6px) - w: 140.2 → 153 (+12.8px) - width: 140.203px → 153px - height: 18px → 19px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - x: 607.7 → 589.3 (-18.4px) - y: 667.4 → 613.8 (-53.6px) - w: 97 → 121.4 (+24.4px) - h: 17 → 21.8 (+4.8px) row-gap: 13px → 8px column-gap: 13px → 8px - width: 97px → 121.375px - height: 17px → 21.7812px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove] - y: 667.9 → 615.7 (-52.2px) - w: 16 → 28 (+12px) - h: 16 → 18 (+2px) - display: block → flex - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 16px → 28px - height: 16px → 18px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: — → inline-flex + border-top-width: 0px → medium + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] - x: 658.7 → 663.7 (+5px) - y: 667.9 → 616.7 (-51.2px) - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon] - x: 687.7 → 693.7 (+6px) - y: 667.4 → 616.2 (-51.2px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - x: 607.7 → 589.3 (-18.4px) - y: 669.9 → 613.8 (-56.1px) - w: 38 → 60.4 (+22.4px) - h: 12 → 21.8 (+9.8px) - row-gap: 4px → 4.8px - column-gap: 4px → 4.8px - padding-top: 0px → 2.4px - padding-right: 0px → 7.2px - padding-bottom: 0px → 2.4px - padding-left: 0px → 7.2px - width: 38px → 60.375px - height: 12px → 21.7812px - border-top-width: 0px → 1px - border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216) - border-radius: 0px → 4px - color: rgb(35, 131, 84) → rgb(37, 169, 106) - line-height: normal → 15px - letter-spacing: normal → 0.8px - text-transform: none → uppercase + display: flex → inline-flex + row-gap: 4px → 0.3rem + column-gap: 4px → 0.3rem + padding-top: — → 0.15rem + padding-right: — → 0.45rem + padding-bottom: — → 0.15rem + padding-left: — → 0.45rem + color: rgb(35, 131, 84) → #25a96a [var(--success)] + line-height: — → 1.5 + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - x: 607.7 → 597.5 (-10.2px) - y: 669.9 → 618.7 (-51.2px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106) - color: rgb(35, 131, 84) → rgb(37, 169, 106) - line-height: normal → 15px - letter-spacing: normal → 0.8px - text-transform: none → uppercase - vertical-align: middle → baseline - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [transform-note] "Automatic subject detection enabled" - x: 142.6 → 104.6 (-38px) - y: 708.4 → 677.8 (-30.6px) - w: 562.1 → 618.1 (+56px) - width: 562.125px → 618.125px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > svg [lucide lucide-icon lucide-sliders-horizontal] - x: 142.6 → 104.6 (-38px) - y: 708.4 → 677.8 (-30.6px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - vertical-align: middle → baseline + color: rgb(35, 131, 84) → #25a96a [var(--success)] + line-height: — → 1.5 + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) [step-card] - y: 775.4 → 703.8 (-71.6px) - h: 152 → 141.2 (-10.8px) - grid-template-columns: 46px 20px 598.125px → 46px 618.125px - grid-template-rows: 150px → 45px 94.1875px - height: 152px → 141.188px - min-height: 138px → auto - overflow: visible → hidden - border-radius: 0px → 4px + grid-template-columns: 46px 20px 1fr → 46px 1fr + grid-template-rows: — → auto 1fr + min-height: 138px → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(1) [step-index] "03" - y: 776.4 → 704.8 (-71.6px) - h: 150 → 45 (-105px) padding-bottom: 0px → 6px - height: 150px → 45px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-size: 11px → 22px - font-weight: 400 → 600 - line-height: normal → 22px + line-height: — → 1 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > svg [drag lucide lucide-grip-vertical lucide-icon] - x: 104.6 → 58.6 (-46px) - y: 793.4 → 749.8 (-43.6px) - margin-top: 17px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(203, 211, 218) → rgb(23, 33, 43) - vertical-align: middle → baseline + margin-top: 17px → — + color: #cbd3da [var(--line)] → #17212b [var(--foreground)] body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) [step-body] - x: 124.6 → 104.6 (-20px) - y: 776.4 → 704.8 (-71.6px) - w: 598.1 → 618.1 (+20px) - h: 150 → 139.2 (-10.8px) - display: block → flex - flex-direction: row → column - padding-top: 15px → 0px - padding-right: 18px → 0px - padding-bottom: 18px → 0px - padding-left: 18px → 0px - width: 598.125px → 618.125px - height: 150px → 139.188px - min-width: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + padding-top: 15px → — + padding-right: 18px → — + padding-bottom: 18px → — + padding-left: 18px → — + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - x: 142.6 → 104.6 (-38px) - y: 791.4 → 704.8 (-86.6px) - w: 562.1 → 618.1 (+56px) - h: 65 → 72 (+7px) align-items: center → flex-start - row-gap: 15px → 8px - column-gap: 15px → 8px - padding-top: 0px → 8px - padding-right: 0px → 12px - padding-bottom: 0px → 8px - padding-left: 0px → 12px - width: 562.125px → 618.125px - height: 65px → 72px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + row-gap: 15px → 0.5rem + column-gap: 15px → 0.5rem + padding-top: — → 0.5rem + padding-right: — → 0.75rem + padding-bottom: — → 0.5rem + padding-left: — → 0.75rem body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - x: 142.6 → 116.6 (-26px) - y: 791.4 → 712.8 (-78.6px) - w: 90.7 → 99 (+8.3px) - h: 65 → 55 (-10px) - display: block → flex - flex-direction: row → column - width: 90.7188px → 99px - height: 65px → 55px - min-width: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - x: 142.6 → 116.6 (-26px) - y: 799.4 → 712.8 (-86.6px) - w: 33.5 → 99 (+65.5px) - display: inline → block - width: auto → 99px - height: auto → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - text-transform: none → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Add outline" - x: 142.6 → 116.6 (-26px) - y: 820.4 → 730.8 (-89.6px) - w: 90.7 → 99 (+8.3px) - width: 90.7188px → 99px - height: 18px → 19px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - x: 607.7 → 589.3 (-18.4px) - y: 815.4 → 712.8 (-102.6px) - w: 97 → 121.4 (+24.4px) - h: 17 → 21.8 (+4.8px) row-gap: 13px → 8px column-gap: 13px → 8px - width: 97px → 121.375px - height: 17px → 21.7812px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove] - y: 815.9 → 714.7 (-101.2px) - w: 16 → 28 (+12px) - h: 16 → 18 (+2px) - display: block → flex - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 16px → 28px - height: 16px → 18px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: — → inline-flex + border-top-width: 0px → medium + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] - x: 658.7 → 663.7 (+5px) - y: 815.9 → 715.7 (-100.2px) - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon] - x: 687.7 → 693.7 (+6px) - y: 815.4 → 715.2 (-100.2px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - x: 607.7 → 589.3 (-18.4px) - y: 817.9 → 712.8 (-105.1px) - w: 38 → 60.4 (+22.4px) - h: 12 → 21.8 (+9.8px) - row-gap: 4px → 4.8px - column-gap: 4px → 4.8px - padding-top: 0px → 2.4px - padding-right: 0px → 7.2px - padding-bottom: 0px → 2.4px - padding-left: 0px → 7.2px - width: 38px → 60.375px - height: 12px → 21.7812px - border-top-width: 0px → 1px - border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216) - border-radius: 0px → 4px - color: rgb(35, 131, 84) → rgb(37, 169, 106) - line-height: normal → 15px - letter-spacing: normal → 0.8px - text-transform: none → uppercase + display: flex → inline-flex + row-gap: 4px → 0.3rem + column-gap: 4px → 0.3rem + padding-top: — → 0.15rem + padding-right: — → 0.45rem + padding-bottom: — → 0.15rem + padding-left: — → 0.45rem + color: rgb(35, 131, 84) → #25a96a [var(--success)] + line-height: — → 1.5 + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - x: 607.7 → 597.5 (-10.2px) - y: 817.9 → 717.7 (-100.2px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106) - color: rgb(35, 131, 84) → rgb(37, 169, 106) - line-height: normal → 15px - letter-spacing: normal → 0.8px - text-transform: none → uppercase - vertical-align: middle → baseline + color: rgb(35, 131, 84) → #25a96a [var(--success)] + line-height: — → 1.5 + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - x: 142.6 → 104.6 (-38px) - y: 856.4 → 776.8 (-79.6px) - w: 562.1 → 618.1 (+56px) - h: 52 → 67.2 (+15.2px) row-gap: 16px → 0px - grid-template-columns: 273.062px 273.062px → 301.062px 301.062px - grid-template-rows: 52px → 67.1875px - width: 562.125px → 618.125px - height: 52px → 67.1875px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + grid-template-columns: 1fr 1fr → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - x: 142.6 → 104.6 (-38px) - y: 856.4 → 776.8 (-79.6px) - w: 273.1 → 301.1 (+28px) - h: 52 → 67.2 (+15.2px) - display: block → flex - flex-direction: row → column - row-gap: normal → 0px - column-gap: normal → 0px - padding-top: 0px → 10px - width: 273.062px → 301.062px - height: 52px → 67.1875px - min-width: auto → 0px - border-top-width: 0px → 1px + display: — → flex + flex-direction: — → column + row-gap: — → 0px + column-gap: — → 0px + padding-top: — → 10px + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "WIDTH" - x: 142.6 → 104.6 (-38px) - y: 856.4 → 787.8 (-68.6px) - w: 273.1 → 301.1 (+28px) - h: 12 → 14 (+2px) - align-items: normal → center - row-gap: normal → 8px - column-gap: normal → 8px - width: 273.062px → 301.062px - height: 12px → 14px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: 0.8px → 0.5px - text-transform: none → uppercase + align-items: — → center + row-gap: — → 0.5rem + column-gap: — → 0.5rem + letter-spacing: 0.08em → 0.05em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "2 px" - x: 390.4 → 377.3 (-13.1px) - y: 856.4 → 787.8 (-68.6px) - w: 25.2 → 28.4 (+3.2px) - h: 12 → 14 (+2px) - width: 25.2188px → 28.4062px - height: 12px → 14px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 10px → 11px - letter-spacing: 0.8px → 0.5px - text-transform: none → uppercase + letter-spacing: 0.08em → 0.05em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - x: 142.6 → 106.6 (-36px) - y: 877.4 → 811.8 (-65.6px) w: 273.1 → 301.1 (+28px) - display: inline-block → block - margin-top: 0px → 2px - margin-right: 0px → 2px - margin-bottom: 0px → 2px - margin-left: 0px → 2px - width: 273.062px → 301.062px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) - background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) - color: rgb(23, 33, 43) → rgb(16, 16, 16) - font-size: 16px → 13.3333px - line-height: 24px → normal + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - x: 431.7 → 421.7 (-10px) - y: 856.4 → 776.8 (-79.6px) - w: 273.1 → 301.1 (+28px) - h: 52 → 67.2 (+15.2px) - display: block → flex - flex-direction: row → column - row-gap: normal → 8px - column-gap: normal → 8px - padding-top: 0px → 10px - width: 273.062px → 301.062px - height: 52px → 67.1875px - min-width: auto → 0px - border-top-width: 0px → 1px + display: — → flex + flex-direction: — → column + row-gap: — → 8px + column-gap: — → 8px + padding-top: — → 10px + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "COLOR" - x: 431.7 → 421.7 (-10px) - y: 856.4 → 787.8 (-68.6px) - w: 273.1 → 301.1 (+28px) - align-items: normal → baseline - row-gap: normal → 8px - column-gap: normal → 8px - width: 273.062px → 301.062px - height: 12px → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: 0.8px → 0.5px - text-transform: none → uppercase + align-items: — → baseline + row-gap: — → 8px + column-gap: — → 8px + letter-spacing: 0.08em → 0.05em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [color-field] - x: 431.7 → 421.7 (-10px) - y: 876.4 → 816.8 (-59.6px) - w: 273.1 → 301.1 (+28px) h: 32 → 27.2 (-4.8px) - row-gap: 8px → 6.4px - column-gap: 8px → 6.4px - padding-right: 8px → 0px - padding-left: 8px → 0px - width: 273.062px → 301.062px - height: 32px → 27.1875px - min-width: 0px → auto - min-height: 0px → auto - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + row-gap: 8px → 0.4rem + column-gap: 8px → 0.4rem + padding-right: 8px → — + padding-left: 8px → — + height: 32px → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span [dark swatch] - x: 440.7 → 421.7 (-19px) - y: 885.4 → 817.6 (-67.8px) w: 14 → 25.6 (+11.6px) h: 14 → 25.6 (+11.6px) - width: 14px → 25.5938px - height: 14px → 25.5938px - border-radius: 0px → 4px + width: 14px → 1.6rem + height: 14px → 1.6rem body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > input - x: 462.7 → 453.6 (-9.1px) - y: 885.9 → 816.8 (-69.1px) - w: 233.1 → 269.1 (+36px) - h: 13 → 27.2 (+14.2px) - padding-top: 0px → 5.6px - padding-right: 0px → 8px - padding-bottom: 0px → 5.6px - padding-left: 0px → 8px - width: 233.062px → 269.078px - height: 13px → 27.1875px - border-top-width: 0px → 1px - border-top-style: none → solid - border-top-color: rgb(23, 33, 43) → rgb(203, 211, 218) - border-radius: 0px → 4px - background-color: rgba(0, 0, 0, 0) → rgb(238, 241, 244) - background-position: 0px 0px → 0% 0% - text-transform: none → uppercase + padding-top: — → 0.35rem + padding-right: — → 0.5rem + padding-bottom: — → 0.35rem + padding-left: — → 0.5rem + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + background-color: initial → — + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) [step-card] - y: 937.4 → 855 (-82.4px) - h: 144 → 127 (-17px) - grid-template-columns: 46px 20px 598.125px → 46px 618.125px - grid-template-rows: 142px → 45px 80px - height: 144px → 127px - min-height: 138px → auto - overflow: visible → hidden - border-radius: 0px → 4px + grid-template-columns: 46px 20px 1fr → 46px 1fr + grid-template-rows: — → auto 1fr + min-height: 138px → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(1) [step-index] "04" - y: 938.4 → 856 (-82.4px) - h: 142 → 45 (-97px) padding-bottom: 0px → 6px - height: 142px → 45px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-size: 11px → 22px - font-weight: 400 → 600 - line-height: normal → 22px + line-height: — → 1 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > svg [drag lucide lucide-grip-vertical lucide-icon] - x: 104.6 → 58.6 (-46px) - y: 955.4 → 901 (-54.4px) - margin-top: 17px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(203, 211, 218) → rgb(23, 33, 43) - vertical-align: middle → baseline + margin-top: 17px → — + color: #cbd3da [var(--line)] → #17212b [var(--foreground)] body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) [step-body] - x: 124.6 → 104.6 (-20px) - y: 938.4 → 856 (-82.4px) - w: 598.1 → 618.1 (+20px) - h: 142 → 125 (-17px) - display: block → flex - flex-direction: row → column - padding-top: 15px → 0px - padding-right: 18px → 0px - padding-bottom: 18px → 0px - padding-left: 18px → 0px - width: 598.125px → 618.125px - height: 142px → 125px - min-width: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + padding-top: 15px → — + padding-right: 18px → — + padding-bottom: 18px → — + padding-left: 18px → — + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - x: 142.6 → 104.6 (-38px) - y: 953.4 → 856 (-97.4px) - w: 562.1 → 618.1 (+56px) - h: 65 → 72 (+7px) align-items: center → flex-start - row-gap: 15px → 8px - column-gap: 15px → 8px - padding-top: 0px → 8px - padding-right: 0px → 12px - padding-bottom: 0px → 8px - padding-left: 0px → 12px - width: 562.125px → 618.125px - height: 65px → 72px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + row-gap: 15px → 0.5rem + column-gap: 15px → 0.5rem + padding-top: — → 0.5rem + padding-right: — → 0.75rem + padding-bottom: — → 0.5rem + padding-left: — → 0.75rem body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - x: 142.6 → 116.6 (-26px) - y: 953.4 → 864 (-89.4px) - w: 107.2 → 117 (+9.8px) - h: 65 → 55 (-10px) - display: block → flex - flex-direction: row → column - width: 107.219px → 117px - height: 65px → 55px - min-width: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - x: 142.6 → 116.6 (-26px) - y: 961.4 → 864 (-97.4px) - w: 33.5 → 117 (+83.5px) - display: inline → block - width: auto → 117px - height: auto → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - text-transform: none → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > h2 [step-title] "Round corners" - x: 142.6 → 116.6 (-26px) - y: 982.4 → 882 (-100.4px) - w: 107.2 → 117 (+9.8px) - width: 107.219px → 117px - height: 18px → 19px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - x: 607.7 → 589.3 (-18.4px) - y: 977.4 → 864 (-113.4px) - w: 97 → 121.4 (+24.4px) - h: 17 → 21.8 (+4.8px) row-gap: 13px → 8px column-gap: 13px → 8px - width: 97px → 121.375px - height: 17px → 21.7812px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove] - y: 977.9 → 865.9 (-112px) - w: 16 → 28 (+12px) - h: 16 → 18 (+2px) - display: block → flex - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 16px → 28px - height: 16px → 18px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: — → inline-flex + border-top-width: 0px → medium + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] - x: 658.7 → 663.7 (+5px) - y: 977.9 → 866.9 (-111px) - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > svg [lucide lucide-ellipsis lucide-icon] - x: 687.7 → 693.7 (+6px) - y: 977.4 → 866.4 (-111px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - x: 607.7 → 589.3 (-18.4px) - y: 979.9 → 864 (-115.9px) - w: 38 → 60.4 (+22.4px) - h: 12 → 21.8 (+9.8px) - row-gap: 4px → 4.8px - column-gap: 4px → 4.8px - padding-top: 0px → 2.4px - padding-right: 0px → 7.2px - padding-bottom: 0px → 2.4px - padding-left: 0px → 7.2px - width: 38px → 60.375px - height: 12px → 21.7812px - border-top-width: 0px → 1px - border-top-color: rgb(203, 211, 218) → color(srgb 0.535686 0.761569 0.679216) - border-radius: 0px → 4px - color: rgb(35, 131, 84) → rgb(37, 169, 106) - line-height: normal → 15px - letter-spacing: normal → 0.8px - text-transform: none → uppercase + display: flex → inline-flex + row-gap: 4px → 0.3rem + column-gap: 4px → 0.3rem + padding-top: — → 0.15rem + padding-right: — → 0.45rem + padding-bottom: — → 0.15rem + padding-left: — → 0.45rem + color: rgb(35, 131, 84) → #25a96a [var(--success)] + line-height: — → 1.5 + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - x: 607.7 → 597.5 (-10.2px) - y: 979.9 → 868.9 (-111px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106) - color: rgb(35, 131, 84) → rgb(37, 169, 106) - line-height: normal → 15px - letter-spacing: normal → 0.8px - text-transform: none → uppercase - vertical-align: middle → baseline + color: rgb(35, 131, 84) → #25a96a [var(--success)] + line-height: — → 1.5 + letter-spacing: — → 0.08em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - x: 142.6 → 104.6 (-38px) - y: 1018.4 → 928 (-90.4px) - w: 562.1 → 618.1 (+56px) - h: 44 → 53 (+9px) row-gap: 16px → 0px - grid-template-columns: 273.062px 273.062px → 301.062px 301.062px - grid-template-rows: 44px → 53px - width: 562.125px → 618.125px - height: 44px → 53px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + grid-template-columns: 1fr 1fr → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - x: 142.6 → 104.6 (-38px) - y: 1018.4 → 928 (-90.4px) - w: 273.1 → 301.1 (+28px) - h: 44 → 53 (+9px) - display: block → flex - flex-direction: row → column - row-gap: normal → 0px - column-gap: normal → 0px - padding-top: 0px → 10px - width: 273.062px → 301.062px - height: 44px → 53px - min-width: auto → 0px - border-top-width: 0px → 1px + display: — → flex + flex-direction: — → column + row-gap: — → 0px + column-gap: — → 0px + padding-top: — → 10px + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "RADIUS" - x: 142.6 → 104.6 (-38px) - y: 1018.4 → 939 (-79.4px) - w: 273.1 → 301.1 (+28px) - h: 12 → 14 (+2px) - align-items: normal → center - row-gap: normal → 8px - column-gap: normal → 8px - width: 273.062px → 301.062px - height: 12px → 14px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: 0.8px → 0.5px - text-transform: none → uppercase + align-items: — → center + row-gap: — → 0.5rem + column-gap: — → 0.5rem + letter-spacing: 0.08em → 0.05em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "18 px" - x: 384.1 → 370.2 (-13.9px) - y: 1018.4 → 939 (-79.4px) - w: 31.5 → 35.5 (+4px) - h: 12 → 14 (+2px) - width: 31.5156px → 35.5px - height: 12px → 14px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 10px → 11px - letter-spacing: 0.8px → 0.5px - text-transform: none → uppercase + letter-spacing: 0.08em → 0.05em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - x: 142.6 → 106.6 (-36px) - y: 1039.4 → 963 (-76.4px) w: 273.1 → 301.1 (+28px) - display: inline-block → block - margin-top: 0px → 2px - margin-right: 0px → 2px - margin-bottom: 0px → 2px - margin-left: 0px → 2px - width: 273.062px → 301.062px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) - background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) - color: rgb(23, 33, 43) → rgb(16, 16, 16) - font-size: 16px → 13.3333px - line-height: 24px → normal + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [toggle-row] - x: 431.7 → 421.7 (-10px) - y: 1018.4 → 928 (-90.4px) - w: 273.1 → 301.1 (+28px) - h: 44 → 53 (+9px) - display: block → flex - justify-content: normal → space-between - align-items: normal → center - row-gap: normal → 16px - column-gap: normal → 16px - padding-top: 0px → 10px - width: 273.062px → 301.062px - height: 44px → 53px - min-width: auto → 0px - border-top-width: 0px → 1px - font-size: 16px → 13.6px - line-height: 24px → 20.4px + display: — → flex + justify-content: — → space-between + align-items: — → center + row-gap: — → 1rem + column-gap: — → 1rem + padding-top: — → 10px + min-width: — → 0px + font-size: — → 0.85rem + line-height: — → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "Preserve aspect ratio" - x: 431.7 → 421.7 (-10px) - y: 1021.4 → 949.8 (-71.6px) - w: 155.6 → 129 (-26.6px) - h: 17 → 20.4 (+3.4px) - display: inline → block - width: auto → 129.031px - height: auto → 20.3906px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 16px → 13.6px - line-height: 24px → 20.4px + font-size: — → 0.85rem + line-height: — → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button [on toggle] - x: 587.3 → 684.3 (+97px) - y: 1018.4 → 949.6 (-68.8px) w: 32 → 38.4 (+6.4px) h: 18 → 20.8 (+2.8px) - display: inline-block → block - width: 32px → 38.3906px - height: 18px → 20.7969px - min-width: 0px → auto - min-height: 0px → auto - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 999px - background-color: rgba(0, 0, 0, 0) → rgb(23, 105, 210) - color: rgb(23, 33, 43) → rgb(0, 0, 0) - font-size: 16px → 13.3333px - line-height: 24px → normal + width: 32px → 2.4rem + height: 18px → 1.3rem + font-size: inherit → 0.85rem + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i [toggle-knob] x: 603.3 → 703.9 (+100.6px) y: 1027.4 → 951.6 (-75.8px) w: 0 → 16.8 (+16.8px) h: 0 → 16.8 (+16.8px) - display: inline → block - position: static → absolute - top: auto → 1px - right: auto → 18.5938px - bottom: auto → 1px - left: auto → 1px - width: auto → 16.7969px - height: auto → 16.7969px - transform: none → matrix(1, 0, 0, 1, 17.6, 0) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - border-radius: 0px → 50% - background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) - color: rgb(23, 33, 43) → rgb(0, 0, 0) - font-size: 16px → 13.3333px - line-height: 24px → normal - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) [pipeline-footer] - y: 1081.4 → 982 (-99.4px) - height: 36px → 35px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + position: — → absolute + top: — → 1px + left: — → 1px + width: — → calc(-4px + 1.3rem) + height: — → calc(-4px + 1.3rem) + transform: — → translateX(1.1rem) + background-color: — → rgb(255, 255, 255) + font-size: inherit → 0.85rem + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset-btn] "Reset pipeline" - y: 1099.4 → 1000 (-99.4px) - w: 97.1 → 109.8 (+12.7px) - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 97.0625px → 109.75px - height: 18px → 17px - background-position: 0px 0px → 0% 0% - line-height: 18px → normal + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw] - x: 57.6 → 63.6 (+6px) - y: 1101.4 → 1001.5 (-99.9px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - line-height: 18px → normal - vertical-align: middle → baseline - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span [auto-note] "changes are applied automatically" - x: 510.1 → 489.9 (-20.2px) - y: 1101.9 → 1001.5 (-100.4px) - w: 213.6 → 233.8 (+20.2px) - width: 213.594px → 233.812px - height: 13px → 14px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i [status-dot] - x: 510.1 → 489.9 (-20.2px) - y: 1105.4 → 1004.5 (-100.9px) w: 6 → 8 (+2px) h: 6 → 8 (+2px) width: 6px → 8px height: 6px → 8px - box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] - y: 392.4 → 381.8 (-10.6px) - h: 59 → 50 (-9px) - row-gap: normal → 16px - column-gap: normal → 16px - height: 59px → 50px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + row-gap: — → 16px + column-gap: — → 16px body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div [section-text] - y: 392.4 → 381.8 (-10.6px) - w: 148.5 → 153.6 (+5.1px) - h: 46 → 37 (-9px) - display: block → flex - flex-direction: row → column - row-gap: normal → 2px - column-gap: normal → 2px - width: 148.484px → 153.609px - height: 46px → 37px - min-width: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > strong "4 active steps" - y: 421.4 → 400.8 (-20.6px) - w: 148.5 → 153.6 (+5.1px) - width: 148.484px → 153.609px - height: 17px → 18px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > strong > em "• LIVE" - x: 173.1 → 175.2 (+2.1px) - y: 425.4 → 404.8 (-20.6px) - w: 33 → 36 (+3px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(37, 169, 106) + display: — → flex + flex-direction: — → column + row-gap: — → 2px + column-gap: — → 2px + min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span [mono-label] "PROCESSING PIPELINE" - y: 400.4 → 381.8 (-18.6px) - w: 127.3 → 153.6 (+26.3px) - display: inline → block - width: auto → 153.609px - height: auto → 12px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - line-height: normal → 12px - letter-spacing: 1.2px → 1px - text-transform: none → uppercase + line-height: — → 1.2 + letter-spacing: 0.12em → 0.1em + text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button [add-btn] "Add tool" - x: 657.7 → 644.4 (-13.3px) - y: 406.4 → 391.8 (-14.6px) - w: 66 → 79.3 (+13.3px) - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 66.0469px → 79.3125px - height: 18px → 17px - background-position: 0px 0px → 0% 0% - line-height: 18px → normal + line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg [lucide lucide-icon lucide-plus] - x: 657.7 → 650.4 (-7.3px) - y: 407.9 → 392.8 (-15.1px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - line-height: 18px → normal - vertical-align: middle → baseline + line-height: inherit → 1.5 body > main > footer [preview-footer] - y: 1532.9 → 2292.9 (+760px) - row-gap: normal → 16px - column-gap: normal → 16px - letter-spacing: normal → 0.8px + row-gap: — → 1rem + column-gap: — → 1rem + padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) + padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) + letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(1) "easy-png-tools" - y: 1550.4 → 2309.9 (+759.5px) - w: 117 → 142.8 (+25.8px) - display: flex → block - align-items: center → normal - row-gap: 7px → normal - column-gap: 7px → normal - width: 116.984px → 142.812px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: normal → 0.8px + display: flex → — + align-items: center → — + row-gap: 7px → — + column-gap: 7px → — + letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - x: 141.6 → 159.6 (+18px) - y: 1550.4 → 2309.9 (+759.5px) - w: 33 → 40.8 (+7.8px) - display: block → inline - width: 33px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-weight: 400 → 700 - letter-spacing: normal → 0.8px + font-weight: 400 → — + letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(2) "© 2024" - x: 691.5 → 1341.6 (+650.1px) - y: 1549.9 → 2309.9 (+760px) - w: 141 → 40.8 (-100.2px) - display: flex → block - align-items: center → normal - row-gap: 7px → normal - column-gap: 7px → normal - width: 140.969px → 40.8125px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: normal → 0.8px + display: flex → — + align-items: center → — + row-gap: 7px → — + column-gap: 7px → — + letter-spacing: — → 0.08em body >main >footer >span:nth-of-type(2) >svg [lucide lucide-link-2 lucide-link2] ✗ present in reference, absent in project @@ -2746,2457 +1150,684 @@ body >div ✗ present in reference, absent in project -=== /preview/list-tools (vs list-tools.html) — 305 differences === - -body - h: 2416.4 → 2361.6 (-54.8px) - height: 2416.38px → 2361.59px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main [preview-root] - h: 2416.4 → 2361.6 (-54.8px) - height: 2416.38px → 2361.59px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) +=== /preview/list-tools (vs list-tools.html) — 126 differences === body > main > header [topbar] - position: static → sticky - top: auto → 0px - z-index: auto → 20 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > a [brand] - w: 218.1 → 232.4 (+14.3px) - width: 218.062px → 232.422px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) - -body > main > header > a > span:nth-of-type(2) "easy-png-tools" - w: 107.8 → 117.6 (+9.8px) - width: 107.766px → 117.609px - height: 17px → 18px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + position: — → sticky + top: — → 0px + z-index: — → 20 body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG" - x: 215.4 → 225.2 (+9.8px) - w: 60.3 → 64.8 (+4.5px) - width: 60.2969px → 64.8125px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - -body > main > header > div [top-actions] - x: 1085.6 → 1070.6 (-15px) - w: 296.8 → 311.8 (+15px) - width: 296.828px → 311.812px - height: 29px → 28px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > div > span [status] "LOCAL MODE / READY" - x: 1085.6 → 1070.6 (-15px) - w: 126.4 → 137.4 (+11px) - width: 126.375px → 137.406px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] body > main > header > div > span > i [status-dot] - x: 1085.6 → 1070.6 (-15px) w: 6 → 8 (+2px) h: 6 → 8 (+2px) width: 6px → 8px height: 6px → 8px - box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - x: 1228 → 1224 (-4px) - display: grid → flex - justify-content: normal → center - grid-template-columns: 17px → none - grid-template-rows: 17px → none - width: 29px → 28px - height: 29px → 28px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] - x: 1234 → 1230 (-4px) - width: 17px → 16px - height: 17px → 16px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - x: 1273 → 1268 (-5px) - display: grid → flex - justify-content: normal → center - grid-template-columns: 17px → none - grid-template-rows: 17px → none - width: 29px → 28px - height: 29px → 28px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - x: 1279 → 1274 (-5px) - width: 17px → 16px - height: 17px → 16px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > div [lang] - x: 1318 → 1312 (-6px) - w: 64.5 → 70.4 (+5.9px) - align-items: center → normal - width: 64.4531px → 70.4062px - height: 26px → 27px - overflow: visible → hidden - border-radius: 0px → 4px + display: flex → inline-flex + align-items: center → — body > main > header > div > div > span [lang-div] "/" - x: 1348 → 1344.2 (-3.8px) - y: 19.5 → 25 (+5.5px) - w: 4.5 → 6 (+1.5px) - h: 24 → 13 (-11px) - align-self: auto → center - width: 4.45312px → 6px - height: 24px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - color: rgb(23, 33, 43) → rgb(109, 120, 131) - font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace - font-size: 16px → 10px - line-height: 24px → normal + align-self: — → center + color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] + font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - x: 1352.4 → 1350.2 (-2.2px) - w: 29 → 31.2 (+2.2px) - width: 29px → 31.2031px - height: 24px → 25px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px + letter-spacing: — → 0.06em body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - x: 1319 → 1313 (-6px) - w: 29 → 31.2 (+2.2px) - width: 29px → 31.2031px - height: 24px → 25px - letter-spacing: normal → 0.6px + letter-spacing: — → 0.06em body > main > header > nav [nav] - x: 760.6 → 504 (-256.6px) - y: 25.5 → 24 (-1.5px) - w: 296.9 → 376.6 (+79.7px) - h: 12 → 15 (+3px) row-gap: 22px → 18px column-gap: 22px → 18px - margin-right: 28px → 0px - margin-left: 484.984px → 24px - width: 296.938px → 376.594px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + margin-right: 28px → — + margin-left: auto → 24px body > main > header > nav > a:nth-of-type(1) "Workspace" - x: 760.6 → 504 (-256.6px) - y: 25.5 → 24 (-1.5px) - w: 49.5 → 69.1 (+19.6px) - h: 12 → 15 (+3px) - width: 49.4844px → 69.125px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(2) "Catalog" - x: 832.1 → 591.1 (-241px) - y: 25.5 → 24 (-1.5px) - w: 38.5 → 53.8 (+15.3px) - h: 12 → 15 (+3px) - width: 38.5px → 53.7656px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - color: rgb(23, 105, 210) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(3) "Gradient" - x: 892.6 → 662.9 (-229.7px) - y: 25.5 → 24 (-1.5px) - w: 44 → 61.5 (+17.5px) - h: 12 → 15 (+3px) - width: 43.9844px → 61.4531px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(4) "Background remover" - x: 958.6 → 742.4 (-216.2px) - y: 25.5 → 24 (-1.5px) - w: 99 → 138.3 (+39.3px) - h: 12 → 15 (+3px) - width: 98.9688px → 138.25px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > div [catalog-page] - h: 2352.4 → 2251.6 (-100.8px) - height: 2352.38px → 2251.59px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + margin-top: 0px → — + margin-right: 0px → — + margin-bottom: 0px → — + margin-left: 0px → — + width: 100% → — + max-width: none → — body > main > div > div:nth-of-type(1) [catalog-head] - h: 189.4 → 124.6 (-64.8px) - flex-wrap: nowrap → wrap - row-gap: 40px → 24px - column-gap: 40px → 24px - padding-bottom: 42px → 0px - height: 189.375px → 124.594px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) - w: 660 → 510.7 (-149.3px) - h: 146.4 → 124.6 (-21.8px) - width: 660px → 510.719px - height: 146.375px → 124.594px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + flex-wrap: — → wrap + row-gap: 40px → 1.5rem + column-gap: 40px → 1.5rem + padding-bottom: 42px → — body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG" - w: 660 → 510.7 (-149.3px) - h: 12 → 15 (+3px) - margin-bottom: 18px → 8px - width: 660px → 510.719px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - color: rgb(23, 105, 210) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: 1.2px → 2.16px + margin-bottom: 18px → 0.5rem + letter-spacing: 0.12em → 0.18em body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" - y: 154 → 147 (-7px) - w: 660 → 510.7 (-149.3px) - h: 57.6 → 48 (-9.6px) margin-top: 12px → 0px margin-bottom: 14px → 0px - width: 660px → 510.719px - height: 57.5938px → 48px - max-width: 700px → none - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 57.6px → 32px + max-width: 700px → — + font-size: clamp(36px, 4vw, 64px) → 2rem font-weight: 650 → 700 - line-height: 57.6px → 48px - letter-spacing: -3.456px → normal + line-height: 1 → 1.5 + letter-spacing: -0.06em → — body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p "Focused utilities for working with PNG. " - y: 225.6 → 203 (-22.6px) - w: 660 → 510.7 (-149.3px) - margin-top: 0px → 8px - width: 660px → 510.719px - height: 44.7812px → 45.5938px - max-width: 660px → 510.72px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 14px → 15.2px - line-height: 22.4px → 22.8px + margin-top: 0px → 0.5rem + max-width: 660px → 56ch + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 0.95rem + line-height: — → 1.5 body > main > div > div:nth-of-type(1) > div:nth-of-type(2) [catalog-total] - x: 1251.3 → 1321.2 (+69.9px) - y: 205.6 → 175 (-30.6px) - w: 131.1 → 61.2 (-69.9px) - h: 64.8 → 73.6 (+8.8px) - flex-direction: row → column + flex-direction: — → column align-items: center → flex-end - row-gap: 14px → normal - column-gap: 14px → normal - width: 131.141px → 61.2031px - height: 64.7969px → 73.5938px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: 14px → 16px - text-align: right → start + row-gap: 14px → — + column-gap: 14px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1 + text-align: right → — body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b "32" - x: 1251.3 → 1344 (+92.7px) - y: 205.6 → 175 (-30.6px) - w: 67.7 → 38.4 (-29.3px) - h: 64.8 → 42 (-22.8px) - width: 67.6562px → 38.4062px - height: 64.7969px → 42px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-size: 72px → 32px - font-weight: 400 → 700 - line-height: 64.8px → normal - letter-spacing: -5.76px → normal - text-align: right → start + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: -0.08em → — + text-align: right → — body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span "TOOLS AVAILABLE" - x: 1332.9 → 1321.2 (-11.7px) - y: 224 → 222.6 (-1.4px) - w: 49.5 → 61.2 (+11.7px) - h: 28 → 26 (-2px) - margin-top: 0px → 5.6px - width: 49.4844px → 61.2031px - height: 28px → 26px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - line-height: 14px → normal - letter-spacing: normal → 0.8px + margin-top: — → 0.35rem + letter-spacing: — → 0.08em body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br - y: 225 → 222.6 (-2.4px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - line-height: 14px → normal - letter-spacing: normal → 0.8px + letter-spacing: — → 0.08em body > main > div > div:nth-of-type(2) [catalog-toolbar] - y: 313.4 → 248.6 (-64.8px) - h: 108 → 75 (-33px) - flex-wrap: nowrap → wrap - row-gap: 24px → 16px - column-gap: 24px → 16px - padding-top: 24px → 20px - padding-bottom: 42px → 20px - height: 108px → 75px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + flex-wrap: — → wrap + row-gap: 24px → 1rem + column-gap: 24px → 1rem + padding-top: 24px → 1.25rem + padding-bottom: 42px → 1.25rem body > main > div > div:nth-of-type(2) > label [catalog-search] - y: 337.4 → 268.6 (-68.8px) w: 420 → 202 (-218px) - h: 42 → 35 (-7px) - row-gap: 12px → 8px - column-gap: 12px → 8px - padding-top: 12px → 8px - padding-right: 14px → 12px - padding-bottom: 12px → 8px - padding-left: 14px → 12px - width: 420px → 202px - height: 42px → 35px - border-radius: 0px → 4px - background-color: rgba(0, 0, 0, 0) → rgb(248, 250, 251) - -body > main > div > div:nth-of-type(2) > label > svg [lucide lucide-icon lucide-search] - x: 72.6 → 70.6 (-2px) - y: 350.4 → 278.1 (-72.3px) - w: 14.9 → 16 (+1.1px) - width: 14.8906px → 16px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - vertical-align: middle → baseline + display: flex → inline-flex + row-gap: 12px → 0.5rem + column-gap: 12px → 0.5rem + padding-top: 12px → 0.5rem + padding-right: 14px → 0.75rem + padding-bottom: 12px → 0.5rem + padding-left: 14px → 0.75rem + width: min(420px, 100%) → — body > main > div > div:nth-of-type(2) > label > input - x: 99.5 → 94.6 (-4.9px) - y: 351.4 → 277.6 (-73.8px) w: 363.1 → 152 (-211.1px) - h: 14 → 17 (+3px) - padding-top: 0px → 1px - padding-right: 0px → 2px - padding-bottom: 0px → 1px - padding-left: 0px → 2px - width: 363.109px → 152px - height: 14px → 17px - background-position: 0px 0px → 0% 0% + width: 100% → — + border-top-width: 0px → medium body > main > div > div:nth-of-type(2) > div [catalog-filters] - x: 901.9 → 850.9 (-51px) - y: 343.4 → 272.2 (-71.2px) - w: 480.5 → 531.5 (+51px) - h: 30 → 27.8 (-2.2px) - row-gap: 6px → 6.4px - column-gap: 6px → 6.4px - width: 480.469px → 531.484px - height: 30px → 27.7812px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(2) > div > svg [lucide lucide-funnel lucide-icon] - x: 901.9 → 850.9 (-51px) - y: 350.9 → 278.6 (-72.3px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - vertical-align: middle → baseline + display: flex → inline-flex + row-gap: 6px → 0.4rem + column-gap: 6px → 0.4rem body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1) [active] "ALL" - x: 922.9 → 872.3 (-50.6px) - y: 343.4 → 272.2 (-71.2px) - w: 38.5 → 41 (+2.5px) - h: 30 → 27.8 (-2.2px) - padding-top: 8px → 6.4px - padding-right: 10px → 9.6px - padding-bottom: 8px → 6.4px - padding-left: 10px → 9.6px - width: 38.5px → 41px - height: 30px → 27.7812px - border-radius: 0px → 4px - background-color: rgba(0, 0, 0, 0) → rgb(23, 105, 210) - background-position: 0px 0px → 0% 0% - color: rgb(23, 105, 210) → rgb(255, 255, 255) - letter-spacing: normal → 0.6px + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + background-color: initial → — + color: #1769d2 [var(--blue)] → rgb(255, 255, 255) + letter-spacing: — → 0.06em body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT" - x: 967.4 → 919.7 (-47.7px) - y: 343.4 → 272.2 (-71.2px) - w: 60.5 → 67.4 (+6.9px) - h: 30 → 27.8 (-2.2px) - padding-top: 8px → 6.4px - padding-right: 10px → 9.6px - padding-bottom: 8px → 6.4px - padding-left: 10px → 9.6px - width: 60.5px → 67.3906px - height: 30px → 27.7812px - border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) - border-radius: 0px → 4px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY" - x: 1033.9 → 993.5 (-40.4px) - y: 343.4 → 272.2 (-71.2px) - w: 88 → 100.4 (+12.4px) - h: 30 → 27.8 (-2.2px) - padding-top: 8px → 6.4px - padding-right: 10px → 9.6px - padding-bottom: 8px → 6.4px - padding-left: 10px → 9.6px - width: 87.9844px → 100.391px - height: 30px → 27.7812px - border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) - border-radius: 0px → 4px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR" - x: 1127.9 → 1100.3 (-27.6px) - y: 343.4 → 272.2 (-71.2px) - w: 49.5 → 54.2 (+4.7px) - h: 30 → 27.8 (-2.2px) - padding-top: 8px → 6.4px - padding-right: 10px → 9.6px - padding-bottom: 8px → 6.4px - padding-left: 10px → 9.6px - width: 49.5px → 54.1875px - height: 30px → 27.7812px - border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) - border-radius: 0px → 4px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY" - x: 1183.4 → 1160.8 (-22.6px) - y: 343.4 → 272.2 (-71.2px) - w: 66 → 74 (+8px) - h: 30 → 27.8 (-2.2px) - padding-top: 8px → 6.4px - padding-right: 10px → 9.6px - padding-bottom: 8px → 6.4px - padding-left: 10px → 9.6px - width: 65.9844px → 74px - height: 30px → 27.7812px - border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) - border-radius: 0px → 4px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS" - x: 1255.4 → 1241.2 (-14.2px) - y: 343.4 → 272.2 (-71.2px) - w: 60.5 → 67.4 (+6.9px) - h: 30 → 27.8 (-2.2px) - padding-top: 8px → 6.4px - padding-right: 10px → 9.6px - padding-bottom: 8px → 6.4px - padding-left: 10px → 9.6px - width: 60.5px → 67.3906px - height: 30px → 27.7812px - border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) - border-radius: 0px → 4px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE" - x: 1321.9 → 1315 (-6.9px) - y: 343.4 → 272.2 (-71.2px) - w: 60.5 → 67.4 (+6.9px) - h: 30 → 27.8 (-2.2px) - padding-top: 8px → 6.4px - padding-right: 10px → 9.6px - padding-bottom: 8px → 6.4px - padding-left: 10px → 9.6px - width: 60.5px → 67.3906px - height: 30px → 27.7812px - border-top-color: rgba(0, 0, 0, 0) → rgb(203, 211, 218) - border-radius: 0px → 4px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px - -body > main > div > div:nth-of-type(3) [catalog-groups] - y: 421.4 → 323.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group] - y: 421.4 → 323.6 (-97.8px) - display: block → flex - flex-direction: row → column - row-gap: normal → 16px - column-gap: normal → 16px - min-width: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + row-gap: — → 1rem + column-gap: — → 1rem + min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [group-title] - y: 421.4 → 323.6 (-97.8px) - h: 26 → 24 (-2px) align-items: center → baseline - row-gap: normal → 16px - column-gap: normal → 16px - padding-bottom: 12px → 8px - height: 26px → 24px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 16px - font-weight: 600 → 400 - line-height: normal → 24px - letter-spacing: 1.32px → normal + row-gap: — → 1rem + column-gap: — → 1rem + padding-bottom: 12px → 0.5rem + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span "CONVERT" - y: 421.4 → 323.6 (-97.8px) - w: 51.6 → 62.2 (+10.6px) - h: 13 → 15 (+2px) - width: 51.5781px → 62.1719px - height: 13px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 11px → 12px - font-weight: 600 → 400 - letter-spacing: 1.32px → 1.68px + letter-spacing: 0.12em → 0.14em body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > i "05 TOOLS" - y: 421.9 → 325.6 (-96.3px) - width: 54.5625px → 54.4062px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: 1.32px → 0.8px + letter-spacing: 0.12em → 0.08em body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [tool-cards] - y: 447.4 → 363.6 (-83.8px) - h: 584 → 570 (-14px) - padding-top: 14px → 0px - height: 584px → 570px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] - y: 461.4 → 363.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - y: 493.4 → 395.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-file-image lucide-icon] - y: 504.9 → 407.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + padding-top: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - y: 493.9 → 398.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Convert JPG to PNG" - y: 493.9 → 398.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Re-encode JPEG files as lossless PNG whi" - y: 516.9 → 417.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" - y: 478.4 → 380.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 506.4 → 408.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] - y: 577.4 → 479.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] - y: 609.4 → 511.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-file-image lucide-icon] - y: 620.9 → 523.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - y: 609.9 → 514.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Convert WebP to PNG" - y: 609.9 → 514.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Turn WebP images into a universal PNG fo" - y: 632.9 → 533.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" - y: 594.4 → 496.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 622.4 → 524.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] - y: 693.4 → 595.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] - y: 725.4 → 627.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-binary lucide-icon] - y: 736.9 → 639.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - y: 725.9 → 630.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "PNG to Base64" - y: 725.9 → 630.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Encode an image as a base64 string for e" - y: 748.9 → 649.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" - y: 710.4 → 612.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 738.4 → 640.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] - y: 809.4 → 711.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] - y: 841.4 → 743.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-link-2] - y: 852.9 → 755.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - y: 841.9 → 746.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "PNG to Data URI" - y: 841.9 → 746.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Build a complete data URI ready for HTML" - y: 864.9 → 765.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" - y: 826.4 → 728.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 854.4 → 756.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card] - y: 925.4 → 827.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon] - y: 957.4 → 859.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-file-image lucide-icon] - y: 968.9 → 871.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - y: 957.9 → 862.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Convert PNG to JPG" - y: 957.9 → 862.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Composite transparency over a selected b" - y: 980.9 → 881.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05" - y: 942.4 → 844.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 970.4 → 872.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group] - y: 421.4 → 323.6 (-97.8px) - display: block → flex - flex-direction: row → column - row-gap: normal → 16px - column-gap: normal → 16px - min-width: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + row-gap: — → 1rem + column-gap: — → 1rem + min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [group-title] - y: 421.4 → 323.6 (-97.8px) - h: 26 → 24 (-2px) align-items: center → baseline - row-gap: normal → 16px - column-gap: normal → 16px - padding-bottom: 12px → 8px - height: 26px → 24px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 16px - font-weight: 600 → 400 - line-height: normal → 24px - letter-spacing: 1.32px → normal + row-gap: — → 1rem + column-gap: — → 1rem + padding-bottom: 12px → 0.5rem + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > span "TRANSPARENCY" - y: 421.4 → 323.6 (-97.8px) - w: 88.4 → 106.6 (+18.2px) - h: 13 → 15 (+2px) - width: 88.4219px → 106.562px - height: 13px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 11px → 12px - font-weight: 600 → 400 - letter-spacing: 1.32px → 1.68px + letter-spacing: 0.12em → 0.14em body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > i "05 TOOLS" - y: 421.9 → 325.6 (-96.3px) - width: 54.5625px → 54.4062px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: 1.32px → 0.8px + letter-spacing: 0.12em → 0.08em body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [tool-cards] - y: 447.4 → 363.6 (-83.8px) - h: 584 → 570 (-14px) - padding-top: 14px → 0px - height: 584px → 570px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] - y: 461.4 → 363.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - y: 493.4 → 395.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-scissors] - y: 504.9 → 407.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + padding-top: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - y: 493.9 → 389.1 (-104.8px) - h: 41 → 55 (+14px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 55px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Remove background PNG" - y: 493.9 → 389.1 (-104.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Remove a solid background by color, tole" - y: 516.9 → 408.1 (-108.8px) - h: 18 → 36 (+18px) - height: 18px → 36px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" - y: 478.4 → 380.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 506.4 → 408.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] - y: 577.4 → 479.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] - y: 609.4 → 511.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-layers] - y: 620.9 → 523.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - y: 609.9 → 514.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Extract alpha mask" - y: 609.9 → 514.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Turn the alpha channel into a clean blac" - y: 632.9 → 533.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" - y: 594.4 → 496.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 622.4 → 524.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] - y: 693.4 → 595.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] - y: 725.4 → 627.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-frame lucide-icon] - y: 736.9 → 639.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - y: 725.9 → 630.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Round corners PNG" - y: 725.9 → 630.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Clip the image corners by a precise radi" - y: 748.9 → 649.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" - y: 710.4 → 612.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 738.4 → 640.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] - y: 809.4 → 711.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] - y: 841.4 → 743.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-square] - y: 852.9 → 755.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - y: 841.9 → 746.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "Outline PNG" - y: 841.9 → 746.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Add a colored ring around opaque content" - y: 864.9 → 765.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" - y: 826.4 → 728.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 854.4 → 756.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card] - y: 925.4 → 827.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon] - y: 957.4 → 859.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-droplet lucide-icon] - y: 968.9 → 871.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - y: 957.9 → 853.1 (-104.8px) - h: 41 → 55 (+14px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 55px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Change PNG opacity" - y: 957.9 → 853.1 (-104.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Multiply the alpha channel while keeping" - y: 980.9 → 872.1 (-108.8px) - h: 18 → 36 (+18px) - height: 18px → 36px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05" - y: 942.4 → 844.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 970.4 → 872.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group] - y: 1087.4 → 989.6 (-97.8px) - display: block → flex - flex-direction: row → column - row-gap: normal → 16px - column-gap: normal → 16px - min-width: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + row-gap: — → 1rem + column-gap: — → 1rem + min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) [group-title] - y: 1087.4 → 989.6 (-97.8px) - h: 26 → 24 (-2px) align-items: center → baseline - row-gap: normal → 16px - column-gap: normal → 16px - padding-bottom: 12px → 8px - height: 26px → 24px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 16px - font-weight: 600 → 400 - line-height: normal → 24px - letter-spacing: 1.32px → normal + row-gap: — → 1rem + column-gap: — → 1rem + padding-bottom: 12px → 0.5rem + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > span "COLOR" - y: 1087.4 → 989.6 (-97.8px) - w: 36.8 → 44.4 (+7.6px) - h: 13 → 15 (+2px) - width: 36.8438px → 44.4062px - height: 13px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 11px → 12px - font-weight: 600 → 400 - letter-spacing: 1.32px → 1.68px + letter-spacing: 0.12em → 0.14em body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > i "05 TOOLS" - y: 1087.9 → 991.6 (-96.3px) - width: 54.5625px → 54.4062px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: 1.32px → 0.8px + letter-spacing: 0.12em → 0.08em body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) [tool-cards] - y: 1113.4 → 1029.6 (-83.8px) - h: 584 → 570 (-14px) - padding-top: 14px → 0px - height: 584px → 570px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] - y: 1127.4 → 1029.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - y: 1159.4 → 1061.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun] - y: 1170.9 → 1073.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + padding-top: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - y: 1159.9 → 1055.1 (-104.8px) - h: 41 → 55 (+14px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 55px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Create gradient PNG" - y: 1159.9 → 1055.1 (-104.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Generate a smooth transition between two" - y: 1182.9 → 1074.1 (-108.8px) - h: 18 → 36 (+18px) - height: 18px → 36px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" - y: 1144.4 → 1046.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1172.4 → 1074.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] - y: 1243.4 → 1145.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] - y: 1275.4 → 1177.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-contrast lucide-icon] - y: 1286.9 → 1189.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - y: 1275.9 → 1180.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Grayscale PNG" - y: 1275.9 → 1180.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Convert the image to luminance-based sha" - y: 1298.9 → 1199.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" - y: 1260.4 → 1162.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1288.4 → 1190.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] - y: 1359.4 → 1261.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] - y: 1391.4 → 1293.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-blend lucide-icon] - y: 1402.9 → 1305.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - y: 1391.9 → 1296.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Invert colors PNG" - y: 1391.9 → 1296.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Invert every color channel while leaving" - y: 1414.9 → 1315.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" - y: 1376.4 → 1278.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1404.4 → 1306.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] - y: 1475.4 → 1377.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] - y: 1507.4 → 1409.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun] - y: 1518.9 → 1421.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - y: 1507.9 → 1412.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "Brightness & contrast" - y: 1507.9 → 1412.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Adjust brightness and contrast across a " - y: 1530.9 → 1431.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" - y: 1492.4 → 1394.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1520.4 → 1422.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card] - y: 1591.4 → 1493.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon] - y: 1623.4 → 1525.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun] - y: 1634.9 → 1537.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - y: 1623.9 → 1528.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Temperature PNG" - y: 1623.9 → 1528.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Make an image warmer or cooler with a si" - y: 1646.9 → 1547.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05" - y: 1608.4 → 1510.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1636.4 → 1538.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group] - y: 1087.4 → 989.6 (-97.8px) - display: block → flex - flex-direction: row → column - row-gap: normal → 16px - column-gap: normal → 16px - min-width: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + row-gap: — → 1rem + column-gap: — → 1rem + min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) [group-title] - y: 1087.4 → 989.6 (-97.8px) - h: 26 → 24 (-2px) align-items: center → baseline - row-gap: normal → 16px - column-gap: normal → 16px - padding-bottom: 12px → 8px - height: 26px → 24px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 16px - font-weight: 600 → 400 - line-height: normal → 24px - letter-spacing: 1.32px → normal + row-gap: — → 1rem + column-gap: — → 1rem + padding-bottom: 12px → 0.5rem + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > span "GEOMETRY" - y: 1087.4 → 989.6 (-97.8px) - w: 59 → 71 (+12px) - h: 13 → 15 (+2px) - width: 58.9531px → 71.0469px - height: 13px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 11px → 12px - font-weight: 600 → 400 - letter-spacing: 1.32px → 1.68px + letter-spacing: 0.12em → 0.14em body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > i "05 TOOLS" - y: 1087.9 → 991.6 (-96.3px) - width: 54.5625px → 54.4062px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: 1.32px → 0.8px + letter-spacing: 0.12em → 0.08em body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) [tool-cards] - y: 1113.4 → 1029.6 (-83.8px) - h: 584 → 570 (-14px) - padding-top: 14px → 0px - height: 584px → 570px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] - y: 1127.4 → 1029.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - y: 1159.4 → 1061.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-scaling] - y: 1170.9 → 1073.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + padding-top: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - y: 1159.9 → 1055.1 (-104.8px) - h: 41 → 55 (+14px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 55px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Resize PNG" - y: 1159.9 → 1055.1 (-104.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Scale an image with bilinear interpolati" - y: 1182.9 → 1074.1 (-108.8px) - h: 18 → 36 (+18px) - height: 18px → 36px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" - y: 1144.4 → 1046.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1172.4 → 1074.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] - y: 1243.4 → 1145.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] - y: 1275.4 → 1177.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-crop lucide-icon] - y: 1286.9 → 1189.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - y: 1275.9 → 1180.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Crop PNG" - y: 1275.9 → 1180.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Cut a rectangular area with exact coordi" - y: 1298.9 → 1199.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" - y: 1260.4 → 1162.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1288.4 → 1190.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] - y: 1359.4 → 1261.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] - y: 1391.4 → 1293.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-rotate-cw] - y: 1402.9 → 1305.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - y: 1391.9 → 1296.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Rotate PNG" - y: 1391.9 → 1296.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Rotate by 90, 180, or 270 degrees withou" - y: 1414.9 → 1315.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" - y: 1376.4 → 1278.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1404.4 → 1306.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] - y: 1475.4 → 1377.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] - y: 1507.4 → 1409.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-flip-horizontal-2 lucide-icon] - y: 1518.9 → 1421.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - y: 1507.9 → 1412.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "Flip PNG" - y: 1507.9 → 1412.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Mirror the image horizontally or vertica" - y: 1530.9 → 1431.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" - y: 1492.4 → 1394.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1520.4 → 1422.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) [tool-card] - y: 1591.4 → 1493.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon] - y: 1623.4 → 1525.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-maximize-2] - y: 1634.9 → 1537.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - y: 1623.9 → 1528.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > strong "Add padding to PNG" - y: 1623.9 → 1528.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) > span "Expand the canvas on all sides by a chos" - y: 1646.9 → 1547.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(3) [tool-index] "05" - y: 1608.4 → 1510.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1636.4 → 1538.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group] - y: 1753.4 → 1655.6 (-97.8px) - display: block → flex - flex-direction: row → column - row-gap: normal → 16px - column-gap: normal → 16px - min-width: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + row-gap: — → 1rem + column-gap: — → 1rem + min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) [group-title] - y: 1753.4 → 1655.6 (-97.8px) - h: 26 → 24 (-2px) align-items: center → baseline - row-gap: normal → 16px - column-gap: normal → 16px - padding-bottom: 12px → 8px - height: 26px → 24px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 16px - font-weight: 600 → 400 - line-height: normal → 24px - letter-spacing: 1.32px → normal + row-gap: — → 1rem + column-gap: — → 1rem + padding-bottom: 12px → 0.5rem + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > span "FILTERS" - y: 1753.4 → 1655.6 (-97.8px) - w: 51.6 → 62.2 (+10.6px) - h: 13 → 15 (+2px) - width: 51.5781px → 62.1719px - height: 13px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 11px → 12px - font-weight: 600 → 400 - letter-spacing: 1.32px → 1.68px + letter-spacing: 0.12em → 0.14em body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > i "04 TOOLS" - y: 1753.9 → 1657.6 (-96.3px) - width: 54.5625px → 54.4062px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: 1.32px → 0.8px + letter-spacing: 0.12em → 0.08em body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) [tool-cards] - y: 1779.4 → 1695.6 (-83.8px) - h: 468 → 454 (-14px) - padding-top: 14px → 0px - height: 468px → 454px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] - y: 1793.4 → 1695.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - y: 1825.4 → 1727.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-droplets lucide-icon] - y: 1836.9 → 1739.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + padding-top: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - y: 1825.9 → 1730.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "Blur PNG" - y: 1825.9 → 1730.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Apply a fast Gaussian-style blur with tr" - y: 1848.9 → 1749.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" - y: 1810.4 → 1712.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1838.4 → 1740.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] - y: 1909.4 → 1811.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] - y: 1941.4 → 1843.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-focus lucide-icon] - y: 1952.9 → 1855.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - y: 1941.9 → 1846.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Sharpen PNG" - y: 1941.9 → 1846.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Emphasize edges with an adjustable sharp" - y: 1964.9 → 1865.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" - y: 1926.4 → 1828.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1954.4 → 1856.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] - y: 2025.4 → 1927.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] - y: 2057.4 → 1959.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-sun] - y: 2068.9 → 1971.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - y: 2057.9 → 1962.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Vignette PNG" - y: 2057.9 → 1962.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Smoothly darken the image edges while pr" - y: 2080.9 → 1981.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" - y: 2042.4 → 1944.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 2070.4 → 1972.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] - y: 2141.4 → 2043.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] - y: 2173.4 → 2075.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-layers] - y: 2184.9 → 2087.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - y: 2173.9 → 2078.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "JPEG artifacts" - y: 2173.9 → 2078.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Simulate low-quality JPEG recompression " - y: 2196.9 → 2097.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" - y: 2158.4 → 2060.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 2186.4 → 2088.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group] - y: 1753.4 → 1655.6 (-97.8px) - display: block → flex - flex-direction: row → column - row-gap: normal → 16px - column-gap: normal → 16px - min-width: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: — → flex + flex-direction: — → column + row-gap: — → 1rem + column-gap: — → 1rem + min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) [group-title] - y: 1753.4 → 1655.6 (-97.8px) - h: 26 → 24 (-2px) align-items: center → baseline - row-gap: normal → 16px - column-gap: normal → 16px - padding-bottom: 12px → 8px - height: 26px → 24px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 16px - font-weight: 600 → 400 - line-height: normal → 24px - letter-spacing: 1.32px → normal + row-gap: — → 1rem + column-gap: — → 1rem + padding-bottom: 12px → 0.5rem + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > span "ANALYZE" - y: 1753.4 → 1655.6 (-97.8px) - w: 51.6 → 62.2 (+10.6px) - h: 13 → 15 (+2px) - width: 51.5781px → 62.1719px - height: 13px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 11px → 12px - font-weight: 600 → 400 - letter-spacing: 1.32px → 1.68px + letter-spacing: 0.12em → 0.14em body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > i "04 TOOLS" - y: 1753.9 → 1657.6 (-96.3px) - width: 54.5625px → 54.4062px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: 1.32px → 0.8px + letter-spacing: 0.12em → 0.08em body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) [tool-cards] - y: 1779.4 → 1695.6 (-83.8px) - h: 468 → 454 (-14px) - padding-top: 14px → 0px - height: 468px → 454px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) [tool-card] - y: 1793.4 → 1695.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - y: 1825.4 → 1727.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-info] - y: 1836.9 → 1739.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + padding-top: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - y: 1825.9 → 1730.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > strong "PNG info" - y: 1825.9 → 1730.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) > span "Inspect dimensions, alpha presence, and " - y: 1848.9 → 1749.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(3) [tool-index] "01" - y: 1810.4 → 1712.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1838.4 → 1740.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) [tool-card] - y: 1909.4 → 1811.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon] - y: 1941.4 → 1843.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-search-check] - y: 1952.9 → 1855.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - y: 1941.9 → 1846.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > strong "Check grayscale" - y: 1941.9 → 1846.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) > span "Report whether the image contains only s" - y: 1964.9 → 1865.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(3) [tool-index] "02" - y: 1926.4 → 1828.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 1954.4 → 1856.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) [tool-card] - y: 2025.4 → 1927.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon] - y: 2057.4 → 1959.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) > svg [lucide lucide-eye lucide-icon] - y: 2068.9 → 1971.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - y: 2057.9 → 1962.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > strong "Check transparency" - y: 2057.9 → 1962.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) > span "Detect transparent and semi-transparent " - y: 2080.9 → 1981.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(3) [tool-index] "03" - y: 2042.4 → 1944.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 2070.4 → 1972.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) [tool-card] - y: 2141.4 → 2043.6 (-97.8px) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon] - y: 2173.4 → 2075.6 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - border-radius: 0px → 4px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) > svg [lucide lucide-icon lucide-ruler] - y: 2184.9 → 2087.1 (-97.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - y: 2173.9 → 2078.1 (-95.8px) - h: 41 → 37 (-4px) display: grid → flex - flex-direction: row → column + flex-direction: — → column row-gap: 8px → 2px column-gap: 8px → 2px - grid-template-columns: 488.406px → none - grid-template-rows: 15px 18px → none - height: 41px → 37px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > strong "PNG orientation" - y: 2173.9 → 2078.1 (-95.8px) - h: 15 → 17 (+2px) - height: 15px → 17px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) > span "Classify the image as portrait, landscap" - y: 2196.9 → 2097.1 (-99.8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(3) [tool-index] "04" - y: 2158.4 → 2060.6 (-97.8px) - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow] - y: 2186.4 → 2088.6 (-97.8px) - opacity: 0 → 1 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - vertical-align: middle → baseline + opacity: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE" - y: 2311.4 → 2205.6 (-105.8px) - h: 33 → 38 (+5px) - display: block → flex - flex-wrap: nowrap → wrap - row-gap: normal → 24px - column-gap: normal → 24px + display: — → flex + flex-wrap: — → wrap + row-gap: — → 1.5rem + column-gap: — → 1.5rem margin-top: 64px → 56px padding-top: 20px → 24px - height: 33px → 38px - letter-spacing: normal → 0.8px + letter-spacing: — → 0.08em body > main > div > footer > span "•" - x: 214 → 258.4 (+44.4px) - y: 2332.4 → 2230.6 (-101.8px) - w: 11 → 6.8 (-4.2px) - display: inline → block - margin-right: 8px → 0px - margin-left: 8px → 0px - width: auto → 6.8125px - height: auto → 13px - min-width: 0px → auto - min-height: 0px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - color: rgb(23, 105, 210) → rgb(109, 120, 131) - letter-spacing: normal → 0.8px + margin-top: 0px → — + margin-right: 8px → — + margin-bottom: 0px → — + margin-left: 8px → — + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.08em body >main >footer [preview-footer] + present in project, absent in reference @@ -5205,1560 +1836,683 @@ body >div ✗ present in reference, absent in project -=== /preview/tools/linear-gradient-png (vs gradient.html) — 104 differences === - -body - h: 1373 → 900 (-473px) - height: 1372.95px → 900px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main [preview-root] - h: 1373 → 900 (-473px) - height: 1372.95px → 900px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) +=== /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences === body > main > header [topbar] - position: static → sticky - top: auto → 0px - z-index: auto → 20 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > a [brand] - w: 224.8 → 239.6 (+14.8px) - width: 224.766px → 239.609px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) - -body > main > header > a > span:nth-of-type(2) "easy-png-tools" - w: 107.8 → 117.6 (+9.8px) - width: 107.766px → 117.609px - height: 17px → 18px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + position: — → sticky + top: — → 0px + z-index: — → 20 body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT" - x: 215.4 → 225.2 (+9.8px) - w: 67 → 72 (+5px) - width: 67px → 72px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - -body > main > header > div [top-actions] - x: 1123.4 → 1111.4 (-12px) - w: 259 → 271 (+12px) - width: 259.031px → 271.016px - height: 29px → 28px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > div > span [status] "LIVE PREVIEW" - x: 1123.4 → 1111.4 (-12px) - w: 88.6 → 96.6 (+8px) - width: 88.5781px → 96.6094px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] body > main > header > div > span > i [status-dot] - x: 1123.4 → 1111.4 (-12px) w: 6 → 8 (+2px) h: 6 → 8 (+2px) width: 6px → 8px height: 6px → 8px - box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - x: 1228 → 1224 (-4px) - display: grid → flex - justify-content: normal → center - grid-template-columns: 17px → none - grid-template-rows: 17px → none - width: 29px → 28px - height: 29px → 28px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] - x: 1234 → 1230 (-4px) - width: 17px → 16px - height: 17px → 16px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - x: 1273 → 1268 (-5px) - display: grid → flex - justify-content: normal → center - grid-template-columns: 17px → none - grid-template-rows: 17px → none - width: 29px → 28px - height: 29px → 28px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - x: 1279 → 1274 (-5px) - width: 17px → 16px - height: 17px → 16px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > div [lang] - x: 1318 → 1312 (-6px) - w: 64.5 → 70.4 (+5.9px) - align-items: center → normal - width: 64.4531px → 70.4062px - height: 26px → 27px - overflow: visible → hidden - border-radius: 0px → 4px + display: flex → inline-flex + align-items: center → — body > main > header > div > div > span [lang-div] "/" - x: 1348 → 1344.2 (-3.8px) - y: 19.5 → 25 (+5.5px) - w: 4.5 → 6 (+1.5px) - h: 24 → 13 (-11px) - align-self: auto → center - width: 4.45312px → 6px - height: 24px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - color: rgb(23, 33, 43) → rgb(109, 120, 131) - font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace - font-size: 16px → 10px - line-height: 24px → normal + align-self: — → center + color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] + font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - x: 1352.4 → 1350.2 (-2.2px) - w: 29 → 31.2 (+2.2px) - width: 29px → 31.2031px - height: 24px → 25px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px + letter-spacing: — → 0.06em body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - x: 1319 → 1313 (-6px) - w: 29 → 31.2 (+2.2px) - width: 29px → 31.2031px - height: 24px → 25px - letter-spacing: normal → 0.6px + letter-spacing: — → 0.06em body > main > header > nav [nav] - x: 798.4 → 528 (-270.4px) - y: 25.5 → 24 (-1.5px) - w: 296.9 → 376.6 (+79.7px) - h: 12 → 15 (+3px) row-gap: 22px → 18px column-gap: 22px → 18px - margin-right: 28px → 0px - margin-left: 516.078px → 24px - width: 296.938px → 376.594px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + margin-right: 28px → — + margin-left: auto → 24px body > main > header > nav > a:nth-of-type(1) "Workspace" - x: 798.4 → 528 (-270.4px) - y: 25.5 → 24 (-1.5px) - w: 49.5 → 69.1 (+19.6px) - h: 12 → 15 (+3px) - width: 49.4844px → 69.125px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(2) "Catalog" - x: 869.9 → 615.1 (-254.8px) - y: 25.5 → 24 (-1.5px) - w: 38.5 → 53.8 (+15.3px) - h: 12 → 15 (+3px) - width: 38.5px → 53.7656px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(3) "Gradient" - x: 930.4 → 686.9 (-243.5px) - y: 25.5 → 24 (-1.5px) - w: 44 → 61.5 (+17.5px) - h: 12 → 15 (+3px) - width: 43.9844px → 61.4531px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - color: rgb(23, 105, 210) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(4) "Background remover" - x: 996.4 → 766.3 (-230.1px) - y: 25.5 → 24 (-1.5px) - w: 99 → 138.3 (+39.3px) - h: 12 → 15 (+3px) - width: 98.9688px → 138.25px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > div [tool-page] - h: 1264 → 657.9 (-606.1px) - padding-top: 60px → 0px - padding-right: 57.6px → 0px - padding-bottom: 72px → 0px - padding-left: 57.6px → 0px - height: 1263.95px → 657.875px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 60px → — + padding-right: clamp(24px, 4vw, 72px) → — + padding-bottom: 72px → — + padding-left: clamp(24px, 4vw, 72px) → — + width: 100% → — body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - x: 57.6 → 0 (-57.6px) - y: 124 → 64 (-60px) - w: 1324.8 → 1440 (+115.2px) - h: 12 → 24 (+12px) - margin-bottom: 18px → 0px - width: 1324.81px → 1440px - height: 12px → 24px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1.2px → normal + margin-bottom: 18px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(1) > span "/" - x: 165.1 → 137.3 (-27.8px) - y: 124 → 66 (-58px) - w: 13.4 → 6.1 (-7.3px) - h: 12 → 20 (+8px) - margin-right: 7px → 0px - margin-left: 7px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1.2px → normal + margin-top: 0px → — + margin-right: 7px → — + margin-bottom: 0px → — + margin-left: 7px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(2) [tool-title] - x: 57.6 → 0 (-57.6px) - y: 154 → 109.4 (-44.6px) - w: 1324.8 → 1440 (+115.2px) - h: 122.8 → 133.4 (+10.6px) - display: flex → block - justify-content: space-between → normal - align-items: end → normal - row-gap: 32px → normal - column-gap: 32px → normal - margin-bottom: 48px → 0px - width: 1324.81px → 1440px - height: 122.781px → 133.438px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(2) > div - x: 57.6 → 0 (-57.6px) - y: 154 → 109.4 (-44.6px) - w: 550 → 1440 (+890px) - h: 122.8 → 93.4 (-29.4px) - width: 550px → 1440px - height: 122.781px → 93.4375px - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + justify-content: space-between → — + align-items: end → — + row-gap: 32px → — + column-gap: 32px → — + margin-bottom: 48px → — body > main > div > div:nth-of-type(2) > div > h1 "Gradient background." - x: 57.6 → 0 (-57.6px) - y: 154 → 109.4 (-44.6px) - w: 550 → 1440 (+890px) - h: 57.6 → 48 (-9.6px) - margin-top: 0px → 21.44px - margin-bottom: 14px → 21.44px - width: 550px → 1440px - height: 57.5938px → 48px - max-width: 700px → none - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 57.6px → 32px - font-weight: 650 → 700 - line-height: 57.6px → 48px - letter-spacing: -3.456px → normal + margin-top: 0px → — + margin-right: 0px → — + margin-bottom: 14px → — + margin-left: 0px → — + max-width: 700px → — + font-size: clamp(36px, 4vw, 64px) → 16px + font-weight: 650 → — + line-height: 1 → 1.5 + letter-spacing: -0.06em → — body > main > div > div:nth-of-type(2) > div > p [lede] "Create a clean, export-ready gradient wi" - x: 57.6 → 0 (-57.6px) - y: 225.6 → 178.9 (-46.7px) - w: 550 → 1440 (+890px) - h: 51.2 → 24 (-27.2px) - margin-top: 0px → 16px - margin-bottom: 0px → 16px - width: 550px → 1440px - height: 51.1875px → 24px - max-width: 550px → none - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - line-height: 25.6px → 24px + margin-top: 0px → — + margin-right: 0px → — + margin-bottom: 0px → — + margin-left: 0px → — + max-width: 550px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + line-height: 1.6 → 1.5 body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - x: 1302.4 → 0 (-1302.4px) - y: 264.8 → 220.9 (-43.9px) - w: 80 → 106.1 (+26.1px) - h: 12 → 20 (+8px) - display: flex → inline - align-items: center → normal - row-gap: 8px → normal - column-gap: 8px → normal - width: 79.9844px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(37, 169, 106) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - white-space: nowrap → normal + display: flex → — + align-items: center → — + row-gap: 8px → — + column-gap: 8px → — + color: rgb(37, 169, 106) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(2) > span > i - x: 1302.4 → 0 (-1302.4px) - y: 267.8 → 220.9 (-46.9px) w: 6 → 0 (-6px) h: 6 → 20 (+14px) - display: block → inline - width: 6px → auto - height: 6px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - border-radius: 50% → 0px - background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0) - color: rgb(37, 169, 106) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - white-space: nowrap → normal + width: 6px → — + height: 6px → — + background-color: rgb(37, 169, 106) → — + color: rgb(37, 169, 106) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) [gradient-layout] - x: 57.6 → 0 (-57.6px) - y: 324.8 → 242.9 (-81.9px) - w: 1324.8 → 1440 (+115.2px) - h: 931.2 → 479 (-452.2px) - display: grid → block - align-items: start → normal - row-gap: 56px → normal - column-gap: 56px → normal - grid-template-columns: 444.078px 824.734px → none - grid-template-rows: 931.172px → none - width: 1324.81px → 1440px - height: 931.172px → 479px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [settings-panel] - x: 57.6 → 0 (-57.6px) - y: 324.8 → 242.9 (-81.9px) - w: 444.1 → 1440 (+995.9px) - h: 635 → 293 (-342px) - width: 444.078px → 1440px - height: 635px → 293px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0) + display: grid → — + align-items: start → — + row-gap: 56px → — + column-gap: 56px → — + grid-template-columns: minmax(360px, 0.7fr) minmax(0px, 1.3fr) → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - x: 58.6 → 0 (-58.6px) - y: 325.8 → 242.9 (-82.9px) - w: 442.1 → 1440 (+997.9px) - h: 83 → 48 (-35px) - display: flex → block - justify-content: space-between → normal - align-items: center → normal - padding-top: 18px → 0px - padding-right: 20px → 0px - padding-bottom: 18px → 0px - padding-left: 20px → 0px - width: 442.078px → 1440px - height: 83px → 48px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div - x: 78.6 → 0 (-78.6px) - y: 343.8 → 242.9 (-100.9px) - w: 123.2 → 1440 (+1316.8px) - h: 46 → 24 (-22px) - width: 123.156px → 1440px - height: 46px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + justify-content: space-between → — + align-items: center → — + padding-top: 18px → — + padding-right: 20px → — + padding-bottom: 18px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "GRADIENT SETTINGS" - x: 78.6 → 0 (-78.6px) - y: 351.8 → 244.9 (-106.9px) - w: 113.9 → 157.6 (+43.7px) - h: 12 → 20 (+8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1.2px → normal + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure output" - x: 78.6 → 161.4 (+82.8px) - y: 372.8 → 244.9 (-127.9px) - w: 123.2 → 126.9 (+3.7px) - h: 17 → 20 (+3px) - display: block → inline - margin-top: 5px → 0px - width: 123.156px → auto - height: 17px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 14px → 16px - font-weight: 600 → 700 - line-height: normal → 24px + display: block → — + margin-top: 5px → — + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 01" - x: 433.8 → 0 (-433.8px) - y: 360.8 → 268.9 (-91.9px) - w: 46.9 → 62.5 (+15.6px) - h: 12 → 20 (+8px) - display: block → inline - width: 46.8906px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1.2px → normal + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - x: 58.6 → 0 (-58.6px) - y: 408.8 → 290.9 (-117.9px) - w: 442.1 → 1440 (+997.9px) - h: 101 → 49 (-52px) - padding-top: 22px → 0px - padding-right: 20px → 0px - padding-bottom: 22px → 0px - padding-left: 20px → 0px - width: 442.078px → 1440px - height: 101px → 49px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 22px → — + padding-right: 20px → — + padding-bottom: 22px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "GRADIENT TYPE" - x: 78.6 → 0 (-78.6px) - y: 430.8 → 292.9 (-137.9px) - w: 402.1 → 120.1 (-282px) - h: 12 → 20 (+8px) - display: flex → inline - justify-content: space-between → normal - margin-bottom: 12px → 0px - width: 402.078px → auto - height: 12px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + display: flex → — + justify-content: space-between → — + margin-bottom: 12px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div [segmented wide] - x: 78.6 → 0 (-78.6px) - y: 454.8 → 314.9 (-139.9px) w: 402.1 → 1440 (+1037.9px) h: 32 → 25 (-7px) - display: flex → block - width: 402.078px → 1440px - height: 32px → 25px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + width: 100% → — + height: 32px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1) [selected] "Linear" - x: 79.6 → 0 (-79.6px) - y: 455.8 → 315.9 (-139.9px) - w: 200 → 52.9 (-147.1px) - h: 30 → 24 (-6px) - display: block → inline-block - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 200.031px → 52.9219px - height: 30px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 0px → 2px - border-top-style: none → outset - border-top-color: rgb(255, 255, 255) → rgb(0, 0, 0) - background-color: rgb(23, 105, 210) → rgb(240, 240, 240) - color: rgb(255, 255, 255) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + color: rgb(255, 255, 255) → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2) "Radial" - x: 279.6 → 52.9 (-226.7px) - y: 455.8 → 315.9 (-139.9px) - w: 200 → 53.3 (-146.7px) - h: 30 → 24 (-6px) - display: block → inline-block - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 200.047px → 53.3281px - height: 30px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 0px → 2px - border-top-style: none → outset - border-top-color: rgb(109, 120, 131) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + background-color: initial → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - x: 58.6 → 0 (-58.6px) - y: 509.8 → 339.9 (-169.9px) - w: 442.1 → 1440 (+997.9px) - h: 129 → 98 (-31px) - padding-top: 22px → 0px - padding-right: 20px → 0px - padding-bottom: 22px → 0px - padding-left: 20px → 0px - width: 442.078px → 1440px - height: 129px → 98px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 22px → — + padding-right: 20px → — + padding-bottom: 22px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR STOPS" - x: 78.6 → 0 (-78.6px) - y: 531.8 → 341.9 (-189.9px) - w: 402.1 → 102.2 (-299.9px) - h: 12 → 20 (+8px) - display: flex → inline - justify-content: space-between → normal - margin-bottom: 12px → 0px - width: 402.078px → auto - height: 12px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + display: flex → — + justify-content: space-between → — + margin-bottom: 12px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) [color-row] - x: 78.6 → 0 (-78.6px) - y: 555.8 → 363.9 (-191.9px) - w: 402.1 → 1440 (+1037.9px) - h: 32 → 74 (+42px) - display: flex → block - align-items: center → normal - row-gap: 10px → normal - column-gap: 10px → normal - width: 402.078px → 1440px - height: 32px → 74px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + align-items: center → — + row-gap: 10px → — + column-gap: 10px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) [color-field] - x: 78.6 → 0 (-78.6px) - y: 555.8 → 363.9 (-191.9px) - w: 183 → 1440 (+1257px) h: 32 → 25 (-7px) - display: flex → block - align-items: center → normal - row-gap: 8px → normal - column-gap: 8px → normal - padding-right: 8px → 0px - padding-left: 8px → 0px - width: 183.031px → 1440px - height: 32px → 25px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + align-items: center → — + row-gap: 8px → — + column-gap: 8px → — + padding-right: 8px → — + padding-left: 8px → — + height: 32px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span [swatch] - x: 87.6 → 0 (-87.6px) - y: 564.8 → 365.9 (-198.9px) w: 14 → 0 (-14px) h: 14 → 20 (+6px) - display: block → inline - width: 14px → auto - height: 14px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + width: 14px → — + height: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input - x: 109.6 → 0 (-109.6px) - y: 565.3 → 364.9 (-200.4px) - w: 143 → 157 (+14px) - h: 13 → 24 (+11px) - display: block → inline-block - padding-top: 0px → 1px - padding-right: 0px → 2px - padding-bottom: 0px → 1px - padding-left: 0px → 2px - width: 143.031px → 157px - height: 13px → 24px - min-height: auto → 0px - border-top-width: 0px → 2px - border-top-style: none → inset - border-top-color: rgb(23, 33, 43) → rgb(118, 118, 118) - background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) - background-position: 0px 0px → 0% 0% - color: rgb(23, 33, 43) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 13.3333px + min-width: 0px → — + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + background-color: initial → — + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span [stop-arrow] "→" - x: 271.6 → 0 (-271.6px) - y: 559.8 → 390.9 (-168.9px) - h: 24 → 20 (-4px) - display: block → inline - width: 16px → auto - height: 24px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) [color-field] - x: 297.6 → 0 (-297.6px) - y: 555.8 → 412.9 (-142.9px) - w: 183 → 1440 (+1257px) h: 32 → 25 (-7px) - display: flex → block - align-items: center → normal - row-gap: 8px → normal - column-gap: 8px → normal - padding-right: 8px → 0px - padding-left: 8px → 0px - width: 183.047px → 1440px - height: 32px → 25px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + align-items: center → — + row-gap: 8px → — + column-gap: 8px → — + padding-right: 8px → — + padding-left: 8px → — + height: 32px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span [swatch] - x: 306.6 → 0 (-306.6px) - y: 564.8 → 414.9 (-149.9px) w: 14 → 0 (-14px) h: 14 → 20 (+6px) - display: block → inline - width: 14px → auto - height: 14px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + width: 14px → — + height: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input - x: 328.6 → 0 (-328.6px) - y: 565.3 → 413.9 (-151.4px) - w: 143 → 157 (+14px) - h: 13 → 24 (+11px) - display: block → inline-block - padding-top: 0px → 1px - padding-right: 0px → 2px - padding-bottom: 0px → 1px - padding-left: 0px → 2px - width: 143.047px → 157px - height: 13px → 24px - min-height: auto → 0px - border-top-width: 0px → 2px - border-top-style: none → inset - border-top-color: rgb(23, 33, 43) → rgb(118, 118, 118) - background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) - background-position: 0px 0px → 0% 0% - color: rgb(23, 33, 43) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 13.3333px + min-width: 0px → — + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + background-color: initial → — + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) [gradient-bar] - x: 78.6 → 0 (-78.6px) - y: 601.8 → 437.9 (-163.9px) - w: 402.1 → 1440 (+1037.9px) h: 14 → 0 (-14px) - margin-top: 14px → 0px - width: 402.078px → 1440px - height: 14px → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + margin-top: 14px → — + height: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group] - x: 58.6 → 0 (-58.6px) - y: 638.8 → 437.9 (-200.9px) - w: 442.1 → 1440 (+997.9px) - h: 177 → 49 (-128px) - padding-top: 22px → 0px - padding-right: 20px → 0px - padding-bottom: 22px → 0px - padding-left: 20px → 0px - width: 442.078px → 1440px - height: 177px → 49px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 22px → — + padding-right: 20px → — + padding-bottom: 22px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label "DIRECTION" - x: 78.6 → 0 (-78.6px) - y: 660.8 → 439.9 (-220.9px) - w: 402.1 → 128.6 (-273.5px) - h: 12 → 20 (+8px) - display: flex → inline - justify-content: space-between → normal - margin-bottom: 12px → 0px - width: 402.078px → auto - height: 12px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + display: flex → — + justify-content: space-between → — + margin-bottom: 12px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output "135 °" - x: 448.2 → 88.5 (-359.7px) - y: 660.8 → 439.9 (-220.9px) - w: 32.5 → 40.1 (+7.6px) - h: 12 → 20 (+8px) - display: block → inline - width: 32.5px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input - x: 78.6 → 134.4 (+55.8px) - y: 685.8 → 439.9 (-245.9px) - margin-top: 0px → 2px - margin-right: 0px → 2px - margin-bottom: 0px → 2px - margin-left: 0px → 2px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) - background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) - color: rgb(23, 33, 43) → rgb(16, 16, 16) - font-size: 16px → 13.3333px - line-height: 24px → normal + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div [direction-grid] - x: 78.6 → 0 (-78.6px) - y: 722.8 → 461.9 (-260.9px) - w: 402.1 → 1440 (+1037.9px) - h: 70 → 25 (-45px) - display: grid → block - row-gap: 6px → normal - column-gap: 6px → normal - grid-template-columns: 96.0156px 96.0156px 96.0156px 96.0312px → none - grid-template-rows: 32px 32px → none - margin-top: 14px → 0px - width: 402.078px → 1440px - height: 70px → 25px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: grid → — + row-gap: 6px → — + column-gap: 6px → — + grid-template-columns: repeat(4, 1fr) → — + margin-top: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1) "0° →" - x: 78.6 → 0 (-78.6px) - y: 722.8 → 462.9 (-259.9px) - w: 96 → 46.7 (-49.3px) - h: 32 → 24 (-8px) - display: block → inline-block - padding-top: 8px → 1px - padding-bottom: 8px → 1px - width: 96.0156px → 46.7188px - height: 32px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 2px - border-top-style: solid → outset - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px + padding-top: 8px → — + padding-bottom: 8px → — + background-color: initial → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2) "45° ↗" - x: 180.6 → 46.7 (-133.9px) - y: 722.8 → 462.9 (-259.9px) - w: 96 → 51.1 (-44.9px) - h: 32 → 24 (-8px) - display: block → inline-block - padding-top: 8px → 1px - padding-bottom: 8px → 1px - width: 96.0156px → 51.1406px - height: 32px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 2px - border-top-style: solid → outset - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px + padding-top: 8px → — + padding-bottom: 8px → — + background-color: initial → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3) "90° ↑" - x: 282.6 → 97.9 (-184.7px) - y: 722.8 → 462.9 (-259.9px) - w: 96 → 52.3 (-43.7px) - h: 32 → 24 (-8px) - display: block → inline-block - padding-top: 8px → 1px - padding-bottom: 8px → 1px - width: 96.0156px → 52.3125px - height: 32px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 2px - border-top-style: solid → outset - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px + padding-top: 8px → — + padding-bottom: 8px → — + background-color: initial → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4) [selected] "135° ↖" - x: 384.6 → 150.2 (-234.4px) - y: 722.8 → 462.9 (-259.9px) - w: 96 → 59.2 (-36.8px) - h: 32 → 24 (-8px) - display: block → inline-block - padding-top: 8px → 1px - padding-bottom: 8px → 1px - width: 96.0312px → 59.1562px - height: 32px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 2px - border-top-style: solid → outset - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - background-color: rgb(23, 33, 43) → rgb(240, 240, 240) - color: rgb(238, 241, 244) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px + padding-top: 8px → — + padding-bottom: 8px → — + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5) "180° ←" - x: 78.6 → 209.3 (+130.7px) - y: 760.8 → 462.9 (-297.9px) - w: 96 → 62.7 (-33.3px) - h: 32 → 24 (-8px) - display: block → inline-block - padding-top: 8px → 1px - padding-bottom: 8px → 1px - width: 96.0156px → 62.7188px - height: 32px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 2px - border-top-style: solid → outset - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px + padding-top: 8px → — + padding-bottom: 8px → — + background-color: initial → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6) "225° ↙" - x: 180.6 → 272 (+91.4px) - y: 760.8 → 462.9 (-297.9px) - w: 96 → 59.2 (-36.8px) - h: 32 → 24 (-8px) - display: block → inline-block - padding-top: 8px → 1px - padding-bottom: 8px → 1px - width: 96.0156px → 59.1562px - height: 32px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 2px - border-top-style: solid → outset - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px + padding-top: 8px → — + padding-bottom: 8px → — + background-color: initial → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7) "270° ↓" - x: 282.6 → 331.2 (+48.6px) - y: 760.8 → 462.9 (-297.9px) - w: 96 → 60.3 (-35.7px) - h: 32 → 24 (-8px) - display: block → inline-block - padding-top: 8px → 1px - padding-bottom: 8px → 1px - width: 96.0156px → 60.3125px - height: 32px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 2px - border-top-style: solid → outset - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px + padding-top: 8px → — + padding-bottom: 8px → — + background-color: initial → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8) "315° ↘" - x: 384.6 → 391.5 (+6.9px) - y: 760.8 → 462.9 (-297.9px) - w: 96 → 59.2 (-36.8px) - h: 32 → 24 (-8px) - display: block → inline-block - padding-top: 8px → 1px - padding-bottom: 8px → 1px - width: 96.0312px → 59.1562px - height: 32px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 2px - border-top-style: solid → outset - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px + padding-top: 8px → — + padding-bottom: 8px → — + background-color: initial → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group] - x: 58.6 → 0 (-58.6px) - y: 815.8 → 486.9 (-328.9px) - w: 442.1 → 1440 (+997.9px) - h: 93 → 24 (-69px) - padding-top: 22px → 0px - padding-right: 20px → 0px - padding-bottom: 22px → 0px - padding-left: 20px → 0px - width: 442.078px → 1440px - height: 93px → 24px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 22px → — + padding-right: 20px → — + padding-bottom: 22px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label "OPACITY" - x: 78.6 → 0 (-78.6px) - y: 837.8 → 488.9 (-348.9px) - w: 402.1 → 116.5 (-285.6px) - h: 12 → 20 (+8px) - display: flex → inline - justify-content: space-between → normal - margin-bottom: 12px → 0px - width: 402.078px → auto - height: 12px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + display: flex → — + justify-content: space-between → — + margin-bottom: 12px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output "100 %" - x: 448.2 → 69 (-379.2px) - y: 837.8 → 488.9 (-348.9px) - w: 32.5 → 47.4 (+14.9px) - h: 12 → 20 (+8px) - display: block → inline - width: 32.5px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input - x: 78.6 → 122.3 (+43.7px) - y: 862.8 → 488.9 (-373.9px) - margin-top: 0px → 2px - margin-right: 0px → 2px - margin-bottom: 0px → 2px - margin-left: 0px → 2px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) - background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) - color: rgb(23, 33, 43) → rgb(16, 16, 16) - font-size: 16px → 13.3333px - line-height: 24px → normal + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - x: 58.6 → 0 (-58.6px) - y: 908.8 → 510.9 (-397.9px) - w: 442.1 → 1440 (+997.9px) - h: 50 → 25 (-25px) - display: flex → block - justify-content: space-between → normal - align-items: center → normal - padding-top: 16px → 0px - padding-right: 20px → 0px - padding-bottom: 16px → 0px - padding-left: 20px → 0px - width: 442.078px → 1440px - height: 50px → 25px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + justify-content: space-between → — + align-items: center → — + padding-top: 16px → — + padding-right: 20px → — + padding-bottom: 16px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - x: 78.6 → 0 (-78.6px) - y: 924.8 → 511.9 (-412.9px) - w: 52.4 → 67.3 (+14.9px) - h: 18 → 24 (+6px) - display: flex → inline-block - align-items: center → normal - row-gap: 7px → normal - column-gap: 7px → normal - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 52.3594px → 67.2969px - height: 18px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 0px → 2px - border-top-style: none → outset - border-top-color: rgb(23, 105, 210) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(23, 105, 210) → rgb(0, 0, 0) - font-size: 12px → 13.3333px - line-height: 18px → normal + display: flex → — + align-items: center → — + row-gap: 7px → — + column-gap: 7px → — + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + background-color: initial → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-size: 12px → 16px + line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - x: 78.6 → 8 (-70.6px) - y: 926.8 → 514.9 (-411.9px) - display: block → inline - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - color: rgb(23, 105, 210) → rgb(0, 0, 0) - font-size: 12px → 13.3333px - line-height: 18px → normal - vertical-align: middle → baseline + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-size: 12px → 16px + line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - x: 339.7 → 71.1 (-268.6px) - y: 927.3 → 512.9 (-414.4px) - w: 141 → 159.4 (+18.4px) - h: 13 → 20 (+7px) - display: flex → inline - align-items: center → normal - row-gap: 8px → normal - column-gap: 8px → normal - width: 141.016px → auto - height: 13px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 16px - line-height: normal → 24px + display: flex → — + align-items: center → — + row-gap: 8px → — + column-gap: 8px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - x: 339.7 → 71.1 (-268.6px) - y: 930.8 → 512.9 (-417.9px) w: 6 → 0 (-6px) h: 6 → 20 (+14px) - display: block → inline - width: 6px → auto - height: 6px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - border-radius: 50% → 0px - background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 16px - line-height: normal → 24px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [gradient-preview] - x: 557.7 → 0 (-557.7px) - y: 324.8 → 535.9 (+211.1px) - w: 824.7 → 1440 (+615.3px) - h: 931.2 → 186 (-745.2px) - width: 824.734px → 1440px - height: 931.172px → 186px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0) + display: inline-block → — + width: 6px → — + height: 6px → — + background-color: rgb(37, 169, 106) → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - x: 558.7 → 0 (-558.7px) - y: 325.8 → 535.9 (+210.1px) - w: 822.7 → 1440 (+617.3px) - h: 140 → 49 (-91px) - display: flex → block - justify-content: space-between → normal - align-items: center → normal - padding-top: 18px → 0px - padding-right: 20px → 0px - padding-bottom: 18px → 0px - padding-left: 20px → 0px - width: 822.734px → 1440px - height: 140px → 49px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) - x: 578.7 → 0 (-578.7px) - y: 372.3 → 535.9 (+163.6px) - w: 93.8 → 1440 (+1346.2px) - h: 46 → 24 (-22px) - width: 93.7812px → 1440px - height: 46px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + justify-content: space-between → — + align-items: center → — + padding-top: 18px → — + padding-right: 20px → — + padding-bottom: 18px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "OUTPUT PREVIEW" - x: 578.7 → 0 (-578.7px) - y: 380.3 → 537.9 (+157.6px) - w: 93.8 → 133.6 (+39.8px) - h: 12 → 20 (+8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1.2px → normal + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "gradient.png" - x: 578.7 → 137.4 (-441.3px) - y: 401.3 → 537.9 (+136.6px) - w: 93.8 → 96.2 (+2.4px) - h: 17 → 20 (+3px) - display: block → inline - margin-top: 5px → 0px - width: 93.7812px → auto - height: 17px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 14px → 16px - font-weight: 600 → 700 - line-height: normal → 24px + display: block → — + margin-top: 5px → — + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - x: 1150.8 → 0 (-1150.8px) - y: 343.8 → 559.9 (+216.1px) - w: 210.6 → 1440 (+1229.4px) - h: 103 → 25 (-78px) - display: flex → block - flex-wrap: wrap → nowrap - justify-content: flex-end → normal - align-items: center → normal - row-gap: 10px → normal - column-gap: 10px → normal - width: 210.562px → 1440px - height: 103px → 25px - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + flex-wrap: wrap → — + justify-content: flex-end → — + align-items: center → — + row-gap: 10px → — + column-gap: 10px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [secondary-btn] "Copy CSS" - x: 1280.4 → 0 (-1280.4px) - y: 343.8 → 559.9 (+216.1px) - w: 81 → 91 (+10px) - h: 33 → 25 (-8px) - display: flex → inline-block - align-items: center → normal - row-gap: 8px → normal - column-gap: 8px → normal - padding-top: 8px → 1px - padding-bottom: 8px → 1px - width: 80.9844px → 91px - height: 33px → 25px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 2px - border-top-style: solid → outset - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px + display: flex → — + align-items: center → — + row-gap: 8px → — + column-gap: 8px → — + padding-top: 8px → — + padding-bottom: 8px → — + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] - x: 1287.4 → 8 (-1279.4px) - y: 352.8 → 562.9 (+210.1px) - display: block → inline - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 13.3333px - vertical-align: middle → baseline + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download PNG" - x: 1150.8 → 94.8 (-1056px) - y: 404.8 → 559.9 (+155.1px) w: 210.6 → 141.3 (-69.3px) h: 42 → 25 (-17px) - display: flex → inline-block - justify-content: center → normal - align-items: center → normal - row-gap: 9px → normal - column-gap: 9px → normal - margin-top: 18px → 0px - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 210.562px → 141.297px - height: 42px → 25px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 0px → 2px - border-top-style: none → outset - border-top-color: rgb(255, 255, 255) → rgb(0, 0, 0) - background-color: rgb(23, 105, 210) → rgb(240, 240, 240) - color: rgb(255, 255, 255) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 13.3333px - white-space: nowrap → normal + display: flex → — + justify-content: center → — + align-items: center → — + row-gap: 9px → — + column-gap: 9px → — + margin-top: 18px → — + width: 100% → — + height: 42px → — + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + color: rgb(255, 255, 255) → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - x: 1196.3 → 102.8 (-1093.5px) - y: 418.3 → 562.9 (+144.6px) - display: block → inline - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - color: rgb(255, 255, 255) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 13.3333px - white-space: nowrap → normal - vertical-align: middle → baseline + color: rgb(255, 255, 255) → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-chevron-down lucide-icon] - x: 1301.9 → 214.1 (-1087.8px) - y: 418.8 → 563.9 (+145.1px) - display: block → inline - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - color: rgb(255, 255, 255) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 13.3333px - white-space: nowrap → normal - vertical-align: middle → baseline + color: rgb(255, 255, 255) → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [large-canvas] - x: 558.7 → 0 (-558.7px) - y: 465.8 → 584.9 (+119.1px) - w: 822.7 → 1440 (+617.3px) - h: 652.8 → 48 (-604.8px) - padding-top: 24px → 0px - padding-right: 24px → 0px - padding-bottom: 24px → 0px - padding-left: 24px → 0px - width: 822.734px → 1440px - height: 652.797px → 48px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - background-color: rgb(32, 42, 49) → rgba(0, 0, 0, 0) - background-image: linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%) → none - background-size: 28px 28px, 28px 28px, 28px 28px, 28px 28px → auto - background-position: 0px 0px, 0px 14px, 14px -14px, -14px 0px → 0% 0% + padding-top: 24px → — + padding-right: 24px → — + padding-bottom: 24px → — + padding-left: 24px → — + background-color: rgb(32, 42, 49) → — + background-image: linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%) → — + background-size: 28px 28px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div [gradient-art] - x: 582.7 → 0 (-582.7px) - y: 489.8 → 584.9 (+95.1px) - w: 774.7 → 1440 (+665.3px) - h: 604.8 → 48 (-556.8px) - display: grid → block - justify-content: center → normal - grid-template-columns: 92.375px → none - grid-template-rows: 82px 14px → none - width: 774.734px → 1440px - height: 604.797px → 48px - min-height: 604.8px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(255, 255, 255) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 12px → 16px - line-height: normal → 24px + display: grid → — + justify-content: center → — + min-height: clamp(420px, 42vw, 680px) → — + color: rgb(255, 255, 255) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > div [art-mark] "PNG" - x: 935 → 0 (-935px) - y: 744.2 → 584.9 (-159.3px) w: 70 → 1440 (+1370px) h: 70 → 24 (-46px) - display: grid → block - align-items: center → normal - grid-template-columns: 68px → none - grid-template-rows: 68px → none - margin-bottom: 12px → 0px - width: 70px → 1440px - height: 70px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgba(255, 255, 255, 0.65) → rgb(23, 33, 43) - color: rgb(255, 255, 255) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - line-height: normal → 24px + display: grid → — + align-items: center → — + margin-bottom: 12px → — + width: 70px → — + height: 70px → — + border-top-width: 1px → — + border-top-style: solid → — + border-top-color: rgba(255, 255, 255, 0.65) → — + color: rgb(255, 255, 255) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > span "easy-png-tools" - x: 923.8 → 0 (-923.8px) - y: 826.2 → 610.9 (-215.3px) - w: 92.4 → 107.9 (+15.5px) - h: 14 → 20 (+6px) - display: block → inline - width: 92.375px → auto - height: 14px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(255, 255, 255) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 12px → 16px - line-height: normal → 24px + color: rgb(255, 255, 255) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [code-block] - x: 558.7 → 0 (-558.7px) - y: 1118.6 → 632.9 (-485.7px) - w: 822.7 → 1440 (+617.3px) - h: 136.4 → 89 (-47.4px) - padding-top: 16px → 0px - padding-right: 20px → 0px - padding-bottom: 16px → 0px - padding-left: 20px → 0px - width: 822.734px → 1440px - height: 136.375px → 89px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 16px → — + padding-right: 20px → — + padding-bottom: 16px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div - x: 578.7 → 0 (-578.7px) - y: 1134.6 → 632.9 (-501.7px) - w: 782.7 → 1440 (+657.3px) - display: flex → block - justify-content: space-between → normal - align-items: center → normal - width: 782.734px → 1440px - height: 26px → 25px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + justify-content: space-between → — + align-items: center → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > span [label] "GENERATED CSS" - x: 578.7 → 0 (-578.7px) - y: 1141.6 → 634.9 (-506.7px) - w: 87.1 → 121.9 (+34.8px) - h: 12 → 20 (+8px) - display: block → inline - width: 87.0781px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1.2px → normal + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button [icon-btn] - x: 1335.4 → 125.7 (-1209.7px) - y: 1134.6 → 633.9 (-500.7px) - w: 26 → 30 (+4px) - h: 26 → 24 (-2px) - display: grid → inline-block - align-items: center → normal - grid-template-columns: 14px → none - grid-template-rows: 14px → none - padding-top: 6px → 1px - padding-bottom: 6px → 1px - width: 26px → 30px - height: 26px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 0px → 2px - border-top-style: none → outset - border-top-color: rgb(109, 120, 131) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-size: 16px → 13.3333px - line-height: 24px → normal + display: grid → — + align-items: center → — + padding-top: 6px → — + padding-bottom: 6px → — + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + background-color: initial → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button > svg [lucide lucide-copy lucide-icon] - x: 1341.4 → 133.7 (-1207.7px) - y: 1140.6 → 636.9 (-503.7px) - display: block → inline - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - color: rgb(109, 120, 131) → rgb(0, 0, 0) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > pre "background: linear-gradient(135deg, #176" - x: 578.7 → 0 (-578.7px) - y: 1172.6 → 673.9 (-498.7px) - w: 782.7 → 1440 (+657.3px) - h: 66.4 → 48 (-18.4px) - margin-top: 12px → 16px - margin-bottom: 0px → 16px - padding-top: 14px → 0px - padding-right: 14px → 0px - padding-bottom: 14px → 0px - padding-left: 14px → 0px - width: 782.734px → 1440px - height: 66.375px → 48px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - background-color: rgb(238, 241, 244) → rgba(0, 0, 0, 0) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → monospace - font-size: 12px → 16px - line-height: 19.2px → 24px - white-space: pre-wrap → pre + margin-top: 12px → — + margin-right: 0px → — + margin-bottom: 0px → — + margin-left: 0px → — + padding-top: 14px → — + padding-right: 14px → — + padding-bottom: 14px → — + padding-left: 14px → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > footer [preview-footer] - y: 1328 → 737.9 (-590.1px) - row-gap: normal → 16px - column-gap: normal → 16px - height: 45px → 46px - letter-spacing: normal → 0.8px + row-gap: — → 1rem + column-gap: — → 1rem + padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) + padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) + letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(1) "easy-png-tools" - y: 1345 → 754.9 (-590.1px) - w: 117 → 142.8 (+25.8px) - display: flex → block - align-items: center → normal - row-gap: 7px → normal - column-gap: 7px → normal - width: 116.984px → 142.812px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: normal → 0.8px + display: flex → — + align-items: center → — + row-gap: 7px → — + column-gap: 7px → — + letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - x: 141.6 → 159.6 (+18px) - y: 1345 → 754.9 (-590.1px) - w: 33 → 40.8 (+7.8px) - display: block → inline - width: 33px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-weight: 400 → 700 - letter-spacing: normal → 0.8px + font-weight: 400 → — + letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(2) "© 2024" - x: 690.5 → 1341.6 (+651.1px) - y: 1345 → 754.9 (-590.1px) - w: 143 → 40.8 (-102.2px) - display: flex → block - align-items: center → normal - row-gap: 7px → normal - column-gap: 7px → normal - width: 142.953px → 40.8125px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: normal → 0.8px + display: flex → — + align-items: center → — + row-gap: 7px → — + column-gap: 7px → — + letter-spacing: — → 0.08em body >main >footer >span:nth-of-type(3) "© 2024" ✗ present in reference, absent in project @@ -6767,1647 +2521,751 @@ body >div ✗ present in reference, absent in project -=== /preview/tools/remove-background-png (vs background-remover.html) — 111 differences === - -body - h: 1103.8 → 900 (-203.8px) - height: 1103.78px → 900px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main [preview-root] - h: 1103.8 → 900 (-203.8px) - height: 1103.78px → 900px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) +=== /preview/tools/remove-background-png (vs background-remover.html) — 100 differences === body > main > header [topbar] - position: static → sticky - top: auto → 0px - z-index: auto → 20 - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > a [brand] - w: 291.8 → 311.6 (+19.8px) - width: 291.75px → 311.609px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(255, 255, 255) - -body > main > header > a > span:nth-of-type(2) "easy-png-tools" - w: 107.8 → 117.6 (+9.8px) - width: 107.766px → 117.609px - height: 17px → 18px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + position: — → sticky + top: — → 0px + z-index: — → 20 body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER" - x: 215.4 → 225.2 (+9.8px) - w: 134 → 144 (+10px) - width: 133.984px → 144px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - -body > main > header > div [top-actions] - x: 1104.5 → 1091 (-13.5px) - w: 277.9 → 291.4 (+13.5px) - width: 277.938px → 291.406px - height: 29px → 28px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > header > div > span [status] "AUTO PROCESSING" - x: 1104.5 → 1091 (-13.5px) - w: 107.5 → 117 (+9.5px) - width: 107.484px → 117px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] body > main > header > div > span > i [status-dot] - x: 1104.5 → 1091 (-13.5px) w: 6 → 8 (+2px) h: 6 → 8 (+2px) width: 6px → 8px height: 6px → 8px - box-shadow: none → color(srgb 0.145098 0.662745 0.415686 / 0.25) 0px 0px 0px 2px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - x: 1228 → 1224 (-4px) - display: grid → flex - justify-content: normal → center - grid-template-columns: 17px → none - grid-template-rows: 17px → none - width: 29px → 28px - height: 29px → 28px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] - x: 1234 → 1230 (-4px) - width: 17px → 16px - height: 17px → 16px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - x: 1273 → 1268 (-5px) - display: grid → flex - justify-content: normal → center - grid-template-columns: 17px → none - grid-template-rows: 17px → none - width: 29px → 28px - height: 29px → 28px - background-position: 0px 0px → 0% 0% - font-size: 16px → 13.3333px - line-height: 24px → normal + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - x: 1279 → 1274 (-5px) - width: 17px → 16px - height: 17px → 16px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 16px → 13.3333px - line-height: 24px → normal - vertical-align: middle → baseline + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > header > div > div [lang] - x: 1318 → 1312 (-6px) - w: 64.5 → 70.4 (+5.9px) - align-items: center → normal - width: 64.4531px → 70.4062px - height: 26px → 27px - overflow: visible → hidden - border-radius: 0px → 4px + display: flex → inline-flex + align-items: center → — body > main > header > div > div > span [lang-div] "/" - x: 1348 → 1344.2 (-3.8px) - y: 19.5 → 25 (+5.5px) - w: 4.5 → 6 (+1.5px) - h: 24 → 13 (-11px) - align-self: auto → center - width: 4.45312px → 6px - height: 24px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - color: rgb(23, 33, 43) → rgb(109, 120, 131) - font-family: "IBM Plex Sans", sans-serif → "IBM Plex Mono", monospace - font-size: 16px → 10px - line-height: 24px → normal + align-self: — → center + color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] + font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - x: 1352.4 → 1350.2 (-2.2px) - w: 29 → 31.2 (+2.2px) - width: 29px → 31.2031px - height: 24px → 25px - background-position: 0px 0px → 0% 0% - letter-spacing: normal → 0.6px + letter-spacing: — → 0.06em body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - x: 1319 → 1313 (-6px) - w: 29 → 31.2 (+2.2px) - width: 29px → 31.2031px - height: 24px → 25px - letter-spacing: normal → 0.6px + letter-spacing: — → 0.06em body > main > header > nav [nav] - x: 779.5 → 553.8 (-225.7px) - y: 25.5 → 24 (-1.5px) - w: 296.9 → 376.6 (+79.7px) - h: 12 → 15 (+3px) row-gap: 22px → 18px column-gap: 22px → 18px - margin-right: 28px → 0px - margin-left: 430.188px → 24px - width: 296.938px → 376.594px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + margin-right: 28px → — + margin-left: auto → 24px body > main > header > nav > a:nth-of-type(1) "Workspace" - x: 779.5 → 553.8 (-225.7px) - y: 25.5 → 24 (-1.5px) - w: 49.5 → 69.1 (+19.6px) - h: 12 → 15 (+3px) - width: 49.4844px → 69.125px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(2) "Catalog" - x: 851 → 640.9 (-210.1px) - y: 25.5 → 24 (-1.5px) - w: 38.5 → 53.8 (+15.3px) - h: 12 → 15 (+3px) - width: 38.5px → 53.7656px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(3) "Gradient" - x: 911.5 → 712.7 (-198.8px) - y: 25.5 → 24 (-1.5px) - w: 44 → 61.5 (+17.5px) - h: 12 → 15 (+3px) - width: 43.9844px → 61.4531px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > header > nav > a:nth-of-type(4) "Background remover" - x: 977.5 → 792.2 (-185.3px) - y: 25.5 → 24 (-1.5px) - w: 99 → 138.3 (+39.3px) - h: 12 → 15 (+3px) - width: 98.9688px → 138.25px - height: 12px → 15px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - color: rgb(23, 105, 210) → rgb(109, 120, 131) - font-size: 10px → 12px - letter-spacing: normal → 0.48px - white-space: nowrap → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em body > main > div [tool-page] - h: 994.8 → 752.9 (-241.9px) - padding-top: 60px → 0px - padding-right: 57.6px → 0px - padding-bottom: 72px → 0px - padding-left: 57.6px → 0px - height: 994.781px → 752.875px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 60px → — + padding-right: clamp(24px, 4vw, 72px) → — + padding-bottom: 72px → — + padding-left: clamp(24px, 4vw, 72px) → — + width: 100% → — body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - x: 57.6 → 0 (-57.6px) - y: 124 → 64 (-60px) - w: 1324.8 → 1440 (+115.2px) - h: 12 → 24 (+12px) - margin-bottom: 18px → 0px - width: 1324.81px → 1440px - height: 12px → 24px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1.2px → normal + margin-bottom: 18px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(1) > span "/" - x: 165.1 → 137.3 (-27.8px) - y: 124 → 66 (-58px) - w: 13.4 → 6.1 (-7.3px) - h: 12 → 20 (+8px) - margin-right: 7px → 0px - margin-left: 7px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1.2px → normal + margin-top: 0px → — + margin-right: 7px → — + margin-bottom: 0px → — + margin-left: 7px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(2) [tool-title] - x: 57.6 → 0 (-57.6px) - y: 154 → 109.4 (-44.6px) - w: 1324.8 → 1440 (+115.2px) - h: 122.8 → 133.4 (+10.6px) - display: flex → block - justify-content: space-between → normal - align-items: end → normal - row-gap: 32px → normal - column-gap: 32px → normal - margin-bottom: 48px → 0px - width: 1324.81px → 1440px - height: 122.781px → 133.438px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(2) > div - x: 57.6 → 0 (-57.6px) - y: 154 → 109.4 (-44.6px) - w: 550 → 1440 (+890px) - h: 122.8 → 93.4 (-29.4px) - width: 550px → 1440px - height: 122.781px → 93.4375px - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + justify-content: space-between → — + align-items: end → — + row-gap: 32px → — + column-gap: 32px → — + margin-bottom: 48px → — body > main > div > div:nth-of-type(2) > div > h1 "Remove background." - x: 57.6 → 0 (-57.6px) - y: 154 → 109.4 (-44.6px) - w: 550 → 1440 (+890px) - h: 57.6 → 48 (-9.6px) - margin-top: 0px → 21.44px - margin-bottom: 14px → 21.44px - width: 550px → 1440px - height: 57.5938px → 48px - max-width: 700px → none - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-size: 57.6px → 32px - font-weight: 650 → 700 - line-height: 57.6px → 48px - letter-spacing: -3.456px → normal + margin-top: 0px → — + margin-right: 0px → — + margin-bottom: 14px → — + margin-left: 0px → — + max-width: 700px → — + font-size: clamp(36px, 4vw, 64px) → 16px + font-weight: 650 → — + line-height: 1 → 1.5 + letter-spacing: -0.06em → — body > main > div > div:nth-of-type(2) > div > p [lede] "Select a background color and tune the e" - x: 57.6 → 0 (-57.6px) - y: 225.6 → 178.9 (-46.7px) - w: 550 → 1440 (+890px) - h: 51.2 → 24 (-27.2px) - margin-top: 0px → 16px - margin-bottom: 0px → 16px - width: 550px → 1440px - height: 51.1875px → 24px - max-width: 550px → none - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - line-height: 25.6px → 24px + margin-top: 0px → — + margin-right: 0px → — + margin-bottom: 0px → — + margin-left: 0px → — + max-width: 550px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + line-height: 1.6 → 1.5 body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - x: 1302.4 → 0 (-1302.4px) - y: 264.8 → 220.9 (-43.9px) - w: 80 → 106.1 (+26.1px) - h: 12 → 20 (+8px) - display: flex → inline - align-items: center → normal - row-gap: 8px → normal - column-gap: 8px → normal - width: 79.9844px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(37, 169, 106) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - white-space: nowrap → normal + display: flex → — + align-items: center → — + row-gap: 8px → — + column-gap: 8px → — + color: rgb(37, 169, 106) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(2) > span > i - x: 1302.4 → 0 (-1302.4px) - y: 267.8 → 220.9 (-46.9px) w: 6 → 0 (-6px) h: 6 → 20 (+14px) - display: block → inline - width: 6px → auto - height: 6px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - border-radius: 50% → 0px - background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0) - color: rgb(37, 169, 106) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - white-space: nowrap → normal + width: 6px → — + height: 6px → — + background-color: rgb(37, 169, 106) → — + color: rgb(37, 169, 106) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) [remover-layout] - x: 57.6 → 0 (-57.6px) - y: 324.8 → 242.9 (-81.9px) - w: 1324.8 → 1440 (+115.2px) - h: 662 → 574 (-88px) - display: grid → block - align-items: start → normal - row-gap: 56px → normal - column-gap: 56px → normal - grid-template-columns: 393.328px 875.484px → none - grid-template-rows: 662px → none - width: 1324.81px → 1440px - height: 662px → 574px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [settings-panel] - x: 57.6 → 0 (-57.6px) - y: 324.8 → 242.9 (-81.9px) - w: 393.3 → 1440 (+1046.7px) - h: 559 → 357 (-202px) - width: 393.328px → 1440px - height: 559px → 357px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0) + display: grid → — + align-items: start → — + row-gap: 56px → — + column-gap: 56px → — + grid-template-columns: minmax(360px, 0.62fr) minmax(0px, 1.38fr) → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - x: 58.6 → 0 (-58.6px) - y: 325.8 → 242.9 (-82.9px) - w: 391.3 → 1440 (+1048.7px) - h: 83 → 48 (-35px) - display: flex → block - justify-content: space-between → normal - align-items: center → normal - padding-top: 18px → 0px - padding-right: 20px → 0px - padding-bottom: 18px → 0px - padding-left: 20px → 0px - width: 391.328px → 1440px - height: 83px → 48px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div - x: 78.6 → 0 (-78.6px) - y: 343.8 → 242.9 (-100.9px) - w: 146.3 → 1440 (+1293.7px) - h: 46 → 24 (-22px) - width: 146.25px → 1440px - height: 46px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + justify-content: space-between → — + align-items: center → — + padding-top: 18px → — + padding-right: 20px → — + padding-bottom: 18px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "REMOVER SETTINGS" - x: 78.6 → 0 (-78.6px) - y: 351.8 → 244.9 (-106.9px) - w: 107.2 → 152.1 (+44.9px) - h: 12 → 20 (+8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1.2px → normal + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure detection" - x: 78.6 → 155.9 (+77.3px) - y: 372.8 → 244.9 (-127.9px) - w: 146.3 → 148.1 (+1.8px) - h: 17 → 20 (+3px) - display: block → inline - margin-top: 5px → 0px - width: 146.25px → auto - height: 17px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 14px → 16px - font-weight: 600 → 700 - line-height: normal → 24px + display: block → — + margin-top: 5px → — + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 02" - x: 383 → 0 (-383px) - y: 360.8 → 268.9 (-91.9px) - w: 46.9 → 62.5 (+15.6px) - h: 12 → 20 (+8px) - display: block → inline - width: 46.8906px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1.2px → normal + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - x: 58.6 → 0 (-58.6px) - y: 408.8 → 290.9 (-117.9px) - w: 391.3 → 1440 (+1048.7px) - h: 123 → 76 (-47px) - padding-top: 22px → 0px - padding-right: 20px → 0px - padding-bottom: 22px → 0px - padding-left: 20px → 0px - width: 391.328px → 1440px - height: 123px → 76px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 22px → — + padding-right: 20px → — + padding-bottom: 22px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "BACKGROUND COLOR" - x: 78.6 → 0 (-78.6px) - y: 430.8 → 292.9 (-137.9px) - w: 351.3 → 159.4 (-191.9px) - h: 12 → 20 (+8px) - display: flex → inline - justify-content: space-between → normal - margin-bottom: 12px → 0px - width: 351.328px → auto - height: 12px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + display: flex → — + justify-content: space-between → — + margin-bottom: 12px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [color-field] - x: 78.6 → 0 (-78.6px) - y: 454.8 → 314.9 (-139.9px) - w: 351.3 → 1440 (+1088.7px) h: 32 → 28 (-4px) - display: flex → block - align-items: center → normal - row-gap: 8px → normal - column-gap: 8px → normal - padding-right: 8px → 0px - padding-left: 8px → 0px - width: 351.328px → 1440px - height: 32px → 28px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + align-items: center → — + row-gap: 8px → — + column-gap: 8px → — + padding-right: 8px → — + padding-left: 8px → — + height: 32px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span [swatch] - x: 87.6 → 0 (-87.6px) - y: 463.8 → 319.9 (-143.9px) w: 14 → 0 (-14px) h: 14 → 20 (+6px) - display: block → inline - width: 14px → auto - height: 14px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + width: 14px → — + height: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(1) - x: 109.6 → 0 (-109.6px) - y: 464.3 → 318.9 (-145.4px) - w: 151.7 → 157 (+5.3px) - h: 13 → 24 (+11px) - display: block → inline-block - padding-top: 0px → 1px - padding-right: 0px → 2px - padding-bottom: 0px → 1px - padding-left: 0px → 2px - width: 151.656px → 157px - height: 13px → 24px - min-height: auto → 0px - border-top-width: 0px → 2px - border-top-style: none → inset - border-top-color: rgb(23, 33, 43) → rgb(118, 118, 118) - background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) - background-position: 0px 0px → 0% 0% - color: rgb(23, 33, 43) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 13.3333px + min-width: 0px → — + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + background-color: initial → — + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(2) [native-color] - x: 269.3 → 160.8 (-108.5px) - y: 457.3 → 314.9 (-142.4px) w: 151.7 → 50 (-101.7px) - display: block → inline-block - padding-top: 0px → 1px - padding-right: 0px → 2px - padding-bottom: 0px → 1px - padding-left: 0px → 2px - width: 151.672px → 50px - min-height: auto → 0px - border-top-width: 0px → 1px - border-top-style: none → solid - border-top-color: rgb(23, 33, 43) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(23, 33, 43) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 13.3333px + padding-top: 0px → — + padding-right: 0px → — + padding-bottom: 0px → — + padding-left: 0px → — + width: 30px → — + min-width: 0px → — + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + background-color: initial → — + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background" - x: 78.6 → 0 (-78.6px) - y: 496.8 → 342.9 (-153.9px) - w: 351.3 → 1440 (+1088.7px) - h: 12 → 24 (+12px) - display: flex → block - justify-content: flex-start → normal - row-gap: 8px → normal - column-gap: 8px → normal - margin-top: 10px → 0px - width: 351.328px → 1440px - height: 12px → 24px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + display: flex → — + justify-content: space-between → — + row-gap: 8px → — + column-gap: 8px → — + margin-top: 10px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span - x: 78.6 → 0 (-78.6px) - y: 496.8 → 344.9 (-151.9px) w: 9 → 0 (-9px) h: 9 → 20 (+11px) - display: block → inline - width: 9px → auto - height: 9px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + width: 9px → — + height: 9px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - x: 58.6 → 0 (-58.6px) - y: 531.8 → 366.9 (-164.9px) - w: 391.3 → 1440 (+1048.7px) - h: 115 → 48 (-67px) - padding-top: 22px → 0px - padding-right: 20px → 0px - padding-bottom: 22px → 0px - padding-left: 20px → 0px - width: 391.328px → 1440px - height: 115px → 48px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 22px → — + padding-right: 20px → — + padding-bottom: 22px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR SIMILARITY" - x: 78.6 → 0 (-78.6px) - y: 553.8 → 368.9 (-184.9px) - w: 351.3 → 184.4 (-166.9px) - h: 12 → 20 (+8px) - display: flex → inline - justify-content: space-between → normal - margin-bottom: 12px → 0px - width: 351.328px → auto - height: 12px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + display: flex → — + justify-content: space-between → — + margin-bottom: 12px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label > output "72 %" - x: 403.9 → 146.6 (-257.3px) - y: 553.8 → 368.9 (-184.9px) - w: 26 → 37.8 (+11.8px) - h: 12 → 20 (+8px) - display: block → inline - width: 26px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > input - x: 78.6 → 190.2 (+111.6px) - y: 578.8 → 368.9 (-209.9px) - margin-top: 0px → 2px - margin-right: 0px → 2px - margin-bottom: 0px → 2px - margin-left: 0px → 2px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(16, 16, 16) - background-color: rgba(0, 0, 0, 0) → rgb(255, 255, 255) - color: rgb(23, 33, 43) → rgb(16, 16, 16) - font-size: 16px → 13.3333px - line-height: 24px → normal + font-size: inherit → 16px + line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div [range-hints] - x: 78.6 → 0 (-78.6px) - y: 611.8 → 390.9 (-220.9px) - w: 351.3 → 1440 (+1088.7px) - h: 12 → 24 (+12px) - display: flex → block - justify-content: space-between → normal - margin-top: 10px → 0px - width: 351.328px → 1440px - height: 12px → 24px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + display: flex → — + justify-content: space-between → — + margin-top: 10px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(1) "strict edges" - x: 78.6 → 0 (-78.6px) - y: 611.8 → 392.9 (-218.9px) - w: 66 → 83.6 (+17.6px) - h: 12 → 20 (+8px) - display: block → inline - width: 65.9844px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(2) "more removal" - x: 363.9 → 87.4 (-276.5px) - y: 611.8 → 392.9 (-218.9px) - w: 66 → 99.3 (+33.3px) - h: 12 → 20 (+8px) - display: block → inline - width: 65.9844px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group toggle-group] - x: 58.6 → 0 (-58.6px) - y: 646.8 → 414.9 (-231.9px) - w: 391.3 → 1440 (+1048.7px) - h: 93 → 64 (-29px) - padding-top: 22px → 0px - padding-right: 20px → 0px - padding-bottom: 22px → 0px - padding-left: 20px → 0px - width: 391.328px → 1440px - height: 93px → 64px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 22px → — + padding-right: 20px → — + padding-bottom: 22px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label - x: 78.6 → 0 (-78.6px) - y: 668.8 → 416.9 (-251.9px) - w: 351.3 → 147.6 (-203.7px) - h: 18 → 20 (+2px) - display: flex → inline - justify-content: space-between → normal - align-items: center → normal - margin-bottom: 12px → 0px - width: 351.328px → auto - height: 18px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + display: flex → — + justify-content: space-between → — + align-items: center → — + margin-bottom: 12px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > span "OUTER COLOR ONLY" - x: 78.6 → 0 (-78.6px) - y: 671.8 → 416.9 (-254.9px) - w: 104 → 147.6 (+43.6px) - h: 12 → 20 (+8px) - display: block → inline - width: 103.969px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > b [on toggle] - x: 397.9 → 147.6 (-250.3px) - y: 668.8 → 416.9 (-251.9px) w: 32 → 0 (-32px) h: 18 → 20 (+2px) - display: block → inline - position: relative → static - top: 0px → auto - right: 0px → auto - bottom: 0px → auto - left: 0px → auto - width: 32px → auto - height: 18px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(23, 105, 210) → rgb(23, 33, 43) - background-color: rgb(23, 105, 210) → rgba(0, 0, 0, 0) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + position: relative → — + width: 32px → — + height: 18px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(4) >label >input ✗ present in reference, absent in project body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > p "Only remove connected background pixels " - x: 78.6 → 0 (-78.6px) - y: 698.8 → 454.9 (-243.9px) - w: 351.3 → 1440 (+1088.7px) - h: 18 → 24 (+6px) - margin-top: 8px → 16px - margin-bottom: 0px → 16px - width: 351.328px → 1440px - height: 18px → 24px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) + margin-top: 8px → — + margin-right: 0px → — + margin-bottom: 0px → — + margin-left: 0px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: 12px → 16px - line-height: 18px → 24px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group toggle-group] - x: 58.6 → 0 (-58.6px) - y: 739.8 → 494.9 (-244.9px) - w: 391.3 → 1440 (+1048.7px) - h: 93 → 64 (-29px) - padding-top: 22px → 0px - padding-right: 20px → 0px - padding-bottom: 22px → 0px - padding-left: 20px → 0px - width: 391.328px → 1440px - height: 93px → 64px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + padding-top: 22px → — + padding-right: 20px → — + padding-bottom: 22px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label - x: 78.6 → 0 (-78.6px) - y: 761.8 → 496.9 (-264.9px) - w: 351.3 → 92.7 (-258.6px) - h: 18 → 20 (+2px) - display: flex → inline - justify-content: space-between → normal - align-items: center → normal - margin-bottom: 12px → 0px - width: 351.328px → auto - height: 18px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + display: flex → — + justify-content: space-between → — + align-items: center → — + margin-bottom: 12px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > span "SHOW MASK" - x: 78.6 → 0 (-78.6px) - y: 764.8 → 496.9 (-267.9px) - w: 58.5 → 92.7 (+34.2px) - h: 12 → 20 (+8px) - display: block → inline - width: 58.4844px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > b [toggle] - x: 397.9 → 92.7 (-305.2px) - y: 761.8 → 496.9 (-264.9px) w: 32 → 0 (-32px) h: 18 → 20 (+2px) - display: block → inline - position: relative → static - top: 0px → auto - right: 0px → auto - bottom: 0px → auto - left: 0px → auto - width: 32px → auto - height: 18px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1px → normal + position: relative → — + width: 32px → — + height: 18px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.1em → — body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(5) >label >input ✗ present in reference, absent in project body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > p "Preview the detected transparency mask." - x: 78.6 → 0 (-78.6px) - y: 791.8 → 534.9 (-256.9px) - w: 351.3 → 1440 (+1088.7px) - h: 18 → 24 (+6px) - margin-top: 8px → 16px - margin-bottom: 0px → 16px - width: 351.328px → 1440px - height: 18px → 24px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) + margin-top: 8px → — + margin-right: 0px → — + margin-bottom: 0px → — + margin-left: 0px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: 12px → 16px - line-height: 18px → 24px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - x: 58.6 → 0 (-58.6px) - y: 832.8 → 574.9 (-257.9px) - w: 391.3 → 1440 (+1048.7px) - h: 50 → 25 (-25px) - display: flex → block - justify-content: space-between → normal - align-items: center → normal - padding-top: 16px → 0px - padding-right: 20px → 0px - padding-bottom: 16px → 0px - padding-left: 20px → 0px - width: 391.328px → 1440px - height: 50px → 25px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + justify-content: space-between → — + align-items: center → — + padding-top: 16px → — + padding-right: 20px → — + padding-bottom: 16px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - x: 78.6 → 0 (-78.6px) - y: 848.8 → 575.9 (-272.9px) - w: 52.4 → 67.3 (+14.9px) - h: 18 → 24 (+6px) - display: flex → inline-block - align-items: center → normal - row-gap: 7px → normal - column-gap: 7px → normal - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 52.3594px → 67.2969px - height: 18px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 0px → 2px - border-top-style: none → outset - border-top-color: rgb(23, 105, 210) → rgb(0, 0, 0) - background-color: rgba(0, 0, 0, 0) → rgb(240, 240, 240) - background-position: 0px 0px → 0% 0% - color: rgb(23, 105, 210) → rgb(0, 0, 0) - font-size: 12px → 13.3333px - line-height: 18px → normal + display: flex → — + align-items: center → — + row-gap: 7px → — + column-gap: 7px → — + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + background-color: initial → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-size: 12px → 16px + line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - x: 78.6 → 8 (-70.6px) - y: 850.8 → 578.9 (-271.9px) - display: block → inline - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - color: rgb(23, 105, 210) → rgb(0, 0, 0) - font-size: 12px → 13.3333px - line-height: 18px → normal - vertical-align: middle → baseline + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-size: 12px → 16px + line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - x: 288.9 → 71.1 (-217.8px) - y: 851.3 → 576.9 (-274.4px) - w: 141 → 159.4 (+18.4px) - h: 13 → 20 (+7px) - display: flex → inline - align-items: center → normal - row-gap: 8px → normal - column-gap: 8px → normal - width: 141.016px → auto - height: 13px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 16px - line-height: normal → 24px + display: flex → — + align-items: center → — + row-gap: 8px → — + column-gap: 8px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - x: 288.9 → 71.1 (-217.8px) - y: 854.8 → 576.9 (-277.9px) w: 6 → 0 (-6px) h: 6 → 20 (+14px) - display: block → inline - width: 6px → auto - height: 6px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - border-radius: 50% → 0px - background-color: rgb(37, 169, 106) → rgba(0, 0, 0, 0) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 16px - line-height: normal → 24px + display: inline-block → — + width: 6px → — + height: 6px → — + background-color: rgb(37, 169, 106) → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [remover-preview] - x: 506.9 → 0 (-506.9px) - y: 324.8 → 599.9 (+275.1px) - w: 875.5 → 1440 (+564.5px) - h: 662 → 217 (-445px) - width: 875.484px → 1440px - height: 662px → 217px - min-height: auto → 0px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - background-color: rgb(248, 250, 251) → rgba(0, 0, 0, 0) + min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - x: 507.9 → 0 (-507.9px) - y: 325.8 → 599.9 (+274.1px) - w: 873.5 → 1440 (+566.5px) - h: 121 → 49 (-72px) - display: flex → block - justify-content: space-between → normal - align-items: center → normal - padding-top: 18px → 0px - padding-right: 20px → 0px - padding-bottom: 18px → 0px - padding-left: 20px → 0px - width: 873.484px → 1440px - height: 121px → 49px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) - x: 527.9 → 0 (-527.9px) - y: 362.8 → 599.9 (+237.1px) - w: 107.8 → 1440 (+1332.2px) - h: 46 → 24 (-22px) - width: 107.766px → 1440px - height: 46px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + justify-content: space-between → — + align-items: center → — + padding-top: 18px → — + padding-right: 20px → — + padding-bottom: 18px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "SOURCE / RESULT" - x: 527.9 → 0 (-527.9px) - y: 370.8 → 601.9 (+231.1px) - w: 100.5 → 130.3 (+29.8px) - h: 12 → 20 (+8px) - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - letter-spacing: 1.2px → normal + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "comparison.png" - x: 527.9 → 134 (-393.9px) - y: 391.8 → 601.9 (+210.1px) - w: 107.8 → 121.1 (+13.3px) - h: 17 → 20 (+3px) - display: block → inline - margin-top: 5px → 0px - width: 107.766px → auto - height: 17px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 14px → 16px - font-weight: 600 → 700 - line-height: normal → 24px + display: block → — + margin-top: 5px → — + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - x: 1168.2 → 0 (-1168.2px) - y: 343.8 → 623.9 (+280.1px) - w: 193.2 → 1440 (+1246.8px) - h: 84 → 25 (-59px) - display: flex → block - flex-wrap: wrap → nowrap - justify-content: flex-end → normal - align-items: center → normal - row-gap: 10px → normal - column-gap: 10px → normal - width: 193.203px → 1440px - height: 84px → 25px - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: flex → — + flex-wrap: wrap → — + justify-content: flex-end → — + align-items: center → — + row-gap: 10px → — + column-gap: 10px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [processed] "processed" - x: 1292.9 → 0 (-1292.9px) - y: 343.8 → 625.9 (+282.1px) - w: 68.5 → 92.1 (+23.6px) - h: 14 → 20 (+6px) - display: flex → inline - align-items: center → normal - row-gap: 5px → normal - column-gap: 5px → normal - width: 68.4844px → auto - height: 14px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(37, 169, 106) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + display: flex → — + align-items: center → — + row-gap: 5px → — + column-gap: 5px → — + color: rgb(37, 169, 106) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - x: 1292.9 → 0 (-1292.9px) - y: 343.8 → 627.9 (+284.1px) - display: block → inline - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(37, 169, 106) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px - vertical-align: middle → baseline + color: rgb(37, 169, 106) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [download-btn] "Download result" - x: 1168.2 → 95.9 (-1072.3px) - y: 385.8 → 623.9 (+238.1px) w: 193.2 → 131.8 (-61.4px) h: 42 → 25 (-17px) - display: flex → inline-block - justify-content: center → normal - align-items: center → normal - row-gap: 9px → normal - column-gap: 9px → normal - margin-top: 18px → 0px - padding-top: 0px → 1px - padding-right: 0px → 6px - padding-bottom: 0px → 1px - padding-left: 0px → 6px - width: 193.203px → 131.828px - height: 42px → 25px - min-width: auto → 0px - min-height: auto → 0px - border-top-width: 0px → 2px - border-top-style: none → outset - border-top-color: rgb(255, 255, 255) → rgb(0, 0, 0) - background-color: rgb(23, 105, 210) → rgb(240, 240, 240) - color: rgb(255, 255, 255) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 13.3333px - white-space: nowrap → normal + display: flex → — + justify-content: center → — + align-items: center → — + row-gap: 9px → — + column-gap: 9px → — + margin-top: 18px → — + width: 100% → — + height: 42px → — + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + color: rgb(255, 255, 255) → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-download lucide-icon] - x: 1207.4 → 103.9 (-1103.5px) - y: 399.3 → 626.9 (+227.6px) - display: block → inline - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(0, 0, 0) - color: rgb(255, 255, 255) → rgb(0, 0, 0) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 11px → 13.3333px - white-space: nowrap → normal - vertical-align: middle → baseline + color: rgb(255, 255, 255) → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [comparison-grid] - x: 507.9 → 0 (-507.9px) - y: 446.8 → 648.9 (+202.1px) - w: 873.5 → 1440 (+566.5px) - h: 494 → 144 (-350px) - display: grid → block - row-gap: 18px → normal - column-gap: 18px → normal - grid-template-columns: 407.734px 407.75px → none - grid-template-rows: 454px → none - padding-top: 20px → 0px - padding-right: 20px → 0px - padding-bottom: 20px → 0px - padding-left: 20px → 0px - width: 873.484px → 1440px - height: 494px → 144px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: grid → — + row-gap: 18px → — + column-gap: 18px → — + grid-template-columns: repeat(2, minmax(0px, 1fr)) → — + padding-top: 20px → — + padding-right: 20px → — + padding-bottom: 20px → — + padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-card] - x: 527.9 → 0 (-527.9px) - y: 466.8 → 648.9 (+182.1px) - w: 407.7 → 1440 (+1032.3px) - h: 454 → 72 (-382px) - width: 407.734px → 1440px - height: 454px → 72px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [image-label] - x: 527.9 → 0 (-527.9px) - y: 466.8 → 648.9 (+182.1px) - w: 407.7 → 1440 (+1032.3px) - h: 12 → 24 (+12px) - display: flex → block - justify-content: space-between → normal - margin-bottom: 10px → 0px - width: 407.734px → 1440px - height: 12px → 24px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + display: flex → — + justify-content: space-between → — + margin-bottom: 10px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span "SOURCE" - x: 527.9 → 0 (-527.9px) - y: 466.8 → 650.9 (+184.1px) - w: 33 → 60.8 (+27.8px) - h: 12 → 20 (+8px) - display: block → inline - width: 33px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > b "original.png" - x: 869.7 → 60.8 (-808.9px) - y: 466.8 → 650.9 (+184.1px) - w: 66 → 90.2 (+24.2px) - h: 12 → 20 (+8px) - display: block → inline - width: 65.9844px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - font-weight: 400 → 700 - line-height: normal → 24px + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + font-weight: 400 → — + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [remover-canvas source-canvas] - x: 527.9 → 0 (-527.9px) - y: 488.8 → 672.9 (+184.1px) - w: 407.7 → 1440 (+1032.3px) - h: 432 → 48 (-384px) - display: grid → block - position: relative → static - top: 0px → auto - right: 0px → auto - bottom: 0px → auto - left: 0px → auto - align-items: center → normal - grid-template-columns: 405.734px → none - grid-template-rows: 430px → none - width: 407.734px → 1440px - height: 432px → 48px - min-height: 432px → 0px - overflow: hidden → visible - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - background-color: rgb(232, 238, 242) → rgba(0, 0, 0, 0) + display: grid → — + position: relative → — + align-items: center → — + min-height: clamp(360px, 30vw, 560px) → — + background-color: rgb(232, 238, 242) → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [subject subject-source] - x: 574.2 → 0 (-574.2px) - y: 550.9 → 672.9 (+122px) w: 315.1 → 1440 (+1124.9px) h: 307.7 → 24 (-283.7px) - display: grid → block - align-items: center → normal - grid-template-columns: 300.234px → none - grid-template-rows: 292.391px → none - width: 300.234px → 1440px - height: 292.391px → 24px - min-width: auto → 0px - min-height: auto → 0px - transform: matrix(0.99863, -0.052336, 0.052336, 0.99863, 0, 0) → none - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 14px → 16px - font-weight: 600 → 400 - line-height: normal → 24px + display: grid → — + align-items: center → — + width: 74% → — + height: 68% → — + transform: rotate(-3deg) → — + color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > span "OBJECT" - x: 708.3 → 0 (-708.3px) - y: 695.1 → 674.9 (-20.2px) - w: 47 → 58.2 (+11.2px) - display: block → inline - width: 46.1875px → auto - height: 17px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 14px → 16px - font-weight: 600 → 400 - line-height: normal → 24px + color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" x: 875.2 → 0 (-875.2px) y: 900.8 → 698.9 (-201.9px) - w: 49.5 → 84.4 (+34.9px) - h: 10 → 20 (+10px) - display: block → inline - position: absolute → static - top: 411px → auto - right: 10px → auto - bottom: 9px → auto - left: 346.25px → auto - width: 49.4844px → auto - height: 10px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 9px → 16px - line-height: normal → 24px + position: absolute → — + right: 10px → — + bottom: 9px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [image-card] - x: 953.7 → 0 (-953.7px) - y: 466.8 → 720.9 (+254.1px) - w: 407.8 → 1440 (+1032.2px) - h: 454 → 72 (-382px) - width: 407.75px → 1440px - height: 454px → 72px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-label] - x: 953.7 → 0 (-953.7px) - y: 466.8 → 720.9 (+254.1px) - w: 407.8 → 1440 (+1032.2px) - h: 12 → 24 (+12px) - display: flex → block - justify-content: space-between → normal - margin-bottom: 10px → 0px - width: 407.75px → 1440px - height: 12px → 24px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + display: flex → — + justify-content: space-between → — + margin-bottom: 10px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > span "RESULT" - x: 953.7 → 0 (-953.7px) - y: 466.8 → 722.9 (+256.1px) - w: 33 → 55.8 (+22.8px) - h: 12 → 20 (+8px) - display: block → inline - width: 33px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(23, 105, 210) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > b "removed-bg.png" - x: 1284.4 → 55.8 (-1228.6px) - y: 466.8 → 722.9 (+256.1px) - w: 77 → 123.9 (+46.9px) - h: 12 → 20 (+8px) - display: block → inline - width: 76.9844px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - font-weight: 400 → 700 - line-height: normal → 24px + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + font-weight: 400 → — + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [remover-canvas] - x: 953.7 → 0 (-953.7px) - y: 488.8 → 744.9 (+256.1px) - w: 407.8 → 1440 (+1032.2px) - h: 432 → 48 (-384px) - display: grid → block - position: relative → static - top: 0px → auto - right: 0px → auto - bottom: 0px → auto - left: 0px → auto - align-items: center → normal - grid-template-columns: 405.75px → none - grid-template-rows: 430px → none - width: 407.75px → 1440px - height: 432px → 48px - min-height: 432px → 0px - overflow: hidden → visible - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) + display: grid → — + position: relative → — + align-items: center → — + min-height: clamp(360px, 30vw, 560px) → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [subject] - x: 1007.4 → 0 (-1007.4px) - y: 558.6 → 744.9 (+186.3px) w: 300.3 → 1440 (+1139.7px) h: 292.4 → 24 (-268.4px) - display: grid → block - align-items: center → normal - grid-template-columns: 300.25px → none - grid-template-rows: 292.391px → none - width: 300.25px → 1440px - height: 292.391px → 24px - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 14px → 16px - font-weight: 600 → 400 - line-height: normal → 24px + display: grid → — + align-items: center → — + width: 74% → — + height: 68% → — + color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span "PNG" - x: 1146 → 0 (-1146px) - y: 696.3 → 746.9 (+50.6px) - w: 23.1 → 32.1 (+9px) - h: 17 → 20 (+3px) - display: block → inline - width: 23.0938px → auto - height: 17px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgba(255, 255, 255, 0.85) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 14px → 16px - font-weight: 600 → 400 - line-height: normal → 24px + color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" x: 1300.9 → 0 (-1300.9px) y: 900.8 → 770.9 (-129.9px) - w: 49.5 → 84.4 (+34.9px) - h: 10 → 20 (+10px) - display: block → inline - position: absolute → static - top: 411px → auto - right: 10px → auto - bottom: 9px → auto - left: 346.266px → auto - width: 49.4844px → auto - height: 10px → auto - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 9px → 16px - line-height: normal → 24px + position: absolute → — + right: 10px → — + bottom: 9px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [result-meta] - x: 507.9 → 0 (-507.9px) - y: 940.8 → 792.9 (-147.9px) - w: 873.5 → 1440 (+566.5px) - h: 45 → 24 (-21px) - display: flex → block - row-gap: 24px → normal - column-gap: 24px → normal - padding-top: 16px → 0px - padding-right: 20px → 0px - padding-bottom: 16px → 0px - padding-left: 20px → 0px - width: 873.484px → 1440px - height: 45px → 24px - border-top-width: 1px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + display: flex → — + row-gap: 24px → — + column-gap: 24px → — + padding-top: 16px → — + padding-right: 20px → — + padding-bottom: 16px → — + padding-left: 20px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) "FORMAT" - x: 527.9 → 0 (-527.9px) - y: 957.8 → 794.9 (-162.9px) - w: 77.5 → 124.8 (+47.3px) - h: 12 → 20 (+8px) - display: block → inline - width: 77.5px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) > b "PNG-24" - x: 572.4 → 65.4 (-507px) - y: 957.8 → 794.9 (-162.9px) - w: 33 → 59.4 (+26.4px) - h: 12 → 20 (+8px) - margin-left: 6px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - font-weight: 600 → 700 - line-height: normal → 24px + margin-left: 6px → — + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + font-weight: 600 → — + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) "ALPHA" - x: 629.4 → 128.6 (-500.8px) - y: 957.8 → 794.9 (-162.9px) - w: 77.5 → 125.6 (+48.1px) - h: 12 → 20 (+8px) - display: block → inline - width: 77.5px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) > b "ENABLED" - x: 668.4 → 181.9 (-486.5px) - y: 957.8 → 794.9 (-162.9px) - w: 38.5 → 72.3 (+33.8px) - h: 12 → 20 (+8px) - margin-left: 6px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - font-weight: 600 → 700 - line-height: normal → 24px + margin-left: 6px → — + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + font-weight: 600 → — + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) "SIMILARITY" - x: 730.9 → 258 (-472.9px) - y: 957.8 → 794.9 (-162.9px) - w: 88.5 → 131.3 (+42.8px) - h: 12 → 20 (+8px) - display: block → inline - width: 88.4844px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - color: rgb(109, 120, 131) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - line-height: normal → 24px + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) > b "72 %" - x: 797.4 → 350.7 (-446.7px) - y: 957.8 → 794.9 (-162.9px) - w: 22 → 38.6 (+16.6px) - h: 12 → 20 (+8px) - margin-left: 6px → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 33, 43) - font-family: "IBM Plex Mono", monospace → "IBM Plex Sans", sans-serif - font-size: 10px → 16px - font-weight: 600 → 700 - line-height: normal → 24px + margin-left: 6px → — + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + font-weight: 600 → — + line-height: — → 1.5 body > main > footer [preview-footer] - y: 1058.8 → 816.9 (-241.9px) - row-gap: normal → 16px - column-gap: normal → 16px - height: 45px → 46px - letter-spacing: normal → 0.8px + row-gap: — → 1rem + column-gap: — → 1rem + padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) + padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) + letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(1) "easy-png-tools" - y: 1075.8 → 833.9 (-241.9px) - w: 117 → 142.8 (+25.8px) - display: flex → block - align-items: center → normal - row-gap: 7px → normal - column-gap: 7px → normal - width: 116.984px → 142.812px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: normal → 0.8px + display: flex → — + align-items: center → — + row-gap: 7px → — + column-gap: 7px → — + letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - x: 141.6 → 159.6 (+18px) - y: 1075.8 → 833.9 (-241.9px) - w: 33 → 40.8 (+7.8px) - display: block → inline - width: 33px → auto - height: 12px → auto - min-width: auto → 0px - min-height: auto → 0px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(23, 105, 210) - font-weight: 400 → 700 - letter-spacing: normal → 0.8px + font-weight: 400 → — + letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(2) "© 2024" - x: 676.8 → 1341.6 (+664.8px) - y: 1075.8 → 833.9 (-241.9px) - w: 170.5 → 40.8 (-129.7px) - display: flex → block - align-items: center → normal - row-gap: 7px → normal - column-gap: 7px → normal - width: 170.453px → 40.8125px - height: 12px → 13px - border-top-style: solid → none - border-top-color: rgb(203, 211, 218) → rgb(109, 120, 131) - letter-spacing: normal → 0.8px + display: flex → — + align-items: center → — + row-gap: 7px → — + column-gap: 7px → — + letter-spacing: — → 0.08em body >main >footer >span:nth-of-type(3) "© 2024" ✗ present in reference, absent in project diff --git a/web/scripts/audit-cdp.mjs b/web/scripts/audit-cdp.mjs index e5da17f..efd4c03 100644 --- a/web/scripts/audit-cdp.mjs +++ b/web/scripts/audit-cdp.mjs @@ -1,9 +1,12 @@ // audit-cdp.mjs -// CDP/DOMSnapshot-based visual audit over multiple routes. +// Visual audit over multiple routes comparing SPECIFIED styles (what the CSS +// actually declares, after cascade + var() resolution + inheritance) instead +// of computed layout values — so sizes driven by differing page content don't +// produce false positives. Geometry (box) is only reported where a dimension +// is explicitly locked by CSS, not where it just follows the content flow. // Replicates the route→ref mapping from audit-css.mjs (the 4 targets that have // a corresponding ref HTML file), starts a dev server (unless --no-serve), -// captures each pair, diffs computed styles + geometry, and writes a report to -// web/audit/cdp-audit.txt. +// captures each pair, diffs, and writes a report to web/audit/cdp-audit.txt. // // Usage: // node scripts/audit-cdp.mjs # serve + audit all 4 targets @@ -113,7 +116,7 @@ async function capture(browser, target) { }); await page.waitForTimeout(400); - const tree = await page.evaluate((PROPS) => { + const tree = await page.evaluate((props) => { const NOISE_TAGS = new Set([ "script", "template", @@ -121,7 +124,260 @@ async function capture(browser, target) { "link", "noscript", ]); - const snap = (el) => { + // Properties that inherit by default — their specified value flows to children. + const INHERITED = new Set([ + "color", + "cursor", + "direction", + "font-family", + "font-size", + "font-style", + "font-variant", + "font-weight", + "letter-spacing", + "line-height", + "text-align", + "text-indent", + "text-shadow", + "text-transform", + "visibility", + "white-space", + "word-spacing", + ]); + + // ---- collect author rules (stylesheets) preserving cascade order ---- + const rules = []; + let ruleOrder = 0; + const collect = (list) => { + for (const r of list || []) { + if (r == null) continue; + if (r.type === 1) rules.push({ rule: r, order: ruleOrder++ }); + else if (r.type === 3 && r.styleSheet) { + try { + collect(r.styleSheet.cssRules); + } catch {} + } else if (r.type === 4) { + if (r.media?.matches) { + try { + collect(r.cssRules); + } catch {} + } + } else if (r.type === 12) { + try { + if (CSS.supports(r.conditionText)) collect(r.cssRules); + } catch { + try { + collect(r.cssRules); + } catch {} + } + } else if (r.type === 15) { + try { + collect(r.cssRules); + } catch {} + } + } + }; + for (const sheet of document.styleSheets) { + try { + collect(sheet.cssRules); + } catch {} + } + + // Strip state pseudo-classes that depend on the current pointer/focus state. + const STATE = /:(hover|active|focus|focus-visible|focus-within|visited)\b/g; + + // Selector specificity parser (approximation of the CSS algorithm): + // ids, classes, attributes, elements, plus :is/:not/:has (max of args) + // and :where (zero). + const splitTop = (s, sep) => { + const parts = []; + let depth = 0, + cur = ""; + const isSep = (ch) => + sep === "," ? ch === "," : ch === ">" || ch === "+" || ch === "~" || /\s/.test(ch); + for (const ch of s) { + if (ch === "(" || ch === "[") depth++; + else if (ch === ")" || ch === "]") depth--; + if (depth === 0 && isSep(ch)) { + if (cur.trim()) parts.push(cur.trim()); + cur = ""; + } else cur += ch; + } + if (cur.trim()) parts.push(cur.trim()); + return parts; + }; + const specCompound = (full) => { + let [A, B, C] = [0, 0, 0]; + for (const comp of splitTop(full, " ")) { + const n = comp.length; + let i = 0; + const ident = (ch) => /[\w\u00A0-\uFFFF-]/.test(ch); + const readName = () => { + let o = ""; + while (i < n && ident(comp[i])) o += comp[i++]; + return o; + }; + const endParen = () => { + let d = 1; + i++; + while (i < n) { + if (comp[i] === "(" || comp[i] === "[") d++; + else if (comp[i] === ")") { + d--; + if (!d) return i; + } + i++; + } + return n; + }; + while (i < n) { + const ch = comp[i]; + if (ch === "#") { + A++; + i++; + readName(); + } else if (ch === ".") { + B++; + i++; + readName(); + } else if (ch === "*") i++; + else if (ch === "[") { + B++; + while (i < n && comp[i] !== "]") i++; + i++; + } else if (ch === ":") { + if (comp[i + 1] === ":") { + C++; + i += 2; + readName(); + } else { + i++; + const name = readName(); + if (comp[i] === "(") { + const inner = comp.slice(i + 1, endParen()); + if (name !== "where") { + for (const arg of splitTop(inner, ",")) { + const [a, b, c] = specCompound(arg); + A += a; + B += b; + C += c; + } + } + } else B++; + } + } else if (/[a-zA-Z]/.test(ch)) { + C++; + readName(); + } else i++; + } + } + return [A, B, C]; + }; + + // All declarations that apply to `el`, in cascade terms. + const matched = (el) => { + const out = []; + for (const { rule, order } of rules) { + const sel = rule.selectorText; + if (!sel) continue; + let ok = false; + try { + ok = el.matches(sel.replace(STATE, "")); + } catch { + try { + ok = el.matches(sel); + } catch {} + } + if (!ok) continue; + const [a, b, c] = specCompound(sel); + const st = rule.style; + for (let k = 0; k < st.length; k++) { + const name = st.item(k); + out.push({ + name, + value: st.getPropertyValue(name).trim(), + important: st.getPropertyPriority(name) === "important", + a, + b, + c, + order, + }); + } + } + const inline = el.getAttribute("style"); + if (inline) { + const st = el.style; + for (let k = 0; k < st.length; k++) { + const name = st.item(k); + out.push({ + name, + value: st.getPropertyValue(name).trim(), + important: st.getPropertyPriority(name) === "important", + a: 1e6, + b: 0, + c: 0, + order: 1e6, + }); + } + } + return out; + }; + const keyOf = (d) => [d.important ? 1 : 0, d.a, d.b, d.c, d.order]; + const betterThan = (x, y) => { + const kx = keyOf(x), + ky = keyOf(y); + for (let i = 0; i < kx.length; i++) + if (kx[i] !== ky[i]) return kx[i] > ky[i] ? 1 : -1; + return 0; + }; + // Pick the winning declaration per property (inline > !important > cascade). + const resolve = (decls) => { + const map = new Map(); + for (const d of decls) { + const cur = map.get(d.name); + if (!cur || betterThan(d, cur) > 0) map.set(d.name, d); + } + return map; + }; + // Inherited entries must always lose against a real declaration. + // Custom properties inherit too, so they propagate like inherited props. + const inheritedEntries = (m) => { + const out = []; + for (const [k, v] of m) + if ( + (INHERITED.has(k) || k.startsWith("--")) && + typeof v === "object" && + v !== null + ) + out.push([ + k, + { + name: k, + value: v.value ?? "", + important: false, + a: -1, + b: -1, + c: -1, + order: -1, + }, + ]); + return out; + }; + // Substitute var(--name[, fallback]) with the resolved custom property value + // from getComputedStyle (custom props inherit, so per-element lookup works). + const resolveVars = (value, cs, depth = 0) => { + if (depth > 8 || !value.includes("var(")) return value; + return value.replace( + /var\((--[\w-]+)(?:,([^)]*))?\)/g, + (_, name, fb) => { + const v = cs.getPropertyValue(name).trim(); + if (v) return resolveVars(v, cs, depth + 1); + return fb ? resolveVars(fb, cs, depth + 1).trim() : ""; + }, + ); + }; + + const snap = (el, inherited) => { const tag = el.tagName.toLowerCase(); if ( NOISE_TAGS.has(tag) || @@ -129,7 +385,24 @@ async function capture(browser, target) { el.id === "svelte-announcer" ) return null; + const specMap = new Map(inheritedEntries(inherited)); + for (const [name, d] of resolve(matched(el))) { + const cur = specMap.get(name); + if (!cur || betterThan(d, cur) > 0) specMap.set(name, d); + } const cs = getComputedStyle(el); + const styles = {}; + const raw = {}; + const computed = {}; + for (const p of props) { + const c = cs.getPropertyValue(p); + computed[p] = c; + const rv = specMap.get(p)?.value ?? ""; + raw[p] = rv; + let v = rv; + if (v.includes("var(")) v = resolveVars(v, cs); + styles[p] = v; + } const r = el.getBoundingClientRect(); return { tag, @@ -147,16 +420,21 @@ async function capture(browser, target) { w: +r.width.toFixed(1), h: +r.height.toFixed(1), }, - styles: Object.fromEntries( - PROPS.map((p) => [p, cs.getPropertyValue(p)]), - ), + styles, + raw, + computed, children: tag === "svg" ? [] - : [...el.children].map(snap).filter(Boolean), + : [...el.children].map((ch) => snap(ch, specMap)).filter(Boolean), }; }; - return snap(document.body); + const htmlNode = snap(document.documentElement, new Map()); + const findBody = (n) => + n?.tag === "body" ? n : (n?.children ?? []).map(findBody).find(Boolean); + const body = findBody(htmlNode); + if (!body) throw new Error("capture: body not found"); + return body; }, PROPS); await page.close(); @@ -343,6 +621,43 @@ function diffStyles(a, b) { `⚠ node without styles (a.tag=${a?.tag}, b.tag=${b?.tag}) — matching bug, inspect manually`, ]; + // Layout-sensitive props must never fall back to computed: keeping them + // specified (e.g. "auto") is what makes this audit content-size independent. + const LAYOUT = new Set([ + "width", + "height", + "min-width", + "min-height", + "max-width", + "max-height", + "top", + "right", + "bottom", + "left", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "row-gap", + "column-gap", + ]); + const DEFAULTISH = (v) => + v === "" || + v === "inherit" || + v === "initial" || + v === "unset" || + v === "revert"; + // Geometry drift along an axis only matters when that dimension is actually + // locked by CSS; otherwise it is just content flow (text lengths, images). + const flowDriven = (node, k) => { + if (!node?.styles) return true; + if (k === "w") return DEFAULTISH(node.styles.width); + if (k === "h") return DEFAULTISH(node.styles.height); + if (k === "x") return DEFAULTISH(node.styles.left) && DEFAULTISH(node.styles.right); + if (k === "y") return DEFAULTISH(node.styles.top) && DEFAULTISH(node.styles.bottom); + return true; + }; + if (!!a.box !== !!b.box) out.push( `render: node is rendered only on one side ` + @@ -351,18 +666,38 @@ function diffStyles(a, b) { if (a.box && b.box) for (const k of ["x", "y", "w", "h"]) { const d = +(b.box[k] - a.box[k]).toFixed(1); - if (Math.abs(d) > PX_TOL) + if (Math.abs(d) > PX_TOL && !(flowDriven(a, k) && flowDriven(b, k))) out.push( `${k}: ${a.box[k]} → ${b.box[k]} (${d > 0 ? "+" : ""}${d}px)`, ); } + // If a side is declared via CSS variables, append the raw declaration so + // the defining rule is easy to find (e.g. "color: var(--accent)"). + const fmtSide = (n, k) => { + const res = n?.styles?.[k] ?? ""; + const r = n?.raw?.[k] ?? ""; + if (r && r.includes("var(") && r !== res) + return `${res || "—"} [${r}]`; + return res; + }; for (const k of new Set([ ...Object.keys(a.styles), ...Object.keys(b.styles), ])) { const va = a.styles[k] ?? "", vb = b.styles[k] ?? ""; - if (va !== vb) out.push(`${k}: ${va || "—"} → ${vb || "—"}`); + if (va !== vb) { + // One side relied on a default (UA/inherit) while the other spelled it + // out, but they render identically — not a real difference. Skip for + // content-independent props by comparing the computed values. + if ( + !LAYOUT.has(k) && + (DEFAULTISH(va) || DEFAULTISH(vb)) && + a.computed?.[k] === b.computed?.[k] + ) + continue; + out.push(`${k}: ${fmtSide(a, k) || "—"} → ${fmtSide(b, k) || "—"}`); + } } return out; }