docs: update refs, update script

refs-html/demo.html

@@ -7,11 +7,6 @@
 @layer properties {
   @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
   *,:before,:after,::backdrop {
-  --tw-rotate-x:initial;
-  --tw-rotate-y:initial;
-  --tw-rotate-z:initial;
-  --tw-skew-x:initial;
-  --tw-skew-y:initial;
   --tw-border-style:solid;
   --tw-font-weight:initial;
   --tw-shadow:0 0 #0000;
@@ -290,13 +285,7 @@ button,input:where([type=button],[type=reset],[type=submit]) {
 }
 @layer components;
   @layer utilities {
-  .static {
-  position:static
-}
-.inline {
-  display:inline
-}
-.inline-flex {
+  .inline-flex {
   display:inline-flex
 }
 .size-6 {
@@ -330,9 +319,6 @@ button,input:where([type=button],[type=reset],[type=submit]) {
 .shrink-0 {
   flex-shrink:0
 }
-.transform {
-  transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
-}
 .items-center {
   align-items:center
 }
@@ -630,7 +616,7 @@ button {
   --line:#33414c;
   --muted:#91a0ac;
   --blue:#54a2ff;
-  background-image:linear-gradient(#1b252d 1px,#0000 1px),linear-gradient(90deg,#1b252d 1px,#0000 1px)
+  background-image:linear-gradient(#1e2a3447 1px,#0000 1px),linear-gradient(90deg,#1e2a3447 1px,#0000 1px)
 }
 .topbar,.brand,.top-actions,.language,.status,.title-row,.pipeline-head,.step-heading,.step-tools,.pipeline-footer,.preview-top,.footer {
   align-items:center;
@@ -643,6 +629,26 @@ button {
   height:64px;
   padding:0 clamp(20px,4vw,64px)
 }
+.topbar>.brand {
+  color:var(--foreground);
+  text-decoration:none
+}
+.top-nav {
+  align-items:center;
+  gap:22px;
+  margin-left:auto;
+  margin-right:28px;
+  display:flex
+}
+.top-nav a {
+  color:var(--muted);
+  font:10px var(--font-mono);
+  white-space:nowrap;
+  text-decoration:none
+}
+.top-nav a:hover,.top-nav a.active {
+  color:var(--blue)
+}
 .brand {
   font:600 14px var(--font-mono);
   gap:10px
@@ -1103,6 +1109,9 @@ h1 {
   gap:32px
 }
 
+}
+.dark-mode .app-shell {
+  background-image:linear-gradient(#1e2a3447 1px,#0000 1px),linear-gradient(90deg,#1e2a3447 1px,#0000 1px)
 }
 .dark-mode .tile-canvas {
   background-color:#202a31;
@@ -1113,7 +1122,22 @@ h1 {
 }
 @media (max-width:800px) {
   .topbar {
-  padding:0 16px
+  flex-wrap:wrap;
+  gap:12px;
+  height:auto;
+  min-height:64px;
+  padding:12px 16px
+}
+.top-nav {
+  order:3;
+  gap:12px;
+  width:100%;
+  margin:0;
+  padding-bottom:2px;
+  overflow:auto
+}
+.top-nav a {
+  font-size:9px
 }
 .status {
   display:none
@@ -1532,9 +1556,9 @@ h1 {
 }
 .catalog-page {
   width:100%;
-  max-width:1680px;
-  margin:0 auto;
-  padding:64px clamp(24px,4vw,72px) 72px
+  max-width:none;
+  margin:0;
+  padding:60px clamp(24px,4vw,72px) 72px
 }
 .catalog-head {
   border-bottom:1px solid var(--line);
@@ -1803,26 +1827,6 @@ h1 {
   gap:12px 18px
 }
 
-}
-@property --tw-rotate-x {
-  syntax:"*";
-  inherits:false
-}
-@property --tw-rotate-y {
-  syntax:"*";
-  inherits:false
-}
-@property --tw-rotate-z {
-  syntax:"*";
-  inherits:false
-}
-@property --tw-skew-x {
-  syntax:"*";
-  inherits:false
-}
-@property --tw-skew-y {
-  syntax:"*";
-  inherits:false
 }
 @property --tw-border-style {
   syntax:"*";
@@ -1986,18 +1990,30 @@ h1 {
     </div>
     <main class="app-shell">
       <header class="topbar">
-        <div class="brand">
+        <a class="brand" href="/">
           <span class="brand-mark">EP
           </span>
           <span>easy-png-tools
           </span>
-          <span class="version">/ DEMO
+          <span class="version">/ 
+            <!-- -->WORKSPACE
           </span>
-        </div>
+        </a>
+        <nav class="top-nav" aria-label="Primary navigation">
+          <a class="" href="/">Workspace
+          </a>
+          <a class="" href="/easy-png-tools/list-tools">Catalog
+          </a>
+          <a class="" href="/easy-png-tools/gradient">Gradient
+          </a>
+          <a class="" href="/easy-png-tools/background-remover">Background remover
+          </a>
+        </nav>
         <div class="top-actions">
           <span class="status">
             <i>
-            </i> AUTO PIPELINE
+            </i>
+            <!-- -->AUTO PIPELINE
           </span>
           <button class="icon-btn" aria-label="Help">
             <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark" aria-hidden="true">
@@ -2018,7 +2034,9 @@ h1 {
           <div class="language">
             <button class="active">RU
             </button>
-            <button class="">EN
+            <span>/
+            </span>
+            <button>EN
             </button>
           </div>
         </div>