feat: US-008 - Compact domain legend as HTML below SVG

src/components/CareerConstellation.tsx

@@ -678,6 +678,47 @@ const CareerConstellation: React.FC<CareerConstellationProps> = ({
         style={{ display: 'block' }}
       />
 
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: '12px',
+          padding: '6px 12px',
+          fontFamily: 'var(--font-geist-mono)',
+          fontSize: '10px',
+          color: 'var(--text-tertiary)',
+          lineHeight: '24px',
+        }}
+      >
+        {[
+          { label: 'Technical', color: 'var(--accent)' },
+          { label: 'Clinical', color: 'var(--success)' },
+          { label: 'Leadership', color: 'var(--amber)' },
+        ].map((item, i) => (
+          <React.Fragment key={item.label}>
+            {i > 0 && (
+              <span style={{ color: 'var(--border)', userSelect: 'none' }} aria-hidden="true">·</span>
+            )}
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '5px' }}>
+              <span
+                style={{
+                  display: 'inline-block',
+                  width: '6px',
+                  height: '6px',
+                  borderRadius: '50%',
+                  backgroundColor: item.color,
+                  flexShrink: 0,
+                }}
+              />
+              {item.label}
+            </span>
+          </React.Fragment>
+        ))}
+        <span style={{ color: 'var(--border)', userSelect: 'none' }} aria-hidden="true">·</span>
+        <span style={{ opacity: 0.7 }}>Hover to explore connections</span>
+      </div>
+
       <p
         style={{
           position: 'absolute',