/* 線上滑鼠測試 */
.tool { display: flex; flex-direction: column; gap: 16px; }
.lead { margin: 0; text-align: center; color: var(--muted); }
.zone {
  position: relative; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 36px;
  min-height: 22rem; padding: 20px; background: #EEF3F0; border: 2px dashed var(--accent); border-radius: 16px;
  cursor: crosshair; user-select: none; touch-action: none;
}
.zone-tag { position: absolute; top: 8px; right: 12px; font-size: .8125rem; font-weight: 700; color: var(--accent); }
.mouse { width: 11rem; height: auto; }
.mouse .body { fill: #fff; stroke: var(--rule); stroke-width: 3; }
.mouse .part { fill: #F0F3F1; stroke: var(--rule); stroke-width: 2.5; }
.mouse .part.tested { fill: var(--accent-soft); stroke: var(--accent); }
.mouse .part.held { fill: var(--accent); stroke: var(--accent); }
.scroll { display: grid; gap: 8px; justify-items: center; }
.arrow {
  width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.125rem; color: var(--muted);
  background: #F0F3F1; border: 2px solid var(--line); border-radius: 10px;
}
.arrow.tested { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.arrow.held { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.scroll-label { font-size: .8125rem; color: var(--muted); }
.hint { margin: 0; text-align: center; color: var(--muted); }
.readouts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.readouts div { padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
.readouts dt { font-size: .8125rem; font-weight: 700; color: var(--muted); }
.readouts dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 700; min-height: 1.9rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.readouts dd.warn { color: #C0392B; }
.reset-row { display: flex; justify-content: center; }
.reset {
  min-height: 44px; padding: 6px 24px; font: inherit; font-weight: 700; color: var(--ink); background: var(--panel);
  border: 2px solid var(--line); border-radius: 999px; cursor: pointer;
}
.reset:hover, .reset:focus-visible { border-color: var(--accent); outline: none; }
.notes { margin: 0; padding-left: 1.25rem; color: var(--muted); }