:focus-visible — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 :focus-visible</h1>
    <p class="pg-sub">
      Click a control below with your mouse, then press <code>Tab</code> to move between them
      with your keyboard instead. Toggle the mode to see the difference between
      <code>outline: none</code> alone and <code>:focus-visible</code>.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Mode</div>
      <div class="seg" id="modeSeg">
        <button aria-pressed="true" data-mode="fixed">The fix — :focus-visible</button>
        <button aria-pressed="false" data-mode="broken">The old way — outline: none</button>
      </div>
      <p class="hint">
        "The fix" shows a ring only when the browser decides focus should be visible (mostly keyboard).
        "The old way" removes it unconditionally, for everyone, including keyboard users.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Try it — click, then Tab</div>
      <div class="demo-row" id="demoRow">
        <button class="demo-el" id="elButton">Click me</button>
        <a class="demo-el" href="#" id="elLink" onclick="return false;">A link</a>
        <input class="demo-el" id="elInput" type="text" placeholder="Type here" />
      </div>
      <div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — click or Tab to a control above.</span>
      </div>
      <p class="hint" id="caption">
        Caption: watch what happens to the ring depending on how you got there.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.