diff --git a/SortVision/src/algorithms/bubbleSort.ts b/SortVision/src/algorithms/bubbleSort.ts
index abc98f28..80b78cfc 100644
--- a/SortVision/src/algorithms/bubbleSort.ts
+++ b/SortVision/src/algorithms/bubbleSort.ts
@@ -8,9 +8,14 @@ export const bubbleSort: SortingAlgorithm = async (
   setCurrentBar,
   shouldStopRef,
   sortPausedRef,
-  audio
+  audio,
+  delayRef
 ) => {
-  const delayRefs: SortStepDelayRefs = { shouldStopRef, sortPausedRef };
+  const delayRefs: SortStepDelayRefs = {
+    shouldStopRef,
+    sortPausedRef,
+    delayRef,
+  };
   let swaps = 0;
   let comparisons = 0;
   const arr = [...array];
diff --git a/SortVision/src/algorithms/bucketSort.ts b/SortVision/src/algorithms/bucketSort.ts
index 0d685a39..e34b32a4 100644
--- a/SortVision/src/algorithms/bucketSort.ts
+++ b/SortVision/src/algorithms/bucketSort.ts
@@ -46,9 +46,14 @@ export const bucketSort: SortingAlgorithm = async (
   setCurrentBar,
   shouldStopRef,
   sortPausedRef,
-  audio
+  audio,
+  delayRef
 ) => {
-  const delayRefs: SortStepDelayRefs = { shouldStopRef, sortPausedRef };
+  const delayRefs: SortStepDelayRefs = {
+    shouldStopRef,
+    sortPausedRef,
+    delayRef,
+  };
   const metrics: SortStepMetrics = { swaps: 0, comparisons: 0 };
 
   if (array.length === 0) {
diff --git a/SortVision/src/algorithms/heapSort.ts b/SortVision/src/algorithms/heapSort.ts
index 71b6d432..dc644ad2 100644
--- a/SortVision/src/algorithms/heapSort.ts
+++ b/SortVision/src/algorithms/heapSort.ts
@@ -82,9 +82,14 @@ export const heapSort: SortingAlgorithm = async (
   setCurrentBar,
   shouldStopRef,
   sortPausedRef,
-  audio
+  audio,
+  delayRef
 ) => {
-  const delayRefs: SortStepDelayRefs = { shouldStopRef, sortPausedRef };
+  const delayRefs: SortStepDelayRefs = {
+    shouldStopRef,
+    sortPausedRef,
+    delayRef,
+  };
   const metrics: SortStepMetrics = { swaps: 0, comparisons: 0 };
   const arr = [...array];
   const n = arr.length;
diff --git a/SortVision/src/algorithms/insertionSort.ts b/SortVision/src/algorithms/insertionSort.ts
index a560c846..031cf4aa 100644
--- a/SortVision/src/algorithms/insertionSort.ts
+++ b/SortVision/src/algorithms/insertionSort.ts
@@ -8,9 +8,14 @@ export const insertionSort: SortingAlgorithm = async (
   setCurrentBar,
   shouldStopRef,
   sortPausedRef,
-  audio
+  audio,
+  delayRef
 ) => {
-  const delayRefs: SortStepDelayRefs = { shouldStopRef, sortPausedRef };
+  const delayRefs: SortStepDelayRefs = {
+    shouldStopRef,
+    sortPausedRef,
+    delayRef,
+  };
   let swaps = 0;
   let comparisons = 0;
   const arr = [...array];
diff --git a/SortVision/src/algorithms/mergeSort.ts b/SortVision/src/algorithms/mergeSort.ts
index efa9bce8..ad9fc842 100644
--- a/SortVision/src/algorithms/mergeSort.ts
+++ b/SortVision/src/algorithms/mergeSort.ts
@@ -141,9 +141,14 @@ export const mergeSort: SortingAlgorithm = async (
   setCurrentBar,
   shouldStopRef,
   sortPausedRef,
-  audio
+  audio,
+  delayRef
 ) => {
-  const delayRefs: SortStepDelayRefs = { shouldStopRef, sortPausedRef };
+  const delayRefs: SortStepDelayRefs = {
+    shouldStopRef,
+    sortPausedRef,
+    delayRef,
+  };
   const metrics: SortStepMetrics = { swaps: 0, comparisons: 0 };
   const arr = [...array];
 
diff --git a/SortVision/src/algorithms/quickSort.ts b/SortVision/src/algorithms/quickSort.ts
index dd25c266..53eafd80 100644
--- a/SortVision/src/algorithms/quickSort.ts
+++ b/SortVision/src/algorithms/quickSort.ts
@@ -114,9 +114,14 @@ export const quickSort: SortingAlgorithm = async (
   setCurrentBar,
   shouldStopRef,
   sortPausedRef,
-  audio
+  audio,
+  delayRef
 ) => {
-  const delayRefs: SortStepDelayRefs = { shouldStopRef, sortPausedRef };
+  const delayRefs: SortStepDelayRefs = {
+    shouldStopRef,
+    sortPausedRef,
+    delayRef,
+  };
   const metrics: SortStepMetrics = { swaps: 0, comparisons: 0 };
   const arr = [...array];
 
diff --git a/SortVision/src/algorithms/radixSort.ts b/SortVision/src/algorithms/radixSort.ts
index 6f496d95..e4077aeb 100644
--- a/SortVision/src/algorithms/radixSort.ts
+++ b/SortVision/src/algorithms/radixSort.ts
@@ -71,9 +71,14 @@ export const radixSort: SortingAlgorithm = async (
   setCurrentBar,
   shouldStopRef,
   sortPausedRef,
-  audio
+  audio,
+  delayRef
 ) => {
-  const delayRefs: SortStepDelayRefs = { shouldStopRef, sortPausedRef };
+  const delayRefs: SortStepDelayRefs = {
+    shouldStopRef,
+    sortPausedRef,
+    delayRef,
+  };
   const metrics: SortStepMetrics = { swaps: 0, comparisons: 0 };
 
   if (array.length === 0) {
diff --git a/SortVision/src/algorithms/selectionSort.ts b/SortVision/src/algorithms/selectionSort.ts
index 15bf4a2d..05d7bf5e 100644
--- a/SortVision/src/algorithms/selectionSort.ts
+++ b/SortVision/src/algorithms/selectionSort.ts
@@ -8,9 +8,14 @@ export const selectionSort: SortingAlgorithm = async (
   setCurrentBar,
   shouldStopRef,
   sortPausedRef,
-  audio
+  audio,
+  delayRef
 ) => {
-  const delayRefs: SortStepDelayRefs = { shouldStopRef, sortPausedRef };
+  const delayRefs: SortStepDelayRefs = {
+    shouldStopRef,
+    sortPausedRef,
+    delayRef,
+  };
   let swaps = 0;
   let comparisons = 0;
   const arr = [...array];
diff --git a/SortVision/src/algorithms/sleep.test.ts b/SortVision/src/algorithms/sleep.test.ts
new file mode 100644
index 00000000..4072cfd2
--- /dev/null
+++ b/SortVision/src/algorithms/sleep.test.ts
@@ -0,0 +1,27 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { delayStep } from '@/algorithms/sleep';
+import type { SortStepDelayRefs } from '@/algorithms/types';
+
+const createDelayRefs = (delay: number): SortStepDelayRefs => ({
+  shouldStopRef: { current: false },
+  sortPausedRef: { current: false },
+  delayRef: { current: delay },
+});
+
+describe('delayStep', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('uses updated delayRef values while waiting', async () => {
+    vi.useFakeTimers();
+    const refs = createDelayRefs(1000);
+    const wait = delayStep(1000, refs);
+
+    await vi.advanceTimersByTimeAsync(40);
+    refs.delayRef!.current = 10;
+    await vi.advanceTimersByTimeAsync(32);
+
+    await expect(wait).resolves.toBeUndefined();
+  });
+});
diff --git a/SortVision/src/algorithms/sleep.ts b/SortVision/src/algorithms/sleep.ts
index 292d23e3..5b32e349 100644
--- a/SortVision/src/algorithms/sleep.ts
+++ b/SortVision/src/algorithms/sleep.ts
@@ -7,7 +7,7 @@ const POLL_MS = 32;
  * Honors {@link SortStepDelayRefs.shouldStopRef} (abort) and {@link SortStepDelayRefs.sortPausedRef} (pause).
  */
 export function delayStep(ms: number, refs: SortStepDelayRefs): Promise<void> {
-  const deadline = performance.now() + ms;
+  const start = performance.now();
   return new Promise(resolve => {
     const step = () => {
       if (refs.shouldStopRef.current) {
@@ -19,11 +19,13 @@ export function delayStep(ms: number, refs: SortStepDelayRefs): Promise<void> {
         return;
       }
       const now = performance.now();
-      if (now >= deadline) {
+      const currentDelay = refs.delayRef?.current ?? ms;
+      const elapsed = now - start;
+      if (elapsed >= currentDelay) {
         resolve();
         return;
       }
-      setTimeout(step, Math.min(POLL_MS, deadline - now));
+      setTimeout(step, Math.min(POLL_MS, currentDelay - elapsed));
     };
     step();
   });
diff --git a/SortVision/src/algorithms/types.ts b/SortVision/src/algorithms/types.ts
index 6d701057..14cf674c 100644
--- a/SortVision/src/algorithms/types.ts
+++ b/SortVision/src/algorithms/types.ts
@@ -34,10 +34,12 @@ export type ShouldStopRef = MutableRefObject<boolean>;
 
 /** When true, {@link delayStep} blocks until cleared (pause without aborting). */
 export type SortPausedRef = MutableRefObject<boolean>;
+export type SortDelayRef = MutableRefObject<number>;
 
 export type SortStepDelayRefs = {
   shouldStopRef: ShouldStopRef;
   sortPausedRef: SortPausedRef;
+  delayRef?: SortDelayRef;
 };
 
 /**
@@ -50,5 +52,6 @@ export type SortingAlgorithm = (
   setCurrentBar: Dispatch<SetStateAction<CurrentBarState>>,
   shouldStopRef: ShouldStopRef,
   sortPausedRef: SortPausedRef,
-  audio: SortingAlgorithmAudio
+  audio: SortingAlgorithmAudio,
+  delayRef?: SortDelayRef
 ) => Promise<SortStepMetrics>;
diff --git a/SortVision/src/components/panels/ConfigPanel/ConfigPanel.tsx b/SortVision/src/components/panels/ConfigPanel/ConfigPanel.tsx
index 60a1cde1..850a2b57 100644
--- a/SortVision/src/components/panels/ConfigPanel/ConfigPanel.tsx
+++ b/SortVision/src/components/panels/ConfigPanel/ConfigPanel.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ArrayVisualization } from '../../sortingVisualizer/components/ArrayVisualization';
+import StepExplanationPanel from '../../sortingVisualizer/components/StepExplanationPanel';
 import {
   AlgorithmSelector,
   ComplexityInfo,
@@ -73,16 +74,27 @@ const ConfigPanel = ({
 
       {/* Add the array visualization */}
       {array && (
-        <ArrayVisualization
-          algorithm={algorithm}
-          array={array}
-          currentBar={currentBar}
-          isSorting={isSorting}
-          isPaused={isPaused}
-          currentTestingAlgo={currentTestingAlgo}
-          isStopped={isStopped}
-          height="h-100"
-        />
+        <div className="grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_18rem] gap-4 items-stretch">
+          <ArrayVisualization
+            algorithm={algorithm}
+            array={array}
+            currentBar={currentBar}
+            isSorting={isSorting}
+            isPaused={isPaused}
+            currentTestingAlgo={currentTestingAlgo}
+            isStopped={isStopped}
+            height="h-100"
+          />
+          <StepExplanationPanel
+            algorithm={algorithm}
+            array={array}
+            currentBar={currentBar}
+            isSorting={isSorting}
+            isPaused={isPaused}
+            currentTestingAlgo={currentTestingAlgo}
+            isStopped={isStopped}
+          />
+        </div>
       )}
     </div>
   );
diff --git a/SortVision/src/components/panels/config/SpeedControl.tsx b/SortVision/src/components/panels/config/SpeedControl.tsx
index f4601d76..5c4840b6 100644
--- a/SortVision/src/components/panels/config/SpeedControl.tsx
+++ b/SortVision/src/components/panels/config/SpeedControl.tsx
@@ -10,12 +10,7 @@ import {
   normalizedSpeedRatio,
 } from './visualizerControlConstants';
 
-const SpeedControl = ({
-  speed,
-  setSpeed,
-  isSorting,
-  audio,
-}: SpeedControlProps) => {
+const SpeedControl = ({ speed, setSpeed, audio }: SpeedControlProps) => {
   const { t } = useLanguage();
 
   return (
@@ -102,7 +97,6 @@ const SpeedControl = ({
               max={SPEED_MS_MAX}
               step={SPEED_MS_SLIDER_STEP}
               onValueChange={value => setSpeed(value[0]!)}
-              disabled={isSorting}
               className="relative z-10"
               name="animation speed"
               aria-label="Animation Speed Slider"
@@ -154,13 +148,13 @@ const SpeedControl = ({
             <button
               type="button"
               onClick={() => {
-                if (!isSorting && speed < SPEED_MS_MAX) {
+                if (speed < SPEED_MS_MAX) {
                   const newSpeed = Math.min(SPEED_MS_MAX, speed * 2);
                   setSpeed(newSpeed);
                   audio.playAccessSound();
                 }
               }}
-              disabled={isSorting || speed >= SPEED_MS_MAX}
+              disabled={speed >= SPEED_MS_MAX}
               className="group/btn relative size-8 rounded-md bg-slate-800 border border-slate-700 hover:bg-slate-700 transition-all duration-300 overflow-hidden"
               aria-label="Double animation delay"
             >
@@ -173,13 +167,13 @@ const SpeedControl = ({
             <button
               type="button"
               onClick={() => {
-                if (!isSorting && speed > SPEED_MS_MIN) {
+                if (speed > SPEED_MS_MIN) {
                   const newSpeed = Math.max(SPEED_MS_MIN, speed / 2);
                   setSpeed(newSpeed);
                   audio.playAccessSound();
                 }
               }}
-              disabled={isSorting || speed <= SPEED_MS_MIN}
+              disabled={speed <= SPEED_MS_MIN}
               className="group/btn relative size-8 rounded-md bg-slate-800 border border-slate-700 hover:bg-slate-700 transition-all duration-300 overflow-hidden"
               aria-label="Halve animation delay"
             >
diff --git a/SortVision/src/components/sortingVisualizer/SortingControls.tsx b/SortVision/src/components/sortingVisualizer/SortingControls.tsx
index 634decfc..1f4694aa 100644
--- a/SortVision/src/components/sortingVisualizer/SortingControls.tsx
+++ b/SortVision/src/components/sortingVisualizer/SortingControls.tsx
@@ -28,6 +28,7 @@ const runAlgorithm = async ({
   inputArray,
   setArray,
   speed,
+  speedRef,
   setCurrentBar,
   shouldStopRef,
   sortPausedRef,
@@ -37,6 +38,7 @@ const runAlgorithm = async ({
   inputArray: number[];
   setArray: Dispatch<SetStateAction<number[]>>;
   speed: number;
+  speedRef: MutableRefObject<number>;
   setCurrentBar: Dispatch<SetStateAction<CurrentBarState>>;
   shouldStopRef: MutableRefObject<boolean>;
   sortPausedRef: MutableRefObject<boolean>;
@@ -54,7 +56,8 @@ const runAlgorithm = async ({
     setCurrentBar,
     shouldStopRef,
     sortPausedRef,
-    audio
+    audio,
+    speedRef
   );
 };
 
@@ -89,6 +92,7 @@ const useSortingControls = () => {
     array: number[],
     setArray: Dispatch<SetStateAction<number[]>>,
     speed: number,
+    speedRef: MutableRefObject<number>,
     setCurrentBar: Dispatch<SetStateAction<CurrentBarState>>,
     shouldStopRef: MutableRefObject<boolean>,
     sortPausedRef: MutableRefObject<boolean>,
@@ -130,6 +134,7 @@ const useSortingControls = () => {
           inputArray: array,
           setArray,
           speed,
+          speedRef,
           setCurrentBar,
           shouldStopRef,
           sortPausedRef,
@@ -170,6 +175,7 @@ const useSortingControls = () => {
     array: number[],
     setArray: Dispatch<SetStateAction<number[]>>,
     speed: number,
+    speedRef: MutableRefObject<number>,
     setCurrentBar: Dispatch<SetStateAction<CurrentBarState>>,
     shouldStopRef: MutableRefObject<boolean>,
     userCancelRequestedRef: MutableRefObject<boolean>,
@@ -209,6 +215,7 @@ const useSortingControls = () => {
           inputArray: [...originalArray],
           setArray,
           speed,
+          speedRef,
           setCurrentBar,
           shouldStopRef,
           sortPausedRef,
diff --git a/SortVision/src/components/sortingVisualizer/components/StepExplanationPanel.tsx b/SortVision/src/components/sortingVisualizer/components/StepExplanationPanel.tsx
new file mode 100644
index 00000000..803c94c7
--- /dev/null
+++ b/SortVision/src/components/sortingVisualizer/components/StepExplanationPanel.tsx
@@ -0,0 +1,178 @@
+import {
+  Activity,
+  BookOpen,
+  CheckCircle2,
+  HelpCircle,
+  ListChecks,
+  Pause,
+  Square,
+} from 'lucide-react';
+import { getStepExplanation } from '../stepExplanation';
+import type { StepExplanationInput } from '../stepExplanation';
+
+function statusColor(status: ReturnType<typeof getStepExplanation>['status']) {
+  if (status === 'running') return 'text-emerald-300 bg-emerald-500/10';
+  if (status === 'paused') return 'text-amber-300 bg-amber-500/10';
+  if (status === 'stopped') return 'text-red-300 bg-red-500/10';
+  return 'text-slate-300 bg-slate-700/40';
+}
+
+function StatusIcon({
+  status,
+}: {
+  status: ReturnType<typeof getStepExplanation>['status'];
+}) {
+  if (status === 'paused') return <Pause className="size-3.5" />;
+  if (status === 'stopped') return <Square className="size-3.5" />;
+  return <Activity className="size-3.5" />;
+}
+
+export default function StepExplanationPanel(props: StepExplanationInput) {
+  const explanation = getStepExplanation(props);
+
+  return (
+    <>
+      <section className="relative group h-full">
+        <div className="absolute -inset-2 bg-gradient-to-r from-cyan-500/15 via-emerald-500/15 to-blue-500/15 rounded-xl blur-md opacity-70 group-hover:opacity-100 transition-opacity duration-500"></div>
+
+        <div className="relative h-full bg-slate-900 p-4 rounded border border-slate-800 transition-all duration-500 hover:border-slate-700 overflow-hidden">
+          <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#2dd4bf_1px,transparent_1px)] [background-size:10px_10px]"></div>
+          <div className="relative z-10 space-y-4">
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex items-center gap-2 min-w-0">
+                <BookOpen className="size-4 text-cyan-300 shrink-0" />
+                <div className="min-w-0">
+                  <h3 className="font-mono text-sm text-cyan-200 truncate">
+                    Learning Mode
+                  </h3>
+                  <p className="text-[11px] text-slate-500 font-mono truncate">
+                    {explanation.algorithmLabel}
+                  </p>
+                </div>
+              </div>
+              <span
+                className={`inline-flex items-center gap-1 rounded px-2 py-1 text-[10px] font-mono ${statusColor(explanation.status)}`}
+              >
+                <StatusIcon status={explanation.status} />
+                {explanation.status}
+              </span>
+            </div>
+
+            <div className="space-y-2">
+              <p className="text-sm font-semibold text-slate-100">
+                {explanation.title}
+              </p>
+              <p className="text-xs leading-5 text-slate-300">
+                {explanation.detail}
+              </p>
+              <p className="text-xs leading-5 text-slate-400">
+                {explanation.beginnerSummary}
+              </p>
+            </div>
+
+            {explanation.values.length > 0 && (
+              <div className="space-y-2">
+                <p className="text-[11px] uppercase tracking-wide text-slate-500 font-mono">
+                  Live values
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {explanation.values.map(value => (
+                    <span
+                      key={value}
+                      className="rounded border border-slate-700 bg-slate-950/80 px-2 py-1 text-[11px] text-emerald-300 font-mono"
+                    >
+                      {value}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="rounded border border-slate-800 bg-slate-950/50 p-3">
+              <div className="mb-2 flex items-center gap-2 text-[11px] uppercase tracking-wide text-slate-500 font-mono">
+                <Activity className="size-3.5 text-emerald-300" />
+                Current step
+              </div>
+              <p className="text-xs leading-5 text-slate-300">
+                {explanation.currentFocus}
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="relative group xl:col-span-2">
+        <div className="absolute -inset-2 bg-gradient-to-r from-cyan-500/10 via-emerald-500/10 to-blue-500/10 rounded-xl blur-md opacity-70 group-hover:opacity-100 transition-opacity duration-500"></div>
+        <div className="relative bg-slate-900 p-4 rounded border border-slate-800 transition-all duration-500 hover:border-slate-700 overflow-hidden">
+          <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#2dd4bf_1px,transparent_1px)] [background-size:10px_10px]"></div>
+          <div className="relative z-10 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-[1.1fr_1.2fr_1.1fr_1.2fr_1fr]">
+            <section className="space-y-2">
+              <div className="flex items-center gap-2 text-[11px] uppercase tracking-wide text-slate-500 font-mono">
+                <HelpCircle className="size-3.5 text-cyan-300" />
+                Decision rule
+              </div>
+              <p className="text-xs leading-5 text-slate-300">
+                {explanation.decisionRule}
+              </p>
+            </section>
+
+            <section className="space-y-2">
+              <p className="text-[11px] uppercase tracking-wide text-slate-500 font-mono">
+                How to read highlights
+              </p>
+              <ul className="space-y-1.5">
+                {explanation.highlightLegend.map(item => (
+                  <li
+                    key={item}
+                    className="flex gap-2 text-xs leading-5 text-slate-400"
+                  >
+                    <CheckCircle2 className="mt-0.5 size-3.5 shrink-0 text-emerald-300" />
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+
+            <section className="space-y-2">
+              <p className="text-[11px] uppercase tracking-wide text-slate-500 font-mono">
+                Why this works
+              </p>
+              <p className="text-xs leading-5 text-slate-400">
+                {explanation.reason}
+              </p>
+            </section>
+
+            <section className="space-y-2">
+              <div className="flex items-center gap-2 text-[11px] uppercase tracking-wide text-slate-500 font-mono">
+                <ListChecks className="size-3.5 text-cyan-300" />
+                Mini walkthrough
+              </div>
+              <ol className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 xl:grid-cols-1">
+                {explanation.walkthrough.map((item, index) => (
+                  <li
+                    key={item}
+                    className="grid grid-cols-[1.25rem_minmax(0,1fr)] gap-2 text-xs leading-5 text-slate-400"
+                  >
+                    <span className="font-mono text-emerald-300">
+                      {index + 1}.
+                    </span>
+                    <span>{item}</span>
+                  </li>
+                ))}
+              </ol>
+            </section>
+
+            <section className="space-y-2 md:col-span-2 xl:col-span-1">
+              <p className="text-[11px] uppercase tracking-wide text-cyan-300 font-mono">
+                Next
+              </p>
+              <p className="text-xs leading-5 text-slate-300">
+                {explanation.nextStep}
+              </p>
+            </section>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
diff --git a/SortVision/src/components/sortingVisualizer/hooks/useSortingController.ts b/SortVision/src/components/sortingVisualizer/hooks/useSortingController.ts
index 030d6bd3..09aeb873 100644
--- a/SortVision/src/components/sortingVisualizer/hooks/useSortingController.ts
+++ b/SortVision/src/components/sortingVisualizer/hooks/useSortingController.ts
@@ -43,6 +43,7 @@ export const useSortingVisualizerController = (initialAlgorithm: string) => {
   const sortUserCancelRequestedRef = useRef(false);
   /** Bumped on reset / array-size changes so stale async sort completions cannot apply stale metrics. */
   const sortVisualizerSessionRef = useRef(0);
+  const speedRef = useRef(state.speed);
   const performanceMetrics = usePerformanceMetrics();
   const { playAccessSound } = useVisualizerAudioEffects(audio);
 
@@ -61,6 +62,7 @@ export const useSortingVisualizerController = (initialAlgorithm: string) => {
       algorithm: state.algorithm,
       array: state.array,
       speed: state.speed,
+      speedRef,
       shouldStopRef,
       sortPausedRef,
       sortUserCancelRequestedRef,
@@ -118,6 +120,10 @@ export const useSortingVisualizerController = (initialAlgorithm: string) => {
     [performanceMetrics, state.algorithm]
   );
 
+  useEffect(() => {
+    speedRef.current = state.speed;
+  }, [state.speed]);
+
   // Sync generateNewArray ref on arraySize change
   useEffect(() => {
     sortVisualizerSessionRef.current += 1;
diff --git a/SortVision/src/components/sortingVisualizer/hooks/useSortingRunner.ts b/SortVision/src/components/sortingVisualizer/hooks/useSortingRunner.ts
index 5ea1f486..fad39c8c 100644
--- a/SortVision/src/components/sortingVisualizer/hooks/useSortingRunner.ts
+++ b/SortVision/src/components/sortingVisualizer/hooks/useSortingRunner.ts
@@ -14,6 +14,7 @@ type Params = {
     algorithm: SortingAlgorithmId;
     array: number[];
     speed: number;
+    speedRef: MutableRefObject<number>;
     shouldStopRef: MutableRefObject<boolean>;
     sortPausedRef: MutableRefObject<boolean>;
     sortUserCancelRequestedRef: MutableRefObject<boolean>;
@@ -57,6 +58,7 @@ export function useSortingRunner({ runtime, uiState, metricsState }: Params) {
       runtime.array,
       uiState.setArray,
       runtime.speed,
+      runtime.speedRef,
       uiState.setCurrentBar,
       runtime.shouldStopRef,
       runtime.sortPausedRef,
@@ -75,6 +77,7 @@ export function useSortingRunner({ runtime, uiState, metricsState }: Params) {
     runtime.shouldStopRef,
     runtime.sortPausedRef,
     runtime.sortVisualizerSessionRef,
+    runtime.speedRef,
     runtime.speed,
     sortingControls,
     uiState.setArray,
@@ -89,6 +92,7 @@ export function useSortingRunner({ runtime, uiState, metricsState }: Params) {
       runtime.array,
       uiState.setArray,
       runtime.speed,
+      runtime.speedRef,
       uiState.setCurrentBar,
       runtime.shouldStopRef,
       runtime.sortUserCancelRequestedRef,
@@ -112,6 +116,7 @@ export function useSortingRunner({ runtime, uiState, metricsState }: Params) {
     runtime.sortPausedRef,
     runtime.sortUserCancelRequestedRef,
     runtime.sortVisualizerSessionRef,
+    runtime.speedRef,
     runtime.speed,
     sortingControls,
     uiState.setArray,
diff --git a/SortVision/src/components/sortingVisualizer/stepExplanation.test.ts b/SortVision/src/components/sortingVisualizer/stepExplanation.test.ts
new file mode 100644
index 00000000..46d4c102
--- /dev/null
+++ b/SortVision/src/components/sortingVisualizer/stepExplanation.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+import { getStepExplanation } from './stepExplanation';
+
+describe('getStepExplanation', () => {
+  it('explains highlighted comparisons with live values', () => {
+    const explanation = getStepExplanation({
+      algorithm: 'bubble',
+      array: [8, 3, 5],
+      currentBar: { compare: 0, swap: 1 },
+      isSorting: true,
+      isStopped: false,
+    });
+
+    expect(explanation.status).toBe('running');
+    expect(explanation.title).toBe('Comparing highlighted values');
+    expect(explanation.detail).toContain('index 0 = 8');
+    expect(explanation.detail).toContain('index 1 = 3');
+    expect(explanation.currentFocus).toContain('neighboring values');
+    expect(explanation.currentFocus).toContain('8 is greater than 3');
+    expect(explanation.decisionRule).toContain('left value is larger');
+    expect(explanation.walkthrough).toHaveLength(4);
+  });
+
+  it('uses the benchmark algorithm when test-all mode is active', () => {
+    const explanation = getStepExplanation({
+      algorithm: 'bubble',
+      currentTestingAlgo: 'quick',
+      array: [2, 1],
+      currentBar: { compare: 1, swap: null },
+      isSorting: true,
+      isStopped: false,
+    });
+
+    expect(explanation.algorithmLabel).toBe('Quick Sort');
+    expect(explanation.reason).toContain('pivot');
+    expect(explanation.currentFocus).toContain('pivot');
+  });
+});
diff --git a/SortVision/src/components/sortingVisualizer/stepExplanation.ts b/SortVision/src/components/sortingVisualizer/stepExplanation.ts
new file mode 100644
index 00000000..e405e759
--- /dev/null
+++ b/SortVision/src/components/sortingVisualizer/stepExplanation.ts
@@ -0,0 +1,430 @@
+import type { SortingAlgorithmId } from './algorithmRegistry';
+import type { VisualizerBarHighlight } from './visualizerBarState';
+
+export type StepExplanationInput = {
+  algorithm: SortingAlgorithmId;
+  array: number[];
+  currentBar: VisualizerBarHighlight;
+  isSorting: boolean;
+  isPaused?: boolean;
+  isStopped: boolean;
+  currentTestingAlgo?: SortingAlgorithmId | null;
+};
+
+export type StepExplanation = {
+  algorithmLabel: string;
+  status: 'idle' | 'running' | 'paused' | 'stopped';
+  title: string;
+  detail: string;
+  beginnerSummary: string;
+  currentFocus: string;
+  decisionRule: string;
+  nextStep: string;
+  reason: string;
+  highlightLegend: string[];
+  walkthrough: string[];
+  values: string[];
+};
+
+type AlgorithmGuide = {
+  label: string;
+  beginnerSummary: string;
+  reason: string;
+  decisionRule: string;
+  highlightLegend: string[];
+  walkthrough: string[];
+};
+
+const ALGORITHM_GUIDES: Record<SortingAlgorithmId, AlgorithmGuide> = {
+  bubble: {
+    label: 'Bubble Sort',
+    beginnerSummary:
+      'Bubble Sort is like repeatedly walking along a row of cards and fixing only the two neighboring cards you are looking at.',
+    reason:
+      'After each full pass, one of the largest unsorted values has drifted to the right side, so the sorted suffix grows from right to left.',
+    decisionRule:
+      'Compare the left neighbor with the right neighbor. If the left value is larger, swap them; otherwise keep them in place.',
+    highlightLegend: [
+      'Compare marker: the left item in the neighboring pair.',
+      'Swap marker: the right item in the neighboring pair.',
+      'A swap means the larger item moves one step to the right.',
+    ],
+    walkthrough: [
+      'Start at the beginning of the array.',
+      'Compare two neighboring values.',
+      'Swap them only when the left value is bigger.',
+      'Keep moving right until the largest unsorted value reaches its final area.',
+    ],
+  },
+  insertion: {
+    label: 'Insertion Sort',
+    beginnerSummary:
+      'Insertion Sort builds a sorted left side, then inserts the next value into the correct position inside that sorted side.',
+    reason:
+      'The left side stays sorted because larger values are shifted right until there is space for the current value.',
+    decisionRule:
+      'If the value on the left is larger than the value being inserted, shift the larger value one position right.',
+    highlightLegend: [
+      'Compare marker: a value already in the sorted left section.',
+      'Swap marker: the position being opened for the value being inserted.',
+      'Repeated shifts make room for the current value.',
+    ],
+    walkthrough: [
+      'Treat the first item as already sorted.',
+      'Pick the next item as the value to insert.',
+      'Move left through the sorted section while values are too large.',
+      'Place the picked value in the gap that remains.',
+    ],
+  },
+  selection: {
+    label: 'Selection Sort',
+    beginnerSummary:
+      'Selection Sort chooses the smallest remaining value and places it at the front of the unsorted section.',
+    reason:
+      'Each pass permanently fixes one position, so the sorted prefix grows from left to right.',
+    decisionRule:
+      'Keep a current smallest candidate. If the scanned value is smaller, it becomes the new smallest candidate.',
+    highlightLegend: [
+      'Compare marker: the current smallest candidate found in this pass.',
+      'Swap marker: the next unsorted value being scanned.',
+      'At the end of the scan, the smallest candidate moves into the next sorted position.',
+    ],
+    walkthrough: [
+      'Choose the first unsorted position.',
+      'Scan the rest of the array for a smaller value.',
+      'Remember the index of the smallest value found.',
+      'Swap that smallest value into the first unsorted position.',
+    ],
+  },
+  quick: {
+    label: 'Quick Sort',
+    beginnerSummary:
+      'Quick Sort chooses a pivot value, then rearranges the current section so smaller values go left and larger values stay right.',
+    reason:
+      'Once the pivot is placed between the smaller and larger groups, the same idea can sort each side independently.',
+    decisionRule:
+      'Compare each scanned value with the pivot. Values smaller than the pivot are moved into the left partition.',
+    highlightLegend: [
+      'Compare marker alone: the pivot value selected for the current partition.',
+      'Compare marker with swap marker: a scanned value is being checked against the pivot.',
+      'The pivot becomes a boundary between smaller and larger values.',
+    ],
+    walkthrough: [
+      'Pick a pivot, here shown as the highlighted pivot bar.',
+      'Scan the current section from left to right.',
+      'Move values smaller than the pivot into the left partition.',
+      'Put the pivot between the smaller and larger partitions, then repeat on both sides.',
+    ],
+  },
+  merge: {
+    label: 'Merge Sort',
+    beginnerSummary:
+      'Merge Sort splits the array into small sorted pieces, then merges two sorted pieces by choosing the smaller front value.',
+    reason:
+      'Two already-sorted groups can be merged efficiently because only their front values need to be compared.',
+    decisionRule:
+      'Compare the front value of the left group with the front value of the right group. Copy the smaller one next.',
+    highlightLegend: [
+      'Compare marker: the current front value from the left sorted group.',
+      'Swap marker: the current front value from the right sorted group.',
+      'The smaller highlighted value is copied into the merged output.',
+    ],
+    walkthrough: [
+      'Split the array until each tiny piece is already sorted.',
+      'Take two neighboring sorted pieces.',
+      'Compare the first unused value from each piece.',
+      'Copy the smaller value into the next output position and continue.',
+    ],
+  },
+  radix: {
+    label: 'Radix Sort',
+    beginnerSummary:
+      'Radix Sort does not compare two values directly. It groups numbers by one digit at a time, from ones place to tens place and beyond.',
+    reason:
+      'Stable digit passes preserve earlier digit ordering while adding more significant digit ordering.',
+    decisionRule:
+      'Read the active digit of the highlighted value and place the value into the matching digit bucket.',
+    highlightLegend: [
+      'Compare marker: the value whose current digit is being read.',
+      'The buckets are rebuilt for each digit position.',
+      'The array is written back after each digit pass.',
+    ],
+    walkthrough: [
+      'Look at one digit position, starting with the ones digit.',
+      'Count or group values by that digit.',
+      'Write values back in digit order.',
+      'Move to the next digit position and repeat until all digits are handled.',
+    ],
+  },
+  heap: {
+    label: 'Heap Sort',
+    beginnerSummary:
+      'Heap Sort first shapes the array like a max heap, where every parent should be at least as large as its children.',
+    reason:
+      'The largest value is kept at the heap root, so it can be moved to the sorted end of the array one value at a time.',
+    decisionRule:
+      'Compare a parent or largest candidate with a child. If the child is larger, the child becomes the new largest candidate.',
+    highlightLegend: [
+      'Compare marker: the current largest candidate in the heap.',
+      'Swap marker: the child being checked against that candidate.',
+      'If a child is larger, the heap is repaired by swapping downward.',
+    ],
+    walkthrough: [
+      'Build a max heap from the array.',
+      'Move the largest value at the root to the end.',
+      'Shrink the heap so the sorted end is not touched again.',
+      'Repair the heap and repeat.',
+    ],
+  },
+  bucket: {
+    label: 'Bucket Sort',
+    beginnerSummary:
+      'Bucket Sort separates values into value-range buckets, sorts each bucket, then writes all buckets back in order.',
+    reason:
+      'If values are spread fairly evenly, each bucket is small, so sorting inside buckets is cheaper than sorting everything at once.',
+    decisionRule:
+      'Use the highlighted value range to choose a bucket, then later write sorted bucket values back into the array.',
+    highlightLegend: [
+      'Compare marker: a value being assigned to a bucket.',
+      'Swap marker: a sorted bucket value being written back to the array.',
+      'Buckets are concatenated from low range to high range.',
+    ],
+    walkthrough: [
+      'Find the minimum and maximum values to define bucket ranges.',
+      'Place each value into the bucket for its range.',
+      'Sort values inside each bucket.',
+      'Write buckets back from smallest range to largest range.',
+    ],
+  },
+};
+
+function formatValue(index: number, array: number[]): string {
+  const value = array[index];
+  return value === undefined ? `index ${index}` : `index ${index} = ${value}`;
+}
+
+function compareValues(leftIndex: number, rightIndex: number, array: number[]) {
+  const left = array[leftIndex];
+  const right = array[rightIndex];
+
+  if (left === undefined || right === undefined) {
+    return 'One of these positions is outside the visible array, so the panel can only explain the index being highlighted.';
+  }
+  if (left > right) {
+    return `${left} is greater than ${right}.`;
+  }
+  if (left < right) {
+    return `${left} is less than ${right}.`;
+  }
+  return `${left} is equal to ${right}.`;
+}
+
+function getStatus({
+  isSorting,
+  isPaused,
+  isStopped,
+}: StepExplanationInput): StepExplanation['status'] {
+  if (isPaused) return 'paused';
+  if (isStopped) return 'stopped';
+  if (isSorting) return 'running';
+  return 'idle';
+}
+
+function getPairFocus(
+  algorithm: SortingAlgorithmId,
+  compare: number,
+  swap: number,
+  array: number[]
+): string {
+  const relation = compareValues(compare, swap, array);
+  const left = formatValue(compare, array);
+  const right = formatValue(swap, array);
+
+  switch (algorithm) {
+    case 'bubble':
+      return `The algorithm is checking neighboring values: ${left} and ${right}. ${relation} Bubble Sort swaps only when the left value is larger.`;
+    case 'insertion':
+      return `The algorithm is shifting through the sorted left section. It is checking whether ${left} should move right to make room at ${right}. ${relation}`;
+    case 'selection':
+      return `The algorithm is comparing the current smallest candidate, ${left}, with the scanned value, ${right}. ${relation} If the scanned value is smaller, it becomes the new candidate.`;
+    case 'quick':
+      return `The algorithm is comparing ${left} with the pivot ${right}. ${relation} Values smaller than the pivot are moved into the left partition.`;
+    case 'merge':
+      return `The algorithm is merging two sorted groups. It compares the left-front value ${left} with the right-front value ${right}. ${relation} The smaller front value is copied next.`;
+    case 'heap':
+      return `The algorithm is repairing the heap. It compares largest candidate ${left} with child ${right}. ${relation} The larger value should move closer to the root.`;
+    case 'bucket':
+      return `Bucket Sort is comparing ${left} and ${right}, but most bucket work is about grouping by ranges rather than pairwise comparison. ${relation}`;
+    case 'radix':
+      return `Radix Sort is reading digit information. These highlighted positions are ${left} and ${right}; digit grouping, not direct comparison, decides placement.`;
+  }
+}
+
+function getSingleFocus(
+  algorithm: SortingAlgorithmId,
+  compare: number | null,
+  swap: number | null,
+  array: number[]
+): string {
+  if (compare !== null) {
+    const value = formatValue(compare, array);
+
+    switch (algorithm) {
+      case 'quick':
+        return `The highlighted value ${value} is acting as the pivot for this partition. Other values in this section will be compared against it.`;
+      case 'radix': {
+        const raw = array[compare];
+        const digitHint =
+          raw === undefined
+            ? ''
+            : ` Its ones digit is ${Math.abs(raw) % 10}; later passes look at tens, hundreds, and so on.`;
+        return `The highlighted value ${value} is being read for the current digit pass.${digitHint}`;
+      }
+      case 'bucket':
+        return `The highlighted value ${value} is being assigned to a bucket based on its value range.`;
+      default:
+        return `The algorithm is inspecting ${value}. This is a read step before deciding whether anything must move.`;
+    }
+  }
+
+  if (swap !== null) {
+    const value = formatValue(swap, array);
+    if (algorithm === 'bucket') {
+      return `A sorted bucket value is being written back into ${value}. This rebuilds the final array from low-value buckets to high-value buckets.`;
+    }
+    return `The visualization is writing or moving a value at ${value}.`;
+  }
+
+  return 'No individual bar is highlighted right now; the algorithm is between visible operations.';
+}
+
+function buildNextStep(
+  algorithm: SortingAlgorithmId,
+  status: StepExplanation['status'],
+  hasHighlight: boolean
+): string {
+  if (status === 'paused') {
+    return 'Resume the run to continue from this exact operation.';
+  }
+  if (status === 'stopped') {
+    return 'Start a new run to rebuild the explanation from the first operation.';
+  }
+  if (status === 'idle') {
+    return 'Press start to see the first highlighted operation and follow the guide step by step.';
+  }
+  if (!hasHighlight) {
+    return 'The next visible operation will highlight the value or pair that the algorithm is about to inspect.';
+  }
+
+  switch (algorithm) {
+    case 'bubble':
+      return 'Next, the scan moves to the following neighboring pair; after enough scans, large values settle on the right.';
+    case 'insertion':
+      return 'Next, the algorithm either shifts another larger value right or inserts the saved value into the open space.';
+    case 'selection':
+      return 'Next, the scan continues looking for a smaller candidate; the smallest found value is swapped into position at the end of the pass.';
+    case 'quick':
+      return 'Next, the partition scan continues until the pivot can be placed between smaller and larger values.';
+    case 'merge':
+      return 'Next, the smaller highlighted front value is copied into the merged output, then that side advances.';
+    case 'radix':
+      return 'Next, the value is placed according to the active digit; after this digit pass, the algorithm moves to the next digit place.';
+    case 'heap':
+      return 'Next, the larger candidate may swap upward in the heap, then heap repair continues downward.';
+    case 'bucket':
+      return 'Next, the algorithm keeps filling buckets or writes the sorted bucket contents back into the array.';
+  }
+}
+
+export function getStepExplanation(
+  input: StepExplanationInput
+): StepExplanation {
+  const activeAlgorithm = input.currentTestingAlgo ?? input.algorithm;
+  const guide = ALGORITHM_GUIDES[activeAlgorithm];
+  const algorithmLabel = guide.label;
+  const status = getStatus(input);
+  const { compare, swap } = input.currentBar;
+  const values = [
+    compare !== null ? formatValue(compare, input.array) : null,
+    swap !== null ? formatValue(swap, input.array) : null,
+  ].filter((value): value is string => Boolean(value));
+  const hasHighlight = compare !== null || swap !== null;
+  const base = {
+    algorithmLabel,
+    status,
+    beginnerSummary: guide.beginnerSummary,
+    reason: guide.reason,
+    decisionRule: guide.decisionRule,
+    highlightLegend: guide.highlightLegend,
+    walkthrough: guide.walkthrough,
+    values,
+    nextStep: buildNextStep(activeAlgorithm, status, hasHighlight),
+  };
+
+  if (status === 'idle') {
+    return {
+      ...base,
+      title: 'Ready to explain each step',
+      detail:
+        'Start the visualization to see how highlights connect to the algorithm rule.',
+      currentFocus:
+        'Nothing is highlighted yet. Use the walkthrough below as the mental model before pressing start.',
+      values: [],
+    };
+  }
+
+  if (status === 'stopped') {
+    return {
+      ...base,
+      title: 'Visualization stopped',
+      detail:
+        'The current run was terminated, so the panel is preserving the last visible operation.',
+      currentFocus: hasHighlight
+        ? getSingleFocus(activeAlgorithm, compare, swap, input.array)
+        : 'There is no active highlighted operation after stopping.',
+    };
+  }
+
+  if (compare !== null && swap !== null) {
+    return {
+      ...base,
+      title: 'Comparing highlighted values',
+      detail: `The algorithm is checking ${formatValue(compare, input.array)} against ${formatValue(swap, input.array)}.`,
+      currentFocus: getPairFocus(activeAlgorithm, compare, swap, input.array),
+    };
+  }
+
+  if (compare !== null) {
+    return {
+      ...base,
+      title: 'Inspecting one value',
+      detail: `The algorithm is reading ${formatValue(compare, input.array)} to decide the next move.`,
+      currentFocus: getSingleFocus(activeAlgorithm, compare, null, input.array),
+    };
+  }
+
+  if (swap !== null) {
+    return {
+      ...base,
+      title: 'Writing a value',
+      detail: `The visualization is updating ${formatValue(swap, input.array)} after a move or bucket write-back.`,
+      currentFocus: getSingleFocus(activeAlgorithm, null, swap, input.array),
+    };
+  }
+
+  return {
+    ...base,
+    title:
+      status === 'paused'
+        ? 'Paused between operations'
+        : 'Preparing the next operation',
+    detail:
+      status === 'paused'
+        ? 'The algorithm is paused. Resume to continue the next comparison or move.'
+        : 'The algorithm is between visible steps and will highlight the next operation shortly.',
+    currentFocus:
+      status === 'paused'
+        ? 'The run is paused between two visible operations, so no exact bar action is active at this moment.'
+        : 'The algorithm is doing a short internal update before the next highlighted operation appears.',
+  };
+}