3200 lines
143 KiB
Plaintext
3200 lines
143 KiB
Plaintext
CDP visual audit
|
||
2026-08-30T16:45:08.002Z
|
||
viewport 390x844, tolerance 1px, theme light
|
||
|
||
=== [390x844] /preview/demo (vs demo.html) — 172 differences ===
|
||
|
||
body > main > header [topbar]
|
||
h: 120 → 64 (-56px)
|
||
|
||
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
|
||
w: 30 → 14.6 (-15.4px)
|
||
|
||
body > main > header > div > span > i [status-dot]
|
||
display: — → inline-block
|
||
w: 0 → 4.7 (+4.7px)
|
||
h: 0 → 6 (+6px)
|
||
|
||
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
|
||
width: — → auto
|
||
height: — → auto
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare]
|
||
width: — → auto
|
||
height: — → auto
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > div [lang]
|
||
display: flex → inline-flex
|
||
align-items: center → —
|
||
|
||
body > main > header > div > div > span [lang-div] "/"
|
||
align-self: — → center
|
||
color: #17212b [var(--foreground)] → #6d7883 [var(--muted)]
|
||
font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → —
|
||
|
||
body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN"
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU"
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > header > nav [nav]
|
||
row-gap: 22px → 18px
|
||
column-gap: 22px → 18px
|
||
margin-right: 28px → —
|
||
margin-left: auto → 24px
|
||
|
||
body > main > header > nav > a:nth-of-type(1) "Workspace"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(2) "Catalog"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(3) "Gradient"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(4) "Background remover"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > div [ws]
|
||
width: 100% → —
|
||
|
||
body > main > div > section:nth-of-type(2) [preview-panel]
|
||
align-self: start → —
|
||
margin-top: 0px → —
|
||
y: 1489.8 → 1270.7 (-219.1px)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) [preview-stack]
|
||
grid-template-columns: 1fr 1fr → 1fr
|
||
width: 100% → —
|
||
min-width: 0px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [preview-tile]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 0.3rem
|
||
column-gap: — → 0.3rem
|
||
padding-top: — → 0.4rem
|
||
padding-right: — → 0.4rem
|
||
padding-bottom: — → 0.4rem
|
||
padding-left: — → 0.4rem
|
||
width: 100% → —
|
||
min-width: 0px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [tile-canvas]
|
||
display: grid → —
|
||
align-items: center → —
|
||
padding-top: 16px → —
|
||
padding-right: 16px → —
|
||
padding-bottom: 16px → —
|
||
padding-left: 16px → —
|
||
width: 100% → —
|
||
min-width: 0px → —
|
||
min-height: clamp(300px, 22vw, 430px) → 120px
|
||
background-color: rgb(228, 232, 235) → —
|
||
background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → —
|
||
background-size: 14px 14px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div [ph]
|
||
min-width: 0px → —
|
||
max-width: 100% → —
|
||
w: 228.8 → 244.2 (+15.4px)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [tile-label]
|
||
align-items: — → baseline
|
||
row-gap: 8px → 0.5rem
|
||
column-gap: 8px → 0.5rem
|
||
padding-top: 8px → —
|
||
padding-right: 8px → —
|
||
padding-bottom: 8px → —
|
||
padding-left: 8px → —
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span "SOURCE"
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > b "original.png · 1200 × 800"
|
||
text-align: right → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [preview-tile]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 0.3rem
|
||
column-gap: — → 0.3rem
|
||
padding-top: — → 0.4rem
|
||
padding-right: — → 0.4rem
|
||
padding-bottom: — → 0.4rem
|
||
padding-left: — → 0.4rem
|
||
width: 100% → —
|
||
min-width: 0px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [tile-canvas]
|
||
display: grid → —
|
||
align-items: center → —
|
||
padding-top: 16px → —
|
||
padding-right: 16px → —
|
||
padding-bottom: 16px → —
|
||
padding-left: 16px → —
|
||
width: 100% → —
|
||
min-width: 0px → —
|
||
min-height: clamp(300px, 22vw, 430px) → 120px
|
||
background-color: rgb(228, 232, 235) → —
|
||
background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → —
|
||
background-size: 14px 14px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [ph]
|
||
min-width: 0px → —
|
||
max-width: 100% → —
|
||
w: 228.8 → 244.2 (+15.4px)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [tile-label]
|
||
align-items: — → baseline
|
||
row-gap: 8px → 0.5rem
|
||
column-gap: 8px → 0.5rem
|
||
padding-top: 8px → —
|
||
padding-right: 8px → —
|
||
padding-bottom: 8px → —
|
||
padding-left: 8px → —
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "STEP 01"
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > b "gradient applied"
|
||
text-align: right → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [preview-tile]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 0.3rem
|
||
column-gap: — → 0.3rem
|
||
padding-top: — → 0.4rem
|
||
padding-right: — → 0.4rem
|
||
padding-bottom: — → 0.4rem
|
||
padding-left: — → 0.4rem
|
||
width: 100% → —
|
||
min-width: 0px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) [tile-canvas]
|
||
display: grid → —
|
||
align-items: center → —
|
||
padding-top: 16px → —
|
||
padding-right: 16px → —
|
||
padding-bottom: 16px → —
|
||
padding-left: 16px → —
|
||
width: 100% → —
|
||
min-width: 0px → —
|
||
min-height: clamp(300px, 22vw, 430px) → 120px
|
||
background-color: rgb(228, 232, 235) → —
|
||
background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → —
|
||
background-size: 14px 14px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div [ph]
|
||
min-width: 0px → —
|
||
max-width: 100% → —
|
||
w: 228.8 → 244.2 (+15.4px)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) [tile-label]
|
||
align-items: — → baseline
|
||
row-gap: 8px → 0.5rem
|
||
column-gap: 8px → 0.5rem
|
||
padding-top: 8px → —
|
||
padding-right: 8px → —
|
||
padding-bottom: 8px → —
|
||
padding-left: 8px → —
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > span "STEP 02"
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > b "background removed"
|
||
text-align: right → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) [preview-tile]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 0.3rem
|
||
column-gap: — → 0.3rem
|
||
padding-top: — → 0.4rem
|
||
padding-right: — → 0.4rem
|
||
padding-bottom: — → 0.4rem
|
||
padding-left: — → 0.4rem
|
||
width: 100% → —
|
||
min-width: 0px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) [tile-canvas]
|
||
display: grid → —
|
||
align-items: center → —
|
||
padding-top: 16px → —
|
||
padding-right: 16px → —
|
||
padding-bottom: 16px → —
|
||
padding-left: 16px → —
|
||
width: 100% → —
|
||
min-width: 0px → —
|
||
min-height: clamp(300px, 22vw, 430px) → 120px
|
||
background-color: rgb(228, 232, 235) → —
|
||
background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → —
|
||
background-size: 14px 14px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div [ph]
|
||
min-width: 0px → —
|
||
max-width: 100% → —
|
||
w: 228.8 → 244.2 (+15.4px)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) [tile-label]
|
||
align-items: — → baseline
|
||
row-gap: 8px → 0.5rem
|
||
column-gap: 8px → 0.5rem
|
||
padding-top: 8px → —
|
||
padding-right: 8px → —
|
||
padding-bottom: 8px → —
|
||
padding-left: 8px → —
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > span "STEP 03"
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > b "outline added"
|
||
text-align: right → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) [preview-tile]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 0.3rem
|
||
column-gap: — → 0.3rem
|
||
padding-top: — → 0.4rem
|
||
padding-right: — → 0.4rem
|
||
padding-bottom: — → 0.4rem
|
||
padding-left: — → 0.4rem
|
||
width: 100% → —
|
||
min-width: 0px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) [tile-canvas]
|
||
display: grid → —
|
||
align-items: center → —
|
||
padding-top: 16px → —
|
||
padding-right: 16px → —
|
||
padding-bottom: 16px → —
|
||
padding-left: 16px → —
|
||
width: 100% → —
|
||
min-width: 0px → —
|
||
min-height: clamp(300px, 22vw, 430px) → 120px
|
||
background-color: rgb(228, 232, 235) → —
|
||
background-image: linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%) → —
|
||
background-size: 14px 14px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div [active ph]
|
||
min-width: 0px → —
|
||
max-width: 100% → —
|
||
w: 228.8 → 244.2 (+15.4px)
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) [tile-label]
|
||
align-items: — → baseline
|
||
row-gap: 8px → 0.5rem
|
||
column-gap: 8px → 0.5rem
|
||
padding-top: 8px → —
|
||
padding-right: 8px → —
|
||
padding-bottom: 8px → —
|
||
padding-left: 8px → —
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > span "FINAL OUTPUT"
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > b "ready · PNG-24"
|
||
text-align: right → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) [section-label]
|
||
row-gap: — → 16px
|
||
column-gap: — → 16px
|
||
padding-bottom: 15px → 12px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [section-text]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 2px
|
||
column-gap: — → 2px
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [mono-label] "PIPELINE OUTPUTS"
|
||
line-height: — → 1.2
|
||
letter-spacing: 0.12em → 0.1em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download result"
|
||
display: flex → inline-flex
|
||
justify-content: center → —
|
||
row-gap: 9px → 8px
|
||
column-gap: 9px → 8px
|
||
margin-top: 18px → —
|
||
padding-top: — → 9px
|
||
padding-right: — → 14px
|
||
padding-bottom: — → 9px
|
||
padding-left: — → 14px
|
||
width: 100% → —
|
||
height: 42px → —
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon]
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-arrow-down-to-line lucide-icon]
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [history-toggle] "Hide intermediate"
|
||
margin-top: 0px → 18px
|
||
margin-right: 0px → —
|
||
margin-bottom: 0px → —
|
||
margin-left: 0px → —
|
||
padding-top: 8px → 11px
|
||
padding-right: 10px → 14px
|
||
padding-bottom: 8px → 11px
|
||
padding-left: 10px → 14px
|
||
width: auto → 100%
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-chevron-down lucide-icon]
|
||
transform: rotate(180deg) → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [meta-list]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 0.15rem
|
||
column-gap: 8px → 0.15rem
|
||
grid-template-columns: repeat(3, 1fr) → —
|
||
padding-top: 14px → —
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) [meta-row]
|
||
display: grid → flex
|
||
justify-content: — → space-between
|
||
align-items: — → baseline
|
||
row-gap: 5px → 1rem
|
||
column-gap: 5px → 1rem
|
||
padding-top: — → 0.25rem
|
||
padding-bottom: — → 0.25rem
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > span [meta-caption] "DIMENSIONS"
|
||
line-height: — → 1.5
|
||
letter-spacing: — → 0.1em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > b [meta-value] "1200 × 800 px"
|
||
margin-top: 5px → —
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) [meta-row]
|
||
display: grid → flex
|
||
justify-content: — → space-between
|
||
align-items: — → baseline
|
||
row-gap: 5px → 1rem
|
||
column-gap: 5px → 1rem
|
||
padding-top: — → 0.25rem
|
||
padding-bottom: — → 0.25rem
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > span [meta-caption] "FORMAT"
|
||
line-height: — → 1.5
|
||
letter-spacing: — → 0.1em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > b [meta-value] "PNG-24"
|
||
margin-top: 5px → —
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) [meta-row]
|
||
display: grid → flex
|
||
justify-content: — → space-between
|
||
align-items: — → baseline
|
||
row-gap: 5px → 1rem
|
||
column-gap: 5px → 1rem
|
||
padding-top: — → 0.25rem
|
||
padding-bottom: — → 0.25rem
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > span [meta-caption] "SIZE"
|
||
line-height: — → 1.5
|
||
letter-spacing: — → 0.1em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > b [meta-value] "1.2 MB"
|
||
margin-top: 5px → —
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) [icon-btn icon-btn--ghost]
|
||
padding-top: 6px → —
|
||
padding-bottom: 6px → —
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) > svg [lucide lucide-icon lucide-settings-2]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) [eyebrow] "PNG PROCESSING WORKSPACE"
|
||
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span "/"
|
||
color: #6d7883 [var(--muted)] → #1769d2 [var(--blue)]
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1 "Build your image pipeline."
|
||
max-width: 700px → —
|
||
line-height: 1 → 0.9
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) [step-card]
|
||
grid-template-columns: 46px 20px 1fr → 46px 1fr
|
||
grid-template-rows: — → auto 1fr
|
||
min-height: 138px → —
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1) [step-index] "01"
|
||
padding-bottom: 0px → 6px
|
||
line-height: — → 1
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg [drag lucide lucide-grip-vertical lucide-icon]
|
||
margin-top: 17px → —
|
||
color: #cbd3da [var(--line)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) [step-body]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
padding-top: 15px → —
|
||
padding-right: 18px → —
|
||
padding-bottom: 18px → —
|
||
padding-left: 18px → —
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading]
|
||
align-items: center → flex-start
|
||
row-gap: 15px → 0.5rem
|
||
column-gap: 15px → 0.5rem
|
||
padding-top: — → 0.5rem
|
||
padding-right: — → 0.75rem
|
||
padding-bottom: — → 0.5rem
|
||
padding-left: — → 0.75rem
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "BACKGROUND"
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools]
|
||
row-gap: 13px → 8px
|
||
column-gap: 13px → 8px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove]
|
||
display: — → inline-flex
|
||
border-top-width: 0px → medium
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO"
|
||
display: flex → inline-flex
|
||
row-gap: 4px → 0.3rem
|
||
column-gap: 4px → 0.3rem
|
||
padding-top: — → 0.15rem
|
||
padding-right: — → 0.45rem
|
||
padding-bottom: — → 0.15rem
|
||
padding-left: — → 0.45rem
|
||
color: rgb(35, 131, 84) → #25a96a [var(--success)]
|
||
line-height: — → 1.5
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon]
|
||
color: rgb(35, 131, 84) → #25a96a [var(--success)]
|
||
line-height: — → 1.5
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [controls]
|
||
row-gap: 16px → 0px
|
||
column-gap: 16px → 24px
|
||
grid-template-columns: 1.1fr 1fr 1.2fr → —
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 8px
|
||
column-gap: — → 8px
|
||
padding-top: — → 10px
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "COLOR"
|
||
align-items: — → baseline
|
||
row-gap: — → 8px
|
||
column-gap: — → 8px
|
||
letter-spacing: 0.08em → 0.05em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div [color-field]
|
||
row-gap: 8px → 0.4rem
|
||
column-gap: 8px → 0.4rem
|
||
padding-right: 8px → —
|
||
padding-left: 8px → —
|
||
height: 32px → —
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span [swatch]
|
||
width: 14px → 1.6rem
|
||
height: 14px → 1.6rem
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > input
|
||
padding-top: — → 0.35rem
|
||
padding-right: — → 0.5rem
|
||
padding-bottom: — → 0.35rem
|
||
padding-left: — → 0.5rem
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
background-color: initial → —
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > svg [lucide lucide-chevron-down lucide-icon]
|
||
color: #17212b [var(--foreground)] → #6d7883 [var(--muted)]
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 0px
|
||
column-gap: — → 0px
|
||
padding-top: — → 10px
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "DIRECTION"
|
||
align-items: — → center
|
||
row-gap: — → 0.5rem
|
||
column-gap: — → 0.5rem
|
||
letter-spacing: 0.08em → 0.05em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label > output "135 °"
|
||
letter-spacing: 0.08em → 0.05em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > input
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
w: 254 → 310 (+56px)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) [control-block]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 8px
|
||
column-gap: — → 8px
|
||
padding-top: — → 10px
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label "OPACITY"
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
margin-bottom: 8px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.08em → —
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label > output "100%"
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.08em → —
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div [segmented]
|
||
display: flex → inline-flex
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(2) [segment selected] "100"
|
||
display: — → inline-flex
|
||
align-items: — → center
|
||
padding-right: — → 0.7rem
|
||
padding-left: — → 0.7rem
|
||
border-top-width: 0px → medium
|
||
letter-spacing: — → 0.06em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(3) [segment] "75"
|
||
display: — → inline-flex
|
||
align-items: — → center
|
||
padding-right: — → 0.7rem
|
||
padding-left: — → 0.7rem
|
||
border-top-width: 0px → medium
|
||
letter-spacing: — → 0.06em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(4) [segment] "50"
|
||
display: — → inline-flex
|
||
align-items: — → center
|
||
padding-right: — → 0.7rem
|
||
padding-left: — → 0.7rem
|
||
border-top-width: 0px → medium
|
||
letter-spacing: — → 0.06em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(1) [segment] "25"
|
||
display: — → inline-flex
|
||
align-items: — → center
|
||
padding-right: — → 0.7rem
|
||
padding-left: — → 0.7rem
|
||
border-top-width: 0px → medium
|
||
background-color: — → transparent
|
||
color: rgb(255, 255, 255) → #6d7883 [var(--muted)]
|
||
letter-spacing: — → 0.06em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) [step-card]
|
||
grid-template-columns: 46px 20px 1fr → 46px 1fr
|
||
grid-template-rows: — → auto 1fr
|
||
min-height: 138px → —
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(1) [step-index] "02"
|
||
padding-bottom: 0px → 6px
|
||
line-height: — → 1
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > svg [drag lucide lucide-grip-vertical lucide-icon]
|
||
margin-top: 17px → —
|
||
color: #cbd3da [var(--line)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) [step-body]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
padding-top: 15px → —
|
||
padding-right: 18px → —
|
||
padding-bottom: 18px → —
|
||
padding-left: 18px → —
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading]
|
||
align-items: center → flex-start
|
||
row-gap: 15px → 0.5rem
|
||
column-gap: 15px → 0.5rem
|
||
padding-top: — → 0.5rem
|
||
padding-right: — → 0.75rem
|
||
padding-bottom: — → 0.5rem
|
||
padding-left: — → 0.75rem
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TRANSFORM"
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools]
|
||
row-gap: 13px → 8px
|
||
column-gap: 13px → 8px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove]
|
||
display: — → inline-flex
|
||
border-top-width: 0px → medium
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO"
|
||
display: flex → inline-flex
|
||
row-gap: 4px → 0.3rem
|
||
column-gap: 4px → 0.3rem
|
||
padding-top: — → 0.15rem
|
||
padding-right: — → 0.45rem
|
||
padding-bottom: — → 0.15rem
|
||
padding-left: — → 0.45rem
|
||
color: rgb(35, 131, 84) → #25a96a [var(--success)]
|
||
line-height: — → 1.5
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon]
|
||
color: rgb(35, 131, 84) → #25a96a [var(--success)]
|
||
line-height: — → 1.5
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) [step-card]
|
||
grid-template-columns: 46px 20px 1fr → 46px 1fr
|
||
grid-template-rows: — → auto 1fr
|
||
min-height: 138px → —
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(1) [step-index] "03"
|
||
padding-bottom: 0px → 6px
|
||
line-height: — → 1
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > svg [drag lucide lucide-grip-vertical lucide-icon]
|
||
margin-top: 17px → —
|
||
color: #cbd3da [var(--line)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) [step-body]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
padding-top: 15px → —
|
||
padding-right: 18px → —
|
||
padding-bottom: 18px → —
|
||
padding-left: 18px → —
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading]
|
||
align-items: center → flex-start
|
||
row-gap: 15px → 0.5rem
|
||
column-gap: 15px → 0.5rem
|
||
padding-top: — → 0.5rem
|
||
padding-right: — → 0.75rem
|
||
padding-bottom: — → 0.5rem
|
||
padding-left: — → 0.75rem
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE"
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools]
|
||
row-gap: 13px → 8px
|
||
column-gap: 13px → 8px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove]
|
||
display: — → inline-flex
|
||
border-top-width: 0px → medium
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO"
|
||
display: flex → inline-flex
|
||
row-gap: 4px → 0.3rem
|
||
column-gap: 4px → 0.3rem
|
||
padding-top: — → 0.15rem
|
||
padding-right: — → 0.45rem
|
||
padding-bottom: — → 0.15rem
|
||
padding-left: — → 0.45rem
|
||
color: rgb(35, 131, 84) → #25a96a [var(--success)]
|
||
line-height: — → 1.5
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon]
|
||
color: rgb(35, 131, 84) → #25a96a [var(--success)]
|
||
line-height: — → 1.5
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls]
|
||
row-gap: 16px → 0px
|
||
grid-template-columns: 1fr 1fr → —
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 0px
|
||
column-gap: — → 0px
|
||
padding-top: — → 10px
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "WIDTH"
|
||
align-items: — → center
|
||
row-gap: — → 0.5rem
|
||
column-gap: — → 0.5rem
|
||
letter-spacing: 0.08em → 0.05em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "2 px"
|
||
letter-spacing: 0.08em → 0.05em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
w: 254 → 310 (+56px)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [control-block]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 8px
|
||
column-gap: — → 8px
|
||
padding-top: — → 10px
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label "COLOR"
|
||
align-items: — → baseline
|
||
row-gap: — → 8px
|
||
column-gap: — → 8px
|
||
letter-spacing: 0.08em → 0.05em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [color-field]
|
||
row-gap: 8px → 0.4rem
|
||
column-gap: 8px → 0.4rem
|
||
padding-right: 8px → —
|
||
padding-left: 8px → —
|
||
height: 32px → —
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span [dark swatch]
|
||
width: 14px → 1.6rem
|
||
height: 14px → 1.6rem
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > input
|
||
padding-top: — → 0.35rem
|
||
padding-right: — → 0.5rem
|
||
padding-bottom: — → 0.35rem
|
||
padding-left: — → 0.5rem
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
background-color: initial → —
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) [step-card]
|
||
grid-template-columns: 46px 20px 1fr → 46px 1fr
|
||
grid-template-rows: — → auto 1fr
|
||
min-height: 138px → —
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(1) [step-index] "04"
|
||
padding-bottom: 0px → 6px
|
||
line-height: — → 1
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > svg [drag lucide lucide-grip-vertical lucide-icon]
|
||
margin-top: 17px → —
|
||
color: #cbd3da [var(--line)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) [step-body]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
padding-top: 15px → —
|
||
padding-right: 18px → —
|
||
padding-bottom: 18px → —
|
||
padding-left: 18px → —
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) [step-heading]
|
||
align-items: center → flex-start
|
||
row-gap: 15px → 0.5rem
|
||
column-gap: 15px → 0.5rem
|
||
padding-top: — → 0.5rem
|
||
padding-right: — → 0.75rem
|
||
padding-bottom: — → 0.5rem
|
||
padding-left: — → 0.75rem
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [step-heading-text]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "STYLE"
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [step-tools]
|
||
row-gap: 13px → 8px
|
||
column-gap: 13px → 8px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [step-remove]
|
||
display: — → inline-flex
|
||
border-top-width: 0px → medium
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-icon lucide-x]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [badge badge--success] "AUTO"
|
||
display: flex → inline-flex
|
||
row-gap: 4px → 0.3rem
|
||
column-gap: 4px → 0.3rem
|
||
padding-top: — → 0.15rem
|
||
padding-right: — → 0.45rem
|
||
padding-bottom: — → 0.15rem
|
||
padding-left: — → 0.45rem
|
||
color: rgb(35, 131, 84) → #25a96a [var(--success)]
|
||
line-height: — → 1.5
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon]
|
||
color: rgb(35, 131, 84) → #25a96a [var(--success)]
|
||
line-height: — → 1.5
|
||
letter-spacing: — → 0.08em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) [compact controls]
|
||
row-gap: 16px → 0px
|
||
grid-template-columns: 1fr 1fr → —
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [control-block]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 0px
|
||
column-gap: — → 0px
|
||
padding-top: — → 10px
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label "RADIUS"
|
||
align-items: — → center
|
||
row-gap: — → 0.5rem
|
||
column-gap: — → 0.5rem
|
||
letter-spacing: 0.08em → 0.05em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output "18 px"
|
||
letter-spacing: 0.08em → 0.05em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
w: 254 → 310 (+56px)
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [toggle-row]
|
||
display: — → flex
|
||
justify-content: — → space-between
|
||
align-items: — → center
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
padding-top: — → 10px
|
||
min-width: — → 0px
|
||
font-size: — → 0.85rem
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span "Preserve aspect ratio"
|
||
font-size: — → 0.85rem
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button [on toggle]
|
||
width: 32px → 2.4rem
|
||
height: 18px → 1.3rem
|
||
font-size: inherit → 0.85rem
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i [toggle-knob]
|
||
position: — → absolute
|
||
top: — → 1px
|
||
left: — → 1px
|
||
width: — → calc(-4px + 1.3rem)
|
||
height: — → calc(-4px + 1.3rem)
|
||
transform: — → translateX(1.1rem)
|
||
background-color: — → rgb(255, 255, 255)
|
||
font-size: inherit → 0.85rem
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button [reset-btn] "Reset pipeline"
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg [lucide lucide-icon lucide-rotate-ccw]
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) [section-label]
|
||
row-gap: — → 16px
|
||
column-gap: — → 16px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div [section-text]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 2px
|
||
column-gap: — → 2px
|
||
min-width: — → 0px
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span [mono-label] "PROCESSING PIPELINE"
|
||
line-height: — → 1.2
|
||
letter-spacing: 0.12em → 0.1em
|
||
text-transform: — → uppercase
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button [add-btn] "Add tool"
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg [lucide lucide-icon lucide-plus]
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > footer [preview-footer]
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px)
|
||
padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px)
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > footer > span:nth-of-type(1) "easy-png-tools"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 7px → —
|
||
column-gap: 7px → —
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0"
|
||
font-weight: 400 → —
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > footer > span:nth-of-type(2) "© 2024"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 7px → —
|
||
column-gap: 7px → —
|
||
letter-spacing: — → 0.08em
|
||
|
||
body >main >footer >span:nth-of-type(2) >svg [lucide lucide-link-2 lucide-link2]
|
||
✗ present in reference, absent in project
|
||
|
||
body >main >footer >span:nth-of-type(3) "© 2024"
|
||
✗ present in reference, absent in project
|
||
|
||
body >div
|
||
✗ present in reference, absent in project
|
||
|
||
|
||
=== [390x844] /preview/list-tools (vs list-tools.html) — 154 differences ===
|
||
|
||
body > main > header [topbar]
|
||
h: 120 → 64 (-56px)
|
||
|
||
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
|
||
w: 30 → 14.6 (-15.4px)
|
||
|
||
body > main > header > div > span > i [status-dot]
|
||
display: — → inline-block
|
||
w: 0 → 3.3 (+3.3px)
|
||
h: 0 → 6 (+6px)
|
||
|
||
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
|
||
width: — → auto
|
||
height: — → auto
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare]
|
||
width: — → auto
|
||
height: — → auto
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > div [lang]
|
||
display: flex → inline-flex
|
||
align-items: center → —
|
||
|
||
body > main > header > div > div > span [lang-div] "/"
|
||
align-self: — → center
|
||
color: #17212b [var(--foreground)] → #6d7883 [var(--muted)]
|
||
font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → —
|
||
|
||
body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN"
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU"
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > header > nav [nav]
|
||
row-gap: 22px → 18px
|
||
column-gap: 22px → 18px
|
||
margin-right: 28px → —
|
||
margin-left: auto → 24px
|
||
|
||
body > main > header > nav > a:nth-of-type(1) "Workspace"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(2) "Catalog"
|
||
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(3) "Gradient"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(4) "Background remover"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > div [catalog-page]
|
||
margin-top: 0px → —
|
||
margin-right: 0px → —
|
||
margin-bottom: 0px → —
|
||
margin-left: 0px → —
|
||
width: 100% → —
|
||
max-width: none → —
|
||
|
||
body > main > div > div:nth-of-type(1) [catalog-head]
|
||
flex-wrap: — → wrap
|
||
row-gap: 40px → 1.5rem
|
||
column-gap: 40px → 1.5rem
|
||
padding-bottom: 42px → —
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div [eyebrow] "EASY-PNG-TOOLS / CATALOG"
|
||
margin-bottom: 18px → 0.5rem
|
||
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
|
||
letter-spacing: 0.12em → 0.18em
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1 "Tool catalog"
|
||
margin-top: 12px → 0px
|
||
margin-bottom: 14px → 0px
|
||
max-width: 700px → —
|
||
font-size: clamp(36px, 4vw, 64px) → 2rem
|
||
font-weight: 650 → 700
|
||
line-height: 1 → 1.5
|
||
letter-spacing: -0.06em → —
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p "Focused utilities for working with PNG. "
|
||
margin-top: 0px → 0.5rem
|
||
max-width: 660px → 56ch
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 0.95rem
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(2) [catalog-total]
|
||
flex-direction: — → column
|
||
align-items: center → flex-end
|
||
row-gap: 14px → —
|
||
column-gap: 14px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1
|
||
text-align: right → —
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b "32"
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
letter-spacing: -0.08em → —
|
||
text-align: right → —
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span "TOOLS AVAILABLE"
|
||
margin-top: — → 0.35rem
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > div > div:nth-of-type(2) [catalog-toolbar]
|
||
flex-wrap: — → wrap
|
||
row-gap: 24px → 1rem
|
||
column-gap: 24px → 1rem
|
||
padding-top: 24px → 1.25rem
|
||
padding-bottom: 42px → 1.25rem
|
||
|
||
body > main > div > div:nth-of-type(2) > label [catalog-search]
|
||
display: flex → inline-flex
|
||
row-gap: 12px → 0.5rem
|
||
column-gap: 12px → 0.5rem
|
||
padding-top: 12px → 0.5rem
|
||
padding-right: 14px → 0.75rem
|
||
padding-bottom: 12px → 0.5rem
|
||
padding-left: 14px → 0.75rem
|
||
width: min(420px, 100%) → —
|
||
|
||
body > main > div > div:nth-of-type(2) > label > input
|
||
width: 100% → —
|
||
border-top-width: 0px → medium
|
||
|
||
body > main > div > div:nth-of-type(2) > div [catalog-filters]
|
||
display: flex → inline-flex
|
||
row-gap: 6px → 0.4rem
|
||
column-gap: 6px → 0.4rem
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1) [active] "ALL"
|
||
padding-top: 8px → 0.4rem
|
||
padding-right: 10px → 0.6rem
|
||
padding-bottom: 8px → 0.4rem
|
||
padding-left: 10px → 0.6rem
|
||
background-color: initial → —
|
||
color: #1769d2 [var(--blue)] → rgb(255, 255, 255)
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2) "CONVERT"
|
||
padding-top: 8px → 0.4rem
|
||
padding-right: 10px → 0.6rem
|
||
padding-bottom: 8px → 0.4rem
|
||
padding-left: 10px → 0.6rem
|
||
border-top-color: rgba(0, 0, 0, 0) → —
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3) "TRANSPARENCY"
|
||
padding-top: 8px → 0.4rem
|
||
padding-right: 10px → 0.6rem
|
||
padding-bottom: 8px → 0.4rem
|
||
padding-left: 10px → 0.6rem
|
||
border-top-color: rgba(0, 0, 0, 0) → —
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4) "COLOR"
|
||
padding-top: 8px → 0.4rem
|
||
padding-right: 10px → 0.6rem
|
||
padding-bottom: 8px → 0.4rem
|
||
padding-left: 10px → 0.6rem
|
||
border-top-color: rgba(0, 0, 0, 0) → —
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5) "GEOMETRY"
|
||
padding-top: 8px → 0.4rem
|
||
padding-right: 10px → 0.6rem
|
||
padding-bottom: 8px → 0.4rem
|
||
padding-left: 10px → 0.6rem
|
||
border-top-color: rgba(0, 0, 0, 0) → —
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6) "FILTERS"
|
||
padding-top: 8px → 0.4rem
|
||
padding-right: 10px → 0.6rem
|
||
padding-bottom: 8px → 0.4rem
|
||
padding-left: 10px → 0.6rem
|
||
border-top-color: rgba(0, 0, 0, 0) → —
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7) "ANALYZE"
|
||
padding-top: 8px → 0.4rem
|
||
padding-right: 10px → 0.6rem
|
||
padding-bottom: 8px → 0.4rem
|
||
padding-left: 10px → 0.6rem
|
||
border-top-color: rgba(0, 0, 0, 0) → —
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) [catalog-group]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
min-width: 0px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [group-title]
|
||
align-items: center → baseline
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
padding-bottom: 12px → 0.5rem
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span "CONVERT"
|
||
letter-spacing: 0.12em → 0.14em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > i "05 TOOLS"
|
||
letter-spacing: 0.12em → 0.08em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [tool-cards]
|
||
padding-top: 14px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [catalog-group]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
min-width: 0px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [group-title]
|
||
align-items: center → baseline
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
padding-bottom: 12px → 0.5rem
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > span "TRANSPARENCY"
|
||
letter-spacing: 0.12em → 0.14em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > i "05 TOOLS"
|
||
letter-spacing: 0.12em → 0.08em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [tool-cards]
|
||
padding-top: 14px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) [catalog-group]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
min-width: 0px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) [group-title]
|
||
align-items: center → baseline
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
padding-bottom: 12px → 0.5rem
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > span "COLOR"
|
||
letter-spacing: 0.12em → 0.14em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > i "05 TOOLS"
|
||
letter-spacing: 0.12em → 0.08em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) [tool-cards]
|
||
padding-top: 14px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) [catalog-group]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
min-width: 0px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) [group-title]
|
||
align-items: center → baseline
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
padding-bottom: 12px → 0.5rem
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > span "GEOMETRY"
|
||
letter-spacing: 0.12em → 0.14em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > i "05 TOOLS"
|
||
letter-spacing: 0.12em → 0.08em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) [tool-cards]
|
||
padding-top: 14px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) [catalog-group]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
min-width: 0px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) [group-title]
|
||
align-items: center → baseline
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
padding-bottom: 12px → 0.5rem
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > span "FILTERS"
|
||
letter-spacing: 0.12em → 0.14em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > i "04 TOOLS"
|
||
letter-spacing: 0.12em → 0.08em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) [tool-cards]
|
||
padding-top: 14px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) [catalog-group]
|
||
display: — → flex
|
||
flex-direction: — → column
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
min-width: 0px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) [group-title]
|
||
align-items: center → baseline
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
padding-bottom: 12px → 0.5rem
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > span "ANALYZE"
|
||
letter-spacing: 0.12em → 0.14em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > i "04 TOOLS"
|
||
letter-spacing: 0.12em → 0.08em
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) [tool-cards]
|
||
padding-top: 14px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1) [tool-icon]
|
||
w: 38 → 42 (+4px)
|
||
h: 38 → 42 (+4px)
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2) [tool-copy]
|
||
display: grid → flex
|
||
flex-direction: — → column
|
||
row-gap: 8px → 2px
|
||
column-gap: 8px → 2px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > svg [lucide lucide-arrow-up-right lucide-icon tool-arrow]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > footer [catalog-footer] "ALL OPERATIONS RUN LOCALLY YOUR FILES NE"
|
||
display: — → flex
|
||
flex-wrap: — → wrap
|
||
row-gap: — → 1.5rem
|
||
column-gap: — → 1.5rem
|
||
margin-top: 64px → 56px
|
||
padding-top: 20px → 24px
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > div > footer > span "•"
|
||
margin-top: 0px → —
|
||
margin-right: 8px → —
|
||
margin-bottom: 0px → —
|
||
margin-left: 8px → —
|
||
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
|
||
letter-spacing: — → 0.08em
|
||
|
||
body >main >footer [preview-footer]
|
||
+ present in project, absent in reference
|
||
|
||
body >div
|
||
✗ present in reference, absent in project
|
||
|
||
|
||
=== [390x844] /preview/tools/linear-gradient-png (vs gradient.html) — 92 differences ===
|
||
|
||
body > main > header [topbar]
|
||
h: 120 → 64 (-56px)
|
||
|
||
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
|
||
w: 30 → 14.6 (-15.4px)
|
||
|
||
body > main > header > div > span > i [status-dot]
|
||
display: — → inline-block
|
||
w: 0 → 4.7 (+4.7px)
|
||
h: 0 → 6 (+6px)
|
||
|
||
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
|
||
width: — → auto
|
||
height: — → auto
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare]
|
||
width: — → auto
|
||
height: — → auto
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > div [lang]
|
||
display: flex → inline-flex
|
||
align-items: center → —
|
||
|
||
body > main > header > div > div > span [lang-div] "/"
|
||
align-self: — → center
|
||
color: #17212b [var(--foreground)] → #6d7883 [var(--muted)]
|
||
font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → —
|
||
|
||
body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN"
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU"
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > header > nav [nav]
|
||
row-gap: 22px → 18px
|
||
column-gap: 22px → 18px
|
||
margin-right: 28px → —
|
||
margin-left: auto → 24px
|
||
|
||
body > main > header > nav > a:nth-of-type(1) "Workspace"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(2) "Catalog"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(3) "Gradient"
|
||
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(4) "Background remover"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > div [tool-page]
|
||
padding-top: 60px → —
|
||
padding-right: clamp(24px, 4vw, 72px) → —
|
||
padding-bottom: 72px → —
|
||
padding-left: clamp(24px, 4vw, 72px) → —
|
||
width: 100% → —
|
||
|
||
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
|
||
margin-bottom: 18px → —
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(1) > span "/"
|
||
margin-top: 0px → —
|
||
margin-right: 7px → —
|
||
margin-bottom: 0px → —
|
||
margin-left: 7px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(2) [tool-title]
|
||
justify-content: space-between → —
|
||
align-items: end → —
|
||
row-gap: 32px → —
|
||
column-gap: 32px → —
|
||
margin-bottom: 48px → —
|
||
|
||
body > main > div > div:nth-of-type(2) > div > h1 "Gradient background."
|
||
margin-top: 0px → —
|
||
margin-right: 0px → —
|
||
margin-bottom: 14px → —
|
||
margin-left: 0px → —
|
||
max-width: 700px → —
|
||
font-size: clamp(36px, 4vw, 64px) → 16px
|
||
font-weight: 650 → —
|
||
line-height: 1 → 1.5
|
||
letter-spacing: -0.06em → —
|
||
|
||
body > main > div > div:nth-of-type(2) > div > p [lede] "Create a clean, export-ready gradient wi"
|
||
margin-top: 0px → —
|
||
margin-right: 0px → —
|
||
margin-bottom: 0px → —
|
||
margin-left: 0px → —
|
||
max-width: 550px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
line-height: 1.6 → 1.5
|
||
|
||
body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 8px → —
|
||
column-gap: 8px → —
|
||
color: rgb(37, 169, 106) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(2) > span > i
|
||
width: 6px → —
|
||
height: 6px → —
|
||
background-color: rgb(37, 169, 106) → —
|
||
color: rgb(37, 169, 106) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) [gradient-layout]
|
||
display: grid → —
|
||
align-items: start → —
|
||
row-gap: 56px → —
|
||
column-gap: 56px → —
|
||
grid-template-columns: minmax(360px, 0.7fr) minmax(0px, 1.3fr) → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading]
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
align-items: center → —
|
||
padding-top: 18px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 18px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "GRADIENT SETTINGS"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure output"
|
||
display: block → —
|
||
margin-top: 5px → —
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 01"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group]
|
||
padding-top: 22px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 22px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "GRADIENT TYPE"
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
margin-bottom: 12px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div [segmented wide]
|
||
display: flex → —
|
||
width: 100% → —
|
||
height: 32px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1) [selected] "Linear"
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
color: rgb(255, 255, 255) → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2) "Radial"
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
background-color: initial → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group]
|
||
padding-top: 22px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 22px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR STOPS"
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
margin-bottom: 12px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) [color-row]
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 10px → —
|
||
column-gap: 10px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) [color-field]
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 8px → —
|
||
column-gap: 8px → —
|
||
padding-right: 8px → —
|
||
padding-left: 8px → —
|
||
height: 32px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span [swatch]
|
||
width: 14px → —
|
||
height: 14px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input
|
||
min-width: 0px → —
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
background-color: initial → —
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span [stop-arrow] "→"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) [color-field]
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 8px → —
|
||
column-gap: 8px → —
|
||
padding-right: 8px → —
|
||
padding-left: 8px → —
|
||
height: 32px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span [swatch]
|
||
width: 14px → —
|
||
height: 14px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input
|
||
min-width: 0px → —
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
background-color: initial → —
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2) [gradient-bar]
|
||
margin-top: 14px → —
|
||
height: 14px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group]
|
||
padding-top: 22px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 22px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label "DIRECTION"
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
margin-bottom: 12px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output "135 °"
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div [direction-grid]
|
||
display: grid → —
|
||
row-gap: 6px → —
|
||
column-gap: 6px → —
|
||
grid-template-columns: repeat(4, 1fr) → —
|
||
margin-top: 14px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1) "0° →"
|
||
padding-top: 8px → —
|
||
padding-bottom: 8px → —
|
||
background-color: initial → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2) "45° ↗"
|
||
padding-top: 8px → —
|
||
padding-bottom: 8px → —
|
||
background-color: initial → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3) "90° ↑"
|
||
padding-top: 8px → —
|
||
padding-bottom: 8px → —
|
||
background-color: initial → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4) [selected] "135° ↖"
|
||
padding-top: 8px → —
|
||
padding-bottom: 8px → —
|
||
color: #eef1f4 [var(--background)] → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5) "180° ←"
|
||
padding-top: 8px → —
|
||
padding-bottom: 8px → —
|
||
background-color: initial → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6) "225° ↙"
|
||
padding-top: 8px → —
|
||
padding-bottom: 8px → —
|
||
background-color: initial → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7) "270° ↓"
|
||
padding-top: 8px → —
|
||
padding-bottom: 8px → —
|
||
background-color: initial → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8) "315° ↘"
|
||
padding-top: 8px → —
|
||
padding-bottom: 8px → —
|
||
background-color: initial → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group]
|
||
padding-top: 22px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 22px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label "OPACITY"
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
margin-bottom: 12px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output "100 %"
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer]
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
align-items: center → —
|
||
padding-top: 16px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 16px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 7px → —
|
||
column-gap: 7px → —
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
background-color: initial → —
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-size: 12px → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-size: 12px → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 8px → —
|
||
column-gap: 8px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i
|
||
display: inline-block → —
|
||
width: 6px → —
|
||
height: 6px → —
|
||
background-color: rgb(37, 169, 106) → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar]
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
align-items: center → —
|
||
padding-top: 18px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 18px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "OUTPUT PREVIEW"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "gradient.png"
|
||
display: block → —
|
||
margin-top: 5px → —
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions]
|
||
display: flex → —
|
||
flex-wrap: wrap → —
|
||
justify-content: flex-end → —
|
||
align-items: center → —
|
||
row-gap: 10px → —
|
||
column-gap: 10px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) [secondary-btn] "Copy CSS"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 8px → —
|
||
column-gap: 8px → —
|
||
padding-top: 8px → —
|
||
padding-bottom: 8px → —
|
||
background-color: initial → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg [lucide lucide-copy lucide-icon]
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) [download-btn] "Download PNG"
|
||
display: flex → —
|
||
justify-content: center → —
|
||
align-items: center → —
|
||
row-gap: 9px → —
|
||
column-gap: 9px → —
|
||
margin-top: 18px → —
|
||
width: 100% → —
|
||
height: 42px → —
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
color: rgb(255, 255, 255) → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1) [lucide lucide-download lucide-icon]
|
||
color: rgb(255, 255, 255) → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2) [lucide lucide-chevron-down lucide-icon]
|
||
color: rgb(255, 255, 255) → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [large-canvas]
|
||
padding-top: 24px → —
|
||
padding-right: 24px → —
|
||
padding-bottom: 24px → —
|
||
padding-left: 24px → —
|
||
background-color: rgb(32, 42, 49) → —
|
||
background-image: linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%) → —
|
||
background-size: 28px 28px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div [gradient-art]
|
||
display: grid → —
|
||
justify-content: center → —
|
||
min-height: clamp(420px, 42vw, 680px) → —
|
||
color: rgb(255, 255, 255) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > div [art-mark] "PNG"
|
||
display: grid → —
|
||
align-items: center → —
|
||
margin-bottom: 12px → —
|
||
width: 70px → —
|
||
height: 70px → —
|
||
border-top-width: 1px → —
|
||
border-top-style: solid → —
|
||
border-top-color: rgba(255, 255, 255, 0.65) → —
|
||
color: rgb(255, 255, 255) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > span "easy-png-tools"
|
||
color: rgb(255, 255, 255) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [code-block]
|
||
padding-top: 16px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 16px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
align-items: center → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > span [label] "GENERATED CSS"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button [icon-btn]
|
||
display: grid → —
|
||
align-items: center → —
|
||
padding-top: 6px → —
|
||
padding-bottom: 6px → —
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
background-color: initial → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button > svg [lucide lucide-copy lucide-icon]
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > pre "background: linear-gradient(135deg, #176"
|
||
margin-top: 12px → —
|
||
margin-right: 0px → —
|
||
margin-bottom: 0px → —
|
||
margin-left: 0px → —
|
||
padding-top: 14px → —
|
||
padding-right: 14px → —
|
||
padding-bottom: 14px → —
|
||
padding-left: 14px → —
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > footer [preview-footer]
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px)
|
||
padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px)
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > footer > span:nth-of-type(1) "easy-png-tools"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 7px → —
|
||
column-gap: 7px → —
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0"
|
||
font-weight: 400 → —
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > footer > span:nth-of-type(2) "© 2024"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 7px → —
|
||
column-gap: 7px → —
|
||
letter-spacing: — → 0.08em
|
||
|
||
body >main >footer >span:nth-of-type(3) "© 2024"
|
||
✗ present in reference, absent in project
|
||
|
||
body >div
|
||
✗ present in reference, absent in project
|
||
|
||
|
||
=== [390x844] /preview/tools/remove-background-png (vs background-remover.html) — 100 differences ===
|
||
|
||
body > main > header [topbar]
|
||
h: 120 → 64 (-56px)
|
||
|
||
body > main > header > a > span:nth-of-type(1) [brand-mark] "EP"
|
||
w: 30 → 14.6 (-15.4px)
|
||
|
||
body > main > header > div > span > i [status-dot]
|
||
display: — → inline-block
|
||
w: 0 → 4.8 (+4.8px)
|
||
h: 0 → 6 (+6px)
|
||
|
||
body > main > header > div > button:nth-of-type(1) [icon-btn icon-btn--bare]
|
||
width: — → auto
|
||
height: — → auto
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(1) > svg [lucide lucide-circle-question-mark lucide-icon]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(2) [icon-btn icon-btn--bare]
|
||
width: — → auto
|
||
height: — → auto
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > button:nth-of-type(2) > svg [lucide lucide-icon lucide-moon]
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > header > div > div [lang]
|
||
display: flex → inline-flex
|
||
align-items: center → —
|
||
|
||
body > main > header > div > div > span [lang-div] "/"
|
||
align-self: — → center
|
||
color: #17212b [var(--foreground)] → #6d7883 [var(--muted)]
|
||
font-family: "IBM Plex Sans", sans-serif [var(--font-sans)] → —
|
||
|
||
body > main > header > div > div > button:nth-of-type(2) [lang-btn] "EN"
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > header > div > div > button:nth-of-type(1) [active lang-btn] "RU"
|
||
letter-spacing: — → 0.06em
|
||
|
||
body > main > header > nav [nav]
|
||
row-gap: 22px → 18px
|
||
column-gap: 22px → 18px
|
||
margin-right: 28px → —
|
||
margin-left: auto → 24px
|
||
|
||
body > main > header > nav > a:nth-of-type(1) "Workspace"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(2) "Catalog"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(3) "Gradient"
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > header > nav > a:nth-of-type(4) "Background remover"
|
||
color: #1769d2 [var(--blue)] → #6d7883 [var(--muted)]
|
||
letter-spacing: — → 0.04em
|
||
|
||
body > main > div [tool-page]
|
||
padding-top: 60px → —
|
||
padding-right: clamp(24px, 4vw, 72px) → —
|
||
padding-bottom: 72px → —
|
||
padding-left: clamp(24px, 4vw, 72px) → —
|
||
width: 100% → —
|
||
|
||
body > main > div > div:nth-of-type(1) [eyebrow] "PNG PROCESSING SINGLE TOOL"
|
||
margin-bottom: 18px → —
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(1) > span "/"
|
||
margin-top: 0px → —
|
||
margin-right: 7px → —
|
||
margin-bottom: 0px → —
|
||
margin-left: 7px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(2) [tool-title]
|
||
justify-content: space-between → —
|
||
align-items: end → —
|
||
row-gap: 32px → —
|
||
column-gap: 32px → —
|
||
margin-bottom: 48px → —
|
||
|
||
body > main > div > div:nth-of-type(2) > div > h1 "Remove background."
|
||
margin-top: 0px → —
|
||
margin-right: 0px → —
|
||
margin-bottom: 14px → —
|
||
margin-left: 0px → —
|
||
max-width: 700px → —
|
||
font-size: clamp(36px, 4vw, 64px) → 16px
|
||
font-weight: 650 → —
|
||
line-height: 1 → 1.5
|
||
letter-spacing: -0.06em → —
|
||
|
||
body > main > div > div:nth-of-type(2) > div > p [lede] "Select a background color and tune the e"
|
||
margin-top: 0px → —
|
||
margin-right: 0px → —
|
||
margin-bottom: 0px → —
|
||
margin-left: 0px → —
|
||
max-width: 550px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
line-height: 1.6 → 1.5
|
||
|
||
body > main > div > div:nth-of-type(2) > span [tool-status] "LIVE PREVIEW"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 8px → —
|
||
column-gap: 8px → —
|
||
color: rgb(37, 169, 106) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(2) > span > i
|
||
width: 6px → —
|
||
height: 6px → —
|
||
background-color: rgb(37, 169, 106) → —
|
||
color: rgb(37, 169, 106) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) [remover-layout]
|
||
display: grid → —
|
||
align-items: start → —
|
||
row-gap: 56px → —
|
||
column-gap: 56px → —
|
||
grid-template-columns: minmax(360px, 0.62fr) minmax(0px, 1.38fr) → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) [panel-heading]
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
align-items: center → —
|
||
padding-top: 18px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 18px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span [label] "REMOVER SETTINGS"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong "Configure detection"
|
||
display: block → —
|
||
margin-top: 5px → —
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span [step-type] "TOOL 02"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) [setting-group]
|
||
padding-top: 22px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 22px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label "BACKGROUND COLOR"
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
margin-bottom: 12px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) [color-field]
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 8px → —
|
||
column-gap: 8px → —
|
||
padding-right: 8px → —
|
||
padding-left: 8px → —
|
||
height: 32px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > span [swatch]
|
||
width: 14px → —
|
||
height: 14px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(1)
|
||
min-width: 0px → —
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
background-color: initial → —
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > input:nth-of-type(2) [native-color]
|
||
padding-top: 0px → —
|
||
padding-right: 0px → —
|
||
padding-bottom: 0px → —
|
||
padding-left: 0px → —
|
||
width: 30px → —
|
||
min-width: 0px → —
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
background-color: initial → —
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) [color-reference] "sampled from image background"
|
||
display: flex → —
|
||
justify-content: flex-start → —
|
||
row-gap: 8px → —
|
||
column-gap: 8px → —
|
||
margin-top: 10px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > span
|
||
width: 9px → —
|
||
height: 9px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) [setting-group]
|
||
padding-top: 22px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 22px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label "COLOR SIMILARITY"
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
margin-bottom: 12px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label > output "72 %"
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > input
|
||
font-size: inherit → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div [range-hints]
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
margin-top: 10px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(1) "strict edges"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div > span:nth-of-type(2) "more removal"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) [setting-group toggle-group]
|
||
padding-top: 22px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 22px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
align-items: center → —
|
||
margin-bottom: 12px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > span "OUTER COLOR ONLY"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > b [on toggle]
|
||
position: relative → —
|
||
width: 32px → —
|
||
height: 18px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(4) >label >input
|
||
✗ present in reference, absent in project
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > p "Only remove connected background pixels "
|
||
margin-top: 8px → —
|
||
margin-right: 0px → —
|
||
margin-bottom: 0px → —
|
||
margin-left: 0px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-size: 12px → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) [setting-group toggle-group]
|
||
padding-top: 22px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 22px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
align-items: center → —
|
||
margin-bottom: 12px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > span "SHOW MASK"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > b [toggle]
|
||
position: relative → —
|
||
width: 32px → —
|
||
height: 18px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.1em → —
|
||
|
||
body >main >div >div:nth-of-type(3) >section:nth-of-type(1) >div:nth-of-type(5) >label >input
|
||
✗ present in reference, absent in project
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > p "Preview the detected transparency mask."
|
||
margin-top: 8px → —
|
||
margin-right: 0px → —
|
||
margin-bottom: 0px → —
|
||
margin-left: 0px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-size: 12px → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) [settings-footer]
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
align-items: center → —
|
||
padding-top: 16px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 16px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button [reset-btn] "Reset"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 7px → —
|
||
column-gap: 7px → —
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
background-color: initial → —
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-size: 12px → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg [lucide lucide-icon lucide-rotate-ccw]
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-size: 12px → 16px
|
||
line-height: inherit → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span [auto-note] "updates automatically"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 8px → —
|
||
column-gap: 8px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i
|
||
display: inline-block → —
|
||
width: 6px → —
|
||
height: 6px → —
|
||
background-color: rgb(37, 169, 106) → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) [remover-preview]
|
||
min-width: 0px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) [preview-toolbar]
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
align-items: center → —
|
||
padding-top: 18px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 18px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span [label] "SOURCE / RESULT"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
letter-spacing: 0.12em → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong "comparison.png"
|
||
display: block → —
|
||
margin-top: 5px → —
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [preview-actions]
|
||
display: flex → —
|
||
flex-wrap: wrap → —
|
||
justify-content: flex-end → —
|
||
align-items: center → —
|
||
row-gap: 10px → —
|
||
column-gap: 10px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [processed] "processed"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 5px → —
|
||
column-gap: 5px → —
|
||
color: rgb(37, 169, 106) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg [lucide lucide-check lucide-icon]
|
||
color: rgb(37, 169, 106) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button [download-btn] "Download result"
|
||
display: flex → —
|
||
justify-content: center → —
|
||
align-items: center → —
|
||
row-gap: 9px → —
|
||
column-gap: 9px → —
|
||
margin-top: 18px → —
|
||
width: 100% → —
|
||
height: 42px → —
|
||
border-top-width: 0px → —
|
||
border-top-style: none → —
|
||
border-top-color: currentcolor → —
|
||
color: rgb(255, 255, 255) → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg [lucide lucide-download lucide-icon]
|
||
color: rgb(255, 255, 255) → #17212b [var(--foreground)]
|
||
font-family: — → inherit
|
||
font-size: — → 16px
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) [comparison-grid]
|
||
display: grid → —
|
||
row-gap: 18px → —
|
||
column-gap: 18px → —
|
||
grid-template-columns: repeat(2, minmax(0px, 1fr)) → —
|
||
padding-top: 20px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 20px → —
|
||
padding-left: 20px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-card]
|
||
min-width: 0px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) [image-label]
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
margin-bottom: 10px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span "SOURCE"
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > b "original.png"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
font-weight: 400 → —
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) [remover-canvas source-canvas]
|
||
display: grid → —
|
||
position: relative → —
|
||
align-items: center → —
|
||
min-height: clamp(360px, 30vw, 560px) → —
|
||
background-color: rgb(232, 238, 242) → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div [subject subject-source]
|
||
display: grid → —
|
||
align-items: center → —
|
||
width: 74% → —
|
||
height: 68% → —
|
||
transform: rotate(-3deg) → —
|
||
color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > span "OBJECT"
|
||
color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span [canvas-size] "1200 × 800"
|
||
position: absolute → —
|
||
right: 10px → —
|
||
bottom: 9px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [image-card]
|
||
min-width: 0px → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) [image-label]
|
||
display: flex → —
|
||
justify-content: space-between → —
|
||
margin-bottom: 10px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > span "RESULT"
|
||
color: #1769d2 [var(--blue)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > b "removed-bg.png"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
font-weight: 400 → —
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) [remover-canvas]
|
||
display: grid → —
|
||
position: relative → —
|
||
align-items: center → —
|
||
min-height: clamp(360px, 30vw, 560px) → —
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div [subject]
|
||
display: grid → —
|
||
align-items: center → —
|
||
width: 74% → —
|
||
height: 68% → —
|
||
color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span "PNG"
|
||
color: rgba(255, 255, 255, 0.85) → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span [canvas-size] "1200 × 800"
|
||
position: absolute → —
|
||
right: 10px → —
|
||
bottom: 9px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) [result-meta]
|
||
display: flex → —
|
||
row-gap: 24px → —
|
||
column-gap: 24px → —
|
||
padding-top: 16px → —
|
||
padding-right: 20px → —
|
||
padding-bottom: 16px → —
|
||
padding-left: 20px → —
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) "FORMAT"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(1) > b "PNG-24"
|
||
margin-left: 6px → —
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
font-weight: 600 → —
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) "ALPHA"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(2) > b "ENABLED"
|
||
margin-left: 6px → —
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
font-weight: 600 → —
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) "SIMILARITY"
|
||
color: #6d7883 [var(--muted)] → #17212b [var(--foreground)]
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
line-height: — → 1.5
|
||
|
||
body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > span:nth-of-type(3) > b "72 %"
|
||
margin-left: 6px → —
|
||
font-family: — → "IBM Plex Sans", sans-serif [var(--font-sans)]
|
||
font-size: — → 16px
|
||
font-weight: 600 → —
|
||
line-height: — → 1.5
|
||
|
||
body > main > footer [preview-footer]
|
||
row-gap: — → 1rem
|
||
column-gap: — → 1rem
|
||
padding-right: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px)
|
||
padding-left: clamp(20px, 4vw, 72px) → clamp(20px, 4vw, 64px)
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > footer > span:nth-of-type(1) "easy-png-tools"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 7px → —
|
||
column-gap: 7px → —
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > footer > span:nth-of-type(1) > b [version] "v2.4.0"
|
||
font-weight: 400 → —
|
||
letter-spacing: — → 0.08em
|
||
|
||
body > main > footer > span:nth-of-type(2) "© 2024"
|
||
display: flex → —
|
||
align-items: center → —
|
||
row-gap: 7px → —
|
||
column-gap: 7px → —
|
||
letter-spacing: — → 0.08em
|
||
|
||
body >main >footer >span:nth-of-type(3) "© 2024"
|
||
✗ present in reference, absent in project
|
||
|
||
body >div
|
||
✗ present in reference, absent in project
|