feat: interactive logo, dual-mode syntax theme, rainbow inline code

PlatonicLogo:
- Drag-to-spin with quaternion rotation and momentum physics
- Click faces for actions (next/prev shape, play/pause, spin, see-through)
- Preferences persisted to localStorage, auto-resume after 5s inactivity
- Morph scale shrink during transitions to prevent face overlap
- Translucent see-through mode with chroma boost, hover-to-opaque per face
- Light mode face darkening via color-mix to compensate for white bleed
- Touch support, pre-hydration 3D tilt, nav logo hidden on first paint

Syntax highlighting:
- Dual-mode chromatic tokens: warm light (blue/purple/green/red) vs cool dark
- Tagged template literal and import binding detection
- Regenerated CVD-optimized light palette at L=0.64 via qlab

Homepage & styling:
- Mobile latest post card above logo, centered
- Rainbow gradient inline code tags with 3x dark mode intensity
- Darkened textMuted for better light mode emdash/byline contrast
- Button > p margin reset for MDX paragraphs

Author: quantizor

AGENTS.md

@@ -47,6 +47,7 @@ Before editing anything that touches styled-components APIs (`createTheme`, `The
 - Releases page uses `markdown-to-jsx`, not MDX.
 - `${ClientComponent} &` selector interpolation in a styled template calls the referenced component's `.toString()`, which trips RSC's client-reference guard from a server module. Any styled component using this pattern must stay `'use client'`. Currently applies to `CodeBlock.tsx` (uses `${Note} &`).
 - Import code mixins (`codeTextMixin`, `editorMixin`) from `components/codeMixins.ts`, not from `LiveEdit`. Importing from `LiveEdit` pulls `react-live-runner` + `sucrase` into the client bundle of every consumer.
-- `utils/logoPalette.ts` is the single source of `LOGO_LUM`, `LOGO_CHROMA`, `logoHueRing()`. `PlatonicLogo.tsx` and `CelebrationEffect.tsx` import from it; don't duplicate the constants at call sites.
+- `utils/logoPalette.ts` is the single source of the 20-step hue ring (offset 23°). Three L/C tiers: `logoPalette` (bright, for logo/celebration), `lightPalette` (CVD-optimized for light bg), `darkPalette` (CVD-optimized for dark bg). `theme.palette[N]` switches light/dark automatically. Syntax colors reference palette indices directly (e.g. `P[14]` for violet). Don't hand-pick oklch values — pick a palette index.
+- Blog posts are assembled dynamically from MDX files at build time by `utils/blog.server.ts`. No JSON index to maintain — just create the MDX file with `export const meta`.
 - `PlatonicLogo.tsx` faces must NOT use `backface-visibility: hidden`. Per-face axis-angle interpolation during morph transitions can briefly flip a face normal and cull mid-animation. `transform-style: preserve-3d` z-sorts back faces naturally.
 - `CelebrationEffect.tsx` particles are `React.memo`'d; `onAnimationEnd` is a stable `useCallback` that reads `fwId`/`particleId` from `data-*` attributes. Don't close over IDs in per-item arrow functions — it defeats memoization on the particle list.

app/homepage.css

@@ -16,7 +16,7 @@
   font-weight: var(--sc-fontWeight-display);
   font-size: 2.5rem;
   line-height: 1.15;
-  margin: 0.75em 0 0.5em;
+  margin: 1.25em 0 0.5em;
   text-align: left;
 }
 

app/layout.tsx

@@ -85,6 +85,7 @@ const themeScript = `
         d.dataset.theme = 'dark';
       }
     } catch (e) {}
+    d.setAttribute('data-hero-logo-visible', '');
   })();
 `;
 

app/not-found.tsx

@@ -114,31 +114,31 @@ const Comment = styled(Line)`
 `;
 
 const Keyword = styled.span`
-  color: ${theme.color.codeKeyword};
+  color: ${theme.color.codeComment};
 `;
 
 const ComponentName = styled.span`
