* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      background: linear-gradient(135deg, #fff7df, #eaf3ff);
      color: #17356f;
    }

    
.game-page {
  min-height: 100vh;
  padding: 10px 18px;

  display: flex;
  align-items: center;
  justify-content: center;
}


    
.game-card {
  width: 100%;
  max-width: 1180px;
  margin: auto;

  background: white;

  border: 5px solid #234aa5;
  border-radius: 26px;

  padding: 14px 22px;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);

  position: relative;
}

    
.title {
  text-align: center;
  color: #d69a00;

  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.15;

  margin: 0 0 6px;
}


    
.instruction {
  text-align: center;
  color: #234aa5;

  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.35;

  font-weight: bold;

  margin: 0 auto 10px;
  max-width: 950px;
}


    
.score-row {
  display: flex;
  justify-content: center;

  gap: 9px;
  flex-wrap: wrap;

  margin-bottom: 10px;

  font-weight: bold;
  color: #234aa5;
  font-size: 14px;
}


    
.score-pill {
  background: #fff7df;

  border: 2px solid #d69a00;
  border-radius: 16px;

  padding: 6px 12px;
}


    
.challenge-layout {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.88fr)
    minmax(420px, 1.12fr);

  gap: 22px;

  align-items: center;
}


    
.choice-panel {
  height: min(390px, 43vh);
  min-height: 300px;

  border: 3px dashed #9ab5ef;
  border-radius: 24px;

  padding: 18px;

  background: #f8fbff;

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


    
.round-label {
  font-size: 14px;
  font-weight: bold;

  color: #6077a7;

  margin-bottom: 8px;
}


    
.statement-card {
  width: 100%;

  min-height: 125px;

  background: #fff7df;

  border: 4px solid #234aa5;
  border-radius: 22px;

  padding: 18px;

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

  text-align: center;

  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.4;

  font-weight: bold;

  box-shadow: 0 8px 18px rgba(35, 74, 165, 0.12);

  animation: cardIn 0.38s ease;
}


    @keyframes cardIn {
      from {
        opacity: 0;
        transform: translateY(-12px) scale(0.96);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    

.tap-hint {
  margin-top: 6px;

  text-align: center;

  color: #6077a7;

  font-size: 11px;
  line-height: 1.3;
}



    
.image-wrap {
  position: relative;

  width: fit-content;
  max-width: 100%;

  margin: auto;
}


    
.akylai-img {
  display: block;

  width: auto;
  max-width: 100%;

  height: min(590px, 93vh);

  object-fit: contain;

  border-radius: 22px;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.17);
}


    .bag-zone,
    .trash-zone {
      position: absolute;
      z-index: 5;

      border: 3px solid transparent;
      border-radius: 24px;
      background: transparent;

      cursor: pointer;
      transition: 0.2s ease;
    }

    .bag-zone {
      left: 0%;
      bottom: 6%;
      width: 43%;
      height: 62%;
    }

    .trash-zone {
      right: 2%;
      bottom: 7%;
      width: 30%;
      height: 46%;
    }

    .bag-zone:hover,
    .bag-zone:focus {
      background: rgba(66, 190, 112, 0.20);
      border-color: rgba(43, 160, 87, 0.75);
      outline: none;
      transform: scale(1.025);
    }

    .trash-zone:hover,
    .trash-zone:focus {
      background: rgba(245, 91, 91, 0.18);
      border-color: rgba(220, 70, 70, 0.78);
      outline: none;
      transform: scale(1.025);
    }

    .bag-zone:disabled,
    .trash-zone:disabled {
      cursor: default;
    }

    
.zone-label {
  position: absolute;
  bottom: -14px;
  z-index: 8;

  min-width: 118px;
  max-width: 145px;

  padding: 6px 10px;

  border-radius: 16px;
  border: none;

  font-size: 12px;
  line-height: 1.15;
  font-weight: bold;

  color: white;

  text-align: center;
  white-space: normal;

  cursor: pointer;

  box-shadow: 0 5px 12px rgba(0,0,0,0.15);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


    
.bag-label {
  left: 1%;
  background: #2e9d55;
}


    
.trash-label {
  right: 1%;
  background: #d34b4b;
}


    
#message {
  text-align: center;

  margin: 10px auto 0;

  padding: 9px 14px;

  min-height: 52px;
  max-width: 900px;

  font-size: clamp(14px, 1.2vw, 17px);

  font-weight: bold;
  line-height: 1.35;

  border-radius: 17px;

  background: #f7f9ff;
}


    #message.correct {
      background: #eaf9ef;
      border: 2px solid #5bbf7a;
      color: #19723a;

      animation: feedbackPop 0.35s ease;
    }

    #message.wrong {
      background: #fff1f1;
      border: 2px solid #ec8b8b;
      color: #a32828;

      animation: feedbackPop 0.35s ease;
    }

    @keyframes feedbackPop {
      0% {
        transform: scale(0.97);
      }

      65% {
        transform: scale(1.02);
      }

      100% {
        transform: scale(1);
      }
    }

    .next-btn,
    .restart-btn {
      display: none;
      margin: 16px auto 0;

      border: none;
      border-radius: 20px;

      padding: 12px 24px;

      font-weight: bold;
      font-size: 16px;

      cursor: pointer;

      background: #234aa5;
      color: white;

      box-shadow: 0 7px 15px rgba(35, 74, 165, 0.22);
    }

    .next-btn:hover,
    .restart-btn:hover {
      transform: translateY(-1px);
    }

    .final-box {
      text-align: center;
      margin-top: 24px;
      padding: 22px;

      border: 3px solid #d69a00;
      border-radius: 22px;

      background: #fff7df;

      font-size: 20px;
      font-weight: bold;
      color: #234aa5;

      display: none;

      line-height: 1.55;
    }

    .reward-emoji {
      position: fixed;
      z-index: 9999;

      pointer-events: none;

      font-size: 34px;

      animation: floatReward 1.15s ease-out forwards;
    }

    @keyframes floatReward {
      0% {
        opacity: 0;
        transform: translateY(15px) scale(0.5) rotate(-10deg);
      }

      20% {
        opacity: 1;
      }

      100% {
        opacity: 0;
        transform: translateY(-120px) scale(1.35) rotate(12deg);
      }
    }

    
