diff --git a/app/components/AppShell.tsx b/app/components/AppShell.tsx
index 096665b..1113e76 100644
--- a/app/components/AppShell.tsx
+++ b/app/components/AppShell.tsx
@@ -36,7 +36,6 @@ type NavRowProps = {
   enabled: boolean;
   hasChildren?: boolean;
   onNavigate?: () => void;
-  layoutScope?: string;
 };
 
 type NavGlyphProps = {
@@ -82,9 +81,8 @@ const styles: Record<string, CSSProperties> = {
   navSlideClip: {
     overflow: 'hidden',
   },
-  // `isolation` makes the nav a stacking context so the active-row pill (which
-  // renders at z-index -1 and travels across rows while animating) paints behind
-  // every row's label instead of on top of the rows it passes over.
+  // `isolation` keeps the selected pill (z-index -1) in this stacking context
+  // so it paints behind the row's label instead of behind the sidebar.
   nav: { display: 'flex', flexDirection: 'column', gap: 2, position: 'relative', isolation: 'isolate' },
   navLink: { textDecoration: 'none', color: 'inherit' },
   navRow: {
@@ -294,7 +292,7 @@ function NavGlyph({ name }: NavGlyphProps) {
   }
 }
 
-function NavRow({ icon, label, href, active, enabled, hasChildren, onNavigate, layoutScope = 'desktop' }: NavRowProps) {
+function NavRow({ icon, label, href, active, enabled, hasChildren, onNavigate }: NavRowProps) {
   let color = DISABLED;
   if (enabled) {
     color = active ? 'var(--bds-gray-80)' : 'var(--bds-gray-50)';
@@ -311,12 +309,7 @@ function NavRow({ icon, label, href, active, enabled, hasChildren, onNavigate, l
       }}
     >
       {active && (
-        <motion.div
-          layoutId={`nav-active-bg-${layoutScope}`}
-          // Only remasure when the highlighted row changes. Theme toggles,
-          // banner dismiss, and other sidebar rerenders shift this pill's
-          // page position; without a dependency Motion would slide it there.
-          layoutDependency={href}
+        <div
           style={{
             position: 'absolute',
             inset: 0,
@@ -328,7 +321,6 @@ function NavRow({ icon, label, href, active, enabled, hasChildren, onNavigate, l
             zIndex: -1,
             pointerEvents: 'none',
           }}
-          transition={{ type: 'spring', bounce: 0, duration: 0.3 }}
         />
       )}
       {icon && (
@@ -415,10 +407,9 @@ type SidebarContentProps = {
   onToggleTheme: () => void;
   onNavigate?: () => void;
   hideBrand?: boolean;
-  layoutScope?: string;
 };
 
-function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand, layoutScope = 'desktop' }: SidebarContentProps) {
+function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarContentProps) {
   const pathname = usePathname() || '/';
   // The nav follows the tapped href immediately instead of waiting for the router:
   // usePathname() only updates once the route commits, which left the pill and the
@@ -539,7 +530,6 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand, layoutScop
                           active={active}
                           enabled={true}
                           onNavigate={() => selectPath(child.href)}
-                          layoutScope={`${layoutScope}-sub`}
                         />
                       );
                     })}
@@ -568,7 +558,6 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand, layoutScop
                         enabled={item.enabled}
                         hasChildren={!!item.children}
                         onNavigate={() => selectPath(item.href)}
-                        layoutScope={layoutScope}
                       />
                     ))}
                   </nav>
@@ -767,7 +756,6 @@ export function AppShell({ children }: PropsWithChildren) {
                 onToggleTheme={toggleTheme}
                 onNavigate={() => setMenuOpen(false)}
                 hideBrand
-                layoutScope="mobile"
               />
             </Dialog.Popup>
           </Dialog.Portal>
diff --git a/app/components/ui/Tabs.tsx b/app/components/ui/Tabs.tsx
index 38538b2..b292893 100644
--- a/app/components/ui/Tabs.tsx
+++ b/app/components/ui/Tabs.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { MouseEvent } from 'react';
+import { useId } from 'react';
 import { motion, useReducedMotion } from 'motion/react';
 
 import { cn } from './cn';
@@ -24,21 +23,6 @@ type TabsProps = {
 
 const PILL_TRANSITION = { type: 'spring', bounce: 0, duration: 0.3 } as const;
 
-// Breathing room left between a scrolled-into-view tab and the scroller edge.
-const SCROLL_MARGIN = 8;
-
-function findScrollParent(el: HTMLElement): HTMLElement | null {
-  let node = el.parentElement;
-  while (node) {
-    if (node.scrollWidth > node.clientWidth) {
-      const overflowX = getComputedStyle(node).overflowX;
-      if (overflowX === 'auto' || overflowX === 'scroll') return node;
-    }
-    node = node.parentElement;
-  }
-  return null;
-}
-
 export function Tabs({
   items,
   value,
@@ -47,76 +31,30 @@ export function Tabs({
   className,
   size = 'md',
 }: TabsProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const buttonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
-  const [pill, setPill] = useState<{ x: number; width: number } | null>(null);
+  const layoutId = useId();
   const reducedMotion = useReducedMotion();
   const pillTransition = reducedMotion
     ? { type: 'spring' as const, bounce: 0, duration: 0 }
     : PILL_TRANSITION;
 
-  const measure = useCallback(() => {
-    const container = containerRef.current;
-    const btn = buttonRefs.current.get(value);
-    if (!container || !btn) return;
-    const cr = container.getBoundingClientRect();
-    const br = btn.getBoundingClientRect();
-    setPill({ x: br.left - cr.left, width: br.width });
-
-    // On narrow screens the tab row is wider than its scroll container, so the
-    // selected tab can sit off-screen. Nudge it into view horizontally only —
-    // scrollIntoView would also move the page vertically.
-    const scroller = findScrollParent(container);
-    if (!scroller) return;
-    const sr = scroller.getBoundingClientRect();
-    const overflowLeft = sr.left - br.left;
-    const overflowRight = br.right - sr.right;
-    if (overflowLeft > 0) scroller.scrollLeft -= overflowLeft + SCROLL_MARGIN;
-    else if (overflowRight > 0) scroller.scrollLeft += overflowRight + SCROLL_MARGIN;
-  }, [value]);
-
-  useEffect(() => {
-    measure();
-  }, [measure]);
-
-  const handleClick = useCallback(
-    (event: MouseEvent<HTMLButtonElement>) => {
-      const next = event.currentTarget.dataset.value;
-      if (next) onChange(next);
-    },
-    [onChange],
-  );
-
   return (
     <div
-      ref={containerRef}
       role="tablist"
       aria-label={ariaLabel}
       className={cn('relative inline-flex w-max rounded-full bg-bds-gray-5 p-1', className)}
     >
-      {pill && (
-        <motion.span
-          animate={{ x: pill.x, width: pill.width }}
-          transition={pillTransition}
-          className="absolute top-1 bottom-1 left-0 rounded-full bg-background shadow-[0_1px_2px_rgba(0,0,0,0.06)]"
-        />
-      )}
       {items.map((item) => {
         const active = item.value === value;
         return (
           <button
             key={item.value}
-            ref={(el) => {
-              if (el) buttonRefs.current.set(item.value, el);
-            }}
             type="button"
             role="tab"
             aria-selected={active}
-            data-value={item.value}
-            onClick={handleClick}
+            onClick={() => !item.disabled && onChange(item.value)}
             disabled={item.disabled}
             className={cn(
-              'relative z-[1] flex shrink-0 select-none items-center gap-1.5 rounded-full font-sans whitespace-nowrap transition-colors',
+              'relative flex shrink-0 select-none items-center gap-1.5 rounded-full font-sans whitespace-nowrap transition-colors',
               size === 'sm' ? 'px-2.5 py-1 text-[12px]' : 'px-3 py-1.5 text-[14px]',
               item.disabled
                 ? 'cursor-not-allowed text-bds-gray-40'
@@ -125,8 +63,20 @@ export function Tabs({
                   : 'text-bds-gray-60 hover:text-foreground dark:text-bds-gray-40 dark:hover:text-white',
             )}
           >
-            {item.icon && <span className="flex shrink-0">{item.icon}</span>}
-            {item.label}
+            {active ? (
+              <motion.span
+                layoutId={layoutId}
+                layoutDependency={value}
+                transition={pillTransition}
+                className="absolute inset-0 bg-background"
+                style={{
+                  borderRadius: 9999,
+                  boxShadow: '0 1px 2px rgba(0,0,0,0.06)',
+                }}
+              />
+            ) : null}
+            {item.icon ? <span className="relative z-[1] flex shrink-0">{item.icon}</span> : null}
+            <span className="relative z-[1]">{item.label}</span>
           </button>
         );
       })}
diff --git a/app/components/ui/icons.tsx b/app/components/ui/icons.tsx
index 2751fe2..d990b19 100644
--- a/app/components/ui/icons.tsx
+++ b/app/components/ui/icons.tsx
@@ -1,4 +1,5 @@
 import type { SVGProps } from 'react';
+import { fitIcon } from 'morphicons';
 
 const VIBENET_PATH =
   'M30.2895 14.8575L20.0038 20.0002M20.0038 20.0002L10.2895 14.2861M20.0038 20.0002L20.0038 30.8571M30.8608 22.8275V17.1724C30.8608 15.3861 29.9078 13.7354 28.3608 12.8423L22.4737 9.44331C20.9267 8.55015 19.0207 8.55015 17.4737 9.44331L11.5865 12.8423C10.0395 13.7354 9.08649 15.3861 9.08649 17.1724V22.8275C9.08649 24.6138 10.0395 26.2644 11.5865 27.1576L17.4737 30.5566C19.0207 31.4497 20.9267 31.4497 22.4737 30.5566L28.3608 27.1576C29.9078 26.2644 30.8608 24.6138 30.8608 22.8275Z';
@@ -100,6 +101,15 @@ export const CLIPBOARD_MORPH_ICON =
   'M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z';
 export const CHECK_MORPH_ICON = 'M5 13l4 4L19 7';
 
+// Overlapping-squares copy glyph drawn on a 40x40 grid (InlineCommand on
+// the snapshots page). fitIcon regrids it onto morphicons' 24x24 baseline
+// so it can morph against CHECK_MORPH_ICON. Stroke 2.5 on 40x40 is 1.5 on
+// 24x24 at the same display size (2.5 * 24 / 40).
+export const COPY_SQUARES_PATH_40 =
+  'M16.6667 23.3333V26.6667C16.6667 28.5076 18.1591 30 20 30H26.6667C28.5076 30 30 28.5076 30 26.6667V20C30 18.1591 28.5076 16.6667 26.6667 16.6667H23.3333M23.3333 16.6667V13.3333C23.3333 11.4924 21.8409 10 20 10H13.3333C11.4924 10 10 11.4924 10 13.3333V20C10 21.8409 11.4924 23.3333 13.3333 23.3333H20C21.8409 23.3333 23.3333 21.8409 23.3333 20V16.6667Z';
+export const COPY_SQUARES_MORPH_ICON = fitIcon(COPY_SQUARES_PATH_40, 40);
+export const COPY_SQUARES_MORPH_STROKE_WIDTH = 2.5 * (24 / 40);
+
 export function CheckIcon({ size = 16, className }: { size?: number; className?: string }) {
   return (
     <svg
diff --git a/app/globals.css b/app/globals.css
index 46dc118..0d5ee45 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -9,7 +9,8 @@
  *   100  mobile drawer            (.drawer, below)
  *   110  mobile header            (.mobile-header, below)
  *   120  modals                   (components/ui/Modal.tsx)
- *   130  poppers over modals      (components/ui/Select.tsx)
+ *   130  poppers over modals      (components/ui/Select.tsx,
+ *                                  vibenet/demos/_shared/AccountSwitcher.tsx)
  *
  * A popper below the modal layer still opens, but paints behind the panel —
  * which reads as "the dropdown does nothing". */
diff --git a/app/snapshots/SnapshotsClient.tsx b/app/snapshots/SnapshotsClient.tsx
index fd90353..99de84a 100644
--- a/app/snapshots/SnapshotsClient.tsx
+++ b/app/snapshots/SnapshotsClient.tsx
@@ -1,11 +1,12 @@
 'use client';
 
 import { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
 
 import { Card } from '../components/ui/Card';
 import { Checkbox } from '../components/ui/Checkbox';
 import { cn } from '../components/ui/cn';
+import { COPY_SQUARES_PATH_40 } from '../components/ui/icons';
 import { Tabs } from '../components/ui/Tabs';
 import { Text } from '../components/ui/Text';
 
@@ -33,17 +34,15 @@ const NETWORK_LABELS: Record<string, string> = {
 const REQUIRED_COMPONENTS = new Set(['state', 'headers']);
 
 const SHIMMER_GRADIENT =
-  'linear-gradient(90deg, currentColor 0%, currentColor 30%, var(--bds-brand) 50%, currentColor 70%, currentColor 100%)';
+  'linear-gradient(90deg, currentColor 0%, currentColor 40%, var(--shimmer-highlight) 50%, currentColor 60%, currentColor 100%)';
 
 function InlineCommand({ command, onCopy }: { command: string; onCopy?: () => void }) {
   const [copied, setCopied] = useState(false);
   const [hovered, setHovered] = useState(false);
   const textRef = useRef<HTMLSpanElement>(null);
+  const shimmerRef = useRef<HTMLSpanElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [overflowPx, setOverflowPx] = useState(0);
-  const [shimmer, setShimmer] = useState(false);
-  const prevCommand = useRef(command);
-  const reducedMotion = useReducedMotion();
 
   useEffect(() => {
     const measure = () => {
@@ -57,13 +56,12 @@ function InlineCommand({ command, onCopy }: { command: string; onCopy?: () => vo
   }, [command]);
 
   useEffect(() => {
-    if (prevCommand.current !== command) {
-      prevCommand.current = command;
-      if (!reducedMotion) {
-        setShimmer(true);
-      }
-    }
-  }, [command, reducedMotion]);
+    const animation = shimmerRef.current?.animate(
+      [{ backgroundPosition: '100% 0%' }, { backgroundPosition: '0% 0%' }],
+      { duration: 700, easing: 'cubic-bezier(0.45, 0, 0.55, 1)' },
+    );
+    return () => animation?.cancel();
+  }, [command]);
 
   const handleCopy = useCallback(() => {
     void navigator.clipboard.writeText(command).then(() => {
@@ -95,27 +93,21 @@ function InlineCommand({ command, onCopy }: { command: string; onCopy?: () => vo
             transition={hovered ? { duration: overflowPx / 100, ease: 'linear' } : { duration: 0.3, ease: 'easeOut' }}
             className="block whitespace-nowrap"
           >
-            <motion.span
-              animate={{ backgroundPosition: shimmer ? ['200% center', '0% center'] : '0% center' }}
-              transition={{ duration: 0.7, ease: [0.23, 1, 0.32, 1] }}
-              onAnimationComplete={() => setShimmer(false)}
-              className="bg-[length:200%_100%] bg-clip-text"
-              style={{
-                backgroundImage: shimmer ? SHIMMER_GRADIENT : 'none',
-                WebkitBackgroundClip: 'text',
-                WebkitTextFillColor: shimmer ? 'transparent' : undefined,
-              }}
+            <span
+              ref={shimmerRef}
+              className="bg-[length:300%_100%] bg-clip-text bg-no-repeat [--shimmer-highlight:var(--bds-blue-15)] dark:[--shimmer-highlight:var(--bds-brand)]"
+              style={{ backgroundImage: SHIMMER_GRADIENT, WebkitTextFillColor: 'transparent' }}
             >
               <Text as="span" variant="label.mono">
-                <span className="text-bds-gray-40" style={{ WebkitTextFillColor: shimmer ? 'initial' : undefined }}>$</span> {command}
+                <span className="text-bds-gray-40" style={{ WebkitTextFillColor: 'initial' }}>$</span> {command}
               </Text>
-            </motion.span>
+            </span>
           </motion.span>
           {overflowPx > 0 && (
             <motion.div
               animate={{ opacity: hovered ? 0 : 1 }}
               transition={{ duration: 0.15 }}
-              className="pointer-events-none absolute inset-y-0 right-0 w-10 bg-gradient-to-l from-white via-white/80 to-transparent"
+              className="pointer-events-none absolute inset-y-0 right-0 w-10 bg-gradient-to-l from-background to-transparent"
             />
           )}
         </div>
@@ -157,7 +149,7 @@ function InlineCommand({ command, onCopy }: { command: string; onCopy?: () => vo
                 exit={{ opacity: 0, scale: 0.5 }}
                 transition={{ duration: 0.15 }}
               >
-                <path d="M16.6667 23.3333V26.6667C16.6667 28.5076 18.1591 30 20 30H26.6667C28.5076 30 30 28.5076 30 26.6667V20C30 18.1591 28.5076 16.6667 26.6667 16.6667H23.3333M23.3333 16.6667V13.3333C23.3333 11.4924 21.8409 10 20 10H13.3333C11.4924 10 10 11.4924 10 13.3333V20C10 21.8409 11.4924 23.3333 13.3333 23.3333H20C21.8409 23.3333 23.3333 21.8409 23.3333 20V16.6667Z" stroke="currentColor" strokeWidth={2.5} />
+                <path d={COPY_SQUARES_PATH_40} stroke="currentColor" strokeWidth={2.5} />
               </motion.svg>
             )}
           </AnimatePresence>
diff --git a/app/upgrades/changelog/ChangelogClient.tsx b/app/upgrades/changelog/ChangelogClient.tsx
index 3a9c009..db732ab 100644
--- a/app/upgrades/changelog/ChangelogClient.tsx
+++ b/app/upgrades/changelog/ChangelogClient.tsx
@@ -190,11 +190,11 @@ export function ChangelogClient() {
           onChange={handleQueryChange}
           placeholder="Search by title, EIP, or summary keyword"
           aria-label="Search changes"
-          className="h-[34px] min-w-0 flex-1 rounded-full border border-bds-gray-10 bg-background px-4 text-[14px] text-foreground outline-none placeholder:text-bds-gray-50"
+          className="h-[34px] min-w-[min(100%,14rem)] flex-1 rounded-full border border-bds-gray-10 bg-background px-4 text-[14px] text-foreground outline-none placeholder:text-bds-gray-50"
         />
       </div>
 
-      <div className="hidden md:block">
+      <div className="hidden [@container(min-width:48rem)]:block">
         <table className="w-full table-fixed text-left text-sm">
           <thead className="border-b border-bds-gray-10 text-bds-gray-50">
             <tr aria-label="Column headers">
@@ -275,7 +275,7 @@ export function ChangelogClient() {
         </table>
       </div>
 
-      <div className="grid gap-3 md:hidden">
+      <div className="grid gap-3 [@container(min-width:48rem)]:hidden">
         {filtered.map((change) => (
           <LinkCard
             key={change.id}
diff --git a/app/vibenet/components/CopyableValue.tsx b/app/vibenet/components/CopyableValue.tsx
index 046e823..a1b7d21 100644
--- a/app/vibenet/components/CopyableValue.tsx
+++ b/app/vibenet/components/CopyableValue.tsx
@@ -2,18 +2,14 @@
 
 import { useCallback, useState } from 'react';
 import { MorphIcon } from 'morphicons/react';
-import { fitIcon } from 'morphicons';
 
-import { CHECK_MORPH_ICON } from '../../components/ui/icons';
+import {
+  CHECK_MORPH_ICON,
+  COPY_SQUARES_MORPH_ICON,
+  COPY_SQUARES_MORPH_STROKE_WIDTH,
+} from '../../components/ui/icons';
 import { cn } from '../../components/ui/cn';
 
-// Original artwork is drawn on a 40x40 grid; regrid it onto morphicons' 24x24
-// baseline once, at module scope, so it can morph against CHECK_MORPH_ICON.
-const COPY_MORPH_ICON = fitIcon(
-  'M16.6667 23.3333V26.6667C16.6667 28.5076 18.1591 30 20 30H26.6667C28.5076 30 30 28.5076 30 26.6667V20C30 18.1591 28.5076 16.6667 26.6667 16.6667H23.3333M23.3333 16.6667V13.3333C23.3333 11.4924 21.8409 10 20 10H13.3333C11.4924 10 10 11.4924 10 13.3333V20C10 21.8409 11.4924 23.3333 13.3333 23.3333H20C21.8409 23.3333 23.3333 21.8409 23.3333 20V16.6667Z',
-  40,
-);
-
 type CopyableValueProps = {
   value: string;
   display?: string;
@@ -52,9 +48,9 @@ export function CopyableValue({ value, display, className }: CopyableValueProps)
     >
       <code className="truncate">{shown}</code>
       <MorphIcon
-        icon={copied ? CHECK_MORPH_ICON : COPY_MORPH_ICON}
+        icon={copied ? CHECK_MORPH_ICON : COPY_SQUARES_MORPH_ICON}
         size={20}
-        strokeWidth={copied ? 2 : 2.5}
+        strokeWidth={copied ? 2 : COPY_SQUARES_MORPH_STROKE_WIDTH}
         className={cn(
           'shrink-0 transition-colors',
           copied ? 'text-bds-green-60' : 'text-bds-gray-50 group-hover:text-foreground',
diff --git a/app/vibenet/demos/_shared/AccountSwitcher.tsx b/app/vibenet/demos/_shared/AccountSwitcher.tsx
index ad24235..1d87e92 100644
--- a/app/vibenet/demos/_shared/AccountSwitcher.tsx
+++ b/app/vibenet/demos/_shared/AccountSwitcher.tsx
@@ -6,14 +6,14 @@
 // as a full manager (toolbar) or a plain picker (e.g. a transaction "From").
 
 import { useEffect, useRef, useState } from 'react';
+import { Popover } from '@base-ui/react/popover';
 
-import { Card } from '../../../components/ui/Card';
 import { cn } from '../../../components/ui/cn';
 import { Text } from '../../../components/ui/Text';
 import type { StoredAccount } from '../account/library/model';
 import { AccountAvatar, AccountIdentity, Badge, TrashIcon } from './primitives';
 
-function ChevronIcon({ open }: { open: boolean }) {
+function ChevronIcon() {
   return (
     <svg
       width={16}
@@ -24,7 +24,7 @@ function ChevronIcon({ open }: { open: boolean }) {
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
-      className={cn('shrink-0 text-bds-gray-50 transition-transform', open && 'rotate-180')}
+      className="shrink-0 text-bds-gray-50 transition-transform duration-150 group-data-[popup-open]:rotate-180"
       aria-hidden="true"
     >
       <path d="M5 7.5L10 12.5L15 7.5" />
@@ -74,7 +74,6 @@ export function AccountSwitcher({
 }: AccountSwitcherProps) {
   const [open, setOpen] = useState(false);
   const [confirmId, setConfirmId] = useState<string | null>(null);
-  const ref = useRef<HTMLDivElement>(null);
   const confirmButtonRef = useRef<HTMLButtonElement | null>(null);
 
   // Clicking anywhere other than the pending delete button cancels the confirm.
@@ -88,30 +87,14 @@ export function AccountSwitcher({
     return () => document.removeEventListener('mousedown', onDocMouseDown);
   }, [confirmId]);
 
-  useEffect(() => {
-    if (!open) return;
-    const onDoc = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    };
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpen(false);
-    };
-    document.addEventListener('mousedown', onDoc);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('mousedown', onDoc);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [open]);
-
-  // Reset the delete confirmation whenever the menu closes.
-  useEffect(() => {
-    if (!open) setConfirmId(null);
-  }, [open]);
-
   const active = accounts.find((a) => a.id === activeAccountId) ?? null;
   const topLevel = accounts.filter((a) => !a.parentId);
 
+  const close = () => {
+    setOpen(false);
+    setConfirmId(null);
+  };
+
   const row = (a: StoredAccount, nested: boolean) => {
     const isActive = a.id === activeAccountId;
     const confirming = confirmId === a.id;
@@ -128,7 +111,7 @@ export function AccountSwitcher({
           type="button"
           onClick={() => {
             onSelect(a.id);
-            setOpen(false);
+            close();
           }}
           className="flex min-w-0 flex-1 items-center gap-2.5 text-left"
         >
@@ -147,7 +130,7 @@ export function AccountSwitcher({
                 type="button"
                 onClick={() => {
                   onDetails(a.id);
-                  setOpen(false);
+                  close();
                 }}
                 aria-label={`Details for ${a.label}`}
                 title="Account details"
@@ -187,19 +170,20 @@ export function AccountSwitcher({
   };
 
   return (
-    <div ref={ref} className="relative">
-      <button
-        type="button"
-        onClick={() => {
-          if (accounts.length === 0 && onCreate) {
-            onCreate();
-            return;
-          }
-          setOpen((v) => !v);
-        }}
-        aria-expanded={open}
+    <Popover.Root
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (nextOpen && accounts.length === 0 && onCreate) {
+          onCreate();
+          return;
+        }
+        setOpen(nextOpen);
+        if (!nextOpen) setConfirmId(null);
+      }}
+    >
+      <Popover.Trigger
         className={cn(
-          'flex items-center justify-between gap-2 rounded-lg border border-bds-gray-10 bg-background px-2.5 py-1.5 transition-colors hover:border-foreground dark:border-white/10 dark:bg-white/5 dark:hover:border-white',
+          'group flex items-center justify-between gap-2 rounded-lg border border-bds-gray-10 bg-background px-2.5 py-1.5 transition-colors hover:border-foreground dark:border-white/10 dark:bg-white/5 dark:hover:border-white',
           triggerClassName,
         )}
       >
@@ -213,34 +197,42 @@ export function AccountSwitcher({
             {accounts.length === 0 ? 'Create account' : 'Select account'}
           </Text>
         )}
-        <ChevronIcon open={open} />
-      </button>
-
-      {open ? (
-        // Match the trigger width, but never narrower than 280px; anchored right
-        // so the extra width overflows leftward (e.g. the narrow navbar trigger)
-        // instead of running off the page.
-        <Card className="absolute right-0 top-[calc(100%+6px)] z-30 flex max-h-[60vh] w-[max(340px,100%)] max-w-[calc(100vw-2rem)] flex-col gap-1 overflow-y-auto bg-background p-2 shadow-lg dark:bg-[rgb(38,38,38)]">
-          {topLevel.map((parent) => (
-            <div key={parent.id} className="flex flex-col gap-1">
-              {row(parent, false)}
-              {accounts.filter((s) => s.parentId === parent.id).map((sub) => row(sub, true))}
-            </div>
-          ))}
-          {onCreate ? (
-            <button
-              type="button"
-              onClick={() => {
-                onCreate();
-                setOpen(false);
-              }}
-              className="mt-1 flex items-center justify-center gap-2 rounded-lg border border-dashed border-bds-gray-15 px-4 py-2.5 text-[13px] text-bds-gray-60 transition-colors hover:border-base-blue hover:text-base-blue dark:border-white/15 dark:text-bds-gray-40 dark:hover:border-bds-blue-60"
-            >
-              + New Account
-            </button>
-          ) : null}
-        </Card>
-      ) : null}
-    </div>
+        <ChevronIcon />
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner
+          // z-[130] — popper layer, above Modal's z-[120]. This switcher also
+          // sits inside the transact modal ("From"); anything lower paints
+          // behind the panel. See the layer scale in globals.css.
+          className="z-[130] outline-none"
+          align="end"
+          sideOffset={6}
+        >
+          <Popover.Popup
+            className="flex max-h-[60vh] w-[max(340px,var(--anchor-width))] max-w-[calc(100vw-2rem)] origin-[var(--transform-origin)] flex-col gap-1 overflow-y-auto rounded-2xl border border-bds-gray-10 bg-background p-2 shadow-lg outline-none [transform:scale(1)] transition-[opacity,transform] duration-150 ease-out data-[ending-style]:opacity-0 data-[ending-style]:[transform:scale(0.97)] data-[starting-style]:opacity-0 data-[starting-style]:[transform:scale(0.97)] dark:border-white/10 dark:bg-[rgb(38,38,38)] motion-reduce:transition-none"
+          >
+            <Popover.Title className="sr-only">Accounts</Popover.Title>
+            {topLevel.map((parent) => (
+              <div key={parent.id} className="flex flex-col gap-1">
+                {row(parent, false)}
+                {accounts.filter((s) => s.parentId === parent.id).map((sub) => row(sub, true))}
+              </div>
+            ))}
+            {onCreate ? (
+              <button
+                type="button"
+                onClick={() => {
+                  onCreate();
+                  close();
+                }}
+                className="mt-1 flex items-center justify-center gap-2 rounded-lg border border-dashed border-bds-gray-15 px-4 py-2.5 text-[13px] text-bds-gray-60 transition-colors hover:border-base-blue hover:text-base-blue dark:border-white/15 dark:text-bds-gray-40 dark:hover:border-bds-blue-60"
+              >
+                + New Account
+              </button>
+            ) : null}
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
   );
 }
diff --git a/app/vibenet/demos/account/AccountDemo.tsx b/app/vibenet/demos/account/AccountDemo.tsx
index 61e90ae..9966c99 100644
--- a/app/vibenet/demos/account/AccountDemo.tsx
+++ b/app/vibenet/demos/account/AccountDemo.tsx
@@ -26,7 +26,7 @@ import {
   toHex,
 } from '@aa';
 import Link from 'next/link';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 
 import { Button } from '../../../components/ui/Button';
@@ -87,6 +87,7 @@ export function AccountDemo() {
     networkShort,
     setNetworkShort,
     deleteAccount,
+    hydrated,
 
     busy,
     error,
@@ -165,18 +166,17 @@ export function AccountDemo() {
   const [appBusy, setAppBusy] = useState<string | null>(null);
   const [transactModalOpen, setTransactModalOpen] = useState(false);
 
-  // Crossfade key for the dashboard (transact + apps). It normally tracks the
-  // active account so switching accounts crossfades the view. While the transact
-  // modal is open we hold it steady: the modal's "From" switcher changes the
-  // active account, and remounting the crossfaded subtree there would tear down
-  // and rebuild the open modal — a full-screen flash. Held steady, the dialog
-  // updates in place, then the dashboard crossfades once to the new account on
-  // close.
+  // Crossfade key for the dashboard (transact + apps). While the modal is
+  // closed it is the live account, so first paint after hydration uses the
+  // real id (`initial={false}` skips that enter). Snapshotting the key in
+  // state would freeze the pre-hydration `empty` value and fade the grid
+  // once the store loads. While the modal is open we hold the last closed
+  // key in a ref: the "From" switcher changes the active account, and
+  // remounting this subtree would tear down the open dialog.
   const activeAccountKey = activeAccountId ?? 'empty';
-  const [contentKey, setContentKey] = useState(activeAccountKey);
-  useEffect(() => {
-    if (!transactModalOpen) setContentKey(activeAccountKey);
-  }, [transactModalOpen, activeAccountKey]);
+  const heldKeyRef = useRef(activeAccountKey);
+  if (!transactModalOpen) heldKeyRef.current = activeAccountKey;
+  const contentKey = transactModalOpen ? heldKeyRef.current : activeAccountKey;
 
   const signableSigners = useMemo(
     () => [...postChangeOwnerSigners, ...sessionSigners],
@@ -535,8 +535,10 @@ export function AccountDemo() {
   };
 
   // Reset the Transact modal's builder/review state to its defaults. Called on
-  // close so a preset loaded by one entry point (e.g. the "Batched Calls" demo)
-  // never bleeds into the next open (e.g. a plain "Create Transaction").
+  // open, not close: resetting in `onClose` swaps Review back to the builder
+  // while the dialog is still animating out. Open always rebuilds from a clean
+  // slate (or a preset), so a prior "Batched Calls" demo cannot bleed into a
+  // later "Create Transaction".
   const resetTransactBuilder = () => {
     setCalls([newCallRow()]);
     setCallsAdvanced(false);
@@ -555,12 +557,11 @@ export function AccountDemo() {
   // fully-specified transaction — loads it straight into the builder state and
   // jumps directly to the Review step, skipping the builder entirely.
   const openTransactModal = (preset?: { calls: CallRow[]; gasMode?: 'eth' | 'free' | 'usdv'; metadata?: string }) => {
+    resetTransactBuilder();
     if (preset) {
       setCalls(preset.calls);
       if (preset.gasMode) setGasMode(preset.gasMode);
       setMetaField(preset.metadata ?? '');
-      setResult(null);
-      setError('');
       setTxStep('review');
     }
     setTransactModalOpen(true);
@@ -696,7 +697,7 @@ export function AccountDemo() {
       engine={engine}
       onTransactFromDetails={() => {
         setDetailsOpen(false);
-        setTransactModalOpen(true);
+        openTransactModal();
       }}
       activity={<ActivityLog activity={activity} accounts={accounts} />}
       activityCount={activity.length}
@@ -873,7 +874,7 @@ export function AccountDemo() {
             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M2 10L18 2L10 18L8 11L2 10Z"
-                stroke="black"
+                stroke="currentColor"
                 strokeWidth="1.6"
                 strokeLinecap="round"
                 strokeLinejoin="round"
@@ -893,7 +894,6 @@ export function AccountDemo() {
           onClose={() => {
             if (signing) return; // don't let Escape/backdrop abandon an in-flight send
             setTransactModalOpen(false);
-            resetTransactBuilder();
           }}
           title={
             txStep === 'review' ? 'Review Transaction' : txStep === 'submitted' ? 'Submitted' : 'Create Transaction'
@@ -951,7 +951,6 @@ export function AccountDemo() {
                     size="sm"
                     onClick={() => {
                       setTransactModalOpen(false);
-                      resetTransactBuilder();
                     }}
                   >
                     Done
@@ -1151,11 +1150,11 @@ export function AccountDemo() {
           <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M9 1L17 4V9C17 14 13.5 17.5 9 19C4.5 17.5 1 14 1 9V4L9 1Z"
-              stroke="black"
+              stroke="currentColor"
               strokeWidth="1.6"
               strokeLinejoin="round"
             />
-            <path d="M6 9.5L8 11.5L12 7" stroke="black" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M6 9.5L8 11.5L12 7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
           </svg>
         }
         title="Sponsorship"
@@ -1190,10 +1189,10 @@ export function AccountDemo() {
       <FeatureGridCard
         icon={
           <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="6" cy="6" r="4" stroke="black" strokeWidth="1.6" />
+            <circle cx="6" cy="6" r="4" stroke="currentColor" strokeWidth="1.6" />
             <path
               d="M9 9L18 18M14 14L17 11M16 16L18.5 13.5"
-              stroke="black"
+              stroke="currentColor"
               strokeWidth="1.6"
               strokeLinecap="round"
               strokeLinejoin="round"
@@ -1223,9 +1222,9 @@ export function AccountDemo() {
       <FeatureGridCard
         icon={
           <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M10 2L18 6L10 10L2 6L10 2Z" stroke="black" strokeWidth="1.6" strokeLinejoin="round" />
-            <path d="M2 10L10 14L18 10" stroke="black" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M2 14L10 18L18 14" stroke="black" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M10 2L18 6L10 10L2 6L10 2Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
+            <path d="M2 10L10 14L18 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M2 14L10 18L18 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
           </svg>
         }
         title="Batched Calls"
@@ -1251,10 +1250,10 @@ export function AccountDemo() {
       <FeatureGridCard
         icon={
           <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="10" cy="10" r="8" stroke="black" strokeWidth="1.6" />
+            <circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.6" />
             <path
               d="M10 5.5V14.5M12.2 7.6C12.2 6.7 11.2 6 10 6C8.8 6 7.8 6.7 7.8 7.6C7.8 8.4 8.8 9 10 9C11.2 9 12.2 9.6 12.2 10.5C12.2 11.3 11.2 12 10 12C8.8 12 7.8 11.3 7.8 10.4"
-              stroke="black"
+              stroke="currentColor"
               strokeWidth="1.6"
               strokeLinecap="round"
               strokeLinejoin="round"
diff --git a/app/vibenet/demos/account/components/AppsView.tsx b/app/vibenet/demos/account/components/AppsView.tsx
index 7d5ad3a..acf9e30 100644
--- a/app/vibenet/demos/account/components/AppsView.tsx
+++ b/app/vibenet/demos/account/components/AppsView.tsx
@@ -49,14 +49,14 @@ function AppIcon({ app }: { app: DemoApp }) {
     return (
       <svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M20.9992 7.17742H15.7229M15.7229 7.17742L11.6032 16.7935C11.2145 16.8837 10.79 16.8871 10.3976 16.7999L6.27058 7.17687M15.7229 7.17742L6.27058 7.17687M15.7229 7.17742L13.8029 1.00175M6.27058 7.17687H1M6.27058 7.17687L8.11716 1.00098" stroke="#FBD880" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-        <path d="M20.1843 9.04732C20.6978 8.56664 20.9829 7.8845 20.9993 7.18013C21.0159 6.46949 20.7147 5.79919 20.4428 5.15821C19.8228 3.72254 19.3152 1.64108 17.6354 1.15005C17.1343 1.00434 16.6014 1.00469 16.0728 1.00504L6.27108 1.0036C5.29482 0.991123 4.2695 0.996113 3.51943 1.66968C2.58389 2.43773 2.19747 3.83951 1.69989 4.91994L1.69881 4.92228C1.3393 5.7029 1.00642 6.42572 1.00009 7.17959C0.993297 7.98835 1.37815 8.6443 1.93607 9.19397C4.0991 11.2837 6.28549 13.3492 8.45718 15.4299C9.05261 15.9783 9.5828 16.6215 10.3977 16.8026C11.4733 17.0417 12.2731 16.615 13.0336 15.8893C15.4198 13.612 17.8242 11.3516 20.1843 9.04732Z" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M20.1843 9.04732C20.6978 8.56664 20.9829 7.8845 20.9993 7.18013C21.0159 6.46949 20.7147 5.79919 20.4428 5.15821C19.8228 3.72254 19.3152 1.64108 17.6354 1.15005C17.1343 1.00434 16.6014 1.00469 16.0728 1.00504L6.27108 1.0036C5.29482 0.991123 4.2695 0.996113 3.51943 1.66968C2.58389 2.43773 2.19747 3.83951 1.69989 4.91994L1.69881 4.92228C1.3393 5.7029 1.00642 6.42572 1.00009 7.17959C0.993297 7.98835 1.37815 8.6443 1.93607 9.19397C4.0991 11.2837 6.28549 13.3492 8.45718 15.4299C9.05261 15.9783 9.5828 16.6215 10.3977 16.8026C11.4733 17.0417 12.2731 16.615 13.0336 15.8893C15.4198 13.612 17.8242 11.3516 20.1843 9.04732Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
       </svg>
     );
   }
   if (app.id === 'spending-account') {
     return (
       <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M21 20C21 20.5523 20.5523 21 20 21L2 21C1.44772 21 1 20.5523 1 20L1 11L1 7L1 2C1 1.44772 1.44772 1 2 1L7 1L11 0.999999L20 1C20.5523 1 21 1.44772 21 2L21 20Z" fill="white" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M21 20C21 20.5523 20.5523 21 20 21L2 21C1.44772 21 1 20.5523 1 20L1 11L1 7L1 2C1 1.44772 1.44772 1 2 1L7 1L11 0.999999L20 1C20.5523 1 21 1.44772 21 2L21 20Z" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
         <path d="M5 17L7.73811 12.5769C8.08558 12.0156 8.87197 11.939 9.32117 12.4228L10.8807 14.1023C11.3543 14.6123 12.1911 14.4946 12.5056 13.8736L17 5" stroke="#A7E66B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
       </svg>
     );
diff --git a/app/vibenet/demos/account/components/FeatureGridCard.tsx b/app/vibenet/demos/account/components/FeatureGridCard.tsx
index 2bf7aa6..2806c69 100644
--- a/app/vibenet/demos/account/components/FeatureGridCard.tsx
+++ b/app/vibenet/demos/account/components/FeatureGridCard.tsx
@@ -25,7 +25,7 @@ export function FeatureGridCard({
     <Card className="flex flex-col gap-3 bg-background p-5 dark:bg-white/5">
       <div className="flex items-center gap-3">
         <span
-          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-bds-gray-10 dark:border-white/10"
+          className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-bds-gray-10 text-foreground dark:border-white/10"
           aria-hidden="true"
         >
           {icon}