easy-png-tools2/web/audit/cdp-audit-768x1024.txt

CDP visual audit
2026-08-30T16:20:46.245Z
viewport 768x1024, tolerance 1px, theme light

=== [768x1024] /preview/demo  (vs demo.html)  —  172 differences ===

body > main > header  [topbar]
    h:  79  →  64  (-15px)

body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
    w:  30  →  14.6  (-15.4px)

body > main > header > div > span > i  [status-dot]
    display:  —  →  inline-block
    w:  0  →  4.7  (+4.7px)
    h:  0  →  6  (+6px)

body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
    display:  grid  →  inline-flex
    justify-content:  —  →  center
    width:  —  →  auto
    height:  —  →  auto
    border-top-color:  currentcolor  →  transparent
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(1) > svg  [lucide lucide-circle-question-mark lucide-icon]
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(2)  [icon-btn icon-btn--bare]
    display:  grid  →  inline-flex
    justify-content:  —  →  center
    width:  —  →  auto
    height:  —  →  auto
    border-top-color:  currentcolor  →  transparent
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(2) > svg  [lucide lucide-icon lucide-moon]
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > div  [lang]
    display:  flex  →  inline-flex
    align-items:  center  →  —

body > main > header > div > div > span  [lang-div]  "/"
    align-self:  —  →  center
    color:  #17212b [var(--foreground)]  →  #6d7883 [var(--muted)]
    font-family:  "IBM Plex Sans", sans-serif [var(--font-sans)]  →  —

body > main > header > div > div > button:nth-of-type(2)  [lang-btn]  "EN"
    letter-spacing:  —  →  0.06em

body > main > header > div > div > button:nth-of-type(1)  [active lang-btn]  "RU"
    letter-spacing:  —  →  0.06em

body > main > header > nav  [nav]
    row-gap:  22px  →  18px
    column-gap:  22px  →  18px
    margin-right:  28px  →  —
    margin-left:  auto  →  24px

body > main > header > nav > a:nth-of-type(1)  "Workspace"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(2)  "Catalog"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(3)  "Gradient"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(4)  "Background remover"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > div  [ws]
    width:  100%  →  —

body > main > div > section:nth-of-type(2)  [preview-panel]
    align-self:  start  →  —
    margin-top:  0px  →  —
    y:  1336.2  →  1193.8  (-142.4px)