.back-btn {
  display: block;

  width: fit-content;

  margin: 9px auto 0;

  padding: 8px 19px;

  background: #d89b61;
  color: white;

  text-decoration: none;

  border-radius: 18px;

  font-size: 14px;
  font-weight: bold;
}


    @media (max-width: 900px) {
      .challenge-layout {
        grid-template-columns: 1fr;
      }

      .choice-panel {
        min-height: 300px;
      }

      .title {
        font-size: 25px;
      }

      .instruction {
        font-size: 16px;
      }

      .statement-card {
        font-size: 18px;
        min-height: 130px;
      }
    }
  
@media (min-width: 901px) and (max-height: 850px) {

  .game-page {
    padding: 6px 14px;
  }

  .game-card {
    padding: 10px 18px;
    border-width: 4px;
  }

  .title {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .instruction {
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 7px;
  }

  .score-row {
    margin-bottom: 7px;
  }

  .score-pill {
    padding: 5px 10px;
    font-size: 13px;
  }

  .choice-panel {
    height: 38vh;
    min-height: 280px;
    padding: 14px;
  }

  .akylai-img {
    height: 38vh;
  }

  .statement-card {
    min-height: 105px;
    padding: 14px;
  }

  #message {
    margin-top: 7px;
    padding: 7px 12px;
    min-height: 44px;
  }

  .next-btn,
  .restart-btn {
    margin-top: 6px;
    padding: 7px 17px;
  }

  .back-btn {
    margin-top: 6px;
    padding: 7px 17px;
  }
}


.zone-label:hover {
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.22);
}

.zone-label:active {
  transform: scale(0.96);
}

.zone-label:focus-visible {
  outline: 3px solid #ffd54f;
  outline-offset: 3px;
}


.statement-card.fade-out {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#message.fade-out {
  opacity: 0;
  transition: opacity 0.25s ease;
}


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

  .zone-label {
    min-width: 110px;
    max-width: 135px;

    padding: 5px 8px;

    font-size: 11px;

    bottom: -13px;
  }

  .bag-label {
    left: 0%;
  }

  .trash-label {
    right: 0%;
  }
}

/* =========================================================
   ACTIVITY 1 — FIT FULL GAME INSIDE VIEWPORT
========================================================= */

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

body {
    overflow: hidden !important;
}


/* ---------------------------------------------------------
   Reduce the vertical footprint of the activity
--------------------------------------------------------- */

body > * {
    box-sizing: border-box;
}


/* Main outer activity wrappers */
.activity-shell,
.game-shell,
.game-container,
.activity-container,
.main-container,
.wrapper {
    max-height: calc(100vh - 76px) !important;
}


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

h1,
.activity-title,
.game-title {
    margin-top: 3px !important;
    margin-bottom: 4px !important;
}

