CDP visual audit 2026-08-30T16:17:42.059Z viewport 1440x900, tolerance 1px, theme light === [1440x900] /preview/demo (vs demo.html) — 169 differences === body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] display: grid → inline-flex justify-content: — → center width: — → auto height: — → auto border-top-color: currentcolor → transparent color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] display: grid → inline-flex justify-content: — → center width: — → auto height: — → auto border-top-color: currentcolor → transparent color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 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) [eyebrow] "PNG PROCESSING WORKSPACE" color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/" color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)] body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline." max-width: 700px → — line-height: 1 → 0.9 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) [step-card] grid-template-columns: 46px 20px 1fr → 46px 1fr grid-template-rows: — → auto 1fr min-height: 138px → — body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1) [step-index] "01" padding-bottom: 0px → 6px line-height: — → 1 body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg [drag lucide lucide-grip-vertical lucide-icon] margin-top: 17px → — color: #cbd3da [var(--line)] → #17212b [var(--foreground)] body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) [step-body] display: — → flex flex-direction: — → column padding-top: 15px → — padding-right: 18px → — padding-bottom: 18px → — padding-left: 18px → — min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading] align-items: center → flex-start row-gap: 15px → 0.5rem column-gap: 15px → 0.5rem padding-top: — → 0.5rem padding-right: — → 0.75rem padding-bottom: — → 0.5rem padding-left: — → 0.75rem body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text] display: — → flex flex-direction: — → column min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "BACKGROUND" text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools] row-gap: 13px → 8px column-gap: 13px → 8px body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove] display: — → inline-flex border-top-width: 0px → medium 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(3) [section-label] row-gap: — → 16px column-gap: — → 16px body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div [section-text] display: — → flex flex-direction: — → column row-gap: — → 2px column-gap: — → 2px min-width: — → 0px body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span [mono-label] "PROCESSING PIPELINE" line-height: — → 1.2 letter-spacing: 0.12em → 0.1em text-transform: — → uppercase body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button [add-btn] "Add tool" line-height: inherit → 1.5 body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg [lucide lucide-icon lucide-plus] line-height: inherit → 1.5 body > main > footer [preview-footer] row-gap: — → 1rem column-gap: — → 1rem padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(1) "easy-png-tools" display: flex → — align-items: center → — row-gap: 7px → — column-gap: 7px → — letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" font-weight: 400 → — letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(2) "© 2024" display: flex → — align-items: center → — row-gap: 7px → — column-gap: 7px → — letter-spacing: — → 0.08em body >main >footer >span:nth-of-type(2) >svg [lucide lucide-link-2 lucide-link2] ✗ present in reference, absent in project body >main >footer >span:nth-of-type(3) "© 2024" ✗ present in reference, absent in project body >div ✗ present in reference, absent in project === [1440x900] /preview/list-tools (vs list-tools.html) — 123 differences === body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] 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 color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)] letter-spacing: 0.12em → 0.18em body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog" margin-top: 12px → 0px margin-bottom: 14px → 0px max-width: 700px → — font-size: clamp(36px, 4vw, 64px) → 2rem font-weight: 650 → 700 line-height: 1 → 1.5 letter-spacing: -0.06em → — body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p "Focused utilities for working with PNG. " margin-top: 0px → 0.5rem max-width: 660px → 56ch font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 0.95rem line-height: — → 1.5 body > main > div > div:nth-of-type(1) > div:nth-of-type(2) [catalog-total] flex-direction: — → column align-items: center → flex-end row-gap: 14px → — column-gap: 14px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1 text-align: right → — body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b "32" color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] letter-spacing: -0.08em → — text-align: right → — body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span "TOOLS AVAILABLE" margin-top: — → 0.35rem letter-spacing: — → 0.08em body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br letter-spacing: — → 0.08em body > main > div > div:nth-of-type(2) [catalog-toolbar] flex-wrap: — → wrap row-gap: 24px → 1rem column-gap: 24px → 1rem padding-top: 24px → 1.25rem padding-bottom: 42px → 1.25rem body > main > div > div:nth-of-type(2) > label [catalog-search] display: flex → inline-flex row-gap: 12px → 0.5rem column-gap: 12px → 0.5rem padding-top: 12px → 0.5rem padding-right: 14px → 0.75rem padding-bottom: 12px → 0.5rem padding-left: 14px → 0.75rem width: min(420px, 100%) → — body > main > div > div:nth-of-type(2) > label > input width: 100% → — border-top-width: 0px → medium body > main > div > div:nth-of-type(2) > div [catalog-filters] display: flex → inline-flex row-gap: 6px → 0.4rem column-gap: 6px → 0.4rem body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1) [active] "ALL" padding-top: 8px → 0.4rem padding-right: 10px → 0.6rem padding-bottom: 8px → 0.4rem padding-left: 10px → 0.6rem background-color: initial → — color: #1769d2 [var(--blue)] → rgb(255, 255, 255) letter-spacing: — → 0.06em body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT" padding-top: 8px → 0.4rem padding-right: 10px → 0.6rem padding-bottom: 8px → 0.4rem padding-left: 10px → 0.6rem 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) — 89 differences === body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] display: grid → inline-flex justify-content: — → center width: — → auto height: — → auto border-top-color: currentcolor → transparent color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] display: grid → inline-flex justify-content: — → center width: — → auto height: — → auto border-top-color: currentcolor → transparent color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 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: #1769d2 [var(--blue)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.12em → — body > main > div > div:nth-of-type(1) > span "/" margin-top: 0px → — margin-right: 7px → — margin-bottom: 0px → — margin-left: 7px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.12em → — body > main > div > div:nth-of-type(2) [tool-title] display: flex → — justify-content: space-between → — align-items: end → — row-gap: 32px → — column-gap: 32px → — margin-bottom: 48px → — body > main > div > div:nth-of-type(2) > div > h1 "Gradient background." margin-top: 0px → — margin-right: 0px → — margin-bottom: 14px → — margin-left: 0px → — max-width: 700px → — font-size: clamp(36px, 4vw, 64px) → 16px font-weight: 650 → — line-height: 1 → 1.5 letter-spacing: -0.06em → — body > main > div > div:nth-of-type(2) > div > p [lede] "Create a clean, export-ready gradient wi" margin-top: 0px → — margin-right: 0px → — margin-bottom: 0px → — margin-left: 0px → — max-width: 550px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] line-height: 1.6 → 1.5 body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" display: flex → — align-items: center → — row-gap: 8px → — column-gap: 8px → — color: rgb(37, 169, 106) → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(2) > span > i width: 6px → — height: 6px → — background-color: rgb(37, 169, 106) → — color: rgb(37, 169, 106) → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) [gradient-layout] display: grid → — align-items: start → — row-gap: 56px → — column-gap: 56px → — grid-template-columns: minmax(360px, 0.7fr) minmax(0px, 1.3fr) → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] display: flex → — justify-content: space-between → — align-items: center → — padding-top: 18px → — padding-right: 20px → — padding-bottom: 18px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "GRADIENT SETTINGS" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure output" display: block → — margin-top: 5px → — font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 01" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] padding-top: 22px → — padding-right: 20px → — padding-bottom: 22px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "GRADIENT TYPE" display: flex → — justify-content: space-between → — margin-bottom: 12px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div [segmented wide] display: flex → — width: 100% → — height: 32px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1) [selected] "Linear" border-top-width: 0px → — border-top-style: none → — border-top-color: currentcolor → — color: rgb(255, 255, 255) → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2) "Radial" border-top-width: 0px → — border-top-style: none → — border-top-color: currentcolor → — background-color: initial → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] padding-top: 22px → — padding-right: 20px → — padding-bottom: 22px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR STOPS" display: flex → — justify-content: space-between → — margin-bottom: 12px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) [color-row] display: flex → — align-items: center → — row-gap: 10px → — column-gap: 10px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) [color-field] display: flex → — align-items: center → — row-gap: 8px → — column-gap: 8px → — padding-right: 8px → — padding-left: 8px → — height: 32px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span [swatch] width: 14px → — height: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input min-width: 0px → — border-top-width: 0px → — border-top-style: none → — border-top-color: currentcolor → — background-color: initial → — font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span [stop-arrow] "→" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) [color-field] display: flex → — align-items: center → — row-gap: 8px → — column-gap: 8px → — padding-right: 8px → — padding-left: 8px → — height: 32px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span [swatch] width: 14px → — height: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input min-width: 0px → — border-top-width: 0px → — border-top-style: none → — border-top-color: currentcolor → — background-color: initial → — font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) [gradient-bar] margin-top: 14px → — height: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group] padding-top: 22px → — padding-right: 20px → — padding-bottom: 22px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label "DIRECTION" display: flex → — justify-content: space-between → — margin-bottom: 12px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output "135 °" color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input font-size: inherit → 16px line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div [direction-grid] display: grid → — row-gap: 6px → — column-gap: 6px → — grid-template-columns: repeat(4, 1fr) → — margin-top: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1) "0° →" padding-top: 8px → — padding-bottom: 8px → — background-color: initial → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2) "45° ↗" padding-top: 8px → — padding-bottom: 8px → — background-color: initial → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3) "90° ↑" padding-top: 8px → — padding-bottom: 8px → — background-color: initial → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4) [selected] "135° ↖" padding-top: 8px → — padding-bottom: 8px → — color: #eef1f4 [var(--background)] → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5) "180° ←" padding-top: 8px → — padding-bottom: 8px → — background-color: initial → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6) "225° ↙" padding-top: 8px → — padding-bottom: 8px → — background-color: initial → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7) "270° ↓" padding-top: 8px → — padding-bottom: 8px → — background-color: initial → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8) "315° ↘" padding-top: 8px → — padding-bottom: 8px → — background-color: initial → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group] padding-top: 22px → — padding-right: 20px → — padding-bottom: 22px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label "OPACITY" display: flex → — justify-content: space-between → — margin-bottom: 12px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output "100 %" color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input font-size: inherit → 16px line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] display: flex → — justify-content: space-between → — align-items: center → — padding-top: 16px → — padding-right: 20px → — padding-bottom: 16px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" display: flex → — align-items: center → — row-gap: 7px → — column-gap: 7px → — border-top-width: 0px → — border-top-style: none → — border-top-color: currentcolor → — background-color: initial → — color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] font-size: 12px → 16px line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] font-size: 12px → 16px line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" display: flex → — align-items: center → — row-gap: 8px → — column-gap: 8px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i display: inline-block → — width: 6px → — height: 6px → — background-color: rgb(37, 169, 106) → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] display: flex → — justify-content: space-between → — align-items: center → — padding-top: 18px → — padding-right: 20px → — padding-bottom: 18px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "OUTPUT PREVIEW" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "gradient.png" display: block → — margin-top: 5px → — font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] display: flex → — flex-wrap: wrap → — justify-content: flex-end → — align-items: center → — row-gap: 10px → — column-gap: 10px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [secondary-btn] "Copy CSS" display: flex → — align-items: center → — row-gap: 8px → — column-gap: 8px → — padding-top: 8px → — padding-bottom: 8px → — 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) — 97 differences === body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare] display: grid → inline-flex justify-content: — → center width: — → auto height: — → auto border-top-color: currentcolor → transparent color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon] color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare] display: grid → inline-flex justify-content: — → center width: — → auto height: — → auto border-top-color: currentcolor → transparent color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon] color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: inherit → 16px line-height: inherit → 1.5 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: #1769d2 [var(--blue)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.12em → — body > main > div > div:nth-of-type(1) > span "/" margin-top: 0px → — margin-right: 7px → — margin-bottom: 0px → — margin-left: 7px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.12em → — body > main > div > div:nth-of-type(2) [tool-title] display: flex → — justify-content: space-between → — align-items: end → — row-gap: 32px → — column-gap: 32px → — margin-bottom: 48px → — body > main > div > div:nth-of-type(2) > div > h1 "Remove background." margin-top: 0px → — margin-right: 0px → — margin-bottom: 14px → — margin-left: 0px → — max-width: 700px → — font-size: clamp(36px, 4vw, 64px) → 16px font-weight: 650 → — line-height: 1 → 1.5 letter-spacing: -0.06em → — body > main > div > div:nth-of-type(2) > div > p [lede] "Select a background color and tune the e" margin-top: 0px → — margin-right: 0px → — margin-bottom: 0px → — margin-left: 0px → — max-width: 550px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] line-height: 1.6 → 1.5 body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW" display: flex → — align-items: center → — row-gap: 8px → — column-gap: 8px → — color: rgb(37, 169, 106) → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(2) > span > i width: 6px → — height: 6px → — background-color: rgb(37, 169, 106) → — color: rgb(37, 169, 106) → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) [remover-layout] display: grid → — align-items: start → — row-gap: 56px → — column-gap: 56px → — grid-template-columns: minmax(360px, 0.62fr) minmax(0px, 1.38fr) → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading] display: flex → — justify-content: space-between → — align-items: center → — padding-top: 18px → — padding-right: 20px → — padding-bottom: 18px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "REMOVER SETTINGS" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure detection" display: block → — margin-top: 5px → — font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 02" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group] padding-top: 22px → — padding-right: 20px → — padding-bottom: 22px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "BACKGROUND COLOR" display: flex → — justify-content: space-between → — margin-bottom: 12px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [color-field] display: flex → — align-items: center → — row-gap: 8px → — column-gap: 8px → — padding-right: 8px → — padding-left: 8px → — height: 32px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span [swatch] width: 14px → — height: 14px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(1) min-width: 0px → — border-top-width: 0px → — border-top-style: none → — border-top-color: currentcolor → — background-color: initial → — font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(2) [native-color] padding-top: 0px → — padding-right: 0px → — padding-bottom: 0px → — padding-left: 0px → — width: 30px → — min-width: 0px → — border-top-width: 0px → — border-top-style: none → — border-top-color: currentcolor → — background-color: initial → — font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background" display: flex → — justify-content: flex-start → — row-gap: 8px → — column-gap: 8px → — margin-top: 10px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span width: 9px → — height: 9px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group] padding-top: 22px → — padding-right: 20px → — padding-bottom: 22px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR SIMILARITY" display: flex → — justify-content: space-between → — margin-bottom: 12px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label > output "72 %" color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > input font-size: inherit → 16px line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div [range-hints] display: flex → — justify-content: space-between → — margin-top: 10px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(1) "strict edges" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(2) "more removal" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group toggle-group] padding-top: 22px → — padding-right: 20px → — padding-bottom: 22px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label display: flex → — justify-content: space-between → — align-items: center → — margin-bottom: 12px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > span "OUTER COLOR ONLY" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > b [on toggle] position: relative → — width: 32px → — height: 18px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(4) >label >input ✗ present in reference, absent in project body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > p "Only remove connected background pixels " margin-top: 8px → — margin-right: 0px → — margin-bottom: 0px → — margin-left: 0px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: 12px → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group toggle-group] padding-top: 22px → — padding-right: 20px → — padding-bottom: 22px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label display: flex → — justify-content: space-between → — align-items: center → — margin-bottom: 12px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > span "SHOW MASK" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > b [toggle] position: relative → — width: 32px → — height: 18px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.1em → — body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(5) >label >input ✗ present in reference, absent in project body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > p "Preview the detected transparency mask." margin-top: 8px → — margin-right: 0px → — margin-bottom: 0px → — margin-left: 0px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-size: 12px → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer] display: flex → — justify-content: space-between → — align-items: center → — padding-top: 16px → — padding-right: 20px → — padding-bottom: 16px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset" display: flex → — align-items: center → — row-gap: 7px → — column-gap: 7px → — border-top-width: 0px → — border-top-style: none → — border-top-color: currentcolor → — background-color: initial → — color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] font-size: 12px → 16px line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw] color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] font-size: 12px → 16px line-height: inherit → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically" display: flex → — align-items: center → — row-gap: 8px → — column-gap: 8px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i display: inline-block → — width: 6px → — height: 6px → — background-color: rgb(37, 169, 106) → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [remover-preview] min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar] display: flex → — justify-content: space-between → — align-items: center → — padding-top: 18px → — padding-right: 20px → — padding-bottom: 18px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "SOURCE / RESULT" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 letter-spacing: 0.12em → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "comparison.png" display: block → — margin-top: 5px → — font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions] display: flex → — flex-wrap: wrap → — justify-content: flex-end → — align-items: center → — row-gap: 10px → — column-gap: 10px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [processed] "processed" display: flex → — align-items: center → — row-gap: 5px → — column-gap: 5px → — color: rgb(37, 169, 106) → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon] color: rgb(37, 169, 106) → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [download-btn] "Download result" display: flex → — justify-content: center → — align-items: center → — row-gap: 9px → — column-gap: 9px → — margin-top: 18px → — width: 100% → — height: 42px → — border-top-width: 0px → — border-top-style: none → — border-top-color: currentcolor → — color: rgb(255, 255, 255) → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-download lucide-icon] color: rgb(255, 255, 255) → #17212b [var(--foreground)] font-family: — → inherit font-size: — → 16px body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [comparison-grid] display: grid → — row-gap: 18px → — column-gap: 18px → — grid-template-columns: repeat(2, minmax(0px, 1fr)) → — padding-top: 20px → — padding-right: 20px → — padding-bottom: 20px → — padding-left: 20px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-card] min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [image-label] display: flex → — justify-content: space-between → — margin-bottom: 10px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span "SOURCE" color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > b "original.png" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px font-weight: 400 → — line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [remover-canvas source-canvas] display: grid → — position: relative → — align-items: center → — min-height: clamp(360px, 30vw, 560px) → — background-color: rgb(232, 238, 242) → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [subject subject-source] display: grid → — align-items: center → — width: 74% → — height: 68% → — transform: rotate(-3deg) → — color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > span "OBJECT" color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" position: absolute → — right: 10px → — bottom: 9px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [image-card] min-width: 0px → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-label] display: flex → — justify-content: space-between → — margin-bottom: 10px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > span "RESULT" color: #1769d2 [var(--blue)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > b "removed-bg.png" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px font-weight: 400 → — line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [remover-canvas] display: grid → — position: relative → — align-items: center → — min-height: clamp(360px, 30vw, 560px) → — body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [subject] display: grid → — align-items: center → — width: 74% → — height: 68% → — color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span "PNG" color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800" position: absolute → — right: 10px → — bottom: 9px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [result-meta] display: flex → — row-gap: 24px → — column-gap: 24px → — padding-top: 16px → — padding-right: 20px → — padding-bottom: 16px → — padding-left: 20px → — color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) "FORMAT" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) > b "PNG-24" margin-left: 6px → — font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px font-weight: 600 → — line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) "ALPHA" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) > b "ENABLED" margin-left: 6px → — font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px font-weight: 600 → — line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) "SIMILARITY" color: #6d7883 [var(--muted)] → #17212b [var(--foreground)] font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px line-height: — → 1.5 body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) > b "72 %" margin-left: 6px → — font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)] font-size: — → 16px font-weight: 600 → — line-height: — → 1.5 body > main > footer [preview-footer] row-gap: — → 1rem column-gap: — → 1rem padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px) letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(1) "easy-png-tools" display: flex → — align-items: center → — row-gap: 7px → — column-gap: 7px → — letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0" font-weight: 400 → — letter-spacing: — → 0.08em body > main > footer > span:nth-of-type(2) "© 2024" display: flex → — align-items: center → — row-gap: 7px → — column-gap: 7px → — letter-spacing: — → 0.08em body >main >footer >span:nth-of-type(3) "© 2024" ✗ present in reference, absent in project body >div ✗ present in reference, absent in project