请制作原生单页 HTML 的图片 CSS 裁切教学工具，样式和脚本内联，无第三方、站外请求或存储。与 index.html 平铺放置 cover.png，三张卡始终引用这同一源图，不生成或修改图片像素。图片是 AI 生成的假想露营场景，帐篷在画面右侧，不是实拍或产品界面。

三卡为 #wide 16:9、#square 1:1、#portrait 3:4，以 object-fit:cover 显示。每卡独立提供有明确标签的原生 X/Y range，0–100、步长1、默认50/50，显示当前百分比。拖动或键盘调整只更新该卡的 object-position、读数和 CSS；每卡重置仅将本卡恢复50/50。

每卡提供可读、可选中的完整 CSS 文本与复制按钮。CSS 应含本卡选择器、比例、图片尺寸、object-fit 和当前 object-position，可独立复现而不影响其他卡。仅在剪贴板写入成功后报告已复制；失败时聚焦并选中对应文本，明确提示手动复制，不把已选中说成已复制。

页面说明：只改变显示裁切，不改源图、不识别主体、不扩图。百分比使图片与容器各自的同百分比位置对齐；50%代表居中对齐，不是主体坐标。某轴无溢出时，拖动该轴可能没有可见变化。

验收：三卡初始50/50且引用同一 cover.png；只改宽卡X，另两卡数值及CSS不变；用Tab定位滑杆并用方向键调整，核对读数与CSS同步；重置本卡不影响其他卡；分别核对比例与复制的CSS。测试复制成功和拒绝/不可用情形，失败必须选中正确文本并提示手动复制。只记录实际浏览器结果，未运行的项目标待验证。
