/* Concepts page: showcase screens that play a film of the concept being scrolled (tools/record_concept.py), for the
   animated concepts a still screenshot can't show. Loaded only by concepts.html; site.css stays untouched. */
.viewport.reel{background:#0b0c0e}
.viewport.reel .strip{height:100%}
.viewport.reel .film{height:100%;aspect-ratio:auto;background-color:#0b0c0e;background-size:cover;background-position:center top}
.viewport.reel .film video{object-position:center top}
.viewport.reel::after{content:"Open the live site \2197"}
.viewport.reel.live{box-shadow:none}
@media (hover:hover) and (pointer:fine){.viewport.reel,.viewport.reel.live{cursor:pointer}
.viewport.reel:hover::after{opacity:1}}
.viewport.reel:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}