/* Explanation videos (lib/markdown.js): a looping video with speed buttons on its face. Loaded by
   the test page and the debug reuse page; public/js/qvid.js runs the buttons. */
.q-vid { position: relative; display: block; width: 100%; max-width: 480px; margin: 8px 0 14px; }
.q-vid video { display: block; width: 100%; height: auto; border-radius: 6px; }
.q-vid-speed { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; padding: 2px; border-radius: 6px; background: rgba(29, 36, 51, 0.72); }
.q-vid-label { align-self: center; padding: 0 4px 0 6px; font-size: 12px; color: #fff; white-space: nowrap; }
.q-vid-speed button { border: 0; border-radius: 4px; padding: 3px 8px; font: inherit; font-size: 12px; line-height: 1.3; color: #fff; background: transparent; cursor: pointer; }
.q-vid-speed button:hover { background: rgba(255, 255, 255, 0.18); }
.q-vid-speed button[aria-pressed='true'] { background: #fff; color: #1d2433; font-weight: 600; }