.tt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tt-head .row{gap:6px}
.tt-live{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px;text-align:center}
.tt-live div{background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 4px}
.tt-live b{display:block;font-size:clamp(19px,5.4vw,28px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.tt-live div:first-child b{color:var(--brand)}
.tt-live span{font-size:12px;color:var(--muted)}
.tt-box{margin:14px 0 10px;padding:16px;border-radius:var(--radius);background:var(--brand-soft)}
.tt-target{font-size:clamp(19px,4.8vw,24px);line-height:1.6;font-weight:600;letter-spacing:.01em;margin-bottom:12px;word-break:keep-all;color:var(--muted)}
.tt-target span{border-radius:3px;transition:color .08s,background .08s}
.tt-target .ok{color:var(--text)}
.tt-target .bad{color:var(--bad);background:var(--bad-soft);text-decoration:underline wavy;text-underline-offset:4px}
.tt-target .bad.sp{background:var(--bad)}
.tt-target .pend{color:var(--text);background:var(--surface)}
.tt-target .cur{box-shadow:inset 0 -3px 0 var(--brand);color:var(--text)}
@media (prefers-reduced-motion:no-preference){.tt-target .cur{animation:tt-blink 1s steps(2) infinite}}
@keyframes tt-blink{50%{box-shadow:inset 0 -3px 0 transparent}}
.tt-input{font-size:18px!important;min-height:52px;background:var(--surface)}
.tt-input.err{border-color:var(--bad)}
.tt-next{margin:10px 0 0;font-size:14px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-next span:first-child{display:inline-block;font-size:12px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--surface);margin-right:4px}
.tt-key-bad{color:var(--bad);font-weight:700}
.tt-unit{font-size:.45em;margin-left:4px;font-weight:700}
.tt-grade{display:inline-block;margin-top:8px;padding:4px 14px;border-radius:999px;background:var(--surface);font-weight:800;font-size:17px}