body > main > div > section:nth-of-type(2) > div:nth-of-type(2)  [preview-stack]
    grid-template-columns:  1fr 1fr  →  1fr
    width:  100%  →  —
    min-width:  0px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1)  [preview-tile]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  0.3rem
    column-gap:  —  →  0.3rem
    padding-top:  —  →  0.4rem
    padding-right:  —  →  0.4rem
    padding-bottom:  —  →  0.4rem
    padding-left:  —  →  0.4rem
    width:  100%  →  —
    min-width:  0px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1)  [tile-canvas]
    display:  grid  →  —
    align-items:  center  →  —
    padding-top:  16px  →  —
    padding-right:  16px  →  —
    padding-bottom:  16px  →  —
    padding-left:  16px  →  —
    width:  100%  →  —
    min-width:  0px  →  —
    min-height:  clamp(300px, 22vw, 430px)  →  120px
    background-color:  rgb(228, 232, 235)  →  —
    background-image:  linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%)  →  —
    background-size:  14px 14px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > div  [ph]
    min-width:  0px  →  —
    max-width:  100%  →  —
    w:  247.2  →  546.6  (+299.4px)

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2)  [tile-label]
    align-items:  —  →  baseline
    row-gap:  8px  →  0.5rem
    column-gap:  8px  →  0.5rem
    padding-top:  8px  →  —
    padding-right:  8px  →  —
    padding-bottom:  8px  →  —
    padding-left:  8px  →  —
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span  "SOURCE"
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > b  "original.png · 1200 × 800"
    text-align:  right  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2)  [preview-tile]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  0.3rem
    column-gap:  —  →  0.3rem
    padding-top:  —  →  0.4rem
    padding-right:  —  →  0.4rem
    padding-bottom:  —  →  0.4rem
    padding-left:  —  →  0.4rem
    width:  100%  →  —
    min-width:  0px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1)  [tile-canvas]
    display:  grid  →  —
    align-items:  center  →  —
    padding-top:  16px  →  —
    padding-right:  16px  →  —
    padding-bottom:  16px  →  —
    padding-left:  16px  →  —
    width:  100%  →  —
    min-width:  0px  →  —
    min-height:  clamp(300px, 22vw, 430px)  →  120px
    background-color:  rgb(228, 232, 235)  →  —
    background-image:  linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%)  →  —
    background-size:  14px 14px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div  [ph]
    min-width:  0px  →  —
    max-width:  100%  →  —
    w:  247.2  →  546.6  (+299.4px)

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2)  [tile-label]
    align-items:  —  →  baseline
    row-gap:  8px  →  0.5rem
    column-gap:  8px  →  0.5rem
    padding-top:  8px  →  —
    padding-right:  8px  →  —
    padding-bottom:  8px  →  —
    padding-left:  8px  →  —
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span  "STEP 01"
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > b  "gradient applied"
    text-align:  right  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3)  [preview-tile]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  0.3rem
    column-gap:  —  →  0.3rem
    padding-top:  —  →  0.4rem
    padding-right:  —  →  0.4rem
    padding-bottom:  —  →  0.4rem
    padding-left:  —  →  0.4rem
    width:  100%  →  —
    min-width:  0px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1)  [tile-canvas]
    display:  grid  →  —
    align-items:  center  →  —
    padding-top:  16px  →  —
    padding-right:  16px  →  —
    padding-bottom:  16px  →  —
    padding-left:  16px  →  —
    width:  100%  →  —
    min-width:  0px  →  —
    min-height:  clamp(300px, 22vw, 430px)  →  120px
    background-color:  rgb(228, 232, 235)  →  —
    background-image:  linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%)  →  —
    background-size:  14px 14px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(1) > div  [ph]
    min-width:  0px  →  —
    max-width:  100%  →  —
    w:  247.2  →  546.6  (+299.4px)

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2)  [tile-label]
    align-items:  —  →  baseline
    row-gap:  8px  →  0.5rem
    column-gap:  8px  →  0.5rem
    padding-top:  8px  →  —
    padding-right:  8px  →  —
    padding-bottom:  8px  →  —
    padding-left:  8px  →  —
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > span  "STEP 02"
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div:nth-of-type(2) > b  "background removed"
    text-align:  right  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4)  [preview-tile]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  0.3rem
    column-gap:  —  →  0.3rem
    padding-top:  —  →  0.4rem
    padding-right:  —  →  0.4rem
    padding-bottom:  —  →  0.4rem
    padding-left:  —  →  0.4rem
    width:  100%  →  —
    min-width:  0px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1)  [tile-canvas]
    display:  grid  →  —
    align-items:  center  →  —
    padding-top:  16px  →  —
    padding-right:  16px  →  —
    padding-bottom:  16px  →  —
    padding-left:  16px  →  —
    width:  100%  →  —
    min-width:  0px  →  —
    min-height:  clamp(300px, 22vw, 430px)  →  120px
    background-color:  rgb(228, 232, 235)  →  —
    background-image:  linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%)  →  —
    background-size:  14px 14px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(1) > div  [ph]
    min-width:  0px  →  —
    max-width:  100%  →  —
    w:  247.2  →  546.6  (+299.4px)

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2)  [tile-label]
    align-items:  —  →  baseline
    row-gap:  8px  →  0.5rem
    column-gap:  8px  →  0.5rem
    padding-top:  8px  →  —
    padding-right:  8px  →  —
    padding-bottom:  8px  →  —
    padding-left:  8px  →  —
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > span  "STEP 03"
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(4) > div:nth-of-type(2) > b  "outline added"
    text-align:  right  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5)  [preview-tile]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  0.3rem
    column-gap:  —  →  0.3rem
    padding-top:  —  →  0.4rem
    padding-right:  —  →  0.4rem
    padding-bottom:  —  →  0.4rem
    padding-left:  —  →  0.4rem
    width:  100%  →  —
    min-width:  0px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1)  [tile-canvas]
    display:  grid  →  —
    align-items:  center  →  —
    padding-top:  16px  →  —
    padding-right:  16px  →  —
    padding-bottom:  16px  →  —
    padding-left:  16px  →  —
    width:  100%  →  —
    min-width:  0px  →  —
    min-height:  clamp(300px, 22vw, 430px)  →  120px
    background-color:  rgb(228, 232, 235)  →  —
    background-image:  linear-gradient(45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(210, 216, 220) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(210, 216, 220) 75%)  →  —
    background-size:  14px 14px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(1) > div  [active ph]
    min-width:  0px  →  —
    max-width:  100%  →  —
    w:  247.2  →  546.6  (+299.4px)

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2)  [tile-label]
    align-items:  —  →  baseline
    row-gap:  8px  →  0.5rem
    column-gap:  8px  →  0.5rem
    padding-top:  8px  →  —
    padding-right:  8px  →  —
    padding-bottom:  8px  →  —
    padding-left:  8px  →  —
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > span  "FINAL OUTPUT"
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(5) > div:nth-of-type(2) > b  "ready · PNG-24"
    text-align:  right  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(1)  [section-label]
    row-gap:  —  →  16px
    column-gap:  —  →  16px
    padding-bottom:  15px  →  12px

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1)  [section-text]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  2px
    column-gap:  —  →  2px
    min-width:  —  →  0px

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span  [mono-label]  "PIPELINE OUTPUTS"
    line-height:  —  →  1.2
    letter-spacing:  0.12em  →  0.1em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2)  [download-btn]  "Download result"
    display:  flex  →  inline-flex
    justify-content:  center  →  —
    row-gap:  9px  →  8px
    column-gap:  9px  →  8px
    margin-top:  18px  →  —
    padding-top:  —  →  9px
    padding-right:  —  →  14px
    padding-bottom:  —  →  9px
    padding-left:  —  →  14px
    width:  100%  →  —
    height:  42px  →  —
    border-top-width:  0px  →  —
    border-top-style:  none  →  —
    border-top-color:  currentcolor  →  —
    letter-spacing:  —  →  0.04em

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1)  [lucide lucide-download lucide-icon]
    letter-spacing:  —  →  0.04em

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2)  [lucide lucide-arrow-down-to-line lucide-icon]
    letter-spacing:  —  →  0.04em

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1)  [history-toggle]  "Hide intermediate"
    margin-top:  0px  →  18px
    margin-right:  0px  →  —
    margin-bottom:  0px  →  —
    margin-left:  0px  →  —
    padding-top:  8px  →  11px
    padding-right:  10px  →  14px
    padding-bottom:  8px  →  11px
    padding-left:  10px  →  14px
    width:  auto  →  100%

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg  [lucide lucide-chevron-down lucide-icon]
    transform:  rotate(180deg)  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div  [meta-list]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  0.15rem
    column-gap:  8px  →  0.15rem
    grid-template-columns:  repeat(3, 1fr)  →  —
    padding-top:  14px  →  —

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1)  [meta-row]
    display:  grid  →  flex
    justify-content:  —  →  space-between
    align-items:  —  →  baseline
    row-gap:  5px  →  1rem
    column-gap:  5px  →  1rem
    padding-top:  —  →  0.25rem
    padding-bottom:  —  →  0.25rem

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > span  [meta-caption]  "DIMENSIONS"
    line-height:  —  →  1.5
    letter-spacing:  —  →  0.1em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1) > b  [meta-value]  "1200 × 800 px"
    margin-top:  5px  →  —
    line-height:  —  →  1.5

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2)  [meta-row]
    display:  grid  →  flex
    justify-content:  —  →  space-between
    align-items:  —  →  baseline
    row-gap:  5px  →  1rem
    column-gap:  5px  →  1rem
    padding-top:  —  →  0.25rem
    padding-bottom:  —  →  0.25rem

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > span  [meta-caption]  "FORMAT"
    line-height:  —  →  1.5
    letter-spacing:  —  →  0.1em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(2) > b  [meta-value]  "PNG-24"
    margin-top:  5px  →  —
    line-height:  —  →  1.5

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3)  [meta-row]
    display:  grid  →  flex
    justify-content:  —  →  space-between
    align-items:  —  →  baseline
    row-gap:  5px  →  1rem
    column-gap:  5px  →  1rem
    padding-top:  —  →  0.25rem
    padding-bottom:  —  →  0.25rem

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > span  [meta-caption]  "SIZE"
    line-height:  —  →  1.5
    letter-spacing:  —  →  0.1em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(3) > b  [meta-value]  "1.2 MB"
    margin-top:  5px  →  —
    line-height:  —  →  1.5

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3)  [icon-btn icon-btn--ghost]
    display:  grid  →  inline-flex
    justify-content:  —  →  center
    padding-top:  6px  →  —
    padding-bottom:  6px  →  —
    width:  —  →  2rem
    height:  —  →  2rem
    border-top-width:  0px  →  —
    border-top-style:  none  →  —
    border-top-color:  currentcolor  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(3) > svg  [lucide lucide-icon lucide-settings-2]
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING WORKSPACE"
    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]

body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span  "/"
    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]

