diff --git a/_config_theme.yml b/_config_theme.yml
index 6a79789a..921673ce 100644
--- a/_config_theme.yml
+++ b/_config_theme.yml
@@ -25,6 +25,7 @@ navbar-links:
     - Support: "support"
   Tools:
     - Gamepad Tester: "gamepad-tester"
+    - Mouse Tester: "mouse-tester"
   Downloads:
     - Packages: "https://app.lizardbyte.dev/packages"
     - Homebrew: "https://github.com/LizardByte/homebrew-homebrew"
diff --git a/_includes/mouse-tester.svg b/_includes/mouse-tester.svg
new file mode 100644
index 00000000..b5e12f02
--- /dev/null
+++ b/_includes/mouse-tester.svg
@@ -0,0 +1,60 @@
+<svg class="mouse-visual-svg" viewBox="0 0 360 440" aria-hidden="true" focusable="false">
+    <defs>
+        <linearGradient id="mouse-shell-gradient" x1="0" x2="1" y1="0" y2="1">
+            <stop offset="0" class="mouse-shell-highlight"></stop>
+            <stop offset="1" class="mouse-shell-shadow"></stop>
+        </linearGradient>
+        <filter id="mouse-shell-shadow" x="-20%" y="-15%" width="140%" height="145%">
+            <feDropShadow dx="0" dy="10" stdDeviation="12" flood-color="#000" flood-opacity="0.2"></feDropShadow>
+        </filter>
+    </defs>
+
+    <path
+        class="mouse-svg-shell"
+        d="M180 18C106 18 58 70 58 144V292C58 373 106 422 180 422S302 373 302 292V144C302 70 254 18 180 18Z"
+        filter="url(#mouse-shell-shadow)"
+    ></path>
+
+    <g class="mouse-svg-control" data-mouse-button="0">
+        <path class="mouse-svg-button-surface" d="M174 32C112 35 70 80 70 144V164H174V32Z"></path>
+    </g>
+    <g class="mouse-svg-control" data-mouse-button="2">
+        <path class="mouse-svg-button-surface" d="M186 32C248 35 290 80 290 144V164H186V32Z"></path>
+    </g>
+
+    <path class="mouse-svg-seam" d="M180 31V164M70 164H290"></path>
+
+    <g class="mouse-svg-control mouse-svg-wheel" data-mouse-button="1">
+        <rect class="mouse-svg-button-surface" x="160" y="67" width="40" height="82" rx="20"></rect>
+        <path class="mouse-svg-button-detail" d="M180 82V94M180 105V117M180 128V136"></path>
+    </g>
+
+    <g class="mouse-svg-scroll-indicator" data-scroll-direction="up">
+        <path class="mouse-svg-scroll-arrow" d="M180 36L166 53H174V63H186V53H194L180 36Z"></path>
+    </g>
+    <g class="mouse-svg-scroll-indicator" data-scroll-direction="down">
+        <path class="mouse-svg-scroll-arrow" d="M180 180L194 163H186V153H174V163H166L180 180Z"></path>
+    </g>
+    <g class="mouse-svg-scroll-indicator" data-scroll-direction="left">
+        <path class="mouse-svg-scroll-arrow" d="M124 108L141 94V102H153V114H141V122L124 108Z"></path>
+    </g>
+    <g class="mouse-svg-scroll-indicator" data-scroll-direction="right">
+        <path class="mouse-svg-scroll-arrow" d="M236 108L219 122V114H207V102H219V94L236 108Z"></path>
+    </g>
+
+    <g class="mouse-svg-side-button-shadow" aria-hidden="true">
+        <rect x="39" y="188" width="48" height="40" rx="13"></rect>
+        <rect x="39" y="238" width="48" height="40" rx="13"></rect>
+    </g>
+    <g class="mouse-svg-control" data-mouse-button="4">
+        <rect class="mouse-svg-button-surface" x="42" y="185" width="42" height="38" rx="12"></rect>
+        <path class="mouse-svg-button-detail" d="M57 197L69 204L57 211"></path>
+    </g>
+    <g class="mouse-svg-control" data-mouse-button="3">
+        <rect class="mouse-svg-button-surface" x="42" y="235" width="42" height="38" rx="12"></rect>
+        <path class="mouse-svg-button-detail" d="M69 247L57 254L69 261"></path>
+    </g>
+
+    <path class="mouse-svg-accent" d="M180 190V381"></path>
+    <path class="mouse-svg-base-highlight" d="M89 306C101 360 132 389 180 389S259 360 271 306"></path>
+</svg>
diff --git a/_sass/styles.scss b/_sass/styles.scss
index 6091c1a2..9d2dcc7f 100644
--- a/_sass/styles.scss
+++ b/_sass/styles.scss
@@ -1140,6 +1140,610 @@ table tr:nth-child(2n) {
   }
 }
 
