/* /skills: (misc)/skills/client.tsx */
.skills {
  margin-inline: auto;
  display: flex;
  min-height: 100dvh;
  max-width: 42rem;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.skills-box {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: .75rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  padding: .75rem 1rem;
  color: hsl(var(--card-foreground));
}
.skills-pre {
  min-width: 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-size: .875rem;
  line-height: 1.25rem;
}
.skills-copy {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.skills-copy:hover { background-color: hsl(var(--muted) / .5); color: hsl(var(--foreground)); }
.skills-svg { width: .875rem; height: .875rem; }
.skills-check-icon, .skills-copy.copied .skills-copy-icon { display: none; }
.skills-copy.copied .skills-check-icon { display: block; }