---
/** Marketing / live-mode demo global bar. Mirrors live-browser.js initGlobalBar. */
---
<div class="live-demo-gbar" data-demo-gbar>
  <span class="live-demo-gbar-brand" role="img" aria-label="Impeccable live mode">
    <svg class="live-demo-gbar-brand-mark" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"></path>
      <path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"></path>
    </svg>
  </span>
  <div class="live-demo-gbar-inner">
    <button type="button" class="live-demo-gbar-btn is-active" data-demo-gbar-pick aria-label="Pick element">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><line x1="22" y1="12" x2="18" y2="12"></line><line x1="6" y1="12" x2="2" y2="12"></line><line x1="12" y1="6" x2="12" y2="2"></line><line x1="12" y1="22" x2="12" y2="18"></line></svg>
      <span class="live-demo-gbar-btn-label">Pick</span>
    </button>
    <button type="button" class="live-demo-gbar-btn" aria-label="Insert new element">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14"></path><path d="M5 12h14"></path></svg>
      <span class="live-demo-gbar-btn-label">Insert</span>
    </button>
    <button type="button" class="live-demo-gbar-btn" aria-label="Detect anti-patterns">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
      <span class="live-demo-gbar-btn-label">Detect</span>
    </button>
    <button type="button" class="live-demo-gbar-btn" aria-label="Toggle DESIGN.md panel">
      <span class="live-demo-gbar-dmd" aria-hidden="true">
        <span></span><span></span><span></span><span></span>
      </span>
      <span class="live-demo-gbar-btn-label live-demo-gbar-btn-label--mono">DESIGN.md</span>
    </button>
    <div class="live-demo-gbar-chat" data-demo-gbar-chat data-expanded="false" title="Steer the page">
      <span class="live-demo-gbar-chat-icon" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
      </span>
      <span class="live-demo-gbar-chat-hint">Steer</span>
      <input class="live-demo-gbar-chat-input" type="text" placeholder="Steer the page…" aria-label="Steer the page" tabindex="-1" />
      <button type="button" class="live-demo-gbar-chat-voice" aria-label="Voice input">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
      </button>
    </div>
    <button type="button" class="live-demo-gbar-x" aria-label="Exit live mode">
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><line x1="3" y1="3" x2="11" y2="11"></line><line x1="11" y1="3" x2="3" y2="11"></line></svg>
    </button>
  </div>
</div>