.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  margin-bottom: 1.4rem;
  color: var(--text-tertiary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  transition: color 0.15s var(--ease-out);
}
.back-link:hover {
  color: var(--text-primary);
}
.back-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transform: translateX(0);
  transition: transform 0.2s var(--ease-out);
}
.back-link:hover svg {
  transform: translateX(-2px);
}

.download {
  margin-top: 2.5rem;
}
.download-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--text-primary);
  border-radius: 6px;
  background: var(--text-primary);
  color: var(--bg-page);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition:
    opacity 0.15s var(--ease-out),
    transform 0.15s var(--ease-out);
}
.download-button:hover {
  opacity: 0.86;
}
.download-button:active {
  transform: scale(0.985);
}
.download-button svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.download-note {
  margin: 0.7rem 0 0;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 12px;
}

.section-note {
  margin: 1.1rem 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.75;
}
.section-note a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--text-tertiary);
  text-underline-offset: 2px;
}
.section-note a:hover {
  color: var(--text-primary);
}

.steps {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}
.steps li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.step-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.step-body {
  color: #2f2f2f;
  /* Grid items default to min-width:auto, so a long unwrapped command inside
     .step-code would widen the column and push the page sideways instead of
     scrolling within its own box. */
  min-width: 0;
}
.step-body strong {
  font-weight: 500;
  color: var(--text-primary);
}
.step-body code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-primary);
}

/* Terminal command inside an install step. nowrap rather than pre, so the
   newlines used to keep the HTML readable collapse to single spaces and the
   command still copies as one line. */
.step-code {
  display: block;
  margin-top: 9px;
  padding: 10px 12px;
  overflow-x: auto;
  border: 1px solid var(--border-line);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.02);
}
.step-code code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
}

.callout {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.callout p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.75;
}
.callout strong {
  font-weight: 500;
  color: var(--text-primary);
}
.callout em {
  font-style: normal;
  color: var(--text-primary);
}
.callout pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--border-line);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.015);
}
.callout pre code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  white-space: pre;
}
.callout-foot a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--text-tertiary);
  text-underline-offset: 2px;
}
.callout-foot a:hover {
  color: var(--text-primary);
}

@media (max-width: 640px) {
  .steps li {
    grid-template-columns: 32px 1fr;
    gap: 12px;
  }

  /* The shared .entry-label truncates with an ellipsis, which suits the short
     labels on the home page but clips these longer ones. Let them wrap and drop
     the trailing detail onto its own line instead. */
  .entry-list-wrap .entry-wrapper {
    grid-template-columns: 32px 1fr;
    gap: 2px 12px;
    align-items: start;
  }
  .entry-list-wrap .entry-label {
    overflow: visible;
    white-space: normal;
  }
  .entry-list-wrap .entry-detail {
    grid-column: 2;
    text-align: left;
    white-space: normal;
    color: var(--text-tertiary);
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-link,
  .back-link svg,
  .download-button {
    transition: none !important;
  }
}