diff --git a/app/components/CharTable.vue b/app/components/CharTable.vue
index 4c14710..cbb0d88 100644
--- a/app/components/CharTable.vue
+++ b/app/components/CharTable.vue
@@ -15,7 +15,7 @@ function turnTo(page: number) {
 </script>
 
 <template>
-  <div ref="list" class="border border-rule rounded-lg bg-paper">
+  <div ref="list" class="overflow-clip border border-rule rounded-lg bg-paper">
     <div
       class="row-grid sticky top-0 z-10 items-center gap-2 border-b border-rule bg-paper px-2 py-2 sm:gap-3 sm:px-5"
     >
diff --git a/app/components/FilterBar.vue b/app/components/FilterBar.vue
index 8b8e8d3..cb0fbb0 100644
--- a/app/components/FilterBar.vue
+++ b/app/components/FilterBar.vue
@@ -109,7 +109,7 @@ function toggleRegion(region: string) {
         <input
           v-model="chars.query.value"
           type="search"
-          class="w-52 border border-rule rounded-md bg-sunk px-2.5 py-1 text-sm placeholder:text-mute focus-ring"
+          class="h-7 w-52 border border-rule rounded-md bg-sunk px-2.5 text-sm placeholder:text-mute focus-ring"
           :placeholder="t('filter.searchPlaceholder')"
         />
       </label>
@@ -121,7 +121,7 @@ function toggleRegion(region: string) {
           type="number"
           :min="lo"
           :max="hi"
-          class="tabular w-14 border border-rule rounded-md bg-sunk px-2 py-1 text-center text-xs font-mono focus-ring"
+          class="tabular h-7 w-14 border border-rule rounded-md bg-sunk px-2 text-center text-xs font-mono focus-ring"
         />
         <span class="text-mute">–</span>
         <input
@@ -129,7 +129,7 @@ function toggleRegion(region: string) {
           type="number"
           :min="lo"
           :max="hi"
-          class="tabular w-14 border border-rule rounded-md bg-sunk px-2 py-1 text-center text-xs font-mono focus-ring"
+          class="tabular h-7 w-14 border border-rule rounded-md bg-sunk px-2 text-center text-xs font-mono focus-ring"
         />
       </label>
 
diff --git a/app/components/OverprintChar.vue b/app/components/OverprintChar.vue
index 1fd5180..b8037ec 100644
--- a/app/components/OverprintChar.vue
+++ b/app/components/OverprintChar.vue
@@ -20,6 +20,8 @@ const props = withDefaults(
     only?: readonly Column[]
     /** Include Japan's pre-reform form, which the detail page compares too. */
     withOld?: boolean
+    /** Keep this glyph group vivid and veil the other overprint layers. */
+    focusGroup?: number
   }>(),
   {
     size: 32,
@@ -27,6 +29,7 @@ const props = withDefaults(
     morph: undefined,
     only: undefined,
     withOld: false,
+    focusGroup: undefined,
   },
 )
 
@@ -76,6 +79,14 @@ const label = computed(() =>
  */
 const colorOf = (group: number) =>
   layers.value.length === 1 ? 'var(--c-ink)' : `var(--c-g${group + 1})`
+
+/** Ignore a focus request for a layer hidden by the current comparison. */
+const activeFocus = computed(() =>
+  props.focusGroup !== undefined &&
+  layers.value.some((layer) => layer.group === props.focusGroup)
+    ? props.focusGroup
+    : undefined,
+)
 </script>
 
 <template>
@@ -101,7 +112,13 @@ const colorOf = (group: number) =>
       v-for="(layer, index) in layers"
       :key="layer.group"
       class="layer"
-      :class="[`hanji-${layer.region}`, { animate }]"
+      :class="[
+        `hanji-${layer.region}`,
+        {
+          animate,
+          veiled: activeFocus !== undefined && layer.group !== activeFocus,
+        },
+      ]"
       :style="{
         '--layer-color': colorOf(layer.group),
         animationDelay: `${index * 90}ms`,
@@ -132,6 +149,11 @@ const colorOf = (group: number) =>
   place-items: center;
   color: var(--layer-color);
   mix-blend-mode: var(--overprint-blend);
+  transition: opacity 180ms ease;
+}
+
+.layer.veiled {
+  opacity: 0.16;
 }
 
 /* Hollow: the color moves from the fill to the stroke, so the shapes read
diff --git a/app/components/StyleToggle.vue b/app/components/StyleToggle.vue
index 527882b..f74b740 100644
--- a/app/components/StyleToggle.vue
+++ b/app/components/StyleToggle.vue
@@ -32,7 +32,7 @@ const markOf = (option: string) => FACE_MARKS[option]?.[t(`style.${option}`)]
   -->
   <button
     type="button"
-    class="flex items-baseline rounded px-1 focus-ring"
+    class="flex items-center rounded px-1 focus-ring"
     :title="t('style.label')"
     :aria-label="t('style.label')"
     @click="toggle"
diff --git a/app/pages/char/[key].vue b/app/pages/char/[key].vue
index fe4c97d..d36bbd9 100644
--- a/app/pages/char/[key].vue
+++ b/app/pages/char/[key].vue
@@ -57,7 +57,11 @@ const columns = computed<Column[]>(() =>
  * would be answering a different question than the reader asked.
  */
 const picked = ref<Column[]>([...columns.value])
-watch(key, () => (picked.value = [...columns.value]))
+const hoveredGroup = ref<number>()
+watch(key, () => {
+  picked.value = [...columns.value]
+  hoveredGroup.value = undefined
+})
 const compared = computed(() =>
   picked.value.length ? picked.value : [...columns.value],
 )
@@ -301,6 +305,7 @@ useSeoMeta({
           :only="compared"
           :size="150"
           :morph="morph"
+          :focus-group="hoveredGroup"
           morph-whole
           with-old
         />
@@ -358,6 +363,8 @@ useSeoMeta({
                     :class="
                       compared.includes(run.cell.column) ? '' : 'opacity-20'
                     "
+                    @mouseenter="hoveredGroup = run.cell.group"
+                    @mouseleave="hoveredGroup = undefined"
                   >
                     <span
                       :lang="run.cell.lang"