.recorded-demo { margin: 1.5rem 0 0; }
.recorded-demo-frame { border: 1px solid #cbd5df; border-radius: .5rem; overflow: hidden; background: #f5f8fb; }
.recorded-demo img { display: block; width: 100%; height: auto; }
.recorded-demo [hidden] { display: none; }
.recorded-demo-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 .75rem; }
.recorded-demo-controls span { color: #536273; font-size: .9rem; }
.recorded-demo button:focus-visible { outline: 3px solid #1267a1; outline-offset: 3px; }
.recorded-demo figcaption p { max-width: 75ch; }
@media print {
    .recorded-demo-controls, .recorded-demo-animation { display: none !important; }
    .recorded-demo .recorded-demo-poster { display: block !important; }
}