HTML + CSS 中的航班滑块

上周，我创建了一个输入范围，它看起来像一架飞往目的地的飞机（左右移动飞机）：

我尽量在保持代码简洁且不依赖外部资源（JavaScript 或图片）的同时，添加尽可能多的细节：

• 它使用单个 HTML 元素（一个输入范围，尽管它应该是 <a> <progress>）。
• 它包含一个用于更新 CSS 变量的 JS 命令。
• 飞机利用三角函数起飞和降落
• 利用容器查询，飞机可以缩小尺寸，变成直升机（虽然我不建议用它从纽约飞往马德里）。
• 飞机和直升机都是用 CSS 制作的，而不是 SVG（再次强调，这是因为 CSS 不依赖外部资源……虽然我承认用 SVG 会更好看）。
• 它有多种打印样式
• 它的编码考虑到了易用性（尽管可能并不完美）：支持键盘输入，也支持高对比度模式。
• 它适用于所有现代浏览器。

有什么反馈意见吗？我会在本周末写一篇文章，详细介绍代码的编写过程。关于代码或编写过程，您希望我添加哪些内容？