#attachment_18450{display:none;}</style><style>#vd-products{
  --ink:#051b46; --ink-2:#34445a; --muted:#5d6a82; --line:#e7e5d3; --strip-line:#c9d3e4; --card:#ffffff; --soft:#eef2f8;
  position:relative; display:flex; align-items:center; gap:6px; height:42px;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink); line-height:1.4; -webkit-font-smoothing:antialiased;
}
#vd-products *,#vd-products *::before,#vd-products *::after{box-sizing:border-box}
#vd-products a{text-decoration:none}
#vd-products ul{list-style:none;margin:0;padding:0}

/* top links */
#vd-products .vdp-menu{display:flex;align-items:stretch;height:100%}
#vd-products .vdp-item{position:relative;display:flex}
#vd-products .vdp-link{position:relative;display:flex;align-items:center;gap:8px;padding:0 13px;height:100%;color:var(--ink);font:500 13.5px/1 Inter,sans-serif;white-space:nowrap;transition:color .2s ease}
#vd-products .vdp-link::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
#vd-products .vdp-ico{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c));box-shadow:0 3px 8px -3px var(--c),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
#vd-products .vdp-ico svg{width:11px;height:11px}
#vd-products .vdp-name{white-space:nowrap}
#vd-products .vdp-chev{width:10px;height:10px;color:var(--muted);transition:transform .3s ease}
#vd-products .vdp-item:hover .vdp-link,#vd-products .vdp-item:has(:focus-visible) .vdp-link{color:var(--c)}
#vd-products .vdp-item:hover .vdp-link::after,#vd-products .vdp-item:has(:focus-visible) .vdp-link::after{transform:scaleX(1)}
#vd-products .vdp-item:hover .vdp-ico,#vd-products .vdp-item:has(:focus-visible) .vdp-ico{transform:translateY(-1px) rotate(-6deg)}
#vd-products .vdp-item:hover .vdp-chev,#vd-products .vdp-item:has(:focus-visible) .vdp-chev{transform:rotate(180deg);color:var(--c)}

/* dropdown panel: grows out of the bar, then the contents rise in one after another */
#vd-products .vdp-panel{position:absolute;left:0;top:100%;z-index:9999;width:min(700px,calc(100vw - 32px));padding-top:8px;
  visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0 round 14px);
  transition:clip-path .45s cubic-bezier(.2,.7,.2,1),opacity .25s ease,visibility 0s linear .45s}
#vd-products .vdp-item:hover .vdp-panel,#vd-products .vdp-item:has(:focus-visible) .vdp-panel{visibility:visible;opacity:1;clip-path:inset(0 0 0 0 round 14px);transition-delay:.06s,.06s,0s}
/* without the script, the last items open from their right edge so nothing runs off screen */
#vd-products:not(.vdp-js) .vdp-item:nth-child(n+3) .vdp-panel{left:auto;right:0}
#vd-products.vdp-js .vdp-panel{left:var(--px,0px);right:auto}
/* narrower screens: a smaller panel so it always stays on screen */
@media (max-width:1200px){#vd-products .vdp-panel{width:min(620px,calc(100vw - 32px))}}
#vd-products .vdp-card{display:grid;grid-template-columns:250px 1fr;gap:22px;padding:14px 20px 14px 14px;border-radius:14px;background:var(--card);border:1px solid rgba(5,27,70,.08);
  box-shadow:0 1px 2px rgba(5,27,70,.05),0 30px 60px -22px rgba(5,27,70,.4)}

#vd-products .vdp-shot{position:relative;display:block;height:auto;min-height:236px;align-self:stretch;border-radius:10px;overflow:hidden;background:#2e3a4b}
#vd-products .vdp-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:.8;transition:transform .6s ease,opacity .3s ease}
#vd-products .vdp-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,27,70,0) 35%,rgba(5,20,45,.9))}
#vd-products .vdp-shot:hover img{transform:scale(1.05);opacity:.9}
#vd-products .vdp-shot-cover{background:#0f1b2d}
#vd-products .vdp-shot-cover img{object-fit:contain;object-position:center;padding:14px 14px 42px;opacity:1}
#vd-products .vdp-shot-cover::after{background:linear-gradient(180deg,rgba(5,27,70,0) 55%,rgba(5,20,45,.92))}
#vd-products .vdp-shot-foot{position:absolute;left:16px;right:14px;bottom:14px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px}
#vd-products .vdp-shot-foot b{display:block;font:600 17px/1.2 Inter,sans-serif;color:#fff}
#vd-products .vdp-shot-foot small{display:block;margin-top:3px;font:500 12.5px/1.35 Inter,sans-serif;color:#c9d3e2}
#vd-products .vdp-arrow{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:transform .3s ease}
#vd-products .vdp-arrow svg{width:15px;height:15px}
#vd-products .vdp-shot:hover .vdp-arrow{transform:rotate(-45deg)}

