docs: replace demo animation with screenshots

docs/styles.css

@@ -618,6 +618,44 @@ code .comment,
   color: var(--muted);
 }
 
+.demo-gallery {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.72fr);
+  gap: 18px;
+  padding: 18px;
+}
+
+.demo-shot {
+  display: grid;
+  gap: 10px;
+  align-content: start;
+  margin: 0;
+}
+
+.demo-shot-desktop {
+  grid-row: span 2;
+}
+
+.demo-shot img {
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: var(--panel-strong);
+  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.2);
+}
+
+.demo-shot-mobile img {
+  width: min(100%, 250px);
+  margin-inline: auto;
+}
+
+.demo-shot figcaption {
+  color: var(--muted-2);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
 .manifesto-section {
   padding-top: 46px;
 }
@@ -1076,6 +1114,14 @@ html[data-theme="light"] .comment {
   .manifesto-lines {
     align-content: start;
   }
+
+  .demo-gallery {
+    grid-template-columns: 1fr;
+  }
+
+  .demo-shot-desktop {
+    grid-row: auto;
+  }
 }
 
 @media (max-width: 820px) {