时尚造型集

# NOWHERE® 造型集 — 完整复刻说明

构建一个名为 **NOWHERE®** 的单文件、全视口时尚造型集。九位全身模特均以 high overhead camera 在浅灰色摄影棚地面上拍摄，站在一个 3D 环形轮播中，可拖动、横向滚动、自动播放，也可切换为 3×3 网格。点击正前方的模特，将其放大进入“造型视图”，每件服装上都有编号圆点，右上方会向下打印一张纸质小票，列出三件单品及其尺码、整套九折优惠，以及加入购物袋的流程。所有内容均使用原生 HTML、CSS 和 JavaScript 写在一个文件中，不使用任何库。页面高度恰好为一屏（100svh，始终不滚动）。必须精确复现以下所有内容。

## 1. 素材

所有图片均为透明 PNG 抠图，通过图片代理以 WebP 格式提供。使用以下原始 URL。每张造型图片的原始画布为 914×1616（宽高比约 0.566）。人物从上到下填满画布，鞋底略高于底边，因此每套造型都有一个“foot”值（鞋子下方的空白比例），用于将图片下移，让鞋子落在容器底边。

| # | 造型 | 完整图片 (914 w) | 小图 (571 w) |
|---|---|---|---|
| 1 | Somewhere Else | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190717_6580d844-f3b0-4240-8b4a-239355685fc9.png&w=914&q=85 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190717_6580d844-f3b0-4240-8b4a-239355685fc9.png&w=571&q=85 |
| 2 | Dial-Up | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190715_b129d73c-3854-445e-b7c4-0335a044dc2c.png&w=914&q=85 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190715_b129d73c-3854-445e-b7c4-0335a044dc2c.png&w=571&q=85 |
| 3 | Long Walks | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190715_04902164-40f3-4b66-928c-8fc7f606b83c.png&w=914&q=85 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190715_04902164-40f3-4b66-928c-8fc7f606b83c.png&w=571&q=85 |
| 4 | Low Battery | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190716_fe797c9a-091f-4ab1-adb4-c81f8f47495c.png&w=914&q=85 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190716_fe797c9a-091f-4ab1-adb4-c81f8f47495c.png&w=571&q=85 |
| 5 | No Reply | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190718_6392c417-6a7c-40e9-b501-c5bc6b752c2c.png&w=914&q=85 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190718_6392c417-6a7c-40e9-b501-c5bc6b752c2c.png&w=571&q=85 |
| 6 | Analog | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190717_e049b67c-231b-49f8-99b9-23fbd678f46e.png&w=914&q=85 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190717_e049b67c-231b-49f8-99b9-23fbd678f46e.png&w=571&q=85 |
| 7 | Rewind | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190754_449c9910-c1c1-4e4a-a5d1-d9fa6feacfef.png&w=914&q=85 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190754_449c9910-c1c1-4e4a-a5d1-d9fa6feacfef.png&w=571&q=85 |
| 8 | Out Of Office | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190716_635cd62a-6803-4784-9567-c6a93d056066.png&w=914&q=85 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190716_635cd62a-6803-4784-9567-c6a93d056066.png&w=571&q=85 |
| 9 | Paper Maps | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190718_b1b78d62-6b2f-4762-ab0d-f751efdae1c7.png&w=914&q=85 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190718_b1b78d62-6b2f-4762-ab0d-f751efdae1c7.png&w=571&q=85 |

| 拼图 | 行 | URL (600 w) |
|---|---|---|
| 1 | 造型 1–3 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190756_3f427fdd-ba34-433e-bc55-eb9b03d2e1c6.png&w=600&q=85 |
| 2 | 造型 4–6 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190758_785127d3-ef7d-4831-976b-14540a7188aa.png&w=600&q=85 |
| 3 | 造型 7–9 | https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20261108_190800_4db1daba-ebb1-436f-857a-91dfab40f4b7.png&w=600&q=85 |

