[hidden] { display:none !important; }
.practice-modes { display:flex; gap:6px; padding:5px; border:1px solid var(--border-dark); border-radius:10px; margin-bottom:20px; width:fit-content; }
.practice-modes button { border:0; border-radius:6px; padding:10px 20px; background:transparent; color:var(--muted); cursor:pointer; font-weight:700; }
.practice-modes button[aria-pressed=true] { background:var(--accent); color:var(--bg-deep); }
.practice-modes button:focus-visible { outline:2px solid var(--text-light); outline-offset:2px; }
.practice-panel { text-align:center; }
.practice-top { display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; }
.practice-top h2 { margin:0; font-size:1.4rem; letter-spacing:-.03em; }
.practice-intro { color:var(--muted); text-align:left; margin:10px 0 22px; }
.practice-score { display:flex; justify-content:center; gap:22px; color:var(--muted); font:12px var(--mono); }
.practice-word { font:600 clamp(30px,6vw,50px) var(--mono); letter-spacing:.16em; margin:25px 0 18px; min-height:60px; }
.practice-word span { display:inline-block; padding-bottom:6px; border-bottom:3px solid transparent; }
.practice-word .next { border-bottom-color:var(--accent); }
.practice-word .correct { color:var(--accent); }
.practice-word .incorrect { color:#ff6b6b; background:#ff6b6b18; text-decoration:underline wavy; }
.practice-input-label { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.practice-input { width:min(100%,340px); padding:9px 16px; text-align:center; font:20px var(--mono); color:var(--text-light); background:var(--bg-deep); border:1px solid var(--border-dark); border-radius:6px; }
.practice-input:focus { outline:2px solid var(--accent); outline-offset:2px; }
.practice-status { color:var(--muted); font-size:12px; min-height:20px; margin:10px 0 0; }
.practice-hands { display:flex; justify-content:center; gap:28px; margin:10px auto 0; max-width:440px; }
.practice-hand { width:calc(50% - 14px); }
.hand-palm { fill:#182c28; stroke:#3c5c52; stroke-width:2; }
.hand-finger { fill:#213c33; stroke:var(--finger-color); stroke-width:2; }
.hand-joint { fill:none; stroke:#638879; stroke-width:1; }
.hand-finger.active-finger { fill:var(--finger-color); stroke:var(--text-light); stroke-width:3; }
.finger-guide { margin:0 0 14px; font:600 14px var(--mono); color:var(--accent); }
.practice-keyboard { max-width:650px; margin:auto; }
.practice-key-row { display:flex; justify-content:center; gap:5px; margin:5px 0; }
.practice-key { width:9%; max-width:48px; aspect-ratio:1.15; display:grid; place-items:center; background:var(--bg-deep); border:1px solid var(--border-dark); border-bottom:3px solid var(--finger-color); border-radius:5px; color:var(--text-light); font:13px var(--mono); }
.practice-key.next-key { background:var(--finger-color); color:#07140d; outline:2px solid var(--text-light); outline-offset:2px; font-weight:bold; }
.practice-key.space-key { width:45%; max-width:280px; aspect-ratio:7; }
[data-finger=left-pinky], [data-finger=right-pinky] { --finger-color:#d4eedf; }
[data-finger=left-ring], [data-finger=right-ring] { --finger-color:#92c9a8; }
[data-finger=left-middle], [data-finger=right-middle] { --finger-color:#54ad87; }
[data-finger=left-index], [data-finger=right-index] { --finger-color:#19c37d; }
[data-finger=thumbs] { --finger-color:#b6c9c0; }
.practice-legend { color:var(--muted); font-size:11px; margin:16px 0 0; }
@media(max-width:540px) { .practice-top { flex-wrap:wrap; } .practice-top h2 { font-size:1.15rem; } .practice-modes { width:100%; } .practice-modes button { flex:1; padding:10px; font-size:13px; } .practice-hands { gap:8px; } .practice-hand { width:46%; } .practice-key-row { gap:3px; } .practice-key { font-size:11px; } .practice-intro { font-size:13px; } }

/* Hand colours are instructional: blue left, red right. Finger shades match hand and keyboard. */
[data-finger=left-pinky] { --finger-color:#c5e4ff; }
[data-finger=left-ring] { --finger-color:#99cbff; }
[data-finger=left-middle] { --finger-color:#70b5ff; }
[data-finger=left-index] { --finger-color:#46a0ff; }
[data-finger=right-index] { --finger-color:#ff8b92; }
[data-finger=right-middle] { --finger-color:#ffa4ac; }
[data-finger=right-ring] { --finger-color:#ffc1c6; }
[data-finger=right-pinky] { --finger-color:#ffdde0; }
[data-finger=right-thumb] { --finger-color:#ff8b92; }
[data-finger=left-thumb] { --finger-color:#526b7f; }
.practice-hand-choice { display:block; margin:4px 0 20px; color:var(--muted); font-size:13px; }
.practice-hand-choice select { margin-left:8px; padding:8px 12px; border:1px solid var(--border-dark); border-radius:6px; background:var(--bg-deep); color:var(--text-light); }
.practice-hand-choice select:focus-visible { outline:2px solid var(--accent); }

/* A wrong key flashes the expected glyph; it never becomes typed text. */
.practice-miss { animation: practice-miss 350ms ease-out; }
@keyframes practice-miss {
  0%, 45% { color: #ff6b6b; background-color: #ff6b6b33; }
  100% { background-color: transparent; }
}