-  color: ${theme.color.codeNumber};
+  color: ${theme.color.codeText};
 `;
 
 const FnName = styled.span`
-  color: ${theme.color.codePropertyDeep};
+  color: ${theme.color.codeFunction};
 `;
 
 const Punct = styled.span`
-  color: ${theme.color.codePunctuation};
+  color: ${theme.color.codeComment};
 `;
 
 const Tick = styled.span`
   color: ${theme.color.codeString};
 `;
 
 const Prop = styled.span`
-  color: ${theme.color.codeProperty};
+  color: ${theme.color.codeDeclaration};
 `;
 
 const Value = styled.span`
-  color: ${theme.color.codeConstant};
+  color: ${theme.color.codeText};
 `;
 
 const Message = styled.p`

app/page.tsx

@@ -3,6 +3,8 @@ import Footer from '../components/Footer';
 import HomepageBadges from '../components/HomepageBadges';
 import HomepageHeroEditor, { HeroContent } from '../components/HomepageHeroEditor';
 import LatestBlogPost from '../components/LatestBlogPost';
+import PlatonicLogo from '../components/LogoConcepts/PlatonicLogo';
+import HeroLogoObserver from '../components/HeroLogoObserver';
 import { HomepageLogos, HomepageShowcase } from '../components/HomepageShowcase';
 import HomepageGettingStartedContent from '../components/HomepageGettingStarted';
 import { getPosts } from '@/utils/blog.server';
@@ -17,8 +19,10 @@ export default async function Index() {
 
       <div className="hero-header">
         <HeroContent>
-          <HomepageHeroEditor>
-            <LatestBlogPost post={posts[0]} />
+          <HomepageHeroEditor latestPost={<LatestBlogPost post={posts[0]} />}>
+            <HeroLogoObserver>
+              <PlatonicLogo size={200} hideLabel />
+            </HeroLogoObserver>
 
             <h1 className="hero-tagline">
               CSS for the <code>&lt;Component&gt;</code> Age

components/CelebrationEffect.tsx

@@ -2,9 +2,9 @@
 
 import React from 'react';
 import styled, { css, createGlobalStyle, keyframes } from 'styled-components';
-import { logoHueRing } from '../utils/logoPalette';
+import { ringColor } from '../utils/logoPalette';
 
-const COLORS = logoHueRing(9);
+const COLORS = Array.from({ length: 9 }, (_, i) => ringColor(i * 2));
 
 const CHARS = ['{', '}', '<', '>', '/', '*', '#', '.', ';', ':', '$', '&', '(', ')', '='];
 const TRAIL_CHARS = ['|', '.', '*', '·'];

components/CodeBlock.tsx

@@ -30,7 +30,7 @@ const CodeBlock = styled(({ code, language = 'clike', className }: CodeBlockProp
   ${codeTextMixin}
 
   background-color: ${theme.color.codeBg};
-  border-radius: ${theme.radius.md};
+  border-radius: ${theme.radius.lg};
   border: 1px solid ${theme.color.border};
   box-shadow: 0 1px 3px ${theme.color.shadow};
   position: relative;

components/GlobalStyles.tsx

@@ -89,6 +89,10 @@ const GlobalStyles = createGlobalStyle`
     -moz-osx-font-smoothing: grayscale;
   }
 
+  button > p {
+    margin: 0;
+  }
+
   #__next {
     overflow-x: hidden;
   }
@@ -167,15 +171,34 @@ const GlobalStyles = createGlobalStyle`
   }
 
   code {
-    background: ${theme.color.accentSubtle};
+    --code-tint: 12%;
+    background: linear-gradient(
+      135deg,
+      color-mix(in oklch, ${theme.palette[0]} var(--code-tint), transparent),
+      color-mix(in oklch, ${theme.palette[5]} var(--code-tint), transparent),
+      color-mix(in oklch, ${theme.palette[10]} var(--code-tint), transparent),
+      color-mix(in oklch, ${theme.palette[15]} var(--code-tint), transparent)
+    );
     border-radius: ${theme.radius.sm};
     font-family: ${font.mono};
     letter-spacing: -0.025em;
-    padding: 0.15em 0.3em;
+    padding: 0.15em 0.4em;
+  }
+
+  html.dark code { --code-tint: 36%; }
+  @media (prefers-color-scheme: dark) {
+    html:not(.light) code { --code-tint: 36%; }
+  }
+
+  pre code {
+    background: none;
+    padding: 0;
+    border-radius: 0;
   }
 
   h1 code {
     font-weight: ${theme.fontWeight.semibold};
+    padding: 0 0.3em;
   }
 
   /* ── Lists ────────────────────────────────────────────────── */

components/HeroLogoObserver.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export default function HeroLogoObserver({ children }: { children: React.ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        document.documentElement.toggleAttribute('data-hero-logo-visible', entry.isIntersecting);
+      },
+      { threshold: 0 }
+    );
+
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      document.documentElement.removeAttribute('data-hero-logo-visible');
+    };
+  }, []);
+
+  return <div ref={ref}>{children}</div>;
+}