每张拼图是在纯色 #ececec 背景上排列的 3×3 网格，包含九张产品 packshots。拼图的第 r 行（0–2）对应其分组中的第 r 套造型，第 c 列（0–2）对应该造型的第 c 件单品。缩略图通过将拼图设为 CSS 背景来显示其中一个单元格，使用 background-size 300% 300% 和 background-position (c × 50%) (r × 50%)。绝不要将拼图切成独立文件。

## 2. 字体

仅使用一个字体家族 **Inter Tight**（Google Fonts），以两个 latin WOFF2 文件自托管：覆盖字重 300–400 的正体可变字体文件，以及字重 300 的斜体文件。font-display swap。预加载正体文件。回退字体栈为 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif。仅使用字重 300（大号展示文字）和 400（其余所有文字）。斜体用于：造型视图中的造型名称、价格、抽屉元信息，以及当前激活或悬停的抽屉名称。

排版角色：

| 角色 | 字号 / 行高 | 字重 | 字距 | 大小写 |
|---|---|---|---|---|
| 正文基础 | 16 / 24 | 400 | normal | — |
| "cap" 小标签 | 12 / 16 | 400 | 0.02em, word-spacing 0.12em | 大写，等宽数字 |
| 状态栏标志 | 24 / 24 | 300 | −0.05em | 大写 |
| 当前造型名称（左下角） | 32 / 32（≤1199 px 时为 24/24，≤809 px 时为 16/16 且字距为 −0.02em） | 300 | −0.05em | 大写 |
| 抽屉名称、造型视图标题、小票标志、小票总计 | 40 / 40（手机上为 32/32） | 300 | −0.05em | 大写 |
| ® 标记 | 12 px，顶部对齐，左外边距 2 px，字距 0，正体 | — | — | — |

相同的 0.02em letter-spacing 和 0.12em word-spacing 也适用于胶囊按钮、工具提示名称、CTA、toast 提示、尺码选项、确认按钮、光标标签、小票名称、底部栏单品名称、环形/网格按钮，以及小票上的添加按钮。

## 3. 页面头部与设计令牌

标题：“NOWHERE — 远离喧嚣，老兄”。Meta 描述：“第 01 辑。九套适合安静独处的造型。转动圆环，选一套穿搭，点击圆点购买单品。” theme-color #ececec。Viewport width=device-width, initial-scale 1。

颜色与动效令牌：

| 令牌 | 值 |
|---|---|
| studio（页面背景） | #ececec |
| paper | #ffffff |
| ink | #000000 |
| muted | #6f6f6f |
| ease | cubic-bezier(.16, 1, .3, 1) |
| spring | cubic-bezier(.34, 1.56, .64, 1) |
| morph（环形↔网格） | cubic-bezier(.7, 0, .15, 1) |
| 栏高度 | 48 px（手机上为 64 px） |
| 小票宽度 | 336 px，距右边缘 24 px；预留空间 = 336 + 24 + 24 = 384 px |

全局：box-sizing border-box，body 无外边距，隐藏横向溢出，文字抗锯齿。重置按钮样式（无边框、背景或内边距，继承字体与颜色，使用 pointer 光标）。焦点环：1 px 实线 ink 轮廓，偏移 3 px，按钮和链接的圆角半径为 999 px。

**胶囊按钮**样式（用于购物袋、造型、关闭及抽屉导航）：inline-flex，居中，min-height 36 px，内边距 0 16 px，1 px **虚线** ink 边框，999 px 圆角，白色填充，12/16 大写文字。悬停或设置 aria-current 时，变为黑色填充、白色文字和实线边框（背景/颜色过渡 0.3 s）。

## 4. 布局，从上到下

页面为单个 section（“deck”），高 100svh，min-height 640 px（手机上为 560 px），overflow clip，背景 #ececec。视觉隐藏的 h1 内容为“远离喧嚣，老兄。”（其中“老兄。”为斜体），后接隐藏段落：“第 01 辑。九套适合安静独处的造型。”和“转动圆环，选一套穿搭，点击圆点购买单品。”

