/* Typing trainer */
.ty-stage { width: min(96vw, 56.25rem); display: grid; justify-items: center; }
.ty-line { font: 600 clamp(1.625rem, 5.4vw, 2.75rem)/1.5 var(--f-m), var(--cjk); display: flex; flex-wrap: wrap; gap: 0 .02em; justify-content: center; align-items: flex-end; min-height: 3em; }
:lang(ja) .ty-line, :lang(ko) .ty-line, :lang(zh-Hant-TW) .ty-line { font-family: var(--f-m), var(--cjk); }
.ty-ch { position: relative; color: var(--ink2); opacity: .55; white-space: pre; border-bottom: .25rem solid transparent; }
.ty-ch.done { color: var(--ink); opacity: 1; }
.ty-ch.cur { opacity: 1; color: var(--ink); background: #FFF6D8; border-bottom-color: var(--ink); }
.ty-ch.cur[data-part]::after { content: attr(data-part); position: absolute; left: 0; right: 0; top: -1.1em; font-size: .6em; text-align: center; color: var(--sky); }
.ty-ch.miss { animation: shake .3s; border-bottom-color: var(--tom); }
.ty-hint { flex-basis: 100%; text-align: center; font: 600 1.375rem/1.4 var(--f-m); color: var(--ink2); letter-spacing: .1em; }
.ty-word { display: inline-grid; justify-items: center; margin: 0 .4em; }
.ty-zh { font: 700 .8em/1.2 var(--f-b), var(--cjk-tw); color: var(--ink); }
.ty-zy { display: flex; gap: .3em; font-size: .9em; }
.ty-syl { display: inline-flex; }
.kb { display: grid; gap: .375rem; width: min(100%, 98vw, 47.5rem); margin: .5rem auto 0; user-select: none; }
.kb-row { display: flex; gap: .3125rem; justify-content: center; padding-left: calc(var(--i, 0) * .75rem); }
.kb-key { position: relative; flex: 1 1 0; min-width: 0; max-width: 3.5rem; height: clamp(2.75rem, 7vw, 3.5rem); border: 1.5px solid var(--edge); background: #fff; border-radius: .5rem; font: 600 clamp(.8125rem, 2.6vw, 1.1875rem)/1 var(--f-m), var(--cjk); color: var(--ink); padding: 0; cursor: pointer; }
.kb-key.next { background: var(--sun); border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.kb-key.on { background: var(--chip); }
.kb-space { max-width: 20rem; flex: 6 1 0; font-size: .8125rem; }
.kb-shift { max-width: 5.625rem; flex: 1.5 1 0; }
.kb-key.heat { background: color-mix(in srgb, #F7B9AA calc(var(--heat) * 100%), #fff); }
.kb-err { position: absolute; right: 2px; bottom: 1px; font: 700 .625rem/1 var(--f-b); color: var(--ink); }
.ty-result { display: grid; gap: .375rem; justify-items: center; }
#tool .kb { opacity: .9; pointer-events: none; }
#tool .kb-key { height: clamp(2rem, 7vw, 3rem); }
@media (min-width: 700px) and (min-aspect-ratio: 5/4) {
  .ho.ho-stack { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar" "main" "foot"; }
  .ho.ho-stack .ho-foot { width: auto; }
}

/* While practising, keys are full height for fingers; narrow phones keep the real key layout, so keys are narrower than 56 px. */
.ho .kb-key { height: 3.5rem; }
.kb[aria-hidden="true"] .kb-key { pointer-events: none; }