.hsc-host {
  --hsc-accent: var(--accent, #229ed9);
  min-height: 220px;
  color: var(--text, #18212b);
  contain: layout style;
}

.hsc-tabs {
  position: relative;
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding: 2px 2px 9px;
  scrollbar-width: none;
}

.hsc-tabs::-webkit-scrollbar { display: none; }

.hsc-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  color: var(--muted, #687583);
  background: transparent;
  font: inherit;
  font-weight: 680;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.hsc-tabs button::after {
  content: "";
  position: absolute;
  inset-inline: 22%;
  inset-block-end: -4px;
  block-size: 2px;
  border-radius: 999px;
  background: var(--hsc-accent);
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}

.hsc-tabs button:hover { background: color-mix(in srgb, var(--hsc-accent) 8%, transparent); }
.hsc-tabs button.active { color: var(--hsc-accent); background: color-mix(in srgb, var(--hsc-accent) 10%, transparent); }
.hsc-tabs button.active::after { opacity: 1; transform: scaleX(1); }
.hsc-tabs button:focus-visible,
.hsc-row:focus-visible,
.hsc-media-card:focus-visible,
.hsc-more:focus-visible { outline: 2px solid color-mix(in srgb, var(--hsc-accent) 76%, white); outline-offset: 2px; }

.hsc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 0 2px 10px;
  padding: 0 12px;
  border: 1px solid var(--line, rgba(100, 116, 139, .18));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface, #fff) 94%, var(--hsc-accent) 6%);
  color: var(--muted, #687583);
}

.hsc-search:focus-within { border-color: color-mix(in srgb, var(--hsc-accent) 56%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hsc-accent) 11%, transparent); }
.hsc-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }

.hsc-results {
  min-height: 172px;
  overflow: auto;
  overscroll-behavior: contain;
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: 1px 340px;
}

.hsc-host[data-hsc-direction="forward"] .hsc-results > *,
.hsc-host[data-hsc-direction="backward"] .hsc-results > * {
  animation: hsc-content-forward 170ms cubic-bezier(.2,.8,.2,1) both;
}

.hsc-host[data-hsc-direction="backward"] .hsc-results > * { animation-name: hsc-content-backward; }
.hsc-results-media,
.hsc-results-gif { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }

.hsc-media-card {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2, #e9eef2);
  cursor: pointer;
  contain: layout paint;
}

.hsc-media-card img,
.hsc-media-card video { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform var(--hm-motion-fast, 140ms) var(--hm-ease-enter, ease-out); }
.hsc-media-card:hover img,
.hsc-media-card:hover video { transform: scale(1.018); }
.hsc-media-card > span:not(.hsc-media-play) { position: absolute; inset-inline-end: 6px; inset-block-end: 6px; padding: 2px 6px; border-radius: 7px; color: white; background: rgba(8, 15, 22, .62); font-size: 10px; }
.hsc-media-play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; color: white; filter: drop-shadow(0 1px 4px #000); }

.hsc-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 8px 5px;
  border: 0;
  border-bottom: 1px solid var(--line, rgba(100, 116, 139, .14));
  color: inherit;
  text-decoration: none;
  background: transparent;
  content-visibility: auto;
  contain-intrinsic-block-size: 62px;
}

.hsc-audio-row { min-height: 92px; contain-intrinsic-block-size: 92px; }
.hsc-row-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--hsc-accent); background: color-mix(in srgb, var(--hsc-accent) 11%, transparent); font-weight: 750; }
.hsc-row-copy,
.hsc-link-row > span:last-child { min-width: 0; display: grid; gap: 3px; }
.hsc-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.hsc-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #687583); font-size: 11px; }
.hsc-row audio { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; opacity: 0; pointer-events: none; }
.hsc-audio-player { inline-size: min(100%, 340px); margin-block-start: 4px; }
.hsc-audio-player.voice-player[data-audio-player] { min-width: 0 !important; }
.hsc-download { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--hsc-accent); background: color-mix(in srgb, var(--hsc-accent) 10%, transparent); cursor: pointer; }

.hsc-empty { min-height: 180px; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; text-align: center; color: var(--muted, #687583); }
.hsc-empty > span { font-size: 25px; }
.hsc-empty b { color: var(--text, #18212b); }
.hsc-empty small { max-width: 270px; }
.hsc-empty button,
.hsc-more { min-height: 38px; margin: 12px auto; padding: 0 16px; border: 0; border-radius: 11px; color: white; background: var(--hsc-accent); font: inherit; font-weight: 700; cursor: pointer; }

.hsc-skeleton { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.hsc-skeleton i { aspect-ratio: 1; border-radius: 9px; background: linear-gradient(100deg, var(--surface-2, #e9eef2) 25%, color-mix(in srgb, var(--surface-2, #e9eef2) 50%, white) 42%, var(--surface-2, #e9eef2) 60%); background-size: 240% 100%; animation: hsc-shimmer var(--hm-motion-skeleton-cycle, 1400ms) linear infinite; }

@keyframes hsc-shimmer { to { background-position-x: -240%; } }
@keyframes hsc-content-forward { from { opacity: .55; transform: translateX(-7px); } to { opacity: 1; transform: none; } }
@keyframes hsc-content-backward { from { opacity: .55; transform: translateX(7px); } to { opacity: 1; transform: none; } }

html.dark .hsc-host,
html.amoled .hsc-host { color: var(--text, #f2f5f7); }

@media (max-width: 700px) {
  .hsc-host { min-height: 280px; }
  .hsc-tabs button { min-height: 40px; padding-inline: 12px; }
  .hsc-results-media,
  .hsc-results-gif { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hsc-row { padding-inline: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .hsc-tabs button,
  .hsc-tabs button::after,
  .hsc-media-card img,
  .hsc-media-card video { transition: none; }
  .hsc-host[data-hsc-direction] .hsc-results > *,
  .hsc-skeleton i { animation: none; }
}