From 4decce9cd47c16ad70006a6f807f08b621abded8 Mon Sep 17 00:00:00 2001
From: elijah <elijahchan2019@outlook.com>
Date: Tue, 15 Sep 2026 11:47:51 +0800
Subject: [PATCH 1/7] Turn the composer effort picker into a segmented meter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Effort tiers are discrete and vary per model (3–7 steps, sometimes with
non-ordinal ultracode/ultrathink modes), so a continuous slider would
misrepresent them. The meter lights bars up to the selected tier, echoes
the terminal live-bar and thinking-pulse motifs, and reserves the accent
for the model's top tier. Harness option order differs (Grok lists xhigh
first), so tiers are ranked by name before rendering.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/chrome/EffortMeter.test.ts | 150 ++++++++++++++++++
 src/chrome/EffortMeter.tsx     | 277 +++++++++++++++++++++++++++++++++
 src/chrome/ModelPicker.test.ts |  10 +-
 src/chrome/ModelPicker.tsx     |  98 ++++--------
 src/index.css                  |  46 ++++++
 5 files changed, 510 insertions(+), 71 deletions(-)
 create mode 100644 src/chrome/EffortMeter.test.ts
 create mode 100644 src/chrome/EffortMeter.tsx

diff --git a/src/chrome/EffortMeter.test.ts b/src/chrome/EffortMeter.test.ts
new file mode 100644
index 00000000..cccbaa9c
--- /dev/null
+++ b/src/chrome/EffortMeter.test.ts
@@ -0,0 +1,150 @@
+// @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 });
+    expect(
+      container.querySelector('button[aria-label="Reset to default"]'),
+    ).toBeNull();
+
+    renderMeter({ value: "xhigh", onChange });
+    const reset = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Reset to default"]',
+    )!;
+    expect(reset).not.toBeNull();
+    act(() => reset.click());
+    expect(onChange).toHaveBeenCalledWith("high");
+  });
+
+  it("marks the peak bar as top tier only at the last tier", () => {
+    renderMeter({ value: "xhigh" });
+    expect(container.querySelector("rect[data-top-tier]")).not.toBeNull();
+
+    renderMeter({ value: "medium" });
+    expect(container.querySelector("rect[data-top-tier]")).toBeNull();
+  });
+
+  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..20ddc006
--- /dev/null
+++ b/src/chrome/EffortMeter.tsx
@@ -0,0 +1,277 @@
+import { useEffect, useRef, useState } 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"]);
+const TOP_TIER_VALUES = new Set(["max", "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 MINI = { barWidth: 2, gap: 1.5, height: 10, radius: 0.5 };
+// preserveAspectRatio="none" stretches the full meter, so rx is mini-only —
+// a corner radius there would distort with the non-uniform scale.
+const FULL = { barWidth: 24, gap: 8, height: 22, radius: 1 };
+
+/** The bars only: an SVG sparkline of effort tiers, bottom-aligned. */
+export function EffortMeterBars({
+  tiers,
+  selectedIndex,
+  size,
+  className,
+}: {
+  tiers: EffortTier[];
+  selectedIndex: number;
+  size: "mini" | "full";
+  className?: string;
+}) {
+  const { barWidth, gap, height, radius } = size === "mini" ? MINI : FULL;
+  const n = tiers.length;
+  if (n === 0) return null;
+  const width = n * barWidth + (n - 1) * gap;
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      height={height}
+      preserveAspectRatio={size === "full" ? "none" : undefined}
+      aria-hidden="true"
+      className={
+        size === "full" ? `block w-full ${className ?? ""}` : className
+      }
+    >
+      {tiers.map((tier, index) => {
+        const lit = index <= selectedIndex;
+        const peak = index === selectedIndex;
+        const topTier =
+          peak && (index === n - 1 || TOP_TIER_VALUES.has(tier.value));
+        const barHeight =
+          tier.kind === "auto"
+            ? height * 0.3
+            : n > 1
+              ? height * (0.35 + (0.65 * index) / (n - 1))
+              : height;
+        const hollow = tier.kind === "auto" || (tier.kind === "beyond" && !lit);
+        return (
+          <rect
+            key={tier.value}
+            className={`effort-meter-bar${peak && size === "full" ? " effort-meter-peak" : ""}`}
+            x={index * (barWidth + gap)}
+            y={height - barHeight}
+            width={barWidth}
+            height={barHeight}
+            rx={size === "mini" ? radius : 0}
+            fill={hollow ? "none" : "currentColor"}
+            stroke={hollow ? "currentColor" : undefined}
+            strokeWidth={hollow ? 1 : undefined}
+            strokeDasharray={
+              tier.kind === "beyond" && !lit ? "2 1.5" : undefined
+            }
+            vectorEffect="non-scaling-stroke"
+            opacity={lit ? 0.85 : 0.18}
+            data-top-tier={topTier ? "" : undefined}
+          />
+        );
+      })}
+    </svg>
+  );
+}
+
+/**
+ * Discrete effort control: a segmented meter that acts as a slider. Bars
+ * fill up to the selected tier, the peak bar breathes, and the top tier
+ * takes the accent color.
+ */
+export function EffortMeter({
+  tiers,
+  value,
+  defaultValue,
+  modelName,
+  onChange,
+  onClose,
+}: {
+  tiers: EffortTier[];
+  value: string;
+  defaultValue: string;
+  modelName: string;
+  onChange: (value: string) => void;
+  onClose: () => void;
+}) {
+  const track = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const selectedIndex = Math.max(
+    0,
+    tiers.findIndex((tier) => tier.value === value),
+  );
+  const shownIndex = dragIndex ?? selectedIndex;
+  const shownTier = tiers[shownIndex];
+  const defaultLabel =
+    tiers.find((tier) => tier.value === defaultValue)?.label ?? defaultValue;
+
+  useEffect(() => {
+    track.current?.focus();
+  }, []);
+
+  const indexAt = (clientX: number) => {
+    const el = track.current;
+    const rect = el?.getBoundingClientRect();
+    const ratio =
+      el && rect && rect.width > 0 ? (clientX - rect.left) / rect.width : 0;
+    return Math.min(
+      tiers.length - 1,
+      Math.max(0, Math.floor(ratio * tiers.length)),
+    );
+  };
+
+  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) => {});
+  stepRef.current = (delta) => commit(selectedIndex + delta);
+  useEffect(() => {
+    const el = track.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-3 py-2.5">
+      <div className="flex items-center justify-between gap-2">
+        <span className="min-w-0 truncate text-[13px] font-medium leading-4 text-content">
+          {shownTier.label}
+        </span>
+        {value !== defaultValue ? (
+          <button
+            type="button"
+            aria-label="Reset to default"
+            title={`Reset to ${defaultLabel}`}
+            onClick={() => onChange(defaultValue)}
+            className="grid size-5 shrink-0 place-items-center rounded text-content/50 hover:text-content"
+          >
+            <RotateCcw className="size-3.5" strokeWidth={1.75} />
+          </button>
+        ) : null}
+      </div>
+      <div className="truncate text-[11px] leading-4 text-content/55">
+        {modelName}
+      </div>
+      <div
+        ref={track}
+        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) => {
+          event.preventDefault();
+          track.current?.setPointerCapture(event.pointerId);
+          track.current?.focus();
+          dragging.current = true;
+          setDragIndex(indexAt(event.clientX));
+        }}
+        onPointerMove={(event) => {
+          if (dragging.current) setDragIndex(indexAt(event.clientX));
+        }}
+        onPointerUp={(event) => {
+          if (!dragging.current) return;
+          dragging.current = false;
+          const index = indexAt(event.clientX);
+          setDragIndex(null);
+          commit(index);
+        }}
+        onPointerCancel={() => {
+          dragging.current = false;
+          setDragIndex(null);
+        }}
+        className="mt-2 cursor-ew-resize rounded-sm outline-none focus-visible:ring-1 focus-visible:ring-accent"
+      >
+        <EffortMeterBars
+          tiers={tiers}
+          selectedIndex={shownIndex}
+          size="full"
+        />
+      </div>
+      <div className="mt-1.5 flex items-center justify-between font-mono text-[10px] leading-4 text-content/45">
+        <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 c330b01c..1c533ee7 100644
--- a/src/chrome/ModelPicker.test.ts
+++ b/src/chrome/ModelPicker.test.ts
@@ -246,12 +246,12 @@ describe("model picker", () => {
     expect(effortTrigger.textContent).toBe("High");
     expect(effortTrigger.querySelector("svg")).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 e0de3ece..6457216d 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,
+  EffortMeterBars,
+  orderEffortOptions,
+} from "./EffortMeter";
 import { Popover } from "./Popover";
 import { MOD } from "../lib/platform";
 
@@ -849,32 +854,24 @@ 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 tiers = orderEffortOptions(setting.options);
   const value = settingValue(setting, values);
   const valueLabel = settingValueLabel(setting, values);
+  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 (
     <>
@@ -884,16 +881,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())}
+        onClick={() => (open ? dismiss(true) : setOpen(true))}
         className={`flex h-6.5 max-w-28 items-center gap-1 rounded-md px-1.5 ${
           open
             ? "bg-content/10 text-content"
             : "bg-content/10 text-content hover:bg-content/15"
         }`}
       >
-        <Gauge className="size-3.5 shrink-0" strokeWidth={1.75} />
+        <EffortMeterBars
+          tiers={tiers}
+          selectedIndex={selectedIndex}
+          size="mini"
+          className="h-2.5 w-auto shrink-0"
+        />
         <span className="min-w-0 truncate text-[11px]">{valueLabel}</span>
         <ChevronDown
           className={`size-3 shrink-0 text-content/50 ${open ? "rotate-180" : ""}`}
