diff --git a/web/audit/cdp-audit-1440x900.txt b/web/audit/cdp-audit-1440x900.txt
index 18ad9bf..921ba5b 100644
--- a/web/audit/cdp-audit-1440x900.txt
+++ b/web/audit/cdp-audit-1440x900.txt
@@ -1,21 +1,8 @@
 CDP visual audit
-2026-08-30T14:39:15.774Z
+2026-08-30T16:20:46.243Z
 viewport 1440x900, tolerance 1px, theme light
 
-=== [1440x900] /preview/demo  (vs demo.html)  —  173 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ WORKSPACE"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1440x900] /preview/demo  (vs demo.html)  —  169 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -486,12 +473,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
     font-size:  inherit  →  16px
     line-height:  inherit  →  1.5
 
+body > main > div > section:nth-of-type(1) > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING WORKSPACE"
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
+
 body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span  "/"
     color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(2)  [title-row]
-    align-items:  center  →  flex-end
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1  "Build your image pipeline."
     max-width:  700px  →  —
     line-height:  1  →  0.9
@@ -1057,11 +1044,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button  [reset
 body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg  [lucide lucide-icon lucide-rotate-ccw]
     line-height:  inherit  →  1.5
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(3)  [section-label]
     row-gap:  —  →  16px
     column-gap:  —  →  16px
@@ -1119,20 +1101,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [1440x900] /preview/list-tools  (vs list-tools.html)  —  126 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ CATALOG"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1440x900] /preview/list-tools  (vs list-tools.html)  —  123 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1217,6 +1186,7 @@ body > main > div > div:nth-of-type(1)  [catalog-head]
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div  [eyebrow]  "EASY-PNG-TOOLS / CATALOG"
     margin-bottom:  18px  →  0.5rem
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
     letter-spacing:  0.12em  →  0.18em
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1  "Tool catalog"
@@ -1801,20 +1771,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [1440x900] /preview/tools/linear-gradient-png  (vs gradient.html)  —  92 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ GRADIENT"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1440x900] /preview/tools/linear-gradient-png  (vs gradient.html)  —  89 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1892,7 +1849,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2467,20 +2424,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [1440x900] /preview/tools/remove-background-png  (vs background-remover.html)  —  100 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ BACKGROUND REMOVER"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1440x900] /preview/tools/remove-background-png  (vs background-remover.html)  —  97 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -2558,7 +2502,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2713,7 +2657,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
 
 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2)  [color-reference]  "sampled from image background"
     display:  flex  →  —
-    justify-content:  space-between  →  —
+    justify-content:  flex-start  →  —
     row-gap:  8px  →  —
     column-gap:  8px  →  —
     margin-top:  10px  →  —
diff --git a/web/audit/cdp-audit-1920x1080.txt b/web/audit/cdp-audit-1920x1080.txt
index 17c2b7d..b74b8c7 100644
--- a/web/audit/cdp-audit-1920x1080.txt
+++ b/web/audit/cdp-audit-1920x1080.txt
@@ -1,21 +1,8 @@
 CDP visual audit
-2026-08-30T14:39:15.772Z
+2026-08-30T16:20:46.240Z
 viewport 1920x1080, tolerance 1px, theme light
 
-=== [1920x1080] /preview/demo  (vs demo.html)  —  173 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ WORKSPACE"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1920x1080] /preview/demo  (vs demo.html)  —  169 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -486,12 +473,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
     font-size:  inherit  →  16px
     line-height:  inherit  →  1.5
 
+body > main > div > section:nth-of-type(1) > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING WORKSPACE"
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
+
 body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span  "/"
     color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(2)  [title-row]
-    align-items:  center  →  flex-end
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1  "Build your image pipeline."
     max-width:  700px  →  —
     line-height:  1  →  0.9
