forced-colors mode — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Does your custom UI survive forced-colors mode?</h1>
    <p class="pg-sub">
      Flip the switch below to simulate Windows High Contrast Mode, using the real
      system colors the browser falls back to — no OS setting required. Watch the
      left column (no border, just background + shadow) go blank, while the right
      column (same look, plus one extra CSS rule) stays visible.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Mode</div>
      <div class="btn-row">
        <label class="toggle">
          <input type="checkbox" id="forceToggle" />
          <span class="switch"></span>
          <span>Simulate <code>forced-colors: active</code></span>
        </label>
        <button class="btn ghost sm" id="toggleChecked">Toggle checked state</button>
      </div>
      <p class="hint" id="modeHint">
        Normal mode — every color here is exactly what the CSS declares.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Same styles, one difference</div>
      <div class="stage">
        <div class="card">
          <div class="card-label">❌ No real border (background + box-shadow only)</div>
          <div class="widget-row">
            <button class="fake-btn">Submit</button>
            <span class="fake-check" id="fakeCheck">✓</span>
            <span class="fake-badge">NEW</span>
          </div>
          <p class="verdict bad" id="fakeVerdict">Looks fine right now — try the toggle.</p>
        </div>
        <div class="card">
          <div class="card-label">✅ <code>border: 1px solid transparent</code> added</div>
          <div class="widget-row">
            <button class="fixed-btn">Submit</button>
            <span class="fixed-check" id="fixedCheck">✓</span>
            <span class="fixed-badge">NEW</span>
          </div>
          <p class="verdict good" id="fixedVerdict">Looks identical right now — try the toggle.</p>
        </div>
      </div>
    </div>

<div class="status" id="statusBox" style="margin-top:4px">
      <span class="dot info" id="dot"></span>
      <span id="statusText">Everything above is rendering with ordinary author CSS.</span>
    </div>
  </div>

preview

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