/* =========================================================
   МААЛЫМАТТЫН САЯКАТЫ
   THE JOURNEY OF DATA
========================================================= */

:root {

    --navy: #123b72;
    --blue: #2b70b3;

    --teal: #15938a;
    --teal-soft: #eaf8f6;

    --gold: #e3a71c;
    --gold-soft: #fff7dc;

    --green: #28875f;
    --green-soft: #eaf8f1;

    --red: #d84c58;
    --red-soft: #fff0f2;

    --text: #425d75;
    --muted: #74879a;

    --border: #d8e5ef;

    --shadow:
        0 14px 34px
        rgba(35, 66, 100, 0.11);
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    min-height: 100%;
}


body {

    padding: 10px;

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

    color: var(--text);

    background:
        linear-gradient(
            180deg,
            #edf7ff,
            #f9fbfd
        );
}


button {
    font: inherit;
}


/* =========================================================
   SHELL
========================================================= */

.journey-shell {

    width:
        min(94vw, 1400px);

    margin:
        6px auto;

    overflow: hidden;

    border:
        1px solid #dce7f0;

    border-radius:
        24px;

    background:
        white;

    box-shadow:
        0 18px 50px
        rgba(34, 63, 94, 0.12);
}


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

.journey-header {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 64px;

    padding:
        9px 23px;

    border-bottom:
        1px solid #e4ebf2;

    background:
        linear-gradient(
            90deg,
            #fff9e9,
            white 48%,
            #edf9f6
        );
}


.header-icon {

    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    border-radius: 14px;

    background: #edf5ff;

    font-size: 25px;
}


.header-copy {
    flex: 1;
}


.header-copy h1 {

    margin: 0;

    color: var(--navy);

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

    font-size: 28px;
}


.header-copy p {

    margin: 2px 0 0;

    color: var(--muted);

    font-size: 11px;
}


.topic-badge {

    padding:
        6px 11px;

    border:
        1px solid #c8e7e2;

    border-radius: 12px;

    background: #effaf8;

    text-align: center;
}


.topic-badge strong {

    display: block;

    color: var(--teal);

    font-size: 10px;
}


.topic-badge span {

    display: block;

    color: var(--muted);

    font-size: 7px;
}


/* =========================================================
   SCREENS
========================================================= */

.screen {

    display: none;

    padding: 18px 24px;
}


.screen.active {
    display: block;
}


/* =========================================================
   START SCREEN
========================================================= */

.start-card {

    max-width: 1050px;

    margin:
        5px auto;

    padding:
        24px;

    border:
        1px solid #ead89c;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #fff8e5
        );

    text-align: center;
}


.start-symbol {

    font-size: 28px;

    letter-spacing: 8px;
}


.start-card h2 {

    margin:
        9px 0 3px;

    color: var(--navy);

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

    font-size:
        clamp(24px, 2.7vw, 34px);
}


.start-en {

    margin:
        0 0 14px;

    color: var(--muted);

    font-size: 13px;
}


.mission-description {

    max-width: 680px;

    margin:
        0 auto 17px;

    padding:
        13px 17px;

    border-radius: 15px;

    background:
        rgba(255,255,255,0.82);
}


.mission-description strong {

    color: var(--teal);

    font-size: 13px;
}


.mission-description p {

    margin:
        6px 0;

    font-size: 13px;

    line-height: 1.45;
}


.mission-description small {

    color: var(--muted);

    font-size: 9px;

    line-height: 1.35;
}


.concept-preview {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin:
        16px auto 18px;
}


.concept-preview > div {

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 85px;

    padding:
        10px 8px;

    border:
        1px solid #dce7ef;

    border-radius: 14px;

    background: white;

    font-size: 25px;
}


.concept-preview span {

    margin-top: 3px;

    color: var(--navy);

    font-size: 10px;

    font-weight: 700;
}


.concept-preview small {

    color: var(--muted);

    font-size: 7px;
}


.concept-preview i {

    color: #8ca4b8;

    font-size: 17px;

    font-style: normal;
}


/* =========================================================
   BUTTON
========================================================= */

.main-button {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 190px;

    margin:
        7px auto 0;

    padding:
        9px 20px;

    border: 0;

    border-radius: 14px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #2c71b3,
            #16938a
        );

    box-shadow:
        0 8px 18px
        rgba(44,113,179,0.22);

    cursor: pointer;

    transition:
        transform 0.17s ease;
}