@@ -1057,11 +1044,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button  [reset
 body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg  [lucide lucide-icon lucide-rotate-ccw]
     line-height:  inherit  →  1.5
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(3)  [section-label]
     row-gap:  —  →  16px
     column-gap:  —  →  16px
@@ -1119,20 +1101,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [1920x1080] /preview/list-tools  (vs list-tools.html)  —  126 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ CATALOG"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1920x1080] /preview/list-tools  (vs list-tools.html)  —  123 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1217,6 +1186,7 @@ body > main > div > div:nth-of-type(1)  [catalog-head]
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div  [eyebrow]  "EASY-PNG-TOOLS / CATALOG"
     margin-bottom:  18px  →  0.5rem
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
     letter-spacing:  0.12em  →  0.18em
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1  "Tool catalog"
@@ -1801,20 +1771,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [1920x1080] /preview/tools/linear-gradient-png  (vs gradient.html)  —  92 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ GRADIENT"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1920x1080] /preview/tools/linear-gradient-png  (vs gradient.html)  —  89 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1892,7 +1849,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2467,20 +2424,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [1920x1080] /preview/tools/remove-background-png  (vs background-remover.html)  —  100 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ BACKGROUND REMOVER"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1920x1080] /preview/tools/remove-background-png  (vs background-remover.html)  —  97 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -2558,7 +2502,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2713,7 +2657,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
 
 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2)  [color-reference]  "sampled from image background"
     display:  flex  →  —
-    justify-content:  space-between  →  —
+    justify-content:  flex-start  →  —
     row-gap:  8px  →  —
     column-gap:  8px  →  —
     margin-top:  10px  →  —
diff --git a/web/audit/cdp-audit-2560x1440.txt b/web/audit/cdp-audit-2560x1440.txt
index 34542a1..42a04ef 100644
--- a/web/audit/cdp-audit-2560x1440.txt
+++ b/web/audit/cdp-audit-2560x1440.txt
@@ -1,21 +1,8 @@
 CDP visual audit
-2026-08-30T14:39:15.766Z
+2026-08-30T16:20:46.232Z
 viewport 2560x1440, tolerance 1px, theme light
 
-=== [2560x1440] /preview/demo  (vs demo.html)  —  173 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ WORKSPACE"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [2560x1440] /preview/demo  (vs demo.html)  —  169 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -486,12 +473,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
     font-size:  inherit  →  16px
     line-height:  inherit  →  1.5
 
+body > main > div > section:nth-of-type(1) > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING WORKSPACE"
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
+
 body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span  "/"
     color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(2)  [title-row]
-    align-items:  center  →  flex-end
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1  "Build your image pipeline."
     max-width:  700px  →  —
     line-height:  1  →  0.9
@@ -1057,11 +1044,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button  [reset
 body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg  [lucide lucide-icon lucide-rotate-ccw]
     line-height:  inherit  →  1.5
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(3)  [section-label]
     row-gap:  —  →  16px
     column-gap:  —  →  16px
@@ -1119,20 +1101,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [2560x1440] /preview/list-tools  (vs list-tools.html)  —  126 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ CATALOG"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [2560x1440] /preview/list-tools  (vs list-tools.html)  —  123 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1217,6 +1186,7 @@ body > main > div > div:nth-of-type(1)  [catalog-head]
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div  [eyebrow]  "EASY-PNG-TOOLS / CATALOG"
     margin-bottom:  18px  →  0.5rem
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
     letter-spacing:  0.12em  →  0.18em
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1  "Tool catalog"
@@ -1801,20 +1771,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [2560x1440] /preview/tools/linear-gradient-png  (vs gradient.html)  —  92 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ GRADIENT"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [2560x1440] /preview/tools/linear-gradient-png  (vs gradient.html)  —  89 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1892,7 +1849,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2467,20 +2424,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [2560x1440] /preview/tools/remove-background-png  (vs background-remover.html)  —  100 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ BACKGROUND REMOVER"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [2560x1440] /preview/tools/remove-background-png  (vs background-remover.html)  —  97 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -2558,7 +2502,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2713,7 +2657,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
 
 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2)  [color-reference]  "sampled from image background"
     display:  flex  →  —
-    justify-content:  space-between  →  —
+    justify-content:  flex-start  →  —
     row-gap:  8px  →  —
     column-gap:  8px  →  —
     margin-top:  10px  →  —
