/* ==========================================================
   ACTIVITY 4
   САНАРИПТИК ДҮЙНӨНҮН СЫРЫ
   SECRET OF THE DIGITAL WORLD
   COMPLETE DESIGN V1
========================================================== */


* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;
}


body {

    margin: 0;

    overflow: hidden;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    color: #173f73;

    background:
        linear-gradient(
            135deg,
            #fff8e6 0%,
            #f5f9ff 55%,
            #edf7ff 100%
        );
}


/* ==========================================================
   MAIN FRAME
========================================================== */

.binary-quiz-shell {

    position: relative;

    width:
        min(
            1240px,
            calc(100% - 36px)
        );

    height:
        calc(100vh - 98px);

    max-height:
        calc(100vh - 98px);

    margin:
        8px auto 0;

    padding-bottom:
        52px;

    display: flex;
    flex-direction: column;

    background:
        rgba(
            255,
            255,
            255,
            .98
        );

    border:
        4px solid #2452a5;

    border-radius:
        25px;

    box-shadow:
        0 14px 36px
        rgba(
            31,
            66,
            125,
            .13
        );

    overflow: hidden;
}


/* ==========================================================
   HEADER
========================================================== */

.binary-header {

    flex:
        0 0 auto;

    min-height:
        68px;

    padding:
        7px 17px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto
        auto;

    align-items: center;

    gap:
        12px;

    border-bottom:
        1px solid #dce7f5;

    background:
        linear-gradient(
            135deg,
            #fbfdff,
            #ffffff
        );
}


.binary-header-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #f7be54,
            #efa228
        );

    color:
        #173f73;

    font-size:
        17px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -1px;

    box-shadow:
        0 6px 14px
        rgba(
            198,
            128,
            18,
            .18
        );
}


.binary-header-copy {

    min-width: 0;
}


.binary-header-copy h1 {

    margin: 0;

    color:
        #173f73;

    font-size:
        23px;

    line-height:
        1.06;

    font-weight:
        700;
}


.binary-header-copy p {

    margin:
        3px 0 0;

    color:
        #d28c15;

    font-size:
        16px;

    line-height:
        1.08;

    font-weight:
        700;
}


/* ==========================================================
   SOUND TOGGLE
========================================================== */

.sound-toggle {

    min-width:
        82px;

    min-height:
        40px;

    padding:
        5px 10px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        1px solid #cadbec;

    border-radius:
        14px;

    background:
        #f7fbff;

    color:
        #173f73;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    cursor:
        pointer;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease;
}


.sound-toggle:hover {

    transform:
        translateY(-1px);

    background:
        #edf5ff;

    border-color:
        #89acd6;
}


.sound-icon {

    font-size:
        16px;
}


.sound-copy {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    line-height:
        1.05;
}


.sound-copy strong {

    font-size:
        11px;
}


.sound-copy small {

    margin-top:
        1px;

    color:
        #687f9b;

    font-size:
        9px;
}


/* ==========================================================
   TOPIC BADGE
========================================================== */

.binary-topic-badge {

    min-width:
        132px;

    padding:
        7px 11px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    border:
        1px solid #dea83f;

    border-radius:
        14px;

    background:
        #fff9e7;

    color:
        #855b0b;

    text-align:
        center;
}


.binary-topic-badge strong {

    font-size:
        11px;
}


.binary-topic-badge span {

    margin-top:
        1px;

    font-size:
        9px;
}


/* ==========================================================
   INTRO
========================================================== */

.binary-intro-card {

    flex:
        0 0 auto;

    margin:
        7px 14px 6px;

    padding:
        10px 14px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(380px, .75fr);

    gap:
        24px;

    align-items:
        center;

    border:
        1px solid #dce7f4;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #fbfdff,
            #f5f9ff
        );
}


.binary-intro-copy h2 {

    margin:
        0 0 6px;

    color:
        #173f73;

    font-size:
        20px;

    line-height:
        1.1;

    font-weight:
        700;
}