body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1  "Build your image pipeline."
    max-width:  700px  →  —
    line-height:  1  →  0.9

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1)  [step-card]
    grid-template-columns:  46px 20px 1fr  →  46px 1fr
    grid-template-rows:  —  →  auto 1fr
    min-height:  138px  →  —

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(1)  [step-index]  "01"
    padding-bottom:  0px  →  6px
    line-height:  —  →  1

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > svg  [drag lucide lucide-grip-vertical lucide-icon]
    margin-top:  17px  →  —
    color:  #cbd3da [var(--line)]  →  #17212b [var(--foreground)]

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2)  [step-body]
    display:  —  →  flex
    flex-direction:  —  →  column
    padding-top:  15px  →  —
    padding-right:  18px  →  —
    padding-bottom:  18px  →  —
    padding-left:  18px  →  —
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1)  [step-heading]
    align-items:  center  →  flex-start
    row-gap:  15px  →  0.5rem
    column-gap:  15px  →  0.5rem
    padding-top:  —  →  0.5rem
    padding-right:  —  →  0.75rem
    padding-bottom:  —  →  0.5rem
    padding-left:  —  →  0.75rem

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1)  [step-heading-text]
    display:  —  →  flex
    flex-direction:  —  →  column
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span  [step-type]  "BACKGROUND"
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2)  [step-tools]
    row-gap:  13px  →  8px
    column-gap:  13px  →  8px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button  [step-remove]
    display:  —  →  inline-flex
    border-top-width:  0px  →  medium
    color:  #6d7883 [var(--muted)]  →  #e5484d [var(--danger)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg  [lucide lucide-icon lucide-x]
    color:  #6d7883 [var(--muted)]  →  #e5484d [var(--danger)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span  [badge badge--success]  "AUTO"
    display:  flex  →  inline-flex
    row-gap:  4px  →  0.3rem
    column-gap:  4px  →  0.3rem
    padding-top:  —  →  0.15rem
    padding-right:  —  →  0.45rem
    padding-bottom:  —  →  0.15rem
    padding-left:  —  →  0.45rem
    color:  rgb(35, 131, 84)  →  #25a96a [var(--success)]
    line-height:  —  →  1.5
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg  [lucide lucide-check lucide-icon]
    color:  rgb(35, 131, 84)  →  #25a96a [var(--success)]
    line-height:  —  →  1.5
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2)  [controls]
    row-gap:  16px  →  0px
    column-gap:  16px  →  24px
    grid-template-columns:  1.1fr 1fr 1.2fr  →  —

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1)  [control-block]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  8px
    column-gap:  —  →  8px
    padding-top:  —  →  10px
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label  "COLOR"
    align-items:  —  →  baseline
    row-gap:  —  →  8px
    column-gap:  —  →  8px
    letter-spacing:  0.08em  →  0.05em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div  [color-field]
    row-gap:  8px  →  0.4rem
    column-gap:  8px  →  0.4rem
    padding-right:  8px  →  —
    padding-left:  8px  →  —
    height:  32px  →  —

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > span  [swatch]
    width:  14px  →  1.6rem
    height:  14px  →  1.6rem

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > input
    padding-top:  —  →  0.35rem
    padding-right:  —  →  0.5rem
    padding-bottom:  —  →  0.35rem
    padding-left:  —  →  0.5rem
    border-top-width:  0px  →  —
    border-top-style:  none  →  —
    border-top-color:  currentcolor  →  —
    background-color:  initial  →  —
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div > svg  [lucide lucide-chevron-down lucide-icon]
    color:  #17212b [var(--foreground)]  →  #6d7883 [var(--muted)]

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2)  [control-block]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  0px
    column-gap:  —  →  0px
    padding-top:  —  →  10px
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label  "DIRECTION"
    align-items:  —  →  center
    row-gap:  —  →  0.5rem
    column-gap:  —  →  0.5rem
    letter-spacing:  0.08em  →  0.05em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label > output  "135 °"
    letter-spacing:  0.08em  →  0.05em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > input
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5
    w:  632  →  688  (+56px)

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3)  [control-block]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  8px
    column-gap:  —  →  8px
    padding-top:  —  →  10px
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label  "OPACITY"
    display:  flex  →  —
    justify-content:  space-between  →  —
    margin-bottom:  8px  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.08em  →  —

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > label > output  "100%"
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.08em  →  —

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div  [segmented]
    display:  flex  →  inline-flex

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(2)  [segment selected]  "100"
    display:  —  →  inline-flex
    align-items:  —  →  center
    padding-right:  —  →  0.7rem
    padding-left:  —  →  0.7rem
    border-top-width:  0px  →  medium
    letter-spacing:  —  →  0.06em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(3)  [segment]  "75"
    display:  —  →  inline-flex
    align-items:  —  →  center
    padding-right:  —  →  0.7rem
    padding-left:  —  →  0.7rem
    border-top-width:  0px  →  medium
    letter-spacing:  —  →  0.06em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(4)  [segment]  "50"
    display:  —  →  inline-flex
    align-items:  —  →  center
    padding-right:  —  →  0.7rem
    padding-left:  —  →  0.7rem
    border-top-width:  0px  →  medium
    letter-spacing:  —  →  0.06em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(3) > div > button:nth-of-type(1)  [segment]  "25"
    display:  —  →  inline-flex
    align-items:  —  →  center
    padding-right:  —  →  0.7rem
    padding-left:  —  →  0.7rem
    border-top-width:  0px  →  medium
    background-color:  —  →  transparent
    color:  rgb(255, 255, 255)  →  #6d7883 [var(--muted)]
    letter-spacing:  —  →  0.06em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2)  [step-card]
    grid-template-columns:  46px 20px 1fr  →  46px 1fr
    grid-template-rows:  —  →  auto 1fr
    min-height:  138px  →  —

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(1)  [step-index]  "02"
    padding-bottom:  0px  →  6px
    line-height:  —  →  1

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > svg  [drag lucide lucide-grip-vertical lucide-icon]
    margin-top:  17px  →  —
    color:  #cbd3da [var(--line)]  →  #17212b [var(--foreground)]

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2)  [step-body]
    display:  —  →  flex
    flex-direction:  —  →  column
    padding-top:  15px  →  —
    padding-right:  18px  →  —
    padding-bottom:  18px  →  —
    padding-left:  18px  →  —
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1)  [step-heading]
    align-items:  center  →  flex-start
    row-gap:  15px  →  0.5rem
    column-gap:  15px  →  0.5rem
    padding-top:  —  →  0.5rem
    padding-right:  —  →  0.75rem
    padding-bottom:  —  →  0.5rem
    padding-left:  —  →  0.75rem

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1)  [step-heading-text]
    display:  —  →  flex
    flex-direction:  —  →  column
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span  [step-type]  "TRANSFORM"
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2)  [step-tools]
    row-gap:  13px  →  8px
    column-gap:  13px  →  8px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button  [step-remove]
    display:  —  →  inline-flex
    border-top-width:  0px  →  medium
    color:  #6d7883 [var(--muted)]  →  #e5484d [var(--danger)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg  [lucide lucide-icon lucide-x]
    color:  #6d7883 [var(--muted)]  →  #e5484d [var(--danger)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span  [badge badge--success]  "AUTO"
    display:  flex  →  inline-flex
    row-gap:  4px  →  0.3rem
    column-gap:  4px  →  0.3rem
    padding-top:  —  →  0.15rem
    padding-right:  —  →  0.45rem
    padding-bottom:  —  →  0.15rem
    padding-left:  —  →  0.45rem
    color:  rgb(35, 131, 84)  →  #25a96a [var(--success)]
    line-height:  —  →  1.5
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg  [lucide lucide-check lucide-icon]
    color:  rgb(35, 131, 84)  →  #25a96a [var(--success)]
    line-height:  —  →  1.5
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3)  [step-card]
    grid-template-columns:  46px 20px 1fr  →  46px 1fr
    grid-template-rows:  —  →  auto 1fr
    min-height:  138px  →  —

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(1)  [step-index]  "03"
    padding-bottom:  0px  →  6px
    line-height:  —  →  1

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > svg  [drag lucide lucide-grip-vertical lucide-icon]
    margin-top:  17px  →  —
    color:  #cbd3da [var(--line)]  →  #17212b [var(--foreground)]

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2)  [step-body]
    display:  —  →  flex
    flex-direction:  —  →  column
    padding-top:  15px  →  —
    padding-right:  18px  →  —
    padding-bottom:  18px  →  —
    padding-left:  18px  →  —
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1)  [step-heading]
    align-items:  center  →  flex-start
    row-gap:  15px  →  0.5rem
    column-gap:  15px  →  0.5rem
    padding-top:  —  →  0.5rem
    padding-right:  —  →  0.75rem
    padding-bottom:  —  →  0.5rem
    padding-left:  —  →  0.75rem

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1)  [step-heading-text]
    display:  —  →  flex
    flex-direction:  —  →  column
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span  [step-type]  "STYLE"
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2)  [step-tools]
    row-gap:  13px  →  8px
    column-gap:  13px  →  8px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button  [step-remove]
    display:  —  →  inline-flex
    border-top-width:  0px  →  medium
    color:  #6d7883 [var(--muted)]  →  #e5484d [var(--danger)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg  [lucide lucide-icon lucide-x]
    color:  #6d7883 [var(--muted)]  →  #e5484d [var(--danger)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span  [badge badge--success]  "AUTO"
    display:  flex  →  inline-flex
    row-gap:  4px  →  0.3rem
    column-gap:  4px  →  0.3rem
    padding-top:  —  →  0.15rem
    padding-right:  —  →  0.45rem
    padding-bottom:  —  →  0.15rem
    padding-left:  —  →  0.45rem
    color:  rgb(35, 131, 84)  →  #25a96a [var(--success)]
    line-height:  —  →  1.5
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg  [lucide lucide-check lucide-icon]
    color:  rgb(35, 131, 84)  →  #25a96a [var(--success)]
    line-height:  —  →  1.5
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2)  [compact controls]
    row-gap:  16px  →  0px
    grid-template-columns:  1fr 1fr  →  —

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1)  [control-block]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  0px
    column-gap:  —  →  0px
    padding-top:  —  →  10px
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label  "WIDTH"
    align-items:  —  →  center
    row-gap:  —  →  0.5rem
    column-gap:  —  →  0.5rem
    letter-spacing:  0.08em  →  0.05em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output  "2 px"
    letter-spacing:  0.08em  →  0.05em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5
    w:  632  →  688  (+56px)

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2)  [control-block]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  8px
    column-gap:  —  →  8px
    padding-top:  —  →  10px
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > label  "COLOR"
    align-items:  —  →  baseline
    row-gap:  —  →  8px
    column-gap:  —  →  8px
    letter-spacing:  0.08em  →  0.05em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div  [color-field]
    row-gap:  8px  →  0.4rem
    column-gap:  8px  →  0.4rem
    padding-right:  8px  →  —
    padding-left:  8px  →  —
    height:  32px  →  —

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > span  [dark swatch]
    width:  14px  →  1.6rem
    height:  14px  →  1.6rem

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > div > input
    padding-top:  —  →  0.35rem
    padding-right:  —  →  0.5rem
    padding-bottom:  —  →  0.35rem
    padding-left:  —  →  0.5rem
    border-top-width:  0px  →  —
    border-top-style:  none  →  —
    border-top-color:  currentcolor  →  —
    background-color:  initial  →  —
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4)  [step-card]
    grid-template-columns:  46px 20px 1fr  →  46px 1fr
    grid-template-rows:  —  →  auto 1fr
    min-height:  138px  →  —

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(1)  [step-index]  "04"
    padding-bottom:  0px  →  6px
    line-height:  —  →  1

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > svg  [drag lucide lucide-grip-vertical lucide-icon]
    margin-top:  17px  →  —
    color:  #cbd3da [var(--line)]  →  #17212b [var(--foreground)]

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2)  [step-body]
    display:  —  →  flex
    flex-direction:  —  →  column
    padding-top:  15px  →  —
    padding-right:  18px  →  —
    padding-bottom:  18px  →  —
    padding-left:  18px  →  —
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1)  [step-heading]
    align-items:  center  →  flex-start
    row-gap:  15px  →  0.5rem
    column-gap:  15px  →  0.5rem
    padding-top:  —  →  0.5rem
    padding-right:  —  →  0.75rem
    padding-bottom:  —  →  0.5rem
    padding-left:  —  →  0.75rem

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1)  [step-heading-text]
    display:  —  →  flex
    flex-direction:  —  →  column
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span  [step-type]  "STYLE"
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2)  [step-tools]
    row-gap:  13px  →  8px
    column-gap:  13px  →  8px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button  [step-remove]
    display:  —  →  inline-flex
    border-top-width:  0px  →  medium
    color:  #6d7883 [var(--muted)]  →  #e5484d [var(--danger)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button > svg  [lucide lucide-icon lucide-x]
    color:  #6d7883 [var(--muted)]  →  #e5484d [var(--danger)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span  [badge badge--success]  "AUTO"
    display:  flex  →  inline-flex
    row-gap:  4px  →  0.3rem
    column-gap:  4px  →  0.3rem
    padding-top:  —  →  0.15rem
    padding-right:  —  →  0.45rem
    padding-bottom:  —  →  0.15rem
    padding-left:  —  →  0.45rem
    color:  rgb(35, 131, 84)  →  #25a96a [var(--success)]
    line-height:  —  →  1.5
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > span > svg  [lucide lucide-check lucide-icon]
    color:  rgb(35, 131, 84)  →  #25a96a [var(--success)]
    line-height:  —  →  1.5
    letter-spacing:  —  →  0.08em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2)  [compact controls]
    row-gap:  16px  →  0px
    grid-template-columns:  1fr 1fr  →  —

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1)  [control-block]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  0px
    column-gap:  —  →  0px
    padding-top:  —  →  10px
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label  "RADIUS"
    align-items:  —  →  center
    row-gap:  —  →  0.5rem
    column-gap:  —  →  0.5rem
    letter-spacing:  0.08em  →  0.05em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > label > output  "18 px"
    letter-spacing:  0.08em  →  0.05em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) > input
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5
    w:  632  →  688  (+56px)

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2)  [toggle-row]
    display:  —  →  flex
    justify-content:  —  →  space-between
    align-items:  —  →  center
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    padding-top:  —  →  10px
    min-width:  —  →  0px
    font-size:  —  →  0.85rem
    line-height:  —  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > span  "Preserve aspect ratio"
    font-size:  —  →  0.85rem
    line-height:  —  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button  [on toggle]
    width:  32px  →  2.4rem
    height:  18px  →  1.3rem
    font-size:  inherit  →  0.85rem
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(4) > article:nth-of-type(4) > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) > button > i  [toggle-knob]
    position:  —  →  absolute
    top:  —  →  1px
    left:  —  →  1px
    width:  —  →  calc(-4px + 1.3rem)
    height:  —  →  calc(-4px + 1.3rem)
    transform:  —  →  translateX(1.1rem)
    background-color:  —  →  rgb(255, 255, 255)
    font-size:  inherit  →  0.85rem
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button  [reset-btn]  "Reset pipeline"
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg  [lucide lucide-icon lucide-rotate-ccw]
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(3)  [section-label]
    row-gap:  —  →  16px
    column-gap:  —  →  16px

