feat: draw the actual 4O3A mark in the sidebar, not a text badge

The wordmark I put there was not what the author expected: the brand is "4", a
green waveform of stacked lenses, then "3A".

Only the waveform is SVG. The digits stay HTML text so they keep the sidebar's
own typeface at any theme or zoom — an SVG <text> would pick its own font and
drift from the menu around it. Seven ellipses, tallest in the middle, match the
shape of the mark.

Still drawn rather than fetched: an image off the web has no verifiable
provenance, and this stays one small component to swap if the official SVG is
preferred.

frontend/src/components/SettingsModal.tsx

@@ -209,12 +209,21 @@ type TreeNode =
 // rather show the official mark, drop the SVG in and swap this component out.
 function VendorMark({ vendor }: { vendor: 'o3a' }) {
 	if (vendor !== 'o3a') return null;
+	// The 4O3A mark: "4", the green waveform, "3A". Drawn inline rather than
+	// shipped as an image — it scales with the row, keeps the sidebar's own type
+	// for the digits, and adds no binary asset. The waveform is the part that
+	// carries the brand, so only it is SVG; the characters stay HTML text so they
+	// match the surrounding menu at any theme or zoom.
+	const lens = [3.2, 5.2, 7.4, 9.5, 7.4, 5.2, 3.2]; // half-heights, tallest in the middle
 	return (
-		<span
-			className="ml-auto shrink-0 rounded-[3px] border border-current/30 px-1 text-[9px] font-bold leading-[14px] tracking-[0.06em] opacity-70"
-			title="4O3A Signature"
-		>
-			4O3A
+		<span className="ml-auto flex shrink-0 items-center gap-[1px] text-[10px] font-bold leading-none opacity-80" title="4O3A Signature">
+			<span>4</span>
+			<svg viewBox="0 0 26 22" className="h-[13px] w-[15px]" aria-hidden="true">
+				{lens.map((ry, i) => (
+					<ellipse key={i} cx={3 + i * 3.3} cy={11} rx={1.5} ry={ry} fill="#1f9d3a" />
+				))}
+			</svg>
+			<span>3A</span>
 		</span>
 	);
 }