Merge published comic changes and adapt navigation verification

apps/docs/src/styles/globals.css

@@ -882,6 +882,57 @@ button {
   border-radius: 0;
   background: transparent;
 }
+.figure-gallery {
+  margin: 28px 0;
+}
+.figure-gallery .architecture-preview {
+  margin: 0;
+}
+.figure-gallery-controls,
+.figure-gallery-dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.figure-gallery-controls {
+  gap: 20px;
+  margin-top: 12px;
+}
+.figure-gallery-arrow,
+.figure-gallery-dot {
+  display: grid;
+  place-items: center;
+  min-width: 36px;
+  min-height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  color: #57534e;
+  background: transparent;
+  cursor: pointer;
+}
+.figure-gallery-arrow {
+  font-size: 28px;
+  line-height: 1;
+}
+.figure-gallery-dot span {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #d6d3d1;
+}
+.figure-gallery-dot[aria-current="true"] span {
+  background: #2563eb;
+}
+.figure-gallery-arrow:hover,
+.figure-gallery-dot:hover {
+  background: #f5f5f4;
+}
+.figure-gallery-arrow:focus-visible,
+.figure-gallery-dot:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
 .image-lightbox {
   width: 100vw;
   height: 100dvh;