### 4.1 状态栏（绝对定位，顶部，高 48 px，z 60，内边距 0 24 px，间距 16 px）
- 左侧：12 px 大写样式的实时时钟，使用 Intl 将小时:分钟格式化为两位数字，在每分钟交界时刷新。
- 接着：信号条，四条宽 3 px 的竖条，间距 2 px，高度分别为 4/6/9/12 px，颜色 rgba(0,0,0,.2)，后接文字“信号弱”。该组设置 margin-right:auto。
- 中央（绝对定位，left 50%，translateX(−50%)）：标志“NOWHERE”及一个小号 ®。
- 右侧：电池图标（24×12 px，1 px ink 边框，3 px 圆角，1 px 内边距，右边缘有 2×4 px 凸起，内部填充宽度为 12%），后接“12%”。
- 最右侧：胶囊按钮“购物袋 (0)”，min-width 96 px，min-height 32 px。数字为累计数量，每次变化时使用 spring 缓动向上弹动 4 px（0.5 s）。
- 手机（≤809 px）：内边距 0 16 px，间距 8 px；隐藏电池、“信号弱”文字和码标；购物袋按钮内边距缩为 0 12 px。

### 4.2 侧边控件
- **码标**：左上角，left 24 px，top 为 bar-height + 8 px，48×48 px。它是一个装饰性的 25×25 模块图案，以一条 SVG path 绘制（边缘锐利）：左上、右上和左下角各有一个 7×7 定位方块（外环加 3×3 核心），定位区之外的其余单元格随机填充（带种子的生成器：seed = seed × 16807 mod 2147483647，数值大于 0.52 时填充，初始 seed 7）。悬停时缩放至 1.06。手机上隐藏。
- **造型**：左边缘的竖向胶囊按钮（left 24 px，手机上为 12 px；垂直居中），宽 36 px，内边距 20 px 0，writing-mode vertical-rl，旋转 180°。文字为“造型”。用于切换抽屉开关。
- **环形 / 网格切换**：右边缘（right 24 px，手机上为 12 px；垂直居中），白色虚线边框胶囊容器内放置两个竖向按钮（宽 36 px，手机上为 32 px；内边距 16 px 0，手机上为 12 px；旋转 180°），上方为“环形”，下方为“网格”。按下的按钮为黑底白字。

### 4.3 舞台（绝对定位，inset 0，可聚焦，cursor grab，touch-action pan-y，禁止选择文字）
其中包含模特群层、网格标题层、扫光、跟随光标，以及 polite 实时播报区域。

**模特元素**：绝对定位，left 0，bottom 0，transform-origin 50% 100%，初始 opacity 0。内部有一个 `height: var(--model-h)`、aspect-ratio 4/7 的人物容器，其中包含：
- 柔和的地面阴影：一个 span，left/right −12%，bottom −3%，height 16%，由三个径向渐变构成并模糊 3 px。分别为：位于 50% 82% 的 22%×20% 椭圆，从 rgba(0,0,0,.42) 渐变至 72% 处透明；位于 50% 80% 的 42%×32% 椭圆，从 .16 渐变至 74% 处透明；位于 34% 46% 的 40%×55% 淡羽状阴影，从 .07 渐变至 72% 处透明。
- 图片：绝对定位，填满容器，object-fit contain，object-position 50% 100%，translateY(foot × 100%)。使用包含 571 w 和 914 w 版本的 srcset，以及 sizes "(max-width: 809px) 240px, 360px"。第一套造型设置 fetchpriority high。
- 点击按钮：绝对定位，inset 6% 18% 0，圆角 24 px，标签为“造型 0N：名称”。仅当前造型的按钮可通过 Tab 聚焦。

