.klahvu_lessons_line {
  min-height: 42px;
  margin-bottom: 12px;
  font-family: "Courier New", monospace;
  font-size: 25px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.klahvu_lessons_char_done { opacity: 0.4; }

.klahvu_lessons_char_current {
  background: #ffe08a;
  border-radius: 3px;
}

.klahvu_lessons_char_wrong {
  background: #ffb0b0;
  border-radius: 3px;
}

body.dark .klahvu_lessons_char_current { background: #6b5a1f; }
body.dark .klahvu_lessons_char_wrong { background: #7d2a2a; }

.klahvu_lessons_input {
  width: 100%;
  max-width: 520px;
  height: 42px;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 20px;
  border: 2px solid #c5c5c5;
  border-radius: 6px;
  background: #ffffff;
  color: var(--fg);
}

body.dark .klahvu_lessons_input {
  background: #1f2227;
  border-color: #3a3f47;
}

.klahvu_lessons_input[hidden] { display: none; }

.klahvu_lessons_input:focus {
  outline: 2px solid currentColor;
  outline-offset: 0;
  border-color: currentColor;
}

.klahvu_keyboard_frame { container-type: inline-size; }

.klahvu_keyboard {
  --unit: 0.18797cqw;
  display: grid;
  grid-template-columns: repeat(var(--keyboard-quarters), 1fr);
  grid-auto-rows: calc(28 * var(--unit));
  gap: calc(8 * var(--unit));
  margin: 0 0 12px;
}

.klahvu_key,
.klahvu_fingers li { --finger-color: var(--finger-light); }

body.dark .klahvu_key,
body.dark .klahvu_fingers li { --finger-color: var(--finger-dark); }

.klahvu_key {
  position: relative;
  grid-column: var(--col) / span var(--span);
  grid-row: var(--row) / span var(--rowspan);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--finger-color);
  border-radius: calc(5 * var(--unit));
  box-shadow: 0 0 calc(2 * var(--unit)) var(--finger-color);
}

.klahvu_key_lesson { background: #eef4ff; }

.klahvu_key_next {
  background: #f0f0ff;
  box-shadow: 0 0 calc(5 * var(--unit)) calc(2 * var(--unit)) var(--finger-color);
}

body.dark .klahvu_key_lesson { background: #2a2f3a; }
body.dark .klahvu_key_next { background: #606060; }

.klahvu_key:not(.klahvu_key_word) .klahvu_key_main,
.klahvu_key_top,
.klahvu_key_low,
.klahvu_key_altgr {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 700;
}

.klahvu_key_main { font-size: calc(13 * var(--unit)); }

.klahvu_key_word .klahvu_key_main {
  font-size: calc(11 * var(--unit));
  white-space: nowrap;
}

.klahvu_key_top,
.klahvu_key_low,
.klahvu_key_altgr {
  position: absolute;
  left: calc(4 * var(--unit));
  font-size: calc(8 * var(--unit));
}

.klahvu_key_top { top: calc(2 * var(--unit)); }

.klahvu_key_low { bottom: calc(3 * var(--unit)); }

.klahvu_key_altgr {
  left: auto;
  right: calc(6 * var(--unit));
  bottom: calc(3 * var(--unit));
}

.klahvu_fingers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.klahvu_fingers li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.klahvu_finger_dot {
  width: 20px;
  height: 15px;
  border: 1px solid var(--finger-color);
  border-radius: 3px;
  box-shadow: 0 0 2px var(--finger-color);
}

@media (max-width: 560px) {
  .klahvu_key_top,
  .klahvu_key_altgr { display: none; }

  .klahvu_lessons_line { font-size: 20px; }
}