feat(ports): filter by group, and shrink the cards

[rogeriojunior31]

The list was built for four ports and does not survive forty.

The cards

Every card carried a seven-line terminal mock, so scanning the page meant
scrolling past a preview per port to reach the one you wanted. The preview is
already redrawn full size on the port's own page, one click away, where there is
room to actually read it — on the index it was costing height and giving little.

So the card drops to what tells one port from another: name, blurb, the file it
installs as, and the repo link. Four short lines, which lets the grid run
narrower tracks and fit more per row.

54kB → 25kB at five ports, and the saving is per port.

The filter

One generated rule per group, which is what keeps it free of JavaScript: CSS
cannot compare a checked radio against a section's group, but it can be told
about each group by name — and the names come from the catalogue, so a new group
filters itself.

.ports-page:has(#f-editor:checked) .group:not([data-group="editor"]){display:none}

With "All" checked no rule matches and everything shows, which is also what
happens where :has() is unavailable: the page degrades to exactly how it works
today.

The radios sit off-screen rather than under display:none — a hidden input is
not focusable, and the label is the only keyboard route to them. The filter only
renders when there is more than one group.

Checked

astro check 0 errors, 56 tests, build clean. The generated CSS carries one rule
each for terminal, shell and editor, and no preview markup remains in the
cards.