Color the command palette by section accent; vibrant dividers

Each command section now reads in its own category accent (--spread-accent)
across the palette: the kicker, the skill name (big title + active list
item), and the divider all take it, while the slash before /impeccable
drops to the muted namespace ink. The per-section divider accents are also
made vibrant — refine/simplify/harden were muddy kinpaku-pale/-deep/oxide;
now create/refine/simplify = kinpaku gold, evaluate/harden = patina
verdigris, system = neutral, matching the established category color
grouping. Light mode re-applies the accents over the shared eyebrow :is()
rule; dark mode picks them up from the base rules.

Also includes light-mode readability fixes for the live-demo G-bar (brand
mark, active tool chip, control chips, pin-note text/caret) and a
specificity fix so the hotel-hero demo text stays light on its photo.

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

site/styles/home-kinpaku.css

@@ -964,13 +964,31 @@
   color: var(--ks-lacquer-deep);
 }
 
+/* Divider accent follows the section's category identity (the same gold/teal
+   grouping the category labels use) and stays vibrant — no muddy kinpaku-pale/
+   -deep or undefined oxide. The brand's decorative accents are exactly two:
+   kinpaku gold (create/refine/simplify) and patina verdigris (evaluate/harden);
+   system stays neutral as the meta category. */
 .home-kinpaku .magazine-spread[data-category="create"] { --spread-accent: var(--ks-kinpaku); }
 .home-kinpaku .magazine-spread[data-category="evaluate"] { --spread-accent: var(--ks-patina); }
-.home-kinpaku .magazine-spread[data-category="refine"] { --spread-accent: var(--ks-kinpaku-pale); }
-.home-kinpaku .magazine-spread[data-category="simplify"] { --spread-accent: var(--ks-kinpaku-deep); }
-.home-kinpaku .magazine-spread[data-category="harden"] { --spread-accent: var(--ks-oxide); }
+.home-kinpaku .magazine-spread[data-category="refine"] { --spread-accent: var(--ks-kinpaku); }
+.home-kinpaku .magazine-spread[data-category="simplify"] { --spread-accent: var(--ks-kinpaku); }
+.home-kinpaku .magazine-spread[data-category="harden"] { --spread-accent: var(--ks-patina); }
 .home-kinpaku .magazine-spread[data-category="system"] { --spread-accent: var(--ks-muted); }
 
+/* In the command palette the section accent (--spread-accent) carries the whole
+   category identity: the kicker, the skill name (big title + active list item),
+   and the divider. The slash before /impeccable is demoted to the namespace's
+   muted ink — it's punctuation, not identity. (Light mode re-applies these accent
+   colors in light-mode.css to clear that file's :is() eyebrow rule.) */
+.home-kinpaku .magazine-container :is(.spread-command-name, .spread-category-label, .fisheye-item.is-active) {
+  color: var(--spread-accent);
+}
+
+.home-kinpaku .magazine-container .spread-command-name .spread-slash {
+  color: var(--color-ash);
+}
+
 /* Card-swap to G pattern: the OUTER spread carries the single tinted-plinth
    surface (flat oklch(0.17 0 0), no border, no shadow). All inner demo
    surfaces sit transparently on top — no plinth-in-plinth, no nested rings. */

site/styles/home-rebuild.css

@@ -1206,7 +1206,12 @@
   gap: 6px;
   padding: 22px 24px;
 }
