devlynpencil-pulllisted

# Pull Pencil Design into Code Implement the selected Pencil design in code with exact visual fidelity. Work through one component at a time, verifying each against the design before moving on. <project_context> - Next.js 16 + React 19, Server Components by default - Custom CSS with CSS variables (no Tailwind) — tokens live in `src/app/globals.css` - Three visual zones, each with its own CSS file and class prefix: - Marketing (`marketing.css`) — cinematic, descriptive class names - Auth (`auth.css`) — minimal, `auth-` prefix - Dashboard (`dashboard.css`) — functional, `dash-` prefix - Design system reference: `docs/design-system.md` </project_context> <goal> The coded implementation should be visually indistinguishable from the Pencil design. Small discrepancies — a few pixels of padding, a slightly different font weight, a missing border-radius — compound across components and produce a result that "looks off" even if no single difference is dramatic. Treat the Pencil design as the pixel-level specification and match it exactly. The only areas where interpretation is needed: - Interactive states (hover, focus, active) — Pencil can't represent these, so follow existing patterns in the codebase - Responsive behavior — implement following existing responsive patterns - Dynamic content — use the design's placeholder text for empty states </goal> ## How to approach this <setup> Before writing any code, gather context: 1. Call `get_editor_state(include_schema: true)` t