diff --git a/changes/session-detail-redesign.md b/changes/session-detail-redesign.md
new file mode 100644
index 00000000..a7f17634
--- /dev/null
+++ b/changes/session-detail-redesign.md
@@ -0,0 +1,4 @@
+type: changed
+area: stats
+
+- Redesigned the expanded session view in the stats dashboard: stat tiles for pace, lines, known-word rate, lookups, and paused time; a reading density chart of known and unknown words per time slice replaces the cumulative area chart; Yomitan lookups and card-mined markers sit in their own lane under the chart; pause markers and pause shading are gone.
diff --git a/docs-site/immersion-tracking.md b/docs-site/immersion-tracking.md
index ce281114..ac967c5f 100644
--- a/docs-site/immersion-tracking.md
+++ b/docs-site/immersion-tracking.md
@@ -70,7 +70,7 @@ Charts for watch time, cards, words, and sessions per day or month, running tota
 
 ### Sessions
 
-Session history with new-word activity and pause, seek, and card markers. The **↗** button on a row opens that show's detail view.
+Session history. Expand a session for its pace, lines, known-word rate, lookups, and paused time, plus a reading density chart of known and unknown words over the session with Yomitan lookup ticks and clickable card-mined markers underneath. The **↗** button on a row opens that show's detail view.
 
 ![Stats Sessions](/screenshots/stats-sessions.png)
 
diff --git a/stats/src/components/sessions/SessionDetail.test.tsx b/stats/src/components/sessions/SessionDetail.test.tsx
new file mode 100644
index 00000000..5fcb36a2
--- /dev/null
+++ b/stats/src/components/sessions/SessionDetail.test.tsx
@@ -0,0 +1,55 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { buildSessionStatTiles, pickDensityTickIndexes } from './SessionDetail';
+import type { SessionSummary } from '../../types/stats';
+
+const session: SessionSummary = {
+  sessionId: 1,
+  canonicalTitle: 'Terrace House S01E08',
+  videoId: 1,
+  animeId: null,
+  animeTitle: null,
+  startedAtMs: 0,
+  endedAtMs: 1_860_000,
+  totalWatchedMs: 1_860_000,
+  activeWatchedMs: 1_500_000,
+  linesSeen: 400,
+  tokensSeen: 1_684,
+  cardsMined: 0,
+  lookupCount: 0,
+  lookupHits: 0,
+  yomitanLookupCount: 18,
+  knownWordsSeen: 673,
+  knownWordRate: 40,
+};
+
+test('buildSessionStatTiles derives pace, known rate, lookup rate, and paused time', () => {
+  const tiles = Object.fromEntries(buildSessionStatTiles(session).map((t) => [t.key, t]));
+  assert.equal(tiles.pace!.value, '67 words/min');
+  assert.equal(tiles.pace!.detail, '16.0 lines/min');
+  assert.equal(tiles.known!.value, '40%');
+  assert.equal(tiles.lookups!.detail, '1.1 lookups per 100 words');
+  assert.equal(tiles.paused!.value, '6m');
+  assert.equal(tiles.paused!.detail, '19% of 31m wall time');
+});
+
+test('buildSessionStatTiles shows placeholders when there is no active time or known data', () => {
+  const tiles = Object.fromEntries(
+    buildSessionStatTiles({
+      ...session,
+      activeWatchedMs: 0,
+      totalWatchedMs: 0,
+      knownWordsSeen: 0,
+      knownWordRate: 0,
+    }).map((t) => [t.key, t]),
+  );
+  assert.equal(tiles.pace!.value, '—');
+  assert.equal(tiles.known!.value, '—');
+  assert.equal(tiles.paused!.value, 'none');
+});
+
+test('pickDensityTickIndexes spaces about five labels across the buckets', () => {
+  assert.deepEqual(pickDensityTickIndexes(3), [0, 1, 2]);
+  assert.deepEqual(pickDensityTickIndexes(50), [0, 10, 20, 30, 40]);
+  assert.deepEqual(pickDensityTickIndexes(0), []);
+});
diff --git a/stats/src/components/sessions/SessionDetail.tsx b/stats/src/components/sessions/SessionDetail.tsx
index 52ee8006..d6fb229d 100644
--- a/stats/src/components/sessions/SessionDetail.tsx
+++ b/stats/src/components/sessions/SessionDetail.tsx
@@ -1,35 +1,37 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
-  AreaChart,
-  Area,
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  ReferenceArea,
-  ReferenceLine,
+  Bar,
+  BarChart,
   CartesianGrid,
   Customized,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
 } from 'recharts';
 import { useSessionDetail } from '../../hooks/useSessions';
 import { getStatsClient } from '../../hooks/useStatsApi';
-import type { KnownWordsTimelinePoint } from '../../hooks/useSessions';
 import { CHART_THEME } from '../../lib/chart-theme';
+import { formatClockDuration, formatDuration, formatNumber } from '../../lib/formatters';
+import {
+  buildSessionDensity,
+  formatBucketSize,
+  type SessionDensity,
+  type SessionDensityBucket,
+} from '../../lib/session-density';
 import {
   buildSessionChartEvents,
   collectPendingSessionEventNoteIds,
   getSessionEventCardRequest,
   mergeSessionEventNoteInfos,
+  projectSessionMarkerLeftPx,
   resolveActiveSessionMarkerKey,
   type SessionChartMarker,
   type SessionEventNoteInfo,
   type SessionChartPlotArea,
 } from '../../lib/session-events';
-import { buildLookupRateDisplay } from '../../lib/yomitan-lookup';
 import { getSessionDisplayWordCount } from '../../lib/session-word-count';
-import { EventType } from '../../types/stats';
+import { buildLookupRateDisplay } from '../../lib/yomitan-lookup';
 import type { SessionEvent, SessionSummary } from '../../types/stats';
 import { SessionEventOverlay } from './SessionEventOverlay';
 
@@ -37,15 +39,21 @@ interface SessionDetailProps {
   session: SessionSummary;
 }
 
