汽车博客需要燃油消耗计算器小部件

我经营一个小型汽车博客，想添加一个互动小部件，帮助读者估算计划行程所需的燃油量以及大致费用。访客输入行程的公里数和他们汽车每100公里的平均燃油消耗，小部件会立即计算出所需的燃油量（升）和大致的行程成本，一旦输入了每升的价格。

计算器应该像页面的自然部分，而不是一个附加的插件。它需要在桌面和移动设备上顺畅运行，实时更新结果，随着访客输入或按下计算按钮后更新，并优雅地处理边缘情况，例如空字段、零值、不现实的数字或使用逗号代替点。如果燃油价格字段可以为不同地区保持可编辑，并且有一个小开关让小部件在升和加仑、公里和英里之间切换，那就更好了。

在视觉上，小部件应该轻量，匹配干净现代的汽车博客布局，并快速加载而不使用重型库——优先使用纯JavaScript或非常轻的框架。请提供一个可嵌入的标记、样式和脚本的准备块，并附上关于如何将其放入现有页面的简短说明和轻量代码注释，以便后续可以调整公式或样式。

所需内容：
— 行程距离和每100公里的平均燃油消耗的输入字段；
— 从每升价格字段计算所需燃油量和大致行程成本；
— 可选单位切换在公里/英里和升/加仑之间；
— 响应式布局匹配汽车相关网站设计；
— 基本输入验证，带有清晰、友好的错误信息。