Aero 风格登录框

请直接输出一个完整可运行的**单文件 HTML**（内联 CSS + 原生 JS，不要使用 JSX 或任何需要编译的语法）。 抛弃现代的扁平化设计。做一个 2005-2010 年风格的登录页面，那个年代的网页设计有个名字叫 Frutiger Aero —— 水晶质感、极光背景、逼真的高光和投影。 页面包含一个登录框，有用户名输入框、密码输入框、"记住我"复选框和登录按钮。不需要真正的登录功能，但视觉上必须完全沉浸在那个年代的拟物美学中。 不允许使用任何外部图片资源（允许内嵌base64）。所有视觉效果必须用纯 CSS 实现。

请直接输出一个完整可运行的**单文件 HTML**（内联 CSS + 原生 JS，不要使用 JSX 或任何需要编译的语法）。 做一个 2005-2010 年 Frutiger Aero 风格的登录页面。这个年代的设计美学核心是"数字乌托邦"——科技是美好的、未来是光明的，界面要传达出那种干净、透亮、充满希望的感觉。 页面包含一个登录框（用户名、密码、"记住我"复选框、登录按钮），必须体现以下所有视觉要素： 1. **水晶玻璃质感按钮**：多层 `linear-gradient` 叠加，上半部分亮、下半部分暗，模拟光线从上方照射玻璃的效果。按钮要有明显的 `border` 边框和 `inset box-shadow` 内发光 2. **极光/自然背景**：背景要有 Frutiger Aero 标志性的自然元素感——极光、草地、蓝天、水面中选一种或组合，用 CSS 渐变和伪元素模拟（不用图片） 3. **逼真的高光与反射**：输入框和登录框容器要有玻璃般的高光条纹（用 `::before` / `::after` 伪元素 + 半透明白色渐变实现） 4. **水滴/气泡纹理**：页面某处要有水滴或气泡的装饰元素，用 `radial-gradient` + `box-shadow` 模拟透明水珠的折射效果 5. **多重投影与立体感**：所有元素都要有明显的多重 `box-shadow`（外阴影 + 内阴影），营造"浮出屏幕"的立体感。登录框本身要像一块悬浮的毛玻璃面板 6. **圆润的造型**：大圆角（`border-radius`）、胶囊形按钮、柔和的边缘——这个年代讨厌锐利的直角 7. **色彩基调**：以天蓝、草绿、透明白为主色调，点缀极光紫/橙。整体色彩要"通透"，像隔着一层水在看 不允许使用任何外部图片资源（允许内嵌base64）。所有视觉效果必须用纯 CSS 实现。

请直接输出一个完整可运行的**单文件 HTML**（内联 CSS + 原生 JS，不要使用 JSX 或任何需要编译的语法）。 你是一位"UI 设计史学家"。请在同一个页面中，并排展示**三个不同年代的登录框**，每个登录框都包含用户名、密码、"记住我"复选框和登录按钮，功能结构完全相同，但视觉风格必须精确还原各自年代的设计语言： **1. 2000s 拟物时代（Frutiger Aero / Skeuomorphism）** - 水晶玻璃质感按钮（多层渐变 + inset 内发光） - 极光/自然系背景色调（天蓝、草绿、透明白） - 逼真的高光条纹、水滴气泡装饰 - 多重 box-shadow 营造"浮出屏幕"的立体感 - 大圆角、胶囊形按钮、一切都圆润通透 - 整体感觉：数字乌托邦，科技是美好的 **2. 2010s 扁平时代（Flat Design / Metro）** - 零渐变、零阴影、零圆角（或极小圆角） - 纯色色块填充，高饱和度撞色 - 粗体无衬线字体，大面积留白 - 图标和元素极度简化为几何形状 - 输入框只有底部边框线（Material Design 风格亦可） - 整体感觉：Less is more，信息优先，装饰为零 **3. 2020s 新拟态时代（Neumorphism / Glassmorphism）** - 柔和的凸起/凹陷效果（浅色背景 + 双向 box-shadow：左上亮、右下暗） - 或毛玻璃效果（`backdrop-filter: blur()` + 半透明背景） - 微妙的渐变，极低对比度 - 圆角适中，整体色调统一（通常是浅灰/米白基底） - 按钮像是从背景中"挤压"出来的 - 整体感觉：安静、柔和、触感化 要求： 1. 三个登录框水平排列（桌面端），每个上方标注年代名称和风格关键词 2. 三者的 HTML 结构尽量一致，差异完全体现在 CSS 上 3. 每个登录框的风格必须"纯粹"——不要混搭，要让人一眼就能辨认出年代 4. 页面顶部有标题和一段简短的设计史科普文案 5. 不允许使用任何外部图片资源（允许内嵌base64），所有视觉效果纯 CSS 实现