/* A conventional, straight mouse silhouette with independent button states. */
main.test-page[data-page="mouse"] .test-workspace .mouse-inspector {
  position: relative; min-height: 350px; padding: 17px 20px 15px; gap: 0;
  justify-content: space-between; overflow: hidden; outline: none;
  background: radial-gradient(ellipse at 60% 38%,#fffdf8 0,#f4f1e9 63%,#ece8df 100%)!important;
}
.mouse-inspector:focus-visible { outline: 2px solid #f05b35!important; outline-offset: 3px; }
.mouse-inspector-top { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:23px; font-size:11px; color:#747b78; }
.mouse-live-state { display:flex; align-items:center; gap:7px; min-width:0; }
.mouse-live-state i { flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:#a5ada2; box-shadow:0 0 0 4px #a5ada212; }
.mouse-inspector.is-pressed .mouse-live-state i { background:#ec6b42; box-shadow:0 0 0 4px #ec6b4214; }
.mouse-live-state [data-pressed] { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mouse-coverage { white-space:nowrap; }
.mouse-coverage strong { color:#333f3b; margin-left:5px; font:500 12px var(--mono,monospace); }
.mouse-visual { width:280px; height:263px; position:relative; flex:0 0 auto; }
.mouse-ground { position:absolute; left:101px; top:240px; width:140px; height:12px; border-radius:50%; background:#2c302b1a; filter:blur(7px); }
.mouse-inspector .mouse-outline {
  position:absolute; left:101px; top:8px; width:140px; height:240px; padding:0; box-sizing:border-box;
  transform:none; border:1px solid #242b30; border-radius:46% 46% 45% 45% / 30% 30% 38% 38%;
  background:linear-gradient(100deg,#3b4348,#343b40 55%,#30373c);
  box-shadow:inset 1px 1px 1px #ffffff20,inset -1px -2px 2px #131b2033,0 3px 0 #242b30,0 7px 12px #18201812;
}
.mouse-outline:before { content:""; position:absolute; inset:4px; border:1px solid #ffffff09; border-radius:inherit; pointer-events:none; }
.mouse-outline:after { content:""; position:absolute; top:112px; left:6px; right:6px; height:0; border-top:1px solid #242c31; box-shadow:0 1px 0 #ffffff08; pointer-events:none; }
.mouse-shell-grip { display:none; }
.mouse-inspector .mouse-top { position:absolute; inset:0; height:auto; display:block; }
.mouse-inspector .mouse-part { position:absolute; margin:0; flex:none; border:1px solid #1a232a; color:#c0c8cb; font-size:11px; transition:background .08s,box-shadow .08s,color .08s; }
.mouse-inspector .mouse-part span { font-size:10px; letter-spacing:.02em; }
.mouse-inspector .mouse-part b { font:500 19px var(--mono,monospace); line-height:1; }
.mouse-inspector .mouse-left,.mouse-inspector .mouse-right {
  top:5px; width:60px; height:101px; display:flex; align-items:center; justify-content:flex-end; padding-bottom:17px; gap:8px;
  background:linear-gradient(100deg,#424b50,#394247); box-shadow:inset 0 1px 1px #ffffff13;
}
.mouse-inspector .mouse-left { left:5px; border-radius:58px 5px 5px 5px / 67px 5px 5px 5px; }
.mouse-inspector .mouse-right { right:5px; border-radius:5px 58px 5px 5px / 5px 67px 5px 5px; }
.mouse-inspector .mouse-middle { z-index:3; left:59px; top:20px; width:22px; height:44px; border-radius:10px; border:3px solid #222a2f; background:repeating-linear-gradient(0deg,#758084 0 2px,#465156 2px 5px); box-shadow:0 0 0 1px #242d32,inset 1px 0 1px #d1d8d833; }
.mouse-inspector .mouse-middle span { position:absolute; top:109px; left:-27px; width:70px; text-align:center; font-size:10px; color:#a7b3b6; }
.mouse-inspector .mouse-middle b { position:absolute; top:127px; left:-27px; width:70px; text-align:center; font-size:17px; color:#d6dfe0; }
.mouse-inspector .mouse-side { z-index:4; left:-4px; width:8px; height:29px; border-radius:4px; background:linear-gradient(90deg,#626e73,#39454b); box-shadow:-1px 0 0 #a2abad55; }
.mouse-inspector .mouse-forward { top:86px; }
.mouse-inspector .mouse-back { top:125px; }
.mouse-inspector .mouse-side:before { content:""; position:absolute; width:30px; border-top:1px solid #a3aaa3; left:-34px; top:14px; }
.mouse-inspector .mouse-side:after { content:""; position:absolute; left:-37px; top:12px; width:4px; height:4px; border-radius:50%; background:#919b93; }
.mouse-inspector .mouse-side span { position:absolute; right:48px; top:-3px; width:40px; color:#56645c; font-size:11px; text-align:right; }
.mouse-inspector .mouse-side b { position:absolute; right:48px; top:14px; width:40px; color:#38483f; font-size:15px; text-align:right; }
.mouse-inspector .mouse-part.seen { border-color:#e28a68; box-shadow:inset 0 0 0 1px #f09b6a40,0 0 0 1px #ed946020; color:#ffc19f; }
.mouse-inspector .mouse-part.pressed { color:#fff!important; border-color:#ffb08c; background:linear-gradient(130deg,#ff9b69,#ed673d 70%); box-shadow:inset 0 1px 2px #ffe2c777,0 0 14px #ef784a42; }
.mouse-inspector .mouse-middle.seen { background:repeating-linear-gradient(0deg,#da936f 0 2px,#624940 2px 5px); }
.mouse-inspector .mouse-middle.pressed { background:repeating-linear-gradient(0deg,#ffd4a8 0 2px,#ed8050 2px 5px); }
.mouse-inspector .mouse-part.seen b,.mouse-inspector .mouse-part.seen span { color:#ed8b5d; }
.mouse-inspector .mouse-left.seen b,.mouse-inspector .mouse-right.seen b { color:#ffc19f; }
.mouse-inspector .mouse-part.pressed b,.mouse-inspector .mouse-part.pressed span { color:#fff; }
.mouse-inspector .mouse-side.pressed b,.mouse-inspector .mouse-side.pressed span { color:#cf542e; }
.mouse-inspector .mouse-middle.pressed b,.mouse-inspector .mouse-middle.pressed span { color:#ffb98a; }
.mouse-palm-mark { display:none; }
.mouse-inspector-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px 12px; width:100%; }
.mouse-inspector-footer p { margin:0; font-size:11px; color:#737a70; line-height:1.5; }
.mouse-inspector-footer .pill { font-size:10px; padding:5px 8px; background:#e6e9df; color:#5c6a57; border-color:#d2dac9; }
main.test-page[data-page="mouse"] .test-workspace .mouse-readings { padding:16px 18px; }
.mouse-readings-title { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:2px; }
.mouse-readings-title h3 { margin:0; font-size:15px; font-weight:650; }
.mouse-readings-title>span { font-size:10px; color:#7e887b; white-space:nowrap; }
main.test-page[data-page="mouse"] .test-workspace .mouse-readout { padding:9px 0; font-size:12px; }
.mouse-readout small { margin-left:5px; font-size:10px; color:#96988e; }
.mouse-readout strong { font-weight:500; font-size:13px; }
.mouse-side-note { font-size:10px; color:#879081; line-height:1.65; margin:9px 0 0; }
main.test-page[data-page="mouse"] .test-workspace .drag-panel { padding:15px 18px; margin:0; }
.mouse-drag-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
main.test-page[data-page="mouse"] .test-workspace .mouse-drag-heading h3 { margin:0; font-size:14px; }
.mouse-drag-heading [data-drag] { font-size:10px; color:#7c8578; text-align:right; }
main.test-page[data-page="mouse"] .test-workspace .drag-track { height:49px; margin:12px 0 0; border-color:#cccfc2; background:linear-gradient(90deg,#e9ede2,#f4f4ec); }
main.test-page[data-page="mouse"] .test-workspace .drag-handle { height:39px; width:39px; top:4px; display:grid; place-items:center; }
.drag-handle svg { height:21px; width:21px; pointer-events:none; }
.drag-track-label { color:#9b9f92; font-size:10px; letter-spacing:1px; }
@media(min-width:1000px) and (min-height:620px) { main.test-page[data-page="mouse"] .test-workspace .mouse-inspector { min-height:347px; } }
@media(max-width:760px) {
  main.test-page[data-page="mouse"] .test-workspace .mouse-inspector { padding:16px; min-height:350px; }
  .mouse-visual { max-width:100%; }
  .mouse-inspector-footer { justify-content:center; text-align:center; }
  .mouse-live-state [data-pressed] { max-width:180px; }
  .mouse-drag-heading { align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) { .mouse-inspector .mouse-part { transition:none; } }