.main-button:hover {

    transform:
        translateY(-2px);
}


.main-button strong {

    font-size: 12px;
}


.main-button span {

    margin-top: 2px;

    opacity: 0.82;

    font-size: 8px;
}


.main-button.compact {

    min-width: 160px;

    padding:
        7px 16px;
}


.hidden {
    display: none !important;
}


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

.status-row {

    display: grid;

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

    gap: 9px;

    margin-bottom: 10px;
}


.status-row > div {

    padding: 8px;

    border:
        1px solid var(--border);

    border-radius: 13px;

    background: #f9fcff;

    text-align: center;
}


.status-row span {

    display: block;

    color: var(--navy);

    font-size: 10px;

    font-weight: 700;
}


.status-row strong {

    display: block;

    margin:
        2px 0;

    color: var(--navy);

    font-size: 19px;
}


.status-row small {

    color: var(--muted);

    font-size: 7px;
}


/* =========================================================
   NETWORK MAP
========================================================= */

.network-map {

    position: relative;

    padding:
        13px 17px 15px;

    border:
        1px solid #d5e5ef;

    border-radius: 19px;

    background:
        linear-gradient(
            180deg,
            #edf8ff,
            #f9fcff
        );

    overflow: hidden;
}


.map-title {

    margin-bottom: 13px;

    text-align: center;
}


.map-title strong {

    display: block;

    color: var(--navy);

    font-size: 13px;
}


.map-title span {

    color: var(--muted);

    font-size: 8px;
}


.journey-track {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        40px
        1fr
        40px
        1fr
        40px
        1fr
        40px
        1fr
        40px
        1fr;

    align-items: center;

    max-width: 1100px;

    margin: auto;
}


.checkpoint {

    position: relative;

    z-index: 2;

    min-height: 92px;

    padding:
        8px 5px;

    border:
        1px solid #d9e5ee;

    border-radius: 14px;

    background:
        rgba(255,255,255,0.88);

    text-align: center;

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


.checkpoint-icon {

    font-size: 29px;
}


.checkpoint strong {

    display: block;

    margin-top: 3px;

    color: var(--navy);

    font-size: 10px;
}


.checkpoint small {

    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 7px;
}


.active-checkpoint {

    border-color:
        var(--gold);

    background:
        var(--gold-soft);

    transform:
        translateY(-3px);

    box-shadow:
        0 6px 14px
        rgba(185,130,28,0.13);
}


.completed-checkpoint {

    border-color:
        #7bc2a2;

    background:
        var(--green-soft);
}


.connector {

    height: 4px;

    background:
        repeating-linear-gradient(
            90deg,
            #9bb5ca 0,
            #9bb5ca 10px,
            transparent 10px,
            transparent 16px
        );
}


.data-packet {

    position: absolute;

    z-index: 8;

    left: 5%;

    top: 51px;

    font-size: 25px;

    transition:
        left 0.8s
        cubic-bezier(.2,.8,.2,1);

    filter:
        drop-shadow(
            0 3px 2px
            rgba(31,55,77,0.16)
        );
}


.data-packet.bounce {

    animation:
        packetBounce
        0.35s ease;
}


@keyframes packetBounce {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }
}


.delivery-bar {

    height: 6px;

    max-width: 1050px;

    margin:
        14px auto 0;

    overflow: hidden;

    border-radius: 999px;

    background: #dce7ee;
}


.delivery-progress {

    width: 0%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            var(--teal)
        );

    transition:
        width 0.7s ease;
}


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

.question-card {

    margin-top: 11px;

    padding:
        17px 20px;

    border:
        1px solid var(--border);

    border-radius: 18px;

    background: white;

    box-shadow: var(--shadow);

    text-align: center;
}


.question-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 5px;

    padding:
        4px 9px;

    border-radius: 999px;

    background: var(--teal-soft);
}


.question-label strong {

    color: var(--teal);

    font-size: 9px;
}


.question-label span {

    color: var(--muted);

    font-size: 7px;
}


.question-card h2 {

    margin:
        5px 0 3px;

    color: var(--navy);

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

    font-size:
        clamp(19px, 2vw, 25px);
}


.question-card > p {

    margin:
        0 0 12px;

    color: var(--muted);

    font-size: 10px;
}


.answers {

    display: grid;

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

    gap: 8px;

    max-width: 900px;

    margin: auto;
}


