chore: update refs audit

2026-09-14 13:36:36 +00:00 · 2026-08-28 21:27:13 +05:00
parent 0d95acba89
commit 795c03ac87
7 changed files with 4519 additions and 4242 deletions
@@ -1,17 +1,22 @@
-# Style audit: http://127.0.0.1:5179/preview/demo
+# Style audit (multi-route)

-vs C:\+XBOCTuK\+life_projects\easy-png-tools\refs-html\demo.html
-
-_2026-08-28T14:54:53.564Z_
+_2026-08-28T15:27:27.893Z_

 ## Сводка

- Токены light: **10** расх.
- Токены dark: **16** расх.
- Элементы (стиль/геометрия): **47** расх.
- Только у нас: 18, только в рефе: 11
+| route | ref | tokL | tokD | els | onlyOurs | onlyRef |
+|---|---|---|---|---|---|---|
+| `/preview/demo` | demo.html | 10 | 16 | 47 | 18 | 11 |
+| `/preview/list-tools` | list-tools.html | 10 | 16 | 30 | 257 | 54 |
+| `/preview/tools/linear-gradient-png` | gradient.html | 10 | 16 | 7 | 111 | 30 |
+| `/preview/tools/remove-background-png` | background-remover.html | 10 | 16 | 8 | 110 | 28 |

-## Токены — Light
+## /preview/demo  (vs demo.html)
+
+- Токены light: **10**, dark: **16**
+- Элементы: **47**, только у нас: 18, только в рефе: 11
+
+### Токены — Light

 | token | ours | ref |
 |---|---|---|
@@ -26,7 +31,7 @@ _2026-08-28T14:54:53.564Z_
 | `--radius-lg` | — | .5rem |
 | `--text-sm` | — | .875rem |

-## Токены — Dark
+### Токены — Dark

 | token | ours | ref |
 |---|---|---|
@@ -47,7 +52,7 @@ _2026-08-28T14:54:53.564Z_
 | `--radius-lg` | — | .5rem |
 | `--text-sm` | — | .875rem |

-## Расхождения элементов (топ 47)
+### Расхождения элементов (топ 47)

 ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "/"
    - **fontFamily**: `"IBM Plex Mono", monospace` → `"IBM Plex Sans", sans-serif`
@@ -259,7 +264,7 @@ _2026-08-28T14:54:53.564Z_
 ### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p:nth-child(3)` — "Output is generated in-browser. Your fil"
    - **rect**: `799,2489 565x17` → `799,1425 565x17`

-## Только у нас (структурно)
+### Только у нас

 - `/ DEMO`
 - `+ Add tool`
@@ -280,7 +285,7 @@ _2026-08-28T14:54:53.564Z_
 - `v0.1.0`
 - `© 2026`

-## Только в рефе (структурно)
+### Только в рефе

 - `/ 
            WORKSPACE`
