diff --git a/src/chrome/EffortMeter.test.ts b/src/chrome/EffortMeter.test.ts
new file mode 100644
index 00000000..038791b5
--- /dev/null
+++ b/src/chrome/EffortMeter.test.ts
@@ -0,0 +1,322 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  EffortMeter,
+  orderEffortOptions,
+  type EffortTier,
+} from "./EffortMeter";
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+
+const GROK_OPTIONS = [
+  { value: "xhigh", label: "Extra High" },
+  { value: "high", label: "High" },
+  { value: "medium", label: "Medium" },
+  { value: "low", label: "Low" },
+];
+
+const TIERS = orderEffortOptions(GROK_OPTIONS);
+
+function renderMeter(props: {
+  value: string;
+  onChange?: (value: string) => void;
+  onClose?: () => void;
+  tiers?: EffortTier[];
+  defaultValue?: string;
+}) {
+  act(() =>
+    root.render(
+      createElement(EffortMeter, {
+        tiers: props.tiers ?? TIERS,
+        value: props.value,
+        defaultValue: props.defaultValue ?? "high",
+        modelName: "Grok 4.6",
+        onChange: props.onChange ?? vi.fn(),
+        onClose: props.onClose ?? vi.fn(),
+      }),
+    ),
+  );
+  return container.querySelector<HTMLElement>('[role="slider"]')!;
+}
+
+function keyDown(target: EventTarget, key: string) {
+  act(() => {
+    target.dispatchEvent(
+      new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),
+    );
+  });
+}
+
+describe("orderEffortOptions", () => {
+  it("sorts catalog order into ascending effort", () => {
+    expect(TIERS.map((tier) => tier.value)).toEqual([
+      "low",
+      "medium",
+      "high",
+      "xhigh",
+    ]);
+  });
+
+  it("puts auto first and unknown values last", () => {
+    const tiers = orderEffortOptions([
+      { value: "high", label: "High" },
+      { value: "turbo", label: "Turbo" },
+      { value: "auto", label: "Auto" },
+      { value: "low", label: "Low" },
+    ]);
+    expect(tiers.map((tier) => tier.value)).toEqual([
+      "auto",
+      "low",
+      "high",
+      "turbo",
+    ]);
+    expect(tiers[0].kind).toBe("auto");
+  });
+});
+
+describe("EffortMeter", () => {
+  it("commits on End and steps with the wheel", () => {
+    const onChange = vi.fn();
+    const slider = renderMeter({ value: "low", onChange });
+    expect(slider.getAttribute("aria-valuemin")).toBe("0");
+    expect(slider.getAttribute("aria-valuemax")).toBe("3");
+    expect(slider.getAttribute("aria-valuenow")).toBe("0");
+    expect(slider.getAttribute("aria-valuetext")).toBe("Low");
+
+    keyDown(slider, "End");
+    expect(onChange).toHaveBeenLastCalledWith("xhigh");
+
+    // The committed value comes back through props; without a re-render the
+    // slider still sits on "low", so a wheel-up steps to "medium".
+    act(() => {
+      slider.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaY: -40,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    });
+    expect(onChange).toHaveBeenLastCalledWith("medium");
+  });
+
+  it("only offers reset away from the default", () => {
+    const onChange = vi.fn();
+    renderMeter({ value: "high", onChange });
+    const resetDefault = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Reset to default"]',
+    )!;
+    expect(resetDefault.style.visibility).toBe("hidden");
+
+    renderMeter({ value: "xhigh", onChange });
+    const reset = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Reset to default"]',
+    )!;
+    expect(reset.style.visibility).toBe("visible");
+    act(() => reset.click());
+    expect(onChange).toHaveBeenCalledWith("high");
+  });
+
+  it("marks the fill as top tier only at the last tier", () => {
+    renderMeter({ value: "xhigh" });
+    expect(container.querySelector(".effort-top-halo")).toBeNull();
+    expect(
+      container.querySelector(".effort-top-tint[data-top-tier]"),
+    ).not.toBeNull();
+
+    renderMeter({ value: "medium" });
+    expect(container.querySelector("[data-top-tier]")).toBeNull();
+  });
+
+  it("reveals a full-width fill using the shared rail fraction", () => {
+    const slider = renderMeter({ value: "medium" });
+    const rail = container.querySelector<HTMLElement>(".effort-rail")!;
+    const fill = container.querySelector<HTMLElement>(".effort-rail-fill")!;
+    // "medium" is index 1 of 4 tiers → one third of the rail.
+    expect(rail.style.getPropertyValue("--effort-frac")).toContain("0.333");
+    expect(fill.style.width).toBe("");
+    expect(rail.style.getPropertyValue("--effort-frac")).toContain("13.5px");
+    expect(
+      container.querySelectorAll(".effort-ticks .effort-rail-tick"),
+    ).toHaveLength(4);
+
+    expect(container.querySelector(".effort-specks-highlight")).not.toBeNull();
+    expect(slider.hasAttribute("data-pressed")).toBe(false);
+    act(() => {
+      slider.dispatchEvent(
+        new PointerEvent("pointerdown", {
+          clientX: 50,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    });
+    expect(slider.hasAttribute("data-pressed")).toBe(true);
+    act(() => {
+      slider.dispatchEvent(
+        new PointerEvent("pointerup", {
+          clientX: 50,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    });
+    expect(slider.hasAttribute("data-pressed")).toBe(false);
+  });
+
+  it.each(["pointercancel", "lostpointercapture"])(
+    "preserves pickup, interrupts settle, and restores the commit on %s",
+    (cancelEvent) => {
+      let now = 0;
+      let id = 0;
+      const frames = new Map<number, FrameRequestCallback>();
+      vi.stubGlobal(
+        "requestAnimationFrame",
+        (callback: FrameRequestCallback) => {
+          frames.set(++id, callback);
+          return id;
+        },
+      );
+      vi.stubGlobal("cancelAnimationFrame", (key: number) =>
+        frames.delete(key),
+      );
+      const clock = vi.spyOn(performance, "now").mockImplementation(() => now);
+      const advance = (ms: number) => {
+        now += ms;
+        const callbacks = [...frames.values()];
+        frames.clear();
+        act(() => callbacks.forEach((callback) => callback(now)));
+      };
+      const onChange = vi.fn();
+      const slider = renderMeter({ value: "medium", onChange });
+      const rail = container.querySelector<HTMLElement>(".effort-rail")!;
+      vi.spyOn(rail, "getBoundingClientRect").mockReturnValue({
+        left: 0,
+        top: 0,
+        width: 227,
+        height: 22,
+      } as DOMRect);
+      const frac = () =>
+        Number(
+          rail.style
+            .getPropertyValue("--effort-frac")
+            .match(/\+ ([\d.]+) \*/)?.[1],
+        );
+      const pointer = (type: string, x: number) =>
+        act(() => {
+          slider.dispatchEvent(
+            new PointerEvent(type, {
+              pointerId: 1,
+              clientX: x,
+              clientY: 11,
+              button: 0,
+              bubbles: true,
+              cancelable: true,
+            }),
+          );
+        });
+      const center = 13.5 + 200 / 3;
+      pointer("pointerdown", center + 10);
+      advance(16);
+      expect(frac()).toBeCloseTo(1 / 3);
+      pointer("pointermove", center + 30);
+      // No event-rate rendering: the next frame drives all layers.
+      expect(frac()).toBeCloseTo(1 / 3);
+      advance(16);
+      expect(frac()).toBeCloseTo(1 / 3 + 0.1);
+      expect(
+        Number(slider.style.getPropertyValue("--effort-light")),
+      ).toBeGreaterThan(0.55);
+      pointer(cancelEvent, center + 30);
+      advance(200);
+      expect(frac()).toBeCloseTo(1 / 3);
+      expect(onChange).not.toHaveBeenCalled();
+      expect(slider.hasAttribute("data-pressed")).toBe(false);
+      expect(slider.style.getPropertyValue("--effort-sx")).toBe("1");
+
+      // Bare rail presses use zero offset; release snaps without overshoot.
+      pointer("pointerdown", 113.5);
+      advance(16);
+      expect(frac()).toBeCloseTo(0.5);
+      pointer("pointerup", 113.5);
+      expect(onChange).toHaveBeenLastCalledWith("high");
+      expect(
+        parseFloat(slider.style.getPropertyValue("--effort-settle-ms")),
+      ).toBeCloseTo(110 + 2 * (200 / 6));
+      renderMeter({ value: "high", onChange });
+      advance(40);
+      const interrupted = frac();
+      expect(interrupted).toBeGreaterThan(0.5);
+      expect(interrupted).toBeLessThan(2 / 3);
+      const pickup = 13.5 + 200 * interrupted + 8;
+      pointer("pointerdown", pickup);
+      advance(16);
+      expect(frac()).toBeCloseTo(interrupted);
+      pointer("pointermove", 1000);
+      advance(16);
+      expect(frac()).toBe(1);
+      pointer("pointermove", -1000);
+      advance(16);
+      expect(frac()).toBe(0);
+      pointer(cancelEvent, -1000);
+      advance(200);
+      expect(frac()).toBeCloseTo(2 / 3);
+      expect(onChange).toHaveBeenCalledTimes(1);
+
+      keyDown(slider, "Home");
+      renderMeter({ value: "low", onChange });
+      expect(slider.style.getPropertyValue("--effort-settle-ms")).toBe("140ms");
+      let previous = frac();
+      for (let i = 0; i < 9; i++) {
+        advance(16);
+        expect(frac()).toBeLessThanOrEqual(previous);
+        expect(frac()).toBeGreaterThanOrEqual(0);
+        previous = frac();
+      }
+      expect(frac()).toBe(0);
+      pointer("pointerdown", 13.5);
+      advance(16);
+      pointer("pointerup", 13.5);
+      expect(slider.style.getPropertyValue("--effort-settle-ms")).toBe("0ms");
+      clock.mockRestore();
+    },
+  );
+
+  it("uses a balanced static field with only four twinkling sites", () => {
+    renderMeter({ value: "high" });
+    const field = container.querySelector(".effort-specks")!;
+    const sites = [...field.querySelectorAll<HTMLElement>(".effort-speck")];
+    expect(sites).toHaveLength(30);
+    expect(sites.filter((site) => site.style.width === "1px")).toHaveLength(20);
+    expect(sites.filter((site) => site.style.width === "1.5px")).toHaveLength(
+      8,
+    );
+    expect(sites.filter((site) => site.style.width === "2px")).toHaveLength(2);
+    expect(field.querySelectorAll("[data-twinkle]")).toHaveLength(4);
+    expect(field.querySelectorAll("[data-drift]")).toHaveLength(0);
+  });
+
+  it("closes on Enter", () => {
+    const onClose = vi.fn();
+    const slider = renderMeter({ value: "high", onClose });
+    keyDown(slider, "Enter");
+    expect(onClose).toHaveBeenCalled();
+  });
+});
diff --git a/src/chrome/EffortMeter.tsx b/src/chrome/EffortMeter.tsx
new file mode 100644
index 00000000..a5dd8169
--- /dev/null
+++ b/src/chrome/EffortMeter.tsx
@@ -0,0 +1,557 @@
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
+import { RotateCcw } from "./icons";
+
+export type EffortTier = {
+  value: string;
+  label: string;
+  kind: "auto" | "level" | "beyond";
+};
+
+// Option order varies by harness (Grok lists xhigh first), so the meter
+// ranks by name rather than trusting catalog order. Unknown values keep
+// their catalog order after the named ones.
+const EFFORT_RANK: Record<string, number> = {
+  auto: 0,
+  off: 1,
+  none: 1,
+  minimal: 2,
+  low: 3,
+  medium: 4,
+  high: 5,
+  xhigh: 6,
+  max: 7,
+  ultracode: 8,
+  ultrathink: 9,
+};
+
+const BEYOND_VALUES = new Set(["ultracode", "ultrathink"]);
+
+export function orderEffortOptions(
+  options: { value: string; label: string }[],
+): EffortTier[] {
+  return options
+    .map((option, index) => ({ option, index }))
+    .sort(
+      (a, b) =>
+        (EFFORT_RANK[a.option.value] ?? Number.MAX_SAFE_INTEGER) -
+          (EFFORT_RANK[b.option.value] ?? Number.MAX_SAFE_INTEGER) ||
+        a.index - b.index,
+    )
+    .map(({ option }) => ({
+      value: option.value,
+      label: option.label,
+      kind:
+        option.value === "auto"
+          ? "auto"
+          : BEYOND_VALUES.has(option.value)
+            ? "beyond"
+            : "level",
+    }));
+}
+
+const THUMB = 27;
+const INSET = THUMB / 2;
+const position = (frac: number) =>
+  `calc(${INSET}px + ${frac} * (100% - ${THUMB}px))`;
+const clamp = (value: number) => Math.min(1, Math.max(0, value));
+
+// Invert the x coordinate of cubic-bezier(.22, .75, .18, 1).
+function settleEase(progress: number) {
+  const bezier = (t: number, a: number, b: number) =>
+    3 * (1 - t) ** 2 * t * a + 3 * (1 - t) * t * t * b + t ** 3;
+  let low = 0;
+  let high = 1;
+  for (let i = 0; i < 16; i++) {
+    const mid = (low + high) / 2;
+    if (bezier(mid, 0.22, 0.18) < progress) low = mid;
+    else high = mid;
+  }
+  return bezier((low + high) / 2, 0.75, 1);
+}
+
+// Ten irregular sites per third; spacing is at least 4% in the 2D field.
+// Twenty 1px, eight 1.5px, two 2px. Larger particles stay dimmer.
+const FULL_SPECKS = [
+  [2, 57],
+  [5, 26],
+  [9, 73],
+  [14, 41],
+  [17, 64],
+  [21, 23],
+  [24, 49],
+  [27, 79],
+  [30, 34],
+  [32, 61],
+  [35, 21],
+  [38, 68],
+  [42, 43],
+  [45, 77],
+  [48, 29],
+  [51, 56],
+  [55, 22],
+  [58, 71],
+  [61, 38],
+  [65, 59],
+  [68, 79],
+  [71, 31],
+  [74, 54],
+  [78, 23],
+  [81, 67],
+  [84, 42],
+  [88, 76],
+  [91, 27],
+  [95, 53],
+  [98, 72],
+].map(([left, top], index) => {
+  const size =
+    index === 9 || index === 24
+      ? 2
+      : [1, 5, 11, 14, 18, 21, 26, 28].includes(index)
+        ? 1.5
+        : 1;
+  const base =
+    size === 2 ? 0.22 : size === 1.5 ? 0.27 : 0.32 + (index % 5) * 0.02;
+  const duration = (
+    { 3: 6400, 12: 7300, 20: 8100, 27: 9200 } as Record<number, number>
+  )[index];
+  return { left, top, size, base, duration };
+});
+
+function renderSpeck(
+  site: (typeof FULL_SPECKS)[number],
+  key: number,
+  isHighlight = false,
+) {
+  return (
+    <i
+      key={key}
+      className="effort-speck"
+      data-glow={site.size === 2 ? "" : undefined}
+      data-twinkle={!isHighlight && site.duration ? "" : undefined}
+      style={{
+        left: `${site.left}%`,
+        top: `${site.top}%`,
+        width: `${site.size}px`,
+        height: `${site.size}px`,
+      }}
+    >
+      <i
+        className="effort-speck-inner"
+        style={
+          {
+            "--speck-base": site.base,
+            "--speck-peak": site.base + 0.06,
+            "--speck-duration": `${site.duration}ms`,
+            "--speck-delay": `${-key * 317}ms`,
+          } as CSSProperties
+        }
+      />
+    </i>
+  );
+}
+
+/**
+ * The rail only: a continuous track that fills to the selected tier, with a
+ * tick mark per tier, stationary speck field, separate thumb, and top-tier accent aura.
+ */
+export function EffortMeterSpark({
+  tiers,
+  selectedIndex,
+  size,
+  className,
+  dragFrac,
+}: {
+  tiers: EffortTier[];
+  selectedIndex: number;
+  size: "mini" | "full";
+  className?: string;
+  dragFrac?: number | null;
+}) {
+  const n = tiers.length;
+  if (n === 0) return null;
+  const tierFrac = n > 1 ? selectedIndex / (n - 1) : 0;
+  const frac = dragFrac != null ? dragFrac : tierFrac;
+  const topTier = selectedIndex === n - 1;
+
+  if (size === "mini") {
+    return (
+      <div
+        aria-hidden="true"
+        data-effort-rail="mini"
+        className={`effort-rail effort-rail-mini${className ? ` ${className}` : ""}`}
+        style={
+          {
+            "--effort-frac": `${frac * 100}%`,
+            "--effort-t": frac,
+          } as CSSProperties
+        }
+      >
+        <div
+          className="effort-rail-fill"
+          data-top-tier={topTier ? "" : undefined}
+          style={{ width: `${frac * 100}%` }}
+        />
+        <div className="effort-specks">
+          <i
+            className="effort-speck"
+            style={{ left: "45%", top: "50%", opacity: 0.28 }}
+          />
+          <i
+            className="effort-speck"
+            style={{ left: "70%", top: "35%", opacity: 0.38 }}
+          />
+          <i
+            className="effort-speck"
+            style={{ left: "88%", top: "60%", opacity: 0.48 }}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`relative w-full${className ? ` ${className}` : ""}`}>
+      <div
+        aria-hidden="true"
+        data-effort-rail="full"
+        className="effort-rail"
+        style={
+          {
+            "--effort-frac": position(frac),
+            "--effort-thumb": `${THUMB}px`,
+            "--effort-t": frac,
+          } as CSSProperties
+        }
+      >
+        <div className="effort-rail-fill">
+          <div
+            className="effort-top-tint"
+            data-top-tier={topTier ? "" : undefined}
+          />
+        </div>
+        <div className="effort-specks">
+          {FULL_SPECKS.map((site, i) => renderSpeck(site, i))}
+        </div>
+        <div className="effort-specks-highlight" aria-hidden="true">
+          {FULL_SPECKS.map((site, i) => renderSpeck(site, i, true))}
+        </div>
+        <div className="effort-ticks">
+          {tiers.map((tier, index) => (
+            <i
+              key={tier.value}
+              className="effort-rail-tick"
+              data-passed={n > 1 && index / (n - 1) < frac ? "" : undefined}
+              data-auto={tier.kind === "auto" ? "" : undefined}
+              style={{
+                left: position(n > 1 ? index / (n - 1) : 0),
+              }}
+            />
+          ))}
+        </div>
+        <div className="effort-thumb">
+          <div className="effort-thumb-inner" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Discrete effort control: a glowing rail that acts as a slider. The thumb
+ * tracks continuous drag and snaps between tier ticks, stationary specks
+ * twinkle inside the fill, and the top tier takes the accent halo and tint.
+ */
+export function EffortMeter({
+  tiers,
+  value,
+  defaultValue,
+  modelName,
+  onChange,
+  onClose,
+}: {
+  tiers: EffortTier[];
+  value: string;
+  defaultValue: string;
+  modelName: string;
+  onChange: (value: string) => void;
+  onClose: () => void;
+}) {
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+  const pointerId = useRef<number | null>(null);
+  const grabOffset = useRef(0);
+  const pointerX = useRef(0);
+  const frame = useRef<number | null>(null);
+  const velocity = useRef(0);
+  const lastSample = useRef({ x: 0, time: 0 });
+  const [isPressed, setIsPressed] = useState(false);
+
+  const selectedIndex = Math.max(
+    0,
+    tiers.findIndex((tier) => tier.value === value),
+  );
+  const committedFrac =
+    tiers.length > 1 ? selectedIndex / (tiers.length - 1) : 0;
+  const [renderedFrac, setRenderedFrac] = useState(committedFrac);
+  const rendered = useRef(committedFrac);
+  const settleTarget = useRef<number | null>(null);
+  const [motion, setMotion] = useState({
+    light: 0,
+    sx: 1,
+    sy: 1,
+    origin: "50%",
+  });
+  const [settleMs, setSettleMs] = useState(140);
+  const paint = (frac: number) => {
+    rendered.current = frac;
+    setRenderedFrac(frac);
+  };
+  const stopFrame = () => {
+    if (frame.current != null) cancelAnimationFrame(frame.current);
+    frame.current = null;
+  };
+  const railRect = () =>
+    sliderRef.current?.querySelector(".effort-rail")?.getBoundingClientRect();
+  const settle = (target: number, duration: number) => {
+    stopFrame();
+    settleTarget.current = target;
+    const from = rendered.current;
+    const distance =
+      Math.abs(target - from) * Math.max(0, (railRect()?.width ?? 0) - THUMB);
+    const reduced = window.matchMedia?.(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
+    const ms = distance < 0.5 || reduced ? 0 : duration;
+    setSettleMs(ms);
+    if (!ms) {
+      paint(target);
+      return;
+    }
+    const start = performance.now();
+    const tick = (now: number) => {
+      const t = clamp((now - start) / ms);
+      paint(t === 1 ? target : from + (target - from) * settleEase(t));
+      frame.current = t < 1 ? requestAnimationFrame(tick) : null;
+    };
+    frame.current = requestAnimationFrame(tick);
+  };
+  useLayoutEffect(() => {
+    if (!dragging.current && settleTarget.current !== committedFrac) {
+      settle(committedFrac, 140);
+    }
+    // Only committed changes initiate keyboard/reset settling.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [committedFrac]);
+  useEffect(() => () => stopFrame(), []);
+
+  const shownIndex = isPressed
+    ? Math.round(renderedFrac * Math.max(0, tiers.length - 1))
+    : selectedIndex;
+  const shownTier = tiers[shownIndex];
+  const isDefault = value === defaultValue;
+  const defaultLabel =
+    tiers.find((tier) => tier.value === defaultValue)?.label ?? defaultValue;
+
+  useEffect(() => {
+    sliderRef.current?.focus();
+  }, []);
+
+  const fracAt = (clientX: number) => {
+    const rect = railRect();
+    if (!rect || rect.width <= THUMB) return 0;
+    return clamp(
+      (clientX - grabOffset.current - rect.left - INSET) / (rect.width - THUMB),
+    );
+  };
+  const sampleDrag = (now: number) => {
+    const frac = fracAt(pointerX.current);
+    const x = pointerX.current;
+    const dt = Math.max(1, now - lastSample.current.time);
+    const instantaneous = (x - lastSample.current.x) / dt;
+    velocity.current +=
+      (instantaneous - velocity.current) * (1 - Math.exp(-dt / 45));
+    lastSample.current = { x, time: now };
+    const s = clamp(Math.abs(velocity.current) / 0.65);
+    setMotion({
+      light: 0.55 + 0.45 * s,
+      sx: 0.985 + 0.03 * s,
+      sy: 0.985 - 0.015 * s,
+      origin:
+        velocity.current > 0 ? "45%" : velocity.current < 0 ? "55%" : "50%",
+    });
+    paint(frac);
+    frame.current = requestAnimationFrame(sampleDrag);
+  };
+  const finishDrag = (cancel: boolean, clientX = pointerX.current) => {
+    if (!dragging.current) return;
+    const frac = fracAt(clientX);
+    const index = Math.round(frac * Math.max(0, tiers.length - 1));
+    const target = cancel
+      ? committedFrac
+      : tiers.length > 1
+        ? index / (tiers.length - 1)
+        : 0;
+    dragging.current = false;
+    pointerId.current = null;
+    setIsPressed(false);
+    setMotion({ light: 0, sx: 1, sy: 1, origin: "50%" });
+    const distance =
+      Math.abs(target - rendered.current) *
+      Math.max(0, (railRect()?.width ?? 0) - THUMB);
+    settle(target, Math.min(190, Math.max(110, 110 + 2 * distance)));
+    if (!cancel) commit(index);
+  };
+
+  const commit = (index: number) => {
+    const clamped = Math.min(tiers.length - 1, Math.max(0, index));
+    const tier = tiers[clamped];
+    if (tier && clamped !== selectedIndex) onChange(tier.value);
+  };
+
+  // React attaches wheel listeners passively, so the step-on-scroll handler
+  // has to be native for preventDefault to stick.
+  const stepRef = useRef((_delta: number) => {});
+  useLayoutEffect(() => {
+    stepRef.current = (delta) => commit(selectedIndex + delta);
+  });
+  useEffect(() => {
+    const el = sliderRef.current;
+    if (!el) return;
+    const onWheel = (event: WheelEvent) => {
+      event.preventDefault();
+      if (event.deltaY !== 0) stepRef.current(event.deltaY < 0 ? 1 : -1);
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, []);
+
+  if (!shownTier) return null;
+
+  return (
+    <div className="px-4 pt-3 pb-3">
+      <div className="flex h-6 items-center justify-between gap-2">
+        <span className="min-w-0 truncate text-[13px] font-medium leading-[18px] text-content/92">
+          {shownTier.label}
+        </span>
+        <button
+          type="button"
+          aria-label="Reset to default"
+          title={`Reset to ${defaultLabel}`}
+          onClick={() => onChange(defaultValue)}
+          tabIndex={isDefault ? -1 : 0}
+          style={{ visibility: isDefault ? "hidden" : "visible" }}
+          className="grid size-6 shrink-0 place-items-center rounded-[7px] text-content/48 transition-colors duration-100 hover:bg-content/6 hover:text-content/82"
+        >
+          <RotateCcw className="size-3.5" strokeWidth={1.5} />
+        </button>
+      </div>
+      <div className="mt-0.5 truncate text-[11px] font-normal leading-4 text-content/54">
+        {modelName}
+      </div>
+      <div
+        ref={sliderRef}
+        role="slider"
+        tabIndex={0}
+        aria-label="Effort"
+        aria-valuemin={0}
+        aria-valuemax={tiers.length - 1}
+        aria-valuenow={shownIndex}
+        aria-valuetext={shownTier.label}
+        aria-orientation="horizontal"
+        onKeyDown={(event) => {
+          const last = tiers.length - 1;
+          let next: number | null = null;
+          if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+            next = selectedIndex + 1;
+          } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+            next = selectedIndex - 1;
+          } else if (event.key === "Home") {
+            next = 0;
+          } else if (event.key === "End") {
+            next = last;
+          } else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onClose();
+            return;
+          }
+          if (next == null) return;
+          event.preventDefault();
+          commit(next);
+        }}
+        onPointerDown={(event) => {
+          if (dragging.current || event.button !== 0) return;
+          event.preventDefault();
+          stopFrame();
+          settleTarget.current = null;
+          const rect = railRect();
+          const center =
+            (rect?.left ?? 0) +
+            INSET +
+            rendered.current * Math.max(0, (rect?.width ?? 0) - THUMB);
+          const offset = event.clientX - center;
+          const dy =
+            event.clientY - ((rect?.top ?? 0) + (rect?.height ?? 22) / 2);
+          grabOffset.current = Math.hypot(offset, dy) <= INSET ? offset : 0;
+          pointerX.current = event.clientX;
+          pointerId.current = event.pointerId;
+          sliderRef.current?.setPointerCapture?.(event.pointerId);
+          sliderRef.current?.focus();
+          dragging.current = true;
+          velocity.current = 0;
+          lastSample.current = {
+            x: event.clientX,
+            time: performance.now(),
+          };
+          setIsPressed(true);
+          setMotion({ light: 0.55, sx: 0.985, sy: 0.985, origin: "50%" });
+          frame.current = requestAnimationFrame(sampleDrag);
+        }}
+        onPointerMove={(event) => {
+          if (event.pointerId === pointerId.current)
+            pointerX.current = event.clientX;
+        }}
+        onPointerUp={(event) => {
+          if (event.pointerId === pointerId.current)
+            finishDrag(false, event.clientX);
+        }}
+        onPointerCancel={(event) => {
+          if (event.pointerId === pointerId.current) finishDrag(true);
+        }}
+        onLostPointerCapture={(event) => {
+          if (event.pointerId === pointerId.current) finishDrag(true);
+        }}
+        data-dragging={isPressed ? "" : undefined}
+        data-sampled=""
+        data-pressed={isPressed ? "" : undefined}
+        className="effort-slider relative mt-2 flex h-10 w-full items-center select-none"
+        style={
+          {
+            touchAction: "none",
+            "--effort-light": motion.light,
+            "--effort-sx": motion.sx,
+            "--effort-sy": motion.sy,
+            "--effort-origin": motion.origin,
+            "--effort-settle-ms": `${settleMs}ms`,
+          } as CSSProperties
+        }
+      >
+        <EffortMeterSpark
+          tiers={tiers}
+          selectedIndex={shownIndex}
+          size="full"
+          dragFrac={renderedFrac}
+        />
+      </div>
+      <div className="flex items-center justify-between font-sans text-[10px] font-normal leading-[14px] text-content/48">
+        <span>{tiers[0]?.label}</span>
+        <span>{tiers[tiers.length - 1]?.label}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/chrome/ModelPicker.test.ts b/src/chrome/ModelPicker.test.ts
index 850f1087..421aacbf 100644
--- a/src/chrome/ModelPicker.test.ts
+++ b/src/chrome/ModelPicker.test.ts
@@ -343,14 +343,16 @@ describe("model picker", () => {
       'button[aria-label="Effort: High"]',
     )!;
     expect(effortTrigger.textContent).toBe("High");
-    expect(effortTrigger.querySelector("svg")).not.toBeNull();
+    expect(
+      effortTrigger.querySelector('[data-effort-rail="mini"]'),
+    ).not.toBeNull();
     act(() => effortTrigger.click());
-    const effortMenu = container.querySelector<HTMLElement>(
-      '[role="menu"][aria-label="Effort"]',
+    const effortSlider = container.querySelector<HTMLElement>(
+      '[role="slider"][aria-label="Effort"]',
     )!;
-    expect(effortMenu).not.toBeNull();
-    keyDown(effortMenu, "ArrowUp");
-    keyDown(effortMenu, "Enter");
+    expect(effortSlider).not.toBeNull();
+    expect(effortSlider.getAttribute("aria-valuetext")).toBe("High");
+    keyDown(effortSlider, "ArrowRight");
     expect(onSettingsChange).toHaveBeenCalledWith({ effort: "xhigh" });
   });
 
diff --git a/src/chrome/ModelPicker.tsx b/src/chrome/ModelPicker.tsx
index b9c65024..0ed09f9c 100644
--- a/src/chrome/ModelPicker.tsx
+++ b/src/chrome/ModelPicker.tsx
@@ -1,4 +1,4 @@
-import { Check, ChevronDown, ChevronRight, Gauge, Search, Star } from "./icons";
+import { Check, ChevronDown, ChevronRight, Search, Star } from "./icons";
 import {
   useEffect,
   useId,
@@ -39,6 +39,11 @@ import { HARNESSES, HARNESS_TITLE, type HarnessId } from "../lib/session";
 import { useLockOverscroll } from "../hooks/useLockOverscroll";
 import { LAYER } from "../lib/layers";
 import { HarnessIcon } from "./HarnessIcon";
+import {
+  EffortMeter,
+  EffortMeterSpark,
+  orderEffortOptions,
+} from "./EffortMeter";
 import { Popover } from "./Popover";
 import { MOD } from "../lib/platform";
 
@@ -882,32 +887,31 @@ export function EffortPicker({
     getModelSnapshot,
   );
   const [open, setOpen] = useState(false);
-  const [active, setActive] = useState(0);
   const button = useRef<HTMLButtonElement>(null);
-  const menuId = useId();
   const current = resolveModel(harness, model);
   void catalogVersion;
   const setting = effortSetting(current);
 
   if (!setting) return null;
 
-  const value = settingValue(setting, values);
-  const valueLabel = settingValueLabel(setting, values);
+  const tiers = orderEffortOptions(setting.options);
+  // A restored session can carry a value this model no longer supports;
+  // render and keyboard state must agree on a real tier.
+  const rawValue = settingValue(setting, values);
+  const value = tiers.some((tier) => tier.value === rawValue)
+    ? rawValue
+    : (tiers.find((tier) => tier.value === setting.value)?.value ??
+      tiers[0]?.value ??
+      setting.value);
+  const valueLabel = tiers.find((tier) => tier.value === value)?.label ?? value;
+  const selectedIndex = Math.max(
+    0,
+    tiers.findIndex((tier) => tier.value === value),
+  );
   const dismiss = (restoreFocus: boolean) => {
     setOpen(false);
     if (restoreFocus) onClose?.();
   };
-  const openPicker = () => {
-    const selectedIndex = setting.options.findIndex(
-      (option) => option.value === value,
-    );
-    setActive(selectedIndex >= 0 ? selectedIndex : 0);
-    setOpen(true);
-  };
-  const pick = (optionValue: string) => {
-    onSettingsChange({ ...values, [setting.id]: optionValue });
-    dismiss(true);
-  };
 
   return (
     <>
@@ -917,16 +921,21 @@ export function EffortPicker({
         title={`Effort: ${valueLabel}`}
         aria-label={`Effort: ${valueLabel}`}
         aria-expanded={open}
-        aria-haspopup="menu"
+        aria-haspopup="dialog"
         onMouseDown={(event) => event.preventDefault()}
-        onClick={() => (open ? dismiss(true) : openPicker())}
-        className={`flex h-6.5 max-w-28 items-center gap-1 rounded-md px-1.5 ${
+        onClick={() => (open ? dismiss(true) : setOpen(true))}
+        className={`flex h-6.5 max-w-36 items-center gap-1 rounded-md px-1.5 ${
           open
             ? "bg-selection text-content"
             : "bg-selection text-content hover:bg-selection-hover"
         }`}
       >
-        <Gauge className="size-3.5 shrink-0" strokeWidth={1.75} />
+        <EffortMeterSpark
+          tiers={tiers}
+          selectedIndex={selectedIndex}
+          size="mini"
+          className="shrink-0"
+        />
         <span className="min-w-0 truncate text-[11px]">{valueLabel}</span>
         <ChevronDown
           className={`size-3 shrink-0 text-content/50 ${open ? "rotate-180" : ""}`}
@@ -938,59 +947,23 @@ export function EffortPicker({
         <Popover
           anchor={button}
           side="top"
-          width={SETTING_MENU_WIDTH}
-          autoFocus
+          width={248}
           onDismiss={(reason) => dismiss(reason === "escape")}
-          role="menu"
+          role="dialog"
           aria-label="Effort"
-          aria-activedescendant={`${menuId}-${active}`}
-          tabIndex={-1}
-          onKeyDown={(event) => {
-            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-              event.preventDefault();
-              const direction = event.key === "ArrowDown" ? 1 : -1;
-              setActive(
-                (index) =>
-                  (index + direction + setting.options.length) %
-                  setting.options.length,
-              );
-              return;
-            }
-            if (event.key !== "Enter" && event.key !== " ") return;
-            event.preventDefault();
-            const option = setting.options[active];
-            if (option) pick(option.value);
-          }}
           data-effort-picker
-          className="p-1 font-sans"
+          className="font-sans"
         >
-          {setting.options.map((option, index) => {
-            const selected = option.value === value;
-            const highlighted = index === active;
-            return (
-              <button
-                key={option.value}
-                id={`${menuId}-${index}`}
-                type="button"
-                role="menuitemradio"
-                aria-checked={selected}
-                onMouseDown={(event) => event.preventDefault()}
-                onMouseEnter={() => setActive(index)}
-                onClick={() => pick(option.value)}
-                className={`flex h-8 w-full items-center gap-2 rounded-lg px-2 text-left text-[13px] text-content ${
-                  highlighted ? "bg-selection" : "hover:bg-content/5"
-                }`}
-              >
-                <span className="min-w-0 flex-1 truncate">{option.label}</span>
-                {selected ? (
-                  <Check
-                    className="size-3.5 shrink-0 text-content/50"
-                    strokeWidth={2}
-                  />
-                ) : null}
-              </button>
-            );
-          })}
+          <EffortMeter
+            tiers={tiers}
+            value={value}
+            defaultValue={setting.value}
+            modelName={current.name}
+            onChange={(optionValue) =>
+              onSettingsChange({ ...values, [setting.id]: optionValue })
+            }
+            onClose={() => dismiss(true)}
+          />
         </Popover>
       ) : null}
     </>
diff --git a/src/index.css b/src/index.css
index cbaacb1b..c5c59ef1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1582,6 +1582,388 @@ html.theme-light .popover-backdrop {
   }
 }
 
+/* Effort meter: flat recessed rail with separate thumb, continuous drag,
+   discrete commit, deterministic quantum specks, and top-tier accent aura. */
+:root {
+  --effort-accent: var(--color-accent);
+}
+
+html.has-user-accent {
+  --effort-accent: var(--user-accent-color);
+}
+
+[data-effort-picker] {
+  max-width: calc(100vw - 24px);
+}
+
+/* WKWebView paints the platform focus ring on :focus for any focusable
+   element regardless of pointer source; suppress it and keep only the
+   thumb keyline for real keyboard focus. */
+.effort-slider:focus {
+  outline: none;
+}
+
+.effort-rail {
+  position: relative;
+  height: 22px;
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--color-content) 9%, transparent);
+  box-shadow: none;
+}
+
+html.theme-light .effort-rail {
+  background: color-mix(in srgb, var(--color-content) 8%, transparent);
+  box-shadow: none;
+}
+
+.effort-rail-mini {
+  width: 34px;
+  height: 10px;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--color-content) 10%, transparent);
+  overflow: hidden;
+  box-shadow: none;
+}
+
+.effort-rail-fill {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  border-radius: 11px;
+  overflow: hidden;
+  clip-path: inset(0 calc(100% - var(--effort-frac)) 0 0);
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-content) 16%, transparent) 0%,
+    color-mix(in srgb, var(--color-content) 32%, transparent) 55%,
+    color-mix(in srgb, var(--color-content) 52%, transparent) 100%
+  );
+  box-shadow: none;
+  transition: clip-path var(--effort-settle-ms, 140ms)
+    cubic-bezier(0.22, 0.75, 0.18, 1);
+}
+
+html.theme-light .effort-rail-fill {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-content) 14%, transparent) 0%,
+    color-mix(in srgb, var(--color-content) 24%, transparent) 55%,
+    color-mix(in srgb, var(--color-content) 36%, transparent) 100%
+  );
+  box-shadow: none;
+}
+
+.effort-rail-mini .effort-rail-fill {
+  inset: 0;
+  clip-path: none;
+  height: 100%;
+  border-radius: 5px;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-content) 25%, transparent) 0%,
+    color-mix(in srgb, var(--color-content) 48%, transparent) 100%
+  );
+  box-shadow: none;
+  transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.effort-rail-mini .effort-rail-fill[data-top-tier] {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-content) 25%, transparent) 0%,
+    color-mix(in srgb, var(--color-content) 48%, transparent) 70%,
+    color-mix(in srgb, var(--effort-accent) 38%, transparent) 100%
+  );
+}
+
+/* Position is sampled once in rAF for every layer, including settle.
+   CSS transitions remain for standalone rails, never double-ease samples. */
+[data-sampled] .effort-rail-fill,
+[data-sampled] .effort-thumb,
+[data-sampled] .effort-specks,
+[data-sampled] .effort-ticks {
+  transition: none;
+}
+
+.effort-top-tint {
+  position: absolute;
+  inset: 0 0 0 auto;
+  width: 28px;
+  border-radius: inherit;
+  pointer-events: none;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--effort-accent) 12%, transparent) 100%
+  );
+  box-shadow: none;
+  opacity: 0;
+  transition: opacity 160ms ease-out;
+}
+
+.effort-top-tint[data-top-tier] {
+  opacity: 1;
+}
+
+.effort-thumb {
+  position: absolute;
+  top: 50%;
+  left: var(--effort-frac);
+  transform: translate(-50%, -50%);
+  width: var(--effort-thumb, 27px);
+  height: var(--effort-thumb, 27px);
+  pointer-events: none;
+  z-index: 2;
+  transition: left var(--effort-settle-ms, 140ms)
+    cubic-bezier(0.22, 0.75, 0.18, 1);
+}
+
+.effort-thumb-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 16%),
+    0 1px 3px rgb(0 0 0 / 24%);
+  transform: scale(var(--effort-sx, 1), var(--effort-sy, 1));
+  transform-origin: var(--effort-origin, 50%) 50%;
+  transition:
+    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    box-shadow 100ms ease-out;
+}
+
+html.theme-light .effort-thumb-inner {
+  background: #ffffff;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 8%),
+    0 1px 3px rgb(0 0 0 / 12%);
+}
+
+[data-pressed] .effort-thumb-inner {
+  transition: box-shadow 100ms ease-out;
+}
+
+.effort-rail:has([data-top-tier]) .effort-thumb-inner {
+  box-shadow: 0 0 10px -1px
+    color-mix(in srgb, var(--effort-accent) 26%, transparent);
+  transition:
+    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    box-shadow 180ms ease-out;
+}
+
+[data-pressed] .effort-rail:has([data-top-tier]) .effort-thumb-inner {
+  transition: box-shadow 180ms ease-out;
+}
+
+/* Keyboard focus stays visible without drawing a frame around the track:
+   the thumb picks up a faint keyline instead. */
+.effort-slider:focus-visible .effort-thumb-inner {
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 16%),
+    0 0 0 3px color-mix(in srgb, var(--color-content) 28%, transparent),
+    0 1px 3px rgb(0 0 0 / 24%);
+}
+
+html.theme-light .effort-slider:focus-visible .effort-thumb-inner {
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 8%),
+    0 0 0 3px color-mix(in srgb, var(--color-content) 30%, transparent),
+    0 1px 3px rgb(0 0 0 / 12%);
+}
+
+.effort-ticks {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  -webkit-mask-image: radial-gradient(
+    circle 15px at var(--effort-frac) 50%,
+    transparent 13px,
+    #000 16px
+  );
+  mask-image: radial-gradient(
+    circle 15px at var(--effort-frac) 50%,
+    transparent 13px,
+    #000 16px
+  );
+  transition: mask-image var(--effort-settle-ms, 140ms)
+    cubic-bezier(0.22, 0.75, 0.18, 1);
+}
+
+.effort-rail-tick {
+  position: absolute;
+  top: 50%;
+  width: 1px;
+  height: 3px;
+  transform: translate(-50%, -50%);
+  border-radius: 0.5px;
+  background: color-mix(in srgb, var(--color-content) 16%, transparent);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.effort-rail-tick[data-passed] {
+  background: rgb(255 255 255 / 20%);
+}
+
+html.theme-light .effort-rail-tick {
+  background: color-mix(in srgb, var(--color-content) 18%, transparent);
+}
+
+html.theme-light .effort-rail-tick[data-passed] {
+  background: color-mix(in srgb, var(--color-content) 23%, transparent);
+}
+
+.effort-rail-tick[data-auto],
+html.theme-light .effort-rail-tick[data-auto] {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: transparent;
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-content) 28%, transparent);
+}
+
+.effort-specks {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  clip-path: inset(0 calc(100% - var(--effort-frac)) 0 0);
+  opacity: calc(0.72 + 0.28 * var(--effort-t, 0));
+  transition: clip-path var(--effort-settle-ms, 140ms)
+    cubic-bezier(0.22, 0.75, 0.18, 1);
+}
+
+.effort-rail-mini .effort-specks {
+  transition: none;
+}
+
+.effort-specks-highlight {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  clip-path: inset(0 calc(100% - var(--effort-frac)) 0 0);
+  opacity: var(--effort-light, 0);
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    #000 70%,
+    transparent 100%
+  );
+  -webkit-mask-size: 54px 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: calc(var(--effort-frac) - 46px) 0;
+  mask-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    #000 70%,
+    transparent 100%
+  );
+  mask-size: 54px 100%;
+  mask-repeat: no-repeat;
+  mask-position: calc(var(--effort-frac) - 46px) 0;
+  transition: opacity 150ms linear;
+}
+
+[data-pressed] .effort-specks-highlight {
+  transition: none;
+}
+
+.effort-specks-highlight .effort-speck-inner {
+  background: #ffffff;
+  opacity: 0.46;
+}
+
+html.theme-light .effort-specks-highlight .effort-speck-inner {
+  opacity: 0.36;
+}
+
+.effort-speck {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.effort-speck-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #ffffff;
+  opacity: var(--speck-base);
+  --speck-scale: 1;
+}
+
+html.theme-light .effort-speck-inner {
+  --speck-scale: 1.15;
+
+  opacity: min(0.48, calc(var(--speck-base) * var(--speck-scale)));
+}
+
+.effort-speck[data-glow] .effort-speck-inner {
+  box-shadow: 0 0 3px 0.5px rgb(255 255 255 / 38%);
+}
+
+html.theme-light .effort-speck[data-glow] .effort-speck-inner {
+  box-shadow: 0 0 3px 0.5px rgb(0 0 0 / 20%);
+}
+
+.effort-speck[data-twinkle] .effort-speck-inner {
+  animation: effort-twinkle var(--speck-duration) ease-in-out infinite;
+  animation-delay: var(--speck-delay);
+}
+
+@keyframes effort-twinkle {
+  0%,
+  57%,
+  78%,
+  100% {
+    opacity: min(0.48, calc(var(--speck-base) * var(--speck-scale)));
+  }
+  66% {
+    opacity: min(0.48, calc(var(--speck-peak) * var(--speck-scale)));
+  }
+}
+
+.effort-rail-mini .effort-speck {
+  width: 1px;
+  height: 1px;
+  border-radius: 50%;
+  background: #ffffff;
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .effort-rail-fill,
+  .effort-thumb,
+  .effort-thumb-inner,
+  .effort-specks,
+  .effort-ticks,
+  .effort-top-tint {
+    transition: none !important;
+    animation: none !important;
+  }
+
+  .effort-specks-highlight {
+    display: none !important;
+  }
+
+  .effort-thumb-inner {
+    transform: none !important;
+  }
+
+  .effort-speck,
+  .effort-speck-inner {
+    animation: none !important;
+  }
+
+  .effort-speck-inner {
+    transform: none !important;
+    opacity: min(0.48, calc(var(--speck-base) * var(--speck-scale))) !important;
+  }
+}
+
 /* Graph node cutouts so lane strokes do not show through the circles. */
 .git-history-item svg {
   display: block;