.prototype-screen {
  display: none;
  scroll-margin-top: calc(var(--size-control) + var(--layout-workspace-bar));
}

.prototype-screen:target {
  display: block;
}

.prototype-screen:first-of-type {
  display: block;
}

body:has(.prototype-screen:target) .prototype-screen:first-of-type:not(:target) {
  display: none;
}

body:has(.prototype-screen[id^="documents"]:target) .nav-link--documents,
body:has(.prototype-screen[id^="document-"]:target) .nav-link--documents,
body:has(.prototype-screen[id^="review"]:target) .nav-link--review,
body:has(.prototype-screen[id^="ask"]:target) .nav-link--ask,
body:has(.prototype-screen[id^="exports"]:target) .nav-link--exports {
  color: var(--color-paper);
  background: var(--color-ink-800);
}

.route-map-layout {
  display: grid;
  grid-template-columns: var(--grid-route);
  gap: var(--space-8);
  align-items: start;
}

.route-map-grid {
  display: grid;
  grid-template-columns: var(--grid-two);
  gap: var(--space-4);
}

.route-map-aside {
  position: sticky;
  top: calc(var(--layout-workspace-bar) + var(--size-control) + var(--space-8));
  display: grid;
  gap: var(--space-4);
}

.route-map-sequence {
  display: grid;
  gap: var(--space-4);
}

@media (max-width: 52rem) {
  .prototype-screen {
    scroll-margin-top: var(--space-20);
  }

  .route-map-layout,
  .route-map-grid {
    grid-template-columns: var(--grid-one);
  }

  .route-map-aside {
    position: static;
  }
}