### 4.4 底部栏（绝对定位于底部，内边距 0 32 px 32 px，手机上为 0 16 px 24 px；z 5）
- **左下角**：大写样式的计数“01 / 09”，以及一个 24 px 圆形虚线边框自动播放开关，显示暂停图标（两条竖线）或播放三角形。下方是 32 px 大写样式的当前造型名称。名称变化时播放“swap”动画：从 opacity 0、blur 4 px 和向下偏移 +16 px 开始，持续 0.8 s，使用 ease。
- **底部中央**（绝对定位，left 50%，bottom 32 px，手机上为 96 px；间距 8 px）：当前造型的三个单品胶囊按钮。每个都是白色虚线边框胶囊，内边距 4 px 16 px 4 px 4 px，包含一个 48 px 圆形缩略图（手机上为 40 px；内部拼图单元格缩放至 1.18）和两行文字：12 px 大写样式的名称（最大宽度 136 px，超出省略），以及 12 px 斜体价格。悬停时变为黑底白字，缩略图在 1 s 内放大至 1.32。造型变化时，三个单品向上浮入（从 opacity 0、8 px blur 和 +24 px 开始），持续 0.9 s，使用 ease，每项错开 70 ms。在 ≤1199 px 时隐藏文字，内边距变为 4 px。点击胶囊按钮会打开造型视图并高亮对应单品。
- **右下角**：大写样式的“购买这套穿搭”，后接一个 64 px 黑色圆形（手机上为 56 px；手机上隐藏文字），内含 24 px 白色加号。悬停时圆形使用 spring 缓动缩放至 1.08，加号旋转 90°。点击打开造型视图。

## 5. 圆环（核心数学逻辑）

每次舞台尺寸变化时测量（ResizeObserver）：
- W, H = 舞台宽度和高度。“mobile”指 innerWidth < 810。
- bottomPad = 移动端为 168，其他为 120。topPad = 136。
- modelH = max(200, round((H − bottomPad − 18 − topPad) / 1.12))。将其设为舞台上的 `--model-h`。
- frontScale = 移动端为 1.12，其他为 1.165。
- dragPx（每套造型对应的像素数）= max(移动端为 90，其他为 120, W × 0.3)。
- 人物宽度 = modelH × 4/7。

圆环常量：半径系数 0.44（移动端为 0.84），透视系数 0.8（移动端为 1.1），地平线 0.06，前方步进 0.03，抬升 40 px，角度步长 = 2π/9。

对于每套造型 i，给定连续圆环位置 `pos`：
- a = (i − pos) × step，归一化到 (−π, π]。
- R = W × 半径系数，P = W × 透视系数。
- k = P / (P + R × (1 − cos a))（透视因子）。
- dist = |a| / step，near = clamp(1 − dist, 0, 1)。
- scale = k × (1 + (frontScale − 1) × near)。
- x = W/2 + R × sin(a) × k。
- yNear = H − bottomPad − 40，yFar = topPad + (H − topPad) × 0.06 − 40。
- y = yFar + (yNear − yFar) × k +（仅桌面端：H × 0.03 × near）。
- dist ≤ 1 时 blur = 1.8 × dist，否则为 min(1.8 + (dist − 1) × 2, 6.5) px。
- transform = translate3d(x, y − H, 0) translateX(−50%) scale(scale)。Opacity 为 1，但当缩放后的人物完全位于舞台外（超出任一边缘超过 4 px）时为 0，同时设置 visibility hidden。opacity 低于 0.5 时关闭 pointer-events。z-index = round(scale × 1000)。仅在 opacity 和 filter 变化时写入。

**弹簧**：pos 使用临界阻尼弹簧跟随 goal：刚度 95，阻尼 2√95，每帧分 3 个子步积分，dt 上限为 0.034 s。当 |pos − goal| 和 |velocity| 均 ≤ 0.0005 时停止。仅在移动、拖动或等待重新布局时运行 requestAnimationFrame。期间添加“is-moving”类，为模特设置 will-change。舞台离开视口时暂停（IntersectionObserver）。

**入场**：pos 初始为 −1.15，goal 为 0，因此加载时圆环会明显转动约一套造型后就位（减少动态效果模式下立即就位）。

**当前造型**：active = round(goal) mod 9。变化时更新计数、名称、实时播报区域、抽屉高亮、网格标题、小票和底部栏单品；重播名称切换、单品浮入和**扫光**动画；若造型视图已打开则关闭；并重置自动播放计时器。扫光为宽 42%、倾斜（−12°）的白色渐变带（透明 → 42% 处 .28 → 50% 处 .6 → 58% 处 .28 → 透明，100°），置于 soft-light 混合模式的覆盖层中。使用 cubic-bezier(.65,0,.35,1)，在 1.5 s 内从 translateX(−130%) 移至 330%，在进度 18% 前淡入，到结束时淡出。

