.word {
    display: inline-block;
    border: 1px solid #000;
    background-color: rgb(184, 184, 184);
    font-family: 'roboto mono', 'Consolas', monospace;
}

.english.content-visibility-words .word {
    content-visibility: auto;
    contain-intrinsic-size: auto 36px;
}

.word .display {
    display: inline-block;
    font-size: 24px;
}

.word .display-container {
    display: flex;
    justify-content: center;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.word .text {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.word .display,
.char {
    border-bottom: 2px solid transparent;
}

.word .display.current {
    border-bottom: 2px solid #1976d2;
}

.char.current {
    border-bottom-color: transparent;
}

.article.compositor-cursor-active {
    position: relative;
}

.typing-cursor-overlay {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform;
    z-index: 1001;
    transition: transform 80ms linear;
}

.typing-cursor-shell {
    width: calc(var(--cursor-w, 64) * 1px);
    height: calc(var(--cursor-h, 48) * 1px);
    pointer-events: none;
    position: relative;
    box-sizing: border-box;
    transition: width 80ms linear, height 80ms linear;
}

@keyframes blinking-cursor {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 0.95;
    }

    20% {
        opacity: 0.9;
    }

    30% {
        opacity: 0.8;
    }

    40% {
        opacity: 0.7;
    }

    50% {
        opacity: 0.6;
    }

    60% {
        opacity: 0.7;
    }

    70% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.9;
    }

    90% {
        opacity: 0.95;
    }

    100% {
        opacity: 1;
    }
}

.article.compositor-cursor-active .char.current::after {
    display: none;
}

.article:not(.focused).compositor-cursor-active .typing-cursor-shell {
    animation: none;
    opacity: 1;
}

.article.burst-typing.compositor-cursor-active .typing-cursor-overlay {
    transition: none;
}

.article.burst-typing.compositor-cursor-active .typing-cursor-shell {
    transition: none;
}

.chars {
    display: flex;
    justify-content: center;
}

.char {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.char.current::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #1976d2;
    transform-origin: bottom;
    will-change: transform;
    animation: blinking-cursor-underline 1s steps(2, start) infinite;
}

@keyframes blinking-cursor-underline {
    0%,
    49% {
        transform: scaleY(1);
    }

    50%,
    100% {
        transform: scaleY(0);
    }
}

.article:not(.focused) .char.current::after {
    animation: none;
}

.english .article.burst-typing .char.correct,
.english .article.burst-typing .char.wrong {
    animation: none !important;
}

.english .article.burst-typing .char.typed.correct {
    animation: none !important;
}

.english .article.replay-bulk-apply .char.correct,
.english .article.replay-bulk-apply .char.wrong {
    animation: none !important;
}

.article.burst-typing .char.current::after {
    animation: none;
    transform: scaleY(1);
}

.char.skip-anim.correct,
.char.skip-anim.wrong {
    animation: none !important;
}

.word .display.typed.correct,
.char.typed.correct {
    background: #A6F192;
    color: #000;
}

.word .display.typed.correct.once-wronged,
.char.typed.correct.once-wronged {
    color: yellow;
}

.word .display.typed.wrong,
.char.typed.wrong {
    color: #f44336;
}

.word .display.space::after,
.char.space .text::after,
.char.space .code::after {
    content: "\2423";
}

.english .char {
    font-size: 22px;
    line-height: 1;
    /* width: 1ch; */
}

.english .word .display,
.english .char .text {
    display: none;
}

.english .word {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    letter-spacing: 0;
}

.english .char.space .code::after {
    content: "\00A0";
}

.article:not(.focused) {
    user-select: none;
    transition: filter 0.3s;
}

.article .input-text {
    pointer-events: auto;
}

.article:not(.focused) .current {
    animation: none;
}

.article:not(.focused) .char.current::after {
    animation: none;
}

.status-item {
    margin: 0 10px;
}

#delta-status-record-graph {
    font-family: 'Roboto Mono', monospace;
}

.graph-summary {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #3a3d40;
}

.graph-summary-item {
    text-align: center;
}

.graph-summary-label {
    color: #646669;
    font-size: 12px;
    text-transform: lowercase;
    margin-bottom: 5px;
}

.graph-summary-value {
    color: #e2b714;
    font-size: 24px;
    font-weight: bold;
}

.graph-summary-value.secondary {
    color: #d1d0c5;
}

.word-image {
    width: 48px;
}

.input-text {
    width: 100px;
    position: absolute;
}

/* Font Size Settings Override */
.font-size-small .word .display {
    font-size: 24px !important;
}

.font-size-small .char .text,
.font-size-small .char .code {
    font-size: 10px !important;
}

.font-size-normal .word .display {
    font-size: 36px !important;
}

.font-size-normal .char .text,
.font-size-normal .char .code {
    font-size: 12px !important;
}

.font-size-large .word .display {
    font-size: 48px !important;
}

.font-size-large .char .text,
.font-size-large .char .code {
    font-size: 16px !important;
}

/* Blind Mode Settings */
.blind-mode-active .char:not(.typed):not(.space):not(.code-space) .text,
.blind-mode-active .char:not(.typed):not(.space):not(.code-space) .code {
    color: transparent !important;
}

.blind-mode-active .char:not(.typed):not(.space):not(.code-space) {
    position: relative;
}

.blind-mode-active .char:not(.typed):not(.space):not(.code-space)::after {
    content: "?";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #e0e0e0;
    font-size: inherit;
}

/* ── Hidden input overlay ────────────────────── */
.input-text {
    position: relative;
    float: left;
    top: 100%;
    left: 0;
    z-index: 1000;
    width: 1px;
    height: 0px;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    line-height: 16px;
    display: block;
}

.input-text-display-container {
    align-self: start;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 0;
    height: 0;
}

.input-text-display-container--portaled {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10002;
    pointer-events: none;
}

.input-text-display {
    position: absolute;
    top: 0%;
    left: 0%;
    margin-top: -2px;
    z-index: 1001;
    min-width: 50px;
    padding: 4px 8px;
    background-color: #1976d2;
    color: white;
    border: 2px solid transparent;
    border-radius: 4px;
    font-size: 14px;
    white-space: pre;
    pointer-events: none;
    display: none;
}

.input-text-display.is-unmatched {
    border-color: #ef4444;
}

.input-text-display.is-shaking {
    animation: error-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

.input-text-area {
    margin-top: 32px;
    position: absolute;
    width: 100%;
    height: calc(100% - 48px);
    box-sizing: border-box;
    border: none;
    outline: none;
    color: transparent;
    z-index: 10001;
    background: transparent;
    caret-color: transparent;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    letter-spacing: 14px;
    padding: 0px 7px;
    white-space: break-spaces;
    padding: 0;
    resize: none;
    overflow: hidden;
}

/* iOS WebKit: caret-color auto so the IME picker stays opaque (temporary native caret).
   z-index 0 does NOT hide the iOS caret — see docs/typing-ios-ime-caret.md. */
@supports (-webkit-touch-callout: none) {
    .input-text-area {
        caret-color: auto;
        z-index: 0;
    }
    .custom .article .word {
        pointer-events: none;
    }
}

.font-size-large .input-text-area {
    font-size: 35px !important;
    line-height: 68px;
}
.font-size-normal .input-text-area {
    font-size: 25px !important;
    line-height: 58px;
}
.font-size-small .input-text-area {
    font-size: 18px !important;
    line-height: 48px;
}