/* Typing and Caret */
.caret {
    position: absolute;
    width: 2px;
    height: 1.5em;
    background-color: var(--caret-color);
    transition: left 0.1s cubic-bezier(0.2, 0, 0, 1), top 0.1s cubic-bezier(0.2, 0, 0, 1);
    border-radius: 1px;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: pulse-caret 1.5s infinite;
}

.caret-block {
    width: 0.6em;
    background-color: var(--caret-color);
    opacity: 0.5;
    animation: pulse-caret 1s infinite;
}

.caret-underline {
    width: 0.6em;
    height: 3px;
    top: auto !important;
    bottom: -2px;
    background-color: var(--caret-color);
    animation: pulse-caret 1s infinite;
}

/* Typing Feedback */
.correct {
    color: #34d399;
    text-shadow: 0 0 5px rgba(52, 211, 153, 0.4);
}

.incorrect {
    color: var(--error-color);
    text-decoration: underline;
    text-decoration-color: var(--error-color);
}

.pending {
    color: #555555;
}

/* Particles */
.particle {
    position: absolute;
    pointer-events: none;
    background: #34d399;
    border-radius: 50%;
    animation: pop 0.4s ease-out forwards;
}