style.css

        html { transition: background-color 0.3s, color 0.3s; }
        body { transition: background-color 0.3s, color 0.3s; }

        [data-theme="dark"] body { background-color: #020617; color: #e2e8f0; }
        [data-theme="light"] body { background-color: #f8fafc; color: #0f172a; }

        .char-correct { color: #22c55e; }
        .char-wrong { color: #ef4444; background: rgba(239,68,68,0.15); border-radius: 2px; }
        .char-current { border-bottom: 2px solid; animation: blink 1s step-end infinite; }
        .char-waiting { opacity: 0.4; }

        [data-theme="dark"] .char-current { color: #e2e8f0; border-bottom-color: #6366f1; }
        [data-theme="light"] .char-current { color: #1e293b; border-bottom-color: #6366f1; }

        @keyframes blink { 50% { border-bottom-color: transparent; } }

        .char-correct-space, .char-wrong-space, .char-current-space {
            position: relative;
        }

        /* Theme transitions for all elements */
        .theme-transition, body, div, button, input, span, p, h1, h2, h3, label, nav, header, footer, section, article {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        /* Hide scrollbars on text display */
        #textDisplay::-webkit-scrollbar { width: 4px; }
        #textDisplay::-webkit-scrollbar-thumb { background: #475569; border-radius: 2px; }

        .lang-btn { transition: all 0.15s ease; }
        .lang-btn:hover { transform: translateY(-1px); }

        #textDisplay {
            white-space: pre-wrap;
            word-break: break-word;
        }