Starfield 星空

页面背后的一片小星星。它们慢慢往一侧漂，近的大一些、亮一些、快一些，每颗都按自己的节奏闪。

什么时候用

一页一个，当整页的背景。不要放进卡片，也不要放在会滚过去的区块里。

<body>
  <Starfield />
  <TopNav … />
  <main>…</main>
</body>

它固定在窗口上，压在所有内容下面，内容不用自己写 z-index。系统的 base.css 已经把画布色铺在整页最底下；页面如果再给 <html> 加背景，就会把星空盖住。有自己底色的区域（比如卡片）会挡住后面的星星。

写 position="absolute" 时，它改成填满最近的定位祖先，上面的示例就是这样。

一个和窗口一样大的 <canvas>，按屏幕分辨率画，最多两倍 CSS 像素。每 5000 平方像素一颗星，每次的位置都一样，所以窗口变大变小时图案不变。

自定义属性	默认值
`--ds-sky-star`	`--accent-teal`
`--ds-sky-star-strength`	浅色主题 `1.6`，让星星在奶油色底上看得见；深色 `1`

星空在屏幕上时一直在动，不在屏幕上时停下。打开减少动效（系统设置或 data-reduce-motion="true"）时它照样在动，这一点和系统里别的动效不同：漂移又慢又匀，没有闪动和跳动，网站也希望星空一直是活的。切换主题时，星星的颜色跟着页面一起渐变；打开减少动效时和页面一样立刻换。

只是装饰：元素带 aria-hidden，也不接收点击。星星很淡，上面的文字对比度不受影响。

Starfield.astro，画法在 sky.ts。交付包里没有这个组件：The Key of Urala 和 Rainbow Stone 两个页面各自画星空。数值照交付包，颜色改用 token，浅色主题是新加的。