body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div  [section-text]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  2px
    column-gap:  —  →  2px
    min-width:  —  →  0px

body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > div > span  [mono-label]  "PROCESSING PIPELINE"
    line-height:  —  →  1.2
    letter-spacing:  0.12em  →  0.1em
    text-transform:  —  →  uppercase

body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button  [add-btn]  "Add tool"
    line-height:  inherit  →  1.5

body > main > div > section:nth-of-type(1) > div:nth-of-type(3) > button > svg  [lucide lucide-icon lucide-plus]
    line-height:  inherit  →  1.5

body > main > footer  [preview-footer]
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    padding-right:  clamp(20px, 4vw, 72px)  →  clamp(20px, 4vw, 64px)
    padding-left:  clamp(20px, 4vw, 72px)  →  clamp(20px, 4vw, 64px)
    letter-spacing:  —  →  0.08em

body > main > footer > span:nth-of-type(1)  "easy-png-tools"
    display:  flex  →  —
    align-items:  center  →  —
    row-gap:  7px  →  —
    column-gap:  7px  →  —
    letter-spacing:  —  →  0.08em

body > main > footer > span:nth-of-type(1) > b  [version]  "v2.4.0"
    font-weight:  400  →  —
    letter-spacing:  —  →  0.08em

body > main > footer > span:nth-of-type(2)  "© 2024"
    display:  flex  →  —
    align-items:  center  →  —
    row-gap:  7px  →  —
    column-gap:  7px  →  —
    letter-spacing:  —  →  0.08em