diff --git a/web/audit/cdp-audit-390x844.txt b/web/audit/cdp-audit-390x844.txt
index 6ea3f82..bad1c94 100644
--- a/web/audit/cdp-audit-390x844.txt
+++ b/web/audit/cdp-audit-390x844.txt
@@ -1,26 +1,19 @@
 CDP visual audit
-2026-08-30T14:39:15.778Z
+2026-08-30T16:20:46.248Z
 viewport 390x844, tolerance 1px, theme light
 
-=== [390x844] /preview/demo  (vs demo.html)  —  174 differences ===
+=== [390x844] /preview/demo  (vs demo.html)  —  172 differences ===
 
 body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
     h:  120  →  64  (-56px)
 
 body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
     w:  30  →  14.6  (-15.4px)
 
-body > main > header > a > span:nth-of-type(3)  [version]  "/ WORKSPACE"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
 body > main > header > div > span > i  [status-dot]
     display:  —  →  inline-block
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+    w:  0  →  4.7  (+4.7px)
+    h:  0  →  6  (+6px)
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -492,12 +485,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
     font-size:  inherit  →  16px
     line-height:  inherit  →  1.5
 
+body > main > div > section:nth-of-type(1) > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING WORKSPACE"
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
+
 body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span  "/"
     color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(2)  [title-row]
-    align-items:  center  →  flex-end
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1  "Build your image pipeline."
     max-width:  700px  →  —
     line-height:  1  →  0.9
@@ -1063,11 +1056,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button  [reset
 body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg  [lucide lucide-icon lucide-rotate-ccw]
     line-height:  inherit  →  1.5
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(3)  [section-label]
     row-gap:  —  →  16px
     column-gap:  —  →  16px
@@ -1125,25 +1113,18 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [390x844] /preview/list-tools  (vs list-tools.html)  —  155 differences ===
+=== [390x844] /preview/list-tools  (vs list-tools.html)  —  154 differences ===
 
 body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
     h:  120  →  64  (-56px)
 
 body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
     w:  30  →  14.6  (-15.4px)
 
-body > main > header > a > span:nth-of-type(3)  [version]  "/ CATALOG"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
 body > main > header > div > span > i  [status-dot]
     display:  —  →  inline-block
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+    w:  0  →  3.3  (+3.3px)
+    h:  0  →  6  (+6px)
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1228,6 +1209,7 @@ body > main > div > div:nth-of-type(1)  [catalog-head]
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div  [eyebrow]  "EASY-PNG-TOOLS / CATALOG"
     margin-bottom:  18px  →  0.5rem
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
     letter-spacing:  0.12em  →  0.18em
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1  "Tool catalog"
@@ -1896,25 +1878,18 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [390x844] /preview/tools/linear-gradient-png  (vs gradient.html)  —  93 differences ===
+=== [390x844] /preview/tools/linear-gradient-png  (vs gradient.html)  —  92 differences ===
 
 body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
     h:  120  →  64  (-56px)
 
 body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
     w:  30  →  14.6  (-15.4px)
 
-body > main > header > a > span:nth-of-type(3)  [version]  "/ GRADIENT"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
 body > main > header > div > span > i  [status-dot]
     display:  —  →  inline-block
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+    w:  0  →  4.7  (+4.7px)
+    h:  0  →  6  (+6px)
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1992,7 +1967,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2566,25 +2541,18 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [390x844] /preview/tools/remove-background-png  (vs background-remover.html)  —  101 differences ===
+=== [390x844] /preview/tools/remove-background-png  (vs background-remover.html)  —  100 differences ===
 
 body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
     h:  120  →  64  (-56px)
 
 body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
     w:  30  →  14.6  (-15.4px)
 
-body > main > header > a > span:nth-of-type(3)  [version]  "/ BACKGROUND REMOVER"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
 body > main > header > div > span > i  [status-dot]
     display:  —  →  inline-block
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+    w:  0  →  4.8  (+4.8px)
+    h:  0  →  6  (+6px)
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -2662,7 +2630,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2816,7 +2784,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
 
 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2)  [color-reference]  "sampled from image background"
     display:  flex  →  —