h1 {
    font-size: clamp(
        22px,
        2vw,
        29px
    ) !important;

    line-height: 1.08 !important;
}


/* ---------------------------------------------------------
   INSTRUCTIONS
--------------------------------------------------------- */

.instructions,
.instruction,
.subtitle,
.description,
.intro-text {
    margin-top: 2px !important;
    margin-bottom: 5px !important;

    line-height: 1.25 !important;
}


/* ---------------------------------------------------------
   SCORE / STATUS ROW
--------------------------------------------------------- */

.stats,
.stats-row,
.score-row,
.status-row,
.progress-row {
    margin-top: 3px !important;
    margin-bottom: 5px !important;

    gap: 7px !important;
}


/* ---------------------------------------------------------
   MAIN PLAY AREA
--------------------------------------------------------- */

.game-area,
.challenge-area,
.activity-content,
.main-content,
.play-area {
    min-height: 0 !important;

    margin-top: 3px !important;
    margin-bottom: 3px !important;

    gap: 14px !important;
}


/* ---------------------------------------------------------
   LEFT CHOICE PANEL
--------------------------------------------------------- */

.statement-zone,
.statement-panel,
.question-area,
.challenge-box {
    min-height: 235px !important;
    max-height: 280px !important;
}


.statement-card,
.question-card {
    padding: 15px 18px !important;

    font-size: 18px !important;

    line-height: 1.25 !important;
}


/* ---------------------------------------------------------
   RIGHT IMAGE
--------------------------------------------------------- */

.image-wrap,
.scene-image-wrap,
.photo-wrap,
.character-area {
    max-height: 285px !important;
}


.image-wrap img,
.scene-image-wrap img,
.photo-wrap img,
.character-area img,
img[src*="backpack_trash"] {
    max-height: 275px !important;

    width: auto !important;

    object-fit: contain !important;
}


/* ---------------------------------------------------------
   CHOICE LABELS
--------------------------------------------------------- */

.round-label,
.choice-label,
.option-label {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}


/* ---------------------------------------------------------
   MESSAGE AREA
--------------------------------------------------------- */

#message,
.message,
.choice-message,
.tap-hint {
    min-height: unset !important;

    margin-top: 3px !important;
    margin-bottom: 3px !important;

    padding-top: 6px !important;
    padding-bottom: 6px !important;
}


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

.back-btn,
.back-to-chapter,
.chapter-link {
    margin-top: 3px !important;
    margin-bottom: 2px !important;
}


/* =========================================================
   YOUR SCREEN HEIGHT
   Screenshot is around 900px high.
========================================================= */

@media (max-height: 900px) {

    .statement-zone,
    .statement-panel,
    .question-area,
    .challenge-box {
        min-height: 225px !important;
        max-height: 260px !important;
    }

    .statement-card,
    .question-card {
        padding: 13px 16px !important;

        font-size: 17px !important;
    }

    .image-wrap img,
    .scene-image-wrap img,
    .photo-wrap img,
    .character-area img,
    img[src*="backpack_trash"] {
        max-height: 255px !important;
    }
}


/* Even shorter laptop screens */

@media (max-height: 780px) {

    h1,
    .activity-title,
    .game-title {
        font-size: 21px !important;
    }

    .statement-zone,
    .statement-panel,
    .question-area,
    .challenge-box {
        min-height: 195px !important;
        max-height: 225px !important;
    }

    .statement-card,
    .question-card {
        padding: 10px 14px !important;

        font-size: 15px !important;
    }

    .image-wrap img,
    .scene-image-wrap img,
    .photo-wrap img,
    .character-area img,
    img[src*="backpack_trash"] {
        max-height: 215px !important;
    }
}



/* DIGITAL_BACKPACK_LARGER_SCENE_V3 */


/* =========================================================
   RIGHT-HAND IMAGE AREA
========================================================= */

.challenge-layout {

    grid-template-columns:
        minmax(300px, 0.84fr)
        minmax(470px, 1.16fr) !important;

    gap:
        26px !important;
}


/* Give the complete image/choice area enough room */

.image-wrap {

    position:
        relative !important;

    width:
        fit-content !important;

    max-width:
        100% !important;

    max-height:
        none !important;

    margin:
        0 auto !important;

    overflow:
        visible !important;
}


/* =========================================================
   MAIN SCENE IMAGE
========================================================= */