body >main >footer >span:nth-of-type(2) >svg  [lucide lucide-link-2 lucide-link2]
    ✗ present in reference, absent in project

body >main >footer >span:nth-of-type(3)  "© 2024"
    ✗ present in reference, absent in project

body >div
    ✗ present in reference, absent in project


=== [768x1024] /preview/list-tools  (vs list-tools.html)  —  154 differences ===

body > main > header  [topbar]
    h:  79  →  64  (-15px)

body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
    w:  30  →  15.4  (-14.6px)

body > main > header > div > span > i  [status-dot]
    display:  —  →  inline-block
    w:  0  →  3.3  (+3.3px)
    h:  0  →  6  (+6px)

body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
    display:  grid  →  inline-flex
    justify-content:  —  →  center
    width:  —  →  auto
    height:  —  →  auto
    border-top-color:  currentcolor  →  transparent
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(1) > svg  [lucide lucide-circle-question-mark lucide-icon]
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(2)  [icon-btn icon-btn--bare]
    display:  grid  →  inline-flex
    justify-content:  —  →  center
    width:  —  →  auto
    height:  —  →  auto
    border-top-color:  currentcolor  →  transparent
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(2) > svg  [lucide lucide-icon lucide-moon]
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > div  [lang]
    display:  flex  →  inline-flex
    align-items:  center  →  —

body > main > header > div > div > span  [lang-div]  "/"
    align-self:  —  →  center
    color:  #17212b [var(--foreground)]  →  #6d7883 [var(--muted)]
    font-family:  "IBM Plex Sans", sans-serif [var(--font-sans)]  →  —

body > main > header > div > div > button:nth-of-type(2)  [lang-btn]  "EN"
    letter-spacing:  —  →  0.06em

body > main > header > div > div > button:nth-of-type(1)  [active lang-btn]  "RU"
    letter-spacing:  —  →  0.06em

body > main > header > nav  [nav]
    row-gap:  22px  →  18px
    column-gap:  22px  →  18px
    margin-right:  28px  →  —
    margin-left:  auto  →  24px

body > main > header > nav > a:nth-of-type(1)  "Workspace"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(2)  "Catalog"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(3)  "Gradient"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(4)  "Background remover"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > div  [catalog-page]
    margin-top:  0px  →  —
    margin-right:  0px  →  —
    margin-bottom:  0px  →  —
    margin-left:  0px  →  —
    width:  100%  →  —
    max-width:  none  →  —

body > main > div > div:nth-of-type(1)  [catalog-head]
    flex-wrap:  —  →  wrap
    row-gap:  40px  →  1.5rem
    column-gap:  40px  →  1.5rem
    padding-bottom:  42px  →  —

body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div  [eyebrow]  "EASY-PNG-TOOLS / CATALOG"
    margin-bottom:  18px  →  0.5rem
    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
    letter-spacing:  0.12em  →  0.18em

body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1  "Tool catalog"
    margin-top:  12px  →  0px
    margin-bottom:  14px  →  0px
    max-width:  700px  →  —
    font-size:  clamp(36px, 4vw, 64px)  →  2rem
    font-weight:  650  →  700
    line-height:  1  →  1.5
    letter-spacing:  -0.06em  →  —

body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > p  "Focused utilities for working with PNG. "
    margin-top:  0px  →  0.5rem
    max-width:  660px  →  56ch
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  0.95rem
    line-height:  —  →  1.5

body > main > div > div:nth-of-type(1) > div:nth-of-type(2)  [catalog-total]
    flex-direction:  —  →  column
    align-items:  center  →  flex-end
    row-gap:  14px  →  —
    column-gap:  14px  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1
    text-align:  right  →  —

body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > b  "32"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  -0.08em  →  —
    text-align:  right  →  —

body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span  "TOOLS AVAILABLE"
    margin-top:  —  →  0.35rem
    letter-spacing:  —  →  0.08em

body > main > div > div:nth-of-type(1) > div:nth-of-type(2) > span > br
    letter-spacing:  —  →  0.08em

body > main > div > div:nth-of-type(2)  [catalog-toolbar]
    flex-wrap:  —  →  wrap
    row-gap:  24px  →  1rem
    column-gap:  24px  →  1rem
    padding-top:  24px  →  1.25rem
    padding-bottom:  42px  →  1.25rem

body > main > div > div:nth-of-type(2) > label  [catalog-search]
    display:  flex  →  inline-flex
    row-gap:  12px  →  0.5rem
    column-gap:  12px  →  0.5rem
    padding-top:  12px  →  0.5rem
    padding-right:  14px  →  0.75rem
    padding-bottom:  12px  →  0.5rem
    padding-left:  14px  →  0.75rem
    width:  min(420px, 100%)  →  —

body > main > div > div:nth-of-type(2) > label > input
    width:  100%  →  —
    border-top-width:  0px  →  medium

body > main > div > div:nth-of-type(2) > div  [catalog-filters]
    display:  flex  →  inline-flex
    row-gap:  6px  →  0.4rem
    column-gap:  6px  →  0.4rem

body > main > div > div:nth-of-type(2) > div > button:nth-of-type(1)  [active]  "ALL"
    padding-top:  8px  →  0.4rem
    padding-right:  10px  →  0.6rem
    padding-bottom:  8px  →  0.4rem
    padding-left:  10px  →  0.6rem
    background-color:  initial  →  —
    color:  #1769d2 [var(--blue)]  →  rgb(255, 255, 255)
    letter-spacing:  —  →  0.06em

body > main > div > div:nth-of-type(2) > div > button:nth-of-type(2)  "CONVERT"
    padding-top:  8px  →  0.4rem
    padding-right:  10px  →  0.6rem
    padding-bottom:  8px  →  0.4rem
    padding-left:  10px  →  0.6rem
    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
    letter-spacing:  —  →  0.06em

body > main > div > div:nth-of-type(2) > div > button:nth-of-type(3)  "TRANSPARENCY"
    padding-top:  8px  →  0.4rem
    padding-right:  10px  →  0.6rem
    padding-bottom:  8px  →  0.4rem
    padding-left:  10px  →  0.6rem
    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
    letter-spacing:  —  →  0.06em

body > main > div > div:nth-of-type(2) > div > button:nth-of-type(4)  "COLOR"
    padding-top:  8px  →  0.4rem
    padding-right:  10px  →  0.6rem
    padding-bottom:  8px  →  0.4rem
    padding-left:  10px  →  0.6rem
    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
    letter-spacing:  —  →  0.06em

body > main > div > div:nth-of-type(2) > div > button:nth-of-type(5)  "GEOMETRY"
    padding-top:  8px  →  0.4rem
    padding-right:  10px  →  0.6rem
    padding-bottom:  8px  →  0.4rem
    padding-left:  10px  →  0.6rem
    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
    letter-spacing:  —  →  0.06em

body > main > div > div:nth-of-type(2) > div > button:nth-of-type(6)  "FILTERS"
    padding-top:  8px  →  0.4rem
    padding-right:  10px  →  0.6rem
    padding-bottom:  8px  →  0.4rem
    padding-left:  10px  →  0.6rem
    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
    letter-spacing:  —  →  0.06em

