Skybridge 404

使用 React + Vite + Tailwind CSS v4 创建一个单页全视口 404 错误界面。精确匹配此构图。

页面 / 画布
- 页面必须占满整个视口：`min-height: 100svh`。
- 使用黑色回退背景。
- 不要让页面出现横向滚动。仅当视口高度很小时才允许纵向滚动。
- 页面应具备响应式能力，同时在较大尺寸下保留 desktop 构图。
- 不要使用 cards、buttons、nav links、404 数字以外的 gradients、texture、glass、dark overlay、blur overlay 或任何额外 UI。

背景视频
- 添加以下精确 MP4 作为全页背景：
  `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260801_001207_ec20d138-aa45-4b2b-ab8c-bdc71607f240.mp4`
- 使用语义化 `<video>` 元素，并将其作为页面内的第一个子元素。
- 必需的视频属性：
  - `autoPlay`
  - `loop`
  - `muted`
  - `playsInline`
  - `aria-hidden="true"`
- 视频必须绝对定位在 `inset: 0`，并设置 `width: 100%`、`height: 100%` 和 `object-fit: cover`。
- 视频 opacity 必须精确为 `1` / `100%`。
- 不要在视频上应用任何 dark、black、colored、translucent、gradient、blur、blend-mode 或 tint overlay。
- logo 和 404 内容必须通过更高的 z-index 显示在视频上方。
- 不要给视频添加 CSS 动画效果；仅让视频自身的动态作为唯一背景动画。

字体
- 使用精确导入的 Figma font face：
  - Family / CSS family: `"Geist Mono:SemiBold"`
  - Weight: `600`
  - Style: `normal`
  - Format: `woff2`
  - Source URL: `https://static.figma.com/font/GeistMono_wght__1`
