fix: clean up slot timers on unmount, fix about-grid specificity

Add useEffect cleanup to clear slot machine timers/intervals when the home route unmounts mid-animation. Fix about-grid media query specificity by including .about-panel-categories .about-grid to override the higher-specificity base rule. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
feat: tune slot machine odds to 1/25 any jackpot, 1/100 Hack jackpot
2026-08-14 17:02:11 +00:00 · 2026-04-18 16:04:53 -05:00 · 2026-04-18 16:02:25 -05:00 · 2026-04-18 15:54:14 -05:00 · 2026-04-18 20:53:19 +00:00 · 2026-04-18 20:49:49 +00:00
26 changed files with 428 additions and 1197 deletions
@@ -95,23 +95,3 @@ When working on Convex code, **always read `convex/_generated/ai/guidelines.md`

 Convex agent skills for common tasks can be installed by running `npx convex ai-files install`.
 <!-- convex-ai-end -->
-
-## Stat Field Migration Rules
-
-The `skills` table maintains two parallel sets of stat fields as part of an in-progress field migration:
-
-| Legacy (nested, `@deprecated`) | Top-level (source of truth, indexable) |
-|---|---|
-| `stats.downloads` | `statsDownloads` |
-| `stats.stars` | `statsStars` |
-| `stats.installsCurrent` | `statsInstallsCurrent` |
-| `stats.installsAllTime` | `statsInstallsAllTime` |
-
-**Rules:**
-
- **Always use `readCanonicalStat(skill, field)` (`convex/lib/skillStats.ts`) to read** any of the four migrated fields. It prefers the top-level field and falls back to the nested field for pre-migration documents. Never access `skill.stats.downloads` / `.stars` / `.installsCurrent` / `.installsAllTime` directly.
- **Always use `applySkillStatDeltas()` to write** stat deltas. It writes both the top-level and nested fields in the same patch to keep them in sync.
- **Both sets of fields must be written together** in any patch that touches stat values (see the return shape of `applySkillStatDeltas`).
- **Nested-only reads are acceptable only for** `stats.comments` and `stats.versions` — no top-level field exists for these yet.
- The four legacy nested fields are marked `@deprecated` in `statsValidator` (schema.ts). Any IDE access to `skill.stats.downloads` etc. will show a strikethrough warning — treat this as a signal to use `readCanonicalStat()` instead.
- When adding new stat fields, follow the same dual-write pattern and add a cursor-based backfill mutation (see `backfillSkillStatFieldsInternal` for an example).
@@ -5,7 +5,6 @@
 ### Changed

 - Search: add CJK tokenization support (Chinese/Japanese/Korean) with Intl.Segmenter plus fallback behavior to improve skill query matching (#1596) (thanks @pq-dong).
- Stats: centralize migrated skill stat fallback reads through `readCanonicalStat()` and add schema/agent guardrails to discourage direct legacy nested-field access (#1709) (thanks @momothemage).

 ### Fixes

@@ -10,7 +10,7 @@
  <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge" alt="MIT License"></a>
 </p>

-ClawHub is the **public skill registry for OpenClaw**: publish, version, and search text-based agent skills (a `SKILL.md` plus supporting files).
+ClawHub is the **public skill registry for Clawdbot**: publish, version, and search text-based agent skills (a `SKILL.md` plus supporting files).
 It's designed for fast browsing + a CLI-friendly API, with moderation hooks and vector search.
 It also now exposes a native **OpenClaw package catalog** for code plugins and bundle plugins.

@@ -10,34 +10,18 @@ type SkillStatDeltas = {
  installsAllTime?: number;
 };

-/**
- * Read the canonical value of a migrated stat field from a skill document.
- *
- * Top-level fields (`statsDownloads`, etc.) are the source of truth — they are
- * indexable and kept up-to-date by the event pipeline. The nested `stats.*`
- * fields are only used as a fallback for pre-migration documents where the
- * top-level field is still `undefined`.
- *
- * All code that reads a migrated stat value should go through this function
- * rather than accessing `skill.stats.*` directly.
- */
-export function readCanonicalStat(
-  skill: Doc<"skills">,
-  field: "downloads" | "stars" | "installsCurrent" | "installsAllTime",
-): number {
-  const topLevelKey = `stats${field[0].toUpperCase()}${field.slice(1)}` as
-    | "statsDownloads"
-    | "statsStars"
-    | "statsInstallsCurrent"
-    | "statsInstallsAllTime";
-  return typeof skill[topLevelKey] === "number" ? skill[topLevelKey]! : (skill.stats[field] ?? 0);
-}
-
 export function applySkillStatDeltas(skill: Doc<"skills">, deltas: SkillStatDeltas) {
-  const currentDownloads = readCanonicalStat(skill, "downloads");
-  const currentStars = readCanonicalStat(skill, "stars");
-  const currentInstallsCurrent = readCanonicalStat(skill, "installsCurrent");
-  const currentInstallsAllTime = readCanonicalStat(skill, "installsAllTime");
+  const currentDownloads =
+    typeof skill.statsDownloads === "number" ? skill.statsDownloads : skill.stats.downloads;
+  const currentStars = typeof skill.statsStars === "number" ? skill.statsStars : skill.stats.stars;
+  const currentInstallsCurrent =
+    typeof skill.statsInstallsCurrent === "number"
+      ? skill.statsInstallsCurrent
+      : (skill.stats.installsCurrent ?? 0);
+  const currentInstallsAllTime =
+    typeof skill.statsInstallsAllTime === "number"
+      ? skill.statsInstallsAllTime
+      : (skill.stats.installsAllTime ?? 0);

  const currentComments = skill.stats.comments;
  const nextDownloads = Math.max(0, currentDownloads + (deltas.downloads ?? 0));
@@ -2146,9 +2146,9 @@ export const insertReleaseInternal = internalMutation({
    const nextIsOfficial = nextChannel === "official";
    const nextOwnerPublisherId = stringifyOptionalId(args.ownerPublisherId ?? null);
    const nextOwnerUserId = stringifyId(args.ownerUserId);
-    const nextNameLabel = typeof args.name === "string" ? args.name : "<unknown>";
-    const nextRuntimeIdLabel = typeof args.runtimeId === "string" ? args.runtimeId : "<unknown>";
-    const nextVersionLabel = typeof args.version === "string" ? args.version : "<unknown>";
+    const nextName = args.name;
+    const nextRuntimeId = args.runtimeId ?? null;
+    const nextVersion = args.version;
    if (existing) {
      const existingIsLegacyPersonalPackage =
        !existing.ownerPublisherId &&
@@ -2171,7 +2171,7 @@ export const insertReleaseInternal = internalMutation({
    }
    if (existing && existing.family !== args.family) {
      throw new ConvexError(
-        `Package "${nextNameLabel}" already exists as a ${existing.family}; family changes are not allowed`,
+        `Package "${nextName}" already exists as a ${existing.family}; family changes are not allowed`,
      );
    }
    if (
@@ -2182,7 +2182,7 @@ export const insertReleaseInternal = internalMutation({
      existing.runtimeId !== args.runtimeId
    ) {
      throw new ConvexError(
-        `Package "${nextNameLabel}" already exists with plugin id "${existing.runtimeId}"; runtime id changes are not allowed`,
+        `Package "${nextName}" already exists with plugin id "${existing.runtimeId}"; runtime id changes are not allowed`,
      );
    }
    if (args.family === "code-plugin" && args.runtimeId) {
@@ -2191,7 +2191,7 @@ export const insertReleaseInternal = internalMutation({
        .withIndex("by_runtime_id", (q) => q.eq("runtimeId", args.runtimeId))
        .unique();
      if (runtimeCollision && runtimeCollision._id !== existing?._id) {
-        throw new ConvexError(`Plugin id "${nextRuntimeIdLabel}" is already claimed by another package`);
+        throw new ConvexError(`Plugin id "${nextRuntimeId}" is already claimed by another package`);
      }
    }

@@ -2228,7 +2228,7 @@ export const insertReleaseInternal = internalMutation({
          q.eq("packageId", existing._id).eq("version", args.version),
        )
        .unique();
-      if (releaseExists) throw new ConvexError(`Version ${nextVersionLabel} already exists`);
+      if (releaseExists) throw new ConvexError(`Version ${nextVersion} already exists`);
    }
    const priorReleases = existing
      ? await ctx.db
@@ -95,22 +95,10 @@ const badgesValidator = v.optional(
  }),
 );

-/**
- * Nested stat fields on the `skills` document.
- *
- * The four migrated fields below are kept for backward compatibility only.
- * Always use the top-level fields (`statsDownloads`, `statsStars`,
- * `statsInstallsCurrent`, `statsInstallsAllTime`) as the source of truth,
- * and use `readCanonicalStat()` / `applySkillStatDeltas()` to read/write them.
- */
 const statsValidator = v.object({
-  /** @deprecated Use top-level `statsDownloads` instead. */
  downloads: v.number(),
-  /** @deprecated Use top-level `statsInstallsCurrent` instead. */
  installsCurrent: v.optional(v.number()),
-  /** @deprecated Use top-level `statsInstallsAllTime` instead. */
  installsAllTime: v.optional(v.number()),
-  /** @deprecated Use top-level `statsStars` instead. */
  stars: v.number(),
  versions: v.number(),
  comments: v.number(),
@@ -1,182 +0,0 @@
-# Logo Replacement Design
-
-Date: 2026-04-21
-Topic: Comprehensive logo replacement using the provided lobster artwork
-
-## Summary
-
-Replace every current application logo surface with the user-provided lobster artwork while preserving the existing UI layout and copy. This includes in-app logo images, favicon and install icon assets, and manifest/head wiring. The existing wide social preview image `public/og.png` remains unchanged. Instead, `public/og-logo.png` is included in the replacement asset pack as a standalone logo export and is not wired into site metadata.
-
-## Goals
-
- Replace all current logo imagery with the provided lobster art.
- Preserve existing layout structure in header, mobile navigation, and hero content.
- Provide dedicated asset files for browser, install, and app surfaces rather than relying on one large source image everywhere.
- Keep runtime references stable where possible by replacing existing filenames in place.
- Improve browser/device logo behavior by adding standard favicon and touch icon variants.
-
-## Non-Goals
-
- No header, navigation, or hero layout redesign.
- No typography or copy changes to the `ClawHub` wordmark text.
- No change to the existing social preview card asset `public/og.png`.
- No full vector redraw of the lobster artwork from scratch.
-
-## Scope
-
-### In Scope
-
- Replace:
-  - `public/clawd-logo.png`
-  - `public/clawd-mark.png`
-  - `public/logo192.png`
-  - `public/logo512.png`
-  - `public/favicon.ico`
- Add or update:
-  - `public/favicon-16x16.png`
-  - `public/favicon-32x32.png`
-  - `public/apple-touch-icon.png`
-  - `public/logo.jpg`
-  - `public/logo.svg`
-  - `public/og-logo.png`
- Update runtime/browser metadata:
-  - root document link tags in `src/routes/__root.tsx`
-  - `public/manifest.json`
-
-### Out of Scope
-
- `public/og.png`
- Any route-level social metadata currently using `og.png`
- Any non-logo artwork or unrelated illustration assets
-
-## Current State
-
- The app currently references `public/clawd-logo.png` in the desktop and mobile header.
- The homepage hero references `public/clawd-mark.png`.
- The root document exposes `/favicon.ico`, `/logo192.png`, and `/manifest.json`.
- The web app manifest references `favicon.ico`, `logo192.png`, and `logo512.png`.
- The site-wide OG metadata still references `og.png`.
-
-## Recommended Approach
-
-Use the provided lobster image as the master artwork and derive a small asset pack tailored to each output surface.
-
-Why this approach:
-
- It satisfies the request to replace the logo everywhere it appears.
- It avoids visual degradation from blindly reusing one oversized raster in tiny favicon contexts.
- It minimizes application code changes by preserving the established filenames used by the UI.
-
-## Asset Plan
-
-### Master Asset
-
-Create one high-resolution square source derived from the attached lobster artwork. This will be the basis for all exported formats.
-
-### Replacement Assets
-
- `clawd-logo.png`
-  - High-resolution square PNG used by header/mobile brand image references.
- `clawd-mark.png`
-  - High-resolution square PNG used by hero/logo-only surfaces.
- `logo192.png`
-  - 192×192 install icon.
- `logo512.png`
-  - 512×512 install icon.
- `favicon.ico`
-  - Multi-size favicon generated from the same master for browser tab use.
- `favicon-16x16.png`
-  - Explicit raster favicon for browsers that prefer PNG.
- `favicon-32x32.png`
-  - Explicit raster favicon for higher-density tab/bookmark use.
- `apple-touch-icon.png`
-  - 180×180 touch icon for iOS home screen usage.
- `logo.jpg`
-  - Flattened JPEG export for contexts where a non-transparent logo file is useful.
- `logo.svg`
-  - SVG wrapper asset that embeds the logo image in an SVG container so an SVG logo file exists for downstream usage without falsely claiming the art is natively vector.
- `og-logo.png`
-  - Logo-focused branded raster asset retained separately from the existing wide social card `og.png`.
-
-## Runtime Wiring
-
-### Application UI
-
- Keep existing JSX references to `clawd-logo.png` and `clawd-mark.png` unless a clearer dedicated asset path becomes necessary.
- Do not replace image elements with text or SVG components.
-
-### Root Head Tags
-
-Update `src/routes/__root.tsx` to use dedicated icon assets:
-
- `rel="icon"` should include PNG favicon variants in addition to the ICO.
- `rel="apple-touch-icon"` should point to `apple-touch-icon.png`.
- `rel="manifest"` remains `manifest.json`.
- OG/Twitter metadata remains wired to `og.png` and is not changed.
-
-### Web App Manifest
-
-Update `public/manifest.json` so install surfaces reference the replacement icon assets. Keep the manifest conservative and omit maskable-specific `purpose` values for this change.
-
-## Data Flow
-
-1. Start from the provided lobster artwork.
-2. Export optimized raster variants for each target size.
-3. Replace or add files in `public/`.
-4. Update root document links and manifest entries.
-5. Build the app and verify the logo surfaces still render without layout regressions.
-
-## Error Handling And Risks
-
-### Small-Size Legibility
-
-Risk: the artwork is detailed and may lose clarity at favicon sizes.
-
-Mitigation:
-
- Generate dedicated 16×16 and 32×32 outputs instead of relying only on browser downscaling.
- Prefer the ICO plus PNG favicon set to maximize compatibility.
-
-### Raster-As-Vector Expectations
-
-Risk: a pure SVG redraw would be time-consuming and subjective.
-
-Mitigation:
-
- Provide `logo.svg` as an SVG container asset, while using raster files for browser/runtime surfaces that need visual fidelity.
-
-### Unintended Social Preview Changes
-
-Risk: a broad asset refresh accidentally changes OG behavior.
-
-Mitigation:
-
- Explicitly leave `og.png` and its metadata references untouched.
- Treat `og-logo.png` as a separate logo asset only.
-
-## Testing And Verification
-
- Confirm the generated files exist in `public/` with expected dimensions.
- Run the production build to ensure asset references still resolve.
- Spot-check the following surfaces:
-  - desktop header brand image
-  - mobile navigation brand image
-  - homepage hero lobster image
-  - browser favicon and touch icon wiring
-  - manifest icon references
- Verify that `og.png` remains unchanged and the site metadata still references it.
-
-## Implementation Notes
-
- Use minimal code churn: replace files in place where existing paths are already correct.
- Add new icon files only where they improve browser/device handling.
- Keep the change tightly scoped to branding assets and metadata.
-
-## Acceptance Criteria
-
- Every current application logo surface displays the provided lobster artwork instead of the previous brand image.
- Favicon, touch icon, and install icons resolve to replacement assets.
- Header/mobile/hero layout remains unchanged.
- `og.png` is not modified.
- `og-logo.png` exists as part of the updated asset pack.
- The app builds successfully after the change.
@@ -1,135 +0,0 @@
-import { expect, test } from "@playwright/test";
-import { expectHealthyPage, trackRuntimeErrors } from "./helpers/runtimeErrors";
-
-// Only run in mobile projects — skip on desktop
-test.beforeEach(({}, testInfo) => {
-  test.skip(
-    !testInfo.project.name.includes("mobile"),
-    "mobile-only test",
-  );
-});
-
-test("browse page has no horizontal overflow on mobile", async ({ page }) => {
-  const errors = trackRuntimeErrors(page);
-
-  await page.goto("/skills?sort=downloads", { waitUntil: "domcontentloaded" });
-  await expect(page.getByRole("heading", { name: /^Skills/ })).toBeVisible();
-  await expect(page.locator(".skill-card, .skill-list-item").first()).toBeVisible();
-
-  const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
-  const clientWidth = await page.evaluate(() => document.documentElement.clientWidth);
-  expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1);
-
-  await expectHealthyPage(page, errors);
-});
-
-test("browse sidebar toggle opens and closes filters", async ({ page }) => {
-  const errors = trackRuntimeErrors(page);
-
-  await page.goto("/skills?sort=downloads", { waitUntil: "domcontentloaded" });
-  await expect(page.getByRole("heading", { name: /^Skills/ })).toBeVisible();
-
-  const filterButton = page.getByRole("button", { name: "Toggle filters" });
-  await expect(filterButton).toBeVisible();
-
-  // Sidebar should be hidden initially
-  const sidebar = page.locator(".browse-sidebar");
-  await expect(sidebar).not.toBeVisible();
-
-  // Open sidebar
-  await filterButton.click();
-  await expect(sidebar).toBeVisible();
-
-  // Close sidebar
-  await filterButton.click();
-  await expect(sidebar).not.toBeVisible();
-
-  await expectHealthyPage(page, errors);
-});
-
-test("card grid fits within viewport on mobile", async ({ page }) => {
-  const errors = trackRuntimeErrors(page);
-
-  await page.goto("/skills?sort=downloads&view=cards", { waitUntil: "domcontentloaded" });
-  await expect(page.locator(".skill-card").first()).toBeVisible();
-
-  const card = page.locator(".skill-card").first();
-  const cardBox = await card.boundingBox();
-  const viewport = page.viewportSize()!;
-
-  // Card should not exceed viewport width
-  expect(cardBox!.width).toBeLessThanOrEqual(viewport.width);
-
-  await expectHealthyPage(page, errors);
-});
-
-test("skill detail page has no horizontal overflow on mobile", async ({ page, request }) => {
-  const errors = trackRuntimeErrors(page);
-
-  const response = await request.get("/api/v1/skills/gifgrep");
-  test.skip(!response.ok(), "gifgrep fixture missing");
-
-  const payload = (await response.json()) as {
-    owner?: { handle?: string | null };
-    skill?: { slug?: string | null; displayName?: string | null };
-  };
-  const ownerHandle = payload.owner?.handle?.trim();
-  const slug = payload.skill?.slug?.trim();
-  test.skip(!ownerHandle || !slug || !payload.skill?.displayName, "fixture missing owner handle, slug, or displayName");
-
-  await page.goto(`/${ownerHandle}/${slug}`, { waitUntil: "domcontentloaded" });
-  await expect(
-    page.getByRole("heading", { name: payload.skill!.displayName! }),
-  ).toBeVisible();
-
-  const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
-  const clientWidth = await page.evaluate(() => document.documentElement.clientWidth);
-  expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1);
-
-  await expectHealthyPage(page, errors);
-});
-
-test("detail tabs are scrollable and touch-friendly on mobile", async ({ page, request }) => {
-  const errors = trackRuntimeErrors(page);
-
-  const response = await request.get("/api/v1/skills/gifgrep");
-  test.skip(!response.ok(), "gifgrep fixture missing");
-
-  const payload = (await response.json()) as {
-    owner?: { handle?: string | null };
-    skill?: { slug?: string | null };
-  };
-  const ownerHandle = payload.owner?.handle?.trim();
-  const slug = payload.skill?.slug?.trim();
-  test.skip(!ownerHandle || !slug, "fixture missing");
-
-  await page.goto(`/${ownerHandle}/${slug}`, { waitUntil: "domcontentloaded" });
-
-  // All standard tabs should be accessible (even if scrolled)
-  for (const tabName of ["README", "Files", "Versions"]) {
-    const tab = page.getByRole("button", { name: tabName });
-    await tab.scrollIntoViewIfNeeded();
-    await expect(tab).toBeVisible();
-
-    // Touch target should be at least 44px
-    const box = await tab.boundingBox();
-    expect(box!.height).toBeGreaterThanOrEqual(44);
-  }
-
-  await expectHealthyPage(page, errors);
-});
-
-test("search input font size prevents iOS zoom", async ({ page }) => {
-  const errors = trackRuntimeErrors(page);
-
-  await page.goto("/skills?sort=downloads", { waitUntil: "domcontentloaded" });
-
-  const input = page.locator(".browse-search-input");
-  await expect(input).toBeVisible();
-
-  const fontSize = await input.evaluate((el) => getComputedStyle(el).fontSize);
-  // iOS Safari zooms the page when an input has font-size below 16px
-  expect(parseFloat(fontSize)).toBeGreaterThanOrEqual(16);
-
-  await expectHealthyPage(page, errors);
-});
@@ -29,13 +29,5 @@ export default defineConfig({
      name: "chromium",
      use: { ...devices["Desktop Chrome"] },
    },
-    {
-      name: "mobile-chrome",
-      use: { ...devices["Pixel 7"] },
-    },
-    {
-      name: "mobile-safari",
-      use: { ...devices["iPhone 14"] },
-    },
  ],
 });
@@ -1,102 +0,0 @@
-<svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <radialGradient id="bgGlowRight" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1048 328) rotate(180) scale(358 260)">
-      <stop stop-color="#7B1F18" stop-opacity="0.58"/>
-      <stop offset="0.45" stop-color="#431210" stop-opacity="0.26"/>
-      <stop offset="1" stop-color="#030305" stop-opacity="0"/>
-    </radialGradient>
-    <radialGradient id="bgGlowBottom" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(192 610) rotate(-90) scale(180 420)">
-      <stop stop-color="#A12A1D" stop-opacity="0.2"/>
-      <stop offset="1" stop-color="#030305" stop-opacity="0"/>
-    </radialGradient>
-    <linearGradient id="frameStroke" x1="40" y1="106" x2="1146" y2="530" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#6D3437" stop-opacity="0.8"/>
-      <stop offset="0.55" stop-color="#DF5D35" stop-opacity="0.36"/>
-      <stop offset="1" stop-color="#FF6D39" stop-opacity="0.9"/>
-    </linearGradient>
-    <linearGradient id="frameGlow" x1="164" y1="164" x2="1114" y2="476" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#130D10"/>
-      <stop offset="0.5" stop-color="#170B0E"/>
-      <stop offset="1" stop-color="#261011"/>
-    </linearGradient>
-    <linearGradient id="logoStroke" x1="112" y1="140" x2="398" y2="430" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#4C2A28" stop-opacity="0.55"/>
-      <stop offset="1" stop-color="#E05831" stop-opacity="0.28"/>
-    </linearGradient>
-    <linearGradient id="searchStroke" x1="146" y1="480" x2="1068" y2="480" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#7F342A" stop-opacity="0.65"/>
-      <stop offset="1" stop-color="#FF6F37" stop-opacity="0.85"/>
-    </linearGradient>
-    <linearGradient id="buttonFill" x1="838" y1="445" x2="1084" y2="510" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#D55335"/>
-      <stop offset="1" stop-color="#EB6A3E"/>
-    </linearGradient>
-    <filter id="softBlur" x="-30%" y="-30%" width="160%" height="160%">
-      <feGaussianBlur stdDeviation="20"/>
-    </filter>
-    <filter id="glowBlur" x="-40%" y="-40%" width="180%" height="180%">
-      <feGaussianBlur stdDeviation="10"/>
-    </filter>
-  </defs>
-
-  <rect width="1200" height="630" fill="#030305"/>
-  <rect width="1200" height="630" fill="url(#bgGlowRight)"/>
-  <rect width="1200" height="630" fill="url(#bgGlowBottom)"/>
-
-  <g opacity="0.22">
-    <circle cx="998" cy="406" r="1.8" fill="#FF7649"/>
-    <circle cx="1036" cy="446" r="1.4" fill="#FF7649"/>
-    <circle cx="1088" cy="492" r="1.2" fill="#FF7649"/>
-    <circle cx="1116" cy="540" r="1.1" fill="#FF7649"/>
-    <circle cx="964" cy="502" r="1.3" fill="#FF7649"/>
-    <circle cx="880" cy="528" r="1.3" fill="#FF7649"/>
-    <circle cx="716" cy="452" r="1.1" fill="#FF7649"/>
-    <circle cx="622" cy="396" r="1.4" fill="#FF7649"/>
-    <circle cx="188" cy="558" r="1.3" fill="#FF7649"/>
-    <circle cx="152" cy="580" r="1.1" fill="#FF7649"/>
-    <circle cx="92" cy="594" r="1.4" fill="#FF7649"/>
-  </g>
-
-  <path d="M870 146C990 166 1082 230 1142 328" stroke="#AA3D2B" stroke-opacity="0.16" stroke-width="2"/>
-  <path d="M926 190C1036 234 1108 306 1168 420" stroke="#AA3D2B" stroke-opacity="0.12" stroke-width="2"/>
-  <path d="M1044 374H1200" stroke="#B74A36" stroke-opacity="0.28" stroke-width="2"/>
-  <path d="M24 522H164" stroke="#B74A36" stroke-opacity="0.22" stroke-width="2"/>
-
-  <rect x="42" y="108" width="1092" height="430" rx="42" fill="url(#frameGlow)"/>
-  <rect x="42.75" y="108.75" width="1090.5" height="428.5" rx="41.25" stroke="url(#frameStroke)" stroke-width="1.5"/>
-  <rect x="113" y="148" width="292" height="292" rx="38" fill="#09090C"/>
-  <rect x="113.75" y="148.75" width="290.5" height="290.5" rx="37.25" stroke="url(#logoStroke)" stroke-width="1.5"/>
-
-  <ellipse cx="1118" cy="180" rx="86" ry="42" fill="#FF6532" fill-opacity="0.18" filter="url(#glowBlur)"/>
-  <ellipse cx="1018" cy="328" rx="208" ry="164" fill="#8A2218" fill-opacity="0.12" filter="url(#softBlur)"/>
-  <ellipse cx="96" cy="532" rx="48" ry="10" fill="#FF5E35" fill-opacity="0.24" filter="url(#softBlur)"/>
-  <ellipse cx="572" cy="494" rx="302" ry="12" fill="#FF5E35" fill-opacity="0.12" filter="url(#softBlur)"/>
-
-  <image href="clawd-logo.png" x="124" y="158" width="270" height="270" preserveAspectRatio="xMidYMid meet"/>
-
-  <text x="500" y="256" fill="#F8EEE8" font-size="88" font-weight="900" letter-spacing="-4.2" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">ClawHub.ai</text>
-  <text x="500" y="338" fill="#F8EEE8" font-size="42" font-weight="800" letter-spacing="-1.2" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">Equip. Install. <tspan fill="#FF6236">Build.</tspan></text>
-  <text x="500" y="390" fill="#E1D4CF" font-size="23" font-weight="500" letter-spacing="-0.15" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">
-    <tspan x="500" dy="0">Developer tools and agent skills</tspan>
-    <tspan x="500" dy="28">for your next project.</tspan>
-  </text>
-
-  <g>
-    <rect x="148" y="432" width="924" height="104" rx="31" fill="#11090D"/>
-    <rect x="148.75" y="432.75" width="922.5" height="102.5" rx="30.25" stroke="url(#searchStroke)" stroke-width="1.5"/>
-    <circle cx="220" cy="484" r="19" stroke="#FFF9F3" stroke-width="5"/>
-    <line x1="233" y1="497" x2="249" y2="513" stroke="#FFF9F3" stroke-width="5" stroke-linecap="round"/>
-    <text x="272" y="495" fill="#DCD0CB" font-size="31" font-weight="600" letter-spacing="-0.4" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">What are you looking for?</text>
-    <rect x="824" y="450" width="258" height="66" rx="21" fill="url(#buttonFill)"/>
-    <text x="953" y="494" text-anchor="middle" fill="#FFF8F1" font-size="28" font-weight="800" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">Search tools</text>
-  </g>
-
-  <g>
-    <rect x="292" y="574" width="214" height="44" rx="22" fill="#1B1317" stroke="#3A292C"/>
-    <text x="399" y="603" text-anchor="middle" fill="#EEE3DF" font-size="18" font-weight="500" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">self-improving</text>
-    <rect x="530" y="574" width="248" height="44" rx="22" fill="#1B1317" stroke="#3A292C"/>
-    <text x="654" y="603" text-anchor="middle" fill="#EEE3DF" font-size="18" font-weight="500" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">GitHub integration</text>
-    <rect x="802" y="574" width="180" height="44" rx="22" fill="#1B1317" stroke="#3A292C"/>
-    <text x="892" y="603" text-anchor="middle" fill="#EEE3DF" font-size="18" font-weight="500" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif">dashboard</text>
-  </g>
-</svg>
@@ -1,39 +1,6 @@
-import { copyFile, mkdir, stat } from "node:fs/promises";
+import { copyFile, mkdir } from "node:fs/promises";
 import path from "node:path";

-async function resolveExistingPath(candidates: string[]) {
-  for (const candidate of candidates) {
-    try {
-      await stat(candidate);
-      return candidate;
-    } catch {
-      // Try next candidate.
-    }
-  }
-
-  throw new Error(`Missing required asset. Tried: ${candidates.join(", ")}`);
-}
-
-function nodeModuleCandidates(relativePath: string) {
-  return [
-    path.resolve(`node_modules/${relativePath}`),
-    path.resolve(`../../node_modules/${relativePath}`),
-  ];
-}
-
-const resvgWasmSource = await resolveExistingPath(
-  nodeModuleCandidates("@resvg/resvg-wasm/index_bg.wasm"),
-);
-const bricolage800Source = await resolveExistingPath(
-  nodeModuleCandidates("@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-800-normal.woff2"),
-);
-const bricolage500Source = await resolveExistingPath(
-  nodeModuleCandidates("@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-500-normal.woff2"),
-);
-const ibmPlex500Source = await resolveExistingPath(
-  nodeModuleCandidates("@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-500-normal.woff2"),
-);
-
 const copies = [
  {
    source: path.resolve("public/clawd-mark.png"),
@@ -45,7 +12,7 @@ const copies = [
    ],
  },
  {
-    source: resvgWasmSource,
+    source: path.resolve("node_modules/@resvg/resvg-wasm/index_bg.wasm"),
    targets: [
      path.resolve(".output/server/node_modules/@resvg/resvg-wasm/index_bg.wasm"),
      path.resolve(
@@ -54,7 +21,9 @@ const copies = [
    ],
  },
  {
-    source: bricolage800Source,
+    source: path.resolve(
+      "node_modules/@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-800-normal.woff2",
+    ),
    targets: [
      path.resolve(
        ".output/server/node_modules/@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-800-normal.woff2",
@@ -65,7 +34,9 @@ const copies = [
    ],
  },
  {
-    source: bricolage500Source,
+    source: path.resolve(
+      "node_modules/@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-500-normal.woff2",
+    ),
    targets: [
      path.resolve(
        ".output/server/node_modules/@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-500-normal.woff2",
@@ -76,7 +47,9 @@ const copies = [
    ],
  },
  {
-    source: ibmPlex500Source,
+    source: path.resolve(
+      "node_modules/@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-500-normal.woff2",
+    ),
    targets: [
      path.resolve(
        ".output/server/node_modules/@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-500-normal.woff2",
@@ -9,185 +9,149 @@ const siteModeMock = vi.fn(() => "souls");
 const navigateMock = vi.fn();

 vi.mock("@tanstack/react-router", () => ({
-	Link: (props: {
-		children: ReactNode;
-		className?: string;
-		hash?: string;
-		to?: string;
-	}) => (
-		<a
-			href={`${props.to ?? "/"}${props.hash ? `#${props.hash}` : ""}`}
-			className={props.className}
-		>
-			{props.children}
-		</a>
-	),
-	useLocation: () => ({ pathname: "/" }),
-	useNavigate: () => navigateMock,
+  Link: (props: {
+    children: ReactNode;
+    className?: string;
+    hash?: string;
+    to?: string;
+  }) => (
+    <a href={`${props.to ?? "/"}${props.hash ? `#${props.hash}` : ""}`} className={props.className}>
+      {props.children}
+    </a>
+  ),
+  useLocation: () => ({ pathname: "/" }),
+  useNavigate: () => navigateMock,
 }));

 vi.mock("@convex-dev/auth/react", () => ({
-	useAuthActions: () => ({
-		signIn: vi.fn(),
-		signOut: vi.fn(),
-	}),
+  useAuthActions: () => ({
+    signIn: vi.fn(),
+    signOut: vi.fn(),
+  }),
 }));

 const authStatusMock = vi.fn(() => ({
-	isAuthenticated: false,
-	isLoading: false,
-	me: null,
+  isAuthenticated: false,
+  isLoading: false,
+  me: null,
 }));

 vi.mock("../lib/useAuthStatus", () => ({
-	useAuthStatus: () => authStatusMock(),
+  useAuthStatus: () => authStatusMock(),
 }));

 const setThemeMock = vi.fn();
 const setModeMock = vi.fn();

 vi.mock("../lib/theme", () => ({
-	applyTheme: vi.fn(),
-	THEME_OPTIONS: [
-		{ value: "claw", label: "Claw", description: "" },
-		{ value: "hub", label: "Hub", description: "" },
-	],
-	useThemeMode: () => ({
-		theme: "hub",
-		mode: "system",
-		setTheme: setThemeMock,
-		setMode: setModeMock,
-	}),
+  applyTheme: vi.fn(),
+  THEME_OPTIONS: [
+    { value: "claw", label: "Claw", description: "" },
+    { value: "hub", label: "Hub", description: "" },
+  ],
+  useThemeMode: () => ({
+    theme: "hub",
+    mode: "system",
+    setTheme: setThemeMock,
+    setMode: setModeMock,
+  }),
 }));

 vi.mock("../lib/theme-transition", () => ({
-	startThemeTransition: ({
-		setTheme,
-		nextTheme,
-	}: {
-		setTheme: (value: string) => void;
-		nextTheme: string;
-	}) => setTheme(nextTheme),
+  startThemeTransition: ({
+    setTheme,
+    nextTheme,
+  }: {
+    setTheme: (value: string) => void;
+    nextTheme: string;
+  }) => setTheme(nextTheme),
 }));

 vi.mock("../lib/useAuthError", () => ({
-	setAuthError: vi.fn(),
-	useAuthError: () => ({
-		error: null,
-		clear: vi.fn(),
-	}),
+  setAuthError: vi.fn(),
+  useAuthError: () => ({
+    error: null,
+    clear: vi.fn(),
+  }),
 }));

 vi.mock("../lib/roles", () => ({
-	isModerator: () => false,
+  isModerator: () => false,
 }));

 vi.mock("../lib/site", () => ({
-	getClawHubSiteUrl: () => "https://clawhub.ai",
-	getSiteMode: () => siteModeMock(),
-	getSiteName: () => "OnlyCrabs",
+  getClawHubSiteUrl: () => "https://clawhub.ai",
+  getSiteMode: () => siteModeMock(),
+  getSiteName: () => "OnlyCrabs",
 }));

 vi.mock("../lib/gravatar", () => ({
-	gravatarUrl: vi.fn(),
+  gravatarUrl: vi.fn(),
 }));

 vi.mock("../components/ui/dropdown-menu", () => ({
-	DropdownMenu: ({ children }: { children: ReactNode }) => (
-		<div>{children}</div>
-	),
-	DropdownMenuContent: ({ children }: { children: ReactNode }) => (
-		<div>{children}</div>
-	),
-	DropdownMenuItem: ({ children }: { children: ReactNode }) => (
-		<div>{children}</div>
-	),
-	DropdownMenuSeparator: () => <hr />,
-	DropdownMenuTrigger: ({ children }: { children: ReactNode }) => (
-		<div>{children}</div>
-	),
+  DropdownMenu: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DropdownMenuContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DropdownMenuItem: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DropdownMenuSeparator: () => <hr />,
+  DropdownMenuTrigger: ({ children }: { children: ReactNode }) => <div>{children}</div>,
 }));

 vi.mock("../components/ui/toggle-group", () => ({
-	ToggleGroup: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-	ToggleGroupItem: ({ children }: { children: ReactNode }) => (
-		<button type="button">{children}</button>
-	),
+  ToggleGroup: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  ToggleGroupItem: ({ children }: { children: ReactNode }) => <button type="button">{children}</button>,
 }));

 describe("Header", () => {
-	it("hides Packages navigation in soul mode on mobile and desktop", () => {
-		siteModeMock.mockReturnValue("souls");
+  it("hides Packages navigation in soul mode on mobile and desktop", () => {
+    siteModeMock.mockReturnValue("souls");

-		render(<Header />);
+    render(<Header />);

-		expect(screen.queryByText("Packages")).toBeNull();
-	});
+    expect(screen.queryByText("Packages")).toBeNull();
+  });

-	it("renders direct desktop theme family controls and plain Skills tab", () => {
-		siteModeMock.mockReturnValue("skills");
-		setThemeMock.mockClear();
-		setModeMock.mockClear();
+  it("renders direct desktop theme family controls and plain Skills tab", () => {
+    siteModeMock.mockReturnValue("skills");
+    setThemeMock.mockClear();
+    setModeMock.mockClear();

-		render(<Header />);
+    render(<Header />);

-		expect(
-			screen.getByRole("button", { name: /Cycle theme mode/i }),
-		).toBeTruthy();
-		expect(screen.getAllByText("Skills")).toHaveLength(1);
-		expect(screen.getAllByText("Users")).toHaveLength(1);
-		expect(
-			screen.getByPlaceholderText("Search skills, plugins, users"),
-		).toBeTruthy();
+    expect(screen.getByRole("button", { name: /Cycle theme mode/i })).toBeTruthy();
+    expect(screen.getAllByText("Skills")).toHaveLength(1);
+    expect(screen.getAllByText("Users")).toHaveLength(1);
+    expect(screen.getByPlaceholderText("Search skills, plugins, users")).toBeTruthy();

-		fireEvent.click(screen.getByRole("button", { name: /Cycle theme mode/i }));
-		expect(setModeMock).toHaveBeenCalledWith("light");
+    fireEvent.click(screen.getByRole("button", { name: /Cycle theme mode/i }));
+    expect(setModeMock).toHaveBeenCalledWith("light");

-		fireEvent.click(screen.getByRole("button", { name: "Open menu" }));
+    fireEvent.click(screen.getByRole("button", { name: "Open menu" }));

-		expect(screen.getAllByText("Home")).toHaveLength(1);
-		expect(screen.getAllByText("Skills")).toHaveLength(2);
-		expect(screen.getAllByText("Users")).toHaveLength(2);
-	});
+    expect(screen.getAllByText("Skills")).toHaveLength(2);
+    expect(screen.getAllByText("Users")).toHaveLength(2);
+  });

-	it("shows Home above Skills in the mobile menu", () => {
-		siteModeMock.mockReturnValue("skills");
+  it("routes soul-mode header searches to the souls browse page", () => {
+    siteModeMock.mockReturnValue("souls");
+    navigateMock.mockReset();

-		render(<Header />);
+    render(<Header />);

-		fireEvent.click(screen.getByRole("button", { name: "Open menu" }));
+    fireEvent.change(screen.getByPlaceholderText("Search souls..."), {
+      target: { value: "angler" },
+    });
+    fireEvent.submit(screen.getByRole("search", { name: "Site search" }));

-		expect(document.querySelector(".mobile-nav-brand-mark-image")).toBeTruthy();
-
-		const labels = Array.from(
-			document.querySelectorAll(".mobile-nav-section .mobile-nav-link"),
-		)
-			.map((element) => element.textContent?.trim())
-			.filter((label): label is string => Boolean(label));
-
-		expect(labels.slice(0, 2)).toEqual(["Home", "Skills"]);
-	});
-
-	it("routes soul-mode header searches to the souls browse page", () => {
-		siteModeMock.mockReturnValue("souls");
-		navigateMock.mockReset();
-
-		render(<Header />);
-
-		fireEvent.change(screen.getByPlaceholderText("Search souls..."), {
-			target: { value: "angler" },
-		});
-		fireEvent.submit(screen.getByRole("search", { name: "Site search" }));
-
-		expect(navigateMock).toHaveBeenCalledWith({
-			to: "/souls",
-			search: {
-				q: "angler",
-				sort: undefined,
-				dir: undefined,
-				view: undefined,
-				focus: undefined,
-			},
-		});
-	});
+    expect(navigateMock).toHaveBeenCalledWith({
+      to: "/souls",
+      search: {
+        q: "angler",
+        sort: undefined,
+        dir: undefined,
+        view: undefined,
+        focus: undefined,
+      },
+    });
+  });
 });
@@ -4,9 +4,9 @@ import {
  MessageSquare,
  Package,
  Plug,
-  RefreshCw,
  Shield,
  Wrench,
+  Zap,
 } from "lucide-react";
 import type { SkillCategory } from "../lib/categories";

@@ -39,7 +39,7 @@ const CATEGORY_ICONS: Record<string, React.ReactNode> = {
  "dev-tools": <Wrench size={15} />,
  data: <Database size={15} />,
  security: <Shield size={15} />,
-  automation: <RefreshCw size={15} />,
+  automation: <Zap size={15} />,
  other: <Package size={15} />,
 };

@@ -129,29 +129,12 @@ export default function Header() {
              </button>
              <SheetContent side="left" className="mobile-nav-sheet">
                <SheetHeader className="pr-10">
-                  <SheetTitle>
-                    <span className="mobile-nav-brand">
-                      <span className="mobile-nav-brand-mark" aria-hidden="true">
-                        <img
-                          src="/clawd-logo.png"
-                          alt=""
-                          aria-hidden="true"
-                          className="mobile-nav-brand-mark-image"
-                        />
-                      </span>
-                      <span className="mobile-nav-brand-name">{siteName}</span>
-                    </span>
-                  </SheetTitle>
+                  <SheetTitle>{siteName}</SheetTitle>
                  <SheetDescription>
                    Browse sections, switch theme, and access account actions.
                  </SheetDescription>
                </SheetHeader>
                <div className="mobile-nav-section">
-                  <SheetClose asChild>
-                    <Link to="/" className="mobile-nav-link">
-                      Home
-                    </Link>
-                  </SheetClose>
                  {isSoulMode ? (
                    <SheetClose asChild>
                      <a href={clawHubUrl} className="mobile-nav-link">
@@ -219,9 +202,10 @@ export default function Header() {
            search={{ q: undefined, highlighted: undefined, search: undefined }}
            className="brand"
          >
-            <span className="brand-mark">
+            {/* TODO: Re-introduce logo once new asset is ready */}
+            {/* <span className="brand-mark">
              <img src="/clawd-logo.png" alt="" aria-hidden="true" className="brand-mark-image" />
-            </span>
+            </span> */}
            <span className="brand-name brand-name-responsive">{siteName}</span>
          </Link>

@@ -143,7 +143,7 @@ export function SkillCommentsPanel({ skillId, isAuthenticated, me }: SkillCommen
          comments.map((entry) => (
            <div
              key={entry.comment._id}
-              className="comment-entry flex gap-3 rounded-[var(--radius-sm)] border border-[color:var(--line)] bg-[color:var(--surface)] p-3"
+              className="flex gap-3 rounded-[var(--radius-sm)] border border-[color:var(--line)] bg-[color:var(--surface)] p-3"
            >
              <div className="flex min-w-0 flex-1 flex-col gap-1.5">
                <strong className="text-sm">
@@ -1,13 +1,10 @@
 /* @vitest-environment jsdom */
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { useEffect } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { Doc, Id } from "../../convex/_generated/dataModel";
 import { SkillDiffCard } from "./SkillDiffCard";

 const getFileTextMock = vi.fn();
-let diffEditorMounts = 0;
-let diffEditorUnmounts = 0;

 vi.mock("convex/react", () => ({
  useAction: () => getFileTextMock,
@@ -21,37 +18,15 @@ vi.mock("@monaco-editor/react", () => ({
    className?: string;
    options?: { renderSideBySide?: boolean; useInlineViewWhenSpaceIsLimited?: boolean };
  }) => (
-    <MockDiffEditor
-      className={className}
-      options={options}
-    />
-  ),
-  useMonaco: () => null,
-}));
-
-function MockDiffEditor({
-  className,
-  options,
-}: {
-  className?: string;
-  options?: { renderSideBySide?: boolean; useInlineViewWhenSpaceIsLimited?: boolean };
-}) {
-  useEffect(() => {
-    diffEditorMounts += 1;
-    return () => {
-      diffEditorUnmounts += 1;
-    };
-  }, []);
-
-  return (
    <div
      className={className}
      data-inline-fallback={String(options?.useInlineViewWhenSpaceIsLimited)}
      data-side-by-side={String(options?.renderSideBySide)}
      data-testid="diff-editor"
    />
-  );
-}
+  ),
+  useMonaco: () => null,
+}));

 function installMatchMedia(matches: boolean) {
  Object.defineProperty(window, "matchMedia", {
@@ -90,8 +65,6 @@ describe("SkillDiffCard", () => {
  beforeEach(() => {
    getFileTextMock.mockReset();
    getFileTextMock.mockResolvedValue({ text: "content" });
-    diffEditorMounts = 0;
-    diffEditorUnmounts = 0;
  });

  it("defaults to inline mode on narrow screens", async () => {
@@ -135,34 +108,4 @@ describe("SkillDiffCard", () => {
    });
    expect(screen.getByRole("button", { name: "Side-by-side" }).className).toContain("is-active");
  });
-
-  it("keeps the diff editor mounted when toggling view mode", async () => {
-    installMatchMedia(false);
-
-    render(
-      <SkillDiffCard
-        skill={skill}
-        versions={[
-          makeVersion("skillVersions:1", "1.0.1"),
-          makeVersion("skillVersions:2", "1.0.2"),
-        ]}
-      />,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId("diff-editor")).toBeTruthy();
-    });
-
-    expect(diffEditorMounts).toBe(1);
-    expect(diffEditorUnmounts).toBe(0);
-
-    fireEvent.click(screen.getByRole("button", { name: "Inline" }));
-
-    await waitFor(() => {
-      expect(screen.getByTestId("diff-editor").getAttribute("data-side-by-side")).toBe("false");
-    });
-
-    expect(diffEditorMounts).toBe(1);
-    expect(diffEditorUnmounts).toBe(0);
-  });
 });
@@ -38,7 +38,7 @@ type SizeWarning = {
 };

 const EMPTY_DIFF_TEXT = "";
-const MOBILE_DIFF_BREAKPOINT = 768;
+const MOBILE_DIFF_BREAKPOINT = 860;

 function getDefaultViewMode() {
  if (typeof window === "undefined") return "split";
@@ -402,6 +402,7 @@ export function SkillDiffCard({ skill, versions, variant = "card" }: SkillDiffCa
          ) : (
            <ClientOnly fallback={<div className="diff-empty">Preparing diff…</div>}>
              <DiffEditor
+                key={`diff-${viewMode}`}
                className={`diff-monaco diff-monaco-${viewMode}`}
                original={leftText}
                modified={rightText}
@@ -1,121 +0,0 @@
-/* @vitest-environment jsdom */
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import { beforeEach, describe, expect, it } from "vitest";
-import { usePreferences, getStoredPreferencesSnapshot } from "./preferences";
-
-const PREFERENCES_KEY = "clawhub-preferences";
-
-function PreferencesProbe() {
-  const { preferences, updatePreference, isAdvancedMode } = usePreferences();
-
-  return (
-    <div>
-      <div data-testid="density">{preferences.layoutDensity}</div>
-      <div data-testid="advanced">{String(isAdvancedMode)}</div>
-      <button
-        type="button"
-        onClick={() => updatePreference("advancedMode", !preferences.advancedMode)}
-      >
-        Toggle advanced
-      </button>
-    </div>
-  );
-}
-
-describe("preferences store", () => {
-  beforeEach(() => {
-    window.localStorage.clear();
-  });
-
-  it("returns a stable snapshot when storage has not changed", () => {
-    const first = getStoredPreferencesSnapshot();
-    const second = getStoredPreferencesSnapshot();
-
-    expect(first).toBe(second);
-    expect(first.layoutDensity).toBe("comfortable");
-  });
-
-  it("falls back to defaults when localStorage reads throw", () => {
-    const getItemSpy = vi
-      .spyOn(Storage.prototype, "getItem")
-      .mockImplementation(() => {
-        throw new DOMException("blocked", "SecurityError");
-      });
-
-    render(<PreferencesProbe />);
-
-    expect(screen.getByTestId("density").textContent).toBe("comfortable");
-    expect(screen.getByTestId("advanced").textContent).toBe("false");
-
-    getItemSpy.mockRestore();
-  });
-
-  it("resets to defaults when the preference key is cleared in another tab", () => {
-    window.localStorage.setItem(
-      PREFERENCES_KEY,
-      JSON.stringify({
-        advancedMode: true,
-        layoutDensity: "compact",
-      }),
-    );
-
-    render(<PreferencesProbe />);
-    expect(screen.getByTestId("advanced").textContent).toBe("true");
-    expect(screen.getByTestId("density").textContent).toBe("compact");
-
-    window.localStorage.removeItem(PREFERENCES_KEY);
-    act(() => {
-      const event = Object.assign(new Event("storage"), {
-        key: PREFERENCES_KEY,
-        newValue: null,
-        oldValue: JSON.stringify({
-          advancedMode: true,
-          layoutDensity: "compact",
-        }),
-        storageArea: window.localStorage,
-      });
-      window.dispatchEvent(event);
-    });
-
-    expect(screen.getByTestId("advanced").textContent).toBe("false");
-    expect(screen.getByTestId("density").textContent).toBe("comfortable");
-  });
-
-  it("re-renders cleanly after a preference update", () => {
-    window.localStorage.setItem(
-      PREFERENCES_KEY,
-      JSON.stringify({
-        advancedMode: false,
-      }),
-    );
-
-    render(<PreferencesProbe />);
-
-    expect(screen.getByTestId("advanced").textContent).toBe("false");
-
-    fireEvent.click(screen.getByRole("button", { name: /toggle advanced/i }));
-
-    expect(screen.getByTestId("advanced").textContent).toBe("true");
-    expect(JSON.parse(window.localStorage.getItem(PREFERENCES_KEY) ?? "{}")).toMatchObject({
-      advancedMode: true,
-    });
-  });
-
-  it("does not cache a preference change when storage writes fail", () => {
-    const setItemSpy = vi
-      .spyOn(Storage.prototype, "setItem")
-      .mockImplementation(() => {
-        throw new DOMException("quota", "QuotaExceededError");
-      });
-
-    render(<PreferencesProbe />);
-    expect(screen.getByTestId("advanced").textContent).toBe("false");
-
-    fireEvent.click(screen.getByRole("button", { name: /toggle advanced/i }));
-
-    expect(screen.getByTestId("advanced").textContent).toBe("false");
-    expect(window.localStorage.getItem(PREFERENCES_KEY)).toBeNull();
-
-    setItemSpy.mockRestore();
-  });
-});
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";

 const PREFERENCES_KEY = "clawhub-preferences";

@@ -66,95 +66,36 @@ const defaultPreferences: UserPreferences = {

 // Simple event emitter for cross-tab sync
 const listeners = new Set<() => void>();
-let cachedPreferencesRaw: string | null = null;
-let cachedPreferencesSnapshot: UserPreferences = defaultPreferences;
-let hasCachedPreferences = false;
-let removeStorageListener: (() => void) | null = null;
-
-function normalizePreferences(parsed: Partial<UserPreferences> | null): UserPreferences {
-  if (!parsed) return defaultPreferences;
-  return { ...defaultPreferences, ...parsed };
-}
-
-function parsePreferences(raw: string | null): UserPreferences {
-  if (!raw) return defaultPreferences;
-  try {
-    const parsed = JSON.parse(raw) as Partial<UserPreferences>;
-    return normalizePreferences(parsed);
-  } catch {
-    return defaultPreferences;
-  }
-}
-
-function readStoredPreferences(): UserPreferences {
-  if (typeof window === "undefined") return defaultPreferences;
-
-  try {
-    const stored = window.localStorage.getItem(PREFERENCES_KEY);
-    if (hasCachedPreferences && stored === cachedPreferencesRaw) {
-      return cachedPreferencesSnapshot;
-    }
-
-    cachedPreferencesRaw = stored;
-    cachedPreferencesSnapshot = parsePreferences(stored);
-    hasCachedPreferences = true;
-    return cachedPreferencesSnapshot;
-  } catch {
-    cachedPreferencesRaw = null;
-    cachedPreferencesSnapshot = defaultPreferences;
-    hasCachedPreferences = true;
-    return cachedPreferencesSnapshot;
-  }
-}

 function subscribe(listener: () => void) {
  listeners.add(listener);
-
-  if (typeof window !== "undefined" && !removeStorageListener) {
-    const handleStorage = (event: StorageEvent) => {
-      if (event.storageArea !== window.localStorage || event.key !== PREFERENCES_KEY) {
-        return;
-      }
-
-      cachedPreferencesRaw = event.newValue;
-      cachedPreferencesSnapshot = parsePreferences(event.newValue);
-      hasCachedPreferences = true;
-      notifyListeners();
-    };
-
-    window.addEventListener("storage", handleStorage);
-    removeStorageListener = () => {
-      window.removeEventListener("storage", handleStorage);
-      removeStorageListener = null;
-    };
-  }
-
-  return () => {
-    listeners.delete(listener);
-
-    if (listeners.size === 0 && removeStorageListener) {
-      removeStorageListener();
-    }
-  };
+  return () => listeners.delete(listener);
 }

 function notifyListeners() {
  listeners.forEach((listener) => listener());
 }

+function getStoredPreferences(): UserPreferences {
+  if (typeof window === "undefined") return defaultPreferences;
+  try {
+    const stored = window.localStorage.getItem(PREFERENCES_KEY);
+    if (!stored) return defaultPreferences;
+    const parsed = JSON.parse(stored) as Partial<UserPreferences>;
+    return { ...defaultPreferences, ...parsed };
+  } catch {
+    return defaultPreferences;
+  }
+}
+
 function savePreferences(prefs: UserPreferences) {
  if (typeof window === "undefined") return;
  try {
-    const serialized = JSON.stringify(prefs);
-    window.localStorage.setItem(PREFERENCES_KEY, serialized);
-    cachedPreferencesRaw = serialized;
-    cachedPreferencesSnapshot = prefs;
-    hasCachedPreferences = true;
+    window.localStorage.setItem(PREFERENCES_KEY, JSON.stringify(prefs));
+    notifyListeners();
  } catch {
    // Storage might be full or disabled
  }
-
-  notifyListeners();
 }

 // Server snapshot for SSR
@@ -165,7 +106,7 @@ function getServerSnapshot(): UserPreferences {
 export function usePreferences() {
  const preferences = useSyncExternalStore(
    subscribe,
-    readStoredPreferences,
+    getStoredPreferences,
    getServerSnapshot
  );

@@ -173,13 +114,13 @@ export function usePreferences() {
    key: K,
    value: UserPreferences[K]
  ) => {
-    const current = readStoredPreferences();
+    const current = getStoredPreferences();
    const updated = { ...current, [key]: value };
    savePreferences(updated);
  }, []);

  const updatePreferences = useCallback((updates: Partial<UserPreferences>) => {
-    const current = readStoredPreferences();
+    const current = getStoredPreferences();
    const updated = { ...current, ...updates };
    savePreferences(updated);
  }, []);
@@ -222,4 +163,3 @@ export function usePreferences() {
 }

 export { defaultPreferences };
-export { readStoredPreferences as getStoredPreferencesSnapshot };
@@ -10,15 +10,13 @@ import Header from "../components/Header";
 import { getSiteDescription, getSiteMode, getSiteName, getSiteUrlForMode } from "../lib/site";
 import appCss from "../styles.css?url";

-const OG_IMAGE_VERSION = "20260420-12";
-
 export const Route = createRootRoute({
  head: () => {
    const mode = getSiteMode();
    const siteName = getSiteName(mode);
    const siteDescription = getSiteDescription(mode);
    const siteUrl = getSiteUrlForMode(mode);
-    const ogImage = `${siteUrl}/og.png?v=${OG_IMAGE_VERSION}`;
+    const ogImage = `${siteUrl}/og.png`;

    return {
      meta: [
@@ -119,11 +117,6 @@ function RootDocument({ children }: { children: React.ReactNode }) {
    <html lang="en">
      <head>
        <HeadContent />
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `(function(){try{var d=document.documentElement,s='clawhub-theme-selection',k='clawhub-theme',n='clawhub-theme-name',l='clawdhub-theme';var sel;try{var raw=localStorage.getItem(s);if(raw){sel=JSON.parse(raw)}}catch(e){}if(!sel){var m=localStorage.getItem(k),t=localStorage.getItem(n);if(m||t){sel={theme:t||'claw',mode:m||'system'}}else{var lg=localStorage.getItem(l);if(lg){var map={dark:'dark',light:'light',system:'system',defaultTheme:'dark',docsTheme:'light',lightTheme:'dark',landingTheme:'dark',newTheme:'dark',openknot:'dark',fieldmanual:'dark',clawdash:'light'};sel={theme:'claw',mode:map[lg]||'system'}}}}if(!sel)sel={theme:'claw',mode:'system'};var themes=['claw'],modes=['system','light','dark'];if(themes.indexOf(sel.theme)<0)sel.theme='claw';if(modes.indexOf(sel.mode)<0)sel.mode='system';var resolved=sel.mode==='system'?(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):sel.mode;d.dataset.theme=resolved;d.dataset.themeResolved=resolved;d.dataset.themeMode=sel.mode;d.dataset.themeFamily=sel.theme;if(resolved==='dark')d.classList.add('dark');else d.classList.remove('dark')}catch(e){}})()`,
-          }}
-        />
      </head>
      <body>
        <AppProviders>
@@ -7,10 +7,12 @@ import {
  ChevronRight,
  Code2,
  Download,
-  Package,
+  Layers,
  Search,
+  Shield,
  Star,
  Users,
+  Zap,
 } from "lucide-react";
 import { api } from "../../convex/_generated/api";
 import { SoulCard } from "../components/SoulCard";
@@ -438,8 +440,7 @@ function SkillsHome() {
            />
            <kbd>/</kbd>
            <button type="submit" className="home-v2-search-go">
-              <span className="home-v2-search-go-label">Search</span>{" "}
-              <ArrowRight size={16} />
+              Search <ArrowRight size={16} />
            </button>
          </form>
        </div>
@@ -451,28 +452,28 @@ function SkillsHome() {
            className="home-v2-suggestion"
            onClick={() => handleSuggestion("self-improving agent")}
          >
-            self-improving agent
+            <Zap size={13} /> self-improving agent
          </button>
          <button
            type="button"
            className="home-v2-suggestion"
            onClick={() => handleSuggestion("GitHub integration")}
          >
-            GitHub integration
+            <Code2 size={13} /> GitHub integration
          </button>
          <button
            type="button"
            className="home-v2-suggestion"
            onClick={() => handleSuggestion("security soul")}
          >
-            security soul
+            <Shield size={13} /> security soul
          </button>
          <button
            type="button"
            className="home-v2-suggestion"
            onClick={() => handleSuggestion("dashboard builder")}
          >
-            dashboard builder
+            <Layers size={13} /> dashboard builder
          </button>
        </div>
      </section>
@@ -501,6 +502,9 @@ function SkillsHome() {
                  className="home-v2-c-card"
                >
                  <div className="home-v2-c-head">
+                    <div className="home-v2-c-icon">
+                      <Zap size={18} />
+                    </div>
                    <div className="home-v2-c-meta">
                      <div className="home-v2-c-name">
                        {entry.skill.displayName || entry.skill.slug}
@@ -510,7 +514,9 @@ function SkillsHome() {
                      </div>
                    </div>
                  </div>
-                  <span className="home-v2-c-tag">Skill</span>
+                  <span className="home-v2-c-tag">
+                    <Zap size={11} /> Skill
+                  </span>
                  <div className="home-v2-c-desc">
                    {entry.skill.summary || "A fresh skill bundle."}
                  </div>
@@ -539,6 +545,9 @@ function SkillsHome() {
                  className="home-v2-c-card"
                >
                  <div className="home-v2-c-head">
+                    <div className="home-v2-c-icon">
+                      <Zap size={18} />
+                    </div>
                    <div className="home-v2-c-meta">
                      <div className="home-v2-c-name">
                        {entry.skill.displayName || entry.skill.slug}
@@ -548,7 +557,9 @@ function SkillsHome() {
                      </div>
                    </div>
                  </div>
-                  <span className="home-v2-c-tag">Skill</span>
+                  <span className="home-v2-c-tag">
+                    <Zap size={11} /> Skill
+                  </span>
                  <div className="home-v2-c-desc">
                    {entry.skill.summary || "A fresh skill bundle."}
                  </div>
@@ -591,7 +602,7 @@ function SkillsHome() {
            className="home-v2-cat-item"
          >
            <div className="home-v2-cat-icon">
-              <Package size={20} />
+              <Zap size={20} />
            </div>
            <div className="home-v2-cat-text">
              <div className="home-v2-cat-name">Skills</div>
@@ -9,7 +9,9 @@ import {
  Moon,
  RotateCcw,
  Settings2,
+  Sparkles,
  Sun,
+  Zap,
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -493,7 +495,8 @@ export function Settings() {

                {/* Code & Content Section - Advanced */}
                <div className="space-y-4">
-                  <Label className="text-sm font-semibold text-[color:var(--ink)]">
+                  <Label className="text-sm font-semibold text-[color:var(--ink)] flex items-center gap-2">
+                    <Sparkles size={14} className="text-[color:var(--accent)]" />
                    Code &amp; Content
                  </Label>
                  
@@ -530,7 +533,10 @@ export function Settings() {
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="full">
-                            Full
+                            <span className="flex items-center gap-2">
+                              <Zap size={14} />
+                              Full
+                            </span>
                          </SelectItem>
                          <SelectItem value="reduced">Reduced</SelectItem>
                          <SelectItem value="none">None</SelectItem>
@@ -598,7 +604,8 @@ export function Settings() {

                {/* Experimental Features - Advanced */}
                <div className="space-y-4">
-                  <Label className="text-sm font-semibold text-[color:var(--ink)]">
+                  <Label className="text-sm font-semibold text-[color:var(--ink)] flex items-center gap-2">
+                    <Sparkles size={14} className="text-[color:var(--gold)]" />
                    Experimental
                  </Label>
                  
@@ -8,11 +8,11 @@ import {
  MessageSquare,
  Package,
  Plug,
-  RefreshCw,
  Search,
  Shield,
  Wrench,
  X,
+  Zap,
 } from "lucide-react";
 import type { RefObject } from "react";
 import { useMemo } from "react";
@@ -64,7 +64,7 @@ const CATEGORY_ICONS: Record<string, React.ReactNode> = {
  "dev-tools": <Wrench size={13} />,
  data: <Database size={13} />,
  security: <Shield size={13} />,
-  automation: <RefreshCw size={13} />,
+  automation: <Zap size={13} />,
  other: <Package size={13} />,
 };

@@ -93,13 +93,13 @@
  color-scheme: dark;

  /* OpenClaw — black, white, red brand palette */
-  --bg: #060608;
-  --bg-soft: #0d0d0f;
-  --bg-glow-1: #101012;
-  --bg-glow-2: #141416;
-  --surface: #0e0e10;
-  --surface-muted: #131315;
-  --nav-bg: rgba(6, 6, 8, 0.96);
+  --bg: #0a0a0a;
+  --bg-soft: #111111;
+  --bg-glow-1: #141414;
+  --bg-glow-2: #181818;
+  --surface: #121212;
+  --surface-muted: #171717;
+  --nav-bg: rgba(10, 10, 10, 0.96);
  --ink: #fafafa;
  --ink-soft: #a1a1a1;
  --accent: #dc2626;
@@ -130,7 +130,7 @@

  /* Form controls — crisp, modern */
  --input-border: rgba(255, 255, 255, 0.1);
-  --input-bg: rgba(14, 14, 16, 0.9);
+  --input-bg: rgba(18, 18, 18, 0.9);
  --input-placeholder: rgba(161, 161, 161, 0.7);
  --input-focus-border: rgba(220, 38, 38, 0.5);
  --input-focus-ring: rgba(220, 38, 38, 0.2);
@@ -141,7 +141,7 @@
  --active-bg: rgba(220, 38, 38, 0.1);

  /* Overlay */
-  --overlay-bg: rgba(5, 5, 7, 0.75);
+  --overlay-bg: rgba(9, 9, 11, 0.75);

  /* Shadows — refined depth */
  --shadow-dialog: 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
@@ -173,12 +173,12 @@
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;

-  /* Unified radius — one consistent size everywhere */
-  --r-lg: 8px;
+  /* Modern rounded corners — polished but efficient */
+  --r-lg: 12px;
  --r-md: 8px;
-  --r-sm: 8px;
-  --r-xs: 8px;
-  --r-pill: 8px;
+  --r-sm: 6px;
+  --r-xs: 4px;
+  --r-pill: 9999px;

  /* Modern typography — clean and readable */
  --font-display: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
@@ -189,11 +189,11 @@
 /* Light theme — OpenClaw black, white, red */
 [data-theme-family="claw"][data-theme-resolved="light"] {
  color-scheme: light;
-  --bg: #faf6f1;
-  --bg-soft: #f5f1ec;
-  --surface: #fffcf8;
-  --surface-muted: #f8f5f0;
-  --nav-bg: rgba(250, 246, 241, 0.96);
+  --bg: #fafafa;
+  --bg-soft: #f5f5f5;
+  --surface: #ffffff;
+  --surface-muted: #f8f8f8;
+  --nav-bg: rgba(250, 250, 250, 0.96);
  --ink: #0a0a0a;
  --ink-soft: #525252;
  --accent: #dc2626;
@@ -215,7 +215,7 @@

  /* Form controls — light */
  --input-border: rgba(0, 0, 0, 0.12);
-  --input-bg: #fffcf8;
+  --input-bg: #ffffff;
  --input-placeholder: rgba(82, 82, 82, 0.6);
  --input-focus-border: rgba(220, 38, 38, 0.5);
  --input-focus-ring: rgba(220, 38, 38, 0.15);
@@ -226,7 +226,7 @@
  --active-bg: rgba(220, 38, 38, 0.08);

  /* Overlay — light */
-  --overlay-bg: rgba(250, 246, 241, 0.75);
+  --overlay-bg: rgba(250, 250, 250, 0.75);

  /* Shadows — light */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
@@ -241,11 +241,11 @@
 [data-theme-family="hub"] {
  --page-max: 1536px;
  --page-narrow: 900px;
-  --r-lg: 8px;
-  --r-md: 8px;
-  --r-sm: 8px;
-  --r-xs: 8px;
-  --r-pill: 8px;
+  --r-lg: 2px;
+  --r-md: 2px;
+  --r-sm: 1px;
+  --r-xs: 1px;
+  --r-pill: 2px;
  --fs-xs: 0.72rem;
  --fs-sm: 0.82rem;
  --fs-base: 0.88rem;
@@ -263,13 +263,13 @@

 [data-theme-family="hub"][data-theme-resolved="dark"] {
  color-scheme: dark;
-  --bg: #060608;
-  --bg-soft: #0d0d0f;
-  --bg-glow-1: #0d0d0f;
-  --bg-glow-2: #0d0d0f;
-  --surface: #101012;
-  --surface-muted: #161618;
-  --nav-bg: rgba(6, 6, 8, 0.95);
+  --bg: #0a0a0a;
+  --bg-soft: #111111;
+  --bg-glow-1: #111111;
+  --bg-glow-2: #111111;
+  --surface: #141414;
+  --surface-muted: #1a1a1a;
+  --nav-bg: rgba(10, 10, 10, 0.95);
  --ink: #e0e0e0;
  --ink-soft: #818181;
  --accent: #ef4444;
@@ -294,25 +294,25 @@
  --status-error-bg: rgba(239, 68, 68, 0.12);
  --status-error-fg: #f87171;
  --input-border: rgba(255, 255, 255, 0.12);
-  --input-bg: rgba(16, 16, 18, 0.96);
+  --input-bg: rgba(20, 20, 20, 0.96);
  --input-placeholder: rgba(184, 184, 184, 0.68);
  --input-focus-border: rgba(239, 68, 68, 0.48);
  --input-focus-ring: rgba(239, 68, 68, 0.16);
  --label-fg: rgba(224, 224, 224, 0.78);
  --hover-bg: rgba(255, 255, 255, 0.03);
  --active-bg: rgba(239, 68, 68, 0.1);
-  --overlay-bg: rgba(6, 6, 8, 0.66);
+  --overlay-bg: rgba(10, 10, 10, 0.66);
  --shadow-dialog: 0 24px 50px rgba(0, 0, 0, 0.35);
  --shadow-card: none;
 }

 [data-theme-family="hub"][data-theme-resolved="light"] {
  color-scheme: light;
-  --bg: #ece8e3;
-  --bg-soft: #e4e0db;
-  --surface: #fdfaf6;
-  --surface-muted: #f5f1ec;
-  --nav-bg: rgba(236, 232, 227, 0.95);
+  --bg: #f0f0f0;
+  --bg-soft: #e8e8e8;
+  --surface: #ffffff;
+  --surface-muted: #f5f5f5;
+  --nav-bg: rgba(240, 240, 240, 0.95);
  --ink: #0a0a0a;
  --ink-soft: #555555;
  --accent: #dc2626;
@@ -337,14 +337,14 @@
  --status-error-bg: rgba(220, 38, 38, 0.1);
  --status-error-fg: #b91c1c;
  --input-border: rgba(0, 0, 0, 0.18);
-  --input-bg: rgba(253, 250, 246, 0.94);
+  --input-bg: rgba(255, 255, 255, 0.94);
  --input-placeholder: rgba(85, 85, 85, 0.64);
  --input-focus-border: rgba(220, 38, 38, 0.42);
  --input-focus-ring: rgba(220, 38, 38, 0.12);
  --label-fg: rgba(10, 10, 10, 0.72);
  --hover-bg: rgba(0, 0, 0, 0.03);
  --active-bg: rgba(220, 38, 38, 0.08);
-  --overlay-bg: rgba(236, 232, 227, 0.7);
+  --overlay-bg: rgba(240, 240, 240, 0.7);
  --shadow-dialog: 0 24px 50px rgba(0, 0, 0, 0.12);
  --shadow-card: none;
 }
@@ -640,15 +640,15 @@ code {
 }

 .site-footer {
-  padding: var(--space-3) var(--space-5);
+  padding: var(--space-6) var(--space-5);
  margin-top: auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
 }

 .site-footer-inner {
-  width: 100%;
-  padding: 0 var(--space-5);
+  max-width: var(--page-max);
+  margin: 0 auto;
 }

 .site-footer-divider {
@@ -700,7 +700,8 @@ code {
 }

 .navbar-inner {
-  width: 100%;
+  max-width: var(--page-max);
+  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  flex-direction: column;
@@ -912,11 +913,6 @@ code {
  place-items: center;
  overflow: hidden;
  background: transparent;
-  box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent),
-    0 1px 2px rgba(0, 0, 0, 0.10),
-    0 2px 6px rgba(0, 0, 0, 0.05);
-  transition: box-shadow 0.2s ease;
 }

 .brand-mark img {
@@ -924,7 +920,6 @@ code {
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
-  transform: translateZ(0);
 }

 .nav-links {
@@ -981,39 +976,6 @@ code {
  color: var(--ink-soft);
 }

-.mobile-nav-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.mobile-nav-brand-mark {
-  width: 28px;
-  height: 28px;
-  border-radius: var(--r-sm);
-  display: grid;
-  place-items: center;
-  overflow: hidden;
-  background: transparent;
-  box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent),
-    0 1px 2px rgba(0, 0, 0, 0.08);
-  flex-shrink: 0;
-}
-
-.mobile-nav-brand-mark-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: var(--r-sm);
-  transform: translateZ(0);
-}
-
-.mobile-nav-brand-name {
-  display: inline-flex;
-  min-width: 0;
-}
-
 .mobile-nav-link {
  display: inline-flex;
  align-items: center;
@@ -2031,7 +1993,7 @@ code {

 .grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-width: 100%;
 }
@@ -3394,7 +3356,7 @@ code {
  border: 1px solid var(--line);
  background: var(--surface-muted);
  text-align: right;
-  min-width: 0;
+  min-width: 150px;
 }

 .skill-version-label {
@@ -3445,7 +3407,7 @@ code {
 .skill-hero-panels {
  display: grid;
  gap: 14px;
-  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 }

 .skill-panel {
@@ -3603,10 +3565,6 @@ code {
    max-height: 220px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
-
-  .diff-monaco {
-    max-height: 300px;
-  }
 }

 .diff-pill {
@@ -3761,15 +3719,6 @@ code {
  border: 1px solid var(--line);
  background: var(--surface-muted);
  align-self: flex-start;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  max-width: 100%;
-  flex-shrink: 0;
-}
-
-.tab-header::-webkit-scrollbar {
-  display: none;
 }

 .tab-button {
@@ -3781,8 +3730,6 @@ code {
  color: var(--ink-soft);
  cursor: pointer;
  min-height: 44px;
-  white-space: nowrap;
-  flex-shrink: 0;
 }

 .tab-button.is-active {
@@ -4211,18 +4158,9 @@ code {
  }

  .skill-hero-cta {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 8px;
    align-items: flex-start;
  }

-  .skill-hero-cta .btn {
-    width: auto;
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
  .tag-form {
    grid-template-columns: 1fr;
    align-items: stretch;
@@ -4264,14 +4202,6 @@ code {
    row-gap: 8px;
  }

-  .browse-search-input {
-    font-size: 16px;
-  }
-
-  .navbar-search-input {
-    font-size: 16px;
-  }
-
 }

@media (max-width: 520px) {
@@ -4337,7 +4267,7 @@ code {
  }

  .site-footer {
-    padding: 0 18px 18px;
+    padding: 0 18px 36px;
  }
 }

@@ -5988,12 +5918,7 @@ html.theme-transition::view-transition-new(theme) {
  }

  .skill-hero-title h1 {
-    font-size: 1.25rem;
-    line-height: 1.3;
-  }
-
-  .skill-hero-note {
-    font-size: 0.82rem;
+    font-size: 1.35rem;
  }

  .card {
@@ -6004,43 +5929,6 @@ html.theme-transition::view-transition-new(theme) {
    padding: 16px;
  }

-  .detail-meta-bar {
-    padding: var(--space-3);
-  }
-
-  .meta-bar-stats {
-    gap: var(--space-3);
-  }
-
-  .skill-hero-sidebar-meta {
-    min-width: 0;
-  }
-
-  .file-viewer {
-    padding: 12px;
-  }
-
-  .file-viewer-body {
-    max-height: 260px;
-  }
-
-  .file-list-body {
-    max-height: 200px;
-  }
-
-  .comment-entry {
-    padding: var(--space-2);
-  }
-
-  .markdown pre {
-    font-size: 0.78rem;
-  }
-
-  .markdown img {
-    max-width: 100%;
-    height: auto;
-  }
-
  .scan-result-row {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
@@ -6680,8 +6568,6 @@ html.theme-transition::view-transition-new(theme) {
@media (max-width: 560px) {
  .skill-list-item {
    grid-template-columns: 1fr;
-    padding: 14px 16px;
-    gap: 12px;
  }

  .marketplace-icon {
@@ -6778,7 +6664,6 @@ html.theme-transition::view-transition-new(theme) {
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
-  min-height: 44px;
  color: var(--ink-soft);
 }

@@ -6979,21 +6864,7 @@ html.theme-transition::view-transition-new(theme) {

@media (max-width: 760px) {
  .browse-page {
-    padding: 16px 16px 40px;
-  }
-
-  .browse-page-search {
-    height: 44px;
-  }
-
-  .browse-results-toolbar {
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .browse-view-btn {
-    min-height: 44px;
-    padding: var(--space-2) var(--space-3);
+    padding: 16px 18px 40px;
  }

  .browse-layout {
@@ -7241,16 +7112,14 @@ html.theme-transition::view-transition-new(theme) {
 .footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
-  gap: var(--space-3);
-  padding: var(--space-3) 0 var(--space-2);
-  text-align: center;
+  gap: var(--space-5);
+  padding: var(--space-6) 0 var(--space-5);
 }

 .footer-col {
  display: flex;
  flex-direction: column;
-  align-items: center;
-  gap: var(--space-1);
+  gap: var(--space-2);
 }

 .footer-col-title {
@@ -7259,7 +7128,7 @@ html.theme-transition::view-transition-new(theme) {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
-  margin-bottom: 2px;
+  margin-bottom: var(--space-1);
 }

 .footer-col a,
@@ -7274,7 +7143,7 @@ html.theme-transition::view-transition-new(theme) {

 .footer-bottom {
  border-top: 1px solid var(--line);
-  padding: var(--space-2) 0;
+  padding: var(--space-4) 0;
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: 0.015em;
@@ -7296,14 +7165,14 @@ html.theme-transition::view-transition-new(theme) {
@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-3);
+    gap: 20px;
  }
 }

@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
-    gap: var(--space-3);
+    gap: 20px;
  }
 }

@@ -7969,7 +7838,7 @@ html.theme-transition::view-transition-new(theme) {
  height: 1.15em;
  display: flex;
  align-items: center;
-  justify-content: left;
+  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
 }
@@ -8239,24 +8108,6 @@ html.theme-transition::view-transition-new(theme) {
  color: var(--hv2-accent);
 }

-@media (max-width: 760px) {
-  .home-v2-suggestions {
-    gap: 6px;
-    margin-top: 12px;
-  }
-
-  .home-v2-suggestions-label {
-    font-size: 12px;
-    margin-right: 2px;
-  }
-
-  .home-v2-suggestion {
-    font-size: 12px;
-    padding: 5px 10px;
-    gap: 4px;
-  }
-}
-
 /* ═══ CAROUSEL ═══ */
 .home-v2-carousel-section {
  padding: 48px 0 0;
@@ -8838,12 +8689,6 @@ html.theme-transition::view-transition-new(theme) {
    padding: 20px;
    gap: 16px;
  }
-  .home-v2-search-go-label {
-    display: none;
-  }
-  .home-v2-search-go {
-    padding: 13px 16px;
-  }
 }

 /* ═══ HOME V2 — Full-width overrides ═══ */
@@ -8860,7 +8705,57 @@ html.theme-transition::view-transition-new(theme) {
  max-width: none;
 }

-/* ═══ HOME V2 — Layout ═══ */
+/* ═══ MINIMAL FOOTER (home-v2 pages) ═══ */
+
+/* Fix: use :has() since main is wrapped in ErrorBoundary */
+.app-shell:has(.home-v2-main) > .site-footer .footer-grid {
+  display: none;
+}
+.app-shell:has(.home-v2-main) > .site-footer .site-footer-divider {
+  display: none;
+}
+.app-shell:has(.home-v2-main) > .site-footer {
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding: 0;
+  background: transparent;
+}
+.app-shell:has(.home-v2-main) > .site-footer .site-footer-inner {
+  max-width: none;
+  padding: 20px 48px;
+}
+.app-shell:has(.home-v2-main) > .site-footer .footer-bottom {
+  padding: 0;
+  margin: 0;
+  border: none;
+  font-size: 13px;
+  color: #555;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.app-shell:has(.home-v2-main) > .site-footer .footer-bottom a {
+  color: #777;
+}
+.app-shell:has(.home-v2-main) > .site-footer .footer-bottom a:hover {
+  color: #aaa;
+}
+
+/* ═══ HOME V2 — Page-max constraint + full-bleed background ═══ */
+.app-shell:has(.home-v2-main) {
+  background: #060608;
+}
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) {
+  background: #faf6f1;
+}
+
+/* ═══ HOME V2 — Full-width nav override ═══ */
+.app-shell:has(.home-v2-main) > header,
+.app-shell:has(.home-v2-main) > nav,
+.app-shell:has(.home-v2-main) .site-header,
+.app-shell:has(.home-v2-main) .site-header-inner {
+  max-width: none;
+  width: 100%;
+}

 /* ═══ HOME V2 — Wider search + even dot spacing ═══ */
 .home-v2-search-container {
@@ -8884,6 +8779,10 @@ html.theme-transition::view-transition-new(theme) {
  margin: 0 16px;
 }

+/* Override navbar max-width on home v2 */
+.app-shell:has(.home-v2-main) .navbar-inner {
+  max-width: none;
+}

 /* ═══════════════════════════════════════════════════════════════════════
   HOME V2 — Cream / Peach / Tan Refinement (light + dark)
@@ -9126,6 +9025,55 @@ html.theme-transition::view-transition-new(theme) {
  border-top-color: rgba(170, 125, 80, 0.12);
 }

+/* Light — footer */
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) > .site-footer {
+  border-top-color: rgba(170, 125, 80, 0.15);
+}
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) > .site-footer .footer-bottom {
+  color: #9c8b7a;
+}
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) > .site-footer .footer-bottom a {
+  color: #6b5c4e;
+}
+
+/* Light — nav/header blends with cream bg */
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) .navbar {
+  background: rgba(250, 246, 241, 0.95);
+}
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) .brand,
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) .brand-name {
+  color: #1a1410;
+}
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) .navbar-search-home {
+  background: #fff8f2;
+  border-color: rgba(170, 125, 80, 0.2);
+  color: #6b5c4e;
+}
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) .navbar-search-home:hover {
+  border-color: rgba(170, 125, 80, 0.3);
+  background: #fff4ea;
+  color: #1a1410;
+}
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) .navbar-tab {
+  color: #6b5c4e;
+}
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) .navbar-tab:hover {
+  color: #1a1410;
+  background: rgba(160, 115, 72, 0.07);
+}
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) .navbar-tab.active,
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) .navbar-tab[data-status="active"] {
+  color: #1a1410;
+  background: rgba(160, 115, 72, 0.1);
+}
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) .navbar-tab-secondary {
+  opacity: 1;
+  color: #7d6d5f;
+}
+[data-theme-resolved="light"] .app-shell:has(.home-v2-main) .navbar-tab-secondary:hover {
+  color: #1a1410;
+}
+
 /* Light — carousel nav arrows */
 [data-theme-resolved="light"] .home-v2-carousel-nav button {
  background: #fff8f2;
@@ -9186,6 +9134,44 @@ html.theme-transition::view-transition-new(theme) {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
 }

+/* Home v2 nav contrast */
+[data-theme-resolved="dark"] .app-shell:has(.home-v2-main) .navbar {
+  background: rgba(6, 6, 8, 0.9);
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+[data-theme-resolved="dark"] .app-shell:has(.home-v2-main) .brand,
+[data-theme-resolved="dark"] .app-shell:has(.home-v2-main) .brand-name {
+  color: rgba(255, 255, 255, 0.94);
+}
+[data-theme-resolved="dark"] .app-shell:has(.home-v2-main) .navbar-search-home {
+  background: rgba(255, 255, 255, 0.03);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.72);
+}
+[data-theme-resolved="dark"] .app-shell:has(.home-v2-main) .navbar-search-home:hover {
+  border-color: rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.9);
+}
+[data-theme-resolved="dark"] .app-shell:has(.home-v2-main) .navbar-tab {
+  color: rgba(255, 255, 255, 0.74);
+}
+[data-theme-resolved="dark"] .app-shell:has(.home-v2-main) .navbar-tab:hover {
+  color: rgba(255, 255, 255, 0.96);
+  background: rgba(255, 255, 255, 0.04);
+}
+[data-theme-resolved="dark"] .app-shell:has(.home-v2-main) .navbar-tab.active,
+[data-theme-resolved="dark"] .app-shell:has(.home-v2-main) .navbar-tab[data-status="active"] {
+  color: rgba(255, 255, 255, 0.98);
+  background: rgba(255, 255, 255, 0.06);
+}
+[data-theme-resolved="dark"] .app-shell:has(.home-v2-main) .navbar-tab-secondary {
+  opacity: 1;
+  color: rgba(255, 255, 255, 0.68);
+}
+[data-theme-resolved="dark"] .app-shell:has(.home-v2-main) .navbar-tab-secondary:hover {
+  color: rgba(255, 255, 255, 0.9);
+}

 /* ═══════════════════════════════════════════════════════════════════════
   HOME V2 — Semi-rounded radius (Claw × Hub midpoint)
@@ -9193,19 +9179,45 @@ html.theme-transition::view-transition-new(theme) {
   Claw: 6/8/12  •  Hub: 1/2/2  •  Ours: 4/7/10
   ═══════════════════════════════════════════════════════════════════════ */

-/* Override the home-v2 radius tokens — unified 8px */
+/* Override the home-v2 radius tokens */
 .home-v2-main {
-  --hv2-radius-sm: 8px;
-  --hv2-radius-md: 8px;
-  --hv2-radius-lg: 8px;
+  --hv2-radius-sm: 4px;
+  --hv2-radius-md: 7px;
+  --hv2-radius-lg: 10px;
 }

-.home-v2-search-bar { border-radius: 8px; }
-.home-v2-search-go { border-radius: 8px; }
-.home-v2-search-bar kbd { border-radius: 8px; }
-.home-v2-c-icon { border-radius: 8px; }
-.home-v2-c-tag { border-radius: 8px; }
-.home-v2-cat-icon { border-radius: 8px; }
+/* Search bar — was 16px, now semi-rounded */
+.home-v2-search-bar {
+  border-radius: 10px;
+}
+/* Search button — was 12px */
+.home-v2-search-go {
+  border-radius: 7px;
+}
+/* kbd badge — was 5px */
+.home-v2-search-bar kbd {
+  border-radius: 3px;
+}
+
+/* Carousel cards — picks up var(--hv2-radius-lg) = 10px ✓ */
+/* Trending cards — picks up var(--hv2-radius-lg) = 10px ✓ */
+
+/* Carousel card icon — was 10px */
+.home-v2-c-icon {
+  border-radius: 7px;
+}
+
+/* Tag pills — was 100px (full pill), bring to semi-rounded pill */
+.home-v2-c-tag {
+  border-radius: 20px;
+}
+
+/* Category icon — was 11px */
+.home-v2-cat-icon {
+  border-radius: 7px;
+}
+
+/* Install buttons — picks up var(--hv2-radius-sm) = 4px ✓ */

 /* Suggestion pills — were likely pill-shaped, soften */
 .home-v2-suggestion {
Author	SHA1	Message	Date
Val AlexanderandClaude Opus 4.6	fec5db744c	fix: clean up slot timers on unmount, fix about-grid specificity Add useEffect cleanup to clear slot machine timers/intervals when the home route unmounts mid-animation. Fix about-grid media query specificity by including .about-panel-categories .about-grid to override the higher-specificity base rule. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-18 16:04:53 -05:00
Val AlexanderandClaude Opus 4.6	cb75011244	feat: tune slot machine odds to 1/25 any jackpot, 1/100 Hack jackpot Replace pure random picks with controlled probability: 4% chance of any jackpot per spin, with 25% of jackpots being Hack (= 1% overall). Non-jackpot spins re-roll accidental triple matches to keep odds exact. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-18 16:02:25 -05:00
Val AlexanderandClaude Opus 4.6	18b23886ab	feat: add cooldown, longer celebration, and Hack x3 lobster jackpot - 18s cooldown after a win, 3s after a loss to prevent spam - Win celebration extended to 10s for screenshot opportunities - Hack x3 jackpot triggers aquatic theme: cyan/teal text glow, ocean-colored confetti with bubble and claw particles, and the lobster logo fades in behind the headline Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-18 15:54:14 -05:00
copilot-swe-agent[bot]andBunsDev	beb50f4b49	Merge remote-tracking branch 'origin/okcode/about-page-refresh' into okcode/about-page-refresh Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com>	2026-04-18 20:53:19 +00:00
copilot-swe-agent[bot]andBunsDev	623a414b9b	Merge remote-tracking branch 'origin/staging' into okcode/about-page-refresh # Conflicts: # src/routes/about.tsx # src/styles.css Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com>	2026-04-18 20:49:49 +00:00
Val AlexanderandClaude Opus 4.6	91c7e44031	feat: slot machine Easter egg on hero label triple-click Triple-clicking "BUILT BY THE COMMUNITY" triggers a casino-style slot machine across all 3 headline words. Reels spin and stop sequentially with a 1/13 jackpot chance. Winning fires a confetti celebration with golden text glow. Auto-resets after the animation completes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-18 15:47:09 -05:00
Val AlexanderandClaude Opus 4.6	850fc9c78e	fix: use :is(h2, h3) selector for about-rule-card headings The /souls page reuses about-rule-card with <h2> elements. Using :is(h2, h3) ensures both heading levels get styled consistently. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-18 15:40:43 -05:00
Val AlexanderandClaude Opus 4.6	f5ec0882d5	style: widen navbar search bar and polish hero section Let the search bar span the full width between brand and theme toggle by removing the oversized right-column minimum and theme-toggle min-width. Widen the hero search container, subtitle, and tighten vertical padding for a sleeker feel. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-18 15:40:08 -05:00
Val AlexanderandClaude Opus 4.6	b2e751c5fc	consolidate logo assets: delete SVGs, use only PNGs with transparent bg - Delete public/logo.svg, public/og.svg, src/logo.svg (dead/unused SVGs) - Remove logo.svg favicon link from __root.tsx (favicon.ico remains) - Remove white backgrounds from clawd-logo.png and clawd-mark.png - Convert white strokes to dark (#1a0808), defringe antialiased edges - Regenerate logo192.png, logo512.png, favicon.ico from clean sources - Only canonical logo files are now clawd-logo.png and clawd-mark.png Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-18 15:13:34 -05:00
Val AlexanderandClaude Opus 4.6	4c8032bb97	fix: remove white backgrounds from all logo assets - Remove white backgrounds from clawd-logo.png, clawd-mark.png, logo192.png, logo512.png — now transparent PNGs - Convert white strokes to dark (#1a0808) in both PNGs and logo.svg so segments separate cleanly on any background - Defringe antialiased edges to eliminate white halos - Regenerate favicon.ico from transparent source - Update manifest.json background_color from #ffffff to #0a0a0a Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-18 15:00:51 -05:00
Val AlexanderandClaude Opus 4.6	2c435a3d7b	fix: use h3 for card titles to fix heading hierarchy (WCAG 1.3.1) Change rejection category card titles from <h2> to <h3> since the parent section already uses <h2> for "Immediate rejection categories". Updates the matching CSS selector from .about-rule-card h2 to h3. Also adds tests for renderWithInlineCode helper covering plain text, single/multiple code spans, empty input, and code-only strings. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-18 14:20:44 -05:00
Val AlexanderandClaude Opus 4.6	1f990cf66d	improve about page rejection categories: add icons, fix grid, polish cards - Add lucide-react icons to each rejection category card for visual scanning - Fix unbalanced grid layout by removing featured card sizing, using clean 2/3-col grid - Fix broken hover transitions (var(--transition-fast) was undefined outside reduced-motion) - Add lift-on-hover effect and icon glow matching home page card patterns - Render backtick-wrapped text as styled inline code elements - Improve description text contrast from ~3.5:1 to ~4.8:1 (WCAG AA) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-18 14:04:41 -05:00