<!doctype html>
<html lang="en">
{{ head_html|safe }}
<body class="sc-body" style="margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: hsl(var(--background)); color: hsl(var(--foreground));">
	{{ admin_banner_html|safe }}
	<header class="sc-hairline-bottom" style="width: 100%;">
		<div class="sc-content-well">{{ slots.header|safe }}</div>
	</header>
	<main class="sc-content-well" style="flex: 1 1 auto; padding-top: 3rem; padding-bottom: 3rem;" data-content-well>
		<div class="grid grid-cols-12 gap-6" data-grid="swiss-12">
			<article class="sc-article-measure" style="grid-column: span 12 / span 12;">
				{% if slots.main %}{{ slots.main|safe }}{% else %}<p class="sc-stat-label">No article content yet.</p>{% endif %}
			</article>
		</div>
		{% if slots.aside %}<aside class="sc-hairline-top" style="margin-top: 3rem; padding-top: 2rem;">{{ slots.aside|safe }}</aside>{% endif %}
	</main>
	<footer style="width: 100%; margin-top: auto;">{{ slots.footer|safe }}</footer>
		<script>
	/* Sci-Fi Clean MID motion: scroll-reveal, line-draw schematics, ticking
	   counters. Dependency-free. prefers-reduced-motion => everything static
	   and counters keep their final text. No JS => nothing runs, all visible. */
	(function(){
	  var root = document.documentElement;
	  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
	  if (reduce) return;
	  root.classList.add('sc-js');
	  var revealSel = '[data-sc-reveal], .sc-schematic';
	  var items = [].slice.call(document.querySelectorAll(revealSel));
	  if ('IntersectionObserver' in window) {
	    var io = new IntersectionObserver(function(entries){
	      entries.forEach(function(e){
	        if (e.isIntersecting) { e.target.classList.add('sc-in'); io.unobserve(e.target); }
	      });
	    }, { rootMargin: '0px 0px -8% 0px' });
	    items.forEach(function(el){ io.observe(el); });
	    /* Reveal anything already on screen now: first-screen readouts must not
	       wait on the async observer or a scroll (fixes ghosted above-the-fold
	       content in no-scroll captures / IO gaps). */
	    requestAnimationFrame(function(){
	      var vh = window.innerHeight || document.documentElement.clientHeight;
	      items.forEach(function(el){ if (el.getBoundingClientRect().top < vh) { el.classList.add("sc-in"); io.unobserve(el); } });
	    });
	    /* Safety net: guarantee full reveal for no-scroll captures / IO gaps. */
	    setTimeout(function(){ items.forEach(function(el){ el.classList.add("sc-in"); }); }, 400);
	  } else {
	    items.forEach(function(el){ el.classList.add('sc-in'); });
	  }
	  var counters = [].slice.call(document.querySelectorAll('[data-sc-count]'));
	  function animate(el){
	    var raw = String(el.getAttribute('data-sc-count') || '');
	    var m = raw.match(/-?[0-9]+(\.[0-9]+)?/);
	    if (!m) return;
	    var target = parseFloat(m[0]);
	    var decimals = (m[0].split('.')[1] || '').length;
	    var prefix = raw.slice(0, m.index);
	    var suffix = raw.slice(m.index + m[0].length);
	    var start = null, dur = 1100;
	    function step(ts){
	      if (start === null) start = ts;
	      var p = Math.min((ts - start) / dur, 1);
	      var eased = 1 - Math.pow(1 - p, 3);
	      el.textContent = prefix + (target * eased).toFixed(decimals) + suffix;
	      if (p < 1) requestAnimationFrame(step);
	      else el.textContent = raw;
	    }
	    requestAnimationFrame(step);
	  }
	  if ('IntersectionObserver' in window) {
	    var co = new IntersectionObserver(function(entries){
	      entries.forEach(function(e){
	        if (e.isIntersecting) { animate(e.target); co.unobserve(e.target); }
	      });
	    }, { threshold: 0.4 });
	    counters.forEach(function(el){ co.observe(el); });
	  } else {
	    counters.forEach(animate);
	  }
	})();
	</script>
	{{ body_end_html|safe }}
</body>
</html>