-    justify-content:  space-between  →  —
+    justify-content:  flex-start  →  —
     row-gap:  8px  →  —
     column-gap:  8px  →  —
     margin-top:  10px  →  —
diff --git a/web/audit/cdp-audit-768x1024.txt b/web/audit/cdp-audit-768x1024.txt
index 6fe3090..adbc6ca 100644
--- a/web/audit/cdp-audit-768x1024.txt
+++ b/web/audit/cdp-audit-768x1024.txt
@@ -1,26 +1,19 @@
 CDP visual audit
-2026-08-30T14:39:15.776Z
+2026-08-30T16:20:46.245Z
 viewport 768x1024, tolerance 1px, theme light
 
-=== [768x1024] /preview/demo  (vs demo.html)  —  174 differences ===
+=== [768x1024] /preview/demo  (vs demo.html)  —  172 differences ===
 
 body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
     h:  79  →  64  (-15px)
 
 body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
     w:  30  →  14.6  (-15.4px)
 
-body > main > header > a > span:nth-of-type(3)  [version]  "/ WORKSPACE"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
 body > main > header > div > span > i  [status-dot]
     display:  —  →  inline-block
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+    w:  0  →  4.7  (+4.7px)
+    h:  0  →  6  (+6px)
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -492,12 +485,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
     font-size:  inherit  →  16px
     line-height:  inherit  →  1.5
 
+body > main > div > section:nth-of-type(1) > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING WORKSPACE"
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
+
 body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span  "/"
     color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(2)  [title-row]
-    align-items:  center  →  flex-end
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1  "Build your image pipeline."
     max-width:  700px  →  —
     line-height:  1  →  0.9
@@ -1063,11 +1056,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button  [reset
 body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg  [lucide lucide-icon lucide-rotate-ccw]
     line-height:  inherit  →  1.5
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(3)  [section-label]
     row-gap:  —  →  16px
     column-gap:  —  →  16px
@@ -1125,25 +1113,18 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [768x1024] /preview/list-tools  (vs list-tools.html)  —  155 differences ===
+=== [768x1024] /preview/list-tools  (vs list-tools.html)  —  154 differences ===
 
 body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
     h:  79  →  64  (-15px)
 
 body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
-    w:  30  →  15  (-15px)
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ CATALOG"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
+    w:  30  →  15.4  (-14.6px)
 
 body > main > header > div > span > i  [status-dot]
     display:  —  →  inline-block
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+    w:  0  →  3.3  (+3.3px)
+    h:  0  →  6  (+6px)
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1228,6 +1209,7 @@ body > main > div > div:nth-of-type(1)  [catalog-head]
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div  [eyebrow]  "EASY-PNG-TOOLS / CATALOG"
     margin-bottom:  18px  →  0.5rem
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
     letter-spacing:  0.12em  →  0.18em
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1  "Tool catalog"
@@ -1896,25 +1878,18 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [768x1024] /preview/tools/linear-gradient-png  (vs gradient.html)  —  93 differences ===
+=== [768x1024] /preview/tools/linear-gradient-png  (vs gradient.html)  —  92 differences ===
 
 body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
     h:  79  →  64  (-15px)
 
 body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
     w:  30  →  14.6  (-15.4px)
 
-body > main > header > a > span:nth-of-type(3)  [version]  "/ GRADIENT"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
 body > main > header > div > span > i  [status-dot]
     display:  —  →  inline-block
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+    w:  0  →  4.7  (+4.7px)
+    h:  0  →  6  (+6px)
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1992,7 +1967,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2566,25 +2541,18 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [768x1024] /preview/tools/remove-background-png  (vs background-remover.html)  —  101 differences ===
+=== [768x1024] /preview/tools/remove-background-png  (vs background-remover.html)  —  100 differences ===
 
 body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
     h:  79  →  64  (-15px)
 
 body > main > header > a > span:nth-of-type(1)  [brand-mark]  "EP"
     w:  30  →  14.6  (-15.4px)
 
-body > main > header > a > span:nth-of-type(3)  [version]  "/ BACKGROUND REMOVER"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
 body > main > header > div > span > i  [status-dot]
     display:  —  →  inline-block
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+    w:  0  →  4.8  (+4.8px)
+    h:  0  →  6  (+6px)
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -2662,7 +2630,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2816,7 +2784,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
 
 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2)  [color-reference]  "sampled from image background"
     display:  flex  →  —
