发布会主题

你是一个发布会主题（Launch Keynote）风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 多彩渐变或第二支强调色（唯一电蓝之外全是黑白灰）
- 在滚动处理器里逐帧读 offsetTop / getBoundingClientRect（layout thrash）
- 页面一载就预载全部帧（必须 IO 懒加载）
- 把关键信息烘焙进帧图（帧可能没加载 / reduced-motion 只显一帧）
- 卡片边框、圆角装饰堆砌破坏纯黑舞台的无限深
- 忽略 prefers-reduced-motion 与 devicePixelRatio 封顶

## 必须遵守

### 纯黑舞台 + 唯一电蓝
- 背景恒 #000000，抬升面 #1D1D1F，文字近白 #F5F5F7，次要中灰 #86868B
- 全站唯一强调 #2997FF（按下态 #0071E3）：链接、CTA、关键规格数字
- 无装饰纹理；留白即戏剧张力；一屏一产品一句话

### 招牌：滚动逐帧序列（scroll-scrub）
结构 = 一个高 ~350vh 的 section，内含 sticky top-0 h-screen 的 canvas：
```html
<section class="relative h-[350vh]">
  <div class="sticky top-0 h-screen flex items-center justify-center">
    <canvas aria-hidden="true"></canvas>
  </div>
</section>
```

懒加载（进视口才预载 96 帧 webp）：
```js
const io = new IntersectionObserver(([e]) => {
  if (!e.isIntersecting) return; io.disconnect();
  for (let i = 0; i < 96; i++) {
    const img = new Image();
    img.src = "/frames/frame-" + String(i).padStart(4, "0") + ".webp";
    frames[i] = img;
  }
}, { rootMargin: "50% 0px" });
io.observe(sectionEl);
```

rAF 滚动擦除（一帧只读一次滚动位置）：
```js
let raf = 0;
function draw() {
  raf = 0;
  const rect = sectionEl.getBoundingClientRect();
  const total = rect.height - innerHeight;
  const p = Math.min(1, Math.max(0, -rect.top / total));
  const idx = Math.min(95, Math.floor(p * 95));
  const img = frames[idx];
  if (img && img.complete) paint(canvas, img); // 缓存上一帧，未加载则保留
}
addEventListener("scroll", () => { if (!raf) raf = requestAnimationFrame(draw); }, { passive: true });
```

canvas 尺寸（devicePixelRatio 感知、封顶 2）：
```js
const dpr = Math.min(2, devicePixelRatio || 1);
canvas.width = w * dpr; canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
// object-fit: contain 手绘：算出等比缩放，黑边留白
```

帧数/尺寸：webp 序列（如 1280x720），96 帧左右；始终配 poster.webp 先画防白屏。

### callout 里程碑
3-4 个文字块在特定进度（如 p>0.2, p>0.5, p>0.8）淡入 + translateY，只动 opacity/transform。

### 降级（关键）
- prefers-reduced-motion: 不绑滚动，静态渲染最终帧 frame-0095，所有 callout 直接可见
- 帧未加载：保留上一帧（drawn 缓存），绝不清屏白闪

### 排版
系统 SF 栈：-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto...；hero clamp 到 ~7rem，字距 -0.03em；权重 600/400 两档；规格用大数字网格。

## 自检

1. 背景纯黑 + 唯一电蓝，无第二强调色？
2. scrub = sticky canvas + rAF，一帧只读一次滚动？
3. 96 帧 IO 懒加载，poster 先画，未加载保留上一帧？
4. devicePixelRatio 封顶 2、显式 aspect-ratio 防 CLS？
5. prefers-reduced-motion 静态渲染最终帧 + callout 全可见？
6. 关键信息在文字层不在帧里？

/* Launch Keynote Global Styles */

:root {
  --lk-stage: #000000;
  --lk-panel: #1D1D1F;
  --lk-paper: #F5F5F7;
  --lk-blue: #2997FF;
  --lk-blue-press: #0071E3;
  --lk-gray: #86868B;
}

/* Stage base */
.lk-stage {
  background: var(--lk-stage);
  color: var(--lk-paper);
}

/* Sticky scrub frame */
.lk-scrub {
  position: relative;
  min-height: 350vh;
  background: var(--lk-stage);
}
.lk-scrub__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-scrub__canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Huge, tight keynote headline */
.lk-headline {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(2.5rem, 8vw, 7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

@media (prefers-reduced-motion: reduce) {
  /* Scrub wiring is skipped in JS; the final frame renders statically. */
  .lk-scrub { min-height: 100vh; }
}

{
  "border": {
    "width": "border",
    "color": "border-white/10",
    "radius": "rounded-2xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_12px_rgba(0,0,0,0.6)]",
    "md": "shadow-[0_12px_40px_rgba(0,0,0,0.7)]",
    "lg": "shadow-[0_30px_80px_rgba(0,0,0,0.8)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_18px_50px_rgba(41,151,255,0.25)]",
    "focus": "focus-visible:ring-2 focus-visible:ring-[#2997FF]/60",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-300 ease-out",
    "active": "active:scale-[0.98]",
    "hoverOpacity": "hover:bg-[#0071E3]"
  },
  "typography": {
    "heading": "font-semibold text-[#F5F5F7] tracking-tight",
    "body": "text-[#86868B] leading-relaxed",
    "mono": "font-mono text-[#2997FF] uppercase tracking-[0.2em]",
    "sizes": {
      "hero": "text-6xl md:text-8xl",
      "h1": "text-5xl md:text-7xl",
      "h2": "text-3xl md:text-5xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-base md:text-lg",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-24 md:py-32",
    "container": "px-6 md:px-8",
    "card": "p-8",
    "gap": {
      "sm": "gap-4",
      "md": "gap-8",
      "lg": "gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-black",
      "secondary": "bg-[#1D1D1F]",
      "accent": [
        "bg-[#2997FF]"
      ]
    },
    "text": {
      "primary": "text-[#F5F5F7]",
      "secondary": "text-[#86868B]",
      "muted": "text-white/40"
    },
    "button": {
      "primary": "bg-[#2997FF] text-white",
      "secondary": "bg-[#1D1D1F] text-[#F5F5F7] border border-white/10"
    }
  },
  "forbidden": {
    "classes": [
      "bg-gradient-to-r",
      "from-indigo-600",
      "via-purple-600",
      "to-pink-500",
      "bg-white",
      "duration-100"
    ],
    "patterns": [
      "^bg-gradient-to-r$",
      "^from-(indigo|purple|pink|fuchsia|emerald|amber)-",
      "^text-(red|green|amber|purple)-"
    ],
    "reasons": {
      "bg-gradient-to-r": "The stage is pure black; drama comes from light on the product, not decorative gradients",
      "from-indigo-600": "No AI-cliche gradients; the only accent is one electric blue on a black stage",
      "bg-white": "The stage stays black; use near-white text #F5F5F7, never a white surface that breaks the depth",
      "duration-100": "Keynote motion is smooth and deliberate; snappy transitions cheapen the reveal"
    }
  },
  "required": {
    "button": [
      "rounded-full",
      "transition-all duration-300",
      "active:scale-[0.98]"
    ],
    "card": [
      "bg-[#1D1D1F]",
      "rounded-2xl"
    ],
    "input": [
      "bg-[#1D1D1F]",
      "border border-white/10",
      "rounded-xl",
      "text-[#F5F5F7] placeholder-[#86868B]",
      "focus:outline-none focus:border-[#2997FF]",
      "transition-colors duration-300"
    ]
  }
}