/* Blog hero: the lab and the city (assets/vibe-loop.js). The still, the live
   canvas and the label overlay are stacked in one box and each is letterboxed
   to the frame's 5:3, so they line up at every size. The canvas takes over
   only once it has painted its first frame, which is the still. */
.loop-art{position:relative}
.loop-art>img,.loop-art>canvas,.loop-art>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.loop-art>img,.loop-art>canvas{object-fit:contain}
/* the canvas crossfades in over the still: its first frame is the still's,
   but drawn as vector at the screen's own resolution, which a fade hides */
.loop-art>canvas{opacity:0;transition:opacity .6s ease}
.loop-art>img{transition:opacity .6s ease}
.loop-art.loop-live>canvas{opacity:1}
.loop-art.loop-live>img{opacity:0}
.loop-labels{pointer-events:none;overflow:visible}
.loop-labels text{font-family:var(--mono);fill:#a79ab5;font-size:8px;letter-spacing:2.4px}
/* below 500px the frame is ~0.7 px per unit: the type grows, as .art-micro does */
@media(max-width:500px){.loop-labels text{font-size:12.5px;letter-spacing:1.5px}}