.binary-intro-ky {

    margin:
        2px 0;

    color:
        #294f79;

    font-size:
        13px;

    line-height:
        1.23;

    font-weight:
        700;
}


.binary-intro-en {

    margin:
        2px 0;

    color:
        #587492;

    font-size:
        12px;

    line-height:
        1.23;

    font-weight:
        700;
}


.binary-tip {

    margin-top:
        7px;

    padding:
        7px 10px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    border-left:
        4px solid #e6a22e;

    border-radius:
        11px;

    background:
        #fff8e7;
}


.binary-tip-icon {

    font-size:
        18px;
}


.binary-tip strong,
.binary-tip span {

    display:
        block;
}


.binary-tip strong {

    color:
        #715313;

    font-size:
        11px;
}


.binary-tip span {

    margin-top:
        2px;

    color:
        #756d5c;

    font-size:
        10px;
}


/* ==========================================================
   VISUAL
========================================================== */

.binary-visual {

    padding:
        8px 10px;

    border:
        1px solid #d7e4f3;

    border-radius:
        15px;

    background:
        #ffffff;
}


.binary-visual-title {

    margin-bottom:
        7px;

    text-align:
        center;
}


.binary-visual-title strong,
.binary-visual-title span {

    display:
        block;
}


.binary-visual-title strong {

    color:
        #173f73;

    font-size:
        11px;
}


.binary-visual-title span {

    margin-top:
        1px;

    color:
        #70859e;

    font-size:
        9px;
}


.binary-flow {

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr auto 1.25fr;

    align-items:
        center;

    gap:
        5px;
}


.binary-flow-card {

    min-height:
        57px;

    padding:
        5px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #ccddf0;

    border-radius:
        11px;

    background:
        #f7fbff;
}


.flow-symbol {

    color:
        #215095;

    font-size:
        17px;

    line-height:
        1;

    font-weight:
        900;
}


.flow-code {

    color:
        #215095;

    font-family:
        "Courier New",
        monospace;

    font-size:
        13px;

    line-height:
        1;

    font-weight:
        900;
}


.binary-flow-card strong {

    margin-top:
        3px;

    color:
        #244e80;

    font-size:
        9px;
}


.binary-flow-card small {

    color:
        #74869d;

    font-size:
        7px;
}


.flow-arrow {

    color:
        #d49521;

    font-size:
        16px;

    font-weight:
        900;
}


.binary-switch-row {

    margin-top:
        6px;

    display:
        flex;

    justify-content:
        center;

    gap:
        8px;
}


.switch-chip {

    min-width:
        68px;

    padding:
        4px 9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    border-radius:
        999px;

    font-weight:
        700;
}


.switch-chip span {

    font-size:
        13px;

    font-weight:
        900;
}


.switch-chip small {

    font-size:
        8px;
}


.switch-off {

    border:
        1px solid #d3dbe5;

    background:
        #f2f4f7;

    color:
        #56616f;
}


.switch-on {

    border:
        1px solid #9fd6b1;

    background:
        #edf9f1;

    color:
        #20733e;
}


/* ==========================================================
   STATUS
========================================================== */

.binary-status-bar {

    flex:
        0 0 auto;

    min-height:
        39px;

    margin:
        0 14px 6px;

    padding:
        5px 10px;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        13px;

    border:
        1px solid #dce6f1;

    border-radius:
        13px;

    background:
        #f7faff;
}


.status-block {

    min-width:
        75px;

    display:
        grid;

    grid-template-columns:
        auto auto;

    column-gap:
        6px;

    align-items:
        baseline;
}


.status-block span {

    color:
        #375b84;

    font-size:
        10px;

    font-weight:
        700;
}


.status-block strong {

    color:
        #173f73;

    font-size:
        13px;

    font-weight:
        700;
}


.status-block small {

    grid-column:
        1 / -1;

    color:
        #7c8da0;

    font-size:
        8px;
}


.status-score {

    text-align:
        right;
}


.progress-area {

    width:
        100%;
}


