.column-scene { max-width: 1160px; margin: 0 auto; padding: 12px 24px 50px; }
.column-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.column-progress { background: #fffbed; border-radius: 14px; padding: 10px 16px; color: #445d56; font-weight: 700; }
.column-title { text-align: center; margin: 22px 0; padding: 18px; border-radius: 22px; background: #fffbeded; }
.column-title h1 { margin: 6px 0; font-size: clamp(1.6rem,4vw,2.8rem); overflow-wrap: anywhere; }
.column-title p { color: #4f6559; margin: 8px 0 0; }
.column-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,1fr); align-items: start; gap: 20px; }
.column-paper,.column-guide { background: #fffdf4; border: 2px solid white; border-radius: 22px; padding: 20px; box-shadow: 0 8px 24px #21493b20; min-width: 0; }
.column-scroll { overflow-x: auto; position: relative; padding-bottom: 8px; }
.column-scroll:focus-visible { outline: 3px solid #7950b5; outline-offset: 4px; }
.column-board { width: 100%; border-collapse: separate; border-spacing: 3px 6px; table-layout: fixed; color: #243c37; }
.column-board caption { text-align: left; font-size: .85rem; padding-bottom: 15px; line-height: 1.6; color: #52685d; }
.column-board th { font-family: 'DM Sans',sans-serif; font-weight: 600; font-size: .65rem; overflow-wrap: anywhere; }
.column-board th:first-child { width: 74px; text-align: left; padding-right: 7px; }
.column-board td { position: relative; height: 54px; text-align: center; background: #f2f2e5; border: 2px solid transparent; border-radius: 9px; font: 500 1.7rem 'Fredoka',sans-serif; }
.column-board td>s { display: block; font: 500 .8rem 'DM Sans',sans-serif; text-decoration-thickness: 2px; color: #78503d; }
.column-board .column-source { background: #dcefe9; border-color: #39816d; }
.column-board .column-target { background: #fff1c2; border: 3px dashed #91630a; }
.column-carry td { font-size: 1.1rem; color: #7247a1; background: #f4ecfc; height: 38px; }
.column-result td { border-top: 3px solid #49695d; background: #e8f2e0; }
.column-key { font-size: .75rem; line-height: 1.6; color: #50645c; display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 0; }
.column-guide h2 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 14px; }
.column-guide p { line-height: 1.7; }
.column-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 18px 0; }
.column-choices button { font-family: 'Fredoka',sans-serif; font-size: clamp(1rem,2.5vw,1.6rem); min-height: 56px; padding: 8px 4px; }
.column-guide .wide { margin-top: 14px; }
.column-explanation { background: #eee5fb; color: #4e3974; padding: 16px; border-radius: 14px; line-height: 1.7; margin-top: 16px; }
.column-guide .kid-tools { flex-wrap: wrap; }
#column-form label { font-size: .8rem; color: #52685d; }
#column-form>div { display: flex; gap: 8px; margin-top: 6px; }
#column-input { min-width: 0; width: 100%; max-width: 180px; border: 2px solid #ac91c9; border-radius: 10px; padding: 8px; font: 1.4rem 'Fredoka',sans-serif; background: white; color: #334d43; }
.kid-play .answer-number.long-number { font-size: calc(7.6rem / var(--digits)); letter-spacing: -.02em; }
.kid-play .question-equation.large-equation { font-size: clamp(1.1rem,3.5vw,2.35rem); gap: clamp(4px,1vw,12px); flex-wrap: wrap; }
.kid-play .question-equation.large-equation>b { min-width: 0; padding: 0 8px; }
.kid-long .trail-progress { flex-wrap: wrap; }
@media(max-width:850px) {
  .column-layout { grid-template-columns: minmax(0,1fr); }
  .column-paper,.column-guide { padding: 16px; }
  .column-board { max-width: 650px; margin: auto; }
}
@media(max-width:480px) {
  .column-scene { padding: 8px 12px 30px; }
  .column-title { padding: 12px; margin: 15px 0; }
  .column-title p { font-size: .85rem; }
  .column-paper { padding: 10px; }
  .column-board { min-width: 290px; border-spacing: 2px 5px; }
  .column-board th:first-child { width: 49px; }
  .column-board th { font-size: .55rem; }
  .column-board td { font-size: 1.25rem; height: 45px; }
  .column-carry td { font-size: 1rem; height: 33px; }
  .column-choices button { font-size: 1.4rem; }
  .kid-play .answer-number.long-number { font-size: calc(6.5rem / var(--digits)); }
}

/* Multiplication is written as a stacked calculation, one row at a time. */
.multiply-scene { max-width: 1000px; }
.multiply-heading { text-align: center; margin: 18px 0 14px; color: #fffef6; text-shadow: 0 2px 7px #153f40; }
.multiply-heading>span { font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.multiply-heading h1 { font-size: clamp(1.8rem,4vw,2.5rem); margin: 3px 0; }
.multiply-roadmap { display: flex; justify-content: center; gap: 8px; padding: 0; margin: 0 auto 18px; list-style: none; }
.multiply-roadmap li { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f5f4e7; border: 2px solid transparent; border-radius: 14px; color: #536458; min-width: 0; }
.multiply-roadmap .current { background: #fff0b8; border-color: #b08424; color: #533d09; }
.multiply-roadmap .complete { background: #e0eee6; }
.multiply-roadmap strong,.multiply-roadmap small { display: block; }
.multiply-roadmap strong { font-size: .85rem; }
.multiply-roadmap small { font-size: .72rem; margin-top: 2px; }
.phase-number { width: 22px; height: 22px; border-radius: 50%; background: #fff9; display: grid; place-items: center; font-size: .75rem; flex-shrink: 0; }
.multiply-workspace { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); background: #fffef8; border: 2px solid #fff; border-radius: 24px; box-shadow: 0 8px 26px #173e4129; overflow: hidden; }
.multiply-board-area { min-width: 0; padding: 24px; background: #fffef8; }
.multiply-row-label { color: #466052; text-align: center; font-weight: 700; font-size: .85rem; margin: 0 0 16px; }
.multiply-stack { width: min(100%,calc(26px + var(--places) * 52px)); margin: auto; color: #243f38; }
.multiply-number-row { display: grid; grid-template-columns: 26px repeat(var(--places),minmax(0,1fr)); align-items: center; padding: 3px 0; position: relative; }
.multiply-sign { position: relative; left: calc(var(--sign-offset) * (100cqw - 26px) / var(--places)); }
.multiply-stack { container-type: inline-size; }
.multiply-digit,.multiply-sign { height: 48px; display: flex; align-items: center; justify-content: center; font: 500 2.4rem 'Fredoka',sans-serif; border-radius: 9px; border: 2px solid transparent; }
.multiply-carries .multiply-digit { height: 32px; font-size: 1.25rem; color: #7544ad; }
.multiply-carries .multiply-sign { height: 32px; }
.multiply-rule { border-top: 2px solid #5f7567; margin-top: 5px; padding-top: 8px; }
.multiply-digit.source-digit { background: #dbefe7; border-color: #589d84; }
.multiply-digit.target-digit { background: #fff0bd; border-color: #b18425; border-style: dashed; }
.multiply-digit.carry-digit { background: #eee0ff; border-color: #9c6acd; color: #653698; }
.multiply-digit.zero-preview { color: #906e22; background: #fffaf0; }
.finished-product { color: #6e8178; }
.multiply-board-note { text-align: center; color: #64766a; font-size: .75rem; margin: 16px 0 0; }
.multiply-coach { min-width: 0; padding: 28px 24px; background: #f3f1e8; border-left: 1px solid #e4e5da; display: flex; flex-direction: column; justify-content: center; }
.multiply-coach h2 { font-size: 1.2rem; line-height: 1.4; margin: 0 0 12px; }
.multiply-calculation { font: 500 clamp(1.55rem,3vw,2.2rem) 'Fredoka',sans-serif; margin: 0 0 10px; color: #274e41; }
.multiply-instruction { font-size: .9rem; line-height: 1.6; margin: 0; color: #4b6255; }
.multiply-coach .column-choices { margin: 16px 0 8px; }
.multiply-coach .column-choices button { font-size: 1.8rem; min-height: 60px; }
.multiply-coach .wide { margin-top: 14px; }
.multiply-type { color: #52665a; font-size: .8rem; margin-top: 10px; }
.multiply-type summary { cursor: pointer; padding: 6px 0; }
.multiply-type form { margin-top: 8px; }
.multiply-feedback>p,.multiply-tip { font-size: .9rem; line-height: 1.65; color: #415e50; margin: 12px 0 0; }
.multiply-tip { background: #fffdf4; border-radius: 12px; padding: 12px; }
.multiply-moves { display: flex; gap: 10px; margin-top: 8px; }
.multiply-moves>div { flex: 1; text-align: center; border-radius: 14px; padding: 12px 6px; }
.multiply-moves span { display: block; font-size: .8rem; font-weight: 700; }
.multiply-moves strong { font: 500 2.5rem 'Fredoka',sans-serif; }
.write-move { background: #ffedb0; color: #694600; }
.carry-move { background: #eaddfb; color: #65369b; }
.multiply-tools { display: flex; justify-content: center; gap: 14px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.multiply-tools .text-button { background: #fffdf0; border-radius: 14px; padding: 12px 18px; }
.multiply-answer { font-size: 1.25rem; line-height: 1.6; margin: 8px 0; }
@media(max-width:700px) {
  .multiply-heading { margin: 12px 0; }
  .multiply-roadmap { gap: 5px; margin-bottom: 12px; }
  .multiply-roadmap li { padding: 8px 9px; gap: 5px; }
  .multiply-roadmap strong { font-size: .75rem; }
  .multiply-roadmap small { font-size: .65rem; }
  .phase-number { display: none; }
  .multiply-workspace { grid-template-columns: minmax(0,1fr); }
  .multiply-board-area { padding: 16px 20px 12px; }
  .multiply-row-label { margin-bottom: 6px; font-size: .8rem; }
  .multiply-stack { max-width: 340px; }
  .multiply-number-row { padding: 2px 0; }
  .multiply-digit,.multiply-sign { height: 40px; font-size: 1.9rem; }
  .multiply-carries .multiply-digit,.multiply-carries .multiply-sign { height: 25px; }
  .multiply-carries .multiply-digit { font-size: 1.1rem; }
  .multiply-board-note { margin-top: 8px; font-size: .7rem; }
  .multiply-coach { padding: 16px 20px; border-left: 0; border-top: 1px solid #e4e5da; }
  .multiply-coach h2 { font-size: 1rem; margin-bottom: 8px; }
  .multiply-calculation { font-size: 1.65rem; margin-bottom: 6px; }
  .multiply-coach .column-choices { margin: 10px 0 0; }
  .multiply-coach .column-choices button { min-height: 49px; font-size: 1.5rem; }
  .multiply-instruction,.multiply-feedback>p { font-size: .8rem; }
  .multiply-moves>div { padding: 8px 6px; }
  .multiply-moves strong { font-size: 2rem; }
  .multiply-tools { margin-top: 12px; }
}