-    justify-content:  space-between  →  —
+    justify-content:  flex-start  →  —
     row-gap:  8px  →  —
     column-gap:  8px  →  —
     margin-top:  10px  →  —
diff --git a/web/audit/cdp-audit.txt b/web/audit/cdp-audit.txt
index 87ed10a..aa505cd 100644
--- a/web/audit/cdp-audit.txt
+++ b/web/audit/cdp-audit.txt
@@ -1,21 +1,8 @@
 CDP visual audit
-2026-08-30T09:31:56.937Z
+2026-08-30T16:17:42.059Z
 viewport 1440x900, tolerance 1px, theme light
 
-=== [1440x900] /preview/demo  (vs demo.html)  —  173 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ WORKSPACE"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1440x900] /preview/demo  (vs demo.html)  —  169 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -486,12 +473,12 @@ body > main > div > section:nth-of-type(2) > div:nth-of-type(1) > div:nth-of-typ
     font-size:  inherit  →  16px
     line-height:  inherit  →  1.5
 
+body > main > div > section:nth-of-type(1) > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING WORKSPACE"
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
+
 body > main > div > section:nth-of-type(1) > div:nth-of-type(1) > span  "/"
     color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(2)  [title-row]
-    align-items:  center  →  flex-end
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(1) > h1  "Build your image pipeline."
     max-width:  700px  →  —
     line-height:  1  →  0.9
