@media (max-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); block-size: calc(100svh - 5.5rem); }
  .hero__copy,
  .hero__visual { grid-area: 1 / 1; }
  .hero__copy { min-block-size: 0; block-size: 100%; padding-block-start: clamp(var(--space-8), 5svh, var(--space-12)); padding-block-end: clamp(var(--space-12), 7svh, var(--space-16)); }
  .hero__visual { z-index: 0; min-block-size: 0; inline-size: auto; margin-inline: calc(50% - 50vw); border-block-start: 0; }
  .hero__visual::after { background: linear-gradient(90deg, color-mix(in oklch, var(--color-canvas) 94%, transparent), color-mix(in oklch, var(--color-canvas) 76%, transparent) 68%, color-mix(in oklch, var(--color-canvas) 24%, transparent)); }
  .hero__lede { color: var(--color-text); }
  .hero__meta { color: var(--color-text-muted); }
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer__rail { position: static; }
  .filters { display: flex; overflow-x: auto; gap: var(--space-2); padding-block-end: var(--space-2); }
  .filter { flex: 0 0 auto; }
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .install { position: static; }
}

@media (max-width: 48rem) {
  .site-header { align-items: flex-start; padding-block: var(--space-3); }
  .site-nav { gap: var(--space-3); }
  .site-nav a { white-space: nowrap; }
  .hero__title { font-size: clamp(3.6rem, 20vw, 6.5rem); }
  .hero__visual img { object-position: 62% center; }
  .results { grid-template-columns: minmax(0, 1fr); }
  .skill-row { min-block-size: 0; }
  .detail-hero { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-6) var(--space-8); }
  .detail-layout { padding-block-start: var(--space-8); }
  .usage-example__head { align-items: start; flex-direction: column; gap: var(--space-4); }
  .site-footer { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 30rem) {
  .install { padding: var(--space-4); }
  .install__actions { grid-template-columns: minmax(0, 1fr); }
  .install__actions .button { inline-size: 100%; }
}

@media (max-width: 23.5rem) {
  .shell { inline-size: min(calc(100% - 1rem), var(--shell)); }
  .site-mark__label { display: none; }
  .site-nav { gap: var(--space-2); }
  .results-head { align-items: start; flex-direction: column; gap: var(--space-2); }
}