/**
 * Early injection script for KeyPilot - runs at document_start
 * Makes SVG cursor available immediately before page load
 *
 * Also loaded explicitly from pages/newtab.html: Chrome does not inject
 * content scripts into extension pages (chrome_url_overrides), so New Tab
 * would otherwise miss early onboarding + control-strip shells.
 */

(function() {
  'use strict';

  // Idempotent: content-script inject + newtab <script> must not double-init.
  try {
    if (window.KEYPILOT_EARLY) return;
  } catch {
    // ignore
  }

  if (typeof window.KEYPILOT_DEBUG === 'undefined') {
    window.KEYPILOT_DEBUG = false;
  }
  function kpEarlyDebugLog(...args) {
    try {
      if (window.KEYPILOT_DEBUG) console.log.apply(console, args);
    } catch {}
  }
  try {
    const applyEarlyDebug = (raw) => {
      window.KEYPILOT_DEBUG = !!(raw && raw.debugLogging);
    };
    chrome.storage.sync.get('kp_settings_v1', (r) => {
      applyEarlyDebug(r && r.kp_settings_v1);
    });
    chrome.storage.local.get('kp_settings_v1', (r) => {
      if (window.KEYPILOT_DEBUG) return;
      applyEarlyDebug(r && r.kp_settings_v1);
    });
  } catch {}

  // Constants extracted from main extension for early injection
  const CURSOR_ID = 'kpv2-cursor';
  const STYLE_ID = 'kpv2-early-style';
  const FOCUS_GREEN_BRIGHT = 'rgba(0,128,0,0.95)';
  const EARLY_FOCUS_BLUE = 'rgba(33,150,243,0.95)';
  const EARLY_FOCUS_BLUE_SHADOW = 'rgba(33,150,243,0.35)';
  const EARLY_FOCUS_BLUE_SHADOW_BRIGHT = 'rgba(33,150,243,0.45)';
  const EARLY_FOCUS_BLUE_FILL = 'rgba(33,150,243,0.25)';
  const EARLY_FOCUS_GREEN = 'rgba(0,180,0,0.95)';
  const EARLY_FOCUS_GREEN_SHADOW = 'rgba(0,180,0,0.45)';
  const EARLY_FOCUS_GREEN_SHADOW_BRIGHT = 'rgba(0,180,0,0.5)';
  const EARLY_FOCUS_GREEN_FILL = 'rgba(46, 204, 113, 0.4)';
  const EARLY_HOVER_Z = 2147483020;
  const EARLY_HOVER_ID = 'kpv2-early-hover';
  const EARLY_CLICKABLE_SEL =
    'a[href], button, [role="button"], [role="link"], [role="menuitem"], [role="option"], [role="tab"], [role="checkbox"], [role="radio"], [role="switch"], summary, [onclick], input, select, textarea, label';
  const EARLY_TEXT_ENTRY_INPUT_TYPES = new Set([
    'text', 'search', 'url', 'email', 'tel', 'password', 'number',
    'date', 'datetime-local', 'month', 'week', 'time'
  ]);
  const KEYBOARD_HELP_STORAGE_KEY = 'keypilot_keyboard_help_visible';
  const ONBOARDING_ACTIVE_STORAGE_KEY = 'keypilot_onboarding_active';
  const ONBOARDING_PROGRESS_STORAGE_KEY = 'keypilot_onboarding_progress';
  const SETTINGS_STORAGE_KEY = 'kp_settings_v1';
  const KEYBOARD_LAYOUT_STORE_KEY = 'kp_keyboard_layout_store_v1';
  const KP_CHROME_LAYOUT_CACHE_KEY = 'kp_chrome_layout_v1';
  function peekCachedChromeLayout() {
    try {
      const raw = localStorage.getItem(KP_CHROME_LAYOUT_CACHE_KEY);
      if (!raw) return null;
      const o = JSON.parse(raw);
      return o && typeof o === 'object' && !Array.isArray(o) ? o : null;
    } catch {
      return null;
    }
  }
  function cacheEarlyChromeLayout(patch) {
    if (!patch || typeof patch !== 'object') return;
    try {
      const prev = peekCachedChromeLayout() || {};
      const next = { ...prev };
      if (patch.panelPositions && typeof patch.panelPositions === 'object') {
        next.panelPositions = { ...(prev.panelPositions || {}), ...patch.panelPositions };
      }
      if (patch.controlStrip && typeof patch.controlStrip === 'object') {
        next.controlStrip = { ...(prev.controlStrip || {}), ...patch.controlStrip };
      }
      if (typeof patch.keyboardHelpVisible === 'boolean') next.keyboardHelpVisible = patch.keyboardHelpVisible;
      if (typeof patch.keyboardReferenceCollapsed === 'boolean') {
        next.keyboardReferenceCollapsed = patch.keyboardReferenceCollapsed;
      }
      localStorage.setItem(KP_CHROME_LAYOUT_CACHE_KEY, JSON.stringify(next));
    } catch { /* ignore */ }
  }
  // Keep in sync with Z_INDEX in src/config/constants.js
  const Z_CONTROL_STRIP = 2147483025;
  const Z_ONBOARDING_PANEL = 2147483026;
  const CONTROL_STRIP_DEFAULT_TOP_PX = 16;
  const CONTROL_STRIP_DEFAULT_LEFT_PX = 16;
  const CONTROL_STRIP_HEIGHT_PX = 28;
  const CONTROL_STRIP_ONBOARDING_GAP_PX = 8;
  const CURSOR_MODE = {
    NO_CUSTOM_CURSORS: 'NO-CUSTOM-CURSORS',
    CUSTOM_CURSORS: 'CUSTOM-CURSORS'
  };
  // Mirror the main extension's cursor mechanism so handoff is seamless.
  // See: `extension/src/modules/cursor.js` + `extension/src/modules/style-manager.js`
  const CURSOR_VAR = '--kpv2-cursor';
  const CURSOR_HIDDEN_CLASS = 'kpv2-cursor-hidden';
  // KP_EARLY_INJECT_UI_START
  // NOTE: This block is auto-generated by `extension/build.js` from:
  // - `extension/src/config/constants.js` (KEYBINDINGS, Z_INDEX)
  // - `extension/src/config/keyboard-layouts.js` (built-in layout data)
  // - `extension/src/config/function-library.js` (slot paint: label + keyboardClass)
  // - `extension/src/ui/keybindings-ui-shared.js` (CSS + layout + style attr + control-strip icons)
  // - `extension/pages/onboarding.xml` (early onboarding model)
  // - `extension/src/ui/onboarding-shared.js` (shell / progress / checklist DOM)
  // Do not edit by hand.
  const Z_FLOATING_KEYBOARD_HELP = 2147483045;
  const Z_KEYBINDINGS_POPOVER = 2147483046;
  const KEYBINDINGS_UI_STYLE_ATTR = "data-kp-keybindings-ui-style";
  const DEFAULT_KEYBOARD_LAYOUT_ID = "browsing-right";
  const DEFAULT_KEYBOARD_LAYOUT_FAMILY_ID = "browsing";
  const KNOWN_BUILTIN_LAYOUT_IDS = ["browsing-right","browsing-left","basic-navigation-right","basic-navigation-left","click-history-right","click-history-left"];
  const EARLY_LAYOUT_FAMILY_OPTIONS = [["builtin:browsing","Browsing"],["builtin:click-history","Navigation"]];
  const KEYBOARD_LAYOUTS_BY_ID = {
  "browsing-right": [
    [
      {
        "type": "special",
        "text": "Tab",
        "className": "key key-tab"
      },
      {
        "type": "action",
        "id": "TAB_LEFT",
        "fallbackText": "Tab Left"
      },
      {
        "type": "action",
        "id": "TAB_RIGHT",
        "fallbackText": "Tab Right"
      },
      {
        "type": "action",
        "id": "PREVIEW_LINK_POPOVER",
        "fallbackText": "Preview Link"
      },
      {
        "type": "action",
        "id": "FORWARD",
        "fallbackText": "Go Forward"
      },
      {
        "type": "action",
        "id": "NEW_TAB",
        "fallbackText": "New Tab"
      },
      {
        "type": "action",
        "id": "RECTANGLE_HIGHLIGHT",
        "fallbackText": "Rectangle Select"
      },
      {
        "type": "action",
        "id": "COPY_HOVERED_URL",
        "fallbackText": "Copy URL"
      },
      {
        "type": "action",
        "id": "COPY_HOVERED_IMAGE",
        "fallbackText": "Copy Image"
      },
      {
        "type": "action",
        "id": "PAGE_MEDIA",
        "fallbackText": "Page Media"
      },
      {
        "type": "action",
        "id": "OPEN_POPOVER",
        "fallbackText": "Open Popover"
      },
      {
        "type": "key",
        "text": "["
      },
      {
        "type": "key",
        "text": "]"
      },
      {
        "type": "action",
        "id": "DELETE",
        "fallbackText": "Delete Mode",
        "className": "key key-backspace"
      }
    ],
    [
      {
        "type": "special",
        "text": "Caps",
        "className": "key key-caps"
      },
      {
        "type": "action",
        "id": "CLOSE_TAB",
        "fallbackText": "Close Tab"
      },
      {
        "type": "action",
        "id": "ROOT",
        "fallbackText": "Go to Site Root"
      },
      {
        "type": "action",
        "id": "BACK",
        "fallbackText": "Go Back"
      },
      {
        "type": "action",
        "id": "ACTIVATE",
        "fallbackText": "Click Element"
      },
      {
        "type": "action",
        "id": "ACTIVATE_NEW_TAB_BACKGROUND",
        "fallbackText": "Click New Tab Background"
      },
      {
        "type": "action",
        "id": "HIGHLIGHT",
        "fallbackText": "Text Select"
      },
      {
        "type": "action",
        "id": "TAB_HISTORY",
        "fallbackText": "History"
      },
      {
        "type": "action",
        "id": "TOGGLE_KEYBOARD_HELP",
        "fallbackText": "KB Reference"
      },
      {
        "type": "action",
        "id": "OMNIBOX",
        "fallbackText": "Omnibox"
      },
      {
        "type": "action",
        "id": "TOP_SITES",
        "fallbackText": "Top Sites"
      },
      {
        "type": "action",
        "id": "OPEN_SETTINGS_POPOVER",
        "fallbackText": "Settings"
      },
      {
        "type": "special",
        "text": "Enter",
        "className": "key key-enter"
      }
    ],
    [
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      },
      {
        "type": "action",
        "id": "PAGE_TOP",
        "fallbackText": "Scroll To Top"
      },
      {
        "type": "action",
        "id": "PAGE_BOTTOM",
        "fallbackText": "Scroll To Bottom"
      },
      {
        "type": "action",
        "id": "PAGE_UP_INSTANT",
        "fallbackText": "Page Up"
      },
      {
        "type": "action",
        "id": "PAGE_DOWN_INSTANT",
        "fallbackText": "Page Down"
      },
      {
        "type": "action",
        "id": "ACTIVATE_NEW_TAB",
        "fallbackText": "Click New Tab"
      },
      {
        "type": "action",
        "id": "SCROLL_LINE",
        "fallbackText": "Scroll Line"
      },
      {
        "type": "action",
        "id": "OPEN_MEDIA_LIBRARY",
        "fallbackText": "Media Library"
      },
      {
        "type": "key",
        "text": ","
      },
      {
        "type": "key",
        "text": "."
      },
      {
        "type": "key",
        "text": "/"
      },
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      }
    ]
  ],
  "browsing-left": [
    [
      {
        "type": "special",
        "text": "Tab",
        "className": "key key-tab"
      },
      {
        "type": "key",
        "text": "Q"
      },
      {
        "type": "action",
        "id": "PREVIEW_LINK_POPOVER",
        "fallbackText": "Preview Link"
      },
      {
        "type": "action",
        "id": "COPY_HOVERED_IMAGE",
        "fallbackText": "Copy Image"
      },
      {
        "type": "action",
        "id": "RECTANGLE_HIGHLIGHT",
        "fallbackText": "Rectangle Select"
      },
      {
        "type": "action",
        "id": "SCROLL_LINE",
        "fallbackText": "Scroll Line"
      },
      {
        "type": "action",
        "id": "NEW_TAB",
        "fallbackText": "New Tab"
      },
      {
        "type": "action",
        "id": "FORWARD",
        "fallbackText": "Go Forward"
      },
      {
        "type": "action",
        "id": "OPEN_POPOVER",
        "fallbackText": "Open Popover"
      },
      {
        "type": "action",
        "id": "TAB_RIGHT",
        "fallbackText": "Tab Right"
      },
      {
        "type": "action",
        "id": "TAB_LEFT",
        "fallbackText": "Tab Left"
      },
      {
        "type": "key",
        "text": "["
      },
      {
        "type": "key",
        "text": "]"
      },
      {
        "type": "action",
        "id": "DELETE",
        "fallbackText": "Delete Mode",
        "className": "key key-backspace"
      }
    ],
    [
      {
        "type": "special",
        "text": "Caps",
        "className": "key key-caps"
      },
      {
        "type": "action",
        "id": "TOP_SITES",
        "fallbackText": "Top Sites"
      },
      {
        "type": "action",
        "id": "OMNIBOX",
        "fallbackText": "Omnibox"
      },
      {
        "type": "action",
        "id": "TOGGLE_KEYBOARD_HELP",
        "fallbackText": "KB Reference"
      },
      {
        "type": "action",
        "id": "TAB_HISTORY",
        "fallbackText": "History"
      },
      {
        "type": "action",
        "id": "HIGHLIGHT",
        "fallbackText": "Text Select"
      },
      {
        "type": "action",
        "id": "ACTIVATE_NEW_TAB_BACKGROUND",
        "fallbackText": "Click New Tab Background"
      },
      {
        "type": "action",
        "id": "ACTIVATE",
        "fallbackText": "Click Element"
      },
      {
        "type": "action",
        "id": "BACK",
        "fallbackText": "Go Back"
      },
      {
        "type": "action",
        "id": "ROOT",
        "fallbackText": "Go to Site Root"
      },
      {
        "type": "action",
        "id": "CLOSE_TAB",
        "fallbackText": "Close Tab"
      },
      {
        "type": "action",
        "id": "OPEN_SETTINGS_POPOVER",
        "fallbackText": "Settings"
      },
      {
        "type": "special",
        "text": "Enter",
        "className": "key key-enter"
      }
    ],
    [
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      },
      {
        "type": "key",
        "text": "Z"
      },
      {
        "type": "key",
        "text": "X"
      },
      {
        "type": "key",
        "text": "C"
      },
      {
        "type": "key",
        "text": "V"
      },
      {
        "type": "action",
        "id": "PAGE_BOTTOM",
        "fallbackText": "Scroll To Bottom"
      },
      {
        "type": "action",
        "id": "ACTIVATE_NEW_TAB",
        "fallbackText": "Click New Tab"
      },
      {
        "type": "action",
        "id": "PAGE_DOWN_INSTANT",
        "fallbackText": "Page Down"
      },
      {
        "type": "action",
        "id": "PAGE_UP_INSTANT",
        "fallbackText": "Page Up"
      },
      {
        "type": "key",
        "text": "."
      },
      {
        "type": "action",
        "id": "PAGE_TOP",
        "fallbackText": "Scroll To Top"
      },
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      }
    ]
  ],
  "basic-navigation-right": [
    [
      {
        "type": "special",
        "text": "Tab",
        "className": "key key-tab"
      },
      {
        "type": "action",
        "id": "TAB_LEFT",
        "fallbackText": "Tab Left"
      },
      {
        "type": "action",
        "id": "TAB_RIGHT",
        "fallbackText": "Tab Right"
      },
      {
        "type": "key",
        "text": "E"
      },
      {
        "type": "action",
        "id": "FORWARD",
        "fallbackText": "Go Forward"
      },
      {
        "type": "key",
        "text": "T"
      },
      {
        "type": "key",
        "text": "Y"
      },
      {
        "type": "key",
        "text": "U"
      },
      {
        "type": "key",
        "text": "I"
      },
      {
        "type": "key",
        "text": "O"
      },
      {
        "type": "key",
        "text": "P"
      },
      {
        "type": "key",
        "text": "["
      },
      {
        "type": "key",
        "text": "]"
      },
      {
        "type": "special",
        "text": "Backspace",
        "className": "key key-backspace"
      }
    ],
    [
      {
        "type": "special",
        "text": "Caps",
        "className": "key key-caps"
      },
      {
        "type": "key",
        "text": "A"
      },
      {
        "type": "action",
        "id": "ROOT",
        "fallbackText": "Go to Site Root"
      },
      {
        "type": "action",
        "id": "BACK",
        "fallbackText": "Go Back"
      },
      {
        "type": "action",
        "id": "ACTIVATE",
        "fallbackText": "Click Element"
      },
      {
        "type": "key",
        "text": "G"
      },
      {
        "type": "key",
        "text": "H"
      },
      {
        "type": "key",
        "text": "J"
      },
      {
        "type": "action",
        "id": "TOGGLE_KEYBOARD_HELP",
        "fallbackText": "KB Reference"
      },
      {
        "type": "key",
        "text": "L"
      },
      {
        "type": "key",
        "text": ";"
      },
      {
        "type": "action",
        "id": "OPEN_SETTINGS_POPOVER",
        "fallbackText": "Settings"
      },
      {
        "type": "special",
        "text": "Enter",
        "className": "key key-enter"
      }
    ],
    [
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      },
      {
        "type": "action",
        "id": "PAGE_TOP",
        "fallbackText": "Scroll To Top"
      },
      {
        "type": "action",
        "id": "PAGE_BOTTOM",
        "fallbackText": "Scroll To Bottom"
      },
      {
        "type": "action",
        "id": "PAGE_UP_INSTANT",
        "fallbackText": "Page Up"
      },
      {
        "type": "action",
        "id": "PAGE_DOWN_INSTANT",
        "fallbackText": "Page Down"
      },
      {
        "type": "key",
        "text": "B"
      },
      {
        "type": "key",
        "text": "N"
      },
      {
        "type": "key",
        "text": "M"
      },
      {
        "type": "key",
        "text": ","
      },
      {
        "type": "key",
        "text": "."
      },
      {
        "type": "key",
        "text": "/"
      },
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      }
    ]
  ],
  "basic-navigation-left": [
    [
      {
        "type": "special",
        "text": "Tab",
        "className": "key key-tab"
      },
      {
        "type": "key",
        "text": "Q"
      },
      {
        "type": "key",
        "text": "W"
      },
      {
        "type": "key",
        "text": "E"
      },
      {
        "type": "key",
        "text": "R"
      },
      {
        "type": "key",
        "text": "T"
      },
      {
        "type": "key",
        "text": "Y"
      },
      {
        "type": "action",
        "id": "FORWARD",
        "fallbackText": "Go Forward"
      },
      {
        "type": "key",
        "text": "I"
      },
      {
        "type": "action",
        "id": "TAB_RIGHT",
        "fallbackText": "Tab Right"
      },
      {
        "type": "action",
        "id": "TAB_LEFT",
        "fallbackText": "Tab Left"
      },
      {
        "type": "key",
        "text": "["
      },
      {
        "type": "key",
        "text": "]"
      },
      {
        "type": "special",
        "text": "Backspace",
        "className": "key key-backspace"
      }
    ],
    [
      {
        "type": "special",
        "text": "Caps",
        "className": "key key-caps"
      },
      {
        "type": "key",
        "text": "A"
      },
      {
        "type": "key",
        "text": "S"
      },
      {
        "type": "action",
        "id": "TOGGLE_KEYBOARD_HELP",
        "fallbackText": "KB Reference"
      },
      {
        "type": "key",
        "text": "F"
      },
      {
        "type": "key",
        "text": "G"
      },
      {
        "type": "key",
        "text": "H"
      },
      {
        "type": "action",
        "id": "ACTIVATE",
        "fallbackText": "Click Element"
      },
      {
        "type": "action",
        "id": "BACK",
        "fallbackText": "Go Back"
      },
      {
        "type": "action",
        "id": "ROOT",
        "fallbackText": "Go to Site Root"
      },
      {
        "type": "key",
        "text": ";"
      },
      {
        "type": "action",
        "id": "OPEN_SETTINGS_POPOVER",
        "fallbackText": "Settings"
      },
      {
        "type": "special",
        "text": "Enter",
        "className": "key key-enter"
      }
    ],
    [
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      },
      {
        "type": "key",
        "text": "Z"
      },
      {
        "type": "key",
        "text": "X"
      },
      {
        "type": "key",
        "text": "C"
      },
      {
        "type": "key",
        "text": "V"
      },
      {
        "type": "action",
        "id": "PAGE_BOTTOM",
        "fallbackText": "Scroll To Bottom"
      },
      {
        "type": "key",
        "text": "N"
      },
      {
        "type": "action",
        "id": "PAGE_DOWN_INSTANT",
        "fallbackText": "Page Down"
      },
      {
        "type": "action",
        "id": "PAGE_UP_INSTANT",
        "fallbackText": "Page Up"
      },
      {
        "type": "key",
        "text": "."
      },
      {
        "type": "action",
        "id": "PAGE_TOP",
        "fallbackText": "Scroll To Top"
      },
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      }
    ]
  ],
  "click-history-right": [
    [
      {
        "type": "special",
        "text": "Tab",
        "className": "key key-tab"
      },
      {
        "type": "key",
        "text": "Q"
      },
      {
        "type": "key",
        "text": "W"
      },
      {
        "type": "key",
        "text": "E"
      },
      {
        "type": "action",
        "id": "FORWARD",
        "fallbackText": "Go Forward"
      },
      {
        "type": "key",
        "text": "T"
      },
      {
        "type": "key",
        "text": "Y"
      },
      {
        "type": "key",
        "text": "U"
      },
      {
        "type": "key",
        "text": "I"
      },
      {
        "type": "key",
        "text": "O"
      },
      {
        "type": "key",
        "text": "P"
      },
      {
        "type": "key",
        "text": "["
      },
      {
        "type": "key",
        "text": "]"
      },
      {
        "type": "special",
        "text": "Backspace",
        "className": "key key-backspace"
      }
    ],
    [
      {
        "type": "special",
        "text": "Caps",
        "className": "key key-caps"
      },
      {
        "type": "key",
        "text": "A"
      },
      {
        "type": "action",
        "id": "ROOT",
        "fallbackText": "Go to Site Root"
      },
      {
        "type": "action",
        "id": "BACK",
        "fallbackText": "Go Back"
      },
      {
        "type": "action",
        "id": "ACTIVATE",
        "fallbackText": "Click Element"
      },
      {
        "type": "key",
        "text": "G"
      },
      {
        "type": "key",
        "text": "H"
      },
      {
        "type": "key",
        "text": "J"
      },
      {
        "type": "action",
        "id": "TOGGLE_KEYBOARD_HELP",
        "fallbackText": "KB Reference"
      },
      {
        "type": "key",
        "text": "L"
      },
      {
        "type": "key",
        "text": ";"
      },
      {
        "type": "action",
        "id": "OPEN_SETTINGS_POPOVER",
        "fallbackText": "Settings"
      },
      {
        "type": "special",
        "text": "Enter",
        "className": "key key-enter"
      }
    ],
    [
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      },
      {
        "type": "key",
        "text": "Z"
      },
      {
        "type": "key",
        "text": "X"
      },
      {
        "type": "key",
        "text": "C"
      },
      {
        "type": "key",
        "text": "V"
      },
      {
        "type": "key",
        "text": "B"
      },
      {
        "type": "key",
        "text": "N"
      },
      {
        "type": "key",
        "text": "M"
      },
      {
        "type": "key",
        "text": ","
      },
      {
        "type": "key",
        "text": "."
      },
      {
        "type": "key",
        "text": "/"
      },
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      }
    ]
  ],
  "click-history-left": [
    [
      {
        "type": "special",
        "text": "Tab",
        "className": "key key-tab"
      },
      {
        "type": "key",
        "text": "Q"
      },
      {
        "type": "key",
        "text": "W"
      },
      {
        "type": "key",
        "text": "E"
      },
      {
        "type": "key",
        "text": "R"
      },
      {
        "type": "key",
        "text": "T"
      },
      {
        "type": "key",
        "text": "Y"
      },
      {
        "type": "action",
        "id": "FORWARD",
        "fallbackText": "Go Forward"
      },
      {
        "type": "key",
        "text": "I"
      },
      {
        "type": "key",
        "text": "O"
      },
      {
        "type": "key",
        "text": "P"
      },
      {
        "type": "key",
        "text": "["
      },
      {
        "type": "key",
        "text": "]"
      },
      {
        "type": "special",
        "text": "Backspace",
        "className": "key key-backspace"
      }
    ],
    [
      {
        "type": "special",
        "text": "Caps",
        "className": "key key-caps"
      },
      {
        "type": "key",
        "text": "A"
      },
      {
        "type": "key",
        "text": "S"
      },
      {
        "type": "action",
        "id": "TOGGLE_KEYBOARD_HELP",
        "fallbackText": "KB Reference"
      },
      {
        "type": "key",
        "text": "F"
      },
      {
        "type": "key",
        "text": "G"
      },
      {
        "type": "key",
        "text": "H"
      },
      {
        "type": "action",
        "id": "ACTIVATE",
        "fallbackText": "Click Element"
      },
      {
        "type": "action",
        "id": "BACK",
        "fallbackText": "Go Back"
      },
      {
        "type": "action",
        "id": "ROOT",
        "fallbackText": "Go to Site Root"
      },
      {
        "type": "key",
        "text": ";"
      },
      {
        "type": "action",
        "id": "OPEN_SETTINGS_POPOVER",
        "fallbackText": "Settings"
      },
      {
        "type": "special",
        "text": "Enter",
        "className": "key key-enter"
      }
    ],
    [
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      },
      {
        "type": "key",
        "text": "Z"
      },
      {
        "type": "key",
        "text": "X"
      },
      {
        "type": "key",
        "text": "C"
      },
      {
        "type": "key",
        "text": "V"
      },
      {
        "type": "key",
        "text": "B"
      },
      {
        "type": "key",
        "text": "N"
      },
      {
        "type": "key",
        "text": "M"
      },
      {
        "type": "key",
        "text": ","
      },
      {
        "type": "key",
        "text": "."
      },
      {
        "type": "key",
        "text": "/"
      },
      {
        "type": "special",
        "text": "Shift",
        "className": "key key-shift"
      }
    ]
  ]
};
  const EARLY_KEYBINDINGS_BY_ID = {
  "browsing-right": {
    "TAB_LEFT": {
      "label": "Tab Left",
      "description": "Switch to the previous tab",
      "keyLabel": "Q",
      "displayKey": "Q",
      "keyboardClass": "key-gray"
    },
    "TAB_RIGHT": {
      "label": "Tab Right",
      "description": "Switch to the next tab",
      "keyLabel": "W",
      "displayKey": "W",
      "keyboardClass": "key-gray"
    },
    "PREVIEW_LINK_POPOVER": {
      "label": "Preview Link",
      "description": "Preview link in a popup",
      "keyLabel": "E",
      "displayKey": "E",
      "keyboardClass": "key-preview-popover"
    },
    "FORWARD": {
      "label": "Go Forward",
      "description": "Browser history forward",
      "keyLabel": "R",
      "displayKey": "R",
      "keyboardClass": "key-forward"
    },
    "NEW_TAB": {
      "label": "New Tab",
      "description": "Open a blank new tab",
      "keyLabel": "T",
      "displayKey": "T",
      "keyboardClass": "key-gray"
    },
    "RECTANGLE_HIGHLIGHT": {
      "label": "Element Select",
      "description": "Rectangle or cumulative element pick",
      "keyLabel": "Y",
      "displayKey": "Y",
      "keyboardClass": "key-rect-highlight"
    },
    "COPY_HOVERED_URL": {
      "label": "Copy URL",
      "description": "Copy hovered link URL",
      "keyLabel": "U",
      "displayKey": "U",
      "keyboardClass": null
    },
    "COPY_HOVERED_IMAGE": {
      "label": "Copy Image",
      "description": "Copy hovered image",
      "keyLabel": "I",
      "displayKey": "I",
      "keyboardClass": null
    },
    "PAGE_MEDIA": {
      "label": "Page Media",
      "description": "Browse media found on this page",
      "keyLabel": "O",
      "displayKey": "O",
      "keyboardClass": null
    },
    "OPEN_POPOVER": {
      "label": "Open Popover",
      "description": "Open link in a popup window",
      "keyLabel": "P",
      "displayKey": "P",
      "keyboardClass": "key-open-popover"
    },
    "DELETE": {
      "label": "Delete Mode",
      "description": "Hide elements under the cursor",
      "keyLabel": "Backspace",
      "displayKey": "Backspace",
      "keyboardClass": "key-delete"
    },
    "CLOSE_TAB": {
      "label": "Close Tab",
      "description": "Close the current tab",
      "keyLabel": "A",
      "displayKey": "A",
      "keyboardClass": "key-close-tab"
    },
    "ROOT": {
      "label": "Go to Site Root",
      "description": "Navigate to the site origin",
      "keyLabel": "S",
      "displayKey": "S",
      "keyboardClass": null
    },
    "BACK": {
      "label": "Go Back",
      "description": "Browser history back",
      "keyLabel": "D",
      "displayKey": "D",
      "keyboardClass": "key-back"
    },
    "ACTIVATE": {
      "label": "Click Element",
      "description": "Click the hovered element",
      "keyLabel": "F",
      "displayKey": "F",
      "keyboardClass": "key-activate"
    },
    "ACTIVATE_NEW_TAB_BACKGROUND": {
      "label": "Click New Tab Background",
      "description": "Open link in a new background tab",
      "keyLabel": "G",
      "displayKey": "G",
      "keyboardClass": "key-activate-new-over"
    },
    "HIGHLIGHT": {
      "label": "Text Select",
      "description": "Select text and copy rich text",
      "keyLabel": "H",
      "displayKey": "H",
      "keyboardClass": "key-highlight"
    },
    "TAB_HISTORY": {
      "label": "Tab History",
      "description": "Browse this tab’s history",
      "keyLabel": "J",
      "displayKey": "J",
      "keyboardClass": "key-gray"
    },
    "TOGGLE_KEYBOARD_HELP": {
      "label": "KB Reference",
      "description": "Show or hide the keyboard map",
      "keyLabel": "K",
      "displayKey": "K",
      "keyboardClass": "key-purple"
    },
    "OMNIBOX": {
      "label": "Omnibox",
      "description": "Address bar overlay",
      "keyLabel": "L",
      "displayKey": "L",
      "keyboardClass": "key-orange"
    },
    "TOP_SITES": {
      "label": "Top Sites",
      "description": "Toolbar, visits, and bookmarks",
      "keyLabel": ";",
      "displayKey": ";",
      "keyboardClass": "key-launcher-orange"
    },
    "OPEN_SETTINGS_POPOVER": {
      "label": "Settings",
      "description": "Open KeyPilot Settings",
      "keyLabel": "'",
      "displayKey": "'",
      "keyboardClass": "key-settings-dark"
    },
    "PAGE_TOP": {
      "label": "Scroll To Top",
      "description": "Jump to top of scroll target",
      "keyLabel": "Z",
      "displayKey": "Z",
      "keyboardClass": "key-scroll"
    },
    "PAGE_BOTTOM": {
      "label": "Scroll To Bottom",
      "description": "Jump to bottom of scroll target",
      "keyLabel": "X",
      "displayKey": "X",
      "keyboardClass": "key-scroll"
    },
    "PAGE_UP_INSTANT": {
      "label": "Page Up",
      "description": "Jump one page up instantly",
      "keyLabel": "C",
      "displayKey": "C",
      "keyboardClass": "key-scroll"
    },
    "PAGE_DOWN_INSTANT": {
      "label": "Page Down",
      "description": "Jump one page down instantly",
      "keyLabel": "V",
      "displayKey": "V",
      "keyboardClass": "key-scroll"
    },
    "ACTIVATE_NEW_TAB": {
      "label": "Click New Tab",
      "description": "Open link in a new foreground tab",
      "keyLabel": "B",
      "displayKey": "B",
      "keyboardClass": "key-activate-new"
    },
    "SCROLL_LINE": {
      "label": "Scroll Line",
      "description": "Origin-based continuous scroll",
      "keyLabel": "N",
      "displayKey": "N",
      "keyboardClass": "key-scroll"
    },
    "OPEN_MEDIA_LIBRARY": {
      "label": "Media Library",
      "description": "Open saved Media Library",
      "keyLabel": "M",
      "displayKey": "M",
      "keyboardClass": null
    },
    "CANCEL": {
      "label": "Exit Focus",
      "description": "Leave modes and overlays",
      "keyLabel": "Esc",
      "displayKey": "Esc",
      "keyboardClass": null
    }
  },
  "browsing-left": {
    "TAB_LEFT": {
      "label": "Tab Left",
      "description": "Switch to the previous tab",
      "keyLabel": "P",
      "displayKey": "P",
      "keyboardClass": "key-gray"
    },
    "TAB_RIGHT": {
      "label": "Tab Right",
      "description": "Switch to the next tab",
      "keyLabel": "O",
      "displayKey": "O",
      "keyboardClass": "key-gray"
    },
    "PREVIEW_LINK_POPOVER": {
      "label": "Preview Link",
      "description": "Preview link in a popup",
      "keyLabel": "W",
      "displayKey": "W",
      "keyboardClass": "key-preview-popover"
    },
    "FORWARD": {
      "label": "Go Forward",
      "description": "Browser history forward",
      "keyLabel": "U",
      "displayKey": "U",
      "keyboardClass": "key-forward"
    },
    "NEW_TAB": {
      "label": "New Tab",
      "description": "Open a blank new tab",
      "keyLabel": "Y",
      "displayKey": "Y",
      "keyboardClass": "key-gray"
    },
    "RECTANGLE_HIGHLIGHT": {
      "label": "Element Select",
      "description": "Rectangle or cumulative element pick",
      "keyLabel": "R",
      "displayKey": "R",
      "keyboardClass": "key-rect-highlight"
    },
    "COPY_HOVERED_IMAGE": {
      "label": "Copy Image",
      "description": "Copy hovered image",
      "keyLabel": "E",
      "displayKey": "E",
      "keyboardClass": null
    },
    "OPEN_POPOVER": {
      "label": "Open Popover",
      "description": "Open link in a popup window",
      "keyLabel": "I",
      "displayKey": "I",
      "keyboardClass": "key-open-popover"
    },
    "DELETE": {
      "label": "Delete Mode",
      "description": "Hide elements under the cursor",
      "keyLabel": "Backspace",
      "displayKey": "Backspace",
      "keyboardClass": "key-delete"
    },
    "CLOSE_TAB": {
      "label": "Close Tab",
      "description": "Close the current tab",
      "keyLabel": ";",
      "displayKey": ";",
      "keyboardClass": "key-close-tab"
    },
    "ROOT": {
      "label": "Go to Site Root",
      "description": "Navigate to the site origin",
      "keyLabel": "L",
      "displayKey": "L",
      "keyboardClass": null
    },
    "BACK": {
      "label": "Go Back",
      "description": "Browser history back",
      "keyLabel": "K",
      "displayKey": "K",
      "keyboardClass": "key-back"
    },
    "ACTIVATE": {
      "label": "Click Element",
      "description": "Click the hovered element",
      "keyLabel": "J",
      "displayKey": "J",
      "keyboardClass": "key-activate"
    },
    "ACTIVATE_NEW_TAB_BACKGROUND": {
      "label": "Click New Tab Background",
      "description": "Open link in a new background tab",
      "keyLabel": "H",
      "displayKey": "H",
      "keyboardClass": "key-activate-new-over"
    },
    "HIGHLIGHT": {
      "label": "Text Select",
      "description": "Select text and copy rich text",
      "keyLabel": "G",
      "displayKey": "G",
      "keyboardClass": "key-highlight"
    },
    "TAB_HISTORY": {
      "label": "Tab History",
      "description": "Browse this tab’s history",
      "keyLabel": "F",
      "displayKey": "F",
      "keyboardClass": "key-gray"
    },
    "TOGGLE_KEYBOARD_HELP": {
      "label": "KB Reference",
      "description": "Show or hide the keyboard map",
      "keyLabel": "D",
      "displayKey": "D",
      "keyboardClass": "key-purple"
    },
    "OMNIBOX": {
      "label": "Omnibox",
      "description": "Address bar overlay",
      "keyLabel": "S",
      "displayKey": "S",
      "keyboardClass": "key-orange"
    },
    "TOP_SITES": {
      "label": "Top Sites",
      "description": "Toolbar, visits, and bookmarks",
      "keyLabel": "A",
      "displayKey": "A",
      "keyboardClass": "key-launcher-orange"
    },
    "OPEN_SETTINGS_POPOVER": {
      "label": "Settings",
      "description": "Open KeyPilot Settings",
      "keyLabel": "'",
      "displayKey": "'",
      "keyboardClass": "key-settings-dark"
    },
    "PAGE_TOP": {
      "label": "Scroll To Top",
      "description": "Jump to top of scroll target",
      "keyLabel": "/",
      "displayKey": "/",
      "keyboardClass": "key-scroll"
    },
    "PAGE_BOTTOM": {
      "label": "Scroll To Bottom",
      "description": "Jump to bottom of scroll target",
      "keyLabel": "B",
      "displayKey": "B",
      "keyboardClass": "key-scroll"
    },
    "PAGE_UP_INSTANT": {
      "label": "Page Up",
      "description": "Jump one page up instantly",
      "keyLabel": ",",
      "displayKey": ",",
      "keyboardClass": "key-scroll"
    },
    "PAGE_DOWN_INSTANT": {
      "label": "Page Down",
      "description": "Jump one page down instantly",
      "keyLabel": "M",
      "displayKey": "M",
      "keyboardClass": "key-scroll"
    },
    "ACTIVATE_NEW_TAB": {
      "label": "Click New Tab",
      "description": "Open link in a new foreground tab",
      "keyLabel": "N",
      "displayKey": "N",
      "keyboardClass": "key-activate-new"
    },
    "SCROLL_LINE": {
      "label": "Scroll Line",
      "description": "Origin-based continuous scroll",
      "keyLabel": "T",
      "displayKey": "T",
      "keyboardClass": "key-scroll"
    },
    "CANCEL": {
      "label": "Exit Focus",
      "description": "Leave modes and overlays",
      "keyLabel": "Esc",
      "displayKey": "Esc",
      "keyboardClass": null
    }
  },
  "basic-navigation-right": {
    "TAB_LEFT": {
      "label": "Tab Left",
      "description": "Switch to the previous tab",
      "keyLabel": "Q",
      "displayKey": "Q",
      "keyboardClass": "key-gray"
    },
    "TAB_RIGHT": {
      "label": "Tab Right",
      "description": "Switch to the next tab",
      "keyLabel": "W",
      "displayKey": "W",
      "keyboardClass": "key-gray"
    },
    "FORWARD": {
      "label": "Go Forward",
      "description": "Browser history forward",
      "keyLabel": "R",
      "displayKey": "R",
      "keyboardClass": "key-forward"
    },
    "ROOT": {
      "label": "Go to Site Root",
      "description": "Navigate to the site origin",
      "keyLabel": "S",
      "displayKey": "S",
      "keyboardClass": null
    },
    "BACK": {
      "label": "Go Back",
      "description": "Browser history back",
      "keyLabel": "D",
      "displayKey": "D",
      "keyboardClass": "key-back"
    },
    "ACTIVATE": {
      "label": "Click Element",
      "description": "Click the hovered element",
      "keyLabel": "F",
      "displayKey": "F",
      "keyboardClass": "key-activate"
    },
    "TOGGLE_KEYBOARD_HELP": {
      "label": "KB Reference",
      "description": "Show or hide the keyboard map",
      "keyLabel": "K",
      "displayKey": "K",
      "keyboardClass": "key-purple"
    },
    "OPEN_SETTINGS_POPOVER": {
      "label": "Settings",
      "description": "Open KeyPilot Settings",
      "keyLabel": "'",
      "displayKey": "'",
      "keyboardClass": "key-settings-dark"
    },
    "PAGE_TOP": {
      "label": "Scroll To Top",
      "description": "Jump to top of scroll target",
      "keyLabel": "Z",
      "displayKey": "Z",
      "keyboardClass": "key-scroll"
    },
    "PAGE_BOTTOM": {
      "label": "Scroll To Bottom",
      "description": "Jump to bottom of scroll target",
      "keyLabel": "X",
      "displayKey": "X",
      "keyboardClass": "key-scroll"
    },
    "PAGE_UP_INSTANT": {
      "label": "Page Up",
      "description": "Jump one page up instantly",
      "keyLabel": "C",
      "displayKey": "C",
      "keyboardClass": "key-scroll"
    },
    "PAGE_DOWN_INSTANT": {
      "label": "Page Down",
      "description": "Jump one page down instantly",
      "keyLabel": "V",
      "displayKey": "V",
      "keyboardClass": "key-scroll"
    },
    "CANCEL": {
      "label": "Exit Focus",
      "description": "Leave modes and overlays",
      "keyLabel": "Esc",
      "displayKey": "Esc",
      "keyboardClass": null
    }
  },
  "basic-navigation-left": {
    "TAB_LEFT": {
      "label": "Tab Left",
      "description": "Switch to the previous tab",
      "keyLabel": "P",
      "displayKey": "P",
      "keyboardClass": "key-gray"
    },
    "TAB_RIGHT": {
      "label": "Tab Right",
      "description": "Switch to the next tab",
      "keyLabel": "O",
      "displayKey": "O",
      "keyboardClass": "key-gray"
    },
    "FORWARD": {
      "label": "Go Forward",
      "description": "Browser history forward",
      "keyLabel": "U",
      "displayKey": "U",
      "keyboardClass": "key-forward"
    },
    "ROOT": {
      "label": "Go to Site Root",
      "description": "Navigate to the site origin",
      "keyLabel": "L",
      "displayKey": "L",
      "keyboardClass": null
    },
    "BACK": {
      "label": "Go Back",
      "description": "Browser history back",
      "keyLabel": "K",
      "displayKey": "K",
      "keyboardClass": "key-back"
    },
    "ACTIVATE": {
      "label": "Click Element",
      "description": "Click the hovered element",
      "keyLabel": "J",
      "displayKey": "J",
      "keyboardClass": "key-activate"
    },
    "TOGGLE_KEYBOARD_HELP": {
      "label": "KB Reference",
      "description": "Show or hide the keyboard map",
      "keyLabel": "D",
      "displayKey": "D",
      "keyboardClass": "key-purple"
    },
    "OPEN_SETTINGS_POPOVER": {
      "label": "Settings",
      "description": "Open KeyPilot Settings",
      "keyLabel": "'",
      "displayKey": "'",
      "keyboardClass": "key-settings-dark"
    },
    "PAGE_TOP": {
      "label": "Scroll To Top",
      "description": "Jump to top of scroll target",
      "keyLabel": "/",
      "displayKey": "/",
      "keyboardClass": "key-scroll"
    },
    "PAGE_BOTTOM": {
      "label": "Scroll To Bottom",
      "description": "Jump to bottom of scroll target",
      "keyLabel": "B",
      "displayKey": "B",
      "keyboardClass": "key-scroll"
    },
    "PAGE_UP_INSTANT": {
      "label": "Page Up",
      "description": "Jump one page up instantly",
      "keyLabel": ",",
      "displayKey": ",",
      "keyboardClass": "key-scroll"
    },
    "PAGE_DOWN_INSTANT": {
      "label": "Page Down",
      "description": "Jump one page down instantly",
      "keyLabel": "M",
      "displayKey": "M",
      "keyboardClass": "key-scroll"
    },
    "CANCEL": {
      "label": "Exit Focus",
      "description": "Leave modes and overlays",
      "keyLabel": "Esc",
      "displayKey": "Esc",
      "keyboardClass": null
    }
  },
  "click-history-right": {
    "FORWARD": {
      "label": "Go Forward",
      "description": "Browser history forward",
      "keyLabel": "R",
      "displayKey": "R",
      "keyboardClass": "key-forward"
    },
    "ROOT": {
      "label": "Go to Site Root",
      "description": "Navigate to the site origin",
      "keyLabel": "S",
      "displayKey": "S",
      "keyboardClass": null
    },
    "BACK": {
      "label": "Go Back",
      "description": "Browser history back",
      "keyLabel": "D",
      "displayKey": "D",
      "keyboardClass": "key-back"
    },
    "ACTIVATE": {
      "label": "Click Element",
      "description": "Click the hovered element",
      "keyLabel": "F",
      "displayKey": "F",
      "keyboardClass": "key-activate"
    },
    "TOGGLE_KEYBOARD_HELP": {
      "label": "KB Reference",
      "description": "Show or hide the keyboard map",
      "keyLabel": "K",
      "displayKey": "K",
      "keyboardClass": "key-purple"
    },
    "OPEN_SETTINGS_POPOVER": {
      "label": "Settings",
      "description": "Open KeyPilot Settings",
      "keyLabel": "'",
      "displayKey": "'",
      "keyboardClass": "key-settings-dark"
    },
    "CANCEL": {
      "label": "Exit Focus",
      "description": "Leave modes and overlays",
      "keyLabel": "Esc",
      "displayKey": "Esc",
      "keyboardClass": null
    }
  },
  "click-history-left": {
    "FORWARD": {
      "label": "Go Forward",
      "description": "Browser history forward",
      "keyLabel": "U",
      "displayKey": "U",
      "keyboardClass": "key-forward"
    },
    "ROOT": {
      "label": "Go to Site Root",
      "description": "Navigate to the site origin",
      "keyLabel": "L",
      "displayKey": "L",
      "keyboardClass": null
    },
    "BACK": {
      "label": "Go Back",
      "description": "Browser history back",
      "keyLabel": "K",
      "displayKey": "K",
      "keyboardClass": "key-back"
    },
    "ACTIVATE": {
      "label": "Click Element",
      "description": "Click the hovered element",
      "keyLabel": "J",
      "displayKey": "J",
      "keyboardClass": "key-activate"
    },
    "TOGGLE_KEYBOARD_HELP": {
      "label": "KB Reference",
      "description": "Show or hide the keyboard map",
      "keyLabel": "D",
      "displayKey": "D",
      "keyboardClass": "key-purple"
    },
    "OPEN_SETTINGS_POPOVER": {
      "label": "Settings",
      "description": "Open KeyPilot Settings",
      "keyLabel": "'",
      "displayKey": "'",
      "keyboardClass": "key-settings-dark"
    },
    "CANCEL": {
      "label": "Exit Focus",
      "description": "Leave modes and overlays",
      "keyLabel": "Esc",
      "displayKey": "Esc",
      "keyboardClass": null
    }
  }
};
  const KEYBINDINGS_KEYBOARD_LAYOUT = [
  [
    {
      "type": "special",
      "text": "Tab",
      "className": "key key-tab"
    },
    {
      "type": "action",
      "id": "TAB_LEFT",
      "fallbackText": "Tab Left"
    },
    {
      "type": "action",
      "id": "TAB_RIGHT",
      "fallbackText": "Tab Right"
    },
    {
      "type": "action",
      "id": "PREVIEW_LINK_POPOVER",
      "fallbackText": "Preview Link"
    },
    {
      "type": "action",
      "id": "FORWARD",
      "fallbackText": "Go Forward"
    },
    {
      "type": "action",
      "id": "NEW_TAB",
      "fallbackText": "New Tab"
    },
    {
      "type": "action",
      "id": "RECTANGLE_HIGHLIGHT",
      "fallbackText": "Rectangle Select"
    },
    {
      "type": "action",
      "id": "COPY_HOVERED_URL",
      "fallbackText": "Copy URL"
    },
    {
      "type": "action",
      "id": "COPY_HOVERED_IMAGE",
      "fallbackText": "Copy Image"
    },
    {
      "type": "action",
      "id": "PAGE_MEDIA",
      "fallbackText": "Page Media"
    },
    {
      "type": "action",
      "id": "OPEN_POPOVER",
      "fallbackText": "Open Popover"
    },
    {
      "type": "key",
      "text": "["
    },
    {
      "type": "key",
      "text": "]"
    },
    {
      "type": "action",
      "id": "DELETE",
      "fallbackText": "Delete Mode",
      "className": "key key-backspace"
    }
  ],
  [
    {
      "type": "special",
      "text": "Caps",
      "className": "key key-caps"
    },
    {
      "type": "action",
      "id": "CLOSE_TAB",
      "fallbackText": "Close Tab"
    },
    {
      "type": "action",
      "id": "ROOT",
      "fallbackText": "Go to Site Root"
    },
    {
      "type": "action",
      "id": "BACK",
      "fallbackText": "Go Back"
    },
    {
      "type": "action",
      "id": "ACTIVATE",
      "fallbackText": "Click Element"
    },
    {
      "type": "action",
      "id": "ACTIVATE_NEW_TAB_BACKGROUND",
      "fallbackText": "Click New Tab Background"
    },
    {
      "type": "action",
      "id": "HIGHLIGHT",
      "fallbackText": "Text Select"
    },
    {
      "type": "action",
      "id": "TAB_HISTORY",
      "fallbackText": "History"
    },
    {
      "type": "action",
      "id": "TOGGLE_KEYBOARD_HELP",
      "fallbackText": "KB Reference"
    },
    {
      "type": "action",
      "id": "OMNIBOX",
      "fallbackText": "Omnibox"
    },
    {
      "type": "action",
      "id": "TOP_SITES",
      "fallbackText": "Top Sites"
    },
    {
      "type": "action",
      "id": "OPEN_SETTINGS_POPOVER",
      "fallbackText": "Settings"
    },
    {
      "type": "special",
      "text": "Enter",
      "className": "key key-enter"
    }
  ],
  [
    {
      "type": "special",
      "text": "Shift",
      "className": "key key-shift"
    },
    {
      "type": "action",
      "id": "PAGE_TOP",
      "fallbackText": "Scroll To Top"
    },
    {
      "type": "action",
      "id": "PAGE_BOTTOM",
      "fallbackText": "Scroll To Bottom"
    },
    {
      "type": "action",
      "id": "PAGE_UP_INSTANT",
      "fallbackText": "Page Up"
    },
    {
      "type": "action",
      "id": "PAGE_DOWN_INSTANT",
      "fallbackText": "Page Down"
    },
    {
      "type": "action",
      "id": "ACTIVATE_NEW_TAB",
      "fallbackText": "Click New Tab"
    },
    {
      "type": "action",
      "id": "SCROLL_LINE",
      "fallbackText": "Scroll Line"
    },
    {
      "type": "action",
      "id": "OPEN_MEDIA_LIBRARY",
      "fallbackText": "Media Library"
    },
    {
      "type": "key",
      "text": ","
    },
    {
      "type": "key",
      "text": "."
    },
    {
      "type": "key",
      "text": "/"
    },
    {
      "type": "special",
      "text": "Shift",
      "className": "key key-shift"
    }
  ]
];
  const EARLY_KEYBINDINGS = {
  "TAB_LEFT": {
    "label": "Tab Left",
    "description": "Switch to the previous tab",
    "keyLabel": "Q",
    "displayKey": "Q",
    "keyboardClass": "key-gray"
  },
  "TAB_RIGHT": {
    "label": "Tab Right",
    "description": "Switch to the next tab",
    "keyLabel": "W",
    "displayKey": "W",
    "keyboardClass": "key-gray"
  },
  "PREVIEW_LINK_POPOVER": {
    "label": "Preview Link",
    "description": "Preview link in a popup",
    "keyLabel": "E",
    "displayKey": "E",
    "keyboardClass": "key-preview-popover"
  },
  "FORWARD": {
    "label": "Go Forward",
    "description": "Browser history forward",
    "keyLabel": "R",
    "displayKey": "R",
    "keyboardClass": "key-forward"
  },
  "NEW_TAB": {
    "label": "New Tab",
    "description": "Open a blank new tab",
    "keyLabel": "T",
    "displayKey": "T",
    "keyboardClass": "key-gray"
  },
  "RECTANGLE_HIGHLIGHT": {
    "label": "Element Select",
    "description": "Rectangle or cumulative element pick",
    "keyLabel": "Y",
    "displayKey": "Y",
    "keyboardClass": "key-rect-highlight"
  },
  "COPY_HOVERED_URL": {
    "label": "Copy URL",
    "description": "Copy hovered link URL",
    "keyLabel": "U",
    "displayKey": "U",
    "keyboardClass": null
  },
  "COPY_HOVERED_IMAGE": {
    "label": "Copy Image",
    "description": "Copy hovered image",
    "keyLabel": "I",
    "displayKey": "I",
    "keyboardClass": null
  },
  "PAGE_MEDIA": {
    "label": "Page Media",
    "description": "Browse media found on this page",
    "keyLabel": "O",
    "displayKey": "O",
    "keyboardClass": null
  },
  "OPEN_POPOVER": {
    "label": "Open Popover",
    "description": "Open link in a popup window",
    "keyLabel": "P",
    "displayKey": "P",
    "keyboardClass": "key-open-popover"
  },
  "DELETE": {
    "label": "Delete Mode",
    "description": "Hide elements under the cursor",
    "keyLabel": "Backspace",
    "displayKey": "Backspace",
    "keyboardClass": "key-delete"
  },
  "CLOSE_TAB": {
    "label": "Close Tab",
    "description": "Close the current tab",
    "keyLabel": "A",
    "displayKey": "A",
    "keyboardClass": "key-close-tab"
  },
  "ROOT": {
    "label": "Go to Site Root",
    "description": "Navigate to the site origin",
    "keyLabel": "S",
    "displayKey": "S",
    "keyboardClass": null
  },
  "BACK": {
    "label": "Go Back",
    "description": "Browser history back",
    "keyLabel": "D",
    "displayKey": "D",
    "keyboardClass": "key-back"
  },
  "ACTIVATE": {
    "label": "Click Element",
    "description": "Click the hovered element",
    "keyLabel": "F",
    "displayKey": "F",
    "keyboardClass": "key-activate"
  },
  "ACTIVATE_NEW_TAB_BACKGROUND": {
    "label": "Click New Tab Background",
    "description": "Open link in a new background tab",
    "keyLabel": "G",
    "displayKey": "G",
    "keyboardClass": "key-activate-new-over"
  },
  "HIGHLIGHT": {
    "label": "Text Select",
    "description": "Select text and copy rich text",
    "keyLabel": "H",
    "displayKey": "H",
    "keyboardClass": "key-highlight"
  },
  "TAB_HISTORY": {
    "label": "Tab History",
    "description": "Browse this tab’s history",
    "keyLabel": "J",
    "displayKey": "J",
    "keyboardClass": "key-gray"
  },
  "TOGGLE_KEYBOARD_HELP": {
    "label": "KB Reference",
    "description": "Show or hide the keyboard map",
    "keyLabel": "K",
    "displayKey": "K",
    "keyboardClass": "key-purple"
  },
  "OMNIBOX": {
    "label": "Omnibox",
    "description": "Address bar overlay",
    "keyLabel": "L",
    "displayKey": "L",
    "keyboardClass": "key-orange"
  },
  "TOP_SITES": {
    "label": "Top Sites",
    "description": "Toolbar, visits, and bookmarks",
    "keyLabel": ";",
    "displayKey": ";",
    "keyboardClass": "key-launcher-orange"
  },
  "OPEN_SETTINGS_POPOVER": {
    "label": "Settings",
    "description": "Open KeyPilot Settings",
    "keyLabel": "'",
    "displayKey": "'",
    "keyboardClass": "key-settings-dark"
  },
  "PAGE_TOP": {
    "label": "Scroll To Top",
    "description": "Jump to top of scroll target",
    "keyLabel": "Z",
    "displayKey": "Z",
    "keyboardClass": "key-scroll"
  },
  "PAGE_BOTTOM": {
    "label": "Scroll To Bottom",
    "description": "Jump to bottom of scroll target",
    "keyLabel": "X",
    "displayKey": "X",
    "keyboardClass": "key-scroll"
  },
  "PAGE_UP_INSTANT": {
    "label": "Page Up",
    "description": "Jump one page up instantly",
    "keyLabel": "C",
    "displayKey": "C",
    "keyboardClass": "key-scroll"
  },
  "PAGE_DOWN_INSTANT": {
    "label": "Page Down",
    "description": "Jump one page down instantly",
    "keyLabel": "V",
    "displayKey": "V",
    "keyboardClass": "key-scroll"
  },
  "ACTIVATE_NEW_TAB": {
    "label": "Click New Tab",
    "description": "Open link in a new foreground tab",
    "keyLabel": "B",
    "displayKey": "B",
    "keyboardClass": "key-activate-new"
  },
  "SCROLL_LINE": {
    "label": "Scroll Line",
    "description": "Origin-based continuous scroll",
    "keyLabel": "N",
    "displayKey": "N",
    "keyboardClass": "key-scroll"
  },
  "OPEN_MEDIA_LIBRARY": {
    "label": "Media Library",
    "description": "Open saved Media Library",
    "keyLabel": "M",
    "displayKey": "M",
    "keyboardClass": null
  },
  "CANCEL": {
    "label": "Exit Focus",
    "description": "Leave modes and overlays",
    "keyLabel": "Esc",
    "displayKey": "Esc",
    "keyboardClass": null
  }
};
  const EARLY_FUNCTION_PAINT = {
  "ACTIVATE": {
    "label": "Click Element",
    "keyboardClass": "key-activate"
  },
  "ACTIVATE_NEW_TAB": {
    "label": "Click New Tab",
    "keyboardClass": "key-activate-new"
  },
  "ACTIVATE_NEW_TAB_BACKGROUND": {
    "label": "Click New Tab Background",
    "keyboardClass": "key-activate-new-over"
  },
  "BACK": {
    "label": "Go Back",
    "keyboardClass": "key-back"
  },
  "BACK2": {
    "label": "Go Back",
    "keyboardClass": "key-back"
  },
  "FORWARD": {
    "label": "Go Forward",
    "keyboardClass": "key-forward"
  },
  "DELETE": {
    "label": "Delete Mode",
    "keyboardClass": "key-delete"
  },
  "TAB_LEFT": {
    "label": "Tab Left",
    "keyboardClass": "key-gray"
  },
  "TAB_RIGHT": {
    "label": "Tab Right",
    "keyboardClass": "key-gray"
  },
  "ROOT": {
    "label": "Go to Site Root",
    "keyboardClass": null
  },
  "LAUNCHER": {
    "label": "Launcher",
    "keyboardClass": "key-launcher-orange"
  },
  "TOP_SITES": {
    "label": "Top Sites",
    "keyboardClass": "key-launcher-orange"
  },
  "CLOSE_TAB": {
    "label": "Close Tab",
    "keyboardClass": "key-close-tab"
  },
  "CANCEL": {
    "label": "Exit Focus",
    "keyboardClass": null
  },
  "PAGE_UP_INSTANT": {
    "label": "Page Up",
    "keyboardClass": "key-scroll"
  },
  "PAGE_DOWN_INSTANT": {
    "label": "Page Down",
    "keyboardClass": "key-scroll"
  },
  "PAGE_TOP": {
    "label": "Scroll To Top",
    "keyboardClass": "key-scroll"
  },
  "PAGE_BOTTOM": {
    "label": "Scroll To Bottom",
    "keyboardClass": "key-scroll"
  },
  "SCROLL_LINE": {
    "label": "Scroll Line",
    "keyboardClass": "key-scroll"
  },
  "NEW_TAB": {
    "label": "New Tab",
    "keyboardClass": "key-gray"
  },
  "OPEN_POPOVER": {
    "label": "Open Popover",
    "keyboardClass": "key-open-popover"
  },
  "PREVIEW_LINK_POPOVER": {
    "label": "Preview Link",
    "keyboardClass": "key-preview-popover"
  },
  "POI_WEBSITE": {
    "label": "POI Website",
    "keyboardClass": "key-preview-popover"
  },
  "POI_ADDRESS": {
    "label": "POI Address",
    "keyboardClass": null
  },
  "OPEN_SETTINGS_POPOVER": {
    "label": "Settings",
    "keyboardClass": "key-settings-dark"
  },
  "OMNIBOX": {
    "label": "Omnibox",
    "keyboardClass": "key-orange"
  },
  "TAB_HISTORY": {
    "label": "Tab History",
    "keyboardClass": "key-gray"
  },
  "TOGGLE_KEYBOARD_HELP": {
    "label": "KB Reference",
    "keyboardClass": "key-purple"
  },
  "HIGHLIGHT": {
    "label": "Text Select",
    "keyboardClass": "key-highlight"
  },
  "RECTANGLE_HIGHLIGHT": {
    "label": "Element Select",
    "keyboardClass": "key-rect-highlight"
  },
  "COPY_HOVERED_IMAGE": {
    "label": "Copy Image",
    "keyboardClass": null
  },
  "COPY_HOVERED_URL": {
    "label": "Copy URL",
    "keyboardClass": null
  },
  "COPY_HOVERED_VIDEO": {
    "label": "Copy Video",
    "keyboardClass": null
  },
  "FONT_INFO": {
    "label": "Font Info",
    "keyboardClass": null
  },
  "PAGE_MEDIA": {
    "label": "Page Media",
    "keyboardClass": null
  },
  "OPEN_MEDIA_LIBRARY": {
    "label": "Media Library",
    "keyboardClass": null
  },
  "CLIPBOARD_COPY": {
    "label": "Copy",
    "keyboardClass": null
  },
  "CLIPBOARD_CUT": {
    "label": "Cut",
    "keyboardClass": null
  },
  "CLIPBOARD_PASTE": {
    "label": "Paste",
    "keyboardClass": null
  },
  "CLIPBOARD_SELECT_ALL": {
    "label": "Select All",
    "keyboardClass": null
  },
  "SELECT_WORD": {
    "label": "Select Word",
    "keyboardClass": null
  },
  "SELECT_SENTENCE": {
    "label": "Select Sentence",
    "keyboardClass": null
  },
  "SELECT_PARAGRAPH": {
    "label": "Select Paragraph",
    "keyboardClass": null
  },
  "SELECT_IMAGE": {
    "label": "Select Image",
    "keyboardClass": null
  },
  "LOOKUP_WORD": {
    "label": "Lookup Word",
    "keyboardClass": null
  },
  "SHOW_POPOVER": {
    "label": "Show Popover",
    "keyboardClass": null
  },
  "ADD_URL_TO_MEDIA_LIBRARY": {
    "label": "Add URL to Media Library",
    "keyboardClass": null
  },
  "FETCH_URL_FOR_MEDIA_LIBRARY": {
    "label": "Fetch URL for Media Library",
    "keyboardClass": null
  }
};
  const EARLY_CONTROL_STRIP_ICON_URIS = {"TOGGLE_KEYBOARD_HELP":"url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22%23ddd%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zm128%2064v32h32V160H128zm64%200v32h32V160H192zm64%200v32h32V160H256zm64%200v32h32V160H320zm64%200v32h32V160H384zM96%20256v32h64V256H96zm96%200v32h32V256H192zm64%200v32h32V256H256zm64%200v32h32V256H320zm64%200v32h32V256H384zm64%200v32h32V256H448zM128%20352v32H384V352H128z%22%2F%3E%3C%2Fsvg%3E\")","OPEN_SETTINGS_POPOVER":"url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23ddd%22%3E%3Cpath%20d%3D%22M9.405%201.05c-.413-1.4-2.397-1.4-2.81%200l-.1.34a1.464%201.464%200%200%201-2.275.819l-.31-.17c-1.283-.698-2.686.705-1.987%201.987l.169.311c.446.82.023%201.841-.82%202.275l-.34.1c-1.4.413-1.4%202.397%200%202.81l.34.1a1.464%201.464%200%200%201%20.82%202.275l-.17.31c-.698%201.283.705%202.686%201.987%201.987l.311-.169a1.464%201.464%200%200%201%202.275.82l.1.34c.413%201.4%202.397%201.4%202.81%200l.1-.34a1.464%201.464%200%200%201%202.275-.82l.31.17c1.283.698%202.686-.705%201.987-1.987l-.169-.311a1.464%201.464%200%200%201%20.82-2.275l.34-.1c1.4-.413%201.4-2.397%200-2.81l-.34-.1a1.464%201.464%200%200%201-.82-2.275l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464%201.464%200%200%201-2.275-.82zM8%2010.93a2.93%202.93%200%201%201%200-5.86%202.93%202.93%200%200%201%200%205.86z%22%2F%3E%3C%2Fsvg%3E\")"};
  const EARLY_ONBOARDING_MODEL = {
  "slides": [
    {
      "id": "basic_navigation",
      "title": "Welcome to KeyPilot",
      "tasks": [
        {
          "id": "click_link",
          "label": "Hover over a link and press the `F` key to click it.",
          "when": {
            "type": "action",
            "action": "activate",
            "target": "link",
            "mode": "",
            "change": ""
          }
        },
        {
          "id": "go_back",
          "label": "To go back (history), press the `D` key.",
          "when": {
            "type": "action",
            "action": "back",
            "target": "",
            "mode": "",
            "change": ""
          }
        },
        {
          "id": "keyboard_key_info",
          "label": "Notice the Keyboard Reference window below. Hover over one of its keys to see what it does.",
          "when": {
            "type": "action",
            "action": "hover",
            "target": "keyboardHelpKey",
            "mode": "",
            "change": ""
          }
        },
        {
          "id": "toggle_extension_off",
          "label": "There is a control strip above that says `ON`. Click it to turn KeyPilot completely off.",
          "when": {
            "type": "action",
            "action": "toggleExtension",
            "target": "",
            "mode": "",
            "change": "off"
          }
        }
      ],
      "onEnter": [
        {
          "type": "overlay",
          "title": "Welcome to KeyPilot",
          "message": "We'll show you how to use KeyPilot one step at a time.",
          "primaryText": "OK",
          "secondaryText": "Close",
          "secondaryAction": "close"
        }
      ],
      "bodyText": ""
    },
    {
      "id": "text_box_mode",
      "title": "Text box mode",
      "tasks": [
        {
          "id": "enter_text_mode",
          "label": "Click a text field to the right with `F` and it will receive typing.",
          "when": {
            "type": "mode",
            "action": "",
            "target": "",
            "mode": "text_focus",
            "change": "enter"
          }
        },
        {
          "id": "exit_text_mode",
          "label": "Press `Escape` to exit the text box.",
          "when": {
            "type": "mode",
            "action": "",
            "target": "",
            "mode": "text_focus",
            "change": "exit"
          }
        }
      ],
      "onEnter": [
        {
          "type": "overlay",
          "title": "KeyPilot is back on",
          "message": "Next up: text boxes.",
          "primaryText": "OK",
          "effect": "marquee"
        }
      ],
      "bodyText": ""
    },
    {
      "id": "scrolling",
      "title": "Scrolling the page",
      "tasks": [
        {
          "id": "scroll_down",
          "label": "Scroll down with `V`.",
          "when": {
            "type": "action",
            "action": "scrollDown",
            "target": "",
            "mode": "",
            "change": ""
          }
        },
        {
          "id": "scroll_up",
          "label": "Scroll up with `C`.",
          "when": {
            "type": "action",
            "action": "scrollUp",
            "target": "",
            "mode": "",
            "change": ""
          }
        },
        {
          "id": "scroll_bottom",
          "label": "Go to the bottom of the page with `X`.",
          "when": {
            "type": "action",
            "action": "scrollBottom",
            "target": "",
            "mode": "",
            "change": ""
          }
        },
        {
          "id": "scroll_top",
          "label": "Go to the top of the page with `Z`.",
          "when": {
            "type": "action",
            "action": "scrollTop",
            "target": "",
            "mode": "",
            "change": ""
          }
        }
      ],
      "onEnter": [
        {
          "type": "overlay",
          "title": "That's all you need to browse the web with KeyPilot.",
          "message": "Do you want to try out more keys?",
          "primaryText": "Yes, Continue",
          "secondaryText": "No, I'll Do It Later",
          "secondaryAction": "later",
          "laterTitle": "Return to this Tutorial with `Alt`+`I`",
          "laterPrimaryText": "OK, Close"
        }
      ],
      "bodyText": ""
    },
    {
      "id": "tabs",
      "title": "Tabs",
      "tasks": [
        {
          "id": "open_link_background_tab",
          "label": "Click a hyperlink into a new tab but don't open it (`G`).",
          "when": {
            "type": "action",
            "action": "activateNewTabBackground",
            "target": "link",
            "mode": "",
            "change": ""
          }
        },
        {
          "id": "open_link_new_tab",
          "label": "Click a hyperlink into a new tab (`B`).",
          "when": {
            "type": "action",
            "action": "activateNewTab",
            "target": "link",
            "mode": "",
            "change": ""
          }
        },
        {
          "id": "open_new_tab",
          "label": "Open a new tab (`T`).",
          "when": {
            "type": "action",
            "action": "newTab",
            "target": "",
            "mode": "",
            "change": ""
          }
        },
        {
          "id": "move_tabs",
          "label": "Move between tabs left (`Q`).",
          "when": {
            "type": "action",
            "action": "tabLeft",
            "target": "",
            "mode": "",
            "change": ""
          }
        },
        {
          "id": "move_tabs_2",
          "label": "Move between tabs right (`W`).",
          "when": {
            "type": "action",
            "action": "tabRight",
            "target": "",
            "mode": "",
            "change": ""
          }
        }
      ],
      "onEnter": [],
      "bodyText": ""
    },
    {
      "id": "completion",
      "title": "Tutorial complete",
      "tasks": [],
      "onEnter": [],
      "bodyText": "You finished the tutorial and are ready to use KeyPilot."
    }
  ]
};
  const POPUP_THEME_VARS = {
  "--fg": "#f8fafc",
  "--bg": "#0f172a",
  "--surface": "#1e293b",
  "--surface-light": "#334155",
  "--muted": "#94a3b8",
  "--ok": "#10b981",
  "--warn": "#f59e0b",
  "--err": "#44c7ef",
  "--brand": "#3b82f6",
  "--brand-dark": "#1e40af",
  "--border": "#334155",
  "--border2": "#4d617b"
};
  function applyPopupThemeVars(targetEl) {
    if (!targetEl || !targetEl.style) return;
    try {
      for (const [k, v] of Object.entries(POPUP_THEME_VARS)) {
        targetEl.style.setProperty(k, v);
      }
    } catch { /* ignore */ }
  }
  // Shared early-compatible subset of kp-chrome-shadow.js. This script cannot import ESM.
  const KP_THEME_CACHE_KEY = 'kp_theme_id_v1';
  function peekCachedThemeId() {
    try {
      const id = localStorage.getItem(KP_THEME_CACHE_KEY);
      if (id && KP_THEME_IDS.indexOf(id) >= 0) return id;
    } catch { /* ignore */ }
    return null;
  }
  function cacheThemeId(id) {
    if (!id || KP_THEME_IDS.indexOf(id) < 0) return;
    try { localStorage.setItem(KP_THEME_CACHE_KEY, id); } catch { /* ignore */ }
  }
  const KP_THEME_OVERRIDES_CACHE_KEY = 'kp_theme_overrides_v1';
  const KP_KEY_SHADE_BEVEL = 'linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 18%, transparent 42%)';
  const KP_KEY_OVERRIDE_VARS = ['--kp-key-shading','--kp-key-sheen-opacity','--kp-key-shade-layer','--kp-key-border','--kp-key-corner-mode','--kp-key-cut-size','--kp-key-clip','--kp-key-effective-radius','--kp-key-shape-radius','--kp-key-corner-shape','--kp-titlebar-icon-display'];
  function peekCachedThemeOverrides() {
    try {
      const raw = localStorage.getItem(KP_THEME_OVERRIDES_CACHE_KEY);
      if (!raw) return {};
      const o = JSON.parse(raw);
      return o && typeof o === 'object' && !Array.isArray(o) ? o : {};
    } catch { /* ignore */ }
    return {};
  }
  function cacheThemeOverrides(overrides) {
    try {
      const o = overrides && typeof overrides === 'object' && !Array.isArray(overrides) ? overrides : {};
      localStorage.setItem(KP_THEME_OVERRIDES_CACHE_KEY, JSON.stringify(o));
    } catch { /* ignore */ }
  }
  function earlyKeyClipPath(cutSize) {
    const s = String(cutSize || '4px');
    return 'polygon(' + s + ' 0, calc(100% - ' + s + ') 0, 100% ' + s + ', 100% calc(100% - ' + s + '), calc(100% - ' + s + ') 100%, ' + s + ' 100%, 0 calc(100% - ' + s + '), 0 ' + s + ')';
  }
  function applyEarlyKeyChromeVars(el, overrides) {
    if (!el || !el.style || !el.style.setProperty) return;
    const keys = overrides && typeof overrides === 'object' ? overrides.keys : null;
    const titlebar = overrides && typeof overrides === 'object' ? overrides.titlebar : null;
    if ((!keys || typeof keys !== 'object') && (!titlebar || typeof titlebar !== 'object')) {
      for (let i = 0; i < KP_KEY_OVERRIDE_VARS.length; i++) {
        try { el.style.removeProperty(KP_KEY_OVERRIDE_VARS[i]); } catch { /* ignore */ }
      }
      return;
    }
    try {
      if (keys && typeof keys === 'object') {
        if (keys.shading === 'flat' || keys.shading === 'bevel') {
          const flat = keys.shading === 'flat';
          el.style.setProperty('--kp-key-shading', keys.shading);
          el.style.setProperty('--kp-key-sheen-opacity', flat ? '0' : '1');
          el.style.setProperty('--kp-key-shade-layer', flat ? 'transparent' : KP_KEY_SHADE_BEVEL);
        }
        if (keys.border) el.style.setProperty('--kp-key-border', String(keys.border));
        if (keys.cornerMode === 'cut' || keys.cornerMode === 'radius') {
          const cut = keys.cornerMode === 'cut';
          const cutSize = String(keys.cutSize || '4px');
          el.style.setProperty('--kp-key-corner-mode', keys.cornerMode);
          el.style.setProperty('--kp-key-cut-size', cutSize);
          el.style.setProperty('--kp-key-clip', cut ? earlyKeyClipPath(cutSize) : 'none');
          if (cut) {
            el.style.setProperty('--kp-key-effective-radius', '0px');
            el.style.setProperty('--kp-key-shape-radius', cutSize);
            el.style.setProperty('--kp-key-corner-shape', 'bevel');
          } else {
            el.style.removeProperty('--kp-key-effective-radius');
            el.style.setProperty('--kp-key-corner-shape', 'round');
          }
        }
      }
      if (titlebar && typeof titlebar === 'object') {
        if (titlebar.iconDisplay === 'inline-flex' || titlebar.iconDisplay === 'none') {
          el.style.setProperty('--kp-titlebar-icon-display', titlebar.iconDisplay);
        }
      }
    } catch { /* ignore */ }
  }
  function stampEarlyKeyChrome(overrides) {
    try { applyEarlyKeyChromeVars(document.documentElement, overrides); } catch { /* ignore */ }
    try {
      document.querySelectorAll('.kp-chrome-window, [data-kp-ui-shadow]').forEach(function (el) {
        applyEarlyKeyChromeVars(el, overrides);
        try {
          if (el.shadowRoot && el.shadowRoot.host) applyEarlyKeyChromeVars(el.shadowRoot.host, overrides);
        } catch { /* ignore */ }
      });
    } catch { /* ignore */ }
  }
  function getEarlyThemeFontFaceCss() {
    function fontUrl(file) {
      try {
        if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.getURL) {
          return chrome.runtime.getURL('fonts/' + file);
        }
      } catch { /* ignore */ }
      return '';
    }
    const faces = [
      ['ROBOTECHGPRegular', 'ROBOTECHGPRegular.ttf', 'truetype', 'normal'],
      ['TitilliumText', 'TitilliumTextRegular.otf', 'opentype', '100 500'],
      ['TitilliumText', 'TitilliumTextBold.ttf', 'truetype', '600 900'],
      ['Cubellan', 'CubellanRegular.ttf', 'truetype', 'normal'],
      ['Ezarion', 'EzarionRegular.ttf', 'truetype', 'normal'],
      ['Dosis', 'DosisBook.ttf', 'truetype', 'normal']
    ];
    let out = '';
    for (const [family, file, format, weight] of faces) {
      const url = fontUrl(file);
      if (!url) continue;
      out += "@font-face{font-family:'" + family + "';src:url('" + url + "') format('" + format + "');font-weight:" + weight + ";font-style:normal;font-display:block;}" ;
    }
    return out;
  }
  function ensureEarlyThemeStyles() {
    try {
      const fontCss = getEarlyThemeFontFaceCss();
      if (fontCss) {
        let fonts = document.getElementById('kp-early-theme-fonts');
        if (!fonts) {
          fonts = document.createElement('style');
          fonts.id = 'kp-early-theme-fonts';
          (document.head || document.documentElement).appendChild(fonts);
        }
        if (fonts.textContent !== fontCss) fonts.textContent = fontCss;
      }
    } catch { /* ignore */ }
    try {
      let style = document.getElementById('kp-early-theme');
      if (!style) {
        style = document.createElement('style');
        style.id = 'kp-early-theme';
        (document.head || document.documentElement).appendChild(style);
      }
      if (style.textContent !== KP_ALL_THEMES_CSS) style.textContent = KP_ALL_THEMES_CSS;
    } catch { /* ignore */ }
  }
  function resolveEarlyThemeId(themeId) {
    if (themeId && KP_THEME_IDS.indexOf(themeId) >= 0) return themeId;
    return peekCachedThemeId() || 'dark-pro';
  }
  function applyEarlyTheme(themeId, overrides) {
    const id = resolveEarlyThemeId(themeId);
    const cut = KP_THEME_CORNER[id] === 'cut';
    const ov = overrides === undefined
      ? peekCachedThemeOverrides()
      : (overrides && typeof overrides === 'object' && !Array.isArray(overrides) ? overrides : {});
    ensureEarlyThemeStyles();
    try { document.documentElement.setAttribute('data-kp-theme', id); } catch { /* ignore */ }
    try {
      if (cut) document.documentElement.setAttribute('data-kp-corner', 'cut');
      else document.documentElement.removeAttribute('data-kp-corner');
    } catch { /* ignore */ }
    try {
      const stamp = (el) => {
        if (!el || !el.setAttribute) return;
        try {
          el.setAttribute('data-kp-theme', id);
          if (cut) el.setAttribute('data-kp-corner', 'cut');
          else el.removeAttribute('data-kp-corner');
        } catch { /* ignore */ }
        try {
          if (el.shadowRoot && el.shadowRoot.querySelectorAll) {
            el.shadowRoot.querySelectorAll('.kp-chrome-window, [data-kp-ui-shadow]').forEach(stamp);
          }
        } catch { /* ignore */ }
      };
      document.querySelectorAll('.kp-chrome-window, [data-kp-ui-shadow]').forEach(stamp);
    } catch { /* ignore */ }
    cacheThemeId(id);
    cacheThemeOverrides(ov);
    stampEarlyKeyChrome(ov);
  }
  function ensureEarlyOpenChromeShadow(host, id) {
    if (!host) return null;
    try { host.setAttribute('data-kp-ui-shadow', String(id || 'chrome')); } catch { /* ignore */ }
    try { host.classList.add('kp-chrome-window'); } catch { /* ignore */ }
    try {
      const themeId = document.documentElement.getAttribute('data-kp-theme') || peekCachedThemeId() || 'dark-pro';
      host.setAttribute('data-kp-theme', themeId);
      const cut = document.documentElement.getAttribute('data-kp-corner') === 'cut' || KP_THEME_CORNER[themeId] === 'cut';
      if (cut) host.setAttribute('data-kp-corner', 'cut');
      else host.removeAttribute('data-kp-corner');
    } catch { /* ignore */ }
    try { applyEarlyKeyChromeVars(host, peekCachedThemeOverrides()); } catch { /* ignore */ }
    try { return host.shadowRoot || host.attachShadow({ mode: 'open' }); } catch { return host.shadowRoot || null; }
  }
  const KEYBINDINGS_UI_EARLY_CSS = `
/* KeyPilot Keybindings UI (injected) */
@font-face {
  font-family: "ROBOTECHGPRegular";
  src: url("__KP_FONT_ROBOTECH_URL__") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "TitilliumText";
  src: url("__KP_FONT_TITILLIUM_URL__") format("opentype");
  font-weight: 100 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "TitilliumText";
  src: url("__KP_FONT_TITILLIUM_BOLD_URL__") format("truetype");
  font-weight: 600 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Cubellan";
  src: url("__KP_FONT_CUBELLAN_URL__") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Ezarion";
  src: url("__KP_FONT_EZARION_URL__") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Dosis";
  src: url("__KP_FONT_DOSIS_URL__") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Style isolation: all keyboard rules are scoped so host page CSS won't override them */
.kp-keybindings-ui {
  --kp-accent: #5be2f1;
}

/* ── Keyboard plate (pro app tray) ─────────────────────────────── */
.keyboard-visual.kp-keybindings-ui {
  --kp-kb-surface: #12151c;
  --kp-kb-well: #0a0c11;
  --kp-kb-rim: rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
  border-radius: 14px;
  border: 1px solid var(--kp-kb-rim);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 28%),
    radial-gradient(120% 80% at 50% 0%, rgba(91, 226, 241, 0.05) 0%, transparent 55%),
    linear-gradient(180deg, #161a22 0%, var(--kp-kb-surface) 45%, var(--kp-kb-well) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -1px 0 rgba(0, 0, 0, 0.45) inset,
    0 12px 28px rgba(0, 0, 0, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.35);
  font-family: "Dosis", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 10px;
  line-height: 1.1;
  user-select: none;
}

.kp-keybindings-ui .keyboard-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 7px;
  gap: 5px;
  width: 100%;
}

.kp-keybindings-ui .keyboard-row:last-child {
  margin-bottom: 0;
}

/* ── Base keycap: low-profile chiclet (flat + lightly realistic) ─ */
.kp-keybindings-ui .key {
  --kp-key-face: #3d4454;
  --kp-key-mid: #343a48;
  --kp-key-deep: #2c313e;
  --kp-key-icon: #1a1e28;
  --kp-key-glow: transparent;

  position: relative;
  /*
   * This UI lives in the page's light DOM. Some sites apply high-priority
   * button resets (large min-heights, padding, and white focus rings), which
   * can briefly win during the early-shell → bundled-style handoff.
   */
  box-sizing: border-box !important;
  margin: 0 !important;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: default;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
  color: rgba(248, 250, 252, 0.94);
  text-align: center;
  overflow: hidden;

  /* Equal geometry for alphanumeric keys */
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  /* Block layout: letter/name layers are absolutely positioned (not flex-flow) */
  display: block !important;
  padding: 0 !important;
  border-radius: var(--kp-key-effective-radius, var(--kp-radius-key, 7px));
  clip-path: var(--kp-key-clip, none);

  /*
   * Low-profile key: nearly flat face, thin rim, soft ground shadow.
   * Reads more like a real chiclet key than a heavy 3D bevel.
   */
  border: var(--kp-key-border, 1px solid rgba(0, 0, 0, 0.4));
  border-top-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(0, 0, 0, 0.5);

  background:
    var(--kp-key-shade-layer, linear-gradient(180deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.02) 18%,
      transparent 42%)),
    linear-gradient(180deg,
      var(--kp-key-face) 0%,
      var(--kp-key-mid) 70%,
      var(--kp-key-deep) 100%);

  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);

  transition:
    transform 100ms ease,
    box-shadow 100ms ease,
    filter 100ms ease,
    border-color 100ms ease,
    background 100ms ease;
}

/* Upgrade: corner-shape so key borders follow cut corners (clip-path baseline above).
 * Cut themes force --kp-key-effective-radius: 0px for the clip-path path; the
 * upgrade must win so bevel length comes from --kp-key-shape-radius. */
@supports (corner-shape: bevel) {
  .kp-keybindings-ui .key {
    clip-path: none !important;
    border-radius: var(--kp-key-shape-radius, var(--kp-key-effective-radius, var(--kp-radius-key, 7px))) !important;
    corner-shape: var(--kp-key-corner-shape, round);
  }
}

/* Minimal face sheen (not a tall sculpted plate) */
.kp-keybindings-ui .key::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 1px;
  left: 2px;
  right: 2px;
  height: 38%;
  border-radius: 5px 5px 40% 40%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 60%,
    transparent 100%);
  pointer-events: none;
  opacity: var(--kp-key-sheen-opacity, 1);
}

/* Prevent UA :disabled washout on edit-readonly keycaps (still non-interactive). */
.kp-keybindings-ui .key:disabled {
  opacity: 1;
  color: inherit;
  cursor: default;
}

.kp-keybindings-ui [data-kp-action-id] {
  cursor: pointer;
}

.kp-keybindings-ui [data-kp-action-id]:hover {
  filter: brightness(1.07);
  border-top-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 10px var(--kp-key-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

/*
 * Layered key legend (independent of each other):
 * - .key-main  = action name — upper band only
 * - .key-label = physical key letter — always pinned bottom-center
 * - .key-text  = special / unassigned glyph
 */
.kp-keybindings-ui .key > .key-main {
  position: absolute;
  z-index: 1;
  /* Pin action name to the top of the key face */
  top: 3px;
  left: 2px;
  right: 2px;
  bottom: auto;
  /* Leave a fixed bottom band for the letter; never push it */
  height: auto;
  max-height: 30px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 1px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.1;
  opacity: 0.9;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.94);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-word;
  hyphens: auto;
  text-align: center;
  pointer-events: none;
}

/* Letter / chrome labels: fixed bottom layer on every key */
.kp-keybindings-ui .key > .key-label,
.kp-keybindings-ui .key > .key-text {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 3px;
  top: auto;
  transform: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.kp-keybindings-ui .key > .key-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--kp-accent, #5be2f1);
}

/* Edit-mode slot delete: fixed overlay on the keycap, independent of .key-main. */
.kp-keybindings-ui .key > .kp-key-delete-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.kp-keybindings-ui .key > .kp-key-delete-overlay > .kp-key-delete {
  position: absolute;
  top: 1px;
  right: 1px;
  left: auto;
  bottom: auto;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 3px;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: rgba(248, 250, 252, 0.95);
  background: rgba(220, 50, 50, 0.85);
  pointer-events: auto;
}
.kp-keybindings-ui .key:hover > .kp-key-delete-overlay > .kp-key-delete,
.kp-keybindings-ui .key:focus-within > .kp-key-delete-overlay > .kp-key-delete {
  display: flex;
}
.kp-keybindings-ui .key > .kp-key-delete-overlay > .kp-key-delete:hover {
  background: rgba(255, 70, 70, 1);
}

/* Edit-mode plate hatch (same steel lines as Keyboard Layout Config). */
.keyboard-visual.kp-keybindings-ui.kp-kb-edit-hatch {
  background:
    var(--kp-hatch-edit, repeating-linear-gradient(-45deg, rgba(180, 200, 220, 0.08) 0px, rgba(180, 200, 220, 0.08) 1px, transparent 1px, transparent 7px)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 28%),
    radial-gradient(120% 80% at 50% 0%, rgba(91, 226, 241, 0.07) 0%, transparent 55%),
    linear-gradient(180deg, #222833 0%, #1a1f28 45%, #13161e 100%) !important;
}

/* Special chrome labels (Tab/Caps/…) */
.kp-keybindings-ui .key > .key-text {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: rgba(248, 250, 252, 0.92);
}

/* Unassigned letter-only keys: still bottom-centered (same letter layer) */
.kp-keybindings-ui .key:not([data-kp-action-id]):not(.key-tab):not(.key-caps):not(.key-enter):not(.key-shift):not(.key-backspace) > .key-text {
  bottom: 3px;
  top: auto;
  transform: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--kp-accent, #5be2f1);
}

/* Special keys: wider, same height */
.kp-keybindings-ui .key.key-tab,
.kp-keybindings-ui .key.key-caps,
.kp-keybindings-ui .key.key-enter,
.kp-keybindings-ui .key.key-shift,
.kp-keybindings-ui .key.key-backspace {
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  width: auto;
}

.kp-keybindings-ui .key.key-tab { flex: 1.25 1 0; }
.kp-keybindings-ui .key.key-caps { flex: 1.35 1 0; }
.kp-keybindings-ui .key.key-enter { flex: 1.55 1 0; }
.kp-keybindings-ui .key.key-shift { flex: 1.65 1 0; }
.kp-keybindings-ui .key.key-backspace { flex: 1.55 1 0; }

/* ── Color families (muted pro tints + darker icon color) ─────── */
.kp-keybindings-ui .key.key-activate,
.kp-keybindings-ui .key.key-activate-new,
.kp-keybindings-ui .key.key-activate-new-over,
.kp-keybindings-ui .key.key-tab-right,
.kp-keybindings-ui .key.key-new-tab,
.kp-keybindings-ui .key.key-open-popover,
.kp-keybindings-ui .key.key-preview-popover,
.kp-keybindings-ui .key.key-page-up,
.kp-keybindings-ui .key.key-page-down,
.kp-keybindings-ui .key.key-page-up-instant,
.kp-keybindings-ui .key.key-page-down-instant,
.kp-keybindings-ui .key.key-help,
.kp-keybindings-ui .key.key-omnibox {
  
  --kp-key-face: #2f8f5b;
  --kp-key-mid: #247a4c;
  --kp-key-deep: #17633a;
  --kp-key-icon: #0d3a22;
  --kp-key-glow: rgba(34, 197, 94, 0.18);

}

.kp-keybindings-ui .key.key-back,
.kp-keybindings-ui .key.key-forward,
.kp-keybindings-ui .key.key-scroll-top,
.kp-keybindings-ui .key.key-scroll-bottom {
  
  --kp-key-face: #2f7ea8;
  --kp-key-mid: #256b92;
  --kp-key-deep: #1a5475;
  --kp-key-icon: #0d3044;
  --kp-key-glow: rgba(56, 189, 248, 0.16);

}

.kp-keybindings-ui .key.key-delete,
.kp-keybindings-ui .key.key-close-tab {
  
  --kp-key-face: #b84a4a;
  --kp-key-mid: #9e3b3b;
  --kp-key-deep: #7a2b2b;
  --kp-key-icon: #401616;
  --kp-key-glow: rgba(248, 113, 113, 0.16);

}

/* Selection tools: indigo family (distinct from green activate / blue nav / amber unused) */
.kp-keybindings-ui .key.key-highlight,
.kp-keybindings-ui .key.key-rect-highlight {
  
  --kp-key-face: #5b6fd4;
  --kp-key-mid: #4a5cbb;
  --kp-key-deep: #3949a0;
  --kp-key-icon: #1a2258;
  --kp-key-glow: rgba(99, 102, 241, 0.18);

}

.kp-keybindings-ui .key.key-scroll {
  
  --kp-key-face: #7a5638;
  --kp-key-mid: #63452c;
  --kp-key-deep: #4a3320;
  --kp-key-icon: #26180f;
  --kp-key-glow: rgba(180, 120, 70, 0.12);

}

.kp-keybindings-ui .key.key-purple,
.kp-keybindings-ui .key.key-cols {
  
  --kp-key-face: #7a4ab8;
  --kp-key-mid: #663d9e;
  --kp-key-deep: #4e2e7a;
  --kp-key-icon: #281646;
  --kp-key-glow: rgba(167, 139, 250, 0.14);

}

.kp-keybindings-ui .key.key-orange {
  
  --kp-key-face: #c97a28;
  --kp-key-mid: #a8641e;
  --kp-key-deep: #834f16;
  --kp-key-icon: #3f250a;
  --kp-key-glow: rgba(255, 165, 0, 0.14);

}

.kp-keybindings-ui .key.key-launcher-orange {
  
  --kp-key-face: #a06a3a;
  --kp-key-mid: #85562e;
  --kp-key-deep: #664122;
  --kp-key-icon: #322010;
  --kp-key-glow: rgba(184, 115, 51, 0.12);

}

.kp-keybindings-ui .key.key-settings-dark {
  
  --kp-key-face: #3a4250;
  --kp-key-mid: #2a313c;
  --kp-key-deep: #1a1f28;
  --kp-key-icon: #0c0f14;
  --kp-key-glow: rgba(148, 163, 184, 0.1);

}

.kp-keybindings-ui .key.key-gray {
  
  --kp-key-face: #5a6270;
  --kp-key-mid: #484f5c;
  --kp-key-deep: #343a45;
  --kp-key-icon: #1a1e26;
  --kp-key-glow: rgba(148, 163, 184, 0.1);

}

.kp-keybindings-ui .key.key-launcher {
  
  --kp-key-face: #2a8fa3;
  --kp-key-mid: #22788a;
  --kp-key-deep: #185e6d;
  --kp-key-icon: #0c343c;
  --kp-key-glow: rgba(34, 211, 238, 0.14);

}

.kp-keybindings-ui .key.key-hatched {
  position: relative;
}

.kp-keybindings-ui .key.key-hatched::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(200, 200, 200, 0.4) 0px,
      rgba(200, 200, 200, 0.4) 1px,
      transparent 1px,
      transparent 4px
    );
  pointer-events: none;
  border-radius: 4px;
}

.kp-keybindings-ui .key.key-radial-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center,
    rgba(150, 150, 150, 0.3) 0%,
    rgba(120, 120, 120, 0.25) 30%,
    transparent 70%);
  pointer-events: none;
  border-radius: 4px;
}

.kp-keybindings-ui .key.key-checkerboard-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(160, 160, 160, 0.3) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(160, 160, 160, 0.3) 2px, transparent 2px);
  background-size: 8px 8px;
  pointer-events: none;
  border-radius: 4px;
}

.kp-keybindings-ui .key.key-stripes-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, transparent 40%, rgba(180, 180, 180, 0.25) 40%, rgba(180, 180, 180, 0.25) 60%, transparent 60%);
  background-size: 6px 100%;
  pointer-events: none;
  border-radius: 4px;
}

.kp-keybindings-ui .key.key-crosshatch-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(170, 170, 170, 0.25) 0px, rgba(170, 170, 170, 0.25) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(-45deg, rgba(170, 170, 170, 0.25) 0px, rgba(170, 170, 170, 0.25) 1px, transparent 1px, transparent 4px);
  pointer-events: none;
  border-radius: 4px;
}

.kp-keybindings-ui .key.key-noise-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(45deg, rgba(80, 80, 80, 0.2) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(80, 80, 80, 0.2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(80, 80, 80, 0.2) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(80, 80, 80, 0.2) 75%);
  background-size: 4px 4px;
  pointer-events: none;
  border-radius: 4px;
}

.kp-keybindings-ui .key.key-conic-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: conic-gradient(
    from 45deg,
    rgba(100, 100, 100, 0.2) 0deg,
    rgba(120, 120, 120, 0.25) 90deg,
    rgba(140, 140, 140, 0.2) 180deg,
    rgba(100, 100, 100, 0.2) 360deg
  );
  pointer-events: none;
  border-radius: 4px;
}

.kp-keybindings-ui .key.key-dashed-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 0 2px rgba(140, 140, 140, 0.4);
  pointer-events: none;
  border-radius: 4px;
}

/*
 * Keydown/keyup press feedback is a dedicated .key-press-overlay element
 * (see ensureKeyPressOverlay / setKeyPressedState). Avoid filter/transform
 * on the key itself — those were hard to see on colored keycaps.
 */
.kp-keybindings-ui .key.kp-key-pressed {
  outline: none;
}

/*
 * Text / typing mode:
 * - Default keys: plain typing chiclets (no function color/icon/label) + crisp orange outline.
 * - Countdown-armed actions (.kp-key-text-mode-active): full function chrome restored
 *   (color fill, FA icon, action label) with the key's own material glow (green for
 *   Click Element). The live-action set is TEXT_MODE_COUNTDOWN_ACTION_IDS.
 */
.kp-keybindings-ui.kp-text-mode-filter .key:not(.kp-key-text-mode-active) {
  /* Orange-cast chiclet face (same family as titlebar / control-strip text mode). */
  --kp-key-face: #5a4834;
  --kp-key-mid: #4a3a28;
  --kp-key-deep: #3a2c1c;
  --kp-key-icon: #1a1e28;
  --kp-key-glow: transparent;
  opacity: 1;
  filter: none;
  border-color: rgba(255, 140, 0, 0.85) !important;
  border-top-color: rgba(255, 170, 70, 0.9) !important;
  border-bottom-color: rgba(200, 100, 0, 0.9) !important;
  /* Crisp orange outline — no soft glow bloom. */
  box-shadow:
    0 0 0 1px rgba(255, 140, 0, 0.8),
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 200, 120, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  background:
    linear-gradient(180deg,
      rgba(255, 140, 0, 0.18) 0%,
      rgba(255, 140, 0, 0.06) 28%,
      transparent 55%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.02) 18%,
      transparent 42%),
    linear-gradient(180deg,
      var(--kp-key-face) 0%,
      var(--kp-key-mid) 70%,
      var(--kp-key-deep) 100%);
}
.kp-keybindings-ui.kp-text-mode-filter .key:not(.kp-key-text-mode-active) > .key-bg-icon,
.kp-keybindings-ui.kp-text-mode-filter .key:not(.kp-key-text-mode-active) > .key-main {
  display: none !important;
}
/* Pattern overlays (hatch / checkerboard / …) — plain face only while typing. */
.kp-keybindings-ui.kp-text-mode-filter .key:not(.kp-key-text-mode-active)::after {
  display: none !important;
}
/*
 * Center physical letters on every plain key. !important beats the higher-specificity
 * unassigned key-text rule (cyan / bottom-pinned) that would otherwise leave empty
 * keys like U O [ ] N , / looking different from assigned key-label keys.
 */
.kp-keybindings-ui.kp-text-mode-filter .key:not(.kp-key-text-mode-active) > .key-label,
.kp-keybindings-ui.kp-text-mode-filter .key:not(.kp-key-text-mode-active) > .key-text {
  top: 50% !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: rgba(248, 250, 252, 0.94) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45) !important;
}
.kp-keybindings-ui.kp-text-mode-filter .key.kp-key-text-mode-disabled {
  pointer-events: none;
  cursor: default;
}
/* Countdown-live keys: keep assigned color fill / icon / labels; emphasize material glow. */
.kp-keybindings-ui.kp-text-mode-filter .key.kp-key-text-mode-active {
  opacity: 1;
  filter: none;
  z-index: 2;
  outline: none;
  pointer-events: auto;
  cursor: pointer;
  box-shadow:
    0 0 0 2px rgba(34, 197, 94, 0.5),
    0 0 14px 3px var(--kp-key-glow, rgba(34, 197, 94, 0.35)),
    0 0 24px 4px rgba(34, 197, 94, 0.22),
    0 1px 0 rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

/*
 * Link-hover hint: when the page pointer is over a link and the keyboard
 * reference is open, highlight the keys that activate / open that link.
 */
.kp-keybindings-ui .key.kp-key-link-hint {
  z-index: 2;
  outline: none;
  filter: brightness(1.12) saturate(1.15);
  border-color: rgba(91, 226, 241, 0.85) !important;
  border-top-color: rgba(180, 245, 255, 0.95) !important;
  border-bottom-color: rgba(40, 180, 200, 0.9) !important;
  box-shadow:
    0 0 0 2px rgba(91, 226, 241, 0.55),
    0 0 14px 3px rgba(91, 226, 241, 0.55),
    0 0 28px 6px rgba(56, 189, 248, 0.28),
    0 1px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  animation: kp-key-link-hint-pulse 1.35s ease-in-out infinite;
}

@keyframes kp-key-link-hint-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(91, 226, 241, 0.5),
      0 0 12px 2px rgba(91, 226, 241, 0.45),
      0 0 22px 4px rgba(56, 189, 248, 0.22),
      0 1px 0 rgba(0, 0, 0, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(120, 240, 255, 0.75),
      0 0 18px 5px rgba(91, 226, 241, 0.7),
      0 0 34px 10px rgba(56, 189, 248, 0.38),
      0 1px 0 rgba(0, 0, 0, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

/* Popover (tooltip) — matches the hovered key material via CSS vars.
 * Uses the HTML Popover API (top layer) so it can escape the keyboard panel's
 * overflow:hidden and sit above/below keys outside the panel bounds.
 *
 * Do NOT set inset with !important: that locks left/top longhands and beats
 * JS style.left/top, pinning every tooltip at the viewport origin. Override UA
 * popover defaults with non-important longhands + margin:0 instead. */
.kp-keybindings-popover {
  --kp-key-face: #3d4454;
  --kp-key-mid: #343a48;
  --kp-key-deep: #2c313e;
  --kp-key-icon: #1a1e28;

  position: fixed !important;
  /* Kill UA popover centering (inset 0 / margin auto) without locking longhands. */
  margin: 0 !important;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: max-content;
  height: fit-content;
  overflow: visible;
  box-sizing: border-box;

  z-index: 2147483046;
  max-width: min(300px, calc(100vw - 20px));
  min-width: 160px;
  color: rgba(248, 250, 252, 0.95);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none; /* hover tooltips shouldn't steal pointer */

  /* Same low-profile key face treatment as .key */
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-top-color: rgba(255, 255, 255, 0.12);
  border-bottom-color: rgba(0, 0, 0, 0.5);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 18%,
      transparent 42%),
    linear-gradient(180deg,
      var(--kp-key-face) 0%,
      var(--kp-key-mid) 70%,
      var(--kp-key-deep) 100%);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 10px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

/* Closed: both attribute + Popover API states */
.kp-keybindings-popover:not(:popover-open):not([data-kp-popover-open="true"]),
.kp-keybindings-popover[hidden] {
  display: none !important;
}

/* Open via Popover API or legacy fallback flag */
.kp-keybindings-popover:popover-open,
.kp-keybindings-popover[data-kp-popover-open="true"] {
  display: block;
  /* Re-assert after :popover-open (UA may reapply margin/inset). */
  margin: 0 !important;
  position: fixed !important;
}

.kp-keybindings-popover .kp-popover-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 6px 0;
}

.kp-keybindings-popover .kp-popover-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-top-color: rgba(255, 255, 255, 0.1);
  /* Glyph uses same darker icon color as keys */
  background-color: var(--kp-key-icon);
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 62% 62%;
  mask-size: 62% 62%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.kp-keybindings-popover .kp-popover-icon[hidden] {
  display: none;
}

.kp-keybindings-popover .kp-popover-title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.kp-keybindings-popover .kp-popover-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 3px 0;
}

.kp-keybindings-popover .kp-popover-title {
  font-weight: 700;
  margin: 0;
  min-width: 0;
  color: rgba(248, 250, 252, 0.96);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.kp-keybindings-popover .kp-popover-settings-hint {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.3;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.kp-keybindings-popover .kp-popover-settings-hint[hidden] {
  display: none !important;
}

.kp-keybindings-popover .kp-popover-keys {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  font-size: 11px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.kp-keybindings-popover .kp-popover-desc {
  margin: 0;
  color: rgba(248, 250, 252, 0.9);
  opacity: 0.95;
  font-size: 11.5px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.kp-keybindings-popover[data-kp-popover-pinned="true"] {
  pointer-events: auto;
  max-width: min(340px, calc(100vw - 20px));
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.01) 18%,
      transparent 42%),
    linear-gradient(180deg,
      var(--kp-key-face) 0%,
      var(--kp-key-mid) 70%,
      var(--kp-key-deep) 100%);
  outline: 1.5px solid color-mix(in srgb, var(--kp-key-face) 45%, white);
  outline-offset: 0;
  border-color: color-mix(in srgb, var(--kp-key-face) 35%, black);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

.kp-keybindings-popover .kp-popover-settings {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kp-keybindings-popover .kp-popover-settings[hidden] {
  display: none !important;
}

.kp-popover-setting-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kp-popover-setting-label {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.55);
}

.kp-popover-mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.kp-popover-mode-btn {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  padding: 5px 8px;
  font: inherit;
  font-size: 11px;
  color: rgba(248, 250, 252, 0.92);
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.kp-popover-mode-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}

.kp-popover-config-btn {
  appearance: none;
  align-self: flex-start;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 11px;
  color: inherit;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.kp-keybindings-popover::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: var(--kp-arrow-left, 18px);
  border: 9px solid transparent;
}

.kp-keybindings-popover[data-placement="top"]::before {
  top: 100%;
  border-top-color: rgba(0, 0, 0, 0.45);
}

.kp-keybindings-popover[data-placement="top"]::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: var(--kp-arrow-left, 18px);
  top: calc(100% - 1px);
  border: 8px solid transparent;
  border-top-color: var(--kp-key-deep);
}

.kp-keybindings-popover[data-kp-popover-pinned="true"][data-placement="top"]::after {
  border-top-color: color-mix(in srgb, var(--kp-key-deep) 45%, black);
}

.kp-keybindings-popover[data-kp-popover-pinned="true"][data-placement="top"]::before {
  border-top-color: color-mix(in srgb, var(--kp-key-face) 45%, white);
}

.kp-keybindings-popover[data-placement="bottom"]::before {
  bottom: 100%;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.kp-keybindings-popover[data-placement="bottom"]::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: var(--kp-arrow-left, 18px);
  bottom: calc(100% - 1px);
  border: 8px solid transparent;
  border-bottom-color: var(--kp-key-face);
}

.kp-keybindings-popover[data-kp-popover-pinned="true"][data-placement="bottom"]::after {
  border-bottom-color: color-mix(in srgb, var(--kp-key-face) 45%, black);
}

.kp-keybindings-popover[data-kp-popover-pinned="true"][data-placement="bottom"]::before {
  border-bottom-color: color-mix(in srgb, var(--kp-key-face) 45%, white);
}

/* Font Awesome-style faded key background icons (behind white labels) */

.kp-keybindings-ui .key > .key-bg-icon {
  position: absolute;
  inset: 7%;
  z-index: 0;
  pointer-events: none;
  /*
   * Transparent until an action rule applies both a mask and paint color.
   * mask-image:none + solid background-color otherwise paints a dark rectangle
   * (was visible on unmapped action keys like COPY_HOVERED_IMAGE before its icon).
   */
  background-color: transparent;
  background-image: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: 86% 86%;
  mask-size: 86% 86%;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 0.92;
}

/*
 * IMPORTANT: do NOT force position:relative on all non-icon children.
 * Action names (.key-main) and letter labels (.key-label) are absolutely
 * layered; a later relative rule would put letters back into flex flow.
 */

.kp-keybindings-ui .key:hover > .key-bg-icon {
  opacity: 1;
}

/* Keys without functions/macros never paint an icon layer */
.kp-keybindings-ui .key:not([data-kp-action-id]):not([data-kp-macro-id]) > .key-bg-icon {
  display: none;
}

/*
 * Solid darken overlay for keydown feedback (more reliable than filter).
 * No opacity transition: when content-script replaces early-inject CSS (font URLs),
 * a transitioned opacity:0 rule animates from the UA default (1→0) and every key
 * briefly looks pressed — most noticeable on colored caps like K (KB Reference).
 */
.kp-keybindings-ui .key > .key-press-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  box-sizing: border-box;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.78);
  opacity: 0;
  pointer-events: none;
}

.kp-keybindings-ui .key.kp-key-pressed > .key-press-overlay,
.kp-keybindings-ui .key > .key-press-overlay.is-on {
  opacity: 1;
}

.kp-keybindings-ui .key[data-kp-action-id="ACTIVATE"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M320%200c17.7%200%2032%2014.3%2032%2032V176h16c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H352v16c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V240H272v16c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V240H192v80c0%2053%2043%2096%2096%2096h32c53%200%2096-43%2096-96V224h32c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H416V32c0-17.7-14.3-32-32-32H320zM192%2096c0-17.7-14.3-32-32-32H128C57.3%2064%200%20121.3%200%20192v96c0%2053%2043%2096%2096%2096h32c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H96c-17.7%200-32-14.3-32-32V192c0-35.3%2028.7-64%2064-64h32c17.7%200%2032-14.3%2032-32z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M320%200c17.7%200%2032%2014.3%2032%2032V176h16c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H352v16c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V240H272v16c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V240H192v80c0%2053%2043%2096%2096%2096h32c53%200%2096-43%2096-96V224h32c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H416V32c0-17.7-14.3-32-32-32H320zM192%2096c0-17.7-14.3-32-32-32H128C57.3%2064%200%20121.3%200%20192v96c0%2053%2043%2096%2096%2096h32c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H96c-17.7%200-32-14.3-32-32V192c0-35.3%2028.7-64%2064-64h32c17.7%200%2032-14.3%2032-32z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="ACTIVATE_NEW_TAB"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M320%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h82.7L201.4%20265.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L448%20109.3V192c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V32c0-17.7-14.3-32-32-32H320zM80%2032C35.8%2032%200%2067.8%200%20112V432c0%2044.2%2035.8%2080%2080%2080H400c44.2%200%2080-35.8%2080-80V320c0-17.7-14.3-32-32-32s-32%2014.3-32%2032V432c0%208.8-7.2%2016-16%2016H80c-8.8%200-16-7.2-16-16V112c0-8.8%207.2-16%2016-16H192c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H80z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M320%200c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h82.7L201.4%20265.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L448%20109.3V192c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V32c0-17.7-14.3-32-32-32H320zM80%2032C35.8%2032%200%2067.8%200%20112V432c0%2044.2%2035.8%2080%2080%2080H400c44.2%200%2080-35.8%2080-80V320c0-17.7-14.3-32-32-32s-32%2014.3-32%2032V432c0%208.8-7.2%2016-16%2016H80c-8.8%200-16-7.2-16-16V112c0-8.8%207.2-16%2016-16H192c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H80z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="ACTIVATE_NEW_TAB_BACKGROUND"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M64%20464H288c8.8%200%2016-7.2%2016-16V384h48v64c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V224c0-35.3%2028.7-64%2064-64h64v48H64c-8.8%200-16%207.2-16%2016V448c0%208.8%207.2%2016%2016%2016zM224%200c-35.3%200-64%2028.7-64%2064V288c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V64c0-35.3-28.7-64-64-64H224zm0%2048H448c8.8%200%2016%207.2%2016%2016V288c0%208.8-7.2%2016-16%2016H224c-8.8%200-16-7.2-16-16V64c0-8.8%207.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M64%20464H288c8.8%200%2016-7.2%2016-16V384h48v64c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V224c0-35.3%2028.7-64%2064-64h64v48H64c-8.8%200-16%207.2-16%2016V448c0%208.8%207.2%2016%2016%2016zM224%200c-35.3%200-64%2028.7-64%2064V288c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V64c0-35.3-28.7-64-64-64H224zm0%2048H448c8.8%200%2016%207.2%2016%2016V288c0%208.8-7.2%2016-16%2016H224c-8.8%200-16-7.2-16-16V64c0-8.8%207.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="BACK"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M9.4%20233.4c-12.5%2012.5-12.5%2032.8%200%2045.3l192%20192c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.3%20288%20480%20288c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-370.7%200%20137.4-137.4c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-192%20192z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M9.4%20233.4c-12.5%2012.5-12.5%2032.8%200%2045.3l192%20192c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.3%20288%20480%20288c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-370.7%200%20137.4-137.4c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-192%20192z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="BACK2"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M9.4%20233.4c-12.5%2012.5-12.5%2032.8%200%2045.3l192%20192c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.3%20288%20480%20288c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-370.7%200%20137.4-137.4c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-192%20192z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M9.4%20233.4c-12.5%2012.5-12.5%2032.8%200%2045.3l192%20192c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.3%20288%20480%20288c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-370.7%200%20137.4-137.4c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-192%20192z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="FORWARD"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M502.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-192-192c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L402.7%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l370.7%200-137.4%20137.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l192-192z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M502.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-192-192c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L402.7%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l370.7%200-137.4%20137.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l192-192z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="DELETE"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M135.2%2017.7L128%2032H32C14.3%2032%200%2046.3%200%2064S14.3%2096%2032%2096H480c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H384l-7.2-14.3C372.4%206.8%20361.3%200%20349.2%200H162.8c-12.1%200-23.2%206.8-28.6%2017.7zM32%20128V448c0%2035.3%2028.7%2064%2064%2064H416c35.3%200%2064-28.7%2064-64V128H32zm112%2064c8.8%200%2016%207.2%2016%2016V400c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V208c0-8.8%207.2-16%2016-16zm96%200c8.8%200%2016%207.2%2016%2016V400c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V208c0-8.8%207.2-16%2016-16zm96%200c8.8%200%2016%207.2%2016%2016V400c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V208c0-8.8%207.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M135.2%2017.7L128%2032H32C14.3%2032%200%2046.3%200%2064S14.3%2096%2032%2096H480c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H384l-7.2-14.3C372.4%206.8%20361.3%200%20349.2%200H162.8c-12.1%200-23.2%206.8-28.6%2017.7zM32%20128V448c0%2035.3%2028.7%2064%2064%2064H416c35.3%200%2064-28.7%2064-64V128H32zm112%2064c8.8%200%2016%207.2%2016%2016V400c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V208c0-8.8%207.2-16%2016-16zm96%200c8.8%200%2016%207.2%2016%2016V400c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V208c0-8.8%207.2-16%2016-16zm96%200c8.8%200%2016%207.2%2016%2016V400c0%208.8-7.2%2016-16%2016s-16-7.2-16-16V208c0-8.8%207.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="COLS_TOGGLE"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zm64%2064V416H224V160H64zm320%200H288V416H448V160z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zm64%2064V416H224V160H64zm320%200H288V416H448V160z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="TAB_LEFT"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M41.4%20233.4c-12.5%2012.5-12.5%2032.8%200%2045.3l160%20160c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.3%20256%20246.6%20118.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-160%20160z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M41.4%20233.4c-12.5%2012.5-12.5%2032.8%200%2045.3l160%20160c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.3%20256%20246.6%20118.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-160%20160z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="TAB_RIGHT"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M470.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L402.7%20256%20265.4%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M470.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L402.7%20256%20265.4%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="ROOT"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M575.8%20255.5c0%2018-15%2032.1-32%2032.1h-32l.7%20160.2c.2%2035.5-28.5%2064.3-64%2064.3H392c-22.1%200-40-17.9-40-40V448%20384c0-17.7-14.3-32-32-32H256c-17.7%200-32%2014.3-32%2032v64%2024c0%2022.1-17.9%2040-40%2040H128.1c-35.3%200-64-28.7-64-64V287.6H32c-18%200-32-14-32-32.1c0-9%203-17%2010-24L266.4%208c7-7%2015-8%2022-8s15%202%2021%207L564.8%20231.5c8%207%2012%2015%2011%2024z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M575.8%20255.5c0%2018-15%2032.1-32%2032.1h-32l.7%20160.2c.2%2035.5-28.5%2064.3-64%2064.3H392c-22.1%200-40-17.9-40-40V448%20384c0-17.7-14.3-32-32-32H256c-17.7%200-32%2014.3-32%2032v64%2024c0%2022.1-17.9%2040-40%2040H128.1c-35.3%200-64-28.7-64-64V287.6H32c-18%200-32-14-32-32.1c0-9%203-17%2010-24L266.4%208c7-7%2015-8%2022-8s15%202%2021%207L564.8%20231.5c8%207%2012%2015%2011%2024z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="LAUNCHER"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M156.6%20384.9L125.7%20354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9%207-20.5%2011.8-33.8L24%20288c-8.6%200-16.6-4.6-20.9-12.1s-4.2-16.7%20.2-24.1l52.5-88.5c13-21.9%2036.5-35.3%2061.9-35.3h82.3c2.4-4%204.8-7.7%207.2-11.3C289.1-4.1%20411.1-8.1%20483.9%205.3c11.6%202.1%2020.6%2011.2%2022.8%2022.8c13.4%2072.9%209.3%20194.8-111.4%20276.7c-3.5%202.4-7.3%204.8-11.3%207.2v82.3c0%2025.4-13.4%2049-35.3%2061.9l-88.5%2052.5c-7.4%204.4-16.6%204.5-24.1%20.2s-12.1-12.2-12.1-20.9V384.9c-13.3%204.8-24.9%208.8-33.8%2011.8c-11.4%203.7-23.7%20.7-32.2-7.8zM215.3%20237.3c28.3-28.3%2073.1-31.3%20105.4-8.5L200.5%20348.5c-22.8-32.3-19.8-77.1%208.5-105.4l6.3-5.8z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M156.6%20384.9L125.7%20354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9%207-20.5%2011.8-33.8L24%20288c-8.6%200-16.6-4.6-20.9-12.1s-4.2-16.7%20.2-24.1l52.5-88.5c13-21.9%2036.5-35.3%2061.9-35.3h82.3c2.4-4%204.8-7.7%207.2-11.3C289.1-4.1%20411.1-8.1%20483.9%205.3c11.6%202.1%2020.6%2011.2%2022.8%2022.8c13.4%2072.9%209.3%20194.8-111.4%20276.7c-3.5%202.4-7.3%204.8-11.3%207.2v82.3c0%2025.4-13.4%2049-35.3%2061.9l-88.5%2052.5c-7.4%204.4-16.6%204.5-24.1%20.2s-12.1-12.2-12.1-20.9V384.9c-13.3%204.8-24.9%208.8-33.8%2011.8c-11.4%203.7-23.7%20.7-32.2-7.8zM215.3%20237.3c28.3-28.3%2073.1-31.3%20105.4-8.5L200.5%20348.5c-22.8-32.3-19.8-77.1%208.5-105.4l6.3-5.8z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="TOP_SITES"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M32%2096l224-80%20224%2080L256%20176%2032%2096zM32%20192l224%2080%20224-80%200%2032L256%20304%2032%20224l0-32zm0%2096l224%2080%20224-80%200%2032L256%20400%2032%20320l0-32z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M32%2096l224-80%20224%2080L256%20176%2032%2096zM32%20192l224%2080%20224-80%200%2032L256%20304%2032%20224l0-32zm0%2096l224%2080%20224-80%200%2032L256%20400%2032%20320l0-32z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="CLOSE_TAB"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2048a208%20208%200%201%201%200%20416%20208%20208%200%201%201%200-416zm0%20464A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM175%20175c9.4-9.4%2024.6-9.4%2033.9%200l47%2047%2047-47c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9l-47%2047%2047%2047c9.4%209.4%209.4%2024.6%200%2033.9s-24.6%209.4-33.9%200l-47-47-47%2047c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l47-47-47-47c-9.4-9.4-9.4-24.6%200-33.9z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2048a208%20208%200%201%201%200%20416%20208%20208%200%201%201%200-416zm0%20464A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM175%20175c9.4-9.4%2024.6-9.4%2033.9%200l47%2047%2047-47c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9l-47%2047%2047%2047c9.4%209.4%209.4%2024.6%200%2033.9s-24.6%209.4-33.9%200l-47-47-47%2047c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l47-47-47-47c-9.4-9.4-9.4-24.6%200-33.9z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="CANCEL"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM175%20175c9.4-9.4%2024.6-9.4%2033.9%200L368%20334.1c9.4%209.4%209.4%2024.6%200%2033.9s-24.6%209.4-33.9%200L175%20208.9c-9.4-9.4-9.4-24.6%200-33.9z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM175%20175c9.4-9.4%2024.6-9.4%2033.9%200L368%20334.1c9.4%209.4%209.4%2024.6%200%2033.9s-24.6%209.4-33.9%200L175%20208.9c-9.4-9.4-9.4-24.6%200-33.9z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="PAGE_UP_INSTANT"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M233.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200l192%20192c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L256%20173.3%2086.6%20342.6c-12.5%2012.5-32.8%2012.5-45.3%200s-12.5-32.8%200-45.3l192-192z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M233.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200l192%20192c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L256%20173.3%2086.6%20342.6c-12.5%2012.5-32.8%2012.5-45.3%200s-12.5-32.8%200-45.3l192-192z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="PAGE_DOWN_INSTANT"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="PAGE_TOP"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M233.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200l96%2096c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L288%20205.3V384c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V205.3l-41.4%2041.4c-12.5%2012.5-32.8%2012.5-45.3%200s-12.5-32.8%200-45.3l96-96zM64%20448c0-17.7%2014.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H96c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M233.4%20105.4c12.5-12.5%2032.8-12.5%2045.3%200l96%2096c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L288%20205.3V384c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V205.3l-41.4%2041.4c-12.5%2012.5-32.8%2012.5-45.3%200s-12.5-32.8%200-45.3l96-96zM64%20448c0-17.7%2014.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H96c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="PAGE_BOTTOM"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l96-96c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L288%20306.7V128c0-17.7-14.3-32-32-32s-32%2014.3-32%2032V306.7l-41.4-41.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l96%2096zM64%2064c0-17.7%2014.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H96C78.3%2096%2064%2081.7%2064%2064z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l96-96c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L288%20306.7V128c0-17.7-14.3-32-32-32s-32%2014.3-32%2032V306.7l-41.4-41.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l96%2096zM64%2064c0-17.7%2014.3-32%2032-32H416c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H96C78.3%2096%2064%2081.7%2064%2064z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="SCROLL_LINE"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="NEW_TAB"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M64%2032C28.7%2032%200%2060.7%200%2096V416c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V160c0-35.3-28.7-64-64-64H298.5c-17%200-33.3-6.7-45.3-18.7L226.7%2050.7C214.7%2038.7%20198.5%2032%20181.5%2032H64zM232%20248v-48c0-13.3%2010.7-24%2024-24s24%2010.7%2024%2024v48h48c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H280v48c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24V296H184c-13.3%200-24-10.7-24-24s10.7-24%2024-24h48z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M64%2032C28.7%2032%200%2060.7%200%2096V416c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V160c0-35.3-28.7-64-64-64H298.5c-17%200-33.3-6.7-45.3-18.7L226.7%2050.7C214.7%2038.7%20198.5%2032%20181.5%2032H64zM232%20248v-48c0-13.3%2010.7-24%2024-24s24%2010.7%2024%2024v48h48c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H280v48c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24V296H184c-13.3%200-24-10.7-24-24s10.7-24%2024-24h48z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="OPEN_POPOVER"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M64%2032C28.7%2032%200%2060.7%200%2096V416c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V96c0-35.3-28.7-64-64-64H64zm32%2096H416c17.7%200%2032%2014.3%2032%2032v32H64V160c0-17.7%2014.3-32%2032-32z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M64%2032C28.7%2032%200%2060.7%200%2096V416c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V96c0-35.3-28.7-64-64-64H64zm32%2096H416c17.7%200%2032%2014.3%2032%2032v32H64V160c0-17.7%2014.3-32%2032-32z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="PREVIEW_LINK_POPOVER"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2096c-89.6%200-168.5%2048.8-212.7%20122.3c-7.3%2012.1-7.3%2027.3%200%2039.4C87.5%20331.2%20166.4%20380%20256%20380s168.5-48.8%20212.7-122.3c7.3-12.1%207.3-27.3%200-39.4C424.5%20144.8%20345.6%2096%20256%2096zm0%20224a96%2096%200%201%201%200-192%2096%2096%200%201%201%200%20192zm0-144a48%2048%200%201%200%200%2096%2048%2048%200%201%200%200-96z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2096c-89.6%200-168.5%2048.8-212.7%20122.3c-7.3%2012.1-7.3%2027.3%200%2039.4C87.5%20331.2%20166.4%20380%20256%20380s168.5-48.8%20212.7-122.3c7.3-12.1%207.3-27.3%200-39.4C424.5%20144.8%20345.6%2096%20256%2096zm0%20224a96%2096%200%201%201%200-192%2096%2096%200%201%201%200%20192zm0-144a48%2048%200%201%200%200%2096%2048%2048%200%201%200%200-96z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="POI_WEBSITE"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M352%20256c0%2022.2-1.2%2043.6-3.3%2064H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6%203.3-64H348.7c2.2%2020.4%203.3%2041.8%203.3%2064zm28.8-64H503.9c5.3%2020.5%208.1%2041.9%208.1%2064s-2.8%2043.5-8.1%2064H380.8c2.1-20.6%203.2-42%203.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3%2020.7%20142%2077.5%20171.9%20151.6zm-196.8%200H167.7c6.1-36.4%2015.5-68.6%2027-94.7c10.5-23.6%2022.2-40.7%2033.5-51.5C239.4%203.2%20248.7%200%20256%200s16.6%203.2%2027.8%2013.8c11.3%2010.8%2023%2027.9%2033.5%2051.5c11.6%2026%2020.9%2058.2%2027%2094.7zm-144%200H18.6C48.6%2085.9%20112.2%2029.1%20190.6%208.4C165.1%2042.6%20145.3%2096.1%20135.3%20160zM8.1%20192H131.2c-2.1%2020.6-3.2%2042-3.2%2064s1.1%2043.4%203.2%2064H8.1C2.8%20299.5%200%20278.1%200%20256s2.8-43.5%208.1-64zM194.7%20446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1%2036.4-15.5%2068.6-27%2094.6c-10.5%2023.6-22.2%2040.7-33.5%2051.5C272.6%20508.8%20263.3%20512%20256%20512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3%20352c10%2063.9%2029.8%20117.4%2055.3%20151.6C112.2%20482.9%2048.6%20426.1%2018.6%20352H135.3zm358.1%200c-30%2074.1-93.6%20130.9-171.9%20151.6c25.5-34.2%2045.2-87.7%2055.3-151.6H493.4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M352%20256c0%2022.2-1.2%2043.6-3.3%2064H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6%203.3-64H348.7c2.2%2020.4%203.3%2041.8%203.3%2064zm28.8-64H503.9c5.3%2020.5%208.1%2041.9%208.1%2064s-2.8%2043.5-8.1%2064H380.8c2.1-20.6%203.2-42%203.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3%2020.7%20142%2077.5%20171.9%20151.6zm-196.8%200H167.7c6.1-36.4%2015.5-68.6%2027-94.7c10.5-23.6%2022.2-40.7%2033.5-51.5C239.4%203.2%20248.7%200%20256%200s16.6%203.2%2027.8%2013.8c11.3%2010.8%2023%2027.9%2033.5%2051.5c11.6%2026%2020.9%2058.2%2027%2094.7zm-144%200H18.6C48.6%2085.9%20112.2%2029.1%20190.6%208.4C165.1%2042.6%20145.3%2096.1%20135.3%20160zM8.1%20192H131.2c-2.1%2020.6-3.2%2042-3.2%2064s1.1%2043.4%203.2%2064H8.1C2.8%20299.5%200%20278.1%200%20256s2.8-43.5%208.1-64zM194.7%20446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1%2036.4-15.5%2068.6-27%2094.6c-10.5%2023.6-22.2%2040.7-33.5%2051.5C272.6%20508.8%20263.3%20512%20256%20512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3%20352c10%2063.9%2029.8%20117.4%2055.3%20151.6C112.2%20482.9%2048.6%20426.1%2018.6%20352H135.3zm358.1%200c-30%2074.1-93.6%20130.9-171.9%20151.6c25.5-34.2%2045.2-87.7%2055.3-151.6H493.4z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="POI_ADDRESS"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2064c-70.7%200-128%2057.3-128%20128c0%2082.4%2092.3%20197.6%20118.7%20227.5c4.8%205.4%2013.8%205.4%2018.6%200C291.7%20389.6%20384%20274.4%20384%20192c0-70.7-57.3-128-128-128zm0%20176a48%2048%200%201%201%200-96%2048%2048%200%201%201%200%2096z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2064c-70.7%200-128%2057.3-128%20128c0%2082.4%2092.3%20197.6%20118.7%20227.5c4.8%205.4%2013.8%205.4%2018.6%200C291.7%20389.6%20384%20274.4%20384%20192c0-70.7-57.3-128-128-128zm0%20176a48%2048%200%201%201%200-96%2048%2048%200%201%201%200%2096z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="OPEN_SETTINGS_POPOVER"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M9.405%201.05c-.413-1.4-2.397-1.4-2.81%200l-.1.34a1.464%201.464%200%200%201-2.275.819l-.31-.17c-1.283-.698-2.686.705-1.987%201.987l.169.311c.446.82.023%201.841-.82%202.275l-.34.1c-1.4.413-1.4%202.397%200%202.81l.34.1a1.464%201.464%200%200%201%20.82%202.275l-.17.31c-.698%201.283.705%202.686%201.987%201.987l.311-.169a1.464%201.464%200%200%201%202.275.82l.1.34c.413%201.4%202.397%201.4%202.81%200l.1-.34a1.464%201.464%200%200%201%202.275-.82l.31.17c1.283.698%202.686-.705%201.987-1.987l-.169-.311a1.464%201.464%200%200%201%20.82-2.275l.34-.1c1.4-.413%201.4-2.397%200-2.81l-.34-.1a1.464%201.464%200%200%201-.82-2.275l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464%201.464%200%200%201-2.275-.82zM8%2010.93a2.93%202.93%200%201%201%200-5.86%202.93%202.93%200%200%201%200%205.86z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M9.405%201.05c-.413-1.4-2.397-1.4-2.81%200l-.1.34a1.464%201.464%200%200%201-2.275.819l-.31-.17c-1.283-.698-2.686.705-1.987%201.987l.169.311c.446.82.023%201.841-.82%202.275l-.34.1c-1.4.413-1.4%202.397%200%202.81l.34.1a1.464%201.464%200%200%201%20.82%202.275l-.17.31c-.698%201.283.705%202.686%201.987%201.987l.311-.169a1.464%201.464%200%200%201%202.275.82l.1.34c.413%201.4%202.397%201.4%202.81%200l.1-.34a1.464%201.464%200%200%201%202.275-.82l.31.17c1.283.698%202.686-.705%201.987-1.987l-.169-.311a1.464%201.464%200%200%201%20.82-2.275l.34-.1c1.4-.413%201.4-2.397%200-2.81l-.34-.1a1.464%201.464%200%200%201-.82-2.275l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464%201.464%200%200%201-2.275-.82zM8%2010.93a2.93%202.93%200%201%201%200-5.86%202.93%202.93%200%200%201%200%205.86z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="OMNIBOX"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M416%20208c0%2045.9-14.9%2088.3-40%20122.7L502.6%20457.4c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L330.7%20376c-34.4%2025.2-76.8%2040-122.7%2040C93.1%20416%200%20322.9%200%20208S93.1%200%20208%200S416%2093.1%20416%20208zM208%20352a144%20144%200%201%200%200-288%20144%20144%200%201%200%200%20288z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M416%20208c0%2045.9-14.9%2088.3-40%20122.7L502.6%20457.4c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L330.7%20376c-34.4%2025.2-76.8%2040-122.7%2040C93.1%20416%200%20322.9%200%20208S93.1%200%20208%200S416%2093.1%20416%20208zM208%20352a144%20144%200%201%200%200-288%20144%20144%200%201%200%200%20288z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="TAB_HISTORY"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%200C114.6%200%200%20114.6%200%20256S114.6%20512%20256%20512c53%200%20102-16.2%20142.7-43.9c10.8-7.4%2013.6-22.3%206.2-33.1s-22.3-13.6-33.1-6.2C340.8%20449.1%20299.6%20464%20256%20464C141.1%20464%2048%20370.9%2048%20256S141.1%2048%20256%2048c60.7%200%20115.5%2026.1%20153.4%2067.7l-33.5%2033.5c-9.4%209.4-2.7%2025.5%2010.5%2025.5H456c13.3%200%2024-10.7%2024-24V56c0-13.2-16.1-19.9-25.5-10.5L418.7%2081.3C368.5%2031.4%20315.1%200%20256%200zM232%20120c0-13.3-10.7-24-24-24s-24%2010.7-24%2024V256c0%206.4%202.5%2012.5%207%2017l72%2072c9.4%209.4%2024.6%209.4%2033.9%200s9.4-24.6%200-33.9l-65-65V120z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%200C114.6%200%200%20114.6%200%20256S114.6%20512%20256%20512c53%200%20102-16.2%20142.7-43.9c10.8-7.4%2013.6-22.3%206.2-33.1s-22.3-13.6-33.1-6.2C340.8%20449.1%20299.6%20464%20256%20464C141.1%20464%2048%20370.9%2048%20256S141.1%2048%20256%2048c60.7%200%20115.5%2026.1%20153.4%2067.7l-33.5%2033.5c-9.4%209.4-2.7%2025.5%2010.5%2025.5H456c13.3%200%2024-10.7%2024-24V56c0-13.2-16.1-19.9-25.5-10.5L418.7%2081.3C368.5%2031.4%20315.1%200%20256%200zM232%20120c0-13.3-10.7-24-24-24s-24%2010.7-24%2024V256c0%206.4%202.5%2012.5%207%2017l72%2072c9.4%209.4%2024.6%209.4%2033.9%200s9.4-24.6%200-33.9l-65-65V120z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="TOGGLE_KEYBOARD_HELP"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zm128%2064v32h32V160H128zm64%200v32h32V160H192zm64%200v32h32V160H256zm64%200v32h32V160H320zm64%200v32h32V160H384zM96%20256v32h64V256H96zm96%200v32h32V256H192zm64%200v32h32V256H256zm64%200v32h32V256H320zm64%200v32h32V256H384zm64%200v32h32V256H448zM128%20352v32H384V352H128z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zm128%2064v32h32V160H128zm64%200v32h32V160H192zm64%200v32h32V160H256zm64%200v32h32V160H320zm64%200v32h32V160H384zM96%20256v32h64V256H96zm96%200v32h32V256H192zm64%200v32h32V256H256zm64%200v32h32V256H320zm64%200v32h32V256H384zm64%200v32h32V256H448zM128%20352v32H384V352H128z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="HIGHLIGHT"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M128%2064c0-17.7%2014.3-32%2032-32H352c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H288v128h64c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H288v128h64c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H160c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64V288H160c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64V96H160c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M128%2064c0-17.7%2014.3-32%2032-32H352c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H288v128h64c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H288v128h64c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H160c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64V288H160c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64V96H160c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="RECTANGLE_HIGHLIGHT"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M32%2032C14.3%2032%200%2046.3%200%2064v64c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V96h64c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H32zM32%20320c-17.7%200-32%2014.3-32%2032v64c0%2017.7%2014.3%2032%2032%2032h64c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H64V352c0-17.7-14.3-32-32-32zM320%2064c0%2017.7%2014.3%2032%2032%2032h64v64c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V64c0-17.7-14.3-32-32-32H352c-17.7%200-32%2014.3-32%2032zM480%20320c-17.7%200-32%2014.3-32%2032v64H384c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h64c17.7%200%2032-14.3%2032-32V352c0-17.7-14.3-32-32-32z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M32%2032C14.3%2032%200%2046.3%200%2064v64c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V96h64c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H32zM32%20320c-17.7%200-32%2014.3-32%2032v64c0%2017.7%2014.3%2032%2032%2032h64c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H64V352c0-17.7-14.3-32-32-32zM320%2064c0%2017.7%2014.3%2032%2032%2032h64v64c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V64c0-17.7-14.3-32-32-32H352c-17.7%200-32%2014.3-32%2032zM480%20320c-17.7%200-32%2014.3-32%2032v64H384c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h64c17.7%200%2032-14.3%2032-32V352c0-17.7-14.3-32-32-32z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="COPY_HOVERED_IMAGE"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zM323.8%20202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4%203.9-19.8%2010.5l-87%20127.6L170.7%20297c-4.6-5.7-11.5-9-18.7-9s-14.2%203.3-18.7%209l-64%2080c-5.8%207.2-6.9%2017.1-2.9%2025.4s12.4%2013.6%2021.6%2013.6h96%2032H424c8.9%200%2017.1-4.9%2021.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112%20192a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zM323.8%20202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4%203.9-19.8%2010.5l-87%20127.6L170.7%20297c-4.6-5.7-11.5-9-18.7-9s-14.2%203.3-18.7%209l-64%2080c-5.8%207.2-6.9%2017.1-2.9%2025.4s12.4%2013.6%2021.6%2013.6h96%2032H424c8.9%200%2017.1-4.9%2021.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112%20192a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="COPY_HOVERED_URL"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M326.612%20185.391c59.747%2059.809%2058.927%20155.698.36%20214.59-.11.12-.24.25-.36.37l-67.2%2067.2c-59.27%2059.27-155.699%2059.262-214.96%200-59.27-59.26-59.27-155.7%200-214.96l37.106-37.106c9.84-9.84%2026.786-3.3%2027.294%2010.606.648%2017.722%203.826%2035.527%209.69%2052.721%201.986%205.822.567%2012.262-3.783%2016.612l-13.087%2013.087c-28.026%2028.026-28.026%2073.66%200%20101.682%2028.026%2028.026%2073.66%2028.026%20101.682%200l67.2-67.2c28.026-28.026%2028.026-73.66%200-101.682-3.794-3.808-7.368-5.703-10.954-6.817-10.756-3.356-22.666%201.983-27.085%2012.227-5.575%2012.941-17.35%2020.326-30.978%2020.326-12.802%200-22.414-11.312-19.101-23.541%206.027-22.318%209.025-49.922%202.753-73.389-13.415-49.971.392-102.811%2037.393-139.813%2059.17-59.117%20154.849-59.262%20214.096-.31zM213.388%20326.609c-59.747-59.809-58.927-155.698-.36-214.59.11-.12.24-.25.36-.37l67.2-67.2c59.27-59.27%20155.699-59.262%20214.96%200%2059.27%2059.26%2059.27%20155.7%200%20214.96l-37.106%2037.106c-9.84%209.84-26.786%203.3-27.294-10.606-.648-17.722-3.826-35.527-9.69-52.721-1.986-5.822-.567-12.262%203.783-16.612l13.087-13.087c28.026-28.026%2028.026-73.66%200-101.682-28.026-28.026-73.66-28.026-101.682%200l-67.2%2067.2c-28.026%2028.026-28.026%2073.66%200%20101.682%203.794%203.808%207.368%205.703%2010.954%206.817%2010.756%203.356%2022.666-1.983%2027.085-12.227%205.575-12.941%2017.35-20.326%2030.978-20.326%2012.802%200%2022.414%2011.312%2019.101%2023.541-6.027%2022.318-9.025%2049.922-2.753%2073.389%2013.415%2049.971-.392%20102.811-37.393%20139.813-59.17%2059.117-154.849%2059.262-214.096.31z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M326.612%20185.391c59.747%2059.809%2058.927%20155.698.36%20214.59-.11.12-.24.25-.36.37l-67.2%2067.2c-59.27%2059.27-155.699%2059.262-214.96%200-59.27-59.26-59.27-155.7%200-214.96l37.106-37.106c9.84-9.84%2026.786-3.3%2027.294%2010.606.648%2017.722%203.826%2035.527%209.69%2052.721%201.986%205.822.567%2012.262-3.783%2016.612l-13.087%2013.087c-28.026%2028.026-28.026%2073.66%200%20101.682%2028.026%2028.026%2073.66%2028.026%20101.682%200l67.2-67.2c28.026-28.026%2028.026-73.66%200-101.682-3.794-3.808-7.368-5.703-10.954-6.817-10.756-3.356-22.666%201.983-27.085%2012.227-5.575%2012.941-17.35%2020.326-30.978%2020.326-12.802%200-22.414-11.312-19.101-23.541%206.027-22.318%209.025-49.922%202.753-73.389-13.415-49.971.392-102.811%2037.393-139.813%2059.17-59.117%20154.849-59.262%20214.096-.31zM213.388%20326.609c-59.747-59.809-58.927-155.698-.36-214.59.11-.12.24-.25.36-.37l67.2-67.2c59.27-59.27%20155.699-59.262%20214.96%200%2059.27%2059.26%2059.27%20155.7%200%20214.96l-37.106%2037.106c-9.84%209.84-26.786%203.3-27.294-10.606-.648-17.722-3.826-35.527-9.69-52.721-1.986-5.822-.567-12.262%203.783-16.612l13.087-13.087c28.026-28.026%2028.026-73.66%200-101.682-28.026-28.026-73.66-28.026-101.682%200l-67.2%2067.2c-28.026%2028.026-28.026%2073.66%200%20101.682%203.794%203.808%207.368%205.703%2010.954%206.817%2010.756%203.356%2022.666-1.983%2027.085-12.227%205.575-12.941%2017.35-20.326%2030.978-20.326%2012.802%200%2022.414%2011.312%2019.101%2023.541-6.027%2022.318-9.025%2049.922-2.753%2073.389%2013.415%2049.971-.392%20102.811-37.393%20139.813-59.17%2059.117-154.849%2059.262-214.096.31z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="COPY_HOVERED_VIDEO"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%20128C0%2092.7%2028.7%2064%2064%2064H320c35.3%200%2064%2028.7%2064%2064V384c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V128zM559.1%2099.8c10.4%205.6%2016.9%2016.4%2016.9%2028.2V384c0%2011.8-6.5%2022.6-16.9%2028.2s-23%206-32.9%201.3L384%20337.1V174.9l142.2-76.4c9.8-4.7%2022.4-4.3%2032.9%201.3z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%20128C0%2092.7%2028.7%2064%2064%2064H320c35.3%200%2064%2028.7%2064%2064V384c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V128zM559.1%2099.8c10.4%205.6%2016.9%2016.4%2016.9%2028.2V384c0%2011.8-6.5%2022.6-16.9%2028.2s-23%206-32.9%201.3L384%20337.1V174.9l142.2-76.4c9.8-4.7%2022.4-4.3%2032.9%201.3z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="FONT_INFO"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="PAGE_MEDIA"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zM323.8%20202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4%203.9-19.8%2010.5l-87%20127.6L170.7%20297c-4.6-5.7-11.5-9-18.7-9s-14.2%203.3-18.7%209l-64%2080c-5.8%207.2-6.9%2017.1-2.9%2025.4s12.4%2013.6%2021.6%2013.6h96%2032H424c8.9%200%2017.1-4.9%2021.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112%20192a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zM323.8%20202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4%203.9-19.8%2010.5l-87%20127.6L170.7%20297c-4.6-5.7-11.5-9-18.7-9s-14.2%203.3-18.7%209l-64%2080c-5.8%207.2-6.9%2017.1-2.9%2025.4s12.4%2013.6%2021.6%2013.6h96%2032H424c8.9%200%2017.1-4.9%2021.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112%20192a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="OPEN_MEDIA_LIBRARY"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zM323.8%20202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4%203.9-19.8%2010.5l-87%20127.6L170.7%20297c-4.6-5.7-11.5-9-18.7-9s-14.2%203.3-18.7%209l-64%2080c-5.8%207.2-6.9%2017.1-2.9%2025.4s12.4%2013.6%2021.6%2013.6h96%2032H424c8.9%200%2017.1-4.9%2021.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112%20192a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zM323.8%20202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4%203.9-19.8%2010.5l-87%20127.6L170.7%20297c-4.6-5.7-11.5-9-18.7-9s-14.2%203.3-18.7%209l-64%2080c-5.8%207.2-6.9%2017.1-2.9%2025.4s12.4%2013.6%2021.6%2013.6h96%2032H424c8.9%200%2017.1-4.9%2021.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112%20192a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="CLIPBOARD_COPY"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M192%200c35.3%200%2064%2028.7%2064%2064l0%2032%20112%200c35.3%200%2064%2028.7%2064%2064l0%20288c0%2035.3-28.7%2064-64%2064L64%20512c-35.3%200-64-28.7-64-64L0%20160c0-35.3%2028.7-64%2064-64l112%200%200-32c0-35.3%2028.7-64%2064-64zm0%2064l0%2032%2064%200%200-32c0-17.7-14.3-32-32-32s-32%2014.3-32%2032zM64%20160l0%20288c0%2017.7%2014.3%2032%2032%2032l256%200c17.7%200%2032-14.3%2032-32l0-288c0-17.7-14.3-32-32-32L64%20128c-17.7%200-32%2014.3-32%2032z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M192%200c35.3%200%2064%2028.7%2064%2064l0%2032%20112%200c35.3%200%2064%2028.7%2064%2064l0%20288c0%2035.3-28.7%2064-64%2064L64%20512c-35.3%200-64-28.7-64-64L0%20160c0-35.3%2028.7-64%2064-64l112%200%200-32c0-35.3%2028.7-64%2064-64zm0%2064l0%2032%2064%200%200-32c0-17.7-14.3-32-32-32s-32%2014.3-32%2032zM64%20160l0%20288c0%2017.7%2014.3%2032%2032%2032l256%200c17.7%200%2032-14.3%2032-32l0-288c0-17.7-14.3-32-32-32L64%20128c-17.7%200-32%2014.3-32%2032z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="CLIPBOARD_CUT"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M44.6%2066.2l117.5%20117.5c-4.7%208-7.1%2017-7.1%2026.3c0%2026.5%2021.5%2048%2048%2048s48-21.5%2048-48s-21.5-48-48-48c-4.8%200-9.4%20.7-13.7%202L44.6%2066.2C39.3%2060.9%2030.7%2060.9%2025.4%2066.2S20.1%2080.1%2025.4%2085.4L44.6%2066.2zM203.2%20237.8L85.4%20355.6c-5.3%205.3-5.3%2013.9%200%2019.2s13.9%205.3%2019.2%200l117.8-117.8c4.3%201.3%208.9%202%2013.7%202c26.5%200%2048-21.5%2048-48s-21.5-48-48-48c-9.3%200-18.3%202.4-26.3%207.1zM432%20144c26.5%200%2048-21.5%2048-48s-21.5-48-48-48s-48%2021.5-48%2048s21.5%2048%2048%2048zm0%20256c26.5%200%2048-21.5%2048-48s-21.5-48-48-48s-48%2021.5-48%2048s21.5%2048%2048%2048zM162.6%20466.2c5.3%205.3%2013.9%205.3%2019.2%200L467.4%20180.6c5.3-5.3%205.3-13.9%200-19.2s-13.9-5.3-19.2%200L162.6%20447c-5.3%205.3-5.3%2013.9%200%2019.2z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M44.6%2066.2l117.5%20117.5c-4.7%208-7.1%2017-7.1%2026.3c0%2026.5%2021.5%2048%2048%2048s48-21.5%2048-48s-21.5-48-48-48c-4.8%200-9.4%20.7-13.7%202L44.6%2066.2C39.3%2060.9%2030.7%2060.9%2025.4%2066.2S20.1%2080.1%2025.4%2085.4L44.6%2066.2zM203.2%20237.8L85.4%20355.6c-5.3%205.3-5.3%2013.9%200%2019.2s13.9%205.3%2019.2%200l117.8-117.8c4.3%201.3%208.9%202%2013.7%202c26.5%200%2048-21.5%2048-48s-21.5-48-48-48c-9.3%200-18.3%202.4-26.3%207.1zM432%20144c26.5%200%2048-21.5%2048-48s-21.5-48-48-48s-48%2021.5-48%2048s21.5%2048%2048%2048zm0%20256c26.5%200%2048-21.5%2048-48s-21.5-48-48-48s-48%2021.5-48%2048s21.5%2048%2048%2048zM162.6%20466.2c5.3%205.3%2013.9%205.3%2019.2%200L467.4%20180.6c5.3-5.3%205.3-13.9%200-19.2s-13.9-5.3-19.2%200L162.6%20447c-5.3%205.3-5.3%2013.9%200%2019.2z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="CLIPBOARD_PASTE"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M192%200c35.3%200%2064%2028.7%2064%2064l0%2032%20112%200c35.3%200%2064%2028.7%2064%2064l0%20288c0%2035.3-28.7%2064-64%2064L64%20512c-35.3%200-64-28.7-64-64L0%20160c0-35.3%2028.7-64%2064-64l112%200%200-32c0-35.3%2028.7-64%2064-64zm0%2064l0%2032%2064%200%200-32c0-17.7-14.3-32-32-32s-32%2014.3-32%2032zM64%20160l0%20288c0%2017.7%2014.3%2032%2032%2032l256%200c17.7%200%2032-14.3%2032-32l0-288c0-17.7-14.3-32-32-32L64%20128c-17.7%200-32%2014.3-32%2032z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M192%200c35.3%200%2064%2028.7%2064%2064l0%2032%20112%200c35.3%200%2064%2028.7%2064%2064l0%20288c0%2035.3-28.7%2064-64%2064L64%20512c-35.3%200-64-28.7-64-64L0%20160c0-35.3%2028.7-64%2064-64l112%200%200-32c0-35.3%2028.7-64%2064-64zm0%2064l0%2032%2064%200%200-32c0-17.7-14.3-32-32-32s-32%2014.3-32%2032zM64%20160l0%20288c0%2017.7%2014.3%2032%2032%2032l256%200c17.7%200%2032-14.3%2032-32l0-288c0-17.7-14.3-32-32-32L64%20128c-17.7%200-32%2014.3-32%2032z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="CLIPBOARD_SELECT_ALL"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="SELECT_WORD"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="SELECT_SENTENCE"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="SELECT_PARAGRAPH"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="SELECT_IMAGE"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zM323.8%20202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4%203.9-19.8%2010.5l-87%20127.6L170.7%20297c-4.6-5.7-11.5-9-18.7-9s-14.2%203.3-18.7%209l-64%2080c-5.8%207.2-6.9%2017.1-2.9%2025.4s12.4%2013.6%2021.6%2013.6h96%2032H424c8.9%200%2017.1-4.9%2021.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112%20192a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zM323.8%20202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4%203.9-19.8%2010.5l-87%20127.6L170.7%20297c-4.6-5.7-11.5-9-18.7-9s-14.2%203.3-18.7%209l-64%2080c-5.8%207.2-6.9%2017.1-2.9%2025.4s12.4%2013.6%2021.6%2013.6h96%2032H424c8.9%200%2017.1-4.9%2021.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112%20192a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="SEND_TEXT_TO_AI"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M32%20160c0-35.3%2028.7-64%2064-64l32%200%200-32c0-17.7%2014.3-32%2032-32s32%2014.3%2032%2032l0%2032%20128%200%200-32c0-17.7%2014.3-32%2032-32s32%2014.3%2032%2032l0%2032%2032%200c35.3%200%2064%2028.7%2064%2064l0%2032%2032%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-32%200%200%20128c0%2035.3-28.7%2064-64%2064l-16%200%200%2048c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32l0-48-128%200%200%2048c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32l0-48-16%200c-35.3%200-64-28.7-64-64l0-128-32%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l32%200%200-32zm96%2064a32%2032%200%201%200%200%2064%2032%2032%200%201%200%200-64zm128%2032a32%2032%200%201%200%2064%200%2032%2032%200%201%200-64%200z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M32%20160c0-35.3%2028.7-64%2064-64l32%200%200-32c0-17.7%2014.3-32%2032-32s32%2014.3%2032%2032l0%2032%20128%200%200-32c0-17.7%2014.3-32%2032-32s32%2014.3%2032%2032l0%2032%2032%200c35.3%200%2064%2028.7%2064%2064l0%2032%2032%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032l-32%200%200%20128c0%2035.3-28.7%2064-64%2064l-16%200%200%2048c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32l0-48-128%200%200%2048c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32l0-48-16%200c-35.3%200-64-28.7-64-64l0-128-32%200c-17.7%200-32-14.3-32-32s14.3-32%2032-32l32%200%200-32zm96%2064a32%2032%200%201%200%200%2064%2032%2032%200%201%200%200-64zm128%2032a32%2032%200%201%200%2064%200%2032%2032%200%201%200-64%200z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="SEND_HOTKEY"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zm128%2064v32h32V160H128zm64%200v32h32V160H192zm64%200v32h32V160H256zm64%200v32h32V160H320zm64%200v32h32V160H384zM96%20256v32h64V256H96zm96%200v32h32V256H192zm64%200v32h32V256H256zm64%200v32h32V256H320zm64%200v32h32V256H384zm64%200v32h32V256H448zM128%20352v32H384V352H128z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zm128%2064v32h32V160H128zm64%200v32h32V160H192zm64%200v32h32V160H256zm64%200v32h32V160H320zm64%200v32h32V160H384zM96%20256v32h64V256H96zm96%200v32h32V256H192zm64%200v32h32V256H256zm64%200v32h32V256H320zm64%200v32h32V256H384zm64%200v32h32V256H448zM128%20352v32H384V352H128z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="SEND_BURST"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M234.5%205.7c13.9-5%2029.1-.6%2038.2%2010.9l144%20176c9.2%2011.2%2011.2%2027.1%205.1%2040.3s-19.2%2021.1-33.3%2021.1L320%20254V432c0%2026.5-21.5%2048-48%2048H176c-26.5%200-48-21.5-48-48V254H53.5c-14.1%200-27.1-7.9-33.3-21.1s-4.1-29%205.1-40.3l144-176c9.2-11.5%2024.3-15.9%2038.2-10.9z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M234.5%205.7c13.9-5%2029.1-.6%2038.2%2010.9l144%20176c9.2%2011.2%2011.2%2027.1%205.1%2040.3s-19.2%2021.1-33.3%2021.1L320%20254V432c0%2026.5-21.5%2048-48%2048H176c-26.5%200-48-21.5-48-48V254H53.5c-14.1%200-27.1-7.9-33.3-21.1s-4.1-29%205.1-40.3l144-176c9.2-11.5%2024.3-15.9%2038.2-10.9z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="CYCLE_ROUND_ROBIN"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M105.1%20202.6c7.7-21.8%2020.2-42.3%2037.8-59.1c62.5-62.5%20163.8-62.5%20226.3%200L417.3%20192%20384%20192c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l96%200%2016%200c17.7%200%2032-14.3%2032-32l0-96c0-17.7-14.3-32-32-32s-32%2014.3-32%2032l0%2036.7L425.4%2089.9C332.4-3.1%20181.2-3.1%2088.2%2089.9c-29.1%2029.1-48.5%2064.9-56.5%20103.5c-3.8%2018.5%2010.1%2036.9%2029.1%2036.9c14.2%200%2026.8-9.9%2030.3-23.7zM406.9%20309.4c-7.7%2021.8-20.2%2042.3-37.8%2059.1c-62.5%2062.5-163.8%2062.5-226.3%200L94.7%20320l33.3%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L32%20256l-16%200C-1.7%20256-16%20270.3-16%20288l0%2096c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-36.7%2033.9%2033.9C186.8%20515.1%20338%20515.1%20431%20422.1c29.1-29.1%2048.5-64.9%2056.5-103.5c3.8-18.5-10.1-36.9-29.1-36.9c-14.2%200-26.8%209.9-30.3%2023.7z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M105.1%20202.6c7.7-21.8%2020.2-42.3%2037.8-59.1c62.5-62.5%20163.8-62.5%20226.3%200L417.3%20192%20384%20192c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l96%200%2016%200c17.7%200%2032-14.3%2032-32l0-96c0-17.7-14.3-32-32-32s-32%2014.3-32%2032l0%2036.7L425.4%2089.9C332.4-3.1%20181.2-3.1%2088.2%2089.9c-29.1%2029.1-48.5%2064.9-56.5%20103.5c-3.8%2018.5%2010.1%2036.9%2029.1%2036.9c14.2%200%2026.8-9.9%2030.3-23.7zM406.9%20309.4c-7.7%2021.8-20.2%2042.3-37.8%2059.1c-62.5%2062.5-163.8%2062.5-226.3%200L94.7%20320l33.3%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32L32%20256l-16%200C-1.7%20256-16%20270.3-16%20288l0%2096c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-36.7%2033.9%2033.9C186.8%20515.1%20338%20515.1%20431%20422.1c29.1-29.1%2048.5-64.9%2056.5-103.5c3.8-18.5-10.1-36.9-29.1-36.9c-14.2%200-26.8%209.9-30.3%2023.7z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="HOLD_CONTINUOUS"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="CLICK_MOUSE_BUTTON"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M320%200c17.7%200%2032%2014.3%2032%2032V176h16c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H352v16c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V240H272v16c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V240H192v80c0%2053%2043%2096%2096%2096h32c53%200%2096-43%2096-96V224h32c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H416V32c0-17.7-14.3-32-32-32H320zM192%2096c0-17.7-14.3-32-32-32H128C57.3%2064%200%20121.3%200%20192v96c0%2053%2043%2096%2096%2096h32c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H96c-17.7%200-32-14.3-32-32V192c0-35.3%2028.7-64%2064-64h32c17.7%200%2032-14.3%2032-32z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M320%200c17.7%200%2032%2014.3%2032%2032V176h16c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H352v16c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V240H272v16c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V240H192v80c0%2053%2043%2096%2096%2096h32c53%200%2096-43%2096-96V224h32c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H416V32c0-17.7-14.3-32-32-32H320zM192%2096c0-17.7-14.3-32-32-32H128C57.3%2064%200%20121.3%200%20192v96c0%2053%2043%2096%2096%2096h32c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H96c-17.7%200-32-14.3-32-32V192c0-35.3%2028.7-64%2064-64h32c17.7%200%2032-14.3%2032-32z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="REMAP_KEY"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zm128%2064v32h32V160H128zm64%200v32h32V160H192zm64%200v32h32V160H256zm64%200v32h32V160H320zm64%200v32h32V160H384zM96%20256v32h64V256H96zm96%200v32h32V256H192zm64%200v32h32V256H256zm64%200v32h32V256H320zm64%200v32h32V256H384zm64%200v32h32V256H448zM128%20352v32H384V352H128z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zm128%2064v32h32V160H128zm64%200v32h32V160H192zm64%200v32h32V160H256zm64%200v32h32V160H320zm64%200v32h32V160H384zM96%20256v32h64V256H96zm96%200v32h32V256H192zm64%200v32h32V256H256zm64%200v32h32V256H320zm64%200v32h32V256H384zm64%200v32h32V256H448zM128%20352v32H384V352H128z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="TYPE_CHARACTERS"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="EXECUTE_JS"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M318.4%2073.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L402.7%20248%20273.1%20377.6c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l152-152c12.5-12.5%2012.5-32.8%200-45.3l-152-152zm-124.8%200c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-152%20152c-12.5%2012.5-12.5%2032.8%200%2045.3l152%20152c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.3%20248%20193.6%20163.7c12.5-12.5%2012.5-32.8%200-45.3z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M318.4%2073.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L402.7%20248%20273.1%20377.6c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l152-152c12.5-12.5%2012.5-32.8%200-45.3l-152-152zm-124.8%200c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-152%20152c-12.5%2012.5-12.5%2032.8%200%2045.3l152%20152c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.3%20248%20193.6%20163.7c12.5-12.5%2012.5-32.8%200-45.3z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="GET_TEXT_AT_CURSOR"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M128%2064c0-17.7%2014.3-32%2032-32H352c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H288v128h64c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H288v128h64c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H160c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64V288H160c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64V96H160c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M128%2064c0-17.7%2014.3-32%2032-32H352c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H288v128h64c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H288v128h64c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032H160c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64V288H160c-17.7%200-32-14.3-32-32s14.3-32%2032-32h64V96H160c-17.7%200-32-14.3-32-32z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="GET_TEXT_RANGE"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c6.1%2010.4%206.1%2023.3%200%2033.7s-17.4%2016.5-29.9%2016.5H35.4c-12.5%200-23.8-6.6-29.9-16.5s-6.1-23.3%200-33.7l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%2088.4L96.7%20392h318.6L256%20120.4z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="GET_MEDIA_AT_CURSOR"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zM323.8%20202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4%203.9-19.8%2010.5l-87%20127.6L170.7%20297c-4.6-5.7-11.5-9-18.7-9s-14.2%203.3-18.7%209l-64%2080c-5.8%207.2-6.9%2017.1-2.9%2025.4s12.4%2013.6%2021.6%2013.6h96%2032H424c8.9%200%2017.1-4.9%2021.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112%20192a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M0%2096C0%2060.7%2028.7%2032%2064%2032H448c35.3%200%2064%2028.7%2064%2064V416c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64V96zM323.8%20202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4%203.9-19.8%2010.5l-87%20127.6L170.7%20297c-4.6-5.7-11.5-9-18.7-9s-14.2%203.3-18.7%209l-64%2080c-5.8%207.2-6.9%2017.1-2.9%2025.4s12.4%2013.6%2021.6%2013.6h96%2032H424c8.9%200%2017.1-4.9%2021.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112%20192a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="LOOKUP_WORD"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M96%200C43%200%200%2043%200%2096L0%20416c0%2053%2043%2096%2096%2096l288%200%2032%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l0-64c17.7%200%2032-14.3%2032-32l0-320c0-17.7-14.3-32-32-32L384%200%2096%200zM384%20416l0%2032L96%20448c-17.7%200-32-14.3-32-32s14.3-32%2032-32l288%200zM112%2064l160%200c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016l-160%200c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm0%2096l160%200c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016l-160%200c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm0%2096l96%200c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016l-96%200c-8.8%200-16-7.2-16-16s7.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M96%200C43%200%200%2043%200%2096L0%20416c0%2053%2043%2096%2096%2096l288%200%2032%200c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l0-64c17.7%200%2032-14.3%2032-32l0-320c0-17.7-14.3-32-32-32L384%200%2096%200zM384%20416l0%2032L96%20448c-17.7%200-32-14.3-32-32s14.3-32%2032-32l288%200zM112%2064l160%200c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016l-160%200c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm0%2096l160%200c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016l-160%200c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm0%2096l96%200c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016l-96%200c-8.8%200-16-7.2-16-16s7.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="TRANSLATE"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M478.3%2073.8c-5.7-10.7-16.8-17.3-28.7-17.3l-51.1%200c-12.5%200-24.7%204.9-33.7%2013.7L192%20242.7%2096%20146.7c-9-8.8-21.2-13.7-33.7-13.7L11.2%20133C-.7%20133-11.8%20139.6-17.5%20150.3S-24%20174.1-18.5%20185.3L73.1%20352%2018.5%20454.7C13%20465.9%2016.1%20478.9%2024.9%20486.6S47.1%20496%2058.5%20490.5L160%20432.9%20261.5%20490.5c11.4%205.5%2024.9%202.6%2033.7-5.1s11.9-20.7%206.4-32.1L246.9%20352%20338.5%20185.3c5.5-11.2%202.4-24.2-6.4-31.9zM192%20309.3L128%20192l64%20117.3zm192-245.3L480%20192%20384%2064z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M478.3%2073.8c-5.7-10.7-16.8-17.3-28.7-17.3l-51.1%200c-12.5%200-24.7%204.9-33.7%2013.7L192%20242.7%2096%20146.7c-9-8.8-21.2-13.7-33.7-13.7L11.2%20133C-.7%20133-11.8%20139.6-17.5%20150.3S-24%20174.1-18.5%20185.3L73.1%20352%2018.5%20454.7C13%20465.9%2016.1%20478.9%2024.9%20486.6S47.1%20496%2058.5%20490.5L160%20432.9%20261.5%20490.5c11.4%205.5%2024.9%202.6%2033.7-5.1s11.9-20.7%206.4-32.1L246.9%20352%20338.5%20185.3c5.5-11.2%202.4-24.2-6.4-31.9zM192%20309.3L128%20192l64%20117.3zm192-245.3L480%20192%20384%2064z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="SHOW_POPOVER"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M64%2032C28.7%2032%200%2060.7%200%2096V416c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V96c0-35.3-28.7-64-64-64H64zm32%2096H416c17.7%200%2032%2014.3%2032%2032v32H64V160c0-17.7%2014.3-32%2032-32z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M64%2032C28.7%2032%200%2060.7%200%2096V416c0%2035.3%2028.7%2064%2064%2064H448c35.3%200%2064-28.7%2064-64V96c0-35.3-28.7-64-64-64H64zm32%2096H416c17.7%200%2032%2014.3%2032%2032v32H64V160c0-17.7%2014.3-32%2032-32z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="ADD_URL_TO_MEDIA_LIBRARY"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2080c0-17.7-14.3-32-32-32s-32%2014.3-32%2032V224H48c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032H192V432c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V288H400c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H256V80z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M256%2080c0-17.7-14.3-32-32-32s-32%2014.3-32%2032V224H48c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032H192V432c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V288H400c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H256V80z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-action-id="FETCH_URL_FOR_MEDIA_LIBRARY"] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M233.4%20406.6c12.5%2012.5%2032.8%2012.5%2045.3%200l192-192c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L256%20338.7%2086.6%20169.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l192%20192z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }
.kp-keybindings-ui .key[data-kp-macro-id] > .key-bg-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M32%2096l224-80%20224%2080L256%20176%2032%2096zM32%20192l224%2080%20224-80%200%2032L256%20304%2032%20224l0-32zm0%2096l224%2080%20224-80%200%2032L256%20400%2032%20320l0-32z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M32%2096l224-80%20224%2080L256%20176%2032%2096zM32%20192l224%2080%20224-80%200%2032L256%20304%2032%20224l0-32zm0%2096l224%2080%20224-80%200%2032L256%20400%2032%20320l0-32z%22%2F%3E%3C%2Fsvg%3E"); background-color: var(--kp-key-icon, #0c1018); }

/*
 * TEMP suspended: Floating Keyboard Reference flex-scale keys with panel resize.
 * Keys use the global fixed 50px keycap rules again. Re-enable together with
 * makePopoverResizable in floating-keyboard-help.js when resuming this work.
 *
 * .kp-floating-keyboard-help .kp-floating-keyboard-help__keyboard {
 *   box-sizing: border-box;
 *   flex: 1 1 auto;
 *   min-height: 0;
 *   width: 100%;
 *   height: 100%;
 *   display: flex;
 *   flex-direction: column;
 * }
 * .kp-floating-keyboard-help .keyboard-visual.kp-keybindings-ui {
 *   flex: 1 1 auto;
 *   min-height: 0;
 *   width: 100%;
 *   height: 100%;
 *   display: flex;
 *   flex-direction: column;
 *   gap: 7px;
 *   padding: clamp(4px, 1.2%, 10px);
 * }
 * .kp-floating-keyboard-help .kp-keybindings-ui .keyboard-row {
 *   flex: 1 1 0;
 *   min-height: 0;
 *   margin-bottom: 0;
 *   gap: clamp(3px, 0.7%, 7px);
 *   align-items: stretch;
 * }
 * .kp-floating-keyboard-help .kp-keybindings-ui .key,
 * .kp-floating-keyboard-help .kp-keybindings-ui .key.key-tab,
 * .kp-floating-keyboard-help .kp-keybindings-ui .key.key-caps,
 * .kp-floating-keyboard-help .kp-keybindings-ui .key.key-enter,
 * .kp-floating-keyboard-help .kp-keybindings-ui .key.key-shift,
 * .kp-floating-keyboard-help .kp-keybindings-ui .key.key-backspace {
 *   height: 100%;
 *   min-height: 0;
 *   max-height: none;
 *   border-radius: clamp(5px, 12%, 10px);
 *   container-type: size;
 *   container-name: kp-key;
 * }
 * .kp-floating-keyboard-help .kp-keybindings-ui .key > .key-main {
 *   font-size: clamp(9px, 18cqh, 15px);
 *   max-height: 55%;
 *   top: clamp(2px, 8cqh, 8px);
 * }
 * .kp-floating-keyboard-help .kp-keybindings-ui .key > .key-label {
 *   font-size: clamp(10px, 22cqh, 18px);
 *   bottom: clamp(2px, 8cqh, 8px);
 * }
 * .kp-floating-keyboard-help .kp-keybindings-ui .key > .key-text {
 *   font-size: clamp(9px, 18cqh, 15px);
 *   bottom: clamp(2px, 8cqh, 8px);
 * }
 */
`;
  const KP_ALL_THEMES_CSS = `:host([data-kp-theme="dark-pro"]), [data-kp-theme="dark-pro"] {
  --kp-theme-id: dark-pro;
  --kp-font-display: Helvetica, Arial, sans-serif;
  --kp-font-heading: Helvetica, Arial, sans-serif;
  --kp-font-subhead: Helvetica, Arial, sans-serif;
  --kp-font-body: Helvetica, Arial, sans-serif;
  --kp-font-ui: Helvetica, Arial, sans-serif;
  --kp-font-kbd: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --kp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --kp-font-caption: Helvetica, Arial, sans-serif;
  --kp-type-scale: 1.25;
  --kp-type-display-size: 22px;
  --kp-type-h1-size: 22px;
  --kp-type-h2-size: 16px;
  --kp-type-h3-size: 14px;
  --kp-type-body-size: 13px;
  --kp-type-ui-size: 12px;
  --kp-type-kbd-size: 10px;
  --kp-type-caption-size: 11px;
  --kp-type-code-size: 12px;
  --kp-type-weight-regular: 400;
  --kp-type-weight-medium: 500;
  --kp-type-weight-semibold: 600;
  --kp-type-weight-bold: 700;
  --kp-type-tracking-display: 0.02em;
  --kp-type-tracking-titlebar: 0.02em;
  --kp-type-tracking-ui: normal;
  --kp-type-transform-display: none;
  --kp-type-transform-titlebar: none;
  --kp-titlebar-title-weight: 600;
  --kp-titlebar-icon-display: none;
  --kp-titlebar-icon-size: 12px;
  --kp-kbd-transform: none;
  --kp-kbd-tracking: 0.02em;
  --kp-type-leading-tight: 1.2;
  --kp-type-leading-body: 1.35;
  --kp-type-leading-prose: 1.55;
  --kp-radius-none: 0px;
  --kp-radius-xs: 2px;
  --kp-radius-sm: 3px;
  --kp-radius-md: 6px;
  --kp-radius-lg: 10px;
  --kp-radius-pill: 999px;
  --kp-radius-panel: 3px;
  --kp-radius-btn: 2px;
  --kp-radius-field: 2px;
  --kp-radius-key: 7px;
  --kp-radius-plate: 14px;
  --kp-color-bg: #0f0f10;
  --kp-color-panel: #232323;
  --kp-color-panel-edge: #3a3a3a;
  --kp-color-panel-edge-dark: #111;
  --kp-color-title-top: #4c4c4c;
  --kp-color-title-mid: #353535;
  --kp-color-title-bot: #252525;
  --kp-color-btn-top: #4a4a4a;
  --kp-color-btn-mid: #343434;
  --kp-color-btn-bot: #2a2a2a;
  --kp-color-lit-top: #5a7a9a;
  --kp-color-lit-bot: #3a5570;
  --kp-color-lit-edge: #2a4a66;
  --kp-color-accent: #4a90c8;
  --kp-color-accent-2: #4a90c8;
  --kp-color-fg: #ddd;
  --kp-color-fg-dim: #aaa;
  --kp-color-fg-mute: #777;
  --kp-color-field-bg: #141414;
  --kp-color-field-edge: #0a0a0a;
  --kp-color-field-inset: #333;
  --kp-color-hover: rgba(255,255,255,0.06);
  --kp-color-selected: rgba(74,144,200,0.22);
  --kp-color-selected-text: #e8f0f8;
  --kp-color-focus-ring: inset 0 0 0 1px rgba(74,144,200,0.55);
  --kp-color-kbd-fg: #ddd;
  --kp-titlebar-bg: linear-gradient(180deg, #4c4c4c 0%, #353535 45%, #252525 100%);
  --kp-titlebar-border: 1px solid #111;
  --kp-titlebar-shadow: 0 1px 0 #3a3a3a;
  --kp-panel-bg: #232323;
  --kp-panel-border: 1px solid #111;
  --kp-panel-shadow: 0 0 0 1px #3a3a3a inset, 0 0 0 1px rgba(190, 190, 190, 0.52), 0 0 10px rgba(255, 255, 255, 0.14), 0 16px 40px rgba(0,0,0,0.55);
  --kp-btn-bg: linear-gradient(180deg, #4a4a4a 0%, #343434 50%, #2a2a2a 100%);
  --kp-btn-border: 1px solid #111;
  --kp-btn-lit-bg: linear-gradient(180deg, #5a7a9a 0%, #3a5570 100%);
  --kp-btn-lit-border: 1px solid #2a4a66;
  --kp-field-bg: #141414;
  --kp-field-border: 1px solid #0a0a0a;
  --kp-field-shadow: inset 0 1px 0 #333;
  --kp-kbd-bg: #141414;
  --kp-kbd-border: 1px solid #111;
  --kp-kbd-shadow: none;
  --kp-backdrop-bg: rgba(0,0,0,0.35);
  --kp-backdrop-blur: blur(6px);
  --kp-hatch-edit: repeating-linear-gradient(-45deg, rgba(180, 200, 220, 0.08) 0px, rgba(180, 200, 220, 0.08) 1px, transparent 1px, transparent 7px);
  --kp-hatch-edit-titlebar-bg: linear-gradient(180deg, #646464 0%, #4a4a4a 45%, #383838 100%);
  --kp-hatch-edit-body-bg: #1a1c20;
  --kp-scrollbar-thumb: #4a4a4a;
  --kp-scrollbar-thumb-hover: #5c5c5c;
  --kp-scrollbar-track: #141414;
  --kp-corner-mode: radius;
  --kp-cut-size: 0px;
  --kp-key-shading: bevel;
  --kp-key-border: 1px solid rgba(0, 0, 0, 0.4);
  --kp-key-corner-mode: radius;
  --kp-key-cut-size: 4px;
  --kp-key-clip: none;
  --kp-key-effective-radius: 7px;
  --kp-key-shape-radius: 7px;
  --kp-key-corner-shape: round;
  --kp-key-sheen-opacity: 1;
  --kp-key-shade-layer: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 18%, transparent 42%);
  --kp-icon-chrome: #ddd;
  --kp-icon-keycap: #0c1018;
  --kp-icon-accent: #4a90c8;
  --kp-key-icon: #0c1018;
}
:host([data-kp-theme="gray-metal-pro"]), [data-kp-theme="gray-metal-pro"] {
  --kp-theme-id: gray-metal-pro;
  --kp-font-display: Helvetica, Arial, sans-serif;
  --kp-font-heading: Helvetica, Arial, sans-serif;
  --kp-font-subhead: Helvetica, Arial, sans-serif;
  --kp-font-body: Helvetica, Arial, sans-serif;
  --kp-font-ui: Helvetica, Arial, sans-serif;
  --kp-font-kbd: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --kp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --kp-font-caption: Helvetica, Arial, sans-serif;
  --kp-type-scale: 1.25;
  --kp-type-display-size: 22px;
  --kp-type-h1-size: 22px;
  --kp-type-h2-size: 16px;
  --kp-type-h3-size: 14px;
  --kp-type-body-size: 13px;
  --kp-type-ui-size: 12px;
  --kp-type-kbd-size: 10px;
  --kp-type-caption-size: 11px;
  --kp-type-code-size: 12px;
  --kp-type-weight-regular: 400;
  --kp-type-weight-medium: 500;
  --kp-type-weight-semibold: 600;
  --kp-type-weight-bold: 700;
  --kp-type-tracking-display: 0.02em;
  --kp-type-tracking-titlebar: 0.02em;
  --kp-type-tracking-ui: normal;
  --kp-type-transform-display: none;
  --kp-type-transform-titlebar: none;
  --kp-titlebar-title-weight: 600;
  --kp-titlebar-icon-display: none;
  --kp-titlebar-icon-size: 12px;
  --kp-kbd-transform: none;
  --kp-kbd-tracking: 0.02em;
  --kp-type-leading-tight: 1.2;
  --kp-type-leading-body: 1.35;
  --kp-type-leading-prose: 1.55;
  --kp-radius-none: 0px;
  --kp-radius-xs: 2px;
  --kp-radius-sm: 3px;
  --kp-radius-md: 6px;
  --kp-radius-lg: 10px;
  --kp-radius-pill: 999px;
  --kp-radius-panel: 3px;
  --kp-radius-btn: 2px;
  --kp-radius-field: 2px;
  --kp-radius-key: 7px;
  --kp-radius-plate: 14px;
  --kp-color-bg: #6e6e6e;
  --kp-color-panel: #838383;
  --kp-color-panel-edge: rgba(190,190,190,0.48);
  --kp-color-panel-edge-dark: rgba(42,52,62,0.92);
  --kp-color-title-top: #b0b0b0;
  --kp-color-title-mid: #929292;
  --kp-color-title-bot: #787878;
  --kp-color-btn-top: #c2c2c2;
  --kp-color-btn-mid: #9e9e9e;
  --kp-color-btn-bot: #868686;
  --kp-color-lit-top: #7aa0c0;
  --kp-color-lit-bot: #4a7090;
  --kp-color-lit-edge: #3a5a78;
  --kp-color-accent: #3a6a94;
  --kp-color-accent-2: #3a6a94;
  --kp-color-fg: #1c1c1c;
  --kp-color-fg-dim: rgba(28,28,28,0.72);
  --kp-color-fg-mute: rgba(28,28,28,0.55);
  --kp-color-field-bg: #9a9a9a;
  --kp-color-field-edge: #4a4a4a;
  --kp-color-field-inset: rgba(255,255,255,0.35);
  --kp-color-hover: rgba(255,255,255,0.22);
  --kp-color-selected: rgba(58,106,148,0.28);
  --kp-color-selected-text: #0e1a24;
  --kp-color-focus-ring: inset 0 0 0 1px rgba(58,106,148,0.55);
  --kp-color-kbd-fg: #141414;
  --kp-titlebar-bg: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.08) 28%, transparent 55%), linear-gradient(180deg, #b0b0b0 0%, #929292 45%, #787878 100%);
  --kp-titlebar-border: 1px solid #4a4a4a;
  --kp-titlebar-shadow: 0 1px 0 rgba(255,255,255,0.35);
  --kp-panel-bg: #838383;
  --kp-panel-border: 1px solid rgba(42,52,62,0.92);
  --kp-panel-shadow: 0 0 0 1px rgba(255,255,255,0.28) inset, 0 0 0 1px rgba(190,190,190,0.48), 0 0 10px rgba(255,255,255,0.12), 0 16px 40px rgba(0,0,0,0.45);
  --kp-btn-bg: linear-gradient(180deg, #c2c2c2 0%, #9e9e9e 50%, #868686 100%);
  --kp-btn-border: 1px solid #4a4a4a;
  --kp-btn-lit-bg: linear-gradient(180deg, #7aa0c0 0%, #4a7090 100%);
  --kp-btn-lit-border: 1px solid #3a5a78;
  --kp-field-bg: #9a9a9a;
  --kp-field-border: 1px solid #4a4a4a;
  --kp-field-shadow: inset 0 1px 0 rgba(255,255,255,0.40);
  --kp-kbd-bg: linear-gradient(180deg, #e4e4e4 0%, #c8c8c8 45%, #b0b0b0 55%, #9a9a9a 100%);
  --kp-kbd-border: 1px solid #3d3d3d;
  --kp-kbd-shadow: 0 1px 0 rgba(255,255,255,0.72) inset, 0 -1px 0 rgba(0,0,0,0.28) inset, 0 1px 2px rgba(0,0,0,0.32);
  --kp-backdrop-bg: rgba(40,40,40,0.35);
  --kp-backdrop-blur: blur(6px);
  --kp-hatch-edit: repeating-linear-gradient(-45deg, rgba(24, 24, 24, 0.28) 0px, rgba(24, 24, 24, 0.28) 1px, transparent 1px, transparent 7px);
  --kp-hatch-edit-titlebar-bg: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.08) 28%, transparent 55%), linear-gradient(180deg, #b8b8b8 0%, #9a9a9a 45%, #808080 100%);
  --kp-hatch-edit-body-bg: #8a8a8a;
  --kp-scrollbar-thumb: #a8a8a8;
  --kp-scrollbar-thumb-hover: #b5b5b5;
  --kp-scrollbar-track: #747474;
  --kp-corner-mode: radius;
  --kp-cut-size: 0px;
  --kp-key-shading: bevel;
  --kp-key-border: 1px solid rgba(0, 0, 0, 0.4);
  --kp-key-corner-mode: radius;
  --kp-key-cut-size: 4px;
  --kp-key-clip: none;
  --kp-key-effective-radius: 7px;
  --kp-key-shape-radius: 7px;
  --kp-key-corner-shape: round;
  --kp-key-sheen-opacity: 1;
  --kp-key-shade-layer: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 18%, transparent 42%);
  --kp-icon-chrome: #1c1c1c;
  --kp-icon-keycap: #1c1c1c;
  --kp-icon-accent: #3a6a94;
  --kp-key-icon: #1c1c1c;
}
:host([data-kp-theme="gx-er"]), [data-kp-theme="gx-er"] {
  --kp-theme-id: gx-er;
  --kp-font-display: 'ROBOTECHGPRegular', 'TitilliumText', Helvetica, Arial, sans-serif;
  --kp-font-heading: 'Cubellan', 'TitilliumText', Helvetica, Arial, sans-serif;
  --kp-font-subhead: 'TitilliumText', Helvetica, Arial, sans-serif;
  --kp-font-body: 'Ezarion', 'Dosis', Helvetica, Arial, sans-serif;
  --kp-font-ui: 'TitilliumText', Helvetica, Arial, sans-serif;
  --kp-font-kbd: 'Dosis', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --kp-font-mono: 'Dosis', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --kp-font-caption: 'Ezarion', Helvetica, Arial, sans-serif;
  --kp-type-scale: 1.25;
  --kp-type-display-size: 22px;
  --kp-type-h1-size: 22px;
  --kp-type-h2-size: 16px;
  --kp-type-h3-size: 14px;
  --kp-type-body-size: 13px;
  --kp-type-ui-size: 12px;
  --kp-type-kbd-size: 10px;
  --kp-type-caption-size: 11px;
  --kp-type-code-size: 12px;
  --kp-type-weight-regular: 400;
  --kp-type-weight-medium: 500;
  --kp-type-weight-semibold: 600;
  --kp-type-weight-bold: 700;
  --kp-type-tracking-display: 0.08em;
  --kp-type-tracking-titlebar: 0.06em;
  --kp-type-tracking-ui: 0.02em;
  --kp-type-transform-display: uppercase;
  --kp-type-transform-titlebar: uppercase;
  --kp-titlebar-title-weight: 700;
  --kp-titlebar-icon-display: inline-flex;
  --kp-titlebar-icon-size: 12px;
  --kp-kbd-transform: uppercase;
  --kp-kbd-tracking: 0.06em;
  --kp-type-leading-tight: 1.2;
  --kp-type-leading-body: 1.35;
  --kp-type-leading-prose: 1.55;
  --kp-radius-none: 0px;
  --kp-radius-xs: 0px;
  --kp-radius-sm: 0px;
  --kp-radius-md: 6px;
  --kp-radius-lg: 10px;
  --kp-radius-pill: 999px;
  --kp-radius-panel: 0px;
  --kp-radius-btn: 0px;
  --kp-radius-field: 0px;
  --kp-radius-key: 7px;
  --kp-radius-plate: 14px;
  --kp-color-bg: #0a0a0c;
  --kp-color-panel: #16161a;
  --kp-color-panel-edge: #2a2a32;
  --kp-color-panel-edge-dark: #050506;
  --kp-color-title-top: #2c2c34;
  --kp-color-title-mid: #1c1c22;
  --kp-color-title-bot: #121216;
  --kp-color-btn-top: #3a3a44;
  --kp-color-btn-mid: #26262e;
  --kp-color-btn-bot: #1a1a20;
  --kp-color-lit-top: #00e5ff;
  --kp-color-lit-bot: #0088aa;
  --kp-color-lit-edge: #006688;
  --kp-color-accent: #00e5ff;
  --kp-color-accent-2: #ff2d95;
  --kp-color-fg: #e8e8ef;
  --kp-color-fg-dim: #9aa0b0;
  --kp-color-fg-mute: #6a7080;
  --kp-color-field-bg: #0c0c10;
  --kp-color-field-edge: #000;
  --kp-color-field-inset: #333344;
  --kp-color-hover: rgba(0,229,255,0.08);
  --kp-color-selected: rgba(0,229,255,0.18);
  --kp-color-selected-text: #f0ffff;
  --kp-color-focus-ring: inset 0 0 0 1px rgba(0,229,255,0.55);
  --kp-color-kbd-fg: #00e5ff;
  --kp-titlebar-bg: linear-gradient(180deg, #2c2c34 0%, #1c1c22 45%, #121216 100%);
  --kp-titlebar-border: 1px solid #050506;
  --kp-titlebar-shadow: 0 1px 0 #00e5ff33;
  --kp-panel-bg: #16161a;
  --kp-panel-border: 1px solid #050506;
  --kp-panel-shadow: 0 0 0 1px #2a2a32 inset, 0 0 0 1px rgba(0, 229, 255, 0.22), 0 0 14px rgba(0, 229, 255, 0.12), 0 16px 40px rgba(0,0,0,0.65);
  --kp-btn-bg: linear-gradient(180deg, #3a3a44 0%, #26262e 50%, #1a1a20 100%);
  --kp-btn-border: 1px solid #050506;
  --kp-btn-lit-bg: linear-gradient(180deg, #00e5ff 0%, #0088aa 100%);
  --kp-btn-lit-border: 1px solid #006688;
  --kp-field-bg: #0c0c10;
  --kp-field-border: 1px solid #000;
  --kp-field-shadow: inset 0 1px 0 #333344;
  --kp-kbd-bg: rgba(0, 229, 255, 0.08);
  --kp-kbd-border: 1px solid #00e5ff;
  --kp-kbd-shadow: 0 0 0 1px #00e5ff55, 0 0 8px #00e5ff44;
  --kp-backdrop-bg: rgba(0,0,0,0.5);
  --kp-backdrop-blur: blur(8px);
  --kp-hatch-edit: repeating-linear-gradient(-45deg, rgba(0, 229, 255, 0.16) 0px, rgba(0, 229, 255, 0.16) 1px, transparent 1px, transparent 7px);
  --kp-hatch-edit-titlebar-bg: linear-gradient(180deg, #2c2c34 0%, #1c1c22 45%, #121216 100%);
  --kp-hatch-edit-body-bg: #101014;
  --kp-scrollbar-thumb: #3a3a44;
  --kp-scrollbar-thumb-hover: #00e5ff;
  --kp-scrollbar-track: #0c0c10;
  --kp-corner-mode: cut;
  --kp-cut-size: 8px;
  --kp-key-shading: flat;
  --kp-key-border: 1px solid rgba(0, 229, 255, 0.35);
  --kp-key-corner-mode: cut;
  --kp-key-cut-size: 4px;
  --kp-key-clip: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  --kp-key-effective-radius: 0px;
  --kp-key-shape-radius: 4px;
  --kp-key-corner-shape: bevel;
  --kp-key-sheen-opacity: 0;
  --kp-key-shade-layer: transparent;
  --kp-icon-chrome: #00e5ff;
  --kp-icon-keycap: #001018;
  --kp-icon-accent: #00e5ff;
  --kp-key-icon: #001018;
}
[data-kp-theme="dark-pro"][data-kp-surface="onboarding"], [data-kp-theme="dark-pro"] [data-kp-surface="onboarding"] {
  --kp-theme-id: dark-pro;
  --kp-font-display: Helvetica, Arial, sans-serif;
  --kp-font-heading: Helvetica, Arial, sans-serif;
  --kp-font-subhead: Helvetica, Arial, sans-serif;
  --kp-font-body: Helvetica, Arial, sans-serif;
  --kp-font-ui: Helvetica, Arial, sans-serif;
  --kp-font-kbd: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --kp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --kp-font-caption: Helvetica, Arial, sans-serif;
  --kp-type-scale: 1.25;
  --kp-type-display-size: 22px;
  --kp-type-h1-size: 22px;
  --kp-type-h2-size: 16px;
  --kp-type-h3-size: 14px;
  --kp-type-body-size: 13px;
  --kp-type-ui-size: 12px;
  --kp-type-kbd-size: 10px;
  --kp-type-caption-size: 11px;
  --kp-type-code-size: 12px;
  --kp-type-weight-regular: 400;
  --kp-type-weight-medium: 500;
  --kp-type-weight-semibold: 600;
  --kp-type-weight-bold: 700;
  --kp-type-tracking-display: 0.02em;
  --kp-type-tracking-titlebar: 0.02em;
  --kp-type-tracking-ui: normal;
  --kp-type-transform-display: none;
  --kp-type-transform-titlebar: none;
  --kp-titlebar-title-weight: 600;
  --kp-titlebar-icon-display: none;
  --kp-titlebar-icon-size: 12px;
  --kp-kbd-transform: none;
  --kp-kbd-tracking: 0.02em;
  --kp-type-leading-tight: 1.2;
  --kp-type-leading-body: 1.35;
  --kp-type-leading-prose: 1.55;
  --kp-radius-none: 0px;
  --kp-radius-xs: 2px;
  --kp-radius-sm: 3px;
  --kp-radius-md: 6px;
  --kp-radius-lg: 10px;
  --kp-radius-pill: 999px;
  --kp-radius-panel: 3px;
  --kp-radius-btn: 2px;
  --kp-radius-field: 2px;
  --kp-radius-key: 7px;
  --kp-radius-plate: 14px;
  --kp-color-bg: #6e6e6e;
  --kp-color-panel: #838383;
  --kp-color-panel-edge: rgba(190,190,190,0.48);
  --kp-color-panel-edge-dark: rgba(42,52,62,0.92);
  --kp-color-title-top: #b0b0b0;
  --kp-color-title-mid: #929292;
  --kp-color-title-bot: #787878;
  --kp-color-btn-top: #c2c2c2;
  --kp-color-btn-mid: #9e9e9e;
  --kp-color-btn-bot: #868686;
  --kp-color-lit-top: #7aa0c0;
  --kp-color-lit-bot: #4a7090;
  --kp-color-lit-edge: #3a5a78;
  --kp-color-accent: #3a6a94;
  --kp-color-accent-2: #3a6a94;
  --kp-color-fg: #1c1c1c;
  --kp-color-fg-dim: rgba(28,28,28,0.72);
  --kp-color-fg-mute: rgba(28,28,28,0.55);
  --kp-color-field-bg: #9a9a9a;
  --kp-color-field-edge: #4a4a4a;
  --kp-color-field-inset: rgba(255,255,255,0.35);
  --kp-color-hover: rgba(255,255,255,0.22);
  --kp-color-selected: rgba(58,106,148,0.28);
  --kp-color-selected-text: #0e1a24;
  --kp-color-focus-ring: inset 0 0 0 1px rgba(58,106,148,0.55);
  --kp-color-kbd-fg: #141414;
  --kp-titlebar-bg: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.08) 28%, transparent 55%), linear-gradient(180deg, #b0b0b0 0%, #929292 45%, #787878 100%);
  --kp-titlebar-border: 1px solid #4a4a4a;
  --kp-titlebar-shadow: 0 1px 0 rgba(255,255,255,0.35);
  --kp-panel-bg: #838383;
  --kp-panel-border: 1px solid rgba(42,52,62,0.92);
  --kp-panel-shadow: 0 0 0 1px rgba(255,255,255,0.28) inset, 0 0 0 1px rgba(190,190,190,0.48), 0 0 10px rgba(255,255,255,0.12), 0 16px 40px rgba(0,0,0,0.45);
  --kp-btn-bg: linear-gradient(180deg, #c2c2c2 0%, #9e9e9e 50%, #868686 100%);
  --kp-btn-border: 1px solid #4a4a4a;
  --kp-btn-lit-bg: linear-gradient(180deg, #7aa0c0 0%, #4a7090 100%);
  --kp-btn-lit-border: 1px solid #3a5a78;
  --kp-field-bg: #9a9a9a;
  --kp-field-border: 1px solid #4a4a4a;
  --kp-field-shadow: inset 0 1px 0 rgba(255,255,255,0.40);
  --kp-kbd-bg: linear-gradient(180deg, #e4e4e4 0%, #c8c8c8 45%, #b0b0b0 55%, #9a9a9a 100%);
  --kp-kbd-border: 1px solid #3d3d3d;
  --kp-kbd-shadow: 0 1px 0 rgba(255,255,255,0.72) inset, 0 -1px 0 rgba(0,0,0,0.28) inset, 0 1px 2px rgba(0,0,0,0.32);
  --kp-backdrop-bg: rgba(40,40,40,0.35);
  --kp-backdrop-blur: blur(6px);
  --kp-hatch-edit: repeating-linear-gradient(-45deg, rgba(24, 24, 24, 0.28) 0px, rgba(24, 24, 24, 0.28) 1px, transparent 1px, transparent 7px);
  --kp-hatch-edit-titlebar-bg: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.08) 28%, transparent 55%), linear-gradient(180deg, #b8b8b8 0%, #9a9a9a 45%, #808080 100%);
  --kp-hatch-edit-body-bg: #8a8a8a;
  --kp-scrollbar-thumb: #a8a8a8;
  --kp-scrollbar-thumb-hover: #b5b5b5;
  --kp-scrollbar-track: #747474;
  --kp-corner-mode: radius;
  --kp-cut-size: 0px;
  --kp-key-shading: bevel;
  --kp-key-border: 1px solid rgba(0, 0, 0, 0.4);
  --kp-key-corner-mode: radius;
  --kp-key-cut-size: 4px;
  --kp-key-clip: none;
  --kp-key-effective-radius: 7px;
  --kp-key-shape-radius: 7px;
  --kp-key-corner-shape: round;
  --kp-key-sheen-opacity: 1;
  --kp-key-shade-layer: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 18%, transparent 42%);
  --kp-icon-chrome: #1c1c1c;
  --kp-icon-keycap: #1c1c1c;
  --kp-icon-accent: #3a6a94;
  --kp-key-icon: #1c1c1c;
}
.kp-chrome-window {
  overflow: hidden;
}
.kp-chrome-window:not([data-kp-corner="cut"]) {
  border-radius: var(--kp-radius-panel, 3px);
}
/* Baseline (presentation): proven clip-path chamfer */
[data-kp-corner="cut"],
:host([data-kp-corner="cut"]),
.kp-chrome-window[data-kp-corner="cut"] {
  clip-path: polygon(
    var(--kp-cut-size, 8px) 0,
    calc(100% - var(--kp-cut-size, 8px)) 0,
    100% var(--kp-cut-size, 8px),
    100% calc(100% - var(--kp-cut-size, 8px)),
    calc(100% - var(--kp-cut-size, 8px)) 100%,
    var(--kp-cut-size, 8px) 100%,
    0 calc(100% - var(--kp-cut-size, 8px)),
    0 var(--kp-cut-size, 8px)
  );
  border-radius: 0;
}
/* Upgrade: native chamfer keeps stroke + shadow on the cut edge */
@supports (corner-shape: bevel) {
  [data-kp-corner="cut"],
  :host([data-kp-corner="cut"]),
  .kp-chrome-window[data-kp-corner="cut"] {
    clip-path: none !important;
    border-radius: var(--kp-cut-size, 8px) !important;
    corner-shape: bevel;
  }
}
.kp-titlebar-icon {
  display: var(--kp-titlebar-icon-display, none);
  width: var(--kp-titlebar-icon-size, 12px);
  height: var(--kp-titlebar-icon-size, 12px);
  flex: 0 0 auto;
  background-color: var(--kp-icon-chrome, currentColor);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
[data-kp-titlebar-shortcut],
.kp-titlebar-kbd {
  font-family: var(--kp-font-kbd, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  font-size: var(--kp-type-kbd-size, 10px);
  font-weight: var(--kp-type-weight-regular, 400);
  line-height: 1.2;
  text-transform: var(--kp-kbd-transform, none);
  letter-spacing: var(--kp-kbd-tracking, 0.02em);
  padding: 1px 6px;
  border: var(--kp-kbd-border, 1px solid #111);
  border-radius: var(--kp-radius-btn, 2px);
  background: var(--kp-kbd-bg, #141414);
  color: var(--kp-color-kbd-fg, #ddd);
  box-shadow: var(--kp-kbd-shadow, none);
  box-sizing: border-box;
}
.kpv2-popover-titlebar,
[data-kp-popover-titlebar],
[data-kp-floating-keyboard-titlebar],
.kp-cfg-titlebar,
.kp-action-config-panel__titlebar,
.kp-procedure-result__titlebar,
.kp-practice-popover__header {
  letter-spacing: var(--kp-type-tracking-titlebar, 0.02em);
  text-transform: var(--kp-type-transform-titlebar, none);
}
.kpv2-popover-titlebar-title,
[data-kp-floating-keyboard-title],
.kp-cfg-title,
.kp-action-config-panel__title,
.kp-procedure-result__title,
.kp-practice-popover__title {
  font-weight: var(--kp-titlebar-title-weight, 600);
  letter-spacing: var(--kp-type-tracking-titlebar, 0.02em);
  text-transform: var(--kp-type-transform-titlebar, none);
  color: var(--kp-color-fg, inherit);
}
.kp-select {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--kp-font-ui, Helvetica, Arial, sans-serif);
}
.kp-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 2px 6px;
  border: var(--kp-field-border, 1px solid #0a0a0a);
  border-radius: var(--kp-radius-field, 2px);
  background: var(--kp-field-bg, #141414);
  color: var(--kp-color-fg, #ddd);
  box-shadow: var(--kp-field-shadow, none);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
}
.kp-select--titlebar .kp-select-trigger {
  width: 190px;
  height: 22px;
  margin-left: 6px;
}
.kp-select-trigger:hover {
  background: color-mix(in srgb, var(--kp-color-hover, rgba(255,255,255,0.08)) 70%, var(--kp-field-bg, #141414));
}
.kp-select-trigger:focus-visible {
  outline: 1px solid var(--kp-color-focus-ring, var(--kp-color-accent, #4a90c8));
  outline-offset: 1px;
}
.kp-select.is-open .kp-select-trigger,
.kp-select-trigger[aria-expanded="true"] {
  border-color: var(--kp-color-accent, #4a90c8);
}
.kp-select-trigger-icon,
.kp-select-item-icon {
  display: none;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background-color: var(--kp-icon-chrome, currentColor);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.kp-select-trigger-icon:not([hidden]),
.kp-select-item-icon:not([hidden]) {
  display: block;
}
.kp-select-trigger-label,
.kp-select-item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}
.kp-select-chevron {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.65;
  flex: 0 0 auto;
}
.kp-select-menu {
  position: fixed;
  /* Kill UA popover centering (inset 0 / margin auto) without locking longhands. */
  margin: 0;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: max-content;
  height: fit-content;
  z-index: 2147483049;
  padding: 4px 0;
  min-width: 190px;
  max-width: min(360px, calc(100vw - 16px));
  max-height: min(320px, calc(100vh - 16px));
  overflow-x: hidden;
  overflow-y: scroll !important;
  box-sizing: border-box;
  border: var(--kp-panel-border, 1px solid #111);
  border-radius: var(--kp-radius-panel, 3px);
  background: var(--kp-panel-bg, #232323);
  box-shadow: var(--kp-panel-shadow, 0 8px 24px rgba(0,0,0,0.45));
  color: var(--kp-color-fg, #ddd);
  font-family: var(--kp-font-ui, Helvetica, Arial, sans-serif);
  font-size: 12px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  scrollbar-color: #a8a8a8 #747474;
}
/* Blink: scrollbar-width uses overlay bars that only appear on scroll and
   suppress ::-webkit-scrollbar. Unset so the themed classic bar paints. */
@supports selector(::-webkit-scrollbar) {
  .kp-select-menu {
    scrollbar-width: unset;
    scrollbar-color: unset;
  }
}
.kp-select-menu::-webkit-scrollbar {
  -webkit-appearance: none;
  appearance: none;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  background: #747474;
}
.kp-select-menu::-webkit-scrollbar-corner {
  background: #747474;
}
.kp-select-menu::-webkit-scrollbar-track {
  background: #747474;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.kp-select-menu::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c0c0c0 0%, #a8a8a8 45%, #8d8d8d 100%);
  border: 1px solid #4a4a4a;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  min-height: 28px;
  min-width: 28px;
}
.kp-select-menu::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #cecece 0%, #b5b5b5 45%, #999 100%);
}
.kp-select-menu::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #b5b5b5 0%, #8d8d8d 100%);
  border-color: #3d3d3d;
}
.kp-select-menu[data-kp-select-fallback="true"][hidden] {
  display: none !important;
}
.kp-select-group {
  padding: 6px 10px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kp-color-fg-mute, #777);
  pointer-events: none;
  user-select: none;
}
.kp-select-separator {
  height: 1px;
  margin: 4px 8px;
  background: var(--kp-color-field-edge, #0a0a0a);
  border: 0;
  pointer-events: none;
}
.kp-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 5px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 400;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-sizing: border-box;
  outline: none;
}
.kp-select-item:hover,
.kp-select-item.is-active {
  background: var(--kp-color-hover, rgba(255,255,255,0.08));
  outline: 1px solid var(--kp-color-focus-ring, var(--kp-color-accent, #4a90c8));
  outline-offset: -1px;
}
.kp-select-item[aria-selected="true"] {
  background: var(--kp-color-selected, rgba(74, 144, 200, 0.28));
  color: var(--kp-color-selected-text, var(--kp-color-fg, #ddd));
}
.kp-select-item .kp-titlebar-kbd {
  margin-left: auto;
  flex-shrink: 0;
}`;
  const KP_THEME_IDS = ["dark-pro","gray-metal-pro","gx-er"];
  const KP_THEME_CORNER = {"dark-pro":"radius","gray-metal-pro":"radius","gx-er":"cut"};

  // --- begin stamped onboarding-shared.js ---
  /**
   * Shared onboarding walkthrough primitives.
   *
   * Zero imports so this file can be:
   * - imported by ESM modules (panel / manager)
   * - stamped into early-inject.js by build.js (export keywords stripped)
   *
   * Keep DOM construction and progress shape here so early-inject and the
   * bundled content script cannot drift.
   */

  // ── Storage / progress ──────────────────────────────────────────────────────

  const ONBOARDING_STORAGE_KEYS = {
    ACTIVE: 'keypilot_onboarding_active',
    PROGRESS: 'keypilot_onboarding_progress'
  };

  const ONBOARDING_FIRST_SLIDE_ID = 'basic_navigation';
  const ONBOARDING_PANEL_CLASS = 'kp-onboarding-panel';
  const ONBOARDING_DEFAULT_TITLE = 'Welcome to KeyPilot';
  const ONBOARDING_REOPEN_TIP = 'Tip: Press Alt + I to re-open this walkthrough later.';

  /** Default z-index fallback if caller does not pass Z_INDEX.ONBOARDING_PANEL. */
  const ONBOARDING_PANEL_Z_FALLBACK = 2147483026;

  /** Visual scale of the floating walkthrough panel (Chromium `zoom`). */
  const ONBOARDING_PANEL_SCALE = 1.1;

  /** Layout: control strip stays at top; walkthrough sits just below it. */
  const ONBOARDING_DEFAULT_LEFT_PX = 16;
  const ONBOARDING_DEFAULT_TOP_PX = 16;

  /**
   * Lighter metal chrome for the walkthrough panel
   * (cool mid-gray bevel — lighter than NCT dark panels; no grain texture).
   */
  const ONBOARDING_METAL_SPECULAR =
    'linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.08) 28%, transparent 55%)';
  const ONBOARDING_METAL = {
    fg: '#1c1c1c',
    fgDim: 'rgba(28,28,28,0.72)',
    fgMute: 'rgba(28,28,28,0.55)',
    panelBg:
      `${ONBOARDING_METAL_SPECULAR}, ` +
      'linear-gradient(180deg, #9a9a9a 0%, #838383 48%, #707070 100%)',
    titlebarBg:
      `${ONBOARDING_METAL_SPECULAR}, ` +
      'linear-gradient(180deg, #b0b0b0 0%, #929292 45%, #787878 100%)',
    footerBg: 'linear-gradient(180deg, #8a8a8a 0%, #767676 100%)',
    btnBg: 'linear-gradient(180deg, #c2c2c2 0%, #9e9e9e 50%, #868686 100%)',
    panelBorder: '1px solid rgba(42,52,62,0.92)',
    panelShadow:
      '0 0 0 1px rgba(255,255,255,0.28) inset, ' +
      '0 0 0 1px rgba(190,190,190,0.48), ' +
      '0 0 10px rgba(255,255,255,0.12), ' +
      '0 16px 40px rgba(0,0,0,0.45)',
    titlebarBorder: '1px solid #4a4a4a',
    titlebarShadow: '0 1px 0 rgba(255,255,255,0.35)',
    footerBorder: '1px solid rgba(0,0,0,0.28)',
    btnBorder: '1px solid #4a4a4a',
    btnShadow: '0 1px 0 rgba(255,255,255,0.40) inset, 0 -1px 0 rgba(0,0,0,0.18) inset',
    rowBg: 'rgba(255,255,255,0.18)',
    rowBorder: '1px solid rgba(0,0,0,0.18)',
    rowDoneBg: 'rgba(46, 204, 113, 0.22)',
    checkBorder: '1px solid rgba(0,0,0,0.35)',
    kbdBg: 'linear-gradient(180deg, #e4e4e4 0%, #c8c8c8 45%, #b0b0b0 55%, #9a9a9a 100%)',
    kbdBorder: '1px solid #3d3d3d',
    kbdColor: '#141414',
    kbdShadow:
      '0 1px 0 rgba(255,255,255,0.72) inset, ' +
      '0 -1px 0 rgba(0,0,0,0.28) inset, ' +
      '0 1px 2px rgba(0,0,0,0.32)'
  };

  /** Prefixed names avoid clashing with early-inject locals when this file is stamped. */
  const ONBOARDING_STRIP_TOP_PX = 16;
  const ONBOARDING_STRIP_HEIGHT_PX = 28;
  const ONBOARDING_BELOW_STRIP_GAP_PX = 8;

  /**
   * Preferred top offset for the walkthrough so the control strip stays visible above it.
   * @returns {number}
   */
  function getOnboardingTopBelowControlStrip() {
    try {
      const strip = document.querySelector('.kp-control-strip');
      if (strip && strip.isConnected) {
        const cs = typeof window.getComputedStyle === 'function' ? window.getComputedStyle(strip) : null;
        const hidden =
          strip.hidden === true ||
          strip.getAttribute('hidden') !== null ||
          (strip.style && strip.style.display === 'none') ||
          (cs && (cs.display === 'none' || cs.visibility === 'hidden'));
        if (!hidden) {
          const rect = strip.getBoundingClientRect();
          if (rect && rect.height > 0) {
            return Math.max(
              ONBOARDING_DEFAULT_TOP_PX,
              Math.round(rect.bottom + ONBOARDING_BELOW_STRIP_GAP_PX)
            );
          }
        }
      }
    } catch { /* ignore */ }
    // Fallback assuming strip is at its default top-left perch.
    return ONBOARDING_STRIP_TOP_PX + ONBOARDING_STRIP_HEIGHT_PX + ONBOARDING_BELOW_STRIP_GAP_PX;
  }

  /**
   * @param {HTMLElement|null} root
   */
  function positionOnboardingBelowControlStrip(root) {
    if (!root) return;
    try {
      root.style.top = `${getOnboardingTopBelowControlStrip()}px`;
    } catch { /* ignore */ }
  }

  /**
   * @typedef {Object} OnboardingProgress
   * @property {string|null} slideId
   * @property {string[]} completedTaskIds
   * @property {string[]} onEnterDoneSlideIds
   * @property {boolean} completed
   * @property {number} timestamp
   */

  /**
   * @param {string|null} [slideId]
   * @returns {OnboardingProgress}
   */
  function createEmptyProgress(slideId = null) {
    return {
      slideId: slideId || null,
      completedTaskIds: [],
      onEnterDoneSlideIds: [],
      completed: false,
      timestamp: Date.now()
    };
  }

  /**
   * @param {any} progress
   * @returns {OnboardingProgress}
   */
  function cloneProgress(progress) {
    const p = progress && typeof progress === 'object' ? progress : {};
    return {
      slideId: typeof p.slideId === 'string' ? p.slideId : null,
      completedTaskIds: Array.isArray(p.completedTaskIds) ? p.completedTaskIds.map(String) : [],
      onEnterDoneSlideIds: Array.isArray(p.onEnterDoneSlideIds) ? p.onEnterDoneSlideIds.map(String) : [],
      completed: !!p.completed,
      timestamp: typeof p.timestamp === 'number' ? p.timestamp : Date.now()
    };
  }

  /**
   * @param {string[]} a
   * @param {string[]} b
   */
  function arraysEqualString(a, b) {
    const aa = Array.isArray(a) ? a : [];
    const bb = Array.isArray(b) ? b : [];
    if (aa.length !== bb.length) return false;
    for (let i = 0; i < aa.length; i++) {
      if (String(aa[i]) !== String(bb[i])) return false;
    }
    return true;
  }

  /**
   * @param {OnboardingProgress|any} a
   * @param {OnboardingProgress|any} b
   */
  function progressEqual(a, b) {
    const aa = cloneProgress(a);
    const bb = cloneProgress(b);
    return (
      aa.slideId === bb.slideId &&
      aa.completed === bb.completed &&
      aa.timestamp === bb.timestamp &&
      arraysEqualString(aa.completedTaskIds, bb.completedTaskIds) &&
      arraysEqualString(aa.onEnterDoneSlideIds, bb.onEnterDoneSlideIds)
    );
  }

  /**
   * @param {{tasks?: Array<{id?: string}>}|null|undefined} slide
   * @param {Set<string>|string[]} completedTaskIds
   */
  function isSlideComplete(slide, completedTaskIds) {
    const tasks = slide?.tasks || [];
    if (!tasks.length) return true;
    const set = completedTaskIds instanceof Set
      ? completedTaskIds
      : new Set(Array.isArray(completedTaskIds) ? completedTaskIds.map(String) : []);
    for (const t of tasks) {
      if (!t?.id) continue;
      if (!set.has(String(t.id))) return false;
    }
    return true;
  }

  // ── Text helpers ────────────────────────────────────────────────────────────

  /**
   * Convert backtick-wrapped segments into <kbd> nodes (no innerHTML).
   * Safer on hostile pages than parsing HTML strings.
   * @param {ParentNode} el
   * @param {string} text
   */
  function renderKeyboardKeysInto(el, text) {
    if (!el) return;
    try { el.textContent = ''; } catch { /* ignore */ }
    const parts = String(text || '').split(/`/);
    for (let i = 0; i < parts.length; i++) {
      const part = parts[i];
      if (!part) continue;
      if (i % 2 === 1) {
        const k = document.createElement('kbd');
        k.textContent = part;
        el.appendChild(k);
      } else {
        el.appendChild(document.createTextNode(part));
      }
    }
  }

  /**
   * @param {string} text
   * @returns {string} HTML with <kbd> (for callers that intentionally use innerHTML)
   */
  function formatKeyboardKeysHtml(text) {
    return String(text || '').replace(/`([^`]+)`/g, '<kbd>$1</kbd>');
  }

  // ── CSS ─────────────────────────────────────────────────────────────────────

  /**
   * @param {{includeViewTransitions?: boolean}} [opts]
   * @returns {string}
   */
  function getOnboardingPanelCss(opts = {}) {
    const includeVt = opts.includeViewTransitions !== false;
    // Styles live in the open shadow root; `:host` matches there.
    // `.kp-onboarding-panel …` covers the light-DOM fallback when shadow attach fails.
    const s = (sel) => `:host ${sel}, .${ONBOARDING_PANEL_CLASS} ${sel}`;
    let css =
      `${s('kbd')} {
          display: inline-block;
          font-family: var(--kp-font-kbd, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
          font-size: var(--kp-type-kbd-size, 11px);
          font-weight: var(--kp-type-weight-bold, 700);
          line-height: 1.2;
          letter-spacing: 0.02em;
          padding: 2px 7px;
          margin: 0 1px;
          border: var(--kp-kbd-border, ${ONBOARDING_METAL.kbdBorder});
          border-radius: var(--kp-radius-sm, 4px);
          background: var(--kp-kbd-bg, ${ONBOARDING_METAL.kbdBg});
          color: var(--kp-color-kbd-fg, ${ONBOARDING_METAL.kbdColor});
          box-shadow: var(--kp-kbd-shadow, ${ONBOARDING_METAL.kbdShadow});
          vertical-align: baseline;
          white-space: nowrap;
        }
        ${s('[data-kp-onboarding-overlay="true"]')} {
          background: rgba(0, 0, 0, 0.35);
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
        }
        ${s('[data-kp-onboarding-overlay="true"] > div')} {
          border-radius: 3px;
          border: ${ONBOARDING_METAL.panelBorder};
          background: ${ONBOARDING_METAL.panelBg};
          box-shadow: ${ONBOARDING_METAL.panelShadow};
          color: ${ONBOARDING_METAL.fg};
          font-family: Helvetica, Arial, sans-serif;
        }
        ${s('[data-kp-onboarding-overlay-title="true"]')} {
          color: ${ONBOARDING_METAL.fg};
          font-weight: 800;
        }
        ${s('[data-kp-onboarding-overlay-message="true"]')} {
          color: ${ONBOARDING_METAL.fgDim};
        }
        ${s('button[data-kp-onboarding-overlay-secondary="true"]')} {
          border-radius: 2px;
          border: ${ONBOARDING_METAL.btnBorder};
          background: ${ONBOARDING_METAL.btnBg};
          box-shadow: ${ONBOARDING_METAL.btnShadow};
          color: ${ONBOARDING_METAL.fg};
          font-weight: 700;
        }
        ${s('button[data-kp-onboarding-overlay-primary="true"]')} {
          border-radius: 2px;
          border: 1px solid #2a4a66;
          background: linear-gradient(180deg, #5a7a9a 0%, #3a5570 100%);
          box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 -1px 0 rgba(0,0,0,0.28) inset;
          color: #e8f0f8;
          font-weight: 700;
        }
        /* Next incomplete checklist row — same light-blue glow language as the toggle-off arrow. */
        @keyframes kp-onboarding-next-task-glow {
          0%, 100% {
            box-shadow:
              0 0 0 1px rgba(33, 150, 243, 0.40),
              0 0 10px rgba(120, 210, 255, 0.45),
              0 0 18px rgba(120, 210, 255, 0.25);
          }
          50% {
            box-shadow:
              0 0 0 1px rgba(33, 150, 243, 0.70),
              0 0 16px rgba(120, 210, 255, 0.75),
              0 0 32px rgba(120, 210, 255, 0.45);
          }
        }
        ${s('[data-kp-onboarding-task-next="true"]')} {
          animation: kp-onboarding-next-task-glow 1.5s ease-in-out infinite;
          will-change: box-shadow;
        }
        /* Brief flash + check pop when a checklist step completes. */
        @keyframes kp-onboarding-check-flash {
          0% {
            transform: scale(0.55);
            filter: brightness(2);
            box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.95);
          }
          45% {
            transform: scale(1.28);
            filter: brightness(1.45);
            box-shadow:
              0 0 0 5px rgba(46, 204, 113, 0.40),
              0 0 16px rgba(46, 204, 113, 0.75);
          }
          100% {
            transform: scale(1);
            filter: brightness(1);
            box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.18);
          }
        }
        @keyframes kp-onboarding-check-pop {
          0% { opacity: 0; transform: scale(0.15); }
          55% { opacity: 1; transform: scale(1.2); }
          100% { opacity: 1; transform: scale(1); }
        }
        ${s('.kp-onboarding-check-flash')} {
          animation: kp-onboarding-check-flash 420ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
          will-change: transform, box-shadow, filter;
        }
        ${s('.kp-onboarding-check-flash > div')} {
          animation: kp-onboarding-check-pop 380ms cubic-bezier(0.2, 0.9, 0.25, 1.1) both;
        }
        @media (prefers-reduced-motion: reduce) {
          ${s('[data-kp-onboarding-task-next="true"]')} {
            animation: none;
          }
          ${s('.kp-onboarding-check-flash')},
          ${s('.kp-onboarding-check-flash > div')} {
            animation: none;
          }
        }`;
    if (includeVt) {
      css += `
        @keyframes kpOnboardingSlideOut {
          to { transform: translateX(calc(var(--kp-onboarding-slide-dir, 1) * -100%)); opacity: 0.0; }
        }
        @keyframes kpOnboardingSlideIn {
          from { transform: translateX(calc(var(--kp-onboarding-slide-dir, 1) * 100%)); opacity: 0.0; }
          to { transform: translateX(0%); opacity: 1.0; }
        }
        ::view-transition-old(kp-onboarding-slide-surface) {
          animation: kpOnboardingSlideOut 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }
        ::view-transition-new(kp-onboarding-slide-surface) {
          animation: kpOnboardingSlideIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }`;
    }
    return css;
  }

  // ── Shell DOM ───────────────────────────────────────────────────────────────

  function assignStyle(el, styles) {
    if (!el || !styles) return;
    try { Object.assign(el.style, styles); } catch { /* ignore */ }
  }

  function mkIconBtn(doc, label, dataAttr, aria) {
    const b = doc.createElement('button');
    b.type = 'button';
    b.textContent = label;
    b.setAttribute(dataAttr, 'true');
    if (aria) b.setAttribute('aria-label', aria);
    assignStyle(b, {
      width: '28px',
      height: '28px',
      borderRadius: '2px',
      border: ONBOARDING_METAL.btnBorder,
      background: ONBOARDING_METAL.btnBg,
      boxShadow: ONBOARDING_METAL.btnShadow,
      color: ONBOARDING_METAL.fg,
      cursor: 'pointer',
      fontSize: '14px',
      fontWeight: '700',
      lineHeight: '26px',
      padding: '0',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center'
    });
    return b;
  }

  /**
   * Build the floating walkthrough panel shell (header / body / footer).
   * Does not attach event listeners — callers wire close/prev/next/reset.
   *
   * @param {Document} doc
   * @param {Object} [opts]
   * @param {number|string} [opts.zIndex]
   * @param {boolean} [opts.early] Mark as early-inject shell for adoption
   * @param {boolean} [opts.initiallyHidden]
   * @param {boolean} [opts.includeViewTransitions]
   * @param {(el: HTMLElement) => void} [opts.applyTheme]
   * @param {string} [opts.title]
   * @param {string} [opts.stepText]
   * @param {boolean} [opts.navDisabled] Disable prev/next (early shell until wired)
   * @returns {{
   *   root: HTMLElement,
   *   body: HTMLElement,
   *   slideSurface: HTMLElement,
   *   titleEl: HTMLElement,
   *   stepEl: HTMLElement,
   *   prevBtn: HTMLButtonElement,
   *   nextBtn: HTMLButtonElement,
   *   resetBtn: HTMLButtonElement,
   *   closeBtn: HTMLButtonElement
   * }}
   */
  function createOnboardingShell(doc, opts = {}) {
    const zIndex = opts.zIndex != null ? opts.zIndex : ONBOARDING_PANEL_Z_FALLBACK;
    const initiallyHidden = opts.initiallyHidden !== false;
    const includeVt = opts.includeViewTransitions !== false;

    const root = doc.createElement('div');
    root.className = ONBOARDING_PANEL_CLASS;
    root.hidden = initiallyHidden;
    if (opts.early) root.dataset.kpEarlyOnboarding = 'true';
    try { root.setAttribute('data-kp-surface', 'onboarding'); } catch { /* ignore */ }
    root.setAttribute('role', 'dialog');
    root.setAttribute('aria-label', 'KeyPilot onboarding walkthrough');
    try { root.setAttribute('data-kp-ui-shadow', 'onboarding'); } catch { /* ignore */ }
    let shell = root;
    try { shell = root.shadowRoot || root.attachShadow({ mode: 'open' }); } catch { /* light fallback */ }

    // When initially hidden, use display:none + pointer-events:none.
    // Some pages override [hidden]; never put display:flex on a hidden shell.
    assignStyle(root, {
      position: 'fixed',
      left: `${ONBOARDING_DEFAULT_LEFT_PX}px`,
      // Prefer sitting below the control strip so the strip is not pushed down.
      top: `${getOnboardingTopBelowControlStrip()}px`,
      width: '360px',
      maxWidth: 'calc(100vw - 24px)',
      maxHeight: 'calc(100vh - 24px)',
      display: initiallyHidden ? 'none' : 'flex',
      flexDirection: 'column',
      overflow: 'hidden',
      zIndex: String(zIndex),
      background: 'var(--kp-panel-bg)',
      color: 'var(--kp-color-fg)',
      border: 'var(--kp-panel-border)',
      borderRadius: 'var(--kp-radius-panel, 3px)',
      boxShadow: 'var(--kp-panel-shadow)',
      fontFamily: 'var(--kp-font-ui, Helvetica, Arial, sans-serif)',
      pointerEvents: initiallyHidden ? 'none' : 'auto',
      zoom: String(ONBOARDING_PANEL_SCALE)
    });

    try { opts.applyTheme?.(root); } catch { /* ignore */ }

    const style = doc.createElement('style');
    style.textContent = getOnboardingPanelCss({ includeViewTransitions: includeVt });
    shell.appendChild(style);

    const header = doc.createElement('div');
    assignStyle(header, {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: '10px',
      padding: '10px 12px',
      background: ONBOARDING_METAL.titlebarBg,
      borderBottom: ONBOARDING_METAL.titlebarBorder,
      boxShadow: ONBOARDING_METAL.titlebarShadow
    });

    const titleWrap = doc.createElement('div');
    assignStyle(titleWrap, {
      display: 'flex',
      flexDirection: 'column',
      gap: '2px',
      minWidth: '0'
    });

    const titleEl = doc.createElement('div');
    titleEl.textContent = String(opts.title || ONBOARDING_DEFAULT_TITLE);
    titleEl.setAttribute('data-kp-onboarding-title', 'true');
    assignStyle(titleEl, {
      fontSize: '13px',
      fontWeight: '800',
      letterSpacing: '0.2px',
      color: ONBOARDING_METAL.fg,
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    });

    const stepEl = doc.createElement('div');
    stepEl.textContent = String(opts.stepText || '1 / 1');
    stepEl.setAttribute('data-kp-onboarding-step', 'true');
    assignStyle(stepEl, {
      fontSize: '12px',
      fontWeight: '600',
      color: ONBOARDING_METAL.fgDim
    });

    // Title wrap only gets the title; step lives in the footer stepWrap
    // (appendChild moves nodes — keep a single step element).
    titleWrap.appendChild(titleEl);

    const navWrap = doc.createElement('div');
    assignStyle(navWrap, {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '8px',
      flex: '0 0 auto'
    });

    const stepWrap = doc.createElement('div');
    assignStyle(stepWrap, {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '6px'
    });

    const prevBtn = mkIconBtn(doc, '←', 'data-kp-onboarding-prev', 'Previous slide');
    const nextBtn = mkIconBtn(doc, '→', 'data-kp-onboarding-next', 'Next slide');
    if (opts.navDisabled) {
      prevBtn.disabled = true;
      nextBtn.disabled = true;
    }

    stepWrap.appendChild(prevBtn);
    stepWrap.appendChild(stepEl);
    stepWrap.appendChild(nextBtn);

    const resetBtn = doc.createElement('button');
    resetBtn.type = 'button';
    resetBtn.textContent = 'Reset';
    resetBtn.setAttribute('data-kp-onboarding-reset', 'true');
    assignStyle(resetBtn, {
      height: '28px',
      borderRadius: '2px',
      border: ONBOARDING_METAL.btnBorder,
      background: ONBOARDING_METAL.btnBg,
      boxShadow: ONBOARDING_METAL.btnShadow,
      color: ONBOARDING_METAL.fg,
      cursor: 'pointer',
      fontSize: '12px',
      fontWeight: '700',
      padding: '0 10px',
      lineHeight: '26px'
    });

    const closeBtn = doc.createElement('button');
    closeBtn.type = 'button';
    closeBtn.textContent = '×';
    closeBtn.setAttribute('aria-label', 'Close onboarding walkthrough');
    closeBtn.setAttribute('data-kp-onboarding-close', 'true');
    assignStyle(closeBtn, {
      width: '28px',
      height: '28px',
      borderRadius: '2px',
      border: ONBOARDING_METAL.btnBorder,
      background: ONBOARDING_METAL.btnBg,
      boxShadow: ONBOARDING_METAL.btnShadow,
      color: ONBOARDING_METAL.fg,
      cursor: 'pointer',
      fontSize: '18px',
      fontWeight: '700',
      lineHeight: '26px',
      padding: '0',
      flex: '0 0 auto'
    });

    navWrap.appendChild(closeBtn);
    header.appendChild(titleWrap);
    header.appendChild(navWrap);

    const body = doc.createElement('div');
    body.setAttribute('data-kp-onboarding-body', 'true');
    assignStyle(body, {
      flex: '1',
      overflowY: 'auto',
      minHeight: '0',
      position: 'relative'
    });

    const slideSurface = doc.createElement('div');
    slideSurface.setAttribute('data-kp-onboarding-slide-surface', 'true');
    assignStyle(slideSurface, { padding: '12px' });
    body.appendChild(slideSurface);

    const footer = doc.createElement('div');
    assignStyle(footer, {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: '10px',
      padding: '10px 12px',
      background: ONBOARDING_METAL.footerBg,
      borderTop: ONBOARDING_METAL.footerBorder
    });
    footer.appendChild(stepWrap);
    footer.appendChild(resetBtn);

    shell.appendChild(header);
    shell.appendChild(body);
    shell.appendChild(footer);

    return {
      root,
      body,
      slideSurface,
      titleEl,
      stepEl,
      prevBtn,
      nextBtn,
      resetBtn,
      closeBtn
    };
  }

  /**
   * Query shell refs from an existing panel root (early-inject adoption).
   * @param {Element|null} root
   */
  function queryOnboardingShellRefs(root) {
    if (!root) return null;
    const shell = root.shadowRoot || root;
    const body =
      shell.querySelector('[data-kp-onboarding-body="true"]') ||
      shell.querySelector(':scope > div[data-kp-onboarding-body]');
    if (!body) return null;
    let slideSurface = body.querySelector('[data-kp-onboarding-slide-surface="true"]');
    if (!slideSurface) {
      slideSurface = document.createElement('div');
      slideSurface.setAttribute('data-kp-onboarding-slide-surface', 'true');
      assignStyle(slideSurface, { padding: '12px' });
      try { body.appendChild(slideSurface); } catch { /* ignore */ }
    }
    return {
      root,
      body,
      slideSurface,
      titleEl: shell.querySelector('[data-kp-onboarding-title="true"]'),
      stepEl: shell.querySelector('[data-kp-onboarding-step="true"]'),
      prevBtn: shell.querySelector('button[data-kp-onboarding-prev="true"]'),
      nextBtn: shell.querySelector('button[data-kp-onboarding-next="true"]'),
      resetBtn: shell.querySelector('button[data-kp-onboarding-reset="true"]'),
      closeBtn: shell.querySelector('button[data-kp-onboarding-close="true"]')
    };
  }

  /**
   * Show/hide panel in a way that survives hostile [hidden] CSS overrides.
   * @param {HTMLElement|null} root
   * @param {boolean} visible
   */
  function setOnboardingPanelVisible(root, visible) {
    if (!root) return;
    const show = !!visible;
    try {
      root.hidden = !show;
      root.style.display = show ? 'flex' : 'none';
      root.style.pointerEvents = show ? 'auto' : 'none';
      root.style.zoom = String(ONBOARDING_PANEL_SCALE);
      if (show) positionOnboardingBelowControlStrip(root);
    } catch { /* ignore */ }
  }

  // ── Slide content ───────────────────────────────────────────────────────────

  function applyTaskRowInteractive(row, { uncheckable, onTaskRowClick }) {
    if (!row) return;
    try {
      if (uncheckable) {
        row.setAttribute('data-kp-onboarding-uncheckable', 'true');
        row.style.cursor = 'pointer';
        row.title = 'Click to uncheck (undo last completed step)';
        row.setAttribute('role', 'button');
        row.tabIndex = 0;
      } else {
        row.removeAttribute('data-kp-onboarding-uncheckable');
        row.style.cursor = '';
        row.removeAttribute('title');
        row.removeAttribute('role');
        row.removeAttribute('tabindex');
      }
    } catch { /* ignore */ }

    try {
      if (row._kpOnboardingTaskClick) {
        row.removeEventListener('click', row._kpOnboardingTaskClick);
        row._kpOnboardingTaskClick = null;
      }
    } catch { /* ignore */ }
    if (uncheckable && typeof onTaskRowClick === 'function') {
      row._kpOnboardingTaskClick = onTaskRowClick;
      try { row.addEventListener('click', onTaskRowClick); } catch { /* ignore */ }
    }
  }

  /** Light-blue next-step outline (matches toggle-off arrow glow). */
  const NEXT_TASK_BORDER = '1px solid rgba(120, 210, 255, 0.65)';
  const NEXT_TASK_BG = 'rgb(231, 231, 231)';
  const NEXT_TASK_GLOW =
    '0 0 0 1px rgba(33, 150, 243, 0.45), 0 0 12px rgba(120, 210, 255, 0.55), 0 0 24px rgba(120, 210, 255, 0.35)';

  /**
   * Restart the checkbox complete flash on a checklist box.
   * @param {HTMLElement|null} box
   */
  function playCheckboxCompleteFlash(box) {
    if (!box) return;
    try {
      box.classList.remove('kp-onboarding-check-flash');
      // Force reflow so re-adding the class retriggers the animation.
      void box.offsetWidth;
      box.classList.add('kp-onboarding-check-flash');
    } catch { /* ignore */ }
  }

  function applyTaskRowVisual(row, task, done, opts = {}) {
    if (!row) return;
    const isNext = !!(!done && opts.isNext);
    let wasDone = false;
    try {
      wasDone = row.getAttribute('data-kp-onboarding-task-done') === 'true';
    } catch { /* ignore */ }
    try {
      if (isNext) row.setAttribute('data-kp-onboarding-task-next', 'true');
      else row.removeAttribute('data-kp-onboarding-task-next');
    } catch { /* ignore */ }
    try {
      if (done) row.setAttribute('data-kp-onboarding-task-done', 'true');
      else row.removeAttribute('data-kp-onboarding-task-done');
    } catch { /* ignore */ }

    assignStyle(row, {
      background: done ? ONBOARDING_METAL.rowDoneBg : (isNext ? NEXT_TASK_BG : ONBOARDING_METAL.rowBg),
      border: isNext ? NEXT_TASK_BORDER : ONBOARDING_METAL.rowBorder,
      boxShadow: isNext ? NEXT_TASK_GLOW : 'none'
    });

    const box =
      row.querySelector(':scope > div[aria-hidden="true"]') ||
      row.firstElementChild;
    const textEl =
      (box && box.nextElementSibling) ||
      row.querySelector(':scope > div:last-child');

    if (box) {
      try { box.classList.remove('kp-onboarding-check-flash'); } catch { /* ignore */ }
      assignStyle(box, {
        border: done
          ? '1px solid rgba(46, 204, 113, 0.9)'
          : (isNext ? '1px solid rgba(120, 210, 255, 0.75)' : ONBOARDING_METAL.checkBorder),
        background: done ? 'rgba(46, 204, 113, 0.85)' : 'rgba(255,255,255,0.25)',
        boxShadow: done
          ? '0 0 0 2px rgba(46, 204, 113, 0.18)'
          : (isNext ? '0 0 0 2px rgba(33, 150, 243, 0.28)' : 'none')
      });
      try {
        const existingCheck = box.querySelector(':scope > div');
        if (done) {
          if (!existingCheck) {
            const check = document.createElement('div');
            check.textContent = '✓';
            assignStyle(check, {
              position: 'absolute',
              inset: '0',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '13px',
              fontWeight: '800',
              color: '#0b1410'
            });
            box.appendChild(check);
          }
        } else if (existingCheck) {
          box.removeChild(existingCheck);
        }
      } catch { /* ignore */ }

      // Flash only on the incomplete → complete transition (not on every re-render).
      if (done && !wasDone) {
        playCheckboxCompleteFlash(box);
      }
    }

    if (textEl) {
      try {
        renderKeyboardKeysInto(textEl, task.label || task.id);
        assignStyle(textEl, {
          color: done ? ONBOARDING_METAL.fgDim : ONBOARDING_METAL.fg,
          opacity: done ? '0.95' : '1'
        });
      } catch { /* ignore */ }
    }

    applyTaskRowInteractive(row, {
      uncheckable: !!(done && opts.uncheckable),
      onTaskRowClick: opts.onTaskRowClick
    });
  }

  function createTaskRow(doc, task, done, opts = {}) {
    const row = doc.createElement('div');
    row.setAttribute('data-kp-onboarding-task-id', task.id);
    if (done) {
      try { row.setAttribute('data-kp-onboarding-task-done', 'true'); } catch { /* ignore */ }
    }
    const isNext = !!(!done && opts.isNext);
    if (isNext) {
      try { row.setAttribute('data-kp-onboarding-task-next', 'true'); } catch { /* ignore */ }
    }
    assignStyle(row, {
      display: 'flex',
      alignItems: 'flex-start',
      gap: '10px',
      padding: '8px 10px',
      borderRadius: '3px',
      border: isNext ? NEXT_TASK_BORDER : ONBOARDING_METAL.rowBorder,
      background: done ? ONBOARDING_METAL.rowDoneBg : (isNext ? NEXT_TASK_BG : ONBOARDING_METAL.rowBg),
      boxShadow: isNext ? NEXT_TASK_GLOW : 'none'
    });

    const box = doc.createElement('div');
    box.setAttribute('aria-hidden', 'true');
    assignStyle(box, {
      width: '18px',
      height: '18px',
      borderRadius: '2px',
      border: done
        ? '1px solid rgba(46, 204, 113, 0.9)'
        : (isNext ? '1px solid rgba(120, 210, 255, 0.75)' : ONBOARDING_METAL.checkBorder),
      background: done ? 'rgba(46, 204, 113, 0.85)' : 'rgba(255,255,255,0.25)',
      boxShadow: done
        ? '0 0 0 2px rgba(46, 204, 113, 0.18)'
        : (isNext ? '0 0 0 2px rgba(33, 150, 243, 0.28)' : 'none'),
      flex: '0 0 auto',
      marginTop: '1px',
      position: 'relative'
    });

    if (done) {
      const check = doc.createElement('div');
      check.textContent = '✓';
      assignStyle(check, {
        position: 'absolute',
        inset: '0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '13px',
        fontWeight: '800',
        color: '#0b1410'
      });
      box.appendChild(check);
      // Animate when this row was just completed (e.g. rebuild right after a step).
      if (opts.animateComplete) {
        try {
          requestAnimationFrame(() => playCheckboxCompleteFlash(box));
        } catch {
          playCheckboxCompleteFlash(box);
        }
      }
    }

    const text = doc.createElement('div');
    renderKeyboardKeysInto(text, task.label || task.id);
    assignStyle(text, {
      fontSize: '13px',
      lineHeight: '1.35',
      color: done ? ONBOARDING_METAL.fgDim : ONBOARDING_METAL.fg,
      opacity: done ? '0.95' : '1'
    });

    row.appendChild(box);
    row.appendChild(text);
    applyTaskRowInteractive(row, {
      uncheckable: !!(done && opts.uncheckable),
      onTaskRowClick: opts.onTaskRowClick
    });
    return row;
  }

  /**
   * Render or update slide checklist into the slide surface.
   *
   * @param {HTMLElement} surface
   * @param {Object} params
   * @param {Array<{id:string, label?:string}>} [params.tasks]
   * @param {Set<string>|string[]} [params.completedTaskIds]
   * @param {string|null} [params.lastCompletedTaskId]
   * @param {(e:Event)=>void} [params.onTaskRowClick]
   * @param {string} [params.bodyText]
   * @param {boolean} [params.forceRebuild]
   * @param {boolean} [params.showTip] Opt-in reopen tip (off by default)
   * @param {boolean} [params.showCloseButton] Show a "Close Tutorial" button (completion slide)
   * @param {(e: Event) => void} [params.onCloseClick]
   * @param {Document} [params.doc]
   */
  function renderOnboardingSlideSurface(surface, params = {}) {
    if (!surface) return;
    const doc = params.doc || surface.ownerDocument || document;
    const tasks = (params.tasks || []).filter((t) => t && t.id);
    const completedSet = params.completedTaskIds instanceof Set
      ? params.completedTaskIds
      : new Set(Array.isArray(params.completedTaskIds) ? params.completedTaskIds.map(String) : []);
    const lastCompletedTaskId = params.lastCompletedTaskId != null ? String(params.lastCompletedTaskId) : '';
    const onTaskRowClick = typeof params.onTaskRowClick === 'function' ? params.onTaskRowClick : null;
    const onCloseClick = typeof params.onCloseClick === 'function' ? params.onCloseClick : null;
    const bodyTextStr = String(params.bodyText || '').trim();
    const forceRebuild = !!params.forceRebuild;
    const showTip = params.showTip === true;
    const showCloseButton = params.showCloseButton === true;
    // First incomplete task in slide order is the "next" recommended step.
    const nextTaskId = (tasks.find((t) => !completedSet.has(t.id)) || null)?.id || null;

    const existingRows = surface.querySelectorAll('[data-kp-onboarding-task-id]');
    const existingBody = surface.querySelector('[data-kp-onboarding-body-text="true"]');

    const canUpdateInPlace =
      !forceRebuild &&
      existingRows.length === tasks.length &&
      tasks.every((t, i) => existingRows[i]?.getAttribute('data-kp-onboarding-task-id') === t.id);

    // Body text (independent of task update mode when possible)
    try {
      if (bodyTextStr) {
        if (existingBody && canUpdateInPlace) {
          existingBody.textContent = '';
          // Preserve line breaks without full HTML parse
          const lines = bodyTextStr.split('\n');
          lines.forEach((line, i) => {
            if (i > 0) existingBody.appendChild(doc.createElement('br'));
            renderKeyboardKeysInto(
              (() => { const s = doc.createElement('span'); existingBody.appendChild(s); return s; })(),
              line
            );
          });
          existingBody.style.display = 'block';
          existingBody.style.marginBottom = (tasks.length || showCloseButton) ? '12px' : '0px';
        }
      } else if (existingBody && canUpdateInPlace) {
        existingBody.style.display = 'none';
        existingBody.textContent = '';
      }
    } catch { /* ignore */ }

    if (canUpdateInPlace) {
      tasks.forEach((task, i) => {
        const done = completedSet.has(task.id);
        applyTaskRowVisual(existingRows[i], task, done, {
          isNext: !!(nextTaskId && task.id === nextTaskId),
          uncheckable: done && task.id === lastCompletedTaskId,
          onTaskRowClick
        });
      });
      // Tip is opt-in; drop any leftover tip from older builds / slides.
      try {
        const existingTip = surface.querySelector('[data-kp-onboarding-tip="true"]');
        if (!showTip && existingTip) existingTip.remove();
      } catch { /* ignore */ }
      syncCloseTutorialButton(surface, { show: showCloseButton, onClick: onCloseClick, doc });
      return;
    }

    // Full rebuild
    while (surface.firstChild) surface.removeChild(surface.firstChild);

    if (bodyTextStr) {
      const body = doc.createElement('div');
      body.setAttribute('data-kp-onboarding-body-text', 'true');
      const lines = bodyTextStr.split('\n');
      lines.forEach((line, i) => {
        if (i > 0) body.appendChild(doc.createElement('br'));
        const span = doc.createElement('span');
        renderKeyboardKeysInto(span, line);
        body.appendChild(span);
      });
      assignStyle(body, {
        fontSize: '13px',
        lineHeight: '1.45',
        color: ONBOARDING_METAL.fg,
        marginBottom: (tasks.length || showCloseButton) ? '12px' : '0px',
        opacity: '0.95'
      });
      surface.appendChild(body);
    }

    const list = doc.createElement('div');
    assignStyle(list, {
      display: 'flex',
      flexDirection: 'column',
      gap: '8px'
    });

    for (const task of tasks) {
      const done = completedSet.has(task.id);
      list.appendChild(createTaskRow(doc, task, done, {
        isNext: !!(nextTaskId && task.id === nextTaskId),
        uncheckable: done && task.id === lastCompletedTaskId,
        animateComplete: !!(done && lastCompletedTaskId && task.id === lastCompletedTaskId),
        onTaskRowClick
      }));
    }
    surface.appendChild(list);

    if (showTip) {
      const tip = doc.createElement('div');
      tip.setAttribute('data-kp-onboarding-tip', 'true');
      tip.textContent = ONBOARDING_REOPEN_TIP;
      assignStyle(tip, {
        marginTop: '10px',
        fontSize: '12px',
        lineHeight: '1.35',
        color: ONBOARDING_METAL.fgMute
      });
      surface.appendChild(tip);
    }

    syncCloseTutorialButton(surface, { show: showCloseButton, onClick: onCloseClick, doc });
  }

  /**
   * Add / update / remove the completion-slide "Close Tutorial" button.
   * @param {HTMLElement} surface
   * @param {{ show?: boolean, onClick?: ((e: Event) => void)|null, doc?: Document }} opts
   */
  function syncCloseTutorialButton(surface, opts = {}) {
    if (!surface) return;
    const doc = opts.doc || surface.ownerDocument || document;
    const show = opts.show === true;
    const onClick = typeof opts.onClick === 'function' ? opts.onClick : null;
    let btn = null;
    try {
      btn = surface.querySelector('button[data-kp-onboarding-close-tutorial="true"]');
    } catch { /* ignore */ }

    if (!show) {
      try {
        if (btn) btn.remove();
      } catch { /* ignore */ }
      return;
    }

    if (!btn) {
      btn = doc.createElement('button');
      btn.type = 'button';
      btn.setAttribute('data-kp-onboarding-close-tutorial', 'true');
      btn.textContent = 'Close Tutorial';
      assignStyle(btn, {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: 'fit-content',
        marginLeft: 'auto',
        alignSelf: 'flex-end',
        height: '32px',
        borderRadius: '2px',
        border: '1px solid rgba(30, 120, 70, 0.75)',
        background:
          'linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 35%, transparent 60%), ' +
          'linear-gradient(180deg, #7dcf9a 0%, #4caf72 50%, #3a8f5a 100%)',
        boxShadow: '0 1px 0 rgba(255,255,255,0.35) inset, 0 -1px 0 rgba(0,0,0,0.18) inset',
        color: '#0b1410',
        cursor: 'pointer',
        fontSize: '12px',
        fontWeight: '800',
        padding: '0 14px',
        lineHeight: '30px',
        fontFamily: 'inherit'
      });
      surface.appendChild(btn);
    } else {
      // Keep alignment current for in-place updates (button may already exist).
      try {
        btn.style.marginLeft = 'auto';
        btn.style.alignSelf = 'flex-end';
        btn.style.width = 'fit-content';
        btn.style.display = 'flex';
      } catch { /* ignore */ }
    }

    try {
      if (btn._kpOnboardingCloseClick) {
        btn.removeEventListener('click', btn._kpOnboardingCloseClick);
        btn._kpOnboardingCloseClick = null;
      }
    } catch { /* ignore */ }
    if (onClick) {
      btn._kpOnboardingCloseClick = onClick;
      try { btn.addEventListener('click', onClick); } catch { /* ignore */ }
    }
  }

  /**
   * Update chrome (title, step counter, nav disabled state).
   * @param {Object} refs
   * @param {Object} params
   */
  function updateOnboardingChrome(refs, params = {}) {
    if (!refs) return;
    const idx = Number(params.slideIndex) || 0;
    const total = Math.max(1, Number(params.slideCount) || 1);
    try {
      if (refs.titleEl) refs.titleEl.textContent = String(params.title || ONBOARDING_DEFAULT_TITLE);
    } catch { /* ignore */ }
    try {
      if (refs.stepEl) refs.stepEl.textContent = `${idx + 1} / ${total}`;
    } catch { /* ignore */ }
    try {
      if (refs.root && params.slideId != null) {
        refs.root.dataset.kpOnboardingSlideId = String(params.slideId || '');
      }
    } catch { /* ignore */ }
    try {
      if (refs.prevBtn) refs.prevBtn.disabled = idx <= 0;
    } catch { /* ignore */ }
    try {
      if (refs.nextBtn) refs.nextBtn.disabled = idx >= total - 1;
    } catch { /* ignore */ }
  }

  // ── Overlay ─────────────────────────────────────────────────────────────────

  /** Steel-blue lit primary — matches NCT pro accent without importing nct-dark-ui. */
  const ONBOARDING_OVERLAY_PRIMARY_BTN = {
    border: '1px solid #2a4a66',
    background: 'linear-gradient(180deg, #5a7a9a 0%, #3a5570 100%)',
    boxShadow: '0 1px 0 rgba(255,255,255,0.28) inset, 0 -1px 0 rgba(0,0,0,0.28) inset',
    color: '#e8f0f8'
  };

  /**
   * Apply gray pro metal chrome to an onboarding slide overlay (and its card/buttons).
   * Safe to call on legacy dark-glass overlays so they pick up the current theme.
   * @param {{
   *   overlayEl?: HTMLElement|null,
   *   titleEl?: HTMLElement|null,
   *   msgEl?: HTMLElement|null,
   *   primaryBtn?: HTMLButtonElement|null,
   *   secondaryBtn?: HTMLButtonElement|null
   * }} refs
   */
  function applyOnboardingOverlayChrome(refs) {
    const overlayEl = refs?.overlayEl || null;
    if (!overlayEl) return;

    assignStyle(overlayEl, {
      position: 'absolute',
      inset: '0',
      padding: '14px',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'rgba(0,0,0,0.35)',
      backdropFilter: 'blur(6px)',
      WebkitBackdropFilter: 'blur(6px)',
      zIndex: '20',
      boxSizing: 'border-box',
      overflow: 'hidden'
    });

    // Card is the content div (not the brand <img>).
    let card = null;
    try {
      card = overlayEl.querySelector(':scope > div') ||
        Array.from(overlayEl.children || []).find((el) => el && el.tagName === 'DIV') ||
        null;
    } catch {
      card = overlayEl.firstElementChild?.tagName === 'DIV' ? overlayEl.firstElementChild : null;
    }
    if (card) {
      assignStyle(card, {
        width: '100%',
        maxWidth: '320px',
        borderRadius: '3px',
        border: ONBOARDING_METAL.panelBorder,
        background: ONBOARDING_METAL.panelBg,
        boxShadow: ONBOARDING_METAL.panelShadow,
        padding: '14px 14px 12px 14px',
        fontFamily: 'Helvetica, Arial, sans-serif',
        color: ONBOARDING_METAL.fg,
        boxSizing: 'border-box'
      });
    }

    if (refs.titleEl) {
      assignStyle(refs.titleEl, {
        fontSize: '14px',
        fontWeight: '800',
        letterSpacing: '0.2px',
        marginBottom: '8px',
        color: ONBOARDING_METAL.fg
      });
    }

    if (refs.msgEl) {
      assignStyle(refs.msgEl, {
        fontSize: '13px',
        lineHeight: '1.35',
        color: ONBOARDING_METAL.fgDim,
        whiteSpace: 'pre-wrap'
      });
    }

    const styleBtn = (b, variant) => {
      if (!b) return;
      const primary = variant === 'primary';
      assignStyle(b, {
        minHeight: '28px',
        height: 'auto',
        borderRadius: '2px',
        border: primary ? ONBOARDING_OVERLAY_PRIMARY_BTN.border : ONBOARDING_METAL.btnBorder,
        background: primary ? ONBOARDING_OVERLAY_PRIMARY_BTN.background : ONBOARDING_METAL.btnBg,
        boxShadow: primary ? ONBOARDING_OVERLAY_PRIMARY_BTN.boxShadow : ONBOARDING_METAL.btnShadow,
        color: primary ? ONBOARDING_OVERLAY_PRIMARY_BTN.color : ONBOARDING_METAL.fg,
        cursor: 'pointer',
        fontFamily: 'Helvetica, Arial, sans-serif',
        fontSize: '12px',
        fontWeight: '700',
        padding: '4px 12px',
        lineHeight: '20px',
        whiteSpace: 'normal',
        textAlign: 'center'
      });
    };
    styleBtn(refs.secondaryBtn, 'secondary');
    styleBtn(refs.primaryBtn, 'primary');
  }

  /**
   * Ensure modal overlay exists on the onboarding panel root.
   * Attaches to the panel root (not the scrollable body) so a flex body with
   * min-height:0 cannot collapse the overlay to zero height on Chrome.
   * @param {HTMLElement} host Panel root or any descendant inside it
   * @param {Document} [doc]
   * @returns {{
   *   overlayEl: HTMLElement,
   *   titleEl: HTMLElement,
   *   msgEl: HTMLElement,
   *   primaryBtn: HTMLButtonElement,
   *   secondaryBtn: HTMLButtonElement
   * }|null}
   */
  function ensureOnboardingOverlay(host, doc) {
    if (!host) return null;
    const d = doc || host.ownerDocument || document;

    let root = host;
    try {
      if (!host.classList?.contains?.(ONBOARDING_PANEL_CLASS)) {
        root = host.closest?.(`.${ONBOARDING_PANEL_CLASS}`) || host;
        if (!root.classList?.contains?.(ONBOARDING_PANEL_CLASS)) {
          const shadow = host.getRootNode?.();
          if (shadow?.host?.classList?.contains?.(ONBOARDING_PANEL_CLASS)) root = shadow.host;
        }
      }
    } catch {
      root = host;
    }

    const shell = root.shadowRoot || root;
    const existing = shell.querySelector('[data-kp-onboarding-overlay="true"]');
    if (existing) {
      // Migrate legacy overlays that lived inside the scrollable body.
      try {
        if (existing.parentElement !== shell) shell.appendChild(existing);
      } catch { /* ignore */ }
      const refs = {
        overlayEl: existing,
        titleEl: existing.querySelector('[data-kp-onboarding-overlay-title="true"]'),
        msgEl: existing.querySelector('[data-kp-onboarding-overlay-message="true"]'),
        primaryBtn: existing.querySelector('button[data-kp-onboarding-overlay-primary="true"]'),
        secondaryBtn: existing.querySelector('button[data-kp-onboarding-overlay-secondary="true"]')
      };
      try { applyOnboardingOverlayChrome(refs); } catch { /* ignore */ }
      return refs;
    }

    const overlay = d.createElement('div');
    overlay.setAttribute('data-kp-onboarding-overlay', 'true');
    overlay.hidden = true;
    assignStyle(overlay, {
      display: 'none',
      pointerEvents: 'none'
    });

    const card = d.createElement('div');

    const titleEl = d.createElement('div');
    titleEl.setAttribute('data-kp-onboarding-overlay-title', 'true');
    titleEl.textContent = 'Nice!';

    const msgEl = d.createElement('div');
    msgEl.setAttribute('data-kp-onboarding-overlay-message', 'true');
    msgEl.textContent = '';

    const btnRow = d.createElement('div');
    assignStyle(btnRow, {
      display: 'flex',
      flexWrap: 'wrap',
      alignItems: 'center',
      justifyContent: 'flex-end',
      gap: '8px',
      marginTop: '12px'
    });

    const secondaryBtn = d.createElement('button');
    secondaryBtn.type = 'button';
    secondaryBtn.hidden = true;
    secondaryBtn.textContent = '';
    secondaryBtn.setAttribute('data-kp-onboarding-overlay-secondary', 'true');

    const primaryBtn = d.createElement('button');
    primaryBtn.type = 'button';
    primaryBtn.textContent = 'OK';
    primaryBtn.setAttribute('data-kp-onboarding-overlay-primary', 'true');

    btnRow.appendChild(secondaryBtn);
    btnRow.appendChild(primaryBtn);
    card.appendChild(titleEl);
    card.appendChild(msgEl);
    card.appendChild(btnRow);
    overlay.appendChild(card);
    shell.appendChild(overlay);

    const refs = { overlayEl: overlay, titleEl, msgEl, primaryBtn, secondaryBtn };
    applyOnboardingOverlayChrome(refs);
    return refs;
  }

  /**
   * @param {HTMLElement|null} overlayEl
   * @param {boolean} open
   * @param {HTMLElement|null} [root]
   */
  function setOnboardingOverlayOpen(overlayEl, open, root = null) {
    if (!overlayEl) return;
    try {
      overlayEl.hidden = !open;
      if (open) {
        // Hostile pages sometimes override [hidden]/display; reinforce when opening.
        overlayEl.style.setProperty('display', 'flex', 'important');
        overlayEl.style.setProperty('pointer-events', 'auto', 'important');
      } else {
        overlayEl.style.removeProperty('display');
        overlayEl.style.removeProperty('pointer-events');
        overlayEl.style.display = 'none';
        overlayEl.style.pointerEvents = 'none';
      }
    } catch { /* ignore */ }
    try {
      if (root) {
        if (open) root.dataset.kpOnboardingOverlayOpen = 'true';
        else delete root.dataset.kpOnboardingOverlayOpen;
      }
    } catch { /* ignore */ }
  }

  // --- end stamped onboarding-shared.js ---
// KP_EARLY_INJECT_UI_END

  // Essential CSS for early injection - no longer needed for cursor element
  // Important: we intentionally mirror the main extension's cursor CSS contract:
  // - When `html` has `kpv2-cursor-hidden`, we force the cursor via `--kpv2-cursor`.
  // This prevents the "cursor pop-in" that used to happen at document_idle.
  // Keep print rules in sync with buildKeyPilotPrintCss() in style-manager.js.
  // Early shells (control strip, keyboard ref, onboarding) can exist before #kpv2-style.
  const EARLY_CSS = `
    /* KeyPilot early cursor (document_start) */
    html.${CURSOR_HIDDEN_CLASS} * {
      cursor: var(${CURSOR_VAR}, auto) !important;
    }

    /* Ensure cursor overrides work on common interactive elements */
    html.${CURSOR_HIDDEN_CLASS} a[href],
    html.${CURSOR_HIDDEN_CLASS} button,
    html.${CURSOR_HIDDEN_CLASS} input,
    html.${CURSOR_HIDDEN_CLASS} select,
    html.${CURSOR_HIDDEN_CLASS} textarea,
    html.${CURSOR_HIDDEN_CLASS} [role="button"],
    html.${CURSOR_HIDDEN_CLASS} [role="link"],
    html.${CURSOR_HIDDEN_CLASS} [onclick],
    html.${CURSOR_HIDDEN_CLASS} [tabindex] {
      cursor: var(${CURSOR_VAR}, auto) !important;
    }

    /* Hide KeyPilot early chrome when printing / saving as PDF. */
    @media print {
      .kp-control-strip,
      .kp-floating-keyboard-help,
      .kp-onboarding-panel,
      [data-kp-control-strip],
      [data-kp-early-control-strip],
      [data-kp-early-floating-keyboard] {
        display: none !important;
        visibility: hidden !important;
      }
    }

    /*
     * Hostile host pages (e.g. Zapier) override UA [hidden]{display:none}.
     * Keep closed keyboard shells invisible even when only the attribute is set.
     * Shown state still uses inline display:flex !important from JS.
     */
    .kp-floating-keyboard-help[hidden],
    .kp-floating-keyboard-help.kpv2-hidden,
    .kp-floating-keyboard-help[aria-hidden="true"] {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /* Pre-load clickable hover outline (document_start → main-script handoff). */
    #${EARLY_HOVER_ID} {
      position: fixed;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      pointer-events: none !important;
      z-index: ${EARLY_HOVER_Z};
      border-radius: 2px;
      display: none;
    }
  `;

  // Early cursor state
  let isExtensionEnabled = true;
  let currentMode = 'none';
  let mousePosition = { x: NaN, y: NaN };
  /** False until a trusted pointer event reports real client coords (do not seed viewport-center). */
  let earlyPointerSeen = false;
  let earlyPointerListenersActive = false;
  let earlyObserver = null;
  let earlyClickableElements = new Set();
  let keyboardListenersActive = false;
  let earlyHoverEl = null;
  let earlyHoverTarget = null;
  let earlyHoverRaf = 0;
  let earlyScrollResizeListener = null;
  let earlyFocusChrome = {
    focusColor: 'blue',
    overlayFillEnabled: false,
    overlayShadowEnabled: false,
    rectangleThickness: 3
  };
  let pendingKeyEvents = [];
  let cursorApplied = false; // Track if cursor has been applied to prevent unnecessary updates
  let cursorSettingsChanged = false; // Track if settings changed to force cursor reapplication
  let isMainExtensionLoaded = false; // Track if main extension has taken over
  let keyboardHelpHandedOff = false; // Keyboard Reference stays early-owned until adopted
  let keyboardHelpVisible = false;
  /** True when this tab is a separate-window Link Preview / Open Popover. */
  let isPopoverOsWindow = false;
  let keyboardLayoutId = (typeof DEFAULT_KEYBOARD_LAYOUT_ID === 'string' && DEFAULT_KEYBOARD_LAYOUT_ID)
    ? DEFAULT_KEYBOARD_LAYOUT_ID
    : 'browsing-right';
  let keyboardLayoutFamilyId = (typeof DEFAULT_KEYBOARD_LAYOUT_FAMILY_ID === 'string' && DEFAULT_KEYBOARD_LAYOUT_FAMILY_ID)
    ? DEFAULT_KEYBOARD_LAYOUT_FAMILY_ID
    : 'browsing';
  // User layouts live in chrome.storage (KEYBOARD_LAYOUT_STORE_KEY). Early-inject
  // assembles them from that store + stamped EARLY_FUNCTION_PAINT so the reference
  // can paint at document_start the same way built-ins do.
  let keyboardUsesCustomLayout = false;
  let keyboardCustomLayoutSel = '';
  let keyboardLayoutStore = null;
  let keyboardShowNumberRow = false;
  let keyboardReferenceCollapsed = false;
  let keyboardHelpRoot = null;
  let keyboardHelpShadowRoot = null;
  let keyboardHelpKeyboardContainer = null;
  let keyboardHelpStorageListener = null;
  let onboardingRoot = null;
  /** Cached shadow-piercing shell refs (host.querySelector cannot see the checklist). */
  let onboardingShellRefs = null;
  let onboardingStorageListener = null;
  // Control strip defaults match SettingsManager DEFAULT_SETTINGS.controlStrip
  let controlStripRoot = null;
  let controlStripShadowRoot = null;
  let controlStripDesiredVisible = true;
  let controlStripCollapsed = true;
  // Default matches SettingsManager (compact). Apply that immediately so the
  // strip does not paint expanded while storage is in flight; expand only if
  // persisted settings say so.
  let controlStripLayoutHydrated = false;
  let controlStripStorageListener = null;
  let controlStripRefs = null; // { statusBtn, statusDot, statusLabel, modules, moveBtn, keyboardBtn, settingsBtn, collapseBtn, closeBtn }
  let mainLoadedListenerInstalled = false;
  let earlyControlStripHostGuard = null;
  let earlyKeyboardHelpHostGuard = null;

  /**
   * Prefer body once it exists. document_start often mounts under <html>; React/Next
   * App Router later removes foreign html children (Suno control-strip/keyboard vanish).
   * Kept outside stamped UI blocks so `npm run build` does not wipe it.
   */
  function ensureEarlyChromeHostMounted(host) {
    if (!host) return null;
    try {
      const body = document.body;
      const html = document.documentElement;
      if (body && host.parentElement === html) {
        body.appendChild(host);
        return body;
      }
      const parent = body || html;
      if (parent && host.parentElement !== parent) parent.appendChild(host);
      return parent;
    } catch {
      return null;
    }
  }

  function setupEarlyControlStripHostGuard() {
    if (earlyControlStripHostGuard || typeof MutationObserver === 'undefined') return;
    try {
      earlyControlStripHostGuard = new MutationObserver(() => {
        if (isMainExtensionLoaded) return;
        if (!controlStripDesiredVisible || !controlStripRoot || controlStripRoot.isConnected) return;
        try {
          ensureEarlyChromeHostMounted(controlStripRoot);
          applyEarlyControlStripVisibility();
        } catch { /* ignore */ }
      });
      earlyControlStripHostGuard.observe(document.documentElement, { childList: true, subtree: true });
    } catch {
      earlyControlStripHostGuard = null;
    }
  }

  function setupEarlyKeyboardHelpHostGuard() {
    if (earlyKeyboardHelpHostGuard || typeof MutationObserver === 'undefined') return;
    try {
      earlyKeyboardHelpHostGuard = new MutationObserver(() => {
        if (keyboardHelpHandedOff) return;
        if (!keyboardHelpVisible || !keyboardHelpRoot || keyboardHelpRoot.isConnected) return;
        try {
          ensureEarlyChromeHostMounted(keyboardHelpRoot);
          applyEarlyKeyboardHelpVisibility(keyboardHelpVisible);
        } catch { /* ignore */ }
      });
      earlyKeyboardHelpHostGuard.observe(document.documentElement, { childList: true, subtree: true });
    } catch {
      earlyKeyboardHelpHostGuard = null;
    }
  }

  function relocateAllEarlyChromeToBody() {
    try {
      ensureEarlyChromeHostMounted(controlStripRoot);
      ensureEarlyChromeHostMounted(keyboardHelpRoot);
      ensureEarlyChromeHostMounted(onboardingRoot);
      remountEarlyHoverEl();
    } catch { /* ignore */ }
  }

  // When body appears after document_start, move any html-mounted shells under body.
  try {
    if (!document.body) {
      const bodyWatch = new MutationObserver(() => {
        if (!document.body) return;
        try { bodyWatch.disconnect(); } catch { /* ignore */ }
        relocateAllEarlyChromeToBody();
      });
      bodyWatch.observe(document.documentElement, { childList: true });
    } else {
      relocateAllEarlyChromeToBody();
    }
    document.addEventListener('DOMContentLoaded', relocateAllEarlyChromeToBody, { once: true });
  } catch { /* ignore */ }

  function handoffEarlyKeyboardHelp() {
    if (keyboardHelpHandedOff) return;
    keyboardHelpHandedOff = true;
    try { earlyKeyboardHelpHostGuard?.disconnect?.(); } catch { /* ignore */ }
    earlyKeyboardHelpHostGuard = null;
    try {
      if (keyboardHelpStorageListener && chrome?.storage?.onChanged) {
        chrome.storage.onChanged.removeListener(keyboardHelpStorageListener);
      }
    } catch { /* ignore */ }
    keyboardHelpStorageListener = null;
  }

  function setupMainLoadedHandoffListener() {
    if (mainLoadedListenerInstalled) return;
    mainLoadedListenerInstalled = true;

    // Clean up when main extension loads - early-inject must yield control.
    // (This used to be wired from the cursor takeover path, but the cursor is now CSS-based,
    // so we listen unconditionally.)
    window.addEventListener('keypilot-main-loaded', () => {
      isMainExtensionLoaded = true;

      try { earlyControlStripHostGuard?.disconnect?.(); } catch { /* ignore */ }
      earlyControlStripHostGuard = null;
      // Keep the Keyboard Reference host-guard + storage listener until the
      // bundled script adopts the shell. cursor.ensure() fires this event
      // well before setupKeyboardHelpSync(); dropping the guard here lets
      // SPA body replacement steal a still-hidden early shell.

      // Stop early mouse tracking (main extension will handle this)
      try { stopEarlyPointerListeners(); } catch {}
      try { stopEarlyHoverTracking(); } catch {}

      // Stop early keyboard capture
      try { stopEarlyKeyboardCapture(); } catch {}

      // Stop early DOM observation
      try {
        if (earlyObserver) {
          earlyObserver.disconnect();
          earlyObserver = null;
        }
      } catch {}

      try {
        if (cursorSettingsListener && chrome?.storage?.onChanged) {
          chrome.storage.onChanged.removeListener(cursorSettingsListener);
        }
      } catch {}
      cursorSettingsListener = null;

      // Stop reacting to onboarding storage changes once the main extension is active.
      // We keep the onboarding DOM in place so the bundled script can adopt it.
      try {
        if (onboardingStorageListener && chrome?.storage?.onChanged) {
          chrome.storage.onChanged.removeListener(onboardingStorageListener);
        }
      } catch {}
      onboardingStorageListener = null;

      // Stop reacting to control-strip settings once the main extension is active.
      // Keep the DOM so ControlStrip can adopt it without flicker.
      try {
        if (controlStripStorageListener && chrome?.storage?.onChanged) {
          chrome.storage.onChanged.removeListener(controlStripStorageListener);
        }
      } catch {}
      controlStripStorageListener = null;

      kpEarlyDebugLog('[KeyPilot Early] Handed off to main extension, cursor control yielded');
    }, { once: true });

    window.addEventListener('keypilot-keyboard-help-adopted', () => {
      handoffEarlyKeyboardHelp();
    }, { once: true });
  }

  /**
   * Build (or adopt) the early walkthrough shell.
   * Shell DOM comes from stamped onboarding-shared.js (createOnboardingShell).
   */
  function ensureOnboardingShell() {
    try {
      if (window !== window.top) return null;
      if (onboardingRoot && onboardingRoot.isConnected) return onboardingRoot;

      const existing = document.querySelector('.kp-onboarding-panel[data-kp-early-onboarding="true"]');
      if (existing && existing.isConnected) {
        onboardingRoot = existing;
        try {
          onboardingShellRefs =
            (typeof queryOnboardingShellRefs === 'function' && queryOnboardingShellRefs(existing)) ||
            onboardingShellRefs;
        } catch { /* ignore */ }
        return onboardingRoot;
      }

      if (typeof createOnboardingShell !== 'function') return null;

      const shell = createOnboardingShell(document, {
        zIndex: Z_ONBOARDING_PANEL,
        early: true,
        initiallyHidden: true,
        includeViewTransitions: false,
        applyTheme: typeof applyPopupThemeVars === 'function' ? applyPopupThemeVars : null,
        stepText: '…',
        navDisabled: true,
        // Avoid "Welcome to KeyPilot" looking like slide 1 if we reveal before storage.
        title: '…'
      });

      const { root, slideSurface, titleEl, stepEl, resetBtn, closeBtn } = shell;
      onboardingShellRefs = shell;

      // Early-inject reset: clear progress + re-enable onboarding (dual-write).
      resetBtn.addEventListener('click', () => {
        try {
          const firstId =
            (typeof ONBOARDING_FIRST_SLIDE_ID === 'string' && ONBOARDING_FIRST_SLIDE_ID) ||
            'basic_navigation';
          const progress =
            typeof createEmptyProgress === 'function'
              ? createEmptyProgress(firstId)
              : {
                  slideId: firstId,
                  completedTaskIds: [],
                  onEnterDoneSlideIds: [],
                  completed: false,
                  timestamp: Date.now()
                };
          const activeKey =
            (typeof ONBOARDING_STORAGE_KEYS !== 'undefined' && ONBOARDING_STORAGE_KEYS.ACTIVE) ||
            ONBOARDING_ACTIVE_STORAGE_KEY;
          const progressKey =
            (typeof ONBOARDING_STORAGE_KEYS !== 'undefined' && ONBOARDING_STORAGE_KEYS.PROGRESS) ||
            ONBOARDING_PROGRESS_STORAGE_KEY;
          const payload = {
            [activeKey]: true,
            [progressKey]: progress
          };
          const writeBoth = async () => {
            try { await chrome.storage.sync.set(payload); } catch { /* ignore */ }
            try { await chrome.storage.local.set(payload); } catch { /* ignore */ }
          };
          writeBoth()
            .then(() => {
              if (isMainExtensionLoaded) return;
              try {
                if (typeof setOnboardingPanelVisible === 'function') {
                  setOnboardingPanelVisible(root, true);
                } else {
                  root.hidden = false;
                  root.style.display = 'flex';
                  root.style.pointerEvents = 'auto';
                }
                renderEarlyOnboardingContent(
                  { body: slideSurface, titleEl, stepEl },
                  progress
                );
              } catch { /* ignore */ }
            })
            .catch(() => {});
        } catch { /* ignore */ }
      });

      // Closing in early-inject should persist so the panel doesn't return on next page.
      closeBtn.addEventListener('click', () => {
        try {
          if (typeof setOnboardingPanelVisible === 'function') {
            setOnboardingPanelVisible(root, false);
          } else {
            root.hidden = true;
            root.style.display = 'none';
            root.style.pointerEvents = 'none';
          }
        } catch { /* ignore */ }
        try {
          const activeKey =
            (typeof ONBOARDING_STORAGE_KEYS !== 'undefined' && ONBOARDING_STORAGE_KEYS.ACTIVE) ||
            ONBOARDING_ACTIVE_STORAGE_KEY;
          const payload = { [activeKey]: false, timestamp: Date.now() };
          const writeBoth = async () => {
            try { await chrome.storage.sync.set(payload); } catch { /* ignore */ }
            try { await chrome.storage.local.set(payload); } catch { /* ignore */ }
          };
          writeBoth().catch(() => {});
        } catch { /* ignore */ }
      });

      // Do not paint slide 1 here. Storage-backed refresh paints the restored
      // slide while the shell is still hidden, then reveals it. Painting
      // `basic_navigation` first is what flashes on reload when slideIndex > 0.

      (document.body || document.documentElement).appendChild(root);
      try { ensureEarlyChromeHostMounted(root); } catch { /* ignore */ }
      onboardingRoot = root;
      return onboardingRoot;
    } catch {
      return null;
    }
  }

  function getEarlyOnboardingModel() {
    try {
      if (typeof EARLY_ONBOARDING_MODEL === 'object' && EARLY_ONBOARDING_MODEL && Array.isArray(EARLY_ONBOARDING_MODEL.slides)) {
        return EARLY_ONBOARDING_MODEL;
      }
    } catch { /* ignore */ }
    return { slides: [] };
  }

  function getOnboardingShellRefs() {
    if (onboardingShellRefs?.slideSurface?.isConnected || onboardingShellRefs?.body?.isConnected) {
      return onboardingShellRefs;
    }
    try {
      if (typeof queryOnboardingShellRefs === 'function') {
        onboardingShellRefs = queryOnboardingShellRefs(onboardingRoot);
      }
    } catch { /* ignore */ }
    return onboardingShellRefs;
  }

  function findEarlySlide(model, slideId) {
    const slides = model && Array.isArray(model.slides) ? model.slides : [];
    const id = String(slideId || '').trim();
    if (id) {
      const found = slides.find((s) => s && String(s.id || '').trim() === id);
      if (found) return found;
    }
    return slides[0] || null;
  }

  function renderEarlyOnboardingContent(refs, progress) {
    // Thin wrapper over stamped onboarding-shared helpers so early checklist
    // DOM matches the bundled OnboardingPanel (seamless adoption).
    const model = getEarlyOnboardingModel();
    const slide = findEarlySlide(model, progress && progress.slideId);
    if (!slide) return;

    const slides = model.slides || [];
    const slideIndex = Math.max(0, slides.findIndex((s) => s && s.id === slide.id));
    const slideCount = Math.max(1, slides.length || 1);
    const completed = Array.isArray(progress?.completedTaskIds)
      ? progress.completedTaskIds.map(String)
      : [];

    const resolved = refs || getOnboardingShellRefs() || {};
    const surface =
      resolved.slideSurface ||
      resolved.body ||
      null;
    const titleEl = resolved.titleEl || null;
    const stepEl = resolved.stepEl || null;
    if (!surface) return;

    const chromeRefs = { root: onboardingRoot, titleEl, stepEl };
    if (typeof updateOnboardingChrome === 'function') {
      updateOnboardingChrome(chromeRefs, {
        title: slide.title || (typeof ONBOARDING_DEFAULT_TITLE === 'string' ? ONBOARDING_DEFAULT_TITLE : 'Welcome to KeyPilot'),
        slideId: slide.id,
        slideIndex,
        slideCount
      });
    } else {
      try {
        if (titleEl) titleEl.textContent = String(slide.title || 'Welcome to KeyPilot');
        if (stepEl) stepEl.textContent = `${slideIndex + 1} / ${slideCount}`;
      } catch { /* ignore */ }
    }

    // Open the onEnter overlay BEFORE painting the checklist so the first frame
    // does not flash uncovered slide content under the dimmer.
    try { syncEarlyOnEnterOverlay(slide, progress); } catch { /* ignore */ }

    if (typeof renderOnboardingSlideSurface === 'function') {
      renderOnboardingSlideSurface(surface, {
        tasks: slide.tasks || [],
        completedTaskIds: completed,
        bodyText: slide.bodyText || '',
        forceRebuild: true,
        // Match bundled onboarding-manager: reopen tip not shown on slides.
        showTip: false,
        showCloseButton: slide.id === 'completion',
        onCloseClick: (e) => {
          try {
            e?.preventDefault?.();
            e?.stopPropagation?.();
          } catch { /* ignore */ }
          try {
            const root = onboardingRoot;
            if (root) {
              if (typeof setOnboardingPanelVisible === 'function') {
                setOnboardingPanelVisible(root, false);
              } else {
                root.hidden = true;
                root.style.display = 'none';
                root.style.pointerEvents = 'none';
              }
            }
          } catch { /* ignore */ }
          try {
            const activeKey =
              (typeof ONBOARDING_STORAGE_KEYS !== 'undefined' && ONBOARDING_STORAGE_KEYS.ACTIVE) ||
              ONBOARDING_ACTIVE_STORAGE_KEY;
            const payload = { [activeKey]: false, timestamp: Date.now() };
            const writeBoth = async () => {
              try { await chrome.storage.sync.set(payload); } catch { /* ignore */ }
              try { await chrome.storage.local.set(payload); } catch { /* ignore */ }
            };
            writeBoth().catch(() => {});
          } catch { /* ignore */ }
        }
      });
    }
  }

  /**
   * Show / hide the welcome (onEnter) modal on the early shell.
   * @param {any} slide
   * @param {any} progress
   */
  function syncEarlyOnEnterOverlay(slide, progress) {
    if (!onboardingRoot || isMainExtensionLoaded) return;
    if (typeof ensureOnboardingOverlay !== 'function' || typeof setOnboardingOverlayOpen !== 'function') {
      return;
    }

    const overlayRefs = ensureOnboardingOverlay(onboardingRoot);
    if (!overlayRefs || !overlayRefs.overlayEl) return;

    const done = Array.isArray(progress?.onEnterDoneSlideIds)
      ? progress.onEnterDoneSlideIds.map(String)
      : [];
    const entries = Array.isArray(slide?.onEnter) ? slide.onEnter : [];
    const overlayEntry = entries.find((e) => e && String(e.type || '') === 'overlay');
    const slideId = slide?.id != null ? String(slide.id) : '';
    const shouldShow = !!(overlayEntry && slideId && !done.includes(slideId));

    if (!shouldShow) {
      try { setOnboardingOverlayOpen(overlayRefs.overlayEl, false, onboardingRoot); } catch { /* ignore */ }
      return;
    }

    try {
      if (overlayRefs.titleEl) {
        renderKeyboardKeysInto(overlayRefs.titleEl, String(overlayEntry.title || 'Welcome to KeyPilot'));
      }
    } catch { /* ignore */ }
    try {
      if (overlayRefs.msgEl) {
        renderKeyboardKeysInto(
          overlayRefs.msgEl,
          String(overlayEntry.message || overlayEntry.text || '')
        );
      }
    } catch { /* ignore */ }
    try {
      if (overlayRefs.primaryBtn) {
        overlayRefs.primaryBtn.textContent = String(overlayEntry.primaryText || overlayEntry.primary || 'OK');
        overlayRefs.primaryBtn.hidden = false;
      }
    } catch { /* ignore */ }
    try {
      if (overlayRefs.secondaryBtn) {
        const secondary = String(overlayEntry.secondaryText || overlayEntry.secondary || '').trim();
        overlayRefs.secondaryBtn.textContent = secondary;
        overlayRefs.secondaryBtn.hidden = !secondary;
        try {
          const secondaryAction = String(overlayEntry.secondaryAction || '').trim().toLowerCase();
          if (secondaryAction) overlayRefs.secondaryBtn.dataset.kpSecondaryAction = secondaryAction;
          else delete overlayRefs.secondaryBtn.dataset.kpSecondaryAction;
          const laterTitle = String(overlayEntry.laterTitle || '').trim();
          const laterMessage = String(overlayEntry.laterMessage || overlayEntry.laterText || '').trim();
          const laterPrimary = String(overlayEntry.laterPrimaryText || overlayEntry.laterPrimary || 'OK, Close').trim();
          if (laterTitle) overlayRefs.secondaryBtn.dataset.kpLaterTitle = laterTitle;
          else delete overlayRefs.secondaryBtn.dataset.kpLaterTitle;
          if (laterMessage) overlayRefs.secondaryBtn.dataset.kpLaterMessage = laterMessage;
          else delete overlayRefs.secondaryBtn.dataset.kpLaterMessage;
          if (laterPrimary) overlayRefs.secondaryBtn.dataset.kpLaterPrimary = laterPrimary;
          else delete overlayRefs.secondaryBtn.dataset.kpLaterPrimary;
        } catch { /* ignore */ }
      }
    } catch { /* ignore */ }

    // Wire OK once; persists onEnterDone so the bundled manager does not re-show forever.
    try {
      const btn = overlayRefs.primaryBtn;
      if (btn && !btn._kpEarlyOverlayPrimaryBound) {
        btn._kpEarlyOverlayPrimaryBound = true;
        btn.addEventListener('click', (e) => {
          try {
            e.preventDefault();
            e.stopPropagation();
          } catch { /* ignore */ }
          const shouldClose = overlayRefs.overlayEl?.dataset?.kpOverlayCloseOnPrimary === 'true';
          try { delete overlayRefs.overlayEl?.dataset?.kpOverlayCloseOnPrimary; } catch { /* ignore */ }
          try { setOnboardingOverlayOpen(overlayRefs.overlayEl, false, onboardingRoot); } catch { /* ignore */ }
          try {
            const id = String(onboardingRoot?.dataset?.kpEarlyOverlaySlideId || slideId || '');
            if (id) markEarlyOnEnterDone(id);
          } catch { /* ignore */ }
          if (shouldClose) {
            try {
              if (typeof setOnboardingPanelVisible === 'function') {
                setOnboardingPanelVisible(onboardingRoot, false);
              } else if (onboardingRoot) {
                onboardingRoot.hidden = true;
                onboardingRoot.style.display = 'none';
                onboardingRoot.style.pointerEvents = 'none';
              }
            } catch { /* ignore */ }
            try {
              const activeKey =
                (typeof ONBOARDING_STORAGE_KEYS !== 'undefined' && ONBOARDING_STORAGE_KEYS.ACTIVE) ||
                ONBOARDING_ACTIVE_STORAGE_KEY;
              const payload = { [activeKey]: false, timestamp: Date.now() };
              const writeBoth = async () => {
                try { await chrome.storage.sync.set(payload); } catch { /* ignore */ }
                try { await chrome.storage.local.set(payload); } catch { /* ignore */ }
              };
              writeBoth().catch(() => {});
            } catch { /* ignore */ }
          }
        });
      }
    } catch { /* ignore */ }

    // Secondary — close, or show "return later" reminder then close on OK.
    try {
      const btn = overlayRefs.secondaryBtn;
      if (btn && !btn._kpEarlyOverlaySecondaryBound) {
        btn._kpEarlyOverlaySecondaryBound = true;
        btn.addEventListener('click', (e) => {
          try {
            e.preventDefault();
            e.stopPropagation();
          } catch { /* ignore */ }
          const id = String(onboardingRoot?.dataset?.kpEarlyOverlaySlideId || '');
          const secondaryAction = String(btn.dataset?.kpSecondaryAction || '').trim().toLowerCase();

          const closeWalkthrough = () => {
            try { setOnboardingOverlayOpen(overlayRefs.overlayEl, false, onboardingRoot); } catch { /* ignore */ }
            try {
              if (typeof setOnboardingPanelVisible === 'function') {
                setOnboardingPanelVisible(onboardingRoot, false);
              } else if (onboardingRoot) {
                onboardingRoot.hidden = true;
                onboardingRoot.style.display = 'none';
                onboardingRoot.style.pointerEvents = 'none';
              }
            } catch { /* ignore */ }
            try {
              const activeKey =
                (typeof ONBOARDING_STORAGE_KEYS !== 'undefined' && ONBOARDING_STORAGE_KEYS.ACTIVE) ||
                ONBOARDING_ACTIVE_STORAGE_KEY;
              const payload = { [activeKey]: false, timestamp: Date.now() };
              const writeBoth = async () => {
                try { await chrome.storage.sync.set(payload); } catch { /* ignore */ }
                try { await chrome.storage.local.set(payload); } catch { /* ignore */ }
              };
              writeBoth().catch(() => {});
            } catch { /* ignore */ }
          };

          if (secondaryAction === 'later' || secondaryAction === 'defer' || secondaryAction === 'remind') {
            // Accept this slide's intro so it does not re-show on reopen.
            try { if (id) markEarlyOnEnterDone(id); } catch { /* ignore */ }
            try {
              if (overlayRefs.titleEl) {
                renderKeyboardKeysInto(
                  overlayRefs.titleEl,
                  String(btn.dataset?.kpLaterTitle || 'Return to this Tutorial with `Alt`+`I`')
                );
              }
            } catch { /* ignore */ }
            try {
              if (overlayRefs.msgEl) {
                renderKeyboardKeysInto(
                  overlayRefs.msgEl,
                  String(btn.dataset?.kpLaterMessage || '')
                );
              }
            } catch { /* ignore */ }
            try {
              if (overlayRefs.primaryBtn) {
                overlayRefs.primaryBtn.textContent = String(btn.dataset?.kpLaterPrimary || 'OK, Close');
                overlayRefs.primaryBtn.hidden = false;
              }
            } catch { /* ignore */ }
            try {
              if (overlayRefs.secondaryBtn) overlayRefs.secondaryBtn.hidden = true;
            } catch { /* ignore */ }
            try {
              if (overlayRefs.overlayEl) overlayRefs.overlayEl.dataset.kpOverlayCloseOnPrimary = 'true';
            } catch { /* ignore */ }
            try { setOnboardingOverlayOpen(overlayRefs.overlayEl, true, onboardingRoot); } catch { /* ignore */ }
            return;
          }

          if (secondaryAction === 'close' || secondaryAction === 'dismiss') {
            // Do not mark onEnter done — reopen should show this overlay again.
            closeWalkthrough();
            return;
          }

          try { setOnboardingOverlayOpen(overlayRefs.overlayEl, false, onboardingRoot); } catch { /* ignore */ }
        });
      }
    } catch { /* ignore */ }

    try {
      if (onboardingRoot && slideId) onboardingRoot.dataset.kpEarlyOverlaySlideId = slideId;
    } catch { /* ignore */ }

    try { setOnboardingOverlayOpen(overlayRefs.overlayEl, true, onboardingRoot); } catch { /* ignore */ }
  }

  /**
   * Merge slideId into progress.onEnterDoneSlideIds (dual-write sync+local).
   * @param {string} slideId
   */
  function markEarlyOnEnterDone(slideId) {
    const id = String(slideId || '').trim();
    if (!id) return;
    const progressKey =
      (typeof ONBOARDING_STORAGE_KEYS !== 'undefined' && ONBOARDING_STORAGE_KEYS.PROGRESS) ||
      ONBOARDING_PROGRESS_STORAGE_KEY;
    const firstId =
      (typeof ONBOARDING_FIRST_SLIDE_ID === 'string' && ONBOARDING_FIRST_SLIDE_ID) ||
      'basic_navigation';

    const writeBoth = async () => {
      /** @type {any} */
      let prog = null;
      try {
        const sync = await chrome.storage.sync.get([progressKey]);
        if (sync && sync[progressKey] && typeof sync[progressKey] === 'object') prog = sync[progressKey];
      } catch { /* ignore */ }
      if (!prog) {
        try {
          const local = await chrome.storage.local.get([progressKey]);
          if (local && local[progressKey] && typeof local[progressKey] === 'object') prog = local[progressKey];
        } catch { /* ignore */ }
      }
      if (!prog || typeof prog !== 'object') {
        prog =
          typeof createEmptyProgress === 'function'
            ? createEmptyProgress(firstId)
            : {
                slideId: firstId,
                completedTaskIds: [],
                onEnterDoneSlideIds: [],
                completed: false,
                timestamp: Date.now()
              };
      }
      const done = Array.isArray(prog.onEnterDoneSlideIds)
        ? prog.onEnterDoneSlideIds.map(String)
        : [];
      if (!done.includes(id)) done.push(id);
      const next = {
        ...prog,
        onEnterDoneSlideIds: done,
        timestamp: Date.now()
      };
      const payload = { [progressKey]: next };
      try { await chrome.storage.sync.set(payload); } catch { /* ignore */ }
      try { await chrome.storage.local.set(payload); } catch { /* ignore */ }
    };
    writeBoth().catch(() => {});
  }

  async function readOnboardingState() {
    // returns: { active, completed, slideId, completedTaskIds, onEnterDoneSlideIds }
    // Merge sync + local per-key (prefer newer progress by timestamp, else sync).
    const result = {
      active: null,
      completed: null,
      slideId: null,
      completedTaskIds: [],
      onEnterDoneSlideIds: []
    };
    let syncObj = null;
    let localObj = null;

    try {
      syncObj = await chrome.storage.sync.get([ONBOARDING_ACTIVE_STORAGE_KEY, ONBOARDING_PROGRESS_STORAGE_KEY]);
    } catch { /* ignore */ }
    try {
      localObj = await chrome.storage.local.get([ONBOARDING_ACTIVE_STORAGE_KEY, ONBOARDING_PROGRESS_STORAGE_KEY]);
    } catch { /* ignore */ }

    try {
      const syncActive = syncObj && typeof syncObj[ONBOARDING_ACTIVE_STORAGE_KEY] === 'boolean'
        ? syncObj[ONBOARDING_ACTIVE_STORAGE_KEY]
        : null;
      const localActive = localObj && typeof localObj[ONBOARDING_ACTIVE_STORAGE_KEY] === 'boolean'
        ? localObj[ONBOARDING_ACTIVE_STORAGE_KEY]
        : null;
      if (syncActive !== null) result.active = syncActive;
      else if (localActive !== null) result.active = localActive;

      const syncProg = syncObj && syncObj[ONBOARDING_PROGRESS_STORAGE_KEY];
      const localProg = localObj && localObj[ONBOARDING_PROGRESS_STORAGE_KEY];
      const syncTs = syncProg && typeof syncProg === 'object' && typeof syncProg.timestamp === 'number' ? syncProg.timestamp : 0;
      const localTs = localProg && typeof localProg === 'object' && typeof localProg.timestamp === 'number' ? localProg.timestamp : 0;

      let prog = null;
      if (syncProg && typeof syncProg === 'object' && localProg && typeof localProg === 'object') {
        prog = localTs > syncTs ? localProg : syncProg;
      } else if (syncProg && typeof syncProg === 'object') {
        prog = syncProg;
      } else if (localProg && typeof localProg === 'object') {
        prog = localProg;
      }

      if (prog) {
        if (typeof prog.completed === 'boolean') result.completed = prog.completed;
        if (typeof prog.slideId === 'string') result.slideId = prog.slideId;
        if (Array.isArray(prog.completedTaskIds)) result.completedTaskIds = prog.completedTaskIds.map(String);
        if (Array.isArray(prog.onEnterDoneSlideIds)) result.onEnterDoneSlideIds = prog.onEnterDoneSlideIds.map(String);
      }
    } catch { /* ignore */ }

    return result;
  }

  async function readEnabledState() {
    // returns: { enabled: boolean|null }
    const result = { enabled: null };
    const KEY = 'keypilot_enabled';
    const parse = (obj) => {
      try {
        if (!obj || typeof obj !== 'object') return;
        if (typeof obj[KEY] === 'boolean') result.enabled = obj[KEY];
      } catch { /* ignore */ }
    };

    try {
      const sync = await chrome.storage.sync.get([KEY]);
      parse(sync);
      if (result.enabled !== null) return result;
    } catch { /* ignore */ }

    try {
      const local = await chrome.storage.local.get([KEY]);
      parse(local);
    } catch { /* ignore */ }

    return result;
  }

  async function refreshEarlyOnboardingVisibility() {
    try {
      if (isMainExtensionLoaded) return;
      if (window !== window.top) return;
      const root = ensureOnboardingShell();
      if (!root) return;

      const state = await readOnboardingState();
      const enabledState = await readEnabledState();
      // Conservative default: if we can't confirm enabled, do not show.
      // This matches the bundled onboarding behavior and prevents load-time flashes.
      const isEnabled = enabledState.enabled === true;
      const shouldShow = isEnabled && state.active === true && state.completed !== true;
      if (shouldShow) {
        // Paint checklist + onEnter overlay while still hidden, then reveal once.
        // Showing first used to flash the uncovered slide for a frame.
        try { renderEarlyOnboardingContent(null, state); } catch { /* ignore */ }
      }
      if (typeof setOnboardingPanelVisible === 'function') {
        setOnboardingPanelVisible(root, shouldShow);
      } else {
        root.hidden = !shouldShow;
        root.style.display = shouldShow ? 'flex' : 'none';
        root.style.pointerEvents = shouldShow ? 'auto' : 'none';
      }
      // Control strip sits below onboarding when both occupy the top-left.
      try { syncEarlyControlStripOnboardingOffset(); } catch { /* ignore */ }
    } catch {
      // ignore
    }
  }

  function setupEarlyOnboardingStorageSync() {
    try {
      if (window !== window.top) return;
      ensureOnboardingShell();
      refreshEarlyOnboardingVisibility(); // async

      if (!chrome?.storage?.onChanged?.addListener) return;
      if (onboardingStorageListener) return;

      onboardingStorageListener = (changes, area) => {
        try {
          if (isMainExtensionLoaded) return;
          if (area !== 'sync' && area !== 'local') return;
          if (!changes) return;
          if (!changes[ONBOARDING_ACTIVE_STORAGE_KEY] && !changes[ONBOARDING_PROGRESS_STORAGE_KEY] && !changes['keypilot_enabled']) return;
          refreshEarlyOnboardingVisibility(); // async
        } catch { /* ignore */ }
      };

      chrome.storage.onChanged.addListener(onboardingStorageListener);
    } catch {
      // ignore
    }
  }

  function resolveKeybindingsFontUrls() {
    try {
      const getURL = chrome && chrome.runtime && chrome.runtime.getURL
        ? chrome.runtime.getURL.bind(chrome.runtime)
        : null;
      if (!getURL) return null;
      return {
        robotech: getURL('fonts/ROBOTECHGPRegular.ttf'),
        titillium: getURL('fonts/TitilliumTextRegular.otf'),
        titilliumBold: getURL('fonts/TitilliumTextBold.ttf'),
        cubellan: getURL('fonts/CubellanRegular.ttf'),
        ezarion: getURL('fonts/EzarionRegular.ttf'),
        dosis: getURL('fonts/DosisBook.ttf')
      };
    } catch {
      return null;
    }
  }

  /**
   * Preload Dosis (key labels) at document_start so the first Keyboard Reference
   * paint does not flash the fallback system font.
   */
  function ensureKeybindingsFontsReady() {
    try {
      const urls = resolveKeybindingsFontUrls();
      if (!urls || !urls.dosis) return;
      const doc = document;
      const head = doc.head || doc.documentElement;
      if (!head || !head.appendChild) return;

      const preloadAttr = 'data-kp-keybindings-font-preload';
      if (!head.querySelector(`link[${preloadAttr}="dosis"]`)) {
        const link = doc.createElement('link');
        link.rel = 'preload';
        link.as = 'font';
        link.type = 'font/ttf';
        link.href = urls.dosis;
        link.crossOrigin = 'anonymous';
        link.setAttribute(preloadAttr, 'dosis');
        head.appendChild(link);
      }

      const fontStyleAttr = 'data-kp-keybindings-fonts';
      if (!head.querySelector(`style[${fontStyleAttr}]`)) {
        const style = doc.createElement('style');
        style.setAttribute(fontStyleAttr, 'true');
        style.textContent = `
@font-face {
  font-family: "Dosis";
  src: url("${urls.dosis}") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
`.trim();
        head.appendChild(style);
      }

      try {
        if (doc.fonts && typeof doc.fonts.load === 'function') {
          void doc.fonts.load('10px "Dosis"');
        }
      } catch { /* ignore */ }
    } catch {
      // ignore
    }
  }

  function ensureKeybindingsUiStylesInjected(root) {
    try {
      ensureKeybindingsFontsReady();
      const doc = root && root.nodeType === 9 ? root : root?.ownerDocument;
      const mount = root && root.nodeType === 9 ? root.head : root;
      if (!doc || !mount || !mount.appendChild) return;
      if (mount.querySelector(`style[${KEYBINDINGS_UI_STYLE_ATTR}]`)) return;
      const style = doc.createElement('style');
      style.setAttribute(KEYBINDINGS_UI_STYLE_ATTR, 'true');
      // Replace build-time font placeholders with runtime extension URLs (required on real web pages).
      let css = KEYBINDINGS_UI_EARLY_CSS;
      try {
        const urls = resolveKeybindingsFontUrls();
        if (urls) {
          css = css
            .replaceAll('__KP_FONT_ROBOTECH_URL__', urls.robotech)
            .replaceAll('__KP_FONT_TITILLIUM_URL__', urls.titillium)
            .replaceAll('__KP_FONT_TITILLIUM_BOLD_URL__', urls.titilliumBold)
            .replaceAll('__KP_FONT_CUBELLAN_URL__', urls.cubellan)
            .replaceAll('__KP_FONT_EZARION_URL__', urls.ezarion)
            .replaceAll('__KP_FONT_DOSIS_URL__', urls.dosis);
        }
      } catch {
        // ignore; fallback to placeholders (bundled UI will overwrite later)
      }
      // Theme chrome (incl. .kp-titlebar-icon) must live in the shadow. Document-head
      // copies of KP_ALL_THEMES_CSS do not match nodes inside open shadows, which left
      // a flex gap before "Keyboard Reference" until document_end adopted.
      try {
        if (typeof KP_ALL_THEMES_CSS === 'string' && KP_ALL_THEMES_CSS) {
          css = `${KP_ALL_THEMES_CSS}\n${css}`;
        }
      } catch { /* ignore */ }
      style.textContent = css;
      mount.appendChild(style);
    } catch {
      // ignore
    }
  }

  function el(doc, tag, className, text) {
    const node = doc.createElement(tag);
    if (className) node.className = className;
    if (text !== undefined) node.textContent = text;
    return node;
  }

  function knownBuiltinLayoutIds() {
    try {
      if (typeof KNOWN_BUILTIN_LAYOUT_IDS !== 'undefined' && Array.isArray(KNOWN_BUILTIN_LAYOUT_IDS) && KNOWN_BUILTIN_LAYOUT_IDS.length) {
        return KNOWN_BUILTIN_LAYOUT_IDS;
      }
    } catch { /* ignore */ }
    try {
      if (typeof KEYBOARD_LAYOUTS_BY_ID === 'object' && KEYBOARD_LAYOUTS_BY_ID) {
        return Object.keys(KEYBOARD_LAYOUTS_BY_ID);
      }
    } catch { /* ignore */ }
    return ['browsing-right', 'browsing-left', 'click-history-right', 'click-history-left', 'basic-navigation-right', 'basic-navigation-left'];
  }

  function normalizeKeyboardLayoutId(raw) {
    const v = String(raw || '').trim();
    const known = knownBuiltinLayoutIds();
    if (known.indexOf(v) >= 0) return v;
    return (typeof DEFAULT_KEYBOARD_LAYOUT_ID === 'string' && DEFAULT_KEYBOARD_LAYOUT_ID) || 'browsing-right';
  }

  function earlyLayoutFamilyOptions() {
    try {
      if (typeof EARLY_LAYOUT_FAMILY_OPTIONS !== 'undefined' && Array.isArray(EARLY_LAYOUT_FAMILY_OPTIONS) && EARLY_LAYOUT_FAMILY_OPTIONS.length) {
        return EARLY_LAYOUT_FAMILY_OPTIONS;
      }
    } catch { /* ignore */ }
    return [['builtin:browsing', 'Browsing'], ['builtin:click-history', 'Navigation']];
  }

  function normalizeEarlyKeyboardLayoutFamilyId(raw, layoutId) {
    const v = String(raw || '').trim();
    if (v === 'navigation') return 'browsing';
    const options = earlyLayoutFamilyOptions();
    if (v && options.some((pair) => pair && pair[0] === `builtin:${v}`)) return v;
    // Legacy reduced family is still stored, even if it is not in the picker.
    if (v === 'basic-navigation') return v;
    const id = normalizeKeyboardLayoutId(layoutId);
    if (id.endsWith('-left')) return id.slice(0, -'-left'.length);
    if (id.endsWith('-right')) return id.slice(0, -'-right'.length);
    return (typeof DEFAULT_KEYBOARD_LAYOUT_FAMILY_ID === 'string' && DEFAULT_KEYBOARD_LAYOUT_FAMILY_ID) || 'browsing';
  }

  function isCustomKeyboardLayoutSelection(raw) {
    return String(raw || '').trim().startsWith('user:');
  }

  function applyEarlyLayoutSelect() {
    if (keyboardHelpHandedOff || !keyboardHelpRoot) return;
    try {
      const sel = (keyboardHelpShadowRoot || keyboardHelpRoot).querySelector('[data-kp-floating-keyboard-layout-select="true"]');
      if (!sel) return;
      if (keyboardUsesCustomLayout) {
        const value = keyboardCustomLayoutSel || '';
        try { sel.setAttribute('data-kp-select-value', value); } catch { /* ignore */ }
        const userLayout = getEarlyActiveUserLayout();
        const label = userLayout && userLayout.label ? String(userLayout.label) : 'Custom';
        const labelEl = sel.querySelector && sel.querySelector('.kp-select-trigger-label');
        if (labelEl && label) labelEl.textContent = label;
        return;
      }
      const value = `builtin:${keyboardLayoutFamilyId}`;
      try { sel.setAttribute('data-kp-select-value', value); } catch { /* ignore */ }
      let label = '';
      try {
        const pair = earlyLayoutFamilyOptions().find((p) => p && p[0] === value);
        if (pair && pair[1]) label = String(pair[1]);
      } catch { /* ignore */ }
      const labelEl = sel.querySelector && sel.querySelector('.kp-select-trigger-label');
      if (labelEl && label) labelEl.textContent = label;
      if (sel.tagName === 'SELECT') {
        const has = Array.prototype.some.call(sel.options || [], (o) => o && o.value === value);
        if (has && sel.value !== value) sel.value = value;
      }
    } catch { /* ignore */ }
  }

  /**
   * Apply built-in layout id + family + custom-layout flag from a settings object.
   * Does not render; callers re-paint when layoutChanged / customLayoutChanged.
   */
  function applyEarlyKeyboardLayoutFromSettingsObj(st) {
    const obj = st && typeof st === 'object' ? st : null;
    const nextId = normalizeKeyboardLayoutId(obj ? obj.keyboardLayoutId : null);
    const nextFamily = normalizeEarlyKeyboardLayoutFamilyId(obj ? obj.keyboardLayoutFamilyId : null, nextId);
    const nextUsesCustom = isCustomKeyboardLayoutSelection(obj ? obj.currentKeyboardLayoutId : null);
    const nextCustomSel = nextUsesCustom ? String(obj.currentKeyboardLayoutId || '').trim() : '';
    const layoutChanged = nextId !== keyboardLayoutId;
    const familyChanged = nextFamily !== keyboardLayoutFamilyId;
    const customLayoutChanged = nextUsesCustom !== keyboardUsesCustomLayout || nextCustomSel !== keyboardCustomLayoutSel;
    keyboardLayoutId = nextId;
    keyboardLayoutFamilyId = nextFamily;
    keyboardUsesCustomLayout = nextUsesCustom;
    keyboardCustomLayoutSel = nextCustomSel;
    applyEarlyLayoutSelect();
    return { layoutChanged, familyChanged, customLayoutChanged };
  }

  function applyEarlyFocusChromeFromSettingsObj(settingsObj) {
    const cm = settingsObj && settingsObj.clickMode && typeof settingsObj.clickMode === 'object'
      ? settingsObj.clickMode
      : {};
    const thickness = Number(cm.rectangleThickness);
    earlyFocusChrome = {
      focusColor: cm.focusColor === 'green' ? 'green' : 'blue',
      overlayFillEnabled: cm.overlayFillEnabled === true,
      overlayShadowEnabled: cm.overlayShadowEnabled === true,
      rectangleThickness: Number.isFinite(thickness) && thickness >= 1
        ? Math.min(16, thickness)
        : 3
    };
    applyEarlyFocusChromeToHoverEl();
  }

  function applyEarlyKeyboardLayoutStore(raw) {
    if (raw && typeof raw === 'object' && Number(raw.version) === 1) {
      keyboardLayoutStore = raw;
    } else {
      keyboardLayoutStore = null;
    }
  }

  function getEarlyActiveUserLayout() {
    if (!keyboardUsesCustomLayout) return null;
    const sel = String(keyboardCustomLayoutSel || '').trim();
    if (!sel.startsWith('user:')) return null;
    const id = sel.slice('user:'.length);
    if (!id) return null;
    const layout = keyboardLayoutStore && keyboardLayoutStore.layouts && keyboardLayoutStore.layouts[id];
    return layout && typeof layout === 'object' ? layout : null;
  }

  function getEarlyFunctionPaintMap() {
    try {
      if (typeof EARLY_FUNCTION_PAINT === 'object' && EARLY_FUNCTION_PAINT) return EARLY_FUNCTION_PAINT;
    } catch { /* ignore */ }
    return {};
  }

  function earlyPhysicalSlotLabelFromBinding(binding) {
    const s = String((binding && (binding.displayKey || binding.keyLabel)) || '').trim();
    if (!s) return '';
    if (s.length === 1) return /[a-z]/i.test(s) ? s.toUpperCase() : s;
    if (s.includes('/')) {
      const first = s.split('/')[0];
      if (first && first.trim().length === 1) {
        const ch = first.trim();
        return /[a-z]/i.test(ch) ? ch.toUpperCase() : ch;
      }
    }
    return '';
  }

  function resolveEarlyFunctionSlotPaint(id) {
    const key = String(id || '');
    const paint = getEarlyFunctionPaintMap();
    const store = keyboardLayoutStore;
    if (key.startsWith('action:')) {
      const instance = store && store.actions && store.actions[key] ? store.actions[key] : null;
      const functionId = String((instance && instance.functionId) || '');
      const def = functionId && paint[functionId] ? paint[functionId] : null;
      return {
        label: String((instance && instance.label) || (def && def.label) || 'Configured Function'),
        keyboardClass: String((def && def.keyboardClass) || ''),
        functionId: functionId || key
      };
    }
    const def = paint[key];
    return {
      label: String((def && def.label) || key),
      keyboardClass: String((def && def.keyboardClass) || ''),
      functionId: key
    };
  }

  function getEarlyKeyboardDataForLayout(layoutId) {
    const id = normalizeKeyboardLayoutId(layoutId);
    try {
      const layout = (typeof KEYBOARD_LAYOUTS_BY_ID === 'object' && KEYBOARD_LAYOUTS_BY_ID && KEYBOARD_LAYOUTS_BY_ID[id])
        ? KEYBOARD_LAYOUTS_BY_ID[id]
        : KEYBINDINGS_KEYBOARD_LAYOUT;
      const bindings = (typeof EARLY_KEYBINDINGS_BY_ID === 'object' && EARLY_KEYBINDINGS_BY_ID && EARLY_KEYBINDINGS_BY_ID[id])
        ? EARLY_KEYBINDINGS_BY_ID[id]
        : EARLY_KEYBINDINGS;
      return { id, layout, bindings };
    } catch {
      return { id: DEFAULT_KEYBOARD_LAYOUT_ID || 'browsing-right', layout: KEYBINDINGS_KEYBOARD_LAYOUT, bindings: EARLY_KEYBINDINGS };
    }
  }

  /** Prepend number row (same shape as addNumberRowToKeyboardUiLayout). */
  function addNumberRowToEarlyKeyboardLayout(layout) {
    const base = Array.isArray(layout) ? layout : [];
    try {
      const first = base[0];
      if (Array.isArray(first) && first.some((i) => i && i.type === 'key' && String(i.text || '').trim() === '1')) {
        return base;
      }
    } catch { /* ignore */ }
    const numberRow = [
      { type: 'key', text: '1' },
      { type: 'key', text: '2' },
      { type: 'key', text: '3' },
      { type: 'key', text: '4' },
      { type: 'key', text: '5' },
      { type: 'key', text: '6' },
      { type: 'key', text: '7' },
      { type: 'key', text: '8' },
      { type: 'key', text: '9' },
      { type: 'key', text: '0' }
    ];
    return [numberRow, ...base];
  }

  function renderEarlySlotKeyboard(container, { userLayout, includeNumberRow } = {}) {
    if (!container || !userLayout) return false;
    const doc = container.ownerDocument || document;
    ensureKeybindingsUiStylesInjected(container.getRootNode?.() || doc);

    const baseId = normalizeKeyboardLayoutId(userLayout.baseBuiltinLayoutId || keyboardLayoutId);
    const wantNumRow = includeNumberRow === undefined ? !!keyboardShowNumberRow : !!includeNumberRow;
    const layoutSel = `user:${String(userLayout.id || '')}`;
    const slots = userLayout.slots && typeof userLayout.slots === 'object' ? userLayout.slots : {};

    let existing = null;
    try { existing = container.querySelector(':scope > .keyboard-visual'); } catch { /* ignore */ }
    if (!existing) {
      try { existing = container.querySelector('.keyboard-visual'); } catch { /* ignore */ }
    }
    if (existing && existing.dataset && existing.dataset.kpKeyboardBuilt === 'true') {
      const existingLayoutId = String(existing.dataset.kpLayoutId || '');
      const existingNum = existing.dataset.kpNumRow === '1';
      if (existingLayoutId === layoutSel && existingNum === wantNumRow) return true;
    }

    const data = getEarlyKeyboardDataForLayout(baseId);
    let layout = data.layout || KEYBINDINGS_KEYBOARD_LAYOUT;
    if (wantNumRow) {
      try { layout = addNumberRowToEarlyKeyboardLayout(layout); } catch { /* ignore */ }
    }
    const bindings = data.bindings || EARLY_KEYBINDINGS;
    const macros = keyboardLayoutStore && keyboardLayoutStore.macros && typeof keyboardLayoutStore.macros === 'object'
      ? keyboardLayoutStore.macros
      : {};

    const ensureBgIcon = (keyEl) => {
      try {
        if (keyEl.querySelector(':scope > .key-bg-icon')) return;
      } catch {
        if (keyEl.querySelector('.key-bg-icon')) return;
      }
      const icon = doc.createElement('span');
      icon.className = 'key-bg-icon';
      icon.setAttribute('aria-hidden', 'true');
      keyEl.insertBefore(icon, keyEl.firstChild);
    };

    const ensurePressOverlay = (keyEl) => {
      try {
        if (keyEl.querySelector(':scope > .key-press-overlay')) return;
      } catch {
        if (keyEl.querySelector('.key-press-overlay')) return;
      }
      const overlay = doc.createElement('span');
      overlay.className = 'key-press-overlay';
      overlay.setAttribute('aria-hidden', 'true');
      overlay.style.opacity = '0';
      overlay.style.transition = 'none';
      keyEl.appendChild(overlay);
    };

    const renderSlot = (slotLabel, assigned) => {
      const keyEl = el(doc, 'div', 'key');
      keyEl.dataset.kpBaseClass = 'key';
      keyEl.dataset.kpSlot = slotLabel;
      keyEl.setAttribute('role', 'button');
      try { keyEl.removeAttribute('title'); } catch { /* ignore */ }

      let mainText = '';
      if (assigned && assigned.type === 'function') {
        const resolved = resolveEarlyFunctionSlotPaint(assigned.id);
        if (resolved.keyboardClass) keyEl.className = `key ${resolved.keyboardClass}`;
        try { keyEl.setAttribute('data-kp-action-id', String(resolved.functionId)); } catch { /* ignore */ }
        keyEl.setAttribute('aria-label', resolved.label || slotLabel);
        mainText = resolved.label;
        ensureBgIcon(keyEl);
      } else if (assigned && assigned.type === 'macro') {
        keyEl.className = 'key key-purple';
        const macro = macros[String(assigned.id)] || null;
        const macroLabel = String((macro && macro.label) || 'Macro');
        try { keyEl.setAttribute('data-kp-macro-id', String(assigned.id)); } catch { /* ignore */ }
        keyEl.setAttribute('aria-label', macroLabel);
        mainText = macroLabel;
        ensureBgIcon(keyEl);
      } else {
        keyEl.setAttribute('aria-label', slotLabel);
      }

      const main = el(doc, 'div', 'key-main', mainText);
      keyEl.appendChild(main);
      keyEl.appendChild(el(doc, 'div', 'key-label', slotLabel));
      ensurePressOverlay(keyEl);
      return keyEl;
    };

    container.textContent = '';
    const visual = el(doc, 'div', 'keyboard-visual kp-keybindings-ui');
    visual.dataset.kpKeyboardBuilt = 'true';
    try {
      visual.dataset.kpLayoutId = layoutSel;
      visual.dataset.kpNumRow = wantNumRow ? '1' : '0';
    } catch { /* ignore */ }
    container.appendChild(visual);

    for (const row of layout) {
      const rowEl = el(doc, 'div', 'keyboard-row');
      visual.appendChild(rowEl);
      for (const item of row) {
        if (!item) continue;
        if (item.type === 'special') {
          const keyEl = el(doc, 'div', item.className || 'key');
          keyEl.appendChild(el(doc, 'span', 'key-text', item.text));
          ensurePressOverlay(keyEl);
          rowEl.appendChild(keyEl);
          continue;
        }
        if (item.type === 'action' && (item.id === 'DELETE' || String(item.className || '').includes('key-backspace'))) {
          const keyEl = el(doc, 'div', item.className || 'key key-backspace');
          keyEl.appendChild(el(doc, 'span', 'key-text', 'Backspace'));
          ensurePressOverlay(keyEl);
          rowEl.appendChild(keyEl);
          continue;
        }

        let slotLabel = '';
        if (item.type === 'key') slotLabel = String(item.text || '').trim().toUpperCase();
        else if (item.type === 'action') slotLabel = earlyPhysicalSlotLabelFromBinding(bindings[item.id]);
        if (!slotLabel) {
          const empty = el(doc, 'div', 'key');
          empty.style.visibility = 'hidden';
          rowEl.appendChild(empty);
          continue;
        }
        const assigned = slots[slotLabel] || null;
        rowEl.appendChild(renderSlot(slotLabel, assigned));
      }
    }
    return true;
  }

  function renderEarlyKeyboard(container, { layoutId, includeNumberRow } = {}) {
    if (!container) return;
    if (keyboardUsesCustomLayout) {
      const userLayout = getEarlyActiveUserLayout();
      if (!userLayout) {
        container.textContent = '';
        return;
      }
      try {
        renderEarlySlotKeyboard(container, { userLayout, includeNumberRow });
      } catch {
        container.textContent = '';
      }
      return;
    }
    const doc = container.ownerDocument || document;
    ensureKeybindingsUiStylesInjected(container.getRootNode?.() || doc);

    const desired = normalizeKeyboardLayoutId(layoutId || DEFAULT_KEYBOARD_LAYOUT_ID);
    const wantNumRow = includeNumberRow === undefined ? !!keyboardShowNumberRow : !!includeNumberRow;

    // If already rendered for the same layout + number-row mode, don't redo work.
    let existing = null;
    try { existing = container.querySelector(':scope > .keyboard-visual'); } catch { /* ignore */ }
    if (!existing) {
      try { existing = container.querySelector('.keyboard-visual'); } catch { /* ignore */ }
    }
    if (existing && existing.dataset && existing.dataset.kpKeyboardBuilt === 'true') {
      const existingLayoutId = String(existing.dataset.kpLayoutId || '');
      const existingNum = existing.dataset.kpNumRow === '1';
      if ((!existingLayoutId || existingLayoutId === desired) && existingNum === wantNumRow) return;
      // Layout or number-row mode changed: re-render so bounds stay correct on first paint.
    }

    container.textContent = '';
    const visual = el(doc, 'div', 'keyboard-visual kp-keybindings-ui');
    visual.dataset.kpKeyboardBuilt = 'true';
    try {
      visual.dataset.kpLayoutId = desired;
      visual.dataset.kpNumRow = wantNumRow ? '1' : '0';
    } catch { /* ignore */ }
    container.appendChild(visual);

    const data = getEarlyKeyboardDataForLayout(desired);
    let layout = data.layout || KEYBINDINGS_KEYBOARD_LAYOUT;
    if (wantNumRow) {
      try { layout = addNumberRowToEarlyKeyboardLayout(layout); } catch { /* ignore */ }
    }
    const bindings = data.bindings || EARLY_KEYBINDINGS;

    for (const row of layout) {
      const rowEl = el(doc, 'div', 'keyboard-row');
      visual.appendChild(rowEl);

      for (const item of row) {
        const ensureBgIcon = (keyEl) => {
          try {
            if (keyEl.querySelector(':scope > .key-bg-icon')) return;
          } catch {
            if (keyEl.querySelector('.key-bg-icon')) return;
          }
          const icon = doc.createElement('span');
          icon.className = 'key-bg-icon';
          icon.setAttribute('aria-hidden', 'true');
          keyEl.insertBefore(icon, keyEl.firstChild);
        };

        const ensurePressOverlay = (keyEl) => {
          try {
            if (keyEl.querySelector(':scope > .key-press-overlay')) return;
          } catch {
            if (keyEl.querySelector('.key-press-overlay')) return;
          }
          const overlay = doc.createElement('span');
          overlay.className = 'key-press-overlay';
          overlay.setAttribute('aria-hidden', 'true');
          // Keep the overlay hidden during the handoff to the bundled stylesheet.
          overlay.style.opacity = '0';
          overlay.style.transition = 'none';
          keyEl.appendChild(overlay);
        };

        if (item.type === 'special') {
          // No KeyPilot function → no background icon.
          const keyEl = el(doc, 'div', item.className || 'key');
          keyEl.appendChild(el(doc, 'span', 'key-text', item.text));
          ensurePressOverlay(keyEl);
          rowEl.appendChild(keyEl);
          continue;
        }
        if (item.type === 'key') {
          // Unassigned alphanumeric key → no background icon.
          const keyEl = el(doc, 'div', 'key');
          keyEl.appendChild(el(doc, 'span', 'key-text', item.text));
          ensurePressOverlay(keyEl);
          rowEl.appendChild(keyEl);
          continue;
        }

        const binding = bindings[item.id];
        const baseClass = item.className || 'key';
        const className = `${baseClass}${binding && binding.keyboardClass ? ' ' + binding.keyboardClass : ''}`;
        const keyEl = el(doc, 'div', className);
        keyEl.dataset.kpActionId = item.id;
        keyEl.dataset.kpBaseClass = baseClass;
        keyEl.setAttribute('role', 'button');
        // Prefer aria-label over title so the browser native tooltip doesn't fight our hover popover.
        try { keyEl.removeAttribute('title'); } catch { /* ignore */ }
        keyEl.setAttribute(
          'aria-label',
          (binding && (binding.description || binding.label)) || item.fallbackText || item.id
        );
        // Only keys with functions get FA background icons.
        ensureBgIcon(keyEl);

        const main = el(doc, 'div', 'key-main', (binding && binding.label) || item.fallbackText || item.id);
        keyEl.appendChild(main);

        const labelText = (binding && (binding.displayKey || binding.keyLabel)) || '';
        if (labelText) {
          keyEl.appendChild(el(doc, 'div', 'key-label', labelText));
        }

        ensurePressOverlay(keyEl);
        rowEl.appendChild(keyEl);
      }
    }
  }

  /**
   * Generate SVG data URI for cursor
   */
  function getCursorDataUri(options = {}) {
    // Extract parameters with defaults
    const {
      crossHairQuadrantWidth = 15,
      gap = 0,
      strokeLineCap = 'round',
      strokeWidth = 4,
      crossHairScalingFactor = 1
    } = options;

    // Apply scaling factor
    const scaledGap = gap * crossHairScalingFactor;
    const scaledWidth = crossHairQuadrantWidth * crossHairScalingFactor;

    // Calculate segment positions (center is now at 30,30 for 60x60 canvas)
    const centerX = 30;
    const centerY = 30;
    
    let segmentStart, segmentEnd, segmentStart2, segmentEnd2;
    
    if (scaledGap === 0) {
      // Intersecting lines: bars extend from center outward
      segmentStart = centerY - scaledWidth;
      segmentEnd = centerY;
      segmentStart2 = centerY;
      segmentEnd2 = centerY + scaledWidth;
    } else {
      // Four separate bars: each bar is `gap` pixels away from center
      segmentStart = centerY - scaledGap - scaledWidth;
      segmentEnd = centerY - scaledGap;
      segmentStart2 = centerY + scaledGap;
      segmentEnd2 = centerY + scaledGap + scaledWidth;
    }

    const color = FOCUS_GREEN_BRIGHT;
    const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
      <line x1="30" y1="${segmentStart}" x2="30" y2="${segmentEnd}" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="${strokeLineCap}"/>
      <line x1="30" y1="${segmentStart2}" x2="30" y2="${segmentEnd2}" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="${strokeLineCap}"/>
      <line x1="${segmentStart}" y1="30" x2="${segmentEnd}" y2="30" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="${strokeLineCap}"/>
      <line x1="${segmentStart2}" y1="30" x2="${segmentEnd2}" y2="30" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="${strokeLineCap}"/>
    </svg>`;
    const encoded = encodeURIComponent(svgContent);
    return `data:image/svg+xml,${encoded}`;
  }

  /**
   * Get cursor settings from storage
   */
  async function getCursorSettings() {
    const defaultSettings = {
      cursorMode: CURSOR_MODE.NO_CUSTOM_CURSORS,
      type: 'crosshair',
      lineWidth: 4,
      sizePixels: 10,
      gap: 6
    };

    try {
      // Try sync storage first
      const syncResult = await chrome.storage.sync.get([SETTINGS_STORAGE_KEY]);
      const stored = syncResult?.[SETTINGS_STORAGE_KEY];
      
      if (stored && typeof stored === 'object') {
        const cursorMode = stored.cursorMode === CURSOR_MODE.CUSTOM_CURSORS || stored.cursorMode === CURSOR_MODE.NO_CUSTOM_CURSORS
          ? stored.cursorMode
          : defaultSettings.cursorMode;

        const cursor = (stored.clickMode && stored.clickMode.cursor && typeof stored.clickMode.cursor === 'object')
          ? stored.clickMode.cursor
          : {};
        // Check if gap is missing or if it's the old default (0) with old sizePixels default (15)
        // This handles fresh installs and migration from old defaults
        const hasOldDefaults = cursor.gap === 0 && cursor.sizePixels === 15;
        const gapValue = (typeof cursor.gap === 'number' && cursor.gap !== null && !hasOldDefaults) 
          ? cursor.gap 
          : defaultSettings.gap;
        const sizePixelsValue = (typeof cursor.sizePixels === 'number' && cursor.sizePixels !== null && !hasOldDefaults)
          ? cursor.sizePixels
          : defaultSettings.sizePixels;
        
        return {
          cursorMode,
          type: cursor.type || defaultSettings.type,
          lineWidth: typeof cursor.lineWidth === 'number' ? cursor.lineWidth : defaultSettings.lineWidth,
          sizePixels: sizePixelsValue,
          gap: gapValue
        };
      }
    } catch (syncError) {
      // Fallback to local storage
      try {
        const localResult = await chrome.storage.local.get([SETTINGS_STORAGE_KEY]);
        const stored = localResult?.[SETTINGS_STORAGE_KEY];
        
        if (stored && typeof stored === 'object') {
          const cursorMode = stored.cursorMode === CURSOR_MODE.CUSTOM_CURSORS || stored.cursorMode === CURSOR_MODE.NO_CUSTOM_CURSORS
            ? stored.cursorMode
            : defaultSettings.cursorMode;

          const cursor = (stored.clickMode && stored.clickMode.cursor && typeof stored.clickMode.cursor === 'object')
            ? stored.clickMode.cursor
            : {};
          // Check if gap is missing or if it's the old default (0) with old sizePixels default (15)
          // This handles fresh installs and migration from old defaults
          const hasOldDefaults = cursor.gap === 0 && cursor.sizePixels === 15;
          const gapValue = (typeof cursor.gap === 'number' && cursor.gap !== null && !hasOldDefaults) 
            ? cursor.gap 
            : defaultSettings.gap;
          const sizePixelsValue = (typeof cursor.sizePixels === 'number' && cursor.sizePixels !== null && !hasOldDefaults)
            ? cursor.sizePixels
            : defaultSettings.sizePixels;
          
          return {
            cursorMode,
            type: cursor.type || defaultSettings.type,
            lineWidth: typeof cursor.lineWidth === 'number' ? cursor.lineWidth : defaultSettings.lineWidth,
            sizePixels: sizePixelsValue,
            gap: gapValue
          };
        }
      } catch (localError) {
        // Ignore
      }
    }
    
    return defaultSettings;
  }

  /**
   * Apply CSS cursor for early injection
   */
  async function applyEarlyCursor() {
    // Only apply once to prevent flickering (unless settings changed)
    if (cursorApplied && !cursorSettingsChanged) {
      return;
    }

    const settings = await getCursorSettings();
    cursorSettingsChanged = false;

    // Cursor mode disabled: do not override the page cursor at all.
    if (settings.cursorMode !== CURSOR_MODE.CUSTOM_CURSORS) {
      try {
        if (document.documentElement) {
          document.documentElement.classList.remove(CURSOR_HIDDEN_CLASS);
          document.documentElement.style.removeProperty(CURSOR_VAR);
          document.documentElement.style.cursor = '';
        }
        if (document.body) {
          document.body.style.cursor = '';
        }
      } catch {}
      cursorApplied = true;
      return;
    }

    // Handle native cursor types
    if (settings.type === 'native_arrow') {
      try {
        if (document.documentElement) {
          document.documentElement.style.setProperty(CURSOR_VAR, 'default');
          document.documentElement.classList.add(CURSOR_HIDDEN_CLASS);
        }
      } catch {}
      cursorApplied = true;
      return;
    }

    if (settings.type === 'native_pointer') {
      try {
        if (document.documentElement) {
          document.documentElement.style.setProperty(CURSOR_VAR, 'pointer');
          document.documentElement.classList.add(CURSOR_HIDDEN_CLASS);
        }
      } catch {}
      cursorApplied = true;
      return;
    }

    // Use settings to generate cursor
    const cursorUri = getCursorDataUri({
      crossHairQuadrantWidth: settings.sizePixels,
      gap: settings.gap,
      strokeWidth: settings.lineWidth,
      crossHairScalingFactor: 1
    });
    const cursorValue = `url("${cursorUri}") 30 30, auto`;

    // Mirror main extension behavior: set the CSS variable + class.
    // This makes the cursor apply across all elements via the injected CSS above.
    try {
      if (document.documentElement) {
        document.documentElement.style.setProperty(CURSOR_VAR, cursorValue);
        document.documentElement.classList.add(CURSOR_HIDDEN_CLASS);
      }
    } catch {}

    cursorApplied = true;
  }

  /**
   * Update cursor position (not needed for CSS cursor, but kept for compatibility)
   */
  function updateCursorPosition(x, y) {
    mousePosition = { x, y };
  }

  /**
   * Show/hide cursor based on extension state
   */
  async function updateCursorVisibility() {
    // If main extension has loaded, it's in charge of the cursor
    if (isMainExtensionLoaded) {
      return;
    }

    if (isExtensionEnabled) {
      await applyEarlyCursor();
    } else {
      // Reset cursor applied flag when disabling
      cursorApplied = false;
      try { hideEarlyHover(); } catch { /* ignore */ }
      try {
        if (document.documentElement) {
          document.documentElement.classList.remove(CURSOR_HIDDEN_CLASS);
          document.documentElement.style.removeProperty(CURSOR_VAR);
          document.documentElement.style.cursor = 'default';
        }
        if (document.body) {
          document.body.style.cursor = 'default';
        }
      } catch {}
    }
  }

  /**
   * Merge keyboardReferenceCollapsed into kp_settings_v1 (sync + local mirror).
   * @param {boolean} collapsed
   */
  function persistEarlyKeyboardReferenceCollapsed(collapsed) {
    try { cacheEarlyChromeLayout({ keyboardReferenceCollapsed: !!collapsed }); } catch { /* ignore */ }
    try {
      if (!chrome?.storage) return;
      const nextCollapsed = !!collapsed;
      const apply = (area) => {
        area.get([SETTINGS_STORAGE_KEY], (result) => {
          try {
            if (chrome.runtime?.lastError) return;
            const prev = result && result[SETTINGS_STORAGE_KEY] && typeof result[SETTINGS_STORAGE_KEY] === 'object'
              ? result[SETTINGS_STORAGE_KEY]
              : {};
            if (!!prev.keyboardReferenceCollapsed === nextCollapsed) return;
            const next = {
              ...prev,
              keyboardReferenceCollapsed: nextCollapsed
            };
            area.set({ [SETTINGS_STORAGE_KEY]: next }, () => {
              try { void chrome.runtime?.lastError; } catch { /* ignore */ }
            });
          } catch { /* ignore */ }
        });
      };
      apply(chrome.storage.sync);
      try { apply(chrome.storage.local); } catch { /* ignore */ }
    } catch { /* ignore */ }
  }

  /**
   * Apply titlebar-only vs full keyboard on the early shell (no persist).
   * @param {boolean} collapsed
   */
  function applyEarlyKeyboardReferenceCollapsed(collapsed) {
    keyboardReferenceCollapsed = !!collapsed;
    const root = keyboardHelpRoot;
    if (!root || !root.isConnected) return;
    const shell = keyboardHelpShadowRoot || root;
    const body =
      shell.querySelector('[data-kp-floating-keyboard-body="true"]') ||
      shell.querySelector('.kp-floating-keyboard-help__keyboard')?.parentElement ||
      null;
    const collapseBtn = shell.querySelector('button[data-kp-floating-keyboard-collapse="true"]');
    try {
      root.setAttribute('data-kp-collapsed', keyboardReferenceCollapsed ? 'true' : 'false');
    } catch { /* ignore */ }
    try {
      if (body) body.style.display = keyboardReferenceCollapsed ? 'none' : 'block';
    } catch { /* ignore */ }
    try {
      if (collapseBtn) {
        collapseBtn.textContent = keyboardReferenceCollapsed ? '▸' : '▾';
        collapseBtn.setAttribute(
          'aria-label',
          keyboardReferenceCollapsed ? 'Expand keyboard reference' : 'Collapse keyboard reference'
        );
        collapseBtn.title = keyboardReferenceCollapsed ? 'Expand' : 'Collapse';
      }
    } catch { /* ignore */ }
  }

  /**
   * Merge a partial controlStrip object into kp_settings_v1 (sync, then local fallback).
   * @param {{ visible?: boolean, collapsed?: boolean }} partial
   */
  function persistEarlyControlStripSettings(partial) {
    try {
      cacheEarlyChromeLayout({
        controlStrip: {
          ...(typeof partial.visible === 'boolean' ? { visible: partial.visible } : {}),
          ...(typeof partial.collapsed === 'boolean' ? { collapsed: partial.collapsed } : {})
        }
      });
    } catch { /* ignore */ }
    try {
      if (!chrome?.storage) return;
      const apply = (area) => {
        area.get([SETTINGS_STORAGE_KEY], (result) => {
          try {
            if (chrome.runtime?.lastError) return;
            const prev = result && result[SETTINGS_STORAGE_KEY] && typeof result[SETTINGS_STORAGE_KEY] === 'object'
              ? result[SETTINGS_STORAGE_KEY]
              : {};
            const prevCs = prev.controlStrip && typeof prev.controlStrip === 'object' ? prev.controlStrip : {};
            const next = {
              ...prev,
              controlStrip: {
                visible: typeof partial.visible === 'boolean' ? partial.visible : (prevCs.visible !== false),
                collapsed: typeof partial.collapsed === 'boolean' ? partial.collapsed : !!prevCs.collapsed
              }
            };
            area.set({ [SETTINGS_STORAGE_KEY]: next }, () => {
              try { void chrome.runtime?.lastError; } catch { /* ignore */ }
            });
          } catch { /* ignore */ }
        });
      };
      apply(chrome.storage.sync);
      // Also write local as a best-effort mirror (SettingsManager reads sync first).
      try { apply(chrome.storage.local); } catch { /* ignore */ }
    } catch { /* ignore */ }
  }

  function parseControlStripFromSettings(settingsObj) {
    const cs = settingsObj && typeof settingsObj === 'object' && settingsObj.controlStrip
      && typeof settingsObj.controlStrip === 'object'
      ? settingsObj.controlStrip
      : null;
    return {
      // Defaults match SettingsManager DEFAULT_SETTINGS.controlStrip
      visible: cs ? cs.visible !== false : true,
      collapsed: cs ? !!cs.collapsed : true
    };
  }

  /**
   * Same <img> glyphs ControlStrip injects after handoff (keyboard + gear).
   * Prefer stamped EARLY_CONTROL_STRIP_ICON_URIS; fall back to the canonical FA paths.
   */
  const EARLY_STRIP_ICON_PATHS = {
    TOGGLE_KEYBOARD_HELP: {
      viewBox: '0 0 512 512',
      d: 'M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm128 64v32h32V160H128zm64 0v32h32V160H192zm64 0v32h32V160H256zm64 0v32h32V160H320zm64 0v32h32V160H384zM96 256v32h64V256H96zm96 0v32h32V256H192zm64 0v32h32V256H256zm64 0v32h32V256H320zm64 0v32h32V256H384zm64 0v32h32V256H448zM128 352v32H384V352H128z'
    },
    OPEN_SETTINGS_POPOVER: {
      viewBox: '0 0 16 16',
      d: 'M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.275.819l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.82 2.275l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .82 2.275l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.275.82l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.275-.82l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .82-2.275l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.82-2.275l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.275-.82zM8 10.93a2.93 2.93 0 1 1 0-5.86 2.93 2.93 0 0 1 0 5.86z'
    }
  };

  function earlyControlStripIconSrc(actionId) {
    try {
      const uris = (typeof EARLY_CONTROL_STRIP_ICON_URIS === 'object' && EARLY_CONTROL_STRIP_ICON_URIS)
        ? EARLY_CONTROL_STRIP_ICON_URIS
        : null;
      const cssUri = uris && actionId ? uris[actionId] : '';
      if (cssUri) {
        const match = String(cssUri).match(/^url\("(.+)"\)$/);
        if (match && match[1]) return match[1];
      }
    } catch { /* ignore */ }
    const spec = EARLY_STRIP_ICON_PATHS[actionId];
    if (!spec) return null;
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${spec.viewBox}" fill="#ddd"><path d="${spec.d}"/></svg>`;
    return `data:image/svg+xml,${encodeURIComponent(svg)}`;
  }

  function createEarlyControlStripActionIcon(actionId) {
    try {
      const src = earlyControlStripIconSrc(actionId);
      if (!src) return null;
      const img = document.createElement('img');
      img.src = src;
      img.alt = '';
      img.setAttribute('aria-hidden', 'true');
      img.setAttribute('data-kp-control-strip-icon', 'true');
      Object.assign(img.style, {
        width: '14px',
        height: '14px',
        display: 'block',
        pointerEvents: 'none',
        flex: '0 0 auto',
        opacity: '0.95'
      });
      return img;
    } catch {
      return null;
    }
  }

  function ensureEarlyControlStripSegmentIcon(btn, actionId) {
    if (!btn || !actionId) return;
    try {
      if (btn.querySelector('img[data-kp-control-strip-icon="true"]')) return;
      const icon = createEarlyControlStripActionIcon(actionId);
      if (!icon) return;
      btn.insertBefore(icon, btn.firstChild);
    } catch { /* ignore */ }
  }

  function createEarlyControlStripSegmentButton(opts) {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.setAttribute('aria-label', opts.ariaLabel || '');
    if (opts.title) btn.title = opts.title;
    if (opts.iconActionId) {
      const icon = createEarlyControlStripActionIcon(opts.iconActionId);
      if (icon) btn.appendChild(icon);
    }
    if (opts.text) {
      const label = document.createElement('span');
      label.textContent = opts.text;
      Object.assign(label.style, {
        pointerEvents: 'none',
        lineHeight: '1'
      });
      btn.appendChild(label);
    }
    Object.assign(btn.style, {
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      gap: '4px',
      height: '100%',
      minHeight: `${CONTROL_STRIP_HEIGHT_PX - 2}px`,
      margin: '0',
      padding: opts.compact ? '0 8px' : '0 10px',
      border: 'none',
      borderRight: opts.last ? 'none' : '1px solid rgba(255,255,255,0.08)',
      borderRadius: '0',
      background: 'transparent',
      color: 'rgba(220, 220, 225, 0.92)',
      fontSize: '11px',
      fontWeight: '600',
      letterSpacing: '0.01em',
      lineHeight: '1',
      cursor: 'pointer',
      flex: '0 0 auto',
      boxShadow: 'none',
      outline: 'none',
      whiteSpace: 'nowrap'
    });
    btn.addEventListener('mouseenter', () => {
      try {
        if (isMainExtensionLoaded) return;
        if (btn === controlStripRefs?.keyboardBtn && keyboardHelpVisible) {
          btn.style.background = 'rgba(59, 130, 246, 0.18)';
        } else {
          btn.style.background = 'rgba(255,255,255,0.06)';
        }
      } catch { /* ignore */ }
    });
    btn.addEventListener('mouseleave', () => {
      try {
        if (isMainExtensionLoaded) return;
        if (btn === controlStripRefs?.keyboardBtn && keyboardHelpVisible) {
          btn.style.background = 'rgba(59, 130, 246, 0.18)';
        } else {
          btn.style.background = 'transparent';
        }
      } catch { /* ignore */ }
    });
    return btn;
  }

  function renderEarlyControlStripStatus() {
    const refs = controlStripRefs;
    if (!refs || !refs.statusLabel || !refs.statusDot) return;
    const on = !!isExtensionEnabled;
    try {
      refs.statusLabel.textContent = on ? 'ON' : 'OFF';
      refs.statusDot.style.background = on
        ? 'rgba(16, 185, 129, 0.95)'
        : 'rgba(148, 163, 184, 0.85)';
      refs.statusDot.style.boxShadow = on
        ? '0 0 0 2px rgba(16, 185, 129, 0.2)'
        : '0 0 0 2px rgba(148, 163, 184, 0.15)';
      refs.statusLabel.style.color = on
        ? 'rgba(167, 243, 208, 0.95)'
        : 'rgba(148, 163, 184, 0.95)';
      if (refs.statusBtn) {
        refs.statusBtn.setAttribute('aria-pressed', on ? 'true' : 'false');
        refs.statusBtn.title = on
          ? 'KeyPilot is on — click to turn off (Alt+K)'
          : 'KeyPilot is off — click to turn on (Alt+K)';
      }
    } catch { /* ignore */ }
  }

  function renderEarlyControlStripKeyboard() {
    const btn = controlStripRefs?.keyboardBtn;
    if (!btn) return;
    const active = !!keyboardHelpVisible && !!isExtensionEnabled;
    try {
      btn.setAttribute('aria-pressed', active ? 'true' : 'false');
      btn.style.background = active ? 'rgba(59, 130, 246, 0.18)' : 'transparent';
      btn.style.color = active
        ? 'rgba(191, 219, 254, 0.98)'
        : 'rgba(220, 220, 225, 0.92)';
      btn.title = active ? 'Hide keyboard reference' : 'Show keyboard reference';
    } catch { /* ignore */ }
  }

  function applyEarlyControlStripCollapsedLayout() {
    const refs = controlStripRefs;
    if (!controlStripRoot || !refs) return;
    const collapsed = !!controlStripCollapsed;
    try {
      if (refs.modules) refs.modules.style.display = collapsed ? 'none' : 'flex';
      if (refs.closeBtn) refs.closeBtn.style.display = collapsed ? 'none' : 'inline-flex';
      if (refs.collapseBtn) {
        refs.collapseBtn.textContent = collapsed ? '▶' : '◀';
        refs.collapseBtn.setAttribute(
          'aria-label',
          collapsed ? 'Expand control strip' : 'Collapse control strip'
        );
        refs.collapseBtn.title = collapsed ? 'Expand' : 'Collapse';
        refs.collapseBtn.style.borderRight = collapsed
          ? 'none'
          : '1px solid rgba(255,255,255,0.08)';
      }
      controlStripRoot.setAttribute('data-kp-collapsed', collapsed ? 'true' : 'false');
    } catch { /* ignore */ }
  }

  function syncEarlyControlStripOnboardingOffset() {
    // Walkthrough sits relative to the strip; do not force strip back to top-left
    // (user position is restored from settings when available).
    if (!controlStripRoot || !controlStripRoot.isConnected) return;
    try {
      const panel = document.querySelector('.kp-onboarding-panel');
      if (!panel || !panel.isConnected) return;
      const hidden = panel.hidden === true
        || panel.getAttribute('hidden') !== null
        || panel.style.display === 'none'
        || (window.getComputedStyle
          && (window.getComputedStyle(panel).display === 'none'
            || window.getComputedStyle(panel).visibility === 'hidden'));
      if (hidden) return;
      if (typeof positionOnboardingBelowControlStrip === 'function') {
        positionOnboardingBelowControlStrip(panel);
        return;
      }
      // Fallback before shared helpers are stamped/available.
      const rect = controlStripRoot.getBoundingClientRect();
      const top = Math.max(
        CONTROL_STRIP_DEFAULT_TOP_PX,
        Math.round((rect && rect.bottom ? rect.bottom : (CONTROL_STRIP_DEFAULT_TOP_PX + CONTROL_STRIP_HEIGHT_PX))
          + CONTROL_STRIP_ONBOARDING_GAP_PX)
      );
      panel.style.top = `${top}px`;
    } catch { /* ignore */ }
  }

  /**
   * Lightweight dock helpers (mirrors utils/panel-position.js for document_start).
   * Full drag/snap lives in the bundled content script.
   */
  const EARLY_PANEL_MARGIN_PX = 16;
  // Titlebar-only Keyboard Reference is ~28–30px tall. Do not treat that as
  // "unlaid out" or bottom-left docks against the expanded fallback height.
  const EARLY_PANEL_MIN_LAID_OUT_PX = 8;
  const EARLY_STRIP_MARGIN_PX = 16;

  function earlyViewportSize() {
    try {
      const de = document.documentElement;
      // client* can be 0 at document_start — prefer the larger of client/inner.
      return {
        width: Math.max(0, de?.clientWidth || 0, window.innerWidth || 0),
        height: Math.max(0, de?.clientHeight || 0, window.innerHeight || 0)
      };
    } catch {
      return {
        width: Math.max(0, window.innerWidth || 0),
        height: Math.max(0, window.innerHeight || 0)
      };
    }
  }

  function earlyReapplyKeyboardPosition() {
    if (isMainExtensionLoaded) return;
    if (!keyboardHelpRoot || !keyboardHelpRoot.isConnected) return;
    try {
      earlyApplyPanelPosition(keyboardHelpRoot, earlyPanelPositions && earlyPanelPositions.keyboardReference, {
        margin: EARLY_PANEL_MARGIN_PX,
        defaultAnchor: 'bottom-left',
        defaultWidth: 760,
        defaultHeight: 200
      });
    } catch { /* ignore */ }
  }

  // Reclamp after first layout / resize so early positions aren't stuck at vh=0 defaults.
  try {
    window.addEventListener('resize', earlyReapplyKeyboardPosition, true);
    window.addEventListener('load', earlyReapplyKeyboardPosition, true);
  } catch { /* ignore */ }

  function earlyClampPanelPosition(left, top, width, height, margin) {
    const m = Math.max(0, Number(margin) || 0);
    const vp = earlyViewportSize();
    const vw = vp.width;
    const vh = vp.height;
    const w = Math.max(0, Number(width) || 0);
    const h = Math.max(0, Number(height) || 0);
    const maxLeft = Math.max(m, vw - w - m);
    const maxTop = Math.max(m, vh - h - m);
    return {
      left: Math.max(m, Math.min(Number(left) || m, maxLeft)),
      top: Math.max(m, Math.min(Number(top) || m, maxTop))
    };
  }

  function earlyPositionForAnchor(anchor, width, height, margin) {
    const m = Math.max(0, Number(margin) || 0);
    const vp = earlyViewportSize();
    const vw = vp.width;
    const vh = vp.height;
    const w = Math.max(0, Number(width) || 0);
    const h = Math.max(0, Number(height) || 0);
    const leftMin = m;
    const topMin = m;
    const leftMax = Math.max(m, vw - w - m);
    const topMax = Math.max(m, vh - h - m);
    const leftCenter = Math.round((vw - w) / 2);
    const topCenter = Math.round((vh - h) / 2);
    let left = leftMin;
    let top = topMin;
    switch (String(anchor || '')) {
      case 'top-left': left = leftMin; top = topMin; break;
      case 'top-center': left = leftCenter; top = topMin; break;
      case 'top-right': left = leftMax; top = topMin; break;
      case 'middle-left': left = leftMin; top = topCenter; break;
      case 'middle-right': left = leftMax; top = topCenter; break;
      case 'bottom-left': left = leftMin; top = topMax; break;
      case 'bottom-center': left = leftCenter; top = topMax; break;
      case 'bottom-right': left = leftMax; top = topMax; break;
      default: left = leftMin; top = topMin; break;
    }
    return earlyClampPanelPosition(left, top, w, h, m);
  }

  /**
   * @param {HTMLElement|null} el
   * @param {{ left?: number, top?: number, anchor?: string|null }|null|undefined} stored
   * @param {{ margin?: number, defaultAnchor?: string, defaultWidth?: number, defaultHeight?: number }} opts
   */
  function earlyApplyPanelPosition(el, stored, opts) {
    if (!el || !el.style) return;
    const margin = opts && Number.isFinite(opts.margin) ? opts.margin : EARLY_PANEL_MARGIN_PX;
    const defaultAnchor = (opts && opts.defaultAnchor) || 'top-left';
    const rect = el.getBoundingClientRect();
    // Never clamp with 0 height — that docks free tops at vh−margin; content then grows off-screen.
    // Collapsed Keyboard Reference is ~28–30px: that is a real laid-out size, not a fallback case.
    let width = (rect && rect.width) || (opts && opts.defaultWidth) || 0;
    let height = (rect && rect.height) || (opts && opts.defaultHeight) || 0;
    if (width < EARLY_PANEL_MIN_LAID_OUT_PX) width = (opts && opts.defaultWidth) || 760;
    if (height < EARLY_PANEL_MIN_LAID_OUT_PX) height = (opts && opts.defaultHeight) || 200;
    const state = stored && typeof stored === 'object' ? stored : null;
    let next;
    if (state && typeof state.anchor === 'string' && state.anchor) {
      next = earlyPositionForAnchor(state.anchor, width, height, margin);
    } else if (state && Number.isFinite(Number(state.left)) && Number.isFinite(Number(state.top))) {
      next = earlyClampPanelPosition(Number(state.left), Number(state.top), width, height, margin);
    } else {
      next = earlyPositionForAnchor(defaultAnchor, width, height, margin);
    }
    try {
      el.style.position = 'fixed';
      el.style.right = 'auto';
      el.style.bottom = 'auto';
      el.style.left = `${Math.round(next.left)}px`;
      el.style.top = `${Math.round(next.top)}px`;
      el.style.margin = '0';
    } catch { /* ignore */ }

    // Remeasure after paint-sized content and reclamp (keyboard often sizes after shell create).
    try {
      const live = el.getBoundingClientRect();
      const lw = live.width || width;
      const lh = live.height || height;
      if (lw >= EARLY_PANEL_MIN_LAID_OUT_PX && lh >= EARLY_PANEL_MIN_LAID_OUT_PX) {
        let next2;
        if (state && typeof state.anchor === 'string' && state.anchor) {
          next2 = earlyPositionForAnchor(state.anchor, lw, lh, margin);
        } else if (state && Number.isFinite(Number(state.left)) && Number.isFinite(Number(state.top))) {
          next2 = earlyClampPanelPosition(Number(state.left), Number(state.top), lw, lh, margin);
        } else {
          next2 = earlyPositionForAnchor(defaultAnchor, lw, lh, margin);
        }
        // Also pin if painted box still spills the viewport.
        const spills =
          live.bottom > earlyViewportSize().height - margin + 1 ||
          live.top < margin - 1 ||
          live.right > earlyViewportSize().width - margin + 1 ||
          live.left < margin - 1;
        if (spills) {
          next2 = earlyClampPanelPosition(live.left, live.top, lw, lh, margin);
        } else if (
          Math.abs(next2.left - next.left) > 0.5 ||
          Math.abs(next2.top - next.top) > 0.5
        ) {
          // use next2
        } else {
          next2 = next;
        }
        el.style.left = `${Math.round(next2.left)}px`;
        el.style.top = `${Math.round(next2.top)}px`;
      }
    } catch { /* ignore */ }
  }

  /** Cached panelPositions from kp_settings_v1 (best-effort at document_start). */
  let earlyPanelPositions = null;
  try {
    const cachedLayout = peekCachedChromeLayout();
    if (cachedLayout) {
      if (cachedLayout.panelPositions && typeof cachedLayout.panelPositions === 'object') {
        earlyPanelPositions = {
          keyboardReference: cachedLayout.panelPositions.keyboardReference || null,
          controlStrip: cachedLayout.panelPositions.controlStrip || null
        };
      }
      if (typeof cachedLayout.keyboardHelpVisible === 'boolean') {
        keyboardHelpVisible = cachedLayout.keyboardHelpVisible;
      }
      if (typeof cachedLayout.keyboardReferenceCollapsed === 'boolean') {
        keyboardReferenceCollapsed = cachedLayout.keyboardReferenceCollapsed;
      }
      if (cachedLayout.controlStrip && typeof cachedLayout.controlStrip === 'object') {
        if (typeof cachedLayout.controlStrip.visible === 'boolean') {
          controlStripDesiredVisible = cachedLayout.controlStrip.visible;
        }
        if (typeof cachedLayout.controlStrip.collapsed === 'boolean') {
          controlStripCollapsed = cachedLayout.controlStrip.collapsed;
        }
      }
    }
  } catch { /* ignore */ }

  function readEarlyPanelPositionsFromSettingsObj(settingsObj) {
    try {
      const pp = settingsObj && typeof settingsObj === 'object' && settingsObj.panelPositions
        && typeof settingsObj.panelPositions === 'object'
        ? settingsObj.panelPositions
        : null;
      if (!pp) return null;
      return {
        keyboardReference: pp.keyboardReference && typeof pp.keyboardReference === 'object'
          ? pp.keyboardReference
          : null,
        controlStrip: pp.controlStrip && typeof pp.controlStrip === 'object'
          ? pp.controlStrip
          : null
      };
    } catch {
      return null;
    }
  }

  /**
   * Ensure the control strip shell exists early (document_start).
   * The bundled ControlStrip will adopt this element later to avoid flicker.
   */
  function ensureEarlyControlStripShell() {
    try {
      if (window !== window.top) return null;
      if (isMainExtensionLoaded) return controlStripRoot;
      if (controlStripRoot && controlStripRoot.isConnected) return controlStripRoot;

      const existing = document.querySelector('.kp-control-strip[data-kp-early-control-strip="true"]');
      if (existing && existing.isConnected) {
        controlStripRoot = existing;
        controlStripShadowRoot = ensureEarlyOpenChromeShadow(existing, 'control-strip');
        const shell = controlStripShadowRoot || existing;
        const modulesEl = shell.querySelector('[data-kp-control-strip-modules="true"]');
        let moveBtn = shell.querySelector('[data-kp-control-strip-move="true"]');
        // Older early shells (or a race before this segment existed) may lack move.
        if (modulesEl && !moveBtn) {
          try {
            moveBtn = createEarlyControlStripSegmentButton({
              ariaLabel: 'Move control strip',
              title: 'Drag to move',
              text: '⠿',
              compact: true
            });
            moveBtn.setAttribute('data-kp-control-strip-move', 'true');
            try {
              moveBtn.style.cursor = 'grab';
              moveBtn.style.touchAction = 'none';
              moveBtn.style.letterSpacing = '0';
              moveBtn.style.fontSize = '12px';
              moveBtn.style.opacity = '0.85';
            } catch { /* ignore */ }
            moveBtn.addEventListener('click', (e) => {
              try { e.preventDefault(); e.stopPropagation(); } catch { /* ignore */ }
            });
            modulesEl.insertBefore(moveBtn, modulesEl.firstChild);
          } catch { /* ignore */ }
        }
        controlStripRefs = {
          statusBtn: shell.querySelector('[data-kp-control-strip-status="true"]'),
          statusDot: shell.querySelector('[data-kp-control-strip-status-dot="true"]'),
          statusLabel: shell.querySelector('[data-kp-control-strip-status-label="true"]'),
          modules: modulesEl,
          moveBtn: shell.querySelector('[data-kp-control-strip-move="true"]'),
          keyboardBtn: shell.querySelector('[data-kp-control-strip-keyboard="true"]'),
          settingsBtn: shell.querySelector('[data-kp-control-strip-settings="true"]'),
          collapseBtn: shell.querySelector('[data-kp-control-strip-collapse="true"]'),
          closeBtn: shell.querySelector('[data-kp-control-strip-close="true"]')
        };
        try { ensureEarlyControlStripSegmentIcon(controlStripRefs.keyboardBtn, 'TOGGLE_KEYBOARD_HELP'); } catch { /* ignore */ }
        try { ensureEarlyControlStripSegmentIcon(controlStripRefs.settingsBtn, 'OPEN_SETTINGS_POPOVER'); } catch { /* ignore */ }
        return controlStripRoot;
      }

      const root = document.createElement('div');
      root.className = 'kp-control-strip';
      root.hidden = true;
      root.setAttribute('role', 'toolbar');
      root.setAttribute('aria-label', 'KeyPilot control strip');
      root.setAttribute('data-kp-control-strip', 'true');
      root.setAttribute('data-kp-early-control-strip', 'true');
      root.dataset.kpEarlyControlStrip = 'true';
      // Compact by default (matches SettingsManager) so first paint is not expanded.
      root.setAttribute('data-kp-collapsed', 'true');
      const shell = ensureEarlyOpenChromeShadow(root, 'control-strip') || root;

      Object.assign(root.style, {
        position: 'fixed',
        left: `${CONTROL_STRIP_DEFAULT_LEFT_PX}px`,
        top: `${CONTROL_STRIP_DEFAULT_TOP_PX}px`,
        height: `${CONTROL_STRIP_HEIGHT_PX}px`,
        minHeight: `${CONTROL_STRIP_HEIGHT_PX}px`,
        maxHeight: `${CONTROL_STRIP_HEIGHT_PX}px`,
        // Stay fully hidden until applyEarlyControlStripVisibility decides.
        display: 'none',
        flexDirection: 'row',
        alignItems: 'stretch',
        zIndex: String(Z_CONTROL_STRIP),
        // Theme tokens — never hardcode Dark Pro so gx-er (etc.) can paint first frame.
        background: 'var(--kp-titlebar-bg)',
        color: 'var(--kp-color-fg, #ddd)',
        border: 'var(--kp-panel-border, 1px solid #111)',
        borderRadius: 'var(--kp-radius-panel, 3px)',
        boxShadow: 'var(--kp-panel-shadow)',
        fontFamily: 'var(--kp-font-ui, Helvetica, Arial, sans-serif)',
        pointerEvents: 'none',
        overflow: 'hidden',
        boxSizing: 'border-box',
        userSelect: 'none',
        WebkitUserSelect: 'none'
      });
      try { applyPopupThemeVars(root); } catch { /* ignore */ }
      try {
        earlyApplyPanelPosition(root, earlyPanelPositions && earlyPanelPositions.controlStrip, {
          margin: EARLY_STRIP_MARGIN_PX,
          defaultAnchor: 'top-left',
          defaultHeight: CONTROL_STRIP_HEIGHT_PX
        });
      } catch { /* ignore */ }

      const statusBtn = createEarlyControlStripSegmentButton({
        ariaLabel: 'Toggle KeyPilot on or off',
        title: 'Toggle KeyPilot (Alt+K)'
      });
      statusBtn.setAttribute('data-kp-control-strip-status', 'true');

      const statusInner = document.createElement('span');
      Object.assign(statusInner.style, {
        display: 'inline-flex',
        alignItems: 'center',
        gap: '6px',
        pointerEvents: 'none'
      });

      const statusDot = document.createElement('span');
      Object.assign(statusDot.style, {
        width: '7px',
        height: '7px',
        borderRadius: '50%',
        flex: '0 0 auto',
        background: 'rgba(16, 185, 129, 0.95)',
        boxShadow: '0 0 0 2px rgba(16, 185, 129, 0.2)'
      });
      statusDot.setAttribute('aria-hidden', 'true');
      statusDot.setAttribute('data-kp-control-strip-status-dot', 'true');

      const statusLabel = document.createElement('span');
      statusLabel.textContent = 'ON';
      statusLabel.setAttribute('data-kp-control-strip-status-label', 'true');
      Object.assign(statusLabel.style, {
        fontSize: '11px',
        fontWeight: '700',
        letterSpacing: '0.06em',
        lineHeight: '1'
      });

      statusInner.appendChild(statusDot);
      statusInner.appendChild(statusLabel);
      statusBtn.appendChild(statusInner);

      const modules = document.createElement('div');
      modules.setAttribute('data-kp-control-strip-modules', 'true');
      Object.assign(modules.style, {
        display: 'none',
        flexDirection: 'row',
        alignItems: 'stretch',
        flex: '0 0 auto'
      });

      // Drag grip (expanded only). Full drag/snap is bound by the main ControlStrip
      // after handoff; include the segment here so the shell matches post-handoff layout.
      const moveBtn = createEarlyControlStripSegmentButton({
        ariaLabel: 'Move control strip',
        title: 'Drag to move',
        text: '⠿',
        compact: true
      });
      moveBtn.setAttribute('data-kp-control-strip-move', 'true');
      try {
        moveBtn.style.cursor = 'grab';
        moveBtn.style.touchAction = 'none';
        moveBtn.style.letterSpacing = '0';
        moveBtn.style.fontSize = '12px';
        moveBtn.style.opacity = '0.85';
      } catch { /* ignore */ }
      moveBtn.addEventListener('click', (e) => {
        try { e.preventDefault(); e.stopPropagation(); } catch { /* ignore */ }
      });

      const keyboardBtn = createEarlyControlStripSegmentButton({
        ariaLabel: 'Toggle keyboard reference',
        title: 'Keyboard reference',
        text: 'KB',
        iconActionId: 'TOGGLE_KEYBOARD_HELP'
      });
      keyboardBtn.setAttribute('data-kp-control-strip-keyboard', 'true');

      const settingsBtn = createEarlyControlStripSegmentButton({
        ariaLabel: 'Open KeyPilot settings',
        title: 'Settings',
        text: 'Settings',
        iconActionId: 'OPEN_SETTINGS_POPOVER'
      });
      settingsBtn.setAttribute('data-kp-control-strip-settings', 'true');

      modules.appendChild(moveBtn);
      modules.appendChild(keyboardBtn);
      modules.appendChild(settingsBtn);

      const collapseBtn = createEarlyControlStripSegmentButton({
        ariaLabel: 'Expand control strip',
        title: 'Expand',
        text: '▶',
        compact: true
      });
      collapseBtn.setAttribute('data-kp-control-strip-collapse', 'true');
      collapseBtn.style.boxShadow = 'inset 0 0 0 1px #3a3a3a';

      const closeBtn = createEarlyControlStripSegmentButton({
        ariaLabel: 'Close control strip',
        title: 'Close (Alt+J to show again)',
        text: '×',
        compact: true,
        last: true
      });
      closeBtn.setAttribute('data-kp-control-strip-close', 'true');
      closeBtn.style.boxShadow = 'inset 0 0 0 1px #3a3a3a';
      closeBtn.style.display = 'none';

      // Early interactions (guarded so main extension owns handlers after handoff).
      statusBtn.addEventListener('click', (e) => {
        try { e.preventDefault(); e.stopPropagation(); } catch { /* ignore */ }
        if (isMainExtensionLoaded) return;
        try {
          if (typeof chrome !== 'undefined' && chrome.runtime) {
            chrome.runtime.sendMessage({ type: 'KP_TOGGLE_STATE' });
          }
        } catch { /* ignore */ }
      });

      keyboardBtn.addEventListener('click', (e) => {
        try { e.preventDefault(); e.stopPropagation(); } catch { /* ignore */ }
        if (isMainExtensionLoaded) return;
        if (!isExtensionEnabled) return;
        if (isPopoverOsWindow) return;
        const next = !keyboardHelpVisible;
        applyEarlyKeyboardHelpVisibility(next);
        try {
          const payload = { [KEYBOARD_HELP_STORAGE_KEY]: next };
          try { chrome.storage.sync.set(payload).catch(() => {}); } catch { /* ignore */ }
          try { chrome.storage.local.set(payload).catch(() => {}); } catch { /* ignore */ }
        } catch { /* ignore */ }
        renderEarlyControlStripKeyboard();
      });

      settingsBtn.addEventListener('click', (e) => {
        try { e.preventDefault(); e.stopPropagation(); } catch { /* ignore */ }
        // Settings popover requires the main content script; no-op until handoff.
      });

      collapseBtn.addEventListener('click', (e) => {
        try { e.preventDefault(); e.stopPropagation(); } catch { /* ignore */ }
        if (isMainExtensionLoaded) return;
        controlStripCollapsed = !controlStripCollapsed;
        applyEarlyControlStripCollapsedLayout();
        persistEarlyControlStripSettings({ collapsed: controlStripCollapsed });
      });

      closeBtn.addEventListener('click', (e) => {
        try { e.preventDefault(); e.stopPropagation(); } catch { /* ignore */ }
        if (isMainExtensionLoaded) return;
        controlStripDesiredVisible = false;
        applyEarlyControlStripVisibility();
        persistEarlyControlStripSettings({ visible: false });
      });

      shell.appendChild(statusBtn);
      shell.appendChild(modules);
      shell.appendChild(collapseBtn);
      shell.appendChild(closeBtn);

      (document.body || document.documentElement).appendChild(root);
      try { ensureEarlyChromeHostMounted(root); } catch { /* ignore */ }

      controlStripRoot = root;
      controlStripShadowRoot = root.shadowRoot || null;
      controlStripRefs = {
        statusBtn,
        statusDot,
        statusLabel,
        modules,
        moveBtn,
        keyboardBtn,
        settingsBtn,
        collapseBtn,
        closeBtn
      };

      renderEarlyControlStripStatus();
      renderEarlyControlStripKeyboard();
      applyEarlyControlStripCollapsedLayout();
      return controlStripRoot;
    } catch {
      return null;
    }
  }

  function applyEarlyControlStripVisibility() {
    if (isMainExtensionLoaded) return;
    ensureEarlyControlStripShell();
    if (!controlStripRoot) return;
    // Control strip stays available even when KeyPilot is disabled (On/Off re-enable).
    const show = !!controlStripDesiredVisible;
    if (show) {
      try {
        earlyApplyPanelPosition(controlStripRoot, earlyPanelPositions && earlyPanelPositions.controlStrip, {
          margin: EARLY_STRIP_MARGIN_PX,
          defaultAnchor: 'top-left',
          defaultHeight: CONTROL_STRIP_HEIGHT_PX
        });
      } catch { /* ignore */ }
    }
    try {
      controlStripRoot.hidden = !show;
      controlStripRoot.style.display = show ? 'flex' : 'none';
      controlStripRoot.style.pointerEvents = show ? 'auto' : 'none';
    } catch { /* ignore */ }
    if (show) {
      try { ensureEarlyChromeHostMounted(controlStripRoot); } catch { /* ignore */ }
      setupEarlyControlStripHostGuard();
      applyEarlyControlStripCollapsedLayout();
      renderEarlyControlStripStatus();
      renderEarlyControlStripKeyboard();
      syncEarlyControlStripOnboardingOffset();
    }
  }

  function applyEarlyControlStripFromSettingsObject(settingsObj) {
    const parsed = parseControlStripFromSettings(settingsObj);
    controlStripDesiredVisible = parsed.visible;
    controlStripCollapsed = parsed.collapsed;
    controlStripLayoutHydrated = true;
    try {
      earlyPanelPositions = readEarlyPanelPositionsFromSettingsObj(settingsObj) || earlyPanelPositions;
    } catch { /* ignore */ }
    try {
      cacheEarlyChromeLayout({
        panelPositions: earlyPanelPositions || undefined,
        controlStrip: { visible: controlStripDesiredVisible, collapsed: controlStripCollapsed }
      });
    } catch { /* ignore */ }
    applyEarlyControlStripVisibility();
    // Re-apply dock positions when settings arrive (shells may already exist).
    try {
      if (controlStripRoot && controlStripRoot.isConnected) {
        earlyApplyPanelPosition(controlStripRoot, earlyPanelPositions && earlyPanelPositions.controlStrip, {
          margin: EARLY_STRIP_MARGIN_PX,
          defaultAnchor: 'top-left',
          defaultHeight: CONTROL_STRIP_HEIGHT_PX
        });
      }
    } catch { /* ignore */ }
    try {
      if (keyboardHelpRoot && keyboardHelpRoot.isConnected) {
        earlyApplyPanelPosition(keyboardHelpRoot, earlyPanelPositions && earlyPanelPositions.keyboardReference, {
          margin: EARLY_PANEL_MARGIN_PX,
          defaultAnchor: 'bottom-left',
          defaultWidth: 760,
          defaultHeight: 200
        });
      }
    } catch { /* ignore */ }
  }

  function setupControlStripStorageListener() {
    if (controlStripStorageListener || !chrome?.storage?.onChanged) return;
    controlStripStorageListener = (changes, areaName) => {
      if (isMainExtensionLoaded) return;
      if (!changes || (areaName !== 'sync' && areaName !== 'local')) return;
      if (!Object.prototype.hasOwnProperty.call(changes, SETTINGS_STORAGE_KEY)) return;
      try {
        const next = changes[SETTINGS_STORAGE_KEY]?.newValue;
        applyEarlyControlStripFromSettingsObject(next && typeof next === 'object' ? next : null);
        try {
          if (typeof applyEarlyTheme === 'function' && next && typeof next === 'object') applyEarlyTheme(next.themeId, next.themeOverrides);
        } catch { /* ignore */ }
      } catch { /* ignore */ }
    };
    try {
      chrome.storage.onChanged.addListener(controlStripStorageListener);
    } catch { /* ignore */ }
  }

  /**
   * Ensure the floating keyboard reference shell exists early (document_start).
   * The bundled extension will "adopt" this element later to avoid flicker.
   *
   * Titlebar DOM must match FloatingKeyboardHelp: title | layout select | hint | close.
   * Chrome must match NCT dark UI so adopt doesn't visibly restyle after navigation.
   */
  function ensureEarlyFloatingKeyboardHelpShell() {
    if (keyboardHelpHandedOff) return;
    if (keyboardHelpRoot && keyboardHelpRoot.isConnected) return;
    if (keyboardHelpRoot && !keyboardHelpRoot.isConnected) {
      try { ensureEarlyChromeHostMounted(keyboardHelpRoot); } catch { /* ignore */ }
      if (keyboardHelpRoot.isConnected) return;
    }
    // After cursor/main handoff, remount the existing shell but do not build a
    // second one — the bundled script is about to adopt.
    if (isMainExtensionLoaded) return;

    const doc = document;
    const root = doc.createElement('div');
    root.className = 'kp-floating-keyboard-help';
    root.hidden = true;
    root.setAttribute('role', 'dialog');
    root.setAttribute('aria-label', 'KeyPilot keyboard reference');
    root.setAttribute('data-kp-early-floating-keyboard', 'true');
    const shell = ensureEarlyOpenChromeShadow(root, 'keyboard-help') || root;

    // Theme + keybindings CSS must be in the shadow before titlebar children are
    // appended. Document-head theme CSS does not reach .kp-titlebar-icon here, so
    // a hidden-by-theme leading icon would otherwise leave an 8px flex gap.
    try { ensureKeybindingsFontsReady(); } catch { /* ignore */ }
    try { ensureKeybindingsUiStylesInjected(shell); } catch { /* ignore */ }

    // NCT dark UI panel chrome (matches floating-keyboard-help.js `_applyProPanelChrome`).
    Object.assign(root.style, {
      position: 'fixed',
      left: '16px',
      bottom: '16px',
      width: '760px',
      maxWidth: 'calc(100vw - 32px)',
      maxHeight: 'calc(100vh - 32px)',
      overflow: 'hidden',
      boxSizing: 'border-box',
      zIndex: String(Z_FLOATING_KEYBOARD_HELP),
      background: 'var(--kp-panel-bg, #232323)',
      color: 'var(--kp-color-fg, #ddd)',
      border: 'var(--kp-panel-border, 1px solid #111)',
      borderRadius: 'var(--kp-radius-panel, 3px)',
      boxShadow: 'var(--kp-panel-shadow)',
      fontFamily: 'var(--kp-font-ui, Helvetica, Arial, sans-serif)',
      display: 'none',
      flexDirection: 'column',
      pointerEvents: 'none'
    });
    try { root.setAttribute('aria-hidden', 'true'); } catch { /* ignore */ }
    try { root.classList.add('kpv2-hidden'); } catch { /* ignore */ }
    try { applyPopupThemeVars(root); } catch { /* ignore */ }
    try {
      earlyApplyPanelPosition(root, earlyPanelPositions && earlyPanelPositions.keyboardReference, {
        margin: EARLY_PANEL_MARGIN_PX,
        defaultAnchor: 'bottom-left',
        defaultWidth: 760,
        defaultHeight: 200
      });
    } catch { /* ignore */ }

    const header = doc.createElement('div');
    header.setAttribute('data-kp-floating-keyboard-titlebar', 'true');
    Object.assign(header.style, {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-start',
      gap: '8px',
      height: '28px',
      minHeight: '28px',
      maxHeight: '28px',
      boxSizing: 'border-box',
      padding: '0 6px 0 10px',
      margin: '0',
      borderBottom: 'var(--kp-titlebar-border, 1px solid #111)',
      boxShadow: 'var(--kp-titlebar-shadow)',
      background: 'var(--kp-titlebar-bg)',
      flex: '0 0 auto',
      cursor: 'grab',
      userSelect: 'none',
      WebkitUserSelect: 'none',
      touchAction: 'none'
    });

    const title = doc.createElement('div');
    // Match post-adopt title so content-script render doesn't rewrite title text.
    title.textContent = 'Keyboard Reference';
    title.setAttribute('data-kp-floating-keyboard-title', 'true');
    Object.assign(title.style, {
      fontSize: '11px',
      fontWeight: 'var(--kp-titlebar-title-weight, 600)',
      letterSpacing: 'var(--kp-type-tracking-titlebar, 0.02em)',
      textTransform: 'var(--kp-type-transform-titlebar, none)',
      color: 'var(--kp-color-fg, #ddd)',
      lineHeight: '28px',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      margin: '0',
      padding: '0'
    });

    // Layout select must exist in the early shell — otherwise adopt inserts it and the
    // titlebar visibly rebuilds on every navigation. Placeholder trigger only; the
    // content script replaces this with the interactive custom select.
    const layoutSelect = doc.createElement('div');
    layoutSelect.className = 'kp-select kp-select--titlebar';
    layoutSelect.setAttribute('data-kp-select', 'true');
    layoutSelect.setAttribute('data-kp-floating-keyboard-layout-select', 'true');
    layoutSelect.setAttribute('aria-label', 'Current keyboard layout');
    Object.assign(layoutSelect.style, {
      display: 'inline-flex',
      alignItems: 'stretch',
      marginLeft: '6px',
      flex: '0 0 auto'
    });
    const layoutTrigger = doc.createElement('button');
    layoutTrigger.type = 'button';
    layoutTrigger.className = 'kp-select-trigger';
    layoutTrigger.setAttribute('aria-label', 'Current keyboard layout');
    Object.assign(layoutTrigger.style, {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '6px',
      width: '190px',
      height: '22px',
      margin: '0',
      padding: '2px 6px',
      borderRadius: '2px',
      border: '1px solid #0a0a0a',
      background: '#141414',
      color: '#ddd',
      outline: 'none',
      fontSize: '11px',
      lineHeight: '1.2',
      cursor: 'pointer',
      fontFamily: 'Helvetica, Arial, sans-serif',
      textAlign: 'left',
      boxSizing: 'border-box'
    });
    const layoutTriggerLabel = doc.createElement('span');
    layoutTriggerLabel.className = 'kp-select-trigger-label';
    let earlyLayoutLabel = 'Browsing';
    try {
      const value = `builtin:${keyboardLayoutFamilyId}`;
      layoutSelect.setAttribute('data-kp-select-value', value);
      const pair = earlyLayoutFamilyOptions().find((p) => p && p[0] === value);
      if (pair && pair[1]) earlyLayoutLabel = String(pair[1]);
    } catch { /* ignore */ }
    layoutTriggerLabel.textContent = earlyLayoutLabel;
    Object.assign(layoutTriggerLabel.style, {
      flex: '1 1 auto',
      minWidth: '0',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap'
    });
    const layoutChevron = doc.createElement('span');
    layoutChevron.className = 'kp-select-chevron';
    layoutChevron.setAttribute('aria-hidden', 'true');
    Object.assign(layoutChevron.style, {
      width: '0',
      height: '0',
      marginLeft: '2px',
      borderLeft: '3.5px solid transparent',
      borderRight: '3.5px solid transparent',
      borderTop: '4px solid #ddd',
      flex: '0 0 auto',
      opacity: '0.65'
    });
    layoutTrigger.appendChild(layoutTriggerLabel);
    layoutTrigger.appendChild(layoutChevron);
    layoutTrigger.addEventListener('pointerdown', (e) => {
      try { e.stopPropagation(); } catch { /* ignore */ }
    }, true);
    layoutSelect.appendChild(layoutTrigger);

    const hint = doc.createElement('div');
    hint.setAttribute('data-kp-floating-keyboard-hint', 'true');
    hint.hidden = true;
    Object.assign(hint.style, {
      display: 'none',
      alignItems: 'center',
      gap: '4px',
      marginLeft: '0',
      fontSize: '10px',
      fontWeight: '500',
      letterSpacing: '0',
      color: 'rgba(140, 145, 155, 0.95)',
      padding: '0 4px',
      borderRadius: '0',
      border: 'none',
      background: 'transparent',
      lineHeight: '28px',
      whiteSpace: 'nowrap'
    });

    const shortcut = doc.createElement('kbd');
    shortcut.setAttribute('data-kp-floating-keyboard-shortcut', 'true');
    shortcut.setAttribute('data-kp-titlebar-shortcut', 'true');
    shortcut.textContent = 'K';
    shortcut.title = 'Toggle keyboard reference';
    Object.assign(shortcut.style, {
      fontFamily: 'var(--kp-font-kbd, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)',
      fontSize: 'var(--kp-type-kbd-size, 10px)',
      fontWeight: '400',
      lineHeight: '1.2',
      padding: '1px 6px',
      marginLeft: '0',
      border: 'var(--kp-kbd-border, 1px solid #0a0a0a)',
      borderRadius: 'var(--kp-radius-btn, 4px)',
      background: 'var(--kp-kbd-bg, linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 55%, #1f1f1f 100%))',
      color: 'var(--kp-color-kbd-fg, #ddd)',
      boxShadow: 'var(--kp-kbd-shadow, none)',
      textTransform: 'var(--kp-kbd-transform, none)',
      letterSpacing: 'var(--kp-kbd-tracking, 0.02em)',
      boxSizing: 'border-box',
      flexShrink: '0'
    });

    const leadingIcon = doc.createElement('span');
    leadingIcon.className = 'kp-titlebar-icon';
    leadingIcon.setAttribute('aria-hidden', 'true');
    leadingIcon.setAttribute('data-kp-titlebar-icon', 'keyboard');
    leadingIcon.setAttribute('data-kp-floating-keyboard-icon', 'true');
    try {
      const iconUrl = 'data:image/svg+xml,' + encodeURIComponent(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="black"><path d="M1.5 4h13v9h-13V4zm2 2v2h2V6h-2zm3 0v2h2V6h-2zm3 0v2h2V6h-2zm3 0v2h2V6h-2zM3.5 9v2h8V9h-8z"/></svg>'
      );
      const img = `url("${iconUrl}")`;
      leadingIcon.style.webkitMaskImage = img;
      leadingIcon.style.maskImage = img;
    } catch { /* ignore */ }

    const closeBtn = doc.createElement('button');
    closeBtn.type = 'button';
    closeBtn.textContent = '×';
    closeBtn.setAttribute('aria-label', 'Close keyboard reference');
    closeBtn.setAttribute('data-kp-floating-keyboard-close', 'true');
    Object.assign(closeBtn.style, {
      width: '22px',
      height: '22px',
      minWidth: '22px',
      minHeight: '22px',
      borderRadius: '4px',
      border: 'none',
      background: 'transparent',
      color: 'rgba(200, 200, 205, 0.9)',
      cursor: 'pointer',
      fontSize: '15px',
      lineHeight: '20px',
      padding: '0',
      margin: '0',
      flex: '0 0 auto',
      boxShadow: 'inset 0 0 0 1px #3a3a3a'
    });
    closeBtn.addEventListener('click', (e) => {
      try { e.preventDefault(); e.stopPropagation(); } catch {}
      if (root) root.hidden = true;
    });

    const collapseBtn = doc.createElement('button');
    collapseBtn.type = 'button';
    collapseBtn.textContent = '▾';
    collapseBtn.setAttribute('aria-label', 'Collapse keyboard reference');
    collapseBtn.setAttribute('data-kp-floating-keyboard-collapse', 'true');
    Object.assign(collapseBtn.style, {
      width: '22px',
      height: '22px',
      minWidth: '22px',
      minHeight: '22px',
      borderRadius: '4px',
      border: 'none',
      background: 'transparent',
      color: 'rgba(200, 200, 205, 0.9)',
      cursor: 'pointer',
      fontSize: '14px',
      lineHeight: '20px',
      padding: '0',
      margin: '0',
      marginLeft: 'auto',
      flex: '0 0 auto',
      boxShadow: 'inset 0 0 0 1px #3a3a3a'
    });

    header.appendChild(leadingIcon);
    header.appendChild(title);
    header.appendChild(shortcut);
    header.appendChild(layoutSelect);
    header.appendChild(hint);
    header.appendChild(collapseBtn);
    header.appendChild(closeBtn);

    const body = doc.createElement('div');
    body.setAttribute('data-kp-floating-keyboard-body', 'true');
    Object.assign(body.style, {
      padding: '0',
      margin: '0',
      border: 'none',
      background: 'transparent'
    });

    const keyboardContainer = doc.createElement('div');
    keyboardContainer.className = 'kp-floating-keyboard-help__keyboard';
    keyboardContainer.textContent = '';
    body.appendChild(keyboardContainer);
    collapseBtn.addEventListener('click', (e) => {
      try { e.preventDefault(); e.stopPropagation(); } catch {}
      const collapsed = root.getAttribute('data-kp-collapsed') === 'true';
      const next = !collapsed;
      applyEarlyKeyboardReferenceCollapsed(next);
      persistEarlyKeyboardReferenceCollapsed(next);
    });

    shell.appendChild(header);
    shell.appendChild(body);

    (doc.body || doc.documentElement).appendChild(root);
    try { ensureEarlyChromeHostMounted(root); } catch { /* ignore */ }

    keyboardHelpRoot = root;
    keyboardHelpShadowRoot = root.shadowRoot || null;
    keyboardHelpKeyboardContainer = keyboardContainer;

    // Apply stored collapsed state before first paint when visible.
    try { applyEarlyKeyboardReferenceCollapsed(keyboardReferenceCollapsed); } catch { /* ignore */ }

    renderEarlyKeyboard(keyboardContainer, {
      layoutId: keyboardLayoutId,
      includeNumberRow: keyboardShowNumberRow
    });
    try { applyEarlyLayoutSelect(); } catch { /* ignore */ }
    try {
      earlyApplyPanelPosition(root, earlyPanelPositions && earlyPanelPositions.keyboardReference, {
        margin: EARLY_PANEL_MARGIN_PX,
        defaultAnchor: 'bottom-left',
        defaultWidth: 760,
        defaultHeight: 200
      });
    } catch { /* ignore */ }
    try {
      requestAnimationFrame(() => {
        try {
          earlyApplyPanelPosition(root, earlyPanelPositions && earlyPanelPositions.keyboardReference, {
            margin: EARLY_PANEL_MARGIN_PX,
            defaultAnchor: 'bottom-left',
            defaultWidth: 760,
            defaultHeight: 200
          });
        } catch { /* ignore */ }
      });
    } catch { /* ignore */ }
  }

  function updateKeyboardHelpHintForLayout(layoutId) {
    try {
      if (!keyboardHelpRoot) return;
      const root = keyboardHelpShadowRoot || keyboardHelpRoot;
      const shortcut = root.querySelector('[data-kp-floating-keyboard-shortcut="true"]')
        || root.querySelector('[data-kp-titlebar-shortcut="true"]');
      if (!shortcut) return;
      const data = getEarlyKeyboardDataForLayout(layoutId || keyboardLayoutId);
      const binding = data?.bindings?.TOGGLE_KEYBOARD_HELP;
      const key = binding && (binding.displayKey || binding.keyLabel) ? String(binding.displayKey || binding.keyLabel) : 'K';
      const next = key;
      if (shortcut.textContent === next) return;
      shortcut.textContent = next;
      try {
        shortcut.title = `Toggle with ${key}`;
        shortcut.setAttribute('aria-label', `Toggle keyboard reference (${key})`);
      } catch { /* ignore */ }
    } catch { /* ignore */ }
  }

  /**
   * Show/hide keyboard reference in a way that survives hostile host CSS.
   * Zapier (and other apps) override UA `[hidden]{display:none}` with author
   * `display` rules, so the `hidden` attribute alone is not enough — same
   * lesson as onboarding (`setOnboardingPanelVisible`) and key popovers.
   * @param {HTMLElement|null} root
   * @param {boolean} visible
   */
  function setEarlyKeyboardHelpRootVisible(root, visible) {
    if (!root) return;
    const show = !!visible;
    try {
      root.hidden = !show;
      root.setAttribute('aria-hidden', show ? 'false' : 'true');
      // Prefer !important so host author sheets cannot re-show a closed panel.
      root.style.setProperty('display', show ? 'flex' : 'none', 'important');
      root.style.setProperty('pointer-events', show ? 'auto' : 'none', 'important');
      root.style.setProperty('visibility', show ? 'visible' : 'hidden', 'important');
      if (!show) {
        try { root.classList.add('kpv2-hidden'); } catch { /* ignore */ }
      } else {
        try { root.classList.remove('kpv2-hidden'); } catch { /* ignore */ }
      }
    } catch { /* ignore */ }
  }

  function applyEarlyKeyboardHelpVisibility(visible) {
    if (keyboardHelpHandedOff) return;
    keyboardHelpVisible = Boolean(visible);
    try { cacheEarlyChromeLayout({ keyboardHelpVisible }); } catch { /* ignore */ }

    // Separate-window Link Preview / Open Popover: never paint Keyboard Reference.
    if (isPopoverOsWindow) {
      if (keyboardHelpRoot) {
        setEarlyKeyboardHelpRootVisible(keyboardHelpRoot, false);
      }
      try { renderEarlyControlStripKeyboard(); } catch { /* ignore */ }
      return;
    }

    // If extension is disabled, keep it hidden but remember desired state.
    ensureEarlyFloatingKeyboardHelpShell();
    if (!keyboardHelpRoot) return;
    // The shell is constructed before async storage resolves. Reapply the
    // persisted titlebar-only state before changing display so a collapsed
    // reference never gets one expanded paint during navigation.
    try { applyEarlyKeyboardReferenceCollapsed(keyboardReferenceCollapsed); } catch { /* ignore */ }
    try {
      const title = (keyboardHelpShadowRoot || keyboardHelpRoot).querySelector('[data-kp-floating-keyboard-title="true"]');
      if (title) {
        title.textContent = 'Keyboard Reference';
      }
    } catch { /* ignore */ }
    const customReady = !keyboardUsesCustomLayout || !!getEarlyActiveUserLayout();
    const shouldShow = !!(isExtensionEnabled && keyboardHelpVisible && customReady);
    if (shouldShow) {
      try { ensureEarlyChromeHostMounted(keyboardHelpRoot); } catch { /* ignore */ }
      setupEarlyKeyboardHelpHostGuard();
    }
    if (shouldShow) {
      // Give the collapsed shell a layout box while it is still invisible, then
      // resolve its anchor from the real titlebar-only height. Otherwise a
      // bottom/middle anchor initially uses the expanded fallback height and
      // visibly drops after the body is hidden.
      try {
        keyboardHelpRoot.hidden = false;
        keyboardHelpRoot.style.setProperty('display', 'flex', 'important');
        keyboardHelpRoot.style.setProperty('pointer-events', 'none', 'important');
        keyboardHelpRoot.style.setProperty('visibility', 'hidden', 'important');
        earlyApplyPanelPosition(keyboardHelpRoot, earlyPanelPositions && earlyPanelPositions.keyboardReference, {
          margin: EARLY_PANEL_MARGIN_PX,
          defaultAnchor: 'bottom-left',
          defaultWidth: 760,
          // Collapsed titlebar-only shell; expanded keyboard fallback stays 200.
          defaultHeight: keyboardReferenceCollapsed ? 28 : 200
        });
      } catch { /* ignore */ }
    }
    setEarlyKeyboardHelpRootVisible(keyboardHelpRoot, shouldShow);
    try { renderEarlyControlStripKeyboard(); } catch { /* ignore */ }
  }

  /**
   * Ask the SW whether this top-level tab is a KeyPilot popover OS window.
   * @returns {Promise<boolean>}
   */
  function queryAmIPopoverWindow() {
    return new Promise((resolve) => {
      try {
        if (typeof chrome === 'undefined' || !chrome.runtime?.sendMessage) {
          resolve(false);
          return;
        }
        chrome.runtime.sendMessage({ type: 'KP_AM_I_POPOVER_WINDOW' }, (res) => {
          try { void chrome.runtime.lastError; } catch { /* ignore */ }
          resolve(!!(res && res.isPopoverWindow));
        });
      } catch {
        resolve(false);
      }
    });
  }

  async function getKeyboardHelpVisibleFromStorage() {
    const key = KEYBOARD_HELP_STORAGE_KEY;
    try {
      const syncResult = await chrome.storage.sync.get([key]);
      if (typeof syncResult?.[key] === 'boolean') return syncResult[key];
    } catch {}
    try {
      const localResult = await chrome.storage.local.get([key]);
      if (typeof localResult?.[key] === 'boolean') return localResult[key];
    } catch {}
    return false;
  }

  function setupKeyboardHelpStorageListener() {
    if (keyboardHelpStorageListener || !chrome?.storage?.onChanged) return;
    keyboardHelpStorageListener = (changes, areaName) => {
      if (keyboardHelpHandedOff) return;
      if (!changes || (areaName !== 'sync' && areaName !== 'local')) return;
      if (!Object.prototype.hasOwnProperty.call(changes, KEYBOARD_HELP_STORAGE_KEY)) return;
      const raw = changes[KEYBOARD_HELP_STORAGE_KEY]?.newValue;
      if (typeof raw !== 'boolean') return;
      applyEarlyKeyboardHelpVisibility(raw);
    };
    try {
      chrome.storage.onChanged.addListener(keyboardHelpStorageListener);
    } catch {}
  }

  let cursorSettingsListener = null;

  function setupCursorSettingsListener() {
    if (cursorSettingsListener || !chrome?.storage?.onChanged) return;
    cursorSettingsListener = (changes, areaName) => {
      if (isMainExtensionLoaded) return;
      if (!changes || (areaName !== 'sync' && areaName !== 'local')) return;
      if (!Object.prototype.hasOwnProperty.call(changes, SETTINGS_STORAGE_KEY)) return;
      
      // Mark that settings changed so cursor will be reapplied
      cursorSettingsChanged = true;
      cursorApplied = false; // Force reapplication

      // Also refresh early keyboard layout selection (prevents layout flicker if user changes it
      // before the bundled content script has taken over).
      try {
        const next = changes[SETTINGS_STORAGE_KEY]?.newValue;
        const nextObj = next && typeof next === 'object' ? next : null;
        const { layoutChanged, customLayoutChanged } = applyEarlyKeyboardLayoutFromSettingsObj(nextObj);
        try { if (typeof applyEarlyTheme === 'function') applyEarlyTheme(nextObj && nextObj.themeId, nextObj ? nextObj.themeOverrides : undefined); } catch { /* ignore */ }
        const nextNum = !!(nextObj && nextObj.keyboardReferenceShowNumberRow);
        const nextCollapsed = !!(nextObj && nextObj.keyboardReferenceCollapsed);
        const numChanged = nextNum !== keyboardShowNumberRow;
        const collapsedChanged = nextCollapsed !== keyboardReferenceCollapsed;
        if (numChanged) keyboardShowNumberRow = nextNum;
        if (collapsedChanged) {
          try { applyEarlyKeyboardReferenceCollapsed(nextCollapsed); } catch { /* ignore */ }
        }
        if (layoutChanged || numChanged || customLayoutChanged) {
          try {
            renderEarlyKeyboard(keyboardHelpKeyboardContainer, {
              layoutId: keyboardLayoutId,
              includeNumberRow: keyboardShowNumberRow
            });
          } catch { /* ignore */ }
          if (layoutChanged) updateKeyboardHelpHintForLayout(keyboardLayoutId);
        }
        if (customLayoutChanged) applyEarlyKeyboardHelpVisibility(keyboardHelpVisible);
        try { applyEarlyFocusChromeFromSettingsObj(nextObj); } catch { /* ignore */ }
      } catch { /* ignore */ }
      
      if (isExtensionEnabled) {
        applyEarlyCursor().catch(() => {});
      }
    };
    try {
      chrome.storage.onChanged.addListener(cursorSettingsListener);
    } catch {}
  }

  let keyboardLayoutStoreListener = null;

  function setupKeyboardLayoutStoreListener() {
    if (keyboardLayoutStoreListener || !chrome?.storage?.onChanged) return;
    keyboardLayoutStoreListener = (changes, areaName) => {
      if (keyboardHelpHandedOff) return;
      if (!changes || (areaName !== 'sync' && areaName !== 'local')) return;
      if (!Object.prototype.hasOwnProperty.call(changes, KEYBOARD_LAYOUT_STORE_KEY)) return;
      try {
        applyEarlyKeyboardLayoutStore(changes[KEYBOARD_LAYOUT_STORE_KEY]?.newValue);
        if (keyboardUsesCustomLayout) {
          try {
            renderEarlyKeyboard(keyboardHelpKeyboardContainer, {
              layoutId: keyboardLayoutId,
              includeNumberRow: keyboardShowNumberRow
            });
          } catch { /* ignore */ }
          try { applyEarlyLayoutSelect(); } catch { /* ignore */ }
          applyEarlyKeyboardHelpVisibility(keyboardHelpVisible);
        }
      } catch { /* ignore */ }
    };
    try {
      chrome.storage.onChanged.addListener(keyboardLayoutStoreListener);
    } catch {}
  }

  function noteEarlyPointer(event) {
    if (!isExtensionEnabled || isMainExtensionLoaded) return;
    if (!event || event.isTrusted === false) return;
    const x = event.clientX;
    const y = event.clientY;
    if (!Number.isFinite(x) || !Number.isFinite(y)) return;
    earlyPointerSeen = true;
    updateCursorPosition(x, y);
    scheduleEarlyHoverUpdate();
  }

  /**
   * Handle mouse movement for early cursor tracking
   */
  function handleMouseMove(event) {
    noteEarlyPointer(event);
  }

  function startEarlyPointerListeners() {
    if (earlyPointerListenersActive) return;
    earlyPointerListenersActive = true;
    try {
      document.addEventListener('mousemove', handleMouseMove, { passive: true });
      document.addEventListener('pointermove', handleMouseMove, { passive: true });
      // Stationary pointer after a click-navigation never fires mousemove; mouseover
      // still reports the real client coordinates as nodes appear under the cursor.
      document.addEventListener('mouseover', handleMouseMove, { passive: true, capture: true });
    } catch { /* ignore */ }
  }

  function stopEarlyPointerListeners() {
    if (!earlyPointerListenersActive) return;
    earlyPointerListenersActive = false;
    try { document.removeEventListener('mousemove', handleMouseMove); } catch { /* ignore */ }
    try { document.removeEventListener('pointermove', handleMouseMove); } catch { /* ignore */ }
    try { document.removeEventListener('mouseover', handleMouseMove, { capture: true }); } catch { /* ignore */ }
  }

  /**
   * Initialize early storage for faster state loading
   */
  function initEarlyStorage() {
    // Pre-warm storage connections for faster access
    if (typeof chrome !== 'undefined' && chrome.storage) {
      // Test storage availability early
      chrome.storage.sync.get(['keypilot_enabled', KEYBOARD_HELP_STORAGE_KEY, SETTINGS_STORAGE_KEY, KEYBOARD_LAYOUT_STORE_KEY], (result) => {
        if (chrome.runtime.lastError) {
          // Storage not available, will fallback to localStorage
          isExtensionEnabled = true; // Default to enabled
          updateCursorVisibility();
          if (!isPopoverOsWindow) {
            ensureEarlyFloatingKeyboardHelpShell();
            applyEarlyKeyboardHelpVisibility(false);
          }
          ensureEarlyControlStripShell();
          applyEarlyControlStripVisibility();
          return;
        }
        isExtensionEnabled = result.keypilot_enabled !== false;
        const applyHelpAndStrip = (helpVisible) => {
          if (keyboardHelpHandedOff) return;
          keyboardHelpVisible = helpVisible === true;
          updateCursorVisibility();
          if (!isPopoverOsWindow) {
            ensureEarlyFloatingKeyboardHelpShell();
            try {
              renderEarlyKeyboard(keyboardHelpKeyboardContainer, {
                layoutId: keyboardLayoutId,
                includeNumberRow: keyboardShowNumberRow
              });
            } catch { /* ignore */ }
            updateKeyboardHelpHintForLayout(keyboardLayoutId);
            try { applyEarlyLayoutSelect(); } catch { /* ignore */ }
          }
          applyEarlyKeyboardHelpVisibility(keyboardHelpVisible);
          setupKeyboardHelpStorageListener();
          setupCursorSettingsListener();
          setupKeyboardLayoutStoreListener();
          applyEarlyControlStripFromSettingsObject(settingsObj);
          setupControlStripStorageListener();
        };
        let settingsObj = null;
        try {
          const st = result && result[SETTINGS_STORAGE_KEY] && typeof result[SETTINGS_STORAGE_KEY] === 'object' ? result[SETTINGS_STORAGE_KEY] : null;
          settingsObj = st;
          applyEarlyKeyboardLayoutFromSettingsObj(st);
          try { applyEarlyKeyboardLayoutStore(result && result[KEYBOARD_LAYOUT_STORE_KEY]); } catch { /* ignore */ }
          try { if (typeof applyEarlyTheme === 'function') applyEarlyTheme(st && st.themeId, st ? st.themeOverrides : undefined); } catch { /* ignore */ }
          keyboardShowNumberRow = !!(st && st.keyboardReferenceShowNumberRow);
          keyboardReferenceCollapsed = !!(st && st.keyboardReferenceCollapsed);
          earlyPanelPositions = readEarlyPanelPositionsFromSettingsObj(st);
        } catch {
          keyboardLayoutId = normalizeKeyboardLayoutId(keyboardLayoutId);
        }
        if (typeof result[KEYBOARD_HELP_STORAGE_KEY] === 'boolean') {
          applyHelpAndStrip(result[KEYBOARD_HELP_STORAGE_KEY]);
        } else {
          void getKeyboardHelpVisibleFromStorage().then((v) => applyHelpAndStrip(v));
        }
      });
    } else {
      // No chrome storage available, default to enabled
      isExtensionEnabled = true;
      updateCursorVisibility();
      if (!isPopoverOsWindow) {
        ensureEarlyFloatingKeyboardHelpShell();
        applyEarlyKeyboardHelpVisibility(false);
      }
      ensureEarlyControlStripShell();
      applyEarlyControlStripVisibility();
    }
  }

  /**
   * Check extension state from storage
   */
  async function checkExtensionState() {
    let settingsObj = null;
    try {
      if (typeof chrome !== 'undefined' && chrome.storage) {
        const result = await chrome.storage.sync.get([
          'keypilot_enabled',
          KEYBOARD_HELP_STORAGE_KEY,
          SETTINGS_STORAGE_KEY,
          KEYBOARD_LAYOUT_STORE_KEY
        ]);
        isExtensionEnabled = result.keypilot_enabled !== false; // Default to true
        keyboardHelpVisible = await getKeyboardHelpVisibleFromStorage();
        try {
          settingsObj = result && result[SETTINGS_STORAGE_KEY] && typeof result[SETTINGS_STORAGE_KEY] === 'object'
            ? result[SETTINGS_STORAGE_KEY]
            : null;
          if (settingsObj) {
            applyEarlyKeyboardLayoutFromSettingsObj(settingsObj);
            try { if (typeof applyEarlyTheme === 'function') applyEarlyTheme(settingsObj.themeId, settingsObj.themeOverrides); } catch { /* ignore */ }
            keyboardShowNumberRow = !!settingsObj.keyboardReferenceShowNumberRow;
            keyboardReferenceCollapsed = !!settingsObj.keyboardReferenceCollapsed;
            earlyPanelPositions = readEarlyPanelPositionsFromSettingsObj(settingsObj);
          }
          try { applyEarlyKeyboardLayoutStore(result && result[KEYBOARD_LAYOUT_STORE_KEY]); } catch { /* ignore */ }
        } catch { /* ignore */ }
      }
    } catch (error) {
      // Fallback to localStorage if Chrome storage fails
      try {
        const stored = localStorage.getItem('keypilot_enabled');
        isExtensionEnabled = stored !== 'false';
      } catch (e) {
        isExtensionEnabled = true; // Default enabled
      }
    }
    try {
      if (typeof applyEarlyTheme === 'function') {
        applyEarlyTheme(settingsObj && settingsObj.themeId, settingsObj ? settingsObj.themeOverrides : undefined);
      }
    } catch { /* ignore */ }
    updateCursorVisibility();
    if (!isPopoverOsWindow) {
      ensureEarlyFloatingKeyboardHelpShell();
      try {
        renderEarlyKeyboard(keyboardHelpKeyboardContainer, {
          layoutId: keyboardLayoutId,
          includeNumberRow: keyboardShowNumberRow
        });
      } catch { /* ignore */ }
      try { updateKeyboardHelpHintForLayout(keyboardLayoutId); } catch { /* ignore */ }
      try { applyEarlyLayoutSelect(); } catch { /* ignore */ }
    }
    applyEarlyKeyboardHelpVisibility(keyboardHelpVisible);
    setupKeyboardHelpStorageListener();
    setupCursorSettingsListener();
    setupKeyboardLayoutStoreListener();
    applyEarlyControlStripFromSettingsObject(settingsObj);
    try { applyEarlyFocusChromeFromSettingsObj(settingsObj); } catch { /* ignore */ }
    setupControlStripStorageListener();
  }

  /**
   * Listen for extension state changes
   */
  function setupStateListener() {
    if (typeof chrome !== 'undefined' && chrome.runtime) {
      chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
        if (message.type === 'EXTENSION_TOGGLED') {
          isExtensionEnabled = message.enabled;
          updateCursorVisibility();
          applyEarlyKeyboardHelpVisibility(keyboardHelpVisible);
          try { renderEarlyControlStripStatus(); } catch { /* ignore */ }
          try { renderEarlyControlStripKeyboard(); } catch { /* ignore */ }
          if (message.enabled) {
            try { scheduleEarlyHoverUpdate(); } catch { /* ignore */ }
          }
        } else if (message.type === 'KP_TOGGLE_STATE' || message.type === 'KP_UPDATE_STATE') {
          // Broadcast from service worker after toggle; keep strip On/Off indicator current.
          if (typeof message.enabled === 'boolean') {
            isExtensionEnabled = message.enabled;
            updateCursorVisibility();
            applyEarlyKeyboardHelpVisibility(keyboardHelpVisible);
            try { renderEarlyControlStripStatus(); } catch { /* ignore */ }
            try { renderEarlyControlStripKeyboard(); } catch { /* ignore */ }
            if (!message.enabled) {
              try { hideEarlyHover(); } catch { /* ignore */ }
            } else {
              try { scheduleEarlyHoverUpdate(); } catch { /* ignore */ }
            }
          }
        } else if (message.type === 'CURSOR_MODE_CHANGE') {
          currentMode = message.mode;
          // Early cursor only shows basic crosshair, mode changes handled by main extension
        }
      });
    }
  }

  /**
   * Inject essential CSS for early cursor styling
   */
  function injectEarlyCSS() {
    const existing = document.getElementById(STYLE_ID);
    if (existing) {
      try {
        existing.textContent = EARLY_CSS;
      } catch {}
      try { ensureKeybindingsFontsReady(); } catch { /* ignore */ }
      return;
    }
    const style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = EARLY_CSS;
    
    // Inject at the end of head to prevent override, or use documentElement
    const target = document.head || document.documentElement;
    if (target) {
      target.appendChild(style);
    }
    try { ensureKeybindingsFontsReady(); } catch { /* ignore */ }
  }

  /**
   * Re-inject CSS to ensure it's not overridden by page styles
   */
  function reInjectCSS() {
    const existingStyle = document.getElementById(STYLE_ID);
    if (existingStyle) {
      existingStyle.remove();
    }
    injectEarlyCSS();
  }

  function isEarlyTypingContext(event) {
    let node = null;
    try {
      const path = event && typeof event.composedPath === 'function' ? event.composedPath() : null;
      if (path && path.length) {
        for (const n of path) {
          if (n && n.nodeType === 1) {
            node = n;
            break;
          }
        }
      }
    } catch { /* ignore */ }
    if (!node) {
      try { node = event && event.target && event.target.nodeType === 1 ? event.target : null; } catch { /* ignore */ }
    }
    if (!node) {
      try { node = document.activeElement; } catch { /* ignore */ }
    }
    if (!node || node.nodeType !== 1) return false;
    try {
      if (node.isContentEditable) return true;
    } catch { /* ignore */ }
    try {
      let p = node.parentElement;
      let depth = 0;
      while (p && depth++ < 4) {
        if (p.isContentEditable) return true;
        p = p.parentElement;
      }
    } catch { /* ignore */ }
    const tag = String(node.tagName || '').toLowerCase();
    if (tag === 'textarea') return !node.disabled;
    if (tag !== 'input') return false;
    if (node.disabled || node.readOnly) return false;
    const type = String(node.type || 'text').toLowerCase();
    return EARLY_TEXT_ENTRY_INPUT_TYPES.has(type);
  }

  function earlyBindingMatchesEvent(binding, slot, key, event) {
    if (!binding) return false;
    const label = String(binding.keyLabel || binding.displayKey || '').trim();
    if (!label) return false;
    if (label.length === 1) return slot === label.toUpperCase();
    if (label.includes('/')) {
      return label.split('/').some((part) => {
        const t = String(part || '').trim();
        if (!t) return false;
        if (t.length === 1) return slot === t.toUpperCase();
        return key === t || event.code === t;
      });
    }
    return key === label || event.code === label || slot === label.toUpperCase();
  }

  function resolveEarlyActionIdForEvent(event) {
    if (!event || event.ctrlKey || event.metaKey || event.altKey) return null;
    const key = String(event.key || '');
    if (!key || key === ' ') return null;
    const slot = key.length === 1 ? key.toUpperCase() : key;

    if (keyboardUsesCustomLayout) {
      const user = getEarlyActiveUserLayout();
      const assigned = user && user.slots && typeof user.slots === 'object' ? user.slots[slot] : null;
      if (!assigned || assigned.type !== 'function' || !assigned.id) return null;
      let fid = String(assigned.id);
      if (fid.startsWith('action:')) {
        try { fid = String(resolveEarlyFunctionSlotPaint(fid).functionId || ''); } catch { fid = ''; }
      }
      if (fid === 'BACK' || fid === 'BACK2' || fid === 'ACTIVATE') return fid;
      return null;
    }

    const data = getEarlyKeyboardDataForLayout(keyboardLayoutId);
    const bindings = (data && data.bindings) || EARLY_KEYBINDINGS;
    for (const id of ['ACTIVATE', 'BACK', 'BACK2']) {
      if (earlyBindingMatchesEvent(bindings[id], slot, key, event)) return id;
    }
    return null;
  }

  function resolveEarlyClickable(el) {
    if (!el || el.nodeType !== 1) return null;
    try {
      if (el.id === EARLY_HOVER_ID || el.closest?.(`#${EARLY_HOVER_ID}`)) return null;
    } catch { /* ignore */ }
    try {
      const specific = typeof el.closest === 'function' ? el.closest(EARLY_CLICKABLE_SEL) : null;
      if (!specific || specific === document.documentElement || specific === document.body) return null;
      return specific;
    } catch {
      return null;
    }
  }

  function earlyElementFromPoint(x, y) {
    if (!Number.isFinite(x) || !Number.isFinite(y)) return null;
    try {
      const stack = typeof document.elementsFromPoint === 'function'
        ? document.elementsFromPoint(x, y)
        : [document.elementFromPoint(x, y)];
      if (!stack || !stack.length) return null;
      for (const node of stack) {
        if (!node || node.nodeType !== 1) continue;
        if (node.id === EARLY_HOVER_ID) continue;
        return node;
      }
    } catch { /* ignore */ }
    try { return document.elementFromPoint(x, y); } catch { return null; }
  }

  function applyEarlyFocusChromeToHoverEl(target) {
    if (!earlyHoverEl) return;
    const green = earlyFocusChrome.focusColor === 'green';
    const p = green
      ? {
          border: EARLY_FOCUS_GREEN,
          shadow: EARLY_FOCUS_GREEN_SHADOW,
          shadowBright: EARLY_FOCUS_GREEN_SHADOW_BRIGHT,
          fill: EARLY_FOCUS_GREEN_FILL
        }
      : {
          border: EARLY_FOCUS_BLUE,
          shadow: EARLY_FOCUS_BLUE_SHADOW,
          shadowBright: EARLY_FOCUS_BLUE_SHADOW_BRIGHT,
          fill: EARLY_FOCUS_BLUE_FILL
        };
    const thickness = Math.min(Math.max(Number(earlyFocusChrome.rectangleThickness) || 3, 1), 16);
    try {
      earlyHoverEl.style.border = `${thickness}px solid ${p.border}`;
      earlyHoverEl.style.background = earlyFocusChrome.overlayFillEnabled === true ? p.fill : 'transparent';
      earlyHoverEl.style.boxShadow = earlyFocusChrome.overlayShadowEnabled === true
        ? `0 0 0 1px ${p.shadow}, 0 0 8px ${p.shadowBright}`
        : 'none';
    } catch { /* ignore */ }
    void target;
  }

  function ensureEarlyHoverEl() {
    if (isMainExtensionLoaded) return null;
    if (earlyHoverEl && earlyHoverEl.isConnected) return earlyHoverEl;
    try {
      const el = document.createElement('div');
      el.id = EARLY_HOVER_ID;
      el.setAttribute('aria-hidden', 'true');
      el.style.display = 'none';
      (document.body || document.documentElement)?.appendChild(el);
      earlyHoverEl = el;
      applyEarlyFocusChromeToHoverEl();
      return el;
    } catch {
      return null;
    }
  }

  function remountEarlyHoverEl() {
    if (!earlyHoverEl || isMainExtensionLoaded) return;
    try {
      const host = document.body || document.documentElement;
      if (host && earlyHoverEl.parentNode !== host) host.appendChild(earlyHoverEl);
    } catch { /* ignore */ }
  }

  function hideEarlyHover() {
    earlyHoverTarget = null;
    if (earlyHoverRaf) {
      try { cancelAnimationFrame(earlyHoverRaf); } catch { /* ignore */ }
      earlyHoverRaf = 0;
    }
    if (earlyHoverEl) {
      try {
        earlyHoverEl.style.display = 'none';
        earlyHoverEl.style.width = '0px';
        earlyHoverEl.style.height = '0px';
      } catch { /* ignore */ }
    }
  }

  function paintEarlyHover(target) {
    if (!target || !(target instanceof Element)) {
      hideEarlyHover();
      return;
    }
    if (target.tagName === 'IFRAME' || target.tagName === 'FRAME') {
      hideEarlyHover();
      return;
    }
    let rect;
    try { rect = target.getBoundingClientRect(); } catch {
      hideEarlyHover();
      return;
    }
    if (!rect || rect.width <= 0 || rect.height <= 0) {
      hideEarlyHover();
      return;
    }
    try {
      if (rect.width >= window.innerWidth * 0.95 && rect.height >= window.innerHeight * 0.95) {
        hideEarlyHover();
        return;
      }
    } catch { /* ignore */ }

    const el = ensureEarlyHoverEl();
    if (!el) return;
    earlyHoverTarget = target;
    applyEarlyFocusChromeToHoverEl(target);
    try {
      el.style.display = 'block';
      el.style.transform = `translate(${Math.round(rect.left)}px, ${Math.round(rect.top)}px)`;
      el.style.width = `${Math.round(rect.width)}px`;
      el.style.height = `${Math.round(rect.height)}px`;
    } catch { /* ignore */ }
  }

  function scheduleEarlyHoverUpdate() {
    if (earlyHoverRaf) return;
    earlyHoverRaf = requestAnimationFrame(() => {
      earlyHoverRaf = 0;
      try {
        if (isMainExtensionLoaded || !isExtensionEnabled) {
          hideEarlyHover();
          return;
        }
        if (!earlyPointerSeen) {
          hideEarlyHover();
          return;
        }
        const x = mousePosition.x;
        const y = mousePosition.y;
        if (!Number.isFinite(x) || !Number.isFinite(y)) {
          hideEarlyHover();
          return;
        }
        const clickable = resolveEarlyClickable(earlyElementFromPoint(x, y));
        paintEarlyHover(clickable);
      } catch {
        hideEarlyHover();
      }
    });
  }

  function handleEarlyScrollOrResize() {
    if (isMainExtensionLoaded || !isExtensionEnabled) return;
    scheduleEarlyHoverUpdate();
  }

  function startEarlyHoverTracking() {
    if (earlyScrollResizeListener) return;
    earlyScrollResizeListener = handleEarlyScrollOrResize;
    try {
      window.addEventListener('scroll', earlyScrollResizeListener, { passive: true, capture: true });
      window.addEventListener('resize', earlyScrollResizeListener, { passive: true });
    } catch { /* ignore */ }
    scheduleEarlyHoverUpdate();
  }

  function stopEarlyHoverTracking() {
    if (earlyScrollResizeListener) {
      try { window.removeEventListener('scroll', earlyScrollResizeListener, { capture: true }); } catch { /* ignore */ }
      try { window.removeEventListener('resize', earlyScrollResizeListener); } catch { /* ignore */ }
      earlyScrollResizeListener = null;
    }
    hideEarlyHover();
    if (earlyHoverEl) {
      try { earlyHoverEl.remove(); } catch { /* ignore */ }
      earlyHoverEl = null;
    }
  }

  function dispatchEarlyClickSequence(target, clientX, clientY) {
    if (!target) return;
    const common = {
      bubbles: true,
      cancelable: true,
      composed: true,
      view: window,
      clientX,
      clientY,
      button: 0,
      buttons: 1
    };
    const hasPointer = typeof window.PointerEvent === 'function';
    if (hasPointer) {
      const pCommon = { ...common, pointerId: 1, pointerType: 'mouse', isPrimary: true };
      try { target.dispatchEvent(new PointerEvent('pointerover', pCommon)); } catch { /* ignore */ }
      try { target.dispatchEvent(new PointerEvent('pointerenter', pCommon)); } catch { /* ignore */ }
      try { target.dispatchEvent(new PointerEvent('pointerdown', pCommon)); } catch { /* ignore */ }
    }
    try { target.dispatchEvent(new MouseEvent('mouseover', common)); } catch { /* ignore */ }
    try { target.dispatchEvent(new MouseEvent('mousedown', common)); } catch { /* ignore */ }
    const commonUp = { ...common, buttons: 0 };
    if (hasPointer) {
      const pUp = { ...commonUp, pointerId: 1, pointerType: 'mouse', isPrimary: true };
      try { target.dispatchEvent(new PointerEvent('pointerup', pUp)); } catch { /* ignore */ }
    }
    try { target.dispatchEvent(new MouseEvent('mouseup', commonUp)); } catch { /* ignore */ }
    try { target.dispatchEvent(new MouseEvent('click', commonUp)); } catch { /* ignore */ }
  }

  function activateEarlyClickableAt(clientX, clientY) {
    const under = earlyElementFromPoint(clientX, clientY);
    if (!under) return false;
    const activator = resolveEarlyClickable(under) || under;
    if (!activator || activator === document.documentElement || activator === document.body) return false;

    try {
      if (activator.tagName === 'A' && activator.href && typeof activator.click === 'function') {
        activator.click();
        return true;
      }
    } catch { /* ignore */ }

    try {
      const role = String(activator.getAttribute?.('role') || '').toLowerCase();
      if (
        (activator.tagName === 'BUTTON' || role === 'button' || activator.tagName === 'SUMMARY') &&
        typeof activator.click === 'function'
      ) {
        activator.click();
        return true;
      }
    } catch { /* ignore */ }

    try {
      const summary = activator.tagName === 'SUMMARY'
        ? activator
        : (typeof under.closest === 'function' ? under.closest('summary') : null);
      if (summary && typeof summary.click === 'function') {
        summary.click();
        return true;
      }
    } catch { /* ignore */ }

    try {
      if (typeof activator.click === 'function') {
        activator.click();
        return true;
      }
    } catch { /* ignore */ }
    dispatchEarlyClickSequence(activator, clientX, clientY);
    return true;
  }

  function performEarlyGoBack() {
    try {
      if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.sendMessage) {
        chrome.runtime.sendMessage({
          type: 'KP_TRANSIENT_ACTION',
          action: 'back',
          timestamp: Date.now()
        }, () => { void chrome.runtime.lastError; });
      }
    } catch { /* ignore */ }
    try {
      history.back();
    } catch {
      try {
        if (typeof chrome !== 'undefined' && chrome.runtime && chrome.runtime.sendMessage) {
          chrome.runtime.sendMessage({ type: 'KP_GO_BACK' }, () => { void chrome.runtime.lastError; });
        }
      } catch { /* ignore */ }
    }
  }

  /**
   * Check if element is clickable for early detection
   */
  function isClickableElement(element) {
    if (!element || element.nodeType !== Node.ELEMENT_NODE) return false;
    
    const tagName = element.tagName.toLowerCase();
    const clickableTags = ['a', 'button', 'input', 'select', 'textarea'];
    
    return clickableTags.includes(tagName) || 
           element.hasAttribute('onclick') ||
           element.getAttribute('role') === 'button' ||
           element.getAttribute('role') === 'link';
  }

  /**
   * Start early DOM observation for clickable elements
   */
  function startEarlyDOMObservation() {
    if (!window.MutationObserver) return;

    earlyObserver = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        // Check added nodes
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            // Check the node itself
            if (isClickableElement(node)) {
              earlyClickableElements.add(node);
            }
            
            // Check child elements (lightweight scan)
            const clickables = node.querySelectorAll?.('a, button, input, select, textarea, [role="button"], [role="link"]');
            if (clickables) {
              clickables.forEach(el => earlyClickableElements.add(el));
            }
            scheduleEarlyHoverUpdate();
          }
        });

        // Remove deleted nodes
        mutation.removedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            earlyClickableElements.delete(node);
          }
        });
      });
    });

    // Start observing
    earlyObserver.observe(document.documentElement || document, {
      childList: true,
      subtree: true
    });

    // Initial scan of existing elements
    const existingClickables = document.querySelectorAll('a, button, input, select, textarea, [role="button"], [role="link"]');
    existingClickables.forEach(el => earlyClickableElements.add(el));
  }

  /**
   * Handle early keyboard events for immediate responsiveness
   */
  function handleEarlyKeydown(event) {
    // Handle Alt+K toggle immediately for responsiveness - ALWAYS check this regardless of extension state
    // Check for Alt key (covers both left and right Alt) and K key (case insensitive)
    if ((event.altKey || event.code === 'AltRight') && (event.key === 'k' || event.key === 'K' || event.code === 'KeyK')) {
      event.preventDefault();
      // Send toggle message to background script
      if (typeof chrome !== 'undefined' && chrome.runtime) {
        chrome.runtime.sendMessage({ type: 'KP_TOGGLE_STATE' });
      }
      return; // Don't process this key further
    }

    if (!isExtensionEnabled) return;

    if (!isMainExtensionLoaded && !event.repeat && !isEarlyTypingContext(event)) {
      const actionId = resolveEarlyActionIdForEvent(event);
      if (actionId === 'BACK' || actionId === 'BACK2') {
        event.preventDefault();
        event.stopPropagation();
        try { event.stopImmediatePropagation(); } catch { /* ignore */ }
        performEarlyGoBack();
        return;
      }
      if (actionId === 'ACTIVATE') {
        event.preventDefault();
        event.stopPropagation();
        try { event.stopImmediatePropagation(); } catch { /* ignore */ }
        activateEarlyClickableAt(mousePosition.x, mousePosition.y);
        return;
      }
    }

    // Store key event for main extension
    pendingKeyEvents.push({
      key: event.key,
      code: event.code,
      timestamp: Date.now(),
      ctrlKey: event.ctrlKey,
      altKey: event.altKey,
      shiftKey: event.shiftKey,
      metaKey: event.metaKey
    });

    // Keep only recent events (last 5 seconds)
    const fiveSecondsAgo = Date.now() - 5000;
    pendingKeyEvents = pendingKeyEvents.filter(e => e.timestamp > fiveSecondsAgo);
  }

  /**
   * Start early keyboard event capture
   */
  function startEarlyKeyboardCapture() {
    if (keyboardListenersActive) return;
    
    document.addEventListener('keydown', handleEarlyKeydown, { 
      passive: false, 
      capture: true 
    });
    keyboardListenersActive = true;
  }

  /**
   * Stop early keyboard event capture
   */
  function stopEarlyKeyboardCapture() {
    if (!keyboardListenersActive) return;
    
    document.removeEventListener('keydown', handleEarlyKeydown, { capture: true });
    keyboardListenersActive = false;
  }

  /**
   * Initialize early injection
   */
  function initEarlyInjection() {
    setupMainLoadedHandoffListener();
    // Initialize early storage for faster state loading
    initEarlyStorage();
    
    // Inject CSS immediately for proper styling
    injectEarlyCSS();
    
    // Start early DOM observation
    startEarlyDOMObservation();
    
    // Start early keyboard capture for immediate responsiveness
    startEarlyKeyboardCapture();
    
    // Apply CSS cursor immediately
    const applyCursor = () => {
      if (document.documentElement || document.body) {
        // Re-inject CSS after DOM is ready to prevent override
        reInjectCSS();
        // Track the real pointer only. Seeding viewport-center made Click Element
        // hover outline a random mid-page clickable until document_idle handoff.
        startEarlyPointerListeners();
        startEarlyHoverTracking();
        // Ensure cursor is visible
        updateCursorVisibility();
        
        // Debug logging
        kpEarlyDebugLog('[KeyPilot Early] CSS cursor applied');
      } else {
        // Retry in next tick
        setTimeout(applyCursor, 1);
      }
    };

    applyCursor();
    setupStateListener();
  }

  /**
   * Expose early cursor API for main extension
   */
  window.KEYPILOT_EARLY = {
    getCursor: () => null, // No cursor element anymore
    getPosition: () => mousePosition,
    getClickableElements: () => Array.from(earlyClickableElements),
    getPendingKeyEvents: () => [...pendingKeyEvents],
    clearPendingKeyEvents: () => { pendingKeyEvents = []; },
    updatePosition: updateCursorPosition,
    /** Stamped walkthrough model (includes onEnter) for main-script fallback. */
    getOnboardingModel: () => {
      try {
        return typeof EARLY_ONBOARDING_MODEL === 'object' ? EARLY_ONBOARDING_MODEL : { slides: [] };
      } catch {
        return { slides: [] };
      }
    },
    setEnabled: (enabled) => {
      isExtensionEnabled = enabled;
      updateCursorVisibility();
      if (enabled && !isMainExtensionLoaded) {
        try { scheduleEarlyHoverUpdate(); } catch { /* ignore */ }
      }
    },
    cleanup: () => {
      // Remove CSS cursor
      if (document.documentElement) {
        try {
          document.documentElement.classList.remove(CURSOR_HIDDEN_CLASS);
          document.documentElement.style.removeProperty(CURSOR_VAR);
        } catch {}
        document.documentElement.style.cursor = '';
      }
      if (document.body) {
        document.body.style.cursor = '';
      }
      stopEarlyPointerListeners();
      stopEarlyKeyboardCapture();
      stopEarlyHoverTracking();
      if (earlyObserver) {
        earlyObserver.disconnect();
      }
    }
  };

  // Check extension state before initialization
  async function init() {
    setupMainLoadedHandoffListener();
    // Inject cursor CSS immediately so `checkExtensionState()` can apply the
    // cursor at document_start without waiting for the full early init.
    // NOTE: The rules are scoped to `html.kpv2-cursor-hidden` so they are inert unless enabled.
    injectEarlyCSS();

    // Stamp theme CSS + dataset immediately so fonts/tokens start before chrome exists.
    let themeReady = false;
    try {
      if (typeof applyEarlyTheme === 'function') {
        const cached = typeof peekCachedThemeId === 'function' ? peekCachedThemeId() : null;
        if (cached) {
          applyEarlyTheme(cached);
          themeReady = true;
        } else if (typeof ensureEarlyThemeStyles === 'function') {
          ensureEarlyThemeStyles();
          try {
            if (typeof stampEarlyKeyChrome === 'function' && typeof peekCachedThemeOverrides === 'function') {
              stampEarlyKeyChrome(peekCachedThemeOverrides());
            }
          } catch { /* ignore */ }
        }
      }
    } catch { /* ignore */ }

    // Resolve before any storage-driven Keyboard Reference paint so separate-window
    // Link Preview / Open Popover never flashes the panel.
    try {
      isPopoverOsWindow = await queryAmIPopoverWindow();
    } catch {
      isPopoverOsWindow = false;
    }

    // Onboarding + control strip shells should appear as early as possible to avoid UI pop-in.
    // The bundled content script will adopt this DOM and hydrate it later.
    setupEarlyOnboardingStorageSync();
    // Build shells immediately; only show them once a theme is known (cache or storage).
    try {
      ensureEarlyControlStripShell();
      if (themeReady) applyEarlyControlStripVisibility();
      // Build the matching Keyboard Reference shell in the same document_start
      // pass. Storage determines whether it is shown, but shell construction no
      // longer waits until after the control strip has painted.
      if (!isPopoverOsWindow) {
        ensureEarlyFloatingKeyboardHelpShell();
        if (themeReady) applyEarlyKeyboardHelpVisibility(keyboardHelpVisible);
      }
    } catch { /* ignore */ }
    await checkExtensionState();

    // Always start keyboard capture for Alt+K toggle, regardless of extension state
    startEarlyKeyboardCapture();

    if (isExtensionEnabled) {
      initEarlyInjection();
    } else {
      // Keep control strip available so On/Off can re-enable before main bundle loads.
      try {
        ensureEarlyControlStripShell();
        applyEarlyControlStripVisibility();
        setupControlStripStorageListener();
        setupStateListener();
      } catch { /* ignore */ }
      kpEarlyDebugLog('[KeyPilot Early] Extension is disabled, skipping early injection but keeping Alt+K capture active');
    }
  }
  
  // Start initialization
  init();

})();