#vd-products .vdp-body{padding:6px 0 0;display:flex;flex-direction:column;min-width:0}
#vd-products .vdp-eyebrow{font:600 11px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
#vd-products .vdp-title{margin:9px 0 6px;font:700 19px/1.25 Inter,sans-serif;letter-spacing:-.015em;color:var(--ink)}
#vd-products .vdp-desc{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
#vd-products .vdp-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin:14px -10px 0}
#vd-products .vdp-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;color:var(--ink);font:500 14px/1.3 Inter,sans-serif;transition:background .2s ease,color .2s ease}
#vd-products .vdp-list a::after{content:"";flex:none;width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg) translateX(-4px);opacity:0;transition:opacity .2s ease,transform .2s ease}
#vd-products .vdp-list a:hover,#vd-products .vdp-list a:focus-visible{background:var(--soft);color:var(--c)}
#vd-products .vdp-list a:hover::after,#vd-products .vdp-list a:focus-visible::after{opacity:1;transform:rotate(45deg) translateX(0)}
#vd-products .vdp-cta{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:14px;border-top:1px solid var(--line)}
#vd-products .vdp-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:9px;background:var(--ink);color:#fff;font:600 13.5px/1 Inter,sans-serif;transition:background .2s ease,transform .2s ease}
#vd-products .vdp-btn svg{width:14px;height:14px;transition:transform .25s ease}
#vd-products .vdp-btn:hover{background:var(--c);color:#fff}
#vd-products .vdp-btn:hover svg{transform:translateX(3px)}
#vd-products .vdp-note{font-size:12.5px;color:var(--muted)}

@keyframes vdpIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes vdpImg{from{transform:scale(1.12)}to{transform:none}}
#vd-products .vdp-item:hover .vdp-body>*,#vd-products .vdp-item:hover .vdp-list li,
#vd-products .vdp-item:has(:focus-visible) .vdp-body>*,#vd-products .vdp-item:has(:focus-visible) .vdp-list li{animation:vdpIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(80ms + var(--d,0) * 35ms)}
#vd-products .vdp-item:hover .vdp-shot img,#vd-products .vdp-item:has(:focus-visible) .vdp-shot img{animation:vdpImg 1.1s cubic-bezier(.2,.7,.2,1) backwards}
#vd-products .vdp-list{animation:none!important}
#vd-products .vdp-body>:nth-child(2){--d:1}#vd-products .vdp-body>:nth-child(3){--d:2}
#vd-products .vdp-list li:nth-child(1){--d:3}#vd-products .vdp-list li:nth-child(2){--d:4}#vd-products .vdp-list li:nth-child(3){--d:5}
#vd-products .vdp-list li:nth-child(4){--d:6}#vd-products .vdp-list li:nth-child(5){--d:7}#vd-products .vdp-list li:nth-child(6){--d:8}
#vd-products .vdp-body>.vdp-cta{--d:9}

