/* =========================================================
   DIGITAL TOOLS QUIZ
========================================================= */

:root {

    --navy: #123d73;
    --blue: #2d6eb7;

    --text: #405c77;
    --muted: #7b8ca0;

    --teal: #15988e;
    --teal-dark: #08766f;
    --teal-soft: #edf9f7;

    --gold: #e9ab24;
    --gold-dark: #b97906;
    --gold-soft: #fff7e3;

    --red: #d94c5b;
    --red-soft: #fff0f2;

    --green: #33966d;
    --green-soft: #edf8f2;

    --line: #d6e4ef;

    --page: #f6fafc;

    --font:
        "Segoe UI",
        Arial,
        sans-serif;

    --display:
        "Trebuchet MS",
        "Segoe UI",
        Arial,
        sans-serif;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background:
        radial-gradient(
            circle at top left,
            rgba(21,152,142,.08),
            transparent 27%
        ),
        radial-gradient(
            circle at top right,
            rgba(233,171,36,.09),
            transparent 25%
        ),
        var(--page);

    color: var(--text);

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

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


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

.quiz-shell {
    width:
        min(
            1080px,
            calc(100% - 30px)
        );

    margin:
        14px auto 28px;

    background: white;

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

    border-radius: 23px;

    box-shadow:
        0 20px 48px
        rgba(38,70,103,.10);

    overflow: hidden;
}


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

.quiz-header {
    display: grid;

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

    align-items: center;

    gap: 15px;

    min-height: 70px;

    padding:
        12px 20px;

    border-bottom:
        1px solid var(--line);
}

.header-icon {
    display: grid;

    width: 46px;
    height: 46px;

    place-items: center;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            var(--red),
            #b83249
        );

    color: white;

    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    font-size: 24px;
    font-weight: 900;

    box-shadow:
        0 7px 15px
        rgba(217,76,91,.20);
}

.header-copy h1 {
    margin: 0;

    color: var(--navy);

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

    font-size:
        clamp(
            22px,
            2.4vw,
            30px
        );

    line-height: 1.08;
}

.header-copy p {
    margin:
        3px 0 0;

    color: var(--muted);

    font-size: 12px;
}

.topic-badge {
    padding:
        8px 12px;

    border:
        1px solid #c9e5df;

    border-radius: 13px;

    background:
        var(--teal-soft);

    text-align: right;
}

.topic-badge strong {
    display: block;

    color: var(--teal-dark);

    font-size: 11px;
}

.topic-badge span {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 9px;
}


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

.screen {
    display: none;

    padding:
        28px 30px;
}

.screen.active {
    display: block;
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-btn,
.secondary-btn {
    display: inline-flex;

    min-width: 190px;

    justify-content: center;
    align-items: center;
    flex-direction: column;

    gap: 2px;

    padding:
        11px 20px;

    border-radius: 10px;

    cursor: pointer;

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

.primary-btn {
    border:
        1px solid var(--navy);

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--blue)
        );

    color: white;

    box-shadow:
        0 7px 18px
        rgba(18,61,115,.16);
}

.secondary-btn {
    border:
        1px solid #bfd2e5;

    background: white;

    color: var(--navy);
}

.primary-btn:hover,
.secondary-btn:hover {
    transform:
        translateY(-2px);
}

.primary-btn:disabled {
    opacity: .45;

    cursor: default;

    transform: none;
}

.primary-btn span,
.secondary-btn span {
    font-size: 13px;
    font-weight: 800;
}

.primary-btn small,
.secondary-btn small {
    font-size: 9px;

    opacity: .8;
}


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

.start-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(340px,.95fr);

    align-items: center;

    gap: 32px;
}

.eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    padding:
        6px 10px;

    border-radius: 999px;

    background:
        var(--gold-soft);

    color:
        var(--gold-dark);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .06em;
}

.start-copy h2 {
    margin:
        0 0 15px;

    color:
        var(--navy);

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

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    line-height: 1.04;

    letter-spacing: -.8px;
}

.start-ky {
    margin:
        0 0 7px;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.5;
}

.start-en {
    margin: 0;

    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.5;
}

.start-features {
    display: grid;

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

    gap: 9px;

    margin:
        22px 0;
}

.feature-card {
    padding: 11px;

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

    border-radius: 14px;

    background: #fbfdff;

    text-align: center;
}

.feature-card strong,
.feature-card span,
.feature-card small {
    display: block;
}

.feature-card strong {
    color:
        var(--navy);

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

    font-size: 22px;
}

