diff --git a/web/audit/audit-report.json b/web/audit/audit-report.json
index d8e8372..02544dd 100644
--- a/web/audit/audit-report.json
+++ b/web/audit/audit-report.json
@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-28T11:58:18.224Z",
+  "generatedAt": "2026-08-28T14:54:53.564Z",
   "ours": "http://127.0.0.1:5179/preview/demo",
   "ref": "C:\\+XBOCTuK\\+life_projects\\easy-png-tools\\refs-html\\demo.html",
   "tokenDiffs": {
@@ -161,7 +161,123 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(1)",
+      "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(1)",
+      "tag": "a",
+      "text": "Workspace",
+      "deltas": {
+        "fontSize": {
+          "ours": "12px",
+          "ref": "10px"
+        },
+        "letterSpacing": {
+          "ours": "0.48px",
+          "ref": "normal"
+        },
+        "rect": {
+          "ours": {
+            "x": 513,
+            "y": 24,
+            "w": 69,
+            "h": 15
+          },
+          "ref": {
+            "x": 792,
+            "y": 26,
+            "w": 49,
+            "h": 12
+          }
+        }
+      }
+    },
+    {
+      "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(2)",
+      "tag": "a",
+      "text": "Catalog",
+      "deltas": {
+        "fontSize": {
+          "ours": "12px",
+          "ref": "10px"
+        },
+        "letterSpacing": {
+          "ours": "0.48px",
+          "ref": "normal"
+        },
+        "rect": {
+          "ours": {
+            "x": 600,
+            "y": 24,
+            "w": 54,
+            "h": 15
+          },
+          "ref": {
+            "x": 864,
+            "y": 26,
+            "w": 39,
+            "h": 12
+          }
+        }
+      }
+    },
+    {
+      "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(3)",
+      "tag": "a",
+      "text": "Gradient",
+      "deltas": {
+        "fontSize": {
+          "ours": "12px",
+          "ref": "10px"
+        },
+        "letterSpacing": {
+          "ours": "0.48px",
+          "ref": "normal"
+        },
+        "rect": {
+          "ours": {
+            "x": 672,
+            "y": 24,
+            "w": 61,
+            "h": 15
+          },
+          "ref": {
+            "x": 924,
+            "y": 26,
+            "w": 44,
+            "h": 12
+          }
+        }
+      }
+    },
+    {
+      "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>nav:nth-child(2)>a:nth-child(4)",
+      "tag": "a",
+      "text": "Background remover",
+      "deltas": {
+        "fontSize": {
+          "ours": "12px",
+          "ref": "10px"
+        },
+        "letterSpacing": {
+          "ours": "0.48px",
+          "ref": "normal"
+        },
+        "rect": {
+          "ours": {
+            "x": 751,
+            "y": 24,
+            "w": 138,
+            "h": 15
+          },
+          "ref": {
+            "x": 990,
+            "y": 26,
+            "w": 99,
+            "h": 12
+          }
+        }
+      }
+    },
+    {
+      "path": "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)",
       "tag": "button",
       "text": "RU",
       "deltas": {
@@ -172,7 +288,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(2)",
+      "path": "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)",
       "tag": "button",
       "text": "EN",
       "deltas": {
@@ -251,7 +367,7 @@
       "text": "Build your image pipeline.",
       "deltas": {
         "lineHeight": {
-          "ours": "normal",
+          "ours": "51.84px",
           "ref": "57.6px"
         },
         "rect": {
@@ -259,7 +375,7 @@
             "x": 58,
             "y": 155,
             "w": 474,
-            "h": 150
+            "h": 104
           },
           "ref": {
             "x": 58,
@@ -278,7 +394,7 @@
         "rect": {
           "ours": {
             "x": 58,
-            "y": 321,
+            "y": 275,
             "w": 474,
             "h": 51
           },
@@ -299,7 +415,7 @@
         "rect": {
           "ours": {
             "x": 597,
-            "y": 347,
+            "y": 300,
             "w": 66,
             "h": 14
           },
@@ -320,7 +436,7 @@
         "rect": {
           "ours": {
             "x": 671,
-            "y": 347,
+            "y": 300,
             "w": 40,
             "h": 14
           },
@@ -338,10 +454,6 @@
       "tag": "span",
       "text": "PROCESSING PIPELINE",
       "deltas": {
-        "fontWeight": {
-          "ours": "500",
-          "ref": "400"
-        },
         "letterSpacing": {
           "ours": "1px",
           "ref": "1.2px"
@@ -357,7 +469,7 @@
         "rect": {
           "ours": {
             "x": 58,
-            "y": 428,
+            "y": 382,
             "w": 154,
             "h": 12
           },
@@ -378,7 +490,7 @@
         "rect": {
           "ours": {
             "x": 175,
-            "y": 451,
+            "y": 405,
             "w": 36,
             "h": 13
           },
@@ -392,20 +504,32 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)",
+      "path": "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(3)>article:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
       "tag": "span",
       "text": "01",
       "deltas": {
+        "fontSize": {
+          "ours": "22px",
+          "ref": "11px"
+        },
+        "fontWeight": {
+          "ours": "600",
+          "ref": "400"
+        },
         "padding": {
           "ours": "0px",
           "ref": "17px 0px 0px 15px"
         },
+        "lineHeight": {
+          "ours": "22px",
+          "ref": "normal"
+        },
         "rect": {
           "ours": {
-            "x": 95,
-            "y": 504,
-            "w": 13,
-            "h": 14
+            "x": 74,
+            "y": 464,
+            "w": 26,
+            "h": 22
           },
           "ref": {
             "x": 59,
@@ -417,7 +541,7 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)",
+      "path": "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(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
       "tag": "span",
       "text": "BACKGROUND",
       "deltas": {
@@ -427,9 +551,9 @@
         },
         "rect": {
           "ours": {
-            "x": 116,
-            "y": 504,
-            "w": 72,
+            "x": 117,
+            "y": 455,
+            "w": 171,
             "h": 13
           },
           "ref": {
@@ -442,18 +566,14 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)",
-      "tag": "span",
+      "path": "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(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)",
+      "tag": "h2",
       "text": "Gradient background",
       "deltas": {
-        "margin": {
-          "ours": "0px",
-          "ref": "5px 0px 18px"
-        },
         "rect": {
           "ours": {
-            "x": 196,
-            "y": 501,
+            "x": 117,
+            "y": 473,
             "w": 171,
             "h": 19
           },
@@ -467,17 +587,25 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)",
+      "path": "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(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)",
       "tag": "button",
-      "text": "100",
+      "text": "100%",
       "deltas": {
+        "color": {
+          "ours": "rgb(255, 255, 255)",
+          "ref": "rgb(23, 33, 43)"
+        },
+        "backgroundColor": {
+          "ours": "rgb(23, 105, 210)",
+          "ref": "rgba(0, 0, 0, 0)"
+        },
         "padding": {
           "ours": "0px 11.2px",
           "ref": "0px"
         },
         "letterSpacing": {
           "ours": "0.6px",
-          "ref": "normal"
+          "ref": "0.8px"
         },
         "display": {
           "ours": "flex",
@@ -485,134 +613,47 @@
         },
         "rect": {
           "ours": {
-            "x": 491,
-            "y": 590,
-            "w": 42,
+            "x": 518,
+            "y": 552,
+            "w": 49,
             "h": 30
           },
           "ref": {
-            "x": 520,
-            "y": 567,
-            "w": 46,
-            "h": 30
+            "x": 680,
+            "y": 546,
+            "w": 25,
+            "h": 12
           }
         }
       }
     },
     {
-      "path": "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(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(2)",
-      "tag": "button",
-      "text": "75",
-      "deltas": {
-        "padding": {
-          "ours": "0px 11.2px",
-          "ref": "0px"
-        },
-        "letterSpacing": {
-          "ours": "0.6px",
-          "ref": "normal"
-        },
-        "display": {
-          "ours": "flex",
-          "ref": "block"
-        },
-        "rect": {
-          "ours": {
-            "x": 533,
-            "y": 590,
-            "w": 37,
-            "h": 30
-          },
-          "ref": {
-            "x": 566,
-            "y": 567,
-            "w": 46,
-            "h": 30
-          }
-        }
-      }
-    },
-    {
-      "path": "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(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(3)",
-      "tag": "button",
-      "text": "50",
-      "deltas": {
-        "padding": {
-          "ours": "0px 11.2px",
-          "ref": "0px"
-        },
-        "letterSpacing": {
-          "ours": "0.6px",
-          "ref": "normal"
-        },
-        "display": {
-          "ours": "flex",
-          "ref": "block"
-        },
-        "rect": {
-          "ours": {
-            "x": 569,
-            "y": 590,
-            "w": 37,
-            "h": 30
-          },
-          "ref": {
-            "x": 612,
-            "y": 567,
-            "w": 46,
-            "h": 30
-          }
-        }
-      }
-    },
-    {
-      "path": "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(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(4)",
-      "tag": "button",
-      "text": "25",
-      "deltas": {
-        "padding": {
-          "ours": "0px 11.2px",
-          "ref": "0px"
-        },
-        "letterSpacing": {
-          "ours": "0.6px",
-          "ref": "normal"
-        },
-        "display": {
-          "ours": "flex",
-          "ref": "block"
-        },
-        "rect": {
-          "ours": {
-            "x": 606,
-            "y": 590,
-            "w": 37,
-            "h": 30
-          },
-          "ref": {
-            "x": 658,
-            "y": 567,
-            "w": 46,
-            "h": 30
-          }
-        }
-      }
-    },
-    {
-      "path": "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(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)",
+      "path": "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(3)>article:nth-child(2)>div:nth-child(1)>span:nth-child(1)",
       "tag": "span",
       "text": "02",
       "deltas": {
+        "fontSize": {
+          "ours": "22px",
+          "ref": "11px"
+        },
+        "fontWeight": {
+          "ours": "600",
+          "ref": "400"
+        },
         "padding": {
           "ours": "0px",
           "ref": "17px 0px 0px 15px"
         },
+        "lineHeight": {
+          "ours": "22px",
+          "ref": "normal"
+        },
         "rect": {
           "ours": {
-            "x": 95,
-            "y": 655,
-            "w": 13,
-            "h": 14
+            "x": 74,
+            "y": 624,
+            "w": 26,
+            "h": 22
           },
           "ref": {
             "x": 59,
@@ -624,7 +665,7 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)",
+      "path": "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(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
       "tag": "span",
       "text": "TRANSFORM",
       "deltas": {
@@ -634,9 +675,9 @@
         },
         "rect": {
           "ours": {
-            "x": 116,
-            "y": 656,
-            "w": 65,
+            "x": 117,
+            "y": 615,
+            "w": 153,
             "h": 13
           },
           "ref": {
@@ -649,18 +690,14 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)",
-      "tag": "span",
+      "path": "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(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)",
+      "tag": "h2",
       "text": "Remove background",
       "deltas": {
-        "margin": {
-          "ours": "0px",
-          "ref": "5px 0px 18px"
-        },
         "rect": {
           "ours": {
-            "x": 189,
-            "y": 653,
+            "x": 117,
+            "y": 633,
             "w": 153,
             "h": 19
           },
@@ -674,20 +711,32 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)",
+      "path": "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(3)>article:nth-child(3)>div:nth-child(1)>span:nth-child(1)",
       "tag": "span",
       "text": "03",
       "deltas": {
+        "fontSize": {
+          "ours": "22px",
+          "ref": "11px"
+        },
+        "fontWeight": {
+          "ours": "600",
+          "ref": "400"
+        },
         "padding": {
           "ours": "0px",
           "ref": "17px 0px 0px 15px"
         },
+        "lineHeight": {
+          "ours": "22px",
+          "ref": "normal"
+        },
         "rect": {
           "ours": {
-            "x": 95,
-            "y": 769,
-            "w": 13,
-            "h": 14
+            "x": 74,
+            "y": 746,
+            "w": 26,
+            "h": 22
           },
           "ref": {
             "x": 59,
@@ -699,7 +748,7 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)",
+      "path": "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(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
       "tag": "span",
       "text": "STYLE",
       "deltas": {
@@ -709,9 +758,9 @@
         },
         "rect": {
           "ours": {
-            "x": 116,
-            "y": 770,
-            "w": 36,
+            "x": 117,
+            "y": 737,
+            "w": 99,
             "h": 13
           },
           "ref": {
@@ -724,18 +773,14 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)",
-      "tag": "span",
+      "path": "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(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)",
+      "tag": "h2",
       "text": "Add outline",
       "deltas": {
-        "margin": {
-          "ours": "0px",
-          "ref": "5px 0px 18px"
-        },
         "rect": {
           "ours": {
-            "x": 160,
-            "y": 767,
+            "x": 117,
+            "y": 755,
             "w": 99,
             "h": 19
           },
@@ -749,20 +794,32 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)",
+      "path": "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(3)>article:nth-child(4)>div:nth-child(1)>span:nth-child(1)",
       "tag": "span",
       "text": "04",
       "deltas": {
+        "fontSize": {
+          "ours": "22px",
+          "ref": "11px"
+        },
+        "fontWeight": {
+          "ours": "600",
+          "ref": "400"
+        },
         "padding": {
           "ours": "0px",
           "ref": "17px 0px 0px 15px"
         },
+        "lineHeight": {
+          "ours": "22px",
+          "ref": "normal"
+        },
         "rect": {
           "ours": {
-            "x": 95,
-            "y": 911,
-            "w": 13,
-            "h": 14
+            "x": 74,
+            "y": 896,
+            "w": 26,
+            "h": 22
           },
           "ref": {
             "x": 59,
@@ -774,18 +831,14 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)",
-      "tag": "span",
+      "path": "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(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)",
+      "tag": "h2",
       "text": "Round corners",
       "deltas": {
-        "margin": {
-          "ours": "0px",
-          "ref": "5px 0px 18px"
-        },
         "rect": {
           "ours": {
-            "x": 160,
-            "y": 909,
+            "x": 117,
+            "y": 905,
             "w": 117,
             "h": 19
           },
@@ -799,7 +852,7 @@
       }
     },
     {
-      "path": "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(3)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>label:nth-child(2)>span:nth-child(1)",
+      "path": "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(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>label:nth-child(2)>span:nth-child(1)",
       "tag": "span",
       "text": "Preserve aspect ratio",
       "deltas": {
@@ -817,8 +870,8 @@
         },
         "rect": {
           "ours": {
-            "x": 399,
-            "y": 986,
+            "x": 422,
+            "y": 973,
             "w": 129,
             "h": 18
           },
@@ -836,10 +889,6 @@
       "tag": "span",
       "text": "PIPELINE OUTPUTS",
       "deltas": {
-        "fontWeight": {
-          "ours": "500",
-          "ref": "400"
-        },
         "letterSpacing": {
           "ours": "1px",
           "ref": "1.2px"
@@ -856,7 +905,7 @@
           "ours": {
             "x": 799,
             "y": 178,
-            "w": 93,
+            "w": 94,
             "h": 24
           },
           "ref": {
@@ -877,7 +926,7 @@
           "ours": {
             "x": 799,
             "y": 209,
-            "w": 93,
+            "w": 94,
             "h": 36
           },
           "ref": {
@@ -912,7 +961,7 @@
         },
         "rect": {
           "ours": {
-            "x": 1090,
+            "x": 1097,
             "y": 240,
             "w": 36,
             "h": 13
@@ -931,20 +980,16 @@
       "tag": "span",
       "text": "DIMENSIONS",
       "deltas": {
-        "fontSize": {
-          "ours": "10px",
-          "ref": "9px"
-        },
         "letterSpacing": {
-          "ours": "1px",
+          "ours": "0.9px",
           "ref": "normal"
         },
         "rect": {
           "ours": {
-            "x": 1150,
-            "y": 215,
-            "w": 70,
-            "h": 13
+            "x": 1157,
+            "y": 216,
+            "w": 63,
+            "h": 11
           },
           "ref": {
             "x": 1073,
@@ -985,20 +1030,16 @@
       "tag": "span",
       "text": "FORMAT",
       "deltas": {
-        "fontSize": {
-          "ours": "10px",
-          "ref": "9px"
-        },
         "letterSpacing": {
-          "ours": "1px",
+          "ours": "0.9px",
           "ref": "normal"
         },
         "rect": {
           "ours": {
-            "x": 1150,
-            "y": 239,
-            "w": 42,
-            "h": 13
+            "x": 1157,
+            "y": 240,
+            "w": 38,
+            "h": 11
           },
           "ref": {
             "x": 1159,
@@ -1039,20 +1080,16 @@
       "tag": "span",
       "text": "SIZE",
       "deltas": {
-        "fontSize": {
-          "ours": "10px",
-          "ref": "9px"
-        },
         "letterSpacing": {
-          "ours": "1px",
+          "ours": "0.9px",
           "ref": "normal"
         },
         "rect": {
           "ours": {
-            "x": 1150,
-            "y": 264,
-            "w": 28,
-            "h": 13
+            "x": 1157,
+            "y": 265,
+            "w": 25,
+            "h": 11
           },
           "ref": {
             "x": 1246,
@@ -1114,13 +1151,13 @@
       }
     },
     {
-      "path": "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)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
+      "path": "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)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
       "tag": "span",
       "text": "original.png · 1200 × 800",
       "deltas": {
         "rect": {
           "ours": {
-            "x": 1213,
+            "x": 814,
             "y": 704,
             "w": 135,
             "h": 11
@@ -1164,13 +1201,13 @@
       }
     },
     {
-      "path": "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)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
+      "path": "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)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
       "tag": "span",
       "text": "gradient applied",
       "deltas": {
         "rect": {
           "ours": {
-            "x": 1262,
+            "x": 814,
             "y": 1137,
             "w": 86,
             "h": 11
@@ -1214,13 +1251,13 @@
       }
     },
     {
-      "path": "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)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
+      "path": "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)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
       "tag": "span",
       "text": "background removed",
       "deltas": {
         "rect": {
           "ours": {
-            "x": 1251,
+            "x": 814,
             "y": 1569,
             "w": 97,
             "h": 11
@@ -1264,13 +1301,13 @@
       }
     },
     {
-      "path": "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)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
+      "path": "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)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
       "tag": "span",
       "text": "outline added",
       "deltas": {
         "rect": {
           "ours": {
-            "x": 1278,
+            "x": 814,
             "y": 2002,
             "w": 70,
             "h": 11
@@ -1314,13 +1351,13 @@
       }
     },
     {
-      "path": "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)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)",
+      "path": "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)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
       "tag": "span",
       "text": "ready · PNG-24",
       "deltas": {
         "rect": {
           "ours": {
-            "x": 1272,
+            "x": 814,
             "y": 2434,
             "w": 76,
             "h": 11
@@ -1362,24 +1399,28 @@
     "AUTO",
     "Gradient color",
     "DIRECTION",
-    "135°",
+    "135 °",
     "OPACITY",
+    "75%",
+    "50%",
+    "25%",
     "Automatic subject detection enabled",
     "Outline width",
-    "2px",
+    "2 px",
     "Outline color",
     "Corner radius",
-    "18px"
+    "18 px",
+    "v0.1.0",
+    "© 2026"
   ],
   "onlyRef": [
     "/ \n            WORKSPACE",
-    "Workspace",
-    "Catalog",
-    "Gradient",
-    "Background remover",
     "COLOR",
     "135\n                        °",
-    "100%",
+    "100",
+    "75",
+    "50",
+    "25",
     "2\n                        px",
     "18\n                        px",
     "v2.4.0",
@@ -1388,8 +1429,8 @@
   "counts": {
     "tokenLight": 10,
     "tokenDark": 16,
-    "elements": 46,
-    "onlyOurs": 13,
-    "onlyRef": 12
+    "elements": 47,
+    "onlyOurs": 18,
+    "onlyRef": 11
   }
 }
\ No newline at end of file
diff --git a/web/audit/audit-report.md b/web/audit/audit-report.md
index d46d396..d677d06 100644
--- a/web/audit/audit-report.md
+++ b/web/audit/audit-report.md
@@ -2,14 +2,14 @@
 
 vs C:\+XBOCTuK\+life_projects\easy-png-tools\refs-html\demo.html
 
-_2026-08-28T11:58:18.224Z_
+_2026-08-28T14:54:53.564Z_
 
 ## Сводка
 
 - Токены light: **10** расх.
 - Токены dark: **16** расх.
-- Элементы (стиль/геометрия): **46** расх.
-- Только у нас: 13, только в рефе: 12
+- Элементы (стиль/геометрия): **47** расх.
+- Только у нас: 18, только в рефе: 11
 
 ## Токены — Light
 
@@ -47,7 +47,7 @@ _2026-08-28T11:58:18.224Z_
 | `--radius-lg` | — | .5rem |
 | `--text-sm` | — | .875rem |
 
-## Расхождения элементов (топ 46)
+## Расхождения элементов (топ 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`
@@ -59,71 +59,86 @@ _2026-08-28T11:58:18.224Z_
     - **display**: `inline` → `block`
     - **rect**: `165,124 7x13` → `1348,20 4x24`
 
-### `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(2)>div:nth-child(1)>span:nth-child(1)` — "PROCESSING PIPELINE"
-    - **fontWeight**: `500` → `400`
-    - **letterSpacing**: `1px` → `1.2px`
-    - **lineHeight**: `12px` → `normal`
-    - **display**: `block` → `inline`
-    - **rect**: `58,428 154x12` → `58,400 127x12`
+### `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(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)` — "100%"
+    - **color**: `rgb(255, 255, 255)` → `rgb(23, 33, 43)`
+    - **backgroundColor**: `rgb(23, 105, 210)` → `rgba(0, 0, 0, 0)`
+    - **padding**: `0px 11.2px` → `0px`
+    - **letterSpacing**: `0.6px` → `0.8px`
+    - **display**: `flex` → `block`
+    - **rect**: `518,552 49x30` → `680,546 25x12`
 
-### `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)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PIPELINE OUTPUTS"
-    - **fontWeight**: `500` → `400`
-    - **letterSpacing**: `1px` → `1.2px`
-    - **lineHeight**: `12px` → `normal`
-    - **display**: `block` → `inline`
-    - **rect**: `799,178 93x24` → `799,188 54x36`
+### `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(3)>article:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "01"
+    - **fontSize**: `22px` → `11px`
+    - **fontWeight**: `600` → `400`
+    - **padding**: `0px` → `17px 0px 0px 15px`
+    - **lineHeight**: `22px` → `normal`
+    - **rect**: `74,464 26x22` → `59,466 46x150`
+
+### `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(3)>article:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "02"
+    - **fontSize**: `22px` → `11px`
+    - **fontWeight**: `600` → `400`
+    - **padding**: `0px` → `17px 0px 0px 15px`
+    - **lineHeight**: `22px` → `normal`
+    - **rect**: `74,624 26x22` → `59,628 46x136`
+
+### `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(3)>article:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "03"
+    - **fontSize**: `22px` → `11px`
+    - **fontWeight**: `600` → `400`
+    - **padding**: `0px` → `17px 0px 0px 15px`
+    - **lineHeight**: `22px` → `normal`
+    - **rect**: `74,746 26x22` → `59,776 46x150`
+
+### `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(3)>article:nth-child(4)>div:nth-child(1)>span:nth-child(1)` — "04"
+    - **fontSize**: `22px` → `11px`
+    - **fontWeight**: `600` → `400`
+    - **padding**: `0px` → `17px 0px 0px 15px`
+    - **lineHeight**: `22px` → `normal`
+    - **rect**: `74,896 26x22` → `59,938 46x142`
 
 ### `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)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "1.2 MB"
     - **fontSize**: `10px` → `11px`
     - **color**: `rgb(255, 255, 255)` → `rgb(23, 33, 43)`
     - **margin**: `0px` → `5px 0px 0px`
     - **display**: `inline` → `block`
-    - **rect**: `1090,240 36x13` → `1246,291 79x13`
+    - **rect**: `1097,240 36x13` → `1246,291 79x13`
 
-### `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(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)` — "100"
-    - **padding**: `0px 11.2px` → `0px`
-    - **letterSpacing**: `0.6px` → `normal`
-    - **display**: `flex` → `block`
-    - **rect**: `491,590 42x30` → `520,567 46x30`
+### `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(2)>div:nth-child(1)>span:nth-child(1)` — "PROCESSING PIPELINE"
+    - **letterSpacing**: `1px` → `1.2px`
+    - **lineHeight**: `12px` → `normal`
+    - **display**: `block` → `inline`
+    - **rect**: `58,382 154x12` → `58,400 127x12`
 
-### `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(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(2)` — "75"
-    - **padding**: `0px 11.2px` → `0px`
-    - **letterSpacing**: `0.6px` → `normal`
-    - **display**: `flex` → `block`
-    - **rect**: `533,590 37x30` → `566,567 46x30`
-
-### `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(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(3)` — "50"
-    - **padding**: `0px 11.2px` → `0px`
-    - **letterSpacing**: `0.6px` → `normal`
-    - **display**: `flex` → `block`
-    - **rect**: `569,590 37x30` → `612,567 46x30`
-
-### `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(3)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(4)` — "25"
-    - **padding**: `0px 11.2px` → `0px`
-    - **letterSpacing**: `0.6px` → `normal`
-    - **display**: `flex` → `block`
-    - **rect**: `606,590 37x30` → `658,567 46x30`
-
-### `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(3)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>label:nth-child(2)>span:nth-child(1)` — "Preserve aspect ratio"
+### `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(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>label:nth-child(2)>span:nth-child(1)` — "Preserve aspect ratio"
     - **fontSize**: `13.6px` → `16px`
     - **lineHeight**: `normal` → `24px`
     - **display**: `block` → `inline`
-    - **rect**: `399,986 129x18` → `432,1021 156x17`
+    - **rect**: `422,973 129x18` → `432,1021 156x17`
 
-### `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)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "DIMENSIONS"
-    - **fontSize**: `10px` → `9px`
-    - **letterSpacing**: `1px` → `normal`
-    - **rect**: `1150,215 70x13` → `1073,271 79x10`
+### `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)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PIPELINE OUTPUTS"
+    - **letterSpacing**: `1px` → `1.2px`
+    - **lineHeight**: `12px` → `normal`
+    - **display**: `block` → `inline`
+    - **rect**: `799,178 94x24` → `799,188 54x36`
 
-### `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)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(1)` — "FORMAT"
-    - **fontSize**: `10px` → `9px`
-    - **letterSpacing**: `1px` → `normal`
-    - **rect**: `1150,239 42x13` → `1159,271 79x10`
+### `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**: `513,24 69x15` → `792,26 49x12`
 
-### `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)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>span:nth-child(1)` — "SIZE"
-    - **fontSize**: `10px` → `9px`
-    - **letterSpacing**: `1px` → `normal`
-    - **rect**: `1150,264 28x13` → `1246,271 79x10`
+### `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**: `600,24 54x15` → `864,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**: `672,24 61x15` → `924,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**: `751,24 138x15` → `990,26 99x12`
 
 ### `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)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "SOURCE"
     - **fontSize**: `10px` → `9px`
@@ -150,104 +165,96 @@ _2026-08-28T11:58:18.224Z_
     - **letterSpacing**: `0.8px` → `normal`
     - **rect**: `806,2047 550x13` → `808,1378 59x10`
 
-### `body>div:nth-child(1)>div:nth-child(1)>header:nth-child(1)>div:nth-child(2)>div:nth-child(4)>button:nth-child(2)` — "EN"
+### `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)>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)>h1:nth-child(2)` — "Build your image pipeline."
-    - **lineHeight**: `normal` → `57.6px`
-    - **rect**: `58,155 474x150` → `58,154 482x115`
+    - **lineHeight**: `51.84px` → `57.6px`
+    - **rect**: `58,155 474x104` → `58,154 482x115`
 
-### `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(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "01"
-    - **padding**: `0px` → `17px 0px 0px 15px`
-    - **rect**: `95,504 13x14` → `59,466 46x150`
-
-### `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(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)` — "BACKGROUND"
+### `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(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "BACKGROUND"
     - **display**: `block` → `inline`
-    - **rect**: `116,504 72x13` → `143,489 67x12`
+    - **rect**: `117,455 171x13` → `143,489 67x12`
 
-### `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(3)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)` — "Gradient background"
-    - **margin**: `0px` → `5px 0px 18px`
-    - **rect**: `196,501 171x19` → `143,510 157x18`
-
-### `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(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)` — "02"
-    - **padding**: `0px` → `17px 0px 0px 15px`
-    - **rect**: `95,655 13x14` → `59,628 46x136`
-
-### `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(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)` — "TRANSFORM"
+### `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(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "TRANSFORM"
     - **display**: `block` → `inline`
-    - **rect**: `116,656 65x13` → `143,651 60x12`
+    - **rect**: `117,615 153x13` → `143,651 60x12`
 
-### `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(3)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)` — "Remove background"
-    - **margin**: `0px` → `5px 0px 18px`
-    - **rect**: `189,653 153x19` → `143,672 140x18`
-
-### `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(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "03"
-    - **padding**: `0px` → `17px 0px 0px 15px`
-    - **rect**: `95,769 13x14` → `59,776 46x150`
-
-### `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(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)` — "STYLE"
+### `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(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "STYLE"
     - **display**: `block` → `inline`
-    - **rect**: `116,770 36x13` → `143,799 34x12`
+    - **rect**: `117,737 99x13` → `143,799 34x12`
 
-### `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(3)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)` — "Add outline"
-    - **margin**: `0px` → `5px 0px 18px`
-    - **rect**: `160,767 99x19` → `143,820 91x18`
-
-### `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(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)` — "04"
-    - **padding**: `0px` → `17px 0px 0px 15px`
-    - **rect**: `95,911 13x14` → `59,938 46x142`
-
-### `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(3)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)` — "Round corners"
-    - **margin**: `0px` → `5px 0px 18px`
-    - **rect**: `160,909 117x19` → `143,982 107x18`
+### `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)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "DIMENSIONS"
+    - **letterSpacing**: `0.9px` → `normal`
+    - **rect**: `1157,216 63x11` → `1073,271 79x10`
 
 ### `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)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "1200 × 800 px"
     - **margin**: `0px` → `5px 0px 0px`
     - **rect**: `1236,214 86x14` → `1073,291 79x13`
 
+### `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)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(1)` — "FORMAT"
+    - **letterSpacing**: `0.9px` → `normal`
+    - **rect**: `1157,240 38x11` → `1159,271 79x10`
+
 ### `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)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(2)` — "PNG-24"
     - **margin**: `0px` → `5px 0px 0px`
     - **rect**: `1282,238 40x14` → `1159,291 79x13`
 
+### `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)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>span:nth-child(1)` — "SIZE"
+    - **letterSpacing**: `0.9px` → `normal`
+    - **rect**: `1157,265 25x11` → `1246,271 79x10`
+
 ### `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(2)>div:nth-child(4)>button:nth-child(1)` — "RU"
+### `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`
 
 ### `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)>p:nth-child(3)` — "Chain simple tools together. Every chang"
-    - **rect**: `58,321 474x51` → `58,285 482x51`
+    - **rect**: `58,275 474x51` → `58,285 482x51`
 
 ### `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(2)>span:nth-child(2)` — "source.png"
-    - **rect**: `597,347 66x14` → `606,311 60x13`
+    - **rect**: `597,300 66x14` → `606,311 60x13`
 
 ### `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(2)>b:nth-child(3)` — "1.8 MB"
-    - **rect**: `671,347 40x14` → `674,311 36x13`
+    - **rect**: `671,300 40x14` → `674,311 36x13`
 
 ### `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(2)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)` — "• LIVE"
-    - **rect**: `175,451 36x13` → `173,425 33x12`
+    - **rect**: `175,405 36x13` → `173,425 33x12`
+
+### `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(3)>article:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Gradient background"
+    - **rect**: `117,473 171x19` → `143,510 157x18`
+
+### `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(3)>article:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Remove background"
+    - **rect**: `117,633 153x19` → `143,672 140x18`
+
+### `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(3)>article:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Add outline"
+    - **rect**: `117,755 99x19` → `143,820 91x18`
+
+### `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(3)>article:nth-child(4)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>h2:nth-child(2)` — "Round corners"
+    - **rect**: `117,905 117x19` → `143,982 107x18`
 
 ### `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)>div:nth-child(1)>div:nth-child(1)>strong:nth-child(2)` — "Visual history"
-    - **rect**: `799,209 93x36` → `799,233 87x34`
+    - **rect**: `799,209 94x36` → `799,233 87x34`
 
 ### `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)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PNG"
     - **rect**: `1067,496 28x19` → `923,478 27x18`
 
-### `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)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "original.png · 1200 × 800"
-    - **rect**: `1213,704 135x11` → `942,663 124x10`
+### `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)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "original.png · 1200 × 800"
+    - **rect**: `814,704 135x11` → `942,663 124x10`
 
-### `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)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "gradient applied"
-    - **rect**: `1262,1137 86x11` → `1275,663 79x10`
+### `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)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "gradient applied"
+    - **rect**: `814,1137 86x11` → `1275,663 79x10`
 
-### `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)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "background removed"
-    - **rect**: `1251,1569 97x11` → `977,1021 89x10`
+### `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)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "background removed"
+    - **rect**: `814,1569 97x11` → `977,1021 89x10`
 
-### `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)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "outline added"
-    - **rect**: `1278,2002 70x11` → `1290,1021 64x10`
+### `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)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "outline added"
+    - **rect**: `814,2002 70x11` → `1290,1021 64x10`
 
-### `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)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "ready · PNG-24"
-    - **rect**: `1272,2434 76x11` → `997,1378 69x10`
+### `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)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "ready · PNG-24"
+    - **rect**: `814,2434 76x11` → `997,1378 69x10`
 
 ### `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`
@@ -259,27 +266,31 @@ _2026-08-28T11:58:18.224Z_
 - `AUTO`
 - `Gradient color`
 - `DIRECTION`
-- `135°`
+- `135 °`
 - `OPACITY`
+- `75%`
+- `50%`
+- `25%`
 - `Automatic subject detection enabled`
 - `Outline width`
-- `2px`
+- `2 px`
 - `Outline color`
 - `Corner radius`
-- `18px`
+- `18 px`
+- `v0.1.0`
+- `© 2026`
 
 ## Только в рефе (структурно)
 
 - `/ 
             WORKSPACE`
-- `Workspace`
-- `Catalog`
-- `Gradient`
-- `Background remover`
 - `COLOR`
 - `135
                         °`
-- `100%`
+- `100`
+- `75`
+- `50`
+- `25`
 - `2
                         px`
 - `18
diff --git a/web/scripts/audit.mjs b/web/scripts/audit.mjs
index 1567d87..2ef028a 100644
--- a/web/scripts/audit.mjs
+++ b/web/scripts/audit.mjs
@@ -47,7 +47,16 @@ const waitFor = async (url, ms = 60000) => {
 		try {
 			const r = await fetch(url);
 			if (r.ok) return;
-		} catch {}
+			// Сервер уже отвечает, но страница упала (4xx/5xx) — ждать 200
+			// бессмысленно: сообщаем явно вместо таймаута "dev server not up".
+			if (r.status >= 400) {
+				throw new Error(
+					`route ${url} returned HTTP ${r.status} (server is up, page failed to render)`,
+				);
+			}
+		} catch (e) {
+			if (e instanceof Error && e.message.includes("returned HTTP")) throw e;
+		}
 		await new Promise((r) => setTimeout(r, 500));
 	}
 	throw new Error("dev server not up: " + url);
diff --git a/web/src/lib/components/kit/MetaRow.svelte b/web/src/lib/components/kit/MetaRow.svelte
index 27d04f4..a2125ed 100644
--- a/web/src/lib/components/kit/MetaRow.svelte
+++ b/web/src/lib/components/kit/MetaRow.svelte
@@ -21,7 +21,7 @@
 	}
 	.meta-caption {
 		font-family: var(--font-mono);
-		font-size: 10px;
+		font-size: 9px;
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		color: var(--muted);
diff --git a/web/src/lib/components/kit/MonoLabel.svelte b/web/src/lib/components/kit/MonoLabel.svelte
index 61d9451..fa119b9 100644
--- a/web/src/lib/components/kit/MonoLabel.svelte
+++ b/web/src/lib/components/kit/MonoLabel.svelte
@@ -20,7 +20,7 @@
 		font-family: var(--font-mono);
 		font-size: 10px;
 		line-height: 1.2;
-		font-weight: 500;
+		font-weight: 400;
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		color: var(--muted);
diff --git a/web/src/lib/components/kit/SliderField.svelte b/web/src/lib/components/kit/SliderField.svelte
index 8a9b9d8..6eabacf 100644
--- a/web/src/lib/components/kit/SliderField.svelte
+++ b/web/src/lib/components/kit/SliderField.svelte
@@ -29,7 +29,12 @@
 <Field {label}>
 	<div class="slider-field">
 		<input type="range" {min} {max} {step} {value} oninput={handle} />
-		<span class="slider-value">{value}{suffix}</span>
+		<span class="slider-value">
+			{value}
+			{#if suffix}
+				{suffix}
+			{/if}
+		</span>
 	</div>
 </Field>
 
diff --git a/web/src/lib/components/kit/StepCard.svelte b/web/src/lib/components/kit/StepCard.svelte
index 15bd83c..455352a 100644
--- a/web/src/lib/components/kit/StepCard.svelte
+++ b/web/src/lib/components/kit/StepCard.svelte
@@ -6,59 +6,88 @@
 		index: number;
 		title?: string;
 		type?: string;
+		tools?: Snippet;
 		children?: Snippet;
 		onremove?: () => void;
 	}
-	let { index, title, type, children, onremove }: Props = $props();
+
+	let { index, title, type, tools, children, onremove }: Props = $props();
 </script>
 
-<div class="step-card">
-	<div class="step-heading">
-		<span class="drag" aria-hidden="true"><GripVertical size={16} /></span>
+<article class="step-card">
+	<div class="step-rail">
 		<span class="step-index">{index.toString().padStart(2, "0")}</span>
-		{#if type}<span class="step-type">{type}</span>{/if}
-		{#if title}<span class="step-title">{title}</span>{/if}
-		<button
-			type="button"
-			class="step-remove"
-			aria-label="Remove step"
-			onclick={() => onremove?.()}
-		>
-			<X size={16} />
-		</button>
+		<span class="drag" aria-hidden="true"><GripVertical size={16} /></span>
 	</div>
-	{#if children}
-		<div class="step-body">{@render children()}</div>
-	{/if}
-</div>
+	<div class="step-body">
+		<div class="step-heading">
+			<div class="step-heading-text">
+				{#if type}<span class="step-type">{type}</span>{/if}
+				{#if title}<h2 class="step-title">{title}</h2>{/if}
+			</div>
+			<div class="step-tools">
+				{#if tools}{@render tools()}{/if}
+				<button
+					type="button"
+					class="step-remove"
+					aria-label="Remove step"
+					onclick={() => onremove?.()}
+				>
+					<X size={16} />
+				</button>
+			</div>
+		</div>
+		{#if children}
+			<div class="step-content">{@render children()}</div>
+		{/if}
+	</div>
+</article>
 
 <style>
 	.step-card {
+		display: flex;
 		border: 1px solid var(--line);
 		border-radius: var(--radius);
 		background: var(--panel);
+		overflow: hidden;
 	}
-	.step-heading {
+	.step-rail {
 		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.5rem 0.75rem;
-		border-bottom: 1px solid var(--line);
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 10px;
+		min-width: 46px;
+		padding: 17px 0 17px 15px;
+		border-right: 1px solid var(--line);
+	}
+	.step-index {
+		font: 600 22px var(--font-mono);
+		line-height: 1;
+		color: var(--blue);
 	}
 	.drag {
 		color: var(--muted);
 		cursor: grab;
 		display: inline-flex;
 	}
-	.step-index {
-		font-family: var(--font-mono);
-		font-size: 11px;
-		color: var(--blue);
+	.step-body {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
 	}
-	.step-title {
-		font: 600 15px var(--font-mono);
-		color: var(--foreground);
-		margin: 0;
+	.step-heading {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		border-bottom: 1px solid var(--line);
+	}
+	.step-heading-text {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
 	}
 	.step-type {
 		color: var(--muted);
@@ -66,8 +95,17 @@
 		letter-spacing: 0.12em;
 		text-transform: uppercase;
 	}
+	.step-title {
+		margin: 5px 0 18px;
+		font: 600 15px var(--font-mono);
+		color: var(--foreground);
+	}
+	.step-tools {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
 	.step-remove {
-		margin-left: auto;
 		border: none;
 		background: transparent;
 		color: var(--muted);
@@ -77,7 +115,7 @@
 	.step-remove:hover {
 		color: var(--danger);
 	}
-	.step-body {
+	.step-content {
 		padding: 0.75rem;
 		display: flex;
 		flex-direction: column;
diff --git a/web/src/lib/components/kit/TopBar.svelte b/web/src/lib/components/kit/TopBar.svelte
index ed983a9..1b40c0d 100644
--- a/web/src/lib/components/kit/TopBar.svelte
+++ b/web/src/lib/components/kit/TopBar.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import IconButton from "./IconButton.svelte";
 	import StatusDot from "./StatusDot.svelte";
+	import { resolve } from "$app/paths";
 	import { CircleHelp, Moon, Sun } from "@lucide/svelte";
 
 	interface Props {
@@ -14,13 +15,19 @@
 	let lang = $state("RU");
 </script>
 
-<header class="topbar">
-	<div class="brand">
-		<span class="brand-mark">EP</span>
-		<span>easy-png-tools</span>
-		{#if crumb}<span class="version">{crumb}</span>{/if}
-	</div>
-	<div class="top-actions">
+	<header class="topbar">
+		<div class="brand">
+			<span class="brand-mark">EP</span>
+			<span>easy-png-tools</span>
+			{#if crumb}<span class="version">{crumb}</span>{/if}
+		</div>
+		<nav class="nav">
+			<a href={resolve("/preview/demo")}>Workspace</a>
+			<a href={resolve("/preview/list-tools")}>Catalog</a>
+			<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
+			<a href={resolve("/preview/tools/remove-background-png")}>Background remover</a>
+		</nav>
+		<div class="top-actions">
 		<span class="status"><StatusDot /> AUTO PIPELINE</span>
 		<IconButton
 			icon={CircleHelp}
@@ -85,6 +92,21 @@
 		letter-spacing: 0.12em;
 		color: var(--blue);
 	}
+	.nav {
+		display: flex;
+		align-items: center;
+		gap: 18px;
+		margin-left: 24px;
+	}
+	.nav a {
+		color: var(--muted);
+		font: 12px var(--font-mono);
+		letter-spacing: 0.04em;
+		text-decoration: none;
+	}
+	.nav a:hover {
+		color: var(--foreground);
+	}
 	.top-actions {
 		display: flex;
 		align-items: center;
diff --git a/web/src/routes/preview/+layout.svelte b/web/src/routes/preview/+layout.svelte
index f124dd3..05e9d33 100644
--- a/web/src/routes/preview/+layout.svelte
+++ b/web/src/routes/preview/+layout.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import "$lib/styles/design2.css";
-	import type { Snippet } from "svelte";
 	import { page } from "$app/stores";
 	import AppShell from "$lib/components/kit/AppShell.svelte";
 	import TopBar from "$lib/components/kit/TopBar.svelte";
+	import "$lib/styles/design2.css";
+	import type { Snippet } from "svelte";
 
 	interface Props {
 		children: Snippet;
@@ -47,4 +47,25 @@
 <div class="preview-root" data-theme={theme}>
 	<TopBar {theme} {crumb} ontoggle={toggle} />
 	<AppShell>{@render children()}</AppShell>
+	<footer class="preview-footer">
+		<span class="version">v0.1.0</span>
+		<span class="copy">© 2026</span>
+	</footer>
 </div>
+
+<style>
+	.preview-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 16px clamp(20px, 4vw, 64px);
+		border-top: 1px solid var(--line);
+		font: 10px var(--font-mono);
+		letter-spacing: 0.08em;
+		color: var(--muted);
+	}
+	.preview-footer .version {
+		color: var(--blue);
+	}
+</style>
diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte
index 48a452f..5d9421c 100644
--- a/web/src/routes/preview/demo/+page.svelte
+++ b/web/src/routes/preview/demo/+page.svelte
@@ -91,7 +91,9 @@
 				title="Gradient background"
 				onremove={() => {}}
 			>
-				<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
+				{#snippet tools()}
+					<Badge tone="success">AUTO</Badge>
+				{/snippet}
 				<FieldGrid>
 					<ColorField label="Gradient color" bind:value={gradColor} />
 					<SliderField
@@ -106,10 +108,10 @@
 						<Segmented
 							bind:value={opacity}
 							options={[
-								{ value: "100", label: "100" },
-								{ value: "75", label: "75" },
-								{ value: "50", label: "50" },
-								{ value: "25", label: "25" },
+								{ value: "100", label: "100%" },
+								{ value: "75", label: "75%" },
+								{ value: "50", label: "50%" },
+								{ value: "25", label: "25%" },
 							]}
 						/>
 					</div>
@@ -122,12 +124,16 @@
 				title="Remove background"
 				onremove={() => {}}
 			>
-				<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
+				{#snippet tools()}
+					<Badge tone="success">AUTO</Badge>
+				{/snippet}
 				<div class="transform-note">Automatic subject detection enabled</div>
 			</StepCard>
 
 			<StepCard index={3} type="STYLE" title="Add outline" onremove={() => {}}>
-				<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
+				{#snippet tools()}
+					<Badge tone="success">AUTO</Badge>
+				{/snippet}
 				<FieldGrid compact>
 					<SliderField
 						label="Outline width"
@@ -146,7 +152,9 @@
 				title="Round corners"
 				onremove={() => {}}
 			>
-				<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
+				{#snippet tools()}
+					<Badge tone="success">AUTO</Badge>
+				{/snippet}
 				<FieldGrid compact>
 					<SliderField
 						label="Corner radius"
@@ -234,11 +242,6 @@
 		gap: 10px;
 		padding-top: 14px;
 	}
-	.step-tools {
-		display: flex;
-		gap: 8px;
-		align-items: center;
-	}
 	.control-block {
 		display: flex;
 		flex-direction: column;
diff --git a/web/src/routes/preview/demo/WorkspaceHeader.svelte b/web/src/routes/preview/demo/WorkspaceHeader.svelte
index f95d3d5..8697969 100644
--- a/web/src/routes/preview/demo/WorkspaceHeader.svelte
+++ b/web/src/routes/preview/demo/WorkspaceHeader.svelte
@@ -54,6 +54,7 @@
 		margin: 0 0 16px;
 		font-size: clamp(36px, 4vw, 64px);
 		font-weight: 650;
+		line-height: 0.9;
 		letter-spacing: -0.06em;
 		color: var(--foreground);
 	}