{# A backdrop (docs/backgrounds.md, #157): the page's `backdrop` data drawn
   by the engine, Rust compiled to WebAssembly. The viewer's choice (Settings › Appearance) is a cookie;
   unset, a touch-only device or Save-Data gets a still sky. Any failure
   leaves no backdrop and nothing else changed. #}
<canvas id="backdrop" aria-hidden="true"></canvas>
<script type="application/json" id="backdrop-data">{{ backdrop|safe }}</script>
<script type="module">
const canvas = document.getElementById("backdrop");
const chosen = document.cookie.match(/(?:^|; )backdrop=(moving|still|off)/);
const touch = matchMedia("(pointer: coarse)").matches && !matchMedia("(pointer: fine)").matches;
const pick = chosen ? chosen[1] : (touch || (navigator.connection && navigator.connection.saveData) ? "still" : "moving");
if (pick === "off") {
  canvas.remove();
} else {
  try {
    const bd = await import("/static/backdrop/backdrop.js?v={{ shell.assets() }}");
    await bd.default({ module_or_path: "/static/backdrop/backdrop_bg.wasm?v={{ shell.assets() }}" });
    bd.start(canvas, JSON.parse(document.getElementById("backdrop-data").textContent), pick === "still");
  } catch (e) {
    canvas.remove();
  }
}
</script>