.progress-track {

    width:
        100%;

    height:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #dce6f2;
}


.progress-fill {

    width:
        0%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #e3a02e,
            #2452a5
        );

    transition:
        width .3s ease;
}


/* ==========================================================
   QUIZ AREA
========================================================== */

.quiz-screen {

    flex:
        1 1 auto;

    min-height:
        0;

    margin:
        0 14px 7px;

    padding:
        9px 12px 10px;

    border:
        1px solid #dce6f2;

    border-radius:
        18px;

    background:
        #ffffff;

    overflow:
        hidden;
}


.question-topline {

    margin-bottom:
        6px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.question-topline > div:first-child {

    display:
        flex;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        4px 6px;
}


.question-topline strong,
.question-topline span {

    font-size:
        13px;

    line-height:
        1.15;

    font-weight:
        700;
}


.question-topline strong {

    color:
        #173f73;
}


.question-topline > div:first-child > span:last-child {

    color:
        #486b91;
}


.inline-divider {

    color:
        #d49a23 !important;

    font-weight:
        900 !important;
}


.question-mark {

    width:
        31px;

    height:
        31px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #2452a5;

    color:
        #ffffff;

    font-size:
        17px;

    font-weight:
        900;
}


/* ==========================================================
   QUESTION CARD
========================================================== */

.question-card {

    width:
        100%;

    height:
        calc(100% - 37px);

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        4px 7px 2px;

    border:
        0;

    background:
        #ffffff;
}


.question-text {

    flex:
        0 0 auto;

    margin:
        0 0 8px;

    color:
        #173f73;

    font-size:
        17px;

    line-height:
        1.2;

    font-weight:
        700;
}


.question-text .q-ky,
.question-text .q-en {

    display:
        inline;
}


.question-text .q-en {

    color:
        #285581;
}


.question-text .q-divider {

    margin:
        0 5px;

    color:
        #d59722;

    font-weight:
        900;
}


/* ==========================================================
   ANSWERS
========================================================== */

.answers-grid {

    flex:
        0 0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        8px;
}


.answer-option {

    min-height:
        43px;

    padding:
        7px 11px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid #bed3ec;

    border-radius:
        12px;

    background:
        #f8fbff;

    color:
        #173f73;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        13px;

    line-height:
        1.18;

    font-weight:
        700;

    text-align:
        center;

    cursor:
        pointer;

    transition:
        transform .14s ease,
        background .14s ease,
        border-color .14s ease,
        box-shadow .14s ease;
}


.answer-option:hover:not(:disabled) {

    transform:
        translateY(-1px);

    border-color:
        #739fd5;

    background:
        #edf5ff;

    box-shadow:
        0 4px 9px
        rgba(
            40,
            82,
            143,
            .1
        );
}


.answer-option.selected {

    border-color:
        #5384c1;

    background:
        #eaf2ff;
}


.answer-option.correct {

    border-color:
        #38a766;

    background:
        #e7f8ed;

    color:
        #17683a;
}


.answer-option.wrong {

    border-color:
        #dc7777;

    background:
        #fff0f0;

    color:
        #9a2929;
}


.answer-option:disabled {

    cursor:
        default;
}


/* ==========================================================
   FEEDBACK
========================================================== */

.feedback-box {

    flex:
        0 0 auto;

    min-height:
        49px;

    margin-top:
        8px;

    padding:
        7px 10px;

    display:
        none;

    grid-template-columns:
        auto 1fr;

    align-items:
        center;

    gap:
        9px;

    border-radius:
        12px;
}


.feedback-box.visible {

    display:
        grid;
}


.feedback-box.correct {

    border:
        1px solid #83c99c;

    background:
        #edf9f1;

    color:
        #17683a;
}


.feedback-box.wrong {

    border:
        1px solid #e5a0a0;

    background:
        #fff2f2;

    color:
        #922b2b;
}


.feedback-icon {

    font-size:
        20px;
}


.feedback-copy strong {

    display:
        block;

    font-size:
        12px;
}


.feedback-copy p {

    margin:
        2px 0 0;

    font-size:
        11px;

    line-height:
        1.2;
}


/* ==========================================================
   NEXT
========================================================== */

.question-actions {

    flex:
        1 1 auto;

    min-height:
        38px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        flex-end;
}


.primary-btn,
.secondary-btn {

    min-width:
        142px;

    min-height:
        38px;

    padding:
        6px 17px;

    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        999px;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}


.primary-btn {

    background:
        linear-gradient(
            135deg,
            #2a5cae,
            #20498f
        );

    color:
        #ffffff;

    box-shadow:
        0 5px 12px
        rgba(
            32,
            73,
            143,
            .18
        );
}


.primary-btn:disabled {

    background:
        #c6d1df;

    color:
        #76869a;

    box-shadow:
        none;

    cursor:
        default;
}


.secondary-btn {

    background:
        linear-gradient(
            135deg,
            #f6ba63,
            #eea64d
        );

    color:
        #063c78;

    box-shadow:
        0 5px 12px
        rgba(
            126,
            82,
            22,
            .16
        );
}


.primary-btn:not(:disabled):hover,
.secondary-btn:hover {

    transform:
        translateY(-1px);
}


.primary-btn span,
.secondary-btn span {

    font-size:
        12px;

    font-weight:
        700;
}


.primary-btn small,
.secondary-btn small {

    margin-top:
        1px;

    font-size:
        9px;

    font-weight:
        600;
}


/* ==========================================================
   RESULTS
========================================================== */

.result-screen {

    flex:
        1 1 auto;

    min-height:
        0;

    margin:
        7px 14px;

    overflow-y:
        auto;
}


.result-card {

    min-height:
        100%;

    padding:
        16px 22px;

    text-align:
        center;

    border:
        1px solid #dce6f2;

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #fbfdff,
            #f5f9ff
        );
}


