{{- /*
  The animated "Hello, world" plate for the post of the same name. Kept as a
  shortcode rather than pasted into the markdown so the content file stays
  readable and every translation (hello-world.fr.md, .ja.md, ...) can reuse
  the exact same one-liner instead of carrying its own copy of 8 KB of SVG,
  CSS and JS that would then have to be kept in sync five ways.

  The <style>/<script> live here rather than in assets/css/style.scss and
  assets/js/ on purpose: this is a one-post ornament, and inlining it keeps
  the cost off every other page in the site. If a second post ever wants it,
  that's the moment to promote it to a fingerprinted asset.

  The palette is self-contained too - light-dark() reads the `color-scheme`
  inherited from :root, so the plate flips with the rest of the site, whether
  that is the reader's OS or the theme they pinned, and needs no wiring into
  the theme variables.

  The two fill="#..." attributes on the SVG paths are the no-CSS fallback:
  the <style> below outranks them wherever it applies, but anywhere the
  figure travels without it - a reader that strips <style>/<script>, a
  saved page, a full-content feed - the paths would otherwise take the SVG
  default and render a black word on a black plate. With the fills, that
  context gets the still version the bare SVG already is.
*/ -}}
<figure class="hw">
<svg viewBox="0 0 102 61" role="img" aria-labelledby="hw-title" shape-rendering="crispEdges">
<title id="hw-title">Hello, world</title>
<path class="hw-bg" fill="#e9eff5" d="M2 0h98v1h1v1h1v57h-1v1h-1v1h-98v-1h-1v-1h-1v-57h1v-1h1z"/>
<path class="hw-word" fill="#0f3460" transform="translate(18 13)" d="M0 0h3v15h-3zM8 0h3v15h-3zM13 0h10v3h-10zM25 0h3v15h-3zM37 0h3v15h-3zM50 0h9v3h-9zM49 1h1v1h-1zM59 1h1v2h-1zM49 2h1v1h-1zM13 3h3v12h-3zM49 3h3v11h-3zM57 3h3v11h-3zM3 6h5v1h-5zM16 6h5v3h-5zM3 7h5v1h-5zM3 8h5v1h-5zM16 12h7v3h-7zM28 12h7v3h-7zM40 12h7v3h-7zM52 12h5v1h-5zM52 13h5v1h-5zM50 14h9v1h-9zM0 20h3v14h-3zM12 20h3v14h-3zM18 20h9v3h-9zM30 20h10v3h-10zM43 20h3v15h-3zM55 20h9v3h-9zM17 21h1v1h-1zM27 21h1v2h-1zM40 21h1v2h-1zM64 21h1v2h-1zM17 22h1v1h-1zM65 22h1v1h-1zM17 23h3v11h-3zM25 23h3v11h-3zM30 23h3v12h-3zM38 23h3v5h-3zM55 23h3v12h-3zM63 23h3v10h-3zM6 24h3v11h-3zM33 26h5v1h-5zM33 27h5v1h-5zM33 28h7v1h-7zM34 29h4v1h-4zM35 30h4v1h-4zM36 31h4v1h-4zM3 32h3v1h-3zM9 32h3v1h-3zM20 32h5v1h-5zM37 32h4v3h-4zM46 32h7v3h-7zM58 32h5v1h-5zM3 33h3v1h-3zM9 33h3v1h-3zM20 33h5v1h-5zM58 33h7v1h-7zM1 34h5v1h-5zM9 34h5v1h-5zM18 34h9v1h-9zM58 34h6v1h-6z"/>
</svg>
<style>
.hw {
  /* No color-scheme of its own: the property is inherited, so leaving it off
     means light-dark() below resolves against :root's - which is the reader's
     OS until the masthead switch pins a theme, and the pinned one after that.
     Declaring it here would make the plate the one thing on the page still
     following the OS. Pin this figure alone with style="color-scheme: dark". */
  --hw-bg: light-dark(#e9eff5, #0a2342);
  --hw-dim: light-dark(#cddbe9, #143a6b);
  --hw-mid: light-dark(#8fb0d1, #2e6aa6);
  --hw-lit: light-dark(#0f3460, #d6e9f8);
  --hw-hover: light-dark(#f0913f, #ffb454);
  --hw-crest: light-dark(#d9480f, #fff1cf);
  position: relative; margin: 1.5em 0; aspect-ratio: 102 / 61;
  cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.hw svg, .hw canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hw canvas { image-rendering: crisp-edges; image-rendering: pixelated; }
.hw-bg { fill: var(--hw-bg); }
.hw-word { fill: var(--hw-lit); }
.hw-live svg { opacity: 0; }   /* still there for screen readers */
</style>
<script>
(() => {
  const fig = document.currentScript?.closest('.hw') || document.querySelector('.hw:not(.hw-live)');
  // htmx 4 re-runs inline scripts in swapped-in content (it clones each
  // <script> into a fresh, executable one), so a boosted navigation back to
  // this post runs the whole IIFE a second time. `.hw-live` is the marker set
  // at the end of a successful init: bail when the figure already carries it,
  // or the plate collects another canvas and another rAF loop per visit.
  if (!fig || fig.classList.contains('hw-live')) return;
  const svg = fig.querySelector('svg'), wordEl = svg.querySelector('.hw-word');
  const [, , W, H] = svg.getAttribute('viewBox').split(' ').map(Number);
  const [ox, oy] = wordEl.getAttribute('transform').match(/-?\d+/g).map(Number);
  // The SVG path IS the bitmap: every "M x y h w v h" is a rectangle of lit cells.
  const word = new Uint8Array(W * H); let wx = 0, wy = 0;
  for (const m of wordEl.getAttribute('d').matchAll(/M(\d+) (\d+)h(\d+)v(\d+)/g)) {
    const [x, y, w, h] = m.slice(1).map(Number); wx = Math.max(wx, x + w); wy = Math.max(wy, y + h);
    for (let r = y; r < y + h; r++) for (let c = x; c < x + w; c++) word[(r + oy) * W + c + ox] = 1;
  }
  const BAYER = [0,32,8,40,2,34,10,42,48,16,56,24,50,18,58,26,12,44,4,36,14,46,6,38,60,28,52,20,62,30,54,22,3,35,11,43,1,33,9,41,51,19,59,27,49,17,57,25,15,47,7,39,13,45,5,37,63,31,55,23,61,29,53,21];
  const smooth = (lo, hi, x) => { const t = Math.min(1, Math.max(0, (x - lo) / (hi - lo))); return t * t * (3 - 2 * t); };
  // Tileable value noise: a 64x64 table of randoms, smoothly interpolated.
  const T = Float32Array.from({ length: 4096 }, Math.random);
  const noise = (x, y) => {
    const xi = Math.floor(x), yi = Math.floor(y), fx = x - xi, fy = y - yi;
    const u = fx * fx * (3 - 2 * fx), v = fy * fy * (3 - 2 * fy);
    const a = T[(yi & 63) << 6 | xi & 63], b = T[(yi & 63) << 6 | xi + 1 & 63], c = T[(yi + 1 & 63) << 6 | xi & 63], d = T[(yi + 1 & 63) << 6 | xi + 1 & 63];
    return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;
  };
  // Per cell, once: dither threshold, how quiet the clouds are near the word, when a word cell burns in.
  const th = new Float32Array(W * H), hush = new Float32Array(W * H), key = new Float32Array(W * H);
  for (let r = 0; r < H; r++) for (let c = 0; c < W; c++) {
    const i = r * W + c, x = c + .5 - ox, y = r + .5 - oy;
    th[i] = (BAYER[(r & 7) << 3 | c & 7] + .5) / 64;
    hush[i] = .25 + .75 * smooth(0, 9, Math.hypot(Math.max(-2 - x, 0, x - wx - 2), Math.max(-2 - y, 0, y - wy - 2)));
    key[i] = .6 * (c - ox) / wx + .4 * th[i];
    if (Math.min(c, W - 1 - c) + Math.min(r, H - 1 - r) < 2) hush[i] = -1;   // notched corners
  }
  // One canvas pixel per cell; CSS scales it up with image-rendering: pixelated.
  const cv = document.createElement('canvas'); cv.width = W; cv.height = H; cv.setAttribute('aria-hidden', 'true');
  const ctx = cv.getContext('2d'), img = ctx.createImageData(W, H), px = new Uint32Array(img.data.buffer);
  // Colours come from the CSS variables, resolved by the browser (so light-dark() and friends work).
  const probe = fig.appendChild(document.createElement('i')); probe.hidden = true;
  let PAL = [], LIT = 0;
  const readPalette = () => {
    const rgb = name => { probe.style.color = `var(--hw-${name})`; const [r, g, b] = getComputedStyle(probe).color.match(/[\d.]+/g).map(Number); return (255 << 24 | b << 16 | g << 8 | r) >>> 0; };
    PAL = ['bg', 'dim', 'mid', 'hover', 'crest'].map(rgb); LIT = rgb('lit');
  };
  const still = matchMedia('(prefers-reduced-motion: reduce)');
  const ptr = { x: 0, y: 0, tx: 0, ty: 0, on: false, k: 0 }; let rings = [], introAt = Infinity;
  function draw(now) {
    const t = still.matches ? 40 : now / 1000, p = still.matches ? 1 : Math.min(1, Math.max(0, (now - introAt) / 1500));
    const intro = 1 - (1 - p) * (1 - p), swell = still.matches ? 1 : Math.min(1, Math.max(0, (now - introAt) / 700));
    ptr.k += ((ptr.on ? 1 : 0) - ptr.k) * .12; ptr.x += (ptr.tx - ptr.x) * .2; ptr.y += (ptr.ty - ptr.y) * .2;
    rings = rings.filter(k => now - k.t < 1700);
    for (let r = 0, i = 0; r < H; r++) for (let c = 0; c < W; c++, i++) {
      if (hush[i] < 0) { px[i] = 0; continue; }
      let glow = 0, ring = 0;
      if (ptr.k > .01) { const g = 1 - Math.hypot(c + .5 - ptr.x, r + .5 - ptr.y) / 11; if (g > 0) glow = g * Math.sqrt(g) * ptr.k; }
      for (const k of rings) { const age = (now - k.t) / 1000, d = Math.hypot(c + .5 - k.x, r + .5 - k.y); ring = Math.max(ring, Math.max(0, 1 - Math.abs(d - age * 26) / 2.5) * (1 - age / 1.7)); }
      if (word[i] && p > 0 && intro >= key[i]) {
        px[i] = (p < 1 && intro - key[i] < .07) || ring > th[i] || glow > .45 + th[i] * .5 ? PAL[4] : glow * 1.6 > th[i] ? PAL[3] : LIT;
        continue;
      }
      // Two octaves of drifting noise, shaped into clouds, dithered across bg > dim > mid > hover > crest.
      const n = .62 * noise(c / 10 + t * .035, r / 10 + t * .02) + .38 * noise(c / 4.5 - t * .05 + 17, r / 4.5 + t * .03 + 9);
      const level = smooth(.38, .84, n) * 2 * hush[i] * swell + glow * 3.6 + ring * 3, base = Math.floor(level);
      px[i] = PAL[Math.min(4, base + (level - base > th[i] ? 1 : 0))];
    }
    ctx.putImageData(img, 0, 0);
  }
  let visible = false, raf = 0, last = 0;
  // isConnected: an htmx swap can tear this figure out of the document while
  // the loop is running - the IntersectionObserver may never report it - so
  // check the node is still in the page rather than animating a detached canvas.
  const tick = now => { raf = 0; if (!visible || !fig.isConnected) return; if (now - last > 31) { last = now; draw(now); } if (!still.matches) raf = requestAnimationFrame(tick); };
  const kick = () => { if (!raf) { last = 0; raf = requestAnimationFrame(tick); } };
  const repaint = () => { readPalette(); kick(); };
  const at = e => { const b = cv.getBoundingClientRect(); return { x: (e.clientX - b.left) / b.width * W, y: (e.clientY - b.top) / b.height * H }; };
  fig.addEventListener('pointermove', e => { const q = at(e); if (ptr.k < .02) { ptr.x = q.x; ptr.y = q.y; } ptr.tx = q.x; ptr.ty = q.y; ptr.on = !still.matches; });
  fig.addEventListener('pointerleave', () => { ptr.on = false; });
  fig.addEventListener('pointerup', e => { if (e.pointerType !== 'mouse') ptr.on = false; });
  fig.addEventListener('pointerdown', e => { if (still.matches) return; rings.push({ ...at(e), t: performance.now() }); if (rings.length > 4) rings.shift(); });
  new IntersectionObserver(([e]) => { visible = e.isIntersecting; if (visible && introAt === Infinity) introAt = performance.now(); kick(); }).observe(fig);
  new MutationObserver(repaint).observe(document.documentElement, { attributes: true });
  new MutationObserver(repaint).observe(fig, { attributes: true, attributeFilter: ['style', 'class'] });
  matchMedia('(prefers-color-scheme: dark)').addEventListener('change', repaint); still.addEventListener('change', kick);
  readPalette(); draw(performance.now()); fig.append(cv); fig.classList.add('hw-live');
})();
</script>
</figure>