Scope StoryRecorder dot styles to prevent global dot bleed

[kojibai]

Motivation

• A global .dot selector in the Story Recorder stylesheet leaked styles and caused large square backgrounds to appear around small separator dots elsewhere in the app.

Description

• Rename the recorder markup from className="dot" to className="story-rec-dot" in StoryRecorder.tsx.
• Update StoryRecorder.css to use scoped selectors (.record-btn .story-rec-dot, .record-btn.recording .story-rec-dot, and .story-rec-dot) in place of the generic .dot rules.
• Confine the recorder dot visuals so they no longer affect unrelated dot elements across the application.

Testing

• Started the development server with npm run dev to load the app and confirm no immediate runtime errors occurred, which succeeded.
• Ran a Playwright script that visited the /keystream route and captured a screenshot to visually verify that separator dots no longer show the oversized square, which also succeeded.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
phi-network-5aii	Ready	Preview, Comment	Jan 1, 2026 0:07am