.result-badge {

    font-size:
        34px;
}


.result-kicker {

    display:
        block;

    margin-top:
        3px;

    color:
        #d08a16;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .08em;
}


.result-card h2 {

    margin:
        5px 0 2px;

    color:
        #173f73;

    font-size:
        24px;
}


.result-subtitle {

    margin:
        0;

    color:
        #587391;

    font-size:
        14px;

    font-weight:
        700;
}


.result-score-circle {

    width:
        96px;

    height:
        96px;

    margin:
        10px auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        5px solid #e6aa36;

    border-radius:
        50%;

    background:
        #ffffff;
}


.result-score-circle strong {

    color:
        #173f73;

    font-size:
        17px;
}


.result-score-circle span {

    margin-top:
        2px;

    color:
        #d18b16;

    font-size:
        13px;

    font-weight:
        700;
}


.result-stats {

    max-width:
        530px;

    margin:
        10px auto;

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        8px;
}


.result-stats > div {

    padding:
        8px;

    border:
        1px solid #d9e5f2;

    border-radius:
        12px;

    background:
        #ffffff;
}


.result-stats span,
.result-stats strong,
.result-stats small {

    display:
        block;
}


.result-stats span {

    color:
        #496a8d;

    font-size:
        10px;
}


.result-stats strong {

    margin:
        2px 0;

    color:
        #173f73;

    font-size:
        18px;
}


.result-stats small {

    color:
        #7a8ca1;

    font-size:
        8px;
}


.result-message {

    max-width:
        710px;

    margin:
        10px auto;

    padding:
        9px 13px;

    border-left:
        4px solid #e2a12f;

    border-radius:
        11px;

    background:
        #fff9e9;

    color:
        #526b86;

    font-size:
        12px;

    line-height:
        1.35;
}


.result-actions {

    display:
        flex;

    justify-content:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;
}


/* ==========================================================
   BACK TO CHAPTER — PERMANENT FOOTER
========================================================== */

.activity4-bottom-nav {

    position:
        absolute;

    left:
        18px;

    bottom:
        9px;

    z-index:
        50;

    display:
        block;
}


