.feature-directory {
  --fd-navy: var(--public-text);
  --fd-green: var(--public-primary);
  --fd-muted: var(--public-muted);
  --fd-line: var(--public-border);
  font-family: inherit;
  background: var(--public-surface-soft);
}
.feature-browse-hero {
  padding-top: var(--public-space-8);
}
.feature-directory .feature-shell {
  max-width: var(--container-width);
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 2.8fr) minmax(
      170px,
      0.8fr
    );
  gap: var(--public-space-6);
  padding-block: var(--public-space-8);
}
.feature-directory .feature-hero {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  border-radius: var(--public-radius);
}
.feature-directory .feature-hero > div {
  padding: var(--public-space-8);
}
.feature-directory .feature-hero h1 {
  line-height: 1.15;
}
.feature-directory .feature-actions {
  flex-wrap: wrap;
}
.feature-directory .feature-proof {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--public-space-2);
}
.feature-real-preview {
  margin: 0;
  padding: var(--public-space-6);
  text-align: center;
}
.feature-real-preview img {
  max-height: 330px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.feature-real-preview figcaption {
  font-size: var(--public-font-xs);
  color: var(--public-muted);
  margin-top: var(--public-space-2);
}
.feature-directory .feature-left {
  top: var(--public-sticky-header-offset);
}
.feature-directory .feature-left button {
  display: flex;
  align-items: center;
  gap: var(--public-space-2);
  width: 100%;
  min-height: var(--public-control-height);
  border: 0;
  padding: var(--public-space-2);
  border-radius: var(--public-radius-sm);
  background: transparent;
  color: var(--public-text);
  text-align: start;
  font: inherit;
  font-size: var(--public-font-sm);
}
.feature-directory .feature-left button.active,
.feature-directory .feature-left button:hover {
  background: var(--public-primary-soft);
  color: var(--public-primary);
}
.feature-directory .feature-catalog {
  padding-top: 0;
}
.feature-directory .feature-catalog > header {
  align-items: start;
  flex-direction: column;
}
.feature-directory .feature-catalog > header label {
  width: 100%;
  min-width: 0;
}
.feature-directory .feature-catalog input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  min-width: 0;
  border-radius: 0;
}
.feature-directory .feature-catalog > header label:focus-within {
  outline: var(--public-focus-ring);
  outline-offset: var(--public-focus-offset);
}
.feature-directory .feature-group > header {
  grid-template-columns: auto 1fr;
}
.feature-directory .feature-group > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--public-space-3);
}
.feature-directory .feature-card {
  border-radius: var(--public-radius-sm);
  padding: var(--public-space-4);
}
.feature-directory .feature-card strong {
  font-size: var(--public-font-sm);
}
.feature-directory .feature-card small {
  font-size: var(--public-font-xs);
  line-height: 1.6;
}
.feature-learn {
  display: block;
  margin-top: var(--public-space-3);
  font-size: var(--public-font-xs);
  color: var(--public-primary);
}
.feature-directory .feature-right {
  top: var(--public-sticky-header-offset);
}
.feature-directory .feature-right .btn {
  display: block;
  white-space: normal;
  min-height: var(--public-control-height);
  margin-top: var(--public-space-3);
}
.feature-language-section,
.feature-personal {
  padding: var(--public-space-6);
  margin-block: var(--public-space-6);
  scroll-margin-top: var(--public-sticky-header-offset);
}
.feature-language-section h2,
.feature-personal h2 {
  font-size: var(--public-font-lg);
}
.feature-language-section h3 {
  font-size: var(--public-font-md);
  margin-top: var(--public-space-6);
}
.feature-directory [hidden] {
  display: none !important;
}
.feature-directory :is(a, button, input):focus-visible {
  outline: var(--public-focus-ring);
  outline-offset: var(--public-focus-offset);
}
@media (max-width: 1199px) {
  .feature-directory .feature-shell {
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 3fr);
  }
  .feature-directory .feature-right {
    grid-column: 1 / -1;
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .feature-directory .feature-hero {
    display: block;
  }
  .feature-directory .feature-hero > div {
    padding: var(--public-space-6);
  }
  .feature-directory .feature-shell {
    display: block;
  }
  .feature-directory .feature-left button {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .feature-directory .feature-group > div {
    grid-template-columns: 1fr;
  }
  .feature-directory .feature-right {
    display: grid;
    grid-template-columns: 1fr;
  }
  .feature-directory .feature-hero h1 {
    font-size: var(--public-font-xl);
    overflow-wrap: normal;
  }
}