/* Type the Verse (typing tutor). Classes prefixed ty-. */
.ty-root { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: #d8e8ff; color: #112; overflow: auto; font-family: var(--font); }
.ty-top { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; background: linear-gradient(#fff7c2, #ffe27a); border: 2px solid #3a2a00; padding: 6px; box-shadow: inset -2px -2px 0 #c79a1c, inset 2px 2px 0 #fff; flex-wrap: wrap; }
.ty-teacher { flex: 0 0 72px; height: 72px; background: #bfe3ff; border: 2px inset #fff; }
.ty-teacher .ty-mouth-bad { display: none; }
.ty-teacher.oops .ty-mouth-bad { display: block; }
.ty-teacher.oops .ty-mouth-ok { display: none; }
.ty-teacher.oops svg { transform: rotate(-4deg); }
.ty-ctl { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ty-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; font-size: 12px; font-weight: bold; }
.ty-row label { min-width: 48px; }
.ty-row .btn { margin-left: auto; }
.ty-sel { max-width: 100%; min-width: 0; }
.ty-speech { font: italic 12px "Comic Sans MS", "Comic Sans", cursive; background: #fff; border: 2px solid #222; border-radius: 10px; padding: 3px 7px; }
.ty-leds { display: flex; gap: 6px; flex: 0 0 auto; }
.ty-led { background: #000; border: 2px inset #888; padding: 2px 6px; text-align: center; min-width: 66px; }
.ty-led-l { display: block; font: 9px/1.2 var(--mono, monospace); color: #5cff6b; opacity: .7; letter-spacing: 1px; }
.ty-led-v { display: block; font: bold 22px/1.1 "Courier New", monospace; color: #ff2a2a; text-shadow: 0 0 6px #ff0000; letter-spacing: 1px; }
.ty-textwrap { position: relative; flex: 1 1 120px; min-height: 90px; display: flex; }
.ty-text { flex: 1; overflow: auto; background: #fffef0; border: 2px inset #fff; padding: 8px 10px; font: 20px/1.55 "Courier New", Courier, monospace; color: #555; cursor: text; word-break: normal; overflow-wrap: anywhere; }
.ty-w { display: inline-block; white-space: pre-wrap; }
.ty-c.ok { color: #0a9a1e; }
.ty-c.bad { color: #fff; background: #d11; }
.ty-c.cur { background: #ffe14a; color: #000; box-shadow: 0 2px 0 #000; animation: ty-blink 1s steps(2) infinite; }
.ty-c.nl { opacity: .5; }
@keyframes ty-blink { 50% { background: #ffd000; } }
html[data-motion="off"] .ty-c.cur { animation: none; }
.ty-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; resize: none; border: 0; padding: 0; font-size: 16px; cursor: text; }
.ty-kb { flex: 0 0 auto; background: #c9c9d4; border: 2px outset #fff; padding: 5px; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.ty-krow { display: flex; gap: 3px; }
.ty-krow.r1 { margin-left: 14px; } .ty-krow.r2 { margin-left: 28px; } .ty-krow.r3 { margin-left: 0; }
.ty-key { box-sizing: border-box; min-width: 22px; height: 20px; padding: 0 3px; display: inline-flex; align-items: center; justify-content: center; font: bold 11px "Courier New", monospace; background: #f4f4f8; color: #222; border: 1px solid #555; border-bottom-width: 3px; border-radius: 3px; }
.ty-key.wide { min-width: 52px; }
.ty-key.space { min-width: 220px; }
.ty-key.home { background: #cfe8ff; }
.ty-key.home::after { content: ""; }
.ty-key.next { background: #ffe14a; color: #000; border-color: #b00; outline: 2px solid #f60; transform: translateY(1px); box-shadow: 0 0 8px #ff0; }
.ty-res { text-align: center; }
.ty-restbl { margin: 4px auto; font-size: 14px; }
.ty-restbl td { padding: 1px 8px; text-align: left; }
.ty-star { text-align: center; font: bold 14px "Comic Sans MS", cursive; color: #a8740a; }
@media (max-width: 640px) {
  .ty-kb { display: none; }
  .ty-top { flex-direction: column; align-items: stretch; }
  .ty-teacher { align-self: center; }
  .ty-ctl { flex: 0 0 auto; }
  .ty-leds { justify-content: space-between; width: 100%; }
  .ty-led { flex: 1 1 0; min-width: 0; }
  .ty-led-v { font-size: 18px; }
  .ty-text { font-size: 17px; }
  .ty-root { max-width: 100%; box-sizing: border-box; }
}