Replace muddy gold borders with pristine gold or neutral hairlines

Audit every --ks-rule-strong usage (the muddy desaturated gold). Where
the border/text sits beside pristine kinpaku or signals an active/hover/
brand state, lift it to --ks-kinpaku; where it's a large structural
frame, window chrome, or paired with neutral siblings, drop it to the
neutral --ks-rule hairline.

Lifted to --ks-kinpaku: detector focus ring + secondary action buttons,
design-system candidate caption + mini-ui "after" border, docs neon-case
secondary/hero-shot-hover, docs flow/chain arrows, homepage slop-teaser
hover + impeccable-card.
Dropped to --ks-rule: design-system comparison-stage frame, docs
neon-case-command frame, light-mode hero demo shell + split-label pill +
live-demo pin-note.

--ks-rule-strong is now unused outside its token definition.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

site/styles/design-system.css

@@ -401,7 +401,7 @@
   font-size: 0.66rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  border: 1px solid var(--ks-rule-strong);
+  border: 1px solid var(--ks-kinpaku);
   border-radius: 2px;
   pointer-events: none;
 }
@@ -1301,7 +1301,7 @@
   position: relative;
   aspect-ratio: 16 / 10;
   overflow: hidden;
-  border: 1px solid var(--ks-rule-strong);
+  border: 1px solid var(--ks-rule);
   border-radius: 2px;
   background:
     linear-gradient(180deg, oklch(8% 0.006 95), oklch(5% 0.004 95));
@@ -1366,7 +1366,7 @@
 }
 
 .ks-mini-ui-after {
-  border-color: var(--ks-rule-strong);
+  border-color: var(--ks-kinpaku);
 }
 .ks-mini-ui-after .ks-mini-rule {
   width: 64px;

site/styles/detector-lab.css

@@ -170,7 +170,7 @@
 }
 
 .detector-fixture-button:focus-visible {
-  outline: 2px solid var(--ks-rule-strong);
+  outline: 2px solid var(--ks-kinpaku);
   outline-offset: 2px;
 }
 
@@ -253,7 +253,7 @@
   justify-content: center;
   min-height: 36px;
   padding: 0 16px;
-  border: 1px solid var(--ks-rule-strong);
+  border: 1px solid var(--ks-kinpaku);
   border-radius: 2px;
   background: transparent;
   color: var(--ks-kinpaku);

site/styles/docs-kinpaku.css

@@ -540,7 +540,7 @@
   display: grid;
   place-items: center;
   width: 36px;
-  color: var(--ks-rule-strong);
+  color: var(--ks-kinpaku);
 }
 
 .docs-kinpaku .docs-flow-arrow svg {
@@ -628,7 +628,7 @@
 }
 
 .docs-kinpaku .docs-chain-arrow {
-  color: var(--ks-rule-strong);
+  color: var(--ks-kinpaku);
   font-size: 1.1em;
 }
 

site/styles/docs-visuals.css

@@ -3159,7 +3159,7 @@
 
 .neon-case-secondary {
   color: var(--ks-kinpaku);
-  border-color: var(--ks-rule-strong);
+  border-color: var(--ks-kinpaku);
 }
 
 .neon-case-primary:hover,
@@ -3188,7 +3188,7 @@
 
 .neon-case-hero-shot:hover {
   transform: translateY(-3px);
-  border-color: var(--ks-rule-strong);
+  border-color: var(--ks-kinpaku);
 }
 
 .neon-case-hero-shot img {
@@ -3323,7 +3323,7 @@
   align-items: end;
   padding: clamp(2rem, 5vw, 4rem);
   background: var(--ks-lacquer-deep);
-  border: 1px solid var(--ks-rule-strong);
+  border: 1px solid var(--ks-rule);
   border-radius: 2px;
 }
 

site/styles/home-kinpaku.css

@@ -776,7 +776,7 @@
 }
 
 .home-kinpaku .impeccable-card {
-  border: 1px solid var(--ks-rule-strong);
+  border: 1px solid var(--ks-kinpaku);
   background:
     linear-gradient(135deg, oklch(78% 0.12 82 / 0.11), transparent 42%),
     linear-gradient(180deg, oklch(14% 0.008 95 / 0.98), oklch(9% 0.006 95 / 0.98));

site/styles/home-rebuild.css

@@ -369,7 +369,7 @@
 }
 
 .home-kinpaku .slop-teaser-card:hover {
-  border-color: var(--ks-rule-strong);
+  border-color: var(--ks-kinpaku);
   transform: translateY(-2px);
 }
 

site/styles/light-mode.css

@@ -289,7 +289,7 @@ html.light .hero-rebuild-art {
 
 html.light .hero-rebuild-demo-shell {
   background: oklch(99% 0.008 95 / 0.92);
-  border-color: var(--ks-rule-strong);
+  border-color: var(--ks-rule);
 }
 
 html.light .hero-rebuild-demo-shell:hover {
@@ -946,7 +946,7 @@ html.light .home-kinpaku .terminal-preview .demo-split-comparison .split-after {
 
 html.light .home-kinpaku .hero-rebuild-right .split-label-item {
   background: oklch(99% 0.008 95 / 0.88);
-  border-color: var(--ks-rule-strong);
+  border-color: var(--ks-rule);
   color: var(--ks-champagne);
 }
 
@@ -1048,7 +1048,7 @@ html.light .live-mode-kinpaku .live-demo-frame {
 
 html.light .hero-live-demo .live-demo-pin-note {
   background: var(--ks-lacquer-raised);
-  border-color: var(--ks-rule-strong);
+  border-color: var(--ks-rule);
   box-shadow: 0 8px 22px oklch(25% 0.02 95 / 0.10);
 }