/* typing 专用，依赖 /home.css 变量与 /tool.css */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0 16px; }
.stats > div, .res-grid > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lbl { font: 500 12px/1 var(--mono); color: var(--ink-2); letter-spacing: .08em; }
.stats .val { font: 600 clamp(20px, 3vw, 28px)/1.1 var(--mono); color: var(--result); font-variant-numeric: tabular-nums; }

.ty-text {
  min-height: 150px;
  padding: 16px 14px;
  border: 1px solid var(--rule);
  font: 19px/1.9 var(--sans);
  color: var(--ink-2);
  word-break: break-word;
  user-select: none;
}
.ty-text.en { font: 17px/1.9 var(--mono); }
.ty-text span { transition: color .1s var(--ease); }
.ty-text .ok { color: var(--ink); }
.ty-text .bad { color: var(--accent); text-decoration: underline wavy; text-underline-offset: 4px; }
.ty-text .cur { background: var(--hover); box-shadow: inset 0 -2px 0 var(--ink); }
#input { margin-top: 12px; min-height: 110px; font-size: 16px; }

.result { margin-top: 24px; padding-top: 12px; border-top: 2px solid var(--ink); }
.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 8px 0 16px; }
.big { font: 700 clamp(40px, 8vw, 72px)/1 var(--mono); color: var(--result); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .ty-text span { transition: none; }
}