.ath-module-helper__typingStudio {
    font-size: 1.5rem
}

.ath-module-helper__typingTopbar {
    padding: .75rem .9rem
}

.ath-module-helper__typingTargetWrap {
    padding: 1rem
}

.ath-module-helper__typingTargetLabel {
    font-size: .8rem
}

.ath-module-helper__typingTarget {
    font-size: 1.5rem;
    line-height: 1.85;
    min-height: 5.25rem;
    padding: .85rem .9rem
}

.ath-module-helper__typingCharacter {
    font-size: 1.5rem
}

.ath-module-helper__typingWork {
    gap: 1rem;
    padding: 1rem
}

.ath-module-helper__typingInputWrap,
.ath-module-helper__typingForm {
    background: #fff;
    border: 1px solid #b9c8c6;
    border-radius: 10px;
    padding: .9rem
}

.ath-module-helper__typingInputLabel,
.ath-module-helper__typingField {
    font-size: .8rem
}

.ath-module-helper__typingInput {
    background: #fff;
    border: 2px solid #91aaa7;
    color: #182d36;
    font: 600 1.08rem/1.8 "Cascadia Mono", Consolas, monospace;
    letter-spacing: .015em;
    min-height: 15rem;
    padding: 1rem
}

.ath-module-helper__typingInput::placeholder {
    color: #657579;
    opacity: 1
}

.ath-module-helper__typingSide .ath-module-helper__metrics {
    gap: .5rem
}

.ath-module-helper__typingSide .ath-module-helper__metrics span {
    min-width: 4.6rem;
    padding: .55rem
}

.ath-module-helper__typingSide .ath-module-helper__metrics strong {
    font-size: 2rem
}

.ath-module-helper__typingField input,
.ath-module-helper__typingField select,
.ath-module-helper__typingField textarea {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 1rem;
    padding: .7rem
}

.ath-module-helper__typingKeyboard {
    background: #fff;
    border-top: 1px solid #b9c8c6;
    padding: 1rem
}

.ath-module-helper__typingKeyboardRow {
    gap: .35rem;
    margin: .35rem 0
}

.ath-module-helper__typingKey {
    background: #edf4f2;
    border: 1px solid #8fa8a5;
    border-radius: 6px;
    color: #1d343d;
    font-size: .82rem;
    min-height: 2.25rem;
    min-width: 2.25rem;
    padding: .35rem;
    box-shadow: 0 2px 0 #b4c5c1
}

.ath-module-helper__typingKey--space {
    min-width: 10rem
}

.ath-module-helper__typingKey.is-current {
    background: #e9bf62;
    border-color: #9b7310;
    color: #2b281b;
    transform: translateY(-2px);
    box-shadow: 0 3px 0 #b98f24
}

.ath-module-helper__typingFeedback {
    font-size: 1.2rem;
    padding: .7rem
}

.ath-module-helper__typingControls>span {
    font-size: .78rem
}

.ath-module-helper__typingResult {
    font-size: .9rem;
    padding: .85rem
}

@media(max-width:720px) {
    .ath-module-helper__typingInput {
        font-size: 1rem;
        min-height: 13rem
    }

    .ath-module-helper__typingKeyboard {
        overflow-x: auto
    }

    .ath-module-helper__typingKey {
        font-size: .74rem;
        min-height: 2rem;
        min-width: 2rem
    }

    .ath-module-helper__typingKey--space {
        min-width: 7rem
    }
}

.ath-module-helper__typingCharacter {
    display: inline-block;
    min-width: .18em;
    text-shadow: none;
    transition: background-color .12s ease, color .12s ease, opacity .12s ease
}

.ath-module-helper__typingCharacter.is-correct {
    color: #16865d
}

.ath-module-helper__typingCharacter.is-incorrect {
    background: rgba(216, 93, 83, .2);
    border-radius: .18rem;
    color: #b83e35;
    text-decoration: underline wavy #c94e45;
    text-decoration-thickness: 1.5px;
    text-underline-offset: .16em
}

.ath-module-helper__typingCharacter.is-current {
    background: #e9bf62;
    border-radius: .18rem;
    color: #2b281b;
    box-shadow: 0 0 0 2px rgba(213, 169, 40, .22)
}

.ath-module-helper__typingCharacter.is-remaining {
    color: color-mix(in srgb, var(--ath-helper-muted) 68%, transparent)
}

.ath-module-helper__typingTarget--error {
    animation: athTypingShake .26s ease
}

.ath-module-helper__typingAudio {
    display: block;
    margin: .65rem 0;
    width: min(100%, 32rem)
}

.ath-module-helper__typingInput--error {
    border-color: #c94e45 !important;
    box-shadow: 0 0 0 3px rgba(201, 78, 69, .16) !important
}

.ath-module-helper__typingField--error input,
.ath-module-helper__typingField--error select,
.ath-module-helper__typingField--error textarea {
    border-color: #c94e45 !important;
    box-shadow: 0 0 0 3px rgba(201, 78, 69, .12) !important
}

.ath-module-helper__typingFieldStatus[data-state=error] {
    color: #b83e35;
    font-weight: 700
}

.ath-module-helper--typing-incorrect .ath-module-helper__typingFeedback {
    border-left: 3px solid #c94e45;
    color: #9f3028
}

.ath-module-helper--typing-correct .ath-module-helper__typingFeedback {
    border-left: 3px solid #16865d;
    color: #126b43
}

.ath-module-helper--typing-error .ath-module-helper__typingTarget {
    border-left-color: #c94e45
}

.ath-module-helper--typing-complete .ath-module-helper__typingFeedback {
    border-left-color: #16865d
}

@keyframes athTypingShake {

    0%,
    100% {
        transform: translateX(0)
    }

    25% {
        transform: translateX(-4px)
    }

    75% {
        transform: translateX(4px)
    }
}

@media(prefers-reduced-motion:reduce) {

    .ath-module-helper__typingInput--error,
    .ath-module-helper__typingTarget--error {
        animation: none
    }
}