/* The typing test on /typing-test/*. Sits on pages.css, switches.css and kb.css. */
.tt-band{background:#F4F4F0;border-bottom:1px solid var(--hairline);padding:22px 0 30px;margin-top:6px}
.tt-in{max-width:900px;margin:0 auto;padding:0 22px}
.tt-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.tt-bar h1{margin:0;font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.02em}
.tt-stats{display:flex;gap:26px;font-size:13px;color:var(--text-2)}
.tt-stats b{display:block;font-size:30px;line-height:1.1;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tt-area{position:relative;margin-top:18px}
.tt-box{height:138px;overflow:hidden;font-family:var(--sans);font-size:28px;line-height:46px;letter-spacing:-.005em;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.tt-box.dim{opacity:.12;filter:blur(2px)}
.tt-words{position:relative;transition:transform .12s ease-out;color:#9aa093}
.tt-words{font-weight:500}
.tt-words w{display:inline-block;margin-right:.5em;white-space:nowrap}
/* The word you are on: bold green on a soft green pill, the playground's own. */
.tt-words w.cur c:not(.ok):not(.bad){color:#65A30D}
.tt-words w.cur{font-weight:650;background:rgba(132,204,22,.18);border-radius:8px;box-shadow:0 0 0 4px rgba(132,204,22,.18)}
.tt-words c{display:inline}
.tt-words c.ok{color:var(--ink)}
.tt-words c.bad{color:#DC2626;text-decoration:underline;text-decoration-thickness:1.5px}
.tt-words w.miss{text-decoration:underline;text-decoration-color:#DC2626;text-decoration-thickness:1.5px}
.tt-words c.at{box-shadow:-2px 0 0 #65A30D}
.tt-words c.end{box-shadow:2px 0 0 #65A30D}
.tt-result{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center;align-content:center}
.tt-result[hidden]{display:none}
.tt-result b{display:block;font-size:46px;line-height:1.1;color:var(--ink);letter-spacing:-.03em}
.tt-result span{font-size:13px;color:var(--text-2)}
.tt-hint{min-height:20px;margin:6px 0 0;font-size:13.5px;color:var(--text-2);text-align:center}
.tt-band .kb-wrap{margin-top:14px}
.tt-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:26px auto 0;max-width:828px}
.switchpick{position:relative;display:flex;align-items:center;gap:12px}
.sp-label{font-size:14px;color:var(--text-2)}
.sp-btn{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--hairline);
  border-radius:999px;padding:9px 14px 9px 10px;font:600 14px var(--sans);color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(26,46,5,.05)}
.sp-btn:hover{border-color:#0000001f}
.sw{position:relative;display:block;width:17px;height:17px;border-radius:5px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.sw::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;
  background:linear-gradient(currentColor,currentColor) center/2px 7px no-repeat,linear-gradient(currentColor,currentColor) center/7px 2px no-repeat;opacity:.55}
.sp-caret{width:13px;height:13px;color:var(--muted);flex:0 0 auto}
.sp-menu{position:absolute;bottom:calc(100% + 10px);left:62px;z-index:40;width:290px;max-height:330px;overflow-y:auto;
  background:var(--card);border:1px solid var(--hairline);border-radius:16px;box-shadow:0 18px 44px -16px rgba(26,46,5,.28);padding:7px}
.sp-menu[hidden]{display:none}
.sp-group{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:11px 12px 5px}
.sp-item{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:9px 12px;border-radius:10px;
  font:500 14px var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.sp-item:hover{background:#1A2E050A}
.sp-item[aria-selected="true"]{background:#F4F4F0;font-weight:650}
.restart{display:flex;align-items:center;gap:7px;background:none;border:1px solid var(--hairline);border-radius:999px;padding:9px 20px;
  font:600 13px var(--sans);color:var(--text-2);cursor:pointer;line-height:1}
.restart:hover{color:var(--ink);border-color:#00000026}
.restart svg{width:14px;height:14px}
.tt-note{max-width:900px;margin:0 auto;padding:0 22px}
@media(max-width:700px){
  .tt-box{font-size:20px;line-height:34px;height:102px}
  .tt-stats{gap:18px}
  .tt-stats b{font-size:24px}
  .tt-result{grid-template-columns:1fr 1fr;row-gap:18px}
  .tt-result b{font-size:34px}
}
/* Keyboard test: keys you have pressed stay marked. */
.kb-key.tested .kb-face{box-shadow:inset 0 0 0 2px #65A30D,0 1px 0 color-mix(in srgb,var(--k) 70%,#fff) inset;filter:saturate(1.1) brightness(1.04)}
.kt-last{font-family:var(--mono);font-size:13px;color:var(--text-2);min-height:18px;margin-top:6px;text-align:center}
.kt-last b{color:var(--ink);font-size:16px}
.kt-held{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:30px;margin-top:10px}
.kt-held i{font-style:normal;font:600 12px var(--mono);padding:4px 9px;border-radius:7px;background:#fff;border:1px solid var(--hairline);color:var(--ink)}