@@ -905,59 +907,23 @@ export function EffortPicker({
         <Popover
           anchor={button}
           side="top"
-          width={SETTING_MENU_WIDTH}
-          autoFocus
+          width={232}
           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-content/10" : "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 3c06f428..cadaf307 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1434,6 +1434,52 @@ html.theme-light .popover-backdrop {
   }
 }
 
+/* Effort meter: bars light up to the selected tier and the peak bar
+   breathes like the thinking line. The top tier takes the accent — the
+   default, or the user's when one is configured. */
+:root {
+  --effort-accent: var(--color-accent);
+}
+
+html.has-user-accent {
+  --effort-accent: var(--user-accent-color);
+}
+
+.effort-meter-bar {
+  transition: opacity var(--motion-feedback-duration) var(--motion-ease-out);
+}
+
+@keyframes effort-meter-breathe {
+  0%,
+  100% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.effort-meter-peak {
+  animation: effort-meter-breathe 1.8s ease-in-out infinite;
+}
+
+.effort-meter-bar[data-top-tier] {
+  fill: var(--effort-accent);
+  opacity: 1;
+  filter: drop-shadow(0 0 4px var(--effort-accent));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .effort-meter-peak {
+    animation: none;
+    opacity: 1;
+  }
+
+  .effort-meter-bar {
+    transition: none;
+  }
+}
+
 /* Graph node cutouts so lane strokes do not show through the circles. */
 .git-history-item svg {
   display: block;

From 4b6ef2f80569f387cdaeb46d0b0426ce42da0da7 Mon Sep 17 00:00:00 2001
From: elijah <elijahchan2019@outlook.com>
Date: Tue, 15 Sep 2026 12:07:56 +0800
Subject: [PATCH 2/7] Render the effort meter as a continuous rail with
 quantized glow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The segmented bars read as a discrete stepper; a smooth track better
matches the mental model of "turn effort up". Tiers remain discrete —
the fill snaps to tick marks and only specks appear inside the filled
portion, brightening toward the right. The model's top tier takes the
accent with a trapped inner glow so the rail reads as luminescent.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/chrome/EffortMeter.test.ts |  18 ++++-
 src/chrome/EffortMeter.tsx     | 114 ++++++++++++++--------------
 src/chrome/ModelPicker.test.ts |   4 +-
 src/chrome/ModelPicker.tsx     |   6 +-
 src/index.css                  | 132 +++++++++++++++++++++++++++++----
 5 files changed, 198 insertions(+), 76 deletions(-)

diff --git a/src/chrome/EffortMeter.test.ts b/src/chrome/EffortMeter.test.ts
index cccbaa9c..0d147db1 100644
--- a/src/chrome/EffortMeter.test.ts
+++ b/src/chrome/EffortMeter.test.ts
@@ -133,12 +133,24 @@ describe("EffortMeter", () => {
     expect(onChange).toHaveBeenCalledWith("high");
   });
 
-  it("marks the peak bar as top tier only at the last tier", () => {
+  it("marks the fill as top tier only at the last tier", () => {
     renderMeter({ value: "xhigh" });
-    expect(container.querySelector("rect[data-top-tier]")).not.toBeNull();
+    expect(
+      container.querySelector(".effort-rail-fill[data-top-tier]"),
+    ).not.toBeNull();
+
+    renderMeter({ value: "medium" });
+    expect(
+      container.querySelector(".effort-rail-fill[data-top-tier]"),
+    ).toBeNull();
+  });
 
+  it("sizes the fill to the selected tier's fraction of the rail", () => {
     renderMeter({ value: "medium" });
-    expect(container.querySelector("rect[data-top-tier]")).toBeNull();
+    const fill = container.querySelector<HTMLElement>(".effort-rail-fill")!;
+    // "medium" is index 1 of 4 tiers → one third of the rail.
+    expect(fill.style.width).toContain("%");
+    expect(Number.parseFloat(fill.style.width)).toBeCloseTo(33.3, 1);
   });
 
   it("closes on Enter", () => {
diff --git a/src/chrome/EffortMeter.tsx b/src/chrome/EffortMeter.tsx
index 20ddc006..543dc08d 100644
--- a/src/chrome/EffortMeter.tsx
+++ b/src/chrome/EffortMeter.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type CSSProperties } from "react";
 import { RotateCcw } from "./icons";
 
 export type EffortTier = {
@@ -50,13 +50,24 @@ export function orderEffortOptions(
     }));
 }
 
-const MINI = { barWidth: 2, gap: 1.5, height: 10, radius: 0.5 };
-// preserveAspectRatio="none" stretches the full meter, so rx is mini-only —
-// a corner radius there would distort with the non-uniform scale.
-const FULL = { barWidth: 24, gap: 8, height: 22, radius: 1 };
+const SPECK_COUNT: Record<"mini" | "full", number> = { mini: 6, full: 18 };
 
-/** The bars only: an SVG sparkline of effort tiers, bottom-aligned. */
-export function EffortMeterBars({
+// Deterministic speck layout — stable across renders so the twinkle field
+// does not jump when the selection moves.
+function speckStyle(index: number): CSSProperties {
+  return {
+    left: `${(index * 37 + 11) % 90}%`,
+    top: `${((index * 53 + 7) % 60) + 20}%`,
+    animationDuration: `${1.2 + (index % 5) * 0.3}s`,
+    animationDelay: `${-index * 0.17}s`,
+  };
+}
+
+/**
+ * The rail only: a continuous track that fills to the selected tier, with a
+ * tick mark per tier and twinkling specks inside the fill.
+ */
+export function EffortMeterSpark({
   tiers,
   selectedIndex,
   size,
@@ -67,61 +78,55 @@ export function EffortMeterBars({
   size: "mini" | "full";
   className?: string;
 }) {
-  const { barWidth, gap, height, radius } = size === "mini" ? MINI : FULL;
   const n = tiers.length;
   if (n === 0) return null;
-  const width = n * barWidth + (n - 1) * gap;
+  const frac = n > 1 ? selectedIndex / (n - 1) : 1;
+  // A floor keeps a sliver visible at the lowest tier.
+  const widthPct = Math.max(frac * 100, 10);
+  const topTier =
+    selectedIndex === n - 1 ||
+    TOP_TIER_VALUES.has(tiers[selectedIndex]?.value ?? "");
   return (
-    <svg
-      viewBox={`0 0 ${width} ${height}`}
-      height={height}
-      preserveAspectRatio={size === "full" ? "none" : undefined}
+    <div
       aria-hidden="true"
-      className={
-        size === "full" ? `block w-full ${className ?? ""}` : className
-      }
+      data-effort-rail={size}
+      className={`effort-rail${size === "mini" ? " effort-rail-mini" : ""}${className ? ` ${className}` : ""}`}
     >
-      {tiers.map((tier, index) => {
-        const lit = index <= selectedIndex;
-        const peak = index === selectedIndex;
-        const topTier =
-          peak && (index === n - 1 || TOP_TIER_VALUES.has(tier.value));
-        const barHeight =
-          tier.kind === "auto"
-            ? height * 0.3
-            : n > 1
-              ? height * (0.35 + (0.65 * index) / (n - 1))
-              : height;
-        const hollow = tier.kind === "auto" || (tier.kind === "beyond" && !lit);
-        return (
-          <rect
-            key={tier.value}
-            className={`effort-meter-bar${peak && size === "full" ? " effort-meter-peak" : ""}`}
-            x={index * (barWidth + gap)}
-            y={height - barHeight}
-            width={barWidth}
-            height={barHeight}
-            rx={size === "mini" ? radius : 0}
-            fill={hollow ? "none" : "currentColor"}
-            stroke={hollow ? "currentColor" : undefined}
-            strokeWidth={hollow ? 1 : undefined}
-            strokeDasharray={
-              tier.kind === "beyond" && !lit ? "2 1.5" : undefined
-            }
-            vectorEffect="non-scaling-stroke"
-            opacity={lit ? 0.85 : 0.18}
-            data-top-tier={topTier ? "" : undefined}
-          />
-        );
-      })}
-    </svg>
+      <div
+        className="effort-rail-fill"
+        data-top-tier={topTier ? "" : undefined}
+        style={{ width: `${widthPct}%`, opacity: 0.6 + 0.4 * frac }}
+      >
+        {/* Specks sit on a layer stretched to track width inside the clipped
+            fill, so the fill edge reveals more of them as it moves right. */}
+        <div
+          className="effort-specks"
+          style={{
+            width: `${10000 / widthPct}%`,
+            opacity: 0.45 + 0.55 * frac,
+          }}
+        >
+          {Array.from({ length: SPECK_COUNT[size] }, (_, index) => (
+            <i key={index} className="effort-speck" style={speckStyle(index)} />
+          ))}
+        </div>
+      </div>
+      {tiers.map((tier, index) => (
+        <i
+          key={tier.value}
+          className="effort-rail-tick"
+          data-auto={tier.kind === "auto" ? "" : undefined}
+          style={{ left: `${n > 1 ? (index / (n - 1)) * 100 : 50}%` }}
+        />
+      ))}
+    </div>
   );
 }
 
 /**
- * Discrete effort control: a segmented meter that acts as a slider. Bars
- * fill up to the selected tier, the peak bar breathes, and the top tier
- * takes the accent color.
+ * Discrete effort control: a glowing rail that acts as a slider. The fill
+ * edge snaps between tier ticks, specks twinkle harder toward the top, and
+ * the top tier takes the accent color.
  */
 export function EffortMeter({
   tiers,
@@ -260,9 +265,10 @@ export function EffortMeter({
           dragging.current = false;
           setDragIndex(null);
         }}
+        data-dragging={dragIndex != null ? "" : undefined}
         className="mt-2 cursor-ew-resize rounded-sm outline-none focus-visible:ring-1 focus-visible:ring-accent"
       >
-        <EffortMeterBars
+        <EffortMeterSpark
           tiers={tiers}
           selectedIndex={shownIndex}
           size="full"
diff --git a/src/chrome/ModelPicker.test.ts b/src/chrome/ModelPicker.test.ts
index 1c533ee7..59ccc7fb 100644
--- a/src/chrome/ModelPicker.test.ts
+++ b/src/chrome/ModelPicker.test.ts
@@ -244,7 +244,9 @@ 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 effortSlider = container.querySelector<HTMLElement>(
       '[role="slider"][aria-label="Effort"]',
diff --git a/src/chrome/ModelPicker.tsx b/src/chrome/ModelPicker.tsx
index 6457216d..638110e6 100644
--- a/src/chrome/ModelPicker.tsx
+++ b/src/chrome/ModelPicker.tsx
@@ -41,7 +41,7 @@ import { LAYER } from "../lib/layers";
 import { HarnessIcon } from "./HarnessIcon";
 import {
   EffortMeter,
-  EffortMeterBars,
+  EffortMeterSpark,
   orderEffortOptions,
 } from "./EffortMeter";
 import { Popover } from "./Popover";
@@ -890,11 +890,11 @@ export function EffortPicker({
             : "bg-content/10 text-content hover:bg-content/15"
         }`}
       >
-        <EffortMeterBars
+        <EffortMeterSpark
           tiers={tiers}
           selectedIndex={selectedIndex}
           size="mini"
-          className="h-2.5 w-auto shrink-0"
+          className="shrink-0"
         />
         <span className="min-w-0 truncate text-[11px]">{valueLabel}</span>
         <ChevronDown
diff --git a/src/index.css b/src/index.css
index cadaf307..e053ef67 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1434,9 +1434,10 @@ html.theme-light .popover-backdrop {
   }
 }
 
-/* Effort meter: bars light up to the selected tier and the peak bar
-   breathes like the thinking line. The top tier takes the accent — the
-   default, or the user's when one is configured. */
+/* Effort meter: a continuous rail that brightens toward the selected tier.
+   Tick marks keep the discreteness visible and specks twinkle inside the
+   fill. The top tier takes the accent — the default, or the user's when one
+   is configured. */
 :root {
   --effort-accent: var(--color-accent);
 }
@@ -1445,8 +1446,99 @@ html.has-user-accent {
   --effort-accent: var(--user-accent-color);
 }
 
-.effort-meter-bar {
-  transition: opacity var(--motion-feedback-duration) var(--motion-ease-out);
+.effort-rail {
+  position: relative;
+  height: 20px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-content) 10%, transparent);
+  overflow: hidden;
+}
+
+.effort-rail-mini {
+  width: 34px;
+  height: 10px;
+}
+
+.effort-rail-fill {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  overflow: hidden;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-content) 30%, transparent),
+    color-mix(in srgb, var(--color-content) 75%, transparent)
+  );
+  transition: width var(--motion-feedback-duration) var(--motion-ease-out);
+}
+
+[data-dragging] .effort-rail-fill {
+  transition: none;
+}
+
+/* The fill's right edge is the knob: a brighter cap that breathes. */
+.effort-rail-fill::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 3px;
+  background: color-mix(in srgb, var(--color-content) 85%, transparent);
+  animation: effort-meter-breathe 1.8s ease-in-out infinite;
+}
+
+.effort-rail-mini .effort-rail-fill::after {
+  animation: none;
+}
+
+/* The track clips this to a glow trapped inside the rail. */
+.effort-rail-fill[data-top-tier] {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-content) 30%, transparent),
+    color-mix(in srgb, var(--effort-accent) 85%, transparent)
+  );
+  box-shadow: 0 0 10px color-mix(in srgb, var(--effort-accent) 60%, transparent);
+}
+
+.effort-rail-mini .effort-rail-fill[data-top-tier] {
+  box-shadow: none;
+}
+
+.effort-rail-tick {
+  position: absolute;
+  top: 50%;
+  width: 1.5px;
+  height: 30%;
+  transform: translate(-50%, -50%);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-content) 35%, transparent);
+}
+
+/* Auto sits at index 0; a hollow ring distinguishes it from a real level. */
+.effort-rail-tick[data-auto] {
+  width: 5px;
+  height: 5px;
+  background: transparent;
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-content) 40%, transparent);
+}
+
+.effort-specks {
+  position: absolute;
+  inset: 0;
+}
+
+.effort-speck {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  border-radius: 999px;
+  transform: translate(-50%, -50%);
+  background: var(--color-content);
+  opacity: 0;
+  animation: effort-speck 1.8s ease-in-out infinite;
 }
 
 @keyframes effort-meter-breathe {
@@ -1459,24 +1551,34 @@ html.has-user-accent {
   }
 }
 
-.effort-meter-peak {
-  animation: effort-meter-breathe 1.8s ease-in-out infinite;
+@keyframes effort-speck {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.8;
+  }
 }
 
-.effort-meter-bar[data-top-tier] {
-  fill: var(--effort-accent);
-  opacity: 1;
-  filter: drop-shadow(0 0 4px var(--effort-accent));
+/* The chip should not twinkle in the toolbar. */
+.effort-rail-mini .effort-speck {
+  animation: none;
+  opacity: 0.35;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .effort-meter-peak {
+  .effort-rail-fill {
+    transition: none;
+  }
+
+  .effort-rail-fill::after {
     animation: none;
-    opacity: 1;
   }
 
-  .effort-meter-bar {
-    transition: none;
+  .effort-speck {
+    animation: none;
+    opacity: 0.35;
   }
 }
 

From 091fb6b7dd3bb347a5032631533292ec3382a829 Mon Sep 17 00:00:00 2001
From: elijah <elijahchan2019@outlook.com>
Date: Tue, 15 Sep 2026 12:32:46 +0800
Subject: [PATCH 3/7] Rebuild the effort slider as a carved rail with a
 separate thumb

Combines two design reviews into a physical model: a recessed track
with inner shadow, a fill that travels to a detached white thumb
center, a fixed speck field revealed through a clip-path so particles
never stretch mid-transition, and an accent confined to a tint overlay
plus an unclipped halo at the final tier only. Dragging tracks the
pointer continuously while the value snaps to the nearest tier on
release; keyboard and wheel steps settle with the shared popover
curve. The chip keeps a static 3-speck mini rail and no longer clips
long tier names.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/chrome/EffortMeter.test.ts |  22 +-
 src/chrome/EffortMeter.tsx     | 449 ++++++++++++++++++++++++++-------
 src/chrome/ModelPicker.tsx     |   4 +-
 src/index.css                  | 416 +++++++++++++++++++++++++-----
 4 files changed, 727 insertions(+), 164 deletions(-)

diff --git a/src/chrome/EffortMeter.test.ts b/src/chrome/EffortMeter.test.ts
index 0d147db1..f9771835 100644
--- a/src/chrome/EffortMeter.test.ts
+++ b/src/chrome/EffortMeter.test.ts
@@ -120,37 +120,35 @@ describe("EffortMeter", () => {
   it("only offers reset away from the default", () => {
     const onChange = vi.fn();
     renderMeter({ value: "high", onChange });
-    expect(
-      container.querySelector('button[aria-label="Reset to default"]'),
-    ).toBeNull();
+    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).not.toBeNull();
+    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-rail-fill[data-top-tier]"),
-    ).not.toBeNull();
+    expect(container.querySelector("[data-top-tier]")).not.toBeNull();
 
     renderMeter({ value: "medium" });
-    expect(
-      container.querySelector(".effort-rail-fill[data-top-tier]"),
-    ).toBeNull();
+    expect(container.querySelector("[data-top-tier]")).toBeNull();
   });
 
   it("sizes the fill to the selected tier's fraction of the rail", () => {
     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(fill.style.width).toContain("%");
-    expect(Number.parseFloat(fill.style.width)).toBeCloseTo(33.3, 1);
+    expect(rail.style.getPropertyValue("--effort-frac")).toContain("0.333");
+    expect(fill.style.width).toContain("--effort-frac");
   });
 
   it("closes on Enter", () => {
diff --git a/src/chrome/EffortMeter.tsx b/src/chrome/EffortMeter.tsx
index 543dc08d..a7f1101a 100644
--- a/src/chrome/EffortMeter.tsx
+++ b/src/chrome/EffortMeter.tsx
@@ -25,7 +25,6 @@ const EFFORT_RANK: Record<string, number> = {
 };
 
 const BEYOND_VALUES = new Set(["ultracode", "ultrathink"]);
-const TOP_TIER_VALUES = new Set(["max", "ultracode", "ultrathink"]);
 
 export function orderEffortOptions(
   options: { value: string; label: string }[],
@@ -50,83 +49,330 @@ export function orderEffortOptions(
     }));
 }
 
-const SPECK_COUNT: Record<"mini" | "full", number> = { mini: 6, full: 18 };
+type SpeckSite = {
+  left: string;
+  top: string;
+  size: number;
+  baseOpacity: number;
+  peakOpacity?: number;
+  echoOpacity?: number;
+  duration?: number;
+  delay?: number;
+  twinkle?: "echo" | "no-echo";
+  drift?: 1 | 2;
+  driftDuration?: number;
+  glow?: boolean;
+};
+
+// Deterministic 26-site particle layout:
+// 5 in first third, 8 in middle third, 13 in final third.
+// 15 × 1px, 8 × 1.5px, 3 × 2px.
+// 16 steady sites (opacity 0.16 → 0.34), 10 twinkling (peak 0.42 → 0.78, echo 45%).
+// 4 small particles drift alternating over 4300, 5100, 5900, 6700ms.
+const FULL_SPECKS: SpeckSite[] = [
+  // First third (5 sites)
+  { left: "7%", top: "35%", size: 1, baseOpacity: 0.17 },
+  {
+    left: "14%",
+    top: "68%",
+    size: 1,
+    baseOpacity: 0.18,
+    peakOpacity: 0.47,
+    echoOpacity: 0.21,
+    twinkle: "echo",
+    duration: 2710,
+    delay: -950,
+  },
+  {
+    left: "19%",
+    top: "28%",
+    size: 1.5,
+    baseOpacity: 0.19,
+    drift: 1,
+    driftDuration: 4300,
+  },
+  { left: "23%", top: "72%", size: 1, baseOpacity: 0.2 },
+  {
+    left: "29%",
+    top: "42%",
+    size: 1,
+    baseOpacity: 0.21,
+    peakOpacity: 0.52,
+    echoOpacity: 0.23,
+    twinkle: "no-echo",
+    duration: 3670,
+    delay: -1420,
+  },
+
+  // Middle third (8 sites)
+  { left: "37%", top: "24%", size: 1.5, baseOpacity: 0.23 },
+  {
+    left: "41%",
+    top: "76%",
+    size: 1,
+    baseOpacity: 0.23,
+    peakOpacity: 0.57,
+    echoOpacity: 0.26,
+    twinkle: "echo",
+    duration: 2300,
+    delay: -820,
+  },
+  {
+    left: "45%",
+    top: "38%",
+    size: 1,
+    baseOpacity: 0.24,
+    drift: 2,
+    driftDuration: 5100,
+  },
+  { left: "48%", top: "65%", size: 1.5, baseOpacity: 0.25 },
+  {
+    left: "53%",
+    top: "26%",
+    size: 1,
+    baseOpacity: 0.26,
+    peakOpacity: 0.61,
+    echoOpacity: 0.27,
+    twinkle: "no-echo",
+    duration: 4190,
+    delay: -1980,
+  },
+  { left: "57%", top: "78%", size: 1.5, baseOpacity: 0.26 },
+  {
+    left: "61%",
+    top: "34%",
+    size: 1,
+    baseOpacity: 0.27,
+    peakOpacity: 0.64,
+    echoOpacity: 0.29,
+    twinkle: "echo",
+    duration: 3130,
+    delay: -1120,
+  },
+  { left: "64%", top: "62%", size: 1, baseOpacity: 0.28 },
+
+  // Final third (13 sites)
+  {
+    left: "69%",
+    top: "22%",
+    size: 1.5,
+    baseOpacity: 0.28,
+    drift: 1,
+    driftDuration: 5900,
+  },
+  {
+    left: "71%",
+    top: "74%",
+    size: 1,
+    baseOpacity: 0.29,
+    peakOpacity: 0.68,
+    echoOpacity: 0.31,
+    twinkle: "no-echo",
+    duration: 2710,
+    delay: -1640,
+  },
+  { left: "74%", top: "44%", size: 2, baseOpacity: 0.29, glow: true },
+  { left: "77%", top: "26%", size: 1, baseOpacity: 0.3 },
+  {
+    left: "80%",
+    top: "68%",
+    size: 1.5,
+    baseOpacity: 0.3,
+    peakOpacity: 0.71,
+    echoOpacity: 0.32,
+    twinkle: "echo",
+    duration: 3670,
+    delay: -890,
+  },
+  {
+    left: "82%",
+    top: "32%",
+    size: 1,
+    baseOpacity: 0.31,
+    drift: 2,
+    driftDuration: 6700,
+  },
+  {
+    left: "85%",
+    top: "76%",
+    size: 2,
+    baseOpacity: 0.31,
+    peakOpacity: 0.73,
+    echoOpacity: 0.33,
+    twinkle: "no-echo",
+    duration: 2300,
+    delay: -1350,
+    glow: true,
+  },
+  { left: "87%", top: "24%", size: 1, baseOpacity: 0.32 },
+  { left: "89%", top: "56%", size: 1.5, baseOpacity: 0.32 },
+  {
+    left: "91%",
+    top: "36%",
+    size: 1,
+    baseOpacity: 0.32,
+    peakOpacity: 0.75,
+    echoOpacity: 0.34,
+    twinkle: "echo",
+    duration: 4190,
+    delay: -2410,
+  },
+  { left: "93%", top: "72%", size: 2, baseOpacity: 0.33, glow: true },
+  {
+    left: "94%",
+    top: "28%",
+    size: 1.5,
+    baseOpacity: 0.33,
+    peakOpacity: 0.76,
+    echoOpacity: 0.34,
+    twinkle: "no-echo",
+    duration: 3130,
+    delay: -1790,
+  },
+  { left: "95%", top: "52%", size: 1, baseOpacity: 0.33 },
+];
 
-// Deterministic speck layout — stable across renders so the twinkle field
-// does not jump when the selection moves.
-function speckStyle(index: number): CSSProperties {
-  return {
-    left: `${(index * 37 + 11) % 90}%`,
-    top: `${((index * 53 + 7) % 60) + 20}%`,
-    animationDuration: `${1.2 + (index % 5) * 0.3}s`,
-    animationDelay: `${-index * 0.17}s`,
+function renderSpeck(site: SpeckSite, key: number) {
+  const outerStyle: CSSProperties = {
+    left: site.left,
+    top: site.top,
+    width: `${site.size}px`,
+    height: `${site.size}px`,
+    ...(site.driftDuration
+      ? ({ "--drift-duration": `${site.driftDuration}ms` } as CSSProperties)
+      : {}),
   };
+
+  const innerStyle = {
+    "--speck-base": site.baseOpacity,
+    ...(site.peakOpacity != null ? { "--speck-peak": site.peakOpacity } : {}),
+    ...(site.echoOpacity != null ? { "--speck-echo": site.echoOpacity } : {}),
+    ...(site.duration != null
+      ? { "--speck-duration": `${site.duration}ms` }
+      : {}),
+    ...(site.delay != null ? { "--speck-delay": `${site.delay}ms` } : {}),
+  } as CSSProperties;
+
+  return (
+    <i
+      key={key}
+      className="effort-speck"
+      data-glow={site.glow ? "" : undefined}
+      data-twinkle={site.twinkle}
+      data-drift={site.drift}
+      style={outerStyle}
+    >
+      <i className="effort-speck-inner" style={innerStyle} />
+    </i>
+  );
 }
 
 /**
  * The rail only: a continuous track that fills to the selected tier, with a
- * tick mark per tier and twinkling specks inside the fill.
+ * tick mark per tier, stationary speck field, separate thumb, and top-tier accent halo.
  */
 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 frac = n > 1 ? selectedIndex / (n - 1) : 1;
-  // A floor keeps a sliver visible at the lowest tier.
-  const widthPct = Math.max(frac * 100, 10);
-  const topTier =
-    selectedIndex === n - 1 ||
-    TOP_TIER_VALUES.has(tiers[selectedIndex]?.value ?? "");
+  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}%` } 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
-      aria-hidden="true"
-      data-effort-rail={size}
-      className={`effort-rail${size === "mini" ? " effort-rail-mini" : ""}${className ? ` ${className}` : ""}`}
-    >
+    <div className={`relative w-full${className ? ` ${className}` : ""}`}>
       <div
-        className="effort-rail-fill"
-        data-top-tier={topTier ? "" : undefined}
-        style={{ width: `${widthPct}%`, opacity: 0.6 + 0.4 * frac }}
+        className="effort-top-halo"
+        data-active={topTier ? "" : undefined}
+        aria-hidden="true"
+      />
+      <div
+        aria-hidden="true"
+        data-effort-rail="full"
+        className="effort-rail"
+        style={
+          {
+            "--effort-frac": `calc(12px + ${frac} * (100% - 24px))`,
+          } as CSSProperties
+        }
       >
-        {/* Specks sit on a layer stretched to track width inside the clipped
-            fill, so the fill edge reveals more of them as it moves right. */}
         <div
-          className="effort-specks"
-          style={{
-            width: `${10000 / widthPct}%`,
-            opacity: 0.45 + 0.55 * frac,
-          }}
+          className="effort-rail-fill"
+          style={{ width: "calc(var(--effort-frac) - 1px)" }}
         >
-          {Array.from({ length: SPECK_COUNT[size] }, (_, index) => (
-            <i key={index} className="effort-speck" style={speckStyle(index)} />
-          ))}
+          <div
+            className="effort-top-tint"
+            data-top-tier={topTier ? "" : undefined}
+          />
+        </div>
+        <div className="effort-specks">
+          {FULL_SPECKS.map((site, i) => renderSpeck(site, i))}
+        </div>
+        {tiers.map((tier, index) => (
+          <i
+            key={tier.value}
+            className="effort-rail-tick"
+            data-passed={index < selectedIndex ? "" : undefined}
+            data-auto={tier.kind === "auto" ? "" : undefined}
+            style={{
+              left: `calc(12px + ${n > 1 ? index / (n - 1) : 0.5} * (100% - 24px))`,
+            }}
+          />
+        ))}
+        <div className="effort-thumb">
+          <div className="effort-thumb-inner" />
         </div>
       </div>
-      {tiers.map((tier, index) => (
-        <i
-          key={tier.value}
-          className="effort-rail-tick"
-          data-auto={tier.kind === "auto" ? "" : undefined}
-          style={{ left: `${n > 1 ? (index / (n - 1)) * 100 : 50}%` }}
-        />
-      ))}
     </div>
   );
 }
 
 /**
- * Discrete effort control: a glowing rail that acts as a slider. The fill
- * edge snaps between tier ticks, specks twinkle harder toward the top, and
- * the top tier takes the accent color.
+ * 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,
@@ -143,31 +389,42 @@ export function EffortMeter({
   onChange: (value: string) => void;
   onClose: () => void;
 }) {
-  const track = useRef<HTMLDivElement>(null);
+  const sliderRef = useRef<HTMLDivElement>(null);
   const dragging = useRef(false);
-  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [dragFrac, setDragFrac] = useState<number | null>(null);
+  const [isPressed, setIsPressed] = useState(false);
+  const [isReleasing, setIsReleasing] = useState(false);
+  const releaseTimer = useRef<number | null>(null);
+
   const selectedIndex = Math.max(
     0,
     tiers.findIndex((tier) => tier.value === value),
   );
-  const shownIndex = dragIndex ?? selectedIndex;
+
+  const nearestDragIndex =
+    dragFrac != null ? Math.round(dragFrac * (tiers.length - 1)) : null;
+  const shownIndex = nearestDragIndex ?? selectedIndex;
   const shownTier = tiers[shownIndex];
+  const isDefault = value === defaultValue;
   const defaultLabel =
     tiers.find((tier) => tier.value === defaultValue)?.label ?? defaultValue;
 
   useEffect(() => {
-    track.current?.focus();
+    sliderRef.current?.focus();
+    return () => {
+      if (releaseTimer.current) window.clearTimeout(releaseTimer.current);
+    };
   }, []);
 
-  const indexAt = (clientX: number) => {
-    const el = track.current;
-    const rect = el?.getBoundingClientRect();
-    const ratio =
-      el && rect && rect.width > 0 ? (clientX - rect.left) / rect.width : 0;
-    return Math.min(
-      tiers.length - 1,
-      Math.max(0, Math.floor(ratio * tiers.length)),
-    );
+  const fracAt = (clientX: number) => {
+    const el = sliderRef.current;
+    if (!el) return 0;
+    const rail = el.querySelector<HTMLElement>(".effort-rail") ?? el;
+    const rect = rail.getBoundingClientRect();
+    const travel = rect.width - 24;
+    if (travel <= 0) return 0;
+    const x = clientX - rect.left;
+    return Math.min(1, Math.max(0, (x - 12) / travel));
   };
 
   const commit = (index: number) => {
@@ -181,7 +438,7 @@ export function EffortMeter({
   const stepRef = useRef((_delta: number) => {});
   stepRef.current = (delta) => commit(selectedIndex + delta);
   useEffect(() => {
-    const el = track.current;
+    const el = sliderRef.current;
     if (!el) return;
     const onWheel = (event: WheelEvent) => {
       event.preventDefault();
@@ -194,28 +451,28 @@ export function EffortMeter({
   if (!shownTier) return null;
 
   return (
-    <div className="px-3 py-2.5">
-      <div className="flex items-center justify-between gap-2">
-        <span className="min-w-0 truncate text-[13px] font-medium leading-4 text-content">
+    <div className="px-3.5 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>
-        {value !== defaultValue ? (
-          <button
-            type="button"
-            aria-label="Reset to default"
-            title={`Reset to ${defaultLabel}`}
-            onClick={() => onChange(defaultValue)}
-            className="grid size-5 shrink-0 place-items-center rounded text-content/50 hover:text-content"
-          >
-            <RotateCcw className="size-3.5" strokeWidth={1.75} />
-          </button>
-        ) : null}
+        <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="truncate text-[11px] leading-4 text-content/55">
+      <div className="mt-0.5 truncate text-[11px] font-normal leading-4 text-content/54">
         {modelName}
       </div>
       <div
-        ref={track}
+        ref={sliderRef}
         role="slider"
         tabIndex={0}
         aria-label="Effort"
@@ -246,35 +503,53 @@ export function EffortMeter({
         }}
         onPointerDown={(event) => {
           event.preventDefault();
-          track.current?.setPointerCapture(event.pointerId);
-          track.current?.focus();
+          sliderRef.current?.setPointerCapture(event.pointerId);
+          sliderRef.current?.focus();
           dragging.current = true;
-          setDragIndex(indexAt(event.clientX));
+          setIsPressed(true);
+          setIsReleasing(false);
+          if (releaseTimer.current) window.clearTimeout(releaseTimer.current);
+          setDragFrac(fracAt(event.clientX));
         }}
         onPointerMove={(event) => {
-          if (dragging.current) setDragIndex(indexAt(event.clientX));
+          if (dragging.current) {
+            setDragFrac(fracAt(event.clientX));
+          }
         }}
         onPointerUp={(event) => {
           if (!dragging.current) return;
           dragging.current = false;
-          const index = indexAt(event.clientX);
-          setDragIndex(null);
-          commit(index);
+          setIsPressed(false);
+          setIsReleasing(true);
+          const frac = fracAt(event.clientX);
+          const nearestIndex = Math.round(frac * (tiers.length - 1));
+          setDragFrac(null);
+          commit(nearestIndex);
+          if (releaseTimer.current) window.clearTimeout(releaseTimer.current);
+          releaseTimer.current = window.setTimeout(() => {
+            setIsReleasing(false);
+          }, 220);
         }}
         onPointerCancel={() => {
           dragging.current = false;
-          setDragIndex(null);
+          setIsPressed(false);
+          setIsReleasing(false);
+          setDragFrac(null);
         }}
-        data-dragging={dragIndex != null ? "" : undefined}
-        className="mt-2 cursor-ew-resize rounded-sm outline-none focus-visible:ring-1 focus-visible:ring-accent"
+        data-dragging={dragFrac != null ? "" : undefined}
+        data-pressed={isPressed ? "" : undefined}
+        data-releasing={isReleasing ? "" : undefined}
+        className="effort-slider relative mt-px flex h-10 w-full cursor-ew-resize items-center outline-none select-none"
+        style={{ touchAction: "none" }}
       >
         <EffortMeterSpark
           tiers={tiers}
           selectedIndex={shownIndex}
           size="full"
+          dragFrac={dragFrac}
         />
       </div>
-      <div className="mt-1.5 flex items-center justify-between font-mono text-[10px] leading-4 text-content/45">
+      <div className="-mt-px 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>
diff --git a/src/chrome/ModelPicker.tsx b/src/chrome/ModelPicker.tsx
index 638110e6..759223de 100644
--- a/src/chrome/ModelPicker.tsx
+++ b/src/chrome/ModelPicker.tsx
@@ -884,7 +884,7 @@ export function EffortPicker({
         aria-haspopup="dialog"
         onMouseDown={(event) => event.preventDefault()}
         onClick={() => (open ? dismiss(true) : setOpen(true))}
-        className={`flex h-6.5 max-w-28 items-center gap-1 rounded-md px-1.5 ${
+        className={`flex h-6.5 max-w-36 items-center gap-1 rounded-md px-1.5 ${
           open
             ? "bg-content/10 text-content"
             : "bg-content/10 text-content hover:bg-content/15"
@@ -907,7 +907,7 @@ export function EffortPicker({
         <Popover
           anchor={button}
           side="top"
-          width={232}
+          width={248}
           onDismiss={(reason) => dismiss(reason === "escape")}
           role="dialog"
           aria-label="Effort"
diff --git a/src/index.css b/src/index.css
index e053ef67..4c3ed191 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1434,10 +1434,8 @@ html.theme-light .popover-backdrop {
   }
 }
 
-/* Effort meter: a continuous rail that brightens toward the selected tier.
-   Tick marks keep the discreteness visible and specks twinkle inside the
-   fill. The top tier takes the accent — the default, or the user's when one
-   is configured. */
+/* Effort meter: recessed carved track with separate thumb, continuous drag,
+   discrete commit, deterministic quantum specks, and top-tier halo. */
 :root {
   --effort-accent: var(--color-accent);
 }
@@ -1446,139 +1444,431 @@ html.has-user-accent {
   --effort-accent: var(--user-accent-color);
 }
 
+[data-effort-picker] {
+  max-width: calc(100vw - 24px);
+  border-radius: 14px;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 5%),
+    0 0 0 1px rgb(255 255 255 / 8%),
+    0 4px 10px -4px rgb(0 0 0 / 24%),
+    0 16px 36px -12px rgb(0 0 0 / 40%);
+}
+
+html.theme-light [data-effort-picker] {
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 80%),
+    0 0 0 1px rgb(0 0 0 / 7%),
+    0 3px 8px -3px rgb(0 0 0 / 10%),
+    0 14px 30px -10px rgb(0 0 0 / 16%);
+}
+
+.effort-slider:focus-visible .effort-rail {
+  outline: 1px solid color-mix(in srgb, var(--color-content) 55%, transparent);
+  outline-offset: 3px;
+  border-radius: 11px;
+}
+
 .effort-rail {
   position: relative;
-  height: 20px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--color-content) 10%, transparent);
-  overflow: hidden;
+  height: 22px;
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--color-content) 7%, transparent);
+  box-shadow:
+    inset 0 1px 2px rgb(0 0 0 / 22%),
+    inset 0 0 0 1px color-mix(in srgb, var(--color-content) 5%, transparent),
+    0 1px 0 color-mix(in srgb, var(--color-content) 7%, transparent);
+}
+
+html.theme-light .effort-rail {
+  background: color-mix(in srgb, var(--color-content) 6%, transparent);
+  box-shadow:
+    inset 0 1px 2px rgb(0 0 0 / 11%),
+    inset 0 0 0 1px color-mix(in srgb, var(--color-content) 4%, transparent),
+    0 1px 0 rgb(255 255 255 / 65%);
 }
 
 .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;
-  border-radius: 999px;
+  top: 1px;
+  bottom: 1px;
+  left: 1px;
+  height: 20px;
+  border-radius: 10px;
   overflow: hidden;
+  background:
+    linear-gradient(
+      180deg,
+      rgb(255 255 255 / 12%) 0%,
+      rgb(255 255 255 / 3%) 38%,
+      transparent 58%,
+      rgb(0 0 0 / 8%) 100%
+    ),
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--color-content) 22%, transparent) 0%,
+      color-mix(in srgb, var(--color-content) 30%, transparent) 42%,
+      color-mix(in srgb, var(--color-content) 43%, transparent) 78%,
+      color-mix(in srgb, var(--color-content) 56%, transparent) 100%
+    );
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 13%),
+    inset 0 -1px 0 rgb(0 0 0 / 10%);
+  transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+html.theme-light .effort-rail-fill {
+  background:
+    linear-gradient(
+      180deg,
+      rgb(255 255 255 / 24%) 0%,
+      rgb(255 255 255 / 6%) 38%,
+      transparent 58%,
+      rgb(0 0 0 / 4%) 100%
+    ),
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--color-content) 14%, transparent) 0%,
+      color-mix(in srgb, var(--color-content) 19%, transparent) 42%,
+      color-mix(in srgb, var(--color-content) 27%, transparent) 78%,
+      color-mix(in srgb, var(--color-content) 35%, transparent) 100%
+    );
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 30%),
+    inset 0 -1px 0 rgb(0 0 0 / 6%);
+}
+
+.effort-rail-mini .effort-rail-fill {
+  inset: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 5px;
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--color-content) 30%, transparent),
-    color-mix(in srgb, var(--color-content) 75%, transparent)
+    color-mix(in srgb, var(--color-content) 25%, transparent) 0%,
+    color-mix(in srgb, var(--color-content) 48%, transparent) 100%
   );