body > main > div > div:nth-of-type(2) > div > button:nth-of-type(7)  "ANALYZE"
    padding-top:  8px  →  0.4rem
    padding-right:  10px  →  0.6rem
    padding-bottom:  8px  →  0.4rem
    padding-left:  10px  →  0.6rem
    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
    letter-spacing:  —  →  0.06em

body > main > div > div:nth-of-type(3) > section:nth-of-type(1)  [catalog-group]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    min-width:  0px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1)  [group-title]
    align-items:  center  →  baseline
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    padding-bottom:  12px  →  0.5rem
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span  "CONVERT"
    letter-spacing:  0.12em  →  0.14em

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > i  "05 TOOLS"
    letter-spacing:  0.12em  →  0.08em

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2)  [tool-cards]
    padding-top:  14px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(1) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(2) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(3) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(4) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > a:nth-of-type(5) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(2)  [catalog-group]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    min-width:  0px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1)  [group-title]
    align-items:  center  →  baseline
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    padding-bottom:  12px  →  0.5rem
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > span  "TRANSPARENCY"
    letter-spacing:  0.12em  →  0.14em

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > i  "05 TOOLS"
    letter-spacing:  0.12em  →  0.08em

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2)  [tool-cards]
    padding-top:  14px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(1) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(2) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(3) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(4) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > a:nth-of-type(5) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(3)  [catalog-group]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    min-width:  0px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1)  [group-title]
    align-items:  center  →  baseline
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    padding-bottom:  12px  →  0.5rem
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > span  "COLOR"
    letter-spacing:  0.12em  →  0.14em

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(1) > i  "05 TOOLS"
    letter-spacing:  0.12em  →  0.08em

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2)  [tool-cards]
    padding-top:  14px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(1) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(2) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(3) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(4) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(3) > div:nth-of-type(2) > a:nth-of-type(5) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(4)  [catalog-group]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    min-width:  0px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1)  [group-title]
    align-items:  center  →  baseline
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    padding-bottom:  12px  →  0.5rem
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > span  "GEOMETRY"
    letter-spacing:  0.12em  →  0.14em

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(1) > i  "05 TOOLS"
    letter-spacing:  0.12em  →  0.08em

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2)  [tool-cards]
    padding-top:  14px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(1) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(2) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(3) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(4) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(4) > div:nth-of-type(2) > a:nth-of-type(5) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(5)  [catalog-group]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    min-width:  0px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1)  [group-title]
    align-items:  center  →  baseline
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    padding-bottom:  12px  →  0.5rem
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > span  "FILTERS"
    letter-spacing:  0.12em  →  0.14em

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(1) > i  "04 TOOLS"
    letter-spacing:  0.12em  →  0.08em

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2)  [tool-cards]
    padding-top:  14px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(1) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(2) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(3) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(5) > div:nth-of-type(2) > a:nth-of-type(4) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(6)  [catalog-group]
    display:  —  →  flex
    flex-direction:  —  →  column
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    min-width:  0px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1)  [group-title]
    align-items:  center  →  baseline
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    padding-bottom:  12px  →  0.5rem
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > span  "ANALYZE"
    letter-spacing:  0.12em  →  0.14em

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(1) > i  "04 TOOLS"
    letter-spacing:  0.12em  →  0.08em

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2)  [tool-cards]
    padding-top:  14px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(1) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(2) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(3) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(1)  [tool-icon]
    w:  38  →  42  (+4px)
    h:  38  →  42  (+4px)

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > span:nth-of-type(2)  [tool-copy]
    display:  grid  →  flex
    flex-direction:  —  →  column
    row-gap:  8px  →  2px
    column-gap:  8px  →  2px

body > main > div > div:nth-of-type(3) > section:nth-of-type(6) > div:nth-of-type(2) > a:nth-of-type(4) > svg  [lucide lucide-arrow-up-right lucide-icon tool-arrow]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]

body > main > div > footer  [catalog-footer]  "ALL OPERATIONS RUN LOCALLY YOUR FILES NE"
    display:  —  →  flex
    flex-wrap:  —  →  wrap
    row-gap:  —  →  1.5rem
    column-gap:  —  →  1.5rem
    margin-top:  64px  →  56px
    padding-top:  20px  →  24px
    letter-spacing:  —  →  0.08em

body > main > div > footer > span  "•"
    margin-top:  0px  →  —
    margin-right:  8px  →  —
    margin-bottom:  0px  →  —
    margin-left:  8px  →  —
    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
    letter-spacing:  —  →  0.08em

body >main >footer  [preview-footer]
    + present in project, absent in reference

body >div
    ✗ present in reference, absent in project


=== [768x1024] /preview/tools/linear-gradient-png  (vs gradient.html)  —  92 differences ===

body > main > header  [topbar]
    h:  79  →  64  (-15px)

body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
    w:  30  →  14.6  (-15.4px)

body > main > header > div > span > i  [status-dot]
    display:  —  →  inline-block
    w:  0  →  4.7  (+4.7px)
    h:  0  →  6  (+6px)

body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
    display:  grid  →  inline-flex
    justify-content:  —  →  center
    width:  —  →  auto
    height:  —  →  auto
    border-top-color:  currentcolor  →  transparent
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(1) > svg  [lucide lucide-circle-question-mark lucide-icon]
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(2)  [icon-btn icon-btn--bare]
    display:  grid  →  inline-flex
    justify-content:  —  →  center
    width:  —  →  auto
    height:  —  →  auto
    border-top-color:  currentcolor  →  transparent
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(2) > svg  [lucide lucide-icon lucide-moon]
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > div  [lang]
    display:  flex  →  inline-flex
    align-items:  center  →  —

body > main > header > div > div > span  [lang-div]  "/"
    align-self:  —  →  center
    color:  #17212b [var(--foreground)]  →  #6d7883 [var(--muted)]
    font-family:  "IBM Plex Sans", sans-serif [var(--font-sans)]  →  —

body > main > header > div > div > button:nth-of-type(2)  [lang-btn]  "EN"
    letter-spacing:  —  →  0.06em

body > main > header > div > div > button:nth-of-type(1)  [active lang-btn]  "RU"
    letter-spacing:  —  →  0.06em

body > main > header > nav  [nav]
    row-gap:  22px  →  18px
    column-gap:  22px  →  18px
    margin-right:  28px  →  —
    margin-left:  auto  →  24px

body > main > header > nav > a:nth-of-type(1)  "Workspace"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(2)  "Catalog"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(3)  "Gradient"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(4)  "Background remover"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > div  [tool-page]
    padding-top:  60px  →  —
    padding-right:  clamp(24px, 4vw, 72px)  →  —
    padding-bottom:  72px  →  —
    padding-left:  clamp(24px, 4vw, 72px)  →  —
    width:  100%  →  —

body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
    margin-bottom:  18px  →  —
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(1) > span  "/"
    margin-top:  0px  →  —
    margin-right:  7px  →  —
    margin-bottom:  0px  →  —
    margin-left:  7px  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(2)  [tool-title]
    justify-content:  space-between  →  —
    align-items:  end  →  —
    row-gap:  32px  →  —
    column-gap:  32px  →  —
    margin-bottom:  48px  →  —

body > main > div > div:nth-of-type(2) > div > h1  "Gradient background."
    margin-top:  0px  →  —
    margin-right:  0px  →  —
    margin-bottom:  14px  →  —
    margin-left:  0px  →  —
    max-width:  700px  →  —
    font-size:  clamp(36px, 4vw, 64px)  →  16px
    font-weight:  650  →  —
    line-height:  1  →  1.5
    letter-spacing:  -0.06em  →  —