.feature-card span {
    margin-top: 2px;

    font-size: 10px;
    font-weight: 700;
}

.feature-card small {
    margin-top: 2px;

    color:
        var(--muted);

    font-size: 8px;
}

.start-actions {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}


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

.start-visual {
    min-height: 385px;

    padding: 22px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            180deg,
            #f3fbff,
            #ffffff 58%,
            #fff9ec
        );
}

.visual-title {
    text-align: center;
}

.visual-title strong {
    display: block;

    color:
        var(--navy);

    font-size: 14px;
}

.visual-title span {
    display: block;

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 10px;
}

.tool-grid {
    display: grid;

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

    gap: 12px;

    margin:
        23px 0;
}

.tool-card {
    padding:
        14px 10px;

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

    border-radius: 16px;

    background: white;

    text-align: center;

    box-shadow:
        0 8px 18px
        rgba(35,66,96,.06);
}

.tool-symbol {
    display: grid;

    width: 40px;
    height: 40px;

    place-items: center;

    margin:
        0 auto 7px;

    border-radius: 12px;

    color: white;

    font-size: 15px;
    font-weight: 900;
}

.tool-mail .tool-symbol {
    background:
        var(--red);
}

.tool-docs .tool-symbol {
    background:
        var(--blue);
}

.tool-drive .tool-symbol {
    background:
        var(--gold);
}

.tool-typing .tool-symbol {
    background:
        var(--teal);
}

.tool-card strong {
    display: block;

    color:
        var(--navy);

    font-size: 12px;
}

.tool-card small {
    display: block;

    margin-top: 2px;

    color:
        var(--muted);

    font-size: 9px;
}

.start-visual blockquote {
    margin:
        18px 0 0;

    padding: 13px;

    border-left:
        4px solid var(--gold);

    border-radius:
        0 12px 12px 0;

    background:
        var(--gold-soft);

    text-align: center;
}

.start-visual blockquote strong,
.start-visual blockquote span {
    display: block;
}

.start-visual blockquote strong {
    color:
        var(--navy);

    font-size: 12px;
}

.start-visual blockquote span {
    margin-top: 3px;

    color:
        var(--muted);

    font-size: 9px;
}


/* =========================================================
   QUIZ TOP BAR
========================================================= */

.quiz-topbar {
    display: grid;

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

    align-items: center;

    gap: 15px;

    margin-bottom: 13px;
}

.progress-copy,
.score-copy {
    min-width: 90px;

    padding:
        8px 12px;

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

    border-radius: 13px;

    background: #fbfdff;
}

.progress-copy span,
.progress-copy strong,
.progress-copy small,
.score-copy span,
.score-copy strong,
.score-copy small {
    display: block;
}

.progress-copy span,
.score-copy span {
    font-size: 9px;
    font-weight: 700;
}

.progress-copy strong,
.score-copy strong {
    margin:
        1px 0;

    color:
        var(--navy);

    font-size: 18px;
}

.progress-copy small,
.score-copy small {
    color:
        var(--muted);

    font-size: 8px;
}

.progress-track {
    height: 8px;

    border-radius: 999px;

    background: #e8eff5;

    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;

    border-radius: inherit;

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

    transition:
        width .3s ease;
}


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

.question-card {
    max-width: 860px;

    margin: 0 auto;

    padding: 22px;

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

    border-radius: 21px;

    background: white;

    box-shadow:
        0 12px 30px
        rgba(35,67,100,.06);
}

.question-meta {
    display: flex;

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

    gap: 12px;
}

.question-type {
    padding:
        5px 9px;

    border-radius: 999px;

    background:
        var(--teal-soft);

    color:
        var(--teal-dark);

    font-size: 9px;
    font-weight: 800;
}

.question-number-badge {
    display: grid;

    width: 35px;
    height: 35px;

    place-items: center;

    border-radius: 11px;

    background:
        var(--navy);

    color: white;

    font-size: 11px;
    font-weight: 800;
}

.question-text {
    margin:
        15px 0;
}

.question-text h2 {
    margin: 0;

    color:
        var(--navy);

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

    font-size:
        clamp(
            23px,
            3vw,
            32px
        );

    line-height: 1.15;
}

.question-text p {
    margin:
        6px 0 0;

    color:
        var(--muted);

    font-size: 12px;

    line-height: 1.45;
}


/* =========================================================
   SCENARIO
========================================================= */