/* the header row is 90% of the screen, at most 1280px; the products tighten step by step so they always fit in it */
@media (min-width:901px) and (max-width:1439px){
  #vd-products .vdp-link{padding:0 10px}
  #vd-products .vdp-link::after{left:10px;right:10px}
}
@media (min-width:901px) and (max-width:1319px){
  #vd-products .vdp-long{display:none}
}
@media (min-width:901px) and (max-width:1099px){
  #vd-products .vdp-ico{display:none}
  #vd-products .vdp-link{padding:0 8px}
  #vd-products .vdp-link::after{left:8px;right:8px}
}
/* phones and tablets: the same row, scrolling sideways; tapping a name opens its page */
/* the theme wraps this in flex boxes that refuse to shrink below their content; let them shrink */
:has(> #vd-products),:has(> * > #vd-products){min-width:0;max-width:100%}
@media (max-width:900px),(hover:none){
  #vd-products .vdp-panel,#vd-products .vdp-chev{display:none}
}
@media (max-width:900px){
  #vd-products{height:42px;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  #vd-products::-webkit-scrollbar{display:none}
  #vd-products .vdp-menu{flex:none}
  #vd-products .vdp-item{flex:none}
  #vd-products .vdp-link{padding:0 11px;font-size:13.5px}
  #vd-products .vdp-name{padding-right:1px}
}
@media (prefers-reduced-motion:reduce){
  #vd-products *{animation:none!important;transition:none!important}
}</style><meta property="og:title" content="APEXlang Export Previewer"><meta property="og:url" content="apexlang-export-previewer.html"><meta property="og:description" content="Visit the post for more."><meta property="og:image" content="wp-content/uploads/2026/07/apexlang-export-previewer-explorer.webp"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="622"><meta name="twitter:image" content="wp-content/uploads/2026/07/apexlang-export-previewer-explorer.webp"><meta name="twitter:card" content="summary_large_image"><noscript><link rel='stylesheet' href='wp-content/themes/blocksy/static/bundle/no-scripts.min.css' type='text/css'></noscript><style id="ct-main-styles-inline-css">[data-prefix="single_page"] [class*="ct-container"] > article[class*="post"] {--has-boxed:var(--false);--has-wide:var(--true);}</style><meta name="wp-image-moderation-nonce" content="6617226d77"><meta name="wp-nonce" content="6617226d77"><link rel="preload" as="style" href="wp-content/plugins/code-prettify/prettify/prettify.css" /><link rel="icon" href="wp-content/uploads/2024/09/cropped-vinish-fairy-32x32.png" sizes="32x32" /><link rel="icon" href="wp-content/uploads/2024/09/cropped-vinish-fairy-192x192.png" sizes="192x192" /><link rel="apple-touch-icon" href="wp-content/uploads/2024/09/cropped-vinish-fairy-180x180.png" /><meta name="msapplication-TileImage" content="wp-content/uploads/2024/09/cropped-vinish-fairy-270x270.png" /><style id="wp-custom-css">.cookie-notification{bottom:90px !important;}.archive .entry-card{background-color:#e5e5d4;}pre, code{background-color: #e5e5d4 !important;}.search .entry-card{background-color:#e5e5d4;}.blog .entry-card{background-color:#e5e5d4;}a.skip-link.show-on-focus {
    display: none;
} .wpd-comment-text p {font-size:16px;} .ct-sidebar p a{color: #2563EB;}.home li#menu-item-18276 {
    display: none;
}.ct-media-container img, .ct-media-container picture {
    object-fit: contain;
}.sswp-btn {
    background-color: #6c6c65 !important;
}
.sswp-stat-icon svg {
    color: #6c6c65;
}.entry-tags.is-width-constrained {
    display: none;
} pre {line-height:1.5;border-radius:4px;white-space:pre !important;overflow-x:auto !important;} pre span {font-size:15px !important;}</style><style>.ai-viewports                 {--ai: 1;}
.ai-viewport-3                { display: none !important;}
.ai-viewport-2                { display: none !important;}
.ai-viewport-1                { display: inherit !important;}
.ai-viewport-0                { display: none !important;}
@media (min-width: 768px) and (max-width: 1279px) {
.ai-viewport-1                { display: none !important;}
.ai-viewport-2                { display: inherit !important;}
}
@media (max-width: 767px) {
.ai-viewport-1                { display: none !important;}
.ai-viewport-3                { display: inherit !important;}
}</style></head><body class="wp-singular page-template-default page page-id-23170 wp-custom-logo wp-embed-responsive wp-theme-blocksy wp-child-theme-blocksy-child grow-content-body" data-link="type-3" data-prefix="single_page" itemscope="itemscope" itemtype="https://schema.org/WebPage"><a class="skip-link screen-reader-text" href="#main">Skip to content</a><div id="main-container"><main id="main" class="site-main hfeed" tabindex="-1"><div
class="ct-container-full"
data-content="normal"		data-vertical-spacing="top:bottom"><article
id="post-23170"
class="post-23170 page type-page status-publish has-post-thumbnail hentry grow-content-main"><div class="entry-content is-layout-constrained">
<style>/* ==========================================================================
   APEX Export Explorer — explorer chrome styles
   All rules are scoped under .axp-root so the widget can live inside a
   WordPress page (Custom HTML block) without colliding with theme CSS.
   Height of the app: 100dvh by default, override with --axp-height.
   ========================================================================== */
  .axp-root {
    width: 100%;
    max-width: 100%;
  }

  .axp-root,
  .axp-root * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
.axp-drop svg {
    margin-bottom: 0px !important;
}
.axp-drop .axp-btn {padding:10px 12px !important;}
  .hero-section.is-width-constrained {
    margin-bottom: 0px;
  }

  header.entry-header {
    text-align: center;
  }

  .ct-container-full {
    padding: 0px;
  }

  .ct-share-box.is-width-constrained.ct-hidden-sm {
    max-width: 800px;
  }

  .axp-root {
    /* ---- Redwood Light-inspired palette ---- */
    --axp-bg: #f4f7fb;
    --axp-surface: #ffffff;
    --axp-surface-2: #f5f7fb;
    --axp-border: #dfe6ee;
    --axp-text: #1f2a37;
    --axp-muted: #5d6d7f;
    --axp-accent: #0b6cc8;
    --axp-accent-strong: #0758a4;
    --axp-accent-soft: #edf5ff;
    --axp-tree-hover: #f2f7ff;
    --axp-tree-active: #e5f0ff;
    --axp-code-bg: #f7f9fc;
    --axp-hl: #fff2c8;
    --axp-shadow: 0 10px 22px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04);
    --axp-danger: #d14343;

    display: flex;
    flex-direction: column;
    height: var(--axp-height, 100vh);
    height: var(--axp-height, 100dvh);
    min-height: 420px;
    width: 100%;
    overflow: hidden;
    background: var(--axp-bg);
    color: var(--axp-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid var(--axp-border);
    border-radius: 12px;
    box-shadow: var(--axp-shadow);
    position: relative;
  }

  .axp-root[data-axp-theme="dark"] {
    --axp-bg: #14181d;
    --axp-surface: #1c2229;
    --axp-surface-2: #232a32;
    --axp-border: #313a44;
    --axp-text: #e6ebf0;
    --axp-muted: #93a1b1;
    --axp-accent: #3d9df3;
    --axp-accent-soft: #16344d;
    --axp-tree-hover: #232e39;
    --axp-tree-active: #1d364d;
    --axp-code-bg: #10141a;
    --axp-hl: #4a3d10;
    --axp-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  }

  .axp-root svg {
    display: inline-block;
    vertical-align: middle;
  }

  .axp-root button {
    font: inherit;
    color: inherit;
  }

  button.axp-btn.axp-btn--primary.axp-pick-zip {
    color: #fff;
  }

  /* ---------- toolbar ---------- */
  .axp-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,247,251,0.96));
    border-bottom: 1px solid var(--axp-border);
    flex: 0 0 auto;
    min-height: 52px;
  }

  .axp-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
  }

  .axp-logo svg {
    color: var(--axp-accent);
  }

  .axp-appchip {
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--axp-accent-soft);
    color: var(--axp-accent);
    font-weight: 600;
    font-size: 12px;
    border-radius: 20px;
    padding: 4px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
  }

  .axp-appchip.axp-on {
    display: inline-flex;
  }

  .axp-spacer {
    flex: 1;
  }

  .axp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--axp-border);
    background: var(--axp-surface);
    color: var(--axp-text);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .12s ease;
  }

  .axp-btn:hover {
    background: var(--axp-surface-2);
  }

  .axp-btn--primary {
    background: linear-gradient(180deg, var(--axp-accent), var(--axp-accent-strong));
    border-color: var(--axp-accent-strong);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  }

  .axp-btn--primary:hover {
    background: linear-gradient(180deg, var(--axp-accent-strong), var(--axp-accent));
  }

  .axp-btn--icon {
    padding: 6px 8px;
  }

  .axp-burger {
    display: inline-flex;
  }

  /* ---------- body: sidebar + main ---------- */
  .axp-body {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
  }

  .axp-sidebar {
    width: 320px;
    min-width: 240px;
    max-width: 60%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--axp-surface);
    border-right: 1px solid var(--axp-border);
    min-height: 0;
  }

  .axp-search {
    padding: 8px;
    border-bottom: 1px solid var(--axp-border);
    flex: 0 0 auto;
    position: relative;
  }

  .axp-search input {
    width: 100%;
    border: 1px solid var(--axp-border);
    background: var(--axp-bg);
    color: var(--axp-text);
    border-radius: 6px;
    padding: 7px 10px 7px 32px;
    font-size: 13px;
    outline: none;
  }

  .axp-search input:focus {
    border-color: var(--axp-accent);
  }

  .axp-search svg {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--axp-muted);
    pointer-events: none;
  }

  .axp-tree {
    flex: 1;
    overflow: auto;
    padding: 6px 4px 20px;
    font-size: 13px;
    user-select: none;
  }

  /* tree nodes */
  .axp-node {}

  .axp-node-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px calc(6px + var(--axp-depth, 0) * 14px);
    border-radius: 5px;
    cursor: pointer;
    color: var(--axp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .axp-node-row:hover {
    background: var(--axp-tree-hover);
  }

  .axp-node-row.axp-active {
    background: var(--axp-tree-active);
    color: var(--axp-accent);
    font-weight: 600;
  }

  .axp-node-row .axp-caret {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--axp-muted);
    transition: transform .12s;
  }

  .axp-node.axp-open>.axp-node-row .axp-caret {
    transform: rotate(90deg);
  }

  .axp-node-row .axp-nicon {
    flex: 0 0 auto;
    color: var(--axp-muted);
  }

  .axp-node-row.axp-active .axp-nicon {
    color: var(--axp-accent);
  }

  .axp-node-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .axp-node-badge {
    margin-left: auto;
    background: var(--axp-surface-2);
    color: var(--axp-muted);
    font-size: 10.5px;
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 600;
  }

  .axp-node-kids {
    display: none;
  }

  .axp-node.axp-open>.axp-node-kids {
    display: block;
  }

  .axp-sect>.axp-node-row {
    font-weight: 700;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--axp-muted);
    margin-top: 6px;
  }

  /* search results */
  .axp-results {
    padding: 4px;
  }

  .axp-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
  }

  .axp-result:hover {
    background: var(--axp-tree-hover);
  }

  .axp-result .axp-r-kind {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--axp-accent);
    background: var(--axp-accent-soft);
    border-radius: 4px;
    padding: 2px 6px;
    flex: 0 0 auto;
  }

  .axp-result .axp-r-path {
    color: var(--axp-muted);
    font-size: 11px;
    margin-left: auto;
    white-space: nowrap;
  }

  .axp-noresults {
    color: var(--axp-muted);
    text-align: center;
    padding: 24px 12px;
    font-size: 13px;
  }

  /* ---------- main / tabs ---------- */
  .axp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  .axp-crumbline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 0;
    font-size: 12px;
    color: var(--axp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
  }

  .axp-crumbline b {
    color: var(--axp-text);
  }

  .axp-tabbar {
    display: flex;
    gap: 2px;
    padding: 6px 12px 0;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--axp-border);
  }

  .axp-tab {
    border: none;
    background: transparent;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--axp-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }

  .axp-tab:hover {
    color: var(--axp-text);
  }

  .axp-tab.axp-on {
    color: var(--axp-accent);
    border-bottom-color: var(--axp-accent);
  }

  .axp-panes {
    flex: 1;
    position: relative;
    min-height: 0;
  }

  .axp-pane {
    position: absolute;
    inset: 0;
    display: none;
    overflow: auto;
  }

  .axp-pane.axp-on {
    display: block;
  }

  .axp-pane--preview {
    overflow: hidden;
    background: var(--axp-bg);
  }

  .axp-pane--preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
  }

  /* ---------- details pane ---------- */
  .axp-details {
    padding: 16px 20px 40px;
    max-width: 1100px;
  }

  .axp-d-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }

  .axp-d-title h2 {
    font-size: 18px;
    font-weight: 700;
  }

  .axp-kind-chip {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--axp-accent);
    background: var(--axp-accent-soft);
    border-radius: 4px;
    padding: 3px 8px;
  }

  .axp-d-sub {
    color: var(--axp-muted);
    font-size: 12.5px;
    margin-bottom: 16px;
  }

  .axp-d-group {
    margin-bottom: 18px;
  }

  .axp-d-group h3 {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--axp-muted);
    margin-bottom: 6px;
  }

  .axp-d-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--axp-surface);
    border: 1px solid var(--axp-border);
    border-radius: 8px;
    overflow: hidden;
    font-size: 13px;
  }

  .axp-d-table td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--axp-border);
    vertical-align: top;
    word-break: break-word;
  }

  .axp-d-table tr:last-child td {
    border-bottom: none;
  }

  .axp-d-table td:first-child {
    width: 240px;
    color: var(--axp-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
  }

  .axp-d-table .axp-ref {
    color: var(--axp-accent);
    cursor: pointer;
  }

  .axp-d-table .axp-ref:hover {
    text-decoration: underline;
  }

  .axp-code {
    background: var(--axp-code-bg);
    border: 1px solid var(--axp-border);
    border-radius: 8px;
    padding: 12px 14px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre;
    color: var(--axp-text);
    max-height: 420px;
  }

  .axp-code-lang {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--axp-muted);
    margin-bottom: 4px;
  }

  .axp-child-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .axp-child-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--axp-surface);
    border: 1px solid var(--axp-border);
    border-radius: 7px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
  }

  .axp-child-row:hover {
    border-color: var(--axp-accent);
  }

  .axp-child-row .axp-c-type {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--axp-muted);
    flex: 0 0 110px;
  }

  .axp-child-row .axp-c-extra {
    margin-left: auto;
    color: var(--axp-muted);
    font-size: 12px;
  }

  /* ---------- source pane ---------- */
  .axp-source {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    padding: 10px 0 60px;
    background: var(--axp-code-bg);
    min-height: 100%;
  }

  .axp-src-line {
    display: flex;
    white-space: pre;
  }

  .axp-src-line.axp-src-hl {
    background: var(--axp-hl);
  }

  .axp-src-no {
    flex: 0 0 56px;
    text-align: right;
    padding-right: 14px;
    color: var(--axp-muted);
    user-select: none;
  }

  .axp-src-txt {
    flex: 1;
    padding-right: 16px;
  }

  /* ---------- welcome / drop zone ---------- */
  .axp-welcome {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--axp-bg);
    z-index: 5;
    padding: 20px;
    overflow: auto;
  }

  .axp-welcome.axp-hidden {
    display: none;
  }

  .axp-drop {
    width: min(560px, 100%);
    background: var(--axp-surface);
    border: 2px dashed var(--axp-border);
    border-radius: 14px;
    padding: 44px 32px;
    text-align: center;
    transition: border-color .15s, background .15s;
  }

  .axp-drop.axp-over {
    border-color: var(--axp-accent);
    background: var(--axp-accent-soft);
  }

  .axp-drop svg {
    color: var(--axp-accent);
    margin-bottom: 14px;
  }

  .axp-drop h2 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .axp-drop p {
    color: var(--axp-muted);
    font-size: 13.5px;
    margin-bottom: 18px;
  }

  .axp-drop .axp-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .axp-drop .axp-note {
    margin-top: 18px;
    font-size: 12px;
    color: var(--axp-muted);
  }

  .axp-drop .axp-err {
    margin-top: 14px;
    color: var(--axp-danger);
    font-size: 13px;
    display: none;
  }

  .axp-drop .axp-err.axp-on {
    display: block;
  }

  /* ---------- empty preview hint ---------- */
  .axp-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--axp-muted);
    gap: 10px;
    font-size: 13.5px;
  }

  /* ---------- scrollbars ---------- */
  .axp-root ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .axp-root ::-webkit-scrollbar-thumb {
    background: var(--axp-border);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  .axp-root ::-webkit-scrollbar-track {
    background: transparent;
  }

  /* ---------- responsive: narrow columns (WordPress content areas) ---------- */
  @media (max-width: 860px) {
    .axp-burger {
      display: inline-flex;
    }

    .axp-sidebar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 8;
      box-shadow: 4px 0 18px rgba(0, 0, 0, .18);
      transform: translateX(-105%);
      transition: transform .18s ease;
      width: min(320px, 85%);
      max-width: 85%;
    }

    .axp-root.axp-nav-open .axp-sidebar {
      transform: translateX(0);
    }

    .axp-appchip {
      max-width: 30%;
    }

    .axp-hide-sm {
      display: none;
    }
  }

  @media (min-width: 861px) {
    .axp-root.axp-nav-hidden .axp-sidebar {
      display: none;
    }
  }

  /* ---------- preview navigation history buttons ---------- */
  .axp-histbtns {
    display: inline-flex;
    gap: 4px;
    margin-right: 8px;
    flex: 0 0 auto;
  }

  .axp-histbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--axp-border);
    border-radius: 5px;
    background: var(--axp-surface);
    color: var(--axp-text);
    cursor: pointer;
  }

  .axp-histbtn:hover:not(:disabled) {
    border-color: var(--axp-accent);
    color: var(--axp-accent);
  }

  .axp-histbtn:disabled {
    opacity: .35;
    cursor: default;
  }

  .axp-crumbtxt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------- defend icons against WordPress theme CSS ----------
     Themes (e.g. Blocksy) often set `svg { color / fill / width }` globally,
     which recolors or hides the inline stroke icons. Force sane values. */
  .axp-root svg,
  .axp-root button svg,
  .axp-root .axp-btn svg,
  .axp-root .axp-histbtn svg {
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: none !important;
    transform: none;
  }

  .axp-root .axp-logo svg {
    color: var(--axp-accent) !important;
  }

  .axp-root .axp-btn--primary svg {
    color: #fff !important;
  }

  /* WP themes (Blocksy etc.) force their own button text color —
     primary buttons (Save, Choose ZIP, I understand, Apply) must stay white */
  .axp-root .axp-btn--primary,
  .axp-root .axp-btn--primary span,
  .axp-root button.axp-btn--primary {
    color: #fff !important;
  }

  .axp-drop .axp-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  /* ---------- editing UI: edit-mode toggle + undo / redo / save ---------- */
  .axp-modebtn {
    display: none;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
  }

  .axp-root.axp-loaded .axp-modebtn {
    display: inline-flex;
  }

  .axp-editbtns {
    display: none;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
  }

  /* edit tools appear only in edit mode */
  .axp-root.axp-loaded.axp-edit-mode .axp-editbtns {
    display: inline-flex;
  }

  /* ---------- editable details ---------- */
  .axp-edit-cell {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .axp-edit-inp {
    flex: 1;
    min-width: 120px;
    border: 1px solid var(--axp-border);
    background: var(--axp-bg);
    color: var(--axp-text);
    border-radius: 6px;
    padding: 6px 9px;
    font: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color .12s, box-shadow .12s, background .12s;
  }

  .axp-edit-inp:hover {
    border-color: var(--axp-accent-soft);
  }

  .axp-edit-inp:focus {
    border-color: var(--axp-accent);
    background: var(--axp-surface);
    box-shadow: 0 0 0 3px var(--axp-accent-soft);
  }

  .axp-ref-jump {
    border: none;
    background: none;
    color: var(--axp-accent);
    cursor: pointer;
    padding: 2px;
    flex: 0 0 auto;
  }

  .axp-ro-hint {
    color: var(--axp-muted);
    font-size: 11px;
  }

  .axp-edit-code {
    width: 100%;
    background: var(--axp-code-bg);
    border: 1px solid var(--axp-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--axp-text);
    resize: vertical;
    white-space: pre;
    outline: none;
  }

  .axp-edit-code:focus {
    border-color: var(--axp-accent);
  }

  /* ---------- editable source tab ---------- */
  .axp-pane[data-pane="source"] {
    display: none;
    flex-direction: column;
    overflow: hidden;
  }

  .axp-pane[data-pane="source"].axp-on {
    display: flex;
  }

  .axp-pane[data-pane="source"] .axp-source {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
  }

  .axp-editbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--axp-border);
    background: var(--axp-surface);
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--axp-muted);
  }

  .axp-editbar b {
    color: var(--axp-text);
  }

  .axp-editbar-sp {
    flex: 1;
  }

  .axp-src-edit {
    flex: 1;
    width: 100%;
    border: none;
    resize: none;
    background: var(--axp-code-bg);
    color: var(--axp-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    padding: 12px 16px;
    outline: none;
    white-space: pre;
    tab-size: 4;
  }

  /* ---------- side property palette (over the preview) ---------- */
  .axp-palette {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88%);
    background: var(--axp-surface);
    border-left: 1px solid var(--axp-border);
    box-shadow: -8px 0 24px rgba(16, 24, 40, .14);
    display: none;
    flex-direction: column;
    z-index: 7;
  }

  .axp-root.axp-palette-open .axp-palette {
    display: flex;
  }

  .axp-palette-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--axp-border);
    background: linear-gradient(180deg, var(--axp-surface-2), var(--axp-surface));
    flex: 0 0 auto;
  }

  .axp-palette-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    flex: 1;
  }

  .axp-palette-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .axp-palette-x {
    flex: 0 0 auto;
  }

  .axp-palette-body {
    flex: 1;
    overflow: auto;
    padding: 10px 10px 30px;
    background: var(--axp-bg);
  }

  /* palette shows properties stacked (label above field) so the narrow
     panel stays readable and every field clearly looks editable.
     Each property group is a card on the tinted panel background so the
     sections are visually separated. */
  .axp-palette-body .axp-d-sub {
    margin: 2px 4px 12px;
    font-size: 11px;
  }

  .axp-palette-body .axp-d-group {
    margin-bottom: 10px;
    background: var(--axp-surface);
    border: 1px solid var(--axp-border);
    border-radius: 9px;
    padding: 0 12px 12px;
    overflow: hidden;
  }

  .axp-palette-body .axp-d-group h3 {
    position: sticky;
    top: 0;
    background: var(--axp-surface-2);
    color: var(--axp-accent);
    padding: 8px 12px 7px;
    margin: 0 -12px 10px;
    z-index: 1;
    border-bottom: 1px solid var(--axp-border);
  }

  .axp-palette-body .axp-d-table,
  .axp-palette-body .axp-d-table tbody,
  .axp-palette-body .axp-d-table tr,
  .axp-palette-body .axp-d-table td {
    display: block;
    width: auto;
    border: none;
    padding: 0;
  }

  .axp-palette-body .axp-d-table {
    background: transparent;
  }

  .axp-palette-body .axp-d-table tr {
    margin-bottom: 11px;
  }

  .axp-palette-body .axp-d-table td:first-child {
    width: auto;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--axp-muted);
    margin-bottom: 4px;
    padding: 0;
  }

  .axp-palette-body .axp-edit-inp {
    width: 100%;
    background: var(--axp-surface);
  }

  .axp-palette-body .axp-edit-code {
    margin-top: 2px;
  }

  .axp-palette-body .axp-child-list {
    gap: 5px;
  }

  /* ---------- download confirmation modal ---------- */
  .axp-modal {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(16, 24, 32, .5);
    padding: 20px;
  }

  .axp-modal.axp-on {
    display: flex;
  }

  .axp-modal-card {
    background: var(--axp-surface);
    border: 1px solid var(--axp-border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
    width: min(560px, 100%);
    max-height: 100%;
    overflow: auto;
    padding: 22px 24px;
  }

  .axp-modal-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .axp-modal-card h3 svg {
    color: #e0730f;
  }

  .axp-modal-card p {
    font-size: 13.5px;
    margin-bottom: 10px;
    color: var(--axp-text);
  }

  .axp-modal-card ul {
    margin: 0 0 12px 20px;
    font-size: 13px;
    color: var(--axp-text);
  }

  .axp-modal-card li {
    margin-bottom: 5px;
  }

  .axp-modal-disclaimer {
    font-size: 12px !important;
    color: var(--axp-muted) !important;
    border-top: 1px solid var(--axp-border);
    padding-top: 10px;
  }

  .axp-modal-btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
  }

  /* ---------- validation panel ---------- */
  .axp-validate {
    position: absolute;
    inset: 0;
    z-index: 55;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(16, 24, 32, .5);
    padding: 20px;
  }

  .axp-validate.axp-on {
    display: flex;
  }

  .axp-validate-card {
    background: var(--axp-surface);
    border: 1px solid var(--axp-border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .3);
    width: min(680px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .axp-validate-head {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--axp-border);
    flex: 0 0 auto;
  }

  .axp-validate-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    flex: 1;
  }

  .axp-validate-title svg {
    color: var(--axp-accent);
  }

  .axp-validate-body {
    overflow: auto;
    padding: 12px 16px;
  }

  .axp-validate-summary {
    font-size: 13.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .axp-v-fixall {
    margin-left: auto;
  }

  .axp-v-fix {
    flex: 0 0 auto;
    border: 1px solid var(--axp-accent);
    background: var(--axp-accent-soft);
    color: var(--axp-accent);
    font-weight: 600;
    font-size: 12px;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
  }

  .axp-v-fix:hover {
    background: var(--axp-accent);
    color: #fff;
  }

  .axp-v-fixed {
    border: 1px solid rgba(63, 158, 88, .4);
    background: rgba(63, 158, 88, .08);
    border-radius: 9px;
    padding: 10px 12px;
    margin-bottom: 12px;
  }

  .axp-v-fixed-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #3f9e58;
    margin-bottom: 8px;
  }

  .axp-v-fixed-head svg {
    color: #3f9e58;
  }

  .axp-v-fixed-row {
    padding: 6px 0;
    border-top: 1px solid rgba(63, 158, 88, .18);
  }

  .axp-v-fixed-msg {
    font-size: 12.5px;
    color: var(--axp-text);
  }

  .axp-v-fixed-msg code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    background: var(--axp-code-bg);
    border-radius: 4px;
    padding: 1px 5px;
  }

  .axp-v-fixed-loc {
    font-size: 11px;
    color: var(--axp-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    margin-top: 2px;
  }

  .axp-v-ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #3f9e58;
    font-weight: 600;
  }

  .axp-v-e {
    color: var(--axp-danger);
  }

  .axp-v-w {
    color: #b7791f;
  }

  .axp-v-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .axp-v-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--axp-border);
    border-radius: 8px;
    cursor: pointer;
  }

  .axp-v-item:hover {
    border-color: var(--axp-accent);
    background: var(--axp-tree-hover);
  }

  .axp-v-sev {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 4px;
    padding: 3px 7px;
  }

  .axp-v-sev--error {
    background: rgba(214, 59, 37, .13);
    color: var(--axp-danger);
  }

  .axp-v-sev--warning {
    background: rgba(183, 121, 31, .15);
    color: #b7791f;
  }

  .axp-v-main {
    flex: 1;
    min-width: 0;
  }

  .axp-v-msg {
    font-size: 13px;
    color: var(--axp-text);
  }

  .axp-v-loc {
    font-size: 11.5px;
    color: var(--axp-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    margin-top: 2px;
  }

  .axp-v-go {
    color: var(--axp-muted);
    flex: 0 0 auto;
  }

  .axp-validate-foot {
    flex: 0 0 auto;
    padding: 10px 16px;
    border-top: 1px solid var(--axp-border);
    font-size: 11.5px;
    color: var(--axp-muted);
    background: var(--axp-surface-2);
  }