.flt-exercise {
    --flt-primary: #1769aa;
    --flt-success: #18794e;
    --flt-danger: #b42318;
    --flt-border: #c8d0d9;
}

.flt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    margin: 0 0 1.25rem;
    padding: .85rem;
    border: 1px solid #dde3e9;
    border-radius: .65rem;
    background: #f7f9fb;
}

.flt-button,
.flt-mini-button,
.flt-report-button {
    appearance: none;
    border: 1px solid var(--flt-primary);
    border-radius: .38rem;
    background: #fff;
    color: var(--flt-primary);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
}

.flt-button {
    padding: .55rem .85rem;
}

.flt-mini-button {
    padding: .34rem .5rem;
    font-size: .82em;
}

.flt-button:hover,
.flt-mini-button:hover,
.flt-button:focus-visible,
.flt-mini-button:focus-visible {
    background: var(--flt-primary);
    color: #fff;
}

.flt-gap {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem;
    margin: .18rem .1rem;
    vertical-align: baseline;
}

.flt-input-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .28rem;
}

.flt-exercise .flt-gap .flt-input,
.flt-exercise .flt-gap .flt-input:hover,
.flt-exercise .flt-gap .flt-input:active,
.flt-exercise .flt-gap .flt-input:focus,
.flt-exercise .flt-gap .flt-input:focus-visible {
    box-sizing: border-box;
    width: min(var(--flt-size, 14ch), 55vw);
    min-width: 9ch;
    padding: .34rem .45rem;
    border: 1px solid var(--flt-border);
    border-radius: .35rem;
    background: #fff !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
    caret-color: #172033;
    color-scheme: light;
    opacity: 1 !important;
    font: inherit;
    line-height: 1.25;
}

.flt-gap-number {
    color: #f59e0b !important;
    font-weight: 700 !important;
}

.flt-parenthetical {
    align-self: center;
    color: inherit;
    font-weight: 700 !important;
}

.flt-parenthetical-spoiler {
    display: none;
}

.flt-exercise .flt-gap .flt-input:focus,
.flt-exercise .flt-gap .flt-input:focus-visible {
    background-color: #fff !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
    border-color: var(--flt-primary);
    box-shadow: 0 0 0 2px rgba(23, 105, 170, .15);
    outline: 0;
}

.flt-exercise .flt-gap .flt-input::placeholder {
    color: #667085 !important;
    -webkit-text-fill-color: #667085 !important;
    opacity: 1;
}

.flt-solution,
.flt-feedback {
    font-size: .9em;
    font-weight: 600;
}

.flt-solution {
    padding: .25rem .45rem;
    border-radius: .3rem;
    background: #fff3cd;
    color: #664d03;
}

.flt-feedback {
    min-width: 1px;
}

.flt-exercise .flt-gap.is-correct .flt-input,
.flt-exercise .flt-gap.is-correct .flt-input:focus {
    border-color: var(--flt-success);
    background: #edf9f2 !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

.flt-gap.is-correct .flt-feedback {
    color: var(--flt-success);
}

.flt-exercise .flt-gap.is-wrong .flt-input,
.flt-exercise .flt-gap.is-wrong .flt-input:focus {
    border-color: var(--flt-danger);
    background: #fff4f2 !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

.flt-gap.is-wrong .flt-feedback {
    color: var(--flt-danger);
}

.flt-report-button {
    flex-basis: 100%;
    width: fit-content;
    padding: .25rem .45rem;
    border-color: #7a5af8;
    color: #5925dc;
    font-size: .78em;
}

.flt-report-button.is-reported {
    border-color: #98a2b3;
    color: #667085;
    cursor: default;
}

.flt-gap.is-loading {
    opacity: .65;
}

.flt-spoiler-answer {
    display: none;
    box-sizing: border-box;
    width: min(var(--flt-size, 14ch), 55vw);
    min-width: 9ch;
    min-height: 2.2rem;
    padding: .34rem .55rem;
    border: 1px solid #52606d;
    border-radius: .35rem;
    background: #111827;
    color: transparent;
    cursor: pointer;
    font: inherit;
    line-height: 1.25;
    text-align: left;
    user-select: none;
}

.flt-spoiler-answer span {
    visibility: hidden;
}

.flt-spoiler-answer.is-revealed {
    border-color: #d6b656;
    background: #fff3cd;
    color: #4d3b00;
}

.flt-spoiler-answer.is-revealed span {
    visibility: visible;
}

.flt-exercise.is-spoiler-mode .flt-input-row,
.flt-exercise.is-spoiler-mode .flt-solution,
.flt-exercise.is-spoiler-mode .flt-feedback,
.flt-exercise.is-spoiler-mode .flt-report-button,
.flt-exercise.is-spoiler-mode .flt-check-all {
    display: none !important;
}

.flt-exercise.is-spoiler-mode .flt-spoiler-answer {
    display: inline-block;
}

.flt-exercise.is-spoiler-mode .flt-parenthetical-spoiler {
    display: inline;
}

.flt-mode-toggle[aria-pressed="true"] {
    background: var(--flt-primary);
    color: #fff;
}

.flt-letters-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .62);
}

.flt-letters-overlay[hidden] {
    display: none !important;
}

.flt-letters-popup {
    position: relative;
    box-sizing: border-box;
    width: min(36rem, 94vw);
    max-height: 80vh;
    overflow: auto;
    padding: 1.25rem 3rem 1.4rem 1.4rem;
    border: 2px solid #f59e0b;
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .3);
    color: #172033;
}

.flt-letters-title {
    margin-bottom: .9rem;
    color: #172033;
    font-size: 1.05rem;
    font-weight: 700;
}

.flt-letters-content {
    color: #9a4b00;
    font-size: clamp(1.15rem, 3vw, 1.55rem);
    font-weight: 700;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.flt-letters-close {
    position: absolute;
    top: .55rem;
    right: .65rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #eef2f6;
    color: #172033;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 2rem;
    text-align: center;
}

.flt-letters-close:hover,
.flt-letters-close:focus-visible {
    background: #dce4ec;
    outline: 2px solid var(--flt-primary, #1769aa);
}

@media (max-width: 600px) {
    .flt-gap,
    .flt-input-row {
        max-width: 100%;
    }

    .flt-input,
    .flt-spoiler-answer {
        width: min(var(--flt-size, 14ch), 44vw);
    }

    .flt-mini-button {
        padding-inline: .42rem;
    }
}