body > main > div > div:nth-of-type(2) > div > p  [lede]  "Create a clean, export-ready gradient wi"
    margin-top:  0px  →  —
    margin-right:  0px  →  —
    margin-bottom:  0px  →  —
    margin-left:  0px  →  —
    max-width:  550px  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    line-height:  1.6  →  1.5

body > main > div > div:nth-of-type(2) > span  [tool-status]  "LIVE PREVIEW"
    display:  flex  →  —
    align-items:  center  →  —
    row-gap:  8px  →  —
    column-gap:  8px  →  —
    color:  rgb(37, 169, 106)  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > div:nth-of-type(2) > span > i
    width:  6px  →  —
    height:  6px  →  —
    background-color:  rgb(37, 169, 106)  →  —
    color:  rgb(37, 169, 106)  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > div:nth-of-type(3)  [gradient-layout]
    display:  grid  →  —
    align-items:  start  →  —
    row-gap:  56px  →  —
    column-gap:  56px  →  —
    grid-template-columns:  minmax(360px, 0.7fr) minmax(0px, 1.3fr)  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1)  [panel-heading]
    display:  flex  →  —
    justify-content:  space-between  →  —
    align-items:  center  →  —
    padding-top:  18px  →  —
    padding-right:  20px  →  —
    padding-bottom:  18px  →  —
    padding-left:  20px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > span  [label]  "GRADIENT SETTINGS"
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > div > strong  "Configure output"
    display:  block  →  —
    margin-top:  5px  →  —
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(1) > span  [step-type]  "TOOL 01"
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2)  [setting-group]
    padding-top:  22px  →  —
    padding-right:  20px  →  —
    padding-bottom:  22px  →  —
    padding-left:  20px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > label  "GRADIENT TYPE"
    display:  flex  →  —
    justify-content:  space-between  →  —
    margin-bottom:  12px  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.1em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div  [segmented wide]
    display:  flex  →  —
    width:  100%  →  —
    height:  32px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(1)  [selected]  "Linear"
    border-top-width:  0px  →  —
    border-top-style:  none  →  —
    border-top-color:  currentcolor  →  —
    color:  rgb(255, 255, 255)  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div > button:nth-of-type(2)  "Radial"
    border-top-width:  0px  →  —
    border-top-style:  none  →  —
    border-top-color:  currentcolor  →  —
    background-color:  initial  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3)  [setting-group]
    padding-top:  22px  →  —
    padding-right:  20px  →  —
    padding-bottom:  22px  →  —
    padding-left:  20px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > label  "COLOR STOPS"
    display:  flex  →  —
    justify-content:  space-between  →  —
    margin-bottom:  12px  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.1em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1)  [color-row]
    display:  flex  →  —
    align-items:  center  →  —
    row-gap:  10px  →  —
    column-gap:  10px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1)  [color-field]
    display:  flex  →  —
    align-items:  center  →  —
    row-gap:  8px  →  —
    column-gap:  8px  →  —
    padding-right:  8px  →  —
    padding-left:  8px  →  —
    height:  32px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > span  [swatch]
    width:  14px  →  —
    height:  14px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(1) > input
    min-width:  0px  →  —
    border-top-width:  0px  →  —
    border-top-style:  none  →  —
    border-top-color:  currentcolor  →  —
    background-color:  initial  →  —
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > span  [stop-arrow]  "→"
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2)  [color-field]
    display:  flex  →  —
    align-items:  center  →  —
    row-gap:  8px  →  —
    column-gap:  8px  →  —
    padding-right:  8px  →  —
    padding-left:  8px  →  —
    height:  32px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > span  [swatch]
    width:  14px  →  —
    height:  14px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(1) > div:nth-of-type(2) > input
    min-width:  0px  →  —
    border-top-width:  0px  →  —
    border-top-style:  none  →  —
    border-top-color:  currentcolor  →  —
    background-color:  initial  →  —
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(3) > div:nth-of-type(2)  [gradient-bar]
    margin-top:  14px  →  —
    height:  14px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4)  [setting-group]
    padding-top:  22px  →  —
    padding-right:  20px  →  —
    padding-bottom:  22px  →  —
    padding-left:  20px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label  "DIRECTION"
    display:  flex  →  —
    justify-content:  space-between  →  —
    margin-bottom:  12px  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.1em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > label > output  "135 °"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.1em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > input
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div  [direction-grid]
    display:  grid  →  —
    row-gap:  6px  →  —
    column-gap:  6px  →  —
    grid-template-columns:  repeat(4, 1fr)  →  —
    margin-top:  14px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(1)  "0° →"
    padding-top:  8px  →  —
    padding-bottom:  8px  →  —
    background-color:  initial  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(2)  "45° ↗"
    padding-top:  8px  →  —
    padding-bottom:  8px  →  —
    background-color:  initial  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(3)  "90° ↑"
    padding-top:  8px  →  —
    padding-bottom:  8px  →  —
    background-color:  initial  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(4)  [selected]  "135° ↖"
    padding-top:  8px  →  —
    padding-bottom:  8px  →  —
    color:  #eef1f4 [var(--background)]  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(5)  "180° ←"
    padding-top:  8px  →  —
    padding-bottom:  8px  →  —
    background-color:  initial  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(6)  "225° ↙"
    padding-top:  8px  →  —
    padding-bottom:  8px  →  —
    background-color:  initial  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(7)  "270° ↓"
    padding-top:  8px  →  —
    padding-bottom:  8px  →  —
    background-color:  initial  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(4) > div > button:nth-of-type(8)  "315° ↘"
    padding-top:  8px  →  —
    padding-bottom:  8px  →  —
    background-color:  initial  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5)  [setting-group]
    padding-top:  22px  →  —
    padding-right:  20px  →  —
    padding-bottom:  22px  →  —
    padding-left:  20px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label  "OPACITY"
    display:  flex  →  —
    justify-content:  space-between  →  —
    margin-bottom:  12px  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.1em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > label > output  "100 %"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.1em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(5) > input
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6)  [settings-footer]
    display:  flex  →  —
    justify-content:  space-between  →  —
    align-items:  center  →  —
    padding-top:  16px  →  —
    padding-right:  20px  →  —
    padding-bottom:  16px  →  —
    padding-left:  20px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button  [reset-btn]  "Reset"
    display:  flex  →  —
    align-items:  center  →  —
    row-gap:  7px  →  —
    column-gap:  7px  →  —
    border-top-width:  0px  →  —
    border-top-style:  none  →  —
    border-top-color:  currentcolor  →  —
    background-color:  initial  →  —
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-size:  12px  →  16px
    line-height:  inherit  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > button > svg  [lucide lucide-icon lucide-rotate-ccw]
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-size:  12px  →  16px
    line-height:  inherit  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span  [auto-note]  "updates automatically"
    display:  flex  →  —
    align-items:  center  →  —
    row-gap:  8px  →  —
    column-gap:  8px  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(6) > span > i
    display:  inline-block  →  —
    width:  6px  →  —
    height:  6px  →  —
    background-color:  rgb(37, 169, 106)  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1)  [preview-toolbar]
    display:  flex  →  —
    justify-content:  space-between  →  —
    align-items:  center  →  —
    padding-top:  18px  →  —
    padding-right:  20px  →  —
    padding-bottom:  18px  →  —
    padding-left:  20px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > span  [label]  "OUTPUT PREVIEW"
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(1) > strong  "gradient.png"
    display:  block  →  —
    margin-top:  5px  →  —
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2)  [preview-actions]
    display:  flex  →  —
    flex-wrap:  wrap  →  —
    justify-content:  flex-end  →  —
    align-items:  center  →  —
    row-gap:  10px  →  —
    column-gap:  10px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1)  [secondary-btn]  "Copy CSS"
    display:  flex  →  —
    align-items:  center  →  —
    row-gap:  8px  →  —
    column-gap:  8px  →  —
    padding-top:  8px  →  —
    padding-bottom:  8px  →  —
    color:  #eef1f4 [var(--background)]  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(1) > svg  [lucide lucide-copy lucide-icon]
    color:  #eef1f4 [var(--background)]  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2)  [download-btn]  "Download PNG"
    display:  flex  →  —
    justify-content:  center  →  —
    align-items:  center  →  —
    row-gap:  9px  →  —
    column-gap:  9px  →  —
    margin-top:  18px  →  —
    width:  100%  →  —
    height:  42px  →  —
    border-top-width:  0px  →  —
    border-top-style:  none  →  —
    border-top-color:  currentcolor  →  —
    color:  rgb(255, 255, 255)  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(1)  [lucide lucide-download lucide-icon]
    color:  rgb(255, 255, 255)  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-type(2) > button:nth-of-type(2) > svg:nth-of-type(2)  [lucide lucide-chevron-down lucide-icon]
    color:  rgb(255, 255, 255)  →  #17212b [var(--foreground)]
    font-family:  —  →  inherit
    font-size:  —  →  16px

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2)  [large-canvas]
    padding-top:  24px  →  —
    padding-right:  24px  →  —
    padding-bottom:  24px  →  —
    padding-left:  24px  →  —
    background-color:  rgb(32, 42, 49)  →  —
    background-image:  linear-gradient(45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(41, 52, 60) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(41, 52, 60) 75%)  →  —
    background-size:  28px 28px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div  [gradient-art]
    display:  grid  →  —
    justify-content:  center  →  —
    min-height:  clamp(420px, 42vw, 680px)  →  —
    color:  rgb(255, 255, 255)  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > div  [art-mark]  "PNG"
    display:  grid  →  —
    align-items:  center  →  —
    margin-bottom:  12px  →  —
    width:  70px  →  —
    height:  70px  →  —
    border-top-width:  1px  →  —
    border-top-style:  solid  →  —
    border-top-color:  rgba(255, 255, 255, 0.65)  →  —
    color:  rgb(255, 255, 255)  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    line-height:  —  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(2) > div > span  "easy-png-tools"
    color:  rgb(255, 255, 255)  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3)  [code-block]
    padding-top:  16px  →  —
    padding-right:  20px  →  —
    padding-bottom:  16px  →  —
    padding-left:  20px  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div
    display:  flex  →  —
    justify-content:  space-between  →  —
    align-items:  center  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > span  [label]  "GENERATED CSS"
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button  [icon-btn]
    display:  grid  →  —
    align-items:  center  →  —
    padding-top:  6px  →  —
    padding-bottom:  6px  →  —
    border-top-width:  0px  →  —
    border-top-style:  none  →  —
    border-top-color:  currentcolor  →  —
    background-color:  initial  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > div > button > svg  [lucide lucide-copy lucide-icon]
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > div > div:nth-of-type(3) > section:nth-of-type(2) > div:nth-of-type(3) > pre  "background: linear-gradient(135deg, #176"
    margin-top:  12px  →  —
    margin-right:  0px  →  —
    margin-bottom:  0px  →  —
    margin-left:  0px  →  —
    padding-top:  14px  →  —
    padding-right:  14px  →  —
    padding-bottom:  14px  →  —
    padding-left:  14px  →  —
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5

