/* pills.css — Category Pill (§3.4): mono uppercase 10px, hover verde */

.demo-pill {
  padding: 6px 12px; border: 1px solid var(--line); background: var(--surface);
  font-family: var(--ff-mono); font-weight: 500; font-size: 10px; color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: .06em; display: inline-block;
  transition: all .15s; cursor: pointer; border-radius: var(--radius);
  appearance: none;
}
.demo-pill:hover { border-color: var(--accent); color: var(--accent-hv); background: var(--bg); }