:where() specificity sandbox — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 The selector built to lose</h1>
    <p class="pg-sub">
      Two real CSS rules are fighting over the button below. Toggle whether the library
      wraps its rule in <code>:where()</code>, and watch who actually wins — this is your
      browser applying real cascade rules, not a simulation.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <label class="toggle">
          <input type="checkbox" id="wrapWhere" /><span class="switch"></span>
          <span>Library wraps its selector in <code>:where()</code></span>
        </label>
        <label class="toggle" style="margin-left:6px">
          <input type="checkbox" id="forceImportant" /><span class="switch"></span>
          <span>Your override adds <code>!important</code></span>
        </label>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="war">Preset: the war (both off)</button>
        <button class="btn sm" data-preset="peace">Preset: the fix (:where() on)</button>
      </div>
      <p class="hint" style="margin-top:10px">
        The library always paints the button <strong>crimson</strong> via a selector nested four
        levels deep. You always try to paint it <strong>teal</strong> with a single class,
        loaded after the library's CSS.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="demo-card">
        <button class="demo-btn" id="demoBtn">Save changes</button>
      </div>

<div class="spec-row">
        <span class="spec-name">Library rule — <code>.dashboard .card .card-header .button</code> (or <code>:where(...)</code> version)</span>
        <span class="spec-val" id="libSpec">0-4-0</span>
      </div>
      <div class="spec-row">
        <span class="spec-name">Your override — <code>.button</code><span id="importantTag"></span></span>
        <span class="spec-val" id="yourSpec">0-1-0</span>
      </div>

<div class="status" id="status" style="margin-top:14px">
        <span class="dot bad" id="dot"></span>
        <span id="statusText">Crimson wins — your teal override is out-specified.</span>
      </div>
      <p class="hint" id="hint">
        Flip the <code>:where()</code> toggle above. Wrapping the library's nested selector
        collapses its specificity to match its lone class, so your one-class override finally
        ties — and a tie is decided by source order, which is you, loaded last.
      </p>
    </div>
  </div>

preview

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