专注模式开关

做一个"专注模式开关"网页组件，单个 HTML 文件，不用任何外部库。开关的轨道里是一个低分辨率的像素小书房，住着一个人；滑块是一颗液态玻璃透镜。左端是"可以打扰"，右端是"专注"，拨动的过程就是这个人从被打扰到进入专注的一段故事。

一、页面

1. body 底色 #e9e9e9，正中放一个 16:9 的舞台：宽 min(100vw, 100vh\*16/9)。
2. 舞台底色在 #f5ecd9 和调色板里最深的藏青之间，用 oklab 按变量 --night（0–1）混合，跟着房间一起变暗。
3. 组件宽度占舞台 60%，宽高比 1.6439。页面上只有这个组件，不要文字、标签、署名。

二、构造（三层）

1. 像素世界：核心 192×112 像素，四周多画 14 像素余量，供透镜看到窗外。只用约 20 个颜色编号绘制，按 30 帧更新。
2. WebGL2 合成：用整数倍放大，叠加外壳、窗口凹陷、液态透镜和光场。放大倍数 k 按窗口高度取：先取 floor(窗口高/112)，如果用 k+1 时裁掉的部分不超过 12%，就用 k+1。像素永远不糊。
3. 一个透明的 button（role="switch"）盖在胶囊上负责交互。

三、调色板

1. 5 个基础色：bg #f5ecd9、surface #8c9a62、fg #1b2146、muted #7f97b3、accent #efa02c。
2. 每个色在 OKLab 里取 4 档明度，超出色域就逐步降饱和度，共 20 色： 
   - bg [.76 .85 .93 .985]
   - surface [.40 .52 .64 .76]
   - fg [.17 .25 .33 .44]
   - muted [.50 .62 .74 .86]
   - accent [.50 .66 .80 .92]
3. 每种材质存 4 列颜色：白天 / 黄昏 / 傍晚 / 夜。在相邻关键时刻之间，用 4×4 Bayer 抖动逐像素替换，不混出中间色。
4. 关键时刻（小时 → 列）： 
   - 0、1.5、2.0 → 夜
   - 2.5 → 傍晚
   - 3.0 → 黄昏
   - 3.6、10、15 → 白天
   - 17、18 → 黄昏
   - 19 → 傍晚
   - 20.3、24 → 夜
5. 窗外的景色永远是白天的颜色，变暗的只有室内。
6. 额外 3 种照明变体：阴影（暗一档）、灯光（换成琥珀色）、日光（亮一档）。

四、胶囊、外壳与透镜（shader）

1. 尺寸： 
   - 胶囊高 = 组件高 / 1.32，宽高比 1.85
   - 外壳厚 = 胶囊高 × 0.046
   - 透镜半径 = 窗口高/2 − 胶囊高 × 0.032
2. 外壳： 
   - 抛光的圆滑厚边，法线沿厚度方向弯曲
   - 菲涅尔反射一个"摄影棚"：左上方一块大柔光，下方一块很弱的补光
   - 颜色白天用 bg 最亮档，专注时用 fg 第二档
   - 靠近窗口的一侧压暗，做出凹陷感
3. 窗口：上沿有内阴影，四周一圈暗边，玻璃上有大面积、很淡的斜向高光。
4. 透镜： 
   - 中间平坦，放大 1.24 倍
   - 外圈 30% 迅速弯折，把外面的画面压缩进来，带约 5% 的色散
   - 在画面上投出影子（按下时更大）
   - 下沿内侧聚一圈光
   - 上方有柔和的反光
   - 边缘靠变暗来显出厚度，不画亮边
5. 外面：一大一小两层柔影。台灯亮时，暖光从胶囊漏到外面的背景上，向外指数衰减。
6. 最后叠 ±0.75/255 的噪点，防止色带。

五、光场

1. 世界里会发光的像素（台灯、屏幕、窗外天光、手机）按权重累加到一张 72 列的网格上。
2. 网格先做两次半径 1 的 box blur，再加上两次半径 3 的 blur × 0.55。
3. 用 B 样条平滑采样，以滤色方式叠到窗口和透镜里。
4. 台灯光的重心和强度，同时用来照亮外壳。

六、书房布局（核心坐标）

1. 墙和地面： 
   - 地板 y≥96，木板越往前越宽
   - 天花板 y<4，顶线 4–6
   - 奶油色墙面
   - 白色腰板 y74–91，每 8 像素一条缝
   - 踢脚线 92–95
2. 窗户：&#x20;
   - 玻璃 x22–60、y20–62，3 像素白框，下面是窗台
   - 窗外有远山、近山、两棵圆树、对面房子的屋顶和草地，云慢慢飘，偶尔有鸟飞过
   - 上下推拉窗：下扇往上推就是开窗
   - 百叶窗从上往下降：每 3 行里 2 行是叶片，1 行是透进来的一条日光
   - 窗台上一盆小植物，开窗时被风吹得摇