components/HomepageHeroEditor.tsx

@@ -93,7 +93,13 @@ const transformHeaderCode = (code: string) => `
   )
 `;
 
-export default function HomepageHeroEditor({ children }: { children?: React.ReactNode }) {
+export default function HomepageHeroEditor({
+  children,
+  latestPost,
+}: {
+  children?: React.ReactNode;
+  latestPost?: React.ReactNode;
+}) {
   const id = React.useId();
   const liveScope = React.useMemo(() => createScope(id), [id]);
   const editorContainerRef = React.useRef<HTMLDivElement>(null);
@@ -108,6 +114,8 @@ export default function HomepageHeroEditor({ children }: { children?: React.Reac
       theme={prismTheme}
     >
       <HeroGrid>
+        {latestPost && <MobileLatestPost>{latestPost}</MobileLatestPost>}
+
         <HeroLeft>
           {children}
 
@@ -116,10 +124,13 @@ export default function HomepageHeroEditor({ children }: { children?: React.Reac
           </Links>
         </HeroLeft>
 
-        <HeroRight ref={editorContainerRef}>
-          <Editor theme={prismTheme} highlight={highlightTSXWithTagDepth} />
-          <StyledError />
-        </HeroRight>
+        <EditorColumn>
+          {latestPost && <DesktopLatestPost>{latestPost}</DesktopLatestPost>}
+          <HeroRight ref={editorContainerRef}>
+            <Editor theme={prismTheme} highlight={highlightTSXWithTagDepth} />
+            <StyledError />
+          </HeroRight>
+        </EditorColumn>
       </HeroGrid>
     </LiveProvider>
   );
@@ -141,7 +152,7 @@ export const HeroContent = styled.div`
 const HeroGrid = styled.div`
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: ${theme.space[8]};
+  gap: ${theme.space[12]};
   align-items: stretch;
   width: 100%;
 
@@ -162,6 +173,13 @@ const HeroLeft = styled.div`
   `)}
 `;
 
+const EditorColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: ${theme.space[4]};
+`;
+
 const HeroRight = styled.div`
   border: 1px solid ${theme.color.border};
   box-shadow: 0 1px 3px ${theme.color.shadow};
@@ -180,6 +198,25 @@ const Editor = styled(LiveEditor)`
   width: 100%;
 `;
 
+const MobileLatestPost = styled.div`
+  display: none;
+  justify-content: center;
+  order: -1;
+
+  ${mobile(css`
+    display: flex;
+  `)}
+`;
+
+const DesktopLatestPost = styled.div`
+  display: flex;
+  justify-content: flex-end;
+
+  ${mobile(css`
+    display: none;
+  `)}
+`;
+
 const Links = styled.div`
   margin: ${theme.space[8]} 0 0;
 `;