.answer-button {

    min-height: 61px;

    padding:
        9px 12px;

    border:
        1px solid #d7e3ed;

    border-radius: 13px;

    color: var(--navy);

    background: #fbfdff;

    cursor: pointer;

    text-align: left;

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


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

    transform:
        translateY(-2px);

    border-color:
        #7ca8cf;

    background:
        #f4f9fd;
}


.answer-button strong {

    display: block;

    font-size: 11px;
}


.answer-button small {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 8px;
}


.answer-button.correct {

    border-color:
        #70bf99;

    color: #176b48;

    background:
        var(--green-soft);
}


.answer-button.wrong {

    border-color:
        #e29ba3;

    color: #a33a45;

    background:
        var(--red-soft);
}


.feedback {

    min-height: 0;

    max-width: 760px;

    margin:
        10px auto 0;

    border-radius: 12px;

    font-size: 10px;

    line-height: 1.4;
}


.feedback.success {

    padding:
        8px 11px;

    color: #176b48;

    background:
        var(--green-soft);
}


.feedback.error {

    padding:
        8px 11px;

    color: #9f3944;

    background:
        var(--red-soft);
}


.learning-tip {

    margin-top: 8px;

    padding:
        7px 11px;

    border:
        1px solid #d5e6f0;

    border-radius: 12px;

    background: #f4faff;

    text-align: center;

    font-size: 9px;
}


.learning-tip strong {

    color: var(--navy);
}


/* =========================================================
   FINAL
========================================================= */

.final-card {

    max-width: 800px;

    margin:
        10px auto;

    padding:
        28px;

    border:
        1px solid var(--border);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fffdf7,
            #f4faff,
            #eff9f6
        );

    box-shadow: var(--shadow);

    text-align: center;
}


.final-icon {
    font-size: 55px;
}


.final-card h2 {

    margin:
        6px 0 2px;

    color: var(--navy);

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

    font-size: 31px;
}


.final-en {

    margin:
        0;

    color: var(--muted);

    font-size: 11px;
}


.final-route {

    margin:
        20px auto;

    font-size: 26px;
}


.final-route span {

    margin:
        0 6px;

    color: #8ea5b8;

    font-size: 16px;
}


.final-score-box {

    max-width: 300px;

    margin:
        0 auto 15px;

    padding: 12px;

    border-radius: 15px;

    background: white;

    border:
        1px solid #dae6ee;
}


.final-score-box span {

    display: block;

    font-size: 9px;
}


.final-score-box strong {

    display: block;

    color: var(--navy);

    font-size: 25px;
}


.final-score-box small {

    color: var(--muted);

    font-size: 7px;
}


.final-message {

    max-width: 600px;

    margin:
        0 auto 15px;

    padding: 12px;

    border-radius: 14px;

    color: #765315;

    background: var(--gold-soft);

    font-size: 12px;

    font-weight: 700;
}


.final-learning {

    padding: 15px;

    border-radius: 16px;

    background: var(--teal-soft);
}


.final-learning strong {

    color: var(--teal);

    font-size: 12px;
}


.final-learning p {

    margin:
        6px 0;

    font-size: 11px;

    line-height: 1.45;
}