+/* Mouse tester */
+.mouse-tester .container {
+  max-width: 82rem;
+}
+
+.mouse-tester-header {
+  max-width: 52rem;
+}
+
+.mouse-kicker,
+.mouse-panel-eyebrow {
+  color: var(--link-col);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.mouse-kicker {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.45rem;
+}
+
+.mouse-status {
+  align-items: center;
+  background-color: var(--navbar-col);
+  border: 1px solid var(--navbar-border-col);
+  border-left-width: 0.3rem;
+  border-radius: 0.75rem;
+  color: var(--text-col);
+  display: flex;
+  gap: 0.75rem;
+  margin-inline: auto;
+  max-width: 46rem;
+  padding: 0.8rem 1rem;
+  text-align: left;
+}
+
+.mouse-status.alert-warning {
+  border-left-color: var(--bs-warning);
+}
+
+.mouse-status.alert-success {
+  border-left-color: var(--bs-success);
+}
+
+.mouse-status.alert-danger {
+  border-left-color: var(--bs-danger);
+}
+
+.mouse-status-indicator {
+  background-color: var(--bs-warning);
+  border-radius: 50%;
+  box-shadow: 0 0 0 0.3rem rgba(var(--bs-warning-rgb), 0.15);
+  flex: 0 0 auto;
+  height: 0.65rem;
+  width: 0.65rem;
+}
+
+.mouse-status.alert-success .mouse-status-indicator {
+  animation: mouse-status-pulse 2s ease-out infinite;
+  background-color: var(--bs-success);
+  box-shadow: 0 0 0 0.3rem rgba(var(--bs-success-rgb), 0.15);
+}
+
+.mouse-status.alert-danger .mouse-status-indicator {
+  background-color: var(--bs-danger);
+  box-shadow: 0 0 0 0.3rem rgba(var(--bs-danger-rgb), 0.15);
+}
+
+@keyframes mouse-status-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.12);
+  }
+  50% {
+    box-shadow: 0 0 0 0.5rem rgba(var(--bs-success-rgb), 0);
+  }
+}
+
+.mouse-privacy-note {
+  font-size: 0.78rem;
+}
+
+.mouse-inline-notice {
+  align-items: flex-start;
+  background-color: rgba(var(--bs-warning-rgb), 0.1);
+  border: 1px solid rgba(var(--bs-warning-rgb), 0.3);
+  border-radius: 0.75rem;
+  display: flex;
+  font-size: 0.82rem;
+  gap: 0.55rem;
+  padding: 0.8rem;
+}
+
+.mouse-browser-warning {
+  margin-inline: auto;
+  max-width: 46rem;
+}
+
+.mouse-browser-warning[hidden] {
+  display: none;
+}
+
+.mouse-browser-warning a {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+  text-decoration: underline;
+}
+
+.mouse-workspace {
+  margin-top: 1.5rem !important;
+}
+
+.mouse-panel {
+  background-color: var(--navbar-col);
+  border: 1px solid var(--navbar-border-col);
+  border-radius: 1rem;
+  box-shadow: 0 0.35rem 1.25rem rgba(0, 0, 0, 0.06);
+  color: var(--text-col);
+  overflow: hidden;
+}
+
+[data-bs-theme="dark"] .mouse-panel {
+  box-shadow: 0 0.35rem 1.25rem rgba(0, 0, 0, 0.2);
+}
+
+.mouse-panel-header {
+  align-items: center;
+  border-bottom: 1px solid var(--navbar-border-col);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+}
+
+.mouse-panel-body {
+  padding: 1.25rem;
+}
+
+.mouse-live-badge {
+  align-items: center;
+  background-color: rgba(var(--bs-success-rgb), 0.12);
+  border: 1px solid rgba(var(--bs-success-rgb), 0.35);
+  border-radius: 999px;
+  color: var(--bs-success);
+  display: inline-flex;
+  font-size: 0.72rem;
+  font-weight: 700;
+  gap: 0.4rem;
+  padding: 0.25rem 0.6rem;
+  text-transform: uppercase;
+}
+
+.mouse-live-badge > span {
+  background-color: currentColor;
+  border-radius: 50%;
+  height: 0.45rem;
+  width: 0.45rem;
+}
+
+.mouse-visual-body {
+  background-image: radial-gradient(circle at center, rgba(var(--bs-primary-rgb), 0.08), transparent 62%);
+  height: calc(100% - 4.25rem);
+  min-height: 31rem;
+  padding: 0;
+}
+
+.mouse-capture-surface {
+  align-items: center;
+  cursor: crosshair;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  min-height: inherit;
+  overflow: hidden;
+  padding: 1.25rem;
+  position: relative;
+  user-select: none;
+}
+
+.mouse-capture-surface:focus-visible {
+  box-shadow: inset 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+  outline: 0;
+}
+
+.mouse-visual-svg {
+  display: block;
+  height: auto;
+  max-height: 23rem;
+  max-width: 20rem;
+  overflow: visible;
+  pointer-events: none;
+  width: min(70%, 20rem);
+}
+
+.mouse-shell-highlight {
+  stop-color: var(--navbar-col);
+}
+
+.mouse-shell-shadow {
+  stop-color: var(--footer-col);
+}
+
+.mouse-svg-shell {
+  fill: url("#mouse-shell-gradient");
+  stroke: var(--navbar-border-col);
+  stroke-width: 4;
+}
+
+.mouse-svg-button-surface {
+  fill: var(--footer-col);
+  stroke: var(--navbar-border-col);
+  stroke-linejoin: round;
+  stroke-width: 3;
+  transition: fill 70ms linear, filter 70ms linear, stroke 70ms linear;
+}
+
+.mouse-svg-control.is-active .mouse-svg-button-surface {
+  fill: var(--bs-primary);
+  filter: drop-shadow(0 0 0.8rem rgba(var(--bs-primary-rgb), 0.8));
+  stroke: var(--bs-primary);
+}
+
+.mouse-svg-seam,
+.mouse-svg-accent,
+.mouse-svg-base-highlight {
+  fill: none;
+  stroke-linecap: round;
+}
+
+.mouse-svg-seam {
+  stroke: var(--navbar-border-col);
+  stroke-width: 3;
+}
+
+.mouse-svg-accent {
+  opacity: 0.5;
+  stroke: var(--navbar-border-col);
+  stroke-width: 2;
+}
+
+.mouse-svg-base-highlight {
+  opacity: 0.35;
+  stroke: var(--footer-text-col);
+  stroke-width: 2;
+}
+
+.mouse-svg-button-detail {
+  fill: none;
+  pointer-events: none;
+  stroke: var(--footer-text-col);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 4;
+  transition: stroke 70ms linear;
+}
+
+.mouse-svg-control.is-active .mouse-svg-button-detail {
+  stroke: #fff;
+}
+
+.mouse-svg-scroll-indicator {
+  opacity: 0;
+  transition: opacity 70ms linear;
+}
+
+.mouse-svg-scroll-indicator.is-active {
+  filter: drop-shadow(0 0 0.7rem rgba(var(--bs-primary-rgb), 0.9));
+  opacity: 1;
+}
+
+.mouse-svg-scroll-arrow {
+  fill: var(--bs-primary);
+  pointer-events: none;
+  stroke: var(--page-col);
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.mouse-svg-side-button-shadow {
+  fill: rgba(0, 0, 0, 0.18);
+}
+
+.mouse-capture-instructions {
+  background-color: var(--footer-col);
+  border: 1px solid var(--navbar-border-col);
+  border-radius: 999px;
+  color: var(--footer-text-col);
+  font-size: 0.78rem;
+  margin-top: 1rem;
+  max-width: 34rem;
+  padding: 0.45rem 0.85rem;
+  text-align: center;
+}
+
+.mouse-position-indicator {
+  border: 2px solid var(--bs-primary);
+  border-radius: 50%;
+  box-shadow: 0 0 0 0.3rem rgba(var(--bs-primary-rgb), 0.18);
+  height: 0.75rem;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  width: 0.75rem;
+}
+
+.mouse-button-grid {
+  display: grid;
+  gap: 0.65rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.mouse-button-card {
+  background-color: var(--footer-col);
+  border: 1px solid var(--navbar-border-col);
+  border-radius: 0.75rem;
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+  padding: 0.7rem;
+  position: relative;
+  transition: background-color 70ms linear, border-color 70ms linear, box-shadow 70ms linear;
+}
+
+.mouse-button-card.is-active {
+  background-color: var(--card-primary-bg);
+  border-color: var(--bs-primary);
+  box-shadow: inset 0 0 0 1px var(--bs-primary), 0 0 0.75rem rgba(var(--bs-primary-rgb), 0.25);
+}
+
+.mouse-button-number {
+  align-items: center;
+  background-color: var(--navbar-col);
+  border: 1px solid var(--navbar-border-col);
+  border-radius: 50%;
+  display: flex;
+  font-size: 0.68rem;
+  font-weight: 700;
+  height: 1.4rem;
+  justify-content: center;
+  position: absolute;
+  right: 0.55rem;
+  top: 0.55rem;
+  width: 1.4rem;
+}
+
+.mouse-button-name {
+  font-size: 0.82rem;
+  font-weight: 700;
+  overflow: hidden;
+  padding-right: 1.5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mouse-button-state {
+  color: var(--footer-text-col);
+  font-size: 0.72rem;
+}
+
+.mouse-button-card.is-active .mouse-button-state {
+  color: var(--bs-primary);
+  font-weight: 700;
+}
+
+.mouse-button-count {
+  color: var(--footer-text-col);
+  font-size: 0.65rem;
+}
+
+.mouse-button-count output,
+.mouse-metric dd,
+.mouse-detail dd {
+  font-variant-numeric: tabular-nums;
+}
+
+.mouse-metric-heading {
+  color: var(--footer-text-col);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  margin-bottom: 0.55rem;
+  text-transform: uppercase;
+}
+
+.mouse-metric-grid {
+  display: grid;
+  gap: 0.55rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.mouse-wheel-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.mouse-metric,
+.mouse-detail {
+  background-color: var(--footer-col);
+  border: 1px solid var(--navbar-border-col);
+  border-radius: 0.65rem;
+  margin-bottom: 0;
+  min-width: 0;
+  padding: 0.65rem;
+}
+
+.mouse-metric dt,
+.mouse-detail dt {
+  color: var(--footer-text-col);
+  font-size: 0.64rem;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.2rem;
+  text-transform: uppercase;
+}
+
+.mouse-metric dd,
+.mouse-detail dd {
+  cursor: text;
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin-bottom: 0;
+  overflow-wrap: anywhere;
+  user-select: text;
+}
+
+.mouse-event-details > summary {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  list-style: none;
+  padding: 1rem 1.25rem;
+}
+
+.mouse-event-details > summary::-webkit-details-marker {
+  display: none;
+}
+
+.mouse-event-details > summary:focus-visible {
+  box-shadow: inset 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
+  outline: 0;
+}
+
+.mouse-event-details[open] > summary {
+  border-bottom: 1px solid var(--navbar-border-col);
+}
+
+.mouse-details-action {
+  align-items: center;
+  display: inline-flex;
+  font-size: 0.78rem;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+
+.mouse-details-action i {
+  transition: transform 150ms ease;
+}
+
+.mouse-event-details[open] .mouse-details-action i {
+  transform: rotate(180deg);
+}
+
+.mouse-details-grid {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.mouse-detail-wide {
+  grid-column: span 2;
+}
+
+@media (min-width: 1200px) {
+  .mouse-tester {
+    padding-bottom: 1.25rem !important;
+    padding-top: 1.25rem !important;
+  }
+
+  .mouse-tester-header {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+    max-width: none;
+    text-align: left !important;
+  }
+
+  .mouse-tester-header .mouse-kicker,
+  .mouse-tester-header > .lead,
+  .mouse-tester-header .mouse-privacy-note {
+    display: none;
+  }
+
+  .mouse-tester-header > h2 {
+    flex: 0 0 auto;
+    font-size: 1.65rem;
+    margin-bottom: 0 !important;
+  }
+
+  .mouse-status {
+    flex: 1 1 auto;
+    margin: 0 !important;
+    max-width: none;
+    padding: 0.65rem 0.85rem;
+  }
+
+  .mouse-workspace {
+    margin-top: 0.75rem !important;
+  }
+
+  .mouse-browser-warning {
+    margin-top: 0.75rem !important;
+    max-width: none;
+    padding: 0.55rem 0.75rem;
+  }
+
+  .mouse-panel-header {
+    padding: 0.7rem 0.9rem;
+  }
+
+  .mouse-panel-body {
+    padding: 0.85rem;
+  }
+
+  .mouse-visual-body {
+    padding: 0;
+  }
+
+  .mouse-panel-header h3 {
+    font-size: 0.95rem;
+  }
+
+  .mouse-panel-eyebrow {
+    font-size: 0.6rem;
+  }
+}
+
+@media (min-width: 1600px) {
+  .mouse-visual-body {
+    min-height: 27rem;
+  }
+
+  .mouse-button-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .mouse-button-card {
+    padding: 0.6rem;
+  }
+
+  .mouse-metric-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .mouse-wheel-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 767.98px) {
+  .mouse-button-grid,
+  .mouse-metric-grid,
+  .mouse-details-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 575.98px) {
+  .mouse-panel-header,
+  .mouse-panel-body,
+  .mouse-event-details > summary {
+    padding: 0.9rem;
+  }
+
+  .mouse-panel-header > .small {
+    width: 100%;
+  }
+
+  .mouse-visual-body {
+    min-height: 25rem;
+    padding: 0;
+  }
+
+  .mouse-visual-svg {
+    width: min(82%, 17rem);
+  }
+
+  .mouse-capture-instructions {
+    border-radius: 0.75rem;
+  }
+
+  .mouse-metric-grid,
+  .mouse-details-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .mouse-detail-wide {
+    grid-column: auto;
+  }
+}
+
 /* Project card styling */
 .project-card-link {
   color: var(--text-col);
diff --git a/assets/css/mouse-tester.css b/assets/css/mouse-tester.css
new file mode 100644
index 00000000..5a4b3d35
--- /dev/null
+++ b/assets/css/mouse-tester.css
@@ -0,0 +1,9 @@
+.intro-header {
+  margin-bottom: 0;
+}
+
+@media (min-width: 1200px) {
+  .intro-header {
+    margin-top: 5.6875rem;
+  }
+}
diff --git a/assets/js/mouse-tester.js b/assets/js/mouse-tester.js
new file mode 100644
index 00000000..1bbde855
--- /dev/null
+++ b/assets/js/mouse-tester.js
@@ -0,0 +1,331 @@
+function formatSigned(value) {
+    const roundedValue = Math.round(value);
+    return roundedValue > 0 ? `+${roundedValue}` : `${roundedValue}`;
+}
+
+function wheelUnit(deltaMode) {
+    if (deltaMode === WheelEvent.DOM_DELTA_LINE) return 'lines';
+    if (deltaMode === WheelEvent.DOM_DELTA_PAGE) return 'pages';
+    return 'px';
+}
+
+function wheelModeName(deltaMode) {
+    if (deltaMode === WheelEvent.DOM_DELTA_LINE) return 'Lines';
+    if (deltaMode === WheelEvent.DOM_DELTA_PAGE) return 'Pages';
+    return 'Pixels';
+}
+
+function wheelDirection(deltaX, deltaY) {
+    if (Math.abs(deltaY) >= Math.abs(deltaX) && deltaY !== 0) {
+        return deltaY < 0 ? '↑ Up' : '↓ Down';
+    }
+    if (deltaX !== 0) {
+        return deltaX < 0 ? '← Left' : '→ Right';
+    }
+    return 'Idle';
+}
+
+function preventBrowserAction(event) {
+    event.preventDefault();
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    const buttonConfigs = [
+        { number: 0, bit: 1, name: 'primary' },
+        { number: 1, bit: 4, name: 'wheel' },
+        { number: 2, bit: 2, name: 'secondary' },
+        { number: 3, bit: 8, name: 'back' },
+        { number: 4, bit: 16, name: 'forward' }
+    ];
+    const browserNavigationButtons = new Set([3, 4]);
+    const buttonPressCounts = new Map(buttonConfigs.map(config => [config.number, 0]));
+    const pressedButtons = new Set();
+    const suppressedNavigationButtons = new Set();
+    const captureSurface = document.getElementById('mouse-capture-surface');
+    const positionIndicator = document.getElementById('mouse-position-indicator');
+    const status = document.getElementById('mouse-status');
+    const statusMessage = document.getElementById('mouse-status-message');
+    const activeButtonsOutput = document.getElementById('mouse-active-buttons');
+    const lastEventOutput = document.getElementById('mouse-last-event');
+    const wheelModeOutput = document.getElementById('mouse-wheel-mode');
+    const browserSupportOutput = document.getElementById('mouse-browser-support');
+    const firefoxMouseButtonsWarning = document.getElementById('firefox-mouse-buttons-warning');
+    const movementXOutput = document.getElementById('mouse-movement-x');
+    const movementYOutput = document.getElementById('mouse-movement-y');
+    const positionOutput = document.getElementById('mouse-position');
+    const distanceOutput = document.getElementById('mouse-distance');
+    const moveEventsOutput = document.getElementById('mouse-move-events');
+    const doubleClicksOutput = document.getElementById('mouse-double-clicks');
+    const wheelXOutput = document.getElementById('mouse-wheel-x');
+    const wheelYOutput = document.getElementById('mouse-wheel-y');
+    const wheelDirectionOutput = document.getElementById('mouse-wheel-direction');
+    const wheelEventsOutput = document.getElementById('mouse-wheel-events');
+    let hasReceivedInput = false;
+    let scrollArrowTimer = null;
+    let motionFrameId = null;
+    let movementX = 0;
+    let movementY = 0;
+    let positionX = 0;
+    let positionY = 0;
+    let totalDistance = 0;
+    let moveEvents = 0;
+    let doubleClicks = 0;
+    let wheelX = 0;
+    let wheelY = 0;
+    let wheelEvents = 0;
+    let wheelDeltaMode = 0;
+
+    firefoxMouseButtonsWarning.hidden = !navigator.userAgent.includes('Firefox/');
+
+    function updateStatus(message, type) {
+        status.classList.remove('alert-warning', 'alert-success', 'alert-danger');
+        status.classList.add(`alert-${type}`);
+        statusMessage.textContent = message;
+    }
+
+    function markInput(eventName) {
+        lastEventOutput.textContent = eventName;
+        if (!hasReceivedInput) {
+            hasReceivedInput = true;
+            updateStatus('Mouse input detected. Keep testing buttons, movement, and scrolling.', 'success');
+        }
+    }
+
+    function getButtonElements(buttonNumber) {
+        return {
+            card: document.querySelector(`.mouse-button-card[data-mouse-button="${buttonNumber}"]`),
+            count: document.getElementById(`mouse-button-${buttonNumber}-count`),
+            state: document.getElementById(`mouse-button-${buttonNumber}-state`),
+            visual: document.querySelector(`.mouse-svg-control[data-mouse-button="${buttonNumber}"]`)
+        };
+    }
+
+    function renderButton(buttonNumber) {
+        const elements = getButtonElements(buttonNumber);
+        const isActive = pressedButtons.has(buttonNumber);
+        elements.card.classList.toggle('is-active', isActive);
+        elements.visual.classList.toggle('is-active', isActive);
+        elements.state.textContent = isActive ? 'Pressed' : 'Released';
+        elements.count.textContent = buttonPressCounts.get(buttonNumber);
+    }
+
+    function renderAllButtons() {
+        buttonConfigs.forEach(config => renderButton(config.number));
+    }
+
+    function renderActiveButtons(buttonsBitmask) {
+        const activeNames = buttonConfigs
+            .filter(config => (buttonsBitmask & config.bit) !== 0)
+            .map(config => config.name);
+        activeButtonsOutput.textContent = activeNames.length === 0
+            ? '0 (none)'
+            : `${buttonsBitmask} (${activeNames.join(' + ')})`;
+    }
+
+    function syncPressedButtons(buttonsBitmask) {
+        pressedButtons.clear();
+        buttonConfigs.forEach(config => {
+            if ((buttonsBitmask & config.bit) !== 0) {
+                pressedButtons.add(config.number);
+            }
+        });
+        renderActiveButtons(buttonsBitmask);
+        renderAllButtons();
+    }
+
+    function renderMotion() {
+        movementXOutput.textContent = formatSigned(movementX);
+        movementYOutput.textContent = formatSigned(movementY);
+        positionOutput.textContent = `${Math.round(positionX)}, ${Math.round(positionY)}`;
+        distanceOutput.textContent = Math.round(totalDistance);
+        moveEventsOutput.textContent = moveEvents;
+        positionIndicator.style.left = `${positionX}px`;
+        positionIndicator.style.top = `${positionY}px`;
+        positionIndicator.hidden = false;
+        motionFrameId = null;
+    }
+
+    function scheduleMotionRender() {
+        if (motionFrameId === null) {
+            motionFrameId = requestAnimationFrame(renderMotion);
+        }
+    }
+
+    function showScrollArrows(deltaX, deltaY) {
+        if (scrollArrowTimer !== null) {
+            clearTimeout(scrollArrowTimer);
+        }
+        const activeDirections = new Set();
+        if (deltaX < 0) activeDirections.add('left');
+        if (deltaX > 0) activeDirections.add('right');
+        if (deltaY < 0) activeDirections.add('up');
+        if (deltaY > 0) activeDirections.add('down');
+        document.querySelectorAll('.mouse-svg-scroll-indicator').forEach(indicator => {
+            indicator.classList.toggle('is-active', activeDirections.has(indicator.dataset.scrollDirection));
+        });
+        scrollArrowTimer = setTimeout(function() {
+            document.querySelectorAll('.mouse-svg-scroll-indicator').forEach(indicator => {
+                indicator.classList.remove('is-active');
+            });
+            scrollArrowTimer = null;
+        }, 450);
+    }
+
+    function recordButtonDown(event) {
+        const wasPressed = pressedButtons.has(event.button);
+        captureSurface.focus({ preventScroll: true });
+        markInput(`Button ${event.button} down`);
+        syncPressedButtons(event.buttons);
+        if (!wasPressed && buttonPressCounts.has(event.button)) {
+            buttonPressCounts.set(event.button, buttonPressCounts.get(event.button) + 1);
+            renderButton(event.button);
+        }
+    }
+
+    function handleMouseDown(event) {
+        event.preventDefault();
+        recordButtonDown(event);
+    }
+
+    function handleSideButtonPointerDown(event) {
+        if (!browserNavigationButtons.has(event.button)) return;
+        event.preventDefault();
+        suppressedNavigationButtons.add(event.button);
+        recordButtonDown(event);
+    }
+
+    function handleSideButtonPointerUp(event) {
+        if (!browserNavigationButtons.has(event.button) || !suppressedNavigationButtons.has(event.button)) return;
+        event.preventDefault();
+        syncPressedButtons(event.buttons);
+        markInput(`Button ${event.button} up`);
+        suppressedNavigationButtons.delete(event.button);
+    }
+
+    function handleMouseMove(event) {
+        const surfaceBounds = captureSurface.getBoundingClientRect();
+        movementX = event.movementX;
+        movementY = event.movementY;
+        positionX = Math.min(Math.max(event.clientX - surfaceBounds.left, 0), surfaceBounds.width);
+        positionY = Math.min(Math.max(event.clientY - surfaceBounds.top, 0), surfaceBounds.height);
+        totalDistance += Math.hypot(movementX, movementY);
+        moveEvents += 1;
+        markInput('Mouse move');
+        syncPressedButtons(event.buttons);
+        scheduleMotionRender();
+    }
+
+    function handleWheel(event) {
+        event.preventDefault();
+        wheelDeltaMode = event.deltaMode;
+        wheelX += event.deltaX;
+        wheelY += event.deltaY;
+        wheelEvents += 1;
+        const unit = wheelUnit(wheelDeltaMode);
+        wheelXOutput.textContent = `${formatSigned(wheelX)} ${unit}`;
+        wheelYOutput.textContent = `${formatSigned(wheelY)} ${unit}`;
+        wheelDirectionOutput.textContent = wheelDirection(event.deltaX, event.deltaY);
+        wheelEventsOutput.textContent = wheelEvents;
+        wheelModeOutput.textContent = wheelModeName(wheelDeltaMode);
+        markInput('Mouse wheel');
+        showScrollArrows(event.deltaX, event.deltaY);
+    }
+
+    function releaseButtons(event) {
+        syncPressedButtons(event?.buttons ?? 0);
+        if (event && captureSurface.contains(event.target)) {
+            event.preventDefault();
+            markInput(`Button ${event.button} up`);
+        }
+    }
+
+    function preventSideButtonBrowserAction(event) {
+        if (browserNavigationButtons.has(event.button)) {
+            event.preventDefault();
+        }
+    }
+
+    function releaseAllButtons() {
+        suppressedNavigationButtons.clear();
+        syncPressedButtons(0);
+    }
+
+    function resetTester() {
+        hasReceivedInput = false;
+        buttonConfigs.forEach(config => buttonPressCounts.set(config.number, 0));
+        pressedButtons.clear();
+        suppressedNavigationButtons.clear();
+        if (scrollArrowTimer !== null) {
+            clearTimeout(scrollArrowTimer);
+            scrollArrowTimer = null;
+        }
+        document.querySelectorAll('.mouse-svg-scroll-indicator').forEach(indicator => {
+            indicator.classList.remove('is-active');
+        });
+        if (motionFrameId !== null) {
+            cancelAnimationFrame(motionFrameId);
+            motionFrameId = null;
+        }
+        movementX = 0;
+        movementY = 0;
+        positionX = 0;
+        positionY = 0;
+        totalDistance = 0;
+        moveEvents = 0;
+        doubleClicks = 0;
+        wheelX = 0;
+        wheelY = 0;
+        wheelEvents = 0;
+        wheelDeltaMode = 0;
+        movementXOutput.textContent = '0';
+        movementYOutput.textContent = '0';
+        positionOutput.textContent = '0, 0';
+        distanceOutput.textContent = '0';
+        moveEventsOutput.textContent = '0';
+        doubleClicksOutput.textContent = '0';
+        wheelXOutput.textContent = '0 px';
+        wheelYOutput.textContent = '0 px';
+        wheelDirectionOutput.textContent = 'Idle';
+        wheelEventsOutput.textContent = '0';
+        wheelModeOutput.textContent = 'Pixels';
+        lastEventOutput.textContent = 'None';
+        positionIndicator.hidden = true;
+        renderActiveButtons(0);
+        renderAllButtons();
+        updateStatus('Move, click, or scroll inside the test area to begin.', 'warning');
+    }
+
+    if (globalThis.MouseEvent === undefined || globalThis.WheelEvent === undefined) {
+        browserSupportOutput.textContent = 'Not supported';
+        updateStatus('Mouse events are not supported in this browser.', 'danger');
+        captureSurface.removeAttribute('tabindex');
+        return;
+    }
+
+    browserSupportOutput.textContent = 'Supported';
+    captureSurface.addEventListener('pointerdown', handleSideButtonPointerDown, { capture: true });
+    captureSurface.addEventListener('mousedown', handleMouseDown);
+    captureSurface.addEventListener('mousemove', handleMouseMove);
+    captureSurface.addEventListener('mouseup', preventBrowserAction);
+    captureSurface.addEventListener('wheel', handleWheel, { passive: false });
+    captureSurface.addEventListener('contextmenu', preventBrowserAction);
+    captureSurface.addEventListener('click', preventSideButtonBrowserAction, { capture: true });
+    captureSurface.addEventListener('auxclick', preventSideButtonBrowserAction, { capture: true });
+    captureSurface.addEventListener('dblclick', function(event) {
+        event.preventDefault();
+        doubleClicks += 1;
+        doubleClicksOutput.textContent = doubleClicks;
+        markInput('Double click');
+    });
+    globalThis.addEventListener('pointerup', handleSideButtonPointerUp, { capture: true });
+    globalThis.addEventListener('pointercancel', releaseAllButtons, { capture: true });
+    globalThis.addEventListener('mouseup', releaseButtons);
+    globalThis.addEventListener('blur', releaseAllButtons);
+    document.addEventListener('visibilitychange', function() {
+        if (document.hidden) {
+            releaseAllButtons();
+        }
+    });
+    document.getElementById('mouse-reset').addEventListener('click', resetTester);
+    resetTester();
+});
diff --git a/mouse-tester.html b/mouse-tester.html
new file mode 100644
index 00000000..fcb03c70
--- /dev/null
+++ b/mouse-tester.html
@@ -0,0 +1,174 @@
+---
+title: Mouse Tester
+layout: page
+full-width: true
+css:
+  - /assets/css/hide-heading.css
+  - /assets/css/mouse-tester.css
+js:
+  - /assets/js/mouse-tester.js
+---
+
+<!-- Mouse Tester section -->
+<section class="mouse-tester py-4 py-lg-5" id="MouseTester">
+    <div class="container">
+        <header class="mouse-tester-header mx-auto text-center">
+            <div class="mouse-kicker mb-2">
+                <i class="fas fa-computer-mouse" aria-hidden="true"></i>
+                Browser mouse diagnostics
+            </div>
+            <h2 class="display-6 fw-bolder mb-2">Mouse Tester</h2>
+            <p class="lead text-muted mb-4">Check buttons, movement, and scrolling in real time.</p>
+            <div id="mouse-status" class="alert alert-warning mouse-status mb-2">
+                <span class="mouse-status-indicator" aria-hidden="true"></span>
+                <output id="mouse-status-message" aria-live="polite">Move, click, or scroll inside the test area to begin.</output>
+            </div>
+            <p class="mouse-privacy-note text-muted mb-0">
+                <i class="fas fa-lock me-1" aria-hidden="true"></i>
+                Input data stays in your browser.
+            </p>
+        </header>
+
+        <div id="firefox-mouse-buttons-warning" class="mouse-browser-warning mouse-inline-notice mt-3" aria-live="polite" hidden>
+            <i class="fas fa-triangle-exclamation mt-1" aria-hidden="true"></i>
+            <span>
+                Firefox may use Back and Forward mouse buttons for browser navigation even when this tester detects the button press.
+                Testing either button may navigate this tab.
+                Details: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1933746" target="_blank" rel="noopener noreferrer">Mozilla bug 1933746</a>.
+            </span>
+        </div>
+
+        <div class="row g-4 mt-0 mouse-workspace">
+            <div class="col-xl-7">
+                <section class="mouse-panel mouse-visual-panel h-100" aria-labelledby="mouse-visual-heading">
+                    <div class="mouse-panel-header">
+                        <div>
+                            <span class="mouse-panel-eyebrow">Live input</span>
+                            <h3 class="h5 mb-0" id="mouse-visual-heading">Mouse visual</h3>
+                        </div>
+                        <span class="mouse-live-badge"><span aria-hidden="true"></span>Listening</span>
+                    </div>
+                    <div class="mouse-panel-body mouse-visual-body">
+                        <section
+                            id="mouse-capture-surface"
+                            class="mouse-capture-surface"
+                            tabindex="-1"
+                            aria-label="Mouse input test area"
+                            aria-describedby="mouse-capture-instructions"
+                        >
+                            {% include mouse-tester.svg %}
+                            <span id="mouse-position-indicator" class="mouse-position-indicator" hidden aria-hidden="true"></span>
+                            <p id="mouse-capture-instructions" class="mouse-capture-instructions mb-0">
+                                Move, click, and scroll anywhere in this panel.
+                                Right-click is disabled only while testing here.
+                                Back and Forward buttons may navigate this tab in Firefox.
+                            </p>
+                        </section>
+                    </div>
+                </section>
+            </div>
+
+            <div class="col-xl-5 d-flex flex-column gap-3">
+                <section class="mouse-panel" aria-labelledby="mouse-buttons-heading">
+                    <div class="mouse-panel-header">
+                        <div>
+                            <span class="mouse-panel-eyebrow">Digital input</span>
+                            <h3 class="h5 mb-0" id="mouse-buttons-heading">Buttons</h3>
+                        </div>
+                        <button id="mouse-reset" class="btn btn-sm btn-outline-secondary" type="button">
+                            <i class="fas fa-rotate-left me-1" aria-hidden="true"></i>Reset
+                        </button>
+                    </div>
+                    <div class="mouse-panel-body">
+                        <div class="mouse-button-grid">
+                            <div class="mouse-button-card" data-mouse-button="0">
+                                <span class="mouse-button-number">1</span>
+                                <span class="mouse-button-name">Primary</span>
+                                <output class="mouse-button-state" id="mouse-button-0-state">Released</output>
+                                <span class="mouse-button-count"><output id="mouse-button-0-count">0</output> presses</span>
+                            </div>
+                            <div class="mouse-button-card" data-mouse-button="1">
+                                <span class="mouse-button-number">3</span>
+                                <span class="mouse-button-name">Wheel</span>
+                                <output class="mouse-button-state" id="mouse-button-1-state">Released</output>
+                                <span class="mouse-button-count"><output id="mouse-button-1-count">0</output> presses</span>
+                            </div>
+                            <div class="mouse-button-card" data-mouse-button="2">
+                                <span class="mouse-button-number">2</span>
+                                <span class="mouse-button-name">Secondary</span>
+                                <output class="mouse-button-state" id="mouse-button-2-state">Released</output>
+                                <span class="mouse-button-count"><output id="mouse-button-2-count">0</output> presses</span>
+                            </div>
+                            <div class="mouse-button-card" data-mouse-button="3">
+                                <span class="mouse-button-number">4</span>
+                                <span class="mouse-button-name">Back</span>
+                                <output class="mouse-button-state" id="mouse-button-3-state">Released</output>
+                                <span class="mouse-button-count"><output id="mouse-button-3-count">0</output> presses</span>
+                            </div>
+                            <div class="mouse-button-card" data-mouse-button="4">
+                                <span class="mouse-button-number">5</span>
+                                <span class="mouse-button-name">Forward</span>
+                                <output class="mouse-button-state" id="mouse-button-4-state">Released</output>
+                                <span class="mouse-button-count"><output id="mouse-button-4-count">0</output> presses</span>
+                            </div>
+                        </div>
+                        <p class="small text-muted mt-3 mb-0">
+                            Extra button reporting can vary by mouse, operating system, and browser.
+                        </p>
+                    </div>
+                </section>
+
+                <section class="mouse-panel flex-grow-1" aria-labelledby="mouse-events-heading">
+                    <div class="mouse-panel-header">
+                        <div>
+                            <span class="mouse-panel-eyebrow">Browser events</span>
+                            <h3 class="h5 mb-0" id="mouse-events-heading">Movement and wheel</h3>
+                        </div>
+                        <span class="small text-muted">Values update inside the test area</span>
+                    </div>
+                    <div class="mouse-panel-body">
+                        <h4 class="mouse-metric-heading">Movement</h4>
+                        <div class="mouse-metric-grid">
+                            <dl class="mouse-metric"><dt>Horizontal delta</dt><dd><output id="mouse-movement-x">0</output> px</dd></dl>
+                            <dl class="mouse-metric"><dt>Vertical delta</dt><dd><output id="mouse-movement-y">0</output> px</dd></dl>
+                            <dl class="mouse-metric"><dt>Position</dt><dd><output id="mouse-position">0, 0</output></dd></dl>
+                            <dl class="mouse-metric"><dt>Total distance</dt><dd><output id="mouse-distance">0</output> px</dd></dl>
+                            <dl class="mouse-metric"><dt>Move events</dt><dd><output id="mouse-move-events">0</output></dd></dl>
+                            <dl class="mouse-metric"><dt>Double clicks</dt><dd><output id="mouse-double-clicks">0</output></dd></dl>
+                        </div>
+
+                        <h4 class="mouse-metric-heading mt-3">Wheel</h4>
+                        <div class="mouse-metric-grid mouse-wheel-grid">
+                            <dl class="mouse-metric"><dt>Horizontal</dt><dd><output id="mouse-wheel-x">0 px</output></dd></dl>
+                            <dl class="mouse-metric"><dt>Vertical</dt><dd><output id="mouse-wheel-y">0 px</output></dd></dl>
+                            <dl class="mouse-metric"><dt>Direction</dt><dd><output id="mouse-wheel-direction">Idle</output></dd></dl>
+                            <dl class="mouse-metric"><dt>Wheel events</dt><dd><output id="mouse-wheel-events">0</output></dd></dl>
+                        </div>
+                    </div>
+                </section>
+            </div>
+
+            <div class="col-12">
+                <details class="mouse-panel mouse-event-details">
+                    <summary>
+                        <span>
+                            <span class="mouse-panel-eyebrow">Technical information</span>
+                            <span class="h5 d-block mb-0">Event details</span>
+                        </span>
+                        <span class="mouse-details-action text-muted">Show details <i class="fas fa-chevron-down" aria-hidden="true"></i></span>
+                    </summary>
+                    <div class="mouse-panel-body">
+                        <div class="mouse-details-grid mb-0">
+                            <dl class="mouse-detail mouse-detail-wide"><dt>Input APIs</dt><dd>MouseEvent and WheelEvent</dd></dl>
+                            <dl class="mouse-detail mouse-detail-wide"><dt>Capture scope</dt><dd>Test area only</dd></dl>
+                            <dl class="mouse-detail"><dt>Active buttons bitmask</dt><dd><output id="mouse-active-buttons">0 (none)</output></dd></dl>
+                            <dl class="mouse-detail"><dt>Last event</dt><dd><output id="mouse-last-event">None</output></dd></dl>
+                            <dl class="mouse-detail"><dt>Wheel delta mode</dt><dd><output id="mouse-wheel-mode">Pixels</output></dd></dl>
+                            <dl class="mouse-detail"><dt>Browser support</dt><dd><output id="mouse-browser-support">Checking</output></dd></dl>
+                        </div>
+                    </div>
+                </details>
+            </div>
+        </div>
+    </div>
+</section>