<fieldset class="cbgp-acid" role="group" aria-label="Filters">
  <legend class="cbgp-sr">Filters</legend>
  <label><input type="checkbox" checked /><span style="--ph: 0">CSS</span></label>
  <label><input type="checkbox" /><span style="--ph: 1">React</span></label>
  <label><input type="checkbox" checked /><span style="--ph: 2">TypeScript</span></label>
  <label><input type="checkbox" /><span style="--ph: 3">Astro</span></label>
</fieldset>

.cbgp-acid {
  display: inline-flex; flex-wrap: wrap; gap: 8px;
  border: 0; padding: 0; margin: 0;
}
.cbgp-acid input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-acid label { display: inline-block; cursor: pointer; }
.cbgp-acid span {
  display: inline-block;
  padding: 7px 14px;
  background: rgba(8,10,18,0.85);
  border: 1px solid rgba(168,255,184,0.2);
  border-radius: 999px;
  color: rgba(220,225,230,0.6);
  font: 600 11px/1 ui-monospace, monospace;
  letter-spacing: 0.06em;
  position: relative;
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.4s;
}
.cbgp-acid label:hover span { color: rgba(220,225,230,0.9); border-color: rgba(168,255,184,0.4); }
.cbgp-acid input:checked + span {
  background: rgba(60,200,90,0.12);
  border-color: #3eff7f;
  color: #c8ffd6;
  box-shadow:
    0 0 0 3px rgba(62,255,127,0.08),
    0 0 18px rgba(62,255,127,0.35);
}
.cbgp-acid input:focus-visible + span { outline: 2px solid #3eff7f; outline-offset: 2px; }