.tool-catalog {
  margin-block-start: var(--section-gap);
}
.catalog-heading h2 {
  max-inline-size: 18ch;
}
.catalog-heading p {
  max-inline-size: 60ch;
  margin-block: var(--space-4) 0;
}
.catalog-marquee {
  display: grid;
  min-inline-size: 0;
  gap: var(--space-3);
  margin-block-start: var(--space-10);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.catalog-marquee-row {
  overflow: hidden;
}
.catalog-track, .catalog-strip {
  display: flex;
  inline-size: max-content;
}
.catalog-track {
  animation: catalog-scroll 44s linear infinite paused;
}
.catalog-marquee-row:nth-child(2) .catalog-track {
  animation-direction: reverse;
  animation-duration: 50s;
}
.catalog-marquee-row:nth-child(3) .catalog-track {
  animation-duration: 56s;
}
[data-catalog-playing] .catalog-track {
  animation-play-state: running;
}
.catalog-strip {
  align-items: center;
  gap: var(--space-3);
  padding-inline-end: var(--space-3);
}
.catalog-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--target);
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.catalog-logo {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border-radius: var(--radius-control);
  background: var(--white);
}
.catalog-logo:empty {
  display: none;
}
.catalog-logo img {
  display: block;
  object-fit: contain;
}
.catalog-pill .catalog-logo {
  inline-size: var(--space-6);
  block-size: var(--space-6);
  border-radius: var(--radius-pill);
}
.catalog-overview {
  margin-block-start: var(--space-8);
}
.catalog-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
}
.catalog-counts > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-2);
  min-block-size: 128px;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background-color: var(--surface);
}
.catalog-counts dt, .catalog-note {
  color: var(--text-muted);
  font-size: var(--text-small);
}
.catalog-counts dd {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  line-height: var(--line-heading);
  letter-spacing: var(--tracking-heading);
}
.catalog-note {
  margin-block: var(--space-3) 0;
}
.catalog-list {
  margin-block-start: var(--space-12);
}
.catalog-filters {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}
.catalog-filters label {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}
.catalog-result-count {
  margin-block: var(--space-3) 0;
  font-size: var(--text-small);
}
.catalog-empty {
  margin-block: var(--space-5);
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--space-2);
  margin-block: var(--space-5) 0;
  padding: 0;
  list-style: none;
}
.catalog-card {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-block-size: var(--space-16);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  overflow-wrap: anywhere;
}
.catalog-card strong, .catalog-card .muted {
  display: block;
  font-size: var(--text-small);
  line-height: 1.35;
}
.catalog-card strong {
  font-weight: var(--weight-medium);
}
.catalog-card .muted {
  margin-block-start: var(--space-1);
}
@keyframes catalog-scroll {
  to { transform: translateX(-50%); }
}
[data-catalog-static] .catalog-track {
  animation: none;
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .catalog-track {
    animation: none;
  }
  .catalog-marquee {
    mask-image: none;
  }
}
@media (max-width: 550px) {
  .catalog-counts, .catalog-filters {
    grid-template-columns: minmax(0, 1fr);
  }
  .catalog-counts > div {
    min-block-size: 0;
  }
}

.catalog-filters {
  --catalog-field-height: var(--target);
  --catalog-focus: linear-gradient(135deg, var(--text), var(--control-border));
}
.catalog-filters :is(label, .catalog-category-field) { min-inline-size: 0; }
.catalog-category-field { font-size: var(--text-small); font-weight: var(--weight-medium); }
.catalog-category-slot { position: relative; min-block-size: var(--catalog-field-height); margin-top: var(--space-1); }
.catalog-filters input, .catalog-morph {
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--background);
}
.catalog-filters input {
  display: block;
  block-size: var(--catalog-field-height);
  min-block-size: var(--catalog-field-height);
  margin-top: var(--space-1);
  padding-block: 0;
  font-size: var(--text-small);
}
.catalog-morph { position: absolute; inset: 0 0 auto; z-index: 2; }
.catalog-morph[open] { z-index: 3; box-shadow: 0 8px 24px #0002; }
.catalog-filters input:focus, .catalog-morph[open], .catalog-morph:has(summary:focus-visible) {
  outline: none;
  border-color: transparent;
  background: linear-gradient(var(--background), var(--background)) padding-box, var(--catalog-focus) border-box;
}
.catalog-morph summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  block-size: calc(var(--catalog-field-height) - 2px);
  padding: 0 var(--space-4);
  list-style: none;
  cursor: pointer;
}
.catalog-morph summary:focus-visible { outline: none; }
.catalog-morph summary::-webkit-details-marker { display: none; }
.catalog-chevron { flex: none; transition: transform 240ms ease; }
.catalog-morph[open] .catalog-chevron { transform: rotate(180deg); }
.catalog-options {
  max-block-size: min(18rem, 42vh);
  overflow: auto;
  margin: 0;
  padding: var(--space-1);
  border-top: 1px solid var(--border);
  list-style: none;
}
.catalog-morph[open] .catalog-options {
  transform-origin: top;
  animation: catalog-morph-in 260ms cubic-bezier(.2,.75,.3,1) both;
}
.catalog-morph[open] .catalog-options li {
  animation: catalog-option-in 220ms ease-out both;
}
.catalog-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--space-2);
  background: transparent;
  text-align: start;
}
.catalog-options button:is(:hover,:focus-visible,[aria-pressed="true"]) { background: var(--surface-hover); }
.catalog-options button:focus-visible { outline: 1px solid var(--text); outline-offset: -1px; }
.catalog-options button svg { flex: none; visibility: hidden; }
.catalog-options button[aria-pressed="true"] svg { visibility: visible; }
@keyframes catalog-morph-in { from { clip-path: inset(0 0 100%); } to { clip-path: inset(0); } }
@keyframes catalog-option-in { from { opacity: 0; transform: translateY(-4px); filter: blur(2px); } }
@media (forced-colors: active) {
  .catalog-filters input:focus, .catalog-morph[open], .catalog-morph:has(summary:focus-visible) {
    outline: 1px solid Highlight;
  }
}

@supports selector(details::details-content) {
  .catalog-morph { interpolate-size: allow-keywords; }
  .catalog-morph::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 260ms cubic-bezier(.2,.75,.3,1), content-visibility 260ms allow-discrete;
  }
  .catalog-morph[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-morph::details-content { transition: none; }
}