diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index f82c4a4..e81d324 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -357,7 +357,15 @@ function App() {
       {/* Header */}
       <header
         className="flex items-center justify-between px-4 py-2 shrink-0"
-        style={{ background: '#0d2612', borderBottom: '2px solid #1a4a22' }}
+        style={{
+          background: '#0d2612',
+          borderBottom: '2px solid #1a4a22',
+          // Sit above the data pixels (z=1000) so a carrot mid-flight
+          // doesn't paint over the chrome when the canvas pane lets it
+          // bleed beyond its bounds.
+          position: 'relative',
+          zIndex: 1001,
+        }}
       >
         <div className="flex items-center gap-4">
           <h1
diff --git a/packages/web/src/AppFragment.tsx b/packages/web/src/AppFragment.tsx
index eeb7083..b3e862f 100644
--- a/packages/web/src/AppFragment.tsx
+++ b/packages/web/src/AppFragment.tsx
@@ -262,7 +262,12 @@ export default function AppFragment() {
     >
       <header
         className="flex items-center justify-between px-4 py-2 shrink-0"
-        style={{ background: '#0d2612', borderBottom: '2px solid #1a4a22' }}
+        style={{
+          background: '#0d2612',
+          borderBottom: '2px solid #1a4a22',
+          position: 'relative',
+          zIndex: 1001,
+        }}
       >
         <div className="flex items-center gap-4">
           <h1 className="font-pixel text-accent" style={{ fontSize: 14 }}>
diff --git a/packages/web/src/components/DataInspectionPanel.tsx b/packages/web/src/components/DataInspectionPanel.tsx
index fc56235..ea45902 100644
--- a/packages/web/src/components/DataInspectionPanel.tsx
+++ b/packages/web/src/components/DataInspectionPanel.tsx
@@ -72,6 +72,11 @@ export function DataInspectionPanel({
     width: side === 'right' ? size : '100%',
     height: side === 'bottom' ? size : '100%',
     flexShrink: 0,
+    // Sit above DataPixel (z=1000) so a carrot mid-flight can't paint
+    // over the inspector when the canvas pane lets it bleed past its
+    // bounds.
+    position: 'relative',
+    zIndex: 1001,
   }
 
   const handleStyle: React.CSSProperties = {
@@ -409,7 +414,10 @@ export function BookmarkTab({ open, onToggle, edge, label, ariaLabel }: Bookmark
         top: '50%',
         transform: 'translateY(-50%)',
         [edge === 'right' ? 'right' : 'left']: 0,
-        zIndex: 20,
+        // Above DataPixel (z=1000) — same reason the header/sidebars
+        // sit above carrots: pixels in mid-flight can extend past the
+        // canvas pane bounds.
+        zIndex: 1001,
         width: 24,
         minWidth: 24,
         minHeight: 76,
diff --git a/packages/web/src/components/FlowCanvas.tsx b/packages/web/src/components/FlowCanvas.tsx
index 12787ba..c8baf85 100644
--- a/packages/web/src/components/FlowCanvas.tsx
+++ b/packages/web/src/components/FlowCanvas.tsx
@@ -678,7 +678,7 @@ function FlowCanvasInner({
                 restart()
               }}
             >
-              {'⏮'}
+              <RestartIcon />
             </PlaybackButton>
             <PlaybackButton
               ariaLabel="Previous step"
@@ -689,10 +689,10 @@ function FlowCanvasInner({
               }}
               disabled={(animState.currentStepIndex ?? -1) <= 0}
             >
-              {'⏪'}
+              <PrevIcon />
             </PlaybackButton>
             <PlaybackButton ariaLabel={playing ? 'Pause flow' : 'Play flow'} onClick={onTogglePlay}>
-              {playing ? '⏸' : '▶'}
+              {playing ? <PauseIcon /> : <PlayIcon />}
             </PlaybackButton>
             <PlaybackButton
               ariaLabel="Next step"
@@ -706,7 +706,7 @@ function FlowCanvasInner({
                 animState.currentStepIndex >= flowSteps.length - 1
               }
             >
-              {'⏩'}
+              <NextIcon />
             </PlaybackButton>
           </div>
         </Panel>
@@ -803,11 +803,11 @@ function PlaybackButton({
         border: '1px solid #1a4a22',
         color: disabled ? '#3a5a42' : '#7fffaa',
         cursor: disabled ? 'default' : 'pointer',
-        fontSize: 14,
-        fontFamily: 'monospace',
-        lineHeight: 1,
         padding: 0,
         borderRadius: 3,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
       {children}
@@ -815,6 +815,81 @@ function PlaybackButton({
   )
 }
 
+// Inline SVG icons keep the playback chrome monochrome — emoji glyphs
+// (⏮ ⏪ ▶ ⏸ ⏩) get rendered in the platform's color emoji font on most
+// systems, ignoring the button's color and showing as Apple-blue or
+// Win11-pink depending on the OS. SVG with currentColor + a sharp 16px
+// viewBox keeps the buttons in the green accent the rest of the chrome
+// uses.
+
+function ICON_FRAME(children: React.ReactNode) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={14}
+      height={14}
+      fill="currentColor"
+      stroke="currentColor"
+      aria-hidden="true"
+    >
+      {children}
+    </svg>
+  )
+}
+
+function RestartIcon() {
+  // Counter-clockwise circular arrow with an arrowhead at the tail —
+  // unambiguous "start over" affordance instead of the skip-back glyph
+  // (⏮) the emoji set used.
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={14}
+      height={14}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="square"
+      strokeLinejoin="miter"
+      aria-hidden="true"
+    >
+      <path d="M3 8 A5 5 0 1 0 5 4" />
+      <path d="M5 1.5 L5 4 L7.5 4" fill="currentColor" />
+    </svg>
+  )
+}
+
+function PrevIcon() {
+  return ICON_FRAME(
+    <>
+      <path d="M7 3 L3 8 L7 13 Z" />
+      <path d="M13 3 L9 8 L13 13 Z" />
+    </>
+  )
+}
+
+function NextIcon() {
+  return ICON_FRAME(
+    <>
+      <path d="M3 3 L7 8 L3 13 Z" />
+      <path d="M9 3 L13 8 L9 13 Z" />
+    </>
+  )
+}
+
+function PlayIcon() {
+  return ICON_FRAME(<path d="M4 3 L13 8 L4 13 Z" />)
+}
+
+function PauseIcon() {
+  return ICON_FRAME(
+    <>
+      <rect x={4} y={3} width={3} height={10} />
+      <rect x={9} y={3} width={3} height={10} />
+    </>
+  )
+}
+
 export function FlowCanvas(props: FlowCanvasProps) {
   return (
     <ReactFlowProvider>
diff --git a/packages/web/src/components/Sidebar.tsx b/packages/web/src/components/Sidebar.tsx
index bf16870..42136a3 100644
--- a/packages/web/src/components/Sidebar.tsx
+++ b/packages/web/src/components/Sidebar.tsx
@@ -479,7 +479,13 @@ export function Sidebar({
   return (
     <aside
       className="shrink-0 flex flex-col overflow-hidden"
-      style={{ width: 260, background: '#141428', borderRight: '2px solid #2a2a4a' }}
+      style={{
+        width: 260,
+        background: '#141428',
+        borderRight: '2px solid #2a2a4a',
+        position: 'relative',
+        zIndex: 1001,
+      }}
       aria-label="File explorer"
     >
       {/* Search */}