3. 书桌上下：&#x20;
   - 小画框 x76–92、y24–36
   - 书桌面 y70、x68–157，左侧一条桌腿，右侧是三格抽屉柜
   - 显示器屏幕 x113–136、y47–61，下面有支架
   - 台灯在 x147：底座、立杆、斜臂，灯罩 y52–55
   - 手机 x73，杯子 x82，耳机放在 x140
   - 办公椅中心 x96
4. 书架 x162–190、y32–95：&#x20;
   - 摆着书和一只篮子
   - 第二层放水壶和豆子罐
   - 顶上一盆垂着藤的绿植
5. 地上一块椭圆地毯。

七、拨杆位置 → 时钟

1. 往右：时钟 = 12 + 9.5x。
2. 停在右端时，时钟在 26 秒内从 21.5 慢慢走到 23.4。
3. 从右端往回：时钟 = mix(36, 离开时的时钟, x)，先走过 24 再从 0 走到 12，所以往回是另一条路。
4. 暗度 = smoothstep(17.4, 20.2, h) + 1 − smoothstep(1.5, 3.6, h)，同时控制外壳和页面底色。

八、故事时间线（h 为小时）

1. 往右：&#x20;
   - 12–14 可以打扰：&#x20;
     - 窗开着，每 1.5–2.6 秒有一个消息气泡从窗外由小变大飞进来，划一道弧落到手机上
     - 手机震动、亮屏、右上角出现角标，人转头看一眼
     - 屏幕上是聊天界面，消息从下往上堆
   - 14–14.75：伸手拿起耳机戴上；14.7 起屏幕切成深色代码编辑器
   - 15.4 起开始打字，代码一行行出现，有闪烁的光标
   - 15.2–15.9 关窗
   - 16–19.2 百叶窗降下
   - 18.4 台灯闪两下后亮起
   - 关窗以后，气泡会撞上玻璃：闪一下、压扁、往下滑、慢慢淡掉，同时记进"积压"
   - 21.5 起进入深度专注：&#x20;
     - 人往前凑 1 像素，打字速度从每秒 8 字提到 14 字
     - 不再来新的气泡
     - 咖啡热气在 19.5–22.6 之间慢慢没了
2. 往回：&#x20;
   - 0–1.3 伸懒腰，双臂举过头顶；0.65 摘下耳机
   - 1.7 关台灯
   - 1.4–3.4 拉起百叶窗
   - 3.8–6.6 起身走到书架前烧水（4.6 起水壶冒汽，杯子放在架子上）
   - 6.6 端着冒热气的杯子走回来，坐下后时不时喝一口
   - 7.0–7.7 开窗
   - 7.7 起，积压的消息（至少 4 条）每 0.14 秒一条涌进来，屏幕切回聊天

九、住人

1. 比例约 1 像素 = 3cm。坐着时背对镜头：&#x20;
   - 9 像素宽的黑发后脑，带一点高光
   - 两侧露出耳朵
   - 橄榄绿上衣
   - 手肘随打字轻微交替动
2. 耳机是白色的，戴上后能看到头梁和两个耳罩。
3. 房间暗下来、屏幕是主要光源时，在头发右侧和右肩画一圈灰蓝色的亮边像素。
4. 站着时是侧身，走路时腿迈开、手臂摆动；匆忙时走得更快。
5. 拖得太快（速度大于每秒 3.4 个行程，冷却 1.5 秒）：&#x20;
   - 坐着时头上冒出"！"，头抬高 2 像素，耳机滑到脖子上
   - 站着时原地跳一下
6. 随机眨眼。

十、光和粒子

1. 台灯照在桌面上是暖色，照在墙上是亮一档的同色调。
2. 白天窗户的日光在地板上落成一块斜光斑，百叶窗放下后变成一条条亮线。
3. 日光里飘几颗灰尘。
4. 杯子和水壶冒的热气用抖动做淡出。

十一、手感和交互

1. 拖动：滑块跟手（指数逼近，速率 34）。
2. 松手：&#x20;
   - 目标 = (x + 速度×0.09 ≥ 0.5) ? 1 : 0，速度限制在 ±3
   - 用临界阻尼弹簧吸过去（ω = 9.5，减弱动效时 16）
3. 透镜：&#x20;
   - 按下时浮起（指数 14），半径 +1.2%
   - 用欠阻尼弹簧（k 170，c 11）跟着 |速度|×0.42 拉伸：宽 ×(1+0.2s)，高 ×(1−0.075s)
   - 到端点再弹一下
4. 点击切换。方向键每次走 4%，读屏播报当前阶段：可以打扰 / 进入专注 / 专注 / 结束专注 / 休息。
5. 用 aria-checked 表示状态，派发 change 事件。

十二、收尾

1. prefers-reduced-motion 时：没有拉伸、惊吓和粒子，静止时停止绘制。
2. 移出屏幕就暂停。
3. WebGL2 不可用时，退回 2D canvas：把像素世界按整数倍画进胶囊形的裁切里，再画一个半透明的圆滑块。
4. 只输出这一个 HTML 文件。