Landing page: shuffleboard iframe stretches canvas out of aspect ratio

[rlyshw]

Where

docs/index.html embeds docs/mirror-embed.html via an iframe.

Symptom

On the Pages landing page (https://rlyshw.github.io/remjs/#demo), the two shuffleboard canvases are visually stretched — vertically squashed on desktop widths — rather than preserving their 13:10 intrinsic aspect ratio.

Cause

Three layers interact:

1. docs/index.html locks the iframe to height: 460px; width: 100% (see .demo-frame CSS, ~line 583).
2. docs/mirror-embed.html uses a 3-column grid (1fr 180px 1fr) at height: 100vh, so each canvas panel fills ~(container-width − 182) / 2 by 460px.
3. The inner canvases have intrinsic resolution 520×400 but CSS width: 100%; height: 100% — they stretch to fill whatever shape their panel is.

At the default container width (~912px), each panel ends up ~365×460 — taller than wide, while the canvases are drawn 520×400 (wider than tall). Result: vertical stretch.

Fix options

• Give canvases aspect-ratio: 13/10 with max-width / max-height: 100% so they letterbox inside the panel.
• Change the iframe height on the landing page to better match the canvases' intrinsic aspect at common widths.
• Rewrite the embed layout to drive panel dimensions from canvas aspect rather than from viewport.

Pure demo/landing-page concern; the framework is untouched.