.grammar-path-page {
  max-width: 960px;
  margin-inline: auto;
}
.grammar-path-hero {
  text-align: center;
  padding-block: var(--space-7) var(--space-5);
}
.grammar-path-grid {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-7);
}
.grammar-path-node {
  position: relative;
  padding: var(--space-4);
}
.grammar-path-node.is-complete {
  border-color: var(--jade);
}
.grammar-path-node.is-locked {
  opacity: 0.72;
}
.grammar-path-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-faint);
}
.grammar-path-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.grammar-path-patterns a {
  padding: 4px 8px;
  border-radius: var(--radius-full);
  background: var(--ink-3);
}