body > main > footer  [preview-footer]
    row-gap:  —  →  1rem
    column-gap:  —  →  1rem
    padding-right:  clamp(20px, 4vw, 72px)  →  clamp(20px, 4vw, 64px)
    padding-left:  clamp(20px, 4vw, 72px)  →  clamp(20px, 4vw, 64px)
    letter-spacing:  —  →  0.08em

body > main > footer > span:nth-of-type(1)  "easy-png-tools"
    display:  flex  →  —
    align-items:  center  →  —
    row-gap:  7px  →  —
    column-gap:  7px  →  —
    letter-spacing:  —  →  0.08em

body > main > footer > span:nth-of-type(1) > b  [version]  "v2.4.0"
    font-weight:  400  →  —
    letter-spacing:  —  →  0.08em

body > main > footer > span:nth-of-type(2)  "© 2024"
    display:  flex  →  —
    align-items:  center  →  —
    row-gap:  7px  →  —
    column-gap:  7px  →  —
    letter-spacing:  —  →  0.08em

body >main >footer >span:nth-of-type(3)  "© 2024"
    ✗ present in reference, absent in project

body >div
    ✗ present in reference, absent in project


=== [768x1024] /preview/tools/remove-background-png  (vs background-remover.html)  —  100 differences ===

body > main > header  [topbar]
    h:  79  →  64  (-15px)

body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
    w:  30  →  14.6  (-15.4px)

body > main > header > div > span > i  [status-dot]
    display:  —  →  inline-block
    w:  0  →  4.8  (+4.8px)
    h:  0  →  6  (+6px)

body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
    display:  grid  →  inline-flex
    justify-content:  —  →  center
    width:  —  →  auto
    height:  —  →  auto
    border-top-color:  currentcolor  →  transparent
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(1) > svg  [lucide lucide-circle-question-mark lucide-icon]
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(2)  [icon-btn icon-btn--bare]
    display:  grid  →  inline-flex
    justify-content:  —  →  center
    width:  —  →  auto
    height:  —  →  auto
    border-top-color:  currentcolor  →  transparent
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > button:nth-of-type(2) > svg  [lucide lucide-icon lucide-moon]
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-size:  inherit  →  16px
    line-height:  inherit  →  1.5

body > main > header > div > div  [lang]
    display:  flex  →  inline-flex
    align-items:  center  →  —

body > main > header > div > div > span  [lang-div]  "/"
    align-self:  —  →  center
    color:  #17212b [var(--foreground)]  →  #6d7883 [var(--muted)]
    font-family:  "IBM Plex Sans", sans-serif [var(--font-sans)]  →  —

body > main > header > div > div > button:nth-of-type(2)  [lang-btn]  "EN"
    letter-spacing:  —  →  0.06em

body > main > header > div > div > button:nth-of-type(1)  [active lang-btn]  "RU"
    letter-spacing:  —  →  0.06em

body > main > header > nav  [nav]
    row-gap:  22px  →  18px
    column-gap:  22px  →  18px
    margin-right:  28px  →  —
    margin-left:  auto  →  24px

body > main > header > nav > a:nth-of-type(1)  "Workspace"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(2)  "Catalog"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(3)  "Gradient"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > header > nav > a:nth-of-type(4)  "Background remover"
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    letter-spacing:  —  →  0.04em

body > main > div  [tool-page]
    padding-top:  60px  →  —
    padding-right:  clamp(24px, 4vw, 72px)  →  —
    padding-bottom:  72px  →  —
    padding-left:  clamp(24px, 4vw, 72px)  →  —
    width:  100%  →  —

body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
    margin-bottom:  18px  →  —
    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(1) > span  "/"
    margin-top:  0px  →  —
    margin-right:  7px  →  —
    margin-bottom:  0px  →  —
    margin-left:  7px  →  —
    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
    font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
    font-size:  —  →  16px
    line-height:  —  →  1.5
    letter-spacing:  0.12em  →  —

body > main > div > div:nth-of-type(2)  [tool-title]
    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