diff --git a/README.md b/README.md
index 0174a55..1f886ac 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ The agent writes `.stackmap/<name>/diagram.json`, validates and repairs it, and
   </picture>
 </p>
 
-- **Explore:** select a card for its details, connections and source evidence. **Trace** keeps a node's upstream and downstream; **Route** lights every path between two nodes.
+- **Explore:** select a card to light its connections and dim the rest, with its details and source evidence in the inspector. **Trace** keeps a node's upstream and downstream; **Route** lights every path between two nodes.
 - **Find:** search titles, ids and types; the **lens** dims the node types you don't need.
 - **Guided views:** tabs the agent defines, like "Checkout path", that focus one part of the diagram. **Present** steps through them full screen.
 - **Flow:** **Play** sends pulses along whatever you're looking at: the whole diagram, a view, a trace or a route, hop by hop.
diff --git a/packages/viewer/e2e/focus.spec.ts b/packages/viewer/e2e/focus.spec.ts
index 1a24b3f..13a132e 100644
--- a/packages/viewer/e2e/focus.spec.ts
+++ b/packages/viewer/e2e/focus.spec.ts
@@ -37,12 +37,19 @@ test('the toolbar button enters focus, and the URL never keeps it', async ({ pag
   await expect(header(page)).toBeVisible();
 });
 
-test('in focus, H hides the toolbar and shows the way back; leaving focus restores it', async ({ page }) => {
+test('H hides the toolbar outside focus too', async ({ page }) => {
   await page.goto('/?page=release-delivery');
   await expect(page.locator('.sm-card').first()).toBeVisible();
-  // Outside focus H does nothing.
+  await page.keyboard.press('h');
+  await expect(tool(page, 'Focus on the canvas (Z)')).toHaveCount(0);
+  await expect(header(page)).toBeVisible();
   await page.keyboard.press('h');
   await expect(tool(page, 'Focus on the canvas (Z)')).toBeVisible();
+});
+
+test('in focus, H hides the toolbar and shows the way back; leaving focus restores it', async ({ page }) => {
+  await page.goto('/?page=release-delivery');
+  await expect(page.locator('.sm-card').first()).toBeVisible();
   await page.keyboard.press('z');
   await page.keyboard.press('h');
   await expect(tool(page, 'Leave focus (Z)')).toHaveCount(0);
@@ -56,7 +63,6 @@ test('in focus, H hides the toolbar and shows the way back; leaving focus restor
   await page.keyboard.press('z');
   await expect(header(page)).toBeVisible();
   await expect(tool(page, /^Play the flow/)).toBeVisible();
-  await expect(tool(page, 'Hide the toolbar (H)')).toHaveCount(0);
 });
 
 test('Z and H are ignored while typing in search', async ({ page }) => {
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/grouped-dark-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/grouped-dark-linux.png
index fe9fe98..9810758 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/grouped-dark-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/grouped-dark-linux.png differ
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/grouped-light-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/grouped-light-linux.png
index bc9b0ee..3d17548 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/grouped-light-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/grouped-light-linux.png differ
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/lifecycle-dark-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/lifecycle-dark-linux.png
index 8d048eb..845f916 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/lifecycle-dark-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/lifecycle-dark-linux.png differ
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/lifecycle-light-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/lifecycle-light-linux.png
index 5a2359a..1fbf26e 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/lifecycle-light-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/lifecycle-light-linux.png differ
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/sample-dark-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/sample-dark-linux.png
index d3326f1..1c9e421 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/sample-dark-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/sample-dark-linux.png differ
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/sample-light-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/sample-light-linux.png
index 7727860..379c307 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/sample-light-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/sample-light-linux.png differ
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/sequence-dark-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/sequence-dark-linux.png
index 673a8dd..f3a3d45 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/sequence-dark-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/sequence-dark-linux.png differ
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/sequence-light-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/sequence-light-linux.png
index 62d6756..dca06dc 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/sequence-light-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/sequence-light-linux.png differ
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/stages-dark-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/stages-dark-linux.png
index 3faee80..b85d599 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/stages-dark-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/stages-dark-linux.png differ
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/stages-light-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/stages-light-linux.png
index 78fffb8..ddb35d0 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/stages-light-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/stages-light-linux.png differ
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/workflow-dark-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/workflow-dark-linux.png
index e36eff1..1a8d638 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/workflow-dark-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/workflow-dark-linux.png differ
diff --git a/packages/viewer/e2e/visual.spec.ts-snapshots/workflow-light-linux.png b/packages/viewer/e2e/visual.spec.ts-snapshots/workflow-light-linux.png
index a06aaf5..595f19f 100644
Binary files a/packages/viewer/e2e/visual.spec.ts-snapshots/workflow-light-linux.png and b/packages/viewer/e2e/visual.spec.ts-snapshots/workflow-light-linux.png differ
diff --git a/packages/viewer/src/canvas/DiagramCanvas.test.tsx b/packages/viewer/src/canvas/DiagramCanvas.test.tsx
index 034afa8..b8275c9 100644
--- a/packages/viewer/src/canvas/DiagramCanvas.test.tsx
+++ b/packages/viewer/src/canvas/DiagramCanvas.test.tsx
@@ -42,7 +42,8 @@ describe('DiagramCanvas', () => {
     );
     nodeCardRenders.mockClear();
     fireEvent.click(container.querySelector('.sm-card[data-card-id="orders"]')!);
-    // orders gains focus + the tab stop; edge (the default tab stop) loses it. The other four stay put.
-    expect([...new Set(nodeCardRenders.mock.calls.map(([id]) => id))].sort()).toEqual(['edge', 'orders']);
+    // orders gains focus + the tab stop; edge (the default tab stop) loses it; sessions, not a neighbour, dims.
+    // The other three stay put.
+    expect([...new Set(nodeCardRenders.mock.calls.map(([id]) => id))].sort()).toEqual(['edge', 'orders', 'sessions']);
   });
 });
diff --git a/packages/viewer/src/chrome/IdentityCard.test.tsx b/packages/viewer/src/chrome/IdentityCard.test.tsx
deleted file mode 100644
index b9b756a..0000000
--- a/packages/viewer/src/chrome/IdentityCard.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import type { DiagramDraft } from '@stackmap/core';
-import { IdentityCard } from './IdentityCard';
-
-const draft: DiagramDraft = {
-  kind: 'architecture',
-  title: 'A very long diagram title that will not fit in the identity card',
-  subtitle: 'A very long diagram subtitle that will not fit in the identity card either',
-  direction: 'RIGHT',
-  nodes: [],
-  edges: [],
-};
-
-describe('IdentityCard', () => {
-  it('carries title on the diagram title and subtitle', () => {
-    render(<IdentityCard draft={draft} />);
-    expect(screen.getByText(draft.title)).toHaveAttribute('title', draft.title);
-    expect(screen.getByText(draft.subtitle!)).toHaveAttribute('title', draft.subtitle);
-  });
-});
diff --git a/packages/viewer/src/chrome/IdentityCard.tsx b/packages/viewer/src/chrome/IdentityCard.tsx
deleted file mode 100644
index 26ab797..0000000
--- a/packages/viewer/src/chrome/IdentityCard.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Ellipsis, Workflow } from 'lucide-react';
-import type { DiagramDraft } from '@stackmap/core';
-import { IconButton, PANEL_CLASS, PANEL_STYLE } from './ui';
-
-export function IdentityCard({ draft, onDetails }: { draft: DiagramDraft; onDetails?: () => void }) {
-  return (
-    <div className={`${PANEL_CLASS} flex min-w-0 items-center gap-3 py-2 pr-2 pl-3`} style={PANEL_STYLE}>
-      <div className="grid size-9 shrink-0 place-items-center rounded-xl bg-page text-fg-muted">
-        <Workflow size={17} strokeWidth={1.75} aria-hidden="true" />
-      </div>
-      <div className="min-w-0 pr-4">
-        <div className="truncate text-[14px] leading-5 font-medium text-fg" title={draft.title}>
-          {draft.title}
-        </div>
-        {draft.subtitle && (
-          <div className="truncate text-[12.5px] leading-4 text-fg-muted" title={draft.subtitle}>
-            {draft.subtitle}
-          </div>
-        )}
-      </div>
-      {onDetails && (
-        <IconButton label="Diagram details" onClick={onDetails}>
-          <Ellipsis size={17} strokeWidth={1.75} />
-        </IconButton>
-      )}
-    </div>
-  );
-}
diff --git a/packages/viewer/src/chrome/Inspector.tsx b/packages/viewer/src/chrome/Inspector.tsx
index b07b6bc..9bf71eb 100644
--- a/packages/viewer/src/chrome/Inspector.tsx
+++ b/packages/viewer/src/chrome/Inspector.tsx
@@ -38,12 +38,20 @@ const LINE_STYLES: { key: string; label: string; test: (e: DiagramEdge) => boole
 ];
 
 function Legend({ draft }: { draft: DiagramDraft }) {
+  const { dispatch } = useExplore();
   const lines = LINE_STYLES.filter((l) => draft.edges.some(l.test));
+  // A row that unmounts under the pointer never gets its mouseleave.
+  useEffect(() => () => dispatch({ type: 'peek', nodeType: null }), [dispatch]);
   return (
     <>
-      <ul aria-label="Legend" className="space-y-2.5">
+      <ul aria-label="Legend" className="space-y-0.5">
         {countByType(draft.nodes).map(([type, count]) => (
-          <li key={type} className="flex items-center justify-between text-[13px] text-fg">
+          <li
+            key={type}
+            onMouseEnter={() => dispatch({ type: 'peek', nodeType: type })}
+            onMouseLeave={() => dispatch({ type: 'peek', nodeType: null })}
+            className="-mx-2 flex items-center justify-between rounded-lg px-2 py-1 text-[13px] text-fg transition-colors duration-150 hover:bg-page"
+          >
             <span className="flex items-center gap-2.5">
               <span aria-hidden="true" className="size-2.5 rounded-full" style={{ background: `var(--sm-${type}-accent)` }} />
               {TYPE_LABELS[type]}
@@ -375,7 +383,7 @@ export function Inspector({
   const narrow = placement === 'auto';
   if (collapsed && toggle) {
     return (
-      <aside aria-label="Inspector" className={`shrink-0 rounded-[20px] bg-panel p-1.5 ${narrow ? NARROW_COLLAPSED : ''}`} style={PANEL_STYLE}>
+      <aside aria-label="Inspector" className={`shrink-0 self-start rounded-2xl bg-panel p-1.5 ${narrow ? NARROW_COLLAPSED : ''}`} style={PANEL_STYLE}>
         {toggle}
       </aside>
     );
diff --git a/packages/viewer/src/chrome/Toolbar.tsx b/packages/viewer/src/chrome/Toolbar.tsx
index a617c59..470448e 100644
--- a/packages/viewer/src/chrome/Toolbar.tsx
+++ b/packages/viewer/src/chrome/Toolbar.tsx
@@ -25,9 +25,10 @@ export function Toolbar({
   theme: ThemeChoice;
   onToggleTheme: () => void;
   onPresent?: () => void;
-  /** focus mode (Z): the canvas alone, and in it a button that hides the toolbar (H) */
+  /** focus mode (Z): the canvas alone */
   focused?: boolean;
   onFocus?: () => void;
+  /** a button that hides the toolbar (H) */
   onHide?: () => void;
   /** the export menu; a page that embeds the viewer has no file of its own to export */
   exports?: boolean;
@@ -156,19 +157,19 @@ export function Toolbar({
           <Presentation size={17} strokeWidth={1.75} />
         </IconButton>
       )}
-      {/* A phone's toolbar has no room for it; Z still works there with a keyboard. */}
-      {onFocus && (
-        <span className="contents @max-md:hidden">
+      {/* A phone's toolbar has no room for these; Z and H still work there with a keyboard. */}
+      <span className="contents @max-md:hidden">
+        {onFocus && (
           <IconButton label={focused ? 'Leave focus (Z)' : 'Focus on the canvas (Z)'} pressed={focused} onClick={onFocus}>
             <Focus size={17} strokeWidth={1.75} />
           </IconButton>
-        </span>
-      )}
-      {focused && onHide && (
-        <IconButton label="Hide the toolbar (H)" onClick={onHide}>
-          <EyeOff size={17} strokeWidth={1.75} />
-        </IconButton>
-      )}
+        )}
+        {onHide && (
+          <IconButton label="Hide the toolbar (H)" onClick={onHide}>
+            <EyeOff size={17} strokeWidth={1.75} />
+          </IconButton>
+        )}
+      </span>
       <IconButton label={`Switch to ${next} theme`} onClick={onToggleTheme}>
         {theme === 'dark' ? <Sun size={17} strokeWidth={1.75} /> : <Moon size={17} strokeWidth={1.75} />}
       </IconButton>
diff --git a/packages/viewer/src/chrome/ViewerShell.test.tsx b/packages/viewer/src/chrome/ViewerShell.test.tsx
index d2e78a1..11d05a1 100644
--- a/packages/viewer/src/chrome/ViewerShell.test.tsx
+++ b/packages/viewer/src/chrome/ViewerShell.test.tsx
@@ -59,14 +59,30 @@ describe('ViewerShell', () => {
     expect(screen.getByText('100%')).toBeInTheDocument(); // zero-size stage in jsdom → identity transform
   });
 
-  it('the identity card’s details button opens the inspector on the diagram, leaving any selection', () => {
-    innerWidth = 900;
+  it('names the diagram once, in the header: no title card on the canvas', () => {
     render(<ViewerShell diagram={commerceApiLayout} theme="light" onToggleTheme={() => {}} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Orders, Database' }));
-    fireEvent.click(screen.getByRole('button', { name: 'Diagram details' }));
-    const inspector = screen.getByRole('complementary', { name: 'Inspector' });
-    expect(within(inspector).getByRole('heading', { level: 2, name: 'Commerce API' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Orders, Database' })).toHaveAttribute('aria-pressed', 'false');
+    expect(screen.queryByRole('button', { name: 'Diagram details' })).toBeNull();
+    expect(screen.getAllByText('Commerce API')).toHaveLength(2); // the header and the inspector
+  });
+
+  it('hovering a legend row dims every other type until the pointer leaves', () => {
+    const { container } = render(<ViewerShell diagram={commerceApiLayout} theme="light" onToggleTheme={() => {}} />);
+    const row = within(screen.getByRole('list', { name: 'Legend' })).getByText('Service').closest('li')!;
+    const lit = () => [...container.querySelectorAll('.sm-card')].filter((c) => c.getAttribute('data-emphasis') !== 'dim').length;
+    expect(lit()).toBe(6);
+    fireEvent.mouseEnter(row);
+    expect(lit()).toBe(3);
+    fireEvent.mouseLeave(row);
+    expect(lit()).toBe(6);
+  });
+
+  it('H hides the toolbar outside focus too, and the button beside it does the same', () => {
+    render(<ViewerShell diagram={commerceApiLayout} theme="light" onToggleTheme={() => {}} />);
+    fireEvent.keyDown(window, { key: 'h' });
+    expect(screen.queryByRole('button', { name: 'Search nodes (/)' })).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Show the toolbar (H)' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Hide the toolbar (H)' }));
+    expect(screen.queryByRole('button', { name: 'Search nodes (/)' })).toBeNull();
   });
 
   it('has no editor controls', () => {
diff --git a/packages/viewer/src/chrome/ViewerShell.tsx b/packages/viewer/src/chrome/ViewerShell.tsx
index 19dbd5a..7519a7a 100644
--- a/packages/viewer/src/chrome/ViewerShell.tsx
+++ b/packages/viewer/src/chrome/ViewerShell.tsx
@@ -1,4 +1,4 @@
-import { Eye } from 'lucide-react';
+import { Eye, Workflow } from 'lucide-react';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { KIND_LABELS, type LaidOutDiagram } from '@stackmap/core';
 import { CanvasPanel } from '../canvas/CanvasPanel';
@@ -7,7 +7,6 @@ import { ExploreProvider, useExplore } from '../explore/ExploreContext';
 import { readLiveConfig, readShown } from '../live';
 import { revealChrome } from '../motion/motion';
 import type { ThemeChoice } from '../theme/theme';
-import { IdentityCard } from './IdentityCard';
 import { Inspector } from './Inspector';
 import { PresentBar } from './Presentation';
 import { inMenu } from './Toolbar';
@@ -20,20 +19,6 @@ const INSPECTOR_BREAKPOINT = 1100;
 
 const DIAGRAM_ID = 'sm-diagram';
 
-/** The identity card's details button shows the diagram itself in the inspector, whatever was selected. */
-function DiagramIdentity({ onDetails }: { onDetails: () => void }) {
-  const { draft, dispatch } = useExplore();
-  return (
-    <IdentityCard
-      draft={draft}
-      onDetails={() => {
-        dispatch({ type: 'clear' });
-        onDetails();
-      }}
-    />
-  );
-}
-
 function ViewCaption() {
   const { draft, state } = useExplore();
   const caption = draft.views?.find((v) => v.id === state.view)?.caption;
@@ -66,7 +51,7 @@ export function ViewerShell({
     if (on) void shell.current?.requestFullscreen?.().catch(() => {});
     else if (document.fullscreenElement) void document.exitFullscreen().catch(() => {});
   }, []);
-  // Focus (Z): the canvas alone in the window, everything on it still working; H hides the toolbar too.
+  // Focus (Z): the canvas alone in the window, everything on it still working. H hides the toolbar, in focus or not.
   const [focused, setFocused] = useState(false);
   const [toolbarHidden, setToolbarHidden] = useState(false);
   const focus = useCallback((on: boolean) => {
@@ -80,7 +65,6 @@ export function ViewerShell({
       const key = e.key.toLowerCase();
       if ((key !== 'f' && key !== 'z' && key !== 'h') || e.metaKey || e.ctrlKey || e.altKey || e.repeat || inMenu(t) || (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName)))) return;
       if (key !== 'f' && presenting) return;
-      if (key === 'h' && !focused) return;
       e.preventDefault();
       if (key === 'f') present(!presenting);
       else if (key === 'z') focus(!focused);
@@ -114,6 +98,9 @@ export function ViewerShell({
         {!presenting && !focused && (
         <header className="mx-8 mt-4 flex gap-8 border-b border-divider @max-2xl:mx-4 @max-2xl:mt-2 @max-md:flex-wrap @max-md:gap-x-4 @max-md:gap-y-0">
           <div className="flex max-w-[45%] min-w-0 items-center gap-3 py-3 @max-md:max-w-full @max-md:basis-full @max-md:pb-1">
+            <span aria-hidden="true" className="grid size-8 shrink-0 place-items-center rounded-[10px] bg-panel text-fg-muted" style={{ boxShadow: 'inset 0 0 0 1px var(--sm-panel-border)' }}>
+              <Workflow size={16} strokeWidth={1.75} />
+            </span>
             <Title className="truncate text-[20px] leading-7 font-semibold tracking-tight">{draft.title}</Title>
             <span
               className="shrink-0 rounded-lg bg-panel px-2 py-0.5 text-[13px] text-fg-muted"
@@ -129,7 +116,7 @@ export function ViewerShell({
         </header>
         )}
         {!presenting && !focused && <ViewCaption />}
-        <Main className={`relative flex min-h-0 flex-1 gap-4 @max-2xl:gap-2 ${presenting ? '' : focused ? 'p-3' : 'px-8 pt-4 pb-6 @max-2xl:px-3 @max-2xl:pt-3 @max-2xl:pb-3'}`}>
+        <Main className={`relative flex min-h-0 flex-1 gap-3 @max-2xl:gap-2 ${presenting ? '' : focused ? 'p-3' : 'px-8 pt-4 pb-6 @max-2xl:px-3 @max-2xl:pt-3 @max-2xl:pb-3'}`}>
           <section
             id={DIAGRAM_ID}
             role="tabpanel"
@@ -138,8 +125,7 @@ export function ViewerShell({
             style={presenting ? undefined : { boxShadow: 'inset 0 0 0 1px var(--sm-panel-border)' }}
           >
             <DiagramCanvas diagram={diagram} chrome={!presenting} stage={focused ? 'focus' : undefined}>
-              {/* Never wider than the stage: the identity card gives way (truncating, then hidden) before the toolbar. */}
-              <CanvasPanel position="top-left" className="flex max-w-[calc(100%-30px)] gap-2">
+              <CanvasPanel position="top-left" className="flex max-w-[calc(100%-30px)]">
                 {toolbarHidden ? (
                   <div className={`${PANEL_CLASS} p-1.5`} style={PANEL_STYLE}>
                     <IconButton label="Show the toolbar (H)" onClick={() => setToolbarHidden(false)}>
@@ -147,22 +133,14 @@ export function ViewerShell({
                     </IconButton>
                   </div>
                 ) : (
-                  <>
-                    {/* Narrow, the header already names the diagram: the toolbar gets the room. Focus shows the canvas alone. */}
-                    {!focused && (
-                      <div className="flex min-w-0 @max-[640px]/stage:hidden">
-                        <DiagramIdentity onDetails={() => setInspectorCollapsed(false)} />
-                      </div>
-                    )}
-                    <Toolbar
-                      theme={theme}
-                      onToggleTheme={onToggleTheme}
-                      onPresent={() => present(true)}
-                      focused={focused}
-                      onFocus={() => focus(!focused)}
-                      onHide={() => setToolbarHidden(true)}
-                    />
-                  </>
+                  <Toolbar
+                    theme={theme}
+                    onToggleTheme={onToggleTheme}
+                    onPresent={() => present(true)}
+                    focused={focused}
+                    onFocus={() => focus(!focused)}
+                    onHide={() => setToolbarHidden(true)}
+                  />
                 )}
               </CanvasPanel>
             </DiagramCanvas>
diff --git a/packages/viewer/src/embed.test.tsx b/packages/viewer/src/embed.test.tsx
index e07e748..32b5381 100644
--- a/packages/viewer/src/embed.test.tsx
+++ b/packages/viewer/src/embed.test.tsx
@@ -3,7 +3,6 @@ import { useRef, type ReactNode } from 'react';
 import { afterEach, describe, expect, it } from 'vitest';
 import { commerceApiLayout } from './samples/commerce-api.layout';
 import { DiagramCanvas } from './canvas/DiagramCanvas';
-import { IdentityCard } from './chrome/IdentityCard';
 import { Inspector } from './chrome/Inspector';
 import { Toolbar } from './chrome/Toolbar';
 import { ExploreProvider, useExplore } from './explore/ExploreContext';
@@ -139,11 +138,6 @@ describe('embedding the viewer', () => {
     expect(screen.getByRole('button', { name: 'Route between two nodes (R)' })).toBeInTheDocument();
   });
 
-  it('draws the identity card without a details button when there is nothing to open', () => {
-    render(<IdentityCard draft={draft} />);
-    expect(screen.queryByRole('button', { name: 'Diagram details' })).toBeNull();
-  });
-
   it('gives the inspector no toggle when it cannot collapse, and lets the page add to it', () => {
     render(
       <ExploreProvider draft={draft} syncHash={false}>
diff --git a/packages/viewer/src/explore/emphasis.test.ts b/packages/viewer/src/explore/emphasis.test.ts
index a427625..09c7207 100644
--- a/packages/viewer/src/explore/emphasis.test.ts
+++ b/packages/viewer/src/explore/emphasis.test.ts
@@ -31,12 +31,21 @@ describe('emphasis', () => {
     expect([...e.edges.values()].every((x) => !x.dim && x.tint === null)).toBe(true);
   });
 
-  it('selection focuses the node and tints its direct edges with the source type', () => {
+  it('selection focuses the node and its neighbours, tints its direct edges and dims the rest', () => {
     const e = run({ selected: 'db' });
     expect(e.nodes.get('db')).toBe('focus');
-    expect(e.nodes.get('web')).toBe('normal');
+    expect(e.nodes.get('api')).toBe('normal');
+    expect(e.nodes.get('web')).toBe('dim');
+    expect(e.nodes.get('mail')).toBe('dim');
     expect(e.edges.get('e2')).toEqual({ dim: false, tint: 'service' });
-    expect(e.edges.get('e1')).toEqual({ dim: false, tint: null });
+    expect(e.edges.get('e1')).toEqual({ dim: true, tint: null });
+  });
+
+  it('peeking at a type dims every other type and every edge leaving it, whatever else is on', () => {
+    const e = run({ peek: 'service', selected: 'db', query: 'web' });
+    expect([...e.nodes.entries()].filter(([, v]) => v !== 'dim').map(([k]) => k)).toEqual(['api']);
+    expect([...e.edges.values()].every((x) => x.dim && x.tint === null)).toBe(true);
+    expect(e.active).toBe(true);
   });
 
   it('trace dims everything outside the selection’s upstream and downstream', () => {
diff --git a/packages/viewer/src/explore/emphasis.ts b/packages/viewer/src/explore/emphasis.ts
index 4724359..6d510e5 100644
--- a/packages/viewer/src/explore/emphasis.ts
+++ b/packages/viewer/src/explore/emphasis.ts
@@ -27,6 +27,7 @@ export function searchMatches(draft: DiagramDraft, query: string): DiagramNode[]
 }
 
 export function emphasis(draft: DiagramDraft, graph: Graph, s: ExploreState): Emphasis {
+  if (s.peek) return peekAt(draft, s.peek);
   const view = s.view ? new Set(draft.views?.find((v) => v.id === s.view)?.nodes ?? []) : null;
   const q = s.query?.trim() ? new Set(searchMatches(draft, s.query).map((n) => n.id)) : null;
   const trace = s.trace && s.selected && !s.route ? reachable(graph, s.selected) : null;
@@ -34,11 +35,16 @@ export function emphasis(draft: DiagramDraft, graph: Graph, s: ExploreState): Em
   const route = s.route ? (routeBetween(graph, s.route.from, s.route.to) ?? { nodes: new Set([s.route.from, s.route.to]), edges: new Set<string>() }) : null;
   const ends = s.route ? new Set([s.route.from, s.route.to]) : s.routing?.next === 'to' ? new Set([s.routing.start]) : null;
   const typeOf = new Map(draft.nodes.map((n) => [n.id, n.type]));
+  // A selection on its own keeps its neighbours lit; trace and route widen or replace that.
+  const near =
+    s.selected && !trace && !route
+      ? new Set([s.selected, ...(graph.out.get(s.selected) ?? []).map((e) => graph.ends.get(e)!.to), ...(graph.in.get(s.selected) ?? []).map((e) => graph.ends.get(e)!.from)])
+      : null;
 
   const nodes = new Map<string, NodeEmphasis>();
   for (const n of draft.nodes) {
     const excluded =
-      (view && !view.has(n.id)) || s.hiddenTypes.has(n.type) || (q && !q.has(n.id)) || (trace && !trace.nodes.has(n.id)) || (route && !route.nodes.has(n.id));
+      (view && !view.has(n.id)) || s.hiddenTypes.has(n.type) || (q && !q.has(n.id)) || (trace && !trace.nodes.has(n.id)) || (route && !route.nodes.has(n.id)) || (near && !near.has(n.id));
     nodes.set(n.id, n.id === s.selected || ends?.has(n.id) ? 'focus' : excluded ? 'dim' : 'normal');
   }
 
@@ -46,9 +52,18 @@ export function emphasis(draft: DiagramDraft, graph: Graph, s: ExploreState): Em
   for (const e of draft.edges) {
     const lit = route ? route.edges.has(e.id) : !!s.selected && (trace ? trace.edges.has(e.id) : e.from === s.selected || e.to === s.selected);
     const endDim = nodes.get(e.from) === 'dim' || nodes.get(e.to) === 'dim';
-    edges.set(e.id, { dim: !lit && (endDim || !!trace || !!route), tint: lit ? (typeOf.get(e.from) ?? null) : null });
+    edges.set(e.id, { dim: !lit && (endDim || !!trace || !!route || !!near), tint: lit ? (typeOf.get(e.from) ?? null) : null });
   }
 
   const active = !!s.selected || !!route || [...nodes.values()].some((v) => v !== 'normal');
   return { active, nodes, edges };
 }
+
+/** Only `type` lit: a legend row under the pointer, shown over whatever else is on. */
+function peekAt(draft: DiagramDraft, type: NodeType): Emphasis {
+  const nodes = new Map<string, NodeEmphasis>(draft.nodes.map((n) => [n.id, n.type === type ? 'normal' : 'dim']));
+  const edges = new Map<string, EdgeEmphasis>(
+    draft.edges.map((e) => [e.id, { dim: nodes.get(e.from) !== 'normal' || nodes.get(e.to) !== 'normal', tint: null }]),
+  );
+  return { active: true, nodes, edges };
+}
diff --git a/packages/viewer/src/explore/state.test.ts b/packages/viewer/src/explore/state.test.ts
index a54829a..e2707bd 100644
--- a/packages/viewer/src/explore/state.test.ts
+++ b/packages/viewer/src/explore/state.test.ts
@@ -19,6 +19,13 @@ describe('explorer reducer', () => {
     expect(explore(a, { type: 'select', id: 'db' }).reveal).toBe(1);
   });
 
+  it('peeks at a type and back, without touching the hash', () => {
+    const s = explore(INITIAL, { type: 'peek', nodeType: 'database' });
+    expect(s.peek).toBe('database');
+    expect(formatHash(s)).toBe('');
+    expect(explore(s, { type: 'peek', nodeType: null }).peek).toBeNull();
+  });
+
   it('toggles lens types and switches views', () => {
     let s = explore(INITIAL, { type: 'toggleType', nodeType: 'database' });
     expect([...s.hiddenTypes]).toEqual(['database']);
diff --git a/packages/viewer/src/explore/state.ts b/packages/viewer/src/explore/state.ts
index 1c3a39e..fb27b82 100644
--- a/packages/viewer/src/explore/state.ts
+++ b/packages/viewer/src/explore/state.ts
@@ -5,6 +5,8 @@ export interface ExploreState {
   /** null = search closed; '' = open, nothing typed */
   query: string | null;
   hiddenTypes: ReadonlySet<NodeType>;
+  /** a legend row under the pointer: only that type stays lit while it is (never in the hash) */
+  peek: NodeType | null;
   trace: boolean;
   /** null = Overview */
   view: string | null;
@@ -27,6 +29,7 @@ export const INITIAL: ExploreState = {
   selected: null,
   query: null,
   hiddenTypes: new Set(),
+  peek: null,
   trace: false,
   view: null,
   reveal: 0,
@@ -41,6 +44,7 @@ export type ExploreAction =
   | { type: 'clear' }
   | { type: 'search'; query: string | null }
   | { type: 'toggleType'; nodeType: NodeType }
+  | { type: 'peek'; nodeType: NodeType | null }
   | { type: 'toggleTrace' }
   | { type: 'view'; id: string | null }
   | { type: 'toggleRoute' }
@@ -72,6 +76,8 @@ export function explore(s: ExploreState, a: ExploreAction): ExploreState {
       if (!hidden.delete(a.nodeType)) hidden.add(a.nodeType);
       return { ...s, hiddenTypes: hidden };
     }
+    case 'peek':
+      return { ...s, peek: a.nodeType };
     case 'toggleTrace':
       // A route owns the emphasis while it is shown.
       return s.route || s.routing ? s : { ...s, trace: !s.trace };
diff --git a/site/app/docs/viewer/page.tsx b/site/app/docs/viewer/page.tsx
index b317a79..7f443a2 100644
--- a/site/app/docs/viewer/page.tsx
+++ b/site/app/docs/viewer/page.tsx
@@ -48,7 +48,7 @@ export default function ViewerPage() {
       </P>
       <P>
         For the canvas alone without presenting, press <Kbd>Z</Kbd> or Focus in the toolbar. The header, view tabs and inspector step aside and everything on the canvas keeps
-        working; <Kbd>H</Kbd> then hides the toolbar too, and <Kbd>Z</Kbd> brings it all back.
+        working, and <Kbd>Z</Kbd> brings them back. <Kbd>H</Kbd> hides the toolbar, in focus or not, and shows it again.
       </P>
 
       <H2 id="export">Export</H2>
diff --git a/site/components/docs/ViewerTry.tsx b/site/components/docs/ViewerTry.tsx
index 2013010..9943f12 100644
--- a/site/components/docs/ViewerTry.tsx
+++ b/site/components/docs/ViewerTry.tsx
@@ -16,7 +16,7 @@ const FEATURES: { id: Try; label: string; icon: ReactNode; title: string; desc:
     label: 'Select',
     icon: icon(MousePointerClick),
     title: 'Select a card',
-    desc: 'Click a card for its details, its connections and the evidence behind it: the file and line it came from. Click a connection to move along it.',
+    desc: 'Click a card and it stays lit with its direct connections while the rest dims. The inspector shows its details, its connections and the evidence behind it: the file and line it came from. Click a connection to move along it.',
     keys: [
       ['Click', 'select'],
       ['Esc', 'clear'],
@@ -27,7 +27,7 @@ const FEATURES: { id: Try; label: string; icon: ReactNode; title: string; desc:
     label: 'Trace',
     icon: icon(Route),
     title: 'Trace a node',
-    desc: 'With a card selected, Trace keeps everything upstream and downstream of it and dims the rest. Nothing moves, so the layout stays where you learned it.',
+    desc: 'With a card selected, Trace widens what stays lit to everything upstream and downstream of it. Nothing moves, so the layout stays where you learned it.',
     keys: [['Esc', 'clear']],
   },
   {
@@ -46,7 +46,7 @@ const FEATURES: { id: Try; label: string; icon: ReactNode; title: string; desc:
     label: 'Find',
     icon: icon(Search),
     title: 'Find a node',
-    desc: 'Press / to search titles, ids and types; the arrow keys and Enter pick a match, and the camera brings it to you. The lens beside it dims the node types you don’t need.',
+    desc: 'Press / to search titles, ids and types; the arrow keys and Enter pick a match, and the camera brings it to you. The lens beside it dims the node types you don’t need, and pointing at a type in the legend shows only that type.',
     keys: [
       ['/', 'search'],
       ['↑ ↓', 'move'],
diff --git a/site/components/landing/HeroDemo.tsx b/site/components/landing/HeroDemo.tsx
index b3f29e8..66473a4 100644
--- a/site/components/landing/HeroDemo.tsx
+++ b/site/components/landing/HeroDemo.tsx
@@ -10,7 +10,7 @@ import { useTry, type Showcase, type Try } from '@/components/viewer/useTry';
 export type { Showcase };
 
 const TRIES: { id: Try; label: string; key?: string; icon: ReactNode; desc: string }[] = [
-  { id: 'select', label: 'Select', key: 'Click', icon: <MousePointerClick size={16} strokeWidth={1.75} />, desc: 'Select a card for its details, connections and the file and line behind it.' },
+  { id: 'select', label: 'Select', key: 'Click', icon: <MousePointerClick size={16} strokeWidth={1.75} />, desc: 'Select a card to light its connections and see its details and the file and line behind it.' },
   { id: 'trace', label: 'Trace', key: 'T', icon: <Route size={16} strokeWidth={1.75} />, desc: 'Keep a node’s upstream and downstream. Everything else dims; nothing moves.' },
   { id: 'route', label: 'Route', key: 'R', icon: <Waypoints size={16} strokeWidth={1.75} />, desc: 'Pick two nodes and every path between them lights up, hop by hop.' },
   { id: 'find', label: 'Find', key: '/', icon: <Search size={16} strokeWidth={1.75} />, desc: 'Search titles, ids and types. The lens dims the types you don’t need.' },
diff --git a/site/components/viewer/EmbeddedViewer.tsx b/site/components/viewer/EmbeddedViewer.tsx
index 16cd2d5..19f02a4 100644
--- a/site/components/viewer/EmbeddedViewer.tsx
+++ b/site/components/viewer/EmbeddedViewer.tsx
@@ -1,10 +1,10 @@
 'use client';
 
+import { Workflow } from 'lucide-react';
 import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode, type RefObject } from 'react';
 import { KIND_LABELS, type LaidOutDiagram } from '@stackmap/core';
 import { CanvasPanel } from '@stackmap/viewer/src/canvas/CanvasPanel';
 import { DiagramCanvas } from '@stackmap/viewer/src/canvas/DiagramCanvas';
-import { IdentityCard } from '@stackmap/viewer/src/chrome/IdentityCard';
 import { Inspector } from '@stackmap/viewer/src/chrome/Inspector';
 import { Toolbar } from '@stackmap/viewer/src/chrome/Toolbar';
 import { ViewTabs } from '@stackmap/viewer/src/chrome/ViewTabs';
@@ -85,6 +85,9 @@ function HeroFrame({ diagram, still, crumb, live }: { diagram: LaidOutDiagram; s
         <div className="ev-head">
           <p className="crumb">{crumb}</p>
           <div className="vt">
+            <span className="ev-icon" aria-hidden="true">
+              <Workflow size={18} strokeWidth={1.75} />
+            </span>
             <h2>{draft.title}</h2>
             <span className="badge">{KIND_LABELS[draft.kind]}</span>
             <span className="cnt tnum">
@@ -96,10 +99,7 @@ function HeroFrame({ diagram, still, crumb, live }: { diagram: LaidOutDiagram; s
       <ViewTabs controls={stage} className="ev-tabs h-9" />
       <div className="ev-body">
         <Stage id={stage} diagram={diagram} still={still} live={live}>
-          <CanvasPanel position="top-left" className="flex max-w-[calc(100%-30px)] gap-2">
-            <div className="flex min-w-0 @max-[640px]/stage:hidden">
-              <IdentityCard draft={draft} />
-            </div>
+          <CanvasPanel position="top-left" className="flex max-w-[calc(100%-30px)]">
             <Toolbar theme={theme} onToggleTheme={toggleTheme} exports={false} trace={false} />
           </CanvasPanel>
         </Stage>
diff --git a/site/components/viewer/viewer.css b/site/components/viewer/viewer.css
index 8b70503..27676d9 100644
--- a/site/components/viewer/viewer.css
+++ b/site/components/viewer/viewer.css
@@ -15,6 +15,17 @@
   gap: 14px;
   margin-top: 5px;
 }
+.ev-head .ev-icon {
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 12px;
+  background: var(--sm-panel);
+  box-shadow: inset 0 0 0 1px var(--sm-panel-border);
+  color: var(--sm-text-muted);
+}
 .ev-head h2 {
   min-width: 0;
   font-size: 28px;
@@ -37,7 +48,7 @@
 .ev-body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 300px;
-  gap: 16px;
+  gap: 12px;
   height: 686px;
   margin-top: 12px;
 }
diff --git a/site/lib/reference.ts b/site/lib/reference.ts
index 5cac21e..6467104 100644
--- a/site/lib/reference.ts
+++ b/site/lib/reference.ts
@@ -32,7 +32,7 @@ export const VIEWER_KEYS: { keys: string[]; does: string }[] = [
   { keys: ['P'], does: 'Play or stop the flow' },
   { keys: ['F'], does: 'Present: the stage alone, stepping through the views' },
   { keys: ['Z'], does: 'Focus: the canvas alone, without the header, tabs or inspector' },
-  { keys: ['H'], does: 'Hide or show the toolbar, in focus' },
+  { keys: ['H'], does: 'Hide or show the toolbar' },
   { keys: ['M'], does: 'Show or hide the minimap' },
   { keys: ['Esc'], does: 'Clear the selection, the search or the route' },
   { keys: ['←', '↑', '→', '↓'], does: 'Pan, while the stage has focus' },