From 86e7b7250d5a35eabdd9c9a463ec7999fb7f641a Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Fri, 28 Aug 2026 17:03:30 +0500
Subject: [PATCH] refactor: update pages and refs audit

---
 web/audit/audit-report.json                   | 268 ++++++-----
 web/audit/audit-report.md                     | 177 ++++----
 web/src/routes/preview/demo/+page.svelte      | 418 +++++-------------
 .../routes/preview/tools/[id]/+page.svelte    | 271 ++----------
 4 files changed, 369 insertions(+), 765 deletions(-)

diff --git a/web/audit/audit-report.json b/web/audit/audit-report.json
index 42859b6..d8e8372 100644
--- a/web/audit/audit-report.json
+++ b/web/audit/audit-report.json
@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-28T11:41:19.954Z",
+  "generatedAt": "2026-08-28T11:58:18.224Z",
   "ours": "http://127.0.0.1:5179/preview/demo",
   "ref": "C:\\+XBOCTuK\\+life_projects\\easy-png-tools\\refs-html\\demo.html",
   "tokenDiffs": {
@@ -197,7 +197,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(1)>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(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
       "tag": "span",
       "text": "/",
       "deltas": {
@@ -231,7 +231,7 @@
         },
         "rect": {
           "ours": {
-            "x": 173,
+            "x": 165,
             "y": 124,
             "w": 7,
             "h": 13
@@ -246,7 +246,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(1)>h1: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(1)>div:nth-child(1)>div:nth-child(1)>h1:nth-child(2)",
       "tag": "h1",
       "text": "Build your image pipeline.",
       "deltas": {
@@ -271,7 +271,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p: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(1)>div:nth-child(1)>div:nth-child(1)>p:nth-child(3)",
       "tag": "p",
       "text": "Chain simple tools together. Every chang",
       "deltas": {
@@ -292,7 +292,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section: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(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>span:nth-child(2)",
       "tag": "span",
       "text": "source.png",
       "deltas": {
@@ -313,7 +313,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(2)>b: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(1)>div:nth-child(1)>div:nth-child(2)>b:nth-child(3)",
       "tag": "b",
       "text": "1.8 MB",
       "deltas": {
@@ -334,16 +334,32 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(3)>div:nth-child(1)>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(2)>div:nth-child(1)>span:nth-child(1)",
       "tag": "span",
       "text": "PROCESSING PIPELINE",
       "deltas": {
+        "fontWeight": {
+          "ours": "500",
+          "ref": "400"
+        },
+        "letterSpacing": {
+          "ours": "1px",
+          "ref": "1.2px"
+        },
+        "lineHeight": {
+          "ours": "12px",
+          "ref": "normal"
+        },
+        "display": {
+          "ours": "block",
+          "ref": "inline"
+        },
         "rect": {
           "ours": {
             "x": 58,
-            "y": 434,
-            "w": 137,
-            "h": 13
+            "y": 428,
+            "w": 154,
+            "h": 12
           },
           "ref": {
             "x": 58,
@@ -355,14 +371,14 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(3)>div:nth-child(1)>strong:nth-child(2)>em: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(2)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)",
       "tag": "em",
       "text": "• LIVE",
       "deltas": {
         "rect": {
           "ours": {
-            "x": 184,
-            "y": 457,
+            "x": 175,
+            "y": 451,
             "w": 36,
             "h": 13
           },
@@ -376,7 +392,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)",
       "tag": "span",
       "text": "01",
       "deltas": {
@@ -387,7 +403,7 @@
         "rect": {
           "ours": {
             "x": 95,
-            "y": 510,
+            "y": 504,
             "w": 13,
             "h": 14
           },
@@ -401,7 +417,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)",
       "tag": "span",
       "text": "BACKGROUND",
       "deltas": {
@@ -412,7 +428,7 @@
         "rect": {
           "ours": {
             "x": 116,
-            "y": 510,
+            "y": 504,
             "w": 72,
             "h": 13
           },
@@ -426,7 +442,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)",
+      "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",
       "text": "Gradient background",
       "deltas": {
@@ -437,7 +453,7 @@
         "rect": {
           "ours": {
             "x": 196,
-            "y": 507,
+            "y": 501,
             "w": 171,
             "h": 19
           },
@@ -451,48 +467,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)",
-      "tag": "span",
-      "text": "COLOR",
-      "deltas": {
-        "fontWeight": {
-          "ours": "500",
-          "ref": "400"
-        },
-        "margin": {
-          "ours": "0px",
-          "ref": "0px 0px 8px"
-        },
-        "letterSpacing": {
-          "ours": "1px",
-          "ref": "0.8px"
-        },
-        "lineHeight": {
-          "ours": "12px",
-          "ref": "normal"
-        },
-        "display": {
-          "ours": "block",
-          "ref": "flex"
-        },
-        "rect": {
-          "ours": {
-            "x": 71,
-            "y": 575,
-            "w": 203,
-            "h": 12
-          },
-          "ref": {
-            "x": 143,
-            "y": 546,
-            "w": 189,
-            "h": 12
-          }
-        }
-      }
-    },
-    {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(1)",
       "tag": "button",
       "text": "100",
       "deltas": {
@@ -511,7 +486,7 @@
         "rect": {
           "ours": {
             "x": 491,
-            "y": 596,
+            "y": 590,
             "w": 42,
             "h": 30
           },
@@ -525,7 +500,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button: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)>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": {
@@ -544,7 +519,7 @@
         "rect": {
           "ours": {
             "x": 533,
-            "y": 596,
+            "y": 590,
             "w": 37,
             "h": 30
           },
@@ -558,7 +533,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button: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)>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": {
@@ -577,7 +552,7 @@
         "rect": {
           "ours": {
             "x": 569,
-            "y": 596,
+            "y": 590,
             "w": 37,
             "h": 30
           },
@@ -591,7 +566,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>button:nth-child(4)",
+      "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": {
@@ -610,7 +585,7 @@
         "rect": {
           "ours": {
             "x": 606,
-            "y": 596,
+            "y": 590,
             "w": 37,
             "h": 30
           },
@@ -624,7 +599,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)",
       "tag": "span",
       "text": "02",
       "deltas": {
@@ -635,7 +610,7 @@
         "rect": {
           "ours": {
             "x": 95,
-            "y": 672,
+            "y": 655,
             "w": 13,
             "h": 14
           },
@@ -649,7 +624,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)",
       "tag": "span",
       "text": "TRANSFORM",
       "deltas": {
@@ -660,7 +635,7 @@
         "rect": {
           "ours": {
             "x": 116,
-            "y": 672,
+            "y": 656,
             "w": 65,
             "h": 13
           },
@@ -674,7 +649,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)",
+      "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",
       "text": "Remove background",
       "deltas": {
@@ -685,7 +660,7 @@
         "rect": {
           "ours": {
             "x": 189,
-            "y": 669,
+            "y": 653,
             "w": 153,
             "h": 19
           },
@@ -699,7 +674,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)",
       "tag": "span",
       "text": "03",
       "deltas": {
@@ -710,7 +685,7 @@
         "rect": {
           "ours": {
             "x": 95,
-            "y": 786,
+            "y": 769,
             "w": 13,
             "h": 14
           },
@@ -724,7 +699,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)",
       "tag": "span",
       "text": "STYLE",
       "deltas": {
@@ -735,7 +710,7 @@
         "rect": {
           "ours": {
             "x": 116,
-            "y": 786,
+            "y": 770,
             "w": 36,
             "h": 13
           },
@@ -749,7 +724,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)",
+      "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",
       "text": "Add outline",
       "deltas": {
@@ -760,7 +735,7 @@
         "rect": {
           "ours": {
             "x": 160,
-            "y": 783,
+            "y": 767,
             "w": 99,
             "h": 19
           },
@@ -774,7 +749,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)",
       "tag": "span",
       "text": "04",
       "deltas": {
@@ -785,7 +760,7 @@
         "rect": {
           "ours": {
             "x": 95,
-            "y": 948,
+            "y": 911,
             "w": 13,
             "h": 14
           },
@@ -799,7 +774,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)",
+      "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",
       "text": "Round corners",
       "deltas": {
@@ -810,7 +785,7 @@
         "rect": {
           "ours": {
             "x": 160,
-            "y": 945,
+            "y": 909,
             "w": 117,
             "h": 19
           },
@@ -824,7 +799,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>label:nth-child(2)>span:nth-child(1)",
       "tag": "span",
       "text": "Preserve aspect ratio",
       "deltas": {
@@ -843,7 +818,7 @@
         "rect": {
           "ours": {
             "x": 399,
-            "y": 1032,
+            "y": 986,
             "w": 129,
             "h": 18
           },
@@ -857,16 +832,32 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(1)>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(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)",
       "tag": "span",
       "text": "PIPELINE OUTPUTS",
       "deltas": {
+        "fontWeight": {
+          "ours": "500",
+          "ref": "400"
+        },
+        "letterSpacing": {
+          "ours": "1px",
+          "ref": "1.2px"
+        },
+        "lineHeight": {
+          "ours": "12px",
+          "ref": "normal"
+        },
+        "display": {
+          "ours": "block",
+          "ref": "inline"
+        },
         "rect": {
           "ours": {
             "x": 799,
-            "y": 177,
-            "w": 58,
-            "h": 33
+            "y": 178,
+            "w": 93,
+            "h": 24
           },
           "ref": {
             "x": 799,
@@ -878,14 +869,14 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(1)>strong: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(1)>div:nth-child(1)>strong:nth-child(2)",
       "tag": "strong",
       "text": "Visual history",
       "deltas": {
         "rect": {
           "ours": {
             "x": 799,
-            "y": 216,
+            "y": 209,
             "w": 93,
             "h": 36
           },
@@ -899,7 +890,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span: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(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)",
       "tag": "span",
       "text": "1.2 MB",
       "deltas": {
@@ -936,7 +927,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>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(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)",
       "tag": "span",
       "text": "DIMENSIONS",
       "deltas": {
@@ -965,7 +956,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>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(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)",
       "tag": "span",
       "text": "1200 × 800 px",
       "deltas": {
@@ -990,7 +981,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div: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(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)",
       "tag": "span",
       "text": "FORMAT",
       "deltas": {
@@ -1019,7 +1010,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>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(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(2)",
       "tag": "span",
       "text": "PNG-24",
       "deltas": {
@@ -1044,7 +1035,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>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(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)",
       "tag": "span",
       "text": "SIZE",
       "deltas": {
@@ -1073,7 +1064,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(1)>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(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)",
       "tag": "span",
       "text": "SOURCE",
       "deltas": {
@@ -1088,8 +1079,8 @@
         "rect": {
           "ours": {
             "x": 806,
-            "y": 320,
-            "w": 262,
+            "y": 317,
+            "w": 550,
             "h": 13
           },
           "ref": {
@@ -1102,14 +1093,14 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>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(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)",
       "tag": "span",
       "text": "PNG",
       "deltas": {
         "rect": {
           "ours": {
-            "x": 923,
-            "y": 499,
+            "x": 1067,
+            "y": 496,
             "w": 28,
             "h": 19
           },
@@ -1123,14 +1114,14 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>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(2)",
       "tag": "span",
       "text": "original.png · 1200 × 800",
       "deltas": {
         "rect": {
           "ours": {
-            "x": 925,
-            "y": 707,
+            "x": 1213,
+            "y": 704,
             "w": 135,
             "h": 11
           },
@@ -1144,7 +1135,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div: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(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)",
       "tag": "span",
       "text": "STEP 01",
       "deltas": {
@@ -1158,9 +1149,9 @@
         },
         "rect": {
           "ours": {
-            "x": 1094,
-            "y": 320,
-            "w": 262,
+            "x": 806,
+            "y": 750,
+            "w": 550,
             "h": 13
           },
           "ref": {
@@ -1173,14 +1164,14 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>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(2)",
       "tag": "span",
       "text": "gradient applied",
       "deltas": {
         "rect": {
           "ours": {
             "x": 1262,
-            "y": 707,
+            "y": 1137,
             "w": 86,
             "h": 11
           },
@@ -1194,7 +1185,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(3)>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(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>span:nth-child(1)",
       "tag": "span",
       "text": "STEP 02",
       "deltas": {
@@ -1209,8 +1200,8 @@
         "rect": {
           "ours": {
             "x": 806,
-            "y": 753,
-            "w": 262,
+            "y": 1182,
+            "w": 550,
             "h": 13
           },
           "ref": {
@@ -1223,14 +1214,14 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>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(2)",
       "tag": "span",
       "text": "background removed",
       "deltas": {
         "rect": {
           "ours": {
-            "x": 962,
-            "y": 1140,
+            "x": 1251,
+            "y": 1569,
             "w": 97,
             "h": 11
           },
@@ -1244,7 +1235,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(4)>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(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(4)>span:nth-child(1)",
       "tag": "span",
       "text": "STEP 03",
       "deltas": {
@@ -1258,9 +1249,9 @@
         },
         "rect": {
           "ours": {
-            "x": 1094,
-            "y": 753,
-            "w": 262,
+            "x": 806,
+            "y": 1615,
+            "w": 550,
             "h": 13
           },
           "ref": {
@@ -1273,14 +1264,14 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>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(2)",
       "tag": "span",
       "text": "outline added",
       "deltas": {
         "rect": {
           "ours": {
             "x": 1278,
-            "y": 1140,
+            "y": 2002,
             "w": 70,
             "h": 11
           },
@@ -1294,7 +1285,7 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(5)>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(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(5)>span:nth-child(1)",
       "tag": "span",
       "text": "FINAL OUTPUT",
       "deltas": {
@@ -1309,8 +1300,8 @@
         "rect": {
           "ours": {
             "x": 806,
-            "y": 1185,
-            "w": 262,
+            "y": 2047,
+            "w": 550,
             "h": 13
           },
           "ref": {
@@ -1323,14 +1314,14 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>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(2)",
       "tag": "span",
       "text": "ready · PNG-24",
       "deltas": {
         "rect": {
           "ours": {
-            "x": 984,
-            "y": 1572,
+            "x": 1272,
+            "y": 2434,
             "w": 76,
             "h": 11
           },
@@ -1344,14 +1335,14 @@
       }
     },
     {
-      "path": "body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>p: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(2)>div:nth-child(1)>p:nth-child(3)",
       "tag": "p",
       "text": "Output is generated in-browser. Your fil",
       "deltas": {
         "rect": {
           "ours": {
             "x": 799,
-            "y": 1627,
+            "y": 2489,
             "w": 565,
             "h": 17
           },
@@ -1374,11 +1365,9 @@
     "135°",
     "OPACITY",
     "Automatic subject detection enabled",
-    "WIDTH",
     "Outline width",
     "2px",
     "Outline color",
-    "RADIUS",
     "Corner radius",
     "18px"
   ],
@@ -1388,6 +1377,7 @@
     "Catalog",
     "Gradient",
     "Background remover",
+    "COLOR",
     "135\n                        °",
     "100%",
     "2\n                        px",
@@ -1398,8 +1388,8 @@
   "counts": {
     "tokenLight": 10,
     "tokenDark": 16,
-    "elements": 47,
-    "onlyOurs": 15,
-    "onlyRef": 11
+    "elements": 46,
+    "onlyOurs": 13,
+    "onlyRef": 12
   }
 }
\ No newline at end of file
diff --git a/web/audit/audit-report.md b/web/audit/audit-report.md
index 5c54f86..d46d396 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:41:19.954Z_
+_2026-08-28T11:58:18.224Z_
 
 ## Сводка
 
 - Токены light: **10** расх.
 - Токены dark: **16** расх.
-- Элементы (стиль/геометрия): **47** расх.
-- Только у нас: 15, только в рефе: 11
+- Элементы (стиль/геометрия): **46** расх.
+- Только у нас: 13, только в рефе: 12
 
 ## Токены — Light
 
@@ -47,9 +47,9 @@ _2026-08-28T11:41:19.954Z_
 | `--radius-lg` | — | .5rem |
 | `--text-sm` | — | .875rem |
 
-## Расхождения элементов (топ 47)
+## Расхождения элементов (топ 46)
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "/"
+### `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`
     - **fontSize**: `10px` → `16px`
     - **color**: `rgb(23, 105, 210)` → `rgb(23, 33, 43)`
@@ -57,150 +57,156 @@ _2026-08-28T11:41:19.954Z_
     - **letterSpacing**: `1.2px` → `normal`
     - **lineHeight**: `normal` → `24px`
     - **display**: `inline` → `block`
-    - **rect**: `173,124 7x13` → `1348,20 4x24`
+    - **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)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "COLOR"
+### `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`
-    - **margin**: `0px` → `0px 0px 8px`
-    - **letterSpacing**: `1px` → `0.8px`
+    - **letterSpacing**: `1px` → `1.2px`
     - **lineHeight**: `12px` → `normal`
-    - **display**: `block` → `flex`
-    - **rect**: `71,575 203x12` → `143,546 189x12`
+    - **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)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>button:nth-child(2)>span:nth-child(2)>span:nth-child(1)` — "1.2 MB"
+### `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(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`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>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"
+### `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,596 42x30` → `520,567 46x30`
+    - **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)>section:nth-child(1)>div:nth-child(4)>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"
+### `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,596 37x30` → `566,567 46x30`
+    - **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)>section:nth-child(1)>div:nth-child(4)>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"
+### `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,596 37x30` → `612,567 46x30`
+    - **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)>section:nth-child(1)>div:nth-child(4)>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"
+### `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,596 37x30` → `658,567 46x30`
+    - **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)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>label:nth-child(2)>span:nth-child(1)` — "Preserve aspect ratio"
     - **fontSize**: `13.6px` → `16px`
     - **lineHeight**: `normal` → `24px`
     - **display**: `block` → `inline`
-    - **rect**: `399,1032 129x18` → `432,1021 156x17`
+    - **rect**: `399,986 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)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "DIMENSIONS"
+### `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)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(1)` — "FORMAT"
+### `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)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(3)>span:nth-child(1)` — "SIZE"
+### `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)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(1)>span:nth-child(1)` — "SOURCE"
+### `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`
     - **letterSpacing**: `0.8px` → `normal`
-    - **rect**: `806,320 262x13` → `808,663 30x10`
+    - **rect**: `806,317 550x13` → `808,663 30x10`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(1)` — "STEP 01"
+### `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)>span:nth-child(1)` — "STEP 01"
     - **fontSize**: `10px` → `9px`
     - **letterSpacing**: `0.8px` → `normal`
-    - **rect**: `1094,320 262x13` → `1096,663 35x10`
+    - **rect**: `806,750 550x13` → `1096,663 35x10`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(3)>span:nth-child(1)` — "STEP 02"
+### `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)>span:nth-child(1)` — "STEP 02"
     - **fontSize**: `10px` → `9px`
     - **letterSpacing**: `0.8px` → `normal`
-    - **rect**: `806,753 262x13` → `808,1021 35x10`
+    - **rect**: `806,1182 550x13` → `808,1021 35x10`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(4)>span:nth-child(1)` — "STEP 03"
+### `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)>span:nth-child(1)` — "STEP 03"
     - **fontSize**: `10px` → `9px`
     - **letterSpacing**: `0.8px` → `normal`
-    - **rect**: `1094,753 262x13` → `1096,1021 35x10`
+    - **rect**: `806,1615 550x13` → `1096,1021 35x10`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(2)>div:nth-child(5)>span:nth-child(1)` — "FINAL OUTPUT"
+### `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)>span:nth-child(1)` — "FINAL OUTPUT"
     - **fontSize**: `10px` → `9px`
     - **letterSpacing**: `0.8px` → `normal`
-    - **rect**: `806,1185 262x13` → `808,1378 59x10`
+    - **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"
     - **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)>section:nth-child(1)>div:nth-child(2)>div:nth-child(1)>h1:nth-child(1)` — "Build your image pipeline."
+### `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`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(2)` — "01"
+### `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,510 13x14` → `59,466 46x150`
+    - **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)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(1)>div:nth-child(1)>span:nth-child(3)` — "BACKGROUND"
     - **display**: `block` → `inline`
-    - **rect**: `116,510 72x13` → `143,489 67x12`
+    - **rect**: `116,504 72x13` → `143,489 67x12`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)` — "Gradient 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)>div:nth-child(1)>div:nth-child(1)>span:nth-child(4)` — "Gradient background"
     - **margin**: `0px` → `5px 0px 18px`
-    - **rect**: `196,507 171x19` → `143,510 157x18`
+    - **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)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(2)` — "02"
+### `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,672 13x14` → `59,628 46x136`
+    - **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)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(2)>div:nth-child(1)>span:nth-child(3)` — "TRANSFORM"
     - **display**: `block` → `inline`
-    - **rect**: `116,672 65x13` → `143,651 60x12`
+    - **rect**: `116,656 65x13` → `143,651 60x12`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)` — "Remove 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)>div:nth-child(2)>div:nth-child(1)>span:nth-child(4)` — "Remove background"
     - **margin**: `0px` → `5px 0px 18px`
-    - **rect**: `189,669 153x19` → `143,672 140x18`
+    - **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)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "03"
+### `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,786 13x14` → `59,776 46x150`
+    - **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)>section:nth-child(1)>div:nth-child(4)>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)>div:nth-child(3)>div:nth-child(1)>span:nth-child(3)` — "STYLE"
     - **display**: `block` → `inline`
-    - **rect**: `116,786 36x13` → `143,799 34x12`
+    - **rect**: `116,770 36x13` → `143,799 34x12`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(4)>div:nth-child(3)>div:nth-child(1)>span:nth-child(4)` — "Add outline"
+### `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,783 99x19` → `143,820 91x18`
+    - **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)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(1)>span:nth-child(2)` — "04"
+### `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,948 13x14` → `59,938 46x142`
+    - **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)>section:nth-child(1)>div:nth-child(4)>div:nth-child(4)>div:nth-child(1)>span:nth-child(4)` — "Round corners"
+### `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,945 117x19` → `143,982 107x18`
+    - **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)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1)>span:nth-child(2)` — "1200 × 800 px"
+### `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)>section:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>span:nth-child(2)` — "PNG-24"
+### `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`
 
@@ -210,47 +216,41 @@ _2026-08-28T11:41:19.954Z_
 ### `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"
     - **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)>section:nth-child(1)>div:nth-child(2)>div:nth-child(1)>p:nth-child(2)` — "Chain simple tools together. Every chang"
+### `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`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "source.png"
+### `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`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(2)>div:nth-child(2)>b:nth-child(3)` — "1.8 MB"
+### `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`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(1)>div:nth-child(3)>div:nth-child(1)>span:nth-child(1)` — "PROCESSING PIPELINE"
-    - **rect**: `58,434 137x13` → `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(2)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)` — "• LIVE"
+    - **rect**: `175,451 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)>section:nth-child(1)>div:nth-child(3)>div:nth-child(1)>strong:nth-child(2)>em:nth-child(1)` — "• LIVE"
-    - **rect**: `184,457 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(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`
 
-### `body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>section:nth-child(2)>div:nth-child(1)>div:nth-child(1)>span:nth-child(1)` — "PIPELINE OUTPUTS"
-    - **rect**: `799,177 58x33` → `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(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)>section:nth-child(2)>div:nth-child(1)>div:nth-child(1)>strong:nth-child(2)` — "Visual history"
-    - **rect**: `799,216 93x36` → `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(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)>section:nth-child(2)>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**: `923,499 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(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)>section:nth-child(2)>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**: `925,707 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(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)>section:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "gradient applied"
-    - **rect**: `1262,707 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(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)>section:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "background removed"
-    - **rect**: `962,1140 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(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)>section:nth-child(2)>div:nth-child(2)>div:nth-child(4)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "outline added"
-    - **rect**: `1278,1140 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)>section:nth-child(2)>div:nth-child(2)>div:nth-child(5)>div:nth-child(2)>div:nth-child(2)>span:nth-child(2)` — "ready · PNG-24"
-    - **rect**: `984,1572 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)>section:nth-child(2)>p:nth-child(3)` — "Output is generated in-browser. Your fil"
-    - **rect**: `799,1627 565x17` → `799,1425 565x17`
+### `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`
 
 ## Только у нас (структурно)
 
@@ -262,11 +262,9 @@ _2026-08-28T11:41:19.954Z_
 - `135°`
 - `OPACITY`
 - `Automatic subject detection enabled`
-- `WIDTH`
 - `Outline width`
 - `2px`
 - `Outline color`
-- `RADIUS`
 - `Corner radius`
 - `18px`
 
@@ -278,6 +276,7 @@ _2026-08-28T11:41:19.954Z_
 - `Catalog`
 - `Gradient`
 - `Background remover`
+- `COLOR`
 - `135
                         °`
 - `100%`
diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte
index 06893a9..8bfedd2 100644
--- a/web/src/routes/preview/demo/+page.svelte
+++ b/web/src/routes/preview/demo/+page.svelte
@@ -1,18 +1,23 @@
 <script lang="ts">
-	import { Upload, Settings2, RotateCcw, ChevronDown } from "@lucide/svelte";
+	import { Settings2, ChevronDown } from "@lucide/svelte";
+	import WorkspaceLayout from "$lib/components/kit/WorkspaceLayout.svelte";
+	import WorkspaceHeader from "./WorkspaceHeader.svelte";
+	import SectionLabel from "$lib/components/kit/SectionLabel.svelte";
 	import StepCard from "$lib/components/kit/StepCard.svelte";
-	import Segmented from "$lib/components/kit/Segmented.svelte";
-	import SliderField from "$lib/components/kit/SliderField.svelte";
-	import ColorField from "$lib/components/kit/ColorField.svelte";
-	import Toggle from "$lib/components/kit/Toggle.svelte";
-	import IconButton from "$lib/components/kit/IconButton.svelte";
-	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
 	import Badge from "$lib/components/kit/Badge.svelte";
-	import StatusDot from "$lib/components/kit/StatusDot.svelte";
+	import FieldGrid from "$lib/components/kit/FieldGrid.svelte";
 	import MonoLabel from "$lib/components/kit/MonoLabel.svelte";
-	import MetaList from "$lib/components/kit/MetaList.svelte";
+	import ColorField from "$lib/components/kit/ColorField.svelte";
+	import SliderField from "$lib/components/kit/SliderField.svelte";
+	import Segmented from "$lib/components/kit/Segmented.svelte";
+	import ToggleRow from "$lib/components/kit/ToggleRow.svelte";
+	import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
 	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
 	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
+	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
+	import MetaList from "$lib/components/kit/MetaList.svelte";
+	import IconButton from "$lib/components/kit/IconButton.svelte";
+	import PipelineFooter from "$lib/components/kit/PipelineFooter.svelte";
 
 	let gradColor = $state("#DCEBFF");
 	let direction = $state(135);
@@ -56,31 +61,28 @@
 	<meta name="robots" content="noindex, nofollow" />
 </svelte:head>
 
-<div class="page-grid">
-	<section class="workspace">
-		<div class="eyebrow">PNG PROCESSING <span>/</span> WORKSPACE</div>
-		<div class="title-row">
-			<div>
-				<h1>Build your image pipeline.</h1>
-				<p class="lede">
-					Chain simple tools together. Every change is processed automatically
-					and previewed at each stage.
-				</p>
-			</div>
-			<div class="file-chip">
-				<Upload size={15} />
-				<span>source.png</span>
-				<b>1.8 MB</b>
-			</div>
-		</div>
+<WorkspaceLayout
+	columns="minmax(0, 1.05fr) minmax(520px, 0.95fr)"
+	gap="56px"
+	padding="60px clamp(24px, 4vw, 72px) 72px"
+	maxWidth="none"
+	stickyTop="24px"
+	padMobile="36px 16px 48px"
+>
+	{#snippet settings()}
+		<WorkspaceHeader
+			eyebrowA="PNG PROCESSING"
+			eyebrowB="WORKSPACE"
+			title="Build your image pipeline."
+			lede="Chain simple tools together. Every change is processed automatically and previewed at each stage."
+			file={{ name: "source.png", size: "1.8 MB" }}
+		/>
 
-		<div class="pipeline-head">
-			<div>
-				<span class="label">PROCESSING PIPELINE</span>
-				<strong>4 active steps <em>• LIVE</em></strong>
-			</div>
-			<button class="add-btn" onclick={() => {}}>+ Add tool</button>
-		</div>
+		<SectionLabel label="PROCESSING PIPELINE" title="4 active steps" meta="• LIVE">
+			{#snippet actions()}
+				<button class="add-btn" onclick={() => {}}>+ Add tool</button>
+			{/snippet}
+		</SectionLabel>
 
 		<div class="steps-list">
 			<StepCard
@@ -90,11 +92,8 @@
 				onremove={() => {}}
 			>
 				<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
-				<div class="controls">
-					<div class="control-block">
-						<MonoLabel>COLOR</MonoLabel>
-						<ColorField label="Gradient color" bind:value={gradColor} />
-					</div>
+				<FieldGrid>
+					<ColorField label="Gradient color" bind:value={gradColor} />
 					<SliderField
 						label="DIRECTION"
 						bind:value={direction}
@@ -114,7 +113,7 @@
 							]}
 						/>
 					</div>
-				</div>
+				</FieldGrid>
 			</StepCard>
 
 			<StepCard
@@ -129,22 +128,16 @@
 
 			<StepCard index={3} type="STYLE" title="Add outline" onremove={() => {}}>
 				<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
-				<div class="controls compact">
-					<div class="control-block">
-						<MonoLabel>WIDTH</MonoLabel>
-						<SliderField
-							label="Outline width"
-							bind:value={outlineWidth}
-							min={0}
-							max={8}
-							suffix="px"
-						/>
-					</div>
-					<div class="control-block">
-						<MonoLabel>COLOR</MonoLabel>
-						<ColorField label="Outline color" bind:value={outlineColor} />
-					</div>
-				</div>
+				<FieldGrid compact>
+					<SliderField
+						label="Outline width"
+						bind:value={outlineWidth}
+						min={0}
+						max={8}
+						suffix="px"
+					/>
+					<ColorField label="Outline color" bind:value={outlineColor} />
+				</FieldGrid>
 			</StepCard>
 
 			<StepCard
@@ -154,177 +147,79 @@
 				onremove={() => {}}
 			>
 				<div class="step-tools"><Badge tone="success">AUTO</Badge></div>
-				<div class="controls compact">
-					<div class="control-block">
-						<MonoLabel>RADIUS</MonoLabel>
-						<SliderField
-							label="Corner radius"
-							bind:value={radius}
-							min={0}
-							max={48}
-							suffix="px"
-						/>
-					</div>
-					<label class="toggle-row">
-						<span>Preserve aspect ratio</span>
-						<Toggle
-							bind:checked={preserveAspect}
-							label="Preserve aspect ratio"
-						/>
-					</label>
-				</div>
+				<FieldGrid compact>
+					<SliderField
+						label="Corner radius"
+						bind:value={radius}
+						min={0}
+						max={48}
+						suffix="px"
+					/>
+					<ToggleRow label="Preserve aspect ratio" bind:checked={preserveAspect} />
+				</FieldGrid>
 			</StepCard>
 		</div>
 
-		<div class="pipeline-footer">
-			<button class="reset-btn" onclick={() => {}}>
-				<RotateCcw size={14} /> Reset pipeline
-			</button>
-			<span class="auto-note"
-				><StatusDot /> changes are applied automatically</span
-			>
-		</div>
-	</section>
+		<PipelineFooter onreset={() => {}} />
+	{/snippet}
 
-	<section class="preview-panel">
-		<div class="preview-top">
-			<div>
-				<span class="label">PIPELINE OUTPUTS</span>
-				<strong>Visual history</strong>
-			</div>
-			<div class="preview-actions">
-				<button class="history-toggle" onclick={() => {}}>
-					Hide intermediate <ChevronDown size={15} />
-				</button>
-				<DownloadButton
-					label="Download result"
-					size="1.2 MB"
-					onclick={() => {}}
-				/>
-				<MetaList
-					items={[
-						{ caption: "DIMENSIONS", value: "1200 × 800 px" },
-						{ caption: "FORMAT", value: "PNG-24" },
-						{ caption: "SIZE", value: "1.2 MB" },
-					]}
-				/>
-				<IconButton
-					icon={Settings2}
-					label="Preview settings"
-					onclick={() => {}}
-				/>
-			</div>
-		</div>
+	{#snippet preview()}
+		<div class="preview-panel">
+			<SectionLabel label="PIPELINE OUTPUTS" title="Visual history">
+				{#snippet actions()}
+					<button class="history-toggle" onclick={() => {}}>
+						Hide intermediate <ChevronDown size={15} />
+					</button>
+					<DownloadButton
+						label="Download result"
+						size="1.2 MB"
+						onclick={() => {}}
+					/>
+					<MetaList
+						items={[
+							{ caption: "DIMENSIONS", value: "1200 × 800 px" },
+							{ caption: "FORMAT", value: "PNG-24" },
+							{ caption: "SIZE", value: "1.2 MB" },
+						]}
+					/>
+					<IconButton
+						icon={Settings2}
+						label="Preview settings"
+						onclick={() => {}}
+					/>
+				{/snippet}
+			</SectionLabel>
 
-		<div class="preview-stack">
-			{#each previewTiles as tile (tile.label)}
-				<PreviewTile label={tile.label}>
-					<CheckerCanvas size="large">
-						<div
-							class="ph"
-							class:active={tile.active}
-							style="background:{tile.bg}; border-radius:{tile.radius ??
-								'0'}; box-shadow:{tile.ring ?? 'none'};"
-						>
-							<span class="sample-icon">PNG</span>
-							<span>easy-png-tools</span>
+			<PreviewStack pad="16px 0">
+				{#each previewTiles as tile (tile.label)}
+					<PreviewTile label={tile.label}>
+						<CheckerCanvas size="large">
+							<div
+								class="ph"
+								class:active={tile.active}
+								style="background:{tile.bg}; border-radius:{tile.radius ??
+									'0'}; box-shadow:{tile.ring ?? 'none'};"
+							>
+								<span class="sample-icon">PNG</span>
+								<span>easy-png-tools</span>
+							</div>
+						</CheckerCanvas>
+						<div class="tile-label-wrap">
+							<span class="tile-label">{tile.label}</span>
+							<span class="tile-caption">{tile.caption}</span>
 						</div>
-					</CheckerCanvas>
-					<div class="tile-label-wrap">
-						<span class="tile-label">{tile.label}</span>
-						<span class="tile-caption">{tile.caption}</span>
-					</div>
-				</PreviewTile>
-			{/each}
-		</div>
+					</PreviewTile>
+				{/each}
+			</PreviewStack>
 
-		<p class="preview-note">
-			Output is generated in-browser. Your files never leave this device.
-		</p>
-	</section>
-</div>
+			<p class="preview-note">
+				Output is generated in-browser. Your files never leave this device.
+			</p>
+		</div>
+	{/snippet}
+</WorkspaceLayout>
 
 <style>
-	.page-grid {
-		display: grid;
-		grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
-		align-items: start;
-		gap: 56px;
-		max-width: none;
-		margin: auto;
-		padding: 60px clamp(24px, 4vw, 72px) 72px;
-	}
-	.workspace {
-		min-width: 0;
-	}
-	.eyebrow {
-		font: 10px var(--font-mono);
-		letter-spacing: 0.12em;
-		color: var(--muted);
-		margin-bottom: 18px;
-	}
-	.eyebrow span {
-		margin: 0 7px;
-		color: var(--blue);
-	}
-	.title-row {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-end;
-		gap: 30px;
-		margin-bottom: 56px;
-	}
-	h1 {
-		margin: 0 0 16px;
-		font-size: clamp(36px, 4vw, 64px);
-		font-weight: 650;
-		letter-spacing: -0.06em;
-		color: var(--foreground);
-	}
-	.lede {
-		margin: 0;
-		max-width: 550px;
-		color: var(--muted);
-		line-height: 1.6;
-	}
-	.file-chip {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		white-space: nowrap;
-		border: 1px solid var(--line);
-		background: var(--panel);
-		font: 11px var(--font-mono);
-		color: var(--muted);
-		padding: 10px 12px;
-	}
-	.file-chip b {
-		color: var(--blue);
-		font-weight: 500;
-	}
-	.pipeline-head {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		border-bottom: 1px solid var(--line);
-		padding-bottom: 12px;
-	}
-	.label {
-		font: 10px var(--font-mono);
-		letter-spacing: 0.12em;
-		color: var(--muted);
-	}
-	.pipeline-head strong {
-		display: block;
-		margin-top: 5px;
-		font: 600 14px var(--font-mono);
-		color: var(--foreground);
-	}
-	.pipeline-head em {
-		color: #25a96a;
-		font-style: normal;
-		font-size: 10px;
-	}
 	.add-btn {
 		display: flex;
 		align-items: center;
@@ -345,14 +240,6 @@
 		gap: 8px;
 		align-items: center;
 	}
-	.controls {
-		display: grid;
-		grid-template-columns: 1.1fr 1fr 1.2fr;
-		gap: 16px;
-	}
-	.controls.compact {
-		grid-template-columns: 1fr 1fr;
-	}
 	.control-block {
 		display: flex;
 		flex-direction: column;
@@ -365,66 +252,12 @@
 		color: var(--muted);
 		font: 11px var(--font-mono);
 	}
-	.toggle-row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 15px;
-		color: var(--foreground);
-		font-size: 0.85rem;
-		cursor: pointer;
-	}
-	.pipeline-footer {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding-top: 18px;
-	}
-	.reset-btn {
-		display: flex;
-		align-items: center;
-		gap: 7px;
-		color: var(--blue);
-		background: none;
-		border: 0;
-		cursor: pointer;
-		font-size: 12px;
-	}
-	.auto-note {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		color: var(--muted);
-		font: 11px var(--font-mono);
-	}
 	.preview-panel {
-		position: sticky;
-		top: 24px;
 		border: 1px solid var(--line);
 		background: var(--panel);
 		padding: 18px;
 		min-width: 0;
 	}
-	.preview-top {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		border-bottom: 1px solid var(--line);
-		padding-bottom: 15px;
-		gap: 16px;
-	}
-	.preview-top strong {
-		display: block;
-		margin-top: 5px;
-		font: 600 14px var(--font-mono);
-	}
-	.preview-actions {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		justify-content: flex-end;
-		gap: 10px;
-	}
 	.history-toggle {
 		display: flex;
 		align-items: center;
@@ -444,12 +277,6 @@
 		color: var(--foreground);
 		background: var(--background);
 	}
-	.preview-stack {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 12px;
-		padding: 16px 0;
-	}
 	.ph {
 		width: 80%;
 		aspect-ratio: 1.35;
@@ -489,25 +316,4 @@
 		font-size: 11px;
 		line-height: 1.5;
 	}
-	@media (max-width: 800px) {
-		.page-grid {
-			grid-template-columns: 1fr;
-			gap: 24px;
-			padding: 36px 16px 48px;
-		}
-		.title-row {
-			flex-direction: column;
-			align-items: flex-start;
-		}
-		.preview-panel {
-			position: static;
-		}
-		.controls,
-		.controls.compact {
-			grid-template-columns: 1fr;
-		}
-		.preview-stack {
-			grid-template-columns: 1fr;
-		}
-	}
 </style>
diff --git a/web/src/routes/preview/tools/[id]/+page.svelte b/web/src/routes/preview/tools/[id]/+page.svelte
index 177251f..b50bef2 100644
--- a/web/src/routes/preview/tools/[id]/+page.svelte
+++ b/web/src/routes/preview/tools/[id]/+page.svelte
@@ -6,30 +6,14 @@
 		defaultParams,
 		isChainable,
 		TOOLS,
-		type ParamDef,
 	} from "$lib/registry";
 	import { encode, downloadBlob, toDataUrl, decodeBytes } from "$lib/core/io";
 	import type { PixelImage } from "$lib/core/types";
-	import Panel from "$lib/components/kit/Panel.svelte";
-	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
-	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
-	import ColorField from "$lib/components/kit/ColorField.svelte";
-	import SliderField from "$lib/components/kit/SliderField.svelte";
-	import SelectField from "$lib/components/kit/SelectField.svelte";
-	import Toggle from "$lib/components/kit/Toggle.svelte";
-	import TextField from "$lib/components/kit/TextField.svelte";
-	import NumberField from "$lib/components/kit/NumberField.svelte";
-	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
-	import MetaList from "$lib/components/kit/MetaList.svelte";
-	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
-	import Badge from "$lib/components/kit/Badge.svelte";
-	import StatusLine from "$lib/components/kit/StatusLine.svelte";
+	import WorkspaceLayout from "$lib/components/kit/WorkspaceLayout.svelte";
 	import EmptyState from "$lib/components/kit/EmptyState.svelte";
-	import Button from "$lib/components/kit/Button.svelte";
-	import Dropzone from "$lib/components/kit/Dropzone.svelte";
-	import StepCard from "$lib/components/kit/StepCard.svelte";
-	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
 	import { SlidersHorizontal as ToolIcon } from "@lucide/svelte";
+	import SettingsPanel from "./SettingsPanel.svelte";
+	import PreviewPanel from "./PreviewPanel.svelte";
 
 	type ParamValue = string | number | boolean;
 
@@ -221,59 +205,8 @@
 	<meta name="robots" content="noindex, nofollow" />
 </svelte:head>
 
-{#snippet control(
-	p: ParamDef,
-	value: ParamValue,
-	onInput: (v: ParamValue) => void,
-)}
-	{#if p.type === "color"}
-		<ColorField
-			label={p.label}
-			value={value as string}
-			oninput={(v) => onInput(v)}
-		/>
-	{:else if p.type === "slider"}
-		<SliderField
-			label={p.label}
-			value={value as number}
-			min={p.min}
-			max={p.max}
-			step={p.step}
-			oninput={(v) => onInput(v)}
-		/>
-	{:else if p.type === "select"}
-		<SelectField
-			label={p.label}
-			value={value as string}
-			options={p.options}
-			onchange={(v) => onInput(v)}
-		/>
-	{:else if p.type === "checkbox"}
-		<label class="toggle-row"
-			><span>{p.label}</span>
-			<Toggle checked={value as boolean} onchange={(v) => onInput(v)} /></label
-		>
-	{:else if p.type === "text"}
-		<TextField
-			label={p.label}
-			value={value as string}
-			placeholder={p.placeholder}
-			oninput={(v) => onInput(v)}
-		/>
-	{:else if p.type === "number"}
-		<NumberField
-			label={p.label}
-			value={value as number}
-			min={p.min}
-			max={p.max}
-			step={p.step}
-			oninput={(v) => onInput(v)}
-		/>
-	{/if}
-{/snippet}
-
 {#if !firstTool}
-	<div class="tool-grid">
+	<div class="notfound">
 		<EmptyState
 			title="Tool not found"
 			description="No tool is registered under “{data.id}”."
@@ -281,171 +214,47 @@
 		/>
 	</div>
 {:else}
-	<div class="tool-grid">
-		<section class="pipeline-panel">
-			<Panel>
-				<PanelHeading title="Pipeline" eyebrow="STEPS">
-					{#snippet actions()}
-						<Badge tone="accent">AUTO</Badge>
-					{/snippet}
-				</PanelHeading>
-				<div class="pipeline-body">
-					{#if steps.length === 0}
-						<EmptyState
-							title="Pipeline empty"
-							description="Add a tool step below."
-						/>
-					{/if}
-					{#each steps as step, i (step.toolId + i)}
-						{@const st = getTool(step.toolId)}
-						<StepCard
-							index={i + 1}
-							title={st?.title ?? step.toolId}
-							type={st?.category}
-							onremove={() => removeStep(i)}
-						>
-							{#if st}
-								<div class="step-controls">
-									{#each st.params as p (p.id)}
-										{@render control(p, step.params[p.id] as ParamValue, (v) =>
-											setStepParam(i, p.id, v),
-										)}
-									{/each}
-								</div>
-							{/if}
-						</StepCard>
-					{/each}
-				</div>
-				<SettingsFooter>
-					<div class="add-step">
-						<SelectField
-							label="Add step"
-							value={addId}
-							options={chainOptions}
-							onchange={(v) => (addId = v)}
-						/>
-						<Button variant="ghost" onclick={addStep}>Add step</Button>
-					</div>
-				</SettingsFooter>
-			</Panel>
-		</section>
-
-		<section class="preview-panel">
-			<Panel>
-				<PanelHeading title="Pipeline output" eyebrow="RESULT">
-					{#snippet actions()}
-						{#if resultUrl}
-							<DownloadButton
-								label="Download result"
-								onclick={downloadResult}
-							/>
-						{/if}
-					{/snippet}
-				</PanelHeading>
-				<div class="preview-body">
-					{#if chainError}
-						<EmptyState title="Pipeline failed" description={chainError} />
-					{/if}
-					{#if needsSource && !sourceImg}
-						<Dropzone onfile={onFile} />
-					{:else if needsSource && sourceImg}
-						<Button variant="ghost" onclick={clearSource}>Change image</Button>
-					{/if}
-					<div class="preview-stack">
-						{#if needsSource && sourceImg}
-							<PreviewTile label="SOURCE">
-								<CheckerCanvas size="sm">
-									<img class="tile-img" src={sourceUrl} alt="source" />
-								</CheckerCanvas>
-							</PreviewTile>
-						{/if}
-						{#each stepOutputs as out, i (out.toolId + i)}
-							<PreviewTile label={`STEP ${String(i + 1).padStart(2, "0")}`}>
-								<CheckerCanvas size="sm">
-									<img class="tile-img" src={out.url} alt={out.title} />
-								</CheckerCanvas>
-							</PreviewTile>
-						{/each}
-					</div>
-					{#if processing}
-						<StatusLine label="processing pipeline" />
-					{/if}
-					<MetaList items={resultMeta} />
-				</div>
-			</Panel>
-		</section>
-	</div>
+	<WorkspaceLayout
+		columns="minmax(0, 1fr) minmax(0, 1.1fr)"
+		gap="40px"
+		padding="48px clamp(24px, 4vw, 72px) 72px"
+		maxWidth="1680px"
+		stickyTop="84px"
+		padMobile="32px 16px 48px"
+	>
+		{#snippet settings()}
+			<SettingsPanel
+				{steps}
+				{chainOptions}
+				{addId}
+				onAddStep={addStep}
+				onSetAddId={(v) => (addId = v)}
+				onRemoveStep={removeStep}
+				onSetParam={setStepParam}
+			/>
+		{/snippet}
+		{#snippet preview()}
+			<PreviewPanel
+				{needsSource}
+				{sourceImg}
+				{sourceUrl}
+				{stepOutputs}
+				{resultUrl}
+				{resultMeta}
+				{processing}
+				{chainError}
+				onFile={onFile}
+				onClearSource={clearSource}
+				onDownload={downloadResult}
+			/>
+		{/snippet}
+	</WorkspaceLayout>
 {/if}
 
 <style>
-	.tool-grid {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
-		align-items: start;
-		gap: 40px;
+	.notfound {
 		max-width: 1680px;
 		margin: 0 auto;
 		padding: 48px clamp(24px, 4vw, 72px) 72px;
 	}
-	.pipeline-body {
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-		padding: 0.75rem;
-	}
-	.step-controls {
-		display: flex;
-		flex-direction: column;
-		gap: 0.4rem;
-	}
-	.toggle-row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 1rem;
-		color: var(--foreground);
-		font-size: 0.85rem;
-		cursor: pointer;
-	}
-	.add-step {
-		display: flex;
-		align-items: flex-end;
-		gap: 0.75rem;
-		width: 100%;
-	}
-	.add-step :global(.select-field),
-	.add-step :global(select) {
-		min-width: 0;
-	}
-	.preview-panel {
-		position: sticky;
-		top: 84px;
-	}
-	.preview-body {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		padding: 1rem;
-	}
-	.preview-stack {
-		display: grid;
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-		gap: 12px;
-	}
-	.tile-img {
-		max-width: 100%;
-		max-height: 220px;
-		display: block;
-		border-radius: var(--radius);
-	}
-	@media (max-width: 900px) {
-		.tool-grid {
-			grid-template-columns: 1fr;
-			gap: 24px;
-			padding: 32px 16px 48px;
-		}
-		.preview-panel {
-			position: static;
-		}
-	}
 </style>