@@ -297,3 +302,666 @@ _2026-08-28T14:54:53.564Z_
                        px`
 - `v2.4.0`
 - `© 2024`
+
+
+## /preview/list-tools  (vs list-tools.html)
+
+- Токены light: **10**, dark: **16**
+- Элементы: **30**, только у нас: 257, только в рефе: 54
+
+### Токены — Light
+
+| token | ours | ref |
+|---|---|---|
+| `--danger` | #e5484d | — |
+| `--success` | #25a96a | — |
+| `--text-sm--line-height` | — | calc(1.25 / .875) |
+| `--text-xs--line-height` | — | calc(1 / .75) |
+| `--font-weight-medium` | — | 500 |
+| `--spacing` | — | .25rem |
+| `--text-xs` | — | .75rem |
+| `--radius-md` | — | .375rem |
+| `--radius-lg` | — | .5rem |
+| `--text-sm` | — | .875rem |
+
+### Токены — Dark
+
+| token | ours | ref |
+|---|---|---|
+| `--panel` | #182129 | #f8fafb |
+| `--blue` | #54a2ff | #1769d2 |
+| `--muted` | #91a0ac | #6d7883 |
+| `--background` | #11171d | #eef1f4 |
+| `--danger` | #ff7479 | — |
+| `--foreground` | #e8eef2 | #17212b |
+| `--success` | #25a96a | — |
+| `--line` | #33414c | #cbd3da |
+| `--text-sm--line-height` | — | calc(1.25 / .875) |
+| `--text-xs--line-height` | — | calc(1 / .75) |
+| `--font-weight-medium` | — | 500 |
+| `--spacing` | — | .25rem |
+| `--text-xs` | — | .75rem |
+| `--radius-md` | — | .375rem |
+| `--radius-lg` | — | .5rem |
+| `--text-sm` | — | .875rem |
+
+### Расхождения элементов (топ 30)
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)` — "Catalog"
+    - **fontSize**: `12px` → `10px`
+    - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `621,24 54x15` → `832,26 39x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)` — "Workspace"
+    - **fontSize**: `12px` → `10px`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `534,24 69x15` → `761,26 49x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)` — "Gradient"
+    - **fontSize**: `12px` → `10px`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `693,24 61x15` → `893,26 44x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)` — "Background remover"
+    - **fontSize**: `12px` → `10px`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `773,24 138x15` → `959,26 99x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(1)>span:nth-child(2)>span:nth-child(1)` — "Convert JPG to PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `104,302 175x19` → `131,494 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "Convert WebP to PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `364,311 175x19` → `131,610 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(7)>span:nth-child(2)>span:nth-child(1)` — "PNG to Base64"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `364,429 175x19` → `131,726 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(9)>span:nth-child(2)>span:nth-child(1)` — "PNG to Data URI"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `885,429 175x19` → `131,842 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(2)>div:nth-child(2)>a:nth-child(17)>span:nth-child(2)>span:nth-child(1)` — "Convert PNG to JPG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `364,717 175x19` → `131,958 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(3)>div:nth-child(2)>a:nth-child(8)>span:nth-child(2)>span:nth-child(1)` — "Round corners PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `625,1239 175x19` → `807,726 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(3)>div:nth-child(2)>a:nth-child(11)>span:nth-child(2)>span:nth-child(1)` — "Outline PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `104,1384 175x19` → `807,842 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(7)>span:nth-child(2)>span:nth-child(1)` — "Grayscale PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `364,2096 175x19` → `131,1276 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(8)>span:nth-child(2)>span:nth-child(1)` — "Invert colors PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `625,2104 175x19` → `131,1392 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(10)>span:nth-child(2)>span:nth-child(1)` — "Change PNG opacity"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `1146,2096 175x19` → `807,958 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(4)>div:nth-child(2)>a:nth-child(20)>span:nth-child(2)>span:nth-child(1)` — "Temperature PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `1146,2361 175x19` → `131,1624 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(1)>span:nth-child(2)>span:nth-child(1)` — "Resize PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `104,2731 175x19` → `807,1160 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "Crop PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `364,2740 175x19` → `807,1276 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(3)>span:nth-child(2)>span:nth-child(1)` — "Rotate PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `625,2748 175x19` → `807,1392 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(4)>span:nth-child(2)>span:nth-child(1)` — "Flip PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `885,2757 175x19` → `807,1508 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(5)>div:nth-child(2)>a:nth-child(5)>span:nth-child(2)>span:nth-child(1)` — "Add padding to PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `1146,2748 175x19` → `807,1624 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(1)>span:nth-child(2)>span:nth-child(1)` — "Blur PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `104,3396 175x19` → `131,1826 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "Sharpen PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `364,3387 175x19` → `131,1942 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(3)>span:nth-child(2)>span:nth-child(1)` — "Vignette PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `625,3404 175x19` → `131,2058 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(6)>div:nth-child(2)>a:nth-child(8)>span:nth-child(2)>span:nth-child(1)` — "JPEG artifacts"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `625,3540 175x19` → `131,2174 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(8)>div:nth-child(2)>a:nth-child(9)>span:nth-child(2)>span:nth-child(1)` — "PNG info"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `885,4142 175x19` → `807,1826 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(8)>div:nth-child(2)>a:nth-child(13)>span:nth-child(2)>span:nth-child(1)` — "PNG orientation"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `625,4287 175x19` → `807,2174 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>section:nth-child(1)>section:nth-child(9)>div:nth-child(2)>a:nth-child(7)>span:nth-child(2)>span:nth-child(1)` — "Create gradient PNG"
+    - **fontFamily**: `"IBM Plex Sans", sans-serif` → `"IBM Plex Mono", monospace`
+    - **fontSize**: `14.4px` → `13px`
+    - **rect**: `364,4632 175x19` → `131,1160 488x15`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)` — "EN"
+    - **letterSpacing**: `0.6px` → `normal`
+    - **rect**: `1349,19 32x25` → `1352,20 29x24`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools"
+    - **rect**: `98,23 118x18` → `98,23 108x17`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)` — "RU"
+    - **letterSpacing**: `0.6px` → `normal`
+
+### Только у нас
+
+- `/ LIST-TOOLS`
+- `CATALOG`
+- `All tools`
+- `Каталог всех PNG-инструментов, сгруппиро`
+- `convert`
+- `Convert`
+- `Opens a JPEG and saves it as lossless PN`
+- `Re-encodes a WebP image into universal P`
+- `Convert GIF to PNG`
+- `Extracts the first frame of a GIF animat`
+- `Convert BMP to PNG`
+- `Re-encodes BMP into compact lossless PNG`
+- `Convert ICO to PNG`
+- `Turns an .ico icon into a regular PNG of`
+- `Convert PNG to BMP`
+- `Saves the image as 24-bit BMP without an`
+- `Encodes the image into a base64 string f`
+- `Base64 to PNG`
+- `Decodes a base64 string or data-uri back`
+- `Builds a full data-uri (data:image/png;b`
+- `Data URI to PNG`
+- `Decodes data:image/…;base64,… back into `
+- `PNG to HEX pixels`
+- `Shows all pixels as rrggbbaa hex values `
+- `HEX pixels to PNG`
+- `Assembles an image from rrggbbaa hex val`
+- `PNG to Bytes`
+- `Lists every pixel as four decimal bytes `
+- `Bytes to PNG`
+- `Assembles an image from decimal RGBA byt`
+- `PNG to RGB Values`
+- `Lists every pixel as rgba(r, g, b, a), o`
+- `RGB Values to PNG`
+- `Assembles an image from rgba(r, g, b, a)`
+- `Transparency is composited over the chos`
+- `Convert PNG to WebP`
+- `Re-encodes the image into WebP with adju`
+- `Compress PNG`
+- `Shrinks the PNG by reducing its palette `
+- `Reduce PNG to Size`
+- `Binary-searches the palette size until t`
+- `SVG to PNG`
+- `Decodes SVG markup into a raster image. `
+- `alpha`
+- `Alpha & transparency`
+- `Circle Mask PNG`
+- `Cuts the image into a circle. Diameter i`
+- `Square Mask PNG`
+- `Cuts the image into a rectangle with sid`
+- `Star Mask PNG`
+- `Cuts the image into an n-pointed star wi`
+- `Wavy Mask PNG`
+- `Cuts the image into a wavy-edged circle:`
+- `Remove alpha channel PNG`
+- `Composites the image over a white backgr`
+- `Set alpha channel PNG`
+- `Assigns the same opacity to all pixels; `
+- `Extract alpha mask PNG`
+- `Turns transparency into a black-and-whit`
+- `Clips corners by a radius set as a perce`
+
+### Только в рефе
+
+- `/ 
+            CATALOG`
+- `/`
+- `EASY-PNG-TOOLS / CATALOG`
+- `Tool catalog`
+- `Focused utilities for working with PNG. `
+- `32`
+- `ALL`
+- `CONVERT`
+- `TRANSPARENCY`
+- `COLOR`
+- `GEOMETRY`
+- `FILTERS`
+- `ANALYZE`
+- `05
+                 TOOLS`
+- `Re-encode JPEG files as lossless PNG whi`
+- `01`
+- `Turn WebP images into a universal PNG fo`
+- `02`
+- `Encode an image as a base64 string for e`
+- `03`
+- `Build a complete data URI ready for HTML`
+- `04`
+- `Composite transparency over a selected b`
+- `05`
+- `Remove background PNG`
+- `Remove a solid background by color, tole`
+- `Extract alpha mask`
+- `Turn the alpha channel into a clean blac`
+- `Clip the image corners by a precise radi`
+- `Add a colored ring around opaque content`
+- `Multiply the alpha channel while keeping`
+- `Generate a smooth transition between two`
+- `Convert the image to luminance-based sha`
+- `Invert every color channel while leaving`
+- `Brightness & contrast`
+- `Adjust brightness and contrast across a `
+- `Make an image warmer or cooler with a si`
+- `Scale an image with bilinear interpolati`
+- `Cut a rectangular area with exact coordi`
+- `Rotate by 90, 180, or 270 degrees withou`
+- `Mirror the image horizontally or vertica`
+- `Expand the canvas on all sides by a chos`
+- `04
+                 TOOLS`
+- `Apply a fast Gaussian-style blur with tr`
+- `Emphasize edges with an adjustable sharp`
+- `Smoothly darken the image edges while pr`
+- `Simulate low-quality JPEG recompression `
+- `Inspect dimensions, alpha presence, and `
+- `Check grayscale`
+- `Report whether the image contains only s`
+- `Check transparency`
+- `Detect transparent and semi-transparent `
+- `Classify the image as portrait, landscap`
+- `•`
+
+
+## /preview/tools/linear-gradient-png  (vs gradient.html)
+
+- Токены light: **10**, dark: **16**
+- Элементы: **7**, только у нас: 111, только в рефе: 30
+
+### Токены — Light
+
+| token | ours | ref |
+|---|---|---|
+| `--danger` | #e5484d | — |
+| `--success` | #25a96a | — |
+| `--text-sm--line-height` | — | calc(1.25 / .875) |
+| `--text-xs--line-height` | — | calc(1 / .75) |
+| `--font-weight-medium` | — | 500 |
+| `--spacing` | — | .25rem |
+| `--text-xs` | — | .75rem |
+| `--radius-md` | — | .375rem |
+| `--radius-lg` | — | .5rem |
+| `--text-sm` | — | .875rem |
+
+### Токены — Dark
+
+| token | ours | ref |
+|---|---|---|
+| `--panel` | #182129 | #f8fafb |
+| `--blue` | #54a2ff | #1769d2 |
+| `--muted` | #91a0ac | #6d7883 |
+| `--background` | #11171d | #eef1f4 |
+| `--danger` | #ff7479 | — |
+| `--foreground` | #e8eef2 | #17212b |
+| `--success` | #25a96a | — |
+| `--line` | #33414c | #cbd3da |
+| `--text-sm--line-height` | — | calc(1.25 / .875) |
+| `--text-xs--line-height` | — | calc(1 / .75) |
+| `--font-weight-medium` | — | 500 |
+| `--spacing` | — | .25rem |
+| `--text-xs` | — | .75rem |
+| `--radius-md` | — | .375rem |
+| `--radius-lg` | — | .5rem |
+| `--text-sm` | — | .875rem |
+
+### Расхождения элементов (топ 7)
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)` — "Gradient"
+    - **fontSize**: `12px` → `10px`
+    - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `754,24 61x15` → `930,26 44x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)` — "Workspace"
+    - **fontSize**: `12px` → `10px`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `596,24 69x15` → `798,26 49x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)` — "Catalog"
+    - **fontSize**: `12px` → `10px`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `683,24 54x15` → `870,26 39x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)` — "Background remover"
+    - **fontSize**: `12px` → `10px`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `834,24 138x15` → `996,26 99x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)` — "EN"
+    - **letterSpacing**: `0.6px` → `normal`
+    - **rect**: `1349,19 32x25` → `1352,20 29x24`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools"
+    - **rect**: `98,23 118x18` → `98,23 108x17`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)` — "RU"
+    - **letterSpacing**: `0.6px` → `normal`
+
+### Только у нас
+
+- `/ TOOLS / LINEAR-GRADIENT-PNG`
+- `STEPS`
+- `Pipeline`
+- `AUTO`
+- `01`
+- `generate`
+- `Create gradient PNG`
+- `Width`
+- `Height`
+- `Start color`
+- `End color`
+- `Direction`
+- `Horizontal`
+- `Vertical`
+- `Add step`
+- `Split PNG into HSL`
+- `Split PNG into HSV`
+- `Split PNG into HSI`
+- `Convert PNG to CMYK Colors`
+- `Convert PNG to YCbCr Colors`
+- `Convert PNG to LAB Colors`
+- `Show Transparent Areas PNG`
+- `Show Grayscale Pixels PNG`
+- `Show Color Pixels PNG`
+- `Light Pixel Mask PNG`
+- `Dark Pixel Mask PNG`
+- `Unique Color Mask PNG`
+- `Convert JPG to PNG`
+- `Convert WebP to PNG`
+- `Convert GIF to PNG`
+- `Convert BMP to PNG`
+- `Convert ICO to PNG`
+- `Convert PNG to BMP`
+- `Resize PNG`
+- `Crop PNG`
+- `Rotate PNG`
+- `Flip PNG`
+- `Add padding to PNG`
+- `Add border to PNG`
+- `Fit PNG onto background`
+- `Tile PNG`
+- `Circle Mask PNG`
+- `Square Mask PNG`
+- `Star Mask PNG`
+- `Wavy Mask PNG`
+- `Center PNG by content`
+- `Blur PNG`
+- `Sharpen PNG`
+- `Grayscale PNG`
+- `Invert colors PNG`
+- `Brightness & contrast PNG`
+- `Change PNG opacity`
+- `Sepia effect`
+- `Change hue PNG`
+- `Extract channel PNG`
+- `Swap channels PNG`
+- `Black & white threshold PNG`
+- `Posterize PNG`
+- `Two colors PNG`
+- `Convert PNG to JPG`
+
+### Только в рефе
+
+- `/ 
+            GRADIENT`
+- `/`
+- `Gradient background.`
+- `Create a clean, export-ready gradient wi`
+- `GRADIENT SETTINGS`
+- `Configure output`
+- `TOOL 01`
+- `GRADIENT TYPE`
+- `Linear`
+- `Radial`
+- `COLOR STOPS`
+- `→`
+- `135
+                  °`
+- `0° →`
+- `45° ↗`
+- `90° ↑`
+- `135° ↖`
+- `180° ←`
+- `225° ↙`
+- `270° ↓`
+- `315° ↘`
+- `100
+                  %`
+- `OUTPUT PREVIEW`
+- `gradient.png`
+- `PNG`
+- `GENERATED CSS`
+- `background: linear-gradient(135deg, #176`
+- `v2.4.0`
+- `gradient tool · local-only`
+- `© 2024`
+
+
+## /preview/tools/remove-background-png  (vs background-remover.html)
+
+- Токены light: **10**, dark: **16**
+- Элементы: **8**, только у нас: 110, только в рефе: 28
+
+### Токены — Light
+
+| token | ours | ref |
+|---|---|---|
+| `--danger` | #e5484d | — |
+| `--success` | #25a96a | — |
+| `--text-sm--line-height` | — | calc(1.25 / .875) |
+| `--text-xs--line-height` | — | calc(1 / .75) |
+| `--font-weight-medium` | — | 500 |
+| `--spacing` | — | .25rem |
+| `--text-xs` | — | .75rem |
+| `--radius-md` | — | .375rem |
+| `--radius-lg` | — | .5rem |
+| `--text-sm` | — | .875rem |
+
+### Токены — Dark
+
+| token | ours | ref |
+|---|---|---|
+| `--panel` | #182129 | #f8fafb |
+| `--blue` | #54a2ff | #1769d2 |
+| `--muted` | #91a0ac | #6d7883 |
+| `--background` | #11171d | #eef1f4 |
+| `--danger` | #ff7479 | — |
+| `--foreground` | #e8eef2 | #17212b |
+| `--success` | #25a96a | — |
+| `--line` | #33414c | #cbd3da |
+| `--text-sm--line-height` | — | calc(1.25 / .875) |
+| `--text-xs--line-height` | — | calc(1 / .75) |
+| `--font-weight-medium` | — | 500 |
+| `--spacing` | — | .25rem |
+| `--text-xs` | — | .75rem |
+| `--radius-md` | — | .375rem |
+| `--radius-lg` | — | .5rem |
+| `--text-sm` | — | .875rem |
+
+### Расхождения элементов (топ 8)
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)` — "Background remover"
+    - **fontSize**: `12px` → `10px`
+    - **color**: `rgb(109, 120, 131)` → `rgb(23, 105, 210)`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `841,24 138x15` → `978,26 99x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)` — "Workspace"
+    - **fontSize**: `12px` → `10px`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `603,24 69x15` → `780,26 49x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)` — "Catalog"
+    - **fontSize**: `12px` → `10px`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `690,24 54x15` → `851,26 39x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)` — "Gradient"
+    - **fontSize**: `12px` → `10px`
+    - **letterSpacing**: `0.48px` → `normal`
+    - **rect**: `762,24 61x15` → `912,26 44x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>section:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "RESULT"
+    - **letterSpacing**: `1px` → `normal`
+    - **lineHeight**: `12px` → `normal`
+    - **rect**: `726,125 108x12` → `954,467 33x12`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(2)` — "EN"
+    - **letterSpacing**: `0.6px` → `normal`
+    - **rect**: `1349,19 32x25` → `1352,20 29x24`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "easy-png-tools"
+    - **rect**: `98,23 118x18` → `98,23 108x17`
+
+### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(3)>div:nth-child(4)>button:nth-child(1)` — "RU"
+    - **letterSpacing**: `0.6px` → `normal`
+
+### Только у нас
+
+- `/ TOOLS / REMOVE-BACKGROUND-PNG`
+- `STEPS`
+- `Pipeline`
+- `AUTO`
+- `01`
+- `alpha`
+- `Remove background PNG (smart)`
+- `Background color`
+- `Similarity tolerance, %`
+- `10`
+- `Outer regions only`
+- `Edge smoothing, passes`
+- `1`
+- `Add step`
+- `Split PNG into HSL`
+- `Split PNG into HSV`
+- `Split PNG into HSI`
+- `Convert PNG to CMYK Colors`
+- `Convert PNG to YCbCr Colors`
+- `Convert PNG to LAB Colors`
+- `Show Transparent Areas PNG`
+- `Show Grayscale Pixels PNG`
+- `Show Color Pixels PNG`
+- `Light Pixel Mask PNG`
+- `Dark Pixel Mask PNG`
+- `Unique Color Mask PNG`
+- `Convert JPG to PNG`
+- `Convert WebP to PNG`
+- `Convert GIF to PNG`
+- `Convert BMP to PNG`
+- `Convert ICO to PNG`
+- `Convert PNG to BMP`
+- `Resize PNG`
+- `Crop PNG`
+- `Rotate PNG`
+- `Flip PNG`
+- `Add padding to PNG`
+- `Add border to PNG`
+- `Fit PNG onto background`
+- `Tile PNG`
+- `Circle Mask PNG`
+- `Square Mask PNG`
+- `Star Mask PNG`
+- `Wavy Mask PNG`
+- `Center PNG by content`
+- `Blur PNG`
+- `Sharpen PNG`
+- `Grayscale PNG`
+- `Invert colors PNG`
+- `Brightness & contrast PNG`
+- `Change PNG opacity`
+- `Sepia effect`
+- `Change hue PNG`
+- `Extract channel PNG`
+- `Swap channels PNG`
+- `Black & white threshold PNG`
+- `Posterize PNG`
+- `Two colors PNG`
+- `Convert PNG to JPG`
+- `Convert PNG to WebP`
+
+### Только в рефе
+
+- `/ 
+            BACKGROUND REMOVER`
+- `/`
+- `Remove background.`
+- `Select a background color and tune the e`
+- `REMOVER SETTINGS`
+- `Configure detection`
+- `TOOL 02`
+- `BACKGROUND COLOR`
+- `72
+                  %`
+- `strict edges`
+- `more removal`
+- `OUTER COLOR ONLY`
+- `Only remove connected background pixels `
+- `SHOW MASK`
+- `Preview the detected transparency mask.`
+- `SOURCE / RESULT`
+- `comparison.png`
+- `SOURCE`
+- `original.png`
+- `OBJECT`
+- `1200 × 800`
+- `removed-bg.png`
+- `PNG`
+- `PNG-24`
+- `ENABLED`
+- `v2.4.0`
+- `background remover · local-only`
+- `© 2024`