.activity4-back-btn {

    min-height:
        37px;

    padding:
        7px 18px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            #f6ba63,
            #eea64d
        );

    color:
        #063c78;

    font-size:
        13px;

    font-weight:
        700;

    text-decoration:
        none;

    box-shadow:
        0 5px 12px
        rgba(
            126,
            82,
            22,
            .16
        );

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.activity4-back-btn:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 15px
        rgba(
            126,
            82,
            22,
            .19
        );
}


.activity4-back-arrow {

    font-size:
        15px;

    font-weight:
        900;
}


/* ==========================================================
   LAPTOP / 100% ZOOM
========================================================== */

@media (
    min-width: 901px
) and (
    max-height: 850px
) {

    .binary-quiz-shell {

        height:
            calc(100vh - 88px);

        max-height:
            calc(100vh - 88px);

        padding-bottom:
            48px;
    }


    .binary-header {

        min-height:
            59px;

        padding:
            5px 15px;
    }


    .binary-header-icon {

        width:
            41px;

        height:
            41px;

        font-size:
            15px;
    }


    .binary-header-copy h1 {

        font-size:
            20px;
    }


    .binary-header-copy p {

        font-size:
            14px;
    }


    .sound-toggle {

        min-height:
            34px;
    }


    .binary-intro-card {

        margin:
            5px 12px;

        padding:
            7px 11px;

        gap:
            17px;
    }


    .binary-intro-copy h2 {

        font-size:
            17px;

        margin-bottom:
            4px;
    }


    .binary-intro-ky {

        font-size:
            11px;
    }


    .binary-intro-en {

        font-size:
            10px;
    }


    .binary-tip {

        margin-top:
            5px;

        padding:
            5px 8px;
    }


    .binary-tip strong {

        font-size:
            9px;
    }


    .binary-tip span {

        font-size:
            8px;
    }


    .binary-flow-card {

        min-height:
            45px;
    }


    .binary-switch-row {

        margin-top:
            4px;
    }


    .binary-status-bar {

        min-height:
            32px;

        margin:
            0 12px 5px;

        padding:
            3px 9px;
    }


    .quiz-screen {

        margin:
            0 12px 6px;

        padding:
            7px 10px;
    }


    .question-topline {

        margin-bottom:
            4px;
    }


    .question-topline strong,
    .question-topline span {

        font-size:
            11px;
    }


    .question-mark {

        width:
            27px;

        height:
            27px;

        font-size:
            14px;
    }


    .question-text {

        margin-bottom:
            5px;

        font-size:
            15px;
    }


    .answers-grid {

        gap:
            6px;
    }


    .answer-option {

        min-height:
            36px;

        padding:
            5px 8px;

        font-size:
            11px;
    }


    .feedback-box {

        min-height:
            42px;

        margin-top:
            5px;

        padding:
            5px 8px;
    }


    .feedback-copy strong {

        font-size:
            10px;
    }


    .feedback-copy p {

        font-size:
            9px;
    }


    .question-actions {

        min-height:
            32px;
    }


    .primary-btn,
    .secondary-btn {

        min-height:
            32px;

        padding:
            5px 14px;
    }


    .activity4-bottom-nav {

        bottom:
            7px;
    }


    .activity4-back-btn {

        min-height:
            33px;

        padding:
            6px 16px;

        font-size:
            11px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {

    html,
    body {

        height:
            auto;

        overflow-y:
            auto;
    }


    body {

        padding-bottom:
            20px;
    }


    .binary-quiz-shell {

        width:
            calc(100% - 20px);

        height:
            auto;

        max-height:
            none;

        margin:
            10px auto;

        padding-bottom:
            0;

        overflow:
            visible;
    }


    .binary-header {

        grid-template-columns:
            auto 1fr;

        gap:
            8px;
    }


    .sound-toggle,
    .binary-topic-badge {

        justify-self:
            start;
    }


    .binary-intro-card {

        grid-template-columns:
            1fr;
    }


    .binary-visual {

        width:
            100%;
    }


    .binary-status-bar {

        grid-template-columns:
            auto 1fr auto;
    }


    .quiz-screen {

        overflow:
            visible;
    }


    .question-card {

        height:
            auto;
    }


    .answers-grid {

        grid-template-columns:
            1fr;
    }


    .question-text .q-ky,
    .question-text .q-en {

        display:
            block;
    }


    .question-text .q-divider {

        display:
            none;
    }


    .question-text .q-en {

        margin-top:
            3px;
    }


    .activity4-bottom-nav {

        position:
            static;

        padding:
            0 14px 14px;
    }

}



/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_START */


/* ==========================================================
   GLOBAL E-BOOK ACTIVITY TYPOGRAPHY

   Unified Kyrgyz-friendly font rendering.

   Supports Kyrgyz Cyrillic clearly:
       Ө ө
       Ү ү
       Ң ң

   Intentionally protects programming / keyboard typography.
========================================================== */


:root {

    --ebook-kyrgyz-font:
        "Segoe UI",
        "Noto Sans",
        "DejaVu Sans",
        Arial,
        sans-serif;
}


/* ----------------------------------------------------------
   BASE TEXT

   This becomes the normal inherited font for each activity.
---------------------------------------------------------- */

html,
body {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   MAIN EDUCATIONAL TEXT

   Override old Georgia / Times / decorative serif styles
   where they were being used for Kyrgyz text.
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,

p,

button,
input,
textarea,
select,

label,

a,

li,

th,
td,

strong,
small,
em {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ----------------------------------------------------------
   COMMON ACTIVITY QUESTION / ANSWER ELEMENTS

   These selectors cover the different activity generations
   already used throughout the e-book.
---------------------------------------------------------- */

.question,
.question-text,
.question-title,
.question-heading,
.question-kicker,

.question-ky,
.question-kyrgyz,
.ky-question,

.challenge-question,
.challenge-title,

.prompt,
.prompt-text,

.instruction,
.instructions,
.instruction-text,

.scenario,

.feedback,
.explanation,

.answer,
.answer-text,
.answer-option,

.option,
.option-btn,
.choice,
.choice-btn,

.quiz-question,
.quiz-option,

.task-title,
.task-question,

.result-title,
.result-message,

.card-title,
.card-text,

.game-title,
.game-question {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ----------------------------------------------------------
   KYRGYZ TYPOGRAPHY DETAILS

   Slightly softer weight and natural spacing improve
   Cyrillic letters such as ө, ү and ң.
---------------------------------------------------------- */

h1,
h2,
h3,
.question,
.question-text,
.question-title,
.question-ky,
.question-kyrgyz,
.ky-question,
.challenge-question,
.quiz-question,
.task-question {

    font-kerning:
        normal;

    font-variant-ligatures:
        common-ligatures;

    letter-spacing:
        .002em;

    word-spacing:
        .02em;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   QUESTION HEADINGS
---------------------------------------------------------- */

.question-ky,
.question-kyrgyz,
.ky-question,
.question-text,
.challenge-question,
.quiz-question {

    font-weight:
        750;
}


/* ----------------------------------------------------------
   ANSWERS

   Keep Kyrgyz choices clean and readable rather than
   excessively heavy.
---------------------------------------------------------- */

.option-btn,
.option,
.answer-option,
.choice,
.choice-btn {

    font-weight:
        650;
}


/* ----------------------------------------------------------
   FEEDBACK / EXPLANATIONS
---------------------------------------------------------- */

.feedback,
.explanation {

    line-height:
        1.4;
}


/* ==========================================================
   DO NOT CHANGE PROGRAMMING / KEYBOARD / TECHNICAL FONTS
========================================================== */

code,
pre,
kbd,
samp,

.code,
.code-block,
.code-output,
.console,
.terminal,
.keyboard-key,
.key,
.shortcut-key {

    font-family:
        ui-monospace,
        "Cascadia Code",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace !important;

}


/* ==========================================================
   PROTECT COMMON ICON FONTS
========================================================== */

.material-icons,
.material-symbols-outlined,
.material-symbols-rounded,

.fa,
.fas,
.far,
.fal,
.fab,

[class^="fa-"],
[class*=" fa-"] {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ==========================================================
   EMOJI

   Browser will naturally fall back to the operating
   system emoji font where necessary.
========================================================== */


/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_END */


/* FINAL_UNIFORM_ACTIVITY_FONT_V2_START */

/*
    FINAL UNIFORM E-BOOK ACTIVITY TYPOGRAPHY

    Standard typography:
        Arial, "Helvetica Neue", Helvetica, sans-serif

    Applies to normal Kyrgyz and English interface text,
    including Back to Chapter buttons.

    Font sizes, weights, colors, spacing and layouts
    are intentionally NOT changed.
*/


:root {
    --ebook-kyrgyz-font:
        Arial, "Helvetica Neue", Helvetica, sans-serif;

    --ebook-activity-font:
        Arial, "Helvetica Neue", Helvetica, sans-serif;
}


html,
body {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   TITLES AND NORMAL TEXT
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
li,
a,
strong,
b,
em,
small,
th,
td {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   BUTTONS AND FORM ELEMENTS

   Includes every Back to Chapter button regardless of
   whether it is an <a> or <button>.
---------------------------------------------------------- */

button,
input,
textarea,
select,
option {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   COMMON BACK-TO-CHAPTER CLASSES
---------------------------------------------------------- */

.back-to-chapter,
.back-to-chapter *,
.back-btn,
.back-btn *,
.back-button,
.back-button *,
.chapter-back,
.chapter-back *,
.activity-back,
.activity-back *,
.activity2-bottom-back,
.activity2-bottom-back * {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   PRESERVE PROGRAMMING TYPOGRAPHY
---------------------------------------------------------- */

code,
pre,
kbd,
samp,
.code,
.code *,
.code-block,
.code-block *,
.code-editor,
.code-editor *,
.editor-code,
.editor-code *,
.python-code,
.python-code *,
.terminal,
.terminal *,
.console,
.console * {
    font-family:
        "Courier New",
        Courier,
        monospace !important;
}

/* FINAL_UNIFORM_ACTIVITY_FONT_V2_END */

/* ACTIVITY4_MATCH_ACTIVITY1_TYPOGRAPHY_V1_START */


/* ==========================================================
   ACTIVITY 4
   TYPOGRAPHY MATCHED TO CHAPTER I — ACTIVITY 1
   ========================================================== */


/* ----------------------------------------------------------
   1. BASE FONT
   ---------------------------------------------------------- */

html,
body,
.binary-quiz-shell {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   2. ALL NORMAL INTERFACE TEXT

   Explicit selectors are intentional so older local rules
   cannot make Kyrgyz text use a different font.
   ---------------------------------------------------------- */

.binary-header-copy,
.binary-header-copy h1,
.binary-header-copy p,

.sound-toggle,
.sound-copy,
.sound-copy strong,
.sound-copy small,

.binary-topic-badge,
.binary-topic-badge strong,
.binary-topic-badge span,

.binary-intro-copy,
.binary-intro-copy h2,
.binary-intro-ky,
.binary-intro-en,

.binary-tip,
.binary-tip strong,
.binary-tip span,

.binary-visual-title,
.binary-visual-title strong,
.binary-visual-title span,

.binary-flow-card,
.binary-flow-card strong,
.binary-flow-card small,

.switch-chip,
.switch-chip small,

.status-block,
.status-block span,
.status-block strong,
.status-block small,

.question-topline,
.question-topline strong,
.question-topline span,

.question-text,
.question-text .q-ky,
.question-text .q-en,
.question-text .q-divider,

.answer-option,

.feedback-copy,
.feedback-copy strong,
.feedback-copy p,

.primary-btn,
.primary-btn span,
.primary-btn small,

.secondary-btn,
.secondary-btn span,
.secondary-btn small,

.result-card,
.result-card h2,
.result-kicker,
.result-subtitle,

.result-score-circle,
.result-score-circle strong,
.result-score-circle span,

.result-stats,
.result-stats span,
.result-stats strong,
.result-stats small,

.result-message {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;
}


/* ----------------------------------------------------------
   3. KYRGYZ TEXT RENDERING

   Same clean treatment used for Activity 1.
   ---------------------------------------------------------- */

.binary-header-copy h1,
.binary-header-copy p,

.binary-topic-badge strong,

.binary-intro-copy h2,
.binary-intro-ky,

.binary-tip strong,

.question-topline strong,
.question-topline span,

.question-text,
.question-text .q-ky,
.question-text .q-en,

.answer-option,

.feedback-copy strong,
.feedback-copy p,

.result-card h2,
.result-subtitle,
.result-message {

    font-kerning:
        normal !important;

    font-variant-ligatures:
        common-ligatures !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   4. TITLES

   Activity 1 uses normal bold rather than synthetic
   extra-heavy typography.
   ---------------------------------------------------------- */

.binary-header-copy h1,
.binary-header-copy p,
.binary-intro-copy h2,
.result-card h2 {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   5. KYRGYZ INTRODUCTION

   Keep the existing sizes and layout.
   Use Activity 1's normal readable weight.
   ---------------------------------------------------------- */

.binary-intro-ky {

    font-weight:
        700 !important;
}


.binary-intro-en {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   6. QUESTION

   Existing global CSS later changed question-text to 750.
   Bring it back to Activity 1's standard bold.
   ---------------------------------------------------------- */

.question-topline strong,
.question-topline span,
.question-text,
.question-text .q-ky,
.question-text .q-en {

    font-weight:
        700 !important;
}


/* Divider is decorative rather than language text. */

.question-text .q-divider,
.inline-divider {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   7. ANSWERS

   Existing global block changes these to 650.
   Use the same normal bold treatment as Activity 1.
   ---------------------------------------------------------- */

.answer-option {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   8. FEEDBACK
   ---------------------------------------------------------- */

.feedback-copy strong {

    font-weight:
        700 !important;
}


.feedback-copy p {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   9. BUTTON TEXT
   ---------------------------------------------------------- */

.primary-btn span,
.secondary-btn span {

    font-weight:
        700 !important;
}


.primary-btn small,
.secondary-btn small {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   10. BACK TO CHAPTER

   Match Activity 1 typography:
       Arial
       14px
       700
       line-height 1.15

   We deliberately DO NOT alter:
       position
       orange gradient
       padding
       border radius
       shadow
       hover behaviour
   ---------------------------------------------------------- */

.activity4-back-btn,
.activity4-back-btn * {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;
}


/* Arrow previously used 900. */

.activity4-back-arrow {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;
}


/* ----------------------------------------------------------
   11. TECHNICAL / BINARY CONTENT

   Do NOT convert genuine binary/code data to proportional
   typography.
   ---------------------------------------------------------- */

.flow-code,

code,
pre,
kbd,
samp {

    font-family:
        "Courier New",
        Courier,
        monospace !important;
}


/* Preserve the technical binary emphasis. */

.flow-code {

    font-weight:
        900 !important;
}


/* ----------------------------------------------------------
   12. RESPONSIVE PROTECTION

   Existing laptop CSS changes the Back-to-Chapter text
   to 11px. Prevent that typography mismatch while leaving
   all responsive layout dimensions untouched.
   ---------------------------------------------------------- */

@media (
    min-width: 901px
) and (
    max-height: 850px
) {

    .activity4-back-btn,
    .activity4-back-btn * {

        font-family:
            Arial,
            "Helvetica Neue",
            Helvetica,
            sans-serif !important;

        font-size:
            14px !important;

        font-weight:
            700 !important;

        line-height:
            1.15 !important;
    }

}


/* ACTIVITY4_MATCH_ACTIVITY1_TYPOGRAPHY_V1_END */