chore(release): redesign UI tokens and publish styles 0.8.26, ui 0.8.86

Visual-only redesign ("instrument panel"): cool graphite neutrals for light
and dark, layered hairline elevation, larger radii, a mono token for
eyebrows/data, keycap-style solid and secondary buttons, recessed input
wells and tab tracks, a stronger dialog, and a theme-driven focus outline.
No props, outputs or behaviour change.

Also records the already-published csr 0.8.42, styles 0.8.25 and ui 0.8.85
changes (optional chaining/nullish in the reactive runtime, shared
theme/accent cookie sync, BackToTop hidden attribute).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

packages/ui/components/button.wrn

@@ -205,9 +205,10 @@ label: string = "Button"
       font-size: 0.875rem;
       font-weight: 600;
       line-height: 1;
+      letter-spacing: -0.006em;
       border: 1px solid transparent;
       border-radius: var(--wrn-radius-sm);
-      padding: 0 0.75rem;
+      padding: 0 0.875rem;
       cursor: pointer;
       text-decoration: none;
       min-height: var(--wrn-control-height, 2.5rem);
@@ -219,10 +220,10 @@ label: string = "Button"
         transform var(--wrn-motion-base) var(--wrn-ease-emphasized);
     }
     .wrn-btn:active {
-      transform: scale(0.98);
+      transform: translateY(1px);
     }
     .wrn-btn:focus-visible {
-      outline: 2px solid var(--wrn-color-primary);
+      outline: 2px solid color-mix(in srgb, var(--wrn-btn-color) 80%, transparent);
       outline-offset: 2px;
     }
     .wrn-btn--color-primary {
@@ -254,23 +255,48 @@ label: string = "Button"
     .wrn-btn--default,
     .wrn-btn--solid,
     .wrn-btn--primary {
+      /* Keycap: a lit top edge and a weighted bottom border give solid actions
+         a physical press; :active drops the key 1px and flattens the edge. */
       color: var(--wrn-btn-contrast);
-      background: var(--wrn-btn-color);
-      box-shadow: var(--wrn-shadow-sm);
+      background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--wrn-btn-color) 92%, white),
+        var(--wrn-btn-color)
+      );
+      border-color: color-mix(in srgb, var(--wrn-btn-color) 82%, black);
+      border-bottom-color: color-mix(in srgb, var(--wrn-btn-color) 64%, black);
+      box-shadow:
+        var(--wrn-highlight-edge, inset 0 1px 0 rgb(255 255 255 / 0.2)),
+        0 1px 2px color-mix(in srgb, var(--wrn-btn-color) 30%, transparent);
     }
     .wrn-btn--variant-default:hover,
     .wrn-btn--variant-solid:hover,
     .wrn-btn--default:hover,
     .wrn-btn--solid:hover,
     .wrn-btn--primary:hover {
-      background: color-mix(in srgb, var(--wrn-btn-color) 84%, black);
-      box-shadow: var(--wrn-shadow-sm);
+      background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--wrn-btn-color) 94%, white),
+        color-mix(in srgb, var(--wrn-btn-color) 88%, black)
+      );
+      box-shadow:
+        var(--wrn-highlight-edge, inset 0 1px 0 rgb(255 255 255 / 0.2)),
+        0 2px 6px -1px color-mix(in srgb, var(--wrn-btn-color) 38%, transparent);
+    }
+    .wrn-btn--variant-default:active,
+    .wrn-btn--variant-solid:active,
+    .wrn-btn--default:active,
+    .wrn-btn--solid:active,
+    .wrn-btn--primary:active {
+      background: color-mix(in srgb, var(--wrn-btn-color) 86%, black);
+      box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.18);
     }
     .wrn-btn--variant-outline,
     .wrn-btn--outline {
       color: var(--wrn-btn-color);
-      background: transparent;
-      border-color: color-mix(in srgb, var(--wrn-btn-color) 55%, var(--wrn-color-border));
+      background: var(--wrn-color-surface);
+      border-color: color-mix(in srgb, var(--wrn-btn-color) 40%, var(--wrn-color-border));
+      box-shadow: var(--wrn-shadow-1);
     }
     .wrn-btn--variant-outline:hover,
     .wrn-btn--outline:hover {
@@ -304,9 +330,15 @@ label: string = "Button"
     }
     .wrn-btn--variant-secondary,
     .wrn-btn--secondary {
+      /* Neutral keycap: surface body with the same machined edge. */
       color: var(--wrn-color-text);
-      background: color-mix(in srgb, var(--wrn-btn-color) 10%, var(--wrn-color-surface));
-      border-color: color-mix(in srgb, var(--wrn-btn-color) 24%, var(--wrn-color-border));
+      background: linear-gradient(
+        180deg,
+        var(--wrn-color-surface),
+        color-mix(in srgb, var(--wrn-btn-color) 5%, var(--wrn-color-surface-soft, var(--wrn-color-surface)))
+      );
+      border-color: var(--wrn-color-border);
+      border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
       box-shadow: var(--wrn-shadow-1);
     }
     .wrn-btn--variant-secondary:hover,