From 86b1c813e72bc07f7f07e534b54faa4f6d69e142 Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Sun, 30 Aug 2026 21:59:27 +0500 Subject: [PATCH] fix: update top bar styles --- .gitignore | 1 + package.json | 2 +- web/audit/cdp-audit-1440x900.txt | 3072 ----------------- web/audit/cdp-audit-1920x1080.txt | 3072 ----------------- web/audit/cdp-audit-2560x1440.txt | 3072 ----------------- web/audit/cdp-audit-390x844.txt | 3199 ------------------ web/audit/cdp-audit-768x1024.txt | 3199 ------------------ web/audit/cdp-audit.txt | 3072 ----------------- web/package.json | 1 + web/src/lib/components/kit/IconButton.svelte | 9 +- web/src/lib/components/kit/StatusDot.svelte | 5 +- web/src/lib/components/kit/TopBar.svelte | 55 +- 12 files changed, 33 insertions(+), 18726 deletions(-) delete mode 100644 web/audit/cdp-audit-1440x900.txt delete mode 100644 web/audit/cdp-audit-1920x1080.txt delete mode 100644 web/audit/cdp-audit-2560x1440.txt delete mode 100644 web/audit/cdp-audit-390x844.txt delete mode 100644 web/audit/cdp-audit-768x1024.txt delete mode 100644 web/audit/cdp-audit.txt diff --git a/.gitignore b/.gitignore index 85c2d1e..2e0dbad 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ refs/public/apple-icon.png refs/public/placeholder-logo.svg refs/public/placeholder-logo.png refs/public/placeholder.svg +web/audit/cdp-audit*.txt diff --git a/package.json b/package.json index 9c2bbed..793fadc 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "build": "pnpm --dir web build", "format": "pnpm --dir web format", "html": "pnpm --dir refs build && node scripts/extract-static.mjs refs/.next/server/app refs-html", - "cdp-audit": "pnpm --dir web refs-cdp-audit:responsive" + "cdp-audit": "pnpm --dir web refs-cdp-audit:large" }, "keywords": [], "author": "Ku6epXBOCTuK", diff --git a/web/audit/cdp-audit-1440x900.txt b/web/audit/cdp-audit-1440x900.txt deleted file mode 100644 index d1bc0d0..0000000 --- a/web/audit/cdp-audit-1440x900.txt +++ /dev/null @@ -1,3072 +0,0 @@ -CDP visual audit -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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [ws] - width: 100% → — - -body > main > div > section:nth-of-type(2) [preview-panel] - align-self: start → — - margin-top: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) [preview-stack] - grid-template-columns: 1fr 1fr → 1fr - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 193.9 → 439.9 (+246px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span "SOURCE" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > b "original.png · 1200 × 800" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 193.9 → 439.9 (+246px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "STEP 01" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > b "gradient applied" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 193.9 → 439.9 (+246px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > span "STEP 02" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > b "background removed" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 193.9 → 439.9 (+246px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > span "STEP 03" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > b "outline added" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div [active ph] - min-width: 0px → — - max-width: 100% → — - w: 193.9 → 439.9 (+246px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > span "FINAL OUTPUT" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > b "ready · PNG-24" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) [section-label] - row-gap: — → 16px - column-gap: — → 16px - padding-bottom: 15px → 12px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [mono-label] "PIPELINE OUTPUTS" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download result" - display: flex → inline-flex - justify-content: center → — - row-gap: 9px → 8px - column-gap: 9px → 8px - margin-top: 18px → — - padding-top: — → 9px - padding-right: — → 14px - padding-bottom: — → 9px - padding-left: — → 14px - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-arrow-down-to-line lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [history-toggle] "Hide intermediate" - margin-top: 0px → 18px - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 8px → 11px - padding-right: 10px → 14px - padding-bottom: 8px → 11px - padding-left: 10px → 14px - width: auto → 100% - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-chevron-down lucide-icon] - transform: rotate(180deg) → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [meta-list] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 0.15rem - column-gap: 8px → 0.15rem - grid-template-columns: repeat(3, 1fr) → — - padding-top: 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > span [meta-caption] "DIMENSIONS" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > b [meta-value] "1200 × 800 px" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > span [meta-caption] "FORMAT" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > b [meta-value] "PNG-24" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > span [meta-caption] "SIZE" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > b [meta-value] "1.2 MB" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) [icon-btn icon-btn--ghost] - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/" - color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." - max-width: 700px → — - line-height: 1 → 0.9 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1) [step-index] "01" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "BACKGROUND" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [controls] - row-gap: 16px → 0px - column-gap: 16px → 24px - grid-template-columns: 1.1fr 1fr 1.2fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span [swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > svg [lucide lucide-chevron-down lucide-icon] - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "DIRECTION" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label > output "135 °" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 155 → 190 (+35px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label > output "100%" - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div [segmented] - display: flex → inline-flex - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(2) [segment selected] "100" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(3) [segment] "75" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(4) [segment] "50" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(1) [segment] "25" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - background-color: — → transparent - color: rgb(255, 255, 255) → #6d7883 [var(--muted)] - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(1) [step-index] "02" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TRANSFORM" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(1) [step-index] "03" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "WIDTH" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "2 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 273.1 → 301.1 (+28px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span [dark swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(1) [step-index] "04" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "RADIUS" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "18 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 273.1 → 301.1 (+28px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [toggle-row] - display: — → flex - justify-content: — → space-between - align-items: — → center - row-gap: — → 1rem - column-gap: — → 1rem - padding-top: — → 10px - min-width: — → 0px - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "Preserve aspect ratio" - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button [on toggle] - width: 32px → 2.4rem - height: 18px → 1.3rem - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i [toggle-knob] - position: — → absolute - top: — → 1px - left: — → 1px - width: — → calc(-4px + 1.3rem) - height: — → calc(-4px + 1.3rem) - transform: — → translateX(1.1rem) - background-color: — → rgb(255, 255, 255) - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset-btn] "Reset pipeline" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw] - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] - row-gap: — → 16px - column-gap: — → 16px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span [mono-label] "PROCESSING PIPELINE" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button [add-btn] "Add tool" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg [lucide lucide-icon lucide-plus] - line-height: inherit → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(2) >svg [lucide lucide-link-2 lucide-link2] - ✗ present in reference, absent in project - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [1440x900] /preview/list-tools (vs list-tools.html) — 123 differences === - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [catalog-page] - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - width: 100% → — - max-width: none → — - -body > main > div > div:nth-of-type(1) [catalog-head] - flex-wrap: — → wrap - row-gap: 40px → 1.5rem - column-gap: 40px → 1.5rem - padding-bottom: 42px → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG" - margin-bottom: 18px → 0.5rem - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: 0.12em → 0.18em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" - margin-top: 12px → 0px - margin-bottom: 14px → 0px - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 2rem - font-weight: 650 → 700 - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p "Focused utilities for working with PNG. " - margin-top: 0px → 0.5rem - max-width: 660px → 56ch - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 0.95rem - line-height: — → 1.5 - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) [catalog-total] - flex-direction: — → column - align-items: center → flex-end - row-gap: 14px → — - column-gap: 14px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1 - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b "32" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - letter-spacing: -0.08em → — - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span "TOOLS AVAILABLE" - margin-top: — → 0.35rem - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(2) [catalog-toolbar] - flex-wrap: — → wrap - row-gap: 24px → 1rem - column-gap: 24px → 1rem - padding-top: 24px → 1.25rem - padding-bottom: 42px → 1.25rem - -body > main > div > div:nth-of-type(2) > label [catalog-search] - display: flex → inline-flex - row-gap: 12px → 0.5rem - column-gap: 12px → 0.5rem - padding-top: 12px → 0.5rem - padding-right: 14px → 0.75rem - padding-bottom: 12px → 0.5rem - padding-left: 14px → 0.75rem - width: min(420px, 100%) → — - -body > main > div > div:nth-of-type(2) > label > input - width: 100% → — - border-top-width: 0px → medium - -body > main > div > div:nth-of-type(2) > div [catalog-filters] - display: flex → inline-flex - row-gap: 6px → 0.4rem - column-gap: 6px → 0.4rem - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1) [active] "ALL" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - background-color: initial → — - color: #1769d2 [var(--blue)] → rgb(255, 255, 255) - letter-spacing: — → 0.06em - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span "CONVERT" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > span "TRANSPARENCY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > span "COLOR" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > span "GEOMETRY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > span "FILTERS" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > span "ANALYZE" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE" - display: — → flex - flex-wrap: — → wrap - row-gap: — → 1.5rem - column-gap: — → 1.5rem - margin-top: 64px → 56px - padding-top: 20px → 24px - letter-spacing: — → 0.08em - -body > main > div > footer > span "•" - margin-top: 0px → — - margin-right: 8px → — - margin-bottom: 0px → — - margin-left: 8px → — - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.08em - -body >main >footer [preview-footer] - + present in project, absent in reference - -body >div - ✗ present in reference, absent in project - - -=== [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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - display: flex → — - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Gradient background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Create a clean, export-ready gradient wi" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [gradient-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.7fr) minmax(0px, 1.3fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "GRADIENT SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure output" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 01" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "GRADIENT TYPE" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div [segmented wide] - display: flex → — - width: 100% → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1) [selected] "Linear" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2) "Radial" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR STOPS" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) [color-row] - display: flex → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span [stop-arrow] "→" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) [gradient-bar] - margin-top: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label "DIRECTION" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output "135 °" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div [direction-grid] - display: grid → — - row-gap: 6px → — - column-gap: 6px → — - grid-template-columns: repeat(4, 1fr) → — - margin-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1) "0° →" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2) "45° ↗" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3) "90° ↑" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4) [selected] "135° ↖" - padding-top: 8px → — - padding-bottom: 8px → — - color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5) "180° ←" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6) "225° ↙" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7) "270° ↓" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8) "315° ↘" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output "100 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "OUTPUT PREVIEW" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "gradient.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [secondary-btn] "Copy CSS" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] - 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(2) [download-btn] "Download PNG" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-chevron-down lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [large-canvas] - padding-top: 24px → — - padding-right: 24px → — - padding-bottom: 24px → — - padding-left: 24px → — - background-color: rgb(32, 42, 49) → — - background-image: linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%) → — - background-size: 28px 28px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div [gradient-art] - display: grid → — - justify-content: center → — - min-height: clamp(420px, 42vw, 680px) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > div [art-mark] "PNG" - display: grid → — - align-items: center → — - margin-bottom: 12px → — - width: 70px → — - height: 70px → — - border-top-width: 1px → — - border-top-style: solid → — - border-top-color: rgba(255, 255, 255, 0.65) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > span "easy-png-tools" - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [code-block] - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div - display: flex → — - justify-content: space-between → — - align-items: center → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > span [label] "GENERATED CSS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button [icon-btn] - display: grid → — - align-items: center → — - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button > svg [lucide lucide-copy lucide-icon] - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > pre "background: linear-gradient(135deg, #176" - margin-top: 12px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 14px → — - padding-right: 14px → — - padding-bottom: 14px → — - padding-left: 14px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - display: flex → — - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Remove background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Select a background color and tune the e" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [remover-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.62fr) minmax(0px, 1.38fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "REMOVER SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure detection" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 02" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "BACKGROUND COLOR" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(1) - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(2) [native-color] - padding-top: 0px → — - padding-right: 0px → — - padding-bottom: 0px → — - padding-left: 0px → — - width: 30px → — - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background" - display: flex → — - justify-content: flex-start → — - row-gap: 8px → — - column-gap: 8px → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span - width: 9px → — - height: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR SIMILARITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label > output "72 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div [range-hints] - display: flex → — - justify-content: space-between → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(1) "strict edges" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(2) "more removal" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > span "OUTER COLOR ONLY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > b [on toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(4) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > p "Only remove connected background pixels " - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > span "SHOW MASK" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > b [toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(5) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > p "Preview the detected transparency mask." - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [remover-preview] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "SOURCE / RESULT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "comparison.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [processed] "processed" - display: flex → — - align-items: center → — - row-gap: 5px → — - column-gap: 5px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [download-btn] "Download result" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [comparison-grid] - display: grid → — - row-gap: 18px → — - column-gap: 18px → — - grid-template-columns: repeat(2, minmax(0px, 1fr)) → — - padding-top: 20px → — - padding-right: 20px → — - padding-bottom: 20px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span "SOURCE" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > b "original.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [remover-canvas source-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - background-color: rgb(232, 238, 242) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [subject subject-source] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - transform: rotate(-3deg) → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > span "OBJECT" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > span "RESULT" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > b "removed-bg.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [remover-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [subject] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span "PNG" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [result-meta] - display: flex → — - row-gap: 24px → — - column-gap: 24px → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) "FORMAT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) > b "PNG-24" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) "ALPHA" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) > b "ENABLED" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) "SIMILARITY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) > b "72 %" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project diff --git a/web/audit/cdp-audit-1920x1080.txt b/web/audit/cdp-audit-1920x1080.txt deleted file mode 100644 index 7968946..0000000 --- a/web/audit/cdp-audit-1920x1080.txt +++ /dev/null @@ -1,3072 +0,0 @@ -CDP visual audit -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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [ws] - width: 100% → — - -body > main > div > section:nth-of-type(2) [preview-panel] - align-self: start → — - margin-top: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) [preview-stack] - grid-template-columns: 1fr 1fr → 1fr - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 279.6 → 611.4 (+331.8px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span "SOURCE" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > b "original.png · 1200 × 800" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 279.6 → 611.4 (+331.8px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "STEP 01" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > b "gradient applied" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 279.6 → 611.4 (+331.8px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > span "STEP 02" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > b "background removed" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 279.6 → 611.4 (+331.8px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > span "STEP 03" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > b "outline added" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div [active ph] - min-width: 0px → — - max-width: 100% → — - w: 279.6 → 611.4 (+331.8px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > span "FINAL OUTPUT" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > b "ready · PNG-24" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) [section-label] - row-gap: — → 16px - column-gap: — → 16px - padding-bottom: 15px → 12px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [mono-label] "PIPELINE OUTPUTS" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download result" - display: flex → inline-flex - justify-content: center → — - row-gap: 9px → 8px - column-gap: 9px → 8px - margin-top: 18px → — - padding-top: — → 9px - padding-right: — → 14px - padding-bottom: — → 9px - padding-left: — → 14px - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-arrow-down-to-line lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [history-toggle] "Hide intermediate" - margin-top: 0px → 18px - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 8px → 11px - padding-right: 10px → 14px - padding-bottom: 8px → 11px - padding-left: 10px → 14px - width: auto → 100% - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-chevron-down lucide-icon] - transform: rotate(180deg) → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [meta-list] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 0.15rem - column-gap: 8px → 0.15rem - grid-template-columns: repeat(3, 1fr) → — - padding-top: 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > span [meta-caption] "DIMENSIONS" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > b [meta-value] "1200 × 800 px" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > span [meta-caption] "FORMAT" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > b [meta-value] "PNG-24" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > span [meta-caption] "SIZE" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > b [meta-value] "1.2 MB" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) [icon-btn icon-btn--ghost] - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/" - color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." - max-width: 700px → — - line-height: 1 → 0.9 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1) [step-index] "01" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "BACKGROUND" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [controls] - row-gap: 16px → 0px - column-gap: 16px → 24px - grid-template-columns: 1.1fr 1fr 1.2fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span [swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > svg [lucide lucide-chevron-down lucide-icon] - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "DIRECTION" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label > output "135 °" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 232.4 → 269 (+36.6px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label > output "100%" - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div [segmented] - display: flex → inline-flex - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(2) [segment selected] "100" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(3) [segment] "75" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(4) [segment] "50" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(1) [segment] "25" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - background-color: — → transparent - color: rgb(255, 255, 255) → #6d7883 [var(--muted)] - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(1) [step-index] "02" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TRANSFORM" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(1) [step-index] "03" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "WIDTH" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "2 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 391.5 → 419.5 (+28px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span [dark swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(1) [step-index] "04" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "RADIUS" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "18 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 391.5 → 419.5 (+28px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [toggle-row] - display: — → flex - justify-content: — → space-between - align-items: — → center - row-gap: — → 1rem - column-gap: — → 1rem - padding-top: — → 10px - min-width: — → 0px - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "Preserve aspect ratio" - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button [on toggle] - width: 32px → 2.4rem - height: 18px → 1.3rem - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i [toggle-knob] - position: — → absolute - top: — → 1px - left: — → 1px - width: — → calc(-4px + 1.3rem) - height: — → calc(-4px + 1.3rem) - transform: — → translateX(1.1rem) - background-color: — → rgb(255, 255, 255) - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset-btn] "Reset pipeline" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw] - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] - row-gap: — → 16px - column-gap: — → 16px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span [mono-label] "PROCESSING PIPELINE" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button [add-btn] "Add tool" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg [lucide lucide-icon lucide-plus] - line-height: inherit → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(2) >svg [lucide lucide-link-2 lucide-link2] - ✗ present in reference, absent in project - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [1920x1080] /preview/list-tools (vs list-tools.html) — 123 differences === - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [catalog-page] - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - width: 100% → — - max-width: none → — - -body > main > div > div:nth-of-type(1) [catalog-head] - flex-wrap: — → wrap - row-gap: 40px → 1.5rem - column-gap: 40px → 1.5rem - padding-bottom: 42px → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG" - margin-bottom: 18px → 0.5rem - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: 0.12em → 0.18em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" - margin-top: 12px → 0px - margin-bottom: 14px → 0px - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 2rem - font-weight: 650 → 700 - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p "Focused utilities for working with PNG. " - margin-top: 0px → 0.5rem - max-width: 660px → 56ch - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 0.95rem - line-height: — → 1.5 - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) [catalog-total] - flex-direction: — → column - align-items: center → flex-end - row-gap: 14px → — - column-gap: 14px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1 - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b "32" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - letter-spacing: -0.08em → — - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span "TOOLS AVAILABLE" - margin-top: — → 0.35rem - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(2) [catalog-toolbar] - flex-wrap: — → wrap - row-gap: 24px → 1rem - column-gap: 24px → 1rem - padding-top: 24px → 1.25rem - padding-bottom: 42px → 1.25rem - -body > main > div > div:nth-of-type(2) > label [catalog-search] - display: flex → inline-flex - row-gap: 12px → 0.5rem - column-gap: 12px → 0.5rem - padding-top: 12px → 0.5rem - padding-right: 14px → 0.75rem - padding-bottom: 12px → 0.5rem - padding-left: 14px → 0.75rem - width: min(420px, 100%) → — - -body > main > div > div:nth-of-type(2) > label > input - width: 100% → — - border-top-width: 0px → medium - -body > main > div > div:nth-of-type(2) > div [catalog-filters] - display: flex → inline-flex - row-gap: 6px → 0.4rem - column-gap: 6px → 0.4rem - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1) [active] "ALL" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - background-color: initial → — - color: #1769d2 [var(--blue)] → rgb(255, 255, 255) - letter-spacing: — → 0.06em - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span "CONVERT" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > span "TRANSPARENCY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > span "COLOR" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > span "GEOMETRY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > span "FILTERS" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > span "ANALYZE" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE" - display: — → flex - flex-wrap: — → wrap - row-gap: — → 1.5rem - column-gap: — → 1.5rem - margin-top: 64px → 56px - padding-top: 20px → 24px - letter-spacing: — → 0.08em - -body > main > div > footer > span "•" - margin-top: 0px → — - margin-right: 8px → — - margin-bottom: 0px → — - margin-left: 8px → — - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.08em - -body >main >footer [preview-footer] - + present in project, absent in reference - -body >div - ✗ present in reference, absent in project - - -=== [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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - display: flex → — - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Gradient background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Create a clean, export-ready gradient wi" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [gradient-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.7fr) minmax(0px, 1.3fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "GRADIENT SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure output" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 01" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "GRADIENT TYPE" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div [segmented wide] - display: flex → — - width: 100% → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1) [selected] "Linear" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2) "Radial" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR STOPS" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) [color-row] - display: flex → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span [stop-arrow] "→" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) [gradient-bar] - margin-top: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label "DIRECTION" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output "135 °" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div [direction-grid] - display: grid → — - row-gap: 6px → — - column-gap: 6px → — - grid-template-columns: repeat(4, 1fr) → — - margin-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1) "0° →" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2) "45° ↗" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3) "90° ↑" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4) [selected] "135° ↖" - padding-top: 8px → — - padding-bottom: 8px → — - color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5) "180° ←" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6) "225° ↙" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7) "270° ↓" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8) "315° ↘" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output "100 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "OUTPUT PREVIEW" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "gradient.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [secondary-btn] "Copy CSS" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] - 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(2) [download-btn] "Download PNG" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-chevron-down lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [large-canvas] - padding-top: 24px → — - padding-right: 24px → — - padding-bottom: 24px → — - padding-left: 24px → — - background-color: rgb(32, 42, 49) → — - background-image: linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%) → — - background-size: 28px 28px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div [gradient-art] - display: grid → — - justify-content: center → — - min-height: clamp(420px, 42vw, 680px) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > div [art-mark] "PNG" - display: grid → — - align-items: center → — - margin-bottom: 12px → — - width: 70px → — - height: 70px → — - border-top-width: 1px → — - border-top-style: solid → — - border-top-color: rgba(255, 255, 255, 0.65) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > span "easy-png-tools" - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [code-block] - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div - display: flex → — - justify-content: space-between → — - align-items: center → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > span [label] "GENERATED CSS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button [icon-btn] - display: grid → — - align-items: center → — - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button > svg [lucide lucide-copy lucide-icon] - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > pre "background: linear-gradient(135deg, #176" - margin-top: 12px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 14px → — - padding-right: 14px → — - padding-bottom: 14px → — - padding-left: 14px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - display: flex → — - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Remove background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Select a background color and tune the e" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [remover-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.62fr) minmax(0px, 1.38fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "REMOVER SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure detection" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 02" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "BACKGROUND COLOR" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(1) - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(2) [native-color] - padding-top: 0px → — - padding-right: 0px → — - padding-bottom: 0px → — - padding-left: 0px → — - width: 30px → — - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background" - display: flex → — - justify-content: flex-start → — - row-gap: 8px → — - column-gap: 8px → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span - width: 9px → — - height: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR SIMILARITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label > output "72 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div [range-hints] - display: flex → — - justify-content: space-between → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(1) "strict edges" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(2) "more removal" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > span "OUTER COLOR ONLY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > b [on toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(4) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > p "Only remove connected background pixels " - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > span "SHOW MASK" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > b [toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(5) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > p "Preview the detected transparency mask." - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [remover-preview] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "SOURCE / RESULT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "comparison.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [processed] "processed" - display: flex → — - align-items: center → — - row-gap: 5px → — - column-gap: 5px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [download-btn] "Download result" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [comparison-grid] - display: grid → — - row-gap: 18px → — - column-gap: 18px → — - grid-template-columns: repeat(2, minmax(0px, 1fr)) → — - padding-top: 20px → — - padding-right: 20px → — - padding-bottom: 20px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span "SOURCE" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > b "original.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [remover-canvas source-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - background-color: rgb(232, 238, 242) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [subject subject-source] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - transform: rotate(-3deg) → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > span "OBJECT" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > span "RESULT" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > b "removed-bg.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [remover-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [subject] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span "PNG" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [result-meta] - display: flex → — - row-gap: 24px → — - column-gap: 24px → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) "FORMAT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) > b "PNG-24" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) "ALPHA" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) > b "ENABLED" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) "SIMILARITY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) > b "72 %" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project diff --git a/web/audit/cdp-audit-2560x1440.txt b/web/audit/cdp-audit-2560x1440.txt deleted file mode 100644 index 080bded..0000000 --- a/web/audit/cdp-audit-2560x1440.txt +++ /dev/null @@ -1,3072 +0,0 @@ -CDP visual audit -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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [ws] - width: 100% → — - -body > main > div > section:nth-of-type(2) [preview-panel] - align-self: start → — - margin-top: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) [preview-stack] - grid-template-columns: 1fr 1fr → 1fr - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 401.2 → 854.6 (+453.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span "SOURCE" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > b "original.png · 1200 × 800" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 401.2 → 854.6 (+453.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "STEP 01" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > b "gradient applied" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 401.2 → 854.6 (+453.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > span "STEP 02" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > b "background removed" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 401.2 → 854.6 (+453.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > span "STEP 03" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > b "outline added" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div [active ph] - min-width: 0px → — - max-width: 100% → — - w: 401.2 → 854.6 (+453.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > span "FINAL OUTPUT" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > b "ready · PNG-24" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) [section-label] - row-gap: — → 16px - column-gap: — → 16px - padding-bottom: 15px → 12px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [mono-label] "PIPELINE OUTPUTS" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download result" - display: flex → inline-flex - justify-content: center → — - row-gap: 9px → 8px - column-gap: 9px → 8px - margin-top: 18px → — - padding-top: — → 9px - padding-right: — → 14px - padding-bottom: — → 9px - padding-left: — → 14px - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-arrow-down-to-line lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [history-toggle] "Hide intermediate" - margin-top: 0px → 18px - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 8px → 11px - padding-right: 10px → 14px - padding-bottom: 8px → 11px - padding-left: 10px → 14px - width: auto → 100% - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-chevron-down lucide-icon] - transform: rotate(180deg) → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [meta-list] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 0.15rem - column-gap: 8px → 0.15rem - grid-template-columns: repeat(3, 1fr) → — - padding-top: 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > span [meta-caption] "DIMENSIONS" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > b [meta-value] "1200 × 800 px" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > span [meta-caption] "FORMAT" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > b [meta-value] "PNG-24" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > span [meta-caption] "SIZE" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > b [meta-value] "1.2 MB" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) [icon-btn icon-btn--ghost] - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/" - color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." - max-width: 700px → — - line-height: 1 → 0.9 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1) [step-index] "01" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "BACKGROUND" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [controls] - row-gap: 16px → 0px - column-gap: 16px → 24px - grid-template-columns: 1.1fr 1fr 1.2fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span [swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > svg [lucide lucide-chevron-down lucide-icon] - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "DIRECTION" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label > output "135 °" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 334.3 → 381 (+46.7px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label > output "100%" - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div [segmented] - display: flex → inline-flex - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(2) [segment selected] "100" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(3) [segment] "75" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(4) [segment] "50" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(1) [segment] "25" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - background-color: — → transparent - color: rgb(255, 255, 255) → #6d7883 [var(--muted)] - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(1) [step-index] "02" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TRANSFORM" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(1) [step-index] "03" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "WIDTH" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "2 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 559.5 → 587.5 (+28px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span [dark swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(1) [step-index] "04" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "RADIUS" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "18 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 559.5 → 587.5 (+28px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [toggle-row] - display: — → flex - justify-content: — → space-between - align-items: — → center - row-gap: — → 1rem - column-gap: — → 1rem - padding-top: — → 10px - min-width: — → 0px - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "Preserve aspect ratio" - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button [on toggle] - width: 32px → 2.4rem - height: 18px → 1.3rem - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i [toggle-knob] - position: — → absolute - top: — → 1px - left: — → 1px - width: — → calc(-4px + 1.3rem) - height: — → calc(-4px + 1.3rem) - transform: — → translateX(1.1rem) - background-color: — → rgb(255, 255, 255) - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset-btn] "Reset pipeline" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw] - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] - row-gap: — → 16px - column-gap: — → 16px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span [mono-label] "PROCESSING PIPELINE" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button [add-btn] "Add tool" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg [lucide lucide-icon lucide-plus] - line-height: inherit → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(2) >svg [lucide lucide-link-2 lucide-link2] - ✗ present in reference, absent in project - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [2560x1440] /preview/list-tools (vs list-tools.html) — 123 differences === - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [catalog-page] - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - width: 100% → — - max-width: none → — - -body > main > div > div:nth-of-type(1) [catalog-head] - flex-wrap: — → wrap - row-gap: 40px → 1.5rem - column-gap: 40px → 1.5rem - padding-bottom: 42px → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG" - margin-bottom: 18px → 0.5rem - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: 0.12em → 0.18em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" - margin-top: 12px → 0px - margin-bottom: 14px → 0px - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 2rem - font-weight: 650 → 700 - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p "Focused utilities for working with PNG. " - margin-top: 0px → 0.5rem - max-width: 660px → 56ch - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 0.95rem - line-height: — → 1.5 - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) [catalog-total] - flex-direction: — → column - align-items: center → flex-end - row-gap: 14px → — - column-gap: 14px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1 - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b "32" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - letter-spacing: -0.08em → — - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span "TOOLS AVAILABLE" - margin-top: — → 0.35rem - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(2) [catalog-toolbar] - flex-wrap: — → wrap - row-gap: 24px → 1rem - column-gap: 24px → 1rem - padding-top: 24px → 1.25rem - padding-bottom: 42px → 1.25rem - -body > main > div > div:nth-of-type(2) > label [catalog-search] - display: flex → inline-flex - row-gap: 12px → 0.5rem - column-gap: 12px → 0.5rem - padding-top: 12px → 0.5rem - padding-right: 14px → 0.75rem - padding-bottom: 12px → 0.5rem - padding-left: 14px → 0.75rem - width: min(420px, 100%) → — - -body > main > div > div:nth-of-type(2) > label > input - width: 100% → — - border-top-width: 0px → medium - -body > main > div > div:nth-of-type(2) > div [catalog-filters] - display: flex → inline-flex - row-gap: 6px → 0.4rem - column-gap: 6px → 0.4rem - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1) [active] "ALL" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - background-color: initial → — - color: #1769d2 [var(--blue)] → rgb(255, 255, 255) - letter-spacing: — → 0.06em - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span "CONVERT" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > span "TRANSPARENCY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > span "COLOR" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > span "GEOMETRY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > span "FILTERS" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > span "ANALYZE" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE" - display: — → flex - flex-wrap: — → wrap - row-gap: — → 1.5rem - column-gap: — → 1.5rem - margin-top: 64px → 56px - padding-top: 20px → 24px - letter-spacing: — → 0.08em - -body > main > div > footer > span "•" - margin-top: 0px → — - margin-right: 8px → — - margin-bottom: 0px → — - margin-left: 8px → — - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.08em - -body >main >footer [preview-footer] - + present in project, absent in reference - -body >div - ✗ present in reference, absent in project - - -=== [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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - display: flex → — - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Gradient background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Create a clean, export-ready gradient wi" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [gradient-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.7fr) minmax(0px, 1.3fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "GRADIENT SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure output" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 01" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "GRADIENT TYPE" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div [segmented wide] - display: flex → — - width: 100% → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1) [selected] "Linear" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2) "Radial" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR STOPS" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) [color-row] - display: flex → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span [stop-arrow] "→" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) [gradient-bar] - margin-top: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label "DIRECTION" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output "135 °" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div [direction-grid] - display: grid → — - row-gap: 6px → — - column-gap: 6px → — - grid-template-columns: repeat(4, 1fr) → — - margin-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1) "0° →" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2) "45° ↗" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3) "90° ↑" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4) [selected] "135° ↖" - padding-top: 8px → — - padding-bottom: 8px → — - color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5) "180° ←" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6) "225° ↙" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7) "270° ↓" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8) "315° ↘" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output "100 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "OUTPUT PREVIEW" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "gradient.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [secondary-btn] "Copy CSS" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] - 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(2) [download-btn] "Download PNG" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-chevron-down lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [large-canvas] - padding-top: 24px → — - padding-right: 24px → — - padding-bottom: 24px → — - padding-left: 24px → — - background-color: rgb(32, 42, 49) → — - background-image: linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%) → — - background-size: 28px 28px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div [gradient-art] - display: grid → — - justify-content: center → — - min-height: clamp(420px, 42vw, 680px) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > div [art-mark] "PNG" - display: grid → — - align-items: center → — - margin-bottom: 12px → — - width: 70px → — - height: 70px → — - border-top-width: 1px → — - border-top-style: solid → — - border-top-color: rgba(255, 255, 255, 0.65) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > span "easy-png-tools" - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [code-block] - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div - display: flex → — - justify-content: space-between → — - align-items: center → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > span [label] "GENERATED CSS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button [icon-btn] - display: grid → — - align-items: center → — - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button > svg [lucide lucide-copy lucide-icon] - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > pre "background: linear-gradient(135deg, #176" - margin-top: 12px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 14px → — - padding-right: 14px → — - padding-bottom: 14px → — - padding-left: 14px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - display: flex → — - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Remove background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Select a background color and tune the e" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [remover-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.62fr) minmax(0px, 1.38fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "REMOVER SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure detection" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 02" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "BACKGROUND COLOR" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(1) - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(2) [native-color] - padding-top: 0px → — - padding-right: 0px → — - padding-bottom: 0px → — - padding-left: 0px → — - width: 30px → — - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background" - display: flex → — - justify-content: flex-start → — - row-gap: 8px → — - column-gap: 8px → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span - width: 9px → — - height: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR SIMILARITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label > output "72 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div [range-hints] - display: flex → — - justify-content: space-between → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(1) "strict edges" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(2) "more removal" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > span "OUTER COLOR ONLY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > b [on toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(4) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > p "Only remove connected background pixels " - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > span "SHOW MASK" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > b [toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(5) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > p "Preview the detected transparency mask." - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [remover-preview] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "SOURCE / RESULT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "comparison.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [processed] "processed" - display: flex → — - align-items: center → — - row-gap: 5px → — - column-gap: 5px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [download-btn] "Download result" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [comparison-grid] - display: grid → — - row-gap: 18px → — - column-gap: 18px → — - grid-template-columns: repeat(2, minmax(0px, 1fr)) → — - padding-top: 20px → — - padding-right: 20px → — - padding-bottom: 20px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span "SOURCE" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > b "original.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [remover-canvas source-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - background-color: rgb(232, 238, 242) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [subject subject-source] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - transform: rotate(-3deg) → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > span "OBJECT" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > span "RESULT" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > b "removed-bg.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [remover-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [subject] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span "PNG" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [result-meta] - display: flex → — - row-gap: 24px → — - column-gap: 24px → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) "FORMAT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) > b "PNG-24" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) "ALPHA" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) > b "ENABLED" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) "SIMILARITY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) > b "72 %" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project diff --git a/web/audit/cdp-audit-390x844.txt b/web/audit/cdp-audit-390x844.txt deleted file mode 100644 index 4708eea..0000000 --- a/web/audit/cdp-audit-390x844.txt +++ /dev/null @@ -1,3199 +0,0 @@ -CDP visual audit -2026-08-30T16:45:08.002Z -viewport 390x844, tolerance 1px, theme light - -=== [390x844] /preview/demo (vs demo.html) — 172 differences === - -body > main > header [topbar] - h: 120 → 64 (-56px) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - w: 30 → 14.6 (-15.4px) - -body > main > header > div > span > i [status-dot] - display: — → inline-block - w: 0 → 4.7 (+4.7px) - h: 0 → 6 (+6px) - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [ws] - width: 100% → — - -body > main > div > section:nth-of-type(2) [preview-panel] - align-self: start → — - margin-top: 0px → — - y: 1489.8 → 1270.7 (-219.1px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) [preview-stack] - grid-template-columns: 1fr 1fr → 1fr - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 228.8 → 244.2 (+15.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span "SOURCE" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > b "original.png · 1200 × 800" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 228.8 → 244.2 (+15.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "STEP 01" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > b "gradient applied" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 228.8 → 244.2 (+15.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > span "STEP 02" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > b "background removed" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 228.8 → 244.2 (+15.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > span "STEP 03" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > b "outline added" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div [active ph] - min-width: 0px → — - max-width: 100% → — - w: 228.8 → 244.2 (+15.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > span "FINAL OUTPUT" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > b "ready · PNG-24" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) [section-label] - row-gap: — → 16px - column-gap: — → 16px - padding-bottom: 15px → 12px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [mono-label] "PIPELINE OUTPUTS" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download result" - display: flex → inline-flex - justify-content: center → — - row-gap: 9px → 8px - column-gap: 9px → 8px - margin-top: 18px → — - padding-top: — → 9px - padding-right: — → 14px - padding-bottom: — → 9px - padding-left: — → 14px - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-arrow-down-to-line lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [history-toggle] "Hide intermediate" - margin-top: 0px → 18px - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 8px → 11px - padding-right: 10px → 14px - padding-bottom: 8px → 11px - padding-left: 10px → 14px - width: auto → 100% - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-chevron-down lucide-icon] - transform: rotate(180deg) → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [meta-list] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 0.15rem - column-gap: 8px → 0.15rem - grid-template-columns: repeat(3, 1fr) → — - padding-top: 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > span [meta-caption] "DIMENSIONS" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > b [meta-value] "1200 × 800 px" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > span [meta-caption] "FORMAT" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > b [meta-value] "PNG-24" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > span [meta-caption] "SIZE" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > b [meta-value] "1.2 MB" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) [icon-btn icon-btn--ghost] - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/" - color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." - max-width: 700px → — - line-height: 1 → 0.9 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1) [step-index] "01" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "BACKGROUND" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [controls] - row-gap: 16px → 0px - column-gap: 16px → 24px - grid-template-columns: 1.1fr 1fr 1.2fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span [swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > svg [lucide lucide-chevron-down lucide-icon] - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "DIRECTION" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label > output "135 °" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 254 → 310 (+56px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label > output "100%" - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div [segmented] - display: flex → inline-flex - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(2) [segment selected] "100" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(3) [segment] "75" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(4) [segment] "50" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(1) [segment] "25" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - background-color: — → transparent - color: rgb(255, 255, 255) → #6d7883 [var(--muted)] - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(1) [step-index] "02" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TRANSFORM" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(1) [step-index] "03" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "WIDTH" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "2 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 254 → 310 (+56px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span [dark swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(1) [step-index] "04" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "RADIUS" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "18 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 254 → 310 (+56px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [toggle-row] - display: — → flex - justify-content: — → space-between - align-items: — → center - row-gap: — → 1rem - column-gap: — → 1rem - padding-top: — → 10px - min-width: — → 0px - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "Preserve aspect ratio" - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button [on toggle] - width: 32px → 2.4rem - height: 18px → 1.3rem - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i [toggle-knob] - position: — → absolute - top: — → 1px - left: — → 1px - width: — → calc(-4px + 1.3rem) - height: — → calc(-4px + 1.3rem) - transform: — → translateX(1.1rem) - background-color: — → rgb(255, 255, 255) - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset-btn] "Reset pipeline" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw] - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] - row-gap: — → 16px - column-gap: — → 16px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span [mono-label] "PROCESSING PIPELINE" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button [add-btn] "Add tool" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg [lucide lucide-icon lucide-plus] - line-height: inherit → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(2) >svg [lucide lucide-link-2 lucide-link2] - ✗ present in reference, absent in project - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [390x844] /preview/list-tools (vs list-tools.html) — 154 differences === - -body > main > header [topbar] - h: 120 → 64 (-56px) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - w: 30 → 14.6 (-15.4px) - -body > main > header > div > span > i [status-dot] - display: — → inline-block - w: 0 → 3.3 (+3.3px) - h: 0 → 6 (+6px) - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [catalog-page] - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - width: 100% → — - max-width: none → — - -body > main > div > div:nth-of-type(1) [catalog-head] - flex-wrap: — → wrap - row-gap: 40px → 1.5rem - column-gap: 40px → 1.5rem - padding-bottom: 42px → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG" - margin-bottom: 18px → 0.5rem - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: 0.12em → 0.18em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" - margin-top: 12px → 0px - margin-bottom: 14px → 0px - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 2rem - font-weight: 650 → 700 - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p "Focused utilities for working with PNG. " - margin-top: 0px → 0.5rem - max-width: 660px → 56ch - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 0.95rem - line-height: — → 1.5 - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) [catalog-total] - flex-direction: — → column - align-items: center → flex-end - row-gap: 14px → — - column-gap: 14px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1 - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b "32" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - letter-spacing: -0.08em → — - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span "TOOLS AVAILABLE" - margin-top: — → 0.35rem - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(2) [catalog-toolbar] - flex-wrap: — → wrap - row-gap: 24px → 1rem - column-gap: 24px → 1rem - padding-top: 24px → 1.25rem - padding-bottom: 42px → 1.25rem - -body > main > div > div:nth-of-type(2) > label [catalog-search] - display: flex → inline-flex - row-gap: 12px → 0.5rem - column-gap: 12px → 0.5rem - padding-top: 12px → 0.5rem - padding-right: 14px → 0.75rem - padding-bottom: 12px → 0.5rem - padding-left: 14px → 0.75rem - width: min(420px, 100%) → — - -body > main > div > div:nth-of-type(2) > label > input - width: 100% → — - border-top-width: 0px → medium - -body > main > div > div:nth-of-type(2) > div [catalog-filters] - display: flex → inline-flex - row-gap: 6px → 0.4rem - column-gap: 6px → 0.4rem - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1) [active] "ALL" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - background-color: initial → — - color: #1769d2 [var(--blue)] → rgb(255, 255, 255) - letter-spacing: — → 0.06em - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span "CONVERT" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > span "TRANSPARENCY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > span "COLOR" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > span "GEOMETRY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > span "FILTERS" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > span "ANALYZE" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE" - display: — → flex - flex-wrap: — → wrap - row-gap: — → 1.5rem - column-gap: — → 1.5rem - margin-top: 64px → 56px - padding-top: 20px → 24px - letter-spacing: — → 0.08em - -body > main > div > footer > span "•" - margin-top: 0px → — - margin-right: 8px → — - margin-bottom: 0px → — - margin-left: 8px → — - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.08em - -body >main >footer [preview-footer] - + present in project, absent in reference - -body >div - ✗ present in reference, absent in project - - -=== [390x844] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences === - -body > main > header [topbar] - h: 120 → 64 (-56px) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - w: 30 → 14.6 (-15.4px) - -body > main > header > div > span > i [status-dot] - display: — → inline-block - w: 0 → 4.7 (+4.7px) - h: 0 → 6 (+6px) - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Gradient background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Create a clean, export-ready gradient wi" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [gradient-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.7fr) minmax(0px, 1.3fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "GRADIENT SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure output" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 01" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "GRADIENT TYPE" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div [segmented wide] - display: flex → — - width: 100% → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1) [selected] "Linear" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2) "Radial" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR STOPS" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) [color-row] - display: flex → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span [stop-arrow] "→" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) [gradient-bar] - margin-top: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label "DIRECTION" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output "135 °" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div [direction-grid] - display: grid → — - row-gap: 6px → — - column-gap: 6px → — - grid-template-columns: repeat(4, 1fr) → — - margin-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1) "0° →" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2) "45° ↗" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3) "90° ↑" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4) [selected] "135° ↖" - padding-top: 8px → — - padding-bottom: 8px → — - color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5) "180° ←" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6) "225° ↙" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7) "270° ↓" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8) "315° ↘" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output "100 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "OUTPUT PREVIEW" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "gradient.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [secondary-btn] "Copy CSS" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] - 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(2) [download-btn] "Download PNG" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-chevron-down lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [large-canvas] - padding-top: 24px → — - padding-right: 24px → — - padding-bottom: 24px → — - padding-left: 24px → — - background-color: rgb(32, 42, 49) → — - background-image: linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%) → — - background-size: 28px 28px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div [gradient-art] - display: grid → — - justify-content: center → — - min-height: clamp(420px, 42vw, 680px) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > div [art-mark] "PNG" - display: grid → — - align-items: center → — - margin-bottom: 12px → — - width: 70px → — - height: 70px → — - border-top-width: 1px → — - border-top-style: solid → — - border-top-color: rgba(255, 255, 255, 0.65) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > span "easy-png-tools" - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [code-block] - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div - display: flex → — - justify-content: space-between → — - align-items: center → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > span [label] "GENERATED CSS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button [icon-btn] - display: grid → — - align-items: center → — - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button > svg [lucide lucide-copy lucide-icon] - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > pre "background: linear-gradient(135deg, #176" - margin-top: 12px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 14px → — - padding-right: 14px → — - padding-bottom: 14px → — - padding-left: 14px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [390x844] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences === - -body > main > header [topbar] - h: 120 → 64 (-56px) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - w: 30 → 14.6 (-15.4px) - -body > main > header > div > span > i [status-dot] - display: — → inline-block - w: 0 → 4.8 (+4.8px) - h: 0 → 6 (+6px) - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Remove background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Select a background color and tune the e" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [remover-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.62fr) minmax(0px, 1.38fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "REMOVER SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure detection" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 02" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "BACKGROUND COLOR" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(1) - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(2) [native-color] - padding-top: 0px → — - padding-right: 0px → — - padding-bottom: 0px → — - padding-left: 0px → — - width: 30px → — - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background" - display: flex → — - justify-content: flex-start → — - row-gap: 8px → — - column-gap: 8px → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span - width: 9px → — - height: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR SIMILARITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label > output "72 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div [range-hints] - display: flex → — - justify-content: space-between → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(1) "strict edges" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(2) "more removal" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > span "OUTER COLOR ONLY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > b [on toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(4) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > p "Only remove connected background pixels " - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > span "SHOW MASK" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > b [toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(5) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > p "Preview the detected transparency mask." - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [remover-preview] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "SOURCE / RESULT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "comparison.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [processed] "processed" - display: flex → — - align-items: center → — - row-gap: 5px → — - column-gap: 5px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [download-btn] "Download result" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [comparison-grid] - display: grid → — - row-gap: 18px → — - column-gap: 18px → — - grid-template-columns: repeat(2, minmax(0px, 1fr)) → — - padding-top: 20px → — - padding-right: 20px → — - padding-bottom: 20px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span "SOURCE" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > b "original.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [remover-canvas source-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - background-color: rgb(232, 238, 242) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [subject subject-source] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - transform: rotate(-3deg) → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > span "OBJECT" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > span "RESULT" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > b "removed-bg.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [remover-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [subject] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span "PNG" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [result-meta] - display: flex → — - row-gap: 24px → — - column-gap: 24px → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) "FORMAT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) > b "PNG-24" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) "ALPHA" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) > b "ENABLED" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) "SIMILARITY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) > b "72 %" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project diff --git a/web/audit/cdp-audit-768x1024.txt b/web/audit/cdp-audit-768x1024.txt deleted file mode 100644 index 751e9a3..0000000 --- a/web/audit/cdp-audit-768x1024.txt +++ /dev/null @@ -1,3199 +0,0 @@ -CDP visual audit -2026-08-30T16:45:08.000Z -viewport 768x1024, tolerance 1px, theme light - -=== [768x1024] /preview/demo (vs demo.html) — 172 differences === - -body > main > header [topbar] - h: 79 → 64 (-15px) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - w: 30 → 14.6 (-15.4px) - -body > main > header > div > span > i [status-dot] - display: — → inline-block - w: 0 → 4.7 (+4.7px) - h: 0 → 6 (+6px) - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [ws] - width: 100% → — - -body > main > div > section:nth-of-type(2) [preview-panel] - align-self: start → — - margin-top: 0px → — - y: 1336.2 → 1193.8 (-142.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) [preview-stack] - grid-template-columns: 1fr 1fr → 1fr - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 247.2 → 546.6 (+299.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span "SOURCE" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > b "original.png · 1200 × 800" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 247.2 → 546.6 (+299.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "STEP 01" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > b "gradient applied" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 247.2 → 546.6 (+299.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > span "STEP 02" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > b "background removed" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 247.2 → 546.6 (+299.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > span "STEP 03" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > b "outline added" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div [active ph] - min-width: 0px → — - max-width: 100% → — - w: 247.2 → 546.6 (+299.4px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > span "FINAL OUTPUT" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > b "ready · PNG-24" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) [section-label] - row-gap: — → 16px - column-gap: — → 16px - padding-bottom: 15px → 12px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [mono-label] "PIPELINE OUTPUTS" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download result" - display: flex → inline-flex - justify-content: center → — - row-gap: 9px → 8px - column-gap: 9px → 8px - margin-top: 18px → — - padding-top: — → 9px - padding-right: — → 14px - padding-bottom: — → 9px - padding-left: — → 14px - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-arrow-down-to-line lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [history-toggle] "Hide intermediate" - margin-top: 0px → 18px - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 8px → 11px - padding-right: 10px → 14px - padding-bottom: 8px → 11px - padding-left: 10px → 14px - width: auto → 100% - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-chevron-down lucide-icon] - transform: rotate(180deg) → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [meta-list] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 0.15rem - column-gap: 8px → 0.15rem - grid-template-columns: repeat(3, 1fr) → — - padding-top: 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > span [meta-caption] "DIMENSIONS" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > b [meta-value] "1200 × 800 px" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > span [meta-caption] "FORMAT" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > b [meta-value] "PNG-24" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > span [meta-caption] "SIZE" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > b [meta-value] "1.2 MB" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) [icon-btn icon-btn--ghost] - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/" - color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." - max-width: 700px → — - line-height: 1 → 0.9 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1) [step-index] "01" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "BACKGROUND" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [controls] - row-gap: 16px → 0px - column-gap: 16px → 24px - grid-template-columns: 1.1fr 1fr 1.2fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span [swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > svg [lucide lucide-chevron-down lucide-icon] - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "DIRECTION" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label > output "135 °" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 632 → 688 (+56px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label > output "100%" - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div [segmented] - display: flex → inline-flex - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(2) [segment selected] "100" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(3) [segment] "75" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(4) [segment] "50" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(1) [segment] "25" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - background-color: — → transparent - color: rgb(255, 255, 255) → #6d7883 [var(--muted)] - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(1) [step-index] "02" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TRANSFORM" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(1) [step-index] "03" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "WIDTH" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "2 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 632 → 688 (+56px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span [dark swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(1) [step-index] "04" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "RADIUS" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "18 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 632 → 688 (+56px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [toggle-row] - display: — → flex - justify-content: — → space-between - align-items: — → center - row-gap: — → 1rem - column-gap: — → 1rem - padding-top: — → 10px - min-width: — → 0px - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "Preserve aspect ratio" - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button [on toggle] - width: 32px → 2.4rem - height: 18px → 1.3rem - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i [toggle-knob] - position: — → absolute - top: — → 1px - left: — → 1px - width: — → calc(-4px + 1.3rem) - height: — → calc(-4px + 1.3rem) - transform: — → translateX(1.1rem) - background-color: — → rgb(255, 255, 255) - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset-btn] "Reset pipeline" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw] - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] - row-gap: — → 16px - column-gap: — → 16px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span [mono-label] "PROCESSING PIPELINE" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button [add-btn] "Add tool" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg [lucide lucide-icon lucide-plus] - line-height: inherit → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(2) >svg [lucide lucide-link-2 lucide-link2] - ✗ present in reference, absent in project - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [768x1024] /preview/list-tools (vs list-tools.html) — 154 differences === - -body > main > header [topbar] - h: 79 → 64 (-15px) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - w: 30 → 15.4 (-14.6px) - -body > main > header > div > span > i [status-dot] - display: — → inline-block - w: 0 → 3.3 (+3.3px) - h: 0 → 6 (+6px) - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [catalog-page] - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - width: 100% → — - max-width: none → — - -body > main > div > div:nth-of-type(1) [catalog-head] - flex-wrap: — → wrap - row-gap: 40px → 1.5rem - column-gap: 40px → 1.5rem - padding-bottom: 42px → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG" - margin-bottom: 18px → 0.5rem - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: 0.12em → 0.18em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" - margin-top: 12px → 0px - margin-bottom: 14px → 0px - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 2rem - font-weight: 650 → 700 - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p "Focused utilities for working with PNG. " - margin-top: 0px → 0.5rem - max-width: 660px → 56ch - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 0.95rem - line-height: — → 1.5 - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) [catalog-total] - flex-direction: — → column - align-items: center → flex-end - row-gap: 14px → — - column-gap: 14px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1 - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b "32" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - letter-spacing: -0.08em → — - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span "TOOLS AVAILABLE" - margin-top: — → 0.35rem - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(2) [catalog-toolbar] - flex-wrap: — → wrap - row-gap: 24px → 1rem - column-gap: 24px → 1rem - padding-top: 24px → 1.25rem - padding-bottom: 42px → 1.25rem - -body > main > div > div:nth-of-type(2) > label [catalog-search] - display: flex → inline-flex - row-gap: 12px → 0.5rem - column-gap: 12px → 0.5rem - padding-top: 12px → 0.5rem - padding-right: 14px → 0.75rem - padding-bottom: 12px → 0.5rem - padding-left: 14px → 0.75rem - width: min(420px, 100%) → — - -body > main > div > div:nth-of-type(2) > label > input - width: 100% → — - border-top-width: 0px → medium - -body > main > div > div:nth-of-type(2) > div [catalog-filters] - display: flex → inline-flex - row-gap: 6px → 0.4rem - column-gap: 6px → 0.4rem - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1) [active] "ALL" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - background-color: initial → — - color: #1769d2 [var(--blue)] → rgb(255, 255, 255) - letter-spacing: — → 0.06em - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span "CONVERT" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > span "TRANSPARENCY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > span "COLOR" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > span "GEOMETRY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > span "FILTERS" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > span "ANALYZE" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - 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(1) [tool-icon] - w: 38 → 42 (+4px) - h: 38 → 42 (+4px) - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE" - display: — → flex - flex-wrap: — → wrap - row-gap: — → 1.5rem - column-gap: — → 1.5rem - margin-top: 64px → 56px - padding-top: 20px → 24px - letter-spacing: — → 0.08em - -body > main > div > footer > span "•" - margin-top: 0px → — - margin-right: 8px → — - margin-bottom: 0px → — - margin-left: 8px → — - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.08em - -body >main >footer [preview-footer] - + present in project, absent in reference - -body >div - ✗ present in reference, absent in project - - -=== [768x1024] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences === - -body > main > header [topbar] - h: 79 → 64 (-15px) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - w: 30 → 14.6 (-15.4px) - -body > main > header > div > span > i [status-dot] - display: — → inline-block - w: 0 → 4.7 (+4.7px) - h: 0 → 6 (+6px) - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Gradient background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Create a clean, export-ready gradient wi" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [gradient-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.7fr) minmax(0px, 1.3fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "GRADIENT SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure output" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 01" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "GRADIENT TYPE" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div [segmented wide] - display: flex → — - width: 100% → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1) [selected] "Linear" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2) "Radial" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR STOPS" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) [color-row] - display: flex → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span [stop-arrow] "→" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) [gradient-bar] - margin-top: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label "DIRECTION" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output "135 °" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div [direction-grid] - display: grid → — - row-gap: 6px → — - column-gap: 6px → — - grid-template-columns: repeat(4, 1fr) → — - margin-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1) "0° →" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2) "45° ↗" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3) "90° ↑" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4) [selected] "135° ↖" - padding-top: 8px → — - padding-bottom: 8px → — - color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5) "180° ←" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6) "225° ↙" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7) "270° ↓" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8) "315° ↘" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output "100 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "OUTPUT PREVIEW" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "gradient.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [secondary-btn] "Copy CSS" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] - 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(2) [download-btn] "Download PNG" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-chevron-down lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [large-canvas] - padding-top: 24px → — - padding-right: 24px → — - padding-bottom: 24px → — - padding-left: 24px → — - background-color: rgb(32, 42, 49) → — - background-image: linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%) → — - background-size: 28px 28px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div [gradient-art] - display: grid → — - justify-content: center → — - min-height: clamp(420px, 42vw, 680px) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > div [art-mark] "PNG" - display: grid → — - align-items: center → — - margin-bottom: 12px → — - width: 70px → — - height: 70px → — - border-top-width: 1px → — - border-top-style: solid → — - border-top-color: rgba(255, 255, 255, 0.65) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > span "easy-png-tools" - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [code-block] - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div - display: flex → — - justify-content: space-between → — - align-items: center → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > span [label] "GENERATED CSS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button [icon-btn] - display: grid → — - align-items: center → — - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button > svg [lucide lucide-copy lucide-icon] - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > pre "background: linear-gradient(135deg, #176" - margin-top: 12px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 14px → — - padding-right: 14px → — - padding-bottom: 14px → — - padding-left: 14px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [768x1024] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences === - -body > main > header [topbar] - h: 79 → 64 (-15px) - -body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" - w: 30 → 14.6 (-15.4px) - -body > main > header > div > span > i [status-dot] - display: — → inline-block - w: 0 → 4.8 (+4.8px) - h: 0 → 6 (+6px) - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Remove background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Select a background color and tune the e" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [remover-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.62fr) minmax(0px, 1.38fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "REMOVER SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure detection" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 02" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "BACKGROUND COLOR" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(1) - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(2) [native-color] - padding-top: 0px → — - padding-right: 0px → — - padding-bottom: 0px → — - padding-left: 0px → — - width: 30px → — - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background" - display: flex → — - justify-content: flex-start → — - row-gap: 8px → — - column-gap: 8px → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span - width: 9px → — - height: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR SIMILARITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label > output "72 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div [range-hints] - display: flex → — - justify-content: space-between → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(1) "strict edges" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(2) "more removal" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > span "OUTER COLOR ONLY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > b [on toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(4) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > p "Only remove connected background pixels " - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > span "SHOW MASK" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > b [toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(5) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > p "Preview the detected transparency mask." - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [remover-preview] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "SOURCE / RESULT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "comparison.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [processed] "processed" - display: flex → — - align-items: center → — - row-gap: 5px → — - column-gap: 5px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [download-btn] "Download result" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [comparison-grid] - display: grid → — - row-gap: 18px → — - column-gap: 18px → — - grid-template-columns: repeat(2, minmax(0px, 1fr)) → — - padding-top: 20px → — - padding-right: 20px → — - padding-bottom: 20px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span "SOURCE" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > b "original.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [remover-canvas source-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - background-color: rgb(232, 238, 242) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [subject subject-source] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - transform: rotate(-3deg) → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > span "OBJECT" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > span "RESULT" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > b "removed-bg.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [remover-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [subject] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span "PNG" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [result-meta] - display: flex → — - row-gap: 24px → — - column-gap: 24px → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) "FORMAT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) > b "PNG-24" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) "ALPHA" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) > b "ENABLED" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) "SIMILARITY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) > b "72 %" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project diff --git a/web/audit/cdp-audit.txt b/web/audit/cdp-audit.txt deleted file mode 100644 index bf6f2c7..0000000 --- a/web/audit/cdp-audit.txt +++ /dev/null @@ -1,3072 +0,0 @@ -CDP visual audit -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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [ws] - width: 100% → — - -body > main > div > section:nth-of-type(2) [preview-panel] - align-self: start → — - margin-top: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) [preview-stack] - grid-template-columns: 1fr 1fr → 1fr - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 193.9 → 439.9 (+246px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span "SOURCE" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > b "original.png · 1200 × 800" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 193.9 → 439.9 (+246px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "STEP 01" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > b "gradient applied" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 193.9 → 439.9 (+246px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > span "STEP 02" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > b "background removed" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div [ph] - min-width: 0px → — - max-width: 100% → — - w: 193.9 → 439.9 (+246px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > span "STEP 03" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > b "outline added" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) [preview-tile] - display: — → flex - flex-direction: — → column - row-gap: — → 0.3rem - column-gap: — → 0.3rem - padding-top: — → 0.4rem - padding-right: — → 0.4rem - padding-bottom: — → 0.4rem - padding-left: — → 0.4rem - width: 100% → — - min-width: 0px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) [tile-canvas] - display: grid → — - align-items: center → — - padding-top: 16px → — - padding-right: 16px → — - padding-bottom: 16px → — - padding-left: 16px → — - width: 100% → — - min-width: 0px → — - min-height: clamp(300px, 22vw, 430px) → 120px - background-color: rgb(228, 232, 235) → — - background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → — - background-size: 14px 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div [active ph] - min-width: 0px → — - max-width: 100% → — - w: 193.9 → 439.9 (+246px) - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) [tile-label] - align-items: — → baseline - row-gap: 8px → 0.5rem - column-gap: 8px → 0.5rem - padding-top: 8px → — - padding-right: 8px → — - padding-bottom: 8px → — - padding-left: 8px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > span "FINAL OUTPUT" - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > b "ready · PNG-24" - text-align: right → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) [section-label] - row-gap: — → 16px - column-gap: — → 16px - padding-bottom: 15px → 12px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [mono-label] "PIPELINE OUTPUTS" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download result" - display: flex → inline-flex - justify-content: center → — - row-gap: 9px → 8px - column-gap: 9px → 8px - margin-top: 18px → — - padding-top: — → 9px - padding-right: — → 14px - padding-bottom: — → 9px - padding-left: — → 14px - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-arrow-down-to-line lucide-icon] - letter-spacing: — → 0.04em - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [history-toggle] "Hide intermediate" - margin-top: 0px → 18px - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 8px → 11px - padding-right: 10px → 14px - padding-bottom: 8px → 11px - padding-left: 10px → 14px - width: auto → 100% - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-chevron-down lucide-icon] - transform: rotate(180deg) → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [meta-list] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 0.15rem - column-gap: 8px → 0.15rem - grid-template-columns: repeat(3, 1fr) → — - padding-top: 14px → — - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > span [meta-caption] "DIMENSIONS" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > b [meta-value] "1200 × 800 px" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > span [meta-caption] "FORMAT" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > b [meta-value] "PNG-24" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) [meta-row] - display: grid → flex - justify-content: — → space-between - align-items: — → baseline - row-gap: 5px → 1rem - column-gap: 5px → 1rem - padding-top: — → 0.25rem - padding-bottom: — → 0.25rem - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > span [meta-caption] "SIZE" - line-height: — → 1.5 - letter-spacing: — → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > b [meta-value] "1.2 MB" - margin-top: 5px → — - line-height: — → 1.5 - -body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) [icon-btn icon-btn--ghost] - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/" - color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." - max-width: 700px → — - line-height: 1 → 0.9 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1) [step-index] "01" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "BACKGROUND" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [controls] - row-gap: 16px → 0px - column-gap: 16px → 24px - grid-template-columns: 1.1fr 1fr 1.2fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span [swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > svg [lucide lucide-chevron-down lucide-icon] - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "DIRECTION" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label > output "135 °" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 155 → 190 (+35px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label > output "100%" - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.08em → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div [segmented] - display: flex → inline-flex - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(2) [segment selected] "100" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(3) [segment] "75" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(4) [segment] "50" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(1) [segment] "25" - display: — → inline-flex - align-items: — → center - padding-right: — → 0.7rem - padding-left: — → 0.7rem - border-top-width: 0px → medium - background-color: — → transparent - color: rgb(255, 255, 255) → #6d7883 [var(--muted)] - letter-spacing: — → 0.06em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(1) [step-index] "02" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TRANSFORM" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(1) [step-index] "03" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "WIDTH" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "2 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 273.1 → 301.1 (+28px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 8px - column-gap: — → 8px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "COLOR" - align-items: — → baseline - row-gap: — → 8px - column-gap: — → 8px - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [color-field] - row-gap: 8px → 0.4rem - column-gap: 8px → 0.4rem - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span [dark swatch] - width: 14px → 1.6rem - height: 14px → 1.6rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > input - padding-top: — → 0.35rem - padding-right: — → 0.5rem - padding-bottom: — → 0.35rem - padding-left: — → 0.5rem - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) [step-card] - grid-template-columns: 46px 20px 1fr → 46px 1fr - grid-template-rows: — → auto 1fr - min-height: 138px → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(1) [step-index] "04" - padding-bottom: 0px → 6px - line-height: — → 1 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > svg [drag lucide lucide-grip-vertical lucide-icon] - margin-top: 17px → — - color: #cbd3da [var(--line)] → #17212b [var(--foreground)] - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) [step-body] - display: — → flex - flex-direction: — → column - padding-top: 15px → — - padding-right: 18px → — - padding-bottom: 18px → — - padding-left: 18px → — - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] - align-items: center → flex-start - row-gap: 15px → 0.5rem - column-gap: 15px → 0.5rem - padding-top: — → 0.5rem - padding-right: — → 0.75rem - padding-bottom: — → 0.5rem - padding-left: — → 0.75rem - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] - display: — → flex - flex-direction: — → column - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE" - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] - row-gap: 13px → 8px - column-gap: 13px → 8px - -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 - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO" - display: flex → inline-flex - row-gap: 4px → 0.3rem - column-gap: 4px → 0.3rem - padding-top: — → 0.15rem - padding-right: — → 0.45rem - padding-bottom: — → 0.15rem - padding-left: — → 0.45rem - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(35, 131, 84) → #25a96a [var(--success)] - line-height: — → 1.5 - letter-spacing: — → 0.08em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls] - row-gap: 16px → 0px - grid-template-columns: 1fr 1fr → — - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block] - display: — → flex - flex-direction: — → column - row-gap: — → 0px - column-gap: — → 0px - padding-top: — → 10px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "RADIUS" - align-items: — → center - row-gap: — → 0.5rem - column-gap: — → 0.5rem - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "18 px" - letter-spacing: 0.08em → 0.05em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - w: 273.1 → 301.1 (+28px) - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [toggle-row] - display: — → flex - justify-content: — → space-between - align-items: — → center - row-gap: — → 1rem - column-gap: — → 1rem - padding-top: — → 10px - min-width: — → 0px - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "Preserve aspect ratio" - font-size: — → 0.85rem - line-height: — → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button [on toggle] - width: 32px → 2.4rem - height: 18px → 1.3rem - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i [toggle-knob] - position: — → absolute - top: — → 1px - left: — → 1px - width: — → calc(-4px + 1.3rem) - height: — → calc(-4px + 1.3rem) - transform: — → translateX(1.1rem) - background-color: — → rgb(255, 255, 255) - font-size: inherit → 0.85rem - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset-btn] "Reset pipeline" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw] - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] - row-gap: — → 16px - column-gap: — → 16px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div [section-text] - display: — → flex - flex-direction: — → column - row-gap: — → 2px - column-gap: — → 2px - min-width: — → 0px - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span [mono-label] "PROCESSING PIPELINE" - line-height: — → 1.2 - letter-spacing: 0.12em → 0.1em - text-transform: — → uppercase - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button [add-btn] "Add tool" - line-height: inherit → 1.5 - -body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg [lucide lucide-icon lucide-plus] - line-height: inherit → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(2) >svg [lucide lucide-link-2 lucide-link2] - ✗ present in reference, absent in project - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [1440x900] /preview/list-tools (vs list-tools.html) — 123 differences === - -body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [catalog-page] - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - width: 100% → — - max-width: none → — - -body > main > div > div:nth-of-type(1) [catalog-head] - flex-wrap: — → wrap - row-gap: 40px → 1.5rem - column-gap: 40px → 1.5rem - padding-bottom: 42px → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG" - margin-bottom: 18px → 0.5rem - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: 0.12em → 0.18em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" - margin-top: 12px → 0px - margin-bottom: 14px → 0px - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 2rem - font-weight: 650 → 700 - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p "Focused utilities for working with PNG. " - margin-top: 0px → 0.5rem - max-width: 660px → 56ch - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 0.95rem - line-height: — → 1.5 - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) [catalog-total] - flex-direction: — → column - align-items: center → flex-end - row-gap: 14px → — - column-gap: 14px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1 - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b "32" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - letter-spacing: -0.08em → — - text-align: right → — - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span "TOOLS AVAILABLE" - margin-top: — → 0.35rem - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br - letter-spacing: — → 0.08em - -body > main > div > div:nth-of-type(2) [catalog-toolbar] - flex-wrap: — → wrap - row-gap: 24px → 1rem - column-gap: 24px → 1rem - padding-top: 24px → 1.25rem - padding-bottom: 42px → 1.25rem - -body > main > div > div:nth-of-type(2) > label [catalog-search] - display: flex → inline-flex - row-gap: 12px → 0.5rem - column-gap: 12px → 0.5rem - padding-top: 12px → 0.5rem - padding-right: 14px → 0.75rem - padding-bottom: 12px → 0.5rem - padding-left: 14px → 0.75rem - width: min(420px, 100%) → — - -body > main > div > div:nth-of-type(2) > label > input - width: 100% → — - border-top-width: 0px → medium - -body > main > div > div:nth-of-type(2) > div [catalog-filters] - display: flex → inline-flex - row-gap: 6px → 0.4rem - column-gap: 6px → 0.4rem - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1) [active] "ALL" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - background-color: initial → — - color: #1769d2 [var(--blue)] → rgb(255, 255, 255) - letter-spacing: — → 0.06em - -body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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" - padding-top: 8px → 0.4rem - padding-right: 10px → 0.6rem - padding-bottom: 8px → 0.4rem - padding-left: 10px → 0.6rem - 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] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span "CONVERT" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > span "TRANSPARENCY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > span "COLOR" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > span "GEOMETRY" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > i "05 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > span "FILTERS" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group] - display: — → flex - flex-direction: — → column - row-gap: — → 1rem - column-gap: — → 1rem - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) [group-title] - align-items: center → baseline - row-gap: — → 1rem - column-gap: — → 1rem - padding-bottom: 12px → 0.5rem - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > span "ANALYZE" - letter-spacing: 0.12em → 0.14em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > i "04 TOOLS" - letter-spacing: 0.12em → 0.08em - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) [tool-cards] - padding-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 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] - display: grid → flex - flex-direction: — → column - row-gap: 8px → 2px - 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: 0 → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - -body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE" - display: — → flex - flex-wrap: — → wrap - row-gap: — → 1.5rem - column-gap: — → 1.5rem - margin-top: 64px → 56px - padding-top: 20px → 24px - letter-spacing: — → 0.08em - -body > main > div > footer > span "•" - margin-top: 0px → — - margin-right: 8px → — - margin-bottom: 0px → — - margin-left: 8px → — - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.08em - -body >main >footer [preview-footer] - + present in project, absent in reference - -body >div - ✗ present in reference, absent in project - - -=== [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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - display: flex → — - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Gradient background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Create a clean, export-ready gradient wi" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [gradient-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.7fr) minmax(0px, 1.3fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "GRADIENT SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure output" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 01" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "GRADIENT TYPE" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div [segmented wide] - display: flex → — - width: 100% → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1) [selected] "Linear" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2) "Radial" - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR STOPS" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) [color-row] - display: flex → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span [stop-arrow] "→" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) [gradient-bar] - margin-top: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label "DIRECTION" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output "135 °" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div [direction-grid] - display: grid → — - row-gap: 6px → — - column-gap: 6px → — - grid-template-columns: repeat(4, 1fr) → — - margin-top: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1) "0° →" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2) "45° ↗" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3) "90° ↑" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4) [selected] "135° ↖" - padding-top: 8px → — - padding-bottom: 8px → — - color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5) "180° ←" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6) "225° ↙" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7) "270° ↓" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8) "315° ↘" - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label "OPACITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output "100 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "OUTPUT PREVIEW" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "gradient.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [secondary-btn] "Copy CSS" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-top: 8px → — - padding-bottom: 8px → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] - 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(2) [download-btn] "Download PNG" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-chevron-down lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [large-canvas] - padding-top: 24px → — - padding-right: 24px → — - padding-bottom: 24px → — - padding-left: 24px → — - background-color: rgb(32, 42, 49) → — - background-image: linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%) → — - background-size: 28px 28px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div [gradient-art] - display: grid → — - justify-content: center → — - min-height: clamp(420px, 42vw, 680px) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > div [art-mark] "PNG" - display: grid → — - align-items: center → — - margin-bottom: 12px → — - width: 70px → — - height: 70px → — - border-top-width: 1px → — - border-top-style: solid → — - border-top-color: rgba(255, 255, 255, 0.65) → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > span "easy-png-tools" - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [code-block] - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div - display: flex → — - justify-content: space-between → — - align-items: center → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > span [label] "GENERATED CSS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button [icon-btn] - display: grid → — - align-items: center → — - padding-top: 6px → — - padding-bottom: 6px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button > svg [lucide lucide-copy lucide-icon] - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > pre "background: linear-gradient(135deg, #176" - margin-top: 12px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - padding-top: 14px → — - padding-right: 14px → — - padding-bottom: 14px → — - padding-left: 14px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project - - -=== [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] - width: — → auto - height: — → auto - 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] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] - width: — → auto - height: — → auto - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > header > div > div [lang] - display: flex → inline-flex - align-items: center → — - -body > main > header > div > div > span [lang-div] "/" - align-self: — → center - color: #17212b [var(--foreground)] → #6d7883 [var(--muted)] - font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → — - -body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN" - letter-spacing: — → 0.06em - -body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU" - letter-spacing: — → 0.06em - -body > main > header > nav [nav] - row-gap: 22px → 18px - column-gap: 22px → 18px - margin-right: 28px → — - margin-left: auto → 24px - -body > main > header > nav > a:nth-of-type(1) "Workspace" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(2) "Catalog" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(3) "Gradient" - letter-spacing: — → 0.04em - -body > main > header > nav > a:nth-of-type(4) "Background remover" - color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] - letter-spacing: — → 0.04em - -body > main > div [tool-page] - padding-top: 60px → — - padding-right: clamp(24px, 4vw, 72px) → — - padding-bottom: 72px → — - padding-left: clamp(24px, 4vw, 72px) → — - width: 100% → — - -body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL" - margin-bottom: 18px → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(1) > span "/" - margin-top: 0px → — - margin-right: 7px → — - margin-bottom: 0px → — - margin-left: 7px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(2) [tool-title] - display: flex → — - justify-content: space-between → — - align-items: end → — - row-gap: 32px → — - column-gap: 32px → — - margin-bottom: 48px → — - -body > main > div > div:nth-of-type(2) > div > h1 "Remove background." - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 14px → — - margin-left: 0px → — - max-width: 700px → — - font-size: clamp(36px, 4vw, 64px) → 16px - font-weight: 650 → — - line-height: 1 → 1.5 - letter-spacing: -0.06em → — - -body > main > div > div:nth-of-type(2) > div > p [lede] "Select a background color and tune the e" - margin-top: 0px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - max-width: 550px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - line-height: 1.6 → 1.5 - -body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(2) > span > i - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) [remover-layout] - display: grid → — - align-items: start → — - row-gap: 56px → — - column-gap: 56px → — - grid-template-columns: minmax(360px, 0.62fr) minmax(0px, 1.38fr) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "REMOVER SETTINGS" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure detection" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 02" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "BACKGROUND COLOR" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [color-field] - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - padding-right: 8px → — - padding-left: 8px → — - height: 32px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span [swatch] - width: 14px → — - height: 14px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(1) - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(2) [native-color] - padding-top: 0px → — - padding-right: 0px → — - padding-bottom: 0px → — - padding-left: 0px → — - width: 30px → — - min-width: 0px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background" - display: flex → — - justify-content: flex-start → — - row-gap: 8px → — - column-gap: 8px → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span - width: 9px → — - height: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR SIMILARITY" - display: flex → — - justify-content: space-between → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label > output "72 %" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > input - font-size: inherit → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div [range-hints] - display: flex → — - justify-content: space-between → — - margin-top: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(1) "strict edges" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(2) "more removal" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > span "OUTER COLOR ONLY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > b [on toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(4) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > p "Only remove connected background pixels " - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group toggle-group] - padding-top: 22px → — - padding-right: 20px → — - padding-bottom: 22px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label - display: flex → — - justify-content: space-between → — - align-items: center → — - margin-bottom: 12px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > span "SHOW MASK" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > b [toggle] - position: relative → — - width: 32px → — - height: 18px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.1em → — - -body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(5) >label >input - ✗ present in reference, absent in project - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > p "Preview the detected transparency mask." - margin-top: 8px → — - margin-right: 0px → — - margin-bottom: 0px → — - margin-left: 0px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-size: 12px → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - background-color: initial → — - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-size: 12px → 16px - line-height: inherit → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" - display: flex → — - align-items: center → — - row-gap: 8px → — - column-gap: 8px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - display: inline-block → — - width: 6px → — - height: 6px → — - background-color: rgb(37, 169, 106) → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [remover-preview] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] - display: flex → — - justify-content: space-between → — - align-items: center → — - padding-top: 18px → — - padding-right: 20px → — - padding-bottom: 18px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "SOURCE / RESULT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - letter-spacing: 0.12em → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "comparison.png" - display: block → — - margin-top: 5px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] - display: flex → — - flex-wrap: wrap → — - justify-content: flex-end → — - align-items: center → — - row-gap: 10px → — - column-gap: 10px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [processed] "processed" - display: flex → — - align-items: center → — - row-gap: 5px → — - column-gap: 5px → — - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] - color: rgb(37, 169, 106) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [download-btn] "Download result" - display: flex → — - justify-content: center → — - align-items: center → — - row-gap: 9px → — - column-gap: 9px → — - margin-top: 18px → — - width: 100% → — - height: 42px → — - border-top-width: 0px → — - border-top-style: none → — - border-top-color: currentcolor → — - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-download lucide-icon] - color: rgb(255, 255, 255) → #17212b [var(--foreground)] - font-family: — → inherit - font-size: — → 16px - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [comparison-grid] - display: grid → — - row-gap: 18px → — - column-gap: 18px → — - grid-template-columns: repeat(2, minmax(0px, 1fr)) → — - padding-top: 20px → — - padding-right: 20px → — - padding-bottom: 20px → — - padding-left: 20px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span "SOURCE" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > b "original.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [remover-canvas source-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - background-color: rgb(232, 238, 242) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [subject subject-source] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - transform: rotate(-3deg) → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > span "OBJECT" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [image-card] - min-width: 0px → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-label] - display: flex → — - justify-content: space-between → — - margin-bottom: 10px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > span "RESULT" - color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > b "removed-bg.png" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 400 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [remover-canvas] - display: grid → — - position: relative → — - align-items: center → — - min-height: clamp(360px, 30vw, 560px) → — - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [subject] - display: grid → — - align-items: center → — - width: 74% → — - height: 68% → — - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span "PNG" - color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - position: absolute → — - right: 10px → — - bottom: 9px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [result-meta] - display: flex → — - row-gap: 24px → — - column-gap: 24px → — - padding-top: 16px → — - padding-right: 20px → — - padding-bottom: 16px → — - padding-left: 20px → — - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) "FORMAT" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) > b "PNG-24" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) "ALPHA" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) > b "ENABLED" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) "SIMILARITY" - color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - line-height: — → 1.5 - -body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) > b "72 %" - margin-left: 6px → — - font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] - font-size: — → 16px - font-weight: 600 → — - line-height: — → 1.5 - -body > main > footer [preview-footer] - row-gap: — → 1rem - column-gap: — → 1rem - padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) "easy-png-tools" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" - font-weight: 400 → — - letter-spacing: — → 0.08em - -body > main > footer > span:nth-of-type(2) "© 2024" - display: flex → — - align-items: center → — - row-gap: 7px → — - column-gap: 7px → — - letter-spacing: — → 0.08em - -body >main >footer >span:nth-of-type(3) "© 2024" - ✗ present in reference, absent in project - -body >div - ✗ present in reference, absent in project diff --git a/web/package.json b/web/package.json index 2eb7a86..9098ca7 100644 --- a/web/package.json +++ b/web/package.json @@ -14,6 +14,7 @@ "format": "prettier --write .", "lint": "eslint .", "refs-cdp-audit": "node scripts/audit-cdp.mjs", + "refs-cdp-audit:large": "node scripts/audit-cdp.mjs --viewport 2560x1440", "refs-cdp-audit:responsive": "node scripts/audit-cdp-responsive.mjs", "refs-css-audit": "node scripts/audit-css.mjs", "refs-dom-audit": "node scripts/audit-dom.mjs" diff --git a/web/src/lib/components/kit/IconButton.svelte b/web/src/lib/components/kit/IconButton.svelte index 9f1b3fd..93daf79 100644 --- a/web/src/lib/components/kit/IconButton.svelte +++ b/web/src/lib/components/kit/IconButton.svelte @@ -33,16 +33,15 @@ diff --git a/web/src/lib/components/kit/TopBar.svelte b/web/src/lib/components/kit/TopBar.svelte index 7991839..6e4b3b9 100644 --- a/web/src/lib/components/kit/TopBar.svelte +++ b/web/src/lib/components/kit/TopBar.svelte @@ -1,8 +1,8 @@ -
- - EP - easy-png-tools - {#if crumb}{crumb}{/if} - - -
+
+ + EP + easy-png-tools + {#if crumb}{crumb}{/if} + + +
{status} {}} @@ -61,9 +63,6 @@