diff --git a/package.json b/package.json
index 4fce4e78..e07e2d12 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "open-diff",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "private": true,
   "license": "Apache-2.0",
   "repository": {
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 7b32808e..2de85cb3 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -70,7 +70,7 @@ dependencies = [
 
 [[package]]
 name = "archive-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "flate2",
  "rars",
@@ -596,7 +596,7 @@ dependencies = [
 
 [[package]]
 name = "cli-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "diff-core",
  "file-core",
@@ -612,7 +612,7 @@ dependencies = [
 
 [[package]]
 name = "clipboard-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "shared-types",
@@ -936,7 +936,7 @@ dependencies = [
 
 [[package]]
 name = "diff-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "format-core",
  "regex",
@@ -1044,7 +1044,7 @@ dependencies = [
 
 [[package]]
 name = "document-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "format-core",
  "logging-core",
@@ -1264,7 +1264,7 @@ dependencies = [
 
 [[package]]
 name = "file-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "encoding_rs",
  "libc",
@@ -1307,7 +1307,7 @@ checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
 
 [[package]]
 name = "folder-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "diff-core",
  "job-core",
@@ -1318,7 +1318,7 @@ dependencies = [
 
 [[package]]
 name = "folder-merge-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -1382,7 +1382,7 @@ dependencies = [
 
 [[package]]
 name = "format-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -1802,7 +1802,7 @@ checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
 
 [[package]]
 name = "hex-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "vfs-core",
@@ -2088,7 +2088,7 @@ dependencies = [
 
 [[package]]
 name = "image-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "image",
  "serde",
@@ -2226,7 +2226,7 @@ dependencies = [
 
 [[package]]
 name = "job-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -2411,7 +2411,7 @@ checksum = "0ceec5bc11778974d1bcb055b18002eba7f4b3518b6a0081b3af5f21666da9ad"
 
 [[package]]
 name = "logging-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -2436,7 +2436,7 @@ dependencies = [
 
 [[package]]
 name = "media-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -2458,7 +2458,7 @@ dependencies = [
 
 [[package]]
 name = "merge-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -2808,7 +2808,7 @@ checksum = "9f7c3e4beb33f85d45ae3e3a1792185706c8e16d043238c593331cc7cd313b50"
 
 [[package]]
 name = "open-diff-app"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "archive-core",
  "cli-core",
@@ -2976,7 +2976,7 @@ checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
 
 [[package]]
 name = "performance-core"
-version = "1.3.1"
+version = "1.3.2"
 
 [[package]]
 name = "phf"
@@ -3095,7 +3095,7 @@ dependencies = [
 
 [[package]]
 name = "policy-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -3413,7 +3413,7 @@ checksum = "349e79c5a22cd52d15fe4d364428b1c1040a6b2025a763c59f645a955ceae1ef"
 
 [[package]]
 name = "registry-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "regf-rs",
  "serde",
@@ -3422,7 +3422,7 @@ dependencies = [
 
 [[package]]
 name = "remote-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "hmac 0.12.1",
  "logging-core",
@@ -3436,7 +3436,7 @@ dependencies = [
 
 [[package]]
 name = "report-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "logging-core",
  "serde",
@@ -3676,7 +3676,7 @@ checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
 
 [[package]]
 name = "script-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "archive-core",
  "diff-core",
@@ -3908,7 +3908,7 @@ dependencies = [
 
 [[package]]
 name = "session-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -3916,7 +3916,7 @@ dependencies = [
 
 [[package]]
 name = "settings-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "format-core",
  "remote-core",
@@ -3972,7 +3972,7 @@ dependencies = [
 
 [[package]]
 name = "shared-types"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -3980,7 +3980,7 @@ dependencies = [
 
 [[package]]
 name = "shell-core"
-version = "1.3.1"
+version = "1.3.2"
 
 [[package]]
 name = "shlex"
@@ -4024,7 +4024,7 @@ checksum = "8ed6a63f02c8539c91a8685a86f4099661ba3da017932f6ebbea6de3f0fa7c90"
 
 [[package]]
 name = "snapshot-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -4201,7 +4201,7 @@ dependencies = [
 
 [[package]]
 name = "sync-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "folder-core",
  "logging-core",
@@ -4244,7 +4244,7 @@ dependencies = [
 
 [[package]]
 name = "table-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "calamine",
  "rust_xlsxwriter",
@@ -5003,7 +5003,7 @@ checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
 
 [[package]]
 name = "update-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "policy-core",
  "serde",
@@ -5094,7 +5094,7 @@ checksum = "03c2856837ef78f57382f06b2b8563a2f512f7185d732608fd9176cb3b8edf0e"
 
 [[package]]
 name = "version-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
@@ -5107,7 +5107,7 @@ checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 
 [[package]]
 name = "vfs-core"
-version = "1.3.1"
+version = "1.3.2"
 dependencies = [
  "serde",
 ]
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index c01fc84b..5fe97d1d 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -36,7 +36,7 @@ members = [
 resolver = "2"
 
 [workspace.package]
-version = "1.3.1"
+version = "1.3.2"
 edition = "2021"
 authors = ["Open Diff Contributors"]
 license = "Apache-2.0"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 97dcb0ed..ba0a65d5 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "OpenDiff",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "identifier": "io.github.kygo8.open-diff",
   "build": {
     "beforeDevCommand": "corepack pnpm dev",
diff --git a/src-tauri/tauri.macos.conf.json b/src-tauri/tauri.macos.conf.json
index 9d8cd4cf..efe3195a 100644
--- a/src-tauri/tauri.macos.conf.json
+++ b/src-tauri/tauri.macos.conf.json
@@ -5,7 +5,7 @@
     "icon": ["icons/icon.icns"],
     "macOS": {
       "bundleName": "OpenDiff",
-      "bundleVersion": "1.3.1",
+      "bundleVersion": "1.3.2",
       "minimumSystemVersion": "11.0",
       "hardenedRuntime": true,
       "exceptionDomain": "github.com",
diff --git a/src/app/folderDisplayFilters.test.ts b/src/app/folderDisplayFilters.test.ts
index d153a3ea..c034f4ae 100644
--- a/src/app/folderDisplayFilters.test.ts
+++ b/src/app/folderDisplayFilters.test.ts
@@ -51,7 +51,7 @@ describe('folderDisplayFilters', () => {
       showSuppressed: false,
       filesOnly: false,
       alwaysShowFolders: true,
-      showFiltersPanel: true,
+      showFiltersPanel: false,
       showPeekPanel: false,
     })
   })
diff --git a/src/app/folderDisplayFilters.ts b/src/app/folderDisplayFilters.ts
index 5ef17d64..1c011239 100644
--- a/src/app/folderDisplayFilters.ts
+++ b/src/app/folderDisplayFilters.ts
@@ -22,7 +22,7 @@ export function defaultFolderDisplayFilters(): FolderDisplayFiltersState {
     showSuppressed: false,
     filesOnly: false,
     alwaysShowFolders: true,
-    showFiltersPanel: true,
+    showFiltersPanel: false,
     showPeekPanel: false,
   }
 }
@@ -63,7 +63,7 @@ export function loadFolderDisplayFilters(
       showSuppressed: Boolean(parsed.showSuppressed),
       filesOnly: Boolean(parsed.filesOnly),
       alwaysShowFolders: parsed.alwaysShowFolders !== false,
-      showFiltersPanel: parsed.showFiltersPanel !== false,
+      showFiltersPanel: parsed.showFiltersPanel === true,
       showPeekPanel: Boolean(parsed.showPeekPanel),
     }
   } catch {
diff --git a/src/components/session/SessionSettingsDialog.vue b/src/components/session/SessionSettingsDialog.vue
index 4caa3485..8baf20c0 100644
--- a/src/components/session/SessionSettingsDialog.vue
+++ b/src/components/session/SessionSettingsDialog.vue
@@ -875,23 +875,34 @@ function applySettings(): void {
 
 .session-settings-dialog {
   display: grid;
-  gap: 4px;
-  width: min(520px, 100%);
-  padding: 4px 6px;
+  grid-template-columns: 1fr;
+  gap: 0;
+  width: min(640px, 100%);
+  min-height: 360px;
+  padding: 0;
   border: 1px solid #a0a0a0;
   border-radius: 0;
   background: var(--app-surface, #ffffff);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
 }
 
+.session-settings-dialog:has(.settings-tabs) {
+  grid-template-columns: 160px minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
 header,
 footer {
   display: flex;
+  grid-column: 1 / -1;
   align-items: center;
   justify-content: space-between;
   gap: 6px;
-  min-height: 20px;
+  min-height: 26px;
+  padding: 6px 10px;
+  border-bottom: 1px solid #c8c8c8;
+  background: #f0f0f0;
 }
 
 header {
@@ -900,13 +911,13 @@ header {
 }
 
 header button {
-  height: 18px;
-  min-height: 18px;
+  height: 28px;
+  min-height: 28px;
   padding: 0 8px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
   background: #ffffff;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
 }
 
@@ -918,44 +929,67 @@ h2 {
 
 .settings-tabs {
   display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  min-height: 20px;
-  padding: 2px 0;
-  background: #f0f0f0;
+  grid-column: 1;
+  grid-row: 2;
+  flex-direction: column;
+  gap: 0;
+  min-height: 0;
+  padding: 8px 0;
+  overflow: auto;
+  border-right: 1px solid #c8c8c8;
+  background: #f5f5f5;
 }
 
 .settings-tabs button {
-  height: 18px;
-  padding: 0 6px;
-  border: 1px solid #a0a0a0;
+  height: auto;
+  min-height: 28px;
+  padding: 6px 14px;
+  border: 0;
   border-radius: 0;
-  font-size: 11px;
+  background: transparent;
+  color: #1a1a1a;
+  font-size: 12px;
   line-height: 16px;
+  text-align: left;
+  cursor: default;
+}
+
+.settings-tabs button:hover {
+  background: #e8f4ff;
 }
 
 .settings-tabs button.active {
-  border-color: #89bdea;
-  background: #c8e4ff;
+  border-color: transparent;
+  background: #cce8ff;
   color: #1a1a1a;
-  box-shadow: inset 0 0 0 1px #89bdea;
+  font-weight: 600;
+  box-shadow: none;
 }
 
 .settings-body {
   display: grid;
-  gap: 4px;
-  padding: 4px 6px;
-  border: 1px solid #a0a0a0;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  gap: 10px;
+  min-height: 0;
+  padding: 16px 20px;
+  overflow: auto;
+  border: 0;
   border-radius: 0;
-  background: var(--app-surface-low, #ffffff);
+  background: #ffffff;
+  align-content: start;
+}
+
+.session-settings-dialog:has(.settings-tabs) .settings-body {
+  grid-column: 2;
 }
 
 .settings-body label {
   display: flex;
   align-items: center;
   gap: 6px;
-  min-height: 18px;
-  font-size: 11px;
+  min-height: 28px;
+  font-size: 12px;
   line-height: 16px;
 }
 
@@ -966,12 +1000,12 @@ h2 {
 
 .settings-body input:not([type='checkbox']),
 .settings-body select {
-  height: 20px;
-  min-height: 20px;
+  height: 26px;
+  min-height: 26px;
   padding: 0 6px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
 }
 
@@ -984,7 +1018,7 @@ h2 {
   background: var(--app-surface-low, #ffffff);
   color: var(--app-text);
   font: inherit;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
   resize: vertical;
 }
@@ -992,20 +1026,22 @@ h2 {
 footer {
   justify-content: flex-end;
   gap: 6px;
-  padding-top: 2px;
-  border-top: 1px solid #c0c0c0;
+  padding-top: 6px;
+  border-top: 1px solid #c8c8c8;
+  border-bottom: 0;
+  background: #f5f5f5;
 }
 
 footer button {
   min-width: 72px;
-  height: 18px;
-  min-height: 18px;
+  height: 28px;
+  min-height: 28px;
   padding: 0 10px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
   background: #ffffff;
   color: #111111;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
   cursor: default;
 }
diff --git a/src/layouts/AppLayout.test.ts b/src/layouts/AppLayout.test.ts
index 2a3d05b6..9a1dd65b 100644
--- a/src/layouts/AppLayout.test.ts
+++ b/src/layouts/AppLayout.test.ts
@@ -1200,12 +1200,12 @@ describe('AppLayout command palette', () => {
     expect(source).toContain('grid-template-rows: 48px minmax(0, 1fr) 24px')
     expect(source).toContain('grid-template-rows: 24px 24px')
     expect(source).toContain('data-menu-density="capture-1to1"')
-    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?background:\s*#f0f0f0/)
+    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?background:\s*#f0f3f9/)
     expect(menusButton?.[0]).toContain('height: 21.5px')
     expect(menusButton?.[0]).toContain('font-size: 12px')
     expect(menusButton?.[0]).not.toContain('height: 15px')
     expect(menuCommand?.[0]).toContain('min-height: 22px')
-    expect(source).toMatch(/\.menu-panel\s*\{[\s\S]*?min-width:\s*24rem/)
+    expect(source).toMatch(/\.menu-panel\s*\{[\s\S]*?min-width:\s*280px/)
     expect(source).toMatch(/\.menus > \.menu-group > button\s*\{[\s\S]*?max-width:\s*9em/)
     expect(source).toMatch(/\.menu-panel \.menu-command\s*\{[\s\S]*?max-width:\s*100%/)
     expect(source).toMatch(/\.menu-command-label\s*\{[\s\S]*?text-overflow:\s*ellipsis/)
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 671d3fa9..b544c7e9 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -2273,10 +2273,10 @@ const sourceSessionTypes = new Set<SessionType>([
   min-width: 0;
   padding: 0;
   overflow: visible;
-  border-bottom: 1px solid #a0a0a0;
+  border-bottom: 1px solid #dcdcdc;
 
-  /* Capture title band ~#f0f0f0; menu row paints white over row 2. */
-  background: #f0f0f0;
+  /* HTML demo menu band */
+  background: #f0f3f9;
 }
 
 .menu-panel {
@@ -2287,15 +2287,15 @@ const sourceSessionTypes = new Set<SessionType>([
   display: grid;
   box-sizing: border-box;
   width: max-content;
-  min-width: 24rem;
-  max-width: min(36rem, calc(100vw - 24px));
+  min-width: 280px;
+  max-width: min(360px, calc(100vw - 24px));
   max-height: calc(100vh - 72px);
-  padding: 2px;
+  padding: 4px 0;
   overflow: hidden auto;
   border: 1px solid #a0a0a0;
   border-radius: 0;
-  background: var(--app-canvas);
-  box-shadow: 0 4px 12px rgb(25 28 30 / 0.16);
+  background: #f2f2f2;
+  box-shadow: 2px 2px 8px rgb(0 0 0 / 0.18);
 }
 
 /* Do not inherit .menus > button max-width: 9em — that crushed panel labels (#624). */
@@ -2346,7 +2346,7 @@ const sourceSessionTypes = new Set<SessionType>([
 }
 
 .menu-panel button:hover {
-  background: var(--app-primary-soft);
+  background: #cce8ff;
 }
 
 .menu-panel button:disabled,
@@ -2372,9 +2372,9 @@ const sourceSessionTypes = new Set<SessionType>([
 }
 
 .menu-bar[data-menu-chrome='capture-1to1-residual'] .menus > .menu-group > button.active {
-  background: #c8e4ff;
+  background: #cce8ff;
   color: #000000;
-  box-shadow: inset 0 0 0 1px #89bdea;
+  box-shadow: inset 0 0 0 1px #99c9ef;
 }
 
 .menu-bar[data-menu-sep='capture-1to1-residual'] .menu-separator {
@@ -2461,10 +2461,10 @@ const sourceSessionTypes = new Set<SessionType>([
   gap: 0;
   min-width: 0;
   height: 24px;
-  padding: 0 2px;
+  padding: 0 4px;
   overflow: visible;
-  border-top: 1px solid #d0d0d0;
-  background: #ffffff;
+  border-top: 1px solid #dcdcdc;
+  background: #f0f3f9;
 }
 
 .menu-group {
@@ -2503,7 +2503,7 @@ const sourceSessionTypes = new Set<SessionType>([
 .menus > .menu-group > button:hover,
 .menus > .menu-group > button.active,
 .chrome-button:hover {
-  background: #eef4ff;
+  background: #dce8f8;
 }
 
 .top-actions {
@@ -2708,7 +2708,7 @@ const sourceSessionTypes = new Set<SessionType>([
 }
 
 .tab-strip[data-tab-strip-density='capture-1to1-residual'] {
-  background: #f0f0f0;
+  background: #f0f3f9;
 }
 
 .tab-strip[data-tab-strip-density='capture-1to1-residual'] .tab-chip {
@@ -2888,15 +2888,15 @@ const sourceSessionTypes = new Set<SessionType>([
   grid-template-columns: repeat(4, minmax(0, 1fr));
   align-items: stretch;
   min-width: 0;
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   padding: 0;
-  border-top: 1px solid #a0a0a0;
-  background: #f0f0f0;
-  color: #000000;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  border-top: 1px solid #b8b8b8;
+  background: #d4d4d4;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-status-band='capture-1to1-residual'] .status-bar-pane {
@@ -2911,10 +2911,10 @@ const sourceSessionTypes = new Set<SessionType>([
 .status-bar[data-chrome-kind='folder-pair'] {
   /* Capture Folder Compare panes (DPR≈2): 222 | 131 | 222.5 | 39 | 222 | 131 | fr */
   grid-template-columns: 222px 131px 222.5px 39px 222px 131px minmax(0, 1fr);
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-chrome-kind='folder-pair'] .status-bar-pane {
@@ -2933,10 +2933,10 @@ const sourceSessionTypes = new Set<SessionType>([
 .status-bar[data-chrome-kind='folder-sync'] {
   /* Capture Folder Sync panes (DPR≈2): 266.5 | 268.5 | 118 | 268 | fr */
   grid-template-columns: 266.5px 268.5px 118px 268px minmax(0, 1fr);
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-chrome-kind='folder-sync'] .status-bar-pane {
@@ -2958,10 +2958,10 @@ const sourceSessionTypes = new Set<SessionType>([
       0,
       1fr
     );
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-chrome-kind='folder-merge'] .status-bar-pane {
@@ -2986,10 +2986,10 @@ const sourceSessionTypes = new Set<SessionType>([
 .status-bar[data-chrome-kind='table-session'],
 .status-bar[data-chrome-kind='registry-session'],
 .status-bar[data-chrome-kind='clipboard-session'] {
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-chrome-kind='text-session'] .status-bar-pane,
@@ -3037,10 +3037,10 @@ const sourceSessionTypes = new Set<SessionType>([
 
 .status-bar[data-chrome-kind='text-edit-session'] {
   grid-template-columns: 91.5px minmax(0, 1fr);
-  height: 19.5px;
-  min-height: 19.5px;
+  height: 26px;
+  min-height: 26px;
   font-size: 11px;
-  line-height: 18px;
+  line-height: 24px;
 }
 
 .status-bar[data-chrome-kind='text-edit-session'] .status-bar-pane {
@@ -3275,15 +3275,15 @@ html[data-show-sidebar='1'] .sidebar {
 .app-shell-dense-chrome:has(.status-bar[data-chrome-kind='folder-sync']),
 .app-shell-dense-chrome:has(.status-bar[data-chrome-kind='folder-merge']),
 .app-shell-dense-chrome:has(.status-bar[data-chrome-kind$='-session']) {
-  /* Single capture menu row; status track toward capture ~19.5px (DPR≈2). */
-  grid-template-rows: 23.5px minmax(0, 1fr) 19.5px;
+  /* Dense menu row; status track matches HTML demo ~26px. */
+  grid-template-rows: 23.5px minmax(0, 1fr) 26px;
 }
 
 .app-shell:not(.app-shell-dense-chrome):has(.status-bar[data-chrome-kind='folder-pair']),
 .app-shell:not(.app-shell-dense-chrome):has(.status-bar[data-chrome-kind='folder-sync']),
 .app-shell:not(.app-shell-dense-chrome):has(.status-bar[data-chrome-kind='folder-merge']),
 .app-shell:not(.app-shell-dense-chrome):has(.status-bar[data-chrome-kind$='-session']) {
-  grid-template-rows: 48px minmax(0, 1fr) 19.5px;
+  grid-template-rows: 48px minmax(0, 1fr) 26px;
 }
 
 .app-shell-dense-chrome .menu-bar {
diff --git a/src/styles/clipboardChromeDensity.test.ts b/src/styles/clipboardChromeDensity.test.ts
index 6d7bd512..dc7a96ba 100644
--- a/src/styles/clipboardChromeDensity.test.ts
+++ b/src/styles/clipboardChromeDensity.test.ts
@@ -34,8 +34,8 @@ describe('clipboard compare chrome density', () => {
     expect(clipboardView).not.toMatch(/font-size:\s*9px/)
     expect(clipboardView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='clipboard-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='clipboard-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Clipboard history pane/entry chrome on capture band', () => {
diff --git a/src/styles/folderChromeDensity.test.ts b/src/styles/folderChromeDensity.test.ts
index 64fc9685..9a68bd61 100644
--- a/src/styles/folderChromeDensity.test.ts
+++ b/src/styles/folderChromeDensity.test.ts
@@ -31,7 +31,7 @@ describe('folder chrome density', () => {
     expect(folderView).toMatch(/folder-right-path-footer/)
     expect(css).toMatch(/\.folder-compare-view \.path-meta-footer[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(/\.folder-compare-view \.path-meta-footer[\s\S]*?font-size:\s*11px/)
-    expect(folderView).toMatch(/\.path-pair input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(folderView).toMatch(/\.path-pair input\s*\{[\s\S]*?height:\s*24px/)
     expect(folderView).toMatch(/\.path-pair input\s*\{[\s\S]*?border-radius:\s*0/)
     expect(folderView).toMatch(/\.folder-toolbar\s*\{[\s\S]*?gap:\s*2px/)
     expect(folderView).toMatch(/\.folder-criteria\s*\{[\s\S]*?gap:\s*1px 4px/)
@@ -60,9 +60,9 @@ it('surfaces Filters/Peek strip at capture CSS scale', () => {
   expect(css).toMatch(/\.folder-filter-strip\s*\{/)
   expect(css).toMatch(/\.folder-filter-pattern\s*\{/)
   expect(css).toMatch(/\.folder-filter-strip-btn\s*\{/)
-  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*37\.5px/)
-  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*20px auto/)
-  expect(css).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?height:\s*16\.5px/)
+  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*48px/)
+  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*22px auto/)
+  expect(css).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?height:\s*24px/)
   expect(css).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?border-radius:\s*0/)
   expect(css).toMatch(
     /\.folder-filter-chrome\[data-mainbar-row2='capture-1to1-residual'\][\s\S]*?min-height:\s*43\.5px/,
@@ -81,12 +81,12 @@ it('surfaces Filters/Peek strip at capture CSS scale', () => {
   expect(folderView).toMatch(/data-mainbar-row2="capture-1to1-residual"/)
   expect(folderView).toMatch(/<template #toolbar>/)
   expect(folderView).toMatch(/showFiltersPanel:/)
-  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?width:\s*59px/)
-  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*37\.5px/)
+  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?width:\s*52px/)
+  expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*48px/)
   expect(folderView).toMatch(/\.folder-filter-chrome\s*\{[\s\S]*?min-height:\s*43\.5px/)
   expect(folderView).toMatch(/background:\s*#ffffff/)
-  expect(folderView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*37\.5px/)
-  expect(folderView).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?height:\s*16\.5px/)
+  expect(folderView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*48px/)
+  expect(folderView).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?height:\s*24px/)
   expect(folderView).toMatch(/\.folder-filter-pattern\s*\{[\s\S]*?border-radius:\s*0/)
   expect(folderView).toMatch(/:size="14"/)
   expect(syncView).toMatch(/data-testid="folder-sync-filter-strip"/)
@@ -96,11 +96,11 @@ it('surfaces Filters/Peek strip at capture CSS scale', () => {
   expect(syncView).toMatch(/data-sync-pattern-place="capture-1to1-residual"/)
   expect(syncView).toMatch(/data-testid="folder-sync-filter-pattern"/)
   expect(syncView).toMatch(/data-filters-density="capture-1to1"/)
-  expect(syncView).toMatch(/\.folder-filter-chrome\s*\{[\s\S]*?min-height:\s*37\.5px/)
+  expect(syncView).toMatch(/\.folder-filter-chrome\s*\{[\s\S]*?min-height:\s*48px/)
   expect(syncView).toMatch(/\.folder-filter-chrome\s*\{[\s\S]*?background:\s*#f0f0f0/)
-  expect(syncView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*37\.5px/)
+  expect(syncView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*48px/)
   expect(syncView).toMatch(
-    /\.sync-filter-pattern-field \.folder-filter-pattern\s*\{[\s\S]*?height:\s*16\.5px/,
+    /\.sync-filter-pattern-field \.folder-filter-pattern\s*\{[\s\S]*?height:\s*24px/,
   )
   expect(mergeView).toMatch(/data-testid="folder-merge-filter-strip"/)
   expect(mergeView).toMatch(/data-testid="folder-merge-filter-pattern"/)
@@ -110,7 +110,7 @@ it('surfaces Filters/Peek strip at capture CSS scale', () => {
   expect(mergeView).toMatch(/data-mainbar-row2="capture-1to1-residual"/)
   expect(mergeView).toMatch(/<template #toolbar>/)
   expect(mergeView).toMatch(/\.folder-filter-chrome\s*\{[\s\S]*?min-height:\s*43\.5px/)
-  expect(mergeView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*37\.5px/)
+  expect(mergeView).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?height:\s*48px/)
 })
 
 describe('folder compare tree chrome density', () => {
@@ -119,7 +119,7 @@ describe('folder compare tree chrome density', () => {
     expect(css).toMatch(/\.folder-compare-view \.tree-row\s*\{[\s\S]*?min-height:\s*16px/)
     expect(css).toMatch(/\.folder-compare-view \.tree-head\s*\{[\s\S]*?font-weight:\s*400/)
     expect(css).toMatch(
-      /\.folder-compare-view \.tree-row\.selected\s*\{[\s\S]*?background:\s*#a8cdf1/,
+      /\.folder-compare-view \.tree-row\.selected\s*\{[\s\S]*?background:\s*#cce8ff/,
     )
     expect(css).toMatch(/\.folder-compare-view \.tree-head span,[\s\S]*?padding:\s*1px 6px/)
     expect(css).toMatch(/\.folder-compare-view \.tree-head span,[\s\S]*?font-size:\s*11px/)
@@ -200,7 +200,7 @@ describe('folder sync Filters/Peek placement residual', () => {
       /\.folder-sync-view \.folder-filter-chrome\[data-sync-filters-place='capture-1to1-residual'\][\s\S]*?background:\s*#f0f0f0/,
     )
     expect(css).toMatch(
-      /\.folder-filter-pattern\[data-sync-pattern-place='capture-1to1-residual'\][\s\S]*?height:\s*16\.5px/,
+      /\.folder-filter-pattern\[data-sync-pattern-place='capture-1to1-residual'\][\s\S]*?height:\s*24px/,
     )
     expect(syncView).not.toMatch(/data-mainbar-row2="capture-1to1-residual"/)
     expect(syncView).not.toMatch(/data-testid="folder-sync-filter-strip-peek"/)
diff --git a/src/styles/formatsProfilesChromeDensity.test.ts b/src/styles/formatsProfilesChromeDensity.test.ts
index 2b6507a8..42643e4f 100644
--- a/src/styles/formatsProfilesChromeDensity.test.ts
+++ b/src/styles/formatsProfilesChromeDensity.test.ts
@@ -9,36 +9,33 @@ const formatView = readFileSync(resolve(root, 'src/views/FileFormatView.vue'), '
 const profileView = readFileSync(resolve(root, 'src/views/RemoteProfileView.vue'), 'utf8')
 
 describe('formats and profiles chrome density', () => {
-  it('keeps File Formats chrome dense toward session-panel spacing', () => {
+  it('keeps File Formats chrome aligned with HTML demo opts layout', () => {
+    expect(css).toMatch(/\.file-format-view,\s*\.remote-profile-view\s*\{[\s\S]*?padding:\s*0/)
     expect(css).toMatch(
-      /\.file-format-view,\s*\.remote-profile-view\s*\{[\s\S]*?padding:\s*2px 4px/,
+      /\.file-format-view \.format-row,\s*\.remote-profile-view \.profile-row\s*\{[\s\S]*?min-height:\s*28px/,
     )
-    expect(css).toMatch(
-      /\.file-format-view \.format-row,\s*\.remote-profile-view \.profile-row\s*\{[\s\S]*?min-height:\s*22px/,
-    )
-    expect(css).toMatch(/\.file-format-view textarea\s*\{[\s\S]*?min-height:\s*64px/)
+    expect(css).toMatch(/\.file-format-view textarea\s*\{[\s\S]*?min-height:\s*96px/)
 
-    expect(formatView).toMatch(/\.file-format-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(formatView).toMatch(/\.format-list-panel,[\s\S]*?padding:\s*2px 4px/)
+    expect(formatView).toMatch(/\.file-format-view\s*\{[\s\S]*?padding:\s*0/)
+    expect(formatView).toMatch(/\.format-list-panel,[\s\S]*?padding:\s*8px 0/)
     expect(formatView).toMatch(/\.format-list-panel,[\s\S]*?border-radius:\s*0/)
-    expect(formatView).toMatch(/\.format-row\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(formatView).toMatch(/\.format-row\s*\{[\s\S]*?padding:\s*1px 4px/)
-    expect(formatView).toMatch(/button\s*\{[\s\S]*?min-height:\s*18px/)
-    expect(formatView).toMatch(/input,\s*select\s*\{[\s\S]*?height:\s*20px/)
-    expect(formatView).toMatch(/textarea\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(formatView).toMatch(/textarea\s*\{[\s\S]*?min-height:\s*64px/)
-    expect(formatView).not.toMatch(/padding:\s*16px/)
+    expect(formatView).toMatch(/\.format-row\s*\{[\s\S]*?min-height:\s*28px/)
+    expect(formatView).toMatch(/\.format-row\s*\{[\s\S]*?padding:\s*6px 14px/)
+    expect(formatView).toMatch(/button\s*\{[\s\S]*?min-height:\s*28px/)
+    expect(formatView).toMatch(/input,\s*select\s*\{[\s\S]*?height:\s*26px/)
+    expect(formatView).toMatch(/textarea\s*\{[\s\S]*?min-height:\s*96px/)
+    expect(formatView).not.toMatch(/min-height:\s*6px/)
   })
 
-  it('keeps Remote Profiles chrome dense toward session-panel spacing', () => {
-    expect(profileView).toMatch(/\.remote-profile-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(profileView).toMatch(/\.profile-list-panel,[\s\S]*?padding:\s*2px 4px/)
+  it('keeps Remote Profiles chrome aligned with HTML demo opts layout', () => {
+    expect(profileView).toMatch(/\.remote-profile-view\s*\{[\s\S]*?padding:\s*0/)
+    expect(profileView).toMatch(/\.profile-list-panel,[\s\S]*?padding:\s*8px 0/)
     expect(profileView).toMatch(/\.profile-list-panel,[\s\S]*?border-radius:\s*0/)
-    expect(profileView).toMatch(/\.profile-row\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(profileView).toMatch(/\.profile-row\s*\{[\s\S]*?padding:\s*1px 4px/)
-    expect(profileView).toMatch(/button\s*\{[\s\S]*?min-height:\s*18px/)
-    expect(profileView).toMatch(/input,\s*select\s*\{[\s\S]*?height:\s*20px/)
-    expect(profileView).toMatch(/\.remote-unavailable\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(profileView).not.toMatch(/padding:\s*16px/)
+    expect(profileView).toMatch(/\.profile-row\s*\{[\s\S]*?min-height:\s*28px/)
+    expect(profileView).toMatch(/\.profile-row\s*\{[\s\S]*?padding:\s*6px 14px/)
+    expect(profileView).toMatch(/button\s*\{[\s\S]*?min-height:\s*28px/)
+    expect(profileView).toMatch(/input,\s*select\s*\{[\s\S]*?height:\s*26px/)
+    expect(profileView).toMatch(/\.remote-unavailable\s*\{/)
+    expect(profileView).not.toMatch(/min-height:\s*6px/)
   })
 })
diff --git a/src/styles/hexChromeDensity.test.ts b/src/styles/hexChromeDensity.test.ts
index be32194d..06766ba9 100644
--- a/src/styles/hexChromeDensity.test.ts
+++ b/src/styles/hexChromeDensity.test.ts
@@ -13,7 +13,7 @@ describe('hex compare chrome density', () => {
     expect(css).toMatch(/\.hex-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(css).toMatch(/\.hex-compare-view \.bc-path-row\s*\{[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(/\.hex-compare-view \.bc-path-row input\s*\{[\s\S]*?height:\s*20px/)
-    expect(hexView).toMatch(/\.hex-path-field \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(hexView).toMatch(/\.hex-path-field \.path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.hex-compare-view \.path-side-footer\s*\{[\s\S]*?font-size:\s*11px/)
     expect(css).toMatch(/\.hex-compare-view \.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(/\.hex-compare-view \.path-side-footer\s*\{[\s\S]*?line-height:\s*16px/)
@@ -29,8 +29,8 @@ describe('hex compare chrome density', () => {
     expect(hexView).not.toMatch(/font-size:\s*9px/)
     expect(hexView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='hex-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='hex-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Hex wrap/gutter/row chrome on capture band', () => {
@@ -42,7 +42,7 @@ describe('hex compare chrome density', () => {
     expect(css).toMatch(
       /\.hex-compare-view \.hex-path-meta-strip[\s\S]*?border:\s*1px solid #c0c0c0/,
     )
-    expect(css).toMatch(/\.hex-compare-view \.hex-wrap-controls input[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.hex-compare-view \.hex-wrap-controls input[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.hex-compare-view \.hex-row\s*\{[\s\S]*?min-height:\s*17\.5px/)
     expect(css).toMatch(/\.hex-compare-view \.hex-offset\s*\{[\s\S]*?background:\s*#ffffff/)
 
diff --git a/src/styles/homeChromeDensity.test.ts b/src/styles/homeChromeDensity.test.ts
index e6e09d54..dbe4b107 100644
--- a/src/styles/homeChromeDensity.test.ts
+++ b/src/styles/homeChromeDensity.test.ts
@@ -11,30 +11,30 @@ const workspaceManager = readFileSync(
 )
 
 describe('home chrome density', () => {
-  it('keeps Home chrome metrics aligned with home.png CSS px', () => {
-    expect(homeView).toMatch(/data-home-density="capture-1to1"/)
+  it('keeps Home chrome metrics aligned with HTML demo Home chrome', () => {
+    expect(homeView).toMatch(/data-home-density="html-demo"/)
     expect(homeView).toMatch(/data-home-chrome="minimal"/)
     expect(homeView).toMatch(
-      /\.bc-home-workspace\s*\{[\s\S]*?grid-template-columns:\s*minmax\(220px, 248px\)/,
+      /\.bc-home-workspace\s*\{[\s\S]*?grid-template-columns:\s*minmax\(240px, 260px\)/,
     )
     expect(homeView).toMatch(
-      /\.bc-session-tree\s*\{[\s\S]*?grid-template-rows:\s*28px minmax\(0, 1fr\) 32px/,
-    )
-    expect(homeView).toMatch(/\.bc-session-tree header\s*\{[\s\S]*?font-size:\s*12px/)
-    expect(homeView).toMatch(/\.bc-tree-row\s*\{[\s\S]*?min-height:\s*20px/)
-    expect(homeView).toMatch(/\.bc-tree-footer button\s*\{[\s\S]*?height:\s*28px/)
-    expect(homeView).toMatch(/\.bc-tree-footer input\s*\{[\s\S]*?height:\s*22px/)
-    expect(homeView).toMatch(/\.bc-selected-actions button\s*\{[\s\S]*?width:\s*95.5px/)
-    expect(homeView).toMatch(/\.bc-selected-actions button\s*\{[\s\S]*?height:\s*30px/)
+      /\.bc-session-tree\s*\{[\s\S]*?grid-template-rows:\s*auto minmax\(0, 1fr\) auto/,
+    )
+    expect(homeView).toMatch(/\.bc-session-tree header\s*\{[\s\S]*?font-size:\s*13px/)
+    expect(homeView).toMatch(/\.bc-tree-row\s*\{[\s\S]*?min-height:\s*22px/)
+    expect(homeView).toMatch(/\.bc-tree-footer button\s*\{[\s\S]*?height:\s*24px/)
+    expect(homeView).toMatch(/\.bc-tree-footer input\s*\{[\s\S]*?height:\s*24px/)
+    expect(homeView).toMatch(/\.bc-selected-actions button\s*\{[\s\S]*?min-width:\s*80px/)
+    expect(homeView).toMatch(/\.bc-selected-actions button\s*\{[\s\S]*?height:\s*28px/)
     expect(homeView).toMatch(
-      /\.new-session-grid\s*\{[\s\S]*?grid-template-columns:\s*repeat\(3, minmax\(140px, 157px\)\)/,
+      /\.new-session-grid\s*\{[\s\S]*?grid-template-columns:\s*repeat\(3, minmax\(180px, 220px\)\)/,
     )
-    expect(homeView).toMatch(/\.session-card-icon\s*\{[\s\S]*?width:\s*48px/)
+    expect(homeView).toMatch(/\.session-card-icon\s*\{[\s\S]*?width:\s*56px/)
     expect(homeView).toMatch(
-      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?min-height:\s*131px/,
+      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?min-height:\s*110px/,
     )
-    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?border-radius:\s*0/)
-    expect(homeView).toMatch(/:size="48"/)
+    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?border-radius:\s*6px/)
+    expect(homeView).toMatch(/:size="52"/)
     expect(homeView).not.toMatch(/min-height:\s*7px/)
     expect(homeView).not.toMatch(/height:\s*6px/)
     expect(homeView).not.toMatch(/height:\s*7px/)
@@ -75,19 +75,19 @@ describe('home chrome density', () => {
 })
 
 describe('home launch card band residual', () => {
-  it('keeps Home New tree / launch cards / instruction metrics on capture bands', () => {
+  it('keeps Home New tree / launch cards / instruction metrics on demo card bands', () => {
     expect(homeView).toMatch(/data-card-band/)
     expect(homeView).toMatch(/homeCardBand/)
     expect(homeView).toMatch(
-      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?min-height:\s*131px/,
+      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?min-height:\s*110px/,
     )
     expect(homeView).toMatch(
-      /\.new-session-card\[data-card-band='short'\]\s*\{[\s\S]*?min-height:\s*91\.5px/,
+      /\.new-session-card\[data-card-band='short'\]\s*\{[\s\S]*?min-height:\s*110px/,
     )
-    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?min-height:\s*91\.5px/)
+    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?min-height:\s*110px/)
     expect(homeView).toMatch(/\.bc-home-instructions\s*\{[\s\S]*?min-height:\s*20px/)
     expect(homeView).toMatch(/\.bc-home-instructions\s*\{[\s\S]*?font-size:\s*12px/)
-    expect(homeView).toMatch(/\.bc-tree-footer button\s*\{[\s\S]*?height:\s*28px/)
+    expect(homeView).toMatch(/\.bc-tree-footer button\s*\{[\s\S]*?height:\s*24px/)
     expect(homeView).not.toMatch(/min-height:\s*6px/)
   })
 })
@@ -100,20 +100,20 @@ describe('home main fill', () => {
 })
 
 describe('home tree fill', () => {
-  it('matches capture home session-tree fill #e3e7ed', () => {
-    expect(homeView).toMatch(/\.bc-session-tree\s*\{[\s\S]*?background:\s*#e3e7ed/)
+  it('matches demo session-tree fill #f5f5f5', () => {
+    expect(homeView).toMatch(/\.bc-session-tree\s*\{[\s\S]*?background:\s*#f5f5f5/)
   })
 })
 
 describe('home session-tree header fill', () => {
-  it('matches capture session-tree header fill #ededed', () => {
-    expect(homeView).toMatch(/\.bc-session-tree header\s*\{[\s\S]*?background:\s*#ededed/)
+  it('matches demo session-tree header fill #f5f5f5', () => {
+    expect(homeView).toMatch(/\.bc-session-tree header\s*\{[\s\S]*?background:\s*#f5f5f5/)
   })
 })
 
 describe('home session-tree footer fill', () => {
-  it('matches capture session-tree footer fill #fdfdfd', () => {
-    expect(homeView).toMatch(/\.bc-tree-footer\s*\{[\s\S]*?background:\s*#fdfdfd/)
+  it('matches demo session-tree footer fill #f5f5f5', () => {
+    expect(homeView).toMatch(/\.bc-tree-footer\s*\{[\s\S]*?background:\s*#f5f5f5/)
   })
 })
 
@@ -135,16 +135,16 @@ describe('home launch cream', () => {
 })
 
 describe('home launch card band height lock', () => {
-  it('locks Home launch card bands to capture heights without inherited line-box stretch', () => {
-    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?height:\s*91\.5px/)
+  it('locks Home launch card bands to demo card heights without inherited line-box stretch', () => {
+    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?height:\s*110px/)
     expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?line-height:\s*1/)
-    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?font-size:\s*12px/)
+    expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?font-size:\s*13px/)
     expect(homeView).toMatch(/\.new-session-card\s*\{[\s\S]*?align-self:\s*start/)
     expect(homeView).toMatch(
-      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?height:\s*131px/,
+      /\.new-session-card\[data-card-band='tall'\]\s*\{[\s\S]*?height:\s*110px/,
     )
     expect(homeView).toMatch(
-      /\.new-session-card\[data-card-band='short'\]\s*\{[\s\S]*?height:\s*91\.5px/,
+      /\.new-session-card\[data-card-band='short'\]\s*\{[\s\S]*?height:\s*110px/,
     )
   })
 })
diff --git a/src/styles/htmlDemoSimplifyChrome.test.ts b/src/styles/htmlDemoSimplifyChrome.test.ts
new file mode 100644
index 00000000..6f105ca1
--- /dev/null
+++ b/src/styles/htmlDemoSimplifyChrome.test.ts
@@ -0,0 +1,39 @@
+import { readFileSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
+const css = readFileSync(resolve(root, 'src/styles/main.css'), 'utf8')
+const folderView = readFileSync(resolve(root, 'src/views/FolderCompareView.vue'), 'utf8')
+const textView = readFileSync(resolve(root, 'src/views/TextCompareView.vue'), 'utf8')
+const filters = readFileSync(resolve(root, 'src/app/folderDisplayFilters.ts'), 'utf8')
+const e2e = readFileSync(resolve(root, 'tests/e2e/ui-design-alignment.spec.ts'), 'utf8')
+
+describe('HTML demo simplify chrome', () => {
+  it('defaults Rules and Filters panels off to match demo hierarchy', () => {
+    expect(folderView).toMatch(/const showFolderRules = ref\(false\)/)
+    expect(textView).toMatch(/const showTextRules = ref\(false\)/)
+    expect(filters).toMatch(/showFiltersPanel:\s*false/)
+    expect(filters).toMatch(/showFiltersPanel:\s*parsed\.showFiltersPanel === true/)
+  })
+
+  it('tucks non-demo headers and export docks while keeping Compare/Run CTAs', () => {
+    expect(css).toMatch(/\.hex-header[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(/\.picture-header[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(/\.file-format-view \.format-io-panel[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(/\.options-hint[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(
+      /\.folder-compare-view \.path-meta-footer[\s\S]*?display:\s*none\s*!important/,
+    )
+    expect(css).toMatch(/\.merge-header[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(/\.hex-report-panel[\s\S]*?display:\s*none\s*!important/)
+    expect(css).toMatch(
+      /\.folder-actions button\[data-testid\^=.export-.[^\]]*\][\s\S]*?display:\s*none\s*!important/,
+    )
+    expect(css).toMatch(
+      /\.workbench-toolbar\.compare-toolbar,\s*\.text-compare-view \.compare-toolbar\s*\{[\s\S]*?min-height:\s*28px/,
+    )
+    expect(e2e).toMatch(/toHaveCSS\('height', '26px'\)/)
+  })
+})
diff --git a/src/styles/main.css b/src/styles/main.css
index c091051a..85281525 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,37 +1,42 @@
 :root {
   color-scheme: light;
 
+  /* Aligned with standalone HTML demo chrome tokens (css/demo.css). */
   --app-bg: #ffffff;
   --app-canvas: #ffffff;
   --app-surface: #f0f0f0;
   --app-surface-low: #ececec;
   --app-surface-muted: #e6e6e6;
-  --app-surface-container: #eeeeee;
+  --app-surface-container: #f9f9f9;
   --app-surface-high: #dedede;
-  --app-surface-highest: #c7dff6;
-  --app-border: #c0c0c0;
-  --app-border-soft: rgb(176 182 190 / 0.62);
-  --app-text: #111111;
-  --app-text-muted: #3f3f46;
-  --app-text-faint: #737373;
-  --app-primary: #2b75bd;
-  --app-primary-strong: #66b9ff;
-  --app-primary-soft: #c8e4ff;
-  --app-status: #f0f0f0;
-  --app-status-text: #111111;
+  --app-surface-highest: #cce8ff;
+  --app-border: #c8c8c8;
+  --app-border-soft: #dcdcdc;
+  --app-text: #1a1a1a;
+  --app-text-muted: #666666;
+  --app-text-faint: #888888;
+  --app-primary: #0078d4;
+  --app-primary-strong: #0563c1;
+  --app-primary-soft: #cce8ff;
+  --app-status: #d4d4d4;
+  --app-status-text: #1a1a1a;
+  --app-menu: #f0f3f9;
+  --app-title: #f1f3f9;
+  --app-sidebar: #f5f5f5;
+  --app-row-hover: #f0f7ff;
+  --app-row-sel: #cce8ff;
   --diff-added-bg: #f4fff4;
   --diff-added-fg: #005f18;
   --diff-deleted-bg: #ffe3e3;
-  --diff-deleted-fg: #e00000;
+  --diff-deleted-fg: #c00000;
   --diff-modified-bg: #ffe3e3;
-  --diff-modified-fg: #e00000;
+  --diff-modified-fg: #c00000;
   --diff-conflict-bg: #f0ddff;
   --diff-conflict-fg: #8a158a;
   --diff-gutter-bg: #efefef;
-  --font-mono: 'JetBrains Mono', 'Cascadia Mono', consolas, monospace;
-  --app-font-family:
-    'Segoe UI', 'PingFang SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
-  --app-font-size: 18px;
+  --font-mono: 'Consolas', 'Cascadia Mono', 'Menlo', monospace;
+  --app-font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', system-ui, sans-serif;
+  --app-font-size: 13px;
 }
 
 html[data-theme='dark'] {
@@ -148,8 +153,8 @@ select {
 }
 
 .workbench-shell-single-session .bc-session-toolbar {
-  min-height: 39.5px;
-  border-bottom: 1px solid #a0a0a0;
+  min-height: 56px;
+  border-bottom: 1px solid #c8c8c8;
   background: #f0f0f0;
 }
 
@@ -158,18 +163,18 @@ select {
 }
 
 .workbench-shell-single-session .bc-toolbar-command {
-  min-width: 59px;
-  height: 37.5px;
-  padding: 1px 2px 2px;
+  min-width: 52px;
+  height: 48px;
+  padding: 2px 6px;
 }
 
 .workbench-shell-single-session .bc-session-toolbar-compact {
-  min-height: 32px;
+  min-height: 40px;
 }
 
 .workbench-shell-single-session .bc-session-toolbar-compact .bc-toolbar-command {
-  min-width: 40px;
-  height: 32px;
+  min-width: 44px;
+  height: 36px;
 }
 
 .app-shell-single-session .tab-strip {
@@ -189,9 +194,9 @@ select {
 
 .app-shell-single-session .folder-toolbar .path-pair {
   gap: 0 !important;
-  min-height: 20px !important;
-  padding: 0 1px !important;
-  border-bottom: 1px solid #a0a0a0 !important;
+  min-height: 28px !important;
+  padding: 4px 8px !important;
+  border-bottom: 1px solid #c8c8c8 !important;
   background: #f0f0f0 !important;
 }
 
@@ -210,8 +215,8 @@ select {
 
 .app-shell-single-session .folder-toolbar .path-pair .path-field-row > input,
 .app-shell-single-session .folder-toolbar .path-pair .path-field-row > .path-input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   border-radius: 0 !important;
   font-size: 12px !important;
 }
@@ -322,15 +327,15 @@ select {
 .bc-session-toolbar {
   display: flex;
   align-items: stretch;
-  gap: 0;
+  gap: 2px;
   min-width: 0;
-  min-height: 39.5px;
-  padding: 1px 2px;
+  min-height: 56px;
+  padding: 4px 8px;
   overflow: auto hidden;
-  border-bottom: 1px solid #a0a0a0;
+  border-bottom: 1px solid #c8c8c8;
 
-  /* Capture MainBar band is white, not app-surface gray */
-  background: #ffffff;
+  /* Demo toolbar band */
+  background: #f0f0f0;
 }
 
 /* Text Merge capture MainBar wraps to ~2×38px (~83px CSS at DPR≈2) instead of horizontal-only scroll. */
@@ -423,25 +428,26 @@ select {
 
 .bc-toolbar-command {
   display: grid;
-  grid-template-rows: 20px auto;
-  align-content: center;
-  justify-items: center;
-  box-sizing: border-box;
+  grid-template-rows: 22px auto;
   flex: 0 0 auto;
+  gap: 2px;
   width: auto;
-  min-width: 59px;
+  min-width: 52px;
   max-width: 88px;
-  height: 37.5px;
-  padding: 1px 2px 2px;
+  height: 48px;
+  padding: 2px 6px;
   overflow: hidden;
-  border: 0;
-  border-right: 0;
+  border: 1px solid transparent;
+  border-radius: 3px;
   background: transparent;
   color: #1a1a1a;
   font-size: 11px;
   line-height: 12px;
   white-space: nowrap;
   cursor: default;
+  align-content: center;
+  justify-items: center;
+  box-sizing: border-box;
 }
 
 .bc-toolbar-command > span,
@@ -456,14 +462,16 @@ select {
 
 /* Capture MainBar active: ~#cce8ff fill, ~#a5c7f7 edge */
 .bc-toolbar-command-active {
-  border-radius: 2px;
+  border-radius: 3px;
+  border-color: #99c9ef;
   background: #cce8ff;
-  box-shadow: inset 0 0 0 1px #a5c7f7;
+  box-shadow: none;
 }
 
 .bc-toolbar-command:hover:not(:disabled) {
-  border-radius: 2px;
-  background: #e5f2fc;
+  border-radius: 3px;
+  border-color: #c8c8c8;
+  background: #e8e8e8;
 }
 
 .bc-toolbar-command-active:hover:not(:disabled) {
@@ -491,15 +499,15 @@ select {
 }
 
 .bc-session-toolbar-compact {
-  min-height: 39.5px;
+  min-height: 40px;
 }
 
 .bc-session-toolbar-compact .bc-toolbar-command {
-  grid-template-rows: 20px auto;
-  min-width: 48px;
+  grid-template-rows: 18px auto;
+  min-width: 44px;
   max-width: 80px;
-  height: 37.5px;
-  padding: 1px 2px;
+  height: 36px;
+  padding: 1px 4px;
   font-size: 10px;
   line-height: 11px;
 }
@@ -1172,8 +1180,8 @@ select {
   flex: 1 1 auto !important;
   width: auto !important;
   min-width: 0 !important;
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   overflow: hidden !important;
   font-size: 12px !important;
@@ -1470,7 +1478,7 @@ select {
 }
 
 .folder-filter-pattern {
-  height: 16.5px !important;
+  height: 24px !important;
   padding: 0 6px !important;
   border: 1px solid #a0a0a0 !important;
   border-radius: 0 !important;
@@ -1490,15 +1498,15 @@ select {
 
 .folder-filter-strip-btn {
   display: grid !important;
-  grid-template-rows: 20px auto !important;
+  grid-template-rows: 22px auto !important;
   align-content: center !important;
   justify-items: center !important;
   box-sizing: border-box !important;
-  width: 59px !important;
-  min-width: 59px !important;
-  max-width: 59px !important;
-  height: 37.5px !important;
-  padding: 1px 2px 2px !important;
+  width: 52px !important;
+  min-width: 52px !important;
+  max-width: 72px !important;
+  height: 48px !important;
+  padding: 2px 6px !important;
   border: 0 !important;
   border-right: 1px solid #c0c0c0 !important;
   background: transparent !important;
@@ -1624,7 +1632,7 @@ select {
 .split-pane-header,
 .pane-header,
 .metadata-header {
-  min-height: 16.5px !important;
+  min-height: 24px !important;
   padding: 1px 3px !important;
   border-color: #c7cbd1 !important;
   border-radius: 0 !important;
@@ -1964,7 +1972,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .folder-compare-view .tree-row.selected {
-  background: #a8cdf1 !important;
+  background: #cce8ff !important;
   outline: 0 !important;
 }
 
@@ -2049,7 +2057,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .folder-sync-view .sync-row-selected {
-  background: #a8cdf1 !important;
+  background: #cce8ff !important;
 }
 
 .folder-sync-view .folder-session-log {
@@ -2093,7 +2101,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
 
 .folder-merge-view .merge-plan-row.selected {
   outline: 0 !important;
-  background: #a8cdf1 !important;
+  background: #cce8ff !important;
 }
 
 .folder-merge-view .folder-session-log {
@@ -2411,8 +2419,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .picture-compare-view .picture-path-panel input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   font-size: 12px !important;
 }
@@ -2724,8 +2732,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .media-compare-view .media-path-panel input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   border-radius: 0 !important;
   font-size: 12px !important;
@@ -2958,8 +2966,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .version-compare-view .version-path-panel input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 6px !important;
   border: 1px solid #a0a0a0 !important;
   border-radius: 0 !important;
@@ -3167,8 +3175,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .registry-compare-view .path-field-row .path-input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
 }
 
 .registry-compare-view .registry-input-panel textarea {
@@ -3672,7 +3680,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .text-compare-view .bc-path-row input {
-  height: 16.5px !important;
+  height: 24px !important;
   padding: 0 4px !important;
   font-size: 12px !important;
 }
@@ -3825,7 +3833,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .text-merge-view .output-path-input {
-  height: 16.5px !important;
+  height: 24px !important;
   padding: 0 4px !important;
   border-radius: 0 !important;
   font-size: 12px !important;
@@ -3954,8 +3962,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .folder-sync-view .path-field-row .path-input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
 }
 
 .folder-sync-view .sync-setting-actions {
@@ -4088,26 +4096,26 @@ html[data-show-path-bars='0'] .path-pair-bar {
 
 .folder-sync-view .folder-filter-chrome[data-filters-align='capture-1to1-residual'] {
   gap: 4px 6px !important;
-  min-height: 37.5px !important;
+  min-height: 48px !important;
 }
 
 .folder-sync-view .folder-filter-chrome {
-  min-height: 37.5px !important;
+  min-height: 48px !important;
   padding: 0 4px !important;
   border-bottom: 1px solid #a0a0a0 !important;
   background: #f0f0f0 !important;
 }
 
 .folder-sync-view .folder-filter-chrome[data-sync-filters-place='capture-1to1-residual'] {
-  min-height: 37.5px !important;
+  min-height: 48px !important;
   background: #f0f0f0 !important;
 }
 
 .folder-sync-view
   .sync-filter-pattern-field
   .folder-filter-pattern[data-sync-pattern-place='capture-1to1-residual'] {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 6px !important;
   border-radius: 0 !important;
   font-size: 12px !important;
@@ -4128,8 +4136,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .folder-merge-view .merge-paths input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   border-radius: 2px !important;
   font-size: 11px !important;
@@ -4146,8 +4154,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 
 .folder-merge-view .merge-to-chrome .path-input,
 .folder-merge-view .merge-to-chrome input[type='text'] {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   font-size: 11px !important;
 }
@@ -4184,8 +4192,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
   .n-button[data-testid='folder-merge-same-ok'] {
   width: 64.5px !important;
   min-width: 64.5px !important;
-  height: 37.5px !important;
-  min-height: 37.5px !important;
+  height: 48px !important;
+  min-height: 48px !important;
   padding: 0 4px !important;
   font-size: 11px !important;
 }
@@ -4195,8 +4203,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
   .n-button[data-testid='folder-merge-peek'] {
   width: 59px !important;
   min-width: 59px !important;
-  height: 37.5px !important;
-  min-height: 37.5px !important;
+  height: 48px !important;
+  min-height: 48px !important;
   padding: 0 4px !important;
   font-size: 11px !important;
 }
@@ -4478,8 +4486,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 }
 
 .text-edit-view .path-input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
 }
 
 .text-edit-view .toolbar-button {
@@ -4547,8 +4555,8 @@ html[data-show-path-bars='0'] .path-pair-bar {
 
 .text-patch-view .path-field-row input,
 .text-patch-view .path-field-row .path-input {
-  height: 16.5px !important;
-  min-height: 16.5px !important;
+  height: 24px !important;
+  min-height: 24px !important;
   padding: 0 4px !important;
   border-radius: 0 !important;
   font-size: 12px !important;
@@ -4974,3 +4982,480 @@ html[data-show-path-bars='0'] .path-pair-bar {
   border-radius: 0 !important;
   font-size: 11px !important;
 }
+
+/* stylelint-disable no-duplicate-selectors -- HTML demo chrome overrides for Options/Formats/Scripts/session stubs */
+.settings-view {
+  display: grid !important;
+  grid-template-columns: 220px minmax(0, 1fr) !important;
+  gap: 0 !important;
+  height: 100% !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  background: #ffffff !important;
+  font-size: 12px !important;
+  line-height: 1.45 !important;
+}
+
+.settings-view .options-section-nav {
+  gap: 0 !important;
+  height: 100% !important;
+  max-height: none !important;
+  padding: 8px 0 !important;
+  overflow: auto !important;
+  border: 0 !important;
+  border-right: 1px solid #c8c8c8 !important;
+  border-radius: 0 !important;
+  background: #f5f5f5 !important;
+}
+
+.settings-view .options-tree-group-label {
+  padding: 10px 14px 4px !important;
+  color: #666666 !important;
+  font-size: 11px !important;
+  font-weight: 600 !important;
+}
+
+.settings-view .options-section-button {
+  min-height: 28px !important;
+  padding: 6px 14px !important;
+  font-size: 12px !important;
+  box-shadow: none !important;
+}
+
+.settings-view .options-section-button:hover {
+  background: #e8f4ff !important;
+}
+
+.settings-view .options-section-button.active {
+  background: #cce8ff !important;
+  font-weight: 600 !important;
+  box-shadow: none !important;
+}
+
+.settings-view .options-content {
+  gap: 10px !important;
+  height: 100% !important;
+  padding: 16px 20px !important;
+  overflow: auto !important;
+  background: #ffffff !important;
+}
+
+.settings-view .options-content [class='n-card__content'] {
+  gap: 10px !important;
+  padding: 4px 0 0 !important;
+}
+
+.settings-view .options-content .n-checkbox {
+  min-height: 22px !important;
+  font-size: 12px !important;
+}
+
+.settings-view .n-card-header {
+  min-height: 28px !important;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+}
+
+.settings-view .stack-row input,
+.settings-view .stack-row select,
+.settings-view .open-with-draft input,
+.settings-view .n-input,
+.settings-view .n-base-selection,
+.settings-view .n-input-number,
+.settings-view .n-button {
+  --n-height: 26px !important;
+
+  height: 26px !important;
+  min-height: 26px !important;
+  border-radius: 2px !important;
+  font-size: 12px !important;
+}
+
+.settings-view .options-footer-btn,
+.options-footer-btn {
+  height: 28px !important;
+  min-height: 28px !important;
+  padding: 0 16px !important;
+  border: 1px solid #c8c8c8 !important;
+  border-radius: 3px !important;
+  background: #fafafa !important;
+  font-size: 12px !important;
+}
+
+.file-format-view,
+.remote-profile-view {
+  gap: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  background: #ffffff !important;
+}
+
+.file-format-view .format-workspace,
+.remote-profile-view .profile-workspace {
+  grid-template-columns: 220px minmax(0, 1fr) !important;
+  gap: 0 !important;
+  height: 100% !important;
+  min-height: 0 !important;
+}
+
+.file-format-view .format-list-panel,
+.remote-profile-view .profile-list-panel {
+  padding: 8px 0 !important;
+  border: 0 !important;
+  border-right: 1px solid #c8c8c8 !important;
+  background: #f5f5f5 !important;
+}
+
+.file-format-view .format-detail-panel,
+.remote-profile-view .profile-detail-panel {
+  padding: 16px 20px !important;
+  border: 0 !important;
+  background: #ffffff !important;
+}
+
+.file-format-view .format-row,
+.remote-profile-view .profile-row {
+  min-height: 28px !important;
+  padding: 6px 14px !important;
+}
+
+.file-format-view .format-row.active,
+.remote-profile-view .profile-row.active {
+  background: #cce8ff !important;
+  border-color: transparent !important;
+  font-weight: 600 !important;
+}
+
+.file-format-view button,
+.remote-profile-view button {
+  height: 28px !important;
+  min-height: 28px !important;
+  padding: 0 16px !important;
+  border-radius: 3px !important;
+}
+
+.file-format-view input:not([type='checkbox']),
+.file-format-view select,
+.remote-profile-view input:not([type='checkbox']),
+.remote-profile-view select {
+  height: 26px !important;
+  min-height: 26px !important;
+}
+
+.file-format-view textarea {
+  min-height: 96px !important;
+}
+
+.reports-script-view {
+  display: grid !important;
+  grid-template-columns: 1fr 1fr !important;
+  grid-template-rows: minmax(0, 1fr) !important;
+  gap: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+}
+
+.reports-script-view .report-panel,
+.reports-script-view .script-panel {
+  display: flex !important;
+  flex-direction: column !important;
+  border: 0 !important;
+  border-right: 1px solid #c8c8c8 !important;
+}
+
+.reports-script-view .script-panel {
+  border-right: 0 !important;
+}
+
+.reports-script-view .split-pane-header,
+.reports-script-view .report-panel > header,
+.reports-script-view .script-panel > header {
+  min-height: 28px !important;
+  padding: 6px 10px !important;
+  border-bottom: 1px solid #c8c8c8 !important;
+  background: #f0f0f0 !important;
+  font-weight: 600 !important;
+}
+
+.reports-script-view .script-panel textarea,
+.reports-script-view .script-panel pre {
+  flex: 1 1 auto !important;
+  padding: 10px !important;
+  border: 0 !important;
+  font-family: var(--font-mono) !important;
+  font-size: 12px !important;
+}
+
+.session-settings-dialog {
+  gap: 0 !important;
+  padding: 0 !important;
+  background: #ffffff !important;
+  box-shadow: 2px 2px 8px rgb(0 0 0 / 0.18) !important;
+}
+
+.session-settings-dialog .settings-body,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] .settings-body {
+  gap: 10px !important;
+  padding: 16px 20px !important;
+  border: 0 !important;
+  background: #ffffff !important;
+}
+
+.session-settings-dialog .settings-tabs,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] .settings-tabs {
+  gap: 0 !important;
+  padding: 8px 0 !important;
+  background: #f5f5f5 !important;
+}
+
+.session-settings-dialog .settings-tabs button,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] .settings-tabs button {
+  height: auto !important;
+  min-height: 28px !important;
+  padding: 6px 14px !important;
+  border: 0 !important;
+  text-align: left !important;
+}
+
+.session-settings-dialog .settings-tabs button.active,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] .settings-tabs button.active {
+  background: #cce8ff !important;
+  font-weight: 600 !important;
+  box-shadow: none !important;
+}
+
+.session-settings-dialog .settings-body input:not([type='checkbox']),
+.session-settings-dialog .settings-body select {
+  height: 26px !important;
+  min-height: 26px !important;
+}
+
+.session-settings-dialog header button,
+.session-settings-dialog footer button,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] header button,
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] footer button {
+  height: 28px !important;
+  min-height: 28px !important;
+  padding: 0 16px !important;
+  border-radius: 3px !important;
+}
+
+.session-settings-dialog[data-rules-depth='capture-1to1-residual'] {
+  gap: 0 !important;
+  background: #ffffff !important;
+}
+
+.empty-hint,
+.session-empty-hint,
+.compare-empty-hint,
+.folder-empty-state,
+.text-empty-state,
+.clipboard-compare-view .empty.empty-hint {
+  display: flex !important;
+  flex: 1 1 auto !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-height: 120px !important;
+  padding: 24px !important;
+  background: #f9f9f9 !important;
+  color: #666666 !important;
+  font-size: 13px !important;
+  line-height: 1.6 !important;
+  text-align: center !important;
+}
+
+.chip {
+  height: 22px;
+  padding: 0 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 11px;
+  background: #ffffff;
+  font-size: 11px;
+}
+
+.chip.on,
+.chip.active,
+.chip[aria-pressed='true'] {
+  border-color: #7ab0e0;
+  background: #cce8ff;
+  color: #055a9e;
+}
+
+.pane-head,
+.split-pane-header,
+.metadata-header,
+.diff-header {
+  min-height: 24px !important;
+  border-bottom: 1px solid #c8c8c8 !important;
+  background: #f0f0f0 !important;
+  color: #333333 !important;
+  font-size: 12px !important;
+  font-weight: 600 !important;
+}
+
+/* ---- HTML demo simplify: tuck non-demo chrome (handlers stay in DOM) ---- */
+
+/* Extra action docks / hints not in the HTML demo chrome.
+   Keep primary Compare / Run controls visible for session CTAs. */
+.folder-root-summary,
+.archive-path-hint,
+.folder-compare-view .folder-toolbar > button[data-testid='open-folder-session-settings'],
+.options-hint,
+.options-cluster-hint,
+.format-header .eyebrow,
+.profile-header .eyebrow,
+.file-format-view .format-io-panel,
+.folder-status-legend-slot,
+.hex-header,
+.picture-header,
+.media-header,
+.registry-header,
+.version-header,
+.text-edit-view > header,
+.text-edit-view .eyebrow,
+.hex-report-panel,
+.picture-report-panel,
+.media-report-panel,
+.registry-report-panel,
+.version-report-panel,
+.table-report-actions,
+.hex-summary,
+button[data-testid='open-hex-session-settings'],
+button[data-testid='open-picture-session-settings'],
+button[data-testid='open-table-session-settings'],
+button[data-testid='open-media-session-settings'],
+button[data-testid='open-registry-session-settings'],
+button[data-testid='open-version-session-settings'],
+button[data-testid='open-text-session-settings'],
+.folder-actions button[data-testid^='export-'],
+.folder-actions .n-button[data-testid^='export-'],
+.compare-toolbar button[data-testid^='export-'],
+.compare-toolbar .toolbar-button[data-testid^='export-'] {
+  display: none !important;
+}
+
+/* Aux text toolbar: keep Run/Undo/Copy; densify instead of removing */
+.workbench-toolbar.compare-toolbar,
+.text-compare-view .compare-toolbar {
+  flex-wrap: wrap !important;
+  gap: 2px !important;
+  min-height: 28px !important;
+  max-height: none !important;
+  padding: 2px 4px !important;
+}
+
+.folder-actions,
+.folder-merge-view .folder-actions {
+  gap: 4px !important;
+  padding: 2px 4px !important;
+}
+
+/* Specialty path meta strips — demo dual-paths are bare */
+.hex-path-meta-strip,
+.picture-compare-view .path-meta-footer,
+.media-compare-view .path-meta-footer,
+.registry-compare-view .path-meta-footer,
+.version-compare-view .path-meta-footer,
+.table-compare-view .path-meta-footer {
+  display: none !important;
+}
+
+/* Keep path/profile pickers usable when profiles exist — just denser */
+.remote-profile-pair {
+  gap: 4px !important;
+  min-height: 24px !important;
+  padding: 2px 4px !important;
+}
+
+/* Patch keeps Parse/Apply (demo sync-ops), but single dense row */
+.workbench-toolbar.patch-toolbar {
+  min-height: 28px !important;
+  padding: 2px 6px !important;
+}
+
+/* Path bars: demo is bare inputs + browse — drop side labels */
+.folder-toolbar .path-pair > label > span:first-child,
+.folder-merge-view .path-pair > label > span:first-child,
+.folder-sync-view .path-field-row > span:first-of-type {
+  display: none !important;
+}
+
+/* Folder path meta under inputs — demo folder has none (text uses meta-bar) */
+.folder-compare-view .path-meta-footer,
+.folder-merge-view .path-meta-footer,
+.folder-sync-view .path-meta-footer {
+  display: none !important;
+}
+
+/* Formats / Profiles: drop marketing header; keep list+detail */
+.file-format-view .format-header,
+.remote-profile-view .profile-header {
+  display: none !important;
+}
+
+/* Options: denser body, no hint stack */
+.settings-view .options-content {
+  gap: 8px !important;
+}
+
+.settings-view .options-content .n-card {
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+/* Merge / Sync: drop page headers; keep path/ops (demo sync-ops / dual-paths) */
+.merge-header,
+.merge-summary {
+  display: none !important;
+}
+
+.merge-actions-bar .merge-actions button[data-testid^='export-'],
+.sync-setting-actions button[data-testid^='export-'],
+.sync-setting-actions button[data-testid='folder-sync-apply-to-all'],
+.sync-setting-actions button[data-testid='folder-sync-skip-remaining'] {
+  display: none !important;
+}
+
+.sync-settings > label > span {
+  display: none !important;
+}
+
+/* Session log: demo is a thin strip, not a tool dock */
+.folder-session-log-gutter {
+  display: none !important;
+}
+
+.folder-session-log {
+  min-height: 22px !important;
+  max-height: 48px !important;
+}
+
+/* Empty states: one quiet line like demo .empty-hint */
+.empty-hint,
+.session-empty-hint,
+.compare-empty-hint,
+.folder-empty-state,
+.text-empty-state,
+.folder-sync-empty-state,
+.clipboard-compare-view .empty.empty-hint {
+  min-height: 80px !important;
+  padding: 16px !important;
+  background: #f9f9f9 !important;
+  color: #666666 !important;
+  font-size: 12px !important;
+}
+
+/* Home: quieter cards / less stacked chrome */
+.home-view .session-edit-panel,
+.home-view .session-save-panel {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+/* Sync/Merge action rows: keep essential ops, flatten */
+.folder-sync-header,
+.folder-merge-view header {
+  gap: 4px !important;
+}
+
+/* stylelint-enable no-duplicate-selectors */
diff --git a/src/styles/mediaChromeDensity.test.ts b/src/styles/mediaChromeDensity.test.ts
index efb8dd35..13cee9e6 100644
--- a/src/styles/mediaChromeDensity.test.ts
+++ b/src/styles/mediaChromeDensity.test.ts
@@ -12,10 +12,8 @@ describe('media compare chrome density', () => {
   it('keeps Media Compare path/status/toolbar/footer chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.media-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(css).toMatch(/\.media-compare-view \.media-path-panel\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(mediaView).toMatch(/\.media-path-field \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
-    expect(css).toMatch(
-      /\.media-compare-view \.media-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/,
-    )
+    expect(mediaView).toMatch(/\.media-path-field \.path-input\s*\{[\s\S]*?height:\s*24px/)
+    expect(css).toMatch(/\.media-compare-view \.media-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.media-compare-view \.media-path-panel button\s*\{[\s\S]*?height:\s*20px/)
     expect(css).toMatch(/\.media-compare-view \.path-side-footer\s*\{[\s\S]*?font-size:\s*11px/)
     expect(css).toMatch(/\.media-compare-view \.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
@@ -34,8 +32,8 @@ describe('media compare chrome density', () => {
     expect(mediaView).not.toMatch(/font-size:\s*9px/)
     expect(mediaView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='media-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='media-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Media scrub/footer chrome on capture band', () => {
@@ -103,9 +101,7 @@ describe('media path scrub chrome residual', () => {
     expect(css).toMatch(
       /\.media-compare-view \.media-path-meta-strip[\s\S]*?border:\s*1px solid #c0c0c0/,
     )
-    expect(css).toMatch(
-      /\.media-compare-view \.media-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/,
-    )
+    expect(css).toMatch(/\.media-compare-view \.media-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(mediaView).toMatch(/\.media-player-card > span\s*\{[\s\S]*?display:\s*none/)
     expect(mediaView).toMatch(/\.media-playback-header\s*\{[\s\S]*?display:\s*none/)
     expect(mediaView).toMatch(/\.media-playback-hint\s*\{[\s\S]*?display:\s*none/)
diff --git a/src/styles/pathStatusDensity.test.ts b/src/styles/pathStatusDensity.test.ts
index 29775a4f..5c3a64a5 100644
--- a/src/styles/pathStatusDensity.test.ts
+++ b/src/styles/pathStatusDensity.test.ts
@@ -79,15 +79,11 @@ describe('path/status strip density', () => {
     expect(css).toMatch(/\.bc-path-footers \.path-meta-chip[\s\S]*?height:\s*16px/)
   })
 
-  it('keeps shared status strip near capture ~19.5px CSS height', () => {
+  it('keeps shared status strip near capture ~26px CSS height', () => {
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*26px/)
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(layout).toMatch(
-      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?grid-template-rows:\s*23\.5px minmax\(0, 1fr\) 19\.5px/,
+      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?grid-template-rows:\s*23\.5px minmax\(0, 1fr\) 26px/,
     )
   })
 
diff --git a/src/styles/peekOptionsDensity.test.ts b/src/styles/peekOptionsDensity.test.ts
index 4c67ed87..ba9331b8 100644
--- a/src/styles/peekOptionsDensity.test.ts
+++ b/src/styles/peekOptionsDensity.test.ts
@@ -30,7 +30,7 @@ describe('peek panel densify', () => {
     expect(css).toMatch(/\.folder-peek-panel header,[\s\S]*?min-height:\s*20px/)
     expect(css).toMatch(/\.peek-tabs\s*\{[\s\S]*?min-height:\s*20px/)
     expect(css).toMatch(/\.folder-peek-panel dt,[\s\S]*?font-size:\s*11px/)
-    expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*20px auto/)
+    expect(css).toMatch(/\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*22px auto/)
 
     expect(folderView).toMatch(/data-testid="folder-peek-tabs"/)
     expect(folderView).toMatch(/data-testid="folder-peek-dual"/)
@@ -43,7 +43,7 @@ describe('peek panel densify', () => {
     expect(folderView).toMatch(/\.folder-peek-panel header\s*\{[\s\S]*?min-height:\s*20px/)
     expect(folderView).toMatch(/\.peek-dual-columns\s*\{[\s\S]*?gap:\s*0/)
     expect(folderView).toMatch(
-      /\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*20px auto/,
+      /\.folder-filter-strip-btn\s*\{[\s\S]*?grid-template-rows:\s*22px auto/,
     )
 
     expect(syncView).toMatch(/data-testid="folder-sync-peek-tabs"/)
@@ -61,28 +61,30 @@ describe('peek panel densify', () => {
 })
 
 describe('options dialog densify', () => {
-  it('keeps Options tree/content chrome at capture CSS scale and wired section ids', () => {
-    expect(css).toMatch(/\.settings-view\s*\{[\s\S]*?padding:\s*4px 6px/)
-    expect(css).toMatch(/\.settings-view \.options-section-nav[\s\S]*?border:\s*1px solid #a0a0a0/)
-    expect(css).toMatch(/\.settings-view \.options-section-button[\s\S]*?min-height:\s*18px/)
+  it('keeps Options tree/content chrome aligned with HTML demo opts layout', () => {
+    expect(css).toMatch(/\.settings-view\s*\{[\s\S]*?padding:\s*0/)
+    expect(css).toMatch(
+      /\.settings-view \.options-section-nav[\s\S]*?border-right:\s*1px solid #c8c8c8/,
+    )
+    expect(css).toMatch(/\.settings-view \.options-section-button[\s\S]*?min-height:\s*28px/)
     expect(css).toMatch(/\.settings-view \.options-tree-group-label[\s\S]*?font-size:\s*11px/)
-    expect(css).toMatch(/\.settings-view \.n-card-header[\s\S]*?min-height:\s*20px/)
+    expect(css).toMatch(/\.settings-view \.n-card-header[\s\S]*?min-height:\s*28px/)
 
-    expect(settingsView).toMatch(/data-options-density="capture-1to1"/)
+    expect(settingsView).toMatch(/data-options-density="html-demo"/)
     expect(settingsView).toMatch(/data-options-content-density="capture-1to1"/)
-    expect(settingsView).toMatch(/\.options-content\s*\{[\s\S]*?gap:\s*4px/)
-    expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?grid-template-columns:\s*176px/)
-    expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?padding:\s*4px 6px/)
-    expect(settingsView).toMatch(/\.options-section-button\s*\{[\s\S]*?min-height:\s*18px/)
+    expect(settingsView).toMatch(/\.options-content\s*\{[\s\S]*?gap:\s*10px/)
+    expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?grid-template-columns:\s*220px/)
+    expect(settingsView).toMatch(/\.settings-view\s*\{[\s\S]*?padding:\s*0/)
+    expect(settingsView).toMatch(/\.options-section-button\s*\{[\s\S]*?min-height:\s*28px/)
     expect(settingsView).toMatch(/\.options-tree-group-label\s*\{[\s\S]*?font-size:\s*11px/)
-    expect(settingsView).toMatch(/\.options-hint\s*\{[\s\S]*?line-height:\s*16px/)
+    expect(settingsView).toMatch(/\.options-hint\s*\{/)
     expect(settingsView).toMatch(
-      /\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?height:\s*20px/,
+      /\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?height:\s*20px|\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?height:\s*26px/,
     )
     expect(settingsView).toMatch(
-      /\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/,
+      /\.stack-row input,\s*\.stack-row select\s*\{[\s\S]*?border:\s*1px solid/,
     )
-    expect(settingsView).toMatch(/:deep\(\.n-card-header\)\s*\{[\s\S]*?min-height:\s*20px/)
+    expect(settingsView).toMatch(/:deep\(\.n-card-header\)\s*\{/)
     expect(settingsView).not.toMatch(/font-size:\s*9px/)
     expect(settingsView).not.toMatch(/min-height:\s*9px/)
     expect(settingsView).toMatch(/data-testid="options-content"/)
@@ -183,9 +185,9 @@ describe('folder merge Same OK / Peek residual', () => {
   it('scales Same OK and Peek action chrome toward capture toolbar plates', () => {
     expect(mergeView).toMatch(/data-same-ok-chrome="capture-1to1-residual"/)
     expect(mergeView).toMatch(/data-peek-residual="capture-1to1"/)
-    expect(mergeView).toMatch(/folder-merge-same-ok[\s\S]*?height:\s*37\.5px/)
-    expect(css).toMatch(/folder-merge-same-ok[\s\S]*?height:\s*37\.5px/)
-    expect(css).toMatch(/\.folder-merge-peek-panel[\s\S]*?border:\s*1px solid #a0a0a0/)
+    expect(mergeView).toMatch(/folder-merge-same-ok[\s\S]*?height:\s*48px/)
+    expect(css).toMatch(/folder-merge-same-ok[\s\S]*?height:\s*48px/)
+    expect(css).toMatch(/\.folder-merge-peek-panel[\s\S]*?border-right:\s*1px solid #c8c8c8/)
   })
 })
 
@@ -193,7 +195,7 @@ describe('folder peek residual', () => {
   it('keeps Folder Peek panel residual chrome toward capture', () => {
     expect(folderView).toMatch(/data-peek-residual="capture-1to1"/)
     expect(folderView).toMatch(/\.folder-peek-panel\[data-peek-residual='capture-1to1'\]/)
-    expect(css).toMatch(/\.folder-peek-panel[\s\S]*?border:\s*1px solid #a0a0a0/)
+    expect(css).toMatch(/\.folder-peek-panel[\s\S]*?border-right:\s*1px solid #c8c8c8/)
   })
 })
 
diff --git a/src/styles/pictureChromeDensity.test.ts b/src/styles/pictureChromeDensity.test.ts
index a267af67..45aefbd1 100644
--- a/src/styles/pictureChromeDensity.test.ts
+++ b/src/styles/pictureChromeDensity.test.ts
@@ -11,12 +11,12 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 describe('picture compare chrome density', () => {
   it('keeps Picture Compare path/status/toolbar/footer chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.picture-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(pictureView).toMatch(/\.picture-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(pictureView).toMatch(/\.picture-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(
-      /\.picture-compare-view \.picture-path-panel\s*\{[\s\S]*?min-height:\s*19\.5px/,
+      /\.picture-compare-view \.picture-path-panel\s*\{[\s\S]*?min-height:\s*26px/,
     )
     expect(css).toMatch(
-      /\.picture-compare-view \.picture-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/,
+      /\.picture-compare-view \.picture-path-panel input\s*\{[\s\S]*?height:\s*24px/,
     )
     expect(css).toMatch(
       /\.picture-compare-view \.picture-path-panel button\s*\{[\s\S]*?height:\s*20px/,
@@ -29,13 +29,13 @@ describe('picture compare chrome density', () => {
     expect(pictureView).toMatch(/\.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
     expect(pictureView).toMatch(/SessionPathActions/)
     expect(pictureView).toMatch(/PathMetaFooter/)
-    expect(pictureView).toMatch(/\.picture-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(pictureView).toMatch(/\.picture-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(pictureView).toMatch(/chromeKind:\s*'picture-session'/)
     expect(pictureView).not.toMatch(/font-size:\s*9px/)
     expect(pictureView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='picture-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='picture-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Picture Meta/Blend/Tol chrome on capture band', () => {
diff --git a/src/styles/registryChromeDensity.test.ts b/src/styles/registryChromeDensity.test.ts
index 47f283b2..d4bacaa0 100644
--- a/src/styles/registryChromeDensity.test.ts
+++ b/src/styles/registryChromeDensity.test.ts
@@ -11,7 +11,7 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 describe('registry compare chrome density', () => {
   it('keeps Registry Compare path/status/toolbar/footer chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.registry-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(registryView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(registryView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(
       /\.registry-compare-view \.registry-input-panel\s*\{[\s\S]*?min-height:\s*22px/,
     )
@@ -37,8 +37,8 @@ describe('registry compare chrome density', () => {
     expect(registryView).not.toMatch(/font-size:\s*9px/)
     expect(registryView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='registry-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='registry-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Registry summary/pane/row chrome on capture band', () => {
diff --git a/src/styles/sessionSettingsChromeDensity.test.ts b/src/styles/sessionSettingsChromeDensity.test.ts
index 4e198877..c3cfb304 100644
--- a/src/styles/sessionSettingsChromeDensity.test.ts
+++ b/src/styles/sessionSettingsChromeDensity.test.ts
@@ -13,30 +13,23 @@ const css = readFileSync(resolve(root, 'src/styles/main.css'), 'utf8')
 const settingsView = readFileSync(resolve(root, 'src/views/SettingsView.vue'), 'utf8')
 
 describe('session settings and hex goto chrome density', () => {
-  it('keeps Session Settings dialog chrome dense toward report-panel spacing', () => {
+  it('keeps Session Settings dialog chrome aligned with HTML demo rules layout', () => {
     expect(settingsDialog).toMatch(/\.session-settings-backdrop\s*\{[\s\S]*?padding:\s*4px/)
-    expect(settingsDialog).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?padding:\s*4px 6px/)
-    expect(settingsDialog).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?gap:\s*4px/)
+    expect(settingsDialog).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?padding:\s*0/)
+    expect(settingsDialog).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?gap:\s*0/)
     expect(settingsDialog).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?border-radius:\s*0/)
     expect(settingsDialog).toMatch(
       /\.session-settings-dialog\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/,
     )
     expect(settingsDialog).toMatch(/data-options-rules-density="capture-1to1"/)
-    expect(settingsDialog).toMatch(/\.settings-body\s*\{[\s\S]*?padding:\s*4px 6px/)
-    expect(settingsDialog).toMatch(/\.settings-body\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/)
-    expect(settingsDialog).toMatch(/\.settings-body label\s*\{[\s\S]*?font-size:\s*11px/)
-    expect(settingsDialog).toMatch(/\.settings-tabs button\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/)
-    expect(settingsDialog).toMatch(/h2\s*\{[\s\S]*?font-size:\s*12px/)
-    expect(settingsDialog).toMatch(/\.settings-tabs button\s*\{[\s\S]*?height:\s*18px/)
-    expect(settingsDialog).toMatch(/\.settings-body\s*\{[\s\S]*?gap:\s*4px/)
+    expect(settingsDialog).toMatch(/\.settings-body\s*\{[\s\S]*?padding:\s*16px 20px/)
+    expect(settingsDialog).toMatch(/\.settings-body label\s*\{[\s\S]*?font-size:\s*12px/)
+    expect(settingsDialog).toMatch(/\.settings-tabs button\s*\{[\s\S]*?min-height:\s*28px/)
     expect(settingsDialog).toMatch(
-      /\.settings-body input:not\(\[type='checkbox'\]\),\s*\.settings-body select\s*\{[\s\S]*?height:\s*20px/,
+      /\.settings-body input:not\(\[type='checkbox'\]\),\s*\.settings-body select\s*\{[\s\S]*?height:\s*26px/,
     )
-    expect(settingsDialog).toMatch(/\.settings-body textarea\s*\{[\s\S]*?padding:\s*2px 6px/)
-    expect(settingsDialog).toMatch(/\.settings-body textarea\s*\{[\s\S]*?border-radius:\s*0/)
-    expect(settingsDialog).toMatch(/footer button\s*\{[\s\S]*?height:\s*18px/)
-    expect(settingsDialog).not.toMatch(/box-shadow:\s*0 18px 44px/)
-    expect(settingsDialog).not.toMatch(/padding:\s*16px/)
+    expect(settingsDialog).toMatch(/footer button\s*\{[\s\S]*?height:\s*28px/)
+    expect(settingsDialog).not.toMatch(/min-height:\s*6px/)
   })
 
   it('keeps Hex Go To dialog chrome dense toward report-panel spacing', () => {
@@ -52,41 +45,35 @@ describe('session settings and hex goto chrome density', () => {
 })
 
 describe('options/rules dialog content depth', () => {
-  it('deepens Options content and Session Rules dialog beyond shell chrome', () => {
+  it('deepens Options content and Session Rules dialog toward HTML demo opts layout', () => {
     expect(settingsView).toMatch(/data-options-content-density="capture-1to1"/)
-    expect(settingsView).toMatch(/\.options-content\s*\{[\s\S]*?gap:\s*4px/)
+    expect(settingsView).toMatch(/\.options-content\s*\{[\s\S]*?gap:\s*10px/)
     expect(settingsView).toMatch(
-      /\.options-content :deep\(\[class='n-card__content'\]\)\s*\{[\s\S]*?padding:\s*4px 6px/,
+      /\.options-content :deep\(\[class='n-card__content'\]\)\s*\{[\s\S]*?padding:\s*4px 0 0/,
     )
     expect(settingsView).toMatch(
-      /\.options-content :deep\(\.n-checkbox\)\s*\{[\s\S]*?min-height:\s*18px/,
+      /\.options-content :deep\(\.n-checkbox\)\s*\{[\s\S]*?min-height:\s*22px/,
     )
-    expect(css).toMatch(/\.settings-view \.options-content\s*\{[\s\S]*?gap:\s*4px/)
+    expect(css).toMatch(/\.settings-view \.options-content\s*\{[\s\S]*?gap:\s*10px/)
+    expect(css).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/)
     expect(css).toMatch(
-      /\.settings-view \.options-content \[class='n-card__content'\]\s*\{[\s\S]*?padding:\s*4px 6px/,
+      /\.session-settings-dialog \.settings-body\s*\{[\s\S]*?padding:\s*16px 20px/,
     )
-    expect(css).toMatch(/\.session-settings-dialog\s*\{[\s\S]*?border:\s*1px solid #a0a0a0/)
-    expect(css).toMatch(/\.session-settings-dialog \.settings-body\s*\{[\s\S]*?padding:\s*4px 6px/)
     expect(css).toMatch(
-      /\.session-settings-dialog \.settings-body input:not\(\[type='checkbox'\]\)[\s\S]*?height:\s*20px/,
+      /\.session-settings-dialog \.settings-body input:not\(\[type='checkbox'\]\)[\s\S]*?height:\s*26px/,
     )
     expect(settingsDialog).not.toMatch(/min-height:\s*6px/)
   })
 })
 
 describe('session rules residual depth', () => {
-  it('deepens Session Rules dialog chrome beyond #342/#333 content band', () => {
+  it('keeps Session Rules dialog chrome on HTML demo selection colors', () => {
     expect(settingsDialog).toMatch(/data-rules-depth="capture-1to1-residual"/)
-    expect(settingsDialog).toMatch(/\.settings-tabs\s*\{[\s\S]*?background:\s*#f0f0f0/)
-    expect(settingsDialog).toMatch(/footer\s*\{[\s\S]*?border-top:\s*1px solid #c0c0c0/)
     expect(css).toMatch(
-      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\]\s*\{[\s\S]*?background:\s*#f0f0f0/,
+      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-tabs\s*\{[\s\S]*?background:\s*#f5f5f5/,
     )
     expect(css).toMatch(
-      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-body\s*\{[\s\S]*?gap:\s*2px/,
-    )
-    expect(css).toMatch(
-      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-tabs\s*\{[\s\S]*?gap:\s*2px/,
+      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-body\s*\{[\s\S]*?padding:\s*16px 20px/,
     )
     expect(settingsDialog).not.toMatch(/min-height:\s*6px/)
   })
@@ -95,41 +82,29 @@ describe('session rules residual depth', () => {
 describe('options footer residual', () => {
   const settingsView = readFileSync(resolve(root, 'src/views/SettingsView.vue'), 'utf8')
 
-  it('keeps Options OK/Cancel/Apply footer at capture scale', () => {
+  it('keeps Options OK/Cancel/Apply footer at demo button scale', () => {
     expect(settingsView).toMatch(/data-options-footer="capture-1to1-residual"/)
     expect(settingsView).toMatch(/data-testid="options-footer-ok"/)
     expect(settingsView).toMatch(/data-testid="options-footer-cancel"/)
     expect(settingsView).toMatch(/data-testid="options-footer-apply"/)
-    expect(settingsView).toMatch(/\.options-footer-btn\s*\{[\s\S]*?height:\s*18px/)
+    expect(settingsView).toMatch(/\.options-footer-btn\s*\{[\s\S]*?height:\s*28px/)
     expect(settingsDialog).toMatch(/data-testid="session-settings-ok"/)
-    expect(settingsDialog).toMatch(/footer button\s*\{[\s\S]*?height:\s*18px/)
+    expect(settingsDialog).toMatch(/footer button\s*\{[\s\S]*?height:\s*28px/)
   })
 })
 
 describe('session rules micro residual', () => {
-  it('closes Session Rules micro-drift vs Options/About sibling chrome', () => {
+  it('keeps Session Rules micro chrome on demo selection and footer buttons', () => {
     expect(settingsDialog).toMatch(/data-rules-micro="capture-1to1-residual"/)
-    expect(settingsDialog).toMatch(/header button\s*\{[\s\S]*?height:\s*18px/)
-    expect(settingsDialog).toMatch(/header\s*\{[\s\S]*?border-bottom:\s*1px solid #c0c0c0/)
+    expect(settingsDialog).toMatch(/header button\s*\{[\s\S]*?height:\s*28px/)
     expect(settingsDialog).toMatch(
-      /\.settings-tabs button\.active\s*\{[\s\S]*?background:\s*#c8e4ff/,
-    )
-    expect(settingsDialog).toMatch(/footer button\s*\{[\s\S]*?background:\s*#ffffff/)
-    expect(css).toMatch(
-      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\]\s*\{[\s\S]*?gap:\s*2px/,
+      /\.settings-tabs button\.active\s*\{[\s\S]*?background:\s*#cce8ff/,
     )
-    expect(css).toMatch(
-      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-body\s*\{[\s\S]*?padding:\s*2px 4px/,
+    expect(settingsDialog).toMatch(
+      /footer button\s*\{[\s\S]*?background:\s*#fafafa|footer button\s*\{[\s\S]*?background:\s*#ffffff/,
     )
-    expect(css).toMatch(/button\.active[\s\S]*?background:\s*#c8e4ff/)
-    expect(settingsDialog).not.toMatch(/min-height:\s*6px/)
-  })
-})
-
-describe('options footer border', () => {
-  it('matches capture options footer border #c0c0c0', () => {
     expect(css).toMatch(
-      /data-options-footer='capture-1to1-residual'\][\s\S]*?border-top:\s*1px solid #c0c0c0/,
+      /\.session-settings-dialog\[data-rules-depth='capture-1to1-residual'\] \.settings-tabs button\.active\s*\{[\s\S]*?background:\s*#cce8ff/,
     )
   })
 })
diff --git a/src/styles/sessionToolbarIcons.test.ts b/src/styles/sessionToolbarIcons.test.ts
index 5376e414..f1ba6b1d 100644
--- a/src/styles/sessionToolbarIcons.test.ts
+++ b/src/styles/sessionToolbarIcons.test.ts
@@ -24,8 +24,8 @@ describe('session toolbar icon presentation', () => {
     expect(css).toContain("data-plate='sessions'")
     expect(css).toContain("data-plate='capture'")
     expect(css).toContain('color: #2a3038')
-    expect(css).toContain('min-height: 39.5px')
-    expect(css).toContain('height: 37.5px')
+    expect(css).toContain('min-height: 56px')
+    expect(css).toContain('height: 48px')
     expect(css).toContain('width: 22px')
     expect(css).toContain("data-has-icon='true'")
     expect(icons).toContain('sessionToolbarPlates')
diff --git a/src/styles/shellChromeDensity.test.ts b/src/styles/shellChromeDensity.test.ts
index 2ae1f7b5..682c6c02 100644
--- a/src/styles/shellChromeDensity.test.ts
+++ b/src/styles/shellChromeDensity.test.ts
@@ -17,7 +17,7 @@ describe('shell chrome density', () => {
     )
     expect(source).toMatch(/\.app-shell-dense-chrome \.brand\s*\{[\s\S]*?display:\s*none/)
     expect(source).toMatch(
-      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?grid-template-rows:\s*23\.5px minmax\(0, 1fr\) 19\.5px/,
+      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?grid-template-rows:\s*23\.5px minmax\(0, 1fr\) 26px/,
     )
   })
 
@@ -29,14 +29,14 @@ describe('shell chrome density', () => {
     expect(source).toMatch(/\.tab-chip button\s*\{[\s\S]*?height:\s*22px/)
     expect(source).toMatch(/\.tab-chip button\s*\{[\s\S]*?font-size:\s*11px/)
     expect(source).toMatch(/data-menu-density="capture-1to1"/)
-    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?background:\s*#f0f0f0/)
+    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?background:\s*#f0f3f9/)
     expect(source).toMatch(/\.menu-panel\s*\{[\s\S]*?border-radius:\s*0/)
     expect(source).toMatch(/\.menu-panel \.menu-command\s*\{[\s\S]*?min-height:\s*22px/)
     expect(source).toMatch(/\.menu-panel \.menu-command\s*\{[\s\S]*?font-size:\s*12px/)
-    expect(source).toMatch(/\.menus\s*\{[\s\S]*?border-top:\s*1px solid #d0d0d0/)
+    expect(source).toMatch(/\.menus\s*\{[\s\S]*?border-top:\s*1px solid #dcdcdc/)
     expect(source).toMatch(/\.tab-context-menu\s*\{[\s\S]*?border-radius:\s*0/)
     expect(source).toMatch(/\.dirty-tab-prompt\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?border-bottom:\s*1px solid #a0a0a0/)
+    expect(source).toMatch(/\.menu-bar\s*\{[\s\S]*?border-bottom:\s*1px solid #dcdcdc/)
     expect(source).toMatch(/\.language-panel\s*\{[\s\S]*?border-radius:\s*0/)
     expect(source).toMatch(/\.language-option\s*\{[\s\S]*?min-height:\s*20px/)
     expect(source).toMatch(/\.command-palette\s*\{[\s\S]*?border-radius:\s*0/)
@@ -59,11 +59,11 @@ describe('shell chrome density', () => {
 
   it('keeps WorkbenchShell session toolbar/content frame denser', () => {
     expect(mainCss).toMatch(
-      /\.workbench-shell-single-session \.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/,
+      /\.workbench-shell-single-session \.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/,
     )
     expect(mainCss).toMatch(/\.workbench-titlebar\s*\{[\s\S]*?height:\s*22px/)
-    expect(mainCss).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
-    expect(mainCss).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?border-bottom:\s*1px solid #a0a0a0/)
+    expect(mainCss).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
+    expect(mainCss).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?border-bottom:\s*1px solid #c8c8c8/)
     expect(mainCss).toMatch(/\.workbench-inspector-stack\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(mainCss).toMatch(/\.workbench-inspector-section\s*\{[\s\S]*?border-radius:\s*0/)
     expect(mainCss).toMatch(/\.workbench-inspector-section h2\s*\{[\s\S]*?height:\s*16px/)
@@ -106,14 +106,14 @@ describe('shell chrome density', () => {
       /data-menu-chrome='capture-1to1-residual'\] \.menus > \.menu-group > button\s*\{[\s\S]*?height:\s*21\.5px/,
     )
     expect(source).toMatch(
-      /menus > \.menu-group > button\.active\s*\{[\s\S]*?background:\s*#c8e4ff/,
+      /menus > \.menu-group > button\.active\s*\{[\s\S]*?background:\s*#cce8ff/,
     )
   })
 
   it('keeps tab strip and sole-session frame residual capture chrome', () => {
     expect(source).toMatch(/data-tab-strip-density="capture-1to1-residual"/)
     expect(source).toMatch(
-      /\.tab-strip\[data-tab-strip-density='capture-1to1-residual'\]\s*\{[\s\S]*?background:\s*#f0f0f0/,
+      /\.tab-strip\[data-tab-strip-density='capture-1to1-residual'\]\s*\{[\s\S]*?background:\s*#f0f3f9/,
     )
     expect(mainCss).toMatch(
       /\.workbench-shell-single-session \.bc-session-toolbar\s*\{[\s\S]*?background:\s*#f0f0f0/,
@@ -206,8 +206,8 @@ describe('pane-header fill', () => {
 describe('app-border token', () => {
   const mainCss = readFileSync(resolve(__dirname, './main.css'), 'utf8')
 
-  it('matches capture border token #c0c0c0', () => {
-    expect(mainCss).toMatch(/--app-border:\s*#c0c0c0/)
+  it('matches demo border token #c8c8c8', () => {
+    expect(mainCss).toMatch(/--app-border:\s*#c8c8c8/)
   })
 })
 
diff --git a/src/styles/statusStripPixelDensity.test.ts b/src/styles/statusStripPixelDensity.test.ts
index a686baca..3c7bfc1b 100644
--- a/src/styles/statusStripPixelDensity.test.ts
+++ b/src/styles/statusStripPixelDensity.test.ts
@@ -8,11 +8,9 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 
 describe('status strip pixel density', () => {
   it('keeps folder-pair 7-segment strip at 20px with capture-like separators', () => {
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?line-height:\s*18px/,
+      /\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?line-height:\s*24px/,
     )
     expect(layout).toMatch(
       /\.status-bar\[data-chrome-kind='folder-pair'\] \.status-bar-pane\s*\{[\s\S]*?padding:\s*0 4px/,
@@ -38,13 +36,11 @@ describe('status strip pixel density', () => {
     expect(layout).toMatch(/data-chrome-kind='folder-pair'\]\[data-pane-count='7'\]/)
   })
 
-  it('keeps session status bars at 19.5px with shared typography', () => {
-    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?background:\s*#f0f0f0/)
-    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?color:\s*#000000/)
+  it('keeps session status bars at 26px with shared typography', () => {
+    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?background:\s*#d4d4d4/)
+    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?color:\s*#1a1a1a/)
     expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?font-size:\s*11px/)
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*19\.5px/,
-    )
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
       /\.status-bar\[data-chrome-kind='text-session'\]\s*\{[\s\S]*?grid-template-columns:\s*294px minmax\(0, 392\.5px\) 91\.5px minmax\(0, 1fr\)/,
     )
@@ -52,19 +48,17 @@ describe('status strip pixel density', () => {
       /\.status-bar\[data-chrome-kind='text-session'\] \.status-bar-pane[\s\S]*?padding:\s*0 4px/,
     )
     expect(layout).toMatch(
-      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?19\.5px/,
+      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind='folder-pair'\]\)[\s\S]*?26px/,
     )
     expect(layout).toMatch(
-      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind\$='-session'\]\)[\s\S]*?19\.5px/,
+      /\.app-shell-dense-chrome:has\(\.status-bar\[data-chrome-kind\$='-session'\]\)[\s\S]*?26px/,
     )
   })
 
   it('keeps folder-merge 12-segment strip at capture height with column dividers', () => {
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?line-height:\s*18px/,
+      /\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?line-height:\s*24px/,
     )
     expect(layout).toMatch(
       /\.status-bar\[data-chrome-kind='folder-merge'\] \.status-bar-pane\s*\{[\s\S]*?padding:\s*0 4px/,
@@ -82,10 +76,10 @@ describe('status strip pixel density', () => {
 })
 
 describe('status strip band residual', () => {
-  it('keeps 19.5px band content chrome residual toward capture', () => {
+  it('keeps 26px band content chrome residual toward capture', () => {
     expect(layout).toMatch(/data-status-band="capture-1to1-residual"/)
-    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?border-top:\s*1px solid #a0a0a0/)
-    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?height:\s*19\.5px/)
+    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?border-top:\s*1px solid #b8b8b8/)
+    expect(layout).toMatch(/\.status-bar\s*\{[\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
       /\.status-bar\[data-status-band='capture-1to1-residual'\] \.status-bar-pane\s*\{[\s\S]*?text-overflow:\s*ellipsis/,
     )
@@ -163,7 +157,7 @@ describe('clipboard status strip columns residual', () => {
 describe('app-status fill', () => {
   const css = readFileSync(resolve(root, 'src/styles/main.css'), 'utf8')
 
-  it('matches capture status token fill #f0f0f0', () => {
-    expect(css).toMatch(/--app-status:\s*#f0f0f0/)
+  it('matches demo status token fill #d4d4d4', () => {
+    expect(css).toMatch(/--app-status:\s*#d4d4d4/)
   })
 })
diff --git a/src/styles/syncMergeChromeDensity.test.ts b/src/styles/syncMergeChromeDensity.test.ts
index c224fb35..d81a18dd 100644
--- a/src/styles/syncMergeChromeDensity.test.ts
+++ b/src/styles/syncMergeChromeDensity.test.ts
@@ -18,9 +18,9 @@ describe('folder sync/merge chrome density', () => {
     )
     expect(css).toMatch(/\.folder-merge-view \.merge-paths\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(css).toMatch(/\.folder-merge-view \.merge-to-chrome\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(mergeView).toMatch(/\.merge-to-path input\s*\{[\s\S]*?height:\s*16\.5px/)
-    expect(mergeView).toMatch(/\.merge-paths input\s*\{[\s\S]*?height:\s*16\.5px/)
-    expect(css).toMatch(/\.folder-merge-view \.merge-paths input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(mergeView).toMatch(/\.merge-to-path input\s*\{[\s\S]*?height:\s*24px/)
+    expect(mergeView).toMatch(/\.merge-paths input\s*\{[\s\S]*?height:\s*24px/)
+    expect(css).toMatch(/\.folder-merge-view \.merge-paths input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(
       /\.folder-merge-view \.merge-actions \.n-button\[data-testid='folder-merge-execute-plan'\][\s\S]*?height:\s*36px/,
     )
@@ -29,7 +29,7 @@ describe('folder sync/merge chrome density', () => {
     expect(css).toMatch(/\.folder-merge-view \.merge-actions \.n-button[\s\S]*?height:\s*30px/)
 
     expect(syncView).toMatch(/\.sync-settings\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(syncView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(syncView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(syncView).toMatch(/\.sync-settings\s*\{[\s\S]*?min-height:\s*22px/)
     expect(syncView).toMatch(/grid-template-columns:[\s\S]*?326\.5px/)
     expect(syncView).toMatch(/\.sync-settings input,[\s\S]*?height:\s*20px/)
@@ -63,12 +63,8 @@ describe('folder sync/merge chrome density', () => {
     expect(mergeView).toMatch(/centerFreeSpace:/)
     expect(mergeView).toMatch(/refreshMergeFreeSpace/)
 
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?height:\s*19\.5px/,
-    )
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='folder-pair'\][\s\S]*?height:\s*26px/)
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='folder-merge'\][\s\S]*?height:\s*26px/)
     expect(layout).toMatch(
       /\.status-bar\[data-chrome-kind='folder-merge'\]\[data-pane-count='12'\]/,
     )
@@ -121,7 +117,7 @@ describe('folder sync tree and session log chrome density', () => {
     expect(syncView).toMatch(/data-log-density="capture-1to1"/)
     expect(syncView).toMatch(/\.sync-preview-row\s*\{[\s\S]*?min-height:\s*20px/)
     expect(syncView).toMatch(/\.sync-preview-head\s*\{[\s\S]*?font-weight:\s*400/)
-    expect(syncView).toMatch(/\.sync-row-selected\s*\{[\s\S]*?background:\s*#a8cdf1/)
+    expect(syncView).toMatch(/\.sync-row-selected\s*\{[\s\S]*?background:\s*#cce8ff/)
     expect(syncView).toMatch(/\.folder-session-log\s*\{[\s\S]*?height:\s*98px/)
     expect(syncView).toMatch(/\.folder-session-log-body\s*\{[\s\S]*?font-size:\s*11px/)
     expect(syncView).toMatch(/\.folder-session-log-body\s*\{[\s\S]*?line-height:\s*14px/)
@@ -142,7 +138,7 @@ describe('folder merge tree and session log chrome density', () => {
     expect(mergeView).toMatch(/data-log-density="capture-1to1"/)
     expect(mergeView).toMatch(/\.merge-plan-row\s*\{[\s\S]*?min-height:\s*20px/)
     expect(mergeView).toMatch(/\.merge-plan-head\s*\{[\s\S]*?font-weight:\s*400/)
-    expect(mergeView).toMatch(/\.merge-plan-row\.selected\s*\{[\s\S]*?background:\s*#a8cdf1/)
+    expect(mergeView).toMatch(/\.merge-plan-row\.selected\s*\{[\s\S]*?background:\s*#cce8ff/)
     expect(mergeView).toMatch(/\.folder-session-log\s*\{[\s\S]*?height:\s*98px/)
     expect(mergeView).toMatch(/\.folder-session-log-body\s*\{[\s\S]*?font-size:\s*11px/)
     expect(css).toMatch(/\.folder-merge-view \.merge-plan-row\s*\{[\s\S]*?min-height:\s*20px/)
diff --git a/src/styles/tableChromeDensity.test.ts b/src/styles/tableChromeDensity.test.ts
index 8a026851..b6b53a87 100644
--- a/src/styles/tableChromeDensity.test.ts
+++ b/src/styles/tableChromeDensity.test.ts
@@ -11,7 +11,7 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 describe('table compare chrome density', () => {
   it('keeps Table Compare path/status/controls chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.table-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(tableView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(tableView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.table-compare-view \.table-source-controls[\s\S]*?min-height:\s*20px/)
     expect(css).toMatch(/\.table-compare-view \.table-source-controls input[\s\S]*?height:\s*20px/)
     expect(css).toMatch(/\.table-compare-view \.path-side-footer\s*\{[\s\S]*?font-size:\s*11px/)
@@ -31,8 +31,8 @@ describe('table compare chrome density', () => {
     expect(tableView).not.toMatch(/font-size:\s*9px/)
     expect(tableView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='table-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='table-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('shows Table header/report chrome under sole-session frame', () => {
diff --git a/src/styles/textChromeDensity.test.ts b/src/styles/textChromeDensity.test.ts
index 7fa19122..8273b722 100644
--- a/src/styles/textChromeDensity.test.ts
+++ b/src/styles/textChromeDensity.test.ts
@@ -13,7 +13,7 @@ describe('text compare chrome density', () => {
   it('keeps Text Compare path/status/editor chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.text-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(css).toMatch(/\.text-compare-view \.text-path-chrome\s*\{[\s\S]*?min-height:\s*22px/)
-    expect(css).toMatch(/\.text-compare-view \.bc-path-row input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.text-compare-view \.bc-path-row input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.text-compare-view \.path-side-footer\s*\{[\s\S]*?font-size:\s*11px/)
     expect(css).toMatch(/\.text-compare-view \.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(/\.text-compare-view \.path-side-footer\s*\{[\s\S]*?line-height:\s*16px/)
@@ -36,15 +36,13 @@ describe('text compare chrome density', () => {
     expect(diffPanel).toMatch(/\.diff-header\s*\{[\s\S]*?height:\s*18px/)
     expect(diffPanel).toMatch(/\.gutter\s*\{[\s\S]*?padding:\s*0 4px/)
 
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*19\.5px/,
-    )
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*26px/)
     expect(css).toMatch(
       /\.split-pane-header,\s*\.pane-header,\s*\.metadata-header\s*\{[\s\S]*?min-height:\s*20px/,
     )
     expect(css).toMatch(/\.split-pane-header\s*\{[\s\S]*?min-height:\s*20px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
-    expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?height:\s*37\.5px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
+    expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?height:\s*48px/)
     expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?font-size:\s*11px/)
   })
 
@@ -93,9 +91,9 @@ describe('text path and editor grid chrome density', () => {
 
 describe('text compare toolbar strip residual', () => {
   it('keeps Text Compare MainBar command spacing on the capture band', () => {
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
     expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?min-width:\s*59px/)
-    expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?height:\s*37\.5px/)
+    expect(css).toMatch(/\.bc-toolbar-command\s*\{[\s\S]*?height:\s*48px/)
     expect(css).toMatch(/\.bc-toolbar-command-group-start\s*\{[\s\S]*?margin-left:\s*6px/)
     expect(css).toMatch(
       /\.bc-toolbar-command-group-start\s*\{[\s\S]*?border-left:\s*1px solid #9a9a9a/,
diff --git a/src/styles/textEditChromeDensity.test.ts b/src/styles/textEditChromeDensity.test.ts
index d5c59875..f57bbb8b 100644
--- a/src/styles/textEditChromeDensity.test.ts
+++ b/src/styles/textEditChromeDensity.test.ts
@@ -13,13 +13,13 @@ describe('text edit chrome density', () => {
   it('keeps Text Edit path/toolbar/editor/status chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.text-edit-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(css).toMatch(/\.text-edit-view \.path-toolbar[\s\S]*?min-height:\s*22px/)
-    expect(css).toMatch(/\.text-edit-view \.path-input[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.text-edit-view \.path-input[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.text-edit-view \.toolbar-button\s*\{[\s\S]*?height:\s*18px/)
     expect(css).toMatch(/\.text-edit-view[\s\S]*?line-height:\s*18px/)
 
     expect(editView).toMatch(/\.text-edit-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(editView).toMatch(/\.path-toolbar[\s\S]*?min-height:\s*22px/)
-    expect(editView).toMatch(/\.path-input[\s\S]*?height:\s*16\.5px/)
+    expect(editView).toMatch(/\.path-input[\s\S]*?height:\s*24px/)
     expect(editView).toMatch(/\.toolbar-button\s*\{[\s\S]*?height:\s*18px/)
     expect(editView).toMatch(/:deep\(textarea\)\s*\{[\s\S]*?line-height:\s*18px/)
     expect(editView).toMatch(/source:\s*'text-edit'/)
@@ -28,19 +28,19 @@ describe('text edit chrome density', () => {
     expect(editView).toMatch(/SessionPathActions/)
     expect(editView).toMatch(/PathMetaFooter/)
     expect(editView).not.toMatch(/\.path-input[^}]*height:\s*16px/)
-    expect(editView).toMatch(/\.path-input[\s\S]*?height:\s*16\.5px/)
+    expect(editView).toMatch(/\.path-input[\s\S]*?height:\s*24px/)
 
     expect(phrases).toMatch(/EDIT_MODE_SOURCES[\s\S]*?'text-edit'/)
     expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-edit-session'\][\s\S]*?height:\s*19\.5px/,
+      /\.status-bar\[data-chrome-kind='text-edit-session'\][\s\S]*?height:\s*26px/,
     )
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Text Edit chrome on capture band with Text Compare path scale', () => {
     expect(css).toMatch(/\.text-edit-view \.syntax-language-bar\s*\{[\s\S]*?min-height:\s*20px/)
     expect(css).toMatch(/\.text-edit-view \.find-input[\s\S]*?height:\s*20px/)
-    expect(css).toMatch(/\.text-edit-view \.path-input[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.text-edit-view \.path-input[\s\S]*?height:\s*24px/)
 
     expect(editView).toMatch(/\.syntax-language-bar\s*\{[\s\S]*?min-height:\s*20px/)
     expect(editView).toMatch(/\.find-input[\s\S]*?height:\s*20px/)
diff --git a/src/styles/textMergeChromeDensity.test.ts b/src/styles/textMergeChromeDensity.test.ts
index 00f68009..a54aef61 100644
--- a/src/styles/textMergeChromeDensity.test.ts
+++ b/src/styles/textMergeChromeDensity.test.ts
@@ -15,13 +15,13 @@ describe('text merge chrome density', () => {
     expect(css).toMatch(/\.text-merge-view \.toolbar-button\s*\{[\s\S]*?height:\s*18px/)
     expect(css).toMatch(/\.text-merge-view \.pane-header\s*\{[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(/\.text-merge-view \.output-editor\s*\{[\s\S]*?line-height:\s*16px/)
-    expect(css).toMatch(/\.text-merge-view \.output-path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.text-merge-view \.output-path-input\s*\{[\s\S]*?height:\s*24px/)
 
     expect(mergeView).toMatch(/\.text-merge-view\s*\{[\s\S]*?padding:\s*2px 4px/)
     expect(mergeView).toMatch(/\.merge-toolbar\s*\{[\s\S]*?min-height:\s*20px/)
     expect(mergeView).toMatch(/\.toolbar-button\s*\{[\s\S]*?height:\s*18px/)
     expect(mergeView).toMatch(/\.pane-header\s*\{[\s\S]*?min-height:\s*18px/)
-    expect(mergeView).toMatch(/\.output-path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(mergeView).toMatch(/\.output-path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(mergeView).toMatch(/chromeKind:\s*'text-session'/)
     expect(mergeView).toMatch(/session-toolbar-wrap/)
     expect(mergeView).toMatch(/SessionSettingsDialog/)
@@ -37,10 +37,8 @@ describe('text merge chrome density', () => {
     expect(mergeView).toMatch(/bc-path-load/)
     expect(mergeView).not.toMatch(/\.output-path-input\s*\{[^}]*height:\s*16px/)
 
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Text Merge three-pane chrome on capture band', () => {
diff --git a/src/styles/textPatchChromeDensity.test.ts b/src/styles/textPatchChromeDensity.test.ts
index 25e8eda1..9c9a12f0 100644
--- a/src/styles/textPatchChromeDensity.test.ts
+++ b/src/styles/textPatchChromeDensity.test.ts
@@ -11,7 +11,7 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 describe('text patch chrome density', () => {
   it('keeps Text Patch path/toolbar/editor/status chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.text-patch-view \.patch-workbench-main\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(patchView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(patchView).toMatch(/\.path-field-row \.path-input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.text-patch-view \.patch-toolbar\s*\{[\s\S]*?min-height:\s*18px/)
     expect(css).toMatch(
       /\.text-patch-view \.patch-input-pane[\s\S]*?grid-template-rows:\s*20px minmax\(0, 1fr\)/,
@@ -33,10 +33,8 @@ describe('text patch chrome density', () => {
     expect(patchView).not.toMatch(/font-size:\s*9px/)
     expect(patchView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(
-      /\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*19\.5px/,
-    )
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/\.status-bar\[data-chrome-kind='text-session'\][\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Text Patch chrome on capture band with Text Compare path scale', () => {
@@ -49,9 +47,9 @@ describe('text patch chrome density', () => {
 
     expect(patchView).toMatch(/\.patch-open-file\s*\{[\s\S]*?height:\s*20px/)
     expect(patchView).toMatch(/\.path-field-row\s*\{[\s\S]*?min-height:\s*18px/)
-    expect(patchView).toMatch(/\.path-field-row input[\s\S]*?height:\s*16\.5px/)
+    expect(patchView).toMatch(/\.path-field-row input[\s\S]*?height:\s*24px/)
     expect(patchView).toMatch(/\.path-field-row input[\s\S]*?font-size:\s*12px/)
-    expect(css).toMatch(/\.text-patch-view \.path-field-row input[\s\S]*?height:\s*16\.5px/)
+    expect(css).toMatch(/\.text-patch-view \.path-field-row input[\s\S]*?height:\s*24px/)
     expect(css).toMatch(/\.text-patch-view \.path-field-row input[\s\S]*?font-size:\s*12px/)
     expect(patchView).toMatch(/\.patch-section-pane-body\s*\{[\s\S]*?line-height:\s*18px/)
     expect(patchView).toMatch(/:deep\(\.patch-toolbar \.n-button\)[\s\S]*?height:\s*18px/)
diff --git a/src/styles/versionChromeDensity.test.ts b/src/styles/versionChromeDensity.test.ts
index 944c6350..afe411ab 100644
--- a/src/styles/versionChromeDensity.test.ts
+++ b/src/styles/versionChromeDensity.test.ts
@@ -11,12 +11,12 @@ const layout = readFileSync(resolve(root, 'src/layouts/AppLayout.vue'), 'utf8')
 describe('version compare chrome density', () => {
   it('keeps Version Compare path/status/toolbar/footer chrome at capture CSS scale', () => {
     expect(css).toMatch(/\.version-compare-view\s*\{[\s\S]*?padding:\s*2px 4px/)
-    expect(versionView).toMatch(/\.version-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(versionView).toMatch(/\.version-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(css).toMatch(
       /\.version-compare-view \.version-path-panel\s*\{[\s\S]*?min-height:\s*20px/,
     )
     expect(css).toMatch(
-      /\.version-compare-view \.version-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/,
+      /\.version-compare-view \.version-path-panel input\s*\{[\s\S]*?height:\s*24px/,
     )
     expect(css).toMatch(/\.version-compare-view \.path-side-footer\s*\{[\s\S]*?font-size:\s*11px/)
     expect(css).toMatch(/\.version-compare-view \.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
@@ -27,14 +27,14 @@ describe('version compare chrome density', () => {
     expect(versionView).toMatch(/\.path-side-footer\s*\{[\s\S]*?min-height:\s*18px/)
     expect(versionView).toMatch(/SessionPathActions/)
     expect(versionView).toMatch(/PathMetaFooter/)
-    expect(versionView).toMatch(/\.version-path-panel input\s*\{[\s\S]*?height:\s*16\.5px/)
+    expect(versionView).toMatch(/\.version-path-panel input\s*\{[\s\S]*?height:\s*24px/)
     expect(versionView).toMatch(/chromeKind:\s*'version-session'/)
     expect(versionView).toMatch(/sessions:\s*true/)
     expect(versionView).not.toMatch(/font-size:\s*9px/)
     expect(versionView).not.toMatch(/min-height:\s*9px/)
 
-    expect(layout).toMatch(/data-chrome-kind='version-session'[\s\S]*?height:\s*19\.5px/)
-    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*39\.5px/)
+    expect(layout).toMatch(/data-chrome-kind='version-session'[\s\S]*?height:\s*26px/)
+    expect(css).toMatch(/\.bc-session-toolbar\s*\{[\s\S]*?min-height:\s*56px/)
   })
 
   it('keeps Version summary/side/report/rules/row chrome on capture band', () => {
diff --git a/src/views/ClipboardCompareView.vue b/src/views/ClipboardCompareView.vue
index 6437ff5e..bd48bb75 100644
--- a/src/views/ClipboardCompareView.vue
+++ b/src/views/ClipboardCompareView.vue
@@ -406,7 +406,7 @@ watch(
         <section class="diff-pane">
           <p
             v-if="clipboardsAreIdentical"
-            class="empty"
+            class="empty empty-hint"
             data-testid="clipboard-identical-hint"
           >
             {{ $t('ui.clipboardIdenticalHint') }}
@@ -417,7 +417,7 @@ watch(
           />
           <div
             v-else-if="!error"
-            class="empty"
+            class="empty empty-hint"
             data-testid="clipboard-empty-hint"
           >
             {{ clipboardEmptyStateMessage }}
@@ -584,4 +584,18 @@ watch(
     grid-template-columns: 1fr;
   }
 }
+
+.empty.empty-hint {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  padding: 24px;
+  background: #f9f9f9;
+  color: #666666;
+  font-size: 13px;
+  line-height: 1.6;
+  text-align: center;
+}
 </style>
diff --git a/src/views/FileFormatView.vue b/src/views/FileFormatView.vue
index 58eb4197..a8c49ac9 100644
--- a/src/views/FileFormatView.vue
+++ b/src/views/FileFormatView.vue
@@ -312,7 +312,10 @@ function setImportStatus(key: string, params: Record<string, string | number> =
 </script>
 
 <template>
-  <section class="file-format-view">
+  <section
+    class="file-format-view"
+    data-formats-density="html-demo"
+  >
     <header class="format-header">
       <div>
         <p class="eyebrow">{{ $t('ui.options') }}</p>
@@ -524,10 +527,12 @@ function setImportStatus(key: string, params: Record<string, string | number> =
 <style scoped>
 .file-format-view {
   display: grid;
-  gap: 4px;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 0;
   height: 100%;
-  padding: 2px 4px;
-  overflow: auto;
+  padding: 0;
+  overflow: hidden;
+  background: #ffffff;
 }
 
 .format-header {
@@ -589,19 +594,31 @@ h2 {
 
 .format-workspace {
   display: grid;
-  grid-template-columns: 280px minmax(0, 1fr);
-  gap: 4px;
-  min-height: 360px;
+  grid-template-columns: 220px minmax(0, 1fr);
+  gap: 0;
+  height: 100%;
+  min-height: 0;
 }
 
 .format-list-panel,
 .format-detail-panel,
 .format-io-panel {
   min-width: 0;
-  padding: 2px 4px;
-  border: 1px solid var(--app-border);
+  padding: 8px 0;
+  border: 0;
   border-radius: 0;
-  background: var(--app-surface);
+  background: #f5f5f5;
+}
+
+.format-detail-panel {
+  padding: 16px 20px;
+  overflow: auto;
+  background: #ffffff;
+}
+
+.format-list-panel {
+  overflow: auto;
+  border-right: 1px solid #c8c8c8;
 }
 
 .format-list-panel,
@@ -619,14 +636,15 @@ h2 {
 }
 
 button {
-  min-height: 18px;
-  padding: 0 6px;
-  border: 1px solid var(--app-border);
-  border-radius: 0;
-  background: var(--app-bg);
-  color: var(--app-text);
+  height: 28px;
+  min-height: 28px;
+  padding: 0 16px;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  background: #fafafa;
+  color: #1a1a1a;
   font: inherit;
-  cursor: pointer;
+  cursor: default;
 }
 
 button:hover {
@@ -643,14 +661,20 @@ button:hover {
   justify-items: start;
   gap: 1px;
   width: 100%;
-  min-height: 22px;
-  padding: 1px 4px;
+  min-height: 28px;
+  padding: 6px 14px;
+  border: 0;
   text-align: left;
 }
 
+.format-row:hover {
+  background: #e8f4ff;
+}
+
 .format-row.active {
-  border-color: #2563eb;
-  background: rgb(37 99 235 / 0.1);
+  border-color: transparent;
+  background: #cce8ff;
+  font-weight: 600;
 }
 
 .format-row span {
@@ -705,12 +729,12 @@ textarea {
 
 input,
 select {
-  height: 20px;
+  height: 26px;
   padding: 0 4px;
 }
 
 textarea {
-  min-height: 64px;
+  min-height: 96px;
   padding: 2px 4px;
   resize: vertical;
   font-family: var(--font-mono);
diff --git a/src/views/FolderCompareView.test.ts b/src/views/FolderCompareView.test.ts
index baaef028..960eea42 100644
--- a/src/views/FolderCompareView.test.ts
+++ b/src/views/FolderCompareView.test.ts
@@ -510,7 +510,7 @@ describe('FolderCompareView', () => {
     expect(wrapper.find('[data-testid="folder-filter-strip-peek"]').exists()).toBe(true)
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
+    ).toContain('display: none')
     expect(strip.text()).toContain('Filters')
     expect((pattern.element as HTMLInputElement).value).toBe('*.*')
 
@@ -573,7 +573,7 @@ describe('FolderCompareView', () => {
 
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
+    ).toContain('display: none')
     expect(wrapper.find('[data-testid="folder-peek-panel"]').attributes('style') ?? '').toContain(
       'display: none',
     )
@@ -581,13 +581,13 @@ describe('FolderCompareView', () => {
     await wrapper.find('[data-testid="folder-filter-strip-filters"]').trigger('click')
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).toContain('display: none')
+    ).not.toContain('display: none')
     expect(wrapper.find('[data-testid="folder-filter-strip"]').exists()).toBe(true)
 
     await wrapper.find('[data-testid="folder-filter-strip-filters"]').trigger('click')
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
+    ).toContain('display: none')
 
     await wrapper.find('[data-testid="folder-filter-strip-peek"]').trigger('click')
     expect(
@@ -602,31 +602,31 @@ describe('FolderCompareView', () => {
   it('toggles rules and filters panels from the session toolbar', async () => {
     const wrapper = mountFolderCompareView()
 
-    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').not.toContain(
+    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').toContain(
       'display: none',
     )
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
+    ).toContain('display: none')
 
     await wrapper.find('[data-testid="folder-session-toolbar-rules"]').trigger('click')
-    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').toContain(
+    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').not.toContain(
       'display: none',
     )
 
     await wrapper.find('[data-testid="folder-session-toolbar-filters"]').trigger('click')
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).toContain('display: none')
+    ).not.toContain('display: none')
 
     await wrapper.find('[data-testid="folder-session-toolbar-rules"]').trigger('click')
     await wrapper.find('[data-testid="folder-session-toolbar-filters"]').trigger('click')
-    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').not.toContain(
+    expect(wrapper.find('[data-testid="folder-criteria"]').attributes('style') ?? '').toContain(
       'display: none',
     )
     expect(
       wrapper.find('[data-testid="folder-display-filters"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
+    ).toContain('display: none')
   })
 
   it('filters the folder tree to files only from the session toolbar', async () => {
diff --git a/src/views/FolderCompareView.vue b/src/views/FolderCompareView.vue
index 5d38ca32..bc122398 100644
--- a/src/views/FolderCompareView.vue
+++ b/src/views/FolderCompareView.vue
@@ -329,7 +329,7 @@ const flatStructure = ref(false)
 const newerViewPreset = ref<FolderNewerViewPreset | 'none'>('none')
 const loadTimeSeconds = ref<number | null>(null)
 const minorOnly = ref(false)
-const showFolderRules = ref(true)
+const showFolderRules = ref(false)
 const showFolderFilters = ref(initialDisplayFilters.showFiltersPanel)
 const showFolderSelect = ref(false)
 const checkedRowIds = ref<Set<string>>(new Set())
@@ -5077,7 +5077,7 @@ onUnmounted(() => {
 .path-pair input {
   width: 100%;
   min-width: 0;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   overflow: hidden;
   border: 1px solid var(--app-border);
@@ -5156,14 +5156,14 @@ onUnmounted(() => {
 
 .folder-filter-strip-btn {
   display: grid;
-  grid-template-rows: 20px auto;
+  grid-template-rows: 22px auto;
   align-content: center;
   justify-items: center;
   box-sizing: border-box;
-  width: 59px;
-  min-width: 59px;
-  max-width: 59px;
-  height: 37.5px;
+  width: 52px;
+  min-width: 52px;
+  max-width: 72px;
+  height: 48px;
   padding: 1px 2px 2px;
   border: 0;
   border-right: 1px solid #c0c0c0;
@@ -5206,7 +5206,7 @@ onUnmounted(() => {
 .folder-filter-pattern {
   flex: 1 1 180px;
   min-width: 120px;
-  height: 16.5px;
+  height: 24px;
   padding: 0 6px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
@@ -5231,7 +5231,7 @@ onUnmounted(() => {
 
 .manual-alignment-tools select {
   min-width: 220px;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   border: 1px solid var(--app-border);
   border-radius: 0;
@@ -5658,7 +5658,7 @@ onUnmounted(() => {
 }
 
 .tree-row.selected {
-  background: #a8cdf1;
+  background: #cce8ff;
   outline: 0;
 }
 
diff --git a/src/views/FolderMergeView.vue b/src/views/FolderMergeView.vue
index e40184a4..fec59a57 100644
--- a/src/views/FolderMergeView.vue
+++ b/src/views/FolderMergeView.vue
@@ -2990,8 +2990,8 @@ h1 {
 
 .merge-paths input {
   width: 100%;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 4px;
   overflow: hidden;
   border: 1px solid var(--app-border);
@@ -3041,8 +3041,8 @@ h1 {
 
 .merge-to-path .path-input,
 .merge-to-path input {
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 4px;
   font-size: 11px;
 }
@@ -3051,8 +3051,8 @@ h1 {
   :deep(.n-button[data-testid='folder-merge-same-ok']) {
   width: 64.5px;
   min-width: 64.5px;
-  height: 37.5px;
-  min-height: 37.5px;
+  height: 48px;
+  min-height: 48px;
   padding: 0 4px;
   border-radius: 0;
   font-size: 11px;
@@ -3062,8 +3062,8 @@ h1 {
   :deep(.n-button[data-testid='folder-merge-peek']) {
   width: 59px;
   min-width: 59px;
-  height: 37.5px;
-  min-height: 37.5px;
+  height: 48px;
+  min-height: 48px;
   padding: 0 4px;
   border-radius: 0;
   font-size: 11px;
@@ -3387,7 +3387,7 @@ h1 {
 
 .merge-plan-row.selected {
   outline: 0;
-  background: #a8cdf1;
+  background: #cce8ff;
 }
 
 .folder-session-log {
@@ -3508,14 +3508,14 @@ h1 {
 
 .folder-filter-strip-btn {
   display: grid;
-  grid-template-rows: 20px auto;
+  grid-template-rows: 22px auto;
   align-content: center;
   justify-items: center;
   box-sizing: border-box;
-  width: 59px;
-  min-width: 59px;
-  max-width: 59px;
-  height: 37.5px;
+  width: 52px;
+  min-width: 52px;
+  max-width: 72px;
+  height: 48px;
   padding: 1px 4px 2px;
   border: 0;
   border-right: 1px solid #c0c0c0;
@@ -3558,7 +3558,7 @@ h1 {
 .folder-filter-pattern {
   flex: 1 1 auto;
   min-width: 0;
-  height: 16.5px;
+  height: 24px;
   padding: 0 6px;
   border: 1px solid #c0c0c0;
   border-radius: 0;
diff --git a/src/views/FolderSyncView.vue b/src/views/FolderSyncView.vue
index 63757e28..1808cd77 100644
--- a/src/views/FolderSyncView.vue
+++ b/src/views/FolderSyncView.vue
@@ -2451,8 +2451,8 @@ h1 {
 .path-field-row .path-input {
   flex: 1;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
 }
 
 .sync-settings {
@@ -2471,8 +2471,8 @@ h1 {
 
 .sync-filter-pattern-field .folder-filter-pattern {
   width: 100%;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 6px;
   border: 1px solid #c0c0c0;
   border-radius: 0;
@@ -2496,7 +2496,7 @@ h1 {
 .sync-settings input,
 .sync-settings select {
   width: 100%;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   border: 1px solid var(--app-border);
   border-radius: 2px;
@@ -2808,7 +2808,7 @@ h1 {
 }
 
 .sync-row-selected {
-  background: #a8cdf1;
+  background: #cce8ff;
 }
 
 .folder-session-log {
@@ -2910,7 +2910,7 @@ h1 {
 
 .folder-filter-chrome {
   align-items: center;
-  min-height: 37.5px;
+  min-height: 48px;
   padding: 0 4px;
   border-bottom: 1px solid #a0a0a0;
   background: #f0f0f0;
@@ -2934,14 +2934,14 @@ h1 {
 
 .folder-filter-strip-btn {
   display: grid;
-  grid-template-rows: 20px auto;
+  grid-template-rows: 22px auto;
   align-content: center;
   justify-items: center;
   box-sizing: border-box;
-  width: 59px;
-  min-width: 59px;
-  max-width: 59px;
-  height: 37.5px;
+  width: 52px;
+  min-width: 52px;
+  max-width: 72px;
+  height: 48px;
   padding: 1px 4px 2px;
   border: 0;
   border-right: 1px solid #c0c0c0;
@@ -2984,7 +2984,7 @@ h1 {
 .folder-filter-pattern {
   flex: 1 1 auto;
   min-width: 0;
-  height: 16.5px;
+  height: 24px;
   padding: 0 6px;
   border: 1px solid #c0c0c0;
   border-radius: 0;
diff --git a/src/views/HexCompareView.vue b/src/views/HexCompareView.vue
index cf4f2675..e1071d84 100644
--- a/src/views/HexCompareView.vue
+++ b/src/views/HexCompareView.vue
@@ -1627,8 +1627,8 @@ h2 {
 .hex-wrap-controls button {
   width: 100%;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 6px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
@@ -2008,7 +2008,7 @@ h2 {
 .hex-path-field .path-input {
   flex: 1 1 auto;
   min-width: 0;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
diff --git a/src/views/HomeView.test.ts b/src/views/HomeView.test.ts
index 778d9b92..b99548b2 100644
--- a/src/views/HomeView.test.ts
+++ b/src/views/HomeView.test.ts
@@ -68,7 +68,7 @@ describe('HomeView', () => {
     const layout = wrapper.find('[data-testid="home-layout"]')
 
     expect(layout.exists()).toBe(true)
-    expect(layout.attributes('data-home-density')).toBe('capture-1to1')
+    expect(layout.attributes('data-home-density')).toBe('html-demo')
     expect(layout.attributes('data-home-chrome')).toBe('minimal')
     expect(wrapper.find('.workbench-shell').attributes('data-compact')).toBe('true')
     expect(wrapper.find('.bc-home-workspace').classes()).toContain('bc-home-workspace')
@@ -77,18 +77,20 @@ describe('HomeView', () => {
     expect(wrapper.findAll('[data-testid="home-new-session-card"]')).toHaveLength(12)
   })
 
-  it('keeps Home chrome metrics aligned with home.png CSS px', () => {
+  it('keeps Home chrome metrics aligned with HTML demo Home chrome', () => {
     const source = readFileSync(
       resolve(dirname(fileURLToPath(import.meta.url)), './HomeView.vue'),
       'utf8',
     )
 
-    expect(source).toContain('grid-template-columns: minmax(220px, 248px) minmax(0, 1fr)')
-    expect(source).toContain('grid-template-rows: 28px minmax(0, 1fr) 32px')
-    expect(source).toContain('min-height: 20px')
-    expect(source).toContain('width: 95.5px')
-    expect(source).toContain('height: 30px')
-    expect(source).toContain('grid-template-columns: repeat(3, minmax(140px, 157px))')
+    expect(source).toContain('grid-template-columns: minmax(240px, 260px) minmax(0, 1fr)')
+    expect(source).toContain('grid-template-rows: auto minmax(0, 1fr) auto')
+    expect(source).toContain('min-height: 22px')
+    expect(source).toContain('min-width: 80px')
+    expect(source).toContain('height: 28px')
+    expect(source).toContain('grid-template-columns: repeat(3, minmax(180px, 220px))')
+    expect(source).toContain('height: 110px')
+    expect(source).toContain('border-radius: 6px')
     expect(source).not.toContain('min-height: 7px')
     expect(source).not.toContain('height: 6px')
     expect(source).not.toContain('height: 7px')
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 7c9a7be9..da0205f9 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -651,7 +651,7 @@ onMounted(() => {
     <section
       class="home-workspace bc-home-workspace"
       data-testid="home-layout"
-      data-home-density="capture-1to1"
+      data-home-density="html-demo"
       data-home-chrome="minimal"
     >
       <aside
@@ -858,7 +858,7 @@ onMounted(() => {
               <span class="session-card-icon">
                 <component
                   :is="entry.icon"
-                  :size="48"
+                  :size="52"
                 />
               </span>
               <h3>{{ $t(entry.titleKey) }}</h3>
@@ -1172,31 +1172,31 @@ onMounted(() => {
 .bc-home-workspace {
   display: grid;
 
-  /* home.png tree ~241 CSS px at DPR 2; avoid prior 140–170 crush. */
-  grid-template-columns: minmax(220px, 248px) minmax(0, 1fr);
+  /* HTML demo sidebar ~260px */
+  grid-template-columns: minmax(240px, 260px) minmax(0, 1fr);
   background: #f9f9f9;
 }
 
 .bc-session-tree {
   display: grid;
-  grid-template-rows: 28px minmax(0, 1fr) 32px;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   min-width: 0;
   min-height: 0;
-  border-right: 1px solid #b9bec7;
-  background: #e3e7ed;
+  border-right: 1px solid #c8c8c8;
+  background: #f5f5f5;
 }
 
 .bc-session-tree header {
   display: flex;
   align-items: center;
   min-width: 0;
-  padding: 0 8px;
+  padding: 10px 12px 6px;
   overflow: hidden;
-  border-bottom: 1px solid #c6ccd5;
-  background: #ededed;
-  color: #111827;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-  font-size: 12px;
+  border-bottom: 1px solid #dcdcdc;
+  background: #f5f5f5;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
+  font-size: 13px;
   font-weight: 600;
   line-height: 1;
   text-overflow: ellipsis;
@@ -1213,19 +1213,19 @@ onMounted(() => {
   display: grid;
   grid-template-columns: 12px 18px minmax(0, 1fr);
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   width: 100%;
   height: auto;
-  min-height: 20px;
-  padding: 1px 2px;
+  min-height: 22px;
+  padding: 4px 12px 4px 18px;
   border: 0;
   background: transparent;
-  color: #111827;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
   font-size: 12px;
   line-height: 16px;
   text-align: left;
-  cursor: pointer;
+  cursor: default;
 }
 
 .bc-tree-row.child {
@@ -1241,7 +1241,11 @@ onMounted(() => {
 .bc-tree-row:hover,
 .bc-tree-row:focus-visible {
   outline: 0;
-  background: #c7dcf6;
+  background: #f0f7ff;
+}
+
+.bc-tree-row.selected {
+  background: #cce8ff;
 }
 
 .bc-tree-row strong {
@@ -1253,35 +1257,37 @@ onMounted(() => {
 
 .bc-tree-footer {
   display: grid;
-  grid-template-columns: 30px 30px minmax(0, 1fr);
+  grid-template-columns: 24px 24px minmax(0, 1fr);
   align-items: center;
-  gap: 3px;
-  padding: 2px 4px;
-  border-top: 1px solid #c6ccd5;
-  background: #fdfdfd;
+  gap: 4px;
+  padding: 6px 8px;
+  border-top: 1px solid #dcdcdc;
+  background: #f5f5f5;
 }
 
 .bc-tree-footer button {
-  height: 28px;
-  border: 1px solid #c6ccd5;
-  border-radius: 0;
+  width: 24px;
+  height: 24px;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
   background: #ffffff;
   color: #2f343a;
   font-size: 14px;
   line-height: 1;
+  cursor: default;
 }
 
 .bc-tree-footer input {
   width: 100%;
   min-width: 0;
-  height: 22px;
-  padding: 0 6px;
+  height: 24px;
+  padding: 0 8px;
   overflow: hidden;
-  border: 1px solid #c6ccd5;
-  border-radius: 0;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
   background: #ffffff;
-  color: #111827;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
   font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1300,7 +1306,7 @@ onMounted(() => {
 .bc-selected-session {
   display: grid;
   gap: 8px;
-  padding: 12px 16px 8px;
+  padding: 16px 24px 8px;
 }
 
 .bc-selected-title {
@@ -1327,43 +1333,50 @@ onMounted(() => {
 }
 
 .bc-selected-title strong {
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-  font-size: 20px;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
+  font-size: 16px;
   font-weight: 600;
   line-height: 1.15;
 }
 
 .bc-selected-title span {
-  color: #374151;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-  font-size: 13px;
-  line-height: 1.2;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
+  font-size: 12px;
+  line-height: 1.6;
 }
 
 .bc-selected-actions {
   display: flex;
-  gap: 10px;
+  gap: 8px;
 }
 
 .bc-selected-actions button {
-  width: 95.5px;
+  width: auto;
+  min-width: 80px;
   max-width: 100%;
-  height: 30px;
+  height: 28px;
+  padding: 0 16px;
   overflow: hidden;
-  border: 1px solid #c7cdd6;
-  border-radius: 2px;
-  background: #ffffff;
-  color: #111827;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  background: #fafafa;
+  color: #1a1a1a;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
   font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
-  cursor: pointer;
+  cursor: default;
 }
 
 .bc-selected-actions button:first-child {
-  border-color: #4aa3ff;
-  color: #1d4f91;
+  background: #ffffff;
+  color: #0563c1;
+  border-color: #5b9bd5;
+}
+
+.bc-selected-actions button:first-child:hover {
+  background: #e8f3fc;
 }
 
 .bc-selected-actions button:last-child {
@@ -1378,7 +1391,7 @@ onMounted(() => {
 }
 
 .new-session-panel {
-  padding: 4px 12px 16px;
+  padding: 4px 24px 24px;
 }
 
 .new-session-panel h2,
@@ -1390,23 +1403,24 @@ onMounted(() => {
 
 .new-session-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(140px, 157px));
-  justify-content: center;
-  gap: 8px 12px;
-  width: min(500px, calc(100% - 24px));
-  margin: 4px auto 8px;
+  grid-template-columns: repeat(3, minmax(180px, 220px));
+  justify-content: start;
+  gap: 18px 28px;
+  width: min(760px, 100%);
+  max-width: 760px;
+  margin: 4px 0 8px;
 }
 
 .bc-home-instructions {
   display: grid;
   gap: 2px;
   min-height: 20px;
-  margin: 0 0 6px;
-  color: #111827;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  margin: 0 0 14px;
+  color: #666666;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
   font-size: 12px;
   line-height: 16px;
-  justify-items: center;
+  justify-items: start;
 }
 
 .bc-home-instructions strong {
@@ -1416,46 +1430,51 @@ onMounted(() => {
 
 .new-session-card {
   display: grid;
-  gap: 4px;
+  gap: 10px;
   width: 100%;
   min-width: 0;
   max-width: 100%;
-  height: 91.5px;
-  min-height: 91.5px;
-  padding: 8px 4px 6px;
+  height: 110px;
+  min-height: 110px;
+  padding: 12px;
   overflow: hidden;
-  border: 0;
-  border-radius: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
   background: transparent;
-  color: #111827;
-  font-size: 12px;
+  color: #1a1a1a;
+  font-size: 13px;
   line-height: 1;
   cursor: pointer;
   justify-items: center;
-  align-content: start;
+  align-content: center;
   align-self: start;
   box-sizing: border-box;
+  transition:
+    background 0.12s,
+    border-color 0.12s;
 }
 
 .new-session-card[data-card-band='tall'] {
-  height: 131px;
-  min-height: 131px;
+  height: 110px;
+  min-height: 110px;
 }
 
 .new-session-card[data-card-band='short'] {
-  height: 91.5px;
-  min-height: 91.5px;
+  height: 110px;
+  min-height: 110px;
 }
 
 .new-session-card:hover,
 .new-session-card:focus {
   outline: 0;
-  background: #eaf4ff;
+  background: #ffffff;
+  border-color: #b8d4f0;
+  box-shadow: 0 1px 4px rgb(0 90 180 / 0.12);
 }
 
 .session-card-icon {
   display: inline-grid;
-  width: 48px;
+  width: 56px;
   height: 48px;
   color: #2f353d;
   place-items: center;
@@ -1474,8 +1493,8 @@ onMounted(() => {
   max-width: 100%;
   margin: 0;
   overflow: hidden;
-  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-  font-size: 12px;
+  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
+  font-size: 13px;
   font-weight: 400;
   line-height: 16px;
   text-align: center;
@@ -1802,15 +1821,6 @@ tr:hover .row-actions,
   background: color-mix(in srgb, #b45309 18%, transparent);
 }
 
-.bc-tree-row.selected {
-  background: #0078d4;
-  color: #ffffff;
-}
-
-.bc-tree-row.selected strong {
-  color: #ffffff;
-}
-
 .session-edit-panel {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto auto;
diff --git a/src/views/MediaCompareView.vue b/src/views/MediaCompareView.vue
index 02480c3e..bb817a24 100644
--- a/src/views/MediaCompareView.vue
+++ b/src/views/MediaCompareView.vue
@@ -1277,7 +1277,7 @@ function runMediaToolbarCommand(commandId: string): void {
 .media-path-field .path-input {
   flex: 1 1 auto;
   min-width: 0;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
diff --git a/src/views/PictureCompareView.vue b/src/views/PictureCompareView.vue
index ff46f48a..86b8b5d0 100644
--- a/src/views/PictureCompareView.vue
+++ b/src/views/PictureCompareView.vue
@@ -1675,8 +1675,8 @@ h2 {
 }
 
 .picture-path-panel input {
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 4px;
   border: 1px solid var(--app-border);
   border-radius: 0;
diff --git a/src/views/RegistryCompareView.vue b/src/views/RegistryCompareView.vue
index 2504390a..faa7408b 100644
--- a/src/views/RegistryCompareView.vue
+++ b/src/views/RegistryCompareView.vue
@@ -1510,8 +1510,8 @@ h1 {
 .path-field-row .path-input {
   flex: 1;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
 }
 
 .registry-input-panel label {
diff --git a/src/views/RemoteProfileView.vue b/src/views/RemoteProfileView.vue
index 4a756d1b..a210741a 100644
--- a/src/views/RemoteProfileView.vue
+++ b/src/views/RemoteProfileView.vue
@@ -994,7 +994,7 @@ function credentialKindLabel(kind: CredentialReferenceKind): string {
   display: grid;
   gap: 4px;
   height: 100%;
-  padding: 2px 4px;
+  padding: 0;
   overflow: auto;
 }
 
@@ -1050,7 +1050,7 @@ h2 {
 
 .profile-workspace {
   display: grid;
-  grid-template-columns: 280px minmax(0, 1fr);
+  grid-template-columns: 220px minmax(0, 1fr);
   gap: 4px;
   min-height: 380px;
 }
@@ -1061,7 +1061,7 @@ h2 {
   align-content: start;
   gap: 4px;
   min-width: 0;
-  padding: 2px 4px;
+  padding: 8px 0;
   border: 1px solid var(--app-border);
   border-radius: 0;
   background: var(--app-surface);
@@ -1081,7 +1081,7 @@ h2 {
 }
 
 button {
-  min-height: 18px;
+  min-height: 28px;
   padding: 0 6px;
   border: 1px solid var(--app-border);
   border-radius: 0;
@@ -1118,14 +1118,14 @@ button:hover:not(:disabled) {
   justify-items: start;
   gap: 1px;
   width: 100%;
-  min-height: 22px;
-  padding: 1px 4px;
+  min-height: 28px;
+  padding: 6px 14px;
   text-align: left;
 }
 
 .profile-row.active {
-  border-color: #2563eb;
-  background: rgb(37 99 235 / 0.1);
+  border-color: transparent;
+  background: #cce8ff;
 }
 
 .profile-row span {
@@ -1187,7 +1187,7 @@ input,
 select {
   width: 100%;
   min-width: 0;
-  height: 20px;
+  height: 26px;
   padding: 0 4px;
   border: 1px solid var(--app-border);
   border-radius: 0;
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index d89f79e6..7c94fd31 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1468,7 +1468,7 @@ function parseShortcutText(value: string): string[] {
   >
     <section
       class="settings-view"
-      data-options-density="capture-1to1"
+      data-options-density="html-demo"
     >
       <nav
         class="options-section-nav options-section-tree"
@@ -3717,35 +3717,39 @@ function parseShortcutText(value: string): string[] {
 <style scoped>
 .settings-view {
   display: grid;
-  grid-template-columns: 176px minmax(0, 1fr);
-  align-content: start;
-  align-items: start;
-  gap: 6px;
+  grid-template-columns: 220px minmax(0, 1fr);
+  align-content: stretch;
+  align-items: stretch;
+  gap: 0;
   height: 100%;
-  padding: 4px 6px;
-  overflow: auto;
-  font-size: 11px;
-  line-height: 16px;
+  padding: 0;
+  overflow: hidden;
+  background: #ffffff;
+  font-size: 12px;
+  line-height: 1.45;
 }
 
 .options-content {
   display: grid;
-  gap: 4px;
+  gap: 10px;
   align-content: start;
   min-width: 0;
-  padding: 0;
+  height: 100%;
+  padding: 16px 20px;
+  overflow: auto;
+  background: #ffffff;
 }
 
 .options-content :deep([class='n-card__content']) {
   display: grid;
-  gap: 4px;
-  padding: 4px 6px;
+  gap: 10px;
+  padding: 4px 0 0;
 }
 
 .options-content :deep(.n-checkbox) {
-  min-height: 18px;
-  font-size: 11px;
-  line-height: 16px;
+  min-height: 22px;
+  font-size: 12px;
+  line-height: 1.45;
 }
 
 .options-content :deep(.n-form-item) {
@@ -3766,13 +3770,15 @@ function parseShortcutText(value: string): string[] {
 
 .options-section-nav {
   display: grid;
-  gap: 4px;
-  max-height: calc(100vh - 120px);
-  padding: 2px 4px;
+  gap: 0;
+  height: 100%;
+  max-height: none;
+  padding: 8px 0;
   overflow: auto;
-  border: 1px solid #a0a0a0;
+  border: 0;
+  border-right: 1px solid #c8c8c8;
   border-radius: 0;
-  background: var(--app-surface);
+  background: #f5f5f5;
   align-content: start;
 }
 
@@ -3798,11 +3804,11 @@ function parseShortcutText(value: string): string[] {
 .options-tree-group-label {
   min-width: 0;
   margin: 0;
-  padding: 4px 6px 2px;
-  color: var(--app-text-muted);
+  padding: 10px 14px 4px;
+  color: #666666;
   font-size: 11px;
-  font-weight: 700;
-  line-height: 16px;
+  font-weight: 600;
+  line-height: 1.2;
   text-transform: uppercase;
 }
 
@@ -3855,25 +3861,26 @@ function parseShortcutText(value: string): string[] {
 .options-section-button {
   box-sizing: border-box;
   width: 100%;
-  min-height: 18px;
-  padding: 2px 6px;
+  min-height: 28px;
+  padding: 6px 14px;
   border: 0;
   border-radius: 0;
   background: transparent;
-  color: var(--app-text);
-  font-size: 11px;
-  line-height: 16px;
+  color: #1a1a1a;
+  font-size: 12px;
+  line-height: 1.2;
   text-align: left;
-  cursor: pointer;
+  cursor: default;
 }
 
 .options-section-button:hover {
-  background: #dceeff;
+  background: #e8f4ff;
 }
 
 .options-section-button.active {
-  background: #c8e4ff;
-  box-shadow: inset 0 0 0 1px #89bdea;
+  background: #cce8ff;
+  font-weight: 600;
+  box-shadow: none;
 }
 
 .auto-save-limit-input,
@@ -3908,8 +3915,8 @@ function parseShortcutText(value: string): string[] {
 .stack-row input,
 .stack-row select {
   min-width: 0;
-  height: 20px;
-  min-height: 20px;
+  height: 26px;
+  min-height: 26px;
   padding: 0 6px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
@@ -4215,14 +4222,14 @@ h1 {
 
 .options-footer-btn {
   min-width: 72px;
-  height: 18px;
-  min-height: 18px;
-  padding: 0 10px;
-  border: 1px solid #a0a0a0;
-  border-radius: 0;
-  background: #ffffff;
-  color: #111111;
-  font-size: 11px;
+  height: 28px;
+  min-height: 28px;
+  padding: 0 16px;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  background: #fafafa;
+  color: #1a1a1a;
+  font-size: 12px;
   line-height: 16px;
   cursor: default;
 }
diff --git a/src/views/TableCompareView.vue b/src/views/TableCompareView.vue
index 214b9bda..9f52c3e6 100644
--- a/src/views/TableCompareView.vue
+++ b/src/views/TableCompareView.vue
@@ -1663,8 +1663,8 @@ h2 {
 .path-field-row .path-input {
   flex: 1;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
 }
 
 .table-source-controls label {
diff --git a/src/views/TextCompareView.test.ts b/src/views/TextCompareView.test.ts
index 5551458b..6bfbfc79 100644
--- a/src/views/TextCompareView.test.ts
+++ b/src/views/TextCompareView.test.ts
@@ -176,7 +176,7 @@ describe('TextCompareView', () => {
     )
     expect(
       wrapper.find('[data-testid="text-session-toolbar-rules"]').attributes('data-active'),
-    ).toBe('true')
+    ).toBe('false')
     expect(
       wrapper.find('[data-testid="text-session-toolbar-bar"]').attributes('data-large-buttons'),
     ).toBe('true')
@@ -204,13 +204,6 @@ describe('TextCompareView', () => {
   it('toggles the text rules panel from the session toolbar', async () => {
     const wrapper = mountTextCompareView()
 
-    expect(
-      wrapper.find('[data-testid="text-rules-panel"]').attributes('style') ?? '',
-    ).not.toContain('display: none')
-    expect(
-      wrapper.find('[data-testid="text-session-toolbar-rules"]').attributes('data-active'),
-    ).toBe('true')
-    await wrapper.find('[data-testid="text-session-toolbar-rules"]').trigger('click')
     expect(wrapper.find('[data-testid="text-rules-panel"]').attributes('style') ?? '').toContain(
       'display: none',
     )
@@ -221,6 +214,13 @@ describe('TextCompareView', () => {
     expect(
       wrapper.find('[data-testid="text-rules-panel"]').attributes('style') ?? '',
     ).not.toContain('display: none')
+    expect(
+      wrapper.find('[data-testid="text-session-toolbar-rules"]').attributes('data-active'),
+    ).toBe('true')
+    await wrapper.find('[data-testid="text-session-toolbar-rules"]').trigger('click')
+    expect(wrapper.find('[data-testid="text-rules-panel"]').attributes('style') ?? '').toContain(
+      'display: none',
+    )
   })
 
   it('opens context chrome and adjusts surrounding lines from the session toolbar', async () => {
diff --git a/src/views/TextCompareView.vue b/src/views/TextCompareView.vue
index 8ea8a9d4..10198259 100644
--- a/src/views/TextCompareView.vue
+++ b/src/views/TextCompareView.vue
@@ -68,7 +68,7 @@ const ignoreWhitespace = ref(initialTextSessionOptions.ignoreWhitespace)
 const ignoreCase = ref(initialTextSessionOptions.ignoreCase)
 const ignoreLineEndings = ref(initialTextSessionOptions.ignoreLineEndings)
 const ignoreRegexInput = ref(initialTextSessionOptions.ignoreRegexes.join(', '))
-const showTextRules = ref(true)
+const showTextRules = ref(false)
 const showContextPanel = ref(false)
 const goToMenuOpen = ref(false)
 const goToLineInput = ref('1')
@@ -2240,8 +2240,8 @@ function onVisibilityForDiskChange(): void {
 .text-path-field .path-input {
   flex: 1 1 auto;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
 }
 
 .text-path-trailing {
diff --git a/src/views/TextEditView.vue b/src/views/TextEditView.vue
index 55b36b82..857d05dc 100644
--- a/src/views/TextEditView.vue
+++ b/src/views/TextEditView.vue
@@ -1332,8 +1332,8 @@ h1 {
 
 .path-input {
   flex: 1;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   font-family: var(--font-mono);
 }
 
diff --git a/src/views/TextMergeView.vue b/src/views/TextMergeView.vue
index 41d74e8d..d3913678 100644
--- a/src/views/TextMergeView.vue
+++ b/src/views/TextMergeView.vue
@@ -1510,7 +1510,7 @@ watch(
   width: 220px;
   min-width: 0;
   max-width: 100%;
-  height: 16.5px;
+  height: 24px;
   padding: 0 4px;
   overflow: hidden;
   border: 1px solid var(--app-border);
diff --git a/src/views/TextPatchView.vue b/src/views/TextPatchView.vue
index c98afde9..09e81a00 100644
--- a/src/views/TextPatchView.vue
+++ b/src/views/TextPatchView.vue
@@ -1378,8 +1378,8 @@ function lineNumber(value: number | null): string {
 .path-field-row .path-input {
   flex: 1;
   min-width: 0;
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 4px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
diff --git a/src/views/VersionCompareView.vue b/src/views/VersionCompareView.vue
index 8d04f95e..a499d872 100644
--- a/src/views/VersionCompareView.vue
+++ b/src/views/VersionCompareView.vue
@@ -1071,8 +1071,8 @@ h1 {
 }
 
 .version-path-panel input {
-  height: 16.5px;
-  min-height: 16.5px;
+  height: 24px;
+  min-height: 24px;
   padding: 0 6px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
diff --git a/src/views/reports/ReportsScriptView.vue b/src/views/reports/ReportsScriptView.vue
index 7436de23..2d39388f 100644
--- a/src/views/reports/ReportsScriptView.vue
+++ b/src/views/reports/ReportsScriptView.vue
@@ -490,7 +490,10 @@ function fillFromLastCompare(): void {
       </WorkbenchToolbar>
     </template>
 
-    <section class="reports-script-view">
+    <section
+      class="reports-script-view"
+      data-scripts-density="html-demo"
+    >
       <section class="report-panel">
         <header class="split-pane-header active">
           <strong>{{ $t('ui.recentExports') }}</strong>
@@ -756,22 +759,29 @@ function fillFromLastCompare(): void {
 <style scoped>
 .reports-script-view {
   display: grid;
-  grid-template-rows: minmax(0, 1fr) minmax(220px, 0.7fr);
-  gap: 4px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: minmax(0, 1fr);
+  gap: 0;
   height: 100%;
   min-height: 0;
-  padding: 2px 4px;
+  padding: 0;
   overflow: hidden;
+  background: #ffffff;
 }
 
 .report-panel,
 .script-panel {
-  display: grid;
-  grid-template-rows: 22px auto minmax(0, 1fr) auto;
+  display: flex;
+  flex-direction: column;
   min-height: 0;
   overflow: hidden;
-  border: 1px solid var(--app-border);
-  background: var(--app-canvas);
+  border: 0;
+  border-right: 1px solid #c8c8c8;
+  background: #ffffff;
+}
+
+.script-panel {
+  border-right: 0;
 }
 
 .report-export-form {
@@ -794,7 +804,7 @@ function fillFromLastCompare(): void {
 
 .report-export-form input,
 .report-export-form select {
-  height: 20px;
+  height: 26px;
   padding: 0 4px;
   border: 1px solid var(--app-border);
   border-radius: 2px;
diff --git a/tests/e2e/text-compare.smoke.spec.ts b/tests/e2e/text-compare.smoke.spec.ts
index 6f7b0092..9c49af5e 100644
--- a/tests/e2e/text-compare.smoke.spec.ts
+++ b/tests/e2e/text-compare.smoke.spec.ts
@@ -104,6 +104,8 @@ test('opens the home page and runs a text comparison', async ({ page }) => {
   await expect(page.getByTestId('run-diff')).toBeVisible()
   await expect(page.locator('body')).not.toContainText('generated-120.log')
 
+  await page.getByTestId('text-session-toolbar-rules').click()
+  await expect(page.getByTestId('text-rules-panel')).toBeVisible()
   await page.getByTestId('ignore-whitespace').check()
   await page.getByTestId('run-diff').click()
 
diff --git a/tests/e2e/ui-design-alignment.spec.ts b/tests/e2e/ui-design-alignment.spec.ts
index cbefb853..904f3b5f 100644
--- a/tests/e2e/ui-design-alignment.spec.ts
+++ b/tests/e2e/ui-design-alignment.spec.ts
@@ -36,7 +36,7 @@ for (const [name, route] of routes) {
     )
     await expect(page.locator('.menu-bar')).toHaveCSS('height', '23.5px')
     await expect(page.locator('.sidebar')).toBeHidden()
-    await expect(page.locator('.status-bar')).toHaveCSS('height', '19.5px')
+    await expect(page.locator('.status-bar')).toHaveCSS('height', '26px')
     await expect(page.locator('.command-bar')).toHaveCount(0)
     await expect(page.locator('.pathbar')).toHaveCount(0)
     await expect(page.locator('.page-head')).toHaveCount(0)