*{box-sizing:border-box}body{margin:0;background:#f5f8fc;color:#18243b;font:15px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}a{color:#4354c9;text-decoration:none}.wrap{max-width:1080px;margin:auto;padding:0 22px}.narrow{max-width:540px;margin:70px auto}.nav{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:76px}.brand{font-size:23px;font-weight:800;color:#17213c}.mark{display:inline-grid;place-items:center;width:38px;height:38px;background:#6257d9;color:white;border-radius:11px;margin-right:9px}header{background:white;border-bottom:1px solid #e6eaf2}nav{display:flex;gap:20px;flex-wrap:wrap}main{min-height:calc(100vh - 150px);padding-top:42px!important;padding-bottom:70px!important}.panel{background:#fff;border:1px solid #e5eaf3;border-radius:18px;padding:28px;box-shadow:0 10px 40px #2736590a;margin-bottom:20px}.hero{display:flex;justify-content:space-between;align-items:center;gap:20px}h1{font-size:32px;line-height:1.2;margin:0 0 14px}h2{margin-top:0}p,.muted{color:#6d7890}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:25px 0}.stat{background:#f6f7fc;padding:16px;border-radius:12px}.stat strong{display:block;font-size:27px;color:#252e4a}.words{font-size:27px;line-height:2;letter-spacing:.3px;max-height:126px;overflow:hidden;word-break:normal}.words span{margin-right:9px;color:#818ba0}.words span.good{color:#17a66d}.words span.bad{color:#e24e58;background:#fff0f1}.words span.current{color:#1d2542;background:#e7e6ff;border-radius:3px}input,textarea,select{display:block;width:100%;padding:13px 14px;border:1px solid #dce2ed;border-radius:9px;font:inherit;margin-top:7px;background:white;color:#18243b}input:focus,textarea:focus{outline:2px solid #aaa5ef}label{display:block;font-weight:600;margin:14px 0}button,.button{display:inline-block;background:#6257d9;color:white;border:0;border-radius:10px;padding:12px 19px;cursor:pointer;font:600 14px system-ui}button:hover,.button:hover{background:#5147c1;color:white}.secondary{background:#e9eafa;color:#4c49a0}.secondary:hover{background:#deddf8;color:#4c49a0}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.error{color:#c63745}.success{color:#15845a}.notice{padding:12px;background:#fff8e7;border-radius:10px;color:#79561b}.result{background:#f0f9f4;padding:18px;border-radius:12px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}table{border-collapse:collapse;width:100%}td,th{text-align:left;padding:12px;border-bottom:1px solid #e8ebf3}th{color:#7a8498;font-size:12px;text-transform:uppercase}footer{border-top:1px solid #e6eaf2;padding:20px 0;color:#8992a3}small{color:#7a8498}@media(max-width:680px){.nav,.hero{align-items:flex-start;flex-direction:column;padding-top:15px;padding-bottom:15px}nav{gap:12px}.grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.words{font-size:21px;max-height:112px}.panel{padding:19px}h1{font-size:26px}}

/* TypeSprint v1.0.2: per-letter highlights with a smooth scrolling word window */
.words.typing-viewport {
  position: relative;
  height: 98px;
  max-height: none;
  overflow: hidden;
  cursor: text;
  padding: 0 2px;
  line-height: 1.8;
  letter-spacing: 0;
  user-select: none;
  -webkit-user-select: none;
  contain: layout paint;
}
.typing-track {
  width: 100%;
  display: flex;
  align-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .48em;
  row-gap: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 190ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.typing-resetting .typing-track { transition: none; }
.words .typing-word {
  display: inline-flex;
  white-space: nowrap;
  align-items: baseline;
  margin: 0;
  padding: 0;
  color: #7b879c;
  border-radius: 3px;
  flex: none;
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0;
}
.words .typing-word-active { color: #263653; background: rgba(107, 98, 216, .06); }
.words .typing-word-correct { color: #129b6c; background: none; }
.words .typing-word-incorrect { background: none; }
.words .typing-letter { display: inline-block; margin: 0; color: inherit; }
.words .typing-letter.typing-correct { color: #128d64; background: none; }
.words .typing-letter.typing-wrong {
  color: #fff;
  background: #d74755;
  border-radius: 2px;
}
.words .typing-letter.typing-extra {
  color: #b32e43;
  background: #ffe3e7;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #cf4354;
}
.words .typing-caret {
  display: inline-block;
  flex: none;
  height: 1.15em;
  width: 2px;
  margin-left: -1px;
  margin-right: -1px;
  border-radius: 2px;
  background: #6552d5;
  vertical-align: -0.18em;
  align-self: center;
  animation: typing-caret-blink 1s steps(1, end) infinite;
  pointer-events: none;
}
@keyframes typing-caret-blink { 0%, 55% {opacity:1;} 56%, 100% {opacity:.13;} }
#typing { font-size: 18px; letter-spacing: .02em; caret-color: #6552d5; }
#typing:disabled { background: #f5f7fb; }
.typing-hint {display:flex;align-items:center;gap:8px;color:#748096;font-size:12px;margin-top:10px;}
.typing-hint-dot {width:7px;height:7px;flex:none;border-radius:50%;background:#159e73;box-shadow:0 0 0 3px #e5f6ee;}
@media(max-width:680px) {
  .words.typing-viewport { font-size:22px; height: 80px; line-height: 1.8; }
  .typing-track {column-gap: .36em;}
  #typing { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-track { transition: none; }
  .words .typing-caret { animation: none; }
}

/* v1.0.2: one active word, visibly short input just like a typing-test field */
#typing {
  width: min(100%, 410px);
  max-width: 410px;
  min-height: 51px;
  font-size: 20px;
}
#typing::placeholder { color: #a6afbd; font-size: 15px; }
.typing-hint small { color: #8c95a7; font-size: 11px; font-weight: 500; }
@media(max-width:680px) { #typing { max-width: 100%; font-size: 18px; } }

/* v1.0.3 responsive one-word input + visible letter tracking */
#typing { display:block!important; width:min(100%,350px)!important; max-width:350px!important; height:54px; overflow:hidden; white-space:nowrap; }
.words .typing-word-active { background:rgba(100,87,217,.10); border-radius:4px; }
.words .typing-word-active .typing-letter.typing-correct {color:#008f61; background:rgba(22,163,109,.15); border-radius:2px;}
.words .typing-word-active .typing-letter.typing-wrong {color:#fff; background:#db364f;border-radius:2px;}
.words .typing-letter.typing-missing {color:#dc3545;text-decoration:underline;text-decoration-color:#dc3545;}
.typing-hint .typing-version {font-weight:700;color:#5147c1;}
@media(max-width:680px){#typing {max-width:100%!important;width:100%!important;}}

/* HARD FIX 1.0.4: each character is individual, no active-word rectangle */
.words.ts-viewport {height:105px;max-height:none;overflow:hidden;position:relative;cursor:text;contain:layout paint;user-select:none;line-height:1.8;padding:0 2px}
.ts-track{display:flex;align-content:flex-start;align-items:baseline;flex-wrap:wrap;column-gap:.46em;row-gap:0;transform:translate3d(0,0,0);transition:transform .18s ease-out;will-change:transform}
.ts-no-transition .ts-track{transition:none}
.words .ts-word,.words .ts-word.ts-active,.words .ts-word.ts-all-good,.words .ts-word.ts-had-error {display:inline-flex;align-items:baseline;white-space:nowrap;flex:none;margin:0;padding:0;background:transparent!important;color:#8190a6!important;border-radius:0!important;font-variant-ligatures:none;letter-spacing:.01em}
.words .ts-letter {display:inline-block;margin:0;padding:0;color:inherit;background:transparent;border-radius:0;transition:color 65ms linear}
.words .ts-word .ts-letter.ts-good {color:#06966c!important;background:transparent!important}
.words .ts-word .ts-letter.ts-bad {color:#e54858!important;background:transparent!important;text-decoration:underline;text-decoration-color:#e54858;text-underline-offset:4px}
.words .ts-word .ts-letter.ts-missing{color:#e54858!important;background:transparent!important; text-decoration:underline;text-decoration-color:#e54858;text-decoration-style:dotted;text-underline-offset:4px}
.words .ts-word .ts-letter.ts-extra{color:#e54858!important;background:transparent!important;text-decoration:underline;text-decoration-color:#e54858;text-underline-offset:4px}
.words .ts-caret{display:inline-block;flex:none;width:2px;height:1.13em;background:#6257d9;margin:0 -1px;border-radius:2px;align-self:center;animation:ts-blink 1s steps(1,end) infinite}
@keyframes ts-blink {0%,55%{opacity:1}56%,100%{opacity:.12}}
#typing{display:block!important;width:min(100%,340px)!important;max-width:340px!important;height:52px!important;min-height:52px;white-space:nowrap;overflow:hidden;font-size:18px!important;letter-spacing:0}
.ts-engine-status{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;color:#607187}
.ts-status-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#12a37b}
@media(max-width:680px){.words.ts-viewport{height:86px;font-size:22px}#typing{width:100%!important;max-width:100%!important;font-size:16px!important}}
@media(prefers-reduced-motion:reduce){.ts-track{transition:none}.ts-caret{animation:none}}