body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.typing-area { font-family: "Consolas", "Cascadia Mono", monospace; font-size: 1.4rem; line-height: 1.8;
               white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.typing-area .ch { white-space: pre-wrap; }
.typing-area .ch-correct { color: #198754; }
.typing-area .ch-wrong { color: #fff; background-color: #dc3545; }
.typing-area .ch-pending { color: #6c757d; }
.typing-area .ch-current { text-decoration: underline; }

.virtual-keyboard { display: grid; grid-template-rows: repeat(4, auto); gap: 4px; max-width: 760px; }
.vk-row { display: flex; gap: 4px; justify-content: center; }
.vk-key { min-width: 36px; padding: 8px 6px; text-align: center; border: 1px solid #ced4da;
          border-radius: 4px; background: #fff; font-family: monospace; font-size: 0.9rem; }
.vk-key.next { background: #ffc107; font-weight: bold; }
.vk-key.finger-1 { background-color: #ffd6d6; }
.vk-key.finger-2 { background-color: #ffe7c8; }
.vk-key.finger-3 { background-color: #fff7c8; }
.vk-key.finger-4 { background-color: #d6f3d6; }
.vk-key.finger-5 { background-color: #d6f1ff; }
.vk-key.finger-6 { background-color: #d6dcff; }
.vk-key.finger-7 { background-color: #e3d6ff; }
.vk-key.finger-8 { background-color: #f3d6ff; }
.vk-key.finger-thumb { background-color: #eaeaea; }

.metrics-bar { display: flex; gap: 1rem; flex-wrap: wrap; }
.metric { background: #fff; border: 1px solid #dee2e6; padding: 8px 12px; border-radius: 4px; min-width: 100px; }
.metric .label { font-size: .75rem; color: #6c757d; }
.metric .value { font-size: 1.25rem; font-weight: bold; }