The prompt: the source, its stylesheet, and every comment that says why a number is what it is.

Layout

Accordion

Three sections; the one opening takes the room the one closing gives up.

Reactno other dependencyplain CSS

The prompt19,292 characters

Add the "Accordion" component from notboring to my project.

It is licensed for use in my projects — notboring.dev/license. Please:

1. Create the component at a sensible path for this
   project, named Accordion, from the source below.

2. It needs nothing beyond React.

3. Add the CSS to the project's stylesheet.

4. THE PART THAT NEEDS YOUR JUDGMENT. The CSS reads
   these custom properties and does not define them:

     --card
     --font-ui
     --ink
     --ink-3
     --ink-rgb
     --pane-edge

   They are notboring's design tokens. Map each one to
   whatever this project already uses for the same
   job — its own ink, ground, surface and UI font —
   rather than defining them as new globals. If the
   project has no equivalent, define it locally on
   the component's own root so nothing leaks out.
   Anything ending -rgb wants three bare numbers,
   because the CSS builds rgba() from it.

Keep the comments. They say why the numbers are what
they are, and they are most of what makes this worth
copying rather than rewriting.

--- Accordion.tsx ---

import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";

/* ══ Accordion ════════════════════════════════════════════
   Three questions, and one of them open.

   THE ONE OPENING TAKES THE ROOM THE ONE CLOSING GIVES UP.
   Both heights are read off the same clock — one runs from
   its full height to nothing while the other runs from
   nothing to its full height, on the same curve over the same
   milliseconds — so the card's total height moves only by the
   difference between the two answers, and the rows beneath
   them barely shift. The obvious build gives each section a
   transition of its own, which is the same numbers arriving a
   frame apart: the card grows, then shrinks, and everything
   under the change bobs.

   ONE OPEN AT A TIME is the reason there is anything to
   exchange. A list where every section can be open is a page
   with some of it folded; a list where at most one is open is
   a control, and the closing is part of the opening. */

const W = 300;

/* three headers and the tallest answer. Stated rather than

The rest — the source and its comments — is what you are buying.