/* Teclado · estilos propios */
.topbar .top-actions { margin-left: auto; }
.wrap { max-width: 960px; margin: 0 auto; display: grid; gap: 16px; padding-top: 12px; }
.settings { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.live { display: flex; justify-content: center; gap: 36px; }
.live span { display: flex; flex-direction: column; align-items: center; }
.live b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.1; }
.live small { font-size: 11px; color: var(--text-3); }
.typebox { position: relative; height: calc(2.1em * 3 + 32px); padding: 16px 22px; overflow: hidden; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); font: 400 24px/2.1 var(--mono); cursor: text; outline: none; }
.typebox:focus-within { border-color: var(--accent-line); }
.typebox.over { opacity: .45; }
.words { transition: transform .15s var(--ease); color: var(--text-3); overflow-wrap: break-word; }
.w { display: inline; white-space: nowrap; }
.w .ok { color: var(--text); }
.w .x { color: var(--danger); text-decoration: underline; text-decoration-thickness: 2px; }
.w .extra { opacity: .7; }
.w.wrong { text-decoration: underline wavy var(--danger); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.caret { position: relative; }
.caret::before { content: ""; position: absolute; left: -1px; top: .35em; bottom: .35em; width: 2px; background: var(--accent); border-radius: 1px; animation: blink 1s steps(1) infinite; }
.caret.end::before { left: 0; }
.caret.end { display: inline-block; width: 0; }
@keyframes blink { 50% { opacity: 0; } }
#hidden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; top: 0; }
.focus-msg { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--panel) 80%, transparent); backdrop-filter: blur(3px); font: 500 14px var(--sans); color: var(--text-2); }
.hint { text-align: center; margin: -6px 0 0; display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; }
.hint kbd { margin: 0 1px; }
.result .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.result .stat-v { font-size: 22px; }
@media (max-width: 700px) { .typebox { font-size: 18px; } .live { gap: 20px; } }