-const tooltipStyle = {
-  background: CHART_THEME.tooltipBg,
-  border: `1px solid ${CHART_THEME.tooltipBorder}`,
-  borderRadius: 6,
-  color: CHART_THEME.tooltipText,
-  fontSize: 11,
-};
+const SERIES_COLORS = {
+  known: '#a6da95',
+  unknown: '#c6a0f6',
+  words: '#8aadf4',
+  lookup: '#b7bdf8',
+  card: '#f5bde6',
+} as const;
+
+const CHART_HEIGHT = 150;
 
 function formatTime(ms: number): string {
+  return new Date(ms).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+}
+
+function formatTimeWithSeconds(ms: number): string {
   return new Date(ms).toLocaleTimeString(undefined, {
     hour: '2-digit',
     minute: '2-digit',
@@ -53,85 +61,7 @@ function formatTime(ms: number): string {
   });
 }
 
-type KnownWordsLineCounts = {
-  knownWordsSeen: number;
-  totalWordsSeen: number;
-};
-
-/** Build a lookup: linesSeen -> filtered known/total word counts */
-function buildKnownWordsLookup(
-  knownWordsTimeline: KnownWordsTimelinePoint[],
-): Map<number, KnownWordsLineCounts> {
-  const map = new Map<number, KnownWordsLineCounts>();
-  for (const pt of knownWordsTimeline) {
-    map.set(pt.linesSeen, {
-      knownWordsSeen: pt.knownWordsSeen,
-      totalWordsSeen: pt.totalWordsSeen,
-    });
-  }
-  return map;
-}
-
-/** For a given linesSeen value, find the closest filtered word counts (floor lookup). */
-function lookupKnownWordCounts(
-  map: Map<number, KnownWordsLineCounts>,
-  linesSeen: number,
-): KnownWordsLineCounts {
-  if (map.size === 0) return { knownWordsSeen: 0, totalWordsSeen: 0 };
-  if (map.has(linesSeen)) return map.get(linesSeen)!;
-  let best = 0;
-  for (const k of map.keys()) {
-    if (k <= linesSeen && k > best) {
-      best = k;
-    }
-  }
-  return best > 0 ? map.get(best)! : { knownWordsSeen: 0, totalWordsSeen: 0 };
-}
-
-interface RatioChartPoint {
-  tsMs: number;
-  knownWords: number;
-  unknownWords: number;
-  totalWords: number;
-}
-
-interface FallbackChartPoint {
-  tsMs: number;
-  totalWords: number;
-}
-
-type TimelineEntry = {
-  sampleMs: number;
-  linesSeen: number;
-  tokensSeen: number;
-};
-
-export function buildKnownWordsRatioChartData(
-  sorted: TimelineEntry[],
-  knownWordsMap: Map<number, KnownWordsLineCounts>,
-): RatioChartPoint[] {
-  const chartData: RatioChartPoint[] = [];
-  for (const t of sorted) {
-    const counts = lookupKnownWordCounts(knownWordsMap, t.linesSeen);
-    const totalWords = counts.totalWordsSeen;
-    if (totalWords === 0) continue;
-    const knownWords = Math.min(counts.knownWordsSeen, totalWords);
-    const unknownWords = totalWords - knownWords;
-    chartData.push({
-      tsMs: t.sampleMs,
-      knownWords,
-      unknownWords,
-      totalWords,
-    });
-  }
-  return chartData;
-}
-
-export function getKnownPctAxisMax(values: number[]): number {
-  const max = Math.max(0, ...values.filter((value) => Number.isFinite(value)));
-  return Math.min(100, Math.ceil((max + 5) / 10) * 10);
-}
-
+/** Reads the plot offset recharts computed so the event lane can line up with the bars. */
 function SessionChartOffsetProbe({
   offset,
   onPlotAreaChange,
@@ -160,18 +90,11 @@ export function SessionDetail({ session }: SessionDetailProps) {
   const [loadingNoteIds, setLoadingNoteIds] = useState<Set<number>>(new Set());
   const pendingNoteIdsRef = useRef<Set<number>>(new Set());
 
-  const sorted = [...timeline].reverse();
-  const knownWordsMap = buildKnownWordsLookup(knownWordsTimeline);
-  const hasKnownWords = knownWordsMap.size > 0;
-
-  const { cardEvents, yomitanLookupEvents, pauseRegions, markers } =
-    buildSessionChartEvents(events);
-  const lookupRate = buildLookupRateDisplay(
-    session.yomitanLookupCount,
-    getSessionDisplayWordCount(session),
+  const density = useMemo(
+    () => buildSessionDensity(timeline, knownWordsTimeline, events),
+    [timeline, knownWordsTimeline, events],
   );
-  const pauseCount = events.filter((e) => e.eventType === EventType.PAUSE_START).length;
-  const cardEventCount = cardEvents.length;
+  const { yomitanLookupEvents, markers } = useMemo(() => buildSessionChartEvents(events), [events]);
   const activeMarkerKey = resolveActiveSessionMarkerKey(hoveredMarkerKey, pinnedMarkerKey);
   const activeMarker = useMemo<SessionChartMarker | null>(
     () => markers.find((marker) => marker.key === activeMarkerKey) ?? null,
@@ -259,544 +182,378 @@ export function SessionDetail({ session }: SessionDetailProps) {
     void getStatsClient().ankiBrowse(noteId);
   };
 
-  if (loading) return <div className="text-ctp-overlay2 text-xs p-2">Loading timeline...</div>;
+  if (loading) return <div className="text-ctp-overlay2 text-xs p-2">Loading session...</div>;
   if (error) return <div className="text-ctp-red text-xs p-2">Error: {error}</div>;
 
-  if (hasKnownWords) {
-    return (
-      <RatioView
-        sorted={sorted}
-        knownWordsMap={knownWordsMap}
-        cardEvents={cardEvents}
-        yomitanLookupEvents={yomitanLookupEvents}
-        pauseRegions={pauseRegions}
-        markers={markers}
-        hoveredMarkerKey={hoveredMarkerKey}
-        onHoveredMarkerChange={setHoveredMarkerKey}
-        pinnedMarkerKey={pinnedMarkerKey}
-        onPinnedMarkerChange={setPinnedMarkerKey}
-        noteInfos={noteInfos}
-        loadingNoteIds={loadingNoteIds}
-        onOpenNote={handleOpenNote}
-        pauseCount={pauseCount}
-        cardEventCount={cardEventCount}
-        lookupRate={lookupRate}
-        session={session}
-      />
-    );
-  }
-
-  return (
-    <FallbackView
-      sorted={sorted}
-      cardEvents={cardEvents}
-      yomitanLookupEvents={yomitanLookupEvents}
-      pauseRegions={pauseRegions}
-      markers={markers}
-      hoveredMarkerKey={hoveredMarkerKey}
-      onHoveredMarkerChange={setHoveredMarkerKey}
-      pinnedMarkerKey={pinnedMarkerKey}
-      onPinnedMarkerChange={setPinnedMarkerKey}
-      noteInfos={noteInfos}
-      loadingNoteIds={loadingNoteIds}
-      onOpenNote={handleOpenNote}
-      pauseCount={pauseCount}
-      cardEventCount={cardEventCount}
-      lookupRate={lookupRate}
-      session={session}
-    />
-  );
-}
-
-/* ── Ratio View (primary design) ────────────────────────────────── */
-
-function RatioView({
-  sorted,
-  knownWordsMap,
-  cardEvents,
-  yomitanLookupEvents,
-  pauseRegions,
-  markers,
-  hoveredMarkerKey,
-  onHoveredMarkerChange,
-  pinnedMarkerKey,
-  onPinnedMarkerChange,
-  noteInfos,
-  loadingNoteIds,
-  onOpenNote,
-  pauseCount,
-  cardEventCount,
-  lookupRate,
-  session,
-}: {
-  sorted: TimelineEntry[];
-  knownWordsMap: Map<number, KnownWordsLineCounts>;
-  cardEvents: SessionEvent[];
-  yomitanLookupEvents: SessionEvent[];
-  pauseRegions: Array<{ startMs: number; endMs: number }>;
-  markers: SessionChartMarker[];
-  hoveredMarkerKey: string | null;
-  onHoveredMarkerChange: (markerKey: string | null) => void;
-  pinnedMarkerKey: string | null;
-  onPinnedMarkerChange: (markerKey: string | null) => void;
-  noteInfos: Map<number, SessionEventNoteInfo>;
-  loadingNoteIds: Set<number>;
-  onOpenNote: (noteId: number) => void;
-  pauseCount: number;
-  cardEventCount: number;
-  lookupRate: ReturnType<typeof buildLookupRateDisplay>;
-  session: SessionSummary;
-}) {
-  const [plotArea, setPlotArea] = useState<SessionChartPlotArea | null>(null);
-  const chartData = buildKnownWordsRatioChartData(sorted, knownWordsMap);
-
-  if (chartData.length === 0) {
-    return <div className="text-ctp-overlay2 text-xs p-2">No word data for this session.</div>;
-  }
-
-  const tsMin = chartData[0]!.tsMs;
-  const tsMax = chartData[chartData.length - 1]!.tsMs;
-  const finalTotal = chartData[chartData.length - 1]!.totalWords;
-
-  const sparkData = chartData.map((d) => ({ tsMs: d.tsMs, totalWords: d.totalWords }));
-
-  return (
-    <div className="bg-ctp-mantle border border-ctp-surface1 rounded-lg p-3 mt-1 space-y-1">
-      {/* ── Top: Percentage area chart ── */}
-      <div className="relative">
-        <ResponsiveContainer width="100%" height={130}>
-          <AreaChart data={chartData}>
-            <Customized
-              component={
-                <SessionChartOffsetProbe
-                  onPlotAreaChange={(nextPlotArea) => {
-                    setPlotArea((prevPlotArea) =>
-                      prevPlotArea &&
-                      prevPlotArea.left === nextPlotArea.left &&
-                      prevPlotArea.width === nextPlotArea.width
-                        ? prevPlotArea
-                        : nextPlotArea,
-                    );
-                  }}
-                />
-              }
-            />
-            <defs>
-              <linearGradient id={`knownGrad-${session.sessionId}`} x1="0" y1="1" x2="0" y2="0">
-                <stop offset="0%" stopColor="#a6da95" stopOpacity={0.4} />
-                <stop offset="100%" stopColor="#a6da95" stopOpacity={0.15} />
-              </linearGradient>
-              <linearGradient id={`unknownGrad-${session.sessionId}`} x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="#c6a0f6" stopOpacity={0.25} />
-                <stop offset="100%" stopColor="#c6a0f6" stopOpacity={0.08} />
-              </linearGradient>
-            </defs>
-
-            <CartesianGrid
-              horizontal
-              vertical={false}
-              stroke="#494d64"
-              strokeDasharray="4 4"
-              strokeOpacity={0.4}
-            />
-
-            <XAxis
-              dataKey="tsMs"
-              type="number"
-              domain={[tsMin, tsMax]}
-              tick={{ fontSize: 9, fill: CHART_THEME.tick }}
-              axisLine={false}
-              tickLine={false}
-              tickFormatter={formatTime}
-              interval="preserveStartEnd"
-            />
-            <YAxis
-              yAxisId="pct"
-              orientation="right"
-              domain={[0, finalTotal]}
-              allowDataOverflow
-              tick={{ fontSize: 9, fill: CHART_THEME.tick }}
-              tickFormatter={(v: number) => `${v.toLocaleString()}`}
-              axisLine={false}
-              tickLine={false}
-              width={32}
-            />
-
-            <Tooltip
-              contentStyle={tooltipStyle}
-              labelFormatter={formatTime}
-              formatter={(_value: number, name: string, props: { payload?: RatioChartPoint }) => {
-                const d = props.payload;
-                if (!d) return [_value, name];
-                if (name === 'Known words') {
-                  const knownPct = d.totalWords === 0 ? 0 : (d.knownWords / d.totalWords) * 100;
-                  return [`${d.knownWords.toLocaleString()} (${knownPct.toFixed(1)}%)`, name];
-                }
-                if (name === 'Unknown words') return [d.unknownWords.toLocaleString(), name];
-                return [_value, name];
-              }}
-              itemSorter={() => -1}
-            />
-
-            {/* Pause shaded regions */}
-            {pauseRegions.map((r, i) => (
-              <ReferenceArea
-                key={`pause-${i}`}
-                yAxisId="pct"
-                x1={r.startMs}
-                x2={r.endMs}
-                y1={0}
-                y2={finalTotal}
-                fill="#f5a97f"
-                fillOpacity={0.15}
-                stroke="#f5a97f"
-                strokeOpacity={0.4}
-                strokeDasharray="3 3"
-                strokeWidth={1}
-              />
-            ))}
-
-            {/* Card mine markers */}
-            {cardEvents.map((e, i) => (
-              <ReferenceLine
-                key={`card-${i}`}
-                yAxisId="pct"
-                x={e.tsMs}
-                stroke="#a6da95"
-                strokeWidth={2}
-                strokeOpacity={0.8}
-              />
-            ))}
-
-            {/* Yomitan lookup markers */}
-            {yomitanLookupEvents.map((e, i) => (
-              <ReferenceLine
-                key={`yomitan-${i}`}
-                yAxisId="pct"
-                x={e.tsMs}
-                stroke="#b7bdf8"
-                strokeWidth={1.5}
-                strokeDasharray="2 3"
-                strokeOpacity={0.7}
-              />
-            ))}
-
-            <Area
-              yAxisId="pct"
-              dataKey="knownWords"
-              stackId="ratio"
-              stroke="#a6da95"
-              strokeWidth={1.5}
-              fill={`url(#knownGrad-${session.sessionId})`}
-              name="Known words"
-              type="monotone"
-              dot={false}
-              activeDot={{ r: 3, fill: '#a6da95', stroke: '#1e2030', strokeWidth: 1 }}
-              isAnimationActive={false}
-            />
-            <Area
-              yAxisId="pct"
-              dataKey="unknownWords"
-              stackId="ratio"
-              stroke="#c6a0f6"
-              strokeWidth={0}
-              fill={`url(#unknownGrad-${session.sessionId})`}
-              name="Unknown words"
-              type="monotone"
-              isAnimationActive={false}
-            />
-          </AreaChart>
-        </ResponsiveContainer>
-        <SessionEventOverlay
-          markers={markers}
-          tsMin={tsMin}
-          tsMax={tsMax}
-          plotArea={plotArea}
-          hoveredMarkerKey={hoveredMarkerKey}
-          onHoveredMarkerChange={onHoveredMarkerChange}
-          pinnedMarkerKey={pinnedMarkerKey}
-          onPinnedMarkerChange={onPinnedMarkerChange}
-          noteInfos={noteInfos}
-          loadingNoteIds={loadingNoteIds}
-          onOpenNote={onOpenNote}
-        />
-      </div>
-
-      {/* ── Bottom: Token accumulation sparkline ── */}
-      <div className="flex items-center gap-2 border-t border-ctp-surface1 pt-1">
-        <span className="text-[9px] text-ctp-overlay0 whitespace-nowrap">total words</span>
-        <div className="flex-1 h-[28px]">
-          <ResponsiveContainer width="100%" height={28}>
-            <LineChart data={sparkData}>
-              <XAxis dataKey="tsMs" type="number" domain={[tsMin, tsMax]} hide />
-              <YAxis hide />
-              <Line
-                dataKey="totalWords"
-                stroke="#8aadf4"
-                strokeWidth={1.5}
-                strokeOpacity={0.8}
-                dot={false}
-                type="monotone"
-                isAnimationActive={false}
-              />
-            </LineChart>
-          </ResponsiveContainer>
-        </div>
-        <span className="text-[10px] text-ctp-blue font-semibold whitespace-nowrap tabular-nums">
-          {finalTotal.toLocaleString()}
-        </span>
-      </div>
-
-      {/* ── Stats bar ── */}
-      <StatsBar
-        hasKnownWords
-        pauseCount={pauseCount}
-        cardEventCount={cardEventCount}
-        session={session}
-        lookupRate={lookupRate}
-      />
-    </div>
-  );
-}
-
-/* ── Fallback View (no known words data) ────────────────────────── */
-
-function FallbackView({
-  sorted,
-  cardEvents,
-  yomitanLookupEvents,
-  pauseRegions,
-  markers,
-  hoveredMarkerKey,
-  onHoveredMarkerChange,
-  pinnedMarkerKey,
-  onPinnedMarkerChange,
-  noteInfos,
-  loadingNoteIds,
-  onOpenNote,
-  pauseCount,
-  cardEventCount,
-  lookupRate,
-  session,
-}: {
-  sorted: TimelineEntry[];
-  cardEvents: SessionEvent[];
-  yomitanLookupEvents: SessionEvent[];
-  pauseRegions: Array<{ startMs: number; endMs: number }>;
-  markers: SessionChartMarker[];
-  hoveredMarkerKey: string | null;
-  onHoveredMarkerChange: (markerKey: string | null) => void;
-  pinnedMarkerKey: string | null;
-  onPinnedMarkerChange: (markerKey: string | null) => void;
-  noteInfos: Map<number, SessionEventNoteInfo>;
-  loadingNoteIds: Set<number>;
-  onOpenNote: (noteId: number) => void;
-  pauseCount: number;
-  cardEventCount: number;
-  lookupRate: ReturnType<typeof buildLookupRateDisplay>;
-  session: SessionSummary;
-}) {
-  const [plotArea, setPlotArea] = useState<SessionChartPlotArea | null>(null);
-  const chartData: FallbackChartPoint[] = [];
-  for (const t of sorted) {
-    const totalWords = getSessionDisplayWordCount(t);
-    if (totalWords === 0) continue;
-    chartData.push({ tsMs: t.sampleMs, totalWords });
-  }
-
-  if (chartData.length === 0) {
-    return <div className="text-ctp-overlay2 text-xs p-2">No word data for this session.</div>;
-  }
-
-  const tsMin = chartData[0]!.tsMs;
-  const tsMax = chartData[chartData.length - 1]!.tsMs;
-
   return (
     <div className="bg-ctp-mantle border border-ctp-surface1 rounded-lg p-3 mt-1 space-y-3">
-      <div className="relative">
-        <ResponsiveContainer width="100%" height={130}>
-          <LineChart data={chartData}>
-            <Customized
-              component={
-                <SessionChartOffsetProbe
-                  onPlotAreaChange={(nextPlotArea) => {
-                    setPlotArea((prevPlotArea) =>
-                      prevPlotArea &&
-                      prevPlotArea.left === nextPlotArea.left &&
-                      prevPlotArea.width === nextPlotArea.width
-                        ? prevPlotArea
-                        : nextPlotArea,
-                    );
-                  }}
-                />
-              }
-            />
-            <XAxis
-              dataKey="tsMs"
-              type="number"
-              domain={[tsMin, tsMax]}
-              tick={{ fontSize: 9, fill: CHART_THEME.tick }}
-              axisLine={false}
-              tickLine={false}
-              tickFormatter={formatTime}
-              interval="preserveStartEnd"
-            />
-            <YAxis
-              tick={{ fontSize: 9, fill: CHART_THEME.tick }}
-              axisLine={false}
-              tickLine={false}
-              width={30}
-              allowDecimals={false}
-            />
-            <Tooltip
-              contentStyle={tooltipStyle}
-              labelFormatter={formatTime}
-              formatter={(value: number) => [`${value.toLocaleString()}`, 'Total words']}
-            />
-
-            {pauseRegions.map((r, i) => (
-              <ReferenceArea
-                key={`pause-${i}`}
-                x1={r.startMs}
-                x2={r.endMs}
-                fill="#f5a97f"
-                fillOpacity={0.15}
-                stroke="#f5a97f"
-                strokeOpacity={0.4}
-                strokeDasharray="3 3"
-                strokeWidth={1}
-              />
-            ))}
-
-            {cardEvents.map((e, i) => (
-              <ReferenceLine
-                key={`card-${i}`}
-                x={e.tsMs}
-                stroke="#a6da95"
-                strokeWidth={2}
-                strokeOpacity={0.8}
-              />
-            ))}
-            {yomitanLookupEvents.map((e, i) => (
-              <ReferenceLine
-                key={`yomitan-${i}`}
-                x={e.tsMs}
-                stroke="#b7bdf8"
-                strokeWidth={1.5}
-                strokeDasharray="2 3"
-                strokeOpacity={0.7}
-              />
-            ))}
-
-            <Line
-              dataKey="totalWords"
-              stroke="#8aadf4"
-              strokeWidth={1.5}
-              dot={false}
-              activeDot={{ r: 3, fill: '#8aadf4', stroke: '#1e2030', strokeWidth: 1 }}
-              name="Total words"
-              type="monotone"
-              isAnimationActive={false}
-            />
-          </LineChart>
-        </ResponsiveContainer>
-        <SessionEventOverlay
+      <SessionStatTiles session={session} />
+      {density.buckets.length === 0 ? (
+        <div className="text-ctp-overlay2 text-xs">No activity samples for this session.</div>
+      ) : (
+        <SessionDensityChart
+          density={density}
+          lookupEvents={yomitanLookupEvents}
           markers={markers}
-          tsMin={tsMin}
-          tsMax={tsMax}
-          plotArea={plotArea}
           hoveredMarkerKey={hoveredMarkerKey}
-          onHoveredMarkerChange={onHoveredMarkerChange}
+          onHoveredMarkerChange={setHoveredMarkerKey}
           pinnedMarkerKey={pinnedMarkerKey}
-          onPinnedMarkerChange={onPinnedMarkerChange}
+          onPinnedMarkerChange={setPinnedMarkerKey}
           noteInfos={noteInfos}
           loadingNoteIds={loadingNoteIds}
-          onOpenNote={onOpenNote}
+          onOpenNote={handleOpenNote}
         />
+      )}
+    </div>
+  );
+}
+
+/* ── Stat tiles ─────────────────────────────────────────────────── */
+
+export function buildSessionStatTiles(session: SessionSummary): Array<{
+  key: string;
+  label: string;
+  value: string;
+  detail: string;
+  colorClass: string;
+}> {
+  const words = getSessionDisplayWordCount(session);
+  const activeMin = session.activeWatchedMs / 60_000;
+  const wordsPerMin = activeMin > 0 ? words / activeMin : 0;
+  const linesPerMin = activeMin > 0 ? session.linesSeen / activeMin : 0;
+  const pausedMs = Math.max(0, session.totalWatchedMs - session.activeWatchedMs);
+  const pausedPct =
+    session.totalWatchedMs > 0 ? Math.round((pausedMs / session.totalWatchedMs) * 100) : 0;
+  const lookupRate = buildLookupRateDisplay(session.yomitanLookupCount, words);
+  const hasKnownRate = session.knownWordsSeen > 0 && words > 0;
+
+  return [
+    {
+      key: 'pace',
+      label: 'Pace',
+      value: activeMin > 0 ? `${wordsPerMin.toFixed(0)} words/min` : '—',
+      detail: activeMin > 0 ? `${linesPerMin.toFixed(1)} lines/min` : 'no active time',
+      colorClass: 'text-ctp-blue',
+    },
+    {
+      key: 'lines',
+      label: 'Lines',
+      value: formatNumber(session.linesSeen),
+      detail: `${formatNumber(words)} words`,
+      colorClass: 'text-ctp-mauve',
+    },
+    {
+      key: 'known',
+      label: 'Known',
+      value: hasKnownRate ? `${session.knownWordRate.toFixed(0)}%` : '—',
+      detail: hasKnownRate
+        ? `${formatNumber(session.knownWordsSeen)} known words`
+        : 'no known-word data',
+      colorClass: 'text-ctp-green',
+    },
+    {
+      key: 'lookups',
+      label: 'Lookups',
+      value: formatNumber(session.yomitanLookupCount),
+      detail: lookupRate ? lookupRate.longValue : 'Yomitan lookups',
+      colorClass: 'text-ctp-lavender',
+    },
+    {
+      key: 'paused',
+      label: 'Paused',
+      value: pausedMs > 0 ? formatClockDuration(pausedMs) : 'none',
+      detail: `${pausedPct}% of ${formatDuration(session.totalWatchedMs)} wall time`,
+      colorClass: 'text-ctp-peach',
+    },
+  ];
+}
+
+function SessionStatTiles({ session }: { session: SessionSummary }) {
+  const tiles = buildSessionStatTiles(session);
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2">
+      {tiles.map((tile) => (
+        <div
+          key={tile.key}
+          className="rounded-md border border-ctp-surface1 bg-ctp-base/60 px-2.5 py-2 min-w-0"
+        >
+          <div className="text-[10px] uppercase tracking-wide text-ctp-overlay1">{tile.label}</div>
+          <div className={`text-sm font-semibold tabular-nums truncate ${tile.colorClass}`}>
+            {tile.value}
+          </div>
+          <div className="text-[10px] text-ctp-overlay2 truncate">{tile.detail}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/* ── Density chart + event lane ─────────────────────────────────── */
+
+interface SessionDensityChartProps {
+  density: SessionDensity;
+  lookupEvents: SessionEvent[];
+  markers: SessionChartMarker[];
+  hoveredMarkerKey: string | null;
+  onHoveredMarkerChange: (markerKey: string | null) => void;
+  pinnedMarkerKey: string | null;
+  onPinnedMarkerChange: (markerKey: string | null) => void;
+  noteInfos: Map<number, SessionEventNoteInfo>;
+  loadingNoteIds: Set<number>;
+  onOpenNote: (noteId: number) => void;
+}
+
+/** Roughly five evenly spaced tick indexes, always including the first bucket. */
+export function pickDensityTickIndexes(bucketCount: number, maxTicks = 5): number[] {
+  if (bucketCount <= 0) return [];
+  const step = Math.max(1, Math.ceil(bucketCount / maxTicks));
+  const ticks: number[] = [];
+  for (let index = 0; index < bucketCount; index += step) {
+    ticks.push(index);
+  }
+  return ticks;
+}
+
+function DensityTooltip({
+  active,
+  payload,
+  hasKnownWords,
+}: {
+  active?: boolean;
+  payload?: Array<{ payload?: SessionDensityBucket }>;
+  hasKnownWords: boolean;
+}) {
+  const bucket = payload?.[0]?.payload;
+  if (!active || !bucket) return null;
+  const knownPct = bucket.words > 0 ? Math.round((bucket.knownWords / bucket.words) * 100) : 0;
+
+  return (
+    <div className="rounded-md border border-ctp-surface1 bg-ctp-surface0 px-2.5 py-2 text-[11px] text-ctp-text shadow-lg">
+      <div className="text-ctp-subtext0 tabular-nums">
+        {formatTimeWithSeconds(bucket.startMs)} – {formatTimeWithSeconds(bucket.endMs)}
+      </div>
+      <div className="mt-1 font-semibold tabular-nums">
+        {formatNumber(bucket.words)} {bucket.words === 1 ? 'word' : 'words'}
+      </div>
+      {hasKnownWords && bucket.words > 0 ? (
+        <div className="tabular-nums">
+          <span style={{ color: SERIES_COLORS.known }}>
+            {formatNumber(bucket.knownWords)} known
+          </span>
+          <span className="text-ctp-overlay1"> ({knownPct}%)</span>
+          <span className="text-ctp-overlay1"> · </span>
+          <span style={{ color: SERIES_COLORS.unknown }}>
+            {formatNumber(bucket.unknownWords)} unknown
+          </span>
+        </div>
+      ) : null}
+      {bucket.lookups > 0 ? (
+        <div className="tabular-nums" style={{ color: SERIES_COLORS.lookup }}>
+          {bucket.lookups} {bucket.lookups === 1 ? 'lookup' : 'lookups'}
+        </div>
+      ) : null}
+      {bucket.cards > 0 ? (
+        <div className="tabular-nums" style={{ color: SERIES_COLORS.card }}>
+          {bucket.cards} {bucket.cards === 1 ? 'card' : 'cards'} mined
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function SessionDensityChart({
+  density,
+  lookupEvents,
+  markers,
+  hoveredMarkerKey,
+  onHoveredMarkerChange,
+  pinnedMarkerKey,
+  onPinnedMarkerChange,
+  noteInfos,
+  loadingNoteIds,
+  onOpenNote,
+}: SessionDensityChartProps) {
+  const [plotArea, setPlotArea] = useState<SessionChartPlotArea | null>(null);
+  const { buckets, startMs, endMs, hasKnownWords } = density;
+  const tickIndexes = pickDensityTickIndexes(buckets.length);
+  const hasLane = lookupEvents.length > 0 || markers.length > 0;
+
+  const laneLeft = (tsMs: number): string => {
+    if (plotArea) {
+      return `${projectSessionMarkerLeftPx({
+        anchorTsMs: tsMs,
+        tsMin: startMs,
+        tsMax: endMs,
+        plotLeftPx: plotArea.left,
+        plotWidthPx: plotArea.width,
+      })}px`;
+    }
+    const ratio = endMs > startMs ? (tsMs - startMs) / (endMs - startMs) : 0.5;
+    return `${Math.max(0, Math.min(100, ratio * 100))}%`;
+  };
+
+  return (
+    <div>
+      <div className="flex items-baseline justify-between mb-1">
+        <div className="text-xs font-semibold text-ctp-text">Reading density</div>
+        <div className="text-[10px] text-ctp-overlay1">
+          words per {formatBucketSize(density.bucketMs)}
+        </div>
       </div>
 
-      <StatsBar
-        hasKnownWords={false}
-        pauseCount={pauseCount}
-        cardEventCount={cardEventCount}
-        session={session}
-        lookupRate={lookupRate}
-      />
+      <ResponsiveContainer width="100%" height={CHART_HEIGHT}>
+        <BarChart
+          data={buckets}
+          margin={{ top: 4, right: 4, bottom: 0, left: 0 }}
+          barCategoryGap="22%"
+        >
+          <Customized
+            component={
+              <SessionChartOffsetProbe
+                onPlotAreaChange={(nextPlotArea) => {
+                  setPlotArea((prevPlotArea) =>
+                    prevPlotArea &&
+                    prevPlotArea.left === nextPlotArea.left &&
+                    prevPlotArea.width === nextPlotArea.width
+                      ? prevPlotArea
+                      : nextPlotArea,
+                  );
+                }}
+              />
+            }
+          />
+          <CartesianGrid
+            horizontal
+            vertical={false}
+            stroke={CHART_THEME.grid}
+            strokeDasharray="3 3"
+            strokeOpacity={0.35}
+          />
+          <XAxis
+            dataKey="index"
+            type="category"
+            ticks={tickIndexes}
+            interval={0}
+            tickFormatter={(index: number) => formatTime(buckets[index]?.startMs ?? startMs)}
+            tick={{ fontSize: 9, fill: CHART_THEME.tick }}
+            axisLine={false}
+            tickLine={false}
+          />
+          <YAxis
+            tick={{ fontSize: 9, fill: CHART_THEME.tick }}
+            axisLine={false}
+            tickLine={false}
+            width={30}
+            allowDecimals={false}
+          />
+          <Tooltip
+            cursor={{ fill: 'rgba(202,211,245,0.08)' }}
+            content={<DensityTooltip hasKnownWords={hasKnownWords} />}
+            isAnimationActive={false}
+          />
+          {/* recharts only registers direct Bar children, so no fragment wrapper here */}
+          {hasKnownWords ? (
+            <Bar
+              key="known"
+              dataKey="knownWords"
+              stackId="words"
+              name="Known"
+              fill={SERIES_COLORS.known}
+              fillOpacity={0.85}
+              isAnimationActive={false}
+            />
+          ) : null}
+          {hasKnownWords ? (
+            <Bar
+              key="unknown"
+              dataKey="unknownWords"
+              stackId="words"
+              name="Unknown"
+              fill={SERIES_COLORS.unknown}
+              fillOpacity={0.85}
+              radius={[3, 3, 0, 0]}
+              isAnimationActive={false}
+            />
+          ) : (
+            <Bar
+              key="words"
+              dataKey="words"
+              name="Words"
+              fill={SERIES_COLORS.words}
+              fillOpacity={0.85}
+              radius={[3, 3, 0, 0]}
+              isAnimationActive={false}
+            />
+          )}
+        </BarChart>
+      </ResponsiveContainer>
+
+      {hasLane ? (
+        <div className="relative h-7" aria-label="Lookup and card events">
+          <div
+            className="absolute top-1/2 h-px bg-ctp-surface1"
+            style={
+              plotArea ? { left: plotArea.left, width: plotArea.width } : { left: 0, right: 0 }
+            }
+          />
+          {lookupEvents.map((event, index) => (
+            <span
+              key={`lookup-${event.tsMs}-${index}`}
+              title={`Yomitan lookup at ${formatTimeWithSeconds(event.tsMs)}`}
+              className="absolute top-1.5 bottom-1.5 w-0.5 -translate-x-1/2 rounded-full"
+              style={{ left: laneLeft(event.tsMs), background: SERIES_COLORS.lookup, opacity: 0.8 }}
+            />
+          ))}
+          <SessionEventOverlay
+            markers={markers}
+            tsMin={startMs}
+            tsMax={endMs}
+            plotArea={plotArea}
+            hoveredMarkerKey={hoveredMarkerKey}
+            onHoveredMarkerChange={onHoveredMarkerChange}
+            pinnedMarkerKey={pinnedMarkerKey}
+            onPinnedMarkerChange={onPinnedMarkerChange}
+            noteInfos={noteInfos}
+            loadingNoteIds={loadingNoteIds}
+            onOpenNote={onOpenNote}
+          />
+        </div>
+      ) : null}
+
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[10px] text-ctp-overlay2 mt-1">
+        {hasKnownWords ? (
+          <>
+            <LegendSwatch color={SERIES_COLORS.known} label="Known words" />
+            <LegendSwatch color={SERIES_COLORS.unknown} label="Unknown words" />
+          </>
+        ) : (
+          <LegendSwatch color={SERIES_COLORS.words} label="Words" />
+        )}
+        {lookupEvents.length > 0 ? (
+          <span className="flex items-center gap-1.5">
+            <span
+              className="inline-block w-0.5 h-3 rounded-full"
+              style={{ background: SERIES_COLORS.lookup }}
+            />
+            Yomitan lookup
+          </span>
+        ) : null}
+        {markers.length > 0 ? (
+          <span className="flex items-center gap-1.5">
+            <span style={{ color: SERIES_COLORS.card }}>{'⛏'}</span>
+            Card mined (click for note)
+          </span>
+        ) : null}
+      </div>
     </div>
   );
 }
 
-/* ── Stats Bar ──────────────────────────────────────────────────── */
-
-function StatsBar({
-  hasKnownWords,
-  pauseCount,
-  cardEventCount,
-  session,
-  lookupRate,
-}: {
-  hasKnownWords: boolean;
-  pauseCount: number;
-  cardEventCount: number;
-  session: SessionSummary;
-  lookupRate: ReturnType<typeof buildLookupRateDisplay>;
-}) {
+function LegendSwatch({ color, label }: { color: string; label: string }) {
   return (
-    <div className="flex flex-wrap items-center gap-4 text-[11px] pt-1">
-      {/* Group 1: Legend */}
-      {hasKnownWords && (
-        <>
-          <span className="flex items-center gap-1.5">
-            <span
-              className="inline-block w-2.5 h-2.5 rounded-sm"
-              style={{ background: 'rgba(166,218,149,0.4)', border: '1px solid #a6da95' }}
-            />
-            <span className="text-ctp-overlay2">Known</span>
-          </span>
-          <span className="flex items-center gap-1.5">
-            <span
-              className="inline-block w-2.5 h-2.5 rounded-sm"
-              style={{ background: 'rgba(198,160,246,0.2)', border: '1px solid #c6a0f6' }}
-            />
-            <span className="text-ctp-overlay2">Unknown</span>
-          </span>
-          <span className="text-ctp-surface2">|</span>
-        </>
-      )}
-
-      {/* Group 2: Playback stats */}
-      {pauseCount > 0 && (
-        <span className="text-ctp-overlay2">
-          <span className="text-ctp-peach">{pauseCount}</span> pause
-          {pauseCount !== 1 ? 's' : ''}
-        </span>
-      )}
-      {pauseCount > 0 && <span className="text-ctp-surface2">|</span>}
-
-      {/* Group 3: Learning events */}
-      <span className="flex items-center gap-1.5">
-        <span
-          className="inline-block w-3 h-0.5 rounded"
-          style={{ background: '#b7bdf8', opacity: 0.8 }}
-        />
-        <span className="text-ctp-overlay2">
-          {session.yomitanLookupCount} Yomitan lookup
-          {session.yomitanLookupCount !== 1 ? 's' : ''}
-        </span>
-      </span>
-      {lookupRate && (
-        <span className="text-ctp-overlay2">
-          lookup rate: <span className="text-ctp-sapphire">{lookupRate.shortValue}</span>{' '}
-          <span className="text-ctp-subtext0">({lookupRate.longValue})</span>
-        </span>
-      )}
-      <span className="flex items-center gap-1.5">
-        <span className="text-[12px]">{'\u26CF'}</span>
-        <span className="text-ctp-cards-mined">
-          {Math.max(cardEventCount, session.cardsMined)} card
-          {Math.max(cardEventCount, session.cardsMined) !== 1 ? 's' : ''} mined
-        </span>
-      </span>
-    </div>
+    <span className="flex items-center gap-1.5">
+      <span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ background: color }} />
+      {label}
+    </span>
   );
 }
diff --git a/stats/src/components/sessions/SessionEventOverlay.tsx b/stats/src/components/sessions/SessionEventOverlay.tsx
index e1eee596..7d6a0aab 100644
--- a/stats/src/components/sessions/SessionEventOverlay.tsx
+++ b/stats/src/components/sessions/SessionEventOverlay.tsx
@@ -29,23 +29,12 @@ function toPercent(tsMs: number, tsMin: number, tsMax: number): number {
   return Math.max(0, Math.min(100, ratio));
 }
 
-function markerLabel(marker: SessionChartMarker): string {
-  switch (marker.kind) {
-    case 'pause':
-      return '||';
-    case 'card':
-      return '\u26CF';
-  }
-}
-
-function markerColors(marker: SessionChartMarker): { border: string; bg: string; text: string } {
-  switch (marker.kind) {
-    case 'pause':
-      return { border: '#f5a97f', bg: 'rgba(245,169,127,0.16)', text: '#f5a97f' };
-    case 'card':
-      return { border: '#a6da95', bg: 'rgba(166,218,149,0.16)', text: '#a6da95' };
-  }
-}
+const CARD_MARKER_LABEL = '\u26CF';
+const CARD_MARKER_COLORS = {
+  border: '#f5bde6',
+  bg: 'rgba(245,189,230,0.18)',
+  text: '#f5bde6',
+};
 
 function popupAlignment(percent: number): string {
   if (percent <= 15) return 'left-0 translate-x-0';
@@ -137,16 +126,14 @@ export function SessionEventOverlay({
               plotWidthPx: plotArea.width,
             })}px`
           : `${percent}%`;
-        const colors = markerColors(marker);
         const isActive = marker.key === activeMarkerKey;
         const isPinned = marker.key === pinnedMarkerKey;
-        const loading =
-          marker.kind === 'card' && marker.noteIds.some((noteId) => loadingNoteIds.has(noteId));
+        const loading = marker.noteIds.some((noteId) => loadingNoteIds.has(noteId));
 
         return (
           <div
             key={marker.key}
-            className="pointer-events-auto absolute top-0 -translate-x-1/2 pt-1"
+            className="pointer-events-auto absolute top-1/2 -translate-x-1/2 -translate-y-1/2"
             style={{ left }}
             onMouseEnter={() => onHoveredMarkerChange(marker.key)}
             onMouseLeave={(event) =>
@@ -160,13 +147,14 @@ export function SessionEventOverlay({
             <div className="relative flex flex-col items-center">
               <button
                 type="button"
-                aria-label={`Show ${marker.kind} event details`}
+                aria-label="Show card mined event details"
                 aria-pressed={isPinned}
-                className="flex h-5 min-w-5 items-center justify-center rounded-full border px-1 text-[10px] font-semibold shadow-sm backdrop-blur-sm"
+                title={`${marker.cardsDelta} ${marker.cardsDelta === 1 ? 'card' : 'cards'} mined`}
+                className="flex h-5 min-w-5 items-center justify-center rounded-full border px-1 text-[10px] font-semibold shadow-sm backdrop-blur-sm transition-transform hover:scale-110"
                 style={{
-                  borderColor: colors.border,
-                  background: colors.bg,
-                  color: colors.text,
+                  borderColor: CARD_MARKER_COLORS.border,
+                  background: CARD_MARKER_COLORS.bg,
+                  color: CARD_MARKER_COLORS.text,
                 }}
                 onClick={(event) => {
                   event.preventDefault();
@@ -175,7 +163,7 @@ export function SessionEventOverlay({
                   onPinnedMarkerChange(togglePinnedSessionMarkerKey(pinnedMarkerKey, marker.key));
                 }}
               >
-                {markerLabel(marker)}
+                {CARD_MARKER_LABEL}
               </button>
               {isActive ? (
                 <div
diff --git a/stats/src/components/sessions/SessionEventPopover.tsx b/stats/src/components/sessions/SessionEventPopover.tsx
index 2e397b1a..35ac0c98 100644
--- a/stats/src/components/sessions/SessionEventPopover.tsx
+++ b/stats/src/components/sessions/SessionEventPopover.tsx
@@ -1,8 +1,4 @@
-import {
-  formatEventSeconds,
-  type SessionChartMarker,
-  type SessionEventNoteInfo,
-} from '../../lib/session-events';
+import type { SessionChartMarker, SessionEventNoteInfo } from '../../lib/session-events';
 
 interface SessionEventPopoverProps {
   marker: SessionChartMarker;
@@ -35,10 +31,7 @@ export function SessionEventPopover({
     <div className="relative z-50 w-64 rounded-xl border border-ctp-surface2 bg-ctp-surface0/95 p-3 shadow-2xl shadow-black/30 backdrop-blur-sm">
       <div className="mb-2 flex items-start justify-between gap-3">
         <div>
-          <div className="text-xs font-semibold text-ctp-text">
-            {marker.kind === 'pause' && 'Paused'}
-            {marker.kind === 'card' && 'Card mined'}
-          </div>
+          <div className="text-xs font-semibold text-ctp-text">Card mined</div>
           <div className="text-[10px] text-ctp-overlay1">{formatEventTime(marker.eventTsMs)}</div>
         </div>
         <div className="flex items-center gap-1.5">
@@ -64,78 +57,65 @@ export function SessionEventPopover({
               ×
             </button>
           ) : null}
-          <div className="text-sm">
-            {marker.kind === 'pause' && '||'}
-            {marker.kind === 'card' && '\u26CF'}
-          </div>
+          <div className="text-sm text-ctp-cards-mined">{'\u26CF'}</div>
         </div>
       </div>
 
-      {marker.kind === 'pause' && (
-        <div className="text-xs text-ctp-subtext0">
-          Duration: <span className="text-ctp-peach">{formatEventSeconds(marker.durationMs)}</span>
+      <div className="space-y-2">
+        <div className="text-xs text-ctp-cards-mined">
+          +{marker.cardsDelta} {marker.cardsDelta === 1 ? 'card' : 'cards'}
         </div>
-      )}
-
-      {marker.kind === 'card' && (
-        <div className="space-y-2">
-          <div className="text-xs text-ctp-cards-mined">
-            +{marker.cardsDelta} {marker.cardsDelta === 1 ? 'card' : 'cards'}
-          </div>
-          {loading ? (
-            <div className="text-xs text-ctp-overlay1">Loading Anki note info...</div>
-          ) : null}
-          <div className="space-y-1.5">
-            {marker.noteIds.length > 0 ? (
-              marker.noteIds.map((noteId) => {
-                const info = noteInfos.get(noteId);
-                const hasPreview = Boolean(info?.expression || info?.context || info?.meaning);
-                const showUnavailableFallback = !loading && !hasPreview;
-                return (
-                  <div
-                    key={noteId}
-                    className="rounded-lg border border-ctp-surface1 bg-ctp-mantle/80 px-2.5 py-2"
-                  >
-                    <div className="mb-1 flex items-center justify-between gap-2">
-                      <div className="rounded-full bg-ctp-surface1 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-ctp-overlay1">
-                        Note {noteId}
-                      </div>
-                      {showUnavailableFallback ? (
-                        <div className="text-[10px] text-ctp-overlay1">Preview unavailable</div>
-                      ) : null}
+        {loading ? (
+          <div className="text-xs text-ctp-overlay1">Loading Anki note info...</div>
+        ) : null}
+        <div className="space-y-1.5">
+          {marker.noteIds.length > 0 ? (
+            marker.noteIds.map((noteId) => {
+              const info = noteInfos.get(noteId);
+              const hasPreview = Boolean(info?.expression || info?.context || info?.meaning);
+              const showUnavailableFallback = !loading && !hasPreview;
+              return (
+                <div
+                  key={noteId}
+                  className="rounded-lg border border-ctp-surface1 bg-ctp-mantle/80 px-2.5 py-2"
+                >
+                  <div className="mb-1 flex items-center justify-between gap-2">
+                    <div className="rounded-full bg-ctp-surface1 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-ctp-overlay1">
+                      Note {noteId}
                     </div>
-                    {info?.expression ? (
-                      <div className="mb-1 text-sm font-medium text-ctp-text">
-                        {info.expression}
-                      </div>
-                    ) : null}
-                    {info?.context ? (
-                      <div className="mb-1 text-xs text-ctp-subtext0">{info.context}</div>
-                    ) : null}
-                    {info?.meaning ? (
-                      <div className="mb-2 text-xs text-ctp-teal">{info.meaning}</div>
-                    ) : null}
                     {showUnavailableFallback ? (
-                      <div className="mb-2 text-xs text-ctp-overlay1">
-                        Preview unavailable from AnkiConnect.
-                      </div>
+                      <div className="text-[10px] text-ctp-overlay1">Preview unavailable</div>
                     ) : null}
-                    <button
-                      type="button"
-                      onClick={() => onOpenNote(noteId)}
-                      className="rounded-md bg-ctp-surface1 px-2 py-1 text-[10px] text-ctp-blue transition-colors hover:bg-ctp-surface2"
-                    >
-                      Open in Anki
-                    </button>
                   </div>
-                );
-              })
-            ) : (
-              <div className="text-xs text-ctp-overlay1">No linked note ids recorded.</div>
-            )}
-          </div>
+                  {info?.expression ? (
+                    <div className="mb-1 text-sm font-medium text-ctp-text">{info.expression}</div>
+                  ) : null}
+                  {info?.context ? (
+                    <div className="mb-1 text-xs text-ctp-subtext0">{info.context}</div>
+                  ) : null}
+                  {info?.meaning ? (
+                    <div className="mb-2 text-xs text-ctp-teal">{info.meaning}</div>
+                  ) : null}
+                  {showUnavailableFallback ? (
+                    <div className="mb-2 text-xs text-ctp-overlay1">
+                      Preview unavailable from AnkiConnect.
+                    </div>
+                  ) : null}
+                  <button
+                    type="button"
+                    onClick={() => onOpenNote(noteId)}
+                    className="rounded-md bg-ctp-surface1 px-2 py-1 text-[10px] text-ctp-blue transition-colors hover:bg-ctp-surface2"
+                  >
+                    Open in Anki
+                  </button>
+                </div>
+              );
+            })
+          ) : (
+            <div className="text-xs text-ctp-overlay1">No linked note ids recorded.</div>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 }
diff --git a/stats/src/lib/formatters.test.ts b/stats/src/lib/formatters.test.ts
index 1f60926a..b842e5df 100644
--- a/stats/src/lib/formatters.test.ts
+++ b/stats/src/lib/formatters.test.ts
@@ -4,6 +4,7 @@ import test from 'node:test';
 import {
   epochDayToDate,
   epochMsFromDbTimestamp,
+  formatClockDuration,
   formatRelativeDate,
   formatSessionDayLabel,
 } from './formatters';
@@ -153,3 +154,9 @@ test('formatSessionDayLabel includes year for past-year dates', () => {
     assert.notEqual(label, withoutYear);
   }, fixedNow);
 });
+
+test('formatClockDuration keeps seconds for sub-hour spans', () => {
+  assert.equal(formatClockDuration(42_000), '42s');
+  assert.equal(formatClockDuration(372_000), '6m 12s');
+  assert.equal(formatClockDuration(3_780_000), '1h 3m');
+});
diff --git a/stats/src/lib/formatters.ts b/stats/src/lib/formatters.ts
index 0184d154..e6ae3072 100644
--- a/stats/src/lib/formatters.ts
+++ b/stats/src/lib/formatters.ts
@@ -74,3 +74,17 @@ export function formatSessionDayLabel(sessionStartedAtMs: number): string {
     ...(includeYear ? { year: 'numeric' } : {}),
   });
 }
+
+/** Second-precise duration for short spans ("42s", "6m 12s", "1h 3m"). */
+export function formatClockDuration(ms: number): string {
+  const totalSec = Math.max(0, Math.round(ms / 1000));
+  if (totalSec < 60) return `${totalSec}s`;
+  const totalMin = Math.floor(totalSec / 60);
+  if (totalMin < 60) {
+    const sec = totalSec % 60;
+    return sec > 0 ? `${totalMin}m ${sec}s` : `${totalMin}m`;
+  }
+  const hours = Math.floor(totalMin / 60);
+  const mins = totalMin % 60;
+  return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+}
diff --git a/stats/src/lib/session-density.test.ts b/stats/src/lib/session-density.test.ts
new file mode 100644
index 00000000..d9360570
--- /dev/null
+++ b/stats/src/lib/session-density.test.ts
@@ -0,0 +1,82 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { buildSessionDensity, pickDensityBucketMs } from './session-density';
+import { EventType } from '../types/stats';
+
+function sample(sampleMs: number, linesSeen: number, tokensSeen: number) {
+  return { sampleMs, totalWatchedMs: 0, activeWatchedMs: 0, linesSeen, tokensSeen, cardsMined: 0 };
+}
+
+test('pickDensityBucketMs grows the bucket until the session fits in the bucket budget', () => {
+  assert.equal(pickDensityBucketMs(5 * 60_000), 10_000);
+  assert.equal(pickDensityBucketMs(25 * 60_000), 30_000);
+  assert.equal(pickDensityBucketMs(3 * 3_600_000), 300_000);
+});
+
+test('pickDensityBucketMs scales past the largest candidate so very long spans stay in budget', () => {
+  const spanMs = 48 * 3_600_000;
+  const bucketMs = pickDensityBucketMs(spanMs);
+  assert.ok(Math.ceil(spanMs / bucketMs) <= 60);
+  assert.equal(bucketMs % 60_000, 0);
+});
+
+test('buildSessionDensity converts cumulative samples into per-bucket known/unknown deltas', () => {
+  const density = buildSessionDensity(
+    [sample(0, 0, 0), sample(5_000, 1, 10), sample(12_000, 2, 25), sample(25_000, 3, 40)],
+    [
+      { linesSeen: 1, knownWordsSeen: 4, totalWordsSeen: 8 },
+      { linesSeen: 2, knownWordsSeen: 10, totalWordsSeen: 20 },
+      { linesSeen: 3, knownWordsSeen: 20, totalWordsSeen: 32 },
+    ],
+    [
+      { eventType: EventType.YOMITAN_LOOKUP, tsMs: 3_000, payload: null },
+      { eventType: EventType.YOMITAN_LOOKUP, tsMs: 14_000, payload: null },
+      { eventType: EventType.CARD_MINED, tsMs: 24_000, payload: '{"cardsMined":2}' },
+      { eventType: EventType.PAUSE_START, tsMs: 24_500, payload: null },
+    ],
+  );
+
+  assert.equal(density.bucketMs, 10_000);
+  assert.equal(density.hasKnownWords, true);
+  assert.deepEqual(
+    density.buckets.map((b) => [b.knownWords, b.unknownWords, b.lookups, b.cards]),
+    [
+      [4, 4, 1, 0],
+      [6, 6, 1, 0],
+      [10, 2, 0, 2],
+    ],
+  );
+});
+
+test('buildSessionDensity falls back to raw token counts without known-word data', () => {
+  const density = buildSessionDensity(
+    [sample(0, 0, 0), sample(9_000, 1, 7), sample(15_000, 2, 12)],
+    [],
+    [],
+  );
+
+  assert.equal(density.hasKnownWords, false);
+  assert.deepEqual(
+    density.buckets.map((b) => [b.words, b.knownWords]),
+    [
+      [7, 0],
+      [5, 0],
+    ],
+  );
+});
+
+test('buildSessionDensity returns no buckets for an empty timeline', () => {
+  assert.deepEqual(buildSessionDensity([], [], []).buckets, []);
+});
+
+test('buildSessionDensity keeps the final sample when the span ends exactly on a bucket edge', () => {
+  const density = buildSessionDensity([sample(0, 0, 0), sample(300_000, 1, 42)], [], []);
+
+  assert.equal(density.bucketMs, 10_000);
+  assert.equal(density.buckets.length, 30);
+  assert.equal(density.buckets.at(-1)!.words, 42);
+  assert.equal(
+    density.buckets.reduce((sum, b) => sum + b.words, 0),
+    42,
+  );
+});
diff --git a/stats/src/lib/session-density.ts b/stats/src/lib/session-density.ts
new file mode 100644
index 00000000..f4c5dad9
--- /dev/null
+++ b/stats/src/lib/session-density.ts
@@ -0,0 +1,149 @@
+import type { KnownWordsTimelinePoint } from '../hooks/useSessions';
+import { readCardsMinedDelta } from './session-events';
+import { EventType } from '../types/stats';
+import type { SessionEvent, SessionTimelinePoint } from '../types/stats';
+
+/** One time slice of a session: words read, lookups made, and cards mined inside it. */
+export interface SessionDensityBucket {
+  index: number;
+  startMs: number;
+  endMs: number;
+  words: number;
+  knownWords: number;
+  unknownWords: number;
+  lookups: number;
+  cards: number;
+}
+
+export interface SessionDensity {
+  bucketMs: number;
+  startMs: number;
+  endMs: number;
+  /** True when the known-words timeline had data, so known/unknown splits are meaningful. */
+  hasKnownWords: boolean;
+  buckets: SessionDensityBucket[];
+}
+
+const BUCKET_SIZE_CANDIDATES_MS = [
+  10_000, 15_000, 30_000, 60_000, 120_000, 300_000, 600_000, 1_800_000,
+];
+
+export const MAX_DENSITY_BUCKETS = 60;
+
+/**
+ * Smallest candidate bucket size that keeps the whole span within maxBuckets.
+ * Spans too long for every candidate get whole-minute buckets sized to fit.
+ */
+export function pickDensityBucketMs(spanMs: number, maxBuckets = MAX_DENSITY_BUCKETS): number {
+  for (const candidate of BUCKET_SIZE_CANDIDATES_MS) {
+    if (Math.ceil(spanMs / candidate) <= maxBuckets) return candidate;
+  }
+  return Math.ceil(spanMs / maxBuckets / 60_000) * 60_000;
+}
+
+export function formatBucketSize(bucketMs: number): string {
+  if (bucketMs < 60_000) return `${Math.round(bucketMs / 1000)}s`;
+  const minutes = Math.round(bucketMs / 60_000);
+  return `${minutes}m`;
+}
+
+type KnownWordCounts = { knownWordsSeen: number; totalWordsSeen: number };
+
+/** Cumulative known/total counts at a lines-seen checkpoint, using the nearest earlier point. */
+function lookupKnownWordCounts(
+  sortedPoints: KnownWordsTimelinePoint[],
+  linesSeen: number,
+): KnownWordCounts {
+  let best: KnownWordCounts = { knownWordsSeen: 0, totalWordsSeen: 0 };
+  for (const point of sortedPoints) {
+    if (point.linesSeen > linesSeen) break;
+    best = point;
+  }
+  return best;
+}
+
+/**
+ * Turn cumulative telemetry samples into per-bucket deltas so the chart shows how
+ * dense the dialogue was over the session instead of a monotonically rising total.
+ */
+export function buildSessionDensity(
+  timeline: SessionTimelinePoint[],
+  knownWordsTimeline: KnownWordsTimelinePoint[],
+  events: SessionEvent[],
+): SessionDensity {
+  const samples = [...timeline].sort((a, b) => a.sampleMs - b.sampleMs);
+  if (samples.length === 0) {
+    return { bucketMs: 0, startMs: 0, endMs: 0, hasKnownWords: false, buckets: [] };
+  }
+
+  const knownPoints = [...knownWordsTimeline].sort((a, b) => a.linesSeen - b.linesSeen);
+  const hasKnownWords = knownPoints.length > 0;
+  const startMs = samples[0]!.sampleMs;
+  const lastSampleMs = samples[samples.length - 1]!.sampleMs;
+  const spanMs = Math.max(1, lastSampleMs - startMs);
+  const bucketMs = pickDensityBucketMs(spanMs);
+  const bucketCount = Math.max(1, Math.ceil(spanMs / bucketMs));
+  const endMs = startMs + bucketCount * bucketMs;
+
+  const buckets: SessionDensityBucket[] = [];
+  let sampleIndex = -1;
+  let prevWords = 0;
+  let prevKnown = 0;
+
+  for (let index = 0; index < bucketCount; index += 1) {
+    const bucketStart = startMs + index * bucketMs;
+    const bucketEnd = bucketStart + bucketMs;
+    // The last bucket also owns a sample sitting exactly on the session's end edge.
+    const isLastBucket = index === bucketCount - 1;
+    while (
+      sampleIndex + 1 < samples.length &&
+      (isLastBucket || samples[sampleIndex + 1]!.sampleMs < bucketEnd)
+    ) {
+      sampleIndex += 1;
+    }
+
+    let cumulativeWords = prevWords;
+    let cumulativeKnown = prevKnown;
+    if (sampleIndex >= 0) {
+      const sample = samples[sampleIndex]!;
+      if (hasKnownWords) {
+        const counts = lookupKnownWordCounts(knownPoints, sample.linesSeen);
+        cumulativeWords = counts.totalWordsSeen;
+        cumulativeKnown = Math.min(counts.knownWordsSeen, counts.totalWordsSeen);
+      } else {
+        cumulativeWords = sample.tokensSeen;
+      }
+    }
+
+    const words = Math.max(0, cumulativeWords - prevWords);
+    const knownWords = Math.min(words, Math.max(0, cumulativeKnown - prevKnown));
+    prevWords = Math.max(prevWords, cumulativeWords);
+    prevKnown = Math.max(prevKnown, cumulativeKnown);
+
+    buckets.push({
+      index,
+      startMs: bucketStart,
+      endMs: bucketEnd,
+      words,
+      knownWords,
+      unknownWords: words - knownWords,
+      lookups: 0,
+      cards: 0,
+    });
+  }
+
+  for (const event of events) {
+    if (event.eventType !== EventType.YOMITAN_LOOKUP && event.eventType !== EventType.CARD_MINED) {
+      continue;
+    }
+    const rawIndex = Math.floor((event.tsMs - startMs) / bucketMs);
+    const bucket = buckets[Math.max(0, Math.min(bucketCount - 1, rawIndex))]!;
+    if (event.eventType === EventType.YOMITAN_LOOKUP) {
+      bucket.lookups += 1;
+    } else {
+      bucket.cards += readCardsMinedDelta(event);
+    }
+  }
+
+  return { bucketMs, startMs, endMs, hasKnownWords, buckets };
+}
diff --git a/stats/src/lib/session-detail.test.tsx b/stats/src/lib/session-detail.test.tsx
deleted file mode 100644
index 4a5c6eef..00000000
--- a/stats/src/lib/session-detail.test.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import assert from 'node:assert/strict';
-import test from 'node:test';
-import {
-  buildKnownWordsRatioChartData,
-  getKnownPctAxisMax,
-} from '../components/sessions/SessionDetail';
-import { buildSessionChartEvents } from './session-events';
-import { EventType } from '../types/stats';
-
-test('buildSessionChartEvents keeps only chart-relevant events and pairs pause ranges', () => {
-  const chartEvents = buildSessionChartEvents([
-    { eventType: EventType.SUBTITLE_LINE, tsMs: 1_000, payload: '{"line":"ignored"}' },
-    { eventType: EventType.PAUSE_START, tsMs: 2_000, payload: null },
-    { eventType: EventType.SEEK_FORWARD, tsMs: 3_000, payload: null },
-    { eventType: EventType.PAUSE_END, tsMs: 4_000, payload: null },
-    { eventType: EventType.CARD_MINED, tsMs: 5_000, payload: '{"cardsMined":1}' },
-    { eventType: EventType.YOMITAN_LOOKUP, tsMs: 6_000, payload: null },
-    { eventType: EventType.SEEK_BACKWARD, tsMs: 7_000, payload: null },
-    { eventType: EventType.LOOKUP, tsMs: 8_000, payload: '{"hit":true}' },
-  ]);
-
-  // Seek events are intentionally dropped from the chart — they were too noisy.
-  assert.deepEqual(
-    chartEvents.markers.filter((marker) => marker.kind !== 'pause' && marker.kind !== 'card'),
-    [],
-  );
-  assert.deepEqual(
-    chartEvents.cardEvents.map((event) => event.tsMs),
-    [5_000],
-  );
-  assert.deepEqual(
-    chartEvents.yomitanLookupEvents.map((event) => event.tsMs),
-    [6_000],
-  );
-  assert.deepEqual(chartEvents.pauseRegions, [{ startMs: 2_000, endMs: 4_000 }]);
-});
-
-test('getKnownPctAxisMax adds headroom above the highest known percentage', () => {
-  assert.equal(getKnownPctAxisMax([22.4, 31.2, 29.8]), 40);
-});
-
-test('getKnownPctAxisMax caps the chart top at 100%', () => {
-  assert.equal(getKnownPctAxisMax([97.1, 98.6]), 100);
-});
-
-test('buildKnownWordsRatioChartData uses filtered known-word timeline totals', () => {
-  const chartData = buildKnownWordsRatioChartData(
-    [
-      { sampleMs: 1_000, linesSeen: 1, tokensSeen: 10 },
-      { sampleMs: 2_000, linesSeen: 2, tokensSeen: 20 },
-    ],
-    new Map([
-      [1, { knownWordsSeen: 2, totalWordsSeen: 3 }],
-      [2, { knownWordsSeen: 3, totalWordsSeen: 4 }],
-    ]),
-  );
-
-  assert.deepEqual(chartData, [
-    { tsMs: 1_000, knownWords: 2, unknownWords: 1, totalWords: 3 },
-    { tsMs: 2_000, knownWords: 3, unknownWords: 1, totalWords: 4 },
-  ]);
-});
diff --git a/stats/src/lib/session-events.test.ts b/stats/src/lib/session-events.test.ts
index a8a3fcbc..87adcefe 100644
--- a/stats/src/lib/session-events.test.ts
+++ b/stats/src/lib/session-events.test.ts
@@ -29,20 +29,13 @@ test('buildSessionChartEvents produces typed hover markers with parsed payload m
     { eventType: EventType.YOMITAN_LOOKUP, tsMs: 7_000, payload: null },
   ]);
 
-  // Seek events are intentionally dropped — too noisy on the session chart.
+  // Pause and seek events are intentionally dropped — too noisy on the session chart.
   assert.deepEqual(
     chartEvents.markers.map((marker) => marker.kind),
-    ['pause', 'card'],
+    ['card'],
   );
 
-  const pauseMarker = chartEvents.markers[0]!;
-  assert.equal(pauseMarker.kind, 'pause');
-  assert.equal(pauseMarker.startMs, 2_000);
-  assert.equal(pauseMarker.endMs, 5_000);
-  assert.equal(pauseMarker.durationMs, 3_000);
-  assert.equal(pauseMarker.anchorTsMs, 3_500);
-
-  const cardMarker = chartEvents.markers[1]!;
+  const cardMarker = chartEvents.markers[0]!;
   assert.equal(cardMarker.kind, 'card');
   assert.deepEqual(cardMarker.noteIds, [11, 22]);
   assert.equal(cardMarker.cardsDelta, 2);
diff --git a/stats/src/lib/session-events.ts b/stats/src/lib/session-events.ts
index 1ef473f9..e8ea9acb 100644
--- a/stats/src/lib/session-events.ts
+++ b/stats/src/lib/session-events.ts
@@ -1,21 +1,10 @@
 import { EventType, type SessionEvent } from '../types/stats';
 
-export const SESSION_CHART_EVENT_TYPES = [
-  EventType.CARD_MINED,
-  EventType.PAUSE_START,
-  EventType.PAUSE_END,
-  EventType.YOMITAN_LOOKUP,
-] as const;
-
-export interface PauseRegion {
-  startMs: number;
-  endMs: number;
-}
+export const SESSION_CHART_EVENT_TYPES = [EventType.CARD_MINED, EventType.YOMITAN_LOOKUP] as const;
 
 export interface SessionChartEvents {
   cardEvents: SessionEvent[];
   yomitanLookupEvents: SessionEvent[];
-  pauseRegions: PauseRegion[];
   markers: SessionChartMarker[];
 }
 
@@ -45,24 +34,15 @@ interface SessionEventNoteRecord {
   fields?: Record<string, SessionEventNoteField> | null;
 }
 
-export type SessionChartMarker =
-  | {
-      key: string;
-      kind: 'pause';
-      anchorTsMs: number;
-      eventTsMs: number;
-      startMs: number;
-      endMs: number;
-      durationMs: number;
-    }
-  | {
-      key: string;
-      kind: 'card';
-      anchorTsMs: number;
-      eventTsMs: number;
-      noteIds: number[];
-      cardsDelta: number;
-    };
+/** Interactive card-mined marker shown on the session event lane. */
+export interface SessionChartMarker {
+  key: string;
+  kind: 'card';
+  anchorTsMs: number;
+  eventTsMs: number;
+  noteIds: number[];
+  cardsDelta: number;
+}
 
 function parsePayload(payload: string | null): Record<string, unknown> | null {
   if (!payload) return null;
@@ -85,6 +65,11 @@ function readNoteIds(value: unknown): number[] {
   );
 }
 
+/** Cards added by one CARD_MINED event; older events without a count mean one card. */
+export function readCardsMinedDelta(event: SessionEvent): number {
+  return readNumberField(parsePayload(event.payload)?.cardsMined) ?? 1;
+}
+
 function stripHtml(value: string): string {
   return value
     .replace(/\[sound:[^\]]+\]/gi, ' ')
@@ -257,11 +242,6 @@ export function togglePinnedSessionMarkerKey(
   return currentPinnedMarkerKey === nextMarkerKey ? null : nextMarkerKey;
 }
 
-export function formatEventSeconds(ms: number | null): string | null {
-  if (ms == null || !Number.isFinite(ms)) return null;
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
 export function projectSessionMarkerLeftPx({
   anchorTsMs,
   tsMin,
@@ -284,71 +264,32 @@ export function projectSessionMarkerLeftPx({
 export function buildSessionChartEvents(events: SessionEvent[]): SessionChartEvents {
   const cardEvents: SessionEvent[] = [];
   const yomitanLookupEvents: SessionEvent[] = [];
-  const pauseRegions: PauseRegion[] = [];
   const markers: SessionChartMarker[] = [];
-  let pendingPauseStartMs: number | null = null;
 
   for (const event of events) {
     switch (event.eventType) {
-      case EventType.CARD_MINED:
+      case EventType.CARD_MINED: {
         cardEvents.push(event);
-        {
-          const payload = parsePayload(event.payload);
-          markers.push({
-            key: `card-${event.tsMs}`,
-            kind: 'card',
-            anchorTsMs: event.tsMs,
-            eventTsMs: event.tsMs,
-            noteIds: readNoteIds(payload?.noteIds),
-            cardsDelta: readNumberField(payload?.cardsMined) ?? 1,
-          });
-        }
+        const payload = parsePayload(event.payload);
+        markers.push({
+          key: `card-${event.tsMs}`,
+          kind: 'card',
+          anchorTsMs: event.tsMs,
+          eventTsMs: event.tsMs,
+          noteIds: readNoteIds(payload?.noteIds),
+          cardsDelta: readCardsMinedDelta(event),
+        });
         break;
+      }
       case EventType.YOMITAN_LOOKUP:
         yomitanLookupEvents.push(event);
         break;
-      case EventType.PAUSE_START:
-        pendingPauseStartMs = event.tsMs;
-        break;
-      case EventType.PAUSE_END:
-        if (pendingPauseStartMs !== null) {
-          pauseRegions.push({ startMs: pendingPauseStartMs, endMs: event.tsMs });
-          markers.push({
-            key: `pause-${pendingPauseStartMs}-${event.tsMs}`,
-            kind: 'pause',
-            anchorTsMs: pendingPauseStartMs + Math.round((event.tsMs - pendingPauseStartMs) / 2),
-            eventTsMs: pendingPauseStartMs,
-            startMs: pendingPauseStartMs,
-            endMs: event.tsMs,
-            durationMs: Math.max(0, event.tsMs - pendingPauseStartMs),
-          });
-          pendingPauseStartMs = null;
-        }
-        break;
       default:
         break;
     }
   }
 
-  if (pendingPauseStartMs !== null) {
-    pauseRegions.push({ startMs: pendingPauseStartMs, endMs: pendingPauseStartMs + 2_000 });
-    markers.push({
-      key: `pause-${pendingPauseStartMs}-${pendingPauseStartMs + 2_000}`,
-      kind: 'pause',
-      anchorTsMs: pendingPauseStartMs + 1_000,
-      eventTsMs: pendingPauseStartMs,
-      startMs: pendingPauseStartMs,
-      endMs: pendingPauseStartMs + 2_000,
-      durationMs: 2_000,
-    });
-  }
-
   markers.sort((left, right) => left.anchorTsMs - right.anchorTsMs);
 
-  return {
-    cardEvents,
-    yomitanLookupEvents,
-    pauseRegions,
-    markers,
-  };
+  return { cardEvents, yomitanLookupEvents, markers };
 }