Build a polished, responsive, self-contained HTML page for a fictional community workshop programme. It must work without external libraries, accounts, network requests or a backend. Let a visitor filter the six workshops below by topic and by “places available”, combine both filters, and reset them. Show the number of matching workshops and a useful empty state. Let the visitor add or remove workshops from a personal shortlist; show that shortlist and its total duration. Do not describe shortlisting as a confirmed booking. Give me one downloadable HTML file and an on-screen preview if available. Use semantic controls, visible keyboard focus and text labels; colour alone must not convey availability. Label the content as fictional demo data.

Workshops: W1, Intro to urban sketching, Art, 90 minutes, 4 places; W2, Repair a cotton shirt, Craft, 120 minutes, 0 places; W3, Phone photography walk, Art, 60 minutes, 6 places; W4, Bicycle puncture basics, Repair, 75 minutes, 2 places; W5, Beginner bookbinding, Craft, 150 minutes, 3 places; W6, Small appliance diagnosis, Repair, 90 minutes, 0 places. Shortlists may contain full workshops because they are a planning list, not reservations. Keep all six workshops and their exact data.