.akylai-img,
.image-wrap .akylai-img,
.image-wrap img,
img[src*="backpack_trash"] {

    display:
        block !important;

    width:
        auto !important;

    height:
        350px !important;

    max-height:
        350px !important;

    max-width:
        100% !important;

    object-fit:
        contain !important;

    border-radius:
        22px !important;
}


/* =========================================================
   LABELS

   Keep them attached to the enlarged image.
========================================================= */

.zone-label {

    bottom:
        -13px !important;

    z-index:
        8 !important;
}


/* =========================================================
   SCREEN SIZE USED IN YOUR SCREENSHOT
========================================================= */

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

    .akylai-img,
    .image-wrap .akylai-img,
    .image-wrap img,
    img[src*="backpack_trash"] {

        height:
            350px !important;

        max-height:
            350px !important;
    }

}


/* =========================================================
   SLIGHTLY SHORTER LAPTOP SCREEN
========================================================= */

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

    .akylai-img,
    .image-wrap .akylai-img,
    .image-wrap img,
    img[src*="backpack_trash"] {

        height:
            315px !important;

        max-height:
            315px !important;
    }

}


/* =========================================================
   MOBILE / NARROW SCREEN

   Do not force 350px when columns collapse.
========================================================= */

@media (
    max-width: 900px
) {

    .challenge-layout {

        grid-template-columns:
            1fr !important;
    }


    .akylai-img,
    .image-wrap .akylai-img,
    .image-wrap img,
    img[src*="backpack_trash"] {

        width:
            auto !important;

        height:
            auto !important;

        max-width:
            100% !important;

        max-height:
            330px !important;
    }

}


/* END_DIGITAL_BACKPACK_LARGER_SCENE_V3 */



/* DIGITAL_BACKPACK_LAYOUT_BALANCE_V4 */


/* =========================================================
   MOVE WHOLE ACTIVITY UP
========================================================= */

.game-page {

    min-height:
        calc(100vh - 74px) !important;

    padding:
        2px 18px 8px !important;

    display:
        flex !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;
}


/* Main white activity card */

.game-card {

    margin:
        62px auto 8px !important;

    padding:
        12px 22px 14px !important;
}


/* =========================================================
   MAIN TWO-COLUMN AREA
========================================================= */

.challenge-layout {

    align-items:
        center !important;

    gap:
        28px !important;
}


/* =========================================================
   IMAGE

   Keep it large, but recover enough room underneath
   for choice labels and feedback bar.
========================================================= */

.image-wrap {

    margin:
        -2px auto 18px !important;

    overflow:
        visible !important;
}


.akylai-img,
.image-wrap .akylai-img,
.image-wrap img,
img[src*="backpack_trash"] {

    height:
        330px !important;

    max-height:
        330px !important;

    width:
        auto !important;

    max-width:
        100% !important;

    object-fit:
        contain !important;
}


/* =========================================================
   USEFUL / HARMFUL LABELS
========================================================= */

.zone-label {

    bottom:
        -11px !important;

    z-index:
        10 !important;
}


/* =========================================================
   FEEDBACK / MAKE YOUR CHOICE BAR
========================================================= */

#message {

    margin:
        3px auto 0 !important;

    min-height:
        38px !important;

    padding:
        6px 14px !important;

    line-height:
        1.25 !important;
}


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

.back-btn {

    margin:
        5px auto 0 !important;

    padding:
        8px 19px !important;
}


/* =========================================================
   SCREEN SIZE SIMILAR TO YOUR SCREENSHOT
========================================================= */

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

    .game-card {

        margin-top:
            54px !important;

        margin-bottom:
            8px !important;
    }


    .akylai-img,
    .image-wrap .akylai-img,
    .image-wrap img,
    img[src*="backpack_trash"] {

        height:
            330px !important;

        max-height:
            330px !important;
    }


    .image-wrap {

        margin-bottom:
            20px !important;
    }
}


/* =========================================================
   SHORTER LAPTOP SCREENS
========================================================= */

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

    .game-card {

        margin-top:
            26px !important;
    }


    .akylai-img,
    .image-wrap .akylai-img,
    .image-wrap img,
    img[src*="backpack_trash"] {

        height:
            295px !important;

        max-height:
            295px !important;
    }


    .image-wrap {

        margin-bottom:
            18px !important;
    }
}


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

@media (
    max-width: 900px
) {

    .game-page {

        align-items:
            flex-start !important;
    }


    .game-card {

        margin:
            12px auto !important;
    }


    .image-wrap {

        margin-bottom:
            20px !important;
    }
}


/* END_DIGITAL_BACKPACK_LAYOUT_BALANCE_V4 */



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