.cn-sequence {
    --sequence-ink: var(--ink, #17233c);
    --sequence-text: var(--text, #4b5870);
    --sequence-border: var(--border, #dce3ee);
    --sequence-primary: var(--primary, #2f6fed);
    --sequence-primary-dark: var(--primary-dark, #2459be);
    --sequence-success: var(--success, #18794e);
    --sequence-danger: var(--danger, #b42318);
    width: min(100%, 58rem);
    margin-inline: auto;
    padding: clamp(1rem, 3vw, 2.25rem);
    color: var(--sequence-text);
    border: 1px solid var(--sequence-border);
    border-radius: clamp(1rem, 2.5vw, 1.75rem);
    background:
        radial-gradient(circle at 100% 0, rgb(47 111 237 / 11%), transparent 21rem),
        #fff;
    box-shadow: 0 18px 50px rgb(23 35 60 / 10%);
}

.cn-sequence[hidden],
.cn-sequence [hidden] {
    display: none !important;
}

.cn-sequence__header {
    max-width: 48rem;
}

.cn-sequence__eyebrow {
    margin: 0 0 0.4rem;
    color: var(--sequence-primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cn-sequence__header h2 {
    margin: 0;
    color: var(--sequence-ink);
    font-size: clamp(1.75rem, 5vw, 3rem);
    line-height: 1.08;
}

.cn-sequence__intro {
    margin: 0.85rem 0 0;
    font-size: clamp(1rem, 2vw, 1.12rem);
}

.cn-sequence__note {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin: 1rem 0 0;
    padding: 0.8rem 0.95rem;
    color: #705314;
    border: 1px solid #f0d68d;
    border-radius: 0.85rem;
    background: #fff8df;
    font-size: 0.94rem;
}

.cn-sequence__note i {
    flex: 0 0 auto;
    margin-top: 0.08rem;
}

.cn-sequence__status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.5rem;
}

.cn-sequence__status-item {
    min-width: 9rem;
    padding: 0.48rem 0.8rem;
    color: var(--sequence-ink);
    border: 1px solid var(--sequence-border);
    border-radius: 999px;
    background: #f6f8fc;
    font-size: 0.92rem;
    font-weight: 750;
    text-align: center;
}

.cn-sequence__start {
    display: flex;
    justify-content: center;
    padding: clamp(2rem, 7vw, 4rem) 0 1rem;
}

.cn-sequence__round {
    margin-top: 1.5rem;
}

.cn-sequence__prompt {
    margin: 0;
    color: var(--sequence-ink);
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    font-weight: 760;
    text-align: center;
}

.cn-sequence__terms {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.4rem, 1.5vw, 0.75rem);
    justify-content: center;
    margin: 1.25rem 0 1.65rem;
    padding: 0;
    list-style: none;
}

.cn-sequence__term {
    display: grid;
    min-width: clamp(3rem, 10vw, 4.4rem);
    min-height: clamp(3rem, 10vw, 4.4rem);
    padding: 0.45rem;
    place-items: center;
    color: var(--sequence-ink);
    border: 2px solid #cbd6e8;
    border-radius: 0.9rem;
    background: #f8faff;
    font-size: clamp(1rem, 3.4vw, 1.45rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1;
}

.cn-sequence__term--missing {
    color: #fff;
    border-color: var(--sequence-primary);
    background: var(--sequence-primary);
}

.cn-sequence__answers {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.cn-sequence__answers legend {
    width: 100%;
    margin-bottom: 0.75rem;
    color: var(--sequence-ink);
    font-size: 0.96rem;
    font-weight: 750;
    text-align: center;
}

.cn-sequence__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.cn-sequence__option {
    min-height: 3.4rem;
    padding: 0.72rem 0.85rem;
    color: var(--sequence-ink);
    border: 2px solid #b9c7dc;
    border-radius: 0.9rem;
    background: #fff;
    touch-action: manipulation;
    font-size: clamp(1rem, 2.7vw, 1.18rem);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

@media (hover: hover) {
    .cn-sequence__option:not(:disabled):hover {
        border-color: var(--sequence-primary);
        background: #eef4ff;
        transform: translateY(-1px);
    }
}

.cn-sequence__option:disabled {
    cursor: default;
    opacity: 1;
}

.cn-sequence__option.is-correct {
    color: #0c5133;
    border-color: var(--sequence-success);
    background: #e9f8f0;
}

.cn-sequence__option.is-wrong {
    color: #7c1b14;
    border-color: var(--sequence-danger);
    background: #fff0ee;
}

.cn-sequence__feedback {
    margin-top: 1.25rem;
    padding: clamp(1rem, 3vw, 1.35rem);
    border: 1px solid var(--sequence-border);
    border-left: 5px solid var(--sequence-primary);
    border-radius: 0.9rem;
    background: #f8faff;
}

.cn-sequence__feedback.is-correct {
    border-left-color: var(--sequence-success);
}

.cn-sequence__feedback.is-wrong {
    border-left-color: var(--sequence-danger);
}

.cn-sequence__feedback h3,
.cn-sequence__feedback h4 {
    color: var(--sequence-ink);
}

.cn-sequence__feedback h3 {
    margin: 0;
    font-size: 1.18rem;
}

.cn-sequence__expected {
    margin: 0.35rem 0 0;
    font-weight: 700;
}

.cn-sequence__explanation {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--sequence-border);
}

.cn-sequence__explanation h4 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.cn-sequence__explanation p {
    margin: 0;
}

.cn-sequence__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.cn-sequence__finished {
    margin-top: 1.5rem;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    color: var(--sequence-ink);
    border: 1px solid #f0d68d;
    border-radius: 1rem;
    background: linear-gradient(145deg, #fff9e7, #fff);
    text-align: center;
}

.cn-sequence__finished > i {
    color: #b87900;
    font-size: 2.8rem;
}

.cn-sequence__finished h3 {
    margin: 0.45rem 0 0;
}

.cn-sequence__finished p {
    margin: 0.5rem 0 1.15rem;
    font-size: 1.08rem;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .cn-sequence__status-item {
        flex: 1 1 8rem;
        min-width: 0;
    }

    .cn-sequence__options {
        grid-template-columns: 1fr;
    }

    .cn-sequence__actions .btn,
    .cn-sequence__finished .btn,
    .cn-sequence__start .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cn-sequence__option {
        transition: none;
    }
}