[data-finger='L-pinky'], [data-finger='R-pinky'] { --finger-bg: #e9abc1; --finger-ink: #9b2252; --finger-night: #ffb3d2; }
[data-finger='L-ring'], [data-finger='R-ring'] { --finger-bg: #efd093; --finger-ink: #835007; --finger-night: #f3d07b; }
[data-finger='L-middle'], [data-finger='R-middle'] { --finger-bg: #a9d6bf; --finger-ink: #1a6a4b; --finger-night: #8fdfb8; }
[data-finger='L-index'] { --finger-bg: #a8cee8; --finger-ink: #155d99; --finger-night: #9cd7ff; }
[data-finger='R-index'] { --finger-bg: #c9b8e7; --finger-ink: #7446a5; --finger-night: #d5b8ff; }
[data-finger='thumb'] { --finger-bg: #a6d8df; --finger-ink: #146575; --finger-night: #9ae3ec; }
.keyboard-frame .kbd-key[data-finger] { background: var(--finger-bg); color: #243247; border-color: #7b8ea1; }
.typing-characters .t-char[data-finger]:not(.current):not(.correct):not(.wrong) { color: var(--finger-ink); }
[data-theme='dark'] .typing-characters .t-char[data-finger]:not(.current):not(.correct):not(.wrong) { color: var(--finger-night); }
.typing-characters .t-char.space-char { min-width: 1.25ch; background: transparent; }
.typing-characters .t-char.space-char::after { content: ''; width: .65em; height: 2px; border-radius: 2px; background: currentColor; align-self: flex-end; margin-bottom: .3em; opacity: .8; }
.typing-characters .t-char.current.space-char { background: var(--accent-blue); }
.typing-characters .t-char.current.space-char::after { opacity: 1; }
.alphabet-finger-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; padding: 16px 6px 4px; color: var(--text-primary); font-size: 12px; line-height: 1.5; }
.alphabet-finger-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.alphabet-finger-legend i { width: 12px; height: 12px; border: 1px solid #66788b; border-radius: 3px; background: var(--finger-bg); flex: none; }
@media (forced-colors: active) { .alphabet-finger-legend i { background: Canvas; } .typing-characters .t-char.space-char::after { background: CanvasText; } }