Build a single, self-contained `index.html` file — no build step, no external requests except one video URL, no frameworks, no dependencies. Everything (CSS, JS, SVG) is inline. The file is a pixel-locked recreation of a designed login page, reconstructed from a 1464×949 reference frame. Follow every number exactly; the design is calibrated, not approximate. ## 0. Global rules - ``, ``. - `` - `Signal — Log in` - `html,body{height:100%;background:var(--page)}`; body sets `-webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; overflow:hidden`. - No semicolon-optional sloppiness — this is production-grade static output. ## 1. Fonts Two families, both **embedded as base64 `data:font/woff2` URIs inside `@font-face`** (the page must work fully offline for type): | Family | Weights | Format | Notes | |---|---|---|---| | `FreeSans` | 400, 700 (two separate `@font-face` blocks) | `format('woff2')` | Body/UI font | | `Eloquia` | variable `200 800` | `format('woff2-variations')` | Display font for headline + card H1 | All three declare `font-display:block` (no FOUT — the entrance animation waits on `document.fonts.ready`). - Body stack: `'FreeSans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif` - Display usage: `font-family:'Eloquia',sans-serif` **plus** `font-variation-settings:'wght' var(--hl-wght)` — the variable axis is what sets weight, not `font-weight`. If you cannot source the exact fonts, substitute a grotesque for FreeSans and a variable
……（完整源码请在站内查看）