:root {
  --home-diagram-height: 580px;
  --home-evaluation-start: 238px;
  --home-intro-width: 880px;
}

.home-page .rule-stage {
  height: var(--home-diagram-height);
}

.home-page .evaluation {
  top: var(--home-evaluation-start);
}

.home-page .yaml-strip pre {
  font-size: var(--text-xs);
}

.home-page .rule-line {
  padding-block: var(--s2);
}

.home-page .yaml-strip {
  width: calc(100% - var(--s6));
}

.home-section-intro {
  max-width: var(--home-intro-width);
  margin-bottom: var(--s8);
  color: var(--muted);
  font-size: var(--text-body);
}

.home-code-note {
  margin-top: var(--s4);
  font-size: var(--text-caption);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.home-mode-reference {
  margin-top: var(--s6);
}

.home-platform-name {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  font-size: var(--text-body);
}

.home-platform-name svg {
  width: var(--s6);
  height: var(--s6);
}

.home-download-followup {
  margin-top: var(--s8);
  max-width: var(--home-intro-width);
}

.home-source-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--s9);
}

.home-source-aside {
  display: grid;
  gap: var(--s6);
}

.home-source-aside a,
.home-source-aside p {
  overflow-wrap: anywhere;
}

.home-copy-status {
  min-height: var(--s9);
  margin: var(--s4) 0 0;
  font-size: var(--text-caption);
}

.home-quick-answers {
  margin-top: var(--s9);
  padding-top: var(--s6);
  border-top: var(--rule) solid var(--border);
  max-width: var(--home-intro-width);
}

@media (max-width: 1100px) {
  .home-source-layout {
    gap: var(--s7);
  }
}

@media (max-width: 800px) {
  .home-source-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-page .hero .topics {
    margin-top: var(--s3);
  }

  .home-page .hero .platforms {
    padding-block: var(--s3);
  }
}

@media (max-width: 480px) {
  .home-page .yaml-strip {
    width: 100%;
  }

  .home-page .hero-footnote {
    flex-wrap: wrap;
  }

  .home-page .hero-footnote p {
    max-width: none;
  }

  .home-platform-name {
    gap: var(--s2);
    font-size: var(--text-base);
  }

  .home-page .evaluation-heading {
    flex-wrap: wrap;
  }
}