<instructions>
Build a timezone overlap checker web app using a modern frontend framework with a built-in dev server — for example Vite + React, Vue, Svelte, or similar. Do NOT use Express, Fastify, or raw Node.js `http`. The app is served by the framework's own dev server (`npm run dev`). Full creative freedom on design and UX — make it beautiful, polished, and production-quality.
</instructions>
<features>
**City search**
- 300+ cities: world capitals, US state capitals, major cities (San Francisco, Los Angeles, Chicago, Miami, Geneva, Lausanne, Zürich, Lyon, Bordeaux, Tokyo, Sydney, etc.)
- Each city maps to an IANA timezone. City list embedded in JS — no external API calls.
- Instant client-side filter, case-insensitive, matches city name or country.
**Layout: comparison table, not cards**
The core UI is a **table/grid** where each timezone is a **row** and each column is an hour (00h → 23h).
- Row header (left): city name, country, live local time, UTC offset, delete (×) button. Clicking the row header sets it as **primary**.
- 24 hour cells per row, each visually differentiated by meaning:
- Night (00–06, 20–23)
- Day (07–19)
- Wake-up window (07–09 by default)
- Overlap with the primary zone's working hours (09–18 by default)
- Hour labels (00h, 01h, … 23h) displayed as a sticky header row above the grid.
- The current hour is highlighted with a vertical marker across all rows so you see "now" at a glance.
- Rows are stacked vertically, aligned so hours line up perfectly — making overlaps instantly visible.
- 2 rows min, 5 rows max. Animate row addition/removal.
**Mobile (<768px)**
- Timezones are stacked **vertically** (one below the other).
- For each timezone, the 24 hour cells are laid out **horizontally** (left → right), scrollable.
- Hour labels (00h → 23h) sit above the cells and scroll with them.
- Same visual coding applies (night, day, wake-up, overlap).
**Overlap logic**
- Convert primary zone's 09–18 window to UTC, then map to each row's local hours.
- Handle midnight boundary crossings correctly.
- If no overlap exists, show a subtle "No overlap" label on that row.
**Settings** (⚙ icon, top-right, persisted in localStorage)
- Time format: 12h (3:45 PM) or 24h (15:45)
- Working hours: configurable start/end for the green overlap band (default 09–18)
- Wake-up window: configurable start/end for the gray band (default 07–09)
**Defaults on first load**
- Auto-detect user timezone via `Intl.DateTimeFormat().resolvedOptions().timeZone`
- Pre-load one additional timezone (e.g. `America/New_York` or `Asia/Tokyo`)
</features>
<thinking>
Before coding, reason through:
1. Overlap math: convert primary 09–18 to UTC → back to each row's local hours, handle midnight wrap
2. How to align 24 cells across all rows so the grid is perfectly consistent
3. Current-hour marker: compute local hour per timezone and highlight the matching cell
4. Day/night detection per timezone per hour
5. Responsive collapse from table rows to stacked strips on mobile
</thinking>
<important>
- `<title>` and page heading must be your model name (e.g. "Claude Sonnet 4.5" or "GPT-4o")
- The table layout must make overlaps **instantly obvious** — alignment is critical
- Full creative freedom on colors, typography, and visual style — design the best possible UI/UX
- Polished, production-quality — not a prototype
</important>