**自动播放**：默认开启，减少动态效果模式下关闭。每 5 s 前进一套造型，除非标签页被隐藏、舞台不在屏幕内、用户正在拖动或使用鼠标悬停小票，或造型视图、网格、抽屉已打开（此时仅重新安排计时）。开关按钮切换其状态。任何拖动、滚轮、方向键、圆环点击、网格切换、打开抽屉、打开造型视图或小票交互都会关闭自动播放。

**拖动**（舞台上的 pointer 事件；网格或造型视图中，以及非鼠标主键操作时忽略）：
- pointerdown 时记录起始 x/y、起始 goal、pointer id 和速度轨迹。
- 移动时：若垂直移动超过 10 px 且大于水平移动，则放弃（让页面滚动）。若水平移动超过 8 px 且大于垂直移动的 1.2×，则开始拖动：捕获指针，添加“is-dragging”（cursor grabbing）并停止自动播放。
- 拖动期间：goal = startGoal − dx / dragPx，active = round(goal)，保留最后 6 个采样点。
- 松开时：速度 v = (last x − first x) / (last t − first t)，单位 px/ms；base = round(startGoal)。移动端若 |dx| > 30 或 |v| > 0.3，则移动 ±1，否则回弹。桌面端 target = round(goal − v × 160 / dragPx)；若结果等于 base 且 |v| > 0.3，则沿甩动方向再推进一套造型；限制在 base ± 2 内。
- 忽略拖动结束后 60 ms 内触发的点击。

**点击模特**：圆环中，若为正前方模特（最短有符号距离为 0），则打开造型视图，否则沿最短路径转向它。网格中，立即将圆环跳转到该模特并打开造型视图。

**滚轮**：仅响应水平方向占优的滚轮事件（deltaX 大于 deltaY），网格或造型视图中不响应。阻止默认行为，累计 deltaX，总量超过 45 时前进一套造型，然后锁定 520 ms。

**按键**（舞台聚焦时）：←/→ 单步切换；网格中 ↑/↓ 跳转 ±3；Enter 打开造型视图。在任何位置按 Escape 关闭造型视图，否则关闭抽屉。

## 6. 跟随光标（仅用于支持悬停的精细指针设备）

以指针为中心的 80 px 圆形：1 px ink 虚线边框，60% 白色背景，6 px 背景模糊。内部上下排列“拖动”和“查看”标签（12 px 大写样式）。在舞台上隐藏真实光标。每帧以 0.18 的系数缓动跟随指针。状态：
- 开启（进入舞台）：scale 0.3 → 1，opacity 0 → 1，0.6 s ease。
- 位于正前方模特或网格中的任意模特上：黑色填充、实线边框、白色“查看”。
- 位于非正前方模特上：小黑点（scale 0.2），隐藏标签。
- 拖动中：黑色，scale 0.74。
- 造型视图中：隐藏（opacity 0），标记点和关闭按钮使用 pointer 光标。
- 指针离开舞台：关闭。

## 7. 网格视图

切换时，每位模特使用 transform 1.25 s morph，以及 opacity 和 filter 0.8 s ease 过渡。进入网格时，每位模特延迟 round(|归一化后的角度| / π × 4) × 0.32 s（返回时为 0.24 s），让模特从正前方向外依次展开。1.7 s 后移除动画类。网格位置：rows = 3，top = 80（移动端为 72），rowH = (H − 96（移动端为 104）− top) / 3，colW = W/3，scale = min(rowH − 40, colW × 7/4 × 0.92) / modelH，x = colW × (col + 0.5)，y = top + rowH × (row + 1) − 32。无模糊，完全不透明，z = 10 + row。每位模特下方在 y + 12 处显示标题（“0N  名称”，使用 muted，当前项使用 ink），通过 opacity 0.8 s ease 淡入，延迟为 0.9 s + i × 50 ms。网格模式下，底部栏名称、单品和购买按钮淡出，悬停某位模特时，其余所有人物的不透明度降至 0.35。

