Aurora 引导注册

请构建一个名为“Aurora Sign Up”的现代双栏注册界面。使用 React、Tailwind CSS (v4)、`motion/react`（用于动画）和 `lucide-react`（用于图标）。整个应用应完全包含在 `App.tsx` 和 `index.css` 中。

### 1. 全局设置与 CSS（`index.css`）
- 从 Google Fonts 导入“Inter”字体（字重 300、400、500、600、700）。
- 使用 `--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;` 和自定义颜色 `--color-brand-gray: #1A1A1A` 扩展 Tailwind 主题。
- 为 `body` 应用基础样式：`@apply font-sans bg-black text-white antialiased;`。

### 2. 主布局（`App.tsx` 容器）
- `<main>` 元素应具有：`flex min-h-screen w-full bg-black selection:bg-white/30 p-2 transition-all duration-500`。
- 在 `lg` 断点下：`lg:h-screen lg:overflow-hidden lg:p-4`。
- 将此容器拆分为左栏（主视觉）和右栏（表单）。

### 3. 左栏（主视觉与背景视频）
- 大屏幕下的宽度应精确设为 `w-[52%]`。在手机/平板设备上隐藏，仅通过 `lg:flex` 显示。
- 样式：`relative flex-col items-center justify-end pb-32 px-12 rounded-3xl overflow-hidden shadow-2xl h-full`。
- **背景视频**：添加一个绝对定位的 `<video>` 标签（`inset-0`、`w-full`、`h-full`、`object-cover`）。它必须具有 `autoPlay`、`muted`、`loop` 和 `playsInline`。
- **关键要求**：`<source>` 必须精确为 `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260506_081238_406ed0e3-5d83-436e-a512-0bbff7ec5b95.mp4`（`type="video/mp4"`）。
- **关键要求**：不要在视频上添加任何深色叠加层、渐变或色调遮罩。让视频纯净播放，不添加叠加效果。
- **主视觉内容容器**：将内容放在视频上方（`z-10 w-full max-w-xs space-y-8`）。
- **动画**：使用 `motion.div` 实现交错显示。容器应从 `opacity: 0` 过渡到 `1`，并设置 `staggerChildren: 0.15` 和 `delayChildren: 0.2`。其中每个子元素都应淡入并向上滑动（`y: 10` 到 `y: 0`，持续时间 `0.5`）。
- **品牌/标志**：一个 flex 行，包含 Lucide 的 `Circle` 图标（fill-white text-white）和文本“Aurora”（`text-xl font-semibold tracking-tight`）。
- **标题区块**：“加入 Aurora”（`text-4xl font-medium tracking-tight whitespace-nowrap`）。下方添加描述：“完成以下 3 个快速阶段，即可激活你的空间。”（`text-white/60 text-sm leading-relaxed px-4`）。
- **步骤**：渲染自定义 `<StepItem>` 组件三次。
  1：“注册你的身份”（激活状态）
  2：“配置你的工作室”
  3：“完善你的个人资料”

### 4. 右栏（注册表单）
- 一个具有 `flex-1 flex flex-col items-center justify-center py-12 lg:py-6 px-4 sm:px-12 lg:px-16 xl:px-24 overflow-y-auto lg:overflow-hidden` 的容器。
- **动画**：使用 `motion.div` 包裹内部内容，使其淡入（`opacity: 0` 到 `1`，持续时间 `0.8`，`ease: "easeOut"`）。内部宽度为 `w-full max-w-xl`，间距为 `space-y-8 lg:space-y-6 sm:space-y-10`。
- **页头**：“创建新资料”（`text-3xl font-medium tracking-tight`）。副标题：“输入你的基本信息，开启这段旅程。”（`text-white/40 text-sm`）。
- **社交按钮**：一个两栏网格（`grid grid-cols-2 gap-4`）。使用 `<SocialButton>` 组件渲染 Google（`Chrome` 图标）和 Github（`Github` 图标）。
- **分隔线**：一条水平线（`border-white/10`），中央显示文本“或”（`bg-black px-4 text-xs font-medium text-white/40 uppercase tracking-widest`）。
- **表单布局**：
  - 名和姓放在两栏网格中。
  - 电子邮箱（占满宽度）。
  - 密码（占满宽度），在输入框右侧绝对定位一个自定义 `lucide-react` `Eye` 切换图标，并添加小号辅助文本“至少需要 8 个符号。”
  - **提交按钮**：“创建账户”（`w-full h-14 bg-white text-black font-semibold rounded-xl hover:bg-white/90 active:scale-[0.98] mt-4`）。
  - **页脚链接**：“已经是团队成员？登录”。

### 5. 要创建的可复用组件
在文件底部创建以下确切的函数组件：
1. **`<StepItem>`**：接收 `number`、`text` 和可选的 `active` 布尔值。
   - 如果激活：应用 `bg-white text-black border border-white`。数字圆圈为 `bg-black text-white`。
   - 如果未激活：应用 `bg-brand-gray text-white border-none`。数字圆圈为 `bg-white/10 text-white/40`。
2. **`<SocialButton>`**：接收 `icon` 和 `label`。按钮具有 `bg-black border border-white/10 rounded-xl hover:bg-white/5`。
3. **`<InputGroup>`**：接收 `label`、`placeholder` 和 `type`。标签为 `text-sm font-medium text-white`。输入框为 `bg-brand-gray border-none rounded-xl h-11 px-4 text-white placeholder:text-white/20 focus:ring-2 focus:ring-white/20`。

确保最终代码在顶部使用 `export default function App()`。