@@ -1057,11 +1044,6 @@ body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button  [reset
 body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > button > svg  [lucide lucide-icon lucide-rotate-ccw]
     line-height:  inherit  →  1.5
 
-body > main > div > section:nth-of-type(1) > div:nth-of-type(5) > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
-
 body > main > div > section:nth-of-type(1) > div:nth-of-type(3)  [section-label]
     row-gap:  —  →  16px
     column-gap:  —  →  16px
@@ -1119,20 +1101,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [1440x900] /preview/list-tools  (vs list-tools.html)  —  126 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ CATALOG"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1440x900] /preview/list-tools  (vs list-tools.html)  —  123 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1217,6 +1186,7 @@ body > main > div > div:nth-of-type(1)  [catalog-head]
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > div  [eyebrow]  "EASY-PNG-TOOLS / CATALOG"
     margin-bottom:  18px  →  0.5rem
+    color:  #1769d2 [var(--blue)]  →  #6d7883 [var(--muted)]
     letter-spacing:  0.12em  →  0.18em
 
 body > main > div > div:nth-of-type(1) > div:nth-of-type(1) > h1  "Tool catalog"
@@ -1801,20 +1771,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [1440x900] /preview/tools/linear-gradient-png  (vs gradient.html)  —  92 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ GRADIENT"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1440x900] /preview/tools/linear-gradient-png  (vs gradient.html)  —  89 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -1892,7 +1849,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2467,20 +2424,7 @@ body >div
     ✗ present in reference, absent in project
 
 
-=== [1440x900] /preview/tools/remove-background-png  (vs background-remover.html)  —  100 differences ===
-
-body > main > header  [topbar]
-    position:  —  →  sticky
-    top:  —  →  0px
-    z-index:  —  →  20
-
-body > main > header > a > span:nth-of-type(3)  [version]  "/ BACKGROUND REMOVER"
-    color:  #6d7883 [var(--muted)]  →  #1769d2 [var(--blue)]
-
-body > main > header > div > span > i  [status-dot]
-    width:  6px  →  8px
-    height:  6px  →  8px
-    box-shadow:  —  →  0 0 0 2px color-mix(in srgb, #25a96a 25%, transparent) [0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent)]
+=== [1440x900] /preview/tools/remove-background-png  (vs background-remover.html)  —  97 differences ===
 
 body > main > header > div > button:nth-of-type(1)  [icon-btn icon-btn--bare]
     display:  grid  →  inline-flex
@@ -2558,7 +2502,7 @@ body > main > div  [tool-page]
 
 body > main > div > div:nth-of-type(1)  [eyebrow]  "PNG PROCESSING SINGLE TOOL"
     margin-bottom:  18px  →  —
-    color:  #6d7883 [var(--muted)]  →  #17212b [var(--foreground)]
+    color:  #1769d2 [var(--blue)]  →  #17212b [var(--foreground)]
     font-family:  —  →  "IBM Plex Sans", sans-serif [var(--font-sans)]
     font-size:  —  →  16px
     line-height:  —  →  1.5
@@ -2713,7 +2657,7 @@ body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-typ
 
 body > main > div > div:nth-of-type(3) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2)  [color-reference]  "sampled from image background"
     display:  flex  →  —
-    justify-content:  space-between  →  —
+    justify-content:  flex-start  →  —
     row-gap:  8px  →  —
     column-gap:  8px  →  —
     margin-top:  10px  →  —
diff --git a/web/scripts/audit-cdp.mjs b/web/scripts/audit-cdp.mjs
index 1f51392..945063d 100644
--- a/web/scripts/audit-cdp.mjs
+++ b/web/scripts/audit-cdp.mjs
@@ -284,17 +284,24 @@ async function capture(browser, target, viewport) {
 						} else {
 							i++;
 							const name = readName();
-							if (comp[i] === "(") {
-								const inner = comp.slice(i + 1, endParen());
-								if (name !== "where") {
-									for (const arg of splitTop(inner, ",")) {
-										const [a, b, c] = specCompound(arg);
-										A += a;
-										B += b;
-										C += c;
-									}
+if (comp[i] === "(") {
+							const inner = comp.slice(i + 1, endParen());
+							// :is/:not/:has take the most specific argument.
+							if (name !== "where") {
+								let a = 0,
+									b = 0,
+									c = 0;
+								for (const arg of splitTop(inner, ",")) {
+									const [aa, bb, cc] = specCompound(arg);
+									a = Math.max(a, aa);
+									b = Math.max(b, bb);
+									c = Math.max(c, cc);
 								}
-							} else B++;
+								A += a;
+								B += b;
+								C += c;
+							}
+						} else B++;
 						}
 					} else if (/[a-zA-Z]/.test(ch)) {
 						C++;
@@ -311,28 +318,33 @@ async function capture(browser, target, viewport) {
 			for (const { rule, order } of rules) {
 				const sel = rule.selectorText;
 				if (!sel) continue;
-				let ok = false;
-				try {
-					ok = el.matches(sel.replace(STATE, ""));
-				} catch {
+				// Specificity is per complex selector: a comma list like
+				// ".a, .b .c" does NOT sum. Match each complex selector on its
+				// own and use its specificity; ties are broken by source order.
+				for (const cs of splitTop(sel.replace(STATE, ""), ",")) {
+					let ok = false;
 					try {
-						ok = el.matches(sel);
-					} catch {}
-				}
-				if (!ok) continue;
-				const [a, b, c] = specCompound(sel);
-				const st = rule.style;
-				for (let k = 0; k < st.length; k++) {
-					const name = st.item(k);
-					out.push({
-						name,
-						value: st.getPropertyValue(name).trim(),
-						important: st.getPropertyPriority(name) === "important",
-						a,
-						b,
-						c,
-						order,
-					});
+						ok = el.matches(cs);
+					} catch {
+						try {
+							ok = el.matches(sel);
+						} catch {}
+					}
+					if (!ok) continue;
+					const [a, b, c] = specCompound(cs);
+					const st = rule.style;
+					for (let k = 0; k < st.length; k++) {
+						const name = st.item(k);
+						out.push({
+							name,
+							value: st.getPropertyValue(name).trim(),
+							important: st.getPropertyPriority(name) === "important",
+							a,
+							b,
+							c,
+							order,
+						});
+					}
 				}
 			}
 			const inline = el.getAttribute("style");