/* 鼠标测试 */
.ms-panel{min-height:0}
.ms-wrap{display:grid;grid-template-columns:12rem 1fr;gap:1rem;align-items:stretch}
.ms-mouse{position:relative;padding-top:.25rem}
.ms-body{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:3.2rem 4.2rem;gap:2px;
  padding:3px;border:2px solid #d7dde5;border-radius:5rem 5rem 3.5rem 3.5rem;background:#f7f9fb}
.ms-btn{display:flex;align-items:flex-end;justify-content:center;padding-bottom:.4rem;font-size:.75rem;color:#8a94a3;
  border:1px solid #e3e8ee;background:#fff;user-select:none}
.ms-left{border-radius:4.6rem .3rem .3rem .3rem}
.ms-right{border-radius:.3rem 4.6rem .3rem .3rem}
.ms-foot{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#b7c0cb;
  border:1px solid #e3e8ee;border-radius:.3rem .3rem 3rem 3rem;background:#fff}
.ms-wheel{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:1.15rem;height:2.4rem;border-radius:.6rem;
  display:flex;align-items:center;justify-content:center;font-size:.5rem;color:#98a2b3;overflow:hidden;
  border:1px solid #d7dde5;background:#eef2f6;writing-mode:vertical-rl;user-select:none}
.ms-btn.is-on,.ms-wheel.is-on,.ms-side-btn.is-on{background:var(--site-primary,#0e7490);border-color:var(--site-primary,#0e7490);color:#fff}
.ms-side{display:flex;gap:.4rem;justify-content:center;margin-top:.5rem}
.ms-side-btn{flex:1 1 0;padding:.35rem .2rem;border:1px solid #e3e8ee;border-radius:.45rem;background:#fff;
  font-size:.75rem;color:#8a94a3;text-align:center;cursor:pointer;user-select:none}
.ms-pad{position:relative;min-height:15rem;border:1px dashed #cfd8e3;border-radius:.75rem;overflow:hidden;
  background:linear-gradient(#fbfcfd,#f5f7fa);cursor:crosshair}
.ms-pad-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a7b0bb;font-size:.875rem;pointer-events:none}
.ms-trail{position:absolute;inset:0;display:block}
.ms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.625rem}
.ms-stat{padding:.5rem .625rem;border:1px solid #eef1f5;border-radius:.5rem;background:#fafbfd}
.ms-stat .ms-k{font-size:.75rem;color:#8a94a3}
.ms-stat .ms-v{font-size:1.125rem;font-weight:700;color:#1f2d3d;font-variant-numeric:tabular-nums;word-break:break-all}
.ms-scroll{max-height:13rem;overflow:auto;padding:.875rem 1rem;border:1px solid #eef1f5;border-radius:.6rem;background:#fff;
  font-size:.875rem;color:#5b6675;line-height:1.9}
/* 滚轮测试的方框：里面是一把「标尺」，只用来撑出滚动高度，让人看得出滚没滚 */
.ms-ruler{height:1800px;background:
  repeating-linear-gradient(to bottom,#dbe3ec 0 1px,transparent 1px 24px),
  repeating-linear-gradient(to bottom,#94a3b8 0 1px,transparent 1px 120px)}
.ms-click{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:100%;
  padding:2rem 1rem;border:2px dashed var(--site-primary,#0e7490);border-radius:.75rem;background:var(--site-tint,#f2fbfd);
  color:var(--site-primary,#0e7490);cursor:pointer;user-select:none}
.ms-click:active{transform:scale(.995)}
.ms-click-main{font-size:1.25rem;font-weight:700}
.ms-click-sub{font-size:.8125rem;color:#8a94a3}
@media (max-width:767.98px){
  .ms-wrap{grid-template-columns:1fr}
  .ms-mouse{max-width:12rem;margin:0 auto}
  .ms-pad{min-height:12rem}
}