.slide-model-architecture .slide-role {
  max-width: 1160px;
}

.slide-model-architecture .slide-content {
  margin-top: 10px;
}

.architecture-walkthrough {
  display: grid;
  grid-template-columns: 750px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.architecture-figure {
  margin: 0;
}

.architecture-image {
  position: relative;
}

.architecture-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Anchor dots to the image itself, without covering component labels. */
.architecture-image .figure-marker {
  margin: -14px 0 0 -14px;
}

.architecture-reading {
  display: grid;
  align-content: center;
  min-height: 422px;
  gap: 26px;
}

.architecture-figure figcaption {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

.architecture-figure figcaption b {
  color: var(--fg);
}

.slide-model-architecture [data-fragment] {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 150ms ease, transform 180ms ease;
}

.slide-model-architecture [data-fragment].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .slide-model-architecture [data-fragment] {
    transform: none;
    transition: none;
  }
}

@media print {
  .slide-model-architecture [data-fragment] {
    opacity: 1;
    transform: none;
  }
}