## 8. 造型视图（“focus”）

覆盖层（z 40）在 0.45 s 内淡入摄影棚背景色，并让模特群、底部栏、码标、造型按钮和视图切换控件在 0.35 s 内淡出。
- 模特舞台区域从顶部 bar-height + 16 px 延伸至距底部 96 px，从左侧 48 px 延伸至距右侧 384 + 24 px，内容底部居中。点击空白区域关闭视图（zoom-out 光标）。手机上，区域从 bar-height + 48 px 延伸至距底部 46svh + 16 px，两侧各留 16 px。
- 新建当前模特的副本，高度 h = max(160, min(区域高度, 区域宽度 / (4/7)))，使用相同的 foot 偏移。其标记点层位于人物容器内部，使用相同的 foot 位移。
- **FLIP zoom**：测量圆环正前方人物和新人物，将起始 transform 设为 translate(Δleft, Δbottom) scale(ringHeight / newHeight)，transform-origin 0 100%，禁用过渡，强制重排，然后清除该变换，让它在 0.95 s ease 内放大就位。关闭时以动画返回当前位于圆环正前方的模特位置，950 ms 后移除副本。
- **顶部行**：左侧显示“0N.”及斜体名称（40 px，间距 12 px），右侧是带 X 的 48 px 圆形虚线关闭按钮，悬停时旋转 90°。该行从向下偏移 10 px 的位置滑入并淡入（opacity 0.8 s，transform 1 s，均延迟 0.35 s）。右内边距 = 384 + 8 px。
- **提示**位于底部中央（left 0 至 right 384 px，bottom 16 px）：“点击圆点购买这件单品”，1.1 s 后淡入。手机上隐藏。
- **标记点**：48 px 点击区域，以人物上指定的 (x%, y%) 为中心，每个内部包含一个 32 px 黑色圆形，显示“01”、“02”或“03”。使用 spring 缓动从 scale 0 弹出，持续 0.9 s，延迟 0.6 s + index × 0.11 s。悬停或激活时变为白色、带 ink 圆环，并缩放至 1.15。工具提示胶囊（虚线、白色、内边距 8 × 16 px）显示大写样式的“名称”和斜体价格。它位于圆点右侧（left: 100% − 4 px），在 0.6 s ease 内从 −8 px、scale 0.96 滑入。右侧空间不足时翻到左侧，两侧都放不下时移到下方居中，并通过水平修正与区域边缘保持 8 px 距离。悬停标记点会高亮对应小票行，点击则将该行滚动到可见位置。

标记点位置（4:7 人物的 x%、y%）和 foot 偏移：

| # | 名称 | foot | 标记点 1 | 标记点 2 | 标记点 3 |
|---|---|---|---|---|---|
| 1 | Somewhere Else | .0501 | 52, 44 | 80, 40 | 44, 57 |
| 2 | Dial-Up | .0501 | 76, 45 | 54, 68 | 45, 87 |
| 3 | Long Walks | .0656 | 66, 47 | 51, 64 | 48, 87 |
| 4 | Low Battery | .0582 | 76, 47 | 43, 70 | 54, 88 |
| 5 | No Reply | .065 | 72, 41 | 51, 68 | 45, 89 |
| 6 | Analog | .047 | 75, 45 | 51, 70 | 46, 88 |
| 7 | Rewind | .0377 | 69, 43 | 51, 72 | 56, 92 |
| 8 | Out Of Office | .0891 | 65, 47 | 43, 68 | 60, 86 |
| 9 | Paper Maps | .0588 | 66, 41 | 48, 72 | 56, 88 |

## 9. 小票（打印出现的抽屉）

一个 aside，top 0，right 24 px，宽 336 px，白色，max-height calc(100% − 32 px)，采用纵向 flex 布局。底边使用 mask 制作撕纸锯齿：conic-gradient(from −45deg at bottom, transparent, black 1deg 89deg, transparent 90deg)，尺寸为宽 16 px、高 100%。默认隐藏。造型视图打开时变为可见，并以 18 个硬步进（steps(18, end)）在 1.3 s 内从 translateY(−100%) **向下打印**至 0，延迟 0.3 s。手机上位于底部（inset auto 16 px 0，max-height 46svh），从 +100% **向上**打印。