- 使用以下方式声明：
  ```css
  @font-face {
    font-family: "Geist Mono:SemiBold";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("https://static.figma.com/font/GeistMono_wght__1") format("woff2");
  }
大号“404”和消息文本使用此字体。
保留其紧凑的 mono 字形与 semibold 字重。
页眉 LOGO

将 logo 水平居中放置在页面顶部。
Desktop：
top: 80px
left: 50%
transform: translateX(-50%)
Logo frame 总尺寸：233px × 40px。
仅使用白色填充。
标志为几何像素风符号，尺寸 54px × 40px，由以下精确 SVG paths 构成：
<svg viewBox="0 0 54 40" fill="none">
  <path d="M38 0H26V12H38V0Z" fill="white"/>
  <path d="M54 12H38V28H54V12Z" fill="white"/>
  <path d="M38 28H26V40H38V28Z" fill="white"/>
  <path d="M26 12H16V22H26V12Z" fill="white"/>
  <path d="M16 22H8V30H16V22Z" fill="white"/>
  <path d="M16 2H6V12H16V2Z" fill="white"/>
  <path d="M6 12H0V18H6V12Z" fill="white"/>
</svg>
将 logotype 定位在标志右侧 14px 处。
Logotype SVG 应使用 viewBox="0 0 164.311 100"、白色填充以及以下精确 path：
<path d="M122.498 37.4573H131.321L139.533 51.6222L147.772 37.4573H156.595V56.0604H152.449V37.6433L141.739 56.0604H137.354L126.617 37.6433V56.0604H122.498V37.4573ZM95.921 48.8317C92.785 48.8317 90.261 46.307 90.261 43.1445C90.261 40.0086 92.785 37.4573 95.921 37.4573H119.972V41.6031H95.921C95.071 41.6031 94.38 42.2941 94.38 43.1445C94.38 44.0215 95.071 44.7125 95.921 44.7125H114.285C117.421 44.7125 119.972 47.2372 119.972 50.3997C119.972 53.5357 117.421 56.0604 114.285 56.0604H90.261V51.9411H114.285C115.136 51.9411 115.827 51.2501 115.827 50.3997C115.827 49.5227 115.136 48.8317 114.285 48.8317H95.921ZM80.857 37.4573C84.843 37.4573 88.086 40.6995 88.086 44.7125C88.086 48.6989 84.843 51.9411 80.857 51.9411H62.254V56.0604H58.135V37.4573H80.857ZM80.83 47.7953C82.558 47.7953 83.94 46.4133 83.94 44.7125C83.94 42.985 82.558 41.6031 80.83 41.6031H62.254V47.7953H80.83ZM35.975 41.6031C33.105 41.6031 30.7927 43.9152 30.7927 46.7588C30.7927 49.629 33.105 51.9411 35.975 51.9411H51.336V48.6989H35.576V44.5796H55.482V56.0604H35.975C30.8192 56.0604 26.6734 51.9145 26.6734 46.7588C26.6734 41.6297 30.8192 37.4573 35.975 37.4573H55.482V41.6031H35.975ZM0 56.0604V37.4573H4.1192V51.9411H24.9281V56.0604H0ZM164.311 36.4177C164.311 37.7529 163.228 38.8354 161.893 38.8354C160.558 38.8354 159.475 37.7529 159.475 36.4177C159.475 35.0824 160.558 34 161.893 34C163.228 34 164.311 35.0824 164.311 36.4177Z" fill="white"/>
不要为 logo 添加动画。
居中的 404 内容

将主要内容组精确定位在视口中央：
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
Desktop 内容宽度：483px。
该组为垂直居中的 flex column，设置 align-items: center、text-align: center，其三个元素之间的间距为 44px。
它仅包含：
大号 404 heading
一条细 horizontal divider
错误消息
404 HEADING

Heading 文本：404
使用精确的 Geist Mono SemiBold font face。
Desktop font size：295.751px。
Font weight：600。
Line height：1.1。
Letter spacing：-24.6459px。
居中对齐。
Heading 需在底部保留足够 padding / 空间以容纳字体 baseline，确保数字下部绝不被裁切。
不要使用 clipping container 限制它。
应用仅作用于文本的 gradient：
linear-gradient(
  247.3282658084845deg,
  rgb(255, 255, 255) 2.5334%,
  rgba(255, 255, 255, 0.4) 93.612%
)
使用 background-clip: text 和 -webkit-background-clip: text，并将文字颜色设为透明。
不要 text shadow、glow 或 animation。
DIVIDER

紧接在 404 heading 下方，留出 44px 垂直间距。
Width：425px。
Height：1px。
纯白色。
不要 rounded ends、opacity changes 或 animation。
消息

紧接在 divider 下方，再留出 44px 垂直间距。
精确文案：道路或许中断，但旅程仍在继续。让我们带你返回。
使用相同的 Geist Mono SemiBold 字体。
Desktop font size：24px。
Font weight：600。
Line height：1.1。
Letter spacing：-2px。
白色、居中。
宽度应跟随主内容宽度。
不要 CTA、link styling、hover effects 或 animation。
图层顺序

背景视频：最底层。
Header logo：位于视频上方。
中央 404 内容：位于视频上方。
不要在视频与页面内容之间使用任何图层。
响应式 MOBILE 行为

在 max-width: 640px 时：
将 header logo 移至 top: 32px。
在保持水平居中的同时，将 233px × 40px logo frame 在视觉上缩放至 75%。
将中央内容宽度设为 min(100% - 40px, 360px)。
将内容元素之间的垂直间距缩小至 28px。
使用以下方式缩放 404 heading：font-size: clamp(140px, 52vw, 200px)。
为 404 使用约 -0.09em 的更紧凑 letter spacing。
确保 404 设置 height: auto、min-height: 0，并留有 bottom padding，避免被裁切。
让 divider 占满 mobile 内容组的宽度。
使用以下方式缩放消息文本：font-size: clamp(16px, 4.5vw, 20px)。
Mobile 消息使用约 -1.3px 的 letter spacing。
在所有屏幕尺寸下保持相同的居中构图和无叠层处理。
无障碍 / 实现

页面使用语义化 <main>。
404 数字使用 <h1>。
将装饰性 SVG 和视频标记为 aria-hidden。
为品牌 wrapper 添加 aria-label="LGPSM"。
根据需要使用 React JSX 和 CSS/Tailwind utilities。
不要添加任何界面功能、transition、fade-in、hover state、mouse-following effect 或额外内容。