-.hotel-hero-eyebrow {
+/* The hotel hero text sits on dark teal/gold photos, so it stays light in both
+   themes. These carry an extra .hotel-hero class purely for specificity: the
+   global `.home-kinpaku h2`/`p` color rules (0,1,1) otherwise win and, in light
+   mode, drag the headline to the dark --ks-champagne ink — illegible on the
+   photo. The slop variant's own dark overrides still win on source order. */
+.hotel-hero .hotel-hero-eyebrow {
   margin: 0;
   font-family: var(--h-sans);
   font-size: 10px;
@@ -1214,7 +1219,7 @@
   text-transform: uppercase;
   color: oklch(91% 0.05 85);
 }
-.hotel-hero-title {
+.hotel-hero .hotel-hero-title {
   margin: 0;
   font-family: var(--h-serif);
   font-weight: 500;
@@ -1223,7 +1228,7 @@
   letter-spacing: -0.01em;
   color: oklch(98% 0.01 85);
 }
-.hotel-hero-sub {
+.hotel-hero .hotel-hero-sub {
   margin: 0;
   font-family: var(--h-sans);
   font-size: 12px;

site/styles/light-mode.css

@@ -234,24 +234,17 @@ html.light :is(
   color: var(--ks-kinpaku-ink);
 }
 
-/* Command palette (magazine spread). The command NAME — big title + active
-   list item — is the brand gold; on the near-white card (.magazine-container,
-   not warm paper) pristine kinpaku reads fine, so override the muddier
-   kinpaku-ink the shared eyebrow rule above assigns. The category kicker is
-   handled separately below (it takes the section accent, not flat gold).
-   Scoped under .magazine-container so it only touches the palette and clears
-   the eyebrow rule's :is() specificity (inflated to 4 classes by its
-   .fisheye-item.is-active arg). Other eyebrows keep kinpaku-ink for paper. */
+/* Command palette (magazine spread). The kicker, skill name (big title + active
+   list item) all read in the section accent (--spread-accent) — gold for
+   create/refine/simplify, verdigris for evaluate/harden, neutral for system —
+   matching the divider. On the near-white card these read fine. This clears the
+   muddier kinpaku-ink the shared eyebrow :is() rule above assigns; scoped under
+   .magazine-container so its specificity ties/beats that rule (and only touches
+   the palette). Other eyebrows keep kinpaku-ink for paper. Dark mode gets the
+   same accent colors via home-kinpaku.css. */
 html.light .home-kinpaku .magazine-container .spread-command-name,
+html.light .home-kinpaku .magazine-container .spread-category-label,
 html.light .home-kinpaku .magazine-container .fisheye-item.is-active {
-  color: var(--ks-kinpaku);
-}
-
-/* The category kicker takes the section's own accent (--spread-accent), like
-   the slash and the divider, so each section reads in its identity color
-   (gold for create/refine/simplify, verdigris for evaluate/harden, neutral for
-   system) rather than a flat gold. Dark mode gets the same via home-kinpaku.css. */
-html.light .home-kinpaku .magazine-container .spread-category-label {
   color: var(--spread-accent);
 }
 
@@ -1095,6 +1088,13 @@ html.light .hero-live-demo .live-demo-pin-note {
   background: var(--ks-lacquer-raised);
   border-color: var(--ks-rule);
   box-shadow: 0 8px 22px oklch(25% 0.02 95 / 0.10);
+  /* The base note text is near-white for the dark bar; on the pale bubble it
+     has to flip to ink or the comment is invisible. */
+  color: var(--ks-text);
+}
+
+html.light .hero-live-demo .live-demo-pin-caret {
+  background: var(--ks-kinpaku-ink);
 }
 
 html.light .hero-live-demo .live-demo-annot-clear {
@@ -1257,15 +1257,21 @@ html.light .live-mode-kinpaku .live-demo-ctx {
   box-shadow: 0 16px 36px -12px oklch(25% 0.02 95 / 0.14);
 }
 
+/* Standalone brand mark (no wordmark) reads as the header logo does in light
+   mode — crisp near-black ink, not the muddy mid-gold that --ks-kinpaku-ink
+   washes to on a pale bar. */
 html.light .home-kinpaku .live-demo-gbar-brand,
 html.light .live-mode-kinpaku .live-demo-gbar-brand {
-  color: var(--ks-kinpaku-ink);
+  color: var(--ks-champagne);
 }
 
+/* Active tool: a solid kinpaku chip with dark ink, matching the gold Go button.
+   The dark-mode active is a graphite chip + gold text; on a pale bar that chip
+   reads as a heavy black smudge, so the light analog flips to gold fill. */
 html.light .home-kinpaku .live-demo-gbar-btn.is-active,
 html.light .live-mode-kinpaku .live-demo-gbar-btn.is-active {
-  background: oklch(22% 0.02 95);
-  color: var(--ks-kinpaku-pale);
+  background: var(--ks-kinpaku);
+  color: oklch(14% 0.018 95);
 }
 
 html.light .home-kinpaku .live-demo-gbar-btn.is-active svg,
@@ -1277,8 +1283,8 @@ html.light .live-mode-kinpaku .live-demo-gbar-btn.is-active .live-demo-gbar-btn-
 
 html.light .home-kinpaku .live-demo-gbar-chat,
 html.light .live-mode-kinpaku .live-demo-gbar-chat {
-  background: oklch(88% 0.014 95);
-  border-color: var(--ks-rule);
+  background: oklch(97.5% 0.004 95);
+  border-color: oklch(25% 0.02 95 / 0.14);
 }
 
 html.light .home-kinpaku .live-demo-gbar-chat.is-expanded,
@@ -1291,14 +1297,18 @@ html.light .live-mode-kinpaku .live-demo-gbar-chat-input {
   color: var(--ks-text);
 }
 
+/* Control chips (adapt pill, refine input, ×3 count). The old 88%/0.014 fill
+   was an 11%-darker olive-cast block that read as heavy and unrefined on the
+   white bar. A barely-there warm off-white recess with a crisp hairline reads
+   as polished product chrome — the border does the separating, not a gray slab. */
 html.light .home-kinpaku .live-demo-ctx-pill,
 html.light .home-kinpaku .live-demo-ctx-input,
 html.light .home-kinpaku .live-demo-ctx-count,
 html.light .live-mode-kinpaku .live-demo-ctx-pill,
 html.light .live-mode-kinpaku .live-demo-ctx-input,
 html.light .live-mode-kinpaku .live-demo-ctx-count {
-  background: oklch(88% 0.014 95);
-  border-color: var(--ks-rule);
+  background: oklch(97.5% 0.004 95);
+  border-color: oklch(25% 0.02 95 / 0.14);
   color: var(--ks-text);
 }