MY SKY: full-page layout polish — aperture pinning, wheel-above-form, centred wheel

- sky_view passes page_class="page-sky" so the footer pins correctly
- _natus.scss: page-sky aperture block (mirrors page-wallet pattern);
  sky-page stacks wheel above form via flex order + page-level scroll;
  wheel col uses aspect-ratio:1/1 so it takes natural square size without
  compressing to fit the form
- natus-wheel.js: _layout() sets viewBox + preserveAspectRatio="xMidYMid meet"
  so the wheel is always centred inside the SVG element regardless of its
  aspect ratio (fixes left-alignment in the dashboard applet)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/templates/apps/dashboard/_partials/_applet-my-sky.html

@@ -1,6 +1,25 @@
+{% load static %}
 <section
     id="id_applet_my_sky"
     style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
 >
     <h2><a href="{% url 'sky' %}">My Sky</a></h2>
+    {% if request.user.sky_chart_data %}
+    <svg id="id_my_sky_svg" class="natus-svg"></svg>
+    {{ request.user.sky_chart_data|json_script:"id_my_sky_data" }}
+    {% endif %}
 </section>
+
+{% if request.user.sky_chart_data %}
+<div id="id_natus_tooltip" class="tt" style="display:none;"></div>
+<script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
+<script src="{% static 'apps/gameboard/natus-wheel.js' %}"></script>
+<script>
+(function () {
+  'use strict';
+  const data  = JSON.parse(document.getElementById('id_my_sky_data').textContent);
+  const svgEl = document.getElementById('id_my_sky_svg');
+  NatusWheel.preload().then(function () { NatusWheel.draw(svgEl, data); });
+})();
+</script>
+{% endif %}