transitions-refine 0.3.23 → 0.3.25

package/demo.html

@@ -96,6 +96,38 @@
       min-height: 100vh;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
+      /* Smooth ease out (transitions.dev) for the demo-page bg toggle */
+      transition: background-color 250ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    /* demo-page-only dark background — independent of the panel's data-tl-theme */
+    body[data-demo-bg="dark"] { background: #121212; }
+    /* the only unavoidable legibility tweak: the bare H1 sits directly on the page bg */
+    body[data-demo-bg="dark"] .demo-header h1 { color: #f5f5f5; }
+
+    /* demo-chrome background toggle — sits beside the Hide-demo button */
+    .demo-bg-toggle {
+      position: fixed; top: 12px; right: 104px; z-index: 2147483000;
+      display: inline-flex; align-items: center; gap: 6px;
+      height: 28px; padding: 0 10px; border-radius: 8px; cursor: pointer;
+      border: 1px solid rgba(0,0,0,0.12); background: #fff; color: #444;
+      font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+      transition: background-color 250ms cubic-bezier(0.22, 1, 0.36, 1),
+                  color 250ms cubic-bezier(0.22, 1, 0.36, 1),
+                  border-color 250ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .demo-bg-toggle:hover { border-color: rgba(0,0,0,0.22); }
+    .demo-bg-toggle[aria-pressed="true"] {
+      background: #121212; color: #ededed; border-color: rgba(255,255,255,0.18);
+      box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+    }
+    .demo-bg-toggle[aria-pressed="true"]:hover { border-color: rgba(255,255,255,0.3); }
+    /* small swatch previewing the bg this toggle controls */
+    .demo-bg-toggle .demo-bg-dot {
+      width: 10px; height: 10px; border-radius: 50%; background: #121212;
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
+    @media (prefers-reduced-motion: reduce) {
+      body, .demo-bg-toggle { transition: none; }
     }
 
     .demo-root { max-width: 900px; margin: 0 auto; padding: 24px 24px 120px; }
@@ -494,9 +526,10 @@
     .tl-refine-btn:disabled::before { background: var(--c-blue-bg); background: color(display-p3 0 0.451 0.898 / 0.06); }
     .tl-refine-btn:disabled span { color: var(--c-blue-pressed); opacity: 0.5; }
     /* tiny 1.5px sparks flying out along each of the wand's spark rays on hover */
-    .tl-refine-sparks { position: absolute; left: 23px; top: 15px; width: 0; height: 0; z-index: 3; pointer-events: none; }
+    .tl-refine-sparks { position: absolute; left: 23px; top: 15px; width: 0; height: 0; z-index: 3; pointer-events: none;
+      color: var(--c-blue-pressed); }
     .tl-refine-sparks i { position: absolute; left: 0; top: 0; width: 1.5px; height: 1.5px; border-radius: 50%;
-      background: var(--c-blue); opacity: 0; }
+      background: currentColor; opacity: 0; }
     @keyframes tl-refine-spark {
       0%   { opacity: 0; transform: translate(var(--ox, 0), var(--oy, 0)) scale(0.4); }
       20%  { opacity: 1; transform: translate(calc(var(--ox, 0) + var(--sx, 0) * 0.2), calc(var(--oy, 0) + var(--sy, -12px) * 0.2)) scale(1); }
@@ -513,6 +546,20 @@
     .tl-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
     .tl-inspector { flex: 0 0 280px; padding: 16px 16px; display: flex; flex-direction: column;
       border-left: 1px solid var(--c-line); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+    /* thin overlay-style scrollbars — scoped to the panel scroll containers so the
+       host page's own scrollbar is never touched */
+    .tl-inspector, .tl-rows, .tl-refine-body, .tl-refine-pages .t-page {
+      scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; }
+    .tl-inspector::-webkit-scrollbar, .tl-rows::-webkit-scrollbar,
+    .tl-refine-body::-webkit-scrollbar, .tl-refine-pages .t-page::-webkit-scrollbar { width: 6px; height: 6px; }
+    .tl-inspector::-webkit-scrollbar-track, .tl-rows::-webkit-scrollbar-track,
+    .tl-refine-body::-webkit-scrollbar-track, .tl-refine-pages .t-page::-webkit-scrollbar-track { background: transparent; }
+    .tl-inspector::-webkit-scrollbar-thumb, .tl-rows::-webkit-scrollbar-thumb,
+    .tl-refine-body::-webkit-scrollbar-thumb, .tl-refine-pages .t-page::-webkit-scrollbar-thumb {
+      background: rgba(0,0,0,0.18); border-radius: 8px; border: 1px solid transparent; background-clip: padding-box; }
+    .tl-inspector::-webkit-scrollbar-thumb:hover, .tl-rows::-webkit-scrollbar-thumb:hover,
+    .tl-refine-body::-webkit-scrollbar-thumb:hover, .tl-refine-pages .t-page::-webkit-scrollbar-thumb:hover {
+      background: rgba(0,0,0,0.28); background-clip: padding-box; }
     /* title sits centered in the ~52px band between the Refine toolbar and the
        Duration field: 16px above + 20px title + 16px below = 52px */
     .tl-insp-title { display: flex; align-items: center; font-size: 13px; font-weight: 500; line-height: 18px; color: #171717; margin-bottom: 16px; text-transform: capitalize; }
@@ -557,26 +604,48 @@
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     /* 16px left inset of the plot area (kept in sync with the ruler) */
     .tl-prop-track { position: relative; flex: 1; user-select: none; margin-left: 16px; }
-    /* timeline line — capsule (fully rounded), Figma #eeeeef default / #e9e9e9 hover */
-    .tl-bar { position: absolute; top: 50%; height: 24px; transform: translateY(-50%); background: var(--c-track);
-      border-radius: 8px; min-width: 24px; cursor: grab;
-      box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.06), inset 0 -1px 0 0 rgba(0,0,0,0.1), inset 0 0 0 1px rgba(196,196,196,0.1);
-      /* card resize (transitions.dev #01): tween left/width when timing changes
-         programmatically (Apply, snap, value-field edit). Suppressed mid-drag
-         (.is-dragging) so the bar tracks the cursor 1:1. */
-      transition: background 0.12s ease,
+    /* timeline line — rubber-band drag physics. card resize tweens left/width
+       when timing changes programmatically; suppressed mid-drag (.is-dragging)
+       so the bar tracks the cursor 1:1. */
+    .tl-bar { position: absolute; top: 50%;
+      height: 24px; min-width: 24px; cursor: grab;
+      transform: translateY(-50%) skewX(var(--rb-skew,0deg)) scale(var(--rb-sx,1),var(--rb-sy,1));
+      transform-origin: var(--rb-origin,50%) 50%;
+      transition: transform 70ms linear,
         left 220ms cubic-bezier(0.22, 1, 0.36, 1),
         width 220ms cubic-bezier(0.22, 1, 0.36, 1); will-change: left, width; }
-    .tl-bar.is-dragging { transition: background 0.12s ease; }
+    .tl-bar.is-dragging { transition: transform 70ms linear; }
+    /* one-shot guard for move-mouseup: keeps left/width transition disabled
+       until the final released position has fully flushed to React state */
+    .tl-bar.no-geom-tween { transition: transform 70ms linear !important; }
+    /* keep release geometry stable: clearing rubber vars should not nudge the
+       dragged edge after mouseup, so transform resets instantly on release */
+    .tl-bar.rb-release { transition: left 220ms cubic-bezier(0.22,1,0.36,1),
+        width 220ms cubic-bezier(0.22,1,0.36,1); }
     @media (prefers-reduced-motion: reduce) {
-      .tl-bar { transition: background 0.12s ease !important; } }
-    .tl-prop-row:hover .tl-bar, .tl-prop-row.selected .tl-bar { background: var(--c-track-h); }
+      .tl-bar { transition: left 220ms cubic-bezier(0.22,1,0.36,1), width 220ms cubic-bezier(0.22,1,0.36,1) !important; } }
+    /* Bent capsule is a real SVG path: the 1px ring is a gradient stroke that
+       follows the bend exactly, the drop-shadow filter follows the painted path
+       (exact Figma shadow 580:8961), and the outline is re-synced to the bar's
+       real size by a ResizeObserver so it can never detach from the handles. */
+    .tl-bar-body { position: absolute; inset: 0; overflow: visible; pointer-events: none;
+      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.08)); }
+    .tl-bar-body path { fill: var(--c-track); stroke: url(#rb-ring); stroke-width: 1;
+      transition: fill 0.12s ease; }
+    .tl-bar.rb-release .tl-bar-body path { transition: fill 0.12s ease, d 200ms cubic-bezier(0.22,1,0.36,1); }
+    .tl-prop-row:hover .tl-bar-body path, .tl-prop-row.selected .tl-bar-body path { fill: var(--c-track-h); }
     .tl-bar:active { cursor: grabbing; }
-    /* resize handles — Figma node 13044:2625: 2×14px, #767676 @60%, centered, ~5px edge inset */
-    .tl-bar-handle { position: absolute; top: 50%; transform: translateY(-50%); width: 2px; height: 14px; border-radius: 20px;
-      background: var(--c-thumb); opacity: 0; transition: opacity 0.12s ease; pointer-events: none; }
-    .tl-bar-handle.left { left: 5px; }
-    .tl-bar-handle.right { right: 5px; }
+    /* resize handles — Figma 625:1959 ")" crescent stroke on the leading edge */
+    .tl-bar-handle { position: absolute; top: 50%; width: 8px; height: 14px;
+      transform: translateY(-50%) translateX(var(--rb-hshift,0px));
+      opacity: 0; transition: opacity 0.12s ease, transform 70ms linear; pointer-events: none; z-index: 1; }
+    .tl-bar.rb-release .tl-bar-handle { transition: opacity 0.12s ease, transform 200ms cubic-bezier(0.22,1,0.36,1); }
+    .tl-bar-handle svg { display: block; width: 100%; height: 100%; overflow: visible; }
+    .tl-bar-handle path { fill: none; stroke: var(--c-thumb); stroke-width: 2; stroke-linecap: round;
+      opacity: 0.6; transition: d 70ms linear; }
+    .tl-bar.rb-release .tl-bar-handle path { transition: d 200ms cubic-bezier(0.22,1,0.36,1); }
+    .tl-bar-handle.left { left: 2px; }
+    .tl-bar-handle.right { right: 2px; }
     .tl-prop-row:hover .tl-bar-handle { opacity: 0.6; }
     .tl-bar:active .tl-bar-handle,
     .tl-bar:has(.tl-bar-grip:active) .tl-bar-handle { opacity: 1; }
@@ -737,9 +806,10 @@
       transition: color 0.12s ease; }
     .tl-preview-head:hover .tl-preview-title,
     .tl-preview-head:hover .tl-preview-chevron { color: #000; }
-    .tl-preview-title { font-size: 13px; font-weight: 500; color: #171717; letter-spacing: 0; line-height: 18px; }
+    .tl-preview-title { font-size: 13px; font-weight: 500; color: #171717; letter-spacing: 0; line-height: 18px;
+      transition: color 0.12s ease; }
     .tl-preview-chevron { display: inline-flex; color: #171717;
-      transform: scaleY(1); transform-origin: center; transition: transform var(--acc-dur) var(--acc-ease); }
+      transform: scaleY(1); transform-origin: center; transition: transform var(--acc-dur) var(--acc-ease), color 0.12s ease; }
     .tl-preview[data-open="true"] .tl-preview-chevron { transform: scaleY(-1); }
     .tl-preview-panel { display: grid; grid-template-rows: 0fr;
       transition: grid-template-rows var(--acc-dur) var(--acc-ease); }
@@ -1192,7 +1262,7 @@
     }
     .tl-refine-inner {
       width: var(--refine-w, 360px); height: 100%; box-sizing: border-box;
-      display: flex; flex-direction: column;
+      display: flex; flex-direction: column; position: relative;
       background: #fff; color: var(--c-text);
       font-family: "Inter", system-ui, -apple-system, sans-serif;
     }
@@ -1223,7 +1293,7 @@
     /* refine-type tabs — toolbar strip (Figma 587:9258): 48px white bar, hairline
        bottom divider, segments inset 16px and packed gap:0 like a segmented control */
     .tl-refine-tabs { flex: 0 0 auto; box-sizing: border-box; display: flex; align-items: center; gap: 0;
-      height: 48px; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; }
+      height: 48px; padding: 0 16px 0 10px; background: #fff; border-bottom: 1px solid #f0f0f0; }
     .tl-refine-tab { height: 32px; padding: 6px 12px; border: none; background: transparent; cursor: pointer;
       border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500; line-height: 14px; color: #676767;
       transition: background 0.14s ease, color 0.14s ease; }
@@ -1370,6 +1440,39 @@
     /* scanning: cross-blur to the status face */
     .tl-scan-morph.is-scanning .tl-scan-face-label { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(0.98); }
     .tl-scan-morph.is-scanning .tl-scan-face-status { opacity: 1; filter: blur(0); transform: scale(1); }
+    /* exit (scan done → liquid split): pill stays put on the stage while status
+       text cross-blurs out and the chrome/beam fade so the goo blobs underneath
+       can take over without a position jump. */
+    /* The exiting pill lives inside the overlay and collapses along the SAME
+       300ms curve and box values as the blobs' vertical travel — its centered
+       label + loader ride down with the goo in perfect lockstep, and it can
+       never disagree with the blobs about height. The stage below is just a
+       spacer driving the foot's height tween. */
+    .tl-scan-morph.is-exiting { position: absolute;
+      width: auto !important; height: auto !important;
+      margin: 0; pointer-events: none; z-index: 2;
+      box-shadow: none !important; transition: none !important;
+      animation: tl-scan-pill-exit 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
+    @keyframes tl-scan-pill-exit {
+      from { left: 4px; right: 4px; top: -41px; bottom: 24px; }
+      to   { left: 0; right: 0; top: 0; bottom: 0; } }
+    /* the goo layer owns the pill's outline (fill + shadow) during exit — the
+       exiting pill drops its own shadow and inset ring so they don't stack into
+       a doubled outline. Only its white fill (::before) lingers, cross-fading to
+       reveal the identical white blobs underneath, plus the fading text. */
+    .tl-scan-morph.is-exiting::after { opacity: 0 !important; animation: none !important; }
+    .tl-scan-morph.is-exiting .tl-scan-beam { animation: tl-scan-chrome-out var(--icon-swap-dur) var(--icon-swap-ease) forwards; }
+    /* fill drops fast (150ms) so the blobs own the surface before they start
+       visibly shrinking away from the pill's box; text follows at 250ms */
+    .tl-scan-morph.is-exiting::before { animation: tl-scan-chrome-out 150ms ease-out forwards; }
+    @keyframes tl-scan-chrome-out {
+      from { opacity: 1; }
+      to   { opacity: 0; } }
+    .tl-scan-morph.is-exiting .tl-scan-face-status {
+      animation: tl-scan-status-out var(--icon-swap-dur) var(--icon-swap-ease) forwards; }
+    @keyframes tl-scan-status-out {
+      from { opacity: 1; filter: blur(0); transform: scale(1); }
+      to   { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(0.98); } }
     .tl-scan-label { white-space: nowrap; }
     /* The BorderBeam library injects its own stylesheet that forces
        position:relative on its [data-beam] container (and it lands later in the
@@ -1412,10 +1515,10 @@
       transition: background 150ms ease-out, border-color 150ms ease-out, opacity 150ms ease-out; }
     .tl-gate-recheck:hover { background: rgba(0, 0, 0, 0.07); border-color: rgba(0, 0, 0, 0.12); }
     .tl-gate-recheck:disabled { opacity: 0.55; cursor: default; }
-    html[data-theme="dark"] .tl-gate-reason { color: #7e7e7e; }
-    html[data-theme="dark"] .tl-gate-recheck { color: #d4d4d4; background: rgba(255, 255, 255, 0.06);
+    html[data-tl-theme="dark"] .tl-gate-reason { color: #7e7e7e; }
+    html[data-tl-theme="dark"] .tl-gate-recheck { color: #d4d4d4; background: rgba(255, 255, 255, 0.06);
       border-color: rgba(255, 255, 255, 0.12); }
-    html[data-theme="dark"] .tl-gate-recheck:hover { background: rgba(255, 255, 255, 0.1);
+    html[data-tl-theme="dark"] .tl-gate-recheck:hover { background: rgba(255, 255, 255, 0.1);
       border-color: rgba(255, 255, 255, 0.16); }
     @media (prefers-reduced-motion: reduce) { .tl-gate-recheck { transition: none; } }
     @media (prefers-reduced-motion: reduce) {
@@ -1471,7 +1574,7 @@
       animation: tl-live-in 250ms cubic-bezier(0.22,1,0.36,1) both; }
     .tl-live-main { display: inline-flex; align-items: center; gap: 5px; flex: none; }
     .tl-live-label { font-size: 12px; font-weight: 400; line-height: 14px; color: #18a32f; white-space: nowrap; }
-    html[data-theme="dark"] .tl-live-label { color: #4ade80; }
+    html[data-tl-theme="dark"] .tl-live-label { color: #70e984; }
     .tl-live-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
       background: #34CC20; box-shadow: inset 0 0 0 0.5px rgba(0,182,30,0.55);
       animation: tl-live-pulse 1600ms linear infinite; }
@@ -1486,9 +1589,9 @@
         color 150ms cubic-bezier(0.22,1,0.36,1); }
     .tl-live-stop:hover,
     .tl-live-stop:active { background: rgba(68,167,84,0.2); color: #057217; }
-    html[data-theme="dark"] .tl-live-stop { color: #4ade80; }
-    html[data-theme="dark"] .tl-live-stop:hover,
-    html[data-theme="dark"] .tl-live-stop:active { color: #86efac; }
+    html[data-tl-theme="dark"] .tl-live-stop { color: #70e984; }
+    html[data-tl-theme="dark"] .tl-live-stop:hover,
+    html[data-tl-theme="dark"] .tl-live-stop:active { color: #8ef09e; }
     .tl-live-stop:focus-visible { outline: 2px solid #118c25; outline-offset: 1px; }
     /* LIVE OFF — node 594:22912 (gray, no button) */
     .tl-live-chip.is-stopped { width: auto; justify-content: flex-start; padding: 0 9px;
@@ -1498,7 +1601,7 @@
     .tl-live-chip.is-stopped .tl-live-dot { background: #A1A1A1;
       box-shadow: inset 0 0 0 0.5px rgba(146,146,146,0.6); animation: none; }
     .tl-live-chip.is-stopped .tl-live-label { color: #525252; }
-    html[data-theme="dark"] .tl-live-chip.is-stopped .tl-live-label { color: #a1a1a1; }
+    html[data-tl-theme="dark"] .tl-live-chip.is-stopped .tl-live-label { color: #848484; }
     @keyframes tl-live-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
     @keyframes tl-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
     @media (prefers-reduced-motion: reduce) {
@@ -1668,6 +1771,86 @@
     .tl-refine-foot.is-bar { padding: 8px 16px; gap: 8px; justify-content: stretch;
       background: #fff; border-top: 1px solid #f0f0f0; }
     .tl-refine-foot.is-bar .tl-pill-btn { flex: 1; align-self: stretch; }
+    /* Loading pill → two footer buttons: gooey/liquid split. During exit the
+       scanning pill stays mounted (is-exiting) while status text cross-blurs out;
+       goo blobs start inset-0 on the same 49px stage, then the stage shrinks to
+       32px as the blobs split — no footer/pill position jump. */
+    /* vertical geometry (stage height + foot padding) settles FAST (220ms) while
+       the horizontal split runs the full 300ms — the box is already at its final
+       32px height while the blobs finish sliding apart, so the ending is calm. */
+    .tl-liquid-stage { position: relative; width: 100%; height: 49px; margin-bottom: 20px;
+      animation: tl-liquid-stage-shrink 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
+    @keyframes tl-liquid-stage-shrink {
+      to { height: 32px; margin-bottom: 0; } }
+    /* The overlay is anchored to the FOOT's bottom at the bar's exact resting
+       geometry (bottom 8 / sides 16 / height 32) — NOT to the shrinking stage.
+       The foot's bottom edge never moves, so blobs, chrome and labels live at
+       the final position/size for the entire morph; only the fading pill rides
+       the stage. Handoff to the real bar is then pixel-identical. */
+    .tl-liquid-morph { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 32px; }
+    .tl-liquid-goo-svg { position: absolute; width: 0; height: 0; }
+    .tl-liquid-goo { position: absolute; inset: 0; pointer-events: none; z-index: 1;
+      filter: url(#tl-goo) drop-shadow(0 1px 3px rgba(0,0,0,0.08)) drop-shadow(0 0 1px rgba(0,0,0,0.14));
+      /* hand-off: goo cross-fades OUT (250–430ms) in the same window the real
+         buttons cross-fade IN — the surface swaps ownership gradually, so the
+         overlay unmount at 470ms removes an already-invisible layer */
+      animation: tl-liquid-goo-out 180ms ease 250ms both; }
+    @keyframes tl-liquid-goo-out {
+      from { opacity: 1; }
+      to   { opacity: 0; } }
+    /* split runs at the transitions.dev "Smooth ease out" token (300ms) — kept
+       in sync with the stage shrink above so blobs land as the box reaches 32px */
+    .tl-liquid-blob { position: absolute; background: #fff; border-radius: 36px;
+      animation-duration: 300ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+      animation-fill-mode: both; }
+    .tl-liquid-blob-a { animation-name: tl-liquid-a; }
+    .tl-liquid-blob-b { animation-name: tl-liquid-b; }
+    /* from = the scanning pill's box expressed in the overlay's (final-row)
+       coordinates: pill top sits 41px above the row, its bottom 24px above the
+       row's bottom, and it's 4px wider each side (foot pad 20 vs bar pad 16). */
+    @keyframes tl-liquid-a {
+      from { left: 4px; right: 4px; top: -41px; bottom: 24px; border-radius: 60px; }
+      to   { left: 0; right: calc(50% + 4px); top: 0; bottom: 0; border-radius: 36px; } }
+    @keyframes tl-liquid-b {
+      from { left: 4px; right: 4px; top: -41px; bottom: 24px; border-radius: 60px; }
+      to   { left: calc(50% + 4px); right: 0; top: 0; bottom: 0; border-radius: 36px; } }
+    .tl-liquid-btns { position: absolute; inset: 0; display: flex; gap: 8px; z-index: 3; }
+    /* Two independent fades on the real buttons:
+       — LABELS cross-blur in immediately (0–250ms), mirroring the pill label
+         cross-blurring out — the icon-swap pattern, per the pill's own faces.
+       — CHROME (fill + ring + shadow) fades in at 250–430ms, the exact window
+         the goo fades out, so the surface swaps ownership gradually. */
+    .tl-liquid-btns .tl-pill-btn { flex: 1; align-self: stretch;
+      background: transparent; box-shadow: none;
+      animation: tl-liquid-btn-chrome 180ms ease 250ms both; }
+    .tl-liquid-btns .tl-pill-btn > span {
+      animation: tl-liquid-label-in 250ms ease-in-out both; }
+    @keyframes tl-liquid-label-in {
+      from { opacity: 0; filter: blur(var(--icon-swap-blur, 2px)); }
+      to   { opacity: 1; filter: blur(0); } }
+    @keyframes tl-liquid-btn-chrome {
+      from { background: transparent; box-shadow: none; }
+      to   { background: #fff;
+             box-shadow: 0 1px 3px 0 rgba(0,0,0,0.04),
+               inset 0 0 0 1px rgba(0,0,0,0.06),
+               inset 0 -1px 0 0 rgba(0,0,0,0.1),
+               inset 0 0 0 1px rgba(196,196,196,0.1); } }
+    /* the bar's background, hairline and geometry all converge on is-bar's
+       exact resting values DURING the 300ms split (padding 12/20→8/16, border
+       0→1px, colors fade in), so swapping classes at the end is a visual no-op */
+    .tl-refine-foot.is-exiting-scan { position: relative;
+      animation: tl-foot-to-bar 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
+    @keyframes tl-foot-to-bar {
+      from { padding: 12px 20px; border-top-width: 0; }
+      to { padding: 8px 16px; border-top-width: 1px; justify-content: stretch; } }
+    .tl-refine-foot.is-exiting-scan.is-morphing { --bar-bg: #fff; --bar-line: #f0f0f0;
+      border-top: 0 solid var(--bar-line);
+      animation: tl-liquid-bar-in 260ms ease both, tl-foot-to-bar 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
+    .tl-refine-foot.is-bar.is-morphing { --bar-bg: #fff; --bar-line: #f0f0f0;
+      animation: tl-liquid-bar-in 280ms ease both; }
+    @keyframes tl-liquid-bar-in {
+      from { background: transparent; border-top-color: transparent; }
+      to   { background: var(--bar-bg); border-top-color: var(--bar-line); } }
     @media (prefers-reduced-motion: reduce) {
       .tl-refine-panel { transition: none; }
       .tl-dotm-dot { animation: none !important; }
@@ -1676,6 +1859,21 @@
       .t-text-swap { transition: none !important; }
       .tl-refine-results .t-stagger-line { transition: none !important; }
       .t-resize, .tl-scan-morph { transition: none !important; }
+      .tl-liquid-goo { display: none !important; }
+      .tl-liquid-stage { animation: none !important; height: 32px; margin-bottom: 0; }
+      .tl-refine-foot.is-exiting-scan { animation: none !important; padding: 8px 16px;
+        border-top-width: 1px !important; background: var(--bar-bg, #fff) !important;
+        border-top-color: var(--bar-line, #f0f0f0) !important; }
+      .tl-scan-morph.is-exiting { animation: none !important; inset: 0; }
+      .tl-scan-morph.is-exiting .tl-scan-beam,
+      .tl-scan-morph.is-exiting::before,
+      .tl-scan-morph.is-exiting::after,
+      .tl-scan-morph.is-exiting .tl-scan-face-status { animation: none !important; opacity: 0; }
+      .tl-liquid-btns .tl-pill-btn { animation: none !important; background: #fff;
+        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.06),
+          inset 0 -1px 0 0 rgba(0,0,0,0.1), inset 0 0 0 1px rgba(196,196,196,0.1); }
+      .tl-liquid-btns .tl-pill-btn > span { animation: none !important; }
+      .tl-refine-foot.is-bar.is-morphing { animation: none !important; }
       .tl-pill-btn.tl-apply-btn { transition: background 0.12s ease, scale 0.12s ease, opacity 0.12s ease !important; }
       .tl-apply-check { transition: none !important; }
       .tl-sug-check { animation: none !important; opacity: 1; }
@@ -1684,6 +1882,305 @@
       .tl-scan-beam { animation: none !important; }
       .tl-pill { animation: none !important; }
     }
+
+    /* ═════════════════════════════════════════════════════════════════════
+       DARK THEME — html[data-tl-theme="dark"]
+       System-default, overridable from the 3-dot menu Theme row. Scoped to
+       .tl-* / .t-* so a host page (which has no such classes) is never touched.
+       Values are the exact Figma dark tokens; missing ones are derived. Purely
+       additive — light mode stays byte-for-byte unchanged.
+       ═════════════════════════════════════════════════════════════════════ */
+
+    /* — token overrides: auto-themes everything token-driven — */
+    html[data-tl-theme="dark"] {
+      --c-text: #fbfbfb; --c-text-strong: #fbfbfb; --c-text-mut: #979797;
+      --c-text-mut2: #979797; --c-text-faint: #8b8b8b; --c-count: #8b8b8b;
+      /* surfaces / overlay system (Figma node 580:652) */
+      --c-sec: rgba(255,255,255,0.06); --c-sec-h: rgba(255,255,255,0.1); --c-sec-a: rgba(255,255,255,0.12);
+      --c-circle: rgba(255,255,255,0.06); --c-circle-h: rgba(255,255,255,0.1); --c-circle-a: rgba(255,255,255,0.12);
+      --c-ghost-h: rgba(255,255,255,0.04); --c-ghost-a: rgba(255,255,255,0.06);
+      --c-field-bg: rgba(255,255,255,0.04); --c-fill: rgba(255,255,255,0.1); --c-fill-a: rgba(255,255,255,0.12);
+      --c-track: rgba(255,255,255,0.1); --c-track-h: rgba(255,255,255,0.14); --c-thumb: #767676;
+      --c-line: #262626; --c-hairline: rgba(255,255,255,0.04); --c-hairline2: rgba(255,255,255,0.06);
+      /* blue accents */
+      --c-blue: #3b9bff; --c-blue-pressed: #5cb0ff; --c-blue-bg: rgba(0,128,255,0.17);
+      --c-blue-bg-h: rgba(0,128,255,0.24); --c-blue-bg-a: rgba(0,128,255,0.3); --c-blue-ring: rgba(85,207,255,0.06);
+      /* tooltip surface */
+      --tt-bg: #262626; --tt-fg: #fbfbfb;
+      /* shadow / ring recipes — drop 0 1px1px rgba(0,0,0,.24) + white insets */
+      --ring: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 0 rgba(255,255,255,0.06);
+      --ring-fill: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 0 rgba(255,255,255,0.06);
+      --ring-blue: inset 0 0 0 1px rgba(85,207,255,0.04), inset 0 1px 0 0 rgba(85,207,255,0.06);
+      --drop: 0 1px 1px 0 rgba(0,0,0,0.24);
+      --drop-btn: 0 1px 1px 0 rgba(0,0,0,0.24);
+      --drop-line: 0 1px 1px 0 rgba(0,0,0,0.24);
+      --shadow-btn: 0 1px 1px 0 rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 0 rgba(255,255,255,0.06);
+      --shadow-btn-inset: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 0 rgba(255,255,255,0.06);
+      --menu-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.05), 0 4px 42px rgba(0,0,0,0.24);
+      --panel-shadow: 0 2px 6px 0 rgba(0,0,0,0.05), 0 4px 42px 0 rgba(0,0,0,0.24), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 1px 0 0 rgba(255,255,255,0.02) inset;
+      --card-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
+    }
+
+    /* — panel surfaces — */
+    html[data-tl-theme="dark"] .tl-panel-body { background: #1b1b1b;
+      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05), 0 4px 42px 0 rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 1px 0 0 rgba(255, 255, 255, 0.02) inset; }
+    html[data-tl-theme="dark"] .tl-refine-inner { background: #1b1b1b; }
+    /* draw the 4% white inset ring as an overlay above all children (header,
+       tab nav, body) so it stays continuous on the left edge where child
+       backgrounds would otherwise paint over an element-level inset shadow. */
+    html[data-tl-theme="dark"] .tl-refine-inner::after {
+      content: ""; position: absolute; inset: 0; pointer-events: none;
+      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
+    /* Refine panel: the parent .tl-panel-body has overflow:hidden, so a full
+       surrounding shadow is clipped on every side except the internal left
+       edge. Cast a directional LEFT shadow (negative x) so the panel reads as a
+       clear divider over the dark timeline, plus a left-edge highlight + ring
+       inset for the surface lift. */
+    html[data-tl-theme="dark"] .tl-refine-panel {
+      box-shadow:
+        -4px 0 12px 0 rgba(0, 0, 0, 0.35),
+        -16px 0 42px 0 rgba(0, 0, 0, 0.3); }
+    html[data-tl-theme="dark"] .tl-empty { background: #202020; }
+
+    /* — timeline rows / ruler / bars / member chips — */
+    html[data-tl-theme="dark"] .tl-prop-row:hover { background: rgba(255,255,255,0.02); }
+    html[data-tl-theme="dark"] .tl-prop-row.selected { background: rgba(255,255,255,0.04); border-bottom-color: #2a2a2a; }
+    /* top hairline of the selected row = bottom border of the row above (no 1px shift) */
+    html[data-tl-theme="dark"] .tl-prop-row:has(+ .tl-prop-row.selected) { border-bottom-color: #2a2a2a; }
+    /* first row selected: recolor the ruler-row divider that sits directly above it */
+    html[data-tl-theme="dark"] .tl-ruler-row:has(+ .tl-rows .tl-prop-row:first-child.selected) { border-bottom-color: #2a2a2a; }
+    html[data-tl-theme="dark"] .tl-prop-row.selected .tl-prop-label { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-prop-member,
+    html[data-tl-theme="dark"] .tl-prop-row.selected .tl-prop-member,
+    html[data-tl-theme="dark"] .tl-insp-member { background: rgba(255,255,255,0.04); color: #bdbdbd; box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }
+    html[data-tl-theme="dark"] .tl-insp-title { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-insp-label { color: #8b8b8b; }
+    html[data-tl-theme="dark"] .tl-bar-body { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.32)); }
+    html[data-tl-theme="dark"] .tl-bar-body path { stroke: url(#rb-ring-dark); }
+    html[data-tl-theme="dark"] #rb-ring stop:first-child { stop-opacity: 0.04; }
+    html[data-tl-theme="dark"] #rb-ring stop:last-child { stop-opacity: 0.08; }
+    html[data-tl-theme="dark"] .tl-ruler .tick { background: rgba(255,255,255,0.18); }
+    /* dark thin scrollbars */
+    html[data-tl-theme="dark"] .tl-inspector,
+    html[data-tl-theme="dark"] .tl-rows,
+    html[data-tl-theme="dark"] .tl-refine-body,
+    html[data-tl-theme="dark"] .tl-refine-pages .t-page { scrollbar-color: rgba(255,255,255,0.14) transparent; }
+    html[data-tl-theme="dark"] .tl-inspector::-webkit-scrollbar-thumb,
+    html[data-tl-theme="dark"] .tl-rows::-webkit-scrollbar-thumb,
+    html[data-tl-theme="dark"] .tl-refine-body::-webkit-scrollbar-thumb,
+    html[data-tl-theme="dark"] .tl-refine-pages .t-page::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); background-clip: padding-box; }
+    html[data-tl-theme="dark"] .tl-inspector::-webkit-scrollbar-thumb:hover,
+    html[data-tl-theme="dark"] .tl-rows::-webkit-scrollbar-thumb:hover,
+    html[data-tl-theme="dark"] .tl-refine-body::-webkit-scrollbar-thumb:hover,
+    html[data-tl-theme="dark"] .tl-refine-pages .t-page::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); background-clip: padding-box; }
+
+    /* — refine header / tabs / titles — */
+    html[data-tl-theme="dark"] .tl-refine-head { border-bottom-color: #262626; }
+    html[data-tl-theme="dark"] .tl-refine-tabs { background: #1b1b1b; border-bottom-color: #262626; }
+    html[data-tl-theme="dark"] .tl-refine-titles h3 { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-refine-titles p { color: #979797; }
+    html[data-tl-theme="dark"] .tl-refine-tab { color: #8b8b8b; }
+    html[data-tl-theme="dark"] .tl-refine-tab:hover:not([aria-selected="true"]) { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-refine-tab[aria-selected="true"] { background: rgba(255,255,255,0.06); color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-refine-mode { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-refine-mode:hover,
+    html[data-tl-theme="dark"] .tl-refine-mode.is-open { background: rgba(255,255,255,0.06); }
+    html[data-tl-theme="dark"] .tl-refine-close { color: #979797; }
+    html[data-tl-theme="dark"] .tl-refine-close:hover { background: rgba(255,255,255,0.06); color: #fbfbfb; }
+
+    /* — idle / unavailable / gate / inline code — */
+    html[data-tl-theme="dark"] .tl-refine-idle-text,
+    html[data-tl-theme="dark"] .tl-refine-unavail-text,
+    html[data-tl-theme="dark"] .tl-gate-text { color: #979797; }
+    html[data-tl-theme="dark"] .tl-refine-unavail-title,
+    html[data-tl-theme="dark"] .tl-gate-title { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-gate-text .tl-code { color: #cfcfcf; }
+    html[data-tl-theme="dark"] code.tl-code { color: #fbfbfb; background: rgba(255,255,255,0.08); }
+    html[data-tl-theme="dark"] .tl-refine-empty { color: #979797; }
+    html[data-tl-theme="dark"] .tl-refine-error { color: #ff8a7a; background: rgba(192,57,43,0.14); }
+
+    /* — header buttons that hardcode white — */
+    html[data-tl-theme="dark"] .tl-accept-btn { background: rgba(255,255,255,0.06); color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-accept-btn > svg { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-accept-btn:hover:not(:disabled),
+    html[data-tl-theme="dark"] .tl-accept-btn:active:not(:disabled) { background: rgba(255,255,255,0.1); }
+    html[data-tl-theme="dark"] .tl-accept-spin { border-color: rgba(255,255,255,0.2); border-top-color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-header .tl-icon-btn:not(.ghost) { background: rgba(255,255,255,0.06); }
+    html[data-tl-theme="dark"] .tl-header .tl-icon-btn:not(.ghost):hover:not(:disabled),
+    html[data-tl-theme="dark"] .tl-header .tl-icon-btn:not(.ghost).is-active,
+    html[data-tl-theme="dark"] .tl-header .tl-icon-btn:not(.ghost):active:not(:disabled) { background: rgba(255,255,255,0.1); }
+    html[data-tl-theme="dark"] .tl-sec-btn { background: rgba(255,255,255,0.06); color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-sec-btn:hover:not(:disabled),
+    html[data-tl-theme="dark"] .tl-sec-btn:active:not(:disabled) { background: rgba(255,255,255,0.1); }
+
+    /* — Refine button + scan-morph (layered blue fill) — */
+    html[data-tl-theme="dark"] .tl-refine-btn,
+    html[data-tl-theme="dark"] .tl-refine-btn > svg { color: #90dcff; }
+    html[data-tl-theme="dark"] .tl-refine-sparks { color: #90dcff; }
+    html[data-tl-theme="dark"] .tl-refine-btn::before { background: rgba(0,128,255,0.17); }
+    /* Figma 580:758 hover variant: fill brightens 0.17 -> 0.25, text/icon #90dcff,
+       ring + drop shadow unchanged. Override base p3 hover (0.10) which would dim it. */
+    html[data-tl-theme="dark"] .tl-refine-btn:hover:not(:disabled)::before { background: rgba(0,128,255,0.25); }
+    html[data-tl-theme="dark"] .tl-refine-btn.is-active { color: #b3e6ff; }
+    html[data-tl-theme="dark"] .tl-refine-btn.is-active::before { background: rgba(0,128,255,0.3); }
+    html[data-tl-theme="dark"] .tl-scan-morph { color: #90dcff; }
+    html[data-tl-theme="dark"] .tl-scan-morph::before { background: rgba(0,128,255,0.17); }
+    html[data-tl-theme="dark"] .tl-scan-morph:hover:not(:disabled):not(.is-scanning)::before,
+    html[data-tl-theme="dark"] .tl-scan-morph:active:not(.is-scanning):not(:disabled)::before { background: rgba(0,128,255,0.24); }
+    html[data-tl-theme="dark"] .tl-scan-morph:disabled:not(.is-scanning)::before { background: rgba(0,128,255,0.17); }
+    html[data-tl-theme="dark"] .tl-scan-morph.is-scanning { color: #979797; }
+    html[data-tl-theme="dark"] .tl-scan-morph.is-scanning::before { background: #202020; }
+
+    /* — resize handle — */
+    html[data-tl-theme="dark"] .tl-resize-handle::after { background: rgba(255,255,255,0.14); }
+
+    /* — toast / minimized pill / transitions count badge — */
+    /* toast + tooltip share the dropdown's dark shadow recipe (menu-shadow +
+       white inset ring) so all floating surfaces read consistently. */
+    html[data-tl-theme="dark"] .tl-toast { background: #202020; color: #fbfbfb;
+      box-shadow: var(--menu-shadow), inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 0 rgba(255,255,255,0.03); }
+    html[data-tl-theme="dark"] .t-tt {
+      box-shadow: var(--menu-shadow), inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 0 rgba(255,255,255,0.03); }
+    html[data-tl-theme="dark"] .tl-toast-ic { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-pill { background: #1b1b1b; }
+    html[data-tl-theme="dark"] .tl-pill:hover,
+    html[data-tl-theme="dark"] .tl-pill:active { background: #262626; }
+    html[data-tl-theme="dark"] .tl-pill-label { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-pill-count { background: #fbfbfb; color: #1b1b1b;
+      box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.06), inset 0 -1px 0 0 rgba(0,0,0,0.06); }
+
+    /* — dropdown menu surface + rows (Figma node 620:976) — */
+    html[data-tl-theme="dark"] .tl-menu { background: #202020;
+      box-shadow: var(--menu-shadow), inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 0 rgba(255,255,255,0.03); }
+    html[data-tl-theme="dark"] .tl-menu-search { border-bottom-color: #262626; }
+    html[data-tl-theme="dark"] .tl-menu-search-input { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-menu-search-input::placeholder { color: #8b8b8b; }
+    html[data-tl-theme="dark"] .tl-menu-item { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-menu-item:hover { background: rgba(255,255,255,0.04); }
+    html[data-tl-theme="dark"] .tl-menu-item:active { background: rgba(255,255,255,0.06); }
+    html[data-tl-theme="dark"] .tl-menu-item:focus-visible { background: transparent; box-shadow: inset 0 0 0 1px rgba(85,207,255,0.5); }
+    html[data-tl-theme="dark"] .tl-menu-dim,
+    html[data-tl-theme="dark"] .tl-menu-value,
+    html[data-tl-theme="dark"] .tl-menu-section,
+    html[data-tl-theme="dark"] .tl-menu-head { color: #8b8b8b; }
+    html[data-tl-theme="dark"] .tl-menu-head-name { color: #4c4c4c; }
+    html[data-tl-theme="dark"] .tl-menu-check { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-menu-divider { background: #262626; }
+    html[data-tl-theme="dark"] .tl-menu-icon,
+    html[data-tl-theme="dark"] .tl-menu-chevr,
+    html[data-tl-theme="dark"] .tl-set-back-ic { color: #8b8b8b; }
+    html[data-tl-theme="dark"] .tl-set-back { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-set-back:hover { background: rgba(255,255,255,0.04); }
+    html[data-tl-theme="dark"] .tl-set-back:active { background: rgba(255,255,255,0.06); }
+    html[data-tl-theme="dark"] .tl-set-back:focus-visible { background: transparent; box-shadow: inset 0 0 0 1px rgba(85,207,255,0.5); }
+    html[data-tl-theme="dark"] .tl-kbd-row { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-kbd { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); color: #cfcfcf; }
+    html[data-tl-theme="dark"] .tl-kbd-plus { color: #6b6b6b; }
+
+    /* — mode dropdown rows — */
+    html[data-tl-theme="dark"] .tl-mode-row:hover { background: rgba(255,255,255,0.06); }
+    html[data-tl-theme="dark"] .tl-mode-row-title { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-mode-row-desc { color: #979797; }
+    html[data-tl-theme="dark"] .tl-mode-row-check { color: #fbfbfb; }
+
+    /* — fields / selects / steppers / tabs / cubic inputs — */
+    html[data-tl-theme="dark"] .tl-field.is-editing { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 0 0 0.5px rgba(255,255,255,0.06); }
+    html[data-tl-theme="dark"] .tl-field-fill { box-shadow: 0 1px 1px 0 rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 0 rgba(255,255,255,0.06); }
+    html[data-tl-theme="dark"] .tl-select { background: rgba(255,255,255,0.04); color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-select:hover,
+    html[data-tl-theme="dark"] .tl-select.is-open,
+    html[data-tl-theme="dark"] .tl-field:hover:not(.is-editing),
+    html[data-tl-theme="dark"] .tl-field-chevron:hover,
+    html[data-tl-theme="dark"] .tl-cubic-cell:hover { background: rgba(255,255,255,0.06); }
+    html[data-tl-theme="dark"] .tl-cubic-row input { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-cubic-row input::placeholder { color: #8b8b8b; }
+    html[data-tl-theme="dark"] .tl-cubic-cell:focus-within { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
+    html[data-tl-theme="dark"] .tl-custom-input { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
+    html[data-tl-theme="dark"] .tl-seg-btn { color: #8b8b8b; }
+    html[data-tl-theme="dark"] .tl-seg-btn:hover:not(.is-active) { background: rgba(255,255,255,0.04); color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-seg-btn.is-active { background: rgba(255,255,255,0.1); color: #fbfbfb; }
+
+    /* — bezier preview (curve stays light; surfaces darken) — */
+    html[data-tl-theme="dark"] .tl-curve { background: rgba(255,255,255,0.04); }
+    html[data-tl-theme="dark"] .tl-preview-curve svg path { stroke: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-preview-title,
+    html[data-tl-theme="dark"] .tl-preview-sub-label { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-preview-chevron { color: var(--c-ruler); }
+    html[data-tl-theme="dark"] .tl-preview-head:hover .tl-preview-title,
+    html[data-tl-theme="dark"] .tl-preview-head:hover .tl-preview-chevron { color: #fff; }
+    html[data-tl-theme="dark"] .tl-preview-play:hover { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-preview-track { background: rgba(255,255,255,0.04); }
+    html[data-tl-theme="dark"] .tl-preview-rail { border-top-color: rgba(255,255,255,0.14); }
+
+    /* — suggestion cards — */
+    html[data-tl-theme="dark"] .tl-sug { background: #202020; box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
+    html[data-tl-theme="dark"] .tl-sug-member { background: rgba(255,255,255,0.04); box-shadow: 0 0 0 1px rgba(255,255,255,0.08); color: #bdbdbd; }
+    html[data-tl-theme="dark"] .tl-sug-prop { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-sug-divider { background: #262626; }
+    html[data-tl-theme="dark"] .tl-sug-title { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-sug-from { color: #8b8b8b; }
+    html[data-tl-theme="dark"] .tl-sug-to { color: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-sug-reason,
+    html[data-tl-theme="dark"] .tl-sug-phases { color: #979797; }
+    html[data-tl-theme="dark"] .tl-sug-phase { background: rgba(255,255,255,0.06); color: #cfcfcf; }
+    html[data-tl-theme="dark"] .tl-sug-phase-dur { color: #fbfbfb; }
+
+    /* — colorful category pills: brighten text only (bg/ring kept) — */
+    html[data-tl-theme="dark"] .tl-sug-cat.is-easing { color: #c471ff; }
+    html[data-tl-theme="dark"] .tl-sug-cat.is-duration { color: #50a7ff; }
+    html[data-tl-theme="dark"] .tl-sug-cat.is-scale { color: #64d378; }
+    html[data-tl-theme="dark"] .tl-sug-cat.is-blur { color: #3ec9d6; }
+    html[data-tl-theme="dark"] .tl-sug-cat.is-distance,
+    html[data-tl-theme="dark"] .tl-sug-cat.is-delay { color: #f99032; }
+    html[data-tl-theme="dark"] .tl-sug-cat.is-replace { color: #50a7ff; }
+
+    /* — white pill buttons (card Apply + footer bar) — */
+    html[data-tl-theme="dark"] .tl-pill-btn { background: rgba(255,255,255,0.06); color: #fbfbfb;
+      box-shadow: 0 1px 1px 0 rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 0 rgba(255,255,255,0.06); }
+    html[data-tl-theme="dark"] .tl-pill-btn .tl-dim { color: #8b8b8b; }
+    html[data-tl-theme="dark"] .tl-pill-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
+    html[data-tl-theme="dark"] .tl-pill-btn:disabled { color: #6b6b6b; background: rgba(255,255,255,0.06); box-shadow: none; }
+    html[data-tl-theme="dark"] .tl-pill-btn.is-applied { color: #fbfbfb; background: rgba(255,255,255,0.06); box-shadow: none; }
+    html[data-tl-theme="dark"] .tl-pill-btn.is-applied svg path { stroke: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-refine-foot.is-bar { background: #1b1b1b; border-top-color: #262626; }
+    /* liquid morph blobs need an OPAQUE fill (the goo filter hard-steps alpha,
+       so a translucent fill would clip to nothing): flatten the dark pill's
+       rgba(255,255,255,0.06)-over-#1b1b1b to its composite. */
+    html[data-tl-theme="dark"] .tl-liquid-blob { background: #292929; }
+    html[data-tl-theme="dark"] .tl-liquid-goo {
+      filter: url(#tl-goo) drop-shadow(0 1px 1px rgba(0,0,0,0.24)); }
+    /* dark chrome fade — same 250–430ms window as light */
+    @keyframes tl-liquid-btn-chrome-dark {
+      from { background: transparent; box-shadow: none; }
+      to   { background: rgba(255,255,255,0.06);
+             box-shadow: 0 1px 1px 0 rgba(0,0,0,0.24),
+               inset 0 0 0 1px rgba(255,255,255,0.04),
+               inset 0 1px 0 0 rgba(255,255,255,0.06); } }
+    html[data-tl-theme="dark"] .tl-liquid-btns .tl-pill-btn {
+      animation: tl-liquid-btn-chrome-dark 180ms ease 250ms both; }
+    html[data-tl-theme="dark"] .tl-refine-foot.is-bar.is-morphing,
+    html[data-tl-theme="dark"] .tl-refine-foot.is-exiting-scan.is-morphing {
+      --bar-bg: #1b1b1b; --bar-line: #262626; }
+
+    /* — Apply-all footer buttons (.pc-btn, shared into the build) — */
+    html[data-tl-theme="dark"] .pc-btn { background: rgba(255,255,255,0.06); color: #fbfbfb; border-color: rgba(255,255,255,0.12); }
+    html[data-tl-theme="dark"] .pc-btn:hover { background: rgba(255,255,255,0.1); }
+    html[data-tl-theme="dark"] .pc-btn.primary { background: #fbfbfb; color: #1b1b1b; border-color: #fbfbfb; }
+    html[data-tl-theme="dark"] .pc-btn.primary:hover { background: #fff; }
+
+    /* — shimmer / scan status highlights — */
+    html[data-tl-theme="dark"] .tl-scan-shimmer { --shimmer-highlight: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-refine-status-text { --shimmer-base: #6b6b6b; --shimmer-highlight: #fbfbfb; }
+    html[data-tl-theme="dark"] .tl-scan-error { color: #ff8a7a; }
+
+    /* — live chip surfaces (Figma node 580:652) — */
+    html[data-tl-theme="dark"] .tl-live-chip { background: rgba(151,251,142,0.1);
+      box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24), inset 0 0 0 1px rgba(126,224,90,0.06), inset 0 -1px 0 0 rgba(86,218,99,0.08); }
+    html[data-tl-theme="dark"] .tl-live-stop { background: rgba(68,167,84,0.1); box-shadow: inset 0 0 0 1px rgba(112,233,132,0.08); }
+    html[data-tl-theme="dark"] .tl-live-stop:hover,
+    html[data-tl-theme="dark"] .tl-live-stop:active { background: rgba(68,167,84,0.2); }
+    html[data-tl-theme="dark"] .tl-live-chip.is-stopped { background: rgba(180,180,180,0.04);
+      box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24), inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 -1px 0 0 rgba(0,0,0,0.2); }
   </style>
 </head>
 <body>
@@ -1711,6 +2208,19 @@
     // standalone demo.html.
     const REFINE_VERSION = (typeof window !== "undefined" && window.__TX_REFINE_VERSION) || "0.3.5";
 
+    // Apply the stored theme to <html data-tl-theme> synchronously, before the
+    // panel mounts, so a returning dark-mode user never flashes the light panel.
+    // Runs in both the demo and the injected build (this whole script ships via
+    // inject.mjs). TimelinePanel re-applies + keeps it in sync afterwards.
+    (function applyStoredTheme(){
+      try{
+        const pref=localStorage.getItem("tl-theme-pref")||"system";
+        const sysDark=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;
+        const r=pref==="dark"||(pref==="system"&&sysDark)?"dark":"light";
+        document.documentElement.setAttribute("data-tl-theme",r);
+      }catch(e){}
+    })();
+
     // ── helpers ──
     function parseCssTime(v) { const t=v.trim(); if(t.endsWith("ms")) return parseFloat(t); if(t.endsWith("s")) return parseFloat(t)*1000; const n=parseFloat(t); return isNaN(n)?0:n; }
     function formatCssTime(ms) { if(ms>=1000&&ms%1000===0) return `${ms/1000}s`; if(ms>=100) return `${ms/1000}s`; return `${ms}ms`; }
@@ -2311,7 +2821,8 @@
     // the three relay fns below short-circuit to a built-in mock so the panel is
     // fully interactive with NO relay/LLM/CLI. When the flag is UNSET this whole
     // block is inert and every fn falls through to the real fetch path unchanged.
-    const TX_MOCK = typeof window!=="undefined" && window.__TX_REFINE_MOCK;
+    const TX_MOCK = typeof window!=="undefined" &&
+      (window.__TX_REFINE_MOCK || /[?&]txmock\b/.test(window.location.search));
     const _txMockJobs = new Map(); // id → { request, createdAt }
     const _txMockId = ()=>"mock-"+Date.now()+"-"+Math.random().toString(36).slice(2,8);
     const _txMs = (n)=>(n==null?"":Math.round(n)+"ms");
@@ -2380,10 +2891,16 @@
     // Token-faithful tweaks for one lane list (mirrors refineTimings()).
     function _txTokenTweaks(timings, ctx){
       const out=[]; const c=ctx||{};
+      const blurByMember=new Map(); // memberKey -> {member,hint,sawBlur,varName}
       for(const t of (timings||[])){
         const prop=t.property||"all";
         const member=t.member||null;
         const hint=[c.label,c.selector,c.phase,t.property,t.member].filter(Boolean).join(" ");
+        const memberKey=member||"__all__";
+        if(!blurByMember.has(memberKey))blurByMember.set(memberKey,{member,hint,sawBlur:false,varName:null});
+        const bm=blurByMember.get(memberKey);
+        bm.hint=[bm.hint,hint].filter(Boolean).join(" ");
+        if(t.varName&&(!bm.varName||prop==="filter"))bm.varName=t.varName;
         const mp=(rest)=> member ? {member, ...rest} : rest;
         if(Number.isFinite(t.durationMs)){const {token,delta}=_txNearest(_TX_DUR_TOKENS,t.durationMs);
           if(delta>10)out.push({id:"mock-"+prop+"-duration",kind:"duration",property:prop,member,
@@ -2400,11 +2917,23 @@
             patch:mp({property:prop,scale:token.v,...(t.varName?{varName:t.varName}:{})}),
             reason:token.name+" ("+token.v+") is the transitions.dev scale token for "+token.usage+". "+t.scale+" is "+(usage?"off the usage token":"off-grid")+"."});}
         if(Number.isFinite(t.blur)&&t.blur>1e-4){const usage=_txBlurUsage(hint);const {token:near,delta}=_txNearest(_TX_BLUR_TOKENS,t.blur);const token=usage||near;
+          bm.sawBlur=true;
           if(token&&(usage||delta>0.5)&&Math.abs(token.v-t.blur)>1e-4)out.push({id:"mock-"+prop+"-blur",kind:"blur",property:prop,member,
             title:"Blur → "+token.name,from:t.blur+"px",to:token.v+"px",
             patch:mp({property:prop,blur:token.v,...(t.varName?{varName:t.varName}:{})}),
             reason:token.name+" ("+token.v+"px) is the transitions.dev blur token for "+token.usage+". "+t.blur+"px is "+(usage?"off the usage token":"off-grid")+"."});}
       }
+      // Missing-blur detection (demo parity with server token engine).
+      for(const [memberKey,info] of blurByMember){
+        if(info.sawBlur)continue;
+        const token=_txBlurUsage(info.hint);
+        if(!token)continue;
+        const member=info.member||null;
+        out.push({id:"mock-"+memberKey+"-blur-add",kind:"blur",property:"filter",member,
+          title:"Blur → "+token.name,from:"0px",to:token.v+"px",
+          patch:{property:"filter",blur:token.v,...(member?{member}:{}),...(info.varName?{varName:info.varName}:{})},
+          reason:token.name+" ("+token.v+"px) is the transitions.dev blur token for "+token.usage+". This transition currently has no blur."});
+      }
       return out;
     }
     // refine → token-faithful suggestions (same verdict the shipped agent reaches)
@@ -2420,15 +2949,50 @@
       // motion-token tweaks: ONLY off-token values, exactly like the real engine.
       const tweaks = _txTokenTweaks(t, ctx);
       // related phases (open + close) → a recipe swap updates them together: one
-      // `patches` entry per phase, open slower than close (250ms / 150ms tokens).
+      // group of patches per phase, open slower than close (250ms / 150ms tokens).
+      // Timing rides on a property:"all" patch; the scale value rides on dedicated
+      // per-lane patches that carry the transform lane's BACKING VAR. A bare
+      // property:"all" scale can't go live — the live preview writes a CSS custom
+      // property and needs the var name, which only the scanned timings know.
       const reqPhases = (request && Array.isArray(request.phases)) ? request.phases.filter(p=>p&&p.phase) : [];
-      const replacePatches = reqPhases.length>1
-        ? reqPhases.map(p=>({phase:p.phase, property:"all", durationMs:/close/i.test(p.phase)?150:250, easing:_TX_EASE, scale:/close/i.test(p.phase)?0.99:0.97}))
-        : null;
+      const recipeScale = ph => /close/i.test(ph)?0.99:0.97;
+      const recipeBlur  = ph => /close/i.test(ph)?2:2;
+      const recipeDur   = ph => /close/i.test(ph)?150:250;
+      // one scale patch per transform/filter lane that has a backing var, so the
+      // applied override carries {scale, varName} and the live var gets written.
+      const scalePatchesFor = (phase, timings) => (timings||[])
+        .filter(tt=>tt.varName && tt.scale!=null)
+        .map(tt=>({phase, property:tt.property, member:tt.member||null, varName:tt.varName, scale:recipeScale(phase)}));
+      const blurPatchesFor = (phase, timings) => (timings||[])
+        .filter(tt=>tt.varName && tt.blur!=null)
+        .map(tt=>({phase, property:tt.property, member:tt.member||null, varName:tt.varName, blur:recipeBlur(phase)}));
+      const phasePatches = (phase, timings) => [
+        {phase, property:"all", durationMs:recipeDur(phase), easing:_TX_EASE},
+        ...scalePatchesFor(phase, timings),
+        ...blurPatchesFor(phase, timings)];
+      let replacePatches = reqPhases.length>1
+        ? reqPhases.flatMap(p=>phasePatches(p.phase, p.timings))
+        : phasePatches((request&&request.phase)||null, t);
+      // If several phases resolve to the SAME backing var (a demo that reuses one
+      // scale var for open + close), collapse to the most prominent value so the
+      // single var lands on the recipe's open scale (0.97) instead of the subtler
+      // close value (0.99). Real components use distinct vars → no-op here.
+      {
+        const seenVar=new Map(); const collapsed=[];
+        for(const p of replacePatches){
+          if(p.varName&&p.scale!=null){
+            const prev=seenVar.get(p.varName);
+            if(prev){ if(p.scale<prev.scale)prev.scale=p.scale; continue; }
+            seenVar.set(p.varName,p);
+          }
+          collapsed.push(p);
+        }
+        replacePatches=collapsed;
+      }
       const replace = { id:"mock-replace-menu", kind:"replace", property:p0, member:m0,
         title:"Menu dropdown", reference:"05-menu-dropdown.md",
         patch:mp(m0,{property:"all", durationMs:250, easing:_TX_EASE, scale:0.97}),
-        ...(replacePatches?{patches:replacePatches}:{}),
+        ...(replacePatches&&replacePatches.length?{patches:replacePatches}:{}),
         reason:"Best-fit transitions.dev recipe (#05 Menu dropdown): scale 0.97→1 + fade, 250ms open / 150ms close on cubic-bezier(0.22, 1, 0.36, 1)." };
       const suggestions=[...tweaks, replace];
       // Scope to the requested refineType so per-tab caches merge cleanly.
@@ -2722,7 +3286,7 @@
         onReconnect&&h("button",{className:"tl-gate-recheck",disabled:rechecking,onClick:recheck},
           rechecking?(relayDown?"Retrying…":"Reconnecting…"):(relayDown?"Retry connection":"Reconnect agent")));
     }
-    function RefinePanel({open,onClose,phase,label,refineType,onType,suggestions,summary,error,appliedIds,onApply,onApplyAll,mode,onMode,llmAvailable,cliInstalled,relayDown,agentReason,onReconnect,onStart,lanes}){
+    function RefinePanel({open,onClose,phase,label,refineType,onType,suggestions,summary,error,appliedIds,onApply,onApplyAll,mode,onMode,llmAvailable,cliInstalled,relayDown,agentReason,onReconnect,onStart,lanes,resolvedTheme}){
       // mount-on-open; keep mounted through the panel-reveal slide-out, then unmount
       const[render,setRender]=useState(open);
       const[panelOpen,setPanelOpen]=useState(false);
@@ -2765,6 +3329,26 @@
         const id=setInterval(()=>setStatusIx(i=>(i+1)%REFINE_STATUS.length),2800);
         return()=>clearInterval(id);
       },[phase]);
+      // liquid morph: when the scan finishes WITH results, the loading pill
+      // splits into the two bar buttons via a gooey overlay. One-shot per scan;
+      // cleared after the blob keyframes + button cross-blur settle.
+      // useLayoutEffect (not useEffect): the flag must flip BEFORE the "done"
+      // frame paints, otherwise the bar buttons flash for a frame, then the
+      // exiting pill re-mounts on top of them — visible pill/buttons flicker.
+      const[liquidMorph,setLiquidMorph]=useState(false);
+      const prevPhaseRef=useRef(phase);
+      useLayoutEffect(()=>{
+        const prev=prevPhaseRef.current;
+        prevPhaseRef.current=phase;
+        if(prev==="scanning"&&phase==="done"){
+          setLiquidMorph(true);
+          // 300ms split → 300–430ms goo/chrome hand-off; unmount at 470ms once
+          // the buttons are fully self-sufficient (small buffer past 430ms).
+          const to=setTimeout(()=>setLiquidMorph(false),470);
+          return()=>clearTimeout(to);
+        }
+        if(phase!=="done")setLiquidMorph(false);
+      },[phase]);
       if(!render)return null;
 
       // one scan returns both kinds; each tab shows only its own:
@@ -2785,17 +3369,19 @@
       // node morphs (card resize) into the loading rectangle with the border-beam.
       const scanning = phase==="scanning";
       const startBtn=(o)=>{o=o||{};
+        const exiting = !!o.exiting;
+        const showScanning = scanning || exiting;
         // Both faces stay mounted and stacked; the morph cross-blurs (icon swap)
         // between the label and the icon+status instead of swapping the subtree.
-        return h("button",{className:cx("tl-scan-morph","t-resize",scanning&&"is-scanning"),
-          disabled:(!!o.disabled)||scanning,"aria-busy":scanning?"true":undefined,
-          onClick:(o.disabled||scanning)?undefined:onStart},
-          scanning&&h(BorderBeam,{size:"md",colorVariant:"ocean",theme:"light",duration:2.6,saturation:2,brightness:1.6,className:"tl-scan-beam"},
+        return h("button",{className:cx("tl-scan-morph","t-resize",showScanning&&"is-scanning",exiting&&"is-exiting"),
+          disabled:(!!o.disabled)||showScanning,"aria-busy":scanning?"true":undefined,
+          onClick:(o.disabled||showScanning)?undefined:onStart},
+          scanning&&h(BorderBeam,{size:"md",colorVariant:"ocean",theme:resolvedTheme==="dark"?"dark":"light",duration:2.6,saturation:2,brightness:1.6,className:"tl-scan-beam"},
             h("span",{className:"tl-scan-beam-fill"})),
           h("span",{className:"tl-scan-content"},
-            h("span",{className:"tl-scan-face tl-scan-face-label","aria-hidden":scanning?"true":undefined},
+            h("span",{className:"tl-scan-face tl-scan-face-label","aria-hidden":showScanning?"true":undefined},
               h("span",{className:"tl-scan-label"},o.label||"Start scanning")),
-            h("span",{className:"tl-scan-face tl-scan-face-status","aria-hidden":scanning?undefined:"true"},
+            h("span",{className:"tl-scan-face tl-scan-face-status","aria-hidden":showScanning&&!exiting?undefined:"true"},
               h(DotmLoader),
               h(ShimmerSwapText,{text:REFINE_STATUS[statusIx]}))));
       };
@@ -2843,6 +3429,10 @@
 
       // Foot tracks the active type (it lives below the sliding body, so it
       // just updates in place on a tab switch).
+      // The liquid split only plays when the finished scan actually shows the
+      // two-button bar — with zero results the foot is a plain pill and must
+      // not pick up the morphing footer classes.
+      const morphing = liquidMorph && phase==="done" && visible.length>0;
       let foot, footBar=false;
       if(phase==="scanning"){
         foot = startBtn();
@@ -2852,12 +3442,38 @@
         if(visible.length===0){
           foot = startBtn({label:"Scan again"});
         } else {
-          footBar = true;
-          foot = h(React.Fragment,null,
+          footBar = !morphing;
+          const barBtns = h(React.Fragment,null,
             h("button",{className:"tl-pill-btn",disabled:pending.length===0,
               onClick:()=>pending.forEach(onApply)},
               h("span",null,"Apply all ",h("span",{className:"tl-dim"},"("+pending.length+")"))),
-            h("button",{className:"tl-pill-btn",onClick:onStart},"Scan again"));
+            h("button",{className:"tl-pill-btn",onClick:onStart},h("span",null,"Scan again")));
+          foot = morphing
+            // gooey split: the exiting pill fades out on the shrinking stage
+            // (which drives the foot's height transition), while the overlay —
+            // blobs, chrome, labels — is a foot-anchored SIBLING pinned to the
+            // bar's final geometry, so it never moves or resizes at handoff.
+            ? h(React.Fragment,null,
+                h("div",{className:"tl-liquid-stage"}),
+                h("div",{className:"tl-liquid-morph"},
+                  startBtn({exiting:true}),
+                  h("svg",{className:"tl-liquid-goo-svg","aria-hidden":"true",focusable:"false"},
+                    h("defs",null,
+                      h("filter",{id:"tl-goo"},
+                        // alpha threshold must be exactly 0.5 (20a - 10): a blurred
+                        // straight edge crosses 0.5 precisely AT the true geometry
+                        // edge, so goo pills render at the real 32px button height.
+                        // Lower thresholds (e.g. 22a - 9 = 0.41) dilate every edge
+                        // ~1.5px outward — the goo state looked ~4px taller.
+                        h("feGaussianBlur",{in:"SourceGraphic",stdDeviation:"7",result:"blur"}),
+                        h("feColorMatrix",{in:"blur",mode:"matrix",
+                          values:"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10",result:"goo"}),
+                        h("feComposite",{in:"SourceGraphic",in2:"goo",operator:"atop"})))),
+                  h("div",{className:"tl-liquid-goo"},
+                    h("div",{className:"tl-liquid-blob tl-liquid-blob-a"}),
+                    h("div",{className:"tl-liquid-blob tl-liquid-blob-b"})),
+                  h("div",{className:"tl-liquid-btns"},barBtns)))
+            : barBtns;
         }
       } else { // idle
         foot = startBtn(agentReady?{}:{disabled:true});
@@ -2893,7 +3509,7 @@
               bodyFor("small",refineType==="small")),
             h("div",{className:"tl-refine-page t-page","data-page-id":"2","aria-hidden":refineType!=="replace"},
               bodyFor("replace",refineType==="replace"))),
-          h("div",{className:cx("tl-refine-foot",footBar&&"is-bar")},foot)));
+          h("div",{className:cx("tl-refine-foot",footBar&&"is-bar",morphing&&"is-exiting-scan",morphing&&"is-morphing")},foot)));
     }
 
     // Diff the active item's effective (edited/refined) lanes against their
@@ -2937,12 +3553,12 @@
       return out;
     }
 
-    function Header({entries,active,onSelect,onReset,onCopy,copied,snap,setSnap,onMinimize,onRefine,refineActive,onAccept,acceptState,acceptDisabled,acceptError,scanning,scanError,onRescan,pick,setPick,chatLoop,liveStopped,onStopLive}){
+    function Header({entries,active,onSelect,onReset,onCopy,copied,snap,setSnap,onMinimize,onRefine,refineActive,onAccept,acceptState,acceptDisabled,acceptError,scanning,scanError,onRescan,pick,setPick,chatLoop,liveStopped,onStopLive,themePref,setThemePref}){
       const[setg,setSetg]=useState(false);
       // settings dropdown sub-page (main menu ↔ keyboard-shortcuts cheat sheet)
       const[settingsView,setSettingsView]=useState("main"); // "main" | "shortcuts"
-      // theme preference — UI only for now (dark theme not wired up yet)
-      const[themePref,setThemePref]=useState("system"); // "light" | "dark" | "system"
+      // theme preference is owned by TimelinePanel (persisted + applied to <html>);
+      // Header just renders the picker and reports changes up.
       const THEME_OPTS=[{key:"light",label:"Light"},{key:"dark",label:"Dark"},{key:"system",label:"System"}];
       const isMac=typeof navigator!=="undefined"&&/mac/i.test((navigator.userAgentData&&navigator.userAgentData.platform)||navigator.platform||navigator.userAgent||"");
       const modKey=isMac?"Cmd":"Ctrl";
@@ -3065,9 +3681,9 @@
                   h("span",{className:"tl-menu-chevr"},h(Ic,{name:"chevronr",size:16})))},"Theme"),
               h(MenuItem,{onClick:()=>setSettingsView("shortcuts"),
                 right:h("span",{className:"tl-menu-chevr"},h(Ic,{name:"chevronr",size:16}))},"Keyboard shortcuts"),
-              h(MenuItem,{onClick:()=>{setSetg(false);window.open("https://transitions.dev","_blank","noopener");},
+              h(MenuItem,{onClick:()=>{setSetg(false);window.open("mailto:jakubja@gmail.com","_blank","noopener");},
                 right:h("span",{className:"tl-menu-chevr"},h(Ic,{name:"linkout",size:16}))},"Send feedback"),
-              h(MenuItem,{onClick:()=>{setSetg(false);window.open("https://transitions.dev","_blank","noopener");},
+              h(MenuItem,{onClick:()=>{setSetg(false);window.open("https://transitions.dev/refine","_blank","noopener");},
                 right:h("span",{className:"tl-menu-chevr"},h(Ic,{name:"linkout",size:16}))},"Learn more"),
               h("div",{className:"tl-menu-divider"}),
               h("div",{className:"tl-menu-head"},
@@ -3124,54 +3740,188 @@
               h("i",{style:{"--ox":"-5px","--oy":"-2px","--sx":"-9px","--sy":"-9px","--sd":"930ms","--sdelay":"180ms"}}),
               h("i",{style:{"--ox":"3px","--oy":"1px","--sx":"12px","--sy":"1px","--sd":"980ms","--sdelay":"300ms"}})),
             h("span",{className:"tl-btn-label"},"Refine")),
-          h("span",{className:"t-tt tl-tt-below",role:"tooltip"},"Refine",ttHint("R"))),
+          h("span",{className:"t-tt tl-tt-below",role:"tooltip"},"Refine",ttHint("E"))),
         h("span",{className:"t-tt-wrap"},
           h("button",{className:"tl-icon-btn ghost t-tt-trigger","aria-label":"Minimize",onClick:onMinimize},h(Ic,{name:"minimize"})),
           h("span",{className:"t-tt tl-tt-below tl-tt-right",role:"tooltip"},"Minimize",ttHint("."))),
       );
     }
 
+    // capsule outline: right-drag pinches inward (neck), left-drag bows outward
+    // (belly, 70% depth). `amt` > 0 = outward, < 0 = inward. Same command
+    // structure at every value so the CSS `d` transition interpolates smoothly.
+    const RB_H=24, RB_R=8;
+    function rbPath(w, amt){
+      const mx=(w/2).toFixed(1), t=(-2*amt).toFixed(2), b=(RB_H+2*amt).toFixed(2);
+      return `path("M 0 ${RB_R} Q 0 0 ${RB_R} 0 Q ${mx} ${t} ${w-RB_R} 0 Q ${w} 0 ${w} ${RB_R} L ${w} ${RB_H-RB_R} Q ${w} ${RB_H} ${w-RB_R} ${RB_H} Q ${mx} ${b} ${RB_R} ${RB_H} Q 0 ${RB_H} 0 ${RB_H-RB_R} Z")`;
+    }
+
     function PropTrack({property, member, delayMs, durationMs, selected, onSelect, onDelayChange, onDurationChange, snap, scaleMs, lockDuration, labelW}){
       const trackRef=useRef(null);
+      const barRef=useRef(null);
       const [dragging,setDragging]=useState(false);
-      // 1ms resolution while dragging so the bar moves smoothly; the snap grid
-      // (25ms) is applied only on release when `snap` is on.
+      // Drag math stays at 1ms resolution for smooth motion. Any coarse grid
+      // quantization is avoided here because it reads as frame snapping.
       const SNAP_GRID = 25;
       const pxToMs=useCallback((px,g)=>{if(!trackRef.current)return 0;const w=trackRef.current.getBoundingClientRect().width;const gg=g||1;return Math.round((px/w)*scaleMs/gg)*gg;},[scaleMs]);
 
+      // keep the SVG body outline in sync with the bar's real size
+      useLayoutEffect(()=>{
+        const bar=barRef.current; if(!bar) return;
+        const p=bar.querySelector(".tl-bar-body path");
+        const sync=()=>{
+          if(bar.classList.contains("rb-release")) return;
+          if(bar.classList.contains("is-dragging")){
+            p.style.d=rbPath(bar.offsetWidth,bar.__rbBulge||0);
+            return;
+          }
+          p.style.transition="none";
+          p.style.d=rbPath(bar.offsetWidth,0);
+          requestAnimationFrame(()=>p.style.removeProperty("transition"));
+        };
+        sync();
+        const ro=new ResizeObserver(sync); ro.observe(bar);
+        return ()=>ro.disconnect();
+      },[]);
+
       const startDrag=useCallback((mode,e)=>{
         e.preventDefault(); e.stopPropagation();
         onSelect();
-        // a spring controls its own duration, so its bar can be moved (delay) but not resized
         if(lockDuration && mode!=="move") return;
         setDragging(true);
         const startX=e.clientX; const sd=delayMs; const sdur=durationMs;
         let lastDel=sd, lastDur=sdur;
+
+        // ── rubber-band physics ──
+        const bar=barRef.current;
+        const bodyPath=bar?bar.querySelector(".tl-bar-body path"):null;
+        let lastX=e.clientX, lastT=performance.now();
+        let vel=0, dir=1, over=0, raf=0;
+        if(bar){
+          clearTimeout(bar.__rbCleanup);
+          bar.classList.remove("rb-release");
+          bar.classList.add("is-dragging");
+        }
+        const STRAIGHT_HANDLE='path("M 4 1 L 4 13")';
+        const leftPath=bar?bar.querySelector(".tl-bar-handle.left path"):null;
+        const rightPath=bar?bar.querySelector(".tl-bar-handle.right path"):null;
+        const bentHandle=bow=>{
+          const tip=(4+bow*0.15).toFixed(2), mid=(4+bow).toFixed(2);
+          return `path("M ${tip} 1 Q ${mid} 7 ${tip} 13")`;
+        };
+        const setHandleBend=(bow,leading)=>{
+          if(leftPath) leftPath.style.d=leading==="left"?bentHandle(bow):STRAIGHT_HANDLE;
+          if(rightPath) rightPath.style.d=leading==="right"?bentHandle(bow):STRAIGHT_HANDLE;
+        };
+        let env=0;
+        const setVars=()=>{
+          if(!bar||!bodyPath) return;
+          const sV=Math.abs(vel)/(Math.abs(vel)+0.15);
+          const sO=over/(over+40);
+          const s=Math.min(1,Math.max(sV,sO)*1.05);
+          env=s>env?env+(s-env)*0.35:env*0.90;
+          const w=bar.offsetWidth;
+          if(mode==="move"){
+            // Whole-bar drag should be pure translation only: no rubber bend.
+            bar.__rbBulge=0;
+            for(const v of ["--rb-origin","--rb-sx","--rb-sy","--rb-skew","--rb-hshift"]) bar.style.removeProperty(v);
+            bodyPath.style.d=rbPath(w,0);
+            setHandleBend(0,"none");
+            return;
+          }
+          // Left-edge resize should mirror the bend direction (user expectation:
+          // same pointer motion on the left edge bends opposite to the right edge).
+          const bendDir = mode==="left" ? -dir : dir;
+          const origin=mode==="move"?(dir>0?"0%":"100%"):(mode==="right"?"0%":"100%");
+          bar.style.setProperty("--rb-origin",origin);
+          bar.style.setProperty("--rb-sx",(1+(8*env)/Math.max(w,24)).toFixed(4));
+          bar.style.setProperty("--rb-sy",(1-0.1*env).toFixed(4));
+          bar.style.setProperty("--rb-skew",(bendDir*-3*env).toFixed(2)+"deg");
+          bar.style.setProperty("--rb-hshift",(bendDir*1.5*env).toFixed(2)+"px");
+          const bend=Math.min(4,(w-16)/8)*env;
+          bar.__rbBulge=bendDir<0?bend*0.7:-bend;
+          bodyPath.style.d=rbPath(w,bar.__rbBulge);
+          const leading=mode==="move"?(dir>0?"right":"left"):mode;
+          setHandleBend(bendDir*8*env,leading);
+        };
+        let lastTick=performance.now();
+        const tick=()=>{ lastTick=performance.now(); vel*=0.86; setVars(); raf=requestAnimationFrame(tick); };
+        raf=requestAnimationFrame(tick);
+        const safety=setInterval(()=>{
+          if(performance.now()-lastTick<40) return;
+          vel*=0.86; setVars();
+        },50);
+
         const onMove=e2=>{
-          const dx=e2.clientX-startX; const dMs=pxToMs(dx,1); // smooth: 1ms steps
+          const now=performance.now(); const dt=Math.max(1,now-lastT);
+          const iv=(e2.clientX-lastX)/dt;
+          vel+=(iv-vel)*0.3;
+          if(Math.abs(vel)>0.05) dir=vel>0?1:-1;
+          lastX=e2.clientX; lastT=now;
+          const w=trackRef.current?trackRef.current.getBoundingClientRect().width:1;
+          const msToPx=ms=>Math.abs(ms)/scaleMs*w;
+          const grid=1;
+          const dx=e2.clientX-startX; const dMs=pxToMs(dx,grid);
           if(mode==="move"){
-            lastDel=Math.max(0,Math.min(sd+dMs,scaleMs-sdur));
-            onDelayChange(lastDel);
+            const raw=sd+dMs; const next=Math.max(0,Math.min(raw,scaleMs-sdur));
+            over=msToPx(raw-next);
+            lastDel=next; onDelayChange(next);
           } else if(mode==="left"){
-            const rawDel=sd+dMs; const clampedDel=Math.max(0,Math.min(rawDel,sd+sdur-1));
+            const rawDel=sd+dMs; const clampedDel=Math.max(0,Math.min(rawDel,sd+sdur-grid));
+            over=msToPx(rawDel-clampedDel);
             lastDel=clampedDel; lastDur=sdur-(clampedDel-sd);
             onDelayChange(lastDel); onDurationChange(lastDur);
           } else {
-            lastDur=Math.max(1,Math.min(sdur+dMs,scaleMs-sd));
-            onDurationChange(lastDur);
+            const rawDur=sdur+dMs; const next=Math.max(grid,Math.min(rawDur,scaleMs-sd));
+            over=msToPx(rawDur-next);
+            lastDur=next; onDurationChange(next);
           }
+          setVars();
         };
         const onUp=()=>{
-          setDragging(false);
-          // snap to the grid once, on release (bar tweens there since the
-          // is-dragging transition lock is now removed).
-          if(snap){
-            const g=SNAP_GRID, sn=v=>Math.round(v/g)*g;
-            if(mode==="move"){ onDelayChange(Math.max(0,Math.min(sn(lastDel),scaleMs-sdur))); }
-            else if(mode==="left"){ onDelayChange(Math.max(0,sn(lastDel))); onDurationChange(Math.max(g,sn(lastDur))); }
-            else { onDurationChange(Math.max(g,Math.min(sn(lastDur),scaleMs-sd))); }
-          }
           window.removeEventListener("mousemove",onMove);window.removeEventListener("mouseup",onUp);
+          cancelAnimationFrame(raf); clearInterval(safety);
+          // Freeze the bar exactly where it is RENDERED at mouseup. On a fast
+          // drag React's last state flush can still be in flight — the DOM lags
+          // the pointer — and letting that flush land after release reads as
+          // the bar drifting on its own. Committing the visible layout position
+          // (offsetLeft/offsetWidth → ms) overrides any in-flight value with
+          // what the user actually sees, so the bar cannot move after release.
+          if(bar&&trackRef.current){
+            const grid=1;
+            const tw=trackRef.current.getBoundingClientRect().width||1;
+            const px2ms=px=>Math.round(px/tw*scaleMs/grid)*grid;
+            const visDel=Math.max(0,px2ms(bar.offsetLeft));
+            if(mode==="move"){
+              onDelayChange(Math.min(visDel,Math.max(0,scaleMs-sdur)));
+            } else if(bar.offsetWidth>24){ // min-width clamp would corrupt px→ms
+              const visDur=Math.max(grid,px2ms(bar.offsetWidth));
+              if(mode==="left"){ onDelayChange(visDel); onDurationChange(visDur); }
+              else { onDurationChange(Math.min(visDur,scaleMs-sd)); }
+            }
+          }
+          if(bar&&bodyPath){
+            bar.__rbBulge=0;
+            for(const v of ["--rb-sx","--rb-sy","--rb-skew","--rb-hshift"]) bar.style.removeProperty(v);
+            bodyPath.style.d=rbPath(bar.offsetWidth,0);
+            setHandleBend(0,"none");
+            // geometry tweens stay hard-disabled until the release commit has
+            // rendered — position must land instantly (it equals what's already
+            // on screen), never animate.
+            bar.classList.add("no-geom-tween");
+            if(mode!=="move") bar.classList.add("rb-release");
+            requestAnimationFrame(()=>requestAnimationFrame(()=>{
+              setDragging(false);
+              bar.classList.remove("no-geom-tween");
+            }));
+            bar.__rbCleanup=setTimeout(()=>{
+              bar.classList.remove("rb-release");
+              bar.style.removeProperty("--rb-origin");
+              bodyPath.style.d=rbPath(bar.offsetWidth,0);
+              if(leftPath) leftPath.style.removeProperty("d");
+              if(rightPath) rightPath.style.removeProperty("d");
+            },220);
+          }
         };
         window.addEventListener("mousemove",onMove);window.addEventListener("mouseup",onUp);
       },[delayMs,durationMs,pxToMs,snap,scaleMs,onSelect,onDelayChange,onDurationChange,lockDuration]);
@@ -3183,10 +3933,15 @@
             member&&h("span",{className:"tl-prop-member"},member),
             h("span",{className:"tl-prop-prop"},property))),
         h("div",{className:"tl-prop-track",ref:trackRef},
-          h("div",{className:cx("tl-bar",dragging&&"is-dragging"),style:{left:delPct+"%",width:durPct+"%"},onMouseDown:e=>startDrag("move",e),
+          h("div",{className:cx("tl-bar",dragging&&"is-dragging"),ref:barRef,style:{left:delPct+"%",width:durPct+"%"},onMouseDown:e=>startDrag("move",e),
             title:lockDuration?"Spring duration is derived \u2014 drag to move, resize is locked":undefined},
-            h("span",{className:"tl-bar-handle left"}),
-            h("span",{className:"tl-bar-handle right"}),
+            h("svg",{className:"tl-bar-body","aria-hidden":true},
+              h("defs",null,h("linearGradient",{id:"rb-ring",x1:0,y1:0,x2:0,y2:1},
+                h("stop",{offset:"0",stopColor:"#000",stopOpacity:0.06}),
+                h("stop",{offset:"1",stopColor:"#000",stopOpacity:0.15}))),
+              h("path",null)),
+            h("span",{className:"tl-bar-handle left"},h("svg",{viewBox:"0 0 8 14"},h("path",{d:"M 4 1 L 4 13"}))),
+            h("span",{className:"tl-bar-handle right"},h("svg",{viewBox:"0 0 8 14"},h("path",{d:"M 4 1 L 4 13"}))),
             !lockDuration&&h("div",{className:"tl-bar-grip left",onMouseDown:e=>startDrag("left",e)}),
             !lockDuration&&h("div",{className:"tl-bar-grip right",onMouseDown:e=>startDrag("right",e)}),
           ),
@@ -3774,6 +4529,33 @@
       const[panelHeight,setPanelHeight]=useState(440);
       const[resizing,setResizing]=useState(false);
       const[snap,setSnap]=useState(true);
+      // ── theme (light / dark / system) ──
+      // Preference persists in localStorage; "system" follows the OS via
+      // matchMedia. The resolved value is mirrored onto <html data-tl-theme> so the
+      // panel AND its body-portaled menus/toasts theme together, and is handed to
+      // BorderBeam to pick its dark beam. A dedicated attribute (not "data-theme")
+      // avoids clobbering a host prototype's own theming in the injected build.
+      const[themePref,setThemePref]=useState(()=>{
+        try{const v=localStorage.getItem("tl-theme-pref");return v==="light"||v==="dark"||v==="system"?v:"system";}catch{return "system";}
+      });
+      const systemDark=()=>{try{return window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches;}catch{return false;}};
+      const[resolvedTheme,setResolvedTheme]=useState(()=>themePref==="system"?(systemDark()?"dark":"light"):themePref);
+      useEffect(()=>{
+        try{localStorage.setItem("tl-theme-pref",themePref);}catch{}
+        const apply=()=>{
+          const r=themePref==="system"?(systemDark()?"dark":"light"):themePref;
+          setResolvedTheme(r);
+          try{document.documentElement.setAttribute("data-tl-theme",r);}catch{}
+        };
+        apply();
+        if(themePref!=="system")return;
+        // Follow live OS changes only while on "system".
+        let mq;try{mq=window.matchMedia("(prefers-color-scheme: dark)");}catch{return;}
+        if(!mq)return;
+        const onChange=()=>apply();
+        if(mq.addEventListener)mq.addEventListener("change",onChange);else if(mq.addListener)mq.addListener(onChange);
+        return()=>{if(mq.removeEventListener)mq.removeEventListener("change",onChange);else if(mq.removeListener)mq.removeListener(onChange);};
+      },[themePref]);
       // transition picker open state — lifted out of Header so the panel-focused
       // Cmd/Ctrl+K shortcut can open it.
       const[pickOpen,setPickOpen]=useState(false);
@@ -4038,15 +4820,10 @@
         const groupId=active&&active.groupId;
         for(const p of patches){
           if(!p.property)continue;
-          const o={};
-          if(p.durationMs!=null)o.durationMs=p.durationMs;
-          if(p.delayMs!=null)o.delayMs=p.delayMs;
-          if(p.easing!=null)o.easing=p.easing;
-          // value edits: keep the new value, the backing var, and the from-value
-          // (parsed off the suggestion) so computeChanges can write source on Accept.
-          if(p.scale!=null){o.scale=p.scale;o.scaleFrom=(s.from!=null?parseFloat(s.from):undefined);}
-          if(p.blur!=null){o.blur=p.blur;o.blurFrom=(s.from!=null?parseFloat(s.from):undefined);}
-          if(p.varName!=null)o.varName=p.varName;
+          const timingOverride={};
+          if(p.durationMs!=null)timingOverride.durationMs=p.durationMs;
+          if(p.delayMs!=null)timingOverride.delayMs=p.delayMs;
+          if(p.easing!=null)timingOverride.easing=p.easing;
           // resolve the phase entry this patch targets (its sibling open/close
           // lives in the same group); default to the active entry.
           let target=active;
@@ -4061,7 +4838,35 @@
           let lanes=p.property==="all"?et:et.filter(t=>t.property===p.property);
           if(p.member)lanes=lanes.filter(t=>(t.member===p.member||t.memberId===p.member));
           const ids=lanes.length?lanes.map(t=>t.laneId):[p.property];
-          for(const id of ids)registry.setPropOverride(target.id,id,o);
+          if(Object.keys(timingOverride).length){
+            for(const id of ids)registry.setPropOverride(target.id,id,timingOverride);
+          }
+
+          // Value edits (scale/blur) must land on concrete lanes so live preview
+          // can write the right backing var. For coarse recipe patches that use
+          // property:"all" and omit varName, fan out by lane type.
+          if(p.scale!=null){
+            let scaleLanes=lanes.filter(t=>t.property==="transform"||t.scale!=null);
+            if(!scaleLanes.length&&p.property==="all")scaleLanes=et.filter(t=>t.property==="transform"||t.scale!=null);
+            const scaleFrom=(s.from!=null?parseFloat(s.from):undefined);
+            for(const lane of scaleLanes){
+              const ov={scale:p.scale,scaleFrom};
+              const vn=p.varName??lane.varName;
+              if(vn!=null)ov.varName=vn;
+              registry.setPropOverride(target.id,lane.laneId,ov);
+            }
+          }
+          if(p.blur!=null){
+            let blurLanes=lanes.filter(t=>t.property==="filter"||t.blur!=null);
+            if(!blurLanes.length&&p.property==="all")blurLanes=et.filter(t=>t.property==="filter"||t.blur!=null);
+            const blurFrom=(s.from!=null?parseFloat(s.from):undefined);
+            for(const lane of blurLanes){
+              const ov={blur:p.blur,blurFrom};
+              const vn=p.varName??lane.varName;
+              if(vn!=null)ov.varName=vn;
+              registry.setPropOverride(target.id,lane.laneId,ov);
+            }
+          }
         }
         setAppliedIds(prev=>({...prev,[s.id]:true}));
       },[registry,active,entries]);
@@ -4581,7 +5386,7 @@
               if(sel&&!sel.isCollapsed)return;
               handle(()=>{if(L.active)L.copyValues&&L.copyValues();});
               break;}
-            case"r":case"R": // Toggle Refine panel
+            case"e":case"E": // Toggle Refine panel
               handle(()=>{if(L.active)L.openRefine&&L.openRefine();});
               break;
             case"k":case"K": // Open transition picker
@@ -4625,7 +5430,7 @@
                 onAccept,acceptState,acceptDisabled:computeChanges(active,entries).length===0,acceptError,
                 scanning:groupScanState==="scanning",scanError:groupScanState==="error"?groupScanErr:null,
                 onRescan:rescanTransitions,pick:pickOpen,setPick:setPickOpen,
-                chatLoop,liveStopped,onStopLive:stopLive}),
+                chatLoop,liveStopped,onStopLive:stopLive,themePref,setThemePref}),
               active
                 ?h(Body,{entry:active,onPropChange:(prop,o)=>setPropOverride(prop,o),snap})
                 :h("div",{className:"tl-empty"},"Select a transition to inspect and edit it")),
@@ -4633,7 +5438,7 @@
               refineType,onType:changeRefineType,suggestions:refineSuggestions,summary:refineSummary,error:refineError,
               appliedIds,onApply:applySuggestion,onApplyAll:applyAllSuggestions,
                     mode:refineMode,onMode:changeRefineMode,llmAvailable,cliInstalled,relayDown,agentReason,onReconnect:reconnectAgent,onStart:startScan,
-                    lanes:active?.effectiveTimings||[]}))
+                    lanes:active?.effectiveTimings||[],resolvedTheme}))
               : h("div",{className:"tl-panel-main"},
                   gate==="blocked" && h("div",{className:"tl-gate"},
                     h("div",{className:"tl-gate-col"},
@@ -4974,9 +5779,26 @@
       // TESTING ONLY (not part of the tool): top-right toggle to hide the demo
       // page content so the panel can be inspected against a blank page.
       const[demoHidden,setDemoHidden]=useState(false);
+      // Demo-page background toggle. Flips ONLY the demo page bg (#EEEEEE <-> #121212).
+      // Deliberately separate from the panel's own theme (data-tl-theme) — it sets
+      // data-demo-bg on <body> only and never touches the panel.
+      const[darkBg,setDarkBg]=useState(false);
+      useEffect(()=>{
+        try{
+          if(darkBg)document.body.setAttribute("data-demo-bg","dark");
+          else document.body.removeAttribute("data-demo-bg");
+        }catch(e){}
+      },[darkBg]);
       const active=PROTOS.find(p=>p.key===proto)||PROTOS[0];
       return h(TimelineCtx.Provider,{value:ctx},
         showControls&&h(PanelControls),
+        h("button",{type:"button",className:"demo-bg-toggle",
+          onClick:()=>setDarkBg(v=>!v),
+          "aria-label":"Toggle demo page background",
+          "aria-pressed":darkBg,
+          title:"Demo page background (independent of the panel theme)"},
+          h("span",{className:"demo-bg-dot","aria-hidden":"true"}),
+          "Dark bg"),
         h("button",{type:"button",onClick:()=>setDemoHidden(v=>!v),
           title:"Testing only: hide/show demo page content",
           style:{position:"fixed",top:"12px",right:"12px",zIndex:2147483000,