.scenario-box {
    margin:
        0 0 14px;

    padding:
        11px 13px;

    border:
        1px solid #e5d3a4;

    border-radius: 13px;

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

.scenario-box span {
    display: block;

    color:
        var(--gold-dark);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .08em;
}

.scenario-box strong {
    display: block;

    margin-top: 4px;

    color:
        var(--navy);

    font-size: 12px;

    line-height: 1.4;
}


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

.answers-grid {
    display: grid;

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

    gap: 10px;
}

.answer-btn {
    display: grid;

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

    align-items: center;

    gap: 11px;

    min-height: 68px;

    padding:
        11px 13px;

    border:
        2px solid #d9e4ee;

    border-radius: 15px;

    background: #fbfdff;

    color:
        var(--text);

    cursor: pointer;

    text-align: left;

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

.answer-btn:hover:not(:disabled) {
    transform:
        translateY(-2px);

    border-color:
        #9dbbd8;

    background:
        #f7fbff;
}

.answer-letter {
    display: grid;

    width: 34px;
    height: 34px;

    place-items: center;

    border-radius: 10px;

    background:
        #edf3f8;

    color:
        var(--navy);

    font-size: 11px;
    font-weight: 900;
}

.answer-copy strong {
    display: block;

    color:
        var(--navy);

    font-size: 12px;
}

.answer-copy small {
    display: block;

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 9px;

    line-height: 1.3;
}

.answer-btn.correct {
    border-color:
        var(--green);

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

.answer-btn.correct .answer-letter {
    background:
        var(--green);

    color: white;
}

.answer-btn.wrong {
    border-color:
        var(--red);

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

.answer-btn.wrong .answer-letter {
    background:
        var(--red);

    color: white;
}

.answer-btn:disabled {
    cursor: default;
}


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

.feedback-box {
    display: none;

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

    align-items: center;

    gap: 11px;

    margin-top: 14px;

    padding:
        11px 13px;

    border-radius: 14px;
}

.feedback-box.show {
    display: grid;
}

.feedback-box.success {
    border:
        1px solid #c9e4d3;

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

.feedback-box.failure {
    border:
        1px solid #efcbd0;

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

.feedback-icon {
    display: grid;

    width: 36px;
    height: 36px;

    place-items: center;

    border-radius: 11px;

    background: white;

    color:
        var(--navy);

    font-size: 18px;
    font-weight: 900;
}

.feedback-box strong {
    display: block;

    color:
        var(--navy);

    font-size: 12px;
}

.feedback-box p {
    margin:
        3px 0 0;

    font-size: 10px;

    line-height: 1.35;
}

.question-actions {
    display: flex;

    justify-content: flex-end;

    margin-top: 14px;
}


/* =========================================================
   RESULT
========================================================= */

.result-card {
    max-width: 720px;

    margin: 0 auto;

    padding: 29px;

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

    border-radius: 23px;

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

    text-align: center;
}

.result-badge {
    display: grid;

    width: 62px;
    height: 62px;

    place-items: center;

    margin:
        0 auto 12px;

    border-radius: 19px;

    background:
        var(--teal);

    color: white;

font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    font-size: 25px;
    font-weight: 900;
}

.result-kicker {
    color:
        var(--gold-dark);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .08em;
}

.result-card h2 {
    margin:
        5px 0 2px;

    color:
        var(--navy);

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

    font-size: 31px;
}

.result-card > p {
    margin: 0;

    color:
        var(--muted);

    font-size: 11px;
}

.score-circle {
    display: grid;

    width: 150px;
    height: 150px;

    place-items: center;
    align-content: center;

    margin:
        20px auto;

    border:
        10px solid
        var(--teal-soft);

    border-radius: 50%;

    background: white;

    box-shadow:
        inset 0 0 0 2px
        #c8e3dd;
}

.score-circle strong {
    color:
        var(--navy);

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

    font-size: 27px;
}

.score-circle span {
    margin-top: 3px;

    color:
        var(--teal-dark);

    font-size: 15px;
    font-weight: 800;
}

.result-stats {
    display: grid;

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

    gap: 9px;
}

.result-stats > div {
    padding: 11px;

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

    border-radius: 13px;

    background:
        #fbfdff;
}

.result-stats span,
.result-stats strong,
.result-stats small {
    display: block;
}

.result-stats span {
    font-size: 9px;
    font-weight: 700;
}

.result-stats strong {
    margin:
        3px 0;

    color:
        var(--navy);

    font-size: 21px;
}

.result-stats small {
    color:
        var(--muted);

    font-size: 8px;
}

.result-message {
    margin:
        18px 0;

    padding: 13px;

    border-left:
        4px solid var(--gold);

    border-radius:
        0 12px 12px 0;

    background:
        var(--gold-soft);

    color:
        var(--navy);

    font-size: 12px;

    line-height: 1.45;
}

.result-actions {
    display: flex;

    justify-content: center;

    gap: 10px;

    flex-wrap: wrap;
}


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

@media (max-width: 850px) {

    .start-layout {
        grid-template-columns: 1fr;
    }

    .start-visual {
        min-height: auto;
    }

}


@media (max-width: 640px) {

    .quiz-shell {
        width:
            calc(100% - 12px);

        margin-top: 6px;
    }

    .quiz-header {
        grid-template-columns:
            auto
            minmax(0,1fr);

        padding:
            10px 13px;
    }

    .topic-badge {
        display: none;
    }

    .screen {
        padding:
            18px 13px;
    }

    .start-features,
    .result-stats {
        grid-template-columns: 1fr;
    }

    .answers-grid {
        grid-template-columns: 1fr;
    }

    .question-card {
        padding:
            16px 13px;
    }

    .start-actions,
    .result-actions {
        flex-direction: column;
    }

    .start-actions button,
    .result-actions button {
        width: 100%;
    }

}


/* =========================================================
   LAPTOP HEIGHT OPTIMIZATION
========================================================= */

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

    .quiz-shell {
        margin-top: 6px;
    }

    .quiz-header {
        min-height: 60px;

        padding:
            8px 18px;
    }

    .screen {
        padding:
            17px 27px;
    }

    .question-card {
        padding:
            17px 20px;
    }

    .question-text {
        margin:
            10px 0;
    }

    .answer-btn {
        min-height: 59px;

        padding:
            9px 12px;
    }

    .feedback-box {
        margin-top: 9px;

        padding:
            8px 11px;
    }

    .question-actions {
        margin-top: 9px;
    }

}

/* 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 !important;

    -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 !important;

}


/* ----------------------------------------------------------
   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 !important;

}


/* ----------------------------------------------------------
   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 !important;

}


/* ==========================================================
   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 !important;
    --ebook-activity-font:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


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

/* DIGITAL_TOOLS_ACTIVITY1_EXACT_TYPOGRAPHY_V3_START */


/* ==========================================================
   DIGITAL TOOLS QUIZ
   TYPOGRAPHY REFERENCE:
   DIGITAL CHOICE CHALLENGE / ACTIVITY 1

   This is the FINAL typography layer for this activity.

   Keep:
       layout
       colours
       dimensions
       question logic
       JavaScript

   Match:
       Kyrgyz font family
       Kyrgyz rendering
       heading weight
       question weight
       Back-to-Chapter typography and appearance
========================================================== */


/* ==========================================================
   1. BASE FONT — EXACT ACTIVITY 1 FAMILY
========================================================== */

html,
body,
.quiz-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. ALL NORMAL TEXT
========================================================== */

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

p,
span,
strong,
small,
b,
em,
label,
li,
a,

button,
input,
textarea,
select,
option,

table,
th,
td {

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


/* ==========================================================
   3. KYRGYZ HEADINGS

   Match Activity 1's clean Cyrillic rendering.
========================================================== */

.header-copy h1,
.start-copy h2,
.question-text h2,
#question-ky,
.result-card h2 {

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

    font-style:
        normal !important;

    font-weight:
        700 !important;

    font-kerning:
        normal !important;

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

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   4. REMOVE DIGITAL-TOOLS NEGATIVE HEADING TRACKING

   Original:
       letter-spacing: -.8px

   Activity 1 does not use that compressed appearance.
========================================================== */

.start-copy h2 {

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;
}


/* ==========================================================
   5. KYRGYZ BODY / INSTRUCTION TEXT
========================================================== */

.start-ky,

.visual-title strong,

.feature-card span,

.start-visual blockquote strong,

.progress-copy span,
.score-copy span,

.question-type,

.scenario-box strong,

.feedback-box strong,

.result-stats span,
.result-message {

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

    font-style:
        normal !important;

    font-kerning:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ==========================================================
   6. IMPORTANT KYRGYZ LABELS

   Use normal bold rather than artificial 800/900 where
   they are ordinary educational text.
========================================================== */

.start-ky,
.visual-title strong,
.feature-card span,
.start-visual blockquote strong,
.progress-copy span,
.score-copy span,
.question-type,
.scenario-box strong,
.feedback-box strong,
.result-stats span {

    font-weight:
        700 !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   7. QUESTION

   Same clean Activity-1-style bold appearance.
========================================================== */

#question-ky,
.question-text h2 {

    font-weight:
        700 !important;

    font-style:
        normal !important;

    font-kerning:
        normal !important;

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

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;

    text-rendering:
        optimizeLegibility !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   8. ANSWER TEXT
========================================================== */

.answer-btn,
.answer-copy,
.answer-copy strong,
.answer-copy small {

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

    font-style:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-rendering:
        optimizeLegibility !important;
}


.answer-copy strong {

    font-weight:
        700 !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   9. PRIMARY / NORMAL BUTTON TYPOGRAPHY
========================================================== */

.primary-btn,
.primary-btn *,

.secondary-btn,
.secondary-btn * {

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

    font-style:
        normal !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   10. BACK TO CHAPTER
   EXACT ACTIVITY 1 VISUAL + FONT STYLE

   File 2 reference:
       background: #d89b61
       color: white
       padding: 8px 19px
       radius: 18px
       font-size: 14px
       font-weight: bold
========================================================== */

#back-to-chapter-btn.chapter-back-btn,
#quiz-back-to-chapter-btn.quiz-back-button,
#result-back-btn {

    display:
        inline-flex !important;

    width:
        fit-content !important;

    min-width:
        0 !important;

    max-width:
        max-content !important;

    min-height:
        0 !important;

    height:
        auto !important;

    flex-direction:
        row !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        6px !important;

    padding:
        8px 19px !important;

    border:
        none !important;

    border-radius:
        18px !important;

    background:
        #d89b61 !important;

    background-image:
        none !important;

    color:
        #ffffff !important;

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

    font-size:
        14px !important;

    font-style:
        normal !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    text-decoration:
        none !important;

    text-align:
        center !important;

    white-space:
        nowrap !important;

    box-shadow:
        none !important;

    font-synthesis:
        none !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ==========================================================
   11. START-SCREEN BACK BUTTON ARROW
========================================================== */

#back-to-chapter-btn .chapter-back-arrow {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    font-style:
        normal !important;
}


/* ==========================================================
   12. START-SCREEN BACK BUTTON TEXT

   This is especially important:
   remove the old 13px / 800 treatment completely.
========================================================== */

#back-to-chapter-btn .chapter-back-text {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

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

    font-size:
        14px !important;

    font-style:
        normal !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    font-kerning:
        normal !important;

    text-rendering:
        optimizeLegibility !important;

    white-space:
        nowrap !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   13. QUIZ-SCREEN BACK BUTTON
========================================================== */

#quiz-back-to-chapter-btn {

    color:
        #ffffff !important;
}


#quiz-back-to-chapter-btn,
#quiz-back-to-chapter-btn * {

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    font-style:
        normal !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;

    font-synthesis:
        none !important;
}


/* ==========================================================
   14. RESULT-SCREEN BACK BUTTON

   Existing HTML may still use span + small.
   Make it visually match Activity 1 too.
========================================================== */

#result-back-btn {

    color:
        #ffffff !important;
}


#result-back-btn span,
#result-back-btn small {

    display:
        inline !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #ffffff !important;

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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    opacity:
        1 !important;

    letter-spacing:
        normal !important;
}


/* Put Kyrgyz + English on one line */

#result-back-btn {

    gap:
        4px !important;
}


#result-back-btn small::before {

    content:
        "/ " !important;
}


/* ==========================================================
   15. HOVER — SUBTLE ONLY
========================================================== */

#back-to-chapter-btn:hover,
#quiz-back-to-chapter-btn:hover,
#result-back-btn:hover {

    background:
        #d89b61 !important;

    color:
        #ffffff !important;

    transform:
        translateY(-1px) !important;

    box-shadow:
        0 5px 12px
        rgba(0, 0, 0, .14) !important;
}


/* ==========================================================
   16. MOBILE

   Do not allow generic secondary-button rules to stretch
   Back-to-Chapter to full width.
========================================================== */

@media (max-width: 640px) {

    #back-to-chapter-btn,
    #quiz-back-to-chapter-btn,
    #result-back-btn {

        width:
            fit-content !important;

        min-width:
            0 !important;
    }
}


/* ==========================================================
   17. PROTECT TECHNICAL 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;
}


/* DIGITAL_TOOLS_ACTIVITY1_EXACT_TYPOGRAPHY_V3_END */