Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-09-14 13:36:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: cdp audit - fix hover\focus\active pseudo classes

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-08-30 21:45:47 +05:00
parent 11b4c87486
commit b0f0b79ee0
7 changed files with 197 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/audit/cdp-audit-1440x900.txt
+41 -107
View File
@@ -1,36 +1,26 @@
CDP visual audit
2026-08-30T16:20:46.243Z
2026-08-30T16:45:07.997Z
viewport 1440x900, tolerance 1px, theme light
=== [1440x900] /preview/demo (vs demo.html) — 169 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -56,19 +46,15 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [ws]
@@ -455,21 +441,15 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -529,12 +509,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -737,12 +715,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -811,12 +787,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -950,12 +924,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1104,32 +1076,22 @@ body >div
=== [1440x900] /preview/list-tools (vs list-tools.html) — 123 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1155,19 +1117,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [catalog-page]
@@ -1268,7 +1227,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY"
@@ -1276,7 +1235,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARE
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
@@ -1284,7 +1243,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
@@ -1292,7 +1251,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
@@ -1300,7 +1259,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
@@ -1308,7 +1267,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group]
@@ -1344,7 +1303,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1354,7 +1313,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1364,7 +1323,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1374,7 +1333,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1384,7 +1343,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group]
@@ -1420,7 +1379,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1430,7 +1389,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1440,7 +1399,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1450,7 +1409,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1460,7 +1419,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group]
@@ -1496,7 +1455,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1506,7 +1465,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1516,7 +1475,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1526,7 +1485,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1536,7 +1495,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group]
@@ -1572,7 +1531,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1582,7 +1541,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1592,7 +1551,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1602,7 +1561,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1612,7 +1571,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group]
@@ -1648,7 +1607,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1658,7 +1617,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1668,7 +1627,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1678,7 +1637,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group]
@@ -1714,7 +1673,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1724,7 +1683,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1734,7 +1693,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1744,7 +1703,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE"
@@ -1774,32 +1733,22 @@ body >div
=== [1440x900] /preview/tools/linear-gradient-png (vs gradient.html) — 89 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1825,19 +1774,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
@@ -2270,12 +2216,13 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → —
padding-top: 8px → —
padding-bottom: 8px → —
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
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(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon]
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-family: — → inherit
font-size: — → 16px
@@ -2427,32 +2374,22 @@ body >div
=== [1440x900] /preview/tools/remove-background-png (vs background-remover.html) — 97 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -2478,19 +2415,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
web/audit/cdp-audit-1920x1080.txt
+41 -107
View File
@@ -1,36 +1,26 @@
CDP visual audit
2026-08-30T16:20:46.240Z
2026-08-30T16:45:07.995Z
viewport 1920x1080, tolerance 1px, theme light
=== [1920x1080] /preview/demo (vs demo.html) — 169 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -56,19 +46,15 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [ws]
@@ -455,21 +441,15 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -529,12 +509,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -737,12 +715,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -811,12 +787,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -950,12 +924,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1104,32 +1076,22 @@ body >div
=== [1920x1080] /preview/list-tools (vs list-tools.html) — 123 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1155,19 +1117,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [catalog-page]
@@ -1268,7 +1227,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY"
@@ -1276,7 +1235,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARE
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
@@ -1284,7 +1243,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
@@ -1292,7 +1251,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
@@ -1300,7 +1259,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
@@ -1308,7 +1267,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group]
@@ -1344,7 +1303,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1354,7 +1313,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1364,7 +1323,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1374,7 +1333,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1384,7 +1343,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group]
@@ -1420,7 +1379,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1430,7 +1389,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1440,7 +1399,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1450,7 +1409,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1460,7 +1419,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group]
@@ -1496,7 +1455,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1506,7 +1465,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1516,7 +1475,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1526,7 +1485,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1536,7 +1495,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group]
@@ -1572,7 +1531,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1582,7 +1541,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1592,7 +1551,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1602,7 +1561,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1612,7 +1571,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group]
@@ -1648,7 +1607,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1658,7 +1617,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1668,7 +1627,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1678,7 +1637,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group]
@@ -1714,7 +1673,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1724,7 +1683,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1734,7 +1693,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1744,7 +1703,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE"
@@ -1774,32 +1733,22 @@ body >div
=== [1920x1080] /preview/tools/linear-gradient-png (vs gradient.html) — 89 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1825,19 +1774,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
@@ -2270,12 +2216,13 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → —
padding-top: 8px → —
padding-bottom: 8px → —
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
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(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon]
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-family: — → inherit
font-size: — → 16px
@@ -2427,32 +2374,22 @@ body >div
=== [1920x1080] /preview/tools/remove-background-png (vs background-remover.html) — 97 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -2478,19 +2415,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
web/audit/cdp-audit-2560x1440.txt
+41 -107
View File
@@ -1,36 +1,26 @@
CDP visual audit
2026-08-30T16:20:46.232Z
2026-08-30T16:45:07.988Z
viewport 2560x1440, tolerance 1px, theme light
=== [2560x1440] /preview/demo (vs demo.html) — 169 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -56,19 +46,15 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [ws]
@@ -455,21 +441,15 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -529,12 +509,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -737,12 +715,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -811,12 +787,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -950,12 +924,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1104,32 +1076,22 @@ body >div
=== [2560x1440] /preview/list-tools (vs list-tools.html) — 123 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1155,19 +1117,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [catalog-page]
@@ -1268,7 +1227,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY"
@@ -1276,7 +1235,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARE
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
@@ -1284,7 +1243,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
@@ -1292,7 +1251,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
@@ -1300,7 +1259,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
@@ -1308,7 +1267,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group]
@@ -1344,7 +1303,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1354,7 +1313,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1364,7 +1323,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1374,7 +1333,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1384,7 +1343,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group]
@@ -1420,7 +1379,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1430,7 +1389,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1440,7 +1399,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1450,7 +1409,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1460,7 +1419,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group]
@@ -1496,7 +1455,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1506,7 +1465,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1516,7 +1475,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1526,7 +1485,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1536,7 +1495,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group]
@@ -1572,7 +1531,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1582,7 +1541,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1592,7 +1551,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1602,7 +1561,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1612,7 +1571,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group]
@@ -1648,7 +1607,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1658,7 +1617,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1668,7 +1627,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1678,7 +1637,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group]
@@ -1714,7 +1673,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1724,7 +1683,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1734,7 +1693,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1744,7 +1703,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE"
@@ -1774,32 +1733,22 @@ body >div
=== [2560x1440] /preview/tools/linear-gradient-png (vs gradient.html) — 89 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1825,19 +1774,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
@@ -2270,12 +2216,13 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → —
padding-top: 8px → —
padding-bottom: 8px → —
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
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(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon]
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-family: — → inherit
font-size: — → 16px
@@ -2427,32 +2374,22 @@ body >div
=== [2560x1440] /preview/tools/remove-background-png (vs background-remover.html) — 97 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -2478,19 +2415,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
web/audit/cdp-audit-390x844.txt
+13 -79
View File
@@ -1,5 +1,5 @@
CDP visual audit
2026-08-30T16:20:46.248Z
2026-08-30T16:45:08.002Z
viewport 390x844, tolerance 1px, theme light
=== [390x844] /preview/demo (vs demo.html) — 172 differences ===
@@ -16,32 +16,22 @@ body > main > header > div > span > i [status-dot]
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -67,19 +57,15 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [ws]
@@ -467,21 +453,15 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -541,12 +521,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -749,12 +727,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -823,12 +799,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -962,12 +936,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1127,32 +1099,22 @@ body > main > header > div > span > i [status-dot]
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1178,19 +1140,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [catalog-page]
@@ -1291,7 +1250,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY"
@@ -1299,7 +1258,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARE
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
@@ -1307,7 +1266,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
@@ -1315,7 +1274,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
@@ -1323,7 +1282,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
@@ -1331,7 +1290,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group]
@@ -1892,32 +1851,22 @@ body > main > header > div > span > i [status-dot]
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1943,19 +1892,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
@@ -2387,12 +2333,13 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → —
padding-top: 8px → —
padding-bottom: 8px → —
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
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(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon]
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-family: — → inherit
font-size: — → 16px
@@ -2555,32 +2502,22 @@ body > main > header > div > span > i [status-dot]
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -2606,19 +2543,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
web/audit/cdp-audit-768x1024.txt
+13 -79
View File
@@ -1,5 +1,5 @@
CDP visual audit
2026-08-30T16:20:46.245Z
2026-08-30T16:45:08.000Z
viewport 768x1024, tolerance 1px, theme light
=== [768x1024] /preview/demo (vs demo.html) — 172 differences ===
@@ -16,32 +16,22 @@ body > main > header > div > span > i [status-dot]
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -67,19 +57,15 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [ws]
@@ -467,21 +453,15 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -541,12 +521,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -749,12 +727,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -823,12 +799,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -962,12 +936,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1127,32 +1099,22 @@ body > main > header > div > span > i [status-dot]
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1178,19 +1140,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [catalog-page]
@@ -1291,7 +1250,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY"
@@ -1299,7 +1258,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARE
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
@@ -1307,7 +1266,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
@@ -1315,7 +1274,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
@@ -1323,7 +1282,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
@@ -1331,7 +1290,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group]
@@ -1892,32 +1851,22 @@ body > main > header > div > span > i [status-dot]
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1943,19 +1892,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
@@ -2387,12 +2333,13 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → —
padding-top: 8px → —
padding-bottom: 8px → —
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
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(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon]
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-family: — → inherit
font-size: — → 16px
@@ -2555,32 +2502,22 @@ body > main > header > div > span > i [status-dot]
h: 0 → 6 (+6px)
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -2606,19 +2543,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
web/audit/cdp-audit.txt
+41 -107
View File
@@ -1,36 +1,26 @@
CDP visual audit
2026-08-30T16:17:42.059Z
2026-08-30T16:42:55.059Z
viewport 1440x900, tolerance 1px, theme light
=== [1440x900] /preview/demo (vs demo.html) — 169 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -56,19 +46,15 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [ws]
@@ -455,21 +441,15 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -529,12 +509,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -737,12 +715,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -811,12 +787,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -950,12 +924,10 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of
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]
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]
color: #6d7883 [var(--muted)] → #e5484d [var(--danger)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1104,32 +1076,22 @@ body >div
=== [1440x900] /preview/list-tools (vs list-tools.html) — 123 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1155,19 +1117,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [catalog-page]
@@ -1268,7 +1227,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY"
@@ -1276,7 +1235,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARE
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
@@ -1284,7 +1243,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
@@ -1292,7 +1251,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
@@ -1300,7 +1259,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
@@ -1308,7 +1267,7 @@ body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
padding-right: 10px → 0.6rem
padding-bottom: 8px → 0.4rem
padding-left: 10px → 0.6rem
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
border-top-color: rgba(0, 0, 0, 0) → —
letter-spacing: — → 0.06em
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group]
@@ -1344,7 +1303,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1354,7 +1313,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1364,7 +1323,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1374,7 +1333,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1384,7 +1343,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group]
@@ -1420,7 +1379,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1430,7 +1389,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1440,7 +1399,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1450,7 +1409,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1460,7 +1419,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group]
@@ -1496,7 +1455,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1506,7 +1465,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1516,7 +1475,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1526,7 +1485,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1536,7 +1495,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group]
@@ -1572,7 +1531,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1582,7 +1541,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1592,7 +1551,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1602,7 +1561,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1612,7 +1571,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group]
@@ -1648,7 +1607,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1658,7 +1617,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1668,7 +1627,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1678,7 +1637,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group]
@@ -1714,7 +1673,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1724,7 +1683,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1734,7 +1693,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
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]
@@ -1744,7 +1703,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-typ
column-gap: 8px → 2px
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]
opacity: 1 → —
opacity: 0 → —
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE"
@@ -1774,32 +1733,22 @@ body >div
=== [1440x900] /preview/tools/linear-gradient-png (vs gradient.html) — 89 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -1825,19 +1774,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
@@ -2270,12 +2216,13 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ
column-gap: 8px → —
padding-top: 8px → —
padding-bottom: 8px → —
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
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(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon]
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-family: — → inherit
font-size: — → 16px
@@ -2427,32 +2374,22 @@ body >div
=== [1440x900] /preview/tools/remove-background-png (vs background-remover.html) — 97 differences ===
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
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]
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]
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]
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
font-size: inherit → 16px
line-height: inherit → 1.5
@@ -2478,19 +2415,16 @@ body > main > header > nav [nav]
margin-left: auto → 24px
body > main > header > nav > a:nth-of-type(1) "Workspace"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(2) "Catalog"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(3) "Gradient"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
letter-spacing: — → 0.04em
body > main > header > nav > a:nth-of-type(4) "Background remover"
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
letter-spacing: — → 0.04em
body > main > div [tool-page]
web/scripts/audit-cdp.mjs
+7 -3
View File
@@ -145,6 +145,11 @@ async function capture(browser, target, viewport) {
await page.evaluate(() => {
document.documentElement.dataset.theme = "light";
});
// Get deterministic base state: no element under the cursor and no focused
// element, so pointer/keyboard state pseudo-classes (:hover/:focus/:active)
// never match. Hover rules are simply not part of a static snapshot.
await page.mouse.move(-10, -10);
await page.evaluate(() => document.activeElement?.blur?.());
await page.waitForTimeout(400);
const tree = await page.evaluate((props) => {
@@ -214,8 +219,7 @@ async function capture(browser, target, viewport) {
} 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)
@@ -321,7 +325,7 @@ if (comp[i] === "(") {
// Specificity is per complex selector: a comma list like
// ".a, .b .c" does NOT sum. Match each complex selector on its
// own and use its specificity; ties are broken by source order.
for (const cs of splitTop(sel.replace(STATE, ""), ",")) {
for (const cs of splitTop(sel, ",")) {
let ok = false;
try {
ok = el.matches(cs);