I'm adding a sandbox artifact from one of my projects (Prompting People — a writing app where one prompt goes live at a time and people respond) to my portfolio. It's a recreation of the "journal entry" component from that app, frozen in display state with a typeable textarea where the body would be. It's a portfolio piece, not a live integration — nothing saves, nothing fetches. Where it should live On the work page, beneath the description of Prompting People. Find the section/block on the work page that describes Prompting People and place the component directly below that description. Look at the existing layout rhythm of that page and pick a width/wrapper treatment that fits — the component is self-contained at min(56vh, 480px) tall and stretches to fill its container's width, so a sensible max-width container (the same one used for surrounding text blocks is probably fine) will work. Constraints — please respect these - This portfolio is Next.js 16 App Router with plain CSS. No Tailwind, no PostCSS, no design-token system. Styling lives in app/v2.css and app/globals.css using raw CSS custom properties (--v2-bg, --v2-ink, --v2-accent, etc.) on the .site-v2 scope. - Do not introduce Tailwind, CSS-in-JS libraries, or any new build tooling. The component below is intentionally self-contained: all its styles live in an inline

Prompt {String(PROMPT_NUMBER).padStart(2, '0')} just now

{QUESTION}

setBody(e.target.value)}
                  placeholder={PLACEHOLDER}
                  aria-label="Write your response"
                />
                <p className="rjs-meta-line">
                  {wordCount} {wordCount === 1 ? 'word' : 'words'} · public
                </p>
              </div>
            </div>

<div className="rjs-section rjs-actions">
              <div className="rjs-actions-left">
                <button type="button" className="rjs-action-btn">Edit</button>
                <span className="rjs-dot-sep">·</span>
                <button type="button" className="rjs-action-btn rjs-action-btn--delete">
                  Delete
                </button>
              </div>
              <span className="rjs-visibility">Public</span>
            </div>

<div className="rjs-section rjs-footer">
              <button type="button" className="rjs-nav-btn">← Prev</button>
              <div className="rjs-dots">
                <span className="rjs-dot rjs-dot--active" />
                <span className="rjs-dot rjs-dot--inactive" />
                <span className="rjs-dot rjs-dot--inactive" />
              </div>
              <button type="button" className="rjs-nav-btn">Next →</button>
            </div>
          </div>
        </div>
      </>
    )
  }

How it should behave (and how to verify)

- Click in the body region → cursor lands in the textarea, you can type freely. The placeholder text "Take your time. Say what you actually notice."
  disappears as soon as you start typing.
  - Word count below the textarea updates live as you type ("0 words · public" → "1 word · public" → "12 words · public").
  - Edit, Delete, Prev, Next buttons render with full hover styling (Delete hovers red, others hover to a stronger gray) but clicking them does nothing.
  This is intentional — they're decorative, signaling the affordances of the real component.
  - The three pagination dots are decorative (rendered as <span>s, not buttons). The first is wider and darker (active state), the other two are small and
   faint.
  - Typography: "Prompt 01" in monospace (Geist Mono), the question in serif italic (Newsreader), everything else in sans (Geist).

After implementing, run the dev server, navigate to the work page, and visually confirm: (1) the component sits beneath the Prompting People description
   with appropriate spacing, (2) typing in the textarea works and word count updates, (3) the inert buttons hover correctly but don't fire anything, (4)
  fonts load (no flash of fallback serif/sans). Report back what you placed where.</article></body></html>