-  transition: width var(--motion-feedback-duration) var(--motion-ease-out);
+  box-shadow: none;
+  transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-[data-dragging] .effort-rail-fill {
-  transition: none;
+.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%
+  );
 }
 
-/* The fill's right edge is the knob: a brighter cap that breathes. */
-.effort-rail-fill::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 3px;
-  background: color-mix(in srgb, var(--color-content) 85%, transparent);
-  animation: effort-meter-breathe 1.8s ease-in-out infinite;
+[data-dragging] .effort-rail-fill,
+[data-dragging] .effort-thumb,
+[data-dragging] .effort-specks {
+  transition: none !important;
 }
 
-.effort-rail-mini .effort-rail-fill::after {
-  animation: none;
+[data-releasing] .effort-rail-fill {
+  transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+[data-releasing] .effort-thumb {
+  transition: left 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+[data-releasing] .effort-specks {
+  transition: clip-path 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* The track clips this to a glow trapped inside the rail. */
-.effort-rail-fill[data-top-tier] {
+.effort-top-tint {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--color-content) 30%, transparent),
-    color-mix(in srgb, var(--effort-accent) 85%, transparent)
+    transparent 0%,
+    transparent 62%,
+    color-mix(in srgb, var(--effort-accent) 10%, transparent) 76%,
+    color-mix(in srgb, var(--effort-accent) 28%, transparent) 90%,
+    color-mix(in srgb, var(--effort-accent) 48%, transparent) 100%
+  );
+  box-shadow:
+    inset -1px 0 2px color-mix(in srgb, var(--effort-accent) 32%, transparent),
+    inset -7px 0 12px -6px
+      color-mix(in srgb, var(--effort-accent) 24%, transparent);
+  opacity: 0;
+  transition: opacity 160ms ease-out;
+}
+
+.effort-top-tint[data-top-tier] {
+  opacity: 1;
+}
+
+.effort-top-halo {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  width: 64px;
+  height: 30px;
+  transform: translateY(-50%);
+  pointer-events: none;
+  background: radial-gradient(
+    ellipse at 82% 50%,
+    color-mix(in srgb, var(--effort-accent) 12%, transparent) 0%,
+    color-mix(in srgb, var(--effort-accent) 5%, transparent) 42%,
+    transparent 74%
   );
-  box-shadow: 0 0 10px color-mix(in srgb, var(--effort-accent) 60%, transparent);
+  opacity: 0;
+  transition: opacity 160ms ease-out;
 }
 
-.effort-rail-mini .effort-rail-fill[data-top-tier] {
-  box-shadow: none;
+.effort-top-halo[data-active] {
+  opacity: 1;
+}
+
+html.theme-light .effort-top-halo {
+  background: radial-gradient(
+    ellipse at 82% 50%,
+    color-mix(in srgb, var(--effort-accent) 7%, transparent) 0%,
+    color-mix(in srgb, var(--effort-accent) 3%, transparent) 42%,
+    transparent 74%
+  );
+}
+
+.effort-thumb {
+  position: absolute;
+  top: 50%;
+  left: var(--effort-frac);
+  transform: translate(-50%, -50%);
+  width: 24px;
+  height: 24px;
+  pointer-events: none;
+  z-index: 2;
+  transition: left 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.effort-thumb-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: linear-gradient(180deg, #ffffff 0%, #eeeeef 100%);
+  box-shadow:
+    inset 0 0 0 1px rgb(255 255 255 / 70%),
+    0 0 0 1px rgb(0 0 0 / 9%),
+    0 1px 2px rgb(0 0 0 / 18%),
+    0 3px 8px rgb(0 0 0 / 14%);
+}
+
+html.theme-light .effort-thumb-inner {
+  box-shadow:
+    inset 0 0 0 1px rgb(255 255 255 / 70%),
+    0 0 0 1px rgb(0 0 0 / 9%),
+    0 1px 2px rgb(0 0 0 / 12%),
+    0 3px 8px rgb(0 0 0 / 10%);
+}
+
+[data-pressed] .effort-thumb-inner {
+  transform: scale(0.94);
+  transition: transform 80ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+[data-releasing] .effort-thumb-inner {
+  animation: effort-thumb-release 220ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes effort-thumb-release {
+  0% {
+    transform: scale(0.94);
+  }
+  55% {
+    transform: scale(1.025);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 
 .effort-rail-tick {
   position: absolute;
   top: 50%;
-  width: 1.5px;
-  height: 30%;
+  width: 1px;
+  height: 4px;
   transform: translate(-50%, -50%);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--color-content) 35%, transparent);
+  border-radius: 0.5px;
+  background: color-mix(in srgb, var(--color-content) 24%, transparent);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.effort-rail-tick[data-passed] {
+  background: color-mix(in srgb, var(--color-content) 36%, transparent);
 }
 
-/* Auto sits at index 0; a hollow ring distinguishes it from a real level. */
 .effort-rail-tick[data-auto] {
-  width: 5px;
-  height: 5px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
   background: transparent;
   box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-content) 40%, transparent);
+    color-mix(in srgb, var(--color-content) 38%, transparent);
 }
 
 .effort-specks {
   position: absolute;
   inset: 0;
+  pointer-events: none;
+  clip-path: inset(0 calc(100% - var(--effort-frac)) 0 0);
+  transition: clip-path 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.effort-rail-mini .effort-specks {
+  transition: none;
+}
+
+html.theme-light .effort-specks {
+  opacity: 0.85;
 }
 
 .effort-speck {
   position: absolute;
-  width: 2px;
-  height: 2px;
-  border-radius: 999px;
   transform: translate(-50%, -50%);
-  background: var(--color-content);
-  opacity: 0;
-  animation: effort-speck 1.8s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.effort-speck-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #ffffff;
+  opacity: var(--speck-base);
+}
+
+.effort-speck[data-glow] .effort-speck-inner {
+  box-shadow: 0 0 2px rgb(255 255 255 / 16%);
+}
+
+.effort-speck[data-twinkle="echo"] .effort-speck-inner {
+  animation: effort-twinkle var(--speck-duration)
+    cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  animation-delay: var(--speck-delay);
 }
 
-@keyframes effort-meter-breathe {
+.effort-speck[data-twinkle="no-echo"] .effort-speck-inner {
+  animation: effort-twinkle-no-echo var(--speck-duration)
+    cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  animation-delay: var(--speck-delay);
+}
+
+.effort-speck[data-drift="1"] {
+  animation: effort-drift-1 var(--drift-duration) ease-in-out infinite;
+}
+
+.effort-speck[data-drift="2"] {
+  animation: effort-drift-2 var(--drift-duration) ease-in-out infinite;
+}
+
+@keyframes effort-twinkle {
   0%,
+  57%,
   100% {
-    opacity: 0.7;
+    opacity: var(--speck-base);
+    transform: scale(0.85);
+  }
+  64% {
+    opacity: var(--speck-peak);
+    transform: scale(1);
+  }
+  72% {
+    opacity: var(--speck-base);
+    transform: scale(0.9);
+  }
+  77% {
+    opacity: var(--speck-echo);
+    transform: scale(0.95);
+  }
+  88% {
+    opacity: var(--speck-base);
+    transform: scale(0.85);
+  }
+}
+
+@keyframes effort-twinkle-no-echo {
+  0%,
+  57%,
+  100% {
+    opacity: var(--speck-base);
+    transform: scale(0.85);
+  }
+  64% {
+    opacity: var(--speck-peak);
+    transform: scale(1);
+  }
+  72%,
+  100% {
+    opacity: var(--speck-base);
+    transform: scale(0.85);
+  }
+}
+
+@keyframes effort-drift-1 {
+  0%,
+  100% {
+    transform: translate(-50%, -50%);
   }
   50% {
-    opacity: 1;
+    transform: translate(calc(-50% + 1.5px), calc(-50% - 0.75px));
   }
 }
 
-@keyframes effort-speck {
+@keyframes effort-drift-2 {
   0%,
   100% {
-    opacity: 0;
+    transform: translate(-50%, -50%);
   }
   50% {
-    opacity: 0.8;
+    transform: translate(calc(-50% - 1.5px), calc(-50% + 0.75px));
   }
 }
 
-/* The chip should not twinkle in the toolbar. */
 .effort-rail-mini .effort-speck {
+  width: 1px;
+  height: 1px;
+  border-radius: 50%;
+  background: #ffffff;
   animation: none;
-  opacity: 0.35;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .effort-rail-fill {
-    transition: none;
+  .effort-rail-fill,
+  .effort-thumb,
+  .effort-thumb-inner,
+  .effort-specks,
+  .effort-top-tint,
+  .effort-top-halo {
+    transition: none !important;
+    animation: none !important;
   }
 
-  .effort-rail-fill::after {
-    animation: none;
+  .effort-speck,
+  .effort-speck-inner {
+    animation: none !important;
   }
 
-  .effort-speck {
-    animation: none;
-    opacity: 0.35;
+  .effort-speck-inner {
+    transform: none !important;
+    opacity: var(--speck-base) !important;
   }
 }
 

From f4d701aee98593a96113b9a420b0e75e56920b32 Mon Sep 17 00:00:00 2001
From: elijah <elijahchan2019@outlook.com>
Date: Tue, 15 Sep 2026 12:54:44 +0800
Subject: [PATCH 4/7] Flatten the effort rail and tie particle motion to the
 thumb

The carved trough read as a bezel: drop the rail's inner shadows, rim,
and fill sheen for a flat material, and move the focus outline to the
interaction wrapper so it reads as focus, not finish. The thumb is a
flat white disc that dips 4% on press. While pressed or dragging, a
masked copy of the speck field brightens in a 36px band just behind the
thumb, so particles react to the hand instead of only looping on idle.
The external halo is gone; the top tier concentrates accent in the fill
tail and an aura on the thumb. Positional transitions unify at 180ms.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/chrome/EffortMeter.test.ts |  30 +++-
 src/chrome/EffortMeter.tsx     |  45 +++---
 src/index.css                  | 252 ++++++++++++++-------------------
 3 files changed, 157 insertions(+), 170 deletions(-)

diff --git a/src/chrome/EffortMeter.test.ts b/src/chrome/EffortMeter.test.ts
index f9771835..0a3c8a37 100644
--- a/src/chrome/EffortMeter.test.ts
+++ b/src/chrome/EffortMeter.test.ts
@@ -136,19 +136,45 @@ describe("EffortMeter", () => {
 
   it("marks the fill as top tier only at the last tier", () => {
     renderMeter({ value: "xhigh" });
-    expect(container.querySelector("[data-top-tier]")).not.toBeNull();
+    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("sizes the fill to the selected tier's fraction of the rail", () => {
-    renderMeter({ value: "medium" });
+    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).toContain("--effort-frac");
+
+    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("closes on Enter", () => {
diff --git a/src/chrome/EffortMeter.tsx b/src/chrome/EffortMeter.tsx
index a7f1101a..c9c7861e 100644
--- a/src/chrome/EffortMeter.tsx
+++ b/src/chrome/EffortMeter.tsx
@@ -232,7 +232,7 @@ const FULL_SPECKS: SpeckSite[] = [
   { left: "95%", top: "52%", size: 1, baseOpacity: 0.33 },
 ];
 
-function renderSpeck(site: SpeckSite, key: number) {
+function renderSpeck(site: SpeckSite, key: number, isHighlight = false) {
   const outerStyle: CSSProperties = {
     left: site.left,
     top: site.top,
@@ -243,6 +243,19 @@ function renderSpeck(site: SpeckSite, key: number) {
       : {}),
   };
 
+  if (isHighlight) {
+    return (
+      <i
+        key={key}
+        className="effort-speck"
+        data-drift={site.drift}
+        style={outerStyle}
+      >
+        <i className="effort-speck-inner" />
+      </i>
+    );
+  }
+
   const innerStyle = {
     "--speck-base": site.baseOpacity,
     ...(site.peakOpacity != null ? { "--speck-peak": site.peakOpacity } : {}),
@@ -269,7 +282,7 @@ function renderSpeck(site: SpeckSite, key: number) {
 
 /**
  * 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 halo.
+ * tick mark per tier, stationary speck field, separate thumb, and top-tier accent aura.
  */
 export function EffortMeterSpark({
   tiers,
@@ -323,11 +336,6 @@ export function EffortMeterSpark({
 
   return (
     <div className={`relative w-full${className ? ` ${className}` : ""}`}>
-      <div
-        className="effort-top-halo"
-        data-active={topTier ? "" : undefined}
-        aria-hidden="true"
-      />
       <div
         aria-hidden="true"
         data-effort-rail="full"
@@ -350,6 +358,9 @@ export function EffortMeterSpark({
         <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>
         {tiers.map((tier, index) => (
           <i
             key={tier.value}
@@ -393,8 +404,6 @@ export function EffortMeter({
   const dragging = useRef(false);
   const [dragFrac, setDragFrac] = useState<number | null>(null);
   const [isPressed, setIsPressed] = useState(false);
-  const [isReleasing, setIsReleasing] = useState(false);
-  const releaseTimer = useRef<number | null>(null);
 
   const selectedIndex = Math.max(
     0,
@@ -411,9 +420,6 @@ export function EffortMeter({
 
   useEffect(() => {
     sliderRef.current?.focus();
-    return () => {
-      if (releaseTimer.current) window.clearTimeout(releaseTimer.current);
-    };
   }, []);
 
   const fracAt = (clientX: number) => {
@@ -503,12 +509,10 @@ export function EffortMeter({
         }}
         onPointerDown={(event) => {
           event.preventDefault();
-          sliderRef.current?.setPointerCapture(event.pointerId);
+          sliderRef.current?.setPointerCapture?.(event.pointerId);
           sliderRef.current?.focus();
           dragging.current = true;
           setIsPressed(true);
-          setIsReleasing(false);
-          if (releaseTimer.current) window.clearTimeout(releaseTimer.current);
           setDragFrac(fracAt(event.clientX));
         }}
         onPointerMove={(event) => {
@@ -520,26 +524,19 @@ export function EffortMeter({
           if (!dragging.current) return;
           dragging.current = false;
           setIsPressed(false);
-          setIsReleasing(true);
           const frac = fracAt(event.clientX);
           const nearestIndex = Math.round(frac * (tiers.length - 1));
           setDragFrac(null);
           commit(nearestIndex);
-          if (releaseTimer.current) window.clearTimeout(releaseTimer.current);
-          releaseTimer.current = window.setTimeout(() => {
-            setIsReleasing(false);
-          }, 220);
         }}
         onPointerCancel={() => {
           dragging.current = false;
           setIsPressed(false);
-          setIsReleasing(false);
           setDragFrac(null);
         }}
         data-dragging={dragFrac != null ? "" : undefined}
         data-pressed={isPressed ? "" : undefined}
-        data-releasing={isReleasing ? "" : undefined}
-        className="effort-slider relative mt-px flex h-10 w-full cursor-ew-resize items-center outline-none select-none"
+        className="effort-slider relative mt-1.5 flex h-8 w-full items-center select-none"
         style={{ touchAction: "none" }}
       >
         <EffortMeterSpark
@@ -549,7 +546,7 @@ export function EffortMeter({
           dragFrac={dragFrac}
         />
       </div>
-      <div className="-mt-px flex items-center justify-between font-sans text-[10px] font-normal leading-[14px] text-content/48">
+      <div className="mt-0.5 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>
diff --git a/src/index.css b/src/index.css
index 4c3ed191..e5269854 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1434,8 +1434,8 @@ html.theme-light .popover-backdrop {
   }
 }
 
-/* Effort meter: recessed carved track with separate thumb, continuous drag,
-   discrete commit, deterministic quantum specks, and top-tier halo. */
+/* 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);
 }
@@ -1462,29 +1462,23 @@ html.theme-light [data-effort-picker] {
     0 14px 30px -10px rgb(0 0 0 / 16%);
 }
 
-.effort-slider:focus-visible .effort-rail {
-  outline: 1px solid color-mix(in srgb, var(--color-content) 55%, transparent);
-  outline-offset: 3px;
-  border-radius: 11px;
+.effort-slider:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--color-content) 65%, transparent);
+  outline-offset: 2px;
+  border-radius: 8px;
 }
 
 .effort-rail {
   position: relative;
   height: 22px;
   border-radius: 11px;
-  background: color-mix(in srgb, var(--color-content) 7%, transparent);
-  box-shadow:
-    inset 0 1px 2px rgb(0 0 0 / 22%),
-    inset 0 0 0 1px color-mix(in srgb, var(--color-content) 5%, transparent),
-    0 1px 0 color-mix(in srgb, var(--color-content) 7%, transparent);
+  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) 6%, transparent);
-  box-shadow:
-    inset 0 1px 2px rgb(0 0 0 / 11%),
-    inset 0 0 0 1px color-mix(in srgb, var(--color-content) 4%, transparent),
-    0 1px 0 rgb(255 255 255 / 65%);
+  background: color-mix(in srgb, var(--color-content) 8%, transparent);
+  box-shadow: none;
 }
 
 .effort-rail-mini {
@@ -1498,59 +1492,30 @@ html.theme-light .effort-rail {
 
 .effort-rail-fill {
   position: absolute;
-  top: 1px;
-  bottom: 1px;
-  left: 1px;
-  height: 20px;
-  border-radius: 10px;
+  inset: 0;
+  height: 100%;
+  border-radius: 11px;
   overflow: hidden;
-  background:
-    linear-gradient(
-      180deg,
-      rgb(255 255 255 / 12%) 0%,
-      rgb(255 255 255 / 3%) 38%,
-      transparent 58%,
-      rgb(0 0 0 / 8%) 100%
-    ),
-    linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--color-content) 22%, transparent) 0%,
-      color-mix(in srgb, var(--color-content) 30%, transparent) 42%,
-      color-mix(in srgb, var(--color-content) 43%, transparent) 78%,
-      color-mix(in srgb, var(--color-content) 56%, transparent) 100%
-    );
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 13%),
-    inset 0 -1px 0 rgb(0 0 0 / 10%);
-  transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-content) 20%, transparent) 0%,
+    color-mix(in srgb, var(--color-content) 34%, transparent) 100%
+  );
+  box-shadow: none;
+  transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 html.theme-light .effort-rail-fill {
-  background:
-    linear-gradient(
-      180deg,
-      rgb(255 255 255 / 24%) 0%,
-      rgb(255 255 255 / 6%) 38%,
-      transparent 58%,
-      rgb(0 0 0 / 4%) 100%
-    ),
-    linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--color-content) 14%, transparent) 0%,
-      color-mix(in srgb, var(--color-content) 19%, transparent) 42%,
-      color-mix(in srgb, var(--color-content) 27%, transparent) 78%,
-      color-mix(in srgb, var(--color-content) 35%, transparent) 100%
-    );
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 30%),
-    inset 0 -1px 0 rgb(0 0 0 / 6%);
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--color-content) 16%, transparent) 0%,
+    color-mix(in srgb, var(--color-content) 28%, transparent) 100%
+  );
+  box-shadow: none;
 }
 
 .effort-rail-mini .effort-rail-fill {
   inset: 0;
-  top: 0;
-  bottom: 0;
-  left: 0;
   height: 100%;
   border-radius: 5px;
   background: linear-gradient(
@@ -1559,7 +1524,7 @@ html.theme-light .effort-rail-fill {
     color-mix(in srgb, var(--color-content) 48%, transparent) 100%
   );
   box-shadow: none;
-  transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .effort-rail-mini .effort-rail-fill[data-top-tier] {
@@ -1573,22 +1538,11 @@ html.theme-light .effort-rail-fill {
 
 [data-dragging] .effort-rail-fill,
 [data-dragging] .effort-thumb,
-[data-dragging] .effort-specks {
+[data-dragging] .effort-specks,
+[data-dragging] .effort-specks-highlight {
   transition: none !important;
 }
 
-[data-releasing] .effort-rail-fill {
-  transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-[data-releasing] .effort-thumb {
-  transition: left 180ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-[data-releasing] .effort-specks {
-  transition: clip-path 180ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
 .effort-top-tint {
   position: absolute;
   inset: 0;
@@ -1598,14 +1552,10 @@ html.theme-light .effort-rail-fill {
     90deg,
     transparent 0%,
     transparent 62%,
-    color-mix(in srgb, var(--effort-accent) 10%, transparent) 76%,
-    color-mix(in srgb, var(--effort-accent) 28%, transparent) 90%,
-    color-mix(in srgb, var(--effort-accent) 48%, transparent) 100%
+    color-mix(in srgb, var(--effort-accent) 8%, transparent) 78%,
+    color-mix(in srgb, var(--effort-accent) 24%, transparent) 100%
   );
-  box-shadow:
-    inset -1px 0 2px color-mix(in srgb, var(--effort-accent) 32%, transparent),
-    inset -7px 0 12px -6px
-      color-mix(in srgb, var(--effort-accent) 24%, transparent);
+  box-shadow: none;
   opacity: 0;
   transition: opacity 160ms ease-out;
 }
@@ -1614,37 +1564,6 @@ html.theme-light .effort-rail-fill {
   opacity: 1;
 }
 
-.effort-top-halo {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  width: 64px;
-  height: 30px;
-  transform: translateY(-50%);
-  pointer-events: none;
-  background: radial-gradient(
-    ellipse at 82% 50%,
-    color-mix(in srgb, var(--effort-accent) 12%, transparent) 0%,
-    color-mix(in srgb, var(--effort-accent) 5%, transparent) 42%,
-    transparent 74%
-  );
-  opacity: 0;
-  transition: opacity 160ms ease-out;
-}
-
-.effort-top-halo[data-active] {
-  opacity: 1;
-}
-
-html.theme-light .effort-top-halo {
-  background: radial-gradient(
-    ellipse at 82% 50%,
-    color-mix(in srgb, var(--effort-accent) 7%, transparent) 0%,
-    color-mix(in srgb, var(--effort-accent) 3%, transparent) 42%,
-    transparent 74%
-  );
-}
-
 .effort-thumb {
   position: absolute;
   top: 50%;
@@ -1654,7 +1573,7 @@ html.theme-light .effort-top-halo {
   height: 24px;
   pointer-events: none;
   z-index: 2;
-  transition: left 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition: left 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .effort-thumb-inner {
@@ -1662,57 +1581,50 @@ html.theme-light .effort-top-halo {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background: linear-gradient(180deg, #ffffff 0%, #eeeeef 100%);
+  background: #ffffff;
   box-shadow:
-    inset 0 0 0 1px rgb(255 255 255 / 70%),
-    0 0 0 1px rgb(0 0 0 / 9%),
-    0 1px 2px rgb(0 0 0 / 18%),
-    0 3px 8px rgb(0 0 0 / 14%);
+    0 0 0 1px rgb(0 0 0 / 16%),
+    0 1px 3px rgb(0 0 0 / 24%);
+  transform: scale(1);
+  transition:
+    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
+    box-shadow 160ms ease-out;
 }
 
 html.theme-light .effort-thumb-inner {
+  background: #ffffff;
   box-shadow:
-    inset 0 0 0 1px rgb(255 255 255 / 70%),
-    0 0 0 1px rgb(0 0 0 / 9%),
-    0 1px 2px rgb(0 0 0 / 12%),
-    0 3px 8px rgb(0 0 0 / 10%);
+    0 0 0 1px rgb(0 0 0 / 8%),
+    0 1px 3px rgb(0 0 0 / 12%);
 }
 
 [data-pressed] .effort-thumb-inner {
-  transform: scale(0.94);
+  transform: scale(0.96);
   transition: transform 80ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-[data-releasing] .effort-thumb-inner {
-  animation: effort-thumb-release 220ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@keyframes effort-thumb-release {
-  0% {
-    transform: scale(0.94);
-  }
-  55% {
-    transform: scale(1.025);
-  }
-  100% {
-    transform: scale(1);
-  }
+.effort-slider:has([data-top-tier]) .effort-thumb-inner,
+.effort-rail:has([data-top-tier]) .effort-thumb-inner {
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--effort-accent) 50%, transparent),
+    0 0 10px -1px color-mix(in srgb, var(--effort-accent) 45%, transparent),
+    0 1px 3px rgb(0 0 0 / 24%);
 }
 
 .effort-rail-tick {
   position: absolute;
   top: 50%;
   width: 1px;
-  height: 4px;
+  height: 6px;
   transform: translate(-50%, -50%);
   border-radius: 0.5px;
-  background: color-mix(in srgb, var(--color-content) 24%, transparent);
+  background: color-mix(in srgb, var(--color-content) 22%, transparent);
   pointer-events: none;
   z-index: 1;
 }
 
 .effort-rail-tick[data-passed] {
-  background: color-mix(in srgb, var(--color-content) 36%, transparent);
+  background: color-mix(in srgb, var(--color-content) 32%, transparent);
 }
 
 .effort-rail-tick[data-auto] {
@@ -1729,7 +1641,7 @@ html.theme-light .effort-thumb-inner {
   inset: 0;
   pointer-events: none;
   clip-path: inset(0 calc(100% - var(--effort-frac)) 0 0);
-  transition: clip-path 200ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition: clip-path 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .effort-rail-mini .effort-specks {
@@ -1740,6 +1652,51 @@ html.theme-light .effort-specks {
   opacity: 0.85;
 }
 
+.effort-specks-highlight {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  clip-path: inset(0 calc(100% - var(--effort-frac)) 0 0);
+  opacity: 0;
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    transparent,
+    #000 67%,
+    transparent
+  );
+  -webkit-mask-size: 36px 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: calc(var(--effort-frac) - 40px) 0;
+  mask-image: linear-gradient(90deg, transparent, #000 67%, transparent);
+  mask-size: 36px 100%;
+  mask-repeat: no-repeat;
+  mask-position: calc(var(--effort-frac) - 40px) 0;
+  transition:
+    clip-path 180ms cubic-bezier(0.16, 1, 0.3, 1),
+    mask-position 180ms cubic-bezier(0.16, 1, 0.3, 1),
+    -webkit-mask-position 180ms cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 180ms ease-out;
+}
+
+[data-pressed] .effort-specks-highlight,
+[data-dragging] .effort-specks-highlight {
+  opacity: 1;
+  transition:
+    clip-path 180ms cubic-bezier(0.16, 1, 0.3, 1),
+    mask-position 180ms cubic-bezier(0.16, 1, 0.3, 1),
+    -webkit-mask-position 180ms cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 80ms ease-in;
+}
+
+.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%);
@@ -1855,12 +1812,19 @@ html.theme-light .effort-specks {
   .effort-thumb,
   .effort-thumb-inner,
   .effort-specks,
-  .effort-top-tint,
-  .effort-top-halo {
+  .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;

From 1fb4d24af3773183ef7c2465da02d386b086c52a Mon Sep 17 00:00:00 2001
From: elijah <elijahchan2019@outlook.com>
Date: Tue, 15 Sep 2026 13:31:51 +0800
Subject: [PATCH 5/7] Intensify the quantum field and restore the native
 popover frame

- Drop the custom 14px radius/shadow overrides on the effort popover so
  it shares the standard rounded-xl frame instead of double radii
- Replace the slider's focus outline with a faint keyline on the thumb
- Widen the speck field to 34 sites reaching within ~2% of the rail
  ends, ramp its opacity with effort level, and lift the fill gradient
  toward a brighter leading edge
- Let the fill reach the thumb center exactly

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/chrome/EffortMeter.tsx | 52 +++++++++++++++++++++++++++++++-------
 src/index.css              | 44 +++++++++++++++++---------------
 2 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/src/chrome/EffortMeter.tsx b/src/chrome/EffortMeter.tsx
index c9c7861e..2313d83d 100644
--- a/src/chrome/EffortMeter.tsx
+++ b/src/chrome/EffortMeter.tsx
@@ -64,13 +64,16 @@ type SpeckSite = {
   glow?: boolean;
 };
 
-// Deterministic 26-site particle layout:
-// 5 in first third, 8 in middle third, 13 in final third.
-// 15 × 1px, 8 × 1.5px, 3 × 2px.
-// 16 steady sites (opacity 0.16 → 0.34), 10 twinkling (peak 0.42 → 0.78, echo 45%).
+// Deterministic 34-site particle layout:
+// 8 in first third, 11 in middle third, 15 in final third — density and
+// brightness both lean right, and the field reaches within ~2% of the ends.
+// 20 × 1px, 10 × 1.5px, 4 × 2px.
+// 21 steady sites (opacity 0.16 → 0.34), 13 twinkling (peak 0.42 → 0.8, echo 45%).
 // 4 small particles drift alternating over 4300, 5100, 5900, 6700ms.
 const FULL_SPECKS: SpeckSite[] = [
-  // First third (5 sites)
+  // First third (8 sites)
+  { left: "2.5%", top: "58%", size: 1, baseOpacity: 0.16 },
+  { left: "5%", top: "30%", size: 1, baseOpacity: 0.16 },
   { left: "7%", top: "35%", size: 1, baseOpacity: 0.17 },
   {
     left: "14%",
@@ -104,7 +107,8 @@ const FULL_SPECKS: SpeckSite[] = [
     delay: -1420,
   },
 
-  // Middle third (8 sites)
+  // Middle third (11 sites)
+  { left: "34%", top: "58%", size: 1, baseOpacity: 0.22 },
   { left: "37%", top: "24%", size: 1.5, baseOpacity: 0.23 },
   {
     left: "41%",
@@ -150,8 +154,9 @@ const FULL_SPECKS: SpeckSite[] = [
     delay: -1120,
   },
   { left: "64%", top: "62%", size: 1, baseOpacity: 0.28 },
+  { left: "66%", top: "50%", size: 1, baseOpacity: 0.28 },
 
-  // Final third (13 sites)
+  // Final third (15 sites)
   {
     left: "69%",
     top: "22%",
@@ -173,6 +178,17 @@ const FULL_SPECKS: SpeckSite[] = [
   },
   { left: "74%", top: "44%", size: 2, baseOpacity: 0.29, glow: true },
   { left: "77%", top: "26%", size: 1, baseOpacity: 0.3 },
+  {
+    left: "79%",
+    top: "78%",
+    size: 1,
+    baseOpacity: 0.3,
+    peakOpacity: 0.7,
+    echoOpacity: 0.32,
+    twinkle: "no-echo",
+    duration: 2710,
+    delay: -2050,
+  },
   {
     left: "80%",
     top: "68%",
@@ -230,6 +246,18 @@ const FULL_SPECKS: SpeckSite[] = [
     delay: -1790,
   },
   { left: "95%", top: "52%", size: 1, baseOpacity: 0.33 },
+  {
+    left: "96.5%",
+    top: "40%",
+    size: 1,
+    baseOpacity: 0.34,
+    peakOpacity: 0.8,
+    echoOpacity: 0.36,
+    twinkle: "echo",
+    duration: 2300,
+    delay: -610,
+  },
+  { left: "98%", top: "64%", size: 1, baseOpacity: 0.34 },
 ];
 
 function renderSpeck(site: SpeckSite, key: number, isHighlight = false) {
@@ -309,7 +337,12 @@ export function EffortMeterSpark({
         aria-hidden="true"
         data-effort-rail="mini"
         className={`effort-rail effort-rail-mini${className ? ` ${className}` : ""}`}
-        style={{ "--effort-frac": `${frac * 100}%` } as CSSProperties}
+        style={
+          {
+            "--effort-frac": `${frac * 100}%`,
+            "--effort-t": frac,
+          } as CSSProperties
+        }
       >
         <div
           className="effort-rail-fill"
@@ -343,12 +376,13 @@ export function EffortMeterSpark({
         style={
           {
             "--effort-frac": `calc(12px + ${frac} * (100% - 24px))`,
+            "--effort-t": frac,
           } as CSSProperties
         }
       >
         <div
           className="effort-rail-fill"
-          style={{ width: "calc(var(--effort-frac) - 1px)" }}
+          style={{ width: "var(--effort-frac)" }}
         >
           <div
             className="effort-top-tint"
diff --git a/src/index.css b/src/index.css
index e5269854..10414290 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1446,26 +1446,22 @@ html.has-user-accent {
 
 [data-effort-picker] {
   max-width: calc(100vw - 24px);
-  border-radius: 14px;
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 5%),
-    0 0 0 1px rgb(255 255 255 / 8%),
-    0 4px 10px -4px rgb(0 0 0 / 24%),
-    0 16px 36px -12px rgb(0 0 0 / 40%);
 }
 
-html.theme-light [data-effort-picker] {
+/* 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:
-    inset 0 1px 0 rgb(255 255 255 / 80%),
-    0 0 0 1px rgb(0 0 0 / 7%),
-    0 3px 8px -3px rgb(0 0 0 / 10%),
-    0 14px 30px -10px rgb(0 0 0 / 16%);
+    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%);
 }
 
-.effort-slider:focus-visible {
-  outline: 2px solid color-mix(in srgb, var(--color-content) 65%, transparent);
-  outline-offset: 2px;
-  border-radius: 8px;
+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-rail {
@@ -1496,10 +1492,13 @@ html.theme-light .effort-rail {
   height: 100%;
   border-radius: 11px;
   overflow: hidden;
+  /* Brightness climbs toward the leading edge: a third stop keeps the
+     gradient lifting instead of plateauing mid-rail. */
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--color-content) 20%, transparent) 0%,
-    color-mix(in srgb, var(--color-content) 34%, transparent) 100%
+    color-mix(in srgb, var(--color-content) 22%, transparent) 0%,
+    color-mix(in srgb, var(--color-content) 38%, transparent) 55%,
+    color-mix(in srgb, var(--color-content) 55%, transparent) 100%
   );
   box-shadow: none;
   transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -1509,7 +1508,8 @@ html.theme-light .effort-rail-fill {
   background: linear-gradient(
     90deg,
     color-mix(in srgb, var(--color-content) 16%, transparent) 0%,
-    color-mix(in srgb, var(--color-content) 28%, transparent) 100%
+    color-mix(in srgb, var(--color-content) 26%, transparent) 55%,
+    color-mix(in srgb, var(--color-content) 38%, transparent) 100%
   );
   box-shadow: none;
 }
@@ -1641,7 +1641,11 @@ html.theme-light .effort-thumb-inner {
   inset: 0;
   pointer-events: none;
   clip-path: inset(0 calc(100% - var(--effort-frac)) 0 0);
-  transition: clip-path 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  /* The field itself intensifies with effort: dim embers at low, hot at high. */
+  opacity: calc(0.62 + 0.38 * var(--effort-t, 0));
+  transition:
+    clip-path 180ms cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 180ms ease-out;
 }
 
 .effort-rail-mini .effort-specks {
@@ -1649,7 +1653,7 @@ html.theme-light .effort-thumb-inner {
 }
 
 html.theme-light .effort-specks {
-  opacity: 0.85;
+  opacity: calc((0.62 + 0.38 * var(--effort-t, 0)) * 0.85);
 }
 
 .effort-specks-highlight {

From bb52b1be8808cb13ed80db742e2738111d884bb1 Mon Sep 17 00:00:00 2001
From: elijah <elijahchan2019@outlook.com>
Date: Tue, 15 Sep 2026 13:51:22 +0800
Subject: [PATCH 6/7] Refine slider pickup, settle, and particle response for
 premium drag feel

- Preserve the pointer's grab offset inside the thumb so pickup no longer jumps
- Drive thumb/fill/clip/highlight from one rAF-sampled position and settle
  via a distance-aware 110-190ms ease instead of a fixed CSS transition
- Enlarge the thumb to 27px, fix the gradient full-width and reveal it by
  clip-path so the leading edge stays bright at every tier
- Demote ticks to 1x3px landmarks masked away near the thumb
- Make the speck highlight a velocity-scaled trailing glow, deform the
  thumb subpixel under drag, and rebalance the field to 30 calmer sites
- Confine the top-tier accent to a 28px tail tint and a soft thumb aura
- Suppress WKWebView's platform focus ring; keyboard focus keeps a thumb
  keyline that wins the cascade over the top-tier aura

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/chrome/EffortMeter.test.ts | 140 ++++++++-
 src/chrome/EffortMeter.tsx     | 558 ++++++++++++++++-----------------
 src/index.css                  | 281 ++++++++---------
 3 files changed, 528 insertions(+), 451 deletions(-)

diff --git a/src/chrome/EffortMeter.test.ts b/src/chrome/EffortMeter.test.ts
index 0a3c8a37..038791b5 100644
--- a/src/chrome/EffortMeter.test.ts
+++ b/src/chrome/EffortMeter.test.ts
@@ -145,13 +145,17 @@ describe("EffortMeter", () => {
     expect(container.querySelector("[data-top-tier]")).toBeNull();
   });
 
-  it("sizes the fill to the selected tier's fraction of the rail", () => {
+  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).toContain("--effort-frac");
+    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);
@@ -177,6 +181,138 @@ describe("EffortMeter", () => {
     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 });
diff --git a/src/chrome/EffortMeter.tsx b/src/chrome/EffortMeter.tsx
index 2313d83d..1a8b60ed 100644
--- a/src/chrome/EffortMeter.tsx
+++ b/src/chrome/EffortMeter.tsx
@@ -1,4 +1,10 @@
-import { useEffect, useRef, useState, type CSSProperties } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
 import { RotateCcw } from "./icons";
 
 export type EffortTier = {
@@ -49,261 +55,103 @@ export function orderEffortOptions(
     }));
 }
 
-type SpeckSite = {
-  left: string;
-  top: string;
-  size: number;
-  baseOpacity: number;
-  peakOpacity?: number;
-  echoOpacity?: number;
-  duration?: number;
-  delay?: number;
-  twinkle?: "echo" | "no-echo";
-  drift?: 1 | 2;
-  driftDuration?: number;
-  glow?: boolean;
-};
-
-// Deterministic 34-site particle layout:
-// 8 in first third, 11 in middle third, 15 in final third — density and
-// brightness both lean right, and the field reaches within ~2% of the ends.
-// 20 × 1px, 10 × 1.5px, 4 × 2px.
-// 21 steady sites (opacity 0.16 → 0.34), 13 twinkling (peak 0.42 → 0.8, echo 45%).
-// 4 small particles drift alternating over 4300, 5100, 5900, 6700ms.
-const FULL_SPECKS: SpeckSite[] = [
-  // First third (8 sites)
-  { left: "2.5%", top: "58%", size: 1, baseOpacity: 0.16 },
-  { left: "5%", top: "30%", size: 1, baseOpacity: 0.16 },
-  { left: "7%", top: "35%", size: 1, baseOpacity: 0.17 },
-  {
-    left: "14%",
-    top: "68%",
-    size: 1,
-    baseOpacity: 0.18,
-    peakOpacity: 0.47,
-    echoOpacity: 0.21,
-    twinkle: "echo",
-    duration: 2710,
-    delay: -950,
-  },
-  {
-    left: "19%",
-    top: "28%",
-    size: 1.5,
-    baseOpacity: 0.19,
-    drift: 1,
-    driftDuration: 4300,
-  },
-  { left: "23%", top: "72%", size: 1, baseOpacity: 0.2 },
-  {
-    left: "29%",
-    top: "42%",
-    size: 1,
-    baseOpacity: 0.21,
-    peakOpacity: 0.52,
-    echoOpacity: 0.23,
-    twinkle: "no-echo",
-    duration: 3670,
-    delay: -1420,
-  },
-
-  // Middle third (11 sites)
-  { left: "34%", top: "58%", size: 1, baseOpacity: 0.22 },
-  { left: "37%", top: "24%", size: 1.5, baseOpacity: 0.23 },
-  {
-    left: "41%",
-    top: "76%",
-    size: 1,
-    baseOpacity: 0.23,
-    peakOpacity: 0.57,
-    echoOpacity: 0.26,
-    twinkle: "echo",
-    duration: 2300,
-    delay: -820,
-  },
-  {
-    left: "45%",
-    top: "38%",
-    size: 1,
-    baseOpacity: 0.24,
-    drift: 2,
-    driftDuration: 5100,
-  },
-  { left: "48%", top: "65%", size: 1.5, baseOpacity: 0.25 },
-  {
-    left: "53%",
-    top: "26%",
-    size: 1,
-    baseOpacity: 0.26,
-    peakOpacity: 0.61,
-    echoOpacity: 0.27,
-    twinkle: "no-echo",
-    duration: 4190,
-    delay: -1980,
-  },
-  { left: "57%", top: "78%", size: 1.5, baseOpacity: 0.26 },
-  {
-    left: "61%",
-    top: "34%",
-    size: 1,
-    baseOpacity: 0.27,
-    peakOpacity: 0.64,
-    echoOpacity: 0.29,
-    twinkle: "echo",
-    duration: 3130,
-    delay: -1120,
-  },
-  { left: "64%", top: "62%", size: 1, baseOpacity: 0.28 },
-  { left: "66%", top: "50%", size: 1, baseOpacity: 0.28 },
+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));
 
-  // Final third (15 sites)
-  {
-    left: "69%",
-    top: "22%",
-    size: 1.5,
-    baseOpacity: 0.28,
-    drift: 1,
-    driftDuration: 5900,
-  },
-  {
-    left: "71%",
-    top: "74%",
-    size: 1,
-    baseOpacity: 0.29,
-    peakOpacity: 0.68,
-    echoOpacity: 0.31,
-    twinkle: "no-echo",
-    duration: 2710,
-    delay: -1640,
-  },
-  { left: "74%", top: "44%", size: 2, baseOpacity: 0.29, glow: true },
-  { left: "77%", top: "26%", size: 1, baseOpacity: 0.3 },
-  {
-    left: "79%",
-    top: "78%",
-    size: 1,
-    baseOpacity: 0.3,
-    peakOpacity: 0.7,
-    echoOpacity: 0.32,
-    twinkle: "no-echo",
-    duration: 2710,
-    delay: -2050,
-  },
-  {
-    left: "80%",
-    top: "68%",
-    size: 1.5,
-    baseOpacity: 0.3,
-    peakOpacity: 0.71,
-    echoOpacity: 0.32,
-    twinkle: "echo",
-    duration: 3670,
-    delay: -890,
-  },
-  {
-    left: "82%",
-    top: "32%",
-    size: 1,
-    baseOpacity: 0.31,
-    drift: 2,
-    driftDuration: 6700,
-  },
-  {
-    left: "85%",
-    top: "76%",
-    size: 2,
-    baseOpacity: 0.31,
-    peakOpacity: 0.73,
-    echoOpacity: 0.33,
-    twinkle: "no-echo",
-    duration: 2300,
-    delay: -1350,
-    glow: true,
-  },
-  { left: "87%", top: "24%", size: 1, baseOpacity: 0.32 },
-  { left: "89%", top: "56%", size: 1.5, baseOpacity: 0.32 },
-  {
-    left: "91%",
-    top: "36%",
-    size: 1,
-    baseOpacity: 0.32,
-    peakOpacity: 0.75,
-    echoOpacity: 0.34,
-    twinkle: "echo",
-    duration: 4190,
-    delay: -2410,
-  },
-  { left: "93%", top: "72%", size: 2, baseOpacity: 0.33, glow: true },
-  {
-    left: "94%",
-    top: "28%",
-    size: 1.5,
-    baseOpacity: 0.33,
-    peakOpacity: 0.76,
-    echoOpacity: 0.34,
-    twinkle: "no-echo",
-    duration: 3130,
-    delay: -1790,
-  },
-  { left: "95%", top: "52%", size: 1, baseOpacity: 0.33 },
-  {
-    left: "96.5%",
-    top: "40%",
-    size: 1,
-    baseOpacity: 0.34,
-    peakOpacity: 0.8,
-    echoOpacity: 0.36,
-    twinkle: "echo",
-    duration: 2300,
-    delay: -610,
-  },
-  { left: "98%", top: "64%", size: 1, baseOpacity: 0.34 },
-];
-
-function renderSpeck(site: SpeckSite, key: number, isHighlight = false) {
-  const outerStyle: CSSProperties = {
-    left: site.left,
-    top: site.top,
-    width: `${site.size}px`,
-    height: `${site.size}px`,
-    ...(site.driftDuration
-      ? ({ "--drift-duration": `${site.driftDuration}ms` } as CSSProperties)
-      : {}),
-  };
-
-  if (isHighlight) {
-    return (
-      <i
-        key={key}
-        className="effort-speck"
-        data-drift={site.drift}
-        style={outerStyle}
-      >
-        <i className="effort-speck-inner" />
-      </i>
-    );
+// 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);
+}
 
-  const innerStyle = {
-    "--speck-base": site.baseOpacity,
-    ...(site.peakOpacity != null ? { "--speck-peak": site.peakOpacity } : {}),
-    ...(site.echoOpacity != null ? { "--speck-echo": site.echoOpacity } : {}),
-    ...(site.duration != null
-      ? { "--speck-duration": `${site.duration}ms` }
-      : {}),
-    ...(site.delay != null ? { "--speck-delay": `${site.delay}ms` } : {}),
-  } as CSSProperties;
+// 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.glow ? "" : undefined}
-      data-twinkle={site.twinkle}
-      data-drift={site.drift}
-      style={outerStyle}
+      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={innerStyle} />
+      <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>
   );
 }
@@ -375,15 +223,13 @@ export function EffortMeterSpark({
         className="effort-rail"
         style={
           {
-            "--effort-frac": `calc(12px + ${frac} * (100% - 24px))`,
+            "--effort-frac": position(frac),
+            "--effort-thumb": `${THUMB}px`,
             "--effort-t": frac,
           } as CSSProperties
         }
       >
-        <div
-          className="effort-rail-fill"
-          style={{ width: "var(--effort-frac)" }}
-        >
+        <div className="effort-rail-fill">
           <div
             className="effort-top-tint"
             data-top-tier={topTier ? "" : undefined}
@@ -395,17 +241,19 @@ export function EffortMeterSpark({
         <div className="effort-specks-highlight" aria-hidden="true">
           {FULL_SPECKS.map((site, i) => renderSpeck(site, i, true))}
         </div>
-        {tiers.map((tier, index) => (
-          <i
-            key={tier.value}
-            className="effort-rail-tick"
-            data-passed={index < selectedIndex ? "" : undefined}
-            data-auto={tier.kind === "auto" ? "" : undefined}
-            style={{
-              left: `calc(12px + ${n > 1 ? index / (n - 1) : 0.5} * (100% - 24px))`,
-            }}
-          />
-        ))}
+        <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>
@@ -436,17 +284,75 @@ export function EffortMeter({
 }) {
   const sliderRef = useRef<HTMLDivElement>(null);
   const dragging = useRef(false);
-  const [dragFrac, setDragFrac] = useState<number | null>(null);
+  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 nearestDragIndex =
-    dragFrac != null ? Math.round(dragFrac * (tiers.length - 1)) : null;
-  const shownIndex = nearestDragIndex ?? selectedIndex;
+  const shownIndex = isPressed
+    ? Math.round(renderedFrac * Math.max(0, tiers.length - 1))
+    : selectedIndex;
   const shownTier = tiers[shownIndex];
   const isDefault = value === defaultValue;
   const defaultLabel =
@@ -457,14 +363,49 @@ export function EffortMeter({
   }, []);
 
   const fracAt = (clientX: number) => {
-    const el = sliderRef.current;
-    if (!el) return 0;
-    const rail = el.querySelector<HTMLElement>(".effort-rail") ?? el;
-    const rect = rail.getBoundingClientRect();
-    const travel = rect.width - 24;
-    if (travel <= 0) return 0;
-    const x = clientX - rect.left;
-    return Math.min(1, Math.max(0, (x - 12) / travel));
+    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) => {
@@ -491,7 +432,7 @@ export function EffortMeter({
   if (!shownTier) return null;
 
   return (
-    <div className="px-3.5 pt-3 pb-3">
+    <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}
@@ -542,45 +483,70 @@ export function EffortMeter({
           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);
-          setDragFrac(fracAt(event.clientX));
+          setMotion({ light: 0.55, sx: 0.985, sy: 0.985, origin: "50%" });
+          frame.current = requestAnimationFrame(sampleDrag);
         }}
         onPointerMove={(event) => {
-          if (dragging.current) {
-            setDragFrac(fracAt(event.clientX));
-          }
+          if (event.pointerId === pointerId.current)
+            pointerX.current = event.clientX;
         }}
         onPointerUp={(event) => {
-          if (!dragging.current) return;
-          dragging.current = false;
-          setIsPressed(false);
-          const frac = fracAt(event.clientX);
-          const nearestIndex = Math.round(frac * (tiers.length - 1));
-          setDragFrac(null);
-          commit(nearestIndex);
+          if (event.pointerId === pointerId.current)
+            finishDrag(false, event.clientX);
+        }}
+        onPointerCancel={(event) => {
+          if (event.pointerId === pointerId.current) finishDrag(true);
         }}
-        onPointerCancel={() => {
-          dragging.current = false;
-          setIsPressed(false);
-          setDragFrac(null);
+        onLostPointerCapture={(event) => {
+          if (event.pointerId === pointerId.current) finishDrag(true);
         }}
-        data-dragging={dragFrac != null ? "" : undefined}
+        data-dragging={isPressed ? "" : undefined}
+        data-sampled=""
         data-pressed={isPressed ? "" : undefined}
-        className="effort-slider relative mt-1.5 flex h-8 w-full items-center select-none"
-        style={{ touchAction: "none" }}
+        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={dragFrac}
+          dragFrac={renderedFrac}
         />
       </div>
-      <div className="mt-0.5 flex items-center justify-between font-sans text-[10px] font-normal leading-[14px] text-content/48">
+      <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>
diff --git a/src/index.css b/src/index.css
index 10414290..65792c6a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1448,20 +1448,11 @@ html.has-user-accent {
   max-width: calc(100vw - 24px);
 }
 
-/* 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%);
+/* 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 {
@@ -1492,30 +1483,31 @@ html.theme-light .effort-rail {
   height: 100%;
   border-radius: 11px;
   overflow: hidden;
-  /* Brightness climbs toward the leading edge: a third stop keeps the
-     gradient lifting instead of plateauing mid-rail. */
+  clip-path: inset(0 calc(100% - var(--effort-frac)) 0 0);
   background: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--color-content) 22%, transparent) 0%,
-    color-mix(in srgb, var(--color-content) 38%, transparent) 55%,
-    color-mix(in srgb, var(--color-content) 55%, transparent) 100%
+    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: width 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  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) 16%, transparent) 0%,
-    color-mix(in srgb, var(--color-content) 26%, transparent) 55%,
-    color-mix(in srgb, var(--color-content) 38%, transparent) 100%
+    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(
@@ -1536,24 +1528,25 @@ html.theme-light .effort-rail-fill {
   );
 }
 
-[data-dragging] .effort-rail-fill,
-[data-dragging] .effort-thumb,
-[data-dragging] .effort-specks,
-[data-dragging] .effort-specks-highlight {
-  transition: none !important;
+/* 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;
+  inset: 0 0 0 auto;
+  width: 28px;
   border-radius: inherit;
   pointer-events: none;
   background: linear-gradient(
     90deg,
     transparent 0%,
-    transparent 62%,
-    color-mix(in srgb, var(--effort-accent) 8%, transparent) 78%,
-    color-mix(in srgb, var(--effort-accent) 24%, transparent) 100%
+    color-mix(in srgb, var(--effort-accent) 12%, transparent) 100%
   );
   box-shadow: none;
   opacity: 0;
@@ -1569,11 +1562,12 @@ html.theme-light .effort-rail-fill {
   top: 50%;
   left: var(--effort-frac);
   transform: translate(-50%, -50%);
-  width: 24px;
-  height: 24px;
+  width: var(--effort-thumb, 27px);
+  height: var(--effort-thumb, 27px);
   pointer-events: none;
   z-index: 2;
-  transition: left 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition: left var(--effort-settle-ms, 140ms)
+    cubic-bezier(0.22, 0.75, 0.18, 1);
 }
 
 .effort-thumb-inner {
@@ -1585,10 +1579,11 @@ html.theme-light .effort-rail-fill {
   box-shadow:
     0 0 0 1px rgb(0 0 0 / 16%),
     0 1px 3px rgb(0 0 0 / 24%);
-  transform: scale(1);
+  transform: scale(var(--effort-sx, 1), var(--effort-sy, 1));
+  transform-origin: var(--effort-origin, 50%) 50%;
   transition:
-    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
-    box-shadow 160ms ease-out;
+    transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    box-shadow 100ms ease-out;
 }
 
 html.theme-light .effort-thumb-inner {
@@ -1599,41 +1594,87 @@ html.theme-light .effort-thumb-inner {
 }
 
 [data-pressed] .effort-thumb-inner {
-  transform: scale(0.96);
-  transition: transform 80ms cubic-bezier(0.2, 0, 0, 1);
+  transition: box-shadow 100ms ease-out;
 }
 
-.effort-slider:has([data-top-tier]) .effort-thumb-inner,
 .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 color-mix(in srgb, var(--effort-accent) 50%, transparent),
-    0 0 10px -1px color-mix(in srgb, var(--effort-accent) 45%, transparent),
+    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: 6px;
+  height: 3px;
   transform: translate(-50%, -50%);
   border-radius: 0.5px;
-  background: color-mix(in srgb, var(--color-content) 22%, transparent);
+  background: color-mix(in srgb, var(--color-content) 16%, transparent);
   pointer-events: none;
   z-index: 1;
 }
 
 .effort-rail-tick[data-passed] {
-  background: color-mix(in srgb, var(--color-content) 32%, transparent);
+  background: rgb(255 255 255 / 20%);
 }
 
-.effort-rail-tick[data-auto] {
-  width: 4px;
-  height: 4px;
+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) 38%, transparent);
+    color-mix(in srgb, var(--color-content) 28%, transparent);
 }
 
 .effort-specks {
@@ -1641,55 +1682,44 @@ html.theme-light .effort-thumb-inner {
   inset: 0;
   pointer-events: none;
   clip-path: inset(0 calc(100% - var(--effort-frac)) 0 0);
-  /* The field itself intensifies with effort: dim embers at low, hot at high. */
-  opacity: calc(0.62 + 0.38 * var(--effort-t, 0));
-  transition:
-    clip-path 180ms cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 180ms ease-out;
+  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;
 }
 
-html.theme-light .effort-specks {
-  opacity: calc((0.62 + 0.38 * var(--effort-t, 0)) * 0.85);
-}
-
 .effort-specks-highlight {
   position: absolute;
   inset: 0;
   pointer-events: none;
   clip-path: inset(0 calc(100% - var(--effort-frac)) 0 0);
-  opacity: 0;
+  opacity: var(--effort-light, 0);
   -webkit-mask-image: linear-gradient(
     90deg,
-    transparent,
-    #000 67%,
-    transparent
+    transparent 0%,
+    #000 70%,
+    transparent 100%
   );
-  -webkit-mask-size: 36px 100%;
+  -webkit-mask-size: 54px 100%;
   -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: calc(var(--effort-frac) - 40px) 0;
-  mask-image: linear-gradient(90deg, transparent, #000 67%, transparent);
-  mask-size: 36px 100%;
+  -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) - 40px) 0;
-  transition:
-    clip-path 180ms cubic-bezier(0.16, 1, 0.3, 1),
-    mask-position 180ms cubic-bezier(0.16, 1, 0.3, 1),
-    -webkit-mask-position 180ms cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 180ms ease-out;
+  mask-position: calc(var(--effort-frac) - 46px) 0;
+  transition: opacity 150ms linear;
 }
 
-[data-pressed] .effort-specks-highlight,
-[data-dragging] .effort-specks-highlight {
-  opacity: 1;
-  transition:
-    clip-path 180ms cubic-bezier(0.16, 1, 0.3, 1),
-    mask-position 180ms cubic-bezier(0.16, 1, 0.3, 1),
-    -webkit-mask-position 180ms cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 80ms ease-in;
+[data-pressed] .effort-specks-highlight {
+  transition: none;
 }
 
 .effort-specks-highlight .effort-speck-inner {
@@ -1714,92 +1744,36 @@ html.theme-light .effort-specks-highlight .effort-speck-inner {
   border-radius: 50%;
   background: #ffffff;
   opacity: var(--speck-base);
+  --speck-scale: 1;
 }
 
-.effort-speck[data-glow] .effort-speck-inner {
-  box-shadow: 0 0 2px rgb(255 255 255 / 16%);
+html.theme-light .effort-speck-inner {
+  --speck-scale: 1.15;
+  opacity: min(0.48, calc(var(--speck-base) * var(--speck-scale)));
 }
 
-.effort-speck[data-twinkle="echo"] .effort-speck-inner {
-  animation: effort-twinkle var(--speck-duration)
-    cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
-  animation-delay: var(--speck-delay);
-}
-
-.effort-speck[data-twinkle="no-echo"] .effort-speck-inner {
-  animation: effort-twinkle-no-echo var(--speck-duration)
-    cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
-  animation-delay: var(--speck-delay);
+.effort-speck[data-glow] .effort-speck-inner {
+  box-shadow: 0 0 3px 0.5px rgb(255 255 255 / 38%);
 }
 
-.effort-speck[data-drift="1"] {
-  animation: effort-drift-1 var(--drift-duration) ease-in-out infinite;
+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-drift="2"] {
-  animation: effort-drift-2 var(--drift-duration) ease-in-out infinite;
+.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: var(--speck-base);
-    transform: scale(0.85);
-  }
-  64% {
-    opacity: var(--speck-peak);
-    transform: scale(1);
+    opacity: min(0.48, calc(var(--speck-base) * var(--speck-scale)));
   }
-  72% {
-    opacity: var(--speck-base);
-    transform: scale(0.9);
-  }
-  77% {
-    opacity: var(--speck-echo);
-    transform: scale(0.95);
-  }
-  88% {
-    opacity: var(--speck-base);
-    transform: scale(0.85);
-  }
-}
-
-@keyframes effort-twinkle-no-echo {
-  0%,
-  57%,
-  100% {
-    opacity: var(--speck-base);
-    transform: scale(0.85);
-  }
-  64% {
-    opacity: var(--speck-peak);
-    transform: scale(1);
-  }
-  72%,
-  100% {
-    opacity: var(--speck-base);
-    transform: scale(0.85);
-  }
-}
-
-@keyframes effort-drift-1 {
-  0%,
-  100% {
-    transform: translate(-50%, -50%);
-  }
-  50% {
-    transform: translate(calc(-50% + 1.5px), calc(-50% - 0.75px));
-  }
-}
-
-@keyframes effort-drift-2 {
-  0%,
-  100% {
-    transform: translate(-50%, -50%);
-  }
-  50% {
-    transform: translate(calc(-50% - 1.5px), calc(-50% + 0.75px));
+  66% {
+    opacity: min(0.48, calc(var(--speck-peak) * var(--speck-scale)));
   }
 }
 
@@ -1816,6 +1790,7 @@ html.theme-light .effort-specks-highlight .effort-speck-inner {
   .effort-thumb,
   .effort-thumb-inner,
   .effort-specks,
+  .effort-ticks,
   .effort-top-tint {
     transition: none !important;
     animation: none !important;
@@ -1836,7 +1811,7 @@ html.theme-light .effort-specks-highlight .effort-speck-inner {
 
   .effort-speck-inner {
     transform: none !important;
-    opacity: var(--speck-base) !important;
+    opacity: min(0.48, calc(var(--speck-base) * var(--speck-scale))) !important;
   }
 }
 

From e90dc96857014fc3b2ffbd589b9eebf02af52342 Mon Sep 17 00:00:00 2001
From: elijah <elijahchan2019@outlook.com>
Date: Wed, 16 Sep 2026 16:28:16 +0800
Subject: [PATCH 7/7] Address review: publish wheel step in a layout effect,
 normalize stale values

- Assign the wheel step callback inside useLayoutEffect so the native
  listener never reads a closure from an uncommitted render
- Fall back to a supported tier when a restored session holds an effort
  value the current model does not offer
- Blank line after --speck-scale per stylelint contract

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/chrome/EffortMeter.tsx |  4 +++-
 src/chrome/ModelPicker.tsx | 11 +++++++++--
 src/index.css              |  1 +
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/chrome/EffortMeter.tsx b/src/chrome/EffortMeter.tsx
index 1a8b60ed..a5dd8169 100644
--- a/src/chrome/EffortMeter.tsx
+++ b/src/chrome/EffortMeter.tsx
@@ -417,7 +417,9 @@ export function EffortMeter({
   // React attaches wheel listeners passively, so the step-on-scroll handler
   // has to be native for preventDefault to stick.
   const stepRef = useRef((_delta: number) => {});
-  stepRef.current = (delta) => commit(selectedIndex + delta);
+  useLayoutEffect(() => {
+    stepRef.current = (delta) => commit(selectedIndex + delta);
+  });
   useEffect(() => {
     const el = sliderRef.current;
     if (!el) return;
diff --git a/src/chrome/ModelPicker.tsx b/src/chrome/ModelPicker.tsx
index 759223de..fda61eaa 100644
--- a/src/chrome/ModelPicker.tsx
+++ b/src/chrome/ModelPicker.tsx
@@ -862,8 +862,15 @@ export function EffortPicker({
   if (!setting) return null;
 
   const tiers = orderEffortOptions(setting.options);
-  const value = settingValue(setting, values);
-  const valueLabel = settingValueLabel(setting, values);
+  // 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),
diff --git a/src/index.css b/src/index.css
index 65792c6a..7c59bc4d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1749,6 +1749,7 @@ html.theme-light .effort-specks-highlight .effort-speck-inner {
 
 html.theme-light .effort-speck-inner {
   --speck-scale: 1.15;
+
   opacity: min(0.48, calc(var(--speck-base) * var(--speck-scale)));
 }