.final-learning small {

    color: var(--muted);

    font-size: 8px;

    line-height: 1.4;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .journey-track {

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

        gap: 5px;
    }


    .connector {
        display: none;
    }


    .checkpoint {

        min-height: 84px;
    }


    .data-packet {
        display: none;
    }


    .answers {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    body {
        padding: 4px;
    }


    .screen {
        padding:
            12px;
    }


    .status-row {

        gap: 4px;
    }


    .concept-preview i {
        display: none;
    }


    .concept-preview > div {

        min-width: 74px;
    }


    .journey-track {

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

}



/* =========================================================
   ACTIVITY_STANDARD_BACK_BUTTON_V1
========================================================= */

.chapter-back-row {
    width: 100%;

    display: flex;

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

    margin-top: 18px;

    padding:
        0 20px
        20px;

    box-sizing: border-box;
}


.chapter-back-button {
    width: min(
        100%,
        525px
    );

    min-height: 64px;

    padding:
        14px 28px;

    display: flex;

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

    gap: 18px;

    box-sizing: border-box;

    border: 0;

    border-radius: 0;

    background:
        linear-gradient(
            135deg,
            #146bc3,
            #1955a3
        );

    color: #ffffff !important;

    text-decoration: none !important;

    text-align: center;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 800;

    box-shadow:
        0 7px 16px
        rgba(25, 85, 163, .18);

    cursor: pointer;

    position: relative;

    z-index: 5;

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


.chapter-back-button:hover {
    color: #ffffff !important;

    text-decoration: none !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 9px 20px
        rgba(25, 85, 163, .24);
}


.chapter-back-arrow {
    flex:
        0 0 auto;

    font-size: 21px;

    line-height: 1;

    font-weight: 500;
}


@media (
    max-width: 700px
) {

    .chapter-back-row {
        margin-top: 14px;

        padding:
            0 12px
            16px;
    }


    .chapter-back-button {
        width: 100%;

        min-height: 56px;

        padding:
            12px 18px;

        gap: 12px;

        font-size: 15px;
    }

}




/* =========================================================
   INTERNET_JOURNEY_ORANGE_BACK_BUTTON_V2

   Standard compact Back to Chapter style.
   Matches the orange activity navigation button.
========================================================= */


/* ---------------------------------------------------------
   BUTTON ROW
--------------------------------------------------------- */

.chapter-back-row {

    width: 100% !important;

    display: flex !important;

    justify-content: flex-start !important;
    align-items: center !important;

    box-sizing: border-box !important;

    margin:
        14px auto
        18px !important;

    padding:
        0 28px !important;

    position: relative !important;

    z-index: 10 !important;
}


/* ---------------------------------------------------------
   BUTTON
--------------------------------------------------------- */

.chapter-back-button {

    width: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    display: inline-flex !important;

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

    gap: 6px !important;

    padding:
        10px 20px !important;

    box-sizing: border-box !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            135deg,
            #f6ba63 0%,
            #eea64d 100%
        ) !important;

    color:
        #063c78 !important;

    text-decoration:
        none !important;

    text-align:
        center !important;

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

    font-size:
        14px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;

    letter-spacing:
        0 !important;

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

    cursor:
        pointer !important;

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


/* ---------------------------------------------------------
   ARROW
--------------------------------------------------------- */

.chapter-back-arrow {

    flex:
        0 0 auto !important;

    font-size:
        15px !important;

    line-height:
        1 !important;

    font-weight:
        800 !important;

    color:
        #063c78 !important;
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.chapter-back-button:hover {

    color:
        #063c78 !important;

    text-decoration:
        none !important;

    background:
        linear-gradient(
            135deg,
            #ffc974 0%,
            #f2ad53 100%
        ) !important;

    transform:
        translateY(-1px) !important;

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


/* ---------------------------------------------------------
   ACTIVE
--------------------------------------------------------- */

.chapter-back-button:active {

    transform:
        translateY(0) !important;

    box-shadow:
        0 3px 8px
        rgba(
            126,
            82,
            22,
            .15
        ) !important;
}


/* ---------------------------------------------------------
   KEYBOARD ACCESSIBILITY
--------------------------------------------------------- */

.chapter-back-button:focus-visible {

    outline:
        3px solid
        rgba(
            238,
            166,
            77,
            .35
        ) !important;

    outline-offset:
        3px !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (
    max-width: 700px
) {

    .chapter-back-row {

        padding:
            0 16px !important;

        margin-top:
            12px !important;
    }


    .chapter-back-button {

        padding:
            9px 16px !important;

        font-size:
            13px !important;
    }


    .chapter-back-arrow {

        font-size:
            14px !important;
    }

}



/* 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 */

/* JOURNEY_DATA_MATCH_ACTIVITY1_TYPOGRAPHY_V1_START */


/* ==========================================================
   MAALYMATTYN SAYAKATY / THE JOURNEY OF DATA

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


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

html,
body,
.journey-shell {

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

    -webkit-font-smoothing:
        antialiased !important;

    -moz-osx-font-smoothing:
        grayscale !important;

    text-rendering:
        optimizeLegibility !important;
}


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

.journey-header,
.header-copy,
.header-copy h1,
.header-copy p,

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

.start-card,
.start-card h2,
.start-en,

.mission-description,
.mission-description strong,
.mission-description p,
.mission-description small,

.concept-preview,
.concept-preview span,
.concept-preview small,

.main-button,
.main-button strong,
.main-button span,

.status-row,
.status-row span,
.status-row strong,
.status-row small,

.map-title,
.map-title strong,
.map-title span,

.checkpoint,
.checkpoint strong,
.checkpoint small,

.question-label,
.question-label strong,
.question-label span,

.question-card,
.question-card h2,
.question-card > p,

.answer-button,
.answer-button strong,
.answer-button small,

.feedback,
.learning-tip,
.learning-tip strong,

.final-card,
.final-card h2,
.final-en,

.final-score-box,
.final-score-box span,
.final-score-box strong,
.final-score-box small,

.final-message,

.final-learning,
.final-learning strong,
.final-learning p,
.final-learning small {

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


/* ----------------------------------------------------------
   3. KYRGYZ CHARACTER RENDERING
   ---------------------------------------------------------- */

.header-copy h1,

.start-card h2,

.mission-description strong,
.mission-description p,

.map-title strong,

.question-card h2,
.question-card > p,

.answer-button strong,

.feedback,

.final-card h2,
.final-message,

.final-learning strong,
.final-learning p {

    font-kerning:
        normal !important;

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

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;

    text-rendering:
        optimizeLegibility !important;
}


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

.header-copy h1,
.start-card h2,
.final-card h2 {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   5. NORMAL READING TEXT
   ---------------------------------------------------------- */

.header-copy p,
.start-en,
.mission-description p,
.mission-description small,
.question-card > p,
.final-en,
.final-learning p,
.final-learning small {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   6. NORMAL BOLD LABELS
   ---------------------------------------------------------- */

.topic-badge strong,
.mission-description strong,
.concept-preview span,
.status-row span,
.map-title strong,
.checkpoint strong,
.question-label strong,
.learning-tip strong,
.final-learning strong {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   7. MAIN BUTTONS

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

.main-button,
.main-button strong {

    font-weight:
        700 !important;
}


.main-button span {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   8. QUESTION

   EXACT Activity 1 hierarchy:
       main question = 750
   ---------------------------------------------------------- */

.question-card h2 {

    font-weight:
        750 !important;

    letter-spacing:
        .002em !important;
}


/* Question English/helper copy */

.question-card > p {

    font-weight:
        400 !important;

    letter-spacing:
        0 !important;
}


/* ----------------------------------------------------------
   9. ANSWER OPTIONS

   Activity 1:
       choice / option = 650
   ---------------------------------------------------------- */

.answer-button,
.answer-button strong {

    font-weight:
        650 !important;
}


.answer-button small {

    font-weight:
        400 !important;
}


/* ----------------------------------------------------------
   10. FEEDBACK
   ---------------------------------------------------------- */

.feedback {

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

    font-weight:
        700 !important;

    letter-spacing:
        0 !important;
}


/* ----------------------------------------------------------
   11. FINAL SCREEN
   ---------------------------------------------------------- */

.final-message {

    font-weight:
        700 !important;
}


.final-score-box span,
.final-score-box small {

    font-weight:
        400 !important;
}


.final-score-box strong {

    font-weight:
        700 !important;
}


/* ==========================================================
   12. BACK TO CHAPTER

   EXACT Activity 1 typography:

       Arial
       14px
       weight 700
       line-height 1.15

   Existing orange pill shape, colour and position remain.
   ========================================================== */

.chapter-back-button,
.chapter-back-button *,

.back-to-chapter,
.back-to-chapter *,

.back-btn,
.back-btn *,

.back-button,
.back-button * {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        0 !important;

    word-spacing:
        normal !important;

    text-transform:
        none !important;

    text-rendering:
        optimizeLegibility !important;
}


/* Back arrow was previously 800. */

.chapter-back-arrow {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;
}


/* ----------------------------------------------------------
   13. MOBILE BACK BUTTON

   Prevent responsive rule from reducing it to 13px.
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .chapter-back-button,
    .chapter-back-button * {

        font-size:
            14px !important;

        font-weight:
            700 !important;

        line-height:
            1.15 !important;
    }

}


/* ----------------------------------------------------------
   14. PROTECT TRUE TECHNICAL TEXT

   Future technical/code elements remain monospace.
   ---------------------------------------------------------- */

code,
pre,
kbd,
samp,

.code,
.code *,
.code-block,
.code-block *,

.terminal,
.terminal *,

.console,
.console * {

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


/* JOURNEY_DATA_MATCH_ACTIVITY1_TYPOGRAPHY_V1_END */