/* Illustrated gesture demos, scoped to the home page. */
.gesture-demo { max-width: 960px; margin: 44px auto 0; text-align: left; }
.gesture-demo__frame { overflow: hidden; border: 1px solid var(--border-strong); border-radius: 20px; background: #e3e1ff; box-shadow: 0 24px 70px rgba(25, 22, 70, .18); }
.gesture-demo video { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 564; }
.gesture-demo__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.gesture-demo__choices { display: flex; gap: 6px; flex-wrap: wrap; }
.gesture-demo button { font: inherit; font-size: 14px; cursor: pointer; }
.gesture-demo__choice { padding: 10px 15px; border-radius: 999px; background: transparent; border: 1px solid var(--border-strong); color: var(--muted); }
.gesture-demo__choice[aria-pressed="true"] { color: var(--text); background: var(--glow); border-color: var(--primary); }
.gesture-demo__actions { display: flex; align-items: center; gap: 16px; }
.gesture-demo__pause { padding: 8px 0; border: 0; background: transparent; color: var(--text); }
.gesture-demo__download { color: var(--muted); font-size: 14px; text-underline-offset: 4px; }
.gesture-demo figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.gesture-demo button:focus-visible, .gesture-demo a:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
@media (max-width: 600px) {
  .gesture-demo { margin-top: 30px; }
  .gesture-demo__frame { border-radius: 12px; }
  .gesture-demo__toolbar { gap: 10px; }
  .gesture-demo__choice { padding: 9px 12px; }
  .gesture-demo__actions { width: 100%; justify-content: space-between; }
}