内容，从上到下：
1. **头部**（居中，内边距 32 px 0 16 px，两侧外边距 24 px，底部虚线）：40 px 的标志“NOWHERE®”、大写样式的“第 01 辑 · 收银台 0004 · LISBON”，以及大写样式的“造型 0N — 名称”。
2. **明细行**（可滚动，内边距 0 24 px），每件单品一行。三列网格（24 px, 1fr, auto），区域为 "n name price" / "n kind add"：通过伪元素显示编号“0N”；12 px 大写样式的名称；右侧价格；muted 大写样式的类别（上装、外套、下装、鞋履、配饰）；以及“添加”小按钮（高 24 px，虚线，圆角 999）。每行有底部虚线，另有一条 1 px ink 实线，在该行处于“hot”状态时从左侧展开（scaleX 0 → 1，0.9 s ease）。
   - 点击有尺码单品的添加按钮时，切换显示下落进入的尺码选择器（从 −8 px 开始，0.7 s）：包含尺码选项（最小 40 × 28 px，虚线，选中项为纯黑色，按下时缩放至 0.94）和全宽黑色“加入购物袋”按钮（min-height 32 px）。同时，小按钮文字变为“关闭”。均码单品立即加入。
   - 服装尺码为 S、M、L、XL；鞋码为 40–45；腰带为均码。默认选中第二个尺码（M 或 41）。
   - 加入后，小按钮变为纯黑色并显示“已在购物袋”，购物袋数量增加并弹动，同时 toast 提示“单品已加入购物袋。”（一次加入多件时显示“整套穿搭已加入购物袋。”）。
3. **套装**（内边距 16 px 24 px，间距 12 px）：先是一行消息（为空时隐藏），接着是汇总列表，包含小计、“整套优惠 −10%”（显示为 −$x），以及虚线下方使用 40 px 细字重的总计行（subtotal × 0.9）。金额为整数时显示整美元，否则保留两位小数。然后是全宽黑色 CTA（min-height 48 px）“整套加入购物袋”，带长右箭头，悬停时向右移动 4 px。CTA 会加入所有已选择尺码或为均码的单品。其余单品则打开尺码选择器（手机上仅打开第一个），并显示“请选择尺码：名称、名称”。所有单品均已在购物袋中时，CTA 变为白色，带内嵌 ink 轮廓，文字为“整套穿搭已在购物袋中”。
4. **底部**：使用重复线性渐变绘制的 40 px 条形码（ink 0–2 px，空白至 4，ink 4–5，空白至 8，ink 8–11，空白至 12，ink 12–13，空白至 17），后接大写样式的“感谢你与 NOWHERE 同行。”。
手机上隐藏头部、底部和小计/折扣行，总计字号降至 32 px。

鼠标悬停小票时暂停自动播放。悬停明细行会高亮对应标记点，离开列表后清除高亮。购物车状态按造型分别保存（是否已加入、所选尺码、是否选择过尺码）。

toast 提示：固定在底部中央，距底部 24 px，黑色胶囊、白色 12 px 大写样式文字，内边距 12 px 20 px。使用 spring 缓动从 +16 px 处上升（0.5 s），2.5 s 后隐藏。

## 10. 造型抽屉

