[1. Starter prompt]
Build a 10-second motion graphic as ONE self-contained HTML file (no libraries, no external files or fonts).

WHAT IT IS
An animated title card for Harbor Coffee, a small neighbourhood coffee shop. Words on screen: "Harbor Coffee" and the line "Roasted two streets from the water."

FORMAT
- A 1920×1080 canvas, scaled to fit the window.
- One function, render(t), draws the whole frame for any time t in seconds. Nothing may depend on the previous frame.
- A play/pause button and a scrubber so I can drag to any moment. Loop at the end.

SHOT LIST (10 seconds)
0.0–1.5   A thin line draws across the middle, left to right.
1.0–3.0   "Harbor Coffee" rises into place above the line, one letter after another.
3.0–4.5   The tagline fades up below the line.
4.5–8.0   Hold. A slow wisp of steam drifts up behind the name.
8.0–10.0  Everything fades out except the line, which retracts to the left.

LOOK
- Two typefaces only: a bold sans for the name, an italic serif for the tagline (system fonts).
- Colours: background hex 0e0c0a, text hex efe7dc, one accent hex d98e4a. No other colours.
- Generous margins. Nothing closer than 120 px to an edge.

MOTION RULES
- Never linear. Ease out for things arriving, ease in for things leaving.
- Stagger the letters by 40 ms. Nothing pops in.
- One thing moves at a time. When it lands, it stays still.

Before the code, repeat the shot list back to me with the exact timings you will use.

[2. Fix-it message]
Screenshot attached: this is the frame at 6.0 seconds. Two changes, nothing else.

1. From 4.5 to 8.0 s the steam is too faint and too small to notice. Make it about three times taller and twice as bright, rising from above the "o" in Coffee.
2. The name feels small in the frame. Make "Harbor Coffee" about 30% larger and keep everything centred.

Keep every timing the same.