:root {
      --ink: #263244;
      --muted: #657184;
      --paper: #fff8e8;
      --red: #e85a4f;
      --yellow: #f2c84b;
      --blue: #3f7ee8;
      --green: #2f8f68;
      --purple: #8b63d9;
      --line: #d5bf91;
      --good: #1f8a5f;
      --bad: #b43c3c;
      --shadow: 0 14px 32px rgba(47, 60, 77, .18);
    }

    .unit5-board {
      min-height: 430px;
      align-content: center;
      gap: 18px;
    }

    .unit5-intro {
      width: min(980px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(260px, .8fr) 1fr;
      gap: 24px;
      align-items: center;
      padding: 22px;
      border-radius: 28px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 18px 40px rgba(36,49,66,.08);
    }

    .unit5-intro-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .unit5-intro-steps div {
      min-height: 150px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 12px;
      padding: 16px;
      border-radius: 24px;
      background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(240,250,255,.74));
      box-shadow: 0 16px 34px rgba(36,49,66,.08);
    }

    .unit5-intro-steps b {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: #ffd45a;
      color: #232838;
      font-size: 30px;
      font-weight: 1000;
    }

    .unit5-intro-steps span {
      color: #2f8f68;
      font-size: 24px;
      font-weight: 1000;
      text-align: center;
    }

    .unit5-estimate-single,
    .unit5-estimate-count,
    .unit5-length-stage,
    .unit5-fruit-length,
    .unit5-path,
    .unit5-scale,
    .unit5-exchange {
      min-height: 300px;
    }

    .unit5-estimate-single {
      display: grid;
      place-items: center;
    }

    .unit5-estimate-count {
      display: grid;
      grid-template-columns: minmax(160px, .36fr) 1fr;
      gap: 18px;
      align-items: center;
    }

    .unit5-estimate-count.result {
      grid-template-columns: 1fr auto;
    }

    .unit5-pack-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(120px, 1fr));
      gap: 12px;
      align-items: stretch;
    }

    .unit5-bead-pack {
      min-height: 132px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 10px;
      padding: 14px;
      border-radius: 22px;
      background: rgba(255,255,255,.82);
      box-shadow: 0 16px 32px rgba(36,49,66,.08);
      border: 2px solid rgba(255,255,255,.72);
    }

    .unit5-bead-pack.focus {
      border-color: rgba(255,212,90,.9);
      background: #fffaf0;
    }

    .unit5-beads {
      display: grid;
      grid-template-columns: repeat(5, 22px);
      gap: 7px;
      justify-content: center;
    }

    .unit5-bead {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: radial-gradient(circle at 35% 28%, #fff, #e85a4f 38%, #b93441);
      box-shadow: inset -2px -3px 0 rgba(0,0,0,.12);
    }

    .unit5-bead-pack strong {
      color: #2f8f68;
      font-size: 20px;
      font-weight: 1000;
      text-align: center;
    }

    .unit5-result-badge {
      min-width: 158px;
      min-height: 114px;
      display: grid;
      place-items: center;
      padding: 0 18px;
      border-radius: 26px;
      background: #2f8f68;
      color: white;
      font-size: 36px;
      font-weight: 1000;
      box-shadow: 0 18px 36px rgba(47,143,104,.22);
    }

    .unit5-path {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 22px;
      align-items: center;
      padding: 18px;
      border-radius: 26px;
      background: rgba(255,255,255,.64);
    }

    .unit5-cat {
      min-height: 92px;
      display: grid;
      place-items: center;
      border-radius: 26px;
      background: #232838;
      color: white;
      font-size: 24px;
      font-weight: 1000;
      box-shadow: 0 18px 32px rgba(36,49,66,.16);
    }

    .unit5-path-line {
      position: relative;
      min-height: 150px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 0 18px;
    }

    .unit5-path-line::before {
      content: "";
      position: absolute;
      left: 20px;
      right: 20px;
      top: 50%;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, #8fd694, #ffd45a, #f19aaa);
      transform: translateY(-50%);
    }

    .unit5-sign {
      position: relative;
      z-index: 1;
      width: 76px;
      height: 96px;
      display: grid;
      place-items: center;
      border-radius: 18px 18px 24px 24px;
      background: #fff;
      color: #232838;
      font-size: 38px;
      font-weight: 1000;
      box-shadow: 0 18px 34px rgba(36,49,66,.12);
      border: 4px solid #8ec5ff;
    }

    .unit5-sign.active {
      border-color: #ffd45a;
      transform: translateY(-8px);
    }

    .unit5-path-note {
      min-height: 52px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: rgba(255,255,255,.78);
      color: #667086;
      font-size: 20px;
      font-weight: 900;
      text-align: center;
    }

    .unit5-length-stage {
      display: grid;
      place-items: center;
    }

    .unit5-measure-grid {
      width: min(760px, 96%);
      min-height: 150px;
      display: grid;
      grid-template-columns: repeat(var(--cells), minmax(48px, 1fr));
      align-items: center;
      gap: 0;
      padding: 20px;
      border-radius: 26px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 18px 36px rgba(36,49,66,.08);
    }

    .unit5-measure-grid > span {
      min-height: 92px;
      display: grid;
      place-items: end center;
      padding-bottom: 10px;
      border: 2px solid rgba(36,49,66,.16);
      color: #8c96a8;
      font-size: 20px;
      font-weight: 900;
      background: rgba(255,255,255,.62);
    }

    .unit5-pencil {
      grid-column: 1 / span var(--span);
      grid-row: 1;
      align-self: center;
      min-height: 46px;
      display: grid;
      place-items: center;
      border-radius: 999px 14px 14px 999px;
      background: linear-gradient(90deg, #e85a4f, #ff8b5f 76%, #f5d06f 76%, #f5d06f 91%, #4d362c 91%);
      color: white;
      font-size: 20px;
      font-weight: 1000;
      box-shadow: 0 12px 24px rgba(232,90,79,.2);
      z-index: 1;
    }

    .unit5-fruit-length {
      display: grid;
      place-items: center;
      align-content: center;
      gap: 20px;
      padding: 18px;
      border-radius: 26px;
      background: rgba(255,255,255,.68);
    }

    .unit5-cucumber {
      width: min(520px, 94%);
      height: 70px;
      border-radius: 999px;
      background: linear-gradient(90deg, #5fae48, #78bf42);
      box-shadow: inset 0 10px 0 rgba(255,255,255,.16), 0 16px 28px rgba(36,49,66,.12);
    }

    .unit5-strawberry-row {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .unit5-strawberry {
      width: 58px;
      height: 66px;
      border-radius: 50% 50% 58% 58%;
      background: radial-gradient(circle at 35% 28%, #fff6, transparent 15%), #e85a4f;
      transform: rotate(45deg);
      box-shadow: 0 12px 22px rgba(36,49,66,.1);
    }

    .unit5-scale {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 18px;
      padding: 18px;
    }

    .unit5-pan {
      min-height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      border-radius: 26px;
      background: rgba(255,255,255,.82);
      box-shadow: inset 0 -8px 0 rgba(36,49,66,.05), 0 18px 34px rgba(36,49,66,.08);
      border-bottom: 10px solid #d5a15e;
    }

    .unit5-equal,
    .unit5-exchange b {
      color: #8c96a8;
      font-size: 46px;
      font-weight: 1000;
    }

    .unit5-food {
      display: inline-grid;
      place-items: center;
      position: relative;
      color: #232838;
      font-size: 18px;
      font-weight: 1000;
    }

    .unit5-food.apple {
      width: 58px;
      height: 58px;
      border-radius: 50% 50% 56% 56%;
      background: #e85a4f;
      box-shadow: inset -5px -8px 0 rgba(0,0,0,.12);
    }

    .unit5-food.apple::after {
      content: "";
      position: absolute;
      top: -10px;
      right: 12px;
      width: 20px;
      height: 12px;
      border-radius: 999px 999px 999px 0;
      background: #4d9b5e;
      transform: rotate(-28deg);
    }

    .unit5-food.melon {
      min-width: 112px;
      min-height: 72px;
      padding: 0 18px;
      border-radius: 999px;
      background: repeating-linear-gradient(100deg, #d7ce63 0 8px, #beb44f 8px 14px);
      box-shadow: inset -8px -10px 0 rgba(0,0,0,.08), 0 14px 24px rgba(36,49,66,.12);
    }

    .unit5-food.melon.big {
      min-width: 176px;
      min-height: 96px;
      font-size: 22px;
    }

    .unit5-exchange {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto minmax(220px, 1fr);
      align-items: center;
      gap: 18px;
      padding: 18px;
      border-radius: 26px;
      background: rgba(255,255,255,.66);
    }

    .unit5-exchange.stack {
      grid-template-columns: minmax(220px, .8fr) auto 1fr;
    }

    .unit5-animal-group {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .unit5-animal {
      width: 66px;
      height: 66px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: #232838;
      font-size: 24px;
      font-weight: 1000;
      box-shadow: 0 12px 24px rgba(36,49,66,.1);
    }

    .unit5-animal.pig {
      background: #f8a8b7;
    }

    .unit5-animal.sheep {
      background: #fff4cf;
    }

    .unit5-share-list {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .unit5-share-list span {
      min-height: 62px;
      display: grid;
      place-items: center;
      padding: 0 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.9);
      color: #2f8f68;
      font-size: 22px;
      font-weight: 1000;
      box-shadow: 0 12px 24px rgba(36,49,66,.08);
    }

    .unit5-teach-board {
      width: min(900px, 100%);
      min-height: 440px;
      padding: 20px;
    }

    .unit5-teach-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .unit5-teach-grid > div {
      display: grid;
      gap: 8px;
      align-content: center;
      padding: 14px;
      min-height: 92px;
      border-radius: 18px;
      background: rgba(255,255,255,.14);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
    }

    .unit5-teach-grid > div:first-child {
      grid-column: 1 / -1;
    }

    .unit5-teach-grid span {
      color: rgba(255,255,255,.9);
      font-size: 18px;
      font-weight: 1000;
    }

    .unit5-teach-grid strong {
      display: inline-grid;
      place-items: center;
      width: fit-content;
      min-height: 38px;
      padding: 0 12px;
      border-radius: 12px;
      background: rgba(255,255,255,.88);
      color: #2f8f68;
      font-size: 21px;
      font-weight: 1000;
      line-height: 1.25;
    }

    @media (max-width: 760px) {
      .unit5-board {
        min-height: 320px;
        gap: 10px;
      }

      .unit5-intro {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
        border-radius: 18px;
      }

      .unit5-intro-steps {
        gap: 8px;
      }

      .unit5-intro-steps div {
        min-height: 84px;
        padding: 8px;
        border-radius: 14px;
      }

      .unit5-intro-steps b {
        width: 34px;
        height: 34px;
        font-size: 20px;
      }

      .unit5-intro-steps span {
        font-size: 15px;
      }

      .unit5-estimate-single,
      .unit5-estimate-count,
      .unit5-length-stage,
      .unit5-fruit-length,
      .unit5-path,
      .unit5-scale,
      .unit5-exchange {
        min-height: 210px;
      }

      .unit5-estimate-count,
      .unit5-estimate-count.result,
      .unit5-path,
      .unit5-scale,
      .unit5-exchange,
      .unit5-exchange.stack {
        grid-template-columns: 1fr;
      }

      .unit5-pack-row {
        grid-template-columns: repeat(2, minmax(92px, 1fr));
        gap: 8px;
      }

      .unit5-bead-pack {
        min-height: 92px;
        padding: 8px;
        border-radius: 14px;
        gap: 6px;
      }

      .unit5-beads {
        grid-template-columns: repeat(5, 14px);
        gap: 4px;
      }

      .unit5-bead {
        width: 14px;
        height: 14px;
      }

      .unit5-bead-pack strong {
        font-size: 14px;
      }

      .unit5-result-badge {
        min-width: 110px;
        min-height: 58px;
        justify-self: center;
        font-size: 24px;
      }

      .unit5-cat {
        min-height: 56px;
        border-radius: 16px;
        font-size: 18px;
      }

      .unit5-path-line {
        min-height: 92px;
        padding: 0 8px;
      }

      .unit5-sign {
        width: 48px;
        height: 62px;
        border-radius: 12px 12px 16px 16px;
        border-width: 3px;
        font-size: 24px;
      }

      .unit5-path-note {
        min-height: 38px;
        font-size: 14px;
      }

      .unit5-measure-grid {
        width: 100%;
        min-height: 98px;
        padding: 10px;
        grid-template-columns: repeat(var(--cells), minmax(32px, 1fr));
      }

      .unit5-measure-grid > span {
        min-height: 64px;
        font-size: 13px;
      }

      .unit5-pencil {
        min-height: 32px;
        font-size: 14px;
      }

      .unit5-cucumber {
        height: 46px;
      }

      .unit5-strawberry-row {
        gap: 8px;
      }

      .unit5-strawberry {
        width: 36px;
        height: 42px;
      }

      .unit5-pan {
        min-height: 112px;
        border-radius: 16px;
        border-bottom-width: 6px;
        gap: 8px;
      }

      .unit5-equal,
      .unit5-exchange b {
        font-size: 28px;
      }

      .unit5-food.apple {
        width: 38px;
        height: 38px;
      }

      .unit5-food.melon {
        min-width: 78px;
        min-height: 48px;
        font-size: 13px;
      }

      .unit5-food.melon.big {
        min-width: 110px;
        min-height: 60px;
        font-size: 15px;
      }

      .unit5-animal {
        width: 44px;
        height: 44px;
        font-size: 17px;
      }

      .unit5-share-list span {
        min-height: 40px;
        padding: 0 10px;
        border-radius: 12px;
        font-size: 15px;
      }

      .unit5-teach-board {
        min-height: 300px;
        padding: 12px;
      }

      .unit5-teach-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .unit5-teach-grid > div {
        min-height: 58px;
        padding: 10px;
        border-radius: 14px;
      }

      .unit5-teach-grid span {
        font-size: 14px;
      }

      .unit5-teach-grid strong {
        min-height: 30px;
        font-size: 14px;
      }
    }

    @media (max-width: 760px) {
      .scene-items {
        grid-template-columns: repeat(5, minmax(18px, 1fr));
        gap: 4px;
      }
      .scene-items.small-group {
        grid-template-columns: repeat(3, minmax(18px, 1fr));
      }
      .scene-item {
        min-height: 24px;
        border-radius: 8px;
      }
      .scene-item.flowers::before,
      .scene-item.stars::before {
        font-size: 22px;
      }
      .scene-item.trees::before {
        width: 30px;
        height: 30px;
      }
      .scene-item.cars::before {
        width: 24px;
        height: 14px;
      }
      .scene-item.fruit::before,
      .scene-item.balls::before {
        width: 21px;
        height: 21px;
      }
      .scene-item.kites::before {
        width: 20px;
        height: 20px;
      }
    }

    * { box-sizing: border-box; }

    @property --edge-proximity {
      syntax: "<number>";
      inherits: false;
      initial-value: 0;
    }

    @property --cursor-angle {
      syntax: "<angle>";
      inherits: false;
      initial-value: 45deg;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      color: var(--ink);
      background: linear-gradient(#ffe9ef 0 58%, #ffd888 58% 100%);
    }

    button { font: inherit; }

    .game {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .topbar {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 12px clamp(12px, 3vw, 30px);
      background: rgba(255,255,255,.78);
      border-bottom: 2px solid rgba(255,255,255,.9);
      backdrop-filter: blur(10px);
    }

    .unit-tabs {
      display: flex;
      gap: 8px;
      overflow: visible;
      scrollbar-width: none;
      padding: 2px;
      min-width: 0;
    }

    .unit-tabs::-webkit-scrollbar { display: none; }

    .unit-tab {
      flex: 0 0 auto;
      min-height: 38px;
      padding: 0 12px;
      border-radius: 8px;
      border: 2px solid #e2c987;
      background: #fff;
      color: var(--muted);
      font-weight: 900;
      cursor: pointer;
    }

    .unit-tab.active {
      color: #fff;
      background: var(--green);
      border-color: var(--green);
    }

    .unit-tab.locked {
      opacity: .72;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 900;
      font-size: clamp(16px, 2.2vw, 24px);
      width: clamp(170px, 18vw, 240px);
      flex: 0 0 clamp(170px, 18vw, 240px);
      white-space: nowrap;
    }

    .badge {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--yellow);
      border: 4px solid #fff4b8;
      position: relative;
    }

    .badge::before, .badge::after {
      content: "";
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      top: 11px;
      background: var(--red);
      box-shadow: 16px 0 var(--blue);
    }

    .badge::before { left: 6px; }
    .badge::after { display: none; }

    .progress {
      min-width: 132px;
      color: var(--green);
      text-align: right;
      font-weight: 800;
    }

    main {
      display: grid;
      align-items: center;
      padding: clamp(12px, 3vw, 28px);
    }

    .panel {
      width: min(1100px, 100%);
      min-height: min(730px, calc(100vh - 110px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(270px, 350px);
      gap: 18px;
    }

    .scene, .coach {
      background: rgba(255,248,232,.96);
      border: 3px solid rgba(255,255,255,.9);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .scene {
      position: relative;
      overflow: hidden;
      min-height: 570px;
      padding: clamp(16px, 3vw, 30px);
    }

    .festival {
      position: absolute;
      inset: auto 0 0;
      height: 24%;
      background:
        repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,.28) 60px 64px),
        linear-gradient(#efb75e, #df9d3c);
      border-top: 4px solid #c17b24;
    }

    .scene-content {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 18px;
      height: 100%;
    }

    h1, p { margin: 0; }

    h1 {
      font-size: clamp(30px, 5vw, 48px);
      line-height: 1.08;
    }

    .sub {
      margin-top: 8px;
      color: var(--muted);
      font-size: clamp(16px, 2.3vw, 20px);
      line-height: 1.45;
    }

    .visual-zone {
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 18px;
      min-height: 340px;
      padding-bottom: 74px;
    }

    .story {
      display: grid;
      gap: 14px;
      width: min(760px, 100%);
      padding-bottom: 74px;
    }

    .parent-note {
      background: #fff;
      border: 3px solid var(--line);
      border-radius: 8px;
      padding: 12px 14px;
      line-height: 1.55;
      font-size: 16px;
    }

    .parent-note strong { color: var(--green); }

    .rule-steps, .teach-clues {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .rule, .teach-card {
      display: grid;
      place-items: center;
      min-height: 82px;
      padding: 10px;
      border-radius: 8px;
      background: #fff;
      border: 3px solid #b9d7fb;
      font-size: clamp(17px, 2.6vw, 22px);
      font-weight: 900;
      text-align: center;
      animation: popIn .36s ease both;
    }

    .rule:nth-child(2), .teach-card:nth-child(2) { border-color: #ffc4bd; animation-delay: .08s; }
    .rule:nth-child(3), .teach-card:nth-child(3) { border-color: #a8d99a; animation-delay: .16s; }

    .pattern-row {
      width: min(760px, 100%);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: clamp(12px, 2.4vw, 22px);
      min-height: 180px;
      padding-bottom: 74px;
    }

    .tile {
      width: clamp(58px, 9vw, 86px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: #fff;
      border: 3px solid #d8c99f;
      font-size: clamp(24px, 4vw, 38px);
      font-weight: 900;
      animation: popIn .32s ease both;
    }

    .shape {
      width: 62%;
      height: 62%;
      display: block;
    }

    .circle { border-radius: 50%; }
    .square { border-radius: 8px; }
    .triangle {
      width: 0;
      height: 0;
      border-left: 29px solid transparent;
      border-right: 29px solid transparent;
      border-bottom: 58px solid var(--red);
      background: transparent !important;
    }

    .red { background: var(--red); }
    .yellow { background: var(--yellow); }
    .blue { background: var(--blue); }
    .green { background: var(--green); }
    .purple { background: var(--purple); }

    .flag {
      width: 54px;
      height: 78px;
      position: relative;
    }

    .flag::before {
      content: "";
      position: absolute;
      left: 6px;
      top: 0;
      width: 4px;
      height: 78px;
      background: #555;
      border-radius: 99px;
    }

    .flag::after {
      content: "";
      position: absolute;
      left: 10px;
      top: 4px;
      width: 38px;
      height: 28px;
      background: var(--c);
      border-radius: 4px 16px 16px 4px;
    }

    .lantern {
      width: 64px;
      height: 76px;
      display: grid;
      place-items: center;
      color: #ffdf5e;
      font-weight: 900;
      background: var(--red);
      border: 4px solid #a83b33;
      position: relative;
    }

    .lantern.round { border-radius: 50%; }
    .lantern.diamond { transform: rotate(45deg); border-radius: 8px; }
    .lantern.diamond span { transform: rotate(-45deg); }

    .num {
      min-width: 72px;
      min-height: 72px;
      padding: 8px 14px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: #fff;
      border: 3px solid #d8c99f;
      font-size: clamp(24px, 4vw, 38px);
      font-weight: 900;
    }

    .gap {
      background: #fff;
      border: 4px dashed var(--green);
      color: var(--green);
    }

    .arrow {
      color: var(--muted);
      font-size: 30px;
      font-weight: 900;
    }

    .caption {
      min-height: 42px;
      padding: 8px 12px;
      border-radius: 8px;
      background: #fff;
      border: 2px dashed var(--line);
      font-size: clamp(18px, 2.8vw, 26px);
      line-height: 1.4;
      text-align: center;
      font-weight: 900;
      max-width: 680px;
    }

    .placeholder {
      width: min(700px, 100%);
      display: grid;
      gap: 14px;
      padding-bottom: 74px;
    }

    .placeholder-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .placeholder-card {
      min-height: 120px;
      display: grid;
      place-items: center;
      padding: 12px;
      border-radius: 8px;
      background: #fff;
      border: 3px dashed #d8c99f;
      color: var(--muted);
      font-weight: 900;
      text-align: center;
    }

    .options {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      width: min(680px, 100%);
      margin: 0 auto;
    }

    .choice, .primary, .ghost, .voice {
      min-height: 54px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 900;
      transition: transform .12s ease, box-shadow .12s ease;
    }

    .choice {
      background: #fff;
      color: var(--green);
      border: 3px solid #8fc37c;
      font-size: clamp(18px, 4vw, 28px);
    }

    .choice:hover, .primary:hover, .ghost:hover, .voice:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 18px rgba(36,49,66,.14);
    }

    .choice.selected-good { background: #dff7e8; border-color: var(--good); animation: bounceGood .42s ease both; }
    .choice.selected-bad { background: #ffe2df; border-color: var(--bad); animation: shakeBad .36s ease both; }

    .coach {
      padding: 18px;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 14px;
    }

    .face {
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 12px;
      align-items: center;
      border-bottom: 2px solid #eadcb8;
      padding-bottom: 12px;
    }

    .helper {
      width: 78px;
      height: 78px;
      border-radius: 18px 18px 22px 22px;
      background: #e6f1ff;
      border: 4px solid var(--blue);
      position: relative;
      animation: helperFloat 2.8s ease-in-out infinite;
    }

    .helper::before, .helper::after {
      content: "";
      position: absolute;
      top: 24px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--ink);
    }

    .helper::before { left: 15px; }
    .helper::after { right: 15px; }

    .mouth {
      position: absolute;
      left: 50%;
      bottom: 16px;
      width: 26px;
      height: 8px;
      border-radius: 0 0 18px 18px;
      background: #263244;
      transform: translateX(-50%);
      transition: height .12s ease;
    }

    .helper.speaking .mouth {
      height: 18px;
      animation: talk .22s ease-in-out infinite alternate;
    }

    .coach-name {
      font-weight: 900;
      color: var(--blue);
      font-size: 20px;
    }

    .stars { min-height: 30px; color: #d49300; font-size: 24px; letter-spacing: 2px; }

    .question {
      font-size: clamp(20px, 3vw, 28px);
      line-height: 1.35;
      font-weight: 900;
    }

    .hint {
      min-height: 90px;
      padding: 14px;
      background: #fff;
      border: 2px dashed #d2bd89;
      border-radius: 8px;
      color: var(--muted);
      line-height: 1.55;
      font-size: 20px;
      font-weight: 800;
    }

    .controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

    .primary { border: 0; background: var(--green); color: #fff; padding: 0 18px; flex: 1 1 140px; }
    .ghost { background: #fff; color: var(--green); border: 2px solid #9bc58e; padding: 0 16px; flex: 1 1 110px; }
    .voice { border: 0; background: var(--blue); color: #fff; padding: 0 14px; width: 100%; margin-top: 6px; }

    .celebrate {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 3;
    }

    .spark {
      position: absolute;
      left: 50%;
      bottom: 26%;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--yellow);
      animation: sparkle .85s ease-out forwards;
      transform: translate(-50%, 0);
    }

    @keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes helperFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
    @keyframes talk { from { transform: translateX(-50%) scaleY(.55); } to { transform: translateX(-50%) scaleY(1.2); } }
    @keyframes bounceGood { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
    @keyframes shakeBad { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 55% { transform: translateX(7px); } 80% { transform: translateX(-4px); } }
    @keyframes sparkle { to { opacity: 0; transform: translate(var(--x), var(--y)) scale(.45); } }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }

    /* Reference-style UI skin */
    body {
      background:
        radial-gradient(circle at 18% 88%, rgba(255, 137, 181, .35), transparent 18%),
        radial-gradient(circle at 74% 18%, rgba(255, 198, 209, .42), transparent 24%),
        linear-gradient(135deg, #f8fbff 0%, #fff6fa 48%, #f4f8ff 100%);
      overflow-x: hidden;
    }

    .game {
      height: 100vh;
      min-height: 100vh;
    }

    .topbar {
      min-height: 82px;
      padding: 10px 44px;
      background: rgba(255, 255, 255, .7);
      border-bottom: 1px solid rgba(214, 218, 230, .7);
      box-shadow: 0 16px 40px rgba(36, 49, 66, .05);
    }

    .brand {
      color: #252c3f;
      font-size: clamp(14px, 1.8vw, 20px);
      letter-spacing: 0;
      white-space: nowrap;
      width: clamp(130px, 14vw, 180px);
      flex: 0 0 clamp(130px, 14vw, 180px);
      overflow: visible;
      gap: 8px;
    }

    .badge {
      width: 82px;
      height: 62px;
      border: 0;
      background: transparent url("./header-avatar.png") center / contain no-repeat;
      flex: 0 0 82px;
    }

    .badge::before {
      display: none;
      left: 2px;
      top: 3px;
      width: 18px;
      height: 18px;
      background: transparent;
      border: 5px solid #ff9dac;
      box-shadow: 14px 0 0 -1px transparent, 18px 0 0 0 transparent;
    }

    .badge::after {
      display: none;
      left: 14px;
      top: 3px;
      width: 18px;
      height: 18px;
      background: transparent;
      border: 5px solid #ffb2bd;
      border-radius: 50%;
    }

    .brand span:last-child {
      display: block;
      flex: 0 0 auto;
      line-height: 1;
    }

    .unit-tabs {
      justify-content: flex-start;
      gap: 6px;
      min-width: 0;
      overflow: visible;
      padding-left: clamp(84px, 7vw, 112px);
    }

    .unit-tab {
      flex: 0 0 clamp(58px, 5.2vw, 72px);
      min-width: 0;
      min-height: 38px;
      padding: 0 7px;
      font-size: clamp(10px, .78vw, 12px);
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      color: #8b91a2;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 28px rgba(40, 48, 70, .06);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      will-change: flex-basis, transform;
      transition: flex-basis .68s cubic-bezier(.16, 1, .3, 1), background .46s ease, color .32s ease, box-shadow .46s ease, transform .46s cubic-bezier(.16, 1, .3, 1);
      overflow: hidden;
    }

    .unit-tab.active {
      color: #242b3d;
      background: #fff;
      box-shadow: 0 18px 38px rgba(36, 49, 66, .08);
    }

    .unit-tab:hover,
    .unit-tab:focus-visible {
      color: #242b3d;
      background: rgba(255,255,255,.96);
      transform: translateY(-1px);
      z-index: 3;
    }

    .unit-tab.active,
    .unit-tab:hover,
    .unit-tab:focus-visible {
      flex-basis: clamp(116px, 10vw, 150px);
    }

    .unit-tab-short {
      flex: 0 0 auto;
      font-weight: 900;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .unit-tab-detail {
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      white-space: nowrap;
      transform: translateX(-4px);
      transition: max-width .68s cubic-bezier(.16, 1, .3, 1), opacity .36s ease, transform .68s cubic-bezier(.16, 1, .3, 1);
    }

    .unit-tab.active .unit-tab-detail,
    .unit-tab:hover .unit-tab-detail,
    .unit-tab:focus-visible .unit-tab-detail {
      max-width: 5.6em;
      opacity: 1;
      transform: translateX(0);
    }

    .unit-tab.active::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -15px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ff8f9d;
      transform: translateX(-50%);
      box-shadow: 0 14px 0 -2px #252c3f;
    }

    .progress {
      color: #252c3f;
      font-size: 18px;
      min-width: 156px;
      white-space: nowrap;
      display: none;
    }

    main {
      min-height: 0;
      padding: 26px 72px 22px;
      align-items: stretch;
    }

    .panel {
      width: min(1520px, 100%);
      height: calc(100vh - 122px);
      min-height: 0;
      grid-template-columns: minmax(0, 2.15fr) minmax(360px, .98fr);
      gap: 34px;
    }

    .scene, .coach {
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(255,255,255,.85);
      border-radius: 28px;
      box-shadow: 0 28px 80px rgba(48, 55, 80, .12), inset 0 1px 0 rgba(255,255,255,.96);
      backdrop-filter: blur(18px);
    }

    .scene {
      min-height: 0;
      padding: 32px 42px 26px;
      background:
        radial-gradient(circle at 78% 16%, rgba(255,255,255,.95) 0 9%, transparent 10%),
        radial-gradient(circle at 72% 42%, rgba(255, 151, 166, .28) 0 22%, transparent 23%),
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,245,249,.76));
    }

    .scene::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 86px;
      background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255, 210, 225, .62));
      pointer-events: none;
      z-index: 0;
    }

    .scene::after {
      content: "";
      position: absolute;
      right: 56px;
      top: 74px;
      width: clamp(260px, 25vw, 330px);
      height: clamp(350px, 35vw, 440px);
      background: url("./mascot-pig-transparent.png") center / contain no-repeat;
      filter: drop-shadow(0 24px 44px rgba(219, 116, 126, .24));
      pointer-events: none;
      z-index: 0;
    }

    .festival { display: none; }

    .scene-content {
      gap: 18px;
      position: relative;
      z-index: 1;
      min-height: 0;
    }

    h1 {
      max-width: 560px;
      font-size: clamp(38px, 4.2vw, 56px);
      color: #293044;
      letter-spacing: 0;
    }

    .sub {
      color: #3f4658;
      font-size: clamp(18px, 1.9vw, 24px);
      font-weight: 700;
    }

    .visual-zone {
      justify-items: start;
      align-content: end;
      min-height: 0;
      padding-bottom: 0;
    }

    .story {
      width: min(920px, 100%);
      padding-bottom: 0;
      gap: 16px;
    }

    .parent-note {
      width: min(620px, 62%);
      padding: 14px 20px;
      border: 0;
      border-radius: 16px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 18px 38px rgba(36,49,66,.08);
      color: #4d566b;
      font-size: 15px;
      line-height: 1.45;
    }

    .rule-steps {
      width: min(900px, 100%);
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .rule {
      min-height: 112px;
      justify-items: start;
      place-items: unset;
      align-content: center;
      padding: 20px 26px;
      border: 1px solid rgba(255,255,255,.95);
      border-radius: 20px;
      background: rgba(255,255,255,.8);
      box-shadow: 0 18px 36px rgba(36,49,66,.09);
      color: #1f2638;
      font-size: 22px;
      text-align: left;
    }

    .rule::first-line {
      color: #ff8fa2;
      font-size: 32px;
    }

    .pattern-row {
      width: min(960px, 100%);
      min-height: 112px;
      padding: 14px 18px;
      gap: 12px;
      flex-wrap: nowrap;
      justify-content: flex-start;
      border-radius: 18px;
      background: rgba(255,255,255,.72);
      box-shadow: 0 18px 42px rgba(36,49,66,.1);
      overflow-x: auto;
    }

    .tile, .num {
      width: 104px;
      min-width: 86px;
      min-height: 88px;
      border: 0;
      border-radius: 18px;
      background: rgba(255,255,255,.86);
      box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 16px 30px rgba(36,49,66,.09);
    }

    .flag {
      width: 64px;
      height: 78px;
    }

    .flag::before {
      width: 5px;
      height: 76px;
      background: #3d434c;
    }

    .flag::after {
      left: 12px;
      top: 8px;
      width: 44px;
      height: 30px;
      border-radius: 6px 22px 22px 6px;
      box-shadow: 0 10px 20px rgba(36,49,66,.13);
    }

    .caption {
      border: 0;
      background: rgba(255,255,255,.75);
      box-shadow: 0 12px 28px rgba(36,49,66,.08);
      color: #343b4e;
    }

    .teach-board {
      width: min(940px, 100%);
      display: grid;
      gap: 14px;
      padding: 22px;
      border-radius: 24px;
      background:
        linear-gradient(135deg, rgba(37, 44, 63, .94), rgba(31, 77, 68, .9)),
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .2), transparent 30%);
      border: 1px solid rgba(255, 255, 255, .5);
      box-shadow: 0 22px 46px rgba(36,49,66,.16), inset 0 1px 0 rgba(255,255,255,.2);
    }

    .teach-board-title {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-size: 24px;
      font-weight: 900;
    }

    .teach-board-title::before {
      content: "";
      width: 12px;
      height: 36px;
      border-radius: 999px;
      background: linear-gradient(180deg, #78f0ff, #ff9dad);
      box-shadow: 0 0 18px rgba(120, 240, 255, .45);
    }

    .teach-prompt {
      display: none;
      color: rgba(255, 255, 255, .78);
      font-size: 16px;
      font-weight: 800;
    }

    .teach-patterns {
      display: grid;
      gap: 12px;
    }

    .teach-row {
      display: grid;
      grid-template-columns: 110px 1fr;
      align-items: center;
      gap: 14px;
      padding: 12px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .16);
    }

    .teach-row-label {
      color: #fff;
      font-size: 18px;
      font-weight: 900;
      text-align: center;
      white-space: nowrap;
    }

    .teach-row-pattern {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .teach-row-pattern::-webkit-scrollbar { display: none; }

    .teach-row .tile,
    .teach-row .num {
      width: 70px;
      min-width: 70px;
      min-height: 64px;
      border-radius: 16px;
      border: 0;
      box-shadow: 0 14px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9);
    }

    .teach-row .flag {
      width: 44px;
      height: 56px;
    }

    .teach-row .flag::before {
      height: 56px;
      width: 4px;
    }

    .teach-row .flag::after {
      width: 32px;
      height: 22px;
      left: 10px;
      top: 7px;
    }

    .teach-row .arrow {
      color: rgba(255,255,255,.55);
      font-size: 24px;
    }

    .math-teach-board {
      width: min(820px, 100%);
      gap: 8px;
      padding: 14px;
      border-radius: 20px;
    }

    .math-teach-board .teach-board-title {
      font-size: 20px;
    }

    .math-teach-board .teach-board-title::before {
      width: 9px;
      height: 28px;
    }

    .math-teach-board .teach-patterns {
      gap: 8px;
    }

    .math-teach-board .teach-row {
      grid-template-columns: 82px 1fr;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 14px;
    }

    .math-teach-board .teach-row-label {
      font-size: 15px;
    }

    .math-teach-board .teach-row .num {
      width: 52px;
      min-width: 52px;
      min-height: 48px;
      border-radius: 12px;
      font-size: 28px;
    }

    .math-teach-board .teach-row .arrow {
      font-size: 18px;
    }

    body.unit2-active.teach-active h1 {
      white-space: normal;
      font-size: clamp(34px, 3.8vw, 46px);
      line-height: 1.05;
    }

    body.unit2-active.teach-active .visual-zone {
      align-content: start;
    }

    body.unit2-active.teach-active .math-scene {
      width: min(820px, 100%);
      gap: 8px;
    }

    body.unit2-active.teach-active .math-teach-board {
      width: min(790px, 100%);
      padding: 12px;
      gap: 7px;
    }

    body.unit2-active.teach-active .math-teach-board .teach-board-title {
      font-size: 18px;
    }

    body.unit2-active.teach-active .math-teach-board .teach-row {
      min-height: 58px;
      padding: 7px 9px;
    }

    body.unit2-active.teach-active .math-teach-board .teach-row .num {
      width: 46px;
      min-width: 46px;
      min-height: 42px;
      font-size: 24px;
    }

    .math-scene {
      width: min(940px, 100%);
      display: grid;
      gap: 16px;
    }

    .math-board {
      display: grid;
      gap: 16px;
      padding: 20px;
      border-radius: 24px;
      background: rgba(255,255,255,.76);
      box-shadow: 0 20px 46px rgba(36,49,66,.1), inset 0 1px 0 rgba(255,255,255,.95);
    }

    .math-story {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 18px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(216, 242, 207, .9), rgba(235, 249, 255, .86));
      color: #2b3448;
      font-size: 20px;
      font-weight: 900;
    }

    .tree-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: end;
      min-width: 160px;
    }

    .tree {
      width: 30px;
      height: 48px;
      position: relative;
      flex: 0 0 30px;
    }

    .tree::before {
      content: "";
      position: absolute;
      left: 12px;
      bottom: 5px;
      width: 6px;
      height: 24px;
      border-radius: 999px;
      background: #8b5a32;
    }

    .tree::after {
      content: "";
      position: absolute;
      left: 4px;
      bottom: 20px;
      width: 22px;
      height: 25px;
      border-radius: 54% 48% 52% 50%;
      background: linear-gradient(145deg, #5fa958, #2f8f68);
      box-shadow: -4px 6px 0 #4f9c4e, 4px 6px 0 #3d8c47;
    }

    .tree.taken {
      opacity: .28;
      filter: grayscale(.2);
    }

    .tree.taken::after {
      transform: rotate(-22deg) translateY(8px);
      transform-origin: bottom center;
    }

    .equation-line {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      color: #293044;
      font-weight: 900;
    }

    .eq-num,
    .eq-box {
      min-width: 78px;
      min-height: 72px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: rgba(255,255,255,.92);
      box-shadow: 0 14px 28px rgba(36,49,66,.08), inset 0 1px 0 rgba(255,255,255,1);
      font-size: 34px;
    }

    .eq-box {
      color: #2f8f68;
      border: 3px dashed rgba(47,143,104,.5);
    }

    .eq-op {
      font-size: 34px;
      color: #667084;
    }

    .ten-frame {
      display: grid;
      grid-template-columns: repeat(5, 34px);
      gap: 6px;
      justify-content: center;
      padding: 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.7);
    }

    .counter {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: linear-gradient(145deg, #ff9dad, #e85a4f);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 7px 14px rgba(232,90,79,.22);
    }

    .counter.empty {
      background: rgba(36,49,66,.08);
      box-shadow: inset 0 0 0 2px rgba(36,49,66,.1);
    }

    .method-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .method-card {
      min-height: 92px;
      display: grid;
      align-content: center;
      gap: 6px;
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.82);
      box-shadow: 0 14px 28px rgba(36,49,66,.08);
      color: #2f374d;
      font-size: 17px;
      font-weight: 900;
      text-align: center;
    }

    .method-card strong {
      color: #2f8f68;
      font-size: 22px;
    }

    .compare-row {
      display: grid;
      gap: 10px;
    }

    .compare-line {
      display: grid;
      grid-template-columns: 88px 1fr;
      align-items: center;
      gap: 12px;
      color: #2f374d;
      font-size: 18px;
      font-weight: 900;
    }

    .compare-trees {
      display: flex;
      align-items: end;
      gap: 6px;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 8px;
      border-radius: 16px;
      background: rgba(255,255,255,.66);
    }

    .compare-trees::-webkit-scrollbar { display: none; }

    .operator-choice {
      font-size: 30px;
      color: #2f8f68;
      font-weight: 900;
    }

    .block-board {
      display: grid;
      gap: 16px;
      padding: 20px;
      border-radius: 24px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 20px 46px rgba(36,49,66,.1), inset 0 1px 0 rgba(255,255,255,.95);
    }

    .block-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: #2b3448;
      font-size: 20px;
      font-weight: 900;
    }

    .step-pill {
      flex: 0 0 auto;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(47,143,104,.12);
      color: #2f8f68;
      font-size: 15px;
      font-weight: 900;
    }

    .block-piles {
      display: grid;
      grid-template-columns: 1fr .72fr;
      gap: 14px;
    }

    .block-pile {
      display: grid;
      gap: 10px;
      padding: 16px;
      border-radius: 20px;
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(255,255,255,.9);
    }

    .blocks {
      display: grid;
      grid-template-columns: repeat(5, minmax(34px, 1fr));
      gap: 8px;
    }

    .block {
      min-height: 38px;
      border-radius: 10px;
      background: linear-gradient(145deg, #ffd86b, #f3b93f);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 16px rgba(243,185,63,.22);
    }

    .block.small {
      background: linear-gradient(145deg, #8fc5ff, #4b83ef);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 8px 16px rgba(75,131,239,.18);
    }

    .block.removed {
      opacity: .22;
      transform: scale(.86);
      background: #cbd2df;
      box-shadow: none;
    }

    .scene-board {
      background:
        radial-gradient(circle at 78% 18%, rgba(255, 180, 194, .28), transparent 26%),
        rgba(255,255,255,.78);
    }

    .scene-items {
      display: grid;
      grid-template-columns: repeat(5, minmax(34px, 1fr));
      gap: 8px;
    }

    .scene-items.small-group {
      grid-template-columns: repeat(3, minmax(34px, 1fr));
    }

    .scene-item {
      min-height: 42px;
      position: relative;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: rgba(255,255,255,.68);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 9px 17px rgba(36,49,66,.1);
    }

    .scene-item.removed {
      opacity: .22;
      transform: scale(.86);
      filter: grayscale(.45);
      box-shadow: none;
    }

    .scene-item.blocks {
      background: linear-gradient(145deg, #ffd86b, #f3b93f);
    }

    .scene-item.blocks.small {
      background: linear-gradient(145deg, #8fc5ff, #4b83ef);
    }

    .scene-item.trees::before {
      content: "";
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: url("./tree-icon.png") center / contain no-repeat;
    }

    .scene-item.trees::after {
      content: none;
    }

    .scene-item.trees.extra::before {
      filter: hue-rotate(82deg) saturate(1.18) brightness(1.08);
    }

    .scene-item.flowers::before {
      content: "✿";
      color: #e85a7a;
      font-size: 36px;
      line-height: 1;
      text-shadow: 0 5px 12px rgba(232,90,122,.25);
    }

    .scene-item.cars::before {
      content: "";
      width: 38px;
      height: 22px;
      border-radius: 12px 14px 7px 7px;
      background: linear-gradient(145deg, #5aa9ff, #3f7ee8);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
    }

    .scene-item.cars::after {
      content: "";
      position: absolute;
      bottom: 9px;
      width: 34px;
      height: 7px;
      border-radius: 999px;
      background: radial-gradient(circle at 7px 50%, #293044 0 4px, transparent 5px), radial-gradient(circle at 27px 50%, #293044 0 4px, transparent 5px);
    }

    .scene-item.fruit::before {
      content: "";
      width: 31px;
      height: 31px;
      border-radius: 50% 50% 46% 54%;
      background: linear-gradient(145deg, #ff8d6d, #e85a4f);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
    }

    .scene-item.fruit::after {
      content: "";
      position: absolute;
      top: 8px;
      width: 12px;
      height: 8px;
      border-radius: 100% 0;
      background: #5aa05c;
      transform: translateX(9px) rotate(-20deg);
    }

    .scene-item.fruit.dashed {
      background: rgba(255,255,255,.34);
      border: 3px dashed rgba(232,90,79,.45);
      box-shadow: none;
    }

    .scene-item.fruit.dashed::before {
      opacity: .12;
      filter: grayscale(.2);
    }

    .scene-item.fruit.dashed::after {
      opacity: .18;
    }

    .scene-item.stars::before {
      content: "★";
      color: #f3b93f;
      font-size: 34px;
      text-shadow: 0 6px 13px rgba(243,185,63,.28);
    }

    .scene-item.balls::before {
      content: "⚽";
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 32px;
      line-height: 1;
      background: rgba(255,255,255,.55);
      box-shadow: 0 8px 16px rgba(36,49,66,.1);
    }

    .scene-item.blueberries::before {
      content: "";
      width: 40px;
      height: 40px;
      border-radius: 14px;
      background: url("./blueberry-icon.png") center / cover no-repeat;
      box-shadow: 0 7px 14px rgba(76,111,202,.14);
    }

    .scene-item.blueberries::after {
      content: none;
    }

    .scene-item.bananas::before {
      content: "";
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: url("./banana-icon.png") center / contain no-repeat;
      box-shadow: 0 8px 15px rgba(242,200,75,.14);
    }

    .scene-item.bananas::after {
      content: none;
    }

    .scene-item.kites::before {
      content: "";
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: url("./paper-crane-flat.png") center / contain no-repeat;
      box-shadow: 0 8px 15px rgba(56,189,248,.18);
    }

    .scene-item.kites::after {
      content: none;
    }

    .scene-item.kites.small::before {
      background-image: url("./paper-crane-flat.png");
      box-shadow: 0 8px 15px rgba(93,211,158,.16);
    }

    .scene-item.kites.removed {
      opacity: 1;
      filter: none;
      transform: scale(.94);
    }

    .scene-item.kites.removed::before {
      background-image: url("./paper-crane-folded.png");
    }

    .unit2-board {
      display: grid;
      gap: 14px;
      padding: 18px;
      border-radius: 24px;
      background:
        radial-gradient(circle at 86% 14%, rgba(143,197,255,.28), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,248,250,.68));
      box-shadow: 0 20px 46px rgba(36,49,66,.1), inset 0 1px 0 rgba(255,255,255,.96);
    }

    .unit3-board {
      min-height: 430px;
      align-content: center;
    }

    .unit3-intro {
      display: grid;
      grid-template-columns: minmax(220px, .72fr) 1fr;
      gap: 22px;
      align-items: center;
      width: min(980px, 100%);
      margin: 0 auto;
      padding: 18px;
      border-radius: 26px;
      background: rgba(255,255,255,.72);
      box-shadow: 0 18px 40px rgba(36,49,66,.08);
    }

    .unit3-intro-copy {
      display: grid;
      gap: 10px;
      color: #252b3d;
    }

    .unit3-intro-copy strong {
      font-size: clamp(26px, 3vw, 44px);
      line-height: 1.12;
      letter-spacing: 0;
    }

    .unit3-intro-copy span {
      font-size: 20px;
      color: #667086;
      font-weight: 800;
      line-height: 1.45;
    }

    .unit3-item {
      position: relative;
      display: inline-block;
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
    }

    .unit3-item.tadpole::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 5px;
      width: 13px;
      height: 10px;
      border-radius: 50%;
      background: #31232e;
      box-shadow: inset -2px -1px 0 rgba(0,0,0,.22);
    }

    .unit3-item.tadpole::after {
      content: "";
      position: absolute;
      left: 14px;
      top: 10px;
      width: 12px;
      height: 2px;
      border-radius: 999px;
      background: #31232e;
      transform: rotate(18deg);
      transform-origin: left center;
    }

    .unit3-item.fish::before {
      content: "";
      position: absolute;
      inset: 3px 5px 5px 2px;
      border-radius: 50%;
      background: #f37f3f;
      box-shadow: inset -3px -2px 0 rgba(150,60,20,.2);
    }

    .unit3-item.fish::after {
      content: "";
      position: absolute;
      right: 0;
      top: 8px;
      border-left: 8px solid #f37f3f;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    .unit3-item.shrimp::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 6px;
      width: 16px;
      height: 10px;
      border-radius: 50% 50% 48% 48%;
      border: 3px solid #e46155;
      border-top-color: transparent;
      transform: rotate(-10deg);
    }

    .unit3-item.muted {
      opacity: .3;
      filter: grayscale(1);
    }

    .unit3-pond {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      padding: 14px;
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(182,224,255,.7), rgba(216,242,255,.45));
    }

    .unit3-pond-single {
      min-height: 280px;
      display: grid;
      grid-template-columns: minmax(0, 360px);
      place-content: center;
      background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 24%),
        linear-gradient(145deg, rgba(182,224,255,.72), rgba(216,242,255,.48));
    }

    .unit3-pond-clusters {
      min-height: 300px;
      align-items: center;
      background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.5), transparent 20%),
        radial-gradient(circle at 80% 75%, rgba(123,198,238,.26), transparent 24%),
        linear-gradient(145deg, rgba(182,224,255,.72), rgba(216,242,255,.48));
    }

    .unit3-pond-all {
      min-height: 300px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      gap: 7px 9px;
      padding: 28px 44px;
      background:
        radial-gradient(circle at 22% 24%, rgba(255,255,255,.55), transparent 22%),
        radial-gradient(circle at 68% 72%, rgba(122,196,236,.32), transparent 28%),
        linear-gradient(145deg, rgba(182,224,255,.74), rgba(216,242,255,.52));
    }

    .unit3-tadpole-group {
      min-height: 84px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      gap: 5px;
      padding: 10px;
      border-radius: 18px;
      background: rgba(255,255,255,.46);
      transform: rotate(calc((var(--g) - 2) * .8deg));
    }

    .unit3-pond-single .unit3-tadpole-group {
      min-height: 170px;
      padding: 28px 34px;
      gap: 10px 12px;
      border-radius: 42% 58% 48% 52% / 56% 42% 58% 44%;
      background: rgba(255,255,255,.58);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.64), 0 18px 38px rgba(74,112,150,.12);
      transform: rotate(-3deg);
    }

    .unit3-pond-single .unit3-item {
      width: 34px;
      height: 30px;
    }

    .unit3-pond-clusters .unit3-tadpole-group {
      min-height: 100px;
      border-radius: 40% 60% 52% 48% / 54% 46% 58% 42%;
      background: rgba(255,255,255,.5);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 12px 28px rgba(74,112,150,.1);
    }

    .unit3-pond-clusters .unit3-tadpole-group:nth-child(2n) {
      border-radius: 58% 42% 46% 54% / 44% 56% 40% 60%;
      transform: translateY(8px) rotate(2deg);
    }

    .unit3-pond-clusters .unit3-tadpole-group:nth-child(3n) {
      border-radius: 52% 48% 62% 38% / 58% 38% 62% 42%;
      transform: translateY(-6px) rotate(-2deg);
    }

    .unit3-pond-all .unit3-item {
      width: 25px;
      height: 23px;
      transform: translateY(calc((var(--wave, 0)) * 1px));
    }

    .unit3-summary-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .unit3-summary-cards > div {
      min-height: 64px;
      display: grid;
      place-items: center;
      padding: 10px;
      border-radius: 18px;
      background: rgba(255,255,255,.76);
      color: #2b3448;
      font-size: 18px;
      font-weight: 950;
      text-align: center;
      box-shadow: 0 12px 25px rgba(36,49,66,.07);
    }

    .unit3-number-train,
    .unit3-count-line {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      padding: 16px;
      border-radius: 22px;
      background: rgba(255,255,255,.64);
    }

    .unit3-count-line-single {
      flex-wrap: nowrap;
      min-height: 170px;
      align-items: center;
    }

    .unit3-number-train span,
    .unit3-count-line span,
    .unit3-number-card,
    .unit3-operator-token,
    .unit3-equation-big {
      min-width: 86px;
      min-height: 76px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      background: rgba(255,255,255,.88);
      color: #252b3d;
      font-size: 34px;
      font-weight: 1000;
      box-shadow: 0 15px 30px rgba(36,49,66,.08);
    }

    .unit3-number-train span.next,
    .unit3-operator-token {
      color: #2f8f68;
    }

    .unit3-ten-lane,
    .unit3-bundles {
      display: grid;
      gap: 12px;
      padding: 14px;
      border-radius: 22px;
      background: rgba(255,255,255,.62);
    }

    .unit3-ten-lane {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .unit3-ten-lane:has(.detailed) {
      grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
      align-items: stretch;
    }

    .unit3-ten-pack,
    .unit3-bundle-zone {
      min-height: 92px;
      display: grid;
      place-items: center;
      gap: 6px;
      border-radius: 18px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 12px 24px rgba(36,49,66,.06);
    }

    .unit3-ten-pack.detailed {
      min-height: 122px;
      padding: 10px 8px;
      gap: 8px;
    }

    .unit3-ten-pack.detailed::before {
      display: none;
    }

    .unit3-ten-rods {
      width: 72px;
      min-height: 72px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
      padding: 7px;
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(255,245,229,.95), rgba(255,255,255,.72));
      box-shadow: inset 0 0 0 1px rgba(151,91,50,.14);
    }

    .unit3-ten-rods span {
      display: block;
      width: 7px;
      height: 28px;
      justify-self: center;
      border-radius: 999px;
      background: linear-gradient(180deg, #dba06a, #8f5a35);
      box-shadow: inset -1px 0 0 rgba(0,0,0,.14);
    }

    .unit3-ten-pack.detailed strong {
      color: #587088;
      font-size: 14px;
      font-weight: 950;
    }

    .unit3-ten-pack::before,
    .unit3-ten-stick {
      content: "";
      display: block;
      width: 46px;
      height: 56px;
      border-radius: 10px;
      background:
        repeating-linear-gradient(90deg, #9a6038 0 5px, #d39158 5px 9px);
      box-shadow: inset 0 0 0 2px rgba(130,80,45,.2);
    }

    .unit3-ten-pack span,
    .combine-label {
      color: #587088;
      font-weight: 900;
      font-size: 15px;
    }

    .unit3-stick-bundles,
    .unit3-ones {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .unit3-one-stick {
      width: 10px;
      height: 60px;
      border-radius: 999px;
      background: #a66a3d;
      box-shadow: inset -2px 0 0 rgba(0,0,0,.12);
    }

    .unit3-equation-big {
      width: 100%;
      min-height: 66px;
      color: #2f8f68;
    }

    .unit3-place-focus {
      display: grid;
      gap: 16px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.58);
    }

    .unit3-focus-title {
      color: #2b3448;
      font-size: 24px;
      font-weight: 1000;
      text-align: center;
    }

    .unit3-place-tens {
      width: min(560px, 100%);
      margin: 0 auto;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .unit3-ones-focus {
      min-height: 180px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 18px;
      padding: 20px;
      border-radius: 22px;
      background: rgba(255,255,255,.72);
    }

    .unit3-ones-focus.mini {
      min-height: 110px;
      gap: 10px;
      padding: 12px;
    }

    .unit3-one-stick.big {
      width: 16px;
      height: 86px;
    }

    .unit3-compose-scene {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) auto minmax(0, .9fr) auto 130px;
      align-items: center;
      gap: 16px;
      padding: 16px;
      border-radius: 24px;
      background: rgba(255,255,255,.58);
    }

    .unit3-compose-part {
      display: grid;
      gap: 10px;
      color: #587088;
      font-weight: 950;
      font-size: 18px;
    }

    .unit3-mini-ten-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(82px, 1fr));
      gap: 10px;
    }

    .unit3-symbol {
      color: #8a96a8;
      font-size: 34px;
      font-weight: 1000;
      text-align: center;
    }

    .unit3-result-card {
      min-height: 118px;
      display: grid;
      place-items: center;
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(231,255,244,.76));
      color: #2f8f68;
      font-size: 58px;
      font-weight: 1000;
      box-shadow: 0 14px 30px rgba(36,49,66,.08);
    }

    .unit3-digit-build {
      display: grid;
      grid-template-columns: 1fr 1fr auto 1.2fr;
      align-items: center;
      gap: 18px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.58);
    }

    .unit3-digit-slot,
    .unit3-written-card,
    .unit3-big-number,
    .unit3-reading-options > div {
      min-height: 132px;
      display: grid;
      place-items: center;
      border-radius: 22px;
      background: rgba(255,255,255,.86);
      box-shadow: 0 14px 30px rgba(36,49,66,.08);
    }

    .unit3-digit-slot span,
    .unit3-reading-options span {
      color: #657184;
      font-size: 18px;
      font-weight: 950;
    }

    .unit3-digit-slot strong {
      color: #2f8f68;
      font-size: 58px;
      font-weight: 1000;
    }

    .unit3-written-card {
      grid-template-columns: repeat(2, 1fr);
      color: #252b3d;
      font-size: 64px;
      font-weight: 1000;
    }

    .unit3-digit-read {
      display: grid;
      gap: 18px;
      place-items: center;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.58);
    }

    .unit3-big-number {
      grid-template-columns: repeat(2, 110px);
      min-height: 160px;
      color: #252b3d;
      font-size: 78px;
      font-weight: 1000;
    }

    .unit3-big-number .active {
      color: #2f8f68;
      border-radius: 18px;
      background: rgba(47,143,104,.12);
      padding: 6px 18px;
    }

    .unit3-place-arrow {
      width: min(520px, 100%);
      min-height: 70px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      background: rgba(255,255,255,.78);
      color: #587088;
      font-size: 22px;
      font-weight: 950;
    }

    .unit3-reading-options {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .unit3-reading-options > div {
      gap: 8px;
    }

    .unit3-reading-options strong {
      color: #252b3d;
      font-size: 32px;
      font-weight: 1000;
    }

    .unit3-place-table {
      width: min(420px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      overflow: hidden;
      border-radius: 16px;
      border: 2px solid rgba(37,43,61,.16);
      background: rgba(255,255,255,.86);
      color: #252b3d;
      text-align: center;
      font-weight: 950;
    }

    .unit3-place-table > * {
      padding: 10px;
      border-right: 1px solid rgba(37,43,61,.12);
    }

    .unit3-place-table strong {
      font-size: 30px;
      color: #2f8f68;
    }

    .unit3-read-write {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .unit3-read-write > div {
      min-height: 92px;
      display: grid;
      place-items: center;
      gap: 6px;
      border-radius: 20px;
      background: rgba(255,255,255,.78);
      color: #657184;
      font-weight: 900;
    }

    .unit3-read-write strong {
      color: #2f8f68;
      font-size: 34px;
    }

    .unit3-hundred-chart {
      display: grid;
      grid-template-columns: repeat(10, minmax(0, 1fr));
      gap: 4px;
      padding: 12px;
      border-radius: 20px;
      background: rgba(255,255,255,.72);
      box-shadow: inset 0 0 0 1px rgba(37,43,61,.08);
    }

    .unit3-hundred-chart span {
      min-height: 28px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #657184;
      background: rgba(255,255,255,.72);
      font-size: 13px;
      font-weight: 800;
    }

    .unit3-hundred-chart span.ten {
      color: #3f7ee8;
    }

    .unit3-hundred-chart span.active {
      background: linear-gradient(135deg, #f8a6b8, #ffd45a);
      color: #fff;
      transform: scale(1.08);
    }

    .unit3-compare-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 18px;
      width: min(640px, 100%);
      margin: 0 auto;
    }

    .unit3-number-card {
      min-height: 132px;
      font-size: 64px;
    }

    .unit3-operator-token {
      min-width: 92px;
      min-height: 92px;
      font-size: 54px;
    }

    .unit3-vertical-number-line {
      width: min(220px, 100%);
      margin: 0 auto;
      display: grid;
      gap: 12px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.62);
    }

    .unit3-vertical-number-line span {
      min-height: 72px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: rgba(255,255,255,.88);
      color: #252b3d;
      font-size: 32px;
      font-weight: 1000;
      box-shadow: 0 12px 24px rgba(36,49,66,.07);
    }

    .unit3-vertical-number-line span.next {
      color: #2f8f68;
    }

    .unit3-compare-digits {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .unit3-compare-digits > div {
      min-height: 170px;
      display: grid;
      place-items: center;
      gap: 8px;
      padding: 16px;
      border-radius: 24px;
      background: rgba(255,255,255,.76);
      box-shadow: 0 14px 30px rgba(36,49,66,.08);
    }

    .unit3-compare-digits span {
      color: #657184;
      font-size: 26px;
      font-weight: 950;
    }

    .unit3-compare-digits strong {
      color: #2f8f68;
      font-size: 70px;
      font-weight: 1000;
    }

    .unit3-compare-digits em {
      color: #587088;
      font-size: 18px;
      font-style: normal;
      font-weight: 950;
    }

    .unit3-sea {
      display: grid;
      grid-template-columns: 1.4fr 1fr .8fr;
      gap: 12px;
      padding: 16px;
      border-radius: 24px;
      background: linear-gradient(145deg, rgba(179,226,255,.78), rgba(219,241,255,.52));
    }

    .unit3-sea.two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .unit3-sea > div {
      display: grid;
      gap: 8px;
      align-content: start;
      padding: 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.45);
    }

    .unit3-sea > div > span {
      color: #2b3448;
      font-size: 16px;
      font-weight: 950;
    }

    .unit3-sea-items {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .unit3-context-choice {
      min-height: 250px;
      display: grid;
      grid-template-columns: 130px auto 1fr;
      align-items: center;
      gap: 18px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.62);
    }

    .unit3-context-choice > span {
      color: #587088;
      font-size: 26px;
      font-weight: 1000;
    }

    .unit3-option-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .unit3-option-strip strong {
      min-height: 90px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      background: rgba(255,255,255,.86);
      color: #252b3d;
      font-size: 34px;
      font-weight: 1000;
      box-shadow: 0 12px 24px rgba(36,49,66,.07);
    }

    .unit3-teach-board .teach-row-pattern {
      align-items: center;
    }

    .unit3-teach-map {
      width: min(860px, 100%);
      min-height: 430px;
      padding: 18px;
    }

    .unit3-teach-map .teach-board-title {
      font-size: 24px;
      margin-bottom: 4px;
    }

    .unit3-teach-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .unit3-teach-card {
      min-height: 128px;
      display: grid;
      align-content: center;
      gap: 10px;
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.13);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
    }

    .unit3-teach-card.wide {
      grid-column: 1 / -1;
      min-height: 112px;
    }

    .unit3-teach-card > span {
      color: rgba(255,255,255,.9);
      font-size: 18px;
      font-weight: 1000;
    }

    .unit3-teach-card > div {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,.86);
      font-size: 18px;
      font-weight: 950;
    }

    .unit3-teach-card .num {
      width: 52px;
      min-width: 52px;
      min-height: 46px;
      border-radius: 13px;
      font-size: 26px;
      color: #232838;
    }

    .unit3-teach-card b {
      color: rgba(255,255,255,.75);
      font-size: 26px;
    }

    .unit3-teach-card em {
      color: rgba(255,255,255,.82);
      font-style: normal;
      font-weight: 950;
    }

    .unit3-teach-card strong {
      min-height: 44px;
      display: grid;
      place-items: center;
      padding: 0 14px;
      border-radius: 13px;
      background: rgba(255,255,255,.88);
      color: #2f8f68;
      font-size: 24px;
      font-weight: 1000;
    }

    .unit4-board {
      min-height: 430px;
      align-content: center;
    }

    .unit4-intro {
      width: min(980px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(240px, .72fr) 1fr;
      gap: 24px;
      align-items: center;
      padding: 22px;
      border-radius: 28px;
      background: rgba(255,255,255,.76);
      box-shadow: 0 18px 40px rgba(36,49,66,.08);
    }

    .unit4-wallet,
    .unit4-money-row,
    .unit4-equation,
    .unit4-shop-line,
    .unit4-unit-cards,
    .unit4-stack-groups {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .unit4-wallet {
      min-height: 260px;
      padding: 18px;
      border-radius: 26px;
      background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(247,251,255,.64));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
      display: grid;
      grid-template-columns: repeat(3, minmax(90px, 1fr));
      justify-items: center;
      align-content: center;
      gap: 14px 18px;
    }

    .unit4-cover {
      min-height: 260px;
      padding: 14px;
      border-radius: 26px;
      background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(247,251,255,.68));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.86), 0 18px 36px rgba(36,49,66,.08);
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .unit4-cover img {
      width: 100%;
      max-height: 300px;
      object-fit: contain;
      display: block;
      border-radius: 18px;
    }

    .unit4-money {
      min-width: 78px;
      min-height: 48px;
      display: inline-grid;
      place-items: center;
      padding: 0 16px;
      border-radius: 16px;
      color: #232838;
      font-size: 22px;
      font-weight: 1000;
      background: linear-gradient(145deg, #edf6ff, #d7e9ff);
      box-shadow: 0 12px 26px rgba(36,49,66,.08), inset 0 1px 0 rgba(255,255,255,.95);
      border: 1px solid rgba(255,255,255,.86);
    }

    .unit4-money.note {
      min-width: 128px;
      border-radius: 14px;
    }

    .unit4-money.note.red { background: linear-gradient(145deg, #ffe2e5, #ffb8c0); }
    .unit4-money.note.green { background: linear-gradient(145deg, #dbf5e5, #a8dcbc); }
    .unit4-money.note.blue { background: linear-gradient(145deg, #e5f1ff, #a9cfff); }
    .unit4-money.note.purple { background: linear-gradient(145deg, #f0e9ff, #cab8ff); }
    .unit4-money.note.orange { background: linear-gradient(145deg, #fff0df, #ffd0a6); }
    .unit4-money.note.yellow { background: linear-gradient(145deg, #fff9d9, #eadb92); }

    .unit4-money.coin,
    .unit4-money.coin.gold {
      min-width: 62px;
      min-height: 62px;
      padding: 0 10px;
      border-radius: 999px;
      background: radial-gradient(circle at 35% 25%, #fff7bd, #ffd45a 48%, #dfa934);
    }

    .unit4-money.coin.tiny {
      min-width: 46px;
      min-height: 46px;
      font-size: 16px;
    }

    .unit4-money.big {
      min-width: 190px;
      min-height: 110px;
      font-size: 42px;
      border-radius: 26px;
    }

    .unit4-money.coin.big {
      min-width: 134px;
      min-height: 134px;
      font-size: 36px;
    }

    .unit4-money.question,
    .unit4-price-tag span {
      background: linear-gradient(145deg, #f2fff9, #dff8ed);
      color: #2f8f68;
    }

    .unit4-money.muted {
      opacity: .32;
      filter: grayscale(.9);
    }

    .unit4-money.has-img {
      position: relative;
      min-width: 0;
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
    }

    .unit4-money.has-img img {
      display: block;
      width: 126px;
      height: 70px;
      object-fit: contain;
      filter: drop-shadow(0 12px 18px rgba(36,49,66,.12));
    }

.unit4-money.real-img img {
  mix-blend-mode: normal;
}

.unit4-money.note.real-img,
.unit4-money.note.real-img.has-img {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.unit4-money.note.real-img img {
  border-radius: 0;
  background: transparent;
  mix-blend-mode: normal;
}

    .unit4-money.has-img.coin img {
      width: 66px;
      height: 66px;
      border-radius: 999px;
      object-fit: cover;
    }

    .unit4-money.has-img.coin.tiny img {
      width: 44px;
      height: 44px;
    }

    .unit4-money.has-img.big img {
      width: 230px;
      height: 128px;
    }

    .unit4-money.has-img.coin.big img {
      width: 132px;
      height: 132px;
    }

    .unit4-money-label {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #1f293b;
      font-size: 24px;
      font-weight: 1000;
      text-shadow: 0 1px 0 rgba(255,255,255,.65);
      pointer-events: none;
    }

    .unit4-money.has-img.coin .unit4-money-label {
      font-size: 18px;
      color: #6d4810;
    }

    .unit4-money.has-img.big .unit4-money-label {
      font-size: 42px;
    }

    .unit4-money.has-img.coin.big .unit4-money-label {
      font-size: 34px;
    }

    .unit4-focus-money,
    .unit4-unit-cards,
    .unit4-unit-money-cards,
    .unit4-equation,
    .unit4-convert-row,
    .unit4-shop-line,
    .unit4-stack-groups,
    .unit4-price-tag {
      min-height: 300px;
    }

    .unit4-focus-money,
    .unit4-price-tag {
      display: grid;
      place-items: center;
      align-content: center;
      gap: 16px;
    }

    .unit4-unit-cards span {
      width: 170px;
      height: 130px;
      display: grid;
      place-items: center;
      border-radius: 28px;
      background: rgba(255,255,255,.88);
      color: #2f8f68;
      font-size: 54px;
      font-weight: 1000;
      box-shadow: 0 18px 36px rgba(36,49,66,.08);
    }

    .unit4-unit-money-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(150px, 1fr));
      align-items: stretch;
      justify-items: center;
      gap: 22px;
      width: min(780px, 96%);
      margin: 0 auto;
    }

    .unit4-unit-money-cards > div {
      width: 100%;
      min-height: 190px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 14px;
      border-radius: 28px;
      background: rgba(255,255,255,.82);
      box-shadow: 0 18px 36px rgba(36,49,66,.08);
    }

    .unit4-unit-money-cards strong {
      color: #2f8f68;
      font-size: 42px;
      font-weight: 1000;
    }

    .unit4-equation {
      padding: 8px;
      color: #7d8797;
      font-size: 36px;
      font-weight: 1000;
    }

    .unit4-convert-row {
      width: min(860px, 98%);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
      color: #7d8797;
      font-size: 34px;
      font-weight: 1000;
    }

    .unit4-equation b,
    .unit4-stack-groups b,
    .unit4-shop-line b {
      color: #9aa4b5;
      font-size: 42px;
      font-weight: 1000;
    }

    .unit4-equation em,
    .unit4-stack-groups em {
      color: #667086;
      font-style: normal;
      font-size: 18px;
      font-weight: 900;
    }

    .unit4-stack-groups > div {
      min-width: 230px;
      min-height: 126px;
      display: grid;
      align-content: center;
      gap: 8px;
      padding: 14px;
      border-radius: 22px;
      background: rgba(255,255,255,.72);
    }

    .unit4-money-pile {
      min-width: 168px;
      min-height: 128px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 10px;
      padding: 14px 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 16px 34px rgba(36,49,66,.08), inset 0 1px 0 rgba(255,255,255,.8);
    }

    .unit4-pile-icons {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 56px;
    }

    .unit4-pile-icons .unit4-money.has-img img {
      width: 58px;
      height: 38px;
    }

    .unit4-pile-icons .unit4-money.has-img.coin img {
      width: 42px;
      height: 42px;
    }

    .unit4-pile-count {
      min-width: 42px;
      min-height: 42px;
      display: grid;
      place-items: center;
      padding: 0 8px;
      border-radius: 999px;
      background: #232838;
      color: white;
      font-size: 18px;
      font-weight: 1000;
      box-shadow: 0 10px 20px rgba(36,49,66,.16);
    }

.unit4-money-pile strong {
  color: #2f8f68;
  font-size: 24px;
  font-weight: 1000;
  white-space: nowrap;
}

.unit4-money-row.compact-coin-row {
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.unit4-money-pile.compact-coin {
  min-width: 130px;
  min-height: 82px;
  padding: 12px 16px;
}

.unit4-money-pile.compact-coin .unit4-pile-icons {
  gap: 16px;
  min-height: 54px;
  flex-wrap: wrap;
}

.unit4-money-pile.compact-coin strong {
  display: none;
}

.unit4-coin-multiplier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #2f9467;
  font-size: 30px;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}

.unit4-coin-multiplier.muted {
  opacity: .38;
  filter: grayscale(.9);
}

.unit4-coin-multiplier .unit4-money.has-img.coin img {
  width: 48px;
  height: 48px;
}

.unit4-coin-multiplier .unit4-pile-count {
  min-width: auto;
  min-height: auto;
  padding: 0;
  border-radius: 0;
  color: #2f9467;
  background: transparent;
  box-shadow: none;
  font-size: 30px;
}

.unit4-times {
  color: #8c96a8;
  font-size: 26px;
  font-weight: 1000;
}

    .unit4-price-card {
      min-width: 170px;
      min-height: 112px;
      display: grid;
      place-items: center;
      gap: 8px;
      padding: 12px 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.86);
      box-shadow: 0 16px 34px rgba(36,49,66,.08);
    }

    .unit4-price-card.has-img {
      min-width: 150px;
      min-height: 150px;
      grid-template-rows: 72px auto auto;
      padding-top: 16px;
    }

    .unit4-price-card.has-img img {
      width: 78px;
      height: 78px;
      object-fit: contain;
      filter: drop-shadow(0 10px 16px rgba(36,49,66,.12));
    }

    .unit4-price-card strong {
      color: #232838;
      font-size: 24px;
      font-weight: 1000;
    }

    .unit4-price-card span {
      color: #2f8f68;
      font-size: 32px;
      font-weight: 1000;
    }

    .unit4-price-tag span {
      min-width: 360px;
      min-height: 150px;
      display: grid;
      place-items: center;
      border-radius: 30px;
      font-size: 58px;
      font-weight: 1000;
      box-shadow: 0 20px 40px rgba(36,49,66,.09);
    }

    .unit4-price-tag em {
      color: #667086;
      font-style: normal;
      font-size: 24px;
      font-weight: 900;
    }

    .unit4-teach-board {
      width: min(900px, 100%);
      min-height: 440px;
      padding: 20px;
    }

    .unit4-teach-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .unit4-teach-grid > div {
      display: grid;
      gap: 8px;
      align-content: center;
      padding: 14px;
      min-height: 92px;
      border-radius: 18px;
      background: rgba(255,255,255,.14);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
    }

    .unit4-teach-grid > div:first-child {
      grid-column: 1 / -1;
    }

    .unit4-teach-grid span {
      color: rgba(255,255,255,.9);
      font-size: 18px;
      font-weight: 1000;
    }

    .unit4-teach-grid strong {
      display: inline-grid;
      place-items: center;
      width: fit-content;
      min-height: 38px;
      padding: 0 12px;
      border-radius: 12px;
      background: rgba(255,255,255,.88);
      color: #2f8f68;
      font-size: 22px;
      font-weight: 1000;
    }

    .unit2-story-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .unit2-story-card {
      min-height: 78px;
      display: grid;
      align-content: center;
      gap: 4px;
      padding: 12px 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.8);
      box-shadow: 0 12px 24px rgba(36,49,66,.08);
      color: #2b3448;
      font-weight: 900;
    }

    .unit2-story-card strong {
      font-size: 28px;
      color: #2f8f68;
    }

    .unit2-story-card.result strong {
      color: #3f7ee8;
    }

    .unit2-card-label {
      color: #657184;
      font-size: 15px;
    }

    .unit2-items-wrap {
      padding: 12px;
      border-radius: 20px;
      background: rgba(255,255,255,.62);
    }

    .unit2-wide-items {
      grid-template-columns: repeat(8, minmax(30px, 1fr));
    }

    .unit2-equation {
      min-height: 54px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: rgba(255,255,255,.78);
      color: #2b3448;
      font-size: 28px;
      font-weight: 1000;
      letter-spacing: 0;
    }

    .unit2-equation.primary {
      color: #2f8f68;
    }

    .unit2-add-ladder {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 14px;
      padding: 10px;
      border-radius: 22px;
      background: rgba(255,255,255,.62);
    }

    .unit2-number-bubble,
    .unit2-plus {
      min-height: 88px;
      display: grid;
      place-items: center;
      border-radius: 22px;
      background: rgba(255,255,255,.86);
      color: #2b3448;
      font-size: 42px;
      font-weight: 1000;
      box-shadow: 0 16px 28px rgba(36,49,66,.1);
    }

    .unit2-number-bubble.target {
      color: #2f8f68;
    }

    .unit2-plus {
      min-width: 90px;
      color: #3f7ee8;
    }

    .unit2-compare-row {
      display: grid;
      grid-template-columns: 98px 1fr;
      align-items: center;
      gap: 12px;
      padding: 10px;
      border-radius: 20px;
      background: rgba(255,255,255,.64);
      color: #2b3448;
      font-size: 18px;
      font-weight: 900;
    }

    .unit2-formula-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      align-items: stretch;
      margin-top: 16px;
    }

    .unit2-formula-card {
      min-height: 132px;
      border-radius: 22px;
      background: rgba(255,255,255,.72);
      box-shadow: 0 16px 36px rgba(55, 64, 82, .1);
      display: grid;
      place-items: center;
      gap: 8px;
      color: #2b3448;
      font-weight: 900;
    }

    .unit2-formula-card span {
      color: #4d996f;
      font-size: 18px;
    }

    .unit2-formula-card strong {
      font-size: clamp(28px, 3vw, 46px);
    }

    .unit2-compare-match {
      display: grid;
      gap: 14px;
      margin-top: 12px;
    }

    .unit2-compare-match.single-row {
      align-items: center;
      min-height: 210px;
    }

    .unit2-match-row {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border-radius: 22px;
      background: rgba(255,255,255,.68);
      color: #2b3448;
      font-size: 18px;
      font-weight: 900;
    }

    .unit2-compare-items {
      grid-template-columns: repeat(8, minmax(34px, 1fr));
      gap: 8px;
    }

    .unit2-compare-match.single-row .unit2-compare-items {
      grid-template-columns: repeat(8, minmax(42px, 1fr));
    }

    .combine-stage {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 110px;
      align-items: center;
      gap: 14px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.66);
    }

    .unit2-simple-result-stage {
      display: grid;
      grid-template-columns: 1fr auto 110px;
      align-items: center;
      gap: 18px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.66);
    }

    .unit2-simple-result-items {
      justify-items: center;
    }

    .unit2-answer-items {
      width: min(420px, 100%);
      grid-template-columns: repeat(4, minmax(54px, 1fr));
      justify-content: center;
    }

    .unit2-simple-compare {
      display: grid;
      gap: 14px;
    }

    .unit2-simple-compare .unit2-items-wrap {
      display: grid;
      gap: 10px;
    }

    .unit2-car-split {
      display: grid;
      grid-template-columns: 1fr .62fr;
      align-items: stretch;
      gap: 16px;
    }

    .unit2-car-split.inline-result {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, .62fr) auto 110px;
      align-items: center;
    }

    .unit2-car-grid {
      grid-template-columns: repeat(5, minmax(34px, 1fr));
    }

    .unit2-car-grid.side {
      grid-template-columns: repeat(3, minmax(34px, 1fr));
    }

    .unit2-side-cars {
      transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s cubic-bezier(.2,.8,.2,1);
      transform-origin: center;
    }

    .unit2-side-cars.muted {
      transform: scale(.72);
      opacity: .45;
    }

    .unit2-car-total {
      display: grid;
      grid-template-columns: 1fr auto 110px;
      align-items: center;
      gap: 18px;
      padding: 16px;
      border-radius: 22px;
      background: rgba(255,255,255,.66);
    }

    .unit2-symbol-row.simple {
      padding: 0;
      background: transparent;
    }

    .unit2-banana-sum {
      display: grid;
      grid-template-columns: minmax(0, .8fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 16px;
    }

    .unit2-banana-left {
      display: grid;
      gap: 12px;
    }

    .unit2-banana-grid {
      grid-template-columns: repeat(5, minmax(40px, 1fr));
      gap: 8px;
    }

    .unit2-banana-grid.small {
      grid-template-columns: repeat(5, minmax(40px, 1fr));
    }

    .unit2-banana-grid.total {
      grid-template-columns: repeat(7, minmax(36px, 1fr));
    }

    .unit2-symbol-choice-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .unit2-symbol-choice-card {
      min-height: 140px;
      display: grid;
      place-items: center;
      gap: 8px;
      border-radius: 24px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 16px 30px rgba(36,49,66,.1);
      color: #2b3448;
      font-weight: 1000;
    }

    .unit2-symbol-choice-card span {
      color: #4d996f;
      font-size: 18px;
    }

    .unit2-symbol-choice-card strong {
      font-size: clamp(48px, 6vw, 82px);
      line-height: 1;
    }

    .unit2-add-fruit-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1.25fr;
      align-items: center;
      gap: 12px;
    }

    .unit2-add-fruits {
      grid-template-columns: repeat(5, minmax(34px, 1fr));
    }

    .unit2-fruit-total {
      display: grid;
      gap: 12px;
    }

    .unit2-add-total-fruits {
      grid-template-columns: repeat(7, minmax(38px, 1fr));
    }

    .unit2-fruit-question {
      min-height: 84px;
      display: grid;
      place-items: center;
      border-radius: 22px;
      background: rgba(255,255,255,.88);
      color: #2f8f68;
      font-size: 54px;
      font-weight: 1000;
      box-shadow: 0 14px 28px rgba(36,49,66,.08);
    }

    .unit2-sentence-list {
      display: grid;
      gap: 14px;
    }

    .unit2-sentence-card {
      min-height: 72px;
      display: flex;
      align-items: center;
      padding: 16px 20px;
      border-radius: 18px;
      background: rgba(255,255,255,.8);
      box-shadow: 0 14px 28px rgba(36,49,66,.08);
      color: #2b3448;
      font-size: 21px;
      font-weight: 900;
      line-height: 1.35;
    }

    .combine-group {
      display: grid;
      gap: 10px;
      padding: 14px;
      border-radius: 20px;
      background: rgba(255,255,255,.76);
      box-shadow: 0 14px 28px rgba(36,49,66,.08);
      animation: combineSlide .7s cubic-bezier(.2,.8,.2,1) both;
    }

    .combine-group.from-ten {
      transform-origin: right center;
    }

    .combine-group.from-ones {
      animation-delay: .08s;
      transform-origin: left center;
    }

    .combine-label {
      color: #657184;
      font-size: 15px;
      font-weight: 900;
    }

    .combine-plus,
    .combine-equals {
      color: #92a0b4;
      font-size: 34px;
      font-weight: 1000;
      animation: combineFade .55s .18s cubic-bezier(.2,.8,.2,1) both;
    }

    .combine-result {
      min-height: 96px;
      display: grid;
      place-items: center;
      border-radius: 24px;
      background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,255,248,.84));
      color: #2f8f68;
      font-size: 58px;
      font-weight: 1000;
      box-shadow: 0 18px 32px rgba(47,143,104,.16);
      animation: resultPop .72s .24s cubic-bezier(.2,.8,.2,1) both;
    }

    @keyframes combineSlide {
      from { opacity: 0; transform: translateY(12px) scale(.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes combineFade {
      from { opacity: 0; transform: scale(.86); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes resultPop {
      from { opacity: 0; transform: translateY(10px) scale(.84); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .unit2-split-scene {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 14px;
      padding: 14px;
      border-radius: 22px;
      background: rgba(255,255,255,.62);
    }

    .unit2-operator-token {
      min-width: 72px;
      min-height: 72px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      background: rgba(255,255,255,.86);
      color: #2f8f68;
      font-size: 40px;
      font-weight: 1000;
      box-shadow: 0 16px 28px rgba(36,49,66,.1);
    }

    .unit2-symbol-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 18px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.62);
    }

    .unit2-expression-card {
      min-height: 128px;
      display: grid;
      place-items: center;
      gap: 8px;
      border-radius: 24px;
      background: rgba(255,255,255,.86);
      box-shadow: 0 16px 28px rgba(36,49,66,.1);
      color: #2b3448;
      font-size: 28px;
      font-weight: 1000;
    }

    .unit2-expression-card strong {
      color: #2f8f68;
      font-size: 44px;
    }

    .block-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .block-summary-card {
      min-height: 74px;
      display: grid;
      place-items: center;
      padding: 10px;
      border-radius: 16px;
      background: rgba(255,255,255,.82);
      color: #293044;
      font-size: 18px;
      font-weight: 900;
      text-align: center;
      box-shadow: 0 12px 24px rgba(36,49,66,.08);
    }

    body.teach-active h1 {
      max-width: none;
      white-space: nowrap;
      font-size: clamp(38px, 4.3vw, 54px);
    }

    body.teach-active .sub {
      display: none;
    }

    .coach {
      min-height: 0;
      padding: 30px 28px 22px;
      grid-template-rows: auto auto 1fr auto;
    }

    .face {
      grid-template-columns: 162px 1fr;
      border-bottom: 1px solid rgba(208, 213, 224, .7);
      padding-bottom: 20px;
      gap: 18px;
    }

    .helper {
      width: 162px;
      height: 162px;
      border: 0;
      border-radius: 0;
      background: transparent url("./teacher-pig-transparent.png") center / contain no-repeat;
      box-shadow: none;
      overflow: visible;
    }

    .helper::before, .helper::after, .mouth { display: none; }

    body.placeholder-active .scene::after {
      display: none;
    }

    body.intro-active .scene::after {
      display: none;
    }

    body.intro-active .scene-content > div:first-child {
      width: min(940px, 100%);
      justify-self: center;
      text-align: left;
    }

    body.intro-active h1 {
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: clamp(42px, 4.4vw, 60px);
      line-height: 1;
      letter-spacing: 0;
    }

    body.intro-active h1::before {
      content: "";
      width: 14px;
      height: 42px;
      border-radius: 999px;
      background: linear-gradient(180deg, #78f0ff, #6684ff 48%, #ff9dad);
      box-shadow: 0 0 22px rgba(120, 240, 255, .42), 0 10px 22px rgba(255, 157, 173, .22);
    }

    body.intro-active h1::after {
      content: "";
      width: 12px;
      height: 12px;
      margin-left: -4px;
      border-radius: 50%;
      background: #ff9dad;
      box-shadow: 0 0 0 7px rgba(255,157,173,.14), 0 0 22px rgba(255,157,173,.55);
    }

    body.intro-active .sub {
      display: block;
      max-width: 760px;
      margin-top: 14px;
      color: #596377;
      font-size: 18px;
      line-height: 1.55;
      font-weight: 700;
    }

    body.intro-active .visual-zone {
      justify-items: center;
      align-content: center;
    }

    body.placeholder-active .parent-note {
      width: min(760px, 100%);
    }

    .intro-video-card {
      width: min(940px, 100%);
      padding: 14px;
      border-radius: 24px;
      background: rgba(255,255,255,.72);
      box-shadow: 0 20px 46px rgba(36,49,66,.1);
    }

    .intro-video-card video {
      display: block;
      width: 100%;
      max-height: min(430px, calc(100vh - 330px));
      aspect-ratio: 16 / 9;
      border-radius: 18px;
      background: #fff;
      object-fit: contain;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    }


    .intro-knowledge-card {
      width: min(940px, 100%);
      display: grid;
      grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
      gap: 24px;
      align-items: stretch;
      padding: 28px;
      border-radius: 30px;
      background: rgba(255,255,255,.78);
      box-shadow: 0 20px 46px rgba(36,49,66,.1);
      border: 1px solid rgba(255,255,255,.9);
    }

    .intro-knowledge-visual {
      min-height: 250px;
      border-radius: 24px;
      background: linear-gradient(145deg, #fff8e8, #eef8ff);
      border: 2px solid rgba(255,198,120,.36);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
      padding: 22px;
    }

    .intro-knowledge-visual.pattern-preview .tile {
      width: 76px;
      height: 76px;
      box-shadow: 0 10px 20px rgba(36,49,66,.08);
    }

    .intro-knowledge-copy {
      text-align: left;
      color: #263244;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
    }

    .intro-knowledge-copy strong {
      font-size: clamp(28px, 3.2vw, 42px);
      line-height: 1.15;
    }

    .intro-knowledge-copy p,
    .intro-knowledge-copy li {
      font-size: clamp(18px, 1.6vw, 23px);
      line-height: 1.65;
      color: #536074;
    }

    .intro-knowledge-copy ul {
      margin: 0;
      padding-left: 1.2em;
    }

    .intro-ten-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
    }

    .intro-plus,
    .intro-num {
      font-size: 44px;
      font-weight: 900;
      color: #263244;
    }

    .intro-method-flow {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: #2f8f68;
      font-size: 22px;
      font-weight: 900;
    }

    .intro-method-flow i {
      width: 54px;
      height: 4px;
      border-radius: 999px;
      background: #7cc9a3;
      position: relative;
    }

    .intro-method-flow i::after {
      content: "";
      position: absolute;
      right: -2px;
      top: 50%;
      width: 12px;
      height: 12px;
      border-right: 4px solid #7cc9a3;
      border-top: 4px solid #7cc9a3;
      transform: translateY(-50%) rotate(45deg);
    }

    @media (max-width: 780px) {
      .intro-knowledge-card {
        grid-template-columns: 1fr;
        padding: 20px;
      }
      .intro-knowledge-visual {
        min-height: 180px;
      }
    }

    .coach-name {
      font-size: 25px;
      color: #2a3143;
    }

    .stars {
      margin-top: 10px;
      min-height: auto;
      color: #6b7283;
      font-size: 14px;
      letter-spacing: 0;
    }

    .progress-track {
      width: 100%;
      height: 10px;
      margin-top: 8px;
      border-radius: 999px;
      background: rgba(231, 216, 224, .72);
      box-shadow: inset 0 1px 2px rgba(36,49,66,.08);
      overflow: hidden;
      position: relative;
    }

    .progress-fill {
      display: block;
      height: 100%;
      width: var(--p, 0%);
      border-radius: inherit;
      background: linear-gradient(90deg, #ff9dad, #f5c84f, #70c993);
      box-shadow: 0 4px 12px rgba(255, 157, 173, .3);
      position: relative;
      overflow: hidden;
      transition: width .72s cubic-bezier(.22, 1, .36, 1);
    }

    .progress-fill::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, transparent 0 30%, rgba(255,255,255,.7) 48%, transparent 68% 100%);
      transform: translateX(-120%);
      animation: progressShine 1.1s ease both;
    }

    @keyframes progressShine {
      to { transform: translateX(120%); }
    }

    .progress-label {
      display: block;
      color: #6a7184;
      font-weight: 800;
    }

    .voice {
      width: 100%;
      margin-top: 12px;
      min-height: 50px;
      border-radius: 999px;
      background: #202638;
      color: #fff;
      box-shadow: 0 18px 36px rgba(32,38,56,.18);
    }

    .question {
      margin-top: 4px;
      font-size: 27px;
      color: #252c3f;
    }

    .hint {
      min-height: 0;
      border: 0;
      border-radius: 18px;
      background: rgba(255,255,255,.66);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 28px rgba(36,49,66,.06);
      color: #4c556a;
      font-size: 17px;
      align-content: start;
      line-height: 1.55;
      overflow: auto;
    }

    .controls {
      gap: 14px;
    }

    .primary, .ghost {
      min-height: 56px;
      border-radius: 18px;
      font-size: 18px;
    }

    .primary {
      background: #202638;
      box-shadow: 0 18px 38px rgba(32,38,56,.18);
    }

    .ghost {
      background: rgba(255,255,255,.85);
      border: 2px solid rgba(36,49,66,.08);
      color: #252c3f;
    }

    .options {
      gap: 18px;
    }

    .choice {
      min-height: 62px;
      border: 0;
      border-radius: 18px;
      background: rgba(255,255,255,.86);
      box-shadow: 0 14px 28px rgba(36,49,66,.08);
      color: #2f8f68;
      font-size: 24px;
    }

    .placeholder-card {
      background: rgba(255,255,255,.78);
      border: 0;
      box-shadow: 0 16px 30px rgba(36,49,66,.08);
    }

    .corner-tool, .corner-grid { display: none; }

    body:not(.motion-ready) .topbar,
    body:not(.motion-ready) .scene,
    body:not(.motion-ready) .coach {
      opacity: 0;
    }

    body.opening .topbar {
      animation: topbarCinematicIn .78s cubic-bezier(.16, 1, .3, 1) both;
    }

    body.opening .brand .badge {
      animation: avatarCinematicIn .9s cubic-bezier(.16, 1, .3, 1) .08s both;
    }

    body.opening .brand span:last-child {
      transform-origin: left center;
      animation: brandTitleReveal .92s cubic-bezier(.16, 1, .3, 1) .16s both;
    }

    body.opening .unit-tab {
      animation: navPillReveal .72s cubic-bezier(.16, 1, .3, 1) both;
      animation-delay: calc(.24s + var(--tab-index, 0) * .045s);
    }

    body.motion-ready .scene {
      animation: leftPanelReveal 1.28s cubic-bezier(.16, 1, .3, 1) .18s both;
      transform-origin: 48% 52%;
    }

    body.motion-ready .coach {
      animation: rightPanelReveal 1.22s cubic-bezier(.16, 1, .3, 1) .32s both;
      transform-origin: 50% 45%;
    }

    body.motion-ready .scene::after {
      animation: mascotDepthIn 1.55s cubic-bezier(.16, 1, .3, 1) .42s both;
    }

    body.view-motion .scene-content > div:first-child {
      animation: moduleHeadlineIn .72s cubic-bezier(.16, 1, .3, 1) both;
      transform-origin: left center;
    }

    body.view-motion h1 {
      animation: titleMaskSweep .82s cubic-bezier(.16, 1, .3, 1) .04s both;
      transform-origin: left center;
    }

    body.view-motion .sub {
      animation: textSlideIn .64s cubic-bezier(.16, 1, .3, 1) .14s both;
    }

    body.view-motion .parent-note,
    body.view-motion .speech,
    body.view-motion .intro-video-card {
      animation: mediaReveal .78s cubic-bezier(.16, 1, .3, 1) .18s both;
      transform-origin: 50% 48%;
    }

    body.view-motion .pattern-row {
      animation: mediaReveal .72s cubic-bezier(.16, 1, .3, 1) .16s both;
      transform-origin: 50% 55%;
    }

    body.view-motion .rule,
    body.view-motion .choice,
    body.view-motion .teach-card {
      animation: staggerCardIn .62s cubic-bezier(.16, 1, .3, 1) both;
      animation-delay: calc(.22s + var(--item-index, 0) * .045s);
    }

    body.view-motion .caption {
      animation: textSlideIn .56s cubic-bezier(.16, 1, .3, 1) .26s both;
    }

    body.view-motion .coach .face {
      animation: coachFaceReveal .66s cubic-bezier(.16, 1, .3, 1) .08s both;
    }

    body.view-motion .question {
      animation: moduleHeadlineIn .66s cubic-bezier(.16, 1, .3, 1) .14s both;
    }

    body.view-motion .hint {
      animation: mediaReveal .68s cubic-bezier(.16, 1, .3, 1) .2s both;
    }

    body.view-motion .controls {
      animation: textSlideIn .56s cubic-bezier(.16, 1, .3, 1) .28s both;
    }

    :where(.unit-tab, .voice, .primary, .ghost, .choice, .rule, .teach-card) {
      --edge-proximity: 0;
      --cursor-angle: 45deg;
      --edge-sensitivity: 30;
      --color-sensitivity: 48;
      --cone-spread: 25;
      --glow-color: hsl(344deg 86% 78% / 90%);
      --glow-color-60: hsl(344deg 86% 78% / 54%);
      --glow-color-50: hsl(344deg 86% 78% / 45%);
      --glow-color-40: hsl(344deg 86% 78% / 36%);
      --glow-color-30: hsl(344deg 86% 78% / 27%);
      --glow-color-20: hsl(344deg 86% 78% / 18%);
      --glow-color-10: hsl(344deg 86% 78% / 10%);
      --gradient-one: radial-gradient(at 80% 55%, #ff9dad 0px, transparent 50%);
      --gradient-two: radial-gradient(at 69% 34%, #f6cf62 0px, transparent 50%);
      --gradient-three: radial-gradient(at 8% 6%, #6aa7ff 0px, transparent 50%);
      --gradient-four: radial-gradient(at 41% 38%, #9ce4cc 0px, transparent 50%);
      --gradient-five: radial-gradient(at 86% 85%, #ffd6e0 0px, transparent 50%);
      --gradient-six: radial-gradient(at 82% 18%, #ffffff 0px, transparent 50%);
      --gradient-seven: radial-gradient(at 51% 4%, #b7c7ff 0px, transparent 50%);
      position: relative;
      isolation: isolate;
      overflow: visible;
      transform: translate3d(0, 0, .01px);
      transition: --edge-proximity .48s cubic-bezier(.16, 1, .3, 1), --cursor-angle .72s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease-out;
    }

    :where(.unit-tab, .voice, .primary, .ghost, .choice, .rule, .teach-card)::before {
      content: "";
      position: absolute;
      inset: -1px;
      border: 1px solid transparent;
      border-radius: inherit;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(rgb(255 255 255 / 0%) 0 100%) padding-box,
        linear-gradient(rgb(255 255 255 / 0%) 0 100%) border-box,
        var(--gradient-one) border-box,
        var(--gradient-two) border-box,
        var(--gradient-three) border-box,
        var(--gradient-four) border-box,
        var(--gradient-five) border-box,
        var(--gradient-six) border-box,
        var(--gradient-seven) border-box;
      opacity: clamp(0, calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))), 1);
      filter:
        drop-shadow(0 0 1px var(--glow-color-60))
        drop-shadow(0 0 7px var(--glow-color-40))
        drop-shadow(0 0 18px var(--glow-color-20));
      mask-image:
        conic-gradient(
          from var(--cursor-angle) at center,
          black calc(var(--cone-spread) * 1%),
          transparent calc((var(--cone-spread) + 15) * 1%),
          transparent calc((100 - var(--cone-spread) - 15) * 1%),
          black calc((100 - var(--cone-spread)) * 1%)
        );
      transition: opacity .32s ease-out, filter .32s ease-out;
    }

    :where(.unit-tab, .voice, .primary, .ghost, .choice, .rule, .teach-card):not(:hover):not(.glow-sweep)::before {
      opacity: 0;
      transition: opacity .72s ease-in-out;
    }

    :where(.unit-tab, .voice, .primary, .ghost, .choice, .rule, .teach-card):hover {
      box-shadow:
        0 18px 38px rgba(32,38,56,.13),
        0 0 calc(var(--edge-proximity) * .26px) var(--glow-color-20);
    }

    :where(.unit-tab, .voice, .primary, .ghost, .choice, .rule, .teach-card) > * {
      position: relative;
      z-index: 1;
    }

    @keyframes topbarCinematicIn {
      0% { opacity: 0; transform: translate3d(0, -18px, 0); }
      100% { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes avatarCinematicIn {
      0% { opacity: 0; transform: translate3d(-16px, 0, 0) scale(.9); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @keyframes brandTitleReveal {
      0% { opacity: 0; transform: translate3d(-14px, 0, 0) scaleX(.9); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scaleX(1); }
    }

    @keyframes navPillReveal {
      0% { opacity: 0; transform: translate3d(0, -12px, 0) scale(.96); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @keyframes leftPanelReveal {
      0% { opacity: 0; transform: translate3d(-28px, 14px, 0) scale(.985); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @keyframes rightPanelReveal {
      0% { opacity: 0; transform: translate3d(26px, 14px, 0) scale(.985); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @keyframes mascotDepthIn {
      0% { opacity: 0; transform: translate3d(0, 26px, 0) scale(1.035); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @keyframes moduleHeadlineIn {
      0% { opacity: 0; transform: translate3d(0, 22px, 0) scaleX(.94); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scaleX(1); }
    }

    @keyframes titleMaskSweep {
      0% { opacity: 0; transform: translate3d(-18px, 0, 0) scaleX(.88); }
      58% { opacity: 1; transform: translate3d(0, 0, 0) scaleX(1.015); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scaleX(1); }
    }

    @keyframes textSlideIn {
      0% { opacity: 0; transform: translate3d(0, 12px, 0); }
      100% { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    @keyframes mediaReveal {
      0% { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @keyframes staggerCardIn {
      0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @keyframes coachFaceReveal {
      0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
      100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      body:not(.motion-ready) .topbar,
      body:not(.motion-ready) .scene,
      body:not(.motion-ready) .coach {
        opacity: 1;
      }

      body.opening .topbar,
      body.opening .brand .badge,
      body.opening .brand span:last-child,
      body.opening .unit-tab,
      body.motion-ready .scene,
      body.motion-ready .coach,
      body.motion-ready .scene::after,
      body.view-motion .scene-content > div:first-child,
      body.view-motion h1,
      body.view-motion .sub,
      body.view-motion .parent-note,
      body.view-motion .speech,
      body.view-motion .intro-video-card,
      body.view-motion .pattern-row,
      body.view-motion .rule,
      body.view-motion .choice,
      body.view-motion .teach-card,
      body.view-motion .caption,
      body.view-motion .coach .face,
      body.view-motion .question,
      body.view-motion .hint,
      body.view-motion .controls {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
      }
    }

    @media (max-width: 840px) {
      body { overflow: hidden; }
      .game { height: 100dvh; min-height: 100dvh; }
      .topbar {
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 8px 10px;
      }
      .brand {
        font-size: 18px;
        width: auto;
        flex-basis: auto;
        gap: 6px;
      }
      .badge {
        width: 54px;
        height: 42px;
        flex-basis: 54px;
        border-width: 3px;
      }
      .badge::before {
        left: 4px;
        top: 8px;
        width: 9px;
        height: 9px;
        box-shadow: 12px 0 var(--blue);
      }
    .unit-tabs {
      grid-column: 1 / -1;
      order: 3;
      overflow: visible;
    }
    .unit-tab {
      min-height: 32px;
      padding: 0 8px;
      font-size: 11px;
    }
    .unit-tab.active,
    .unit-tab:hover,
    .unit-tab:focus-visible {
      flex-basis: 112px;
    }
      .progress {
        min-width: auto;
        font-size: 13px;
      }
      main {
        align-items: stretch;
        padding: 8px;
        min-height: 0;
      }
      .panel {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 0;
        height: calc(100dvh - 105px);
      }
      .scene {
        min-height: 0;
        padding: 10px;
      }
      .festival {
        height: 15%;
      }
      .scene-content {
        gap: 8px;
        grid-template-rows: auto minmax(0, 1fr) auto;
        min-height: 0;
      }
      h1 {
        font-size: 24px;
      }
      .sub {
        font-size: 14px;
        margin-top: 3px;
      }
      .visual-zone {
        min-height: 0;
        padding-bottom: 0;
        gap: 8px;
        align-content: center;
      }
      .story, .placeholder {
        padding-bottom: 0;
        gap: 8px;
      }
      .parent-note {
        font-size: 12px;
        line-height: 1.35;
        padding: 8px;
      }
      .rule-steps, .teach-clues, .placeholder-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }
      .rule, .teach-card {
        min-height: 58px;
        padding: 6px;
        font-size: 13px;
      }
      .teach-board {
        gap: 8px;
        padding: 10px;
        border-radius: 18px;
      }
      .teach-board-title {
        font-size: 16px;
      }
      .teach-board-title::before {
        width: 8px;
        height: 24px;
      }
      .teach-prompt {
        font-size: 12px;
      }
      .teach-patterns {
        gap: 7px;
      }
      .teach-row {
        grid-template-columns: 64px 1fr;
        gap: 8px;
        padding: 8px;
        border-radius: 14px;
      }
      .teach-row-label {
        font-size: 13px;
      }
      .teach-row-pattern {
        gap: 6px;
      }
      .teach-row .tile,
      .teach-row .num {
        width: 44px;
        min-width: 44px;
        min-height: 42px;
        font-size: 17px;
        border-radius: 12px;
      }
      .teach-row .flag {
        width: 30px;
        height: 38px;
      }
      .teach-row .flag::before {
        height: 38px;
        width: 3px;
      }
      .teach-row .flag::after {
        width: 21px;
        height: 15px;
        left: 8px;
        top: 5px;
      }
      .teach-row .arrow {
        font-size: 18px;
      }
      .math-board {
        gap: 8px;
        padding: 10px;
        border-radius: 18px;
      }
      .math-story {
        gap: 8px;
        padding: 8px 10px;
        font-size: 13px;
      }
      .tree-group {
        gap: 4px;
        min-width: 96px;
      }
      .tree {
        width: 18px;
        height: 30px;
        flex-basis: 18px;
      }
      .tree::before {
        left: 7px;
        bottom: 4px;
        width: 4px;
        height: 15px;
      }
      .tree::after {
        left: 2px;
        bottom: 15px;
        width: 14px;
        height: 15px;
        box-shadow: -2px 4px 0 #4f9c4e, 2px 4px 0 #3d8c47;
      }
      .equation-line {
        gap: 8px;
      }
      .eq-num,
      .eq-box {
        min-width: 48px;
        min-height: 44px;
        border-radius: 12px;
        font-size: 21px;
      }
      .eq-op {
        font-size: 21px;
      }
      .method-cards {
        gap: 6px;
      }
      .method-card {
        min-height: 62px;
        padding: 8px;
        border-radius: 14px;
        font-size: 11px;
      }
      .method-card strong {
        font-size: 15px;
      }
      .compare-line {
        grid-template-columns: 56px 1fr;
        gap: 7px;
        font-size: 12px;
      }
      .compare-trees {
        gap: 4px;
        padding: 5px;
      }
      .block-board {
        gap: 8px;
        padding: 10px;
        border-radius: 18px;
      }
      .block-question {
        gap: 8px;
        font-size: 13px;
      }
      .step-pill {
        padding: 5px 8px;
        font-size: 11px;
      }
      .block-piles {
        gap: 7px;
      }
      .block-pile {
        gap: 6px;
        padding: 8px;
        border-radius: 14px;
      }
      .blocks {
        grid-template-columns: repeat(5, minmax(18px, 1fr));
        gap: 4px;
      }
      .block {
        min-height: 22px;
        border-radius: 7px;
      }
      .block-summary {
        gap: 6px;
      }
      .block-summary-card {
        min-height: 46px;
        padding: 6px;
        border-radius: 12px;
        font-size: 11px;
      }
      .pattern-row {
        min-height: 76px;
        padding-bottom: 0;
        gap: 6px;
        flex-wrap: nowrap;
      }
      .tile {
        width: clamp(38px, 11vw, 52px);
        border-width: 2px;
        font-size: 20px;
      }
      .flag {
        width: 34px;
        height: 50px;
      }
      .flag::before {
        height: 50px;
        width: 3px;
      }
      .flag::after {
        width: 24px;
        height: 18px;
        left: 9px;
      }
      .lantern {
        width: 40px;
        height: 46px;
        border-width: 3px;
        font-size: 13px;
      }
      .triangle {
        border-left-width: 18px;
        border-right-width: 18px;
        border-bottom-width: 36px;
      }
      .num {
        min-width: 44px;
        min-height: 44px;
        padding: 4px 8px;
        font-size: 20px;
        border-width: 2px;
      }
      .arrow {
        font-size: 18px;
      }
      .caption {
        min-height: 32px;
        padding: 5px 8px;
        font-size: 15px;
      }
      .options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }
      .choice, .primary, .ghost, .voice {
        min-height: 42px;
        font-size: 15px;
        border-radius: 8px;
      }
      .coach {
        min-height: 0;
        padding: 8px;
        gap: 7px;
        grid-template-rows: auto auto auto;
      }
      .face {
        grid-template-columns: 88px 1fr;
        gap: 8px;
        padding-bottom: 7px;
      }
      .helper {
        width: 87px;
        height: 87px;
        border-width: 3px;
        border-radius: 0;
      }
      .helper::before, .helper::after {
        top: 18px;
        width: 7px;
        height: 7px;
      }
      .helper::before { left: 10px; }
      .helper::after { right: 10px; }
      .mouth {
        bottom: 9px;
        width: 18px;
        height: 6px;
      }
      .helper.speaking .mouth { height: 12px; }
      .coach-name {
        font-size: 15px;
      }
      .stars {
        min-height: 20px;
        font-size: 12px;
      }
      .progress-track {
        height: 7px;
        margin-top: 5px;
      }
      .voice {
        min-height: 34px;
        margin-top: 2px;
      }
      .question {
        font-size: 17px;
        line-height: 1.25;
      }
      .hint {
        min-height: 44px;
        padding: 8px;
        font-size: 15px;
        line-height: 1.35;
      }
      .controls {
        gap: 6px;
      }
      .scene::after {
        right: 10px;
        top: 72px;
        width: 150px;
        height: 190px;
        opacity: .72;
      }
      .intro-video-card {
        padding: 8px;
        border-radius: 14px;
      }
      .intro-video-card video {
        max-height: 34vh;
        border-radius: 10px;
      }
      .corner-tool, .corner-grid {
        display: none;
      }
    }
    .unit4-count-card {
      min-width: 148px;
      padding: 12px 14px;
    }

    .unit4-count-card .unit4-pile-icons {
      min-height: 50px;
      display: grid;
      place-items: center;
    }

    /* Unit 5 optimization: hide answer labels and make estimate visuals more exploratory. */
    .unit5-bead-pack.loose {
      min-height: 190px;
    }

    .unit5-bead.b1 { transform: translateY(2px); }
    .unit5-bead.b2 { transform: translateX(2px) translateY(-1px); }
    .unit5-bead.b3 { transform: translateX(-2px) translateY(1px); }
    .unit5-bead.b4 { transform: translateY(-2px); }

    .unit5-bead-cloud {
      min-height: 270px;
      position: relative;
      border-radius: 26px;
      background:
        radial-gradient(circle at 22% 26%, rgba(255,212,90,.18), transparent 22%),
        radial-gradient(circle at 72% 62%, rgba(47,143,104,.14), transparent 24%),
        rgba(255,255,255,.68);
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
      overflow: hidden;
    }

    .unit5-bead-cloud.wide {
      min-height: 300px;
    }

    .unit5-bead-cluster {
      position: absolute;
      display: grid;
      grid-template-columns: repeat(5, 18px);
      gap: 6px;
      padding: 10px;
      border-radius: 24px;
      background: rgba(255,255,255,.74);
      box-shadow: 0 12px 24px rgba(36,49,66,.08);
      transform: rotate(var(--tilt, 0deg));
    }

    .unit5-bead-cluster .unit5-bead {
      width: 18px;
      height: 18px;
    }

    .unit5-bead-cluster.c0 { left: 8%; top: 13%; --tilt: -7deg; }
    .unit5-bead-cluster.c1 { left: 38%; top: 8%; --tilt: 5deg; }
    .unit5-bead-cluster.c2 { left: 64%; top: 22%; --tilt: -4deg; }
    .unit5-bead-cluster.c3 { left: 25%; top: 55%; --tilt: 6deg; }
    .unit5-bead-cluster.c4,
    .unit5-bead-cluster.c5,
    .unit5-bead-cluster.c6 {
      opacity: .64;
      filter: saturate(.84);
    }
    .unit5-bead-cluster.c4 { left: 6%; top: 66%; --tilt: 12deg; }
    .unit5-bead-cluster.c5 { left: 70%; top: 68%; --tilt: -11deg; }
    .unit5-bead-cluster.c6 { left: 52%; top: 48%; --tilt: 9deg; }

    .unit5-result-badge {
      font-size: 58px;
    }

    .unit5-cat {
      position: relative;
      background: linear-gradient(145deg, #fff7e1, #f3c06d);
      color: transparent;
      overflow: hidden;
    }

    .unit5-cat::before {
      content: "";
      width: 72px;
      height: 54px;
      border-radius: 52% 48% 48% 52%;
      background:
        radial-gradient(circle at 26% 42%, #232838 0 4px, transparent 5px),
        radial-gradient(circle at 56% 42%, #232838 0 4px, transparent 5px),
        radial-gradient(circle at 42% 58%, #8a4f2c 0 4px, transparent 5px),
        #d58b42;
      box-shadow: inset -8px -10px 0 rgba(0,0,0,.08);
      z-index: 1;
    }

    .unit5-cat::after {
      content: "";
      position: absolute;
      top: 20px;
      width: 58px;
      height: 34px;
      background:
        linear-gradient(135deg, transparent 0 40%, #d58b42 41% 100%) left top / 28px 28px no-repeat,
        linear-gradient(225deg, transparent 0 40%, #d58b42 41% 100%) right top / 28px 28px no-repeat;
      z-index: 0;
    }

    .unit5-cat span {
      position: absolute;
      right: 16px;
      bottom: 18px;
      width: 32px;
      height: 42px;
      border: 8px solid #d58b42;
      border-left: 0;
      border-bottom: 0;
      border-radius: 0 999px 0 0;
      transform: rotate(24deg);
    }

    .unit5-measure-grid {
      min-height: 220px;
      grid-template-rows: 1fr auto;
      gap: 18px;
    }

    .unit5-pencil-row,
    .unit5-grid-row {
      display: grid;
      grid-template-columns: repeat(var(--cells), minmax(48px, 1fr));
    }

    .unit5-pencil-row {
      align-items: center;
      min-height: 72px;
    }

    .unit5-grid-row > span {
      min-height: 86px;
      border: 2px solid rgba(36,49,66,.16);
      background: rgba(255,255,255,.62);
    }

    .unit5-pencil {
      grid-column: 1 / span var(--span);
      grid-row: auto;
    }

    .unit5-cucumber {
      background:
        radial-gradient(circle at 18% 42%, rgba(255,255,255,.24) 0 5px, transparent 6px),
        radial-gradient(circle at 35% 58%, rgba(31,100,42,.28) 0 4px, transparent 5px),
        radial-gradient(circle at 56% 38%, rgba(31,100,42,.25) 0 4px, transparent 5px),
        radial-gradient(circle at 78% 56%, rgba(31,100,42,.25) 0 4px, transparent 5px),
        linear-gradient(90deg, #4c9d3d, #7fca45 58%, #5bab3f);
      box-shadow: inset 0 10px 0 rgba(255,255,255,.16), inset -12px -14px 0 rgba(0,0,0,.08), 0 16px 28px rgba(36,49,66,.12);
      transform: rotate(-2deg);
    }

    .unit5-strawberry {
      position: relative;
      width: 72px;
      height: 82px;
      border-radius: 48% 48% 56% 56%;
      background:
        radial-gradient(circle at 32% 32%, #ffe9a9 0 3px, transparent 4px),
        radial-gradient(circle at 58% 42%, #ffe9a9 0 3px, transparent 4px),
        radial-gradient(circle at 42% 62%, #ffe9a9 0 3px, transparent 4px),
        linear-gradient(160deg, #ff6a67, #d92f42);
      clip-path: polygon(50% 100%, 10% 52%, 15% 18%, 50% 6%, 85% 18%, 90% 52%);
      transform: none;
    }

    .unit5-strawberry::before {
      content: "";
      position: absolute;
      top: -6px;
      left: 18px;
      width: 36px;
      height: 22px;
      background: #3c9a50;
      clip-path: polygon(50% 0, 62% 42%, 100% 24%, 72% 58%, 88% 100%, 50% 72%, 12% 100%, 28% 58%, 0 24%, 38% 42%);
    }

    .unit5-scale {
      grid-template-columns: 1fr 96px 1fr;
      align-items: end;
      gap: 10px;
      padding: 22px 18px 42px;
      position: relative;
    }

    .unit5-scale::before {
      content: "";
      position: absolute;
      left: 13%;
      right: 13%;
      bottom: 74px;
      height: 10px;
      border-radius: 999px;
      background: #b98444;
      box-shadow: 0 8px 16px rgba(36,49,66,.12);
    }

    .unit5-pan {
      transform: translateY(10px);
    }

    .unit5-scale-stand {
      align-self: stretch;
      display: grid;
      place-items: end center;
      position: relative;
      min-height: 220px;
    }

    .unit5-scale-stand::before {
      content: "";
      width: 18px;
      height: 150px;
      border-radius: 999px 999px 0 0;
      background: #b98444;
    }

    .unit5-scale-stand::after {
      content: "";
      position: absolute;
      bottom: -18px;
      width: 112px;
      height: 30px;
      border-radius: 50% 50% 16px 16px;
      background: #d5a15e;
    }

    .unit5-scale-stand span {
      position: absolute;
      bottom: 132px;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      background: #ffd45a;
      border: 6px solid #b98444;
      z-index: 1;
    }

    .unit5-exchange b {
      color: #2f8f68;
      font-size: 32px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.88);
    }

    .unit5-question-herd {
      display: grid;
      gap: 12px;
      place-items: center;
    }

    .unit5-question-herd > span {
      width: 74px;
      height: 74px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: #2f8f68;
      color: #fff;
      font-size: 42px;
      font-weight: 1000;
      box-shadow: 0 12px 24px rgba(36,49,66,.12);
    }

    @media (max-width: 760px) {
      .unit5-bead-cloud,
      .unit5-bead-cloud.wide {
        min-height: 220px;
      }

      .unit5-bead-cluster {
        grid-template-columns: repeat(5, 12px);
        gap: 4px;
        padding: 7px;
      }

      .unit5-bead-cluster .unit5-bead {
        width: 12px;
        height: 12px;
      }

      .unit5-measure-grid {
        min-height: 154px;
        gap: 10px;
      }

      .unit5-pencil-row,
      .unit5-grid-row {
        grid-template-columns: repeat(var(--cells), minmax(32px, 1fr));
      }

      .unit5-grid-row > span {
        min-height: 58px;
      }

      .unit5-scale {
        grid-template-columns: 1fr;
        padding-bottom: 18px;
      }

      .unit5-scale::before,
      .unit5-scale-stand {
        display: none;
      }

      .unit5-strawberry {
        width: 54px;
        height: 62px;
      }
    }

    /* Unit 5 generated image assets. */
    .unit5-img-asset {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
      mix-blend-mode: multiply;
    }

    .unit5-cat {
      background: rgba(255,255,255,.76);
      color: transparent;
      overflow: hidden;
      padding: 8px;
    }

    .unit5-cat::before,
    .unit5-cat::after,
    .unit5-cat span {
      display: none;
    }

    .unit5-cat .cat-img {
      width: 96px;
      height: 96px;
      margin: auto;
    }

    .unit5-food {
      background: none !important;
      box-shadow: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
    }

    .unit5-food .food-img {
      width: 86px;
      height: 86px;
      filter: drop-shadow(0 12px 16px rgba(36,49,66,.12));
    }

    .unit5-food.melon .food-img {
      width: 126px;
      height: 96px;
    }

    .unit5-food.melon.big .food-img {
      width: 178px;
      height: 126px;
    }

    .unit5-food em {
      position: absolute;
      left: 50%;
      bottom: -18px;
      transform: translateX(-50%);
      font-style: normal;
      color: #425168;
      font-size: 16px;
      font-weight: 1000;
      white-space: nowrap;
    }

    .unit5-cucumber {
      display: grid;
      place-items: center;
      background: none !important;
      box-shadow: none !important;
      transform: none;
    }

    .unit5-cucumber .cucumber-img {
      width: min(540px, 96%);
      height: 112px;
      filter: drop-shadow(0 16px 18px rgba(36,49,66,.13));
    }

    .unit5-strawberry {
      display: grid;
      place-items: center;
      background: none !important;
      clip-path: none;
      box-shadow: none;
    }

    .unit5-strawberry::before {
      display: none;
    }

    .unit5-strawberry .strawberry-img {
      width: 86px;
      height: 86px;
      filter: drop-shadow(0 12px 16px rgba(36,49,66,.12));
    }

    .unit5-animal {
      background: none !important;
      box-shadow: none;
      width: 84px;
      height: 84px;
    }

    .unit5-animal .animal-img {
      filter: drop-shadow(0 12px 16px rgba(36,49,66,.12));
    }

    @media (max-width: 760px) {
      .unit5-cat .cat-img {
        width: 68px;
        height: 68px;
      }

      .unit5-food .food-img {
        width: 58px;
        height: 58px;
      }

      .unit5-food.melon .food-img,
      .unit5-food.melon.big .food-img {
        width: 86px;
        height: 66px;
      }

      .unit5-cucumber .cucumber-img {
        height: 78px;
      }

      .unit5-strawberry .strawberry-img {
        width: 62px;
        height: 62px;
      }

      .unit5-animal {
        width: 62px;
        height: 62px;
      }
    }

    /* Unit 5 level 3 refinement: separate rulers and enforce reference proportions. */
    .unit5-length-stage .unit5-measure-grid {
      min-height: 260px;
      align-content: center;
      gap: 34px;
      padding-top: 28px;
      padding-bottom: 28px;
    }

    .unit5-length-stage .unit5-pencil-row {
      min-height: 86px;
      align-items: end;
    }

    .unit5-length-stage .unit5-grid-row {
      margin-top: 8px;
    }

    .unit5-length-stage .unit5-pencil {
      align-self: end;
      transform: translateY(-8px);
    }

    .unit5-fruit-length {
      gap: 34px;
      padding: 26px 22px;
    }

    .unit5-cucumber {
      width: min(660px, 98%);
      min-height: 118px;
    }

    .unit5-cucumber .cucumber-img {
      width: min(640px, 98%);
      height: 118px;
      object-fit: fill;
      transform: scaleX(1.28);
      transform-origin: center;
    }

    .unit5-strawberry-row {
      width: min(660px, 98%);
      justify-content: flex-start;
      padding-left: 34px;
      border-top: 3px dashed rgba(47,143,104,.18);
      padding-top: 18px;
    }

    .unit5-strawberry,
    .unit5-strawberry .strawberry-img {
      width: 72px;
      height: 72px;
    }

    .unit5-strawberry .strawberry-img {
      object-fit: contain;
    }

    @media (max-width: 760px) {
      .unit5-length-stage .unit5-measure-grid {
        min-height: 190px;
        gap: 22px;
      }

      .unit5-cucumber {
        min-height: 82px;
      }

      .unit5-cucumber .cucumber-img {
        height: 82px;
        transform: scaleX(1.18);
      }

      .unit5-strawberry-row {
        padding-left: 18px;
      }

      .unit5-strawberry,
      .unit5-strawberry .strawberry-img {
        width: 54px;
        height: 54px;
      }
    }

    /* Unit 5 level 3 hard layout fix: pencil on its own row, grid below. */
    .unit5-length-stage .unit5-measure-grid {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      min-height: 285px;
      gap: 42px;
    }

    .unit5-length-stage .unit5-pencil-row {
      display: block;
      min-height: 58px;
      position: relative;
    }

    .unit5-length-stage .unit5-pencil {
      width: calc((100% / var(--cells)) * var(--span));
      min-width: 170px;
      max-width: 620px;
      transform: none;
      margin-left: 0;
    }

    .unit5-length-stage .unit5-grid-row {
      display: grid;
      grid-template-columns: repeat(var(--cells), minmax(48px, 1fr));
      margin-top: 0;
    }

    @media (max-width: 760px) {
      .unit5-length-stage .unit5-measure-grid {
        min-height: 210px;
        gap: 26px;
      }

      .unit5-length-stage .unit5-pencil {
        min-width: 96px;
      }
    }

    /* Unit 5 built-in drawings: stop using generated PNG assets. */
    .unit5-img-asset {
      display: none !important;
    }

    .unit5-cat {
      position: relative;
      min-height: 96px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, #fff7e1, #f3c06d) !important;
      color: transparent;
      overflow: hidden;
      padding: 0;
    }

    .unit5-cat::before {
      content: "";
      display: block !important;
      width: 76px;
      height: 56px;
      border-radius: 52% 48% 48% 52%;
      background:
        radial-gradient(circle at 27% 43%, #232838 0 4px, transparent 5px),
        radial-gradient(circle at 58% 43%, #232838 0 4px, transparent 5px),
        radial-gradient(circle at 44% 60%, #8a4f2c 0 4px, transparent 5px),
        linear-gradient(135deg, #e79b4c, #c97734);
      box-shadow: inset -8px -10px 0 rgba(0,0,0,.08), 0 10px 16px rgba(36,49,66,.1);
      z-index: 1;
    }

    .unit5-cat::after {
      content: "";
      display: block !important;
      position: absolute;
      top: 18px;
      width: 64px;
      height: 36px;
      background:
        linear-gradient(135deg, transparent 0 40%, #d58b42 41% 100%) left top / 30px 30px no-repeat,
        linear-gradient(225deg, transparent 0 40%, #d58b42 41% 100%) right top / 30px 30px no-repeat;
      z-index: 0;
    }

    .unit5-cat span {
      display: block !important;
      position: absolute;
      right: 14px;
      bottom: 16px;
      width: 34px;
      height: 46px;
      border: 8px solid #d58b42;
      border-left: 0;
      border-bottom: 0;
      border-radius: 0 999px 0 0;
      transform: rotate(24deg);
    }

    .unit5-food {
      position: relative;
      display: inline-grid;
      place-items: center;
      padding: 0 !important;
      color: #232838;
      font-size: 18px;
      font-weight: 1000;
    }

    .unit5-food.apple {
      width: 64px;
      height: 64px;
      border-radius: 50% 50% 56% 56%;
      background: radial-gradient(circle at 35% 26%, #fff6, transparent 18%), linear-gradient(145deg, #ff6a67, #d93642) !important;
      box-shadow: inset -6px -9px 0 rgba(0,0,0,.12), 0 12px 18px rgba(36,49,66,.1) !important;
    }

    .unit5-food.apple::after {
      content: "";
      position: absolute;
      top: -10px;
      right: 12px;
      width: 22px;
      height: 13px;
      border-radius: 999px 999px 999px 0;
      background: #4d9b5e;
      transform: rotate(-28deg);
    }

    .unit5-food.melon {
      min-width: 118px;
      min-height: 78px;
      padding: 0 18px !important;
      border-radius: 999px;
      background:
        repeating-linear-gradient(100deg, rgba(121,112,43,.16) 0 8px, transparent 8px 15px),
        radial-gradient(circle at 32% 30%, rgba(255,255,255,.25), transparent 22%),
        linear-gradient(145deg, #e5da6c, #bfb44f) !important;
      box-shadow: inset -8px -10px 0 rgba(0,0,0,.08), 0 14px 22px rgba(36,49,66,.12) !important;
    }

    .unit5-food.melon.big {
      min-width: 184px;
      min-height: 104px;
    }

    .unit5-food em {
      position: absolute;
      left: 50%;
      bottom: -22px;
      transform: translateX(-50%);
      font-style: normal;
      color: #425168;
      font-size: 16px;
      font-weight: 1000;
      white-space: nowrap;
    }

    .unit5-cucumber {
      width: min(660px, 98%);
      min-height: 118px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 18% 42%, rgba(255,255,255,.24) 0 5px, transparent 6px),
        radial-gradient(circle at 35% 58%, rgba(31,100,42,.28) 0 4px, transparent 5px),
        radial-gradient(circle at 56% 38%, rgba(31,100,42,.25) 0 4px, transparent 5px),
        radial-gradient(circle at 78% 56%, rgba(31,100,42,.25) 0 4px, transparent 5px),
        linear-gradient(90deg, #4c9d3d, #7fca45 58%, #5bab3f) !important;
      box-shadow: inset 0 10px 0 rgba(255,255,255,.16), inset -12px -14px 0 rgba(0,0,0,.08), 0 16px 28px rgba(36,49,66,.12) !important;
      transform: none;
    }

    .unit5-strawberry {
      display: grid;
      place-items: center;
      position: relative;
      width: 72px;
      height: 82px;
      border-radius: 48% 48% 56% 56%;
      background:
        radial-gradient(circle at 32% 32%, #ffe9a9 0 3px, transparent 4px),
        radial-gradient(circle at 58% 42%, #ffe9a9 0 3px, transparent 4px),
        radial-gradient(circle at 42% 62%, #ffe9a9 0 3px, transparent 4px),
        linear-gradient(160deg, #ff6a67, #d92f42) !important;
      clip-path: polygon(50% 100%, 10% 52%, 15% 18%, 50% 6%, 85% 18%, 90% 52%);
      box-shadow: 0 12px 22px rgba(36,49,66,.1) !important;
    }

    .unit5-strawberry::before {
      content: "";
      display: block !important;
      position: absolute;
      top: -6px;
      left: 18px;
      width: 36px;
      height: 22px;
      background: #3c9a50;
      clip-path: polygon(50% 0, 62% 42%, 100% 24%, 72% 58%, 88% 100%, 50% 72%, 12% 100%, 28% 58%, 0 24%, 38% 42%);
    }

    .unit5-animal {
      position: relative;
      display: grid;
      place-items: center;
      width: 76px;
      height: 70px;
      border-radius: 999px;
      box-shadow: 0 12px 22px rgba(36,49,66,.1) !important;
    }

    .unit5-animal.pig {
      background:
        radial-gradient(circle at 38% 42%, #232838 0 3px, transparent 4px),
        radial-gradient(circle at 60% 42%, #232838 0 3px, transparent 4px),
        radial-gradient(ellipse at 50% 58%, #ef7f98 0 12px, transparent 13px),
        linear-gradient(145deg, #ffb2c0, #f38aa0) !important;
    }

    .unit5-animal.pig::before {
      content: "";
      position: absolute;
      top: -6px;
      left: 14px;
      width: 48px;
      height: 24px;
      background:
        radial-gradient(circle at 16% 45%, #ffb2c0 0 12px, transparent 13px),
        radial-gradient(circle at 84% 45%, #ffb2c0 0 12px, transparent 13px);
    }

    .unit5-animal.pig::after {
      content: "";
      position: absolute;
      right: -12px;
      bottom: 20px;
      width: 24px;
      height: 24px;
      border: 5px solid #f38aa0;
      border-left: 0;
      border-bottom: 0;
      border-radius: 50%;
    }

    .unit5-animal.sheep {
      background:
        radial-gradient(circle at 32% 45%, #232838 0 3px, transparent 4px),
        radial-gradient(circle at 52% 45%, #232838 0 3px, transparent 4px),
        radial-gradient(circle at 18% 32%, #fff 0 16px, transparent 17px),
        radial-gradient(circle at 42% 22%, #fff 0 18px, transparent 19px),
        radial-gradient(circle at 66% 34%, #fff 0 16px, transparent 17px),
        linear-gradient(145deg, #fff7d8, #ecdca6) !important;
    }

    .unit5-animal.sheep::before {
      content: "";
      position: absolute;
      left: 8px;
      bottom: -12px;
      width: 50px;
      height: 16px;
      background:
        linear-gradient(90deg, #8b7045 0 8px, transparent 8px 20px, #8b7045 20px 28px, transparent 28px 40px, #8b7045 40px 48px);
    }

    @media (max-width: 760px) {
      .unit5-cat {
        min-height: 78px;
      }

      .unit5-cat::before {
        width: 54px;
        height: 42px;
      }

      .unit5-food.apple {
        width: 48px;
        height: 48px;
      }

      .unit5-food.melon,
      .unit5-food.melon.big {
        min-width: 86px;
        min-height: 62px;
      }

      .unit5-cucumber {
        min-height: 82px;
      }

      .unit5-strawberry {
        width: 54px;
        height: 62px;
      }

      .unit5-animal {
        width: 58px;
        height: 54px;
      }
    }

    /* Unit 5 level 3 proportion tweak: make the strawberry reference larger. */
    .unit5-fruit-length .unit5-strawberry {
      width: 112px;
      height: 128px;
    }

    .unit5-fruit-length .unit5-strawberry::before {
      top: -8px;
      left: 30px;
      width: 54px;
      height: 32px;
    }

    @media (max-width: 760px) {
      .unit5-fruit-length .unit5-strawberry {
        width: 78px;
        height: 88px;
      }

      .unit5-fruit-length .unit5-strawberry::before {
        top: -6px;
        left: 20px;
        width: 38px;
        height: 23px;
      }
    }

    /* Unit 5 polish: rounder fruit and clearer animals. */
    .unit5-food.apple {
      width: 72px;
      height: 76px;
      border-radius: 48% 52% 54% 56% / 46% 46% 60% 58%;
      background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,.58) 0 10px, transparent 11px),
        radial-gradient(circle at 54% 66%, rgba(165,22,38,.18) 0 18px, transparent 19px),
        linear-gradient(145deg, #ff7770 0%, #e83e4b 58%, #c72439 100%) !important;
      box-shadow: inset -7px -11px 0 rgba(0,0,0,.13), 0 14px 20px rgba(36,49,66,.12) !important;
    }

    .unit5-food.apple::before {
      content: "";
      position: absolute;
      top: -6px;
      left: 33px;
      width: 9px;
      height: 18px;
      border-radius: 999px;
      background: #6b4a2d;
      transform: rotate(10deg);
    }

    .unit5-food.apple::after {
      top: -9px;
      right: 12px;
      width: 26px;
      height: 15px;
      background: #4da461;
    }

    .unit5-food.melon {
      min-width: 130px;
      min-height: 92px;
      border-radius: 52% 48% 50% 50% / 56% 56% 44% 44%;
      background:
        radial-gradient(ellipse at 32% 30%, rgba(255,255,255,.36) 0 18px, transparent 19px),
        repeating-radial-gradient(ellipse at center, rgba(122,113,45,.2) 0 2px, transparent 3px 10px),
        linear-gradient(145deg, #eadf72, #c9bd55 70%, #aa9f43) !important;
      box-shadow: inset -10px -13px 0 rgba(0,0,0,.09), 0 15px 24px rgba(36,49,66,.12) !important;
    }

    .unit5-food.melon.big {
      min-width: 196px;
      min-height: 128px;
    }

    .unit5-pan {
      overflow: visible;
    }

    .unit5-animal.pig {
      width: 88px;
      height: 66px;
      border-radius: 56% 48% 52% 50% / 54% 54% 46% 46%;
      background:
        radial-gradient(circle at 34% 38%, #232838 0 3px, transparent 4px),
        radial-gradient(circle at 56% 38%, #232838 0 3px, transparent 4px),
        radial-gradient(ellipse at 46% 56%, #f47f9b 0 13px, transparent 14px),
        linear-gradient(145deg, #ffb8c7, #f28aa1 78%, #dc6d87) !important;
      box-shadow: inset -8px -9px 0 rgba(0,0,0,.08), 0 12px 22px rgba(36,49,66,.1) !important;
    }

    .unit5-animal.pig::before {
      top: -10px;
      left: 13px;
      width: 54px;
      height: 28px;
      background:
        radial-gradient(circle at 15% 56%, #ffb8c7 0 14px, transparent 15px),
        radial-gradient(circle at 85% 56%, #ffb8c7 0 14px, transparent 15px);
    }

    .unit5-animal.pig::after {
      right: -15px;
      bottom: 22px;
      width: 28px;
      height: 28px;
      border-width: 5px;
      border-color: #f28aa1;
    }

    .unit5-animal.sheep {
      width: 92px;
      height: 70px;
      border-radius: 56% 48% 50% 52% / 52% 56% 48% 48%;
      background:
        radial-gradient(circle at 36% 45%, #232838 0 3px, transparent 4px),
        radial-gradient(circle at 53% 45%, #232838 0 3px, transparent 4px),
        radial-gradient(circle at 16% 34%, #fff 0 17px, transparent 18px),
        radial-gradient(circle at 36% 22%, #fff 0 20px, transparent 21px),
        radial-gradient(circle at 59% 26%, #fff 0 19px, transparent 20px),
        radial-gradient(circle at 77% 42%, #fff 0 16px, transparent 17px),
        linear-gradient(145deg, #fff9df, #eadba7) !important;
      box-shadow: inset -7px -9px 0 rgba(0,0,0,.07), 0 12px 22px rgba(36,49,66,.1) !important;
    }

    .unit5-animal.sheep::before {
      left: 12px;
      bottom: -13px;
      width: 58px;
      height: 18px;
      background:
        linear-gradient(90deg, #8b7045 0 8px, transparent 8px 23px, #8b7045 23px 31px, transparent 31px 46px, #8b7045 46px 54px);
    }

    .unit5-share-list span {
      min-width: 174px;
      min-height: 116px;
      padding: 12px 14px;
    }

    .unit5-share-list .unit5-animal-group {
      gap: 14px;
    }

    @media (max-width: 760px) {
      .unit5-food.apple {
        width: 54px;
        height: 58px;
      }

      .unit5-food.melon,
      .unit5-food.melon.big {
        min-width: 96px;
        min-height: 70px;
      }

      .unit5-animal.pig,
      .unit5-animal.sheep {
        width: 64px;
        height: 52px;
      }

      .unit5-share-list span {
        min-width: 124px;
        min-height: 86px;
      }
    }

    /* Unit 5 user-provided replacement images: cat, small melon, apple. */
    .unit5-local-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
      mix-blend-mode: multiply;
    }

    .unit5-cat.user-img-cat {
      background: rgba(255,255,255,.76) !important;
      padding: 6px;
      color: transparent;
    }

    .unit5-cat.user-img-cat::before,
    .unit5-cat.user-img-cat::after,
    .unit5-cat.user-img-cat span {
      display: none !important;
    }

    .unit5-cat.user-img-cat .cat-img {
      width: 104px;
      height: 104px;
      margin: auto;
      filter: drop-shadow(0 12px 18px rgba(36,49,66,.12));
    }

    .unit5-food.apple,
    .unit5-food.melon:not(.big) {
      background: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
    }

    .unit5-food.apple::before,
    .unit5-food.apple::after {
      display: none !important;
    }

    .unit5-food.apple .apple-img {
      width: 82px;
      height: 82px;
      filter: drop-shadow(0 12px 18px rgba(36,49,66,.12));
    }

    .unit5-food.melon:not(.big) .melon-img {
      width: 118px;
      height: 118px;
      filter: drop-shadow(0 12px 18px rgba(36,49,66,.12));
    }

    @media (max-width: 760px) {
      .unit5-cat.user-img-cat .cat-img {
        width: 72px;
        height: 72px;
      }

      .unit5-food.apple .apple-img {
        width: 56px;
        height: 56px;
      }

      .unit5-food.melon:not(.big) .melon-img {
        width: 76px;
        height: 76px;
      }
    }

    /* Unit 5 user cutout replacements: big melon, apple, cat, pig, sheep, small melon. */
    .unit5-local-img {
      mix-blend-mode: normal !important;
    }

    .unit5-food.user-img-food {
      background: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      min-width: auto;
      min-height: auto;
    }

    .unit5-food.user-img-food::before,
    .unit5-food.user-img-food::after {
      display: none !important;
    }

    .unit5-food.user-img-food .apple-img {
      width: 86px;
      height: 86px;
      filter: drop-shadow(0 12px 18px rgba(36,49,66,.12));
    }

    .unit5-food.user-img-food .small-melon-img {
      width: 120px;
      height: 120px;
      filter: drop-shadow(0 12px 18px rgba(36,49,66,.12));
    }

    .unit5-food.user-img-food .big-melon-img {
      width: 178px;
      height: 178px;
      filter: drop-shadow(0 14px 20px rgba(36,49,66,.13));
    }

    .unit5-animal.user-img-animal {
      background: none !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      width: 96px;
      height: 96px;
    }

    .unit5-animal.user-img-animal::before,
    .unit5-animal.user-img-animal::after {
      display: none !important;
    }

    .unit5-animal.user-img-animal .animal-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 12px 18px rgba(36,49,66,.12));
    }

    .unit5-share-list span {
      min-width: 196px;
      min-height: 132px;
    }

    @media (max-width: 760px) {
      .unit5-food.user-img-food .apple-img {
        width: 58px;
        height: 58px;
      }

      .unit5-food.user-img-food .small-melon-img {
        width: 78px;
        height: 78px;
      }

      .unit5-food.user-img-food .big-melon-img {
        width: 112px;
        height: 112px;
      }

      .unit5-animal.user-img-animal {
        width: 68px;
        height: 68px;
      }

      .unit5-share-list span {
        min-width: 138px;
        min-height: 96px;
      }
    }

    /* Unit 5 level 5 layout fix: keep exchange diagrams centered and logical. */
    .unit5-board .unit5-exchange {
      min-height: 300px;
      overflow: hidden;
      align-self: stretch;
    }

    .unit5-exchange.relation {
      grid-template-columns: minmax(170px, .8fr) auto minmax(240px, 1fr);
      justify-items: center;
      align-items: center;
      padding: 28px 32px;
    }

    .unit5-exchange.stack {
      grid-template-columns: minmax(260px, .72fr) auto minmax(440px, 1.28fr);
      justify-items: center;
      align-items: center;
      padding: 26px 30px;
    }

    .unit5-exchange.total {
      display: grid;
      grid-template-columns: 1fr auto;
      justify-items: center;
      align-items: center;
      gap: 24px;
      padding: 26px 30px;
    }

    .unit5-exchange .unit5-animal-group {
      max-width: 100%;
    }

    .unit5-exchange.relation > .unit5-animal-group:first-child {
      justify-self: end;
    }

    .unit5-exchange.relation > .unit5-animal-group:last-child {
      justify-self: start;
    }

    .unit5-exchange.stack > .unit5-animal-group {
      justify-self: end;
    }

    .unit5-share-list {
      align-items: center;
    }

    .unit5-share-card {
      min-width: 188px;
      min-height: 128px;
      display: grid;
      place-items: center;
      padding: 12px 14px;
      border-radius: 22px;
      background: rgba(255,255,255,.9);
      box-shadow: 0 12px 24px rgba(36,49,66,.08);
    }

    .unit5-share-card .unit5-animal-group {
      gap: 12px;
    }

    .unit5-total-question {
      width: 86px;
      height: 86px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: #2f8f68;
      color: #fff;
      font-size: 52px;
      font-weight: 1000;
      box-shadow: 0 14px 28px rgba(47,143,104,.24);
    }

    @media (max-width: 760px) {
      .unit5-exchange.relation,
      .unit5-exchange.stack,
      .unit5-exchange.total {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: 260px;
        padding: 14px;
      }

      .unit5-exchange.relation > .unit5-animal-group:first-child,
      .unit5-exchange.relation > .unit5-animal-group:last-child,
      .unit5-exchange.stack > .unit5-animal-group {
        justify-self: center;
      }

      .unit5-share-card {
        min-width: 132px;
        min-height: 92px;
      }

      .unit5-total-question {
        width: 62px;
        height: 62px;
        font-size: 38px;
      }
    }

    /* Unit 5 balance images should not show fruit name labels inside the picture area. */
    .unit5-scale .unit5-food em {
      display: none !important;
    }

    /* Unit 5 level 5 final layout tuning. */
    .unit5-board .unit5-exchange {
      min-height: 270px;
      overflow: visible;
      align-self: center;
    }

    .unit5-exchange.relation,
    .unit5-exchange.stack,
    .unit5-exchange.total {
      max-height: 320px;
      align-content: center;
    }

    .unit5-exchange.relation {
      grid-template-columns: minmax(180px, .8fr) 72px minmax(220px, 1fr);
      gap: 18px;
    }

    .unit5-exchange.stack {
      grid-template-columns: minmax(260px, .82fr) 64px minmax(430px, 1.18fr);
      gap: 16px;
    }

    .unit5-exchange.total {
      grid-template-columns: minmax(0, 1fr) 86px;
      gap: 18px;
    }

    .unit5-exchange .unit5-animal.pig.user-img-animal {
      width: 128px;
      height: 128px;
    }

    .unit5-exchange.stack > .unit5-animal-group .unit5-animal.pig.user-img-animal {
      width: 112px;
      height: 112px;
    }

    .unit5-exchange .unit5-animal.sheep.user-img-animal {
      width: 66px;
      height: 66px;
    }

    .unit5-exchange.relation > .unit5-animal-group:last-child .unit5-animal.sheep.user-img-animal {
      width: 72px;
      height: 72px;
    }

    .unit5-exchange.stack .unit5-share-list,
    .unit5-exchange.total .unit5-share-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(128px, 1fr));
      gap: 10px;
      width: min(500px, 100%);
      justify-content: center;
      align-items: center;
    }

    .unit5-exchange.stack .unit5-share-card,
    .unit5-exchange.total .unit5-share-card {
      min-width: 0;
      min-height: 92px;
      padding: 8px 10px;
      border-radius: 18px;
    }

    .unit5-exchange.stack .unit5-share-card .unit5-animal-group,
    .unit5-exchange.total .unit5-share-card .unit5-animal-group {
      gap: 6px;
      flex-wrap: nowrap;
    }

    @media (max-width: 760px) {
      .unit5-exchange.relation,
      .unit5-exchange.stack,
      .unit5-exchange.total {
        max-height: none;
      }

      .unit5-exchange .unit5-animal.pig.user-img-animal,
      .unit5-exchange.stack > .unit5-animal-group .unit5-animal.pig.user-img-animal {
        width: 82px;
        height: 82px;
      }

      .unit5-exchange .unit5-animal.sheep.user-img-animal,
      .unit5-exchange.relation > .unit5-animal-group:last-child .unit5-animal.sheep.user-img-animal {
        width: 48px;
        height: 48px;
      }

      .unit5-exchange.stack .unit5-share-list,
      .unit5-exchange.total .unit5-share-list {
        grid-template-columns: repeat(3, minmax(86px, 1fr));
        width: 100%;
      }

      .unit5-exchange.stack .unit5-share-card,
      .unit5-exchange.total .unit5-share-card {
        min-height: 68px;
        padding: 6px;
      }

      .unit5-dev-jump {
        left: 10px;
        right: 10px;
        bottom: 10px;
        justify-content: center;
        flex-wrap: wrap;
      }
    }

/* Unit 5 level 5 overflow fix: shrink exchange animals and cards. */
.unit5-board .unit5-exchange {
  min-height: 230px;
  max-height: 255px;
  padding: 14px 18px;
  overflow: hidden;
}

.unit5-exchange.relation {
  grid-template-columns: minmax(130px, .75fr) 52px minmax(170px, 1fr);
  gap: 12px;
}

.unit5-exchange.stack {
  grid-template-columns: minmax(180px, .68fr) 50px minmax(300px, 1.32fr);
  gap: 10px;
}

.unit5-exchange.total {
  grid-template-columns: minmax(0, 1fr) 62px;
  gap: 12px;
}

.unit5-exchange .unit5-animal.pig.user-img-animal,
.unit5-exchange.stack > .unit5-animal-group .unit5-animal.pig.user-img-animal {
  width: 86px;
  height: 86px;
}

.unit5-exchange.relation .unit5-animal.pig.user-img-animal {
  width: 94px;
  height: 94px;
}

.unit5-exchange .unit5-animal.sheep.user-img-animal,
.unit5-exchange.relation > .unit5-animal-group:last-child .unit5-animal.sheep.user-img-animal {
  width: 42px;
  height: 42px;
}

.unit5-exchange.stack .unit5-share-list,
.unit5-exchange.total .unit5-share-list {
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  width: min(340px, 100%);
  gap: 6px;
}

.unit5-exchange.stack .unit5-share-card,
.unit5-exchange.total .unit5-share-card {
  min-height: 64px;
  padding: 5px 6px;
  border-radius: 14px;
}

.unit5-exchange.stack .unit5-share-card .unit5-animal-group,
.unit5-exchange.total .unit5-share-card .unit5-animal-group {
  gap: 2px;
}

.unit5-total-question {
  width: 56px;
  height: 56px;
  font-size: 34px;
}

@media (max-width: 760px) {
  .unit5-board .unit5-exchange {
    min-height: 210px;
    max-height: 235px;
    padding: 12px;
  }

  .unit5-exchange .unit5-animal.pig.user-img-animal,
  .unit5-exchange.stack > .unit5-animal-group .unit5-animal.pig.user-img-animal,
  .unit5-exchange.relation .unit5-animal.pig.user-img-animal {
    width: 70px;
    height: 70px;
  }

  .unit5-exchange .unit5-animal.sheep.user-img-animal,
  .unit5-exchange.relation > .unit5-animal-group:last-child .unit5-animal.sheep.user-img-animal {
    width: 34px;
    height: 34px;
  }

  .unit5-exchange.stack .unit5-share-list,
  .unit5-exchange.total .unit5-share-list {
    grid-template-columns: repeat(3, minmax(68px, 1fr));
    width: min(260px, 100%);
  }
}

/* Unit 5 level 5 step 3: keep three sheep pairs and question mark separated. */
.unit5-exchange.total {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.unit5-exchange.total .unit5-share-list {
  display: flex;
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.unit5-exchange.total .unit5-share-card {
  flex: 0 0 98px;
  width: 98px;
  min-width: 98px;
  min-height: 70px;
  padding: 6px 4px;
  overflow: visible;
}

.unit5-exchange.total .unit5-share-card .unit5-animal-group {
  justify-content: center;
  gap: 1px;
  width: 100%;
}

.unit5-exchange.total .unit5-animal.sheep.user-img-animal {
  width: 36px;
  height: 36px;
}

.unit5-exchange.total .unit5-total-question {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  .unit5-exchange.total {
    gap: 8px;
    max-width: 100%;
  }

  .unit5-exchange.total .unit5-share-list {
    gap: 5px;
  }

  .unit5-exchange.total .unit5-share-card {
    flex-basis: 76px;
    width: 76px;
    min-width: 76px;
    min-height: 58px;
    padding: 4px 2px;
  }

  .unit5-exchange.total .unit5-animal.sheep.user-img-animal {
    width: 28px;
    height: 28px;
  }

  .unit5-exchange.total .unit5-total-question {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    font-size: 28px;
  }
}

/* Unit 5 level 5: rebuild all exchange views as vertical two-line layouts. */
.unit5-board .unit5-exchange.relation,
.unit5-board .unit5-exchange.stack,
.unit5-board .unit5-exchange.total {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
  grid-template-columns: none !important;
  width: min(760px, 100%);
  max-width: 760px;
  min-height: 360px;
  max-height: 430px;
  margin-left: auto;
  margin-right: auto;
  padding: 22px 28px;
  gap: 14px;
  overflow: hidden;
}

.unit5-board .unit5-exchange.relation b,
.unit5-board .unit5-exchange.stack b {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  font-size: 30px;
  line-height: 54px;
}

.unit5-board .unit5-exchange.relation > .unit5-animal-group,
.unit5-board .unit5-exchange.stack > .unit5-animal-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 100%;
  flex-wrap: nowrap;
}

.unit5-board .unit5-exchange.relation .unit5-animal.pig.user-img-animal {
  width: 104px;
  height: 104px;
}

.unit5-board .unit5-exchange.stack > .unit5-animal-group .unit5-animal.pig.user-img-animal {
  width: 82px;
  height: 82px;
}

.unit5-board .unit5-exchange.relation .unit5-animal.sheep.user-img-animal {
  width: 58px;
  height: 58px;
}

.unit5-board .unit5-exchange.stack .unit5-share-list,
.unit5-board .unit5-exchange.total .unit5-share-list {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 430px;
  gap: 12px;
  flex: 0 0 auto;
}

.unit5-board .unit5-exchange.stack .unit5-share-card,
.unit5-board .unit5-exchange.total .unit5-share-card {
  flex: 0 0 118px;
  width: 118px;
  min-width: 118px;
  min-height: 78px;
  padding: 7px 6px;
  border-radius: 16px;
  overflow: visible;
}

.unit5-board .unit5-exchange.stack .unit5-share-card .unit5-animal-group,
.unit5-board .unit5-exchange.total .unit5-share-card .unit5-animal-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  width: 100%;
}

.unit5-board .unit5-exchange.stack .unit5-share-card .unit5-animal.sheep.user-img-animal,
.unit5-board .unit5-exchange.total .unit5-share-card .unit5-animal.sheep.user-img-animal {
  width: 38px;
  height: 38px;
}

.unit5-board .unit5-exchange.total .unit5-total-question {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  font-size: 40px;
  position: static;
}

@media (max-width: 760px) {
  .unit5-board .unit5-exchange.relation,
  .unit5-board .unit5-exchange.stack,
  .unit5-board .unit5-exchange.total {
    min-height: 320px;
    max-height: 390px;
    padding: 16px 12px;
    gap: 10px;
  }

  .unit5-board .unit5-exchange.relation .unit5-animal.pig.user-img-animal,
  .unit5-board .unit5-exchange.stack > .unit5-animal-group .unit5-animal.pig.user-img-animal {
    width: 68px;
    height: 68px;
  }

  .unit5-board .unit5-exchange.relation .unit5-animal.sheep.user-img-animal,
  .unit5-board .unit5-exchange.stack .unit5-share-card .unit5-animal.sheep.user-img-animal,
  .unit5-board .unit5-exchange.total .unit5-share-card .unit5-animal.sheep.user-img-animal {
    width: 30px;
    height: 30px;
  }

  .unit5-board .unit5-exchange.stack .unit5-share-card,
  .unit5-board .unit5-exchange.total .unit5-share-card {
    flex-basis: 84px;
    width: 84px;
    min-width: 84px;
    min-height: 58px;
  }
}

/* Unit 5 level 5 final requested layout: step 1 left/right, step 2-3 centered sheep pairs. */
.unit5-board .unit5-exchange.relation {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  width: min(700px, 100%) !important;
  min-height: 300px !important;
  max-height: 360px !important;
  gap: 52px !important;
  padding: 28px 44px !important;
  overflow: hidden !important;
}

.unit5-board .unit5-exchange.relation > .unit5-animal-group:first-child {
  order: 1;
  flex: 0 0 180px;
  width: 180px;
  justify-content: center !important;
}

.unit5-board .unit5-exchange.relation > b {
  order: 2;
  flex: 0 0 58px;
  margin: 0 !important;
}

.unit5-board .unit5-exchange.relation > .unit5-animal-group:last-child {
  order: 3;
  flex: 0 0 210px;
  width: 210px;
  justify-content: center !important;
  gap: 8px !important;
}

.unit5-board .unit5-exchange.relation .unit5-animal.pig.user-img-animal {
  width: 118px !important;
  height: 118px !important;
}

.unit5-board .unit5-exchange.relation .unit5-animal.sheep.user-img-animal {
  width: 50px !important;
  height: 50px !important;
}

.unit5-board .unit5-exchange.stack,
.unit5-board .unit5-exchange.total {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: min(760px, 100%) !important;
  min-height: 330px !important;
  max-height: 400px !important;
  padding: 22px 28px !important;
  gap: 16px !important;
  overflow: hidden !important;
}

.unit5-board .unit5-exchange.stack > .unit5-animal-group {
  width: 100% !important;
  justify-content: center !important;
  gap: 28px !important;
  flex-wrap: nowrap !important;
}

.unit5-board .unit5-exchange.stack > .unit5-animal-group .unit5-animal.pig.user-img-animal {
  width: 78px !important;
  height: 78px !important;
}

.unit5-board .unit5-exchange.stack .unit5-share-list,
.unit5-board .unit5-exchange.total .unit5-share-list {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: 420px !important;
  gap: 14px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.unit5-board .unit5-exchange.stack .unit5-share-card,
.unit5-board .unit5-exchange.total .unit5-share-card {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 0 0 108px !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  min-height: 74px !important;
  padding: 6px !important;
  border-radius: 16px !important;
  overflow: visible !important;
}

.unit5-board .unit5-exchange.stack .unit5-share-card .unit5-animal-group,
.unit5-board .unit5-exchange.total .unit5-share-card .unit5-animal-group {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 4px !important;
}

.unit5-board .unit5-exchange.stack .unit5-share-card .unit5-animal.sheep.user-img-animal,
.unit5-board .unit5-exchange.total .unit5-share-card .unit5-animal.sheep.user-img-animal {
  width: 32px !important;
  height: 32px !important;
}

.unit5-board .unit5-exchange.total .unit5-total-question {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 60px !important;
  height: 60px !important;
  flex: 0 0 60px !important;
  margin: 0 auto !important;
  position: static !important;
  font-size: 38px !important;
}

@media (max-width: 760px) {
  .unit5-board .unit5-exchange.relation {
    gap: 22px !important;
    padding: 18px 12px !important;
  }

  .unit5-board .unit5-exchange.relation > .unit5-animal-group:first-child,
  .unit5-board .unit5-exchange.relation > .unit5-animal-group:last-child {
    flex-basis: 120px;
    width: 120px;
  }

  .unit5-board .unit5-exchange.relation .unit5-animal.pig.user-img-animal {
    width: 76px !important;
    height: 76px !important;
  }

  .unit5-board .unit5-exchange.relation .unit5-animal.sheep.user-img-animal,
  .unit5-board .unit5-exchange.stack .unit5-share-card .unit5-animal.sheep.user-img-animal,
  .unit5-board .unit5-exchange.total .unit5-share-card .unit5-animal.sheep.user-img-animal {
    width: 26px !important;
    height: 26px !important;
  }

  .unit5-board .unit5-exchange.stack .unit5-share-list,
  .unit5-board .unit5-exchange.total .unit5-share-list {
    gap: 6px !important;
  }

  .unit5-board .unit5-exchange.stack .unit5-share-card,
  .unit5-board .unit5-exchange.total .unit5-share-card {
    flex-basis: 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    min-height: 54px !important;
  }
}

/* Unit 5 level 5: use clear text instead of animal images for step 2 and 3. */
.unit5-text-exchange {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 22px;
  width: min(680px, 100%);
  min-height: 300px;
  margin: 0 auto;
  padding: 36px 44px;
  border-radius: 32px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 20px 52px rgba(31, 41, 55, .08);
}

.unit5-text-line {
  width: 100%;
  padding: 20px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.25;
  text-align: center;
  letter-spacing: .02em;
}

.unit5-text-line:last-child {
  color: #2c9465;
  background: rgba(239, 255, 247, .95);
}

@media (max-width: 760px) {
  .unit5-text-exchange {
    min-height: 240px;
    padding: 20px 14px;
    gap: 14px;
  }

  .unit5-text-line {
    padding: 14px 10px;
    font-size: 24px;
  }
}

/* Unit 5 level 5 requested final image layout. */
.unit5-board .unit5-exchange.relation {
  display: grid !important;
  grid-template-columns: 1fr 76px 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  width: min(720px, 100%) !important;
  min-height: 310px !important;
  max-height: 380px !important;
  padding: 24px 44px !important;
  gap: 24px !important;
  overflow: hidden !important;
}

.unit5-board .unit5-exchange.relation > .unit5-animal-group:first-child {
  grid-column: 1 !important;
  width: 220px !important;
  flex: none !important;
  justify-content: center !important;
}

.unit5-board .unit5-exchange.relation > b {
  grid-column: 2 !important;
  width: 64px !important;
  height: 64px !important;
  line-height: 64px !important;
  margin: 0 !important;
}

.unit5-board .unit5-exchange.relation > .unit5-animal-group:last-child {
  grid-column: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 180px !important;
  flex: none !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

.unit5-board .unit5-exchange.relation .unit5-animal.pig.user-img-animal {
  width: 138px !important;
  height: 138px !important;
}

.unit5-board .unit5-exchange.relation .unit5-animal.sheep.user-img-animal {
  width: 56px !important;
  height: 56px !important;
}

.unit5-board .unit5-exchange.pair-exchange {
  display: grid !important;
  grid-template-columns: minmax(240px, .92fr) 70px minmax(310px, 1.08fr) !important;
  align-items: center !important;
  justify-items: center !important;
  width: min(780px, 100%) !important;
  min-height: 330px !important;
  max-height: 400px !important;
  padding: 22px 30px !important;
  gap: 18px !important;
  overflow: hidden !important;
}

.unit5-board .unit5-exchange.pair-exchange > .unit5-animal-group {
  grid-column: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

.unit5-board .unit5-exchange.pair-exchange > b {
  grid-column: 2 !important;
  width: 58px !important;
  height: 58px !important;
  line-height: 58px !important;
  margin: 0 !important;
}

.unit5-board .unit5-exchange.pair-exchange > .unit5-share-list {
  grid-column: 3 !important;
}

.unit5-board .unit5-exchange.pair-exchange .unit5-animal.pig.user-img-animal {
  width: 78px !important;
  height: 78px !important;
}

.unit5-board .unit5-exchange.sheep-total {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: min(700px, 100%) !important;
  min-height: 300px !important;
  max-height: 360px !important;
  padding: 28px !important;
  overflow: hidden !important;
}

.unit5-board .unit5-exchange.pair-exchange .unit5-share-list,
.unit5-board .unit5-exchange.sheep-total .unit5-share-list {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  gap: 14px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

.unit5-board .unit5-exchange.pair-exchange .unit5-share-card,
.unit5-board .unit5-exchange.sheep-total .unit5-share-card {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 0 0 96px !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  min-height: 74px !important;
  padding: 7px 5px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(44, 148, 101, .16) !important;
  background: rgba(255, 255, 255, .88) !important;
  overflow: visible !important;
}

.unit5-board .unit5-exchange.pair-exchange .unit5-share-card .unit5-animal-group,
.unit5-board .unit5-exchange.sheep-total .unit5-share-card .unit5-animal-group {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 3px !important;
}

.unit5-board .unit5-exchange.pair-exchange .unit5-share-card .unit5-animal.sheep.user-img-animal,
.unit5-board .unit5-exchange.sheep-total .unit5-share-card .unit5-animal.sheep.user-img-animal {
  width: 31px !important;
  height: 31px !important;
}

@media (max-width: 760px) {
  .unit5-board .unit5-exchange.relation,
  .unit5-board .unit5-exchange.pair-exchange {
    grid-template-columns: 1fr 44px 1fr !important;
    gap: 8px !important;
    padding: 14px 10px !important;
  }

  .unit5-board .unit5-exchange.relation .unit5-animal.pig.user-img-animal {
    width: 84px !important;
    height: 84px !important;
  }

  .unit5-board .unit5-exchange.relation .unit5-animal.sheep.user-img-animal {
    width: 38px !important;
    height: 38px !important;
  }

  .unit5-board .unit5-exchange.pair-exchange .unit5-animal.pig.user-img-animal {
    width: 52px !important;
    height: 52px !important;
  }

  .unit5-board .unit5-exchange.pair-exchange .unit5-share-list,
  .unit5-board .unit5-exchange.sheep-total .unit5-share-list {
    gap: 6px !important;
  }

  .unit5-board .unit5-exchange.pair-exchange .unit5-share-card,
  .unit5-board .unit5-exchange.sheep-total .unit5-share-card {
    flex-basis: 70px !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    min-height: 52px !important;
  }

  .unit5-board .unit5-exchange.pair-exchange .unit5-share-card .unit5-animal.sheep.user-img-animal,
  .unit5-board .unit5-exchange.sheep-total .unit5-share-card .unit5-animal.sheep.user-img-animal {
    width: 23px !important;
    height: 23px !important;
  }
}

/* Unit 5 level 5: use user-provided sheep pair/six images without extra frames. */
.unit5-board .unit5-sheep-pair-photo,
.unit5-board .unit5-sheep-six-photo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.unit5-board .unit5-sheep-pair-photo .sheep-pair-img {
  display: block !important;
  width: min(260px, 100%) !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}

.unit5-board .unit5-sheep-six-photo .sheep-six-img {
  display: block !important;
  width: min(430px, 100%) !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}

.unit5-board .unit5-exchange.relation > .unit5-sheep-pair-photo {
  grid-column: 3 !important;
  width: 280px !important;
  max-width: 100% !important;
}

.unit5-board .unit5-exchange.pair-exchange > .unit5-sheep-six-photo {
  grid-column: 3 !important;
  width: 450px !important;
  max-width: 100% !important;
}

.unit5-board .unit5-exchange.sheep-total > .unit5-sheep-six-photo {
  width: 500px !important;
  max-width: 100% !important;
}

@media (max-width: 760px) {
  .unit5-board .unit5-sheep-pair-photo .sheep-pair-img {
    width: min(150px, 100%) !important;
  }

  .unit5-board .unit5-sheep-six-photo .sheep-six-img {
    width: min(230px, 100%) !important;
  }
}

/* Unit 5 level 5 step 1: keep pig and sheep aligned horizontally. */
.unit5-board .unit5-exchange.relation {
  display: grid !important;
  grid-template-columns: 220px 72px 320px !important;
  grid-template-rows: 1fr !important;
  justify-content: center !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 26px !important;
  min-height: 300px !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.unit5-board .unit5-exchange.relation > .unit5-animal-group:first-child,
.unit5-board .unit5-exchange.relation > b,
.unit5-board .unit5-exchange.relation > .unit5-sheep-pair-photo {
  align-self: center !important;
  justify-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

.unit5-board .unit5-exchange.relation > .unit5-animal-group:first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.unit5-board .unit5-exchange.relation > b {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.unit5-board .unit5-exchange.relation > .unit5-sheep-pair-photo {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.unit5-board .unit5-exchange.relation > .unit5-sheep-pair-photo .sheep-pair-img {
  width: min(300px, 100%) !important;
}

@media (max-width: 760px) {
  .unit5-board .unit5-exchange.relation {
    grid-template-columns: 110px 42px 150px !important;
    gap: 8px !important;
  }

  .unit5-board .unit5-exchange.relation > .unit5-sheep-pair-photo .sheep-pair-img {
    width: min(150px, 100%) !important;
  }
}

/* Unit 5 level 5 step 1: enlarge the single pig by 30%. */
.unit5-board .unit5-exchange.relation > .unit5-animal-group:first-child .unit5-animal.pig.user-img-animal {
  width: 179px !important;
  height: 179px !important;
}

@media (max-width: 760px) {
  .unit5-board .unit5-exchange.relation > .unit5-animal-group:first-child .unit5-animal.pig.user-img-animal {
    width: 109px !important;
    height: 109px !important;
  }
}

/* Unit 6: 100以内加减法. */
.unit6-board {
  min-height: 344px;
  align-content: center;
  gap: 18px;
}

body.unit6-active h1 {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(28px, 3.1vw, 34px);
  line-height: 1.18;
}

body.unit6-active .sub {
  min-height: 34px;
}

body.unit6-active .visual-zone {
  align-content: center;
  padding-top: 18px;
}

body.unit6-active .block-question > span:first-child {
  white-space: nowrap;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.25;
}

body.unit6-active .unit6-board .block-question {
  min-height: 48px;
  align-items: flex-start;
}

.unit6-intro {
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, .86fr) 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 18px 40px rgba(36,49,66,.08);
}

.unit6-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.unit6-methods div,
.unit6-teach-grid > div {
  min-height: 140px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(238,250,246,.74));
  box-shadow: 0 16px 34px rgba(36,49,66,.08);
  text-align: center;
}

.unit6-methods b {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #ffe071;
  color: #263244;
  font-size: 30px;
  font-weight: 1000;
}

.unit6-methods span,
.unit6-teach-grid span {
  color: #206f75;
  font-size: 22px;
  font-weight: 1000;
}

.unit6-step-stage {
  width: min(880px, 100%);
  min-height: 240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  justify-items: center;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 18px 36px rgba(36,49,66,.08);
}

.unit6-step-stage > .unit6-bus,
.unit6-step-stage > .unit6-boarding-scene,
.unit6-step-stage > .unit6-robot-sign,
.unit6-step-stage > .unit6-cinema-board,
.unit6-step-stage > .unit6-cinema-scene,
.unit6-step-stage > .unit6-star-panel,
.unit6-step-stage > .unit6-stick-panel.guided {
  grid-column: 1 / -1;
}

.unit6-boarding-scene {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(300px, .9fr);
  gap: 28px;
  align-items: center;
  justify-items: center;
}

.unit6-boarding-scene.compact {
  transform: scale(.8);
  transform-origin: center;
}

.unit6-queue {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  position: relative;
}

.unit6-queue::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 108px;
  bottom: 108px;
  width: 6px;
  border-radius: 999px;
  background: rgba(38,50,68,.18);
  transform: translateX(-50%);
}

.unit6-queue .unit6-story-card {
  position: relative;
  z-index: 1;
  width: min(280px, 100%);
}

.unit6-story-card {
  min-width: 210px;
  min-height: 118px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 24px;
  background: #fff4c7;
  color: #263244;
  border: 3px solid rgba(255,205,77,.5);
  box-shadow: 0 16px 30px rgba(36,49,66,.08);
  text-align: center;
}

.unit6-story-card span {
  color: #657184;
  font-size: 18px;
  font-weight: 900;
}

.unit6-story-card strong {
  color: #263244;
  font-size: 30px;
  font-weight: 1000;
}

.unit6-story-card.green {
  background: #ddf5df;
  border-color: rgba(47,143,104,.32);
}

.unit6-story-card.orange,
.unit6-story-card.red {
  background: #ffe2d3;
  border-color: rgba(232,90,79,.28);
}

.unit6-story-card.blue {
  background: #e8f3ff;
  border-color: rgba(63,126,232,.26);
}

.unit6-story-card.yellow {
  background: #fff4c7;
}

.unit6-count-scene {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.unit6-count-scene.minus {
  grid-template-columns: minmax(0, 1fr) auto minmax(150px, .42fr);
  align-items: center;
}

.unit6-cinema-scene {
  width: 100%;
  min-height: 210px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,224,113,.24), transparent 34%),
    linear-gradient(180deg, #2c3150 0%, #42496f 48%, #eef4ff 49%, #fff 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5);
}

.unit6-cinema-screen {
  width: min(420px, 78%);
  min-height: 42px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 0 0 28px 28px;
  background: #fff8dc;
  color: #263244;
  font-size: 20px;
  font-weight: 1000;
  box-shadow: 0 10px 26px rgba(255,224,113,.28);
}

.unit6-cinema-seats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.unit6-cinema-seats .unit6-count-group {
  min-height: 132px;
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    radial-gradient(circle at 20px 18px, rgba(38,50,68,.16) 0 10px, transparent 11px);
}

.unit6-count-group.waiting {
  background: rgba(255,255,255,.54);
  border-style: dashed;
  opacity: .48;
}

.unit6-empty-seats {
  min-height: 82px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20px 20px, rgba(38,50,68,.18) 0 9px, transparent 10px) 0 0 / 44px 38px;
}

.unit6-picture-scene {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 210px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  padding: 14px;
  border-radius: 26px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), 0 16px 32px rgba(36,49,66,.08);
}

.unit6-scene-title,
.unit6-sky-label {
  justify-self: center;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #263244;
  font-size: 18px;
  font-weight: 1000;
}

.unit6-scene-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.unit6-picture-scene .unit6-count-group {
  min-height: 128px;
}

.unit6-picture-scene.robot {
  background: linear-gradient(180deg, #eef4ff 0%, #f8fbff 58%, #fff 100%);
}

.unit6-robot-stage {
  justify-self: center;
  min-width: 210px;
  min-height: 58px;
  display: grid;
  grid-template-columns: 44px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 20px;
  background: #263244;
  color: white;
  font-size: 20px;
  font-weight: 1000;
}

.unit6-robot-stage span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 11px 13px, #263244 0 3px, transparent 4px),
    radial-gradient(circle at 23px 13px, #263244 0 3px, transparent 4px),
    linear-gradient(#dfe8f4, #aebbd0);
  position: relative;
}

.unit6-robot-stage span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 2px;
  height: 8px;
  background: #dfe8f4;
  transform: translateX(-50%);
}

.unit6-picture-scene.bread,
.unit6-picture-scene.eggs {
  background: linear-gradient(145deg, #fff4cf, #fff);
}

.unit6-table-line {
  width: min(520px, 86%);
  height: 24px;
  justify-self: center;
  border-radius: 999px;
  background: linear-gradient(90deg, #9c6b34, #d59648, #9c6b34);
  box-shadow: 0 10px 18px rgba(156,107,52,.18);
}

.unit6-empty-tray,
.unit6-wait-path,
.unit6-empty-stars {
  min-height: 82px;
  border-radius: 18px;
  background: rgba(255,255,255,.56);
  border: 2px dashed rgba(38,50,68,.14);
}

.unit6-picture-scene.hall {
  background: linear-gradient(145deg, #effaf3, #fff);
}

.unit6-picture-scene.hall.orange {
  background: linear-gradient(145deg, #fff0e7, #fff);
}

.unit6-door-visual {
  justify-self: center;
  min-width: 210px;
  min-height: 62px;
  display: grid;
  place-items: center;
  border-radius: 24px 24px 10px 10px;
  background: linear-gradient(180deg, #5a78c7, #334278);
  color: white;
  font-size: 22px;
  font-weight: 1000;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.16);
}

.unit6-picture-scene.stars {
  background:
    radial-gradient(circle at 12% 22%, #ffe071 0 3px, transparent 4px),
    radial-gradient(circle at 24% 44%, #ffe071 0 2px, transparent 3px),
    radial-gradient(circle at 78% 28%, #ffe071 0 3px, transparent 4px),
    radial-gradient(circle at 62% 64%, #ffe071 0 2px, transparent 3px),
    #322b63;
}

.unit6-picture-scene.stars .unit6-sky-label {
  background: rgba(255,255,255,.16);
  color: #fff8cb;
}

.unit6-picture-scene.stars .unit6-count-group {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.24);
}

.unit6-picture-scene.stars .unit6-count-group > span {
  color: #fff8cb;
}

.unit6-count-group {
  min-height: 166px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border-radius: 22px;
  background: #ddf5df;
  border: 3px solid rgba(47,143,104,.28);
  box-shadow: 0 16px 30px rgba(36,49,66,.08);
}

.unit6-count-group > span {
  color: #263244;
  font-size: 17px;
  font-weight: 1000;
  text-align: center;
}

.unit6-count-group.orange,
.unit6-count-group.red {
  background: #ffe2d3;
  border-color: rgba(232,90,79,.28);
}

.unit6-count-group.blue {
  background: #e8f3ff;
  border-color: rgba(63,126,232,.24);
}

.unit6-count-group.yellow {
  background: #fff4c7;
  border-color: rgba(255,205,77,.5);
}

.unit6-icon-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  align-items: center;
  justify-items: center;
}

.unit6-icon {
  width: 16px;
  height: 22px;
  border-radius: 999px 999px 7px 7px;
  background: #2f8f68;
  position: relative;
}

.unit6-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #ffd2a8;
  border: 2px solid #263244;
  transform: translateX(-50%);
}

.unit6-icon.person:nth-child(3n) {
  background: #3f7ee8;
}

.unit6-icon.person:nth-child(3n + 1) {
  background: #e85a4f;
}

.unit6-icon.bread,
.unit6-icon.egg,
.unit6-icon.star {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #e9a944;
}

.unit6-icon.bread::before,
.unit6-icon.egg::before,
.unit6-icon.star::before {
  display: none;
}

.unit6-icon.egg {
  width: 16px;
  height: 22px;
  background: #fff8df;
  border: 2px solid #d6b778;
}

.unit6-icon.star {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  background: #ffe071;
}

.unit6-icon.muted {
  opacity: .2;
  filter: grayscale(.4);
}

.unit6-flow-arrow {
  min-width: 78px;
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: #263244;
  color: #fff;
  font-size: 20px;
  font-weight: 1000;
}

.unit6-step-note {
  grid-column: 1 / -1;
  width: min(720px, 100%);
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 10px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  color: #516074;
  font-size: 19px;
  font-weight: 900;
  text-align: center;
}

.unit6-robot-sign,
.unit6-cinema-board,
.unit6-star-panel {
  width: min(520px, 100%);
  min-height: 116px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: linear-gradient(145deg, #eef4ff, #fff);
  color: #263244;
  font-size: 30px;
  font-weight: 1000;
}

.unit6-star-panel {
  background: radial-gradient(circle at 35% 18%, rgba(255,255,255,.2), transparent 28%), #322b63;
}

.unit6-star-panel .unit6-story-card {
  color: #fff8cb;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
}

.unit6-star-panel .unit6-story-card span,
.unit6-star-panel .unit6-story-card strong {
  color: #fff8cb;
}

.unit6-stick-panel.guided {
  width: 100%;
  min-height: 168px;
}

.unit6-bus-scene,
.unit6-cinema,
.unit6-robot-scene,
.unit6-bread-scene,
.unit6-door-scene,
.unit6-star-scene,
.unit6-egg-scene,
.unit6-stick-panel {
  width: min(860px, 100%);
  min-height: 240px;
  margin: 0 auto;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 18px 36px rgba(36,49,66,.08);
}

.unit6-bus-scene,
.unit6-cinema,
.unit6-robot-scene,
.unit6-bread-scene,
.unit6-door-scene,
.unit6-star-scene,
.unit6-egg-scene {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.unit6-bus {
  grid-column: 1 / -1;
  width: min(520px, 100%);
  min-height: 130px;
  display: grid;
  place-items: center;
  border-radius: 34px 34px 24px 24px;
  background: linear-gradient(180deg, #69b66f, #2f8f68);
  color: white;
  font-size: 30px;
  font-weight: 1000;
  box-shadow: inset 0 -12px 0 rgba(0,0,0,.12);
  position: relative;
}

.unit6-bus::before,
.unit6-bus::after {
  content: "";
  position: absolute;
  bottom: -16px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #263244;
  box-shadow: inset 0 0 0 12px #eff4f8;
}

.unit6-bus::before { left: 78px; }
.unit6-bus::after { right: 78px; }

.unit6-class-card,
.unit6-seat-group,
.unit6-people,
.unit6-newcomers,
.unit6-bread-box,
.unit6-bread-extra,
.unit6-door,
.unit6-star-scene div,
.unit6-egg-tray,
.unit6-eaten {
  min-width: 180px;
  min-height: 86px;
  display: grid;
  place-items: center;
  padding: 14px 18px;
  border-radius: 22px;
  background: #fff4c7;
  color: #263244;
  font-size: 24px;
  font-weight: 1000;
  text-align: center;
  border: 3px solid rgba(255,205,77,.55);
}

.unit6-class-card.green,
.unit6-door.apple {
  background: #ddf5df;
  border-color: rgba(47,143,104,.32);
}

.unit6-class-card.orange,
.unit6-door.strawberry,
.unit6-bread-extra,
.unit6-eaten {
  background: #ffe2d3;
  border-color: rgba(232,90,79,.28);
}

.unit6-cinema {
  background: linear-gradient(180deg, rgba(229,234,249,.9), rgba(255,255,255,.76));
}

.unit6-seat-group {
  min-height: 160px;
  background:
    radial-gradient(circle at 24px 24px, rgba(63,126,232,.28) 0 12px, transparent 13px),
    radial-gradient(circle at 62px 62px, rgba(63,126,232,.22) 0 12px, transparent 13px),
    #f7f9ff;
  background-size: 86px 86px;
}

.unit6-seat-group.small {
  background:
    radial-gradient(circle at 24px 24px, rgba(232,90,79,.24) 0 12px, transparent 13px),
    radial-gradient(circle at 62px 62px, rgba(232,90,79,.18) 0 12px, transparent 13px),
    #fff8f4;
  background-size: 86px 86px;
}

.unit6-robot-scene {
  background: linear-gradient(145deg, #eef4ff, #fff);
}

.unit6-people::before {
  content: "机器人";
  display: block;
  font-size: 28px;
  line-height: 1;
}

.unit6-bread-scene {
  background: linear-gradient(145deg, #fff2cf, #fff);
}

.unit6-bread-box::before,
.unit6-egg-tray::before {
  content: "";
  width: 180px;
  height: 76px;
  margin-bottom: 10px;
  border-radius: 18px;
  background:
    radial-gradient(circle, #e9a944 0 12px, transparent 13px) 0 0 / 42px 34px,
    #9c6b34;
  display: block;
}

.unit6-star-scene {
  background: radial-gradient(circle at 35% 18%, rgba(255,255,255,.2), transparent 28%), #322b63;
}

.unit6-star-scene div {
  color: #fff8cb;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

.unit6-egg-scene {
  background: linear-gradient(145deg, #fff6dc, #fff);
}

.unit6-stick-panel {
  grid-template-columns: 1fr auto;
}

.unit6-stick-panel.total {
  grid-template-columns: 1fr auto;
  background: rgba(239,250,246,.82);
}

.unit6-sticks {
  width: 100%;
  min-height: 170px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}

.unit6-ten-zone,
.unit6-one-zone {
  min-height: 148px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 2px dashed rgba(38,50,68,.14);
}

.unit6-ten {
  width: 34px;
  height: 112px;
  border-radius: 14px;
  background: repeating-linear-gradient(0deg, #b47a35 0 9px, #d99b4b 9px 18px);
  box-shadow: inset -5px 0 0 rgba(0,0,0,.08);
}

.unit6-one {
  width: 15px;
  height: 86px;
  border-radius: 999px;
  background: #c98b3e;
  box-shadow: inset -3px 0 0 rgba(0,0,0,.1);
}

.unit6-one.muted {
  opacity: .22;
  transform: translateY(8px);
}

.unit6-equation {
  min-width: 210px;
  min-height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px;
  border-radius: 24px;
  background: #263244;
  color: white;
  font-size: 30px;
  font-weight: 1000;
}

.unit6-equation strong {
  min-width: 72px;
  min-height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #ffe071;
  color: #263244;
}

.unit6-split-card {
  min-width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  color: #263244;
  font-size: 28px;
  font-weight: 1000;
  box-shadow: 0 16px 30px rgba(36,49,66,.08);
}

.unit6-split-card span {
  min-width: 64px;
  min-height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #e8f3ff;
  border: 2px solid rgba(63,126,232,.24);
}

.unit6-teach-board {
  width: min(980px, 100%);
}

.unit6-teach-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.unit6-teach-grid strong {
  color: #263244;
  font-size: 18px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .unit6-board {
    min-height: 288px;
  }

  body.unit6-active h1 {
    white-space: normal;
    font-size: clamp(28px, 8vw, 36px);
  }

  body.unit6-active .sub {
    min-height: 0;
  }

  body.unit6-active .block-question > span:first-child {
    white-space: normal;
  }

  .unit6-intro,
  .unit6-bus-scene,
  .unit6-cinema,
  .unit6-robot-scene,
  .unit6-bread-scene,
  .unit6-door-scene,
  .unit6-star-scene,
  .unit6-egg-scene,
  .unit6-stick-panel {
    grid-template-columns: 1fr;
    min-height: 208px;
    padding: 14px;
  }

  .unit6-methods,
  .unit6-teach-grid {
    grid-template-columns: 1fr;
  }

  .unit6-methods div,
  .unit6-teach-grid > div {
    min-height: 104px;
  }

  .unit6-step-stage {
    grid-template-columns: 1fr;
    min-height: 208px;
    padding: 14px;
  }

  .unit6-boarding-scene {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .unit6-boarding-scene.compact {
    transform: none;
  }

  .unit6-queue::before {
    display: none;
  }

  .unit6-story-card {
    width: 100%;
    min-width: 0;
    min-height: 92px;
  }

  .unit6-story-card strong {
    font-size: 24px;
  }

  .unit6-count-scene,
  .unit6-count-scene.minus {
    grid-template-columns: 1fr;
  }

  .unit6-cinema-scene {
    min-height: 188px;
    padding: 12px;
  }

  .unit6-cinema-seats {
    grid-template-columns: 1fr;
  }

  .unit6-picture-scene {
    min-height: 188px;
    padding: 12px;
  }

  .unit6-scene-groups {
    grid-template-columns: 1fr;
  }

  .unit6-cinema-screen {
    min-height: 36px;
    font-size: 17px;
  }

  .unit6-count-group {
    min-height: 126px;
    padding: 12px;
  }

  .unit6-count-group > span {
    font-size: 15px;
  }

  .unit6-icon-grid {
    gap: 5px;
  }

  .unit6-icon {
    width: 13px;
    height: 18px;
  }

  .unit6-icon::before {
    width: 10px;
    height: 10px;
    top: -6px;
  }

  .unit6-flow-arrow {
    min-height: 44px;
    font-size: 18px;
  }

  .unit6-step-note {
    font-size: 16px;
  }

  .unit6-bus {
    min-height: 96px;
    font-size: 22px;
  }

  .unit6-bus::before,
  .unit6-bus::after {
    width: 34px;
    height: 34px;
    bottom: -12px;
    box-shadow: inset 0 0 0 8px #eff4f8;
  }

  .unit6-bus::before { left: 46px; }
  .unit6-bus::after { right: 46px; }

  .unit6-class-card,
  .unit6-seat-group,
  .unit6-people,
  .unit6-newcomers,
  .unit6-bread-box,
  .unit6-bread-extra,
  .unit6-door,
  .unit6-star-scene div,
  .unit6-egg-tray,
  .unit6-eaten {
    min-width: 0;
    width: 100%;
    min-height: 70px;
    font-size: 20px;
  }

  .unit6-sticks {
    grid-template-columns: 1fr;
    min-height: 120px;
    gap: 10px;
  }

  .unit6-ten-zone,
  .unit6-one-zone {
    min-height: 90px;
    padding: 10px;
  }

  .unit6-ten {
    width: 25px;
    height: 76px;
  }

  .unit6-one {
    width: 12px;
    height: 58px;
  }

  .unit6-equation,
  .unit6-split-card {
    width: 100%;
    min-width: 0;
    font-size: 24px;
  }
}

/* Unit 7: 我的生日 - 年月日 */
.unit7-board {
  width: min(980px, 100%);
  min-height: 344px;
  margin: 0 auto;
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 22px;
  border-radius: 30px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 38px rgba(36,49,66,.08);
}

body.unit7-active h1 {
  white-space: nowrap;
  max-width: none;
  font-size: clamp(28px, 3.1vw, 34px);
  line-height: 1.18;
}

body.unit7-active .sub {
  min-height: 34px;
}

body.unit7-active .visual-zone {
  align-content: center;
  padding-top: 18px;
}

body.unit7-active .block-question > span:first-child {
  white-space: nowrap;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.25;
}

body.unit7-active .unit7-board .block-question {
  min-height: 48px;
  align-items: flex-start;
}

.unit7-intro {
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, .9fr) 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,245,226,.9), rgba(255,255,255,.82));
  box-shadow: 0 18px 40px rgba(143,91,35,.1);
}

.unit7-methods,
.unit7-teach-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.unit7-methods div,
.unit7-teach-grid > div {
  min-height: 130px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #fff1dc);
  box-shadow: 0 16px 34px rgba(143,91,35,.1);
  text-align: center;
}

.unit7-methods b {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #f08f4f;
  color: white;
  font-size: 30px;
  font-weight: 1000;
}

.unit7-methods span,
.unit7-teach-grid span {
  color: #9d5525;
  font-size: 21px;
  font-weight: 1000;
}

.unit7-scene {
  width: 100%;
  min-height: 240px;
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 28px;
  background: linear-gradient(145deg, #fff4df, #fff);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), 0 16px 32px rgba(143,91,35,.1);
}

.unit7-scene.birthday {
  grid-template-columns: minmax(220px, .75fr) 1fr;
  align-items: center;
}

.unit7-cake {
  min-height: 160px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border-radius: 30px 30px 22px 22px;
  background:
    radial-gradient(circle at 28% 24%, #e74949 0 10px, transparent 11px),
    radial-gradient(circle at 52% 18%, #e74949 0 10px, transparent 11px),
    radial-gradient(circle at 74% 24%, #e74949 0 10px, transparent 11px),
    linear-gradient(180deg, #f8d16b 0 36%, #8cc36e 37% 68%, #f8d16b 69%);
  color: #263244;
  border: 4px solid rgba(156,107,52,.2);
  box-shadow: 0 18px 30px rgba(143,91,35,.13);
}

.unit7-cake.small {
  min-height: 120px;
}

.unit7-cake span {
  font-size: 20px;
  font-weight: 1000;
}

.unit7-cake b {
  padding: 8px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  color: #d75f35;
  font-size: 30px;
  font-weight: 1000;
}

.unit7-mini-calendar {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255,255,255,.88);
}

.unit7-mini-head,
.unit7-year-title {
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #6f86bd;
  color: white;
  font-size: 24px;
  font-weight: 1000;
}

.unit7-week-row,
.unit7-day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  text-align: center;
}

.unit7-week-row span {
  color: #8f5b23;
  font-weight: 1000;
}

.unit7-day-grid span {
  min-height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff4d6;
  color: #263244;
  font-size: 13px;
  font-weight: 900;
}

.unit7-day-grid .mark {
  background: #e85a4f;
  color: white;
  box-shadow: 0 0 0 4px rgba(232,90,79,.18);
}

.unit7-calendar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.unit7-calendar-month {
  min-height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border-radius: 18px;
  background: #ffd275;
  color: #263244;
  border: 3px solid rgba(255,255,255,.55);
}

.unit7-calendar-month strong {
  font-size: 24px;
  font-weight: 1000;
}

.unit7-calendar-month span {
  color: #8f5b23;
  font-weight: 1000;
}

.unit7-calendar-month em {
  width: 42px;
  height: 8px;
  border-radius: 999px;
  background: rgba(143,91,35,.2);
}

.unit7-calendar-month.active {
  background: #f08f4f;
  color: white;
  box-shadow: 0 10px 20px rgba(240,143,79,.24);
}

.unit7-calendar-month.active span {
  color: white;
}

.unit7-scene.year,
.unit7-scene.month-days {
  grid-template-rows: auto 1fr;
}

.unit7-holiday-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.unit7-holiday-list div {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  color: #263244;
  border: 2px solid rgba(143,91,35,.12);
}

.unit7-holiday-list .active {
  background: #ddf5df;
  border-color: rgba(47,143,104,.36);
  box-shadow: 0 10px 20px rgba(47,143,104,.14);
}

.unit7-holiday-list span {
  font-size: 15px;
  font-weight: 1000;
}

.unit7-holiday-list b {
  color: #2f8f68;
  font-size: 18px;
  font-weight: 1000;
}

.unit7-scene.date-order {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.unit7-date-card {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border-radius: 24px;
  background: #e8f3ff;
  border: 3px solid rgba(63,126,232,.24);
}

.unit7-date-card.first {
  background: #ddf5df;
  border-color: rgba(47,143,104,.32);
}

.unit7-date-card span {
  color: #657184;
  font-size: 20px;
  font-weight: 1000;
}

.unit7-date-card b {
  color: #263244;
  font-size: 34px;
  font-weight: 1000;
}

.unit7-date-path {
  width: 74px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f8f68, #6f86bd);
}

.unit7-scene.full-date {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.unit7-date-strip {
  display: grid;
  gap: 12px;
}

.unit7-date-strip span {
  min-height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff4d6;
  color: #263244;
  font-size: 28px;
  font-weight: 1000;
  border: 3px solid rgba(143,91,35,.14);
}

.unit7-date-strip .active {
  background: #f08f4f;
  color: white;
}

.unit7-teach-board {
  width: min(980px, 100%);
}

.unit7-teach-grid strong {
  color: #263244;
  font-size: 18px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .unit7-board {
    min-height: 288px;
    padding: 14px;
  }

  body.unit7-active h1 {
    white-space: normal;
    font-size: clamp(28px, 8vw, 36px);
  }

  body.unit7-active .sub {
    min-height: 0;
  }

  body.unit7-active .block-question > span:first-child {
    white-space: normal;
  }

  .unit7-intro,
  .unit7-scene.birthday,
  .unit7-scene.date-order,
  .unit7-scene.full-date {
    grid-template-columns: 1fr;
  }

  .unit7-methods,
  .unit7-teach-grid,
  .unit7-holiday-list {
    grid-template-columns: 1fr;
  }

  .unit7-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unit7-scene {
    min-height: 208px;
    padding: 12px;
  }

  .unit7-cake b,
  .unit7-date-card b,
  .unit7-date-strip span {
    font-size: 24px;
  }

  .unit7-date-path {
    width: 8px;
    height: 42px;
    justify-self: center;
  }
}


/* Unit 8: 小小设计师 */
.unit8-board {
  width: min(900px, 100%);
  height: clamp(430px, 52vh, 510px);
  padding: 14px;
  border-radius: 26px;
  background: linear-gradient(140deg, rgba(236,250,255,.96), rgba(255,248,224,.96));
  box-shadow: inset 0 0 0 2px rgba(74,149,164,.12), 0 20px 48px rgba(30,67,91,.10);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

body.unit8-active .visual-zone {
  min-height: clamp(430px, 52vh, 510px);
  align-content: start;
  padding-bottom: 10px;
}

.unit8-visual-frame {
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  display: grid;
}

.unit8-board .block-question {
  font-size: 18px;
  line-height: 1.16;
  min-height: 34px;
  position: relative;
  z-index: 2;
}

body.unit8-active h1,
body.unit8-active .block-question > span:first-child {
  white-space: nowrap;
}

body.unit8-active h1 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

body.unit8-active .sub {
  margin-top: 8px;
  line-height: 1.25;
}

.unit8-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  justify-items: center;
  width: min(760px, 100%);
  margin: 0 auto;
  text-align: center;
}

.unit8-intro .unit3-intro-copy {
  justify-items: center;
  text-align: center;
}

.unit8-intro .unit3-intro-copy span {
  max-width: 620px;
}

.unit8-intro .unit8-methods {
  width: min(680px, 100%);
}

.unit8-methods,
.unit8-teach-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.unit8-methods div,
.unit8-teach-grid div {
  min-height: 118px;
  padding: 18px;
  border-radius: 24px;
  background: #ffffff;
  border: 3px solid rgba(54,145,167,.16);
  box-shadow: 0 14px 28px rgba(32,82,104,.09);
}

.unit8-methods b,
.unit8-teach-grid span {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: #36a3b7;
  color: #fff;
  font-size: 24px;
  font-weight: 1000;
}

.unit8-methods span,
.unit8-teach-grid strong {
  display: block;
  color: #263244;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 900;
}

.unit8-scene {
  min-height: 0;
  height: 100%;
  margin-top: 0;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  border: 2px solid rgba(65,139,158,.12);
  overflow: hidden;
  box-sizing: border-box;
}

.unit8-scene-title {
  margin-bottom: 12px;
  color: #31566a;
  font-size: 21px;
  font-weight: 1000;
  text-align: center;
}

.unit8-pick-row {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.unit8-count-label,
.unit8-side-count {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: #263244;
  font-size: 22px;
  font-weight: 1000;
}

.unit8-count-dots {
  display: inline-flex;
  gap: 7px;
}

.unit8-count-dots span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #d5e1e8;
}

.unit8-count-dots span.on {
  background: #ffad5b;
}

.unit8-scene.line-scene {
  display: grid;
  align-items: center;
}

.unit8-pair-preview {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(130px, .72fr) 90px minmax(190px, 1.18fr);
  gap: 10px;
  align-items: center;
}

.unit8-fixed-card,
.unit8-target-stack {
  min-height: 0;
  display: grid;
  gap: 6px;
  justify-items: center;
}

.unit8-fixed-card em,
.unit8-target-stack em {
  color: #6d7b90;
  font-style: normal;
  font-size: 16px;
  font-weight: 1000;
}

.unit8-target-row {
  width: 100%;
  opacity: .72;
}

.unit8-target-row.active {
  opacity: 1;
}

.unit8-arrows {
  display: grid;
  gap: 18px;
  align-content: center;
}

.unit8-arrows span {
  height: 12px;
  border-radius: 999px;
  background: #cbd8df;
  position: relative;
}

.unit8-arrows span::after {
  content: "";
  position: absolute;
  right: -8px;
  top: -5px;
  border-left: 12px solid #cbd8df;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.unit8-arrows span.active {
  background: linear-gradient(90deg, #ffad5b, #36a3b7);
}

.unit8-arrows span.active::after {
  border-left-color: #36a3b7;
}

.unit8-column,
.unit8-set {
  display: grid;
  gap: 12px;
}

.unit8-set > strong {
  color: #31566a;
  font-size: 20px;
  font-weight: 1000;
  text-align: center;
}

.unit8-set > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}

.unit8-item {
  min-height: 68px;
  padding: 6px;
  border-radius: 18px;
  background: #fff;
  border: 3px solid rgba(69,132,155,.12);
  display: grid;
  place-items: center;
  gap: 3px;
  color: #263244;
  font-size: 14px;
  font-weight: 1000;
  box-sizing: border-box;
}

.unit8-item.active {
  border-color: #ffad5b;
  box-shadow: 0 0 0 5px rgba(255,173,91,.18);
  background: #fff9ed;
}

.unit8-item i {
  width: 58px;
  height: 46px;
  display: block;
  position: relative;
  background: #8bb8ff;
  transform: scale(.96);
}

.unit8-item.clothes.top-blue i {
  width: 74px;
  height: 48px;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(#7ec4ff, #599ee6);
  box-shadow: inset 0 -8px 0 rgba(255,255,255,.22);
}

.unit8-item.clothes.top-blue i::before,
.unit8-item.clothes.top-blue i::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 28px;
  height: 30px;
  border-radius: 14px;
  background: #7ec4ff;
}

.unit8-item.clothes.top-blue i::before { left: -18px; transform: rotate(25deg); }
.unit8-item.clothes.top-blue i::after { right: -18px; transform: rotate(-25deg); }

.unit8-item.clothes.top-green i {
  width: 56px;
  height: 58px;
  border-radius: 12px 12px 18px 18px;
  background: repeating-linear-gradient(0deg, #8fa95f 0 9px, #789451 9px 15px);
}

.unit8-item.clothes.top-green i::before {
  content: "";
  position: absolute;
  left: 17px;
  top: -2px;
  width: 22px;
  height: 18px;
  border-radius: 0 0 14px 14px;
  background: #fff;
}

.unit8-item.clothes.top-red i {
  width: 76px;
  height: 52px;
  border-radius: 16px 16px 10px 10px;
  background: linear-gradient(90deg, #d9585f 0 42%, #ffd8c5 42% 58%, #e96a72 58%);
}

.unit8-item.clothes.top-red i::before,
.unit8-item.clothes.top-red i::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 22px;
  height: 42px;
  border-radius: 16px;
  background: #e96a72;
}

.unit8-item.clothes.top-red i::before { left: -14px; transform: rotate(10deg); }
.unit8-item.clothes.top-red i::after { right: -14px; transform: rotate(-10deg); }

.unit8-item.clothes.bottom-orange i {
  width: 62px;
  height: 66px;
  background: transparent;
}

.unit8-item.clothes.bottom-orange i::before,
.unit8-item.clothes.bottom-orange i::after {
  content: "";
  position: absolute;
  top: 0;
  width: 28px;
  height: 66px;
  border-radius: 14px 14px 18px 18px;
  background: #e79444;
}

.unit8-item.clothes.bottom-orange i::before { left: 4px; transform: rotate(6deg); }
.unit8-item.clothes.bottom-orange i::after { right: 4px; transform: rotate(-6deg); }

.unit8-item.clothes.bottom-purple i {
  width: 78px;
  height: 62px;
  background: #bc72ca;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  border-radius: 10px 10px 28px 28px;
}

.unit8-item.clothes.bottom-purple i::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 12px;
  height: 4px;
  background: rgba(255,255,255,.38);
  box-shadow: 0 12px 0 rgba(255,255,255,.22), 0 24px 0 rgba(255,255,255,.18);
}

.unit8-item.food i {
  width: 72px;
  height: 52px;
  border-radius: 50%;
  background: #f6f0df;
  border: 6px solid #fff;
  box-shadow: inset 0 0 0 10px rgba(255,184,76,.35), 0 5px 0 rgba(38,50,68,.08);
}

.unit8-item.food.veg-cabbage i { box-shadow: inset 0 0 0 10px rgba(100,182,91,.45), 0 5px 0 rgba(38,50,68,.08); }
.unit8-item.food.veg-greens i { box-shadow: inset 0 0 0 10px rgba(48,154,91,.52), 0 5px 0 rgba(38,50,68,.08); }
.unit8-item.food.veg-potato i { box-shadow: inset 0 0 0 10px rgba(221,163,76,.50), 0 5px 0 rgba(38,50,68,.08); }
.unit8-item.food.meat-beef i { box-shadow: inset 0 0 0 10px rgba(168,82,58,.55), 0 5px 0 rgba(38,50,68,.08); }
.unit8-item.food.meat-chicken i { box-shadow: inset 0 0 0 10px rgba(241,174,70,.55), 0 5px 0 rgba(38,50,68,.08); }
.unit8-item.food.meat-shrimp i { box-shadow: inset 0 0 0 10px rgba(241,112,104,.55), 0 5px 0 rgba(38,50,68,.08); }

.unit8-match-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(88px, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 7px;
  width: 100%;
  min-height: 0;
}

.unit8-cell {
  min-height: 0;
  border-radius: 14px;
  background: #fff;
  border: 2px solid rgba(50,119,145,.12);
  display: grid;
  place-items: center;
  padding: 4px;
  color: #31566a;
  font-weight: 1000;
  text-align: center;
  overflow: hidden;
}

.unit8-cell.head,
.unit8-cell.side {
  background: #ecf9fd;
}

.unit8-cell.combo {
  background: repeating-linear-gradient(135deg, rgba(54,163,183,.08) 0 10px, rgba(255,190,100,.10) 10px 20px);
}

.unit8-cell.combo.filled {
  background: #fff4d8;
  border-color: rgba(255,173,91,.36);
}

.unit8-cell.combo span,
.unit8-cell.combo small {
  font-size: 14px;
  line-height: 1.25;
}

.unit8-cell.combo small {
  color: #8a97a7;
}

.unit8-checkmark {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #36a3b7;
  box-shadow: 0 6px 14px rgba(54,163,183,.20);
}

.unit8-checkmark::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}





/* Unit 8 food icons: distinct silhouettes */
.unit8-item.food i {
  width: 72px;
  height: 54px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.unit8-item.food i::before,
.unit8-item.food i::after {
  content: "";
  position: absolute;
}

.unit8-item.food.veg-cabbage i::before {
  left: 17px;
  top: 4px;
  width: 38px;
  height: 42px;
  border-radius: 52% 48% 58% 42%;
  background: radial-gradient(circle at 50% 28%, #e9fff0 0 12px, #8ed67f 13px 28px, #5cad63 29px);
  box-shadow: -18px 8px 0 -4px #71c96f, 18px 8px 0 -4px #71c96f, 0 13px 0 -5px #4f9b55;
}

.unit8-item.food.veg-cabbage i::after {
  left: 34px;
  top: 9px;
  width: 4px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  transform: rotate(-8deg);
}

.unit8-item.food.veg-greens i::before {
  left: 14px;
  top: 10px;
  width: 44px;
  height: 34px;
  border-radius: 44% 56% 48% 52%;
  background: #47b963;
  box-shadow: inset -10px 0 0 #348d4d, 0 0 0 4px rgba(255,255,255,.7);
}

.unit8-item.food.veg-greens i::after {
  left: 25px;
  top: 3px;
  width: 20px;
  height: 14px;
  border-radius: 50% 50% 28% 28%;
  background: #2f8c45;
  box-shadow: 10px 4px 0 -5px #2f8c45, -10px 4px 0 -5px #2f8c45;
}

.unit8-item.food.veg-potato i::before {
  left: 12px;
  top: 8px;
  width: 50px;
  height: 38px;
  border-radius: 48% 42% 52% 46%;
  background: #c99a55;
  box-shadow: inset -8px -5px 0 rgba(135,88,40,.18), 0 0 0 4px rgba(255,255,255,.72);
  transform: rotate(-10deg);
}

.unit8-item.food.veg-potato i::after {
  left: 24px;
  top: 19px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #8b6235;
  box-shadow: 16px -4px 0 #8b6235, 24px 10px 0 #8b6235;
}





/* Unit 8 meat icons: distinct silhouettes */
.unit8-item.food.meat-beef i::before {
  left: 8px;
  top: 15px;
  width: 56px;
  height: 30px;
  border-radius: 18px 14px 16px 14px;
  background: linear-gradient(135deg, #a64f36, #7f321f);
  box-shadow: inset 0 0 0 5px rgba(255,210,150,.22), 0 0 0 4px rgba(255,255,255,.75);
  transform: rotate(-8deg);
}

.unit8-item.food.meat-beef i::after {
  left: 24px;
  top: 22px;
  width: 30px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,235,188,.7);
  transform: rotate(-12deg);
  box-shadow: -5px 9px 0 rgba(255,235,188,.45);
}

.unit8-item.food.meat-chicken i::before {
  left: 10px;
  top: 12px;
  width: 52px;
  height: 34px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 13px 13px, #ffe28a 0 5px, transparent 6px),
    radial-gradient(circle at 33px 11px, #ffd260 0 5px, transparent 6px),
    radial-gradient(circle at 25px 24px, #f2a83e 0 6px, transparent 7px),
    #fff6d8;
  box-shadow: 0 0 0 4px rgba(255,255,255,.75), inset 0 0 0 2px #f5bb55;
}

.unit8-item.food.meat-chicken i::after {
  left: 17px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: #e8942f;
  box-shadow: 17px -4px 0 #f4bd4e, 29px 8px 0 #df8730;
}

.unit8-item.food.meat-shrimp i::before {
  left: 12px;
  top: 16px;
  width: 46px;
  height: 26px;
  border-radius: 60% 40% 50% 50%;
  background: #f07c74;
  box-shadow: inset 8px 0 0 #ffaaa0, 0 0 0 4px rgba(255,255,255,.75);
  transform: rotate(-10deg);
}

.unit8-item.food.meat-shrimp i::after {
  left: 43px;
  top: 9px;
  width: 20px;
  height: 20px;
  border-radius: 0 80% 0 80%;
  border-top: 6px solid #f07c74;
  border-right: 6px solid #f07c74;
  transform: rotate(18deg);
  box-shadow: -28px 21px 0 -8px #f5b0a8;
}

/* Unit 8 late-level logic scenes */
.unit8-mini-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
  width: 100%;
}

.unit8-method-scene,
.unit8-summary-scene {
  display: grid;
  align-items: stretch;
}

.unit8-method-two-groups,
.unit8-summary-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  height: 100%;
}

.unit8-method-group,
.unit8-summary-card {
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #fff;
  border: 3px solid rgba(50,119,145,.12);
  padding: 12px;
}

.unit8-method-group.active {
  border-color: rgba(255,173,91,.72);
  box-shadow: inset 0 0 0 6px rgba(255,173,91,.13);
}

.unit8-method-flow {
  display: grid;
  grid-template-columns: 1fr 50px 1.2fr 50px 1.25fr;
  align-items: center;
  gap: 8px;
}

.unit8-method-flow > div {
  min-height: 0;
  display: grid;
  gap: 8px;
  place-items: center;
}

.unit8-method-flow > div > span {
  color: #263244;
  font-size: 16px;
  font-weight: 1000;
}

.unit8-method-flow > b {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffad5b, #36a3b7);
  position: relative;
}

.unit8-method-flow > b::after {
  content: "";
  position: absolute;
  right: -8px;
  top: -6px;
  border-left: 12px solid #36a3b7;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.unit8-small-table {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.unit8-small-table .unit8-scene,
.unit8-summary-table .unit8-scene {
  border: 0;
  padding: 0;
  background: transparent;
}

.unit8-table-focus,
.unit8-summary-table {
  display: grid;
}

.unit8-table-side {
  position: relative;
  min-height: 0;
}

.unit8-table-side .unit8-scene {
  border: 0;
  padding: 0;
  background: transparent;
}

.unit8-table-side.left-focus .unit8-cell.side,
.unit8-table-side.top-focus .unit8-cell.head:not(:first-child) {
  border-color: rgba(255,173,91,.8);
  box-shadow: inset 0 0 0 4px rgba(255,173,91,.16);
}

.unit8-table-side.cell-focus .unit8-match-grid .unit8-cell:nth-child(7) {
  border-color: rgba(255,173,91,.9);
  box-shadow: inset 0 0 0 5px rgba(255,173,91,.20);
  background: #fff8e6;
}

.unit8-focus-cell {
  display: none;
}

/* Unit 8 icon readability pass */
.unit8-pick-row .unit8-item i,
.unit8-target-stack .unit8-item i,
.unit8-fixed-card .unit8-item i {
  transform: scale(1.08);
  margin: 4px 0 2px;
}

.unit8-match-grid .unit8-cell.head .unit8-item i,
.unit8-match-grid .unit8-cell.side .unit8-item i {
  transform: scale(.92);
  margin: 0 0 -2px;
}

.unit8-item.food i {
  transform: scale(1.08);
  margin: 4px 0 2px;
}

.unit8-match-grid .unit8-item.food i {
  transform: scale(.9);
  margin: 0 0 -2px;
}

body.unit8-active .scene-content {
  gap: 12px;
}

.unit8-match-grid .unit8-item {
  min-height: 54px;
  border-width: 2px;
  border-radius: 14px;
  font-size: 13px;
}

.unit8-match-grid .unit8-item i {
  transform: scale(.82);
  margin: -2px 0 -3px;
}

.unit8-target-stack .unit8-item,
.unit8-fixed-card .unit8-item {
  min-height: 76px;
}

.unit8-arrows {
  gap: 10px;
}

.unit8-arrows span {
  height: 9px;
}

.unit8-checkmark {
  width: 22px;
  height: 22px;
}

.unit8-checkmark::after {
  width: 10px;
  height: 6px;
  border-left-width: 3px;
  border-bottom-width: 3px;
}

.unit8-teach-board {
  width: min(980px, 100%);
}

@media (max-width: 760px) {
  .unit8-board {
    height: auto;
    min-height: 420px;
    padding: 12px;
  }

  body.unit8-active h1 {
    white-space: normal;
    font-size: clamp(26px, 7vw, 34px);
    letter-spacing: 0;
    margin-bottom: 10px;
  }

  body.unit8-active .sub,
  body.unit8-active .block-question > span:first-child {
    white-space: normal;
  }

  .unit8-intro,
  .unit8-pair-preview {
    grid-template-columns: 1fr;
  }

  .unit8-methods,
  .unit8-teach-grid {
    grid-template-columns: 1fr;
  }

  .unit8-scene {
    min-height: 220px;
    padding: 12px;
  }

  .unit8-arrows {
    display: none;
  }

  .unit8-match-grid {
    grid-template-columns: repeat(var(--cols), minmax(72px, 1fr));
  }

  .unit8-item {
    min-height: 82px;
    font-size: 14px;
  }

  .unit8-item i {
    transform: scale(.9);
  }

  .unit8-cell {
    min-height: 68px;
  }
}


/* Final exam paper */
body.exam-active h1 {
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.05;
}

body.exam-active .visual-zone {
  align-content: start;
}

.exam-shell {
  width: min(980px, 100%);
  max-height: min(68vh, 880px);
  overflow: auto;
  padding: 8px 10px 18px;
  scrollbar-width: thin;
}

.exam-paper {
  position: relative;
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 28px 30px 24px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 4%, rgba(255, 206, 213, .75), transparent 11%),
    linear-gradient(180deg, #fff, #fff9fb 72%, #fff0f4);
  box-shadow: 0 24px 58px rgba(36, 49, 66, .16), inset 0 0 0 1px rgba(255,255,255,.92);
  color: #232b3f;
}

.exam-paper-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
  align-items: center;
  min-height: 96px;
}

.exam-rings {
  position: relative;
  width: 64px;
  height: 48px;
}

.exam-rings i {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 7px solid #ff93a7;
  border-radius: 999px;
  top: 7px;
  opacity: .9;
}

.exam-rings i:first-child { left: 6px; }
.exam-rings i:last-child { left: 24px; border-color: #ffbbc7; }

.exam-paper-head h2 {
  margin: 0;
  font-size: clamp(38px, 4vw, 56px);
  letter-spacing: -2px;
  color: #232b3f;
}

.exam-paper-head p {
  margin: 8px 0 0;
  color: #687386;
  font-size: 20px;
  font-weight: 900;
}

.exam-paper-head > span {
  justify-self: end;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff5f6;
  color: #ff6f87;
  font-size: 19px;
  font-weight: 1000;
  box-shadow: 0 10px 24px rgba(255,111,135,.14), inset 0 0 0 1px rgba(255,143,163,.25);
  white-space: nowrap;
}

.exam-pig {
  width: 96px;
  height: 86px;
  position: relative;
  overflow: hidden;
  border-radius: 48px 48px 20px 20px;
}

.exam-pig::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -26px;
  height: 88px;
  border-radius: 48% 48% 42% 42%;
  background: radial-gradient(circle at 34% 36%, #fff, transparent 10%), linear-gradient(145deg, #ffc4cb, #f59aa9);
  box-shadow: inset -8px -8px 0 rgba(207,72,91,.08);
}

.exam-pig::after {
  content: "";
  position: absolute;
  left: 33px;
  top: 46px;
  width: 30px;
  height: 20px;
  border-radius: 999px;
  background: #ff8fa0;
  box-shadow: 8px -20px 0 -5px #253047, -8px -20px 0 -5px #253047;
}

.exam-pig i::before,
.exam-pig i::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 25px;
  height: 30px;
  border-radius: 70% 70% 35% 35%;
  background: #ffb0bc;
}

.exam-pig i::before { left: 14px; transform: rotate(-28deg); }
.exam-pig i::after { right: 14px; transform: rotate(28deg); }

.exam-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 18px;
  color: #2d3549;
  font-size: 18px;
  font-weight: 800;
}

.exam-section {
  margin-top: 14px;
  padding: 18px 20px 16px;
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 34px rgba(36,49,66,.08), inset 0 0 0 1px rgba(36,49,66,.05);
}

.exam-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.exam-section-title b {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  font-size: 24px;
  font-weight: 1000;
  box-shadow: 0 10px 20px rgba(36,49,66,.12);
}

.tone-1 .exam-section-title b { background: linear-gradient(145deg, #ff7f95, #f0526f); }
.tone-2 .exam-section-title b { background: linear-gradient(145deg, #77a6ff, #527bed); }
.tone-3 .exam-section-title b { background: linear-gradient(145deg, #ffc85e, #f0a62d); }
.tone-4 .exam-section-title b { background: linear-gradient(145deg, #ff8ca2, #ec5c73); }

.exam-section-title strong {
  font-size: 24px;
  color: #232b3f;
  font-weight: 1000;
}

.exam-section-title small {
  color: #7b8495;
  font-size: 15px;
  font-weight: 900;
}

.exam-line-list.compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}

.exam-line-list:not(.compact) {
  display: grid;
  gap: 10px;
}

.exam-line-item,
.exam-choice-item,
.exam-problem-item {
  min-width: 0;
  color: #263244;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.55;
}

.exam-line-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: start;
}

.exam-line-item b,
.exam-choice-item b,
.exam-problem-item b {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #fff0f4;
  color: #ff6b82;
  font-size: 15px;
  font-weight: 1000;
}

.exam-choice-list {
  display: grid;
  gap: 11px;
}

.exam-choice-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
}

.exam-choice-item p {
  grid-column: 2;
  margin: 0;
}

.exam-choice-item div {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  color: #374057;
}

.exam-choice-item span {
  display: flex;
  gap: 5px;
  align-items: center;
  white-space: nowrap;
}

.exam-choice-item em {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #fff8df;
  color: #f1a61d;
  font-style: normal;
  font-size: 13px;
  font-weight: 1000;
}

.exam-problem-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.exam-problem-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 6px 8px;
  align-content: start;
}

.exam-problem-item p,
.exam-problem-item span {
  grid-column: 2;
  margin: 0;
}

.exam-problem-item span {
  color: #5f6a7c;
}

.exam-footer {
  margin-top: 18px;
  padding: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff3f6, #fff9fb, #fff3f6);
  color: #ff6f87;
  text-align: center;
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: 3px;
}

.exam-done-choice {
  color: #2f8f68;
}

@media (max-width: 760px) {
  .exam-shell { max-height: 62vh; padding-inline: 0; }
  .exam-paper { padding: 18px 14px; border-radius: 24px; }
  .exam-paper-head { grid-template-columns: auto 1fr; }
  .exam-paper-head > span,
  .exam-pig { display: none; }
  .exam-meta,
  .exam-line-list.compact,
  .exam-problem-list { grid-template-columns: 1fr; }
  .exam-choice-item div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.exam-download-shell {
  width: min(820px, 100%);
  min-height: 430px;
  display: grid;
  place-items: center;
  margin: 0 auto;
}

.exam-download-card {
  width: min(720px, 100%);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: center;
  padding: 34px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,190,204,.42), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.72));
  box-shadow: 0 24px 58px rgba(36,49,66,.14), inset 0 0 0 1px rgba(255,255,255,.88);
}

.exam-download-icon {
  width: 116px;
  height: 150px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #fff1f5);
  color: #ff6f87;
  font-size: 32px;
  font-weight: 1000;
  box-shadow: 0 18px 34px rgba(255,111,135,.16), inset 0 0 0 3px rgba(255,175,190,.35);
}

.exam-download-card strong {
  display: block;
  color: #232b3f;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 1000;
  line-height: 1.12;
}

.exam-download-card span {
  display: block;
  margin-top: 12px;
  color: #2f8f68;
  font-size: 22px;
  font-weight: 1000;
}

.exam-download-card p {
  margin: 14px 0 0;
  color: #667086;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .exam-download-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: 24px;
  }
}

/* Mobile-only layout hardening. Desktop styles above remain unchanged. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body {
    background: linear-gradient(180deg, #fff 0%, #fff7fb 48%, #ffeaf2 100%);
  }

  .game {
    min-height: 100svh;
    display: block;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
  }

  .brand {
    min-width: 0;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.08;
  }

  .badge {
    width: 54px;
    height: 54px;
  }

  .unit-tabs {
    width: 100%;
    gap: 8px;
    padding: 2px 0 4px;
    justify-content: flex-start;
  }

  .unit-tab {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 18px;
    white-space: nowrap;
  }

  main {
    min-height: auto;
    padding: 12px 10px 16px;
  }

  .panel {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }

  .scene,
  .coach {
    width: 100%;
    min-width: 0;
    border-radius: 28px;
  }

  .scene {
    min-height: auto;
    padding: 18px 12px;
    overflow: hidden;
  }

  .scene-content {
    min-width: 0;
    gap: 12px;
  }

  h1,
  body.unit2-active.teach-active h1 {
    font-size: clamp(42px, 12vw, 62px);
    line-height: 1.03;
    letter-spacing: -0.04em;
    margin: 0;
  }

  .sub {
    max-width: 100%;
    font-size: clamp(21px, 5.8vw, 30px);
    line-height: 1.35;
    margin-top: 8px;
  }

  .visual-zone {
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  .story {
    width: 100%;
    min-width: 0;
  }

  .intro-knowledge-card {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    max-height: none;
    overflow: visible;
  }

  .intro-knowledge-visual {
    width: 100%;
    min-height: 0;
    max-height: none;
    padding: 14px;
    border-radius: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .intro-knowledge-visual.pattern-preview .tile,
  .intro-knowledge-visual .tile {
    width: min(30vw, 96px);
    height: min(30vw, 96px);
    justify-self: center;
  }

  .intro-knowledge-copy {
    gap: 8px;
  }

  .intro-knowledge-copy strong {
    font-size: clamp(32px, 8.6vw, 46px);
    line-height: 1.12;
  }

  .intro-knowledge-copy p,
  .intro-knowledge-copy li {
    font-size: clamp(20px, 5.4vw, 27px);
    line-height: 1.48;
  }

  .intro-knowledge-copy ul {
    padding-left: 1.1em;
  }

  .intro-ten-row {
    transform: scale(.82);
    transform-origin: center;
    gap: 8px;
  }

  .intro-method-flow {
    grid-column: 1 / -1;
    font-size: 20px;
    flex-wrap: wrap;
  }

  .math-scene,
  .unit2-board,
  .unit3-board,
  .unit4-board,
  .unit5-board,
  .unit6-board,
  .unit7-board,
  .unit8-board,
  .exam-download-shell {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    max-height: 58svh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .math-board,
  .unit2-simple-story-board,
  .unit2-story-board,
  .unit2-add-board,
  .unit2-compare-board,
  .unit2-operation-board,
  .unit2-symbol-board {
    max-width: 100%;
    min-width: 0;
    overflow: auto;
  }

  .pattern-row {
    width: 100%;
    min-height: 74px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 4px 2px 8px;
  }

  .tile {
    flex: 0 0 auto;
  }

  .options {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .choice,
  .primary,
  .ghost,
  .voice {
    min-height: 56px;
    font-size: 24px;
    border-radius: 18px;
  }

  .coach {
    min-height: auto;
    padding: 14px;
    gap: 12px;
  }

  .face {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 10px;
  }

  .helper {
    width: 110px;
    height: 110px;
  }

  .coach-name {
    font-size: 28px;
    line-height: 1.15;
  }

  .question {
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.22;
  }

  .hint {
    max-height: 26svh;
    overflow: auto;
    font-size: clamp(20px, 5.6vw, 28px);
    line-height: 1.38;
    padding: 16px;
  }

  .actions {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    gap: 8px;
  }

  .progress {
    display: none;
  }
}

@media (max-width: 430px) {
  main {
    padding-left: 8px;
    padding-right: 8px;
  }

  .scene {
    padding: 14px 10px;
    border-radius: 24px;
  }

  h1,
  body.unit2-active.teach-active h1 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .sub {
    font-size: clamp(19px, 5.5vw, 25px);
  }

  .intro-knowledge-copy strong {
    font-size: clamp(28px, 8vw, 38px);
  }

  .intro-knowledge-copy p,
  .intro-knowledge-copy li {
    font-size: clamp(18px, 5.2vw, 23px);
  }

  .math-scene,
  .unit2-board,
  .unit3-board,
  .unit4-board,
  .unit5-board,
  .unit6-board,
  .unit7-board,
  .unit8-board,
  .exam-download-shell {
    max-height: 54svh;
  }
}

/* Mobile patch v2: prevent fixed-height overlap and use new brand avatar. */
.badge {
  background: #fff url("./app-logo-avatar.png") center / cover no-repeat;
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(36,49,66,.12);
}
.badge::before,
.badge::after {
  display: none !important;
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .game {
    height: auto !important;
    min-height: 100svh !important;
  }

  .topbar {
    grid-template-columns: 1fr !important;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
  }

  .brand {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    font-size: clamp(22px, 6.2vw, 30px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .brand span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .badge {
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 50% !important;
  }

  .unit-tabs {
    grid-column: auto !important;
    order: initial !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px !important;
  }

  .unit-tab,
  .unit-tab.active,
  .unit-tab:hover,
  .unit-tab:focus-visible {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    max-width: none !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 16px !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  main {
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    padding: 10px 8px 14px !important;
  }

  .panel {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
  }

  .scene {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 10px !important;
  }

  .scene-content {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto auto !important;
    gap: 10px !important;
  }

  h1,
  body.unit2-active.teach-active h1 {
    font-size: clamp(34px, 9.4vw, 46px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    word-break: keep-all;
  }

  .sub {
    font-size: clamp(18px, 4.8vw, 23px) !important;
    line-height: 1.42 !important;
  }

  .visual-zone {
    max-height: 44svh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    align-content: start !important;
  }

  body.intro-active .visual-zone {
    max-height: none !important;
    overflow: visible !important;
  }

  .intro-knowledge-card {
    padding: 12px !important;
    gap: 12px !important;
  }

  .intro-knowledge-visual {
    max-height: 230px !important;
    overflow: hidden !important;
    padding: 12px !important;
  }

  .intro-knowledge-copy strong {
    font-size: clamp(28px, 7.6vw, 36px) !important;
  }

  .intro-knowledge-copy p,
  .intro-knowledge-copy li {
    font-size: clamp(17px, 4.6vw, 21px) !important;
    line-height: 1.45 !important;
  }

  .math-scene,
  .unit2-board,
  .unit3-board,
  .unit4-board,
  .unit5-board,
  .unit6-board,
  .unit7-board,
  .unit8-board,
  .exam-download-shell {
    max-height: 42svh !important;
    overflow: auto !important;
  }

  .coach {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px !important;
    border-radius: 24px !important;
  }

  .face {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .helper {
    width: 84px !important;
    height: 84px !important;
  }

  .coach-name {
    font-size: clamp(24px, 6.4vw, 31px) !important;
  }

  .stars {
    font-size: 15px !important;
  }

  .voice {
    min-height: 48px !important;
    font-size: 22px !important;
    border-radius: 16px !important;
  }

  .question {
    font-size: clamp(24px, 6.4vw, 31px) !important;
    line-height: 1.22 !important;
  }

  .hint {
    max-height: none !important;
    font-size: clamp(18px, 4.9vw, 23px) !important;
    line-height: 1.4 !important;
    padding: 14px !important;
  }

  .actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .choice,
  .primary,
  .ghost,
  .voice {
    font-size: 22px !important;
  }
}

@media (max-width: 430px) {
  .brand {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    font-size: clamp(20px, 5.8vw, 26px) !important;
  }

  .badge {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .unit-tab,
  .unit-tab.active,
  .unit-tab:hover,
  .unit-tab:focus-visible {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }

  h1,
  body.unit2-active.teach-active h1 {
    font-size: clamp(30px, 8.5vw, 40px) !important;
  }

  .visual-zone,
  .math-scene,
  .unit2-board,
  .unit3-board,
  .unit4-board,
  .unit5-board,
  .unit6-board,
  .unit7-board,
  .unit8-board,
  .exam-download-shell {
    max-height: 40svh !important;
  }
}

/* Mobile patch v3: compact no-horizontal-scroll phone layout. */
@media (max-width: 760px) {
  html,
  body {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body {
    position: fixed;
    inset: 0;
  }

  .game {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .topbar {
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;
    gap: 6px !important;
    padding: max(6px, env(safe-area-inset-top)) 10px 7px !important;
  }

  .brand {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 8px !important;
    font-size: clamp(18px, 5.2vw, 24px) !important;
    line-height: 1.05 !important;
  }

  .badge {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  .unit-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  .unit-tab,
  .unit-tab.active,
  .unit-tab:hover,
  .unit-tab:focus-visible {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 0 4px !important;
    border-width: 0 !important;
    border-radius: 999px !important;
    font-size: clamp(11px, 3.2vw, 14px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  main {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 7px 7px 8px !important;
  }

  .panel {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) minmax(210px, 35svh) !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  .scene,
  .coach {
    border-width: 1px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .scene {
    height: 100% !important;
    min-height: 0 !important;
    padding: 10px 8px !important;
  }

  .scene-content {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }

  h1,
  body.unit2-active.teach-active h1 {
    font-size: clamp(27px, 7.4vw, 36px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.05em !important;
  }

  .sub {
    margin-top: 4px !important;
    font-size: clamp(15px, 4.2vw, 19px) !important;
    line-height: 1.28 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .visual-zone {
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    overflow: hidden !important;
    align-content: center !important;
    justify-items: stretch !important;
    gap: 6px !important;
  }

  .story,
  .math-scene,
  .unit2-board,
  .unit3-board,
  .unit4-board,
  .unit5-board,
  .unit6-board,
  .unit7-board,
  .unit8-board,
  .exam-download-shell {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .pattern-row {
    min-height: 66px !important;
    height: 72px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 2px !important;
  }

  .tile {
    width: clamp(38px, 10vw, 48px) !important;
    height: clamp(52px, 13vw, 62px) !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    border-radius: 14px !important;
  }

  .flag {
    width: 28px !important;
    height: 42px !important;
  }

  .flag::before {
    height: 42px !important;
    width: 3px !important;
  }

  .flag::after {
    width: 20px !important;
    height: 14px !important;
    left: 8px !important;
    top: 5px !important;
  }

  .options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .choice {
    min-height: 42px !important;
    padding: 5px 8px !important;
    font-size: clamp(17px, 4.6vw, 22px) !important;
    border-radius: 14px !important;
  }

  .coach {
    height: 100% !important;
    min-height: 0 !important;
    padding: 9px !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    gap: 7px !important;
  }

  .face {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
  }

  .helper {
    width: 58px !important;
    height: 58px !important;
    align-self: center !important;
  }

  .coach-name {
    font-size: clamp(20px, 5.5vw, 27px) !important;
    line-height: 1.05 !important;
  }

  .stars {
    min-height: 16px !important;
    font-size: 13px !important;
    margin-top: 3px !important;
  }

  .progress-track {
    height: 6px !important;
    margin-top: 3px !important;
  }

  .voice {
    min-height: 38px !important;
    margin-top: 4px !important;
    padding: 5px 10px !important;
    font-size: clamp(17px, 4.6vw, 22px) !important;
    border-radius: 14px !important;
  }

  .question {
    font-size: clamp(22px, 6vw, 29px) !important;
    line-height: 1.12 !important;
    overflow: hidden !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .hint {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 10px !important;
    font-size: clamp(15px, 4.1vw, 19px) !important;
    line-height: 1.28 !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }

  .controls,
  .actions {
    display: grid !important;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .primary,
  .ghost {
    min-height: 42px !important;
    padding: 5px 8px !important;
    font-size: clamp(17px, 4.8vw, 22px) !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 430px) {
  .panel {
    grid-template-rows: minmax(0, 1fr) minmax(196px, 34svh) !important;
  }

  h1,
  body.unit2-active.teach-active h1 {
    font-size: clamp(25px, 7vw, 32px) !important;
  }

  .sub {
    font-size: clamp(14px, 3.9vw, 17px) !important;
  }

  .coach-name {
    font-size: clamp(19px, 5.1vw, 24px) !important;
  }

  .question {
    font-size: clamp(20px, 5.5vw, 25px) !important;
  }
}