A link-in-bio profile that looks like you

Make a one-page profile for the person below: the page their social media bio links to.

About them (the example page's; the request replaces it):
Rosie (@rosie.crumbs), a second-year student who loves bakery hopping and late-night video games. Instagram for every pastry she eats, TikTok for 60-second bakery reviews, X for thoughts at 2 am, and her bakery map. Pastel and a bit silly.

What goes on it (add or drop parts to fit the request):
- At the top: an icon, their name or nickname, their @handle, and one or two lines about them. The icon is an emoji or their initials as a sticker, or their picture if the request gives its URL.
- Right below: 3 to 5 links to their social media and other places, each with the service's name (Instagram, TikTok, and so on) and a few words on what's there. On a phone, the name and the links fit on the first screen.
- Tags for the things they love, and a short "about me" of questions and answers.
- One small playful thing (in the example, a button that shows one "useless fact" each time it's pressed). Its content goes in the page's data block (<script type="application/json" data-cvk-slot="facts">).
- Last, a "Copy this page's link" button.
- Write the links in the HTML itself, not with a script.

Facts:
- Use only the name, @handle, and link addresses the request gives. The example above (the example page's person) isn't the person asking: never reuse its name, @handle, links, loves, or playful content. A missing name is "Your name" and a missing link address "#" (the only stand-ins); a missing @handle is left out. Never invent a real person's name.
- Copy each @handle and link address character for character, as the request writes it. Underscores, dots, digits, and whatever follows them are part of it: never cut, shorten, or tidy one up.
- Social media and other links: only those the request gives, with no description it didn't give. If it gives no links at all, use one stand-in with "#" as the link.
- The lines about them, the things they love, the "about me", and the playful thing come from what the request says. Never invent their tastes or stories. A section the request gives nothing for is left out, heading and all: never a stand-in that tells them what to write ("Write here", "Things I love go here").
- The playful thing (the example's "useless facts") only when the request gives 2 or more facts or loves to draw it from; otherwise neither the button nor its data block (data-cvk-slot="facts").
- A style or color phrase ("pastel", "black and red") changes the look only: it never adds a section, a love, or a link.
- No home address, school name, phone number, or birth year.

Design (this page's DESIGN.md; follow it on every run):
- Pick the one look closest to the request. If it names colors or a motif, swap that look's colors for them.
  - A, soft pastel (the default): background #FFF4F8 with faint polka dots, surface #FFFFFF, text #3B2440, muted text #6B4F70, soft accent #FFD9E6 with pale blue, yellow, and green. 2px lines in the text color, 20px corners, and a 3px offset shadow on buttons and cards. Font: Nunito (600 and 800).
  - B, band kid: background #0E0E10, surface #1A1A1E, text #F4F1EA, muted text #B9B4AA, accent #E0262B (the button fill, with #FFFFFF text). 0 to 4px corners and 2px lines; headings are labels stuck on at a slight angle like gaffer tape, set just above their card and never inside it, so a card's padding stays even on all four sides. Headings in Archivo Black, body in Archivo.
  - C, black and white: background #F7F7F5, surface #FFFFFF, text #111111, muted text #55575C, lines #D9D9D6. No accent color: weight and size do the work. 12px corners and 1px lines. Headings in Space Grotesk (700), body in Inter (400).
- Keep the colors in CSS variables (--bg, --surface, --ink, --muted, --accent, --line). Text keeps at least 4.5:1 contrast with its background, swapped colors included.
- Type: name 32px, headings 20px, body 16px, notes 14px; body line height 1.6.
- Spacing on a 4px scale (4, 8, 12, 16, 20, 24, 32, 40, 48): 8 to 12px inside a group, 32px or more between groups. A card's padding is the same on all four sides.
- At most 480px wide, centered. The name, @handle, and short lines are centered; anything longer than 3 lines is left-aligned.
- A short page, such as a name and one link, still looks finished: the top and the links sit in the middle of the first screen (above the Convika bar at the foot), and with 1 or 2 links the buttons are larger (about 72px tall).
- Motion: things fade up in 0.4 s as they appear, and press down 2px when tapped. Nothing moves under prefers-reduced-motion.
- Every link and button at least 44px tall and 44px wide (min-height: 44px; with Tailwind, min-h-[44px]) and 8px from its neighbors, its words saying where it goes (never "Details" or "Click here"), each button label on one line. No sideways scrolling; a long @handle wraps.
- Avoid: social media logos as images or brand colors, links that are only an icon, text on a busy pattern, gradient text, anything fixed to the bottom of the screen (a Free page shows the Convika bar there), and a long introduction at the top.
- Write in the person's own voice, and keep it short.

Write it as one HTML file with the CSS and JavaScript inside. Don't send anything people type anywhere, and don't use image files. Make it work on a phone held upright. Keep the bottom right of the screen clear: a Support button may show there.

That is the example. Keep how it works, its screens, and its feel, and change the content to fit what I want.
What I want: ___