.cn-mini {
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid #dbe4f2;
    border-radius: 1.35rem;
    background: linear-gradient(145deg, #f7f8ff, #fff 55%, #f4fbf8);
}

.cn-mini__intro {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.cn-mini__intro h2 { margin-bottom: .55rem; }
.cn-mini__intro p { max-width: 48rem; margin-bottom: 0; color: #50617b; line-height: 1.6; }
.cn-mini__stats { display: flex; flex-direction: column; flex-shrink: 0; gap: .35rem; color: #4d438b; font-weight: 700; text-align: right; }
.cn-mini__board { min-height: 13rem; }
.cn-mini__question { margin-bottom: 1rem; font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.cn-mini__question--multiline { white-space: pre-line; line-height: 1.55; }
.cn-mini__fraction { padding: 1.25rem; border-radius: 1rem; background: #eef0ff; text-align: center; font-variant-numeric: tabular-nums; }
.cn-mini__options { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.cn-mini__option, .cn-mini__tile { border: 2px solid #c8d3e8; background: #fff; color: #172448; font-weight: 750; }
.cn-mini__option { min-width: 4.3rem; min-height: 4.3rem; border-radius: 1rem; font-size: 1.7rem; }
.cn-mini__options--advanced { justify-content: flex-start; }
.cn-mini__options--advanced .cn-mini__option { min-width: 8rem; min-height: 3.5rem; padding: .55rem .9rem; font-size: 1.08rem; }
.cn-mini__option:hover, .cn-mini__tile:hover { border-color: #6043c8; background: #f4f0ff; }
.cn-mini__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; max-width: 40rem; margin-bottom: 1rem; }
.cn-mini__grid--primes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cn-mini__tile { min-height: 3.2rem; border-radius: .75rem; font-variant-numeric: tabular-nums; }
.cn-mini__tile[aria-pressed="true"] { border-color: #5840bc; background: #eae5ff; }
.cn-mini__option.is-correct, .cn-mini__tile.is-correct { border-color: #147a5a; background: #d8f4e9; color: #07563d; }
.cn-mini__option.is-incorrect { border-color: #b74444; background: #fff0f0; color: #8c2626; }
.cn-mini__tile.is-incorrect { border-color: #b74444; background: #fff0f0; color: #8c2626; }
.cn-mini__selected { margin-bottom: .7rem; color: #53617a; }
.cn-mini__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.3rem; }
.cn-mini__feedback, .cn-mini__explanation { min-height: 1.5rem; margin: 1rem 0 0; font-weight: 600; }
.cn-mini__feedback[data-state="correct"] { color: #0a7654; }
.cn-mini__feedback[data-state="incorrect"] { color: #a02f2f; }
.cn-mini__explanation { padding: .85rem 1rem; border-left: 4px solid #6043c8; border-radius: .3rem; background: #efecff; color: #243154; }
.cn-mini__code-row { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin-bottom: 1.6rem; }
.cn-mini__label { display: grid; gap: .45rem; font-weight: 700; }
.cn-mini__code-input { width: 11rem; font-size: 1.5rem; letter-spacing: .22em; text-align: center; }
.cn-mini__history-title { font-size: 1.1rem; }
.cn-mini__history { margin-bottom: 0; padding-left: 1.5rem; font-variant-numeric: tabular-nums; }
.cn-mini__history li { margin-bottom: .4rem; }

@media (max-width: 640px) {
    .cn-mini__intro { flex-direction: column; }
    .cn-mini__stats { text-align: left; }
    .cn-mini__grid { gap: .35rem; }
    .cn-mini__tile { min-height: 2.8rem; padding: .1rem; }
}