从左侧滑入的白色面板（宽 min(560 px, 100%)，右侧 1 px ink 实线边框，内边距 24 px 32 px 32 px，手机上为 16 px 16 px 24 px）。关闭时位于 translateX(−101%)，隐藏。打开时以 1 s ease 滑入，并用 rgba(0,0,0,.14) 的 200vmax box-shadow 压暗页面。
- 顶部行：大写样式的“造型 · 第 01 辑”，以及“关闭”胶囊按钮。
- 包含 9 套造型的有序列表，每项为全宽行，顶部有虚线（最后一行也有底部虚线）。三列网格（32 px, 1fr, auto）包含大写样式的编号、40 px 细字重大写样式的名称（超出省略），以及 muted 斜体“3 件单品 · $total”。当前造型名称为斜体。悬停时名称变为斜体，并在 0.7 s 内向右移动 8 px。打开时各行向上浮入（1 s ease，延迟 0.12 s + i × 50 ms）。点击某行，圆环沿最短路径转向该造型并关闭抽屉。
- 底部导航胶囊：“第 01 辑”、“地点”、“来信”、“明信片”。
- 抽屉打开期间，码标和底部栏名称淡出。打开时聚焦当前造型所在行，关闭时焦点返回造型按钮。

## 11. 内容

| # | 造型 | 单品 1（类别、价格） | 单品 2 | 单品 3 |
|---|---|---|---|---|
| 1 | Somewhere Else | 罗纹背心（上装，$36） | 条纹开襟衬衫（上装，$74） | 编织腰带（配饰，$32，均码） |
| 2 | Dial-Up | 灯芯绒卡车夹克（外套，$142） | 褶裥短裤（下装，$64） | 麂皮莫卡辛鞋（鞋履，$118） |
| 3 | Long Walks | 摇粒绒拉链上衣（上装，$92） | 尼龙徒步短裤（下装，$58） | 网面运动鞋（鞋履，$124） |
| 4 | Low Battery | 黄色套头防风外套（外套，$128） | 抓绒束脚裤（下装，$72） | 厚底凉鞋（鞋履，$84） |
| 5 | No Reply | 藏蓝色高领针织衫（上装，$118） | 羊毛长裤（下装，$106） | 皮革玛丽珍鞋（鞋履，$134） |
| 6 | Analog | 灯芯绒西装外套（外套，$156） | 黑色修身牛仔裤（下装，$98） | 沙漠靴（鞋履，$146） |
| 7 | Rewind | 褪色黑色连帽卫衣（上装，$86） | 木工裤（下装，$94） | 复古球场运动鞋（鞋履，$116） |
| 8 | Out Of Office | 亚麻古巴领衬衫（上装，$76） | 褶裥百慕大短裤（下装，$68） | 皮革一字拖（鞋履，$62） |
| 9 | Paper Maps | 橄榄球衫（上装，$88） | 锥形卡其裤（下装，$84） | 麂皮低帮鞋（鞋履，$122） |

## 12. 无障碍与减少动态效果

舞台是可聚焦区域（aria-roledescription 为“轮播”，网格模式下为“造型网格”），标签为“造型 — 方向键转动圆环，Enter 打开造型”。设有 polite 实时播报区域，播报“造型 N：名称”。抽屉、造型视图和小票切换 aria-hidden，造型按钮切换 aria-expanded，视图按钮和尺码选项使用 aria-pressed。在 prefers-reduced-motion 下关闭所有动画和过渡，圆环直接跳转而不使用弹簧，无入场旋转和自动播放，光标即时跟随。

## 13. 验收清单
- 加载时圆环转动约一个位置后就位；正前方模特最大且清晰，相邻模特缩小、向地平线上升，模糊最高达到 6.5 px。
- 拖动约页面宽度的 30% 移动一套造型；快速甩动最多移动两套；横向滚动切换一套；方向键切换一套。
- 每 5 s 前进一次，伴随扫光、名称切换和单品胶囊向上浮入。
- 跟随圆形显示“拖动”，位于正前方模特上时变黑并显示“查看”，位于其他模特上时缩为圆点。
- 点击正前方模特，它会从圆环位置平滑放大进入造型视图；小票以 18 个可见步进向下打印；标记点逐个弹出。
- 标记点工具提示始终不超出区域；悬停明细行和标记点时会相互高亮。
- 尺码选择器、加入购物袋、购物袋数量弹动、toast 提示、带尺码提示的整套 CTA，以及完成状态均正常工作。
- 网格切换以波纹式动画将模特排成带标题的 3×3 网格；切换回来时以波纹式动画回到圆环。
- 手机布局在 390 px 宽度下正常工作，无横向滚动。