diff --git a/web/audit/cdp-audit-1440x900.txt b/web/audit/cdp-audit-1440x900.txt index 921ba5b..d1bc0d0 100644 --- a/web/audit/cdp-audit-1440x900.txt +++ b/web/audit/cdp-audit-1440x900.txt @@ -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] diff --git a/web/audit/cdp-audit-1920x1080.txt b/web/audit/cdp-audit-1920x1080.txt index b74b8c7..7968946 100644 --- a/web/audit/cdp-audit-1920x1080.txt +++ b/web/audit/cdp-audit-1920x1080.txt @@ -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] diff --git a/web/audit/cdp-audit-2560x1440.txt b/web/audit/cdp-audit-2560x1440.txt index 42a04ef..080bded 100644 --- a/web/audit/cdp-audit-2560x1440.txt +++ b/web/audit/cdp-audit-2560x1440.txt @@ -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] diff --git a/web/audit/cdp-audit-390x844.txt b/web/audit/cdp-audit-390x844.txt index bad1c94..4708eea 100644 --- a/web/audit/cdp-audit-390x844.txt +++ b/web/audit/cdp-audit-390x844.txt @@ -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] diff --git a/web/audit/cdp-audit-768x1024.txt b/web/audit/cdp-audit-768x1024.txt index adbc6ca..751e9a3 100644 --- a/web/audit/cdp-audit-768x1024.txt +++ b/web/audit/cdp-audit-768x1024.txt @@ -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] diff --git a/web/audit/cdp-audit.txt b/web/audit/cdp-audit.txt index aa505cd..bf6f2c7 100644 --- a/web/audit/cdp-audit.txt +++ b/web/audit/cdp-audit.txt @@ -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] diff --git a/web/scripts/audit-cdp.mjs b/web/scripts/audit-cdp.mjs index 945063d..51ac56d 100644 --- a/web/scripts/audit-cdp.mjs +++ b/web/scripts/audit-cdp.mjs @@ -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);