diff --git a/package.json b/package.json index 9311346..9c2bbed 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", - "dom-audit": "pnpm --dir web refs-dom-audit" + "cdp-audit": "pnpm --dir web refs-cdp-audit:responsive" }, "keywords": [], "author": "Ku6epXBOCTuK", diff --git a/web/audit/cdp-audit-1440x900.txt b/web/audit/cdp-audit-1440x900.txt new file mode 100644 index 0000000..18ad9bf --- /dev/null +++ b/web/audit/cdp-audit-1440x900.txt @@ -0,0 +1,3194 @@ +CDP visual audit +2026-08-30T14:39:15.774Z +viewport 1440x900, tolerance 1px, theme light + +=== [1440x900] /preview/demo (vs demo.html) — 173 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [ws] + 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] + display: grid → inline-flex + justify-content: — → center + padding-top: 6px → — + padding-bottom: 6px → — + width: — → 2rem + height: — → 2rem + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) > svg [lucide lucide-icon lucide-settings-2] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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) [title-row] + align-items: center → flex-end + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." + 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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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(5) > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] + 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) — 126 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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 + 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 + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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) — 92 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — + +body > main > div > div:nth-of-type(1) > span "/" + 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 → — + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download PNG" + 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) — 100 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — + +body > main > div > div:nth-of-type(1) > span "/" + 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: space-between → — + row-gap: 8px → — + column-gap: 8px → — + margin-top: 10px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span + 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 new file mode 100644 index 0000000..17c2b7d --- /dev/null +++ b/web/audit/cdp-audit-1920x1080.txt @@ -0,0 +1,3194 @@ +CDP visual audit +2026-08-30T14:39:15.772Z +viewport 1920x1080, tolerance 1px, theme light + +=== [1920x1080] /preview/demo (vs demo.html) — 173 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [ws] + 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] + display: grid → inline-flex + justify-content: — → center + padding-top: 6px → — + padding-bottom: 6px → — + width: — → 2rem + height: — → 2rem + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) > svg [lucide lucide-icon lucide-settings-2] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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) [title-row] + align-items: center → flex-end + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." + 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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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(5) > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] + 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) — 126 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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 + 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 + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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) — 92 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — + +body > main > div > div:nth-of-type(1) > span "/" + 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 → — + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download PNG" + 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) — 100 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — + +body > main > div > div:nth-of-type(1) > span "/" + 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: space-between → — + row-gap: 8px → — + column-gap: 8px → — + margin-top: 10px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span + 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 new file mode 100644 index 0000000..34542a1 --- /dev/null +++ b/web/audit/cdp-audit-2560x1440.txt @@ -0,0 +1,3194 @@ +CDP visual audit +2026-08-30T14:39:15.766Z +viewport 2560x1440, tolerance 1px, theme light + +=== [2560x1440] /preview/demo (vs demo.html) — 173 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [ws] + 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] + display: grid → inline-flex + justify-content: — → center + padding-top: 6px → — + padding-bottom: 6px → — + width: — → 2rem + height: — → 2rem + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) > svg [lucide lucide-icon lucide-settings-2] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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) [title-row] + align-items: center → flex-end + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." + 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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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(5) > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] + 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) — 126 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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 + 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 + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + +body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy] + 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: 1 → — + 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) — 92 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — + +body > main > div > div:nth-of-type(1) > span "/" + 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 → — + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download PNG" + 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) — 100 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + +body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — + +body > main > div > div:nth-of-type(1) > span "/" + 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: space-between → — + row-gap: 8px → — + column-gap: 8px → — + margin-top: 10px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span + 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 new file mode 100644 index 0000000..6ea3f82 --- /dev/null +++ b/web/audit/cdp-audit-390x844.txt @@ -0,0 +1,3297 @@ +CDP visual audit +2026-08-30T14:39:15.778Z +viewport 390x844, tolerance 1px, theme light + +=== [390x844] /preview/demo (vs demo.html) — 174 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + 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 > a > span:nth-of-type(3) [version] "/ WORKSPACE" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + display: — → inline-block + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [ws] + 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] + display: grid → inline-flex + justify-content: — → center + padding-top: 6px → — + padding-bottom: 6px → — + width: — → 2rem + height: — → 2rem + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) > svg [lucide lucide-icon lucide-settings-2] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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) [title-row] + align-items: center → flex-end + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." + 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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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(5) > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] + 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) — 155 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + 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 > a > span:nth-of-type(3) [version] "/ CATALOG" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + display: — → inline-block + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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 + 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 + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group] + 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) — 93 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + 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 > a > span:nth-of-type(3) [version] "/ GRADIENT" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + display: — → inline-block + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — + +body > main > div > div:nth-of-type(1) > span "/" + 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 → — + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download PNG" + 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) — 101 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + 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 > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + display: — → inline-block + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — + +body > main > div > div:nth-of-type(1) > span "/" + 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: space-between → — + row-gap: 8px → — + column-gap: 8px → — + margin-top: 10px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span + 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 new file mode 100644 index 0000000..6fe3090 --- /dev/null +++ b/web/audit/cdp-audit-768x1024.txt @@ -0,0 +1,3297 @@ +CDP visual audit +2026-08-30T14:39:15.776Z +viewport 768x1024, tolerance 1px, theme light + +=== [768x1024] /preview/demo (vs demo.html) — 174 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + 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 > a > span:nth-of-type(3) [version] "/ WORKSPACE" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + display: — → inline-block + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [ws] + 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] + display: grid → inline-flex + justify-content: — → center + padding-top: 6px → — + padding-bottom: 6px → — + width: — → 2rem + height: — → 2rem + border-top-width: 0px → — + border-top-style: none → — + border-top-color: currentcolor → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) > svg [lucide lucide-icon lucide-settings-2] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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) [title-row] + align-items: center → flex-end + +body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." + 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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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 + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x] + color: #6d7883 [var(--muted)] → #e5484d [var(--danger)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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(5) > span > i [status-dot] + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label] + 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) — 155 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + h: 79 → 64 (-15px) + +body > main > header > a > span:nth-of-type(1) [brand-mark] "EP" + w: 30 → 15 (-15px) + +body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + display: — → inline-block + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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 + 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 + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE" + padding-top: 8px → 0.4rem + padding-right: 10px → 0.6rem + padding-bottom: 8px → 0.4rem + padding-left: 10px → 0.6rem + color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] + letter-spacing: — → 0.06em + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group] + 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) — 93 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + 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 > a > span:nth-of-type(3) [version] "/ GRADIENT" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + display: — → inline-block + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — + +body > main > div > div:nth-of-type(1) > span "/" + 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 → — + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon] + color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] + font-family: — → inherit + font-size: — → 16px + +body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download PNG" + 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) — 101 differences === + +body > main > header [topbar] + position: — → sticky + top: — → 0px + z-index: — → 20 + 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 > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER" + color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] + +body > main > header > div > span > i [status-dot] + display: — → inline-block + width: 6px → 8px + height: 6px → 8px + box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] + +body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] + display: grid → inline-flex + justify-content: — → center + width: — → auto + height: — → auto + border-top-color: currentcolor → transparent + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-size: inherit → 16px + line-height: inherit → 1.5 + +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" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(2) "Catalog" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(3) "Gradient" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > header > nav > a:nth-of-type(4) "Background remover" + color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] + letter-spacing: — → 0.04em + +body > main > div [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: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + letter-spacing: 0.12em → — + +body > main > div > div:nth-of-type(1) > span "/" + 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: space-between → — + row-gap: 8px → — + column-gap: 8px → — + margin-top: 10px → — + color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] + font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] + font-size: — → 16px + line-height: — → 1.5 + +body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span + 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 index 06dcf34..87ed10a 100644 --- a/web/audit/cdp-audit.txt +++ b/web/audit/cdp-audit.txt @@ -1,8 +1,8 @@ CDP visual audit -2026-08-30T06:21:12.002Z +2026-08-30T09:31:56.937Z viewport 1440x900, tolerance 1px, theme light -=== /preview/demo (vs demo.html) — 173 differences === +=== [1440x900] /preview/demo (vs demo.html) — 173 differences === body > main > header [topbar] position: — → sticky @@ -13,8 +13,6 @@ body > main > header > a > span:nth-of-type(3) [version] "/ WORKSPACE" color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] body > main > header > div > span > i [status-dot] - w: 6 → 8 (+2px) - h: 6 → 8 (+2px) width: 6px → 8px height: 6px → 8px box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] @@ -99,7 +97,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) [preview-stack] min-width: 0px → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [preview-tile] - w: 276.3 → 564.7 (+288.4px) display: — → flex flex-direction: — → column row-gap: — → 0.3rem @@ -112,7 +109,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ 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] - w: 274.3 → 549.9 (+275.6px) display: grid → — align-items: center → — padding-top: 16px → — @@ -127,9 +123,9 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ 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] - w: 193.9 → 439.9 (+246px) 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 @@ -152,7 +148,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ text-align: right → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [preview-tile] - w: 276.3 → 564.7 (+288.4px) display: — → flex flex-direction: — → column row-gap: — → 0.3rem @@ -165,7 +160,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ 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] - w: 274.3 → 549.9 (+275.6px) display: grid → — align-items: center → — padding-top: 16px → — @@ -180,9 +174,9 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ 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] - w: 193.9 → 439.9 (+246px) 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 @@ -205,7 +199,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ text-align: right → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [preview-tile] - w: 276.3 → 564.7 (+288.4px) display: — → flex flex-direction: — → column row-gap: — → 0.3rem @@ -218,7 +211,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ 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] - w: 274.3 → 549.9 (+275.6px) display: grid → — align-items: center → — padding-top: 16px → — @@ -233,9 +225,9 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ 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] - w: 193.9 → 439.9 (+246px) 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 @@ -258,7 +250,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ text-align: right → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) [preview-tile] - w: 276.3 → 564.7 (+288.4px) display: — → flex flex-direction: — → column row-gap: — → 0.3rem @@ -271,7 +262,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ 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] - w: 274.3 → 549.9 (+275.6px) display: grid → — align-items: center → — padding-top: 16px → — @@ -286,9 +276,9 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ 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] - w: 193.9 → 439.9 (+246px) 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 @@ -311,7 +301,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ text-align: right → — body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) [preview-tile] - w: 276.3 → 564.7 (+288.4px) display: — → flex flex-direction: — → column row-gap: — → 0.3rem @@ -324,7 +313,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ 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] - w: 274.3 → 549.9 (+275.6px) display: grid → — align-items: center → — padding-top: 16px → — @@ -339,9 +327,9 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-typ 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] - w: 193.9 → 439.9 (+246px) 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 @@ -381,8 +369,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ 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" - w: 478.1 → 191.2 (-286.9px) - h: 42 → 36 (-6px) display: flex → inline-flex justify-content: center → — row-gap: 9px → 8px @@ -406,7 +392,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ 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" - w: 145.3 → 456.2 (+310.9px) margin-top: 0px → 18px margin-right: 0px → — margin-bottom: 0px → — @@ -483,8 +468,6 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ line-height: — → 1.5 body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) [icon-btn icon-btn--ghost] - w: 29 → 32 (+3px) - h: 29 → 32 (+3px) display: grid → inline-flex justify-content: — → center padding-top: 6px → — @@ -608,7 +591,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of 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] - h: 32 → 27.2 (-4.8px) row-gap: 8px → 0.4rem column-gap: 8px → 0.4rem padding-right: 8px → — @@ -616,8 +598,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of 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] - w: 14 → 25.6 (+11.6px) - h: 14 → 25.6 (+11.6px) width: 14px → 1.6rem height: 14px → 1.6rem @@ -655,9 +635,9 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of 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 - w: 155 → 190 (+35px) 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 @@ -896,9 +876,9 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of 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 - w: 273.1 → 301.1 (+28px) 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 @@ -916,7 +896,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of 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] - h: 32 → 27.2 (-4.8px) row-gap: 8px → 0.4rem column-gap: 8px → 0.4rem padding-right: 8px → — @@ -924,8 +903,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of 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] - w: 14 → 25.6 (+11.6px) - h: 14 → 25.6 (+11.6px) width: 14px → 1.6rem height: 14px → 1.6rem @@ -1038,9 +1015,9 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of 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 - w: 273.1 → 301.1 (+28px) 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 @@ -1058,18 +1035,12 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of 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] - w: 32 → 38.4 (+6.4px) - h: 18 → 20.8 (+2.8px) width: 32px → 2.4rem height: 18px → 1.3rem font-size: inherit → 0.85rem line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i [toggle-knob] - x: 603.3 → 703.9 (+100.6px) - y: 1027.4 → 951.6 (-75.8px) - w: 0 → 16.8 (+16.8px) - h: 0 → 16.8 (+16.8px) position: — → absolute top: — → 1px left: — → 1px @@ -1087,8 +1058,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i [status-dot] - w: 6 → 8 (+2px) - h: 6 → 8 (+2px) width: 6px → 8px height: 6px → 8px box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] @@ -1150,7 +1119,7 @@ body >div ✗ present in reference, absent in project -=== /preview/list-tools (vs list-tools.html) — 126 differences === +=== [1440x900] /preview/list-tools (vs list-tools.html) — 126 differences === body > main > header [topbar] position: — → sticky @@ -1161,8 +1130,6 @@ body > main > header > a > span:nth-of-type(3) [version] "/ CATALOG" color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] body > main > header > div > span > i [status-dot] - w: 6 → 8 (+2px) - h: 6 → 8 (+2px) width: 6px → 8px height: 6px → 8px box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] @@ -1299,7 +1266,6 @@ body > main > div > div:nth-of-type(2) [catalog-toolbar] padding-bottom: 42px → 1.25rem body > main > div > div:nth-of-type(2) > label [catalog-search] - w: 420 → 202 (-218px) display: flex → inline-flex row-gap: 12px → 0.5rem column-gap: 12px → 0.5rem @@ -1310,7 +1276,6 @@ body > main > div > div:nth-of-type(2) > label [catalog-search] width: min(420px, 100%) → — body > main > div > div:nth-of-type(2) > label > input - w: 363.1 → 152 (-211.1px) width: 100% → — border-top-width: 0px → medium @@ -1836,7 +1801,7 @@ body >div ✗ present in reference, absent in project -=== /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences === +=== [1440x900] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences === body > main > header [topbar] position: — → sticky @@ -1847,8 +1812,6 @@ body > main > header > a > span:nth-of-type(3) [version] "/ GRADIENT" color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] body > main > header > div > span > i [status-dot] - w: 6 → 8 (+2px) - h: 6 → 8 (+2px) width: 6px → 8px height: 6px → 8px box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] @@ -1985,8 +1948,6 @@ body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" line-height: — → 1.5 body > main > div > div:nth-of-type(2) > span > i - w: 6 → 0 (-6px) - h: 6 → 20 (+14px) width: 6px → — height: 6px → — background-color: rgb(37, 169, 106) → — @@ -2049,8 +2010,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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] - w: 402.1 → 1440 (+1037.9px) - h: 32 → 25 (-7px) display: flex → — width: 100% → — height: 32px → — @@ -2095,7 +2054,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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] - h: 32 → 25 (-7px) display: flex → — align-items: center → — row-gap: 8px → — @@ -2105,8 +2063,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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] - w: 14 → 0 (-14px) - h: 14 → 20 (+6px) width: 14px → — height: 14px → — @@ -2123,7 +2079,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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] - h: 32 → 25 (-7px) display: flex → — align-items: center → — row-gap: 8px → — @@ -2133,8 +2088,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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] - w: 14 → 0 (-14px) - h: 14 → 20 (+6px) width: 14px → — height: 14px → — @@ -2148,7 +2101,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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] - h: 14 → 0 (-14px) margin-top: 14px → — height: 14px → — @@ -2314,8 +2266,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - w: 6 → 0 (-6px) - h: 6 → 20 (+14px) display: inline-block → — width: 6px → — height: 6px → — @@ -2373,8 +2323,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ 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" - w: 210.6 → 141.3 (-69.3px) - h: 42 → 25 (-17px) display: flex → — justify-content: center → — align-items: center → — @@ -2419,8 +2367,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ 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" - w: 70 → 1440 (+1370px) - h: 70 → 24 (-46px) display: grid → — align-items: center → — margin-bottom: 12px → — @@ -2521,7 +2467,7 @@ body >div ✗ present in reference, absent in project -=== /preview/tools/remove-background-png (vs background-remover.html) — 100 differences === +=== [1440x900] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences === body > main > header [topbar] position: — → sticky @@ -2532,8 +2478,6 @@ body > main > header > a > span:nth-of-type(3) [version] "/ BACKGROUND REMOVER color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] body > main > header > div > span > i [status-dot] - w: 6 → 8 (+2px) - h: 6 → 8 (+2px) width: 6px → 8px height: 6px → 8px box-shadow: — → 0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)] @@ -2670,8 +2614,6 @@ body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" line-height: — → 1.5 body > main > div > div:nth-of-type(2) > span > i - w: 6 → 0 (-6px) - h: 6 → 20 (+14px) width: 6px → — height: 6px → — background-color: rgb(37, 169, 106) → — @@ -2734,7 +2676,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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] - h: 32 → 28 (-4px) display: flex → — align-items: center → — row-gap: 8px → — @@ -2744,8 +2685,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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] - w: 14 → 0 (-14px) - h: 14 → 20 (+6px) width: 14px → — height: 14px → — @@ -2759,7 +2698,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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] - w: 151.7 → 50 (-101.7px) padding-top: 0px → — padding-right: 0px → — padding-bottom: 0px → — @@ -2785,8 +2723,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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 - w: 9 → 0 (-9px) - h: 9 → 20 (+11px) width: 9px → — height: 9px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] @@ -2867,8 +2803,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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] - w: 32 → 0 (-32px) - h: 18 → 20 (+2px) position: relative → — width: 32px → — height: 18px → — @@ -2914,8 +2848,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ 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] - w: 32 → 0 (-32px) - h: 18 → 20 (+2px) position: relative → — width: 32px → — height: 18px → — @@ -2974,8 +2906,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i - w: 6 → 0 (-6px) - h: 6 → 20 (+14px) display: inline-block → — width: 6px → — height: 6px → — @@ -3036,8 +2966,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ 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" - w: 193.2 → 131.8 (-61.4px) - h: 42 → 25 (-17px) display: flex → — justify-content: center → — align-items: center → — @@ -3101,8 +3029,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ 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] - w: 315.1 → 1440 (+1124.9px) - h: 307.7 → 24 (-283.7px) display: grid → — align-items: center → — width: 74% → — @@ -3120,8 +3046,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - x: 875.2 → 0 (-875.2px) - y: 900.8 → 698.9 (-201.9px) position: absolute → — right: 10px → — bottom: 9px → — @@ -3162,8 +3086,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ 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] - w: 300.3 → 1440 (+1139.7px) - h: 292.4 → 24 (-268.4px) display: grid → — align-items: center → — width: 74% → — @@ -3180,8 +3102,6 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-typ line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" - x: 1300.9 → 0 (-1300.9px) - y: 900.8 → 770.9 (-129.9px) position: absolute → — right: 10px → — bottom: 9px → — diff --git a/web/package.json b/web/package.json index 837ffe5..2eb7a86 100644 --- a/web/package.json +++ b/web/package.json @@ -13,7 +13,8 @@ "test": "vitest run", "format": "prettier --write .", "lint": "eslint .", - "refs-cdp-audit": "node scripts/audit-cdp.mjs http://localhost:3000/demo.html http://localhost:5173/preview/demo", + "refs-cdp-audit": "node scripts/audit-cdp.mjs", + "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/scripts/audit-cdp-responsive.mjs b/web/scripts/audit-cdp-responsive.mjs new file mode 100644 index 0000000..74ea8ac --- /dev/null +++ b/web/scripts/audit-cdp-responsive.mjs @@ -0,0 +1,26 @@ +// Runs audit-cdp.mjs across the commonly used desktop / tablet / phone +// resolutions. Same CLI options pass through, e.g.: +// node scripts/audit-cdp-responsive.mjs --route /preview/demo --viewport 390x844 +import { spawnSync } from "node:child_process"; + +const VIEWPORTS = ["2560x1440", "1920x1080", "1440x900", "768x1024", "390x844"]; + +const args = []; +let viewportSeen = false; +for (let i = 0; i < process.argv.length; i++) { + const v = process.argv[i]; + if (v === "--viewport") { + viewportSeen = true; + i++; + } else args.push(v); +} +if (!viewportSeen) args.push("--viewport", VIEWPORTS.join(",")); + +const r = spawnSync(process.execPath, ["scripts/audit-cdp.mjs", ...args.slice(2)], { + stdio: "inherit", +}); +if (r.error) { + console.error(r.error.message); + process.exit(1); +} +process.exit(r.status ?? 1); \ No newline at end of file diff --git a/web/scripts/audit-cdp.mjs b/web/scripts/audit-cdp.mjs index efd4c03..1f51392 100644 --- a/web/scripts/audit-cdp.mjs +++ b/web/scripts/audit-cdp.mjs @@ -20,7 +20,7 @@ import { writeFileSync, mkdirSync, readdirSync } from "node:fs"; import { resolve, join } from "node:path"; const argv = (() => { - const a = {}; + const a = { viewports: [] }; for (let i = 0; i < process.argv.length; i++) { const v = process.argv[i]; if (v === "--no-serve") a.noServe = true; @@ -28,6 +28,10 @@ const argv = (() => { else if (v === "--ref") a.ref = process.argv[++i]; else if (v === "--route") a.route = process.argv[++i]; else if (v === "--port") a.port = Number(process.argv[++i]); + else if (v === "--viewport") + a.viewports.push( + ...(process.argv[++i] ?? "").split(",").filter(Boolean), + ); } return a; })(); @@ -37,6 +41,35 @@ const PORT = argv.port || 5179; const REFS_DIR = resolve(WEB, "../refs-html"); const PX_TOL = 1; +// Requested viewports; repeatable/comma-separated "--viewport WxH". +// Deduplicated, preserves order. Defaults to 1440x900 when the flag is absent. +const viewports = (() => { + const raw = argv.viewports.length ? argv.viewports : ["1440x900"]; + const out = []; + for (const s of raw) { + const m = /^(\d+)x(\d+)$/.exec(s.trim()); + if (!m) { + console.error(`[cdp-audit] invalid viewport: ${s} (expected "WxH")`); + process.exit(1); + } + const vp = { width: +m[1], height: +m[2] }; + if (!out.some((o) => o.width === vp.width && o.height === vp.height)) + out.push(vp); + } + return out; +})(); +const vpLabel = (vp) => `${vp.width}x${vp.height}`; + +// Explicit --viewport means per-resolution files; default run keeps the +// backward-compatible single cdp-audit.txt name. +const perResFile = argv.viewports.length > 0; +const reportPath = (vp) => + resolve( + WEB, + "audit", + perResFile ? `cdp-audit-${vpLabel(vp)}.txt` : "cdp-audit.txt", + ); + const PROPS = [ "display", "position", @@ -98,13 +131,11 @@ const PROPS = [ // --- capture: open a page and snapshot its tree via getComputedStyle --- -async function capture(browser, target) { +async function capture(browser, target, viewport) { const url = target.startsWith("http") ? target : "file:///" + target.replace(/\\/g, "/"); - const page = await browser.newPage({ - viewport: { width: 1440, height: 900 }, - }); + const page = await browser.newPage({ viewport }); await page.goto(url, { waitUntil: "networkidle" }); await page.evaluate(async () => { await document.fonts.ready; @@ -663,14 +694,7 @@ function diffStyles(a, b) { `render: node is rendered only on one side ` + `(no layout box — usually display:none on one side)`, ); - if (a.box && b.box) - for (const k of ["x", "y", "w", "h"]) { - const d = +(b.box[k] - a.box[k]).toFixed(1); - if (Math.abs(d) > PX_TOL && !(flowDriven(a, k) && flowDriven(b, k))) - out.push( - `${k}: ${a.box[k]} → ${b.box[k]} (${d > 0 ? "+" : ""}${d}px)`, - ); - } + // If a side is declared via CSS variables, append the raw declaration so // the defining rule is easy to find (e.g. "color: var(--accent)"). const fmtSide = (n, k) => { @@ -680,6 +704,9 @@ function diffStyles(a, b) { return `${res || "—"} [${r}]`; return res; }; + // Which style props were already reported as diffs — box axes governed by + // them are redundant then. + const styleDiffKeys = new Set(); for (const k of new Set([ ...Object.keys(a.styles), ...Object.keys(b.styles), @@ -697,8 +724,31 @@ function diffStyles(a, b) { ) continue; out.push(`${k}: ${fmtSide(a, k) || "—"} → ${fmtSide(b, k) || "—"}`); + styleDiffKeys.add(k); } } + + // Box axes map to style props: w→width, h→height, x→left/right, y→top/bottom. + // If the corresponding style diff is already above, the geometry line is a + // duplicate — drop it. Keep geometry only for changes the styles don't + // explain (e.g. different border/padding with the same declared width). + if (a.box && b.box) + for (const k of ["x", "y", "w", "h"]) { + const gov = + k === "w" + ? ["width"] + : k === "h" + ? ["height"] + : k === "x" + ? ["left", "right"] + : ["top", "bottom"]; + if (gov.some((p) => styleDiffKeys.has(p))) continue; + const d = +(b.box[k] - a.box[k]).toFixed(1); + if (Math.abs(d) > PX_TOL && !(flowDriven(a, k) && flowDriven(b, k))) + out.push( + `${k}: ${a.box[k]} → ${b.box[k]} (${d > 0 ? "+" : ""}${d}px)`, + ); + } return out; } @@ -861,16 +911,16 @@ const waitFor = async (url, ms = 60000) => { throw new Error("dev server not up: " + url); }; -async function auditOne(browser, target) { +async function auditOne(browser, target, viewport) { const oursUrl = argv.ours || `http://127.0.0.1:${PORT}${target.route}`; const refUrl = resolve(REFS_DIR, target.ref); - const ours = await capture(browser, oursUrl); - const ref = await capture(browser, refUrl); + const ours = await capture(browser, oursUrl, viewport); + const ref = await capture(browser, refUrl, viewport); const report = []; compare(ref, ours, ["body"], report); - return { route: target.route, ref: target.ref, lines: report }; + return { route: target.route, ref: target.ref, viewport, lines: report }; } async function main() { @@ -896,15 +946,19 @@ async function main() { const browser = await chromium.launch(); const reports = []; try { - for (const target of targets) { - try { - const rep = await auditOne(browser, target); - reports.push(rep); - console.log( - `[cdp-audit] ${rep.route} (vs ${rep.ref}): ${rep.lines.length} differences`, - ); - } catch (e) { - console.error(`[cdp-audit] ${target.route} failed: ${e.message}`); + for (const vp of viewports) { + for (const target of targets) { + try { + const rep = await auditOne(browser, target, vp); + reports.push(rep); + console.log( + `[cdp-audit] [${vpLabel(vp)}] ${rep.route} (vs ${rep.ref}): ${rep.lines.length} differences`, + ); + } catch (e) { + console.error( + `[cdp-audit] [${vpLabel(vp)}] ${target.route} failed: ${e.message}`, + ); + } } } } finally { @@ -920,22 +974,26 @@ async function main() { } } - const header = - `CDP visual audit\n${new Date().toISOString()}\n` + - `viewport 1440x900, tolerance ${PX_TOL}px, theme light\n\n`; - const body = reports - .map((r) => { - const title = `=== ${r.route} (vs ${r.ref}) — ${r.lines.length} differences ===`; - if (!r.lines.length) return title + "\n ✅ no differences found"; - return title + "\n\n" + r.lines.join("\n\n"); - }) - .join("\n\n\n"); - const outDir = resolve(WEB, "audit"); mkdirSync(outDir, { recursive: true }); - const outPath = resolve(outDir, "cdp-audit.txt"); - writeFileSync(outPath, header + body + "\n", "utf8"); - console.log(`report: web/audit/cdp-audit.txt`); + for (const vp of viewports) { + const vReps = reports.filter( + (r) => r.viewport.width === vp.width && r.viewport.height === vp.height, + ); + const header = + `CDP visual audit\n${new Date().toISOString()}\n` + + `viewport ${vpLabel(vp)}, tolerance ${PX_TOL}px, theme light\n\n`; + const body = vReps + .map((r) => { + const title = `=== [${vpLabel(vp)}] ${r.route} (vs ${r.ref}) — ${r.lines.length} differences ===`; + if (!r.lines.length) return title + "\n ✅ no differences found"; + return title + "\n\n" + r.lines.join("\n\n"); + }) + .join("\n\n\n"); + const outPath = reportPath(vp); + writeFileSync(outPath, header + body + "\n", "utf8"); + console.log(`report: ${outPath}`); + } } main().catch((e) => {