:root{
  --search-hit-bg: color-mix(in oklab, var(--accent) 12%, var(--surface) 90%);
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

.hint{
  margin:0;
  font-size:.9rem;
  color:color-mix(in oklab,var(--muted) 80%, var(--text) 20%);
}

.result-card mark{
  background:var(--search-hit-bg);
  color:inherit;
  font-weight:600;
  padding:0 2px;
  border-radius:4px;
}

.result-card .target-category{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.85rem;
  color:color-mix(in oklab,var(--muted) 70%, var(--text) 30%);
}

.result-card .target-category span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.8em;
  height:1.8em;
  border-radius:999px;
  background:color-mix(in oklab,var(--accent) 16%, var(--surface) 84%);
  color:color-mix(in oklab,var(--accent) 65%, var(--text) 35%);
  font-weight:600;
  font-size:.8rem;
}

.result-card .path{
  font-family:"Fira Code","Roboto Mono",monospace;
  font-size:.85rem;
  color:color-mix(in oklab,var(--muted) 75%, var(--text) 25%);
  word-break:break-all;
}

.suggest-grid .suggest-card a:focus-visible,
.result-card h2 a:focus-visible{
  outline:3px solid color-mix(in oklab,var(--accent) 50%, transparent);
  outline-offset:2px;
}