这是一个包含完整HTML、CSS和SVG代码的单文件解决方案。
这个设计采用了**Flat 2.0**风格（扁平化但带有渐变和阴影），并通过CSS变量和JavaScript实现了平滑的昼夜切换动画。
### 功能特点：
1. **地标建筑**：包含世界贸易中心一号大楼（左）、帝国大厦（中）、克莱斯勒大厦（右）以及前景中风格化的自由女神像。
2. **动态细节**：
* **窗户**：白天是暗淡的玻璃，夜晚会随机点亮暖黄色的灯光。
* **倒影**：水面上有建筑物的倒影。
* **飞鸟**：天空中飞翔的海鸥动画。
* **云层**：缓慢飘动的半透明云层。
3. **昼夜切换**：点击右上角的开关，天空渐变、太阳/月亮位置、建筑物颜色和窗户灯光都会平滑过渡。
### 使用方法：
将以下代码保存为 `.html` 文件（例如 `nyc_skyline.html`），然后用浏览器打开。
```html
纽约天际线 - 昼夜切换 SVG
```
### 代码亮点解析：
1. **CSS 变量驱动的主题 (`:root` vs `.night-mode`)**:
* 所有的颜色（天空、建筑、窗户光、水面）都定义为 CSS 变量。
* 当 `night-mode` 类被添加到 body 时，这些变量会更新，利用 CSS 的 `transition` 属性实现全局的平滑过渡，无需复杂的 JS 动画逻辑。
2. **SVG 渐变 (`linearGradient`)**:
* 建筑使用垂直渐变（顶部较亮，底部较暗）来模拟立体感。
* `stop-color` 绑定了 CSS 变量，确保渐变色也能随昼夜切换而变化。
3. **窗户系统 (`` + CSS Animation)**:
* 为了性能和代码整洁，没有画几百个矩形，而是定义了一个 ``。
* 在夜晚模式下，`.window` 类获得高亮颜色，并应用了一个 `flicker`（闪烁）动画，模拟城市灯光闪烁的生动感。使用了 `nth-child` 延迟，让闪烁看起来不那么同步。
4. **自由女神像的简化**:
* 使用基本的几何形状（Path/Line/Circle）组合成一个极简但可识别的轮廓，并添加了火炬的光晕动画。
5. **倒影与水波**:
* 倒影是通过 `transform="scale(1, -1)"` 翻转并降低透明度实现的。
* 使用了 SVG 滤镜 `blur` 让倒影中的灯光看起来在水中晕开。
6. **天体运动**:
* 太阳和月亮共用一个圆形元素。通过 CSS `transform` 在切换时改变其位置，同时改变颜色（黄色 -> 银白色）。